:root{
  --bg:#fff; --fg:#111; --mut:#6a6a6f; --line:#e7e7e9; --card:#fafafa;
  --acc:#5b4bff; --maxw:1080px;
  /* 의미색 — 예전엔 규칙마다 hex 를 박아둬서 다크모드에서 그대로 나왔다.
     에러색(#dc2626)은 다크 배경 대비 4.02:1 로 AA 미달이었다. */
  --good:#2ea05a; --warn:#c8811f; --warn-line:#e0a23e; --danger:#dc2626; --like:#e0405e;
  --acc-weak:rgba(91,75,255,.14);   /* 강조색 옅은 면(체크 불릿 등) — 테마마다 다르다 */
  --hdr-h:92px;   /* 고정 헤더 높이 — 목록의 sticky 필터 줄이 그 아래에 붙도록 */
  /* 본문 UI 는 시스템 폰트 — 제목·로고만 --display 로 우리 폰트를 쓴다(아래).
     예전에 "페이지별 로드 여부에 따라 로고/nav 굵기가 바뀌던" 문제는 폰트가 아니라
     조건부 로드가 원인이었고, layout.php 가 UI 폰트를 무조건 로드하도록 고쳐 해결됐다. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  /* 제목·로고 전용 = 우리 카탈로그의 폰트(inc/fonts.php 의 UI_FONT). 본문 UI 는 --sans 그대로 둔다.
     전면 적용은 홈 기준 302KB, 제목·로고만은 49KB 로 6배 차이가 난다. 그리고 본문까지 우리
     폰트로 덮으면 카드에 놓인 견본과 경쟁해서 견본이 안 도드라진다. */
  --display:'Wanted Sans',-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
@media(prefers-color-scheme:dark){
  :root{--bg:#0f1116;--fg:#e6e8ee;--mut:#98a0b0;--line:#383c46;--card:#1a1d24;--acc:#9b8dff;--good:#4ade80;--warn:#e8b04a;--warn-line:#e8b04a;--danger:#f87171;--like:#ff6b85;--acc-weak:rgba(155,141,255,.18)}
}
/* 수동 토글(prefers보다 우선 — [data-theme] 특이도가 높음) */
/* 의미색도 함께 되돌려야 한다 — 안 그러면 OS 가 다크인데 수동으로 라이트를 고른 사람에게
   @media 가 준 다크 의미색(밝은 초록·빨강)이 흰 배경에 그대로 남는다. */
:root[data-theme=light]{--bg:#fff;--fg:#111;--mut:#6a6a6f;--line:#e7e7e9;--card:#fafafa;--acc:#5b4bff;--good:#2ea05a;--warn:#c8811f;--warn-line:#e0a23e;--danger:#dc2626;--like:#e0405e;--acc-weak:rgba(91,75,255,.14)}
:root[data-theme=dark]{--bg:#0f1116;--fg:#e6e8ee;--mut:#98a0b0;--line:#383c46;--card:#1a1d24;--acc:#9b8dff;--good:#4ade80;--warn:#e8b04a;--warn-line:#e8b04a;--danger:#f87171;--like:#ff6b85;--acc-weak:rgba(155,141,255,.18)}
.admin-users{width:100%;border-collapse:collapse;font-size:14px}
.admin-users th,.admin-users td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.admin-users th{color:var(--mut);font-weight:600}
.admin-users td.mut{color:var(--mut)}
.me{display:inline-flex;align-items:center;gap:7px;color:var(--fg);font-size:14px}
.me img{border-radius:999px;object-fit:cover}
.login-menu{position:relative}
.login-menu summary{list-style:none;cursor:pointer;color:var(--mut);padding:6px 14px;border:1px solid var(--line);border-radius:999px}
.login-menu summary::-webkit-details-marker{display:none}
.login-menu[open] summary,.login-menu summary:hover{color:var(--fg);border-color:var(--acc)}
.login-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:170px;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:20}
.login-pop a{padding:9px 12px;border-radius:8px;color:var(--fg);font-size:14px;white-space:nowrap}
.login-pop a:hover{background:var(--bg)}
/* 폰트 액션 버튼(URL복사·삭제요청) */
.fc-act{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--mut);cursor:pointer;transition:border-color .15s,color .15s}
.fc-act:hover{border-color:var(--acc);color:var(--fg)}
.fc-act.done{border-color:var(--acc);color:var(--acc)}
.submit-form textarea{font:inherit;font-size:15px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;resize:vertical;line-height:1.5}
.submit-form textarea:focus{outline:none;border-color:var(--acc)}
.cf-turnstile{margin:2px 0}
/* 삭제요청 모달 — .sched(다이얼로그) 안의 폼은 카드 크롬 제거 */
.del-modal{max-width:440px}
.del-form{background:none;border:0;border-radius:0;box-shadow:none;padding:4px 22px 22px;gap:15px}
.del-form .field label{font-size:13px;color:var(--mut);font-weight:600}
.del-form input,.del-form textarea{background:var(--card);width:100%;min-width:0}
.del-form input[readonly]{color:var(--mut);cursor:default}
.del-form .field2{gap:12px}
.del-form .field2 .field{min-width:0}   /* 그리드 오버플로우 방지(입력 min-width:auto 해제) */
.del-form button[type=submit]{width:100%;margin-top:2px}
@media(max-width:480px){.del-form .field2{grid-template-columns:1fr}}
/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px;max-width:760px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 18px}
.faq-item summary{list-style:none;cursor:pointer;font-weight:600;font-size:15.5px;padding:15px 0;display:flex;align-items:center;gap:10px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+";color:var(--acc);font-weight:700;font-size:19px;flex:none;transition:transform .2s}
.faq-item[open] summary::before{transform:rotate(45deg)}
.faq-item p{margin:0 0 16px 26px;color:var(--mut);font-size:14.5px;line-height:1.7}
.faq-item code{font-size:13px}

/* 관련 폰트 */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel-card{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 18px;transition:border-color .15s,transform .15s}
.rel-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.rel-card.nolic{border-color:var(--warn-line)}
.rel-lic{font-family:var(--sans);font-size:11.5px;color:var(--warn);letter-spacing:-.01em}
.rel-lic::before{content:"⚠ "}
.rel-sample{font-size:26px;line-height:1.2;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-name{font-size:14px;color:var(--fg);font-weight:600}
.rel-name small{color:var(--mut);font-weight:400;margin-left:5px}
@media(max-width:760px){.related{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.related{grid-template-columns:1fr}}
.dl-row{margin-top:18px}
.dl-btn{display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:#fff;font-weight:700;font-size:15px;border-radius:12px;padding:12px 20px;transition:filter .15s,transform .15s}
.dl-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.dl-btn svg{flex:none}
.dl-btn .dl-sub{font-weight:500;font-size:12.5px;opacity:.82}
.btn.ghost{border:1px solid var(--acc);color:var(--acc);background:none}
.btn.ghost:hover{background:var(--acc);color:#fff}
/* 폰트 제출/검증 */
/* minmax(0,1fr) 이어야 한다. 1fr 은 minmax(auto,1fr) 이라 트랙이 내용의 최소 너비 아래로
   안 줄어드는데, 이 폼에는 안 줄어드는 게 둘 있다 — 파일 입력과 300px 고정 Turnstile.
   좁은 화면에서 그 최소값이 화면보다 커지면 폼이 통째로 오른쪽으로 삐져나간다. */
.submit-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;margin:8px 0 48px}
.submit-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:20px;min-width:0}
.submit-form .field{display:flex;flex-direction:column;gap:5px;min-width:0}
.submit-form .field2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.submit-form label{font-size:14px;font-weight:600;color:var(--fg)}
.submit-form .req{color:var(--acc)}
.submit-form .hint{font-size:12.5px;color:var(--mut)}
/* 타입을 하나씩 나열하면 새 타입을 쓸 때마다 빠뜨린다 — 실제로 type=url 이 통째로
   스타일 없이 나왔다. 파일·체크박스·숨김만 빼고 나머지 입력은 전부 같은 모양이다. */
.submit-form input:not([type=file]):not([type=checkbox]):not([type=hidden]){font:inherit;font-size:15px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .15s;width:100%;min-width:0}
.submit-form input:focus{outline:none;border-color:var(--acc)}
/* 파일 입력은 "파일 선택 + 선택된 파일 없음" 만큼의 최소 너비를 갖고 그 아래로 안 줄어든다.
   min-width:0 을 줘야 좁은 화면에서 상자를 뚫지 않는다. */
.submit-form input[type=file]{font:inherit;font-size:14px;color:var(--mut);background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:14px;cursor:pointer;transition:border-color .15s,background .15s;min-width:0;width:100%}
.submit-form input[type=file]:hover{border-color:var(--acc)}
.submit-form input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13px;color:#fff;background:var(--acc);border:0;border-radius:8px;padding:8px 14px;margin-right:12px;cursor:pointer}
.submit-form .agree{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:13.5px;color:var(--fg);line-height:1.55}
.submit-form .agree input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--acc)}
.submit-form button{align-self:flex-start;background:var(--acc);color:#fff;border:0;border-radius:10px;padding:13px 28px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:filter .15s}
.submit-form button:hover{filter:brightness(1.08)}
.submit-side{display:flex;flex-direction:column;gap:14px}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.side-card h3{font-size:14px;margin-bottom:12px}
.crit{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--fg)}
.crit li{display:flex;align-items:center;gap:9px}
.crit li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--acc-weak,rgba(91,75,255,.14));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235b4bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.side-note{margin-top:14px;font-size:12.5px;color:var(--mut)}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--fg)}
.steps li::marker{color:var(--acc);font-weight:700}
.form-err{background:color-mix(in srgb,var(--danger) 12%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger);border-radius:10px;padding:11px 14px;margin-bottom:16px;font-size:14px}
/* Turnstile 은 폭 300px 짜리 iframe 을 넣는데 우리가 못 바꾼다. 좁은 화면에서는
   그만큼이 안 나와 폼을 밀어내므로 통째로 줄여 앉힌다(왼쪽 위 기준). */
.submit-form .cf-turnstile{max-width:100%}
@media(max-width:420px){
  .submit-form .cf-turnstile{transform:scale(.82);transform-origin:left top;height:54px}
}
@media(max-width:720px){
  .submit-wrap{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:32px}
  .submit-form{padding:18px;gap:16px;border-radius:14px}
  .submit-form .field2{grid-template-columns:1fr;gap:16px}
  .submit-form input[type=file]{padding:12px;font-size:13px}
  .submit-form input[type=file]::file-selector-button{padding:8px 12px;margin-right:10px}
  .submit-form input:not([type=file]):not([type=checkbox]):not([type=hidden]){font-size:16px}  /* iOS 자동확대 방지 */
  .submit-form button{width:100%;padding:14px}
  .side-card{padding:16px 18px}
}
/* 로그인 폼(간단 유지) */
.login-form{display:flex;flex-direction:column;gap:16px;max-width:400px;margin:8px 0 40px}
.login-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mut)}
.login-form input{font:inherit;font-size:15px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.login-form input:focus{outline:none;border-color:var(--acc)}
.login-form button{align-self:flex-start;background:var(--acc);color:#fff;border:0;border-radius:10px;padding:12px 24px;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.verify-ok,.verify-fail{border-radius:14px;padding:22px 24px;margin:8px 0 24px}
.verify-ok{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.3)}
.verify-fail{background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.3)}
.verify-ok h2,.verify-fail h2{font-size:18px;margin-bottom:10px}
.verify-ok ul,.verify-fail ul{margin:8px 0 0;padding-left:2px;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:14px}
.theme-toggle{background:none;border:1px solid var(--line);border-radius:999px;width:36px;height:36px;font-size:15px;line-height:1;color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.theme-toggle:hover{border-color:var(--acc);color:var(--fg)}
*{box-sizing:border-box;margin:0;padding:0}
/* 헤더가 고정이라 #앵커로 뛰면 목표가 그 뒤에 숨는다 — 그만큼 미리 멈춘다 */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)}
/* 한글 줄바꿈 — 기본값(normal)은 한글을 글자 단위로 끊어서 "배포됩 / 니다." 가 된다.
   keep-all 은 띄어쓰기에서만 끊는다. 여태 컴포넌트마다 개별로 때워왔는데(6곳) 원인은
   하나라 여기서 한 번에 잡는다. 긴 URL·해시처럼 띄어쓰기 없는 토큰은 keep-all 이면
   상자를 뚫고 나가므로 break-word 를 탈출구로 같이 준다. */
body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column;
  word-break:keep-all;overflow-wrap:break-word}
main{flex:1 0 auto}   /* 콘텐츠 짧아도 footer를 항상 하단에 */
a{color:inherit;text-decoration:none}
.mut{color:var(--mut)}

/* header / footer */
header.site,footer.site{width:100%;max-width:var(--maxw);margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:22px}
/* 스크롤해도 메뉴가 따라온다(참고 문서의 「고정 위치」). 배경은 이 바가 깔아야
   좌우 여백으로 본문이 지나가 보이지 않는다. 반투명은 지원될 때만 — 앞줄이 폴백. */
.site-bar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){
  .site-bar{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px) saturate(1.4)}
}
header.site{view-transition-name:site-header}
footer.site{view-transition-name:site-footer}
.brand{font-family:var(--display);font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:11px}
.brand-mark{flex:none;width:34px;height:34px;display:block;
  filter:drop-shadow(0 4px 12px rgba(120,80,255,.4));
  transition:transform .28s cubic-bezier(.2,.9,.3,1),filter .28s;
  animation:brand-float 3.6s ease-in-out infinite}
.brand:hover .brand-mark{transform:scale(1.12) rotate(-6deg);filter:drop-shadow(0 8px 20px rgba(150,90,255,.55))}
@keyframes brand-float{0%,100%{translate:0 0}50%{translate:0 -2.5px}}
@media(prefers-reduced-motion:reduce){.brand-mark{animation:none}.brand-mark .tx-shine{display:none}}
.brand .wm{display:inline-flex;flex-direction:column;line-height:1;gap:3px}
.brand .wordmark{font-size:27px;background:linear-gradient(100deg,var(--fg) 30%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .wordmark::after{content:"";display:inline-block;width:2px;height:.8em;margin-left:2px;background:var(--acc);border-radius:1px;vertical-align:baseline;animation:blink 1.1s step-end infinite}
.brand:hover .wordmark::after{animation:none}
.brand .tagline{font-weight:600;font-size:11px;letter-spacing:0;color:var(--mut)}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.brand .wordmark::after{animation:none}}
/* GNB — 글자만 늘어놓지 않고 알약 배경으로 누를 수 있는 영역을 만든다.
   현재 위치는 색만으로 알리지 않는다(색각 이상): 배경 + 아래 악센트 막대를 같이 쓴다. */
.gnb{margin-left:auto;display:flex;align-items:center;gap:2px;font-size:15px}
.gnb-a{position:relative;display:inline-flex;align-items:center;gap:4px;
  padding:8px 14px;border-radius:10px;color:var(--mut);white-space:nowrap;
  transition:color .15s,background .15s}
.gnb-a:hover{color:var(--fg);background:var(--card)}
.gnb-a.on{color:var(--fg);font-weight:600}
.gnb-a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:1px;height:2px;border-radius:2px;background:var(--acc)}

/* 도움말 드롭다운 — 안내 페이지가 늘어도 상단이 넓어지지 않는다 */
.gnb-drop{position:relative}
.gnb-drop summary{list-style:none;cursor:pointer}
.gnb-drop summary::-webkit-details-marker{display:none}
.gnb-drop[open] summary{color:var(--fg);background:var(--card)}
.gnb-caret{flex:none;opacity:.7;transition:transform .18s}
.gnb-drop[open] .gnb-caret{transform:rotate(180deg)}
.gnb-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:30;
  display:flex;flex-direction:column;gap:2px;min-width:270px;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.gnb-pop a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;color:var(--fg)}
.gnb-pop a:hover{background:var(--bg)}
.gnb-pop a.on{background:var(--bg);box-shadow:inset 2px 0 0 var(--acc)}
.gnb-pop b{font-size:14.5px;font-weight:600}
.gnb-pop small{font-size:12px;color:var(--mut);line-height:1.45}

.gnb-side{display:flex;align-items:center;gap:8px}

/* 모바일 메뉴 — 데스크톱에서는 없는 셈 친다(display:none 은 접근성 트리에서도 빠져
   같은 링크가 두 번 읽히지 않는다) */
/* position:static 이라 패널의 기준 상자가 .site-bar 가 된다 — 바 아래에 정확히 붙고
   화면 폭을 그대로 쓴다(vw 를 쓰면 스크롤바 폭만큼 가로 스크롤이 생긴다) */
.mnav{display:none;position:static}
.mnav summary{list-style:none;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:11px;color:var(--mut);background:none}
.mnav[open] .mnav-btn{color:var(--fg);border-color:var(--acc)}
/* transform-box:fill-box 가 없으면 origin 이 뷰박스 중심으로 잡혀 두 선이 한 점에서 안 만난다
   — 각 선을 제 중심에서 돌려야 5칸 이동으로 정확히 X 가 된다(7+5=12, 17−5=12) */
.mnav-btn path{transform-box:fill-box;transform-origin:center;transition:transform .22s,opacity .18s}
.mnav[open] .mn-1{transform:translateY(5px) rotate(45deg)}
.mnav[open] .mn-2{opacity:0}
.mnav[open] .mn-3{transform:translateY(-5px) rotate(-45deg)}
.mnav-pop{position:absolute;left:0;right:0;top:100%;z-index:40;
  max-height:72vh;max-height:72dvh;overflow-y:auto;overscroll-behavior:contain;   /* 앞줄은 dvh 미지원 폴백 */
  padding:10px 12px calc(14px + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line);
  box-shadow:0 22px 40px -20px rgba(0,0,0,.5)}
.mnav-pop nav{display:flex;flex-direction:column;gap:2px}
.mnav-pop a{display:flex;flex-direction:column;gap:2px;padding:13px 14px;border-radius:12px;color:var(--fg)}
.mnav-pop a:active{background:var(--card)}
.mnav-pop a.on{background:var(--card);box-shadow:inset 3px 0 0 var(--acc)}
.mnav-pop b{font-size:16px;font-weight:600}
.mnav-pop small{font-size:12.5px;color:var(--mut);line-height:1.5}
.mnav-h{margin:14px 14px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--mut)}
@media(prefers-reduced-motion:reduce){.mnav-btn path,.gnb-caret{transition:none}}

@media(max-width:860px){
  :root{--hdr-h:62px}
  header.site{padding:12px 16px;gap:10px}
  .brand .wordmark{font-size:22px}
  .brand-mark{width:29px;height:29px}
  .brand .tagline{display:none}
  .gnb{display:none}
  /* 오른쪽으로 미는 auto 여백은 .gnb 가 갖고 있었다 — 그게 사라지면 로고 바로 옆에 붙는다 */
  .gnb-side{margin-left:auto}
  .mnav{display:block}
  .theme-toggle{width:38px;height:38px}
}

/* 푸터 — 안내 링크는 상단 「도움말」로 옮겼다. 여기는 정체성과 최소 통로만. */
footer.site{display:block;border-top:1px solid var(--line);margin-top:96px;padding:44px 24px 40px;
  font-size:14px;color:var(--mut)}
.foot-brand .brand-sm{pointer-events:auto}
.brand-sm .wordmark{font-size:23px}
.brand-sm .brand-mark{width:30px;height:30px}
.foot-tag{margin-top:12px;font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:var(--fg);background:linear-gradient(100deg,var(--fg) 35%,var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.foot-sub{margin-top:6px;font-size:13px;color:var(--mut)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 10px;margin:26px 0 0}
.foot-nav a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  color:var(--mut);font-size:13.5px;transition:color .15s,border-color .15s}
.foot-nav a:hover{color:var(--fg);border-color:var(--acc)}
/* 하단 바 — 왼쪽 법적 표시, 오른쪽 법적 링크 */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.foot-copy{font-size:12.5px;font-variant-numeric:tabular-nums}
.foot-legal-nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px}
.foot-legal-nav a{color:var(--mut)}
.foot-legal-nav a:hover{color:var(--fg)}
/* 사이트 저작권과 폰트 저작권이 다르다는 고지 — 카탈로그 정체성이라 흐리게 두지 않는다 */
/* max-width 를 ch 로 잡았더니 한글에서 너무 좁았다 — ch 는 숫자 0 의 폭이라
   전각 한글을 절반으로 오산한다. 한 문장이라 폭 제한 대신 pretty 로 외톨이 줄만 막는다. */
.foot-ofl{margin-top:12px;font-size:12px;line-height:1.6;text-wrap:pretty}
.foot-ofl a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.foot-ofl a:hover{color:var(--acc)}
@media(max-width:640px){footer.site{padding:34px 16px 32px;margin-top:64px}.foot-tag{font-size:17px}}

main{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* 헤더·푸터가 모바일에서 16px 인데 본문만 24px 이라 좌우 기준선이 어긋나 있었다.
   맞추면서 좁은 화면의 폼·표에 16px 이 더 생긴다. */
@media(max-width:640px){main{padding:0 16px}}

/* hero */
.hero{position:relative;padding:5vh 0 8vh;overflow:hidden}
.hero-copy{position:relative;z-index:1;max-width:560px}
.hero .kicker{display:inline-block;font-size:13px;letter-spacing:.05em;color:var(--acc);border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin-bottom:26px}
.hero h1{font-family:var(--display);font-size:clamp(36px,6vw,68px);line-height:1.08;letter-spacing:-.035em;font-weight:700}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero p{margin-top:22px;font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.75;color:var(--mut);max-width:56ch}
.hero .cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;font-size:14px;color:var(--mut)}
.hero-stats span{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;padding:0 18px;border-left:1px solid var(--line)}
.hero-stats span:first-child{padding-left:0;border-left:0}
.hero-stats strong{color:var(--fg);font-weight:700;font-size:16px}
/* 신뢰 줄: 라이브 점 + 무중단 가동 + 갱신 스케줄 */
.hero-trust{margin-top:14px;font-size:10.5px;color:var(--mut);line-height:1.6}
.hero-trust strong{color:var(--fg);font-weight:700}
.hero-trust .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;vertical-align:middle;margin-right:6px;animation:pulse-dot 2s ease-out infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
@media(prefers-reduced-motion:reduce){.hero-trust .dot{animation:none}}
/* 실시간 상태바 */
.status-bar{margin-top:16px;padding-left:7px;display:flex;flex-wrap:wrap;gap:9px 18px;font-size:13px;color:var(--mut)}
.status-bar .stat{display:inline-flex;align-items:center;gap:7px}
.status-bar strong{color:var(--fg);font-weight:700}
.stat-btn{font:inherit;font-size:13px;color:var(--mut);background:none;border:0;padding:0;cursor:pointer;border-radius:6px}
.stat-btn:hover{color:var(--fg)}
.stat-caret{font-size:9px;opacity:.55;margin-left:-3px}
.live{width:9px;height:9px;border-radius:50%;flex:none}
.live.ok{background:#22c55e;animation:pulse-ok 2s ease-out infinite}       /* 정상 */
.live.busy{background:#f5b301;animation:pulse-busy 1s ease-out infinite}   /* 작업중 */
.live.down{background:#ef4444;animation:blink-down .9s steps(2,start) infinite}  /* 중단 */
@keyframes pulse-ok{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
@keyframes pulse-busy{0%{box-shadow:0 0 0 0 rgba(245,179,1,.6)}100%{box-shadow:0 0 0 5px rgba(245,179,1,0)}}
@keyframes blink-down{50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.live{animation:none!important}}
/* 자동 수집 일정 팝업 */
.sched{position:fixed;inset:0;margin:auto;border:1px solid var(--line);border-radius:18px;padding:0;
  max-width:380px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;
  background:var(--bg);color:var(--fg);box-shadow:0 24px 70px rgba(0,0,0,.32);
  opacity:0;transform:translateY(12px) scale(.96);
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.9,.3,1), overlay .24s ease allow-discrete, display .24s ease allow-discrete}
.sched[open]{opacity:1;transform:none}
@starting-style{.sched[open]{opacity:0;transform:translateY(12px) scale(.96)}}
.sched::backdrop{background:rgba(10,12,18,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .24s ease, overlay .24s ease allow-discrete, display .24s ease allow-discrete}
.sched[open]::backdrop{opacity:1}
@starting-style{.sched[open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){.sched{transition:none;transform:none}.sched::backdrop{transition:none}}
@media(max-width:480px){.sched{border-radius:16px}.sched-head{padding:18px 18px 0}.timeline,.sched-desc,.sched-last{padding-left:18px;padding-right:18px}}
.sched-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 0}
.sched-head h3{font-size:18px;letter-spacing:-.01em}
.sched-x{background:none;border:0;color:var(--mut);font-size:16px;cursor:pointer;line-height:1;padding:4px}
.sched-x:hover{color:var(--fg)}
.sched-desc{padding:8px 22px 4px;font-size:13.5px;color:var(--mut);line-height:1.6}
.sched-desc strong{color:var(--acc)}
.timeline{list-style:none;margin:14px 0 6px;padding:0 22px}
.timeline li{position:relative;display:flex;align-items:center;gap:12px;padding:11px 0 11px 24px}
.timeline li::before{content:"";position:absolute;left:4px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--line);transform:translateY(-50%)}
.timeline li::after{content:"";position:absolute;left:8px;top:50%;bottom:-11px;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li.next::before{background:var(--acc);box-shadow:0 0 0 4px var(--acc-weak,rgba(91,75,255,.16))}
.timeline .tl-date{font-size:14px;color:var(--fg);font-weight:400}
.timeline .tl-dow{color:var(--mut);font-weight:400;margin-left:3px}
.timeline .tl-time{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.timeline .tl-tag{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:var(--acc);border-radius:999px;padding:2px 9px}
.timeline li.next .tl-date{font-weight:700}
.sched-last{padding:6px 22px 20px;font-size:12px;color:var(--mut)}
/* 오른쪽 타이핑 쇼케이스 — 폰트를 돌아가며 문구를 타이핑/삭제 */
.hero-bg{position:absolute;inset:0 0 0 56%;z-index:0;overflow:hidden;pointer-events:none;color:var(--fg);
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.typer{font-size:clamp(36px,4.6vw,62px);line-height:1.25;letter-spacing:-.02em;word-break:keep-all;min-height:1.25em}
.typer .caret{color:var(--acc);font-weight:400;animation:blink 1.1s step-end infinite;margin-left:1px}
.typer-cap{font-size:13px;color:var(--mut)}
@media(prefers-reduced-motion:reduce){.typer .caret{animation:none}}
/* 모바일: 텍스트가 전체 폭 → 장식 숨겨 가독성 우선 */
@media(max-width:820px){.hero-bg{display:none}.hero-copy{max-width:none}}
.btn{display:inline-block;padding:12px 22px;border-radius:12px;font-weight:600;font-size:15px;border:1px solid var(--line)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:hover{border-color:var(--acc)}

/* big specimen strip on home — 한 줄로 흐른다.
   멈춰 있으면 폰트가 12종이라는 게 안 읽힌다(한 폰트로 쓴 문장처럼 보인다).
   이음매 없이 돌리려면 마크업이 같은 목록을 정확히 두 벌 넣어야 한다(-50%). */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.strip-track{display:flex;width:max-content;animation:strip-run 46s linear infinite}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
/* 한 벌의 끝여백을 padding-right 로 갖는다 — 트랙에 gap 을 주면 -50% 가 그 절반만큼 어긋난다 */
.strip .row{display:flex;flex-wrap:nowrap;align-items:baseline;gap:0 34px;padding-right:34px;
  font-size:clamp(28px,5vw,52px);letter-spacing:-.02em;line-height:1.3}
.strip .row a{color:var(--fg);opacity:.8;white-space:nowrap;transition:opacity .15s,color .15s}
.strip .row a:hover,.strip .row a:focus-visible{opacity:1;color:var(--acc)}
@keyframes strip-run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .strip-track{animation:none;width:auto}
  .strip .row{flex-wrap:wrap;gap:8px 28px;padding-right:0}
  .strip .row[aria-hidden=true]{display:none}   /* 정지 상태에선 두 번째 벌이 중복이다 */
}

/* section head — 제목 글씨 하나가 아니라 구획의 머리로 읽히게.
   악센트 막대 + 밑줄이 위아래를 끊고, 곁들인 <span> 은 둘째 줄 부제로 내려간다.
   마크업은 안 건드린다 — 8개 페이지가 <h2>[+span|+a] 세 모양만 쓴다. */
.sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;
  margin:64px 0 20px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.sec-head::before{content:"";flex:none;width:4px;height:26px;border-radius:2px;background:var(--acc);
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 30%,transparent))}  /* 앞줄은 color-mix 미지원 대비 */
.sec-head h2{font-family:var(--display);font-size:27px;letter-spacing:-.025em;font-weight:700;line-height:1.25}
.sec-head a{margin-left:auto;font-size:14px;color:var(--mut);white-space:nowrap}
.sec-head a:hover{color:var(--acc)}
.sec-head>span{flex:1 0 100%;margin-left:18px;font-size:13.5px;line-height:1.5}  /* 막대4+간격14 만큼 들여 제목에 맞춘다 */

/* 내용을 담는 판 — 카드(.side-card·.faq-item)와 같은 표면을 쓴다 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.home-chips{display:flex;gap:8px;flex-wrap:wrap}

/* font grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.fcard{position:relative;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card);display:block;transition:border-color .15s,transform .15s}
.fcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.fc-link{position:absolute;inset:0;border-radius:16px;z-index:1}
.fc-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fcard .sample{font-size:var(--sample-size,38px);line-height:1.25;letter-spacing:-.02em;min-height:1.5em;overflow:hidden}
.fcard .meta{position:relative;z-index:2;margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;pointer-events:none}
.fcard .fname{font-weight:700;font-size:16px}
.fcard .tag{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
/* like button */
.fc-views{font-size:13px;color:var(--mut);display:inline-flex;align-items:center;gap:5px}
.i-eye{opacity:.85;flex:none}
.i-dl{opacity:.85;flex:none}
/* 카드 스탯 줄 — 이름/카테고리 아래, 구분선 긋고 가운데 정렬 */
.fcard .stats{position:relative;z-index:2;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;pointer-events:none}
.fc-like{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--mut);cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s}
.fc-like:hover{border-color:var(--acc)}
.fc-like .heart{font-size:14px;line-height:1;transition:transform .18s}
.fc-like[aria-pressed=true]{color:var(--like);border-color:var(--like)}
.fc-like[aria-pressed=true] .heart{transform:scale(1.15)}
.fc-like.pulse .heart{animation:heartpop .32s}
@keyframes heartpop{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1.15)}}

/* sort control */
.sortbar{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.sortbar select{font-family:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer}

/* View Transitions: 페이지 전환(부드러운 크로스페이드) + 정렬 리오더 */
@view-transition{navigation:auto}
@keyframes vt-fade-in{from{opacity:0}to{opacity:1}}
@keyframes vt-fade-out{from{opacity:1}to{opacity:0}}
::view-transition-old(root){animation:vt-fade-out .26s ease both}
::view-transition-new(root){animation:vt-fade-in .38s ease both}
@media(prefers-reduced-motion:reduce){
  .fcard,.fc-like .heart{transition:none}
  ::view-transition-group(*){animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* 크로스도큐먼트 VT 미지원: 새 페이지 fade-in만이라도 — 하드컷 완화. 헤더/푸터는 <main> 밖이라 안 깜빡임.
   @supports (view-transition-name) 로 재면 안 된다 — 그건 같은 문서 전환용 속성이고,
   그것만 지원하는 브라우저(파이어폭스 144+)에서 네이티브도 폴백도 안 걸려 전환이 사라진다.
   판정은 head 스크립트가 html[data-vtfb] 로 심어준다. */
@media not (prefers-reduced-motion:reduce){
  html[data-vtfb] main{animation:vt-fade-in .28s ease both}
}

/* filter bar */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 28px;
  position:sticky;top:var(--hdr-h);z-index:15;padding:10px 0;background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .15s,box-shadow .15s}
.filters.stuck{border-bottom-color:var(--line);box-shadow:0 6px 16px -12px rgba(0,0,0,.5)}
/* 카테고리 칩 — 개수가 늘어도 한 줄, 넘치면 가로 스크롤 */
.filters .chiprow{flex:1 0 100%;display:flex;align-items:center;gap:2px;min-width:0}
.chips{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scroll-behavior:smooth;
  padding:2px 2px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:0 0 auto}
.chip-nav{flex:0 0 auto;width:26px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--mut);
  font-size:17px;line-height:1;cursor:pointer;padding:0}
.chip-nav:hover{color:var(--fg)}
.chip-nav[hidden]{display:none}
@media(hover:none){ .chip-nav{display:none} }   /* 터치는 그냥 밀면 된다 */

/* 보기/크기/정렬은 칩 개수에 따라 밀려 내려가지 말고 항상 칩 아래 한 줄로 */
.filters .ctlbar{flex:1 0 100%;display:flex;align-items:center;gap:10px}
.ctlbar .size-ctl{flex:0 0 auto;padding:0 12px;height:30px;border-radius:9px;gap:8px}
.ctlbar .size-ctl input[type=range]{width:84px}
.ctlbar .size-ctl output{font-size:11.5px;min-width:3.6em}
.ctlbar .size-ctl .sz-a{font-size:11px}
.ctlbar .size-ctl .sz-b{font-size:17px}
.ctlbar .sortbar{flex:0 0 auto;margin-left:auto}
.ctlbar .viewbar{flex:0 0 auto}
/* 좁은 화면: 고정 바가 화면을 다 먹지 않게 덜 쓰는 것부터 접는다.
   가로 스크롤은 안 쓴다 — 그 안에 입력창이 있으면 타이핑이 불편하다. */
@media(max-width:860px){ .ctlbar .size-ctl{display:none} }
@media(max-width:640px){ .browse-tools{grid-template-columns:1fr} }
.chip{display:inline-block;font-size:14px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;background:none;text-decoration:none}
.chip.on,.chip:hover{color:var(--fg);border-color:var(--acc)}
/* 실측 두께 태그 — 카테고리(형태 분류)와 다른 축이라 구분해 보여준다 */
.chip.ink{border-style:dashed}
.chip.ink::before{content:"◑ ";opacity:.55}

/* page head */
.page-head{padding:8vh 0 2vh}
.page-head h1{font-family:var(--display);font-size:clamp(32px,6vw,56px);letter-spacing:-.03em;font-weight:700;line-height:1.1}
.page-head p{margin-top:14px;color:var(--mut);font-size:18px;max-width:56ch}

/* font detail */
.detail-hero{padding:6vh 0 3vh;border-bottom:1px solid var(--line)}
.detail-hero .big{font-family:var(--display);font-size:clamp(44px,10vw,104px);line-height:1.15;letter-spacing:-.03em;word-break:keep-all}
.detail-hero .sub{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{font-size:13px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.weights{margin:48px 0;display:grid;gap:14px}
.weights .w{border-bottom:1px solid var(--line);padding-bottom:14px;font-size:30px;letter-spacing:-.02em}
.weights .w small{display:block;font-size:12px;color:var(--mut);letter-spacing:0;margin-bottom:4px}

/* --- type tester (font detail) --- */
.tester{padding:5vh 0 2vh;border-bottom:1px solid var(--line)}
.tester-preview{font-size:72px;line-height:1.2;letter-spacing:-.02em;word-break:keep-all;outline:none;min-height:1.2em;caret-color:var(--acc);cursor:text}
.tester-preview:empty:before{content:attr(data-ph);color:var(--mut);opacity:.5}
.tester-preview:focus{box-shadow:0 2px 0 var(--acc)}
.tester-controls{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;position:sticky;top:0;background:var(--bg);padding:14px 0;z-index:5}
.tester-controls .ctl{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.tester-controls .ctl output{color:var(--fg);font-variant-numeric:tabular-nums;min-width:3.5em;font-size:13px}
.tester-controls input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:3px;border-radius:3px;background:var(--line);outline:none}
.tester-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.tester-controls input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:none;border:0;border-left:1px solid var(--line);padding:6px 12px;font-size:13px;color:var(--mut);cursor:pointer;font-variant-numeric:tabular-nums}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--acc);color:#fff}

/* --- browse tools: search + specimen override --- */
.browse-tools{margin:0 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.browse-tools input{width:100%;font-size:16px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);outline:none;font-family:inherit}
.browse-tools input:focus{border-color:var(--acc)}
.browse-tools input[type=search]::-webkit-search-cancel-button{cursor:pointer}

/* --- tester preset chips --- */
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.presets button{font-size:13px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;background:none;font-family:inherit}
.presets button:hover{color:var(--fg);border-color:var(--acc)}

/* code block */
pre.code{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.7}
pre.code .c{color:var(--acc)}
/* 임베드 페이지 */
.embed-feats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px}
.embed-feats span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.embed-feats span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
.codeblock{margin:0 0 18px}
.cb-head{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;padding:9px 16px;font-size:12.5px;color:var(--mut)}
.cb-head b{color:var(--fg);font-weight:600;font-size:13px}
.cb-copy{font:inherit;font-size:12.5px;color:var(--acc);background:none;border:1px solid var(--line);border-radius:8px;padding:5px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.cb-copy:hover{border-color:var(--acc)}
.cb-copy.done{background:var(--acc);color:#fff;border-color:var(--acc)}
.codeblock pre.code{margin:0;border-radius:0 0 14px 14px}
/* 3열 카드 그리드 — embed·guide·install 공용. 이름이 embed-why 였는데
   다른 페이지에서 쓰면서 컨테이너 클래스를 임의로 바꿔 쓰는 사고가 났다. */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 8px}
.why-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.tool-desc{font-size:13.5px;color:var(--mut);line-height:1.6}   /* /tools 카드 설명 */
.why-card .ic{font-size:22px;margin-bottom:10px}
.why-card h3{font-size:15px;margin-bottom:6px}
.why-card p{font-size:13.5px;color:var(--mut);line-height:1.6}
@media(max-width:720px){.cardgrid{grid-template-columns:1fr}}

.lead{font-size:16px;color:var(--mut);line-height:1.7;max-width:52em;margin-top:10px}
.notice{border:1px dashed var(--line);border-radius:14px;padding:16px 20px;color:var(--mut);font-size:14px;margin:24px 0}

/* 설명용 데이터 표 — /grade 채점표, /license 허용범위. 셀이 전부 글이라 좁으면 알아서 줄바꿈된다 */
.dtbl{width:100%;border-collapse:collapse;font-size:14px;margin:2px 0 8px;text-align:left}
.dtbl th{font-size:12.5px;font-weight:700;color:var(--mut);padding:10px 14px;border-bottom:1px solid var(--line)}
.dtbl td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--mut);line-height:1.65;vertical-align:top}
.dtbl tbody tr:last-child td{border-bottom:0}
.dtbl tbody tr:hover{background:var(--card)}
.dtbl td b{color:var(--fg)}
.dtbl td small{display:block;font-size:11.5px;opacity:.65}
.dtbl td code{font-size:12.5px;color:var(--fg);white-space:nowrap}
.dtbl .num{text-align:right;white-space:nowrap}
.dtbl td .bs-grade{white-space:nowrap}
@media(max-width:640px){.dtbl{font-size:13px}.dtbl th,.dtbl td{padding:10px 8px}}

/* 판정 예시 카드에 붙는 실제 감점 사유 */
.g-notes{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut);line-height:1.5}

/* 지금 임베드 중 — 외부 사이트가 링크한 폰트 랭킹 */
.embed-live{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:4px 6px;margin-bottom:44px}
.el-row{display:grid;grid-template-columns:minmax(110px,1.1fr) 3fr minmax(96px,auto);align-items:center;gap:16px;padding:12px 14px;border-radius:11px;color:var(--fg);transition:background .15s}
.el-row+.el-row{box-shadow:0 -1px 0 var(--line)}   /* 행 구분선 — border 면 hover 배경이 잘려 보인다 */
.el-row:hover{background:var(--bg)}
.el-name{font-size:19px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-track{height:8px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.el-fill{display:block;height:100%;border-radius:999px;background:var(--acc);
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 40%,transparent),var(--acc))}
.el-n{font-size:13px;color:var(--mut);text-align:right;line-height:1.35}
.el-n b{color:var(--fg);font-size:15px}
.el-n small{display:block;font-size:11.5px;opacity:.8}
@media(max-width:640px){.el-row{grid-template-columns:1fr auto;gap:6px 12px}.el-track{grid-column:1/-1;order:3}}
.i-link{opacity:.85;flex:none}
.fc-views.hot{color:var(--acc)}   /* 외부 임베드 수 — 가장 중요한 지표라 강조 */

/* 미리보기 편집 힌트 말풍선 — 클릭해서 입력할 수 있다는 걸 아무도 몰라서 */
.tester-tip{display:inline-block;position:relative;margin-bottom:14px;background:var(--acc);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1;padding:9px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(91,75,255,.28);animation:tip-bob 2.4s ease-in-out infinite}
.tester-tip::after{content:"";position:absolute;top:100%;left:22px;border:6px solid transparent;border-top-color:var(--acc);border-bottom:0}
@keyframes tip-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.tester-tip{animation:none}}

/* 폰트 스펙 — 한글 커버리지·웹폰트 무게 */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px}
.spec-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.spec-item.warn{border-color:var(--warn-line)}
.spec-k{font-size:13px;color:var(--mut);font-weight:600;margin-bottom:8px}
.spec-item.warn .spec-k{color:var(--warn)}
.spec-item.warn .spec-k::before{content:"⚠ "}
.spec-v{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.spec-v small{font-size:12.5px;font-weight:400;color:var(--mut);margin-left:7px;letter-spacing:0}
.spec-bar{height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin:12px 0 10px}
.spec-bar span{display:block;height:100%;border-radius:999px;background:var(--acc)}
.spec-item.warn .spec-bar span{background:var(--warn-line)}
.spec-d{font-size:12.5px;color:var(--mut);line-height:1.6;margin:0}
@media(max-width:760px){.spec{grid-template-columns:1fr}}
.fcard .tag.warn{color:var(--warn);border-color:var(--warn-line)}
/* 두부 경고 — 이 폰트에 없는 글자 실시간 안내 */
.tofu-warn{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:rgba(224,162,62,.12);border:1px solid var(--warn-line);color:var(--warn);font-family:var(--sans);font-size:13px;line-height:1.6}

/* 폰트 비교 */
.cmp-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:16px 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.cmp-tools .ctl{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.cmp-tools .ctl output{color:var(--fg);font-variant-numeric:tabular-nums;min-width:3.5em;font-size:13px}
.cmp-tools select{font:inherit;font-size:13px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.cmp-tools .btn{margin-left:auto}
.cmp{display:grid;gap:16px;margin-bottom:48px}
.cmp-col{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.cmp-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px}
.cmp-head a{color:var(--fg);min-width:0}
.cmp-head b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-head small{color:var(--mut);font-size:12px}
.cmp-x{margin-left:auto;flex:none;color:var(--mut);font-size:13px;padding:2px 6px;border-radius:6px}
.cmp-x:hover{color:var(--like);background:var(--bg)}
.cmp-sample{font-size:46px;line-height:1.25;letter-spacing:-.02em;word-break:keep-all;outline:none;caret-color:var(--acc);cursor:text;min-height:2.5em;margin-bottom:16px}
.cmp-sample:focus{box-shadow:0 2px 0 var(--acc)}
.cmp-spec{margin:0 0 16px;font-size:13px}
.cmp-spec>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.cmp-spec dt{color:var(--mut)}
.cmp-spec dd{margin:0;text-align:right;font-weight:600}
.cmp-spec dd small{font-weight:400;color:var(--mut);margin-left:4px}
.cmp-spec .warn dd{color:var(--warn)}
.cmp-go{margin-top:auto;text-align:center}
.cmp-empty{text-align:center;padding:60px 0 80px;color:var(--mut)}
.cmp-empty p{font-size:16px;margin-bottom:18px}
@media(max-width:820px){.cmp{grid-template-columns:1fr 1fr!important}}
@media(max-width:520px){.cmp{grid-template-columns:1fr!important}.cmp-tools .btn{margin-left:0}}
/* 카드 비교 담기 + 하단 비교 바 */
.fc-cmp{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 8px;font-size:12px;color:var(--mut);cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .15s,border-color .15s}
.fcard:hover .fc-cmp,.fc-cmp:focus-within,.fc-cmp:has(input:checked){opacity:1}
.fc-cmp:has(input:checked){border-color:var(--acc);color:var(--acc)}
.fc-cmp input{width:14px;height:14px;margin:0;accent-color:var(--acc);cursor:pointer}
.cmp-wrap{position:sticky;bottom:16px;z-index:20;margin:24px 0 40px}
.cmp-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.cmp-n{font-size:13px;color:var(--mut);white-space:nowrap}
.cmp-n b{color:var(--fg);font-size:15px}
.cmp-n small{opacity:.7;margin-left:4px}
.cmp-list{flex:1;min-width:0;font-size:13px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-clear{background:none;border:0;color:var(--mut);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;padding:0}
.cmp-clear:hover{color:var(--fg)}
.cmp-bar .btn.disabled{opacity:.4;pointer-events:none}

/* 폰트 조합 */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:48px}
.pair{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.pair-demo{padding:26px 24px 22px;border-bottom:1px solid var(--line)}
.pair-h{font-size:clamp(26px,3.2vw,36px);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
.pair-b{font-size:14.5px;line-height:1.85;color:var(--fg);opacity:.86;margin:0;word-break:keep-all}
.pair-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 24px 18px}
.pair-f{display:flex;align-items:baseline;gap:8px;min-width:0}
.pair-role{flex:none;font-size:11px;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.pair-f a{color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair-f b{font-size:14px;font-weight:600}
.pair-f small{color:var(--mut);font-size:12px;margin-left:5px}
.pair-act{display:flex;align-items:center;gap:14px;margin-left:auto}
.pair-copy{background:none;border:1px solid var(--line);border-radius:8px;color:var(--mut);font:inherit;font-size:12.5px;padding:5px 12px;cursor:pointer;transition:border-color .15s,color .15s}
.pair-copy:hover{border-color:var(--acc);color:var(--fg)}
.pair-copy.done{border-color:var(--acc);color:var(--acc)}
.pair-cmp{font-size:12.5px;color:var(--mut);white-space:nowrap}
.pair-cmp:hover{color:var(--acc)}
@media(max-width:820px){.pairs{grid-template-columns:1fr}}

/* API 문서 표 */
.api-tbl{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:44px}
.api-tbl th,.api-tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.api-tbl th{color:var(--mut);font-weight:600;font-size:12.5px;white-space:nowrap}
.api-tbl td:first-child{white-space:nowrap}
.api-tbl code{font-size:12.5px}
.api-tbl tbody tr:last-child td{border-bottom:0}
.api-note{font-size:14px;line-height:1.8;color:var(--mut);max-width:760px;margin-bottom:44px}
@media(max-width:600px){.api-tbl{font-size:13px}.api-tbl th,.api-tbl td{padding:9px 8px}}

/* 견본 글자 크기 슬라이더 (목록 전체 일괄) */
.size-ctl{display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);white-space:nowrap}
.size-ctl .sz-a{font-size:13px;color:var(--mut);line-height:1}
.size-ctl .sz-b{font-size:21px;color:var(--mut);line-height:1}
.size-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:3px;border-radius:3px;background:var(--line);outline:none;padding:0;border:0;margin:0}
.size-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.size-ctl input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.size-ctl output{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:4.2em;text-align:right}
@media(max-width:760px){.size-ctl{justify-content:space-between;flex:1}.size-ctl input[type=range]{flex:1;width:auto;margin:0 4px}}

/* 글리프 브라우저 */
.glyphs{margin-bottom:44px}
.gl-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.gl-tabs button{font:inherit;font-family:var(--sans);font-size:14px;min-width:38px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--mut);cursor:pointer;transition:border-color .12s,color .12s}
.gl-tabs button:hover{border-color:var(--acc);color:var(--fg)}
.gl-tabs button.on{border-color:var(--acc);color:#fff;background:var(--acc)}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:4px;max-height:420px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.gl{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:24px;line-height:1;border-radius:7px;color:var(--fg);cursor:default;transition:background .12s}
.gl:hover{background:var(--bg)}
.gl.off{opacity:.16;position:relative}
.gl.off:hover{background:color-mix(in srgb,var(--warn-line) 16%,transparent)}
.gl-note{font-size:13px;margin:10px 0 0}
@media(max-width:600px){.gl-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));max-height:340px}.gl{font-size:20px}}

/* 트레이 임베드 코드 패널 */
.cmp-code{background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.cmp-code .cb-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.cmp-code .code{margin:0;padding:14px 16px;max-height:230px;overflow:auto;font-size:12.5px;line-height:1.7;white-space:pre;background:var(--bg)}
.cmp-code + .cmp-bar{border-radius:0 0 14px 14px}
.cmp-bar .btn{padding:7px 14px;font-size:13px}
.cmp-bar .btn.on{border-color:var(--acc);color:var(--acc)}

/* 폰트 상세 — OFL 용도별 허용 요약 */
.lic-uses{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;font-size:12.5px}
.lic-uses .lu{color:var(--mut);white-space:nowrap}
.lic-uses a{color:var(--mut);text-decoration:underline;text-underline-offset:2px;margin-left:2px}
.lic-uses a:hover{color:var(--acc)}

/* 보기 전환 버튼 */
.viewbar{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--card)}
.viewbar button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;border:0;border-radius:8px;background:none;color:var(--mut);cursor:pointer;transition:background .12s,color .12s}
.viewbar button:hover{color:var(--fg)}
.viewbar button.on{background:var(--acc);color:#fff}

/* 리스트 뷰 — 마크업 그대로, 레이아웃만 전환 */
.lspec{display:none}
.grid.list{grid-template-columns:1fr;gap:0}

/* 리스트 뷰 — 견본이 한 줄을 통째로 쓰고, 그 아래 정보 줄이 붙는다.
   자식 5개(fc-cmp·sample·meta·lspec·stats)를 2행 4열에 명시 배치한다.
   자동 배치에 맡기면 경고 배지 유무에 따라 칸이 밀린다. */
.grid.list .fcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  row-gap:6px;column-gap:14px;padding:16px;border-radius:0;border-width:0 0 1px 0;align-items:center}
.grid.list .fcard:first-child{border-top:1px solid var(--line)}
.grid.list .fc-link{border-radius:0}
.grid.list .fcard:hover{transform:none;background:color-mix(in srgb, var(--acc) 8%, var(--card))}

.grid.list .fc-cmp{grid-area:1/1/3/2;position:relative;z-index:3;opacity:1;background:none;border:0;padding:0;width:16px}
.grid.list .fc-cmp span{display:none}

.grid.list .sample{grid-area:1/2/2/5;font-size:calc(var(--sample-size,38px) * .8);min-height:0;line-height:1.35;
  white-space:nowrap;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,#000 88%,transparent 100%)}
.grid.list .sample br{display:none}                    /* 두 줄 견본 → 한 줄 */

.grid.list .meta{grid-area:2/2/3/3;margin-top:0;gap:5px 9px;min-width:0;align-items:baseline}
.grid.list .fname{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.grid.list .fmaker{font-size:12.5px}
.grid.list .fmaker::before{content:'·';margin-right:7px;opacity:.5}
.grid.list .tag{font-size:11.5px;padding:1px 8px}

.grid.list .lspec{grid-area:2/3/3/4;display:flex;gap:14px;font-size:12.5px;color:var(--mut);white-space:nowrap}
.grid.list .lspec b{color:var(--fg);font-weight:600}
.grid.list .stats{grid-area:2/4/3/5;margin-top:0;padding-top:0;border-top:0;justify-content:flex-end;gap:12px;white-space:nowrap}

@media(max-width:900px){ .grid.list .lspec{display:none} }
@media(max-width:560px){
  .grid.list .fcard{grid-template-columns:auto minmax(0,1fr) auto;padding:14px 12px}
  .grid.list .sample{grid-area:1/2/2/4;font-size:calc(var(--sample-size,38px) * .62)}
  .grid.list .meta{grid-area:2/2/3/3}
  .grid.list .stats{grid-area:2/3/3/4}
  .grid.list .fmaker{display:none}
}

/* 카드 제작자명 */
.fcard .fmaker{font-size:12px;color:var(--mut)}
.grid.list .fmaker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 맨 위로 */
.to-top{position:fixed;right:20px;bottom:20px;z-index:30;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--mut);cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.16);transition:color .15s,border-color .15s,transform .15s}
.to-top:hover{color:var(--acc);border-color:var(--acc);transform:translateY(-2px)}
.to-top[hidden]{display:none}
/* 비교 바가 떠 있으면 그 위로 비켜선다 — 바가 하단 sticky 라 겹친다 */
body:has(#cmpwrap:not([hidden])) .to-top{bottom:92px}
@media(max-width:560px){.to-top{right:14px;bottom:14px;width:40px;height:40px}
  body:has(#cmpwrap:not([hidden])) .to-top{bottom:104px}}

/* 「본문으로 쓰면」 — 실제 읽기 환경(작은 크기·제한된 행 길이·여러 문단).
   타입테스터 안 토글이었을 땐 아무도 안 눌렀다. 스크롤만 하면 나오는 자리로 올렸다. */
.bodyspec{padding:4vh 0 2vh;border-bottom:1px solid var(--line)}
.bs-head{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-bottom:22px}
.bs-head h2{font-size:20px;margin:0}
/* 가독성 등급 배지 — A/B/C 는 본문 갈래에만, 제목용은 등급 없이 역할만 */
.bs-grade{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mut);cursor:help}
.bs-grade b{font-size:13px;line-height:1}
.bs-grade.g-a{background:color-mix(in srgb,var(--good) 14%,transparent);border-color:color-mix(in srgb,var(--good) 45%,transparent);color:var(--good)}
.bs-grade.g-b{background:rgba(91,75,255,.10);border-color:rgba(91,75,255,.35);color:var(--acc)}
.bs-grade.g-c{background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn)}
.bs-ctl{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-left:auto}
.bs-ctl .ctl{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.bs-ctl .ctl output{color:var(--fg);font-variant-numeric:tabular-nums;min-width:3.5em;font-size:13px}
.bs-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:3px;border-radius:3px;background:var(--line);outline:none}
.bs-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.bs-ctl input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.bs-body{font-size:16px;line-height:1.8;max-width:42em;word-break:keep-all;outline:none;caret-color:var(--acc);cursor:text}
.bs-body p{margin:0 0 1.1em}
.bs-body p:last-child{margin-bottom:0}
.bs-body:focus{box-shadow:-14px 0 0 -13px var(--acc)}
.bs-tip{font-size:12.5px;color:var(--mut);margin:18px 0 0}
@media(max-width:640px){
  .bs-ctl{margin-left:0;width:100%}
  .bs-ctl input[type=range]{width:88px}
}

/* 블로그 붙여넣기 카드의 실제 미리보기 — 스니펫과 같은 모습이어야 신뢰가 간다 */
.embed-demo{margin:14px 0 4px}

/* 다운로드 버튼 아래 안내 — woff2 는 설치용이 아니라는 사실을 누르기 전에 알린다 */
.dl-note{font-size:13px;line-height:1.65;margin:10px 0 0;color:var(--mut)}
.dl-note b{color:var(--fg)}
.dl-note a{color:var(--acc)}

/* 건너뛰기 링크 — 포커스 전에는 화면 밖, 탭이 닿으면 나타난다.
   display:none 이면 포커스를 못 받으므로 위치로 숨긴다. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--acc);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-size:14px;font-weight:600}
.skip:focus{left:0}
main:focus{outline:none}

/* 푸터 안내 링크 — 내비게이션을 늘리지 않으면서 전 페이지에서 닿게 */

/* 스크롤바 통일 — 브라우저·OS 마다 두께와 색이 제각각이라 같은 화면이 다르게 보인다.
   두 벌을 같이 쓴다: 표준(scrollbar-width/color, 파이어폭스·크롬 121+)과
   구형 WebKit 용 ::-webkit-scrollbar. 둘 중 하나만 쓰면 반쪽만 적용된다.
   색은 rgba 회색 — 라이트·다크 어느 쪽에서도 읽히게(테마 변수를 쓰면 한쪽에서 묻힌다).
   .chips 는 일부러 스크롤바를 감추므로(가로 칩 줄) 여기서 제외한다. */
.gl-grid, pre.code, .cmp-code .code, .sched, .bs-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.45) transparent;
}
.gl-grid::-webkit-scrollbar,
pre.code::-webkit-scrollbar,
.cmp-code .code::-webkit-scrollbar,
.sched::-webkit-scrollbar{width:10px;height:10px}
.gl-grid::-webkit-scrollbar-track,
pre.code::-webkit-scrollbar-track,
.cmp-code .code::-webkit-scrollbar-track,
.sched::-webkit-scrollbar-track{background:transparent}
.gl-grid::-webkit-scrollbar-thumb,
pre.code::-webkit-scrollbar-thumb,
.cmp-code .code::-webkit-scrollbar-thumb,
.sched::-webkit-scrollbar-thumb{
  background:rgba(128,128,128,.45);
  border-radius:999px;
  border:2px solid transparent;      /* 안쪽 여백 — 트랙에 딱 붙지 않게 */
  background-clip:content-box;
}
.gl-grid::-webkit-scrollbar-thumb:hover,
pre.code::-webkit-scrollbar-thumb:hover,
.cmp-code .code::-webkit-scrollbar-thumb:hover,
.sched::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.7);background-clip:content-box}
/* 스크롤바가 나타났다 사라질 때 내용이 밀리지 않게 */
.gl-grid{scrollbar-gutter:stable}

/* 폰트 제출 탭 — 파일 업로드 / URL. 폼은 하나고 fieldset 두 개를 뒤집는다.
   fieldset 은 기본 테두리·여백이 있어 지워야 하고, 폼의 flex 간격을 안에서도 이어준다. */
.submit-form fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:16px}
.submit-form fieldset[hidden]{display:none}
.subtabs{margin-bottom:14px}
.subtabs button{padding:9px 18px;font-size:14px}
.submit-form .hint code{font-size:12px;color:var(--fg)}
/* 관리자 폰트 아카이브 — 조직 추가 줄 */
.arch-add{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.arch-add input{flex:1;min-width:0;font:inherit;font-size:14px;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.arch-add input:focus{outline:none;border-color:var(--acc)}

/* 폰트 찾기(/ask) — 조건 칩 · 질문 목록 */
.ask-kicker{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--acc);margin-bottom:6px}
.ask-rules{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.ask-form textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;resize:vertical;line-height:1.6;width:100%;min-width:0}
.ask-form textarea:focus{outline:none;border-color:var(--acc)}
.ask-list{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:4px 6px;margin-bottom:44px}
.ask-row{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:11px;color:var(--fg);transition:background .15s}
.ask-row+.ask-row{box-shadow:0 -1px 0 var(--line)}
.ask-row:hover{background:var(--bg)}
.ask-q{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-n{flex:none;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}

/* 한글 밖 커버리지 — 0인 축은 렌더에서 빠지므로 개수가 폰트마다 다르다 */
.cover-row{display:flex;flex-wrap:wrap;gap:10px}
.cover-item{display:inline-flex;align-items:baseline;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:13px;color:var(--mut)}
.cover-item b{font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}

/* 폰트 상세 저작권 줄 — 규칙이 없어 그냥 문단으로 나오던 것(체커가 잡고 있었다) */
.copyright{margin-top:10px;font-size:12.5px;line-height:1.7}
.copyright a.lic-full{display:inline-flex;align-items:center;gap:3px;color:var(--acc);
  text-decoration:underline;text-underline-offset:2px}
.copyright a.lic-full:hover{color:var(--fg)}
.copyright .lic-none{color:var(--warn);border-bottom:1px dotted currentColor;cursor:help}
/* 폰트 안 라이선스 표기 원문 — 근거를 말로만 하지 않고 펼쳐 보이는 자리.
   길어서(카페24 5,455자) 접어 두지만 기본 닫힘일 뿐 숨긴 게 아니다. */
.lic-meta{margin-top:8px;border:1px solid var(--warn-line);border-radius:10px;
  background:var(--card);font-size:12.5px;max-width:62em}
.lic-meta>summary{padding:9px 12px;cursor:pointer;color:var(--warn);font-weight:600;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lic-meta>summary::marker{color:var(--warn)}
.lic-meta .lm-n{color:var(--mut);font-weight:400;font-size:11.5px}
.lic-meta>p{margin:0;padding:0 12px 12px;color:var(--mut);line-height:1.85;
  border-top:1px solid var(--warn-line);padding-top:11px}
.lic-meta .lm-src{border-top:0;padding-top:0;font-size:11.5px;opacity:.85}
.lic-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
/* 라이선스 근거가 메타데이터인 폰트 — 저작권 줄의 .lic-none 과 **줄 전체를** 같은 색으로 묶는다.
   배지만 다른 색이면 "OFL 인데 왜 저기만 노란색이지"로 읽힌다. 근거의 종류가 다를 뿐이라는 걸
   한 색으로 보여준다. */
.lic-uses.meta .lu{color:var(--warn)}
.lic-uses.meta a{color:var(--warn)}
.lic-uses.meta a:hover{color:var(--fg)}
/* 다운로드가 제한된 폰트 — 버튼 자리에 이유를 적는다(그냥 없애면 "왜 이것만 없지"가 된다) */
.dl-blocked{border:1px dashed var(--warn);border-radius:14px;padding:15px 18px;margin:0;
  color:var(--warn);font-size:13.5px;line-height:1.7;max-width:62em}
.dl-blocked b{color:var(--warn)}
.dl-blocked span{display:block;margin-top:6px;color:var(--mut);font-size:12.5px}
.dl-blocked span b{color:var(--fg)}

/* 본문 견본이 남의 글로 덮여 있을 때만 뜨는 되돌리기 — 기본값이 「그 폰트의 설명」이라
   덮인 줄 모르면 다른 폰트 설명을 읽고 있게 된다 */
.bs-reset{margin-left:8px;padding:2px 8px;font:inherit;font-size:12px;color:var(--acc);
  background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.bs-reset:hover{border-color:var(--acc)}

/* 등급 배지 옆 감점 사유 — 판정만 보이고 근거를 감추지 않는다.
   제목 줄에 끼어들지 않게 한 줄을 통째로 차지하고, 조판 컨트롤보다 앞에 온다. */
.bs-head .bs-why{flex-basis:100%;margin:-2px 0 2px}
.bs-head .bs-why span{color:var(--mut)}

/* 어디에 쓰면 좋은가 — 판정 셋(좋음·조건부·권하지 않음)을 왼쪽 색 띠로만 구분한다.
   배지를 세 색으로 칠하면 등급 배지(A/B/C)와 헷갈린다 — 저건 점수, 이건 용도다. */
.uses{list-style:none;margin:0 0 44px;padding:0;display:grid;gap:8px}
.use{display:grid;grid-template-columns:8.5rem 5.5rem 1fr;gap:12px;align-items:baseline;
  padding:12px 16px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:12px;font-size:13.5px}
.use b{font-weight:600}
.use-fit{font-size:12.5px;font-weight:600;color:var(--mut)}
.use-why{color:var(--mut);font-size:13px;line-height:1.6}
.use.u-good{border-left-color:var(--good)}
.use.u-good .use-fit{color:var(--good)}
.use.u-ok{border-left-color:var(--acc)}
.use.u-ok .use-fit{color:var(--acc)}
.use.u-no{border-left-color:var(--warn-line)}
@media (max-width:640px){
  .use{grid-template-columns:1fr auto;row-gap:4px}
  .use-why{grid-column:1/-1}
}

/* --- 「이 문구 되는 폰트만」 — 견본 문구에 없는 글자가 있는 카드를 표시하고 걸러낸다 --- */
.fitbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:11px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px}
.fit-msg{color:var(--mut)} .fit-msg b{color:var(--fg)}
.fit-only{margin-left:auto;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--fg);
  background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;transition:border-color .15s,background .15s}
.fit-only:hover{border-color:var(--acc)}
.fit-only.on{background:var(--acc);border-color:var(--acc);color:#fff}
.fcard.tofu{border-color:var(--warn-line)}
.fc-tofu{font-size:12px;color:var(--warn);border:1px solid var(--warn-line);border-radius:999px;padding:2px 9px}

/* --- /hangul — 자모표와 모아쓰기 조합기 -------------------------------------- */
.jamo-big{font-size:26px;line-height:1;font-weight:600}
.jamo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0 8px}
.jamo-cell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;
  display:flex;flex-direction:column;gap:5px;align-items:center}
.jamo-cell b{font-size:13px;color:var(--acc)}
.jamo-cell .mut{font-size:11.5px;line-height:1.45}
@media(max-width:720px){.jamo-grid{grid-template-columns:repeat(2,1fr)}}

.compose{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:20px;margin:18px 0 8px}
.cp-out{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.cp-char{font-size:104px;line-height:1;min-width:1.3em;text-align:center;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 10px 20px}
.cp-info{flex:1 1 240px;display:flex;flex-direction:column;gap:9px}
.cp-formula{font-size:16px;line-height:1.6}
.cp-formula code{font-size:13px}
.cp-fonts{font-size:14px;color:var(--mut)}
.cp-fonts .warnt{color:var(--warn)}
.cp-fontpick{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.cp-fontpick button,.cp-keys button{font:inherit;font-size:14px;cursor:pointer;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 10px;transition:border-color .12s,background .12s}
.cp-fontpick button{font-size:12.5px;border-radius:999px;padding:5px 12px}
.cp-fontpick button:hover,.cp-keys button:hover{border-color:var(--acc)}
.cp-fontpick button.on,.cp-keys button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.cp-row{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.cp-label{flex:none;width:86px;font-size:13px;color:var(--mut);font-weight:600}
.cp-label small{display:block;font-weight:400;opacity:.7}
.cp-keys{display:flex;gap:5px;flex-wrap:wrap}
.cp-keys button{min-width:36px;text-align:center}
@media(max-width:640px){
  .cp-char{font-size:76px}
  .cp-row{flex-direction:column;gap:6px}
  .cp-label{width:auto}
  .cp-label small{display:inline;margin-left:4px}
}
.learn{margin:8px 0 8px 20px;display:flex;flex-direction:column;gap:9px;max-width:70ch}
.learn li{line-height:1.7}

/* 등급 배지 아래 고지 — 남의 폰트에 등급을 붙이는 화면이라 「우리 기준」이 보여야 한다.
   .bs-why 와 같이 한 줄을 통째로 차지하되 더 작고 흐리게. */
.bs-head .bs-disc{flex-basis:100%;margin:-4px 0 0;font-size:11.5px;color:var(--mut);opacity:.85}
.bs-head .bs-disc a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bs-head .bs-disc a:hover{color:var(--acc)}

/* 앨범 커버 만들기 (/cover) — 왼쪽 폰트 목록 · 가운데 캔버스 · 오른쪽 조절판.
   캔버스는 3000×3000 한 장을 CSS 로 줄여 쓴다(미리보기와 저장본이 같은 픽셀). */
.alb{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start;padding-bottom:64px}
.alb-pick{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--hdr-h) + 14px)}
/* 「어느 칸의 폰트를 고르는 중인가」 — 목록은 한 벌이고 대상만 여기서 바꾼다 */
.alb-tabs{display:flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}
.alb-tab{flex:1 1 0;min-width:0;font:inherit;font-size:12.5px;color:var(--mut);background:none;
  border:0;border-radius:7px;padding:7px 4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alb-tab:hover{color:var(--fg)}
.alb-tab.on{background:var(--card);color:var(--fg);font-weight:600}
.alb-q{font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.alb-q:focus{outline:none;border-color:var(--acc)}
.alb-list{position:relative;display:flex;flex-direction:column;gap:2px;max-height:58vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;
  /* 89종이라 스크롤바가 늘 보이는 자리다. 기본 스크롤바는 다크에서 흰 띠로 남는다.
     표준 속성이 먼저고 ::-webkit-* 은 이걸 모르는 브라우저용 — 둘 다 지원하면 표준이 이긴다. */
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* 폰트 목록과 조절기 패널이 같은 막대를 쓴다. 테두리를 var(--card) 로 두면 목록에서만
   맞고 패널(--bg 위)에서는 회색 테를 두른 것처럼 보인다 — **투명 테두리 + padding-box** 로
   두면 배경이 무엇이든 그냥 여백이 된다. 평소엔 옅고 패널에 손이 가면 진해진다. */
.alb-ctl{scrollbar-color:var(--line) transparent}
.alb-list::-webkit-scrollbar,
.alb-ctl::-webkit-scrollbar{width:9px}
.alb-list::-webkit-scrollbar-track,
.alb-ctl::-webkit-scrollbar-track{background:transparent}
.alb-list::-webkit-scrollbar-thumb,
.alb-ctl::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
.alb-list:hover,.alb-ctl:hover{scrollbar-color:var(--mut) transparent}
.alb-list:hover::-webkit-scrollbar-thumb,
.alb-ctl:hover::-webkit-scrollbar-thumb{background:var(--mut);background-clip:padding-box}
.alb-f{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;
  font:inherit;color:var(--fg);background:none;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;text-align:left}
.alb-f b{font-size:14px;font-weight:600}
.alb-f small{flex:0 0 auto;font-size:11.5px;color:var(--mut)}
.alb-f:hover{background:var(--bg)}
.alb-f.on{background:var(--acc-weak);color:var(--acc)}
.alb-f.on small{color:var(--acc)}
.alb-f[hidden]{display:none}
.alb-stage{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:24px;align-items:start}
/* 기호 줄 — 캔버스 상자 안, 캔버스 바로 아래. 캔버스 폭을 그대로 쓰므로 한 줄에 열댓 개가 편다 */
.alb-symbar{display:flex;flex-direction:column;gap:7px;margin-top:14px;font-size:12px;color:var(--mut)}
/* touch-action:none 이라야 터치로도 글자를 끌 수 있다. 캔버스 위에서는 세로 스크롤이
   막히지만 정사각이라 화면을 다 덮지 않아 위아래로 빠져나갈 여지가 남는다.
   ponytail: 캔버스 위 스크롤을 포기한 대가로 모바일 드래그를 얻었다 — 갇힌다는 말이 나오면
   글자에 맞았을 때만 잡는 커스텀 제스처 판정으로 올린다. */
.alb-canvas{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);touch-action:none}
.alb-canvas.dragging{cursor:grabbing}
/* 「끌어 옮길 수 있다」 말풍선. 캔버스 위에 얹은 DOM 이라 저장한 PNG 에는 안 들어간다.
   색을 커버가 아니라 사이트 테마에서 가져오는 이유: 커버 색은 사용자가 정하므로 어떤
   조합에서도 읽히는 대비를 보장할 수 없다. pointer-events 를 죽여 드래그를 안 가로챈다. */
/* z-index:0 이 핵심이다. 이걸 안 주면 .alb-cvwrap 은 위치만 잡힌 상자일 뿐 **쌓임 맥락을
   만들지 않아서**, 안에 있는 .alb-tip 의 z-index:1 이 이 상자를 뚫고 나가 페이지 전체와
   같은 층에서 겨룬다 — 그러면 z-index 가 없는 오른쪽 조절기(=0) 위에 얹혀 입력칸이
   말풍선 밑에 묻힌다. 0 을 주면 그 1 은 이 상자 안에서만 유효해진다. */
.alb-cvwrap{position:relative;min-width:0;z-index:0}
.alb-tip{position:absolute;transform:translate(-50%,11px);pointer-events:none;z-index:1;
  background:var(--fg);color:var(--card);font-size:12.5px;line-height:1.35;
  max-width:calc(100% - 16px);   /* 좁은 캔버스에서는 두 줄로 접힌다 — nowrap 이면 밖으로 샌다 */
  padding:8px 11px;border-radius:9px;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.alb-tip::before{content:"";position:absolute;left:50%;top:-5px;margin-left:-5px;
  border:5px solid transparent;border-top:0;border-bottom-color:var(--fg)}
.alb-tip[hidden]{display:none}
/* 조절기가 스무 줄이 넘어 페이지 전체가 그만큼 길어지고, 아래로 내리면 캔버스가 화면에서
   사라졌다. 패널을 화면에 고정하고 **패널 안에서만** 스크롤시킨다 — 페이지 길이는 캔버스가
   정하고, 미리보기는 무엇을 만지든 언제나 보인다. 왼쪽 폰트 목록이 이미 쓰는 방식이다. */
.alb-ctl{display:flex;flex-direction:column;gap:13px;position:sticky;z-index:1;
  top:calc(var(--hdr-h) + 14px);max-height:calc(100vh - var(--hdr-h) - 40px);
  overflow-y:auto;scrollbar-width:thin;padding-right:6px}
/* 갈래 제목 — 스무 줄을 그냥 늘어놓으면 무엇이 무엇에 딸린 값인지 읽을 수가 없다 */
/* 조절기 묶음은 <details> 로 접는다 — 여닫는 상태를 JS 가 들 이유가 없다.
   details 에 display:flex 를 걸면 닫힘 처리가 브라우저마다 갈리므로 속은 .alb-gc 로 감싼다. */
.alb-g{min-width:0}
.alb-gc{display:flex;flex-direction:column;gap:13px;padding-top:13px}
summary.alb-h{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
summary.alb-h::-webkit-details-marker{display:none}
summary.alb-h::after{content:"▾";font-size:10px;transition:transform .12s}
.alb-g[open]>summary.alb-h::after{transform:rotate(180deg)}
summary.alb-h:hover{color:var(--fg)}
.alb-h{margin:8px 0 -3px;padding-bottom:6px;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.02em}
.alb-h:first-of-type{margin-top:0}
.alb-field{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--mut);padding-left:2px}
.alb-field span{flex:0 0 auto}
.alb-field textarea{resize:none;overflow:hidden;line-height:1.45}
/* 크기 슬라이더는 제 글자 칸 바로 아래 붙는 종속 행 — 들여쓰고 라벨을 죽여 위계를 만든다 */
.alb-sub{margin:-6px 0 2px 10px;font-size:12px;opacity:.85}
/* 기울기 줄만 넷(라벨·슬라이더·값·0°)이라 262px 패널에서 넘친다 — 넘치면 접히게 둔다 */
/* label[margin-right:auto] 는 라벨 하나짜리 줄용 규칙이라 여기선 끈다 — 그게 남은 자리를
   다 먹어 「0°」가 다음 줄로 접혔다 */
.alb-rotrow{flex-wrap:wrap;gap:6px}
.alb-rotrow label{margin-right:0}
.alb-rotrow .alb-mini{padding:4px 7px}
/* 기본 폭(약 129px)을 그대로 두면 그것만으로 줄이 넘쳐 「0°」가 접힌다 — 밑둥을 작게
   잡고 남는 자리를 늘려 받는다 */
.alb-field.alb-rotrow input[type=range]{flex:1 1 60px;min-width:60px}
.alb-field.alb-rotrow output{min-width:3em}   /* .alb-field output(4.4em)보다 세게 — 안 그러면 「0°」가 접힌다 */
.alb-field input[type=text],.alb-field textarea,.alb-field select{flex:1 1 auto;min-width:0;font:inherit;font-size:14px;
  color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.alb-field input:focus,.alb-field select:focus{outline:none;border-color:var(--acc)}
.alb-field input[type=range]{flex:1 1 auto;min-width:0}
.alb-field input[type=color]{width:46px;height:31px;padding:2px;background:var(--bg);
  border:1px solid var(--line);border-radius:9px;cursor:pointer}
.alb-field output{flex:0 0 auto;min-width:4.4em;text-align:right;font-size:12.5px;color:var(--fg);font-variant-numeric:tabular-nums}
/* 색 고르기 — 조합 프리셋 · 어울리는 배경(OKLCH) · 스포이드 */
.alb-pal{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--mut)}
.alb-pal[hidden]{display:none}
.alb-lab{flex:0 0 auto}
.alb-sws{display:flex;flex-wrap:wrap;gap:5px}
.alb-sw{width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:12px;font-weight:700;line-height:1;cursor:pointer}
.alb-sw:hover{border-color:var(--acc)}
/* 기호 칩 — 상자는 색 칩과 같고 글자만 고른 폰트로 보여준다(그래야 「그 폰트의 기호」다).
   폰트에 없는 기호는 목록에서 빼지 않고 흐리게 둔다 — 자리가 사라지면 폰트를 바꿀 때마다
   목록이 출렁여서 방금 본 기호를 다시 찾아야 한다. */
.alb-sym{width:30px;height:30px;font-size:15px;font-weight:400;background:var(--bg);color:var(--fg)}
.alb-sym.off{opacity:.3}
/* 고른 기호 조절기 한 줄(크기·색·지우기). 캔버스 폭을 다 쓰지 않게 묶는다 —
   슬라이더 하나가 판만큼 길 이유가 없다. label[margin-right:auto] 는 조절기 한 줄에
   라벨이 하나뿐일 때 쓰는 규칙이라 여기서는 끈다(둘이라 서로를 밀어낸다). */
.alb-symops{flex-wrap:wrap;max-width:520px;font-size:12px}
.alb-symops input[type=range]{min-width:96px}
.alb-symops label{margin-right:0}
.alb-symops output{min-width:3.6em}
/* 배경 타이포에 딸린 조절기 — 세로줄로 물려 스위치에 걸린 값임을 보인다.
   [hidden] 은 UA 규칙이라 여기서 display 를 주면 켜지 않아도 늘 보인다. 그래서 같이 적는다. */
.alb-subbox{display:flex;flex-direction:column;gap:9px;margin-left:3px;padding-left:10px;border-left:2px solid var(--line)}
.alb-subbox[hidden]{display:none}
.alb-subbox .alb-field{font-size:12px}
.alb-field label{margin-right:auto}   /* 라벨만 왼쪽에 붙이고 나머지는 오른쪽으로 */
.alb-mini{flex:0 0 auto;font:inherit;font-size:12px;color:var(--mut);background:none;
  border:1px solid var(--line);border-radius:8px;padding:5px 9px;cursor:pointer}
.alb-mini:hover{border-color:var(--acc);color:var(--fg)}
.alb-mini[hidden]{display:none}
/* 끝에 닿아 눌러도 아무 일이 없는 단추 — 지우지 않고 꺼 둔다(자리가 사라지면 줄이 출렁인다) */
.alb-mini[disabled]{opacity:.4;cursor:default}
.alb-mini[disabled]:hover{border-color:var(--line);color:var(--mut)}
.alb-field input[type=checkbox]{flex:0 0 auto;width:17px;height:17px;accent-color:var(--acc);cursor:pointer}
/* 스위치 여럿을 한 줄에 — 세로로 늘어놓으면 「저장」이 스크롤 밖으로 밀린다 */
.alb-checks{flex-wrap:wrap;gap:7px 13px}
.alb-checks label{display:flex;align-items:center;gap:5px;cursor:pointer}
.alb-checks label[hidden]{display:none}
.alb-field[hidden]{display:none}
/* 패널이 제 안에서 스크롤하므로 저장 버튼은 바닥에 붙여 둔다 — 아무리 내려도 늘 보인다.
   outline 은 테두리 바깥에 그려지므로 버튼과 패널 여백 사이로 뒤 내용이 비치는 걸 막는다
   (그림자와 달리 자리를 안 차지하고 border-radius 를 따라간다). */
.alb-save{width:100%;margin-top:4px;cursor:pointer;position:sticky;bottom:0;
  outline:7px solid var(--bg);outline-offset:0}
/* 그 outline 이 브라우저 기본 포커스 링을 덮으므로 색만 바꿔 되살린다 — 안 하면
   키보드로는 「저장」에 가 있는지 알 수가 없다 */
.alb-save:focus-visible{outline-color:var(--acc)}
.alb-save[disabled]{opacity:.55;cursor:default}
.alb-note{font-size:12px;color:var(--mut);line-height:1.65}
@media(max-width:900px){
  .alb{grid-template-columns:1fr}
  .alb-pick{position:static}
  .alb-list{max-height:34vh}
  .alb-stage{grid-template-columns:1fr}
  .alb-ctl{position:static;max-height:none;overflow:visible;padding-right:0}
  .alb-save{position:static}
}
/* iOS 는 16px 미만 입력에 자동 확대를 건다 — 이 화면의 입력을 한 선택자로 함께 올린다 */
@media(max-width:640px){.alb-q,.alb-field input[type=text],.alb-field textarea,.alb-field select{font-size:16px}}