/* ============================================================
   Gerber Viewer - 스타일
   섹션: Reset > Header > Toolbar > Sidebar > Viewer > Bottom
         > Float Tools > Coord > DFM Panel > Overlay > Misc
   ============================================================ */

/* 로컬 Noto Sans KR (디자이너 제공 variable font, mainpage 와 통일). 시스템 설치 불필요 = @font-face만. */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../font/Noto_Sans_KR/NotoSansKR-VariableFont_wght.ttf') format('truetype');
}


/* ──────────────────────────────────────────
   1. Reset & Layout
   ────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Figma viewpage 팔레트 (2026-06-17) — 영역별 Figma 추출색 ── */
:root {
    --bg: #101519;            /* 메인 배경 */
    --panel: #252a31;         /* 패널/카드 */
    --panel-dark: #1e2123;    /* 더 어두운 패널 */
    --panel-left: #121920;    /* 좌측 레이어 패널 */
    --border: #37393e;
    --border-2: #3f4651;
    --text: #ffffff;
    --text-soft: #f7f7f7;
    --text-dim: #b2b4c3;
    --text-dim2: #8f94a2;
    --accent: #07eeff;        /* ★ 메인 청록 액센트 (기존 var(--accent) 대체) */
    --accent-mint: #4cffd5;
    --accent-sky: #64d5f7;
    --order-btn: #4cffd5;     /* 주문하기 */
    --quote-btn: #f58b2e;     /* 견적요청 */
    --err: #f52e44;           /* DFM 오류 */
    --warn: #f58b2e;          /* 경고 */
    --ok: #089e73;            /* 적합 */
    --star: #ffc700;          /* 평가 */
    --select: #170b57;        /* 선택 하이라이트 */
}
body { background: var(--bg); color: var(--text-soft); font-family: 'Noto Sans KR', 'Segoe UI', sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#main-content { display: flex; flex: 1; overflow: hidden; }


/* ──────────────────────────────────────────
   2. Top Header (GERBER EYES + Nav + Buttons)
   ────────────────────────────────────────── */

#top-header {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px; padding: 0 16px; flex-shrink: 0;
    background: var(--panel); border-bottom: 1px solid var(--border);   /* gnb #252A31 (Figma viewpage) */
    z-index: 50;
}
#header-left { display: flex; align-items: center; }
.header-logo-img { margin-left: 30px; height: 30px; object-fit: contain; }
.header-slogan {
    margin-top: 5px; margin-left: 10px; color: #fff; font-size: 18px; font-weight: 350;
    letter-spacing: 0.05em; white-space: nowrap; opacity: 0.6;
}

#header-nav {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    height: 48px; display: flex; align-items: center; gap: 24px;
    z-index: 51;
}

.header-nav-btn {
    background: none; border: none; color: #ffffff; cursor: pointer;
    font-size: 12px; font-weight: 600; padding-bottom: 4px;
    transition: all 0.15s;
    letter-spacing: 0.03em;
}
.header-nav-btn:hover { background: var(--panel); }
.header-nav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.header-nav-btn:disabled { color: #ffffff; cursor: default; }
.header-nav-btn:disabled:hover { color: #ffffff; }

#header-right { display: flex; align-items: center; gap: 8px; }
.header-order-btn {
    padding: 6px 12px; border-radius: 6px; font-size: 15px; font-weight: 700;
    cursor: pointer; border: 1px solid rgba(70,72,77,0.3);
    background: #171a1f; color: #ffffff; transition: all 0.15s;
}
.header-order-btn:hover { border-color: rgba(83,221,252,0.3); color: #fff; }
.header-order-btn.primary {
    background: var(--accent); color: #00343e; border-color: transparent;
    box-shadow: 0 0 12px rgba(83,221,252,0.18);
}
.header-order-btn.primary:hover { filter: brightness(1.1); }
.header-icon-btn {
    width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.1);
    background: #171a1f; color: #ffffff; border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.header-icon-btn:hover { color: var(--accent); }
.header-icon-btn:disabled { color: #333; cursor: default; }

/* 6/18: mainpage .nav-btn 박스형 이식 (--panel-2 #1B2026 ≈ --panel-dark, --border 동일, radius 8) */
#header-right .nav-btn {
    display: inline-flex; align-items: center; gap: 1px;
    background: var(--panel-dark); border: 0px solid var(--border); border-radius: 8px;
    color: var(--text-soft); font-size: 13px; font-weight: 500;
    padding: 7px 12px; cursor: pointer; text-decoration: none; transition: all 0.15s;
}
#header-right .nav-btn:hover { background: var(--border); }
#header-right .nav-btn.star { color: var(--star); }
#header-right .nav-btn.text { color: var(--text); }
#header-right .nav-btn.icon-only { padding: 7px; }   /* mainpage 동일 = 박스 유지 (svg rect 배경 위 박스) */
#header-right .nav-btn svg { display: block; }

/* ── 제작규격 팝업 (Figma #47 드롭다운) = mainpage .spec-pop 이식. dfm_panel.js showDfmSpec 가 className 으로 생성 ── */
.spec-pop {
    position: fixed; width: 320px; z-index: 200;
    background: #1A1F27; border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    padding-bottom: 8px;
}
.spec-pop-arrow {
    position: absolute; top: -7px; width: 16px; height: 16px;
    background: #1A1F27; transform: rotate(45deg); border-radius: 3px;
}
.spec-pop-title {
    color: #8B92A0; font-size: 14px; font-weight: 700;
    padding: 16px 22px 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.spec-pop-body { padding: 0px 0; max-height: 62vh; overflow-y: auto; }
.spec-pop-row {
    display: flex; justify-content: space-between; align-items: center; padding: 9px 22px;
}
.spec-pop-label { color: #9CA3AF; font-size: 14px; }
.spec-pop-value { color: #fff; font-size: 14px; font-weight: 700; }


/* ──────────────────────────────────────────
   3. Top Toolbar (TOP/BOTTOM, 2D/3D, STACKUP)
   ────────────────────────────────────────── */

#top-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 44px; padding: 0 12px; flex-shrink: 0;
    position: relative;   /* 6/17: fixed → flow = 사이드바 오른쪽(viewer-wrapper) 영역에만 정렬 (Image#4). fixed left:0 이면 사이드바 위 겹쳐 잘림 */
    background: var(--bg); border-bottom: none;   /* 2줄 #101519 (Figma viewpage, gnb #252A31 보다 어둠) */
    z-index: 30;
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.toolbar-right { justify-content: flex-end; }
.toolbar-left #unit-select {
    background: #111418; border: 1px solid #333;
    color: #94a3b8; padding: 0px 15px; border-radius: 4px;
    font-size: 10px; cursor: pointer; outline: none;
}
.toolbar-left #unit-select option { background: #171a1f; color: #fff; }
.toolbar-center {
    display: flex; align-items: center; gap: 8px;
    position: absolute; left: calc(50% - 150px); transform: translateX(-50%);   /* 6/18: sidebar(300) 절반 보정 = 화면 중앙 (gnb 탭 ADVANCE-FPCB 사이, #header-nav 와 동일 가로축) */
}
/* toolbar 안 sidebar-btn 오버라이드 */
.toolbar-left .sidebar-btn {
    flex: none; padding: 6px 10px; font-size: 11px; font-weight: 700;
}
.toolbar-left .toolbar-group {
    display: flex; align-items: center; gap: 6px;
}
.toolbar-left #unit-select {
    background: transparent; border: none; color: #64748b;
    padding: 6px 20px; font-size: 10px; cursor: pointer; outline: none;
    font-weight: 700;
}
.toolbar-left #unit-select option { background: #171a1f; color: #fff; }
/* 5/14 #F lag fix - backdrop-filter:blur 제거. cause = SVG (10K+ object) 위 toolbar = wheel zoom 시 매 frame backdrop pixel blur = paint heavy. background alpha 0.85 = 시각 효과 유사 + paint 가벼움. */
.toolbar-group {
    display: flex; gap: 6px;   /* 6/18: 한 박스 제거 → 버튼 개별 박스 + 간격 */
}

.toolbar-group-left {
    display: flex; gap: 2px; justify-content: left; align-items: center;
    background: rgba(23,26,31,0.9); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 8px;
}

.toolbar-btn {
    padding: 6px 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(23,26,31,0.9);
    color: #ffffff; font-size: 11px; font-weight: 700;
    border-radius: 8px; cursor: pointer; letter-spacing: 0.05em;
    transition: all 0.15s;   /* 6/18: 개별 박스 (Image#18) */
}
.toolbar-btn:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.toolbar-btn.active {
    background: rgba(83,221,252,0.12); color: var(--accent);
    border-color: rgba(83,221,252,0.5);   /* 6/18: 개별 박스 active = 시안 테두리 */
}
.toolbar-btn:disabled { color: #4a5568; cursor: default; }
.toolbar-btn:disabled:hover { background: transparent; color: #4a5568; }

/* 6/17 viewpage 2줄: 중앙 파일명 + 우측 tool 아이콘 행 */
#toolbar-filename {
    color: var(--text-dim); font-size: 15px; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 520px; display: inline-block;
}
.toolbar-right { position: relative; align-items: flex-end; transition: transform 0.3s; }
.tool-label {   /* 아이콘 위 작은 캡션 (Figma) */
    position: absolute; top: 1px; right: 12px;
    font-size: 11px; color: var(--text-dim2); pointer-events: none;
}
.tool-icons { display: flex; align-items: center; gap: 8px; padding-top: 13px; }
.tool-icon-btn {
    background: transparent; border: none; color: var(--text-soft);
    cursor: pointer; padding: 3px; display: flex; align-items: center; justify-content: center;
    transition: color 0.15s;
}
.tool-icon-btn:hover { color: var(--accent); }
.tool-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }


/* ──────────────────────────────────────────
   4. Sidebar (Layers, Tabs, Controls)
   ────────────────────────────────────────── */

#sidebar {
    width: 300px; min-width: 180px;
    background: #171a1f; padding: 5px 0 0 0;
    border-right: 1px solid rgba(70,72,77,0.1);
    display: flex; flex-direction: column;
    flex-shrink: 0; position: relative;
    caret-color: transparent;
}

/* --- Sidebar Logo (top-header 높이와 동일: 48px) --- */
#sidebar-logo {
    height: 48px; display: flex; align-items: center;
    padding: 0px 4.5%; flex-shrink: 0;
    border-bottom: 1px solid rgba(70,72,77,0.2);
}
#sidebar-logo .header-logo-img { margin-left: 0; }

/* --- 체험(데모) 모드 UI 잠금 (2026-06-29, 회의 피드백) = 다운로드/주문/견적/스크린샷/프린트/공유 비활성 --- */
html.demo-viewer .tool-icon-btn[title="공유"],
html.demo-viewer .tool-icon-btn[title="스크린샷"],
html.demo-viewer .tool-icon-btn[title="인쇄"],
html.demo-viewer .tool-icon-btn[title="거버 다운로드"] { opacity: 0.3; pointer-events: none; cursor: not-allowed; }
html.demo-viewer .dfm-btn-order,
html.demo-viewer .dfm-btn-est { opacity: 0.45; pointer-events: none; cursor: not-allowed; }

/* --- Sidebar Tabs --- */
#sidebar-tabs {
    display: flex; align-items: center; margin: 8px 25px;   /* 좌측 = 레이어 X 맞춤, 밑줄 제거 */
    border-bottom: none;
}
.sidebar-all-toggle {
    order: 2; margin-left: auto;   /* 우측 끝으로 (auto = 사이드바 폭 변해도 따라 이동, 청색 눈과 정렬) */
    background: transparent; border: none; color: var(--text-dim2);
    cursor: pointer; padding: 8px 0; display: flex; align-items: center;   /* ★ 6/25: 우측 padding 5%(가변)→0 = layer-eye(폭-12px)와 세로 정렬 고정 */
    transition: all 0.15s; flex-shrink: 0;
}
.sidebar-all-toggle:hover { color: #fff; }
.sidebar-tab-btn {
    order: 1; flex: 0 0 auto;
    background: transparent; border: none;   /* 버튼 배경 제거 */
    color: var(--text-soft); cursor: pointer;
    padding: 4px 0; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.15em;
    text-align: left; transition: all 0.15s;
}
.sidebar-tab-btn:hover { color: #fff; }
.sidebar-tab-btn.active { background: transparent; color: var(--text-soft); }

/* --- Sidebar Panel Switching --- */
.sidebar-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.sidebar-panel.active { display: flex; }

/* --- ALL ON / ALL OFF --- */
.sidebar-layer-actions {
    display: flex; gap: 6px; padding: 8px 12px;
}
.sidebar-btn {
    flex: 1; background: transparent; border: none; color: #64748b;
    padding: 5px 0; border-radius: 6px; font-size: 11px; font-weight: 900;
    cursor: pointer; letter-spacing: 0.05em; transition: all 0.15s;
    text-align: center;
}
.sidebar-btn:hover { border-color: #cbd5e1; color:#cbd5e1; }

/* --- Board Name Badge (bottom-right) --- */
#board-name {
    font-size: 11px; color: #4fc3f7; font-weight: 600;
    letter-spacing: 0.3px; white-space: nowrap;
    padding: 2px 8px;
}
#board-name:empty { display: none; }
#layer-list {
    overflow-y: auto; overflow-x: hidden; flex: 1;
    border-top: 1px solid var(--border);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;   /* Firefox: thumb 회색 / 트랙 투명 */
}
#layer-list::-webkit-scrollbar { width: 6px; }
#layer-list::-webkit-scrollbar-track { background: transparent; }   /* 뒷 배경 없이 */
#layer-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#layer-list::-webkit-scrollbar-thumb:hover { background: var(--text-dim2); }
#layer-list::-webkit-scrollbar { display: none; }

.layer-section-header {
    padding: 10px 12px 4px 12px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-dim);
}
.layer-section-header:not(:first-child) {
    margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px;
}

.layer-item {
    display: flex; align-items: center; padding: 8px 12px;
    cursor: pointer; font-size: 12px;
    user-select: none; border-left: 2px solid transparent;
    transition: all 0.15s;
}
.layer-item:hover { background: rgba(255,255,255,0.04); color: var(--accent); }
.layer-item.active {
    border-left-color: var(--accent); background: rgba(7,238,255,0.08); color: var(--accent);
}
.layer-item .layer-dot {
    width: 10px; height: 10px; border-radius: 50%;
    margin-right: 10px; flex-shrink: 0;
}
.layer-item .layer-info {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.layer-item .layer-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-transform: uppercase; font-size: 12px; color: var(--text-soft);
    letter-spacing: 0.02em; line-height: 1.3;
}
.layer-item .layer-source {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10px; color: var(--text-dim2); line-height: 1.3; margin-top: 1px;
}
.layer-item.active .layer-name { color: var(--accent); }
.layer-item:hover .layer-name { color: var(--accent); }
.layer-item.active .layer-source { color: var(--accent); }
.layer-item .layer-eye {
    flex-shrink: 0; margin-left: 8px; color: var(--text-dim2);
    cursor: pointer; font-size: 14px; line-height: 1;
}
.layer-item.active .layer-eye { color: var(--accent); }
.layer-item .layer-eye:hover { color: #fff; }
.color-picker { position: absolute; visibility: hidden; width: 0; height: 0; }

/* --- Sidebar DFM Panel --- */
.sidebar-dfm-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px;
}
/* 5/14 Sprint 3 #CD - DFM 자동 분석 토글 (원 버튼). ON = inner 채워짐 / OFF = inner 안 보임. */
.sidebar-dfm-auto-toggle {
    display: inline-flex; align-items: center; cursor: pointer;
    color: var(--accent); transition: all 0.15s; margin-right: 6px;
}
.sidebar-dfm-auto-toggle:hover { color: #fff; }
.sidebar-dfm-auto-toggle.off { color: #475569; }
.sidebar-dfm-auto-toggle.off:hover { color: #94a3b8; }
.sidebar-dfm-auto-toggle.off .dfm-auto-inner { display: none; }
.sidebar-dfm-mode { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.2em; }
.sidebar-dfm-view-toggle {
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05); color: #94a3b8;
    cursor: pointer; user-select: none; transition: all 0.15s;
    /* 5/11 fix: 판정 / 대기 둘 다 오른쪽 정렬. STANDARD 왼쪽 + 우측 두 버튼. */
    margin-left: auto; margin-right: 6px;
}
.sidebar-dfm-view-toggle:hover { background: rgba(255,255,255,0.1); color: #cbd5e1; }
/* 5/12 — DFM 계산 시작 / 중지 토글. running = 빨강 / done = 초록 / cancelled = 노랑 / error = 빨강 */
.sidebar-dfm-run-toggle {
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05); color: #94a3b8;
    cursor: pointer; user-select: none; transition: all 0.15s;
    margin-left: auto; margin-right: 6px;
}
.sidebar-dfm-run-toggle:hover { background: rgba(255,255,255,0.15); color: #fff; }
.sidebar-dfm-run-toggle.running {
    border-color: rgba(255,113,108,0.4); background: rgba(255,113,108,0.12); color: #ff9189;
}
.sidebar-dfm-run-toggle.running:hover { background: rgba(255,113,108,0.22); color: #ffb3ad; }
.sidebar-dfm-run-toggle.done {
    border-color: rgba(121,242,138,0.3); background: rgba(121,242,138,0.1); color: #79f28a;
}
.sidebar-dfm-run-toggle.cancelled {
    border-color: rgba(255,205,118,0.3); background: rgba(255,205,118,0.1); color: #ffcd76;
}
.sidebar-dfm-run-toggle.error {
    border-color: rgba(255,113,108,0.3); background: rgba(255,113,108,0.1); color: #ff716c;
}
.sidebar-dfm-status {
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 12px; border: 1px solid rgba(83,221,252,0.25);
    background: rgba(83,221,252,0.1); color: var(--accent);
}
.sidebar-dfm-analyze-btn {
    display: flex; align-items: center; gap: 4px;
    background: rgba(83,221,252,0.1); border: 1px solid rgba(83,221,252,0.25);
    color: var(--accent); padding: 5px 12px; border-radius: 6px;
    font-size: 10px; font-weight: 800; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.15s;
}
.sidebar-dfm-analyze-btn:hover { background: rgba(83,221,252,0.2); }
/* 5/6 owner: 흰색 scrollbar 숨김. scroll 기능은 유지. (layer-list 패턴 동일) */
#sidebar-dfm-content { flex: 1; padding: 0 12px 12px; scrollbar-width: none; }
#sidebar-dfm-content::-webkit-scrollbar { display: none; }
/* DFM 분석 중 프로그레스 */
.sidebar-dfm-analyzing {
    padding: 24px 16px; text-align: center;
    border: 1px solid rgba(255,205,118,0.2); border-radius: 10px;
    background: rgba(255,205,118,0.05);
}
.sidebar-dfm-analyzing-text {
    font-size: 13px; color: #ffcd76; font-weight: 600; margin-bottom: 12px;
}
.sidebar-dfm-analyzing-bar {
    height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px;
    overflow: hidden; margin-bottom: 8px;
}
.sidebar-dfm-analyzing-fill {
    height: 100%; background: #ffcd76; border-radius: 3px;
    width: 0%; transition: width 0.5s;
}
.sidebar-dfm-analyzing-time {
    font-size: 12px; color: #64748b; font-family: 'Consolas', monospace;
}
/* 5/12 영역 2 — 점진 표시 (현재 metric / 진행 N/8 / 완료 metric 표) */
.sidebar-dfm-analyzing-current {
    margin-top: 14px; font-size: 12px; color: #ffcd76; font-weight: 600;
    text-align: left; padding: 6px 8px;
    background: rgba(255,205,118,0.08); border-radius: 4px;
    min-height: 14px;
}
.sidebar-dfm-analyzing-progress {
    margin-top: 6px; font-size: 11px; color: #64748b;
    font-family: 'Consolas', monospace; text-align: right;
}
.sidebar-dfm-progressive-table {
    margin-top: 10px; text-align: left;
    border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px;
}
.sidebar-dfm-progress-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 6px; font-size: 11px;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.sidebar-dfm-progress-row:last-child { border-bottom: none; }
.sidebar-dfm-progress-label { color: #94a3b8; }
.sidebar-dfm-progress-value { color: #79f28a; font-family: 'Consolas', monospace; font-weight: 600; }

.sidebar-dfm-placeholder {
    padding: 24px 16px; text-align: center;
    border: 1px solid rgba(83,221,252,0.2); border-radius: 10px;
    background: rgba(83,221,252,0.05); color: #94a3b8; font-size: 12px;
    line-height: 1.6;
}

/* 우측 주문정보 패널 — DFM 결과 도착 전 placeholder (4/29) */
.dfm-loading-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 20px; color: #94a3b8; text-align: center;
}
.dfm-loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent); border-radius: 50%;
    animation: dfm-loading-spin 1s linear infinite;
    margin-bottom: 16px;
}
@keyframes dfm-loading-spin {
    to { transform: rotate(360deg); }
}
/* 5/12 영역 1 — DFM tab button 안 mini spinner (LAYERS 탭에서도 진행 인지) */
.dfm-tab-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-top-color: var(--accent); border-radius: 50%;
    animation: dfm-loading-spin 0.9s linear infinite;
    margin-right: 6px; vertical-align: middle;
}
.dfm-loading-text {
    font-size: 13px; color: #94a3b8;
}

/* DFM 결과 요약 카드 */
.sidebar-dfm-summary { display: flex; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 12px; color:#94a3b8; }
.sidebar-dfm-card {
    border-radius: 10px; padding: 8px 10px; text-align: center;
    border: 1px solid transparent;
}
.sidebar-dfm-card.pass { border-color: rgba(121,242,138,0.3); background: rgba(121,242,138,0.1); color: #79f28a; }
.sidebar-dfm-card.warn { border-color: rgba(255,205,118,0.3); background: rgba(255,205,118,0.1); color: #ffcd76; cursor: pointer; }
.sidebar-dfm-card.fail { border-color: rgba(255,113,108,0.3); background: rgba(255,113,108,0.1); color: #ff908b; cursor: pointer; }
.sidebar-dfm-card-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.sidebar-dfm-card-value { font-size: 18px; font-weight: 900; margin-top: 2px; }

/* DFM 검토 항목 */
.sidebar-dfm-item {
    border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 6px;
}
.sidebar-dfm-item-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.sidebar-dfm-item-label { font-size: 13px; font-weight: 600; color: #fff; }
.sidebar-dfm-item-pct { font-size: 12px; font-family: 'Consolas', monospace; color: #94a3b8; }
.sidebar-dfm-progress {
    height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px;
    overflow: hidden; margin-bottom: 6px;
}
.sidebar-dfm-progress-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.sidebar-dfm-progress-bar.pass { background: #79f28a; }
.sidebar-dfm-progress-bar.warn { background: #ffcd76; }
.sidebar-dfm-progress-bar.fail { background: #ff716c; }
.sidebar-dfm-item-footer {
    display: flex; justify-content: space-between; align-items: center;
}
.sidebar-dfm-item-spec { font-size: 12px; color: #64748b; }
.sidebar-dfm-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700; border: 1px solid transparent;
}
.sidebar-dfm-badge.pass { border-color: rgba(121,242,138,0.3); background: rgba(121,242,138,0.1); color: #79f28a; }
.sidebar-dfm-badge.warn { border-color: rgba(255,205,118,0.3); background: rgba(255,205,118,0.1); color: #ffcd76; }
.sidebar-dfm-badge.fail { border-color: rgba(255,113,108,0.3); background: rgba(255,113,108,0.1); color: #ff908b; }
.sidebar-dfm-badge.unmeasured { border-color: rgba(160,160,160,0.3); background: rgba(160,160,160,0.1); color: #a0a0a0; }

/* DFM 의견 */
.sidebar-dfm-opinion { margin-top: 8px; }
.sidebar-dfm-opinion textarea {
    width: 100%; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3);
    border-radius: 8px; color: #fff; font-size: 13px; padding: 8px;
    outline: none; resize: vertical; min-height: 60px;
}
.sidebar-dfm-opinion textarea:focus { border-color: var(--accent); }

/* --- Sidebar EQ Panel --- */
.sidebar-eq-request {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px; margin: 8px 12px; border-radius: 10px;
    border: 1px solid rgba(83,221,252,0.2); background: rgba(83,221,252,0.05);
}
.sidebar-eq-icon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(83,221,252,0.25); background: rgba(12,14,18,0.7);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
}
.sidebar-eq-title { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; }
.sidebar-eq-text p { font-size: 12px; color: #fff; margin-top: 4px; line-height: 1.5; }
.sidebar-eq-section { padding: 0 12px; margin-top: 12px; }
.sidebar-eq-section-title {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
}
.sidebar-eq-empty { font-size: 13px; color: #64748b; padding: 12px; text-align: center; }
.sidebar-eq-textarea {
    width: 100%; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3);
    border-radius: 8px; color: #fff; font-size: 13px; padding: 8px;
    outline: none; resize: vertical; min-height: 60px;
}
.sidebar-eq-textarea:focus { border-color: var(--accent); }

/* --- DFM Confirm Modal (사이트 고유 confirm 대체) --- */
#dfm-modal-view {
    position: fixed; inset: 0; z-index: 250;
    /* 5/14 #F lag fix - backdrop-filter:blur 제거 (popup overlay = 일관성). */
    background: rgba(0,0,0,0.82); overflow-y: auto;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 80px 20px;
}
/* 6/18 Figma CommentPopup 디자인 (DFM 제작규격 변경 권장 모달). 내용 동적이라 height auto/flex 유지. */
.dfm-modal-container {
    width: 100%; max-width: 340px;
    background: #252A31; border: 1px solid #353B44;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.30);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.dfm-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid #3F4651;   /* Figma Line 17 */
    flex-shrink: 0;
}
.dfm-modal-title { font-size: 12px; font-weight: 700; color: #E4E6EA; }
.dfm-modal-close {
    background: transparent; border: none; color: #8F94A2;   /* Figma Union × */
    width: 22px; height: 22px; border-radius: 6px;
    font-size: 16px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.dfm-modal-close:hover { color: #E4E6EA; }
.dfm-modal-body {
    background: transparent; color: #B2B4C3;
    padding: 14px 16px 4px; font-size: 11px; line-height: 16px;
}
.dfm-modal-body p { margin: 0 0 8px; }
.dfm-modal-body p:last-child { margin-bottom: 0; }
.dfm-modal-list { list-style: none; padding-left: 14px; margin: 4px 0 8px; }   /* Figma 들여쓰기, disc 없음 */
.dfm-modal-list li { margin: 2px 0; color: #B2B4C3; line-height: 18px; }
.dfm-modal-list li strong { color: #B2B4C3; font-weight: 400; }   /* Figma 단색 */
.dfm-modal-threshold { color: #B2B4C3; font-size: 11px; }
.dfm-modal-footer {
    background: transparent;
    padding: 10px 16px 18px;
    display: flex; justify-content: flex-end; gap: 6px;
    border-top: none;
}
.dfm-modal-btn-confirm {   /* Ok = cyan 글씨 + 반투명 배경 */
    background: rgba(255,255,255,0.10); color: #07EFFF; border: none;
    padding: 6px 14px; border-radius: 50px;
    font-size: 12px; font-weight: 500; cursor: pointer;
}
.dfm-modal-btn-confirm:hover { background: rgba(255,255,255,0.16); }
.dfm-modal-btn-cancel {   /* Cancel = 흰글씨 + 반투명 배경 */
    background: rgba(255,255,255,0.10); color: #E4E6EA; border: none;
    padding: 6px 14px; border-radius: 50px;
    font-size: 12px; font-weight: 500; cursor: pointer; margin-right: 0;
}
.dfm-modal-btn-cancel:hover { background: rgba(255,255,255,0.16); }
/* 6/18 Figma: 요청사항 입력 textarea (주문하기/견적요청 모달) = 흰 배경 입력칸 */
.dfm-request-textarea {
    width: 100%; min-height: 108px; resize: vertical;
    background: #ffffff; color: #252A31;
    border: none; border-radius: 2px;
    padding: 8px 10px; font-size: 11px; line-height: 16px;
    font-family: inherit; box-sizing: border-box;
}
.dfm-request-textarea::placeholder { color: #9CA3AF; }
.dfm-request-textarea:focus { outline: 1px solid #07EFFF; }

/* --- Stackup View (팝업) --- */
#stackup-view {
    position: fixed; inset: 0; z-index: 200;
    /* 5/14 #F lag fix - backdrop-filter:blur(4px) 제거. cause = 매 frame paint 시 backdrop pixel blur 계산 = 100ms+ heavy (= wheel lag 진짜 cause).
       대신 background opacity 약간 더 = 시각 효과 유사 + paint 가벼움. */
    background: rgba(0,0,0,0.82); overflow-y: auto;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 60px 20px;
}
.stackup-container {   /* 6/22 Figma 리스킨 */
    width: 100%; max-width: 50%;
    height: 100%; max-height: calc(200vh - 80px);
    background: #252A31; border: 1px solid #353B44;
    border-radius: 8px; padding: 12px 0 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.30);
    display: flex;
    flex-direction: column;
}
.stackup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
}
.stackup-header-left { flex: 1; min-width: 0; }
.stackup-title { font-size: 18px; font-weight: 700; color: #fff; text-transform: uppercase; }
.stackup-subtitle { font-size: 16px; color: rgba(255,255,255,0.45); margin-top: 4px; }
/* 5/12 영역 4 — stackup warnings wrapper = flex-shrink 0 (layer list 변경 시도
   warning 영역 크기 변동 영향 X). stackup-warning 개별 = 강조 (크기 키우고).
   5/13 fix v2 — ★ 통합 박스 (= wrapper 가 박스 boundary) + ★ 내부 compact list.
   5/13 fix v3 — ★ height 고정 (= 갑자기 커짐 X) + ★ scroll 활성 + ★ scrollbar
   숨김 (= 다크 테마 매칭) + ★ bottom fade mask (= "★ 더 있다" 자연 표시). */
.stackup-warnings {   /* 6/22 Figma = 청록 테두리 상태박스 */
    flex-shrink: 0;
    margin: 0 16px 12px;
    padding: 8px 12px;
    border: 1.5px solid #07EFFF;
    background: #3F4651;
    border-radius: 2px;
    height: 75px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.stackup-warnings::-webkit-scrollbar {
    display: none;
}
.stackup-warning {
    padding: 2px 0;
    color: #07EFFF; font-size: 16px; font-weight: 500; line-height: 20px;
}
/* 6/22 Figma = Layers 라벨 + 흰 카드 (카드 안만 스크롤) */
.stackup-layers-label {
    flex-shrink: 0; padding: 0 16px; margin-bottom: 8px;
    color: #fff; font-size: 18px; font-weight: 400;
}
.stackup-card {
    flex: 1; min-height: 0;
    margin: 0 16px; padding: 10px 12px;
    background: #fff; border-radius: 2px;
    display: flex; flex-direction: column;
}
.stackup-warning + .stackup-warning {
    border-top: 1px dashed rgba(255,205,118,0.2);
    padding-top: 6px;
    margin-top: 4px;
}
.stackup-table-header {
    display: grid; grid-template-columns: 1fr 140px 110px; gap: 12px;
    padding: 8px 16px; font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.45);
}
.stackup-row {   /* 6/22 Figma = 흰 카드 안 행, 하단 구분선 */
    display: grid; grid-template-columns: 1fr 80px 80px; gap: 90px;
    align-items: center; padding: 7px 48px;
    padding-right: 80px; padding-left: 10px;
    border-bottom: 1px solid #E4E6EA;
    font-size: 16px; color: #252A31;
    /* 5/14 #F lag fix - row 별 layout/paint 격리 = scroll 시 browser sub-tree 만 paint. */
    contain: layout style;
}
/* 1. 파일명 (긴 이름은 ... 말줄임 = Figma) */
.stackup-filename {
    color: #252A31;
    font-size: 17px; font-weight: 600;
    line-height: 2.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 2/3. type/side select (Figma = 흰 박스 + 검정 글씨 + 회색 테두리) */
.stackup-type-wrap, .stackup-side-wrap { position: relative; }
.stackup-type-select, .stackup-side-select {
    width: 200%; height: 40px; appearance: none; border: 1px solid rgba(143,148,162,0.60);
    background: #fff; color: #000; padding: 4px 5px;
    border-radius: 4px; font-size: 18px; outline: none; cursor: pointer;
    text-align: center;
}
.stackup-type-select:focus, .stackup-side-select:focus { border-color: #07EFFF; }
.stackup-type-select option, .stackup-side-select option { background: #fff; color: #000; }
.stackup-side-select:disabled {
    color: rgba(0,0,0,0.3); cursor: not-allowed; background: rgba(228,230,234,0.60);
}
/* 4. 색상 칩 (편집 X — 칩 + hex 텍스트) */
.stackup-color {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px; border-radius: 14px;
}
.stackup-color-chip {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.stackup-color-hex {
    font-family: 'Consolas', monospace; font-size: 11px;
    color: rgba(255,255,255,0.85);
}

/* 헤더 아이콘 버튼 (✕ 취소 / ✓ 적용) */
.stackup-header-actions { display: flex; gap: 8px; align-items: center; }
.stackup-icon-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    width: 36px; height: 36px; border-radius: 8px;
    font-size: 16px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.stackup-icon-btn { border: none; }   /* 6/22 Figma = ✕ 만 = 테두리 없는 닫기 아이콘 */
.stackup-icon-btn:hover { color: #fff; }
/* 6/22 Figma = 하단 고정 푸터 (Cancel / Confirm) */
.stackup-footer {
    flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px;
    padding: 10px 16px 18px;
}
.stackup-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 6px 12px; border-radius: 50px;
    font-size: 18px; font-weight: 500; color: #E4E6EA;
    transition: all 0.15s;
}
.stackup-btn:hover { background: rgba(255,255,255,0.08); }
.stackup-btn.primary { color: #07EFFF; }
.stackup-btn.primary:hover { background: rgba(7,239,255,0.1); }
.stackup-rows {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
    /* 5/14 #F lag fix - scroll container 격리 + scroll instant (= smooth animation 5 frame paint X). */
    contain: layout style paint;
    scroll-behavior: auto;
}
.stackup-rows { scrollbar-width: thin; scrollbar-color: #C4C8D0 transparent; }   /* 6/22 흰 카드 배경 = 회색 스크롤바 (Firefox) */
.stackup-rows::-webkit-scrollbar { width: 6px; }
.stackup-rows::-webkit-scrollbar-track { background: transparent; }
.stackup-rows::-webkit-scrollbar-thumb {
    background: #C4C8D0; border-radius: 3px;   /* 6/22 흰 배경에서 보이게 회색 */
}
.stackup-rows::-webkit-scrollbar-thumb:hover { background: #8F94A2; }
.stackup-apply-btn {
    background: var(--accent); color: #00343e; border: none;
    padding: 8px 20px; border-radius: 8px; font-size: 11px; font-weight: 700;
    cursor: pointer; box-shadow: 0 0 12px rgba(83,221,252,0.18);
    flex-shrink: 0;
    align-self: flex-start;
}
.stackup-apply-btn:hover { filter: brightness(1.1); }

/* --- Preview Image --- */
#preview-image-container {
    position: absolute; inset: 0; z-index: 10;
    background: #0c0e12;
    display: flex; align-items: center; justify-content: center;
    overflow: auto;
}
#preview-image, #preview-svg {
    width: 100%; height: 100%;
    object-fit: contain;
}
#preview-loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #64748b; font-size: 13px;
}

/* --- DFM 판정 로그 --- */
.sidebar-dfm-log {
    margin-bottom: 12px; padding: 0 0 8px 0;
    border-bottom: 1px solid rgba(70,72,77,0.2);
}
.sidebar-dfm-log-title {
    font-size: 11px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.15em;
    margin-bottom: 8px;
}
.sidebar-dfm-log-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 10px; margin-bottom: 4px;
    border-radius: 6px; font-size: 12px; line-height: 1.4;
}
/* 5/12 영역 3 — DFM 완료 후 문제점 영역 (error/warn) 강조.
   더 큰 padding + font + border-left bar 로 시각 우선순위 부여.
   pass 영역 = 그대로 유지 (강조 X). */
.sidebar-dfm-log-item.error {
    background: rgba(255,113,108,0.15); border: 1.5px solid rgba(255,113,108,0.45);
    border-left: 4px solid #ff716c;
    color: #ff908b;
    padding: 10px 14px; font-size: 13px; font-weight: 600;
    margin-bottom: 6px;
}
.sidebar-dfm-log-item.warn {
    background: rgba(255,205,118,0.15); border: 1.5px solid rgba(255,205,118,0.45);
    border-left: 4px solid #ffcd76;
    color: #ffcd76;
    padding: 10px 14px; font-size: 13px; font-weight: 600;
    margin-bottom: 6px;
}
.sidebar-dfm-log-item.pass {
    background: rgba(121,242,138,0.08); border: 1px solid rgba(121,242,138,0.2);
    color: #79f28a;
}
.sidebar-dfm-log-icon { flex-shrink: 0; font-size: 13px; margin-top: 1px; }
.sidebar-dfm-log-text { flex: 1; }
/* 판정 결과 항목 클릭 가능 (vtype 있는 fail/warn) */
.sidebar-dfm-log-item.clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.sidebar-dfm-log-item.clickable:hover { filter: brightness(1.3); }

/* T7-i (5/31) — violations dropdown (= 최상단 log item 의 아래, default 접힘) */
.sidebar-dfm-violations-wrap {
    margin: 0 0 8px 14px;
}
.sidebar-dfm-violations-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; color: #94a3b8;
    cursor: pointer; font-size: 11px; padding: 4px 0;
    font-family: inherit;
}
.sidebar-dfm-violations-toggle:hover { color: #cbd5e1; }
.sidebar-dfm-violations-caret {
    display: inline-block; transition: transform 0.15s;
    font-size: 10px; line-height: 1;
}
.sidebar-dfm-violations-toggle:not(.collapsed) .sidebar-dfm-violations-caret {
    transform: rotate(90deg);
}
.sidebar-dfm-violations-list {
    margin-top: 4px;
    border-radius: 4px;
    background: rgba(20,22,30,0.5);
    border: 1px solid rgba(70,72,77,0.25);
}
.sidebar-dfm-violations-list.collapsed { display: none; }
.sidebar-dfm-violation-item {
    display: flex; gap: 6px; align-items: center;
    padding: 5px 6px 5px 10px; font-size: 11px; color: #cbd5e1;
    border-bottom: 1px solid rgba(70,72,77,0.15);
    font-family: 'Roboto Mono', ui-monospace, monospace;
    transition: background 0.1s, opacity 0.15s;
}
.sidebar-dfm-violation-item:last-child { border-bottom: none; }
.sidebar-dfm-violation-content {
    display: flex; gap: 8px; align-items: center;
    flex: 1; cursor: pointer; min-width: 0;
}
.sidebar-dfm-violation-content:hover {
    color: #f1f5f9;
}
.sidebar-dfm-violation-item:hover {
    background: rgba(255,113,108,0.12);
}
.sidebar-dfm-violation-dist { color: #ff908b; font-weight: 600; min-width: 64px; }
.sidebar-dfm-violation-coord { color: #94a3b8; flex: 1; }
.sidebar-dfm-violation-layer { color: #64748b; font-size: 10px; margin-left: auto; }

/* T12 (5/31): violation 무시 체크박스 + 회색 표시 */
.sidebar-dfm-violation-ignore {
    display: flex; align-items: center;
    padding: 2px 4px; cursor: pointer;
    flex-shrink: 0;
}
.sidebar-dfm-violation-ignore input[type="checkbox"] {
    margin: 0; cursor: pointer;
    accent-color: #ff908b;
}
/* 체크된 item = 회색 표시 (= count 제외 의 시각 cue) */
.sidebar-dfm-violation-item.ignored {
    opacity: 0.45;
}
.sidebar-dfm-violation-item.ignored .sidebar-dfm-violation-dist {
    color: #94a3b8; text-decoration: line-through;
}
.sidebar-dfm-violation-item.ignored:hover {
    background: rgba(70,72,77,0.15);
}

/* DFM 위반 마커 — 등장 zoom-in (cubic-bezier overshoot) */
@keyframes violation-zoom-in {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- DFM Clickable Items --- */
.sidebar-dfm-item.clickable { cursor: pointer; }
.sidebar-dfm-item.clickable:hover { border-color: rgba(255,113,108,0.4); background: rgba(255,113,108,0.05); }
.sidebar-dfm-item-hint { font-size: 10px; color: #64748b; text-align: right; margin-top: 4px; }
@keyframes violation-pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* --- Sidebar Resize Handle --- */
#resize-handle {
    width: 6px; position: absolute; top: 0; right: 0; bottom: 0;
    cursor: col-resize; background: #333; transition: background 0.2s;
}
#resize-handle:hover, #resize-handle.dragging { background: #666; }

/* --- Sidebar Bottom Controls --- */
#sidebar-bottom {
    flex-shrink: 0; padding: 8px 12px;
    border-top: 1px solid rgba(70,72,77,0.2);
}
.sidebar-bottom-row { display: flex; gap: 6px; align-items: center; }
#sidebar-bottom #unit-select {
    flex: 1; background: #111418; border: 1px solid #333;
    color: #94a3b8; padding: 5px 8px; border-radius: 4px;
    font-size: 10px; cursor: pointer; outline: none;
}
#sidebar-bottom #unit-select option { background: #171a1f; color: #fff; }

/* --- Minimap Placeholder --- */
#minimap-container {
    flex-shrink: 0; padding: 12px;   /* 좌측 = 레이어 패널 X 맞춤 (Y/폭 사용자 조절 가능) */
    border-top: 1px solid var(--border);
}
#minimap-placeholder {
    height: 224px; border-radius: 6px;   /* sidebar-layer-count 제거분 흡수(~+44). 폭=sidebar 맞춤, 사용자 조절 */
    border: 1px solid rgba(7,238,255,0.2); background: #111418;
}
/* sidebar-layer-count (총 N개 레이어) 제거 = 미니맵 영역으로 흡수 (오너 요청). */


/* ──────────────────────────────────────────
   5. Viewer (Main Canvas Area)
   ────────────────────────────────────────── */

#viewer-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: margin-right 0.3s; }
/* 6/18: gnb(top-header)는 우측 끝까지 유지(빈 공간 제거) = push 에서 제외.
   toolbar/viewer/dfm-bottom 만 밀어서 패널 안 가림. */
#viewer-wrapper.dfm-shifted { margin-right: 0; }
#viewer-wrapper.dfm-shifted #viewer,
#viewer-wrapper.dfm-shifted #dfm-bottom { margin-right: 312px; transition: margin-right 0.3s; }
#viewer { flex: 1; overflow: hidden; position: relative; cursor: grab; caret-color: transparent; }

/* ── DFM 하단 패널 (Figma viewpage Bottom) ── */
#dfm-bottom {
    flex-shrink: 0; height: 227px;   /* Figma 1296x240 (미니맵 높이와 맞춤) */
    margin: 0 6px 12px;   /* 좌우+하단 간격 (Figma, 숫자 조절) */
    background: var(--panel); border: 0px solid var(--border); border-radius: 8px;   /* #252A31 (Figma viewpage) */
    display: flex; flex-direction: column; overflow: hidden;
    transition: transform 0.3s ease, margin-bottom 0.3s ease;   /* 6/18: 아래로 슬라이드 */
}
/* 6/18: 하단 패널 아래로 슬라이드(접힘) — transform 으로 내려가고 margin-bottom 음수로 viewer 영역 회수 */
#dfm-bottom.collapsed {
    transform: translateY(calc(100% + 12px));
    margin-bottom: -252px;   /* height 240 + 하단 margin 12 */
}
/* 하단 슬라이드 토글 버튼 (우측 #dfm-tab 과 같은 색/패턴) */
#dfm-bottom-tab {
    position: fixed; bottom: 239px; left: 50%; transform: translateX(calc(-50% + 150px));   /* sidebar(300px) 보정 = viewer 영역 중앙 (숫자 미세조정) */
    background: #3F4651; color: #252A31;
    padding: 1px 25px; cursor: pointer; z-index: 101;
    border-radius: 6px 6px 0 0;
    font-size: 13px; font-weight: 800; line-height: 1.5;
    transition: bottom 0.3s, transform 0.3s;
}
#dfm-bottom-tab:hover { background: #4A5260; }
#dfm-bottom-tab.collapsed { bottom: 0; }   /* 접히면 화면 하단으로 */
#dfm-bottom-tab.shifted { transform: translateX(calc(-50% + 150px - 160px)); }   /* 패널(312px) 열림 = sidebar보정(150) - 패널절반(156) = 좁아진 viewer 중앙 (숫자 미세조정) */
#dfm-bottom-header {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--text-dim);
    container: dfm-header / inline-size;   /* ★ 6/25: alart 반응형 숨김 기준 = 헤더(패널) 폭 */
}
.dfm-bottom-title { font-weight: 500; color: var(--text-soft); }
.dfm-bottom-beta {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: 18px; border-color:#FAFA00; background-color: #FAFA00CC;
    font-size: 11px; font-weight: 600; padding: 4px 9px;
    color: #000000; margin-left: 5px; margin-right: -5px;
}
.dfm-bottom-mode { color: var(--text-dim2); font-weight: 500; }
.dfm-bottom-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.dfm-bottom-alart {   /* ★ 6/25: 좌측 버튼묶음 ─ 중앙 안내 ─ 우측 배지. 좁으면 완전 숨김(축소/2줄 X) */
    font-weight: 500; color: #8F94A2;
    flex: 1; display: flex; align-items: center; justify-content: center;
    white-space: nowrap; overflow: hidden; margin-right: 5%;
}
@container dfm-header (max-width: 880px) {   /* ★ 임계값 = 추정(오너 실측 조정). 이하 = 안내문구 완전 사라짐 */
    .dfm-bottom-alart { display: none; }
}
.dfm-bottom-report { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; }
.dfm-bottom-report:hover { color: var(--accent); }
/* 6/18: DFM 분석 시작 버튼 (자동분석 실패 시 수동 시작) + 동작 중 회전 스피너 */
.dfm-bottom-run { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 12px; padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.dfm-bottom-run:hover { border-color: var(--accent); }
.dfm-bottom-run.running { color: #ffcd76; border-color: rgba(255,205,118,0.4); }
.dfm-bottom-spinner { display: none; width: 13px; height: 13px; border: 2px solid rgba(255,205,118,0.25); border-top-color: #ffcd76; border-radius: 50%; animation: dfm-loading-spin 0.8s linear infinite; }
.dfm-bottom-badges { margin-left: auto; display: flex; gap: 18px; font-weight: 600; }
.dfm-badge { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.dfm-badge-arrow { font-size: 25px; line-height: 1; padding-bottom: 5px; }   /* 6/22 배지 › 화살표 크기 (숫자로 조절) */
.dfm-badge-err { color: var(--err); }
.dfm-badge-ok { color: var(--ok); }
.dfm-badge-warn { color: var(--star); }
#dfm-bottom-body { flex: 1; display: flex; overflow: hidden; }
#dfm-error-type {
    flex: 0 0 110px; margin: 12px;   /* ★ 하나의 박스 (Image#22) */
    background: var(--panel-dark); border-radius: 10px;   /* #1E2123 */
    display: flex; flex-direction: column; padding: 15px;
}
.dfm-error-type-img {   /* ★ 애뉴얼링 (error.md 도넛 인라인) — 박스 중앙 정렬 */
    flex: 1; min-height: 80px; margin: 10px 0;
    border-radius: 10px; background-color: var(--panel-dark);   /* #1E2123 (박스와 동일) */
    display: flex; align-items: center; justify-content: center;
}
#dfm-error-type-icon { max-width: 90%; max-height: 78px; }   /* 에러 타입 아이콘 (viewer.html inline 이전 = max 제약) */
#dfm-error-type-icon.dfm-pass-check {   /* ★ 6/25: 오류 0 합격 체크(check.png) = 45x45 고정, 박스 중앙 */
    width: 45px; height: 45px; max-width: 45px; max-height: 45px;
}
.dfm-error-type-label {   /* 하단 = 무슨 에러인지 (동적, ②) + 위 회색 구분선 */
    font-size: 12px; color: var(--text-soft); font-weight: 500; text-align: center;
    flex-shrink: 0; padding-top: 0px; border-top: 1px;
    word-break: keep-all;        /* 단어 통째 유지 = 공백에서만 줄바꿈 (errorlog / (error-log)) */
    overflow-wrap: break-word;   /* 단어가 박스보다 길 때만 안전하게 자름 (박스 밖 삐짐 방지) */
}
#dfm-error-list {   /* #252A31 박스 (중 오류 리스트) = head 고정 + body 스크롤 */
    flex: 1; margin: 8px; overflow: hidden;
    background: var(--panel); border-radius: 8px;
    display: flex; flex-direction: column;
}
.dfm-error-list-head {   /* 고정 헤더 (.dfm-detail-head 패턴 통일) */
    flex-shrink: 0; padding: 10px 16px; border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--text-dim);
}
#dfm-error-list-body {   /* 스크롤 본문 = 카테고리 행 담김 */
    flex: 1; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
#dfm-error-list-body::-webkit-scrollbar { width: 6px; }
#dfm-error-list-body::-webkit-scrollbar-track { background: transparent; }
#dfm-error-list-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* ★ 6/25: DFM 진행 progress (dfm-error-list 토글, 분석 중 = head/body 덮음) */
#dfm-elp { flex: 1; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }   /* ★ 6/25: 가로+세로 중앙, 스크롤 없음 */
.dfm-elp-title { font-size: 14px; color: var(--text-soft); text-align: center; margin-bottom: 12px; }
#dfm-elp .pbar { margin-top: 0; }   /* ProgressBar 모듈 (main=현재metric / bar / stage=N/M) */
#dfm-detail-list { flex: 0 0 50%; margin: 8px; background: var(--panel-dark); width: 685px; height: 156px; border-radius: 10px; display: flex; flex-direction: column;}   /* ★ #1E2123 박스 */
.dfm-detail-head {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; padding-left: 0px; border-bottom: 1px solid var(--border);   /* 가장 위 가로선 (남김) */
    font-size: 12px; color: var(--text-dim);
}
/* 6/26 A1: '리스트 세부 내역' 글씨 우측 이동(들여쓰기). 더 우측 = margin-left 키우기. */
.dfm-detail-title { margin-left: 24px; }
.dfm-detail-ignore { display: flex; flex-direction: row-reverse; align-items: center; gap: 5px; cursor: pointer; }   /* 체크박스 우측 */
.dfm-detail-body {
    flex: 1; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.dfm-detail-body::-webkit-scrollbar { width: 6px; }
.dfm-detail-body::-webkit-scrollbar-track { background: transparent; }
.dfm-detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── 중 오류 리스트 행 (②A) ── */
.dfm-err-row {
    display: flex; align-items: center; gap: 5px;
    padding: 2px 16px; padding-bottom: 2px; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text-soft);
}
.dfm-err-row.clickable { cursor: pointer; }
.dfm-err-row.clickable:hover { background: rgba(255,255,255,0.03); }
.dfm-err-icon { padding-top: 3px; flex-shrink: 0; font-size: 14px; color: var(--err); }
.dfm-err-icon.warn { color: var(--star); }
.dfm-err-label { flex: 1; word-break: keep-all; overflow-wrap: break-word; }   /* 단어 통째 유지 = 공백에서만 줄바꿈 (수치 중간 안 잘림) */
.dfm-err-label b { color: var(--err); font-weight: 700; white-space: nowrap; display: inline-block; }   /* 빨간 스펙 (>= 5.000 mil (2층)) 통째로 한 줄 = 중간 안 쪼개짐 */
.dfm-err-count { flex-shrink: 0; color: var(--err); font-weight: 700; }
.dfm-err-arrow { font-size: 18px; line-height: 1; margin-left: 3px; }   /* 6/22 'n건 ›' 화살표 크기 (숫자로 조절) */
.dfm-err-icon.pass { color: var(--ok); }   /* 6/18: 적합 아이콘 초록 */
.dfm-err-row.pass .dfm-err-label b, .dfm-err-row.pass .dfm-err-count { color: var(--ok); }   /* 적합 수치 = 초록 (안 무섭게 ㅎㅎ) */
.dfm-err-row.warn .dfm-err-label b, .dfm-err-row.warn .dfm-err-count { color: var(--star); }   /* 경고 수치 = 주황 */
.dfm-err-empty-title { display: flex; justify-content: center; padding-top: 3%; align-items: center; font-size: 20px; font-weight: 600; color: #32BA7C;}
.dfm-err-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 3px; color: var(--text-dim2); font-size: 13px; }
.dfm-warn-em { color: #F58B2E; font-weight: 600; }   /* ★ 6/29 회의: '경고 리스트' 강조 (warning 색 통일) */
.dfm-detail-note { display: flex; justify-content: center; padding-top: 6%; align-items: center; font-size: 18px; gap: 8px; color: var(--text-dim); }   /* ★ 6/25: detail-body 빈 안내 (전문 담당자 회신) */
.dfm-err-row.selected { background: rgba(7,238,255,0.06); }   /* 선택 카테고리 강조 */

/* ── 우 미달 리스트 행 (②B) ── */
.dfm-detail-row {
    display: flex; align-items: center; gap: 5px;
    padding: 4.5px 16px; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text-soft); cursor: pointer;
}
.dfm-detail-row:hover { background: rgba(255,255,255,0.03); }
.dfm-detail-val { flex: 1; }
.dfm-detail-val b { color: var(--err); font-weight: 700; }
.dfm-detail-layer { flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.dfm-detail-check { accent-color: #1e64fd; cursor: pointer; }
/* 6/18: 무시된 미달 행 = 흐리게 (T12 무시 = localStorage) */
.dfm-detail-row.ignored { opacity: 0.45; }
.dfm-detail-row.ignored .dfm-detail-val b { color: var(--text-dim); }

/* 빈 리스트 placeholder (데이터 연결 ② 전) */
/* 2026-06-19 i18n: 영어 모드 (body[data-lang=en]) = pseudo content 영어. 특정성 ↑ = 순서 무관 우선. */
[data-lang="en"] #dfm-error-list-body:empty::before, [data-lang="en"] .dfm-detail-body:empty::before { content: 'Waiting for data (②)'; }
#dfm-error-list-body:empty::before, .dfm-detail-body:empty::before {
    display: block; padding: 16px; color: var(--text-dim2); font-size: 12px;
}
#viewer:active { cursor: grabbing; }
#svg-container { position: absolute; transform-origin: 0 0; z-index: 1; }
#svg-container object { pointer-events: none; user-select: none; }
#status { display: none; }
#loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 14px; color: #ff8800; z-index: 40;
    background: rgba(0,0,0,0.8); padding: 12px 24px; border-radius: 8px;
}


/* ──────────────────────────────────────────
   6. Left Floating Tools (Select, Ruler, etc.)
   ────────────────────────────────────────── */

#float-tools {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 30; display: flex; flex-direction: column; gap: 0;
    margin-left: 36px; pointer-events: auto;
    max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none;
    background: rgba(23,26,31,0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 4px;   /* 6/18: 한 박스로 모음 */
}
#float-tools::-webkit-scrollbar { display: none; }
.float-tool-group {
    display: flex; flex-direction: column; gap: 1px;
}
.float-tool-group + .float-tool-group {   /* 6/18: 그룹 사이 border 구분선 */
    margin-top: 12px; margin-bottom: 3px; padding-top: 12px; padding-bottom: 3px; border-top: 1px solid rgba(255,255,255,0.1);
}
.float-tool-btn {
    width: 30px; height: 30px; border: none; background: transparent;
    color: var(--text-soft); cursor: pointer; border-radius: 6px;   /* 6/18: 흰색 아이콘 (Image#16, active 시 배경 시안) */
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; font-size: 14px;
}
.float-tool-btn:hover { background: rgba(83,221,252,0.15); }
.float-tool-btn.active { background: rgba(83,221,252,0.2); box-shadow: inset 0 0 0 1px rgba(83,221,252,0.3); }
.float-tool-btn:disabled { color: #4a5568; cursor: default; }
.float-tool-btn:disabled:hover { background: transparent; }

/* Select/Measure active state */
#btn-select.active, #btn-ruler.active, #btn-c2c.active, #btn-e2e.active, #btn-ar.active {
    background: rgba(83,221,252,0.2); box-shadow: inset 0 0 0 1px rgba(83,221,252,0.3);
}


/* ──────────────────────────────────────────
   7. Bottom Bar (Coord, Zoom Slider, Layer Count)
   ────────────────────────────────────────── */

#bottom-bar {
    position: absolute; bottom: 26px; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 16px; z-index: 30; min-height: 40px;
    background: transparent; border-top: none;
    pointer-events: none;
    transition: right 0.3s;
}
#bottom-bar > * { pointer-events: auto; }
#bottom-left, #bottom-center, #bottom-right { display: flex; align-items: center; gap: 8px; }
#layer-count-info { font-size: 10px; color: #64748b; font-weight: 500; }

#bottom-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    /* 5/14 #F lag fix - backdrop-filter:blur 제거 (SVG 위 = wheel zoom 매 frame paint heavy cause). */
    background: rgba(23,26,31,0.9); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; padding: 4px 12px;
}
#zoom-slider {
    width: 120px; height: 4px; appearance: none; background: rgba(255,255,255,0.1);
    border-radius: 2px; cursor: pointer; outline: none;
}
#zoom-slider::-webkit-slider-thumb {
    appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
}
.bottom-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--accent); padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.bottom-btn:hover { background: rgba(83,221,252,0.15); border-color: rgba(83,221,252,0.3); }
#zoom-info { font-size: 11px; color: var(--accent); min-width: 40px; text-align: center; font-weight: 600; }

/* --- Coordinate Display --- */
#coord-display {
    display: flex; gap: 12px; align-items: center;
    background: rgba(23,26,31,0.8); padding: 4px 12px;
    border-radius: 8px; border-left: 3px solid var(--accent);
    font-family: 'Consolas', monospace; font-size: 10px; color: var(--accent);
    margin-left: 40px;
}
#coord-display span { white-space: nowrap; }


/* ──────────────────────────────────────────
   8. DFM Panel (Right Side - Order Info)
   ────────────────────────────────────────── */

#dfm-panel {
    position: fixed; right: -312px; top: 56px; bottom: 12px;
    width: 290px; background: #252A31; border-left: 1px solid rgba(70,72,77,0.1);
    overflow: hidden; z-index: 102; font-size: 13px;
    transition: right 0.3s;
    display: flex; flex-direction: column;
    border-radius: 10px;
}
#dfm-panel.open { right: 12px; }

/* --- Panel Header --- */
#dfm-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid rgba(70,72,77,1);
    background: #252A31; flex-shrink: 0;
}
#dfm-panel-header > span {
    font-size: 15px; font-weight: 700; color: #cbd5e1; letter-spacing: 0.05em;
}
/* 5/6 owner: 제작규격 → #header-right 의 EN 버튼 왼쪽으로 이동. 모습 그대로. */
/* 6/18: 제작규격도 .nav-btn 박스형과 통일 (id 우선순위라 별도 명시) */
#header-right #btn-fab {
    background: var(--panel-dark); color: var(--text-soft);
    border: 0px solid var(--border);
    padding: 7.5px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.03em;
    cursor: pointer;
    margin-right: 4px;
}
#header-right #btn-fab:hover { background: var(--border); }

/* 6/22 Figma = 샘플/양산 토글 = 파란 pill (배경 #2D3A4D, active #1E64FD 흰글씨) */
#dfm-panel-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
#order-type-tabs {
    display: flex; gap: 0;
    background: #2D3A4D; border-radius: 15px;
    flex-shrink: 0;
}
#order-type-tabs .order-type-btn {
    background: transparent; color: #fff; border: none;
    padding: 5px 16px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    border-radius: 15px;
}
#order-type-tabs .order-type-btn:hover { color: #fff; }
#order-type-tabs .order-type-btn.active {
    background: #1E64FD; color: #fff;
}
#dfm-panel-buttons { display: flex; gap: 6px; }
.dfm-btn-sample {
    background: var(--accent); color: #00343e; border: none;
    padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
    cursor: pointer; box-shadow: 0 0 12px rgba(83,221,252,0.18);
}
.dfm-btn-sample:hover { filter: brightness(1.1); }
.dfm-btn-mass {
    background: #171a1f; color: #94a3b8; border: 1px solid rgba(70,72,77,0.3);
    padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
    cursor: pointer;
}
.dfm-btn-mass:hover { border-color: rgba(83,221,252,0.3); color: #fff; }
.dfm-btn-mass:active, .dfm-btn-sample:active { transform: scale(0.95); }

/* --- Panel Content --- */
#dfm-content { padding: 8px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
#dfm-content::-webkit-scrollbar { width: 4px; }
#dfm-content::-webkit-scrollbar-track { background: transparent; }   /* 6/18: 배경 없이 막대만 */
#dfm-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 2px; }
#dfm-panel .dfm-section { margin-bottom: 4px; }
/* 5/11 fix: dfm-section-title / dfm-result-* 는 사이드바 (#sidebar-dfm-content)
   안에서도 사용 (renderEqTab + _renderStatic). 글로벌화. */
.dfm-section-title {
    color: #64748b; font-size: 11px; text-transform: uppercase;
    margin-bottom: 6px; letter-spacing: 0.22em; font-weight: 700;
    padding: 8px 0 4px 0;
}

/* --- KIND 탭 (Standard/Advance/FPCB/Stencil) --- */
#dfm-panel .dfm-kind-tabs {
    display: flex; gap: 4px; padding: 6px 8px 10px 8px;
    border-bottom: 1px solid #2a3340; margin-bottom: 6px;
}
#dfm-panel .dfm-kind-tab {
    flex: 1; padding: 6px 4px; font-size: 12px; font-weight: 600;
    background: #1c2330; color: #94a3b8; border: 1px solid #2a3340;
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
#dfm-panel .dfm-kind-tab:hover { background: #232b3a; color: #cbd5e1; }
#dfm-panel .dfm-kind-tab.active {
    background: var(--accent); color: #0a0d12; border-color: var(--accent);
}

/* --- Inline Row (icon + label + value) --- */
#dfm-panel .dfm-row {
    display: grid; grid-template-columns: 20px 110px minmax(0,1fr);
    align-items: center; gap: 6px;
    padding: 7px 0;
}
#dfm-panel .dfm-row > div:last-child {
    display: flex; justify-content: flex-start; align-items: center;
    min-width: 0; gap: 6px;
}
#dfm-panel .dfm-icon {
    display: flex; align-items: center; justify-content: center;
    color: #677284; width: 16px; height: 16px;   /* 6/18: 아이템 아이콘 색 (Figma) */
}
#dfm-panel .dfm-icon svg { width: 16px; height: 16px; }
#dfm-panel .dfm-label {
    font-size: 14px; font-weight: 500; color: #cbd5e1;
    letter-spacing: -0.01em; line-height: 1;
}
#dfm-panel .dfm-value {
    font-size: 14px; color: #fff; font-weight: 500; text-align: left;   /* 6/18: 목표는 값 좌측 정렬 */
}
#dfm-panel .dfm-value.warn { color: #ffab40; }
#dfm-panel .dfm-value.ok { color: #66bb6a; }

/* --- Select Dropdown --- */
/* 고정폭 컨트롤 = 값 길이 무관하게 행마다 화살표 X 위치 통일. */
#dfm-panel { --dfm-order-control-width: 118px; }
#dfm-panel .dfm-select-wrap {
    position: relative; flex: 0 0 var(--dfm-order-control-width);
    width: var(--dfm-order-control-width); max-width: 100%; min-width: 0;
}
#dfm-panel .dfm-select {
    width: 100%; max-width: 100%; box-sizing: border-box; appearance: none;
    background: transparent; border: none; color: #fff; font-size: 14px;
    padding: 2px 20px 2px 0; outline: none; cursor: pointer;
    text-align: left; text-align-last: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#dfm-panel .dfm-select option { background: #fff; color: #111; }
#dfm-panel .dfm-select:focus { outline: 1px solid var(--accent); outline-offset: 1px; }
#dfm-panel .dfm-select-wrap::after {
    content: '\25BC'; position: absolute; right: 2px; top: 50%;
    transform: translateY(-50%); font-size: 8px; color: #64748b;
    pointer-events: none;
}

/* --- Color Swatches --- */
#dfm-panel .dfm-color-row { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
/* PCB색상 행만 라벨 컬럼 좁게 → swatch 공간 확보 */
#dfm-panel .dfm-row:has(.dfm-color-row) { grid-template-columns: 18px 110px minmax(0,1fr); }
#dfm-panel .dfm-color-dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; transition: border-color 0.15s;
    flex-shrink: 0;
}
#dfm-panel .dfm-color-dot:hover,
#dfm-panel .dfm-color-dot.selected { border-color: #fff; }

/* --- Input Fields --- */
#dfm-panel .dfm-input {
    width: 100%; background: transparent; border: none;
    color: #fff; font-size: 14px; padding: 0px 0;
    outline: none; text-align: left;
}
#dfm-panel .dfm-input:focus { outline: 1px solid var(--accent); outline-offset: 1px; }

/* --- Size Input (W x H) --- */
/* 크기 행 layout: 첫 input(가로)은 value 영역 좌측 외부 (라벨 영역 끝),
 * X 분리자는 value 영역 시작 (다른 value와 같은 컬럼 = 붉은 선 정렬),
 * 두 번째 input(세로) + unit는 X 우측. */
/* ★ 6/25: 2줄(x/y) grid. ★1340 #dfm-panel .dfm-row>div:last-child{display:flex}(0,1,2,1) 이기려고 #dfm-panel 동일 prefix + 후순위 */
#dfm-panel .dfm-row > div.dfm-size-row {
    display:grid; grid-template-columns: auto 1fr;
    column-gap: 6px; row-gap: 4px; align-items: center; justify-items: start;
    position: relative;
    width: 100%;
}
.dfm-size-axis { font-size: 12px; font-weight: 700; color: #94a3b8; }   /* x/y 축 라벨 (첫 컬럼 = 세로 정렬) */
.dfm-size-cell { display: flex; align-items: center; gap: 6px; }   /* 입력[+unit] (둘째 컬럼 = 세로 정렬) */
.dfm-size-row .dfm-input { text-align: center; min-width: 0ch; box-sizing: content-box; }   /* 폭 = JS _autoSizeInput inline(글자수 ch) */
#dfm-panel .dfm-size-unit { font-size: 12px; color: #64748b; margin-left: 1px; }
/* 2026-06-26: '크기' 행만 flex(span). X/Y 스택 블록 + mm 블록 따로 = mm 세로중앙(크기와 같은 가로선).
   modifier 1클래스 더 = base grid 규칙(1412) 이김. 전체/배열크기 size-row는 grid 그대로. */
#dfm-panel .dfm-row > div.dfm-size-row.dfm-size-row--unit {
    display: flex; align-items: center; gap: 10px;
}
.dfm-size-xy { display: flex; flex-direction: column; gap: 4px; }
.dfm-size-line { display: flex; align-items: center; gap: 6px; }

/* --- DFM Result Rows --- */
/* 5/11 fix: 사이드바 (#sidebar-dfm-content) DFM/EQ 탭에서도 사용. selector 글로벌. */
.dfm-result-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; margin-bottom: 4px;
    background: rgba(255,255,255,0.03); border-radius: 8px;
}
.dfm-result-label { font-size: 13px; color: #cbd5e1; }
.dfm-result-value { font-size: 13px; font-weight: 700; }
.dfm-result-value.pass { color: #79f28a; }
.dfm-result-value.fail { color: #ff716c; }
.dfm-result-value.review { color: #ffcd76; }

/* --- Footer (sticky bottom: summary + buttons) --- */
#dfm-footer {
    flex: 0 0 auto; padding: 12px 14px 14px 14px;
    border-top: 1px solid rgba(70,72,77,1);
    background: #252A31;
}

/* --- Order Summary Card --- */
/* 6/18: 제작정보 헤더 (박스 밖) — 제작정보(좌) + 무게(우) */
#dfm-panel .dfm-summary-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding: 0 2px;
}
#dfm-panel .dfm-summary-title { font-size: 13px; font-weight: 700; color: #8F94A2; }
#dfm-panel .dfm-summary-weight { font-size: 12px; color: var(--text-dim); }
#dfm-panel .dfm-summary {
    padding: 13px 12px 9px 11px;
    border: 1px solid rgba(63, 70, 81, 0.60);
    background: #3F4651; border-radius: 8px;   /* 6/18: 제작정보 박스 어둡게 (Figma) */
    /* 2026-06-26: 값(중국/24시간/날짜/가격) 좌측정렬 기준 = label 열 폭. ★gap 조정 = 이 한 값만. */
    --dfm-label-col: 135px;
}
#dfm-panel .dfm-summary-row {
    /* 2026-06-26: flex space-between(값 우측밀림) → 2열 grid(label 고정 + 값 좌측정렬). */
    display: grid; grid-template-columns: var(--dfm-label-col, 108px) 1fr; align-items: center;
    font-size: 13px; color: #ffffff; padding: 4px 0px 4px 7px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
#dfm-panel .dfm-summary-row:last-child,
#dfm-panel .dfm-summary-row.highlight { border-bottom: none; }
#dfm-panel .dfm-summary-row > span:last-child { color: #fff; font-weight: 500;}
#dfm-panel .dfm-summary-row.highlight > span { color: #f5a86b; font-weight: 700; }
#dfm-panel .dfm-leadtime-select {   /* 6/18: 제작기간 드롭다운 (어두운 패널 맞춤) */
    background: transparent; border: none; color: #fff; font-size: 13px; font-weight: 500;
    cursor: pointer; outline: none;
    /* 2026-06-26: 값 좌측정렬 = 다른 값들과 동일 edge. width:auto = 화살표가 텍스트 바로 뒤. */
    text-align-last: left; justify-self: start; width: auto; padding: 0; padding-right: 35px;
}
#dfm-panel .dfm-leadtime-select option { background: #2F323B; color: #fff; }
/* 2026-06-24: 제작기간 '?' 도움말 원 (호버 시 툴팁). 내용 = leadtime config tooltip. */
#dfm-panel .dfm-leadtime-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; margin-left: 4px;
    border: 1px solid currentColor; border-radius: 50%;
    font-size: 9px; line-height: 1; opacity: 0.5; cursor: help;
    vertical-align: middle;
}
#dfm-panel .dfm-leadtime-help:hover { opacity: 0.9; }
#dfm-panel .dfm-summary-sub {
    text-align: right; font-size: 8px; color: #94a3b8;
    margin-top: 2px;
}

/* --- Supply Price Card (별도 카드) --- */
#dfm-panel .dfm-price-card {
    margin-top: 5px; padding: 5px 0 2px 10px;
    border-top: 1px solid rgba(255,255,255,0.12);   /* 6/18: dfm-summary 안 구분선 (별도 박스 제거 → border) */
    /* 2026-06-26: 공급가격도 동일 2열 grid = 값(106,000원) 위 값들과 좌측 edge 일치. */
    display: grid; grid-template-columns: var(--dfm-label-col, 108px) 1fr; align-items: center;
}
#dfm-panel .dfm-price-label { font-size: 13px; color: #ffffff; font-weight: 500; }
#dfm-panel .dfm-price-value { font-size: 17px; color: #5CFF2F; font-weight: 800; }   /* 6/18: 공급가격 녹색 (Figma) */

/* --- Panel Action Buttons (주문하기 / 견적요청) --- */
#dfm-panel .dfm-actions { display: flex; gap: 0; margin-top: 10px; }   /* 6/18: 두 버튼 붙이기 */
#dfm-panel .dfm-btn-order,
#dfm-panel .dfm-btn-estimate {
    flex: 1; border: none; padding: 12px 0;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#dfm-panel .dfm-btn-order { background: #1E64FD; color: #ffffff; border-radius: 6px 0 0 6px; }   /* 6/18: 파랑 + 좌측만 radius */
#dfm-panel .dfm-btn-order:hover { filter: brightness(1.08); }
#dfm-panel .dfm-btn-estimate { background: #F58B2E; color: #ffffff; border-radius: 0 6px 6px 0; }   /* 6/18: 주황 + 우측만 radius */
#dfm-panel .dfm-btn-estimate:hover { filter: brightness(1.08); }
/* 6/26 B: 단일 버튼(견적요청/긴급생산)일 때 = 양쪽 모두 radius (좌측 각짐 fix). */
#dfm-panel .dfm-actions > .dfm-btn-estimate:only-child,
#dfm-panel .dfm-actions > .dfm-btn-order:only-child { border-radius: 6px; }

/* 6/22 viewpage: 샘플/양산 토글 재노출 (Figma 디자인 = 위 #order-type-tabs 파란 pill). 6/18 display:none 해제. */

/* --- EQ Badge --- */
#dfm-panel .eq-status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 700;
}
#dfm-panel .eq-status-badge.pending { background: rgba(255,205,118,0.15); color: #ffcd76; }
#dfm-panel .eq-status-badge.done { background: rgba(121,242,138,0.15); color: #79f28a; }

/* --- DFM Slide Tab --- */
#dfm-tab {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    background: #3F4651; color: #252A31;   /* 6/18: 슬라이드 버튼 배경 #3F4651 / 화살표 #252A31 (Figma) */
    padding: 22px 5px; cursor: pointer; z-index: 101;
    border-radius: 6px 0 0 6px;
    font-size: 13px; font-weight: 800;
    transition: right 0.3s;
}
#dfm-tab:hover { background: #4A5260; }
/* 패널 열림 시 dfm-tab은 패널 좌측 가장자리에 딱 붙임. 빈틈 X. */
#dfm-tab.open { right: 300px; }


/* ──────────────────────────────────────────
   9. Overlays & Popups
   ────────────────────────────────────────── */

/* --- Drag & Drop --- */
#drop-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); z-index: 9999;
    justify-content: center; align-items: center;
    border: 4px dashed #888;
}
#drop-overlay.active { display: flex; }
#drop-overlay-text { font-size: 24px; color: #ccc; pointer-events: none; }

/* --- Object Info Panel (2026-06-18 사용자 infobox = 2열 label│value, 측정값 초록) --- */
#object-info {
    display: none; position: absolute; top: 40px; right: 10px;
    background: rgba(20,24,28,0.92); padding: 14px 18px;
    border-radius: 10px; font-size: 14px; color: var(--text);
    z-index: 100; min-width: 220px; max-width: 400px; border: 1px solid var(--border);
}
.object-info-grid {
    display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; align-items: baseline;
}
.object-info-grid .obj-label { color: var(--text-dim2); }
.object-info-grid .obj-value { color: var(--text); }
.object-info-grid .obj-label.obj-label-meas { color: var(--ok); font-weight: 600; }   /* 측정값 label 초록 */
.object-info-grid .obj-value.obj-val-meas { color: var(--ok); font-weight: 600; }   /* 측정값 값 초록 */
.object-info-grid .obj-value.obj-val-dbg { color: var(--text-dim); font-size: 12px; }   /* 디버그 흐리게 */
#object-info button {
    margin-top: 12px; background: var(--panel); color: var(--text-soft); border: 1px solid var(--border);
    padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
#object-info button:hover { border-color: var(--accent); color: var(--accent); }
.object-info-extra { color: var(--accent); margin: 8px 0 0; font-weight: bold; }

/* --- Hover Tooltip --- */
#hover-tooltip {
    display: none; position: fixed;
    background: rgba(0,0,0,0.9); color: #eee;
    padding: 8px 12px; border-radius: 6px;
    font: 13px Consolas, monospace; pointer-events: none; z-index: 9999;
}
#hover-tooltip pre { margin: 0; white-space: pre-wrap; line-height: 1.5; }


/* ──────────────────────────────────────────
   10. Misc (Color Popup, Drag States)
   ────────────────────────────────────────── */

/* --- Drag States --- */
.drag-handle {
    font-size: 13px; color: #555; margin-right: 6px; margin-top: 1px;
    cursor: grab; flex-shrink: 0; padding: 0 2px; line-height: 1;
}
.drag-handle:hover { color: #999; }
.drag-handle:active { cursor: grabbing; }
.layer-item.dragging { opacity: 0.4; }
.layer-item.drag-over { border-top: 2px solid #888; }

/* --- Color/Opacity Popup --- */
.color-popup {
    background: #2e2e2e; border: 1px solid #555; border-radius: 6px;
    padding: 10px 12px; margin: 2px 0 4px 0;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.color-popup-section { margin-bottom: 2px; }
.color-swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.color-swatch {
    width: 100%; aspect-ratio: 1; border-radius: 3px;
    border: 2px solid transparent; cursor: pointer;
    transition: border-color 0.1s, transform 0.1s;
}
.color-swatch:hover { transform: scale(1.15); border-color: #aaa; }
.color-swatch.selected { border-color: #fff; transform: scale(1.15); }
.color-popup-row { display: flex; align-items: center; gap: 8px; }
.color-popup-label { font-size: 12px; color: #aaa; min-width: 52px; flex-shrink: 0; }
.color-popup-picker {
    width: 32px; height: 22px; padding: 0; border: 1px solid #555;
    background: none; cursor: pointer; border-radius: 3px;
}
.color-preview {
    width: 22px; height: 22px; border-radius: 3px; border: 1px solid #555; flex-shrink: 0;
}
.color-popup-opacity { flex: 1; accent-color: #888; cursor: pointer; }
.opacity-value { font-size: 11px; color: #777; margin-left: 4px; }
.color-popup-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.color-popup-cancel, .color-popup-ok {
    background: #444; color: #eee; border: none; padding: 6px 16px;
    border-radius: 4px; cursor: pointer; font-size: 13px;
}
.color-popup-cancel:hover { background: #555; }
.color-popup-ok { background: #4a6a8a; font-weight: bold; }
.color-popup-ok:hover { background: #5a7a9a; }

/* ── 메모 (포스트잇) ── */
#memo-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 20;
    transform-origin: 0 0;
}
/* 2026-06-18: Figma CommentPopup 디자인 (말풍선 #252A31 + 흰 입력 + Comment 제목 + X #8F94A2) */
.memo-postit {
    position: absolute;
    width: 180px;
    background: #252A31;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
    border-radius: 8px;
    pointer-events: auto;
    /* JS에서 translate + scale 역보정 관리. 꼬리 12px 만큼 위로. */
    transform: translate(-50%, calc(-100% - 12px));
    transform-origin: bottom center;
    display: flex;
    flex-direction: column;
    padding: 6px 10px 10px;
    box-sizing: border-box;
}
/* 아래 방향 꼬리 (anchor를 가리킴) — Figma Union tail */
.memo-postit::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid #252A31;
    margin-top: -1px;
}
/* 상단 제목 줄 (드래그 핸들 + Comment 라벨 + X) */
.memo-postit .memo-navbar {
    height: 20px;
    background: transparent;
    border-bottom: none;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.memo-postit .memo-label {
    color: #E4E6EA;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}
.memo-postit .memo-close {
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    color: #8F94A2;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.memo-postit .memo-close:hover {
    color: #C0C4CC;
}
/* 흰 입력 박스 (Figma Rectangle166) */
.memo-postit .memo-textarea {
    width: 100%;
    min-height: 84px;  /* Figma 94 ≈ 입력 박스. 위로 auto-expand. */
    box-sizing: border-box;
    margin-top: 4px;
    padding: 8px 10px;
    background: #ffffff;
    border: none;
    border-radius: 4px;
    outline: none;
    resize: none;
    overflow: hidden;  /* scrollbar X = auto-resize 영역 */
    font-family: inherit;
    font-size: 11px;
    color: #3F4651;
    line-height: 16px;
    scrollbar-width: none;
    transition: outline 0.15s;
}
.memo-postit .memo-textarea::placeholder {
    color: #AAB0BB;
}
.memo-postit .memo-textarea:focus {
    outline: 1px solid rgba(7, 239, 255, 0.5);
}
.memo-postit .memo-textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* ── memo 줄이기(_) 버튼 + 접힘 picker (memo_postit_minimize_picker) ── */
.memo-postit .memo-label { flex: 1; }          /* label 좌측 = minimize/close 우측 묶음 */
.memo-postit .memo-navbar { gap: 4px; }
.memo-postit .memo-minimize {
    width: 16px; height: 16px; padding: 0;
    background: transparent; color: #8F94A2; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.memo-postit .memo-minimize:hover { color: #C0C4CC; }
/* collapsed = 38x38 picker (말풍선 숨김). transform = _applyMemoCounterScale 가 anchor 중심으로. */
.memo-postit.memo-collapsed {
    width: 38px; height: 38px; min-height: 0; padding: 0;
    background: transparent; box-shadow: none; border-radius: 0;
}
.memo-postit.memo-collapsed::after,
.memo-postit.memo-collapsed .memo-navbar,
.memo-postit.memo-collapsed .memo-textarea { display: none; }
.memo-postit .memo-picker { display: none; }
.memo-postit.memo-collapsed .memo-picker {
    display: block; width: 38px; height: 38px; position: relative;
    background: transparent; border: none; padding: 0; cursor: pointer; overflow: visible;
}
.memo-picker .memo-picker-svg { display: block; width: 38px; height: 38px; }
.memo-picker .memo-picker-number {
    position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
    font-size: 11px; font-weight: 700; color: #1E87FF; pointer-events: none;
}

/* ─────────────────────────────────────────────
   #107 (4/24): 보드 미선택 default 상태 + 통합 업로드 overlay
   ───────────────────────────────────────────── */

/* upload overlay — viewer 위 전체 덮음 (보드 미선택 시 visible) */
#upload-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1a1a1a;
}
#upload-overlay.active { display: flex; }

#upload-dropzone {
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
}
#upload-overlay.dragover #upload-dropzone,
#upload-dropzone.dragover {
    background: #252525;
}
#upload-dropzone h1 {
    font-size: 28px;
    margin-bottom: 16px;
    color: #ccc;
    font-weight: 600;
}
#upload-dropzone p {
    font-size: 15px;
    color: #888;
    margin-bottom: 24px;
}
#upload-dropzone input[type="file"] { display: none; }
.upload-btn {
    background: #4287f5;
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.2s;
}
.upload-btn:hover { background: #3674d4; }
#upload-progress {
    margin-top: 24px;
    font-size: 15px;
    color: #ff8800;
    display: none;
}
#upload-progress-bar-wrap {
    margin-top: 12px;
    width: 360px;
    height: 10px;
    background: #222;
    border-radius: 5px;
    overflow: hidden;
    display: none;
    margin-left: auto;
    margin-right: auto;
}
#upload-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4287f5, #6ba6ff);
    transition: width 0.2s;
}
#upload-progress-stage {
    margin-top: 8px;
    font-size: 12px;
    color: #aaa;
    display: none;
}

/* 보드 미선택 시 다른 UI 비활성/숨김 */
body.empty-board #dfm-panel,
body.empty-board #dfm-tab { display: none !important; }
body.empty-board #float-tools { display: none; }
body.empty-board #minimap-container { visibility: hidden; }
/* 2026-06-19 i18n: 영어 모드 = '보드를 업로드하세요' → 'Upload a board' (특정성 ↑ = 순서 무관 우선) */
body.empty-board[data-lang="en"] #layer-list:empty::before { content: 'Upload a board'; }
body.empty-board #layer-list:empty::before {
    content: '보드를 업로드하세요';
    display: block;
    padding: 24px 16px;
    font-size: 12px;
    color: #555;
    text-align: center;
}
body.empty-board #board-name { display: none; }