/* 스틸방수 페이지 전용 — 히어로 · 비교표 · 전후 사진 · 시공 방법 2단. 나머지는 components.css + home.css 공용(hm-svc·hm-calc·hm-faq·hm-case). */

/* ---- 히어로 (홈과 같은 골격, 포지맨은 오른쪽 아래) ---- */
.st-hero {
  position: relative; min-height: min(86vh, 760px); display: flex; flex-direction: column; justify-content: center;
  color: var(--pz-white); overflow: hidden;
  background: #000 var(--st-hero-bg) center / cover no-repeat;
}
body[data-header="hero"] .pz-hero.st-hero { padding-top: calc(var(--pz-header-h) + 40px); padding-bottom: clamp(56px, 8vw, 96px); }
.st-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 140px),
    linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55) 100%);
}
.st-hero__inner { position: relative; z-index: 1; }
.st-hero__text { max-width: 700px; }
.st-hero .pz-kicker { color: var(--pz-lemon); }
.st-hero__h1 { margin-bottom: 20px; font-size: clamp(34px, 4.8vw, 60px); }
.st-hero__lead { margin: 0 0 8px; font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; }
.st-hero__desc { margin: 0 0 28px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; color: rgba(255, 255, 255, .82); max-width: 520px; }
.st-hero__bottom { margin: 24px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.st-hero__mascot {
  position: absolute; right: clamp(0px, 5vw, 100px); bottom: -34%; z-index: 1;
  height: 118%; width: auto; max-width: none; object-fit: contain; object-position: top;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35));
  animation: hm-fade 1s .35s ease-out both;
}
/* 폰 — 히어로가 첫 화면에 딱. 글·버튼은 촘촘히, 포지맨은 남는 공간 가운데에서 배쯤 잘림 (홈과 같은 방식, 2026-09-21 사용자) */
@media (max-width: 900px) {
  .st-hero { display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; }
  body[data-header="hero"] .pz-hero.st-hero { padding-top: calc(var(--pz-header-h) + 10px); padding-bottom: 0; }
  .st-hero > .pz-wrap { flex: 0 0 auto; }
  .st-hero .pz-kicker { margin-bottom: 8px; }   /* 크기는 표준(13px) 그대로 */
  .st-hero__h1 { margin-bottom: 10px; font-size: clamp(27px, 8vw, 40px); line-height: 1.2; }
  .st-hero__lead { margin-bottom: 4px; font-size: 15px; line-height: 1.5; }
  .st-hero__desc { margin-bottom: 14px; font-size: 14px; line-height: 1.55; }
  .st-hero .pz-btn-row { gap: 8px; }
  .st-hero .pz-btn-row .pz-btn { width: 100%; min-height: 46px; font-size: 15px; }
  .st-hero__bottom { margin-top: 10px; font-size: 12.5px; }
  .st-hero__mascot {
    position: static; transform: none; display: block; align-self: center;
    flex: 1 1 170px; min-height: 0; height: auto; max-height: 46svh;
    width: min(72%, 310px); max-width: none; margin: 8px 0 0;
    object-fit: cover; object-position: top center;
  }
}

/* ---- 우레탄 vs 스틸 카드 ---- */
.st-why__lead { margin: 0 0 14px; color: var(--pz-ink); font-weight: 600; }
.st-why__points { margin: 0; padding-left: 18px; }
.st-why__points li { margin-bottom: 6px; }
.st-why--accent { border-color: var(--pz-blue); background: var(--pz-blue-soft); }

/* ---- 전후 사진 ---- */
.st-ba__item { margin: 0; }
.st-ba__tag--before { background: rgba(23, 33, 43, .8); }
.st-ba__tag--after { background: var(--pz-blue); }
.st-ba .pz-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(23, 33, 43, .7) 100%); }

/* ---- 시공 방법: 단계 + 도해 ---- */
.st-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.st-how__diagram { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--pz-line); background: var(--pz-white); }
.st-how__diagram img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .st-how { grid-template-columns: 1fr; } }

/* ---- 비교표 ---- */
.st-cmp__wrap { overflow-x: auto; border: 1px solid var(--pz-line); border-radius: 16px; background: var(--pz-white); }
.st-cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.st-cmp th, .st-cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pz-line); }
.st-cmp thead th { font-size: 15px; font-weight: 700; color: var(--pz-ink); background: var(--pz-ivory); }
.st-cmp tbody th { width: 120px; color: var(--pz-blue); font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.st-cmp td { color: var(--pz-body); }
.st-cmp .st-cmp__steel { background: var(--pz-blue-soft); color: var(--pz-ink); font-weight: 600; }
.st-cmp thead .st-cmp__steel { color: var(--pz-blue); }
.st-cmp tr:last-child th, .st-cmp tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .st-cmp th, .st-cmp td { padding: 12px 14px; font-size: 14px; } .st-cmp tbody th { width: 84px; } }

/* ---- 비용 카드 ---- */
.st-cost__p { margin: 0 0 6px; color: var(--pz-body); font-size: 14.5px; line-height: 1.6; }

/* ---- 마무리 CTA (라이브 steel-final-cta 그대로, 색만 주색) ---- */
.st-final { background: var(--pz-blue); color: var(--pz-white); }
.st-final__inner { display: flex; justify-content: space-between; align-items: center; gap: 60px; padding: 80px 0; }
.st-final__small { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.st-final .pz-h2 { color: var(--pz-white); margin-bottom: 14px; }
.st-final p { margin: 0; color: rgba(255, 255, 255, .85); line-height: 1.7; }
.st-final__action { flex: 0 0 auto; text-align: center; }
.st-final__btn { display: inline-block; padding: 16px 28px; background: var(--pz-white); color: var(--pz-blue); font-size: 15px; font-weight: 700; text-decoration: none; border-radius: var(--pz-radius); }
.st-final__btn:hover { opacity: .92; }
.st-final__note { display: block; margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .65); }
@media (max-width: 800px) { .st-final__inner { flex-direction: column; align-items: flex-start; gap: 28px; padding: 56px 0; } .st-final__action { width: 100%; text-align: left; } }