/* base.css — 화면 뼈대.

   ⭐ 정본은 `apps/Hutchpad/시안-A.html` (유하람 과장) 이다. 2026-08-11 밤에 그 시안의
   style 블록을 그대로 옮겨왔다. 클래스 이름만 실제작 쪽(.card/.boards/.addbar)으로 맞췄고
   값은 한 군데도 고치지 않았다.

   ⚠️ 색값을 이 파일에 직접 쓰지 않는다. 전부 tokens.css 의 변수로 참조한다.
      (한 번 어겨서 지록이 반려한 옛 색이 화면에 남아 있었다 — 구조.md 8절) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image: var(--bg-texture);
  font-family: var(--font);
  font-size: var(--fs);
  /* 기본 글자 굵기. 테마가 바꿀 수 있는 자리다 — 명조처럼 획이 가는 글꼴은 400 이 화면에서 흐리다
     (지록 2026-08-12: "인쇄물 테마에서 기본 폰트가 얇아서 가독성이 떨어진다") */
  font-weight: var(--w-base, 400);
  color: var(--ink);
  word-break: keep-all;              /* 한국어는 낱말 중간에서 자르지 않는다 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color .18s ease;
}

/* 가운데 놓인 작업대.
   ⭐ 지록 2026-08-12 — *"해상도 큰 모니터에서 좌우 여백이 노는데 모두 사용할 수 없어? 해상도에 따라 변하게"*
   1280px 로 묶여 있던 것을 풀었다. 여기는 읽는 페이지가 아니라 **작업대**라, 넓으면 박스가
   한 줄에 더 들어가서 그만큼 이득이다(글 페이지 `page.css` 는 760px 그대로 둔다 —
   글은 한 줄이 길어지면 읽기가 나빠진다. 같은 규칙을 쓰면 안 되는 자리다).
   상한을 아주 크게만 남겨둔 이유: 5K·울트라와이드에서 무한정 늘리면 왼쪽 끝과 오른쪽 끝이
   한 눈에 안 들어온다. 그 위로는 가운데 정렬로 떨어진다.
   ℹ️ 창을 넓혀도 이미 놓인 박스는 제자리를 지킨다(자리를 저장하는 구조라서 — layout.js).
      새로 생긴 자리를 채우려면 「정렬」을 한 번 누르면 된다. */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 22px 40px; }
@media (max-width: 700px) { .wrap { padding: 0 14px 28px; } }

/* ── 머리 ─────────────────────────────── */
/* 이름줄 / 판 탭줄 두 단. 판 탭은 로고 아래 한 줄 (지록 2026-08-11)
   ⚠️ `header.top` 으로 좁혀 둔다. 그냥 `.top` 이면 박스 안에서 같은 이름을 쓴 자리에
   헤더 밑선이 그대로 옮겨간다 — 달력에서 실제로 났다(2026-08-11). */
header.top {
  padding: 16px 0 0;
  border-bottom: 2px solid var(--bg-line);
  margin-bottom: 16px;
  color: var(--bg-ink);
}
header.top .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* ── 로고 ─────────────────────────────────
   지록이 그린 정본 SVG 를 좌표 그대로 심었다(index.html). 여기서는 크기와 색만 정한다.
   ⚠️ 글자까지 패스라 **글꼴이 안 실려도 로고는 안 흔들린다.** 그게 이걸 쓰는 이유다.
   태그라인은 로고 **옆**에 앉는다 (지록 2026-08-12 — 예전엔 이름 아래였다). */
.mark { display: flex; align-items: center; gap: 10px; }
.mark svg { display: block; }
.mark .logo { height: 26px; width: auto; }
.mark .logo .ink { fill: var(--bg-ink); }
/* ⭐ 테마 포인트 색이 들어가는 단 한 자리 — 심볼 위 납작한 막대 (지록 2026-08-12) */
.mark .logo .bar { fill: var(--mark); }

/* 국문·영문 두 벌을 다 심어두고 화면 언어에 맞는 한 벌만 보인다.
   `html[lang]` 은 i18n.js 가 언어를 바꿀 때마다 다시 적어준다 — 자바스크립트를 더 쓰지 않는다 */
html[lang="ko"] .mark .logo:nth-of-type(2),
html[lang="en"] .mark .logo:nth-of-type(1) { display: none; }

.tagline { font-family: var(--font); font-size: var(--fs-sm);
  font-weight: 500; color: var(--bg-ink-2); letter-spacing: 0;
  padding-left: 10px; border-left: 1px solid var(--bg-line); line-height: 1.2; }
/* 좁아지면 태그라인부터 내린다 — 로고와 테마·설정이 먼저다 */
@media (max-width: 620px) { .tagline { display: none; } }
header.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* 판 탭 — 일감별로 판을 나눔. 밑선 위에 걸터앉는다 */
/* 탭이 줄 높이를 꽉 채워야 밑선이 헤더 선에 정확히 얹힌다.
   flex-end 로 두면 탭 아래에 1px 이 남아 인쇄물에서 층으로 보였다 (지록 지적 2026-08-11) */
.boards { display: flex; gap: 2px; align-items: stretch; margin-top: 11px; flex-wrap: wrap; }
.boards .tab {
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--bg-ink-2); cursor: pointer;
  background: transparent; border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 6px 13px 7px; position: relative;
  /* ⚠️ 지록 지적(2026-08-11) — "인쇄물에서 정렬 아래 라인에 층이 생겼는데".
     탭 밑선이 3px 이고 헤더 밑선이 2px 이라 1px 어긋나 있었다.
     작업대는 두 선 색이 달라 안 보이고, 인쇄물은 둘 다 검정이라 층으로 드러났다.
     두께를 헤더 선과 같게 맞추고 정확히 그 위에 얹는다 — 시안의 "밑선 위에 걸터앉는다" 그대로. */
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.boards .tab:hover { color: var(--bg-ink); }
.boards .tab[aria-selected="true"] {
  color: var(--mark-ink); background: var(--mark); border-bottom-color: var(--bg-ink);
}
.boards .tab .kill { border: 0; background: none; color: inherit; padding: 0 0 0 6px;
  font-size: 12px; opacity: .65; }
.boards .tab .kill:hover { opacity: 1; }
.boards .add { color: var(--bg-ink-2); font-weight: 400; padding: 6px 10px 7px;
  background: transparent; border: 0; font-size: 14px; cursor: pointer; }
.boards .add:hover { color: var(--bg-ink); }

/* 테마 고르는 자리 — 색 점 세 개. 라벨 없음, 확인 버튼 없음 (유하람 확정) */
.themes { display: flex; gap: 6px; align-items: center; }
.themes button {
  width: 16px; height: 16px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,.25); background: transparent; position: relative;
}
.themes button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--bg-ink); }
.themes .t-workbench { background: #FFDC1F; }
.themes .t-pinboard  { background: #3A3735; }
.themes .t-newsprint { background: #D0342C; }


/* ── 판 — 마음대로 놓는 자리 ────────────────────
   예전에는 12칸 격자에 순서대로 흘려보냈다. 지금은 사용자가 직접 놓는다
   (지록 2026-08-11 "윈도우 파일 정렬 같은 기능들").

   자리 계산은 전부 js/layout.js 가 한다 — 여기서는 "절대 위치"라는 것만 정한다.
   가로는 --snap 눈금 배수, 세로는 위 박스들 밑에 붙는다(겹치지 않는다).
   ⭐ 유하람 진단 ② — 열여섯 개가 전부 같은 크기면 그게 AI 화면이다. 이제 폭은 사람이 정한다 */
.board { position: relative; }
.board > .card {
  position: absolute; left: 0; top: 0;
  transform: translate(0, 0);
  will-change: transform;
}
/* 밀려나는 것이 보여야 어디가 밀렸는지 눈이 따라간다. 늘 켜두면 타이핑할 때 출렁여서
   자리가 바뀌는 순간에만 board 에 .animate 가 잠깐 붙는다.

   ⚠️ **폭(width)은 절대 애니메이션하지 않는다.** 한 번 넣었다가 박스 세 쌍이 겹쳤다.
   폭이 서서히 변하는 동안 박스 높이도 같이 변하는데, 자리 계산은 그 도중의 높이를 재서
   "이만큼만 있으면 되겠네" 하고 아랫박스를 너무 위에 붙여버린다. 폭은 즉시 바뀌어야 한다. */
.board.animate > .card { transition: transform .18s cubic-bezier(.2,.7,.3,1); }
/* 좁은 화면 — 자유 배치를 접고 한 줄로 쌓는다. 저장된 자리는 그대로 두고 화면만 바꾼다 */
.board.stack > .card { width: 100% !important; }
.board.stack .grip, .board.stack .grab-w { display: none; }

/* ── 박스 ─────────────────────────────── */
.card {
  background: var(--surface);
  border: var(--card-border-w) solid var(--line-strong);
  border-top: var(--card-top-w) solid var(--card-edge);
  border-bottom: var(--card-bottom-w) solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
/* 제목줄 */
.card > h2 {
  margin: 0;
  display: flex; align-items: center; gap: 9px;
  padding: var(--pad-y) calc(var(--pad) + 2px) calc(var(--pad-y) - 2px);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-title); font-size: var(--fs-title);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
}
/* 형광펜 자국 — 모든 박스가 아니라 두어 개에만 (유하람: 한 화면에 두세 번) */
.hl {
  background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 96%, transparent 96%);
  padding: 0 1px;
}
.card > h2 .note { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card > h2 .kill {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font); font-size: 15px; line-height: 1; color: var(--ink-3);
  background: transparent; border: 0; padding: 2px 3px; cursor: pointer; border-radius: 2px;
}
.card > h2 .kill:hover { color: var(--accent-ink); background: var(--accent); }
.card > .body { padding: var(--pad-y) calc(var(--pad) + 2px);
  display: flex; flex-direction: column; gap: 8px; }
/* bare = 입력칸이 박스 가장자리까지 가는 박스(메모). 안쪽 여백을 박스가 직접 잡는다 */
.card > .body.bare { padding: 0; gap: 0; }

/* 광고판은 뺄 수 없다 → × 자리에 라벨 */
.card[data-box^="ad"] .kill { display: none; }
.card > h2 .tag {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 2px; padding: 2px 6px;
  background: var(--surface); white-space: nowrap;
}

/* ── 공통 부품 ─────────────────────────── */
.card textarea, .card input[type="text"], .card input[type="number"] {
  width: 100%; font-family: var(--font); font-size: var(--fs); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 8px 9px; outline: none; resize: vertical; line-height: 1.7;
}
.card textarea::placeholder, .card input::placeholder { color: var(--ink-3); }
/* 지금 손이 가 있는 칸은 형광으로 감싼다 — 파란 기본 포커스 링을 쓰지 않는다 */
.card textarea:focus, .card input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--mark); }
/* ⚠️ 지록 지적(2026-08-11) — "환율에서 드랍다운 화살표가 너무 박스에 붙었어".
   브라우저가 그려주는 화살표는 오른쪽 테두리에 딱 붙는다. 우리가 직접 그려서 안쪽으로 들인다.
   색은 테마마다 달라야 해서 토큰(--caret)으로 뺐다 — tokens.css 참고. */
.card select {
  font-family: var(--font); font-size: 12px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 30px 6px 10px;
  appearance: none; -webkit-appearance: none;
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 9px 6px;
}
.card select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--mark); }
.card button, .card .btn {
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 6px 10px; white-space: nowrap; flex: 0 0 auto;
}
.card button:hover, .card .btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
/* 주 버튼은 먹으로 꽉 채운다 — 형광 노랑이 아니다 */
.card .btn.primary, .card button.solid {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.card .btn.primary:hover, .card button.solid:hover { background: var(--accent); }
/* 고른 것 하나를 표시하는 자리 — 형광 자국 쪽 */
.card button[aria-selected="true"] {
  background: var(--mark); border-color: var(--mark-2); color: var(--mark-ink);
}
.card button:disabled, .card .btn:disabled { opacity: .45; cursor: default; }
.card > h2 .kill { flex: 0 0 auto; }

/* ⭐ 조작하는 것들의 키를 하나로 (지록 지시 2026-08-11: "입력창과 버튼의 크기를 통일해줘, 모든 부분에")
   전엔 박스마다 23·30·34·37·41px 이 섞여 있었다. 한 줄에 입력칸과 버튼이 같이 놓이면
   높이가 다른 게 바로 보인다 — 자주 쓰는 것 박스에서 지록이 잡아낸 자리다.
   ⚠️ 여러 줄 입력칸(textarea)은 뺀다. 그건 높이가 곧 내용이다.
   ⚠️ 제목줄의 × 와 손잡이도 뺀다. 그건 박스 부품이 아니라 껍데기 부품이다. */
.card .body input:not([type="checkbox"]):not([type="radio"]),
.card .body select,
.card .body button,
.card .body .btn {
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-top: 0; padding-bottom: 0;
  line-height: normal;
}
/* 글자를 가운데 세운다 — 높이를 고정하면 padding 으로는 안 맞는다 */
.card .body button, .card .body .btn {
  display: inline-flex; align-items: center; justify-content: center;
}
.card .body input[type="color"] { padding: 2px; }
/* 계산기 키패드도 예외 없이 같은 키 (지록: "모든 부분에") */
.card .body .pad button { height: var(--ctl-h); }

.mono, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.card .meta { font-size: var(--fs-sm); color: var(--ink-3); }
.card .row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
/* 박스 맨 아랫줄 — 버튼 하나에 한마디. 시안의 .foot 그대로(margin-top 은 .body 의 gap 이 대신한다) */
.card .foot { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

/* ── 박스 넣기 줄 ───────────────────────── */
/* 뺀 박스가 하나도 없으면 줄째로 사라진다 (지록 2026-08-11) */
/* ⚠️ 지록 지적(2026-08-11) — "박스넣기들 위아래 라인 사이 가운데 정렬해줘, 지금은 위가 좁고 아래가 넓어".
   위는 이 줄의 padding-top 14px 인데 아래는 다음 줄(.sitefoot)의 margin-top 22px 이 맡고 있어서
   칩이 위로 붙어 보였다. 위아래를 이 줄이 같이 잡는다. */
.addbar {
  margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--bg-line);
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
}
.addbar[hidden] { display: none; }
.addbar .lead { font-size: 12.5px; color: var(--bg-ink-2); margin-right: 3px; }
.addbar .chip {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--bg-line); background: transparent; color: var(--bg-ink-2);
  cursor: pointer; white-space: nowrap;
}
.addbar .chip:hover { background: var(--mark); border-color: var(--mark-2); color: var(--mark-ink); }

/* ── 맨 아래 줄 — 글·방침으로 가는 길 (애드센스는 돌아다닐 수 있는지를 본다) ── */
/* 위 여백은 앞의 .addbar 가 이미 잡아뒀다. 박스 넣기 줄이 숨으면(뺀 박스가 없을 때) 여기서 잡는다 */
.sitefoot {
  margin-top: 0; padding-top: 14px; border-top: 1px solid var(--bg-line);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--bg-ink-2);
}
.sitefoot a { color: var(--bg-ink-2); text-decoration: none; }
.sitefoot a:hover { color: var(--bg-ink); text-decoration: underline; text-underline-offset: 3px; }
.sitefoot .note { margin-left: auto; }
.addbar[hidden] ~ .sitefoot { margin-top: 22px; }
@media (max-width: 620px) { .sitefoot .note { margin-left: 0; } }

/* ⚠️ R3(리스크-점검) — EEA·영국은 구글 인증 CMP 배너가 사실상 필수다.
   종일 띄워두는 화면이라 나중에 끼우면 배너가 도구를 가린다. 지금부터 자리를 비워둔다. */
:root { --consent-h: 0px; }
body { padding-bottom: var(--consent-h); }

/* ── 토스트 ───────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(40px + var(--consent-h)); transform: translate(-50%, 8px);
  background: var(--accent); color: var(--accent-ink);
  padding: 9px 15px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
  z-index: 100;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── 메모판에서만 신호색을 줄인다 (유하람 확정 — 한 화면에 두세 번) ────────
   판 탭 하나 + 형광 한 줄만 남기고, 나머지는 색 대신 굵기·먹으로. */
[data-theme="pinboard"] .hl-min { background: none; }
[data-theme="pinboard"] .card button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
[data-theme="pinboard"] .card textarea:focus,
[data-theme="pinboard"] .card input:focus,
[data-theme="pinboard"] .card select:focus { box-shadow: 0 0 0 2px var(--mark); }
/* 합계·대비 판정의 형광 자국은 색 대신 먹으로 (시안-A 규칙 그대로).
   앞에 html 을 붙인 건 멋이 아니다 — 박스 CSS 는 injectCss 로 이 파일보다 늦게 들어가서
   무게가 같으면 박스 쪽이 이긴다. 실제로 메모판에서 합계가 청회로 남아 있었다. */
html[data-theme="pinboard"] .card .sum .n b,
html[data-theme="pinboard"] .card .verdict .say b {
  background: transparent; color: var(--ink); padding: 0;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ══════════════════════════════════════════════════
   자리 옮기기 — 손잡이 · 폭 조절 · 놓일 자리
   (오상길 과장 2026-08-11. 색은 전부 tokens.css 이름만 쓴다)
   ══════════════════════════════════════════════════ */

/* 제목줄 왼쪽 손잡이. 제목줄 전체를 잡으면 × 버튼·한마디와 부딪혀서 따로 뒀다.
   touch-action:none — 손가락으로 잡았을 때 화면이 같이 스크롤되는 것을 막는다 */
.card > h2 .grip {
  flex: 0 0 auto; margin-left: -3px; padding: 2px 3px;
  background: transparent; border: 0; border-radius: 2px;
  color: var(--ink-3); cursor: grab; touch-action: none; line-height: 0;
}
.card > h2 .grip svg { fill: currentColor; display: block; }
.card > h2 .grip:hover { color: var(--ink); background: var(--surface); }
.card > h2 .grip:focus-visible { outline: 0; color: var(--ink); box-shadow: 0 0 0 3px var(--mark); }
body.is-moving, body.is-moving .card > h2 .grip { cursor: grabbing; }

/* 여러 개 놓을 수 있는 박스는 이름을 바꿀 수 있다 — 두 번 누르면 된다는 표시 */
.card > h2 .renamable { cursor: text; }

/* 오른쪽 모서리 — 잡아서 폭을 바꾼다. 평소엔 안 보이고 박스에 손이 가면 나타난다 */
.card > .grab-w {
  position: absolute; top: 0; right: 0; width: 10px; height: 100%;
  cursor: ew-resize; touch-action: none; opacity: 0;
  background: linear-gradient(to right, transparent, var(--mark));
}
.card { position: relative; }
.card:hover > .grab-w, body.is-sizing .card > .grab-w { opacity: .5; }
.card > .grab-w:hover { opacity: 1; }

/* 끌리고 있는 박스 — 손가락을 따라 떠다닌다 */
.card.dragging {
  z-index: 60; pointer-events: none; cursor: grabbing;
  box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: none !important;
}
/* 놓일 자리 — 여기 놓인다는 표시만 */
.drop-slot {
  position: absolute; left: 0; top: 0; z-index: 1;
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); opacity: .6; pointer-events: none;
}

/* ── 판 탭 줄 오른쪽 — 정렬 / 자동 정렬 ────────── */
.tabrow { display: flex; align-items: flex-end; gap: 14px; }
.tabrow .boards { flex: 1 1 auto; min-width: 0; }
.desktools { flex: 0 0 auto; display: flex; gap: 6px; padding-bottom: 6px; }
/* 머리에 있는 버튼도 박스 안 버튼과 같은 키 (지록: "모든 부분에") */
.desktools button, .gearbtn {
  height: var(--ctl-h); padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.desktools button {
  font-family: var(--font); font-size: 11.5px; font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid var(--bg-line); color: var(--bg-ink-2);
  border-radius: var(--radius-sm); padding-left: 9px; padding-right: 9px; white-space: nowrap;
}
.desktools button:hover { color: var(--bg-ink); border-color: var(--bg-ink); }
.desktools button[aria-pressed="true"] {
  background: var(--mark); border-color: var(--mark-2); color: var(--mark-ink);
}
@media (max-width: 620px) { .desktools { display: none; } }

/* 토스트 안의 되돌리기 */
.toast .undo {
  margin-left: 12px; padding: 2px 8px; cursor: pointer;
  font-family: var(--font); font-size: 11.5px; font-weight: 700;
  background: transparent; color: inherit; border-radius: var(--radius-sm);
  border: 1px solid currentColor; opacity: .85;
}
.toast .undo:hover { opacity: 1; }
.toast.on { pointer-events: auto; }

/* 눈에는 안 보이고 스크린리더만 읽는 줄 */
.sr-only {
  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;
}

/* ── 오른쪽 클릭 메뉴 ─────────────────────────────
   판 탭과 박스 제목줄이 같이 쓴다 (지록 결정 2026-08-11 — 윈도우에서 폴더 이름 바꾸듯이).
   .card 가 overflow:hidden 이라 메뉴는 body 에 붙이고 화면 기준으로 띄운다 */
.menu {
  position: fixed; z-index: 200; min-width: 156px; padding: 4px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
  display: flex; flex-direction: column;
}
.menu button {
  font-family: var(--font); font-size: 12.5px; font-weight: 500; text-align: left;
  color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-sm);
  padding: 0 10px; height: var(--ctl-h); cursor: pointer; white-space: nowrap;
}
.menu button:hover, .menu button:focus-visible {
  outline: 0; background: var(--mark); color: var(--mark-ink);
}
.menu button.danger { color: var(--warn); }
.menu button.danger:hover, .menu button.danger:focus-visible {
  background: var(--warn); color: var(--accent-ink);
}
.menu .sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* ── 배치 고정(잠금) ───────────────────────────────
   지록 2026-08-12 "내가 애써 배치한걸 실수로 자동 정렬하지 않게".
   잠겼는지가 **한눈에 보여야** 한다 — 자물쇠 모양 + 켜진 배지(형광) 둘 다 쓴다 */
.desktools .lock { gap: 5px; }
.desktools .lock .ico { display: inline-flex; line-height: 0; }
.desktools .lock .ico svg { display: block; }

/* 잠겨서 지금은 못 누르는 버튼 — 회색으로 죽이되 **누를 수는 있게** 둔다.
   눌러야 "왜 안 되는지"를 말해줄 수 있다. disabled 를 쓰면 클릭 자체가 안 와서 아무 반응이 없다 */
.desktools button[aria-disabled="true"] { opacity: .42; }
.desktools button[aria-disabled="true"]:hover {
  color: var(--bg-ink-2); border-color: var(--bg-line);
}

/* 잠긴 판에서는 잡는 자리도 "잡을 수 없다"고 보여야 한다 */
.board.locked .grip { cursor: default; opacity: .45; }
.board.locked .grip:hover { background: transparent; color: var(--ink-3); }
.board.locked .grab-w { display: none; }

/* 만든 곳 — 지록의 개인사업자 이름(2026-08-11 지시). 상호는 번역하지 않는다 */
.sitefoot__copy { font-size: 11px; color: var(--bg-ink-2); opacity: .75; }
@media (max-width: 620px) { .sitefoot__copy { width: 100%; } }

/* ── 설정 서랍 ─────────────────────────────────────
   오른쪽에서 나온다. 판을 통째로 덮지 않는 게 목적이라 폭을 좁게 잡는다 */
.gearbtn {
  height: var(--ctl-h); width: var(--ctl-h); padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--bg-line); color: var(--bg-ink-2);
  border-radius: var(--radius-sm);
}
.gearbtn:hover { color: var(--bg-ink); border-color: var(--bg-ink); }
.gearbtn svg { display: block; }

.scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.28);
}
.scrim[hidden], .drawer[hidden] { display: none; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151;
  width: min(380px, 92vw); overflow-y: auto;
  background: var(--surface); color: var(--ink);
  border-left: 1px solid var(--line-strong);
  box-shadow: -10px 0 30px rgba(0,0,0,.18);
}

/* 여닫이 모션 (유하람 2026-08-12 · animation-systems 기준값).
   나올 때 260ms 감속(끝에서 사뿐히 멈춘다), 들어갈 때 180ms — 닫기는 "치우는" 동작이라
   빠를수록 손에 맞는다. 막(scrim)은 같은 시간에 페이드. 종일 띄워두는 도구라 이 이상은 시끄럽다.
   시작 자리를 100%+40px 로 둔 것은 왼쪽으로 번지는 그림자(blur 30px)까지 화면 밖으로 내보내기 위해서다.
   `hidden` 은 JS 가 미끄러져 나간 **뒤에** 붙인다 — 붙는 순간 display:none 이라 모션이 안 보인다.
   prefers-reduced-motion 이면 맨 아래 공통 규칙(transition: none)이 둘 다 끈다. */
.drawer { transform: translateX(calc(100% + 40px)); transition: transform .18s cubic-bezier(.4,0,.7,1); }
.drawer.on { transform: none; transition: transform .26s cubic-bezier(.32,.72,0,1); }
.scrim { opacity: 0; transition: opacity .18s ease; }
.scrim.on { opacity: 1; transition: opacity .26s ease; }
.drawer .inner { padding: 0 var(--pad) 28px; }
.drawer .dhead {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0 12px; margin-bottom: 4px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.drawer .dhead h2 {
  margin: 0; flex: 1 1 auto;
  font-family: var(--font-title); font-size: 15px; font-weight: 800; letter-spacing: -.02em;
}
.drawer .dhead .x {
  flex: 0 0 auto; height: var(--ctl-h); width: var(--ctl-h); padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 16px; line-height: 1; color: var(--ink-3);
  background: transparent; border: 0; border-radius: var(--radius-sm);
}
.drawer .dhead .x:hover { color: var(--accent-ink); background: var(--accent); }

.drawer section { padding: 14px 0 4px; border-bottom: 1px solid var(--line); }
.drawer section:last-child { border-bottom: 0; }
.drawer h3 {
  margin: 0 0 10px; font-family: var(--font-title);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.drawer .srow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0;
}
.drawer .srow .lab { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; }
.drawer .srow .lab small {
  display: block; margin-top: 3px;
  font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); line-height: 1.5;
}
.drawer .srow > button, .drawer .srow > .seg { flex: 0 0 auto; }
/* 조작하는 것은 설명 아래 · 오른쪽 (지록 2026-08-12 — settings.js 의 row() 주석 참고).
   설명이 좁은 칸에 갇히지 않아 한 줄로 읽히고, 누르는 자리는 오른쪽 그대로다.
   `.lab` 을 뺀 나머지 하나가 무엇이든(버튼 묶음·숫자 칸·버튼) 같은 규칙을 받는다 */
.drawer .srow.below { flex-direction: column; align-items: stretch; gap: 7px; }
/* ⚠️ `flex: 0 0 auto` 를 꼭 다시 준다. 위에서 숫자 칸에 준 `flex: 0 0 84px` 의 84px 는
   가로로 놓였을 땐 **폭**이지만, 세로로 세우는 순간 **높이**로 읽힌다 —
   실제로 입력칸이 84px 짜리 큰 상자가 됐다(지록 2026-08-12 "왜이렇게 커?").
   여기서 auto 로 되돌리면 높이는 --ctl-h(32px), 폭은 width 값이 그대로 산다 */
.drawer .srow.below > :not(.lab) { align-self: flex-end; flex: 0 0 auto; }
.drawer .srow input[type="number"] {
  flex: 0 0 84px; width: 84px; height: var(--ctl-h);
  font-family: var(--font); font-size: 12.5px; color: var(--ink); text-align: right;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 0 8px;
}
.drawer .srow input[type="number"]:focus {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--mark);
}
.drawer button {
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
  height: var(--ctl-h); padding: 0 11px; white-space: nowrap;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.drawer button:hover { background: var(--surface-2); border-color: var(--ink-3); }
.drawer button.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.drawer button.danger { color: var(--warn); border-color: var(--warn); }
.drawer button.danger:hover { background: var(--warn); color: var(--accent-ink); }
.drawer button:disabled { opacity: .45; cursor: default; }

/* 눈금 고르기 — 셋 중 하나 */
.drawer .seg { display: flex; }
.drawer .seg button { border-radius: 0; margin-left: -1px; }
.drawer .seg button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.drawer .seg button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.drawer .seg button[aria-pressed="true"] {
  background: var(--mark); border-color: var(--mark-2); color: var(--mark-ink); z-index: 1;
}

/* 내보내기 밑에 붙는 줄 — 그림 포함 여부와 예상 용량 */
.drawer .srow.sub { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 0; }
.drawer .srow.sub label {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2);
}
.drawer .srow.sub .size { font-size: var(--fs-sm); color: var(--ink-3); padding-left: 24px; }