/* ==========================================================================
   S3. 맞춤 도안 만들기 — configurator UI
   좌표는 러프(1440 기준) 측정값, 패널 왼쪽 위 기준 px.
   ========================================================================== */

.cfg-section {
  padding: 0;
}

/* 제목 줄바꿈은 휴대폰 폭에서만 (css/mobile.css) */
.br-phone { display: none; }

.cfg-section .section-sub {
  margin-top: 3px;
  font-size: 16.3px;
}

/* ---- 패널 ------------------------------------------------------------- */
.cfg-panel {
  position: relative;
  height: 420px;
  margin: 41px var(--content-pad-x) 0;
  border-radius: 26px;
  background: var(--color-gray-panel);
}

/* 패널 폭이 699→711px로 늘어난 만큼 내부 요소를 가운데로 옮긴다 */
.cfg-panel > * {
  position: absolute;
  margin: 0 0 0 6px;
}

/* ---- 설치 가능 영역 + 세면대 도식 ------------------------------------- */
.cfg-area {
  left: 112.2px;
  top: 107.5px;
  width: 385.2px;
  height: auto;
  display: block;
}

/* ---- 치수선 ----------------------------------------------------------- */
.cfg-dim svg {
  display: block;
  overflow: visible;
  fill: none;
  stroke: var(--color-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cfg-dim--width-l  { left: 111.4px; top: 72px; }
.cfg-dim--width-r  { left: 370.9px; top: 72px; }
.cfg-dim--height-u { left: 60px;    top: 106.6px; }
.cfg-dim--height-d { left: 60px;    top: 253.3px; }
.cfg-dim--back     { left: 401.6px; top: 113px; }
.cfg-dim--side     { left: 411.9px; top: 299.6px; }

/* ---- 입력 칩 ---------------------------------------------------------- */
.cfg-chip {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  width: 90.6px;
  height: 31.2px;
  padding-top: 7px;
  background: var(--color-cyan);
  color: var(--color-white);
  cursor: text;
  transition: background-color var(--dur) var(--ease);
}

.cfg-chip--width { left: 265.3px; top: 64.3px; }
.cfg-chip--back  { left: 433.7px; top: 113.9px; }
.cfg-chip--side  { left: 506px;   top: 288.8px; }

.cfg-chip__input {
  width: 3.4em;              /* JS가 내용 길이에 맞춰 조정 */
  min-width: 1.2em;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  caret-color: var(--color-white);
}

.cfg-chip__input::placeholder {
  color: var(--color-white);
  opacity: 1;
}

.cfg-chip__input:focus { outline: none; }
.cfg-chip__input:focus::placeholder { opacity: 0.55; }

.cfg-chip__unit {
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

/* 포커스: 칩 안쪽 흰 테두리 */
.cfg-chip:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-white);
}

/* 세로 칩: '(입력)'은 세로쓰기(한글은 바로 서고 괄호만 눕는다), cm는 가로 */
.cfg-chip--vertical {
  left: 52.8px;
  top: 150.7px;
  width: 30.4px;
  height: 90.6px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.cfg-chip__rotate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30.4px;
  height: 52px;
  margin-top: 6px;
}

.cfg-chip__rotate .cfg-chip__input {
  flex-shrink: 0;
  width: 1.4em;
  min-width: 0;
  min-height: 1.2em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.cfg-chip--vertical .cfg-chip__unit {
  margin-top: -4px;
}

/* 검증 실패: 칩을 주황으로 */
.cfg-chip[data-invalid] {
  background: var(--color-orange);
}

/* ---- 안내/경고 -------------------------------------------------------- */
.cfg-warn {
  color: var(--color-orange);
}

.cfg-warn--back { left: 531.6px; top: 114.8px; }
.cfg-warn--side { left: 603px;   top: 289.6px; }

.cfg-warn__icon {
  display: block;
  width: 20px;
  height: 18px;
  margin-left: 1.7px;
}

.cfg-warn__icon path:first-child { fill: currentColor; }
.cfg-warn__mark { fill: none; stroke: var(--color-white); stroke-width: 1.1; stroke-linecap: round; }
.cfg-warn__dot  { fill: var(--color-white); }

.cfg-warn__text {
  margin-top: 5px;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 해당 입력값이 규칙에 어긋나면 안내 문구를 강조 */
.cfg-warn[data-active] .cfg-warn__text { font-weight: 700; }

/* ---- 범례 ------------------------------------------------------------- */
.cfg-legend {
  left: 112.2px;
  top: 296.4px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-ink);
}

.cfg-legend__swatch {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--color-white);
}

.cfg-legend__swatch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.2px;
  height: 4.2px;
  border-radius: 50%;
  background: #EBEBEB;
  transform: translate(-50%, -50%);
}

/* ---- 도식 위 입력칸 번호 (모바일 전용, css/mobile.css) ---------------- */
.cfg-pin { display: none; }

/* ---- 3D preview 자리 (외부 모듈 연결 전까지 숨김) ---------------------- */
.cfg-preview {
  left: 112.2px;
  top: 107.5px;
  width: 385.2px;
  height: 176px;
}

.cfg-preview[hidden] { display: none; }

/* ---- CTA -------------------------------------------------------------- */
.cfg-cta {
  left: 44.5px;
  top: 351.2px;
  width: 610px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.cfg-cta:hover  { background: var(--color-orange-hover); }
.cfg-cta:active { background: var(--color-orange-active); transform: translateY(1px); }

.cfg-cta:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

.cfg-cta[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* ---- 상태 메시지 (CTA 아래, 평소엔 비어 있음) ------------------------- */
.cfg-message {
  margin: 0;
  left: 0;
  right: 0;
  top: 395px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-orange);
}

.cfg-message[data-tone="info"] { color: var(--color-ink-sub); }

/* ---- 유틸 ------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   엔진 연결용 상태 (디자인 요소 추가 없음 — 평소엔 보이지 않는다)
   ========================================================================== */

/* 가로·세로 검증 문구 자리: 가로는 위쪽 칩 바로 위, 세로는 패널 왼쪽 위 빈 공간 (아래 끝 기준) */
.cfg-field-msg {
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--color-orange);
  text-align: center;
}

.cfg-field-msg:empty { display: none; }
.cfg-field-msg[data-tone="warn"] { color: var(--color-ink-sub); }

.cfg-field-msg--width {
  left: 166.9px;
  top: 60px;
  width: 300px;
  transform: translateY(-100%);
  font-weight: 700;
}

.cfg-field-msg--depth {
  left: 12px;
  top: 66px;
  width: 150px;
  transform: translateY(-100%);
  text-align: left;
  font-weight: 700;
}

/* 뒤·옆 안내 자리에 엔진 문구가 들어갈 때만 줄바꿈 (평소 안내 문구는 원래 모양) */
.cfg-warn[data-msg] .cfg-warn__text {
  width: 165px;
  white-space: normal;
}

/* 옆 공간은 아래가 버튼이라, 문구를 삼각형 위쪽 빈 공간에 둔다 (뒤 공간 문구와 같은 세로줄) */
.cfg-warn--side[data-msg] .cfg-warn__text {
  position: absolute;
  left: -72px;
  bottom: calc(100% + 4px);
  margin: 0;
}

/* 뒤·옆 공간 안내 자리에 경고(warnings)가 들어갈 때는 굵게 하지 않는다 */
.cfg-warn[data-tone="warn"] .cfg-warn__text { font-weight: 400; }

/* 생성할 수 없을 때(검증 실패·엔진 준비 중) */
.cfg-cta:disabled,
.cfg-cta:disabled:hover {
  background: #C4C4C4;
  cursor: not-allowed;
  transform: none;
}