/* BridgeHere 홈페이지 — 레이아웃 v0.2 구현 (모바일 퍼스트, 브레이크포인트 768 / 1024 / 1280) */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body {
  margin: 0; min-width: 320px;
  background: var(--bg-base); color: var(--text-high);
  font-family: var(--font); font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-x: hidden;
}
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--link); text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* hidden 속성이 위 display 규칙에 밀리지 않도록 */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.theme-dark { background: var(--bg-base); color: var(--text-high); }
.container { width: min(var(--container), 100% - 32px); margin-inline: auto; }
.section { padding-block: 56px; position: relative; }

/* ---------- 타입 스케일 (Tokens v0.1 + 웹 확장) ---------- */
.display { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--text-high); }
.title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; color: var(--text-high); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--link); text-transform: uppercase; }
.lead { font-size: 15px; line-height: 1.7; color: var(--text-body); }
.caption { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--text-faint); }

.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.sec-head--row { align-items: flex-end; text-align: right; }
.sec-head__copy { display: flex; flex-direction: column; gap: 12px; }
.sec-head--row .lead { max-width: 360px; }
.pain .sec-head--row .lead { max-width: 480px; }
/* 가운데 정렬 섹션 헤드 + 강조 캡슐(라이브 파형) — re/최유진 프로토타입 '대화에 집중할 수 있는 기능' */
.sec-head--center { align-items: center; text-align: center; }
.sec-head--center .lead { max-width: 640px; }
.sec-head__cta { margin-top: 8px; align-self: center; }
.eyebrow--line { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow--line::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.display--xl { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.16; letter-spacing: -0.04em; color: var(--primary); }
.hl { display: inline-flex; align-items: center; gap: .26em; margin: -.2em .12em -.2em 0; padding: .11em .4em; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .8em; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; vertical-align: .275em; white-space: nowrap; }
.hl-wave { display: inline-flex; align-items: center; gap: .07em; height: .62em; }
.hl-wave i { display: block; width: .09em; border-radius: .05em; background: #F3DFA0; animation: hl-wave 1.4s ease-in-out infinite; }
.hl-wave i:nth-child(1) { height: .3em; animation-delay: -.15s; }
.hl-wave i:nth-child(2) { height: .62em; animation-delay: -.55s; }
.hl-wave i:nth-child(3) { height: .42em; animation-delay: -.95s; }
.hl-wave i:nth-child(4) { height: .2em; animation-delay: -.35s; }
@keyframes hl-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .hl-wave i { animation: none; } }

/* ---------- 컨트롤 (Components v0.1 · app/css) ---------- */
.btn { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: var(--r-ctrl); border: 1px solid transparent; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn--sm { height: 40px; padding: 0 14px; font-size: 13px; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-body); font-weight: 600; }
.btn--ghost:hover { border-color: var(--primary); color: var(--text-high); background: var(--tint); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn svg { flex-shrink: 0; }

.chip { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text-sub); font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip:hover { border-color: var(--border-strong); color: var(--text-high); }
.chip.is-active, .chip--tint { background: var(--tint); border-color: transparent; color: var(--on-tint); font-weight: 700; }
.chip--sm { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 700; }
.chip--xs { height: 24px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.chip--amber { background: var(--highlight); border-color: transparent; color: var(--highlight-text); font-weight: 700; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: var(--r-wash); padding: 2px 6px; white-space: nowrap; }

.badge--navy { color: var(--on-primary); background: var(--primary); }
.badge--amber { color: var(--highlight-text); background: var(--highlight); }
.badge--tint { color: var(--on-tint); background: var(--tint); }

.seg { display: inline-flex; gap: 6px; background: var(--bg-tray); border-radius: var(--r-ctrl); padding: 4px; max-width: 100%; }

.seg__btn { flex: 1 0 auto; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-sub); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg__btn.is-active { background: var(--bg-surface); color: var(--text-high); font-weight: 700; box-shadow: 0 1px 2px rgba(20, 20, 19, 0.08); }
.theme-dark .seg__btn.is-active { background: var(--tint); color: var(--on-tint); box-shadow: none; }

.input { height: 44px; width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 0 14px; font-size: 14px; color: var(--text-high); outline: none; }
.input::placeholder { color: var(--border-strong); }
.input:focus { border-color: var(--primary); }
.theme-dark .input { background: var(--bg-subtle); border-color: var(--border-strong); }

.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--text-high); line-height: 1.5; }
.checks svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- 00 헤더: Liquid Metal Navbar ---------- */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ring-spin { to { --ring: 360deg; } }
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 12px; pointer-events: none; color: #F2F6FC; }
.pill { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 52px; max-width: 100%; padding: 5px 6px 5px 5px; border-radius: 999px; color: #F2F6FC;
  background: rgba(15, 22, 38, 0.46); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(6, 11, 22, 0.35), 0 14px 32px rgba(6, 11, 22, 0.32);
  transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease; }
/* 회전하는 금속 링: 테두리 두께만큼 마스크로 뚫어 안쪽은 투명 유지 */
.pill::before, .pill__icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ring), rgba(255, 255, 255, 0.95) 0%, rgba(143, 155, 179, 0.35) 18%, rgba(255, 255, 255, 0.9) 36%, rgba(93, 106, 134, 0.3) 54%, rgba(255, 255, 255, 0.95) 72%, rgba(143, 155, 179, 0.35) 88%, rgba(255, 255, 255, 0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ring-spin 7s linear infinite; }
.pill__icon::before { padding: 1.5px; animation-duration: 4s; animation-direction: reverse; }
.pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.04) 100%); }
.pill__icon { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, rgba(46, 60, 88, 0.9), rgba(11, 16, 32, 0.95) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 6px rgba(6, 11, 22, 0.4); }
.pill__icon img { position: relative; z-index: 1; height: 16px; width: auto; }
.nav { display: none; gap: 4px; position: relative; z-index: 1; }
.nav a { color: #D6DEEC; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; transition: color 120ms ease, background 120ms ease; }
.nav a:hover, .nav a.is-active { color: #FFFFFF; background: rgba(255, 255, 255, 0.10); }
.header__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; }
.pill__cta { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #0F1626; border: 1.5px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(135deg, #FFFFFF, #9AA3B5 45%, #FFFFFF 65%, #6B7280) border-box;
  box-shadow: 0 1px 2px rgba(6, 11, 22, 0.3); transition: transform 120ms ease, color 200ms ease; }
.pill__cta:hover { transform: translateY(-1px); }
.menu-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.menu-btn:hover { background: rgba(255, 255, 255, 0.08); }
/* 히어로를 지나도 흰색 톤으로 바꾸지 않음 (요청에 따라 비활성화). 되살리려면 아래 주석을 해제하세요.
.header.is-scrolled { color: #14264A; }
.header.is-scrolled .pill { color: #14264A; background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(20, 20, 19, 0.14), 0 14px 32px rgba(20, 20, 19, 0.14); }
.header.is-scrolled .pill::before { background: conic-gradient(from var(--ring), rgba(27, 35, 51, 0.9) 0%, rgba(138, 147, 166, 0.35) 18%, rgba(255, 255, 255, 0.95) 36%, rgba(75, 85, 102, 0.6) 54%, rgba(255, 255, 255, 0.95) 72%, rgba(138, 147, 166, 0.35) 88%, rgba(27, 35, 51, 0.9) 100%); }
.header.is-scrolled .pill::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.03) 100%); }
.header.is-scrolled .nav a { color: #3F4A5F; }
.header.is-scrolled .nav a:hover, .header.is-scrolled .nav a.is-active { color: #14264A; background: rgba(20, 38, 74, 0.07); }
.header.is-scrolled .pill__cta { color: #F7F4EC; background: linear-gradient(#14264A, #14264A) padding-box, linear-gradient(135deg, #FFFFFF, #6B7280 45%, #FFFFFF 65%, #1B2333) border-box; }
.header.is-scrolled .menu-btn:hover { background: rgba(20, 38, 74, 0.07); }
*/
.sheet { position: fixed; top: 68px; left: 12px; right: 12px; z-index: 39; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 12px; display: none; flex-direction: column; gap: 4px; box-shadow: 0 16px 32px rgba(20, 20, 19, 0.16); }
.sheet.is-open { display: flex; }
.sheet a { display: flex; align-items: center; height: 48px; padding: 0 12px; border-radius: var(--r-ctrl); font-size: 15px; font-weight: 600; color: var(--text-high); }
.sheet a:hover { background: var(--tint); }

/* ---------- 01 히어로 ---------- */
.hero { position: relative; overflow: hidden; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; padding: 96px 0 24px; }
.hero__media { position: absolute; inset: 0; z-index: 0; background: #060B16 url("/media/hero-poster-bbb53c1444a24d28a36ffe8ee2a6bbf3.jpg") center / cover no-repeat; }
.hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 17, 32, 0.62) 0%, rgba(10, 17, 32, 0.28) 55%, rgba(10, 17, 32, 0.16) 100%); }
.hero__title, .hero__lead { text-shadow: 0 2px 18px rgba(6, 11, 22, 0.5); }
.hero .container { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; }
.hero__copy { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }

.hero__eyebrow { display: flex; align-items: center; gap: 10px; color: #8FAEFF; }
.hero__eyebrow::before { content: ""; width: 18px; height: 1px; background: #8FAEFF; }
.hero__title { font-family: 'Stellar Serif', var(--font); font-size: clamp(72px, 11vw, 150px); line-height: 0.86; font-weight: 700; letter-spacing: -0.06em; display: flex; flex-direction: column; gap: 0.06em; padding-top: 0.1em; }
.hero__title > span { display: flex; flex-wrap: wrap; gap: 0 0.12em; }
.hero__title strong, .hero__title em { font: inherit; }
.hero__title strong { color: #F7F4EC; }
.hero__title em { font-style: normal; color: rgba(247, 244, 236, 0.5); }
.hero__lead { font-size: clamp(15px, 1.3vw, 17px); max-width: none; }
.hero__cta { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* 자막 카드 — Motion v0.1 */
.capcard { width: 100%; max-width: 460px; padding: 14px 16px; border-radius: var(--r-card); background: rgba(6, 11, 22, 0.86); border: 1px solid #24344F; display: flex; flex-direction: column; gap: 8px; }
.capcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-high); }
.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
.capcard__src { position: relative; min-height: 40px; font-size: 13px; line-height: 1.5; }

.capcard__final { position: absolute; inset: 0 0 auto 0; color: var(--text-high); }
.capcard__tr { padding: 10px 12px; border-radius: var(--r-ctrl); background: #111B2E; font-size: 16px; line-height: 1.45; font-weight: 700; color: #F2F6FC; }
.kw { color: #F2F6FC; }
/* ---------- 02 스트립 ---------- */
.strip { border-bottom: 1px solid var(--border); padding: 24px 0; }
.strip .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.strip__lead { display: none; }
.strip__item { padding: 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-ctrl); }
.strip__item strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--primary); letter-spacing: -0.02em; }
.strip__item span { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-faint); }

/* ---------- 03 페인 ---------- */
/* Before / After 드래그 비교 슬라이더 — 같은 구도의 밤(지금까지) · 아침(Bridge Here와 함께) */
.cmp { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-card); overflow: hidden; background: #060B16; user-select: none; touch-action: pan-y; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc((100 - var(--pos)) * 1%) 0 0); }
.cmp__before::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(to bottom, rgba(6, 11, 22, 0.82), rgba(6, 11, 22, 0)); pointer-events: none; }
.cmp__text { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.cmp__text--before { left: 16px; top: 16px; right: 16px; color: #F2F6FC; }
.cmp__text--after { right: 16px; bottom: 16px; left: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(247, 244, 236, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #14264A; }
.cmp__label { display: inline-flex; align-self: flex-start; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.cmp__label--before { background: rgba(255, 255, 255, 0.12); color: #C4D0E2; border: 1px solid rgba(159, 176, 200, 0.3); }
.cmp__label--after { background: #14264A; color: #F7F4EC; }
.cmp__lines { display: flex; flex-direction: column; gap: 6px; }
.cmp__lines li { position: relative; font-size: 13px; line-height: 1.5; font-weight: 600; }
.cmp__text--before .cmp__lines li { color: #F2F6FC; text-shadow: 0 1px 2px rgba(6, 11, 22, 0.6); }
.cmp__text--after .cmp__lines li { padding-left: 14px; }
.cmp__text--after .cmp__lines li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: #14264A; }
.cmp__line { position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 2px; margin-left: -1px; background: #F7F4EC; z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px rgba(6, 11, 22, 0.25); }
.cmp__handle { position: absolute; top: 50%; left: calc(var(--pos) * 1%); z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #F7F4EC; color: #14264A; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(6, 11, 22, 0.35); pointer-events: none; transition: transform 160ms ease; }
.cmp.is-dragging .cmp__handle, .cmp:hover .cmp__handle { transform: scale(1.06); }
.cmp__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: col-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.cmp__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }
.cmp__range:focus-visible ~ .cmp__handle { outline: 2px solid #4A7DFF; outline-offset: 3px; }
.cmp__range:focus-visible { outline: none; }

/* ---------- 04 기능 · 회의 전·중·후 (좌측 스텝 리스트 + 우측 비주얼, 모바일 아코디언) ---------- */
.steps__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.steps__list { display: flex; flex-direction: column; gap: 8px; }
.steps__item { position: relative; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-base); overflow: hidden; transition: border-color 200ms ease, background 200ms ease; }
.steps__item.is-active { border-color: var(--primary); background: var(--bg-surface); }
.steps__btn { display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 44px; padding: 16px; text-align: left; }
.steps__num { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--link); padding-top: 3px; }
.steps__txt { display: flex; flex-direction: column; gap: 2px; }
.steps__title { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--text-high); transition: color 200ms ease; }
.steps__sub { font-size: 13px; line-height: 1.5; color: var(--text-sub); }
.steps__item.is-active .steps__title { color: var(--primary); }
.steps__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease-rise); }
.steps__body > div { overflow: hidden; }
.steps__item.is-active .steps__body { grid-template-rows: 1fr; }
.steps__copy { padding: 0 16px 16px 46px; display: flex; flex-direction: column; gap: 12px; }
.steps__copy .checks { margin-top: 0; }
.steps__slot { padding: 0 16px 16px; }
.steps__slot:empty { display: none; }
.steps__slot .steps__panel { position: static; opacity: 1; visibility: visible; transform: none; }
.steps__bar { position: absolute; left: 18px; right: 18px; bottom: 10px; z-index: 1; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; } /* 진행 바는 카드 안쪽(바닥에서 10px, 좌우 18px) */
.steps__bar i { display: block; height: 100%; width: 0; background: var(--primary); }
.steps__item.is-active[data-auto="true"] .steps__bar i { animation: stepBar 8s linear forwards; }
@keyframes stepBar { from { width: 0; } to { width: 100%; } }
.steps__stage { display: none; }
.steps__panel.theme-dark { background: transparent; }

[data-glossary-list] { display: flex; flex-direction: column; gap: 8px; }

/* 자막 스트림 (05 · 데모) */

/* 요약 노트 · 타임라인 (06 · 데모) */
.note { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 460px; }
.note__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.note__head b { font-size: 13px; font-weight: 700; color: var(--primary); display: block; }
.note__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.note__sec { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); }
.note__item { padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--bg-subtle); font-size: 13px; line-height: 1.6; color: var(--text-high); }

.note details { border: 1px solid var(--border); border-radius: var(--r-ctrl); background: var(--bg-surface); }
.note summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--primary); }
.note summary::-webkit-details-marker { display: none; }
.note summary::after { content: "+"; font-size: 18px; color: var(--border-strong); }
.note details[open] summary::after { content: "−"; }
.note details > div { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.note details .note__item { font-size: 13px; }

.replay { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.replay__list { display: flex; flex-direction: column; gap: 4px; }
.replay__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; text-align: left; padding: 8px 10px; border-radius: var(--r-ctrl); font-size: 13px; line-height: 1.5; color: var(--text-body); cursor: pointer; border: 1px solid transparent; }
.replay__row:hover { background: var(--bg-subtle); }
.replay__row.is-current { background: var(--highlight); color: var(--text-high); border-color: transparent; }
.replay__row.is-current b { color: var(--text-high); }
.replay__row time { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.replay__row b { display: block; font-weight: 700; color: var(--primary); }
.wave { position: relative; height: 44px; border-radius: var(--r-ctrl); background: var(--bg-subtle); border: 1px solid var(--border); padding: 0 12px 8px; display: flex; align-items: flex-end; gap: 3px; overflow: hidden; }
.wave i { flex: 1; min-width: 2px; border-radius: var(--r-pill); background: var(--border); transition: background 120ms linear; }
.wave i.is-played { background: var(--meter); }
.wave__cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); pointer-events: none; }
.wave input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.replay__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-faint); }
.replay__meta .btn { height: 36px; }

/* ---------- 07 데모 ---------- */

.cal { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { font-size: 11px; font-weight: 700; color: var(--text-faint); text-align: center; padding: 4px 0; }
.cal__day { aspect-ratio: 1; min-height: 36px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 500; color: var(--text-body); background: var(--bg-surface); border: 1px solid transparent; }

.cal__day.has-event { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.cal__day.has-event::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--meter); }
.cal__day.is-selected { background: var(--tint); }
.cal__events { display: flex; flex-direction: column; gap: 6px; }
.cal__event { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-ctrl); background: var(--bg-surface); border: 1px solid var(--border); font-size: 13px; }
.cal__event b { font-weight: 700; color: var(--text-high); }
.cal__event span { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
/* ---------- 기능 01·02 앱 화면 (re/최유진 프로토타입 이식 · .fx 스코프) ---------- */
.fx { --chrome: #EFEBE0; --cream: #F7F4EC; --wash: #FBF9F4; --ink: #1B2333; --slate: #475063; --olive: #6C6650; --faint: #5F5A48; --line: #E3DCC9; --line-strong: #D7CFB9; --line-soft: #F0EBDD; --navy: #14264A; --gold-link: #8A6B10; --gold-hl: #F3DFA0; --gold-deep: #684B00; --rec: #D64545; --ease: cubic-bezier(.23, 1, .32, 1); --r-card: 20px; --r-pill: 999px; }
.fx mark { color: var(--navy); background: var(--gold-hl); border-radius: 3px; padding: 0 4px; }
.fx p { margin: 0; }
.fx .window-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 42px; padding: 0 14px; background: var(--chrome); border-bottom: 1px solid var(--line); flex: none; }
.fx .window-bar > img { width: 25px; height: 21px; object-fit: contain; }
.fx .window-bar > span { color: var(--olive); font-size: 11px; font-weight: 560; display: inline-flex; align-items: center; gap: 7px; }
.fx .window-controls { justify-self: end; display: flex; align-items: center; gap: 14px; }
.fx .window-controls i { display: block; width: 10px; height: 1px; background: var(--olive); }
.fx .window-controls i:nth-child(2) { width: 8px; height: 8px; background: none; border: 1px solid var(--olive); }
.fx .window-controls i:nth-child(3) { width: 9px; height: 9px; background: linear-gradient(45deg, transparent 46%, var(--olive) 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--olive) 47% 53%, transparent 54%); }
.fx .rec-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: fx-blink 1.2s ease-in-out infinite; }
@keyframes fx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.fx .recording { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; font-weight: 730; font-variant-numeric: tabular-nums; color: var(--ink); }
.fx .language-badge { display: inline-flex; align-items: center; white-space: nowrap; color: var(--navy); background: rgba(20, 38, 74, .08); border-radius: 4px; padding: 3px 7px; font-size: 10px; font-weight: 720; }
.fx .language-badge--gold { color: var(--gold-deep); background: var(--gold-hl); }
.fx .language-badge--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3FA36B; margin-right: 6px; }
.fx .session-window, .fx .feature-workspace { display: flex; flex-direction: column; height: 100%; min-height: 0; border: 1px solid var(--line-strong); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 18px 40px rgba(20, 20, 19, .08); }
.fx .session-window { background: var(--cream); }
.fx .feature-workspace { background: #fff; }
.fx .session-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; min-height: 48px; padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--line-soft); }
.fx .session-help { display: flex; justify-content: space-between; padding: 11px 16px 5px; color: var(--olive); font-size: 9px; font-weight: 620; }
.fx .session-scroll { -webkit-mask-image: linear-gradient(transparent, #000 44px); mask-image: linear-gradient(transparent, #000 44px); flex: 1; min-height: 0; overflow: hidden; padding: 0 16px 8px; display: flex; flex-direction: column; justify-content: flex-end; }
.fx .transcript-entry { padding: 13px 0; border-top: 1px solid var(--line-soft); }
.fx .transcript-entry.is-active { background: #fff; border-radius: 10px; margin-inline: -8px; padding-inline: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.fx .transcript-meta { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 10px; }
.fx .transcript-meta strong { color: var(--slate); }
.fx .editing-badge { margin-left: auto; color: var(--gold-deep); background: var(--gold-hl); border-radius: 4px; padding: 2px 5px; font-size: 9px; font-weight: 700; }
.fx .source-line { margin-top: 6px; color: var(--slate); font-size: 12px; line-height: 1.55; }
.fx .translation-line { margin-top: 4px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.55; }
.fx .is-partial .source-line { color: #8B93A5; font-style: italic; min-height: 19px; }
.fx .is-partial .translation-line { color: #8B93A5; font-size: 12px; font-weight: 500; }
.fx .caret::after { content: ""; display: inline-block; width: 1.5px; height: 12px; margin-left: 2px; vertical-align: -2px; background: #8B93A5; animation: fx-blink 1s steps(2) infinite; }
.fx .session-footer { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: #fff; border-top: 1px solid var(--line); }
.fx .end-session { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; color: var(--cream); background: var(--ink); border-radius: var(--r-pill); font-size: 10px; font-weight: 700; white-space: nowrap; }
.fx .end-session i { width: 8px; height: 8px; border-radius: 1px; background: var(--cream); }
.fx .utility-control { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 11px; color: var(--slate); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 10px; font-weight: 650; white-space: nowrap; }
.fx .session-spacer { flex: 1; }
.fx .workspace-body { flex: 1; min-height: 0; }
.fx .summary-workspace-body { padding: 8px; overflow: hidden; }
.fx .minutes-workspace { display: grid; grid-template-columns: 1fr; gap: 12px; height: 100%; }
.fx .minutes-summary, .fx .minutes-transcript { min-width: 0; padding: 16px; background: var(--wash); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fx .minutes-transcript { background: #fff; display: none; }
.fx .mini-panel-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.fx .mini-panel-title strong { color: var(--ink); font-size: 13px; }
.fx .mini-panel-title > span:not(.language-badge) { color: var(--olive); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; font-size: 9px; font-weight: 600; }
.fx .minutes-summary > p { margin-top: 10px; color: var(--slate); font-size: 12px; line-height: 1.65; }
.fx .summary-block { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.fx .summary-block strong { display: block; color: var(--navy); font-size: 10px; }
.fx .summary-block span { display: block; margin-top: 5px; color: var(--slate); font-size: 11px; line-height: 1.8; }
.fx .summary-block b { color: var(--gold-link); }
.fx .tl { margin-left: 4px; padding: 0 4px; color: var(--gold-link); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 4px; cursor: pointer; }
.fx .tl:hover, .fx .tl.is-on { background: var(--gold-hl); color: var(--gold-deep); }
.fx .minutes-summary > .summary-foot { margin-top: 10px; color: var(--faint); font-size: 9.5px; line-height: 1.5; }
.fx .note-entry { padding: 11px 8px; margin-inline: -8px; border-top: 1px solid var(--line-soft); border-radius: 8px; transition: background .25s, box-shadow .25s; }
.fx .mini-panel-title + .note-entry { border-top: 0; }
.fx .note-entry.is-hit { background: var(--wash); box-shadow: inset 0 0 0 1px var(--gold-hl); }
.fx .note-entry > div { display: flex; align-items: center; gap: 7px; }
.fx .note-entry > div strong { color: var(--slate); font-size: 10px; }
.fx .note-entry > div b { color: var(--gold-link); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fx .note-entry > p { margin-top: 5px; font-size: 12px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.fx .note-entry > span { display: block; margin-top: 2px; color: var(--olive); font-size: 10.5px; line-height: 1.5; }
/* 모바일(아코디언 슬롯): 도움말·하단 버튼 숨기고 자막 높이 제한 */
@media (max-width: 767px) {
  .fx .session-help, .fx .session-footer { display: none; }
  .fx .session-scroll { max-height: 365px; }
}
@media (min-width: 820px) {
  .steps__stage .fx .minutes-workspace { grid-template-columns: 1.15fr .85fr; }
  html[lang="en"] .steps__stage .fx .minutes-workspace { grid-template-columns: 1.4fr .6fr; } /* 영문 요약이 길어 요약 칸을 넓힘 */
  .fx .summary-workspace-body { padding: 16px; }
  .fx .minutes-workspace { grid-template-columns: .9fr 1.1fr; }
  .fx .minutes-transcript { display: block; }
}
@media (prefers-reduced-motion: reduce) { .fx .rec-dot, .fx .caret::after { animation: none; } }

/* 기능 5종 패널 보조 — 요약 근거 시간 · 캘린더 일정 · 녹화 파일 */
.cal__event { align-items: center; }
.cal__event > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal__event .cal__meta { display: block; white-space: normal; }
.cal__event.is-next { border-color: var(--primary); }
.cal__event .btn { flex-shrink: 0; height: 32px; padding: 0 12px; font-size: 12px; color: var(--on-primary); white-space: nowrap; }
.file { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-ctrl); background: var(--bg-subtle); border: 1px solid var(--border); }
.file__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-ctrl); background: var(--primary); color: var(--on-primary); flex-shrink: 0; }
.file__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file__txt b { font-size: 14px; font-weight: 700; color: var(--text-high); }
.file__bar { height: 4px; border-radius: var(--r-pill); background: var(--bg-tray); overflow: hidden; }
.file__bar i { display: block; width: 100%; height: 100%; background: var(--meter); }
.file__drop { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-card); text-align: center; }
.file__drop b { font-size: 13px; font-weight: 700; color: var(--text-high); }

/* ---------- 08 다운로드 ---------- */
/* ---------- 08 시작하기: 빈 자리 사진 배경 + 신뢰 배지 3개 + 단일 CTA + 다음 단계 안내 ---------- */
.start { position: relative; overflow: hidden; min-height: 640px; display: flex; align-items: center; background: #060B16; }
.start__media { position: absolute; inset: 0; z-index: 0; }
.start__img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.start__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(6, 11, 22, 0.92) 0%, rgba(6, 11, 22, 0.78) 45%, rgba(6, 11, 22, 0.35) 100%); }
.start__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.start__copy { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.start__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.start__btns .btn { justify-content: center; }
.start__cap { max-width: 400px; align-self: flex-end; }
[data-magnet] { transition: transform 150ms ease-out; will-change: transform; }

/* ---------- 09 요금 ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.plan { padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.plan--rec { border-color: var(--primary); order: -1; }
.plan__badge { position: absolute; top: -11px; left: 20px; padding: 3px 8px; }
.plan__name { font-size: 13px; font-weight: 700; color: var(--text-sub); }
.plan__price { display: flex; align-items: baseline; gap: 2px 6px; flex-wrap: wrap; min-height: 72px; align-content: flex-start; }
.plan__price strong { font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--primary); font-variant-numeric: tabular-nums; }
.plan__price strong span { font: inherit; color: inherit; letter-spacing: inherit; }
.plan__price > span { font-size: 13px; font-weight: 600; color: var(--text-sub); }
.plan__price > span:nth-child(3) { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--text-faint); }
.plan__desc { font-size: 13px; line-height: 1.65; color: var(--text-body); }

.plan .btn { margin-top: auto; }
.plan__quota { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.plan__quota li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.plan__quota span { color: var(--text-sub); white-space: nowrap; }
.plan__quota b { font-weight: 700; color: var(--text-high); text-align: right; }
.plan__quota small { display: block; font-size: 11px; font-weight: 500; color: var(--text-faint); }
.plan__quota-main { flex-wrap: wrap; row-gap: 2px; }
.plan__quota-main small { flex-basis: 100%; text-align: right; white-space: nowrap; letter-spacing: -0.01em; }
@media (min-width: 1024px) and (max-width: 1279px) { .plan__quota-main small { font-size: 10px; letter-spacing: -0.02em; } }
@media (min-width: 1280px) { .plan__quota-main small { font-size: 10.5px; letter-spacing: -0.02em; } }

/* ---------- 10 보안 · 가려진 회의록 + 약속 도장 순환 ---------- */
.security { background: #14264A; color: #F7F4EC; }
.security .eyebrow { color: #C4D0E2; }
.security .display--xl { color: #F7F4EC; }
.security .lead { color: #C4D0E2; }
.security .hl { background: rgba(196, 208, 226, 0.16); color: #fff; }
.eyebrow--both::after { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.security .eyebrow--line::before, .security .eyebrow--line::after { background: rgba(247, 244, 236, 0.3); }
.venn { --d: min(318px, calc(100vw - 40px)); display: flex; flex-direction: column; align-items: center; margin-top: 56px; }
.venn__item { position: relative; flex: none; width: var(--d); height: var(--d); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 34px; border: 1px solid rgba(247, 244, 236, 0.28); border-radius: 50%; background: rgba(255, 255, 255, 0.035); }
.venn__item + .venn__item { margin-top: calc(var(--d) * -0.14); }
.venn__item + .venn__item::before { content: ""; position: absolute; left: 50%; top: calc(var(--d) * 0.07); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #F3DFA0; box-shadow: 0 0 0 6px rgba(243, 223, 160, 0.12); }
.venn__icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #F3DFA0; border: 1px solid rgba(247, 244, 236, 0.22); border-radius: 50%; }
.venn__item h3 { margin: 16px 0 0; color: #fff; font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.035em; }
.venn__item p { max-width: 15.5em; margin: 8px 0 0; color: #C4D0E2; font-size: 13px; line-height: 1.62; }

/* ---------- 11 FAQ ---------- */
.faq .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.faq__copy { display: flex; flex-direction: column; gap: 10px; }
.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }
.acc__q { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; font-size: 15px; font-weight: 700; color: var(--primary); text-align: left; }
.acc__q svg { flex-shrink: 0; transition: transform 220ms ease; color: var(--border-strong); }
.acc__item.is-open .acc__q svg { transform: rotate(180deg); color: var(--primary); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms ease; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--text-body); }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }

/* ---------- 12 CTA · 13 푸터 ---------- */
.cta { text-align: center; }
.cta .container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta__btns { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.footer { background: #060B16; color: #9FB0C8; padding: 40px 0; }
.footer .container { display: flex; flex-direction: column; gap: 24px; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 13px; line-height: 2; }
.footer__cols b { color: #F2F6FC; font-weight: 700; display: block; }
.footer__cols a, .footer__cols span { display: block; color: #9FB0C8; }
.footer__cols a:hover { color: #F2F6FC; }
.footer__top { display: flex; flex-direction: column; gap: 28px; }
.footer__legal { font-size: 12px; font-weight: 500; line-height: 1.8; color: #8093AE; }
.footer__info { margin-bottom: 4px; }
.footer__info span { display: block; }
.footer__info a { color: inherit; }
.footer__info a:hover { color: #F2F6FC; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #24344F; border-radius: 999px; background: transparent; color: #F2F6FC; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.lang__btn:hover, .lang.is-open .lang__btn { border-color: #3A4E70; background: rgba(143, 174, 255, 0.06); }
.lang__btn:focus-visible { outline: 2px solid #4A7DFF; outline-offset: 2px; }
.lang__btn .lang__globe { color: #9FB0C8; }
.lang__btn .lang__chev { color: #9FB0C8; transition: transform 150ms ease; }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: #0F1A2E; border: 1px solid #24344F; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms; }
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: #C4D0E2; font-size: 13px; font-weight: 600; text-decoration: none; }
.lang__opt:hover, .lang__opt:focus-visible { background: rgba(143, 174, 255, 0.1); color: #F2F6FC; outline: none; }
.lang__opt[aria-current="true"] { color: #F2F6FC; }
.lang__opt[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FFC352; }
@media (prefers-reduced-motion: reduce) { .lang__menu, .lang__chev { transition: none; } }
/* 영문은 문장이 길어 768~1023px에서 480px 목록에 맞도록 탭 여백을 줄임 */
@media (min-width: 768px) and (max-width: 1023px) {
  html[lang="en"] .steps__btn { padding: 8px 16px; }
  html[lang="en"] .steps__copy { padding: 0 16px 28px 44px; }
  html[lang="en"] .steps__copy .lead { font-size: 13px; line-height: 1.5; }
}
/* 영문 페이지 히어로: Stellar Serif 서브셋은 한글 전용이라 같은 계열(굵은 콘덴스드 세리프)인 Noto Serif Display Condensed Bold 사용 */
html[lang="en"] .hero__title { font-family: 'Noto Serif Display', Georgia, serif; font-weight: 700; font-stretch: 62.5%; font-size: clamp(44px, 7.6vw, 100px); letter-spacing: -0.02em; line-height: 0.95; }

/* ---------- 토스트 · 리빌 ---------- */
[data-replay-play][aria-disabled="true"] { pointer-events: none; cursor: default; }
.totop { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: 44px; height: 44px; border-radius: 50%; background: #14264A; color: #F7F4EC; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(20, 20, 19, 0.22); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 200ms ease, transform 200ms ease, background 120ms ease; }
.totop.is-show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: #1D3560; }
@media (min-width: 768px) { .totop { right: 28px; bottom: 28px; width: 48px; height: 48px; } }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translateX(-50%) translateY(8px); background: #14264A; color: #F7F4EC; border-radius: var(--r-ctrl); padding: 10px 16px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(20, 20, 19, 0.18); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; max-width: calc(100% - 32px); }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 480ms ease, transform 480ms var(--ease-rise); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 반응형 ---------- */
@media (min-width: 768px) {
  .container { width: min(var(--container), 100% - 80px); }
  .section { padding-block: 96px; }
  .hero { min-height: min(800px, 100svh); padding: 120px 0 88px; justify-content: center; }
  .hero__overlay { background: linear-gradient(100deg, rgba(10, 17, 32, 0.58) 0%, rgba(10, 17, 32, 0.30) 48%, rgba(10, 17, 32, 0.08) 100%), linear-gradient(to top, rgba(10, 17, 32, 0.45) 0%, rgba(10, 17, 32, 0) 40%); }
  .hero__cta { flex-direction: row; }

  .strip .container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .strip__item { padding: 0 0 0 24px; background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; }
  .strip__item strong { font-size: 20px; }
  .cmp { aspect-ratio: 16 / 10; }
  .cmp__before::after { top: auto; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(6, 11, 22, 0.86), rgba(6, 11, 22, 0)); }
  .cmp__text { gap: 12px; }
  .cmp__text--before { top: auto; left: 24px; bottom: 24px; right: auto; max-width: min(46%, 440px); }
  .cmp__text--after { left: auto; right: 24px; bottom: 24px; max-width: min(46%, 440px); padding: 18px 20px; }
  .cmp__label { height: 32px; padding: 0 14px; font-size: 13px; }
  .cmp__lines { gap: 8px; }
  .cmp__lines li { font-size: 15px; line-height: 1.55; }
  .cmp__handle { width: 52px; height: 52px; margin: -26px 0 0 -26px; }

  .sec-head--row { flex-direction: row; justify-content: space-between; gap: 40px; margin-bottom: 40px; text-align: left; }
  .steps__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
  .steps__slot { display: none !important; }
  .steps__stage { display: block; position: relative; height: 480px; }
  /* 좌측 목록도 오른쪽 화면과 같은 480px — 펼친 항목이 남는 높이를 채움 */
  .steps__list { height: 480px; gap: 6px; }
  .steps__item { flex: none; }
  .steps__btn { padding: 12px 18px; gap: 12px; min-height: var(--btn-h, 44px); align-items: center; }
  .steps__num { padding-top: 0; }
  .steps__item:not(.is-active) .steps__sub { display: none; }
  .steps__copy { padding: 0 18px 32px 48px; gap: 8px; }
  .steps__copy .lead { font-size: 14px; line-height: 1.6; }
  .steps__copy .checks { gap: 6px; }
  .steps__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: none; transition: opacity 240ms ease, transform 240ms var(--ease-rise), visibility 0s linear 240ms; }
  .steps__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  /* 오른쪽 화면 5종을 스테이지 높이에 맞춰 동일하게 — 전환 시 크기 변화 없음 */
  .steps__stage > .steps__panel > * { height: 100%; min-height: 0; box-sizing: border-box; overflow: hidden; }
  /* 480px 기준(가장 짧은 화면)에 맞춘 압축 — 캘린더 칸·다시 듣기 행·요약 노트 간격 */
  .steps__stage .cal__day { aspect-ratio: auto; height: 40px; min-height: 0; }
  .steps__stage .file__drop { flex: 1; justify-content: center; }
  .steps__stage .replay__row { padding: 5px 10px; line-height: 1.45; }
  .steps__stage .replay__list { gap: 2px; }
  .steps__stage .fx .summary-workspace-body { padding: 10px; }
  .steps__stage .fx .minutes-workspace { gap: 10px; }
  .steps__stage .fx .minutes-summary, .steps__stage .fx .minutes-transcript { padding: 12px 14px; }
  .steps__stage .fx .minutes-summary > p { margin-top: 8px; line-height: 1.55; }
  .steps__stage .fx .summary-block { margin-top: 7px; padding-top: 6px; }
  .steps__stage .fx .summary-block span { margin-top: 3px; line-height: 1.6; }
  .steps__stage .fx .minutes-summary > .summary-foot { margin-top: 7px; }
  .steps__stage .fx .note-entry { padding: 7px 8px; }
  .steps__stage .fx .minutes-transcript { -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }

  .start { min-height: 720px; }
  .start__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .start__copy { gap: 20px; }
  .start__btns { flex-direction: row; }
  .start__cap { align-self: flex-end; flex: 0 0 360px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .plan { padding: 28px; gap: 16px; }
  .plan--rec { order: 0; }
  .plan__badge { left: 32px; }
  .plan__price strong { font-size: 34px; }
  .venn { --d: clamp(270px, 29vw, 340px); flex-direction: row; justify-content: center; margin-top: 72px; }
  .venn__item { padding: 44px; }
  .venn__item + .venn__item { margin-top: 0; margin-left: calc(var(--d) * -0.14); }
  .venn__item + .venn__item::before { left: calc(var(--d) * 0.07); top: 50%; }
  .faq .container { grid-template-columns: 1fr 2fr; gap: 48px; }
  .acc__q { font-size: 17px; }
  .cta__btns { flex-direction: row; width: auto; }
  .footer { padding: 56px 0; }
  .footer .container { gap: 32px; }
  .footer__top { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px; }
  .footer__cols { display: flex; gap: 64px; }
  .footer__info span { display: inline; }
  .footer__info span + span::before { content: "·"; margin: 0 10px; color: #4A5D7C; }
}
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .plan { padding: 26px 22px; }
  .plan__badge { left: 22px; }
  .plan__price strong { font-size: 30px; }
  .header { height: var(--header-h); }
  .pill { width: 600px; height: 60px; padding: 6px 8px 6px 6px; gap: 8px; }
  .pill__icon { width: 46px; height: 46px; }
  .pill__icon img { height: 18px; }
  .nav { flex: 1; justify-content: space-evenly; margin: 0 2px; gap: 0; }
  .nav a { font-size: 14px; padding: 0 18px; height: 44px; }
  .sheet { top: calc(var(--header-h) + 4px); }
  .nav { display: flex; }
  .menu-btn { display: none; }
  .pill__cta { height: 44px; padding: 0 18px; font-size: 14px; }
  .strip { padding: 28px 0; }
  .strip .container { grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)); align-items: stretch; }
  .strip__lead { display: block; font-size: 13px; line-height: 1.7; color: var(--text-body); }
  .strip__lead b { color: var(--primary); font-weight: 700; }
  .cmp { aspect-ratio: 2 / 1; }
  .cmp__text--before, .cmp__text--after { bottom: 32px; }
  .cmp__text--before { left: 32px; }
  .cmp__text--after { right: 32px; }
  .cmp__lines li { font-size: 16px; }
  .steps__grid { gap: 64px; }
  .steps__stage { height: 480px; }
  .steps__title { font-size: 17px; }

  .note { padding: 24px; min-height: 480px; }

}
@media (min-width: 1280px) {
  .plans { gap: 16px; }
  .plan { padding: 30px 26px; }
  .plan__badge { left: 26px; }
  .container { width: min(var(--container), 100% - 240px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal] { transform: none; transition: opacity 240ms ease; }

}

/* ---------- 09 PRICING · 베네핏 우선 3카드 + 약속 스트립 (v20260924b) ---------- */
.plan__desc b { font-weight: 700; color: var(--text-high); }
.plan__quota .badge { font-size: 10px; padding: 2px 6px; vertical-align: 1px; margin-right: 2px; }
/* 팀 도입 문의 카드: 가격 대신 '도입 문의', 배경을 살짝 구분 */
.plan--team { background: var(--bg-subtle); border-style: dashed; border-color: var(--border-strong); }
.plan--team .plan__price strong { font-size: 26px; }
.plan--team .plan__price > span { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--text-faint); }
@media (min-width: 1024px) {
  .faq .container { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px; } /* 답변이 한 줄에 들어가도록 답변 칸 확대 */
  .acc__a p { letter-spacing: -0.01em; }
  .plans--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plans--four .plan__desc { min-height: 88px; }
}