/* B 디자인(나이트 크래프트) 공통 틀: 색 토큰 + 왼쪽 레일 + 위쪽 막대 + 모바일 아래 탭 + 바닥글
   styles.css 다음에 불러서 기존 화면 요소의 색 변수도 함께 바꾼다. 틀 마크업은 src/apply-shell.js 가 넣는다. */
:root {
  --b-bg: #111214;
  --b-rail: #0B0C0E;
  --b-surface: #1A1C20;
  --b-raised: #23262B;
  --b-hover: #2A2E34;
  --b-border: #2C3036;
  --b-line: #24272C;
  --b-text: #ECEDEF;
  --b-muted: #A1A6AE;
  --b-faint: #80868F;
  --b-accent: #3FCF8E;
  --b-accent-ink: #0B0C0E;
  --b-accent-soft: #1B2A22;
  --b-lesson: #8AB8FF;
  --b-challenge: #F5B841;
  --b-support: #C4A7FF;
  --b-youtube: #E5484D;
  --b-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* 기존 styles.css 변수를 B 팔레트로 */
  --bg-primary: var(--b-bg);
  --bg-secondary: var(--b-surface);
  --bg-tertiary: var(--b-raised);
  --bg-hover: var(--b-hover);
  --bg-border: var(--b-border);
  --text-primary: var(--b-text);
  --text-secondary: var(--b-muted);
  --text-tertiary: var(--b-faint);
}

body { background: var(--b-bg); color: var(--b-text); }
/* 한국어 줄바꿈: 낱말 단위로 바꾸고(긴 주소처럼 넘칠 때만 끊음), 제목은 줄 길이를 고르게, 문단은 마지막 줄에 한 글자만 남지 않게 */
body { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
/* 스크롤바: 다크 배경에 맞춘 가는 막대. scrollbar-color 는 안쪽 스크롤 칸으로도 이어진다 */
:root { scrollbar-color: #3A3F46 var(--b-bg); scrollbar-width: thin; }
/* 표준 속성을 모르는 브라우저(사파리 등)용 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--b-bg); }
::-webkit-scrollbar-thumb { background: #3A3F46; border-radius: 999px; border: 2px solid var(--b-bg); }
::-webkit-scrollbar-thumb:hover { background: #4C525A; }
::-webkit-scrollbar-corner { background: var(--b-bg); }
/* 화면에서는 숨기고 화면 읽기 프로그램·검색엔진에는 남기는 제목 */
.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; }

/* ---------- 배치 ---------- */
.app { display: flex; min-height: 100vh; }
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-body > main { flex: 1; }

/* ---------- 왼쪽 레일 (데스크탑) ---------- */
/* 위쪽 막대가 없으므로 레일이 화면 높이를 다 쓴다: 항목을 크게, 간격을 넓게 */
.rail {
  position: sticky; top: 0; height: 100vh; flex: 0 0 96px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 18px;
  background: var(--b-rail); border-right: 1px solid var(--b-line); z-index: 50; scrollbar-width: none;
}
.rail-logo { display: block; margin-bottom: 22px; }
.rail-logo img { display: block; width: 40px; height: 40px; border-radius: 10px; }
.rail a.rail-item {
  width: 80px; padding: 14px 0; border-radius: 14px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--b-muted); text-decoration: none; font-size: 12px; line-height: 1.25; text-align: center;
}
.rail a.rail-item:hover { background: var(--b-raised); color: var(--b-text); }
.rail a.rail-item[aria-current="page"] { background: var(--b-accent-soft); color: var(--b-accent); font-weight: 700; }
.rail-spacer { flex: 1; min-height: 12px; }
.rail a.rail-sub { color: var(--b-youtube); }

/* ---------- 위쪽 막대 (모바일에서만: 로고) ---------- */
.topbar {
  display: none; position: sticky; top: 0; z-index: 40; height: 52px; box-sizing: border-box;
  align-items: center; padding: 0 16px;
  background: rgba(17, 18, 20, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--b-line);
}
.topbar-brand { display: flex; align-items: center; gap: 8px; color: var(--b-text); text-decoration: none; font-weight: 700; font-size: 16px; }
.topbar-brand img { width: 28px; height: 28px; border-radius: 7px; display: block; }

/* ---------- 바닥글 ---------- */
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 22px 32px; margin-top: 48px; border-top: 1px solid var(--b-line);
  font-size: 13px; color: var(--b-muted);
}
.site-footer a { color: var(--b-muted); }
.site-footer a:hover { color: var(--b-text); }

/* ---------- 모바일 아래 탭 ---------- */
.tabbar { display: none; }

/* ---------- 공통 화면 요소 ---------- */
.page-head { max-width: 1196px; padding: 32px 32px 0; box-sizing: border-box; }
.page-head h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3; color: var(--b-text); }
.page-head p { margin: 8px 0 0; font-size: 15px; color: var(--b-muted); }
.mono { font-family: var(--b-mono); }

@media (max-width: 768px) {
  .rail { display: none; }
  .topbar { display: flex; }
  .site-footer { padding: 20px 16px 96px; }
  .page-head { padding: 20px 16px 0; }
  .page-head h1 { font-size: 24px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;   /* 챗봇(9999) 위 */
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
    background: var(--b-rail); border-top: 1px solid var(--b-line);
  }
  .tabbar a, .tabbar summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px;
    color: var(--b-muted); text-decoration: none; font-size: 11px; white-space: nowrap; list-style: none; cursor: pointer;
  }
  .tabbar summary::-webkit-details-marker { display: none; }
  .tabbar a[aria-current="page"], .tabbar details.is-current summary { color: var(--b-accent); font-weight: 700; }
  .tabbar details { position: relative; }
  .tabbar-menu {
    position: absolute; right: 8px; bottom: 72px; min-width: 168px; padding: 6px;
    background: var(--b-surface); border: 1px solid var(--b-border); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  }
  .tabbar-menu a {
    flex-direction: row; justify-content: flex-start; gap: 10px; height: 44px; padding: 0 12px;
    border-radius: 10px; font-size: 14px; color: var(--b-text);
  }
  .tabbar-menu a:hover { background: var(--b-raised); }
  .tabbar-menu a[aria-current="page"] { color: var(--b-accent); }

  /* 챗봇 버튼을 아래 탭 위로 */
  #chatbot-widget { bottom: 84px !important; }
}

/* '비슷한 자료' 칸 (public/js/related.js — 지원 문서 상세·영상 요약 창 아래) */
.related-box { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--b-border); }
.related-box h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: var(--b-text); }
.related-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.related-box a { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--b-text); text-decoration: none; }
.related-box a:hover, .related-box a:focus-visible { background: var(--b-hover); }
.related-title { min-width: 0; overflow-wrap: anywhere; }
.related-kind { flex: none; padding: 1px 7px; border-radius: 4px; font-size: .72rem; font-weight: 700; color: #111; }
.related-v { background: var(--b-challenge); }
.related-t { background: var(--b-accent); }
.related-l { background: var(--b-lesson); }
.related-s { background: var(--b-support); }

/* '더 보기' 단추 — 통합 검색·영상·라이브러리·지원 문서 목록 공통(한 번에 다 펼치거나 쪽 번호로 나누지 않고 이어서 더 본다) */
.more-btn {
  display: block; margin: 22px auto 8px; padding: 10px 26px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .92rem; background: var(--b-raised); color: var(--b-text); border: 1px solid var(--b-border);
}
.more-btn:hover, .more-btn:focus-visible { background: var(--b-hover); border-color: var(--b-accent); outline: none; }
.more-btn small { margin-left: 6px; font-family: var(--b-mono); font-size: .78rem; color: var(--b-muted); }
.more-btn[hidden] { display: none; }