/* Copyright © 2026 Barrett Kim. All rights reserved. Unauthorized modification, reproduction, or redistribution is prohibited. */
/* Layout: 금속→유리 툴바 + LCD, 넓은 화면은 iTunes 소스 목록, 좁은 화면은 유리 로컬 내비. 섹션마다 메시지 하나, 흰 면과 회색 면을 번갈아.
   색·글꼴은 src/Asb.Host.Revit2025/ui/wim.css(Aqua)에서. 글자 단계·간격·이징은 Apple HIG 원칙을 따름(배치·상표는 따르지 않음). */
:root {
  --font-ui: "SF Pro Text", -apple-system, "Segoe UI Variable Text", "Segoe UI",
             "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  --font-display: "SF Pro Display", -apple-system, "Segoe UI Variable Display", "Segoe UI",
             "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --t-display: clamp(44px, 6.4vw, 80px);
  --t-headline: clamp(32px, 4.2vw, 48px);
  --t-title: clamp(20px, 2vw, 24px);
  --t-body: 17px;
  --t-caption: 12px;
  --pad-section: clamp(88px, 11vw, 160px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 72px;

  --bg: #ffffff;
  --section-alt: #f5f5f7;
  --surface-2: #f4f4f6;
  --surface-3: #eaeaee;
  --bg-sidebar: #f1f1f4;
  --line: rgba(0, 0, 0, .10);
  --line-strong: rgba(0, 0, 0, .17);
  --text: #1d1d1f;
  --text-2: #45454a;
  --muted: #6e6e73;
  --brand-ink: #1A5C7E;
  --blue: #0071e3;
  --link: #0066cc;
  --blue-ring: rgba(0, 113, 227, .28);
  --blue-tint: rgba(0, 113, 227, .10);
  --green: #1d7a33; --green-tint: rgba(52, 199, 89, .13); --green-line: rgba(52, 199, 89, .30);
  --amber: #9a5b00; --amber-tint: rgba(255, 149, 0, .15); --amber-line: rgba(255, 149, 0, .34);
  --red: #d70015; --red-tint: rgba(255, 59, 48, .11); --red-line: rgba(255, 59, 48, .28);
  --dev: #0062c4; --dev-tint: rgba(0, 113, 227, .10);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .045);
  --shadow-pop: 0 30px 70px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);

  --glass: rgba(250, 250, 252, .74);
  --metal-top: #eeeef0; --metal-bot: #c4c4c9; --metal-edge: rgba(0, 0, 0, .22); --metal-ink: #2b2b2e;
  --lcd-top: #f1f5f7; --lcd-bot: #d5dee5; --lcd-edge: #8f9ca6; --lcd-ink: #24313a; --lcd-sub: #55636d; --lcd-bar: #3b4a55;
  --source: #e3e8ef; --source-head: #6b7586; --source-ink: #1f2933;
  --sel-top: #6a9be2; --sel-bot: #2d63c3; --on-sel: #ffffff;
  --zebra: #f1f5fa;
  --gloss-top: #71b6ff; --gloss-bot: #0a6ee0; --gloss-edge: #0757b5; --on-gloss: #ffffff;
  --chip-bg: #ffffff;
  --seg-top: #fdfdfd; --seg-bot: #dadade; --seg-on-top: #a3a3a9; --seg-on-bot: #cbcbd0;
  --vp: #c4c6cb; --vp-line: rgba(0, 0, 0, .10);
  --sky-top: #cfe6ff; --sky-mid: #eaf4ff; --bubble: rgba(110, 185, 255, .30); --bubble-hi: rgba(255, 255, 255, .7);
  --node-top: #ffffff; --node-bot: #d8eafb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1e1e20; --section-alt: #161618; --surface-2: #2c2c30; --surface-3: #37373c; --bg-sidebar: #171719;
    --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .17);
    --text: #f5f5f7; --text-2: #d2d2d7; --muted: #a1a1a6; --brand-ink: #5BB0D4;
    --blue: #2b95ff; --link: #2997ff; --blue-ring: rgba(10, 132, 255, .40); --blue-tint: rgba(10, 132, 255, .18);
    --green: #4cd371; --green-tint: rgba(48, 209, 88, .16); --green-line: rgba(48, 209, 88, .30);
    --amber: #ffb340; --amber-tint: rgba(255, 159, 10, .18); --amber-line: rgba(255, 159, 10, .36);
    --red: #ff6961; --red-tint: rgba(255, 69, 58, .16); --red-line: rgba(255, 69, 58, .32);
    --dev: #6cb6ff; --dev-tint: rgba(10, 132, 255, .18);
    --shadow-card: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28);
    --shadow-pop: 0 30px 70px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
    --glass: rgba(30, 30, 32, .74);
    --metal-top: #4a4a50; --metal-bot: #2a2a2e; --metal-edge: rgba(0, 0, 0, .6); --metal-ink: #ececf0;
    --lcd-top: #1d2b32; --lcd-bot: #121b20; --lcd-edge: #05090b; --lcd-ink: #c4e6f4; --lcd-sub: #86a9b8; --lcd-bar: #8fd0ec;
    --source: #202226; --source-head: #8a93a3; --source-ink: #e4e7ec;
    --zebra: #25272c; --chip-bg: #2c2c30;
    --seg-top: #56565c; --seg-bot: #37373c; --seg-on-top: #18181b; --seg-on-bot: #29292d;
    --vp: #3a3c41; --vp-line: rgba(255, 255, 255, .08);
    --sky-top: #0c2236; --sky-mid: #131d28; --bubble: rgba(70, 150, 255, .16); --bubble-hi: rgba(255, 255, 255, .10);
    --node-top: #33353b; --node-bot: #1a2b3b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e1e20; --section-alt: #161618; --surface-2: #2c2c30; --surface-3: #37373c; --bg-sidebar: #171719;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .17);
  --text: #f5f5f7; --text-2: #d2d2d7; --muted: #a1a1a6; --brand-ink: #5BB0D4;
  --blue: #2b95ff; --link: #2997ff; --blue-ring: rgba(10, 132, 255, .40); --blue-tint: rgba(10, 132, 255, .18);
  --green: #4cd371; --green-tint: rgba(48, 209, 88, .16); --green-line: rgba(48, 209, 88, .30);
  --amber: #ffb340; --amber-tint: rgba(255, 159, 10, .18); --amber-line: rgba(255, 159, 10, .36);
  --red: #ff6961; --red-tint: rgba(255, 69, 58, .16); --red-line: rgba(255, 69, 58, .32);
  --dev: #6cb6ff; --dev-tint: rgba(10, 132, 255, .18);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28);
  --shadow-pop: 0 30px 70px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  --glass: rgba(30, 30, 32, .74);
  --metal-top: #4a4a50; --metal-bot: #2a2a2e; --metal-edge: rgba(0, 0, 0, .6); --metal-ink: #ececf0;
  --lcd-top: #1d2b32; --lcd-bot: #121b20; --lcd-edge: #05090b; --lcd-ink: #c4e6f4; --lcd-sub: #86a9b8; --lcd-bar: #8fd0ec;
  --source: #202226; --source-head: #8a93a3; --source-ink: #e4e7ec;
  --zebra: #25272c; --chip-bg: #2c2c30;
  --seg-top: #56565c; --seg-bot: #37373c; --seg-on-top: #18181b; --seg-on-bot: #29292d;
  --vp: #3a3c41; --vp-line: rgba(255, 255, 255, .08);
  --sky-top: #0c2236; --sky-mid: #131d28; --bubble: rgba(70, 150, 255, .16); --bubble-hi: rgba(255, 255, 255, .10);
  --node-top: #33353b; --node-bot: #1a2b3b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); }
/* 목차로 이동하면 섹션 위 여백을 건너뛰어 제목이 툴바 바로 아래(32px)에 오게 한다 */
main section { scroll-margin-top: calc(32px - var(--pad-section)); }
#top { scroll-margin-top: 0; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--t-body)/1.47 var(--font-ui); word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 툴바: 처음엔 금속, 스크롤하면 유리 (M1) ---------- */
.toolbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  height: var(--bar-h); padding: 0 clamp(16px, 3vw, 28px);
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--metal-edge); color: var(--metal-ink);
}
.toolbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--metal-top), var(--metal-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.brand { display: block; color: var(--brand-ink); line-height: 0; }
.brand svg { width: 34px; height: 34px; }
.tool-right { display: flex; align-items: center; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--metal-edge); border-radius: 7px; overflow: hidden; }
.seg button { all: unset; box-sizing: border-box; width: 34px; height: 26px; display: grid; place-items: center; cursor: pointer; background: linear-gradient(180deg, var(--seg-top), var(--seg-bot)); color: var(--metal-ink); }
.seg button + button { border-left: 1px solid var(--metal-edge); }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--seg-on-top), var(--seg-on-bot)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
.seg button:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: -3px; }
.seg svg { width: 15px; height: 15px; }
.lcd {
  justify-self: center; width: min(100%, 540px); min-width: 0; display: grid; gap: 2px; padding: 5px 18px 6px;
  border: 1px solid var(--lcd-edge); border-radius: 9px; background: linear-gradient(180deg, var(--lcd-top), var(--lcd-bot));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18); color: var(--lcd-ink); text-align: center; cursor: pointer; font: inherit;
}
.lcd-title { font-weight: 650; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.lcd-sub { font-size: 12px; line-height: 1.25; color: var(--lcd-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.lcd.fading .lcd-title, .lcd.fading .lcd-sub { opacity: 0; }
.lcd .marquee { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent); mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent); }
.lcd .marquee > span { display: inline-block; animation: marquee var(--mt) ease-in-out infinite alternate; }
@keyframes marquee { 0%, 20% { transform: none; } 80%, 100% { transform: translateX(var(--dx)); } }
.lcd-progress { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 11px; line-height: 1; color: var(--lcd-sub); }
.lcd-track { height: 6px; border: 1px solid var(--lcd-edge); border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.lcd-fill { height: 100%; background: var(--lcd-bar); transform: scaleX(.166); transform-origin: left; transition: transform .5s var(--ease-out); }
.aqua {
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--gloss-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0 48%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--gloss-top), var(--gloss-bot));
  color: var(--on-gloss); font: 600 13px/1 var(--font-ui); white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}
.aqua:hover { text-decoration: none; filter: brightness(1.06); }
@supports (animation-timeline: scroll()) {
  .toolbar::before { animation: fade-to-0 linear both; animation-timeline: scroll(root); animation-range: 0 200px; }
  .lcd { animation: lcd-tuck linear both; animation-timeline: scroll(root); animation-range: 0 200px; }
  .lcd-progress { animation: fade-to-0 linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
}
@keyframes fade-to-0 { to { opacity: 0; } }
@keyframes lcd-tuck { to { transform: scale(.9); } }

/* ---------- 목차: 넓은 화면은 소스 목록, 좁은 화면은 유리 로컬 내비 + 펼침 목록 ---------- */
.shell { display: grid; grid-template-columns: 188px minmax(0, 1fr); }
.source {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--bar-h)); align-self: start; height: calc(100vh - var(--bar-h)); overflow-y: auto;
  padding-block: 14px; background: var(--source); border-right: 1px solid var(--line-strong);
}
.source h2 { font: 700 11px/1 var(--font-ui); letter-spacing: .08em; color: var(--source-head); padding: 14px 16px 6px; }
.source a { display: flex; align-items: center; gap: 9px; padding: 6px 16px; color: var(--source-ink); font-size: 14px; }
.source a:hover { text-decoration: none; background: rgba(0, 0, 0, .05); }
.source a[aria-current="true"] { background: linear-gradient(180deg, var(--sel-top), var(--sel-bot)); color: var(--on-sel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.source svg { width: 16px; height: 16px; flex: none; }
.source svg.ic { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.source svg.cv { border-radius: 3px; }
.localnav { display: none; }
main { min-width: 0; }

/* ---------- 섹션 공통 ---------- */
section { padding: var(--pad-section) clamp(16px, 5vw, 64px); }
section.alt { background: var(--section-alt); }
.wrap { max-width: 1040px; margin-inline: auto; }
.center { text-align: center; }
.headline { font-size: var(--t-headline); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.sub { margin-top: 14px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.4; color: var(--muted); font-weight: 500; }
.center .sub { margin-inline: auto; }
.more { font-size: clamp(17px, 1.5vw, 19px); }
.more::after { content: " ›"; }
.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 32px; margin-top: 22px; }

/* ---------- 히어로: Aero 하늘 + 일어서는 창 (M2) ---------- */
#top { position: relative; overflow: hidden; padding-bottom: clamp(56px, 8vw, 96px);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 38%, var(--bg) 78%); }
#top::before, #top::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px);
  background: radial-gradient(circle at 35% 30%, var(--bubble-hi), var(--bubble) 45%, transparent 70%); }
#top::before { width: 340px; height: 340px; left: -90px; top: 40px; }
#top::after { width: 220px; height: 220px; right: -40px; top: 160px; }
#top .wrap { position: relative; z-index: 1; }
#top h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; }
#top .window { margin: clamp(48px, 6vw, 72px) 0 0; transform-origin: 50% 100%; }
@supports (animation-timeline: view()) {
  #top .window { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
}
@keyframes rise { from { transform: perspective(1800px) rotateX(16deg) scale(.9); } }

.window { border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-pop); position: relative; text-align: left; }
.window-bar { display: flex; align-items: center; justify-content: center; height: 30px; background: linear-gradient(180deg, var(--metal-top), var(--metal-bot)); border-bottom: 1px solid var(--metal-edge); color: var(--metal-ink); font-weight: 600; font-size: 12px; }
.shot { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: var(--surface-2); overflow: hidden; }
/* 절대 위치: Safari는 aspect-ratio 상자 안의 height:100%를 원본 높이로 풀어 확대·잘림 */
.shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ---------- 흐름 보기: 넓은 화면은 스티키 (M3) ---------- */
.demo-cap { min-height: 1.2em; font-size: var(--t-headline); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; text-align: center; }
.demo-sticky { display: grid; gap: 20px; margin-top: 0; }
.demo-sticky .window { width: 100%; margin: 0 auto; }

/* ---------- 큰 문장: 스크롤에 맞춰 밝아짐 (M4) ---------- */
.statement { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.16; font-weight: 700; letter-spacing: -.035em; }
.statement span { display: block; }
@supports (animation-timeline: view()) {
  .statement span { animation: lit linear both; animation-timeline: view(); animation-range: entry 40% cover 52%; }
}
@keyframes lit { from { opacity: .16; } }

/* ---------- 표지 넘기기: 드래그·스와이프 + 스크롤 위치로 회전 (M5) ---------- */
.coverflow {
  --cw: clamp(180px, 24vw, 250px);
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 48px calc(50% - var(--cw) / 2) 12px; margin-top: 24px; perspective: 1100px;
}
.coverflow::-webkit-scrollbar { display: none; }
.cover { all: unset; box-sizing: border-box; flex: none; width: var(--cw); scroll-snap-align: center; cursor: pointer; text-align: center; transform-style: preserve-3d; }
.cover svg { display: block; width: 100%; aspect-ratio: 1; border-radius: 4px; box-shadow: 0 18px 36px rgba(0, 0, 0, .28); -webkit-box-reflect: below 2px linear-gradient(transparent 64%, rgba(255, 255, 255, .2)); }
.cover-txt { display: block; margin-top: 56px; }
.cover-name { display: block; font-weight: 700; font-size: 19px; color: var(--text); }
.cover-desc { display: block; font-size: 15px; color: var(--muted); }
.cover:focus-visible svg { outline: 3px solid var(--blue-ring); outline-offset: 4px; }
@supports (animation-timeline: view()) {
  .cover { animation: turn linear both; animation-timeline: view(inline); }
  .cover-txt { animation: showtxt linear both; animation-timeline: view(inline); }
}
@keyframes turn { 0% { transform: translateX(22%) rotateY(-58deg) scale(.8); } 50% { transform: none; } 100% { transform: translateX(-22%) rotateY(58deg) scale(.8); } }
@keyframes showtxt { 0%, 36% { opacity: 0; } 50% { opacity: 1; } 64%, 100% { opacity: 0; } }
.flow-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }
.round { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--chip-bg); color: var(--text); font-size: 17px; cursor: pointer; }

/* ---------- 앨범 · 트랙 ---------- */
.album-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: end; }
.album-head svg { width: 100%; aspect-ratio: 1; border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .22); display: block; }
.album-meta { margin-top: 12px; font-size: 14px; color: var(--muted); }
.tracks-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); }
.tracks { width: 100%; border-collapse: collapse; font-size: 16px; }
.tracks th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 16px; border-bottom: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--bg), var(--surface-2)); }
.tracks td { padding: 11px 16px; vertical-align: middle; }
.tracks td.desc { display: none; }
.tracks tbody tr:nth-child(even) { background: var(--zebra); }
.tracks td:first-child { width: 48px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.tracks td:nth-child(2) { font-weight: 600; }
.tracks td:last-child { width: 1%; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; }
.pill.ok { background: var(--green-tint); color: var(--green); }
.pill.part { background: var(--amber-tint); color: var(--amber); }
.pill.dev { background: var(--dev-tint); color: var(--dev); }

/* 트랙 펼침 (M6): 높이 0fr→1fr로 열리고 표지 색 띠 안에 예시 화면 */
#asb   { --tint: #1b5677; --tint-2: #0d3550; --tint-ink: #ffffff; --tint-sub: rgba(255, 255, 255, .72); --tint-line: rgba(255, 255, 255, .24); }
#rhino { --tint: #34373e; --tint-2: #16181b; --tint-ink: #f2f6fa; --tint-sub: #9fd3ff; --tint-line: rgba(159, 211, 255, .28); }
#revit { --tint: #26384d; --tint-2: #111b27; --tint-ink: #f2f6fa; --tint-sub: #a9cdf5; --tint-line: rgba(169, 205, 245, .26); }
.js .tracks tbody tr:nth-child(even) { background: none; }
.js .tracks tbody tr.alt { background: var(--zebra); }
.tracks tr.track { cursor: pointer; }
/* 줄무늬(.alt)보다 우선: 짝수 행을 눌러도 파란 선택 막대 */
.js .tracks tbody tr.track.sel { background: linear-gradient(180deg, var(--sel-top), var(--sel-bot)); }
.tracks tr.track.sel td { color: var(--on-sel); }
.tracks tr.track.sel .pill { background: rgba(255, 255, 255, .22); color: var(--on-sel); }
.track-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.track-btn::after { content: "›"; font-size: 17px; line-height: 1; color: var(--muted); transition: transform .25s var(--ease-out); }
.tracks tr.track:hover .track-btn::after { color: var(--blue); }
.track-btn[aria-expanded="true"]::after { transform: rotate(90deg); color: inherit; }
.track-btn:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: 3px; border-radius: 4px; }
.tracks tr.detail > td { padding: 0; width: auto; text-align: left; white-space: normal; color: inherit; }
.detail-panel > * { animation: panel-in .3s var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } }
.detail-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: center;
  padding: clamp(18px, 3vw, 32px); background: linear-gradient(180deg, var(--tint), var(--tint-2)); color: var(--tint-ink);
  box-shadow: inset 0 8px 12px -8px rgba(0, 0, 0, .45), inset 0 -8px 12px -8px rgba(0, 0, 0, .3);
}
.detail-panel::before { content: ""; position: absolute; top: 0; left: 64px; border: 9px solid transparent; border-top-color: var(--sel-bot); }
.detail-panel .window { margin: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.detail-panel.noshot { grid-template-columns: minmax(0, 1fr); }
.detail-panel.noshot .detail-info { max-width: 640px; }
.detail-info { display: grid; gap: 10px; align-content: center; min-width: 0; }
.detail-n { font-size: 13px; font-weight: 600; color: var(--tint-sub); font-variant-numeric: tabular-nums; }
.detail-info h3 { font-size: var(--t-title); line-height: 1.2; }
.detail-info p { opacity: .9; font-size: 15px; }
.detail-nav { display: flex; gap: 8px; margin-top: 8px; }
.detail-nav button { all: unset; box-sizing: border-box; height: 32px; min-width: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; border: 1px solid var(--tint-line); color: var(--tint-ink); font-size: 13px; font-weight: 600; }
.detail-nav button:hover { background: var(--tint-line); }
.detail-nav button:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: 2px; }
.detail-nav .close { margin-left: auto; }

/* ---------- 연결 그림: Aero 유리 노드 ---------- */
.diagram { margin-top: 56px; overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 600px; height: auto; }
/* 폰은 세로판. display:none이면 그라데이션 정의(d-wide 안)가 안 그려지는 브라우저가 있어 크기 0으로 숨김 */
.diagram .d-tall { position: absolute; width: 0; height: 0; min-width: 0; overflow: hidden; visibility: hidden; }
.d-node { fill: url(#glass-node); stroke: var(--line-strong); }
.d-gloss { fill: url(#glass-gloss); pointer-events: none; }
.d-core { fill: url(#glass-core); stroke: var(--blue); stroke-width: 1.5; }
.d-text { fill: var(--text); font: 700 15px var(--font-ui); }
.d-sub { fill: var(--muted); font: 12px var(--font-ui); }
.d-edge { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.d-label { fill: var(--brand-ink); font: 600 12px var(--font-ui); }
.d-label-bg { fill: var(--bg); }

/* ---------- 원칙: 2×2 타일, 타일마다 실제 화면 조각 하나 ---------- */
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { background: var(--bg); border-radius: 24px; padding: clamp(24px, 3vw, 36px); display: grid; align-content: space-between; gap: 32px; min-height: 240px; }
.tile h3 { font-size: var(--t-title); letter-spacing: -.02em; }
.tile p { margin-top: 6px; color: var(--muted); }
.tile-ui { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 320px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--section-alt); }
.ui-tag { font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--text-2); }
.ui-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 8px; background: var(--blue); color: var(--on-sel); font-weight: 600; font-size: 14px; }
.ui-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--green-line); background: var(--green-tint); color: var(--green); font-weight: 600; font-size: 14px; }
.ui-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ui-old { color: var(--muted); text-decoration: line-through; }

/* ---------- 설치: 제품마다 한 장, 단계는 순서가 있어 번호 ---------- */
.install { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.inst { background: var(--bg); border-radius: 24px; padding: 28px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; }
.inst-cover { width: 64px; height: 64px; border-radius: 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); margin-bottom: 8px; }
.inst h3 { font-size: var(--t-title); letter-spacing: -.02em; }
.inst-req { color: var(--muted); font-size: 14px; }
.inst-steps { margin: 12px 0 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 15px; color: var(--text-2); }
.inst-steps code { font: 13px var(--font-mono); padding: 1px 6px; border-radius: 5px; background: var(--section-alt); }
.inst-get { margin-top: 16px; }
.link-flow { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 24px; overflow: hidden; background: var(--bg); }
.link-flow div { padding: 22px 26px; display: grid; gap: 4px; border-right: 1px solid var(--line); }
.link-flow div:last-child { border-right: 0; }
.link-flow span { color: var(--muted); font-size: 15px; }
.inst-note { margin-top: 24px; text-align: center; color: var(--muted); font-size: 15px; }

/* ---------- 로드맵 · 회사 · 바닥 ---------- */
.road { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.playlist { border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--bg); }
.playlist h3 { font-size: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--bg), var(--surface-2)); display: flex; justify-content: space-between; }
.playlist h3 span { color: var(--muted); font-weight: 500; }
.playlist ul { list-style: none; margin: 0; padding: 0; }
.playlist li { padding: 9px 14px; font-size: 15px; }
.playlist li:nth-child(even) { background: var(--zebra); }
.contact { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--muted); }
.contact b { color: var(--text); font-weight: 600; margin-left: 6px; }
.statusbar { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 16px; background: linear-gradient(180deg, var(--metal-top), var(--metal-bot)); border-top: 1px solid var(--metal-edge); color: var(--metal-ink); font-size: 12px; }
.statusbar b { font-size: 13px; }

/* ---------- 작동 시연: 실제 WIM 화면(wim.css 구조·문구)을 1120×700 무대에 축소 재현. 장면 막대 진행선이 끝나면 다음 장면 ---------- */

.demo .window { box-shadow: var(--shadow-pop); }
.flow { contain: layout paint; list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.flow li { position: relative; border-right: 1px solid var(--line); }
.flow li:last-child { border-right: 0; }
.flow li:nth-child(even) { background: var(--zebra); }
.chap { all: unset; box-sizing: border-box; width: 100%; height: 100%; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 14px 14px 16px; }
.chap:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: -3px; }
.flow .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.flow .step-name { font-weight: 700; }
.flow .app { font-size: 12px; color: var(--brand-ink); }
.flow li.on .step-name { color: var(--blue); }
.flow li.on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue); transform-origin: left; }
.js .flow li.on::after { animation: chap var(--dur, 6s) linear both; }
.paused .flow li.on::after { animation-play-state: paused; }
/* width를 움직이면 Safari가 매 프레임 레이아웃을 다시 계산해 시연 전체가 끊김 → transform */
@keyframes chap { from { transform: scaleX(0); } }

/* contain: 무대 안 변화가 페이지 레이아웃·스크롤 타임라인 재계산으로 번지지 않게 (Mac Safari 끊김) */
.stage-wrap { position: relative; aspect-ratio: 1120 / 700; max-width: 100%; overflow: hidden; background: var(--bg); contain: layout paint; }
.stage { position: absolute; left: 0; top: 0; width: 1120px; height: 700px; transform-origin: 0 0; transform: scale(var(--k, 1));
  font: 13px/1.45 var(--font-ui); color: var(--text); letter-spacing: -.005em; text-align: left; }
.stage * { box-sizing: border-box; }
.stage svg { display: block; }

/* 실제 화면 부품 (wim.css의 sidebar / nav-item / topbar / button / segmented / status-pill / panel 축소판) */
.u-frame { position: absolute; inset: 0; display: none; }
.u-frame.on { display: grid; }
.u-asb { grid-template-columns: 208px minmax(0, 1fr); }
.u-side { display: flex; flex-direction: column; gap: 1px; padding: 16px 10px 12px; background: var(--bg-sidebar); border-right: 1px solid var(--line); }
.u-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px 8px; }
.u-brand svg { width: 30px; height: 30px; color: var(--brand-ink); }
.u-brand strong, .u-brand small { display: block; }
.u-brand small { color: var(--muted); font-size: 11px; }
.u-sec { margin: 8px 10px 4px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.u-nav { display: flex; align-items: center; gap: 9px; min-height: 28px; padding: 5px 10px; border-radius: 6px; color: var(--text-2); }
.u-nav i { width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .55; }
.u-nav.active { background: var(--blue); color: var(--on-sel); font-weight: 500; }
.u-nav.active i { opacity: 1; }
.u-nav.off { opacity: .45; }
.u-proj { margin-top: auto; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); font-size: 12px; display: flex; justify-content: space-between; }
.u-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
.u-view { display: none; flex: 1; flex-direction: column; min-height: 0; }
.u-view.on { display: flex; }
.u-top { display: flex; align-items: center; gap: 12px; height: 56px; flex: none; padding: 0 24px; border-bottom: 1px solid var(--line); }
.u-top h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.u-top .grow { flex: 1; }
.u-body { position: relative; flex: 1; min-height: 0; padding: 16px 24px; }
.u-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-3); flex: none; }
.u-seg span { padding: 3px 10px; border-radius: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.u-seg .on { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.u-input { position: relative; display: flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); color: var(--muted); white-space: nowrap; overflow: hidden; }
.u-input b { position: absolute; left: 10px; color: var(--text); font-weight: 400; }
.u-select { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); white-space: nowrap; }
.u-select::after { content: "⌄"; color: var(--muted); font-size: 12px; line-height: 0; transform: translateY(-3px); }
.u-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 29px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 6px; background: linear-gradient(180deg, var(--bg), var(--surface-2)); font-weight: 500; white-space: nowrap; flex: none; }
.u-btn.primary { border-color: transparent; background: var(--blue); color: var(--on-sel); }
.u-btn.danger { border-color: var(--red-line); background: var(--red-tint); color: var(--red); }
.u-btn .swap { position: absolute; }
.u-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 14px; }
.u-eyebrow { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; margin-bottom: 3px; }
.u-h2 { font-size: 15px; font-weight: 600; letter-spacing: -.012em; margin: 0 0 4px; }
.u-mute { color: var(--muted); }
.u-small { font-size: 11px; }
.u-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.u-pill.ok { border-color: var(--green-line); background: var(--green-tint); color: var(--green); }
.u-pill.warn { border-color: var(--amber-line); background: var(--amber-tint); color: var(--amber); }
.u-pill.bad { border-color: var(--red-line); background: var(--red-tint); color: var(--red); }
.u-pill.blue { border-color: transparent; background: var(--blue-tint); color: var(--blue); }
.u-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 8px 0 0; font-size: 12px; }
.u-kv dt { color: var(--muted); }
.u-kv dd { margin: 0; text-align: right; font-weight: 600; }
.u-toast { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; padding: 8px 16px; border-radius: 9px; background: var(--text); color: var(--bg); font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-pop); }
.u-cursor { position: absolute; left: 0; top: 0; width: 18px; height: 26px; z-index: 9; pointer-events: none; }
.u-ripple { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--blue); border-radius: 50%; z-index: 8; opacity: 0; animation: ripple .6s var(--d) both ease-out; }
@keyframes ripple { from { opacity: .9; transform: scale(.2); } to { opacity: 0; transform: scale(1.6); } }

/* 장면 1·2 대지검토 */
.u-lookup { display: grid; gap: 8px; margin-top: 12px; }
.u-step { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); }
.u-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--green-tint); color: var(--green); }
.u-work { display: grid; grid-template-columns: 236px minmax(0, 1fr) 232px; gap: 14px; height: 100%; padding-bottom: 92px; }
.u-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.u-check { border: 1px solid var(--amber-line); border-radius: 10px; background: var(--bg); padding: 9px 11px; display: grid; gap: 3px; }
.u-check header { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; }
.u-check p { margin: 0; font-size: 11px; color: var(--text-2); }
.u-check footer { font-size: 10px; color: var(--muted); }
.u-num { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--amber-tint); color: var(--amber); font-size: 10px; font-weight: 700; margin-right: 6px; }
.u-map { position: relative; flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.u-map svg { width: 100%; height: 100%; }
.u-callout { position: absolute; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); box-shadow: var(--shadow-card); font-size: 10px; color: var(--muted); }
.u-callout b { display: block; font-size: 12px; color: var(--text); }
.u-kpis { position: absolute; left: 24px; right: 24px; bottom: 14px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.u-kpi { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 7px 10px; box-shadow: var(--shadow-card); min-width: 0; }
.u-kpi small { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; }
.u-kpi b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-kpi.warn { border-color: var(--amber-line); }
.u-bar { height: 4px; border-radius: 2px; background: var(--surface-3); margin-top: 4px; overflow: hidden; }
.u-bar i { display: block; height: 100%; width: 100%; background: var(--blue); }
.u-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* 장면 3 매스 대안 */
.u-mass { display: grid; grid-template-columns: 210px minmax(0, 1fr) 190px; gap: 16px; height: 100%; }
.u-alts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.u-alt { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-card); padding: 10px 12px; display: grid; gap: 4px; }
.u-alt .thumb { height: 92px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; }
.u-alt .thumb svg { height: 88px; width: auto; }
.u-alt header { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.u-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 11px; color: var(--muted); }
.u-metrics b { display: block; color: var(--text); font-size: 12px; }
.u-ring { position: absolute; inset: -2px; border: 2.5px solid var(--blue); border-radius: 13px; }
.u-detailbar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); box-shadow: var(--shadow-pop); z-index: 2; }
.u-list { display: grid; gap: 6px; }
.u-list div { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.u-list div.sel { background: var(--blue-tint); color: var(--blue); font-weight: 600; }

/* 장면 4·5 호스트 창 + 도킹 패널 */
.u-host { grid-template-columns: minmax(0, 1fr) 330px; }
.u-app { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line-strong); }
.u-ribbon { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; background: var(--surface-3); border-bottom: 1px solid var(--line-strong); flex: none; }
.u-ribbon i { width: 22px; height: 22px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); }
.u-ribbon span { margin-left: 8px; font-size: 12px; color: var(--muted); }
.u-cmd { height: 26px; padding: 0 12px; display: flex; align-items: center; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); font: 12px var(--font-mono, ui-monospace, Consolas, monospace); color: var(--text-2); flex: none; }
.u-vp { position: relative; flex: 1; min-height: 0; background: var(--vp); }
.u-vp svg { width: 100%; height: 100%; }
.u-vptag { position: absolute; left: 10px; top: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.u-plan { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.u-plan svg { width: 100%; height: 100%; }
.u-dock { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.u-dock .u-brand { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: var(--bg-sidebar); }
.u-dock .u-top { height: 48px; padding: 0 14px; }
.u-dock .u-top h1 { font-size: 17px; }
.u-dock .u-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.u-cond { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--surface-2); display: grid; gap: 4px; font-size: 12px; }
.u-cond strong { font-size: 12px; }
.u-cond div { display: flex; justify-content: space-between; gap: 8px; }
.u-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.u-tiles div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.u-tiles small { display: block; color: var(--muted); font-size: 10px; }
.u-tiles b { font-size: 16px; }
.u-btnrow { display: flex; gap: 8px; }
.u-btnrow .u-btn { flex: 1; }

/* 장면 6 패널 */
.u-panelhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.u-paneled { display: grid; grid-template-columns: 196px minmax(0, 1fr) 190px; gap: 16px; height: calc(100% - 78px); }
.u-swatch { display: flex; gap: 8px; margin: 6px 0 10px; }
.u-swatch i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-strong); }
.u-swatch i.on { box-shadow: 0 0 0 2px var(--blue); }
.u-canvaswrap { display: grid; place-items: center; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--line); }
.u-sheet { height: 470px; aspect-ratio: 1 / 2; background: #fbfaf7; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 4px; padding: 8px; color: #1d1d1f; }
.u-band { border-radius: 2px; background: #e9eef0; position: relative; flex: 1; font-size: 7px; font-weight: 700; letter-spacing: .06em; padding: 3px 5px; color: #1f5e5c; overflow: hidden; }
.u-band.hero { flex: none; height: 36%; background: linear-gradient(160deg, #2a7c78, #123f3e); color: #fff; font-size: 13px; letter-spacing: 0; padding: 8px; }
.u-band.hero small { display: block; font-size: 7px; font-weight: 600; letter-spacing: .08em; opacity: .8; }
.u-band svg { position: absolute; right: 6px; bottom: 4px; height: 70%; }
.a-hero { animation: a-hero .6s var(--d, 0s) both cubic-bezier(.2, .7, .2, 1); }
@keyframes a-hero { from { height: 26%; } }

/* 아이소 매스 면 색 */
.iso polygon { stroke: var(--text-2); stroke-width: .6; stroke-linejoin: round; }
.iso .t { fill: var(--bg); } .iso .r { fill: var(--surface-2); } .iso .l { fill: var(--surface-3); }
.iso.mass polygon { stroke: var(--blue); stroke-width: .8; } .iso.mass .r { fill: var(--blue-tint); } .iso.mass .l { fill: var(--blue-ring); }
.iso.sel polygon { stroke: #e2bd00; stroke-width: 1.6; }
.iso.paper polygon { stroke: rgba(255, 255, 255, .85); stroke-width: .6; fill: rgba(255, 255, 255, .16); } .iso.paper .t { fill: rgba(255, 255, 255, .5); }
.vp-grid { fill: none; stroke: var(--vp-line); stroke-width: .7; }
.vp-contour { fill: none; stroke: var(--text-2); stroke-opacity: .5; stroke-width: .9; }
.vp-road { fill: var(--bg); opacity: .4; }
.paused .stage *, .offstage .stage * { animation-play-state: paused !important; }

/* 애니메이션 도구: 기본 상태가 마지막 화면이라 움직임을 끄면 완성 화면만 보인다 */
.a-fade  { animation: a-fade .6s var(--d, 0s) both ease-out; }
.a-up    { animation: a-up .55s var(--d, 0s) both cubic-bezier(.2, .7, .2, 1); }
.a-pop   { animation: a-pop .45s var(--d, 0s) both cubic-bezier(.3, 1.5, .5, 1); transform-origin: center; transform-box: fill-box; }
.a-draw  { stroke-dasharray: 1; animation: a-draw .9s var(--d, 0s) both ease-in-out; }
.a-grow  { animation: a-grow .8s var(--d, 0s) both cubic-bezier(.2, .7, .2, 1); transform-origin: bottom; transform-box: fill-box; }
.a-growx { animation: a-growx .7s var(--d, 0s) both ease-out; transform-origin: left; transform-box: fill-box; }
.a-drop  { animation: a-drop .7s var(--d, 0s) both cubic-bezier(.3, 1.3, .5, 1); }
.a-slide { animation: a-slide .55s var(--d, 0s) both cubic-bezier(.2, .7, .2, 1); }
.a-down  { animation: a-down .45s var(--d, 0s) both cubic-bezier(.2, .7, .2, 1); }
.a-type  { animation: a-type var(--t, 1.4s) var(--d, 0s) both steps(var(--n, 16)); }
.a-gone  { opacity: 0; animation: a-gone .01s var(--d, 0s) both; }
.a-press { animation: a-press .35s var(--d, 0s) both; }
.a-solid { animation: a-solid .5s var(--d, 0s) both; }
@keyframes a-fade  { from { opacity: 0; } }
@keyframes a-up    { from { opacity: 0; transform: translateY(14px); } }
@keyframes a-pop   { from { opacity: 0; transform: scale(.3); } }
@keyframes a-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes a-grow  { from { transform: scaleY(0); } }
@keyframes a-growx { from { transform: scaleX(0); } }
@keyframes a-drop  { from { opacity: 0; transform: translateY(-46px); } 60% { opacity: 1; transform: translateY(5px); } }
@keyframes a-slide { from { opacity: 0; transform: translateX(60px); } }
@keyframes a-down  { from { opacity: 0; transform: translateY(-14px); } }
@keyframes a-type  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes a-gone  { from { opacity: 1; } to { opacity: 0; } }
@keyframes a-press { 50% { transform: scale(.93); filter: brightness(.85); } }
@keyframes a-solid { from { stroke-dasharray: 6 4; opacity: .55; } to { stroke-dasharray: none; opacity: 1; } }

/* 커서 경로 (무대 좌표 px). 장면마다 하나 */
.c1 { animation: c1 5s both ease-in-out; }
@keyframes c1 { 0% { transform: translate(760px, 430px); } 14%, 52% { transform: translate(560px, 28px); } 62%, 100% { transform: translate(1060px, 27px); } }
.c2 { animation: c2 7s both ease-in-out; }
@keyframes c2 { 0%, 25% { transform: translate(900px, 520px); } 42%, 55% { transform: translate(350px, 262px); } 74%, 100% { transform: translate(538px, 144px); } }
.c3 { animation: c3 7s both ease-in-out; }
@keyframes c3 { 0%, 20% { transform: translate(980px, 560px); } 36%, 52% { transform: translate(563px, 175px); } 68%, 100% { transform: translate(772px, 95px); } }
.c4 { animation: c4 6s both ease-in-out; }
@keyframes c4 { 0% { transform: translate(600px, 520px); } 18%, 100% { transform: translate(1020px, 283px); } }
.c5 { animation: c5 6s both ease-in-out; }
@keyframes c5 { 0%, 18% { transform: translate(560px, 560px); } 40%, 100% { transform: translate(877px, 673px); } }
.c6 { animation: c6 7s both ease-in-out; }
@keyframes c6 { 0%, 22% { transform: translate(760px, 600px); } 44%, 58% { transform: translate(270px, 264px); } 76%, 100% { transform: translate(948px, 92px); } }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1279px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .localnav {
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--bar-h)); z-index: 15;
    display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 clamp(16px, 3vw, 28px);
    background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .localnav strong { font-size: 17px; letter-spacing: -.01em; }
  .localnav span { color: var(--muted); font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .localnav button { all: unset; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text); }
  .localnav button svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
  .localnav button[aria-expanded="true"] svg { transform: rotate(180deg); }
  .localnav button:focus-visible { outline: 3px solid var(--blue-ring); }
  .source { display: none; }
  .source.open {
    display: block; position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 54px); right: clamp(16px, 3vw, 28px);
    width: min(300px, calc(100vw - 32px)); height: auto; max-height: 70vh; padding-block: 6px 10px; border: 1px solid var(--line-strong); border-radius: 16px;
    background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: var(--shadow-pop);
  }
  html { scroll-padding-top: calc(var(--bar-h) + 46px); }
}
@media (max-width: 999px) {
  .detail-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .toolbar { gap: 10px; }
  .toolbar .aqua { display: none; }
  .lcd { padding: 5px 10px 6px; }
  .lcd-progress { display: none; }
  .diagram .d-wide { position: absolute; width: 0; height: 0; min-width: 0; overflow: hidden; visibility: hidden; }
  .diagram .d-tall { position: static; width: 100%; max-width: 420px; height: auto; margin-inline: auto; overflow: visible; visibility: visible; }
  .album-head { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .bento, .road, .install, .link-flow { grid-template-columns: minmax(0, 1fr); }
  .link-flow div { border-right: 0; border-bottom: 1px solid var(--line); }
  .tile { min-height: 0; }
  #top::before { width: 200px; height: 200px; left: -110px; top: 30px; }
  #top::after { width: 140px; height: 140px; right: -70px; top: 300px; }
  .tracks thead { display: none; }
  .tracks td { padding: 11px 12px; }
  .tracks td:first-child { width: 34px; }
  .detail-panel::before { left: 14px; }
  .chap { padding: 10px 0 12px; justify-items: center; }
  .flow .step-name { display: none; }
  .flow .n { font-size: 14px; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}