/* 디자인 «기본» — 어두운 제도판.
 *
 * 이것이 레퍼런스를 반영하기 전의 생김새입니다. 비교해 보려고 남겨 두었습니다.
 * 머리줄의 `기본 / 1` 로 바꿉니다 (단축키 D).
 *
 * 도면 잉크색은 여기 없습니다 — src/themes.js 의 THEMES.basic.inks 에 있습니다.
 * 여기서 그 색이 필요하면 --ink-cut 처럼 쓰면 됩니다.
 *
 * 이 프로그램이 다루는 것은 실측 도면입니다. 그래서 생김새도 제도 도구를 따릅니다.
 *   · 모서리는 굴리지 않습니다 (직각)
 *   · 면은 1px 얇은 선으로만 나눕니다 (그림자·유리효과 없음)
 *   · 버튼은 채우지 않고, 켜진 것만 밝게 반전시킵니다
 *   · 숫자를 라벨보다 크고 또렷하게 (자릿수가 흔들리지 않는 tabular-nums)
 *   · 주황은 세 곳에만 — 지금 모드 · 지금 값 · 산접기선
 *
 * 간격은 4 / 8 / 16 / 24 한 가지 자로만 씁니다.
 */

:root {
  /* 면 */
  --bg: #0e0e11;
  --surface: #15151a;
  --surface-2: #1b1b21;
  --sunken: #101014;
  --line: #2a2a33;
  --line-strong: #3d3d4a;

  /* 글자 */
  --text: #e6e6ec;
  --text-dim: #8b8b98;
  --text-faint: #5f5f6b;

  /* 강조 — 여기 말고는 쓰지 않습니다 */
  --accent: #ff9f0a;

  /* 도면 선 색 (2D 화면·인쇄 공통) */
  --cut: #ff5f56;
  --mountain: #ff9f0a;
  --valley: #4aa3ff;

  /* 간격 */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;

  /* 숫자용 글꼴 — 도면의 치수처럼 보이도록 */
  --mono: 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
}

/* 기본 틀은 styles/reset.css 가 잡아 둡니다. 여기서는 색과 글꼴만. */
html, body {
  background: var(--bg);
  color: var(--text);
  font: 12px/1.5 -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
}

/* ── 화면 모드 ────────────────────────────────────────────
 *
 * 조작 요소는 문서에 한 번만 있고, 모드에 따라 **자리만** 바뀝니다.
 * 자리 이름: head(머리줄) · rail(아이콘 줄) · side(조작 묶음) ·
 *            views(3D+전개도) · asm(조립 조작) · gal(비교 갤러리)
 *
 * minmax(0, …) 을 꼭 씁니다. 없으면 내용 폭만큼 화면이 늘어나 오른쪽이 잘립니다.
 */

#app {
  display: grid;
  height: 100%;
  background: var(--line);   /* 칸 사이 1px 선이 이 색으로 보입니다 */
  gap: 1px;
  position: relative;        /* 전시 모드에서 떠 있는 조립 조작의 기준 */
}

/* 정밀 (기본) — 왼쪽에 아이콘 줄과 조작 묶음 전부, 오른쪽에 화면.
   왼쪽 바 폭은 손잡이를 끌어 바꿉니다. (--side-w) */
#app {
  --side-w: 300px;
}

#app[data-mode='precise'] {
  grid-template-areas:
    'head head head head'
    'rail side grip views'
    'rail side grip asm';
  grid-template-columns: auto var(--side-w) 5px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* 전시 — 화면만. 조립 조작은 아래에 떠 있다가 마우스를 올리면 진해집니다 */
#app[data-mode='show'] {
  grid-template-areas:
    'head'
    'views';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

/* 비교 — 카드 격자가 전부 */
#app[data-mode='compare'] {
  grid-template-areas:
    'head'
    'gal';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

#topbar    { grid-area: head; }
#rail      { grid-area: rail; }
#side      { grid-area: side; }
#side-grip { grid-area: grip; }
#views     { grid-area: views; }
#assembly  { grid-area: asm; }
#gallery   { grid-area: gal; }

/* 모드마다 필요 없는 것은 감춥니다 */
#app:not([data-mode='precise']) #rail,
#app:not([data-mode='precise']) #side,
#app:not([data-mode='precise']) #side-grip { display: none; }
#app[data-mode='compare']  #views,
#app[data-mode='compare']  #assembly { display: none; }
#app:not([data-mode='compare']) #gallery { display: none; }

/* 왼쪽 바 폭 조절 손잡이 */
#side-grip {
  background: var(--surface);
  cursor: col-resize;
}
#side-grip:hover,
#side-grip.dragging { background: var(--accent); }

/* 전시 모드의 떠 있는 조립 조작 */
#app[data-mode='show'] #assembly {
  position: absolute;
  left: 50%;
  bottom: var(--s4);
  transform: translateX(-50%);
  width: min(640px, 94vw);
  background: rgba(21, 21, 26, 0.9);
  border: 1px solid var(--line);
  opacity: 0.3;
  transition: opacity 0.15s;
}
#app[data-mode='show'] #assembly:hover { opacity: 1; }

/* 전시 모드의 조립 줄은 **늘 한 줄**입니다.
   진행 글씨가 «평면 0%» 에서 «입체 100%» 로 길어지거나 단추가
   «조립» → «멈춤/펼치기» 로 바뀌면 폭이 늘어 두 줄로 접히곤 했습니다.
   줄바꿈을 막되, 밀대가 아예 사라지지 않도록 최소 폭을 줍니다.
   (막기만 하면 남는 자리를 밀대가 다 내주고 점 하나로 쪼그라듭니다) */
#app[data-mode='show'] #assembly,
#app[data-mode='show'] #assembly .row { flex-wrap: nowrap; }
#app[data-mode='show'] #in-t { flex: 1 1 auto; min-width: 90px; }
#app[data-mode='show'] #in-speed { flex: 0 1 auto; width: 56px; min-width: 40px; }

/* ── 위쪽 줄 ─────────────────────────────────────────────── */

#topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s2) var(--s3) var(--s2) 90px; /* 왼쪽은 맥 신호등 버튼 자리 */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  -webkit-app-region: drag; /* 빈 곳을 잡고 창을 옮길 수 있게 */
}

#topbar h1 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  white-space: nowrap;
}

/* 화면 모드 고르는 줄 — 주황을 쓰는 첫 번째 자리 */
#modes {
  display: flex;
  gap: 0;
  -webkit-app-region: no-drag;
}

#modes .mode-btn {
  border: 1px solid var(--line);
  border-right-width: 0;
  padding: 3px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--text-faint);
}
#modes .mode-btn:last-child { border-right-width: 1px; }
#modes .mode-btn:hover { color: var(--text); }
#modes .mode-btn.on {
  color: var(--accent);
  border-color: var(--accent);
  border-right-width: 1px;
  font-weight: 600;
}
#modes .mode-btn.on + .mode-btn { border-left-width: 0; }

#topbar .group,
#topbar button,
#topbar select,
#topbar input,
#topbar label {
  -webkit-app-region: no-drag; /* 조작할 수 있는 것들은 드래그 제외 */
}

.group {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* 조작 묶음 이름 — 작고 자간을 벌려 라벨임을 분명히 */
.group-label,
.field-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  white-space: nowrap;
}

.info {
  margin-left: auto;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 눌러서 펼치는 목록 (내보내기) ────────────────────────── */

.menu { position: relative; }

.menu > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  padding: 4px var(--s2);
  color: var(--text-dim);
  white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ' ▾'; color: var(--text-faint); }
.menu > summary:hover { border-color: var(--line-strong); color: var(--text); }
.menu[open] > summary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.menu-body {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 172px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

.menu-body button {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: var(--s2) var(--s3);
  text-align: left;
  font-size: 11px;
}
.menu-body button:last-child { border-bottom: 0; }
.menu-body button:hover { background: var(--surface-2); color: var(--text); }

/* ── 공통 조작 요소 ───────────────────────────────────────── */

button,
select,
input[type='number'],
input[type='text'] {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 4px var(--s2);
  font: inherit;
  white-space: nowrap;
  flex: none;
}

button { cursor: pointer; color: var(--text-dim); }
button:hover { border-color: var(--line-strong); color: var(--text); }
button:active { background: var(--surface-2); }
button:disabled { opacity: 0.35; cursor: default; }

/* 켜진 상태는 색이 아니라 밝기로 뒤집습니다 — 한눈에 보이고 요란하지 않습니다 */
button.on,
button.toggle.on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 600;
}

button.primary {
  color: var(--text);
  border-color: var(--line-strong);
  min-width: 76px;
  letter-spacing: 0.06em;
}
button.primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

button.toggle { padding: 3px var(--s2); font-size: 11px; }

select {
  padding-right: var(--s3);
  color: var(--text);
}

input[type='number'],
input[type='text'] {
  background: var(--surface-2);
  width: 62px;
  padding: 4px 6px;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* 오르내리는 화살표(스피너)를 없앱니다.
   자리를 많이 먹어 숫자가 잘리고, 제도 도구 느낌과도 맞지 않습니다.
   값은 직접 적거나 위아래 화살표 키로 바꿉니다. */
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number']:focus,
input[type='text']:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

label { color: var(--text-dim); white-space: nowrap; }
label.check { display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; }

input[type='checkbox'] {
  accent-color: var(--text);
  width: 12px;
  height: 12px;
}

input[type='range'] {
  accent-color: var(--accent);
  height: 2px;
}

/* 지금 값 — 주황을 쓰는 두 번째 자리 */
output {
  color: var(--accent);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── 가운데 두 화면 ───────────────────────────────────────── */

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  min-height: 0;
}

.pane {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
  min-height: 0;
}

.pane-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s2) var(--s1) var(--s3);
  min-height: 28px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.pane-title span:first-child {
  color: var(--text-dim);
  font-weight: 600;
}

.pane-hint {
  margin-left: auto;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--text-faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 화면이 좁으면 안내문은 잘려 보이기보다 숨는 편이 깔끔합니다 */
.pane { container-type: inline-size; }
@container (max-width: 420px) {
  .pane-hint { display: none; }
}

.pane canvas {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 0;
}

#canvas2d { cursor: grab; }
#canvas2d.dragging { cursor: grabbing; }

/* ── 왼쪽 아이콘 줄 (정밀 모드) ───────────────────────────── */

#rail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  padding: var(--s2) 0;
}

#rail button {
  border: 0;
  border-left: 2px solid transparent;
  padding: var(--s2) var(--s2);
  width: 46px;
  font-size: 11px;
  text-align: center;
}
#rail button.on {
  background: var(--surface-2);
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

/* ── 3D 화면에서 마우스를 올린 곳의 치수 ─────────────────── */

#pane3d { position: relative; }

#hover3d {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: 2px var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#hover3d[data-kind='edge'] { border-color: var(--accent); color: var(--accent); }

/* ── 무엇을 골라 고칠지 — 점 / 변 / 면 / 전체 (아이콘) ────── */

#pick-tools { display: flex; gap: 0; flex: none; }

#pick-tools button {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-right-width: 0;
  background: transparent;
  color: var(--text-faint);
  line-height: 0;
}
#pick-tools button:last-child { border-right-width: 1px; }
#pick-tools button:hover { color: var(--text); border-color: var(--line-strong); }
#pick-tools button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1200;
}

#pick-tools svg { width: 17px; height: 17px; display: block; }
#pick-tools .wire      { fill: none; stroke: currentColor; stroke-width: 1.2; }
#pick-tools .knob-line { fill: none; stroke: currentColor; stroke-width: 2.2; }
#pick-tools .knob      { fill: currentColor; stroke: none; }
#pick-tools .knob-fill { fill: currentColor; opacity: 0.35; stroke: none; }

/* ── 조작 묶음 ────────────────────────────────────────────── */

#side {
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* 묶음 하나 = 제목 + 내용. 제목을 누르면 접힙니다. */
.panel { background: var(--surface); }
.panel + .panel { border-top: 1px solid var(--line); }

.panel-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  cursor: pointer;
  user-select: none;
}
.panel-head:hover { color: var(--text-dim); }
.panel[open] > .panel-head { color: var(--text-dim); }

.panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 var(--s3) var(--s3);
}
.panel:not([open]) > .panel-body { display: none; }

/* 사이드바는 좁습니다. 한 줄에 다 안 들어가면 줄을 바꿉니다. */
.panel-body .row { flex-wrap: wrap; gap: var(--s1) var(--s2); }
.panel-body select { max-width: 100%; }
.panel-body input[type='number'] { width: 50px; }

/* 치수 줄은 숫자·기호·단위가 한 덩어리라 줄을 바꾸지 않습니다.
   (mm 만 다음 줄로 떨어지면 읽기 어렵습니다) */
#size-group,
#sheet-size-row { flex-wrap: nowrap; }
.panel-body #size-group input[type='number'] { width: 46px; }
.panel-body #sheet-size-row input[type='number'] { width: 48px; }

/* 정밀 모드에서는 모든 묶음을 펼치므로, 수치가 스크롤 아래로 밀리지 않게 맨 위로 올립니다. */
#app[data-mode='precise'] .panel[data-group='metrics'] { order: -1; }

.tool-row { padding-top: var(--s1); border-top: 1px solid var(--line); }

#edit-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2) 0 0;
  border-top: 1px solid var(--line);
}

#edit-info,
#simplify-info {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  padding: var(--s2);
  background: var(--sunken);
  border-left: 2px solid var(--line);
}
/* 할 말이 없으면 칸 자체가 없어야 합니다.
   비어 있는 채로 두면 바탕색 띠만 남아 무엇을 기다리는 것처럼 보입니다. */
#edit-info:empty,
#simplify-info:empty { display: none; }

#edit-info b,
#simplify-info b {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--mono);
}

.edit-divider {
  height: 1px;
  background: var(--line);
  margin: var(--s1) calc(var(--s3) * -1);
}

.edit-head {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.14em;
}

#edit-panel input[type='number'] { width: 54px; }
#edit-panel .row { flex-wrap: wrap; gap: var(--s1) var(--s2); }
#edit-panel select { padding: 2px var(--s1); font-size: 11px; }

#in-density { flex: 1; min-width: 64px; }
#out-density { min-width: 36px; text-align: right; }

.times { color: var(--text-faint); }
.unit { font-size: 10px; color: var(--text-faint); }
#size-group input[type='number'] { width: 54px; }

/* ── 조립 조작 (화면 아래 한 줄) ──────────────────────────── */

#assembly {
  background: var(--surface);
  padding: var(--s2) var(--s3);
}

#assembly .row { flex-wrap: wrap; gap: var(--s2) var(--s3); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.row.small { font-size: 11px; gap: var(--s2) var(--s3); }
.row.small button { padding: 2px var(--s2); }

#in-t { flex: 1; }
#in-speed { width: 72px; }
#out-t { min-width: 72px; text-align: right; }

/* ── 수치 ─────────────────────────────────────────────────
 *
 * 무엇을 먼저 볼지 정해 둡니다.
 * 큰 숫자 세 개(면/모서리 · 전개 조각 · 전개도 크기)를 위에 놓고,
 * 나머지는 `자세히` 안으로 접어 둡니다.
 */

#metrics-headline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}

/* 왼쪽 바는 좁으므로 큰 숫자를 두 줄로 접어 놓습니다 */
#app[data-mode='precise'] #metrics-headline {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#metrics-headline > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* 이름과 값을 같은 크기로 작게 둡니다. 차이는 색으로만. */
.m-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}

.m-value {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#metrics-more { font-size: 11px; }

#metrics-more > summary {
  cursor: pointer;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding-top: var(--s1);
  list-style: none;
}
#metrics-more > summary::-webkit-details-marker { display: none; }
#metrics-more > summary::before { content: '+ '; }
#metrics-more[open] > summary::before { content: '− '; }
#metrics-more > summary:hover { color: var(--text-dim); }

#metrics {
  margin: var(--s1) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s4);
}

#metrics > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
}

#metrics dt,
#metrics dd {
  font-size: 11px;
  white-space: nowrap;      /* 좁아도 글자 단위로 쪼개지지 않게 */
}
#metrics dt { color: var(--text-faint); }
#metrics dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 비교 갤러리 ──────────────────────────────────────────── */

#gallery {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#gallery-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
#gallery-bar .info { font-size: 11px; }

/* 한 줄에 몇 개를 놓을지는 조작줄에서 정합니다 (--gal-cols). */
#gallery-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(var(--gal-cols, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  align-content: start;
}

/* 카드는 그림 하나입니다. 글씨는 마우스를 올렸을 때만 아래에 겹칩니다. */
/* overflow 를 숨기지 않습니다.
   숨기면 격자가 이 칸의 높이를 그림에서 읽지 못해 (스크롤되는 칸은 높이를 요구하지 않으므로)
   줄끼리 자리를 똑같이 나눠 갖고 그림이 잘립니다. */
.gal-card {
  position: relative;
  background: var(--sunken);
  cursor: pointer;
  border: 1px solid transparent;
}
.gal-card.picked { border-color: var(--accent); }

/* 고른 것은 모서리 표시로 알아봅니다 (글씨가 없으므로) */
.gal-card.picked::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  border: 10px solid var(--accent);
  border-left-color: transparent;
  border-bottom-color: transparent;
}

/* 칸 모양을 미리 정하지 않습니다. 그림이 제 비율대로 들어와야
   전개도 전체가 잘리지 않고 한 눈에 보입니다.
   대지가 여러 장인 전개도는 길쭉해지므로 너무 길어지지 않게만 막아 둡니다. */
/* 칸의 가로세로 비는 그림에서 받아 옵니다 (src/ui/gallery.js 가 넣어 줍니다).
   그래야 칸이 그림 모양대로 잡혀서 전개도 전체가 잘리지 않고 보입니다.
   아래 4/3 은 아직 못 받았을 때의 기본값입니다. */
.gal-thumb {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--s2);
  min-height: 0;
}
.gal-thumb svg { width: 100%; height: 100%; }

/* 겹쳐 뜨는 글씨 */
.gal-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s1) var(--s2);
  background: var(--surface);
  border-top: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.12s;
}
.gal-card:hover .gal-meta,
.gal-card:focus-within .gal-meta { opacity: 1; }

.gal-name {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.gal-name b { color: var(--text); font-weight: 600; font-family: var(--mono); }

.gal-nums {
  display: flex;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
}
.gal-nums b { color: var(--text-dim); font-weight: 600; }


/* ══ 이 디자인이 만들어진 뒤에 생긴 것들 ═══════════════════════════ */

/* ── 언어 (KO / EN) · 디자인 (기본 / 1) ─────────────────────
   화면 모드 줄과 같은 규칙으로 둡니다. 폭을 고정해 글자가 바뀔 때
   옆의 것들이 흔들리지 않게 합니다. */
#langs,
#designs { display: flex; gap: 0; }

#langs .lang-btn,
#designs .design-btn {
  min-width: 30px;
  border: 1px solid var(--line);
  border-right-width: 0;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-align: center;
  background: transparent;
  color: var(--text-faint);
}
#langs .lang-btn:last-child,
#designs .design-btn:last-child { border-right-width: 1px; }
#langs .lang-btn:hover,
#designs .design-btn:hover { color: var(--text); border-color: var(--line-strong); }

/* 켜진 것은 강조색으로 (이 디자인의 규칙) */
#langs .lang-btn.on,
#designs .design-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1200;
  font-weight: 700;
}

/* ── 리소그래프 전용 장식은 이 디자인에서 쓰지 않습니다 ────── */
.mark,
.mark-grid { display: none; }

/* 한글 제목 옆의 라틴 병기도 이 디자인에는 없었습니다 */
.panel-head .en,
.pane-title .en { display: none; }

/* 기준면 «선택» 을 켠 동안 — 눌러 둔 것처럼 어둡게 파 넣습니다.
   어두운 제도판이라 밝게 뒤집으면 «지금 고르는 중» 이 아니라 «다 됐다» 로 읽힙니다. */
#btn-base-pick.toggle.picking {
  background-image: none;
  background-color: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* 설명 풍선 — 직접 그립니다 (운영체제 기본 풍선은 글씨 크기를 정할 수 없습니다).
   글씨는 6pt. 줄바꿈은 사전에 넣어 둔 그대로 살립니다(pre-line). */
#tip {
  position: fixed;
  z-index: 9999;
  max-width: 380px;
  padding: var(--s2) var(--s3);
  font-size: 6pt;
  line-height: 1.7;
  white-space: pre-line;
  pointer-events: none;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
#tip[hidden] { display: none; }