/* ════════════════════════════════════════════════
   공유 헤더 스타일 — 모든 페이지(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)}
/* 로고 심볼 — 글자 앞에 붙는 체크 아이콘.
   SVG라 어떤 화면 배율에서도 또렷하다. flex-shrink:0 이 없으면 헤더가 좁아질 때
   아이콘이 먼저 찌그러진다. */
.logo .logo-mark{width:24px;height:24px;flex:0 0 auto;display:block}
.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}

/* ── GIF 생성기 메뉴 ──────────────────────────────
   글자 자체에 그라데이션을 흘려 넣는다(background-clip:text).
   배지나 아이콘을 옆에 붙이지 않은 이유: 헤더 높이가 60px로 고정이라
   요소가 하나 늘면 다른 메뉴와 세로 정렬이 어긋나고, 모바일에서는
   줄이 밀린다. 글자 안에서 처리하면 레이아웃이 그대로다.

   그라데이션을 변수로 뺀 건 hover/active에서 같은 값을 다시 써야 하기
   때문이다. nav a:hover가 background 단축 속성이라 그냥 두면 배경이
   회색으로 덮이는데, 글자가 투명 상태라 그대로 안 보이게 된다. */
.nav-gif{
  --gif-grad:linear-gradient(100deg,#FF4D6D,#FF9F1C,#2EC4B6,#4361EE,#B5179E,#FF4D6D);
  font-weight:800;letter-spacing:-.2px;
  background-image:var(--gif-grad);background-size:300% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ffpGifFlow 6s linear infinite}
@keyframes ffpGifFlow{to{background-position:300% 0}}

/* hover·active에서도 같은 모습을 유지한다.
   ⚠ background-image만 되살리면 안 된다. nav a:hover와 nav a.active가 쓰는
   `background:` 는 단축 속성이라 background-clip을 border-box로,
   background-size를 auto로 되돌린다. 그러면 그라데이션이 글자 모양이 아니라
   버튼 박스 전체를 칠하고, 글자는 투명이라 색 덩어리만 남는다.
   (실제로 /gif/templates·/gif 활성 상태에서 이렇게 깨졌다.)
   그래서 단축으로 한 번 깔끔히 덮은 뒤 필요한 롱핸드를 다시 선언한다.
   가중치: nav a:hover(0,1,2) < nav a.nav-gif:hover(0,2,2) */
nav a.nav-gif,nav a.nav-gif:hover,nav a.nav-gif.active,
.mobile-nav a.nav-gif,.mobile-nav a.nav-gif:hover,.mobile-nav a.nav-gif.active{
  background:var(--gif-grad);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* 활성 표시는 배경 칩 대신 밑줄로 준다 — 칩 배경을 깔면 글자 그라데이션이 덮인다 */
nav a.nav-gif.active{box-shadow:inset 0 -2px 0 #B5179E}
nav a.nav-gif:hover{filter:saturate(1.25) brightness(1.05)}

/* 모션 최소화 설정을 켠 사용자에게는 흐름을 멈추고 정지 그라데이션만 남긴다 */
@media(prefers-reduced-motion:reduce){
  .nav-gif{animation:none;background-position:35% 0}
}

.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}

/* 버튼 문구가 한글("타닥타닥 구독")이라 monospace 스택을 쓰면 안 된다.
   그 스택에는 한글이 없어서 굴림체 계열로 떨어지고, 공용 헤더라 전 페이지에서
   서체가 어긋나 보인다. 본문 폰트로 통일한다. */
.btn-subscribe{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;font-size:13px;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}
}

/* ── 폰트 조합 찾기 띠 ──
   헤더(fixed, 60px) 바로 아래에 붙어 따라다닌다. 닫으면 사라지고
   브라우저가 그것을 기억한다(localStorage → html.pairband-off).

   ⚠ 고정 요소끼리 자리를 다툰다.
   .tags-bar 가 top:60px, .hub-rail 이 top:124px 로 같은 자리를 노린다.
   띠가 보이는 동안에는 둘 다 띠 높이만큼 내려가야 겹치지 않으므로,
   JS(syncBandOffset)가 실제 높이를 재서 --band-h 에 넣고 두 규칙이
   calc() 로 더한다. 띠 높이를 상수로 박으면 화면 폭이 바뀔 때 어긋난다. */
html{--band-h:0px}
.pair-band{position:sticky;top:60px;z-index:30;
  background:var(--accent-light);border-bottom:1px solid var(--border)}
html.pairband-off .pair-band{display:none}
.pair-band-in{max-width:1240px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:8px}
.pair-band a{flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  padding:9px 0;text-decoration:none}
.pair-band-ico{flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff}
/* 아이콘은 인라인 SVG 다(app/header.py). 헤더가 붙는 페이지 중 넷은 tabler
   아이콘 폰트를 안 불러와서, 글리프로 두면 원 안이 빈칸이 된다.
   SVG 는 font-size 가 안 듣는다 — width/height 로 정해야 한다. */
.pair-band-ico svg{width:15px;height:15px;display:block}
/* 제목과 설명을 한 줄에 둔다. 좁아지면 설명부터 줄임표로 접힌다 —
   줄바꿈을 허용하면 띠 높이가 화면 폭에 따라 들쭉날쭉해지고, 그 높이를
   아래 고정 요소들이 따라 쓰므로 흔들림이 화면 전체로 번진다. */
.pair-band-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px}
.pair-band-t{flex:none;font-size:14.5px;font-weight:800;letter-spacing:-.35px;
  color:var(--text-primary)}
.pair-band-d{flex:1;min-width:0;font-size:12.5px;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pair-band-go{flex:none;display:inline-flex;align-items:center;gap:3px;
  font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.pair-band-go svg{width:14px;height:14px;display:block}
.pair-band-x{flex:none;width:26px;height:26px;padding:0;border:none;
  background:none;border-radius:50%;color:var(--text-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s}
.pair-band-x:hover{color:var(--text-primary);background:var(--bg-card)}
.pair-band-x svg{width:15px;height:15px;display:block}
/* 좌우 여백은 본문 폭 규칙(각 페이지의 768px 분기)과 맞춘다.
   index.html 에만 있던 것을 띠와 함께 올렸다 — 안 올리면 다른 페이지에서는
   좁은 화면인데도 여백이 24px 로 남는다. */
@media(max-width:768px){
  .pair-band-in{padding:0 16px}
}
/* 좁은 화면에서는 설명과 '조합 보기' 글자를 걷어내고 제목·화살표만 남긴다.
   닫기 버튼은 어느 폭에서도 남는다 — 닫을 수 없으면 띠가 아니라 덫이다. */
@media(max-width:560px){
  .pair-band a{gap:9px;padding:8px 0}
  .pair-band-ico{width:23px;height:23px}
  .pair-band-ico svg{width:13px;height:13px}
  .pair-band-t{font-size:13.5px}
  .pair-band-d{display:none}
  .pair-band-go b{display:none}
}