/* geo-landing 화면 v1.1 — 색·글자·간격 값은 tokens.css 에만 있다(여기서는 var 로만 쓴다).
   애플 제품 페이지 문법: 굵은 제목(600), 테두리 없는 면과 타일, 블루 하나, 스크롤과 함께 움직이는 화면.
   테두리가 남는 곳은 입력창 · 봇 도크 · 프로 신청 창뿐이다. 판정은 색 배지가 아니라 표식 모양(꽉 찬 원 · 반원 · 빈 원)으로 가른다.
   구성: 글꼴 · 기본 · 글자 체계 · 공통 부품 · 내비 · 히어로 · 제품 카드(데모 · 진단) · 휴대폰 장면 · 섹션 · 직접 확인 ·
         왜 지금인가 · 하는 일 · 요금 · FAQ · CTA · 푸터 · 모달 · 도크 · 스크롤 연출 · 움직임 줄이기 · 404 */

@font-face {
  font-family: "Pretendard Variable";
  src: url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("../assets/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-sans); font-size: var(--t-body-fs); line-height: var(--t-body-lh); letter-spacing: var(--t-body-ls);
  font-weight: var(--w-regular);
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: var(--w-semibold); }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, picture { display: block; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 6px; }
/* 어두운 섹션 안의 흰 카드(.pcard)는 밝은 면 규칙을 그대로 쓴다 */
[data-theme="dark"] :focus-visible:not(.pcard *), .tile-dark :focus-visible, .dock :focus-visible { outline-color: var(--c-focus-dark); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--c-bg); color: var(--c-text); border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
br.lg { display: none; }
@media (min-width: 1069px) { br.lg { display: inline; } }
/* 제목은 두 줄 안에서 줄 길이를 고르게(줄바꿈 표시가 없는 폭에서도 한 단어만 떨어지지 않게) */
h1, h2, h3, .ph-say, .hero-sub { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- 글자 체계(표 A) ---------- */
.t-hero, .hero h1 { font-size: var(--t-hero-fs); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-ls); font-weight: var(--w-semibold); }
.t-display { font-size: var(--t-display-fs); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); font-weight: var(--w-semibold); }
.t-headline { font-size: var(--t-headline-fs); line-height: var(--t-headline-lh); letter-spacing: var(--t-headline-ls); font-weight: var(--w-semibold); }
.t-headline-r { font-size: var(--t-headline-r-fs); line-height: var(--t-headline-r-lh); letter-spacing: var(--t-headline-r-ls); font-weight: var(--w-semibold); }
.t-tile { font-size: var(--t-tile-fs); line-height: var(--t-tile-lh); letter-spacing: var(--t-tile-ls); font-weight: var(--w-semibold); }
.t-title { font-size: var(--t-title-fs); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); font-weight: var(--w-semibold); }
.eyebrow { font-size: var(--t-label-fs); line-height: var(--t-label-lh); letter-spacing: var(--t-label-ls); font-weight: var(--w-semibold); color: var(--c-text); }
.intro { max-width: var(--intro-w); font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); letter-spacing: var(--t-intro-ls); font-weight: var(--w-semibold); color: var(--c-text-3); }
.intro strong { color: var(--c-text); font-weight: var(--w-semibold); }
.caption, .kicker { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); letter-spacing: var(--t-caption-ls); }
.micro { font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); }
.t-body-tight { font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-semibold); color: var(--c-text-2); }
/* 제목 강조 단어: 단색 블루(그러데이션 글자 없음) · 줄이 끊기면 안 되는 낱말 묶음 */
.hl-blue { color: var(--c-blue-on-dark); }
.nw { white-space: nowrap; }
.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
[data-theme="dark"] .eyebrow:not(.pcard *), .tile-dark .eyebrow { color: var(--c-text-on-dark); }
[data-theme="dark"] .intro:not(.pcard *), .tile-dark .intro { color: var(--c-text-on-dark-2); }
[data-theme="dark"] .intro:not(.pcard *) strong, .tile-dark .intro strong { color: var(--c-text-on-dark); }

/* ---------- 공통 부품 ---------- */
.ic { flex: none; width: var(--ic, 28px); height: var(--ic, 28px); }
img.ic[width="16"] { --ic: 16px; }
img.ic[width="20"] { --ic: 20px; }
img.ic[width="28"] { --ic: 28px; }
img.ic[width="56"] { --ic: 56px; }
img.ic[width="64"] { --ic: 64px; }
.ic-inline { display: inline-block; vertical-align: -2px; margin-left: 3px; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 21px; border-radius: var(--r-pill); background: var(--c-blue); color: var(--c-on-blue);
  font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh); font-weight: var(--w-regular); letter-spacing: 0;
  text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1), transform var(--dur-1);
}
.btn:hover { background: var(--c-blue-hover); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn-sm { padding: 7px 15px; font-size: var(--t-caption-fs); line-height: 20px; }
.btn-sm::after { content: ""; position: absolute; inset: -6px -2px; }
.btn-wide { width: 100%; }

/* 보조 버튼: 테두리 없는 링크 글자 + 화살표(CSS 도형) */
.link-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0;
  color: var(--c-link); font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh); text-decoration: none; text-align: left;
}
.link-btn::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-1) var(--ease-out);
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-btn:hover::after { transform: translateX(2px) rotate(45deg); }
.link-btn[aria-expanded="true"]::after { transform: rotate(135deg); }
.link-btn[disabled] { opacity: 0.45; cursor: default; }
[data-theme="dark"] .link-btn:not(.pcard *), .tile-dark .link-btn { color: var(--c-blue-on-dark); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--c-bg-2); color: var(--c-text); font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh);
}
.chip-btn { text-align: left; white-space: normal; min-height: var(--tap); }

/* 판정 표식 — 모양과 굵기로 구분(색약에도 읽힌다). 충족 = 꽉 찬 원 · 부족·일부 = 왼쪽 반원 · 없음 = 빈 원 */
.mk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); white-space: nowrap; }
.mk::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.mk-ok { color: var(--c-blue); font-weight: var(--w-semibold); }
.mk-ok::before { background: var(--c-blue); }
.mk-part { color: var(--c-text-2); }
.mk-part::before { background: linear-gradient(90deg, var(--c-blue) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--c-blue); }
.mk-none { color: var(--c-text); font-weight: var(--w-semibold); }
.mk-none::before { box-shadow: inset 0 0 0 1.5px var(--c-text); }
.mk-rank { color: var(--c-blue); font-weight: var(--w-semibold); }
.mk-out, .mk-mute { color: var(--c-text-2); }
.mk-rank::before, .mk-out::before, .mk-mute::before { display: none; }
[data-theme="dark"] .mk-none:not(.pcard *), .tile-dark .mk-none { color: var(--c-text-on-dark); }
[data-theme="dark"] .mk-none:not(.pcard *)::before, .tile-dark .mk-none::before { box-shadow: inset 0 0 0 1.5px var(--c-text-on-dark); }

.tile { position: relative; border-radius: var(--r-tile); background: var(--c-bg-2); padding: var(--tile-pad); min-width: 0; overflow: hidden; }
.tile-white { background: var(--c-bg); }
.tile-dark { background: var(--c-bg-dark-2); color: var(--c-text-on-dark); }
.tile-k { margin-top: 20px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); font-weight: var(--w-semibold); color: var(--c-text-2); }
.tile-dark .tile-k { color: var(--c-text-on-dark-2); }
.tile h3 { margin-top: 6px; }
.tile p:not(.tile-k):not(.intro) { margin-top: 12px; color: var(--c-text-2); }
.tile-dark p:not(.tile-k):not(.intro) { color: var(--c-text-on-dark-2); }

.bar { height: 4px; border-radius: var(--r-pill); background: var(--c-track); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-blue); transition: width var(--dur-3) var(--ease-out); }

.x { position: relative; width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; color: var(--c-text); }
.x::before, .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: currentColor; }
.x::before { transform: translate(-50%, -50%) rotate(45deg); }
.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.x:hover { background: var(--c-hover-light); }
.x-dark { color: var(--c-text-on-dark); }
.x-dark:hover { background: var(--c-hover-dark); }

.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding: 8px 0; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-blue); }
.check a { color: var(--c-link); text-underline-offset: 3px; }
.form-err, .field-err { color: var(--c-text); font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); font-weight: var(--w-semibold); }
.form-done { color: var(--c-blue); font-size: var(--t-caption-fs); font-weight: var(--w-semibold); }
input[type="text"], input[type="tel"], input[type="email"] { border-radius: var(--r-sm); }

/* ---------- 공지 띠 · 내비(반투명 · 섹션 색을 따라 바뀜) ---------- */
.notice { background: var(--c-blue); color: var(--c-on-blue); font-size: var(--t-micro-fs); text-align: center; }
.notice p { min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 6px var(--gutter); line-height: var(--t-micro-lh); }
.nav {
  position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h);
  background: var(--c-bg-dark); color: var(--c-text-on-dark); transition: background-color var(--dur-2), color var(--dur-2);
}
.nav.is-glass { background: var(--c-glass-dark); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.nav[data-nav="light"].is-glass { background: var(--c-glass-light); color: var(--c-text); }
.nav-in { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
.brand { font-size: 17px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; }
.nav-menu { margin: 0 auto; order: 1; }
.nav-cta { order: 2; }
.nav-menu ul { display: flex; gap: 4px; }
.nav-menu a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); opacity: 0.8; text-decoration: none; transition: opacity var(--dur-1); }
.nav-menu a:hover { opacity: 1; }
.nav-toggle { display: none; width: var(--tap); height: var(--tap); margin-left: auto; align-items: center; justify-content: center; border-radius: 50%; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 899px) {
  .nav-in { gap: 6px; }
  .nav-toggle { display: inline-flex; order: 3; margin-left: 0; }
  .nav-cta { margin-left: auto; order: 2; }
  .nav-menu { order: 4; display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px var(--gutter) 20px;
    background: var(--c-bg-dark); color: var(--c-text-on-dark); }
  .nav[data-nav="light"] .nav-menu { background: var(--c-bg); color: var(--c-text); }
  .nav-menu.is-open { display: block; }
  .nav-menu ul { flex-direction: column; gap: 0; }
  .nav-menu a { width: 100%; min-height: 48px; padding: 0 4px; font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh); font-weight: var(--w-semibold); opacity: 1; }
}

/* ---------- 히어로 ---------- */
.hero { position: relative; background: var(--c-bg-dark); color: var(--c-text-on-dark); overflow: hidden; isolation: isolate; }
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-in {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); padding-top: 72px; padding-bottom: 120px;
  transform-origin: 50% 40%;
}
/* 히어로 제목 첫 줄(80px 기준 약 1123px)이 한 줄에 들어가도록 히어로만 본문 폭(1120)보다 넓게 쓴다.
   1069~1219px 폭에서는 80px 첫 줄이 들어갈 자리가 없어 히어로 제목만 1068px 이하 값(64/70)을 미리 쓴다(decisions.md). */
.hero .wrap { --maxw: 1240px; }
.hero h1 { max-width: 1240px; }
@media (min-width: 1069px) and (max-width: 1219px) { .hero h1 { --t-hero-fs: 64px; --t-hero-lh: 70px; } }
@media (min-width: 980px) { .hero br.lg { display: inline; } }
/* v1.2 제목은 v1.1 보다 길다. 좁은 폭에서 4줄 이상이 되지 않도록 히어로 제목만 한 단계씩 줄인다(실측: decisions.md 73).
   735~979px 56px(3줄 이하) · 734px 이하 31px(360~734px 에서 3줄 이하) · 359px 이하 27px */
@media (min-width: 735px) and (max-width: 979px) { .hero h1 { --t-hero-fs: 56px; --t-hero-lh: 62px; } }
@media (max-width: 734px) { .hero h1 { --t-hero-fs: 31px; --t-hero-lh: 37px; } }
@media (max-width: 359px) { .hero h1 { --t-hero-fs: 27px; --t-hero-lh: 33px; } }
.hero-sub { max-width: 34em; margin-top: 24px; color: var(--c-text-on-dark-2); font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); letter-spacing: var(--t-intro-ls); font-weight: var(--w-regular); }
.scan-form { width: 100%; max-width: 600px; margin-top: 40px; }
.scan-field {
  display: flex; align-items: center; gap: 6px; height: 56px; padding: 5px 5px 5px 0; border-radius: var(--r-pill);
  background: var(--c-field-dark); border: 1px solid var(--c-line-dark); transition: border-color var(--dur-1), box-shadow var(--dur-2);
}
.scan-field:focus-within { border-color: var(--c-blue-on-dark); box-shadow: 0 0 0 4px var(--c-blue-soft); }
.scan-field input { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 24px; background: transparent; border: 0; outline: 0; color: var(--c-text-on-dark); font-size: var(--t-body-fs); }
.scan-field input::placeholder { color: var(--c-text-on-dark-2); }
.scan-field .btn { flex: none; height: 44px; padding-top: 0; padding-bottom: 0; }
.scan-form .form-err { margin-top: 12px; color: var(--c-text-on-dark); text-align: left; padding-left: 24px; }
.human-check { margin-top: 12px; min-height: 0; }
.hero-hint { margin-top: 16px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-on-dark-2); }
.hero-proof { margin-top: 18px; max-width: 40em; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-on-dark-2); }
.hero-proof a { color: var(--c-blue-on-dark); text-underline-offset: 4px; white-space: nowrap; }
@media (max-width: 734px) {
  .hero-in { padding-top: 56px; padding-bottom: 96px; }
  .hero-sub { margin-top: 18px; }
  .scan-form { margin-top: 32px; }
  .scan-field input { padding-left: 18px; }
  .scan-field .btn { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 제품 카드 ---------- */
.product { position: relative; background: var(--c-bg-dark); padding-bottom: 120px; scroll-margin-top: var(--nav-h); }
.pcard {
  position: relative; background: var(--c-bg); color: var(--c-text); border-radius: var(--r-tile); padding: var(--tile-pad);
  scroll-margin-top: calc(var(--nav-h) + 20px); min-height: 320px; transform-origin: 50% 0;
}
@media (max-width: 734px) { .product { padding-bottom: 72px; } .pcard { padding: 20px; border-radius: 22px; } }

/* 데모 루프 */
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 16px;
  font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh); color: var(--c-text-2); border-radius: var(--r-pill); overflow: hidden;
  transition: color var(--dur-1), background-color var(--dur-1);
}
.tab:hover { color: var(--c-text); }
.tab.is-active { color: var(--c-text); font-weight: var(--w-semibold); }
.demo-tabs .tab::after, .tab-bar { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; }
.demo-tabs .tab::after { background: var(--c-track); }
.tab-bar { z-index: 1; background: var(--c-blue); transform: scaleX(0); transform-origin: left center; }
.tab.is-active .tab-bar { transform: scaleX(1); }
.tab.is-active.is-run .tab-bar { animation: fill-x var(--dur-rotate) linear both; }
@keyframes fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.demo-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; margin-top: 24px; }
.demo-chat { background: var(--c-bg-2); border-radius: var(--r-tile); padding: 32px; min-height: 340px; }
.demo-slide:not(.is-active) { display: none; }
.demo-k { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); font-weight: var(--w-semibold); color: var(--c-text-2); }
.demo-q {
  margin: 10px 0 28px; padding: 16px 20px; border-radius: 22px 22px 22px 6px; background: var(--c-bg-dark); color: var(--c-text-on-dark);
  font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); letter-spacing: var(--t-intro-ls); min-height: calc(var(--t-intro-lh) * 2 + 32px);
}
.caret { display: none; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.14em; background: var(--c-blue-on-dark); }
.demo-slide.is-typing .caret { display: inline-block; animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-chips { margin-top: 10px; }
.demo-chips .chip { background: var(--c-bg); }
.demo-slide.is-anim .chip, .demo-slide.is-anim .demo-me { opacity: 0; transform: translateY(8px) scale(0.97); }
.demo-slide.is-anim .chip.is-on, .demo-slide.is-anim .demo-me.is-on { opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.demo-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 24px; }
.demo-me-k { font-weight: var(--w-semibold); }
.demo-me-n { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); }
.demo-side { padding: 4px 0; }
.demo-steps { margin-top: 8px; }
.demo-steps li { display: flex; gap: 16px; padding: 14px 0; }
.demo-steps strong { display: block; font-weight: var(--w-semibold); }
.demo-steps p { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); }
.demo-foot { margin-top: 20px; font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); color: var(--c-text-2); }
@media (max-width: 1068px) { .demo-body { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 734px) { .demo-chat { padding: 20px; min-height: 0; border-radius: 20px; } .demo-q { font-size: var(--t-body-fs); line-height: var(--t-body-lh); min-height: calc(var(--t-body-lh) * 2 + 32px); } }

/* 실제 진단 */
.result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.result-host { margin-top: 6px; font-size: var(--t-title-fs); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); overflow-wrap: anywhere; outline: 0; }
.result-meter { flex: 1 1 220px; max-width: 360px; }
/* 진행률 % (2026-11-12) */
.result-pct { font-size: 56px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -0.02em; color: var(--c-blue); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.result-pct small { font-size: 0.42em; margin-left: 2px; letter-spacing: 0; }
.result-hint { margin-top: 10px; font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); color: var(--c-text-2); }
.result-meter .bar { height: 6px; }
@media (max-width: 734px) { .result-pct { font-size: 44px; } }
.result-status { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.mini-form { flex-basis: 100%; margin-top: 12px; padding: 20px; border-radius: 18px; background: var(--c-bg-2); }
.mini-lead { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); margin-bottom: 12px; }
.mini-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.mini-row label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; font-size: var(--t-micro-fs); color: var(--c-text-2); }
.mini-row input, .field input:not([type="checkbox"]) {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--c-line); background: var(--c-bg);
  font-size: var(--t-body-fs); color: var(--c-text); transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.mini-row input:focus, .field input:not([type="checkbox"]):focus { outline: 0; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-soft); }
.mini-row .btn { height: 48px; padding-top: 0; padding-bottom: 0; }
.result-fail { margin-top: 20px; padding: 28px; border-radius: 22px; background: var(--c-bg-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.result-fail-msg { font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); font-weight: var(--w-semibold); }

.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 24px; align-items: start; }
.rcard { grid-column: span 12; min-width: 0; border-radius: var(--r-tile); background: var(--c-bg-2); padding: var(--tile-pad); transition: opacity var(--dur-2); }
@media (min-width: 1069px) {
  .rcard-score { grid-column: span 5; }
  .rcard-missing { grid-column: span 7; }
  .rcard-keywords { grid-column: span 5; }
  .rcard-ai { grid-column: span 7; }
  .rcard-unread { grid-column: span 5; }
  .rcard-pro { grid-column: span 7; }
}
.rcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rcard-title { display: flex; align-items: center; gap: 12px; font-size: var(--t-title-fs); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.rcard-state { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); white-space: nowrap; }
.rcard.is-waiting { opacity: 0.55; }
.rcard.is-running .rcard-state { color: var(--c-blue); font-weight: var(--w-semibold); }
.rcard.is-fresh .rcard-body > * { animation: rise var(--dur-3) var(--ease-out) both; }
.rcard.is-fresh .rcard-body > *:nth-child(2) { animation-delay: 70ms; }
.rcard.is-fresh .rcard-body > *:nth-child(3) { animation-delay: 140ms; }
.rcard.is-fresh .rcard-body > *:nth-child(n+4) { animation-delay: 210ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rcard-body { margin-top: 20px; }
.rcard-body:empty { display: none; }
.prog { margin-top: 18px; }
.prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.prog-label { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); }
.prog-num { font-size: var(--t-caption-fs); color: var(--c-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcard-note { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.rcard-note p { color: var(--c-text-2); font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); flex: 1 1 220px; }
@media (max-width: 734px) { .rcard { border-radius: 22px; padding: 22px; } .rcard-title { font-size: var(--t-title-fs); } }

.rcard-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 20px; padding-bottom: 20px; }
.rcard-connect .rcard-head { flex: none; }
.rcard-connect .rcard-title { font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh); }
.rcard-connect .ic { --ic: 20px; }
.rcard-connect .rcard-body, .rcard-connect .prog { margin-top: 0; flex: 1 1 260px; }
.rcard-connect .rcard-body p { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); }
.rcard-connect .connect-notice { color: var(--c-text); font-weight: var(--w-semibold); margin-top: 4px; }

/* 큰 숫자(없는 것 개수 · AI 언급 · 이미지 수) */
.bignum { font-size: var(--t-headline-fs); line-height: var(--t-headline-lh); font-weight: var(--w-semibold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--c-text); }
.bignum small { font-size: var(--t-body-fs); line-height: var(--t-body-lh); font-weight: var(--w-regular); letter-spacing: 0; color: var(--c-text-2); margin-left: 8px; }

/* 점수 고리 — 고리와 숫자를 한 진행값으로 움직인다 */
.score { display: grid; justify-items: center; }
.ring { position: relative; width: 280px; height: 280px; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-front { filter: var(--shadow-ring); }
.ring-track { fill: none; stroke: var(--c-track); stroke-width: 16; }
.ring-fill { fill: none; stroke-width: 16; stroke-linecap: round; }
.ring-fill.is-zero { opacity: 0; }
.stop-top { stop-color: var(--g-blue-top); }
.stop-bottom { stop-color: var(--g-blue-bottom); }
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num b { font-size: var(--t-score-fs); line-height: 1; font-weight: var(--w-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--c-text); }
.ring-num small { margin-top: 10px; font-size: var(--t-body-fs); line-height: var(--t-body-tight-lh); color: var(--c-text-3); }
.score-note { margin-top: 18px; max-width: 28em; text-align: center; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 420px; margin-top: 28px; }
.stat { display: grid; justify-items: center; gap: 6px; padding: 0 8px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--c-line); }
.stat b { font-size: var(--t-tile-fs); line-height: var(--t-tile-lh); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
@media (max-width: 734px) {
  .ring { width: 220px; height: 220px; }
  .ring-num small { margin-top: 6px; }
}

/* 없는 것 */
.miss-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.miss-list { margin-top: 12px; }
.miss-group { margin: 22px 0 2px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); font-weight: var(--w-semibold); color: var(--c-text-3); }
.miss-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 12px 0; }
.miss-item .mk { grid-row: span 2; align-self: start; margin-top: 5px; gap: 0; }
.miss-item strong { font-weight: var(--w-semibold); line-height: var(--t-body-tight-lh); }
.miss-item p { grid-column: 2; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); }
.miss-more { margin-top: 6px; }

/* 핵심 키워드 */
.kw-row { padding: 14px 0; }
.kw-row:first-child { padding-top: 0; }
.kw-name { font-weight: var(--w-semibold); }
.kv { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 6px; }
.kv div { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); }
.kv dt { color: var(--c-text-2); }

/* AI 답변 */
.ai-basis { font-family: var(--font-mono); font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); color: var(--c-text-2); }
.ai-sum { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.aiq { margin-top: 24px; }
.aiq-q { padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: var(--c-bg-dark); color: var(--c-text-on-dark); line-height: var(--t-body-tight-lh); }
.aiq-vs { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.aiq-col { padding: 16px 18px; border-radius: 18px; background: var(--c-bg); }
.aiq-k { font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); margin-bottom: 8px; }
.aiq-col .chip { background: var(--c-bg-2); }
.aiq-me { font-weight: var(--w-semibold); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aiq-src, .aiq-ex { margin-top: 12px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-2); }
.aiq-ex { padding-left: 14px; box-shadow: inset 2px 0 0 var(--c-line); }
@media (max-width: 734px) { .aiq-vs { grid-template-columns: 1fr; } }

.unread-note { margin-top: 12px; color: var(--c-text-2); font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); }
.pro-lines { display: grid; gap: 10px; }
.pro-lines li { position: relative; padding-left: 24px; font-weight: var(--w-semibold); }
.pro-lines li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-blue); }
.rcard-pro { background: var(--c-bg-dark-2); color: var(--c-text-on-dark); }
.rcard-pro .rcard-note p { color: var(--c-text-on-dark-2); }

.tools { margin-top: 28px; }
.tools-row { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.tools-msg { font-size: var(--t-caption-fs); color: var(--c-blue); margin-top: 8px; }
.tools-msg:empty { display: none; }
.tools-note { margin-top: 12px; font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); color: var(--c-text-2); }
.tools-note:empty { display: none; }
.tools .mini-form { margin-top: 14px; }

.closed-msg { margin: 12px 0 20px; font-size: var(--t-tile-fs); line-height: var(--t-tile-lh); font-weight: var(--w-semibold); outline: 0; }
.closed .mini-form { max-width: 640px; }

/* ---------- 휴대폰 장면 ----------
   사진(1792×2240) 속 화면 자리 = 왼쪽 29.52% · 위 13.26% · 폭 40.57% · 높이 70.18%(실측). 베젤 침범을 막으려고 사방 1.2% 안쪽에 겹친다.
   기기 상자는 사진 비율(4:5) 그대로이고 사진은 상자를 꽉 채운다(잘라 내지 않는다) — 그래서 % 위치가 사진과 정확히 맞는다.
   화면 안 글자는 화면 폭 기준 단위(cqw)로 그려 크기와 상관없이 같은 모양이다. */
.phone { position: relative; background: var(--c-bg-2); color: var(--c-text); padding: var(--sec-y) 0; overflow-x: clip; }
.ph-scenes { display: grid; gap: 96px; }
.ph-scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; --o: 1; --q: 1; }
.ph-say { font-size: var(--t-phone-fs); line-height: var(--t-phone-lh); font-weight: var(--w-semibold); max-width: 11em; }
.ph-device {
  --dev-w: min(620px, 46vw);
  position: relative; width: var(--dev-w); aspect-ratio: 1792 / 2240; border-radius: var(--r-tile); overflow: hidden;
  container-type: inline-size; background: var(--c-bg-dark);
}
.ph-photo, .ph-photo img { width: 100%; height: 100%; }
.ph-screen {
  position: absolute; left: 30.72%; top: 14.46%; width: 38.17%; height: 67.78%; border-radius: 3.44cqw; overflow: hidden;
  background: var(--c-bg-dark); color: var(--c-text-on-dark); container-type: inline-size;
}
.ph-cta { margin-top: 32px; }
@media (max-width: 734px) {
  .ph-scenes { gap: 72px; }
  .ph-scene { grid-template-columns: 1fr; justify-items: center; gap: 24px; text-align: center; }
  /* 좁은 화면: 기기를 칸보다 넓게(최대 140%) 그려 화면 부분을 키운다. 좌우로 넘친 사진 가장자리는 섹션이 잘라 낸다(음수 여백으로 가운데 정렬) */
  .ph-device { --dev-w: min(140%, 520px); margin-inline: calc((100% - var(--dev-w)) / 2); border-radius: 0; }
  .ph-cta { margin-top: 20px; }
}

/* 움직임이 켜진 상태(scroll.js 가 .is-live 를 붙인다): 600vh 동안 화면을 붙잡고 다섯 장면을 한 자리에서 넘긴다.
   진행값 배분: 장면 1~4 각 0.15(0~0.60) · 장면 5 연출 0.60~0.80 · 0.80~1.00 머무름(0.94~1.00 휴대폰만 1 -> 0.96).
   다섯 장면은 같은 격자 칸에 겹쳐 있어 기기 위치가 장면마다 정확히 같다(사진은 첫 장면 것만 보인다). */
.phone.is-live { height: 600vh; padding: 0; }
.phone.is-live .ph-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.phone.is-live .ph-scenes { gap: 0; }
.phone.is-live .ph-scene { grid-area: 1 / 1; pointer-events: none; }
.phone.is-live .ph-scene.is-on { pointer-events: auto; }
.phone.is-live .ph-device { --dev-w: min(620px, 46vw, calc((100svh - var(--nav-h) - 64px) * 0.8)); }
.phone.is-live .ph-scene:not(:first-child) .ph-photo { visibility: hidden; }
.phone.is-live .ph-scene:not(:first-child) .ph-device { background: transparent; }
.phone.is-live .ph-copy { opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 24px)); }
.phone.is-live .ph-copy:focus-within { opacity: 1; transform: none; }
.phone.is-live .ph-screen, .phone.is-live .ph-note { opacity: var(--o); }
.phone.is-live .ph-scene:first-child .ph-screen { opacity: 1; }
/* 머무름 끝(0.94~1.00): 휴대폰만 1 -> 0.96(--x 는 scroll.js). 다섯 장면의 기기가 함께 줄어 사진과 화면이 어긋나지 않는다 */
.phone.is-live .ph-device { scale: calc(1 - 0.04 * var(--x, 0)); }
@media (max-width: 734px) {
  .phone.is-live .ph-scene { align-content: start; justify-items: center; gap: 20px; padding-top: calc(var(--nav-h) + 8px); }
  .phone.is-live .ph-sticky { align-items: flex-start; }
  .phone.is-live .ph-copy { height: calc(var(--t-phone-lh) * 2 + 66px); display: flex; flex-direction: column; justify-content: flex-end; }
  .phone.is-live .ph-scene:not([data-scene="5"]) .ph-copy { justify-content: center; }
  /* 둘째 값: 휴대폰 아래 '예시 화면' 각주가 도크 위에 보이도록(키 작은 화면 — 667px 등) */
  .phone.is-live .ph-device { --dev-w: min(140%, 520px, calc((100svh - var(--nav-h) - var(--t-phone-lh) * 2 - 96px) * 0.8),
    calc((100svh - var(--nav-h) - var(--t-phone-lh) * 2 - var(--dock-h) - 128px) * 0.935)); }
}

/* 휴대폰 화면 안(중립 채팅 화면 — 특정 회사 화면을 흉내 내지 않는다). 1cqw = 화면 폭의 1%.
   사진 속 실제 휴대폰 비율보다 글자를 약 1.3배 키웠다(기기가 작게 보이는 랜딩에서 읽히도록) */
.ps { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6cqw 5.5cqw; font-size: 5.7cqw; line-height: 1.45; letter-spacing: 0; }
.ps-bar { display: flex; align-items: center; gap: 2.4cqw; padding-bottom: 4cqw; font-size: 5.1cqw; font-weight: var(--w-semibold); color: var(--c-text-on-dark-2); }
.ps-dot { width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--g-blue); }
.ps-bar-brand { letter-spacing: 0.04em; color: var(--c-text-on-dark); }
.ps-fill { flex: 1; }
.ps-input { display: flex; align-items: center; min-height: 15cqw; padding: 3cqw 4.5cqw; border-radius: 7.5cqw; background: var(--c-bg-dark-2); color: var(--c-text-on-dark); font-size: 5.5cqw; }
.ps-caret { display: inline-block; flex: none; width: 0.6cqw; height: 6.4cqw; margin-left: 0.8cqw; background: var(--c-blue-on-dark); animation: blink 0.9s steps(1) infinite; }
.ps-q { align-self: flex-end; max-width: 86%; margin-bottom: 5cqw; padding: 3cqw 4cqw; border-radius: 5cqw 5cqw 1.5cqw 5cqw; background: var(--c-blue); color: var(--c-on-blue); font-size: 5.2cqw; }
.ps-lines { display: grid; gap: 2.6cqw; margin-bottom: 6cqw; }
.ps-lines span { height: 3cqw; border-radius: 2cqw; background: var(--c-bg-dark-2); clip-path: inset(0 calc(100% - clamp(0%, (var(--q) * 3.2 - var(--i, 0) * 0.35) * 100%, 100%)) 0 0); }
.ps-lines span:nth-child(1) { --i: 0; }
.ps-lines span:nth-child(2) { --i: 1; width: 92%; }
.ps-lines span:nth-child(3) { --i: 2; width: 96%; }
.ps-lines span:nth-child(4) { --i: 3; width: 58%; }
.ps-k { font-size: 4.7cqw; font-weight: var(--w-semibold); color: var(--c-text-on-dark-2); margin-bottom: 2.6cqw; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 2cqw; }
.ps-chips li { padding: 1.8cqw 3.6cqw; border-radius: 6cqw; background: var(--c-bg-dark-2); font-size: 4.9cqw; opacity: clamp(0, calc((var(--q) - 0.45) * 8), 1); }
.ps-chips li:nth-child(2) { opacity: clamp(0, calc((var(--q) - 0.55) * 8), 1); }
.ps-chips li:nth-child(3) { opacity: clamp(0, calc((var(--q) - 0.65) * 8), 1); }
.ps-me { display: flex; align-items: center; gap: 3cqw; margin-top: 7cqw; padding: 3.6cqw 4cqw; border-radius: 4cqw; background: var(--c-bg-dark-2); font-size: 5.2cqw;
  opacity: clamp(0, calc((var(--q) - 0.78) * 8), 1); transform: scale(calc(0.96 + 0.04 * clamp(0, (var(--q) - 0.78) * 8, 1))); }
.ps-me .mk { font-size: 4.7cqw; color: var(--c-text-on-dark); }
.ps-me .mk::before { width: 3cqw; height: 3cqw; box-shadow: inset 0 0 0 0.45cqw var(--c-text-on-dark); }
.ps-list { display: grid; gap: 2.4cqw; counter-reset: ps; }
.ps-list li { counter-increment: ps; display: grid; gap: 1.6cqw; padding: 3.4cqw 4cqw; border-radius: 4cqw; background: var(--c-bg-dark-2); font-size: 5.2cqw; }
.ps-list li b::before { content: counter(ps) "  "; color: var(--c-text-on-dark-2); font-weight: var(--w-regular); }
.ps-list li.is-us { box-shadow: inset 0 0 0 0.4cqw var(--c-blue-on-dark); opacity: clamp(0, calc(var(--q) * 6), 1); transform: translateY(calc((1 - clamp(0, var(--q) * 6, 1)) * 4cqw)); }
.ps-src { position: relative; justify-self: start; padding: 1.4cqw 3cqw; border-radius: 5cqw; background: var(--c-blue); color: var(--c-on-blue); font-size: 4.3cqw; }
.ps-tap { position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; background: var(--c-on-blue);
  opacity: calc(clamp(0, (var(--q) - 0.45) * 5, 1) * (1 - clamp(0, (var(--q) - 0.65) * 4, 1)) * 0.55);
  transform: scale(calc(0.4 + clamp(0, (var(--q) - 0.45) * 4, 1.6))); }
.ps-scan { align-items: center; text-align: center; }
.ps-scan .ps-bar { align-self: stretch; justify-content: center; }
.ps-scan .ps-k { margin: 2cqw 0 4cqw; }
.ps-ring { width: 46cqw; height: 46cqw; overflow: visible; }
.ps-ring-track { fill: none; stroke: var(--c-bg-dark-2); stroke-width: 9; }
.ps-ring-fill { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100 200; stroke-dashoffset: calc(100 - 62 * var(--q)); opacity: clamp(0, calc(var(--q) * 20), 1); }
.ps-ring-k { margin-top: 3cqw; font-size: 5.2cqw; font-weight: var(--w-semibold); }
.ps-rows { align-self: stretch; display: grid; gap: 2.4cqw; margin-top: 7cqw; text-align: left; }
.ps-rows li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 3cqw; row-gap: 1.6cqw; padding: 3cqw 3.6cqw; border-radius: 4cqw; background: var(--c-bg-dark-2); font-size: 4.8cqw;
  opacity: clamp(0, calc((var(--q) - 0.3) * 6), 1); }
.ps-rows li:nth-child(2) { opacity: clamp(0, calc((var(--q) - 0.45) * 6), 1); }
.ps-rows li:nth-child(3) { opacity: clamp(0, calc((var(--q) - 0.6) * 6), 1); }
.ps-rows .ic { width: 6cqw; height: 6cqw; grid-row: span 2; }
/* 둘째 줄(회색 막대 자리)은 높이를 정해 둔다 — 장면 5 에서 막대 대신 결과 글자가 같은 자리에 들어와도 줄 높이가 그대로다 */
.ps-rows li { grid-template-rows: auto 5.6cqw; }
.ps-rows i { grid-column: 2; grid-row: 2; align-self: center; height: 2.2cqw; width: 70%; border-radius: 2cqw; background: var(--c-line-dark); }

/* 장면 5(v1.2) — 장면 4 의 진단 화면이 이어지며 결과로 바뀐다. 기본(정지 장면 · 움직임 줄이기 · 저사양)은 완성 상태다.
   움직임이 켜지면 scroll.js 가 .phone 에 단계 클래스를 붙인다:
     s5-glow  고리가 끝까지 찬 뒤 한 번 빛난다(drop-shadow 0 -> 18px -> 8px)
     s5-fill  세 줄이 위에서부터 220ms 간격으로 채워진다(회색 막대 -> 꽉 찬 원 표식 + 결과 글자)
     s5-note  위에서 알림 카드가 내려오고, 멈추면 휴대폰 전체가 1.5% 커졌다 돌아온다(한 번)
     s5-done  진행값 0.80 — 남은 연출을 끝 상태로 바로 맞춘다(시간과 무관하게 머무름 구간은 늘 완성 상태) */
.ps-result .ps-ring { filter: drop-shadow(0 0 8px var(--c-ring-glow)); }
.ps-result .ps-ring-fill { stroke-dashoffset: 0; opacity: 1; }
.ps-result .ps-rows li, .ps-result .ps-rows li:nth-child(2), .ps-result .ps-rows li:nth-child(3) { opacity: 1; }
.ps-result .ps-rows i { opacity: 0; }
.ps-res { grid-column: 2; grid-row: 2; align-self: center; justify-self: start; display: inline-flex; align-items: center; gap: 1.8cqw;
  font-size: 4.5cqw; line-height: 1.2; font-weight: var(--w-semibold); color: var(--c-text-on-dark); white-space: nowrap; }
.ps-res::before { content: ""; flex: none; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--c-blue-on-dark); }
.ps-alert { position: absolute; left: 4cqw; right: 4cqw; top: 4cqw; display: flex; align-items: center; gap: 3cqw; padding: 3.2cqw 3.8cqw;
  border-radius: 5cqw; background: var(--c-bg-dark-3); color: var(--c-text-on-dark); text-align: left; }
.ps-alert .ic { width: 7.4cqw; height: 7.4cqw; }
.ps-alert p { display: grid; gap: 0.6cqw; min-width: 0; }
.ps-alert b { font-size: 5.2cqw; line-height: 1.25; font-weight: var(--w-semibold); }
.ps-alert span { font-size: 4.4cqw; line-height: 1.3; color: var(--c-text-on-dark-2); white-space: nowrap; }
/* 알림 카드가 화면 머리(이름 · '무료 진단')를 덮는다 — 덮인 글자가 카드 아래로 비치지 않게 함께 감춘다 */
.ps-result > .ps-bar, .ps-result > .ps-k { opacity: 0; }
/* '예시 화면' 각주 — 사진 속 휴대폰 바로 아래(손 위)에 놓아 도크에 가리지 않게 한다. 사진 위라 어두운 유리 바탕 */
.ph-note { position: absolute; left: 49.8%; top: 85.5%; transform: translateX(-50%); padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--c-glass-dark); color: var(--c-text-on-dark-2); font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); white-space: nowrap; }
/* 움직임 켜짐: 단계 클래스가 붙기 전에는 장면 4 끝 화면과 같다(고리 62% · 회색 막대) */
.phone.is-live .ps-result .ps-ring { filter: none; }
.phone.is-live .ps-result .ps-ring-fill { stroke-dashoffset: calc(38 - 38 * clamp(0, var(--q) / 0.3, 1)); }
.phone.is-live.s5-glow .ps-result .ps-ring { animation: ps-glow 900ms var(--ease-out) both; }
.phone.is-live .ps-result .ps-rows i { opacity: 1; transform-origin: left center; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.phone.is-live .ps-result .ps-res { opacity: 0; transform: translateY(1.5cqw); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.phone.is-live.s5-fill .ps-result .ps-rows i { opacity: 0; transform: scaleX(0.4); }
.phone.is-live.s5-fill .ps-result .ps-res { opacity: 1; transform: none; }
.phone.is-live.s5-fill .ps-result .ps-rows li:nth-child(2) > * { transition-delay: 220ms; }
.phone.is-live.s5-fill .ps-result .ps-rows li:nth-child(3) > * { transition-delay: 440ms; }
.phone.is-live .ps-result .ps-alert { opacity: 0; transform: translateY(calc(-100% - 8cqw)); transition: transform 520ms var(--ease-out), opacity 160ms linear; }
.phone.is-live.s5-note .ps-result .ps-alert { opacity: 1; transform: none; }
.phone.is-live .ps-result > .ps-bar, .phone.is-live .ps-result > .ps-k { opacity: 1; transition: opacity 240ms var(--ease-out); }
.phone.is-live.s5-note .ps-result > .ps-bar, .phone.is-live.s5-note .ps-result > .ps-k { opacity: 0; }
.phone.is-live.s5-note .ph-device { animation: ph-pop 460ms var(--ease-in-out) 520ms 1 both; }
.phone.is-live.s5-done .ps-result, .phone.is-live.s5-done .ps-result *, .phone.is-live.s5-done .ph-device {
  transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
@keyframes ps-glow {
  0% { filter: drop-shadow(0 0 0 var(--c-ring-glow-0)); }
  45% { filter: drop-shadow(0 0 18px var(--c-ring-glow)); }
  100% { filter: drop-shadow(0 0 8px var(--c-ring-glow)); }
}
@keyframes ph-pop { 0%, 100% { transform: none; } 45% { transform: scale(1.015); } }

/* ---------- 섹션 공통 ---------- */
.sec { padding: var(--sec-y) 0; }
.sec-white { background: var(--c-bg); }
.sec-gray { background: var(--c-bg-2); }
.sec-dark { background: var(--c-bg-dark); color: var(--c-text-on-dark); }
.sec-head { display: grid; gap: 12px; margin-bottom: 64px; }
.sec-head h2 { max-width: 18em; }
.sec-head .intro { margin-top: 12px; }
.fixed-note { margin-top: 8px; max-width: var(--body-w); color: var(--c-text-2); }
@media (max-width: 734px) { .sec-head { margin-bottom: 40px; } }

/* 직접 확인 */
.proof-tabs { margin-bottom: 20px; gap: 8px; }
.proof-tabs .tab, .faq-tabs .tab { padding: 0 18px; background: transparent; }
.proof-tabs .tab:hover, .faq-tabs .tab:hover { background: var(--c-bg-2); }
.proof-tabs .tab.is-active, .faq-tabs .tab.is-active { background: var(--c-text); color: var(--c-bg); }
.tab-thumb { padding-left: 6px; }
.tab-img { width: 44px; height: 33px; border-radius: 8px; object-fit: cover; }
.proof-item { position: relative; padding: 24px 0 24px 22px; }
.proof-bar { position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: var(--c-track); overflow: hidden; }
.proof-bar::after { content: ""; position: absolute; inset: 0; background: var(--c-blue); transform: scaleY(0); transform-origin: center top; }
.proof-item.is-active .proof-bar::after { transform: scaleY(1); }
.proof-item.is-active.is-run .proof-bar::after { animation: fill-y var(--dur-rotate) linear both; }
@keyframes fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.proof-q { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-title-fs); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); font-weight: var(--w-semibold); color: var(--c-text-3); transition: color var(--dur-2); }
.proof-q .ic { margin-top: 7px; }
.proof-item.is-active .proof-q { color: var(--c-text); }
.proof-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 10px; }
.proof-copied { font-size: var(--t-caption-fs); color: var(--c-blue); }
.proof-basis { margin-top: 8px; font-family: var(--font-mono); font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); color: var(--c-text-2); }

/* ---------- 왜 지금인가 ---------- */
.why { padding-top: 0; }
.why-top { position: relative; isolation: isolate; min-height: min(100vh, 900px); display: flex; align-items: center; padding: var(--sec-y) 0; }
.why-bg { position: absolute; inset: 0; z-index: -2; }
.why-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.why-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-why-scrim); }
.why-in .sec-head { margin-bottom: 40px; }
.why-in .sec-head, .words { max-width: 620px; }
.words { font-size: var(--t-tile-fs); line-height: var(--t-tile-lh); letter-spacing: var(--t-tile-ls); font-weight: var(--w-semibold); color: var(--c-text-on-dark); }
.words .w { opacity: clamp(0.45, calc(0.45 + (var(--p, 1) * (var(--n, 1) + 6) - var(--i, 0)) * 0.2), 1); }
@media (max-width: 1068px) {
  .why-top { display: block; min-height: 0; padding: 0 0 var(--sec-y); }
  .why-bg { position: relative; inset: auto; z-index: auto; aspect-ratio: 4 / 3; margin-bottom: -18%; }
  .why-bg::after { content: ""; position: absolute; inset: 0; background: var(--g-why-scrim-m); }
  .why-top::before { display: none; }
  .why-in { position: relative; }
  .why-in .sec-head, .words { max-width: none; }
}
/* 모바일: 사진 속 인물이 화면 가운데 가깝게 오도록 초점을 오른쪽으로 */
@media (max-width: 734px) { .why-bg img { object-position: 78% 50%; } }

/* 흐름 도식 — 선이 스크롤을 따라 그려지고, 선이 닿는 단계의 픽토그램이 커지며 나타난다 */
.flow { position: relative; --p: 1; }
.flow-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.flow-line { position: absolute; left: 32px; right: calc(20% - 32px + 24px * 0.2); top: 31px; width: calc(80% - 24px * 0.2); height: 4px; overflow: visible; }
.flow-line path { fill: none; stroke: var(--c-blue-on-dark); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.flow-node { position: relative; }
.flow-node:nth-child(1) { --t: 0; }
.flow-node:nth-child(2) { --t: 0.25; }
.flow-node:nth-child(3) { --t: 0.5; }
.flow-node:nth-child(4) { --t: 0.75; }
.flow-node:nth-child(5) { --t: 1; }
.flow-node .ic { position: relative; background: var(--c-bg-dark); border-radius: 18px;
  opacity: clamp(0, calc((var(--p) - var(--t)) * 12 + 1), 1); transform: scale(calc(0.8 + 0.2 * clamp(0, (var(--p) - var(--t)) * 12 + 1, 1))); }
.flow-node strong { display: block; margin-top: 20px; font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); letter-spacing: var(--t-intro-ls); font-weight: var(--w-semibold); }
.flow-node p { margin-top: 4px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); color: var(--c-text-on-dark-2); max-width: 13em; }
@media (max-width: 1068px) {
  .flow-list { grid-template-columns: 1fr; gap: 28px; }
  .flow-line { display: none; }
  .flow::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 1.5px; background: var(--c-blue-on-dark); transform-origin: center top; transform: scaleY(var(--p)); }
  .flow-node { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .flow-node .ic { grid-row: span 2; }
  .flow-node strong { margin-top: 0; align-self: end; }
  .flow-node p { align-self: start; max-width: none; }
}
.idcard { margin-top: 96px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; align-items: start; }
.idcard .ic { grid-row: span 2; }
.idcard .intro { margin-top: 8px; }
@media (max-width: 734px) { .idcard { grid-template-columns: 1fr; margin-top: 64px; } .idcard .ic { grid-row: auto; } }

/* ---------- 하는 일(벤토) ---------- */
.bento { display: grid; gap: 20px; }
.bento-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-work .tile { display: flex; flex-direction: column; gap: 32px; }
.bento-work .tile-lg { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; }
.tile-media { position: relative; border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-track); margin-top: auto; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.option { margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 32px; align-items: start; }
.option .ic { grid-row: span 2; }
.option .tile-k { margin-top: 0; }
.option-in h3 { margin-top: 6px; }
@media (max-width: 734px) {
  .bento-work { grid-template-columns: 1fr; }
  .bento-work .tile-lg { grid-template-columns: 1fr; gap: 28px; }
  .tile-media { border-radius: 20px; }
  .option { grid-template-columns: 1fr; }
  .option .ic { grid-row: auto; }
}

/* ---------- 요금(벤토) ---------- */
.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier { display: flex; flex-direction: column; }
.tier.tile-lg { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 32px; align-items: start; }
.tier.tile-lg .ic { grid-row: span 3; }
.tier.tile-lg .tile-k { margin-top: 0; grid-column: 2; }
.tier.tile-lg h3 { grid-column: 2; }
.tier.tile-lg .tier-sum { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); letter-spacing: var(--t-intro-ls); }
.tier.tile-lg .tier-price { grid-column: 3; }
.tier-sum { flex: 1; }
.tier-price { margin-top: 24px; }
.tier-price strong { font-size: var(--t-title-fs); line-height: var(--t-title-lh); font-weight: var(--w-semibold); }
.tier-price span { color: var(--c-text-2); font-size: var(--t-caption-fs); }
/* 요금 아래 신청: 문장 위 · 버튼 아래로 쌓아 가운데 정렬(사이 24px).
   큰 버튼(.btn-xl)은 기본 버튼(.btn, 138.7 x 45px 실측)의 가로·세로 약 2배다. 24px/600 · 안쪽 여백 22px 48px 에
   최소 크기(278 x 90px)를 더해 두 배를 맞췄다(decisions.md 75). 모바일은 폭 100%(최대 360px), 높이는 같다 */
.pricing-cta { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.pricing-cta p { color: var(--c-text-2); max-width: var(--body-w); font-size: var(--t-body-fs); line-height: var(--t-body-lh); }
.btn-xl {
  min-width: 278px; min-height: 90px; padding: 22px 48px; border-radius: var(--r-pill);
  font-size: var(--t-label-fs); line-height: var(--t-label-lh); font-weight: var(--w-semibold);
}
@media (max-width: 734px) { .btn-xl { width: 100%; max-width: 360px; min-width: 0; } }
@media (max-width: 1068px) {
  .tiers { grid-template-columns: 1fr 1fr 1fr; }
  .tier.tile-lg { grid-template-columns: auto minmax(0, 1fr); }
  .tier.tile-lg .tier-sum, .tier.tile-lg .tier-price { grid-column: 2; grid-row: auto; margin-top: 12px; }
}
@media (max-width: 734px) {
  .tiers { grid-template-columns: 1fr; }
  .tier.tile-lg { grid-template-columns: 1fr; }
  .tier.tile-lg .ic { grid-row: auto; }
  .tier.tile-lg .tile-k { margin-top: 20px; }
  .tier.tile-lg .tile-k, .tier.tile-lg h3, .tier.tile-lg .tier-sum, .tier.tile-lg .tier-price { grid-column: 1; }
}

/* ---------- 자주 묻는 질문 ---------- */
.faq-wrap { max-width: calc(var(--intro-w) + var(--gutter) * 2); }
.faq-tabs { display: none; margin-bottom: 40px; gap: 8px; }
.js .faq-tabs { display: flex; }
.faq-panel + .faq-panel { margin-top: 56px; }
.js .faq-panel + .faq-panel { margin-top: 0; }
.faq-group { margin-bottom: 8px; }
/* 탭이 묶음 이름을 이미 보여 주므로, 탭이 켜지면 묶음 제목은 화면 읽기 프로그램에만 남긴다 */
.js .faq-group { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); letter-spacing: var(--t-intro-ls); font-weight: var(--w-semibold);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 1.5px solid var(--c-text-2); border-bottom: 1.5px solid var(--c-text-2); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.faq-item[open] .faq-mark { transform: translateY(2px) rotate(225deg); }
.faq-a { padding: 0 48px 28px 0; max-width: var(--body-w); color: var(--c-text-2); font-size: var(--t-body-fs); line-height: var(--t-body-lh); }

/* ---------- 마지막 CTA ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; min-height: min(86vh, 820px); display: flex; align-items: flex-start; }
.cta-bg { position: absolute; inset: 0; z-index: -2; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-cta-scrim); }
.cta-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta h2 { max-width: 16em; }
.cta .scan-form { margin-top: 36px; }

/* ---------- 푸터 ---------- */
.foot { background: var(--c-bg-2); color: var(--c-text-2); font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); padding: 40px 0 calc(var(--dock-h) + 56px + env(safe-area-inset-bottom, 0px)); }
.foot-in { display: grid; gap: 14px; }
.foot-brand { color: var(--c-text); min-height: 0; }
/* GEOWORKS 로고(인라인 SVG, currentColor) — 2026-11-11 */
.brand .logo { display: block; height: 22px; width: auto; }
.foot-brand .logo { height: 24px; }
@media (max-width: 734px) { .brand .logo { height: 19px; } }
.foot-biz, .foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-links a, .foot-biz a { color: var(--c-text); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--tap); }
.draft { margin-left: 4px; color: var(--c-text-3); }
.foot-copy { color: var(--c-text-3); }

/* ---------- 프로 신청 모달(테두리 남는 곳) ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-scrim { position: absolute; inset: 0; background: var(--c-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade var(--dur-2) both; }
.modal-sheet {
  position: relative; width: 100%; max-width: 620px; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-line); border-radius: var(--r-tile); padding: 40px; box-shadow: var(--shadow-float);
  animation: sheet-in var(--dur-2) var(--ease-out) both; outline: 0;
}
.modal-sheet > .x { position: absolute; right: 14px; top: 14px; }
.modal-sheet h2 { display: flex; align-items: center; gap: 12px; margin: 0 44px 8px 0; font-size: var(--t-title-fs); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.modal-lead { margin-top: 12px; color: var(--c-text-2); font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); }
.pro-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 24px; }
.field label:not(.check) { display: block; margin-bottom: 6px; font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); color: var(--c-text-2); }
.field-wide { grid-column: 1 / -1; }
.field input[readonly] { background: var(--c-bg-2); color: var(--c-text-2); }
.field input[aria-invalid="true"] { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
.field-err { margin-top: 6px; }
.pro-done { margin-top: 24px; display: grid; gap: 16px; justify-items: start; }
.pro-done-msg { font-size: var(--t-intro-fs); line-height: var(--t-intro-lh); font-weight: var(--w-semibold); outline: 0; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 639px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-sheet { max-width: none; max-height: calc(100dvh - 28px - var(--kb, 0px)); border-radius: 22px 22px 0 0; border-bottom: 0; padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px)); margin-bottom: var(--kb, 0px); }
  .pro-form { grid-template-columns: 1fr; }
}
body.is-modal { overflow: hidden; }
body.is-modal .dock { display: none; }

/* ---------- 봇 도크(테두리 남는 곳) ---------- */
.dock { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)); z-index: var(--z-dock); width: min(var(--dock-w), calc(100% - 20px)); transform: translateX(-50%); color: var(--c-text-on-dark); }
.dock-bar { display: flex; align-items: center; gap: 4px; min-height: var(--dock-h); padding: 6px; background: var(--c-bg-dark-2); border: 1px solid var(--c-line-dark); border-radius: var(--r-pill); box-shadow: var(--shadow-float); }
.dock.is-open .dock-bar { border-radius: 0 0 24px 24px; box-shadow: none; }
.dock-toggle { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; }
.dock-toggle:hover { background: var(--c-hover-dark); }
.chev { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translate(-50%, -25%) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.dock.is-open .chev { transform: translate(-50%, -75%) rotate(225deg); }
.dock-bar input { flex: 1; min-width: 0; height: 46px; padding: 0 6px; background: transparent; border: 0; outline: 0; color: var(--c-text-on-dark); font-size: var(--t-body-fs); }
.dock-bar input::placeholder { color: var(--c-text-on-dark-2); }
/* 회색 예시 질문(ask.js) — 입력칸 위에 겹친 글자. 바뀔 때 위로 6px 밀리며 사라지고 아래 6px 에서 올라온다.
   좁은 화면에서는 두 줄까지 보인다(17px 그대로 — 한 줄로 자르면 질문의 끝말이 잘린다) */
.dock-field { position: relative; flex: 1; min-width: 0; display: flex; }
.ask-ghost { position: absolute; top: 50%; right: 6px; left: 6px; transform: translateY(-50%); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; line-height: 20px; color: var(--c-text-on-dark-2); font-size: var(--t-body-fs); pointer-events: none; transition: translate 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.ask-ghost.is-out { translate: 0 -6px; opacity: 0; }
.ask-ghost.is-in { translate: 0 6px; opacity: 0; transition: none; }
.dock-field.is-typing .ask-ghost, .dock-bar input[disabled] + .ask-ghost { visibility: hidden; }
.dock-bar:focus-within { border-color: var(--c-blue-on-dark); }
.dock-send { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 14px; border-radius: var(--r-pill); background: var(--c-text-on-dark); color: var(--c-text); font-size: var(--t-caption-fs); font-weight: var(--w-semibold); }
.dock-send:hover { background: var(--c-bg); }
.dock-send[disabled], .dock-bar input[disabled] { opacity: 0.5; cursor: default; }
.dock-panel { display: flex; flex-direction: column; max-height: min(560px, calc(100dvh - var(--dock-h) - var(--nav-h) - 40px - var(--kb, 0px))); background: var(--c-bg-dark-2); border: 1px solid var(--c-line-dark); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: var(--shadow-float); overflow: hidden; animation: sheet-in var(--dur-2) var(--ease-out) both; }
.dock-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 18px; }
.dock-title { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-caption-fs); font-weight: var(--w-semibold); }
.dock-log { flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-bot { align-self: flex-start; background: var(--c-bg-dark); color: var(--c-text-on-dark); border-bottom-left-radius: 6px; }
.msg-user { align-self: flex-end; background: var(--c-blue); color: var(--c-on-blue); border-bottom-right-radius: 6px; }
.msg .btn { margin-top: 10px; }
.msg-wait { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text-on-dark-2); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue-on-dark); animation: dot 1s var(--ease-in-out) infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.dock-sugg { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; flex: none; }
.dock-sugg::-webkit-scrollbar { display: none; }
.dock-sugg:empty { display: none; }
.dock-sugg .chip { flex: none; white-space: nowrap; background: var(--c-bg-dark); color: var(--c-text-on-dark); font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); }
.dock-sugg .chip:hover { color: var(--c-blue-on-dark); }
.dock-scan { flex: none; padding: 12px 16px 14px; background: var(--c-bg-dark); }
.dock-scan label { display: block; margin-bottom: 8px; font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); color: var(--c-text-on-dark-2); }
.dock-scan-row { display: flex; gap: 8px; }
.dock-scan input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-line-dark); background: var(--c-field-dark); color: var(--c-text-on-dark); font-size: var(--t-body-fs); }
.dock-scan input:focus { outline: 0; border-color: var(--c-blue-on-dark); }
.dock-scan input::placeholder { color: var(--c-text-on-dark-2); }
.dock-scan .btn { height: 44px; padding-top: 0; padding-bottom: 0; }
.dock-scan .form-err { margin-top: 8px; color: var(--c-text-on-dark); }
.dock-scan.is-cta { box-shadow: inset 0 1px 0 var(--c-blue-on-dark); }
.dock-scan.is-cta label { color: var(--c-blue-on-dark); }
/* 상담 세션 — 답 아래 버튼 줄(퀵리플라이) · '내 GEO 상황 정리' 카드(app/journey · bot.js) */
.msg-quick { display: grid; gap: 10px; }
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-btn { min-height: var(--tap); padding: 7px 14px; background: transparent; color: var(--c-text-on-dark); border: 1px solid var(--c-line-dark); font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); white-space: nowrap; touch-action: manipulation; transition: border-color var(--dur-1), color var(--dur-1); }
.quick-btn:hover { border-color: var(--c-blue-on-dark); color: var(--c-blue-on-dark); }
.msg-card { max-width: 100%; align-self: stretch; display: grid; gap: 10px; white-space: normal; border: 1px solid var(--c-line-dark); }
.card-title { font-weight: var(--w-semibold); }
.card-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.card-list li { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 10px; word-break: keep-all; overflow-wrap: anywhere; }
.card-k { color: var(--c-text-on-dark-2); }
.card-v { min-width: 0; }
.card-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.card-btns .btn { margin-top: 0; white-space: normal; text-align: left; }
.card-copy { min-height: 40px; padding: 0 4px; color: var(--c-blue-on-dark); font-size: var(--t-caption-fs); touch-action: manipulation; }
.card-copy:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-note { color: var(--c-text-on-dark-2); font-size: var(--t-micro-fs); line-height: var(--t-micro-lh); }
.card-note:empty { display: none; }
.pro-note { color: var(--c-text-2); font-size: var(--t-caption-fs); line-height: var(--t-caption-lh); }
@media (max-width: 639px) {
  .dock { width: calc(100% - 12px); bottom: calc(6px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)); }
  .dock-panel { max-height: calc(100dvh - var(--dock-h) - 24px - var(--kb, 0px)); }
  .dock-send { padding: 0 14px 0 12px; }
  .msg { max-width: 92%; }
}

/* ---------- 스크롤 연출(scroll.js 가 --p 를 넣는다 · 바꾸는 속성은 transform · opacity · clip-path 뿐) ---------- */
/* 1 히어로 -> 진단 카드 */
.js .hero[style*="--p"] .hero-in { transform: scale(calc(1 - 0.08 * var(--p))); opacity: calc(1 - var(--p)); }
.js .pcard[style*="--p"] { transform: translateY(calc(80px * (1 - var(--p)))) scale(calc(0.94 + 0.06 * var(--p))); }
.js .pcard.is-pinned { transform: none; }
/* 5 이미지 타일: 안쪽 그림은 1.08 -> 1, 타일은 모서리 안쪽에서 바깥으로 열린다 */
.js .tile-media[style*="--p"] { clip-path: inset(calc(6% * (1 - var(--p))) round var(--r-tile)); }
.js .tile-media[style*="--p"] img { transform: scale(calc(1.08 - 0.08 * var(--p))); }

/* 섹션 머리 등장(1회) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js .reveal.is-in, .no-motion .reveal { opacity: 1; transform: none; }

/* ---------- 움직임 줄이기: 움직임은 멈추고 내용은 최종 상태로 그대로 보인다 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero .hero-in, .js .hero[style*="--p"] .hero-in { transform: none; opacity: 1; }
  .js .pcard, .js .pcard[style*="--p"] { transform: none; }
  .js .tile-media, .js .tile-media[style*="--p"] { clip-path: none; }
  .js .tile-media img, .js .tile-media[style*="--p"] img { transform: none; }
  .flow, .flow[style] { --p: 1 !important; }
  .words .w { opacity: 1; }
  .ph-scene { --o: 1 !important; --q: 1 !important; }
  .caret, .demo-slide.is-typing .caret, .ps-caret { display: none; animation: none; }
  .demo-slide.is-anim .chip, .demo-slide.is-anim .demo-me { opacity: 1; transform: none; }
  .tab.is-active .tab-bar, .tab.is-active.is-run .tab-bar { animation: none; transform: scaleX(1); }
  .proof-item.is-active .proof-bar::after, .proof-item.is-active.is-run .proof-bar::after { animation: none; transform: scaleY(1); }
  .proof-q { color: var(--c-text); }
  .dots i { animation: none; opacity: 0.7; }
}

/* ---------- 없는 주소(404) ---------- */
.lost { min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-bg-dark); }
.lost-main { flex: 1; display: flex; align-items: center; }
.lost-main .hero-in { min-height: 0; }
.lost-main .kicker { color: var(--c-text-on-dark-2); margin-bottom: 16px; }
.lost-go { margin-top: 32px; }