/* ═══════════════════════════════════════════════════════════════
   UNI:SOL PC 셸 (ui-2) — ui-spec 4절. ≥1024 전용, <1024 완전 무영향(폰 픽셀 0 원칙).
   스타일은 토큰만(hex 0건). 콘텐츠 무접촉 — 기존 DOM(nav.bottom-nav) CSS 재배치 + 주입 껍데기만.
   [2D] A(/app)·D(도구 페이지) 구조 통일 — 기준 A: 상단바 x=0 전체 폭·높이 56, 사이드바 top:56.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  .shell-pc-only { display: none !important; }   /* 주입 요소(설정·접기·상단바 확장)는 폰에서 완전 비표시 */
}
/* [2D] A 계정 슬롯 래퍼 — 폰에서는 레이아웃에 존재하지 않는 투명 래퍼(픽셀 0), 슬롯 조형은 ≥1024 에서만 */
.hdr-slot--account { display: contents; }

@media (min-width: 1024px) {
  /* ── A: 사이드바 — 기존 nav.bottom-nav 재배치(항목·순서·핸들러 무변경) ── */
  body[data-app-shell] .bottom-nav {
    top: 56px; bottom: 0; left: 0; right: auto;
    width: 240px; height: auto;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 2px; padding: 12px 12px;
    border-top: none; border-right: 1px solid var(--border-subtle);
    background: var(--bg-surface);
  }
  body[data-app-shell] .bottom-nav .nav-item {
    flex: 0 0 auto;   /* 폰 규칙 flex:1 이 세로 배치에서 늘어나는 것 차단 */
    flex-direction: row; justify-content: flex-start; gap: 12px;
    width: 100%; height: auto; padding: 12px 12px;
    border-radius: var(--radius-8);
  }
  body[data-app-shell] .bottom-nav .nav-item::after { display: none; }   /* 폰 활성 점 비표시 */
  body[data-app-shell] .bottom-nav .nav-item.active {
    background: var(--bg-selected);   /* [5D①] */
    color: var(--text-link);   /* 유색(선택) 배경 위 글자·아이콘 규칙 — 스펙 4-2 */
  }
  body[data-app-shell] .bottom-nav .nav-label { font-size: 14px; font-weight: 600; }

  /* 하단 고정 그룹(설정·접기 — shell.js 주입, A·D 공용 클래스) */
  .shell-side-bottom {
    margin-top: auto; display: flex; flex-direction: column; gap: 2px;
    border-top: 1px solid var(--border-subtle); padding-top: 8px;
  }

  /* ── A: 콘텐츠 — 사이드바 오른쪽, max-width 1200 좌측 정렬, 패딩 32 ── */
  body[data-app-shell] .page { left: 240px; padding-left: 32px; padding-right: 32px; }
  body[data-app-shell] .page > div { max-width: 1200px; }

  /* ── 접힘: 64px 아이콘 레일(상태 localStorage uni_shell_collapsed — A·D 공유) ── */
  body[data-app-shell].shell-collapsed .bottom-nav { width: 64px; padding: 12px 8px; }
  body[data-app-shell].shell-collapsed .bottom-nav .nav-item { justify-content: center; padding: 12px 0; }
  body[data-app-shell].shell-collapsed .bottom-nav .nav-label { display: none; }
  body[data-app-shell].shell-collapsed .page { left: 64px; }

  /* ── D: 도구 페이지 사이드바 — A 와 동일 조형(shell.js 공용 함수 생성) ── */
  body[data-shell-side] { padding-left: 240px; padding-top: 56px; }   /* 헤더 fixed 승격분 본문 보정 */
  .shell-sidenav {
    position: fixed; top: 56px; bottom: 0; left: 0; width: 240px; z-index: 90;
    display: flex; flex-direction: column; gap: 2px; padding: 12px 12px;
    background: var(--bg-surface); border-right: 1px solid var(--border-subtle);
  }
  .shell-sidenav .side-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 12px;
    border-radius: var(--radius-8); text-decoration: none; border: none; background: none; cursor: pointer;
    color: var(--text-secondary); font-size: 14px; font-weight: 600; font-family: inherit; text-align: left;
  }
  .shell-sidenav .side-item:hover { background: var(--bg-sunken); }

  /* D 접힘 — A 와 동일 64px 레일 */
  body[data-shell-side].shell-collapsed { padding-left: 64px; }
  body[data-shell-side].shell-collapsed .shell-sidenav { width: 64px; padding: 12px 8px; }
  body[data-shell-side].shell-collapsed .shell-sidenav .side-item { justify-content: center; padding: 12px 0; }
  body[data-shell-side].shell-collapsed .shell-sidenav .side-label { display: none; }

  /* ── [2D] D 상단바 — A 기준 통일: x=0 전체 폭·높이 56·사이드바 위 z ── */
  body[data-shell-side] .enui-hdr {
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 100;
  }

  /* ── [2C] 접기 화살표 상태(펼침 « / 접힘 ») ── */
  body.shell-collapsed #shell-collapse-btn svg { transform: rotate(180deg); }

  /* ── [2C] 모달 PC 규격 — 세로 중앙·최대 560·모서리 16 (폰은 기존 바텀시트 유지)
     .show 이중 셀렉터: app.min.css 가 shell.css 보다 나중에 로드돼 동일 특이도의 flex-end 가 이김 ── */
  .pj-modal-overlay.show { align-items: center; }
  .pj-modal-overlay .pj-modal { max-width: 560px; width: 100%; border-radius: var(--radius-16); }

  /* ── 상단바 PC 확장(shell.js 주입 — cad/* 제외) ── */
  .enui-hdr { height: 56px; }
  .enui-hdr-pc { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .enui-hdr-pc .hdr-slot, .hdr-slot--account {
    font-size: 12px; color: var(--text-tertiary);
    padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-8);
    white-space: nowrap;
  }
  /* [6②] 검색 — 점선 슬롯이 아닌 실제 버튼 */
  .enui-hdr-pc .hdr-search {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-8);
    background: var(--bg-surface); cursor: pointer; white-space: nowrap; font-family: inherit;
  }
  .enui-hdr-pc .hdr-search:hover { background: var(--bg-sunken); }
  .enui-hdr-pc .hdr-role {
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    background: var(--bg-sunken); padding: 3px 12px; border-radius: var(--radius-pill);
  }
  /* [2D] A 계정 슬롯: ⚙ 버튼을 점선 슬롯 안 아이콘으로(클릭 동작 무변경) */
  .hdr-slot--account { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; }
  .hdr-slot--account button { width: 28px !important; height: 28px !important; background: none !important; }
}

/* ═══ [ui-3①] 캔버스 모드(C패턴, ui-spec 4-3) — data-layout="canvas" ═══
   레일 64 | 컨트롤 320 | 캔버스(남은 폭) | 결과 320(≥1440 고정 / 1024–1439 하단 시트).
   도구는 자기 DOM 을 .canvas-grid > .canvas-controls / .canvas-main / .canvas-results 로만 감싼다(로직 무접촉). */
@media (min-width: 1024px) {
  body[data-layout="canvas"][data-app-shell] .page > div { max-width: none; }   /* 콘텐츠 max-width 해제 */
  body[data-layout="canvas"] .canvas-grid {
    display: grid; grid-template-columns: 320px minmax(0, 1fr);
    gap: 0; align-items: stretch;
    height: calc(100vh - 56px); overflow: hidden;
  }
  .canvas-controls, .canvas-results {
    background: var(--bg-surface); overflow-y: auto; padding: 16px;
  }
  .canvas-controls { border-right: 1px solid var(--border-subtle); }
  .canvas-results { border-left: 1px solid var(--border-subtle); }
  .canvas-panel-h {
    font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-h3-w);
    color: var(--text-primary); margin: 0 0 12px;
  }
  .canvas-main { position: relative; min-width: 0; overflow-y: auto; }   /* 캔버스 뷰포트 — 도구 자체 렌더 유지 */

  /* 1024–1439: 결과 패널 = 하단 시트(핸들 44px 노출, 열림 토글 — shell.js 주입) */
  @media (max-width: 1439.98px) {
    body[data-layout="canvas"] .canvas-results {
      position: fixed; left: 64px; right: 0; bottom: 0; z-index: 120;
      max-height: 55vh; transform: translateY(calc(100% - 44px));
      border-radius: var(--radius-16) var(--radius-16) 0 0;   /* 보정⑤: 바텀시트 상단 모서리 */
      transition: transform .2s ease;
      border-left: none; border-top: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-3);
    }
    body[data-layout="canvas"].canvas-sheet-open .canvas-results { transform: translateY(0); }
    .canvas-sheet-handle {
      display: block; width: 100%; height: 44px; margin: -16px -16px 12px; padding: 0 16px;
      width: calc(100% + 32px);
      background: none; border: none; border-bottom: 1px solid var(--border-subtle);
      font: inherit; font-weight: 700; color: var(--text-secondary); text-align: left; cursor: pointer;
    }
    body[data-layout="canvas"].canvas-sheet-open .canvas-sheet-handle .csh-arrow { display: inline-block; transform: rotate(180deg); }
  }
  @media (min-width: 1440px) {
    body[data-layout="canvas"] .canvas-grid { grid-template-columns: 320px minmax(0, 1fr) 320px; }
    .canvas-sheet-handle { display: none; }
  }
}

/* ── [ui-3①] <1024 PC 전용 도구 안내 카드(shell.js 렌더) ── */
@media (max-width: 1023.98px) {
  .shell-pconly-card {
    margin: 24px 16px; padding: 32px 20px;
    background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 16px;
    text-align: center; color: var(--text-primary);
  }
  .shell-pconly-icon { color: var(--text-tertiary); margin-bottom: 12px; }
  .shell-pconly-title { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-h3-w); margin-bottom: 8px; }
  .shell-pconly-desc { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 16px; }
  .shell-pconly-summary {
    text-align: left; font-size: 13px; color: var(--text-primary);
    background: var(--bg-sunken); border-radius: var(--radius-8); padding: 12px 14px; margin-bottom: 16px;
  }
  .shell-pconly-summary-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 4px; }
  .shell-pconly-copy {
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    padding: 12px 24px; border-radius: var(--radius-8);
    background: var(--btn-primary-bg); color: var(--text-on-brand); border: none;
  }
  .canvas-sheet-handle { display: none; }   /* 시트 핸들은 1024–1439 전용 */
}