/* ============================================================
   한국참전통발효식품협동조합 — Site Design System
   KB금융그룹 톤앤매너 기반 + 전통 발효 보조 팔레트
   메인 #60584C (KB 그레이) · 포인트 #FFBC00 (KB 옐로우)
   보조 #6E8252 (올리브 — 발효·자연) · 서브 #E2D9BE (오트밀)
   배경 #FFFFFF (화이트) — 넓은 여백 · 명확한 타이포 위계
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Song+Myung&family=Gaegu:wght@400;700&display=swap');

/* BC카드 페이북(Paybooc) — 브랜드 기본 글꼴 */
@font-face { font-family:'PayboocFont'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Light.woff') format('woff'); font-weight:300; font-display:swap; }
@font-face { font-family:'PayboocFont'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Medium.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'PayboocFont'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Bold.woff') format('woff'); font-weight:700; font-display:swap; }
@font-face { font-family:'PayboocFont'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-ExtraBold.woff') format('woff'); font-weight:800; font-display:swap; }

:root {
  /* ---- Core palette ---- */
  /* KB금융그룹 톤앤매너: 화이트 지면 · KB 그레이 구조 · KB 옐로우 포인트 */
  --bg:          #FFFFFF;   /* page — clean white */
  --surface:     #FFFFFF;   /* cards, raised surfaces */
  --surface-2:   #F5F3EF;   /* subtle inset / muted block */

  --main:        #60584C;   /* KB 그레이 — 구조·브랜드 기본 (본문 대비 6.4:1) */
  --main-deep:   #4B443A;   /* hover / deeper */
  --main-deeper: #33302A;   /* hero/footer deep panel */
  --main-tint:   #F2F0EB;   /* gray 6% wash */

  --sub:         #E2D9BE;   /* oatmeal — secondary surface/tag */
  --sub-soft:    #F0EBD7;   /* lighter oatmeal block */
  --sub-deep:    #CFC49E;   /* oatmeal border/deep */

  /* 포인트는 '면(fill)' 전용 — 노란 면 위 글자는 반드시 --point-ink */
  --point:       #FFBC00;   /* KB 옐로우 — CTA 면 / 강조 마크 */
  --point-deep:  #EBA900;   /* hover fill */
  --point-tint:  #FFF3D2;   /* yellow wash */
  --point-ink:   #33302A;   /* 옐로우 면 위 텍스트·아이콘 (대비 9.6:1) */

  /* 보조(전통·발효·자연) — 텍스트로 쓸 때는 항상 --olive-deep */
  --olive:       #6E8252;   /* 올리브 — 발효/자연 섹션 면 */
  --olive-deep:  #56683E;   /* 올리브 텍스트 (본문 대비 5.5:1) */
  --olive-tint:  #EDF0E4;   /* olive wash */

  --ink:         #2A2723;   /* primary text — warm near-black */
  --ink-soft:    #5C564C;   /* secondary text */
  --ink-mute:    #706859;   /* muted 본문 — 흰 배경 5.5:1 / 오트밀 배경 4.6:1 로 AA 충족 */
  --ink-faint:   #B4AD9E;   /* faintest */

  --line:        rgba(42,39,35,0.12);
  --line-soft:   rgba(42,39,35,0.07);
  --white:       #FFFFFF;

  /* logo accents (decorative echo only) */
  --logo-orange: #EC7305;
  --logo-green:  #019D2F;

  /* 브랜드 — 법인명 '참' 한 글자 강조 (단청 홍색. 크림 배경 대비 6.2:1) */
  --brand-cham:  #C4302B;

  /* semantic */
  --ok:    #3E7D4F;
  --warn:  #C9912F;
  --danger:#C0492E;
  --info:  #4A6E86;
  /* 안내 상자용 — 색 막대를 세우는 대신 면과 글자로 성격을 드러낸다 */
  --info-tint: #EDF2F6;
  --info-ink:  #33536A;
  /* 오류 면. signup·mypage 가 `var(--danger-tint, #FBEAE8)` 로 같은 값을 각자
     적어 두고 있었다 — 토큰이 없어 대비값이 원본 노릇을 하던 자리다 */
  --danger-tint: #FBEAE8;

  /* ---- Type ---- */
  --font-head: 'PayboocFont', 'Pretendard Variable', sans-serif;  /* tweakable: 글꼴 변형 */
  --font-body: 'PayboocFont', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-hand: 'Gaegu', 'PayboocFont', cursive;

  --fs-display: clamp(40px, 5.6vw, 76px);
  --fs-h1: clamp(32px, 3.6vw, 48px);
  --fs-h2: clamp(26px, 2.6vw, 36px);
  --fs-h3: clamp(21px, 2.1vw, 26px);
  --fs-h4: clamp(18px, 1.7vw, 21px);
  --fs-h5: 18px;
  /* 타깃 독자 30~50대 — 40대 이후 가독성을 고려해 본문 한 단계씩 키움 */
  /* 리드문은 본문(17px)과 5px 이상 벌린다. 2px 차이는 위계로 읽히지 않는다 */
  --fs-body-lg: clamp(19px, 1.8vw, 22px);
  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-caption: 14px;
  --fs-micro: 12px;

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-normal: 1.72;
  --lh-relaxed: 1.9;
  /* 키커 자간 — 한글은 낱자가 이미 넓어 영문 대문자용 0.22em이면 흩어져 보인다 */
  --tracking-kicker: 0.08em;

  /* ---- Spacing (4px grid) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s32:128px;

  /* section vertical rhythm — 뷰포트에 따라 연속 축소.
     고정값이면 섹션이 맞닿을 때 위·아래 패딩이 겹쳐 모바일에서 2배(160px) 죽은 띠가 생긴다. */
  --sec-pad: clamp(58px, 7vw, 116px);
  /* 좌우 지면 여백 — 모바일에서 32px는 본문 폭을 과하게 깎는다 */
  --gutter: clamp(18px, 4.2vw, 32px);
  /* 카드·패널 안쪽 좌우 여백. 제목·표·안내문이 모두 이 한 선에서 시작해야
     한 상자 안이 하나로 읽힌다 — 값이 셋으로 갈리면 눈이 기준선을 잃는다. */
  --gutter-panel: clamp(16px, 1.6vw, 22px);

  /* 블록 사이 세로 간격 — 이 5개만 쓴다 (rules/spacing-rhythm.md).
     같은 역할의 간격이 페이지마다 다른 값으로 들어가 리듬이 어긋나던 문제를 막는다. */
  --gap-tight:   8px;                      /* 라벨↔값, 아이콘↔글자 */
  --gap-related: 16px;                     /* 제목↔문단, 문단↔문단 */
  --gap-block:   24px;                     /* 카드 안 요소, 목록 항목 사이 */
  --gap-group:   clamp(28px, 3.4vw, 44px); /* 섹션 헤드↔본문, 서로 다른 덩어리 */
  --gap-sub:     clamp(40px, 5vw, 64px);   /* 섹션 안 h3 소제목 앞 */

  /* ---- Radii (tweakable corner style) ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
  --r-card: var(--r-lg);

  --maxw: 1200px;
  --maxw-narrow: 880px;
  --nav-h: 162px; /* 2단 헤더: 브랜드(로고 58 + 상하여백 24·20) 102px + 메뉴 60px (모바일에선 88px로 재정의) */

  /* ---- Shadows (soft, offset-y only) ---- */
  --sh-xs: 0 1px 2px rgba(42,39,35,0.05);
  --sh-sm: 0 2px 10px rgba(42,39,35,0.06);
  --sh-md: 0 10px 28px rgba(42,39,35,0.09);
  --sh-lg: 0 20px 56px rgba(42,39,35,0.12);
  --sh-point: 0 12px 30px rgba(255,188,0,0.36);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 240ms;
  --dur-fast: 150ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;          /* 한국어: 어절 중간에서 줄바꿈 금지 */
  overflow-wrap: break-word;     /* 긴 영문·URL만 예외적으로 꺾음 */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--main); color: #fff; }

h1,h2,h3,h4,h5 { margin: 0; font-family: var(--font-head); font-weight: 800; color: var(--ink); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 700; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: 700; }
p  { margin: 0 0 var(--s4); text-wrap: pretty; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--sec-pad); }
.section-sm { padding-block: calc(var(--sec-pad) * 0.62); }

/* 배경이 같은 섹션이 연달아 오면 앞 섹션의 아래 패딩과 뒤 섹션의 위 패딩이 겹쳐
   경계도 없는 2배 높이의 빈 띠가 된다 → 뒤 섹션의 위 패딩을 제거해 1배로 맞춘다.
   (색 밴드가 붙은 경우는 배경 전환 자체가 경계이므로 그대로 둔다)

   .partners 는 흰 면이라 뒤따르는 흰 섹션과 배경이 같다 → 겹침 대상.
   .hero 는 짙은 사진 패널이라 배경이 바뀐다 → 대상이 아니다. 여기에 넣으면
   히어로 바로 아래 섹션만 위 여백 0이 되어, --sec-pad 를 키워도 그 자리만 붙어 있는다. */
.partners + :is(.section, .section-sm):not([class*="band-"]),
:is(.section, .section-sm):not([class*="band-"]) + :is(.section, .section-sm):not([class*="band-"]) {
  padding-top: 0;
}

/* 1단계(라벨) — 이 섹션이 무엇인지. 본문보다 작지만 12px는 한글에서 읽히지 않는다 */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-body);
  font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  color: var(--olive-deep);   /* 옐로우는 면 전용 — 라벨 글자는 읽히는 올리브로 */
}
.eyebrow::before {
  content:""; width: 22px; height: 3px; border-radius: 2px; background: var(--point); display: inline-block;
}
.eyebrow.center::after {
  content:""; width: 22px; height: 3px; border-radius: 2px; background: var(--point); display: inline-block;
}
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--gap-related); }
.section-head .lede { margin-top: var(--gap-related); }

/* 세로 리듬 컨테이너 — 직계 블록 사이 간격을 CSS가 책임진다.
   HTML에서 인라인 margin으로 다시 지정하지 않는다
   (인라인 스타일은 미디어쿼리를 이겨서 반응형 조정을 원천 차단한다).
   .wrap 은 섹션 본문 컨테이너라 기본 적용하고, .wrap.split 은 2열 레이아웃이라 제외한다.
   2단 안의 글 기둥처럼 .wrap 이 아닌 덩어리에는 .stack 을 붙인다. */
.wrap:not(.split) > * + *,  .stack > * + *  { margin-top: var(--gap-group); }
.wrap:not(.split) > h3,     .stack > h3     { margin-top: var(--gap-sub); }
.wrap:not(.split) > h3 + *, .stack > h3 + * { margin-top: var(--gap-block); }
/* 이어지는 문단은 한 덩어리다 — 블록군 간격(44px)으로 벌리면 글이 토막나 보인다 */
.wrap:not(.split) > p + p,  .stack > p + p  { margin-top: var(--gap-related); }
.section-head + * { margin-top: var(--gap-group); }

/* 서명 — 인사말 끝의 '대표 ○○○ 드림'. 본문에서 한 칸 떨어져 마무리로 읽힌다.
   편지의 관례대로 오른쪽에 붙인다 */
.sign { margin-top: var(--gap-group); font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: var(--lh-snug); text-align: right; }
.stack > .sign, .wrap:not(.split) > .sign { margin-top: var(--gap-group); }

/* 키커 → 제목 → 리드문. 리듬 컨테이너(.wrap/.stack) 안에서는 이 묶음을 반드시
   .section-head 로 감싼다 — 감싸지 않으면 낱개 블록으로 취급돼 44px씩 벌어진다. */
.eyebrow + :is(h1, h2, h3) { margin-top: var(--gap-related); }
:is(h1, h2, h3) + .lede    { margin-top: var(--gap-related); }

/* 각주·부연 — 바로 앞 요소에 붙여 읽는다 */
.note { margin: var(--gap-tight) 0 0; font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-normal); }
/* 표·이미지 등 블록 아래에 올 때는 한 단계 띄운다 */
.wrap > .note, .stack > .note { margin-top: var(--gap-related); }

/* 섹션 헤드와 '전체 보기' 링크를 한 줄에 두는 머리 행 */
.sec-row > .section-head { margin-top: 0; }

/* ---- 본문 위계 4단 (rules/design-tokens.md 2절) ----
   라벨 .eyebrow 14px 700 올리브 → 제목 h2/h3 800 --ink → 리드문 .lede 19~22px 500 --ink
   → 본문 p 17px --ink-soft → 보조 .muted/.note 15~17px --ink-mute
   크기·굵기·색 세 가지를 동시에 바꿔야 위계로 인지된다. 하나만 바꾸면 구분되지 않는다. */
.lede { font-size: var(--fs-body-lg); font-weight: 500; color: var(--ink); line-height: var(--lh-relaxed); }
.muted { color: var(--ink-mute); }
.serif { font-family: var(--font-head); }

/* 아이콘 + 라벨 + 설명 나열 — 연락처·특징 목록.
   about/contact 에 인라인 스타일로 10벌 흩어져 있던 같은 형태를 하나로 모았다. */
.iconlist { display: grid; gap: var(--gap-block); }
.iconlist.cols-2 { grid-template-columns: 1fr 1fr; gap: var(--gap-block) var(--s6); }
.il { display: flex; gap: var(--s3); align-items: flex-start; }
.il > i[data-lucide] { width: 22px; height: 22px; color: var(--olive-deep); flex-shrink: 0; margin-top: 3px; }
.il > .icon-badge { flex-shrink: 0; }
.il b { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--ink); line-height: var(--lh-snug); }
.il p { margin: var(--gap-tight) 0 0; font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-normal); }
@media (max-width: 640px){ .iconlist.cols-2 { grid-template-columns: 1fr; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  padding: 13px 22px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; transition: all var(--dur-fast) var(--ease); white-space: nowrap;
  line-height: 1;
}
.btn i[data-lucide] { width: 17px; height: 17px; }
.btn-primary { background: var(--main); color: #fff; border-color: var(--main); }
.btn-primary:hover { background: var(--main-deep); border-color: var(--main-deep); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-point { background: var(--point); color: var(--point-ink); border-color: var(--point); font-weight: 700; }
.btn-point:hover { background: var(--point-deep); border-color: var(--point-deep); transform: translateY(-1px); box-shadow: var(--sh-point); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--main); color: var(--main); background: var(--main-tint); }
.btn-on-dark { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-on-dark:hover { background: #fff; color: var(--main-deeper); border-color: #fff; }
.btn-lg { padding: 16px 28px; font-size: var(--fs-body); }
.btn:active { transform: scale(0.98); }
.btn-text { background: none; border: none; padding: 0; color: var(--olive-deep); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-text:hover { color: var(--main); gap: 9px; }
.btn-text i[data-lucide] { width: 16px; height: 16px; }

/* ============================================================
   Cards & surfaces
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-card); box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-pad { padding: clamp(20px, 3vw, 32px); }
/* 카드 내부 리듬 — 제목 뒤는 붙이고, 나머지 블록은 한 단계 띄운다 */
.card-pad > * + *              { margin-top: var(--gap-related); }
.card-pad > :is(h3,h4,h5) + *  { margin-top: var(--gap-tight); }
.card-pad > :last-child        { margin-bottom: 0; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line); }

.icon-badge {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--main-tint); color: var(--main); flex-shrink: 0;
}
.icon-badge i[data-lucide] { width: 26px; height: 26px; }
.icon-badge.sm { width: 42px; height: 42px; border-radius: var(--r-md); }
.icon-badge.sm i[data-lucide] { width: 21px; height: 21px; }
.icon-badge.point { background: var(--point-tint); color: var(--point-ink); }
.icon-badge.oat { background: var(--sub-soft); color: var(--main-deep); }
.icon-badge.olive { background: var(--olive-tint); color: var(--olive-deep); }

.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: 600;
  padding: 5px 11px; border-radius: var(--r-pill); background: var(--sub-soft); color: var(--main-deep);
}
.tag.point { background: var(--point); color: var(--point-ink); font-weight: 700; }
.tag.olive { background: var(--olive-tint); color: var(--olive-deep); }
.tag.sample { background: var(--surface-2); color: var(--ink-mute); border: 1px dashed var(--sub-deep); }
.tag.solid { background: var(--main); color: #fff; }

.num-chip {
  font-family: var(--font-head); font-weight: 800; font-size: 15px;
  color: var(--point-ink); background: var(--point);
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--point);
  display: grid; place-items: center; flex-shrink: 0;
}

/* grids */
.grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px){ .g-5, .g-4 { grid-template-columns: repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .g-5,.g-4,.g-3,.g-2 { grid-template-columns: 1fr; } }
/* 2단 나란히 섹션(텍스트+이미지 등) — 데스크톱 2열, 모바일 1열.
   열 비율은 인라인 grid-template-columns로 조정 (모바일에선 !important로 1열 강제) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.6vw, 64px); align-items: center; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr !important; } }

/* ============================================================
   Placeholder image fields (우아한 색면)
   ============================================================ */
.ph {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: var(--sub-soft); color: var(--main-deep);
  border-radius: var(--r-card);
}
.ph::after {
  content: attr(data-label);
  position: absolute; bottom: 12px; left: 14px; right: 14px;
  font-size: var(--fs-caption); font-weight: 500; color: var(--main-deep);
  opacity: 0.62; text-align: left;
}
.ph i[data-lucide] { width: 38px; height: 38px; opacity: 0.5; stroke-width: 1.5; }
.ph.tone-main { background: var(--main-tint); color: var(--main-deep); }
.ph.tone-point { background: var(--point-tint); color: var(--point-ink); }
.ph.tone-olive { background: var(--olive-tint); color: var(--olive-deep); }
.ph.tone-oat { background: var(--sub); color: var(--main-deeper); }
.ph.tone-deep { background: var(--main-deeper); color: #E9EEE9; }
.ph.tone-deep::after { color: #E9EEE9; }
.ph.ratio-1 { aspect-ratio: 1/1; }
.ph.ratio-43 { aspect-ratio: 4/3; }
.ph.ratio-32 { aspect-ratio: 3/2; }
.ph.ratio-169 { aspect-ratio: 16/9; }
.ph.ratio-photo { aspect-ratio: 5/6; }
/* 실제 사진(커밋본 .slot-photo / 관리자 업로드 .slot-img)이 있으면 placeholder 요소를 감춤 */
.ph .slot-img, .ph .slot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.has-img::before, .ph.has-img::after,
.ph.has-img > i, .ph.has-img > svg { display: none; }
/* 관리자 '페이지 이미지'에서 올린 사진의 초점(잘라 보일 위치). --op-pc/--op-mb 는 site.js 가
   슬롯별 저장값(0~100%)으로 넣는다. 모바일(≤640px)은 별도 값, 없으면 PC 값을 상속한다.
   crop:false 자리(파트너 포스터)는 object-fit 이 없어 이 값이 무해하게 무시된다. */
.ph .slot-img, img[data-img-slot] { object-position: var(--op-pc, 50% 50%); }
@media (max-width: 640px){
  .ph .slot-img, img[data-img-slot] { object-position: var(--op-mb, var(--op-pc, 50% 50%)); }
}
/* 사진 설명 — 사진 자리(.ph)를 <figure> 로 감싸고 그 아래 한 줄로 붙인다.
   .ph 안(::after)의 data-label 은 사진이 없을 때만 보이는 '관리자용 자리 이름'이고,
   이쪽은 사진 위에 얹지 않고 방문자에게 늘 보이는 설명이다 — 역할이 달라 따로 둔다. */
.ph-fig { margin: 0; }
.ph-fig figcaption {
  margin-top: var(--gap-tight); font-size: var(--fs-caption);
  color: var(--ink-mute); line-height: var(--lh-normal);
}

/* subtle weave texture for placeholders */
.ph::before {
  content:""; position:absolute; inset:0; opacity:0.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.025) 0 2px, transparent 2px 9px);
}

/* ============================================================
   Navigation
   ============================================================ */
#site-nav { position: sticky; top: 0; z-index: 100; }
/* 2단 헤더 — 상단: 브랜드(법인명) + CTA / 하단: 주 메뉴 */
.nav {
  background: rgba(251,249,244,0.88); backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  /* 아래 메뉴줄(.nav-bar)의 짙은 면이 곧 경계다. 테두리를 더하면
     짙은 띠와 본문 사이에 1px 흰 선이 생겨 헤더가 떠 보인다.
     메뉴줄이 사라지는 모바일에서만 테두리를 되살린다 (아래 900px 분기) */
}
.nav-inner { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--s8);
  display:flex; align-items:center; gap: var(--s6); }
/* 브랜드 줄은 로고(58px)가 위아래로 숨 쉴 자리를 갖는다 — 20/14는 로고가 커진 뒤로 빡빡하다 */
.nav-top .nav-inner { height: auto; padding-top: var(--s6); padding-bottom: var(--s5); justify-content: center; position: relative; }
.nav-top .nav-cta { position: absolute; right: var(--s8); top: 50%; transform: translateY(-50%); }
/* 메뉴 줄 — 딥그린 반전으로 존재감 부여 (칠보문 라이트 패턴) */
.nav-bar { background: var(--main-deeper); background-image: var(--pat-light); background-size: var(--pat-size); }
.nav-bar .nav-inner { height: 60px; justify-content: center; }
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand img { width: 58px; height: 58px; mix-blend-mode: multiply; }
.brand .bt { display: flex; align-items: center; line-height: 1.12; }
.brand .bt b { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; }
/* 법인명의 '참' 한 글자 — 조합 이름의 핵심이라 색으로 집어낸다 */
.brand .bt .cham, #site-footer .cham { color: var(--brand-cham); font-style: normal; }
/* 상단 브랜드: 전체 법인명을 한 줄로 — 작은 화면에서 글자/로고 축소로 한 줄 유지 */
@media (max-width: 900px){
  .brand img { width: 46px; height: 46px; }
  .brand .bt b { font-size: 23px; }
}
@media (max-width: 600px){
  .brand img { width: 38px; height: 38px; }
  .brand .bt b { font-size: 19px; }
  .nav-inner { gap: var(--s4); padding-inline: var(--s5); }
}
@media (max-width: 430px){
  .brand img { width: 32px; height: 32px; }
  .brand .bt b { font-size: 16px; }
  .nav-cta .btn-point { display: none; }  /* 좁은 화면: 상단 CTA는 숨기고 햄버거 메뉴의 신청 버튼 사용 */
  .nav-cta .nav-member { display: none; } /* 로그인 진입점도 같은 이유로 햄버거 메뉴 안에 있다 */
}
@media (max-width: 360px){
  .brand img { width: 28px; height: 28px; }
  .brand .bt b { font-size: 15px; }      /* 13자 법인명 + 햄버거가 320px에 함께 들어가는 한계값 */
}

/* 메뉴 3단 상태 — 기본 / 가리킨 곳 / 현재 페이지.
   호버와 현재 위치를 둘 다 '반투명 흰 면'으로 표시하면(.13 vs .18) 구분되지 않는다.
   → 호버는 '면', 현재 위치는 '옐로우 밑줄 + 굵기'로 종류를 다르게 한다. */
.nav-links { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.nav-item { position: relative; display: flex; }
.nav-item > a {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px; padding: 0 16px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,.76); cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-item > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  border-radius: 2px 2px 0 0; background: var(--point);
  transform: scaleX(0); transform-origin: center bottom;
  transition: transform var(--dur) var(--ease);
}
.nav-item > a:hover { color: #fff; background: rgba(255,255,255,.10); }
.nav-item.active > a { color: #fff; font-weight: 700; background: rgba(255,255,255,.07); }
.nav-item.active > a::after { transform: scaleX(1); }
.nav-item > a i[data-lucide] { transition: transform var(--dur-fast) var(--ease); }
.nav-item:hover > a i[data-lucide] { transform: rotate(180deg); }

.nav-dd {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 212px; background: var(--surface);
  /* 예전에는 위쪽에 3px 포인트 선을 두고 그 모서리만 각지게 뒀다. 선이 굵어 상자보다
     먼저 눈에 들었고 라운드와도 어긋났다. 메뉴와의 연결은 위치와 그림자가 이미 말해 주므로,
     테두리는 한 겹으로 두르고 상자를 온전히 둥글린다. 강조는 안쪽 제목(.dd-head)이 맡는다. */
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px;
  opacity: 0; visibility: hidden; transition: all var(--dur-fast) var(--ease); pointer-events: none;
}
.nav-item:hover .nav-dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* 하위 목록이 어느 메뉴에 속하는지 — 목록만 떠 있으면 소속을 알 수 없다 */
.nav-dd .dd-head {
  display: block; padding: 8px 13px 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-kicker);
  color: var(--point-deep);   /* 위쪽 굵은 선을 걷어낸 자리 — 강조는 이 글자가 맡는다 */
}
.nav-dd a {
  display: block; padding: 9px 13px; border-radius: var(--r-sm); font-size: var(--fs-sm);
  color: var(--ink-soft); font-weight: 500; white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.nav-dd a:hover { background: var(--main-tint); color: var(--ink); border-left-color: var(--point); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-admin { font-size: var(--fs-caption); color: var(--ink-mute); font-weight: 600; padding: 8px; display:inline-flex; align-items:center; gap:5px; }
.nav-admin:hover { color: var(--main); }
.nav-admin i[data-lucide]{ width:15px; height:15px; }
.nav-toggle { display:none; }

@media (max-width: 1080px){
  .nav-item > a { padding: 10px 10px; font-size: 14px; }  /* 좁은 데스크톱: 7개 메뉴 한 줄 유지 */
}
@media (max-width: 900px){
  :root { --nav-h: 88px; }        /* 하단 메뉴줄이 사라지므로 헤더 높이 재정의 */
  .nav-bar { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav { border-bottom: 1px solid var(--line-soft); }  /* 짙은 메뉴줄이 없어 경계가 필요하다 */
  /* 브랜드를 가운데 두고 CTA를 absolute 로 띄우면, 좁은 화면에서 법인명 끝 글자가
     햄버거 버튼 밑으로 들어간다. 흐름 배치로 바꿔 두 요소가 서로의 폭을 인지하게 한다 */
  .nav-top .nav-inner { justify-content: space-between; }
  .nav-top .nav-cta { position: static; transform: none; }
}

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(42,39,35,0.42); backdrop-filter: blur(3px);
}
.mobile-menu.open { display: block; }
.mobile-menu .mm-head { display:flex; align-items:center; justify-content:space-between; padding: 18px 22px; }
.mobile-menu .mm-head b { font-family: var(--font-head); font-size: 18px; color:#fff; }
.mobile-menu .mm-head button { background:none; border:none; color:#fff; cursor:pointer; padding:6px; }
.mobile-menu .mm-head button i[data-lucide]{ width:24px; height:24px; }
.mm-body {
  position:absolute; top:0; right:0; bottom:0; width: min(340px, 86vw);
  background: var(--surface); box-shadow: var(--sh-lg); padding: 14px 18px 28px; overflow-y:auto;
  display:flex; flex-direction:column;
}
.mm-body .mm-head { padding: 6px 0 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.mm-body .mm-head b { color: var(--ink); }
.mm-body .mm-head button { color: var(--ink); }
/* 모바일 메뉴 최상단 전화 버튼 — 메뉴가 길어 스크롤 없이 닿는 위치에 둔다 */
.mm-call {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--point-tint); border: 1px solid var(--point);
}
.mm-call i[data-lucide] { width: 22px; height: 22px; color: var(--point-ink); flex-shrink: 0; }
.mm-call b { display: block; font-family: var(--font-head); font-size: 21px; color: var(--ink); line-height: 1.2; }
.mm-call small { display: block; margin-top: 3px; font-size: var(--fs-caption); color: var(--ink-mute); }
/* 대분류(mm-top)와 하위 항목(mm-sub)의 차이를 크기·굵기·색·들여쓰기 네 가지로 동시에 준다.
   세로로 긴 목록에서는 들여쓰기 선이 있어야 어디까지가 한 묶음인지 보인다. */
.mm-group { padding: 2px 0 10px; }
.mm-group + .mm-group { border-top: 1px solid var(--line-soft); }
.mm-top { display:block; font-family: var(--font-head); font-weight:800; font-size:18px; color: var(--ink); padding: 14px 6px 8px; }
.mm-top.active { color: var(--brand-cham); }
.mm-sub { display:flex; flex-direction:column; margin-left: 6px; padding-left: 12px; border-left: 2px solid var(--line-soft); }
.mm-sub a { font-size: var(--fs-sm); color: var(--ink-mute); padding: 8px 8px; }
.mm-sub a:hover { color: var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; padding-top: clamp(40px, 5.2vw, 80px); padding-bottom: var(--sec-pad); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s16); align-items: center; }
.hero h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.02em; }
.hero .sub { margin-top: var(--s6); font-size: var(--fs-body-lg); color: var(--ink-soft); line-height: var(--lh-relaxed); max-width: 30em; }
.hero-cta { display: flex; gap: var(--s3); margin-top: var(--s10); flex-wrap: wrap; }
.hero .pill-row { margin-top: var(--gap-group); }
.hero-logo { display: grid; place-items: center; }
.hero-logo img { width: min(380px, 90%); mix-blend-mode: multiply; }
@media (max-width: 900px){ .hero-grid { grid-template-columns: 1fr; gap: var(--s8); } .hero-logo { order: -1; } .hero-logo img{ width: 240px; } }

/* deep band */
.band-deep { background: var(--main-deeper); color: #EAEFEA; position: relative; overflow: hidden; }
.band-deep h2, .band-deep h3 { color: #fff; }
.band-deep .lede { color: rgba(255,255,255,0.88); }
/* 어두운 패널 위 라벨: 올리브(#56683E)는 2.2:1로 판독 불가 → 옐로우(7.8:1)로 반전 */
.band-deep .eyebrow, .page-hero.deep .eyebrow { color: var(--point); }
.band-deep .eyebrow::before, .band-deep .eyebrow.center::after,
.page-hero.deep .eyebrow::before, .page-hero.deep .eyebrow.center::after { background: var(--point); }
.band-sage .eyebrow { color: #fff; }
.band-sage .eyebrow::before, .band-sage .eyebrow.center::after { background: var(--point); }
.band-sage { background: var(--olive); color: #fff; }
.band-sage h2, .band-sage h3 { color: #fff; }
.band-sage .lede { color: rgba(255,255,255,0.92); }
.band-sage .note { color: rgba(255,255,255,0.82); }
.band-oat { background: var(--sub-soft); }
.band-tint { background: var(--surface-2); }

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field label .req { color: var(--danger); margin-left: 3px; }
/* 필수·선택 배지. 칸마다 붙이지 않는다 — 아홉 번 반복되면 표시가 시끄러워
   오히려 눈에 안 들어온다. 그 일은 카드 제목이 한다(signup 의 '필수 정보'·'선택 정보').
   한 묶음 안에 둘이 섞여 카드로 나눌 수 없는 곳(약관 동의)에서만 줄마다 적는다. */
.tag-req, .tag-opt {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 700; line-height: 1.7; vertical-align: middle;
}
.tag-req { color: var(--danger); background: var(--danger-tint); }
.tag-opt { color: var(--ink-mute); background: var(--surface-2); }
/* 비운 채 보내려 한 필수 칸 — 어디가 문제인지 칸에서 바로 보이게 한다 */
.field input.bad, .field select.bad, .field textarea.bad {
  border-color: var(--danger); background: var(--danger-tint);
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--fs-body); color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; line-height: var(--lh-normal); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--main); box-shadow: 0 0 0 3px var(--main-tint);
}
.field .hint { font-size: var(--fs-caption); color: var(--ink-mute); }
/* 폼 안의 글은 span 이라 p 에 걸어 둔 text-wrap 에서 빠져 있었다. 칸이 좁아
   마지막 줄에 한 낱말만 남기 쉽다 — '… 중 두 가지 / 이상' 처럼.
   balance 는 쓰지 않는다: 줄 길이를 맞추려다 '·기호' 처럼 가운뎃점을 줄 앞으로 보낸다. */
.field label, .field .hint { text-wrap: pretty; }
/* 칸 하나 + 옆의 버튼(예: 주소 찾기). 좁은 화면에서도 버튼 글자가 접히지 않게
   버튼은 줄이지 않고, 칸이 남는 자리를 가져간다. */
.field-row { display: flex; gap: 8px; align-items: stretch; }
.field-row > input { flex: 1 1 auto; min-width: 0; }
.field-row > .btn { flex: 0 0 auto; white-space: nowrap; padding: 0 16px; }
/* 좁은 화면에서는 버튼을 아래로 내린다. 나란히 두면 주소 칸이 175px 까지 줄어
   적은 주소가 잘려 보인다. 내려두면 누르기도 쉽다(폭 전체가 터치 영역). */
@media (max-width: 640px) {
  .field-row { flex-wrap: wrap; }
  .field-row > input { flex: 1 0 100%; }
  .field-row > .btn { flex: 1 0 100%; min-height: 44px; }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px){ .form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Tables
   ============================================================ */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.table thead th { background: var(--main-tint); color: var(--main-deep); font-weight: 700; font-size: var(--fs-caption); letter-spacing: 0.02em; }
.table thead th:first-child { border-top-left-radius: var(--r-sm); }
.table thead th:last-child { border-top-right-radius: var(--r-sm); }
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); }
/* 좁은 화면에서 열이 5개쯤 되면 조금씩 넘쳐 마지막 열이 화면 밖으로 밀린다.
   가로 스크롤로 두면 정작 중요한 마지막 열(상태·가격)을 못 본다 — 여백을 줄여 담는다. */
@media (max-width: 520px){
  .table { font-size: 13px; }
  .table th, .table td { padding: 10px 8px; }
  .table .tag { padding: 4px 8px; font-size: 11.5px; }
}

/* ============================================================
   Footer
   ============================================================ */
/* margin-top 없음 — 앞 섹션이 색상 밴드일 때 64px 흰 띠가 생겼음.
   섹션은 이미 --sec-pad 만큼의 하단 여백을 갖고 있어 별도 간격이 필요 없다. */
#site-footer { background: var(--main-deeper); color: rgba(255,255,255,0.75); position: relative; }
.footer-inner { width:100%; max-width: var(--maxw); margin-inline:auto; padding: clamp(44px, 5.6vw, 80px) var(--gutter) clamp(28px, 3vw, 40px); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s12); }
.footer-brand img { width: 56px; height: 56px; background: var(--bg); border-radius: 12px; padding: 5px; }
.footer-brand b { font-family: var(--font-head); color: #fff; font-size: var(--fs-h5); display:block; margin: var(--s4) 0 var(--s2); }
.footer-brand p { font-size: var(--fs-sm); color: rgba(255,255,255,0.62); margin: 0; max-width: 30em; line-height: var(--lh-relaxed); }
.footer-col h6 { margin: 0 0 var(--s4); font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); font-family: var(--font-body); font-weight: 700; }
.footer-col a, .footer-col span { display: block; font-size: var(--fs-sm); color: rgba(255,255,255,0.72); margin-bottom: 11px; }
.footer-col a:hover { color: #fff; }
.footer-info { font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: rgba(255,255,255,0.6); }
.footer-info b { color: rgba(255,255,255,0.85); font-weight: 600; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--s12); padding-top: var(--s6);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-caption); color: rgba(255,255,255,0.5); }
.foot-meta a { color: rgba(255,255,255,0.72); }
.foot-meta a:hover { color: #fff; text-decoration: underline; }
.foot-meta .admin-link { color: rgba(255,255,255,0.34); transition: color var(--dur-fast) var(--ease); }
.foot-meta .admin-link:hover { color: var(--sub); text-decoration: underline; }
@media (max-width: 820px){
  .footer-top { grid-template-columns: 1fr; gap: var(--s8); }
  /* 손가락 터치 영역 확보 — 데스크톱의 17px 링크는 모바일에서 누르기 어렵다 */
  .footer-col a { padding-block: 9px; margin-bottom: 0; }
  .footer-col span { margin-bottom: 8px; }
  .foot-meta a { display: inline-block; padding-block: 8px; }
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* JS가 없거나 탭이 throttle될 때를 대비한 기본값 — 항상 보인다.
   실제 등장 연출은 파일 하단 '리치 reveal' 블록에서 html.js 조건으로 켠다. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* 화면에는 감추고 스크린리더에만 읽히는 제목 — 섹션 랜드마크 라벨용 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* breadcrumb / page header */
.page-hero { padding-top: clamp(34px, 4.4vw, 64px); padding-bottom: clamp(28px, 3.4vw, 48px); background: var(--sub-soft); border-bottom: 1px solid var(--line-soft); }
.page-hero.deep { background: var(--main-deeper); color: #EAEFEA; border-bottom: none; }
.page-hero.deep h1 { color: #fff; }
.page-hero.deep .lede { color: rgba(255,255,255,0.88); }
/* 페이지 헤더는 제목 묶음이라 본문 리듬(--gap-group)이 아니라 '관련' 간격을 쓴다 */
.page-hero .wrap > * + * { margin-top: var(--gap-related); }
.page-hero .wrap > .lede { margin-top: var(--gap-related); }
.crumb { font-size: var(--fs-caption); color: var(--ink-mute); display: flex; gap: 8px; align-items: center; margin-bottom: 0; }
/* 캡션 크기라 글자 높이가 24px — 터치 최소 32px를 채우되 줄 높이는 그대로 두려고 음수 마진으로 상쇄한다 */
.crumb a { padding-block: 5px; margin-block: -5px; }
.page-hero.deep .crumb { color: rgba(255,255,255,0.6); }
.crumb i[data-lucide]{ width: 13px; height: 13px; }
.page-hero h1 { margin-top: var(--gap-related); }
.page-hero .lede { max-width: 46em; }

/* divider */
.hr { height: 1px; background: var(--line-soft); border: none; margin: var(--s12) 0; }

/* stat / pill row */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pill { display:inline-flex; align-items:center; gap:7px; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-soft); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); box-shadow: var(--sh-xs); }
.pill i[data-lucide]{ width:16px; height:16px; color: var(--main); }

/* anchor offset for sticky nav */
[id]{ scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ============================================================
   전통 문양 — 칠보문(七寶紋) 겹원 패턴 (배경 단색면에 은은하게)
   강도 토글용 클래스: html.pat-off / html.pat-strong (기본=은은)
   ============================================================ */
:root {
  --pat-size: 54px;
  --pat-dark:  url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%3E%3Cg%20fill='none'%20stroke='rgba(61,55,40,0.028)'%20stroke-width='1.1'%3E%3Ccircle%20cx='0'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='0'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='27'%20cy='27'%20r='27'/%3E%3C/g%3E%3C/svg%3E");
  --pat-light: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.045)'%20stroke-width='1.1'%3E%3Ccircle%20cx='0'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='0'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='27'%20cy='27'%20r='27'/%3E%3C/g%3E%3C/svg%3E");
}
html.pat-strong {
  --pat-dark:  url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%3E%3Cg%20fill='none'%20stroke='rgba(61,55,40,0.12)'%20stroke-width='1.1'%3E%3Ccircle%20cx='0'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='0'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='27'%20cy='27'%20r='27'/%3E%3C/g%3E%3C/svg%3E");
  --pat-light: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.16)'%20stroke-width='1.1'%3E%3Ccircle%20cx='0'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='0'%20r='27'/%3E%3Ccircle%20cx='0'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='54'%20cy='54'%20r='27'/%3E%3Ccircle%20cx='27'%20cy='27'%20r='27'/%3E%3C/g%3E%3C/svg%3E");
}
html.pat-off { --pat-dark: none; --pat-light: none; }

/* light backgrounds → dark thread */
body { background-image: var(--pat-dark); background-size: var(--pat-size); background-attachment: fixed; }
.band-oat, .band-tint, .page-hero:not(.deep) { background-image: var(--pat-dark); background-size: var(--pat-size); }
/* dark / brand backgrounds → light thread
   .page-hero.deep 만 예외 — 문양이 천천히 움직여야 해서 ::before 레이어로 분리돼 있다(모션 8번) */
.band-deep, .band-sage, #site-footer { background-image: var(--pat-light); background-size: var(--pat-size); }

/* ============================================================
   섹션 아키타입 — 내용 성격별로 형태를 달리해 단조로움을 없앤다.
   (기존 .card 그리드 하나로 모든 섹션을 찍어내던 문제 해결)
   ============================================================ */

/* 1. 사업 축 진입 — 사진 위 라벨. 홈에서 '무엇을 하는 곳인가'를 3초에 전달 */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.pillar {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-lg);
  min-height: 380px; color: #fff; isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30,28,24,.15) 0%, rgba(30,28,24,.55) 52%, rgba(30,28,24,.88) 100%);
}
.pillar-body { position: absolute; inset: auto 0 0 0; padding: var(--s6) var(--s6) var(--s8); }
.pillar .p-no { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--point); letter-spacing: .1em; }
.pillar h3 { color: #fff; margin: 8px 0 10px; font-size: 25px; }
.pillar p { color: rgba(255,255,255,.86); margin: 0 0 16px; font-size: var(--fs-sm); line-height: 1.65; }
.pillar .p-go { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 700; color: var(--point); }
.pillar:hover .p-go { gap: 11px; }
@media (max-width: 900px){ .pillars { grid-template-columns: 1fr; } .pillar { min-height: 300px; } }

/* 2. 공정 레일 — 순서가 핵심인 내용(식초 제조, 발효 단계)을 선으로 연결해 보여준다 */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); position: relative; counter-reset: rail; }
.rail::before {
  content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--sub-deep) 0 8px, transparent 8px 16px);
}
.rail-step { position: relative; text-align: center; }
.rail-step .r-no {
  width: 54px; height: 54px; margin: 0 auto var(--s4); border-radius: 50%;
  background: var(--point); color: var(--point-ink);
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 19px;
  border: 5px solid var(--bg); box-shadow: 0 0 0 1px var(--sub-deep);
}
.rail-step h4 { font-size: var(--fs-h5); margin-bottom: 8px; }
.rail-step p { color: var(--ink-mute); font-size: var(--fs-sm); margin: 0; line-height: 1.7; }
.rail-step .r-meta { display: inline-block; margin-top: 10px; font-size: var(--fs-caption); font-weight: 700; color: var(--olive-deep); background: var(--olive-tint); padding: 4px 10px; border-radius: var(--r-pill); }
@media (max-width: 900px){
  .rail { grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s4); }
  .rail::before { display: none; }
}
@media (max-width: 520px){ .rail { grid-template-columns: 1fr; } }

/* 3. 인용 — 대표 말씀·브랜드 문장을 본문과 다른 무게로 */
.quote { max-width: 30em; margin-inline: auto; text-align: center; }
.quote blockquote {
  margin: 0; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; letter-spacing: -0.01em;
}
.quote .q-mark { display: block; font-size: 46px; line-height: 1; color: var(--point); margin-bottom: 10px; }
.quote cite { display: block; margin-top: var(--s6); font-style: normal; font-size: var(--fs-sm); color: var(--ink-mute); }

/* 4. 칩 그리드 — 항목이 많고 각각은 짧은 목록(강의처, 라인업) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips .chip {
  padding: 9px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
}
.chips .chip.on { background: var(--point); border-color: var(--point); color: var(--point-ink); font-weight: 700; }

/* 5. 에디토리얼 블록 — 사진과 글을 좌우 교차 배치 (긴 설명형 내용) */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.6vw, 64px); align-items: center; }
.spec + .spec { margin-top: clamp(36px, 4.6vw, 64px); }
.spec:nth-child(even) .spec-media { order: -1; }
.spec-media > * + * { margin-top: var(--gap-block); }
.spec-media img { width: 100%; border-radius: var(--r-lg); display: block; }
@media (max-width: 860px){
  .spec { grid-template-columns: 1fr; gap: var(--s8); }
  .spec:nth-child(even) .spec-media { order: 0; }
  .spec + .spec { margin-top: var(--s12); }
}

/* 6. 페이지 내 섹션 이동 바 — 긴 페이지에서 현재 위치와 목차를 고정 노출 */
.jump { position: sticky; top: var(--nav-h); z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.jump-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.jump-inner::-webkit-scrollbar { display: none; }
.jump a {
  white-space: nowrap; padding: 9px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
}
.jump a:hover { background: var(--main-tint); color: var(--ink); }
.jump a.on { background: var(--point); color: var(--point-ink); font-weight: 700; }
@media (max-width: 860px){ .jump { top: 80px; } }

/* 확정 판매가가 없는 품목 — 숫자 대신 '가격 문의' */
.price-ask { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--olive-deep); }

/* 제품 카드 본문 — 사진 아래 태그·품명·가격 */
.prod-card-body { padding: var(--s5); }
.prod-card-body h3 { margin: var(--gap-tight) 0 4px; font-size: var(--fs-h5); font-weight: 700; }
.prod-card-body p { margin: 0; font-size: var(--fs-sm); }

/* 제품 실사(병 사진) — 세로로 긴 피사체라 잘라내지 않고 여백 위에 얹는다 */
.prod-photo {
  width: 100%; aspect-ratio: 1/1; object-fit: contain;
  background: #fff; padding: 4%;   /* 원본이 흰 배경 스튜디오컷이라 흰 여백이 자연스럽게 이어진다 */
}

/* ============================================================
   퀵메뉴 타일 — KB식 '무엇을 찾으세요?' 진입 그리드
   ============================================================ */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.quick-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s8) var(--s4); text-align: center;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quick-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--point); }
.quick-item .qi-ico {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--point-tint); color: var(--point-ink);
}
.quick-item:hover .qi-ico { background: var(--point); }
.quick-item .qi-ico i[data-lucide] { width: 28px; height: 28px; stroke-width: 1.6; }
.quick-item .qi-name { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h5); color: var(--ink); }
.quick-item .qi-desc { font-size: var(--fs-caption); color: var(--ink-mute); margin: 0; }
@media (max-width: 860px){ .quick { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   신뢰 스트립 — 인증·등록 사실 나열 (KB식 근거 제시)
   ============================================================ */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.trust-cell { padding: var(--s6) var(--s5); border-right: 1px solid var(--line-soft); text-align: center; }
.trust-cell:last-child { border-right: none; }
.trust-cell .t-num { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--ink); line-height: 1.1; }
.trust-cell .t-num em { font-style: normal; font-size: 17px; color: var(--ink-soft); margin-left: 2px; }
.trust-cell .t-label { font-size: var(--fs-sm); color: var(--ink-mute); margin: 6px 0 0; }
@media (max-width: 860px){
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust-cell:nth-child(2n){ border-right: none; }
  .trust-cell:nth-child(-n+2){ border-bottom: 1px solid var(--line-soft); }
}

/* ============================================================
   사실 목록 (fact list) — 라벨/값 2열, 정보 밀도 높은 안내표
   ============================================================ */
/* 1열로 접히는 기준은 뷰포트가 아니라 이 표가 놓인 그릇의 폭이다.
   같은 표가 본문 전폭(880px)에도, 2열 카드 안(약 300px)에도 들어간다.
   뷰포트 기준으로 접으면 넓은 화면의 좁은 카드 안에서 180px 라벨 열이 그대로 남아
   내용 최소폭이 카드를 밀어내고 페이지가 가로로 넘친다. */
/* 라벨 열을 **가장 긴 라벨에 맞춰** 잡는다.
   예전에는 행마다 따로 그리드를 만들고 라벨 열을 180px 로 못박았다. 줄을 맞추려면
   그 방법뿐이었지만, 실제 라벨은 길어야 105px 이라 뒤에 빈 자리가 70px 넘게 남았다.
   .facts 를 하나의 그리드로 만들고 각 행을 display:contents 로 펼치면,
   모든 라벨이 같은 열을 공유하므로 max-content 로도 줄이 맞는다. */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s8);
  border-top: 2px solid var(--ink); container-type: inline-size; }
/* 행은 부모의 열을 그대로 물려받는(subgrid) 한 줄짜리 그리드다.
   예전에는 .fact 를 display:contents 로 지우고 라벨 칸·값 칸에 각각 밑줄을 그었는데,
   두 칸은 각자 제 내용만큼만 높아서(값이 두 줄이면 라벨 칸이 한 줄만큼 낮다)
   같은 행의 밑줄이 서로 어긋났다. 구분선을 행 하나에 그으면 어긋날 수가 없다.
   라벨과 값의 첫 줄 기준선은 align-items:baseline 이 맞춘다. */
.facts .fact { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: baseline; border-bottom: 1px solid var(--line-soft); }
.facts .fact dt, .facts .fact dd { padding: 16px 4px; margin: 0; }
.facts .fact dt { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); white-space: nowrap; }
.facts .fact dd { color: var(--ink-soft); }
/* 좁으면 라벨을 값 위로 올린다. 라벨 열이 값 자리를 먹는 것보다 낫다.
   열을 접는 쪽은 .facts 가 아니라 행이다 — 컨테이너 질의는 컨테이너 자신에게는
   걸리지 않으므로 `.facts { grid-template-columns: 1fr }` 은 영영 적용되지 않는다.
   행은 .facts 의 자손이라 질의를 받는다. 행이 부모 열 전체를 차지하고 있으니
   행 안의 열만 하나로 접으면 라벨이 값 위로 올라간다. */
@container (max-width: 420px){
  .facts .fact { grid-template-columns: 1fr; }
  .facts .fact dt { padding-bottom: 0; white-space: normal; }
  .facts .fact dd { padding-top: 4px; }
}

/* ============================================================
   등록증 — 축소본과 기재 내용을 나란히
   ============================================================ */
/* 문서는 확인하러 오는 것이지 읽으며 지나가는 것이 아니다.
   그래서 화면에는 작게 두고, 누르면 모달에서 원본 크기로 편다(site.js openDoc).
   기재 내용을 옆에 글자로도 적는 이유: 그림이 안 뜨거나 화면낭독기를 쓰는 손님도 읽어야 한다. */
/* 3:7 — 증서는 '있다'는 표시이고 읽는 것은 옆의 글이다. 좁은 화면에서도 세로로 접지 않는다:
   접으면 축소본이 화면 폭을 다 먹어 문서가 본문 행세를 한다 */
.cert { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--gap-related); align-items: start; }
/* 아래 띠는 화면 폭이 아니라 '이 축소본이 몇 px 인가'를 보고 줄여야 한다 —
   같은 390px 화면에서도 카드 폭에 따라 축소본 폭이 달라진다.
   질의를 받는 쪽은 자손(.cert-zoom)이다. 컨테이너는 자기 자신을 질의하지 못한다 */
.cert-thumb { display: block; position: relative; border-radius: var(--r-sm); overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cert-thumb:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
/* height:auto 를 빠뜨리면 HTML 의 height 속성(원본 높이)이 그대로 남아 그림이 길게 늘어난다.
   그 속성은 그림이 오기 전에 자리를 잡아 두려고 적은 것이지 실제 크기가 아니다 */
.cert-thumb img { width: 100%; height: auto; display: block; }
/* 알림 띠는 그림 위가 아니라 그림 아래에 붙는다 — 위에 얹으면 직인·발급기관을 가린다.
   늘 보이게 두는 이유: 호버로만 알리면 손가락으로 쓰는 손님에게는 없는 것과 같다 */
.cert-thumb .cert-zoom { display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; background: var(--surface-2); border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: var(--fs-caption); font-weight: 700; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cert-thumb:hover .cert-zoom { background: var(--main-tint); color: var(--main); }
/* 선택자를 `i[data-lucide]` 로 쓰지 않는다 — lucide 는 `<i>` 를 `<svg>` 로 **교체**하므로
   화면이 뜬 뒤에는 `<i>` 가 없다. 속성만으로 고른다 */
.cert-thumb .cert-zoom [data-lucide] { width: 15px; height: 15px; }
/* 폭이 카드의 3할뿐이라 좁은 화면에서는 글자와 아이콘이 함께 설 자리가 없다.
   남길 것은 글자다 — 돋보기만 남으면 무엇이 열리는지 알 수 없다 */
@container (max-width: 150px){
  .cert-thumb .cert-zoom { gap: 0; padding: 8px 4px; }
  .cert-thumb .cert-zoom [data-lucide] { display: none; }
}
/* 카드 안이라 .stack 의 덩어리 간격(44px)은 넓다 — 한 덩어리로 읽히게 문단 간격을 쓴다 */
.cert > div > * + * { margin-top: var(--gap-related); }
.cert > div > .eyebrow + h3 { margin-top: var(--gap-tight); }
@media (min-width: 700px){ .cert { gap: var(--gap-group); } }
/* 모달 안의 원본 — 세로로 긴 문서라 화면 높이를 넘지 않게 묶는다.
   폭을 100% 로 고정하면 높이 제한에 걸린 그림 좌우로 빈 띠가 남는다 → 폭은 내용에 맡기고 가운데 세운다 */
/* 62vh — 남는 30vh 가 머리글과 아래 링크 자리다. 여기서 더 키우면 대화상자(92vh)를 넘겨
   그림 아래가 스크롤 안으로 숨는다 */
.doc-full { max-width: 100%; max-height: 62vh; width: auto; height: auto; display: block; margin-inline: auto;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); }
.doc-note { text-align: center; }
.doc-note a { display: inline-flex; align-items: center; gap: 6px; color: var(--main); font-weight: 700; }
.doc-note [data-lucide] { width: 15px; height: 15px; }

/* ============================================================
   가격표 — 실제 판매가 고지용 표
   ============================================================ */
/* auto 레이아웃은 남는 폭을 '내용이 넓은 열'에 비례 배분해 품목/용량 사이가 크게 벌어진다.
   → fixed 레이아웃 + 아래 열 너비로 고정하고, 남는 폭은 우측 정렬된 판매가 열이 흡수한다. */
.ptable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); }
.ptable col.c-cat   { width: 14%; }
.ptable col.c-item  { width: 32%; }
.ptable col.c-vol   { width: 20%; }
.ptable col.c-price { width: 34%; }
/* 구분 열이 없는 표(식초 페이지)는 품목이 그만큼 넓어진다 */
.ptable:not(:has(col.c-cat)) col.c-item { width: 46%; }
.ptable caption { text-align: left; font-size: var(--fs-caption); color: var(--ink-mute); padding-bottom: 10px; }
.ptable th, .ptable td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; }
@media (max-width: 640px){
  .ptable { font-size: 13.5px; }
  .ptable th, .ptable td { padding: 11px 7px; }
  /* 좁은 화면에서는 판매가 열의 여유 폭을 줄여 네 열이 모두 보이게 한다.
     가로 스크롤로 두면 정작 가장 중요한 '판매가'가 화면 밖으로 밀려난다. */
  .ptable col.c-cat   { width: 20%; }
  .ptable col.c-item  { width: 32%; }
  .ptable col.c-vol   { width: 24%; }
  .ptable col.c-price { width: 24%; }
  .ptable:not(:has(col.c-cat)) col.c-item { width: 50%; }
}
.ptable thead th { background: var(--main-tint); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
.ptable td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.ptable tbody tr:hover { background: var(--point-tint); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   파트너 스트립 (홈) — 가로형 로고 무한 슬라이드 (좌측 방향)
   ============================================================ */
.partners { padding-block: var(--s12); border-block: 1px solid var(--line-soft); background: var(--surface); }
.partners-head { text-align: center; margin-bottom: var(--s8); }
.partners-head .eyebrow { justify-content: center; }
.partners-head h2 { margin-top: var(--gap-related); }
.partners-head p { margin: var(--gap-tight) 0 0; color: var(--ink-mute); font-size: var(--fs-sm); }
.partners-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-track { display: flex; width: max-content; animation: partnersScroll var(--pt-dur, 36s) linear infinite; }
.partners-marquee:hover .partners-track { animation-play-state: paused; }
@keyframes partnersScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .partners-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.partners-track .pt-half { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.partner-item { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 76px; padding: 6px 10px; border-radius: var(--r-md); transition: transform var(--dur) var(--ease); }
a.partner-item:hover { transform: translateY(-2px); }
.partner-item img { height: 54px; width: auto; max-width: 260px; object-fit: contain; mix-blend-mode: multiply; }
.partner-item .p-fallback {
  display: inline-flex; align-items: center; height: 54px; padding: 0 26px; border-radius: var(--r-md);
  background: var(--main-tint); color: var(--main-deep); font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap;
}
.partners-empty { text-align:center; color: var(--ink-mute); font-size: var(--fs-sm); width:100%; padding: 20px; }

/* ============================================================
   모달 (신청·주문·문의) — 기본은 보이게, 모션은 추가 효과
   ============================================================ */
.modal-root { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal-root.open { display: block; }
.modal-dim { position: absolute; inset: 0; background: rgba(42,39,35,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 94vw); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  border: 1px solid var(--line-soft);
}
@media (prefers-reduced-motion: no-preference){
  .modal-root.open .modal-dim { animation: fadeIn var(--dur) var(--ease) both; }
  .modal-root.open .modal-dialog { animation: modalIn var(--dur) var(--ease) both; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 16px; }
.modal-head .eyebrow { margin-bottom: 8px; }
.modal-head h3 { font-size: 24px; }
.modal-head p { margin: 8px 0 0; color: var(--ink-mute); font-size: var(--fs-sm); }
.modal-close { flex-shrink: 0; background: var(--surface-2); border: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); transition: background var(--dur-fast) var(--ease); }
.modal-close:hover { background: var(--sub); color: var(--ink); }
.modal-close i[data-lucide]{ width: 20px; height: 20px; }
.modal-body { padding: 8px 28px 28px; }
.modal-foot { display: flex; gap: 12px; margin-top: 24px; }
.modal-foot .btn { flex: 1; }
.modal-success { text-align: center; padding: 24px 28px 36px; }
.modal-success .ok-ring { width: 72px; height: 72px; border-radius: 50%; background: var(--main-tint); color: var(--main); display: grid; place-items: center; margin: 0 auto 18px; }
.modal-success .ok-ring i[data-lucide]{ width: 36px; height: 36px; }
.modal-note { background: var(--sub-soft); border-radius: var(--r-md); padding: 12px 16px; font-size: var(--fs-caption); color: var(--main-deep); margin-top: 18px; display: flex; gap: 8px; align-items: flex-start; }
.modal-note i[data-lucide]{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   내비게이션 드롭다운 — 호버 브리지 (서브메뉴로 이동해도 유지)
   ============================================================ */

/* ============================================================
   Top 이동 플로팅 버튼
   ============================================================ */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--main-deep); box-shadow: var(--sh-md);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background var(--dur-fast), color var(--dur-fast);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--main); color: #fff; border-color: var(--main); }
.to-top i[data-lucide]{ width: 22px; height: 22px; }

/* ============================================================
   개인정보 동의 박스 (신청·주문·문의 공통)
   ============================================================ */
.consent-box { border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 14px; overflow: hidden; background: var(--surface); }
.consent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--surface-2); }
.consent-head label { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: var(--ink); }
.consent-head input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--main); cursor: pointer; flex-shrink: 0; }
.consent-toggle { background: none; border: none; color: var(--ink-mute); font: inherit; font-size: var(--fs-caption); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.consent-toggle:hover { color: var(--main); }
.consent-toggle i[data-lucide]{ width: 14px; height: 14px; transition: transform var(--dur-fast); }
.consent-toggle.open i[data-lucide]{ transform: rotate(180deg); }
.consent-body { padding: 13px 16px; font-size: var(--fs-caption); color: var(--ink-soft); line-height: 1.75; white-space: pre-line; border-top: 1px solid var(--line-soft); max-height: 190px; overflow-y: auto; }
button[type=submit]:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ============================================================
   무통장입금 안내 박스
   ============================================================ */
.pay-box { margin-top: 16px; border: 1.5px solid var(--sub-deep); background: var(--sub-soft); border-radius: var(--r-md); padding: 15px 17px; font-size: var(--fs-sm); }
.pay-box > b { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--main-deeper); margin-bottom: 10px; }
.pay-box > b i[data-lucide]{ width: 16px; height: 16px; }
.pay-row { display: flex; gap: 14px; padding: 6px 0; border-bottom: 1px dashed var(--sub-deep); }
.pay-row:last-of-type { border-bottom: none; }
.pay-row > span:first-child { flex-shrink: 0; width: 84px; color: var(--ink-mute); font-size: var(--fs-caption); padding-top: 1px; }
.pay-row > span:last-child, .pay-row > b { flex: 1; color: var(--ink); }
/* 금액 옆의 짧은 곁말('택배비 5,000원 포함') — 값 칸의 flex:1 을 물려받으면 금액을 밀어낸다 */
.pay-row > span.pay-note-inline { flex: 0 1 auto; align-self: center; width: auto;
  font-size: var(--fs-micro); color: var(--ink-mute); padding-top: 0; }
/* ============================================================
   장바구니
   ============================================================ */
.nav-cart { position: relative; padding: 11px 13px; }
.nav-cart-n { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--point); color: var(--point-ink); font-size: 11px; font-weight: 800; line-height: 1; }
.cart-list { display: flex; flex-direction: column; }
.cart-row { display: grid; grid-template-columns: 1fr auto auto 32px; gap: var(--s3);
  align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
.cart-row:last-child { border-bottom: none; }
.cart-row.off { opacity: 0.55; }
.cart-name b { display: block; font-size: var(--fs-sm); }
.cart-opt, .cart-bad { display: block; font-size: var(--fs-caption); color: var(--ink-mute); margin-top: 2px; }
.cart-bad { color: var(--danger); font-weight: 700; }
.cart-sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-del { border: none; background: none; cursor: pointer; color: var(--ink-faint); padding: 6px;
  border-radius: var(--r-xs); transition: color var(--dur-fast) var(--ease); }
.cart-del:hover { color: var(--danger); }
.cart-del i[data-lucide] { width: 16px; height: 16px; display: block; }
.cart-empty { text-align: center; padding: var(--s8) var(--s4); color: var(--ink-mute); }
.cart-empty i[data-lucide] { width: 40px; height: 40px; color: var(--ink-faint); margin-inline: auto; }
.cart-empty p { margin: var(--s4) 0; }
@media (max-width: 520px) {
  /* 좁은 화면에서는 이름을 한 줄 위로 올린다 — 네 칸을 나란히 두면 금액이 잘린다 */
  .cart-row { grid-template-columns: 1fr auto 32px; }
  .cart-name { grid-column: 1 / -1; }
}

/* 총 입금 금액 — 위 두 줄(상품 금액·택배비)의 합이라는 것이 보이도록 실선으로 끊는다 */
.pay-sum { border-bottom: none; border-top: 1.5px solid var(--sub-deep); margin-top: 3px; padding-top: 9px; }
.pay-total { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--ink); }
.pay-free { font-style: normal; font-size: var(--fs-micro); font-weight: 700; color: var(--olive-deep); margin-left: 5px; }
.pay-box p { margin: 10px 0 0; font-size: var(--fs-caption); color: var(--ink-soft); line-height: 1.65; }
.pay-box .pay-demo { color: var(--ink-faint); }

/* ============================================================
   섹션 헤더 + 액션 버튼 행
   ============================================================ */
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }

/* ============================================================
   리치 텍스트 (게시글 본문 + Tiptap 에디터 공통)
   ============================================================ */
/* 줄바꿈은 body 의 keep-all 을 그대로 물려받는다 — 여기서 word-break 를 다시 선언하면
   한글이 글자 단위로 꺾인다(break-word = normal + overflow-wrap:anywhere 로 풀린다). */
.rich { line-height: 1.85; color: var(--ink); }
.rich h1 { font-size: 26px; margin: 22px 0 10px; }
.rich h2 { font-size: 22px; margin: 20px 0 9px; }
.rich h3 { font-size: 18px; margin: 16px 0 8px; }
.rich p { margin: 0 0 10px; }
.rich img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 8px 0; }
.rich a { color: var(--info); text-decoration: underline; }
.rich ul, .rich ol { padding-left: 24px; margin: 8px 0 12px; }
/* 인용 — 왼쪽 3px 막대 대신 면과 여백으로 구분한다. 막대를 세우면 그쪽 모서리만
   각지게 둬야 해서 상자가 한쪽만 잘린 모양이 된다. 인용부호가 시작을 알린다. */
.rich blockquote {
  position: relative; margin: 14px 0; padding: 12px 16px 12px 40px;
  color: var(--ink-soft); background: var(--surface-2); border-radius: var(--r-sm);
}
.rich blockquote::before {
  content: '\201C'; position: absolute; left: 14px; top: 6px;
  font-family: var(--font-head); font-size: 28px; line-height: 1; color: var(--main); opacity: .45;
}
.rich pre { background: #322F29; color: #EFEDE6; padding: 14px 16px; border-radius: var(--r-sm); overflow-x: auto; font-size: 13px; line-height: 1.6; }
.rich code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; }
.rich pre code { background: none; padding: 0; }
.rich hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.rich table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: var(--fs-sm); }
.rich table td, .rich table th { border: 1px solid var(--line); padding: 8px 11px; vertical-align: top; }
.rich table th { background: var(--surface-2); font-weight: 700; }
.rich mark { background: #F6E388; border-radius: 3px; padding: 0 2px; }
.rich ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
.rich ul[data-type="taskList"] li { display: flex; gap: 9px; align-items: flex-start; }
.rich ul[data-type="taskList"] li > label { margin-top: 4px; }
.rich iframe { max-width: 100%; border: none; border-radius: var(--r-sm); }
.rich .ProseMirror-selectednode { outline: 2px solid var(--main); }

/* ============================================================
   Tiptap 에디터 셸
   ============================================================ */
.tt-toolbar { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--line); border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface-2); }
.tt-btn { min-width: 31px; height: 31px; padding: 0 7px; border: none; background: transparent; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 700; }
.tt-btn:hover { background: var(--sub-soft); color: var(--ink); }
.tt-btn.on { background: var(--main); color: #fff; }
.tt-btn i[data-lucide]{ width: 16px; height: 16px; }
.tt-sep { width: 1px; align-self: stretch; background: var(--line); margin: 3px 5px; }
.tt-color { width: 28px; height: 28px; border: none; padding: 0; background: none; cursor: pointer; border-radius: 6px; }
.tt-body { border: 1.5px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); background: #fff; max-height: 46vh; overflow-y: auto; }
.tt-body .ProseMirror { outline: none; min-height: 300px; padding: 16px 18px; }
.tt-body .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--ink-faint); float: left; height: 0; pointer-events: none; }
.tt-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: var(--fs-caption); color: var(--ink-mute); }

/* 첨부파일 목록 */
.att-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-caption); margin-top: 6px; }
.att-row i[data-lucide]{ width: 15px; height: 15px; color: var(--ink-mute); flex-shrink: 0; }
.att-row .an { flex: 1; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-row .as { color: var(--ink-mute); flex-shrink: 0; }
.att-row button { background: none; border: none; cursor: pointer; color: var(--ink-mute); padding: 2px; display: grid; place-items: center; }
.att-row button:hover { color: var(--danger); }
.att-row a { color: var(--info); font-weight: 600; flex-shrink: 0; }

/* ============================================================
   게시글 이미지 슬라이더
   ============================================================ */
.post-slider { position: relative; margin-top: 18px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); }
.post-slider .ps-frame { aspect-ratio: 16/10; display: grid; place-items: center; }
.post-slider .ps-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ps-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.88); box-shadow: var(--sh-sm); cursor: pointer; display: grid; place-items: center; color: var(--ink); z-index: 2; }
.ps-nav:hover { background: #fff; }
.ps-nav.prev { left: 12px; } .ps-nav.next { right: 12px; }
.ps-nav i[data-lucide]{ width: 19px; height: 19px; }
.ps-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 2; }
.ps-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(42,39,35,0.25); cursor: pointer; padding: 0; }
.ps-dots button.on { background: var(--point); }

/* ============================================================
   페이지네이션
   ============================================================ */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.pager button { min-width: 36px; height: 36px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line-soft); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; display: inline-grid; place-items: center; }
.pager button:hover { border-color: var(--main); color: var(--main); }
.pager button.on { background: var(--main); border-color: var(--main); color: #fff; }
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager button i[data-lucide]{ width: 15px; height: 15px; }

/* 갤러리 아이템 */
.gal-item { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); margin: 0; }
.gal-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.gal-item figcaption { padding: 9px 12px; font-size: var(--fs-caption); color: var(--ink-soft); background: var(--surface); border-top: 1px solid var(--line-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-item .gal-del { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(42,39,35,0.55); color: #fff; cursor: pointer; display: grid; place-items: center; }
.gal-item .gal-del:hover { background: var(--danger); }
.gal-item .gal-del i[data-lucide]{ width: 14px; height: 14px; }

/* ============================================================
   상품 상세 페이지 (product.html)
   ============================================================ */
.pd-crumb { padding: 22px 0 0; }
/* 사진 칸을 420px 로 못박는다. 반반으로 나누면 넓은 화면에서 사진이 570px 넘게 커지는데,
   제품 사진에는 글자가 들어 있어 크게 띄울수록 흠이 도드라진다(2026-09-19 요청).
   남는 폭은 오른쪽(가격·옵션·구매)이 가져간다 — 사는 데 필요한 것은 그쪽이다. */
.pd-top { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 52px; align-items: flex-start; padding: 28px 0 56px; }
@media (max-width: 880px){ .pd-top { grid-template-columns: 1fr; gap: 28px; } }
.pd-gallery { position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 880px){ .pd-gallery { position: static; } }
.pd-main { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface-2); aspect-ratio: 1/1; display: flex; scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; }
.pd-main::-webkit-scrollbar { display: none; }
.pd-main .pd-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; }
.pd-main .pd-slide img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumbs button { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line-soft); padding: 0; cursor: pointer; background: var(--surface-2); }
.pd-thumbs button.on { border-color: var(--point); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-info h1 { font-size: clamp(24px, 3vw, 32px); margin-top: 10px; }
.pd-summary { color: var(--ink-soft); margin-top: 10px; }
.pd-price { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.pd-price .now { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--ink); }
.pd-price .was { color: var(--ink-faint); text-decoration: line-through; font-size: 17px; }
.pd-price .dc { color: var(--ink); font-family: var(--font-head); font-weight: 800; font-size: 22px; }
.pd-opts { border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 18px; display: flex; flex-direction: column; gap: 13px; }
.pd-row { display: flex; align-items: center; gap: 14px; }
.pd-row > label { width: 76px; flex-shrink: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.pd-row select { flex: 1; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font: inherit; background: var(--surface); }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.stepper button { width: 38px; height: 40px; border: none; background: var(--surface-2); cursor: pointer; font-size: 17px; color: var(--ink-soft); display: grid; place-items: center; }
.stepper button:hover { background: var(--sub-soft); }
.stepper input { width: 52px; height: 40px; border: none; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pd-total { display: flex; justify-content: space-between; align-items: center; background: var(--sub-soft); border-radius: var(--r-md); padding: 14px 18px; margin-top: 16px; }
.pd-total span { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.pd-total b { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--ink); }
/* 택배비는 '총 상품 금액' 바로 아래에 붙는다 — 금액을 본 자리에서 별도 비용을 알아야
   결제 단계에서 처음 보고 놀라지 않는다 */
.pd-ship-note {
  display: flex; align-items: center; gap: var(--gap-tight);
  margin: var(--gap-tight) 0 0; font-size: var(--fs-caption); color: var(--ink-mute);
}
.pd-ship-note i[data-lucide] { width: 15px; height: 15px; flex-shrink: 0; }
/* 장바구니 · 바로 구매 · 문의하기 셋이 한 줄에 들어가지 않는다.
   버튼은 자기 글자 길이만큼 최소 폭을 갖는다 — flex:1 만으로는 줄지 않고 화면을 넘긴다.
   min-width:0 으로 줄어들게 하고, 그래도 좁으면 두 줄로 접는다. */
.pd-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pd-cta .btn { flex: 1 1 45%; min-width: 0; }
.pd-meta-note { margin-top: 14px; font-size: var(--fs-caption); color: var(--ink-mute); line-height: 1.7; }
.pd-badge-soldout { background: var(--ink); color: #fff; }
/* 섭취 유의사항 — 상세설명 끝에 붙는 안전 안내. 읽고 지나치지 않도록 면을 달리한다 */
.pd-caution { background: var(--point-tint); border-radius: var(--r-md); padding: 16px 18px; margin-top: var(--gap-related); }
/* 제목 줄만 잡는다. `b:first-child` 로 쓰면 본문 <p> 안의 <b> 도 걸려
   그 자리에서 줄이 꺾인다(flex 는 블록이다) */
.pd-caution > b:first-child { display: flex; align-items: center; gap: var(--gap-tight); color: var(--point-ink); font-size: var(--fs-sm); }
.pd-caution > b:first-child i[data-lucide] { width: 16px; height: 16px; }
.pd-caution p { margin: var(--gap-tight) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-relaxed); }
/* 모바일 하단 고정 구매 바 */
.buybar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; align-items: center; box-shadow: 0 -8px 24px rgba(42,39,35,0.08); }
.buybar .bb-price { font-family: var(--font-head); font-weight: 800; font-size: 19px; flex-shrink: 0; }
.buybar .btn { flex: 1; }
@media (max-width: 880px){ .buybar { display: flex; } body.has-buybar { padding-bottom: 76px; } body.has-buybar .to-top { bottom: 86px; } }
/* 법적 고지 아코디언 */
.pd-acc { border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-top: 14px; }
.pd-acc details { border-bottom: 1px solid var(--line-soft); }
.pd-acc details:last-child { border-bottom: none; }
.pd-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font-family: var(--font-head); font-weight: 700; font-size: 16.5px; }
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary i[data-lucide]{ width: 18px; height: 18px; color: var(--ink-mute); transition: transform var(--dur-fast); flex-shrink: 0; }
.pd-acc details[open] summary i[data-lucide]{ transform: rotate(180deg); }
.pd-acc .pd-acc-body { padding: 0 22px 22px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; white-space: pre-line; }
.gosi-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gosi-table th { width: 180px; text-align: left; background: var(--surface-2); color: var(--ink-soft); font-weight: 600; }
.gosi-table th, .gosi-table td { border: 1px solid var(--line-soft); padding: 10px 14px; vertical-align: top; }
@media (max-width: 640px){ .gosi-table th { width: 120px; } }
/* 상품 카드 (목록) */
.prod-link { display: block; overflow: hidden; }
.prod-img { aspect-ratio: 1/1; background: var(--surface-2); overflow: hidden; position: relative; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
/* 상품 사진은 가리켜도 커지지 않는다. 사진 안에 제품명·성분 같은 **글자**가 들어 있어서,
   확대하면 글자가 뭉개져 오히려 못 읽게 된다(2026-09-19 요청).
   아래 @media (hover:hover) 의 `.card-hover:hover img{scale(1.06)}` 도 이 카드에 걸리므로,
   그것을 이기려고 여기서 none 을 못박는다 — 선택자가 더 구체적이라 이긴다. */
.prod-link:hover .prod-img img { transform: none; }
/* 앞세우는 큰 카드 — 사진 왼쪽 · 글 오른쪽. 격자(.prod-grid)를 한 칸으로 바꿔 쓴다 */
.prod-grid.prod-grid-showcase { grid-template-columns: 1fr; }   /* 페이지의 .prod-grid(3열)를 이긴다 */
.prod-showcase { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.prod-showcase .prod-img { aspect-ratio: 1/1; }
.prod-showcase-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(24px, 4vw, 48px); }
.prod-showcase-body h3 { font-size: var(--fs-h3); margin: var(--gap-related) 0 var(--gap-tight); }
.prod-showcase-body p { margin: 0 0 var(--gap-block); font-size: var(--fs-body); line-height: 1.7; }
.prod-showcase-price .price { font-size: var(--fs-h3); }
.prod-showcase-price .price-ask { font-size: var(--fs-h4); }
.prod-showcase-cta { display: inline-flex; align-items: center; gap: var(--gap-tight); margin-top: var(--gap-block); color: var(--main-deep); font-weight: 700; font-size: var(--fs-sm); }
.prod-showcase-cta i[data-lucide] { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.prod-showcase:hover .prod-showcase-cta i[data-lucide] { transform: translateX(4px); }
@media (max-width: 760px) {
  .prod-showcase { grid-template-columns: 1fr; }
}
.prod-soldout-veil { position: absolute; inset: 0; background: rgba(42,39,35,0.45); display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: 0.08em; }

/* ============================================================
   토스트
   ============================================================ */
/* 서버가 답하지 않을 때 상단 안내 띠 — site.js showApiDownNotice(). 내비 위에 선다 */
.site-alert {
  display: flex; align-items: flex-start; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s4); background: var(--danger-tint); color: var(--ink);
  border-bottom: 1px solid var(--danger); font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.site-alert [data-lucide] { width: 18px; height: 18px; color: var(--danger); flex-shrink: 0; margin-top: 2px; }
.site-alert a, .site-alert button { color: var(--danger); font: inherit; font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; z-index: 3000; box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transition: all var(--dur) var(--ease); max-width: 88vw; text-align: center; }
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%); }

/* ============================================================
   인증 메시지 · 내비 스크롤 · 리치 reveal (최초 1회)
   ============================================================ */
.login-msg { font-size: 13px; min-height: 18px; margin-top: 8px; color: var(--ink-mute); }
.login-msg.err { color: var(--danger); }

#site-nav .nav { transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
#site-nav .nav.scrolled { box-shadow: 0 4px 20px rgba(42,39,35,0.07); background: rgba(251,249,244,0.94); }

/* JS 활성 시: reveal 요소는 처음 보일 때 1회만 등장 (깜빡임 방지).
   opacity:0 도 반드시 no-preference 안에 둔다 — 밖에 두면 모션을 끈 사용자에게
   아직 관찰되지 않은 요소가 투명한 채로 남아 내용이 사라진 것처럼 보인다. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.in) { opacity: 0; transform: translateY(22px) scale(0.99); }
  .reveal.in { animation: revealIn var(--dur-slow) var(--ease) both; }
  html.js .reveal[data-reveal="left"]:not(.in)  { transform: translateX(-26px); }
  html.js .reveal[data-reveal="right"]:not(.in) { transform: translateX(26px); }
  html.js .reveal[data-reveal="scale"]:not(.in) { transform: scale(0.94); }
  .reveal[data-reveal].in { animation-name: revealGeneric; }
}
@keyframes revealIn { from { opacity: 0; transform: translateY(22px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes revealGeneric { from { opacity: 0; } to { opacity: 1; transform: none; } }
html.js .reveal.in { opacity: 1; }

/* ============================================================
   모션 — 규칙과 목록은 rules/motion.md
   전부 prefers-reduced-motion 아래에서만 동작하고, transform/opacity만 쓴다.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 1. 미세 인터랙션 — 아이콘 배지 · 번호 칩 */
  .card-hover .icon-badge { transition: transform var(--dur) var(--ease); }
  .card-hover:hover .icon-badge { transform: scale(1.08) rotate(-3deg); }
  .num-chip { transition: transform var(--dur) var(--ease), background var(--dur-fast); }
  .card-hover:hover .num-chip { transform: translateY(-2px); }

  /* 2. 사진 줌 — 사진이 주인공인 카드는 호버 시 프레임 안에서 천천히 확대된다 */
  .card-hover img, .pillar img, .lineup-item img {
    transition: transform 620ms var(--ease-soft);
  }
  .card-hover:hover img, .pillar:hover img, .lineup-item:hover img { transform: scale(1.06); }
  /* 필러는 사진 위에 흰 글자가 얹히므로, 확대와 함께 사진을 조금 눌러 대비를 지킨다 */
  .pillar img { transition: transform 620ms var(--ease-soft), filter var(--dur) var(--ease); }
  .pillar:hover img { filter: brightness(0.9); }

  /* 3. 키커의 노란 막대가 좌→우로 그어진다 — 섹션이 열리는 신호 */
  .reveal .eyebrow::before, .reveal.eyebrow::before,
  .reveal .eyebrow.center::after, .reveal.eyebrow.center::after {
    transform: scaleX(0); transform-origin: left center;
    transition: transform 520ms var(--ease) 120ms;
  }
  .reveal.in .eyebrow::before, .reveal.eyebrow.in::before,
  .reveal.in .eyebrow.center::after, .reveal.eyebrow.in.center::after { transform: scaleX(1); }

  /* 4. 공정 레일 — 점선이 그어지고 번호가 차례로 올라온다 */
  .rail::before { transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease) 180ms; }
  .rail.in::before { transform: scaleX(1); }
  .rail:not(.in) .r-no { transform: scale(0.4); opacity: 0; }
  .rail .r-no { transition: transform 460ms var(--ease), opacity 320ms linear; }
  .rail.in .rail-step:nth-child(1) .r-no { transition-delay: 260ms; }
  .rail.in .rail-step:nth-child(2) .r-no { transition-delay: 420ms; }
  .rail.in .rail-step:nth-child(3) .r-no { transition-delay: 580ms; }
  .rail.in .rail-step:nth-child(4) .r-no { transition-delay: 740ms; }
  .rail.in .rail-step:nth-child(5) .r-no { transition-delay: 900ms; }

  /* 5. 핵심 CTA 광택 스윕 — 호버 때 한 번 지나간다 */
  .btn-point { position: relative; overflow: hidden; }
  .btn-point::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
    transform: translateX(-130%);
  }
  .btn-point:hover::after { transform: translateX(130%); transition: transform 760ms var(--ease-soft); }

  /* 6. 목차 바 현재 위치 */
  .jump a { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }

  /* 7. 2열 레이아웃은 좌우에서 모여든다 — 두 열이 한 쌍이라는 신호.
        .split 이 실제로 2열인 861px 이상에서만 켠다. 1열로 접히면 방향이 의미를 잃고,
        시작 위치의 translateX 가 지면 밖으로 나가 가로 스크롤을 만든다.
        (좌우 26px 이동은 861px 이상에서 항상 32px인 --gutter 안에 들어온다) */
  @media (min-width: 861px) {
    html.js .split > .reveal:first-child:not(:last-child):not(.in) { transform: translateX(-26px); }
    html.js .split > .reveal:last-child:not(:first-child):not(.in) { transform: translateX(26px); }
    .split > .reveal:first-child:not(:last-child).in,
    .split > .reveal:last-child:not(:first-child).in { animation-name: revealGeneric; }
  }

  /* 8. 서브페이지 히어로 문양이 아주 느리게 물러난다 — 홈(.hero)·식초(.vin-hero)와 같은 결 */
  .page-hero.deep::before { animation: heroPatDrift 30s var(--ease-soft) both; }

  /* 9. 정보표는 위에서부터 한 줄씩 — 항목이 많아 통째로 나타나면 어디부터 읽을지 알 수 없다.
        html.js 로 가드해 스크립트가 실패해도 사업자정보 등 표 내용이 숨지 않게 한다. */
  html.js .facts.reveal:not(.in) .fact { opacity: 0; transform: translateY(10px); }
  .facts.reveal .fact { transition: opacity 320ms linear, transform 360ms var(--ease); }
  .facts.reveal.in .fact:nth-child(1) { transition-delay: 60ms; }
  .facts.reveal.in .fact:nth-child(2) { transition-delay: 120ms; }
  .facts.reveal.in .fact:nth-child(3) { transition-delay: 180ms; }
  .facts.reveal.in .fact:nth-child(4) { transition-delay: 240ms; }
  .facts.reveal.in .fact:nth-child(5) { transition-delay: 300ms; }
  .facts.reveal.in .fact:nth-child(n+6) { transition-delay: 360ms; }

  /* 10. 모바일 메뉴가 오른쪽에서 밀려 들어온다 — 햄버거를 누른 방향과 같다 */
  .mobile-menu.open { animation: fadeIn var(--dur-fast) linear both; }
  .mobile-menu.open .mm-body { animation: mmSlideIn var(--dur) var(--ease) both; }
}

/* 서브페이지 히어로의 문양 레이어 — 움직여야 하므로 배경이 아닌 별도 면으로 분리한다
   (background-position 애니메이션은 매 프레임 페인트를 유발한다 → rules/motion.md 2절) */
.page-hero.deep { position: relative; overflow: hidden; }
.page-hero.deep::before {
  content: ""; position: absolute; inset: -4%; z-index: 0; pointer-events: none;
  background-image: var(--pat-light); background-size: var(--pat-size);
}
.page-hero.deep > .wrap { position: relative; z-index: 1; }
@keyframes heroPatDrift { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes mmSlideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 7. 읽기 진행 바 — 긴 페이지에서 어디쯤 왔는지 (site.js 가 --p 를 갱신) */
.read-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150;
  background: var(--point); transform: scaleX(var(--p, 0)); transform-origin: left center;
  will-change: transform; pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ .read-bar { display: none; } }