라 기존 규칙을 그대로 쓴다. */
.rec-cart-form { flex: 0 0 46px; }
.rec-cart.is-option { display: block; }
/* 🐛 2026-08-11 — 2열 고정 그리드(`1fr 1fr`)였다.
[마지막 추천 영양제 보기](4-6)가 붙어 3개가 되자 **3번째가 다음 줄 왼쪽에 반쪽으로** 떨어졌다.
버튼 개수가 상황에 따라 2~3개로 달라지므로(추천 이력 없으면 2개) 개수에 맞춰 줄을 고르게 채운다.
⚠️ 주문 내역(P-402·P-403) 버튼 줄에서 같은 이유로 이미 flex 로 바꾼 적이 있다 — 같은 방식으로 맞춘다. */
.rec-actions {
display: flex; gap: var(--grid-gutter);
max-width: 872px; margin: 56px auto 0;
}
/* 폼으로 감싼 버튼([설문 다시하기])도 같은 몫을 갖도록 **직계 자식**에 건다 */
.rec-actions > * { flex: 1 1 0; min-width: 0; }
.rec-actions .btn { width: 100%; }
@media (max-width: 768px) {
/* 축소 규격도 `.rv-card` 모바일 값과 같게 — 여백 16 · 간격 14 · 썸네일 64 */
.rec-list { margin-top: 28px; gap: 20px; }
.rec-card { padding: 16px; gap: 14px; align-items: flex-start; }
.rec-rank { height: 32px; }
.rec-thumb { flex-basis: 64px; width: 64px; height: 64px; }
.rec-actions { flex-direction: column; gap: 10px; margin-top: 36px; }
.rec-actions > * { flex: 0 0 auto; } /* 위 .od-actions 와 같은 이유 */
}
@media (max-width: 768px) {
.qprog { margin-top: 24px; padding: 18px; }
.qgoal { margin-top: 28px; }
.qtitle { margin-top: 14px; }
.qopts { margin-top: 28px; gap: 10px; }
.qopt { height: 56px; padding: 0 16px; }
.qopt::after { right: 15px; }
.qopts + .survey-actions.is-pair { margin-top: 60px; }
}
/* ══ 배너 팝업 (관리자 등록형) ═════════════════════════════════════════
팝업 648 · r12 · 이미지 648×480(에셋 972×720 = 1.5x) · 하단바 56
z-index 150 — 헤더(100)·하단탭(120) 위, 토스트(200) 아래.
⚠️ 노출 판정 전에는 마크업이 hidden 이다(숨김 처리된 팝업이 깜빡이지 않게). */
.popup-dim {
position: fixed; inset: 0; z-index: 150;
display: flex; align-items: center; justify-content: center;
padding: var(--page-margin);
background: var(--c-backdrop);
overflow: auto;
}
.popup-dim[hidden] { display: none; } /* flex 가 hidden 을 덮지 않도록 */
.popup {
flex: 0 0 auto; width: 648px; max-width: 100%;
border-radius: var(--r-md); overflow: hidden;
background: var(--c-surface);
}
/* ── 슬라이드 (2건 이상 등록 시) — 2026-08-12 ──────────────────────
상자는 하나고 **미디어만** 넘어간다. 하단바(오늘 하루 보지 않기 · 닫기)는 공용이다.
⚠️ 트랙이 flex 라 슬라이드 높이가 **가장 큰 이미지에 맞춰진다**.
비율이 크게 다른 이미지를 섞으면 짧은 쪽 아래에 여백이 생긴다 — 등록 크기를 맞추는 편이 좋다.
⚠️ 화살표·인디케이터는 JS 가 만든다(1건이면 만들지 않는다). */
.popup-view { position: relative; overflow: hidden; }
.popup-track {
display: flex; align-items: flex-start;
transition: transform .35s ease;
/* ⚠️ 드래그로 넘기려면 브라우저에게 **가로 제스처를 넘겨 달라**고 알려야 한다.
`pan-y` 라서 세로 스크롤은 그대로 브라우저가 처리한다 — 팝업이 페이지 스크롤을 잡아먹지 않는다. */
touch-action: pan-y;
-webkit-user-select: none; user-select: none; /* 드래그 중 글자가 선택되지 않게 */
}
.popup-slide { flex: 0 0 100%; min-width: 0; }
.popup-media img { -webkit-user-drag: none; } /* 이미지 자체가 끌려나가지 않게(JS 에서도 막는다) */
.popup-view.is-slider .popup-track { cursor: grab; }
.popup-view.is-slider .popup-track:active { cursor: grabbing; }
.popup-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; padding: 0;
display: flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%;
background: var(--c-backdrop); color: var(--c-on-color);
cursor: pointer;
}
.popup-nav svg { width: 18px; height: 18px; }
.popup-nav.is-prev { left: 12px; }
.popup-nav.is-next { right: 12px; }
.popup-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); }
/* 인디케이터 — **콘텐츠(이미지) 위 하단 가운데** (2026-08-12 하단바에서 옮김)
⚠️ 어떤 이미지 위에 얹힐지 알 수 없다 → 알약 배경(딤)을 깔아 밝은 이미지에서도 읽히게 한다.
점 색도 회색이 아니라 **흰색 계열**이다(딤 위라서). */
.popup-dots {
position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
z-index: 1;
display: flex; align-items: center; gap: 6px;
padding: 7px 10px; border-radius: 999px;
background: var(--c-backdrop);
}
.popup-dot {
width: 8px; height: 8px; padding: 0;
border: 0; border-radius: 50%;
background: var(--c-scrim); cursor: pointer;
transition: background-color .15s, width .15s;
}
.popup-dot.is-on { width: 18px; border-radius: 4px; background: var(--c-on-color); }
.popup-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); }
/* 에디터(내용) 타입은 이미지가 없어 글이 인디케이터에 가릴 수 있다 → 아래를 비워 준다 */
.popup-view:has(.popup-dots) .popup-text { padding-bottom: 56px; }
.popup-media { display: block; }
.popup-media > img { display: block; width: 100%; height: auto; }
/* 에디터(내용) 타입 — 시안에는 이미지형만 있으나 관리자 팝업은 2종을 지원한다(F-909).
이미지가 없을 때 빈 상자가 되지 않도록 최소 조판만 둔다. */
.popup-text { padding: 36px 32px; text-align: center; }
.popup-text-title {
display: block; margin-bottom: 12px;
font-size: var(--fs-sh2); font-weight: 600; color: var(--c-text-primary);
}
.popup-text-body { font-size: var(--fs-body2); color: var(--c-text-secondary); }
.popup-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
height: 56px; padding: 0 20px;
}
.popup-hide {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
font-size: var(--fs-body2); color: var(--c-text-secondary);
}
.popup-close { padding: 0; font-size: var(--fs-body2); color: var(--c-text-primary); }
.popup-close:hover { color: var(--c-primary); }
.popup-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); border-radius: var(--r-sm); }
@media (max-width: 768px) {
.popup-dim { align-items: flex-start; padding-top: 60px; }
.popup-foot { height: 52px; padding: 0 16px; }
.popup-text { padding: 28px 20px; }
/* 좁은 화면에서는 화살표가 이미지를 많이 가린다 — 줄이고 붙인다(스와이프가 주 조작이다) */
.popup-nav { width: 30px; height: 30px; }
.popup-nav svg { width: 15px; height: 15px; }
.popup-nav.is-prev { left: 8px; }
.popup-nav.is-next { right: 8px; }
.popup-dots { bottom: 12px; padding: 6px 9px; }
.popup-view:has(.popup-dots) .popup-text { padding-bottom: 48px; }
}
/* 움직임을 줄여 달라는 설정이면 슬라이드 전환을 즉시 처리한다 */
@media (prefers-reduced-motion: reduce) {
.popup-track, .popup-dot { transition: none; }
}
/* ══ 햄버거 · 전체 메뉴 드로어 ═══════════════════════════════════════
⚠️ GNB 는 1024 이하에서 숨고 하단 탭바는 768 이하에서만 뜬다 →
**769~1024 구간에 메뉴 진입점이 아예 없었다.** 그 구멍을 이 드로어가 메운다.
⚠️ navigation_guide.png 에 드로어 시안이 없어 공용 토큰으로 구성했다(시안이 오면 스타일만 교체).
z-index 160 — 헤더(100)·하단탭(120)·팝업(150) 위, 토스트(200) 아래. */
/* 시안: 막대 3줄 · 두께 2 · 간격 5(피치 7) · **가운데 막대만 짧고 좌측 정렬**(22 / 16 / 22).
좌측을 맞추려고 padding 으로 내용 영역을 22 로 만들고 flex-start 로 붙인다. */
.hd-menu {
display: none; /* 1025 이상은 GNB 가 있으므로 숨긴다 */
flex: 0 0 auto; width: 24px; height: 24px; padding: 0 1px;
flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px;
}
.hd-menu-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--c-icon-primary); }
.hd-menu-bar:nth-child(2) { width: 16px; }
.hd-menu:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); border-radius: var(--r-sm); }
.drawer {
position: fixed; inset: 0; z-index: 160;
background: var(--c-backdrop);
visibility: hidden; opacity: 0;
transition: opacity .2s, visibility .2s;
}
.drawer.is-open { visibility: visible; opacity: 1; }
.drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(320px, 84vw);
display: flex; flex-direction: column;
background: var(--c-surface);
transform: translateX(100%); transition: transform .25s;
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head {
flex: 0 0 auto; height: var(--header-h);
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--page-margin);
box-shadow: 0 1px 0 var(--c-divider);
}
.drawer-title { font-size: var(--fs-body1); font-weight: var(--fw-bold); }
.drawer-close { padding: 0; width: 24px; height: 24px; font-size: var(--fs-body1); color: var(--c-icon-primary); }
.drawer-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); border-radius: var(--r-sm); }
.drawer-nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
.drawer-link {
display: block; padding: 16px var(--page-margin);
font-size: var(--fs-body1); font-weight: var(--fw-medium); color: var(--c-text-primary);
}
.drawer-link:hover { background: var(--c-gray-100); }
.drawer-link.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.drawer-foot {
flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
padding: 16px var(--page-margin);
padding-bottom: calc(16px + env(safe-area-inset-bottom));
box-shadow: 0 -1px 0 var(--c-divider);
align-items: center;justify-content: center;
}
.drawer-foot .btn { width: 100%; }
/* 🐛 2026-08-14 — 장바구니 개수가 0이면 span 을 **아예 뺀다.**
`.btn` 은 inline-flex + `gap: var(--btn-gap)`(btn-lg 12px) 이라 **빈 요소도 flex 아이템**이라
gap 이 그대로 붙어, 글자가 gap 의 절반만큼 왼쪽으로 치우쳐 보였다.
`visibility: hidden` 이나 폭 0 으로는 안 된다 — 아이템으로 남으면 gap 도 남는다. */
[data-cart-count-text]:empty { display: none; }
@media (max-width: 1024px) {
.hd-menu { display: flex; }
}
/* ⚠️ 레이아웃 브레이크포인트가 **아니다**(1024/768 두 개 규칙은 그대로).
300px 이하에서는 로고+로그인+햄버거가 헤더에 다 들어가지 않아 로그인 버튼만 뺀다.
드로어 하단에 회원가입/로그인이 있어 진입 경로는 유지된다. */
@media (max-width: 300px) {
.hd-login { display: none; }
}
/* ══ 유전자 검사 (상품 목록) — page_img/유전자검사.png ═══════════════════
실측: 배너 전폭 400 · HOW TO 카드 312×267(r24, 거터 24) · 상품 이미지 312×350(r20)
섹션 상하 여백 140 · 카드/상품 모두 3컬럼(312) × 4열
⚠️ 시안에 검색·카테고리·정렬·페이지네이션이 없다. */
.kit-hero { position: relative; overflow: hidden; background: var(--c-gray-200); }
.kit-hero-visual { position: absolute; inset: 0; }
.kit-hero-visual > img { object-position: right center; }
.kit-hero-inner {
position: relative; z-index: 1; /* 이미지 위에 얹힌다 */
min-height: 400px; display: flex; flex-direction: column; justify-content: center;
padding-bottom: 8px; /* 시안 텍스트 블록이 정중앙보다 4px 위 */
}
.kit-hero-title { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-gray-900); }
.kit-hero-lead { margin-top: 10px; font-size: var(--fs-body1); color: var(--c-gray-800); }
/* 섹션 공통 — 상하 140 */
.kit-how, .kit-products { padding: 140px 0; }
/* 아주 옅은 세로 그라디언트(흰색 → Gray/50). 시안 실측 255 → 252 */
.kit-how { background: linear-gradient(180deg, var(--c-bg-primary), var(--c-gray-50)); }
.kit-products { padding-bottom: 180px; }
/* 섹션 머리말 — ⚠️ 메인의 `.msec-eyebrow`(Body2)와 달리 이 시안은 SH2(18) 다 */
.kit-eyebrow { font-size: var(--fs-sh2); font-weight: var(--fw-bold); color: var(--c-main-300); letter-spacing: .5px; }
.kit-eyebrow.ver2 {font-size: var(--fs-body1);}
.kit-eyebrow.is-center { text-align: center; }
.kit-title { margin-top: 10px; font-size: var(--fs-h40); font-weight: var(--fw-bold); line-height: 1.45; color: var(--c-gray-900);}
.kit-title.ver2 {font-size: var(--fs-h3);}
.kit-title.is-center { text-align: center; }
/* 두 번째 줄은 굵기가 낮다(시안) */
.kit-title em { font-weight: var(--fw-regular); }
/* HOW TO 카드 */
.kit-steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter);
margin-top: 56px;
}
.kit-step {
min-height: 267px; padding: 36px 30px;
background: var(--c-surface); border: 1px solid transparent; border-radius: 24px;
box-shadow: var(--shadow-card);
transition: transform .15s, border-color .15s;
}
.kit-step:hover { transform: translateY(-8px); border-color: var(--c-main-200); }
/* 글자 크기는 자기 렌더를 자로 삼아 역산했다 — 시안 실측 뱃지 ≈17.2 · 제목 ≈29 · 설명 ≈17.5 */
.kit-step-no {
display: inline-block; padding: 7px 17px; border-radius: 999px;
background: var(--c-main-100); color: var(--c-main-300);
font-size: var(--fs-sh2); font-weight: var(--fw-semibold);
}
.kit-step-title { margin-top: 46px; font-size: var(--fs-h30); font-weight: var(--fw-bold); }
.kit-step-desc { margin-top: 19px; font-size: var(--fs-sh2); color: var(--c-gray-800); line-height: 1.4; }
.kit-step-desc .txt-hl { --hl-h: .67em; } /* HOW TO — 시안 12px (메인보다 얇다) */
/* 상품 카드 — 이미지 312×350(r20) + 이름 + 설명 + 가격
⚠️ 메인 BEST 의 `.pcard`(뱃지·평점 포함)와 다른 컴포넌트다. 재사용하지 말 것. */
.kit-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px var(--grid-gutter);
/* ⚠️ 28 은 시안(50 남짓)보다 작다 — 이 섹션 제목이 시안 실측 ≈31 인데 스케일상 H2(36) 를 쓰느라
위쪽이 9px 더 차지한다. 그만큼 빼서 상품 이미지 시작 위치를 시안에 맞춘다. */
margin-top: 28px;
}
.kit-thumb {
display: block; aspect-ratio: 312 / 350;
border-radius: 20px; background: var(--c-gray-100);
}
/* 글자 크기는 같은 문자열을 렌더해 비교했다 — 시안 실측 이름 ≈19 · 설명 ≈13.5 · 가격 ≈23 */
.kit-name { display: block; margin-top: 20px; font-size: var(--fs-sh2); font-weight: var(--fw-bold); line-height: 1.4; color: var(--c-text-primary); }
.kit-desc { margin-top: 5px; font-size: var(--fs-body2); color: var(--c-text-tertiary); }
.kit-price { margin-top: 7px; }
.kit-price del { display: block; font-size: var(--fs-body2); line-height: 1.2; }
.kit-price span { display: block; margin-top: 1px; font-size: var(--fs-sh1); font-weight: var(--fw-bold); line-height: 1.2; }
.kit-price .rate { margin-right: 8px; color: var(--c-primary); }
@media (max-width: 1024px) {
.kit-how, .kit-products { padding: 100px 0; }
.kit-products { padding-bottom: 120px; }
.kit-steps { grid-template-columns: repeat(2, 1fr); margin-top: 48px; }
.kit-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.kit-hero-inner { min-height: 260px; }
.kit-hero-lead { margin-top: 14px; font-size: var(--fs-body2); }
.kit-how, .kit-products { padding: 60px 0; }
.kit-products { padding-bottom: 80px; }
.kit-steps { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
.kit-step { min-height: 0; padding: 24px 20px; }
.kit-step-title { margin-top: 18px; }
.kit-step-desc { margin-top: 14px; }
/* 🔄 2026-08-27 (요청 1) — 모바일도 **한 줄에 한 상품**. PC 와 같은 가로 카드다.
2열 세로 카드는 키트가 1~2종뿐이라 칸이 비어 보이고 이름·가격이 잘게 접혔다.
⚠️ 그리드 아이템은 기본이 min-width:auto 라 내용(가격 한 줄)보다 좁아지지 못한다.
0 으로 풀지 않으면 좁은 폭에서 카드가 줄지 않고 가로로 넘친다(실제 발생했던 버그). */
.kit-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.kit-card {
display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px;
min-width: 0; padding: 14px;
border: 1px solid var(--c-gray-200); border-radius: 16px; background: var(--c-surface);
}
/* 썸네일은 세 줄(이름·설명·가격)에 걸쳐 왼쪽에 선다 — 비율(312:350)은 그대로 */
.kit-thumb { grid-column: 1; grid-row: 1 / span 3; align-self: start; border-radius: 12px; }
.kit-name { grid-column: 2; grid-row: 1; margin-top: 0; font-size: var(--fs-body1); }
.kit-desc { grid-column: 2; grid-row: 2; margin-top: 6px; }
.kit-price { grid-column: 2; grid-row: 3; margin-top: 8px; }
.kit-price span { display: flex; flex-wrap: wrap; align-items: baseline; font-size: var(--fs-sh2); }
}
/* ══ 키트 목록 — PC 가로형 1컬럼 리스트 (2026-08-25 · 클라이언트 요청 #10) ═══════════
4열 카드 그리드였는데 키트가 1~2종뿐이라 우측이 통째로 비어 보였다.
→ PC 는 **한 줄에 한 상품**, 이미지 왼쪽 · 정보 오른쪽으로 가로 배치한다.
· 모바일(≤768)은 기존 2열 세로 카드 그대로 — 위 블록이 그대로 적용된다.
· 썸네일 비율은 312:350 을 유지한다(폭만 260 으로 줄임) — 등록 이미지의 크롭 기준을 바꾸지 않으려는 것.
· `min-width: 769px` 이라 위쪽 `max-width: 1024px` 의 3열 규칙보다 **뒤에 와야** 이긴다.
⚠️ 이 블록을 키트 CSS 위쪽으로 옮기지 말 것. */
@media (min-width: 769px) {
.kit-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
/* 좌: 썸네일 / 가운데: 이름·설명 / 우: 가격
⚠️ 가격을 가운데 칸 아래에 두면 우측 절반이 통째로 빈다(요청 #10 의 원인과 같은 그림).
가격을 **오른쪽 끝**으로 보내야 한 줄이 실제로 채워진다. */
.kit-card {
display: grid;
/* 769~1024 는 가로가 좁아 썸네일을 200 으로 줄인다 — 260 이면 이름·설명 칸이
150px 밖에 남지 않아 상품명이 네 줄로 접힌다(가로 스크롤은 나지 않지만 읽기 나쁘다) */
grid-template-columns: 200px minmax(0, 1fr) auto;
/* 위·아래 1fr 스페이서로 글 묶음을 이미지 높이 기준 **세로 가운데**에 둔다 */
grid-template-rows: 1fr auto auto 1fr;
column-gap: 40px;
padding: 24px;
border: 1px solid var(--c-gray-200); border-radius: 20px;
background: var(--c-surface);
transition: border-color .15s, box-shadow .15s;
}
.kit-card:hover { border-color: var(--c-border-primary); box-shadow: var(--shadow-step); }
/* ⚠️ align-self 는 start — stretch 로 두면 설명이 긴 카드에서 이미지가 세로로 늘어나
aspect-ratio(312:350) 를 벗어나 크롭 기준이 달라진다 */
.kit-thumb { grid-column: 1; grid-row: 1 / -1; align-self: start; }
.kit-name { grid-column: 2; grid-row: 2; margin-top: 0; font-size: var(--fs-sh1); }
.kit-desc { grid-column: 2; grid-row: 3; margin-top: 10px; font-size: var(--fs-body1); }
.kit-price { grid-column: 3; grid-row: 1 / -1; align-self: center; margin-top: 0; text-align: right; }
.kit-price del { display: block; }
.kit-price span { margin-top: 4px; justify-content: flex-end; }
}
/* 1025px 이상 — 가로가 넓어 이미지·글자에 여유를 준다 */
@media (min-width: 1025px) {
.kit-card { grid-template-columns: 300px minmax(0, 1fr) auto; column-gap: 56px; padding: 28px; }
}
/* ══ 상품 상세 — page_img/유전자검사_상품상세.png ═══════════════════════
실측: 상단 = 이미지 648(정사각, r16, 1px Gray/200) + 간격 112 + 정보 560
본문 = 좌 872 + 거터 24 + 사이드 424 (합 1320)
사이드 카드는 **스크롤 시 고정(sticky)** — 헤더(74) 아래로 붙는다. */
/* ⚠️ 상단 여백 33 = 시안 실측 — 이미지 박스 상단이 헤더(74) 아래 61px 이고
`.page` 가 이미 28 을 갖고 있다(브레드크럼을 뺀 자리, 2026-08-12). */
.pd-top {
display: grid; grid-template-columns: minmax(0, 648fr) minmax(0, 560fr); gap: 112px;
align-items: start; margin-top: 33px;
}
.pd-visual {
aspect-ratio: 1 / 1; border: 1px solid var(--c-gray-200); border-radius: var(--r-lg);
background: var(--c-surface);
}
.pd-visual > img { object-fit: contain; }
.pd-name { font-size: var(--fs-sh1); font-weight: var(--fw-bold); }
.pd-lead { margin-top: 14px; font-size: var(--fs-body2); color: var(--c-text-tertiary); line-height: 1.7; }
/* 라벨 + 값 한 줄 — 상단 정보와 사이드 카드가 같이 쓴다 */
.pd-row {
display: flex; align-items: center; gap: 40px;
padding: 18px 0; border-top: 1px solid var(--c-divider);
}
.pd-label { flex: 0 0 auto; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.pd-top .pd-label { font-size: var(--fs-body1); } /* 상단 정보는 사이드 카드보다 한 단계 크다(시안) */
.pd-value { font-size: var(--fs-body2); font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.pd-row.is-price { justify-content: space-between; gap: 12px; }
.pd-price { font-size: var(--fs-sh1); font-weight: var(--fw-bold); color: var(--c-primary); }
.pd-buy { width: 100%; margin: 16px 0 24px; }
/* ── 탭 ── */
/* 탭·가이드 폭은 상세 패널의 좌측 칼럼(872)과 같아야 한다 —
패널이 872fr : 424fr + 거터 24 이므로 같은 비율로 계산한다(고정 872 로 두면 1200px 대에서 어긋난다). */
/* ⚠️ 2026-08-12 — `.pd-guide` 는 이 목록에서 뺐다. 검사 절차 안내가 **패널 좌측 칼럼 안**으로
들어가면서 이미 872 폭이 되었는데, 여기서 또 872/1296 을 곱하면 한 번 더 줄어든다. */
.pd-tabs { max-width: calc((100% - var(--grid-gutter)) * 872 / 1296); }
/* ⚠️ 실측 (2026-08-12 · 유전자검사·영양제 두 시안이 동일) —
· 탭 줄 자체는 872 전폭이고 **첫 라벨이 좌측에서 24 들어가 있다** → 줄에 padding-left
· 활성 밑줄(3px)은 **글자 폭만큼**이다(324~397 = 라벨 잉크와 정확히 일치)
→ 탭에 좌우 padding 을 주면 밑줄이 그만큼 길어져 시안과 어긋난다
· 라벨 사이 간격 58 (영양제 3탭에서도 58 / 60) */
.pd-tabs {
display: flex; gap: 58px; margin-top: 74px; padding-left: 24px;
border-bottom: 1px solid var(--c-divider);
}
.pd-tab {
padding: 0 0 16px; font-size: var(--fs-sh2); font-weight: var(--fw-semibold); /* 시안 실측 ≈19 */
color: var(--c-text-disabled); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pd-tab.is-active { color: var(--c-text-primary); border-bottom-color: var(--c-primary); }
.pd-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); border-radius: var(--r-sm); }
.pd-panel.is-detail {
display: grid; grid-template-columns: minmax(0, 872fr) minmax(0, 424fr); gap: var(--grid-gutter);
align-items: start;
}
/* ⚠️ display 선언보다 **뒤에** 와야 한다 — 특이도가 같아 앞에 두면 .is-detail 의 display:grid 가 이겨
탭을 바꿔도 패널이 그대로 보인다(실제 발생했던 버그). */
.pd-panel[hidden] { display: none; }
/* 좌측 칼럼 — 탭으로 갈아끼우는 본문이 들어간다(우측 `.pd-side` 는 탭과 무관하게 고정).
⚠️ `min-width: 0` 이 없으면 그리드 아이템 기본값(auto) 때문에 긴 내용이 칼럼을 늘려
우측 카드를 밀어낸다. */
.pd-main { min-width: 0; }
/* 상세 내용 자리 — 관리자가 등록한 HTML 이 들어온다 */
.pd-detail { margin-top: 25px; min-height: 600px; background: var(--c-gray-50); border-radius: var(--r-md); }
/* 사이드 카드 — 스크롤해도 따라온다 */
.pd-side {
position: sticky; top: calc(var(--header-h) + 24px);
padding: 24px; border: 1px solid var(--c-gray-200); border-radius: var(--r-lg);
background: var(--c-surface);
}
.pd-side-name { font-size: var(--fs-sh2); font-weight: var(--fw-bold); }
.pd-side-lead { margin: 12px 0 18px; font-size: var(--fs-body2); color: var(--c-text-tertiary); line-height: 1.7; }
/* 카드 안에서는 아래 여백을 카드 padding 이 맡는다 — 위 16 만 남긴다(시안 실측) */
.pd-side .pd-buy { margin: 16px 0 0; }
.pd-side .pd-row:first-of-type { border-top: 1px solid var(--c-divider); }
/* ── 검사 절차 안내 ── */
.pd-guide-title { margin-top: 46px; font-size: var(--fs-sh1); font-weight: var(--fw-bold); }
.pd-guide {
margin-top: 30px; padding: 24px;
border: 1px solid var(--c-gray-200); border-radius: var(--r-lg);
display: grid; gap: 10px;
}
.pd-guide-item {
display: flex; align-items: center; gap: 20px;
padding: 20px 24px; border-radius: var(--r-md); background: var(--c-gray-50);
}
.pd-guide-no {
flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--c-primary); color: var(--c-on-color);
font-size: var(--fs-body2); font-weight: var(--fw-bold);
}
.pd-guide-name { font-size: var(--fs-body1); font-weight: var(--fw-bold); }
.pd-guide-desc { margin-top: 6px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
@media (max-width: 1024px) {
.pd-top { grid-template-columns: 1fr; gap: 32px; }
.pd-tabs, .pd-guide { max-width: none; }
/* 1열이 되면 본문이 좌측에 딱 붙으므로 탭 줄의 들여쓰기(PC 시안 24)는 뺀다 */
.pd-tabs { margin-top: 48px; padding-left: 0; }
.pd-panel.is-detail { grid-template-columns: 1fr; }
/* 1열이 되면 사이드 카드가 상세 내용 아래로 내려가므로 고정하지 않는다 */
.pd-side { position: static; margin-top: 24px; }
}
/* 모바일 하단 고정 구매바 — 768 이하에서만 나온다(그 위에서는 사이드 카드가 그 역할을 한다) */
.pd-buybar { display: none; }
@media (max-width: 768px) {
/* 사이드 카드는 상단 정보와 내용이 겹쳐 통째로 다시 보여줄 필요가 없다 → 숨기고 고정 구매바로 대체 */
.pd-side { display: none; }
.pd-buybar {
display: block; position: fixed; left: 0; right: 0; z-index: 110;
bottom: calc(74px + env(safe-area-inset-bottom)); /* 하단 탭바(74) 바로 위 */
background: var(--c-surface); box-shadow: 0 -1px 0 var(--c-divider);
}
.pd-buybar-inner {
display: flex; align-items: center; gap: 12px;
padding: 10px var(--page-margin);
}
.pd-buybar-price { flex: 1 1 auto; min-width: 0; }
.pd-buybar .pd-label { display: block; font-size: var(--fs-sub1); }
.pd-buybar .pd-price { font-size: var(--fs-sh2); }
/* 버튼이 2개(장바구니 · 바로 구매)로 늘어 남은 폭을 나눠 쓴다 — 280px 에서도 넘치지 않게 */
.pd-buybar-price { flex: 0 0 auto; } /* 금액은 줄이지 않는다 — 버튼에 가려지면 안 된다 */
.pd-buybar form { flex: 1 1 0; min-width: 0; }
.pd-buybar .btn { width: 100%; min-width: 0; padding: 0 10px; white-space: nowrap; }
/* 고정바에 본문이 가리지 않도록 푸터 아래 여백을 탭바(74) + 구매바(≈70) 만큼 잡는다 */
.has-buybar .footer { margin-bottom: calc(74px + 70px); }
.pd-tabs { gap: 8px; margin-top: 36px; }
.pd-tab { flex: 1; padding: 0 8px 14px; font-size: var(--fs-body2); }
.pd-detail { margin-top: 20px; min-height: 320px; }
.pd-guide { padding: 16px; }
.pd-guide-item { gap: 12px; padding: 16px; }
.pd-guide-title { margin-top: 32px; }
.pd-row { gap: 20px; padding: 14px 0; }
}
/* ══ 키트 결제 — 유전자검사_키트결제.png ═══════════════════════════════
좌 872(주문 키트 · 배송지 · 결제 수단) + 거터 24 + 우 424(결제 금액) — 상품상세와 같은 골격.
카드 r16 · 1px Gray/200 · 패딩 36 · 카드 사이 24 */
.page-head.is-eyebrow { display: block; padding-bottom: 0; margin-bottom: 34px; border-bottom: 0; }
.ck-eyebrow { font-size: var(--fs-body2); font-weight: var(--fw-bold); color: var(--c-main-300); letter-spacing: .5px; }
.ck-title { margin-top: 12px; font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.ck {
display: grid; grid-template-columns: minmax(0, 872fr) minmax(0, 424fr); gap: var(--grid-gutter);
align-items: start;
}
/* ⚠️ `minmax(0, 1fr)` — 그냥 `1fr`(또는 기본 auto)이면 트랙의 **자동 최소 크기 = min-content** 라
안에 든 표(적립 포인트 표는 `white-space: nowrap`)가 트랙을 밀어 넓혀 **페이지가 가로로 스크롤**된다.
0 을 하한으로 못 박아야 트랙이 화면 폭에 맞고, 넘치는 표만 제 컨테이너 안에서 스크롤한다 (2026-08-27 · 요청 1). */
.ck-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gutter); }
.ck-card, .ck-side {
padding: 36px; border: 1px solid var(--c-gray-200); border-radius: var(--r-lg); background: var(--c-surface);
}
.ck-side { position: sticky; top: calc(var(--header-h) + 24px); }
.ck-card-title { font-size: var(--fs-sh2); font-weight: var(--fw-bold); }
.ck-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* ⚠️ 반드시 자식 결합자(>)를 쓸 것 — `.ck-card-title + *` 만 쓰면 .ck-card-head 안의
'배송지 목록' 버튼까지 잡혀 버튼에 padding-top 24 + 위 테두리가 붙어 글자가 밖으로 밀린다(실제 버그). */
.ck-card > .ck-card-title + *,
.ck-card > .ck-card-head + *,
.ck-side > .ck-card-title + * { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-divider); }
/* 주문 키트 행 */
.ck-item { display: flex; align-items: center; gap: 20px; }
/* 여러 상품이 이어질 때 줄이 붙어 보인다 — 첫 줄만 카드 제목과의 간격을 쓰고 이후는 자체 간격 */
.ck-item + .ck-item { margin-top: 20px; }
.ck-item-thumb { flex: 0 0 76px; width: 76px; aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--c-gray-100); }
.ck-item-body { flex: 1 1 auto; min-width: 0; }
.ck-item-name { font-size: var(--fs-body1); font-weight: var(--fw-bold); }
.ck-item-qty { margin-top: 6px; font-size: var(--fs-body2); color: var(--c-text-tertiary); }
.ck-item-price { flex: 0 0 auto; font-size: var(--fs-sh2); font-weight: var(--fw-bold); }
/* 배송지 */
.ck-picks { display: flex; gap: 32px; }
.ck-pick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-body2); }
.ck-addr { margin-top: 22px; }
.ck-addr-line + .ck-addr-line { margin-top: 12px; }
.ck-newaddr { display: grid; gap: 14px; margin-top: 22px; }
/* ⚠️ [hidden] 은 UA 규칙이라 위 display 선언에 진다 — 반드시 명시 가드를 둔다
(기본 배송지를 골라도 신규 입력 폼이 계속 보이는 문제가 실제로 났다) */
.ck-newaddr[hidden] { display: none; }
.ck-memo { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-divider); }
/* 결제 수단 — 3분할 버튼 */
.ck-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.ck-method { position: relative; display: block; cursor: pointer; }
.ck-method-input { position: absolute; width: 0; height: 0; opacity: 0; }
.ck-method-label {
display: flex; align-items: center; justify-content: center;
height: 56px; border-radius: var(--r-sm);
background: var(--c-gray-100); border: 1px solid transparent;
font-size: var(--fs-body2); color: var(--c-text-secondary);
transition: background-color .15s, border-color .15s, color .15s;
}
.ck-method:hover .ck-method-label { border-color: var(--c-border-primary); }
.ck-method:has(.ck-method-input:checked) .ck-method-label {
background: var(--c-surface); border-color: var(--c-main-200); color: var(--c-text-primary); font-weight: var(--fw-semibold);
}
.ck-method:has(.ck-method-input:focus-visible) .ck-method-label { box-shadow: 0 0 0 3px var(--c-focus-ring); }
/* 무통장입금 계좌 안내 */
.ck-vbank { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-divider); }
.ck-vbank[hidden] { display: none; }
.ck-bank { padding: 20px 24px; border-radius: var(--r-md); background: var(--c-gray-50); }
.ck-bank > div { display: flex; gap: 24px; font-size: var(--fs-body2); }
.ck-bank > div + div { margin-top: 10px; }
.ck-bank dt { flex: 0 0 72px; color: var(--c-text-tertiary); }
.ck-bank dd strong { font-size: var(--fs-body1); font-weight: var(--fw-bold); color: var(--c-primary); }
.ck-bank-note { margin-top: 12px; font-size: var(--fs-body2); color: var(--c-text-tertiary); }
.ck-vbank .field { margin-top: 20px; }
/* 결제 금액 */
.ck-sum { display: grid; gap: 12px; }
.ck-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.ck-sum-row[hidden] { display: none; }
.ck-sum-row.is-total {
margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--c-divider);
font-size: var(--fs-body1); font-weight: var(--fw-bold); color: var(--c-text-primary);
}
.ck-sum-row.is-total strong { font-size: var(--fs-sh1); color: var(--c-primary); }
.ck-submit { width: 100%; margin-top: 26px; }
.ck-agree-all { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: var(--fs-body2); font-weight: var(--fw-semibold); cursor: pointer; }
.ck-agrees { display: grid; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-divider); }
.ck-agrees li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-agrees label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.ck-agree-view { flex: 0 0 auto; font-size: var(--fs-body2); color: var(--c-text-tertiary); text-decoration: underline; }
/* ── 배송지 목록 모달 ── */
.ck-addr-add {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; height: 56px; border-radius: var(--r-sm);
border: 1px solid var(--c-border-primary); background: var(--c-surface);
font-size: var(--fs-body2); font-weight: var(--fw-semibold); color: var(--c-text-secondary);
}
.ck-addr-add:hover { border-color: var(--c-main-200); color: var(--c-primary); }
.ck-addr-list { display: grid; gap: 16px; margin-top: 16px; }
.ck-addr-list > li { border-radius: var(--r-md); background: var(--c-gray-100); border: 1px solid transparent; overflow: hidden; }
/* 선택된 배송지 — 흰 배경 + Main/200 테두리 */
.ck-addr-list > li:has(.ck-addr-radio:checked) { background: var(--c-surface); border-color: var(--c-main-200); }
.ck-addr-card { position: relative; display: block; padding: 20px 24px 18px; cursor: pointer; }
.ck-addr-radio { position: absolute; top: 20px; right: 24px; }
.ck-addr-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body1); font-weight: var(--fw-bold); }
.ck-addr-badge {
padding: 3px 8px; border-radius: 999px; background: var(--c-main-100); color: var(--c-main-300);
font-size: var(--fs-sub1); font-weight: var(--fw-semibold);
}
.ck-addr-info { display: grid; gap: 6px; margin-top: 14px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.ck-addr-tools { display: flex; gap: 20px; padding: 12px 24px 16px; border-top: 1px solid var(--c-divider); }
.ck-addr-tools button { font-size: var(--fs-body2); color: var(--c-text-tertiary); }
.ck-addr-tools button:hover { color: var(--c-text-primary); }
@media (max-width: 1024px) {
/* ⚠️ `1fr` 이 아니라 `minmax(0, 1fr)` — 위 `.ck-main` 주석과 같은 이유다.
PC 규칙은 이미 minmax(0, …) 인데 이 한 줄만 `1fr` 이라 **모바일에서만** 가로 스크롤이 났다. */
.ck { grid-template-columns: minmax(0, 1fr); }
.ck-side { position: static; }
}
@media (max-width: 768px) {
.ck-card, .ck-side { padding: 20px; }
/* ⚠️ 적립 포인트 표(.ck-pt*)의 모바일 규칙은 **여기 두면 안 된다** — 기본 선언이 이 블록보다
아래(.ck-pt 섹션)에 있어 같은 특이도면 뒤가 이긴다. 그 섹션 바로 아래에 따로 뒀다. */
.ck-methods { gap: 8px; }
.ck-method-label { height: 48px; font-size: var(--fs-sub1); }
.ck-item { gap: 12px; }
.ck-item-thumb { flex-basis: 64px; width: 64px; }
.ck-picks { gap: 16px; }
.ck-bank { padding: 16px; }
.ck-bank > div { gap: 12px; }
.ck-addr-card { padding: 16px; }
.ck-addr-radio { top: 16px; right: 16px; }
.ck-addr-tools { padding: 10px 16px 14px; }
}
/* 약관 모달 본문 — 스크롤 박스 */
.modal-terms {
max-height: 320px; overflow-y: auto;
padding: 20px; border-radius: var(--r-sm); background: var(--c-gray-50);
font-size: var(--fs-body2); color: var(--c-text-secondary); line-height: 1.8;
}
/* ══ 영양제 정보 (P-301) ═══════════════════════════════════════════
2026-08-07 · 출처 page_img/영양제정보.png (실측)
카드는 메인 BEST(.best-*)와 같은 규격이라 그대로 재사용하고, 이 화면 전용만 .np-* 로 덧댄다.
컨테이너 1320 · 카드 312 · 4열 gap 24 — 기존 .best-grid 와 동일 */
/* 추천 배너 — 시안에서 페이지 맨 위. 설문 미완료 회원에게만 */
.np-banner {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
min-height: 208px; padding: 0 52px;
border-radius: var(--r-md); background: var(--c-main-100);
}
.np-banner-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.4; }
.np-banner-sub { margin-top: 12px; font-size: var(--fs-body1); color: var(--c-text-secondary); }
/* 시안 버튼은 완전한 pill 이다(기본 .btn 의 radius 8 이 아니다) */
.np-banner-btn { flex: 0 0 auto; border-radius: 999px; }
.np-banner + .kit-eyebrow { margin-top: 60px; }
/* 검색 카드 — 라벨 + 필드 3개 + 검색/초기화 */
/* ⚠️ flex-wrap 으로 두면 폭이 애매할 때(1100~1200) **버튼만 다음 줄로 떨어져** 어색했다.
grid 로 바꿔 각 칸의 최소폭을 정해 두면, 한 줄에 들어가는 동안은 필드가 같이 줄어들고
좁아지면 아래 미디어쿼리에서 **의도한 모양으로** 줄바꿈한다. */
.np-search {
display: grid; align-items: end; gap: 12px;
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(200px, 1.4fr) auto;
margin-top: 28px; padding: 32px;
border: 1px solid var(--c-border-secondary); border-radius: var(--r-md);
background: var(--c-surface);
}
/* ⚠️ `.field` 는 세로로 쌓이는 폼을 위해 margin-bottom:18 을 갖는다.
`align-items: end` 는 **margin box** 기준이라 그대로 두면 필드가 버튼보다 18px 아래까지
차지해 바닥선이 어긋난다. 가로 배치인 이 검색 카드에서는 그 마진이 필요 없다. */
.np-search .field { margin-bottom: 0; }
.np-search-field, .np-search-kw { min-width: 0; }
.np-search-btns { display: flex; gap: 12px; }
/* 검색 버튼은 Sub_black 배경(브랜드 보라가 아니다) */
.np-btn-search {
width: 80px; height: 48px; border-radius: var(--r-sm);
background: var(--c-sub-black); color: var(--c-on-color); font-size: var(--fs-body1);
}
.np-btn-search:hover { background: var(--c-gray-800); color: var(--c-on-color); }
.np-btn-reset {
width: 80px; height: 48px; border-radius: var(--r-sm);
font-size: var(--fs-sh2); line-height: 1;
}
.np-count { margin-top: 62px; font-size: var(--fs-body1); color: var(--c-text-secondary); }
.np-count > strong { color: var(--c-text-primary); font-weight: var(--fw-bold); }
.np-grid { margin-top: 24px; }
/* 상품명은 시안이 18(SH2)이다 — 메인 BEST(16)보다 한 단계 크다 */
.np-name { font-size: var(--fs-sh2); line-height: 1.4; }
.np-price { margin-top: 12px; font-size: var(--fs-body2); }
.np-price > strong { font-size: var(--fs-sh1); font-weight: var(--fw-bold); }
/* 정가 취소선 + 할인율 (2026-08-13) — 관리자가 정가를 넣은 상품만 나온다 */
.np-price > del { margin-right: 6px; color: var(--c-text-tertiary); font-weight: var(--fw-regular); }
.np-price > .np-off { margin-right: 6px; font-style: normal; font-weight: var(--fw-bold); color: var(--c-red-main); }
.np-subprice { margin-top: 8px; font-size: var(--fs-body2); color: var(--c-primary); }
.np-subprice > strong { font-weight: var(--fw-bold); }
/* 할인율은 보라가 아니라 회색 (시안) */
.np-subprice > em { font-style: normal; color: var(--c-text-tertiary); }
/* 찜한 상태 — 호버 액션바의 하트를 채워 보이게 (에셋이 한 벌이라 색으로 구분) */
/* 찜 완료 — **채워진 하트 에셋으로 교체** (2026-08-10 에셋 수급)
에셋 규격이 off 와 같아(49×44 · 2x) 위 `transform: scale(.5)` 가 그대로 적용된다.
⚠️ 이전에는 on 에셋이 없어 opacity 로 흉내 냈다 — 그 임시 처리를 걷어냈다.
⚠️ `content: url()` 이라 shop.js 가 `.is-on` 만 토글하면 초기 렌더·클릭 양쪽에서 알아서 바뀐다. */
.best-act.is-on > img { content: url("../img/common/wish_icon_white_on.png"); }
@media (max-width: 1024px) {
.np-banner { min-height: 0; padding: 32px; flex-direction: column; align-items: flex-start; }
/* 한 줄에 다 넣으면 셀렉트가 너무 좁아진다 → **성분·고민 / 검색어+버튼** 두 줄로 나눈다.
⚠️ 검색어 basis 를 `100% − 버튼폭` 으로 잡아 **버튼이 검색창 옆에 딱 붙게** 한다.
그냥 wrap 시키면 폭에 따라 버튼만 또 다음 줄로 떨어진다.
⚠️ 성분·고민은 basis 190 이라 폭이 더 좁아지면(≈470px 이하) **한 줄에 하나씩** 내려간다
— 두 칸으로 붙여 두면 "프로바이오틱스" 같은 긴 항목이 잘린다. 새 브레이크포인트는 쓰지 않는다. */
.np-search { display: flex; flex-wrap: wrap; align-items: flex-end; }
.np-search-field { flex: 1 1 190px; }
.np-search-kw { flex: 1 1 calc(100% - 184px); } /* 184 = 버튼 172 + gap 12 */
.np-search-btns { flex: 0 0 auto; }
}
@media (max-width: 768px) {
.np-banner { padding: 24px 20px; }
/* ── 검색 영역 컴팩트 (2026-08-12) ────────────────────────────────
예전에는 라벨 3줄 + 컨트롤 3줄 + 버튼 1줄이라 **높이가 340px 를 넘어**
폰에서 첫 화면이 검색창으로 꽉 찼다(상품이 스크롤해야 보였다).
두 줄로 줄인다:
[성분 ▾] [고민 ▾]
[검색어 ..........] [검색] [↺]
⚠️ 라벨은 **지우지 않고 숨긴다**(.sr-only 와 같은 처리) — 화면에서만 빼고
스크린리더에는 남긴다. 셀렉트 첫 항목('전체 성분')과 placeholder 가 역할을 대신한다.
⚠️ 셀렉트를 2칸으로 붙이면 긴 항목명은 잘린다(펼치면 전체가 보인다) —
폰에서는 영역을 줄이는 쪽을 택했다. */
/* 제목~검색 사이 여백도 줄인다 — 첫 화면에 상품이 보이는 게 우선이다 */
.np-banner + .kit-eyebrow { margin-top: 36px; }
.np-search { margin-top: 16px; padding: 0; gap: 8px; border:none;}
.np-search .field-label {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; white-space: nowrap; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* 성분·고민 — 한 줄에 둘 (좁아도 내려가지 않게 50% 고정) */
.np-search-field { flex: 1 1 calc(50% - 4px); min-width: 0; }
/* 검색어는 남는 폭을 다 먹고, 버튼 둘은 그 옆에 붙는다 */
.np-search-kw { flex: 1 1 120px; }
.np-search-btns { flex: 0 0 auto; gap: 8px; }
.np-search .select, .np-search .input { height: 44px; }
.np-btn-search { width: auto; min-width: 60px; height: 44px; padding: 0 14px; }
.np-btn-reset { width: 44px; height: 44px; padding: 0; }
.np-count { margin-top: 28px; }
}
/* ══ 영양제 상세 (P-302) ═══════════════════════════════════════════
2026-08-07 · 출처 page_img/영양제정보_상품상세.png (실측)
골격은 키트 상세(.pd-*)와 같고 이 화면 전용만 .pv-* 로 덧댄다. */
/* 제목 + 찜 하트 가로 배치 (상단 정보 · 사이드 카드 공용) */
.pd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* 찜 하트 — 에셋이 없어 문자 ♥ 로 그린다. 켜지면 Red/main */
.nt-wish {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
font-size: 18px; line-height: 1;
color: var(--c-gray-300); background: transparent;
transition: color .15s, transform .15s;
}
.nt-wish:hover { transform: scale(1.08); }
.nt-wish.is-on { color: var(--c-red-main); }
.nt-wish:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); }
.nt-wish.is-lg { width: 40px; height: 40px; font-size: 22px; }
/* '바로 구매' — 시안의 검정 버튼. 기본 팔레트에 없어 여기서 정의한다 */
.btn-dark { background: var(--c-sub-black); color: var(--c-on-color); }
.btn-dark:hover { background: var(--c-gray-800); color: var(--c-on-color); }
.pv-cat {
display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
border-radius: 999px; background: var(--c-main-100); color: var(--c-main-300);
font-size: var(--fs-sub1); font-weight: var(--fw-semibold);
}
.pd-info .pd-head { margin-top: 12px; }
.pv-rating { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-body2); }
.pv-star { color: var(--c-sub-gold); }
.pv-rating > strong { font-weight: var(--fw-bold); }
.pv-review-link { color: var(--c-text-tertiary); text-decoration: underline; }
/* 가격 박스 — 단건 / 정기구독 2행, 점선 구분 */
.pv-pricebox {
margin-top: 20px; padding: 4px 24px; border-radius: var(--r-md);
background: var(--c-gray-100);
}
.pv-price-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 0;
}
.pv-price-row + .pv-price-row { border-top: 1px dashed var(--c-border-secondary); }
.pv-price-label { font-size: var(--fs-body2); color: var(--c-text-secondary); }
.pv-price { font-size: var(--fs-sh1); font-weight: var(--fw-bold); }
.pv-price.is-accent { color: var(--c-primary); }
.pv-price-right { display: inline-flex; align-items: center; gap: 10px; }
.pv-rate { font-style: normal; font-size: var(--fs-body2); font-weight: var(--fw-semibold); color: var(--c-red-main); }
/* 정가 취소선 (2026-08-13) — 단건 결제가 행. 할인율은 .pv-rate 를 그대로 쓴다(`↓` 없이 `%` 만) */
.pv-listprice { font-size: var(--fs-body2); color: var(--c-text-tertiary); }
.pv-point { font-style: normal; color: var(--c-primary); font-weight: var(--fw-bold); }
.pd-row.is-qty, .pv-price-row.is-qty { justify-content: space-between; }
/* 구매 버튼 3종 — 장바구니 / 바로 구매 / 정기구독 신청 */
.pv-buys { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.pv-buys > form { flex: 0 0 auto; }
.pv-buys > form:last-child {flex:1}
.pv-buys > form > .btn { min-width: 136px;width:100%;}
.pv-buys > .btn { flex: 0 0 auto; min-width: 136px; }
.pv-buys .pv-sub-btn { flex: 2; }
/* 사이드 카드는 폭이 좁아 2열 + 전폭 1개로 접는다 */
.pv-buys.is-side > form, .pv-buys.is-side > .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
.pv-buys.is-side > form > .btn { width: 100%; min-width: 0; }
.pv-buys.is-side .pv-sub-btn { flex: 1 1 100%; }
.pv-side-note { font-size: var(--fs-sub1); color: var(--c-text-tertiary); margin-top: 16px; }
/* ── 상품 옵션 선택기 ─────────────────────────────────────────── */
.pv-opt { margin-top: 24px; border: 1px solid var(--c-gray-800); border-radius: var(--r-sm); }
.pv-opt-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; height: 56px; padding: 0 18px;
background: var(--c-gray-100); font-size: var(--fs-body1); font-weight: var(--fw-semibold);
border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.pv-opt-caret { transition: transform .15s; }
.pv-opt-head[aria-expanded="false"] .pv-opt-caret { transform: rotate(180deg); }
.pv-opt-list { border-top: 1px solid var(--c-gray-800); }
.pv-opt-list[hidden] { display: none; }
.pv-opt-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 16px 18px; text-align: left;
}
.pv-opt-list > li + li .pv-opt-item { border-top: 1px solid var(--c-divider); }
.pv-opt-item:hover { background: var(--c-gray-50); }
.pv-opt-item-main { min-width: 0; }
.pv-opt-name { display: block; font-size: var(--fs-body2); color: var(--c-text-primary); }
.pv-opt-price { display: block; margin-top: 6px; font-size: var(--fs-body2); }
.pv-opt-price > strong { font-weight: var(--fw-bold); }
.pv-opt-price > em { font-style: normal; margin-left: 6px; color: var(--c-primary); }
.pv-opt-ship {
flex: 0 0 auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
border-radius: var(--r-sm); background: var(--c-primary); color: var(--c-on-color);
font-size: var(--fs-sub1); font-weight: var(--fw-semibold);
}
/* 선택한 옵션 목록 */
.pv-picked { border-top: 1px solid var(--c-gray-800); }
.pv-picked-item { padding: 16px 18px; background: var(--c-gray-50); }
.pv-picked-item + .pv-picked-item { border-top: 1px solid var(--c-divider); }
.pv-picked-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pv-picked-name { font-size: var(--fs-body2); color: var(--c-text-primary); }
.pv-picked-name > span { display: block; margin-top: 4px; color: var(--c-text-tertiary); }
.pv-picked-del { color: var(--c-text-tertiary); font-size: var(--fs-body1); }
.pv-picked-del:hover { color: var(--c-text-primary); }
.pv-picked-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.pv-picked-price { font-size: var(--fs-body1); font-weight: var(--fw-bold); }
.pv-picked-empty { padding: 16px 18px; border-top: 1px solid var(--c-gray-800); font-size: var(--fs-body2); color: var(--c-text-tertiary); }
.pv-picked-empty[hidden] { display: none; }
.pv-total { padding: 16px 18px; border-top: 1px solid var(--c-gray-800); text-align: right; font-size: var(--fs-body2); }
.pv-total > strong { margin-left: 8px; font-size: var(--fs-sh1); font-weight: var(--fw-bold); }
.pv-total > em { font-style: normal; margin-left: 6px; color: var(--c-text-tertiary); }
/* ── 탭 sticky ────────────────────────────────────────────────
⚠️ 헤더가 sticky 74 라 그 아래에 붙는다. 배경을 깔지 않으면 본문이 비쳐 보인다.
⚠️ `padding-top` 이 없으면 탭 글자가 헤더 경계에 딱 붙는다 → 상단 여백을 준다.
이 패딩까지 포함한 높이가 `--pd-tabs-h` 이고, 아래 사이드 카드가 그만큼 더 내려간다. */
:root { --pd-tabs-h: 67px; } /* 탭 47 + 상단 패딩 20 */
.pd-tabs.is-sticky {
position: sticky; top: var(--header-h); z-index: 90;
padding-top: 20px;
background: var(--c-bg-primary);
}
/* 우측 구매 카드도 sticky 다. 탭 바가 고정돼 있으므로 **그 아래**에서 멈춰야 가려지지 않는다.
⚠️ 키트 상세는 탭이 sticky 가 아니라 기본값(헤더+24)을 그대로 쓴다 → 인접 형제로 한정한다. */
.pd-tabs.is-sticky + .pd-panel .pd-side {
top: calc(var(--header-h) + var(--pd-tabs-h) + 24px);
}
/* ⚠️ sticky 는 **부모가 자기보다 길어야** 움직인다.
탭 본문(상세 설명·후기·문의)이 짧으면 패널 높이 = 카드 높이가 되어 이동 여지가 0 이 되고,
카드가 붙지 않고 페이지와 함께 밀려 올라간다(후기 0건 상품에서 실제로 그랬다).
패널에 최소 한 화면 높이를 줘서 카드가 붙을 공간을 확보한다. */
.pd-tabs.is-sticky + .pd-panel {
min-height: calc(100vh - var(--header-h) - var(--pd-tabs-h));
}
.pv-body { min-width: 0; }
/* 탭 패널 — 서버가 셋 다 그리고 JS 가 보이기만 바꾼다 (2026-08-14)
⚠️ 브라우저 기본값(`[hidden]{display:none}`)에 기대지 않고 **명시**한다.
다른 규칙이 `display` 를 주면 기본값이 밀려 **숨겨야 할 탭이 그대로 보인다**
(`.pd-panel[hidden]` 에서 실제로 겪은 문제와 같은 이유). */
.pv-tabpanel[hidden] { display: none; }
.pv-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; }
.pv-sec-title { font-size: var(--fs-sh1); font-weight: var(--fw-bold); margin-top: 40px; }
.pv-sec-head .pv-sec-title { margin-top: 0; }
.pv-sec-title > em { font-style: normal; color: var(--c-primary); }
/* ── 후기 탭 ─────────────────────────────────────────────────── */
.pv-rate-sum {
display: flex; align-items: center; gap: 40px;
margin-top: 20px; padding: 28px 40px; border-radius: var(--r-sm); background: var(--c-gray-50);
}
.pv-rate-avg { text-align: center; flex: 0 0 auto; min-width: 180px; }
.pv-rate-avg > strong { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.pv-stars { margin-top: 8px; color: var(--c-gray-300); letter-spacing: 2px; }
.pv-stars > span.is-on { color: var(--c-sub-gold); }
.pv-stars.is-sm { margin-top: 6px; font-size: var(--fs-body2); }
.pv-rate-bars { display: flex; align-items: flex-end; gap: 20px; padding-left: 40px; border-left: 1px solid var(--c-divider); }
.pv-rate-bars > li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-bar { display: block; width: 6px; height: 60px; border-radius: 999px; background: var(--c-gray-200); position: relative; }
.pv-bar > i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: var(--c-primary); }
.pv-bar-label { font-size: var(--fs-sub1); color: var(--c-text-tertiary); }
.pv-reviews { margin-top: 28px; }
.pv-review { padding: 22px 0; border-bottom: 1px solid var(--c-divider); }
.pv-review-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body2); }
/* 고정핀 아이콘 — 2x 에셋(40×40)을 20×20 으로. ⚠️ .pv-review-head 가 flex 라 flex-shrink 를 막아야 눌리지 않는다 */
.pv-pin { flex: 0 0 20px; width: 20px; height: 20px; }
.pv-review-who { font-weight: var(--fw-semibold); }
.pv-review-date { margin-left: auto; color: var(--c-text-tertiary); }
.pv-review-body { margin-top: 10px; font-size: var(--fs-body2); color: var(--c-text-primary); }
.pv-review-reply { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--c-gray-100); font-size: var(--fs-body2); color: var(--c-text-secondary); }
/* ── 후기 목록 항목 = 버튼(클릭 시 상세 팝업) · 2026-08-12 ─────────
⚠️ 안쪽이 에서 으로 바뀌었다(버튼 안에 블록 요소를 넣지 않으려고)
→ 줄바꿈이 되도록 display:block 을 명시한다. */
.pv-review-open {
display: block; width: 100%; padding: 0;
background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.pv-review-open .pv-review-body,
.pv-review-open .pv-stars { display: block; }
.pv-review-open:hover .pv-review-body { color: var(--c-primary); }
.pv-review-open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); border-radius: var(--r-sm); }
/* 목록은 요약이다 — 본문 3줄까지만 보이고 나머지는 팝업에서 */
.pv-review-body.is-clamp {
display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden;
}
/* 첨부 이미지 — 목록 썸네일(최대 3장 · 넘치면 마지막에 +N) */
.pv-review-thumbs { display: flex; gap: 8px; margin-top: 12px; }
.pv-review-thumb { position: relative; display: block; width: 72px; height: 72px; }
.pv-review-thumb > img {
width: 100%; height: 100%; object-fit: cover;
border-radius: var(--r-sm); border: 1px solid var(--c-divider);
}
.pv-review-more {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
border-radius: var(--r-sm); background: var(--c-backdrop);
color: var(--c-on-color); font-size: var(--fs-body2); font-weight: var(--fw-semibold); font-style: normal;
}
/* ── 후기 상세 팝업 본문 ─────────────────────────────────────── */
.pv-rvd-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body2); }
.pv-rvd-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.pv-rvd-imgs img {
width: 140px; height: 140px; object-fit: cover;
border-radius: var(--r-sm); border: 1px solid var(--c-divider);
}
.pv-rvd-body { margin-top: 16px; font-size: var(--fs-body2); color: var(--c-text-primary); line-height: 1.7; }
@media(max-width:1090px){
.pv-buys > form {flex:1;}
}
@media (max-width: 768px) {
.pv-review-thumb { width: 64px; height: 64px; }
.pv-rvd-imgs img { width: calc(50% - 4px); height: auto; aspect-ratio: 1 / 1; }
}
/* ── 상품 문의 탭 ─────────────────────────────────────────────── */
.pv-qna { margin-top: 20px; border-top: 1px solid var(--c-gray-800); }
.pv-qna-item { border-bottom: 1px solid var(--c-divider); }
.pv-qna-row {
display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 8px;
text-align: left; font-size: var(--fs-body2);
}
.pv-qna-row:not(.is-locked):hover { background: var(--c-gray-50); }
.pv-qna-row.is-locked { color: var(--c-text-tertiary); cursor: default; }
.pv-qna-no { flex: 0 0 40px; color: var(--c-text-tertiary); }
.pv-qna-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
/* 비밀글 자물쇠 — 에셋 27×30(2x) → 렌더 14. 비율은 높이 auto 로 지킨다 */
.pv-lock { flex: 0 0 auto; width: 14px; height: auto; }
.pv-qna-date { flex: 0 0 auto; color: var(--c-text-tertiary); }
/* 상태 — 시안은 **pill 뱃지**다 (60×24 실측). 예전에는 글자만 색으로 구분했다.
답변대기 배경 Gray/100 · 글자 Gray/500
답변완료 배경 Green/bg · 글자 Green/text
⚠️ 공통 `.badge` 는 테두리(1px currentColor)가 있어 쓰지 않는다 — 시안 뱃지는 면만 있다. */
.pv-qna-state {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
min-width: 60px; height: 24px; padding: 0 8px; border-radius: 4px;
background: var(--c-gray-100); color: var(--c-gray-500);
font-size: var(--fs-sub1); font-weight: var(--fw-semibold); line-height: 1;
}
.pv-qna-state.is-done { background: var(--c-green-bg); color: var(--c-green-text); }
/* 질문 본문 — 시안 실측 #F8F8F9(Gray/100). Gray/50 은 거의 흰색이라 블록이 안 보였다.
⚠️ 왼쪽은 **제목 칸에 맞춰 들여쓴다**(8 패딩 + 번호칸 40 + gap 16 = 64) — 시안이 그렇다. */
.pv-qna-body { padding: 18px 8px 22px 64px; background: var(--c-gray-100); }
.pv-qna-body[hidden] { display: none; }
.pv-qna-q { font-size: var(--fs-body2); color: var(--c-text-primary); }
/* 관리자 답변 — 배경 없이 이어 붙는다(질문 블록만 회색) */
.pv-qna-a { margin-top: 18px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
/* ⚠️ 제목은 검정 굵게, **↳ 화살표만 보라**다 (시안). 예전에는 줄 전체가 보라였다. */
.pv-qna-a-head { margin-bottom: 8px; font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.pv-qna-a-head > span { color: var(--c-primary); }
/* ── 상품 문의 작성 폼 (모달) — 시안 실측 ─────────────────────── */
/* 제목 아래 구분선 · 항목 간격은 .field 기본값(margin-bottom 18) */
.pq-form { border-top: 1px solid var(--c-divider); padding-top: 24px; }
.pq-form .field-label > em { color: var(--c-red-main); font-style: normal; }
.pq-form .textarea { min-height: 156px; resize: vertical; }
.pq-content { margin-bottom: 8px; }
.pq-count { margin-top: 8px; text-align: right; font-size: var(--fs-sub1); color: var(--c-text-tertiary); }
/* 체크박스 위에 구분선 (시안) */
.pq-secret {
display: flex; align-items: center; gap: 8px;
margin: 0 0 24px; padding-top: 20px; border-top: 1px solid var(--c-divider);
font-size: var(--fs-body2); color: var(--c-text-secondary); cursor: pointer;
}
/* 취소 / 등록하기 반반 */
.pq-actions { display: flex; gap: 12px; }
.pq-actions > .btn { flex: 1 1 50%; min-width: 0; }
.pq-cancel { background: var(--c-gray-100); color: var(--c-text-primary); }
.pq-cancel:hover { background: var(--c-gray-200); color: var(--c-text-primary); }
@media (max-width: 1024px) {
.pv-rate-sum { flex-direction: column; align-items: stretch; gap: 24px; padding: 24px; }
.pv-rate-bars { padding-left: 0; border-left: 0; justify-content: space-between; }
}
@media (max-width: 768px) {
.pv-buys > form, .pv-buys > .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
.pv-buys > form > .btn { width: 100%; min-width: 0; }
.pv-buys .pv-sub-btn { flex: 1 1 100%; }
/* 번호·날짜를 숨기므로 본문 들여쓰기(64)도 되돌린다 — 안 그러면 왼쪽이 크게 비어 보인다 */
.pv-qna-no, .pv-qna-date { display: none; }
.pv-qna-body { padding-left: 8px; }
.pd-tabs.is-sticky { top: 48px; } /* 모바일 헤더 높이 */
}
/* ══ 무통장입금 안내 (2026-08-12) ═══════════════════════════════════
주문 완료(P-305)·주문 상세(P-403) 공용 — views/partials/deposit_guide.php
⚠️ 계좌번호가 이 박스의 핵심이다 → 다른 줄보다 크고 진하게 둔다. */
.dep-guide {
margin-top: 28px; padding: 24px;
border: 1px solid var(--c-main-200); border-radius: var(--r-md);
background: var(--c-main-100); text-align: left;
}
.dep-guide-title { font-size: var(--fs-sh2); font-weight: var(--fw-bold); color: var(--c-text-primary); }
.dep-guide-lead { margin-top: 6px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.dep-guide-rows { margin-top: 16px; display: grid; gap: 10px; }
.dep-guide-rows > div { display: flex; align-items: baseline; gap: 12px; font-size: var(--fs-body2); }
.dep-guide-rows dt { flex: 0 0 76px; color: var(--c-text-tertiary); }
.dep-guide-rows dd { flex: 1 1 auto; min-width: 0; color: var(--c-text-primary); }
.dep-guide-rows dd strong { font-size: var(--fs-sh2); font-weight: var(--fw-bold); }
.dep-guide-amt strong { color: var(--c-primary); }
.dep-guide-note { margin-top: 16px; font-size: var(--fs-sub1); color: var(--c-text-secondary); }
/* ══ 페이지네이션 (사용자단 공용) ═══════════════════════════════════
2026-08-07 · ⚠️ 관리자 `render_pagination()` 은 Bootstrap 이라 여기서 쓰지 않는다.
partials/pagination.php 가 이 클래스를 쓴다. */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; }
.pager-btn, .pager-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
font-size: var(--fs-body2); color: var(--c-text-secondary);
}
.pager-btn:hover, .pager-num:hover { background: var(--c-gray-100); color: var(--c-text-primary); }
.pager-num.is-on { background: var(--c-primary); color: var(--c-on-color); font-weight: var(--fw-semibold); }
.pager-num.is-on:hover { background: var(--c-primary); color: var(--c-on-color); }
.pager-btn.is-disabled { color: var(--c-text-disabled); pointer-events: none; }
/* ══ 장바구니 (P-303) ══════════════════════════════════════════════
2026-08-07 · 출처 page_img/장바구니(2).png (실측)
좌 872(선택바 + 목록 카드) + 거터 24 + 우 424(결제 금액) — 결제 화면과 같은 골격 */
.page-eyebrow { font-size: var(--fs-body2); font-weight: var(--fw-bold); color: var(--c-main-300); letter-spacing: .5px; }
.page-head > .page-eyebrow + .page-title { margin-top: 12px; font-size: var(--fs-h2); }
.ct-wrap {
display: grid; grid-template-columns: minmax(0, 872fr) minmax(0, 424fr); gap: var(--grid-gutter);
align-items: start;
}
.ct-main { min-width: 0; }
.ct-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ct-all { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-body2); cursor: pointer; }
.ct-card { border: 1px solid var(--c-gray-200); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.ct-head {
display: grid; grid-template-columns: 24px 80px 1fr 140px 120px; align-items: center;
gap: 20px; padding: 18px 24px; background: var(--c-gray-50);
font-size: var(--fs-body2); color: var(--c-text-secondary);
}
.ct-col-name { grid-column: 3; }
.ct-col-qty { grid-column: 4; text-align: center; }
.ct-col-sum { grid-column: 5; text-align: right; }
.ct-list { display: grid; }
.ct-item {
display: grid; grid-template-columns: 24px 80px 1fr 140px 120px; align-items: center;
gap: 20px; padding: 20px 24px;
}
.ct-item + .ct-item { border-top: 1px solid var(--c-gray-200); }
/* 선택 해제한 줄은 톤을 낮춘다 — 합계에 안 들어간다는 신호 */
.ct-item.is-off { opacity: .45; }
.ct-check { display: inline-flex; }
.ct-thumb { display: block; width: 80px; height: 80px; border-radius: var(--r-sm); overflow: hidden; background: var(--c-gray-100); }
.ct-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.ct-info { min-width: 0; }
.ct-name { display: block; font-size: var(--fs-body1); font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.ct-opt { margin-top: 4px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.ct-unit { margin-top: 6px; font-size: var(--fs-body2); color: var(--c-text-tertiary); }
.ct-qty { display: flex; justify-content: center; }
.ct-sum { text-align: right; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.ct-sum > strong { font-size: var(--fs-sh2); font-weight: var(--fw-bold); color: var(--c-text-primary); }
/* 결제 금액 카드 — 스크롤해도 따라온다 */
.ct-side { min-width: 0; }
.ct-side-box {
position: sticky; top: calc(var(--header-h) + 24px);
padding: 28px; border: 1px solid var(--c-gray-200); border-radius: var(--r-lg); background: var(--c-surface);
}
.ct-side-title { font-size: var(--fs-sh2); font-weight: var(--fw-bold); }
.ct-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.ct-pay-opt {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 16px; border: 1px solid var(--c-gray-200); border-radius: var(--r-md);
background: var(--c-gray-50); cursor: pointer;
}
.ct-pay-opt:has(.rdo:checked) { border-color: var(--c-primary); background: var(--c-surface); }
.ct-pay-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.ct-pay-name { font-size: var(--fs-body2); font-weight: var(--fw-semibold); }
.ct-pay-off { color: var(--c-red-main); font-weight: var(--fw-medium); }
.ct-pay-note { margin-top: 10px; font-size: var(--fs-sub1); color: var(--c-text-tertiary); line-height: 1.6; }
.ct-sums { margin-top: 24px; display: grid; gap: 12px; }
.ct-sums > div { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-body2); }
.ct-sums dt { color: var(--c-text-secondary); }
.ct-final {
display: flex; align-items: center; justify-content: space-between;
margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-gray-200);
font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.ct-final > strong { font-size: var(--fs-sh1); font-weight: var(--fw-bold); color: var(--c-primary); }
.ct-side-box > .btn { margin-top: 16px; }
.ct-side-box > .btn + .btn { margin-top: 10px; }
.ct-note { margin-top: 14px; text-align: center; font-size: var(--fs-sub1); color: var(--c-text-tertiary); }
@media (max-width: 1024px) {
.ct-wrap { grid-template-columns: 1fr; }
.ct-side-box { position: static; }
}
@media (max-width: 768px) {
/* 좁은 폭에서는 표 형태를 버리고 2행으로 접는다 (수량·금액이 아래로) */
.ct-head { display: none; }
.ct-item { grid-template-columns: 24px 72px 1fr; gap: 12px; padding: 16px; }
.ct-thumb { width: 72px; height: 72px; }
.ct-qty { grid-column: 3; justify-content: flex-start; }
.ct-sum { grid-column: 3; text-align: left; }
.ct-side-box { padding: 20px; }
}
/* ══ 주문·결제 추가분 (P-304) ══════════════════════════════════════
2026-08-07 · 출처 page_img/장바구니_결제.png
골격(.ck-*)은 키트 결제와 공용이다 — 여기서는 결제 방식·플랜·카드·포인트만 덧댄다. */
.ck-paytype { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.ck-paytype-opt {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 20px; border: 1px solid var(--c-gray-200); border-radius: var(--r-md);
background: var(--c-gray-50); cursor: pointer;
}
.ck-paytype-opt:has(.rdo:checked) { border-color: var(--c-primary); background: var(--c-surface); }
.ck-paytype-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.ck-paytype-body { display: grid; gap: 6px; min-width: 0; }
.ck-paytype-name { font-size: var(--fs-body1); font-weight: var(--fw-semibold); }
.ck-paytype-desc { font-size: var(--fs-sub1); color: var(--c-text-secondary); }
.ck-paytype-note { margin-top: 12px; font-size: var(--fs-sub1); color: var(--c-text-tertiary); line-height: 1.6; }
/* ── 내장 테스트 결제창 (2026-08-11) ────────────────────────────────
포트원 키를 받기 전에 결제 흐름을 밟아 보기 위한 화면이다. **개발 환경에서만** 열린다.
⚠️ z-index 180 — 공통 모달(170) 위, 토스트(200) 아래. 결제창은 무엇보다 위에 있어야 한다.
⚠️ 실제 PG 창을 흉내 내지 않는다 — 테스트라는 사실을 상단에 명확히 적는다. */
.paymock {
position: fixed; inset: 0; z-index: 180;
display: flex; align-items: center; justify-content: center;
padding: var(--page-margin);
background: var(--c-backdrop);
}
.paymock-box {
width: 380px; max-width: 100%;
padding: 26px 24px 22px; border-radius: var(--r-md);
background: var(--c-surface); text-align: center;
}
.paymock-flag {
padding: 8px 10px; border-radius: var(--r-sm);
background: var(--c-gold-bg); color: var(--c-gold-text);
font-size: var(--fs-sub1);
}
.paymock-name { margin-top: 18px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.paymock-amount { margin-top: 6px; font-size: var(--fs-sh1); font-weight: var(--fw-bold); }
.paymock-info { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); text-align: left; }
.paymock-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.paymock-info dt { font-size: var(--fs-body2); color: var(--c-text-secondary); }
.paymock-info dd { font-size: var(--fs-body2); }
.paymock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.paymock-actions .btn { width: 100%; }
/* 포트원 상태 안내 (2026-08-11) — 테스트 결제는 눈에 띄게, 미연결은 담담하게 */
.ck-pg-note { margin-top: 12px; font-size: var(--fs-sub1); color: var(--c-text-tertiary); line-height: 1.6; }
.ck-pg-note.is-test {
padding: 10px 14px; border-radius: var(--r-sm);
background: var(--c-gold-bg); color: var(--c-gold-text);
}
.ck-sub-label { margin-top: 28px; margin-bottom: 10px; font-size: var(--fs-body2); color: var(--c-text-secondary); }
.ck-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ck-plan { display: block; cursor: pointer; }
.ck-plan-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-plan-body {
display: grid; gap: 6px; justify-items: center; padding: 18px 12px;
border: 1px solid var(--c-gray-200); border-radius: var(--r-md); background: var(--c-gray-50); text-align: center;
}
.ck-plan-input:checked + .ck-plan-body { border-color: var(--c-primary); background: var(--c-surface); }
.ck-plan-input:focus-visible + .ck-plan-body { box-shadow: 0 0 0 3px var(--c-focus-ring); }
.ck-plan-name { font-size: var(--fs-body1); font-weight: var(--fw-semibold); }
.ck-plan-bonus { font-size: var(--fs-sub1); color: var(--c-text-secondary); }
.ck-plan-input:checked + .ck-plan-body .ck-plan-bonus { color: var(--c-primary); font-weight: var(--fw-semibold); }
.ck-plan-foot { margin-top: 12px; font-size: var(--fs-sub1); color: var(--c-text-tertiary); line-height: 1.6; }
/* ── 플랜별 적립 포인트 표 (2026-08-25 · 요청 #2) ─────────────────────
완주 보너스만 보이고 월 적립·총액을 알 수 없어 네 값으로 나눠 표기한다.
⚠️ 기존 `.ck-plan*` 규칙은 건드리지 않는다 — 카드 안의 '완주 시 +N P' 는 그대로 둔다. */
.ck-pt { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-md); background: var(--c-gray-50); }
.ck-pt-cap {
display: flex; align-items: baseline; gap: 8px;
font-size: var(--fs-body2); font-weight: var(--fw-semibold); color: var(--c-text-primary);
}
.ck-pt-cap span { font-size: var(--fs-sub1); font-weight: var(--fw-regular); color: var(--c-text-tertiary); }
/* 좁은 화면에서 표만 가로로 흐르게 — 페이지가 밀리지 않는다 */
.ck-pt-scroll { margin-top: 10px; overflow-x: auto; }
.ck-pt-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body2); white-space: nowrap; }
.ck-pt-table th, .ck-pt-table td { padding: 8px 10px; text-align: right; }
.ck-pt-table thead th {
font-size: var(--fs-sub1); font-weight: var(--fw-medium); color: var(--c-text-tertiary);
border-bottom: 1px solid var(--c-line);
}
.ck-pt-table tbody th, .ck-pt-table thead th:first-child { text-align: left; }
.ck-pt-table tbody th { font-weight: var(--fw-semibold); color: var(--c-text-secondary); }
.ck-pt-table tbody tr + tr th, .ck-pt-table tbody tr + tr td { border-top: 1px solid var(--c-divider); }
.ck-pt-table .is-total { font-weight: var(--fw-bold); color: var(--c-text-primary); }
.ck-pt .ck-plan-foot { margin-top: 10px; }
/* 선택한 플랜 강조 — `:has()` 미지원이면 강조만 빠지고 표는 그대로 읽힌다 (건강목표 카드와 같은 방식)
🔄 2026-08-27 (요청 3) — 강조가 거의 안 보였다. 표 배경이 이미 `--c-gray-50` 인데
선택 행에 `--c-bg-primary`(흰색)를 깔아 **차이가 사실상 없었다**.
→ 브랜드 색 배경 + 왼쪽 굵은 선 + 글자 강조로 바꾼다.
⚠️ `tr` 배경은 셀 배경에 가려질 수 있어 **th/td 에 직접** 준다(border-collapse 표에서 안전하다). */
.ck-subonly:has(.ck-plan-input[value="3"]:checked) .ck-pt-table tr[data-plan="3"] > *,
.ck-subonly:has(.ck-plan-input[value="6"]:checked) .ck-pt-table tr[data-plan="6"] > *,
.ck-subonly:has(.ck-plan-input[value="12"]:checked) .ck-pt-table tr[data-plan="12"] > * {
background: var(--c-main-100);
color: var(--c-main-300);
font-weight: var(--fw-semibold);
}
/* 왼쪽 끝에 굵은 선 — 어느 줄이 선택됐는지 표 밖에서도 바로 보인다 */
.ck-subonly:has(.ck-plan-input[value="3"]:checked) .ck-pt-table tr[data-plan="3"] > *:first-child,
.ck-subonly:has(.ck-plan-input[value="6"]:checked) .ck-pt-table tr[data-plan="6"] > *:first-child,
.ck-subonly:has(.ck-plan-input[value="12"]:checked) .ck-pt-table tr[data-plan="12"] > *:first-child {
box-shadow: inset 3px 0 0 var(--c-main-300);
}
.ck-subonly:has(.ck-plan-input[value="3"]:checked) .ck-pt-table tr[data-plan="3"] .is-total,
.ck-subonly:has(.ck-plan-input[value="6"]:checked) .ck-pt-table tr[data-plan="6"] .is-total,
.ck-subonly:has(.ck-plan-input[value="12"]:checked) .ck-pt-table tr[data-plan="12"] .is-total {
color: var(--c-main-300); font-weight: var(--fw-bold);
}
/* 선택되지 않은 줄은 한 톤 낮춰 대비를 키운다 */
.ck-subonly:has(.ck-plan-input:checked) .ck-pt-table tbody tr:not([data-plan="3"]):not([data-plan="6"]):not([data-plan="12"]) { opacity: 1; }
.ck-pt-table tbody tr { transition: background .15s; }
/* 🔄 2026-08-27 (요청 4) — 폰에서 **가로 스크롤을 아예 없앤다.**
`nowrap` 때문에 마지막 열(총 적립)이 스크롤 밖으로 밀려 있었다 → 줄바꿈을 허용하고
`table-layout: fixed` 로 네 칸이 화면 폭을 나눠 갖게 한다. 스크롤 컨테이너도 끈다.
⚠️ 이 블록은 **`.ck-pt` 기본 선언보다 뒤**에 있어야 한다 — 위쪽 `.ck-card` 모바일 블록에 두면
기본 선언이 뒤에 와서 덮어쓴다(실제로 그렇게 적용되지 않았다). */
@media (max-width: 768px) {
.ck-pt { padding: 14px 12px; }
.ck-pt-scroll { overflow-x: visible; }
.ck-pt-table { font-size: var(--fs-sub1); white-space: normal; table-layout: fixed; }
.ck-pt-table th, .ck-pt-table td { padding: 7px 4px; word-break: keep-all; }
/* 플랜 이름 칸만 고정폭 — 나머지 세 칸이 고르게 나눠 갖는다 */
.ck-pt-table thead th:first-child, .ck-pt-table tbody th { width: 54px; }
}
/* 아주 좁은 기기(360 이하) — 숫자는 중간에서 끊을 수 없어 칸 폭·글자를 한 단계 더 줄인다 */
@media (max-width: 380px) {
.ck-pt { padding: 12px 8px; }
.ck-pt-table { font-size: 11px; }
.ck-pt-table th, .ck-pt-table td { padding: 6px 2px; }
.ck-pt-table thead th:first-child, .ck-pt-table tbody th { width: 44px; }
}
.ck-cards { display: grid; gap: 10px; }
.ck-card-pick {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 20px; border: 1px solid var(--c-gray-200); border-radius: var(--r-md);
background: var(--c-gray-50); font-size: var(--fs-body1); cursor: pointer;
}
.ck-card-pick:has(.rdo:checked) { border-color: var(--c-primary); background: var(--c-surface); }
/* 결제 방식 전용 영역 — ⚠️ [hidden] 가드 필수 (아래 display 선언이 UA 규칙을 이긴다) */
.ck-singleonly[hidden] { display: none; }
/* 카드 등록 폼 — 화면단만(빌링키 발급 미연동) */
.ck-cardform {
margin-top: 16px; padding: 24px;
border: 1px solid var(--c-border-primary); border-radius: var(--r-md); background: var(--c-gray-50);
}
.ck-cardform[hidden] { display: none; }
.ck-cardform .ck-picks { margin-top: 0; margin-bottom: 18px; }
.ck-cardform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ck-cardform-row .field[hidden] { display: none; }
.ck-cardform > .btn { margin-top: 8px; }
@media (max-width: 768px) { .ck-cardform-row { grid-template-columns: 1fr; } }
.ck-card-add {
width: 100%; margin-top: 10px; padding: 18px; border: 1px solid var(--c-gray-200);
border-radius: var(--r-md); background: var(--c-surface);
font-size: var(--fs-body1); color: var(--c-text-secondary);
}
.ck-card-add:disabled { color: var(--c-text-disabled); cursor: not-allowed; }
/* 2026-08-12 —