/* ── tokens ─────────────────────────────────────────────────────────
   Dark-first: the bare :root carries the night-cluster palette.
   A light OS, or an explicit light stamp, swaps to the daylight dash. */
:root {
  --ink:      #16130F;
  --panel:    #1E1A14;
  --panel-2:  #241F18;
  --line:     #3A3128;
  --line-soft:#2A241D;
  --text:     #EFE9E0;
  --muted:    #9F9488;
  --dim:      #6E6357;
  --amber:    #F0A93B;
  --amber-dim:#8A6220;
  --ice:      #7FB6C9;
  --ice-dim:  #47697A;
  --ok:       #6FBF73;
  --shadow:   0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.9);

  --f-disp: "Saira Condensed", "Arial Narrow", Helvetica, sans-serif;
  --f-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink:      #F4EFE6;
    --panel:    #EAE3D6;
    --panel-2:  #E1D9C9;
    --line:     #C3B6A0;
    --line-soft:#D7CDB9;
    --text:     #1A1611;
    --muted:    #675D50;
    --dim:      #8C8170;
    --amber:    #9C5D0C;
    --amber-dim:#C79A55;
    --ice:      #275F74;
    --ice-dim:  #9BB9C4;
    --ok:       #37703C;
    --shadow:   0 1px 0 rgba(255,255,255,.6), 0 14px 30px -22px rgba(60,45,20,.55);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink:      #F4EFE6;
  --panel:    #EAE3D6;
  --panel-2:  #E1D9C9;
  --line:     #C3B6A0;
  --line-soft:#D7CDB9;
  --text:     #1A1611;
  --muted:    #675D50;
  --dim:      #8C8170;
  --amber:    #9C5D0C;
  --amber-dim:#C79A55;
  --ice:      #275F74;
  --ice-dim:  #9BB9C4;
  --ok:       #37703C;
  --shadow:   0 1px 0 rgba(255,255,255,.6), 0 14px 30px -22px rgba(60,45,20,.55);
  color-scheme: light;
}

/* ── base ───────────────────────────────────────────────────────── */
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* ★ 한국어 줄바꿈 ★ 이게 없으면 브라우저가 음절 아무 데서나 자른다 —
     「계기판까지 가져옵니 / 다.」 처럼 낱말 한가운데가 끊긴다.
     keep-all 은 CJK 를 띄어쓰기(어절)에서만 끊게 한다.
     대신 끊을 데가 없는 긴 문자열(주소·파일명)은 통째로 삐져나가므로
     overflow-wrap 으로 그때만 풀어 준다. 둘은 짝이다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 영어는 낱말 한가운데서 끊기진 않지만, 줄 끝에 낱말 하나만 덩그러니
     남는다(「… already knows, in」). pretty 가 마지막 줄을 보고 앞 줄을
     다시 나눈다. 한국어에도 같이 듣는다. 못 알아듣는 브라우저는 그냥
     지금처럼 나눈다 — 깨지지 않는다.
     제목은 balance 가 낫다(짧은 글줄을 고르게) — 아래에서 덮어쓴다. */
  text-wrap: pretty;

}
* { box-sizing: border-box; }
/* section is display:grid, so the UA's [hidden] rule needs reinforcing
   for the tab panels to actually hide when served standalone. */
[hidden] { display: none !important; }
a { color: var(--text); text-decoration-color: var(--amber-dim); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px 96px; }

/* ── topbar ─────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0 14px; border-bottom: 1px solid var(--line-soft);
}
.mark {
  font-family: var(--f-disp); font-weight: 700; font-size: 19px;
  letter-spacing: .10em; text-transform: uppercase;
}
.mark em { font-style: normal; color: var(--amber); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tools button {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); padding: 6px 11px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tools button:hover { color: var(--text); border-color: var(--amber-dim); }
/* ☕ 후원 — 맨 위 줄에서도 눈에 띄라고 깜빡인다(탭줄에 있을 때와 같은 규칙). */
.tools button.coffee { color: var(--amber); border-color: var(--amber-dim); animation: bl-coffee 1s step-end infinite; }
.tools button.coffee:hover { animation: none; background: var(--amber); color: var(--ink); border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .tools button.coffee { animation: none; } }
/* 밖으로 나가는 링크. 단추가 아니라 링크다 — 옷은 같이 입히되 누르면 다른
   데로 간다는 것이 보이게 아이콘을 앞에 둔다. 유튜브와 네이버 카페 둘이라
   이름을 갈래(.yt)가 아니라 쓰임새(.out)로 붙였다. */
.tools .out {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); padding: 6px 11px;
  transition: color .15s, border-color .15s;
}
.tools .out:hover { color: var(--text); border-color: var(--amber-dim); text-decoration: none; }
.tools .out svg { display: block; flex: none; }
.tools button[aria-pressed="true"] { color: var(--ink); background: var(--amber); border-color: var(--amber); }

/* 출시 띠. 계기판 문법대로 각진 테두리에 호박색 — 첫 화면에서 한 줄만 튄다.
   누르면 다운로드 탭으로 간다(링크가 아니라 탭이라 스크립트가 받는다). */
.launch {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin: 18px 0 0; padding: 13px 18px; text-decoration: none;
  border: 1px solid var(--amber-dim); background: linear-gradient(
    90deg, rgba(240,169,59,.13), rgba(240,169,59,.03) 60%, transparent);
  transition: border-color .15s, background .15s;
}
.launch:hover { border-color: var(--amber); text-decoration: none; }
.launch .tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); background: var(--amber);
  padding: 3px 8px;
}
.launch b {
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(19px, 3.4vw, 26px);
  letter-spacing: .02em; text-transform: uppercase; color: var(--text);
}
.launch b span + span { color: var(--amber); }
.launch .go {
  margin-left: auto; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--amber);
}
@media (max-width: 560px) { .launch .go { margin-left: 0; } }

/* ── hero (stays put; the tabs below it change) ─────────────────── */
.hero { padding: 52px 0 8px; }
.hero h1 {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(44px, 8.6vw, 96px); line-height: .94;
  letter-spacing: .005em; text-transform: uppercase;
  margin: 0 0 22px; text-wrap: balance;
}
.hero h1 .l2 { display: block; color: var(--amber); }
/* 한 줄짜리 제목. 96px 에서는 「새로운 경험을 펼치는 홈 화면」이 1032px 을
   넘어 어차피 두 줄이 된다 — 한 줄로 두려면 글자를 줄여야 한다.
   폰에서는 그래도 접히는데, text-wrap: balance 가 고르게 나눈다. */
.hero h1.one { font-size: clamp(30px, 5.1vw, 53px); }
.hero h1.one .l2 { display: inline; }
.lede {
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5;
  max-width: 44ch; color: var(--text); margin: 0 0 26px;
}
.specstrip {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--dim); text-transform: uppercase;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
}
.specstrip b { color: var(--muted); font-weight: 500; }

/* 헤더 밑 한 줄: 방금 올라온 앱. 누르면 다운로드 탭의 그 칸으로 간다. */
.freshbar {
  display: flex; align-items: baseline; gap: 12px 16px;
  padding: 8px 0 12px; margin: 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: 13px;
  white-space: nowrap; overflow-x: auto;
}
.freshbar .lab {
  flex: none;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber);
}
.freshbar a {
  color: var(--ice); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.freshbar a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.freshbar .sep { color: var(--dim); }

/* ── cluster drawing ────────────────────────────────────────────── */
.heroshot {
  margin: 22px 0 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.heroshot img { display: block; width: 100%; height: auto; }
.cap {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em;
  color: var(--dim); text-transform: uppercase; padding-bottom: 8px;
}

/* ── tabs ───────────────────────────────────────────────────────── */
.tabs {
  display: flex; margin: 30px 0 0;
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
/* ★2026-09-19★ 탭이 **페이지**가 됐다(web/build.py) — 전부 링크다.
   지금 보고 있는 쪽은 aria-current 로 표시한다. */
.tabs .tablink {
  font-family: var(--f-disp); font-weight: 600; font-size: 19px;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  border-bottom: 2px solid transparent; text-decoration: none;
  color: var(--dim); padding: 12px 24px 11px; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tabs .tablink:first-child { padding-left: 0; }
.tabs .tablink:hover { color: var(--text); text-decoration: none; }
.tabs .tablink[aria-current="page"] {
  color: var(--amber); border-bottom-color: var(--amber);
}
/* 사이트 밖으로 나가는 것(매뉴얼·질문)에만 화살표를 붙인다 — 같은 집 안에서
   옮겨 다니는 것과 밖으로 나가는 것은 다르다. */
.tabs .tablink.out::after { content: " \2197"; font-size: 15px; color: var(--amber-dim); }
@keyframes bl-coffee { 0% { opacity: 1; } 50% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .tabs button.coffee { animation: none; } }

/* 안쪽 탭(다운로드 쪽에서 차 고르기). 바깥 탭줄과 **다른 옷**이다 — 같은 모양이면
   지금 어느 층에 있는지 헷갈린다. 여기는 알약, 바깥은 밑줄. */
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.subtabs .sub {
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); padding: 9px 16px;
  transition: color .15s, border-color .15s, background .15s;
}
.subtabs .sub:hover { color: var(--text); border-color: var(--amber-dim); text-decoration: none; }
.subtabs .sub[aria-current="true"] {
  color: var(--ink); background: var(--amber); border-color: var(--amber);
}
/* 자바스크립트가 없으면 셋이 다 보인다 — 감추는 것은 스크립트가 한다. */
.subpanel > section:first-of-type { padding-top: 42px; }

/* ── section scaffolding: gauge graduation gutter ───────────────── */
section { display: grid; grid-template-columns: 96px 1fr; gap: 0; padding-top: 54px; }
/* ★ 격자 칸은 기본이 min-width:auto 다 ★ 그래서 **안에 넓은 것이 들어오면
   칸이 그만큼 늘어난다.** 후원자 띠는 width:max-content 라(띠가 돌려면
   그래야 한다) 칸을 밀어내 페이지 폭을 통째로 뚫고 나갔다.
   0 으로 눌러야 그 안의 overflow:hidden 이 제 일을 한다. */
section > div { min-width: 0; }
[role="tabpanel"] > section:first-of-type { padding-top: 42px; }
.gutter { position: relative; padding-right: 24px; }
.gutter::after {
  content: ""; position: absolute; top: 6px; right: 0; bottom: 8px; width: 9px;
  border-right: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px 13px);
}
.gutter span {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim); display: block; padding-top: 4px;
}
h2 {
  font-family: var(--f-disp); font-weight: 600; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 40px); line-height: 1.02; letter-spacing: .02em;
  margin: 0 0 6px; text-wrap: balance;
}
.sub { color: var(--muted); max-width: 62ch; margin: 0 0 26px; }

/* ── real-car photographs ───────────────────────────────────────
   Each frame takes one photograph from the car. Until one is in,
   the frame stands empty with viewfinder marks rather than a
   stand-in image. To fill one, drop an <img> inside .frame. */
.shots { display: grid; gap: 26px; margin: 0 0 26px; padding: 0; }
figure.shot { margin: 0; min-width: 0; }
.frame {
  aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center;
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 계기판은 2.67:1 이다. 16:9 틀에 cover 로 넣으면 **양끝 다이얼이 잘린다** —
   다섯 개가 다 보이지 않으면 실을 이유가 없는 사진이다. 그 한 장만 제 비율로. */
/* 드라이브 모드 넉 장을 세로로 붙인 사진. 16:9 틀에 넣으면 위아래가 잘린다. */
figure.shot.tall .frame { aspect-ratio: 880 / 1425; }
.frame .ph {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
/* viewfinder corner marks — a frame waiting for a photograph */
.frame::before, .frame::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 1px solid var(--amber-dim); pointer-events: none;
}
.frame::before { top: 9px;    left: 9px;  border-right: 0; border-bottom: 0; }
.frame::after  { bottom: 9px; right: 9px; border-left: 0;  border-top: 0; }
.frame:has(img)::before, .frame:has(img)::after { display: none; }
figcaption {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding-top: 10px;
}

/* 묶음 제목(2026-09-15 사용자 「기능소개가 길어진다, 그룹화」). 사진이 아홉
   장이라 죽 늘어놓으면 어디까지가 한 이야기인지 안 보인다. 제목은 사진보다
   작고 흐리게 둔다 — 여기서 읽을 것은 사진이지 제목이 아니다. */
.shots .group {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); font-weight: 400;
  margin: 12px 0 -10px; padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.shots .group:first-child { margin-top: 0; }
/* 계기판 사진은 2.64:1 이다. 16:9 틀에 cover 로 넣으면 **양끝이 잘린다** —
   왼쪽 카메라 원과 오른쪽 끝 다이얼이 함께 보여야 이 사진의 뜻이 산다. */
figure.shot.wide .frame { aspect-ratio: 1304 / 494; }
/* 아직 정식 빌드에 없는 것. 사진 자리와 설명에 같이 붙여, 지금 받으면
   들어 있는 줄 알고 찾다가 없어서 헤매는 일을 막는다. */
.shot .soon {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--amber-dim); color: var(--amber);
  font-size: 10px; letter-spacing: .12em; vertical-align: 2px;
}

/* ── download ───────────────────────────────────────────────────── */
.dl-panel {
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--shadow); padding: 26px 28px 24px;
}
.dl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.ver {
  font-family: var(--f-disp); font-weight: 700; font-size: 58px; line-height: .95;
  letter-spacing: .01em; color: var(--amber); font-variant-numeric: tabular-nums;
}
.chip {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--line);
  color: var(--muted); padding: 4px 9px;
}
.chip.live { color: var(--ok); border-color: currentColor; }
/* 정식과 디버깅 중 **나중에 올라온 쪽**에만 붙는다. 두 칸을 나란히 두면
   어느 것이 새 것인지가 버전 번호만으로는 안 보인다 — 같은 1.52 라도
   디버깅이 하루 뒤일 수 있다. */
.chip.newest { color: var(--amber); border-color: currentColor; }
/* 올라온 시각. 잠근 빌드는 하루에도 여러 번 올라가서 날짜만으로는 못 가린다. */
.chip.when { border-style: dashed; }
.dl-panel.test { border-color: var(--amber-dim); margin-top: 18px; }
.dl-panel.test .ver { color: var(--ice); }
.meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 14px 22px; margin: 22px 0 20px;
  padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.meta div { min-width: 0; }
.meta dt {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 3px;
}
.meta dd {
  margin: 0; font-family: var(--f-mono); font-size: 13px; color: var(--text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.getrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.getrow .alt {
  display: inline-block;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line);
}
.getrow .alt:hover { color: var(--text); border-bottom-color: var(--amber-dim); }
.get {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-disp); font-weight: 600; font-size: 20px;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--amber); color: #16130F; border: 1px solid var(--amber);
  padding: 12px 26px; text-decoration: none;
  transition: filter .15s;
}
.get:hover { filter: brightness(1.12); text-decoration: none; }
/* 메일 주소는 대문자로 바꾸지 않는다 — 주소는 적힌 그대로가 맞다(단추 글씨는
   기본이 대문자다). 글꼴도 모노로 둔다: @ 와 . 이 어디서 끊기는지 보인다. */
.get .addr {
  font-family: var(--f-mono); font-weight: 400; font-size: 16px;
  text-transform: none; letter-spacing: .02em;
}
.get.ghost { background: transparent; color: var(--amber); }
.get.ghost:hover { background: var(--amber); color: #16130F; }
.get svg { display: block; }
.urlbox {
  font-family: var(--f-mono); font-size: 12px; color: var(--muted);
  border: 1px dashed var(--line); padding: 9px 12px;
  overflow-wrap: anywhere; flex: 1 1 260px; min-width: 0;
}
.note { color: var(--dim); font-size: 13.5px; margin: 16px 0 0; max-width: 64ch; }
.dl-panel .notes {
  white-space: pre-wrap;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 68ch;
  padding: 12px 14px;
  border-left: 3px solid var(--ice);
}
.note b { color: var(--text); font-weight: 500; }

/* 잠근 빌드 — 다운키를 아는 사람만. 정식 칸과 한눈에 구별돼야 해서
   테두리 색을 달리하고 번호 자리에 자물쇠 문구를 둔다. */
.dl-panel.locked { border-color: var(--ice); }
.dl-panel.locked .ver { color: var(--ice); font-size: 34px; letter-spacing: .04em; }
/* 잠긴 채로 보여주는 줄 — 받는 단추가 없으니 크게 세우지 않고 눕힌다.
   제보함 쪽(_public_base.html 의 .glist)과 같은 모양이다. */
.glist { display: grid; gap: 9px; margin: 17px 0 0; }
.grow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 11px; }
.grow .gk {
  font-family: var(--f-disp); font-weight: 600; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  min-width: 62px;
}
.grow .gv {
  font-family: var(--f-disp); font-weight: 700; font-size: 27px; line-height: 1;
  letter-spacing: .01em; color: var(--ice); font-variant-numeric: tabular-nums;
}
.keyrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.keyrow input {
  font-family: var(--f-mono); font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); padding: 12px 14px;
  flex: 0 1 230px; min-width: 0;
}
.keyrow label {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim);
}
.keyrow input::placeholder { color: var(--dim); }
.keyrow input:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.mailrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  margin: 18px 0 0;
}
.mailrow > label:not(.hp) {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim);
}
.mailrow input[type="email"] {
  font-family: var(--f-mono); font-size: 15px;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); padding: 12px 14px;
  flex: 1 1 240px; min-width: 0;
}
.mailrow input[type="email"]::placeholder { color: var(--dim); }
.mailrow input[type="email"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mailrow { position: relative; }
.mailrow .hp {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.mailrow .msg { flex: 1 1 100%; color: var(--muted); font-size: 14px; margin: 0; }
.mailrow .msg.ok { color: var(--ok); }
.mailrow .msg.bad { color: var(--bad); }
.pipa {
  margin: 16px 0 0; padding: 13px 15px 12px;
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: 13px; color: var(--muted); max-width: 62ch;
}
.pipa b { display: block; color: var(--text); font-weight: 500; margin: 0 0 6px; }
.pipa p { margin: 0 0 8px; }
.pipa ul { margin: 0 0 8px; padding: 0 0 0 18px; }
.pipa li { margin: 0 0 4px; }
.pipa p:last-child { margin: 0; }
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 0; max-width: 62ch; color: var(--text); font-size: 14px;
  cursor: pointer;
}
.consent input { margin-top: 3px; flex: none; accent-color: var(--amber); }
button.get { cursor: pointer; }
.get.ice { background: var(--ice); border-color: var(--ice); color: #16130F; }
.get.ice:hover { filter: brightness(1.12); }

/* ── numbered sequences: install steps, report checklist ────────── */
ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
ol.steps li {
  counter-increment: s; position: relative; padding: 0 0 20px 46px;
  border-left: 1px solid var(--line-soft); margin-left: 13px;
}
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: -13px; top: 0;
  font-family: var(--f-mono); font-size: 11px; color: var(--amber);
  background: var(--ink); width: 26px; text-align: center;
}
ol.steps h4 {
  font-family: var(--f-disp); font-weight: 600; font-size: 18px;
  margin: -2px 0 5px; letter-spacing: .015em;
}
ol.steps p { margin: 0 0 8px; color: var(--muted); font-size: 15px; max-width: 58ch; }
pre {
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.75;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  padding: 11px 14px; margin: 0; overflow-x: auto; color: var(--text);
}

/* ── 설치: 두 갈래 ──────────────────────────────────────────────── */
h4.way {
  font-family: var(--f-disp); font-weight: 600; font-size: 20px;
  letter-spacing: .02em; color: var(--text); margin: 30px 0 4px;
}
h4.way:first-of-type { margin-top: 22px; }
ul.apps { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
ul.apps li {
  color: var(--muted); font-size: 14.6px; max-width: 66ch;
  padding-left: 20px; position: relative;
}
ul.apps li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 1px; background: var(--amber-dim);
}
ul.apps a {
  font-family: var(--f-mono); font-size: 14px; color: var(--text);
  text-decoration-color: var(--amber-dim);
}
ul.apps .on {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); padding: 2px 7px; margin-left: 8px;
  white-space: nowrap;
}
ul.apps li > span:last-child { display: block; padding-top: 4px; }

/* ── 따로 쓰는 앱 ────────────────────────────────────────────────
   본편(.dl-panel)보다 가볍게. 받기 단추 하나와 값 몇 개면 된다. */
.sidelist { display: grid; gap: 16px; }
.side {
  border: 1px solid var(--line); background: var(--panel);
  padding: 20px 22px 18px;
}
.side .head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 12px;
  padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--line-soft);
}
.side .head b {
  font-family: var(--f-disp); font-weight: 600; font-size: 21px;
  letter-spacing: .03em; color: var(--text);
}
.side .head .ver {
  font-family: var(--f-disp); font-weight: 700; font-size: 27px; line-height: 1;
  color: var(--ice); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.side p { color: var(--muted); font-size: 14.6px; margin: 0 0 16px; max-width: 64ch; }
.side .notes {
  white-space: pre-wrap;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 68ch;
  padding: 12px 14px;
  border-left: 3px solid var(--ice);
  background: var(--panel);
}
.side .warn { font-size: 13.5px; }
/* 곁들이 링크(정식판으로 돌아가기). 받기 단추와 나란히 두되 단추처럼 보이지
   않게 — 기본은 시험판이고 이건 물러설 길이다. */
.side .alt {
  display: inline-block; margin-left: 14px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line);
}
.side .alt:hover { color: var(--text); border-bottom-color: var(--amber-dim); }
.side .alt span + span { color: var(--dim); margin-left: 6px; }

/* ── 매뉴얼 ─────────────────────────────────────────────────────── */
.manuals { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.manual-soon {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em;
  color: var(--dim); border: 1px dashed var(--line);
  padding: 11px 16px; text-decoration: none; display: inline-flex;
  align-items: baseline; gap: 9px;
}
.manual-soon b { color: var(--muted); font-weight: 500; }
.manual-soon:hover { border-color: var(--amber-dim); color: var(--muted); }

/* ── credits ────────────────────────────────────────────────────── */
ul.credits { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
ul.credits li {
  color: var(--muted); font-size: 14.6px; max-width: 68ch;
  padding-left: 20px; position: relative;
}
ul.credits li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 9px; height: 1px; background: var(--amber-dim);
}
ul.credits a {
  font-family: var(--f-mono); font-size: 13.5px; color: var(--text);
  text-decoration-color: var(--amber-dim); overflow-wrap: anywhere;
}
ul.credits .by, ul.credits .lic {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--dim);
  border: 1px solid var(--line); padding: 2px 7px; margin-left: 7px;
  white-space: nowrap;
}
/* ★ 작성자 칸은 대문자로 누르지 않는다 ★ 사람의 이름이다 —
   sunlixWhyNotAvailable 을 SUNLIXWHYNOTAVAILABLE 로 바꿔 놓을 일이 아니다.
   라이선스 이름은 원래 대문자라 그냥 둔다. */
ul.credits .lic {
  color: var(--ice); border-color: currentColor;
  letter-spacing: .1em; font-size: 10.5px;
}
ul.credits li span[data-ko], ul.credits li > span:last-child { display: block; padding-top: 5px; }

/* ── 후원 모달 ──────────────────────────────────────────────────── */
#supportModal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0; border: 1px solid var(--line); background: var(--ink);
  color: var(--text); box-shadow: var(--shadow);
  /* <dialog> 는 기본이 가운데 위쪽이다. 가운데로 세운다. */
  margin: auto;
  overflow: hidden;
}
#supportModal::backdrop { background: rgba(0, 0, 0, .72); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
  position: sticky; top: 0; background: var(--ink); z-index: 1;
}
.modal-head button {
  font-family: var(--f-body); font-size: 22px; line-height: 1;
  background: transparent; border: 0; color: var(--muted);
  padding: 2px 6px; cursor: pointer;
}
.modal-head button:hover { color: var(--amber); }
/* 알맹이는 길다(QR 넉 장) — 모달 안에서 구른다. */
.modal-body {
  padding: 22px 20px 26px;
  overflow-y: auto; max-height: calc(100vh - 64px - 46px);
}
.modal-body h2 { margin-top: 0; }

/* ── 후원 ───────────────────────────────────────────────────────── */
.coffee { display: flex; flex-wrap: wrap; gap: 22px 26px; align-items: flex-start; }
.coffee img {
  width: 208px; height: 208px; display: block; flex: none;
  border: 1px solid var(--line); background: #fff; padding: 9px;
  /* QR 은 흐려지면 안 읽힌다 — 줄일 때 뭉개지 말라고 일러 둔다. */
  image-rendering: -webkit-optimize-contrast;
}
.coffee > div { flex: 1 1 300px; min-width: 0; }
/* 후원해 주신 분들이 지나가는 띠. 제보함 첫 화면의 「고쳤습니다」 띠와 같은
   수법이다 — 같은 벌을 두 번 놓고 -50% 만큼 밀면 끊김 없이 돈다. */
.thanks { margin: 0 0 26px; max-width: 100%; min-width: 0; }
.thanks .lab {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 9px;
}
.thanks .strip {
  overflow: hidden; border: 1px solid var(--line); background: var(--panel);
  padding: 11px 0;
}
.thanks .track {
  display: flex; width: max-content;
  animation: bl-thanks var(--dur, 40s) linear infinite;
}
/* 흐르는 글자는 오래 못 읽는다 — 올려두면 멈춘다. */
.thanks:hover .track, .thanks:focus-within .track { animation-play-state: paused; }
.thanks .who {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0 16px; white-space: nowrap;
  font-size: 14px; color: var(--text);
}
.thanks .who .via {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}
.thanks .who .sep { color: var(--line); padding-left: 16px; }
@keyframes bl-thanks { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 움직임을 싫어하는 설정이면 세워 둔다 — 넘치는 만큼은 손으로 밀 수 있게. */
@media (prefers-reduced-motion: reduce) {
  .thanks .track { animation: none; }
  .thanks .strip { overflow-x: auto; }
}

/* 칸 사이 여백. 인라인으로 박지 않는 이유: 언어에 따라 커피 칸이 맨 위로도
   맨 아래로도 가므로 「첫 칸엔 여백 없음」이 자리에 따라 달라져야 한다. */
.modal-body .coffee + .coffee { margin-top: 22px; }

/* ── notice ─────────────────────────────────────────────────────── */
.notice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.notice li {
  color: var(--muted); font-size: 14.6px; max-width: 68ch;
  padding-left: 20px; position: relative;
}
.notice li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--amber-dim);
}
.notice li b { color: var(--text); font-weight: 500; }

footer {
  margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em;
  color: var(--dim); text-transform: uppercase;
}
/* 메일 주소는 대문자로 바꾸지 않는다 — 주소는 적힌 그대로가 맞다. */
footer a, footer button {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 0;
  text-decoration: none; text-transform: none; cursor: pointer; letter-spacing: inherit;
}
footer a:hover, footer button:hover { color: var(--amber); }
footer noscript b, .addr b { font-weight: 400; color: var(--dim); }

/* ── narrow ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  section, [role="tabpanel"] > section:first-of-type {
    grid-template-columns: 1fr; padding-top: 40px;
  }
  .gutter { padding: 0 0 10px; }
  .gutter::after {
    top: auto; right: auto; bottom: 0; left: 0; width: auto; height: 9px;
    border-right: 0; border-bottom: 1px solid var(--line);
    background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 13px);
  }
  .tabs button { font-size: 17px; padding: 11px 16px 10px; }
  .dl-panel { padding: 20px 18px; }
  .ver { font-size: 46px; }
  /* 차 안에서 엄지로 누른다 — 입력칸과 단추가 한 줄을 다 쓴다. */
  .keyrow input { flex: 1 1 100%; }
  .keyrow .get { width: 100%; justify-content: center; }
}