/* ════════════════════════════════════════════════════════════════════
   페이지별 스타일 — 목록 / 상세 / 도감 / B2B / 장바구니 / 폼
   ════════════════════════════════════════════════════════════════════ */

.skip{ position:absolute; left:-9999px; top:0; background:var(--green); color:#fff;
  padding:10px 16px; z-index:100; border-radius:0 0 var(--r) 0; }
.skip:focus{ left:0; }

.pg-h1{ font-size:var(--t-3xl); font-weight:800; margin:var(--s8) 0 var(--s3); }
.pg-lead{ color:var(--ink2); margin:0 0 var(--s7); font-size:var(--t-md); }

/* ══ 빵부스러기 ═══════════════════════════════════════════ */
.bc{ background:var(--white); border-bottom:1px solid var(--line); }
.bc .w{ display:flex; align-items:center; gap:6px; min-height:46px;
  font-size:var(--t-sm); color:var(--ink2); overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.bc .w::-webkit-scrollbar{ display:none; }
.bc a{ min-height:var(--tap); display:inline-flex; align-items:center; }
.bc a:hover{ color:var(--green); }
.bc b{ color:var(--ink); font-weight:700; }
.bc-s{ display:inline-flex; color:var(--ink3); }

/* ══ 카테고리 머리 배너 ═══════════════════════════════════ */
/* ⚠️ `cover` 로 깔면 **원본이 작아 통째로 뭉개집니다** (시안에서
   잘라낸 사진이 194px 밖에 안 됩니다). 높이에만 맞춰 오른쪽에 붙이면
   확대율이 2배 남짓이라 선명하고, 왼쪽은 딥그린이라 글자도 또렷합니다. */
.cath{ position:relative; min-height:210px; display:grid; align-items:center;
  background:var(--green) right center/auto 100% no-repeat; }
.cath::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(18,61,50,.96) 0%, rgba(18,61,50,.88) 42%,
                                    rgba(18,61,50,.30) 76%, rgba(18,61,50,.02) 100%); }
.cath-in{ position:relative; z-index:2; padding:var(--s8) 0; }
.cath h1{ font-size:var(--t-3xl); color:#fff; font-weight:800; margin-bottom:var(--s3); }
.cath p{ margin:0; color:rgba(255,255,255,.86); font-size:var(--t-md); line-height:1.7; }

/* ══ 칩 ═══════════════════════════════════════════════════ */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 var(--s5);
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--white);
  font-size:var(--t-base); font-weight:600; color:var(--ink2); cursor:pointer; white-space:nowrap; }
.chip:hover{ border-color:var(--green); color:var(--green); }
.chip.on{ background:var(--green); border-color:var(--green); color:#fff; }
.chip-st{ cursor:default; background:var(--green-bg); border-color:transparent; color:var(--green); }
.chip-st:hover{ color:var(--green); }
.chips-sm .chip{ min-height:40px; padding:0 var(--s4); font-size:var(--t-sm); }

/* ══ 목록 ═════════════════════════════════════════════════ */
.lst-wrap{ padding-bottom:var(--s10); }
.lst-chips{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6) 0 var(--s5);
  border-bottom:1px solid var(--line); margin-bottom:var(--s6); }
.lst-cols{ display:grid; grid-template-columns:216px 1fr; gap:var(--s8); align-items:start; }
.lst-main{ min-width:0; }
.lst-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  margin-bottom:var(--s5); flex-wrap:wrap; }
.lst-n{ font-size:var(--t-base); color:var(--ink2); }
.lst-n b{ color:var(--ink); font-weight:700; }
.lst-sel{ display:flex; gap:var(--s2); }
.lst-sel select{ min-height:var(--tap); padding:0 var(--s6) 0 var(--s4); border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); font-size:var(--t-base); cursor:pointer; }
.flt-btn{ display:none; }

/* 필터 */
.flt{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); position:sticky; top:calc(var(--hdr-h) + var(--gnb-h) + 12px); }
.flt-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s4);
  padding-bottom:var(--s3); border-bottom:1px solid var(--line); }
.flt-hd b{ font-size:var(--t-md); }
.flt-x{ border:0; background:transparent; color:var(--ink2); font-size:var(--t-sm);
  cursor:pointer; min-height:var(--tap); padding:0 6px; }
.flt-x:hover{ color:var(--green); }
.flt-g{ border-top:1px solid var(--line-soft); }
.flt-g:first-of-type{ border-top:0; }
.flt-g > summary{ min-height:44px; display:flex; align-items:center; gap:var(--s2);
  cursor:pointer; font-size:var(--t-base); font-weight:700; list-style:none; }
.flt-g > summary::-webkit-details-marker{ display:none; }
.flt-g > summary > span{ flex:1 1 auto; min-width:0; }
.flt-g > summary::after{ content:""; flex:0 0 auto; width:8px; height:8px;
  border-right:2px solid var(--ink3); border-bottom:2px solid var(--ink3);
  transform:rotate(45deg); margin-bottom:3px; transition:transform .15s; }
.flt-g[open] > summary::after{ transform:rotate(-135deg); margin-bottom:-3px; }
.flt-g > summary:hover{ color:var(--green); }
.flt-g > .flt-o{ padding-bottom:var(--s4); }
.flt-n2{ flex:0 0 auto; min-width:19px; height:19px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--green); color:#fff; font-size:12px; line-height:19px; text-align:center; }
.flt-x[disabled]{ opacity:.4; cursor:default; }
.flt-o{ display:flex; flex-wrap:wrap; gap:6px; }
.flt-c{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 var(--s3);
  border:1px solid var(--line); border-radius:var(--r-pill); font-size:var(--t-sm);
  color:var(--ink2); cursor:pointer; background:var(--white); }
.flt-c:hover{ border-color:var(--green); color:var(--green); }
.flt-c.on{ background:var(--green-bg); border-color:var(--green); color:var(--green); font-weight:700; }
.flt-c input{ position:absolute; opacity:0; width:0; height:0; }

/* ══ 약속 카드 ════════════════════════════════════════════ */
.prm{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6) var(--s4); text-align:center; }
.prm-ic{ width:52px; height:52px; margin:0 auto var(--s3); border-radius:var(--r-pill);
  background:var(--green-bg); color:var(--green); display:grid; place-items:center; }
.prm b{ display:block; font-size:var(--t-md); }
.prm span{ display:block; font-size:var(--t-sm); color:var(--ink2); margin-top:3px; }

/* 브랜드 전면 띠 */
.bnr-flat{ border-radius:0; min-height:300px; }
.bnr-flat .bnr-in{ max-width:var(--max); margin:0 auto; }
.bnr-plain{ background:var(--green); display:grid; grid-template-columns:1fr 340px;
  align-items:center; gap:var(--s6); min-height:210px; }
.bnr-plain::after{ display:none; }
.bnr-plain .bnr-in{ max-width:none; }
.bnr-fig{ padding:var(--s5) var(--s7) var(--s5) 0; opacity:.5; }
.bnr-fig svg g{ fill:rgba(255,255,255,.22) !important; stroke:rgba(255,255,255,.45) !important; }

/* ══ 상품 상세 ════════════════════════════════════════════ */
.dt-wrap{ padding:var(--s8) 0 var(--s10); }
.dt-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; }
.gal-main{ aspect-ratio:var(--ar-square); border-radius:var(--r-lg); overflow:hidden;
  background:var(--line-soft); }
.gal-main img{ width:100%; height:100%; object-fit:cover; }
.gal-th{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2); margin-top:var(--s2); }
.gal-t{ aspect-ratio:var(--ar-square); border:2px solid transparent; border-radius:var(--r);
  overflow:hidden; padding:0; cursor:pointer; background:var(--line-soft); }
.gal-t.on{ border-color:var(--green); }
.gal-t img{ width:100%; height:100%; object-fit:cover; }

.dt-bd{ display:flex; gap:5px; margin-bottom:var(--s3); flex-wrap:wrap; }
.bdg-soft{ background:var(--green-bg); color:var(--green); }
.dt-nm{ font-size:var(--t-2xl); font-weight:800; margin-bottom:var(--s2); }
.dt-mt{ color:var(--ink2); font-size:var(--t-md); margin-bottom:var(--s3); }
.dt-rt{ display:flex; align-items:center; gap:var(--s2); font-size:var(--t-base);
  margin-bottom:var(--s5); }
.dt-rt b{ font-weight:700; }
.dt-rt span{ color:var(--ink2); }
.stars{ display:inline-flex; gap:1px; color:var(--line); }
.stars .on{ color:#E0A21C; }
.dt-pr{ font-size:30px; font-weight:800; color:var(--red-ink); letter-spacing:-.02em;
  padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s5); }
.dt-pr em{ font-style:normal; font-size:22px; }
.dt-pr span{ font-size:var(--t-lg); color:var(--ink2); font-weight:600; }

.opt + .opt{ margin-top:var(--s5); }
.opt h4{ font-size:var(--t-base); margin-bottom:var(--s2); }
.opt-o{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.opt-b{ min-height:var(--tap); padding:0 var(--s5); border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); font-size:var(--t-base); font-weight:600;
  color:var(--ink2); cursor:pointer; }
.opt-b:hover{ border-color:var(--green); color:var(--green); }
.opt-b.on{ background:var(--green); border-color:var(--green); color:#fff; }

.dt-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2);
  margin:var(--s6) 0; padding:var(--s4) 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); }
.dtt{ text-align:center; font-size:var(--t-cap); color:var(--ink2); line-height:1.45; }
.dtt-ic{ width:40px; height:40px; margin:0 auto 6px; border-radius:var(--r-pill);
  background:var(--green-bg); color:var(--green); display:grid; place-items:center; }

.dt-buy{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4); background:var(--ivory); border-radius:var(--r); margin-bottom:var(--s4); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); overflow:hidden; }
.qty button{ width:var(--tap); height:var(--tap); border:0; background:transparent;
  cursor:pointer; display:grid; place-items:center; color:var(--ink); }
.qty button:hover{ background:var(--green-bg); }
.qty input{ width:54px; height:var(--tap); border:0; border-left:1px solid var(--line);
  border-right:1px solid var(--line); text-align:center; font-size:var(--t-md); font-weight:700;
  -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.dt-tot{ text-align:right; }
.dt-tot span{ display:block; font-size:var(--t-sm); color:var(--ink2); }
.dt-tot b{ font-size:var(--t-2xl); font-weight:800; color:var(--red-ink); }
.dt-acts{ display:grid; grid-template-columns:1fr 1fr var(--tap); gap:var(--s2); }
.dt-wish{ padding:0; color:var(--ink2); }
.dt-wish:hover{ color:var(--red); }

/* 탭 */
.tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); margin-top:var(--s10);
  overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ flex:1 1 auto; min-width:max-content; min-height:52px; padding:0 var(--s6);
  border:0; background:transparent; font-size:var(--t-md); font-weight:600; color:var(--ink2);
  cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center; }
.tab:hover{ color:var(--green); }
.tab.on{ color:var(--ink); font-weight:700; }
.tab.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--green); }
.tb{ padding:var(--s8) 0; }
.tb-h{ font-size:var(--t-xl); margin-bottom:var(--s5); }
.tb-p{ color:var(--ink2); line-height:1.85; margin:0 0 var(--s5); max-width:70ch; }
.tb-tbl{ width:100%; border-collapse:collapse; font-size:var(--t-base); max-width:720px; }
.tb-tbl th,.tb-tbl td{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); text-align:left; }
.tb-tbl th{ width:140px; color:var(--ink2); font-weight:600; background:var(--ivory); }

/* 부위안내 */
.part{ display:grid; grid-template-columns:1fr 320px; gap:var(--s8); align-items:start; }
.part-l h4{ font-size:var(--t-lg); margin-bottom:var(--s2); }
.part-l p{ color:var(--ink2); line-height:1.85; margin:0 0 var(--s5); }
.pp{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); }
.pp h4{ font-size:var(--t-md); margin-bottom:var(--s3); }
.pp ul{ list-style:none; margin:0; padding:0; }
.pp li{ display:flex; gap:var(--s2); padding:7px 0; font-size:var(--t-base); align-items:baseline; }
.pp li span{ flex:0 0 68px; color:var(--ink2); }
.pp li b{ font-weight:600; }

.steps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); gap:var(--s3); }
.steps li{ background:var(--ivory); border-radius:var(--r); padding:var(--s4); }
.steps b{ display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--green); color:#fff; font-size:var(--t-sm); margin-bottom:var(--s2); }
.steps span{ font-size:var(--t-sm); color:var(--ink2); }

/* ══ 도감 ═════════════════════════════════════════════════ */
.ench{ position:relative; min-height:190px; display:grid; align-items:center;
  background:var(--green) right center/auto 100% no-repeat; }
.ench::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(18,61,50,.96) 0%, rgba(18,61,50,.82) 38%,
                                    rgba(18,61,50,.20) 72%, rgba(18,61,50,0) 100%); }
.ench-in{ position:relative; z-index:2; padding:var(--s7) 0; }
.ench h1{ font-size:var(--t-3xl); color:#fff; font-weight:800; margin-bottom:var(--s2); }
.ench p{ margin:0; color:rgba(255,255,255,.85); font-size:var(--t-md); }
.enc-wrap{ padding:var(--s7) 0 var(--s10); }
.enc-tabs{ display:flex; gap:var(--s2); margin-bottom:var(--s6); }
.enc-tab{ min-height:var(--tap); padding:0 var(--s6); display:inline-flex; align-items:center;
  border:1px solid var(--line); border-bottom:0; border-radius:var(--r) var(--r) 0 0;
  background:var(--white); font-weight:700; color:var(--ink2); }
.enc-tab.on{ background:var(--green); border-color:var(--green); color:#fff; }
.enc-cols{ display:grid; grid-template-columns:184px 1fr; gap:var(--s7); align-items:start; }
.enc-side ul{ list-style:none; margin:0; padding:0; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.enc-side li + li{ border-top:1px solid var(--line-soft); }
.enc-side button{ width:100%; min-height:var(--tap); padding:0 var(--s4); border:0;
  background:transparent; text-align:left; font-size:var(--t-base); color:var(--ink2);
  cursor:pointer; font-weight:600; }
.enc-side button:hover{ background:var(--green-bg); color:var(--green); }
.enc-side button.on{ background:var(--green-bg); color:var(--green); font-weight:700;
  box-shadow:inset 3px 0 0 var(--green); }
.enc-d{ padding:var(--s8) 0 var(--s10); }
.enc-d-top{ display:grid; grid-template-columns:320px 1fr; gap:var(--s8); align-items:start; }
.enc-d-img{ aspect-ratio:var(--ar-square); background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); display:grid; place-items:center; padding:var(--s6); }
.enc-d-img img{ width:100%; height:100%; object-fit:contain; }
/* 사진이 없는 부위 — 빈 네모를 남기지 않고 글이 폭을 다 씁니다.
   너무 넓으면 한 줄이 길어져 읽기 어려우므로 폭을 묶어 둡니다. */
.enc-d-solo{ grid-template-columns:1fr; max-width:760px; }
.enc-d-txt h1{ font-size:var(--t-3xl); margin-bottom:var(--s3); }
.lead{ font-size:var(--t-lg); color:var(--ink2); line-height:1.8; margin:0 0 var(--s6); }
.enc-dl{ margin:0; display:grid; grid-template-columns:88px 1fr; gap:var(--s3) var(--s4); }
.enc-dl dt{ color:var(--ink2); font-size:var(--t-base); }
.enc-dl dd{ margin:0; font-size:var(--t-base); }
.enc-d-dia{ margin-top:var(--s9); background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s7); max-width:720px; }
.enc-d-dia h3{ font-size:var(--t-lg); margin-bottom:var(--s5); }

/* ══ 장바구니 ═════════════════════════════════════════════ */
.cart-wrap{ padding-bottom:var(--s10); }
.cart-cols{ display:grid; grid-template-columns:1fr 320px; gap:var(--s7); align-items:start; }
.cr{ display:grid; grid-template-columns:92px 1fr auto; gap:var(--s4); align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); }
.cr + .cr{ margin-top:var(--s3); }
.cr-i{ aspect-ratio:var(--ar-square); border-radius:var(--r); overflow:hidden; background:var(--line-soft); }
.cr-i img{ width:100%; height:100%; object-fit:cover; }
.cr-n{ font-weight:700; font-size:var(--t-md); }
.cr-m{ font-size:var(--t-sm); color:var(--ink2); margin-top:2px; }
.cr-q{ font-size:var(--t-sm); color:var(--ink2); margin-top:var(--s2); }
.cr-r{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2); }
.cr-r b{ font-size:var(--t-lg); color:var(--red-ink); }
.cr-x{ width:var(--tap); height:var(--tap); border:0; background:transparent; cursor:pointer;
  color:var(--ink3); display:grid; place-items:center; border-radius:var(--r); }
.cr-x:hover{ background:var(--ivory); color:var(--ink); }
.cart-s{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); position:sticky; top:calc(var(--hdr-h) + var(--gnb-h) + 12px); }
.cart-s h3{ font-size:var(--t-lg); margin-bottom:var(--s4); }
.cs-r{ display:flex; justify-content:space-between; padding:var(--s2) 0; font-size:var(--t-base);
  color:var(--ink2); }
.cs-r b{ color:var(--ink); font-weight:600; }
.cs-t{ display:flex; justify-content:space-between; align-items:baseline;
  padding:var(--s4) 0; margin-top:var(--s2); border-top:1px solid var(--line); }
.cs-t b{ font-size:var(--t-2xl); font-weight:800; color:var(--red-ink); }
.cs-n{ font-size:var(--t-sm); color:var(--ink2); margin:var(--s3) 0 0; text-align:center; }

/* ══ 폼 · 로그인 ══════════════════════════════════════════ */
.form-wrap,.auth,.doc,.my{ padding-bottom:var(--s10); }
.auth{ max-width:420px; margin:0 auto; }
.form{ max-width:520px; }
.f-r{ margin-bottom:var(--s4); }
.f-r label{ display:block; font-size:var(--t-base); font-weight:600; margin-bottom:6px; }
.f-r label b{ color:var(--red); }
.f-r input,.f-r textarea{ width:100%; min-height:var(--tap); padding:11px var(--s4);
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
  font-size:var(--t-md); }
.f-r textarea{ resize:vertical; line-height:1.7; }
.f-r input:focus,.f-r textarea:focus{ border-color:var(--green); }
.auth-n{ text-align:center; font-size:var(--t-base); color:var(--ink2); margin-top:var(--s6); }
/* 로그인 아래 "회원가입" 은 문장 속 링크처럼 보이지만 실제로는
   사람들이 누르는 자리입니다. 줄이 따로 있으니 키워도 안 깨집니다. */
.auth-n a{ color:var(--green); font-weight:700; display:inline-flex;
  align-items:center; min-height:40px; padding:0 4px; text-decoration:underline;
  text-underline-offset:3px; }
.about-b{ max-width:760px; }
.about-b h2{ font-size:var(--t-xl); margin:var(--s8) 0 var(--s3); }
.about-b h2:first-child{ margin-top:0; }
.about-b p{ color:var(--ink2); line-height:1.9; margin:0; }
.about-b a{ color:var(--green); font-weight:600; text-decoration:underline; }

/* ══ 알림 띠 ══════════════════════════════════════════════ */
.toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,16px);
  background:var(--ink); color:#fff; padding:13px var(--s6); border-radius:var(--r);
  font-size:var(--t-base); font-weight:600; z-index:90; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px); text-align:center; }
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ══ 반응형 ═══════════════════════════════════════════════ */
@media (max-width:1024px){
  .lst-cols{ grid-template-columns:1fr; }
  .flt{ position:static; display:none; }
  .flt.open{ display:block; margin-bottom:var(--s5); }
  .flt-btn{ display:inline-flex; }
  .dt-cols{ grid-template-columns:1fr; gap:var(--s7); }
  .part{ grid-template-columns:1fr; }
  .enc-cols{ grid-template-columns:150px 1fr; }
  .enc-d-top{ grid-template-columns:240px 1fr; }
  .cart-cols{ grid-template-columns:1fr; }
  .cart-s{ position:static; }
  .bnr-plain{ grid-template-columns:1fr; }
  .bnr-fig{ display:none; }
  .steps{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .lst-sel{ width:100%; }
  .lst-sel select{ flex:1 1 auto; min-width:0; }
  .dt-trust{ grid-template-columns:repeat(2,1fr); gap:var(--s3); }
  .dt-acts{ grid-template-columns:1fr 1fr; }
  .dt-wish{ grid-column:1 / -1; }
  .dt-buy{ flex-direction:column; align-items:stretch; gap:var(--s3); }
  .dt-tot{ text-align:left; display:flex; justify-content:space-between; align-items:baseline; }
  .enc-cols{ grid-template-columns:1fr; }
  .enc-side ul{ display:flex; overflow-x:auto; scrollbar-width:none; }
  .enc-side ul::-webkit-scrollbar{ display:none; }
  .enc-side li + li{ border-top:0; border-left:1px solid var(--line-soft); }
  .enc-side button{ white-space:nowrap; padding:0 var(--s5); }
  .enc-side button.on{ box-shadow:inset 0 -3px 0 var(--green); }
  .enc-d-top{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .cr{ grid-template-columns:72px 1fr; }
  .cr-r{ grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; }
  .gal-th{ grid-template-columns:repeat(5,1fr); }
  .tb-tbl th{ width:96px; }
}

/* ⚠️ 그리드 칸은 기본이 `min-width:auto` 라서, 안에 가로로 긴 것
   (스크롤 되는 분류 줄 같은 것)이 있으면 **칸이 화면보다 넓어집니다.**
   실제로 390px 도감에서 옆칸이 400px 이 되어 페이지 전체에 가로
   스크롤이 생겼습니다. 칸이 줄어들 수 있게 열어 둡니다. */
.enc-cols > *, .lst-cols > *, .dt-cols > *, .part > *,
.enc-d-top > *, .cart-cols > *, .bnr-plain > *{ min-width:0; }

/* 부위 이름표 — SVG 밖 HTML 이라 화면 폭이 바뀌어도 크기가 안 줄어듭니다 */
.pd-cap{ display:inline-flex; align-items:center; margin:var(--s3) auto 0;
  padding:6px var(--s4); background:var(--red); color:#fff; border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:700; }
.pd{ text-align:center; }

/* ══ 이용약관 · 개인정보처리방침 ══════════════════════════ */
.lg{ padding-bottom:var(--s10); }
.lg-hd{ padding:var(--s8) 0 var(--s7); border-bottom:1px solid var(--line); margin-bottom:var(--s7); }
.lg-hd h1{ font-size:var(--t-3xl); font-weight:800; margin-bottom:var(--s3); }
.lg-intro{ margin:0; color:var(--ink2); font-size:var(--t-md); line-height:1.8; max-width:68ch; }
.lg-eff{ margin:var(--s4) 0 0; font-size:var(--t-sm); color:var(--ink3); }

.lg-cols{ display:grid; grid-template-columns:238px 1fr; gap:var(--s8); align-items:start; }
.lg-cols > *{ min-width:0; }

.lg-toc{ position:sticky; top:calc(var(--hdr-h) + var(--gnb-h) + 12px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); max-height:calc(100vh - var(--hdr-h) - var(--gnb-h) - 40px); overflow:auto; }
.lg-toc h3{ font-size:var(--t-base); margin-bottom:var(--s3);
  padding-bottom:var(--s2); border-bottom:1px solid var(--line); }
.lg-toc ol{ list-style:none; margin:0; padding:0; }
.lg-toc a{ display:flex; align-items:center; min-height:40px; font-size:var(--t-sm);
  color:var(--ink2); line-height:1.45; }
.lg-toc a:hover{ color:var(--green); }

.lg-body{ max-width:74ch; }
.lg-a + .lg-a{ margin-top:var(--s8); }
.lg-a h2{ font-size:var(--t-lg); font-weight:700; margin-bottom:var(--s4);
  padding-bottom:var(--s2); border-bottom:1px solid var(--line); scroll-margin-top:140px; }
.lg-p{ margin:0 0 var(--s3); font-size:var(--t-base); line-height:1.9; color:var(--ink);
  display:flex; gap:var(--s2); }
/* 번호는 줄어들지 않게 — 좁은 화면에서 ① 만 다음 줄로 넘어가면 안 됩니다 */
.lg-n{ flex:0 0 auto; color:var(--ink2); font-weight:600; }
.lg-sub{ margin:0 0 var(--s4); padding-left:34px; }
.lg-sub li{ font-size:var(--t-base); line-height:1.85; color:var(--ink2); margin-bottom:6px; }
.lg-sub li::marker{ color:var(--ink3); }

.lg-tail{ margin-top:var(--s9); padding-top:var(--s7); border-top:2px solid var(--green); }
.lg-tail h2{ border-bottom:0; padding-bottom:0; margin-bottom:var(--s3); }
.lg-tail h2 + table{ margin-bottom:var(--s7); }

.lg-t{ width:100%; border-collapse:collapse; font-size:var(--t-base); margin-bottom:var(--s4); }
.lg-t th,.lg-t td{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top; }
.lg-t tbody th{ width:150px; background:var(--ivory); color:var(--ink2); font-weight:600; }
.lg-t3 thead th{ background:var(--green-bg); color:var(--green); font-weight:700; width:auto; }
.lg-tag{ display:inline-block; font-size:var(--t-cap); font-weight:700; color:var(--red-ink);
  background:#F8ECEA; border-radius:var(--r-sm); padding:2px 7px; margin-left:4px; }
.lg-none{ margin:0 0 var(--s5); padding:var(--s4) var(--s5); background:var(--ivory);
  border-radius:var(--r); font-size:var(--t-base); color:var(--ink2); }
.lg-fin{ margin:var(--s8) 0 0; padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--ink3); }

@media (max-width:1024px){
  .lg-cols{ grid-template-columns:1fr; }
  .lg-toc{ position:static; max-height:none; }
  .lg-toc ol{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s4); }
}
@media (max-width:640px){
  .lg-toc ol{ grid-template-columns:1fr; }
  .lg-t tbody th{ width:104px; }
  .lg-sub{ padding-left:22px; }
}

/* 장바구니 수량 — 빼고 다시 담게 하지 않습니다 */
.cr-q{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s3); }
.cr-qty{ display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); overflow:hidden; }
.cr-qty button{ width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--ink); }
.cr-qty button:hover{ background:var(--green-bg); color:var(--green); }
.cr-qty input{ width:56px; height:40px; border:0; border-left:1px solid var(--line);
  text-align:center; font-size:var(--t-base); font-weight:700; -moz-appearance:textfield; }
.cr-qty input::-webkit-outer-spin-button,.cr-qty input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0; }
.cr-u{ padding:0 var(--s3) 0 6px; font-size:var(--t-sm); color:var(--ink2); font-weight:600;
  align-self:center; }
.cr-unit{ font-size:var(--t-sm); color:var(--ink2); }

/* 약관 동의 */
.agree{ border:1px solid var(--line); border-radius:var(--r); padding:var(--s4) var(--s5) var(--s3);
  margin:var(--s6) 0 var(--s5); background:var(--white); }
.agree legend{ font-size:var(--t-sm); color:var(--ink2); padding:0 var(--s2); font-weight:600; }
.ag-r{ display:flex; align-items:center; gap:var(--s3); min-height:44px; cursor:pointer;
  font-size:var(--t-base); }
.ag-r input{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--green); cursor:pointer; }
.ag-r span{ flex:1 1 auto; min-width:0; }
.ag-all{ border-bottom:1px solid var(--line); margin-bottom:var(--s2); padding-bottom:var(--s2); }
.ag-req{ font-style:normal; color:var(--red-ink); font-weight:700; font-size:var(--t-sm); }
.ag-opt{ font-style:normal; color:var(--ink3); font-size:var(--t-sm); }
.ag-v{ flex:0 0 auto; min-height:40px; display:inline-flex; align-items:center; padding:0 var(--s2);
  font-size:var(--t-sm); color:var(--ink2); text-decoration:underline; text-underline-offset:3px; }
.ag-v:hover{ color:var(--green); }
.ag-miss{ outline:2px solid var(--red); outline-offset:3px; border-radius:var(--r-sm); }
/* 상품 → 도감. 표 아래에 붙어 한 칸 폭을 다 씁니다 */
.part-more{ width:100%; margin-top:var(--s4); }

/* 무엇을 · 왜 · 얼마나 — 동의를 받는 자리에서 같이 보여 줍니다
   (개인정보보호법 제15조 제2항). 방침 링크만 두고 넘어가지 않습니다. */
.ag-why{ list-style:none; margin:0 0 var(--s3); padding:0;
  display:grid; gap:var(--s2); font-size:var(--t-sm); }
.ag-why li{ display:grid; grid-template-columns:76px 1fr; gap:var(--s3); align-items:baseline; }
.ag-why span{ color:var(--ink2); }
.ag-why b{ font-weight:600; }
.ag-no{ margin:var(--s2) 0 0; font-size:var(--t-cap); color:var(--ink2); line-height:1.7; }

/* 손님에게 먼저 알리는 띠 — "다 적고 눌렀더니 안 된다" 를 막습니다 */
.notice{ background:#EEF2EE; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4) var(--s5); margin:0 0 var(--s6); display:grid; gap:var(--s2); }
.notice b{ font-size:var(--t-md); }
.notice span{ color:var(--ink2); font-size:var(--t-base); }
.notice-acts{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s2); }

/* 필터 — 개수 표시와 "고를 수 없음" */
.flt-c span{ display:inline-flex; align-items:baseline; gap:5px; }
.flt-c em{ font-style:normal; font-size:var(--t-cap); color:var(--ink3); font-weight:600; }
.flt-c.on em{ color:var(--green); }
.flt-c.off{ opacity:.45; cursor:not-allowed; border-style:dashed; }
.flt-c.off:hover{ border-color:var(--line); color:var(--ink2); }

/* ══ 품절 ═════════════════════════════════════════════════
   흐리게만 하고 담기를 열어 두면 눌러 보는 손님이 생기고, 눌리면
   담깁니다. 담기 자체를 없애고 "품절" 글자로 바꿉니다. */
.pc.out .pc-img img{ filter:grayscale(.65) opacity(.55); }
.pc.out .pc-nm,.pc.out .pc-pr{ color:var(--ink3); }
.pc.out .pc-pr em{ color:var(--ink3); }
.pc-out{ flex:0 0 auto; min-height:40px; display:inline-flex; align-items:center;
  padding:0 var(--s4); border-radius:var(--r); background:var(--ivory);
  color:var(--ink2); font-size:var(--t-sm); font-weight:700; }

.dt-out{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); text-align:center; }
.dt-out b{ display:block; font-size:var(--t-lg); margin-bottom:var(--s2); }
.dt-out p{ margin:0 0 var(--s5); font-size:var(--t-base); color:var(--ink2); line-height:1.8; }
.dt-out .btn + .btn{ margin-top:var(--s2); }

/* ══ 배송 안내 · 전화 주문 ════════════════════════════════ */
.ship{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4) var(--s5); display:flex; flex-direction:column; gap:var(--s2); }
.ship-r{ display:flex; align-items:center; gap:var(--s3); font-size:var(--t-base); }
.ship-r svg{ flex:0 0 auto; color:var(--green); }
.ship-r span{ flex:0 0 78px; color:var(--ink2); }
.ship-r b{ font-weight:600; min-width:0; }
.ship-dt{ margin:var(--s5) 0 0; }
.ship-cart{ margin-top:var(--s4); }

.dt-call{ display:flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap); margin-top:var(--s3); border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); font-size:var(--t-base);
  font-weight:600; color:var(--ink2); }
.dt-call:hover{ border-color:var(--green); color:var(--green); }
.call-h{ font-style:normal; font-size:var(--t-cap); color:var(--ink3); }
.cart-call{ margin-top:var(--s2); display:flex; align-items:center; justify-content:center;
  gap:var(--s2); }
@media (max-width:640px){ .ship-r{ flex-wrap:wrap; } .ship-r span{ flex:0 0 auto; } }

/* 지금 없는 조건은 접어 둡니다 — 펼쳐 두면 필터가 화면보다 길어집니다 */
.flt-d{ margin-top:var(--s2); }
.flt-d summary{ min-height:36px; display:flex; align-items:center; cursor:pointer;
  font-size:var(--t-cap); color:var(--ink3); list-style:none; }
.flt-d summary::-webkit-details-marker{ display:none; }
.flt-d summary::before{ content:"＋"; margin-right:5px; font-weight:700; }
.flt-d[open] summary::before{ content:"－"; }
.flt-d summary:hover{ color:var(--green); }
.flt-d .flt-o{ margin-top:6px; }

/* ══ 주문서 · 주문 완료 ═══════════════════════════════════
   장바구니(.cart-cols)와 같은 뼈대입니다 — 왼쪽에 적는 것, 오른쪽에
   금액. ⚠️ 그리드 칸에는 min-width:0 (아래 공통 규칙에 이미 있습니다). */
.od{ padding-bottom:var(--s10); }
.od-cols{ display:grid; grid-template-columns:1fr 360px; gap:var(--s7); align-items:start; }
.od-l{ display:grid; gap:var(--s5); }
.od-s{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); }
.od-s h2{ font-size:var(--t-lg); margin:0 0 var(--s5); }
.od-g2{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s4); }

/* 주문 상품 줄 */
.od-i{ display:grid; grid-template-columns:64px 1fr auto; gap:var(--s4); align-items:center;
  padding:var(--s3) 0; }
.od-i + .od-i{ border-top:1px solid var(--line-soft); }
.od-i-img{ width:64px; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  background:var(--line-soft); }
.od-i-img img{ width:100%; height:100%; object-fit:cover; }
.od-i-b{ min-width:0; display:grid; gap:2px; }
.od-i-b b{ font-size:var(--t-md); }
.od-i-b span{ font-size:var(--t-sm); color:var(--ink2); }
.od-i-p{ font-weight:700; white-space:nowrap; }
.od-list{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4) var(--s6); }

/* "주문하시는 분과 같습니다" — 체크박스는 라벨 전체가 누르는 자리입니다 */
.od-same{ display:flex; align-items:center; gap:var(--s3); min-height:var(--tap);
  cursor:pointer; font-size:var(--t-base); margin-bottom:var(--s3); }
.od-same input{ width:20px; height:20px; accent-color:var(--green); cursor:pointer; }

/* 결제수단 — 고를 수 있는 것만 들어옵니다 (js/data/order.js) */
.od-pays{ display:grid; gap:var(--s2); }
.od-pay{ display:flex; align-items:center; gap:var(--s3); min-height:56px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); padding:0 var(--s4);
  background:var(--white); }
.od-pay.on{ border-color:var(--green); background:var(--green-bg); }
.od-pay input{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--green); cursor:pointer; }
.od-pay span{ display:grid; gap:1px; min-width:0; }
.od-pay b{ font-size:var(--t-md); font-weight:700; }
.od-pay em{ font-style:normal; font-size:var(--t-sm); color:var(--ink2); }

/* 입금 계좌 — 전화로 불러 주기도 하고 눈으로 옮겨 적기도 합니다.
   ⚠️ 계좌번호는 작게 쓰지 마세요. 한 자리 틀리면 돈이 딴 데로 갑니다. */
.od-bank{ margin-top:var(--s4); background:var(--ivory); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s5); }
/* ⚠️ `>` 를 빼지 마세요. 안쪽 문단의 <b>("2일 안에")까지 블록이 되어
   "주문 뒤 / 2일 안에 / 입금해 주세요" 로 세 줄이 됐습니다. */
.od-bank > b{ display:block; font-size:var(--t-base); margin-bottom:var(--s2); }
.od-bank p b{ font-weight:700; color:var(--ink); }
.od-acct{ font-size:var(--t-lg); font-weight:700; letter-spacing:.01em; line-height:1.6; }
.od-acct span{ font-size:var(--t-sm); font-weight:600; color:var(--ink2); white-space:nowrap; }
.od-bank p{ margin:var(--s3) 0 0; font-size:var(--t-sm); color:var(--ink2); line-height:1.7; }
.od-bank-big{ max-width:520px; margin:var(--s6) auto 0; text-align:center; }
.od-amt{ font-size:var(--t-2xl); font-weight:800; color:var(--red-ink); margin-top:var(--s3); }

/* 오른쪽 금액 칸 */
.od-sum{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); position:sticky; top:calc(var(--hdr-h) + var(--gnb-h) + 12px); }
.od-sum h2{ font-size:var(--t-lg); margin:0 0 var(--s4); }
.od-agree{ margin:var(--s5) 0 var(--s4); }
.od-why{ list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:var(--s2);
  font-size:var(--t-sm); color:var(--ink2); line-height:1.7; }
.od-why b{ color:var(--ink); font-weight:700; }

/* 주문 완료 */
.od-done{ padding:var(--s9) 0 var(--s10); text-align:center; max-width:640px; }
.od-done-ic{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:var(--green-bg); color:var(--green); margin-bottom:var(--s5); }
.od-done h1{ font-size:var(--t-2xl); margin:0 0 var(--s2); }
.od-no-t{ font-size:var(--t-md); color:var(--ink2); margin:0; }
.od-no-t b{ color:var(--ink); font-weight:700; letter-spacing:.02em; }
.od-done-n{ font-size:var(--t-base); color:var(--ink2); line-height:1.8; margin:var(--s4) 0 0; }
.od-done .empty-acts{ margin-top:var(--s7); }

@media (max-width:1024px){
  .od-cols{ grid-template-columns:1fr; }
  .od-sum{ position:static; }
}
@media (max-width:640px){
  .od-g2{ grid-template-columns:1fr; }
  .od-i{ grid-template-columns:56px 1fr; }
  .od-i-img{ width:56px; }
  /* 금액이 이름 아래로 내려옵니다 — 좁은 화면에서 셋을 한 줄에 두면
     상품명이 두 글자만 남습니다 */
  .od-i-p{ grid-column:2; text-align:right; }
}
/* 주문을 못 받는 동안 장바구니에 뜨는 한 줄 */
.cart-closed{ text-align:left; line-height:1.7; padding:var(--s3) 0; }

/* 이 브라우저에서 넣은 주문 (마이페이지) */
.my-note{ font-size:var(--t-sm); color:var(--ink2); margin:0 0 var(--s5); line-height:1.7; }
.my-ords{ display:grid; gap:var(--s3); }
.my-ord{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); display:grid; gap:var(--s2); }
.my-ord-h{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); }
.my-ord-h b{ font-size:var(--t-md); letter-spacing:.02em; }
.my-ord-h span{ font-size:var(--t-sm); color:var(--ink2); }
.my-ord-i{ font-size:var(--t-base); color:var(--ink2); line-height:1.7; }
.my-ord-f{ display:flex; justify-content:space-between; align-items:baseline;
  padding-top:var(--s2); border-top:1px solid var(--line-soft); }
.my-ord-f span{ font-size:var(--t-sm); color:var(--ink2); }
.my-ord-f b{ font-size:var(--t-lg); font-weight:800; color:var(--red-ink); }
.my-ord .btn{ justify-self:start; }
/* 완료 화면에서 다시 보여 주는 품목 줄 */
.od-done-list{ text-align:left; max-width:520px; margin:var(--s5) auto 0; }
.od-done-list .od-i{ grid-template-columns:1fr auto; }
.od-keep{ font-size:var(--t-sm); }