/*
  도면 변환기(CAD) 위젯 — css/photo-editor.css의 .pe-widget 변수·클래스(.pe-dropzone, .pe-layout,
  .pe-stage, .pe-canvas-wrap, .pe-controls, .pe-field, .pe-btn, .pe-actions, .pe-note 등)를
  그대로 재사용하고, 이 파일에는 도면 변환기에만 필요한 보강 스타일만 둔다.
*/

.cc-app[hidden]{ display: none; }

/* 도면 변환기는 캔버스(좌측)를 더 넓게 봐야 편집하기 편하므로, 공용 .pe-layout 비율(1.3:1 ≈
   56:44)과 달리 좌측 70% · 우측 30%로 조정한다. 860px 이하 모바일에서는 공용 규칙대로
   한 칸(1fr)으로 쌓이므로 이 override는 그 전까지만 적용된다. */
@media (min-width: 861px){
  #cad-converter .pe-layout{ grid-template-columns: 7fr 3fr; }
}

.cc-compare-lead{
  margin: 0 0 24px;
  font-size: 0.92rem; line-height: 1.6; color: var(--muted);
  max-width: 720px;
}

.cc-tile-image-row{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.cc-toolbar{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--pe-line-strong);
}

/* 좁은 화면에서는 한 줄(.pe-tool-row)에 버튼이 다 안 들어가면, 줄바꿈 없이 각 버튼 안의
   글자만 여러 줄로 눌려 찌그러져 보이던 문제가 있었다. 버튼은 원래 크기를 유지한 채
   줄 자체가 다음 줄로 넘어가도록 한다. */
#cad-converter .pe-tool-row{ flex-wrap: wrap; row-gap: 8px; }

.cc-icon-btn{
  font-family: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 8px 14px;
  background: transparent; color: var(--pe-ink-700);
  border: 1px solid var(--pe-line-strong);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s var(--pe-ease), color 0.2s var(--pe-ease), border-color 0.2s var(--pe-ease);
}
.cc-icon-btn:hover:not(:disabled){ border-color: var(--pe-ink-900); }
.cc-icon-btn:disabled{ opacity: 0.4; cursor: not-allowed; }

.cc-zoom-pct{
  min-width: 44px; text-align: center;
  font-family: var(--pe-font-mono); font-size: 0.78rem; color: var(--pe-ink-700);
}

.cc-zoom-range-label{ font-size: 0.78rem; color: var(--pe-ink-700); margin-left: 4px; }

.cc-check{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; color: var(--pe-ink-700);
  cursor: pointer;
}
.cc-check input{ accent-color: var(--pe-brass-500); }
.cc-check--bg{ align-self: flex-start; margin-bottom: 10px; }

.cc-panel-block{
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--pe-line-strong);
}
.cc-panel-block:last-of-type{ border-bottom: 0; padding-bottom: 0; }

.cc-tile-size{ display: flex; align-items: center; gap: 8px; }
.cc-tile-size input{
  width: 72px;
  font-family: inherit; font-size: 0.86rem; color: var(--pe-ink-900);
  padding: 8px 10px;
  border: 1px solid var(--pe-line-strong); border-radius: 2px;
  background: var(--pe-paper);
}
.cc-tile-size span{ font-size: 0.82rem; color: var(--pe-ink-700); }
.cc-tile-unit{ margin-left: -2px; }

.cc-panel-label{
  margin: 0;
  font-size: 0.84rem; font-weight: 700; color: var(--pe-ink-900);
  display: flex; align-items: baseline; gap: 8px;
}

.cc-note-small{
  margin: 0;
  font-size: 0.76rem; line-height: 1.6;
  color: var(--pe-stone-500); font-family: var(--pe-font-mono);
}

/* 확대된 캔버스가 grid/flex 부모를 밀어 넓히는 바람에(grid item의 기본 min-width:auto 때문에
   내용 크기만큼 부모까지 같이 커져서) 좌우로 넘친 부분이 생기지 않고 스크롤도 걸리지 않던
   문제를 막는다 — 래퍼 쪽 조상을 내용 크기 아래로 줄어들 수 있게 해야 overflow:auto가 실제로
   동작해서 ◀▶ 버튼으로 좌우 이동할 거리가 생긴다. */
#cad-converter .pe-stage{ min-width: 0; }

#ccCanvasWrap{
  max-height: 720px;
  max-width: 100%;
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(32,29,25,0.06) 25%, transparent 25%, transparent 75%, rgba(32,29,25,0.06) 75%) 0 0 / 20px 20px,
    linear-gradient(45deg, rgba(32,29,25,0.06) 25%, transparent 25%, transparent 75%, rgba(32,29,25,0.06) 75%) 10px 10px / 20px 20px,
    var(--pe-paper);
}
#ccCanvas{
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: default;
}
#ccCanvas.cc-tool-draw{ cursor: crosshair; }
#ccCanvas.cc-tool-drain{ cursor: crosshair; }
#ccCanvas.cc-tool-door{ cursor: crosshair; }
#ccCanvas.cc-tool-calibrate{ cursor: crosshair; }
#ccCanvas.cc-dragging{ cursor: grabbing; }

@media (max-width: 640px){
  .cc-toolbar{ flex-direction: column; align-items: flex-start; }
}

/* ── 3D로 합쳐 보기 ──────────────────────────────────────── */
.cc-3d-lightbox[hidden]{ display: none; }
.cc-3d-lightbox{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,11,13,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 60px);
}
body.cc-3d-open{ overflow: hidden; }
.cc-3d-stage{
  width: 100%; max-width: 760px; height: min(64vh, 560px);
  display: flex; align-items: center; justify-content: center;
  perspective: 1800px;
}
.cc-3d-cube{
  position: relative;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: none;
}
.cc-3d-cube.is-dragging{ cursor: grabbing; }
.cc-3d-face{
  position: absolute; top: 50%; left: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
  background: #e4dfd5;
}
.cc-3d-face canvas{ display: block; width: 100%; height: 100%; }
.cc-3d-close{
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(252,252,253,0.12); color: #F7F5F1;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.cc-3d-close:hover{ background: rgba(252,252,253,0.22); }
.cc-3d-hint{
  margin: 18px 0 0; color: #F7F5F1; opacity: 0.75;
  font-size: 0.8rem; font-family: var(--pe-font-mono, monospace);
}