/* 반죽 — '창가 도마'(16비트 코지 도트).
   색은 전부 앱 lib/core/design/app_theme.dart Palette 값이다(사이트만의 색 없음 — 출처 줄은 CLAUDE.md).
   틀(panel·button·window·plaque·ribbon·scroll·bubble·tag)은 pixel.dart FramePainter 를 box-shadow 로 옮겼다:
   먹 테두리는 네 방향 1도트 그림자라 모서리 한 도트가 깎인다.
   도트 1개 = --u(폰 3px, 넓은 화면 4px). 도트 글꼴은 설계 크기의 정수배만 쓴다
   (갈무리14 = 15px, 갈무리11 Bold = 12px, DotGothic16 = 16px). */
@font-face {
  font-family: "Galmuri14";
  src: url("./fonts/Galmuri14.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Galmuri11B";
  src: url("./fonts/Galmuri11-Bold.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DotGothic16";
  src: url("./fonts/DotGothic16-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* 먹·기본 */
  --ink: #2e2018;
  /* 램프(어두운 → 밝은) */
  --wood-0: #3f2615;
  --wood-1: #5c3820;
  --wood-2: #7a4b28;
  --wood-3: #9a6536;
  --wood-4: #b98150;
  --wood-5: #d29c66;
  --stone-0: #2f241d;
  --stone-1: #3b2e26;
  --stone-2: #48392f;
  --stone-3: #574537;
  --stone-4: #6a5443;
  --parch-0: #cdb68a;
  --parch-1: #e2cfa6;
  --parch-2: #f2e4c4;
  --parch-3: #fcf5e3;
  --sky-0: #8db3c7;
  --sky-3: #cde1e7;
  --gold-2: #e5ae45;
  --gold-3: #f3cf72;
  /* 지붕·리본·강조 */
  --red: #c8553d;
  --red-deep: #a8412e;
  --red-dark: #8e3426;
  --cream: #fff4dc;
  /* 글자(앱 대비 4.5:1 짝) */
  --text: var(--ink);
  --text-soft: #5c3820;
  --text-year: #a13c29;
  --text-ok: #2f6a1f;
  --text-on-wood: #fcf5e3;
  --text-on-wood-soft: #dccbb0;
  --text-gold-on-wood: #f3cf72;
  /* 틀 파생색 — pixel.dart 의 Color.lerp 결과 */
  --btn-hi: #f6ecd4;        /* _button: lerp(parch[2], white, .28) */
  --btn-hi-red: #c07668;    /* _button primary: lerp(redDeep, white, .28) */
  --tag-hi: #f7edd9;        /* paintTag: lerp(parch[2], white, .35) */
  --tag-lo: #c7b99e;        /* paintTag: lerp(parch[2], ink, .22) */

  --u: 3px;
  --u2: calc(var(--u) * 2);
  --nu: calc(var(--u) * -1);
  --ink-edge: 0 var(--nu) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), var(--nu) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink);
  --font-body: "Galmuri14", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-bold: "Galmuri11B", "Galmuri14", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-num: "DotGothic16", "Galmuri14", monospace;
  --maxw: 1040px;
}
@media (min-width: 720px) {
  :root {
    --u: 4px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* 돌 조리대 — 점박이 + 창에서 비스듬히 떨어지는 햇살 두 줄기(scene.dart sunBeam) */
body {
  margin: 0;
  color: var(--text-on-wood);
  background-color: var(--stone-1);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' shape-rendering='crispEdges'%3E%3Cpath fill='%23574537' d='M30 0h1v1h-1zM38 1h1v1h-1zM2 2h1v1h-1zM14 2h1v1h-1zM26 2h1v1h-1zM1 3h1v1h-1zM38 3h1v1h-1zM28 4h1v1h-1zM28 7h1v1h-1zM33 7h1v1h-1zM10 9h1v1h-1zM0 10h1v1h-1zM3 10h1v1h-1zM35 12h1v1h-1zM15 13h1v1h-1zM22 13h1v1h-1zM33 16h1v1h-1zM16 18h1v1h-1zM25 18h1v1h-1zM24 19h1v1h-1zM2 20h1v1h-1zM17 21h2v1h-2zM34 23h1v1h-1zM6 25h1v1h-1zM24 25h1v1h-1zM8 26h1v1h-1zM5 28h1v1h-1zM23 28h1v1h-1zM34 29h1v1h-1zM1 30h1v1h-1zM20 38h1v1h-1zM6 39h1v1h-1z'/%3E%3C/svg%3E"),
    linear-gradient(61deg, transparent 0 18%, var(--stone-2) 18% 19.5%, var(--stone-3) 19.5% 30%, var(--stone-2) 30% 31.5%, transparent 31.5% 44%, var(--stone-2) 44% 45.5%, var(--stone-3) 45.5% 51%, var(--stone-2) 51% 52.5%, transparent 52.5%);
  background-size: calc(40 * var(--u)) calc(40 * var(--u)), 100% 1400px;
  background-repeat: repeat, no-repeat;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 27px;
  font-synthesis: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

img.px,
.spr,
.scene {
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.spr {
  --s: var(--u);
  display: inline-block;
  flex: none;
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  vertical-align: middle;
}

.sprites {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

a {
  color: inherit;
  text-underline-offset: 4px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--u) solid var(--gold-2);
  outline-offset: var(--u);
}

h1,
h2,
h3 {
  font-family: var(--font-bold);
  font-weight: 400;
  margin: 0;
}

h2 {
  font-size: 24px;
  line-height: 30px;
}

h3 {
  font-size: 24px;
  line-height: 30px;
}

p {
  margin: 0 0 12px;
}

.num {
  font-family: var(--font-num);
  font-size: 16px;
}

.wrap {
  width: min(100% - 32px, var(--maxw));
  margin-inline: auto;
}

/* ── 머리 막대: 나무 판자(pixel.dart _HeaderPainter) ── */
.site-header {
  position: relative;
  z-index: 2;
  background:
    repeating-linear-gradient(to bottom, var(--wood-3) 0 var(--u), var(--wood-2) var(--u) calc(5 * var(--u)), var(--wood-1) calc(5 * var(--u)) calc(6 * var(--u)));
  box-shadow: inset 0 calc(-3 * var(--u)) 0 0 var(--wood-4), inset 0 calc(-2 * var(--u)) 0 0 var(--wood-1), 0 var(--u) 0 0 var(--ink);
  border-bottom: 0;
  padding: calc(2 * var(--u)) 0 calc(4 * var(--u));
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text-on-wood);
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
  box-shadow: var(--ink-edge);
  margin: var(--u);
}

.brand b {
  font-family: var(--font-bold);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--text-on-wood);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  /* 글자는 크림 그대로(판자 밝은 줄 wood-3 위에서도 4.5:1), 현재 위치는 금빛 밑줄로 */
  text-decoration: underline;
  text-decoration-color: var(--text-gold-on-wood);
  text-decoration-thickness: var(--u);
}

/* ── 창 띠: 하늘(디더 램프) + 구름 + 창턱 6줄(scene.dart) ── */
.sky {
  position: relative;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 18' shape-rendering='crispEdges'%3E%3Cpath fill='%23a0c2d2' d='M0 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM5 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h8v1h-8zM0 5h8v1h-8zM0 6h2v1h-2zM3 6h3v1h-3zM7 6h1v1h-1zM0 7h8v1h-8zM1 8h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM7 8h1v1h-1zM0 9h1v1h-1zM2 9h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM0 11h1v1h-1zM4 11h1v1h-1z'/%3E%3Cpath fill='%238db3c7' d='M1 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM2 1h3v1h-3zM6 1h2v1h-2zM1 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1z'/%3E%3Cpath fill='%23b6d1dc' d='M2 6h1v1h-1zM6 6h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM4 8h1v1h-1zM6 8h1v1h-1zM1 9h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM0 10h8v1h-8zM1 11h3v1h-3zM5 11h3v1h-3zM0 12h8v1h-8zM0 13h8v1h-8zM1 14h1v1h-1zM3 14h1v1h-1zM5 14h1v1h-1zM7 14h1v1h-1zM0 15h1v1h-1zM2 15h1v1h-1zM4 15h1v1h-1zM6 15h1v1h-1zM3 16h1v1h-1zM7 16h1v1h-1zM0 17h1v1h-1zM2 17h1v1h-1zM4 17h1v1h-1zM6 17h1v1h-1z'/%3E%3Cpath fill='%23cde1e7' d='M0 14h1v1h-1zM2 14h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM1 15h1v1h-1zM3 15h1v1h-1zM5 15h1v1h-1zM7 15h1v1h-1zM0 16h3v1h-3zM4 16h3v1h-3zM1 17h1v1h-1zM3 17h1v1h-1zM5 17h1v1h-1zM7 17h1v1h-1z'/%3E%3C/svg%3E") repeat-x 0 0 / calc(8 * var(--u)) calc(18 * var(--u)), var(--sky-3);
  border-left: var(--u2) solid var(--wood-3);
  border-right: var(--u2) solid var(--wood-3);
  box-shadow: inset var(--u) 0 0 0 var(--wood-1), inset var(--nu) 0 0 0 var(--wood-1);
  padding: calc(6 * var(--u)) 0 calc(6 * var(--u) + 14px);
}

.sky::after {
  /* 창턱: wood5 · wood4 · wood4 · wood3 · wood1 · 먹 */
  content: "";
  position: absolute;
  left: calc(var(--u2) * -1);
  right: calc(var(--u2) * -1);
  bottom: 0;
  height: calc(6 * var(--u));
  background: linear-gradient(to bottom, var(--wood-5) 0 16.66%, var(--wood-4) 16.66% 50%, var(--wood-3) 50% 66.66%, var(--wood-1) 66.66% 83.33%, var(--ink) 83.33%);
}

.sky .cloud {
  position: absolute;
  --s: var(--u);
}

.sky .wrap {
  position: relative;
  z-index: 1;
}

/* ── 틀 ── */
.panel {
  position: relative;
  background: var(--parch-2);
  color: var(--text);
  margin: var(--u);
  padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u));
  box-shadow:
    inset var(--u) var(--u) 0 0 var(--wood-5),
    inset var(--nu) var(--nu) 0 0 var(--wood-2),
    inset 0 calc(-2 * var(--u)) 0 0 var(--parch-1),
    var(--ink-edge);
}

.window {
  position: relative;
  background: var(--wood-3);
  color: var(--text);
  margin: var(--u);
  padding: calc(3 * var(--u));
  box-shadow: inset var(--u) var(--u) 0 0 var(--wood-5), inset var(--nu) var(--nu) 0 0 var(--wood-1), var(--ink-edge);
}

.window-body {
  background: var(--parch-2);
  outline: var(--u) solid var(--ink);
  box-shadow: inset 0 var(--u) 0 0 var(--parch-3), inset 0 var(--nu) 0 0 var(--parch-1);
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(7 * var(--u));
}

.plaque {
  display: inline-block;
  position: relative;
  color: var(--text-on-wood);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6' shape-rendering='crispEdges'%3E%3Cpath fill='%237a4b28' d='M9 0h4v1h-4zM7 3h4v1h-4z'/%3E%3C/svg%3E") 0 calc(2 * var(--u)) / calc(24 * var(--u)) calc(6 * var(--u)), var(--wood-3);
  margin: var(--u);
  padding: calc(3 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u));
  box-shadow:
    inset var(--u) 0 0 0 var(--wood-4),
    inset 0 var(--u) 0 0 var(--wood-5),
    inset var(--nu) var(--nu) 0 0 var(--wood-1),
    var(--ink-edge);
}

.tag {
  display: inline-block;
  color: var(--text);
  background: var(--parch-2);
  margin: var(--u);
  padding: calc(1 * var(--u)) calc(3 * var(--u));
  line-height: 24px;
  box-shadow: inset 0 var(--u) 0 0 var(--tag-hi), inset 0 var(--nu) 0 0 var(--tag-lo), var(--ink-edge);
  white-space: nowrap;
}

.tag.num {
  line-height: 24px;
}

/* 리본(기록 달성 토스트) — 가운데 띠 + 양쪽 제비꼬리(띠보다 2도트 아래) */
.ribbon {
  position: relative;
  display: inline-block;
  color: var(--cream);
  background: var(--red-deep);
  height: calc(11 * var(--u));
  line-height: calc(11 * var(--u));
  padding: 0 calc(3 * var(--u));
  margin: var(--u) calc(6 * var(--u)) calc(3 * var(--u));
  box-shadow: inset 0 var(--u) 0 0 var(--red), inset 0 var(--nu) 0 0 var(--red-dark), 0 var(--nu) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink);
  white-space: nowrap;
}

.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  top: var(--u);
  width: calc(6 * var(--u));
  height: calc(13 * var(--u));
  z-index: -1;
}

.ribbon::before {
  left: calc(-6 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 13' shape-rendering='crispEdges'%3E%3Cpath fill='%232e2018' d='M0 0h6v1h-6zM0 1h1v1h-1zM0 2h1v1h-1zM0 3h1v1h-1zM0 4h1v1h-1zM1 5h1v1h-1zM2 6h4v1h-4zM1 7h1v1h-1zM0 8h1v1h-1zM0 9h1v1h-1zM0 10h1v1h-1zM0 11h1v1h-1zM0 12h6v1h-6z'/%3E%3Cpath fill='%238e3426' d='M1 1h5v1h-5zM1 2h5v1h-5zM1 3h5v1h-5zM1 4h5v1h-5zM2 5h4v1h-4zM2 7h4v1h-4zM1 8h5v1h-5zM1 9h5v1h-5zM1 10h5v1h-5zM1 11h5v1h-5z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

.ribbon::after {
  right: calc(-6 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 13' shape-rendering='crispEdges'%3E%3Cpath fill='%232e2018' d='M0 0h6v1h-6zM5 1h1v1h-1zM5 2h1v1h-1zM5 3h1v1h-1zM5 4h1v1h-1zM4 5h1v1h-1zM0 6h4v1h-4zM4 7h1v1h-1zM5 8h1v1h-1zM5 9h1v1h-1zM5 10h1v1h-1zM5 11h1v1h-1zM0 12h6v1h-6z'/%3E%3Cpath fill='%238e3426' d='M0 1h5v1h-5zM0 2h5v1h-5zM0 3h5v1h-5zM0 4h5v1h-5zM0 5h4v1h-4zM0 7h4v1h-4zM0 8h5v1h-5zM0 9h5v1h-5zM0 10h5v1h-5zM0 11h5v1h-5z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

.ribbon-wrap {
  position: relative;
  z-index: 0;
  display: inline-block;
}

/* 두루마리(사건 로그) — 먹 테두리 + 양옆 말린 종이 */
.scroll {
  color: var(--text);
  border: var(--u) solid var(--ink);
  background:
    repeating-linear-gradient(to bottom, var(--wood-4) 0 var(--u), var(--wood-3) var(--u) var(--u2)) left top / var(--u2) 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--wood-4) 0 var(--u), var(--wood-3) var(--u) var(--u2)) right top / var(--u2) 100% no-repeat,
    linear-gradient(var(--parch-3), var(--parch-3)) center top / calc(100% - 4 * var(--u)) var(--u) no-repeat,
    var(--parch-2);
  padding: calc(4 * var(--u)) calc(6 * var(--u));
}

.scroll ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scroll li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 3px 0;
}

.scroll li .spr {
  margin-top: 4px;
}

/* 말풍선(튜토리얼) — 아래 꼬리 */
.bubble {
  position: relative;
  color: var(--text);
  background: var(--parch-3);
  margin: var(--u) var(--u) calc(4 * var(--u));
  padding: calc(4 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  box-shadow: inset 0 var(--nu) 0 0 var(--parch-1), var(--ink-edge);
}

.bubble::after {
  content: "";
  position: absolute;
  left: calc(8 * var(--u));
  bottom: calc(-3 * var(--u));
  width: calc(7 * var(--u));
  height: calc(3 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 3' shape-rendering='crispEdges'%3E%3Cpath fill='%232e2018' d='M0 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM5 1h1v1h-1zM2 2h3v1h-3z'/%3E%3Cpath fill='%23e2cfa6' d='M1 0h5v1h-5z'/%3E%3Cpath fill='%23fcf5e3' d='M2 1h3v1h-3z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

/* 도트 버튼 — 누르면 1도트 내려앉는다 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 calc(5 * var(--u));
  margin: var(--u) var(--u) calc(2 * var(--u) + var(--u));
  color: var(--text);
  background: var(--parch-2);
  font: 15px/1 var(--font-body);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 var(--u) 0 0 var(--btn-hi), var(--ink-edge), 0 var(--u2) 0 0 var(--wood-1);
  transition: transform 90ms steps(1);
}

.btn:active {
  transform: translateY(var(--u));
  box-shadow: inset 0 var(--u) 0 0 var(--btn-hi), var(--ink-edge);
}

.btn-primary {
  color: var(--cream);
  background: var(--red-deep);
  box-shadow: inset 0 var(--u) 0 0 var(--btn-hi-red), var(--ink-edge), 0 var(--u2) 0 0 var(--wood-1);
}

.btn-primary:active {
  box-shadow: inset 0 var(--u) 0 0 var(--btn-hi-red), var(--ink-edge);
}

.btn[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* ── 본문 배치 ── */
main {
  display: block;
  padding-bottom: 48px;
}

section {
  margin-top: 56px;
}

.section-head {
  margin-bottom: 20px;
}

.section-head .plaque {
  margin-left: var(--u);
}

.section-lead {
  margin: 12px 0 0;
  max-width: 44em;
  color: var(--text-on-wood);
}

.grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── 첫 화면 ── */
.hero {
  margin-top: 0;
}

.hero-copy .plaque h1 {
  font-size: 48px;
  line-height: 48px;
}

.hero-copy .bubble {
  max-width: 30em;
}

.hero-copy .lead {
  color: var(--text-on-wood);
  max-width: 34em;
  margin-top: 0;
}

.scene {
  display: block;
  width: calc(100 * var(--u));
  height: auto;
  aspect-ratio: 100 / 68;
  max-width: 100%;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 16px;
}

@media (min-width: 1000px) {
  .scene {
    width: calc(100 * 5px);
  }
}

/* ── 흐름 ── */
.loop {
  counter-reset: step;
}

.loop-step h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.loop-step .step {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--text-year);
}

/* ── 핫바(선반) ── */
.shelf-bar {
  background: repeating-linear-gradient(to bottom, var(--wood-1) 0 calc(8 * var(--u)), var(--wood-0) calc(8 * var(--u)) calc(9 * var(--u)));
  box-shadow: inset 0 var(--u) 0 0 var(--wood-5), var(--ink-edge);
  margin: var(--u);
  padding: calc(4 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
  color: var(--text-on-wood);
}

.hotbar {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 12px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .hotbar {
    grid-template-columns: repeat(8, auto);
  }
}

.hotbar li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hotbar .gap-left {
  margin-left: var(--u);
}

.slot {
  display: grid;
  place-items: center;
  width: calc(11 * 5px);
  height: calc(11 * 5px);
  margin: var(--u) var(--u) calc(var(--u) * 3);
  background: var(--parch-2);
  box-shadow: inset 0 var(--u) 0 0 var(--btn-hi), var(--ink-edge), 0 var(--u2) 0 0 var(--wood-0);
}

.slot .spr {
  --s: 5px;
}

.hotbar .state {
  font-family: var(--font-num);
  font-size: 16px;
  line-height: 16px;
  color: var(--text-gold-on-wood);
}

.hotbar .state.cool {
  color: #f59a6c; /* textWarnOnWood */
}

.shelf-note {
  text-align: center;
  margin: 14px 0 0;
  color: var(--text-on-wood-soft);
}

.tool-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: start;
}

.tool-card .spr {
  --s: 4px;
  grid-row: span 3;
  margin-top: 2px;
}

.tool-card h3 {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 27px;
  color: var(--text-year);
}

.tool-card p {
  margin: 0;
}

.tool-card .meta {
  color: var(--text-soft);
}

.group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 14px;
  color: var(--text-on-wood);
}

/* ── 도마 범례 ── */
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px 20px;
}

@media (min-width: 720px) {
  .legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.legend li {
  display: grid;
  grid-template-columns: calc(11 * 4px) 1fr;
  gap: 12px;
  align-items: start;
}

.legend .spr {
  --s: 4px;
  justify-self: center;
}

.legend b {
  display: block;
  font-weight: 400;
  color: var(--text-year);
}

/* ── 세계의 끝 ── */
.stamp {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.stamp .spr {
  --s: 5px;
}

.causes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.causes li {
  padding: 8px 0;
  border-top: var(--u) dotted var(--parch-0);
}

.causes li:first-child {
  border-top: 0;
}

.causes b {
  font-weight: 400;
  color: var(--text-year);
  margin-right: 6px;
}

/* ── 기록·재료 ── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin-top: 8px;
}

.sack {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  align-items: center;
  padding: 10px 0;
  border-top: var(--u) dotted var(--parch-0);
}

.sack:first-of-type {
  border-top: 0;
}

.sack .spr {
  --s: 4px;
  grid-row: span 2;
}

.sack b {
  font-weight: 400;
  color: var(--text-year);
}

.sack small {
  font-size: 15px;
  color: var(--text-soft);
}

/* ── 시작하기 전에 ── */
.principles {
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.principle strong {
  display: block;
  font-family: var(--font-bold);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 8px;
}

.principle p {
  margin: 0;
}

.panel a:not(.btn),
.window a:not(.btn),
.bubble a,
.scroll a {
  color: var(--red-deep);
}

/* ── 하위 페이지 제목 ── */
.page-head .plaque h1 {
  font-size: 24px;
  line-height: 30px;
}

.page-head .sub {
  margin: 14px 0 0;
  color: var(--ink);
  max-width: 40em;
}

.page-head .sub .panel-lite {
  display: inline;
  background: var(--parch-3);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 2px 6px;
}

.breadcrumb {
  margin-top: 16px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-on-wood-soft);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
}

.breadcrumb a {
  color: var(--text-on-wood);
}

/* ── 자주 묻는 질문 ── */
.faq-list details {
  border-top: var(--u) dotted var(--parch-0);
}

.faq-list details:first-child {
  border-top: 0;
}

.faq-list summary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 44px;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
  color: var(--text);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before {
  /* 도트 화살표 — 펼치면 아래로 */
  content: "";
  flex: none;
  width: calc(4 * var(--u));
  height: calc(7 * var(--u));
  margin-top: 5px;
  background: var(--red-deep);
  clip-path: polygon(0 0, 25% 0, 25% 14.3%, 50% 14.3%, 50% 28.6%, 75% 28.6%, 75% 42.9%, 100% 42.9%, 100% 57.1%, 75% 57.1%, 75% 71.4%, 50% 71.4%, 50% 85.7%, 25% 85.7%, 25% 100%, 0 100%);
}

.faq-list details[open] summary::before {
  transform: rotate(90deg);
}

.faq-list details p {
  margin: 0 0 14px 28px;
  color: var(--text-soft);
}

/* ── 문의 폼 ── */
.form-note {
  color: var(--text-soft);
}

.support-form {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.support-form label {
  display: grid;
  gap: 6px;
}

.support-form select,
.support-form input,
.support-form textarea {
  width: 100%;
  font: 16px/24px var(--font-body);
  color: var(--text);
  background: var(--parch-3);
  border: 0;
  border-radius: 0;
  margin: var(--u) 0;
  padding: 8px 10px;
  box-shadow: var(--ink-edge);
  -webkit-appearance: none;
  appearance: none;
}

.support-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.support-form button {
  justify-self: start;
}

#form-status {
  min-height: 27px;
  margin: 0;
  color: var(--text-year);
}

.contact-card a {
  font-size: 15px;
  word-break: break-all;
}

/* ── 약관·방침 ── */
.policy .window-body {
  max-width: 820px;
}

@media (max-width: 719px) {
  .policy .window-body,
  .faq-list.window-body {
    padding: calc(5 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u));
  }
}

.policy .meta-date {
  display: inline-block;
  margin: 0 0 20px;
}

.policy h2 {
  margin: 36px 0 12px;
  color: var(--text-year);
}

.policy h2:first-of-type {
  margin-top: 8px;
}

.policy p,
.policy li {
  line-height: 28px;
}

.policy ol,
.policy ul {
  margin: 0 0 14px;
  padding-left: 26px;
}

.policy li {
  margin: 4px 0;
}

.policy li > ul {
  margin: 6px 0 4px;
}

.policy ul {
  list-style: square;
}

.policy a {
  word-break: break-all;
}

/* ── 발치: 선반(짙은 나무) ── */
footer {
  color: var(--text-on-wood);
  background: repeating-linear-gradient(to bottom, var(--wood-1) 0 calc(4 * var(--u)), var(--wood-2) calc(4 * var(--u)) calc(8 * var(--u)), var(--wood-0) calc(8 * var(--u)) calc(9 * var(--u)));
  box-shadow: inset 0 var(--u) 0 0 var(--wood-5), 0 var(--nu) 0 0 var(--ink);
  padding: 28px 0 32px;
}

footer p {
  margin: 0 0 8px;
}

footer a {
  display: inline-block;
  padding: 8px 0;
  color: var(--text-on-wood);
}

footer .privacy-link {
  font-weight: 700;
  color: var(--text-gold-on-wood);
  /* 도트 글꼴의 굵게 = 한 픽셀 옆으로 겹쳐 찍기(굵은 판이 없어 합성하지 않는다) */
  text-shadow: 1px 0 0 currentColor;
}

footer .fine {
  color: var(--text-on-wood-soft);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn {
    transition: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.meta-soft {
  color: var(--text-soft);
  margin: 0;
}

/* 첫 화면 창 띠 — 창에 걸린 나무 간판 '반죽'(타이틀 화면) */
.hero.sky {
  padding: calc(10 * var(--u)) 0 calc(10 * var(--u) + 18px);
}

.hero.sky .cloud {
  top: calc(3 * var(--u));
  right: 8%;
}

.hero.sky .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero.sky .bubble {
  margin-top: 18px;
}

.intro {
  margin-top: 36px;
}

.intro .wrap {
  display: flex;
  justify-content: center;
}

.hero-grid {
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
  }
}

.hero-lead .lead {
  color: var(--text);
}

.hero-lead .cta-row {
  margin-top: 4px;
}

.grid-top {
  align-items: start;
}

.hero-scene {
  margin: 0;
  justify-self: center;
  text-align: center;
}

.hero-scene .window {
  display: inline-block;
  padding: calc(2 * var(--u));
  line-height: 0;
}

.hero-scene figcaption {
  margin-top: 10px;
  color: var(--text-on-wood-soft);
}

.events {
  margin-top: 28px;
}

.look-card {
  margin-top: 20px;
}

.page-head.sky .cloud {
  top: calc(2 * var(--u));
  right: 6%;
}

.legend .pair {
  display: inline-flex;
  gap: 4px;
  justify-self: center;
  align-items: center;
  min-height: calc(7 * 4px);
}

.group-title {
  flex-wrap: wrap;
}

.page-head {
  margin-top: 0;
}

.page-head .bubble {
  display: table;
  max-width: 36em;
  margin-top: 16px;
}

.page-head + .breadcrumb {
  margin-top: 20px;
}

.breadcrumb + section {
  margin-top: 28px;
}