* { box-sizing: border-box; }
  /* 도면 위에서 손가락을 아래로 끌면 브라우저가 「당겨서 새로고침」으로 가로챈다 — 작업 중인 배치가 날아간다 */
  html, body { overscroll-behavior: none; }
  html, body { margin: 0; height: 100%; font-family: "Malgun Gothic", system-ui, sans-serif; font-size: 14px; color: #1a1a1a; }
  #app { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 270px 1fr 240px; height: 100%; }
  #toolbar { grid-column: 1 / 4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; }
  #palette { grid-row: 2; grid-column: 1; border-right: 1px solid #dee2e6; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
  #paletteScroll { flex: 1; overflow-y: auto; padding: 10px; }
  #adSlot { flex: none; padding: 8px; border-top: 1px solid #dee2e6; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; }
  #adBar { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 8px; }
  .ad-toggle { padding: 1px 7px; font-size: 12px; line-height: 1.2; color: #888; }
  #adSlot.ad-collapsed .kakao_ad_area { display: none !important; }
  /* 광고 아래 항상 보이는 슬롯 — 250×250(AdFit)이 270px 컬럼에 들어가도록 */
  #canvasWrap { grid-row: 2; grid-column: 2; position: relative; background: #e9ecef; overflow: hidden; }
  /* 파일을 창 위로 끌고 오는 중 — 떨어뜨릴 곳 표시 */
  #app.file-drag #canvasWrap { outline: 3px dashed #0d6efd; outline-offset: -3px; }
  /* 도면 위 손가락 동작(끌기·두 손가락 확대)은 우리가 처리한다 — 브라우저 기본 스크롤·확대가 끼어들지 않게 */
  #stage-container { width: 100%; height: 100%; touch-action: none; }
  /* 시작 띠 — 평면도를 연 뒤 축척 맞추기와 가구 놓기가 남았음을 툴바 맨 아랫줄로 보여 준다.
     축척이 안 맞으면 모든 치수가 틀리는데, 지금까지는 툴바 구석의 작은 배지 하나뿐이었다. */
  #startBand { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin: 4px -12px -8px; padding: 8px 12px; background: #fff8e6; border-top: 1px solid #f1d58a; font-size: 13px; }
  #startBand[hidden] { display: none; }
  #startBand .sb-title { color: #7a5600; }
  #startBand .sb-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
  #startBand .sb-steps li { display: flex; align-items: center; gap: 6px; color: #5c636a; }
  #startBand .sb-steps li.now { color: #1a1a1a; font-weight: 700; }
  #startBand .sb-steps li.done { color: #495057; }
  #startBand .sb-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #adb5bd; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 400; }
  #startBand li.now .sb-dot { background: #7a5600; border-color: #7a5600; color: #fff; }
  #startBand li.done .sb-dot { background: #198754; border-color: #198754; color: #fff; }
  #startBand .sb-why { display: none; font-weight: 400; }
  #startBand li.now .sb-why { display: inline; }
  #startBand .sb-go { margin-left: auto; background: #7a5600; color: #fff; border-color: #7a5600; }
  #startBand .sb-go[hidden] { display: none; }
  #startBand .sb-later { background: transparent; border-color: transparent; color: #5c636a; }
  /* 재는 동안 도면 아래에 뜨는 작업 띠 — 지금 무엇을 하는 중인지와, 점을 되돌리거나 그만두는 길.
     태블릿에는 Esc가 없어서 이게 없으면 재다가 멈출 방법이 없었다. */
  #modeBar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 870;
    display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); box-sizing: border-box;
    padding: 8px 8px 8px 16px; border-radius: 10px; background: #212529; color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  #modeBar[hidden] { display: none; }
  #modeBar .mb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
  #modeBar .mb-text span { color: #ced4da; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #modeBar button { flex: none; height: 34px; padding: 0 12px; border: 1px solid #6c757d; border-radius: 6px;
    background: transparent; color: #fff; font-size: 13px; }
  #modeBar button:hover { background: rgba(255,255,255,.08); }
  #modeBar button:disabled { opacity: .45; }
  @media (pointer: coarse) { #modeBar button { height: 44px; padding: 0 16px; font-size: 14px; } }
  /* 손가락으로 점을 맞추는 동안 손가락 밑을 확대해 보여 주는 작은 화면 — 손가락이 가리는 자리를 대신 본다 */
  #aimPip { position: absolute; top: 10px; left: 10px; width: 260px; height: 260px; z-index: 890;
    border: 2px solid #fff; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.3); pointer-events: none; }
  #aimPip.right { left: auto; right: 10px; }
  #props { grid-row: 2; grid-column: 3; border-left: 1px solid #dee2e6; padding: 12px; background: #fff; overflow-y: auto; position: relative; }
  .props-toggle { position: absolute; top: 8px; right: 8px; padding: 2px 9px; font-size: 15px; line-height: 1.1; z-index: 2; }
  #propsBody { padding-top: 22px; }
  /* 왼쪽 폭은 그대로 둔다 — 팔레트를 220으로 줄이면 250짜리 광고가 잘린다(접기 규칙이 옛 폭을 물고 있었다) */
  #app.props-collapsed { grid-template-columns: 270px 1fr 34px; }
  #app.props-collapsed #props { padding: 8px 0; }
  #app.props-collapsed #propsBody { display: none; }
  #app.props-collapsed .props-toggle { position: static; display: block; margin: 0 auto; }
  #statusbar { grid-column: 1 / 4; display: flex; gap: 18px; padding: 5px 12px; background: #f8f9fa; border-top: 1px solid #dee2e6; font-size: 12px; color: #555; }

  button, label.btn { font-size: 13px; padding: 5px 10px; border: 1px solid #ced4da; background: #fff; border-radius: 5px; cursor: pointer; }
  button:hover, label.btn:hover { background: #f1f3f5; }
  button:disabled { opacity: .4; cursor: default; }
  button.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
  button.primary { background: #0d6efd; color: #fff; border-color: #0d6efd; }
  button.danger { background: #fff; color: #dc3545; border-color: #dc3545; }
  a.btn-link { font-size: 13px; padding: 5px 10px; border: 1px solid #ced4da; background: #fff; border-radius: 5px; color: #212529; text-decoration: none; }
  a.btn-link:hover { background: #f1f3f5; }
  .btn-ico { width: 14px; height: 14px; fill: currentColor; vertical-align: -2px; }

  /* 아이콘 우선 — 아이콘이 뜻을 지고 글자는 보조다(번역할 문자열도 그만큼 준다).
     마우스가 있는 환경에선 글자를 감추고 title 툴팁에 맡기지만,
     hover가 없는 터치 화면에선 툴팁을 띄울 방법이 없으므로 라벨을 그대로 남긴다. */
  .icon-btn .btn-label { margin-left: 5px; }
  @media (hover: hover) and (pointer: fine) {
    .icon-btn { font-size: 15px; line-height: 1.1; padding: 4px 9px; }
    .icon-btn .btn-label { display: none; }
  }

  /* 벽 네 면 — 마름모로 두면 배치 자체가 방향을 말해 준다 */
  .dpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .dpad .wall-btn { font-size: 13px; padding: 5px 0; }
  .dpad [data-wall="t"] { grid-area: 1 / 2; }
  .dpad [data-wall="l"] { grid-area: 2 / 1; }
  .dpad [data-wall="r"] { grid-area: 2 / 3; }
  .dpad [data-wall="b"] { grid-area: 3 / 2; }
  .dpad-mid { grid-area: 2 / 2; display: grid; place-items: center; font-size: 11px; color: #868e96; }
  .sep { width: 1px; height: 22px; background: #dee2e6; margin: 0 4px; }
  /* 툴바 묶음 — 선택·거리·면적 / 그리기 / 보기를 회색 판 하나씩에 담는다(디렉터가 고른 개선안 3번).
     묶음끼리는 판이 갈라 주니 사이 구분선은 쓰지 않는다. */
  .tb-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: #e9ecef; }
  .tb-group > button, .tb-group > .anno-color > button { border-color: transparent; background: transparent; }
  .tb-group > button:hover { background: #fff; }
  .tb-group > button.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
  .tb-group > .anno-color { margin-left: 2px; }
  /* 선택·거리·면적과 보기 묶음은 글자를 늘 보인다 — 두 재기 도구는 기호만으로 갈리지 않았다(09-07 지적) */
  .icon-btn.tb-labeled .btn-label { display: inline; }

  /* 파일 드롭다운 메뉴 */
  .menu { position: relative; }
  .menu-list { display: none; position: absolute; top: 100%; left: 0; z-index: 900; min-width: 190px;
    background: #fff; border: 1px solid #ced4da; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 4px; margin-top: 4px; }
  .menu.open .menu-list { display: block; }
  .menu-list button, .menu-list .menu-file, .menu-list a { display: flex; align-items: center; gap: 7px; width: 100%;
    border: none; background: none; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; }
  .menu-list a { color: inherit; text-decoration: none; }
  .menu-list button:hover, .menu-list .menu-file:hover, .menu-list a:hover { background: #eef4ff; }
  .menu-list button:disabled { opacity: .4; cursor: default; background: none; }
  /* 메뉴 안에서는 파란 채움(button.active)이 배경만 지워지고 흰 글씨만 남아 글자가 사라진다 */
  .menu-list button.active { background: #eef4ff; color: #0d6efd; font-weight: 600; }
  .menu-list hr { border: none; border-top: 1px solid #eee; margin: 4px 2px; }

  .pal-title { font-weight: 600; font-size: 12px; color: #888; margin: 12px 0 6px; }
  #palTabs { display: flex; gap: 4px; margin: 6px 0 8px; }
  .pal-tab { flex: 1; font-size: 13px; padding: 6px 4px; }
  .pal-tab.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
  .anno-color { position: relative; display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
  .swatch-pop { display: none; position: absolute; top: 100%; left: 0; z-index: 900; width: 134px;
    flex-wrap: wrap; gap: 4px; background: #fff; border: 1px solid #ced4da; border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 6px; margin-top: 4px; }
  .anno-color.open .swatch-pop { display: flex; }
  .swatch { width: 18px; height: 18px; padding: 0; border: 1px solid #adb5bd; border-radius: 3px; cursor: pointer; }
  .swatch:hover { border-color: #0d6efd; }
  .pal-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 5px; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; background: #fff; }
  .pal-item:hover { background: #eef4ff; border-color: #0d6efd; }
  .pal-swatch { width: 26px; height: 18px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.2); }
  .pal-name { font-size: 13px; }
  .pal-dim { font-size: 11px; color: #999; margin-left: auto; }
  .pal-name.clickable, .pal-swatch.clickable { cursor: pointer; }

  .prop-row { margin-bottom: 10px; }
  .prop-row label { display: block; font-size: 12px; color: #666; margin-bottom: 3px; }
  .prop-row input[type="color"] { height: 34px; padding: 2px; }
  /* 라디오·체크박스는 글자 옆에 서야 한다 — 아래 100% 폭 규칙이 먹으면 글자가 밑으로 밀린다 */
  .prop-row input[type="radio"], .prop-row input[type="checkbox"] { width: auto; }
  .opt-row label { display: inline-flex; align-items: center; gap: 6px; }
  .prop-row input, .prop-row select, .prop-row textarea { width: 100%; padding: 5px 7px; border: 1px solid #ced4da; border-radius: 5px; font-size: 14px; }
  .prop-row textarea { font-family: inherit; line-height: 1.5; resize: vertical; }
  /* 버튼 줄 — 속성 패널·모달에서 되풀이되는 배치(인라인 style 대신 이걸 쓴다) */
  .btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .btn-row.gap-top { margin-top: 12px; }
  .btn-row.gap-top-sm { margin-top: 6px; }
  .row-flex { display: flex; align-items: center; gap: 8px; }
  .opt-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
  .wide { width: 100%; }
  #shapeSaveRow { margin-top: 6px; }
  #gpSize { font-size: 15px; font-weight: 600; }
  #gridInput { width: 64px; }
  #groupListEmpty { margin-bottom: 12px; }
  #annoColor { width: 30px; height: 28px; padding: 1px; border: 1px solid #ced4da; border-radius: 5px; }
  #swatchToggle { padding: 5px 4px; }
  .prop-row .btn-row .wall-btn { flex: 1 1 calc(50% - 3px); }
  .prop-row label.check-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1a1a1a; }
  .prop-row label.check-row input { width: auto; }
  /* 라벨 줄 오른쪽에 붙는 인라인 체크 — 바깥은 div여야 한다(label로 감싸면 글자 클릭이 체크박스를 토글) */
  .prop-row .row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; color: #666; margin-bottom: 3px; }
  .prop-row .row-head .check-inline { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .prop-row .row-head .check-inline input { width: auto; margin: 0; }
  .hint { font-size: 12px; color: #888; line-height: 1.5; }
  /* 손가락으로는 끌어다 놓기가 안 되고 탭이 배치를 맡는다 — 기기에 맞는 안내만 보인다 */
  /* 팔레트 — 가구 찾기 칸·최근 쓴 것·⋯ 편집(디렉터가 고른 개선안 4번) */
  .pal-search { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; font-size: 12px; color: #5c636a; }
  .pal-search input { height: 34px; padding: 0 10px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; color: #1a1a1a; }
  .pal-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
  .pal-chip { height: 30px; padding: 0 11px; border-radius: 15px; font-size: 13px; }
  .pal-edit { margin-left: 2px; flex: none; width: 30px; height: 28px; padding: 0; border: none; background: transparent;
    color: #5c636a; font-size: 16px; line-height: 1; border-radius: 5px; }
  .pal-edit:hover { background: #e9ecef; color: #1a1a1a; }
  @media (pointer: coarse) { .pal-edit { width: 40px; height: 36px; } }
  .hint.gp-count { margin-bottom: 6px; }
  .hint.prop-tip { margin-top: 10px; }
  .hint.check-line { display: flex; align-items: center; gap: 8px; }
  .hint.check-line + .hint.check-line { margin-top: 8px; }
  .badge.clickable { cursor: pointer; }
  .badge { display:inline-block; padding:2px 6px; border-radius:4px; background:#e7f1ff; color:#0d6efd; font-size:12px; }
  #props h6 { margin: 0 0 10px; font-size: 14px; }
  .z-label { margin-top: 12px; font-size: 12px; color: #888; }
  /* 속성 패널 묶음 — 이름·크기 / 모양 / 돌리기·뒤집기 / 겹침 순서. 기호만 있던 버튼에 글자를 붙였다(디렉터가 고른 개선안 5번) */
  .ps { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eef0f2; }
  .ps-title { margin: 0; font-size: 12px; font-weight: 700; color: #5c636a; }
  .ps .prop-row { margin-bottom: 0; }
  .ps .prop-row label.check-row + label.check-row { margin-top: 6px; }
  .size-grid { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 6px; align-items: end; }
  .lock-btn { height: 31px; padding: 0; display: flex; align-items: center; justify-content: center; color: #5c636a; }
  .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 7px; background: #f1f3f5; }
  .seg button { height: 28px; border: none; background: transparent; color: #495057; }
  .seg button.active { background: #fff; color: #1a1a1a; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
  .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #props .z-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  /* 속성 패널에서는 마우스 환경에서도 글자를 보인다 — 기호만으로는 ⇆·⤒가 무엇인지 올려 봐야 안다 */
  #props .icon-btn .btn-label { display: inline; }
  .z-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .z-row .z-btn { flex: 1 1 calc(50% - 3px); }
  @media (hover: hover) and (pointer: fine) { .z-row .z-btn { flex: 1 1 auto; } }
  .ref-table { width:100%; font-size:12px; color:#555; border-collapse: collapse; margin-top:6px; }
  .ref-table td { padding:2px 0; }
  .ref-table td:last-child { text-align:right; color:#0d6efd; }

  /* 모달 표준 — 새 모달은 .modal > .modal-box 구조를 쓴다(인라인 스타일 복붙 금지) */
  .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:1000; align-items:center; justify-content:center; }
  .modal.open { display:flex; }
  .modal-box { background:#fff; padding:18px; border-radius:8px; width:300px; box-shadow:0 8px 30px rgba(0,0,0,.2); }
  .modal-box.wide { width:min(720px, 92vw); }
  .modal-box h6 { margin:0 0 12px; font-size:14px; }
  .modal-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:16px; }
  .pdf-grid { display:flex; flex-wrap:wrap; gap:10px; max-height:70vh; overflow:auto; }
  .pdf-thumb { border:1px solid #ced4da; border-radius:6px; padding:5px; cursor:pointer; background:#fff; text-align:center; }
  .pdf-thumb:hover { border-color:#0d6efd; background:#eef4ff; }
  .pdf-thumb canvas { display:block; }
  .pdf-thumb-cap { font-size:11px; color:#555; margin-top:4px; }
  .help-body { font-size:13px; color:#333; line-height:1.6; max-height:70vh; overflow:auto; }
  .help-body h4 { margin:14px 0 4px; font-size:13px; color:#0d6efd; }
  .help-body ul { margin:0; padding-left:18px; }
  .help-body p { margin:6px 0; }

  /* 평면도 없을 때 캔버스 가운데 빠른 안내 — 클릭은 캔버스로 통과 */
  #emptyGuide { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(255,255,255,.95); border:1px solid #dee2e6; border-radius:10px;
    padding:20px 26px; box-shadow:0 6px 24px rgba(0,0,0,.1); pointer-events:none;
    color:#333; max-width:420px; }
  #emptyGuide .eg-title { font-size:16px; font-weight:700; margin-bottom:10px; }
  #emptyGuide ol { margin:0; padding-left:20px; line-height:1.7; font-size:13px; }
  /* 오버레이 자체는 클릭이 캔버스로 통과하지만(pointer-events:none) 버튼만은 눌려야 한다 */
  #emptyGuide .eg-btns { display:flex; gap:8px; margin-top:14px; pointer-events:auto; }
  #emptyGuide .eg-more { margin-top:12px; font-size:12px; color:#888; }
  .drop-zone { display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 14px;
    border:2px dashed #ced4da; border-radius:8px; color:#666; font-size:13px; text-align:center; }
  .drop-zone.over { border-color:#0d6efd; background:#eef4ff; }

  /* ── 좁은 화면 ─────────────────────────────────────────
     넓은 화면은 팔레트·도면·속성 세 칸이지만, 태블릿에서는 도면이 258px밖에 안 남는다.
     그래서 1099px 아래에서는 양옆 패널을 도면 위로 덮는 서랍으로 돌리고 도면에 폭을 다 준다. */
  /* 서랍 손잡이 — 툴바 안에 두면 줄이 접힐 때 자리가 밀린다. 화면 가장자리에 붙여 둔다. */
  /* 도면 영역 위쪽에 붙인다 — 세로 가운데에 두면 태블릿을 세로로 들었을 때 카메라 자리와 겹친다(디렉터 지적) */
  .edge-tab { display: none; position: absolute; top: 10px; z-index: 880; box-sizing: border-box;
    width: 44px; min-height: 96px; padding: 10px 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: 13px; line-height: 1; color: #495057; background: #fff;
    border: 1px solid #ced4da; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
  /* 손가락 크기(폭 44px)로 키우고 무엇을 여는지 글자로 적는다 — 꺽쇠만으로는 왼쪽·오른쪽이 무엇인지 몰랐다(개선안 6번) */
  .edge-tab .et-arrow { font-size: 17px; }
  .edge-tab .et-label { writing-mode: vertical-rl; letter-spacing: 2px; }
  .edge-tab.edge-left { left: 0; border-left: none; border-radius: 0 7px 7px 0; }
  .edge-tab.edge-right { right: 0; border-right: none; border-radius: 7px 0 0 7px; }
  /* 열려 있는 쪽 손잡이는 숨긴다 — 서랍이 덮은 자리에 남아 있으면 무엇을 누르는지 헷갈린다 */
  #app.pal-open .edge-tab.edge-left, #app.props-open .edge-tab.edge-right { display: none; }
  .drawer-close { display: none; position: absolute; top: 8px; right: 8px; z-index: 3;
    padding: 3px 9px; font-size: 14px; line-height: 1.1; color: #888; }

  /* 손가락으로 쓰는 기기는 폭과 상관없이 서랍으로 간다 — 태블릿은 가로로 돌리면 1691px이라
     폭만 보면 데스크톱으로 잡혀, 돌릴 때마다 화면 구성이 통째로 바뀐다(디렉터 지적). */
  @media (max-width: 1099px), (pointer: coarse) {
    #app { grid-template-columns: 1fr; }
    #toolbar, #statusbar { grid-column: 1; }
    #canvasWrap { grid-column: 1; }
    .edge-tab { display: flex; }
    .drawer-close { display: block; }
    #palette { position: fixed; }   /* 닫기 버튼을 패널 기준으로 앉히려면 자리잡기 맥락이 필요하다 */
    #paletteScroll { padding-top: 34px; }
    #palette, #props {
      position: fixed; top: 0; bottom: 0; z-index: 900; width: 270px;
      box-shadow: 0 0 24px rgba(0,0,0,.18); transition: transform .18s ease-out;
    }
    #palette { left: 0; transform: translateX(-100%); }
    #props { right: 0; width: 260px; transform: translateX(100%); }
    #app.pal-open #palette, #app.props-open #props { transform: none; }
    #drawerScrim { position: fixed; inset: 0; z-index: 890; background: rgba(0,0,0,.25); }
    /* 넓은 화면의 접기 화살표는 서랍에서 쓸모가 없다 — 닫기는 막이나 ☰ 버튼이 한다 */
    #app.props-collapsed { grid-template-columns: 1fr; }
    .props-toggle { display: none; }
    #propsBody { padding-top: 0; }
    #app.props-collapsed #propsBody { display: block; }
  }

  #phoneGuide { display: none; position: absolute; inset: 0; background: #f8f9fa;
    padding: 28px 22px; overflow-y: auto; color: #333; }
  #phoneGuide .pg-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
  #phoneGuide p { line-height: 1.7; font-size: 14px; color: #555; }
  #phoneGuide .pg-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  #phoneGuide .pg-btns button, #phoneGuide .pg-btns a { padding: 12px; font-size: 15px; text-align: center; }
  #app.phone-view #phoneGuide { display: none; }

  /* 폰에서는 배치 편집을 접는다 — 손가락으로 4000mm 가구를 mm 단위로 놓을 수 없다.
     대신 만들어 둔 배치도를 열어 보고 PDF로 뽑는 것까지만 남긴다. */
  @media (max-width: 767px) {
    #toolbar > *:not(#fileMenu):not(#fitBtn):not(#langBtn):not(#helpBtn):not(.sep) { display: none; }
    #toolbar .sep { display: none; }
    .edge-tab { display: none; }
    #palette, #props { display: none; }
    #emptyGuide { display: none; }
    #phoneGuide { display: block; }
    #app.phone-view #phoneGuide { display: none; }
    #statusbar { font-size: 11px; gap: 10px; }
  }