/* ═══════════════════════════════════════════════════════════════════
   GRID.OS 사이트 — site.css (tokens.css 위에 얹는 사이트 레이아웃·섹션 부품)
   · 순서: <link tokens.css> 다음에 <link site.css>. tokens.css 는 고치지 않는다.
   · 색은 전부 var(--토큰). 새 색을 정의하지 않는다(다크는 tokens.css 가 처리).
     농도 변화가 필요하면 color-mix(in srgb, var(--토큰) N%, transparent) 로만 만든다.
   · «사이트 전용» 표시가 붙은 값은 앱에 없는 크기(히어로 제목 등)다.
   · 반응형 기준: 1440 데스크톱 / 920 이하 메뉴 접힘 / 760 이하 한 줄 / 390 모바일. 가로 스크롤 0.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0-a. 글자 대비 보정 별칭 (새 색 아님 — 기존 토큰 혼합, 라이트·다크 모두 작은 글자 4.5:1 이상)
   --acc-text: 강조색 80% + 본문색 20%. 라이트 acc-soft 위 5.31 · bg 5.32 · sur 4.96 / 다크 acc-soft 위 6.00 · bg 9.15
   --ok-text : 성공색 80% + 본문색 20%. ok-soft 위 라이트 5.70 · 다크 6.72
   보조 글자는 --faint 대신 --sub (라이트 bg 5.21 · sur 4.85 · zoneB 4.54 / 다크 7.7 이상) */
:root { --acc-text: color-mix(in srgb, var(--acc) 80%, var(--ink)); --ok-text: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
body.site .badge-acc { color: var(--acc-text); }
body.site .badge-ok { color: var(--ok-text); }
body.site .badge:not(.badge-ok, .badge-warn, .badge-err, .badge-acc, .badge-sample, .badge-ai) { color: var(--ink); } /* 중립 배지: line2 바탕 위 faint 는 대비 부족 */

/* ── 0. 페이지 기본 (사이트 전용: 앱 본문 13px → 사이트 본문 15px) ── */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.site {
  font-size: 15px; line-height: 1.6;                 /* 사이트 전용 */
  word-break: keep-all; overflow-wrap: anywhere;      /* 한글 어절 단위 줄바꿈 + 긴 주소 강제 줄바꿈 */
  overflow-x: hidden;
}
/* 링크 기본값은 특이도 0(:where) — .btn 등 부품 색이 항상 이긴다 */
:where(body.site a) { color: var(--acc-text); text-decoration: none; }
:where(body.site a:not(.btn, .post-card, .brand, .path-mini)):hover { text-decoration: underline; text-underline-offset: 3px; }
:where(body.site) img { max-width: 100%; height: auto; display: block; }
:where(body.site) :where(h1, h2, h3, h4, p) { margin: 0; }   /* 특이도 0 — 부품 margin 이 이긴다 */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; }
.skip-link:focus { left: 16px; background: var(--panel); color: var(--ink); padding: 8px 12px; border-radius: var(--r-sm); box-shadow: var(--float-sh); }
.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; }

/* ── 1. 아이콘 (인라인 SVG 스프라이트 — shell.html <!-- ICONS -->) ── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 24px; height: 24px; }
.ic-box { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-card); background: var(--acc-soft); color: var(--acc); }
.symbol { display: inline-block; flex: none; fill: currentColor; }

/* ── 2. 글자 (사이트 전용 큰 단계 — 앱 최대 26px 보다 큼) ── */
.eyebrow { display: inline-block; font-size: var(--fs-secondary); line-height: var(--lh-secondary); font-weight: var(--fw-bold);
  letter-spacing: .04em; color: var(--acc-text); margin-bottom: var(--sp-3); }
.h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.16; font-weight: var(--fw-heavy); letter-spacing: -.035em; color: var(--ink); } /* 사이트 전용 */
.h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; font-weight: var(--fw-heavy); letter-spacing: -.03em; color: var(--ink); } /* 사이트 전용 */
.h3 { font-size: 19px; line-height: 1.4; font-weight: var(--fw-heavy); letter-spacing: -.015em; color: var(--ink); } /* 사이트 전용 */
.h4 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-heavy); color: var(--ink); }
.lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; color: var(--sub); } /* 사이트 전용 */
.muted { color: var(--sub); }
.small { font-size: 13px; line-height: 1.55; color: var(--sub); }
.accent { color: var(--acc-text); }

/* ── 3. 버튼 보강 (tokens.css .btn 계열 위에 크기만 추가) ── */
.btn-lg { min-height: 46px; padding: 11px 22px; font-size: 15px; line-height: 22px; gap: 8px; } /* 사이트 전용 */
.btn-lg .ic { width: 18px; height: 18px; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-medium); }
.link-arrow .ic { width: 16px; height: 16px; transition: transform .15s; }
.link-arrow:hover .ic { transform: translateX(2px); }

/* ── 4. 상단 바 (고정) — 모바일 햄버거는 CSS :checked 토글, JS 없음 ──
   현재 페이지 표시: <body data-page="home|personal|enterprise|agency|community">
   + 메뉴 링크 data-nav 같은 값. aria-current="page" 를 직접 달아도 같은 모양. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site-header .hdr { display: flex; align-items: center; gap: var(--sp-6); height: var(--topbar-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -.03em; flex: none; }
body.site a.brand, body.site a.brand:hover { color: var(--ink); text-decoration: none; }
.brand .symbol { width: 20px; height: 20px; }
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: none; margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--ink); cursor: pointer; }
.nav-burger:hover { background: var(--sur); }
.nav-burger .ic-close { display: none; }
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--acc); outline-offset: 2px; }
.site-nav { display: flex; align-items: center; gap: var(--sp-6); flex: 1; min-width: 0; }
.site-nav .menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav .menu a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: var(--r-pill);
  color: var(--sub); font-size: 14px; font-weight: var(--fw-medium); white-space: nowrap; }
.site-nav .menu a:hover { color: var(--ink); background: var(--sur); }
.site-nav .menu a[aria-current="page"],
body[data-page="home"] .site-nav a[data-nav="home"],
body[data-page="personal"] .site-nav a[data-nav="personal"],
body[data-page="enterprise"] .site-nav a[data-nav="enterprise"],
body[data-page="agency"] .site-nav a[data-nav="agency"],
body[data-page="editions"] .site-nav a[data-nav="editions"],
body[data-page="community"] .site-nav a[data-nav="community"] { color: var(--ink); background: var(--sur); font-weight: var(--fw-bold); }
.site-nav .nav-cta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.site-header .nav-cta .btn-primary { background: transparent; border-color: var(--acc-line); color: var(--acc-text); } /* 채움 버튼은 화면당 1개 — 상단 바는 보조형 */
.site-header .nav-cta .btn-primary:hover:not(:disabled) { background: var(--acc-soft); border-color: var(--acc); color: var(--acc-text); opacity: 1; }
@media (max-width: 920px) {
  .nav-burger { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--float-sh);
  }
  .site-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav .menu a { display: flex; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 16px; }
  .site-nav .nav-cta { margin-left: 0; }
  .site-nav .nav-cta .btn { width: 100%; min-height: 46px; font-size: 15px; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked + .nav-burger .ic-menu { display: none; }
  .nav-toggle:checked + .nav-burger .ic-close { display: block; }
}

/* ── 5. 섹션 골격 ── */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-sm { padding-block: clamp(40px, 5vw, 64px); }
.section + .section:not(.zone):not(.band) { border-top: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .lead { margin-top: var(--sp-3); }
.section-head.center { margin-inline: auto; text-align: center; }
.band { background: var(--sur); }                       /* L1 띠 (tokens .zone 과 같은 층) */

/* ── 6. 히어로 ── */
.hero { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 96px); overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 85% 0%, var(--acc-soft), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.hero-copy .lead { max-width: 34em; }
.hero-meta { font-size: 13px; color: var(--sub); }
.hero-meta .sep { margin-inline: 6px; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 7. 배지 (tokens .badge 보강) ── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--acc-line); background: var(--acc-soft); color: var(--acc-text);
  font-size: 13px; line-height: 18px; font-weight: var(--fw-bold); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* «예시» 배지 — 지어낸 글·데이터 표시. 눈에 띄도록 주의 상태색 + 점선 */
.badge-sample { color: var(--warn); background: var(--warn-soft); border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); }
.badge-ai { color: var(--work); background: color-mix(in srgb, var(--work) 14%, transparent); }
/* 안내 띠 — «사용 장면 예시 — 실제 사용자 후기로 교체 예정» 같은 고지 */
.callout { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 12px 16px; border-radius: var(--r-card);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); color: var(--ink); font-size: 14px; line-height: 1.55; }
.callout .ic { color: var(--warn); margin-top: 1px; }
.callout-info { background: var(--acc-soft); border-color: var(--acc-line); }
.callout-info .ic { color: var(--acc); }

/* ── 8. 실화면 프레임 (앱 창 모양) ──
   <figure class="window"><div class="window-bar"><i></i><i></i><i></i><span class="window-title">…</span></div>
     <div class="shot"><picture><source srcset="….webp" type="image/webp"><img class="shot-img" src="….png" alt="…" data-shot="P-13" width="1440" height="900"></picture></div></figure>
   캡처 파일이 아직 없으면 같은 비율(16/10) 빈 프레임 + «P-13 · alt» 표시. 파일이 들어오면 그대로 보인다(JS 없음). */
.window { margin: 0; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--panel-float); }
.window-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding-inline: 12px; background: var(--sur); border-bottom: 1px solid var(--line); }
.window-bar > i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* 신호등 점 3개 — 상태색이 아닌 무채 농도 */
.window-bar > i:nth-child(1) { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.window-bar > i:nth-child(2) { background: color-mix(in srgb, var(--ink) 20%, transparent); }
.window-bar > i:nth-child(3) { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.window-title { margin-left: 8px; font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot { position: relative; aspect-ratio: 16 / 10; background: var(--sur); overflow: hidden; }
.shot picture { display: contents; }
.shot-video { display: block; background: var(--sur); }
@media (prefers-reduced-motion: reduce) {
  .shot-video:not(.is-playing) { display: none; }
  .poster-fallback[hidden] { display: block; }
  .shot-video.is-playing + .poster-fallback[hidden] { display: none; }
}
.shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* 작은 프레임에서 화면 일부를 키워 보여 줄 때 — .shot 에 --zoom·--fx·--fy 지정 */
.shot-zoom .shot-img { transform: scale(var(--zoom, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); }
/* 파일이 없을 때(깨진 이미지)만 그려지는 자리 표시 — 깨진 그림 아이콘·대체 글자를 덮는다 */
.shot-img::before { content: ''; position: absolute; inset: 0; background: var(--sur);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px; }
.shot-img::after { content: attr(data-shot) '  ·  ' attr(alt); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max-content; max-width: 84%; padding: 8px 14px; border-radius: var(--r-pill); border: 1px dashed var(--line2);
  background: var(--panel); color: var(--faint); font-size: 12.5px; line-height: 1.45; text-align: center; white-space: normal; }
.shot-sm .shot-img::after { font-size: 11px; padding: 6px 10px; }
.shot-caption { margin-top: var(--sp-3); font-size: 13px; color: var(--sub); text-align: center; }
.window-sm { border-radius: var(--r-sm); box-shadow: var(--card-sh); }
.window-sm .window-bar { height: 22px; gap: 5px; padding-inline: 9px; }
.window-sm .window-bar > i { width: 7px; height: 7px; }

/* ── 9. 그리드 (3칸 / 2칸) ── */
.cols-3, .cols-2 { display: grid; gap: clamp(16px, 2.4vw, 24px); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 920px) { .cols-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cols-2 { grid-template-columns: minmax(0, 1fr); } }

/* 기능 칸 — 글 + 작은 실화면 */
.feature { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-panel);
  background: var(--dash-card-bg); border: 1px solid var(--dash-card-line); box-shadow: var(--dash-card-sh); }
.feature .num-label { font-size: 12px; font-weight: var(--fw-bold); color: var(--acc-text); letter-spacing: .04em; }
.feature p { color: var(--sub); font-size: 14.5px; }
.feature .window { margin-top: auto; box-shadow: none; }
@media (max-width: 920px) and (min-width: 601px) {   /* 태블릿: 글 왼쪽 · 작은 화면 오른쪽 */
  .cols-3 > .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-5); align-items: start; }
  .cols-3 > .feature > :not(.window) { grid-column: 1; }
  .cols-3 > .feature .window { margin-top: 0; grid-column: 2; grid-row: 1 / span 3; }
}

/* 좌우 분할 — 글 + 큰 실화면 (reverse 로 좌우 교대) */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.reverse { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); }
.split.reverse > :first-child { order: 2; }
@media (max-width: 920px) {
  .split, .split.reverse { grid-template-columns: minmax(0, 1fr); }
  .split.reverse > :first-child { order: 0; }
}

/* 대화 예시 (말풍선) */
.say { display: flex; flex-direction: column; gap: var(--sp-3); }
.bubble { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; }
.bubble-me { align-self: flex-end; background: var(--acc-soft); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble-ai { align-self: flex-start; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble .who { display: block; font-size: 12px; font-weight: var(--fw-bold); color: var(--sub); margin-bottom: 2px; }

/* 체크 목록 */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.check-list li .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--acc); }

/* ── 10. 갈래 카드 (개인 / 기업 / 대행사) ── */
.path-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(22px, 3vw, 32px); border-radius: var(--r-panel);
  background: var(--dash-card-bg); border: 1px solid var(--dash-card-line); box-shadow: var(--dash-card-sh); }
.path-card .head { display: flex; align-items: center; gap: var(--sp-3); }
.path-card .label { font-size: 13px; font-weight: var(--fw-bold); color: var(--sub); }
.path-card p { color: var(--sub); font-size: 15px; }
.path-card .check-list { margin-top: var(--sp-1); }
.path-card .btn-group { margin-top: auto; padding-top: var(--sp-2); }
.path-card.primary { border-color: var(--acc-line); }
.path-mini { display: flex; align-items: center; gap: var(--sp-4); margin-top: clamp(16px, 2.4vw, 24px); padding: 18px 22px; border-radius: var(--r-panel);
  border: 1px solid var(--line2); background: var(--panel); }
.path-mini .txt { flex: 1; min-width: 0; }
.path-mini .txt strong { display: block; font-size: 15px; color: var(--ink); }
.path-mini .txt span { font-size: 14px; color: var(--sub); }
@media (max-width: 600px) { .path-mini { flex-wrap: wrap; } .path-mini .link-arrow { width: 100%; } }

/* ── 11. 요금 3열 ── */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 24px); align-items: stretch; }
.price-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(22px, 2.6vw, 28px); border-radius: var(--r-panel);
  background: var(--dash-card-bg); border: 1px solid var(--dash-card-line); box-shadow: var(--dash-card-sh); }
.price-card.featured { border: 1.5px solid var(--acc); }
.price-card .tier { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.price-card .tier-name { font-size: 15px; font-weight: var(--fw-heavy); color: var(--ink); }
.price-card .price { font-size: 30px; line-height: 1.2; font-weight: var(--fw-heavy); letter-spacing: -.03em; color: var(--ink); } /* 사이트 전용 — 글자만(숫자 금지) */
.price-card .for { font-size: 14px; color: var(--sub); min-height: 3.1em; }
.price-card .check-list li { font-size: 14px; }
.price-card .foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.price-card .foot > .btn { width: 100%; }
.price-card .inline-form { flex-direction: column; }   /* 좁은 요금 칸에서는 입력·버튼을 위아래로 */
.price-card .inline-form .btn { width: 100%; }
.pricing-note { margin-top: var(--sp-8); text-align: center; font-size: 13.5px; color: var(--sub); }
@media (max-width: 920px) { .pricing { grid-template-columns: minmax(0, 1fr); } .price-card .for { min-height: 0; } }

/* ── 12. 폼 부품 ── */
.inline-form { display: flex; gap: var(--sp-2); }
.inline-form .input { flex: 1; min-width: 0; }
.inline-form .btn { flex: none; }
@media (max-width: 420px) { .inline-form { flex-direction: column; } .inline-form .btn { width: 100%; } }
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .label { font-size: 13px; font-weight: var(--fw-bold); color: var(--ink); }
.field .req { color: var(--err); margin-left: 2px; }
.field .hint { font-size: 12.5px; color: var(--sub); }
body.site .input, body.site .textarea, body.site .select { font-size: 15px; padding: 11px 13px; } /* 사이트 전용 — 모바일 확대 방지(16px 미만이면 iOS 확대) */
@media (max-width: 760px) { body.site .input, body.site .textarea, body.site .select { font-size: 16px; } }
.choice-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line2); background: var(--raised); color: var(--sub); font-size: 14px; cursor: pointer; }
.choice input:checked + span { border-color: var(--acc); background: var(--acc-soft); color: var(--acc-text); font-weight: var(--fw-bold); }
.choice input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-card); background: var(--sur); font-size: 13.5px; line-height: 1.55; color: var(--sub); }
.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--acc); flex: none; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* 허니팟 — 사람에게 안 보임 */
.form-status { font-size: 13.5px; color: var(--sub); }
.form-status.err { color: var(--err); }
.mock-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--ink); font-size: 13px; line-height: 1.5; }
.mock-note .ic { color: var(--warn); width: 16px; height: 16px; }
.mock-note[hidden] { display: none; }
.form-done { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-6); border-radius: var(--r-panel);
  background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.form-done[hidden] { display: none; }

/* ── 13. 커뮤니티 글 카드 ── */
.post-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-panel);
  background: var(--dash-card-bg); border: 1px solid var(--dash-card-line); box-shadow: var(--dash-card-sh); color: var(--ink); transition: border-color .15s; }
body.site a.post-card { color: var(--ink); }
.post-card.is-disabled { cursor: default; }
.post-card.is-disabled:hover { border-color: var(--dash-card-line); }
.post-card .disabled-note { font-size: 12.5px; color: var(--sub); }
.post-card:hover { border-color: var(--acc-line); }
.post-card .meta-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-card .title { font-size: 16px; line-height: 1.45; font-weight: var(--fw-heavy); letter-spacing: -.01em; }
.post-card .snippet { font-size: 14px; line-height: 1.55; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .by { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sub); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--sur); border: 1px solid var(--line2); color: var(--sub); font-size: 11.5px; font-weight: var(--fw-bold); }
.avatar-lg { width: 40px; height: 40px; font-size: 15px; }

/* ── 14. FAQ (details/summary — JS 없음) ── */
.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: 16.5px; line-height: 1.45; font-weight: var(--fw-bold); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--acc-text); }
.faq .answer { padding: 0 4px 22px; color: var(--sub); font-size: 15px; line-height: 1.7; display: flex; flex-direction: column; gap: 10px; }
.faq .answer strong { color: var(--ink); }
.faq-group { margin: 28px 0 4px; font-size: 13px; font-weight: var(--fw-bold); color: var(--sub); letter-spacing: .04em; }

/* ── 15. 신뢰 띠 (전 페이지) ── */
.trust { background: var(--sur); border-block: 1px solid var(--line); }
.trust-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); padding-block: 28px; }
.trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trust-item .ic-box { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.trust-item div > strong { display: block; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.trust-item div > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: var(--sub); }
@media (max-width: 760px) { .trust-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } }

/* ── 16. 끝 두 갈래 CTA ── */
.end-cta { padding-block: clamp(56px, 7vw, 88px); }
.end-cta .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.end-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 24px); }
.end-path { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: clamp(22px, 3vw, 32px); border-radius: var(--r-panel);
  background: var(--dash-card-bg); border: 1px solid var(--dash-card-line); box-shadow: var(--dash-card-sh); }
.end-path p { color: var(--sub); font-size: 15px; }
.end-path .btn { margin-top: var(--sp-2); }
@media (max-width: 760px) { .end-paths { grid-template-columns: minmax(0, 1fr); } .end-path .btn { width: 100%; } }

/* ── 17. 푸터 ── */
.site-footer { background: var(--zoneB); border-top: 1px solid var(--line); padding-block: 48px 36px; color: var(--sub); font-size: 13.5px; line-height: 1.7; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .6fr)); gap: var(--sp-8); }
.footer-corp .brand { margin-bottom: var(--sp-3); }
.footer-corp p { color: var(--sub); }
.footer-col h4 { margin: 0 0 10px; font-size: 13px; font-weight: var(--fw-bold); color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.site .footer-col a { color: var(--sub); }
body.site .footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
.footer-bottom .legal { display: flex; gap: var(--sp-4); }
body.site .footer-bottom a { color: var(--sub); }
@media (max-width: 920px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-corp { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 18. 비교표 ── */
.compare-wrap { border: 1px solid var(--line2); border-radius: var(--r-panel); overflow: hidden; background: var(--panel); }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; table-layout: fixed; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--sur); font-size: 13px; font-weight: var(--fw-bold); color: var(--sub); }
.compare thead th.us { color: var(--acc-text); }
.compare tbody th { font-weight: var(--fw-bold); color: var(--ink); width: 26%; }
.compare td { color: var(--sub); }
.compare td.us { color: var(--ink); background: color-mix(in srgb, var(--acc-soft) 55%, transparent); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .yes, .compare .no { display: inline-flex; align-items: center; gap: 6px; }
.compare .yes .ic { color: var(--ok); width: 16px; height: 16px; }
.compare .no .ic { color: var(--faint); width: 16px; height: 16px; }
@media (max-width: 600px) {
  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .compare tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare td { padding: 4px 0; border: 0; width: 100%; }
  .compare td::before { content: attr(data-col); display: block; font-size: 12px; font-weight: var(--fw-bold); color: var(--sub); }
  .compare td.us { background: none; }
}

/* ── 19. 타임라인 (단계 5개 등) — <ol class="steps"><li><span class="step-no">01</span><strong>미팅</strong><p>…</p></li></ol> ── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: var(--sp-4); counter-reset: none; }
.steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 22px; }
.steps li::before { content: ''; position: absolute; top: 6px; left: 0; right: calc(-1 * var(--sp-4)); height: 1.5px; background: var(--line2); }
.steps li:last-child::before { right: 0; }
.steps li::after { content: ''; position: absolute; top: 1px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--panel); border: 2px solid var(--acc); }
.steps li.done::after { background: var(--acc); }
.steps .step-no { font-size: 12px; font-weight: var(--fw-bold); color: var(--acc-text); letter-spacing: .04em; }
.steps strong { font-size: 16px; color: var(--ink); }
.steps p { font-size: 14px; line-height: 1.55; color: var(--sub); }
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { padding: 0 0 22px 28px; }
  .steps li::before { top: 12px; bottom: 0; left: 5px; right: auto; width: 1.5px; height: auto; }
  .steps li:last-child::before { display: none; }
  .steps li::after { top: 2px; }
}

/* ── 20. 탭 모양(정적) — 시나리오 전환 등. 동작은 페이지 워커가 :checked 또는 소형 JS 로 ── */
.tabbar { display: flex; flex-wrap: wrap; gap: 6px; }
.tabbar > * { min-height: 36px; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--raised);
  color: var(--sub); font-size: 14px; font-weight: var(--fw-medium); cursor: pointer; }
.tabbar > .on, .tabbar > [aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ── 21. 보조 ── */
.center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.kbd { display: inline-block; padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--line2); background: var(--raised); font-family: var(--font-mono); font-size: 12px; }

/* 모바일 터치 크기 — 시나리오 검수(2026-11-04): 버튼 34px → 44px, 토큰 값만 사용 */
@media (max-width: 600px) {
  .btn:not(.btn-text):not(.btn-sm) { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}

/* ── 화면 모드 버튼 (라이트↔다크) — 글자 없는 작은 아이콘, 메뉴보다 비중 낮게 ── */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; padding: 0;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--sub); cursor: pointer; }
.theme-toggle:hover { background: var(--sur); color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .tt-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
.site-header .theme-toggle { margin-left: calc(-1 * var(--sp-3)); }   /* 무료로 시작하기 바로 오른쪽 */
@media (max-width: 920px) { .site-header .theme-toggle { margin-left: calc(-1 * var(--sp-4)); } }  /* 모바일: 햄버거 옆 */

/* 실화면 영상 재생 버튼 — 자동 재생이 막혔을 때만 JS가 붙인다 (2026-11-04, 토큰 값만) */
.shot-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--sur); color: var(--ink); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md, none); z-index: 2; }
.shot-play:hover { color: var(--acc); border-color: var(--acc); }
.shot-video.is-playing + .poster-fallback { display: none; }