/* ============================================================================
   cc-base.css — 리셋 + 레이아웃 최소 (P1 임시본, P6 web-publisher 가 전면 교체)
   토큰 변수(cc-tokens.css)만 사용한다. HEX 하드코딩 금지.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cc-surface);
  color: var(--cc-ink);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-fs-body);
  line-height: var(--cc-lh-body);
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, figure { margin: 0 0 var(--cc-sp-4); }

a { color: var(--cc-brand-text); }

img, svg { max-width: 100%; display: block; }

button { font-family: inherit; }

:focus-visible {
  outline: var(--cc-focus-ring);
  outline-offset: 2px;
}

.cc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.cc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cc-brand-fill); color: var(--cc-on-brand);
  padding: var(--cc-sp-2) var(--cc-sp-4); border-radius: var(--cc-radius-md);
}
.cc-skip-link:focus { left: var(--cc-sp-2); top: var(--cc-sp-2); }

/* ---- 버튼 --------------------------------------------------------------- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cc-sp-2);
  min-height: var(--cc-touch-min);
  padding: 0 var(--cc-sp-5);
  border-radius: var(--cc-radius-md);
  border: var(--cc-bw-hair) solid transparent;
  font-size: var(--cc-fs-body-sm); font-weight: var(--cc-fw-semibold);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--cc-dur-base) var(--cc-ease-standard),
              border-color var(--cc-dur-base) var(--cc-ease-standard);
}
.cc-btn--lg { min-height: 48px; font-size: var(--cc-fs-body); padding: 0 var(--cc-sp-6); }
.cc-btn--sm { min-height: 32px; padding: 0 var(--cc-sp-3); font-size: var(--cc-fs-caption); }
.cc-btn--block { width: 100%; }

.cc-btn--primary { background: var(--cc-brand-fill); color: var(--cc-on-brand); border-color: var(--cc-brand-line); }
.cc-btn--primary:hover { background: var(--cc-brand-fill-hover); }
.cc-btn--accent { background: var(--cc-accent); color: var(--cc-on-accent); border-color: var(--cc-accent-line); }
.cc-btn--accent:hover { background: var(--cc-accent-hover); }
.cc-btn--ghost { background: transparent; color: var(--cc-brand-text); border-color: var(--cc-line-field); }
.cc-btn--ghost:hover { background: var(--cc-surface-sunk); }
.cc-btn--danger { background: var(--cc-danger); color: var(--cc-on-danger); border-color: var(--cc-danger-line); }
.cc-btn.is-loading { opacity: .7; pointer-events: none; }

/* ---- 폼 ------------------------------------------------------------------ */
.cc-form { display: flex; flex-direction: column; gap: var(--cc-sp-4); max-width: 420px; }
.cc-form--inline { max-width: none; }
.cc-field { display: flex; flex-direction: column; gap: var(--cc-sp-1); }
.cc-field label { font-size: var(--cc-fs-caption); font-weight: var(--cc-fw-medium); color: var(--cc-ink-muted); }
.cc-field__help { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); margin: 0; }
.cc-input {
  min-height: var(--cc-touch-min);
  padding: 0 var(--cc-sp-3);
  border: var(--cc-bw-hair) solid var(--cc-line-field);
  border-radius: var(--cc-radius-md);
  background: var(--cc-paper);
  color: var(--cc-ink);
  font-size: var(--cc-fs-body);
}
.cc-input:disabled { background: var(--cc-surface-sunk); color: var(--cc-ink-muted); }

.cc-checkbox-group { display: flex; flex-direction: column; gap: var(--cc-sp-2); }
.cc-checkbox { display: flex; align-items: flex-start; gap: var(--cc-sp-2); font-size: var(--cc-fs-body-sm); }
.cc-checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cc-brand-fill); }

/* ---- 알림 ------------------------------------------------------------------ */
.cc-alert {
  padding: var(--cc-sp-3) var(--cc-sp-4);
  border-radius: var(--cc-radius-md);
  border-left: var(--cc-bw-bar) solid transparent;
  font-size: var(--cc-fs-body-sm);
  margin-bottom: var(--cc-sp-4);
}
.cc-alert--info { background: var(--cc-info-soft); border-color: var(--cc-info); color: var(--cc-info); }
.cc-alert--warning { background: var(--cc-warning-soft); border-color: var(--cc-warning-solid); color: var(--cc-warning); }
.cc-alert--danger { background: var(--cc-danger-soft); border-color: var(--cc-danger); color: var(--cc-danger); }

/* ---- 상단바(공개) --------------------------------------------------------- */
.cc-topbar { position: sticky; top: 0; z-index: var(--cc-z-topbar); background: var(--cc-paper); border-bottom: var(--cc-bw-hair) solid var(--cc-line); }
.cc-topbar__in { max-width: var(--cc-content-w); margin: 0 auto; display: flex; align-items: center; gap: var(--cc-sp-4); padding: var(--cc-sp-3) var(--cc-sp-4); }
.cc-topbar__nav { margin-left: auto; display: flex; align-items: center; gap: var(--cc-sp-2); flex-wrap: wrap; }
.cc-logo { display: flex; align-items: center; gap: var(--cc-sp-2); font-size: var(--cc-fs-title-3); font-weight: var(--cc-fw-bold); text-decoration: none; color: var(--cc-brand-text); }
.cc-logo--sm { font-size: var(--cc-fs-body); }

/* ---- 앱 레이아웃 ----------------------------------------------------------- */
.cc-screen--app { display: flex; flex-direction: column; min-height: 100vh; }
.cc-appbar {
  display: flex; align-items: center; gap: var(--cc-sp-3);
  height: var(--cc-topbar-h); padding: 0 var(--cc-sp-4);
  background: var(--cc-paper); border-bottom: var(--cc-bw-hair) solid var(--cc-line);
  position: sticky; top: 0; z-index: var(--cc-z-topbar);
}
.cc-appbar__hshld { font-size: var(--cc-fs-body-sm); color: var(--cc-ink-muted); }
.cc-appbar__spacer { flex: 1; }
.cc-appbar__user { font-size: var(--cc-fs-body-sm); color: var(--cc-ink-muted); }

.cc-shell { display: flex; flex: 1; max-width: var(--cc-shell-w); margin: 0 auto; width: 100%; }
.cc-rail {
  width: var(--cc-rail-w); flex-shrink: 0; padding: var(--cc-sp-4);
  border-right: var(--cc-bw-hair) solid var(--cc-line);
  display: none;
}
.cc-rail__section { font-size: var(--cc-fs-micro); text-transform: uppercase; letter-spacing: var(--cc-ls-wide); color: var(--cc-ink-faint); margin: var(--cc-sp-4) 0 var(--cc-sp-2); }
.cc-rail__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 40px; padding: 0 var(--cc-sp-3); border-radius: var(--cc-radius-md);
  color: var(--cc-ink); text-decoration: none; font-size: var(--cc-fs-body-sm);
}
.cc-rail__link.is-active { background: var(--cc-brand-soft); color: var(--cc-brand-soft-text); font-weight: var(--cc-fw-semibold); }
.cc-rail__link.is-disabled { color: var(--cc-ink-faint); cursor: default; }
.cc-badge { font-size: var(--cc-fs-micro); padding: 2px 8px; border-radius: var(--cc-radius-pill); background: var(--cc-surface-sunk); color: var(--cc-ink-muted); }
.cc-badge--soon { background: var(--cc-brand-soft); color: var(--cc-brand-soft-text); }

.cc-main { flex: 1; min-width: 0; padding: var(--cc-sp-5) var(--cc-sp-4) var(--cc-sp-9); }

.cc-tabbar {
  display: flex; position: sticky; bottom: 0; z-index: var(--cc-z-topbar);
  background: var(--cc-paper); border-top: var(--cc-bw-hair) solid var(--cc-line);
  height: var(--cc-bottomtab-h);
}
.cc-tabbar a, .cc-tabbar span {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); text-decoration: none;
}
.cc-tabbar a.is-active { color: var(--cc-brand-text); font-weight: var(--cc-fw-semibold); }
.cc-tabbar span.is-disabled { color: var(--cc-ink-faint); }

@media (min-width: 1024px) {
  .cc-rail { display: block; }
  .cc-tabbar { display: none; }
}

.cc-app-footer, .cc-public-footer {
  border-top: var(--cc-bw-hair) solid var(--cc-line);
  padding: var(--cc-sp-5) var(--cc-sp-4);
  font-size: var(--cc-fs-caption); color: var(--cc-ink-muted);
}
.cc-app-footer a { color: var(--cc-ink-muted); }
.cc-public-footer__in { max-width: var(--cc-content-w); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--cc-sp-4); align-items: center; }
.cc-public-footer__in nav a { margin-right: var(--cc-sp-3); }

/* ---- 랜딩 ------------------------------------------------------------------ */
.cc-hero { max-width: var(--cc-content-w); margin: 0 auto; padding: var(--cc-sp-9) var(--cc-sp-4); text-align: center; }
.cc-hero__title { font-family: var(--cc-font-serif); font-size: var(--cc-fs-display); line-height: var(--cc-lh-display); letter-spacing: var(--cc-ls-tight); }
.cc-hero__lead { color: var(--cc-ink-muted); max-width: 560px; margin: 0 auto var(--cc-sp-6); }
.cc-hero__demo { display: flex; flex-wrap: wrap; gap: var(--cc-sp-2); justify-content: center; max-width: 520px; margin: 0 auto var(--cc-sp-6); }
.cc-hero__demo .cc-input { flex: 1; min-width: 220px; }
.cc-hero__cta { display: flex; gap: var(--cc-sp-3); justify-content: center; flex-wrap: wrap; }

.cc-section-title { font-size: var(--cc-fs-title-2); text-align: center; margin-bottom: var(--cc-sp-6); }
.cc-values, .cc-plans, .cc-faq { max-width: var(--cc-content-w); margin: 0 auto; padding: var(--cc-sp-9) var(--cc-sp-4); }
.cc-values { display: grid; gap: var(--cc-sp-5); grid-template-columns: 1fr; }
.cc-value-card { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: var(--cc-sp-5); }
.cc-plan-grid { display: grid; gap: var(--cc-sp-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cc-plan-card { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: var(--cc-sp-5); text-align: center; }
.cc-plan-card__price { font-size: var(--cc-fs-title-2); font-weight: var(--cc-fw-bold); }
.cc-faq__item { border-bottom: var(--cc-bw-hair) solid var(--cc-line); padding: var(--cc-sp-3) 0; }
.cc-faq__item summary { cursor: pointer; font-weight: var(--cc-fw-medium); min-height: var(--cc-touch-min); display: flex; align-items: center; }

@media (min-width: 768px) {
  .cc-values { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 인증 카드 -------------------------------------------------------------- */
.cc-auth-card { max-width: 420px; margin: var(--cc-sp-9) auto; padding: 0 var(--cc-sp-4); }
.cc-auth-card__title { font-size: var(--cc-fs-title-2); margin-bottom: var(--cc-sp-5); }
.cc-auth-card__desc { color: var(--cc-ink-muted); }
.cc-auth-card__links { margin-top: var(--cc-sp-4); display: flex; flex-direction: column; gap: var(--cc-sp-2); font-size: var(--cc-fs-body-sm); }
.cc-auth-card__sns { margin-top: var(--cc-sp-5); display: flex; flex-direction: column; gap: var(--cc-sp-2); }
.cc-auth-card__sns-label { text-align: center; color: var(--cc-ink-faint); font-size: var(--cc-fs-caption); }

/* ---- 법무 문서 -------------------------------------------------------------- */
.cc-legal { max-width: 720px; margin: 0 auto; padding: var(--cc-sp-7) var(--cc-sp-4); }
.cc-legal h2 { font-size: var(--cc-fs-title-3); margin-top: var(--cc-sp-6); }
.cc-legal__updated { color: var(--cc-ink-faint); font-size: var(--cc-fs-caption); margin-top: var(--cc-sp-6); }

/* ---- 오류 화면 -------------------------------------------------------------- */
.cc-error-page { max-width: 480px; margin: var(--cc-sp-9) auto; padding: 0 var(--cc-sp-4); text-align: center; }
.cc-error-page h1 { font-size: var(--cc-fs-display); }

/* ---- 앱 홈/계정/패널 --------------------------------------------------------- */
.cc-page-title { font-size: var(--cc-fs-title-2); }
.cc-page-lead { color: var(--cc-ink-muted); }
.cc-panel { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: var(--cc-sp-5); margin-bottom: var(--cc-sp-5); }
.cc-panel__title { font-size: var(--cc-fs-title-3); margin-bottom: var(--cc-sp-4); }
.cc-panel--danger { border-color: var(--cc-danger-line); }

/* ---- 빈 상태 · 스켈레톤 ------------------------------------------------------ */
.cc-empty { text-align: center; padding: var(--cc-sp-9) var(--cc-sp-4); background: var(--cc-paper); border: var(--cc-bw-hair) dashed var(--cc-line); border-radius: var(--cc-radius-lg); }
.cc-empty__msg { color: var(--cc-ink-muted); margin-bottom: var(--cc-sp-4); }
.cc-skel-grid { display: grid; gap: var(--cc-sp-4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cc-skel { height: 120px; border-radius: var(--cc-radius-lg); background: var(--cc-surface-sunk); animation: cc-skel-pulse 1.4s ease-in-out infinite; }
@keyframes cc-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---- 다이얼로그 · 토스트 ------------------------------------------------------ */
.cc-dialog {
  border: none; border-radius: var(--cc-radius-lg); padding: var(--cc-sp-6);
  max-width: 420px; width: calc(100vw - 2 * var(--cc-sp-4));
  box-shadow: var(--cc-shadow-3); color: var(--cc-ink); background: var(--cc-paper);
}
.cc-dialog::backdrop { background: var(--cc-scrim); }
.cc-dialog__actions { display: flex; gap: var(--cc-sp-3); justify-content: flex-end; margin-top: var(--cc-sp-5); }

.cc-toast-container {
  position: fixed; left: 50%; bottom: var(--cc-sp-6); transform: translateX(-50%);
  z-index: var(--cc-z-toast); display: flex; flex-direction: column; gap: var(--cc-sp-2);
  width: min(92vw, 360px);
}
.cc-toast {
  background: var(--cc-brand-900); color: var(--cc-on-brand);
  padding: var(--cc-sp-3) var(--cc-sp-4); border-radius: var(--cc-radius-md);
  font-size: var(--cc-fs-body-sm); box-shadow: var(--cc-shadow-2);
}
.cc-toast--danger { background: var(--cc-danger); }
.cc-toast--success { background: var(--cc-success); }

.cc-row { display: flex; align-items: center; }