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

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

  --ink: #111111;
  --base: #c8321e;         /* 기준면 — 접을 때 바닥에 놓이는 면. 먹 사이에서 하나만 붉게 */
  --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 · 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'
    'side grip views'
    'side grip asm';
  grid-template-columns: var(--side-w) 5px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}


#app[data-mode='compare'] {
  grid-template-areas:
    'head'
    'gal';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

/* 보기에서는 왼쓴 창을 **통째로 닫습니다** — 3D 와 전개도만 남습니다.
 *
 * 처음에는 묶음 머리만 남기고 접었는데, 원하신 것은 창 자체가 없어지는 것이었습니다.
 * 넓은 화면에서만입니다(min-width 821): 폰은 칩으로 그 창을 여는 구조라 phone.css 가
 * 그대로 다룹니다 — 이 파일에는 원래 @media 가 없지만, 폰(max-width 820)과 절대
 * 겹치지 않는 경계라 여기 두는 것이 가장 정직합니다. */
@media (min-width: 821px) {
  #app[data-mode='precise']:not([data-editing]) {
    grid-template-areas:
      'head'
      'views'
      'asm';
    grid-template-columns: minmax(0, 1fr);
  }
  #app[data-mode='precise']:not([data-editing]) #side,
  #app[data-mode='precise']:not([data-editing]) #side-grip { display: none; }
}

#topbar    { grid-area: head; }
#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']) #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); }



/* ── 머리줄 ───────────────────────────────────────────────
   레퍼런스의 맨 윗줄처럼 — 왼쪽 이름 · 가운데 것들 · 오른쪽 상태.
   서로 멀찍이 떨어뜨리고 아래에 굵은 선 하나를 긋습니다. */

#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: none; }
#modes          { transform: none; }
#langs          { transform: translateY(-5px); }
/* 위 밀기는 머리줄에 있던 시절의 것입니다. 메뉴 안에서는 «언어» 글씨를 침범하므로 뺍니다. */
#app-menu .menu-body #langs { transform: none; }
#designs        { transform: translateY(2px); }
#topbar .group  { transform: translateY(-2px); }

#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: 34;          /* 아이콘 좌표(800 단위 폭)를 22px 에 담으므로 약 1px */
  stroke-linejoin: round;
  flex: none;
}
.mark .paper { fill: var(--paper); }
.mark .shade { fill: var(--rule); }

.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; }

/* 켠 토글은 타원을 **먹으로 채웁니다** — 흰 바탕에 검은 테만 두르니 켜진 것인지
   눌리기 전인지 헷갈렸습니다 (기준면 «선택» 에서 특히). 채우면 한눈에 읽힙니다.
   isolation 을 두어 ::after 가 글씨 뒤, 단추 안에 깔리게 합니다. */
button.toggle { position: relative; isolation: isolate; border-bottom-color: var(--rule); }
button.toggle.on { color: var(--paper); border-bottom-color: transparent; }
button.toggle.on::after {
  content: '';
  position: absolute;
  inset: -1px -4px;
  background: var(--ink);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

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

/* 접기/펼치기 도 동그라미 — 3D 위 «편집» 과 한 식구입니다. 도는 동안(«멈춤»)은 먹으로.
   «펼치기» 석 자가 들어가야 하므로 48px, 글씨는 한 단 작게. */
#btn-play.primary {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink);
  font-size: 12px;
}
#btn-play.primary:hover { border-bottom-width: 1px; padding-bottom: 0; }
#btn-play.primary.on { background: var(--ink); color: var(--paper); }
#btn-play.primary:disabled { color: var(--ink-faint); border-color: var(--rule); }

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;
}

/* 왼쪽 줄(보기/편집)은 없앴습니다. 3D 화면 위의 «편집» 단추가 같은 일을 합니다 —
   두 곳에서 같은 것을 켜고 끄면 어느 쪽이 진짜인지 알 수 없습니다. */

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

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

/* 묶음마다 들여쓰기를 다르게 — 줄을 맞추지 않습니다 */
.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: 600;                    /* 묶음 이름은 굵게 — 영어 곁말을 뺐으니 이름 하나가 제목입니다 */
  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; }

/* 곁말 — 기울이지 않습니다. 살짝 돌려 두었더니(−4°) 한 화면에 기울기가 둘이라
   글씨가 어긋나 보였습니다. 모든 글씨는 0° 입니다. */
.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); }
/* 켠 토글의 타원은 단추 밖으로 4px 씩 나옵니다. 둘이 나란히 켜지면 타원이 맞닿아
   한 덩이로 보이므로(형태 고치기 · 기즈모), 이 줄만 사이를 더 둡니다.
   «.row.tool-row» 로 적는 까닭: «.row.small» 과 무게가 같아야 이깁니다 — «.tool-row»
   하나로 두었더니 밀려서 8px 그대로였습니다. */
.row.tool-row { gap: 14px; }
.row.small button { font-size: var(--t-body); }

.panel-body select { flex: 1; min-width: 0; }
.panel-body input[type='number'] { width: 58px; }
.panel-body #size-group input[type='number'] { width: 40px; }
#size-group { gap: 4px; }
#size-group .times { margin: 0 1px; }
#size-group #btn-lock { margin-left: 8px; }      /* 켠 타원(−3px)이 «mm» 에 닿지 않게 */
.row.gizmo-row { gap: 14px; }                   /* 기즈모·회전 타원이 맞닿지 않게 (.row.tool-row 와 같은 까닭) */
.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: repeat(3, minmax(0, 1fr));
  gap: var(--s3) var(--s2);
  padding-bottom: var(--s2);
}

#metrics-headline > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

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

/* 값은 이름 바로 아래 왼쪽 맞춤 — 세 열이 한 줄로 읽히게 */
.m-value {
  margin-left: 0;
  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);
  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); }               /* 자세히의 이름도 먹으로 — 옅으면 읽기 어렵다고 하셨습니다 */
#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;
}

/* 제목은 왼쪽, 안내는 오른쪽 멀찍이 — 사이는 비워 둡니다 */

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

/* 수치 판 맨 위의 형태 줄 — 큰 숫자 셋 위에 한 줄로. 알림이 붙으면 접혀도 됩니다. */
.panel-body > #model-info { white-space: normal; margin-left: 0; text-align: left; margin-bottom: var(--s2); }

#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 > *: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-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 { color: var(--paper); border-bottom-color: transparent; }
#btn-base-pick.toggle.picking::after {
  content: '';
  position: absolute;
  inset: -1px -4px;
  background: var(--ink);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* 설명 풍선 — 직접 그립니다 (운영체제 기본 풍선은 글씨 크기를 정할 수 없습니다).
   글씨는 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); }


/* 폰에서 3D 위에 뜨는 작은 창.
   data-group 은 폰의 칩 줄에서만 세워지므로 넓은 화면에는 아무 영향이 없습니다. */
#app[data-group] #side {
  border: 1px solid var(--ink);
  box-shadow: 0 8px 28px rgba(17, 17, 17, 0.14);
}

/* 폰에서 3D 위에 뜨는 표식 — 떠 있는 것이 보이게 «작은 창» 과 같은 옷을 입힙니다.
   data-mode='precise' 는 폰에서만 이 꼴이 되므로 넓은 화면에는 영향이 없습니다. */
#app[data-mode='precise'] #app-menu > summary { background: transparent; }
#app-menu > summary { background: transparent; }
.menu > summary::after { content: none; }         /* 이름이 없으니 › 도 없습니다 — 동그라미가 곧 단추 */
.mark-ring { background: var(--paper); border: 1px solid var(--ink); }
.menu > summary { border-bottom: 0; }
.menu > summary:hover, .menu[open] > summary { border-bottom: 0; padding-bottom: 2px; }
.menu > summary:hover .mark-ring, .menu[open] > summary .mark-ring { border-width: 2px; }
/* 동그라미 안에서는 « › » 를 뺍니다 — 그 글자가 표식을 왼쪽으로 밀어 가운데를 벗어나게 했습니다.
   동그라미 자체가 «누를 것» 을 말하므로 화살은 필요 없습니다. */
#app[data-mode='precise'] #app-menu > summary::after { content: none; }

/* 설정 묶음 칩 — 탭보다 한 단계 조용하게.
 * 탭은 «어느 화면을 보는가», 칩은 «무엇을 만지는가» 라서 무게가 다릅니다.
 * 둘이 같은 굵기면 아래쪽 두 줄이 서로 싸웁니다. */
#group-chips { background: var(--paper); border-top: 1px solid var(--rule); }
#group-chips button {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-faint);
  font-size: 12px;
}
#group-chips button.on { border-bottom-color: var(--ink); color: var(--ink); }

/* 내보내기 창 */
#export-dialog, #image-dialog, #confirm-dialog { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
#export-dialog::backdrop, #image-dialog::backdrop, #confirm-dialog::backdrop { background: rgba(17, 17, 17, 0.25); }
#confirm-dialog .note { margin: 0; font-size: var(--t-body); line-height: 1.55; }
#export-dialog .note { margin: 0; font-size: var(--t-small); color: var(--ink-mid); line-height: 1.5; }

/* 첫 화면 */
#start { background: var(--paper); }
/* 도형 단추 — 밑줄 없이 아이콘만. 네 판 미리보기의 3번: 보이는 면을 연한 회색 70% 로 채우고
   머리카락 선(0.3px, 2배 화면에서 한 픽셀 남짓)을 두릅니다. 뒤쪽 점선은 없습니다. 마우스를 올리면 살짝 진해집니다. */
#start-shapes button { border-bottom: 0; }
#start-shapes button:hover { border-bottom-width: 0; padding-bottom: 2px; }
.shape-icon .face { fill: var(--ink-faint); fill-opacity: 0.7; stroke: none; }
.shape-icon .edge { stroke: currentColor; stroke-width: 0.3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.shape-icon .back { stroke: var(--rule); stroke-width: 0.3; stroke-dasharray: 1.5 1.5; fill: none; }
#start-shapes button:hover .face { fill-opacity: 0.85; }
#start-shapes button:hover .edge { stroke-width: 0.6; }
/* 이름이 크고, 물음은 작게 — 둘의 옷을 서로 바꿨습니다 (이름이 곧 이 화면의 제목입니다) */
#start-box p#start-name { margin: 0 0 var(--s3); color: var(--ink); font-size: 30px; font-weight: 600; letter-spacing: 0; }   /* 1.5배 — «#start-box p» 보다 세야 이깁니다 */
#start-box h2 { margin: 0 0 44px; color: var(--ink-mid); font-size: 14px; font-weight: 400; letter-spacing: .08em; }
#start-box p { margin: var(--s3) 0; color: var(--ink-mid); font-size: 14px; }
#start-note { color: var(--ink-faint); }
#start-actions button { font-size: 15px; }
#start-langs .lang-btn { font-size: 14px; }
/* 도형 위에 마우스를 올리면 이름이 아래에 뜹니다 */
#start-shapes button::after { color: var(--ink-mid); font-size: 12px; opacity: 0; transition: opacity .12s; }
#start-shapes button:hover::after { opacity: 1; }
#btn-start-resume small { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* 되돌리기 옆 «처음 상태로» — 같은 원 */
#btn-reset-3d.pane-float { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--ink); font-size: 20px; line-height: 1; align-items: center; justify-content: center; }
#btn-reset-3d.pane-float:hover { border-bottom-width: 1px; padding-bottom: 0; }
/* 시뮬레이션의 풀칠 탭 토글 — 종이 바탕의 알약 */
#btn-sim-tabs.pane-float { padding: 6px 12px; border-radius: 22px; min-height: 34px; }
#btn-sim-tabs.pane-float::after { content: none; }
#btn-sim-tabs.pane-float.on { background: var(--ink); color: var(--paper); }

/* 앱 표식 메뉴의 작은 머리말 */
.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 화면 위에 뜨는 줄 */
.pane-float { background: var(--paper); border: 1px solid var(--ink); }
/* «편집» 은 동그라미입니다. 보기(꺼짐) 흰 원에 검은 글씨, 편집(켜짐) 검은 원에 흰 글씨.
   토글의 타원(::after)은 여기서는 쓰지 않습니다 — 단추 자체가 원입니다. */
#btn-edit-3d.pane-float,
#btn-undo-3d.pane-float,
#btn-undo-2d.pane-float {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink);
  align-items: center;
  justify-content: center;
}
#btn-edit-3d.pane-float:hover, #btn-undo-3d.pane-float:hover, #btn-undo-2d.pane-float:hover { border-bottom-width: 1px; padding-bottom: 0; }
#btn-edit-3d.pane-float.on { background: var(--ink); color: var(--paper); }
#btn-edit-3d.pane-float::after { content: none; }
#btn-undo-3d.pane-float, #btn-undo-2d.pane-float { font-size: 22px; line-height: 1; }
/* 원 안의 그림 — 되돌리기는 왼쪽 화살표, 처음 상태로는 되감기 화살. 선은 지금 글씨 색 */
.pane-float .glyph { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#btn-undo-3d.pane-float:disabled, #btn-undo-2d.pane-float:disabled { color: var(--ink-faint); border-color: var(--rule); background: var(--paper); }

/* 기준면 딱지 — 붉은 글씨에 붉은 밑줄, 종이 바탕. 치수 딱지(#hover3d)와 같은 꼴입니다. */
#base-tag {
  padding: 0 var(--s1);
  background: var(--paper);
  border-bottom: 1px solid var(--base);
  color: var(--base);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
}

/* 접는 순서 번호(3D 면 위) — 도면의 동그라미 숫자와 같은 꼴. 지금 접히는 면은 붉게. */
.fold-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--ink-mid);
  color: var(--ink);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fold-num.on { color: var(--base); border-color: var(--base); font-weight: 600; }
/* 짝 번호(3D 변 곁) — 도면의 것처럼 작고 옅게 */
.pair-num { color: var(--ink-faint); font-size: 9px; font-variant-numeric: tabular-nums; }
/* 접기 줄 아래 한 줄 */
#asm-status { color: var(--ink-mid); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  #asm-status { font-size: 11px; }
  /* 수치 판 첫 줄(형태 · 면 · 조각 · 대지) — 폰에서는 12px, 위에 숨 쉴 자리 */
  .panel-body > #model-info { font-size: 12px; margin-top: 10px; }
  /* 폰 첫 화면 글씨는 이전 크기 그대로 */
  #start-box p#start-name { font-size: 20px; }
  #start-box h2 { font-size: 11px; margin-bottom: var(--s4); }
  #start-box p { font-size: 12px; }
  #start-actions button { font-size: var(--t-body); }
  #start-langs .lang-btn { font-size: var(--t-body); }
}

/* 높이 그림 축소판 · 높이 배율 밀대 */
#height-thumb { border: 1px solid var(--rule); image-rendering: pixelated; }
.panel-body #height-group input[type='range'] { width: 90px; }
#out-height { font-variant-numeric: tabular-nums; margin-left: 4px; }

/* 카메라로 찍는 화면 */
#scan { background: var(--paper); }
/* 찍기 — 손가락으로 누르는 큰 원. 카메라 앱의 셔터처럼 화면 바로 아래 한가운데. */
#btn-scan-shot.primary {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink);   /* 단추의 기본은 밑줄 하나라, 그대로 두면 원의 아래 반쪽만 그려집니다 */
}
#btn-scan-shot.primary:hover { border-bottom-width: 1px; padding-bottom: 0; }
#scan-tilt { color: var(--ink-mid); }
#scan-tilt.on { color: var(--accent, var(--ink)); font-weight: 600; }