/* 제품 상세 페이지 (Views/ProductItem.cshtml + Partials/ProductDetail.cshtml).
디자인: 캔버스 "동광보일러 제품 상세 페이지". 콘텐츠 폭 1440, 좌우 여백 64 (메인과 같은 기준).
클래스는 .pdp- 로 시작하고, 헤더는 body.site-product 일 때만 덮어쓴다. */
.pdp {
--pdp-blue: #006dbb;
--pdp-ink: #1c2025;
--pdp-text: #333a42;
--pdp-sub: #5b6470;
--pdp-gray: #4a525c;
--pdp-line: #e3e6ea;
--pdp-line-2: #c6ced6;
--pdp-soft: #f4f5f6;
--pdp-gutter: 64px;
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
color: var(--pdp-ink);
letter-spacing: -0.02em;
word-break: keep-all;
line-height: normal;
padding-bottom: 120px;
}
.pdp *, .pdp *::before, .pdp *::after { box-sizing: border-box; }
.pdp a { color: inherit; text-decoration: none; }
.pdp a:focus-visible, .pdp button:focus-visible { outline: 2px solid var(--pdp-blue); outline-offset: 3px; }
.pdp h1, .pdp h2, .pdp h3, .pdp p, .pdp ul, .pdp ol, .pdp figure, .pdp table { margin: 0; }
.pdp ul, .pdp ol { padding: 0; list-style: none; }
.pdp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pdp .pdp-wrap { box-sizing: content-box; max-width: 1440px; margin: 0 auto; padding-left: var(--pdp-gutter); padding-right: var(--pdp-gutter); }
/* ── 상단 비주얼 (460) ── */
.pdp-visual { position: relative; height: 460px; background: #1c2025 center / cover no-repeat; color: #fff; }
.pdp-visual::before { content: ""; position: absolute; inset: 0; background: rgba(14, 22, 32, .6); }
.pdp .pdp-visual__inner { position: relative; padding-top: 184px; display: flex; flex-direction: column; gap: 18px; }
.pdp-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.78); }
.pdp-crumb svg { width: 12px; height: 12px; stroke-width: 2; }
.pdp-crumb span { color: #fff; }
.pdp .pdp-crumb a:hover { color: #fff; text-decoration: underline; }
.pdp-visual__title { font-size: 52px !important; line-height: 1.25; font-weight: 700; letter-spacing: -0.035em; }
.pdp-products { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(14,22,32,.55); border-top: 1px solid rgba(255,255,255,.14); }
.pdp .pdp-products__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pdp-products__row a { height: 72px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; color: rgba(255,255,255,.72) !important; border-left: 1px solid rgba(255,255,255,.14); }
.pdp-products__row a:last-child { border-right: 1px solid rgba(255,255,255,.14); }
.pdp-products__row a:hover { color: #fff !important; }
.pdp-products__row a.is-on { background: #fff; color: var(--pdp-ink) !important; font-weight: 700; border-color: #fff; }
/* ── 아이템 탭 · 시리즈 탭 ── */
.pdp-tabs { border-bottom: 1px solid #d5dbe1; }
.pdp .pdp-tabs__row { display: flex; flex-wrap: wrap; column-gap: 40px; }
/* 탭이 많으면(노통연관식 7개) 콘텐츠 폭 안에서 두 줄로 */
.pdp-tabs__row a { height: 68px; display: flex; align-items: center; margin-bottom: -1px; border-bottom: 3px solid transparent; font-size: 18px; color: var(--pdp-sub) !important; white-space: nowrap; }
.pdp-tabs__row a:hover { color: var(--pdp-ink) !important; }
.pdp-tabs__row a.is-on { border-bottom-color: var(--pdp-blue); font-weight: 700; color: var(--pdp-ink) !important; }
.pdp .pdp-series { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 40px; }
.pdp-series a { height: 44px; padding: 0 22px; display: flex; align-items: center; border: 1px solid var(--pdp-line-2); font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--pdp-text) !important; }
.pdp-series a:hover { border-color: var(--pdp-ink); }
.pdp-series a.is-on { background: var(--pdp-ink); border-color: var(--pdp-ink); color: #fff !important; font-weight: 600; }
/* ── 제품 헤더 : 사진 | 정보 ── */
.pdp .pdp-head { padding-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.pdp-gallery { grid-column: span 6; display: flex; flex-direction: column; gap: 16px; }
.pdp-gallery__stage { position: relative; flex-grow: 1; min-height: 700px; background: var(--pdp-soft); display: flex; align-items: center; justify-content: center; padding: 40px 72px; }
.pdp-gallery__img { display: none; max-width: 100%; max-height: 620px; width: auto; height: auto; object-fit: contain; }
.pdp-gallery__img.is-on { display: block; }
.pdp-gallery__nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--pdp-line-2); border-radius: 50%; background: #fff; color: var(--pdp-ink); cursor: pointer; }
.pdp-gallery__nav:hover { border-color: var(--pdp-ink); }
.pdp-gallery__nav svg { width: 20px; height: 20px; }
.pdp-gallery__nav--prev { left: 20px; }
.pdp-gallery__nav--next { right: 20px; }
.pdp-gallery__count { position: absolute; right: 24px; bottom: 20px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 14px; color: var(--pdp-sub); letter-spacing: 0; }
.pdp-gallery__count strong { color: var(--pdp-ink); }
.pdp-gallery__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #9aa3ad; font-size: 15px; }
.pdp-gallery__empty svg { width: 56px; height: 56px; stroke-width: 1.2; }
.pdp-gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pdp-gallery__thumbs button { height: 112px; padding: 10px; background: var(--pdp-soft); border: 2px solid var(--pdp-soft); cursor: pointer; }
.pdp-gallery__thumbs button.is-on { border-color: var(--pdp-ink); }
.pdp-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pdp-info { grid-column: 7 / span 6; padding-left: 32px; display: flex; flex-direction: column; gap: 18px; }
.pdp-info__series { font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 16px; font-weight: 600; color: var(--pdp-blue); letter-spacing: 0; }
.pdp .pdp-info__name { font-size: 42px; line-height: 1.25; font-weight: 700; letter-spacing: -0.035em; }
.pdp-info__desc { font-size: 17px; line-height: 1.8; color: var(--pdp-text); }
.pdp-specs { margin-top: 10px; }
.pdp-specs__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; }
.pdp .pdp-specs__head h2 { font-size: 18px; font-weight: 700; }
.pdp .pdp-specs__head a { font-size: 14px; color: var(--pdp-gray); text-decoration: underline; text-underline-offset: 4px; }
.pdp-specs table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--pdp-ink); }
.pdp-specs th { width: 132px; height: 48px; padding: 0 16px; background: var(--pdp-soft); border-bottom: 1px solid var(--pdp-line); text-align: left; font-size: 14px; font-weight: 600; color: var(--pdp-ink); }
.pdp-specs td { height: 48px; padding: 8px 18px; border-bottom: 1px solid var(--pdp-line); font-size: 15px; line-height: 1.5; color: var(--pdp-ink); font-variant-numeric: tabular-nums; }
.pdp-specs td span { color: var(--pdp-sub); }
.pdp-cta { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.pdp-cta__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pdp .pdp-btn { height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--pdp-line-2); border-radius: 8px; background: #fff; color: var(--pdp-ink); font-size: 17px; font-weight: 700; transition: border-color .15s, background .15s; }
.pdp .pdp-btn:hover { border-color: var(--pdp-ink); }
.pdp .pdp-btn svg { width: 20px; height: 20px; }
.pdp .pdp-btn--solid { background: var(--pdp-ink); border-color: var(--pdp-ink); color: #fff; }
.pdp .pdp-btn--solid:hover { background: var(--pdp-blue); border-color: var(--pdp-blue); }
.pdp .pdp-call { height: 92px; padding: 0 28px 0 20px; display: flex; align-items: center; gap: 18px; border-radius: 8px; background: #eaf2f9; border: 1px solid #cfe1f0; color: var(--pdp-ink); transition: background .15s; }
.pdp .pdp-call:hover { background: #dfecf7; }
.pdp-call__icon { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--pdp-blue); color: #fff; }
.pdp-call__icon svg { width: 24px; height: 24px; }
.pdp-call__text { display: flex; flex-direction: column; gap: 5px; }
.pdp-call__text b { font-size: 16px; }
.pdp-call__text span { font-size: 13px; color: var(--pdp-gray); }
.pdp-call__num { margin-left: auto; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 38px; font-weight: 700; letter-spacing: -0.015em; color: var(--pdp-blue); }
.pdp .pdp-back { align-self: flex-start; height: 44px; display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--pdp-gray); }
.pdp .pdp-back:hover { color: var(--pdp-ink); }
.pdp-back svg { width: 16px; height: 16px; }
.pdp .pdp-back-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 28px; }
.pdp .pdp-compare { height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--pdp-blue); }
.pdp .pdp-compare:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ── 핵심 강점(highlights) ──
3無 그림(.pdp-venn-box) = 넓은 화면은 왼쪽 사진 밑(.pdp-head 격자 2행), 좁은 화면은 정보 칸 다음.
숫자 띠(.pdp-stats-box) = 정보 칸, 제품 이름 바로 밑. 제목 한 줄 + 숫자 두 칸.
원 크기 · 글자는 그림 칸 너비(cqw)를 따라 줄어든다. */
.pdp .pdp-head { grid-template-rows: auto 1fr; }
.pdp-head > .pdp-gallery { grid-row: 1; }
.pdp-head > .pdp-info { grid-row: 1 / span 2; }
.pdp-venn-box { grid-column: 1 / span 6; grid-row: 2; align-self: start; margin-top: 16px; padding: 28px 24px 30px; border-radius: 14px; background: linear-gradient(180deg, #eef5fc 0%, #f7fafd 100%); text-align: center; }
.pdp .pdp-venn-box__title { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; }
.pdp-venn-box__title b { color: var(--pdp-blue); font-weight: 900; }
.pdp-venn { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 0.92; margin: 16px auto 0; container-type: inline-size; }
.pdp-venn__c { position: absolute; width: 54%; aspect-ratio: 1; border-radius: 50%; border: 1.2cqw solid var(--pdp-blue); background: rgba(0, 109, 187, .06);
display: flex; flex-direction: column; align-items: center; gap: 2cqw; color: var(--pdp-ink); }
.pdp-venn__c--1 { left: 23%; top: 0; justify-content: flex-start; padding-top: 10%; }
.pdp-venn__c--2 { left: 0; bottom: 0; justify-content: flex-end; padding-bottom: 13%; padding-right: 9%; padding-left: 4%; }
.pdp-venn__c--3 { right: 0; bottom: 0; justify-content: flex-end; padding-bottom: 13%; padding-left: 9%; padding-right: 4%; }
.pdp .pdp-venn__icon { width: 14cqw; height: 14cqw; stroke: var(--pdp-blue); stroke-width: 2; }
.pdp-venn__label { font-size: 3.8cqw; font-weight: 700; letter-spacing: -0.04em; line-height: 1.25; }
.pdp-venn__label b { color: var(--pdp-blue); font-weight: 900; font-size: 1.15em; }
.pdp-venn__badge { position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); width: 24%; aspect-ratio: 1; border-radius: 50%;
background: var(--pdp-blue); color: #fff; box-shadow: 0 0 0 1.2cqw #fff, 0 8px 24px rgba(0, 109, 187, .3);
display: flex; align-items: center; justify-content: center; font-size: 6.6cqw; font-weight: 900; letter-spacing: -0.05em; }
.pdp-stats-box { padding: 18px 22px 20px; border-radius: 14px; background: var(--pdp-blue); color: #fff; text-align: center; }
.pdp .pdp-stats-box__title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; opacity: .92; }
.pdp .pdp-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
.pdp-stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pdp-stats li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .3); }
.pdp-stats strong { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pdp-stats span { font-size: 14px; font-weight: 600; opacity: .9; }
/* ── 공통 구역 ── */
.pdp .pdp-section { padding-top: 120px; }
.pdp .pdp-h { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 2px solid var(--pdp-ink); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; }
/* 작동원리 및 특징 : 3열 목록 */
.pdp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdp-features li { padding: 32px 36px 40px; border-bottom: 1px solid var(--pdp-line-2); border-left: 1px solid var(--pdp-line); display: flex; flex-direction: column; gap: 12px; }
.pdp-features li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.pdp-features li:nth-child(3n) { padding-right: 0; }
.pdp-features__icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 4px; }
.pdp .pdp-features h3 { font-size: 20px; font-weight: 700; line-height: 1.45; }
.pdp-features p { font-size: 15px; line-height: 1.75; color: var(--pdp-sub); }
/* 기술 소개 : 글 | 사진 */
.pdp .pdp-tech { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.pdp-tech__text { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; }
.pdp-tech--text .pdp-tech__text { grid-column: span 8; }
.pdp-tech__text .pdp-h { margin-bottom: 0; }
.pdp-tech__text > p { font-size: 17px; line-height: 1.85; color: var(--pdp-text); }
.pdp-tech__text ol { margin-top: 8px; border-top: 1px solid var(--pdp-line-2); }
.pdp-tech__text li { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--pdp-line-2); font-size: 16px; font-weight: 500; line-height: 1.5; }
.pdp-tech__text li span { width: 32px; flex-shrink: 0; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 15px; font-weight: 700; color: var(--pdp-blue); }
.pdp-tech__pics { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 24px; }
.pdp-tech__pics figure { background: var(--pdp-soft); padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pdp-tech__pics img { max-width: 100%; height: auto; }
.pdp-tech__pics figcaption { font-size: 14px; color: var(--pdp-sub); }
/* 표준 사양 */
.pdp-spec__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 18px; border-bottom: 2px solid var(--pdp-ink); }
.pdp .pdp-spec__head h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.pdp-spec__head span { font-size: 14px; color: var(--pdp-sub); }
.pdp .pdp-spec h3 { margin: 48px 0 14px; font-size: 19px; font-weight: 700; }
.pdp-spec__scroll { overflow-x: auto; }
.pdp-spec__scroll:focus-visible { outline: 2px solid var(--pdp-blue); outline-offset: 3px; }
.pdp-spec table { width: 100%; min-width: 900px; border-collapse: collapse; border-top: 2px solid var(--pdp-ink); font-size: 14px; line-height: 1.45; color: var(--pdp-text); }
.pdp-spec th, .pdp-spec td { height: 44px; padding: 6px 8px; border: 1px solid var(--pdp-line); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
.pdp-spec th { background: var(--pdp-soft); color: var(--pdp-ink); font-weight: 600; }
.pdp-spec tr:first-child th { background: var(--pdp-ink); color: #fff; border-color: #3a4048; font-weight: 500; }
.pdp-spec tr > :first-child { border-left: 0; }
.pdp-spec tr > :last-child { border-right: 0; }
.pdp-spec table p { margin: 0; }
.pdp-spec__note { margin-top: 12px !important; font-size: 14px; line-height: 1.6; color: var(--pdp-sub); }
/* 상담 · 견적 문의 */
.pdp .pdp-inquiry { padding-top: 120px; }
.pdp-inquiry__box { position: relative; min-height: 380px; overflow: hidden; border-radius: 8px; background: #16202b url(/images/main/main_visual01.webp) center 55% / cover no-repeat; color: #fff; padding: 56px 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.pdp-inquiry__box::before { content: ""; position: absolute; inset: 0; background: rgba(12, 20, 30, .78); }
.pdp-inquiry__text { position: relative; grid-column: span 5; display: flex; flex-direction: column; gap: 16px; }
.pdp .pdp-inquiry__text h2 { font-size: 38px; line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; }
.pdp-inquiry__text p { font-size: 17px; line-height: 1.75; color: #cdd6df; }
.pdp-inquiry__acts { position: relative; grid-column: 7 / span 6; background: #fff; border-radius: 8px; overflow: hidden; color: var(--pdp-ink); display: flex; flex-direction: column; }
.pdp-inquiry__acts a { height: 80px; padding: 0 28px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--pdp-line); transition: background .15s; }
.pdp-inquiry__acts a:last-child { border-bottom: 0; }
.pdp-inquiry__acts a:hover { background: var(--pdp-soft); }
.pdp-inquiry__acts a > svg { width: 26px; height: 26px; stroke-width: 1.6; color: var(--pdp-blue); }
.pdp-inquiry__acts span { display: flex; flex-direction: column; gap: 3px; }
.pdp-inquiry__acts b { font-size: 18px; }
.pdp-inquiry__acts small { font-size: 13px; color: var(--pdp-sub); }
.pdp-inquiry__acts em { margin-left: auto; font-style: normal; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 13px; font-weight: 600; color: var(--pdp-sub); }
.pdp-inquiry__acts strong { margin-left: auto; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.pdp .pdp-inquiry__acts a.is-primary { height: 88px; background: var(--pdp-blue); color: #fff; border-bottom: 0; }
.pdp .pdp-inquiry__acts a.is-primary:hover { background: #005a9b; }
.pdp-inquiry__acts a.is-primary > svg { color: #fff; }
.pdp-inquiry__acts a.is-primary b { font-size: 19px; }
.pdp-inquiry__acts a.is-primary small { color: #d9ebf7; }
.pdp-inquiry__acts .pdp-inquiry__go { margin-left: auto; width: 22px; height: 22px; }
/* ── 1300 이하: 헤더 메뉴가 햄버거로 ── */
@media (max-width: 1300px) {
.pdp .pdp-products__row { display: flex; overflow-x: auto; scrollbar-width: none; }
.pdp-products__row::-webkit-scrollbar { display: none; }
.pdp-products__row a { flex: 0 0 auto; padding: 0 24px; }
}
/* ── 태블릿 ── */
@media (max-width: 900px) {
.pdp { --pdp-gutter: 32px; padding-bottom: 88px; }
.pdp-visual { height: 380px; }
.pdp .pdp-visual__inner { padding-top: 128px; }
.pdp-visual__title { font-size: 36px !important; }
.pdp-products__row a { height: 56px; font-size: 15px; }
.pdp .pdp-tabs__row { flex-wrap: nowrap; column-gap: 28px; overflow-x: auto; scrollbar-width: none; }
.pdp-tabs__row a { height: 60px; font-size: 16px; }
.pdp .pdp-head { grid-template-columns: 1fr; row-gap: 40px; padding-top: 32px; }
.pdp-gallery, .pdp-info { grid-column: auto; padding-left: 0; }
.pdp .pdp-head { grid-template-rows: none; }
.pdp-head > .pdp-gallery, .pdp-head > .pdp-info, .pdp-venn-box { grid-row: auto; grid-column: auto; margin-top: 0; }
.pdp-gallery__stage { min-height: 440px; padding: 32px 64px; }
.pdp-gallery__img { max-height: 380px; }
.pdp-gallery__thumbs button { height: 84px; }
.pdp .pdp-section, .pdp .pdp-inquiry { padding-top: 80px; }
.pdp-features { grid-template-columns: 1fr; }
.pdp-features li, .pdp-features li:nth-child(3n+1), .pdp-features li:nth-child(3n) { padding: 24px 0; border-left: 0; }
.pdp .pdp-tech { grid-template-columns: 1fr; row-gap: 32px; }
.pdp-tech__text, .pdp-tech--text .pdp-tech__text, .pdp-tech__pics { grid-column: auto; }
.pdp-inquiry__box { grid-template-columns: 1fr; row-gap: 32px; padding: 40px 32px; }
.pdp-inquiry__text, .pdp-inquiry__acts { grid-column: auto; }
}
/* ── 폰 ── */
@media (max-width: 480px) {
.pdp { --pdp-gutter: 20px; }
.pdp-visual { height: 320px; }
.pdp .pdp-visual__inner { padding-top: 104px; }
.pdp-visual__title { font-size: 28px !important; }
.pdp .pdp-series { padding-top: 24px; }
.pdp-series a { height: 40px; padding: 0 14px; font-size: 14px; }
.pdp-gallery__stage { min-height: 320px; padding: 24px 52px; }
.pdp-gallery__img { max-height: 280px; }
.pdp-gallery__nav { width: 40px; height: 40px; margin-top: -20px; }
.pdp-gallery__nav--prev { left: 8px; }
.pdp-gallery__nav--next { right: 8px; }
.pdp-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pdp-gallery__thumbs button { height: 64px; padding: 6px; }
.pdp .pdp-info__name { font-size: 28px; }
.pdp-info__desc { font-size: 15px; }
.pdp-venn-box { padding: 22px 14px 24px; }
.pdp .pdp-venn-box__title { font-size: 21px; }
.pdp-stats-box { padding: 16px 14px 18px; }
.pdp-stats strong { font-size: 30px; }
.pdp-stats span { font-size: 13px; }
.pdp-specs th { width: 96px; padding: 0 12px; font-size: 13px; }
.pdp-specs td { padding: 8px 12px; font-size: 14px; }
.pdp .pdp-btn { height: 56px; font-size: 15px; }
.pdp .pdp-call { height: auto; padding: 16px; flex-wrap: wrap; gap: 12px; }
.pdp-call__num { margin-left: 0; width: 100%; font-size: 30px; }
.pdp .pdp-h, .pdp .pdp-spec__head h2 { font-size: 24px; }
.pdp .pdp-inquiry__text h2 { font-size: 28px; }
.pdp-inquiry__box { padding: 32px 20px; }
.pdp-inquiry__acts a { padding: 0 18px; gap: 12px; }
.pdp-inquiry__acts strong { font-size: 22px; }
}
/* ── 제품 화면 틀: 왼쪽 제품 목록 | 본문 (Views/_ProductLayout.cshtml, Partials/ProductSide.cshtml) ──
디자인: 캔버스 "방향 2 · 왼쪽 제품 목록". 1200 이하에서는 목록이 "제품 바꾸기" 단추 + 아래에서 올라오는 대화상자로. */
.pdx-top { height: 96px; background: #16202b; }
.pdp .pdx { box-sizing: content-box; max-width: 1440px; margin: 0 auto; padding: 0 var(--pdp-gutter); display: grid; grid-template-columns: 264px minmax(0, 1fr); column-gap: 48px; }
.pdx-side { padding: 32px 24px 0 0; border-right: 1px solid var(--pdp-line); }
.pdx-side__sticky { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-bottom: 32px; scrollbar-width: thin; }
.pdx-main { min-width: 0; padding-top: 28px; container: pdx / inline-size; }
.pdx-main:focus { outline: none; }
.pdx-main .pdp-wrap { max-width: none; padding-left: 0; padding-right: 0; }
/* 화면 아래에 붙는 비교 막대는 본문 칸이 아니라 화면 폭을 쓰므로 여백을 되돌린다 */
.pdx-main .pdl-cmpbar .pdp-wrap { max-width: 1440px; padding-left: var(--pdp-gutter); padding-right: var(--pdp-gutter); }
.pdx-main .pdp-head { padding-top: 24px; align-items: start; }
.pdx-main .pdp-gallery__stage { flex-grow: 0; min-height: 0; height: clamp(300px, 55cqi, 520px); padding: 28px 56px; }
.pdx-main .pdp-gallery__img { max-height: 100%; }
/* 현재 위치 */
.pdx-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--pdp-sub); }
.pdx-crumb li + li::before { content: "\203A"; margin-right: 8px; color: #8a939d; }
.pdx-crumb [aria-current] { color: var(--pdp-ink); font-weight: 500; }
.pdp .pdx-crumb a:hover { color: var(--pdp-blue); text-decoration: underline; text-underline-offset: 3px; }
/* 왼쪽 목록: 전체 제품(링크) · 제품군(이름 = 목록 링크, 오른쪽 화살표 단추 = 펼치기) › 묶음(소제목 + 개수) › 제품(한 줄, 들여 쓰고 세로 안내선) */
.pdp .pdx-side__title { margin: 0; padding: 0 10px 12px; font-size: 20px; font-weight: 700; }
.pdx-side__row { min-height: 48px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--pdp-line); font-size: 15px; font-weight: 500; color: var(--pdp-ink); cursor: pointer; list-style: none; }
.pdx-side__n { flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--pdp-sub); }
.pdp .pdx-chev { width: 16px; height: 16px; stroke-width: 2; transition: transform .2s; }
.pdx-fam__head { display: flex; align-items: stretch; border-bottom: 1px solid var(--pdp-line); }
.pdx-fam__head .pdx-fam__link { flex: 1; min-width: 0; border-bottom: 0; }
/* 제품 하나뿐인 제품군: 화살표 칸(44px)만큼 비워 개수를 다른 줄과 맞춘다 */
.pdx-fam.is-single .pdx-fam__link { padding-right: 54px; }
.pdx-sheet .pdx-fam.is-single .pdx-fam__link { padding-right: 62px; }
.pdx-fam__toggle { flex: none; width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--pdp-sub); cursor: pointer; }
.pdx-fam__toggle:hover { background: var(--pdp-soft); color: var(--pdp-ink); }
.pdx-fam__toggle:focus-visible { outline: 2px solid var(--pdp-blue); outline-offset: -2px; }
.pdx-fam__toggle[aria-expanded="true"] .pdx-chev { transform: rotate(180deg); }
.pdx-fam.is-open > .pdx-fam__head { border-bottom: 0; }
.pdx-fam.is-open .pdx-fam__link { font-weight: 700; }
/* 제품군 화면을 보고 있으면 이름 줄 전체를 칠한다(화살표 단추 포함) */
.pdp .pdx-fam__head.is-on { background: var(--pdp-ink); }
.pdp .pdx-fam__head.is-on .pdx-fam__link, .pdp .pdx-fam__head.is-on .pdx-fam__link:hover { background: none; color: #fff; font-weight: 700; }
.pdx-fam__head.is-on .pdx-side__n { color: #cdd6df; }
.pdx-fam__head.is-on .pdx-fam__toggle { color: #fff; }
.pdx-fam__head.is-on .pdx-fam__toggle:hover { background: rgba(255, 255, 255, .12); }
/* 칠한 줄 위의 초점 표시는 흰색(파랑은 진한 바탕에서 3:1 남짓이라 잘 안 보인다) */
.pdp .pdx-fam__head.is-on a:focus-visible, .pdx-fam__head.is-on .pdx-fam__toggle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* 맨 아래 "제품 비교하기": 제품군 줄과 한 칸 띄우고 아이콘 · 파란 글자로 다른 종류의 줄임을 보인다. 담은 수는 동그라미로 */
.pdx-side__cmp { margin-top: 14px; }
.pdp .pdx-side__cmp .pdx-side__row, .pdp .pdx-side__cmp .pdx-side__row:hover, .pdp .pdx-side__cmp .pdx-side__row:focus { border-top: 1px solid var(--pdp-line); color: var(--pdp-blue); font-weight: 700; }
.pdx-side__cmp-label { display: inline-flex; align-items: center; gap: 8px; }
.pdp .pdx-side__cmp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdx-side__cmp-n { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--pdp-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.pdx-side__cmp-n[hidden] { display: none; }
.pdx-fam__body { padding: 2px 0 16px; border-bottom: 1px solid var(--pdp-line); display: flex; flex-direction: column; gap: 6px; }
.pdx-fam__body[hidden] { display: none; }
.pdx-tree__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 10px 6px; font-size: 14px; font-weight: 700; color: var(--pdp-ink); }
.pdx-tree__label small { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--pdp-sub); }
.pdp .pdx-tree { margin-left: 16px; padding: 2px 0; border-left: 1px solid var(--pdp-line-2); display: flex; flex-direction: column; gap: 2px; }
.pdp .pdx-tree.is-flat { margin-left: 10px; }
.pdx-tree__item { min-height: 44px; padding: 6px 10px 6px 14px; display: flex; align-items: center; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--pdp-ink); }
.pdx-tree__item.has-sub { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.pdx-tree__sub { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--pdp-sub); }
.pdx-tree__item.is-on .pdx-tree__sub { color: #cdd6df; }
.pdp .pdx-side__row:hover, .pdp .pdx-tree__item:hover { background: var(--pdp-soft); }
/* 지금 보는 곳: 칠한 줄 + aria-current */
.pdp .pdx-side__row.is-on, .pdp .pdx-tree__item.is-on { background: var(--pdp-ink); color: #fff; font-weight: 700; }
.is-on .pdx-side__n { color: #cdd6df; }
/* 좁은 화면: 본문 위 단추 */
.pdx-pick { display: none; margin-top: 16px; }
.pdx-pick__btn { width: 100%; min-height: 60px; padding: 8px 14px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #8a939d; font: inherit; color: var(--pdp-ink); letter-spacing: -0.02em; text-align: left; cursor: pointer; }
.pdx-pick__btn:hover { border-color: var(--pdp-ink); }
.pdx-pick__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pdx-pick__path { font-size: 13px; color: var(--pdp-gray); }
.pdx-pick__here { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.pdx-pick__act { flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--pdp-blue); }
.pdp .pdx-pick__act svg { width: 16px; height: 16px; stroke-width: 2; }
/* 아래에서 올라오는 대화상자 (