*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/*
 * 화면에는 보이지 않고 읽기 도구로만 닿는 제목. 목록의 h1 이 그것이다
 * (화면에서 제목 자리는 분류 칩이 맡는다).
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * ==================== 색 토큰 ====================
 * 모든 색은 여기 한 곳에서 정한다. 규칙 안에는 리터럴 색을 쓰지 않는다(견본 · 도안 칸 색 제외).
 *
 * 테마를 따르지 않는 색 — 실 색을 눈으로 대조하는 자리라 어느 테마에서든 같아야 한다:
 *   · .swatch (범례 견본) · 범례의 기호 타일(js/import.js symbolMark)
 *   · 도안 칸의 색 · 기호 글자(import.js inkFor) · 내보내기 PNG/SVG(app.js chartSvg)
 *   · 칸 위에 얹는 표시(시작점 화살표 테두리 · 사분면 이름표 · 선택 칸 테두리 · 파킹 점 테두리)
 *
 * 밤에 침대 스탠드 아래에서 보는 화면이라 "완전한 검정"은 쓰지 않는다. 따뜻한 먹색(#17140f) 위에
 * 종이(#1b1815)를 얹는다 — OLED 검정은 스크롤에 잔상이 남고, 흰 글자 대비가 너무 세다.
 */
:root {
  color-scheme: light;

  --bg: #f3f0ea;
  --surface: #fff;
  --surface-2: #f3f0ea;

  --ink: #1f1a17;
  --on-ink: #f6f3ee;
  --ink-soft: #554f48;
  --ink-muted: #6b645c;
  --ink-faint: #8a827a;
  --ink-disabled: #b8b0a6;

  --line: #d9d3cb;
  --line-soft: #ded7cd;
  --line-strong: #d5cfc7;

  --hover: #ebe6df;
  --hover-strong: #e2dbd1;
  --thumb-bg: #e4dfd7;
  --track: #ece7df;
  --scrollbar: #cdc6bb;
  --scrollbar-hover: #b3aaa0;

  --chip-on-bg: #5b5651;
  --chip-on-ink: #fbfaf7;
  --accent: #c2410c;

  --alert-warn-bg: #fbf3e2;
  --alert-warn-line: #e2d3b4;
  --alert-warn-ink: #6f5730;
  --alert-info-bg: #eef0f1;
  --alert-info-line: #d9dee0;
  --alert-info-ink: #5b6266;

  --veil-strong: rgba(31, 26, 23, 0.5);
  --shadow-panel: 0 12px 32px rgba(31, 26, 23, 0.18);
  --shadow-pop: 0 10px 28px rgba(31, 26, 23, 0.22);
  --shadow-map: 0 16px 40px rgba(31, 26, 23, 0.3);

  /*
   * 캔버스 색(도안판). js/theme.js 의 CANVAS.light 와 같아야 한다 — tools/test_theme.js 가 대조한다.
   * 칸 색은 여기 없다(테마를 따르지 않는다).
   */
  --canvas-paper: #f7f4ef;
  --canvas-grid: rgba(31, 26, 23, 0.16);
  --canvas-grid-strong: rgba(31, 26, 23, 0.34);
  --canvas-band: #fbfaf7;
  --canvas-band-line: rgba(31, 26, 23, 0.18);
  --canvas-muted: #6b645c;
  --canvas-scrim: rgba(247, 244, 239, 0.7);
  --canvas-accent: #c2410c;
  --canvas-hover-ring: rgba(31, 26, 23, 0.55);
  --canvas-hover-line: rgba(31, 26, 23, 0.16);
  --canvas-pill: #1f1a17;
  --canvas-pill-ink: #fbfaf7;
}

/* 밤: 따뜻한 먹색. js/theme.js CANVAS.dark 와 같아야 한다. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #17140f;
  --surface: #221e1a;
  --surface-2: #2b2621;

  --ink: #ece7df;
  --on-ink: #17140f;
  --ink-soft: #cfc8bf;
  --ink-muted: #a9a29a;
  --ink-faint: #8d867e;
  --ink-disabled: #6d675f;

  --line: #3b352e;
  --line-soft: #342f29;
  --line-strong: #453f37;

  --hover: #2d2823;
  --hover-strong: #363029;
  --thumb-bg: #26221e;
  --track: #26221e;
  --scrollbar: #4a443c;
  --scrollbar-hover: #5e574d;

  --chip-on-bg: #d7d1c8;
  --chip-on-ink: #17140f;
  --accent: #ff8a4c;

  --alert-warn-bg: #33291a;
  --alert-warn-line: #4e3c23;
  --alert-warn-ink: #e8c98e;
  --alert-info-bg: #232a2d;
  --alert-info-line: #36424a;
  --alert-info-ink: #b7c7d0;

  --veil-strong: rgba(0, 0, 0, 0.68);
  --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-map: 0 16px 40px rgba(0, 0, 0, 0.6);

  /*
   * 밤 종이는 완전한 검정보다 한 단계 밝게 둔다 — 검은 실(#1c1a19 근처)이 빈 칸과 구별되어야 한다.
   * 낮 종이(#f7f4ef)가 흰 카드보다 한 단계 어두운 것과 같은 이유다(종이가 카드 위에 얹힌 한 장으로 보인다).
   */
  --canvas-paper: #2c2723;
  --canvas-grid: rgba(236, 231, 223, 0.14);
  --canvas-grid-strong: rgba(236, 231, 223, 0.3);
  --canvas-band: #221e1a;
  --canvas-band-line: rgba(236, 231, 223, 0.16);
  --canvas-muted: #a9a29a;
  --canvas-scrim: rgba(17, 15, 12, 0.78);
  --canvas-accent: #ff8a4c;
  --canvas-hover-ring: rgba(236, 231, 223, 0.6);
  --canvas-hover-line: rgba(236, 231, 223, 0.14);
  --canvas-pill: #ece7df;
  --canvas-pill-ink: #17140f;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

.top {
  display: flex;
  align-items: center;
  min-height: 78px;
  /* 계정 안내 문구(.account-note)를 머리글 아래에 겹쳐 띄우기 위한 기준. */
  position: relative;
}

.logo {
  font-family: Fraunces, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-size: 30px;
  font-weight: 560;
  letter-spacing: -0.03em;
  text-decoration: none;
  line-height: 1.1;
}

/*
 * 로고 옆의 작은 소개 두 줄(이름 · 한 줄 설명). 메뉴와 높이를 맞추지 않고 글자만 작게 두며,
 * 480px 아래에서는 로고 · 메뉴만 남기고 감춘다.
 */
.tagline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 0 14px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .tagline {
    display: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 14px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/*
 * 메뉴 글자 옆의 작은 아이콘(캔버스 = 격자 무늬 도안판). stroke 가 currentColor 라
 * 비활성(is-off)일 때도 글자와 같은 회색으로 따라간다.
 */
.nav-icon {
  display: block;
  flex: none;
}

/*
 * "캔버스"는 글자 없이 격자 아이콘만 두는 아이콘 버튼이다(이름은 aria-label · title 이 맡는다).
 * 누르는 자리를 36px 로 넓혀 손가락으로도 잡히게 하고, 호버에만 옅은 바탕을 깐다.
 * 클래스(is-off)는 js 가 className 으로 갈아 끼우므로 스타일은 data-nav 로 잡는다.
 */
.nav a[data-nav="canvas"] {
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

.nav a[data-nav="canvas"]:hover {
  background: var(--hover);
}

/* 돌아갈 작업이 없을 때는 눌리지 않으니 호버 바탕도 두지 않는다. */
.nav a[data-nav="canvas"].is-off:hover {
  background: none;
}

/* 손가락 기기에서는 누르는 자리를 조금 더 넓힌다. */
@media (pointer: coarse) {
  .nav a[data-nav="canvas"] {
    width: 40px;
    height: 40px;
  }
}

/*
 * 지금 화면으로 가는 메뉴는 감춘다 — 목록 화면에서는 "캔버스"만, 캔버스 화면에서는 "목록"만.
 * js/app.js 의 markNav 가 hidden 을 붙이고 뗀다.
 */
.nav a[hidden] {
  display: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
}

/*
 * 하던 작업이 없을 때의 "캔버스"(처음 온 사람). href 가 없어 눌리지 않고, 흐리게 보인다.
 * js/app.js 가 마지막 작업 기록을 보고 href 를 붙이며 켠다.
 */
.nav a.is-off,
.nav a.is-off:hover {
  color: var(--ink-disabled);
  cursor: default;
}

/*
 * 테마 버튼(밝게 · 어둡게 · 시스템 따름). 위의 "캔버스" 아이콘 버튼과 같은 크기 · 같은 호버를 쓴다.
 * 지금 고른 값은 data-mode 에 있고(js/theme.js 가 바꾼다), 그 값의 아이콘 하나만 보인다.
 * 이름은 aria-label 이 맡고, 아이콘은 글자색(currentColor)을 따라가므로 테마마다 따로 칠하지 않는다.
 */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.theme-btn:hover {
  background: var(--hover);
  color: var(--ink);
}

.theme-btn svg {
  display: none;
  flex: none;
}

.theme-btn[data-mode="system"] .theme-icon-system,
.theme-btn[data-mode="light"] .theme-icon-light,
.theme-btn[data-mode="dark"] .theme-icon-dark {
  display: block;
}

@media (pointer: coarse) {
  .theme-btn {
    width: 40px;
    height: 40px;
  }
}

/*
 * 계정(로그인 · 이메일 · 로그아웃). 5-B 에서는 "누구로 로그인했는지"만 보여 준다 —
 * 비회원 차단(게이트) · 동기화 배지는 5-C · 5-D 다.
 * 세 상태를 모두 마크업에 담아 두고 js/app.js 가 hidden 만 갈아 끼우므로 높이가 흔들리지 않는다.
 */
.account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.account-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.account-btn:hover {
  border-color: var(--line-strong);
  background: var(--hover);
  color: var(--ink);
}

.account-btn:disabled {
  color: var(--ink-disabled);
  cursor: default;
}

/* 로그아웃은 로그인한 상태에서만 보인다 — 테두리를 두지 않아 이메일이 주인공이 된다. */
.account-out {
  border-color: transparent;
}

/*
 * 동기화 배지(5-D). 진행도가 클라우드로 나갔는지만 알리는 작은 표식이라
 * 버튼처럼 보이지 않게 둔다(누를 것이 없다). 글자는 js/app.js(paintSync)가 정한다.
 */
.sync-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.account-who {
  max-width: 190px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * 안내 문구(설정 없음 · 인앱 브라우저 · 로그인 실패). 머리글 높이를 밀지 않도록
 * 오른쪽 아래에 띄운다. role="status" 라 읽기 도구가 그대로 읽는다.
 */
.account-note {
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
  z-index: 5;
  max-width: min(320px, calc(100vw - 32px));
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 10px 24px rgba(31, 26, 23, 0.16);
}

@media (max-width: 560px) {
  .account-who {
    max-width: 108px;
  }
}

/* 좁은 화면: 로고 · 캔버스 · 테마 옆에 계정까지 붙으므로 간격과 이메일 길이를 줄인다(줄바꿈 대신). */
@media (max-width: 480px) {
  .nav {
    gap: 12px;
  }

  .account-who {
    max-width: 84px;
    font-size: 12px;
  }
}

/*
 * 게이트(5-C): 비회원이 도안 · 캔버스를 열려 할 때 그 자리에서 그리는 로그인 안내.
 * 목록 화면의 .controls 와 같은 결(제목 서체 · 좁은 폭)로 두어, 잠긴 화면이 아니라
 * 같은 사이트의 다른 화면처럼 보이게 한다.
 */
.gate {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 48px;
}

.gate h1 {
  margin: 4px 0 12px;
  font-family: Fraunces, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-size: 30px;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.2;
  word-break: keep-all;
}

/* 열려던 도안의 이름 · 크기. 카탈로그에서 읽으므로 로그인 없이도 보인다. */
.gate-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.gate-preview img {
  width: 64px;
  height: auto;
  border-radius: 8px;
  background: var(--surface);
}

.gate-preview p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.gate-preview span {
  display: block;
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.gate .actions {
  margin-top: 18px;
}

/* 버튼은 누를 곳만큼만 넓힌다(좁은 화면에서는 .actions 의 폭을 그대로 쓴다). */
.gate .btn {
  max-width: 320px;
}

.gate-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .gate h1 {
    font-size: 26px;
  }

  .gate .btn {
    max-width: none;
  }
}

.related h2,
.legend-block h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
}

/* 목록의 분류 칩(전체 · 분류…). 화면에서 제목 자리를 칩이 맡는다(h1 은 읽기 도구에만 남는다). */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 22px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  font-size: 14px;
}

.chip:hover {
  background: var(--hover);
}

.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.board {
  list-style: none;
  margin: 0;
  padding: 0;
  column-width: 150px;
  column-gap: 12px;
}

.board li {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 18px;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--thumb-bg);
}

.card:hover img {
  opacity: 0.94;
}

.card-name,
.card-meta {
  word-break: keep-all;
}

.card-name {
  margin: 10px 2px 0;
  font-size: 15px;
  font-weight: 500;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 3px 2px 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.card-meta .mark {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

.empty,
.load-error {
  margin: 24px 0;
  color: var(--ink-muted);
}

.back {
  display: inline-block;
  margin: 2px 0 16px;
  color: var(--ink-muted);
  font-size: 14px;
  text-decoration: none;
}

.back:hover {
  color: var(--ink);
}

.work {
  display: grid;
  gap: 18px;
}

.sheet {
  order: 1;
  background: var(--surface);
  border-radius: 20px;
  padding: 14px;
}

.sheet img.stitch {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.sheet img,
.sheet canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.sheet canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.controls {
  order: 2;
}

.legend-block {
  order: 3;
}

.eyebrow {
  color: var(--ink-muted);
  font-size: 13px;
  text-decoration: none;
}

.controls h1 {
  margin: 4px 0 14px;
  font-family: Fraunces, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-size: 32px;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.2;
  word-break: keep-all;
}

.status {
  margin: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.pending,
.file-line,
.note {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
}

.slider {
  display: block;
  margin: 14px 0 0;
}

.slider-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--ink);
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14px;
}

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

.btn {
  appearance: none;
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 500;
  cursor: pointer;
}

.btn.primary {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--ink-muted);
  font-size: 13px;
}

.source-row img {
  width: 72px;
  height: auto;
  border-radius: 8px;
}

.legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px 14px;
  margin: 12px 0 0;
  padding: 0;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sym {
  width: 1.1em;
  font-weight: 600;
  text-align: center;
}

/*
 * 실 색 견본. 바탕색은 인라인 style 로 들어오는 실 색이라 테마를 따르지 않는다.
 * 어두운 견본이 카드에 묻히지 않게 두는 얇은 테두리도 밝은 테마의 카드(#fff)를 기준으로 잡은
 * 값이라 여기만 리터럴로 둔다(밤 테마에서도 견본은 같은 색으로 보여야 한다).
 */
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.hex {
  color: var(--ink-muted);
}

.related {
  margin-top: 36px;
}

.related h2 {
  margin-bottom: 14px;
}

/* 입력 칸의 안내 글자도 테마를 따른다(브라우저 기본값은 밤 테마에서 너무 어둡다). */
input::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

body.is-work .wrap {
  max-width: none;
  padding-bottom: 0;
}

.studio {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 72px);
}

.zoom-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.studio-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
  min-height: 52px;
}

.bar-start,
.bar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bar-end {
  justify-content: flex-end;
}

.bar-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.studio-bar strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remain,
.chart-size,
.zoom-label {
  color: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.zoom-label {
  min-width: 4.5ch;
  text-align: center;
}

.park-count {
  color: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.coord {
  min-width: 10ch;
  color: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.block-label {
  min-width: 5ch;
  color: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.block-map {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--veil-strong);
}

.block-map-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.block-map-grid {
  display: grid;
  gap: 2px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-map);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.block-map-cell {
  border: 0;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  color: var(--ink);
  background: var(--track);
  text-align: center;
}

.block-map-cell.is-on {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.start-select {
  height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 28px 0 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.settings-wrap {
  position: relative;
}

.mode-row .settings-wrap {
  position: absolute;
  left: 0;
  top: 0;
}

.settings-toggle {
  width: auto;
  height: 36px;
  padding: 0 12px;
  min-width: 40px;
}

@media (pointer: coarse) {
  .settings-toggle {
    min-width: 44px;
    height: 44px;
  }
}

.settings-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: 240px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  display: grid;
  gap: 10px;
}

.settings-label {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.settings-hint {
  margin: -4px 0 2px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-panel .start-select {
  width: 100%;
}

.settings-panel .btn {
  width: 100%;
  height: 42px;
}
/*
 * 격리 강도 칩: 설정 판 안에서 한 줄에 6개, 좁으면 접힌다.
 * 모양은 실 가닥 칩(.floss-strand)과 같게 두어 "값을 고르는 알약"으로 읽히게 한다.
 */
.isolate-strength {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.isolate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.isolate-chip {
  flex: 1 1 30%;
  min-width: 44px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--track);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.isolate-chip.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

@media (pointer: coarse) {
  .isolate-chip {
    height: 40px;
  }
}



.cell-info {
  position: fixed;
  z-index: 50;
  min-width: 180px;
  max-width: 240px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

.cell-info-close,
.block-info-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.cell-info-body {
  display: grid;
  gap: 6px;
}

.cell-info-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell-info-number {
  font-size: 15px;
  font-weight: 600;
}

.cell-info-name,
.cell-info-strands,
.cell-info-coord,
.cell-info-status {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.cell-info-coord {
  font-variant-numeric: tabular-nums;
}

.cell-info-park {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.cell-info-park-btn {
  width: 100%;
  height: 36px;
}

/* 카드 아래 단추 줄: 파킹과 실 바꾸기를 나란히 둔다. */
.cell-info-actions {
  display: flex;
  gap: 6px;
}

.cell-info-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  font-size: 13px;
}

.cell-info-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.block-info {
  position: fixed;
  z-index: 52;
  min-width: 210px;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

.block-info-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.block-info-row {
  display: grid;
  grid-template-columns: 3.9em minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.block-info-row + .block-info-row {
  margin-top: 6px;
}

.block-info-label {
  color: var(--ink-muted);
}

.block-info-value {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .settings-panel {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    top: auto;
    width: auto;
    max-width: none;
    border-radius: 18px;
  }
}

/*
 * 실 바꾸기 판.
 * 화면 가운데에 뜨고 뒤는 어둡게 덮는다(.block-map 과 같은 방식). 목록만 스크롤하고
 * 지금 실 · 검색 · 되돌리기는 늘 보이게 둔다 — 무엇을 바꾸는지 잊지 않도록.
 * 세로 공간이 모자라면(작은 창) 목록만 줄어들도록 flex 세로 배치를 쓴다.
 */
.floss-panel {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--veil-strong);
}

.floss-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-map);
}

.floss-card > * {
  flex: none;
}

.floss-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.floss-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.floss-now {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
}

.floss-now .swatch {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.floss-now-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floss-strands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.floss-strands-label {
  margin-right: 2px;
  color: var(--ink-muted);
  font-size: 13px;
}

.floss-strand {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--track);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.floss-strand.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.floss-search {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.floss-list {
  display: grid;
  align-content: start;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(46vh, 320px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* 직접 입력: 번호 · 이름 · 적용. 목록에 없는 실을 그대로 적어 넣는 자리다. */
.floss-manual {
  display: flex;
  gap: 6px;
}

.floss-input {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--track);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.floss-input::placeholder {
  color: var(--ink-faint);
}

.floss-number {
  flex: 0 1 88px;
}

.floss-apply {
  flex: none;
  width: auto;
  height: 34px;
  padding: 0 14px;
}

.floss-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.floss-row:hover {
  background: var(--hover);
}

.floss-row.is-on {
  background: var(--hover-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.floss-suggest {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.floss-code {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.floss-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted);
}

.floss-suggest .floss-name {
  flex: 1;
}

.floss-hint {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 12px;
  white-space: nowrap;
}

.floss-empty {
  margin: 8px 4px;
  color: var(--ink-muted);
  font-size: 13px;
}

.floss-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.floss-count {
  margin-right: auto;
  color: var(--ink-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.floss-revert {
  flex: none;
  width: auto;
  height: 34px;
  padding: 0 12px;
}

/* 되돌리기 띠: 화면 아래 가운데. 밝은·어두운 테마 모두 먹색 띠에 종이색 글자다. */
.floss-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-pop);
  font-size: 13px;
  transform: translateX(-50%);
}

.floss-toast-undo {
  flex: none;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* 머리글의 "실 편집됨" 배지. 도안이 원본 인쇄본과 달라졌다는 표시다. */
.edited-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--track);
  color: var(--ink-muted);
  font-size: 12px;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .floss-row {
    min-height: 44px;
  }

  .floss-strand {
    min-width: 40px;
    height: 38px;
  }

  .floss-revert {
    height: 40px;
  }

  .floss-input,
  .floss-apply {
    height: 40px;
  }
}

.studio-bar .btn {
  width: auto;
  height: 36px;
  padding: 0 14px;
}

@media (max-width: 720px) {
  .studio-bar {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 6px 0;
  }

  .bar-start,
  .bar-end {
    width: 100%;
    justify-self: stretch;
  }

  .bar-end {
    justify-content: flex-start;
  }
}

.studio-alerts {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
}

.studio-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--alert-warn-bg);
  box-shadow: inset 0 0 0 1px var(--alert-warn-line);
  color: var(--alert-warn-ink);
  font-size: 14px;
  line-height: 1.5;
}

.studio-alert.is-info {
  background: var(--alert-info-bg);
  box-shadow: inset 0 0 0 1px var(--alert-info-line);
  color: var(--alert-info-ink);
}

.studio-alert .alert-close {
  margin-left: auto;
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.btn.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.mode-switch {
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  border-radius: 12px;
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
}

.mode-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  min-width: 0;
  padding: 0 0 8px;
}

.stage-col {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.mode-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 13px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.mode-btn + .mode-btn {
  box-shadow: inset 1px 0 0 var(--line-soft);
}

.mode-btn:hover {
  background: var(--hover-strong);
}

.mode-btn.is-on,
.mode-btn.is-on:hover {
  background: var(--chip-on-bg);
  color: var(--chip-on-ink);
}

.mode-btn:disabled,
.mode-btn:disabled:hover {
  background: none;
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.mode-btn:disabled svg {
  opacity: 0.7;
}

.mode-btn svg {
  display: block;
  flex: none;
}

.mode-btn:focus-visible {
  outline-offset: -3px;
}

.mode-note {
  display: block;
  padding: 10px 14px 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1400px) {
  .mode-btn {
    padding: 0 11px;
  }
}

@media (pointer: coarse) {
  .mode-switch {
    height: 44px;
  }

  .mode-btn {
    min-width: 52px;
    padding: 0 14px;
  }

  .studio-bar .btn {
    min-width: 44px;
    height: 44px;
  }

  .start-select {
    height: 44px;
  }

  /*
   * 확대 도구(− + 와 배율 숫자)는 데스크탑 전용이다. 손가락 기기에서는 두 손가락으로 벌려서
   * 확대하므로 버튼도 배율 숫자도 필요 없다(js/import.js 의 zoom-tools 주석과 한 묶음).
   */
  .zoom-tools {
    display: none;
  }

  /*
   * 블록 모드: 좁은 화면에서는 파일 이름과 도안 크기를 감춘다. 어느 블록을 보는지가 더 중요하고,
   * 칸 수는 좌표·남은 칸·파킹 배지로도 충분히 읽힌다. js/import.js 가 .studio 에 is-block 을 붙인다.
   */
  .studio.is-block .bar-info strong,
  .studio.is-block .chart-size {
    display: none;
  }

  /*
   * 데스크톱 전용 메뉴: 마우스가 없는 기기에서는 감춘다.
   * 이미지 저장은 컴퓨터에서 하는 일이라, 마우스가 없는 기기에서는 감춘다.
   * ◀ ▶(이전/다음 블록) · 블록 진척 배지(④ 22%) · 맵(블록 맵) 은 컴퓨터에서 블록을 오갈 때
   * 쓰는 도구라 좁은 바에서는 자리만 차지한다.
   * 좌표 · 남은 칸 · 파킹 배지와, 블록 보기를 나오는 "전체"(바 왼쪽)는 손가락 기기에서도 그대로 둔다.
   */
  .studio-bar .desktop-only {
    display: none;
  }

  .mode-row::after {
    flex-basis: 100%;
    text-align: center;
    color: var(--ink-muted);
    font-size: 12px;
  }

  .mode-row[data-mode="nav"]::after {
    content: "드래그로 이동";
  }

  .mode-row[data-mode="search"]::after {
    content: "칸을 눌러 찾기";
  }

  .mode-row[data-mode="progress"]::after {
    content: "칠하기 · 두 손가락으로 이동";
  }

  .mode-row[data-mode="parking"]::after {
    content: "파킹 · 탭으로 꽂기/빼기";
  }
}

.studio-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  flex: 1;
  gap: 8px;
}

.stage-wrap {
  position: relative;
  min-height: 0;
  border-radius: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--canvas-paper);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

.stage-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.stage-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.stage-wrap::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar);
  background-clip: padding-box;
}

.stage-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
  background-clip: padding-box;
}

.stage-scroll {
  position: relative;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

.stage {
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.stage.is-nav {
  cursor: grab;
}

.stage.is-search {
  cursor: crosshair;
}

.stage.is-progress {
  cursor: cell;
}

.stage.is-parking {
  cursor: copy;
}

.stage.is-panning,
.stage.is-nav.is-panning {
  cursor: grabbing;
}

.stage.is-gesture {
  cursor: grabbing;
}

.stage.is-moving-start {
  cursor: grabbing;
}

/*
 * 범례: 기호 · 색 이름 · 갯수 세 칸(48px · 1fr · 66px). 머리글과 줄이 같은 격자를 써서
 * 세로로 줄이 맞고, 갯수는 오른쪽에 붙어 눈으로 훑기 쉽다.
 * 66px 은 "12,345칸" 까지 들어가는 폭이다. 좁은 화면에서는 카드 대신 .key-scroll 로 가로로 민다.
 */
.key {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 손가락 기기: 한 줄이 40px 라 네 줄이면 160px 다. 화면 높이의 32vh 로 묶어 도안 자리를 지킨다. */
  max-height: min(200px, 32vh);
  overflow: hidden;
  background: var(--surface);
  border-radius: 16px;
}

.key-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.key-head,
.key-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 66px;
  align-items: center;
  column-gap: 8px;
}

.key-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 14px 6px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.key-head-count {
  text-align: right;
}

.key-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 8px;
}

.key-row {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 6px;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.key-row.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

.key-row.is-parked {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
/*
 * 격리한 색: 칸이 흐려져도 어느 실인지 보여야 하므로 줄과 견본에 테두리를 두른다.
 * 흰 실을 30% 로 흐리면 종이와 구분되지 않으므로, "무엇을 보고 있는지"는 이 표시가 맡는다.
 */
.key-row.is-isolated {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.key-row.is-isolated .key-mark {
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--accent);
}



.key-park {
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.key-row.is-on .key-park {
  background: var(--on-ink);
  color: var(--ink);
}

.key-mark {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.key-row b,
.key-glyph {
  min-width: 1em;
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: 4px;
}

.key-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.key-name-text,
.key-name-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.key-name-text {
  font-size: 13px;
}

.key-name-sub {
  color: var(--ink-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.key-row.is-on .key-name-sub {
  color: var(--scrollbar);
}

.key-tally {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.key-row em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.key-count {
  font-size: 13px;
}

/*
 * 좁은 화면: 범례를 카드 목록에서 한 줄 가로 띠로 바꾼다.
 * 손가락으로 도안을 보는 화면에서 범례가 세로를 다 먹으면 도안이 밀려나므로, 색 하나는
 * "견본 + 기호"만 남기고 이름·갯수를 감춘다. 지금 보는 색의 이름은 안내줄(js/import.js 의
 * 압축 표기 "A · 971 · 남음 6,432")이 대신 말한다.
 *
 * 함정 둘 — 둘 다 "예전 규칙을 되돌리는" 일이라 지우면 띠가 깨진다:
 *  1) 예전 @media 의 .key-head · .key-list { min-width: 336px } (표 최소 폭) → 되돌린다.
 *  2) .key-row { width: 100% } (표 한 줄) → auto 로 되돌린다.
 * 칩 폭 48px(여백 10 + 견본 14 + 틈 4 + 기호 20) — 손가락 목표 44px 를 넘긴다.
 * 실측(390px · 7색): 마지막 칩이 10px 걸쳐 잘린다. 다 밀어 넣지 않고 남긴다 — 띠가 더 있다는 신호다.
 * (360px 에서는 40px 이 넘친다. 칩을 45px 로 줄이면 7색이 꼭 맞지만 손가락 자리가 좁아져 남긴다.)
 */
@media (max-width: 859px) {
  .key {
    /* 띠는 한 줄이라 높이를 묶을 이유가 없다(예전 32vh 상한을 푼다). */
    max-height: none;
  }

  /* 표 머리글(기호 · 색상 이름 · 갯수)은 띠에서 뜻이 없다. */
  .key-head {
    display: none;
  }

  .key-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /* 끝까지 밀어도 페이지 · 도안이 따라 움직이지 않게(가로 스크롤은 이 띠 한 곳만). */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .key-scroll::-webkit-scrollbar {
    display: none;
  }

  .key-list {
    flex-direction: row;
    min-width: 0;
    gap: 4px;
    padding: 6px 8px 8px;
  }

  .key-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
    /* 칩 하나가 손가락 목표(44px)보다 작아지지 않게 한다 — 한 번 눌러 격리하는 자리다. */
    min-width: 46px;
    min-height: 44px;
    padding: 5px;
    /* 가로는 띠가, 세로는 도안이 맡는다(두 축이 서로 스크롤을 뺏지 않게). */
    touch-action: pan-x;
    /* scrollIntoView({ inline: "nearest" }) 가 목록 좌우 여백(8px)을 잘라 먹지 않게 한다. */
    scroll-margin-inline: 10px;
  }

  /* 이름 · 갯수는 띠에서 감춘다 — 안내줄의 압축 표기가 그 자리를 대신한다. */
  .key-row .key-name,
  .key-row .key-tally {
    display: none;
  }

  .key-mark {
    gap: 4px;
  }

  .key-row b,
  .key-glyph {
    width: 20px;
    height: 20px;
    min-width: 0;
    font-size: 13px;
  }
}

@media (min-width: 860px) {
  .studio-body {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: minmax(0, 1fr);
  }

  .key {
    max-height: none;
  }
}

/* 넓은 화면에서는 이름이 덜 잘리도록 범례를 조금 넓힌다. */
@media (min-width: 1180px) {
  .studio-body {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (min-width: 720px) {
  .wrap {
    padding: 0 28px 72px;
  }

  .board {
    column-width: 210px;
    column-gap: 20px;
  }

  .board li {
    margin-bottom: 26px;
  }
}

@media (min-width: 860px) {
  .work {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
      "sheet controls"
      "legend controls";
    align-items: start;
    column-gap: 28px;
  }

  .sheet {
    grid-area: sheet;
  }

  .controls {
    grid-area: controls;
    position: sticky;
    top: 16px;
  }

  .legend-block {
    grid-area: legend;
  }
}