/* 폴센트 과제 제출용 발표 사이트 — DS 토큰만 사용 (hotdeal 시안은 iframe으로 라이브 삽입) */
html { scroll-behavior: smooth; }
body.deck { margin: 0; background: var(--gray-100); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; word-break: keep-all; }
body.deck * { box-sizing: border-box; }
a { color: inherit; }

/* ---- 상단 바 ---- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 56px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-300); }
.topbar .in { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 16px; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.topbar .brand .mark { width: 24px; height: 24px; flex: none; display: block; border-radius: 5.5px; object-fit: cover; }   /* 앱스토어 공식 아이콘(512px) 축소본, iOS 아이콘 비율로 둥글게 */
.topbar .brand span { color: var(--ink-500); font-weight: 500; }
.topbar .sp { flex: 1; }
.topbar .ctr { font-size: 13px; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.topbar .nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gray-300); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.topbar .nav-btn:hover { background: var(--gray-200); }
.topbar .lnk { font-size: 13px; font-weight: 600; color: var(--blue-500); text-decoration: none; white-space: nowrap; padding: 8px 12px; border-radius: var(--radius-pill); }
.topbar .lnk:hover { background: var(--blue-50); }
.topbar .prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--blue-500); transition: width .2s; }
@media screen and (max-width: 760px) { .topbar .brand span, .topbar .lnk { display: none; } }

/* ---- 우측 점 내비 ---- */
.dots { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 7px; }
.dots a { position: relative; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); transition: all .2s; }
.dots a.on { background: var(--blue-500); height: 20px; border-radius: 4px; }
.dots a.ch { margin-top: 8px; }
.dots a:hover::after, .dots a.on::after { content: attr(data-t); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; }
.dots a:hover::after { opacity: 1; }
@media screen and (max-width: 1000px) { .dots { display: none; } }

/* ---- 섹션 공통 ---- */
section.s { min-height: 100vh; padding: 92px 0 56px; display: flex; align-items: safe center; position: relative; }   /* 창이 낮으면 위가 잘리지 않게(safe) */
section.s.alt { background: var(--surface); }
.wrap { width: min(1120px, calc(100% - 192px)); margin: 0 auto; }   /* 우측 점 내비(약 30px)와 폰 사이 여백 확보 */
@media screen and (max-width: 1000px) { .wrap { width: calc(100% - 48px); } }
.two { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; }
.two.rev { grid-template-columns: auto minmax(0, 1fr); }
.two.rev > .phones { flex-wrap: nowrap; }
.two.rev > .txt { order: 2; }
.kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--blue-500); letter-spacing: .01em; }
.kicker .num { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--blue-100); color: var(--blue-600); font-size: 12px; }
.kicker .ch { color: var(--ink-500); font-weight: 600; }
h2.t { margin: 0 0 14px; font-size: 30px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; }
h2.t em { font-style: normal; color: var(--blue-500); }
h2.t em.red { color: var(--red-400); }
.lead { margin: 0 0 20px; font-size: 15.5px; line-height: 24px; color: var(--ink-700); max-width: 960px; }   /* 한 문장 설명은 한 줄에 */
.lead b { color: var(--ink); font-weight: 700; }
.note { margin: 14px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-500); }
.note a { color: var(--blue-500); }
.hl { background: linear-gradient(transparent 60%, var(--blue-100) 60%); }

/* 카드·리스트 */
.card { background: var(--surface); border: 1px solid var(--gray-300); border-radius: 16px; padding: 18px 20px; }
section.alt .card { background: var(--gray-100); border-color: transparent; }
.cards { display: grid; gap: 12px; }
.cards.c2 { grid-template-columns: 1fr 1fr; }
.cards.c3 { grid-template-columns: 1fr 1fr 1fr; }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
.card h4 { margin: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card h4 .ic { font-size: 18px; }
.card p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-700); }
.card p + p { margin-top: 6px; }
.cards.who .card { padding: 22px 22px 24px; }
.cards.who .card .ic { display: block; font-size: 28px; line-height: 32px; margin-bottom: 14px; }
.cards.who .card h4 { display: block; min-height: 22px; white-space: nowrap; margin-bottom: 8px; }
.card .lbl { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--gray-200); color: var(--ink-700); font-size: 12px; font-weight: 700; }
.card .lbl.blue { background: var(--blue-100); color: var(--blue-600); }
.card .lbl.red { background: var(--red-50); color: var(--red-500); }
.s .card.dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }   /* section.alt .card(0,2,1)보다 높게 */
.card.dark h4, .card.dark p { color: var(--on-ink); }
.card.dark p { opacity: .85; }
.s .card.blue { background: var(--blue-100); border-color: transparent; }
.card.blue h4 { color: var(--blue-600); }
.quote { background: var(--gray-200); border-radius: 16px; padding: 18px 20px; font-size: 14.5px; line-height: 23px; color: var(--ink-800); }
section.alt .quote { background: var(--gray-100); }
.quote .who { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink-500); }
.quote mark { background: var(--blue-100); color: inherit; padding: 0 2px; border-radius: 3px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; }
.stat { background: var(--surface); border: 1px solid var(--gray-300); border-radius: 16px; padding: 16px 18px; }
section.alt .stat { background: var(--gray-100); border-color: transparent; }
.stat b { display: block; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.stat b small { font-size: 14px; font-weight: 600; color: var(--ink-500); margin-left: 2px; }
.stat span { font-size: 12px; color: var(--ink-500); font-weight: 600; }
ol.ann { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ol.ann li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; line-height: 21px; color: var(--ink-700); }
ol.ann li b { color: var(--ink); font-weight: 700; }
ol.ann .n { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: -1px; }
ol.ann li.blue .n { background: var(--blue-500); }
ol.ann li.red .n { background: var(--red-400); }
ul.plain { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 22px; color: var(--ink-700); }
ul.plain li + li { margin-top: 4px; }
ul.plain b { color: var(--ink); }

/* 표 */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 20px; }
.tbl th, .tbl td { text-align: left; padding: 10px 14px 10px 0; vertical-align: top; border-bottom: 1px solid var(--gray-300); }
.tbl th { color: var(--ink-500); font-weight: 700; white-space: nowrap; width: 128px; }
.tbl thead th { color: var(--ink); border-bottom: 2px solid var(--ink); width: auto; }
.tbl td b { font-weight: 700; }
details.more { margin-top: 12px; }
details.more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--blue-500); padding: 8px 14px; border-radius: var(--radius-pill); background: var(--blue-50); }
details.more summary::before { content: "▸"; font-size: 11px; }
details.more[open] summary::before { content: "▾"; }
details.more > div { margin-top: 12px; }

/* 여정 / 단계 다이어그램 */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.flow .st { position: relative; flex: 1 1 120px; min-width: 120px; background: var(--surface); border: 1px solid var(--gray-300); border-radius: 14px; padding: 14px 14px 12px; }
.flow .st .k { font-size: 11px; font-weight: 700; color: var(--ink-500); margin-bottom: 4px; }
.flow .st b { display: block; font-size: 14px; line-height: 20px; }
.flow .st span { display: block; margin-top: 4px; font-size: 12px; line-height: 17px; color: var(--ink-700); }
.flow .st.x { border-style: dashed; color: var(--ink-500); }
.flow .st.hot { background: var(--blue-100); border-color: transparent; }
.flow .st.red { background: var(--red-50); border-color: transparent; }
.flow .ar { align-self: center; color: var(--ink-400); font-size: 20px; flex: none; }
.paths { display: grid; gap: 8px; max-width: 980px; }
.path-row { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: center; }
.path-k { font-size: 12.5px; font-weight: 700; color: var(--ink-700); line-height: 17px; }
.path-k small { display: block; font-size: 11px; font-weight: 600; color: var(--blue-500); }
.path-row .flow { gap: 6px; }
.path-row .flow .st { padding: 10px 12px 9px; border-radius: 12px; }
.path-row .flow .st b { font-size: 13px; line-height: 18px; }
.path-row .flow .st span { font-size: 11.5px; line-height: 16px; margin-top: 2px; }
.path-row .flow .ar { font-size: 16px; }
.path-row .flow .st { flex: 1 1 0; }
.frame3 { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; gap: 8px; align-items: stretch; }
.frame3 .ar { align-self: center; text-align: center; color: var(--ink-400); font-size: 22px; }
.stage { background: var(--surface); border: 1px solid var(--gray-300); border-radius: 16px; padding: 18px 20px; }
.stage .no { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: 11.5px; font-weight: 700; margin-bottom: 8px; }
.stage.now .no { background: var(--blue-500); }
.stage h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.stage .sub { margin: 0 0 12px; font-size: 13px; color: var(--ink-500); font-weight: 600; }
.stage dl { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: 6px 8px; font-size: 13px; line-height: 19px; }
.stage dt { color: var(--ink-500); font-weight: 700; }
.stage dd { margin: 0; color: var(--ink-700); }
.engine { margin: 0 0 14px; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.engine b { font-size: 15px; }
.engine .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.engine .chips span { padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); font-size: 12px; font-weight: 600; }
.formula { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.formula .f { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--gray-300); border-radius: 16px; padding: 16px 18px; }
section.alt .formula .f { background: var(--gray-100); border-color: transparent; }
.formula .f b { display: block; font-size: 17px; margin-bottom: 4px; }
.formula .f span { font-size: 13px; line-height: 19px; color: var(--ink-700); display: block; }
.formula .f .up { color: var(--red-400); font-weight: 700; font-size: 12px; }
.formula .op { font-size: 26px; font-weight: 700; color: var(--ink-400); }

/* 폰(라이브 시안) */
.phones { display: flex; gap: 32px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.ph { --s: min(.7, var(--fit, .7)); width: calc(390px * var(--s)); flex: none; }   /* --fit = 창 높이에 맞춘 최대 배율(deck.js) */
.ph.sm { --s: min(.58, var(--fit, .58)); }
.ph.xs { --s: min(.46, var(--fit, .46)); }
.phones:has(.xs) { gap: 22px; }   /* 4개 나란히(알림 장)가 한 줄에 들어가게 */
.ph .frame { position: relative; width: calc(390px * var(--s)); height: calc(844px * var(--s)); border-radius: calc(36px * var(--s)); overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--gray-300), 0 20px 50px rgba(33,37,41,.14); }
.ph iframe { display: block; width: 390px; height: 844px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; background: var(--surface); }
.ph .cap { margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 17px; text-align: center; color: var(--ink-400); font-weight: 400; }   /* 설명은 폰 폭 안에서 줄바꿈(옆 캡션과 안 겹침), 한 줄 제목만 넘쳐도 가운데 */
.ph .cap b { display: block; color: var(--ink-500); font-weight: 500; font-size: 12px; white-space: nowrap; }   /* 화면 아래 캡션: 작고 얇은 회색 */
.ph .cap .n { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 700; align-items: center; justify-content: center; margin-right: 4px; vertical-align: -3px; }
.ph .act { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.ph .badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 700; opacity: .9; }
.ph .badge.red { background: var(--red-400); }
.ph .badge.blue { background: var(--blue-500); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-500); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px rgba(20,175,64,.18); }
.btn { appearance: none; border: 1px solid var(--gray-300); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 18px; }
.btn:hover { background: var(--gray-200); }
.btn.dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.dark:hover { background: var(--ink-800); }
.btn.pri { background: var(--blue-500); color: var(--on-ink); border-color: var(--blue-500); }
.btn.pri:hover { background: var(--blue-600); }
.btn.lg { font-size: 15px; padding: 12px 20px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--gray-200); border-radius: var(--radius-pill); padding: 4px; gap: 2px; }
.seg button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-500); padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(33,37,41,.12); }
[data-pane] { display: none; }
[data-pane].on { display: block; }

/* 리뷰 주제 바 */
.themes { display: grid; gap: 6px; margin: 0 0 14px; }
.theme { display: grid; grid-template-columns: 150px 1fr 44px 56px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--gray-300); cursor: pointer; font-size: 13.5px; text-align: left; font-family: inherit; color: var(--ink); }
section.alt .theme { background: var(--gray-100); border-color: transparent; }
.theme:hover, .theme.on { border-color: var(--blue-500); background: var(--blue-50); }
.theme .bar { height: 8px; border-radius: 4px; background: var(--gray-300); overflow: hidden; }
.theme .bar i { display: block; height: 100%; background: var(--blue-500); border-radius: 4px; }
.theme.low .bar i { background: var(--red-400); }
.theme .cnt { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.theme .avg { font-size: 12px; color: var(--ink-500); text-align: right; white-space: nowrap; }
.qpanel { display: grid; gap: 8px; }
.qpanel .quote { font-size: 13.5px; line-height: 21px; padding: 14px 16px; }

/* 계산기 */
.calc { background: var(--surface); border: 1px solid var(--gray-300); border-radius: 16px; padding: 18px 20px; }
.calc .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc fieldset { border: 0; margin: 0; min-width: 0; padding: 14px; border-radius: 12px; background: var(--gray-100); }
.calc .lg { font-size: 12px; font-weight: 700; color: var(--ink-500); margin-bottom: 6px; line-height: 17px; }
.calc label { display: grid; grid-template-columns: 56px 1fr 34px; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-700); margin-top: 6px; }
.calc input { font: inherit; font-size: 14px; font-weight: 600; height: 36px; padding: 0 10px; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%; text-align: right; }
.calc input:focus { outline: 2px solid var(--blue-500); border-color: transparent; }
.calc .out { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
.calc .o { padding: 12px 14px; border-radius: 12px; background: var(--gray-100); font-size: 12px; color: var(--ink-500); font-weight: 600; }
.calc .o b { display: block; font-size: 18px; color: var(--ink); margin-top: 2px; letter-spacing: -.02em; }
.calc .o.res b { color: var(--blue-600); }
.calc .o.res.pri b { color: var(--ink-700); }
.calc .o.res.pri { background: var(--gray-200); }
.calc .o.res { background: var(--blue-100); }
.calc .presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.calc .how { margin: 12px 0 0; font-size: 12.5px; line-height: 18px; color: var(--ink-500); }

/* 시안 미리보기 이야기 */
.story .say { display: inline-block; max-width: 560px; margin: 0 0 10px; padding: 13px 20px; border-radius: 20px 20px 20px 6px; background: var(--gray-200); font-size: 19px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
section.alt .story .say, .story.alt .say { background: var(--gray-200); }
.story .say.on { background: var(--blue-500); color: var(--on-ink); font-weight: 700; }
.story .say + .say { display: table; }

/* 표지 */
section.cover { background: var(--surface); }
.cover .kicker { font-size: 14px; }
.cover .wrap { max-width: 980px; }
.cover h1 { margin: 0 0 18px; font-size: 40px; line-height: 52px; font-weight: 700; letter-spacing: -.03em; }
.cover h1 em { font-style: normal; color: var(--blue-500); }
.cover .sub { margin: 0 0 28px; font-size: 17px; line-height: 28px; color: var(--ink-700); }
.cover .meta { display: flex; align-items: center; gap: 14px; margin-top: 36px; font-size: 14px; color: var(--ink-500); font-weight: 600; }
.cover .meta b { color: var(--ink); font-size: 16px; }
.cover .meta i { width: 1px; height: 14px; background: var(--gray-300); }
.cover .path { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.cover .path span { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--gray-200); font-size: 13px; font-weight: 600; color: var(--ink-700); }
.cover .path span.on { background: var(--blue-500); color: var(--on-ink); }

/* 컴포넌트 예시(추천 행 하나) — 폰 화면처럼 떠 있는 카드, 약간 축소 */
.comp { margin-top: 22px; }
.comp-frame { --cs: .7; width: calc(430px * var(--cs)); height: calc(188px * var(--cs)); max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--gray-300), 0 20px 50px rgba(33,37,41,.14); }
.comp-frame iframe { display: block; width: 430px; height: 188px; border: 0; transform: scale(var(--cs)); transform-origin: 0 0; }

/* 표지 스크롤 안내 — 연회색 알약 라벨(글자+작은 화살표)이 한 덩어리로 천천히 떠다님 */
.scroll-cue { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); text-decoration: none; color: var(--ink-500); }
.scroll-cue span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px 9px 16px; border-radius: var(--radius-pill); background: var(--gray-200); font-size: 12.5px; font-weight: 600; line-height: 16px; white-space: nowrap; animation: cue-float 3s cubic-bezier(.45,0,.55,1) infinite; }
.scroll-cue span svg { color: var(--ink-400); }
.scroll-cue:hover span { background: var(--gray-300); }
@keyframes cue-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.scroll-cue.rv { transform: translateX(-50%) translateY(18px); }
.scroll-cue.rv.in { transform: translateX(-50%); }

/* 목차 — 작고 촘촘하게(눈에 한 번에 들어오도록) */
.agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 980px; }
.agenda a { display: block; padding: 12px 14px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--gray-300); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.agenda a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(33,37,41,.08); border-color: var(--blue-500); }
.agenda .no { font-size: 11px; font-weight: 700; color: var(--blue-500); }
.agenda b { display: block; margin: 3px 0 2px; font-size: 13.5px; line-height: 18px; }
.agenda span { font-size: 11.5px; line-height: 16px; color: var(--ink-500); display: block; }
.agenda.narrow { grid-template-columns: 1fr 1fr; gap: 8px; }

/* 마무리 */
.end .big { font-size: 30px; line-height: 42px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 24px; }
.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.links a { display: block; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--gray-300); text-decoration: none; font-size: 14px; font-weight: 700; }
.links a span { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ink-500); }
.links a:hover { border-color: var(--blue-500); }

/* 등장 */
.rv { transition: opacity .6s ease, transform .6s ease; }
html.ready .rv:not(.in) { opacity: 0; transform: translateY(18px); }   /* 로드 전엔 전부 보이고, 로드 후 화면 밖 요소만 숨겼다가 등장 */
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; }

@media screen and (max-width: 1280px) {   /* 좁은 창: 쌓지 않고 폰을 줄여 글·화면을 나란히 유지(한 화면 안) */
  .two { gap: 40px; }
  .two .phones:has(.ph + .ph) .ph.sm { --s: min(.46, var(--fit, .46)); }
  .two .phones:has(.ph + .ph) { gap: 20px; }
}
@media screen and (max-width: 960px) {
  .two, .two.rev { grid-template-columns: 1fr; }
  .two.rev > .txt { order: 0; }
  h2.t { font-size: 28px; line-height: 36px; }
  .cover h1 { font-size: 34px; line-height: 44px; }
  .cards.c3, .cards.c4, .stats, .agenda, .links { grid-template-columns: 1fr 1fr; }
  .frame3 { grid-template-columns: 1fr; } .frame3 .ar { transform: rotate(90deg); }
  .calc .row, .calc .out { grid-template-columns: 1fr; }
  .theme { grid-template-columns: 110px 1fr 36px 50px; }
}
@media screen and (max-width: 600px) {
  .cards.c2, .cards.c3, .cards.c4, .stats, .agenda, .links { grid-template-columns: 1fr; }
  .ph, .ph.sm { --s: min(.58, var(--fit, .58)); }
}

/* ---- 한 화면에 들어가도록 밀도 조정(맥북 14인치 기준) ---- */
.stat { padding: 12px 16px; }
.stat b { font-size: 22px; line-height: 28px; }
.theme { padding: 7px 12px; font-size: 13px; }
.themes { gap: 5px; }
#reviews .cards.c2 .card p, #interview .quote, #floating .cards .card p, #hotdeal ol.ann li, #floating ol.ann li, #fullview ol.ann li, #logic ol.ann li { font-size: 13px; line-height: 19px; }
#interview .quote { padding: 14px 16px; }
#floating .cards .card { padding: 14px 16px; }
#floating ol.ann, #hotdeal ol.ann { gap: 7px; }
#reviews .lead, #interview .lead, #floating .lead, #hotdeal .lead { margin-bottom: 14px; }
#reviews .stats { margin-bottom: 12px; }
#reviews .qpanel .quote { padding: 12px 14px; }
#reviews .cards.c2 { margin-top: 12px !important; }
#reviews h2.t, #floating h2.t, #hotdeal h2.t { font-size: 30px; line-height: 40px; }
ol.ann.when li { grid-template-columns: 52px 1fr; }
ol.ann.when .lb { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--blue-100); color: var(--blue-600); font-size: 12px; font-weight: 700; }
#hotdeal h2.t { font-size: 26px; line-height: 34px; }
#reviews h2.t { font-size: 28px; line-height: 36px; }
#reviews .stat { padding: 10px 14px; }
#floating h2.t { font-size: 28px; line-height: 36px; margin-bottom: 10px; }
#floating .lead { font-size: 15px; line-height: 23px; }
#floating ol.ann.when { margin-bottom: 4px; }

/* 창 높이가 낮을 때(브라우저 창을 줄인 노트북) 한 단계 더 촘촘하게 */
@media screen and (max-height: 800px) {
  section.s { padding: 76px 0 40px; }
  h2.t { font-size: 28px; line-height: 36px; margin-bottom: 12px; }
  .lead { font-size: 15px; line-height: 23px; margin-bottom: 16px; }
  .card { padding: 14px 16px; }
  .card p, .quote, .tbl { font-size: 13px; line-height: 19px; }
  .stage dl, .flow .st span { font-size: 12.5px; }
  .story .say { font-size: 17px; line-height: 25px; padding: 11px 16px; }
  .cover h1 { font-size: 34px; line-height: 44px; }
}

/* ---- 전체 밀도 통일(목차·사용 흐름 장과 같은 크기감) ---- */
.cards, .frame3, .formula, .stats, .flow, .engine, .tbl, .paths, .links, .calc { max-width: 1000px; }
.card { padding: 14px 16px; border-radius: 14px; }
.card h4 { font-size: 14px; line-height: 20px; margin-bottom: 4px; }
.card p { font-size: 13px; line-height: 19px; }
.card .lbl { font-size: 11px; padding: 2px 8px; margin-bottom: 6px; }
.cards { gap: 10px; }
.stage { padding: 14px 16px; border-radius: 14px; }
.stage h4 { font-size: 15px; }
.stage .sub { font-size: 12px; margin-bottom: 8px; }
.stage dl { font-size: 12.5px; line-height: 18px; gap: 4px 8px; }
.flow { gap: 6px; }
.flow .st { padding: 10px 12px 9px; border-radius: 12px; min-width: 110px; }
.flow .st .k { font-size: 10.5px; margin-bottom: 3px; }
.flow .st b { font-size: 13px; line-height: 18px; }
.flow .st span { font-size: 11.5px; line-height: 16px; margin-top: 2px; }
.flow .ar { font-size: 16px; }
.formula .f { padding: 12px 14px; border-radius: 14px; }
.formula .f b { font-size: 15px; }
.formula .f span { font-size: 12.5px; line-height: 18px; }
.engine { padding: 10px 14px; gap: 10px; }
.engine b { font-size: 14px; }
.engine .chips span { font-size: 11.5px; padding: 3px 9px; }
.quote { font-size: 13px; line-height: 20px; padding: 14px 16px; }
.tbl { font-size: 13px; line-height: 19px; }
.tbl th, .tbl td { padding: 8px 12px 8px 0; }
ol.ann li { font-size: 13px; line-height: 19px; }
ol.ann { gap: 8px; }
.stats { gap: 10px; }
.stat b { font-size: 22px; line-height: 28px; }
.cards.who .card .ic { font-size: 24px; line-height: 28px; margin-bottom: 10px; }
.links a { padding: 12px 14px; font-size: 13.5px; }
.end .big { font-size: 26px; line-height: 38px; }
.tbl.wide { max-width: 1000px; font-size: 14px; line-height: 21px; margin-top: 6px; }
.tbl.wide th, .tbl.wide td { padding: 12px 20px 12px 0; }
.tbl.wide th { width: 150px; }
.tbl.wide thead th { width: auto; }
.note.fn { font-size: 11.5px; line-height: 16px; color: var(--ink-400); margin-top: 10px; }   /* 표 아래 주석 */

/* 인터뷰 장: 같은 폭 두 열, 위쪽 정렬, 카드 간격 통일 */
blockquote { margin: 0; }
.iv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; max-width: 1000px; }
.iv-q { display: flex; flex-direction: column; }
.iv-q ol.ann { margin-top: 10px; gap: 10px; }
.iv-q .why { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 17px; color: var(--ink-500); }
.iv-q .iv-note { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--gray-300); font-size: 12px; line-height: 17px; color: var(--ink-500); }
section.alt .iv-q .iv-note { border-top-color: var(--gray-300); }
.iv-a { display: flex; flex-direction: column; gap: 10px; }
.iv-a .quote, .iv-a .card { margin: 0; }
.iv-a .quote b { font-size: 13px; }
@media screen and (max-width: 960px) { .iv { grid-template-columns: 1fr; } }
.card.insight { margin-top: 14px; max-width: 1000px; }
.card.insight p { font-size: 13.5px; line-height: 20px; }

/* 데이터 조회 계획: 대상·기간·그룹 3칸 */
.spec { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; max-width: 1000px; margin-bottom: 14px; }
.spec .sp { background: var(--surface); border: 1px solid var(--gray-300); border-radius: 12px; padding: 12px 14px; }
section.alt .spec .sp { background: var(--gray-100); border-color: transparent; }
.spec .sp .lbl { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--blue-100); color: var(--blue-600); font-size: 11px; font-weight: 700; }
.spec .sp p { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-700); }
.spec .sp p b { color: var(--ink); }
#data .tbl.wide, #research .tbl.wide { font-size: 13px; line-height: 19px; }
#data .tbl.wide th, #data .tbl.wide td, #research .tbl.wide th, #research .tbl.wide td { padding: 9px 16px 9px 0; }
@media screen and (max-width: 960px) { .spec { grid-template-columns: 1fr; } }
.spec .sp p.why { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-300); font-size: 11.5px; line-height: 16px; color: var(--ink-500); }

/* 플로팅 카드 구성(해부도) */
.anat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; max-width: 1100px; }
.anat-stage { --k: 1; width: 100%; aspect-ratio: 3 / 2; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--gray-300); overflow: hidden; position: relative; }
section.alt .anat-stage { background: var(--surface); }
.anat-stage iframe { position: absolute; left: 0; top: 0; display: block; width: 600px; height: 400px; border: 0; transform: scale(var(--k)); transform-origin: 0 0; }   /* --k = 칸 폭 / 600 (deck.js) */
.anat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.anat-list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 12.5px; line-height: 18px; color: var(--ink-700); }
.anat-list li b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.anat-list .n { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.phones.steps { flex-wrap: nowrap; gap: 18px; }
.tbl.copy td em.r { font-style: normal; color: var(--red-500); font-weight: 700; }
.tbl.copy td:nth-child(2) { font-weight: 700; color: var(--ink); white-space: nowrap; }
@media screen and (max-width: 760px) { .anat { grid-template-columns: 1fr; } }

/* 검증 지표 */
.mt-h { margin: 20px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 1000px; }
.metrics .mt { background: var(--surface); border: 1px solid var(--gray-300); border-radius: 12px; padding: 12px 14px; }
.metrics .mt.main { border-color: var(--blue-500); box-shadow: inset 0 0 0 1px var(--blue-500); }
.metrics .mt .lbl { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--gray-200); color: var(--ink-700); font-size: 11px; font-weight: 700; }
.metrics .mt .lbl.blue { background: var(--blue-100); color: var(--blue-600); }
.metrics .mt b { display: block; font-size: 14px; line-height: 20px; color: var(--ink); }
.metrics .mt p { margin: 2px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-500); }
@media screen and (max-width: 960px) { .metrics { grid-template-columns: 1fr 1fr; } }
.card.intent { margin-top: 14px; padding: 14px 16px; }
.card.intent h4 { font-size: 14px; margin-bottom: 6px; }
.card.intent p { font-size: 12.5px; line-height: 19px; }
.card.intent p b { color: var(--on-ink); }
#floating-motion ol.ann.when { gap: 6px; }
#floating-motion ol.ann.when li { font-size: 12.5px; line-height: 18px; }

/* 실험 장 하단 참고 메모: 펼쳐 둔 작은 회색 */
.memo { margin-top: 16px; max-width: 1000px; }
.memo .memo-h { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-500); }
.tbl.memo-t { font-size: 11.5px; line-height: 16px; color: var(--ink-500); }
.tbl.memo-t th, .tbl.memo-t td { padding: 4px 12px 4px 0; border-bottom-color: var(--gray-300); }
.tbl.memo-t th { color: var(--ink-500); font-weight: 600; width: 110px; }
.memo .note { margin-top: 6px; font-size: 11.5px; }

/* 추천 카드 설계: 순위 · 근거 · 교체 */
.rk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; max-width: 1100px; }
.rk-viz { display: flex; flex-direction: column; align-items: center; padding: 28px 24px 20px; border-radius: 20px; background: var(--gray-100); min-width: 0; }
.rk-frame { --rs: 1; position: relative; width: 100%; max-width: 500px; aspect-ratio: 430 / 188; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--gray-300), 0 20px 50px rgba(33,37,41,.14); }
.rk-frame iframe { position: absolute; left: 0; top: 0; display: block; width: 430px; height: 188px; border: 0; transform: scale(var(--rs)); transform-origin: 0 0; }   /* --rs = 칸 폭 / 430 (deck.js), 잘림 없음 */
.rk-cap { margin: 14px 0 0; font-size: 12px; color: var(--ink-500); font-weight: 500; }
.rk-txt { display: grid; gap: 12px; min-width: 0; }
.pt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--gray-300); }
.pt-k { display: inline-flex; align-items: center; justify-content: center; height: 24px; border-radius: var(--radius-pill); background: var(--blue-100); color: var(--blue-600); font-size: 11.5px; font-weight: 700; }
.pt b { display: block; font-size: 14px; line-height: 20px; color: var(--ink); margin-bottom: 3px; }
.pt p { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-700); }
.pt .ev { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.pt .ev li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-700); min-width: 0; }
.pt .ev .ch { flex: none; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--gray-100); border: 1px solid var(--gray-300); font-size: 11.5px; font-weight: 600; color: var(--ink-700); white-space: nowrap; }
.pt .ev .ch.pur { border-color: var(--purple-500); color: var(--purple-500); background: var(--surface); }
@media screen and (max-width: 760px) { .rk { grid-template-columns: 1fr; } }
.tbl.spec-t { font-size: 12.5px; line-height: 18px; }
.tbl.spec-t th, .tbl.spec-t td { padding: 8px 16px 8px 0; }
.tbl.spec-t td:first-child { white-space: nowrap; width: 130px; }
.tbl.spec-t td:last-child { color: var(--ink-500); width: 36%; }

/* 관심상품 줄 규칙 다이어그램 */
.wl { max-width: 1000px; padding: 22px 24px 14px; border-radius: 20px; background: var(--gray-100); }
section.alt .wl { background: var(--surface); }
.wl-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wl-i { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wl-i .av { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--gray-300); overflow: hidden; display: block; }
.wl-i .av img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wl-i .av.so i { position: absolute; inset: 0; background: rgba(0,0,0,.35); color: var(--on-ink); font-style: normal; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wl-i.on .av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue-500); }
.wl-i b { font-size: 12.5px; color: var(--ink); }
.wl-i .tg { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--blue-100); color: var(--blue-600); white-space: nowrap; }
.wl-i .tg.red { background: var(--gray-200); color: var(--ink-700); }
.wl-i .tg.gray { background: var(--gray-200); color: var(--ink-500); }
.wl-i.off { opacity: .45; }
.wl-i.off .av { filter: grayscale(1); }
.wl-i.off b { text-decoration: line-through; }
.wl-arrow { margin-top: 12px; position: relative; height: 16px; }
.wl-arrow::before { content: ""; position: absolute; left: 4%; right: 18%; top: 7px; height: 2px; background: linear-gradient(90deg, var(--blue-500), var(--gray-300)); border-radius: 2px; }
.wl-arrow { height: 26px; }
.wl-arrow span { position: absolute; left: 4%; top: 13px; font-size: 11px; font-weight: 700; color: var(--blue-600); }
.wl-arrow::after { content: "급할수록 왼쪽"; }
.wl-arrow span { display: none; }
.wl-arrow::after { position: absolute; right: 18%; top: 13px; font-size: 11px; font-weight: 700; color: var(--ink-400); content: "→ 덜 급함"; }
.wl-arrow::before { top: 6px; }
.wl-arrow .l { position: absolute; left: 4%; top: 13px; font-size: 11px; font-weight: 700; color: var(--blue-600); }
/* 예외 · 화면별 노출 조건 */
.edge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; max-width: 1100px; align-items: start; }
.tbl.edge-t { font-size: 12.5px; line-height: 18px; }
.tbl.edge-t th, .tbl.edge-t td { padding: 8px 12px 8px 0; }
.tbl.edge-t td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tbl.cmp3 td:first-child { font-weight: 400; color: var(--ink-700); white-space: normal; }
.tbl.cmp3 tbody th, .tbl.cmp3 tr th:first-child { width: 64px; }
@media screen and (max-width: 960px) { .edge { grid-template-columns: 1fr; } .wl-row { grid-template-columns: repeat(4, 1fr); } }
.closing { margin: 20px 0 14px; max-width: 1000px; font-size: 17px; line-height: 27px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
#impact .links { max-width: 1000px; }
/* 인터뷰: 발언 → 단서 */
.iv2 .card .q { margin: 8px 0 8px; padding: 10px 12px; border-left: 3px solid var(--blue-500); background: var(--gray-100); font-size: 14px; line-height: 21px; color: var(--ink); font-weight: 600; }
section.alt .iv2 .card .q { background: var(--surface); }
.iv2 .card .clue { font-size: 12.5px; line-height: 18px; color: var(--ink-700); }
.iv2 .card .clue b { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--gray-200); color: var(--ink-700); font-size: 11px; }
/* 플로팅 ① 네 가지 의도 */
.intents { display: grid; gap: 10px; }
.it { padding: 11px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--gray-300); }
section.alt .it { background: var(--surface); }
.it b { display: block; font-size: 13.5px; line-height: 19px; color: var(--ink); margin-bottom: 2px; }
.it p { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-700); }
/* 플로팅 ② 상태 표 */
.tbl.motion-t { font-size: 12.5px; line-height: 18px; max-width: 640px; }
.tbl.motion-t th, .tbl.motion-t td { padding: 6px 12px 6px 0; }
.tbl.motion-t td:first-child { width: 140px; }
.tbl.motion-t td small { display: block; font-size: 11px; color: var(--ink-500); font-weight: 500; }
.tbl.copy td small { display: block; font-size: 11px; line-height: 15px; color: var(--ink-500); font-weight: 500; white-space: normal; }
/* 실험 단계 표 · 접점 비교 표 */
.tbl.exp-t, .tbl.alt-t { font-size: 13px; line-height: 19px; }
.tbl.exp-t th, .tbl.exp-t td, .tbl.alt-t th, .tbl.alt-t td { padding: 9px 16px 9px 0; }
.tbl.exp-t td:first-child, .tbl.alt-t td:first-child { white-space: nowrap; }
.tbl.exp-t tr.pick td, .tbl.alt-t tr.pick td { background: var(--blue-50); }
.tbl.exp-t tr.pick td:first-child, .tbl.alt-t tr.pick td:first-child { color: var(--blue-600); }
/* 06 해결 방향: 1단계 안의 다음 선택 */
.choice { max-width: 1000px; margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--blue-50); }
.choice-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--blue-600); }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.choice-row b { display: block; font-size: 14px; color: var(--ink); }
.choice-row span { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ink-700); }
.choice-f { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* 마무리: 결론은 크게, 자료 링크는 주석처럼 */
#impact .closing { margin: 18px 0 0; padding: 18px 22px; border-radius: 16px; background: var(--ink); max-width: 1000px; }
#impact .closing .lbl { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.14); color: var(--on-ink); }
#impact .closing p { margin: 0; font-size: 18px; line-height: 29px; font-weight: 700; color: var(--on-ink); }
.refs { max-width: 1000px; margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--gray-300); font-size: 12px; line-height: 20px; color: var(--ink-400); }
.refs b { margin-right: 10px; font-weight: 600; color: var(--ink-500); }
.refs a { color: var(--ink-500); text-decoration: none; margin-right: 6px; }
.refs a + a::before { content: "·"; margin-right: 6px; color: var(--ink-400); }
.refs a:hover { color: var(--blue-500); }
@media screen and (max-width: 760px) { .choice-row { grid-template-columns: 1fr; gap: 8px; } }