* { box-sizing: border-box; }
  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: space-between; width: 100%; gap: 8px; }
  .ad-privacy { font-size: 11px; color: #888; }
  .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 컬럼에 들어가도록 */
  .doc-page { max-width: 720px; margin: 40px auto; padding: 0 20px; line-height: 1.7; }
  .doc-page h1 { font-size: 24px; }
  .doc-page h2 { font-size: 17px; margin-top: 24px; }
  #canvasWrap { grid-row: 2; grid-column: 2; position: relative; background: #e9ecef; overflow: hidden; }
  #stage-container { width: 100%; height: 100%; }
  #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; }
  #app.props-collapsed { grid-template-columns: 220px 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; }
  .btn-ico { width: 14px; height: 14px; fill: currentColor; vertical-align: -2px; }
  .sep { width: 1px; height: 22px; background: #dee2e6; margin: 0 4px; }

  /* 파일 드롭다운 메뉴 */
  .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 { 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 button:hover, .menu-list .menu-file:hover { background: #eef4ff; }
  .menu-list button:disabled { opacity: .4; cursor: default; background: none; }
  .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-size { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .pal-size input { width: 46px; padding: 2px 4px; border: 1px solid #ced4da; border-radius: 4px; font-size: 11px; text-align: right; }
  .pal-x { font-size: 11px; color: #999; }
  .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 { width: 100%; padding: 5px 7px; border: 1px solid #ced4da; border-radius: 5px; font-size: 14px; }
  .hint { font-size: 12px; color: #888; line-height: 1.5; }
  .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; }
  .z-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .z-row .z-btn { flex: 1 1 calc(50% - 3px); }
  .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; }
  .help-keys { color:#555; background:#f8f9fa; border-radius:5px; padding:6px 8px; }

  /* 평면도 없을 때 캔버스 가운데 빠른 안내 — 클릭은 캔버스로 통과 */
  #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; }
  #emptyGuide .eg-more { margin-top:12px; font-size:12px; color:#888; }