/* ══════════════════════════════════════════════
   크래빗 이용 가이드 — 클린 디자인 시스템
   네이비(#16192A) 중심 · 핑크(#FB75BB)는 포인트 전용 · Pretendard
   ══════════════════════════════════════════════ */

/* Pretendard Variable */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');

/* 화면에는 숨기고 스크린리더·검색엔진에만 노출 (SEO용 h1 등) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:root {
  /* ── 클린 팔레트 (네이비 중심) ── */
  --ink:        #16192A;            /* 기본 텍스트 */
  --body:       #3a3a40;            /* 본문 텍스트(라이트/다크 대응) */
  --slate:      rgba(22,25,42,0.55);/* 보조 텍스트 */
  --faint:      rgba(22,25,42,0.30);/* 장식 요소 */
  --canvas:     #FFFFFF;            /* 화이트 */
  --content-white: #FFFFFF;
  --frost:      #F9FAFC;            /* 카드·아이콘 배경 (surface) */
  --ash:        #E8E8E8;            /* 보더 */
  --midnight:   #16192A;            /* 다크 섹션 배경 */

  /* 액션·액티브 = 네이비 (구 핑크 토큰을 네이비로 재정의) */
  --ghost:      #16192A;
  --ghost-deep: #16192A;

  /* ★ 브랜드 핑크 — 포인트 전용 (남발 금지) */
  --pink:       #FB75BB;
  --wash-pink:  #FDE7F1;   /* 연분홍 — 활성 메뉴 배경 */

  /* 보조 액센트 */
  --cornflower: #5b9ee8;   /* info 블루 */
  --cream:      #fff1b8;
  --blush:      #ffd0e0;
  --mint:       #2ec08b;   /* success 배지 */
  --lavender:   #FCE3F1;

  /* 워시 (콜아웃 배경) */
  --wash-ghost:  #F5F6F9;  /* 액티브/선택 — 뉴트럴 라이트 */
  --wash-lav:    #eef4ff;  /* info 블루 */
  --wash-cream:  #fff8e1;  /* 경고 */
  --wash-blush:  #ffeef6;  /* 핑크 포인트 배경 */
  --wash-mint:   #e7f7ef;  /* 성공 */

  --font: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* 네비 / 메뉴 */
  --nav-pink: #FFFFFF;
  --menu-gray: rgba(22,25,42,0.60);  /* 선택 안 된 메뉴 텍스트·아이콘 */

  /* 둥근 모서리 */
  --r-nav:  8px;
  --r-pill: 8px;
  --r-card: 8px;
  --r-lg:   8px;
  --r-md:   8px;
  --r-sm:   8px;
  --r-xl:   12px;    /* 버튼 (rounded-xl) */
  --r-full: 999px;   /* 알약·고스트 */

  /* 뉴트럴 그림자 */
  --glow-sm: 0 1px 2px rgba(22,25,42,0.06);
  --glow:    0 4px 16px rgba(22,25,42,0.06);
  --glow-md: 0 8px 28px rgba(22,25,42,0.09);
  --glow-lg: 0 16px 44px rgba(22,25,42,0.12);
  --glow-cta: 0 4px 14px rgba(22,25,42,0.18);

  --ease: cubic-bezier(0.4,0,0.2,1);
  --tracking: -0.01em;

  --nav-h:     72px;
  --sidebar-w: 280px;
  --toc-w:     220px;
  --content-max: 980px;
  --maxw:      1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-anchor: none; }
body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--content-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { display: block; }
.ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; }

/* ════════════════════════════════════════
   TOP NAV — 떠 있는 알약
   ════════════════════════════════════════ */
.topnav {
  position: fixed; top: 0; left: 0;
  width: 100%; height: var(--nav-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--ash);
  display: flex; align-items: center; padding: 0 28px;
  z-index: 200; gap: 16px;
}
.topnav-logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topnav-logo-img { height: 32px; width: auto; display: block; }
.topnav-divider { width: 1px; height: 18px; background: var(--ash); flex-shrink: 0; }
.topnav-title { font-size: 15px; color: var(--slate); font-weight: 400; }

/* 중앙 상단 고정 검색창 */
.search-trigger {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  width: 420px; max-width: 38vw;
  padding: 9px 18px;
  background: var(--frost);
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  cursor: pointer; transition: all 0.2s var(--ease);
  font-family: var(--font);
}
.search-trigger:hover { border-color: var(--ghost); background: var(--canvas); box-shadow: var(--glow-sm); }
.search-trigger .ic { width: 17px; height: 17px; flex: 0 0 auto; color: var(--slate); }
/* 텍스트 span만 늘어나도록 — .ic 아이콘 span에는 적용되지 않게 */
.search-trigger span:not(.ic) { font-size: 14px; color: var(--slate); flex: 1; text-align: left; letter-spacing: var(--tracking); }
.search-trigger kbd {
  font-family: var(--font); font-size: 12px; color: var(--slate);
  background: var(--canvas); border: 1px solid var(--ash); border-radius: var(--r-pill); padding: 2px 8px;
}
.topnav-right { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.topnav-icon-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xl); border: 1px solid var(--ash);
  background: var(--canvas); color: var(--ink);
  cursor: pointer; transition: all 0.2s var(--ease);
}
.topnav-icon-btn:hover { background: var(--frost); }
.topnav-icon-btn .ic { width: 18px; height: 18px; }
/* 검색창이 좁은 화면에서 우측 버튼과 겹치지 않도록 */
@media (max-width: 1100px) { .search-trigger { display: none; } }
/* 홈은 본문(히어로)에만 검색창 — 상단바 검색창 숨김 */
body[data-page="home"] .search-trigger { display: none; }
/* 상단바는 전 페이지 동일한 평평한 헤더 */
.topnav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--r-xl);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.2s var(--ease); white-space: nowrap;
}
.topnav-btn svg { width: 15px; height: 15px; }
.topnav-btn-primary { background: var(--canvas); color: var(--ink); border: 1px solid var(--ash); }
.topnav-btn-primary:hover { background: #F0F0F0; }
.topnav-btn-primary .ic { color: var(--ink); }

/* ════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════ */
.docs-layout {
  display: grid;
  /* 사이드바 | 좌측 여백 | 본문 | TOC | 우측 여백 — 본문+TOC를 중앙정렬 */
  grid-template-columns: var(--sidebar-w) 1fr minmax(0, var(--content-max)) var(--toc-w) 1fr;
  min-height: 100vh; padding-top: var(--nav-h);
}
/* 모든 페이지 동일: TOC 유무와 상관없이 본문 위치를 항상 동일하게 유지
   (TOC가 없어도 TOC 트랙을 그대로 비워 둬서 본문이 좌우로 흔들리지 않음) */
.home-main { width: 100%; }
.home-main .home-hero { padding: 56px 0 56px; }

/* ── SIDEBAR (연핑크) ── */
.sidebar {
  position: fixed; top: var(--nav-h); bottom: 0; left: 0;
  width: var(--sidebar-w);
  background: var(--content-white);
  border-right: 1px solid var(--ash);
  overflow-y: auto; padding: 20px 16px 48px;
  scrollbar-width: thin;
  transition: transform 0.25s var(--ease);
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--ash); border-radius: 3px; }

.sb-group { margin-bottom: 2px; }
.sb-group-label {
  width: 100%; background: none; border: none; font-family: var(--font); text-align: left;
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--r-nav);
  font-size: 15px; font-weight: 700; color: var(--menu-gray);
  letter-spacing: var(--tracking);
  cursor: pointer; user-select: none;
  transition: all 0.18s var(--ease);
}
.sb-group-label:hover { background: rgba(22,25,42,0.045); }
.sb-group-label .chev { width: 14px; height: 14px; flex-shrink: 0; color: var(--menu-gray); transition: transform 0.2s var(--ease); margin-left: auto; }
.sb-group.open .sb-group-label .chev { transform: rotate(90deg); }
.sb-group-label .grp-ic { width: 18px; height: 18px; color: var(--menu-gray); flex-shrink: 0; }

.sb-group-items { display: none; padding: 4px 0 8px; }
.sb-group.open .sb-group-items { display: block; }

.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 18px; border-radius: var(--r-nav);
  font-size: 14.5px; font-weight: 400; color: var(--slate);
  transition: all 0.15s var(--ease); position: relative; line-height: 1.5;
  margin: 1px 0;
}
.sb-link:hover { color: var(--ink); background: rgba(22,25,42,0.045); }
.sb-link.active { color: var(--pink); background: var(--wash-pink); font-weight: 700; }
.sb-link.sub { padding-left: 44px; font-size: 14px; }
.sb-link .sb-ic { width: 18px; height: 18px; color: var(--slate); flex-shrink: 0; }
.sb-link.active .sb-ic { color: var(--pink); }

.sb-top-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: var(--r-nav);
  font-size: 15px; font-weight: 700; color: var(--menu-gray);
  transition: all 0.15s var(--ease);
}
.sb-top-link:hover { background: rgba(22,25,42,0.045); }
.sb-top-link.active { background: var(--wash-pink); color: var(--pink); }
.sb-top-link.active .sb-ic { color: var(--pink); }
.sb-top-link .sb-ic { color: var(--menu-gray); }

/* 대메뉴 (페이지 단위) */
.sb-main {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-radius: var(--r-nav);
  font-size: 15px; font-weight: 700; color: var(--menu-gray);
  transition: all 0.18s var(--ease); margin: 2px 0;
}
.sb-main:hover { background: rgba(22,25,42,0.045); }
.sb-main.active { background: var(--wash-pink); color: var(--pink); }
.sb-main .sb-ic { width: 18px; height: 18px; color: var(--menu-gray); flex-shrink: 0; }
.sb-main:hover .sb-ic { color: var(--menu-gray); }
.sb-main.active .sb-ic { color: var(--pink); }
.sb-top-link .sb-ic { width: 18px; height: 18px; color: var(--menu-gray); flex-shrink: 0; }

.sb-divider { height: 1px; background: var(--ash); margin: 14px 16px; }

/* ── MAIN CONTENT ── */
.doc-content { min-width: 0; padding: 52px 44px 96px; grid-column: 3; }

.doc-header { margin-bottom: 24px; }
.doc-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--slate); margin-bottom: 16px; flex-wrap: wrap; }
.doc-breadcrumb a { color: var(--slate); transition: color 0.15s; }
.doc-breadcrumb a:hover { color: var(--ghost); }
.doc-breadcrumb .bc-sep { color: var(--slate); }
.doc-breadcrumb .bc-current { color: var(--slate); font-weight: 400; }
.doc-badge {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 400; color: var(--ghost-deep);
  background: var(--wash-ghost); border-radius: var(--r-pill);
  padding: 5px 14px; margin-bottom: 18px;
}
/* 비-토픽 페이지(FAQ 등) 제목 — 토픽 페이지 대제목과 동일 규격 */
.doc-header h1 { font-size: 40px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px; }
.doc-header .doc-desc { font-size: 18px; font-weight: 400; color: var(--slate); line-height: 1.65; }
.doc-meta { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--slate); margin-top: 18px; }
.doc-meta .dm-item { display: flex; align-items: center; gap: 6px; }
.doc-meta .dm-label { color: var(--ghost-deep); }
.doc-meta .dm-divider { width: 1px; height: 12px; background: var(--ash); }

/* ── NOTION 콘텐츠 ── */
.n-h2 { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1.25; margin: 56px 0 18px; scroll-margin-top: 90px; }
.n-h2:first-child { margin-top: 8px; }
/* 주제의 첫 제목 = 페이지 타이틀처럼 가장 크게 */
.topic > .n-h2:first-child { font-size: 40px; font-weight: 700; line-height: 1.15; margin: 6px 0 22px; }
/* 주제 제목 바로 아래 한줄 설명 밑에 구분선 */
.topic > .n-h2:first-child + .n-p { padding-bottom: 28px; border-bottom: 1px solid var(--ash); margin-bottom: 32px; }
/* 한줄 설명이 없는 경우엔 제목 바로 아래에 구분선 */
.topic > .n-h2:first-child:not(:has(+ .n-p)) { padding-bottom: 22px; border-bottom: 1px solid var(--ash); margin-bottom: 30px; }
.topic { counter-reset: subsec; }
.n-h3 { counter-increment: subsec; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; margin: 54px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ash); scroll-margin-top: 90px; }
.n-h3::before { content: counter(subsec, decimal-leading-zero) "."; color: var(--pink); margin-right: 8px; }
/* n-h3와 같은 톤이지만 목차(TOC)에는 잡히지 않는 보조 캡션용 */
.n-band-title { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; margin: 40px 0 16px; }
.n-p { font-size: 17px; font-weight: 400; color: var(--body); line-height: 1.8; margin: 14px 0; }
.n-p strong, .n-li strong, .n-ol-body strong { color: var(--ink); font-weight: 600; }
.n-mark { background: var(--cream); border-radius: 4px; padding: 1px 5px; color: var(--ink); }
.n-link { color: var(--pink); font-weight: 500; border-bottom: 1px solid rgba(251,117,187,0.35); }
.n-link:hover { border-bottom-color: var(--pink); }
.n-lead { font-size: 19px; font-weight: 400; color: var(--body); line-height: 1.8; margin: 8px 0 4px; }
.n-hr { border: none; border-top: 1px solid var(--ash); margin: 40px 0; }

/* 불릿 */
.n-ul { margin: 14px 0; display: flex; flex-direction: column; gap: 9px; padding-left: 4px; list-style: none; }
.n-li { font-size: 17px; color: var(--body); line-height: 1.75; padding-left: 26px; position: relative; }
.n-li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--ghost); }
.n-ul .n-ul { margin: 9px 0 4px; }
.n-ul .n-ul .n-li::before { background: none; border: 1.5px solid var(--ghost); }

/* 번호 리스트 */
/* 단계별 절차 — 원형 번호가 세로선으로 연결되는 스텝퍼 (티로 스타일) */
.n-ol { margin: 22px 0; display: flex; flex-direction: column; counter-reset: nol; }
.n-ol-item { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; align-items: start; padding-bottom: 24px; }
.n-ol-item:last-child { padding-bottom: 2px; }
/* 번호 원형 — 진한 검정 배경 + 흰 숫자 */
.n-ol-item::before {
  counter-increment: nol; content: counter(nol);
  grid-column: 1; grid-row: 1;
  width: 30px; height: 30px; border-radius: 50%;
  background: #26262C; color: #fff;
  border: none;
  font-size: 14px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.n-ol-body { grid-column: 2; grid-row: 1; padding-top: 3px; }
/* 스텝 본문은 '제목'이 아니라 안내 문장 → 본문처럼 일반 굵기로 */
.n-ol-body h4 { font-size: 19px; font-weight: 400; color: var(--body); line-height: 1.7; margin-bottom: 4px; }
.n-ol-body h4 strong { font-weight: 600; color: var(--ink); }
.n-ol-body p { font-size: 17px; font-weight: 400; color: var(--slate); line-height: 1.7; }
/* 단계별 안내 이미지 (스크린샷) */
.n-ol-img { display: block; margin: 12px 0 6px; width: 100%; max-width: none; border: none; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(17,17,26,.08), 0 4px 16px rgba(17,17,26,.06); }
/* 토픽 레벨 Q&A 콜아웃: 일반 콜아웃(.n-callout)과 동일한 전체 폭 사용 */
.n-ol-body a { color: var(--ghost-deep); }

/* 스텝 카드 (원본 가이드의 아이콘 카드 네이티브 재현) */
.step-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; counter-reset: stepc; }
.step-card { background: #fff; border: 1px solid #e8e6ea; border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: all 0.18s var(--ease); }
.step-card:hover { border-color: #d4d0d8; }
.step-card .sc-ic { width: 48px; height: 48px; border-radius: var(--r-md); background: #f2f1f4; display: flex; align-items: center; justify-content: center; color: var(--menu-gray); }
.step-card .sc-ic svg { width: 25px; height: 25px; }
.step-card h4 { counter-increment: stepc; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.step-card h4::before { content: counter(stepc) ". "; color: var(--ghost-deep); }
.step-card p { font-size: 14.5px; font-weight: 400; color: #4a4a52; line-height: 1.65; flex: 1; }
.step-card .sc-tag { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--ghost-deep); background: #f5f4f6; border-radius: var(--r-sm); padding: 4px 11px; }
.step-card .sc-tag .sc-tag-label { color: var(--slate); font-weight: 400; margin-right: 4px; }

/* 콜아웃 — 파스텔 */
.n-callout {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--r-md); padding: 18px 20px; margin: 20px 0;
  font-size: 16px; line-height: 1.75;
}
.n-callout .n-callout-ic { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.n-callout .n-callout-body { color: var(--body); }
.n-callout .n-callout-body strong { color: var(--ink); font-weight: 600; }
/* 모든 콜아웃 통일: 회색 배경 + 검정 아이콘 + 동일한 왼쪽 정렬(margin 0) */
.n-callout.tip, .n-callout.info, .n-callout.warn, .n-callout.pink { background: var(--wash-ghost); }
.n-callout .n-callout-ic { color: var(--ink); }
.n-callout-body .n-ul { margin: 6px 0 0; }
.n-callout-body .n-li { font-size: 16px; }

/* 글 내 번호형 소제목 + 구분선 */
.sec-title { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin: 60px 0 0; line-height: 1.3; }
.sec-title .sec-num { color: var(--pink); margin-right: 8px; }
.sec-divider { border: none; border-top: 1px solid var(--ash); margin: 12px 0 20px; }

/* 표 */
.n-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; margin: 20px 0; border: 1px solid var(--ash); border-radius: var(--r-md); overflow: hidden; }
.n-table th { background: var(--frost); padding: 14px 20px; text-align: left; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.n-table td { padding: 14px 20px; border-top: 1px solid var(--ash); color: var(--body); vertical-align: top; }
.n-table tr:hover td { background: var(--wash-ghost); }

/* ── 페이지 네비 ── */
.doc-nav { display: flex; justify-content: space-between; gap: 14px; padding: 36px 0; margin-top: 48px; border-top: 1px solid var(--ash); }
.doc-nav-item {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--canvas); border: 1px solid var(--ash); border-radius: var(--r-lg);
  padding: 20px 24px; min-width: 180px; max-width: 270px; transition: all 0.2s var(--ease); flex: 1;
}
.doc-nav-item:hover { border-color: var(--ghost); box-shadow: var(--glow); transform: translateY(-2px); }
.doc-nav-item:hover .doc-nav-title { color: var(--ghost-deep); }
.doc-nav-item.next { text-align: right; }
.doc-nav-label { font-size: 13px; color: var(--slate); }
.doc-nav-title { font-size: 16px; font-weight: 700; color: var(--ink); transition: color 0.15s; }

/* 회사 정보 푸터 */
/* ── 사이트 푸터 (크래빗 웹사이트 기준 · 본문 하단) ── */
.site-footer { margin-left: var(--sidebar-w); border-top: 1px solid var(--ash); background: var(--frost); padding: 52px 64px 44px; transition: margin-left 0.25s var(--ease); }
body.nav-collapsed .site-footer { margin-left: 0; }
.sf-inner { max-width: 1000px; margin: 0 auto; }
.sf-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.sf-logo { display: inline-block; }
.sf-logo img { height: 26px; width: auto; }
.sf-tagline { font-size: 14px; color: var(--slate); margin: 16px 0 18px; line-height: 1.6; max-width: 320px; }
.sf-social { display: flex; gap: 10px; }
.sf-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ash); background: var(--canvas); color: var(--menu-gray); display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s var(--ease); }
.sf-social a:hover { color: var(--ink); border-color: var(--ink); }
.sf-social .ic { width: 17px; height: 17px; }
.sf-cols { display: flex; gap: 56px; }
.sf-col { display: flex; flex-direction: column; gap: 10px; }
.sf-col-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.sf-col a { font-size: 14px; color: var(--slate); transition: color 0.15s; }
.sf-col a:hover { color: var(--ink); }
.sf-divider { height: 1px; background: var(--ash); margin: 36px 0 24px; }
.sf-company { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.sf-meta { font-size: 13px; color: var(--slate); line-height: 1.8; }
.sf-sep { color: var(--faint); margin: 0 8px; }
.sf-copy { font-size: 12.5px; color: var(--faint); margin-top: 14px; }
[data-theme="dark"] .site-footer { background: #1A1C24; }
[data-theme="dark"] .sf-social a { background: #262A35; }

.doc-footer { border-top: 1px solid var(--ash); padding: 28px 0 0; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-footer p { font-size: 14px; color: var(--slate); }
.doc-footer-links { display: flex; gap: 18px; }
.doc-footer-links a { font-size: 14px; color: var(--slate); transition: color 0.15s; }
.doc-footer-links a:hover { color: var(--ghost); }

/* ── TOC ── */
.toc { position: sticky; top: calc(var(--nav-h) + 28px); max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto; padding: 0 0 0 28px; align-self: start; grid-column: 4; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc-label { font-size: 12.5px; font-weight: 600; color: var(--slate); margin-bottom: 12px; letter-spacing: 0.01em; }
/* 티로식: 좌측 세로선 + 현재 섹션은 핑크 + 볼드 */
.toc-list { display: flex; flex-direction: column; gap: 1px; border-left: 1.5px solid var(--ash); }
.toc-item { display: block; font-size: 14px; font-weight: 400; color: var(--slate); padding: 7px 16px; margin-left: -1.5px; border-left: 1.5px solid transparent; transition: color 0.15s, border-color 0.15s; line-height: 1.5; cursor: pointer; }
.toc-item:hover { color: var(--ink); }
.toc-item.active { color: var(--pink); border-left-color: var(--pink); font-weight: 700; }
.toc-item.h3 { padding-left: 28px; font-size: 13.5px; }

/* ════════════════════════════════════════
   HOME — Phantom 랜딩
   ════════════════════════════════════════ */
.home-wrap { max-width: var(--maxw); margin: 0 auto; padding: calc(var(--nav-h) + 16px) 24px 80px; }
.home-section { margin-top: 8px; }
.home-hero {
  position: relative; text-align: center;
  padding: 72px 0 64px; margin-bottom: 8px;
}
.home-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--pink);
  margin-bottom: 24px;
}
.home-hero .eyebrow .ic { width: 17px; height: 17px; }
.hero-ghost { width: 96px; height: 104px; margin: 0 auto 24px; }
.hero-ghost svg { width: 100%; height: 100%; }
.home-hero h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.22; margin-bottom: 26px; }
.home-hero h1 .line { color: var(--ink); }
.home-hero p { font-size: 19px; font-weight: 400; color: var(--slate); max-width: 560px; line-height: 1.6; margin: 0 auto 36px; }
.home-hero p.hero-oneline { max-width: 620px; }
.home-hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.hero-search {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 620px; margin: 0 auto 8px;
  padding: 22px 30px;
  background: var(--canvas); border: 1px solid var(--ash); border-radius: var(--r-pill);
  cursor: pointer; text-align: left; font-family: var(--font);
  box-shadow: var(--glow); transition: all 0.2s var(--ease);
}
.hero-search:hover { border-color: var(--ghost); box-shadow: var(--glow-md); }
.hero-search .ic { width: 24px; height: 24px; color: var(--ghost); flex-shrink: 0; }
.hero-search-text { flex: 1; font-size: 18px; color: var(--slate); letter-spacing: var(--tracking); }
.hero-search kbd { font-family: var(--font); font-size: 12.5px; color: var(--slate); background: var(--frost); border: 1px solid var(--ash); border-radius: var(--r-pill); padding: 3px 9px; }

.home-section-title { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 20px; text-align: center; letter-spacing: -0.02em; }

/* 파스텔 피처 카드 */
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 0; }
.home-card {
  background: var(--frost); border: 1px solid var(--ash);
  border-radius: var(--r-card); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all 0.2s var(--ease);
}
.home-card:hover { transform: translateY(-3px); border-color: #d4d4d8; box-shadow: var(--glow-md); }
.home-card .hc-ic { width: 50px; height: 50px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--ash); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.home-card .hc-ic svg { width: 26px; height: 26px; }
.home-card h3 { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.home-card p { font-size: 15px; font-weight: 400; color: #4a4a52; line-height: 1.6; flex: 1; }
.home-card .arrow { font-size: 14.5px; font-weight: 400; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.home-card .arrow .ic { width: 15px; height: 15px; }

/* ── 전체 카테고리 (티로 스타일 2컬럼 행) ── */
.cat-section-title { font-size: 23px; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; margin: 8px 0 4px; }
.cat-list { display: flex; flex-direction: column; }
.cat-row {
  display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: center;
  padding: 30px 0; border-bottom: 1px solid var(--ash);
}
.cat-row:last-child { border-bottom: none; }
.cat-text h3 { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 9px; transition: color 0.15s; }
.cat-text p { font-size: 15.5px; color: var(--slate); line-height: 1.6; margin-bottom: 12px; max-width: 520px; }
.cat-text .cat-more { font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.cat-text .cat-more .ic { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.cat-art {
  /* 첨부 썸네일(1920x1080) 규격에 맞춘 16:9 */
  aspect-ratio: 16 / 9; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  transition: all 0.22s var(--ease); color: var(--ink); overflow: hidden;
}
.cat-art .ic { width: 46px; height: 46px; }
/* 이미지형 썸네일 */
.cat-art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.cat-row:hover .cat-art { transform: translateY(-3px); box-shadow: var(--glow-md); }
.cat-row:hover .cat-more .ic { transform: translateX(3px); }
/* 카드 색상 (부드러운 파스텔 · 연보라 제외) */
.cat-art.c-brand { background: var(--ink); color: #fff; }
.cat-art.c-pink  { background: #FCE3F1; }
.cat-art.c-peach { background: #FBE7D6; }
.cat-art.c-blue  { background: #DCE6FB; }
.cat-art.c-mint  { background: #DCF1E6; }
.cat-art.c-gray  { background: #ECECEF; }

/* ── 사이드바 섹션 소제목 ── */
.sb-sec-title { font-size: 14.5px; font-weight: 700; color: #44434b; letter-spacing: -0.01em; padding: 16px 16px 6px; }

/* ── 카테고리 랜딩 (티로 스타일) ── */
.cat-landing { margin-top: 4px; }
.cat-hero { width: 100%; height: 180px; border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.cat-hero .ic { width: 60px; height: 60px; }
.cat-hero--peach { background: #FBE7D6; } .cat-hero--peach .ic { color: #D98E45; }
.cat-hero--blue  { background: #DCE6FB; } .cat-hero--blue .ic  { color: #5B7FD6; }
.cat-hero--mint  { background: #DCF1E6; } .cat-hero--mint .ic  { color: #3DAE78; }
.cat-hero--gray  { background: #ECECEF; } .cat-hero--gray .ic  { color: var(--ink); }
.cat-eyebrow { font-size: 13px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }
.cat-title { font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 10px; }
.cat-desc { font-size: 16px; color: var(--slate); line-height: 1.6; }
.cat-divider { border: none; border-top: 1px solid var(--ash); margin: 26px 0 10px; }
.cat-sec-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin: 30px 0 6px; }
.cat-sec-title:first-child { margin-top: 4px; }
.cat-art-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 4px; }
.cat-art-row {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--ash); border-radius: var(--r-lg);
  transition: all 0.18s var(--ease);
}
.cat-art-row:hover { border-color: #d4d4d8; box-shadow: var(--glow-md); transform: translateY(-2px); }
.cat-art-thumb { width: 100%; height: 84px; background: #EEF0F4; display: flex; align-items: center; justify-content: center; }
.cat-art-thumb .ic { width: 28px; height: 28px; color: var(--ink); }
.cat-art-info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px 20px; }
.cat-art-t { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.cat-art-tag { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--frost); border: 1px solid var(--ash); border-radius: var(--r-sm); padding: 3px 9px; }
.cat-art-tag .cat-art-tag-label { color: var(--slate); font-weight: 400; margin-right: 4px; }

/* ── 홍보 키트 선택 카드 (2분할) ── */
.kit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 8px; }
.kit-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px; background: #fff; border: 1px solid var(--ash);
  border-radius: var(--r-lg); text-decoration: none; transition: all 0.18s var(--ease);
}
.kit-card:hover { border-color: #d4d4d8; box-shadow: var(--glow-md); transform: translateY(-2px); }
.kit-card-ic { width: 50px; height: 50px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; }
.kit-card-ic .ic { width: 25px; height: 25px; color: var(--ink); }
.kit-card-ic.c-peach { background: #FBE7D6; }
.kit-card-ic.c-blue  { background: #DCE6FB; }
.kit-card h3 { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0 0; }

/* ── 링크 공유 CTA (학생/학부모 가이드) ── */
.share-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--wash-pink); border: 1px solid #f6c9e0; border-radius: var(--r-lg); padding: 18px 22px; margin: 18px 0 8px; }
.share-cta-text { display: flex; flex-direction: column; gap: 3px; }
.share-cta-text strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.share-cta-text span { font-size: 14px; color: var(--slate); }
.share-cta-btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--pink); color: #fff; border: none; border-radius: var(--r-xl); padding: 11px 20px; font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; transition: filter 0.15s; }
.share-cta-btn:hover { filter: brightness(0.95); }
.share-cta-btn .ic { width: 17px; height: 17px; }
[data-theme="dark"] .share-cta { background: rgba(251,117,187,0.12); border-color: rgba(251,117,187,0.3); }

/* ── 공유 모드: 제3자(학부모·학생)가 링크로 들어오면 좌측 메뉴·관리자 요소 숨김 ── */
body.share-mode { --sidebar-w: 0px; }
body.share-mode .sidebar,
body.share-mode .sidebar-toggle,
body.share-mode .doc-breadcrumb,
body.share-mode .topnav-btn-primary,
body.share-mode .search-trigger,
body.share-mode .share-cta,
body.share-mode .share-hide { display: none !important; }
/* 공유 모드에서만 보이는 요소 */
.share-only-block { display: none; }
body.share-mode .share-only-block { display: flex; }
.kit-card p { font-size: 14.5px; color: var(--slate); line-height: 1.6; margin: 0; flex: 1; }
.kit-card-more { font-size: 14px; font-weight: 700; color: var(--pink); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.kit-card-more .ic { width: 16px; height: 16px; }

/* ── Q&A 블록 — 일반 콜아웃(.n-callout)과 동일한 룩: 테두리 없음 + 좌상단 아이콘 + 본문 들여쓰기 ── */
.n-qa { background: var(--wash-ghost); border: none; border-radius: var(--r-md); padding: 18px 20px; margin: 20px 0; }
.n-qa-q { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; display: flex; align-items: flex-start; gap: 7px; }
.n-qa-q::before { content: 'Q'; font-size: 12px; font-weight: 700; color: #fff; background: var(--pink); width: 19px; height: 19px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
/* 본문(답변)은 아이콘 폭만큼 들여쓰기해 질문 텍스트와 정렬 */
.n-qa .n-ul { margin: 0 0 0 26px; }
.n-qa > p { margin-left: 26px; }
/* 한 콜아웃 안에 여러 질문이 묶일 때, 다음 질문 위 간격 */
.n-qa .n-ul + .n-qa-q, .n-qa > p + .n-qa-q { margin-top: 22px; }
.n-qa .n-ul .n-li { font-size: 16px; color: var(--body); }
.n-qa > p { font-size: 16px; color: var(--body); line-height: 1.7; }

/* 비용처리 목적별 케이스 카드 (뉴트럴, 라벨:내용 정렬) */
.n-case { background: var(--wash-ghost); border-radius: var(--r-md); padding: 18px 20px; margin: 14px 0; }
.n-case-t { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 12px; line-height: 1.4; }
.n-case-t .cn { color: var(--pink); margin-right: 7px; }
.n-case-row { display: flex; gap: 12px; padding: 9px 0; font-size: 15px; line-height: 1.65; }
.n-case-row + .n-case-row { border-top: 1px solid var(--ash); }
.n-case-row .k { flex: none; width: 68px; color: var(--slate); font-weight: 600; }
.n-case-row .v { flex: 1; color: var(--body); }
.n-case-row .v strong { color: var(--ink); font-weight: 600; }

/* 다크 밴드 (미드나잇 바이올렛) */
.dark-band {
  background: var(--midnight); border-radius: 28px;
  padding: 64px 48px; margin: 64px 0; text-align: center;
  position: relative; overflow: hidden;
}
.dark-band .db-ghost { width: 72px; height: 78px; margin: 0 auto 24px; }
.dark-band .db-ghost svg { width: 100%; height: 100%; }
/* 다크 밴드는 두 모드 모두 어두운 배경 → 텍스트는 고정 밝은색 사용 */
.dark-band h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; color: #FDFCFE; letter-spacing: -0.035em; line-height: 1.2; margin-bottom: 16px; }
.dark-band h2 .accent { color: var(--pink); }
.dark-band p { font-size: 17px; font-weight: 400; color: rgba(253,252,254,0.7); max-width: 540px; margin: 0 auto 32px; line-height: 1.6; }
.dark-band .db-stats { display: flex; align-items: center; justify-content: center; gap: 48px; margin: 44px 0 28px; flex-wrap: wrap; }
.dark-band .db-stat-item { text-align: center; }
.dark-band .db-stat-divider { width: 1px; height: 56px; background: rgba(255,255,255,0.16); }
.dark-band .db-stat { font-size: clamp(34px, 4.4vw, 48px); font-weight: 700; color: var(--pink); letter-spacing: -0.03em; line-height: 1; }
.dark-band .db-stat-label { font-size: 16px; color: rgba(253,252,254,0.6); margin-top: 10px; }
@media (max-width: 560px) { .dark-band .db-stats { gap: 28px; } .dark-band .db-stat-divider { display: none; } }
.dark-band .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--r-xl);
  font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: var(--tracking);
  cursor: pointer; border: none; transition: all 0.2s var(--ease);
}
.btn .ic { width: 17px; height: 17px; }
/* Primary — 네이비 */
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #333333; }
/* Secondary — 화이트 + 보더 */
.btn-outline { background: var(--canvas); color: var(--ink); border: 1px solid var(--ash); }
.btn-outline:hover { background: #F0F0F0; }
.btn-on-dark { background: #fff; color: #16192A; }
.btn-on-dark:hover { background: #F0F0F0; }
/* 도움 요청 CTA 밴드 — 항상 어두운 배경(라이트·다크 공통) */
.cta-dark { background: #16192A; border-radius: var(--r-xl); padding: 36px 40px; text-align: center; margin: 32px 0 0; }
.cta-dark .cta-title { font-size: 19px; font-weight: 700; color: #FDFCFE; margin-bottom: 8px; }
.cta-dark .cta-sub { font-size: 15px; color: rgba(255,255,255,0.65); margin-bottom: 24px; }
.cta-dark .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-ghost-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
/* Mobile Pill — 네이비 알약 */
.btn-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border: none; border-radius: var(--r-full); padding: 6px 16px; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s var(--ease); }
.btn-pill:hover { background: #333333; }
/* Ghost — 텍스트 + hover 배경만 */
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--ink); border: none; border-radius: var(--r-full); padding: 6px 12px; font-family: var(--font); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s var(--ease); }
.btn-ghost:hover { background: #F8F8FA; }

/* ── 다운로드 / 연락처 / 사용처 / 팁 / 갤러리 카드 ── */
.download-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.dl-card { background: var(--frost); border: 1px solid transparent; border-radius: var(--r-lg); padding: 20px 22px; display: flex; align-items: center; gap: 16px; transition: all 0.2s var(--ease); }
.dl-card:hover { border-color: var(--ghost); }
.dl-card .dl-ic { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--canvas); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dl-card .dl-ic svg { width: 24px; height: 24px; color: var(--ink); }
.dl-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.dl-sub { font-size: 14px; color: var(--slate); margin-top: 2px; }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.contact-card { background: var(--frost); border: 1px solid var(--ash); border-radius: var(--r-lg); padding: 18px 22px; display: flex; align-items: center; gap: 16px; transition: all 0.2s var(--ease); }
.contact-card:hover { border-color: #d4d4d8; transform: translateY(-2px); }
.contact-card .c-ic { width: 46px; height: 46px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--ash); color: var(--menu-gray); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card .c-ic svg { width: 23px; height: 23px; }
.contact-card .c-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.contact-card .c-desc { font-size: 14px; color: var(--slate); margin-top: 2px; }

/* 채널 아이콘 (원형, 아이콘만) */
.channel-icons { display: flex; gap: 14px; margin: 18px 0 4px; flex-wrap: wrap; }
.channel-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--frost); border: 1px solid var(--ash); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: all 0.18s var(--ease); }
.channel-icon:hover { border-color: #d4d4d8; box-shadow: var(--glow-md); transform: translateY(-2px); }
.channel-icon .ic { width: 24px; height: 24px; }

.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.usage-item { background: var(--canvas); border: 1px solid var(--ash); border-radius: var(--r-lg); padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; transition: all 0.2s var(--ease); }
.usage-item:hover { border-color: var(--ghost); box-shadow: var(--glow); }
.usage-item .u-ic { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usage-item .u-ic svg { width: 24px; height: 24px; }
.usage-item:nth-child(1) .u-ic { background: var(--wash-ghost); color: var(--ghost-deep); }
.usage-item:nth-child(2) .u-ic { background: var(--wash-blush); color: #e08a99; }
.usage-item:nth-child(3) .u-ic { background: var(--wash-cream); color: #c79a2e; }
.usage-item:nth-child(4) .u-ic { background: var(--wash-mint); color: var(--mint); }
.usage-item h4 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.usage-item p { font-size: 14.5px; color: var(--slate); line-height: 1.55; }

.tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.tip-card { background: var(--frost); border: 1px solid var(--ash); border-radius: var(--r-card); padding: 24px 26px; transition: all 0.2s var(--ease); }
.tip-card:hover { transform: translateY(-3px); border-color: #d4d4d8; box-shadow: var(--glow-md); }
.tip-card .t-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tip-card .t-ic { width: 42px; height: 42px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--ash); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tip-card .t-ic svg { width: 22px; height: 22px; }
.tip-card h4 { font-size: 17.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.tip-card p { font-size: 15px; color: #4a4a52; line-height: 1.6; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.gallery-card { background: var(--frost); border: 1px solid var(--ash); border-radius: var(--r-lg); padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 14px; transition: all 0.2s var(--ease); }
.gallery-card:hover { border-color: var(--ghost); box-shadow: var(--glow-md); transform: translateY(-3px); }
.gallery-card .g-ic { width: 100%; height: 90px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--ash); color: var(--ghost-deep); display: flex; align-items: center; justify-content: center; }
.gallery-card .g-ic svg { width: 30px; height: 30px; }
.gallery-card .g-ic.g-logo { overflow: hidden; padding: 12px 16px; }
.gallery-card .g-ic.g-logo img { max-width: 90%; max-height: 66px; width: auto; height: auto; object-fit: contain; display: block; }
.gallery-card .academy-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; letter-spacing: -0.02em; }
.gallery-card .blog-link { font-size: 14px; color: var(--ghost-deep); display: flex; align-items: center; gap: 5px; }
.gallery-card .blog-link .ic { width: 14px; height: 14px; }

/* ── Stat 배너 / 이벤트 카드 ── */
.stat-banner { background: var(--midnight); border-radius: var(--r-card); padding: 56px 48px; text-align: center; margin: 24px 0; }
.stat-banner .num { font-size: clamp(56px,8vw,88px); font-weight: 700; color: var(--pink); letter-spacing: -0.05em; line-height: 1; }
.stat-banner p { font-size: 17px; color: rgba(253,252,254,0.7); margin-top: 14px; }

.event-card { background: var(--midnight); border-radius: var(--r-card); padding: 48px; position: relative; overflow: hidden; margin: 20px 0; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--mint); color: #fff; font-size: 13px; font-weight: 400; padding: 6px 16px; border-radius: var(--r-pill); margin-bottom: 20px; }
.live-dot { width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: blink 1.4s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.event-card h3 { font-size: 28px; font-weight: 700; color: #FDFCFE; margin-bottom: 14px; letter-spacing: -0.03em; }
.event-card p { font-size: 16px; color: rgba(253,252,254,0.7); margin-bottom: 28px; line-height: 1.7; }

/* ════════════════════════════════════════
   이벤트 캘린더
   ════════════════════════════════════════ */
.cal-wrap { background: #fff; border: 1px solid var(--ash); border-radius: var(--r-card); padding: 24px; box-shadow: var(--glow); margin: 18px 0; }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cal-title { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { font-family: var(--font); border: 1px solid var(--ash); background: #fff; border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; font-size: 14px; color: var(--ink); transition: all 0.15s var(--ease); }
.cal-nav button:hover { border-color: var(--ghost); color: var(--ghost-deep); }
.cal-nav .cal-arrow { padding: 7px 13px; font-size: 16px; line-height: 1; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.cal-leg { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--slate); }
.cal-leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ash); border: 1px solid var(--ash); border-radius: var(--r-md); overflow: hidden; }
.cal-dow { background: var(--frost); text-align: center; padding: 11px 0; font-size: 13px; color: var(--slate); }
.cal-dow.sun { color: #e8607a; }
.cal-dow.sat { color: #5b9ee8; }
.cal-cell { background: #fff; min-height: 108px; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell.other { background: #fcfbfc; }
.cal-cell.other .cal-d { color: #d4ced2; }
.cal-d { font-size: 13px; color: var(--ink); margin-bottom: 3px; align-self: flex-start; }
.cal-d.sun { color: #e8607a; }
.cal-d.sat { color: #5b9ee8; }
.cal-cell.today { background: var(--wash-ghost); }
.cal-cell.today .cal-d { background: var(--ghost); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.cal-event { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 7px; font-size: 11.5px; color: #46404a; overflow: hidden; cursor: pointer; transition: filter 0.12s, transform 0.12s; }
.cal-event:hover { filter: brightness(0.95); transform: translateY(-1px); }
.cal-event-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cal-event-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 11px; color: var(--slate); padding-left: 7px; }
.cal-hint { font-size: 13px; color: var(--slate); margin-top: 14px; text-align: center; }

/* 일정 상세 모달 */
.cal-modal { position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; padding: 20px; }
.cal-modal.open { display: flex; }
.cal-modal-overlay { position: absolute; inset: 0; background: rgba(22,25,42,0.45); backdrop-filter: blur(2px); }
.cal-modal-box { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: var(--r-lg); padding: 30px 30px 28px; box-shadow: var(--glow-lg); animation: calpop 0.18s var(--ease); }
@keyframes calpop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.cal-modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: none; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--slate); transition: background 0.15s; }
.cal-modal-close:hover { background: var(--frost); }
.cal-modal-close svg { width: 18px; height: 18px; }
.cal-modal-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.cal-modal-dot { width: 9px; height: 9px; border-radius: 50%; }
.cal-modal-title { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 16px; }
.cal-modal-info { background: var(--frost); border: 1px solid var(--ash); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.cal-modal-row { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.cal-modal-row .ic { width: 16px; height: 16px; color: var(--faint); flex-shrink: 0; }
.cal-modal-rl { color: var(--slate); width: 52px; flex-shrink: 0; }
.cal-modal-rv { color: var(--ink); font-weight: 600; }
.cal-modal-desc { font-size: 15px; color: var(--body); line-height: 1.7; margin-bottom: 22px; }
.cal-modal-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: 13px 20px; font-size: 15px; font-weight: 600; transition: background 0.2s var(--ease); }
.cal-modal-cta:hover { background: #333333; }

.cal-list { display: flex; flex-direction: column; margin-top: 8px; }
.cal-li { display: flex; gap: 18px; padding: 14px 8px; border-bottom: 1px solid var(--ash); }
.cal-li:last-child { border-bottom: none; }
.cal-li-date { display: flex; align-items: center; gap: 9px; width: 110px; flex-shrink: 0; font-size: 15px; color: var(--ink); }
.cal-li-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cal-li-dow { color: var(--slate); font-size: 13px; }
.cal-li-cat { font-size: 12.5px; font-weight: 700; }
.cal-li-title { font-size: 15.5px; color: var(--ink); margin-top: 3px; }
@media (max-width: 700px) {
  .cal-cell { min-height: 78px; padding: 6px; }
  .cal-event { padding: 3px; justify-content: center; }
  .cal-event-t { display: none; }
  .cal-more { display: none; }
  .cal-li-date { width: 90px; font-size: 14px; }
}

/* ════════════════════════════════════════
   FAQ
   ════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; margin: 22px 0; border-top: 1px solid var(--ash); }
.faq-item { border-bottom: 1px solid var(--ash); }
.faq-question { width: 100%; background: none; border: none; padding: 24px 6px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; text-align: left; font-family: var(--font); font-size: 16.5px; font-weight: 600; letter-spacing: var(--tracking); color: var(--ink); transition: color 0.15s; }
.faq-question:hover { color: var(--ghost); }
.faq-arrow { width: 20px; height: 20px; color: var(--slate); transition: transform 0.22s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--ink); }
.faq-answer { display: none; padding: 0 6px 26px; font-size: 15.5px; color: var(--body); line-height: 1.8; }
.faq-item.open .faq-answer { display: block; }
.faq-answer p + p { margin-top: 10px; }
.faq-answer strong { color: var(--ink); font-weight: 600; }

/* ── 크래빗 커뮤니티 카드 ── */
.comm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 8px; }
.comm-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; background: var(--canvas); border: 1px solid var(--ash); border-radius: var(--r-lg); }
.comm-ic { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; }
.comm-ic .ic { width: 24px; height: 24px; color: var(--ink); }
.comm-ic.c-mint { background: #DCF1E6; }
.comm-ic.c-peach { background: #FBE7D6; }
.comm-ic.c-blue { background: #DCE6FB; }
.comm-card h3 { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0 0; }
.comm-card p { font-size: 14.5px; color: var(--slate); line-height: 1.65; margin: 0; flex: 1; }
.comm-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 9px 16px; border-radius: var(--r-xl); border: 1px solid var(--ash); background: var(--canvas); color: var(--ink); font-size: 14px; font-weight: 600; transition: all 0.15s var(--ease); }
.comm-btn:hover { background: var(--frost); border-color: var(--ink); }
.comm-btn .ic { width: 15px; height: 15px; }
[data-theme="dark"] .comm-card { background: var(--frost); }
[data-theme="dark"] .comm-ic.c-mint { background: #1c3329; }
[data-theme="dark"] .comm-ic.c-peach { background: #3a2c20; }
[data-theme="dark"] .comm-ic.c-blue { background: #1f2a3d; }
[data-theme="dark"] .comm-ic .ic { color: #E8E9ED; }
[data-theme="dark"] .comm-btn { background: var(--frost); }

/* ════════════════════════════════════════
   검색 모달
   ════════════════════════════════════════ */
.search-overlay { display: none; position: fixed; inset: 0; z-index: 290; background: rgba(60,49,91,0.30); backdrop-filter: blur(4px); }
.search-overlay.active { display: block; }
.search-modal { display: none; position: fixed; top: 92px; left: 50%; transform: translateX(-50%) translateY(-12px); width: 640px; max-width: 92vw; max-height: 70vh; background: var(--canvas); border-radius: var(--r-card); box-shadow: var(--glow-lg); z-index: 300; flex-direction: column; overflow: hidden; opacity: 0; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); border: 1px solid var(--ash); }
.search-modal.open { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.search-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--ash); }
.search-head .ic { width: 22px; height: 22px; color: var(--ghost); flex-shrink: 0; }
#search-input { flex: 1; border: none; outline: none; font-family: var(--font); font-size: 18px; color: var(--ink); background: none; letter-spacing: var(--tracking); }
#search-input::placeholder { color: var(--slate); }
.search-clear { display: none; width: 26px; height: 26px; border: none; background: var(--frost); border-radius: var(--r-pill); cursor: pointer; align-items: center; justify-content: center; color: var(--slate); }
.search-clear svg { width: 14px; height: 14px; }
.search-esc { font-size: 12px; color: var(--slate); background: var(--frost); border: 1px solid var(--ash); border-radius: var(--r-pill); padding: 3px 9px; }
.search-results { overflow-y: auto; padding: 10px; }
.sr-count { font-size: 13px; color: var(--slate); padding: 8px 14px 10px; }
.sr-item { display: block; padding: 14px 16px; border-radius: var(--r-md); transition: background 0.12s; cursor: pointer; }
.sr-item:hover, .sr-item.focused { background: var(--wash-ghost); }
.sr-item-page { font-size: 12.5px; color: var(--ghost-deep); margin-bottom: 4px; }
.sr-item-title { font-size: 16.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.02em; }
.sr-item-summary { font-size: 14px; color: var(--slate); line-height: 1.5; }
.sr-item mark { background: var(--cream); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.sr-empty { text-align: center; padding: 40px 20px; }
.sr-empty-icon { width: 44px; height: 44px; margin: 0 auto 16px; color: var(--ghost); }
.sr-empty-icon svg { width: 100%; height: 100%; }
.sr-empty p { font-size: 15px; color: var(--slate); line-height: 1.6; }
.sr-quick-wrap { margin-top: 24px; }
.sr-quick-label { font-size: 12px; color: var(--slate); }
.sr-quick-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.sr-quick-link { font-size: 14px; color: var(--ghost-deep); background: var(--wash-ghost); border-radius: var(--r-pill); padding: 8px 18px; transition: all 0.15s; }
.sr-quick-link:hover { background: var(--ghost); color: var(--canvas); }
.sr-ask-ai { margin-top: 20px; font-family: var(--font); font-size: 15px; color: var(--canvas); background: var(--ghost); border: none; border-radius: var(--r-pill); padding: 12px 24px; cursor: pointer; box-shadow: var(--glow-cta); }
.sr-ask-ai:hover { background: var(--ghost-deep); }
.sr-ask-ai svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }

/* ════════════════════════════════════════
   문의 채팅 패널
   ════════════════════════════════════════ */
.chat-panel { position: fixed; bottom: 0; right: 0; z-index: 320; width: 420px; max-width: 100vw; height: 640px; max-height: 100vh; background: var(--canvas); border-radius: var(--r-card) 0 0 0; box-shadow: var(--glow-lg); display: flex; flex-direction: column; overflow: hidden; transform: translateY(110%); transition: transform 0.32s var(--ease); }
.chat-panel.open { transform: translateY(0); }
@media (min-width: 640px) { .chat-panel { bottom: 24px; right: 24px; border-radius: var(--r-card); height: 620px; } }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--ash); background: var(--wash-ghost); }
.chat-header-avatar { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--ghost); color: var(--canvas); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-header-avatar svg { width: 24px; height: 24px; }
.chat-header-info h3 { font-size: 17px; font-weight: 400; color: var(--ink); }
.chat-header-info p { font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 5px; }
.chat-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.chat-close { margin-left: auto; width: 34px; height: 34px; border: none; background: none; border-radius: var(--r-pill); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--slate); transition: background 0.15s; }
.chat-close:hover { background: rgba(60,49,91,0.08); }
.chat-close svg { width: 20px; height: 20px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-welcome { text-align: center; padding: 20px 12px; }
.chat-welcome .cw-avatar { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: var(--r-md); background: var(--wash-ghost); color: var(--ghost-deep); display: flex; align-items: center; justify-content: center; }
.chat-welcome .cw-avatar svg { width: 30px; height: 30px; }
.chat-welcome h4 { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.02em; }
.chat-welcome p { font-size: 14.5px; color: var(--slate); line-height: 1.6; }
.chat-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.chat-suggestion { font-family: var(--font); font-size: 14.5px; text-align: left; color: var(--ink); background: var(--frost); border: 1px solid transparent; border-radius: var(--r-md); padding: 12px 16px; cursor: pointer; transition: all 0.15s; letter-spacing: var(--tracking); }
.chat-suggestion:hover { border-color: var(--ghost); background: var(--wash-ghost); color: var(--ghost-deep); }
.chat-msg { max-width: 84%; padding: 12px 16px; border-radius: var(--r-md); font-size: 15px; line-height: 1.65; }
.chat-msg-user { align-self: flex-end; background: var(--ghost); color: var(--canvas); border-bottom-right-radius: 5px; }
.chat-msg-assistant { align-self: flex-start; background: var(--frost); color: var(--ink); border-bottom-left-radius: 5px; }
.chat-msg-assistant strong { color: var(--ink); font-weight: 700; }
.chat-msg-assistant a.chat-link { color: var(--ghost-deep); }
.chat-answer-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 9px 16px; background: var(--wash-ghost); border-radius: var(--r-pill); font-size: 13.5px; line-height: 1.3; transition: all 0.15s; }
.chat-answer-link:hover { background: var(--ghost); color: var(--canvas); }
.chat-answer-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.chat-related { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ash); }
.chat-related-label { display: block; font-size: 11.5px; color: var(--slate); margin-bottom: 7px; }
.chat-related-link { display: block; padding: 7px 0; font-size: 13.5px; color: var(--ghost-deep); }
.chat-related-link::before { content: '→ '; color: var(--slate); }
.chat-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ghost); animation: typing 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.chat-input-area { display: none; align-items: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--ash); background: var(--canvas); }
#chat-input { flex: 1; resize: none; border: 1px solid var(--ash); border-radius: var(--r-md); padding: 11px 16px; font-family: var(--font); font-size: 15px; color: var(--ink); outline: none; max-height: 120px; line-height: 1.5; letter-spacing: var(--tracking); transition: border-color 0.15s; }
#chat-input:focus { border-color: var(--ghost); }
.chat-send { width: 44px; height: 44px; border: none; background: var(--ghost); color: var(--canvas); border-radius: var(--r-md); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; box-shadow: var(--glow-cta); }
.chat-send:hover { background: var(--ghost-deep); }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-send svg { width: 20px; height: 20px; }

/* 모바일 토글 */
.sidebar-toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--r-sm); color: var(--ink); transition: background 0.15s; }
.sidebar-toggle:hover { background: var(--frost); }
.sidebar-toggle svg { width: 22px; height: 22px; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(22,25,42,0.35); z-index: 150; }

/* 사이드바 접기 (데스크탑) */
body.nav-collapsed .sidebar { transform: translateX(-100%); }
body.nav-collapsed .docs-layout { grid-template-columns: 0 1fr minmax(0, var(--content-max)) var(--toc-w) 1fr; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 1240px) {
  :root { --toc-w: 0px; }
  .docs-layout { grid-template-columns: var(--sidebar-w) 1fr; }
  .toc { display: none; }
  /* TOC가 없을 땐 본문만 중앙정렬 */
  .doc-content { grid-column: 2; max-width: var(--content-max); margin-left: auto; margin-right: auto; padding: 48px 32px 72px; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .docs-layout { grid-template-columns: 1fr; }
  .search-trigger { display: none; }
  .sidebar { transform: translateX(-100%); width: 280px; transition: transform 0.25s var(--ease); z-index: 160; border-right: 1px solid var(--ash); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.active { display: block; }
  .sidebar-toggle { display: flex; }
  .doc-content { grid-column: 1; padding: 36px 22px 56px; }
  .home-cards { grid-template-columns: 1fr; }
  .comm-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .usage-grid, .tips-grid, .download-row, .contact-grid, .step-cards { grid-template-columns: 1fr; }
  .cat-row { grid-template-columns: 1fr; gap: 16px; }
  .cat-art { aspect-ratio: 16 / 9; height: auto; }
  .cat-art-list { grid-template-columns: 1fr; }
  .chat-panel { width: 100vw; height: 100vh; }
  .topnav-title, .topnav-divider { display: none; }
  .dark-band { padding: 48px 28px; }
  .site-footer { padding: 36px 22px 32px; }
  .sf-top { flex-direction: column; gap: 28px; }
  .sf-cols { gap: 40px; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .doc-nav { flex-direction: column; }
  .topnav { width: calc(100% - 24px); padding: 0 10px 0 16px; }
  .doc-header h1 { font-size: 34px; }
}

/* ════════════════════════════════════════
   다크 모드
   ════════════════════════════════════════ */
[data-theme="dark"] {
  --ink:        #E8E9ED;
  --body:       #C6C8D0;
  --slate:      rgba(232,233,237,0.58);
  --faint:      rgba(232,233,237,0.30);
  --canvas:     #14161D;
  --content-white: #14161D;
  --frost:      #1E212B;
  --ash:        #2C303B;
  --menu-gray:  rgba(232,233,237,0.62);
  --wash-ghost: #232733;
  --wash-pink:  rgba(251,117,187,0.16);
  --nav-pink:   #14161D;
  --wash-lav:   #1a2230;
  --wash-cream: #2a2616;
  --wash-blush: #2a1b24;
  --wash-mint:  #16271f;
  --cream:      #4a4320;
  --glow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --glow:    0 4px 16px rgba(0,0,0,0.4);
  --glow-md: 0 8px 28px rgba(0,0,0,0.5);
  --glow-lg: 0 16px 44px rgba(0,0,0,0.6);
}
[data-theme="dark"] body { background: #14161D; }
/* 상단바 */
[data-theme="dark"] .topnav { background: rgba(20,22,29,0.9); }
/* 로고: 라이트/다크 전용 이미지 스왑 */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
/* 본문 텍스트 색상 */
[data-theme="dark"] .n-p,
[data-theme="dark"] .n-lead,
[data-theme="dark"] .n-li,
[data-theme="dark"] .n-callout .n-callout-body,
[data-theme="dark"] .n-table td,
[data-theme="dark"] .n-qa .n-ul .n-li,
[data-theme="dark"] .n-qa > p,
[data-theme="dark"] .cal-modal-desc,
[data-theme="dark"] .faq-answer { color: #C4C6CE; }
/* 리스트 불릿(--ghost=네이비)이 다크 배경에서 안 보이던 문제 */
[data-theme="dark"] .n-li::before { background: var(--slate); }
[data-theme="dark"] .n-ul .n-ul .n-li::before { border-color: var(--slate); }
/* FAQ 활성 테두리/화살표 다크 대비 */
[data-theme="dark"] .faq-item.open { border-color: #3a3f4d; }
[data-theme="dark"] .faq-item.open .faq-arrow { color: #E8E9ED; }
/* 흰색 카드 표면 → 어두운 표면 */
[data-theme="dark"] .step-card,
[data-theme="dark"] .cat-art-row,
[data-theme="dark"] .kit-card,
[data-theme="dark"] .home-card,
[data-theme="dark"] .cal-wrap,
[data-theme="dark"] .cal-modal-box { background: var(--frost); border-color: var(--ash); }
[data-theme="dark"] .step-card { border-color: var(--ash); }
[data-theme="dark"] .home-card .hc-ic,
[data-theme="dark"] .contact-card .c-ic,
[data-theme="dark"] .tip-card .t-ic { background: #262A35; border-color: var(--ash); }
[data-theme="dark"] .cal-nav button { background: var(--frost); }
[data-theme="dark"] .cal-cell { background: #1B1E27; }
[data-theme="dark"] .cal-cell.other { background: #16181F; }
[data-theme="dark"] .cat-art-thumb { background: #262A35; }
[data-theme="dark"] .cat-art-thumb .ic { color: #C4C6CE; }
/* --ink 를 '어두운 배경'으로 쓰던 요소들은 다크에서도 어둡게 유지 */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-pill,
[data-theme="dark"] .cal-modal-cta,
[data-theme="dark"] .cat-art.c-brand { background: #2B2F3B; color: #E8E9ED; }
[data-theme="dark"] .n-qa-q::before { background: var(--pink); color: #fff; }
[data-theme="dark"] .cal-cell.today .cal-d { background: var(--pink); color: #14161D; }
/* 홈 카테고리 파스텔 썸네일 → 다크 톤 */
[data-theme="dark"] .cat-art.c-peach,  [data-theme="dark"] .kit-card-ic.c-peach { background: #3a2c20; }
[data-theme="dark"] .cat-art.c-blue,   [data-theme="dark"] .kit-card-ic.c-blue  { background: #1f2a3d; }
[data-theme="dark"] .cat-art.c-mint  { background: #1c3329; }
[data-theme="dark"] .cat-art.c-gray  { background: #2a2d36; }
[data-theme="dark"] .cat-art .ic { color: #E8E9ED; }
/* 검색 결과 하이라이트 */
[data-theme="dark"] mark { background: rgba(251,117,187,0.28); color: #fff; }
/* 토글 버튼 hover 시 색 */
[data-theme="dark"] .topnav-icon-btn:hover { background: var(--frost); }

/* 인터랙티브 워크스루 임베드 */
.walkthrough { margin: 20px 0 28px; }
.walkthrough-head { font-size: 13.5px; color: var(--sub, #6b6b74); margin-bottom: 10px; }
.walkthrough iframe { width: 100%; aspect-ratio: 1920 / 1034; border: 0; border-radius: 12px; display: block; }



/* 워크스루 모션 영상 */
.walkthrough video { width: 100%; border-radius: 12px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.10); background: #fff; }

/* ── 학생 앱(모바일) 워크스루 & 단계별 UI — 회색 패널 안 라운드 앱 화면 ── */
.walkthrough.app iframe { aspect-ratio: auto; height: 700px; }
.app-band { background: #F2F2F5; border-radius: 20px; padding: 28px 22px; display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 12px 0 6px; }
[data-theme="dark"] .app-band { background: rgba(255,255,255,.05); }
.app-band img { width: min(230px, 46%); min-width: 175px; border-radius: 16px; display: block; background: #fff; box-shadow: 0 2px 12px rgba(17,17,26,.07); }
[data-theme="dark"] .app-band img { box-shadow: 0 2px 12px rgba(0,0,0,.4); }