/* 공통 틀 — 기본 규칙, 본문 바로가기, 상단 메뉴, 하단 푸터, 버튼, 포커스 표시.
   소개 페이지와 블로그 테마가 같은 파일을 쓴다(수정은 이 파일에서만, 테마에는 tools/site/sync-theme.sh 로 복사). tokens.css 가 먼저 로드되어야 한다. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* 키보드 포커스: 모든 링크·버튼에 같은 표시 */
:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 2px; border-radius: 4px; }

/* 본문 바로가기 */
.ch-skip { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--paper); color: var(--ink); border: 2px solid var(--mint-deep); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; }
.ch-skip:focus { top: 12px; }

/* 상단 메뉴 */
.ch-top { position: sticky; top: 0; z-index: 10; background: rgba(251, 248, 241, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.ch-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.ch-brand { font-weight: 800; font-size: 18px; letter-spacing: -.01em; padding: 6px 0; }
.ch-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ch-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; }
.ch-nav a { display: flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); }
.ch-nav a[hidden] { display: none; }
.ch-nav a:hover { background: var(--mint-soft); color: var(--mint-deep); }
.ch-nav a[aria-current="page"] { background: var(--mint-soft); color: var(--mint-deep); }
.ch-icon-btn { border: 0; background: transparent; color: var(--ink); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ch-icon-btn:hover { background: var(--mint-soft); }

/* 버튼 */
.ch-btn { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; text-align: center; }
.ch-btn-main { background: var(--mint); color: var(--btn-ink); }
.ch-btn-main:hover { background: var(--mint-hover); }
.ch-btn-sub { background: var(--paper); border-color: var(--line); color: var(--ink); }
.ch-btn-sub:hover { border-color: var(--mint-deep); }

/* 하단 푸터 */
.ch-footer { border-top: 1px solid var(--line); padding: 28px 16px 40px; text-align: center; color: var(--sub); font-size: 13px; }

/* 푸터 안 링크 */
.ch-footer a { text-decoration: underline; text-underline-offset: 3px; }
.ch-footer a:hover { color: var(--mint-deep); }

@media (max-width: 600px) { .ch-nav a { padding: 6px 10px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }