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

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

/* ── 헤더가 페이지마다 흔들리지 않게 (2026-09-22) ──
   헤더는 모든 페이지가 공유하지만 상자 크기 계산(box-sizing)과 스크롤바 유무는
   페이지마다 달랐다. 실측: 새 홈에 box-sizing 리셋이 빠져 헤더 안쪽이 64px 넓게
   잡혀 로고·메뉴가 32px 밀렸고, 스크롤바 없는 짧은 페이지는 화면이 15px 넓어
   가운데 정렬된 헤더가 7.5px 움직였다. 헤더 안은 여기서 직접 정해 둔다. */
html{scrollbar-gutter:stable}
.header,.header *,.header *::before,.header *::after,
.mobile-nav,.mobile-nav *{box-sizing:border-box}
.header nav a{line-height:20px;letter-spacing:normal}
.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:1400px;margin:0 auto;padding:0 32px;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}

/* ── 데스크톱 메뉴 (2026-10-16 머리글 개편 B) ──
   사용자님: "[타닥타닥 구독]을 빼고 다른 메뉴들을 눈에 잘 띄게" → B(글자 + 색 아이콘).
   13px 회색 → 15px 검정·굵게, 칸 넓게. 아이콘은 메인 기능 칸과 같은 그림·색이고, 주소(href)로 고른다
   (app/header.py NAV_ITEMS — 메뉴를 더하면 여기 한 줄도 더한다). 그림은 mask 라 색을 --ic-c 하나로 바꾼다.
   ⚠ GIF 생성기(.nav-gif)는 글자에 그라데이션을 칠하므로(아래 .nav-gif 주석) 배경을 바꾸는 :hover·.active 에서 뺀다.
   폭이 좁아지면 차례로 줄인다(맨 아래 @media). 휴대폰 펼침 메뉴(.mobile-nav)는 여기에 안 걸린다. */
.header-inner nav{gap:4px}
.header-inner nav > a{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--text-primary);
  padding:8px 14px;border-radius:8px;letter-spacing:-.2px}
.header-inner nav > a:not(.nav-gif):hover{background:var(--bg-secondary)}
.header-inner nav > a.active:not(.nav-gif){color:var(--accent);background:var(--accent-light);font-weight:800}
.header-inner nav > a.nav-gif{font-weight:800}
.header-inner nav > a::before{content:'';width:17px;height:17px;flex:none;background:var(--ic-c,currentColor);
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.header-inner nav > a[href="/"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2017.75l-6.17%203.25%201.18-6.88-5-4.87%206.9-1L12%202l3.09%206.25%206.9%201-5%204.87%201.18%206.88z%27/%3E%3C/svg%3E");--ic-c:#E2A100}
.header-inner nav > a[href="/fonts"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3C/svg%3E");--ic-c:var(--accent)}
.header-inner nav > a[href="/find-font"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27/%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2710%27%20r%3D%272%27/%3E%3Cpath%20d%3D%27M21%2016l-5-5-8%209%27/%3E%3C/svg%3E");--ic-c:#B8790A}
.header-inner nav > a[href="/font-pair"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h3%27/%3E%3Cpath%20d%3D%27M14%2020h7%27/%3E%3Cpath%20d%3D%27M6.9%2015h6.9%27/%3E%3Cpath%20d%3D%27M10.2%206.3l5.8%2013.7%27/%3E%3Cpath%20d%3D%27M5%2020l6-16h2l7%2016%27/%3E%3C/svg%3E");--ic-c:var(--accent)}
.header-inner nav > a[href="/gif"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M10%209.5v5l4.5-2.5z%27/%3E%3C/svg%3E");--ic-c:#E0457B}
.header-inner nav > a[href="/font-convert"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2010h14l-4-4%27/%3E%3Cpath%20d%3D%27M17%2014H3l4%204%27/%3E%3C/svg%3E");--ic-c:#1A8A3A}
.header-inner nav > a[href="https://tdtd.io/apps.html"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%272%27%20width%3D%2714%27%20height%3D%2720%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M11%2018h2%27/%3E%3C/svg%3E");--ic-c:var(--text-primary)}
:root[data-theme="dark"] .header-inner nav > a[href="/"]{--ic-c:#F2C14E}
:root[data-theme="dark"] .header-inner nav > a[href="/find-font"]{--ic-c:#E0AC4D}
:root[data-theme="dark"] .header-inner nav > a[href="/font-convert"]{--ic-c:#5FCB85}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .header-inner nav > a[href="/"]{--ic-c:#F2C14E}
  :root:not([data-theme="light"]) .header-inner nav > a[href="/find-font"]{--ic-c:#E0AC4D}
  :root:not([data-theme="light"]) .header-inner nav > a[href="/font-convert"]{--ic-c:#5FCB85}
}

/* ── 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:240px;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:280px}

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


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

/* ── 오른쪽 ☰ 더보기 — About 묶음(소개·공지사항·자주 묻는 질문·매거진), 2026-10-16 ──
   사용자님 "About 메뉴를 야간모드 달 모양 옆에 햄버거 메뉴로". 누르면(초점) 또는 마우스를 올리면 펼친다 —
   :focus-within 이라 스크립트가 없다. 1024px 이하에서는 원래 ☰(.hamburger-btn, 전체 메뉴)가 나오므로 숨긴다.
   ::before 는 단추와 펼침 사이 틈을 메워 마우스가 내려가는 길에 닫히지 않게 한다. */
.more-dd{position:relative;display:flex}
.more-btn{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}
.more-btn:hover,.more-dd:focus-within .more-btn,.more-btn.on{background:var(--bg-secondary)}
.more-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;padding:6px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:none;flex-direction:column;gap:2px;z-index:210}
.more-menu::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
.more-dd:hover .more-menu,.more-dd:focus-within .more-menu{display:flex}
.more-menu a{font-size:14px;font-weight:500;color:var(--text-primary);padding:9px 12px;border-radius:6px;text-decoration:none;white-space:nowrap}
.more-menu a:hover{background:var(--bg-secondary)}
.more-menu a.active{color:var(--accent);background:var(--accent-light);font-weight:700}

.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:16px;color:var(--text-primary);padding:11px 4px;font-weight:600;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%}
}
/* 머리글 폭별 단계 (2026-10-16 실측: 1440 / 1366 / 1281 / 1181 / 1025px 에서 넘치지 않음을 확인) */
@media(min-width:1025px) and (max-width:1439px){
  .header-inner nav{gap:2px}
  .header-inner nav > a{padding:8px 9px}
  .search-wrap input{width:180px}
  .search-wrap input:focus{width:230px}
}
@media(min-width:1025px) and (max-width:1280px){
  .header-inner{gap:12px}
  .header-inner nav > a{font-size:14px;padding:7px 7px;gap:5px}
  .header-inner nav > a::before{width:15px;height:15px}
  .search-wrap input{width:130px}
  .search-wrap input:focus{width:200px}
}
@media(min-width:1025px) and (max-width:1180px){
  .header-inner nav > a::before{display:none}   /* 좁은 노트북은 아이콘을 접는다 */
  .search-wrap input{width:120px}
}
/* 1024px 이하는 메뉴가 한 줄에 안 들어간다 — 휴대폰처럼 ☰ 펼침 메뉴로 접는다 */
@media(max-width:1024px){
  .header-inner nav{display:none}
  .hamburger-btn{display:flex}
  .more-dd{display:none}
  .search-wrap{margin-left:12px;flex:1}
  .search-wrap input,.search-wrap input:focus{width:100%}
}

/* [제거 2026-09-22] 폰트 조합 찾기 띠(.pair-band*)와 --band-h.
   메인 개편으로 기능 입구가 홈 본문에 들어가면서 띠를 전 페이지에서 걷어냈다. */

/* ── 공유 푸터 ────────────────────────────────────────────────
   마크업은 app/header.py 의 render_footer() 가 만든다. 예전에는
   index.html 안에만 있었고 상세페이지에는 아예 없었다. 사업자등록번호·
   주소 같은 값이 들어가는 자리라, 페이지마다 복사해 두면 한쪽만 고쳐지는
   일이 반드시 생긴다 — 헤더를 한 곳으로 모은 것과 같은 이유다. */
/* 가로선은 안쪽 .footer-divider 하나만 쓴다.
   예전에는 footer 자체에도 border-top 이 있었는데, 테두리는 좌우 padding 을
   포함한 border box 에 그려져서 1240px, 안쪽 구분선은 content box 라 1192px —
   길이가 48px 다른 선 두 개가 링크 줄을 사이에 두고 겹쳐 보였다.
   위쪽 여백을 늘려 본문과의 간격은 선 없이 만든다. */
footer{padding:56px 32px 32px;max-width:1400px;margin:0 auto}
.footer-logo{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--text-primary);margin-bottom:10px}
.footer-logo .logo-spark{width:22px;height:22px;font-size:11px;border-radius:6px}
.footer-copy{font-size:12px;color:var(--text-muted);line-height:1.7;margin-bottom:18px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px;justify-content:center}
.footer-links a{font-size:12px;color:var(--text-secondary);text-decoration:none;transition:color .15s;font-weight:700}
.footer-links a:hover{color:var(--accent)}
.footer-divider{height:1px;background:var(--border);margin-bottom:18px}
.footer-company-name{font-size:12px;font-weight:800;color:var(--text-secondary);margin-bottom:8px;text-align:center}
.footer-company-info{font-size:11px;color:var(--text-muted);line-height:1.9;display:flex;flex-wrap:wrap;gap:0 14px;justify-content:center}
.footer-company-info span{display:inline-flex;align-items:center;white-space:nowrap}
.footer-company-info span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--text-muted);margin-right:14px;flex-shrink:0;opacity:.5}
.footer-company-info a{color:var(--text-muted);text-decoration:none}
.footer-company-info a:hover{color:var(--accent)}
/* 이 사이트가 무엇을 하는 곳인지 말하는 문장이 홈 어디에도 없었다.
   히어로는 이미 빽빽해서 더 넣을 자리가 아니고, 푸터는 원래 그런 말을
   두는 자리다. 사람이 읽어도 쓸모 있고, 크롤러도 여기서 주제를 읽는다. */
.footer-about{max-width:720px;margin:18px auto 0;font-size:12.5px;line-height:1.75;
  color:var(--text-muted);text-align:center;word-break:keep-all}
.footer-about b{color:var(--text-secondary);font-weight:700}
.footer-lic-note{max-width:720px;margin:10px auto 0;font-size:11px;line-height:1.6;
  color:var(--text-muted);text-align:center;word-break:keep-all}
.footer-copyright{font-size:11px;color:var(--text-muted);margin-top:14px;letter-spacing:.3px;text-align:center}

/* ── 광고 칸 (애드센스 광고 단위) ──
   칸은 페이지가 그리고, 안의 광고는 app/header.py 의 ffpFillAd 가 채운다.
   표시는 '광고' 한 가지만 쓴다 — 애드센스가 허용하는 이름표는
   '광고(Advertisements)'와 '스폰서 링크'뿐이다.
   폰트 카드와 헷갈리지 않게 카드 옷(글꼴 견본·버튼)은 입히지 않는다. */
.ffp-ad{min-width:0}
.ffp-ad-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  line-height:1;color:var(--text-muted);margin-bottom:8px}
/* 광고가 안 왔으면 칸째 접는다(구글이 안내하는 data-ad-status 방식).
   빈 상자에 '광고' 이름표만 남는 것보다 낫다. */
.ffp-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none}