/* 로고와 시스템. 넓은 자리는 120 눈금 색인 + 1000 본문(이름 칸 176 + 내용 800), 760 아래는 390 지면.
   넓은 자리: 왼쪽 눈금 색인이 따라 내려오며 지금 읽는 장에 강조색 눈금이 선다.
   390: 눈금 색인이 위에 붙은 가로 띠가 되고, 행 이름 아래로 내용이 한 줄씩 쌓인다. */

:root{
  --ink:#292416;
  --ink-2:#574D3F;
  --line:#D1CFCB;
  --grey-2:#BBB6B1;
  --grey-3:#9F9A93;
  --tile:#E6E1D6;
  --paper:#F2F1EF;
  --ground:#F0EFEC;
  --accent:#C8542E;
  --accent-text:#AF4523;
  --ko:"Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --latin:"Geist","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --ease:200ms ease;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#FFFFFF}
body{
  background:#FFFFFF;
  color:var(--ink);
  font-family:var(--ko);
  font-weight:400;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,canvas{display:block}
h1,h2,h3,h4,p,ol,ul,dl,dt,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
i{font-style:normal}
b{font-weight:inherit}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus,a:focus{outline:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

.mono{font-family:var(--mono);font-size:11px;line-height:14px;letter-spacing:0.8px;font-weight:400}
.eyebrow{font-family:var(--mono);font-size:11px;line-height:14px;letter-spacing:0.8px;color:var(--ink-2)}
.acc-t{color:var(--accent-text)}
.ink-t{color:var(--ink)}
.wm,.mm{display:block;fill:currentColor;color:var(--ink);overflow:visible}
.ink{fill:var(--ink)}
.inkf{fill:var(--ink)}
.accf{fill:var(--accent)}
.g1{fill:var(--line)}
.g2{fill:var(--grey-2)}

/* ---------- 틀 ---------- */
.page{
  max-width:1208px;
  margin:0 auto;
  padding:64px 24px 96px;
}
.shell{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  column-gap:40px;
  align-items:start;
}
.col{min-width:0}

/* ---------- 눈금 색인 ---------- */
.ruler{
  position:sticky;top:24px;
  height:588px;
  /* 자: 기준선 하나, 8마다 눈금, 40마다 긴 눈금 */
  background:
    linear-gradient(var(--line),var(--line)) 0 0 / 1px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='40'%3E%3Cg fill='%23BBB6B1'%3E%3Crect width='10' height='1'/%3E%3Crect y='8' width='5' height='1'/%3E%3Crect y='16' width='5' height='1'/%3E%3Crect y='24' width='5' height='1'/%3E%3Crect y='32' width='5' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 10px 40px repeat-y;
}
.ruler-list{position:relative;height:100%}
.ruler-list li{position:absolute;left:0;top:calc(2px + var(--i) * 96px)}
.rl{
  position:relative;
  display:flex;gap:17px;
  padding-left:24px;
  font-family:var(--mono);font-size:11px;line-height:14px;letter-spacing:0.8px;
  color:var(--ink-2);
  white-space:nowrap;
  transition:color var(--ease);
}
.rl::before{
  content:"";position:absolute;left:0;top:6px;
  width:16px;height:1px;background:var(--ink-2);
  transition:background-color var(--ease);
}
.rl.is-on{color:var(--accent-text)}
.rl.is-on::before{height:2px;background:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .rl:hover{color:var(--ink)}
  .rl.is-on:hover{color:var(--accent-text)}
}
.rl-bar{display:none}

/* ---------- 머리 ---------- */
.head{padding-bottom:32px;border-bottom:1px solid var(--line)}
.head-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.title h1{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-0.56px}
.title-ko{margin-top:4px;font-size:14px;line-height:22px;color:var(--ink-2)}
.sheet{display:flex;border:1px solid var(--line);flex:none}
.sheet-c{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-right:1px solid var(--line)}
.sheet-c:last-child{border-right:0}
.sheet dt,.sheet dd{font-family:var(--mono);font-size:11px;line-height:14px;letter-spacing:0.8px}
.sheet dt{color:var(--grey-3)}
.sheet dd{color:var(--ink-2)}
.lead{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.lead-1{font-size:22px;line-height:32px;font-weight:700;letter-spacing:-0.22px}
.nw{white-space:nowrap}
.lead-2{max-width:380px;font-size:16px;line-height:27px;color:var(--ink-2)}

/* ---------- 행 ---------- */
.row{
  display:grid;
  grid-template-columns:176px minmax(0,1fr);
  column-gap:24px;
  align-items:start;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.rname{display:flex;flex-direction:column;gap:4px;min-width:0}
.rname h3{font-size:14px;line-height:20px;font-weight:500}
.row-wide{grid-template-columns:minmax(0,1fr);row-gap:20px}
.stack{display:flex;flex-direction:column;min-width:0}
.cap{margin-top:10px;font-size:12px;line-height:16px;color:var(--ink-2)}
.cap-m{display:flex;align-items:baseline;gap:10px}
.ph{position:relative;overflow:hidden;background:var(--paper)}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 25px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 15px}
.tilefig{min-width:0}

/* ---------- 장 머리 ---------- */
.ch{scroll-margin-top:0}
.ch-head{
  display:flex;align-items:flex-start;gap:20px;
  padding:56px 0 24px;
  border-bottom:1px solid var(--line);
}
.ch-num{font-family:var(--mono);font-size:32px;line-height:40px;color:var(--ink-2)}
.ch-title h2{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-0.24px}
.ch-ko{margin-top:2px;font-size:14px;line-height:22px;color:var(--ink-2)}

/* 여는 장면: 이름 칸까지 본문 폭 전체 */
.open{padding:24px 0;border-bottom:1px solid var(--line)}
.ph-m1{aspect-ratio:1000 / 444}
.ph-hero{aspect-ratio:1000 / 600}
.ph-shelf{aspect-ratio:1000 / 563}

/* ---------- 방향 ---------- */
.dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.dir.is-off{opacity:.35}
.dir-box{aspect-ratio:248 / 88}
.dir-box img{width:100%;height:100%;object-fit:contain}
.dir-cap{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:500}
.dir-cap .mono{color:var(--ink-2)}

/* ---------- 연속성 ---------- */
.cont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.cont-a{grid-area:1 / 1}
.cont-la{grid-area:2 / 1}
.cont-b{grid-area:1 / 2}
.cont-lb{grid-area:2 / 2}
.ph-cont{aspect-ratio:388 / 485}
.cont-list{padding-top:20px}
.cont-list h4{font-size:16px;line-height:24px;font-weight:500}
.cont-list ul{margin-top:4px;display:flex;flex-direction:column;gap:4px}
.cont-list li{font-size:13px;line-height:20px;color:var(--ink-2)}

/* ---------- 01 로고 ---------- */
.draw{background:var(--paper)}
.draw-svg{display:block;width:100%;height:auto}
.draw-svg text{font-family:var(--mono);font-size:11px;letter-spacing:0.8px;fill:var(--ink)}
.legend{display:none}
.cons-label{margin-top:16px;color:var(--ink-2)}
.cons-cap{margin-top:12px;max-width:500px;font-size:13px;line-height:20px;color:var(--ink-2)}

.ladder{display:flex;flex-direction:column}
.sz{flex:none;width:calc(var(--w) * 0.1%)}
.sz .wm,.sz .mm{width:100%;height:auto}
.sz figcaption{margin-top:10px;color:var(--ink-2);white-space:nowrap}
.sz .ov{fill:none;stroke:var(--line);stroke-width:1}
.ladder-row{margin-top:32px;display:flex;align-items:flex-end;gap:10px}
.ladder-row .sz{flex:0 1 auto}
.brk{display:none}
.min{
  margin-top:32px;padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
}
.min-g{display:inline-flex;align-items:baseline;gap:8px}
.min-k{font-size:13px;line-height:20px;font-weight:500}
.min .dot{color:var(--grey-3)}
.min-2{display:none}

.gtile{position:relative;aspect-ratio:250 / 140;display:grid;place-items:center;overflow:hidden}
.gtile .wm{position:relative;width:60%;height:auto}
.g-paper{background:var(--paper)}
.g-ink{background:var(--ink)}
.g-ink .wm{color:var(--paper)}
.g-tile{background:var(--tile)}
.g-tile .wm,.g-ink2 .wm{color:var(--ink-2)}
.g-grey{background:var(--line)}
.g-white{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line)}
.g-white .wm{color:#000000}
.g-photo{background:#8A8176}
.g-photo .wm{color:#FFFFFF}
.g-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.a2-box{position:relative;aspect-ratio:800 / 300;background:var(--paper)}
.a2-svg{display:block;width:100%;height:100%}
.a2-svg .dash{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 4}
.a2-svg text{font-family:var(--mono);font-size:13.2px;letter-spacing:0.8px}
.lk-t{fill:var(--ink)}
.lk-n{fill:var(--accent-text)}
.xl{position:absolute;color:var(--ink)}
.xh{position:absolute;left:2%;top:90%;color:var(--ink-2)}
.lcap{margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px;font-size:12px;line-height:16px;color:var(--ink-2)}
.lcap .mono{line-height:16px;letter-spacing:0.6px}
.lcap i{color:var(--grey-3)}
.lmin{display:inline-flex;align-items:baseline;gap:6px}
.lockups{margin-top:24px}
.lockups .lmin{flex-basis:100%}
.ltile{aspect-ratio:250 / 220;background:var(--paper)}
.ltile svg{display:block;width:100%;height:100%}
.rules-p{margin-top:24px;max-width:540px;font-size:14px;line-height:22px;color:var(--ink-2)}

.dtile{aspect-ratio:188 / 120;background:var(--paper)}
.dont-svg{display:block;width:100%;height:100%;overflow:hidden}
.dont-svg .slash{stroke:var(--accent);stroke-width:1}
.dont-svg .outline{fill:none;stroke:var(--ink);stroke-width:6}
.dont-svg .acc{fill:var(--accent)}
.dont-svg .shadow{filter:drop-shadow(1.5px 2px 1.5px rgba(41,36,22,.45))}
.dont-svg .dash3{stroke:var(--grey-3);stroke-width:1;stroke-dasharray:3 3}
.dont-svg .intr{font-family:var(--mono);font-size:9px;letter-spacing:0.6px;fill:var(--ink)}
.ncap{margin-top:10px;display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:16px;color:var(--ink-2)}

.ph-use{aspect-ratio:148 / 185}
.use figcaption{margin-top:12px}
.use-t{font-size:13px;line-height:20px;font-weight:500}
.use-d{margin-top:2px;font-size:12px;line-height:18px;color:var(--ink-2)}

/* ---------- 02 컬러 ---------- */
.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.sw{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;cursor:default}
.sw-c{display:block;width:100%;aspect-ratio:93 / 120;border-bottom:1px solid transparent;transition:border-color var(--ease)}
.sw-paper{box-shadow:inset 0 0 0 1px var(--line)}
.sw-n,.sw-h,.sw-k{font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:0.8px;white-space:nowrap}
.sw-n{margin-top:10px;color:var(--ink)}
.sw-h,.sw-k{color:var(--ink-2)}
.sw-k{visibility:hidden}
.sw:focus-visible .sw-k,.sw.is-on .sw-k{visibility:visible}
.sw:focus-visible .sw-c,.sw.is-on .sw-c{border-bottom-color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .sw:hover .sw-k{visibility:visible}
  .sw:hover .sw-c{border-bottom-color:var(--ink)}
}

.prop{position:relative;padding-bottom:22px}
.prop-acc{text-align:right;color:var(--ink-2)}
.prop-bar{margin-top:6px;display:flex;height:40px}
.prop-bar span{display:block;height:100%}
.pb-paper{flex:70;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.pb-grey{flex:20;background:var(--line)}
.pb-ink{flex:9;background:var(--ink)}
.pb-acc{flex:1;background:var(--accent)}
.prop-l{position:absolute;bottom:0;color:var(--ink-2);white-space:nowrap}
.prop-l b{color:var(--ink)}

.acc-p{max-width:262px;font-size:16px;line-height:27px}
.acc-ex{margin-top:16px;display:flex;gap:10px;font-size:13px;line-height:18px}

/* ---------- 03 서체 ---------- */
.f-mono{font-family:var(--mono)}
.f-latin{font-family:var(--latin)}
.f-ko{font-family:var(--ko)}
.tf{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.tf:first-child{padding-top:0}
.tf:last-child{border-bottom:0;padding-bottom:0}
.tf-name{font-size:16px;line-height:24px;font-weight:500}
.tf-name.f-mono{font-weight:400}
.tf-role{margin-top:4px;font-size:13px;line-height:20px;color:var(--ink-2)}
.tf-s{min-width:0}
.tf-s.f-mono{font-size:26px;line-height:36px}
.tf-s.f-latin{font-size:34px;line-height:44px;letter-spacing:-0.34px}
.tf-s.f-ko{font-size:28px;line-height:40px}

.sl h4{display:flex;align-items:baseline;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:14px;line-height:20px;font-weight:500}
.sl h4 .mono{color:var(--ink-2)}
.sl li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.sl-u{font-size:12px;line-height:18px;color:var(--ink-2)}
.sl-v{color:var(--ink)}

/* ---------- 04 그래픽 ---------- */
.motifs{row-gap:28px}
.mtile{position:relative;aspect-ratio:250 / 180;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.motif-svg{display:block;width:100%;height:100%}
.motif-svg rect{fill:var(--ink)}
.motif-svg .accf{fill:var(--accent)}
.motif-svg .g2{fill:var(--grey-2)}
.motif-svg text{font-family:var(--mono);letter-spacing:0.8px}
.gz{font-size:10px;fill:var(--ink-2)}
.gz.a{fill:var(--accent-text)}
.mk{font-size:12px;fill:var(--ink)}
.mk.mk2{fill:var(--ink-2)}
.strip-svg{width:76.8%;height:auto;fill:var(--ink)}
.motif figcaption{margin-top:12px}
.mo-t{font-size:14px;line-height:20px;font-weight:500}
.mo-d{margin-top:4px;max-width:236px;font-size:12px;line-height:18px;color:var(--ink-2)}

.motion{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:14px;line-height:20px}
.mo-i{display:inline-flex;align-items:baseline;gap:10px}
.motion .mono{font-size:12px;line-height:20px;color:var(--ink-2)}
.motion .mono.ink-t{color:var(--ink)}
.motion .slash-t{color:var(--grey-3)}

/* ---------- 05 이미지 ---------- */
.prules li{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px;padding:12px 0;border-bottom:1px solid var(--line)}
.prules li:first-child{padding-top:0}
.prules li:last-child{border-bottom:0;padding-bottom:0}
.pr-k{display:flex;align-items:baseline;gap:10px;font-size:14px;line-height:22px;font-weight:500}
.pr-k .mono{color:var(--ink-2);font-weight:400}
.pr-t{max-width:470px;font-size:14px;line-height:22px;color:var(--ink-2)}

/* ---------- 06 패키징 ---------- */
/* 라벨 도면: 줄마다 글, 사각 점, 이끌림선, 이름이 한 줄로 선다 */
.labd{
  --cl:48;--ct:70;--cw:420;--ch:280;--bw:800;--bh:420;
  --row-l:67;--gap:13px;--key:280;
  position:relative;aspect-ratio:800 / 420;background:var(--tile);
}
.labd-card{
  position:absolute;
  left:calc(var(--cl) / var(--bw) * 100%);top:calc(var(--ct) / var(--bh) * 100%);
  width:calc(var(--cw) / var(--bw) * 100%);height:calc(var(--ch) / var(--bh) * 100%);
  background:var(--paper);border-radius:8px;
}
.ld{
  position:absolute;left:calc(var(--row-l) / var(--bw) * 100%);right:0;
  top:calc(var(--y) / var(--bh) * 100%);transform:translateY(-50%);
  display:flex;align-items:center;
}
.ld-wm{width:168px;height:auto;flex:none}
.ld-t{flex:none;font-size:15px;line-height:20px;color:var(--ink)}
.ld-big{font-size:21px;line-height:26px}
.ld-dot{flex:none;width:6px;height:6px;margin-left:var(--gap);background:var(--ink)}
.ld-line{flex:1;height:1px;margin-left:-3px;background:var(--ink)}
.ld-k{flex:none;width:calc(var(--key) / (var(--bw) - var(--row-l)) * 100%);padding-left:12px;font-size:13px;line-height:20px;color:var(--ink)}
.ld-n{display:none}
.ld-legend{display:none}
.lab-p{margin-top:16px;max-width:430px;font-size:14px;line-height:22px;color:var(--ink-2)}
.ph-pk{aspect-ratio:250 / 312}

/* 입체 병: 영역에 들어오면 그때 불러온다. 그 전과 불러오지 못한 때는 정지 컷이 선다 */
.three-row{padding-top:24px}
.three{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:28px 0 24px;
  background:var(--ground);
}
.seg{
  display:inline-flex;
  padding:3px;
  border:1px solid var(--line);border-radius:999px;
  background:#FFFFFF;
}
.seg[hidden],.hint[hidden]{visibility:hidden}
.seg-b{
  padding:2px 10px;border-radius:999px;
  font-size:12px;line-height:20px;font-weight:500;color:var(--ink-2);
  transition:background-color var(--ease),color var(--ease);
}
.seg-b[aria-pressed="true"]{background:var(--ink);color:#FFFFFF}
.seg-b:focus-visible{outline-offset:1px}
.stage{position:relative;width:76%;aspect-ratio:760 / 475}
.stage{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.stage.is-drag{cursor:grabbing}
.stage:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.three[data-mode="first"] .stage,.three[data-state="idle"] .stage{cursor:default}
.tt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.three[data-state="empty"] .tt{visibility:hidden}
.seg-b:disabled{opacity:.35;cursor:default}
.hint{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--ink-2)}
.hint svg{width:16px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.three-cap{margin-top:12px}

/* ---------- 시스템 적용: 가로 띠, 눈금 자가 스크롤 막대 ---------- */
.sys{margin-top:56px;padding-top:48px;border-top:1px solid var(--line)}
.sys-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.sys-strip{
  --h:490px;
  margin-top:16px;
  display:flex;gap:4px;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  cursor:grab;
}
.sys-strip::-webkit-scrollbar{display:none}
.sys-strip.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.sys-strip:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.sys-t{flex:none;height:auto;scroll-snap-align:start}
.sys-ph{height:var(--h);aspect-ratio:var(--r);background:var(--paper)}
.sys-ph img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.sys-t figcaption{margin-top:8px}
.sys-track{position:relative;margin-top:16px;height:14px}
.sys-base,.sys-cov{
  position:absolute;left:0;top:0;height:10px;
  background-repeat:repeat-x;background-size:120px 10px;
}
.sys-base{
  right:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cg fill='%23BBB6B1'%3E%3Crect x='0' width='1' height='10'/%3E%3Crect x='8' y='4' width='1' height='6'/%3E%3Crect x='16' width='1' height='10'/%3E%3Crect x='24' y='4' width='1' height='6'/%3E%3Crect x='32' width='1' height='10'/%3E%3Crect x='40' width='1' height='10'/%3E%3Crect x='48' y='4' width='1' height='6'/%3E%3Crect x='56' width='1' height='10'/%3E%3Crect x='64' width='1' height='10'/%3E%3Crect x='72' width='1' height='10'/%3E%3Crect x='80' y='4' width='1' height='6'/%3E%3Crect x='88' width='1' height='10'/%3E%3Crect x='96' width='1' height='10'/%3E%3Crect x='104' y='4' width='1' height='6'/%3E%3Crect x='112' width='1' height='10'/%3E%3C/g%3E%3C/svg%3E");
}
.sys-cov{
  width:var(--cov,30%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cg fill='%23574D3F'%3E%3Crect x='0' width='1' height='10'/%3E%3Crect x='8' y='4' width='1' height='6'/%3E%3Crect x='16' width='1' height='10'/%3E%3Crect x='24' y='4' width='1' height='6'/%3E%3Crect x='32' width='1' height='10'/%3E%3Crect x='40' width='1' height='10'/%3E%3Crect x='48' y='4' width='1' height='6'/%3E%3Crect x='56' width='1' height='10'/%3E%3Crect x='64' width='1' height='10'/%3E%3Crect x='72' width='1' height='10'/%3E%3Crect x='80' y='4' width='1' height='6'/%3E%3Crect x='88' width='1' height='10'/%3E%3Crect x='96' width='1' height='10'/%3E%3Crect x='104' y='4' width='1' height='6'/%3E%3Crect x='112' width='1' height='10'/%3E%3C/g%3E%3C/svg%3E");
}
.sys-bar{position:absolute;left:0;top:12px;height:2px;width:var(--cov,30%);background:var(--accent)}

/* ---------- 390 ---------- */
@media (max-width:759px){
  .page{padding:0 16px 64px}
  .shell{display:block}

  /* 눈금 색인: 위에 붙는 가로 띠 */
  .ruler{
    position:sticky;top:0;z-index:5;
    height:48px;margin:0 -16px;
    background:
      linear-gradient(var(--line),var(--line)) 0 47px / 100% 1px no-repeat,
      repeating-linear-gradient(90deg,var(--grey-2) 0 1px,transparent 1px 6px) 16px 41px / calc(100% - 16px) 6px no-repeat,
      #FFFFFF;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;
  }
  .ruler::-webkit-scrollbar{display:none}
  .ruler-list{display:flex;gap:28px;height:48px;padding:0 16px;width:max-content;min-width:100%}
  .ruler-list li{position:relative;left:auto;top:auto}
  .rl{flex-direction:row;gap:6px;padding:14px 0 20px;height:48px}
  .rl::before{left:0;top:33px;width:1px;height:14px}
  .rl.is-on::before{width:1px;height:14px}
  .rl.is-on::after{content:"";position:absolute;left:0;right:0;top:45px;height:2px;background:var(--accent)}
  .rl-name{display:none}
  .rl.is-on .rl-name{display:inline}

  .head{margin-top:32px;padding-bottom:24px}
  .head-top{flex-direction:column;gap:20px}
  .sheet-c{padding:6px 10px}
  .sheet dt,.sheet dd{font-size:10px}
  .lead{margin-top:20px}
  .lead-1{font-size:20px;line-height:30px;letter-spacing:-0.2px}

  .row{display:block;padding:20px 0}
  .row > .rname,.sys-head .rname{margin-bottom:12px}
  .row-wide > .rname{margin-bottom:12px}

  .ch-head{padding:40px 0 20px;gap:16px}
  .ch-num{font-size:26px;line-height:32px}
  .ch-title h2{font-size:20px;line-height:28px}
  .ch-ko{margin-top:2px;font-size:13px;line-height:20px}

  .open{margin:0 -16px;padding:0 0 20px}
  .open .cap{padding:0 16px}
  .ph-m1{aspect-ratio:390 / 173}
  .ph-hero{aspect-ratio:390 / 512}
  .ph-shelf{aspect-ratio:390 / 274}

  .dirs{column-gap:16px}
  .dir-cap{font-size:13px}

  .cont{column-gap:16px}
  .cont-a{grid-area:1 / 1}
  .cont-b{grid-area:1 / 2}
  .cont-la{grid-area:2 / 1 / 3 / 3}
  .cont-lb{grid-area:3 / 1 / 4 / 3;padding-top:12px}
  .ph-cont{aspect-ratio:171 / 214}

  .dim{display:none}
  .legend{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:12px;color:var(--ink)}
  .legend i{color:var(--grey-3)}
  .cons-label{margin-top:12px}
  .cons-label .grp{display:block}
  .cons-label .sep{display:none}

  .sz-800,.sz-400{display:none}
  .ladder-row{margin-top:0;flex-wrap:wrap;gap:24px 32px}
  .ladder-row .sz{width:calc(var(--w) * 1px)}
  .brk{display:block;flex-basis:100%;height:0}
  .nw{white-space:normal}
  .min{margin-top:20px;padding-top:0;border-top:0;flex-direction:column;gap:12px}
  .min .dot{display:none}
  .min-2{display:inline}

  .grid2,.grid3,.grid4,.grid5{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .lockups{margin-top:12px}
  .xl{font-size:10px}
  .xh{font-size:10px;left:2.8%;top:88%}
  .rules-p{margin-top:12px;max-width:260px}

  .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px}
  .sw-c{aspect-ratio:1}
  .sw-n,.sw-h,.sw-k{font-size:10px;letter-spacing:0.5px}
  .prop-l,.prop-acc{font-size:10px}

  .lcolour{grid-template-columns:minmax(0,1fr)}
  .lcolour .gtile{aspect-ratio:358 / 110}
  .lcolour .gtile .wm{width:45%}

  .acc-p{font-size:15px;line-height:26px}
  .acc-ex{font-size:12px}

  .tf{display:block;padding:16px 0}
  .tf-n{display:flex;align-items:baseline;gap:12px}
  .tf-name{font-size:15px}
  .tf-role{margin-top:0;font-size:12px}
  .tf-s{margin-top:8px}
  .tf-s.f-mono{font-size:18px;line-height:26px}
  .tf-s.f-latin{font-size:26px;line-height:34px}
  .tf-s.f-ko{font-size:21px;line-height:30px}

  .sl{grid-template-columns:minmax(0,1fr);gap:24px}
  .sl li{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0}
  .sl-v{text-align:right}

  .motifs{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .mtile{aspect-ratio:358 / 150}
  .strip-svg{width:192px}
  .mo-d{max-width:none}

  .motion{flex-direction:column;align-items:flex-start;gap:12px}
  .motion .slash-t{display:none}

  .prules li{display:block;padding:12px 0}
  .pr-t{margin-top:4px}

  .labd{
    --cl:20;--ct:36;--cw:282;--ch:188;--bw:358;--bh:260;
    --row-l:33;--gap:7px;--key:38;
    aspect-ratio:358 / 260;
  }
  .ld{top:calc(var(--py) / var(--bh) * 100%)}
  .ld-wm{width:113px}
  .ld-t{font-size:10px;line-height:14px}
  .ld-big{font-size:14px;line-height:18px}
  .ld-k{display:none}
  .ld-n{display:block;flex:none;width:calc(var(--key) / (var(--bw) - var(--row-l)) * 100%);padding-left:8px;color:var(--ink)}
  .ld-legend{display:flex;flex-direction:column;gap:4px;margin-top:12px}
  .ld-legend li{display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:20px}
  .ld-legend .mono{color:var(--ink-2)}
  .lab-p{margin-top:12px;max-width:260px}

  .row .grid3:not(.lcolour):not(.lockups):not(.motifs):not(.sl){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .ph-pk{aspect-ratio:109 / 136}

  .three{gap:20px;padding:20px 0 20px}
  .stage{width:100%;aspect-ratio:358 / 224}
  .three-cap{max-width:260px}
  .three-row{padding-top:20px}

  .sys{margin-top:32px;padding-top:24px}
  .sys-strip{--h:260px;margin:0 -16px 0 0;padding-right:16px}
  .sys-track{margin-right:0}
}

/* 움직임을 줄인 자리: 바뀌는 것은 그대로, 넘어가는 시간만 뺀다 */
@media (prefers-reduced-motion:reduce){
  .rl,.rl::before,.sw-c,.seg-b{transition:none}
  .sys-strip{scroll-snap-type:none}
}