/* CSP 2단계 — 인라인 <style> 제거분(2026-09-13). 원래 help.html 의 <style> 안에 있던 CSS 를
   **내용 변경 없이** 그대로 옮긴 것이다. style-src 에서 'unsafe-inline' 을 빼기 위한 조치.
   같은 파일에 <style> 이 여러 개였으면 문서 순서대로 이어 붙였다(우선순위 보존). */

:root {
    --cyan:#00c2d4; --blue:#1e7fff;
    --grad:linear-gradient(120deg,#00c2d4,#1e7fff);
    --grad-soft:linear-gradient(120deg,rgba(0,194,212,.16),rgba(30,127,255,.16));
    --r:18px; --ease:cubic-bezier(.22,.61,.36,1);
  }
  :root, :root[data-theme="light"] {
    --bg:#ffffff; --bg-soft:#f5f8ff;
    --ink:#0b1733; --ink-dim:#54648a; --ink-faint:#8a9abd;
    --line:rgba(20,60,120,.12); --card:#ffffff; --card-line:rgba(20,60,120,.10);
    --shadow:0 14px 40px rgba(20,60,120,.10); --shadow-lg:0 28px 64px rgba(20,60,120,.16);
    --header-bg:rgba(255,255,255,.82);
    --page-fx: radial-gradient(820px 520px at 85% -6%, rgba(30,127,255,.10), transparent 60%),
               radial-gradient(640px 480px at 0% 4%, rgba(0,194,212,.09), transparent 55%),
               linear-gradient(180deg,#ffffff,#f5f8ff 70%,#ffffff);
    --shot-bg:linear-gradient(160deg,#eef3ff,#dfe8fb);
    --warn:#b26a00; --warn-bg:rgba(255,176,32,.12); --warn-line:rgba(255,176,32,.32);
  }
  :root[data-theme="dark"] {
    --bg:#070b16; --bg-soft:#0b1222;
    --ink:#eaf1ff; --ink-dim:#9fb0cd; --ink-faint:#6b7c9e;
    --line:rgba(120,160,220,.14); --card:#0e1830; --card-line:rgba(120,160,220,.12);
    --shadow:0 18px 50px rgba(0,0,0,.45); --shadow-lg:0 30px 70px rgba(0,0,0,.55);
    --header-bg:rgba(8,12,22,.78);
    --page-fx: radial-gradient(820px 520px at 85% -6%, rgba(30,127,255,.18), transparent 60%),
               radial-gradient(640px 480px at 0% 4%, rgba(0,194,212,.12), transparent 55%),
               linear-gradient(180deg,#070b16,#0b1222 70%,#070b16);
    --shot-bg:linear-gradient(160deg,#0c1730,#0a1226);
    --warn:#ffcb6b; --warn-bg:rgba(255,176,32,.10); --warn-line:rgba(255,176,32,.26);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --bg:#070b16; --bg-soft:#0b1222;
      --ink:#eaf1ff; --ink-dim:#9fb0cd; --ink-faint:#6b7c9e;
      --line:rgba(120,160,220,.14); --card:#0e1830; --card-line:rgba(120,160,220,.12);
      --shadow:0 18px 50px rgba(0,0,0,.45); --shadow-lg:0 30px 70px rgba(0,0,0,.55);
      --header-bg:rgba(8,12,22,.78);
      --page-fx: radial-gradient(820px 520px at 85% -6%, rgba(30,127,255,.18), transparent 60%),
                 radial-gradient(640px 480px at 0% 4%, rgba(0,194,212,.12), transparent 55%),
                 linear-gradient(180deg,#070b16,#0b1222 70%,#070b16);
      --shot-bg:linear-gradient(160deg,#0c1730,#0a1226);
      --warn:#ffcb6b; --warn-bg:rgba(255,176,32,.10); --warn-line:rgba(255,176,32,.26);
    }
  }

  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body { font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
    color:var(--ink); background:var(--bg); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
    transition:background .4s var(--ease), color .4s var(--ease); }
  .wrap { max-width:1140px; margin:0 auto; padding:0 28px; }
  a { color:inherit; text-decoration:none; }
  .grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  img { max-width:100%; }
  .bgfx { position:fixed; inset:0; z-index:-2; background:var(--page-fx); transition:background .4s var(--ease); }

  :root .theme-dark { display:none; }
  :root[data-theme="dark"] .theme-light { display:none; }
  :root[data-theme="dark"] .theme-dark { display:block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-light { display:none; }
    :root:not([data-theme]) .theme-dark { display:block; }
  }

  header { position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
    background:var(--header-bg); border-bottom:1px solid var(--line); transition:background .4s var(--ease),border-color .4s var(--ease); }
  nav { display:flex; align-items:center; gap:22px; height:70px; }
  .brand img { height:48px; width:auto; display:block; }
  nav .links { margin-left:auto; display:flex; gap:22px; color:var(--ink-dim); font-size:14px; font-weight:500; }
  nav .links a { position:relative; padding:4px 0; transition:color .2s; }
  nav .links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--grad); transition:width .25s var(--ease); }
  nav .links a:hover, nav .links a.active { color:var(--ink); } nav .links a:hover::after, nav .links a.active::after { width:100%; }
  .nav-r { display:flex; align-items:center; gap:10px; margin-left:18px; }

  .btn { display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:12px; font-weight:600; font-size:14px;
    background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(30,127,255,.26); transition:transform .2s var(--ease), box-shadow .2s var(--ease); cursor:pointer; border:0; }
  .btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(30,127,255,.36); }
  .btn.ghost { background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
  .btn.ghost:hover { border-color:var(--blue); }
  .btn.sm { padding:8px 13px; font-size:13px; border-radius:10px; }
  .theme-btn { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; cursor:pointer;
    background:var(--card); border:1px solid var(--line); color:var(--ink-dim); transition:.2s var(--ease); }
  .theme-btn:hover { color:var(--ink); border-color:var(--blue); } .theme-btn svg { width:18px; height:18px; }
  .langbar { display:inline-flex; gap:2px; padding:3px; border-radius:11px; background:var(--card); border:1px solid var(--line); }
  .langbar button { border:0; background:transparent; color:var(--ink-dim); font:inherit; font-size:12.5px; font-weight:700; padding:6px 9px; border-radius:8px; cursor:pointer; }
  .langbar button.on { background:var(--grad); color:#fff; }
  /* 홈과 동일한 헤더: 사용법 분리 + 언어 드롭다운 */
  .navhelp { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-dim);
    padding:8px 12px; border-radius:10px; text-decoration:none; transition:color .15s, background .15s; }
  .navhelp:hover, .navhelp.active { color:var(--ink); background:var(--card); }
  .navhelp svg { width:16px; height:16px; opacity:.85; }
  .langsel { position:relative; }
  .langbtn { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:10px; border:1px solid var(--line);
    background:var(--card); color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; line-height:1; }
  .langbtn:hover { border-color:var(--blue); }
  .langbtn > svg:first-child { width:16px; height:16px; }
  .langbtn .caret { width:11px; height:11px; opacity:.6; }
  .langmenu { position:absolute; top:calc(100% + 8px); right:0; min-width:136px; background:var(--card);
    border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; z-index:60; }
  .langmenu.on { display:block; }
  .langmenu button { display:flex; width:100%; align-items:center; gap:8px; padding:9px 11px; border:0; background:none;
    color:var(--ink); font-size:13px; font-weight:600; border-radius:8px; cursor:pointer; text-align:left; }
  .langmenu button:hover { background:rgba(30,127,255,.10); }
  .langmenu button.on { color:var(--blue); }
  .langmenu button .ck { margin-left:auto; opacity:0; width:14px; height:14px; }
  .langmenu button.on .ck { opacity:1; }
  @media (max-width:880px){ .navhelp span { display:none; } .langbtn #langCur { display:none; } }

  /* 제품 선택(세그먼트) — NaNAI Player / 모니터 */
  .prodsel { display:inline-flex; gap:4px; margin-top:22px; padding:4px; border-radius:14px; background:var(--card); border:1px solid var(--card-line); box-shadow:var(--shadow); }
  .prodbtn { display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--ink-dim); font:inherit; font-size:14px; font-weight:700; padding:9px 16px; border-radius:11px; cursor:pointer; transition:color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
  .prodbtn svg { width:17px; height:17px; flex:none; }
  .prodbtn:hover { color:var(--ink); }
  .prodbtn.on { background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(30,127,255,.28); }

  /* 히어로 + 검색 툴바 */
  .hero { padding:56px 0 20px; }
  .badge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600;
    color:var(--blue); background:var(--grad-soft); border:1px solid var(--card-line); }
  .hero h1 { font-size:clamp(28px,4.4vw,46px); font-weight:830; letter-spacing:-1.2px; line-height:1.1; margin:16px 0 0; }
  .hero p.tag { font-size:clamp(15px,2vw,18px); color:var(--ink-dim); margin:14px 0 0; max-width:640px; }
  .searchrow { display:flex; gap:10px; margin-top:26px; max-width:660px; }
  .searchbox { flex:1; display:flex; align-items:center; gap:10px; padding:0 14px; height:50px; border-radius:14px;
    background:var(--card); border:1px solid var(--card-line); box-shadow:var(--shadow); }
  .searchbox svg { width:19px; height:19px; color:var(--ink-faint); flex:none; }
  .searchbox input { flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; }
  .searchbox .clr { display:none; cursor:pointer; color:var(--ink-faint); font-size:18px; padding:4px; }
  .searchbox.has .clr { display:block; }
  .idxbtn { display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 18px; border-radius:14px; font-weight:700; font-size:14px;
    background:var(--card); border:1px solid var(--card-line); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; white-space:nowrap; }
  .idxbtn:hover { border-color:var(--blue); }
  .searchmeta { margin-top:12px; font-size:13.5px; color:var(--ink-faint); min-height:20px; }

  .toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
  .toc a { font-size:12.5px; font-weight:600; color:var(--ink-dim); padding:7px 12px; border-radius:999px;
    background:var(--card); border:1px solid var(--card-line); transition:.18s var(--ease); }
  .toc a:hover { color:var(--ink); border-color:var(--blue); transform:translateY(-2px); }

  /* 섹션 */
  section.sec { padding:34px 0 4px; scroll-margin-top:86px; }
  .sec-head { display:flex; align-items:center; gap:13px; margin-bottom:4px; }
  .sec-head .ix { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:21px; flex:none; background:var(--grad-soft); border:1px solid var(--card-line); }
  .sec-head h2 { font-size:clamp(20px,3vw,28px); font-weight:820; letter-spacing:-.5px; }
  .sec-head .n { font-size:12px; letter-spacing:2.2px; text-transform:uppercase; color:var(--blue); font-weight:700; }
  .sec-head .cnt { margin-left:auto; font-size:12.5px; color:var(--ink-faint); font-weight:600; }

  /* 주제 아코디언 */
  .topic { background:var(--card); border:1px solid var(--card-line); border-radius:16px; margin-top:12px; box-shadow:var(--shadow); overflow:hidden; }
  .topic > .thead { display:flex; align-items:center; gap:13px; padding:17px 20px; cursor:pointer; user-select:none; }
  .topic > .thead:hover { background:var(--grad-soft); }
  .topic .tico { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:18px; flex:none; background:var(--grad-soft); border:1px solid var(--card-line); }
  .topic .tt { flex:1; min-width:0; }
  .topic .tt h3 { font-size:16.5px; font-weight:800; letter-spacing:-.3px; }
  .topic .tt .sum { color:var(--ink-dim); font-size:13.5px; margin-top:2px; }
  .topic .chev { flex:none; color:var(--ink-faint); transition:transform .25s var(--ease); font-size:15px; }
  .topic.open .chev { transform:rotate(90deg); }
  .topic .tbody { display:none; padding:2px 20px 22px; border-top:1px solid var(--card-line); }
  .topic.open .tbody { display:block; }
  .topic .tgrid { display:grid; grid-template-columns:1fr 250px; gap:26px; align-items:start; padding-top:16px; }
  .topic .tmain > p.para { font-size:14.5px; color:var(--ink); margin:0 0 12px; line-height:1.68; }
  .steps { list-style:none; margin:8px 0 4px; display:flex; flex-direction:column; gap:10px; counter-reset:s; }
  .steps li { position:relative; padding-left:36px; font-size:14px; color:var(--ink); }
  .steps li::before { counter-increment:s; content:counter(s); position:absolute; left:0; top:-1px; width:25px; height:25px; border-radius:50%; background:var(--grad); color:#fff; font-size:12.5px; font-weight:800; display:grid; place-items:center; box-shadow:0 4px 12px rgba(30,127,255,.3); }
  .steps li b, .topic .tmain b { color:var(--ink); font-weight:700; }
  .note-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
  .tip, .caution { padding:10px 14px 10px 38px; position:relative; border-radius:11px; font-size:13.5px; }
  .tip { color:var(--ink-dim); background:var(--grad-soft); border:1px solid var(--card-line); }
  .tip::before { content:"💡"; position:absolute; left:13px; top:10px; font-size:14px; }
  .caution { color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line); }
  .caution::before { content:"⚠️"; position:absolute; left:13px; top:10px; font-size:14px; }
  .kw { margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
  .kw span { font-size:11.5px; color:var(--ink-faint); background:var(--bg-soft); border:1px solid var(--card-line); padding:3px 9px; border-radius:999px; }
  .related { margin-top:16px; padding-top:12px; border-top:1px dashed var(--card-line); }
  .related .rh { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--blue); margin-bottom:6px; }
  .related a { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-dim); margin:2px 10px 2px 0; }
  .related a:hover { color:var(--ink); }

  /* 스크린샷 슬롯 */
  .shots { display:flex; flex-direction:column; gap:16px; position:sticky; top:86px; }
  .phone { width:100%; max-width:230px; margin:0 auto; aspect-ratio:9/19; border-radius:28px; background:var(--shot-bg);
    border:1px solid var(--card-line); box-shadow:var(--shadow); position:relative; overflow:hidden; display:grid; place-items:center; }
  .phone::before { content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:56px; height:5px; border-radius:3px; background:var(--card-line); }
  .phone .wm { font-size:58px; opacity:.15; }
  .phone .cap { position:absolute; bottom:0; left:0; right:0; padding:11px 12px; text-align:center; font-size:11px; color:var(--ink-faint); line-height:1.5;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.04)); }
  .phone .cap b { color:var(--ink-dim); display:block; font-size:11.5px; margin-bottom:2px; }
  .phone .mos { display:inline-block; margin-top:5px; padding:2px 7px; border-radius:6px; font-size:10px; font-weight:700; color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line); }

  /* 실제 스크린샷 카드(가로형 데스크톱 캡처) — 클릭 시 원본 새 탭 */
  .shots .shot-img { background:var(--card); border:1px solid var(--card-line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
  .shots .shot-img a { display:block; line-height:0; }
  .shots .shot-img img { display:block; width:100%; height:auto; transition:opacity .2s var(--ease); }
  .shots .shot-img a:hover img { opacity:.9; }
  .shots .shot-img figcaption { padding:10px 12px; font-size:11px; color:var(--ink-faint); line-height:1.5; }
  .shots .shot-img figcaption b { color:var(--ink-dim); display:block; font-size:11.5px; margin-bottom:2px; }
  .shots .shot-img .mos { display:inline-block; margin-top:5px; padding:2px 7px; border-radius:6px; font-size:10px; font-weight:700; color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line); }

  /* 목업 일러스트(실제 캡처 대기 슬롯) — 실캡처가 오면 <img>가 로드되며 자동 교체 */
  .shots .shot-img .mockholder { display:block; line-height:0; background:var(--shot-bg); }
  .shots .shot-img .mockholder svg { display:block; width:100%; height:auto; }
  .shots .shot-img .realshot { display:none; }
  .shots .shot-img.hasreal .realshot { display:block; }
  .shots .shot-img.hasreal .mockholder { display:none; }
  .shots .shot-img .mocktag { display:inline-block; margin-top:5px; padding:2px 7px; border-radius:6px; font-size:10px; font-weight:700;
    color:var(--ink-faint); background:var(--grad-soft); border:1px solid var(--card-line); }
  .shots .shot-img.hasreal .mocktag { display:none; }
  /* 목업 SVG 스킨(테마 연동) */
  .mk-win { fill:var(--bg-soft); }
  .mk-bar { fill:var(--card); }
  .mk-rail { fill:var(--card); }
  .mk-card { fill:var(--card); }
  .mk-panel { fill:var(--bg); }
  .mk-stroke { fill:none; stroke:var(--card-line); stroke-width:1; }
  .mk-line { fill:var(--ink-faint); opacity:.42; }
  .mk-line-lt { fill:var(--ink-faint); opacity:.2; }
  .mk-ic { fill:var(--ink-faint); opacity:.5; }
  .mk-accent { fill:var(--blue); }
  .mk-accent-soft { fill:var(--blue); opacity:.16; }
  .mk-cyan { fill:var(--cyan); }
  .mk-violet { fill:#7b5cff; }
  .mk-violet-soft { fill:#7b5cff; opacity:.16; }
  .mk-green { fill:#22c55e; }
  .mk-green-soft { fill:#22c55e; opacity:.18; }
  .mk-warn { fill:var(--warn); }
  .mk-brand { fill:var(--ink); font-family:system-ui,-apple-system,sans-serif; font-weight:800; }
  .mk-knob { fill:#fff; }

  /* 색인 오버레이 */
  .idx-ov { position:fixed; inset:0; z-index:90; background:rgba(6,10,22,.5); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:64px 16px; }
  .idx-ov.on { display:flex; }
  .idx-panel { width:100%; max-width:560px; max-height:78vh; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--card-line); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; }
  .idx-panel .ih { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--card-line); }
  .idx-panel .ih h3 { font-size:16px; font-weight:800; } .idx-panel .ih .x { margin-left:auto; cursor:pointer; color:var(--ink-faint); font-size:20px; padding:2px 8px; }
  .idx-panel .isearch { padding:12px 16px; border-bottom:1px solid var(--card-line); }
  .idx-panel .isearch input { width:100%; border:1px solid var(--card-line); background:var(--bg-soft); color:var(--ink); border-radius:10px; padding:9px 12px; font:inherit; font-size:14px; outline:0; }
  .idx-list { overflow-y:auto; padding:6px 0; }
  .idx-list button { display:flex; width:100%; text-align:left; gap:10px; align-items:baseline; padding:9px 18px; border:0; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
  .idx-list button:hover { background:var(--grad-soft); }
  .idx-list .k { font-weight:700; font-size:14px; } .idx-list .to { margin-left:auto; font-size:12px; color:var(--ink-faint); max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* 구독·토큰 */
  .plans { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  .plan { background:var(--card); border:1px solid var(--card-line); border-radius:18px; padding:22px; box-shadow:var(--shadow); }
  .plan.paid { border-color:rgba(30,127,255,.5); }
  .plan .pk { font-size:12.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--blue); }
  .plan h3 { font-size:21px; font-weight:820; margin:6px 0 4px; letter-spacing:-.4px; }
  .plan .pdesc { color:var(--ink-dim); font-size:13.5px; }
  .plan ul { list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:8px; }
  .plan li { font-size:13.5px; color:var(--ink-dim); padding-left:24px; position:relative; }
  .plan li::before { content:"✓"; position:absolute; left:0; top:0; width:17px; height:17px; border-radius:50%; background:var(--grad-soft); color:var(--blue); font-size:10.5px; font-weight:800; display:grid; place-items:center; }
  .tokentbl { width:100%; border-collapse:collapse; margin-top:18px; font-size:14px; overflow:hidden; border-radius:14px; border:1px solid var(--card-line); background:var(--card); box-shadow:var(--shadow); }
  .tokentbl th, .tokentbl td { padding:12px 15px; text-align:left; border-bottom:1px solid var(--card-line); }
  .tokentbl thead th { background:var(--grad-soft); color:var(--ink); font-weight:800; font-size:12.5px; }
  .tokentbl tbody tr:last-child td { border-bottom:0; }
  .tokentbl td.tk { font-weight:800; color:var(--blue); white-space:nowrap; } .tokentbl .cap2 { color:var(--ink-faint); font-size:12.5px; }
  .note { margin-top:12px; font-size:12.5px; color:var(--ink-faint); }

  .cbox { margin-top:24px; background:linear-gradient(135deg,#0b1733,#15376b); border-radius:22px; padding:34px; text-align:center; color:#fff; position:relative; overflow:hidden; box-shadow:0 30px 70px rgba(11,55,120,.30); }
  .cbox::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(500px 300px at 50% -20%, rgba(0,194,212,.34), transparent 60%); }
  .cbox h2 { font-size:clamp(20px,3vw,28px); font-weight:820; position:relative; z-index:1; }
  .cbox p { color:#bcd0f0; margin-top:8px; position:relative; z-index:1; }
  .cbox .cta { margin-top:20px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
  .cbox .btn.ghost { background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.22); }

  footer { border-top:1px solid var(--line); padding:36px 0; color:var(--ink-faint); font-size:13.5px; margin-top:44px; }
  footer .row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  footer .brand img { height:22px; } footer .links { margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; }
  footer .links a:hover { color:var(--ink); }
  footer .mail:hover { color:var(--ink); text-decoration:underline; }

  .empty { padding:40px 8px; color:var(--ink-faint); font-size:15px; text-align:center; }

  @media (max-width:860px) {
    nav .links { display:none; }
    .topic .tgrid { grid-template-columns:1fr; }
    .shots { position:static; flex-direction:row; flex-wrap:wrap; }
    .phone { max-width:180px; }
    .plans { grid-template-columns:1fr; }
    .tokentbl { display:block; overflow-x:auto; }
    .searchrow { flex-direction:column; } .idxbtn { width:100%; justify-content:center; }
  }