/* v2 기본: 리셋 · 타이포 · 공통 부품(헤더·푸터·버튼·카드) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;overflow-wrap:anywhere;word-break:keep-all}
img,picture,svg{display:block;max-width:100%}
/* 아이콘 크기(대표 10-20): 아이콘 svg 의 width 속성 × --ic-scale 하나로. 기본 «크게» 1.2 · data-ic="m" 보통 1 · "xl" 더 크게 1.4(편집기 «사이트 설정 → 아이콘 크기»). 단추 상자 크기는 그대로 */
:root{--ic-scale:1.2}:root[data-ic="m"]{--ic-scale:1}:root[data-ic="xl"]{--ic-scale:1.4}
svg[width="14"]{width:calc(14px * var(--ic-scale));height:calc(14px * var(--ic-scale))}   /* K18: 위 메뉴 펼침 단추(K12 갈래 · K16 이야기)도 */
svg[width="16"]{width:calc(16px * var(--ic-scale));height:calc(16px * var(--ic-scale))}svg[width="18"]{width:calc(18px * var(--ic-scale));height:calc(18px * var(--ic-scale))}
svg[width="20"]{width:calc(20px * var(--ic-scale));height:calc(20px * var(--ic-scale))}svg[width="22"]{width:calc(22px * var(--ic-scale));height:calc(22px * var(--ic-scale))}
svg[width="24"]{width:calc(24px * var(--ic-scale));height:calc(24px * var(--ic-scale))}svg[width="26"]{width:calc(26px * var(--ic-scale));height:calc(26px * var(--ic-scale))}
svg[width="28"]{width:calc(28px * var(--ic-scale));height:calc(28px * var(--ic-scale))}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 2-J-2 줄바꿈: 칸이 «휴대폰에서는 줄바꿈 무시»면 PC 만 줄바꿈(.nl-pc), 휴대폰은 띄어쓰기(.nl-m) · 제목·문단은 낱말 중간에서 끊지 않음 */
.nl-m{display:none}
/* 2-J-3 글자 크기 3단계(작게·기본·크게) — 부모 크기 × 토큰 비율, 크게는 좁은 화면에서 덜 커짐 */
.ts-sm{font-size:calc(var(--ts-sm) * 1em)}
.ts-lg{font-size:clamp(1em, calc(var(--ts-lg) * 1em), calc(1em + 1.2vw))}
@media (max-width:768px){.nl-pc{display:none}.nl-m{display:inline}}
h1,h2,h3,h4,p,li,dd,figcaption,blockquote,.hero__title,.tile__title,.hero__sub,.tile__sub{word-break:keep-all;overflow-wrap:anywhere}
.skip{position:absolute;left:8px;top:-100px;z-index:100;background:var(--primary);color:var(--on-primary);padding:12px 16px;text-decoration:none}
.skip:focus{top:8px}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.muted{color:var(--muted)}

/* 타이포 */
.h2{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1.35;white-space:pre-line}
.h2--lg{font-size:38px}
.h2--sm{font-size:32px}
.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:500}
.eyebrow--accent{color:var(--accent)}
.eyebrow--on-dark{color:var(--accent-on-dark)}
.sec-head{display:flex;flex-direction:column;gap:12px}
.sec-head--center{align-items:center;text-align:center}
.sec-head--row{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.sec-head__sub{font-size:16px;color:var(--muted)}
.link-under{font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
/* 2-I 밑줄·채움 층(쉬는 상태는 보이지 않음 — 움직임은 motion.css). 크기·위치는 움직이지 않는다 */
.link-under,.gnb a,.ft__nav a,.cats__label{position:relative}
.link-under::after,.gnb a::after,.ft__nav a::after,.cats__label::after{content:"";position:absolute;left:0;right:0;height:1px;bottom:-1px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.gnb a::after{height:2px;bottom:-2px}
.ft__nav a::after{background:var(--foot-ink);bottom:16px}
.cats__label::after{bottom:-3px;background:currentColor}
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;pointer-events:none}
.btn--dark::before{background:var(--accent)}
.btn--line::before{background:var(--ink)}
.btn--line-white::before{background:#FFFFFF}

/* 버튼: 각진 모서리, 높이 52~60 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 32px;border:1px solid transparent;border-radius:0;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;background:none}
.btn--dark{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn--line{border-color:var(--ink);color:var(--ink);padding:0 48px;font-weight:400}
.btn--line-white{border-color:#FFFFFF;color:#FFFFFF;padding:0 36px}
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;position:relative}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pill{min-height:44px;padding:0 22px;border-radius:22px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer}
.pill[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.badge{position:absolute;top:16px;left:16px;background:#FFFFFF;color:var(--accent);font-size:12px;font-weight:500;padding:5px 10px;line-height:1.4}

/* 헤더 (Header2) */
.hd{background:var(--bg);color:var(--ink);position:relative;z-index:20}
.hd__notice{background:var(--foot);color:var(--foot-ink);font-size:13px;text-align:center;padding:9px 16px;letter-spacing:.02em}
.hd__util{display:flex;justify-content:flex-end;gap:20px;font-size:12px;padding-top:10px}
.hd__util a{color:var(--muted);text-decoration:none}
.hd__bar{min-height:72px;display:flex;align-items:center;column-gap:56px}
.hd__menu{display:none}
.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);padding:6px 0 10px}
.logo__ko{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.04em;line-height:1.2}
.logo__en{font-size:9px;letter-spacing:.34em;color:var(--muted);line-height:1.6}
.gnb{display:flex;flex-wrap:wrap;column-gap:40px;flex:1 1 auto}
.gnb a{text-decoration:none;color:var(--ink);font-size:16px;padding:22px 0 20px;border-bottom:2px solid transparent}
.gnb a[aria-current="page"]{font-weight:700;border-bottom-color:var(--ink)}
.hd__actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.hd__count{position:absolute;top:5px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#FFFFFF;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.hd__count[hidden]{display:none}
.hd__line{height:1px;background:var(--line)}
.hd__search{border-top:1px solid var(--line);padding:16px 0}
.hd__search form{display:flex;gap:8px}
.hd__search input{flex:1;min-width:0;min-height:52px;border:1px solid var(--line);background:#FFFFFF;padding:0 16px;font-size:16px;border-radius:0}

/* 서랍 메뉴 (≤768) */
.drawer{position:fixed;inset:0;z-index:50}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:var(--scrim)}
.drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;padding:8px 20px 32px;transform:translateX(-100%);transition:transform .22s ease}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:60px;border-bottom:1px solid var(--line)}
.drawer__top .logo__ko{font-size:21px}
.drawer__nav{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--line)}
.drawer__nav a{display:flex;align-items:center;min-height:52px;font-size:17px;text-decoration:none}
.drawer__nav a[aria-current="page"]{font-weight:700}
.drawer__util{display:flex;flex-direction:column;padding-top:8px}
.drawer__util a{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--muted);text-decoration:none}
body.is-locked{overflow:hidden}
/* 2-I 서랍이 열리면 항목이 0.04초 간격으로 차례로 */
@keyframes ed-drawer-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.drawer.is-open .drawer__nav a,.drawer.is-open .drawer__util>a,.drawer.is-open .drawer__util .hd__member>:not([hidden]){animation:ed-drawer-in var(--dur-mid) var(--ease) both}
.drawer.is-open .drawer__nav>:nth-child(2){animation-delay:.04s}.drawer.is-open .drawer__nav>:nth-child(3){animation-delay:.08s}.drawer.is-open .drawer__nav>:nth-child(4){animation-delay:.12s}.drawer.is-open .drawer__nav>:nth-child(n+5){animation-delay:.16s}
.drawer.is-open .drawer__util>a,.drawer.is-open .drawer__util .hd__member>*{animation-delay:.16s}
@media (prefers-reduced-motion:reduce){.drawer__panel{transition:none}.drawer.is-open .drawer__nav a,.drawer.is-open .drawer__util>a,.drawer.is-open .drawer__util .hd__member>*{animation:none}}
/* K12 분류 두 단계 — 위 메뉴 대분류 펼침(PC) · 서랍 대분류 눌러 펼침(휴대폰). 한 단계 분류면 쓰이지 않음
   메뉴가 6칸이라 1024~1280 은 간격을 줄여 한 줄, 769~1023 은 한 줄에 안 들어가 서랍 메뉴(☰)로 */
.gnb--groups{flex-wrap:nowrap;column-gap:clamp(16px,calc(5vw - 34px),40px)}
.gnb--groups>*,.hd--groups .logo{flex-shrink:0;white-space:nowrap}
@media (min-width:769px) and (max-width:1199px){.gnb--groups{display:none}.hd--groups .hd__menu{display:inline-flex}}   /* 11-03 대표: 글자 B 에서 1024 머리줄 밀림 → 1199 까지 메뉴 단추 */
/* 11-03 글자 B — 좁은 휴대폰(389 이하): 로고 글은 지금 크기(아이콘 줄 밀림 막음) · 카드 단위 가격은 «…»로 자르지 않고 줄바꿈. 선택자를 한 단계 높여 type.css 보다 앞섬 */
@media (max-width:389px){.hd__bar .logo__ko{font-size:21px}.hd__bar .logo__en{font-size:8px}.card .card__unit{white-space:normal;overflow:visible}}
.gnb__item{position:relative;display:flex;align-items:center;column-gap:2px}
.gnb__tog{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:-8px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:4px}
.gnb__tog svg{transform:rotate(90deg);transition:transform var(--dur-fast) var(--ease)}
.gnb__tog[aria-expanded="true"] svg{transform:rotate(-90deg)}
.gnb__sub{position:absolute;top:100%;left:-18px;z-index:40;min-width:184px;margin:0;padding:8px 0;list-style:none;background:var(--bg);border:1px solid var(--line);box-shadow:0 10px 28px rgba(34,26,21,.10)}
.gnb__sub[hidden]{display:none}
.gnb__item.is-open .gnb__sub{animation:ed-gnb-in var(--dur-fast) var(--ease) both}
@keyframes ed-gnb-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.gnb .gnb__sub a{display:block;padding:10px 18px;font-size:15px;border-bottom:0;white-space:nowrap}
.gnb .gnb__sub a::after{display:none}
.gnb .gnb__sub li:first-child a{color:var(--muted);font-size:14px}
.gnb .gnb__sub--plain li:first-child a{color:inherit;font-size:15px}   /* K16 «이야기» 펼침: 첫 줄도 같은 글(«전체» 줄이 아님) */
@media (hover:hover){.gnb .gnb__sub a:hover{background:var(--surface);color:var(--accent)}}
.gnb .gnb__sub a:focus-visible{background:var(--surface);color:var(--accent)}
.drawer__tog{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:17px;text-align:left;cursor:pointer}
.drawer__tog[data-current]{font-weight:700}
.drawer__tog svg{transform:rotate(90deg);transition:transform var(--dur-fast) var(--ease);color:var(--muted)}
.drawer__tog[aria-expanded="true"] svg{transform:rotate(-90deg)}
.drawer__sub{margin:0 0 8px;padding:0 0 0 14px;list-style:none;border-left:2px solid var(--line)}
.drawer__sub[hidden]{display:none}
.drawer__nav .drawer__sub a{min-height:44px;font-size:15px}
.drawer.is-open .drawer__nav>.drawer__grp{animation-name:ed-drawer-in;animation-duration:var(--dur-mid);animation-timing-function:var(--ease);animation-fill-mode:both}
@media (prefers-reduced-motion:reduce){.gnb__item.is-open .gnb__sub,.drawer.is-open .drawer__nav>.drawer__grp{animation:none}.gnb__tog svg,.drawer__tog svg{transition:none}}

/* 상품 카드 */
.grid4{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px}
.card{display:flex;flex-direction:column;gap:18px}
.card[hidden]{display:none}
.card__photo{position:relative;display:block;aspect-ratio:1/1;background:var(--photo);overflow:hidden}
.card__photo-link{display:block;width:100%;height:100%}
.card__img{width:100%;height:100%;object-fit:cover}
.card__photo picture{height:100%}
.card__alt{display:none}   /* 두 번째 사진(개정 3-2): 마우스 기기에서만 motion.css 가 겹쳐 보인다 */
/* 2-I 빠른 단추 «담기 +»(옵션 1개) / «옵션 고르기»(상세로): 마우스 기기에서는 카드에 올리거나 카드 안에 포커스가 오면 아래에서 올라온다. 휴대폰(hover 없음)은 표시 안 함(지시서 기본 — 대표 확인) */
.card__bag{position:absolute;left:16px;right:16px;bottom:16px;height:44px;background:#FFFFFF;border:0;padding:0 16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none}
@media (hover:hover){.card__bag svg{display:none}.card__bag{opacity:0;transform:translateY(10px);pointer-events:none}.card:hover .card__bag,.card:focus-within .card__bag{opacity:1;transform:none;pointer-events:auto}.card__bag:hover,.card__bag:focus-visible{background:var(--primary);color:var(--on-primary)}}
/* 휴대폰 등 hover 없는 기기(대표 결정 10-19): 예전 둥근 장바구니 아이콘을 늘 보인다(44px 터치 영역) */
@media (hover:none){.card .card__bag{left:auto;right:16px;bottom:16px;width:44px;height:44px;border-radius:22px;padding:0}.card__bag-t{display:none}}
.badge--soldout{background:var(--foot);color:#FFFFFF}
.card__text{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.card__name{font-size:16px}
.card__price{font-size:18px;font-weight:700}
.card__desc{font-size:13px;color:var(--muted)}
.card.is-soldout .card__img{opacity:.55}
.card.is-soldout .card__price{color:var(--muted)}
.card__unit{display:block;max-width:100%;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* K15b 카드 «용량 · 100g당 N원»(작게·보조색, 한 줄 — 휴대폰도 줄바꿈·넘침 없음) */

/* 푸터 (Footer2) */
.ft{background:var(--foot);color:var(--foot-ink)}
.ft__navwrap{border-bottom:1px solid var(--foot-line)}
.ft__nav{display:flex;flex-wrap:wrap;column-gap:32px;font-size:14px}
.ft__nav a{color:var(--foot-ink);text-decoration:none;padding:20px 0}
.ft__nav a.is-strong{color:#FFFFFF;font-weight:700}
.ft__body{padding-top:48px;padding-bottom:56px;display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between}
.ft__brand{flex:1 1 520px;display:flex;flex-direction:column;gap:20px}
.ft__logo{display:flex;flex-direction:column}
.ft__logo .logo__ko{font-size:22px}
.ft__logo .logo__en{color:var(--foot-muted)}
.ft__legal{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.8;color:var(--foot-muted)}
.ft__legal a{color:var(--foot-ink)}
.ft__cs{flex:0 1 360px;display:flex;flex-direction:column;gap:14px}
.ft__cs-h{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--foot-muted)}
.ft__tel{font-family:var(--serif);font-size:26px;font-weight:500}
.ft__tel a{text-decoration:none}
.ft__hours{font-size:13px;line-height:1.7;color:var(--foot-muted)}
.ft__sns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ft__sns a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--foot-line);color:var(--foot-ink);text-decoration:none;font-size:13px}

/* 반응형 공통 */
@media (max-width:1024px){
  .grid4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hd__bar{column-gap:32px}
  .gnb{column-gap:28px}
}
@media (max-width:768px){
  .hd__notice{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:8px 16px}
  .hd__notice span{display:block;overflow:hidden;text-overflow:ellipsis}
  .hd__util,.gnb,.hd__mypage{display:none}
  .hd__bar{min-height:60px;display:grid;grid-template-columns:1fr auto 1fr;column-gap:8px}
  .hd__menu{display:inline-flex;justify-self:start;margin-left:-10px}
  .logo{align-items:center;padding:6px 0}
  .logo__ko{font-size:21px}
  .logo__en{font-size:8px}
  .hd__actions{justify-self:end;margin-right:-10px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
  .card{gap:12px}
  .card__name{font-size:14px}
  .card__price{font-size:16px}
  .badge{top:10px;left:10px;font-size:11px;padding:4px 8px}
  .card__bag{left:10px;right:10px;bottom:10px;height:40px}
  .card .card__bag{right:10px;bottom:10px}
  .h2{font-size:26px}.h2--lg{font-size:28px}.h2--sm{font-size:24px}
  .ft__nav{column-gap:20px}
  .ft__nav a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .ft__body{padding-top:36px;padding-bottom:44px;gap:32px}
  .ft__brand{flex-basis:100%}
}

/* 경로 표시 */
.crumbs{font-size:13px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{text-decoration:none;color:inherit}
.crumbs--muted{color:var(--muted)}
.h2--md{font-size:30px}
.h3{font-size:20px;font-weight:700}

/* 담은 뒤 안내 */
.added{position:fixed;z-index:60;top:16px;right:16px;width:min(360px,calc(100vw - 32px));background:var(--bg);border:1px solid var(--ink);padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 24px rgba(20,15,12,.12)}
.added[hidden]{display:none}
.added__h{font-weight:700;font-size:16px}
.added__item{font-size:14px;color:var(--muted)}
.added__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.added__btns .btn{padding:0 12px;min-height:52px}
@media (max-width:768px){.added{top:auto;bottom:80px;left:16px;right:16px;width:auto}}
/* 10-27 대표: AI 연출 사진(catalog photo_kind = ai)만 사진 오른쪽 아래 작게 «연출 이미지» — 실사·실사 합성은 표시 없음 */
picture[data-photo-kind="ai"]{position:relative;display:block}
picture[data-photo-kind="ai"]::after{content:"연출 이미지";position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:999px;font:500 11px/1.5 var(--sans,"Noto Sans KR",sans-serif);white-space:nowrap;color:#fff;background:rgba(32,26,22,.62);pointer-events:none}
[data-thumb] picture[data-photo-kind="ai"]::after{display:none}
.page-detail picture[data-photo-kind="ai"]::after{display:none}   /* 11-03 대표: 상세는 사진마다 표시 대신 쪽 맨 아래 한 줄(.pd-ainote) */
.ssum picture[data-photo-kind="ai"]::after{display:none}   /* 11-10 대표: 홈 이야기 요약 카드도 그림마다 딱지 대신 카드 아래 한 줄(.ssum__ainote — <책>.ai_note) */   /* 11-03 대표: 상세는 사진마다 표시 대신 쪽 맨 아래 한 줄(.pd-ainote) */
.pd-ainote{margin:40px auto 32px;font-size:13px;line-height:1.7;color:var(--muted);text-align:center}   /* 상세 사진 줄 작은 썸네일은 빼고 — 큰 사진에서 보임 */