/* 제품소개 · 시공사례 쪽 전용 모양 (2026-10-21)
   - 색과 글꼴은 assets/styles.css 의 것(--paper, --ink, --ember, Pretendard)을 그대로 씁니다.
   - styles.css 는 미리 만들어 둔 Tailwind 라서 새 클래스를 적어도 안 먹습니다.
     그래서 두 쪽에서 새로 필요한 모양은 모두 이 파일에, pg- 로 시작하는 이름으로 둡니다.
   - index.html 은 이 파일을 쓰지 않습니다. */

/* ---------- 머리글: 지금 보고 있는 쪽 표시, 태블릿 폭 정리 ---------- */
.pg-nav{gap:26px}
.pg-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ember);padding-bottom:4px}
.m-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ember)}
/* 768~1099px 에서는 넓은 메뉴가 비좁아서, 휴대폰처럼 옆으로 미는 메뉴를 씁니다 */
@media (min-width:768px) and (max-width:1099px){
  .pg-nav{display:none}
  .pg-header .m-nav{display:flex;padding:0 40px 10px}
}

/* ---------- 쪽 머리 (제목 부분) ---------- */
.pg-head{border-bottom:1px solid var(--line)}
.pg-head-in{max-width:1240px;margin:0 auto;padding:44px 24px 48px}
@media (min-width:768px){.pg-head-in{padding:72px 40px 64px}}
.pg-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;font-size:13px;color:var(--ink-soft)}
.pg-crumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:color .2s,border-color .2s}
.pg-crumb a:hover{color:var(--ember);border-color:var(--ember)}
.pg-crumb [aria-current]{color:var(--ink);font-weight:700}
.pg-eyebrow{font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-size:11px;letter-spacing:.16em;color:#a8431f}
.pg-h1{margin-top:16px;max-width:15ch;font-size:40px;font-weight:800;line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
@media (min-width:768px){.pg-h1{font-size:60px}}
@media (min-width:1100px){.pg-h1{font-size:72px}}
.pg-lead{margin-top:22px;max-width:50ch;font-size:16px;line-height:1.75;color:var(--ink-soft)}
@media (min-width:768px){.pg-lead{font-size:17px}}

/* 쪽 머리 아래 핵심 숫자 4칸 */
.pg-facts{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:900px){.pg-facts{grid-template-columns:repeat(4,1fr)}}
.pg-fact{background:var(--paper);padding:18px 16px 20px}
@media (min-width:768px){.pg-fact{padding:22px 22px 24px}}
.pg-fact dt{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)}
.pg-fact dd{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.15}
@media (min-width:768px){.pg-fact dd{font-size:26px}}
.pg-fact dd.pg-mono{font-size:18px;white-space:nowrap;letter-spacing:-.03em}
@media (min-width:768px){.pg-fact dd.pg-mono{font-size:24px}}
.pg-fact dd small{display:block;margin-top:8px;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:-.005em;line-height:1.55;color:var(--ink-soft)}

/* 모델 바로가기 단추 */
.pg-jump{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.pg-jump a{display:inline-flex;align-items:baseline;gap:10px;border:1px solid var(--line-strong);background:var(--paper);padding:10px 14px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;transition:border-color .2s,color .2s}
.pg-jump a:hover{border-color:var(--ember);color:var(--ember)}
.pg-jump a span{font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-size:12px;font-weight:400;color:var(--ink-soft)}

/* 머리 사진 */
.pg-cover-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
@media (min-width:768px){.pg-cover-wrap{padding:0 40px}}
.pg-cover{position:relative;margin:40px 0 0;overflow:hidden;background:var(--ink)}
.pg-cover img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (min-width:768px){.pg-cover img{aspect-ratio:21/9}}
.pg-cover figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;background:linear-gradient(to top,rgba(24,13,6,.78),rgba(24,13,6,0));color:#f6f1e8;font-size:13px;font-weight:600;letter-spacing:.01em}
@media (min-width:768px){.pg-cover figcaption{padding:56px 26px 18px;font-size:14px}}

/* ---------- 공통: 섹션, 제목, 단추 ---------- */
.pg-sec{max-width:1240px;margin:0 auto;padding:80px 24px}
@media (min-width:768px){.pg-sec{padding:112px 40px}}
.pg-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.pg-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;border-bottom:1px solid var(--ink);padding-bottom:22px}
.pg-h2{margin-top:14px;max-width:16ch;font-size:34px;font-weight:800;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
@media (min-width:768px){.pg-h2{font-size:52px}}
.pg-sec-note{max-width:42ch;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.pg-small{margin-top:18px;font-size:13px;line-height:1.7;color:var(--ink-soft)}

/* 단추: 주황 바탕 + 뒤로 비켜 놓은 테두리 (첫 화면 단추와 같은 모양) */
.pg-btn{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;font-size:15px;font-weight:700;line-height:1.2;color:#fdf8f0;text-decoration:none;white-space:nowrap;transition:transform .15s}
.pg-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ember)}
.pg-btn::after{content:"";position:absolute;inset:0;z-index:-2;border:1px solid var(--ink);transform:translate(5px,5px);transition:transform .2s}
.pg-btn:hover::after{transform:translate(3px,3px)}
.pg-btn:active{transform:translateY(1px)}
.pg-btn--dark::after{border-color:rgba(246,241,232,.6)}
.pg-link{display:inline-block;border-bottom:2px solid var(--ink);padding-bottom:2px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;transition:color .2s,border-color .2s}
.pg-link:hover{color:var(--ember);border-color:var(--ember)}

/* ---------- 제품소개: 모델 ---------- */
.pg-model{display:grid;gap:26px;padding:48px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.pg-model:last-child{border-bottom:0;padding-bottom:0}
@media (min-width:900px){
  .pg-model{grid-template-columns:1.08fr 1fr;gap:56px;padding:72px 0;align-items:start}
  .pg-model--flip .pg-model-media{order:2}
}
.pg-model-media{position:relative;overflow:hidden;background:var(--paper-2)}
.pg-model-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s}
.pg-model-media:hover img{transform:scale(1.03)}
.pg-model-media--tall img{object-position:center 78%}
.pg-model-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.pg-model-no{font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-size:11px;letter-spacing:.16em;color:#a8431f}
.pg-model-also{font-size:13px;font-weight:600;color:var(--ink-soft)}
.pg-model-name{margin-top:10px;font-size:32px;font-weight:800;line-height:1.08;letter-spacing:-.04em}
@media (min-width:768px){.pg-model-name{font-size:42px}}
.pg-model-line{margin-top:14px;max-width:42ch;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.pg-spec{margin-top:24px;border-top:1px solid var(--ink)}
.pg-spec>div{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6}
@media (min-width:768px){.pg-spec>div{grid-template-columns:110px 1fr;font-size:15px}}
.pg-spec dt{font-weight:600;color:var(--ink-soft)}
.pg-spec dd{font-weight:600}
.pg-mono{font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-feature-settings:"tnum";font-weight:400;letter-spacing:-.01em}
.pg-price{margin-top:26px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 24px}
.pg-price-num{font-size:36px;font-weight:800;line-height:1;letter-spacing:-.045em}
.pg-price-num small{margin-left:2px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.pg-price-note{display:block;margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink-soft)}

/* ---------- 제품소개: 네 모델 공통 ---------- */
.pg-common{margin:40px 0 0;padding:0;list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.pg-common{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.pg-common{grid-template-columns:repeat(4,1fr)}}
.pg-common li{background:var(--paper);padding:22px 20px 26px}
@media (min-width:768px){.pg-common li{padding:26px 24px 30px}}
.pg-common-label{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink-soft)}
.pg-common-key{margin-top:10px;font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.035em}
.pg-common-key.pg-mono{white-space:nowrap;letter-spacing:-.03em}
.pg-common-desc{margin-top:10px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.pg-common-list{margin:12px 0 0;padding:0;list-style:none}
.pg-common-list li{padding:0;background:none;font-size:14px;font-weight:600;line-height:1.5}
.pg-common-list li+li{margin-top:6px}
.pg-common-list li::before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 2px 0;background:var(--ember)}

/* ---------- 제품소개: 구들 짜는 법 3칸 ---------- */
.pg-craft{margin-top:44px;display:grid;gap:40px}
@media (min-width:900px){.pg-craft{grid-template-columns:repeat(3,1fr);gap:28px}}
.pg-craft figure{margin:0}
.pg-craft-photo{overflow:hidden;background:var(--paper-2)}
.pg-craft-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s}
.pg-craft figure:hover img{transform:scale(1.03)}
.pg-craft figcaption{margin-top:18px}
.pg-craft h3{margin-top:8px;font-size:21px;font-weight:800;letter-spacing:-.03em}
.pg-craft p{margin-top:8px;font-size:15px;line-height:1.7;color:var(--ink-soft)}

/* ---------- 제품소개: 옵션표 ---------- */
.pg-opt{margin-top:40px;display:grid;gap:32px 40px}
@media (min-width:640px){.pg-opt{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.pg-opt{grid-template-columns:repeat(4,1fr)}}
.pg-opt h3{border-bottom:1px solid var(--ink);padding-bottom:8px;font-size:15px;font-weight:800}
.pg-opt table{width:100%;border-collapse:collapse;font-size:14px}
.pg-opt td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.pg-opt td:first-child{padding-right:12px;color:var(--ink-soft)}
.pg-opt td:last-child{text-align:right;white-space:nowrap;font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-feature-settings:"tnum"}
.pg-opt .is-plus{color:var(--ink);font-weight:700}
.pg-opt-foot{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;border-top:1px solid var(--line);padding-top:20px}
.pg-opt-foot p{max-width:62ch;font-size:14px;line-height:1.7;color:var(--ink-soft)}

/* ---------- 상담 띠 (어두운 바탕) ---------- */
.pg-cta{background:var(--ink);color:#f6f1e8}
.pg-cta-in{max-width:1240px;margin:0 auto;padding:84px 24px;display:grid;gap:36px}
@media (min-width:768px){.pg-cta-in{padding:112px 40px}}
@media (min-width:1024px){.pg-cta-in{grid-template-columns:1.1fr .9fr;gap:56px;align-items:end}}
.pg-cta .pg-eyebrow{color:#e8b48f}
.pg-cta h2{margin-top:14px;max-width:14ch;font-size:36px;font-weight:800;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
@media (min-width:768px){.pg-cta h2{font-size:52px}}
.pg-cta-text{margin-top:18px;max-width:44ch;font-size:15px;line-height:1.75;color:rgba(246,241,232,.78)}
.pg-cta-actions{display:flex;flex-direction:column;gap:16px}
.pg-cta-actions .pg-btn{padding:17px 26px;font-size:16px}
.pg-cta-links{margin-top:6px;display:flex;flex-wrap:wrap;gap:12px 22px}
.pg-cta-links a{border-bottom:1px solid rgba(246,241,232,.45);padding-bottom:2px;font-size:14px;font-weight:600;color:#f6f1e8;text-decoration:none;transition:border-color .2s,color .2s}
.pg-cta-links a:hover{border-color:#e8b48f;color:#e8b48f}

/* ---------- 시공사례: 사진 현장 6곳 ---------- */
.pg-cases{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:28px 12px}
@media (min-width:900px){.pg-cases{grid-template-columns:repeat(3,1fr);gap:52px 28px}}
.pg-case{margin:0}
.pg-case-photo{overflow:hidden;background:var(--paper-2)}
.pg-case-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s}
.pg-case:hover .pg-case-photo img{transform:scale(1.04)}
.pg-case figcaption{margin-top:12px}
.pg-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.pg-where b{font-size:15px;font-weight:800;letter-spacing:-.025em}
@media (min-width:768px){.pg-where b{font-size:19px}}
.pg-where span{font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-size:12px;color:#a8431f}
.pg-case-line{margin-top:6px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
@media (min-width:768px){.pg-case-line{font-size:15px}}

/* ---------- 시공사례: 지역 카드 16곳 ---------- */
.pg-areas{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:768px){.pg-areas{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.pg-areas{grid-template-columns:repeat(4,1fr)}}
.pg-area{display:flex;flex-direction:column;gap:6px;background:var(--paper);padding:18px 16px 20px}
@media (min-width:768px){.pg-area{padding:22px 22px 24px}}
.pg-area-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pg-area-year{font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:#a8431f}
.pg-area-tag{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line-strong);padding:2px 6px;white-space:nowrap}
.pg-area-name{font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.3}
@media (min-width:768px){.pg-area-name{font-size:19px}}
.pg-area-line{font-size:13px;line-height:1.6;color:var(--ink-soft)}
@media (min-width:768px){.pg-area-line{font-size:14px}}
.pg-area--first{background:var(--paper-2)}

/* ---------- 시공사례: 영천 현장시공 순서 ---------- */
.pg-yc{margin-top:40px;display:grid;gap:28px}
@media (min-width:1024px){.pg-yc{grid-template-columns:.78fr 1.22fr;gap:40px;align-items:start}}
.pg-yc-lead{position:relative;margin:0;overflow:hidden;background:var(--paper-2)}
.pg-yc-lead img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 60%}
@media (min-width:1024px){.pg-yc-lead img{aspect-ratio:1/1}}
.pg-yc-lead figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(to top,rgba(24,13,6,.78),rgba(24,13,6,0));color:#f6f1e8;font-size:13px;font-weight:700}
.pg-yc-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px 12px}
@media (min-width:640px){.pg-yc-steps{grid-template-columns:repeat(3,1fr);gap:28px 16px}}
.pg-yc-steps figure{margin:0}
.pg-yc-steps img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2)}
.pg-yc-steps figcaption{margin-top:9px;display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;line-height:1.45}
@media (min-width:768px){.pg-yc-steps figcaption{font-size:14px}}
.pg-yc-steps figcaption span:first-child{font-family:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;font-size:11px;font-weight:400;color:#a8431f}

/* ---------- 시공사례: 설치한 뒤의 모습 3장 ---------- */
.pg-after{margin-top:40px;display:grid;gap:12px}
@media (min-width:768px){.pg-after{grid-template-columns:1.35fr 1fr 1fr;gap:14px}}
.pg-after figure{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.pg-after img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s}
@media (min-width:768px){.pg-after img{height:380px;aspect-ratio:auto}}
.pg-after figure:hover img{transform:scale(1.04)}
.pg-after figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;background:linear-gradient(to top,rgba(24,13,6,.8),rgba(24,13,6,0));color:#f6f1e8;font-size:13px;font-weight:700}

/* ---------- 줄바꿈과 움직임 ---------- */
.pg-head h1,.pg-sec h2,.pg-cta h2{word-break:keep-all}
@media (prefers-reduced-motion:reduce){.pg-model-media img,.pg-craft-photo img,.pg-case-photo img,.pg-after img{transition:none}}