/* ============================================================
   한국참전통발효식품협동조합 — 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;

  /* ---- 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는 숨기고 햄버거 메뉴의 신청 버튼 사용 */
}
@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);
  border: 1px solid var(--line-soft); border-top: 3px solid var(--point);
  border-radius: 0 0 var(--r-md) 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(--ink-faint);
}
.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; }
.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); }
.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; }
}

/* ============================================================
   가격표 — 실제 판매가 고지용 표
   ============================================================ */
/* 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); }
.pay-total { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--ink); }
.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; }
.rich blockquote { border-left: 3px solid var(--main); margin: 14px 0; padding: 8px 16px; color: var(--ink-soft); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.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; }
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) 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; }
.pd-cta { display: flex; gap: 10px; margin-top: 16px; }
.pd-cta .btn { flex: 1; }
.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; transition: transform var(--dur-slow) var(--ease); }
.prod-link:hover .prod-img img { transform: scale(1.04); }
.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; }

/* ============================================================
   토스트
   ============================================================ */
.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; } }