/* ===========================================================================
   components.css — 페이지들이 공유하는 조각

   화면에서 요소를 찾고 클래스명으로 점프해서 보는 파일이다. 통독하지 않는다.
   구역: 버튼 → 칩/뱃지 → 카드 → 체크 목록 → 캐러셀 → 탭 → 자리표시자
   =========================================================================== */

/* ── 아이콘 ───────────────────────────────────────────────────────────── */
/* <use> 로 참조하는 svg 는 크기를 지정하지 않으면 300×150 이 된다.
   ⚠️ 선택자를 `svg[class]` 로 두면 특이도(0,1,1)가 클래스(0,1,0)를 이겨
   .btn__arrow · .quick__icon 의 크기가 통째로 무시된다. 태그 선택자로 둘 것. */
svg { width: 1em; height: 1em; fill: none; }
.ico { width: 24px; height: 24px; }

/* ── 로고 ─────────────────────────────────────────────────────────────
   ⚠️ 지금 로고는 원본 자산을 그대로 쓰고 있다(임시). 데모 전에 교체한다. */
.logo { width: 122px; height: auto; }

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-btn);
  font-size: var(--fs-base);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: filter .15s ease, background-color .15s ease;
}

.btn:hover { filter: brightness(1.06); }

.btn__arrow { width: 16px; height: 16px; flex: none; }

/* 주황 그라디언트 — 원본의 '바로가기' */
.btn--cta { background: var(--g-cta); }

/* 진한 네이비 — 슬라이드 안 주 버튼 */
.btn--navy { background: var(--c-navy-deep); }

/* 반투명 — 슬라이드 안 보조 버튼 */
.btn--ghost {
  background: rgb(255 255 255 / 20%);
  backdrop-filter: blur(2px);
}

.btn--lg {
  height: 56px;
  padding: 0 28px;
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: var(--r-btn);
}

/* ── 칩 · 뱃지 ────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: 500;
}

/* 슬라이드 위 pill — 반투명 흰색 테두리 */
.chip--onblue {
  border: 1px solid rgb(255 255 255 / 45%);
  color: #fff;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--r-chip);
  background: var(--c-blue-pale);
  color: var(--c-navy);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.badge--sm { font-size: var(--fs-xs); font-weight: 500; }

/* 다이어그램의 흐름 라벨 */
.flowtag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--r-chip);
  font-size: var(--fs-xl);
  font-weight: 500;
}

/* ⚠️⚠️ 여기 파랑이 **`rgb(61 131 228 / 20%)`** 로 숨어 있었다 — 옛 브랜드 파랑이다.
   16진수만 훑어서는 못 잡는다. 색을 바꿀 때 `rgb(` 형태도 함께 본다.
   ⚠️ 주황 글자는 크림 면 위에서 **2.67:1** 이라 안 읽혔다 — ink 로 내린다. */
.flowtag--blue { background: var(--c-sky-pale); color: var(--c-blue); }
.flowtag--orange { background: var(--c-cream); color: var(--c-orange-ink); }

/* ── 카드 ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 24px;
}

/* ── 체크 목록 ────────────────────────────────────────────────────────── */
.checks { display: flex; flex-direction: column; gap: 14px; }

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-xl);
  font-weight: 500;
}

.checks__icon { width: 24px; height: 24px; flex: none; margin-top: 2px; }

/* ── 캐러셀 ───────────────────────────────────────────────────────────── */
.carousel { position: relative; }

.carousel__viewport {
  border-radius: var(--r-card);
  overflow: hidden;
}

.carousel__track {
  display: flex;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.slide {
  flex: 0 0 100%;
  /* 원본은 높이가 고정이고 목업이 아래로 잘린다. min-height 로 두면
     이미지 높이만큼 슬라이드가 늘어나 캐러셀이 통째로 커진다. */
  height: var(--h-slide);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

.slide--1 { background: var(--g-slide-1); }
.slide--2 { background: var(--g-slide-2); }
.slide--3 { background: var(--g-slide-3); }

.slide__body { display: flex; flex-direction: column; gap: 28px; align-self: center; }

/* 원본은 태블릿 목업이 슬라이드 아래로 넘쳐 잘린다. 바닥에 붙이고 패딩만큼 끌어내린다. */
.slide__img {
  width: min(100%, 454px);
  height: auto;
  justify-self: center;
  align-self: end;
  margin-bottom: -60px;
}

/* 가로형 이미지는 넘치게 두지 않는다 */
.slide__img--wide {
  width: min(100%, 520px);
  align-self: center;
  margin-bottom: 0;
}

.slide__title {
  font-size: var(--fs-slide);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.slide__actions { display: flex; gap: 12px; }

/* 슬라이드 1·3 은 어두운 배경(흰 글씨), 2 는 밝은 배경(네이비 글씨) */
.slide--1, .slide--3 { color: #fff; }
.slide--2 { color: var(--c-navy); }

.carousel__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-bg);
  box-shadow: 0 2px 12px rgb(0 14 30 / 12%);
  color: var(--c-heading);
  z-index: 2;
}

.carousel__arrow:hover { background: var(--c-surface-alt); }
.carousel__arrow--prev { left: -24px; }
.carousel__arrow--next { right: -24px; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.carousel__dot {
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  background: #d9d9d9;
  transition: width .2s ease, background-color .2s ease;
}

.carousel__dot[aria-current='true'] {
  width: 28px;
  background: var(--c-navy);
}

/* ── 탭 (pill 토글) ───────────────────────────────────────────────────── */
.pilltabs {
  display: inline-flex;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  box-shadow: 0 4px 16px rgb(0 14 30 / 6%);
}

.pilltabs__tab {
  min-width: 230px;
  height: 52px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-subtle);
}

.pilltabs__tab[aria-selected='true'] {
  background: var(--c-navy);
  color: #fff;
  font-weight: 700;
}

/* ── 넓은 pill 탭 (800×80) ────────────────────────────────────────────
   수익 늘리기의 제도 선택과 거래 후기의 판매자/구매자 전환이 함께 쓴다. */
.ptabs {
  width: 800px;
  max-width: 100%;
  height: 80px;
  margin: 0 auto;
  padding: 10px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: 0 4px 16px rgb(0 14 30 / 6%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ptabs__tab {
  flex: 1;
  height: 60px;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-subtle);
}

.ptabs__tab[aria-selected='true'] { background: var(--c-navy); color: #fff; font-weight: 700; }

/* ── 자리표시자 ───────────────────────────────────────────────────────────
   원본의 일러스트·목업은 상표 자산이라 가져오지 않는다(CLAUDE.md 리소스 정책).
   자리와 크기만 잡아 두고, 디자이너가 넣을 자리임을 화면에서도 알 수 있게 한다. */
.ph {
  display: grid;
  place-items: center;
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 12%);
  border: 1px dashed rgb(255 255 255 / 35%);
  color: rgb(255 255 255 / 70%);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
  padding: 12px;
}

/* 밝은 배경 위 */
.ph--light {
  background: rgb(0 14 30 / 4%);
  border-color: rgb(0 14 30 / 15%);
  color: var(--c-muted);
}

.ph--tablet { aspect-ratio: 454 / 591; width: min(100%, 454px); justify-self: center; }
.ph--icon { width: 90px; height: 90px; border-radius: var(--r-card); }
.ph--char { width: 207px; height: 207px; border-radius: 50%; }
.ph--logo { width: 230px; height: 94px; }

/* ── 서브페이지 히어로 (사진 + 오버레이) ─────────────────────────────────
   원본 계측: 높이 784, 오버레이 rgba(27,33,37,.7), 제목 64px/700 흰색 */
.hero--photo {
  position: relative;
  height: var(--h-hero);
  display: grid;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__scrim { position: absolute; inset: 0; background: var(--c-scrim); }

.hero__inner { position: relative; }

.hero__title {
  font-size: var(--fs-hero-lg);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.hero--short { height: 680px; }

.hero__sub {
  margin-top: 20px;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.7;
}

.hero .checks li { font-size: var(--fs-md); }
.hero .checks__icon { width: 20px; height: 20px; }

/* 히어로 안의 큰 CTA — 여러 서브페이지가 함께 쓴다.
   페이지 전용 CSS 에 두면 그 파일을 안 불러오는 페이지에서 버튼이 맨 텍스트로 나온다. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 80px;
  padding: 0 36px;
  margin-top: 36px;
  border-radius: var(--r-card);
  background: var(--g-cta);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* ── 섹션 공통 ────────────────────────────────────────────────────────
   원본은 섹션 사이가 100px 안팎이다. 넉넉해 보이라고 늘리면
   전체 길이가 원본보다 1,000px 넘게 길어진다(실제로 그랬다). */
.section { padding: 90px 0; }
.section--tight { padding: 40px 0; }

.section__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-navy-deep);
  text-align: center;
}

.section__title--left { text-align: left; }
.section__title--right { text-align: right; }

.section__lead {
  margin-top: 24px;
  font-size: var(--fs-md);
  color: var(--c-navy);
  text-align: center;
  line-height: 1.7;
}

/* 제목 안에서 강조되는 파란 어절 */
.hl { color: var(--c-blue); }

/* ── FAQ 아코디언 ─────────────────────────────────────────────────────
   <details> 를 쓴다 — 열고 닫는 데 JS 가 필요 없고 키보드도 그냥 된다. */
.faq { border-top: 1px solid var(--c-line); }

.faq__item { border-bottom: 1px solid var(--c-line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 4px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-navy-deep);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q { list-style: none; }  /* ⚠️ 요즘 Safari 는 ::marker 로 그린다 — 이게 없으면 화살표가 둘(2026-10-22) */

.faq__caret {
  width: 24px; height: 24px;
  flex: none;
  color: var(--c-muted);
  transition: transform .18s ease;
}

.faq__item[open] .faq__caret { transform: rotate(180deg); }

.faq__a {
  padding: 0 4px 28px;
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--c-subtle);
}

/* ── 하단 고정 CTA 바 ─────────────────────────────────────────────────
   원본 계측: 1100×88, rgba(27,33,37,.7), radius 12 */
.ctabar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  z-index: 45;
  width: min(1100px, calc(100vw - 48px));
  height: 88px;
  padding: 0 40px;
  border-radius: var(--r-card);
  /* ⚠️ `--c-scrim`(68%)을 그대로 쓰면 **흰 배경 위에서 회색으로 떠** 비활성처럼
     보인다 — 사용자가 홍보 화면에서 같은 지적을 했다(「플로팅 상담이 잘 안보여」).
     스크림 토큰은 히어로 사진용이라 그대로 두고 **여기서만 진하게** 덮는다. */
  background: rgb(13 20 48 / 90%);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
}

.ctabar__text { font-size: var(--fs-lg); font-weight: 500; }

/* ── 아직 없는 기능 ───────────────────────────────────────────────────── */
.is-off { color: var(--c-muted); cursor: not-allowed; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  translate: -50% 8px;
  z-index: 100;
  max-width: min(90vw, 520px);
  padding: 14px 22px;
  border-radius: var(--r-btn);
  background: rgb(0 14 30 / 92%);
  color: #fff;
  font-size: var(--fs-sm);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, translate .18s ease, visibility .18s;
}

.toast.is-on { opacity: 1; visibility: visible; translate: -50% 0; }

/* 홍보 층 입구 — 다른 메뉴와 구별한다. ⚠️ 색만으로 구별하지 않는다(굵기도 준다). */
.gnb__link--go { color: var(--c-blue); font-weight: 700; }


/* ── 문제 3 · 솔루션 3 (2026-09-07 이사) ─────────────────────────────────
   ⚠️⚠️ `page-construction.css` 에 있었는데 **홍보 화면(check)도 쓰게 됐다** —
      그 파일을 안 불러오는 화면에서 **카드가 세로로 쌓이고 왼쪽에 몰렸다.**
      CLAUDE.md 규칙 그대로: **두 페이지 이상이 쓰면 여기로 올린다.**
      (`.hero__cta`·`.ptabs` 에서 이미 한 번 겪은 자리다.) */
/* ===========================================================================
   page-construction.css — 태양광 설치

   섹션(원본 계측 y/높이): 히어로 784 → 문제 900 → 솔루션 1013 →
                          견적·컨설팅 1381 → 현장방문 435 → 하자보증 760 → FAQ
   =========================================================================== */

/* ── 문제 3카드 ───────────────────────────────────────────────────────── */
.problems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 80px;
}

.problem {
  min-height: 420px;
  padding: 48px 40px;
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ★★ **흰 배경 그림을 그대로 쓴다** (2026-09-07).
   ⚠️⚠️ 「transparent background」로 만들면 Gemini 가 **체커보드 무늬를 픽셀로
      그려 넣는다**(실측: 회색 227/112 두 톤이 박혀 있고 반투명 부분에 비친다).
      투명 PNG 를 받으려 애쓰는 대신 **흰 배경으로 받아 `multiply` 로 녹인다** —
      카드가 밝은 색이라 배경이 사라진 것처럼 보인다.
   ⚠️ `multiply` 는 **어두운 배경에서는 안 된다** — 카드 색을 어둡게 바꾸면
      이 규칙도 함께 봐야 한다. */
.problem__icon { width: 100px; height: 100px; mix-blend-mode: multiply; }

/* ★★ 문제 카드 셋을 **색으로 가른다** (2026-09-08 — 「좀 화사하게」).
   셋이 같은 회색이라 한 덩어리로 읽혔다.
   ⚠️⚠️ **밝은 색만 쓴다** — 바로 위 `multiply` 규칙 때문이다. 어둡게 하면
      그림의 흰 배경이 카드 색으로 안 녹고 **그림이 통째로 어두워진다.**
   ⚠️ 세 화면(`check` · `construction`)이 같이 쓴다 — 둘 다 카드가 셋이다. */
.problem:nth-child(1) { background: var(--c-sky-pale); }
.problem:nth-child(2) { background: var(--c-amber-pale); }
.problem:nth-child(3) { background: var(--c-mint-pale); }

.problem__text {
  margin-top: 32px;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-navy-deep);
}

.problem__who {
  margin-top: auto;
  padding-top: 32px;
  font-size: var(--fs-md);
  color: var(--c-navy);
}

/* ── 솔루션 3카드 (좌 1 + 우 2) ───────────────────────────────────────── */
.solutions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 20px;
  margin-top: 80px;
}

.sol {
  border-radius: var(--r-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sol--tall { grid-row: span 2; }
.sol--navy { background: var(--c-navy); color: #fff; }
.sol--gray { background: var(--c-surface-gray); color: var(--c-navy-deep); }
.sol--blue { background: var(--c-blue-solid); color: #fff; }

.sol__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
}

.sol__list { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-base); }
.sol__list li { opacity: .9; }

/* 카드 우하단에 걸치는 3D 아이콘 */
/* ⚠️⚠️ **배경을 없애는 방법이 카드 색에 따라 다르다.**
   · 밝은 카드(`.sol--gray`) — `multiply` 로 흰 배경이 카드 색이 된다
   · 어두운 카드(`.sol--navy`·`.sol--blue`) — `multiply` 를 걸면 배경은 사라지지만
     **그림 자체도 남색과 곱해져 안 보인다.** 그래서 거기 얹히는 그림은
     `tools/install_images.py` 가 **알파로 뚫어서** 넣는다(`KEY_OUT`).
   ★ 즉 여기 규칙을 바꿀 때는 그 도구도 함께 본다. */
.sol--gray .sol__icon { mix-blend-mode: multiply; }
.sol__icon {
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 210px;
  height: auto;
}

.sol--tall .sol__icon { width: 223px; right: 40px; bottom: 40px; }
.sol--blue .sol__icon { width: 195px; }
/* ★ 회사 로고(2026-09-27 여러 회사 구조) — 그 회사가 올린 그림은 비율이 제각각이라
   높이만 맞추고 폭은 따라가게 둔다. 로고가 없는 회사는 이름 글자가 그 자리에 선다. */
img.logo.is-custom { width: auto; max-width: 180px; height: 40px; object-fit: contain; }
.brand-word { display: inline-block; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--c-navy-deep); line-height: 50px; white-space: nowrap; }

/* 표가 화면보다 넓으면 표만 옆으로 밀린다 — 콘솔(console.css)과 같은 이름이다.
   ⚠️ 홍보 층은 console.css 를 안 싣는다 — 여기 없으면 감싸개가 아무 일도 안 해 검토 결과의
   사용량별 절감 표가 휴대폰 폭(375px)을 넘쳤다(2026-10-10 · 462px). */
.tablewrap { overflow-x: auto; min-width: 0; }

/* ── 개인정보 동의 한 줄 (js/privacy.js · 2026-10-13) ───────────────────────
   ★ 문의하기와 검토 결과 「상담 신청」이 같이 쓴다 — 그래서 여기 둔다. */
.pvline { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--c-subtle); }
.pvline__row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.pvline__row input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--c-navy); }
.pvline__more { margin: 6px 0 0 26px; }
.pvline__more summary { cursor: pointer; color: var(--c-muted); text-decoration: underline; font-size: 12px; width: max-content; }
.pvterms { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--c-g50); border: 1px solid var(--c-line);
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 12px; }
.pvterms dt { font-weight: 700; color: var(--c-text); }
.pvterms dd { margin: 0; }
@media (max-width: 520px) { .pvterms { grid-template-columns: 1fr; } .pvterms dd { margin-bottom: 4px; } }