/* PAGE HERO */
.page-hero{padding:11rem 3.5rem 5rem;max-width:1300px;margin:0 auto;}
.page-eyebrow{font-family:'Syne',sans-serif;font-size:.65rem;letter-spacing:.28em;color:var(--red);text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;}
.page-eyebrow::before{content:'';width:24px;height:1px;background:var(--red);}
.page-title{font-family:'Noto Sans KR',sans-serif;font-weight:900;font-size:clamp(2.4rem,4.5vw,4rem);line-height:1.18;margin-bottom:1.4rem;}
.page-subtitle{font-size:1rem;color:rgba(255,255,255,.45);line-height:2;max-width:560px;}
.divider{height:1px;background:rgba(255,255,255,.06);}

/* SEC TAG (local override: thinner before-bar) */
.sec-tag::before{width:18px;}

/* PRODUCT SECTIONS */
.prod-section{padding:5.5rem 3.5rem;}
.prod-section.alt{background:var(--black-2);}
.prod-inner{max-width:1100px;margin:0 auto;}

.prod-layout{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
.prod-layout.reverse .prod-img-area{order:2;}
.prod-layout.reverse .prod-content{order:1;}
.prod-img-area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.prod-img-area{min-height:400px;background:var(--black-3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.prod-img-area::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(192,57,43,.06),transparent 60%);}
.prod-content{padding:3.5rem;display:flex;flex-direction:column;justify-content:center;background:var(--black);}
.prod-badge{font-family:'Syne',sans-serif;font-size:.58rem;letter-spacing:.16em;padding:3px 10px;border:1px solid rgba(192,57,43,.4);color:var(--red);display:inline-block;margin-bottom:1.4rem;text-transform:uppercase;align-self:flex-start;}
.prod-name{font-weight:900;font-size:clamp(1.5rem,2.2vw,1.9rem);margin-bottom:.6rem;color:var(--white);line-height:1.2;}
.prod-tagline{font-size:.9rem;color:rgba(255,255,255,.4);margin-bottom:2.2rem;line-height:1.85;}
.prod-specs{display:flex;flex-direction:column;gap:0;margin-bottom:2.4rem;border:1px solid rgba(255,255,255,.06);border-radius:2px;overflow:hidden;}
.prod-spec-row{display:grid;grid-template-columns:9rem 1fr;align-items:start;padding:.75rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem;}
.prod-spec-row:last-child{border-bottom:none;}
.spec-label{padding-top:.15em;}
.spec-val{line-height:1.6;text-align:left;}
.spec-label{color:rgba(255,255,255,.32);font-size:.78rem;}
.spec-val{font-weight:600;color:var(--white);}
.spec-val.hl{color:var(--red);}
.glass-feat-name{color:var(--red);font-weight:700;display:inline-block;margin-top:.5rem;}
.glass-feat-name:first-child{margin-top:0;}
.glass-feat-desc{color:rgba(255,255,255,.68);font-weight:400;display:inline-block;margin-bottom:.2rem;}
.prod-cta{display:inline-flex;align-items:center;gap:.5rem;font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;color:var(--white);text-decoration:none;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.3);padding:.6rem 1.4rem;transition:all .3s;align-self:flex-start;}
.prod-note{font-size:.76rem;color:rgba(255,255,255,.3);margin:-1.4rem 0 1.6rem;line-height:1.6;}
.prod-cta:hover{background:var(--red);border-color:var(--red);}

/* COMPARISON */
.comparison-wrap{padding:5rem 3.5rem;background:var(--black);}
.comparison-inner{max-width:1100px;margin:0 auto;}
.criteria-title{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;margin-bottom:0;color:#fff;}
.comparison-table{width:100%;border-collapse:collapse;margin-top:2rem;border:1px solid rgba(255,255,255,.1);}
.comparison-table th{font-family:'Syne',sans-serif;font-size:.85rem;letter-spacing:.03em;color:rgba(255,255,255,.9);font-weight:700;text-align:center;padding:1.2rem 1.2rem;border-bottom:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);line-height:1.5;}
.comparison-table th:first-child,.comparison-table th:last-child{text-align:left;}
.comparison-table td{font-size:1.02rem;padding:1.2rem;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.92);text-align:center;}
.comparison-table td:first-child{font-weight:700;color:#fff;text-align:left;}
.comparison-table td:last-child{color:rgba(255,255,255,.7);font-size:.9rem;text-align:left;}
.comparison-table tr:last-child td{border-bottom:none;}
.comparison-table tr:hover td{background:rgba(255,255,255,.03);}

@media(max-width:768px){
  .page-hero{padding:8rem 1.5rem 3.5rem}
  .prod-section,.comparison-wrap{padding:3.5rem 1.5rem}
  .prod-layout,.prod-layout.reverse .prod-img-area,.prod-layout.reverse .prod-content{grid-template-columns:1fr;display:flex;flex-direction:column;}
  .prod-layout.reverse .prod-img-area{order:0}.prod-layout.reverse .prod-content{order:0}
  .prod-img-area{min-height:220px;}
  .prod-content{padding:2.2rem 1.5rem;}
  .comparison-inner{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .comparison-table{min-width:640px;}
  /* 표가 더 있다는 걸 알려주는 은은한 그림자 페이드 — 오른쪽 끝까지 스크롤하면
     사라진다(토글은 assets/js/common.js의 공용 스크립트). */
  .comparison-inner::after{
    content:'';position:absolute;top:0;right:0;bottom:0;width:28px;
    background:linear-gradient(to right,transparent,var(--black));
    pointer-events:none;transition:opacity .2s;
  }
  .comparison-inner.at-end::after{opacity:0;}
  /* 스펙 값 그리드 컬럼의 min-width:auto 기본값 때문에, PYROBEL-YA-60,90,120처럼
     공백 없는 긴 영숫자 문자열이 있으면 트랙이 늘어나 화면 밖으로 넘침 —
     minmax(0,1fr)로 트랙 자체를 줄어들 수 있게 하고, overflow-wrap:anywhere로
     필요하면 문자열 중간에서도 강제 줄바꿈. 한글 keep-all은 그대로 유지(영향 없음). */
  .prod-spec-row{grid-template-columns:9rem minmax(0,1fr);}
  .spec-val{overflow-wrap:anywhere;min-width:0;}
}