/* =========================================================
   DESIGN TOKENS  (DESIGN.md — Stripi system)
   ========================================================= */
:root {
  --primary:         #533afd;
  --primary-deep:    #4434d4;
  --primary-press:   #2e2b8c;
  --primary-soft:    #665efd;
  --primary-subdued: #b9b9f9;   /* pill-tag-soft bg */
  --brand-dark:      #1c1e54;

  /* Text */
  --ink:           #0d253d;   /* deep navy — never pure black */
  --ink-secondary: #273951;
  --ink-mute:      #64748d;
  --ink-mute2:     #61718a;
  --on-primary:    #ffffff;

  /* Surface */
  --canvas:        #ffffff;
  --canvas-soft:   #f6f9fc;   /* cool tinted off-white */
  --canvas-cream:  #f5e9d4;   /* warm cream interlude */
  --hairline:      #e3e8ee;
  --hairline-input:#a8c3de;

  /* Accent */
  --ruby:    #ea2261;
  --magenta: #f96bee;
  --lemon:   #9b6829;         /* sherbet orange stop */

  /* Radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 9999px;

  /* Spacing */
  --sp-xxs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-xxl: 32px;
  --sp-huge:64px;

  /* Shadows — blue-tinted (DESIGN.md elevation: level 1 / level 2) */
  --shadow-1: rgba(0,55,112,0.08) 0 1px 3px;
  --shadow-2: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px;

  /* Motion — 카드·버튼 공용 이징 */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nav-h: 78px;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  font-weight: 500;     /* 50+ 가독성 — 전 계층 500 통일 (DESIGN.md 예외: 크기처럼 굵기도 5060용 확대) */
  font-size: 18px;      /* 50+ 세대 타겟 — 기본 본문 크기 업 */
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
/* 50+ 접근성 — 키보드 포커스를 또렷하게 */
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* =========================================================
   TYPOGRAPHY  (DESIGN.md scale — Inter 500, negative tracking / 50+ 가독성용 전 계층 500)
   ========================================================= */
.display-xxl {
  /* 56px hero headline */
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -1.4px;
  font-feature-settings: "ss01";
  color: white;
}
.display-xl {
  /* 48px section opener */
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.96px;
  font-feature-settings: "ss01";
  color: var(--ink);
}
.display-lg {
  /* 32px card title */
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.64px;
  font-feature-settings: "ss01";
}
.display-md {
  /* 26px compact card title */
  font-size: 26px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.26px;
  font-feature-settings: "ss01";
}
/* tabular figures for any numeric/price cell */
.tnum { font-feature-settings: "tnum"; letter-spacing: -0.42px; }
.text-primary { color: var(--primary); }

/* =========================================================
   BUTTONS  (DESIGN.md: pill, 8px 16px, single indigo CTA)
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-size: 17px; font-weight: 500; line-height: 1;
  padding: 12px 24px;   /* DESIGN.md 최소 8px 16px — 50+ 터치 타겟으로 확대 */
  border-radius: var(--r-pill);
  min-height: 48px;
  cursor: pointer; border: none;
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  white-space: nowrap;
  font-feature-settings: "ss01";
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: rgba(0,55,112,0.16) 0 2px 8px;
}
.btn-primary:hover {
  background: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.btn-primary:active { background: var(--primary-press); transform: translateY(0); }
.btn-secondary {
  background: var(--canvas);
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-secondary:hover {
  background: rgba(83,58,253,0.05);
}
.btn-on-dark {
  background: var(--canvas);
  color: var(--primary);
}
.btn-on-dark:hover {
  box-shadow: rgba(0,55,112,0.28) 0 10px 28px;
  transform: translateY(-2px);
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 36px;
}
.nav-logo {
  font-size: 22px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.5px;
  flex-shrink: 0;
}
.dot { color: var(--primary); }
.nav-links {
  display: flex; gap: 36px; flex: 1;
  justify-content: center;
  align-self: stretch;
}
.nav-links a {
  font-size: 17px; font-weight: 500; color: var(--ink-secondary);
  transition: color 0.15s; position: relative;
  display: inline-flex; align-items: center;
}
.nav-links a:hover { color: var(--ink); }
.nav-active { color: var(--ink) !important; font-weight: 500 !important; }
.nav-active::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--primary); border-radius: 2px;
}
.nav-cta { margin-left: auto; font-size: 16px; padding: 10px 20px; min-height: 44px; }

@media (max-width: 767px) {
  .nav-inner {
    flex-wrap: wrap; gap: 0;
    height: auto;
    padding: 12px 20px 0;
  }
  .nav-logo { flex: 1; order: 1; }
  .nav-cta  { margin-left: 0; font-size: 14px; padding: 9px 18px; min-height: 40px; order: 2; }
  .nav-links {
    flex: 0 0 100%; justify-content: space-around; gap: 0;
    align-self: auto; order: 3;
    border-top: 1px solid var(--hairline);
    margin-top: 10px; padding: 12px 0;
  }
  .nav-links a { font-size: 15px; }
  .nav-active::after { bottom: -12px; }
}

/* =========================================================
   FRIP HERO BANNER
   ========================================================= */
.frip-hero {
  position: relative;
  margin-top: var(--nav-h);
  height: 480px;
  overflow: hidden;
  display: flex; align-items: center;
}
.frip-hero-bg {
  position: absolute; inset: 0;
  /* DESIGN.md mesh: cream → sherbet orange → lavender → indigo → ruby → magenta */
  background:
    linear-gradient(
      115deg,
      #1c1e54 0%,
      #4434d4 28%,
      #665efd 48%,
      #b9b9f9 65%,
      #ea2261 82%,
      #f96bee 100%
    );
}
.frip-hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  /* organic blobs (DESIGN.md: "the mesh has organic blob shapes") — 팔레트 색의 radial 레이어 */
  background:
    radial-gradient(ellipse 42% 60% at 80% 12%, rgba(249,107,238,0.55), transparent 70%),
    radial-gradient(ellipse 38% 65% at 95% 78%, rgba(234,34,97,0.50), transparent 70%),
    radial-gradient(ellipse 50% 70% at 42% 95%, rgba(185,185,249,0.38), transparent 72%),
    radial-gradient(ellipse 55% 80% at 5% 8%, rgba(28,30,84,0.65), transparent 75%),
    radial-gradient(ellipse 30% 40% at 60% 30%, rgba(102,94,253,0.40), transparent 70%);
}
.frip-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  /* atmospheric overlay — keeps text readable while mesh breathes */
  background: rgba(12,18,60,0.34);
}
.frip-hero-text {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 24px;
}
.frip-hero-text h1 {
  /* display-xxl: 56px, weight 300, -1.4px tracking — 50+용 상한 60px */
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -1.4px;
  font-feature-settings: "ss01";
  color: white;
  margin-bottom: 18px;
  text-wrap: balance;
}
.frip-hero-text p {
  font-size: 20px; font-weight: 500;
  line-height: 1.65;
  color: rgba(255,255,255,0.95);
  margin-bottom: 36px;
  max-width: 560px;
}
.frip-hero-text .btn-hero {
  /* button-secondary (DESIGN.md): canvas bg, primary text, pill */
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--canvas); color: var(--primary);
  font-size: 18px; font-weight: 500; line-height: 1;
  padding: 14px 28px; min-height: 52px;
  border-radius: var(--r-pill);
  font-feature-settings: "ss01";
  box-shadow: rgba(0,55,112,0.20) 0 4px 16px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.frip-hero-text .btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: rgba(0,55,112,0.28) 0 10px 28px;
}
.hero-slide-indicator {
  position: absolute; bottom: 20px; right: 24px;
  font-size: 12px; color: rgba(255,255,255,0.65);
  z-index: 1;
}

/* =========================================================
   CATEGORY BAR
   ========================================================= */
.category-bar {
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
}
.category-bar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
  display: flex; gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-bar-inner::-webkit-scrollbar { display: none; }
.cat-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 20px 30px;
  min-width: fit-content;
  color: var(--ink-secondary); font-size: 17px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap; cursor: pointer;
}
.cat-item:hover { color: var(--ink); border-bottom-color: var(--ink); }
.cat-item.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.cat-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  /* 라인 아이콘 — 이모지 대신 네이비 스트로크 (5060 신뢰감) */
  color: var(--brand-dark);
}
.cat-icon svg { width: 36px; height: 36px; }
.cat-item:hover .cat-icon { transform: translateY(-3px); box-shadow: var(--shadow-2); }
/* 팔레트 틴트로 카테고리별 리듬 (DESIGN.md 색의 알파 틴트만 사용) */
.cat-item:nth-child(1) .cat-icon { background: var(--canvas-cream);        border-color: rgba(155,104,41,0.25); }
.cat-item:nth-child(2) .cat-icon { background: rgba(249,107,238,0.14);     border-color: rgba(249,107,238,0.35); }
.cat-item:nth-child(3) .cat-icon { background: rgba(185,185,249,0.30);     border-color: rgba(102,94,253,0.35); }
.cat-item:nth-child(4) .cat-icon { background: rgba(234,34,97,0.10);       border-color: rgba(234,34,97,0.28); }
.cat-item:nth-child(5) .cat-icon { background: rgba(83,58,253,0.10);       border-color: rgba(83,58,253,0.30); }
.cat-item:nth-child(6) .cat-icon { background: rgba(28,30,84,0.08);        border-color: rgba(28,30,84,0.25); }
.cat-item:nth-child(7) .cat-icon { background: var(--canvas-cream);        border-color: rgba(155,104,41,0.25); }
.cat-item:nth-child(8) .cat-icon { background: rgba(185,185,249,0.30);     border-color: rgba(102,94,253,0.35); }

/* =========================================================
   SECTION BLOCK
   ========================================================= */
.section-block {
  padding: 88px 24px;   /* DESIGN.md: section gaps tend toward 96px */
  background: var(--canvas);
}
.section-block.bg-soft { background: var(--canvas-soft); }

.section-wrap-frip { max-width: 1200px; margin: 0 auto; }

.section-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 36px;
}
.section-title-row h2 {
  /* display-lg: 32px weight 300 -0.64px — 위계를 또렷하게 */
  font-size: clamp(24px, 3vw, 32px); font-weight: 500;
  color: var(--ink); letter-spacing: -0.64px;
  line-height: 1.15;
  font-feature-settings: "ss01";
}
.view-all {
  /* link-on-light (DESIGN.md): primary 텍스트 링크 */
  font-size: 17px; font-weight: 500; color: var(--primary);
  transition: color 0.15s;
}
.view-all:hover { color: var(--primary-deep); }

/* =========================================================
   PHOTO CARDS — Frip style
   ========================================================= */
.photo-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.photo-card {
  cursor: pointer;
  transition: transform 0.25s var(--ease-out);
}
.photo-card:hover { transform: translateY(-5px); }

.photo-card-img {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.25s var(--ease-out);
}
.photo-card:hover .photo-card-img { box-shadow: var(--shadow-2); }
.photo-card-img::after {
  /* 상단 하이라이트 — 사진에 유리 같은 깊이감 */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent 45%);
  pointer-events: none;
}
.photo-card-img-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 58px;
  transition: transform 0.35s var(--ease-out);
}
.photo-card:hover .photo-card-img-inner { transform: scale(1.06); }
/* 실사 사진 — 그라디언트+이모지 위에 얹혀 로드 실패 시 자연스럽게 폴백 */
.photo-card-img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-out);
}
.photo-card:hover .photo-card-img > img { transform: scale(1.06); }
/* DESIGN.md 규칙: 그라디언트는 문서화된 stop만 사용
   (cream #f5e9d4 · lemon #9b6829 · lavender #b9b9f9 · indigo 계열 · ruby #ea2261 · magenta #f96bee · navy #1c1e54) */
.diffuser-bg   { background: linear-gradient(135deg, #f5e9d4 0%, #f96bee 55%, #ea2261 100%); }
.tea-bg        { background: linear-gradient(135deg, #f6f9fc 0%, #f5e9d4 40%, #9b6829 100%); }
.embroidery-bg { background: linear-gradient(135deg, #b9b9f9 0%, #665efd 55%, #4434d4 100%); }
.book-bg    { background: linear-gradient(135deg, #f5e9d4 0%, #9b6829 100%); }
.photo-bg   { background: linear-gradient(135deg, #f6f9fc 0%, #b9b9f9 50%, #665efd 100%); }
.museum-bg  { background: linear-gradient(135deg, #f5e9d4 0%, #b9b9f9 55%, #4434d4 100%); }
.grow-bg    { background: linear-gradient(135deg, #665efd 0%, #533afd 45%, #1c1e54 100%); }
/* 새 모델 카드 배경 (동일 stop 재사용) */
.coffee-bg  { background: linear-gradient(135deg, #f6f9fc 0%, #f5e9d4 40%, #9b6829 100%); }
.draw-bg    { background: linear-gradient(135deg, #b9b9f9 0%, #665efd 55%, #4434d4 100%); }
.video-bg   { background: linear-gradient(135deg, #f6f9fc 0%, #b9b9f9 50%, #665efd 100%); }
.blog-bg    { background: linear-gradient(135deg, #f5e9d4 0%, #b9b9f9 55%, #4434d4 100%); }

.photo-heart {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.photo-card-body { padding: 14px 2px 0; }
.photo-card-location {
  font-size: 15px; color: var(--ink-secondary);
  margin-bottom: 5px;
}
.photo-card-title {
  font-size: 19px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.3px; line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.star-row {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px;
}
.stars { color: var(--lemon); font-size: 15px; letter-spacing: -0.3px; }
.review-count { font-size: 15px; color: var(--ink-mute); font-feature-settings: "tnum"; }
.price-row { margin-bottom: 10px; }
.price-main { font-size: 21px; font-weight: 500; color: var(--ink); letter-spacing: -0.42px; font-feature-settings: "tnum"; }
.price-original { font-size: 15px; color: var(--ink-mute); text-decoration: line-through; margin-right: 4px; font-feature-settings: "tnum"; }
.price-discount { font-size: 17px; font-weight: 500; color: var(--ruby); margin-right: 4px; font-feature-settings: "tnum"; }
.badge-row { display: flex; gap: 5px; flex-wrap: wrap; }
.badge {
  /* tag pill (DESIGN.md): 태그류는 pill radius */
  display: inline-block;
  font-size: 14px; font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  color: var(--ink-mute);
  background: var(--canvas-soft);
}
.badge-primary {
  /* pill-tag-soft 색상 — primary 채움은 CTA 전용 (DESIGN.md) */
  background: var(--primary-subdued); color: var(--primary-deep); border-color: var(--primary-subdued);
}
.badge-new     { background: var(--brand-dark); color: white; border-color: var(--brand-dark); }

/* =========================================================
   TRUST BAND (eyebrow strip)
   ========================================================= */
.trust-band {
  /* card-cream-band (DESIGN.md): 크림 인터루드로 색 리듬 부여 */
  background: var(--canvas-cream);
  border-top: 1px solid rgba(155,104,41,0.18);
  border-bottom: 1px solid rgba(155,104,41,0.18);
  padding: 26px 24px;
}
.trust-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 24px;
}
.trust-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 500; color: var(--ink-secondary);
}
.trust-item svg { flex-shrink: 0; }
.trust-sep { width: 1px; height: 16px; background: rgba(155,104,41,0.28); }

/* =========================================================
   INSTRUCTORS SECTION (kept)
   ========================================================= */
.instructors {
  background: var(--canvas-soft);
  padding: 96px 24px;   /* DESIGN.md whitespace philosophy */
}
.section-wrap { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-header .eyebrow { display: inline-block; margin-bottom: 18px; }
.section-header h2 { margin-bottom: 16px; }
.section-desc {
  font-size: 19px; font-weight: 500;
  color: var(--ink-secondary); line-height: 1.75;
  max-width: 640px; margin: 0 auto;
}
.eyebrow {
  /* pill-tag-soft (DESIGN.md) — 50+용으로 micro-cap 확대 */
  display: inline-block;
  background: var(--primary-subdued);   /* #b9b9f9 */
  color: var(--primary-deep);           /* #4434d4 */
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-feature-settings: "ss01";
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-feature-light {
  /* card-feature-light (DESIGN.md): canvas bg, 32px padding, r-lg, blue shadow */
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);   /* 32px */
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.card-feature-light:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-5px);
  border-color: var(--primary-subdued);
}
.card-cream {
  /* card-cream-band (DESIGN.md): warm interlude — canvas-cream bg */
  background: var(--canvas-cream);
  border-color: rgba(155,104,41,0.22);
}
.card-icon { width: 44px; height: 44px; margin-bottom: 4px; }
.card-icon svg { width: 44px; height: 44px; }
.pill-tag {
  /* pill-tag-soft (DESIGN.md) — 50+용으로 micro-cap 확대 */
  display: inline-block;
  background: var(--primary-subdued);   /* #b9b9f9 */
  color: var(--primary-deep);           /* #4434d4 */
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--r-pill);
  align-self: flex-start;
  font-feature-settings: "ss01";
}
.card-cream .pill-tag {
  background: rgba(155,104,41,0.18);   /* lemon tint */
  color: #7a5820;
}
.card-name {
  /* heading-lg 22px — 한글 300은 5060에게 흐릿해 400으로 강조 */
  font-size: 22px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.22px;
  font-feature-settings: "ss01";
}
.card-title {
  /* indigo는 CTA·링크 전용 — 본문급 텍스트는 ink 계열 (DESIGN.md) */
  font-size: 16px; font-weight: 500;
  color: var(--ink-secondary);
  letter-spacing: -0.2px;
}
.card-bio {
  font-size: 16px; font-weight: 500;
  color: var(--ink-secondary); line-height: 1.8;
  flex: 1;
}
.card-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 6px;
}
.card-chips span {
  font-size: 14px; color: var(--ink-mute);
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  padding: 5px 12px; border-radius: var(--r-pill);
}

/* =========================================================
   왜 잇다 · 신청 방법  (사업계획서 기반 섹션)
   ========================================================= */
.why-icon {
  /* 라벤더 틴트 원 안의 아이콘 — 팔레트 내 색만 사용 */
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: rgba(185,185,249,0.28);
  border: 1px solid rgba(102,94,253,0.22);
  margin-bottom: 6px;
}
.card-cream .why-icon {
  background: rgba(255,255,255,0.65);
  border-color: rgba(155,104,41,0.25);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
.step-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);   /* 32px — card-feature-light 스펙 */
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.step-card:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.step-num {
  /* display-md 숫자 + tnum (DESIGN.md 금융 시그니처) */
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 500;
  font-feature-settings: "tnum";
  color: var(--primary-deep);
  background: var(--canvas-cream);
  border: 1px solid rgba(155,104,41,0.28);
  margin-bottom: 6px;
}
.steps-note {
  /* 크림 안내 카드 — 온라인이 어려운 분들을 위한 안심 문구 */
  background: var(--canvas-cream);
  border: 1px solid rgba(155,104,41,0.22);
  border-radius: var(--r-lg);
  padding: 22px 28px;
  font-size: 18px; font-weight: 500;
  color: var(--ink-secondary);
  line-height: 1.7;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* =========================================================
   REVIEW CARDS
   ========================================================= */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.review-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.review-header {
  display: flex; align-items: center; justify-content: space-between;
}
.reviewer {
  display: flex; align-items: center; gap: 10px;
}
.reviewer-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(185,185,249,0.25);
  border: 1px solid rgba(102,94,253,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.reviewer-info { display: flex; flex-direction: column; gap: 2px; }
.reviewer-name { font-size: 17px; font-weight: 500; color: var(--ink); }
.review-stars { color: var(--lemon); font-size: 16px; }
.review-date { font-size: 15px; color: var(--ink-mute); }
.review-text {
  font-size: 17px; font-weight: 500; color: var(--ink-secondary);
  line-height: 1.85; flex: 1;
  letter-spacing: 0;
}
.review-text::before {
  /* 따옴표 장식 — 후기에 격조를 더하는 디테일 */
  content: '\201C';
  display: block;
  font-size: 40px; font-weight: 500; line-height: 0.6;
  color: var(--primary-subdued);
  margin-bottom: 6px;
}
.review-class-ref {
  display: flex; align-items: center; gap: 10px;
  background: var(--canvas-soft);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.review-class-thumb {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.review-class-name {
  font-size: 15px; color: var(--ink-secondary); line-height: 1.5;
}

/* =========================================================
   CTA BANNER (Frip style)
   ========================================================= */
.frip-cta-banner {
  /* card-cream-band (DESIGN.md): canvas-cream bg, ink text, r-lg — warm interlude */
  position: relative;
  background: var(--canvas-cream);
  border-radius: var(--r-lg);
  margin: 0 24px;
  padding: 48px 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border: 1px solid rgba(155,104,41,0.22);
  box-shadow: var(--shadow-1);
}
.frip-cta-banner::before {
  /* 크림 위에 은은한 라벤더 블롭 — 팔레트 내 색 리듬 */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 45% 90% at 92% 15%, rgba(185,185,249,0.45), transparent 70%),
    radial-gradient(ellipse 30% 60% at 78% 100%, rgba(249,107,238,0.14), transparent 70%);
  pointer-events: none;
}
.frip-cta-banner > * { position: relative; }
.frip-cta-banner-text h3 {
  /* display-md 26px — 카드급 제목은 400으로 강조 (5060 가독성) */
  font-size: 26px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.26px; line-height: 1.25; margin-bottom: 10px;
  font-feature-settings: "ss01";
}
.frip-cta-banner-text p {
  font-size: 18px; font-weight: 500; color: var(--ink-secondary);
  line-height: 1.7; margin-bottom: 24px;
}
.frip-cta-banner-emoji { font-size: 72px; line-height: 1; flex-shrink: 0; }

/* =========================================================
   CTA BAND (dark — classes/contact pages)
   ========================================================= */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--brand-dark);
  padding: 104px 24px;
  text-align: center;
}
.cta-band::before {
  /* 다크 밴드 위 인디고·마젠타 글로우 — 팔레트 내 색만 사용 */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 90% at 50% 118%, rgba(83,58,253,0.40), transparent 72%),
    radial-gradient(ellipse 40% 55% at 88% -5%, rgba(249,107,238,0.14), transparent 70%),
    radial-gradient(ellipse 35% 50% at 8% 10%, rgba(234,34,97,0.10), transparent 70%);
}
.cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.cta-title { color: white; margin-bottom: 20px; letter-spacing: -0.64px; }
.cta-desc {
  font-size: 18px; font-weight: 500;
  color: rgba(255,255,255,0.86);
  line-height: 1.8; margin-bottom: 36px;
}

/* =========================================================
   FOOTER  (DESIGN.md footer-light: canvas bg, ink-mute text, caption size)
   ========================================================= */
.footer {
  /* footer-light (DESIGN.md): canvas bg, 64px 24px padding */
  position: relative;
  background: var(--canvas);
  padding: var(--sp-huge) 24px 0;   /* 64px */
}
.footer::before {
  /* 푸터 진입부 메시 헤어라인 — 브랜드 그라디언트 시그니처 */
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f5e9d4 0%, #b9b9f9 30%, #533afd 55%, #ea2261 80%, #f96bee 100%);
}
.footer-top {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 64px; flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
}
.footer-col { display: flex; flex-direction: column; gap: 12px; min-width: 140px; }
.footer-col-title {
  font-size: 17px; font-weight: 500; color: var(--ink);
  margin-bottom: 6px; letter-spacing: -0.2px;
}
.footer-col a, .footer-col span {
  font-size: 16px; color: var(--ink-secondary);
  letter-spacing: -0.2px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  padding: 32px 0 44px;
}
.footer-brand-name {
  font-size: 20px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.4px; margin-bottom: 16px;
}
.footer-brand-name span { color: var(--primary); }
.footer-bizinfo {
  font-size: 15px; color: var(--ink-secondary);
  line-height: 2.1; letter-spacing: -0.2px;
}
.footer-bizinfo a { color: var(--primary); }
.footer-divider-line {
  border: none; border-top: 1px solid var(--hairline);
  margin: 18px 0;
}
.footer-copyright {
  font-size: 15px; color: var(--ink-mute);
}

/* =========================================================
   PAGE HERO (sub-pages)
   ========================================================= */
.page-hero {
  position: relative; overflow: hidden;
  padding: 140px 24px 88px;
  min-height: 380px;
  display: flex; align-items: center;
  /* DESIGN.md mesh gradient — same stops as hero */
  background: linear-gradient(
    115deg,
    #1c1e54 0%,
    #4434d4 28%,
    #665efd 48%,
    #b9b9f9 65%,
    #ea2261 82%,
    #f96bee 100%
  );
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  /* organic blobs — 메인 히어로와 같은 메시 언어 */
  background:
    radial-gradient(ellipse 42% 60% at 82% 15%, rgba(249,107,238,0.50), transparent 70%),
    radial-gradient(ellipse 38% 65% at 96% 80%, rgba(234,34,97,0.45), transparent 70%),
    radial-gradient(ellipse 50% 70% at 40% 100%, rgba(185,185,249,0.35), transparent 72%),
    radial-gradient(ellipse 55% 80% at 4% 5%, rgba(28,30,84,0.60), transparent 75%);
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  /* navy-tinted overlay — 순수 검정 대신 브랜드 잉크 계열 */
  background: rgba(12,18,60,0.26);
}
.page-hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.page-hero-inner .eyebrow {
  background: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  margin-bottom: 20px;
}
.page-hero-inner h1 {
  /* display-xl (DESIGN.md): 48px weight 300 -0.96px */
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500; line-height: 1.12;
  letter-spacing: -0.96px;
  font-feature-settings: "ss01";
  color: white;
  max-width: 640px; margin-bottom: 18px;
  text-wrap: balance;
}
.page-hero-sub {
  font-size: 19px; font-weight: 500;
  color: rgba(255,255,255,0.94); line-height: 1.75;
  max-width: 540px;
}

/* =========================================================
   CLASSES PAGE
   ========================================================= */
.classes-section { background: var(--canvas); padding: 80px 24px 96px; }
.class-category { margin-bottom: 88px; }
.category-header { margin-bottom: 36px; }
.category-header .pill-tag { margin-bottom: 14px; }
.category-header h2 {
  /* display-lg (DESIGN.md): 32px weight 300 -0.64px */
  margin-bottom: 10px; font-size: clamp(24px, 3vw, 32px);
  font-weight: 500; letter-spacing: -0.64px; line-height: 1.15;
  color: var(--ink); font-feature-settings: "ss01";
}
.category-header p { font-size: 18px; font-weight: 500; color: var(--ink-secondary); line-height: 1.7; }
.category-divider {
  border: none; border-top: 1px solid var(--hairline); margin: 0 0 88px;
}

.class-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.class-photo-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--hairline);   /* #e3e8ee */
  box-shadow: var(--shadow-1);          /* blue-tinted */
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  cursor: pointer;
}
.class-photo-card:hover {
  box-shadow: var(--shadow-2);          /* level-2 blue shadow */
  transform: translateY(-6px);
  border-color: var(--primary-subdued);
}
.class-photo-top {
  height: 224px;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  position: relative;
  overflow: hidden;
}
.class-photo-top::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent 45%);
  pointer-events: none;
}
.class-photo-top > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-out);
}
.class-photo-card:hover .class-photo-top > img { transform: scale(1.05); }
/* DESIGN.md 팔레트 stop만 사용 */
.dance-bg  { background: linear-gradient(135deg, #f5e9d4 0%, #f96bee 55%, #ea2261 100%); }
.art-bg    { background: linear-gradient(135deg, #f6f9fc 0%, #f5e9d4 40%, #9b6829 100%); }
.eng-bg    { background: linear-gradient(135deg, #b9b9f9 0%, #665efd 55%, #4434d4 100%); }
.ai-bg     { background: linear-gradient(135deg, #665efd 0%, #533afd 45%, #1c1e54 100%); }

.class-photo-body { padding: 28px 28px 32px; }
.class-photo-tag {
  /* micro-cap eyebrow — indigo는 CTA·링크 전용 (DESIGN.md) */
  font-size: 13px; font-weight: 500; color: var(--ink-secondary);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.class-photo-name {
  /* display-md 26px — 카드급 제목은 400으로 강조 (5060 가독성) */
  font-size: 26px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.26px; line-height: 1.2; margin-bottom: 12px;
  font-feature-settings: "ss01";
}
.class-photo-desc {
  font-size: 17px; font-weight: 500; color: var(--ink-secondary);
  line-height: 1.8; margin-bottom: 20px;
}
.class-detail-list {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
  font-size: 16px; color: var(--ink-secondary);
  border-top: 1px solid var(--hairline); padding-top: 18px;
  margin-bottom: 22px;
}
.detail-label {
  display: inline-block; min-width: 40px;
  font-weight: 500; color: var(--ink-mute); margin-right: 8px;
}
.class-cta { align-self: flex-start; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-section { background: var(--canvas-soft); padding: 88px 24px 96px; }
.contact-wrap {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start;
}
.contact-main { display: flex; flex-direction: column; gap: 24px; }
.contact-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-1);
}
.contact-card h2 {
  /* display-md 26px — 카드급 제목은 400으로 강조 (5060 가독성) */
  font-size: 26px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.26px; margin-bottom: 12px;
  font-feature-settings: "ss01";
}
.contact-desc {
  font-size: 17px; font-weight: 500; color: var(--ink-secondary);
  line-height: 1.8; margin-bottom: 24px;
}
.email-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 19px; font-weight: 500; color: var(--primary);
  background: rgba(83,58,253,0.05);
  border: 1px solid rgba(83,58,253,0.18);
  border-radius: var(--r-lg); padding: 18px 24px;
  margin-bottom: 24px;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  width: 100%;
}
.email-link:hover { background: rgba(83,58,253,0.09); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.contact-tips {
  /* 크림 인터루드 — 안내 박스에 온기 */
  background: var(--canvas-cream);
  border: 1px solid rgba(155,104,41,0.20);
  border-radius: var(--r-md); padding: 24px;
}
.tips-title { font-size: 14px; font-weight: 500; color: var(--ink-secondary); margin-bottom: 14px; letter-spacing: 0.4px; text-transform: uppercase; }
.contact-tips ul { display: flex; flex-direction: column; gap: 11px; }
.contact-tips li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px; font-weight: 500; color: var(--ink-secondary); line-height: 1.7;
}
.contact-tips li svg { flex-shrink: 0; margin-top: 2px; }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.info-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 9px;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.info-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.info-title { font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -0.2px; }
.info-desc  { font-size: 16px; font-weight: 500; color: var(--ink-secondary); line-height: 1.75; }

/* FAQ */
.faq-section { background: var(--canvas); padding: 96px 24px; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px 0;
  font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -0.2px;
  cursor: pointer; list-style: none; user-select: none;
  transition: color 0.15s;
}
.faq-q:hover { color: var(--primary-deep); }
.faq-q::-webkit-details-marker { display: none; }
.faq-chevron { flex-shrink: 0; color: var(--ink-mute); transition: transform 0.2s var(--ease-out); }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  font-size: 17px; font-weight: 500; color: var(--ink-secondary); line-height: 1.85;
  padding: 0 0 28px; max-width: 640px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1023px) {
  .photo-card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .review-grid     { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap    { grid-template-columns: 1fr; }
  .steps-grid      { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto 28px; }
}
@media (max-width: 767px) {
  :root { --nav-h: 118px; }   /* 모바일 2단 내비 실측 높이 */
  .frip-hero       { height: 400px; }
  .frip-hero-text p { font-size: 18px; }
  .page-hero       { padding: 156px 20px 64px; min-height: 300px; }
  .photo-card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .class-photo-grid{ grid-template-columns: 1fr; gap: 20px; }
  .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; }
  .review-grid     { grid-template-columns: 1fr; }
  .section-block   { padding: 56px 20px; }
  .instructors     { padding: 64px 20px; }
  .steps-grid      { grid-template-columns: 1fr; gap: 16px; }
  .steps-note      { font-size: 16px; padding: 18px 22px; }
  .frip-cta-banner { flex-direction: column; padding: 36px 28px; margin: 0 20px; }
  .frip-cta-banner-emoji { display: none; }
  .footer-top      { gap: 36px; }
  .cta-band        { padding: 72px 20px; }
  .faq-section     { padding: 72px 20px; }
  .contact-section { padding: 56px 20px 72px; }
  .classes-section { padding: 56px 20px 72px; }
  .class-photo-body { padding: 24px 22px 28px; }
  .contact-card    { padding: 28px 24px; }
}
@media (max-width: 480px) {
  .cat-item        { padding: 14px 18px; font-size: 15px; }
  .cat-icon        { width: 54px; height: 54px; }
  .cat-icon svg    { width: 30px; height: 30px; }
}

/* =========================================================
   모임 지도 (Leaflet) — DESIGN.md 토큰 준수, 5060 큰 글씨
   ========================================================= */
.map-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.itda-map {
  width: 100%;
  height: 460px;
  background: var(--canvas-soft);
  display: flex; align-items: center; justify-content: center;
}
.map-loading {
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1.7;
  text-align: center;
  padding: 24px;
}
.map-legend {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink-secondary);
  font-size: 17px; font-weight: 500;
}
.map-legend-pin {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--canvas);
  box-shadow: var(--shadow-1);
}

/* 브랜드 핀 — 인디고 원형 + '잇' */
.itda-pin-wrap { background: none; border: none; }
.itda-pin {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  border: 3px solid var(--canvas);
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 500;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 팝업 — 큰 글씨·잇다 톤 */
.leaflet-popup-content-wrapper {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.leaflet-popup-content { margin: 16px 18px; }
.itda-pop {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--ink);
  min-width: 190px;
}
.itda-pop strong { font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.itda-pop span   { font-size: 16px; color: var(--ink-secondary); line-height: 1.55; }
.itda-pop-btn {
  margin-top: 10px;
  align-self: flex-start;
  background: var(--primary);
  color: var(--on-primary) !important;
  font-size: 15px; font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  text-decoration: none;
}
.itda-pop-btn:hover { background: var(--primary-press); }

/* 줌 버튼 — 5060 터치 타깃 확대 */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
  width: 44px; height: 44px; line-height: 44px;
  font-size: 22px;
  color: var(--ink);
}
.leaflet-container { font-family: 'Noto Sans KR', sans-serif; }
.leaflet-container a.leaflet-popup-close-button {
  width: 34px; height: 34px; font-size: 22px; padding: 6px 6px 0 0;
}

@media (max-width: 767px) {
  .itda-map   { height: 360px; }
  .map-legend { font-size: 15px; padding: 14px 18px; }
}