@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Playfair+Display:wght@800;900&display=swap");
/* 루딤웹 기본 쇼핑몰 스킨 · 공용 스타일 (네 스킨이 같이 써요)
   규칙 3가지
   1. 값은 1번 :root 변수로. 스킨은 변수만 바꾸고, 꼭 다른 모양만 스킨 파일 끝에 덧붙여요
   2. 같은 부품은 같은 클래스 하나: 버튼 btn · 아이콘 버튼 btn-icon · 글자 버튼 more · 입력 칸 input · 줄 목록 rows · 글자 크기 h1~h4 · 작은 글 meta
   3. 한 화면에서만 쓰는 모양도 이 파일 한 곳에 (페이지마다 css 파일을 만들지 않아요) */

/* 1. 변수 (진열대 기본값) */
:root {
  --brand: oklch(0.48 0.17 262);
  --ink: #16171b;      /* 글자 */
  --ink-2: #686b75;    /* 흐린 글자 */
  --line: #e3e4e9;     /* 선 */
  --bg: #f3f4f6;       /* 옅은 면 (그림 자리 · 입력 칸 · 띠) */
  --surface: #ffffff;  /* 바탕 */
  --active: var(--ink); /* 고른 탭 · 쪽 번호 · 분류 밑줄 */
  --kakao: #fee500; --kakao-ink: #191919; /* 카카오 로그인 버튼(카카오 지정 색) */
  --s0: 4px; --s1: 8px; --s1-5: 12px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --r0: 4px; --r1: 8px; --r2: 16px; --r-pill: 999px; /* 배지 · 칸 · 큰 면 · 알약 */
  --t0: 12px; --t1: 13px; --t2: 15px; --t3: 17px; --t4: 20px; --t5: 24px; --t6: 28px; --t7: 48px;
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-h: var(--font);  /* 제목 글꼴 */
  --w-h: 700;             /* 제목 굵기 */
  --w-num: 800;           /* 금액 · 번호 굵기 */
  --ls-kicker: 0;         /* 머리말 글자 간격 */
  --h: 52px; --h-sm: 44px; --h-xs: 36px; /* 버튼 · 입력 칸 높이 */
  --hd: 104px;            /* 붙어 따라오는 상단바 높이 */
  --hd-bar: 56px; --hd-bar-stuck: 56px; --hd-nav: 48px;
  --pcard-ratio: 4 / 5; --pcard-r: var(--r1);
  --price: var(--t3);
  --banner-ratio: 1; --banner-h: 540px;
  --sec-gap: var(--s5);   /* 메인 구역 사이 */
  --cols: 4; --cols-main: 5; /* PC 상품 줄 칸 수 (목록 · 메인) */
  --ease: cubic-bezier(.22, .61, .36, 1); --t-fast: 200ms; --t-slow: 500ms; /* 움직임 */ --t-panel: 380ms; --w-panel: 640px; /* 장바구니 패널(엔진이 닫고 400ms 뒤 숨김) · 폭 */
}
@media (min-width: 1024px) {
  :root { --t1: 14px; --t2: 16px; --t3: 18px; --t4: 22px; --t5: 28px; --t6: 36px; --h: 56px; --hd: 116px; --hd-bar: 80px; --hd-bar-stuck: 64px; --hd-nav: 52px; --sec-gap: var(--s6); }
}

/* 2. 리셋 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--t2); line-height: 1.6; color: var(--ink); background: var(--surface); word-break: keep-all; -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
html.is-panel { overflow: hidden; }   /* 패널(로그인 · 장바구니 등)이 열리면 뒤 페이지 스크롤바 숨김, 스크롤은 패널 안 하나만(11/10 대표) */
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; } /* 엔진이 값 없는 자리에 hidden 을 달아요. 어떤 부품이든 숨게 이 한 줄만 !important */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .sm-hide { display: none !important; } }
@media (max-width: 1023px) { .pc-only { display: none !important; } }
@media (min-width: 1024px) { .m-only { display: none !important; } }

/* 3. 틀 · 쌓기 */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--s2); }
.w-md { max-width: 960px; }
.w-sm { max-width: 720px; }
.main { min-height: 60vh; padding-bottom: var(--s5); animation: fade-in var(--t-slow) var(--ease) both; }
.stack, .stack-0, .stack-1, .stack-2 { display: grid; gap: var(--s3); align-content: start; justify-items: stretch; }
.stack-0 { gap: var(--s0); }
.stack-1 { gap: var(--s1); }
.stack-2 { gap: var(--s2); }
.page-title { padding: var(--s3) 0 var(--s2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); padding-top: var(--s2); font-size: var(--t1); color: var(--ink-2); }
.crumbs .icon { width: 14px; height: 14px; }
.page-tabs { margin: 0 calc(var(--s2) * -1) var(--s3); padding: 0 var(--s2); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); margin: var(--s3) 0; padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.split { display: grid; }
.panels { display: grid; }
@media (min-width: 768px) {
  .wrap { padding: 0 var(--s4); }
  .page-tabs { margin: 0 0 var(--s4); padding: 0; flex-wrap: wrap; }
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s3); align-items: start; }
  .split-side { position: sticky; top: calc(var(--hd) + var(--s3)); }
  .panels { gap: var(--s3); }
}
@media (min-width: 1024px) {
  .main { padding-bottom: var(--s6); }
  .page-title { padding: var(--s4) 0 var(--s3); }
  .bar { margin: var(--s4) 0; }
  .split { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s4); }
  .panels { gap: var(--s4); }
}

/* 4. 글자: 제목 h1~h4 · 금액 num · 작은 글 meta · 머리말 kicker · 한 줄 자르기 clip */
.h1, .h2, .h3, .h4 { font-family: var(--font-h); font-weight: var(--w-h); letter-spacing: -.02em; }
.h1 { font-size: var(--t6); line-height: 1.25; }
.h2 { font-size: var(--t5); line-height: 1.3; }
.h3 { font-size: var(--t4); line-height: 1.4; letter-spacing: -.01em; }
.h4 { font-size: var(--t3); font-weight: calc(var(--w-h) - 100); line-height: 1.5; letter-spacing: 0; }
.is-pinned .h4 { font-weight: var(--w-h); }
.num { font-size: var(--t5); font-weight: var(--w-num); font-variant-numeric: tabular-nums; }
.meta { font-size: var(--t1); color: var(--ink-2); }
.kicker { font-size: var(--t1); font-weight: 700; letter-spacing: var(--ls-kicker); color: var(--brand); }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 5. 아이콘 · 그림 자리 */
.icon { display: inline-block; flex: none; width: var(--s3); height: var(--s3); background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.icon-menu { --i: url(../assets/icons/menu.svg); }
.icon-close { --i: url(../assets/icons/close.svg); }
.icon-cart { --i: url(../assets/icons/cart.svg); }
.icon-home { --i: url(../assets/icons/home.svg); }
.icon-grid { --i: url(../assets/icons/grid.svg); }
.icon-receipt { --i: url(../assets/icons/receipt.svg); }
.icon-left { --i: url(../assets/icons/left.svg); }
.icon-right { --i: url(../assets/icons/right.svg); }
.icon-down { --i: url(../assets/icons/down.svg); }
.icon-minus { --i: url(../assets/icons/minus.svg); }
.icon-plus { --i: url(../assets/icons/plus.svg); }
.icon-check { --i: url(../assets/icons/check.svg); }
.icon-copy { --i: url(../assets/icons/copy.svg); }
.icon-search { --i: url(../assets/icons/search.svg); }
.icon-alert { --i: url(../assets/icons/alert.svg); }
.icon-box { --i: url(../assets/icons/box.svg); }
.icon-user { --i: url(../assets/icons/user.svg); }
.icon-repeat { --i: url(../assets/icons/repeat.svg); }
.icon-star { --i: url(../assets/icons/star.svg); }
.icon-pin { --i: url(../assets/icons/pin.svg); }
.icon-pen { --i: url(../assets/icons/pen.svg); }
.icon-heart { --i: url(../assets/icons/heart.svg); }
.icon-eye { --i: url(../assets/icons/eye.svg); }
.icon-kakao { --i: url(../assets/icons/kakao.svg); }
.logo-google { display: inline-block; flex: none; width: var(--s3); height: var(--s3); background: url(../assets/icons/google.svg) center / contain no-repeat; } /* 구글 로고는 지정 4색 그대로 */
.img { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--bg); }
.img img { width: 100%; height: 100%; object-fit: cover; }
.img img:not([src]), .img img[src=""] { display: none; }

/* 6. 버튼: 기본 btn · 아이콘만 btn-icon · 글자만 more · 버튼 묶음 btns */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); height: var(--h); padding: 0 var(--s3); border-radius: var(--r1); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: var(--t2); font-weight: 600; white-space: nowrap; }
.btn:hover { color: var(--ink); opacity: .85; }
.btn-brand, .btn-brand:hover { background: var(--brand); box-shadow: none; color: var(--surface); }
.btn-kakao, .btn-kakao:hover { background: var(--kakao); box-shadow: none; color: var(--kakao-ink); }
.btn-full { width: 100%; }
.btn-sm { height: var(--h-xs); padding: 0 var(--s2); font-size: var(--t1); }
.btn-sm .icon { width: var(--s2); height: var(--s2); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.is-busy { opacity: .7; cursor: progress; }
.btn.is-busy::before { content: ""; width: var(--s2); height: var(--s2); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn-icon { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: var(--h-sm); height: var(--h-sm); }
.btn-icon:disabled { opacity: .3; cursor: not-allowed; }
.btn-icon-box { position: relative; display: flex; }
.btn-icon-box .count { position: absolute; top: -6px; left: calc(100% - 10px); }
.btn-icon-label { display: none; font-size: var(--t0); font-weight: 600; line-height: 1; }
.more { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--t1); font-weight: 600; color: var(--ink-2); }
.more .icon { width: var(--s2); height: var(--s2); }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); }
.btns-stack { display: grid; gap: var(--s1); }
.btns-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }

/* 7. 입력 칸 · 체크 · 정렬 */
.input { display: block; width: 100%; height: var(--h); padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); font-size: 16px; }
.input::placeholder { color: var(--ink-2); }
.input:focus { outline: 0; border-color: var(--ink); }
.input[readonly] { background: var(--bg); color: var(--ink-2); }
.input::-webkit-search-cancel-button { display: none; }
textarea.input { height: auto; min-height: 104px; padding: var(--s1-5) var(--s2); resize: vertical; }
select.input { appearance: none; padding-right: var(--s4); background: var(--surface) url(../assets/icons/down.svg) no-repeat right var(--s1-5) center / 20px; }
.sort { width: auto; height: var(--h-sm); border: 0; padding-left: var(--s1); font-size: var(--t2); font-weight: 600; }
.field { display: grid; gap: var(--s1); }
.field-label { font-size: var(--t2); font-weight: 600; }
.field-opt { color: var(--ink-2); font-weight: 400; }
.field-row { display: flex; gap: var(--s1); }
.field-row .input { flex: 1; min-width: 0; }
.field-msg { display: none; align-items: center; gap: var(--s0); font-size: var(--t1); font-weight: 600; color: var(--brand); }
.field-msg .icon { width: var(--s2); height: var(--s2); }
.field.is-error .field-msg { display: flex; }
.field.is-error .input[aria-invalid="true"] { border-color: var(--brand); }
.check { display: flex; align-items: flex-start; gap: var(--s1); min-height: var(--s3); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); }
.check-req { font-style: normal; font-size: var(--t1); color: var(--brand); }

/* 8. 선택지 (상품 옵션 · 결제 방법 · 공동현관) */
.opt { display: grid; gap: var(--s1); }
.opt-title { float: left; width: 100%; margin-bottom: var(--s1); font-size: var(--t2); font-weight: 700; }
.opt-list { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s1); }
.opt-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--h); padding: var(--s1); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); text-align: center; cursor: pointer; }
.opt-item input { position: absolute; opacity: 0; pointer-events: none; }
.opt-item:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.opt-item:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.opt-item > :first-of-type { font-weight: 600; }
.opt-item.is-soldout { background: var(--bg); color: var(--ink-2); cursor: not-allowed; }
.opt-item.is-soldout > :first-of-type { text-decoration: line-through; }

/* 9. 상품 카드 · 줄 */
/* 관심상품 하트: 카드는 사진 오른쪽 아래, 상세는 이름 옆. 담기면 is-on(채운 하트 · 브랜드 색) */
.pcard-img .wish { position: absolute; right: var(--s1); bottom: var(--s1); z-index: 2; width: var(--h-xs); height: var(--h-xs); border-radius: 50%; background: var(--surface); color: var(--ink); }
.wish.is-on, .pcard-img .wish.is-on { color: var(--brand); }
.wish.is-on .icon-heart { --i: url(../assets/icons/heart-fill.svg); animation: bump var(--t-slow) var(--ease); }
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
.plist-scroll { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--s2) * -1); padding: 0 var(--s2); scroll-padding: 0 var(--s2); }
.plist-scroll::-webkit-scrollbar { display: none; }
.plist-scroll .pcard { scroll-snap-align: start; }
.pcard { position: relative; display: flex; flex-direction: column; }
.pcard:hover { color: var(--ink); }
.pcard-name::after { content: ""; position: absolute; inset: 0; } /* 이름 링크가 카드 전체를 덮는다(하트만 그 위) */
.pcard-name:hover { color: inherit; }
.pcard-img { aspect-ratio: var(--pcard-ratio); border-radius: var(--pcard-r); }
.pcard-img .badge { position: absolute; top: var(--s1); left: var(--s1); background: var(--surface); }
.pcard-body { display: grid; gap: var(--s0); padding-top: var(--s1-5); }
.pcard-name { font-size: var(--t2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard:not(.is-soldout) .badge-soldout { display: none; }
.pcard.is-soldout .pcard-img::after { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: .55; }
.pcard.is-soldout .badge-soldout { top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); }
.pcard.is-soldout .badge-brand { display: none; }
.pcard.is-soldout .pcard-name, .pcard.is-soldout .price { color: var(--ink-2); }
.pcard.is-soldout .price-rate { display: none; }
.plist-rank { counter-reset: rank; }
.plist-rank .pcard { counter-increment: rank; }
.plist-rank .pcard-img::before { content: counter(rank); position: absolute; top: 0; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--h-xs); height: var(--h-xs); background: var(--ink); color: var(--surface); font-size: var(--t2); font-weight: var(--w-num); }
.plist-rank .pcard-img .badge-brand { left: auto; right: var(--s1); }
@media (min-width: 768px) {
  .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .plist-scroll { grid-template-columns: none; grid-auto-columns: 30%; margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); scroll-padding: 0 var(--s4); }
}
@media (min-width: 1024px) {
  .plist, .plist-scroll { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s5) 28px; }
  .plist-scroll { grid-auto-flow: row; overflow: visible; margin: 0; padding: 0; }
  .sec .plist-scroll, .plist-main { grid-template-columns: repeat(var(--cols-main), minmax(0, 1fr)); gap: var(--s5) var(--s3); }
}

/* 10. 가격 · 배지 · 개수 */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: var(--price); }
.price-rate { color: var(--brand); font-weight: var(--w-num); }
.price-sale { font-weight: var(--w-num); }
.price-orig { color: var(--ink-2); font-size: var(--t1); }
.price-lg { font-size: var(--t5); }
.price-lg .price-orig { font-size: var(--t2); }
.badge { display: inline-flex; align-items: center; height: var(--s3); padding: 0 var(--s1); border-radius: var(--r0); background: var(--bg); color: var(--ink); font-size: var(--t0); font-weight: 700; white-space: nowrap; }
.badge-brand, .pcard-img .badge-brand { background: var(--brand); color: var(--surface); }
.badge-soldout, .pcard-img .badge-soldout { background: var(--ink); color: var(--surface); }
.badge-adult { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--surface); font-size: 11px; font-weight: 700; line-height: 1; }

/* 11. 구역 제목 · 탭 · 칩 */
.sec { padding-top: var(--sec-gap); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.sec-head p { color: var(--ink-2); }
.tabs { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-item { flex: none; display: flex; align-items: center; height: var(--h-sm); padding: 0 20px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t2); font-weight: 600; white-space: nowrap; }
.tabs-item.is-active, .tabs-item.is-active:hover { background: var(--active); box-shadow: none; color: var(--surface); }
.tabs-line { position: relative; gap: 0; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.tabs-line .tabs-item { flex: 1; justify-content: center; height: 56px; padding: 0 var(--s1); border-radius: 0; box-shadow: none; background: none; color: var(--ink-2); }
.tabs-line .tabs-item.is-active, .tabs-line .tabs-item.is-active:hover { background: none; color: var(--active); box-shadow: inset 0 -2px 0 var(--active); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); }
.chip { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--bg); font-weight: 600; }

/* 12. 수량 고르기 */
.qty { display: inline-flex; align-items: center; border-radius: var(--r1); box-shadow: inset 0 0 0 1px var(--line); }
.qty .icon { width: 20px; height: 20px; }
.qty-num { width: 40px; border: 0; background: none; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.qty-num::-webkit-inner-spin-button, .qty-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-num:focus { outline: 0; }

/* 13. 면 (구역 묶음) · 모바일은 띠로 나누고, PC 는 선으로 둘러요 */
.panel { display: grid; gap: var(--s3); align-content: start; margin: 0 calc(var(--s2) * -1); padding: var(--s3) var(--s2); border-top: var(--s1) solid var(--bg); background: var(--surface); }
@media (min-width: 768px) { .panel { margin: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); } }

/* 14. 상품 줄 (장바구니 · 주문) */
.items { display: grid; }
.item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 0; }
.item:last-child { padding-bottom: 0; }
.item > .img { border-radius: var(--r1); }
.item > .more { align-self: start; }
/* 장바구니 줄(11/4 대표, 기본 스킨 패널만 · 누누리는 따로): 빼기 = X 아이콘 · 금액 크게 · 수량 단추는 작게(상품명 · 옵션보다 튀지 않게) */
.item > .item-del { align-self: start; width: var(--h-xs); height: var(--h-xs); margin: -8px -8px 0 0; color: var(--ink-2); }
.item > .item-del .icon { width: 18px; height: 18px; }
.spanel [data-cart] .item-price { font-size: var(--t3); font-weight: 800; }
.spanel [data-cart] .qty .btn-icon { width: 30px; height: 30px; }
.spanel [data-cart] .qty .icon { width: 16px; height: 16px; }
.spanel [data-cart] .qty-num { width: 28px; font-size: var(--t1); }
.item-name { font-weight: 600; }
.item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); margin-top: var(--s1); }
.item-price { font-weight: 700; white-space: nowrap; }
.item-track a { color: var(--brand); text-decoration: underline; }
.items-sm .item { grid-template-columns: 72px minmax(0, 1fr) auto; }
@media (min-width: 1024px) { .item { grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--s3); } .items-sm .item { grid-template-columns: 80px minmax(0, 1fr) auto; } }

/* 15. 합계 · 정보 표 */
.sum { display: grid; gap: var(--s1-5); }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sum-row dt { color: var(--ink-2); }
.sum-total { margin-top: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); align-items: baseline; font-weight: 700; }
.sum-total dt { color: var(--ink); }
.info { display: grid; gap: var(--s1-5); }
.info > div { display: grid; grid-template-columns: minmax(6.5em, 28%) minmax(0, 1fr); gap: var(--s2); }
.info dt { color: var(--ink-2); }

/* 16. 주문 단계 */
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s0); padding: var(--s3) 0 var(--s4); }
.steps-item { display: grid; gap: var(--s1); font-size: var(--t1); color: var(--ink-2); text-align: center; }
.steps-item::before { content: ""; height: var(--s0); border-radius: 2px; background: var(--line); }
.steps-item.is-done::before, .steps-item.is-current::before { background: var(--brand); }
.steps-item.is-current { color: var(--ink); font-weight: 700; }
/* 마이쇼핑 주문 처리 현황: 단계마다 숫자(막대 없이) */
.steps-count { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; }
.steps-count .num { color: var(--ink); }
@media (min-width: 768px) { .steps { padding: var(--s1) 0 var(--s2); } }

/* 17. 안내 · 펼쳐 보기 */
.msg { display: flex; align-items: flex-start; gap: var(--s1); padding: var(--s2); border-radius: var(--r1); background: var(--bg); font-size: var(--t1); }
.panel .msg { padding: 0; background: none; }
.msg .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }
.acc-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--h-sm); font-size: var(--t1); color: var(--ink-2); list-style: none; cursor: pointer; }
.acc-head::-webkit-details-marker, .row::-webkit-details-marker { display: none; }
.acc-head .icon { width: 18px; height: 18px; }
.acc-head .icon, .row .icon-down { transition: transform var(--t-slow) var(--ease); }
[open] > .acc-head .icon, [open] > .row .icon-down { transform: rotate(180deg); }
.is-closing > .acc-head .icon, .is-closing > .row .icon-down { transform: none; }
.acc-body { display: grid; gap: var(--s1); padding-bottom: var(--s1); font-size: var(--t1); color: var(--ink-2); }
/* 회원 탈퇴(마이페이지 회원 정보 맨 아래): 작은 회색 글자 하나 → 누르면 안내 · 비밀번호 · 단추가 펼쳐진다(2026-10-29, 누누리와 같은 방식) */
:where([data-leave-form]) .acc-head { justify-content: flex-start; min-height: 0; font-size: var(--t0); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
:where([data-leave-form]) .acc-body { gap: var(--s2); padding-top: var(--s2); }   /* :where = 스킨(누누리 등)이 자기 규칙으로 덮을 수 있게 약하게 */

/* 18. 줄 목록 rows (공지 · 메인 공지 · 이전 글 다음 글 · 자주 묻는 질문) · 줄 안: kicker(앞) · 제목 · meta(끝) */
.rows { display: grid; border-top: 2px solid var(--ink); }
.rows > * { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s0) var(--s2); padding: var(--s2) 0; }
.row > * { grid-column: 2; }
.row > .kicker, .row > .badge { grid-column: 1; }
.row > .meta, .row > .icon { grid-column: 3; }
.row > .meta { grid-column: 2; grid-row: 2; font-variant-numeric: tabular-nums; }
/* 앞 칸(분류 · 표시) 없는 줄: 내용 · 오른쪽 끝(버튼 · 화살표) 두 칸 */
.row.row-plain { grid-template-columns: minmax(0, 1fr) auto; }
/* 별점 · 후기 사진(작은 네모 줄). 후기 쓰기에서는 사진마다 빼기 버튼이 얹힌다 */
.stars { color: var(--brand); letter-spacing: 1px; white-space: nowrap; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s1); }
.thumbs:empty { display: none; }
.thumbs > * { position: relative; display: block; width: 80px; aspect-ratio: 1; border-radius: var(--r1); overflow: hidden; background: var(--bg); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .btn-icon { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); }
.row.row-plain > * { grid-column: auto; grid-row: auto; }
.row.row-plain > .btns { justify-content: flex-end; }
/* 지난 쿠폰(사용 · 기간 끝)은 흐리게 */
.row.is-off { opacity: .5; }
@media (max-width: 767px) { .row:not(:has(> .kicker:not([hidden]), > .badge:not([hidden]))) > :not(.icon) { grid-column: 1 / 3; } }
@media (min-width: 768px) {
  .row { grid-template-columns: 5em minmax(0, 1fr) auto; column-gap: var(--s3); padding: 20px var(--s1); }
  .row > .meta { grid-column: 3; grid-row: auto; }
}

/* 19. 빈 화면 · 불러오는 중 */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s5) var(--s2); text-align: center; }
.empty > .icon { width: 56px; height: 56px; margin-bottom: var(--s1); color: var(--ink-2); }
.empty > p:not(.h3), .empty > [data-v] { color: var(--ink-2); }
.empty > .btns { margin-top: var(--s2); }
.loading { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s6) 0; color: var(--ink-2); }
.loading-spin { width: 32px; height: 32px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }

/* 20. 쪽 번호 */
.pager { display: flex; justify-content: center; gap: var(--s0); padding-top: var(--s5); }
.pager-item { display: flex; align-items: center; justify-content: center; min-width: var(--h-sm); height: var(--h-sm); border-radius: var(--r1); font-weight: 600; color: var(--ink-2); }
.pager-item .icon { width: 20px; height: 20px; }
.pager-item.is-current, .pager-item.is-current:hover { background: var(--active); color: var(--surface); }
.pager-item.is-off { opacity: .3; pointer-events: none; }

/* 21. 슬라이더 (배너 · 상품 사진) */
.slider { position: relative; }
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-slide { flex: 0 0 100%; scroll-snap-align: start; }
.slider-nav { position: absolute; right: var(--s2); bottom: var(--s2); display: flex; align-items: center; gap: var(--s1); pointer-events: none; }
.slider-nav button { pointer-events: auto; }
.slider-count { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s1-5); border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: var(--t0); font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }

/* 22. 긴 글 (공지 · 약관 · 상세 설명) */
.prose { display: grid; gap: var(--s2); max-width: 46em; line-height: 1.8; }
.prose h2 { font-family: var(--font-h); font-size: var(--t4); font-weight: 700; line-height: 1.4; margin-top: var(--s3); }
.prose h3 { font-size: var(--t3); font-weight: 700; line-height: 1.5; margin-top: var(--s1); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { display: grid; gap: var(--s0); padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 700; }

/* 23. 상단바 · 혜택 띠 · 전체 분류 · 옆 메뉴 */
.promo { background: var(--ink); color: var(--surface); font-size: var(--t1); }
.promo-in { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 40px; text-align: center; }
.promo a:hover { color: inherit; text-decoration: underline; }
.promo-in > span { color: var(--line); }
.hd { position: sticky; top: 0; z-index: 20; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.hd-bar { position: relative; display: flex; align-items: center; gap: var(--s1); height: var(--hd-bar); transition: height var(--t-slow) var(--ease); }
.hd.is-stuck .hd-bar { height: var(--hd-bar-stuck); }
.hd-logo { flex: 1; display: flex; align-items: center; min-width: 0; }
.hd-logo img, .ft-biz > img { height: 28px; width: auto; }
.logo { font-size: var(--t4); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.hd-search { display: none; }
.hd.is-search .hd-search { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); background: var(--surface); }
.hd-search .input { flex: 1; min-width: 0; height: var(--h-sm); border: 0; background: var(--bg); }
.hd-search .input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.hd-util { display: flex; align-items: center; margin-right: calc(var(--s1) * -1); }
.hd-nav { position: relative; }
.hd-nav-in { display: flex; align-items: center; gap: var(--s3); height: var(--hd-nav); }
.hd-cats { flex: 1; display: flex; gap: var(--s3); height: 100%; margin: 0 calc(var(--s2) * -1); padding: 0 var(--s2); overflow-x: auto; scrollbar-width: none; }
.hd-cats::-webkit-scrollbar { display: none; }
.hd-cats a { flex: none; display: flex; align-items: center; height: 100%; font-size: var(--t2); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hd-cats a.is-active { color: var(--active); box-shadow: inset 0 -2px 0 var(--active); }
.allcat { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 24px 40px -24px rgba(0, 0, 0, .25); }
.allcat-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding-top: var(--s4); padding-bottom: var(--s5); }
.allcat ul { display: grid; gap: var(--s1-5); margin-top: var(--s2); color: var(--ink-2); }
.drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.drawer-panel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s3); width: min(86%, 360px); height: 100%; padding: 0 var(--s3) var(--s4); overflow-y: auto; background: var(--surface); }
.drawer-dim { position: absolute; inset: 0; background: var(--ink); opacity: .45; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin-right: calc(var(--s1) * -1); }
.drawer-nav { display: grid; }
.drawer-nav a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font-size: var(--t3); font-weight: 600; }
.drawer-sub { display: grid; gap: var(--s2); color: var(--ink-2); }
.drawer-sub a { display: flex; align-items: center; gap: var(--s1); }
@media (min-width: 768px) { .hd-cats { margin: 0; padding: 0; } }
@media (min-width: 1024px) {
  .hd-bar { gap: var(--s4); }
  .hd-logo { flex: none; }
  .hd-logo img { height: 36px; }
  .logo { font-size: 28px; }
  .hd-search { position: relative; display: flex; flex: 1; max-width: 560px; align-items: center; }
  .hd-search .input { height: 48px; padding: 0 56px 0 var(--s3); border-radius: var(--r-pill); }
  .hd-search .btn-icon { position: absolute; right: var(--s0); }
  .hd-util { gap: var(--s0); margin: 0 calc(var(--s1) * -1) 0 auto; }
  .hd-util .btn-icon { width: auto; min-width: 64px; height: 56px; }
  .hd-util .btn-icon-label { display: block; }
  .hd-nav { box-shadow: inset 0 1px 0 var(--line); }
  .hd-nav-in { gap: var(--s4); }
  .hd-all { display: flex; align-items: center; gap: var(--s1); height: 100%; font-size: var(--t2); font-weight: 700; }
  .hd-all[aria-expanded="true"] { color: var(--brand); }
  .hd-all .icon { width: 20px; height: 20px; }
  .hd-cats { gap: var(--s4); }
  .hd-nav-sub { display: flex; gap: var(--s3); font-size: var(--t1); color: var(--ink-2); }
}

/* 24. 하단바 · 아래 고정 메뉴 (진열대만 켜요: --tabbar: grid) */
.ft { padding: var(--s5) 0; background: var(--bg); }
.ft-in { display: grid; gap: var(--s3); font-size: var(--t1); color: var(--ink-2); }
.ft-top { display: grid; gap: var(--s3); }
.ft-menu { display: flex; flex-wrap: wrap; gap: var(--s1-5) var(--s3); font-size: var(--t2); font-weight: 600; color: var(--ink); }
.ft-biz { display: grid; gap: var(--s1-5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.ft-biz .h4 { font-family: var(--font); font-size: var(--t2); font-weight: var(--w-h); color: var(--ink); }
.ft-info { display: flex; flex-wrap: wrap; gap: var(--s0) var(--s2); }
.ft-info div { display: flex; gap: var(--s1); }
.ft .kicker { font-size: var(--t2); color: var(--ink); }
.ft .num { color: var(--ink); letter-spacing: -.01em; }
.tabbar { display: none; }
body:has(.buybar) .ft { padding-bottom: calc(80px + var(--s5)); }
@media (min-width: 1024px) {
  .ft, body:has(.buybar) .ft { padding: var(--s5) 0; }
  .ft-in { gap: var(--s4); }
  .ft-top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .ft-menu { gap: var(--s4); }
}

/* 25. 메인: 큰 배너 · 분류 바로가기 · 기획전 · 브랜드 소개 */
.banner { position: relative; display: block; color: var(--surface); }
.banner:hover { color: var(--surface); }
.banner > .img { aspect-ratio: var(--banner-ratio); background: var(--ink-2); }
.banner > .img::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, var(--ink)); opacity: .6; }
.banner-text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--s1); justify-items: start; padding-bottom: var(--s5); }
.banner .kicker { color: inherit; }
.banner .h1 { font-weight: 800; }
.banner-link { display: none; }
.hero .slider-nav .btn-icon { display: none; }
.cats { padding-top: var(--s4); }
.cats-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s1); }
.cats-link { display: grid; justify-items: center; gap: var(--s1); text-align: center; }
.cats-link .img { width: 100%; max-width: 68px; border-radius: 22px; }
.cats-link > span:last-child { font-size: var(--t1); font-weight: 600; line-height: 1.35; }
.feature { display: grid; gap: var(--s2); padding-top: var(--sec-gap); }
.feature-item { display: grid; gap: var(--s2); }
.feature-item:hover { color: var(--ink); }
.feature-item > .img { aspect-ratio: 16 / 9; border-radius: var(--r2); }
.feature-text { display: grid; gap: var(--s0); justify-items: start; }
.feature-text .more { margin-top: var(--s0); }
.about { margin-top: var(--sec-gap); padding: var(--sec-gap) 0; background: var(--bg); }
.about-in { display: grid; gap: var(--s3); }
.about-in > .img { aspect-ratio: 4 / 3; border-radius: var(--r2); background: var(--line); }
.about-text { display: grid; gap: var(--s2); justify-items: start; color: var(--ink-2); }
.about-text .h2 { color: var(--ink); }
.about-text .btn { margin-top: var(--s1); }
.news .rows { border-top-width: 1px; }
@media (min-width: 768px) {
  .banner { --banner-ratio: 16 / 9; }
  .about-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
}
@media (min-width: 1024px) {
  .banner > .img { aspect-ratio: auto; height: var(--banner-h); }
  .banner-text { padding-bottom: var(--s6); }
  .banner .h1 { font-size: var(--t7); }
  .banner p:not(.h1):not(.kicker) { font-size: var(--t3); }
  .banner-link { display: inline-flex; align-items: center; height: 48px; margin-top: var(--s2); padding: 0 var(--s3); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: 700; }
  .hero .slider-nav { left: 0; right: 0; bottom: var(--s4); width: 100%; padding: 0 var(--s4); justify-content: flex-end; margin: 0 auto; }
  .hero .slider-nav .btn-icon { display: flex; border-radius: 50%; background: var(--surface); color: var(--ink); }
  .cats { padding-top: var(--s5); }
  .cats-list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s3); }
  .cats-link .img { max-width: 96px; border-radius: 28px; }
  .cats-link > span:last-child { font-size: var(--t2); }
  .feature .h3 { font-size: var(--t5); }
  .about-in { gap: var(--s6); }
  .about-text { max-width: 30em; }
}

/* 26. 상품 상세 · PC: 왼쪽 사진 + 상세 설명, 오른쪽 구매 칸이 따라와요 */
.pd { display: grid; padding-bottom: 80px; }
.pd-media { margin: 0 calc(var(--s2) * -1); }
.pd-thumbs { display: none; }
.pd-info { display: grid; gap: var(--s3); padding-top: var(--s3); }
.pd-ship { padding: var(--s2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--t1); }
.pd-head > p { color: var(--ink-2); }
.pd-head > div { display: flex; flex-wrap: wrap; gap: var(--s0); }
.pd-form > .meta { margin-top: calc(var(--s2) * -1); text-align: right; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s1); padding: var(--s1-5) var(--s2) calc(var(--s1-5) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
.buybar:has(> [hidden]) { grid-template-columns: 1fr; }   /* 버튼 하나만 남을 때(정기배송 신청) 한 줄 가득 */
.pd-soldout { display: none; font-weight: 700; color: var(--brand); text-align: center; }
.pd.is-soldout .pd-soldout { display: block; }
.pd-detail { margin: var(--s5) calc(var(--s2) * -1) 0; }
.pd-detail > .tabs { position: sticky; top: var(--hd); z-index: 10; }
.pd-sec { display: grid; gap: var(--s3); padding: var(--s5) var(--s2) 0; scroll-margin-top: calc(var(--hd) + 56px); }
.pd-sec .img { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
  .pd-media { margin: 0; }
  .pd-detail { margin: var(--s5) 0 0; }
  .pd-sec { padding: var(--s5) 0 0; }
}
@media (min-width: 1024px) {
  .pd { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto auto 1fr; column-gap: var(--s5); padding-bottom: 0; }
  .pd-media .slider-nav { display: none; }
  .pd-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
  .pd-thumbs .img { border-radius: var(--r1); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--t-fast) var(--ease); }
  .pd-thumbs .is-active { outline-color: var(--ink); }
  .pd-info { grid-column: 2; grid-row: 2 / span 2; align-self: start; position: sticky; top: calc(var(--hd) + var(--s3)); padding-top: 0; }
  .buybar { position: static; grid-template-columns: 1fr 1fr; padding: 0; box-shadow: none; background: none; }
  .pd-detail { grid-column: 1; }
}

/* 27. 약관 · 공지 보기 · 검색 · 주문 조회 · 주문 완료 */
.doc-head { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.doc-head .page-title { padding-bottom: 0; }
.doc-grid { display: grid; gap: var(--s4); padding-top: var(--s4); }
.doc-toc { display: grid; gap: var(--s1-5); }
.doc-toc ol { display: grid; gap: var(--s0); padding-left: 1.3em; list-style: decimal; color: var(--ink-2); }
.doc-sec { display: grid; gap: var(--s2); scroll-margin-top: calc(var(--hd) + var(--s3)); }
.doc-body { gap: var(--s4); }
.post-head { display: grid; gap: var(--s2); justify-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.post-head .more { margin-left: calc(var(--s0) * -1); font-size: var(--t2); }
.post-head .more .icon { width: 20px; height: 20px; }
.post-head .meta { display: flex; align-items: center; gap: var(--s1); }
.post-body { padding: var(--s4) 0 var(--s5); }
.post-nav { border-top-width: 1px; border-top-color: var(--line); }
.post-nav .kicker { color: var(--ink-2); }
.post-nav + .btns { padding-top: var(--s4); }
.srch-form { display: flex; gap: var(--s1); max-width: 720px; margin: var(--s3) auto var(--s4); }
.srch-form .btn { flex: none; padding: 0 var(--s2); }
.srch-tags { display: grid; gap: var(--s1-5); margin-top: var(--s3); }
.bar > p { color: var(--ink-2); }
.bar > p b { color: var(--ink); }
.bar .h3 b, .bar .h3 span { font-weight: var(--w-num); }
.bar .h3 span { color: var(--brand); }
.lookup-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.done-head { display: grid; justify-items: center; gap: var(--s0); padding: var(--s5) 0 var(--s4); text-align: center; }
.done-head .page-title { padding: var(--s2) 0; }
.done-head p { color: var(--ink-2); }
.done-head .num { color: var(--ink); }
.lookup { padding-top: var(--s5); }
.faq-more a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.done-head > .icon { width: 56px; height: 56px; color: var(--brand); animation: draw calc(var(--t-slow) * 1.2) var(--ease) 100ms both; }
.done-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.panels + .btns-split, .panels > .btns-split { padding-top: var(--s4); }
@media (min-width: 768px) {
  .srch-form .btn { padding: 0 var(--s3); }
  .done-head { padding: var(--s6) 0 var(--s4); }
}
@media (min-width: 1024px) {
  .doc-grid { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); padding-top: var(--s5); }
  .doc-toc { position: sticky; top: calc(var(--hd) + var(--s3)); align-self: start; }
  .post-head { padding: var(--s5) 0 var(--s4); }
  .post-body { padding: var(--s5) 0 var(--s6); }
  .bar .h3 { font-size: var(--t5); }
}

/* 28. 자주 묻는 질문 · 펼침 줄 */
.row.faq { grid-template-columns: minmax(0, 1fr) auto; list-style: none; cursor: pointer; }
.row.faq > .kicker, .row.faq > .h4 { grid-column: 1; }
.row.faq > .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-2); }
.faq-a { padding: 0 0 var(--s3); color: var(--ink-2); }
@media (min-width: 768px) {
  .row.faq { grid-template-columns: 7em minmax(0, 1fr) auto; }
  .row.faq { grid-template-columns: 7em minmax(0, 1fr) auto; }
  .row.faq > .kicker, .row.faq > .h4, .row.faq > .icon { grid-column: auto; grid-row: auto; }
  .faq-a { padding: 0 var(--s1) var(--s3) calc(7em + var(--s3) + var(--s1)); }
}

/* 29. 장바구니 패널 (layout.html [data-panel] · 2026-10-31) · 엔진이 /cart 페이지의 <main> 을 .panel-view 로 넣고 is-open 을 붙여요.
   PC = 오른쪽 패널, 폰 = 꽉 찬 화면. 엔진은 닫고 --t-panel 뒤에 틀을 숨겨요 */
.spanel { position: fixed; inset: 0; z-index: 60; }
.spanel-dim { position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity var(--t-panel) var(--ease); }
.spanel.is-open .spanel-dim { opacity: .45; }
.spanel-box { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(100%, var(--w-panel)); background: var(--surface); transform: translateX(100%); transition: transform var(--t-panel) var(--ease); }
.spanel.is-open .spanel-box { transform: none; }
@media (max-width: 1023px) { .spanel-box { width: 100%; } }   /* 폰 · 태블릿은 패널이 화면 전체(2026-11-06 대표) */
.spanel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s1); min-height: var(--hd-bar); padding: 0 var(--s1) 0 var(--s2); box-shadow: 0 1px 0 var(--line); }
.spanel-title { flex: 1; min-width: 0; overflow: hidden; font-family: var(--font); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.spanel-body { position: relative; flex: 1; min-height: 0; }
.spanel .panel-view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s2) var(--s2) calc(var(--s3) + env(safe-area-inset-bottom)); }
.spanel .panel-view.is-under { visibility: hidden; }
.spanel .page-title { display: none; }   /* 제목은 패널 머리줄에 */
.spanel .wrap { padding: 0; }
.spanel .split { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.spanel .split-side { position: static; }
/* 뒤로 = 패널 안에서 한 겹 더 들어갔을 때만 */
.spanel-back { display: none; }
.spanel[data-depth]:not([data-depth="0"]):not([data-depth="1"]) .spanel-back { display: flex; }
.spanel[data-depth]:not([data-depth="0"]):not([data-depth="1"]) .spanel-head { padding-left: var(--s0); }
/* 패널 안은 카드 없이 구분선으로 구간 나눔(11/4 대표) */
.spanel .panel-view { padding-left: var(--s3); padding-right: var(--s3); }
.spanel .split { gap: 0; }
.spanel .panel { margin: 0; padding: var(--s3) 0; border: 0; border-radius: 0; }
.spanel .panel:first-child { padding-top: var(--s1); }
.spanel .panel + .panel { border-top: 1px solid var(--line); }

/* 30. 움직임 · 시간과 곡선은 1번 변수의 --ease · --t-fast · --t-slow 만 써요. 움직임 줄이기 설정이면 맨 아래에서 꺼요 */
a, .opt-item, .tabs-item, .chip, .pager-item, .btn-icon, .input, .more { transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.btn { transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:active:not(:disabled), .btn-icon:active:not(:disabled) { transform: scale(.97); }
.opt-item:active { transform: scale(.98); }
/* 상품 카드: 올리면 사진 살짝 확대 · 그림자, 누르면 살짝 눌림 */
.pcard { transition: transform var(--t-fast) var(--ease); }
.pcard:active { transform: scale(.985); }
.pcard-img { transition: box-shadow var(--t-slow) var(--ease); }
.pcard-img img { transition: transform calc(var(--t-slow) * 1.2) var(--ease), opacity var(--t-slow) var(--ease); }
@media (hover: hover) {
  .pcard:hover .pcard-img { box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .35); }
  .pcard:hover .pcard-img img { transform: scale(1.05); }
}
/* 메인 스크롤 등장: common.js 가 rv 를 붙이고, 화면에 들어오면 is-in (카드는 --rv-i 로 차례차례) */
.rv { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--rv-i, 0) * 70ms); }
.rv.is-in { opacity: 1; transform: none; }
/* 큰 배너: 지금 장은 is-current. 옆 장은 흐려지고, 글자는 차례로 올라오고, 사진은 아주 천천히 확대 */
.banner > .img img { transition: transform calc(var(--t-slow) * 16) var(--ease), opacity var(--t-slow) var(--ease); }
.is-current > .img img { transform: scale(1.06); }
.is-motion .banner-text > * { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.is-motion .is-current .banner-text > * { opacity: 1; transform: none; transition-delay: 120ms; }
.is-motion .is-current .banner-text > :nth-child(2) { transition-delay: 200ms; }
.is-motion .is-current .banner-text > :nth-child(3) { transition-delay: 280ms; }
.is-motion .is-current .banner-text > :nth-child(4) { transition-delay: 360ms; }
/* 상단바: 전체 분류는 위에서 내려오고, 메뉴는 옆에서 밀려 나오고, 모바일 검색은 부드럽게 (hidden 을 그대로 쓰면서 움직여요) */
.allcat, .drawer, .hd-search { transition-property: opacity, transform, display; transition-duration: var(--t-fast); transition-timing-function: var(--ease); transition-behavior: allow-discrete; }
.drawer { transition-duration: var(--t-slow); }
.allcat[hidden] { opacity: 0; transform: translateY(-8px); }
.drawer-panel { transition: transform var(--t-slow) var(--ease); }
.drawer-dim { transition: opacity var(--t-slow) var(--ease); }
.drawer[hidden] .drawer-panel { transform: translateX(100%); }
.drawer[hidden] .drawer-dim { opacity: 0; }
@starting-style {
  .allcat:not([hidden]) { opacity: 0; transform: translateY(-8px); }
  .drawer:not([hidden]) .drawer-panel { transform: translateX(100%); }
  .drawer:not([hidden]) .drawer-dim { opacity: 0; }
  .hd.is-search .hd-search { opacity: 0; transform: translateY(-6px); }
}
.hd:not(.is-search) .hd-search { opacity: 0; transform: translateY(-6px); }
@media (min-width: 1024px) { .hd:not(.is-search) .hd-search, .hd .hd-search { opacity: 1; transform: none; } }
/* 장바구니 개수 · 금액이 바뀌면 */
.count.is-bump { animation: bump var(--t-slow) var(--ease); }
.is-changed { display: inline-block; animation: num-up var(--t-slow) var(--ease); }
/* 상품 상세: 큰 사진 바뀜 · 탭 밑줄 */
.tabs-line.has-ind::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--ind-w, 0); height: 2px; background: var(--ind-c, var(--ink)); transform: translateX(var(--ind-x, 0)); transition: transform var(--t-slow) var(--ease), width var(--t-slow) var(--ease); pointer-events: none; }
.tabs-line.has-ind .tabs-item.is-active, .tabs-line.has-ind .tabs-item.is-active:hover { box-shadow: none; }
/* 장바구니 · 주문서: 빼는 줄은 접히며 사라지고, 틀린 칸 안내는 부드럽게 */
.item.is-leaving { overflow: hidden; transition: height var(--t-slow) var(--ease), padding var(--t-slow) var(--ease), opacity var(--t-fast) var(--ease); }
.item.is-leaving.is-gone { padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0; }
.field.is-error .field-msg { animation: fade-down var(--t-fast) var(--ease); }
/* 주문 완료: 체크가 그려지고, 주문번호 · 입금 안내가 차례로 */
.done-head > *, [data-complete] .panels > * { animation: rise var(--t-slow) var(--ease) both; }
.done-head > :nth-child(2) { animation-delay: 240ms; }
.done-head > :nth-child(3) { animation-delay: 320ms; }
.done-head > :nth-child(4) { animation-delay: 400ms; }
.done-head > :nth-child(5) { animation-delay: 480ms; }
[data-complete] .panels > :nth-child(2) { animation-delay: 560ms; }
[data-complete] .panels > :nth-child(3) { animation-delay: 640ms; }
[data-complete] .panels > :nth-child(4) { animation-delay: 720ms; }
[data-complete] .panels > :nth-child(5) { animation-delay: 800ms; }
/* 불러오는 중 · 사진 자리: 은은한 반짝임, 사진이 다 오면 부드럽게 (is-loading · is-wait 는 common.js 가 붙여요) */
.img.is-loading { background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 80%); background-size: 200% 100%; background-repeat: no-repeat; animation: shimmer calc(var(--t-slow) * 3) linear infinite; }
.img img.is-wait { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } }
@keyframes num-up { from { opacity: 0; transform: translateY(40%); } }
@keyframes bump { 30% { transform: scale(1.35); } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .loading-spin, .btn.is-busy::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  .img.is-loading { background-image: none; }
  .rv, .is-motion .banner-text > * { opacity: 1; transform: none; }
  .is-current > .img img, .pcard:hover .pcard-img img { transform: none; }
}

/* ── 이 스킨만: 도도킷 전용 ── */
@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Playfair+Display:wght@800;900&display=swap");
/* 도도킷 전용 (2026-11-02 대표 고름) · 브랜드 주황 #f7941e(루딤링크 브랜드 정보 색) · 크림 바탕 · 잡지 제호(Playfair)
   메인 = 첫 화면(11/4 PC 11b · 폰 10d-2) → 후기 → 블로그 주차별 메뉴 갤러리(12a). 고민 · 비교표 · 질문 · 고르기 · 단품은 상세에 있어 메인에서 뺌(11/4 대표) */
:root {
  --brand: #f7941e;   /* 기본값일 뿐, 실제 색 = 설정 › 쇼핑몰 정보 브랜드 색(엔진이 스킨 뒤에 :root{--brand} 로 덮음) */
  /* 진한 · 옅은 주황도 브랜드 색에서 만든다(색값 따로 박지 않기, 11/10 대표 「주황은 브랜드 색상으로 모두 통일」) */
  --brand-d: color-mix(in srgb, var(--brand) 85%, #000); --brand-soft: color-mix(in srgb, var(--brand) 14%, #fff); --brand-pale: color-mix(in srgb, var(--brand) 7%, #fff);
  --ink: #26211c; --ink-2: #6f665d; --line: #ece4d9; --bg: #fbf7f1; --surface: #ffffff;
  --r1: 12px; --r2: 22px; --pcard-r: 16px;
  --font-logo: "Playfair Display", Georgia, serif;
  --w-h: 800;
  --hd-bar: 60px; --hd-bar-stuck: 56px; --dd-hd: var(--hd-bar);   /* 상단바 = 로고 줄 하나(PC 글자 메뉴 줄 없음, 11/3 대표) · 폰 60 */
}
@media (min-width: 1024px) { :root { --hd-bar: 72px; --hd-bar-stuck: 64px; } }

/* 부품: 상단바 · 버튼 */
.logo { font-family: var(--font-logo); font-weight: 900; color: var(--brand); letter-spacing: -.01em; }
/* 상단바: 가운데 글자 로고 · 왼쪽 이번 주 메뉴 · 오른쪽 로그인 · 장바구니(아이콘만). 메인에서는 위에 고정 · 첫 화면 사진 위에선 투명, 내리면 흰 바탕 */
.dd-hd { background: var(--bg); box-shadow: none; }
.dd-hd.is-stuck { box-shadow: 0 1px 0 var(--line); }
/* 모든 페이지 = 메인과 같게 위에 고정 · 투명(띠 없음, 11/5 대표). 메인 말고는 본문을 상단바 높이만큼 내려서 시작 */
.dd-hd { position: fixed; left: 0; right: 0; top: 0; z-index: 30; background: transparent; transition: background var(--t-fast) var(--ease); }
body:not(:has(.dd-hero)) .main { padding-top: var(--hd-bar); }
/* 상단바 = 모든 페이지 로고만(11/4 대표). 아이콘은 아래 하단바에. 메인은 첫 화면 사진 위 투명 · 내려도 그대로 */
.dd-hd .hd-util { visibility: hidden; }
.dd-hd.is-stuck { background: transparent; box-shadow: none; }
.icon-week { --i: url(../assets/icons/week.svg); }
.icon-truck { --i: url(../assets/icons/truck.svg); }
.dd-hd .hd-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s2); }
.dd-hd .hd-logo { flex: none; justify-self: center; }
.dd-hd .logo { font-size: 28px; transition: color var(--t-fast) var(--ease); }
.dd-hd.is-on-brand .logo { color: #fff; }   /* 메인 2번 구역(주황 바탕) 위 = 흰 로고(11/7 대표), common.js 가 붙임 */
.dd-hd .hd-util { gap: var(--s0); margin: 0; }
.dd-hd .hd-util .btn-icon { width: var(--h-sm); min-width: 0; height: var(--h-sm); }
.dd-hd .hd-util .icon { width: 26px; height: 26px; }
.dd-hd-l { justify-self: start; margin-left: calc(var(--s1) * -1) !important; }
.dd-hd-r { justify-self: end; margin-right: calc(var(--s1) * -1) !important; }
.btn { border-radius: var(--r-pill); font-weight: 800; }
.hd-cats a.is-active { color: var(--brand-d); box-shadow: inset 0 -2px 0 var(--brand); }
/* 바닥 띠(11/7 대표 「사업자 정보 · 약관 하단을 누누리처럼 얇게 고정」): 화면 맨 아래 한 줄(PC 32 · 폰 30).
   이용약관 · 개인정보처리방침(굵게) · 고객센터 | 사업자 정보 ⌄. 고객센터 · 사업자 정보는 오른쪽 패널 */
.biz-line { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; justify-content: center; gap: 14px; height: 32px; padding: 0 16px; overflow: hidden; background: var(--bg); box-shadow: 0 -1px 0 var(--line); font-size: 12px; letter-spacing: .02em; line-height: 1; white-space: nowrap; color: var(--ink-2); }
.biz-line > a, .biz-line > button { display: inline-flex; align-items: center; gap: 3px; color: inherit; opacity: .86; transition: opacity var(--t-fast) var(--ease); }
.biz-line .icon { width: 11px; height: 11px; }
.biz-line > a:hover, .biz-line > button:hover { opacity: 1; }
.biz-line > .is-strong { font-weight: 700; color: var(--ink); opacity: 1; }
.biz-sep { flex: none; width: 1px; height: 10px; background: currentColor; opacity: .3; }
[data-biz=""] { display: none; }
.biz { display: grid; gap: var(--s3); }
.biz-logo { justify-self: start; height: 28px; width: auto; }
.biz .info > div { grid-template-columns: 136px minmax(0, 1fr); }   /* 이름 칸만 넓게(통신판매업 신고번호) */
.biz .info dd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.biz .info small, .biz [data-biz-check], .biz-copy { font-size: var(--t1); color: var(--ink-2); }
.biz [data-biz-check] { text-decoration: underline; text-underline-offset: 3px; }
.biz-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; }
.biz-links .is-strong { font-weight: 800; }
body { padding-bottom: 32px; }
@media (max-width: 1023px) {
  .biz-line { height: calc(30px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  body { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

/* ── 메인 공통 ── */
/* 원스냅: 구역 하나 = 화면 하나, 휠 · 손가락 한 번에 한 구역씩 딱 멈춤. 바닥글은 마지막에 붙어서 */
html:has(.dd-hero) { scroll-snap-type: y mandatory; }
body:has(.dd-hero) .main { padding-bottom: 0; }
.dd-sec { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--dd-hd) + var(--s3)) 0 var(--s4); }
.dd-sec[hidden] { display: none; }
.dd-eb { font-family: var(--font-logo); font-weight: 800; font-size: var(--t1); letter-spacing: .1em; color: var(--brand-d); text-transform: uppercase; }
.dd-h2 { margin-top: var(--s1); font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.22; }
.dd-lead { margin-top: var(--s2); font-size: var(--t3); color: var(--ink-2); line-height: 1.6; }
.dd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s4); }
.dd-head .more { color: var(--brand-d); font-weight: 800; }
.dd .btn-brand { height: 58px; padding: 0 34px; font-size: var(--t3); }
.dd-ink { background: var(--ink); color: #fff; }
.dd-ink:hover { color: #fff; }

/* 1. 첫 화면(11/4 대표 고름: PC = 클로드 디자인 11b, 폰 = 10d-2). 사진이 화면 전체(상단바 뒤까지) · 판 · 그림자 · 구분선 없음.
   글 묶음 왼쪽 아래 = 주황 마감 → 흰 도착일 → 흰 메뉴(번호 주황) · 아래 고정 흰 알약 줄(아이콘 3개 + 가격 줄 + 주황 주문하기) */
.dd-hero-item + .dd-hero-item { display: none; }   /* 첫 화면 사진은 첫 항목 하나만 */
/* 사진(11/7 대표): 회차마다 새로 만드는 가로 식탁 사진(3:2, 메뉴 7가지가 가운데) → 화면 가득 채움(사진마다 자르기 값 안 고침).
   흰 글이 음식 위에 놓여도 읽히게 글 쪽(PC 왼쪽 · 폰 아래)만 어둡게, 상단바 쪽 살짝 어둡게 */
.dd-hero-bg { transform-origin: 50% 50%; animation: dd-hero-zoom 24s ease-in-out infinite alternate; }
.dd-hero-bg img, .dd-hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.dd-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 16, 9, .64) 0, rgba(24, 16, 9, .48) max(30%, 520px), rgba(24, 16, 9, 0) max(58%, 860px)), linear-gradient(to bottom, rgba(24, 16, 9, .4), rgba(24, 16, 9, 0) 20%); pointer-events: none; }
/* PC 글 묶음(11/7 대표): 도착일 → 마감 줄(도착일 폭에 맞춘 크기, common.js) → 메뉴, 위아래 가운데 · 화면이 넓어지면 왼쪽 끝에 붙지 않고 1200 폭 안쪽으로(가운데 1200 칸의 왼쪽 줄) · 글씨 크게 */
.dd-hero-text { position: absolute; left: max(64px, 6vw, calc(50vw - 600px)); top: 0; bottom: 0; width: 540px; max-width: calc(100% - 128px); margin: 0; padding: calc(var(--hd-bar) + 24px) 0 128px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #fff; animation: dd-hero-up 900ms cubic-bezier(.22, .61, .36, 1) 200ms both; }
.dd-hero-date:empty, .dd-hero-due:empty { display: none; }
.dd-hero-due [data-dd-left] { margin-left: 8px; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.dd-hero-due [data-dd-left]:empty { display: none; }
/* 마감 뒤 메인: 날짜 위 흰 알약 「새로운 식단 준비 중」 + 점 세 개(로딩처럼 깜빡), 11/7 대표 시안 7차 3번 · 글자 브랜드색 */
.dd-hero-wait { order: -2; display: none; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 15px; border-radius: 18px; background: #fff; font-size: 15px; font-weight: 800; color: var(--brand); }
.dd-closed .dd-hero-wait { display: inline-flex; }
.dd-hero-wait .dd-load i { width: 6px; height: 6px; border-radius: 3px; }
.dd-hero-menu ol { display: grid; gap: clamp(10px, 1.7vh, 16px); counter-reset: m; }
.dd-hero-menu li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; font-size: clamp(19px, 2.9vh, 24px); font-weight: 700; line-height: 1.4; counter-increment: m; }
.dd-hero-when { display: none; }
/* 하단바 = 모든 페이지 아래 고정 흰 알약 줄(layout/header.html, 11/4 대표). 주문하기 = 브랜드 주황. 상품 상세 폰은 구매 줄이 아래를 쓰니 숨김 */
/* PC 하단바 폭(11/7 대표): 가운데 · 넓은 화면은 70% 정도, 1120 에서 멈춤, 좁아질수록 화면 쪽으로 넓게(최소 860, 양옆 40) */
:root { --dd-bar-w: min(100% - 80px, max(70%, 860px), 1120px); }   /* PC 하단바 폭(상품 상세 구매바도 이 폭 오른쪽 끝에 맞춤) */
.dd-bar { position: fixed; z-index: 40; left: 0; right: 0; width: var(--dd-bar-w); margin: 0 auto; bottom: calc(44px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; height: 68px; padding: 0 10px 0 16px; border-radius: 34px; background: #fff; box-shadow: 0 6px 20px rgba(35, 29, 23, .12); color: #231d17; }
.dd-bar-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #231d17; }
.dd-bar-icon[hidden] { display: none; }
.dd-bar-icon .icon { width: 24px; height: 24px; }
.dd-bar-price { display: flex; align-items: center; gap: 14px; margin: 0 18px 0 auto; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.dd-bar-price b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #231d17; }   /* 「3가지」 회색 + 금액 굵게 = 상품 상세 구매바와 같게(11/8 대표) */
.dd-bar-ship { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--brand); }   /* 무료배송 = 브랜드색 · 글 뒤 택배차, 금액 앞(11/8 대표) */
.dd-truck3d { display: inline-block; flex: none; background: url(data:image/webp;base64,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) center / contain no-repeat; }   /* 무료배송 택배차 = 주문 완료와 같은 3D 그림(11/10 대표) */
.dd-bar-ship .dd-truck3d { width: 24px; height: 24px; }
.dd-bar .dd-bar-order { display: inline-flex; align-items: center; gap: 12px; height: 50px; margin: 0; padding: 0 28px; border-radius: 25px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 700; transition: opacity var(--t-fast) var(--ease); }
.dd-bar .dd-bar-order:hover { color: #fff; opacity: .85; }
body:has(.dd-bar) { padding-bottom: 124px; }   /* 맨 아래 글이 떠 있는 하단바에 가리지 않게 */
/* 주문서 · 주문 완료에서는 상품으로 가는 「주문하기」 · 가격 줄 빼고 아이콘만(11/5) */
body:has([data-checkout], [data-complete]) .dd-bar-price,
body:has([data-checkout], [data-complete]) .dd-bar-order { display: none; }
/* 마이쇼핑 패널 안에서는 위 알약 메뉴 빼기(아래 목록과 겹침, 안쪽 화면은 ‹ 뒤로로 돌아감, 11/5) */
.spanel [data-my-nav] { display: none; }
/* 체크박스 · 라디오: 주황 위 표시는 흰색(11/5 대표). 브라우저 기본은 밝은 색 위에 검은 표시를 그려서 직접 그림 */
.check input { appearance: none; border: 1.5px solid color-mix(in srgb, var(--ink-2) 45%, var(--line)); border-radius: var(--r0); background: var(--surface) no-repeat center / 100%; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { border-color: var(--brand); background-color: var(--brand); }
.check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check input[type="radio"]:checked { background-color: var(--surface); box-shadow: inset 0 0 0 5px var(--brand); }
/* 주문서(11/5 대표 A2안): 구역 · 입력칸은 박스 대신 구분선. 박스는 고르는 단추(출입 방법 · 결제 수단)만 */
.co .panel { margin: 0; padding: var(--s3) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.co .panels > .panel:first-child { padding-top: var(--s1); }
.co .split-side { border-bottom: 0; }
.co-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.co-saved { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.co-saved-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.co-saved > .icon { flex: none; width: var(--s2); height: var(--s2); color: var(--ink-2); }
@media (min-width: 768px) { .co .split-side { padding-top: var(--s1); } }
/* 패널 안 주문서(11/5 대표 「주문서 페이지 안 가도」): 구역 사이 선은 한 줄만 */
.spanel .co .panel { border-top: 0; }

/* 3. 블로그 = 주차별 메뉴 갤러리(11/4 클로드 디자인 12a): 화면 폭 전체 · 정사각 사진 4px 틈 · 사진 아래쪽에 흰 날짜 · 제목(아주 옅은 그늘). 맨 앞 글 = 「이번 주」.
   칸 수는 글 수대로: PC 1~2개 3칸 · 3~5개 글 수만큼 한 줄 · 6개 이상 5칸 두 줄(10개까지), 폰 1개 1칸 · 2개 이상 2칸 세 줄(6개까지). 나머지 글은 「전체 보기」. 글이 없으면 구역째 숨김 */
.dd-gal { justify-content: flex-start; padding: 84px 0 124px; background: var(--bg); color: var(--ink); }
.dd-gal:not(:has(.dd-gal-item)) { display: none; }
.dd-gal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 0 40px; }
.dd-gal-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.dd-gal-more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--brand); }
.dd-gal-more:hover { color: var(--brand-d); }
.dd-gal-grid { --cols: 3; display: grid; gap: 4px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.dd-gal-grid:has(> :nth-child(4)) { --cols: 4; }
.dd-gal-grid:has(> :nth-child(5)) { --cols: 5; }
.dd-gal-item:nth-child(n + 11) { display: none; }
.dd-gal-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #e9dccb; color: #fff; }
.dd-gal-item:hover { color: #fff; }
.dd-gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.22, .61, .36, 1); }
.dd-gal-item:hover img { transform: scale(1.04); }
.dd-gal-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, rgba(20, 14, 8, .42), rgba(20, 14, 8, 0)); }
.dd-gal-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: grid; gap: 4px; }
.dd-gal-date { font-size: 13px; font-weight: 600; }
.dd-gal-name { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.dd-gal-new { display: none; position: absolute; left: 20px; top: 18px; z-index: 1; font-size: 13px; font-weight: 800; }
.dd-gal-item:first-child .dd-gal-new { display: block; }   /* 태그 목록(/blog?tag=)은 맨 앞 글이 이번 주가 아닐 수 있어 「이번 주」 빼기 */
.dd-gal-new::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 4px; background: var(--brand); vertical-align: 1px; }
/* 메인 갤러리(11/7 대표 「큰 사진 없이 같은 크기로 배열 · 다른 메뉴도 보라는 용도」).
   무조건 한 화면(100svh) 안, 가장자리까지 꽉 채움. 칸 크기는 모두 같음(화면 높이에서 정해지고 폭에 맞게 살짝 늘어남).
   들어가는 만큼만 보이고 넘치는 글은 숨김. 마지막 칸(오른쪽 아래) = 「전체 보기」.
   PC = 2줄 × 들어가는 칸 수 · 폰 = 2칸(태블릿 3칸) × 들어가는 줄 수. 칸 사이 틈 = 사진을 2px씩 안쪽으로 자름(clip-path)
   위아래 여백 없음(11/7 대표): 사진이 화면 맨 위(투명 상단바 밑, 흰 로고) ~ 맨 아래 사업자 줄까지. 떠 있는 하단바는 사진 위에 뜨고,
   맨 아래 줄 칸은 날짜 · 제목을 하단바 위로 올림(common.js 가 is-low 를 붙임) */   /* 32 = 맨 아래 사업자 줄 */   /* 흰 로고가 사진 위에서도 보이게 */
.dd-sec.dd-gal .dd-gal-grid { --s: calc((100svh - 32px) / 2); flex: 1; min-height: 0; gap: 0; overflow: hidden; grid-template-columns: repeat(auto-fill, minmax(min(var(--s), 25%), 1fr));   /* PC 는 늘 4칸 이상 */ grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: 0; }
.dd-sec.dd-gal .dd-gal-all { grid-area: -2 / -2; display: flex; align-items: center; justify-content: center; gap: 8px; clip-path: inset(2px); background: #efe5d8; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }   /* 사진 위에서도 읽히게 */   /* 하단바(아래 44 + 높이 68) 위로 */
@media (max-width: 1023px) {   /* 30 = 맨 아래 사업자 줄 */
  .dd-sec.dd-gal .dd-gal-grid { --c: 2; --s: calc(100vw / var(--c)); grid-template-columns: repeat(var(--c), minmax(0, 1fr)); grid-template-rows: repeat(auto-fill, minmax(var(--s), 1fr)); }   /* 하단바(아래 40 + 높이 60) 위로 */
}

/* 블로그 목록 페이지(/blog) 2a(11/6 대표): 위 갤러리 그대로, 10개씩 보이고 내리면 저절로 더(common.js).
   11/8 대표 「위 여백 없게 · 제목 · 달 고르기 삭제」: 사진이 화면 맨 위(투명 상단바 밑, 흰 로고)부터 시작해 아래로 쭉.
   태그 목록(/blog?tag=)만 「#태그 전체 보기」 줄을 남김(돌아갈 길).
   칸 수 = 화면 폭 따라 줄어듦(11/8 대표): 넓은 PC 5 · 1440 이하 4 · 1100 이하 3 · 폰 2 */
.dd-gal-page { position: relative; padding: var(--s3) 0 124px; }
.dd-gal-page[data-tag=""] .dd-gal-head { display: none; }
body:has(.dd-gal-page[data-tag=""] .dd-gal-item) .main { padding-top: 0; }   /* 흰 로고가 사진 위에서도 보이게, 내려도 따라옴 */
body:has(.dd-gal-page) { background: var(--bg); }   /* 아래 흰 띠 없이 페이지 전체 아이보리(11/8 대표) */   /* 「이번 주」 = 날짜 바로 위 주황 알약(11/8 대표 「위치 이상」) */
.dd-gal-page:not(:has(.dd-gal-item)) { display: block; }
.dd-gal-page .dd-gal-grid { --cols: 5; }
@media (max-width: 1440px) { .dd-gal-page .dd-gal-grid { --cols: 4; } }
@media (max-width: 1100px) { .dd-gal-page .dd-gal-grid { --cols: 3; } }
.dd-gal-page .dd-gal-item:nth-child(n) { display: block; }
.dd-gal-page .dd-gal-item[hidden] { display: none; }
.dd-months { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.dd-months::-webkit-scrollbar { display: none; }
.dd-months button { flex: none; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.dd-months button[aria-pressed="true"] { color: var(--ink); font-weight: 800; }
.dd-months button[aria-pressed="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--brand); vertical-align: 2px; }
.dd-gal-load { display: flex; gap: 8px; align-items: center; min-height: 44px; margin: var(--s4) auto 0; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ink); background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.dd-gal-load span { font-weight: 500; color: var(--ink-2); }

/* 블로그 글 머리(11/7 대표): 대표 사진이 있으면 화면 폭 가득 크게, 제목 · 날짜는 사진 아래쪽 안에 흰 글씨(갤러리 칸과 같은 어두운 띠).
   폰 = 정사각 그대로 · 태블릿 16:10 · PC = 화면 높이만큼. 사진 없는 글은 원래 머리 그대로 */
.dd-post-img { position: relative; display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #e9dccb; }
.dd-post-bg { display: none; }
body:has(.dd-post-img:not([hidden])) .main { padding-top: 0; }   /* 사진이 맨 위부터(투명 상단바 밑으로), 위에 바탕색 띠 없게(11/7 대표) */
.post-body .dd-tags { display: flex; flex-wrap: wrap; gap: 0 .5em; color: var(--brand-d); }   /* 블로그 글 맨 아래 해시태그 = 글의 「태그」 칸(인스타와 같은 묶음, 11/7 대표) */
.post-body .dd-tags[hidden] { display: none; }
.post-body .dd-tags a { color: inherit; text-decoration: none; white-space: nowrap; }   /* 누르면 그 태그 글 목록. 줄 끝에서 「#」 과 글자가 떨어지지 않게 */
.dd-gal-title a { margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }   /* 태그 목록(/blog?tag=) 제목 옆 「전체 보기」 */
/* 태블릿 · PC(11/7 대표 「너무 확대돼 안 보여」): 넓은 화면에 정사각 사진을 폭 가득 자르면 가운데 띠만 보임 → 사진은 자르지 않고 통째로,
   양옆 빈 곳은 같은 사진을 흐리고 어둡게 깔아 폭 가득 채움 */
@media (min-width: 768px) {
  .dd-post-bg:not([hidden]) { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(36px) brightness(.55); transform: scale(1.15); }
}
/* 가로 사진(회차 식탁 사진, 11/7 대표 「PC 는 메인이랑 똑같이」): 메인 첫 화면처럼 폭 가득 채움. 정사각 옛 사진만 위처럼 통째로 + 흐린 양옆 */
.dd-post-hero.is-wide .dd-post-bg { display: none; }

/* 2. 후기: 위 = 별점 요약 + 큰 인용(5초마다 페이드로 바뀜) · 아래 = 흐르는 후기 카드. 후기가 없으면 구역째 숨김(common.js)
   11/7 대표: 구역 전체 주황 배경(다음 「주차별 메뉴」 크림색과 구분), 흐르는 카드 = 실제 카드 비율(85.6 : 54)로 크게 */
.dd-rev-top { display: grid; grid-template-columns: 340px 1fr; gap: var(--s5); align-items: center; }   /* 11/7 대표 「REVIEW 빼고 좀 더 위로」 */
.dd-bars { display: grid; gap: 6px; font-size: var(--t1); }
.dd-bars div { display: grid; grid-template-columns: 30px 1fr 32px; gap: 10px; align-items: center; }
.dd-bars i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.dd-quote::before { content: "\201C"; display: block; height: 40px; font-family: var(--font-logo); font-size: 80px; line-height: 1; color: #fff; }
.dd-quote-text { margin-top: var(--s1); font-size: clamp(22px, 2.3vw, 32px); font-weight: 800; line-height: 1.45; letter-spacing: -.03em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dd-quote-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s3); color: var(--ink); }
.dd-quote-foot::after { content: "\201D"; justify-self: end; height: 40px; font-family: var(--font-logo); font-size: 80px; line-height: 1; color: #fff; }   /* 닫는 따옴표(11/7 대표: 여는 따옴표와 짝, 오른쪽) */
.dd-quote-foot b { color: var(--ink); font-weight: 800; }   /* 작성자 = 가운데 · 조금 크게(11/7 대표, 넘김 점은 뺌) */
.dd-quote-who b { font-size: 19px; }
.dd-flow { margin-top: var(--s5); padding: 0 0 var(--s6); overflow: hidden; }
.dd-flow-row { display: flex; gap: var(--s2); width: max-content; animation: dd-flow 50s linear infinite; }   /* 11/7 대표 「너무 느려」: 1초에 약 75px */
.dd-flow-row + .dd-flow-row { margin-top: var(--s2); animation-direction: reverse; animation-duration: 58s; }
/* 카드(11/7 대표 시안 F): 세로 카드 · 사진 위 · 후기 글 = 크고 굵은 포인트 문구 · 별 = 오른쪽 둥근 아이콘 · 이름 = 오른쪽 아래 */
.dd-card { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; width: 360px; height: 420px; padding: 0; border-radius: var(--r2); background: #fff; color: var(--ink); text-align: left; overflow: hidden; }   /* 11/7 대표 시안 F: 세로 카드 */
.dd-card.has-ph { grid-template-rows: auto auto 1fr auto; }
.dd-card-ph { display: block; width: 100%; height: 220px; object-fit: cover; }   /* 사진 위 */
.dd-card-stars { justify-self: end; display: flex; gap: 2px; padding: 18px 22px 0; }
.dd-card-stars i { display: block; color: #f1e4d2; }
.dd-card-stars i.is-on { color: var(--brand); }
.dd-card-stars svg { display: block; width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }   /* 꼭짓점이 둥근 별 */
.dd-card p { align-self: center; margin: 8px 22px; padding: 0; font-size: 24px; font-weight: 600; line-height: 1.42; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: var(--dd-lines, 2); -webkit-box-orient: vertical; overflow: hidden; }   /* 사진 없으면 글만 크게 · 글자 조금 작고 가늘게(11/7 대표) */
.dd-card.has-ph p { align-self: start; font-size: 20px; -webkit-line-clamp: var(--dd-lines-ph, 2); }   /* 줄 수 = 카드 칸에 들어가는 만큼(11/7 대표 「칸에 맞게」), common.js 가 재서 넣음 */
.dd-card small { justify-self: end; padding: 0 22px 20px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
@keyframes dd-flow { to { transform: translateX(-50%); } }
/* PC: 후기 섹션 = 화면 높이에 맞춤(11/7 대표 「100vh 넘어가는데 유동적이게」). 위 별점 · 큰 인용은 화면 높이 따라 조금 줄고,
   흐르는 카드 두 줄이 남은 높이를 나눠 가짐 → 카드 크기가 화면 높이 따라 바뀜. 카드 = 가로 카드(시안 C: 실제 카드 비율, 글 왼쪽 · 사진 오른쪽 액자).
   카드 안 글자 · 여백은 카드 높이(cqh) 기준이라 카드가 작아지면 같이 작아짐 */
@media (min-width: 1024px) {   /* 무조건 한 화면(11/7 대표), 낮은 화면은 카드 한 줄 */
  .dd-rev-top { flex: none; }
  .dd-quote::before, .dd-quote-foot::after { height: min(40px, 3.4vh); font-size: min(80px, 6.8vh); }
  .dd-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); margin-top: clamp(16px, 3vh, 48px); padding-bottom: 128px; }   /* 128 = 떠 있는 하단바 자리 */
  .dd-flow-row { flex: 1; min-height: 0; max-height: 320px; }
  .dd-flow-row + .dd-flow-row { margin-top: 0; }
  .dd-card { container-type: size; width: auto; height: 100%; aspect-ratio: 85.6 / 54; grid-template-rows: auto 1fr auto; }
  .dd-card.has-ph { grid-template-columns: minmax(0, 1fr) 44%; grid-template-rows: auto 1fr auto; }
  .dd-card.has-ph > :not(.dd-card-ph) { grid-column: 1; }
  .dd-card-ph { grid-column: 2; grid-row: 1 / -1; align-self: center; width: calc(100% - 7cqh); height: 86cqh; border-radius: 12px; }   /* 사진 = 안쪽 여백 두고 둥근 액자 */
  .dd-card-stars { gap: 1px; padding: 7cqh 7cqh 0; }
  .dd-card-stars svg { width: max(14px, 8cqh); height: max(14px, 8cqh); }
  .dd-card p, .dd-card.has-ph p { align-self: center; margin: 2cqh 7cqh; font-size: max(14px, 8.6cqh); line-height: 1.45; }
  .dd-card small { padding: 0 7cqh 6cqh; font-size: max(12px, 6.5cqh); }
}
@media (prefers-reduced-motion: reduce) { .dd-flow-row, .dd-hero-bg, .dd-hero-text { animation: none !important; } }
@keyframes dd-hero-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes dd-hero-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 폰 · 태블릿: 후기 구역도 한 화면에(11/7 대표 「모바일 크기 · 글자 반응형」). 별점 요약 = 왼쪽 큰 점수 · 오른쪽 막대 한 줄로 줄이고,
   큰 인용은 3줄, 흐르는 세로 카드(시안 F) 두 줄이 남은 높이를 나눠 가짐. 카드 안 글자 · 사진은 카드 높이(cqh) 기준 */
@media (max-width: 1023px) {
  .dd-rev-top { flex: none; grid-template-columns: 1fr; gap: clamp(10px, 2.4vh, 22px); }
  .dd-rev-top > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: center; }
  .dd-bars div { grid-template-columns: 22px 1fr 26px; gap: 6px; }
  .dd-bars i { height: 6px; border-radius: 3px; }
  .dd-quote::before, .dd-quote-foot::after { height: min(24px, 3vh); font-size: min(48px, 6vh); }
  .dd-quote-who b { font-size: 14px; }
  .dd-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: clamp(12px, 2.4vh, 24px); padding-bottom: 120px; }   /* 120 = 떠 있는 하단바 자리 */
  .dd-flow-row { flex: 1; min-height: 0; max-height: 300px; gap: 10px; }
  .dd-flow-row + .dd-flow-row { margin-top: 0; }
  .dd-card { container-type: size; width: auto; height: 100%; aspect-ratio: 4 / 5; }
  .dd-card-ph { height: 46cqh; }
  .dd-card-stars { padding: 6cqh 7cqh 0; gap: 1px; }
  .dd-card-stars svg { width: max(10px, 7cqh); height: max(10px, 7cqh); }
  .dd-card p, .dd-card.has-ph p { margin: 2cqh 7cqh; font-size: max(12px, 7.6cqh); line-height: 1.4; }
  .dd-card small { padding: 0 7cqh 5cqh; font-size: max(10px, 5.6cqh); }
}
@media (max-width: 767px) {
  .dd-hd .hd-bar { gap: var(--s1); }
  .dd-hd .logo { font-size: 22px; }
  .dd-hd .hd-util .btn-icon { width: 36px; }
  .dd-hd .hd-util .icon { width: 24px; height: 24px; }
  /* 첫 화면(11/4 대표 고름: 클로드 디자인 10d-2 폰 값). 위에 로고만(아이콘은 내리면 나옴) · 글 묶음은 상단바와 하단바 사이 위아래 가운데(11/8 대표 「너무 밑에 붙어 있음」) · 흰 알약 줄.
     사진: 가로 식탁 사진의 가운데가 보임, 글 묶음이 놓이는 가운데 아래를 어둡게 */
  .dd-hero-bg::after { background: linear-gradient(to top, rgba(24, 16, 9, .86) 0, rgba(24, 16, 9, .7) 55%, rgba(24, 16, 9, 0) 90%), linear-gradient(to bottom, rgba(24, 16, 9, .35), rgba(24, 16, 9, 0) 16%); }
  /* 글 묶음 = 흰 글씨 · 포인트(마감 · 번호) = 브랜드 주황(11/4 대표) */
  .dd-hero-menu li { grid-template-columns: 36px minmax(0, 1fr); font-size: 17px; }
  /* 하단바 폰 */
  .dd-bar { left: 16px; right: 16px; width: auto; bottom: calc(40px + env(safe-area-inset-bottom)); gap: 2px; height: 60px; padding: 0 6px 0 8px; border-radius: 30px; }
  .dd-bar-icon { width: 44px; height: 44px; }
  .dd-bar-icon .icon { width: 22px; height: 22px; }
  .dd-bar-price { display: none; }
  .dd-bar .dd-bar-order { gap: 10px; height: 46px; margin-left: auto; padding: 0 22px; border-radius: 23px; font-size: 14.5px; }
  body:has(.dd-bar) { padding-bottom: 112px; }
  body:has(.buybar) .dd-bar { display: none; }
  .dd-gal { padding: 60px 0 104px; }
  .dd-gal-title { font-size: 16px; }
  .dd-gal-more { min-height: 44px; gap: 6px; font-size: 14px; }
  .dd-gal-grid { --cols: 1; }
  .dd-gal-grid:has(> :nth-child(2)) { --cols: 2; }
  .dd-gal-item:nth-child(n + 7) { display: none; }
  .dd-gal-page .dd-gal-head { display: grid; gap: 8px; }
  .dd-gal-item::after { height: 50%; }
  .dd-gal-cap { left: 14px; right: 14px; bottom: 12px; gap: 2px; }
  .dd-gal-date { font-size: 11.5px; }
  .dd-gal-name { font-size: 15px; }
  .dd-gal-new { left: 14px; top: 12px; font-size: 11.5px; }
  .dd-gal-new::before { width: 6px; height: 6px; margin-right: 6px; border-radius: 3px; }
}

@media (min-width: 1024px) and (max-height: 839px) {   /* PC 낮은 화면: 후기 카드 한 줄로 크게 */
  .dd-rev .dd-flow-row + .dd-flow-row { display: none; }
}   /* 폰 낮은 화면: 큰 인용 2줄 */
@media (max-width: 1023px) and (max-height: 872px) {   /* 폰 후기 카드: 두 줄이면 카드가 너무 작아지는 높이에선 한 줄로 크게(11/7 대표) */
  .dd-rev .dd-flow-row + .dd-flow-row { display: none; }
}
/* 4. 상품 상세 1d(11/6 대표: 클로드 디자인 「1d 잡지 펼침」 + 구매바 B안, PC · 폰 같음)
   왼쪽 = 큰 사진(작은 사진 왼쪽 위) → 상세 → 후기 → 상품 정보 → 배송, 오른쪽 고정 = 소개 · 이름 · 이번 주 메뉴 · 후기 슬라이드.
   이 화면에서는 레이아웃 흰 알약 줄 대신 구매바(.dd-buy)가 같은 자리에 뜸 */
body:has(.dd-pd) .main { padding-top: 0; }
body:has(.dd-buy) .dd-bar { display: none; }
body:has(.dd-buy) { padding-bottom: 116px; }
.dd-pd-media { position: relative; }
.dd-pd-thumbs { position: absolute; right: 16px; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 10px; }
.dd-pd-thumb-list { display: flex; gap: 4px; }
.slider.is-single .dd-pd-thumbs { display: none; }

.dd-pd-side { display: grid; align-content: start; padding: var(--s3) 20px var(--s4); background: var(--bg); }
.dd-pd-ship { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; color: var(--brand); }
.dd-pd-ship .dd-truck3d { width: 28px; height: 28px; }
.dd-pd-ship:has([data-dd-ship-top]:empty) { display: none; }
.dd-pd-sum:empty { display: none; }
.dd-pd-badges { display: flex; gap: var(--s0); margin-top: var(--s1); }   /* 한 줄 소개 바로 아래, 구분선 없음(11/6 대표: 「구분선 삭제 · 여백 너무 넓음」) */
/* 주문 마감 = 기차표(11/7 대표: 시안 2번 · 마감 뒤 「마」). 글은 디자인 › 콘텐츠 「첫 화면」 일시 · 문구 2 */
.dd-tk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 108px; margin-top: 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dd-tk[hidden] { display: none; }
.dd-tk::before, .dd-tk::after { content: ""; position: absolute; right: 100px; width: 16px; height: 16px; border-radius: 8px; background: var(--bg); }
.dd-tk::before { top: -8px; box-shadow: inset 0 -1px 0 var(--line); } .dd-tk::after { bottom: -8px; box-shadow: inset 0 1px 0 var(--line); }
.dd-tk-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 14px 12px; text-align: center; }   /* 화살표 가운데, 마감 · 도착 묶음은 화살표 양쪽 칸마다 가운데 정렬(11/8 대표) */
.dd-tk small { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
.dd-tk-main b { display: block; margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; }   /* 일자 · 「주문 마감」 · 「오후 4시」 크게, 위아래 글과 붙게(11/8 대표) */
.dd-tk-main span { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.dd-tk-ar { justify-self: center; width: 20px; height: 20px; fill: none; stroke: #cfc6bb; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dd-tk-msg { display: none; align-content: center; gap: 3px; padding: 14px 12px 14px 16px; }
.dd-tk-msg b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.dd-tk-msg em { font-style: normal; color: var(--brand); }
.dd-tk-msg span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dd-tk-stub { display: grid; place-items: center; border-left: 2px dashed var(--line); padding: 10px 6px; text-align: center; }
.dd-tk-stub b { font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--brand); font-variant-numeric: tabular-nums; }
.dd-tk-left, .dd-tk-wait { display: grid; justify-items: center; gap: 2px; }
.dd-tk-wait { display: none; gap: 4px; }
.dd-tk-wait b { font-size: 14px; }
.dd-tk.no-left .dd-tk-stub { display: none; }
.dd-tk.no-left::before, .dd-tk.no-left::after { display: none; }
/* 마감 뒤(상품 상세): 왼쪽 = 「주문은 계속!」, 떼는 쪽 = 택배차 「다음 주 출발」, 메뉴 자리 = 「식단 짜는 중」(움직임은 상품 상세 detail.css, 11/10 대표).
   메인 첫 화면 메뉴는 새 메뉴로 바꿀 때까지 그대로 */
.dd-tk.is-closed .dd-tk-main, .dd-tk.is-closed .dd-tk-left { display: none; }
.dd-tk.is-closed .dd-tk-msg, .dd-tk.is-closed .dd-tk-wait { display: grid; }
.dd-load { display: flex; gap: 5px; }
.dd-load i { width: 7px; height: 7px; border-radius: 4px; background: var(--brand); animation: dd-dot 1.2s ease-in-out infinite; }
.dd-load i:nth-child(2) { animation-delay: .2s; } .dd-load i:nth-child(3) { animation-delay: .4s; }
@keyframes dd-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dd-load i { animation: none; } }
.dd-pd-dishes ol { display: grid; gap: 6px; margin-top: var(--s2); font-size: 15px; font-weight: 600; }
/* 메뉴 구성 = 시안 9차 N(11/7 대표): 번호 01~ · 「3가지 57,000원」 → 점선 「+ 4가지 더 · 7가지 99,000원」 → 나머지 */
.dd-pd-dishes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; counter-increment: dish; }
.dd-pd-set, .dd-pd-plus { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.dd-pd-set { margin-top: var(--s2); }
.dd-pd-plus { margin-top: 20px; }   /* 위 점선 구분선 없음(11/8 대표) */
.dd-pd-plus > span { display: inline-flex; align-items: center; gap: 5px; line-height: 20px; }   /* 「7가지」 + 알약 사이 붙여서(11/8 대표). 줄 높이 20px · 알약 글자 줄 12px = 1배 화면(윈도 100%)에서도 「4가지」가 아래로 1px 처지지 않게(11/8 대표 「밑으로 가 있음」) */
.dd-pd-plus b { display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 6px; border-radius: 8px; background: var(--brand); font-size: 9.5px; font-weight: 600; line-height: 12px; color: #fff; }   /* 「+ 4가지」 = 주황 알약(11/8 대표, 「더」 뺌): 높이 16 · 글씨 9.5 · 굵기 600(굵으면 뭉개져 안 보임) · 옆 「7가지」와 위아래 가운데 · 양옆 여백 같게 */
.dd-pd-plus b svg { flex: none; width: 7px; height: 7px; stroke-width: 2.5; }
.dd-pd-plus svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

/* 오른쪽 후기 슬라이드(11/8 대표 「고정한 베스트 후기 · 문구와 사진 크게」): 큰 사진 + 큰 문구. 카드 모양 · 위 「후기 139 · n/9」 없음(11/8 대표),
   큰 따옴표 = 왼쪽 위 「“」 · 오른쪽 아래 「”」, 따옴표는 제자리에 두고 후기만 넘어감(11/8 대표). 끝에서 되감지 않고 같은 방향으로 계속(common.js) */
.dd-pd-rev { position: relative; min-width: 0; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }   /* min-width 0 = 후기 줄이 오른쪽 칸 폭을 넘지 않게 */
.dd-pd-rev-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dd-pd-rev-track::-webkit-scrollbar { display: none; }
.dd-pd-rev-item { position: relative; flex: 0 0 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; padding: 50px 4px; scroll-snap-align: start; }
.dd-pd-rev-item:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.dd-pd-rev::before, .dd-pd-rev::after { position: absolute; height: 40px; overflow: hidden; font-family: var(--font-logo); font-size: 72px; line-height: 1; color: var(--brand); }
.dd-pd-rev::before { content: "\201C"; left: 0; top: calc(var(--s2) + 1px); }
.dd-pd-rev::after { content: "\201D"; right: 0; bottom: 0; }
.dd-pd-rev-item img { width: 112px; height: 112px; border-radius: 12px; object-fit: cover; }
.dd-pd-rev-txt { display: grid; align-content: center; }
.dd-pd-rev-txt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; color: var(--ink); }
.dd-pd-rev-txt small { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.dd-pd-rev-txt .stars { font-size: 13px; letter-spacing: 1px; color: var(--brand); }
@media (max-width: 767px) {
  .dd-pd-rev-item { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 40px 2px; }
  .dd-pd-rev::before, .dd-pd-rev::after { height: 32px; font-size: 56px; }
  .dd-pd-rev-item img { width: 88px; height: 88px; border-radius: 10px; }
  .dd-pd-rev-txt p { font-size: 16px; }
}
.dd-pd-sec { display: grid; gap: var(--s2); padding-top: var(--s5); scroll-margin-top: var(--hd-bar); }
.dd-pd-sec-head { display: flex; align-items: center; justify-content: space-between; }

/* 상품 후기(11/7 대표 「누누리처럼, 우리 UI 로」): 평점 + 점수별 막대 · 사진 줄 · 베스트 슬라이드 · 전체 목록 · 사진 모아 보기 / 크게 보기.
   왼쪽 칸 폭이 화면마다 달라서 칸 폭 기준(@container)으로 좁으면 한 줄로 쌓아요 */   /* minmax(0) = 사진 줄이 칸 밖으로 안 넘치게 */
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.rv-avg { display: flex; align-items: center; gap: var(--s2); }
.rv-avg-side { display: grid; gap: 6px; }
.rv-avg-side .stars { font-size: 18px; line-height: 1; }
.rv-avg-side .meta { font-size: 14px; }
.stars .off { color: #e8ddcf; }
.rv-dist { flex: 1; display: grid; gap: 8px; min-width: 200px; max-width: 320px; }
.rv-dist > div { display: grid; grid-template-columns: 22px minmax(0, 1fr) 32px; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rv-bar { height: 6px; overflow: hidden; border-radius: 3px; background: #f1e9de; }
.rv-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .6s var(--ease); }
.rv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); flex-wrap: wrap; font-size: 16px; }
.rv-row > b { font-weight: 800; }
.rv-photos { display: grid; gap: var(--s1-5); }
.rv-strip-wrap { position: relative; }
.rv-strip { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
.rv-strip::-webkit-scrollbar { display: none; }
.rv-strip > * { position: relative; flex: none; width: 104px; height: 104px; overflow: hidden; border-radius: var(--r1); background: var(--bg); }
.rv-strip img, .rv-thumb img, .rv-best-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); -webkit-user-drag: none; }
.rv-strip > button:hover img, .rv-thumb:hover img { transform: scale(1.04); }
.rv-strip .rv-gal-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--bg); font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--ink-2); }
.rv-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(35, 29, 23, .08); transition: transform var(--t-fast) var(--ease); }
.rv-arrow:active { transform: scale(.92); }
.rv-arrow .icon { width: 16px; height: 16px; }
.rv-strip-wrap > .rv-arrow { position: absolute; top: 50%; margin-top: -20px; }
.rv-strip-wrap > .is-prev { left: -14px; }
.rv-strip-wrap > .is-next { right: -14px; }
.rv-extra { position: absolute; right: 8px; bottom: 6px; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); pointer-events: none; }
.rv-best { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r2); background: var(--bg); }
.rv-track { display: flex; gap: 24px; align-items: flex-start; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.rv-slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: var(--s4); align-items: center; min-width: 0; }   /* 11/7 대표: 사진 크게 */
.rv-slide:not(:has(.rv-best-img)) { grid-template-columns: minmax(0, 1fr); }
.rv-best-img { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--r1); background: #fff; }
.rv-best-img img { pointer-events: none; }
.rv-best-in, .rv-item-in { display: grid; align-content: start; gap: 8px; min-width: 0; }
.rv-tag { justify-self: start; padding: 3px 10px; border-radius: var(--r-pill); background: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #fff; }
.rv-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-line .stars { font-size: 14px; line-height: 1; }
.rv-line .meta, .rv-who { font-size: 13px; font-variant-numeric: tabular-nums; }
.rv-who { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-2); }
.rv-text { margin: 0; font-size: 15px; line-height: 1.7; text-wrap: pretty; overflow-wrap: anywhere; }
.rv-best-in .rv-text { font-size: 24px; font-weight: 800; line-height: 1.45; letter-spacing: -.03em; }   /* 11/7 대표: 메인 큰 후기처럼 크고 굵게 */
.rv-best-in .rv-text::before, .rv-best-in .rv-text::after { display: block; height: 34px; font-family: var(--font-logo); font-size: 68px; line-height: 1; color: var(--brand); }
.rv-best-in .rv-text::before { content: "\201C"; }
.rv-best-in .rv-text::after { content: "\201D"; text-align: right; }
.rv-best-in .rv-text .more { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.rv-best-in .stars { font-size: 20px; }
.rv-best-in .rv-who { font-size: 15px; }
.rv-text .more { display: inline; margin-left: 4px; font-size: 13px; }
.rv-car-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-car-pos { display: flex; align-items: center; gap: 12px; }
.rv-dots { display: flex; align-items: center; gap: 5px; }
.rv-dots > button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--ink); opacity: .25; transition: width .5s var(--ease), opacity .5s var(--ease), background-color .5s var(--ease); }
.rv-car-arrows { display: flex; gap: 8px; }
.rv-all { display: grid; gap: 4px; }
.rv-tools { display: flex; align-items: center; gap: var(--s2); }
.rv-sort { height: 32px; padding: 0 18px 0 0; border: 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f665d' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center / 10px 6px; font: inherit; font-size: var(--t1); font-weight: 600; color: var(--ink-2); appearance: none; -webkit-appearance: none; cursor: pointer; }
.rv-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rv-item { display: flex; gap: var(--s2); padding: var(--s3) 0; }
.rv-item + .rv-item { border-top: 1px solid var(--line); }
.rv-item-in { flex: 1; }
.rv-thumb { position: relative; flex: none; width: 96px; height: 96px; overflow: hidden; border-radius: var(--r1); background: var(--bg); }
.rv-reply { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r1); background: var(--bg); font-size: 14px; line-height: 1.7; }
.rv-reply .kicker { font-size: 13px; }
.rv-reply-btn { justify-self: start; }
/* 사진 모아 보기 · 크게 보기: PC = 가운데 창, 폰 = 화면 가득 */
.rv-gal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 32px; }
.rv-gal-scrim { position: absolute; inset: 0; background: rgba(35, 29, 23, .45); opacity: 0; transition: opacity .3s var(--ease); }
.rv-gal-box { position: relative; display: flex; flex-direction: column; width: min(960px, 100%); height: min(86vh, 760px); overflow: hidden; border-radius: var(--r2); background: #fff; opacity: 0; transform: translateY(16px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.rv-gal.is-open .rv-gal-scrim, .rv-gal.is-open .rv-gal-box { opacity: 1; }
.rv-gal.is-open .rv-gal-box { transform: none; }
.rv-gal-head { flex: none; display: flex; align-items: center; gap: 4px; height: 60px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.rv-gal-title { flex: 1; min-width: 0; margin: 0; padding-left: 10px; font-size: 16px; font-weight: 800; white-space: nowrap; }
.rv-gal.is-view .rv-gal-title { padding-left: 0; }
.rv-gal-head .btn-icon { width: 44px; height: 44px; }
.rv-gal:not(.is-view) [data-rv-back] { display: none; }
.rv-gal-body { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; }
.rv-gal-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.rv-gal-grid > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rv-gal-grid button { aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: var(--r0); background: var(--bg); }
.rv-gal-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-view { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.rv-view-img { position: relative; overflow: hidden; background: #f4efe8; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rv-view-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rv-view-img > .rv-arrow { position: absolute; top: 50%; margin-top: -20px; }
.rv-view-img > .is-prev { left: 16px; }
.rv-view-img > .is-next { right: 16px; }
.rv-view-n { position: absolute; left: 50%; bottom: 16px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.rv-view-txt { display: grid; align-content: start; gap: 10px; min-height: 0; overflow-y: auto; padding: 24px; }
.rv-view-txt .more { justify-self: start; margin-top: 4px; }
@container (max-width: 600px) {
  .rv-head { gap: var(--s3); }
  .rv-dist { flex-basis: 100%; max-width: none; }
  .rv-slide { grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-items: start; }   /* 좁은 칸: 사진 위에 크게 · 글 아래(11/7 대표 「사진 크게」) */
  .rv-best-img { aspect-ratio: 4 / 3; }
  .rv-best-in .rv-text { font-size: 17px; }
  .rv-best-in .rv-text::before, .rv-best-in .rv-text::after { height: 24px; font-size: 48px; }
  .rv-best { padding: var(--s2); }
  .rv-strip > * { width: 88px; height: 88px; }
  .rv-strip-wrap > .rv-arrow, .rv-car-arrows { display: none; }
  .rv-thumb { width: 72px; height: 72px; }
  .rvs .btns .btn { width: 100%; }
}
@media (max-width: 767px) {
  .rv-gal { padding: 0; align-items: stretch; }
  .rv-gal-scrim { display: none; }
  .rv-gal-box { width: 100%; height: 100%; border-radius: 0; opacity: 1; transform: translateX(100%); transition: transform var(--t-panel) var(--ease); }
  .rv-gal.is-open .rv-gal-box { transform: none; }
  .rv-gal-head { height: 56px; padding: 0 6px; }
  .rv-gal:not(.is-view) [data-rv-back] { display: flex; }
  .rv-gal-head [data-rv-close] { display: none; }
  .rv-gal-title { padding-left: 0; }
  .rv-gal-grid { padding: 4px; }
  .rv-gal-grid > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .rv-gal-grid button { border-radius: 0; }
  .rv-view { display: flex; flex-direction: column; overflow-y: auto; }
  .rv-view-img { flex: none; aspect-ratio: 1; }
  .rv-view-img > .is-prev { left: 12px; }
  .rv-view-img > .is-next { right: 12px; }
  .rv-view-txt { overflow: visible; padding: 20px 20px 40px; }
}
.dd-pd-body img { width: 100%; height: auto; }   /* 상세 설명은 가로 꽉 차게(11/6 대표) */

/* 구매바(PC · 폰 같음, 11/6 대표): 금액 [이번 주만 구매] [정기 구독하기]. 정기배송 안 켠 상품은 [구매하기] 하나 */
body:has(.dd-buy) .main { animation: none; }   /* 페이지 흐려짐 효과가 남으면 구매 칸 · 옵션 판이 바닥글 줄 아래로 깔림(11/8 폰 「구매하기 잘림」, PC 는 알약 줄) */
.dd-buy-bar { display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 7px 0 20px; border-radius: 32px; background: #fff; box-shadow: 0 6px 20px rgba(35, 29, 23, .12); }
.dd-price { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dd-price-main { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; line-height: 1.3; }
.dd-price-main b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.dd-amount-list { display: flex; flex-wrap: wrap; column-gap: 14px; }
.dd-amount-list span { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.dd-amount-list b { color: #231d17; }   /* 판에 총 금액이 나오니 구매바 금액은 숨김 */   /* 금액 아래 작은 줄(무료배송 등) 없음(11/6 대표) */

/* 판(폰 = 아래에서 올라옴, PC = 구매 버튼 위에 뜸) · 덮개 */
.dd-sheet::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.dd-sheet-head b { font-size: 17px; font-weight: 800; }
.dd-opt b { font-size: 16px; font-weight: 800; }
.dd-opt span { font-size: 13px; color: var(--ink-2); }
.dd-sheet-cyc > span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.dd-step b { min-width: 76px; font-size: 15px; font-weight: 800; text-align: center; }
.dd-sheet-total > span:last-child { display: grid; justify-items: end; }

@media (max-width: 1023px) {
  .dd-price-main { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 5px; }
  .dd-price-main b { font-size: 16px; }
  .dd-amount-list { column-gap: 10px; }   /* 폰도 PC처럼 한 줄로 나열(11/8 대표 「줄바꿈 말고」) */
  .dd-amount-list span { font-size: 13px; }
  .dd-amount-list b { font-size: 15px; }   /* 양옆 여유(11/8 대표 「여유 공간 너무 없음」) */
}
@media (min-width: 1024px) {
  body:has(.dd-buy) { padding-bottom: 132px; }
  /* 오른쪽 칸(11/8 대표 「위아래 여백 반응형 · 높이가 낮으면 후기 가리기」): 머리 ~ 하단바 사이 가운데에 두고, 여백 · 줄 간격 · 상품명은 화면 높이에 맞춰 줄어듦.
     그래도 후기까지 다 안 들어가면 후기 칸만 숨김(is-tight, common.js 가 실제 높이를 재서 붙임) */   /* 128 = 떠 있는 하단바 자리 */
  .dd-pd-plus { margin-top: clamp(12px, 2vh, 20px); }
  .dd-pd-rev-item { padding: clamp(40px, 4.4vh, 50px) 4px; }

  /* PC = 레이아웃 알약 줄(왼쪽 메뉴 아이콘)은 그대로 두고, 오른쪽 끝에 폰과 같은 금액 + [이번 주만 구매] [정기 구독하기] → 바로 위에 판 */
  body:has(.dd-buy) .dd-bar { display: flex; }
  body:has(.dd-buy) .dd-bar-price, body:has(.dd-buy) .dd-bar .dd-bar-order { display: none; }   /* 가운데 하단바의 오른쪽 끝 안에(11/7 하단바 폭 바뀐 뒤 어긋남 고침) */
}

/* 마이쇼핑(11/8 대표 시안 6-1안): 큰 인사 · 주황 긴 박스(왼쪽 정기구독 상태 · 오른쪽 적립금 | 쿠폰, 줄바꿈 없음) · 주문 처리 현황 흰 박스(회색 테두리) · 아이콘 메뉴 한 줄 4개(색 없음, 11/8 대표) · 작은 회색 로그아웃 */
.dd-my-money b { font-size: 15px; font-weight: 800; }
.dd-my-money i { width: 1px; height: 14px; margin: 0 12px; background: rgba(255, 255, 255, .45); }
.dd-my-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 15px; height: 3px; border-radius: 2px; background: #efe7dc; }
.dd-my-steps b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #efe7dc; font-size: 14px; font-weight: 800; color: #a39a90; }
/* 주문 내역: 주문 처리 현황 숫자를 눌러 들어오면 그 단계 주문만(common.js) */
.dd-my-filter { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--brand-pale); font-size: 13px; font-weight: 700; }
.dd-my-filter b { color: var(--brand-d); }
.dd-my-filter button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dd-my-none { padding: 28px 0; text-align: center; font-size: 14px; color: var(--ink-2); }


/* 폰에서 누를 때 브라우저가 칠하는 파란 눌림 표시 끄기(2026-11-11 대표) */
html { -webkit-tap-highlight-color: transparent; }