/* 엔진 3D 학습 — 레이아웃·컴포넌트 (토큰은 tokens.css, 디자인 가이드 v1) */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
b, strong { font-weight: 600; }

/* ---------- 공통 버튼 보강 (tokens.css .btn 기반) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); color: var(--text); white-space: nowrap; user-select: none; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn-primary, .btn-primary:hover { color: #fff; background: var(--primary); }
.btn-primary:not(:disabled):hover { background: var(--primary-press); }
.btn-primary svg { fill: currentColor; stroke: none; }
.btn-secondary:not(:disabled):hover { background: var(--surface-2); }
.btn-icon { color: var(--text-2); border: 1px solid var(--line); }
.btn-icon[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 36px; padding: 0 var(--sp-12); }
.btn-sm::after { content: ""; position: absolute; inset: -4px; } /* 탭 영역 44px 확보 */
.btn-sm { position: relative; }
.chip { display: inline-flex; align-items: center; gap: 6px; color: var(--text); position: relative; cursor: pointer; }
.chip::after { content: ""; position: absolute; inset: -6px 0; } /* 32px 칩 → 탭 영역 44px */
.chip:focus-visible, [role=tab]:focus-visible, .sheet-grip:focus-visible, .marker-btn:focus-visible, .list-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dot-marker { width: 18px; height: 18px; border-radius: 50%; background: var(--marker); color: #fff; font: 700 var(--fs-12)/18px var(--font); text-align: center; font-variant-numeric: tabular-nums; flex: none; }

/* ---------- 상단바 ---------- */
.topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--topbar); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4);
  background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.topbar h1 { font-size: var(--fs-16); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.topbar .caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--text-2); }

/* ---------- 3D 뷰포트 ---------- */
.viewport { position: fixed; inset: 0; touch-action: none; overflow: hidden; }
.viewport canvas { display: block; width: 100%; height: 100%; outline: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); font-size: var(--fs-14); }

.fab-stack { position: absolute; z-index: 5; right: var(--sp-12); top: calc(var(--topbar) + var(--sp-12)); display: flex; flex-direction: column; gap: var(--sp-8); transition: opacity 160ms var(--ease); }
.viewport.fabs-hidden .fab-stack { opacity: 0; pointer-events: none; }

/* 첫 방문 안내 토스트 */
.toast { position: absolute; z-index: 7; left: 50%; bottom: calc(var(--cover-bottom, 0px) + 12px); transform: translateX(-50%); padding: 10px 16px; border-radius: var(--r-pill);
  background: rgba(17,24,39,.85); color: #fff; font-size: var(--fs-14); font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.toast.is-out { opacity: 0; }
.legend { position: absolute; z-index: 5; left: var(--sp-12); top: calc(var(--topbar) + var(--sp-12)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12);
  box-shadow: var(--shadow-1); padding: var(--sp-8) var(--sp-12); font-size: var(--fs-12); display: grid; gap: 2px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* 측정 마커 (화면 고정 크기, 3D 위치 추적) */
.marker-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.marker-btn { position: absolute; left: 0; top: 0; width: var(--tap); height: var(--tap); margin: -22px 0 0 -22px; padding: 8px; border: 0; background: none; pointer-events: auto;
  display: flex; align-items: center; gap: 6px; will-change: transform; }
.marker-btn .marker { flex: none; transition: transform var(--dur) var(--ease); }
.marker-btn .marker-label { display: none; background: var(--surface); color: var(--text); font-size: var(--fs-12); font-weight: 600; line-height: 1.3; padding: 4px 8px;
  border-radius: var(--r-8); border: 1px solid var(--marker); white-space: nowrap; box-shadow: var(--shadow-1); }
.marker-btn[aria-pressed="true"] { z-index: 2; padding: 4px; } /* 36px 원의 중심 = 앵커 */
.marker-btn[aria-pressed="true"] .marker { width: 36px; height: 36px; line-height: 36px; font-size: var(--fs-14); }
/* 화면 밖 마커: 가장자리에 붙이고 방향 화살표 */
.marker-btn.is-edge .marker { opacity: .9; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--marker-ring); }
.marker-btn.is-edge::before { content: ""; position: absolute; left: 22px; top: 22px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--marker);
  transform: rotate(var(--ang, 0rad)) translate(19px, -6px); transform-origin: 0 0; }
.marker-btn[aria-pressed="true"] .marker-label { display: block; }
.marker-btn.is-dim { opacity: .45; }

.hover-chip { position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 14px)); display: flex; align-items: center; gap: var(--sp-8); padding: 4px 4px 4px 12px;
  background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--shadow-1); border: 1px solid var(--part-hover); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; }

.help-pop { position: absolute; z-index: 15; top: calc(var(--topbar) + var(--sp-12)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-16); box-shadow: var(--shadow-sheet); padding: var(--sp-16); font-size: var(--fs-14); color: var(--text-2); }
.help-pop h2 { color: var(--text); margin-bottom: var(--sp-8); }
.help-pop ul { padding-left: 18px; margin-bottom: var(--sp-12); display: grid; gap: 4px; }
.help-pop b { color: var(--text); }

/* ---------- 단계 컨트롤 + 분해 슬라이더 (dock) ---------- */
.dock { display: flex; flex-direction: column; gap: var(--sp-4); }
.explode-row { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; }
.explode-label { font-size: var(--fs-14); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.explode-row input { flex: 1; min-width: 80px; margin: 0; }
.explode-row output { font-size: var(--fs-14); font-weight: 600; min-width: 3.2em; text-align: right; white-space: nowrap; }
.explode-row.is-locked input { opacity: .45; }
.explode-row.is-locked output { color: var(--text-3); font-size: var(--fs-12); }
.step-count.is-free { color: var(--text-3); }
.mode-note { font-size: var(--fs-14) !important; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-12); padding: var(--sp-8) var(--sp-12); }
.help-sub { margin: -4px 0 var(--sp-8); color: var(--text-2); }
.step-row { display: flex; align-items: center; gap: var(--sp-8); }
.step-row #btnPrev, .step-row #btnNext { min-width: 64px; }
.step-count { min-width: 52px; text-align: center; font-size: var(--fs-16); font-weight: 700; }
#btnPlay { margin-left: auto; min-width: 92px; }
#btnPlay svg { width: 18px; height: 18px; }
#btnPlay .i-pause { display: none; fill: none; stroke: currentColor; stroke-width: 3; }
#btnPlay[aria-pressed="true"] .i-play { display: none; }
#btnPlay[aria-pressed="true"] .i-pause { display: block; }

/* ---------- 패널(탭) ---------- */
.panel { background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; padding: 0 var(--sp-8); }
.tabs [role=tab] { flex: 1; height: var(--tap); border: 0; background: none; font-size: var(--fs-14); font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tabs [role=tab][aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.panes { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-16); -webkit-overflow-scrolling: touch; }
.pane { display: flex; flex-direction: column; gap: var(--sp-12); }
.pane h2.sec { font-size: var(--fs-14); color: var(--text-2); font-weight: 600; margin-top: var(--sp-8); }
.pane p, .pane li { font-size: var(--fs-16); line-height: var(--lh); }
.pane .role { color: var(--text-2); font-size: var(--fs-14); }
.pane ul, .pane ol { padding-left: 20px; display: grid; gap: 4px; }
.pane .caution li::marker { color: var(--part-outline); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.tool-tag { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-14); }
.disclaimer { margin-top: var(--sp-16); padding-top: var(--sp-12); border-top: 1px solid var(--line); line-height: var(--lh); }

.seg { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-12); padding: 3px; gap: 3px; }
.seg button { flex: 1; height: 38px; border: 0; border-radius: 9px; background: none; font-size: var(--fs-14); font-weight: 600; color: var(--text-2); position: relative; }
.seg button::after { content: ""; position: absolute; inset: -3px 0; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); }
.seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); }
.step-head .num { font-size: var(--fs-14); color: var(--text-2); font-weight: 600; }
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); transition: width var(--dur) var(--ease); }

.list { display: grid; gap: 2px; list-style: none; padding: 0 !important; }
.list-item { width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: var(--sp-12); padding: 8px var(--sp-12); border: 0; border-radius: var(--r-12); background: none; text-align: left; font-size: var(--fs-14); }
.list-item:hover { background: var(--surface-2); }
.list-item .idx { width: 28px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }
.list-item[aria-current="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.list-item[aria-current="true"] .idx { color: var(--primary); }
.list-item.is-selected { background: var(--primary-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--part-select); border-radius: 4px var(--r-12) var(--r-12) 4px; }
.list-item .grp { width: 10px; height: 10px; border-radius: 3px; background: var(--part-base); flex: none; }
.list-item .sub { margin-left: auto; color: var(--text-3); font-size: var(--fs-12); }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.spec-table th, .spec-table td { border-bottom: 1px solid var(--line); padding: 10px 4px; text-align: left; vertical-align: middle; }
.spec-table th { font-weight: 600; color: var(--text-2); font-size: var(--fs-12); }
.spec-table td.value { white-space: nowrap; text-align: right; font-weight: 600; }
.spec-note { font-size: var(--fs-12); color: var(--text-2); }
.record input[type=text] { width: 100%; height: var(--tap); border: 1px solid var(--line); border-radius: var(--r-8); padding: 0 8px; background: var(--surface-2); font-variant-numeric: tabular-nums; font-size: var(--fs-16); }
.record input[type=text]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.record label { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin-right: 8px; font-size: var(--fs-14); }
.back-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-8); }
.empty { color: var(--text-2); font-size: var(--fs-14); }
.badge-example { vertical-align: 1px; margin-left: 4px; }

/* ---------- 모바일 (<1024px): 전체 3D + 바텀시트 ---------- */
@media (max-width: 1023.98px) {
  .panel { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; height: var(--sheet-full, 90vh); border-radius: var(--r-16) var(--r-16) 0 0; box-shadow: var(--shadow-sheet);
    transform: translateY(calc(var(--sheet-full, 90vh) - var(--sheet-h, 136px))); transition: transform var(--dur) var(--ease); will-change: transform; padding-bottom: env(safe-area-inset-bottom); }
  .panel.dragging { transition: none; }
  .sheet-grip { flex: none; height: 24px; display: grid; place-items: center; cursor: grab; touch-action: none; position: relative; }
  .sheet-grip::after { content: ""; position: absolute; left: 0; right: 0; top: -20px; bottom: 0; } /* 탭 영역 44px */
  .sheet-grip span { width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
  .dock-slot { flex: none; min-height: calc(136px - 24px); padding: 0 var(--sp-16) var(--sp-8); touch-action: none; } /* 살짝 보임(136px) = 손잡이 + 슬라이더 + 단계 컨트롤 */
  .dock { gap: 2px; }
  .step-row .btn { padding: 0 var(--sp-12); }
  .fab-stack .btn-icon { box-shadow: var(--shadow-1); }
  .topbar .caption { display: none; } /* 모바일: 제목만 (부제는 도움말로) */
}
@media (max-width: 380px) {
  .explode-label { font-size: var(--fs-12); }
  #btnPlay { min-width: 0; }
}

/* ---------- PC (>=1024px): 좌 3D + 우 패널 380px, 하단 중앙 떠 있는 바 ---------- */
@media (min-width: 1024px) {
  .topbar { justify-content: flex-start; padding: 0 var(--sp-12); }
  .topbar .title { flex-direction: row; align-items: baseline; gap: var(--sp-12); text-align: left; }
  .topbar h1 { font-size: var(--fs-20); }
  .topbar .caption { font-size: var(--fs-12); color: #6B7280; }
  #btnBack { display: none; }
  #btnHelp { margin-left: auto; }
  .viewport { position: fixed; top: var(--topbar); left: 0; right: var(--side-panel); bottom: 0; }
  .fab-stack { top: var(--sp-16); right: var(--sp-16); }
  .legend { top: var(--sp-16); left: var(--sp-16); }
  .help-pop { top: var(--sp-16); }
  .panel { position: fixed; top: var(--topbar); right: 0; bottom: 0; width: var(--side-panel); border-left: 1px solid var(--line); }
  .sheet-grip, .dock-slot { display: none; }
  .dock { position: absolute; z-index: 6; left: 50%; bottom: var(--sp-24); transform: translateX(-50%); width: min(720px, calc(100% - 32px));
    flex-direction: row; align-items: center; gap: var(--sp-16); padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-16);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-16); box-shadow: 0 8px 24px rgba(17,24,39,.12), var(--shadow-1); }
  .explode-row { flex: 1; }
  .step-row { flex: none; padding-left: var(--sp-16); border-left: 1px solid var(--line); }
  #btnPlay { margin-left: 0; }
}