/* 홍보 페이지 — 주소 한 줄로 확인.
   (2026-09-03 · 09-07 원본 solacheck 구성을 실측해 맞춤)

   ⚠️⚠️ **루트 7페이지의 언어를 쓴다** — `.btn--cta` · `.section` · `.card` · `.faq` ·
      `.problems` · `.solutions`. 여기 있는 것은 **그 위에 얹는 것뿐**이다.
   ⚠️⚠️ 처음에 `construction.html` 의 **어두운 히어로**를 가져왔는데 원본의 검토
      화면은 **밝고 가운데 정렬**이다 — 소개 페이지는 「읽는 화면」이고 여기는
      「쓰는 화면」이라 성격이 다르다. */

/* ★ 히어로 바탕 — 평면 하늘색 하나에서 **빛 두 점**으로 (2026-09-08).
   왼쪽 위는 하늘, 오른쪽 위는 햇살이다. 태양광 화면이니 그 둘이 맞다.
   ⚠️ 아주 옅어야 한다 — 진하면 검색바 글자가 안 읽힌다. */
.ck__hero { padding: 60px 0 52px;
            background: var(--g-wash), linear-gradient(180deg, var(--c-sky-pale) 0%, var(--c-bg,#fff) 100%); }
.ck__heroin { text-align: center; }
.ck__h1 { font-size: var(--fs-hero-lg, 44px); font-weight: 800; line-height: 1.3;
          letter-spacing: -.02em; word-break: keep-all; }
/* 원본이 강조어만 색을 준다 — 제목 전체를 물들이지 않는다 */
.ck__h1 em { font-style: normal; color: var(--c-orange); }
.ck__sub { margin-top: 14px; font-size: 15.5px; line-height: 1.8; color: var(--c-muted);
           word-break: keep-all; }
.ck__sub b { color: var(--c-text); }

/* 검색바 — 한 줄, 가운데, 넓게 */
.ck__form { margin: 26px auto 0; max-width: 720px; text-align: left; }
.ck__row { position: relative; display: flex; align-items: center; gap: 8px;
           padding: 6px 6px 6px 46px; border-radius: 999px; background: #fff;
           border: 1px solid var(--c-line);
           box-shadow: 0 6px 24px rgba(15,23,42,.08); }
.ck__ico { position: absolute; left: 16px; top: 50%; translate: 0 -50%;
           width: 20px; height: 20px; color: var(--c-muted);
           fill: none; stroke: currentColor; }
.ck__addr { flex: 1 1 auto; min-width: 0;   /* ⚠️ flex 기본 min-width:auto 가
              내용 폭만큼 버텨 페이지를 가로로 넘긴다 */
            height: 46px; border: 0; background: none; font-size: 15.5px;
            color: var(--c-text); font-family: inherit; }
.ck__addr:focus { outline: none; }
.ck__row:focus-within { border-color: var(--c-orange);
                        box-shadow: 0 6px 24px rgb(255 106 43 / 20%); }
.ck__go { height: 46px; padding: 0 22px; border-radius: 999px; white-space: nowrap; }
.ck__go[disabled] { opacity: .65; cursor: default; }

/* ★★ 설치할 곳 — **각주가 아니라 고르는 칸이다** (2026-09-08).
   ⚠️ 13.5px 회색 라디오라 안 보였고, 기본값이 「땅」이라 지붕인 사람이
      그냥 지나쳤다. 답이 통째로 달라지는 입력은 **보이는 크기**여야 한다. */
.ck__mlabel { margin-top: 18px; text-align: center; font-size: 13px;
              font-weight: 700; color: var(--c-subtle); }
.ck__mount { display: flex; justify-content: center; flex-wrap: wrap;
             gap: 10px; margin-top: 8px; }
.ck__mopt { flex: 0 1 240px; display: flex; align-items: center; gap: 10px;
            padding: 11px 16px; cursor: pointer;
            border: 1.5px solid var(--c-line); border-radius: 12px;
            background: #fff; transition: border-color .12s, background .12s; }
.ck__mopt:hover { border-color: var(--c-sky-line); }
.ck__mopt span { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ck__mopt b { font-size: 14px; font-weight: 700; color: var(--c-text); }
.ck__mopt i { font-style: normal; font-size: 11.5px; color: var(--c-muted); }
/* ⚠️ 고른 것이 **한눈에** 달라 보여야 한다 — 라디오 점만으로는 약하다 */
.ck__mopt:has(input:checked) { border-color: var(--c-blue); background: var(--c-sky-pale); }
.ck__mopt:has(input:checked) b { color: var(--c-navy); }
.ck__mopt input { accent-color: var(--c-blue); width: 17px; height: 17px; flex: none; }
.ck__hint { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--c-muted); }
.ck__hint.is-bad { color: var(--c-coral); }

/* 「무엇을 봅니까」 — 원본이 검색바 바로 아래 둔 자리 */
.ck__whatlead { text-align: center; font-size: 13px; color: var(--c-muted);
                margin-bottom: 18px; }
.ck__what { display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr)); }
.ck__wcard { text-align: center; }
.ck__wico { display: inline-flex; align-items: center; justify-content: center;
            width: 46px; height: 46px; border-radius: 13px; margin-bottom: 12px; }
.ck__wico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
/* ★★ **카드가 자기 아이콘 색을 따라간다** (2026-09-08).
   네 장이 흰 카드로 똑같이 서 있어 「무엇을 보나요」가 한 덩어리로 읽혔다.
   ⭐ 색을 새로 고르지 않았다 — **아이콘 칩이 이미 넷을 갈라 두었으므로**
     카드가 그 색을 옅게 물려받기만 한다. 임의로 고른 색은 나중에 근거가 없다.
   ⚠️ `.card` 가 흰 배경·테두리를 주므로 **둘 다** 덮어야 한다(배경만 바꾸면
      회색 테두리가 남아 색면이 지저분해진다). */
.ck__wico--a { background: var(--c-violet-pale); color: var(--c-violet); }
.ck__wico--b { background: var(--c-mint-pale);   color: var(--c-mint); }
.ck__wico--c { background: var(--c-amber-pale);  color: var(--c-amber); }
.ck__wico--d { background: var(--c-sky-pale);    color: var(--c-blue); }

.ck__wcard:has(.ck__wico--a) { background: var(--c-violet-pale); border-color: var(--c-violet-line); }
.ck__wcard:has(.ck__wico--b) { background: var(--c-mint-pale);   border-color: var(--c-mint-line); }
.ck__wcard:has(.ck__wico--c) { background: var(--c-amber-pale);  border-color: var(--c-amber-line); }
.ck__wcard:has(.ck__wico--d) { background: var(--c-sky-pale);    border-color: var(--c-sky-line); }
/* 카드가 색면이 되면 칩은 **흰색**이라야 떠 보인다 */
.ck__wcard .ck__wico { background: rgb(255 255 255 / 72%); }
.ck__wcard h3 { font-size: 15px; font-weight: 700; }
.ck__wcard p { margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--c-muted);
               word-break: keep-all; }
/* ⚠️ **출처를 카드에 적는다** — 「공개 자료로 본다」는 말이 그때 믿긴다 */
.ck__wsrc { display: block; margin-top: 10px; font-size: 11px; color: var(--c-muted);
            opacity: .8; }

@media (max-width: 720px) {
  .ck__hero { padding: 40px 0 34px; }
  .ck__h1 { font-size: 30px; }
  .ck__row { flex-wrap: wrap; border-radius: 16px; padding: 10px 10px 10px 42px; }
  .ck__ico { top: 26px; }
  .ck__go { width: 100%; }
}

/* ── 결과 ─────────────────────────────────────────── */

/* ⚠️ 우측 플로팅 바(`.quick`, 82px)는 **모든 루트 페이지 공통**이고 `position:fixed`
   라 컨테이너 오른쪽을 덮는다(index.html 도 같다 — 이 페이지가 만든 문제가 아니다).
   ★ 그래도 여기서는 **고객이 읽어야 할 숫자**가 그 아래로 들어간다(첫 해 매출이
     실제로 가려졌다). 공통 껍데기를 건드리는 대신 이 페이지 본문만 좁힌다.
   ⚠️ 검색 화면(`.ck__hero`)에만 건다 — 아래를 보라. */
.ck__hero .container { max-width: 1020px; }

/* ⚠️⚠️ **결과 화면에서는 우측 플로팅 바를 숨긴다.**
   ① 이미 화면 안에 상담 폼과 「PDF로 저장」이 있다 — 같은 말을 두 번 한다.
   ② 창이 좁으면 그 바(82px)가 **고객이 읽어야 할 숫자를 덮는다** —
      예전에 첫 해 매출이 실제로 가려졌다. 그때는 본문을 좁혀 피했는데,
      결과가 독립 페이지가 된 지금은 **바를 지우는 쪽이 옳다**(본문이 넓어야 한다).
   ★ CSS 로 지운다 — JS 로 지우면 늦게 돌아 한 번 깜빡인다. */
.is-result .quick { display: none; }

/* ★★ **결과 페이지는 넓게 쓴다** (2026-09-08 사용자 지적 — 「폭이 여기서 제한되」).
   ⚠️⚠️ 위 1020px 을 `#ck-out` 에도 걸어 두었는데, 결과를 독립 페이지로 가르면서
      **전제가 사라졌다** — 이 화면에는 플로팅 바가 없다(홍보 호스트는 지우고,
      결과에는 애초에 안 겹친다). 표가 넷으로 늘어 넓을수록 읽기 좋다.
   ⚠️ `margin: 0 auto` 를 빠뜨리면 **왼쪽에 붙는다** — `<section>` 은 블록이라
      `max-width` 만으로는 가운데로 안 온다. 실제로 그렇게 보였다. */
#ck-out {
  max-width: calc(var(--w-container) + var(--pad-page) * 2);
  margin: 0 auto;
}

/* ── 결과 ─────────────────────────────────────────── */

/* ⚠️ 배경·테두리·반경·패딩은 공용 `.card` 가 준다 — 여기선 **간격만** 얹는다.
   두 벌로 그리면 루트 페이지가 바뀔 때 이 화면만 안 따라간다. */
.ck__card { margin-bottom: 16px; }
/* ★ 지붕 규모를 못 내는 카드 — **고장이 아니라 자료가 없는 것**이라고 보이게 */
.ck__card--nofit { background: var(--c-amber-wash); border-color: var(--c-amber-line); }
.ck__card--nofit .ck__pts li { background: rgb(255 255 255 / 70%); }
/* ⚠️⚠️ `.ck__pts b` 는 **제목용이라 `display:block`** 이다(`<li><b>제목</b>본문</li>`).
   여기서는 문장 **안**에서 강조하므로 그대로 두면 한 낱말마다 줄이 바뀐다 —
   실제로 「건축물대장 / 에는 1동 … / 54.9배 / )」로 네 줄이 났다.
   ★ CLAUDE.md 가 적어 둔 「span 에 margin-top 을 주는 CSS 를 보면 display 를
     먼저 본다」와 같은 자리다 — **거꾸로도 성립한다.** */
.ck__card--nofit .ck__pts b { display: inline; margin: 0; font-size: inherit;
                              color: var(--c-text); }
.ck__h { font-size: 17px; font-weight: 700; }
.ck__addrline { font-size: 13px; color: var(--c-muted); }
/* ★ 친 주소와 정식 주소가 **다른 땅일 때만** 적는다 — 단순 보완이면 안 적는다 */
.ck__asked { margin-top: 8px; padding: 9px 12px; border-radius: 8px;
             background: var(--c-amber-pale); border: 1px solid var(--c-amber-line);
             font-size: 12.5px; line-height: 1.7; color: var(--c-amber-ink);
             word-break: keep-all; }
.ck__why { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--c-muted);
           word-break: keep-all; }

/* 신호등 — ⚠️ 색만으로 뜻을 전하지 않는다. **글자가 등급을 말한다**
   (색각 이상·흑백 인쇄에서 색은 사라진다). 점은 거들 뿐이다. */
.ck__card--light { border-width: 2px; }
.ck__light { display: flex; align-items: center; gap: 10px; margin-top: 8px;
             font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.ck__dot { font-size: 18px; line-height: 1; }
.ck-l--good  { border-color: var(--c-mint-line); } .ck-l--good  .ck__dot { color: var(--c-mint); }
.ck-l--check { border-color: var(--c-amber-line); } .ck-l--check .ck__dot { color: var(--c-amber); }
.ck-l--hard  { border-color: var(--c-coral-line); } .ck-l--hard  .ck__dot { color: var(--c-coral); }

.ck__pts { margin-top: 16px; display: grid; gap: 10px; }
.ck__pts li { padding: 12px 14px; border-radius: 10px; background: var(--c-surface-soft);
              font-size: 13.5px; line-height: 1.75; color: var(--c-text);
              word-break: keep-all; list-style: none; }
.ck__pts b { display: block; margin-bottom: 3px; font-size: 13px; color: var(--c-blue); }

.ck__big { display: grid; gap: 12px; margin-top: 16px;
           grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr)); }
.ck__b { padding: 16px; border: 1px solid var(--c-line); border-radius: 12px; }
.ck__b span { display: block; font-size: 12px; color: var(--c-muted); }
.ck__b b { display: block; margin-top: 5px; font-size: 23px; font-weight: 800;
           font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ck__b i { display: block; margin-top: 4px; font-size: 11.5px; font-style: normal;
           color: var(--c-muted); }

/* ★ 가정한 설비 — 큰 숫자 바로 아래 한 줄.
   ⚠️ **제품이 아니라 규격**이라는 것을 같은 줄에서 말한다. 안 적으면 고객이
      「이 제품으로 견적이 나왔구나」로 읽는다(자재 화면의 실제 제품과 다르다). */
.ck__gear { margin-top: 12px; padding: 11px 14px; border-radius: 10px;
            background: var(--c-surface-soft); border: 1px solid var(--c-line);
            display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
            font-size: 13px; color: var(--c-text); }
.ck__gear b { font-size: 12px; font-weight: 700; color: var(--c-subtle); }
.ck__gear span { font-variant-numeric: tabular-nums; }
.ck__gear i { flex-basis: 100%; font-style: normal; font-size: 11.5px;
              color: var(--c-muted); word-break: keep-all; }

/* ⚠️ 캔버스 크기는 서버가 준 그림 크기다 — 여기서는 **비율을 지켜 줄이기만** 한다.
   `height:auto` 가 없으면 눌린다. */
.ck__map { display: block; width: 100%; height: auto; margin-top: 18px;
           border-radius: 12px; background: var(--c-surface-alt); }
.ck__cite { margin-top: 8px; font-size: 11.5px; color: var(--c-muted); }

.ck__caveat { margin: -4px 0 16px; padding: 12px 16px; border-radius: 10px;
              background: var(--c-coral-pale); border: 1px solid var(--c-coral-line);
              font-size: 13px; line-height: 1.8; color: var(--c-coral); word-break: keep-all; }

.ck__card--ask { background: var(--c-sky-pale); border-color: var(--c-sky-line); }
.ck__ask { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ck__in { flex: 1 1 160px; min-width: 0; height: 46px; padding: 0 14px; font-size: 15px;
          border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
.ck__ask .btn { height: 46px; padding: 0 22px; white-space: nowrap; }
.ck__tiny { margin-top: 10px; font-size: 11.5px; color: var(--c-muted); }
/* ★ 문의하기로 가는 길 — ⚠️ 상담 신청과 **경쟁시키지 않는다.**
   저쪽이 두 칸이라 훨씬 빠르므로 여기는 한 줄짜리 보조 길이다. */
.ck__alt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-sky-line);
           font-size: 13px; color: var(--c-subtle); }
.ck__altlink { color: var(--c-blue); font-weight: 700; text-decoration: none;
               white-space: nowrap; }
.ck__altlink:hover { text-decoration: underline; }
@media print { .ck__alt { display: none; } }
.ck__done { margin-top: 12px; padding: 11px 14px; border-radius: 10px;
            background: var(--c-mint-pale); border: 1px solid var(--c-mint-line);
            font-size: 13.5px; color: var(--c-mint); }

@media (max-width: 720px) {
  
  .ck__hero { padding: 36px 0 28px; }
  .ck__row { flex-wrap: wrap; }
  .ck__go { width: 100%; }
  .ck__card { padding: 18px; }
  .ck__light { font-size: 21px; }
  .ck__b b { font-size: 20px; }
}

/* 주택 상계 — 사용량별 절감액 (2026-09-07)
   ⚠️ 값어치를 정하는 것은 발전량이 아니라 그 집의 사용량이다(누진제) */
.ck__nm { margin-top: 18px; padding: 16px; border-radius: 12px;
          background: var(--c-sky-pale); border: 1px solid var(--c-sky-line); }
.ck__nmh { font-size: 15px; font-weight: 700; }
.ck__nms { margin-top: 5px; font-size: 13px; line-height: 1.75; color: var(--c-muted);
           word-break: keep-all; }
.ck__nmt { width: 100%; margin-top: 12px; border-collapse: collapse;
           font-variant-numeric: tabular-nums; }
.ck__nmt th, .ck__nmt td { padding: 9px 12px; text-align: left; font-size: 13.5px;
                           border-bottom: 1px solid var(--c-line); }
.ck__nmt th { font-size: 11.5px; font-weight: 700; color: var(--c-muted); }
.ck__nmt .num { text-align: right; }
.ck__nmt tbody tr:last-child td { border-bottom: 0; }
.ck__nmt b { font-size: 15px; }
.ck__nmn { margin-top: 10px; font-size: 12px; line-height: 1.75; color: var(--c-amber);
           word-break: keep-all; }
/* 발전량을 다 쓰는 집 — 「0 kWh」보다 뜻이 바로 보인다 */
.ck__nmfull { color: var(--c-mint); font-weight: 700; font-size: 12.5px; }
/* ★ 회수기간 — ⚠️ **수명을 넘으면 색이 달라야 한다.** 숫자만 적으면 「33년」이
   그냥 큰 수로 보이고 「못 넘긴다」는 뜻이 안 전해진다. */
.ck__pb { font-variant-numeric: tabular-nums; }
.ck__pbover { color: var(--c-coral-ink); font-weight: 700; font-size: 12.5px; }
/* ★ 10kW 초과 — 남는 전기가 **팔린다.** kWh 만 적으면 버려지는 줄 안다 */
.ck__nmsell { display: block; margin-top: 2px; font-size: 11.5px;
              color: var(--c-mint-ink); font-weight: 700; }
/* 누진 단계 — ★ 여기가 돈이 오는 자리다(태양광이 단계를 끌어내린다) */
.ck__nmstep { font-size: 12.5px; color: var(--c-muted); white-space: nowrap; }
.ck__nmstep b { font-size: 12.5px; color: var(--c-coral); }
.ck__nmstep em { font-style: normal; font-weight: 700; color: var(--c-mint); }
/* 발전량을 다 쓰기 시작하는 지점 */
.ck__nmfu { margin-top: 12px; padding: 12px 14px; border-radius: 10px;
            background: var(--c-mint-pale); border: 1px solid var(--c-mint-line);
            font-size: 13.5px; line-height: 1.7; color: var(--c-mint); word-break: keep-all; }
.ck__nmfu span { display: block; margin-top: 5px; font-size: 11.5px;
                 color: var(--c-muted); line-height: 1.65; }

/* 한전 계통 (2026-09-07) — ⚠️ 못 붙으면 사업이 안 된다. 신호등 바로 아래 둔다 */
.ck__grid { margin-top: 14px; padding: 13px 15px; border-radius: 10px;
            border: 1px solid var(--c-line); background: var(--c-surface-soft); }
.ck__gridh { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
             font-size: 13.5px; }
.ck__gridh span { font-size: 12px; color: var(--c-muted);
                  font-variant-numeric: tabular-nums; }
.ck__gridw { margin-top: 5px; font-size: 12.5px; line-height: 1.75;
             color: var(--c-muted); word-break: keep-all; }
/* ⚠️ 색만으로 알리지 않는다 — 「여유가 없습니다」 글자가 함께 말한다 */
.ck__grid.is-full { background: var(--c-coral-pale); border-color: var(--c-coral-line); }
.ck__grid.is-full .ck__gridh b { color: var(--c-coral); }
.ck__grid.is-ok { background: var(--c-mint-pale); border-color: var(--c-mint-line); }
.ck__grid.is-ok .ck__gridh b { color: var(--c-mint); }
.ck__grid.is-unsure { background: var(--c-amber-pale); border-color: var(--c-amber-line); }
.ck__grid.is-unsure .ck__gridh b { color: var(--c-amber); }

/* ⚠️ 확인할 것은 개수만 — 상담 전에 늘어놓으면 겁만 준다(궁금하면 펴 본다) */
.ck__chk { margin-top: 12px; }
/* ⚠️ `summary` 안에 block `<span>` 설명이 있어 `::after` 가 **다음 줄로 떨어져**
   점 하나처럼 보였다 — 첫 줄 오른쪽에 붙여 둔다. */
.ck__chk summary { position: relative; cursor: pointer; padding: 11px 34px 11px 14px;
                   border-radius: 10px; background: var(--c-surface-soft); font-size: 13px;
                   list-style: none; }
.ck__chk summary::-webkit-details-marker { display: none; }
.ck__chk summary { list-style: none; }  /* ⚠️ 요즘 Safari 는 ::marker 로 그린다 — 이게 없으면 화살표가 둘(2026-10-22) */
.ck__chk summary::after { content: '▾'; position: absolute; right: 14px; top: 10px;
                          color: var(--c-muted); }
.ck__chk[open] summary::after { content: '▴'; }
.ck__chk summary b { color: var(--c-blue); }
.ck__chk summary span { display: block; margin-top: 3px; font-size: 11.5px;
                        color: var(--c-muted); }
/* ⚠️⚠️ `display:grid` 가 **브라우저 기본 숨김을 덮는다** — 닫힌 `<details>` 안인데도
   항목이 그대로 보였다(실측 6건). 닫혔을 때는 명시적으로 감춘다. */
.ck__chk:not([open]) ul { display: none; }
.ck__chk ul { margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ck__chk li { list-style: none; padding: 11px 14px; border-radius: 10px;
              background: var(--c-surface-soft); font-size: 13px; line-height: 1.7;
              word-break: keep-all; }
.ck__chk b { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--c-blue); }
/* ⚠️ 매출은 수익이 아니다 — 읽는 사람은 스스로 「매출 ÷ 투자비」를 계산한다 */
.ck__revn { margin-top: 10px; padding: 10px 13px; border-radius: 9px;
            background: var(--c-amber-pale); border: 1px solid var(--c-amber-line);
            font-size: 12.5px; line-height: 1.75; color: var(--c-amber);
            word-break: keep-all; }

/* ── 자세한 표 넷 (2026-09-08) ────────────────────────────────────────
   ⚠️ 「상담 전에 워닝을 늘어놓지 말라」와 모순이 아니다 — 경고를 목록으로
   쌓지 않고 **표 안의 한 칸**으로 둔다. 같은 정보인데 읽는 부담이 다르다. */

.ck__sub2 { margin: -8px 0 16px; font-size: var(--fs-sm); color: var(--c-muted); }
.ck__sub2 a { color: var(--c-blue); text-decoration: underline; }

.ck__tb { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ck__tb th {
  text-align: left; font-weight: 500; color: var(--c-muted);
  padding: 0 12px 8px 0; border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.ck__tb td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--c-line); }
.ck__tb tr:last-child td { border-bottom: 0; }
.ck__tb td i {
  display: block; margin-top: 4px;
  font-style: normal; font-size: var(--fs-xs); color: var(--c-subtle);
}
/* 기준·실측 열은 숫자라 자릿수를 맞춘다 */
.ck__tb td:nth-child(2), .ck__tb td:nth-child(3) {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ck__tb--kv td:first-child { color: var(--c-muted); width: 92px; }
.ck__tb--kv td:nth-child(2) { font-weight: 500; font-variant-numeric: normal; }

/* 판정 태그 */
.ck__t {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: var(--r-chip);
  font-style: normal; font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap;
}
.ck__t--ok { background: var(--c-mint-pale); color: var(--c-mint); }
.ck__t--c  { background: var(--c-amber-pale); color: var(--c-amber); }
.ck__t--s  { background: var(--c-coral-pale); color: var(--c-coral); }
.ck__t--u  { background: var(--c-surface-gray); color: var(--c-muted); }
/* ★ 「적용 제외」 — ⚠️ `--n`(협의 필요·앰버)을 쓰면 **뜻이 달라진다.**
   조례가 이 설치 유형에 적용되지 않는다는 것은 경고가 아니라 **중립**이다. */
.ck__t--na { background: var(--c-g100); color: var(--c-g600); }
.ck__na    { color: var(--c-g600); }
.ck__tb .ck__t { margin-left: 0; }

.ck__note {
  margin: 14px 0 0; font-size: var(--fs-xs); color: var(--c-muted);
  line-height: 1.7;
}
.ck__note b { color: var(--c-navy); }

/* 두 칸 카드 (토지 정보 · 토지이용계획) */
.ck__two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.ck__zs { display: flex; flex-direction: column; gap: 8px; }
.ck__zs li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.ck__zs li:last-child { border-bottom: 0; }
.ck__zs i { font-style: normal; font-size: var(--fs-xs); color: var(--c-subtle); }

/* 계통 3계층 */
.ck__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ck__tier {
  padding: 16px; border-radius: var(--r-card);
  background: var(--c-surface-alt); border: 1px solid var(--c-line);
}
.ck__tierh {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-navy);
}
.ck__tiern { margin: 0 0 12px; font-size: var(--fs-xs); color: var(--c-muted); }
/* ⚠️ `<span>` 은 inline 이라 height 가 무시된다 — block 을 준다
   (CLAUDE.md 가 `.bar__fill` 에서 이미 겪은 자리) */
.ck__bar {
  display: block; height: 6px; border-radius: 3px;
  background: rgb(0 14 30 / 8%); overflow: hidden;
}
.ck__bar > span { display: block; height: 100%; background: var(--c-blue); }
.ck__tierp {
  margin: 6px 0 0; font-size: var(--fs-xs); color: var(--c-subtle);
  font-variant-numeric: tabular-nums;
}
.ck__tierv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 10px 0 0; font-size: var(--fs-xs); color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.ck__tierv b { color: var(--c-navy); font-size: var(--fs-sm); }

/* 적합성 검토 */
.ck__fs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ck__f {
  padding: 16px; border-radius: var(--r-card);
  background: var(--c-surface-alt); border: 1px solid var(--c-line);
}
.ck__fh {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-navy);
}
.ck__fv { margin: 0 0 6px; font-size: var(--fs-sm); }
.ck__ft { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.7; }
.ck__fb { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--c-subtle); }

@media (max-width: 720px) {
  .ck__two, .ck__tiers, .ck__fs { grid-template-columns: 1fr; gap: 20px; }
}

/* ★ 가장 좁은 목 — 셋 중 그것이 사업을 정한다 */
.ck__tier--neck { position: relative; border-color: var(--c-orange); }
.ck__neck {
  position: absolute; top: -9px; left: 12px;
  padding: 2px 8px; border-radius: var(--r-chip);
  background: var(--c-orange); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* 월별 발전량 — 막대 12개. ⚠️ 라이브러리 없이 SVG 로 직접 그린다 */
.ck__chart { margin-top: 4px; }
.ck__chart svg { display: block; width: 100%; height: 170px; }
/* ★ 막대는 **햇살 그라디언트**다 (2026-09-08). 발전량 그래프이므로 해의 색이 맞고,
   파랑 일변도이던 결과 화면에 따뜻한 면이 하나 생긴다.
   ⚠️ 앰버는 우리 색표에서 「확인할 것」이지만 **판정 태그에만 그렇다** —
      태그는 글자로 등급을 말하므로 데이터 그래프와 헷갈리지 않는다.
   ⚠️ `url(#ckSun)` 는 **같은 문서 안의 `<defs>`** 를 가리킨다 — `check.js` 가
      SVG 안에 함께 그린다. 떼어 놓으면 막대가 **까맣게** 나온다.

   ⚠️⚠️ 여기 있던 `rect:nth-child(4n-1)` 규칙을 **걷어냈다.**
      「여름이 진하게」라고 적혀 있는데 **같은 색을 주고 있어 아무 일도 안 했다**
      (게다가 4n-1 은 3·7·11월이라 여름도 아니다). 하는 일 없이 뜻만 적힌 규칙은
      다음 사람이 「이미 됐구나」로 읽는다. */
.ck__chart rect { fill: url(#ckSun); }
.ck__cx { fill: var(--c-subtle); font-size: 11px; text-anchor: middle; }

/* ── 결과 페이지 (2026-09-08) ────────────────────────────────────────
   ★ 검색과 결과를 **다른 페이지로 갈랐다**(사용자 요청). 인쇄가 단순해진다 —
     이 페이지는 통째로 결과라 숨길 것을 하나씩 셀 필요가 없다. */
.ckr__top { padding-bottom: 0 !important; }
.ckr__back {
  display: inline-block; margin-bottom: 12px;
  font-size: var(--fs-sm); color: var(--c-muted);
}
.ckr__back:hover { color: var(--c-blue); }
.ckr__h1 {
  margin: 0; font-size: var(--fs-h2); font-weight: 600;
  line-height: 1.4; color: var(--c-navy-deep); word-break: keep-all;
}
.ckr__wait {
  margin: 0; padding: 48px 0; text-align: center;
  font-size: var(--fs-md); color: var(--c-muted);
}
.ckr__wait.is-bad { color: var(--c-orange); }

/* ── PDF로 저장 ──────────────────────────────────────────────────────
   ⚠️ 라이브러리를 쓰지 않는다 — 브라우저 인쇄가 곧 PDF 다.
      우리 규칙(실행 중 바깥 요청 금지)을 지키면서 시안의 「PDF 다운로드」가 된다. */
.ck__print {
  float: right; margin-left: 12px;
  padding: 6px 14px; border-radius: var(--r-btn);
  background: var(--c-surface-gray); border: 1px solid var(--c-line);
  color: var(--c-navy); font-size: var(--fs-xs); font-weight: 700;
  cursor: pointer;
}
.ck__print:hover { background: var(--c-surface-alt); }

@media print {
  /* ⚠️ 화면에만 있는 것. `.quick` 은 fixed 라 **매 장에 찍힌다** — 12장이면 12번.
     ★ 결과가 독립 페이지가 된 뒤로 목록이 이만큼 짧아졌다. */
  .gnb, .quick, .footer, .ck__print, .ckr__back,
  .ck__card--ask, #ckr-wait { display: none !important; }

  /* 배경색을 살린다 — 판정 태그가 회색으로 뭉개지면 표가 무의미하다 */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { background: #fff; }
  .section { padding: 0 0 8px !important; }
  .container { max-width: none; padding: 0; }
  .ckr__h1 { font-size: 18pt; margin-bottom: 8px; }

  /* ⚠️ 카드가 장을 넘어가며 잘리지 않게 한다 — 표 하나가 두 쪽에 걸치면
     기준과 실측이 갈라져 읽을 수가 없다. */
  .ck__card, .ck__tier, .ck__f, .ck__chart {
    break-inside: avoid; page-break-inside: avoid;
  }
  .ck__card {
    margin: 0 0 10px !important; padding: 14px !important;
    border: 1px solid var(--c-line) !important; box-shadow: none !important;
  }
  /* 지도·차트는 한 장에 들어오게 낮춘다 */
  .ck__map { max-height: 88mm; }
  .ck__chart svg { height: 110px; }

  /* ⚠️ 접어 둔 「상담 때 함께 볼 것」을 **펼친다** — 종이는 클릭이 안 된다 */
  .ck__chk > ul { display: block !important; }
  .ck__chk > summary { list-style: none; font-weight: 700; }

  a[href]::after { content: none; }   /* URL 을 덧붙이지 않는다 — 표가 깨진다 */
}

@page { margin: 12mm; }

/* ★ 태그 다섯 갈래 — 「조건부」 하나로는 도로구역과 농업보호구역이 같은 말이 된다 */
.ck__t--m { background: var(--c-sky-pale); color: var(--c-blue); }   /* 간단 — 절차만 붙는다 */
.ck__t--n { background: var(--c-amber-pale); color: var(--c-amber); }   /* 협의 필요 */

/* ── 진행 표시 (2026-09-08) ──────────────────────────────────────────
   ⚠️⚠️ **연출이 아니다.** 서버가 그 자료를 부르기 직전에 보내는 이름이라
      켜진 칸이 곧 지금 기다리는 바깥 API 다. */
.ckp { max-width: 860px; margin: 0 auto; text-align: left; }
.ckp__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; font-size: var(--fs-base); font-weight: 500; color: var(--c-navy);
}
.ckp__n { font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }
/* ⚠️ `<span>` 은 inline 이라 height 가 무시된다 — block 을 준다 */
.ckp__bar {
  display: block; height: 6px; border-radius: 3px;
  background: rgb(0 14 30 / 8%); overflow: hidden;
}
.ckp__bar > span {
  display: block; height: 100%; width: 0;
  background: var(--g-cta); transition: width .35s ease;
}
.ckp__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px; margin-top: 22px;
}
.ckp__s {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.ckp__dot {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--c-line); background: var(--c-bg);
  display: grid; place-items: center;
}
.ckp__l { font-size: var(--fs-xs); color: var(--c-subtle); line-height: 1.4; }

/* 끝난 것 — 남색 체크 */
.ckp__s.is-done .ckp__dot { background: var(--c-navy); border-color: var(--c-navy); }
.ckp__s.is-done .ckp__dot::after {
  content: ''; width: 11px; height: 6px; margin-top: -3px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.ckp__s.is-done .ckp__l { color: var(--c-navy); }

/* 지금 하는 것 — 주황 테두리 + 맥박 */
.ckp__s.is-now .ckp__dot {
  border-color: var(--c-orange); background: var(--c-cream);
  animation: ckp-pulse 1.1s ease-in-out infinite;
}
.ckp__s.is-now .ckp__l { color: var(--c-orange); font-weight: 700; }
@keyframes ckp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 106 43 / 35%); }
  50%      { box-shadow: 0 0 0 6px rgb(255 106 43 / 0%); }
}
/* ⚠️ 움직임을 싫어하는 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
  .ckp__s.is-now .ckp__dot { animation: none; }
  .ckp__bar > span { transition: none; }
}

@media (max-width: 720px) {
  .ckp__steps { grid-template-columns: repeat(2, 1fr); }
}

/* ★ 상담 신청 하단 바 — 결과가 길어 맨 아래 폼이 안 보인다(2026-09-08) */
/* ⚠️ `display` 를 못 박는다 — `.ctabar` 가 flex 인데 계산값이 block 으로
   나오는 것을 봤다. 원인을 못 짚어도 여기서 이기면 화면은 맞다. */
/* ⚠️⚠️ **클래스 이름이 겹쳐 있었다**(2026-09-08 사용자 지적 — 「높이가 너무
   낮게 되있어」). `.ck__bar` 는 **계통 3계층의 용량 막대**(높이 6px)로 이미
   쓰이고 있었는데 상담 바에 같은 이름을 붙였다 —
   ★ 상담 바가 6px 로 눌렸고, 내 규칙이 나중이라 **계통 막대까지** 뒤집었다.
   ★ 새 클래스를 만들 때는 `grep -n "ck__이름" css/*.css` 로 먼저 본다
     (CLAUDE.md 의 「같은 이름의 함수를 두 번 선언」과 같은 자리다). */
.ck__cta { display: flex; z-index: 40; }
.ck__cta[hidden] { display: none; }

/* ⚠️⚠️ **반투명이면 위성사진 위에서 안 읽힌다**(2026-09-08 사용자 지적 —
   「플로팅 상담이 잘 안보여」). 공용 `.ctabar` 는 `--c-scrim`(반투명) +
   블러인데, 이 화면은 바 바로 뒤가 **지도**라 글자가 묻힌다.
   ★ 여기서는 **불투명**으로 덮는다. 원본도 진한 불투명 바다. */
.ck__cta {
  background: var(--c-navy-deep);
  backdrop-filter: none;
  box-shadow: 0 10px 34px rgb(0 14 30 / 30%);
}
.ck__cta .ctabar__text { color: #fff; }
.ck__cta .btn { flex: none; }
@media print { .ck__cta { display: none !important; } }

/* ★★ 설치할 곳 토글 — **제목 바로 아래** (2026-09-08 사용자 요청).
   ⚠️⚠️ 같은 주소가 **지붕 11.96kW ↔ 노지 8.38kW** 로 갈린다. 그런데 결과 화면은
      회색 주소줄 안의 작은 글씨라 **무엇으로 계산한 것인지 안 보였고 바꿀 수도
      없었다.** 답을 가르는 입력은 결과 위에 **보이는 크기**로 있어야 한다. */
.ckr__mount {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.ckr__mlab { font-size: 12.5px; font-weight: 700; color: var(--c-subtle);
             margin-right: 2px; }
.ckr__mbtn {
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--c-line); background: #fff;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--c-subtle);
  transition: border-color .12s, background .12s, color .12s;
}
.ckr__mbtn:hover { border-color: var(--c-sky-line); color: var(--c-blue); }
/* ⚠️ 고른 쪽이 **한눈에** 달라 보여야 한다 — 이게 지금 결과가 무엇인지를 말한다 */
.ckr__mbtn.is-on {
  border-color: var(--c-blue); background: var(--c-blue); color: #fff;
  cursor: default;
}
.ckr__mhint { font-size: 11.5px; color: var(--c-muted); }
/* ⚠️ 인쇄본에는 토글이 뜻이 없다 — 주소줄의 「노지(땅)/건물 지붕」이 그 자리를 한다 */
@media print { .ckr__mount { display: none !important; } }

/* 조회 날짜 — PDF 에서 언제 것인지 알게 한다 */
.ck__when { margin-left: 10px; color: var(--c-subtle); }

/* ★ 조례 예외·완화 조항 — 미달이어도 길이 있다는 걸 알려야 한다 */
.ck__ex { margin-top: 16px; border-top: 1px solid var(--c-line); padding-top: 14px; }
.ck__ex > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--c-navy);
  list-style: none;
}
.ck__ex > summary::-webkit-details-marker { display: none; }
.ck__ex > summary { list-style: none; }  /* ⚠️ 요즘 Safari 는 ::marker 로 그린다 — 이게 없으면 화살표가 둘(2026-10-22) */
.ck__ex > summary span {
  display: block; margin-top: 4px;
  font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted);
}
/* ⚠️ 닫힌 details 의 기본 숨김을 덮지 않게 — `display:grid` 로 겪은 자리다 */
.ck__ex:not([open]) > ul { display: none; }
.ck__ex > ul {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 0; padding-left: 18px; list-style: disc;
}
.ck__ex li { font-size: var(--fs-xs); color: var(--c-text); line-height: 1.75; }

/* 요약 카드의 이격 줄 — 계통 줄과 같은 모양 */
.ck__grid.is-full { background: var(--c-coral-pale); border-color: var(--c-coral-line); }

/* 확인이 필요한 항목 — 접혀 있어도 무엇이 걸렸는지는 보인다.
   ⚠️ `<b>` 를 문장 안에 쓰지 않는다 — 어딘가에서 block 이 되어 **줄이 갈렸다**
      (CLAUDE.md 의 「span·b 에 margin-top 을 주는 CSS」와 같은 자리다). */
.ck__chk > summary .ck__chkh { font-weight: 700; color: var(--c-navy); }
.ck__chk > summary .ck__chkw {
  margin-top: 6px; font-size: var(--fs-xs); color: var(--c-subtle);
}
.ck__chknote {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.75;
}
.ck__chknote b { color: var(--c-navy); }

/* ★ 법령 검토 — 판정이 아니라는 한 줄(2026-10-13) */
.ck__hsub { margin-left: 6px; font-size: 12px; font-weight: 400; font-style: normal; color: var(--c-muted); }