@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/* moBle Fundamental guide v6: editorial information structure (Sean approved 2026-10-15).
   Shared neutral planes, hairline section dividers, aligned label/content columns and inverse active navigation.
   Square large panels; Pie Menu display masks and buttons stay 3px. Source captures, hotspot coordinates,
   key/mouse glyphs, brand assets and product preferences are unchanged. Pretendard: CDN + local sources;
   Korean-only tracking -5%, body 14px, secondary 12px, title 24px; no bundled font files. */

:root {
  --topbar-h: 62px;
  --pie-corner-radius: 3px;
  --context-accent: #303030;
  --pie-canvas: #f1f1f1;
  --viewport-light: #eeeeee;
  --viewport-dark: #d9d9d9;
  --popup-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
  --focus-bg: #e4e4e4;
  --info-1: transparent;
  --info-2: transparent;
  --info-3: transparent;
  --info-4: transparent;
  --info-label: #656565;
  --pane-heading: transparent;
  --pane-heading-alt: transparent;
  --pane-footer: transparent;
  --pane-label: #656565;
  --pane-detail: transparent;
  --detail-muted: #656565;
  --detail-row: transparent;
  --list-row: transparent;
  --list-label: #656565;
  --tag-bg: #eeeeee;
  --context-bg: #e7e7e7;
  --ui: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --paper: #fcfcfc;
  --soft: #f4f4f4;
  --shade: #e9e9e9;
  --line: #d8d8d8;
  --ink: #1b1b1b;
  --sub: #656565;
  --mute: #737373;
  --black: #1b1b1b;
  --onblack: #fcfcfc;
  --onblacksub: #c4c4c4;
  --lime: #a7d12b;
  --accent: #1b743c;
  --on-accent: #ffffff;
  --key: #111111;
  --on-key: #ffffff;
  --warn: #9b3b2f;
  --tone1: #f1f1f1;
  --tone2: #e9e9e9;
  --tone3: #dedede;
  --pie-body: #212121;      /* captured dark pie retained; no theme-based colour inversion */
  --pie-body-a: 0.94;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --context-accent: #e8e8e8;
  --pie-canvas: #303030;
  --viewport-light: #414141;
  --viewport-dark: #2c2c2c;
  --popup-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  --focus-bg: #3b3b3b;
  --info-1: transparent;
  --info-2: transparent;
  --info-3: transparent;
  --info-4: transparent;
  --info-label: #b3b3b3;
  --pane-heading: transparent;
  --pane-heading-alt: transparent;
  --pane-footer: transparent;
  --pane-label: #b3b3b3;
  --pane-detail: transparent;
  --detail-muted: #b3b3b3;
  --detail-row: transparent;
  --list-row: transparent;
  --list-label: #b3b3b3;
  --tag-bg: #303030;
  --context-bg: #373737;
  --paper: #202020;
  --soft: #272727;
  --shade: #343434;
  --line: #424242;
  --ink: #f0f0f0;
  --sub: #b3b3b3;
  --mute: #999999;
  --black: #f3f3f3;
  --onblack: #141414;
  --onblacksub: #6b6b6b;
  --lime: #b7df3f;
  --accent: #46b36b;
  --on-accent: #0f1a12;
  --key: #f3f3f3;
  --on-key: #141414;
  --warn: #e39a8e;
  --tone1: #2b2b2b;
  --tone2: #333333;
  --tone3: #3e3e3e;
  --pie-body: #212121;      /* same captured dark pie in both themes */
  --pie-body-a: 0.94;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 12px; }
html, body { height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--ui); font-weight: 400; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
/* No font binaries in the bundle: pinned Pretendard CDN with local installed-font sources. Offline font availability is separate. */
.ko-track { letter-spacing: -0.05em; }
body.reader { overflow: hidden; }
button, select { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; border-radius: 3px; }
h1, h2, h3, b, strong, th, dt { font-weight: 400; }
ol, ul { list-style: none; }
svg { display: block; }
#root { height: 100%; }
.sq { display: inline-block; width: 7px; height: 7px; background: var(--ink); vertical-align: 0.05em; margin-right: 6px; }
.sq.lime { background: var(--lime); }
.sq.open { background: none; border: 1px solid var(--sub); }
.sq.warn { background: var(--warn); }

/* ---------- frame ---------- */
.app { height: 100%; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.side { background: var(--soft); display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 0 14px 16px; border: 0; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 4px; height: var(--topbar-h); flex: 0 0 var(--topbar-h); margin: 0 -14px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); }
/* 2026-10-16 web: the symbol + wordmark link back to moble.co.kr. The link is only as large as the logo, so its
   hit area never reaches the safe-area padding or a rounded screen corner; the bar keeps its former look. */
.brand-link { display: flex; align-items: center; gap: inherit; min-width: 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.brand-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .brand-link:hover { opacity: 0.72; } }
.badge { width: 26px; height: 26px; display: grid; place-items: center; flex: none; border-radius: 0; }
.badge .mark { width: 26px; height: 26px; color: var(--ink); }
.brand-t { display: flex; flex-direction: row; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; flex-wrap: nowrap; }
.brand-t .mark.moble { width: 54px; height: 12.28px; flex: none; }
.brand-t .brand-edition { color: var(--sub); font-size: 11.5px; letter-spacing: -0.01em; transform: translateY(1px); }
.side-lab { font-size: 10px; color: var(--sub); letter-spacing: 0.04em; padding: 0 6px; margin: 10px 0 4px; }
.side-it { display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 9px; width: 100%; height: 32px; padding: 0 8px 0 12px; color: var(--ink); border: 0; font-size: 12px; }
.side-it .g { width: 15px; height: 15px; color: var(--sub); }
.side-it .g svg { width: 100%; height: 100%; }
.side-it:hover { background: var(--shade); }
.side-it[aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 500; }
.side-it[aria-current="page"] .g { color: inherit; }
.side-it.child { padding-left: 28px; position: relative; }
.side-it.child::before { content: ""; position: absolute; left: 14px; top: -2px; height: 18px; width: 7px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.side-foot { margin-top: auto; padding-top: 14px; font-size: 11px; color: var(--sub); display: grid; gap: 8px; }
.side-foot .lab { font-size: 10px; letter-spacing: 0.04em; }
.sel { width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 3px; background: var(--tone2); color: var(--ink); font-size: 12px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%); background-position: calc(100% - 13px) 12px, calc(100% - 9px) 12px; background-size: 4px 4px; background-repeat: no-repeat; }
.side-foot .st { display: grid; gap: 3px; }

.main { display: grid; grid-template-rows: var(--topbar-h) minmax(0, 1fr); min-height: 0; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; border: 0; border-bottom: 1px solid var(--line); }
.top-t { font-size: 13px; color: var(--ink); }
.top-r { display: flex; align-items: center; gap: 8px; }
.seg { display: inline-flex; background: var(--tone1); border-radius: 3px; overflow: hidden; }
.seg button { width: 28px; height: 28px; padding: 0; color: var(--sub); display: grid; place-items: center; }
.seg button svg { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible, .ib:focus-visible, .btn:focus-visible, .side-it:focus-visible, .bm:focus-visible, .sel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn { height: 28px; padding: 0 12px; border: 0; border-radius: 3px; font-size: 11px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; background: var(--tone2); }
.btn:hover { background: var(--tone3); }
.btn.primary { background: var(--black); color: var(--onblack); border-color: var(--black); }
.ib { width: 28px; height: 28px; display: grid; place-items: center; color: var(--sub); border: 0; border-radius: 3px; background: var(--tone1); }
.ib:hover { color: var(--ink); background: var(--tone2); }
.ib svg { width: 15px; height: 15px; }

.content { min-height: 0; overflow: auto; padding: 22px 24px 16px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; row-gap: 0; }
.h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.h h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.h .sub { font-size: 12px; color: var(--sub); }
.h .right { margin-left: auto; font-size: 11px; color: var(--sub); display: flex; gap: 10px; align-items: center; }
.h .bm { width: 22px; height: 22px; display: grid; place-items: center; color: var(--mute); }
.h .bm[aria-pressed="true"] { color: var(--context-accent); }
.h .bm svg { width: 14px; height: 14px; }
.desc { font-size: 12px; color: var(--sub); max-width: 90ch; line-height: 1.65; margin: 0 0 20px; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip > div { padding: 14px 16px; min-width: 0; background: transparent; }
.strip > div + div { border-left: 1px solid var(--line); }
.strip > div:first-child { padding-left: 0; }
.strip > div:last-child { padding-right: 0; }
.strip dt { font-size: 10px; color: var(--sub); letter-spacing: 0.02em; }
.strip dd { margin-top: 7px; font-size: 13px; color: var(--ink); min-height: 1.9em; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; line-height: 1.45; }
.strip dd.chord-cell { font-size: 14px; }
.strip dd:has(> .sq) { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 8px; align-items: start; }
.strip dd > .sq { margin: 6px 0 0; }
.context-tag { display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 2px; background: var(--tag-bg); color: var(--context-accent); font-size: 11.5px; line-height: 1.35; white-space: nowrap; }

.row2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 28px; min-height: 0; border: 0; margin-top: 24px; }
.content > .pane { border: 0; margin-top: 24px; }
.pane { border: 0; border-radius: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: transparent; }
.pane.pane-item { background: transparent; border: 0; border-left: 1px solid var(--line); padding-left: 24px; }
.pane-screen .stage, .band .stage { background: var(--pie-canvas); }
.pane > header { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 14px; font-size: 12px; color: var(--ink); border: 0; }
.pane > header .r { font-size: 10.5px; color: var(--sub); display: flex; align-items: center; gap: 4px; }
.pane > footer { display: flex; justify-content: space-between; align-items: center; min-height: 30px; padding: 0 14px; font-size: 10.5px; color: var(--sub); border: 0; }
.pane > header, .pane > footer { background: transparent; }
.pane > header { border-bottom: 1px solid var(--line); }
.pane > header > span:first-child { font-weight: 600; }
.pane > footer:empty { display: none; }
.pane > footer.crumb { justify-content: flex-start; gap: 6px; }
.crumb { display: flex; align-items: center; gap: 6px; }
.crumb .cur { color: var(--ink); }
.crumb .x { margin-left: auto; height: 20px; padding: 0 8px; border: 0; border-radius: 3px; background: var(--tone3); font-size: 10px; color: var(--ink); }
.stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 12px; overflow: hidden; }
.shot { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1120 / 800; max-height: 100%; }
.shot img.base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 160ms; }
.shot img.for-dark { display: none; }
:root[data-theme="dark"] .shot img.for-light { display: block; }
:root[data-theme="dark"] .shot img.for-dark { display: none; }
.shot img[data-pie-corners] { mask-size: 100% 100%; mask-repeat: no-repeat; }
.shot.has-overlay img.base { opacity: 0.14; }
.shot.has-overlay .hs[data-hs^="p"] { display: none; }
/* Preview-only 3 CSS px corner masks preserve capture RGB; hover shapes use the same radius. */
.under { position: absolute; background: var(--pie-body); opacity: 0; border-radius: var(--pie-corner-radius); }
.under.on, .under.sel { opacity: var(--pie-body-a); }
.hs { position: absolute; cursor: pointer; background: #ffffff; opacity: 0; mix-blend-mode: screen; transition: opacity 100ms; border-radius: var(--pie-corner-radius); }
:root[data-theme="dark"] .hs { mix-blend-mode: screen; }
.hs:hover, .hs.on, .hs.sel, .hs:focus-visible { opacity: 0.16; outline: 0; }
.shot .unders { position: absolute; inset: 0; pointer-events: none; }
.shot .lit-marks { position: absolute; inset: 0; pointer-events: none; }
.shot.has-overlay .lit-marks { display: none; }
.shot .sub-mark { position: absolute; width: 6px; height: 6px; background: var(--lime); }
.ov { position: absolute; inset: 0; }
.ov img { position: absolute; width: 100%; height: 100%; display: block; }
.ov[hidden] { display: none; }
.pop { --black: #242424; --onblack: #eeeeee; --onblacksub: #b3b3b3; position: absolute; z-index: 3; min-width: 150px; max-width: 250px; padding: 8px 10px 9px; background: var(--black); color: var(--onblack); font-size: 11px; line-height: 1.45; pointer-events: none; }
.pop[hidden] { display: none; }
.pop .t { color: var(--onblack); font-size: 12px; display: flex; gap: 6px; align-items: baseline; }
.pop .t .d { color: var(--onblacksub, #c1c7cd); font-size: 10px; }
.pop .b { color: var(--onblacksub, #c1c7cd); margin-top: 3px; }
.pop .b2 { color: var(--onblack); margin-top: 4px; }
.pop .m { color: var(--onblacksub, #9aa0a6); margin-top: 4px; font-size: 10px; opacity: 0.8; }
.item-view { padding: 4px 0 14px; display: grid; gap: 14px; align-content: start; overflow: auto; }
.item-view .empty { font-size: 11.5px; color: var(--sub); line-height: 1.6; }
.item-view .name { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.item-view .name .d { font-size: 10.5px; color: var(--sub); }
.item-view .dsc { font-size: 12px; color: var(--sub); line-height: 1.6; }
.item-view .lab, .tsheet .lab { font-size: 10px; color: var(--sub); letter-spacing: 0.03em; margin-bottom: 3px; }
.item-view .detail, .tsheet .detail { font-size: 12px; color: var(--ink); line-height: 1.65; padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.item-view .runs, .tsheet .runs { padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 12px; }
.item-view .runs code, .tsheet .runs code { grid-column: 2; }
.item-view .detail .lab, .item-view .runs .lab, .tsheet .detail .lab, .tsheet .runs .lab { grid-column: 1; margin: 0; }
.item-view .runs code, .tsheet .runs code { font-family: var(--mono); font-size: 10.5px; color: var(--sub); background: var(--tone3); padding: 3px 6px; white-space: pre-wrap; word-break: break-all; }
.item-view .kv { border: 0; }
.item-view .kv div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 11.5px; background: transparent; }
.item-view .kv dt { color: var(--sub); }
.item-view .kv dd { color: var(--ink); }
.rows { border: 0; }
.rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink); cursor: pointer; }
.rows li { border-radius: 3px; }
.rows li:hover { background: var(--focus-bg); color: var(--ink); }
.rows li.on { background: var(--ink); color: var(--paper); }
.rows li.on .dir, .rows li.on .mx { color: inherit; }
.rows li .dir { width: 12px; height: 12px; color: var(--sub); }
.rows li .dir svg { width: 100%; height: 100%; }
.rows li .mx { font-size: 10px; color: var(--sub); }
.rows li .pdesc { display: none; }
.rows.list li { grid-template-columns: 1fr auto; }
.subitems { display: grid; gap: 0; border: 0; }
.subitems li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; display: grid; gap: 4px; }
.subitems li .n { color: var(--ink); }
.subitems li .d { color: var(--sub); font-size: 11px; }
.note { font-size: 11px; color: var(--sub); }

.foot { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--sub); padding-top: 14px; margin-top: 18px; border-top: 1px solid var(--line); white-space: nowrap; }
.foot .pn { display: flex; align-items: center; gap: 4px; }
.foot .pn button { width: 24px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 3px; background: var(--tone1); color: var(--sub); }
.foot .pn button:hover { color: var(--ink); background: var(--tone2); }
.foot .pn button[disabled] { opacity: 0.35; pointer-events: none; }
.foot .pn svg { width: 12px; height: 12px; }
.foot .pn span { padding: 0 8px; }

/* legend / about panes */
.legend { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 32px; }
.legend li { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.legend .ex { font-size: 14px; }
.legend .tx { color: var(--sub); }
.about { padding: 0; }
.about li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--sub); line-height: 1.65; }
.about li:last-child { border-bottom: 0; }
.about li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ink); margin-right: 9px; vertical-align: 0.1em; }

/* ---------- key caps, mouse, symbols (unchanged rules) ---------- */
.chord { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.36em; }
.chord .plus { color: var(--mute); font-size: 0.8em; margin: 0 0.05em; }
.k { display: inline-flex; align-items: center; justify-content: center; height: 1.8em; min-width: 1.8em; padding: 0 0.62em; border-radius: 1px; background: var(--key); color: var(--on-key); font-family: var(--ui); font-weight: 600; font-size: 0.8em; letter-spacing: 0.01em; line-height: 1; }
.k.one { width: 1.8em; padding: 0; }
.k.mod { background: var(--accent); color: var(--on-accent); }
.mouse { position: relative; display: inline-block; width: 1.8em; height: 1.8em; }
.mouse::before, .mouse::after { content: ""; position: absolute; inset: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background: var(--ink); }
.mouse::before { -webkit-mask-image: var(--mouse-base); mask-image: var(--mouse-base); }
.mouse.lmb::after { -webkit-mask-image: var(--mouse-lmb); mask-image: var(--mouse-lmb); }
.mouse.rmb::after { -webkit-mask-image: var(--mouse-rmb); mask-image: var(--mouse-rmb); }
.mouse.mmb::after { -webkit-mask-image: var(--mouse-mmd); mask-image: var(--mouse-mmd); }
.sym { display: inline-block; width: 1.45em; height: 1.45em; color: var(--ink); }
.sym svg, .dir svg { width: 100%; height: 100%; display: block; }
.mark { display: inline-block; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.mark.logo { -webkit-mask-image: var(--brand-logo); mask-image: var(--brand-logo); }
.mark.moble { -webkit-mask-image: var(--brand-moble); mask-image: var(--brand-moble); }
.ptop .series .mark.moble { width: 56px; height: 12.74px; vertical-align: middle; margin-right: 4px; color: var(--ink); }
.mark.lab96 { -webkit-mask-image: var(--brand-lab96); mask-image: var(--brand-lab96); }
.unverified { font-size: 0.62em; color: var(--mute); margin-left: 0.4em; }
.credit { display: inline-flex; align-items: center; gap: 0.45em; color: var(--sub); }
.credit .lab96 { width: 3.2em; height: 1em; color: var(--ink); }
.credit .trinov { color: var(--ink); letter-spacing: 0.02em; }

/* ---------- overlays (square) ---------- */
.more { position: fixed; top: calc(var(--topbar-h) + 6px); right: 24px; z-index: 8; background: var(--paper); border: 1px solid var(--line); min-width: 170px; }
.pop, .more, .panel, .tsheet { border-radius: 3px; }
.more { padding: 4px; }
.pop, .more { box-shadow: var(--popup-shadow); }
.more[hidden] { display: none; }
.more button { display: block; width: 100%; padding: 9px 14px; font-size: 12px; color: var(--ink); }
.more button:hover { background: var(--tone3); }
.sheet { position: fixed; inset: 0; background: var(--paper); z-index: 6; overflow: auto; }
.sheet[hidden], .panel[hidden], .toast[hidden], .tsheet[hidden] { display: none; }
.sheet-inner { position: relative; max-width: 640px; margin: 0 auto; padding: 28px 24px 70px; }
.sheet-close { position: absolute; top: 28px; right: 24px; height: 26px; padding: 0 10px; border-radius: 3px; background: var(--tone2); font-size: 11px; color: var(--ink); }
.sheet h2 { font-size: 18px; }
.sheet .muted { color: var(--sub); font-size: 11.5px; margin-top: 6px; }
.toc { margin-top: 20px; border-top: 1px solid var(--line); }
.toc li { border-bottom: 1px solid var(--line); }
.toc button:hover, .toc button:focus-visible { background: var(--soft); outline: 2px solid var(--line); outline-offset: -2px; }
.toc button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 2px; }
.toc .n { color: var(--sub); font-size: 11px; }
.toc .t { font-size: 13px; }
.toc .t small { display: block; font-size: 11px; color: var(--sub); margin-top: 2px; }
.toc .c { font-size: 12px; }
.search-input { width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 1px; outline: none; }
.search-input:focus-visible { border-color: var(--ink); outline: 1px solid var(--ink); }
.search-input::placeholder { color: var(--mute); }
textarea.evidence { width: 100%; height: 50vh; margin-top: 14px; padding: 10px; font-family: var(--mono); font-size: 11px; color: var(--sub); background: var(--tone1); border: 0; resize: none; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%); background: var(--tone1); z-index: 7; padding: 22px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; }
.panel h3 { font-size: 16px; }
.panel textarea { width: 100%; height: 100%; padding: 10px; font: inherit; font-size: 13px; line-height: 1.6; color: var(--ink); background: var(--paper); border: 0; resize: none; outline: none; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--black); color: var(--onblack); padding: 8px 12px; font-size: 11.5px; z-index: 9; }
.tsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; background: var(--paper); border-top: 1px solid var(--line); padding: 18px 16px; display: grid; gap: 12px; }
.tsheet .name { font-size: 16px; display: flex; gap: 8px; align-items: baseline; }
.tsheet .name .d { font-size: 11px; color: var(--sub); }
.tsheet .dsc { font-size: 13px; color: var(--sub); line-height: 1.6; }
.tsheet { max-height: 70vh; overflow: auto; }
.tsheet .detail { font-size: 13.5px; }
.tsheet .acts { display: flex; gap: 8px; margin-top: 4px; }
.tsheet .btn { height: 34px; font-size: 13px; }

/* ---------- touch / small (iPhone Duo, Galaxy Fold inner and closed screens) ---------- */
.menu-btn { display: none; }
.rows.touch-only { display: none; }
@media screen and (max-width: 820px), screen and (hover: none) and (max-width: 1100px) {
  html { font-size: 14px; }
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .menu-btn { display: grid; }
  .main { grid-template-rows: 48px minmax(0, 1fr); }
  .content { padding: 14px 14px 12px; row-gap: 0; display: block; }
  .h h1 { font-size: 22px; }
  .h .sub { font-size: 13px; }
  .desc { font-size: 13.5px; margin: 8px 0 12px; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .strip > div:nth-child(even) { padding-right: 0; }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .context-tag { font-size: 12.5px; }
  .strip dt { font-size: 11px; }
  .strip dd { font-size: 14px; }
  .row2 { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 20px; }
  .pane.pane-item { border: 0; padding-left: 0; }
  .pane { grid-template-rows: auto auto auto; }
  .pane > header { height: 40px; font-size: 13px; }
  .stage { padding: 8px; }
  .shot { max-height: none; }
  .hs::before { content: ""; position: absolute; inset: -8px 0; }
  .pop { display: none !important; }
  .item-view { display: none; }
  .rows.touch-only { display: block; }
  .rows li { height: 42px; font-size: 14px; }
  .rows li .mx { font-size: 11px; }
  .foot { margin-top: 12px; font-size: 11.5px; flex-wrap: wrap; gap: 8px; white-space: normal; }
  .foot .pn { margin-left: auto; flex: none; }
  .foot .pn button { width: 32px; height: 30px; }
  .legend { grid-template-columns: 1fr; }
  .legend li { background: transparent; }
  .legend li { grid-template-columns: 140px 1fr; font-size: 13px; }
  .about li { font-size: 13px; }
}
@media screen and (max-width: 520px) {
  html { font-size: 15px; }
  .legend li { grid-template-columns: 120px 1fr; }
}

/* ---------- print ---------- */
body.print { overflow: visible; }
body.print .ib, body.print .seg, body.print .menu-btn, body.print .foot .pn button, body.print .bm, body.print .hs, body.print .pop, body.print .tsheet { display: none !important; }
body.print .item-view { display: none; }
body.print .rows.touch-only { display: block; }
body.print.landscape .row2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
body.print.landscape .pane { overflow: hidden; }
body.print.landscape .rows li { height: auto; min-height: 28px; padding: 4px 12px; align-items: start; font-size: 11px; }
body.print.landscape .rows li .pdesc { display: block; font-size: 9px; color: var(--sub); line-height: 1.35; margin-top: 1px; }
body.print.landscape .page { width: 1122px; height: 793px; overflow: hidden; page-break-after: always; break-after: page; background: var(--paper); }
body.print.landscape .page:last-child { page-break-after: auto; break-after: auto; }
body.print.portrait .page { width: 793px; height: 1122px; overflow: hidden; page-break-after: always; break-after: page; background: var(--paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 36px; }
body.print.portrait .page:last-child { page-break-after: auto; break-after: auto; }
.ptop { display: flex; justify-content: space-between; align-items: center; height: 56px; border-bottom: 1px solid var(--ink); }
.ptop .series { font-size: 11px; color: var(--sub); }
.ptop .series b { color: var(--ink); }
.ptop .badge { width: 28px; height: 28px; }
.ptop .badge .mark { width: 28px; height: 28px; }
.pfoot { display: flex; justify-content: center; align-items: center; height: 40px; border-top: 1px solid var(--ink); font-size: 11px; color: var(--sub); }
.bands { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; overflow: hidden; }
.band { display: grid; grid-template-columns: minmax(0, 1.5fr) 250px; column-gap: 20px; min-height: 0; overflow: hidden; padding: 20px 0; }
.band + .band { border-top: 1px dotted var(--sub); }
.band .stage { padding: 0; }
.band .bcol { display: grid; align-content: start; gap: 8px; font-size: 11px; }
.band .bcol h2 { font-size: 16px; }
.band .bcol .sub { color: var(--sub); }
.band .bcol .rows li { height: 24px; font-size: 11px; padding: 0 4px; }
.band .bcol .rows li .mx { display: none; }
.cover { display: grid; grid-template-rows: 1fr auto; padding: 60px 48px 0; height: 100%; }
.cover-body { align-self: center; }
.cover .badge { width: 72px; height: 72px; }
.cover .badge .mark { width: 72px; height: 72px; }
.cover-brand-line { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: nowrap; white-space: nowrap; }
.cover-brand-line .mark.moble { width: 140.7px; height: 32px; flex: none; }
.cover-title { font-size: 40px; letter-spacing: -0.02em; line-height: 1.1; }
.brand-inline { display: inline-flex; align-items: center; white-space: nowrap; }
.cover-sub { margin-top: 8px; font-size: 16px; color: var(--sub); }
.cover-meta { margin-top: 36px; font-size: 11px; color: var(--sub); line-height: 1.8; }
.cover-foot { display: flex; justify-content: space-between; align-items: center; height: 40px; font-size: 10.5px; color: var(--sub); }
@page { margin: 0; }

/* Reader layout r3: one app bar, title then viewer and vertical information.
   Fixed productive type roles: title 28/35/600, item 20/28/600, prose 16/26/400,
   values 15/24/500, navigation 14/20/500, labels 13/20/500, evidence 12/18/400.
   4px spacing scale; primary content inset 24px, section gap 24px, label/value gap 12px. */
.top-main { display: contents; }
@media screen {
  body.reader { font-size: 16px; line-height: 1.625; }
  .reader .app { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr); }
  .reader .top { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr); height: var(--topbar-h); padding: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
  .reader .top-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-h); min-width: 0; padding: 0 24px; }
  .reader .top-t { font-size: 14px; line-height: 20px; font-weight: 600; }
  .reader .brand { margin: 0; padding: 0 16px; height: var(--topbar-h); border: 0; min-width: 0; }
  .reader .brand .badge, .reader .brand .badge .mark { width: 34px; height: 34px; }
  .reader .brand-t .mark.moble { width: 70px; height: 15.92px; }
  .reader .brand-t .brand-edition { font-size: 15px; }
  .reader .side { grid-column: 1; grid-row: 2; padding: 0 16px 16px; }
  .reader .side-lab { margin: 24px 0 8px; padding: 0 12px; font-size: 12px; line-height: 16px; font-weight: 600; }
  .reader .side-it { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; column-gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
  .reader .side-it[aria-current="page"] { font-weight: 600; }
  .reader .side-foot, .reader .side-foot .lab { font-size: 12px; line-height: 18px; }
  .reader .sel { font-size: 14px; min-height: 32px; }
  .reader .main { grid-column: 2; grid-row: 2; display: block; min-width: 0; min-height: 0; overflow: hidden; }
  .reader .content { height: 100%; padding: 24px; }
  .reader .content.menu-page { grid-template-rows: auto minmax(400px, 1fr) auto; gap: 20px; }
  .reader .h { align-items: baseline; gap: 8px 12px; margin-bottom: 12px; }
  .reader .menu-page .h { margin: 0; }
  .reader .h h1 { font-size: 28px; line-height: 35px; font-weight: 600; }
  .reader .h .sub { font-size: 14px; line-height: 20px; }
  .reader .h .right { font-size: 12px; line-height: 18px; }
  .reader .desc, .reader .menu-summary, .reader .item-view .empty, .reader .item-view .dsc, .reader .item-view .detail, .reader .tsheet .dsc, .reader .tsheet .detail, .reader .about li { font-size: 16px; line-height: 26px; font-weight: 400; }
  .reader .row2.workbench { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 24px; margin: 0; min-height: 0; }
  .reader .workbench .pane-screen { grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
  .reader .workbench .pane-screen > header { display: none; }
  .reader .pane-screen .stage { position: relative; container-type: size; padding: 16px; background: linear-gradient(160deg, var(--viewport-light), var(--viewport-dark)); }
  .reader .pane-screen .shot { width: min(100%, 140cqh); max-height: none; transform: translate(var(--shot-shift-x, 0%), var(--shot-shift-y, 0%)); }
  .reader .pane-screen .stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--ink); opacity: .76;
    background: linear-gradient(currentColor,currentColor) left top / 18px 2px no-repeat, linear-gradient(currentColor,currentColor) left top / 2px 18px no-repeat,
      linear-gradient(currentColor,currentColor) right top / 18px 2px no-repeat, linear-gradient(currentColor,currentColor) right top / 2px 18px no-repeat,
      linear-gradient(currentColor,currentColor) left bottom / 18px 2px no-repeat, linear-gradient(currentColor,currentColor) left bottom / 2px 18px no-repeat,
      linear-gradient(currentColor,currentColor) right bottom / 18px 2px no-repeat, linear-gradient(currentColor,currentColor) right bottom / 2px 18px no-repeat; }
  .reader .pane > footer { min-height: 34px; padding: 12px 0 0; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; line-height: 18px; }
  .reader .menu-details { --label-width: 76px; min-height: 0; min-width: 0; overflow: auto; border-left: 1px solid var(--line); padding-left: 24px; }
  .reader .menu-meta > div { display: grid; grid-template-columns: var(--label-width) minmax(0, 1fr); gap: 12px; align-items: first baseline; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .reader .menu-meta > div:first-child { padding-top: 0; }
  .reader .menu-meta dt { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--sub); }
  .reader .menu-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ink); }
  .reader .menu-summary { margin-top: 16px; color: var(--sub); }
  .reader .context-tag { font-size: 14px; line-height: 20px; font-weight: 400; }
  .reader .menu-details .pane-item { display: block; margin-top: 24px; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); }
  .reader .pane > header { min-height: 32px; height: auto; padding: 0 0 12px; margin-bottom: 12px; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; line-height: 20px; }
  .reader .pane > header .r { font-size: 12px; line-height: 18px; margin-left: auto; }
  .reader .menu-details .pane-item > header { border: 0; padding: 0; margin: 0 0 12px; min-height: 20px; }
  .reader .item-view { display: grid; padding: 0; gap: 16px; overflow: visible; }
  .reader .item-view .name, .reader .tsheet .name, .reader .sheet h2, .reader .panel h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
  .reader .item-view .name .d, .reader .tsheet .name .d { font-size: 12px; line-height: 18px; font-weight: 400; }
  .reader .item-view .lab, .reader .tsheet .lab { font-size: 13px; line-height: 20px; font-weight: 500; }
  .reader .item-view .detail, .reader .item-view .runs, .reader .tsheet .detail, .reader .tsheet .runs { grid-template-columns: 76px minmax(0, 1fr); gap: 8px 12px; padding-top: 16px; }
  .reader .item-view .runs code, .reader .tsheet .runs code { font-size: 12px; line-height: 18px; }
  .reader .item-view .kv div { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 8px 0; font-size: 14px; line-height: 22px; }
  .reader .item-view .kv dt { font-size: 13px; line-height: 20px; }
  .reader .rows li, .reader .subitems li { height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; line-height: 22px; }
  .reader .rows li[data-ov-row] { grid-template-columns: minmax(0, 1fr) auto; }
  .reader .rows li .mx, .reader .subitems li .d { font-size: 12px; line-height: 18px; }
  .reader .legend li { font-size: 16px; line-height: 26px; }
  .reader .legend .ex { font-size: 18px; }
  .reader .strip dt { font-size: 13px; line-height: 20px; }
  .reader .strip dd { font-size: 15px; line-height: 24px; }
  .reader .btn, .reader .sheet-close, .reader .tsheet .btn, .reader .more button, .reader .toc .t, .reader .toc .c { font-size: 14px; line-height: 20px; }
  .reader .sheet .muted, .reader .toc .n, .reader .toc .t small, .reader .note, .reader .unverified, .reader .foot, .reader .toast { font-size: 12px; line-height: 18px; }
  .reader .search-input, .reader .panel textarea { font-size: 16px; line-height: 26px; }
  .reader textarea.evidence { font-size: 12px; line-height: 18px; }
  .reader .pop { font-size: 14px; line-height: 22px; max-width: 300px; }
  .reader .pop .t { font-size: 15px; line-height: 22px; font-weight: 600; }
  .reader .pop .t .d, .reader .pop .m { font-size: 12px; line-height: 18px; font-weight: 400; }
  .reader .foot { min-width: 0; margin-top: 0; }
  .reader .foot > span:first-child { min-width: 0; }
  .reader .foot .pn { font-size: 14px; line-height: 20px; }
}
@media screen and (max-width: 1100px) {
  .reader .app { grid-template-columns: minmax(0, 1fr); }
  .reader .side { display: none; }
  .reader .main { grid-column: 1; }
  .reader .menu-btn { display: grid; }
}
@media screen and (max-width: 900px) {
  .reader .content { display: block; padding: 20px; }
  .reader .h { margin-bottom: 20px; }
  .reader .menu-page .h { margin-bottom: 20px; }
  .reader .row2.workbench { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .reader .pane-screen .stage { container-type: normal; padding: 12px; }
  .reader .pane-screen .shot { width: 100%; max-height: none; }
  .reader .menu-details { overflow: visible; border-left: 0; padding-left: 0; }
  .reader .item-view { display: grid; }
  .reader .foot { margin-top: 24px; }
  .reader .rows li { min-height: 48px; }
  .reader .more { top: calc(var(--topbar-h) + 6px); right: 20px; }
  .reader .sheet-close { min-height: 34px; }
}
@media screen and (max-width: 600px) {
  .reader .top { grid-template-columns: auto minmax(0, 1fr); }
  .reader .top-main { justify-content: flex-end; padding: 0 14px 0 0; }
  .reader .top-t, .reader .brand-edition { display: none; }
  .reader .brand { padding: 0 14px; gap: 6px; }
  .reader .brand .badge, .reader .brand .badge .mark { width: 26px; height: 26px; }
  .reader .top-r { gap: 6px; }
  .reader .content { padding: 16px 14px; }
  .reader .h h1 { order: 0; }
  .reader .h .right { order: 1; }
  .reader .h .sub { order: 2; flex-basis: 100%; min-width: 0; }
  .reader .more { right: 14px; }
  .reader .legend li { grid-template-columns: minmax(0, 1fr); }
}


/* Type r4: four sizes only on screen. Use 24 / 16 / 14 / 12 px; secondary copy stays 12 px. */
@media screen {
  .reader { --type-title: 24px; --type-heading: 16px; --type-body: 14px; --type-small: 12px; }
  .reader .top-t, .reader .side-it, .reader .sel, .reader .menu-meta dd, .reader .context-tag,
  .reader .btn, .reader .sheet-close, .reader .more button, .reader .toc .t, .reader .toc .c,
  .reader .rows li, .reader .subitems li, .reader .item-view .kv div, .reader .pop,
  .reader .pop .t, .reader .foot .pn, .reader .search-input, .reader .panel textarea { font-size: var(--type-body); line-height: 20px; }
  .reader .h h1 { font-size: var(--type-title); line-height: 32px; font-weight: 600; }
  .reader .item-view .name, .reader .tsheet .name, .reader .sheet h2, .reader .panel h3,
  .reader .brand-t .brand-edition, .reader .legend .ex { font-size: var(--type-heading); line-height: 24px; }
  .reader .h .sub, .reader .h .right, .reader .side-lab, .reader .side-foot, .reader .side-foot .lab,
  .reader .desc, .reader .menu-summary, .reader .item-view .empty, .reader .item-view .dsc,
  .reader .item-view .detail, .reader .tsheet .dsc, .reader .tsheet .detail, .reader .about li,
  .reader .legend li, .reader .menu-meta dt, .reader .pane > header, .reader .pane > header .r,
  .reader .pane > footer, .reader .item-view .name .d, .reader .tsheet .name .d,
  .reader .item-view .lab, .reader .tsheet .lab, .reader .item-view .kv dt,
  .reader .item-view .runs code, .reader .tsheet .runs code, .reader .rows li .mx,
  .reader .subitems li .d, .reader .pop .t .d, .reader .pop .m, .reader .note,
  .reader .unverified, .reader .foot, .reader .toast, .reader .sheet .muted, .reader .toc .n,
  .reader .toc .t small, .reader textarea.evidence, .reader .strip dt { font-size: var(--type-small); line-height: 18px; }
  .reader .menu-meta dd.chord-cell, .reader .strip dd.chord-cell { font-size: 16px; }
  .reader .strip dd { font-size: var(--type-body); line-height: 20px; }
  .reader .h { gap: 4px 12px; }
  .reader .menu-summary { margin-top: 12px; color: var(--sub); }
  .reader .menu-details .pane-item { margin-top: 20px; padding-top: 16px; }
  .reader .menu-details .pane-item > header { margin-bottom: 8px; }
  .reader .item-view { gap: 12px; }
  .reader .item-view .detail, .reader .item-view .runs, .reader .tsheet .detail, .reader .tsheet .runs { padding-top: 12px; }
  .reader .menu-meta > div { min-height: 36px; padding: 8px 0; }
  .reader .menu-meta > div:first-child { padding-top: 0; }
  .reader .pop .t { font-weight: 600; }
}
@media screen { .reader .chord .plus, .reader .k { font-size: var(--type-small); } }
@media screen { .reader .pop .b, .reader .pop .b2 { font-size: var(--type-small); line-height: 18px; } }

/* r5 (Sean 2026-10-16): Korean labels; four text sizes 28 / 18 / 14 / 12; intro page; submenu path inside the viewer.
   The edition word belongs to the logo lockup (15 : 70 on screen = 11.5 : 54 in print), so it is not a text-scale step. */
.item-index { display: grid; margin-left: -8px; }
.item-index li { display: grid; grid-template-columns: 16px minmax(0, 1fr) 6px; align-items: center; gap: 8px; min-height: 36px; padding: 8px; border-radius: 3px; color: var(--ink); cursor: pointer; }
.item-index.list li { grid-template-columns: minmax(0, 1fr) 6px; }
.item-index li:hover, .item-index li.on { background: var(--focus-bg); }
.item-index .dir { width: 12px; height: 12px; color: var(--sub); justify-self: center; }
.item-index .sub-flag { display: block; width: 6px; height: 6px; background: var(--lime); }
.sub-sample { position: relative; display: inline-block; width: 44px; height: 16px; border-radius: 3px; background: var(--pie-body); vertical-align: middle; }
.sub-sample::after { content: ""; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px; background: var(--lime); }
@media screen {
  .reader { --type-title: 28px; --type-heading: 18px; }
  .reader .h h1 { line-height: 35px; }
  .reader .side-lab { font-size: var(--type-heading); line-height: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin: 24px 0 8px; }
  .reader .brand-t .brand-edition { font-size: 15px; line-height: 20px; }
  .reader .legend .ex { font-size: 16px; }
  .reader .item-index li { font-size: var(--type-body); line-height: 20px; }
  .reader .workbench .pane-screen { grid-template-rows: minmax(0, 1fr); }
  .reader .stage > .crumb { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; font-size: var(--type-small); line-height: 18px; color: var(--sub); pointer-events: none; }
  .reader .stage > .crumb[hidden] { display: none; }
  .reader .stage > .crumb .cur { color: var(--ink); font-weight: 600; }
  .reader .stage > .crumb .x { pointer-events: auto; margin-left: auto; height: 28px; padding: 0 12px; border-radius: 3px; background: var(--tone2); color: var(--ink); font-size: var(--type-small); line-height: 18px; }
  .reader .stage > .crumb .x:hover { background: var(--tone3); }
  .reader .content.guide-page { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .reader .guide-page .desc { margin: 0 0 28px; }
  .reader .guide { display: grid; gap: 32px; align-content: start; min-height: 0; }
  .reader .guide .pane { display: block; }
  .reader .guide-list { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); column-gap: 48px; }
  .reader .guide-list > div { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .reader .guide-list.use > div { align-items: first baseline; }
  .reader .guide-list dt { font-size: var(--type-small); line-height: 18px; font-weight: 500; color: var(--sub); }
  .reader .guide-list.icons dt { font-size: 16px; color: var(--ink); }
  .reader .guide-list dd { font-size: var(--type-body); line-height: 22px; color: var(--ink); }
}
@media screen and (max-width: 900px) {
  .reader .stage > .crumb { top: 12px; left: 12px; right: 12px; }
  .reader .guide-list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .reader .guide-list > div { grid-template-columns: 112px minmax(0, 1fr); }
}
@media screen { .reader .stage > .crumb .x { background: var(--paper); } .reader .stage > .crumb .x:hover { background: var(--tone2); } }
@media screen and (max-width: 900px) { .reader .guide-list > div { grid-template-columns: 132px minmax(0, 1fr); } }

/* r6 (Sean 2026-10-16): every small control or chip uses 3px (keys, tags, inputs, code, toast); large panels stay 0px
   and the square status marks stay square. The captured Blender pie buttons are always dark (rgb 33,33,33 at 94%),
   so the pie description popup is always a light surface with a hairline and a soft shadow, in both themes. */
.k, .context-tag, .search-input, .item-view .runs code, .tsheet .runs code, .toast, textarea.evidence, .panel textarea { border-radius: 3px; }
.reader .pop { --black: #ffffff; --onblack: #1f1f1f; --onblacksub: #5e5e5e; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
:root[data-theme="dark"] .reader .pop { --black: #f2f2f2; --onblack: #1a1a1a; --onblacksub: #555555; border-color: rgba(0, 0, 0, 0.4); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.reader .pop .m { opacity: 1; }

/* r7 (Sean 2026-10-16)
   1) Selected/hovered pie button shows the product theme selection, read from the capture-time theme export
      (run-20261015-134100): wcol_pie_menu inner_sel rgb(27,116,60) at 90.2%, text_sel white. The capture stays untouched:
      lighten lifts the dark body (rgb 33,33,33 at 93.7%) to the green, color-dodge 0.149 lifts text 217 to 255.
      Light menu rows (wcol_menu_item, same green + white text): difference with white inverts the row, lighten adds the green.
   2) (Popup corner brackets were tried and removed at Sean's request.)
   3) Sidebar grid: one left line x = 28 (group labels, icons, select text, status marks, logo glyph), item text x = 52,
      child icon on x = 52; first group label is centred on the page title (r9, see the side-lab rule below). */
.reader { --pie-sel-lift: rgb(40, 108, 65); --pie-sel-dodge: rgb(38, 38, 38); --menu-sel: rgb(43, 123, 73); }
:root[data-theme="dark"] .reader { --pie-sel-lift: rgb(26, 94, 51); }
.reader .hs, .reader .hs:hover, .reader .hs.on, .reader .hs.sel, .reader .hs:focus-visible { background: none; opacity: 1; mix-blend-mode: normal; }
.reader .hs::before, .reader .hs::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 100ms; }
.reader .hs::before { background: var(--pie-sel-lift); mix-blend-mode: lighten; }
.reader .hs::after { background: var(--pie-sel-dodge); mix-blend-mode: color-dodge; }
.reader .shot.list-shot > .hs::before, .reader .ov .hs::before { background: #ffffff; mix-blend-mode: difference; }
.reader .shot.list-shot > .hs::after, .reader .ov .hs::after { background: var(--menu-sel); mix-blend-mode: lighten; }
.reader .hs:hover::before, .reader .hs:hover::after, .reader .hs.on::before, .reader .hs.on::after,
.reader .hs.sel::before, .reader .hs.sel::after, .reader .hs:focus-visible::before, .reader .hs:focus-visible::after { opacity: 1; }
.reader .shot.has-sel .hs:not(.sel):hover::before, .reader .shot.has-sel .hs:not(.sel):hover::after,
.reader .shot.has-sel .hs.on:not(.sel)::before, .reader .shot.has-sel .hs.on:not(.sel)::after { opacity: 0.5; }
@media screen {
  .reader .top .brand { padding-left: 24.62px; }
  .reader .side-lab { font-size: var(--type-body); line-height: 20px; font-weight: 600; color: var(--ink); letter-spacing: 0; margin: 24px 0 4px; }
  /* r9 (Sean 2026-10-16 "안내를 살짝 위로 올려서 시작하기 우측과 세로 중심을 맞춰라"): 36px put 안내 on the title baseline,
     which left its ink centre (108px) 4.75px below the 28px title's (시작하기 103.25px). 31px centres it (103px). */
  .reader .side > .side-lab:first-child { margin-top: 31px; }
  .reader .side-it { font-weight: 400; }
  .reader .side-it[aria-current="page"] { font-weight: 600; }
  .reader .side-it.child { padding-left: 36px; }
  .reader .side-it.child::before { left: 19.5px; top: 0; height: 20px; width: 12px; }
  .reader .side-foot .lab, .reader .side-foot .st { padding-left: 12px; }
  .reader .sel { padding-left: 12px; }
}
@media screen and (max-width: 1100px) { .reader .top .brand { padding-left: 20.62px; } }
@media screen and (max-width: 900px) { .reader .top .brand { padding-left: 16.62px; } }
@media screen and (max-width: 600px) { .reader .top .brand { padding-left: 11.42px; } }
@media screen {
  /* status lines: marker on the sidebar line, wrapped text hangs under the first word (Korean words are wrapped in spans, so no grid) */
  .reader .side-foot .st > div { padding-left: 15px; text-indent: -15px; }
  .reader .side-foot .st > div > .sq { margin-right: 8px; text-indent: 0; }
}
/* r7d: light menu rows overlap a captured Blender tooltip; a hue tint (color blend) marks the row in theme green
   without inverting anything underneath. Tags and strip values flow inline so "Object 모드" keeps its space. */
.reader .shot.list-shot > .hs::before, .reader .ov .hs::before { background: rgb(27, 116, 60); mix-blend-mode: color; }
.reader .shot.list-shot > .hs::after, .reader .ov .hs::after { background: none; mix-blend-mode: normal; }
.context-tag { display: inline-block; }
.strip dd, .strip dd:has(> .sq) { display: block; }
.strip dd:has(> .sq) { padding-left: 15px; text-indent: -15px; }
.strip dd > .sq { margin: 0 8px 0 0; text-indent: 0; }
/* r7e: the shortcut row holds icons only on some pages, so its label centres on the chord instead of using the icon bottom as a baseline. */
@media screen { .reader .menu-meta > div:has(> .chord-cell) { align-items: center; } }

/* r8 (Sean 2026-10-16): standalone app on every iPhone, iPhone Duo (closed and open) and every iPad.
   viewport-fit=cover is on, so content keeps its own margin inside the safe area: --safe-* default to env() and the
   QA harness overrides them per device. Layout modes depend on size only, never on hover:
     sidebar : width >= 1101 and height >= 561
     side    : 901–1100 wide, landscape, height >= 561 (viewer and details side by side, no sidebar)
     stacked : everything else (phones, Duo closed, Duo open portrait, iPad portrait, compact height)
   The JS STACKED_MQ mirrors the stacked query. */
:root { --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); }
@media screen {
  .reader { --pad-x: 24px; --pad-y: 24px; --bar-h: calc(var(--topbar-h) + var(--safe-t)); }
  .reader .app { grid-template-rows: var(--bar-h) minmax(0, 1fr); }
  .reader .top { height: var(--bar-h); padding-top: var(--safe-t); }
  .reader .top .brand, .reader .top-main { height: var(--topbar-h); }
  .reader .top-main { padding-right: calc(var(--pad-x) + var(--safe-r)); }
  .reader .content { padding: var(--pad-y) calc(var(--pad-x) + var(--safe-r)) calc(var(--pad-y) + var(--safe-b)) calc(var(--pad-x) + var(--safe-l)); }
  .reader .more { top: calc(var(--bar-h) + 6px); right: calc(var(--pad-x) + var(--safe-r)); }
  .reader .sheet-inner { padding: calc(28px + var(--safe-t)) calc(24px + var(--safe-r)) calc(70px + var(--safe-b)) calc(24px + var(--safe-l)); }
  .reader .sheet-close { top: calc(28px + var(--safe-t)); right: calc(24px + var(--safe-r)); }
  .reader .tsheet { padding: 18px calc(16px + var(--safe-r)) calc(18px + var(--safe-b)) calc(16px + var(--safe-l)); }
  .reader .toast { bottom: calc(22px + var(--safe-b)); }
  .reader .panel { padding: calc(22px + var(--safe-t)) calc(22px + var(--safe-r)) calc(22px + var(--safe-b)) 22px; }
  /* touch: a taller hit area for pie buttons; the green highlight stays on the button itself */
  .reader.touch .hs { box-sizing: content-box; padding: 8px 0; margin-top: -8px; }
  .reader.touch .hs::before, .reader.touch .hs::after { inset: 8px 0; }
  .reader.touch .shot.list-shot > .hs, .reader.touch .ov .hs { padding: 0; margin-top: 0; }
  .reader.touch .shot.list-shot > .hs::before, .reader.touch .shot.list-shot > .hs::after, .reader.touch .ov .hs::before, .reader.touch .ov .hs::after { inset: 0; }
  /* light menu rows: theme green with white text (difference turns the light row dark, lighten sets the theme green);
     rows already drawn selected in the capture use the pie method; Blender's own captured tooltip is cut out */
  .reader .shot.list-shot > .hs::before, .reader .ov .hs::before { background: rgb(235, 235, 235); mix-blend-mode: difference; }
  .reader .shot.list-shot > .hs::after, .reader .ov .hs::after { background: var(--menu-sel); mix-blend-mode: lighten; }
  .reader .shot.list-shot > .hs.dark-row::before, .reader .ov .hs.dark-row::before { background: var(--pie-sel-lift); mix-blend-mode: lighten; }
  .reader .shot.list-shot > .hs.dark-row::after, .reader .ov .hs.dark-row::after { background: var(--pie-sel-dodge); mix-blend-mode: color-dodge; }
  .reader .hs::before, .reader .hs::after { -webkit-clip-path: var(--hl-clip, none); clip-path: var(--hl-clip, none); }
}
@media screen and (max-width: 900px) { .reader { --pad-x: 20px; --pad-y: 20px; } }
@media screen and (max-width: 600px) { .reader { --pad-x: 14px; --pad-y: 16px; } }
@media screen and (max-height: 560px) { .reader { --topbar-h: 48px; } }
/* sidebar */
@media screen and (min-width: 1101px) and (min-height: 561px) {
  .reader .app, .reader .top { grid-template-columns: calc(240px + var(--safe-l)) minmax(0, 1fr); }
  .reader .top .brand { padding-left: calc(24.62px + var(--safe-l)); }
  .reader .side { display: flex; padding: 0 16px calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
  .reader .main { grid-column: 2; }
  .reader .content { padding-left: var(--pad-x); }
  .reader .menu-btn { display: none; }
}
/* no sidebar: brand glyph on the content line */
@media screen and (max-width: 1100px), screen and (max-height: 560px) {
  .reader .app { grid-template-columns: minmax(0, 1fr); }
  .reader .top { grid-template-columns: auto minmax(0, 1fr); }
  .reader .side { display: none; }
  .reader .main { grid-column: 1; }
  .reader .menu-btn { display: grid; }
  .reader .top .brand { padding-left: calc(var(--pad-x) - 3.38px + var(--safe-l)); padding-right: 24px; }
  .reader .top-main { padding-left: 0; }
}
@media screen and (max-width: 600px) { .reader .top .brand { padding-left: calc(var(--pad-x) - 2.58px + var(--safe-l)); padding-right: 12px; } }
/* side by side (sidebar and side modes) */
@media screen and (min-width: 1101px) and (min-height: 561px), screen and (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 561px) {
  .reader .content { display: grid; }
  .reader .item-view { display: grid; }
  .reader .rows.touch-only { display: none; }
}
/* stacked */
@media screen and (max-width: 900px), screen and (orientation: portrait) and (max-width: 1100px), screen and (max-height: 560px) {
  .reader .content { display: block; }
  .reader .h, .reader .menu-page .h { margin-bottom: 20px; }
  .reader .row2.workbench { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .reader .pane-screen .stage { container-type: normal; padding: 12px; }
  .reader .pane-screen .shot { margin: 0 auto; width: min(100%, calc((100vh - var(--bar-h) - var(--safe-b) - 64px) * 1.4)); width: min(100%, calc((100dvh - var(--bar-h) - var(--safe-b) - 64px) * 1.4)); }
  .reader .menu-details { overflow: visible; border-left: 0; padding-left: 0; }
  .reader .item-view { display: none; }
  .reader .rows.touch-only { display: block; }
  .reader .foot { margin-top: 24px; }
  .reader .guide-list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
}
/* r8c: compact-height landscapes (phones, iPhone Duo closed) can have a 59pt top corner with no inset on that side */
@media screen and (max-height: 560px) { .reader .top-main { padding-right: max(calc(var(--pad-x) + var(--safe-r)), 32px); } }
/* side by side: the guide and the about page grow and scroll instead of squeezing into the footer and the bottom inset */
@media screen and (min-width: 1101px) and (min-height: 561px), screen and (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 561px) {
  .reader .content.guide-page { grid-template-rows: auto auto minmax(min-content, 1fr) auto; }
  .reader .content:not(.menu-page):not(.guide-page) { grid-template-rows: auto auto auto minmax(min-content, 1fr) auto; }
}
.to-list { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 28px; padding: 0 10px 0 6px; margin-left: -6px; border-radius: 3px; color: var(--sub); }
.to-list:hover { background: var(--focus-bg); color: var(--ink); }
.to-list svg { width: 12px; height: 12px; }
@media screen { .reader .to-list { font-size: var(--type-small); line-height: 18px; } }
/* r8d (Sean 2026-10-16): sidebar rows (and the selected box) 40 -> 32px tall with a mouse; touch keeps 40px targets.
   Bottom-sheet actions stay above the home indicator while the sheet scrolls (landscape phones). */
@media screen {
  .reader .side-it { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
  .reader .side-it.child::before { height: 16px; }
  .reader.touch .side-it { min-height: 40px; padding-top: 10px; padding-bottom: 10px; }
  .reader.touch .side-it.child::before { height: 20px; }
  /* r10 (Sean 2026-10-16 "왼쪽 패널 시작하기도 살짝 아래로 내려서 우측의 모든 파이메뉴 페이지는 이 문구랑 세로 중심이 맞도록"):
     the first item (시작하기) centres on the first line of the page description ("모든 파이 메뉴 페이지는 …", 141.75px).
     Mouse rows are 32px, so the label gap grows 4 -> 13px (item centre 133 -> 142px); touch rows are 40px with the text
     4px lower, so their gap is 9px. The rest of the list follows by the same amount. */
  .reader .side > .side-lab:first-child { margin-bottom: 13px; }
  .reader.touch .side > .side-lab:first-child { margin-bottom: 9px; }
  /* r11 (Sean 2026-10-16 "왼쪽 패널 파이메뉴도 우측 패널 아이콘과 맞추고 우측패널 아이콘 글자도 파이메뉴 크기와 동일하게"):
     section headers (아이콘, 사용 방법, 항목, 목록, 확인한 것) take the sidebar group-title size, 14px / 600, and their counts stay
     12px. The 18px line stays, so every header keeps its 32px height and nothing below it moves. The second group label
     (파이 메뉴) moves up 3px (24 -> 21px; touch rows are 40px: 17px): centre 189px against 아이콘 188.5px. */
  .reader .pane > header { font-size: var(--type-body); }
  .reader .pane > header .r { font-size: var(--type-small); }
  .reader .side > .side-lab:nth-of-type(2) { margin-top: 21px; }
  .reader.touch .side > .side-lab:nth-of-type(2) { margin-top: 17px; }
  .reader .tsheet .acts { position: sticky; bottom: var(--safe-b); padding-top: 8px; background: var(--paper); }
}