@charset "UTF-8";
/* 제품 — 시안 PC 378:531 (1920×4181) / 모바일 378:1301 (390×4181).
   좌우 여백은 브랜드·공지와 같은 262 (콘텐츠 1396 = 72.7083%).
   세로는 시안 px 그대로, 가로는 % 로 환산한다.

   ⚠️ 카드는 제품 사진 + 반사(그림자)까지 들어간 통짜 이미지다.
      시안에서 반사는 타원 마스크로 잘린 사진 사본이라 CSS 로 재현하려면
      제품마다 마스크가 달라 손이 많이 가고 결과도 어긋난다.
      카드 배경(#f5f5f7)까지 포함해 한 장으로 뽑는 쪽이 정확하고 단순하다. */

/* ============================================================
   1. 히어로 밴드
   ============================================================ */
.prd-hero { height: 744px; background: var(--navy-deep); }

/* 카피는 사진 오른쪽 어두운 자리에 얹는다 (시안 x990) */
.prd-hero-title,
.prd-hero-sub { position: absolute; left: 51.5625%; color: var(--white); }  /* 990 / 1920 */

.prd-hero-title { top: 287px; font-size: 40px; font-weight: 700; line-height: 1.6; }
.prd-hero-sub   { top: 424px; font-size: 20px; line-height: 1.6; }

/* ============================================================
   2. 시그니처 — 단아로 윤결세트
   ------------------------------------------------------------
   사진은 밴드보다 커서 좌우로 흘러나간다(시안 그대로). 밴드가 잘라 준다.
   ============================================================ */
.prd-sig { height: 640px; background: #fff; }

.prd-sig-img {
    position: absolute;
    top: 18px;
    left: 14.0625%;         /* 270 / 1920 */
    display: block;
    width: 41.25%;          /* 792 / 1920 */
    height: 622px;          /* 640 - 18, 밴드 아래로 넘치는 만큼은 잘린다 */
}
/* ⚠️ cover 를 쓰면 안 된다.
   높이가 640 으로 고정이라 화면이 좁아져도 사진이 줄지 않고 **좌우가 잘려 나간다**
   (1280 에서 553px). 제품은 그대로 큰데 글만 왼쪽으로 와서 사이가 벌어져 보인다.
   contain 이면 화면을 따라 사진도 같이 줄고, 남는 자리는 흰 배경이라 안 보인다.
   가운데를 기준으로 둔다 — 아래로 붙이면 좁은 화면에서 제품만 처져 오른쪽 글과 어긋난다. */
.prd-sig-img {
    background: #fff;
    overflow: hidden;
}
.prd-sig-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.prd-sig-text { position: absolute; left: 60.5729%; }   /* 1163 / 1920 */

.prd-sig-eyebrow,
.prd-sig-title,
.prd-sig-desc,
.prd-sig-spec,
.prd-sig-btn { position: absolute; left: 0; white-space: nowrap; }

.prd-sig-eyebrow { top: 146px; font-size: 16px; line-height: 26px; color: var(--ink); }
.prd-sig-title   { top: 178px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.prd-sig-desc    { top: 257px; font-size: 16px; line-height: 26px; color: var(--ink); }
.prd-sig-desc b  { font-weight: 700; }

/* 구성 / 가격 — 라벨 폭을 고정해 값이 세로로 맞는다 (시안 라벨 x0, 값 x41) */
.prd-sig-spec { font-size: 16px; line-height: 1.8; color: var(--ink); }
.prd-sig-spec b { display: inline-block; width: 41px; font-weight: 700; }
.prd-sig-spec--set   { top: 356px; }
.prd-sig-spec--price { top: 390px; }

.prd-sig-btn     { top: 449px; }

/* ============================================================
   3~4. 라인업
   ------------------------------------------------------------
   카드 450 × 3 + 간격 23 × 2 = 1396 으로 콘텐츠 폭에 딱 맞는다.

   ⚠️ 세로를 시안 px 로 박지 않는다.
   카드는 폭을 따라 높이가 줄어드는데(aspect-ratio) 글자리를 고정 좌표로 두면
   좁은 화면에서 그 사이가 통째로 빈다 — 1230 에서 40px 이 248px 이 됐었다.
   카드·글·섹션을 흐름으로 쌓고, **글 덩어리 안쪽만** 고정 좌표로 남긴다.
   그래야 설명이 한 줄이든 두 줄이든 용량·가격이 카드끼리 같은 높이에 선다.
   ============================================================ */
.prd-line { background: #fff; }

.prd-line-title,
.prd-line-sub { text-align: center; }

/* 시안의 라인업 제목은 굵지 않다 — h2 기본값(bold)을 되돌린다 */
.prd-line-title { font-size: 52px; font-weight: 400; line-height: 68px; color: var(--ink); }
.prd-line-sub   { margin-top: 9px; font-size: 16px; line-height: 21px; color: var(--ink); }

.prd-grid {
    width: 72.7083%;        /* 1396 / 1920 */
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

/* 첫 라인업은 시그니처 밴드 아래라 위쪽 여백이 더 있다 */
.prd-line--skin { padding: 44px 0 100px; }
.prd-line--plus { padding: 0 0 198px; }

.prd-item { position: relative; }

/* 카드 전체(사진 + 글)가 상세 페이지로 가는 링크다 (2026-09-10 결정).
   그래서 안쪽은 전부 <span> 이고 display 를 여기서 준다 —
   <a> 안에 <h3>·<p> 를 넣으면 마크업이 어긋난다. */
.prd-link { display: block; color: inherit; }
.prd-link:hover .prd-name { text-decoration: underline; text-underline-offset: 4px; }

.prd-card {
    display: block;
    width: 100%;
    aspect-ratio: 450 / 560.294;
    background: var(--btn-light);
    overflow: hidden;
}
.prd-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.prd-link:hover .prd-card img { transform: scale(1.03); }

/* 글 덩어리는 높이 고정 — 안쪽 좌표를 시안 그대로 두어야
   설명 줄 수가 달라도 용량·가격이 카드끼리 같은 높이에 선다. */
.prd-text {
    position: relative;
    display: block;
    height: 179px;          /* 시안 글 프레임 높이 */
    margin-top: 40px;       /* 카드 아래 ~ 제품명 (600 - 560) */
}

.prd-name,
.prd-desc,
.prd-size,
.prd-price {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    text-align: center;
}

.prd-name  { top: 0;     font-size: 24px; font-weight: 700; line-height: 1.6; color: var(--ink-2); }
.prd-desc  { top: 43px;  font-size: 16px; line-height: 1.8; color: #ababab; }
.prd-size  { top: 122px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.prd-price { top: 153px; font-size: 16px; line-height: 1.6; color: var(--ink); }

/* 설명 폭 — 시안은 제품마다 폭이 달라 같은 문구가 한 줄이 되기도 두 줄이 되기도 한다.
   하나로 통일한다(가장 긴 문구가 한 줄에 들어가는 366).
   keep-all 은 좁은 화면에서 두 줄이 될 때 단어 중간(마무/리하는)이 끊기지 않게 —
   common.css 의 keep-all 은 모바일 전용이라 PC 중간 폭에서는 안 걸린다. */
.prd-desc { padding: 0 42px; word-break: keep-all; }

@media (prefers-reduced-motion: reduce) {
    .prd-card img { transition: none; }
}

/* ============================================================
   모바일 (≤768) — 시안 378:1301 기준 390 폭
   ------------------------------------------------------------
   카드가 2열로 화면을 꽉 채운다(좌우 여백 0). 3종 라인업이라
   두 번째 줄에는 카드가 하나만 남는다 — 시안 그대로다.
   ============================================================ */
@media (max-width: 768px) {

    /* ---------- 히어로 ----------
       ⚠️ 시안에서 히어로(01)는 727 인데 시그니처 밴드(02)가 678 부터 시작해
       아래 49 를 덮는다. 그래서 실제로 보이는 높이는 678 이다.
       사진은 위를 기준으로 잘라 시안과 같은 부분이 남게 한다. */
    .prd-hero { height: 678px; }
    .prd-hero .section-bg img { object-position: center top; }

    /* 모바일은 카피가 사진 아래쪽 왼편에 온다 (시안 x42) */
    .prd-hero-title,
    .prd-hero-sub { left: 42px; }
    .prd-hero-title { top: 540px; font-size: 28px; }
    .prd-hero-sub   { top: 637px; font-size: 15px; }

    /* ---------- 시그니처 ----------
       ⚠️ 2026-09-09 시안 수정으로 **왼쪽 정렬**이 됐다 (이전에는 가운데였다).
       제목·본문·구성/가격·버튼이 모두 x38 에서 시작한다. */
    .prd-sig { height: 840px; }

    .prd-sig-img {
        top: 0;
        left: 0;
        width: 100%;
        height: 492px;
    }
    .prd-sig-img img { object-position: center top; }

    .prd-sig-text { left: 38px; right: 38px; }

    .prd-sig-eyebrow,
    .prd-sig-title,
    .prd-sig-desc,
    .prd-sig-spec { white-space: normal; }

    .prd-sig-eyebrow { top: 469px; }
    .prd-sig-title   { top: 500px; font-size: 32px; line-height: 1.5; }
    .prd-sig-desc    { top: 560px; font-size: 15px; line-height: 23px; }

    .prd-sig-spec { font-size: 15px; line-height: 27px; }
    .prd-sig-spec b { width: 36px; }
    .prd-sig-spec--set   { top: 653px; }
    .prd-sig-spec--price { top: 685px; }

    .prd-sig-btn { top: 747px; }

    /* ---------- 라인업 ---------- */
    .prd-line-title { font-size: 32px; line-height: 42px; }
    .prd-line-sub   { margin-top: 12px; }

    .prd-grid {
        width: 100%;
        margin-top: 40px;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1px;      /* 카드가 맞붙어 화면을 꽉 채운다 */
        row-gap: 60px;
    }

    .prd-line--skin { padding: 69px 0 75px; }
    .prd-line--plus { padding: 0 0 128px; }

    .prd-card { aspect-ratio: 195 / 240; }

    .prd-text  { height: 164px; margin-top: 20px; }
    .prd-name  { font-size: 18px; line-height: 1.6; }
    .prd-desc  { top: 39px;  padding: 0 16px; font-size: 14px; line-height: 24px; }
    .prd-size  { top: 107px; }
    .prd-price { top: 138px; }
}