/* ============================================================
   contextick — Design System
   모바일 우선 · 라이트/다크(OS + 수동 토글) · CSS 변수 기반.
   폰트는 지정하지 않는다(월드와이드 서비스 → 시스템 폰트).

   ── 포인트색(브랜드) 교체 지점 ──────────────────────────────
   accent 계열 토큰만 바꾸면 전체가 따라온다. 라이트값은 바로 아래
   :root 의 `--accent*`, 다크값은 다크 블록의 `--accent*` 한 곳씩.
   ============================================================ */

/* ── 디자인 토큰 (라이트 기본) ── */
:root {
  --bg:          #F5F6F8;   /* 회색 캔버스 */
  --surface:     #FFFFFF;   /* 카드/헤더 면 */
  --ink:         #181A1F;   /* 본문 텍스트 */
  --muted:       #565C66;   /* 보조 텍스트 — WCAG AA(6.2:1 on bg) */
  --faint:       #656B75;   /* 메타/플레이스홀더 — WCAG AA(4.96:1 on bg) */
  --line:        #E5E8EC;   /* 기본 경계선 */
  --line-strong: #D6DAE0;   /* 버튼/강조 경계선 */

  /* ★ 브랜드 포인트색(라이트) — 여기만 바꾸면 전체 반영 */
  --accent:      #0C7C82;   /* 딥 틸 — 화이트 위 대비 ≈5:1 */
  --accent-soft: #E4F4F5;   /* 포인트색 연한 배경 */
  --on-accent:   #FFFFFF;   /* 포인트색 위 텍스트 */

  --danger:      #D92D20;   /* 위험(삭제) */
  --danger-soft: #FCEBE9;   /* 위험색 연한 배경 */

  --radius-card: 14px;
  --radius-btn:  9px;
  --radius-chip: 999px;

  --maxw:      720px;       /* 읽는 페이지(약관·FAQ·연결·계정·auth) 컬럼 */
  --maxw-wide: 980px;       /* 랜딩·헤더/푸터 정렬 폭 */
  --pad-x:     clamp(1.1rem, 5vw, 2rem);

  color-scheme: light dark;
}

/* ── 다크 토큰 (OS 자동 + [data-theme] 수동 토글) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0B0C0E; --surface:#16181C;
    --ink:#E9EBEE; --muted:#8B919B; --faint:#858B94;   /* faint: WCAG AA(5.2:1 on dark surface) */
    --line:#23262C; --line-strong:#33373E;
    /* ★ 브랜드 포인트색(다크) */
    --accent:#38C5D1; --accent-soft:#0E2B2D; --on-accent:#05252A;
    --danger:#F3675A; --danger-soft:#2A1614;
  }
}
:root[data-theme="dark"] {
  --bg:#0B0C0E; --surface:#16181C;
  --ink:#E9EBEE; --muted:#8B919B; --faint:#858B94;   /* faint: WCAG AA(5.2:1 on dark surface) */
  --line:#23262C; --line-strong:#33373E;
  --accent:#38C5D1; --accent-soft:#0E2B2D; --on-accent:#05252A;
  --danger:#F3675A; --danger-soft:#2A1614;
}

/* ── 리셋 / 베이스 ── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { min-height: 100%; }
body {
  /* 시스템 폰트 스택(월드와이드) — 한글/CJK 폴백 포함. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* 푸터를 항상 바닥으로. */
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--accent); }

/* 스킵 링크(WCAG 2.4.1) — 평소 숨김, 키보드 포커스 시 좌상단에 노출. */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
  background: var(--surface); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ── 헤더 ── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* 데스크톱 3구역: 로고(좌) · Connect·FAQ(중앙, 절대배치로 뷰포트 정중앙) · auth/프로필/컨트롤(우).
   position:relative 는 .nav-primary 절대 중앙정렬의 기준. */
.site-header__inner {
  position: relative;
  width: 100%; max-width: var(--maxw-wide); margin: 0 auto;
  padding: 0.7rem var(--pad-x);
  display: flex; align-items: center; gap: 0.6rem;
}
.logo {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
  margin-right: auto;   /* 로고만 좌측, 나머지(nav-auth·아바타·컨트롤)는 우측으로 밀린다 */
}
/* 도트-헥사 로고 마크(logo.svg). mask 로 얹어 색을 --accent 에 묶는다 → 라이트/다크 자동
   (원본 SVG 의 점별 opacity 는 mask 알파로 보존돼 농담 그라데이션이 그대로 유지된다). */
.logo-mark {
  width: 1.7rem; height: 1.7rem; flex: 0 0 auto;
  background: var(--accent);
  -webkit-mask: url("/static/logo.svg") center / contain no-repeat;
          mask: url("/static/logo.svg") center / contain no-repeat;
}

.header-actions { display: flex; align-items: center; gap: 0.35rem; }
/* .site-nav 는 중앙 그룹(nav-primary, 절대배치) + 우측 auth 그룹(nav-auth)을 담는다. */
.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.nav-primary {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.15rem;
}
.nav-auth { display: flex; align-items: center; gap: 0.5rem; }
.nav-link {
  font-size: 0.9rem; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-btn);
}
.nav-link:hover { color: var(--ink); }
/* 로그인 후 헤더: 프로필 아바타(→ /account). 데스크톱은 원형 이미지만, 모바일 드롭다운에선 원형 + "My account" 라벨 행.
   .nav-label 은 데스크톱에서 숨김(아바타/테마 공통). */
.header-avatar { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; text-decoration: none; color: var(--ink); }
.header-avatar__img {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 0.9rem; line-height: 1; border: 1px solid var(--line);
}
.header-avatar__img img { width: 100%; height: 100%; object-fit: cover; }
.nav-label { display: none; }

/* 아이콘 컨트롤(테마 토글) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--bg); }
.icon-btn svg { width: 18px; height: 18px; }
/* 테마 토글 아이콘: 라이트=달, 다크=해. data-theme 로 스왑(무JS 시 OS 기준 CSS 폴백). */
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* 햄버거(CSS 체크박스 — 무JS 동작). 체크박스는 화면엔 안 보이되 키보드 포커스는 가능하게 두어
   키보드 사용자도 Space 로 메뉴를 연다(WCAG 2.1.1). 데스크톱은 내비가 상시 노출이라 탭 순서에서 제외. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-btn); color: var(--ink);
}
.nav-burger:hover { background: var(--bg); }
.nav-burger svg { width: 22px; height: 22px; }
.nav-burger .ic-x { display: none; }
.nav-toggle:checked ~ .header-actions .nav-burger .ic-menu { display: none; }
.nav-toggle:checked ~ .header-actions .nav-burger .ic-x { display: block; }
/* 체크박스 포커스 시 버거에 가시 링(라벨은 포커스 불가 → 인접 형제로 표시). */
.nav-toggle:focus-visible ~ .header-actions .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 641px) { .nav-toggle { display: none; } }

@media (max-width: 640px) {
  .nav-burger { display: inline-flex; }
  /* 모바일: 내비 전체를 드롭다운으로(Connect·FAQ·Sign in·Get started 모두 햄버거 안).
     중앙 절대배치·우측 정렬은 해제하고 세로 스택. */
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 0.4rem var(--pad-x) 0.8rem;
    box-shadow: 0 12px 24px -18px rgba(0,0,0,0.4);
    display: none;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-primary { position: static; transform: none; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-auth { flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin-top: 0.3rem; }
  .site-nav .nav-link { width: 100%; justify-content: flex-start; padding: 0.7rem 0.5rem; }
  .site-nav .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
  /* 드롭다운 안: 좌측 정렬 통일 — My account 는 텍스트만(아바타 원 숨김). 테마 토글은 푸터로 이동. */
  .site-nav .header-avatar { width: 100%; padding: 0.7rem 0.5rem; margin-top: 0.3rem; }
  .site-nav .header-avatar__img { display: none; }
  .site-nav .nav-label { display: inline; font-size: 0.9rem; font-weight: 600; }
}

/* ── 본문 / 푸터 ── */
.site-main { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 1.75rem var(--pad-x) 2.5rem; flex: 1 0 auto; }
.site-main--wide { max-width: var(--maxw-wide); }

.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  width: 100%; max-width: var(--maxw-wide); margin: 0 auto;
  padding: 1.75rem var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 0.95rem;
  color: var(--faint); font-size: 0.85rem;
}
.footer-copy { display: inline-flex; align-items: center; gap: 0.45rem; }
.footer-copy svg { width: 1.1rem; height: 1.1rem; color: var(--faint); }
.site-footer a { color: var(--faint); text-decoration: none; }
.site-footer a:hover { color: var(--muted); }
.footer-links { display: flex; gap: 0.95rem; }
/* 우측 클러스터: 링크 + 구분선 + 테마 토글. 테마 토글은 전 화면에서 여기 하나뿐(헤더엔 없음). */
.footer-end { display: flex; align-items: center; gap: 0.95rem; }
.footer-divider { width: 1px; height: 1rem; background: var(--line); flex: 0 0 auto; }
.footer-theme-toggle { display: inline-flex; width: 32px; height: 32px; color: var(--faint); }
.footer-theme-toggle:hover { color: var(--ink); }
.footer-theme-toggle svg { width: 16px; height: 16px; }
/* 모바일: 좌우 분리 대신 세로 스택 + 링크 중앙 정렬(어색한 줄바꿈 방지). */
@media (max-width: 480px) {
  .site-footer__inner { flex-direction: column; text-align: center; gap: 0.85rem; }
  .footer-links { justify-content: center; }
}

/* ── 브레드크럼 ── */
.breadcrumb { margin: 0 0 1.25rem; font-size: 0.9rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumb li { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); min-width: 0; }
.breadcrumb li + li::before { content: "\203A"; color: var(--faint); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }

/* ── 버튼 시스템 ── */
button { font-family: inherit; cursor: pointer; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  padding: 0.6rem 1rem;
}
.btn:hover { border-color: var(--muted); background: var(--bg); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 1차 행동 — 솔리드 포인트색 채움 */
.btn--primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.btn--primary:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); opacity: 0.92; }
/* 포인트색 아웃라인 */
.btn--accent { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.btn--accent:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* 위험 */
.btn--danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn--danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
/* 크기/형태 */
.btn--sm { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
.btn--lg { font-size: 0.98rem; padding: 0.8rem 1.35rem; }
.btn--block { width: 100%; }
/* 구글 로그인 — 브랜드 G 마크 */
.btn-google { gap: 0.6rem; }
.btn-google::before {
  content: "G"; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--surface); font-weight: 700; font-size: 0.8rem;
}

/* ── 폼 / 입력 ── */
input, textarea, select { font-family: inherit; }
form input[type="text"], form input[type="email"], form input[type="search"], form textarea {
  display: block; width: 100%; margin: 0.5rem 0;
  padding: 0.65rem 0.85rem; font-size: 1rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 11px;
}
form input::placeholder, form textarea::placeholder { color: var(--faint); }
form input:focus, form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.form-error { color: var(--danger); font-size: 0.9rem; margin: 0 0 0.5rem; }
.form-hint { font-size: 0.82rem; color: var(--muted); margin: 0.5rem 0 0; }

/* ── 산문(prose) — 약관·방침·FAQ·연결 상세 ── */
.prose { }
.prose > *:first-child { margin-top: 0; }
.prose h1 { font-size: clamp(1.6rem, 3.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 0.6rem; }
.prose h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin: 2rem 0 0.6rem; }
.prose h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.4rem; }
.prose p { margin: 0 0 0.9rem; }
.prose ul, .prose ol { margin: 0 0 0.9rem; padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.prose li { margin: 0; }
.prose li > ul, .prose li > ol { margin: 0.4rem 0 0; }
.prose strong, .prose b { font-weight: 700; }
.prose a { color: var(--accent); font-weight: 600; text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose .lead { font-size: 1.12rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.25rem; }
.prose code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em;
  padding: 0.08rem 0.35rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  word-break: break-word;
}
.prose pre {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 0.9rem 1rem; margin: 0 0 1rem;
}
.prose pre code { border: 0; padding: 0; background: none; font-size: 0.85rem; }
/* 안내 박스(연결 가이드 "coming soon" 등) */
.prose .note {
  background: var(--accent-soft); border: 1px solid transparent; border-left: 3px solid var(--accent);
  border-radius: var(--radius-card); padding: 0.85rem 1rem; margin: 0 0 1rem; color: var(--ink);
}
.prose .note strong { color: var(--accent); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); }
.prose figure.shot { margin: 0.75rem 0; }
.prose figure.shot img { border: 1px solid var(--line); border-radius: 10px; }
/* 미세 문구 */
.fine { color: var(--muted); font-size: 0.9rem; }
.fine.warn { color: #B45309; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fine.warn { color: #E8A24A; } }
:root[data-theme="dark"] .fine.warn { color: #E8A24A; }
.legal-updated { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.5rem; }

/* ── FAQ 페이지 — 넓은 본문(주 칼럼, 좌측 정렬) + 우측 스티키 TOC 레일 + 섹션별 아코디언 ──
   본문은 인트로(.faq-head)와 좌측 정렬을 맞춰 폭을 넓게 쓰고, TOC 는 고정폭 우측 레일.
   모바일(≤860): 단일 열 + TOC 는 본문 위 컴팩트 카드. */
.faq-head { margin: 0 0 1.75rem; }
.faq-head h1 { font-size: clamp(1.6rem, 3.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.faq-head .lead { font-size: 1.12rem; color: var(--muted); line-height: 1.6; margin: 0; max-width: 62ch; text-wrap: pretty; }

.faq-layout {
  display: grid; gap: 0 3rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) 14rem;
}
.faq-main { grid-column: 1; min-width: 0; }
.faq-toc-side { grid-column: 2; position: sticky; top: 4.75rem; font-size: 0.88rem; align-self: start; }
.faq-toc-side .toc-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); font-weight: 600; margin: 0 0 0.7rem; }
.faq-toc-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.faq-toc-side a {
  display: block; color: var(--muted); text-decoration: none; padding: 0.32rem 0.55rem; line-height: 1.35;
  border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
}
.faq-toc-side a:hover { color: var(--ink); background: var(--surface); }
.faq-toc-side a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.faq-tools { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
.faq-tools button {
  font-size: 0.8rem; font-weight: 600; color: var(--muted); background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 0.35rem 0.75rem; cursor: pointer;
}
.faq-tools button:hover { color: var(--ink); border-color: var(--muted); }

.faq-section { margin: 0 0 1.75rem; scroll-margin-top: 4.75rem; }
.faq-section > h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.3rem; padding-bottom: 0.3rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem; color: var(--ink); padding: 0.9rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--faint); font-weight: 700; font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2212"; color: var(--accent); }
.faq-item summary:hover { color: var(--accent); }
.faq-item .faq-answer { padding: 0 0 1.1rem; color: var(--muted); line-height: 1.7; }
.faq-item .faq-answer :first-child { margin-top: 0; }
.faq-item .faq-answer a { color: var(--accent); text-decoration: none; }
.faq-item .faq-answer a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; gap: 0; }
  .faq-main { grid-column: 1; }
  /* 모바일: TOC 를 본문 위 컴팩트 카드로(스티키 해제). 짧은 점프 목록 — 단일 열에선 자연스럽다. */
  .faq-toc-side {
    grid-column: 1; position: static; order: -1; margin: 0 0 1.5rem;
    border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: 0.9rem 1rem;
  }
  .faq-toc-side ol { grid-template-columns: 1fr 1fr; gap: 0.1rem 0.6rem; }
}
@media (max-width: 460px) {
  .faq-toc-side ol { grid-template-columns: 1fr; }
}

/* ============================================================
   랜딩(home) — .site-main--wide 안에서 섹션 단위 구성
   ============================================================ */
.section { margin-top: clamp(3rem, 7vw, 4.5rem); scroll-margin-top: 5rem; }
/* 모든 섹션: 제목 가운데 정렬 + 그 아래 내용. 리드·산문·목록·표는 가운데 정렬된 가독 폭 블록
   (문단 텍스트 자체는 좌측 정렬로 읽기 편하게). */
.section > h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 0.5rem; text-align: center;
}
/* 제목 아래 짧은 accent 언더라인 — 가운데 정렬 제목의 밋밋함을 줄이는 브랜드 포인트.
   CTA(cta-final)는 스파클 마크가 있어 제외. */
.section:not(.cta-final) > h2::after {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--accent); border-radius: 2px; margin: 0.75rem auto 0;
}
.section > .section-lead { color: var(--muted); max-width: 40rem; margin: 0 auto 1.75rem; text-align: center; }
.section > p, .section > .essentials, .section > .roadmap { max-width: 46rem; margin-inline: auto; line-height: 1.7; }
.section > p { margin: 0 auto 0.9rem; }
.section > .compare { max-width: 46rem; margin: 0 auto; }
.section--center { text-align: center; }
.section--center > .section-lead { margin-left: auto; margin-right: auto; }

/* ── HERO ── */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hero__col { min-width: 0; }
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.1rem); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.08; margin: 0 0 1rem; text-wrap: balance;
}
.hero .lead {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--muted); line-height: 1.6;
  max-width: 34rem; margin: 0 0 1.6rem; text-wrap: pretty;
}
.hero-note { font-size: 0.85rem; color: var(--faint); margin: 1.1rem 0 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Hero 그래픽: Obsidian graph 스타일 허브 — 중앙 = 내 store, 주변 = 연결된 AI들.
   그래프(엣지·노드·신호)는 정적 SVG 로 베이크(assets/views/_hero_hub.html, seed=16·320노드),
   애니메이션은 순수 CSS(offset-path) — 런타임 JS 없음. */
.hero-visual-wrap { min-width: 0; }
/* 히어로 그래픽 하단 캡션(작게). */
.hero-visual__caption { text-align: center; margin: 1rem 0 0; font-size: 0.82rem; font-weight: 500; letter-spacing: 0; color: var(--faint); }

@keyframes ctk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctk-travel {
  0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; }
  50% { offset-distance: 100%; opacity: 1; } 90% { opacity: 1; }
  100% { offset-distance: 0%; opacity: 0; }
}
/* 중앙 로고 발광 — 본체 전체 밝기를 opacity 로 부드럽게 왕복(전체가 숨쉬듯).
   filter(그림자 transparent→색 보간)는 재생 중 뚝 끊기는 아티팩트가 있어 쓰지 않는다
   — 순수 opacity 왕복이 가장 매끄럽다. */
@keyframes ctk-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* 노드 반짝임 — 가장 밝은 30개만(노드별 타이밍 상이). opacity 만 애니메이션해 페인트 부담 최소. */
@keyframes ctk-tw { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* 성운 팔레트 — teal(브랜드) 주조 + 골드/블루/바이올렛 별 + 후퇴 haze/dust. 밝기 티어로 배정(베이크).
   .hero-hub 스코프(전역 토큰 미오염). 라이트=진하게(흰 배경 가독) / 다크=발광(검정 위 별빛). */
.hero-hub {
  --star-hot:#0A5E63; --star-warm:#B87A2A; --star-core:var(--accent); --star-cool:#2C6DAE;
  --star-violet:#6A55A0; --star-haze:#7FA0A6; --star-dust:#AEB8BF;
  position: relative; width: 460px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-hub {
    --star-hot:#DFF7FA; --star-warm:#F1C572; --star-cool:#6FA8FF;
    --star-violet:#BFA3F2; --star-haze:#2E6E74; --star-dust:#4A555D;
  }
}
:root[data-theme="dark"] .hero-hub {
  --star-hot:#DFF7FA; --star-warm:#F1C572; --star-cool:#6FA8FF;
  --star-violet:#BFA3F2; --star-haze:#2E6E74; --star-dust:#4A555D;
}
.hero-hub__glow {
  position: absolute; inset: 6%; z-index: 0; border-radius: 50%; opacity: 0.7;
  background: radial-gradient(58% 58% at 50% 50%, var(--accent-soft), transparent 72%);
}
.hero-hub__graph { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; animation: ctk-fade 0.8s both; }
.hero-hub__ai { position: absolute; inset: 0; z-index: 3; }
.hero-hub__ai-slot { position: absolute; transform: translate(-50%, -50%) scale(0.9); animation: ctk-fade 0.8s both; }
/* 브랜드 아이콘 칩: 흰 원(브랜드 로고 가독성 위해 테마 무관 고정 흰 배경).
   color-scheme:light — 배경이 항상 흰색이라, 내부 @media(prefers-color-scheme)로
   다크에서 흰색이 되는 로고(chatgpt.svg)를 라이트 변형(어두운 색)으로 고정. */
.hero-hub__ai-badge {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
  box-shadow: 0 8px 20px -10px rgba(8,40,42,0.45); color-scheme: light;
}
.hero-hub__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; }
.hero-hub__logobg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, var(--bg) 30%, transparent 70%);
}
.hero-hub__logo img { position: relative; z-index: 1; width: 52px; height: 52px; display: block; animation: ctk-glow 3.4s ease-in-out infinite; }

/* ── 로고 스트립(Works with…) ── */
.logo-strip { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.logo-strip__label {
  text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 1rem;
}
.logo-strip__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.logo-strip__list li {
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-chip);
  padding: 0.4rem 0.95rem;
}

/* ── 카드 그리드(steps / essentials) ── */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.35rem 1.25rem;
  /* 번호(step-n)+제목(h3)을 한 행에, 본문(p)은 그 아래 전체 폭으로.
     align-content:start — 카드가 늘어나도 내용은 상단 정렬(카드 간 헤더 높이 일치). */
  display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; column-gap: 0.7rem;
}
.feature-card h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.feature-card p { grid-column: 1 / -1; margin: 0.7rem 0 0; font-size: 0.95rem; color: var(--muted); line-height: 1.6; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin: 0; flex: 0 0 auto;
  font-size: 0.9rem; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border-radius: var(--radius-chip);
}
/* 상단 규칙선 강조 카드(essentials) */
.rule-card { padding: 1.2rem 1.1rem; border-top: 2px solid var(--accent); }
.rule-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; }
.rule-card p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.6; }

/* ── 예시(텍스트, GEO 보존) ── */
.examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.example {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.2rem 1.15rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.example-label {
  align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-chip); padding: 0.2rem 0.6rem; margin: 0;
}
/* 상황 설명(설정) — 플레인 muted. 아래 두 대화와 구분됨. */
.example-situation { margin: 0; font-size: 0.9rem; color: var(--muted); }
/* 현재/나중 대화 — 좌측 세로 룰 + AI 아이콘·라벨 + 인용. 나중(recall)은 accent 룰로 강조. */
.example-turn { margin: 0; border-left: 2px solid var(--line-strong); padding-left: 0.7rem; }
.example-turn--later { border-left-color: var(--accent); }
.example-turn__head { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.2rem; }
.example-turn__head .ex-ai { width: 15px; height: 15px; flex: 0 0 auto; object-fit: contain; }
.example-where { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.example-turn__quote { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
/* 재사용 패턴: "카드 묶음 + 그 아래 부가 설명(캡션)". 넉넉한 상단 간격 + muted·작게·가운데.
   `.section > p`(0,1,1)와 동일 특이도지만 뒤에 정의돼 이겨 상단 간격이 유지된다. */
.section > .section-note { margin: 2.25rem auto 0; max-width: 46rem; color: var(--muted); font-size: 0.95rem; line-height: 1.7; text-align: center; }

/* ── "카드 두 개" 대비(왜 잊나 / Notion) ── */
.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.prose-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.6rem 1.5rem;
}
.prose-card h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.7rem; }
.prose-card p { margin: 0 0 0.8rem; color: var(--muted); line-height: 1.65; }
.prose-card p:last-child { margin: 0; color: var(--ink); }
.prose-card em { font-style: italic; }
.prose-card strong { color: var(--accent); }

/* ── 비교표 ── */
.compare-wrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: clamp(1.5rem, 4vw, 2rem);
}
.compare-wrap > h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.compare-wrap > .section-lead { color: var(--muted); line-height: 1.6; max-width: 44rem; margin: 0 0 1.4rem; }
.compare { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 0.92rem; }
.compare th, .compare td { padding: 0.85rem 1rem; text-align: left; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.compare thead th:first-child, .compare tbody th { border-left: 0; }
.compare thead th { background: var(--bg); font-weight: 600; }
.compare thead th:nth-child(2) { color: var(--muted); }
.compare thead th:nth-child(3) { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.compare thead tr th { border-top: 0; }
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare tbody td:nth-child(2) { color: var(--muted); }
.compare tbody td:last-child { color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }

/* ── 연결 카드(랜딩) ── */
.connect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0.75rem; grid-auto-rows: 1fr; }
/* 컴팩트 변형(랜딩) — 아이콘+이름 한 행 / 설명 한 행. grid-auto-rows:1fr + height:100% 로 6개 카드 균일 높이. */
.connect-card--compact { flex-direction: column; align-items: stretch; gap: 0.5rem; height: 100%; padding: 1rem 1.1rem; }
.connect-card__head { display: flex; align-items: center; gap: 0.55rem; }
.connect-card--compact .connect-card__badge { width: 2rem; height: 2rem; }
.connect-card--compact .connect-card__badge img { width: 1.25rem; height: 1.25rem; }
.connect-card--compact .connect-card__badge .brand-icon { width: 1.25rem; height: 1.25rem; }
.connect-card--compact .connect-card__name { margin: 0; font-size: 0.98rem; }
.connect-card {
  display: flex; gap: 0.9rem; align-items: flex-start; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.1rem 1.2rem; color: inherit;
}
.connect-card:hover { border-color: var(--line-strong); }
.connect-card__badge {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; color: var(--ink); overflow: hidden;
}
/* 뱃지 배경(다크/라이트 적응) 위에 공식 아이콘을 contain 으로. 완전 투명화 방지·크기 일관. */
.connect-card__badge img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
/* 단색 아이콘(cli·chatgpt)은 mask 로 재착색 → 다크/라이트에 색이 따라온다(검정 고정 방지).
   기본 ink(라이트 검정↔다크 흰색), --accent 는 포인트색. --brand-mask 는 인라인 style 로 아이콘 지정. */
.brand-icon {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto; background: var(--ink);
  -webkit-mask: var(--brand-mask) center / contain no-repeat;
          mask: var(--brand-mask) center / contain no-repeat;
}
.brand-icon--accent { background: var(--accent); }
.connect-card__name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink); margin: 0 0 0.2rem; }
.connect-card__desc { display: block; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.tag-free {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-chip); padding: 0.12rem 0.5rem;
}

/* ── CTA ── */
.cta-final { text-align: center; background: var(--accent-soft); border-radius: 20px; padding: clamp(1.7rem, 4vw, 2.3rem) 1.5rem; }
.cta-final__mark {
  display: inline-block; width: 1.9rem; height: 1.9rem; margin: 0 0 0.6rem;
  background: var(--accent);
  -webkit-mask: url("/static/logo.svg") center / contain no-repeat;
          mask: url("/static/logo.svg") center / contain no-repeat;
}
.cta-final h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.45rem; text-wrap: balance; }
.cta-final .cta-note { color: var(--muted); max-width: 40rem; margin: 0 auto 1.2rem; line-height: 1.55; font-size: 0.92rem; }
.cta-final .cta-row { justify-content: center; }

/* ── 리스트(랜딩 인라인) ── */
.connect-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.connect-list li { color: var(--muted); line-height: 1.6; }
.connect-list a { color: var(--ink); font-weight: 700; }
/* 라벨 + 설명 항목 리스트(essentials·roadmap 공용). 라벨은 독립 줄(볼드), 설명은 아래(muted),
   앞에 작은 accent 마커로 스캔성↑. 카드 없이 가벼운 term/definition 형태. */
.essentials, .roadmap { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.essentials li, .roadmap li { position: relative; padding-left: 1.5rem; color: var(--muted); line-height: 1.6; }
.essentials li::before, .roadmap li::before {
  content: ""; position: absolute; left: 0; top: 0.45rem;
  width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--accent);
}
.essentials strong, .roadmap strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 0.1rem; }
.connect-list a { color: var(--accent); }

/* ============================================================
   Pricing (/pricing) — 단일 FREE 카드
   ============================================================ */
.pricing .section-lead { margin-bottom: 2rem; }
.price-card {
  max-width: 22rem; margin: 0 auto; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.75rem 1.6rem;
}
.price-plan { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.price-amount { margin: 0.2rem 0 0; font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.05; }
.price-currency { font-size: 1.5rem; font-weight: 700; vertical-align: super; margin-right: 0.08rem; }
.price-tagline { margin: 0.6rem 0 1.3rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.price-features { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.8rem; }
.price-features li { position: relative; padding-left: 1.6rem; color: var(--ink); line-height: 1.5; font-size: 0.95rem; }
.price-features li::before {
  /* "✓" / "" — 뒤의 빈 문자열은 접근성 대체 텍스트라 스크린리더가 글리프를 "check mark" 로 읽지 않는다
     (장식용). 기존 .essentials/.roadmap 이 content:"" 로 낭독을 피하는 것과 같은 취지. */
  content: "✓" / ""; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700;
}

/* ============================================================
   계정 · 인증 · 상태 페이지
   ============================================================ */
.account h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.25rem 1.3rem; margin: 0 0 1rem;
}
/* 카드 제목 아래 얇은 구분선(제목↔내용 분리). 폭은 카드 내부 여백만큼 안쪽으로 들어간다. */
.card > h2 {
  margin: 0 0 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
/* 제목 헤더 행 — 제목(좌) + 액션 버튼(우, 예: 로그아웃). 구분선은 이 행 아래로. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; padding: 0; border: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.card > h3 { font-size: 0.95rem; font-weight: 700; margin: 1.3rem 0 0.4rem; }
.card p { margin: 0 0 0.6rem; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 0 0 0.6rem; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.card a { color: var(--accent); text-decoration: none; }
.card a:hover { text-decoration: underline; }
/* 앵커형 버튼(.btn)은 컨테이너 링크의 hover 밑줄을 물려받지 않는다(예: .card 안 Log out).
   컨테이너 규칙(.card a:hover · .prose a:hover, 명세도 0,2,1)과 스코프를 맞춰(0,3,1) 이기게 한다
   — a.btn:hover(0,2,1) 단독은 소스 순서로만 이겨 규칙을 위로 옮기면 조용히 밑줄이 되살아난다. */
.card a.btn:hover, .prose a.btn:hover { text-decoration: none; }
.card code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em;
  padding: 0.08rem 0.35rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
/* MCP 연결 설명 — 보조 정보라 작고 muted 하게. 굵은 라벨도 세미볼드로 낮춰 "API keys" 제목·표가 주가 되게. */
.mcp-intro { font-size: 0.9rem; color: var(--muted); }
.mcp-intro p { margin: 0 0 0.5rem; }
.mcp-intro ul { margin: 0 0 0.5rem; }
.mcp-intro strong { color: var(--ink); font-weight: 600; }

.card--danger { border-color: var(--danger); }
.card--danger > h2 { color: var(--danger); border-bottom-color: var(--danger-soft); }
.card-actions { margin: 1rem 0 0; }

/* 프로필 — 아바타(좌) + 이름·이메일(우). 모바일에서 이메일이 넘쳐 잘리지 않게 min-width:0 + 줄바꿈. */
.profile-row { display: flex; align-items: center; gap: 1rem; }
.profile-id { min-width: 0; }
.profile-name { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.profile-email { margin: 0.15rem 0 0; word-break: break-word; }
.card .avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.avatar--lg { width: 56px; height: 56px; }
.avatar--letter {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 1.4rem; line-height: 1;
}

/* Plan & usage — 라벨/값 행 + 저장 용량 미터. */
.stat-list { margin: 0; }
.stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.stat-row:last-child { border-bottom: 0; }
.stat-row dt { color: var(--muted); font-size: 0.9rem; }
.stat-row dd { margin: 0; color: var(--ink); text-align: right; }
.usage-meter { margin-top: 1rem; }
.usage-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.88rem; color: var(--muted); margin: 0 0 0.45rem; }
.usage-meter__head span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); }
.usage-bar { height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-chip); overflow: hidden; }
.usage-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-chip); }
.usage-bar[data-full] > span { background: var(--danger); }
.usage-meter .fine { margin: 0.5rem 0 0; }
.usage-remaining { text-align: right; }

/* 계정 삭제 폼 — 라벨/입력은 전체 폭, Delete 버튼은 우측 정렬. 입력·버튼 높이는 공통값. */
.delete-account-form { display: flex; flex-direction: column; }
.delete-account-form input { margin: 0.5rem 0 0; height: var(--control-h); }
.delete-account-form button { align-self: flex-end; margin-top: 0.7rem; height: var(--control-h); }

/* 좁은 화면에서 표가 카드를 벗어나지 않게 가로 스크롤로 가둔다. */
.table-scroll { overflow-x: auto; margin: 0.5rem 0; }
.keys { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.88rem; margin: 0; }
.keys th, .keys td { text-align: left; padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.keys th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); font-weight: 600; }
.keys code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; }
.key-reveal { background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: var(--radius-card); padding: 1rem 1.1rem; margin: 0.75rem 0; }
.key-reveal p { margin: 0 0 0.5rem; }
.key-reveal-warn { color: var(--danger); }
.key-copy-row { display: flex; align-items: center; gap: 0.6rem; }
.key { flex: 1; min-width: 0; margin: 0; word-break: break-all; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }
/* 목록의 키 셀 — 마스킹 접두어 + 복사 아이콘(표시 형식 유지). td 는 table-cell 유지, 인라인 정렬. */
.keys .key-cell code { color: var(--muted); vertical-align: middle; }
/* 작은 아이콘 버튼(복사·삭제 공용, 텍스트 없음). */
.copy-btn, .del-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  background: var(--surface); cursor: pointer;
}
.copy-btn { color: var(--muted); }
.copy-btn:hover { color: var(--ink); border-color: var(--muted); background: var(--bg); }
.del-btn { color: var(--danger); }
.del-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.copy-btn:focus-visible, .del-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-btn svg, .del-btn svg { width: 15px; height: 15px; }
/* 복사 성공 시 체크 아이콘으로 잠깐 전환. */
.copy-btn .ic-check { display: none; }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
.copy-btn.copied .ic-copy { display: none; }
.copy-btn.copied .ic-check { display: block; }
/* 폼 컨트롤 공통 높이 — 표준 form input(계정 삭제 입력창)의 렌더 높이 41.8px 기준. box-sizing:border-box.
   새 키 입력·버튼, 계정 삭제 입력·버튼이 모두 이 높이로 정렬된다. */
:root { --control-h: 2.6rem; }
.new-key-form { display: flex; gap: 0.6rem; margin-top: 0.85rem; flex-wrap: wrap; align-items: center; }
.new-key-form input { flex: 1 1 12rem; min-width: 0; margin: 0; height: var(--control-h); }
.new-key-form .btn { flex: 0 0 auto; height: var(--control-h); }
/* 모바일: 입력 전체 폭 + Create 버튼 우측 정렬(아래 줄).
   ⚠️ 컬럼에선 flex-basis(12rem)가 세로축 크기가 되어 입력이 세로로 늘어난다 → flex 리셋해 height 가 먹게 한다. */
@media (max-width: 480px) {
  .new-key-form { flex-direction: column; align-items: stretch; }
  .new-key-form input { flex: 0 0 auto; }
  .new-key-form .btn { align-self: flex-end; }
}

/* 인증 카드(로그인 / OAuth 동의) */
.auth-card {
  max-width: 420px; margin: 2.5rem auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 2.1rem 1.75rem;
}
.auth-card h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.6rem; }
.auth-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.25rem; }
.auth-card .btn { margin: 0 0 0.5rem; }
.auth-card code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; padding: 0.08rem 0.35rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.consent-form { text-align: left; }
.consent-actions { display: flex; gap: 0.6rem; margin-top: 1.35rem; }
.consent-actions .btn { flex: 1; }

/* 상태(error / 404 / 빈 결과) */
.page-state { text-align: center; max-width: 440px; margin: 3.5rem auto; padding: 1rem; }
.page-state-code { font-size: 3.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--faint); line-height: 1; margin-bottom: 0.75rem; }
.page-state h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem; }
.page-state p { color: var(--muted); line-height: 1.6; margin: 0 0 1.35rem; }

/* ── 반응형 ── */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .card-grid, .card-grid--2, .examples, .split-cards, .connect-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .compare { font-size: 0.82rem; }
  .compare th, .compare td { padding: 0.6rem 0.65rem; }
  /* 히어로 CTA 두 버튼: 폰트만 살짝 줄여 실기기 폭(360px+)에서 한 줄 유지.
     기본 .cta-row 의 flex-wrap:wrap 이 초협폭에선 알아서 깔끔히 두 줄로 접는다. */
  .hero .cta-row .btn { font-size: 0.92rem; }
}