/* NTT Magazine Store v2.2 (2026-05-19, v24_10) — IA 재구성 + V-TMF 잔재 제거
   v24_10 변경: 상단 nav 5항목 + 사이드칩 4항목 + 푸터 3컬럼 IA / kit-3d-stage→kit-hero-stage 단순화
   참조 디자인 SoT: 사용자 첨부 샘플 1~5 (.www/ntt.heal7.com/docs/sample/)
   16 캐릭터 데이터 SoT: characters.js */

@import './tokens.css';

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-weight: 500;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  /* sticky footer: 짧은 본문에서도 풋터를 viewport 하단에 완전 부착.
     ※ 옛 padding-bottom:70px(.status-bar 예약)는 status bar 미사용으로 제거 — 2026-05-24.
        향후 status bar 활성화 시 body.has-statusbar { padding-bottom: 70px } 로 토글 권장. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main,
body > .checkout-main { flex: 1 0 auto; }
body > footer.footer { flex-shrink: 0; }
/* 인터랙티브 캔버스 비활성 환경 fallback — CSS 정적 도트 */
body.use-static-dots,
body:has(> canvas#bgDots[hidden]) {
  background-image: var(--dot-bg);
  background-size: var(--dot-size);
}
/* 전역 인터랙티브 도트 캔버스 */
#bgDots {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: -1;            /* 콘텐츠 뒤 */
  pointer-events: none;   /* 마우스 이벤트는 통과, 캔버스는 window mousemove로 추적 */
  display: block;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── HEADER (Image #4: 노란 띠 + 검정 ◯힐 배지 + nav + 흰 카트 칩) ─── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  background: var(--c-yellow);
  border-bottom: 3px solid var(--c-ink);
  padding: 14px var(--pad-x);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-badge {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-accent); color: #fff;
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 18px;
  border: 3px solid var(--c-ink);
}
.brand strong { font-weight: var(--w-h); font-size: 18px; letter-spacing: -0.02em; display:block; }
.brand small  { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--c-ink); opacity: .7; letter-spacing: .05em; margin-top: 2px; }
.nav { display: flex; gap: 30px; font-weight: var(--w-h); font-size: 15px; }
.nav a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; transition: opacity .15s; }
.nav a:hover { opacity: .65; }
.nav-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  border: 2px solid var(--c-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 1.5px 1.5px 0 0 var(--c-ink);
}
.nav-badge::before {
  content: '';
  width: 12px;
  height: 12px;
  display: block;
  background: currentColor;
  mask: url('/assets/icons/gift.svg?v=0.7.13') center / contain no-repeat;
  -webkit-mask: url('/assets/icons/gift.svg?v=0.7.13') center / contain no-repeat;
}
.cart-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: var(--r-pill);
  background: #fff; border: 3px solid var(--c-ink);
  font-weight: var(--w-h); font-size: 15px;
}
@media (max-width: 820px){ .nav { display: none; } }

/* ─── HERO (Image #4: 좌측 큰 한글 + 핑크 손글씨 동그라미 / 우측 6칸 일러스트 진열) ─── */
/* v24_10 Image#10 컬팩트: 3-col hero (텍스트 | 4-카드(2×2) | 16TYPES 패널) */
.hero {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(0, 0.95fr) minmax(240px, 0.9fr);
  gap: 28px;
  padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(24px, 4vw, 40px);
  align-items: start;
  justify-content: center;
  position: relative;  /* hero-decor anchor */
}
.hero > * { min-width: 0; }
.hero-types-panel {
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
  container-type: inline-size;
}   /* NEW 뱃지가 패널 우상단 anchor */
@media (max-width: 1280px){
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: 24px; }
  .hero-types-panel { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 900px){
  .hero { grid-template-columns: 1fr; gap: 22px; }
  .hero-grid--4,
  .hero-types-panel {
    justify-self: center;
  }
  .hero-types-panel {
    width: min(100%, 560px);
  }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-ink); color: var(--c-yellow);
  padding: 8px 18px; border-radius: var(--r-pill);
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 14px; letter-spacing: .06em;
}
.hero-eyebrow .spark { color: var(--c-yellow); }

.hero h1 {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: clamp(40px, 5.6vw, 80px); line-height: 1.05;
  letter-spacing: -0.045em; margin: 22px 0 22px;
  color: var(--c-ink);
  /* 한국어 단어 보존 줄바꿈 — "스타터킷,/패키지." 같은 깨짐 방지 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hero h1 .pkg-circle {
  position: relative; display: inline-block; padding: 0 4px;
}
/* v24_10: 핑크 손글씨 동그라미 ::after 제거 — 사용자 요청 */

.hero p.lead {
  font-size: 15px; color: var(--c-ink); opacity: .85;
  max-width: 480px; margin: 0 0 24px;
}

.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: #fff; border: 2.5px solid var(--c-ink);
  font-weight: var(--w-b); font-size: 13px;
}

/* ─── 랜딩 허브 개요 ─── */
.landing-outline {
  padding: 6px var(--pad-x) clamp(48px, 6vw, 88px);
}
.outline-shell {
  background: rgba(255,255,255,.72);
  border: 3px solid var(--c-ink);
  border-radius: 28px;
  box-shadow: 10px 10px 0 0 var(--c-ink);
  padding: clamp(24px, 3vw, 34px);
}
.outline-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-yellow);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em;
}
.outline-title {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02; letter-spacing: -.04em;
  margin: 18px 0 12px;
}
.outline-sub {
  max-width: 720px;
  font-size: 15px; line-height: 1.6;
  color: var(--c-ink); opacity: .82;
  margin: 0 0 24px;
}
.outline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.outline-card {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
  padding: 20px 18px 18px;
  border: 3px solid var(--c-ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 0 var(--c-ink);
  transition: transform .14s ease, box-shadow .14s ease;
}
.outline-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 0 var(--c-ink);
}
.outline-card small {
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; opacity: .85;
}
.outline-card strong {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: 28px; line-height: 1.02; letter-spacing: -.03em;
}
.outline-card p {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  opacity: .82;
}
.outline-card .outline-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--c-ink); color: #fff;
  border: 2.5px solid var(--c-ink);
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 13px;
}
.outline-card--pink { background: #FFE6F3; }
.outline-card--blue { background: #E4F3FF; }
.outline-card--green { background: #E7F7DE; }
.outline-card--yellow { background: #FFF3BF; }
.outline-card--purple { background: #F0E4FF; }
.outline-card--ink { background: #15131A; color: #fff; }
.outline-card--ink p { color: rgba(255,255,255,.78); }
.outline-card--ink .outline-link {
  background: var(--c-yellow);
  color: var(--c-ink);
}
@media (max-width: 1080px){
  .outline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .outline-grid { grid-template-columns: 1fr; }
}

/* ─── 서브페이지 인트로 ─── */
.page-intro {
  padding: clamp(36px, 5vw, 64px) var(--pad-x) 10px;
}
/* .page-intro__eyebrow 정의는 L2492(4H 사고 후 복구) 블록으로 단일화. 적층 제거 2026-05-24. */
.page-intro h1 {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.03; letter-spacing: -.045em;
  margin: 18px 0 12px;
}
.page-intro p {
  max-width: 760px;
  margin: 0;
  font-size: 15px; line-height: 1.6;
  opacity: .82;
}

/* Hero 4칸 일러스트 진열 v24_10 (Image #10: 2×2, 테두리 없는 sticker 진열) */
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  position: relative;
}
.hero-grid--4 {
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
  padding: 6px;
  position: relative;
  width: min(100%, 460px);
  margin-inline: auto;
}
/* v24_10 Image#10: 4 카드는 테두리 제거, 부드러운 파스텔 + 가벼운 drop-shadow만 */
.hero-grid--4 .kit-tile {
  background: var(--tile-bg, #FFF1F3);
  border: 0;
  border-radius: 18px;
  aspect-ratio: 0.95;
  min-width: 0;
  padding: 28px 12px 14px;
  box-shadow: 0 4px 10px rgba(21, 19, 26, 0.06);
  transition: transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s;
}
.hero-grid--4 .kit-tile:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 10px 22px rgba(21, 19, 26, 0.14);
}
.hero-grid--4 .kit-tile .num-tag {
  /* 검정 pill 그대로 */
  z-index: 4; background: var(--c-ink); color: var(--c-yellow);
  white-space: nowrap;
  top: 10px; left: 10px;
}
.hero-grid--4 .kit-tile .nm {
  font-size: 12px; opacity: 0.85;
  margin-top: 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* 카드 사이 액센트 sparkle (v24_10): 4-corner mid points */
.hero-grid--4::before, .hero-grid--4::after {
  content: ''; position: absolute;
  width: 22px; height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z' fill='%23FFD24D' stroke='%2315131A' stroke-width='1.2'/></svg>") center/contain no-repeat;
  z-index: 5;
  pointer-events: none;
}
.hero-grid--4::before { top: 50%; left: -10px; transform: translate(-50%, -50%) rotate(-12deg); }
.hero-grid--4::after  { top: 50%; right: -10px; transform: translate(50%, -50%) rotate(18deg); }
/* 중간 sparkle (4 카드의 중심 교차점) */
.hero-grid--4 > .kit-tile.t2::after,
.hero-grid--4 > .kit-tile.t3::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4' fill='%23FF6FB0' stroke='%2315131A' stroke-width='1.5'/></svg>") center/contain no-repeat;
  z-index: 6;
  pointer-events: none;
}
.hero-grid--4 > .kit-tile.t2::after { bottom: -16px; left: -8px; }
.hero-grid--4 > .kit-tile.t3::after { top: -16px; right: -8px; }
/* tile별 파스텔 배경 (테두리 없는 버전, var 사용으로 통일) */
.hero-grid--4 .kit-tile.t1 { --tile-bg: #FFEEF6; }
.hero-grid--4 .kit-tile.t2 { --tile-bg: #E8F4FF; }
.hero-grid--4 .kit-tile.t3 { --tile-bg: #FFF8E1; }
.hero-grid--4 .kit-tile.t4 { --tile-bg: #FFE0E0; }
@media (max-width: 900px){ .hero-grid--4 { grid-template-columns: 1fr 1fr; gap: 18px 14px; } }
@media (max-width: 520px){
  .hero-grid--4 { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .hero-grid--4::before {
    left: 4px;
    transform: translateY(-50%) rotate(-12deg);
  }
  .hero-grid--4::after {
    right: 4px;
    transform: translateY(-50%) rotate(18deg);
  }
  .hero-grid--4 > .kit-tile.t2::after { bottom: -10px; left: 2px; }
  .hero-grid--4 > .kit-tile.t3::after { top: -10px; right: 2px; }
  .hero h1 {
    font-size: clamp(32px, 9vw, 36px);
    line-height: 1.08;
  }
  .hero p.lead,
  .cat-chips,
  .hero-grid--4,
  .hero-types-panel {
    max-width: 100%;
  }
}
.kit-tile {
  position: relative;
  background: #fff;
  border: 3px solid var(--c-ink); border-radius: 16px;
  padding: 14px;
  aspect-ratio: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.kit-tile .num-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--c-ink); color: var(--c-yellow);
  font-family: var(--f-mono); font-size: 10px;
  padding: 3px 8px; border-radius: var(--r-pill); letter-spacing: .08em;
  border: 1.5px solid var(--c-ink);
}
.kit-tile .num-tag .lbl { color: #fff; margin-left: 4px; }
.kit-tile .ic {
  /* v24_10: 수직 중앙정렬 — flex:1로 잔여 공간 확보 후 display:flex로 center */
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(38px, 4.6vw, 56px); line-height: 1;
  margin: 0;
}
.kit-tile .nm {
  text-align: center; font-family: var(--f-head); font-weight: var(--w-h); font-size: 13px;
}
.kit-tile.t1 { background: #FFEEF6; }
.kit-tile.t2 { background: #E8F4FF; }
.kit-tile.t3 { background: #FFF1DC; }
.kit-tile.t4 { background: #FFE0E0; }
.kit-tile.t5 { background: #E5FFE8; }
.kit-tile.t6 { background: #F1E4FF; }

/* ─── STARTER KIT 메인 비주얼 (Image #4: 좌하단 그라데이션 박스 + 핑크 PACKAGE 도장 + 노란 스마일) ─── */
.kit-feature {
  display: grid; grid-template-columns: 1.3fr 0.6fr 1.1fr; gap: 24px;
  padding: 0 var(--pad-x) clamp(40px, 5vw, 80px);
  align-items: stretch;
}
@media (max-width: 1000px){ .kit-feature { grid-template-columns: 1fr; } }

/* 3D Isometric STARTER KIT 박스 (Image #4 정확 재현) */
.kit-box {
  position: relative;
  background: transparent;
  border: 0;
  padding: 18px 12px 12px;
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(6px 8px 0 rgba(21,19,26,.18));
  transition: transform .25s cubic-bezier(.34,1.6,.64,1);
}
.kit-box:hover { transform: translateY(-4px) scale(1.015); }
/* v24_10: V-TMF wrapper(.kit-3d-stage / canvas.vtmf-canvas / kit-3d-bob keyframe) 제거.
   교체된 `.kit-hero-stage` 정의는 tokens.css 참조. hover 시 bob 가속만 여기 유지. */
.kit-box:hover .kit-hero-stage { animation-duration: 1.6s; }
.kit-box .pkg-stamp {
  position: absolute; top: 10px; right: 6%;
  z-index: 3;
  background: var(--c-accent); color: #fff;
  width: 110px; height: 110px;
  /* 도장 jaggy 24-spike (gear-burst) */
  clip-path: polygon(50% 0%, 60% 8%, 75% 4%, 80% 18%, 93% 22%, 90% 36%, 100% 46%, 92% 56%, 100% 70%, 86% 78%, 88% 92%, 75% 92%, 68% 100%, 56% 92%, 44% 100%, 36% 92%, 22% 92%, 18% 80%, 4% 72%, 12% 58%, 0% 48%, 10% 36%, 4% 22%, 18% 18%, 22% 4%, 38% 8%);
  display: grid; place-items: center; text-align: center; line-height: 1.1;
  font-family: var(--f-head); transform: rotate(8deg);
  animation: stamp-wobble 6s ease-in-out infinite;
}
@keyframes stamp-wobble {
  0%,100% { transform: rotate(8deg); }
  50%     { transform: rotate(12deg) scale(1.04); }
}
.kit-box .pkg-stamp small { font-size: 12px; letter-spacing: .12em; font-family: var(--f-mono); font-weight: 500; }
.kit-box .pkg-stamp strong { font-size: 30px; font-weight: var(--w-h); display: block; margin-top: 3px; }

.workbook {
  position: relative;
  background: var(--c-forest-1);
  border: 3px solid var(--c-ink); border-radius: 18px;
  padding: 18px; color: #fff; min-height: 280px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-card);
}
.workbook .num-tag {
  background: var(--c-ink); color: var(--c-yellow);
  font-family: var(--f-mono); font-size: 10px;
  padding: 3px 8px; border-radius: var(--r-pill); letter-spacing: .08em;
  align-self: flex-start;
}
.workbook h4 {
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 40px; line-height: .9;
  color: #fff; margin: 0;
}
.workbook .smile-sm {
  position: absolute; top: 16px; right: 16px;
  width: 28px; height: 28px; background: var(--c-yellow); border: 2px solid var(--c-ink);
  border-radius: 50%; display: grid; place-items: center; font-size: 14px;
}
.workbook .pencil { font-size: 56px; align-self: center; line-height: 1; }
.workbook .small-cap { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; opacity: .8; }

.theme-kits {
  background: #fff; border: 3px dashed var(--c-ink); border-radius: 22px;
  padding: 24px 20px 20px; position: relative;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 280px;
}
.theme-kits .head {
  position: absolute; top: -14px; left: 18px;
  background: var(--c-ink); color: var(--c-yellow); font-family: var(--f-mono); font-size: 10px;
  padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .08em;
}
.theme-kits .head .lbl { color: #fff; margin-left: 4px; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; }
.theme-card {
  background: #fff; border: 2.5px solid var(--c-ink); border-radius: 12px;
  padding: 10px 6px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center;
}
.theme-card .glyph { font-size: 26px; }
.theme-card .nm-en { font-family: var(--f-head); font-weight: var(--w-h); font-size: 11px; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.theme-card .nm-kr { font-size: 10px; color: var(--c-mute); margin-top: 4px; }
.theme-card.tc1 { background: #E5FFE8; }
.theme-card.tc2 { background: #FFEEF6; }
.theme-card.tc3 { background: #FFE0E0; }
.theme-card.tc4 { background: #FFF8E1; }

/* ─── 서브 페이지 통일 레이아웃 (Image #5 좌:슬로건 + 우:보드 + 사이드칩) ─── */
.sub-page { padding: clamp(40px, 5vw, 80px) var(--pad-x); }
.sub-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(0, 2.2fr) auto;
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
}
@media (max-width: 1100px){
  .sub-layout { grid-template-columns: 1fr; }
  .side-chips { flex-direction: row !important; flex-wrap: wrap; }
}

/* 슬로건 블록 */
.slogan-block {
  position: relative;
  padding: 10px 6px 0;
}
.slogan-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  color: var(--c-ink); letter-spacing: .12em;
  margin-bottom: 18px;
}
.slogan-eyebrow .sparks { color: var(--c-accent); letter-spacing: 0; }
.slogan-h1 {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: clamp(36px, 4.0vw, 56px); line-height: 1.08;
  letter-spacing: -.045em; margin: 0 0 18px;
  color: var(--c-ink);
  /* 한국어 단어 보존 — "고르는 진열대" 같은 단어 중간 줄바꿈 방지 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.slogan-h1 .pkg-circle {
  position: relative; display: inline-block; padding: 0 4px;
  background: var(--c-yellow);
}
.slogan-sub {
  font-size: 14.5px; color: var(--c-ink); opacity: .8;
  margin: 0 0 18px; line-height: 1.6;
}
.hash-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.hash {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--c-ink);
  color: var(--c-ink);
}

.welcome-card {
  position: relative;
  background: var(--c-forest-1); color: #fff;
  border: 2.5px solid var(--c-ink); border-radius: 16px;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-card);
  max-width: 280px;
}
.welcome-card .welcome-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  opacity: .92; font-weight: 600;
}
.welcome-card strong {
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 24px;
  letter-spacing: -.02em;
}
.welcome-card small { font-size: 12px; opacity: .9; }
.welcome-card .welcome-cta {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--c-ink); color: #fff;
  border-radius: var(--r-pill); font-weight: var(--w-h); font-size: 12px;
  align-self: flex-start;
}
.welcome-card .welcome-cta:hover { background: #2a2632; }

/* 핑크 ISSUE 도장 (24-spike) */
.issue-stamp {
  position: absolute; top: -10px; right: 6%;
  background: var(--c-accent); color: #fff;
  width: 110px; height: 110px;
  clip-path: polygon(50% 0%, 60% 8%, 75% 4%, 80% 18%, 93% 22%, 90% 36%, 100% 46%, 92% 56%, 100% 70%, 86% 78%, 88% 92%, 75% 92%, 68% 100%, 56% 92%, 44% 100%, 36% 92%, 22% 92%, 18% 80%, 4% 72%, 12% 58%, 0% 48%, 10% 36%, 4% 22%, 18% 18%, 22% 4%, 38% 8%);
  display: grid; place-items: center; text-align: center;
  font-family: var(--f-head); transform: rotate(8deg);
  animation: stamp-wobble 6s ease-in-out infinite;
}
.issue-stamp small { font-size: 11px; letter-spacing: .12em; font-family: var(--f-mono); font-weight: 600; }
.issue-stamp strong { font-size: 28px; font-weight: var(--w-h); display: block; margin-top: 2px; line-height: 1; }
.issue-stamp .stamp-smile { font-size: 14px; margin-top: 2px; font-style: normal; }

/* 우측 사이드 칩 (Image #5 우측 컬럼: 리포트/굿즈/코칭/세션/매거진) */
.side-chips {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 24px;
}
.side-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 22px;
  background: var(--c-flower-1); color: #fff;
  border: 2.5px solid var(--c-ink);
  border-radius: 14px 8px 8px 14px;
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 15px;
  box-shadow: 3px 3px 0 0 var(--c-ink);
  transition: transform .12s;
  min-width: 110px;
}
.side-chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--c-ink); }
.side-chip i { font-size: 18px; font-style: normal; }
.side-chip:nth-child(1) { background: var(--c-flower-1); }
.side-chip:nth-child(2) { background: var(--c-yellow);   color: var(--c-ink); }
.side-chip:nth-child(3) { background: var(--c-flower-2); color: var(--c-ink); }
.side-chip:nth-child(4) { background: var(--c-yellow-d); color: var(--c-ink); }
.side-chip:nth-child(5) { background: #fff; color: var(--c-ink); }

/* sub-board는 collection 컨테이너 대체 — 책장형 그리드 */
.sub-board {
  /* 이미지 #2 진열대 효과 — 베이지핑크 배경 + 검정 진한 박스 그림자로 카드가 떠 있는 느낌 */
  background: var(--c-paper);
  border: 3px solid var(--c-ink);
  border-radius: 22px;
  padding: 28px 22px 22px;
  box-shadow: 8px 8px 0 0 var(--c-ink);
  /* 내부 진열대 선반 가로줄: 카드 4행마다 옅은 줄 (시각적 진열대 강조) */
  background-image: linear-gradient(
    to bottom,
    transparent calc(25% - 1px), rgba(0,0,0,0.04) 25%,
    transparent calc(25% + 1px) calc(50% - 1px), rgba(0,0,0,0.04) 50%,
    transparent calc(50% + 1px) calc(75% - 1px), rgba(0,0,0,0.04) 75%,
    transparent calc(75% + 1px)
  );
}

/* ─── 16 캐릭터 컬렉션 (Image #4 "07 16유형 컬렉션" 4x4 페이스텔 카드) ─── */
.collection {
  background: #fff; border: 3px dashed var(--c-ink); border-radius: 22px;
  padding: 32px 22px 22px;
  position: relative;
  margin: 0 var(--pad-x) clamp(40px, 5vw, 80px);
}
.collection .head {
  position: absolute; top: -14px; left: 22px;
  background: var(--c-ink); color: var(--c-yellow); font-family: var(--f-mono); font-size: 11px;
  padding: 4px 12px; border-radius: var(--r-pill); letter-spacing: .08em;
}
.collection .head .lbl { color: #fff; margin-left: 4px; }
.collection h2 {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: clamp(22px, 2.6vw, 34px); margin: 0 0 8px; letter-spacing: -.02em;
}
.collection .sub {
  font-size: 13px; color: var(--c-mute); margin: 0 0 18px;
}
.fam-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.fam-pill {
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 2.5px solid var(--c-ink); background: #fff;
  font-weight: var(--w-b); font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px; transition: transform .12s;
}
.fam-pill:hover { transform: translate(-1px, -1px); }
.fam-pill.active { color: #fff; }
/* v5 8-Elements 4 CAMP fam-pill active 컬러 */
.fam-pill.active[data-fam="light_wood"]  { background: #5DBA85; }   /* A 생명과 온기 */
.fam-pill.active[data-fam="wind_water"]  { background: #3FBFE0; }   /* B 파동과 자유 */
.fam-pill.active[data-fam="fire_dark"]   { background: #9747FF; }   /* C 관조와 통찰 */
.fam-pill.active[data-fam="earth_metal"] { background: #C46420; }   /* D 현실과 원칙 */
.fam-pill.active[data-fam="all"]         { background: var(--c-ink); color: var(--c-yellow); }
/* legacy fam-pill (Nature Empathy v4 호환 — 점진 제거) */
.fam-pill.active[data-fam="sky"]    { background: #3FBFE0; }
.fam-pill.active[data-fam="plant"]  { background: #5DBA85; }
.fam-pill.active[data-fam="water"]  { background: #6FD5EE; }
.fam-pill.active[data-fam="earth"]  { background: #C46420; }
.fam-pill .hanja { font-size: 10px; opacity: .7; font-family: var(--f-mono); }

.char-grid {
  /* 자석 그룹핑: gap 좁히고 row gap 더 축소해서 4×4 단단한 진열 */
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: 12px;
  row-gap: 14px;
  position: relative; z-index: 1;
}
@media (max-width: 1100px){ .char-grid { grid-template-columns: repeat(3, 1fr); column-gap: 10px; } }
@media (max-width: 800px){  .char-grid { grid-template-columns: repeat(2, 1fr); column-gap: 8px; } }
@media (max-width: 480px){  .char-grid { grid-template-columns: 1fr; row-gap: 10px; } }

/* 풍부형 카드 (참조 React 코드 구조 보존) — 진열대 위 카드 부유 효과 */
.char-cell {
  position: relative;
  background: var(--cell-bg, #FFF1F3);
  border: 2.5px solid var(--c-ink); border-radius: 14px;
  padding: 54px 14px 16px;
  display: flex; flex-direction: column; gap: 6px; text-align: center;
  transition: transform .12s, box-shadow .12s;
  overflow: hidden;
  /* 기본 입체 그림자: 진열대 위 카드가 떠 있는 느낌 (이미지 #2/#3 패턴) */
  box-shadow: 3px 3px 0 0 var(--c-ink);
}
.char-cell:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--c-ink); }

.char-cell .fam-tag {
  position: absolute; top: 10px; left: 12px; right: 42px;
  background: rgba(255,255,255,.85); border: 1.5px solid var(--c-ink);
  border-radius: var(--r-pill); padding: 4px 10px 5px;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .03em;
  color: var(--c-ink); font-weight: var(--w-b);
  line-height: 1.15;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* 캐릭터 누끼 영역 — B+C: family 색 카드 배경 직접 노출, hover 시 polaroid 효과 */
.char-cell .cell-art {
  position: relative;
  margin: 8px auto 4px;
  width: 94%; aspect-ratio: 1;
  display: grid; place-items: center;
  background: transparent;     /* 카드(.char-cell) family 색이 그대로 비침 — sticker가 자연 위에 떠 있음 */
  border: 0;
  overflow: visible;
}
.char-cell .cell-art .type-num {
  position: absolute; top: -26px; right: 2px;
  font-family: var(--f-mono); font-weight: var(--w-h);
  font-size: 11px; letter-spacing: .04em;
  background: var(--c-ink); color: #fff;
  padding: 2px 7px; border-radius: var(--r-pill);
  border: 2px solid var(--c-ink);
  box-shadow: 2px 2px 0 0 rgba(21,19,26,.18);
  white-space: nowrap;
  z-index: 3;
}
.char-cell .cell-img {
  width: 92%; height: 92%; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(21,19,26,.16));
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), filter .22s;
  transform: rotate(0deg);
}
/* C 속성: hover 시 polaroid sticker처럼 살짝 일어남 + drop-shadow 강화 */
.char-cell:hover .cell-img {
  transform: rotate(-2deg) scale(1.06) translateY(-2px);
  filter: drop-shadow(0 8px 14px rgba(21,19,26,.28));
}

.char-cell .cell-info { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.char-cell .cell-num {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; color: var(--c-ink); opacity: .55;
}
.char-cell .cell-name {
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 17px;
  letter-spacing: -.02em; color: var(--c-ink); line-height: 1.1;
}
.char-cell .cell-en {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em;
  color: var(--c-mute); margin-top: -1px;
}
.char-cell .cell-tagline {
  font-size: 12px; color: var(--c-ink); font-weight: 500;
  margin-top: 4px; line-height: 1.4;
}
.char-cell .cell-keywords {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
}
.char-cell .cell-keywords .kw {
  font-size: 10px; font-weight: var(--w-b);
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.78); border: 1.5px solid var(--c-ink);
  color: var(--c-ink); letter-spacing: -.01em;
}

/* v5 8-Elements 4 CAMP 카드 배경 (characters.js FAMILY_COLOR과 동기화) */
.char-cell[data-fam="light_wood"]  { --cell-bg: #E2F2D1; --chip-bg:#E8F5D9; --chip-border:#86C24A; --chip-text:#3D6B1A; }
.char-cell[data-fam="wind_water"]  { --cell-bg: #D8F0FA; --chip-bg:#E1F2FB; --chip-border:#5BBBD7; --chip-text:#1A5870; }
.char-cell[data-fam="fire_dark"]   { --cell-bg: #F1E4FF; --chip-bg:#EBDDFF; --chip-border:#9747FF; --chip-text:#3D1A78; }
.char-cell[data-fam="earth_metal"] { --cell-bg: #EFE7D6; --chip-bg:#F1EADC; --chip-border:#C2A663; --chip-text:#5A3F18; }
/* v24_11: 리더 마커 → 👑 펑키 이모지 (핑크 테두리 폐기). CAMP 대표 4명 */
.char-cell[data-leader="true"]::before {
  content: '👑';
  position: absolute; top: 4px; right: 6px;
  font-size: 22px;
  z-index: 3;
  transform: rotate(14deg);
  filter: drop-shadow(0 2px 2px rgba(21,19,26,0.25));
  pointer-events: none;
}

/* family별 키워드 chip 색 — char-cell .cell-keywords .kw 의 기본 룰을 덮어씀 */
.char-cell .cell-keywords .kw {
  background: var(--chip-bg, rgba(255,255,255,.78));
  border-color: var(--chip-border, var(--c-ink));
  color: var(--chip-text, var(--c-ink));
}
@media (max-width: 860px){
  .char-cell { padding-top: 50px; }
  .char-cell .fam-tag {
    right: 38px;
    font-size: 8px;
    padding: 4px 9px;
  }
}

/* ── Sparkle 효과 — family chip 색 자동 매칭, 4-point sparkle SVG mask ── */
.fx {
  position: absolute;
  pointer-events: none;
  background-color: var(--chip-border, #FFD24D);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z'/></svg>");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  opacity: .85;
  z-index: 1;
  animation: fx-twinkle 2.6s ease-in-out infinite;
}
@keyframes fx-twinkle {
  0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.05) rotate(8deg); }
}

/* 카드(.cell-art) sparkle 3개: 좌상·우중·우하 */
.char-cell .cell-art .fx-1 { top: 8%;  left: 6%;    width: 18px; height: 18px; animation-delay: 0s;   }
.char-cell .cell-art .fx-2 { top: 38%; right: 4%;   width: 12px; height: 12px; animation-delay: .6s;  }
.char-cell .cell-art .fx-3 { bottom: 10%; right: 14%; width: 14px; height: 14px; animation-delay: 1.2s; }

/* 모달(.modal-art) sparkle 4개 — 더 큰 사이즈 */
.modal .modal-art .fx-1 { top: 8%;  left: 6%;    width: 28px; height: 28px; animation-delay: 0s;   }
.modal .modal-art .fx-2 { top: 24%; right: 6%;   width: 18px; height: 18px; animation-delay: .5s;  }
.modal .modal-art .fx-3 { bottom: 24%; left: 8%; width: 16px; height: 16px; animation-delay: 1s;   }
.modal .modal-art .fx-4 { bottom: 10%; right: 10%; width: 22px; height: 22px; animation-delay: 1.5s; }

/* 매거진 cover-glyph sparkle 2개 — 작은 영역이므로 작게 */

/* v5 8-Elements 매거진 cover sparkle 색 (CAMP A 01-04, B 05-08, C 09-12, D 13-16) */

/* v5 8-Elements 모달 fam별 fx 색 */
.modal[data-fam="light_wood"]  .fx { background-color: #86C24A; }
.modal[data-fam="wind_water"]  .fx { background-color: #5BBBD7; }
.modal[data-fam="fire_dark"]   .fx { background-color: #9747FF; }
.modal[data-fam="earth_metal"] .fx { background-color: #C2A663; }

/* 모션 감소 옵션 존중 */
@media (prefers-reduced-motion: reduce) {
  .fx { animation: none; opacity: .7; }
}

/* ─── STEP 띠 (Image #4: 무지개 그라데이션 + 5 STEP + CTA) ─── */
.step-strip {
  background: linear-gradient(90deg, #FF4D8F 0%, #FF7E47 20%, #FFD600 40%, #7DD957 60%, #3FBFE0 80%, #9747FF 100%);
  border: 3px solid var(--c-ink); border-radius: 22px;
  padding: 18px 26px;
  margin: 0 var(--pad-x) clamp(40px, 5vw, 60px);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  color: var(--c-ink);
}
.step-strip .label {
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 19px; line-height: 1.1;
  color: var(--c-ink);
}
.step-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.step {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--r-pill);
  padding: 8px 14px; font-weight: var(--w-b); font-size: 13px;
}
.step .step-circle {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-ink);
  display: grid; place-items: center; font-size: 14px;
}
.step .n { font-family: var(--f-mono); color: var(--c-mute); font-size: 10px; letter-spacing: .08em; }
.step-arrow { font-weight: var(--w-h); font-size: 16px; color: var(--c-ink); }
.cta-buy {
  background: var(--c-ink); color: #fff;
  padding: 14px 22px; border-radius: var(--r-pill);
  font-weight: var(--w-h); font-size: 15px;
  border: 3px solid var(--c-ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.cta-buy:hover { background: #2a2632; }

/* ─── 추가 섹션: 매거진 / 세션 (간략) ─── */
section { padding: clamp(40px, 5vw, 80px) var(--pad-x); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head .eyebrow {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  background: var(--c-ink); color: var(--c-yellow);
  padding: 5px 12px; border-radius: var(--r-pill); display: inline-block; margin-bottom: 10px;
}
.section-head h2 {
  font-family: var(--f-head); font-weight: var(--w-h);
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.03em; margin: 0;
}

/* 16개 미니 커버 카드 — 자석 그룹핑 + 카드 부유 효과 */

/* C 속성: cover hover 시 살짝 polaroid */

/* 중앙 hero 카드 — 데스크탑 5-col 그리드에서만 2x2 span; 모바일 미디어가 이 위치 override */

/* 좌하단 별 스탬프 */

/* ── 우측 사이드 ── */

/* 인용 말풍선 */

/* 새 ISSUE 리본 (블루) */

/* ── 하단 카테고리 도트 띠 (검은 배경 + 컬러 도트 + 카테고리명) ── */

.cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px){ .cards-row { grid-template-columns: 1fr; } }
.card-block {
  background: #fff; border: 3px solid var(--c-ink); border-radius: 18px;
  padding: 22px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px;
}
.card-block.brand-pink   { background: var(--c-flower-1); color: #fff; }
.card-block.brand-cyan   { background: var(--c-forest-1); color: #fff; }
.card-block.brand-yellow { background: var(--c-yellow);   color: var(--c-ink); }
.card-block h3 { font-family: var(--f-head); font-weight: var(--w-h); font-size: 22px; margin: 0; }
.card-block .price { font-family: var(--f-mono); font-size: 13px; opacity: .9; }
.card-block .ic { font-size: 34px; line-height: 1; }
.btn-inline {
  align-self: flex-start;
  background: var(--c-ink); color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: var(--w-h); font-size: 13px;
  border: 2.5px solid var(--c-ink);
}
.card-block.brand-yellow .btn-inline { background: var(--c-accent); }

/* ─── [STATUS] 글로벌 상태 블랙바 영역은 HTML에 #sbContext/#sbDots mount point 없어 실질 dead.
   CSS .status-bar + .sb-* 전체 제거 (2026-05-24).
   js/store.js의 SECTION_CONTEXTS + applyContext 함수는 ctxEl null 가드로 idle — JS 정리는 별도 라운드. */

/* ─── FOOTER 정의는 L2340 블록(4H 사고 후 복구)로 단일화됨. 적층 제거 (2026-05-24). ─── */

/* ─── HEADER IA 보강 (v24_10): 우측 액션 묶음 + 햄버거 ─── */
.topbar-actions {
  display: flex; align-items: center; gap: 12px;
}
.auth-link {
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 13.5px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: transparent;
  border: 2.5px solid var(--c-ink);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;  /* v24_11: "로그인 / 가입" 세로 부서짐 방지 */
}
.auth-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 var(--c-ink);
}
.nav-burger {
  display: none;
  flex-direction: column; gap: 4px;
  width: 36px; height: 36px;
  background: var(--c-ink); border: 2.5px solid var(--c-ink); border-radius: 8px;
  justify-content: center; align-items: center;
  cursor: pointer;
}
.nav-burger span {
  display: block; width: 18px; height: 2.5px; background: var(--c-yellow);
  border-radius: 2px; transition: transform 0.2s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 820px){
  /* 모바일: nav 폴드 — 햄버거 토글로 펼침 */
  .nav { display: none; }
  .nav.is-open {
    display: flex !important; flex-direction: column;
    position: absolute; top: 100%; right: var(--pad-x); left: var(--pad-x);
    background: var(--c-yellow); border: 3px solid var(--c-ink); border-radius: 14px;
    padding: 18px 22px; gap: 14px;
    box-shadow: 6px 6px 0 0 var(--c-ink);
    z-index: 60;
  }
  .nav.is-open a { padding: 6px 0; border-bottom: 1.5px dashed rgba(21,19,26,0.15); }
  .nav.is-open a:last-child { border-bottom: 0; }
  .nav-burger { display: inline-flex; }
  /* 모바일에서 auth-link 라벨 축약 */
  .auth-link { font-size: 12px; padding: 6px 10px; }
}
/* v24_11: 매우 좁은 모바일 (480px↓) — auth-link 텍스트 단축 + 액션 묶음 컴팩트화 */
@media (max-width: 480px){
  .topbar { gap: 12px; padding: 10px var(--pad-x); }
  .topbar-actions { gap: 6px; }
  .auth-link {
    /* "로그인 / 가입" → 짧은 텍스트로 대체 */
    font-size: 0;  /* 원본 텍스트 숨김 */
    padding: 7px 10px;
  }
  .auth-link::before {
    content: "가입";
    font-size: 12px;
    font-weight: var(--w-h);
  }
  .cart-button { padding: 6px 12px; font-size: 13px; }
  .brand small { display: none; }
}

/* ─── 인트로/HERO 안정화 (v24_10): 섹션 비율 고정 + 중간 breakpoint ───
   advisor 가이드: overflow:hidden 금지 (sticker bleed 보존). min-height + % 기반 decor 위치로 해상도 변화 대응 */
.hero { min-height: 540px; }
@media (max-width: 1280px){
  .side-chips { display: none; }
  .chars-decor--best,
  .chars-decor--bookmark,
  .issue-stamp { display: none !important; }
}
@media (max-width: 1360px){
  .pay-decor--gift,
  .pay-decor--heal { display: none; }
  .pay-decor--coupon {
    top: -18px;
    left: 24px;
    width: 82px;
    transform: rotate(-10deg);
  }
}
@media (max-width: 1280px) and (min-width: 1001px){
  .kit-feature {
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    gap: 20px;
    align-items: start;
  }
  .kit-box {
    grid-row: 1 / span 2;
    min-height: 360px;
    padding: 10px 8px 8px;
  }
  .workbook {
    min-height: 210px;
  }
  .theme-kits {
    min-height: 210px;
    padding-top: 48px;
  }
  .theme-kits .head {
    top: 12px;
    left: 14px;
  }
  .kit-feature .pkg-stamp {
    top: 10px !important;
    left: 10px !important;
    width: 74px !important;
    height: 74px !important;
    transform: rotate(-10deg) !important;
  }
  .kit-feature .pkg-stamp strong {
    font-size: 18px !important;
  }
  .kit-price-tag {
    right: 12px;
    bottom: 12px;
  }
}
@media (max-width: 1100px) and (min-width: 821px){
  /* 중간 viewport: hero가 1열로 stack되기 전 단계 — decor 안정화 */
  .hero-decor--new  { top: 10px; right: clamp(10px, 3vw, 40px); width: clamp(60px, 8vw, 90px); }
  .hero-decor--sale { top: 58%; left: clamp(10px, 2vw, 40px); width: clamp(70px, 9vw, 110px); }
}
@media (max-width: 1000px){
  /* hero가 1열로 stack — 우측 6칸 grid가 아래로 내려옴. decor 충돌 회피 */
  .hero-decor--new  { top: 14px; right: 18px; width: 70px; }
  .hero-decor--sale { display: none; }
}

/* kit-feature 영역: corner ribbon + price-tag가 안정적으로 우측에 박힐 수 있도록 min-height */
.kit-feature { min-height: 420px; }
@media (max-width: 1000px){
  .kit-feature { min-height: auto; }
  .kit-corner-ribbon { width: 90px; top: 0; right: 0; }
  .kit-price-tag { bottom: 14px; right: 14px; width: 100px; }
}

/* hero h1 모바일 균형 (v24_10): raster 6칸 대비 텍스트가 너무 작아지는 역전 방지 */
@media (max-width: 820px){
  .hero h1 { font-size: clamp(44px, 7vw, 60px); }
  .slogan-h1 { font-size: clamp(34px, 6vw, 48px); }
}

/* ── HERO 우측 16TYPES 컬렉션 패널 (v24_10, Image #10 07 섹션) ── */
.hero-types-panel {
  background: #fff;
  border: 3px dashed var(--c-ink);
  border-radius: 18px;
  padding: 34px 16px 16px;
  position: relative;
  display: flex; flex-direction: column;
}
.hero-decor--new {
  position: absolute;
  top: -44px;
  right: -12px;
  width: clamp(74px, 18cqw, 96px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.hero-types-head {
  position: absolute; top: -12px; left: 18px;
  background: var(--c-ink); color: var(--c-yellow);
  font-family: var(--f-mono); font-size: 10px;
  padding: 4px 10px; border-radius: var(--r-pill);
  letter-spacing: 0.08em;
}
.hero-types-head .lbl { color: #fff; margin-left: 6px; }
.hero-types-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(78px, 12cqw, 112px);
  gap: 8px;
  /* flex:1 제거 — 그리드 stretch 방지 */
}
.hero-types-cell {
  position: relative;
  background: var(--cell-bg, #FFEEF6);
  border: 1.5px solid var(--c-ink);
  border-radius: 8px;
  padding: 5px 4px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1px;
  text-align: center;
  transition: transform 0.12s, box-shadow 0.12s;
  cursor: pointer;
  overflow: hidden;
}
.hero-types-cell:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 0 var(--c-ink);
}
.hero-types-cell .htc-img {
  max-width: clamp(40px, 5.2cqw, 62px); max-height: clamp(40px, 5.2cqw, 62px);
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 1px 2px rgba(21,19,26,0.18));
  flex-shrink: 0;
}
.hero-types-cell .htc-num {
  font-family: var(--f-mono); font-size: clamp(7.5px, 1.35cqw, 10px); font-weight: 700;
  color: var(--c-ink); opacity: 0.55;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-top: 1px;
}
.hero-types-cell .htc-name {
  font-family: var(--f-head); font-weight: var(--w-h); font-size: clamp(10px, 1.75cqw, 13px);
  color: var(--c-ink); letter-spacing: -0.03em; line-height: 1.05;
  word-break: keep-all;
}
/* v5 8-Elements hero panel 4 CAMP */
.hero-types-cell[data-fam="light_wood"]  { --cell-bg: #E2F2D1; }
.hero-types-cell[data-fam="wind_water"]  { --cell-bg: #D8F0FA; }
.hero-types-cell[data-fam="fire_dark"]   { --cell-bg: #F1E4FF; }
.hero-types-cell[data-fam="earth_metal"] { --cell-bg: #EFE7D6; }
/* v24_11: hero panel 리더 셀 → 👑 펑키 이모지 (outline 폐기) */
.hero-types-cell[data-leader="true"]::after {
  content: '👑';
  position: absolute; top: -4px; right: -2px;
  font-size: 13px;
  z-index: 3;
  transform: rotate(16deg);
  filter: drop-shadow(0 1px 1px rgba(21,19,26,0.35));
  pointer-events: none;
}
.hero-types-cta {
  margin-top: 12px;
  align-self: stretch;
  text-align: center;
  background: var(--c-ink); color: var(--c-yellow);
  padding: 10px 16px; border-radius: var(--r-pill);
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 12.5px;
  border: 2.5px solid var(--c-ink);
  transition: transform 0.12s;
}
.hero-types-cta:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--c-accent); }

@media (max-width: 900px){
  .hero-types-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 74px;
    gap: 7px;
  }
  .hero-types-cell { padding: 6px 3px 4px; }
  .hero-types-cell .htc-img { max-width: 36px; max-height: 36px; }
  .hero-types-cell .htc-name { font-size: 9.5px; }
  .hero-decor--new { top: -18px; right: 8px; width: 74px; }
}
@media (max-width: 520px){
  .hero-types-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 68px;
    gap: 6px;
  }
  .hero-types-cell { padding: 5px 3px 4px; }
  .hero-types-cell .htc-img { max-width: 32px; max-height: 32px; }
  .hero-types-cell .htc-num { font-size: 7px; }
  .hero-types-cell .htc-name { font-size: 8.5px; line-height: 1.02; }
}

/* ── 캐릭터 슬로건 영역 BEST PICK 리본 안전화 (v24_10) ──
   #characters absolute decor가 sub-layout 1열 전환 시 slogan-h1 위로 겹침 — 우측으로 이동 + 모바일 hide */
.chars-decor--best { top: -10px; left: auto; right: clamp(20px, 8vw, 100px); transform: rotate(4deg); }
@media (max-width: 1100px){ .chars-decor--best { display: none; } }

/* ── ISSUE 01 도장 — slogan-block 1열 풀폭 전환 시 우측 6%가 너무 멀어짐. max 위치 클램프 ── */
.issue-stamp {
  right: auto !important;
  left: -10px !important;
  top: 42px !important;
  width: 96px;
  height: 96px;
  transform: rotate(-10deg);
}
@media (max-width: 1100px){
  .issue-stamp { display: none; }   /* 1열 풀폭에서는 도장 자체가 잉여 — 본문 좌측에 이미 강한 시각 위계 있음 */
}

/* ── PACKAGE 01 핑크 도장 — 박스 image 좌상단 모서리에 "스티커처럼 살짝 걸침" 위치 ──
   v24_10 재수정: 박스 본문(글자) 가리지 않도록 박스 외곽으로 이동. top:-12px / left:-4% (살짝 outside) */
.kit-feature .pkg-stamp {
  top: -16px !important; left: -8px !important;
  right: auto !important; bottom: auto !important;
  width: 88px !important; height: 88px !important;
  transform: rotate(-14deg) !important;
}
.kit-feature .pkg-stamp small { font-size: 10px !important; }
.kit-feature .pkg-stamp strong { font-size: 22px !important; margin-top: 2px !important; }
@media (max-width: 1000px){
  .kit-feature .pkg-stamp { width: 72px; height: 72px; top: -10px; left: -4px; }
  .kit-feature .pkg-stamp strong { font-size: 18px !important; }
}

/* ── hero 6칸 kit-tile: num-tag와 image overlap 방지 ──
   v24_10: image cap을 num-tag 영역(상단 22px)을 회피하도록 padding-top 추가, image max-height 축소 */
.hero-grid--sheet .kit-tile {
  padding-top: 30px;  /* num-tag 영역 확보 */
}
.hero-grid--sheet .kit-tile .ic {
  margin-top: 4px;
}
.hero-grid--sheet .kit-tile .ic img.ci-lg {
  max-width: 110px !important; max-height: 92px !important;
}
.hero-grid--sheet .kit-tile .num-tag {
  /* 상단 좌측 + 더 진한 배경으로 image 우선순위 위로 */
  z-index: 4; background: var(--c-ink); color: var(--c-yellow);
  white-space: nowrap;
}
@media (max-width: 1180px) and (min-width: 821px){
  .hero-grid--sheet .kit-tile .ic img.ci-lg { max-width: 88px !important; max-height: 76px !important; }
}

/* ── theme-card glyph image도 동일 처리 (4 캠프 박스) ── */
.theme-grid--sheet .theme-card {
  padding-top: 26px;  /* num-tag/head 영역 회피 */
}

/* ── "준비중" 마이크로카피 (v24_10): 백엔드 라우트 미완성 항목 ── */
.soon-tag {
  display: inline-block; margin-left: 6px;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255, 227, 77, 0.18); color: var(--c-yellow);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em;
  border: 1px solid rgba(255, 227, 77, 0.35);
  vertical-align: 1px;
}
.side-chip[data-soon="true"]::after {
  content: "준비중";
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85); color: var(--c-ink);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em;
  border: 1.5px solid var(--c-ink);
}
.nav a[data-soon="true"]::after {
  content: "·";
  margin-left: 4px;
  color: var(--c-accent);
  font-weight: 900;
}
/* ── 토스트 (data-soon 클릭 시) ── */
.toast-soon {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--c-ink); color: var(--c-yellow);
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--f-head); font-weight: var(--w-h); font-size: 13.5px;
  border: 2.5px solid var(--c-yellow);
  box-shadow: 4px 4px 0 0 rgba(255, 227, 77, 0.4);
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast-soon.is-show {
  opacity: 1; transform: translateX(-50%) translateY(-6px);
}

/* ─── MODAL (16 캐릭터 상세) ─── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(21,19,26,.55);
  display: none; place-items: center; z-index: 100; padding: 20px;
}
.modal-backdrop[data-open="true"] { display: grid; }
.modal {
  background: #fff; border: 3px solid var(--c-ink); border-radius: 20px;
  box-shadow: var(--shadow-card);
  max-width: 720px; width: 100%; max-height: 90vh; overflow: auto;
  padding: 28px;
}
.modal-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; }
@media (max-width: 720px){ .modal-grid { grid-template-columns: 1fr; } }
.modal-svg,
.modal-art {
  position: relative;
  background: var(--cell-bg, #EAF5FF);  /* family 톤 약한 배경 — sticker 자연 무대 */
  border: 0;
  border-radius: 16px;
  padding: 18px; aspect-ratio: 1; display: grid; place-items: center;
  overflow: visible;
}
.modal[data-fam="sky"]   .modal-art { --cell-bg: #EAF5FF; }
.modal[data-fam="plant"] .modal-art { --cell-bg: #E2F2D1; }
.modal[data-fam="water"] .modal-art { --cell-bg: #D8F0FA; }
.modal[data-fam="earth"] .modal-art { --cell-bg: #EFE7D6; }
.modal-art .modal-type-num {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--f-mono); font-weight: var(--w-h); font-size: 13px;
  background: var(--c-ink); color: #fff;
  padding: 3px 9px; border-radius: var(--r-pill);
  z-index: 2;
}
.modal-img {
  width: 92%; height: 92%; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(21,19,26,.22));
}
.modal-fam {
  margin-top: 10px; text-align: center;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--c-mute); font-weight: var(--w-b);
}
.modal[data-fam="sky"]   .modal-art { --cell-bg: #EAF5FF; }
.modal[data-fam="plant"] .modal-art { --cell-bg: #DBF3C5; }
.modal[data-fam="water"] .modal-art { --cell-bg: #CFEFFB; }
.modal[data-fam="earth"] .modal-art { --cell-bg: #EFE7D6; }
.modal h3 { font-family: var(--f-head); font-weight: var(--w-h); font-size: 28px; margin: 4px 0 0; letter-spacing: -.02em; }
.modal .en { font-family: var(--f-mono); font-size: 11px; color: var(--c-mute); letter-spacing: .1em; }
.modal .tagline-q { font-family: var(--f-head); font-size: 17px; line-height: 1.4; margin: 12px 0; font-style: italic; }
.modal .sect-label { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-mute); letter-spacing: .1em; margin-top: 14px; }
.modal ul.tags { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.modal ul.tags li { border: 2px solid var(--c-ink); border-radius: var(--r-pill); padding: 5px 11px; font-size: 12px; font-weight: var(--w-b); }
.modal .close-btn {
  background: var(--c-ink); color: var(--c-yellow);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: var(--w-h); font-size: 18px;
  float: right;
}
.modal .code-row { display: flex; gap: 6px; margin-top: 10px; }
.code-chip {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 6px; font-size: 11px; color: #fff; font-weight: var(--w-h);
  border: 1.5px solid var(--c-ink);
}
.code-陽 { background: var(--code-yang); color: var(--c-ink); }
.code-陰 { background: var(--code-yin); }
.code-火 { background: var(--code-fire); }
.code-水 { background: var(--code-water); }
.code-金 { background: var(--code-metal); }
.code-木 { background: var(--code-wood); }
.code-風 { background: var(--code-wind); color: var(--c-ink); }
.code-土 { background: var(--code-earth); }
.modal .cta-modal {
  background: var(--c-accent); color: #fff;
  padding: 12px 20px; border-radius: var(--r-pill);
  font-weight: var(--w-h); font-size: 14px;
  border: 2.5px solid var(--c-ink);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
}
.modal--magazine {
  max-width: 1040px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 210, 77, 0.28), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,245,228,0.96)),
    #fff;
}
.modal--magazine h3 {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -.04em;
}
.modal--magazine .cta-modal {
  margin-top: 0;
  box-shadow: 3px 3px 0 0 var(--c-ink);
}

@media (prefers-reduced-motion: reduce) {
  .char-cell.is-candidate::after,
  .char-cell.is-archetype { animation: none !important; }
}

/* ──────────── 4E: fam-pill 2-layer 라벨 (한자 brand + 영문 UX) ──────────── */
.fam-pill {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 8px 14px !important;
  text-align: left;
}
.fam-pill strong {
  font-size: 13px; font-weight: 900;
  letter-spacing: -.01em; line-height: 1.1;
  color: inherit;
}
.fam-pill strong .hanja { font-weight: 900; }
.fam-pill small {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; opacity: 0.7;
  color: inherit;
}
.fam-pill.active small { opacity: 0.95; }

/* ──────────── 4C: my-report CAMP↔키트 추천 카드 ──────────── */
.rp-kit-rec {
  margin: 28px var(--pad-x);
  padding: 24px 28px;
  background: linear-gradient(135deg, #FFF7CC 0%, #FFE5C8 100%);
  border: 3px solid var(--c-ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 0 var(--c-ink);
  text-align: center;
  max-width: var(--container-max, 1480px);
  margin-left: auto; margin-right: auto;
}
.rp-kit-rec__eyebrow {
  display: inline-block;
  background: var(--c-ink); color: var(--c-yellow);
  padding: 4px 14px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.rp-kit-rec h2 {
  font-size: clamp(22px, 3vw, 32px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.2;
  margin: 0 0 8px;
}
.rp-kit-rec h2 strong {
  background: var(--c-ink); color: var(--c-yellow);
  padding: 2px 12px; border-radius: 8px;
  font-weight: 900;
}
.rp-kit-rec__sub {
  margin: 0 0 18px; font-size: 14px; line-height: 1.6;
  color: var(--c-mute);
}

/* ──────────── 4H 사고 후 복구 (2026-05-20): dead CSS 정규식이 핵심 셀렉터 4개 휩쓸려 누락 ──────────── */

/* (1) .footer — 풋터 본체. 노란 점선은 풋터 본체 전체를 샌드위치(상/하)로 감싸기 위해 .footer에 직접 둔다.
   ※ .footer-grid의 border-bottom + .footer-bottom의 border-top 조합은 풋터 내부 두 줄이 인접해 보이는 회귀가 있어 제거됨. */
.footer {
  margin-top: 60px;
  padding: clamp(40px, 5vw, 64px) var(--pad-x) clamp(24px, 3vw, 36px);
  background: var(--c-ink);
  color: var(--c-yellow);
  border-top: 2px dashed rgba(255, 227, 77, 0.7);
  border-bottom: 2px dashed rgba(255, 227, 77, 0.7);
  box-sizing: border-box;
}
.footer-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 32px; max-width: var(--container-max, 1480px); margin: 0 auto;
}
.footer-col strong {
  display: block;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}
.footer-col .footer-strong-2 { margin-top: 16px; }
.footer-col small {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255, 227, 77, 0.7);
  margin-bottom: 12px;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 6px; }
.footer-list a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 13.5px; opacity: 1; transition: color .15s, opacity .15s; }
.footer-list a:hover { color: var(--c-yellow); text-decoration: underline; }
.footer .soon-tag { font-family: var(--f-mono); font-size: 9.5px; padding: 1px 6px; margin-left: 4px; background: rgba(255, 227, 77, 0.2); color: #fff; border-radius: 999px; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
  font-family: var(--f-mono); font-size: 11.5px; color: rgba(255, 227, 77, 0.7);
  max-width: var(--container-max, 1480px); margin-left: auto; margin-right: auto;
}
.footer-bottom-quick a { color: rgba(255, 255, 255, 0.85); text-decoration: none; opacity: 1; }
.footer-bottom-quick a:hover { color: var(--c-yellow); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }

/* (2) .hero-leaders — index 4 leader 그리드 + 1 랜덤 큰 */
.hero-leaders {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
  align-content: start; padding: 12px 4px 24px; min-height: 380px;
}
.hero-leaders .lc {
  position: relative;
  display: none;
  flex-direction: column; align-items: center; gap: 4px; padding: 4px;
  background: transparent; border: 0; box-shadow: none;
  text-decoration: none; color: var(--c-ink);
  transition: transform .25s cubic-bezier(.34,1.5,.64,1);
  overflow: visible;
}
.hero-leaders .lc.is-featured {
  display: flex; grid-column: 1 / -1;
  gap: 16px; padding: 12px; transform: none; z-index: 1;
  animation: lcReveal 0.6s cubic-bezier(.34,1.5,.64,1);
}
.hero-leaders .lc-img {
  width: 100%; max-width: 140px; height: auto;
  filter: drop-shadow(4px 4px 0 var(--c-ink));
  animation: lcBob 3.6s ease-in-out infinite;
}
.hero-leaders .lc.is-featured .lc-img { max-width: 240px !important; width: 100%; }
.hero-leaders .lc-bubble {
  position: relative; width: max-content; max-width: 320px;
  background: color-mix(in oklab, var(--lc-color, var(--c-yellow)) 22%, #fff);
  border: 2.5px solid var(--c-ink); border-radius: 14px;
  padding: 14px 18px 16px; box-shadow: 3px 3px 0 0 var(--c-ink);
  text-align: center;
}
.hero-leaders .lc-chip {
  display: inline-block; background: var(--c-ink); color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 800; letter-spacing: .08em;
  margin-bottom: 4px;
}
.hero-leaders .lc strong { display: block; font-size: 28px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 6px; }
.hero-leaders .lc small { display: block; font-size: 14px; line-height: 1.5; color: var(--c-mute); font-family: var(--f-mono); }
.hero-leaders .lc--lightwood { --lc-color: #5DBA85; }
.hero-leaders .lc--windwater { --lc-color: #3FBFE0; }
.hero-leaders .lc--firedark  { --lc-color: #9747FF; }
.hero-leaders .lc--earthmetal{ --lc-color: #C46420; }
.hero-leaders .lc::before, .hero-leaders .lc::after {
  content: '✦'; position: absolute; font-size: 16px; font-weight: 900;
  color: var(--lc-color, #FFD24D); text-shadow: 1.5px 1.5px 0 var(--c-ink);
  pointer-events: none; animation: hlsTwinkle 2.6s ease-in-out infinite; z-index: 3;
}
.hero-leaders .lc::before { top: 6px; left: 10%; }
.hero-leaders .lc::after { content: '✧'; top: 18%; right: 8%; font-size: 14px; animation-delay: 1.0s; }
@keyframes lcReveal { from { opacity: 0; transform: scale(0.85) rotate(-6deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes lcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* (3) .leader-mascot — 우하단 floating + 데스크탑 sticky */
.leader-mascot {
  position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(80px, 12vh, 140px);
  z-index: 50; display: grid; grid-template-columns: auto auto;
  align-items: end; gap: 8px; pointer-events: none;
}
.leader-mascot__bubble {
  pointer-events: auto; position: relative; max-width: 240px;
  background: color-mix(in oklab, var(--lm-primary, #FFD24D) 22%, #fff);
  border: 2.5px solid var(--c-ink); border-radius: 18px;
  box-shadow: 4px 4px 0 0 var(--c-ink); padding: 12px 14px 14px;
  animation: lmEnter .35s cubic-bezier(.34,1.5,.64,1);
}
.leader-mascot__bubble::after { content: ''; position: absolute; right: -10px; bottom: 16px; width: 0; height: 0; border: 10px solid transparent; border-left-color: var(--c-ink); border-right: 0; }
.leader-mascot__bubble::before { content: ''; position: absolute; right: -7px; bottom: 18px; width: 0; height: 0; border: 8px solid transparent; border-left-color: color-mix(in oklab, var(--lm-primary, #FFD24D) 22%, #fff); border-right: 0; z-index: 1; }
.leader-mascot__chip { display: inline-block; background: var(--c-ink); color: #fff; padding: 2px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; margin-bottom: 8px; }
.leader-mascot__tip { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c-ink); transition: opacity .14s ease, transform .14s ease; }
.leader-mascot__tip.is-flip { opacity: 0; transform: translateY(-4px); }
.leader-mascot__figure { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; filter: drop-shadow(3px 3px 0 var(--c-ink)); }
.leader-mascot__img { width: clamp(72px, 9vw, 120px); height: auto; }
.leader-mascot__name { background: var(--c-ink); color: #fff; padding: 2px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; }
@keyframes lmEnter { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 720px) {
  .leader-mascot { bottom: 16px; gap: 6px; }
  .leader-mascot__bubble { max-width: calc(100vw - 130px); padding: 10px 12px; }
  .leader-mascot__img { width: 64px; }
}
@media (min-width: 1180px) {
  .leader-mascot { top: 50%; bottom: auto; transform: translateY(-50%); gap: 14px; z-index: 60; }
  .leader-mascot__figure { animation: lmBob 3.6s ease-in-out infinite; }
  .leader-mascot__img { width: clamp(180px, 16vw, 260px); }
  .leader-mascot__bubble { max-width: 280px; padding: 16px 18px 18px; }
  .leader-mascot__tip { font-size: 15px; line-height: 1.6; }
}
@keyframes lmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* (4) .hero-leader-stage — 보드판 + 만화 말풍선 + sparkle */
.hero-leader-stage {
  position: relative; width: 100%; max-width: 360px; padding: 0;
  background: transparent; border: 0; box-shadow: none;
  text-align: center; overflow: visible;
}
.hero-leader-stage .hls-figure {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 200px; transform: rotate(-3deg);
}
.hero-leader-stage .hls-hanja { display: none; }
.hero-leader-stage .hls-img {
  position: relative; z-index: 1; width: 100%; max-width: 240px; height: auto;
  filter: drop-shadow(5px 5px 0 var(--c-ink));
  animation: lcBob 3.6s ease-in-out infinite;
}
.hero-leader-stage .hls-name {
  display: inline-block; margin-top: 8px;
  background: var(--c-ink); color: #fff;
  padding: 6px 18px !important; border-radius: 999px;
  font-family: var(--f-mono); font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: 0.08em !important;
}
.hero-leader-stage .hls-bubble {
  position: relative; margin: 22px 0 0; padding: 16px 18px;
  background: #fff; border: 3px solid var(--c-ink); border-radius: 20px;
  box-shadow: 4px 4px 0 0 var(--c-ink); text-align: left;
  transform: rotate(1.5deg);
}
.hero-leader-stage .hls-bubble::before { content: ''; position: absolute; top: -16px; left: 40px; width: 0; height: 0; border: 14px solid transparent; border-bottom-color: var(--c-ink); border-top: 0; }
.hero-leader-stage .hls-bubble::after { content: ''; position: absolute; top: -10px; left: 43px; width: 0; height: 0; border: 11px solid transparent; border-bottom-color: #fff; border-top: 0; }
.hero-leader-stage .hls-chip {
  display: inline-block; background: var(--c-ink); color: #fff;
  padding: 5px 14px !important; border-radius: 999px;
  font-family: var(--f-mono); font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: 0.08em !important; margin-bottom: 10px !important;
}
.hero-leader-stage .hls-tip {
  margin: 0; font-size: 14.5px !important; line-height: 1.6 !important;
  color: var(--c-ink); word-break: keep-all;
  transition: opacity .14s ease, transform .14s ease;
}
.hero-leader-stage .hls-tip.is-flip { opacity: 0; transform: translateY(-4px); }
.hero-leader-stage .hls-figure::before, .hero-leader-stage .hls-figure::after {
  content: '✦'; position: absolute; font-weight: 900;
  color: var(--lm-secondary, #FFD24D); text-shadow: 2px 2px 0 var(--c-ink);
  pointer-events: none; animation: hlsTwinkle 2.4s ease-in-out infinite; z-index: 3;
}
.hero-leader-stage .hls-figure::before { top: -8px; left: 4px; font-size: 28px; }
.hero-leader-stage .hls-figure::after { content: '✧'; top: 32%; right: 0; font-size: 22px; color: var(--lm-primary, #FFD24D); animation-delay: .8s; }
@keyframes hlsTwinkle { 0%, 100% { transform: scale(0.7) rotate(0); opacity: 0.4; } 50% { transform: scale(1.15) rotate(15deg); opacity: 1; } }
@media (max-width: 900px) {
  .hero-leader-stage { max-width: 100%; }
  .hero-leader-stage .hls-img { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .leader-mascot__bubble, .hero-leader-stage .hls-img, .hero-leaders .lc-img,
  .leader-mascot__figure, .hero-leader-stage .hls-figure::before,
  .hero-leader-stage .hls-figure::after, .hero-leaders .lc::before, .hero-leaders .lc::after {
    animation: none !important;
  }
}

/* ──────────── 4H 사고 후 추가 복구 (2026-05-20): 본 세션 신설 셀렉터 ──────────── */

/* (1) page-intro--split + ck-hero unification (4O 통일 프레임) */
.page-intro,
.store-showcase,
.shop-section {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(24px, 3vw, 36px);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
}
.page-intro__copy { min-width: 0; }
.page-intro__eyebrow {
  display: inline-block; padding: 4px 12px;
  background: var(--c-ink); color: var(--c-yellow, #FFD24D);
  font-family: var(--f-mono); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  border-radius: 999px; margin-bottom: 14px;
}
.page-intro h1, .store-showcase h1, .ck-hero h1 {
  font-family: var(--f-head); font-weight: var(--w-h, 900);
  font-size: clamp(36px, 5vw, 64px); line-height: 1.03; letter-spacing: -.045em;
  margin: 12px 0 16px; word-break: keep-all; overflow-wrap: break-word;
}
.page-intro p, .store-showcase p {
  max-width: 540px; margin: 0 0 12px;
  font-size: 15px; line-height: 1.6; opacity: 0.84;
}
.page-intro--split {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .page-intro--split, .ck-hero.page-intro--split {
    grid-template-columns: 1fr minmax(280px, 360px) !important;
    gap: 32px !important;
  }
}
.ck-hero.page-intro--split { max-width: none !important; text-align: left; }

/* store-showcase (4P 쇼핑몰 hero) */
.store-showcase {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  max-width: var(--container-max, 1480px); margin: 0 auto;
}
@media (min-width: 900px) { .store-showcase { grid-template-columns: 1fr minmax(280px, 360px); } }
.store-showcase__copy { min-width: 0; }
.store-showcase__chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0;
}
.store-showcase__chips .cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; background: #fff; border: 2px solid var(--c-ink);
  border-radius: 999px; font-family: var(--f-mono); font-size: 12px; font-weight: 700;
}

/* (2) shop 쇼핑몰 (4P) */
.shop-section { max-width: var(--container-max, 1480px); margin: 0 auto; }
.shop-section__head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 16px; margin-bottom: 22px;
}
.shop-section__head h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; letter-spacing: -.035em; line-height: 1.1; margin: 0; }
.shop-section__head p { margin: 4px 0 0; font-size: 14px; color: var(--c-mute); }
.shop-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.shop-meta { font-family: var(--f-mono); font-size: 12.5px; color: var(--c-mute); }
.shop-sort-wrap { display: flex; align-items: center; gap: 8px; }
.shop-sort-wrap label { font-family: var(--f-mono); font-size: 12px; color: var(--c-mute); }
#shopSort { font-family: var(--f-mono); font-size: 13px; font-weight: 700; background: #fff; border: 2px solid var(--c-ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.shop-categories {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 24px;
}
@media (max-width: 720px) { .shop-categories { grid-template-columns: repeat(2, 1fr); } }
.shop-cat {
  appearance: none; background: #fff; cursor: pointer;
  border: 2.5px solid var(--c-ink); border-radius: 16px;
  padding: 12px 14px; text-align: left;
  font-family: inherit; color: var(--c-ink);
  box-shadow: 3px 3px 0 0 var(--c-ink);
  transition: transform .12s, box-shadow .12s, background .12s;
  display: flex; flex-direction: column; gap: 4px;
}
.shop-cat:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--c-ink); }
.shop-cat.is-active { background: var(--c-ink); color: #fff; }
.shop-cat strong { font-size: 16px; font-weight: 900; }
.shop-cat small { font-family: var(--f-mono); font-size: 10.5px; opacity: 0.72; }
.shop-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 1180px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px)  { .shop-grid { grid-template-columns: 1fr; } }
.shop-card {
  background: #fff; border: 3px solid var(--c-ink); border-radius: 18px;
  box-shadow: 5px 5px 0 0 var(--c-ink); padding: 0; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column;
  cursor: pointer;
}
.shop-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--c-ink); }
.shop-card:focus-visible {
  outline: 4px solid var(--c-yellow);
  outline-offset: 3px;
}
.shop-card__figure {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: 18px; margin: 0; border-bottom: 2.5px solid var(--c-ink);
}
.shop-card__figure img { max-width: 75%; max-height: 75%; object-fit: contain; filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.18)); transition: transform .25s ease; }
.shop-card:hover .shop-card__figure img { transform: scale(1.06) rotate(-2deg); }
.shop-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px;
  border: 2px solid var(--c-ink); box-shadow: 2px 2px 0 0 var(--c-ink); transform: rotate(-5deg);
}
.shop-sold {
  position: absolute; top: 10px; right: 10px;
  background: rgba(21,19,26,0.85); color: #fff;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
}
.shop-card__tag {
  display: inline-block; margin: 14px 14px 0;
  background: #FFF7CC; color: var(--c-ink);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  border: 1.5px solid var(--c-ink); align-self: flex-start;
}
.shop-card__name { margin: 8px 14px 4px; font-size: 14.5px; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.shop-card__sub { margin: 0 14px 14px; font-size: 12px; line-height: 1.5; color: var(--c-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-card__price { margin: 0 14px 12px; display: flex; align-items: baseline; gap: 8px; }
.shop-card__price s { font-family: var(--f-mono); font-size: 11.5px; color: var(--c-mute); }
.shop-card__price strong { font-family: var(--f-mono); font-size: 18px; font-weight: 900; }
.shop-card__cta {
  appearance: none; cursor: pointer; margin: auto 14px 14px;
  background: var(--c-ink); color: #fff;
  border: 0; border-radius: 999px; padding: 10px 16px;
  font-family: inherit; font-size: 13px; font-weight: 800;
  transition: transform .12s, background .12s;
}
.shop-card__cta:hover:not(:disabled) { transform: translateY(-1px); background: #2a2730; }
.shop-card__cta:disabled { background: var(--c-mute); cursor: not-allowed; opacity: 0.7; }

.shop-story {
  max-width: var(--container-max, 1480px);
  margin: clamp(34px, 5vw, 58px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.shop-story__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 22px;
  align-items: stretch;
}
.shop-story__copy {
  background: linear-gradient(135deg, #fff9de 0%, #ffe7f3 100%);
  border: 3px solid var(--c-ink);
  border-radius: 30px;
  box-shadow: 10px 10px 0 0 var(--c-ink);
  padding: clamp(24px, 3vw, 36px);
}
.shop-story__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.shop-story__copy h2 {
  margin: 18px 0 12px;
  font-family: var(--f-head);
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.shop-story__copy p {
  max-width: 56ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink);
  opacity: .84;
}
.shop-story__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.shop-story__chips span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--c-ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
}
.shop-story__spotlight {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shop-story__spotlight-card {
  background: #fff;
  border: 3px solid var(--c-ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 0 var(--c-ink);
  padding: 20px 22px;
}
.shop-story__spotlight-card small {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  border: 2px solid var(--c-ink);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  transform: rotate(-4deg);
}
.shop-story__spotlight-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.shop-story__spotlight-card p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-mute);
}
.shop-story__spotlight-stack {
  position: relative;
  min-height: 240px;
  background: linear-gradient(135deg, #dff5d0 0%, #e6f6ff 100%);
  border: 3px dashed var(--c-ink);
  border-radius: 24px;
  overflow: hidden;
}
.shop-story__spotlight-stack img {
  position: absolute;
  width: clamp(150px, 42%, 210px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(6px 8px 0 rgba(21,19,26,.16));
}
.shop-story__spotlight-stack img:first-child {
  left: 12%;
  bottom: 14px;
  transform: rotate(-10deg);
}
.shop-story__spotlight-stack img:last-child {
  right: 10%;
  top: 18px;
  transform: rotate(9deg);
}
.shop-story__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.shop-story-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 3px solid var(--c-ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 0 var(--c-ink);
}
.shop-story-card--kit { background: #e9f8de; }
.shop-story-card--card { background: #f2e8ff; }
.shop-story-card--goods { background: #fff1d9; }
.shop-story-card small {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .8;
}
.shop-story-card h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.04;
  letter-spacing: -.04em;
}
.shop-story-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-ink);
  opacity: .82;
}
.shop-story-card__media {
  margin-top: auto;
  min-height: 160px;
  border: 2.5px solid var(--c-ink);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  display: grid;
  place-items: center;
  padding: 18px;
}
.shop-story-card__media img {
  max-width: 80%;
  max-height: 140px;
  object-fit: contain;
  filter: drop-shadow(4px 6px 0 rgba(21,19,26,.16));
}
@media (max-width: 1080px) {
  .shop-story__hero {
    grid-template-columns: 1fr;
  }
  .shop-story__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .shop-story__grid {
    grid-template-columns: 1fr;
  }
  .shop-story__spotlight-stack {
    min-height: 210px;
  }
}

.shop-modal-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 210, 77, 0.22), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 77, 143, 0.2), transparent 24%),
    rgba(21,19,26,.64);
  display: none;
  place-items: center;
  z-index: 140;
  padding: 24px;
}
.shop-modal-backdrop[data-open="true"] { display: grid; }
.shop-modal {
  position: relative;
  width: min(980px, 100%);
  max-height: min(90vh, 900px);
  overflow: auto;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,248,231,0.94)),
    #fff;
  border: 3px solid var(--c-ink);
  border-radius: 30px;
  box-shadow: 14px 14px 0 0 var(--c-ink);
  padding: clamp(20px, 3vw, 34px);
}
.shop-modal__close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--c-ink);
  background: var(--c-ink);
  color: var(--c-yellow);
  font-size: 18px;
  font-weight: 900;
  z-index: 2;
}
.shop-modal__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.shop-modal__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shop-modal__eyebrow {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--shop-accent, var(--c-accent));
  color: #fff;
  border: 2px solid var(--c-ink);
  box-shadow: 3px 3px 0 0 var(--c-ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  transform: rotate(-4deg);
}
.shop-modal__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--c-ink);
  border-radius: 28px;
  padding: 26px;
  display: grid;
  place-items: center;
  box-shadow: 8px 8px 0 0 var(--c-ink);
  overflow: hidden;
}
.shop-modal__figure::before,
.shop-modal__figure::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.shop-modal__figure::before {
  width: 84px;
  height: 84px;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,.24);
}
.shop-modal__figure::after {
  width: 120px;
  height: 18px;
  left: 20px;
  bottom: 22px;
  background: rgba(21,19,26,.08);
  filter: blur(8px);
}
.shop-modal__figure img {
  position: relative;
  z-index: 1;
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(6px 8px 0 rgba(21,19,26,.18));
  transform: rotate(-3deg);
}
.shop-modal__badge,
.shop-modal__sold,
.shop-modal__punch {
  position: absolute;
  border: 2px solid var(--c-ink);
  box-shadow: 3px 3px 0 0 var(--c-ink);
  font-family: var(--f-mono);
  font-weight: 800;
  letter-spacing: .05em;
}
.shop-modal__badge {
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  transform: rotate(-7deg);
  font-size: 11px;
}
.shop-modal__sold {
  top: 18px;
  right: 18px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(21,19,26,.9);
  color: #fff;
  font-size: 10.5px;
}
.shop-modal__punch {
  right: 18px;
  bottom: 20px;
  padding: 9px 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--c-ink);
  transform: rotate(4deg);
  font-size: 11px;
}
.shop-modal__mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--shop-soft, #fff4da);
  border: 2px solid var(--c-ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 0 var(--c-ink);
}
.shop-modal__mini strong {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
}
.shop-modal__mini span {
  font-size: 13px;
  line-height: 1.55;
}
.shop-modal__body {
  min-width: 0;
}
.shop-modal__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.shop-modal__index,
.shop-modal__state {
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--c-ink);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
}
.shop-modal__index {
  background: #fff;
  color: var(--c-ink);
}
.shop-modal__state {
  background: var(--c-ink);
  color: var(--c-yellow);
}
.shop-modal h3 {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.shop-modal__sub {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink);
  opacity: .82;
}
.shop-modal__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}
.shop-modal__price strong {
  font-family: var(--f-mono);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
}
.shop-modal__price s,
.shop-modal__price span {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-mute);
}
.shop-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.shop-modal__chips span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--c-ink);
  font-size: 12px;
  font-weight: 700;
}
.shop-modal__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.shop-modal__spec {
  padding: 12px 14px;
  border: 2px solid var(--c-ink);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
}
.shop-modal__spec small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--c-mute);
}
.shop-modal__spec strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}
.shop-modal__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.shop-modal__note {
  padding: 14px;
  border: 2px solid var(--c-ink);
  border-radius: 18px;
  box-shadow: 3px 3px 0 0 var(--c-ink);
}
.shop-modal__note--1 { background: #fff0d9; }
.shop-modal__note--2 { background: #ebf8ff; }
.shop-modal__note--3 { background: #f6ebff; }
.shop-modal__note small {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.shop-modal__note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.shop-modal__guide {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: clamp(16px, 2.4vw, 22px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255, 242, 214, .92)),
    #fff;
  border: 2.5px solid var(--c-ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 0 var(--c-ink);
}
.shop-modal__guide-head {
  display: grid;
  gap: 6px;
}
.shop-modal__guide-head small,
.shop-modal__guide-card small {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
}
.shop-modal__guide-head strong {
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.24;
}
.shop-modal__guide-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-mute);
}
.shop-modal__guide-copy {
  display: grid;
  gap: 10px;
}
.shop-modal__guide-copy p {
  margin: 0;
  padding: 14px 16px;
  background: rgba(255,255,255,.88);
  border: 2px solid var(--c-ink);
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.72;
}
.shop-modal__guide-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.shop-modal__guide-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--c-ink);
  border-radius: 18px;
  box-shadow: 3px 3px 0 0 var(--c-ink);
}
.shop-modal__guide-card--1 { background: #ebf8ff; }
.shop-modal__guide-card--2 { background: #fff0d9; }
.shop-modal__guide-card--3 { background: #f6ebff; }
.shop-modal__guide-card strong {
  font-size: 15px;
  line-height: 1.35;
}
.shop-modal__guide-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
}
.shop-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.shop-modal__cta,
.shop-modal__ghost {
  appearance: none;
  border: 2.5px solid var(--c-ink);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.shop-modal__cta {
  background: var(--c-ink);
  color: #fff;
  box-shadow: 3px 3px 0 0 var(--c-ink);
}
.shop-modal__ghost {
  background: #fff;
  color: var(--c-ink);
}
.shop-modal__cta:hover,
.shop-modal__ghost:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--c-ink);
}
@media (max-width: 840px) {
  .shop-modal__grid {
    grid-template-columns: 1fr;
  }
  .shop-modal__notes {
    grid-template-columns: 1fr;
  }
  .shop-modal__guide-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .shop-modal-backdrop {
    padding: 14px;
  }
  .shop-modal {
    padding: 18px;
    border-radius: 24px;
  }
  .shop-modal__specs {
    grid-template-columns: 1fr;
  }
  .shop-modal__guide-copy p {
    font-size: 13px;
  }
}

/* (3) silhouette progress + 4 state (4B) */
.silhouette-progress-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-ink); color: var(--c-yellow);
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 800; letter-spacing: .04em;
  box-shadow: 3px 3px 0 0 var(--c-ink); margin-bottom: 16px;
}
.silhouette-progress-wrap::before { content: '🎯'; font-size: 14px; }
.char-cell.is-silhouette { position: relative; background: #1a1820 !important; border-color: #1a1820 !important; pointer-events: none; cursor: not-allowed; }
.char-cell.is-silhouette > * { filter: brightness(0) saturate(0) !important; opacity: 0.5; }
.char-cell.is-silhouette::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(36px, 5vw, 56px); font-weight: 900; color: rgba(255, 210, 77, 0.65); text-shadow: 2px 2px 0 #000; z-index: 5; pointer-events: none; }
.char-cell.is-candidate { background: #2a2730 !important; border-color: var(--c-ink) !important; }
.char-cell.is-candidate > * { filter: brightness(0.55) saturate(0.4) !important; opacity: 0.85; }
.char-cell.is-candidate::after { content: '⋯'; position: absolute; top: 10px; right: 10px; background: var(--c-yellow); color: var(--c-ink); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; border: 2px solid var(--c-ink); z-index: 5; animation: candidatePulse 1.6s ease-in-out infinite; }
.char-cell.is-revealed::after { content: '✓'; position: absolute; top: 10px; right: 10px; background: #5DBA85; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; border: 2px solid var(--c-ink); box-shadow: 2px 2px 0 0 var(--c-ink); z-index: 5; }
.char-cell.is-archetype { outline: 4px solid var(--c-yellow, #FFD24D); outline-offset: -4px; transform: scale(1.02); animation: archetypeGlow 2.4s ease-in-out infinite; z-index: 2; }
.char-cell.is-archetype::after { content: '★ YOUR TYPE'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-yellow); color: var(--c-ink); padding: 4px 14px; border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 900; letter-spacing: .08em; border: 2px solid var(--c-ink); box-shadow: 2px 2px 0 0 var(--c-ink); white-space: nowrap; z-index: 6; }
@keyframes candidatePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes archetypeGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 77, 0.7); } 50% { box-shadow: 0 0 0 12px rgba(255, 210, 77, 0); } }

/* (4) section-leader (4N) */
.section-leader { position: absolute; top: 12px; right: 16px; display: grid; grid-template-columns: auto auto; align-items: end; gap: 6px; pointer-events: none; z-index: 5; max-width: 280px; }
.section-leader .sl-figure { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; filter: drop-shadow(3px 3px 0 var(--c-ink)); transform: rotate(-4deg); }
.section-leader .sl-img { width: 64px; height: auto; }
.section-leader .sl-name { background: var(--c-ink); color: #fff; padding: 2px 8px; border-radius: 999px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.section-leader .sl-bubble { pointer-events: auto; position: relative; background: #fff; border: 2.5px solid var(--c-ink); border-radius: 14px; box-shadow: 3px 3px 0 0 var(--c-ink); padding: 8px 12px; max-width: 200px; transform: rotate(2deg); }
.section-leader .sl-bubble::before { content: ''; position: absolute; right: -10px; bottom: 14px; width: 0; height: 0; border: 10px solid transparent; border-left-color: var(--c-ink); border-right: 0; }
.section-leader .sl-bubble::after { content: ''; position: absolute; right: -7px; bottom: 16px; width: 0; height: 0; border: 8px solid transparent; border-left-color: #fff; border-right: 0; }
.section-leader .sl-tip { margin: 0; font-size: 12px; line-height: 1.45; color: var(--c-ink); word-break: keep-all; }
@media (max-width: 1180px) { .section-leader { grid-template-columns: 1fr; top: 8px; right: 12px; max-width: 80px; } .section-leader .sl-bubble { display: none; } .section-leader .sl-img { width: 52px; } }

/* (5) hero-kit-icons + 4 leader CAMP color (4K) */
.hero-kit-icons { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; align-items: flex-start; }
.hero-kit-icons .hki { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.hero-kit-icons .hki img { width: 96px !important; height: 96px !important; filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.22)); transition: transform .2s ease; }
.hero-kit-icons .hki:nth-child(1) img { transform: rotate(-4deg); }
.hero-kit-icons .hki:nth-child(2) img { transform: rotate(3deg); }
.hero-kit-icons .hki:nth-child(3) img { transform: rotate(-2deg); }
.hero-kit-icons .hki:nth-child(4) img { transform: rotate(5deg); }
.hero-kit-icons .hki:hover img { transform: translateY(-4px) rotate(0); }
.hero-kit-icons .hki small { background: var(--c-ink); color: var(--c-yellow, #FFD24D); padding: 4px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }

/* (5-1) index intro split 통일 — 좌측 슬로건 / 우측 캐릭터(키트는 .landing-outline로 이전) */
.page-intro--home {
  align-items: start;
}
.page-intro--home .page-intro__copy {
  align-self: start;
}
.page-intro__eyebrow .ci {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
}
.page-intro--home .cat-chips {
  margin: 14px 0 18px;
}
.home-intro__hashes {
  margin-top: 10px;
}
.home-intro-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-self: stretch;
}
.page-intro--home .hero-leaders {
  display: block;
  min-height: 0;
  padding: 0;
}
.page-intro--home .hero-leaders .lc {
  display: none;
}
/* 4 leader 카드를 hls(서브페이지) 시각 토큰과 통일: column flex + 만화 말풍선 */
.page-intro--home .hero-leaders .lc.is-featured {
  display: flex;
  width: 100%;
  padding: 0;
  gap: 18px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
}
.page-intro--home .hero-leaders .lc.is-featured .lc-img {
  max-width: 240px !important;
  width: 100%;
  filter: drop-shadow(5px 5px 0 var(--c-ink));
}
.page-intro--home .hero-leaders .lc-bubble {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  border: 3px solid var(--c-ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 0 var(--c-ink);
  text-align: left;
  transform: rotate(1.5deg);
}
.page-intro--home .hero-leaders .lc-bubble::before {
  content: ''; position: absolute; top: -16px; left: 40px;
  width: 0; height: 0; border: 14px solid transparent;
  border-bottom-color: var(--c-ink); border-top: 0;
}
.page-intro--home .hero-leaders .lc-bubble::after {
  content: ''; position: absolute; top: -10px; left: 43px;
  width: 0; height: 0; border: 11px solid transparent;
  border-bottom-color: #fff; border-top: 0;
}

/* hub 페이지 슬로건 하단 4 아이콘: 컨테이너 비종속, 비율 보존 */
.hero-kit-icons--row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  align-items: end;
  justify-items: center;
}
.hero-kit-icons--row .hki {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-kit-icons--row .hki img {
  height: clamp(72px, 6.5vw, 92px) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.22));
  transition: transform .2s ease;
}
.hero-kit-icons--row .hki:hover img { transform: translateY(-4px); }
@media (max-width: 520px) {
  .hero-kit-icons--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
}

@media (min-width: 900px) {
  .page-intro--split.page-intro--home {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
    gap: 32px !important;
  }
}
@media (max-width: 899px) {
  .page-intro--home .page-intro__copy {
    align-self: start;
  }
  .page-intro--home .hero-leaders .lc.is-featured .lc-img {
    max-width: 180px !important;
  }
  /* 모바일/소형 태블릿: 우측 캐릭터 stage 블라인드 (슬로건+4 아이콘만 노출) */
  .page-intro--split > aside,
  .page-intro--split > .home-intro-stage,
  .page-intro--split > .hero-leader-stage {
    display: none !important;
  }
}
@media (max-width: 520px) {
  .page-intro--home .hero-leaders .lc.is-featured .lc-img {
    max-width: min(180px, 100%) !important;
  }
  .page-intro--home .hero-leaders .lc-bubble {
    max-width: 100%;
  }
}

/* (6) --container-max 컨테이너 통일 (4L-v2) */
body > header.topbar, body > footer.footer:not(.footer-mini) {
  max-width: 100% !important; width: 100% !important;
  padding-left: max(var(--pad-x, 24px), calc((100% - var(--container-max, 1480px)) / 2)) !important;
  padding-right: max(var(--pad-x, 24px), calc((100% - var(--container-max, 1480px)) / 2)) !important;
  box-sizing: border-box;
}
body > main, .checkout-main { max-width: var(--container-max, 1480px); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
body > footer.footer-mini { max-width: 100% !important; padding-left: max(20px, calc((100% - var(--container-max, 1480px)) / 2)) !important; padding-right: max(20px, calc((100% - var(--container-max, 1480px)) / 2)) !important; }

/* (7) fam-pill 2-layer (4E) + rp-kit-rec (4C) */
.fam-pill { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; padding: 8px 14px !important; text-align: left; }
.fam-pill strong { font-size: 13px; font-weight: 900; line-height: 1.1; }
.fam-pill small { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; opacity: 0.7; }
.fam-pill.active small { opacity: 0.95; }
/* .rp-kit-rec 그룹은 L2248 원본으로 단일화 (4R 영역 중복 적층 제거 2026-05-24). */

/* ──────────── 4R 즉시 픽스 (사용자 발견 3건, 2026-05-20) ──────────── */

/* (1) silhouette overlay 강제 제거 — localStorage에 demo 잔존 state로 노랑 테두리 오동작 차단
   특정 페이지(/characters.html?demo=...)에서만 명시적 표시. 디폴트는 모든 캐릭터 풀 컬러. */
.char-cell.is-archetype {
  outline: none !important;
  transform: none !important;
  animation: none !important;
}
.char-cell.is-archetype::after { display: none !important; }
/* is-revealed ✓ 배지도 디폴트에서는 숨김 — 진단 완료 후 명시 reveal만 표시 */
.char-cell.is-revealed::after { display: none !important; }
.char-cell.is-candidate::after { display: none !important; }
/* is-silhouette/.is-candidate 필터도 디폴트 제거 — 진단 진행 시 silhouette.js가 활성화 */
body:not([data-silhouette="on"]) .char-cell { filter: none !important; }
body:not([data-silhouette="on"]) .char-cell > * { filter: none !important; opacity: 1 !important; }

/* (2) 카드 번호 .num-tag가 캐릭터 이미지 위 가림 — z-index 낮춤 + 위치 좌상단 */
.char-cell .num-tag {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  z-index: 1 !important;
  background: var(--c-ink); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 800;
  pointer-events: none;
}
/* 캐릭터 이미지가 번호보다 위에 오도록 z-index 강제 */
.char-cell img, .char-cell .ic, .char-cell figure {
  position: relative; z-index: 2;
}

/* (3) sticker 위치 조정 — issue-stamp + chars-decor가 본문 침범 회피 */
.issue-stamp {
  /* characters.html 좌상단 ISSUE 01 도장 — fam-filter 위로 이동, z-index 살짝 낮춤 */
  top: 42px !important;
  left: -10px !important;
  z-index: 3 !important;
}
.chars-decor--best {
  /* BEST PICK 띠 — 우측 사이드 chip 침범 차단 */
  top: -20px !important;
  right: 20px !important;
  z-index: 3 !important;
  max-width: 120px;
}
.chars-decor--bookmark {
  z-index: 3 !important;
}

/* sticker 전반 — 본문 인터랙티브 요소 위 가림 차단 */
.hero-decor, .mag-decor, .chars-decor, .session-decor,
.pay-decor, .mv-side-decor, .kit-corner-ribbon,
.kit-price-tag, .pkg-stamp, .issue-stamp, .mv-magwall-stamp {
  z-index: 1 !important;  /* 본문 카드(z:2)보다 아래 */
  pointer-events: none;
}
.fam-filter, .char-grid, .sub-board, .side-chips,
.tier-grid, .cards-row, .shop-grid, .mv-grid {
  position: relative;
  z-index: 5 !important;  /* sticker 위 */
}