@charset "UTF-8";
/* 제품 상세 — 시안 PC 446:1588 (1920×4580) / 모바일 446:2555 (390×2266).
   세로(top)는 시안 px 그대로, 가로는 % 로 환산한다.
     405 → 21.09375%   504 → 26.25%   976 → 50.8333%
     1089 → 56.71875%  1309 → 68.17708%  1403 → 73.07292%  300 → 15.625%
   ⚠️ 시안 프레임은 4580 인데 정보 블록이 765 에서 끝나고 푸터가 3780 부터다.
      가운데 3015 는 **아직 안 나온 상세 이미지 자리**라 비워 두지 않았다
      (.pd-detail 높이 0). 자세한 이유는 product-detail.php 주석에.
   ============================================================ */

.pd-info { height: 765px; background: #fff; }

/* ------------------------------------------------------------
   사진 — 여러 장을 가로로 넘긴다
   회색 판(504×530)의 **비율을 유지한다.** 높이를 px 로 박으면 화면이
   좁아질 때 판만 세로로 길쭉해져 사진 위아래에 회색이 크게 남는다.
   ------------------------------------------------------------ */
/* ⚠️ **제품컷은 판 색을 구워서 넣는다.** 시안은 사진을 곱하기 합성으로 얹어
   흰 바탕이 판 색으로 사라지게 해 뒀다. 내보낸 파일에는 흰 바탕이 그대로 남아
   있어서 그냥 얹으면 회색 판 위에 흰 네모가 뜬다.
   CSS 의 mix-blend-mode 로 흉내낼 수도 있지만, 그러면 바탕이 이미 회색인
   임시 카드 이미지가 도리어 어두워진다 — 파일에 미리 곱해 두는 쪽이 맞다. */
.pd-gallery {
    position: absolute;
    top: 175px;             /* 시안 120(섹션) + 55 */
    left: 21.09375%;        /* 405 / 1920 */
    width: 26.25%;          /* 504 / 1920 */
    aspect-ratio: 504 / 530;
    background: #f4f2f4;
}

.pd-gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pd-gallery-track::-webkit-scrollbar { display: none; }

.pd-slide {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
}
/* 사진은 판을 꽉 채우지 않는다 — 시안은 504×530 판 안에 368×365 로 들어간다.
   여백을 padding 으로 주고 object-fit: contain 으로 그 안에 맞춘다.
   ⚠️ **% padding 은 네 방향 모두 '가로'를 기준으로 계산된다.** 세로도 504 로 나눈다.
   cover 를 쓰면 판이 좁아질 때 좌우가 잘려 나간다(제품 페이지 시그니처 밴드와 같다). */
.pd-slide img {
    width: 100%;
    height: 100%;
    padding: 12.103% 13.492% 20.635%;   /* 61 / 68 / 104 ÷ 504 */
    object-fit: contain;
}

/* 화살표 — 시안 SVG 는 2px 선 두 개(#111835)라 파일 대신 CSS 로 그린다.
   변 20.5 짜리 정사각형의 두 변을 45° 돌리면 14.5×29 짜리 꺾쇠가 된다. */
.pd-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 44px;            /* 손가락·마우스가 닿는 넓이는 선보다 넉넉하게 */
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    transform: translateY(-50%);
    cursor: pointer;
}
.pd-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20.5px;
    height: 20.5px;
    border-left: 2px solid #111835;
    border-bottom: 2px solid #111835;
    opacity: .85;
    transition: opacity .2s ease;
}
.pd-arrow--prev { left: 8px; }   /* 꺾쇠 끝이 판 안쪽 30 에 온다 */
.pd-arrow--next { right: 8px; }
.pd-arrow--prev::before { transform: translate(-50%, -50%) rotate(45deg); }
.pd-arrow--next::before { transform: translate(-50%, -50%) rotate(-135deg); }
.pd-arrow:hover::before { opacity: 1; }
/* 더 갈 데가 없는 쪽 (js/main.js 가 붙인다) */
.pd-arrow.is-off { cursor: default; }
.pd-arrow.is-off::before { opacity: .2; }

/* ------------------------------------------------------------
   오른쪽 글
   ------------------------------------------------------------ */
.pd-en,
.pd-name,
.pd-lead,
.pd-spec,
.pd-cta { position: absolute; left: 50.83333%; }   /* 976 / 1920 */

.pd-en   { top: 208px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.pd-name { top: 236px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.pd-lead { top: 327px; font-size: 18px; font-weight: 500; line-height: 1.6; color: #002d7a; }

/* 스펙 — 라벨과 값이 두 칸으로 선다. 값 왼끝 1089 = 976 + 113 */
.pd-spec { top: 426px; font-size: 16px; line-height: 1.8; color: var(--body); }
.pd-spec dt { float: left; clear: left; width: 113px; font-weight: 600; }
.pd-spec dd { margin-left: 113px; }

/* 상담신청·고객혜택 — 라벨 2줄과 값 4줄이 줄 간격 2.2 로 맞물린다 */
.pd-benefit-labels,
.pd-benefit-items,
.pd-benefit-note { position: absolute; font-size: 16px; color: var(--body); }

.pd-benefit-labels { top: 420px; left: 68.17708%; font-weight: 600; line-height: 2.2; }  /* 1309 */
.pd-benefit-items  { top: 420px; left: 73.07292%; line-height: 2.2; }                     /* 1403 */
.pd-benefit-note   { top: 567px; left: 73.07292%; font-size: 12px; line-height: 1.8; }

/* 상담하기 — 사이트의 다른 버튼(알약)과 달리 시안이 모서리 8 짜리 넓은 버튼이다 */
.pd-cta {
    top: 641px;
    width: 15.625%;         /* 300 / 1920 */
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--navy-btn);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--white);
    cursor: pointer;
    transition: opacity .2s ease;
}
.pd-cta:hover { opacity: .9; }

/* 상세 이미지 자리 — 이미지가 오면 높이가 내용을 따라간다 */
.pd-detail { background: #fff; }

@media (prefers-reduced-motion: reduce) {
    .pd-arrow::before,
    .pd-cta { transition: none; }
}

/* ============================================================
   모바일 (≤768) — 시안 446:2555 기준 390 폭, 좌우 여백 20
   사진이 상단 전체 밴드로 올라가고 나머지가 아래에 한 줄로 쌓인다.
   ⚠️ 시안에 화살표도 점 표시도 없다 — 손으로 미는 것만 된다(2026-09-10 결정).
   ============================================================ */
@media (max-width: 768px) {
    .pd-info { height: 1086px; }

    .pd-gallery {
        top: 60px;          /* GNB 바로 아래 */
        left: 0;
        width: 100%;
        aspect-ratio: 390 / 370;
        background: #f5f5f5;
    }
    /* 시안은 밴드(390×370) 안에 사진이 339×336 로 들어간다 */
    .pd-slide img { padding: 2.051% 6.410% 6.667%; }   /* 8 / 25 / 26 ÷ 390 */

    .pd-arrow { display: none; }

    .pd-en,
    .pd-name,
    .pd-lead,
    .pd-spec,
    .pd-cta { left: 20px; }

    .pd-en   { top: 455px; font-size: 14px; }
    .pd-name { top: 479px; font-size: 36px; }
    .pd-lead { top: 559px; right: 20px; }

    .pd-spec { top: 651px; }
    .pd-spec dt { width: 92px; }        /* 값 왼끝 112 = 20 + 92 */
    .pd-spec dd { margin-left: 92px; }

    .pd-benefit-labels { top: 789px; left: 20px; }
    .pd-benefit-items  { top: 789px; left: 112px; }
    .pd-benefit-note   { top: 935px; left: 112px; font-size: 11px; }

    .pd-cta {
        top: 1042px;
        width: calc(100% - 40px);       /* 350 / 390 */
    }
}