/* ==========================================================
   mudeon — 공통 스타일 + 메인
   ========================================================== */

:root{
  --bg:#F4F1EA;        /* 바탕 60% */
  --sub:#E9E4D8;       /* 서브 바탕 30% */
  --img:#E7DED0;       /* 상품 이미지 배경 (사진 바탕과 맞춤) */
  --main:#4F5E4A;      /* 메인 10% — 버튼·공지바만 */
  --main-dark:#3F4C3B;
  --main-light:#DCE3D3;/* 배지·태그 바탕 */
  --text:#262622;
  --muted:#6B6B66;
  --accent:#9C4A3A;    /* 할인율 숫자에만 */
  --line:rgba(38,38,34,.12);
  --white:#FBFAF6;

  --f-title:'Gowun Batang', serif;
  --f-body:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --f-logo:'Cormorant Garamond', serif;

  --gutter:20px;
  --max:1200px;
  --header-h:60px;
  --notice-h:36px;
  --hero-bg:#4D5844;   /* 히어로 이미지 가장자리 색 */
  --radius:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:768px){ :root{ --gutter:32px; --header-h:68px; } }
@media (min-width:1024px){ :root{ --gutter:48px; } }

/* ---------- 기본 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.65; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
h1,h2,h3,p,ul,dl,dd{ margin:0; }
ul{ padding:0; list-style:none; }
del{ color:var(--muted); }
:focus-visible{ outline:2px solid var(--main); outline-offset:3px; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--text); color:var(--bg); padding:10px 16px; }
.skip-link:focus{ top:12px; }
.muted{ color:var(--muted); }
.container{ width:100%; max-width:calc(var(--max) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }

/* 가로 넘침 방지: 한 줄짜리 그리드의 열을 화면 폭(1fr)에 고정.
   기본값(auto)이면 안쪽 요소의 최소 폭(입력칸 기본 폭, 줄바꿈 안 되는 버튼 등)만큼 열이 늘어나
   iOS Safari에서 페이지가 화면보다 넓어짐. 넓은 화면용 열 설정은 아래 @media에서 덮어씀 */
.hero-inner,.feature-inner,.set-inner,.story-inner,.coupon-inner,.footer-grid,
.pd-grid,.gallery,.review-grid,.quiz-options,.result-actions,.rv-summary,.free-box,.shop-toolbar{
  grid-template-columns:minmax(0,1fr);
}

/* ---------- 타이포 ---------- */
.eyebrow{
  font-family:var(--f-logo); font-size:15px; letter-spacing:.22em; text-transform:lowercase;
  color:var(--muted); margin-bottom:12px;
}
.h-title{ font-family:var(--f-title); font-weight:700; letter-spacing:-.02em; line-height:1.35; }
.section{ padding:72px 0; }
@media (min-width:768px){ .section{ padding:112px 0; } }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:32px; }
@media (min-width:768px){ .section-head{ margin-bottom:48px; } }
.section-head h2{ font-family:var(--f-title); font-weight:700; font-size:26px; line-height:1.35; letter-spacing:-.02em; }
@media (min-width:768px){ .section-head h2{ font-size:34px; } }
.section-head .desc{ color:var(--muted); margin-top:8px; font-size:15px; }
.more-link{ font-size:14px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:2px; white-space:nowrap; }
.more-link:hover{ color:var(--text); border-color:var(--text); }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 26px; border-radius:var(--radius);
  font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.btn-main{ background:var(--main); color:var(--white); }
.btn-main:hover{ background:var(--main-dark); }
.btn-line{ border:1px solid var(--text); color:var(--text); background:transparent; }
.btn-line:hover{ background:var(--text); color:var(--bg); }
.btn-sm{ min-height:40px; padding:0 18px; font-size:14px; }
.btn-block{ width:100%; }

.tag{
  display:inline-block; background:var(--main-light); color:var(--main-dark);
  font-size:12px; font-weight:600; padding:3px 9px; border-radius:2px; letter-spacing:0;
}

/* ---------- 공지바 · 헤더 ---------- */
.notice-bar{
  background:var(--main); color:var(--white);
  text-align:center; font-size:13px; letter-spacing:0;
  height:var(--notice-h); line-height:var(--notice-h); padding:0 var(--gutter);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,241,234,.94);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s, color .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
}
.site-header.scrolled{ border-color:var(--line); }
.header-inner{
  max-width:calc(var(--max) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter);
  height:var(--header-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.logo{ display:inline-flex; align-items:center; gap:8px; color:var(--main); justify-self:center; transition:color .4s; }
.logo .pebble{ width:20px; height:auto; }
.logo span{ font-family:var(--f-logo); font-size:20px; font-weight:400; letter-spacing:.22em; line-height:1; margin-right:-.22em; }
.gnb{ display:none; }
.header-actions{ display:flex; justify-content:flex-end; gap:2px; }
.icon-btn{ width:44px; height:44px; display:inline-grid; place-items:center; position:relative; border-radius:50%; }
.icon-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn:hover{ background:rgba(38,38,34,.05); }
.menu-btn{ justify-self:start; margin-left:-10px; }
.cart-count{
  transition:transform .25s var(--ease), background-color .4s, color .4s;
  position:absolute; top:5px; right:3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--text); color:var(--bg);
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
  transform:scale(0);
}
.cart-count.show{ transform:scale(1); }
.mobile-nav{ border-top:1px solid var(--line); padding:8px var(--gutter) 16px; background:var(--bg); }
.mobile-nav a{ display:block; padding:14px 0; font-size:17px; border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border-bottom:0; }

@media (min-width:1024px){
  .header-inner{ grid-template-columns:auto 1fr auto; gap:48px; }
  .menu-btn,.mobile-nav{ display:none !important; }
  .logo{ justify-self:start; }
  .gnb{ display:flex; justify-content:center; gap:40px; font-size:15px; }
  .gnb a{ padding:6px 0; position:relative; }
  .gnb a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transition:transform .25s var(--ease); }
  .gnb a:hover::after{ transform:scaleX(1); }
}

/* 메인: 공지바·헤더를 히어로 위에 투명하게 겹침 → 히어로를 벗어나면 기본 헤더로 */
.hero-overlay .notice-bar{
  position:relative; z-index:51; background:transparent; color:var(--bg);
  border-bottom:1px solid rgba(244,241,234,.16);
}
.site-header.on-hero{
  background:transparent; color:var(--bg); border-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.site-header.on-hero .logo{ color:var(--bg); }
.site-header.on-hero .icon-btn:hover{ background:rgba(244,241,234,.12); }
.site-header.on-hero .cart-count{ background:var(--bg); color:var(--text); }

/* ---------- 상품 카드 ---------- */
.grid-products{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 12px; }
@media (min-width:768px){ .grid-products{ gap:48px 20px; } }
@media (min-width:1024px){ .grid-products{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:56px 24px; } }
.card{ display:flex; flex-direction:column; }
.card-media{ position:relative; display:block; aspect-ratio:4/5; background:var(--img); overflow:hidden; border-radius:2px; }
.card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s var(--ease), transform 1.2s var(--ease); }
.card-media .img-hover{ opacity:0; }
.card-media .tag{ position:absolute; top:10px; left:10px; z-index:2; }
@media (hover:hover){
  .card:hover .img-hover,.card-media:focus-visible .img-hover{ opacity:1; }
  .card:hover .card-media img{ transform:scale(1.03); }
}
.card-body{ display:flex; flex-direction:column; flex:1; padding-top:14px; }
.card-key{ font-size:12px; color:var(--muted); margin-bottom:2px; }
.card-name{ font-size:15px; font-weight:600; line-height:1.4; }
@media (min-width:768px){ .card-name{ font-size:16px; } }
.card-line{ font-size:13px; color:var(--muted); margin-top:2px; }
.rating{ font-size:13px; margin-top:8px; }
.star{ color:var(--text); font-size:12px; }
.price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; margin-top:4px; margin-bottom:14px; }
.price strong{ font-size:16px; font-weight:700; }
.price del{ font-size:13px; }
.rate{ color:var(--accent); font-weight:700; font-size:16px; }
.card .btn-add{ margin-top:auto; width:100%; }
@media (min-width:768px){ .card .btn-add{ width:auto; align-self:flex-start; } }

/* ---------- 메인: 히어로 ---------- */
/* 공지바+헤더 높이만큼 위로 끌어올려 그 아래에 깔림 */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--hero-bg); color:var(--bg);
  margin-top:calc((var(--notice-h) + var(--header-h)) * -1);
}
.hero-copy{
  position:relative; z-index:2;
  padding:calc(var(--notice-h) + var(--header-h) + 28px) var(--gutter) 0;
}
.hero-label{ font-size:13px; letter-spacing:.04em; opacity:.88; }
.hero h1{
  font-family:var(--f-title); font-weight:700; letter-spacing:-.03em; line-height:1.28;
  font-size:clamp(32px, 8.6vw, 44px); margin-top:10px;
}
.hero-actions{ display:flex; align-items:center; gap:22px; margin-top:22px; }
.btn-pill{
  display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 24px;
  border:1px solid var(--bg); border-radius:999px; color:var(--bg);
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:background-color .25s, color .25s;
}
.btn-pill .arrow{ transition:transform .25s var(--ease); }
.btn-pill:hover{ background:var(--bg); color:var(--hero-bg); }
.btn-pill:hover .arrow{ transform:translateX(3px); }
.hero-link{
  color:var(--bg); font-size:15px; padding:6px 0;
  text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px;
  text-decoration-color:rgba(244,241,234,.6); transition:text-decoration-color .2s;
}
.hero-link:hover{ text-decoration-color:var(--bg); }
.hero :focus-visible{ outline-color:var(--bg); }

/* 모바일·태블릿: 세로 이미지를 폭에 맞춰 아래에 두고, 위쪽 빈 초록 공간(약 27%)에 글이 겹치도록 끌어올림.
   이미지 윗부분은 배경색으로 서서히 사라지게 해 경계가 보이지 않음 */
.hero-media{ display:block; position:relative; z-index:1; margin-top:-36vw; }
.hero-media img{
  width:100%; height:auto;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 24%);
}
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:3;
  width:100%; height:36px; display:block; color:var(--bg);
}

@media (min-width:768px){
  .hero-copy{ padding-top:calc(var(--notice-h) + var(--header-h) + 56px); }
  .hero h1{ font-size:52px; }
  .hero-label{ font-size:14px; }
  .hero-media{ margin-top:-30vw; }
  .hero-wave{ height:56px; }
}
/* 데스크톱: 가로 이미지를 히어로 전체에 깔고 제품이 있는 오른쪽 기준으로 맞춤
   (좁아지면 초록 여백인 왼쪽부터 잘림). 남는 공간은 같은 색 배경이 채움 */
@media (min-width:1024px){
  /* 사진이 히어로 맨 위(공지바·헤더 뒤)부터 꽉 차게. 흐림·그라데이션 없음 */
  .hero{ height:clamp(520px, 43vw, 860px); }   /* 43vw ≈ 사진 비율(2.33:1) → 확대·잘림 최소 */
  .hero-media{ position:absolute; inset:0; margin:0; }
  /* 헤더(공지바+메뉴+아이콘)가 밝은 돌판 위에서도 보이도록 맨 위에 세이지 → 투명 그림자.
     z-index 2: 사진(1) 위, 글(2, 문서 순서상 뒤)과 헤더 아래. 아래로 갈수록 빠르게 옅어져 제품은 가리지 않음 */
  .hero::before{
    content:''; position:absolute; left:0; right:0; top:0; z-index:2; height:180px; pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(79,94,74,.7) 0%, rgba(79,94,74,.55) 30%, rgba(79,94,74,.22) 65%, rgba(79,94,74,0) 100%);
  }
  /* 넓은 화면에서 아이콘이 돌판 가장 밝은 부분에 걸리므로 아주 옅은 그림자 (데스크톱 히어로 위에서만) */
  .hero-overlay .site-header.on-hero .icon-btn svg{
    filter:drop-shadow(0 0 1px rgba(38,38,34,.45)) drop-shadow(0 1px 3px rgba(38,38,34,.35));
  }
  .hero-media img{
    width:100%; height:100%; object-fit:cover; object-position:right center;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero-copy{
    height:100%; display:flex; flex-direction:column; justify-content:center;
    max-width:calc(var(--max) + var(--gutter) * 2); margin:0 auto;
    padding:calc(var(--notice-h) + var(--header-h)) var(--gutter) 56px;
  }
  .hero h1{ font-size:clamp(42px, 4.2vw, 64px); margin-top:16px; }
  .hero-actions{ margin-top:36px; gap:28px; }
  .btn-pill{ height:52px; padding:0 28px; }
  .hero-wave{ height:72px; }
}

/* ---------- 신뢰 배지 (숫자 3 + 배지 3) ---------- */
.trust{ border-bottom:1px solid var(--line); }
.trust ul{ display:grid; grid-template-columns:repeat(3,1fr); }
.trust li{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:8px;
  padding:24px 6px; font-size:13px; line-height:1.4; border-right:1px solid var(--line);
}
.trust li:nth-child(3n){ border-right:0; }
.trust li:nth-child(-n+3){ border-bottom:1px solid var(--line); }
.trust svg{ width:32px; height:32px; fill:none; stroke:var(--text); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.trust-num{ font-family:var(--f-title); font-weight:700; font-size:24px; line-height:32px; letter-spacing:-.02em; }
.trust-label{ color:var(--muted); }
@media (min-width:768px){
  .trust ul{ grid-template-columns:repeat(6,1fr); }
  .trust li{ padding:36px 8px; font-size:14px; border-bottom:0 !important; border-right:1px solid var(--line); }
  .trust li:nth-child(3n){ border-right:1px solid var(--line); }
  .trust li:last-child{ border-right:0; }
  .trust-num{ font-size:28px; }
}

/* ---------- 대표 상품 ---------- */
.feature{ background:var(--sub); }
.feature-inner{ display:grid; gap:36px; align-items:center; }
.feature-media{ position:relative; aspect-ratio:4/5; background:var(--img); overflow:hidden; }
.feature-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-media .tag{ position:absolute; left:16px; top:16px; }
.feature-copy h2{ font-family:var(--f-title); font-weight:700; font-size:28px; line-height:1.35; letter-spacing:-.02em; }
.feature-copy .sub{ color:var(--muted); margin-top:12px; }
.points{ margin:32px 0; border-top:1px solid var(--line); counter-reset:pt; }
.points li{ display:grid; grid-template-columns:44px 1fr; padding:20px 0; border-bottom:1px solid var(--line); counter-increment:pt; }
.points li::before{ content:'0' counter(pt); font-family:var(--f-logo); font-size:20px; color:var(--muted); line-height:1.4; }
.points b{ display:block; font-size:16px; }
.points span{ color:var(--muted); font-size:14px; }
.feature-buy{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.feature-buy .price{ margin:0; }
.feature-buy .price strong{ font-size:22px; }
.feature-buy .btns{ display:flex; gap:8px; width:100%; }
.feature-buy .btns .btn{ flex:1; }
@media (min-width:768px){
  .feature-inner{ grid-template-columns:1.05fr 1fr; gap:64px; }
  .feature-copy h2{ font-size:36px; }
  .feature-buy .btns{ width:auto; }
  .feature-buy .btns .btn{ flex:none; }
}
@media (min-width:1024px){ .feature-inner{ gap:96px; } }

/* ---------- 미니 피부 진단 ---------- */
.quiz-wrap{ max-width:760px; margin:0 auto; }
.quiz-card{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:28px 20px; }
@media (min-width:768px){ .quiz-card{ padding:48px 56px; } }
.quiz-progress{ display:flex; align-items:center; gap:12px; margin-bottom:24px; font-size:13px; color:var(--muted); }
.quiz-progress .bar{ flex:1; height:2px; background:var(--line); position:relative; }
.quiz-progress .bar span{ position:absolute; inset:0 auto 0 0; background:var(--text); transition:width .4s var(--ease); }
.quiz-q{ font-family:var(--f-title); font-weight:700; font-size:22px; line-height:1.4; margin-bottom:24px; }
@media (min-width:768px){ .quiz-q{ font-size:26px; } }
.quiz-options{ display:grid; gap:10px; }
@media (min-width:768px){ .quiz-options{ grid-template-columns:1fr 1fr; } }
.quiz-opt{
  display:flex; align-items:center; gap:12px; min-height:58px; padding:14px 18px; text-align:left;
  border:1px solid var(--line); border-radius:4px; background:var(--bg); font-size:15.5px;
  transition:border-color .2s, background .2s;
}
.quiz-opt::before{ content:''; flex:none; width:18px; height:18px; border-radius:50%; border:1px solid rgba(38,38,34,.35); transition:all .2s; }
.quiz-opt:hover{ border-color:var(--text); }
.quiz-opt[aria-pressed="true"]{ border-color:var(--text); background:var(--white); }
.quiz-opt[aria-pressed="true"]::before{ border:5px solid var(--text); }
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; min-height:40px; }
.quiz-back{ font-size:14px; color:var(--muted); padding:8px 0; }
.quiz-back:hover{ color:var(--text); }
.quiz-step{ animation:fadeUp .45s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.result-title{ font-family:var(--f-title); font-weight:700; font-size:23px; line-height:1.4; }
@media (min-width:768px){ .result-title{ font-size:28px; } }
.result-notes{ margin:16px 0 24px; display:grid; gap:6px; }
.result-notes li{ position:relative; padding-left:16px; color:var(--muted); font-size:14.5px; }
.result-notes li::before{ content:''; position:absolute; left:2px; top:.7em; width:5px; height:5px; border-radius:50%; background:var(--muted); }
.result-list{ display:grid; gap:8px; }
.result-item{ display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:14px; padding:10px; background:var(--bg); border-radius:4px; }
.result-item img{ width:64px; height:80px; object-fit:cover; background:var(--img); border-radius:2px; }
.result-item .step{ font-size:12px; color:var(--muted); }
.result-item .nm{ font-weight:600; font-size:15px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.result-item .why{ font-size:13px; color:var(--muted); }
.result-item .pr{ font-size:14px; font-weight:600; white-space:nowrap; }
.result-sum{ display:flex; justify-content:space-between; align-items:baseline; margin:20px 0 16px; padding-top:16px; border-top:1px solid var(--line); }
.result-sum strong{ font-size:20px; }
.result-actions{ display:grid; gap:8px; }
@media (min-width:768px){ .result-actions{ grid-template-columns:2fr 1fr; } }

/* ---------- 성분 ---------- */
.ing-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
@media (min-width:1024px){ .ing-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } }
.ing-card figure{ margin:0; aspect-ratio:1; overflow:hidden; background:var(--sub); border-radius:2px; }
.ing-card img{ width:100%; height:100%; object-fit:cover; filter:saturate(.75) sepia(.12) brightness(1.03); }
.ing-card h3{ font-family:var(--f-title); font-weight:700; font-size:18px; margin-top:14px; }
.ing-card h3 small{ font-family:var(--f-body); font-weight:400; font-size:12px; color:var(--muted); margin-left:6px; }
.ing-card p{ font-size:14px; color:var(--muted); margin-top:4px; }
.free-box{ margin-top:48px; padding:28px 20px; border:1px solid var(--line); border-radius:6px; display:grid; gap:16px; }
@media (min-width:768px){ .free-box{ grid-template-columns:auto 1fr; align-items:center; gap:40px; padding:32px 40px; margin-top:64px; } }
.free-box h3{ font-family:var(--f-title); font-weight:700; font-size:19px; }
.free-box h3 span{ display:block; font-family:var(--f-body); font-weight:400; font-size:13px; color:var(--muted); margin-top:4px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-no{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); font-size:14px; background:var(--white);
}
.chip-no::before{ content:''; width:10px; height:10px; background:
  linear-gradient(45deg,transparent 45%,var(--muted) 45%,var(--muted) 55%,transparent 55%),
  linear-gradient(-45deg,transparent 45%,var(--muted) 45%,var(--muted) 55%,transparent 55%); }

/* ---------- 세트 ---------- */
.set-inner{ display:grid; gap:32px; align-items:center; background:var(--sub); }
.set-media{ aspect-ratio:4/5; background:var(--img); overflow:hidden; }
.set-media img{ width:100%; height:100%; object-fit:cover; }
.set-copy{ padding:0 var(--gutter) 48px; }
.set-copy h2{ font-family:var(--f-title); font-weight:700; font-size:28px; line-height:1.35; margin-top:8px; }
.set-copy .sub{ color:var(--muted); margin-top:10px; }
.set-list{ margin:24px 0; display:grid; gap:0; border-top:1px solid var(--line); }
.set-list li{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.set-list li span:last-child{ color:var(--muted); }
.set-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-bottom:24px; }
.set-price .rate{ font-size:26px; }
.set-price strong{ font-size:26px; font-weight:700; }
.set-price del{ font-size:15px; }
.set-price .save{ width:100%; font-size:13px; color:var(--muted); }
@media (min-width:768px){
  .set-inner{ grid-template-columns:1fr 1fr; gap:0; }
  .set-copy{ padding:56px; }
  .set-copy h2{ font-size:34px; }
  .set-media{ aspect-ratio:auto; height:100%; min-height:560px; }
}
@media (min-width:1024px){ .set-copy{ padding:72px 88px; } }

/* ---------- 브랜드 스토리 ---------- */
.story-inner{ display:grid; gap:40px; }
.story-media{ position:relative; }
.story-media .m1{ aspect-ratio:3/4; overflow:hidden; background:var(--sub); width:78%; }
.story-media .m1 img{ width:100%; height:100%; object-fit:cover; }
.story-media .m2{ position:absolute; right:0; bottom:-28px; width:44%; aspect-ratio:4/5; overflow:hidden; background:var(--img); border:6px solid var(--bg); }
.story-media .m2 img{ width:100%; height:100%; object-fit:cover; }
.story-copy{ padding-top:20px; }
.story-copy h2{ font-family:var(--f-title); font-weight:700; font-size:30px; line-height:1.4; letter-spacing:-.02em; }
.story-copy p{ color:var(--muted); margin-top:20px; font-size:16px; line-height:1.85; max-width:28em; }
.story-copy .meaning{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; }
.story-copy .meaning b{ font-family:var(--f-title); font-size:17px; color:var(--text); margin-right:8px; }
.story-keywords{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
@media (min-width:768px){
  .story-inner{ grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .story-copy{ padding-top:0; }
  .story-copy h2{ font-size:40px; }
}

/* ---------- 후기 ---------- */
.review-grid{ display:grid; gap:12px; }
@media (min-width:768px){ .review-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (min-width:1024px){ .review-grid{ grid-template-columns:repeat(4,1fr); } }
.review{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:24px 22px; display:flex; flex-direction:column; gap:12px; }
.review .tags{ display:flex; gap:6px; flex-wrap:wrap; }
.review .stars{ letter-spacing:2px; font-size:13px; }
.review blockquote{ margin:0; font-size:15px; line-height:1.7; }
.review footer{ margin-top:auto; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.example-label{ white-space:nowrap; font-family:var(--f-body); font-size:12px; font-weight:500; color:var(--muted); border:1px solid var(--line); border-radius:2px; padding:2px 7px; vertical-align:middle; margin-left:8px; letter-spacing:0; }

/* ---------- 쿠폰 받기 ---------- */
.coupon-sec{ background:var(--sub); }
.coupon-inner{ display:grid; gap:32px; align-items:center; }
.coupon-media{ aspect-ratio:4/3; overflow:hidden; background:var(--img); }
.coupon-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.coupon-copy h2{ font-family:var(--f-title); font-weight:700; font-size:28px; line-height:1.4; }
.coupon-copy .sub{ color:var(--muted); margin-top:12px; }
/* 모바일: 입력칸·버튼을 위아래로 쌓고 둘 다 화면 폭에 꽉 차게 / 768px 이상: 가로 한 줄 */
.signup{ display:flex; flex-direction:column; gap:8px; margin-top:28px; }
.signup .btn{ width:100%; }
.signup input{
  width:100%;
  flex:none; min-width:0; height:50px; padding:0 16px; border:1px solid rgba(38,38,34,.25); border-radius:var(--radius);
  background:var(--white); font-size:16px;
}
.signup input:focus{ outline:none; border-color:var(--text); }
@media (min-width:768px){
  .signup{ flex-direction:row; }
  .signup .btn{ width:auto; }
  .signup input{ flex:1; width:auto; }
}
.signup-msg{ margin-top:12px; font-size:14px; min-height:1.6em; }
.signup-msg.ok{ color:var(--main-dark); font-weight:600; }
.signup-msg.err{ color:var(--accent); }
.signup-note{ font-size:12px; color:var(--muted); margin-top:4px; }
@media (min-width:768px){
  .coupon-inner{ grid-template-columns:1fr 1fr; gap:64px; }
  .coupon-media{ aspect-ratio:1; }
  .coupon-copy h2{ font-size:34px; }
}

/* ---------- 푸터 ---------- */
.site-footer{ background:var(--text); color:rgba(244,241,234,.72); font-size:14px; padding:56px 0 32px; }
@media (max-width:1023px){ .site-footer{ padding-bottom:calc(32px + env(safe-area-inset-bottom)); } }
.footer-grid{ display:grid; gap:32px; }
.logo-light{ color:var(--bg); justify-self:start; }
.footer-brand p{ margin-top:12px; font-family:var(--f-title); color:var(--bg); }
.footer-cs h2{ font-size:13px; font-weight:600; color:var(--bg); }
.footer-cs h2 small{ font-weight:400; color:rgba(244,241,234,.55); }
.footer-tel{ font-size:22px; color:var(--bg); font-weight:600; margin:6px 0; letter-spacing:.02em; }
.footer-links{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; }
.footer-links a:hover{ color:var(--bg); }
.footer-links strong{ font-weight:600; color:var(--bg); }
.sns{ display:flex; gap:4px; width:100%; margin-top:8px; }
.sns a{ width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(244,241,234,.2); border-radius:50%; }
.sns svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; }
.footer-note{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(244,241,234,.14); font-size:13px; display:grid; gap:6px; }
.footer-note p:first-child{ color:var(--bg); }
.credit{ font-family:var(--f-logo); letter-spacing:.08em; font-size:14px; }
@media (min-width:768px){
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr; }
  .footer-links{ align-content:flex-start; }
  .footer-note{ grid-template-columns:1fr auto; }
}

/* ---------- 장바구니 패널 ---------- */
.scrim{ position:fixed; inset:0; z-index:90; background:rgba(38,38,34,.4); opacity:0; transition:opacity .3s; }
.scrim.show{ opacity:1; }
.cart-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  width:min(420px, 100%); background:var(--bg);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s var(--ease); visibility:hidden;
}
.cart-panel.open{ transform:none; visibility:visible; }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 12px 12px 20px; border-bottom:1px solid var(--line); }
.cart-head h2{ font-size:17px; font-weight:700; }
.cart-head-count{ color:var(--muted); font-weight:500; }
.ship-gauge{ padding:16px 20px; background:var(--sub); font-size:14px; }
.ship-msg strong{ font-weight:700; }
.gauge{ height:4px; background:rgba(38,38,34,.1); border-radius:2px; margin-top:10px; overflow:hidden; }
.gauge span{ display:block; height:100%; background:var(--text); border-radius:2px; transition:width .5s var(--ease); }
.gauge.done span{ background:var(--main); }
.cart-items{ flex:1; overflow-y:auto; padding:4px 20px; overscroll-behavior:contain; }
.cart-item{ display:grid; grid-template-columns:72px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item:last-child{ border-bottom:0; }
.cart-item img{ width:72px; height:90px; object-fit:cover; background:var(--img); border-radius:2px; }
.cart-item.flash{ animation:flash 1.6s var(--ease); }
@keyframes flash{ 0%,30%{ background:var(--main-light); box-shadow:0 0 0 10px var(--main-light); } 100%{ background:transparent; box-shadow:0 0 0 10px transparent; } }
.ci-name{ font-size:15px; font-weight:600; line-height:1.4; }
.ci-opt{ font-size:12.5px; color:var(--muted); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:3px; margin-top:10px; background:var(--white); }
.qty button{ width:34px; height:34px; font-size:16px; }
.qty button:hover{ background:var(--sub); }
.qty span{ min-width:28px; text-align:center; font-size:14px; font-weight:600; }
.ci-side{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.ci-remove{ width:32px; height:32px; display:grid; place-items:center; margin:-6px -6px 0 0; color:var(--muted); }
.ci-remove svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.ci-remove:hover{ color:var(--text); }
.ci-price{ font-size:14.5px; font-weight:600; }
.cart-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--muted); }
.cart-foot{ border-top:1px solid var(--line); padding:16px 20px calc(16px + env(safe-area-inset-bottom)); background:var(--bg); }
.coupon-form{ display:flex; gap:8px; }
.coupon-form input{ flex:1; min-width:0; height:40px; padding:0 12px; border:1px solid rgba(38,38,34,.22); border-radius:3px; background:var(--white); font-size:16px; text-transform:uppercase; }
.coupon-form input::placeholder{ text-transform:none; }
.coupon-form input:focus{ outline:none; border-color:var(--text); }
.coupon-msg{ font-size:13px; min-height:1.5em; margin:6px 0 8px; }
.coupon-msg.ok{ color:var(--main-dark); }
.coupon-msg.err{ color:var(--accent); }
.cart-sum{ display:grid; gap:4px; font-size:14px; margin-bottom:16px; }
.cart-sum div{ display:flex; justify-content:space-between; }
.cart-sum dt{ color:var(--muted); }
.cart-sum .total{ margin-top:8px; padding-top:12px; border-top:1px solid var(--line); font-size:17px; font-weight:700; }
.cart-sum .total dt{ color:var(--text); }

/* ---------- 모달 · 토스트 ---------- */
.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:var(--gutter); background:rgba(38,38,34,.45); opacity:0; transition:opacity .2s; }
.modal.show{ opacity:1; }
.modal-box{ width:min(400px,100%); background:var(--bg); border-radius:8px; padding:36px 28px 28px; text-align:center; transform:translateY(8px); transition:transform .25s var(--ease); }
.modal.show .modal-box{ transform:none; }
.modal-box .pebble{ width:28px; margin:0 auto 16px; color:var(--main); }
.modal-box h2{ font-family:var(--f-title); font-weight:700; font-size:20px; line-height:1.4; }
.modal-body{ color:var(--muted); font-size:15px; margin-top:10px; }
.modal-actions{ display:grid; gap:8px; margin-top:24px; }
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:160;
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:var(--text); color:var(--bg); padding:12px 20px; border-radius:999px; font-size:14px;
  transition:all .3s var(--ease); max-width:calc(100% - 40px); text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ==========================================================
   상품목록 shop.html
   ========================================================== */
.gnb a[aria-current="page"]::after{ transform:scaleX(1); }
.mobile-nav a[aria-current="page"]{ font-weight:700; }

.shop-banner{ position:relative; background:var(--sub); }
/* 모바일: 원본 비율(1800×1195) 그대로 → 위아래 잘림 없이 뚜껑까지 보임 */
.shop-banner img{ width:100%; height:auto; aspect-ratio:1800/1195; object-fit:cover; object-position:50% 100%; }
.shop-banner-copy{ padding-top:28px; padding-bottom:4px; }
.shop-banner h1{ font-family:var(--f-title); font-weight:700; font-size:30px; line-height:1.3; }
.shop-banner-copy > p:last-child{ color:var(--muted); margin-top:6px; font-size:15px; padding-bottom:24px; }
@media (min-width:768px){
  .shop-banner{ display:grid; grid-template-columns:minmax(280px,1fr) 1.7fr; align-items:center; }
  .shop-banner img{ order:2; height:400px; }
  .shop-banner-copy{ padding:40px var(--gutter); max-width:none; }
  .shop-banner-copy > p:last-child{ padding-bottom:0; }
  .shop-banner h1{ font-size:44px; }
}
@media (min-width:1280px){ .shop-banner-copy{ padding-left:calc((100vw - var(--max)) / 2); } }
.shop{ padding-top:32px; }
@media (min-width:768px){ .shop{ padding-top:48px; } }
.shop-toolbar{ display:grid; gap:16px; margin-bottom:28px; }
@media (min-width:768px){ .shop-toolbar{ margin-bottom:40px; } }
.cat-tabs{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter);
  -webkit-overflow-scrolling:touch;
}
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tab{
  flex:none; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px;
  border:1px solid var(--line); border-radius:999px; font-size:14.5px; background:var(--white);
  transition:background .2s, color .2s, border-color .2s;
}
.cat-tab .n{ font-size:12px; color:var(--muted); }
.cat-tab:hover{ border-color:var(--text); }
.cat-tab[aria-pressed="true"]{ background:var(--text); color:var(--bg); border-color:var(--text); }
.cat-tab[aria-pressed="true"] .n{ color:rgba(244,241,234,.6); }
.shop-meta{ display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--line); }
.shop-count{ font-size:14px; color:var(--muted); }
.shop-count b{ color:var(--text); }
.sort select{
  appearance:none; -webkit-appearance:none; height:40px; padding:0 34px 0 14px; font-size:14px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23262622' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 12px center/11px;
  color:var(--text); cursor:pointer;
}
@media (min-width:1024px){
  .cat-tabs{ margin:0; padding:2px 0; flex-wrap:wrap; }
}

/* ==========================================================
   상품상세 product.html
   ========================================================== */
.narrow{ max-width:calc(880px + var(--gutter) * 2); }
.crumb{ display:flex; gap:8px; font-size:13px; color:var(--muted); padding:16px 0; }
.crumb a:hover{ color:var(--text); }
.pd-top{ padding-bottom:56px; }
.pd-grid{ display:grid; gap:28px; }
@media (min-width:768px){ .pd-grid{ grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; } }
@media (min-width:1024px){ .pd-grid{ gap:80px; } .pd-top{ padding-bottom:96px; } }

.gallery{ display:grid; gap:10px; }
.gallery-main{ aspect-ratio:4/5; background:var(--img); overflow:hidden; margin:0 calc(var(--gutter) * -1); }
@media (min-width:768px){ .gallery-main{ margin:0; border-radius:2px; } }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.thumb{ aspect-ratio:1; overflow:hidden; background:var(--img); border-radius:2px; outline:1px solid transparent; outline-offset:-1px; opacity:.7; transition:opacity .2s; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb:hover{ opacity:1; }
.thumb[aria-pressed="true"]{ opacity:1; outline:1.5px solid var(--text); outline-offset:-1.5px; }
.thumb:focus-visible{ outline:2px solid var(--main); outline-offset:2px; }

@media (min-width:768px){ .pd-info{ position:sticky; top:calc(var(--header-h) + 24px); } }
.pd-info h1{ font-family:var(--f-title); font-weight:700; font-size:30px; line-height:1.3; margin-top:12px; }
@media (min-width:1024px){ .pd-info h1{ font-size:38px; } }
.pd-sub{ color:var(--muted); margin-top:4px; }
.pd-rating{ display:inline-flex; gap:6px; align-items:baseline; font-size:14px; margin-top:12px; border-bottom:1px solid var(--line); padding-bottom:1px; }
.pd-price{ font-size:26px; font-weight:700; margin-top:16px; }
.pd-spec{ margin-top:24px; border-top:1px solid var(--line); font-size:14px; }
.pd-spec div{ display:grid; grid-template-columns:84px 1fr; padding:12px 0; border-bottom:1px solid var(--line); }
.pd-spec dt{ color:var(--muted); }
.pd-qty-row{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.pd-qty-row .label{ font-size:14px; color:var(--muted); }
.qty-lg{ margin-top:0; }
.qty-lg button{ width:42px; height:42px; font-size:18px; }
.qty-lg span{ min-width:36px; font-size:15px; }
.pd-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; }
.pd-total strong{ font-size:22px; }
.pd-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
.pd-buttons .btn{ min-height:54px; }
.pd-promise{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:20px; font-size:13px; color:var(--muted); }
.pd-promise li::before{ content:'✓'; margin-right:5px; color:var(--text); }

/* --- 한국식 상세페이지 영역 --- */
.story-detail{ background:var(--sub); padding:24px 0; }
.sd-block{ max-width:640px; margin:0 auto; padding:64px var(--gutter); text-align:center; }
.sd-block + .sd-block{ border-top:1px solid var(--line); }
@media (min-width:768px){ .sd-block{ padding:104px var(--gutter); } }
.sd-label{ font-family:var(--f-logo); font-size:15px; letter-spacing:.18em; color:var(--muted); margin-bottom:14px; }
.sd-title{ font-family:var(--f-title); font-weight:700; font-size:28px; line-height:1.4; letter-spacing:-.02em; }
@media (min-width:768px){ .sd-title{ font-size:40px; } }
.sd-intro .sd-title{ font-size:32px; }
@media (min-width:768px){ .sd-intro .sd-title{ font-size:48px; } }
.sd-text{ color:var(--muted); font-size:16px; line-height:1.85; margin-top:24px; }
.sd-text b{ color:var(--text); font-weight:600; }
@media (min-width:768px){ .sd-text{ font-size:18px; } }
.sd-photo{ margin:36px 0 0; aspect-ratio:4/5; overflow:hidden; background:var(--img); }
.sd-photo img{ width:100%; height:100%; object-fit:cover; }
.sd-photo.sd-wide{ aspect-ratio:16/9; }
.sd-ings{ margin-top:40px; display:grid; gap:36px; text-align:left; list-style:none; padding:0; }
.sd-ings li{ display:grid; grid-template-columns:42% 1fr; gap:20px; align-items:center; }
.sd-ings li:nth-child(even){ grid-template-columns:1fr 42%; }
.sd-ings li:nth-child(even) figure{ order:2; }
.sd-ings figure{ margin:0; aspect-ratio:1; overflow:hidden; border-radius:50%; }
.sd-ings img{ width:100%; height:100%; object-fit:cover; filter:saturate(.75) sepia(.12) brightness(1.03); }
.sd-ings .num{ font-family:var(--f-logo); font-size:22px; color:var(--muted); }
.sd-ings h3{ font-family:var(--f-title); font-weight:700; font-size:19px; line-height:1.4; margin-top:2px; }
.sd-ings p{ color:var(--muted); font-size:14.5px; margin-top:6px; }
@media (min-width:768px){ .sd-ings h3{ font-size:24px; } .sd-ings p{ font-size:16px; } }
.sd-facts{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:36px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sd-facts li{ padding:20px 6px; display:flex; flex-direction:column; gap:4px; }
.sd-facts li + li{ border-left:1px solid var(--line); }
.sd-facts b{ font-family:var(--f-title); font-size:18px; }
.sd-facts span{ font-size:12.5px; color:var(--muted); }
.sd-steps{ list-style:none; padding:0; margin-top:32px; display:grid; gap:10px; text-align:left; }
.sd-steps li{ background:var(--bg); padding:20px 22px; border-radius:4px; display:grid; gap:2px; }
.sd-steps span{ font-family:var(--f-logo); letter-spacing:.14em; font-size:13px; color:var(--muted); }
.sd-steps b{ font-size:17px; }
.sd-steps p{ font-size:14.5px; color:var(--muted); }
.sd-check{ margin-top:32px; display:grid; gap:8px; text-align:left; }
.sd-check li{ display:flex; gap:12px; align-items:center; background:var(--bg); padding:16px 20px; border-radius:4px; font-size:15.5px; }
.sd-check li::before{ content:''; flex:none; width:20px; height:20px; border-radius:50%; background:var(--main-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%233F4C3B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }

/* --- 성분 사전 --- */
.dict-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:24px; }
.dict-badges li{ text-align:center; padding:14px 6px; background:var(--main-light); border-radius:4px; font-size:14px; }
.dict-badges b{ font-weight:700; color:var(--main-dark); }
@media (min-width:768px){ .dict-badges{ display:flex; } .dict-badges li{ padding:10px 18px; font-size:15px; } }
.dict-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.dict-chip{
  display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 15px 0 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--white); font-size:14.5px;
  transition:border-color .2s, background-color .2s, color .2s;
}
.dict-chip .no{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; transition:color .2s; }
.dict-chip.key{ border-color:rgba(79,94,74,.45); }
.dict-chip:hover{ border-color:var(--main); }
/* 선택된 칩: 세이지 배경 + 오트밀 글자 */
.dict-chip[aria-pressed="true"]{ background:var(--main); color:var(--bg); border-color:var(--main); }
.dict-chip[aria-pressed="true"] .no{ color:rgba(244,241,234,.7); }
/* 칩 목록 바로 아래 설명 상자 (항상 표시, 내용만 바뀜) */
.dict-desc{
  margin-top:16px; min-height:92px; padding:18px 20px;
  background:var(--white); border:1px solid var(--line); border-left:3px solid var(--main); border-radius:4px;
}
.dd-no{ font-size:12px; font-weight:500; color:var(--muted); margin-right:2px; font-variant-numeric:tabular-nums; }
.dd-name{ font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dd-text{ color:var(--muted); font-size:14.5px; margin-top:4px; }
.dict-full{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); line-height:1.8; }
.dict-full b{ color:var(--text); margin-right:6px; }
.dict-note{ font-size:12px; color:var(--muted); margin-top:8px; }

/* --- 아코디언 --- */
.accordion{ border-top:1px solid var(--text); }
.accordion details{ border-bottom:1px solid var(--line); }
.accordion summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  min-height:60px; font-size:16px; font-weight:600;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:''; width:10px; height:10px; border-right:1.4px solid var(--text); border-bottom:1.4px solid var(--text); transform:rotate(45deg) translate(-3px,-3px); transition:transform .25s var(--ease); margin-right:6px; }
.accordion details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.acc-body{ padding:0 0 24px; color:var(--muted); font-size:14.5px; line-height:1.8; }
.acc-body ol,.acc-body ul{ padding-left:18px; display:grid; gap:6px; }
.acc-body ul{ list-style:disc; }

/* --- 함께 쓰면 좋은 제품 · 후기 --- */
.pair-sec{ background:var(--sub); }
.grid-pair{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1024px){ .grid-pair{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px; } }
.rv-summary{ display:grid; gap:24px; align-items:center; padding:28px 24px; background:var(--white); border:1px solid var(--line); border-radius:6px; }
@media (min-width:768px){ .rv-summary{ grid-template-columns:200px 1fr; gap:48px; padding:32px 40px; } }
.rv-score{ text-align:center; }
.rv-score strong{ font-family:var(--f-title); font-size:48px; line-height:1; }
.rv-score .stars{ letter-spacing:3px; margin:8px 0 2px; }
.rv-score .muted{ font-size:13px; }
.rv-bars{ display:grid; gap:6px; font-size:13px; }
.rv-bars li{ display:grid; grid-template-columns:32px 1fr 36px; gap:10px; align-items:center; }
.rv-bars li span:last-child{ text-align:right; color:var(--muted); }
.rv-bars .bar{ height:6px; background:rgba(38,38,34,.08); border-radius:3px; overflow:hidden; }
.rv-bars i{ display:block; height:100%; background:var(--text); }
.rv-list{ margin-top:16px; }
.rv-item{ padding:24px 0; border-bottom:1px solid var(--line); display:grid; gap:10px; }
.rv-head{ display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.rv-head .stars{ letter-spacing:2px; }
.rv-item .tags{ display:flex; gap:6px; flex-wrap:wrap; }
.rv-item p{ font-size:15px; line-height:1.75; }

/* --- 모바일 하단 고정 구매 바 --- */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(244,241,234,.97); border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transform:translateY(100%); transition:transform .3s var(--ease);
}
.buybar.show{ transform:none; }
.buybar-name{ font-size:13px; color:var(--muted); }
.buybar-price{ font-size:18px; font-weight:700; line-height:1.3; }
.buybar .btn{ flex:none; min-width:150px; }
@media (max-width:1023px){
  body.has-buybar .site-footer{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
  body.has-buybar .toast{ bottom:calc(92px + env(safe-area-inset-bottom)); }
}
@media (min-width:1024px){ .buybar{ display:none; } }