/* ============================================
   LEGATO Product Detail CSS — 제품 상세페이지 공용
   배포 위치: /theme/{테마}/css/legato-product.css
   사용 페이지: /sub/product-yunseul.php · /sub/product-ongyeol.php
   공통 토큰·리셋·.inner·.reveal·.element-box·GNB·푸터는
   legato-common.css / legato-sub.css 에서 로드됨 (head.php)
   ============================================ */

/* ── 히어로 ── */
.pd-hero{position:relative;padding:160px 0 90px;overflow:hidden}
.pd-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,191,0,0.25),transparent)}
.pd-hero-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pd-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:4px;color:var(--amber);font-weight:500;margin-bottom:20px}
.pd-hero h1{font-size:clamp(38px,5.4vw,60px);font-weight:900;line-height:1.15;letter-spacing:-1px;margin-bottom:8px}
.pd-hero-en{font-family:'Montserrat',sans-serif;font-size:13px;letter-spacing:4px;color:var(--gray-600);font-weight:600;text-transform:uppercase;margin-bottom:22px}
.pd-hero-tagline{font-size:clamp(16px,2vw,20px);font-weight:300;color:var(--gray-400);line-height:1.8;margin-bottom:28px}
.pd-price{font-size:14px;color:var(--gray-400);margin-bottom:26px}
.pd-price b{font-size:24px;font-weight:800;color:var(--white);font-family:var(--font-mono)}
.pd-price .note{display:block;font-size:12px;color:var(--gold);margin-top:6px;letter-spacing:.5px}
.pd-hero-media{aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(135deg,#12121A 0%,#1A1A24 45%,rgba(255,191,0,0.18) 100%)}
.pd-hero-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 공통 섹션 ── */
.pd-section{padding:100px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.pd-section.center{text-align:center}
.pd-label{font-family:var(--font-mono);font-size:12px;letter-spacing:4px;color:var(--amber);font-weight:500;margin-bottom:18px}
.pd-title{font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.3;margin-bottom:16px}
.pd-title .accent{color:var(--amber)}
.pd-sub{font-size:15px;font-weight:300;color:var(--gray-400);line-height:1.9;max-width:680px;margin-bottom:48px}
.pd-section.center .pd-sub{margin-left:auto;margin-right:auto}
.pd-quote{font-size:14px;font-style:italic;color:var(--gold);margin-bottom:36px}

/* ── 밸류 카드 (2~3열) ── */
.pd-value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;text-align:left}
.pd-value-grid.cols3{grid-template-columns:repeat(3,1fr)}
.pd-value-card{background:var(--black-card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:36px 30px;transition:var(--transition)}
.pd-value-card:hover{border-color:rgba(255,191,0,0.25);transform:translateY(-4px)}
.pd-value-num{font-family:var(--font-mono);font-size:12px;color:var(--amber);letter-spacing:2px;margin-bottom:14px}
.pd-value-card h3{font-size:19px;font-weight:800;line-height:1.4;margin-bottom:14px}
.pd-value-card p{font-size:14px;font-weight:300;color:var(--gray-400);line-height:1.85}
.pd-foot{font-size:14px;color:var(--gray-400);font-weight:300;margin-top:36px}

/* ── 프로세스 스텝 (4단계) ── */
.pd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pd-step{background:var(--black-card);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:28px 18px;text-align:center}
.pd-step-no{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--amber);margin-bottom:12px}
.pd-step h4{font-size:15px;font-weight:700;margin-bottom:8px}
.pd-step p{font-size:12px;color:var(--gray-400);font-weight:300}

/* ── 실측 비교 (열화상·미세먼지) ── */
.pd-proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.pd-proof-card{border-radius:16px;padding:32px 30px;border:1px solid rgba(255,255,255,0.06);background:var(--black-card)}
.pd-proof-card.win{border-color:rgba(255,191,0,0.35);background:rgba(255,191,0,0.05);position:relative}
.pd-proof-badge{position:absolute;top:-14px;right:20px;background:var(--amber);color:var(--black);font-size:12px;font-weight:800;padding:6px 14px;border-radius:100px}
.pd-proof-name{font-size:15px;font-weight:700;margin-bottom:20px}
.pd-proof-card.win .pd-proof-name{color:var(--amber)}
.pd-metric{margin-bottom:16px}
.pd-metric-label{font-size:12px;color:var(--gray-400);margin-bottom:4px}
.pd-metric-value{font-size:30px;font-weight:800;font-family:var(--font-mono);color:var(--gray-400)}
.pd-proof-card.win .pd-metric-value{color:var(--amber)}
.pd-metric-value small{font-size:13px;font-weight:500}
.pd-note{font-size:12px;color:var(--gray-600);line-height:1.7;margin-top:28px}

/* ── 구조(모듈) 리스트 ── */
.pd-struct-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;text-align:left}
.pd-struct-item{display:flex;gap:16px;align-items:flex-start;background:var(--black-card);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:22px 24px}
.pd-struct-no{font-family:var(--font-mono);font-size:13px;color:var(--amber);font-weight:700;flex-shrink:0;margin-top:2px}
.pd-struct-item h4{font-size:15px;font-weight:700;margin-bottom:6px}
.pd-struct-item p{font-size:13px;color:var(--gray-400);font-weight:300;line-height:1.7}

/* ── 스펙 카드 (큰 숫자) ── */
.pd-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pd-spec-item{background:var(--black-card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:40px 24px;text-align:center}
.pd-spec-value{font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--amber);font-family:var(--font-mono);line-height:1.1}
.pd-spec-value small{font-size:14px;font-weight:600}
.pd-spec-desc{font-size:13px;color:var(--gray-400);font-weight:300;margin-top:14px;line-height:1.7}

/* ── 스펙 표 ── */
.pd-table{width:100%;border-collapse:collapse;text-align:left}
.pd-table th,.pd-table td{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,0.07);font-size:14px;vertical-align:top}
.pd-table th{color:var(--gray-400);font-weight:500;width:32%;white-space:nowrap}
.pd-table td{color:var(--white);font-weight:400;line-height:1.7}
.pd-table thead th{font-size:13px;letter-spacing:1px;color:var(--gray-400);border-bottom:1px solid rgba(255,191,0,0.35);padding-bottom:12px}
.pd-table td.win{color:var(--amber);font-weight:700}

/* ── 와디즈 일정 ── */
.pd-schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:44px 0}
.pd-sch-item{background:rgba(255,191,0,0.05);border:1px solid rgba(255,191,0,0.18);border-radius:14px;padding:26px 18px;text-align:center}
.pd-sch-label{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--amber);margin-bottom:10px}
.pd-sch-date{font-size:19px;font-weight:800;font-family:var(--font-mono)}
.pd-sch-desc{font-size:12px;color:var(--gray-400);margin-top:8px;font-weight:300}

/* ── 와디즈 CTA 버튼 ── */
.wadiz-cta{display:inline-flex;align-items:center;gap:12px;padding:18px 34px;background:var(--amber);color:var(--black);font-size:16px;font-weight:800;border-radius:100px;transition:var(--transition);box-shadow:0 8px 28px rgba(255,191,0,0.22)}
.wadiz-cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,191,0,0.34)}
.wadiz-cta .wm{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.5px}
.wadiz-cta .arrow{display:inline-block;transition:transform var(--transition)}
.wadiz-cta:hover .arrow{transform:translateX(4px)}
.wadiz-cta.ghost{background:transparent;border:2px solid var(--amber);color:var(--amber);box-shadow:none}
.wadiz-cta.ghost:hover{background:rgba(255,191,0,0.08)}
.pd-cta-row{display:flex;gap:14px;flex-wrap:wrap}
.pd-section.center .pd-cta-row{justify-content:center}

/* ── 이미지 슬롯 (브로슈어형) ── */
.pd-hero-media.wide{aspect-ratio:16/9}
.pd-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:left}
.pd-row.rev{direction:rtl}
.pd-row.rev>*{direction:ltr}
.pd-media{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:var(--black-card)}
.pd-media img{width:100%;display:block}
.pd-media.wide{margin-top:56px}
.pd-vert{display:flex;flex-direction:column;gap:20px}
.pd-section.bg-img{position:relative;background-size:cover;background-position:center;border-bottom:none}
.pd-section.bg-img::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,15,0.88) 0%,rgba(10,10,15,0.62) 50%,rgba(10,10,15,0.92) 100%)}
.pd-section.bg-img .inner{position:relative;z-index:1}
.pd-proof-img{border-radius:10px;overflow:hidden;margin-bottom:20px;border:1px solid rgba(255,255,255,0.08);background:#000}
.pd-proof-img img{width:100%;max-height:280px;object-fit:contain;display:block;margin:0 auto}

/* ── 컬러 팬덤 티저 ── */
.pd-color-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.pd-color-chip{width:110px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);text-align:center;padding-bottom:12px}
.pd-color-chip .swatch{height:66px;margin-bottom:10px}
.pd-color-chip.now{border-color:var(--amber)}
.pd-color-chip .cname{font-size:13px;font-weight:700}
.pd-color-chip .ctag{font-size:10px;font-family:var(--font-mono);letter-spacing:1px;color:var(--gray-600);margin-top:3px}
.pd-color-chip.now .ctag{color:var(--amber)}

/* ── 반응형 ── */
@media(max-width:768px){
  .pd-hero{padding:120px 0 64px}
  .pd-hero-row{grid-template-columns:1fr;gap:32px}
  .pd-section{padding:64px 0}
  .pd-value-grid,.pd-value-grid.cols3,.pd-proof-grid,.pd-struct-grid{grid-template-columns:1fr}
  .pd-row{grid-template-columns:1fr;gap:32px}
  .pd-row.rev{direction:ltr}
  .pd-steps{grid-template-columns:repeat(2,1fr)}
  .pd-spec-grid{grid-template-columns:1fr}
  .pd-schedule{grid-template-columns:1fr}
  .pd-table th{width:38%;white-space:normal}
}
@media(max-width:480px){
  .pd-steps{grid-template-columns:1fr}
  .wadiz-cta{width:100%;justify-content:center}
}