/* ── 기본 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--label-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
kbd {
  font-family: var(--font-system); font-size: 12px; min-width: 22px; height: 22px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--hairline); background: var(--fill-4);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 틀: 머리줄 · 무대 · 아래 막대 ───────────────────── */
.app { height: 100dvh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--hpad) * 2); margin: 0 auto; padding: 0 var(--hpad); }

.top {
  position: relative; z-index: 30; flex: none; height: var(--top);
  background: var(--bg); border-bottom: 1px solid var(--hairline);
  transition: background-color var(--t-base) ease, border-color var(--t-base) ease, color var(--t-base) ease;
}
.top .wrap { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--label-1); color: var(--bg); }
.brand-mark svg { width: 16px; height: 16px; stroke-width: 2; }
.brand-sep { width: 1px; height: 16px; background: var(--fill-1); }
.brand-sub { font-weight: 500; color: var(--label-2); }
.top-spacer { flex: 1; }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); transition: transform 0.35s var(--ease-out); }

/* 캡슐 버튼(macOS 26 컨트롤: 캡슐, 기본=유리, 주요=채움) */
.btn {
  height: 40px; padding: 0 16px; border-radius: var(--r-capsule);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 550; white-space: nowrap; letter-spacing: -0.01em;
  background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease, opacity var(--t-fast) ease;
}
.btn:active { transform: scale(0.97); }
.btn.is-primary { background: var(--label-1); color: #fff; box-shadow: none; }
.btn.is-accent { background: var(--accent); color: #fff; box-shadow: none; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 14px; }
.btn[disabled] { opacity: 0.35; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fill-2); }
  .btn.is-primary:hover { background: #000; }
  .btn.is-accent:hover { background: var(--tint); }
}
.btn-menu .lbl-short { display: none; }
.btn-menu .chev { transition: transform var(--t-base) var(--ease-out); }
.btn-menu[aria-expanded="true"] .chev { transform: rotate(180deg); }

.bar {
  position: relative; z-index: 30; flex: none; height: var(--bar);
  background: var(--bg); border-top: 1px solid var(--hairline);
  transition: background-color var(--t-base) ease, border-color var(--t-base) ease, color var(--t-base) ease;
}
.bar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pos { display: flex; align-items: center; gap: 16px; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--label-2); }
.gauge { width: 174px; height: 4px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.gauge i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--label-1); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.35s var(--ease-out); }
.nav { display: flex; align-items: center; gap: 8px; }
.nav-hint { display: flex; align-items: center; gap: 6px; margin-right: 10px; font-size: 14px; color: var(--label-2); }
.nav .btn { height: 44px; padding: 0 18px; }

/* 어두운 장에서는 머리줄·아래 막대도 어둡게 */
body.is-dark .top, body.is-dark .bar { background: var(--bg-dark); border-color: var(--hairline-d); color: var(--label-1-d); }
body.is-dark .brand-mark { background: #fff; color: #000; }
body.is-dark .brand-sep { background: var(--fill-1-d); }
body.is-dark .brand-sub, body.is-dark .pos, body.is-dark .nav-hint { color: var(--label-2-d); }
body.is-dark .btn { background: var(--fill-2-d); box-shadow: inset 0 0 0 1px var(--hairline-d); }
body.is-dark .btn.is-primary { background: #fff; color: #0a0a0a; }
body.is-dark .gauge { background: var(--fill-1-d); }
body.is-dark .gauge i { background: #fff; }
body.is-dark kbd { border-color: var(--hairline-d); background: var(--fill-3-d); }
@media (hover: hover) and (pointer: fine) {
  body.is-dark .btn:hover { background: var(--fill-1-d); }
  body.is-dark .btn.is-primary:hover { background: #e8e8ea; }
}

/* ── 슬라이드 전체보기 메뉴(그랜터 실측: 흰 판 600폭 · 모서리 16 · 그림자 0 24 60) ── */
.menu {
  position: absolute; z-index: 40; top: calc(var(--top) + 6px); left: var(--menu-left, 20px);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - var(--top) - 24px); overflow: auto;
  padding: 10px; border-radius: 16px; background: #fff; color: var(--label-1); box-shadow: var(--shadow-pop);
  transform-origin: var(--menu-origin, 120px) top;
  opacity: 0; transform: scale(0.97) translateY(-4px); pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.menu-group + .menu-group { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 8px; }
.menu-label { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; color: var(--label-2); }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 10px;
  font-size: 15px; text-align: left; letter-spacing: -0.01em; color: var(--label-1);
}
.menu-item svg.i { color: var(--label-2); width: 17px; height: 17px; }
.menu-item .n { margin-left: auto; font-size: 12.5px; color: #8e8e93; font-variant-numeric: tabular-nums; }
.menu-item.is-current { background: rgba(0, 136, 255, 0.1); color: var(--tint); font-weight: 600; }
.menu-item.is-current svg.i { color: var(--tint); }
@media (hover: hover) and (pointer: fine) { .menu-item:hover { background: var(--fill-3); } .menu-item.is-current:hover { background: rgba(0, 136, 255, 0.14); } }
.scrim { position: fixed; inset: 0; z-index: 35; display: none; }
.scrim.is-on { display: block; }

/* ── 무대 · 슬라이드 ─────────────────────────────── */
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.slide {
  position: absolute; inset: 0; display: none; overflow: hidden;
  padding: var(--vpad) 0; background: var(--bg);
}
.slide.is-active, .slide.is-leaving { display: flex; }
.slide.is-leaving { pointer-events: none; z-index: 0; }
.slide.is-active { z-index: 1; }
.slide > .wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.slide.subtle { background: var(--bg-subtle); }
.slide.dark { background: var(--bg-dark); color: var(--label-1-d); }

/* 글자 단계(그랜터 실측: 표지 48/600 · 장 제목 36/600 · 기능 제목 28/600 · 부제 17/1.8 · 카드 제목 22/600) */
.t-hero { margin: 0; font-size: clamp(32px, 3.35vw, 48px); line-height: 1.18; font-weight: 650; letter-spacing: -0.032em; }
.t-title { margin: 0; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.3; font-weight: 650; letter-spacing: -0.03em; }
.t-title.sm { font-size: clamp(24px, 1.95vw, 28px); line-height: 1.32; }
.t-sub { margin: 0; font-size: clamp(15px, 1.18vw, 17px); line-height: 1.75; color: var(--label-2); letter-spacing: -0.005em; }
.t-card { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.42; font-weight: 620; letter-spacing: -0.022em; }
.t-body { margin: 0; font-size: 16px; line-height: 1.68; color: var(--label-2); }
.t-small { margin: 0; font-size: 14px; line-height: 1.6; color: var(--label-2); }
.dark .t-sub, .dark .t-body, .dark .t-small { color: var(--label-2-d); }
.center { text-align: center; }
.muted { color: var(--label-2); }
.dark .muted { color: var(--label-2-d); }

/* 장 머리: 위치 칩 + 제목 + 오른쪽 부제(그랜터 기능 장 구성)
 * 격자: 내용 폭을 16px 간격 12칸으로 나눈 것과 같은 선을 써요. 부제는 가운데 선(카드 2·4칸 경계)에서 시작.
 * 제목은 두 줄 자리를 잡아 두고, 제목 마지막 줄과 부제 마지막 줄의 글자 바닥선을 맞춰요.
 * 그래서 제목이 한 줄이든 두 줄이든 아래 내용이 시작하는 높이가 모든 장에서 같아요. */
.head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gut); align-items: last baseline; flex: none; }
.head:not(.demo-head):not(.centered) { grid-template-rows: auto minmax(calc(clamp(26px, 2.5vw, 36px) * 2.6), auto); }
.head.single { grid-template-columns: 1fr; }
.head.centered { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.head .chip { grid-column: 1 / -1; justify-self: start; }
.head.centered .chip { justify-self: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px;
  border-radius: var(--r-capsule); font-size: 14.5px; font-weight: 550; letter-spacing: -0.01em;
  background: var(--fill-4); box-shadow: inset 0 0 0 1px var(--hairline); color: #5a5a5f;
}
.chip b { color: var(--label-1); font-weight: 620; }
.chip svg.i { width: 15px; height: 15px; color: var(--accent); }
.chip .sep { width: 12px; height: 12px; color: var(--label-3); }
.dark .chip { background: var(--fill-3-d); box-shadow: inset 0 0 0 1px var(--hairline-d); color: var(--label-2-d); }
.dark .chip b { color: var(--label-1-d); }
.body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(24px, 4.6vh, 48px); }

/* 카드 */
.cards { display: grid; gap: 16px; }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 22px; border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--hairline);
}
.subtle .card { box-shadow: var(--shadow-card); }
.dark .card { background: var(--bg-dark-2); box-shadow: inset 0 0 0 1px var(--hairline-d); }
.card .ic {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px;
  background: rgba(0, 136, 255, 0.1); color: var(--accent);
}
.card .ic svg.i { width: 19px; height: 19px; }
.dark .card .ic { background: rgba(0, 145, 255, 0.16); color: #4db1ff; }
.card .more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 650; color: var(--accent-text); }
.dark .card .more { color: var(--accent-text-d); }
.card .more svg.i { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease-out); }
button.card { text-align: left; cursor: pointer; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease; }
button.card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  button.card:hover { box-shadow: inset 0 0 0 1px rgba(0, 136, 255, 0.4), var(--shadow-card); }
  button.card:hover .more svg.i { transform: translateX(2px); }
}
.dark button.card:hover { box-shadow: inset 0 0 0 1px rgba(77, 177, 255, 0.5); }

/* 큰 시연 판(목업을 담는 곳) */
.panel { position: relative; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden; background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--hairline); }
.dark .panel { background: #111113; box-shadow: inset 0 0 0 1px var(--hairline-d); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); flex: 1; min-height: 0; align-items: start; }
.split.third { grid-template-columns: calc((100% - 2 * var(--gut)) / 3) minmax(0, 1fr); }
.split > .col { display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; min-width: 0; }
.split > .panel { align-self: stretch; }

/* 단계 탭(그랜터 3장: 수집·정리·분석) */
.steps { display: flex; justify-content: center; gap: 20px; margin-top: 18px; flex: none; }
.step-tab { width: 180px; display: flex; flex-direction: column; gap: 10px; align-items: center; font-size: 13.5px; color: var(--label-2); }
.step-tab i { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.step-tab i b { display: block; height: 100%; width: 100%; background: var(--label-1); transform-origin: 0 50%; transform: scaleX(0); }
.step-tab.is-on { color: var(--label-1); font-weight: 600; }
.dark .step-tab { color: var(--label-2-d); }
.dark .step-tab.is-on { color: var(--label-1-d); }
.dark .step-tab i { background: var(--fill-1-d); }
.dark .step-tab i b { background: #fff; }

/* iOS 묶음 목록 */
.ios-list { margin: 0; padding: 0; list-style: none; border-radius: var(--r-list); background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hairline); }
.subtle .ios-list { box-shadow: var(--shadow-card); }
.ios-list > li { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 16px; }
.ios-list > li + li::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 0.5px; background: var(--sep-ios); }
.ios-list .ic { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; background: var(--accent); }
.ios-list .ic svg.i { width: 18px; height: 18px; stroke-width: 1.9; }
.ios-list .tx { flex: 1; min-width: 0; }
.ios-list .tx b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ios-list .tx span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--label-2); }
.ios-list .side { font-size: 14px; color: var(--label-2); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.ios-list .side svg.i { width: 14px; height: 14px; color: var(--label-3); }
.ios-list .tag { font-size: 13.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-capsule); background: var(--fill-3); color: var(--label-1); white-space: nowrap; }
.ios-list .tag.blue { background: rgba(0, 136, 255, 0.1); color: #0058c7; }
.ios-list .tag.green { background: rgba(52, 199, 89, 0.14); color: #1f8a3c; }
.ios-list .tag.indigo { background: rgba(97, 85, 245, 0.12); color: #4a3fe0; }
.ios-list .tag.gray { background: var(--fill-2); color: #55555a; }
.dark .ios-list { background: var(--bg-dark-2); box-shadow: inset 0 0 0 1px var(--hairline-d); }
.dark .ios-list > li + li::before { background: rgba(84, 84, 88, 0.6); }
.dark .ios-list .tx span, .dark .ios-list .side { color: var(--label-2-d); }

/* 세그먼트 컨트롤(맥 / 윈도우) */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-capsule); background: var(--fill-2); position: relative; }
.seg button { position: relative; z-index: 1; height: 34px; padding: 0 18px; border-radius: var(--r-capsule); font-size: 15px; font-weight: 600; color: #55555a; transition: color var(--t-base) ease; }
.seg button[aria-pressed="true"] { color: var(--label-1); }
.seg .thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; border-radius: var(--r-capsule); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); transition: transform 300ms var(--ease-out), width 300ms var(--ease-out); }
.dark .seg { background: var(--fill-1-d); }
.dark .seg button { color: var(--label-2-d); }
.dark .seg button[aria-pressed="true"] { color: #fff; }
.dark .seg .thumb { background: #636366; }

/* 명령 줄 + 복사 */
.cmd {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px;
  font-family: var(--font-mono); font-size: 14.5px; background: #1c1c1e; color: #f2f2f7;
}
.cmd code { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
.cmd code::-webkit-scrollbar { display: none; }
.cmd .btn { height: 34px; font-family: var(--font); font-size: 14.5px; background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .cmd .btn:hover { background: rgba(255, 255, 255, 0.2); } }
.cmd .btn.is-done { background: var(--green); }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(0, 136, 255, 0.07); font-size: 14.5px; line-height: 1.6; color: var(--label-1); }
.note svg.i { color: var(--accent); margin-top: 2px; }
.note.warn { background: rgba(255, 141, 40, 0.1); }
.note.warn svg.i { color: var(--orange); }
.dark .note { background: rgba(0, 145, 255, 0.12); color: var(--label-1-d); }
/* 고른 운영체제와 다른 쪽만 숨김(보이는 쪽은 원래 display 그대로) */
body[data-os-now="mac"] [data-os="win"], body[data-os-now="win"] [data-os="mac"] { display: none !important; }
/* 자동 판별(맥·윈도우 컴퓨터로 접속): 고르는 스위치를 감추고 내 컴퓨터 설명만 보여 줌.
   판별이 안 되는 기기(휴대폰 · 태블릿 등)에서만 스위치를 보여 줌 */
body[data-os-mode="auto"] .os-manual-only, body[data-os-mode="manual"] .os-auto-only { display: none !important; }
body[data-os-mode="auto"] .demo-bar .seg { display: none; }
.sheet-body > div[data-os]:not(.cmd) { display: flex; flex-direction: column; gap: 10px; }
.menu-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--label-2); }
.menu-foot b { color: var(--label-1); font-weight: 650; }
.menu .menu-foot .btn { margin-left: auto; background: var(--fill-3); color: var(--label-1); box-shadow: inset 0 0 0 1px var(--hairline); }
@media (hover: hover) and (pointer: fine) { .menu .menu-foot .btn:hover { background: var(--fill-2); } }

/* ── 상세 시트(macOS 시트 · 폰에서는 iOS 아래 시트) ── */
.sheet-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out); }
.sheet-scrim.is-on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 51; left: 50%; top: 50%; width: min(760px, calc(100vw - 48px)); max-height: min(720px, calc(100dvh - 64px));
  display: flex; flex-direction: column; border-radius: var(--r-window); background: #fff; color: var(--label-1);
  box-shadow: var(--shadow-window); overflow: hidden;
  opacity: 0; transform: translate(-50%, -48%) scale(0.97); pointer-events: none;
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out);
}
.sheet.is-on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.sheet-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--hairline); }
.sheet-head .chip { height: 28px; }
.sheet-head .btn { margin-left: auto; }
.sheet-body { overflow: auto; padding: 24px 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.sheet-body h3 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 650; letter-spacing: -0.03em; }
.sheet-body h4 { margin: 6px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.sheet-body p { margin: 0; font-size: 16.5px; line-height: 1.72; color: var(--label-2); }
.sheet-body .ios-list { box-shadow: inset 0 0 0 1px var(--hairline); }
.sheet .grabber { display: none; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.55; border-radius: var(--r-list); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hairline); }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 0.5px solid var(--sep-ios); }
.table tr:last-child td { border-bottom: 0; }
.table thead th { font-size: 13px; font-weight: 650; color: var(--label-2); background: var(--bg-subtle); }
.table tbody th { font-weight: 650; width: 120px; color: var(--label-1); }
.table td { color: var(--label-2); }
.sheet-nav { display: flex; gap: 8px; justify-content: space-between; padding-top: 6px; }

/* ── 장별 구성 ───────────────────────────────────── */
code { font-family: var(--font-mono); font-size: 0.92em; padding: 1px 6px; border-radius: 6px; background: var(--fill-3); }
.dark code { background: var(--fill-2-d); }
.cmd code { padding: 0; background: none; font-size: inherit; }
button.link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.os-card { display: flex; }
.col > .seg { align-self: flex-start; }

/* 목차(그랜터 ‘전체 기능’ 장: 분류 머리 + 버튼 칸) */
.toc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); width: 100%; align-items: start; }
.toc-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.toc-h { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px; font-size: 14px; font-weight: 600; color: var(--label-2-d); }
.toc-h svg.i { width: 16px; height: 16px; }
.toc-btn {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border-radius: 14px; text-align: left;
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--label-1-d);
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--hairline-d);
  transition: background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.toc-btn svg.i { color: #4db1ff; width: 17px; height: 17px; }
.toc-btn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { button.toc-btn:hover, a.toc-btn:hover { background: rgba(255, 255, 255, 0.09); } }
.toc-btn.is-soon { color: var(--label-2-d); cursor: default; }
.toc-btn.is-soon svg.i { color: var(--label-3-d); }
.toc-btn em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-capsule); background: var(--fill-2-d); color: var(--label-2-d); }

/* Claude를 쓰는 곳 */
.where-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.where-grid > .where-group:first-child { grid-column: span 2; }
.cards.terms { grid-auto-rows: 1fr; }
.where-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.where-group .cards { flex: 1; }
.where-label { display: flex; align-items: center; gap: 8px; padding-left: 4px; font-size: 14px; font-weight: 600; color: var(--label-2-d); }
.where-label svg.i { width: 16px; height: 16px; }
.where-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline-d); }
.where-foot .t-small { max-width: 720px; }

.when-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* 단계 목록(번호) */
.steps-list .num { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--label-1); color: #fff; font-variant-numeric: tabular-nums; }
.dark .steps-list .num { background: #fff; color: #0a0a0a; }
.steps-list > li + li::before { left: 58px; }
.steps-list kbd { font-size: 12.5px; vertical-align: 1px; }
.dark .steps-list kbd { border-color: var(--hairline-d); background: var(--fill-2-d); color: var(--label-1-d); }

/* 운영체제 고르기 */
.os-pick { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--r-card); background: var(--bg-subtle); }
.os-pick .seg { align-self: flex-start; margin-top: 4px; }
.os-visual { margin-top: 6px; }
.os-card { align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); }
.os-card > svg.i { width: 28px; height: 28px; color: var(--accent); }
.os-card b { display: block; font-size: 16px; letter-spacing: -0.02em; }
.os-card span { display: block; font-size: 14px; color: var(--label-2); margin-top: 2px; }

/* 움직임 판 */
.motion-panel, .dark .motion-panel { background: #000; }
.replay { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, 0.14) !important; color: #fff; box-shadow: none !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* 눌러서 여는 목록 줄 */
.rows-link > li { padding: 0; }
.rows-link > li > button { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; text-align: left; transition: background-color var(--t-fast) ease; }
.rows-link > li > button:active { background: var(--fill-3); }
@media (hover: hover) and (pointer: fine) { .rows-link > li > button:hover { background: var(--fill-4); } }

/* 마무리 로드맵 */
.road { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 12px; margin-top: 32px; }
.road div { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--hairline-d); text-align: left; }
.road b { font-size: 14px; color: #4db1ff; }
.road span { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.road em { font-style: normal; font-size: 14px; color: var(--label-2-d); }

/* 데스크톱 앱 예시 창 */
.app-mock { display: flex; font-family: var(--font); }
.app-mock aside { width: 200px; flex: none; padding: 10px; background: #f6f6f6; border-right: 0.5px solid rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.app-mock aside span { height: 34px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; }
.app-mock aside span.on { background: rgba(0, 0, 0, 0.08); font-weight: 600; }
.app-mock aside span.dim { color: #5a5a5f; font-size: 15px; }
.app-main { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; background: #faf9f5; }
.app-folder { align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-capsule); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); font-size: 16px; font-weight: 600; }
.app-folder svg.i { width: 15px; height: 15px; color: var(--accent); }
.app-folder em { font-style: normal; font-weight: 500; color: var(--label-2); margin-left: 6px; }
.app-msg { align-self: flex-end; max-width: 80%; padding: 10px 14px; border-radius: 16px; background: #f0eee6; font-size: 17px; }
.app-reply { max-width: 88%; font-size: 17px; line-height: 1.65; color: var(--label-1); }
.app-input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); font-size: 16px; color: #6e6e73; }
.app-input b { width: 32px; height: 32px; border-radius: 10px; background: #d97757; }
.mock-caption { position: absolute; left: 0; right: 0; bottom: 2px; margin: 0; text-align: center; font-size: 16px; color: var(--label-2-d); font-family: var(--font); }


/* ── 시연 장(그랜터처럼 화면을 크게): 제목줄 · 큰 화면 · 단계 탭 · 설명 자막 ── */
.demo-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(48px, auto) auto; grid-template-areas: "chip chip" "title bar" "sub sub"; align-items: center; gap: 12px 32px; }
.demo-head .chip { grid-area: chip; }
.demo-head .t-title { grid-area: title; font-size: clamp(24px, 2.25vw, 34px); }
.demo-head .demo-bar { grid-area: bar; justify-self: end; }
.demo-head .demo-sub { grid-area: sub; max-width: none; }
.demo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.demo-bar .cmd { padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
.demo-bar .cmd code { white-space: nowrap; }
.screen { position: relative; flex: 1; min-height: 0; margin-top: clamp(14px, 2.2vh, 24px); }
.screen > .fit { height: 100%; overflow: hidden; border-radius: var(--r-window); }
/* 단계 탭은 화면 폭을 같은 칸으로 나눠 화면 양 끝선에 맞춰요(2칸=반, 3칸=3분의 1, 4칸=카드 4칸과 같은 선) */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gut); margin-top: 16px; flex: none; }
.tab { min-width: 0; display: flex; flex-direction: column; gap: 9px; align-items: stretch; text-align: left; color: var(--label-2); font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
.tab i { display: block; height: 3px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.tab i b { display: block; height: 100%; width: 100%; background: var(--label-1); transform-origin: 0 50%; transform: scaleX(0); }
.tab span { display: flex; gap: 8px; align-items: baseline; }
.tab em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--label-3); font-weight: 650; }
.tab.is-on { color: var(--label-1); }
.tab.is-on em { color: var(--accent); }
.dark .tab { color: var(--label-2-d); }
.dark .tab.is-on { color: var(--label-1-d); }
.dark .tab em { color: var(--label-3-d); }
.dark .tab.is-on em { color: #4db1ff; }
.dark .tab i { background: var(--fill-1-d); }
.dark .tab i b { background: #fff; }
.caption { flex: none; margin: 12px 0 0; min-height: calc(1.6em * 1); text-align: left; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--label-1); font-weight: 500; }
.dark .caption { color: var(--label-1-d); }
.caption kbd { font-size: 0.85em; }
/* 높이가 낮은 화면(윈도우 150% 배율 1280×720 등): 부제를 숨기고 화면에 자리를 줌 */
@media (max-height: 820px) and (min-width: 768px) {
  .demo-head .demo-sub { display: none; }
  .demo-head { grid-template-areas: "chip chip" "title bar"; }
  .tabs { margin-top: 12px; }
  /* 위치 칩(설치 > ② 설치 명령)은 메뉴에도 있으니 낮은 화면에서는 숨기고 내용에 자리를 줌 */
  .head > .chip { display: none; }
  .demo-head { grid-template-areas: "title bar"; grid-template-rows: minmax(48px, auto); }
  .head:not(.demo-head):not(.centered) { grid-template-rows: auto; }
  .body { padding-top: 20px; }
  .toc-col { gap: 6px; }
  .toc-btn { min-height: 40px; }
}
@media (max-width: 1100px) {
  .demo-head { grid-template-columns: 1fr; grid-template-areas: "chip" "title" "bar" "sub"; }
  .demo-head .demo-bar { justify-self: start; justify-content: flex-start; }
}
@media (max-width: 767px) {
  .screen { flex: none; }
  .screen > .fit { height: auto; aspect-ratio: var(--ar, 2.68 / 1); border-radius: 14px; }
  .demo-bar .cmd code { white-space: pre-wrap; }
  .tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .tab { font-size: 14px; }
  .caption { text-align: left; font-size: 16px; }
}

/* ── 반응형 ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .cards.c4 { grid-template-columns: repeat(2, 1fr); }
  .nav-hint { display: none; }
}
@media (max-width: 1100px) {
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .where-grid, .when-cols { grid-template-columns: 1fr; }
  .where-grid > .where-group:first-child { grid-column: auto; }
  .split.third { grid-template-columns: 1fr; }
  .head:not(.demo-head):not(.centered) { grid-template-rows: none; }
  .where-foot { flex-direction: column; align-items: flex-start; }
  .road { grid-template-columns: 1fr; width: 100%; max-width: 360px; }
  .head { grid-template-columns: 1fr; }
  .cards.c3 { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 휴대폰: 장 안에서 위에서 아래로 쌓고, 필요하면 장 안에서 스크롤(그랜터와 같은 방식) */
@media (max-width: 767px), (max-height: 620px) {
  :root { --top: 56px; --bar: 60px; --vpad: 20px; }
  .slide { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .slide > .wrap { height: auto; min-height: 100%; }
  .slide > .wrap > *, .body > * { flex-shrink: 0; }
  .body { justify-content: flex-start; }
  .panel, .split { flex: none; }
  .screen { flex: none; }
  .screen > .fit { height: auto; aspect-ratio: var(--ar, 2.68 / 1); }
  .panel .fit { height: auto; aspect-ratio: var(--ar, 16 / 10); }
}
@media (max-width: 767px) {
  .brand-sub, .brand-sep, .btn-claude, .gauge { display: none; }
  .btn-menu .lbl-long { display: none; }
  .btn-menu .lbl-short { display: inline; }
  .panel { min-height: 0 !important; }
  .panel .fit { height: auto; aspect-ratio: var(--ar, 16 / 10); }
  .motion-panel .replay { right: 8px; top: 8px; bottom: auto; height: 28px; font-size: 12.5px; }
  .cards.c4.terms { grid-template-columns: 1fr 1fr; gap: 10px; }
  .terms .card { padding: 16px; }
  .terms .card .ic { width: 32px; height: 32px; }
  .nav .btn { height: 42px; padding: 0 14px; }
  .nav .lbl { display: none; }
  .nav .btn-next .lbl { display: inline; }
  .cards.c2, .cards.c4 { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .sheet {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 88dvh; transform: translateY(100%);
    border-radius: 28px 28px 0 0; transition: transform 420ms var(--ease-drawer), opacity 200ms ease;
  }
  .sheet.is-on { transform: translateY(0); }
  .sheet .grabber { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--fill-1); margin: 8px auto 0; flex: none; }
  .sheet-head { padding: 10px 16px 12px 20px; }
  .sheet-body { padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); }
  .sheet-body h3 { font-size: 22px; }
  .table tbody th { width: 86px; }
  .steps { gap: 10px; }
  .step-tab { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .mat { background: #f6f6f6 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ── 메일 자동화 페이지(mail.html) ─────────────────── */
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--gut); }
.col > .row-btns { margin-top: 2px; }
.acts .act { align-self: flex-start; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--accent-text); padding: 4px 10px; border-radius: var(--r-capsule); background: rgba(0, 136, 255, 0.08); margin-bottom: 4px; }
.card.stat .big { display: block; margin-bottom: 2px; font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: var(--label-1); }
.ios-list .tag.orange { background: rgba(255, 141, 40, 0.14); color: #b25000; }
/* 누가 하나요: Claude / 사람 */
.who { flex: none; align-self: flex-start; font-size: 14px; font-weight: 650; padding: 4px 10px; border-radius: var(--r-capsule); white-space: nowrap; }
.ios-list .who { align-self: center; }
.who.ai { background: rgba(0, 136, 255, 0.1); color: #0058c7; }
.who.me { background: rgba(255, 141, 40, 0.14); color: #b25000; }
.dark .who.ai { background: rgba(0, 145, 255, 0.18); color: #7cc4ff; }
.dark .who.me { background: rgba(255, 159, 10, 0.18); color: #ffc46b; }
.card .who { margin-bottom: 4px; }
.steps-list li.is-me { background: rgba(255, 141, 40, 0.06); }
/* 답장기준 미리보기(문서 한 장) */
.paper { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-card); }
.paper-h { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 14.5px; color: var(--label-2); }
.paper-h svg.i { width: 16px; height: 16px; color: var(--accent); }
.paper p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--label-1); }
.paper p b { display: inline-block; min-width: 76px; font-weight: 650; }
.paper .paper-rule { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 141, 40, 0.1); color: #8a4300; font-size: 15px; }
/* 세 질문 */
.qs .qn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; font-size: 18px; font-weight: 700; background: #fff; color: #0a0a0a; font-variant-numeric: tabular-nums; }
.teams .t-body b { display: inline-block; min-width: 52px; margin-right: 6px; font-size: 14px; font-weight: 650; color: var(--accent-text); }
.teams .card { gap: 6px; }
/* 연습 ↔ 실제 표 */
.table.map { background: #fff; }
.table.map td:first-child { color: var(--label-1); font-weight: 550; }
/* 부탁 뜯어보기 */
.cmd.ask { align-items: flex-start; }
.cmd.ask code { font-family: var(--font); font-size: 15.5px; line-height: 1.7; word-break: keep-all; white-space: pre-wrap; }
.ios-list.parts > li + li::before { left: 16px; }
.ios-list.parts .tx b { font-size: 16px; }

/* ── 시트 자동화 페이지(sheet.html) ─────────────────── */
.roles .card { border-top: 4px solid var(--rc, var(--accent)); }
.roles .rb { align-self: flex-start; font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-capsule); color: var(--rc-t, #0058c7); background: var(--rc-b, rgba(0, 136, 255, 0.1)); margin-bottom: 4px; }
.roles .r-set { --rc: #8e5cf6; --rc-t: #5b2fc9; --rc-b: rgba(142, 92, 246, 0.12); }
.roles .r-in { --rc: #0a84ff; --rc-t: #0058c7; --rc-b: rgba(10, 132, 255, 0.1); }
.roles .r-calc { --rc: #8e8e93; --rc-t: #48484a; --rc-b: rgba(142, 142, 147, 0.16); }
.roles .r-view { --rc: #34c759; --rc-t: #1f7a37; --rc-b: rgba(52, 199, 89, 0.14); }
.table.compare th[scope], .table.compare tbody th { width: 160px; }
.table.compare td:last-child { color: var(--label-1); font-weight: 550; }
.road.four { grid-template-columns: repeat(4, minmax(0, 200px)); }
@media (max-width: 900px) { .road.four { grid-template-columns: 1fr 1fr; max-width: 420px; } }