/* 제품 목록 · 비교 (Partials/ProductList.cshtml, Partials/ProductCompare.cshtml).
   디자인: 캔버스 "① 제품소개 목록", "② 모델 비교하기".
   product.css 의 .pdp 토큰 · 상단 비주얼(pdp-visual) · 제품 헤더를 그대로 쓰고, 목록은 pdl-, 비교는 pdc- 로 시작한다. */

.pdp.pdl, .pdp.pdc { padding-bottom: 0; }

/* ── 목록 머리 ── */
.pdp .pdl-head { padding-top: 88px; display: flex; flex-direction: column; gap: 12px; }
.pdp .pdl-head h1 { font-size: 44px; line-height: 1.25; font-weight: 700; letter-spacing: -0.035em; }
.pdp .pdl-head p { font-size: 18px; line-height: 1.7; color: var(--pdp-gray); }

/* ── 검색 · 용도 · 결과 수 ── */
.pdp .pdl-bar { margin-top: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.pdp .pdl-search { position: relative; width: 480px; max-width: 100%; margin: 0; }
.pdp .pdl-search > svg { position: absolute; left: 20px; top: 16px; width: 20px; height: 20px; stroke-width: 2; color: var(--pdp-gray); pointer-events: none; }
.pdl-search input { width: 100%; height: 52px; padding: 0 52px; border: 1px solid #8a939d; border-radius: 26px; background: #fff; font: inherit; font-size: 16px; letter-spacing: inherit; color: var(--pdp-ink); }
.pdl-search input::placeholder { color: var(--pdp-sub); }
.pdl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pdl-search input:focus-visible { outline: 2px solid var(--pdp-blue); outline-offset: 2px; }
.pdp .pdl-search__clear { position: absolute; right: 6px; top: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; color: var(--pdp-gray); }
.pdp .pdl-search__clear:hover { background: var(--pdp-soft); }
.pdl-use { display: flex; gap: 8px; }
.pdx-main .pdl-search { width: 320px; }
.pdp .pdl-use a { height: 52px; padding: 0 24px; display: flex; align-items: center; border: 1px solid #8a939d; border-radius: 26px; background: #fff; font-size: 16px; font-weight: 600; color: var(--pdp-text); }
.pdp .pdl-use a:hover { border-color: var(--pdp-ink); color: var(--pdp-ink); }
.pdp .pdl-use a.is-on { background: var(--pdp-ink); border-color: var(--pdp-ink); color: #fff; }
.pdp .pdl-count { margin-left: auto; font-size: 16px; color: var(--pdp-gray); }
.pdl-count strong { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 700; color: var(--pdp-ink); }

/* ── 카드 ── */
.pdp .pdl-list { margin-top: 48px; }
.pdp .pdl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; }
/* 왼쪽 제품 목록 옆(_ProductLayout)에서는 세 칸. 좁은 화면 규칙(아래 @media)이 이어서 줄인다 */
.pdx-main .pdl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdl-card { display: flex; flex-direction: column; }
.pdp .pdl-card__pic { height: 240px; padding: 28px; display: flex; align-items: center; justify-content: center; background: var(--pdp-soft); }
.pdl-card__pic img { max-width: 100%; max-height: 184px; width: auto; height: auto; object-fit: contain; }
.pdl-card__nopic { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; color: var(--pdp-sub); }
.pdp .pdl-card__nopic svg { width: 32px; height: 32px; stroke-width: 1.5; }
.pdl-card__body { padding-top: 20px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.pdl-card__meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pdp-sub); }
.pdl-badge { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.pdl-badge--hot { background: #fdeee4; color: #9a4312; }
.pdl-badge--steam { background: #e6f0f8; color: #0a4f8f; }
.pdl-badge--electric { background: #e3f4f1; color: #0b5d52; }
.pdl-card__title { display: flex; flex-direction: column; gap: 4px; }
.pdp .pdl-card__title :is(h2, h3) { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.pdp .pdl-card__title :is(h2, h3) a:hover { color: var(--pdp-blue); }
.pdp .pdl-card__title p { font-size: 16px; line-height: 1.5; color: var(--pdp-gray); }
.pdp .pdl-card__specs { margin: 6px 0 0; padding: 14px 0; border-top: 1px solid var(--pdp-line); border-bottom: 1px solid var(--pdp-line); display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }
.pdl-card__specs div { display: flex; justify-content: space-between; gap: 12px; }
.pdl-card__specs dt { font-weight: 400; color: var(--pdp-sub); white-space: nowrap; }
.pdl-card__specs dd { margin: 0; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 600; letter-spacing: 0; text-align: right; }
.pdl-card__specs dd small { display: block; font-size: 13px; font-weight: 400; color: var(--pdp-sub); }
.pdl-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.pdl-check { height: 44px; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 400; color: var(--pdp-ink); cursor: pointer; }
.pdl-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--pdp-ink); cursor: pointer; }
/* 3개가 차서 더 못 담는 칸 (js 가 is-off · aria-disabled). 누르면 안내 토스트가 뜬다 */
.pdl-check.is-off { color: #8a939d; cursor: not-allowed; }
.pdl-check.is-off input { opacity: .4; cursor: not-allowed; }
.pdp .pdl-card__more { height: 44px; display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 600; }
.pdp .pdl-card__more:hover { color: var(--pdp-blue); }
.pdp .pdl-card__more svg { width: 16px; height: 16px; stroke-width: 2; }

/* 결과 없음 */
.pdl-empty { min-height: 380px; border-top: 1px solid var(--pdp-line); border-bottom: 1px solid var(--pdp-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; font-size: 16px; line-height: 1.7; color: var(--pdp-gray); }
.pdp .pdl-empty__title { font-size: 24px; font-weight: 700; color: var(--pdp-ink); }
.pdp .pdl-empty__reset { margin-top: 8px; height: 48px; padding: 0 24px; display: flex; align-items: center; border: 1px solid var(--pdp-ink); border-radius: 24px; font-size: 15px; font-weight: 700; color: var(--pdp-ink); }

/* 쪽 번호 */
.pdp .pdl-pager { margin-top: 72px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.pdp .pdl-pager a, .pdl-pager span { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 16px; font-weight: 600; color: var(--pdp-text); }
.pdp .pdl-pager__num:hover { background: var(--pdp-soft); }
.pdp .pdl-pager__num.is-on { background: var(--pdp-ink); color: #fff; }
.pdp .pdl-pager__arrow { border: 1px solid #8a939d; color: var(--pdp-ink); }
.pdp .pdl-pager__arrow:hover { border-color: var(--pdp-ink); }
.pdp .pdl-pager__arrow.is-off { border-color: var(--pdp-line); color: var(--pdp-line-2); }

/* 상담 띠 */
.pdp .pdl-inquiry { padding-top: 120px; padding-bottom: 120px; }
.pdl-inquiry__box { position: relative; min-height: 320px; overflow: hidden; border-radius: 8px; background: #16202b url(/images/main/main_visual01.webp) center 55% / cover no-repeat; color: #fff; padding: 48px 64px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.pdl-inquiry__box::before { content: ""; position: absolute; inset: 0; background: rgba(12, 20, 30, .78); }
.pdl-inquiry__text, .pdl-inquiry__acts { position: relative; }
.pdl-inquiry__text { display: flex; flex-direction: column; gap: 14px; }
.pdp .pdl-inquiry__text h2 { font-size: 36px; line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; }
.pdp .pdl-inquiry__text p { font-size: 17px; line-height: 1.75; color: #cdd6df; }
.pdl-inquiry__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pdp .pdl-inquiry__acts a { height: 64px; display: flex; align-items: center; gap: 10px; border-radius: 8px; font-size: 17px; color: #fff; }
.pdp .pdl-inquiry__acts svg { width: 20px; height: 20px; }
.pdp .pdl-inquiry__main { padding: 0 32px; background: var(--pdp-blue); font-weight: 700; }
.pdp .pdl-inquiry__main:hover { background: #005a9b; }
.pdp .pdl-inquiry__sub { padding: 0 28px; border: 1px solid rgba(255,255,255,.5); font-weight: 600; }
.pdp .pdl-inquiry__sub:hover { border-color: #fff; }
.pdp .pdl-inquiry__tel { padding: 0 12px 0 20px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 30px; font-weight: 700; }

/* ── 비교 막대 (화면 아래 고정, 삼성 방식) ── */
.pdl-cmpbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; border-top: 1px solid var(--pdp-line-2); box-shadow: 0 -12px 32px rgba(14, 22, 32, .12); }
.pdl-cmpbar[hidden] { display: none !important; }
/* 접히면 손잡이만: 막대의 윗선(1px)이 화면 맨 아래에 남지 않게 테두리도 없앤다 */
.pdl-cmpbar.is-closed { border-top: 0; box-shadow: none; }
.pdl-cmpbar.is-closed .pdl-cmpbar__body { display: none; }
.pdl-cmpbar__handle { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); height: 41px; padding: 0 16px 0 22px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--pdp-line-2); border-bottom: 0; border-radius: 10px 10px 0 0; background: #fff; font: inherit; font-size: 15px; font-weight: 700; color: var(--pdp-ink); cursor: pointer; }
.pdp .pdl-cmpbar__handle svg { width: 16px; height: 16px; stroke-width: 2; transition: transform .2s; }
.pdl-cmpbar__num[hidden] { display: none; }
.pdl-cmpbar__num { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--pdp-ink); color: #fff; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.pdl-cmpbar.is-closed .pdl-cmpbar__handle svg { transform: rotate(180deg); }
.pdp .pdl-cmpbar__body .pdp-wrap { padding-top: 20px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.pdl-cmpbar__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pdp .pdl-cmpbar__head p { font-size: 17px; font-weight: 700; }
.pdl-cmpbar__head b { font-family: 'Pretendard Variable', Pretendard, sans-serif; color: var(--pdp-blue); }
.pdl-cmpbar__head p span { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 500; color: var(--pdp-sub); }
.pdl-cmpbar__acts { display: flex; align-items: center; gap: 24px; }
.pdl-cmpbar__clear { height: 44px; padding: 0; display: flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--pdp-text); cursor: pointer; }
.pdl-cmpbar__clear span { text-decoration: underline; text-underline-offset: 4px; }
.pdp .pdl-cmpbar__clear svg { width: 16px; height: 16px; stroke-width: 2; }
.pdp .pdl-cmpbar__go { width: 168px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 26px; background: var(--pdp-ink); color: #fff; font-size: 16px; font-weight: 700; }
.pdp .pdl-cmpbar__go:hover { background: #333a42; color: #fff; }
.pdp .pdl-cmpbar__go[aria-disabled="true"] { background: #aab3bd; pointer-events: none; }
.pdl-cmpbar__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pdl-slot { position: relative; height: 112px; padding: 0 52px 0 14px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--pdp-line-2); border-radius: 8px; }
.pdl-slot__pic { width: 96px; height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--pdp-soft); }
.pdl-slot__pic img { max-width: 80px; max-height: 70px; object-fit: contain; }
.pdp .pdl-slot__pic svg { width: 24px; height: 24px; stroke-width: 1.5; color: var(--pdp-sub); }
.pdl-slot__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pdl-slot__text b { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 18px; letter-spacing: -0.01em; }
.pdl-slot__text span { font-size: 14px; color: var(--pdp-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdl-slot__text small { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--pdp-text); }
.pdl-slot__x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 22px; background: none; color: var(--pdp-gray); cursor: pointer; }
.pdl-slot__x:hover { background: var(--pdp-soft); }
.pdp .pdl-slot__x svg { width: 18px; height: 18px; }
.pdl-slot--empty { flex-direction: column; justify-content: center; gap: 10px; padding: 0 12px; border: 1.5px dashed var(--pdp-line-2); font-size: 14px; color: var(--pdp-sub); text-align: center; }
.pdp .pdl-slot--empty svg { width: 26px; height: 26px; stroke-width: 1.5; color: #8a939d; }
/* 토스트: 비교 막대(와 손잡이) 위 가운데에 잠깐 */
.pdl-toast { position: fixed; left: 50%; bottom: calc(var(--cmpbar-h, 0px) + 64px); z-index: 950; max-width: calc(100% - 40px); padding: 14px 22px 14px 18px; display: flex; align-items: center; gap: 10px; border-radius: 8px; background: rgba(28, 32, 37, .94); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.5; box-shadow: 0 10px 30px rgba(14, 22, 32, .25); pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.pdl-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }
.pdp .pdl-toast svg { width: 20px; height: 20px; stroke-width: 2; }

/* 막대에 가려지지 않게: 페이지 끝에 막대 높이만큼 여유, 오른쪽 아래 버튼(문의하기 · TOP)은 막대 위로 (--cmpbar-h 는 js 가 잰다) */
body.has-cmpbar { padding-bottom: var(--cmpbar-h, 0px); }
body.has-cmpbar .fl-dock { bottom: calc(var(--cmpbar-h, 0px) + 24px); }

/* ── 비교 화면 ── */
.pdc-top { height: 96px; background: #16202b; }
.pdc-title { padding: 88px var(--pdp-gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pdc-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pdp-sub); }
.pdp .pdc-crumb a:hover { color: var(--pdp-ink); text-decoration: underline; }
.pdc-crumb .is-here { color: var(--pdp-ink); }
.pdp .pdc-title h1 { font-size: 52px; line-height: 1.2; font-weight: 700; letter-spacing: -0.04em; }
.pdp .pdc-title__lead { font-size: 18px; line-height: 1.7; color: var(--pdp-gray); }
.pdc-title__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 17px; }
.pdp .pdc-title__links a, .pdp .pdc-more { color: var(--pdp-blue); }
.pdp .pdc-title__links a:hover, .pdp .pdc-more:hover { text-decoration: underline; text-underline-offset: 4px; }

.pdc-heroes, .pdc-specs, .pdc-cta { width: 1200px; max-width: calc(100% - 2 * var(--pdp-gutter)); margin-left: auto; margin-right: auto; }
/* 고르기 줄: 화면 위에 붙는다. 붙으면(is-stuck, js) 아래에 선과 그림자 */
.pdc-picks__sentinel { height: 52px; }
.pdc-picks { position: sticky; top: 0; z-index: 50; padding: 12px 0; background: #fff; transition: box-shadow .2s; }
.pdc-picks.is-stuck { box-shadow: 0 1px 0 var(--pdp-line), 0 10px 24px rgba(14, 22, 32, .08); }
.pdc-picks__row { width: 1200px; max-width: calc(100% - 2 * var(--pdp-gutter)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.pdc-heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.pdc-hero { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
/* 칸마다 두 줄: 제품 → 모델(용량) */
.pdc-pick-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pdc-pick { position: relative; display: block; min-width: 0; margin: 0; }
.pdc-pick--model select { font-weight: 500; }
.pdc-pick select:disabled { background: var(--pdp-soft); color: var(--pdp-sub); cursor: default; }
.pdc-pick select { width: 100%; height: 52px; padding: 0 44px 0 18px; border: 1px solid #8a939d; border-radius: 12px; background: #fff; appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--pdp-ink); text-overflow: ellipsis; cursor: pointer; }
.pdc-pick select:hover { border-color: var(--pdp-ink); }
.pdc-pick select:focus-visible { outline: 2px solid var(--pdp-blue); outline-offset: 3px; }
.pdp .pdc-pick svg { position: absolute; right: 18px; top: 17px; width: 18px; height: 18px; stroke-width: 2; pointer-events: none; }
.pdc-hero__pic { margin-top: 24px; width: 100%; height: 340px; display: flex; align-items: flex-end; justify-content: center; }
.pdc-hero__pic img { max-width: min(280px, 100%); max-height: 320px; width: auto; height: auto; object-fit: contain; }
.pdc-hero__nopic { width: 240px; max-width: 100%; height: 300px; background: var(--pdp-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--pdp-sub); }
.pdp .pdc-hero__nopic svg { width: 44px; height: 44px; stroke-width: 1.2; }
.pdc-hero__add { width: 240px; max-width: 100%; height: 300px; border: 1.5px dashed var(--pdp-line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--pdp-sub); }
.pdp .pdc-hero__add svg { width: 32px; height: 32px; stroke-width: 1.5; color: #8a939d; }
.pdc-hero .pdl-badge { margin-top: 32px; }
.pdp .pdc-hero__code { margin-top: 12px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.pdp .pdc-hero__name { margin-top: 8px; font-size: 16px; color: var(--pdp-text); }
.pdp .pdc-hero__range { margin-top: 4px; font-size: 14px; color: var(--pdp-sub); }
.pdp .pdc-hero__cap { margin-top: 14px; font-size: 20px; font-weight: 600; }

/* 크기: 같은 축척의 정면(W × H) 상자와 키 1.7 m 사람 */
.pdc-fig { height: 156px; display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.pdp .pdc-fig__man { flex-shrink: 0; fill: #c6ced6; stroke: none; }
.pdc-fig__box { flex-shrink: 0; box-sizing: border-box; border: 1.5px solid var(--pdp-ink); border-radius: 3px; background: var(--pdp-soft); }
.pdc-hero__acts { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
.pdp .pdc-btn { height: 44px; padding: 0 22px; display: inline-flex; align-items: center; border: 0; border-radius: 22px; background: var(--pdp-blue); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pdp .pdc-btn:hover { background: #005a9b; color: #fff; }
.pdp .pdc-btn--lg { height: 52px; padding: 0 28px; border-radius: 26px; font-size: 16px; }
.pdp .pdc-more { font-size: 15px; font-weight: 600; }
.pdc-apply { grid-column: 1 / -1; justify-self: center; margin-top: 32px; }

/* 띠 제목 아래 안내 (온수 · 증기를 섞었을 때) · 맨 아래 값 안내 */
.pdp .pdc-band__note { margin: -2px 0 10px; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--pdp-gray); }
.pdp .pdc-band__note svg { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2; color: var(--pdp-blue); }
.pdp .pdc-foot { margin-top: 16px; font-size: 14px; color: var(--pdp-sub); }

/* 제품을 바꾸는 동안 (새 조합을 받아 오는 사이) */
.pdc [data-swap] { transition: opacity .15s; }
.pdc.is-loading [data-swap] { opacity: .45; }

.pdc-group { padding-top: 72px; }
/* 강조 띠: 첫 묶음(출력 · 효율)만 1200 칸 밖으로 화면 끝까지 넓힌다. 가로 넘침은 .pdc 에서 자른다(clip 이라 sticky 는 그대로) */
.pdp.pdc { overflow-x: clip; }
.pdc-group--band { margin: 72px calc(50% - 50vw) 0; padding: 56px calc(50vw - 50%) 48px; background: #f2f6fa; }
.pdc-group--band .pdc-row { border-bottom-color: #dbe3ea; }
.pdc-group--band .pdc-row:last-child { border-bottom: 0; }
.pdp .pdc-group h3 { margin-bottom: 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.pdc-row { padding: 36px 0; border-bottom: 1px solid var(--pdp-line); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 48px; text-align: center; }
.pdc-cell { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pdp .pdc-cell__icon { width: 40px; height: 40px; stroke-width: 1.4; }
.pdc-cell__main { font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--pdp-ink); }
.pdc-cell__main.is-big { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.pdc-cell__main.is-none { font-size: 24px; font-weight: 400; color: #8a939d; }
.pdc-cell__sub { font-size: 14px; line-height: 1.5; color: var(--pdp-sub); }
.pdc-cell__note { margin-top: -4px; font-size: 13px; line-height: 1.5; color: var(--pdp-sub); }

.pdc-cta { margin-top: 120px; margin-bottom: 120px; padding-top: 56px; border-top: 1px solid #d5dbe1; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pdp .pdc-cta h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; }
.pdp .pdc-cta p { font-size: 17px; color: var(--pdp-gray); }
.pdc-cta__acts { margin-top: 6px; display: flex; align-items: center; gap: 24px; }
.pdp .pdc-cta__tel { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 26px; font-weight: 700; }

/* ── 1300 이하 ── */
@media (max-width: 1300px) {
    .pdp .pdl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 태블릿 ── */
@media (max-width: 900px) {
    .pdp .pdl-head { padding-top: 56px; }
    .pdp .pdl-head h1 { font-size: 32px; }
    .pdp .pdl-head p { font-size: 16px; }
    .pdp .pdl-search { width: 100%; }
    .pdp .pdl-count { margin-left: auto; }
    .pdp .pdl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 48px; }
    .pdp .pdl-card__pic { height: 200px; padding: 20px; }
    .pdl-card__pic img { max-height: 160px; }
    .pdp .pdl-card__title :is(h2, h3) { font-size: 20px; }
    .pdp .pdl-inquiry { padding-top: 80px; padding-bottom: 88px; }
    .pdl-inquiry__box { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
    .pdp .pdl-inquiry__text h2 { font-size: 28px; }
    .pdl-cmpbar__slots { gap: 10px; }
    .pdl-slot { height: 84px; padding: 0 40px 0 10px; gap: 10px; }
    .pdl-slot__pic { width: 56px; height: 56px; }
    .pdl-slot__pic img { max-width: 48px; max-height: 48px; }
    .pdl-slot__text b { font-size: 15px; }
    .pdl-slot__text small { display: none; }
    .pdl-slot--empty span { display: none; }

    .pdc-top { height: 72px; }
    .pdc-title { padding-top: 56px; }
    .pdp .pdc-title h1 { font-size: 34px; }
    .pdc-picks__sentinel { height: 32px; }
    .pdc-picks__row, .pdc-heroes { column-gap: 16px; }
    .pdc-pick select { height: 48px; padding: 0 36px 0 14px; font-size: 14px; }
    .pdp .pdc-pick svg { right: 12px; top: 15px; }
    .pdc-hero__pic { height: 220px; }
    .pdc-hero__pic img { max-height: 200px; }
    .pdc-hero__nopic, .pdc-hero__add { height: 200px; }
    .pdp .pdc-hero__code { font-size: 22px; }
    .pdc-group { padding-top: 48px; }
    .pdc-row { padding: 24px 0; column-gap: 16px; }
    .pdc-cell__main { font-size: 16px; }
    .pdc-cell__main.is-big { font-size: 20px; }
    .pdp .pdc-cta { margin-top: 80px; margin-bottom: 88px; }
    .pdp .pdc-cta h2 { font-size: 26px; }
}

/* ── 폰: 목록 한 줄, 비교는 두 칸 (애플처럼) ── */
@media (max-width: 560px) {
    /* 목록: 한 화면에 여러 개 보이게 사진 왼쪽 · 내용 오른쪽의 가로 카드 */
    .pdp .pdl-grid { grid-template-columns: 1fr; row-gap: 0; }
    .pdl-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; column-gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--pdp-line); }
    .pdl-card:first-child { padding-top: 0; }
    .pdp .pdl-card__pic { height: 96px; padding: 8px; }
    .pdl-card__pic img { max-height: 80px; }
    .pdl-card__nopic { gap: 6px; font-size: 11px; text-align: center; }
    .pdp .pdl-card__nopic svg { width: 22px; height: 22px; }
    .pdl-card__body { padding-top: 0; gap: 6px; }
    .pdl-card__meta { gap: 6px; font-size: 13px; }
    .pdl-badge { height: 22px; padding: 0 7px; font-size: 12px; }
    .pdp .pdl-card__title :is(h2, h3) { font-size: 18px; }
    .pdp .pdl-card__title p { font-size: 14px; }
    .pdp .pdl-card__specs { margin: 2px 0 0; padding: 8px 0 0; border-bottom: 0; gap: 2px; font-size: 13px; }
    .pdl-card__specs dd small { font-size: 12px; }
    .pdl-check { height: 40px; font-size: 14px; }
    .pdp .pdl-card__more { height: 40px; font-size: 14px; }
    .pdl-use a { padding: 0 18px; }
    .pdl-cmpbar__head { flex-wrap: wrap; }
    .pdp .pdl-cmpbar__go { width: 128px; }
    .pdl-slot__text span { display: none; }
    /* 칸이 좁으니 사진 위 · 모델명 아래로 쌓는다 */
    .pdl-slot { height: 100px; padding: 10px 6px 8px; flex-direction: column; justify-content: center; gap: 6px; }
    .pdl-slot__pic { width: 56px; height: 44px; }
    .pdl-slot__pic img { max-width: 48px; max-height: 40px; }
    .pdl-slot__text { align-items: center; max-width: 100%; }
    .pdl-slot__text b { font-size: 13px; text-align: center; line-height: 1.3; overflow-wrap: anywhere; }
    .pdl-slot__x { top: 0; right: 0; width: 36px; height: 36px; }
    .pdc-picks__row, .pdc-heroes, .pdc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdc-pick-col:nth-child(3), .pdc-hero:nth-child(3), .pdc-cell:nth-child(3) { display: none; }
    .pdc-fig { zoom: .7; }
}

@media (prefers-reduced-motion: reduce) {
    .pdl-cmpbar__handle svg, .pdc-picks, .pdl-toast, .pdl-toast.is-on { transition: none; }
}

/* ── 왼쪽 제품 목록 틀 안의 목록 머리 · 묶음 (Views/_ProductLayout.cshtml) ── */
.pdx-main .pdl-head { padding-top: 20px; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pdx-main .pdl-head h1 { font-size: 40px; }
.pdl-head__text { display: flex; flex-direction: column; gap: 10px; }
.pdl-head__cmp { flex-shrink: 0; height: 48px; padding: 0 20px; display: flex; align-items: center; gap: 8px; border: 1px solid #8a939d; border-radius: 24px; font-size: 15px; font-weight: 700; }
.pdp .pdl-head__cmp:hover { border-color: var(--pdp-ink); color: var(--pdp-blue); }
.pdp .pdl-head__cmp svg { width: 16px; height: 16px; stroke-width: 2; }
.pdx-main .pdl-bar { margin-top: 28px; }
.pdx-main .pdl-list { margin-top: 32px; }
.pdl-group + .pdl-group { margin-top: 64px; }
.pdp .pdl-group__title { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--pdp-ink); font-size: 22px; font-weight: 700; }
.pdl-group__title span { font-weight: 500; color: var(--pdp-sub); }
@media (max-width: 900px) {
    .pdx-main .pdl-head h1 { font-size: 32px; }
    .pdx-main .pdl-search { width: 100%; }
}
@media (max-width: 560px) {
    .pdx-main .pdl-head { flex-direction: column; align-items: flex-start; }
}