/* ============================================================
   Bookie — Tabler 오버라이드 + 브랜드 토큰
   Tabler 1.4 (Bootstrap 5 기반) 위에 Bookie 컬러/타이포 적용
   ============================================================ */

:root {
  /* ------- Bookie 컬러 토큰 (주니어 톤: 밝고 부드럽게) ------- */
  --bk-navy-900:  #1A2440;
  --bk-navy-700:  #2A3A5E;   /* brand primary */
  --bk-navy-500:  #475569;
  --bk-cream-100: #FFFCF5;   /* page bg — 거의 화이트 */
  --bk-cream-200: #FBF5E8;   /* 옅은 크림 */
  --bk-gold-500:  #E0B560;   /* accent (Maple, 밝게) */
  --bk-gold-300:  #EFD49A;
  --bk-sage-500:  #94A88A;
  --bk-coral-500: #F09080;
  --bk-sky-500:   #B8D0E5;
  --bk-ink-900:   #1A2440;
  --bk-ink-700:   #475569;
  --bk-ink-500:   #7C8AA0;
  --bk-ink-300:   #C8D0DD;
  --bk-ink-100:   #EEF1F6;

  /* ------- Tabler 변수 오버라이드 (Bookie 매핑) ------- */
  --tblr-primary:        var(--bk-navy-700);
  --tblr-primary-rgb:    42, 58, 94;
  --tblr-primary-fg:     var(--bk-cream-100);
  --tblr-primary-hover:  var(--bk-navy-900);
  --tblr-primary-active: var(--bk-navy-900);

  --tblr-secondary:        #7C8AA0;
  --tblr-secondary-rgb:    124, 138, 160;
  --tblr-secondary-fg:     #FFFCF5;
  --tblr-secondary-hover:  #475569;

  --tblr-success: var(--bk-sage-500);
  --tblr-warning: var(--bk-gold-500);
  --tblr-info:    var(--bk-sky-500);
  --tblr-danger:  var(--bk-coral-500);

  --tblr-body-bg:        var(--bk-cream-100);
  --tblr-body-bg-rgb:    255, 252, 245;
  --tblr-body-color:     var(--bk-ink-900);
  --tblr-body-color-rgb: 26, 36, 64;

  --tblr-link-color:        var(--bk-navy-700);
  --tblr-link-hover-color:  var(--bk-gold-500);

  --tblr-border-color:        var(--bk-ink-100);
  --tblr-border-color-translucent: rgba(26, 36, 64, .08);

  --tblr-font-sans-serif: "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                          "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
  --tblr-font-monospace:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --tblr-border-radius:    .75rem;     /* 12px */
  --tblr-border-radius-sm: .5rem;      /* 8px */
  --tblr-border-radius-lg: 1rem;       /* 16px */
  --tblr-border-radius-xl: 1.5rem;     /* 24px */
}

/* ============================================================
   전역
   ============================================================ */
html { scroll-behavior: smooth; }
body {
  font-family: var(--tblr-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  background: var(--bk-cream-100);
  color: var(--bk-ink-900);
}
body.theme-bookie { background: var(--bk-cream-100); }

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  color: var(--bk-navy-900);
  font-weight: 700;
  letter-spacing: -.01em;
}
.text-secondary { color: var(--bk-ink-500) !important; }
.text-primary   { color: var(--bk-navy-700) !important; }
.text-warning   { color: var(--bk-gold-500) !important; }
.bg-warning-lt  { background: rgba(224, 181, 96, .12) !important; }
.bg-primary-lt  { background: rgba(42, 58, 94, .08) !important; }
.bg-cream       { background: var(--bk-cream-100) !important; }
.bg-cream-200   { background: var(--bk-cream-200) !important; }
.bg-navy        { background: var(--bk-navy-700) !important; color: var(--bk-cream-100); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Navbar
   ============================================================ */
.bk-navbar {
  background: var(--bk-cream-100) !important;
  border-bottom: 1px solid var(--bk-ink-100);
  min-height: 76px;
  backdrop-filter: saturate(180%) blur(8px);
}
.bk-navbar.scrolled { background: #fff !important; box-shadow: 0 1px 0 rgba(26, 36, 64, .04), 0 6px 16px rgba(26, 36, 64, .04); }

.bk-brand { display: inline-flex; align-items: center; gap: .55rem; padding-top: .35rem; padding-bottom: .35rem; }
.bk-mark  { color: var(--bk-navy-700); display: inline-flex; align-items: center; justify-content: center; }
.bk-mark-img { width: 32px; height: 32px; flex-shrink: 0; }
.bk-wordmark { font-weight: 800; font-size: 1.25rem; color: var(--bk-navy-900); letter-spacing: -.01em; }
.bk-wordmark em { font-style: normal; font-weight: 500; color: var(--bk-ink-500); margin-left: .15rem; font-size: .95em; }

.bk-navbar .nav-link {
  color: var(--bk-ink-700) !important;
  font-weight: 500;
  padding: .65rem 1rem !important;
  position: relative;
}
.bk-navbar .nav-link:hover, .bk-navbar .nav-link.active { color: var(--bk-navy-700) !important; }
.bk-navbar .nav-link.active::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .35rem;
  height: 2px; background: var(--bk-gold-500); border-radius: 2px;
}

.bk-phone { color: var(--bk-ink-700) !important; font-weight: 600; font-size: .95rem; padding: .35rem .5rem; }
.bk-phone i { color: var(--bk-gold-500); margin-right: .25rem; }

.bk-cta { font-weight: 600; padding-left: 1.1rem; padding-right: 1.1rem; }
.bk-cta i { margin-left: .25rem; transition: transform .2s; }
.bk-cta:hover i { transform: translateX(3px); }

/* ============================================================
   Buttons (Bookie 톤)
   ============================================================ */
.btn { font-weight: 600; border-radius: var(--tblr-border-radius); }
.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }
.btn-primary {
  background: var(--bk-navy-700);
  border-color: var(--bk-navy-700);
  color: var(--bk-cream-100);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--bk-navy-900);
  border-color: var(--bk-navy-900);
  color: var(--bk-cream-100);
}
.btn-warning {
  background: var(--bk-gold-500);
  border-color: var(--bk-gold-500);
  color: var(--bk-navy-900);
}
.btn-warning:hover, .btn-warning:focus {
  background: #C59E49;
  border-color: #C59E49;
  color: var(--bk-navy-900);
}
.btn-outline-dark {
  color: var(--bk-navy-900);
  border-color: var(--bk-navy-900);
  background: transparent;
}
.btn-outline-dark:hover { background: var(--bk-navy-900); color: var(--bk-cream-100); }
.btn-ghost-primary { color: var(--bk-navy-700); }
.btn-ghost-primary:hover { background: rgba(42, 58, 94, .08); }

/* ============================================================
   Page Header (Hero)
   ============================================================ */
.bk-hero {
  position: relative;
  padding: 4.5rem 0 5rem;
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(224, 181, 96, .12), transparent 60%),
    radial-gradient(900px 400px at -10% 30%, rgba(184, 208, 229, .18), transparent 60%),
    var(--bk-cream-100);
  overflow: hidden;
}
.bk-hero::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; opacity: .08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%231A2440'><path d='M50 5l12 26 28 4-20 20 5 28-25-13-25 13 5-28L10 35l28-4z'/></svg>");
  background-size: contain; background-repeat: no-repeat; pointer-events: none;
}
.bk-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(42, 58, 94, .06);
  color: var(--bk-navy-700);
  padding: .35rem .85rem; border-radius: 999px;
  font-weight: 600; font-size: .85rem;
}
.bk-hero-eyebrow .ti { color: var(--bk-gold-500); }

.bk-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.15; margin-bottom: 1rem; }
.bk-hero h1 em { font-style: normal; color: var(--bk-gold-500); }
.bk-hero .lead { color: var(--bk-ink-700); font-size: 1.15rem; line-height: 1.6; }
.bk-hero-mockup {
  background: #fff;
  border: 1px solid var(--bk-ink-100);
  border-radius: var(--tblr-border-radius-xl);
  box-shadow: 0 24px 60px -20px rgba(26, 36, 64, .18);
  padding: 1.25rem;
  display: grid; gap: 1rem;
}
.bk-hero-mockup .bk-mock-book {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #FBF5E8 0%, #FFFCF5 100%);
  border-radius: var(--tblr-border-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--bk-ink-500);
  position: relative; overflow: hidden;
  padding: 0;
}
.bk-hero-mockup .bk-mock-book img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-hero-mockup .bk-mock-meta {
  display: flex; align-items: center; gap: .75rem;
  padding-top: .25rem;
}
.bk-hero-mockup .bk-mock-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bk-navy-700), var(--bk-sky-500));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .9rem;
}
.bk-hero-trust { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; color: var(--bk-ink-500); font-size: .9rem; margin-top: .5rem; }
.bk-hero-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.bk-hero-trust .ti { color: var(--bk-sage-500); }

/* ============================================================
   Trust Bar
   ============================================================ */
.bk-trustbar {
  background: var(--bk-navy-700);
  color: var(--bk-cream-100);
  padding: 1.75rem 0;
}
.bk-trustbar .bk-num { font-size: 1.8rem; font-weight: 800; color: var(--bk-gold-500); line-height: 1.1; }
.bk-trustbar .bk-lbl { color: var(--bk-cream-100); font-size: .95rem; }
.bk-trustbar .bk-sub { color: rgba(255, 252, 245, .7); font-size: .8rem; }

/* ============================================================
   Section 공통
   ============================================================ */
.bk-section { padding: 5rem 0; }
.bk-section-tight { padding: 3.5rem 0; }
.bk-eyebrow {
  display: inline-block; color: var(--bk-gold-500);
  font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: .5rem;
}
.bk-section h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.2; margin-bottom: .75rem; }
.bk-section .bk-section-sub { color: var(--bk-ink-500); font-size: 1.05rem; max-width: 720px; }

/* ============================================================
   Step cards (3-step)
   ============================================================ */
.bk-step { position: relative; }
.bk-step .bk-step-num {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--bk-navy-700); color: var(--bk-cream-100);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem; margin-bottom: 1rem;
}
.bk-step .bk-step-arrow {
  position: absolute; right: -16px; top: 28px; color: var(--bk-gold-500);
  font-size: 1.5rem;
}
.bk-step ul { color: var(--bk-ink-500); padding-left: 1.1rem; }
.bk-step ul li { margin-bottom: .25rem; }

/* ============================================================
   USP cards
   ============================================================ */
.bk-usp { display: flex; gap: 1rem; align-items: flex-start; }
.bk-usp .bk-usp-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  background: rgba(42, 58, 94, .08); color: var(--bk-navy-700);
  border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.bk-usp h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.bk-usp p  { color: var(--bk-ink-500); font-size: .95rem; margin: 0; line-height: 1.6; }

/* ============================================================
   Book cards
   ============================================================ */
.bk-book { transition: transform .2s, box-shadow .2s; }
.bk-book:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(26, 36, 64, .18); }
.bk-book .bk-book-cover {
  aspect-ratio: 3/4; border-radius: var(--tblr-border-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.2rem; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--bk-navy-700), var(--bk-sky-500));
}
.bk-book .bk-book-meta { color: var(--bk-ink-500); font-size: .8rem; }
.bk-book .bk-book-meta .ti { color: var(--bk-gold-500); }

/* ============================================================
   Routine timeline
   ============================================================ */
.bk-timeline { position: relative; }
.bk-timeline .bk-day {
  background: #fff; border: 1px solid var(--bk-ink-100);
  border-radius: var(--tblr-border-radius); padding: 1rem; height: 100%;
  position: relative;
}
.bk-timeline .bk-day.is-live { border-left: 4px solid var(--bk-gold-500); }
.bk-timeline .bk-day .bk-day-name { font-weight: 700; color: var(--bk-navy-700); }
.bk-timeline .bk-day .bk-day-act  { font-weight: 600; font-size: .95rem; }
.bk-timeline .bk-day .bk-day-time { color: var(--bk-ink-500); font-size: .8rem; }
.bk-timeline .bk-day .bk-day-desc { color: var(--bk-ink-500); font-size: .8rem; margin-top: .35rem; }

/* ============================================================
   Teacher cards
   ============================================================ */
.bk-teacher { transition: transform .2s, box-shadow .2s; }
.bk-teacher:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(26, 36, 64, .18); }
.bk-teacher .bk-teacher-photo {
  aspect-ratio: 4/5; border-top-left-radius: var(--tblr-border-radius);
  border-top-right-radius: var(--tblr-border-radius);
  background: linear-gradient(135deg, var(--bk-navy-700), var(--bk-sky-500));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800;
}
.bk-teacher .bk-teacher-photo .bk-flag { position: absolute; top: 12px; right: 12px; font-size: 1.4rem; }
.bk-teacher .bk-teacher-meta { color: var(--bk-ink-500); font-size: .8rem; }
.bk-teacher .bk-teacher-meta .ti { color: var(--bk-gold-500); margin-right: 2px; }

/* ============================================================
   CEFR levels
   ============================================================ */
.bk-level { text-align: center; padding: 1rem; }
.bk-level .bk-level-animal { font-size: 2.2rem; line-height: 1; }
.bk-level .bk-level-code { font-weight: 800; font-size: 1.5rem; color: var(--bk-navy-700); margin-top: .35rem; }
.bk-level .bk-level-lbl  { font-weight: 600; color: var(--bk-ink-700); }
.bk-level .bk-level-age  { color: var(--bk-ink-500); font-size: .8rem; }
.bk-level.is-active { background: var(--bk-cream-200); border-radius: var(--tblr-border-radius); }
.bk-level.is-active .bk-level-code { color: var(--bk-gold-500); }
.bk-level-bar { display: flex; align-items: stretch; gap: 0; }
.bk-level-bar .bk-level { flex: 1; }
.bk-level-bar .bk-level-conn {
  flex: 0 0 8px; align-self: center; height: 2px; background: var(--bk-ink-100);
}
.bk-level-bar .bk-level-conn.is-on { background: var(--bk-gold-500); }

/* ============================================================
   Review cards
   ============================================================ */
.bk-review .bk-review-quote { font-size: 1.15rem; font-weight: 700; color: var(--bk-navy-700); line-height: 1.4; }
.bk-review .bk-review-stars { color: var(--bk-gold-500); }
.bk-review .bk-review-body  { color: var(--bk-ink-500); font-size: .92rem; }
.bk-review .bk-review-meta  { color: var(--bk-ink-500); font-size: .82rem; }

/* ============================================================
   Pricing cards
   ============================================================ */
.bk-plan { position: relative; transition: transform .2s, box-shadow .2s; }
.bk-plan:hover { transform: translateY(-3px); }
.bk-plan.is-highlight {
  background: var(--bk-navy-700);
  border-color: var(--bk-gold-500);
  border-width: 2px;
  color: var(--bk-cream-100);
}
.bk-plan.is-highlight h3, .bk-plan.is-highlight .bk-plan-price,
.bk-plan.is-highlight .bk-plan-tag { color: #fff; }
.bk-plan.is-highlight .text-secondary { color: rgba(255, 252, 245, .7) !important; }
.bk-plan.is-highlight .bk-plan-price .currency,
.bk-plan.is-highlight .bk-plan-price .unit { color: var(--bk-gold-500); }
.bk-plan .bk-plan-ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--bk-gold-500); color: var(--bk-navy-900);
  font-weight: 700; font-size: .8rem; padding: .35rem 1rem;
  border-radius: 999px;
}
.bk-plan .bk-plan-tag { color: var(--bk-ink-500); font-weight: 600; font-size: .9rem; }
.bk-plan .bk-plan-price { font-size: 2.2rem; font-weight: 800; color: var(--bk-navy-700); line-height: 1.1; }
.bk-plan .bk-plan-price .currency { font-size: 1.2rem; vertical-align: top; margin-right: .15rem; }
.bk-plan .bk-plan-price .unit { font-size: 1rem; color: var(--bk-ink-500); font-weight: 500; margin-left: .15rem; }
.bk-plan .bk-plan-features { list-style: none; padding: 0; margin: 1.25rem 0; }
.bk-plan .bk-plan-features li { padding: .35rem 0; display: flex; align-items: flex-start; gap: .5rem; }
.bk-plan .bk-plan-features .ti { color: var(--bk-sage-500); flex-shrink: 0; margin-top: 3px; }
.bk-plan.is-highlight .bk-plan-features .ti { color: var(--bk-gold-500); }

/* ============================================================
   CTA band
   ============================================================ */
.bk-cta-band {
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(224, 181, 96, .12), transparent 60%),
    var(--bk-cream-200);
  padding: 4rem 0;
}
.bk-cta-card { background: var(--bk-navy-700); color: var(--bk-cream-100); border: none; border-radius: var(--tblr-border-radius-xl); }
.bk-cta-card h2, .bk-cta-card .display-5 { color: #fff; }
.bk-cta-card .text-secondary { color: rgba(255, 252, 245, .75) !important; }
.bk-cta-card .btn-warning { color: var(--bk-navy-900); }

/* ============================================================
   Footer
   ============================================================ */
.bk-footer { background: var(--bk-navy-900); color: var(--bk-cream-100); padding: 4rem 0 1.5rem; }
.bk-footer .bk-footer-h { color: #fff; font-size: .9rem; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.bk-footer .bk-footer-list { list-style: none; padding: 0; margin: 0; }
.bk-footer .bk-footer-list li { margin-bottom: .55rem; }
.bk-footer .bk-footer-list a, .bk-footer .bk-footer-list i { color: rgba(255, 252, 245, .75); font-size: .9rem; }
.bk-footer .bk-footer-list a:hover { color: var(--bk-gold-500); text-decoration: none; }
.bk-footer .bk-footer-tagline { color: rgba(255, 252, 245, .7); font-size: .9rem; line-height: 1.6; }
.bk-footer .bk-socials { display: flex; gap: .75rem; margin-top: 1rem; }
.bk-footer .bk-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 252, 245, .1); display: inline-flex; align-items: center; justify-content: center; color: var(--bk-cream-100); }
.bk-footer .bk-socials a:hover { background: var(--bk-gold-500); color: var(--bk-navy-900); text-decoration: none; }
.bk-footer-bottom { border-top: 1px solid rgba(255, 252, 245, .12); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .8rem; color: rgba(255, 252, 245, .55); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* ============================================================
   Trial form / Steps
   ============================================================ */
.bk-trial-shell { max-width: 760px; margin: 0 auto; }
.bk-stepper { display: flex; align-items: center; gap: .5rem; padding: 1rem 0; }
.bk-stepper .bk-step-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; background: var(--bk-ink-100); color: var(--bk-ink-500); font-weight: 600; font-size: .85rem; }
.bk-stepper .bk-step-pill.is-on { background: var(--bk-navy-700); color: var(--bk-cream-100); }
.bk-stepper .bk-step-pill.is-done { background: var(--bk-gold-500); color: var(--bk-navy-900); }
.bk-stepper .bk-step-conn { flex: 1; height: 2px; background: var(--bk-ink-100); }
.bk-stepper .bk-step-conn.is-on { background: var(--bk-gold-500); }
.bk-trial-card { padding: 2.5rem; }
.bk-trial-card label.form-label { font-weight: 600; color: var(--bk-ink-900); }
.bk-trial-summary { background: var(--bk-navy-700); color: var(--bk-cream-100); border-radius: var(--tblr-border-radius); padding: 1.5rem; }
.bk-trial-summary h4 { color: #fff; font-size: 1.1rem; margin-bottom: 1rem; }
.bk-trial-summary dl { margin: 0; }
.bk-trial-summary dt { color: rgba(255, 252, 245, .6); font-weight: 500; }
.bk-trial-summary dd { color: #fff; font-weight: 600; margin-bottom: .5rem; }

/* Form 컨트롤 Bookie 톤 */
.form-control, .form-select { border-radius: var(--tblr-border-radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--bk-navy-700); box-shadow: 0 0 0 .2rem rgba(42, 58, 94, .15); }

/* ============================================================
   Feature matrix
   ============================================================ */
.bk-matrix th { background: var(--bk-navy-700); color: var(--bk-cream-100); font-weight: 600; }
.bk-matrix .is-highlight-col { background: rgba(224, 181, 96, .08); }
.bk-matrix td.is-check { color: var(--bk-sage-500); font-weight: 700; }
.bk-matrix td.is-dash { color: var(--bk-ink-300); }

/* ============================================================
   Page header (서브 페이지 상단)
   ============================================================ */
.bk-page-header {
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(224, 181, 96, .14), transparent 60%),
    var(--bk-cream-100);
  padding: 3.5rem 0 2.5rem;
  text-align: center;
  border-bottom: 1px solid var(--bk-ink-100);
}
.bk-page-header h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .5rem; }
.bk-page-header p  { color: var(--bk-ink-500); font-size: 1.05rem; max-width: 720px; margin: 0 auto; }
.bk-page-header .bk-page-trust { color: var(--bk-ink-500); font-size: .85rem; margin-top: 1rem; }

/* ============================================================
   Filter bar (강사 페이지)
   ============================================================ */
.bk-filterbar {
  position: sticky; top: 76px; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--bk-ink-100);
  padding: 1rem 0;
}

/* ============================================================
   Utility
   ============================================================ */
.bk-divider { height: 1px; background: var(--bk-ink-100); margin: 0; border: 0; }
.bk-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(42, 58, 94, .08); color: var(--bk-navy-700); font-size: .82rem; font-weight: 600; }
.bk-pill.is-gold { background: rgba(224, 181, 96, .15); color: #A07A33; }
.bk-pill.is-sage { background: rgba(148, 168, 138, .18); color: #647059; }

/* ============ SVG 일러스트 ============ */
.bk-illust { width: 100%; height: auto; display: block; border-radius: var(--tblr-border-radius); }
.bk-illust-sm { max-width: 200px; height: auto; margin: 0 auto 1rem; display: block; }
.bk-illust-card { background: #fff; border-radius: var(--tblr-border-radius); padding: 1.25rem; height: 100%; display: flex; align-items: center; justify-content: center; }

/* 작은 디바이스에서 navbar가 자연스럽게 접히도록 */
@media (max-width: 767.98px) {
  .bk-hero { padding: 3rem 0 3.5rem; }
  .bk-section { padding: 3.5rem 0; }
  .bk-trial-card { padding: 1.5rem; }
}