/* 홈페이지 제작 비용 계산기 — 선택 버튼과 결과 시트.
   ⚠️ 시트(.wc-sheet) 안은 Tailwind 유틸리티를 쓰지 않는다. 「항목표 인쇄」가 시트를 새 창으로
   옮겨 담고 그 창은 이 CSS 한 장만 읽기 때문이다(Tailwind 를 로드하지 않는다).
   시트 서식을 바꿀 일이 있으면 마크업이 아니라 여기를 고친다. */

/* 선택 그룹 — 폼 입력이 아니라 눌러서 바꾸는 조작기로 보이게 한다 */
.wc-gl {
  font-size: 13px; font-weight: 700; color: #1e293b;
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.wc-gl::before { content: ""; width: 6px; height: 16px; background: #1e293b; border-radius: 2px; }

/* 제작 방식 — 금액대와 포함 내용이 함께 보여야 고를 수 있으므로 칩이 아니라 줄 카드 */
.wc-type {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px; border: 1.5px solid #e2e8f0; border-radius: 12px;
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.wc-type:hover { border-color: #94a3b8; }
.wc-type.on { border-color: #0f172a; background: #f8fafc; }
.wc-type-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wc-type-t { font-size: 15px; font-weight: 800; color: #0f172a; }
.wc-type-p { font-size: 12.5px; font-weight: 700; color: #64748b; }
.wc-type.on .wc-type-p { color: #0f172a; }
.wc-type-d { display: block; margin-top: 5px; font-size: 12.5px; color: #64748b; line-height: 1.55; word-break: keep-all; }

.wc-hint { font-size: 12px; color: #94a3b8; line-height: 1.55; margin-top: 12px; word-break: keep-all; }

/* ── 결과 시트 ─────────────────────────────────────────────────
   화면과 인쇄 창이 같은 규칙을 읽는다. 값을 두 곳에 적지 않는다. */
.wc-sheet {
  border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; padding: 24px;
}
@media (min-width: 1024px) { .wc-sheet { padding: 32px; } }

.wc-sheet-head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #e2e8f0; }
.wc-sheet-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #94a3b8; }
.wc-sheet-big {
  font-size: 24px; font-weight: 900; color: #0f172a; margin-top: 8px;
  line-height: 1.25; font-variant-numeric: tabular-nums; word-break: keep-all;
}
@media (min-width: 1024px) { .wc-sheet-big { font-size: 30px; } }
.wc-sheet-name { font-size: 18px; font-weight: 800; color: #0f172a; margin-top: 4px; word-break: keep-all; }
.wc-sheet .hidden { display: none; }   /* 새 창에는 Tailwind 의 .hidden 이 없다 */

.wc-sheet table { width: 100%; border-collapse: collapse; }
.wc-sheet th, .wc-sheet td { padding: 9px 10px; border-bottom: 1px solid #e2e8f0; font-size: 13px; }
.wc-sheet th { color: #475569; font-weight: 700; text-align: left; }
.wc-sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-sheet tr.total td { border-top: 2px solid #0f172a; border-bottom: none; font-weight: 800; color: #0f172a; font-size: 15px; }

.wc-sheet-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.wc-sheet-sub { font-size: 14px; color: #64748b; margin-bottom: 4px; }
.wc-sheet-mid { font-size: 18px; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.wc-sheet-note { font-size: 12px; color: #94a3b8; margin-top: 4px; line-height: 1.5; word-break: keep-all; }
.wc-sheet-fine {
  font-size: 11px; color: #94a3b8; line-height: 1.7; word-break: keep-all;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0;
}

/* ── 인쇄 창 (window.open 으로 띄운 문서) ───────────────────────
   Tailwind preflight 가 없으므로 p·table 기본 여백을 여기서 끊는다.
   :where() 는 명시도 0 이라 위 규칙을 덮지 않는다. */
.wc-printdoc {
  margin: 0; padding: 24px; background: #fff; color: #0f172a;
  font-family: Pretendard, Inter, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wc-printdoc :where(p, table, b, div) { margin: 0; }
.wc-printdoc .wc-sheet { max-width: 720px; margin: 0 auto; }

/* ── 인쇄 ──────────────────────────────────────────────────────
   정본은 새 창 인쇄다. 새 창에는 시트만 들어 있어 A4 한 장에 떨어진다.
   아래 body:not(.wc-printdoc) 블록은 사용자가 원래 화면에서 Ctrl+P 를 눌렀을 때만 쓰인다. */
@media print {
  @page { size: A4; margin: 12mm 10mm; }

  .wc-printdoc { padding: 0; }
  .wc-printdoc .wc-sheet { max-width: none; border: none; border-radius: 0; background: #fff; padding: 0; }

  body:not(.wc-printdoc) > * { visibility: hidden !important; }
  body:not(.wc-printdoc) #wc-print,
  body:not(.wc-printdoc) #wc-print * { visibility: visible !important; }
  body:not(.wc-printdoc) #wc-print {
    position: absolute; left: 0; top: 0; width: 100%;
    padding: 0; margin: 0; background: #fff; border: none;
  }
  /* 부모의 sticky 가 남아 있으면 absolute 기준이 그쪽으로 잡혀 시트가 밀린다. */
  #wc-print-host { position: static !important; }

  .wc-noprint { display: none !important; }
  .wc-sheet th, .wc-sheet td { padding: 6px 8px; font-size: 11.5px; }
  .wc-sheet tr { break-inside: avoid; }
  .wc-sheet-big { font-size: 22px; }
}