/* ════════════════════════════════════════════════
   공유 헤더 스타일 — 모든 페이지(index/about/faq/font/find-font)가
   이 파일 하나만 불러온다. 헤더를 고칠 땐 이 파일만 고치면
   전 페이지에 동시 반영됨. (app/header.py의 마크업과 짝을 이룸)

   이 파일을 불러오는 페이지는 다음 CSS 변수가 이미 정의돼 있어야 함:
   --bg, --bg-card, --border, --text-primary, --text-secondary,
   --text-muted, --accent, --accent-light
   ════════════════════════════════════════════════ */

.header{background:var(--bg-card);border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;z-index:200}
body{padding-top:60px}
.header-inner{max-width:1240px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:16px}

.logo{display:flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;font-family:'Noto Sans KR',-apple-system,sans-serif;font-weight:900;font-size:20px;letter-spacing:-.5px;color:var(--text-primary)}
.logo .logo-dot{width:7px;height:7px;background:var(--accent);border-radius:1px;display:inline-block;margin-bottom:2px}

nav{display:flex;gap:2px}
nav a{font-size:13px;color:var(--text-secondary);padding:6px 11px;border-radius:6px;text-decoration:none;transition:all .15s;white-space:nowrap}
nav a:hover{color:var(--text-primary);background:var(--bg-secondary)}
nav a.active{color:var(--accent);background:var(--accent-light);font-weight:700}

.search-wrap{position:relative;flex-shrink:0;margin-left:auto}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted);pointer-events:none;display:block}
.search-wrap input{width:280px;height:34px;border:1px solid var(--border);border-radius:18px;padding:0 14px 0 34px;font-size:13px;background:var(--bg-secondary);color:var(--text-primary);outline:none;font-family:inherit;transition:border-color .15s,width .2s}
.search-wrap input::placeholder{color:var(--text-muted)}
.search-wrap input:focus{border-color:var(--accent);width:320px}

.header-right{display:flex;align-items:center;gap:8px}

.btn-subscribe{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:12px;font-weight:500;letter-spacing:.2px;padding:8px 13px;border:1px solid var(--border);color:var(--text-secondary);border-radius:2px;white-space:nowrap;transition:all .15s;text-decoration:none;display:inline-block}
.btn-subscribe:hover{border-color:var(--text-primary);color:var(--text-primary)}

.theme-toggle{width:36px;height:36px;border:none;background:transparent;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.theme-toggle:hover{background:var(--bg-secondary)}
.theme-toggle .ti-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ti-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ti-sun{display:block}

.hamburger-btn{display:none;width:38px;height:38px;border:none;background:transparent;color:var(--text-primary);cursor:pointer;align-items:center;justify-content:center;border-radius:6px}
.hamburger-btn:hover{background:var(--bg-secondary)}

.mobile-nav{display:none;flex-direction:column;gap:2px;padding:8px 22px 14px;border-bottom:1px solid var(--border);background:var(--bg-card)}
.mobile-nav.open{display:flex}
.mobile-nav a,.mobile-nav button{font-size:14px;color:var(--text-primary);padding:11px 4px;font-weight:500;text-decoration:none}
.mobile-nav a.active{color:var(--accent);font-weight:700}

@media(max-width:768px){
  nav{display:none}
  .hamburger-btn{display:flex}
  .search-wrap{margin-left:12px;flex:1}
  .search-wrap input{width:100%}
  .search-wrap input:focus{width:100%}
  .btn-subscribe{display:none}
}