/* 계산기 페이지 — 테마가 그리던 부분만. 계산기·FAQ 본체는 라이브 CSS 그대로(페이지 안 <style>). */
.cl-main__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.cl-side { position: sticky; top: 96px; padding: 28px; border: 1px solid var(--pz-line); border-radius: 16px; background: var(--pz-white); }
.cl-contact { margin: 16px 0 0; padding: 0; list-style: none; }
.cl-contact li { padding: 14px 0; border-top: 1px solid var(--pz-line); }
.cl-contact span { display: block; margin-bottom: 4px; color: var(--pz-blue); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.cl-contact a, .cl-contact strong { color: var(--pz-ink); font-size: 17px; font-weight: 700; text-decoration: none; }
.cl-cases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cl-cases__grid .pz-photo { aspect-ratio: 1; }
@media (max-width: 900px) { .cl-main__grid { grid-template-columns: 1fr; } .cl-side { position: static; } .cl-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 소개 문단 아래 여백 제거(.pz-lede 의 28px) — 바로 아래 계산기 섹션의 위 여백이 간격을 맡는다 */
.cl-intro .pz-lede, .pz-section--flush-bottom .pz-head--center .pz-lede { margin-bottom: 0; }
/* FAQ: 뜬 블록이 자체 여백(100px 24px)을 갖고 있어 표준 섹션 여백과 겹쳤다 → 블록 쪽을 0 으로 */
.cl-faq .roof-faq-section { padding: 0 !important; }

/* 연락처 칸 맨 위 통화하는 포지맨 — 라이브 그대로 */
.cl-side__mascot { display: block; width: 159px; height: auto; margin: 0 auto 18px; }
.cl-side .pz-h3 { text-align: center; }

/* ================= 폰: 계산기 폼을 화면에 잘 보이게 (2026-09-21 사용자 — 홈 문의 폼처럼 촘촘히) =================
   계산기 블록은 워프에서 그대로 뜬 것이라 자기 CSS 가 본문 안에 있다 → 폰 폭에서만 !important 로 덮어쓴다. 문구는 그대로. */
@media (max-width: 700px) {
  body[data-header="hero"] .pz-hero.pj-head { padding-top: calc(var(--pz-header-h) + 18px); padding-bottom: 22px; }
  .pj-head .pz-kicker { margin-bottom: 8px; }
  .pj-head .pz-h1 { font-size: 23px; }
  .pj-head + .pz-section { padding-top: 26px; }
  .pj-head + .pz-section .pz-h2 { font-size: 20px; margin-bottom: 10px; }
  .pj-head + .pz-section .pz-lede { font-size: 14px; line-height: 1.6; }
  .cl-main { padding-top: 22px; }

  .calculator-container { padding: 18px 16px 20px !important; }
  .calculator-container h2 { font-size: 20px !important; margin-bottom: 6px !important; }
  .calculator-intro { margin-bottom: 14px !important; font-size: 13.5px !important; line-height: 1.55 !important; }
  /* 면적 + 단위를 한 줄에. 층수 아래 집 모양 그림 버튼(v1.7, 2026-09-22 — 모퉁이 수 칸이 있던 자리) */
  #costForm { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 10px;
    grid-template-areas: "la la" "aw aw" "lf lf" "if if" "sh sh" "btn btn"; }
  #costForm label, #costForm .shape-label { margin-bottom: 4px !important; font-size: 13px !important; line-height: 1.4 !important; align-self: end; }
  #costForm label[for="area"] { grid-area: la; }
  #costForm .area-input-wrap { grid-area: aw; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px !important; align-items: center; }
  #costForm .unit-toggle-label { display: none !important; }
  #costForm .unit-toggle { margin: 0 !important; }
  #costForm label[for="floors"] { grid-area: lf; }
  #costForm #floors { grid-area: if; }
  #costForm .shape-field { grid-area: sh; margin-bottom: 14px; }
  #costForm input[type="number"] { height: 44px !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  #costForm #floors { margin-bottom: 12px !important; }
  #costForm .calculator-button { grid-area: btn; margin-top: 0 !important; min-height: 50px; }
  /* 결과 뒤에 나오는 문의 폼 */
  #inquiryDetailsForm label { margin-bottom: 4px !important; font-size: 13px !important; }
  #inquiryDetailsForm input { height: 44px !important; margin-bottom: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  #inquiryDetailsForm textarea { height: 68px !important; min-height: 0 !important; margin-bottom: 12px !important; }
  .calculator-container .contact-note { margin-bottom: 10px !important; font-size: 13.5px !important; line-height: 1.55 !important; }
}