/* 디자인 «2» — 손으로 그린 개념도.
 *
 * 레퍼런스: 흰 종이에 검정 잉크 하나로 그린 마인드맵.
 *
 *   · 색은 검정 하나뿐입니다. 강조색을 쓰지 않고 굵기·점선·타원으로만 말합니다.
 *   · 글자 크기의 위계가 거의 없습니다. 제목도 값도 라벨도 비슷한 크기입니다.
 *   · 글씨가 열과 줄을 맞추지 않습니다. 칸마다 조금씩 어긋나게 들여씁니다.
 *   · 이어진 것들은 **선**으로 잇습니다 (점선 리더 · 갈고리 · 화살표).
 *   · 켜진 것은 채우지 않고 **타원으로 동그라미 칩니다.** 손으로 그은 것처럼.
 *   · 곁말(라틴 병기)은 선에 붙은 주석처럼 살짝 기울여 둡니다.
 *   · 모서리는 굴리지 않되, 도형은 원과 타원을 씁니다.
 *
 * 도면 잉크색은 여기 없습니다 — src/themes.js 의 THEMES['2'].inks 에 있습니다.
 * 이 디자인의 도면도 검정 한 색입니다 (회색 단계와 점선으로 구별합니다).
 * 여기서 그 색이 필요하면 --ink-cut 처럼 쓰면 됩니다.
 */

:root {
  /* 종이와 잉크 — 이 둘이 전부입니다 */
  --paper: #ffffff;
  --paper-2: #f4f4f2;      /* 아주 옅게 눌린 자리 */
  --paper-3: #e9e9e6;
  --sheet: #ffffff;

  --ink: #111111;
  --ink-mid: #5c5c5c;
  --ink-faint: #9a9a9a;
  --rule: #d6d6d2;         /* 칸을 나누는 실선 */
  --rule-soft: #e8e8e4;

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

  /* 글꼴 — 레퍼런스의 평범한 산세리프. 손글씨 옆에 놓여도 튀지 않는 얼굴입니다. */
  --sans: 'Helvetica Neue', Helvetica, 'Apple SD Gothic Neo', Arial, sans-serif;

  /* 크기 — 위계를 거의 두지 않습니다. 두 단계뿐입니다. */
  --t-small: 10px;         /* 곁말 · 단위 */
  --t-body: 12px;          /* 나머지 전부 — 제목도 값도 라벨도 */
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font: var(--t-body)/1.5 var(--sans);
  letter-spacing: 0;
}

/* ── 화면 모드 ────────────────────────────────────────────
 *
 * 조작 요소는 문서에 한 번만 있고, 모드에 따라 **자리만** 바뀝니다.
 * 자리 이름: head · rail · side · grip · views · asm · gal
 */

#app {
  --side-w: 300px;
  display: grid;
  height: 100%;
  background: var(--rule);
  gap: 1px;
  position: relative;
}

#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(--paper);
  cursor: col-resize;
}
#side-grip:hover,
#side-grip.dragging { background: var(--ink); }

#app[data-mode='show'] #assembly {
  position: absolute;
  left: 50%;
  bottom: var(--s4);
  transform: translateX(-50%);
  width: min(640px, 94vw);
  background: var(--paper);
  border: 1px solid var(--ink);
  opacity: 0.5;
  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: 14px var(--s3) 14px 90px;   /* 왼쪽은 맥 신호등 버튼 자리 */
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  -webkit-app-region: drag;
}

/* 한 줄에 나란히 세우지 않습니다. 조금씩 위아래로 어긋나게 —
   레퍼런스에서 글씨들이 줄을 맞추지 않고 놓인 것처럼. */
#topbar h1      { transform: translateY(-3px); }
#modes          { transform: translateY(4px); }
#langs          { transform: translateY(-5px); }
#designs        { transform: translateY(2px); }
#topbar .group  { transform: translateY(-2px); }
#model-info     { transform: translateY(6px); }

#topbar h1 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: var(--t-body);
  font-weight: 400;                    /* 제목도 굵게 하지 않습니다 */
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* 머리줄 표식 — 레퍼런스의 동그라미들처럼 속을 비웁니다 */
.mark {
  display: block;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  flex: none;
}

.group {
  display: flex;
  align-items: center;
  gap: var(--s2);
  -webkit-app-region: no-drag;
}

.info {
  margin-left: auto;
  color: var(--ink-mid);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 고르는 줄 (모드 · 언어 · 디자인) ───────────────────────
   상자를 두르지 않습니다. 글씨만 두고, 고른 것에 **타원**을 칩니다.
   레퍼런스에서 중요한 말에 동그라미를 친 것과 같은 방법입니다. */

#modes,
#langs,
#designs { display: flex; gap: var(--s2); -webkit-app-region: no-drag; }

#modes .mode-btn,
#langs .lang-btn,
#designs .design-btn {
  position: relative;
  border: 0;
  background: transparent;
  padding: 3px 9px;
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink-faint);
  white-space: nowrap;
}
#modes .mode-btn:hover,
#langs .lang-btn:hover,
#designs .design-btn:hover { color: var(--ink); }

/* 켜진 것 — 손으로 그은 듯한 타원 */
#modes .mode-btn.on,
#langs .lang-btn.on,
#designs .design-btn.on { color: var(--ink); }

#modes .mode-btn.on::after,
#langs .lang-btn.on::after,
#designs .design-btn.on::after {
  content: '';
  position: absolute;
  inset: -2px -3px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
}

/* ── 공통 조작 요소 ───────────────────────────────────────
   상자 대신 **밑줄**입니다. 종이에 적어 넣은 자리처럼. */

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

button { cursor: pointer; padding: 2px var(--s2); }
button:hover { border-bottom-width: 2px; padding-bottom: 1px; }
button:active { color: var(--ink-mid); }
button:disabled { color: var(--ink-faint); border-bottom-color: var(--rule); cursor: default; }

/* 켠 상태 토글도 타원으로 */
button.toggle { position: relative; border-bottom-color: var(--rule); }
button.toggle.on { border-bottom-color: transparent; }
button.toggle.on::after {
  content: '';
  position: absolute;
  inset: -1px -4px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
}

button.primary { border-bottom-width: 2px; padding-bottom: 1px; }
button.primary:hover { border-bottom-width: 3px; padding-bottom: 0; }

select {
  appearance: none;
  padding-right: 18px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 8px center, right 4px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
select:focus { outline: 1px solid var(--ink); outline-offset: 2px; }

input[type='number'] {
  width: 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* 네모 칸 — 채우지 않고 표시만 */
input[type='checkbox'] {
  appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  background: transparent;
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
}
input[type='checkbox']:checked::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

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

/* 밀대 — 레퍼런스의 화살표 선처럼 가는 선에 점 하나 */
input[type='range'] {
  appearance: none;
  background: transparent;
  height: 14px;
  flex: 1;
  min-width: 60px;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--ink);
}
input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ink);
}

#in-t, #in-density, #in-speed { flex: 1; }
#out-t, #out-density {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.times { color: var(--ink-faint); }
.unit,
.field-label {
  font-size: var(--t-small);
  color: var(--ink-mid);
  white-space: nowrap;
}

/* ── 왼쪽 줄 (보기 / 편집) ────────────────────────────────
   글씨를 세로로 세워 둡니다. 레퍼런스에서 선을 따라 돌아간 글자처럼. */

#rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  background: var(--paper);
  padding: var(--s4) var(--s2);
  position: relative;
}

/* 줄 옆으로 흐르는 세로선 하나 — 개념도의 줄기 */
#rail::before {
  content: '';
  position: absolute;
  top: var(--s3);
  bottom: var(--s3);
  right: 0;
  border-right: 1px solid var(--rule);
}

#rail button {
  position: relative;
  border: 0;
  padding: var(--s2) 2px;
  font-size: var(--t-body);
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
}
#rail button:nth-of-type(1) { transform: translateX(-3px); }
#rail button:nth-of-type(2) { transform: translateX(4px); }
#rail button:hover { color: var(--ink); }
#rail button.on { color: var(--ink); }
#rail button.on::after {
  content: '';
  position: absolute;
  inset: -2px -3px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

/* 십자 격자 — 흩어진 점들로 */
/* 흩어진 점들 — 격자로 두되 하나하나 제자리에서 밀어냅니다 */
.mark-grid {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  color: var(--ink-faint);
  font-size: var(--t-small);
  line-height: 1;
}
.mark-grid > span:nth-child(1) { transform: translate(2px, -3px); }
.mark-grid > span:nth-child(2) { transform: translate(-3px, 2px); }
.mark-grid > span:nth-child(3) { transform: translate(1px, 4px); }
.mark-grid > span:nth-child(4) { transform: translate(-2px, 1px); }
.mark-grid > span:nth-child(5) { transform: translate(3px, -2px); }
.mark-grid > span:nth-child(6) { transform: translate(-1px, -4px); }
.mark-grid > span:nth-child(7) { transform: translate(4px, 2px); }
.mark-grid > span:nth-child(8) { transform: translate(-2px, -1px); }
.mark-grid > span:nth-child(9) { transform: translate(1px, 3px); }

/* ── 조작 묶음 (왼쪽 바) ──────────────────────────────────── */

#side {
  background: var(--paper);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 빈 자리에 크게 걸친 타원 하나. 레퍼런스의 손으로 그은 동그라미처럼,
   화면 밖으로 반쯤 나가 있어 어디에도 딱 맞지 않습니다. */
#side::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: 40px;
  width: 190px;
  height: 260px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* 묶음마다 들여쓰기를 다르게 — 줄을 맞추지 않습니다 */
.panel {
  position: relative;
  z-index: 1;
  border-bottom: 0;
}
.panel:nth-child(1) { margin-left: 0; }
.panel:nth-child(2) { margin-left: 22px; }
.panel:nth-child(3) { margin-left: 9px; }
.panel:nth-child(4) { margin-left: 30px; }
.panel:nth-child(5) { margin-left: 14px; }

/* 위로 띄우는 간격도 제각각입니다 */
.panel:nth-child(2) > .panel-head { padding-top: var(--s4); }
.panel:nth-child(3) > .panel-head { padding-top: 14px; }
.panel:nth-child(4) > .panel-head { padding-top: 30px; }

/* 앞 묶음에서 이 묶음으로 내려오는 가지 — 비스듬한 선 하나 */
.panel + .panel::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 4px;
  width: 22px;
  border-top: 1px solid var(--ink);
  transform: rotate(52deg);
  transform-origin: left center;
  pointer-events: none;
}

/* 묶음 제목 — 앞에 점 하나를 찍고 뒤로 선을 흘립니다. 개념도의 마디처럼. */
.panel-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s2);
  margin-left: var(--s2);
  cursor: pointer;
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--ink);
  user-select: none;
}
.panel-head::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}
.panel-head::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--rule);
  margin-left: var(--s1);
}
.panel-head:hover::after { border-top-color: var(--ink); }
.panel:not([open]) > .panel-head::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.panel[open] > .panel-head::after { border-top-style: solid; }
.panel:not([open]) > .panel-body { display: none; }

/* 곁말 — 선에 붙은 주석처럼 살짝 기울여 둡니다 */
.panel-head .en {
  font-size: var(--t-small);
  color: var(--ink-faint);
  transform: rotate(-4deg);
  transform-origin: left center;
  white-space: nowrap;
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 var(--s3) var(--s3);
}

/* 열과 줄을 일부러 어긋냅니다 — 레퍼런스처럼 자리가 조금씩 흔들립니다 */
.panel-body .row:nth-child(2n)   { padding-left: 12px; }
.panel-body .row:nth-child(3n+1) { padding-left: 4px; }
.panel-body .row:nth-child(5n)   { padding-left: 20px; }

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.row.small { font-size: var(--t-body); gap: var(--s2); }
.row.small button { font-size: var(--t-body); }
.tool-row { gap: var(--s3); }

.panel-body select { flex: 1; min-width: 0; }
.panel-body input[type='number'] { width: 58px; }
.panel-body #size-group input[type='number'] { width: 46px; }
.panel-body #sheet-size-row input[type='number'] { width: 52px; }
#sheet-size-row { flex-wrap: nowrap; }

/* 안내 · 결과 — 왼쪽에 갈고리를 하나 긋습니다 (개념도의 가지) */
#edit-info,
#simplify-info {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-mid);
  padding: var(--s1) 0 var(--s1) var(--s2);
  border-left: 1px solid var(--ink);
  margin-left: var(--s1);
}
/* 할 말이 없으면 칸 자체가 없어야 합니다. */
#edit-info:empty,
#simplify-info:empty { display: none; }

#edit-info b,
#simplify-info b { color: var(--ink); font-weight: 700; }

/* 무엇을 골라 고칠지 — 점 / 변 / 면 / 전체 (아이콘) */
.pick-tools { display: flex; gap: var(--s2); flex: none; }

.pick-tools button {
  position: relative;
  padding: 3px;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  line-height: 0;
}
.pick-tools button:hover { color: var(--ink); }
.pick-tools button.on { color: var(--ink); }
.pick-tools button.on::after {
  content: '';
  position: absolute;
  inset: -3px -2px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.pick-tools svg { width: 18px; height: 18px; display: block; }
.pick-tools .wire      { fill: none; stroke: currentColor; stroke-width: 1.1; }
.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.18; stroke: none; }

/* ── 산출 수치 ────────────────────────────────────────────
   이름과 값을 같은 크기로 두고, 자리만 어긋냅니다.
   레퍼런스에서 글씨들이 줄을 안 맞추고 놓인 것처럼. */

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

#metrics-headline > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#metrics-headline > div:nth-child(2) { padding-left: 14px; }
#metrics-headline > div:nth-child(3) { padding-left: 6px; }

.m-label {
  font-size: var(--t-small);
  color: var(--ink-faint);
  white-space: nowrap;
}

/* 값은 이름보다 살짝 들여씁니다 — 이어지는 가지처럼 */
.m-value {
  margin-left: var(--s2);
  font-size: var(--t-body);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#metrics-more { font-size: var(--t-small); }

#metrics-more > summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-size: var(--t-small);
  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(--ink); }

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

/* 이름과 값을 점선으로 잇습니다 — 레퍼런스의 이음선 */
#metrics > div {
  display: flex;
  align-items: baseline;
  gap: var(--s1);
  padding: 3px 0;
}
#metrics > div::after {
  content: '';
  order: 1;
  flex: 1;
  border-bottom: 1px dotted var(--rule);
  margin: 0 var(--s1) 3px;
}

#metrics dt,
#metrics dd {
  font-size: var(--t-small);
  white-space: nowrap;
}
#metrics dt { color: var(--ink-faint); }
#metrics dd {
  order: 2;
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 펼침 목록 (내보내기) ─────────────────────────────────── */

.menu { position: relative; -webkit-app-region: no-drag; }

.menu > summary {
  cursor: pointer;
  list-style: none;
  padding: 2px var(--s2);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ' ›'; color: var(--ink-faint); }
.menu > summary:hover { border-bottom-width: 2px; padding-bottom: 1px; }
.menu[open] > summary { border-bottom-width: 2px; padding-bottom: 1px; }

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

.menu-body button {
  border: 0;
  border-bottom: 1px dotted var(--rule);
  padding: var(--s2) var(--s3);
  text-align: left;
  font-size: var(--t-body);
  color: var(--ink);
}
.menu-body button:last-child { border-bottom: 0; }
.menu-body button:hover { background: var(--paper-2); border-bottom-style: dotted; }

/* ── 화면 두 개 (3D · 전개도) ─────────────────────────────── */

#views {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  min-height: 0;
}

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

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

/* 제목은 왼쪽, 안내는 오른쪽 멀찍이 — 사이는 비워 둡니다 */
.pane-title {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-mid);
}
.pane-title span:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  color: var(--ink);
  font-size: var(--t-body);
  white-space: nowrap;
}
.pane-title .en {
  font-size: var(--t-small);
  color: var(--ink-faint);
  transform: rotate(-4deg);
  transform-origin: left center;
}
.pane-hint {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#measure-info {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

/* 3D 화면에서 마우스를 올린 곳의 치수 —
   레퍼런스의 이름표처럼 선 하나에 글씨만 얹습니다. */
#pane3d { position: relative; }

#hover3d {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: 1px var(--s2);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#hover3d[data-kind='edge'] { border-bottom-width: 2px; }

/* ── 조립 줄 ──────────────────────────────────────────────── */

#assembly {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--paper);
  flex-wrap: wrap;
}
#assembly .row {
  flex: 1;
  min-width: 180px;
  gap: var(--s2);
  align-items: center;
}
/* 밀대 끝에 화살촉 하나 — 레퍼런스의 방향 화살표처럼 */
#assembly .row::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid var(--ink);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  flex: none;
}
#assembly > *:first-child { transform: translateY(-4px); }

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

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

#gallery-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s2) var(--s3);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
#gallery-bar .info { font-size: var(--t-small); }

/* 한 줄에 몇 개를 놓을지는 조작줄에서 정합니다 (--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(--rule);
  align-content: start;
}

/* overflow 를 숨기지 않습니다 — 숨기면 격자가 칸 높이를 그림에서 못 읽습니다. */
.gal-card {
  position: relative;
  background: var(--sheet);
  cursor: pointer;
  border: 1px solid transparent;
}

/* 고른 것은 **동그라미를 칩니다.** 레퍼런스에서 중요한 말을 감싼 타원처럼. */
.gal-card.picked::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
}

/* 카드를 한 줄에 딱 맞춰 세우지 않습니다. 위아래로 조금씩 흩뜨려
   레퍼런스에 사진이 툭툭 놓인 것 같은 자리를 만듭니다.
   크기는 그대로라 서로 견주는 데는 지장이 없습니다. */
.gal-card:nth-child(2n)   { padding-top: 26px; }
.gal-card:nth-child(3n)   { padding-top: 12px; }
.gal-card:nth-child(4n+1) { padding-top: 34px; }

.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: 1px;
  padding: var(--s1) var(--s2);
  background: var(--paper);
  border-top: 1px solid var(--ink);
  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: var(--t-small);
  color: var(--ink-faint);
}
.gal-name b {
  color: var(--ink);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.gal-nums {
  display: flex;
  gap: var(--s2);
  font-size: var(--t-small);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.gal-nums b { color: var(--ink); font-weight: 700; }

/* 편집 칸 */
#edit-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* 기준면 «선택» 을 켠 동안 — 잉크를 눌러 찍은 것처럼 어둡게 */
#btn-base-pick.toggle.picking {
  background-image: none;
  background-color: var(--ink);
  color: var(--paper);
  border-bottom-color: var(--ink);
}
#btn-base-pick.toggle.picking::after { border-color: var(--ink); }

/* 설명 풍선 — 직접 그립니다 (운영체제 기본 풍선은 글씨 크기를 정할 수 없습니다).
   글씨는 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(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--rule);
}
#tip[hidden] { display: none; }

/* 핸드폰 탭 */
#pane-tabs { background: var(--paper); border-top: 1px solid var(--ink); }
#pane-tabs button {
  border: 0;
  border-right: 1px solid var(--rule);
  color: var(--ink-mid);
  font-size: 13px;
}
#pane-tabs button:last-child { border-right: 0; }
#pane-tabs button.on { background: var(--ink); color: var(--paper); }

/* 첫 화면 */
#start { background: var(--paper); }
#start-box h2 { margin: 0 0 var(--s4); color: var(--ink); font-size: 20px; }
#start-box p { margin: var(--s3) 0; color: var(--ink-mid); font-size: 12px; }
#start-note { color: var(--ink-faint); }
#start-name { margin: 0 0 var(--s2); color: var(--ink-mid); font-size: 11px; letter-spacing: .08em; }

/* 앱 표식 메뉴의 작은 머리말 */
.menu-label {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase; border-top: 1px dotted var(--rule); }
.menu-label:first-child { border-top: 0; }

/* 고치는 동안 3D 화면 위에 뜨는 줄 */
#edit-bar { background: var(--paper); border: 1px solid var(--ink); }

/* 카메라로 찍는 화면 */
#scan { background: var(--paper); }
#scan-tilt { color: var(--ink-mid); }
#scan-tilt.on { color: var(--accent, var(--ink)); font-weight: 600; }