/* ═══════════════════════════════════════════════════════════
   앱 — 온보딩 · 배치 · 시뮬레이션

   화면 구조는 macOS 문서 창을 따른다.
     툴바(반투명) — 사이드바(반투명) — 문서(불투명)
   도면은 '문서'다. 그 위에 유리를 씌우지 않는다.
   ═══════════════════════════════════════════════════════════ */
body.app{
  height:100vh;overflow:hidden;display:flex;flex-direction:column;
  background:
    radial-gradient(1100px 700px at 12% -8%, #F2F5F9 0%, transparent 60%),
    radial-gradient(900px 600px at 96% 106%, #EAEEF4 0%, transparent 62%),
    linear-gradient(180deg,#EDEFF3 0%,#E4E7EC 100%);
}

/* ── 툴바 ─────────────────────────────────── */
.appbar{
  display:flex;align-items:center;gap:18px;flex:none;
  padding:0 18px;height:64px;
  background:var(--mat-bar);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:.5px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  position:relative;z-index:20;
}
.appbar .brand{margin-right:2px}
.appbar .brand__mark{height:44px}
.appbar .brand__f{font-size:21px}
.appbar__sp{flex:1}
.appbar__meta{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  display:flex;gap:6px;align-items:center;
}
.appbar__meta span{
  padding:4px 9px;border-radius:999px;
  background:rgba(11,12,14,.045);
  box-shadow:inset 0 0 0 .5px rgba(11,12,14,.04);
}
.appbar__meta b{color:var(--ink-1);font-weight:600}
@media (max-width:820px){
  .appbar{gap:10px;padding:0 12px;height:58px}
  .appbar .brand__mark{height:34px}
  .appbar .brand__f{font-size:21px}
  .appbar__meta{display:none}
}

/* ── 진행 표시 ────────────────────────────── */
.steps{display:flex;align-items:center;gap:4px;flex:none}
.steps__i{
  display:flex;align-items:center;gap:8px;
  font-size:15.5px;font-weight:560;letter-spacing:-.016em;color:var(--ink-3);
  padding:8px 14px;border-radius:999px;white-space:nowrap;
  background:none;border:0;cursor:pointer;
  transition:background .16s,color .16s;
}
.steps__i .dot{
  width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex:none;
  transition:background .18s,box-shadow .18s;
}
.steps__i[disabled]{cursor:default;opacity:.4}
.steps__i:not([disabled]):hover{background:rgba(11,12,14,.05);color:var(--ink-2)}
.steps__i.is-done{color:var(--ink-3)}
.steps__i.is-done .dot{background:var(--green)}
.steps__i.is-now{
  color:var(--blue);font-weight:640;
  background:var(--blue-s);
  box-shadow:inset 0 0 0 .5px rgba(0,106,255,.16);
}
.steps__i.is-now .dot{background:var(--blue);box-shadow:0 0 0 3px rgba(0,106,255,.16)}
@media (max-width:1100px){.steps__i span{display:none}.steps__i{padding:8px 10px}}

/* ══ 온보딩 ═══════════════════════════════ */
.wizard{flex:1;overflow-y:auto}
/* ⭐본문은 하나의 가운데 기둥이다.
   4열 카드를 넣으려고 1480px 로 넓혔더니 내용이 짧은 1~3단계가
   왼쪽에만 몰려 보였다 — 폭을 되돌리고 각 단계 블록도 가운데로 모은다. */
.wizard__inner{max-width:1100px;margin:0 auto;padding:52px 28px 150px}
.wizard__eye,.wizard h2{text-align:center}
/* 각 단계의 본문 덩어리도 같은 기둥 안에서 가운데 */
.tradepick,.menulist,.menuadd,.mixlist,.mixsum{max-width:860px;margin-left:auto;margin-right:auto}
.wizard__eye{
  font-size:14px;font-weight:590;letter-spacing:-.008em;
  color:var(--blue);margin-bottom:16px;
}
/* 제목 1.5배 — 보조 설명(lede)을 전부 걷어냈으므로 제목 아래 여백을
   lede 가 쥐고 있던 만큼(36px) 제목이 직접 갖는다. */
.wizard h2{font-size:clamp(39px,4.5vw,53px);font-weight:640;letter-spacing:-.038em;line-height:1.18;margin-bottom:36px}
.wizard__lede{font-size:16.5px;color:var(--ink-2);margin-bottom:36px;max-width:58ch;letter-spacing:-.014em}

/* ── 업종 선택 ─────────────────────────────
   왼쪽에 대분류, 오른쪽에 목록. 카드로 깔면 43개가 벽이 된다. */
/* ⚠️오른쪽 칸이 1fr 이면 두 칸 묶음이 화면 폭을 다 차지해서
   가운데 정렬된 제목보다 내용이 왼쪽으로 쏠려 보인다(2026-08-08 지적).
   → 오른쪽 칸도 폭을 묶고 justify-content 로 묶음 자체를 가운데에 둔다. */
.tradepick{
  display:grid;grid-template-columns:minmax(190px,240px) minmax(300px,380px);
  gap:clamp(36px,5vw,72px);align-items:start;
  justify-content:center;
}
@media (max-width:760px){
  .tradepick{grid-template-columns:1fr;gap:26px;justify-content:stretch}
}

/* 대분류 — 큰 글자, 고른 것만 진하게 */
.tradepick__cats{display:flex;flex-direction:column;gap:2px}
/* ⚠️업종 묶음이 11 → 14개로 늘었다(2026-08-08). 예전 크기 그대로면
   1080p 화면에서 마지막 묶음이 접힌 아래로 내려간다 — 한 단 줄였다. */
.tcat{
  display:flex;align-items:baseline;gap:9px;
  padding:4px 0;
  font-size:clamp(18px,1.85vw,23px);font-weight:640;letter-spacing:-.042em;
  color:var(--ink-4);transition:color .16s;
}
.tcat i{
  font-style:normal;font-family:var(--mono);font-size:11px;font-weight:400;
  color:var(--ink-4);opacity:0;transition:opacity .16s;
}
.tcat:hover{color:var(--ink-2)}
.tcat.is-on{color:var(--ink)}
.tcat.is-on i{opacity:1;color:var(--ink-4)}
@media (max-width:760px){
  .tradepick__cats{
    flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;
  }
  .tradepick__cats::-webkit-scrollbar{display:none}
  .tcat{
    font-size:14px;white-space:nowrap;padding:8px 14px;border-radius:6px;
    background:rgba(11,12,14,.045);
  }
  .tcat.is-on{background:var(--ink);color:#fff}
  .tcat i{display:none}
}

/* 목록 — 아이콘 + 이름. 상자 없음 */
.tradepick__eye{
  font-size:12px;color:var(--ink-4);margin-bottom:14px;letter-spacing:-.006em;
}
/* 한 줄에 하나씩 세로로. 두 열로 나누면 눈이 좌우로 튄다. */
.tradepick__list{display:flex;flex-direction:column;gap:1px}
.titem{
  display:flex;align-items:center;gap:14px;
  padding:9px 14px;margin-left:-14px;border-radius:11px;
  width:fit-content;min-width:min(340px,100%);
  transition:background .14s,color .14s;
}
.titem:hover{background:rgba(11,12,14,.05)}
.titem__ico{display:grid;place-items:center;flex:none}
.titem__ico svg{
  width:26px;height:26px;stroke:var(--ink-1);stroke-width:1.9;fill:none;
  transition:stroke .14s;
}
.titem__nm{
  font-size:20px;font-weight:620;letter-spacing:-.035em;line-height:1.35;
  color:var(--ink-1);transition:color .14s;
}
.titem:hover .titem__nm,
.titem:hover .titem__ico svg{color:var(--ink);stroke:var(--ink)}
.titem.is-on{background:var(--blue-s)}
.titem.is-on .titem__nm{color:var(--blue-d);font-weight:700}
.titem.is-on .titem__ico svg{stroke:var(--blue-d)}
@media (max-width:760px){
  .titem__nm{font-size:17.5px}
  .titem__ico svg{width:23px;height:23px;stroke-width:2}
}

/* ── 메뉴 목록 ─────────────────────────────
   상자 안에 작은 글자를 채우면 읽히지 않는다.
   업종 목록과 같은 규칙 — 상자를 걷고 글자를 키운다. */
.menulist{display:flex;flex-direction:column}
.menurow{
  display:grid;grid-template-columns:26px 1fr auto;gap:16px;align-items:center;
  padding:16px 14px;margin-left:-14px;border-radius:12px;
  transition:background .14s,opacity .16s;
}
.menurow + .menurow{box-shadow:inset 0 .5px 0 var(--hair-2)}
.menurow:hover{background:rgba(11,12,14,.035)}
.menurow.is-off{opacity:.38}
.menurow__chk{
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;flex:none;
  background:#fff;box-shadow:inset 0 0 0 1.5px var(--hair), 0 1px 1px rgba(11,12,14,.04);
  transition:background .16s,box-shadow .16s;
}
.menurow__chk[aria-checked="true"]{
  background:var(--blue);
  box-shadow:0 1px 2px rgba(0,80,200,.24);
}
.menurow__chk svg{width:14px;height:14px;stroke:#fff;stroke-width:2.8;fill:none;opacity:0;
  stroke-linecap:round;stroke-linejoin:round}
.menurow__chk[aria-checked="true"] svg{opacity:1}
.menurow__nm{font-size:20px;font-weight:620;letter-spacing:-.035em;line-height:1.3}

/* 공정 칩 — 색이 스테이션을 가리킨다 */
.menurow__steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.stepchip{
  font-size:12.5px;font-weight:500;letter-spacing:-.012em;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  background:#EDEFF1;color:#4E585E;
}
.stepchip[data-st="range"],.stepchip[data-st="fry"],.stepchip[data-st="grill"]{background:#FAF0D9;color:#7A5C0A}
.stepchip[data-st="cold"]{background:#E5F0F7;color:#25566D}
.stepchip[data-st="wash"]{background:#E3F1EA;color:#1B5540}
.stepchip[data-st="pass"]{background:var(--blue-s);color:var(--blue-d)}
.stepchip[data-st="rice"]{background:#F2EFE6;color:#6A5A32}
.stepchip[data-grade="prep"]{opacity:.5}

.menurow__del{
  font-size:13.5px;color:var(--ink-4);padding:8px 13px;border-radius:6px;
  transition:.14s;
}
.menurow__del:hover{color:var(--red);background:var(--red-s)}

.menuadd{display:flex;gap:10px;margin-top:22px}
.menuadd input{
  flex:1;border:0;border-radius:14px;padding:15px 18px;font-size:17px;
  letter-spacing:-.02em;
  background:#fff;box-shadow:inset 0 0 0 1px var(--hair), 0 1px 2px rgba(11,12,14,.04);
}
.menuadd input::placeholder{color:var(--ink-4)}
.menuadd .btn{padding:0 24px;font-size:15.5px}

.hintbox{
  margin-top:20px;padding:16px 18px;border-radius:14px;
  background:var(--blue-s);font-size:14px;line-height:1.65;color:var(--ink-2);
  letter-spacing:-.012em;
  box-shadow:inset 0 0 0 .5px rgba(0,106,255,.14);
}
.hintbox b{color:var(--blue-d);font-weight:640}

/* 비중 */
.mixlist{display:flex;flex-direction:column}
.mixrow{
  display:grid;grid-template-columns:150px 1fr 62px;gap:18px;align-items:center;padding:15px 0;
}
.mixrow+.mixrow{box-shadow:inset 0 .5px 0 var(--hair-2)}
.mixrow__nm{font-size:18px;font-weight:600;letter-spacing:-.018em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(var(--blue),var(--blue)) 0/var(--fill,50%) 100% no-repeat,
             rgba(11,12,14,.08);
  cursor:pointer;box-shadow:inset 0 0 0 .5px rgba(11,12,14,.05);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(11,12,14,.28), 0 0 0 .5px rgba(11,12,14,.1);
  cursor:grab;transition:transform .12s;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);cursor:grabbing}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 1px 3px rgba(11,12,14,.28), 0 0 0 .5px rgba(11,12,14,.1);
}
.mixrow__v{font-family:var(--mono);font-size:15px;text-align:right;color:var(--ink-2)}
.mixsum{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:18px;padding:16px 18px;border-radius:14px;
  background:rgba(11,12,14,.035);
  font-size:15px;letter-spacing:-.012em;color:var(--ink-2);
  transition:background .18s, color .18s;
}
.mixsum b{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink)}
/* 100 에서 벗어나면 앰버 — 막지는 않고 상태만 알린다 */
.mixsum.is-off{background:var(--amber-s);color:#6B520A}
.mixsum.is-off b{color:#6B520A}

/* 공간 필드 */
/* ⭐그리드(1fr 4열)로 두면 항목이 3개일 때 왼쪽으로 쏠린다.
   flex + justify-content:center 로 두면 개수가 몇이든 가운데로 모이고,
   폭이 줄면 카드가 알아서 다음 줄로 넘어간다. */
.fieldgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.fieldgrid > *{flex:1 1 280px;max-width:320px;min-width:0}
@media (max-width:620px){.fieldgrid > *{flex:1 1 100%;max-width:none}}

/* 성격이 다른 입력을 묶는 소제목 */
.fgroup{margin-bottom:34px}
.fgroup:last-child{margin-bottom:0}
.fgroup__t{
  font-size:13px;font-weight:640;letter-spacing:.06em;color:var(--ink-3);
  margin:0 0 12px;text-align:center;
}

.field{
  background:var(--card);border-radius:var(--r-l);padding:16px 18px;
  box-shadow:var(--sh-2), inset 0 1px 0 var(--gloss);
  display:flex;flex-direction:column;
}
/* 힌트가 있는 칸과 없는 칸의 높이를 맞춰 줄이 어긋나 보이지 않게 */
.field__hint{margin-top:auto}
/* .field--seg 는 4단계에서 출입구 방향을 걷어내며 미사용이 됨 */
.field--seg{justify-content:flex-start}
.field--seg .assume__seg{margin-top:2px;width:100%}
.field--seg .assume__seg button{flex:1;padding:9px 2px;font-size:13px}
.field label{display:block;font-size:17px;font-weight:640;color:var(--ink);margin-bottom:14px;letter-spacing:-.02em}
/* 숫자는 오른쪽 끝(단위 바로 옆)에 붙인다.
   왼쪽 정렬이면 값이 짧을수록 단위와 멀어져 '6000 ......... mm' 이 된다. */
.field__in{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;
  box-shadow:inset 0 -1.5px 0 var(--hair);transition:box-shadow .16s}
.field__in:focus-within{box-shadow:inset 0 -1.5px 0 var(--blue)}
.field input{
  width:100%;min-width:0;border:0;background:none;padding:2px 0;
  text-align:right;
  font-family:var(--mono);font-size:24px;font-weight:560;letter-spacing:-.035em;
}
.field input:focus{outline:none}
/* 숫자를 오른쪽에 붙이면 크롬의 증감 화살표가 값과 단위 사이를 파고든다 */
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number]{-moz-appearance:textfield}
/* 단위는 값의 일부다 — 회색 캡션이 아니라 숫자에 붙는 라벨로 */
.field__u{font-family:var(--mono);font-size:18px;font-weight:560;
  color:var(--ink-2);flex:none;letter-spacing:-.02em}
.field__hint{font-size:12.5px;color:var(--ink-4);padding-top:10px;line-height:1.55}

/* ── 도면 화면 하단 고정 바 ──
   마법사의 .wizbar 와 같은 자리·같은 규격.
   전에는 버튼들이 도면 위에 떠 있어(.stageacts) 노트북 폭에서
   오른쪽 집계 패널과 겹쳐 가려졌다. 스크롤해도 항상 보인다. */
.stagebar[hidden]{display:none}
.stagebar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--mat-bar);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:1px solid var(--hair);
}
.stagebar__inner{
  max-width:1560px;margin:0 auto;
  padding:14px clamp(20px,3vw,48px);
  display:flex;align-items:center;gap:10px;
}
.stagebar__sp{flex:1}

/* 주방 치수 — 도면 좌상단에 떠 있어 도면을 가리던 것을 하단바로 옮겼다 */
.stagebar__size{
  display:flex;align-items:center;gap:7px;flex:none;
  height:48px;padding:0 14px;border-radius:10px;
  background:rgba(11,12,14,.06);
  box-shadow:inset 0 0 0 1px var(--hair);
  font-family:var(--mono);font-size:13px;color:var(--ink-3);
}
.stagebar__size label{color:var(--ink-2);font-size:13px}
.stagebar__size input{
  width:62px;border:0;background:none;padding:2px 0;text-align:right;
  font-family:var(--mono);font-size:15px;font-weight:560;color:var(--ink);
  box-shadow:inset 0 -1.5px 0 var(--hair);transition:box-shadow .16s;
}
.stagebar__size input:focus{outline:none;box-shadow:inset 0 -1.5px 0 var(--blue)}
.stagebar__size input::-webkit-outer-spin-button,
.stagebar__size input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stagebar__size input[type=number]{-moz-appearance:textfield}

.stagebar .btn{height:48px;padding:0 22px;font-size:15px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.stagebar .viewtoggle{height:48px}
.stagebar .viewtoggle button{padding:0 20px;font-size:15px}
/* 바 높이만큼 화면을 띄워 도면·집계가 가려지지 않게 */
.tool{padding-bottom:76px}
@media (max-width:900px){.tool{padding-bottom:120px}}
@media (max-width:900px){
  .stagebar__inner{flex-wrap:wrap;padding:12px 16px;gap:8px}
  .stagebar__sp{display:none}
  .stagebar .btn,.stagebar .viewtoggle{flex:1 1 46%;min-width:150px;height:46px}
  .stagebar .btn{padding:0 12px;font-size:14px}
  .stagebar__size{flex:1 1 100%;height:46px;justify-content:center}
}
@media (max-width:520px){
  .stagebar .btn,.stagebar .viewtoggle{flex:1 1 100%}
}

/* 하단 액션 바 */
/* ⛔선이 두 겹으로 보이던 원인: border-top(.5px) 위에
   inset box-shadow 로 흰 선을 한 줄 더 얹고 있었다. 테두리 하나만 남긴다. */
.wizbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--mat-bar);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:1px solid var(--hair);
}
/* 가로를 넓게 쓰고 높이도 키운다 */
.wizbar__inner{
  max-width:1560px;margin:0 auto;
  padding:18px clamp(24px,4vw,64px);
  display:flex;align-items:center;gap:18px;
}
.wizbar__note{font-size:15px;color:var(--ink-3);flex:1;line-height:1.5;letter-spacing:-.012em}
.wizbar .btn{height:52px;padding:0 32px;font-size:16px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){
  .wizbar__inner{padding:14px 18px;gap:12px}
  .wizbar .btn{height:48px;padding:0 22px;font-size:15px}
  .wizbar__note{font-size:13.5px}
}

/* ══ 도구 / 시뮬레이션 공통 셸 ═══════════ */
.tool{flex:1;display:grid;grid-template-columns:300px 1fr 330px;min-height:0;gap:0}
@media (max-width:1160px){
  body.app{height:auto;overflow:visible}
  .tool{grid-template-columns:1fr;height:auto}
}
.pane{min-height:0;display:flex;flex-direction:column;position:relative}
.pane--l,.pane--r{
  background:var(--mat-side);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.pane--l{box-shadow:inset -.5px 0 0 var(--hair)}
.pane--r{box-shadow:inset .5px 0 0 var(--hair)}
.pane__scroll{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(11,12,14,.18) transparent}
.pane__scroll::-webkit-scrollbar{width:11px}
.pane__scroll::-webkit-scrollbar-thumb{
  background:rgba(11,12,14,.16);border-radius:99px;border:3.5px solid transparent;background-clip:content-box;
}
.pane__scroll::-webkit-scrollbar-thumb:hover{background:rgba(11,12,14,.3);background-clip:content-box}
@media (max-width:1160px){.pane__scroll{max-height:400px}}

/* ═══════════════════════════════════════════════════════════
   모바일 — 도구 화면
   3단(라이브러리 · 도면 · 속성)이 세로로 쌓인다.
   ⛔쌓이는 순간 두 가지가 깨진다.
     ①.pane__scroll 이 400px 로 묶여 우측 '세부 내용'이 잘린다
     ②도면 위 HUD·액션 버튼이 position:absolute 라 도면과 겹친다
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* 세로로 쌓이면 높이를 가둘 이유가 없다 — 페이지가 스크롤한다 */
  .pane__scroll{max-height:none !important;overflow:visible}
  .pane{min-height:auto}
  .pane--l,.pane--r{box-shadow:none;border-top:1px solid var(--hair)}

  /* ⭐.stage 는 HUD·도면(svg)·버튼을 모두 품은 flex 컨테이너다.
     기본값이 가로 가운데 정렬이라, 떠 있던 것들을 흐름에 내려놓으려면
     반드시 세로 방향으로 바꿔야 한다. */
  .stage{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:auto;padding:12px;
  }
  .stage::before{inset:6px 8px}
  .stage > svg{width:100%;height:auto;min-height:46vh}

  /* 떠 있던 것들을 흐름 안으로 내린다 */
  .stage__hud{
    position:static;margin:0 0 10px;align-self:flex-start;
    flex-wrap:wrap;width:100%;
  }
  .stageacts{
    position:static;flex-direction:row;flex-wrap:wrap;
    align-items:stretch;justify-content:center;
    width:100%;padding:14px 16px 4px;gap:8px;
  }
  .stageacts > *{width:auto;flex:1 1 46%;min-width:150px;height:46px}

}

/* 아주 좁은 화면 */
@media (max-width:520px){
  .stageacts > *{flex:1 1 100%}
  .stage > svg{min-height:38vh}
}

.paneh{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 16px 7px;
  font-size:11.5px;font-weight:600;letter-spacing:-.006em;color:var(--ink-3);
}
.paneh em{font-style:normal;font-size:10px;letter-spacing:0;text-transform:none;color:var(--ink-4)}

.regionpick{
  display:flex;align-items:center;gap:9px;padding:12px 14px;
  box-shadow:inset 0 -.5px 0 var(--hair);
}
.regionpick label{font-size:13px;color:var(--ink-3)}
.regionpick select{
  flex:1;border:0;border-radius:var(--r-s);padding:7px 9px;font-size:14px;
  background:#fff;box-shadow:var(--sh-1), inset 0 1px 0 var(--gloss);cursor:pointer;
}

.tabs{display:flex;padding:10px 14px 12px;gap:2px}
.tabs button{
  flex:1;padding:9px 0;border-radius:6px;font-size:15px;color:var(--ink-2);text-align:center;
  transition:background .16s,color .16s,box-shadow .16s;
}
.tabs button[aria-selected="true"]{
  background:#fff;color:var(--ink);font-weight:640;
  box-shadow:inset 0 0 0 1px var(--hair);
}
.tabs button:not([aria-selected="true"]):hover{background:rgba(11,12,14,.04)}

/* 라이브러리 */
.lib__g h4{
  font-size:12.5px;letter-spacing:-.008em;
  color:var(--ink-3);padding:18px 18px 6px;font-weight:640;
}
.lib__i{
  display:block;padding:10px 13px;margin:0 9px;width:calc(100% - 18px);
  border-radius:10px;transition:background .13s;
}
.lib__i:hover{background:rgba(11,12,14,.045)}
.lib__nm{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:560;letter-spacing:-.022em}
.lib__sw{width:3.5px;height:16px;border-radius:2px;background:var(--steel);flex:none}
.lib__i.is-custom .lib__sw{background:var(--blue)}
.lib__sp{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:3px;padding-left:12.5px}
.lib__sp .unv{color:var(--amber)}
.libnote{
  margin:16px;padding:14px 16px;border-radius:var(--r);
  background:rgba(11,12,14,.035);font-size:12.5px;line-height:1.65;color:var(--ink-2);
}

/* ── 문서(도면) 영역 — 유일하게 불투명한 곳 ── */
.stage{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  padding:12px;min-height:440px;
}
.stage::before{
  content:"";position:absolute;inset:8px 10px 8px 10px;
  background:var(--surface);border-radius:var(--r-l);
  box-shadow:var(--sh-win);
  pointer-events:none;
}
/* 아래 54px 은 옛 .stage__bar 를 피하려고 비워 둔 자리였다 — 바가 없어져 되찾는다 */
#plan,#simPlan{width:100%;height:100%;touch-action:none;position:relative;z-index:1;padding:18px 22px 20px}
/* 시뮬레이션 도면은 위 HUD(시계·진행)만 피하면 된다 — 재생 바가 아래에서 빠졌다 */
.stage__hud{
  position:absolute;top:30px;left:34px;z-index:3;
  display:flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:10px;
  background:var(--mat-pop);
  -webkit-backdrop-filter:var(--blur-lite);backdrop-filter:var(--blur-lite);
  box-shadow:var(--sh-2), inset 0 1px 0 var(--gloss);
  font-family:var(--mono);font-size:11.5px;
}
.stage__hud label{color:var(--ink-3);font-size:11px}
.stage__hud input{
  width:56px;border:0;border-radius:var(--r-xs);padding:4px 7px;
  font-family:var(--mono);font-size:11.5px;text-align:right;
  background:rgba(11,12,14,.05);
}
/* .stage__bar (척도·그리드·스냅·드래그 힌트)는 2026-08-08에 없앴다.
   화면 높이를 먹기만 하고 한 번 읽으면 다시 볼 일이 없는 정보였다.
   app.js 의 #dragHint 갱신 코드는 `if (hint)` 로 감싸여 있어 그대로 둬도 안전하다. */
kbd{
  font-family:var(--mono);font-size:9.5px;padding:1.5px 5px;margin:0 1px;border-radius:4px;
  background:rgba(11,12,14,.06);box-shadow:inset 0 0 0 .5px rgba(11,12,14,.06);
}

/* ── 속성 ─────────────────────────────────── */
/* 선택한 기물 덩어리(이름·규격·회전/삭제)를 아래 검토 결과 위젯들과
   같은 흰 박스로. 전엔 패널 배경 위에 그대로 얹혀 있어
   어디까지가 한 덩어리인지 경계가 안 보였다. */
.prop__h{
  background:var(--card);border-radius:var(--r-l);
  padding:16px 18px;margin:14px 16px 0;
  box-shadow:var(--sh-2), inset 0 1px 0 var(--gloss);
}
.prop__h .prop__row{margin-top:14px}
.prop__h + .fields{background:var(--card);border-radius:0 0 var(--r-l) var(--r-l);
  margin-top:-1px;box-shadow:var(--sh-2);padding-top:10px}
.prop__h:has(+ .fields){border-radius:var(--r-l) var(--r-l) 0 0}
.prop__t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.prop__t b{font-size:16px;font-weight:640;letter-spacing:-.028em}
.tag{
  font-family:var(--mono);font-size:9.5px;padding:2.5px 7px;border-radius:999px;letter-spacing:.05em;
  box-shadow:inset 0 0 0 .5px rgba(11,12,14,.05);
}
.tag--stock{background:rgba(11,12,14,.055);color:var(--ink-2)}
.tag--custom{background:var(--blue);color:#fff;box-shadow:none}
.tag--unv{background:var(--amber-s);color:var(--amber)}
.prop__sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:7px;line-height:1.68}
.prop__row{display:flex;gap:6px;margin-top:14px}
.prop__row .btn{flex:1;padding:7px 0;font-size:13px}
.fields{padding:4px 16px 14px;margin:0 16px}
.fld{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.fld+.fld{box-shadow:inset 0 .5px 0 var(--hair-2)}
.fld label{font-size:13.5px;color:var(--ink-2);letter-spacing:-.012em}
.fld .u{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-left:4px}
.fld input[type=number],.fld select{
  width:100px;border:0;border-radius:var(--r-xs);padding:6px 8px;
  font-family:var(--mono);font-size:12px;text-align:right;
  background:#fff;box-shadow:var(--sh-1), inset 0 1px 0 var(--gloss);
}
.fld select{text-align:left;cursor:pointer}
.fld--ro span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.lockmsg{
  margin:0 14px 14px;padding:11px 13px;border-radius:var(--r);
  background:rgba(11,12,14,.035);font-size:11.5px;line-height:1.62;color:var(--ink-2);
}

/* ── 검토 목록 ────────────────────────────── */
.checks{padding:0 10px 6px}
.chk{
  display:grid;grid-template-columns:18px 1fr;gap:9px;padding:11px 8px;
  border-radius:var(--r-s);align-items:start;transition:background .14s;
}
.chk__mk{
  font-family:var(--mono);font-size:11px;text-align:center;line-height:1.5;
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
}
.chk--pass .chk__mk{color:var(--green);background:var(--green-s)}
.chk--warn .chk__mk{color:var(--amber);background:var(--amber-s)}
.chk--err .chk__mk{color:var(--red);background:var(--red-s)}
.chk__tx{font-size:13px;line-height:1.5;letter-spacing:-.012em}
.chk--warn .chk__tx b{color:var(--amber)}
.chk--err .chk__tx b{color:var(--red)}
.chk__why{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px;line-height:1.58}
.chk[data-target]{cursor:pointer}
.chk[data-target]:hover{background:rgba(11,12,14,.045)}

/* ── 수치 목록 ────────────────────────────── */
.stats{padding:0 14px 14px}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 2px;border-radius:var(--r-xs)}
.stat+.stat{box-shadow:inset 0 .5px 0 var(--hair-2)}
.stat__l{font-size:12.5px;color:var(--ink-3);letter-spacing:-.008em}
.stat__v{font-family:var(--mono);font-size:12.5px;color:var(--ink-1);white-space:nowrap}
.stat__v em{font-style:normal;color:var(--ink-4);font-size:10.5px;margin-left:4px}
.disc{
  margin:0 14px 24px;padding-top:13px;box-shadow:inset 0 .5px 0 var(--hair-2);
  font-size:11px;line-height:1.68;color:var(--ink-4);
}

.soon{
  margin:14px;padding:14px 16px;border-radius:var(--r);
  background:rgba(11,12,14,.03);box-shadow:inset 0 0 0 .5px var(--hair-2);
  font-size:12px;line-height:1.62;color:var(--ink-3);
}
.soon b{display:block;color:var(--ink-2);font-weight:640;margin-bottom:4px;font-size:12.5px}

/* ── 토스트 ───────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px) scale(.96);
  background:rgba(20,22,25,.9);
  -webkit-backdrop-filter:var(--blur-lite);backdrop-filter:var(--blur-lite);
  color:#fff;padding:12px 20px;border-radius:8px;font-size:13.5px;
  opacity:0;pointer-events:none;z-index:99;
  box-shadow:var(--sh-pop), inset 0 1px 0 rgba(255,255,255,.14);
  transition:opacity .22s cubic-bezier(.3,0,.2,1), transform .22s cubic-bezier(.3,0,.2,1);
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast code{font-family:var(--mono);color:#7FB4FF}

/* ═══════════════════════════════════════════════════════════
   시뮬레이션
   우측은 위젯 벤토. 큰 숫자 하나가 결론이고 나머지는 보조.
   ═══════════════════════════════════════════════════════════ */
.assume{padding:14px 14px 4px}
.assume__row{margin-bottom:15px}
.assume__row label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:8px;letter-spacing:-.01em}
.assume__seg{
  display:flex;padding:3px;gap:3px;border-radius:8px;
  background:rgba(11,12,14,.05);
}
.assume__seg button{
  flex:1;padding:7px 6px;border-radius:5px;font-size:12.5px;font-weight:500;
  color:var(--ink-2);text-align:center;transition:background .16s,color .16s,box-shadow .16s;
}
.assume__seg button:hover:not([aria-pressed="true"]){color:var(--ink-1)}
.assume__seg button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:640}
.assume__note{font-size:11.5px;line-height:1.58;color:var(--ink-3);margin:-8px 0 15px;padding-left:2px}
.assume__pair{display:flex;align-items:center;gap:8px}
.assume__pair input{
  width:100%;border:0;border-radius:var(--r-xs);padding:7px 9px;
  font-family:var(--mono);font-size:13px;text-align:right;
  background:#fff;box-shadow:var(--sh-1), inset 0 1px 0 var(--gloss);
}
.assume__pair span{color:var(--ink-4);font-family:var(--mono);font-size:12px}
.assume__calc{
  display:flex;gap:8px;margin-bottom:14px;
}
.assume__calc span{
  flex:1;padding:9px 11px;border-radius:var(--r-s);text-align:center;
  background:#fff;box-shadow:var(--sh-1), inset 0 1px 0 var(--gloss);
  font-size:12px;color:var(--ink-2);
}
.assume__check{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);cursor:pointer;padding:2px 0}
.assume__check input{width:15px;height:15px;accent-color:var(--blue)}

.grades{padding:2px 14px 8px}
.grade{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:7px 0}
.grade+.grade{box-shadow:inset 0 .5px 0 var(--hair-2)}
.grade__l{font-size:12.5px;font-weight:590;letter-spacing:-.014em}
.grade__h{font-size:10.5px;color:var(--ink-4)}
.grade__v{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}

/* 시계 HUD */
.stage__hud--sim{gap:11px}
.simclock{font-size:14px;font-weight:590;letter-spacing:-.02em}
.simsep{width:1px;height:12px;background:var(--hair)}
.stage__hud--sim b{font-weight:640;color:var(--ink)}

/* 재생 컨트롤 — 떠 있는 유리 막대 */
/* .transport(도면 위에 떠 있던 재생 조작)는 2026-08-08에 없앴다.
   같은 컨트롤이 하단 고정 바 #simbar 안으로 들어갔다 — app.html 참고. */
#simbar #simPlay{min-width:96px}
#simbar #simScrub{flex:1;height:5px;min-width:120px}
#simbar #simBack{flex:none}
.speeds{
  display:flex;padding:3px;gap:3px;border-radius:8px;
  background:rgba(11,12,14,.055);
}
.speeds button{
  padding:6px 12px;border-radius:5px;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  transition:background .16s,color .16s,box-shadow .16s;
}
.speeds button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:640}

/* ── 결론 위젯 — 어두운 카드 하나 ── */
.bigstat{
  margin:12px 14px 14px;padding:20px 20px 18px;border-radius:var(--r-l);
  background:linear-gradient(165deg,var(--dark-2) 0%,var(--dark) 100%);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:0 2px 6px rgba(11,12,14,.16), 0 16px 36px -14px rgba(11,12,14,.5),
             inset 0 1px 0 var(--gloss-dark);
}
.bigstat::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(0,106,255,.34) 0%,transparent 70%);
  pointer-events:none;
}
.bigstat__v{
  font-family:var(--mono);font-size:46px;font-weight:600;letter-spacing:-.05em;line-height:1;
  display:flex;align-items:baseline;gap:2px;
}
.bigstat__u{font-size:19px;font-weight:500;color:rgba(255,255,255,.44);letter-spacing:-.02em}
.bigstat__l{font-size:13px;color:rgba(255,255,255,.72);margin-top:10px;letter-spacing:-.012em}
.bigstat__sub{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.4);margin-top:4px}

/* 수치 카드 묶음 */
.widget{
  margin:0 14px 14px;padding:6px 14px;border-radius:var(--r-l);
  background:var(--card);box-shadow:var(--sh-2), inset 0 1px 0 var(--gloss);
}
.widget .stat{padding:9px 0}
.stat.is-now{
  background:var(--blue-s);margin:0 -8px;padding-left:9px;padding-right:9px;
  box-shadow:inset 0 0 0 .5px rgba(0,106,255,.14);
}
.stat.is-now .stat__l{color:var(--blue-d);font-weight:640}
.stat.is-now+.stat{box-shadow:none}

/* 비교표 */
.cmp{width:calc(100% - 28px);margin:0 14px;border-collapse:collapse;font-size:12.5px}
.cmp th,.cmp td{padding:9px 6px;text-align:right}
.cmp tbody tr{box-shadow:inset 0 .5px 0 var(--hair-2)}
.cmp thead th{
  font-family:var(--mono);font-size:10px;color:var(--ink-4);font-weight:500;
  letter-spacing:.06em;padding-bottom:7px;
}
.cmp thead th.on{color:var(--blue);font-weight:640}
.cmp tbody th{text-align:left;font-weight:400;color:var(--ink-2);font-size:12.5px}
.cmp td{font-family:var(--mono);font-size:12.5px}
.cmpnote{
  margin:12px 14px 6px;padding:12px 14px;border-radius:var(--r);
  background:var(--blue-s);box-shadow:inset 0 0 0 .5px rgba(0,106,255,.14);
  font-size:12px;line-height:1.65;color:var(--ink-2);
}
.cmpnote b{color:var(--blue-d);font-weight:640}

.stat__v em.up{color:var(--green);font-style:normal;font-size:10.5px;margin-left:5px}
.stat__v em.down{color:var(--red);font-style:normal;font-size:10.5px;margin-left:5px}

/* ═══════════════════════════════════════════════════════════
   gring 모드 추천
   ═══════════════════════════════════════════════════════════ */
.assume__seg--col{flex-direction:column;gap:2px}
.assume__seg--col button{text-align:left;padding:8px 11px}

.assume__check--box{
  align-items:flex-start;padding:11px 13px;border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-1), inset 0 1px 0 var(--gloss);
  margin-bottom:15px;
}
.assume__check--box input{margin-top:2px}
.assume__check--box b{display:block;font-weight:640;font-size:13px;letter-spacing:-.016em}
.assume__check--box em{
  display:block;font-style:normal;font-size:11px;color:var(--ink-4);margin-top:2px;line-height:1.5;
}

.widget--tight{padding:6px}
.moderow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:11px 12px;border-radius:var(--r-s);
  transition:background .14s,box-shadow .14s;
}
.moderow:hover{background:rgba(11,12,14,.04)}
.moderow.is-on{
  background:var(--blue-s);
  box-shadow:inset 0 0 0 .5px rgba(0,106,255,.2);
}
.moderow__nm{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:560;letter-spacing:-.018em;
}
.moderow.is-on .moderow__nm{color:var(--blue-d);font-weight:640}
.moderow__badge{
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  padding:2px 7px;border-radius:999px;
  background:var(--blue);color:#fff;
  box-shadow:0 1px 2px rgba(0,80,200,.28);
}
.moderow__v{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-1);white-space:nowrap;
}
.moderow__v em{font-style:normal;color:var(--ink-4);font-size:10.5px;margin-left:6px}
.moderow.is-best:not(.is-on){box-shadow:inset 0 0 0 .5px rgba(0,106,255,.28)}

.advices{padding:2px 14px 6px}
.advice{
  display:grid;grid-template-columns:19px 1fr;gap:9px;align-items:start;
  padding:11px 0;
}
.advice+.advice{box-shadow:inset 0 .5px 0 var(--hair-2)}
.advice__mk{
  font-family:var(--mono);font-size:11px;text-align:center;line-height:1.55;
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
}
.advice--yes .advice__mk{color:var(--green);background:var(--green-s)}
.advice--no .advice__mk{color:var(--ink-3);background:rgba(11,12,14,.055)}
.advice--maybe .advice__mk{color:var(--amber);background:var(--amber-s)}
.advice__tx{font-size:12.5px;line-height:1.5}
.advice__tx b{font-weight:640;letter-spacing:-.018em}
.advice--yes .advice__tx b{color:var(--green)}
.advice__why{
  display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px;line-height:1.62;
}
.cmpnote--plain{background:rgba(11,12,14,.035);box-shadow:inset 0 0 0 .5px var(--hair-2)}
.cmpnote--plain b{color:var(--ink-1)}

/* ═══════════════════════════════════════════════════════════
   필요 인원
   ═══════════════════════════════════════════════════════════ */
.crew{
  margin:12px 14px 12px;padding:20px 18px;border-radius:var(--r-l);
  display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--dark-2) 0%,var(--dark) 100%);
  color:#fff;
  box-shadow:0 2px 6px rgba(11,12,14,.16), 0 16px 36px -14px rgba(11,12,14,.5),
             inset 0 1px 0 var(--gloss-dark);
}
.crew::after{
  content:"";position:absolute;left:-30px;bottom:-50px;width:170px;height:170px;
  background:radial-gradient(circle,rgba(0,106,255,.3) 0%,transparent 70%);pointer-events:none;
}
.crew__main{display:flex;flex-direction:column;gap:1px;position:relative;z-index:1}
.crew__n{
  font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-.05em;line-height:1;
}
.crew__n em{font-style:normal;font-size:14px;font-weight:500;color:rgba(255,255,255,.42);margin-left:2px}
.crew__k{font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:-.01em}
.crew__plus{
  font-family:var(--mono);font-size:19px;color:rgba(255,255,255,.3);
  align-self:flex-start;margin-top:6px;
}
.crew__total{
  margin-left:auto;text-align:right;position:relative;z-index:1;
  padding-left:16px;box-shadow:inset 1px 0 0 rgba(255,255,255,.12);
}
.crew__total b{
  display:block;font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.04em;
}
.crew__total span{font-size:11px;color:rgba(255,255,255,.42)}
.crewnote{
  margin:0 14px 12px;font-size:12px;line-height:1.62;color:var(--ink-2);
}

/* gring 효과 — 홀 인원이 몇 명 줄어드는가 */
.saveband{
  margin:0 14px 14px;padding:14px 16px;border-radius:var(--r);
  display:flex;gap:14px;align-items:flex-start;
  background:var(--blue-s);box-shadow:inset 0 0 0 .5px rgba(0,106,255,.18);
}
.saveband__n{
  font-family:var(--mono);font-size:15px;font-weight:640;color:var(--blue-d);
  white-space:nowrap;letter-spacing:-.028em;padding-top:1px;
}
.saveband__t{font-size:12px;line-height:1.62;color:var(--ink-2)}

/* 홀 업무량 막대 */
.loadrow{
  display:grid;grid-template-columns:88px 1fr 46px;gap:10px;align-items:center;
  padding:7px 8px;
}
.loadrow__l{font-size:12px;color:var(--ink-2);letter-spacing:-.014em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.loadrow__bar{
  height:6px;border-radius:99px;background:rgba(11,12,14,.06);overflow:hidden;
  box-shadow:inset 0 0 0 .5px rgba(11,12,14,.04);
}
.loadrow__bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue-l),var(--blue));
}
.loadrow__v{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--ink-2)}
.loadrow__v em{font-style:normal;color:var(--ink-4);font-size:10px;margin-left:1px}
.saveband--mode{background:var(--green-s);box-shadow:inset 0 0 0 .5px rgba(24,121,78,.2)}
.saveband--mode .saveband__n{color:var(--green)}
.saveband__t b{font-weight:640;color:var(--ink-1)}

/* 평면 / 입체 전환 — 캔버스 우측 상단 */
/* 평면 / 입체 — 있는 줄도 모르면 없는 기능이다.
   흐린 유리 대신 진한 알약으로 띄운다. */
/* 캔버스 우측 상단 조작 묶음 — 보기 전환 아래로 다음 행동이 이어진다 */
/* 배치 화면 버튼들은 .stagebar(하단 고정)로 옮겼다.
   이 규칙은 시뮬레이션 화면의 보기 전환 토글에만 남아 쓰인다. */
.stageacts{
  position:absolute;top:30px;right:36px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
/* 토글·버튼을 같은 크기로. 세로로 쌓이므로 높이뿐 아니라 폭도 같아야 줄이 선다. */
.stageacts > *{height:44px;width:192px}
.stageacts .btn{
  padding:0;font-size:14px;font-weight:640;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
}
.stageacts__go, .stageacts__back{box-shadow:none}
.stageacts__back{box-shadow:inset 0 0 0 1px var(--hair)}
.stageacts .viewtoggle{justify-content:stretch}
.stageacts .viewtoggle button{flex:1;padding:0}
/* 옛 규칙 제거: 900px 이하에서는 .stageacts 가 static 이라 top/bottom/right 가 의미 없다.
   위쪽 '모바일 — 도구 화면' 블록이 이 자리를 대신한다. */

/* iOS 스위치와 같은 초록. 아이콘 없이 글자만. */
/* 옆 버튼들과 같은 네모 모서리. 켜진 쪽만 진한 초록. */
.viewtoggle{
  position:relative;
  display:flex;padding:3px;gap:3px;border-radius:10px;
  background:rgba(11,12,14,.06);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.viewtoggle button{
  display:flex;align-items:center;justify-content:center;
  padding:0 20px;border-radius:7px;
  font-size:14px;font-weight:640;letter-spacing:-.018em;
  color:var(--ink-2);background:none;border:0;cursor:pointer;
  transition:background .18s,color .18s,box-shadow .18s;
}
.viewtoggle button:hover{color:var(--ink)}
.viewtoggle button[aria-pressed="true"]{
  background:#1E9E4A;color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
@media (max-width:760px){.viewtoggle{top:auto;bottom:78px;right:22px}}

/* ═══════════════════════════════════════════════════════════
   업종 선택 — 43종을 그룹으로 나눠 보여준다
   ═══════════════════════════════════════════════════════════ */
.tradebox{display:flex;flex-direction:column;gap:32px}
.tradegrp h3{
  font-size:13px;font-weight:640;letter-spacing:-.012em;color:var(--ink-3);
  margin-bottom:12px;padding-left:2px;
}
.trades{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:760px){.trades{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.trades{grid-template-columns:1fr}}

/* 항목이 많아졌으니 카드를 낮춘다 — 아이콘을 왼쪽으로 눕힌다 */
.trade{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;
  padding:14px 16px;text-align:left;
}
.trade__ico{margin-bottom:0;grid-row:span 2}
.trade__ico svg{width:26px;height:26px;stroke-width:1.5}
.trade b{font-size:14.5px;margin-bottom:2px}
.trade span{font-size:11.5px}

/* 출입구가 있는 벽 선택 */
.sidepick{margin-top:16px;max-width:420px}
.sidepick label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:10px;letter-spacing:-.014em}

/* ── 고정물 패널 (배치 화면 좌측 하단) ───── */
#fixedPanel{padding:0 18px 24px}
.fxgrp{margin-bottom:16px}
.fxgrp h5{
  font-size:12.5px;font-weight:640;color:var(--ink-3);
  margin-bottom:8px;letter-spacing:-.006em;
}
.fx{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
.fx label{font-size:13.5px;color:var(--ink-2)}
.fx input{
  width:92px;border:0;border-radius:var(--r-xs);padding:6px 8px;
  font-family:var(--mono);font-size:12px;text-align:right;
  background:#fff;box-shadow:var(--sh-1), inset 0 1px 0 var(--gloss);
}
.assume__seg--mini{margin-bottom:8px}
.assume__seg--mini button{padding:5px 4px;font-size:11.5px}

/* 출입구 드래그 */
.gf-door{transition:opacity .12s}
.gf-door:hover{opacity:.85}
.gf-door:active{cursor:grabbing}

/* 후드 드래그 */
.gf-hood{transition:opacity .12s}
.gf-hood:hover{opacity:.75}
.gf-hood:active{cursor:grabbing}

/* 기둥 */
.gf-col{transition:opacity .12s}
.gf-col:hover{opacity:.8}
.gf-col:active{cursor:grabbing}
.fxchk{display:flex;align-items:center;gap:9px;padding:6px 0 8px;font-size:13.5px;
  color:var(--ink-2);cursor:pointer}
.fxchk input{width:16px;height:16px;accent-color:var(--blue)}
.fxnote{font-size:11.5px;color:var(--ink-4);line-height:1.55;padding:2px 0 4px}

/* 배수 트렌치 */
.gf-tr{transition:opacity .12s}
.gf-tr:hover{opacity:.8}
.gf-tr:active{cursor:grabbing}

/* ═══════════════════════════════════════════════════════════
   인쇄 (PDF 저장)
   화면에서는 숨겨두고, 인쇄할 때만 이 영역만 남긴다.
   ═══════════════════════════════════════════════════════════ */
#printArea{display:none}

@media print{
  @page{ size:A3 landscape; margin:10mm; }
  body.app{height:auto;overflow:visible;background:#fff;display:block}
  .appbar,.tool,.wizard,.wizbar,.toast{display:none !important}
  #printArea{
    display:block !important;
    font-family:var(--sans);color:#0B0C0E;
  }
  .pr__head{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding-bottom:8mm;border-bottom:.6pt solid #0B0C0E;
  }
  .pr__head h1{font-size:15pt;font-weight:700;letter-spacing:-.03em;margin-bottom:2mm}
  .pr__head p{font-size:9pt;color:#3B434A}
  .pr__meta{text-align:right;font-size:8.5pt;color:#3B434A;line-height:1.6}
  .pr__meta b{display:block;font-size:11pt;color:#0B0C0E;letter-spacing:-.03em}
  .pr__meta span{display:block}
  .pr__canvas{padding:6mm 0}
  .pr__canvas svg{width:100%;height:auto;max-height:165mm}
  .pr__foot{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:4mm;border-top:.6pt solid #9AA2A8;font-size:8.5pt;color:#3B434A;
  }
  .pr__legend{display:flex;gap:6mm}
  .pr__legend i{font-style:normal;display:inline-flex;align-items:center;gap:1.6mm}
  .pr__legend s{width:3mm;height:3mm;border-radius:.6mm;display:inline-block;text-decoration:none}
  .pr__stat{display:flex;gap:5mm}
  .pr__note{margin-top:3mm;font-size:7.5pt;color:#68737A;line-height:1.6}
}

.assume__seg--col{flex-direction:column;gap:2px}
.assume__seg--col button{text-align:left;padding:7px 10px}
.fxnote b{color:var(--ink-1);font-weight:640}