:root {
  
  --brand: #2AABEE;
  --brand-2: #229ED9;        
  --brand-grad: linear-gradient(180deg, #2AABEE, #229ED9);  
  --primary: #1F7AC0;        
  --primary-hover: #1D6FB0;
  --on-brand: #FFFFFF;       
  
  --link: #1F7AC0;           
  --link-ink: #1A6BAA;       
  --link-hover: #155A91;
  
  --ink: #0A2036;          
  --ink-2: #32465A;        
  --muted: #5B6B7F;        
  
  color-scheme: light;
  --bg: #FFFFFF;           
  --surface: #FFFFFF;      
  --icon: #1F7AC0;         
  --art-filter: none;      
  --soft: #F4F8FB;         
  --soft-2: #EAF1F6;
  --line: #E1E9F0;
  --line-2: #CBD8E3;
  --blue-soft: #EAF6FD;    
  --blue-line: #CDE7F7;
  
  --navy: #0A2036;
  --navy-2: #0F3A5F;
  --navy-ink: #C9DCEA;     
  --navy-mute: #9DB6CB;    
  
  --ok: #12A150;       --ok-ink: #067647;    --ok-soft: #ECFDF3;   --ok-line: #ABEFC6;
  --warn: #DC8A0B;     --warn-ink: #93400D;  --warn-soft: #FFF8EB; --warn-line: #F3DDB1;
  --err: #D92D20;      --err-ink: #B42318;   --err-soft: #FEF3F2;  --err-line: #FBD5D0;
  
  --fig-red: #EF4444;  --fig-blue: #1E88E5;  --fig-green: #10B981;  --fig-gray: #94A3B8;
  
  --mint: var(--ok);   --mint-ink: var(--ok-ink);   --mint-soft: var(--ok-soft);
  --amber: var(--warn); --amber-ink: var(--warn-ink); --amber-soft: var(--warn-soft);
  --red: var(--err);    --red-ink: var(--err-ink);    --red-soft: var(--err-soft);
  --purple: var(--brand); --purple-soft: var(--blue-soft);
  --pink: var(--brand);   --pink-soft: var(--blue-soft);
  --gold: var(--warn);   --gold-soft: var(--warn-soft);
  
  --a-dl: var(--brand);  --a-st: var(--brand);  --a-ht: var(--brand);  --a-fx: var(--brand);
  --a-sc: var(--brand);  --a-ch: var(--brand);  --a-stk: var(--brand); --a-fq: var(--brand);
  --a-dl-soft: var(--blue-soft); --a-st-soft: var(--blue-soft); --a-ht-soft: var(--blue-soft); --a-fx-soft: var(--blue-soft);
  --a-sc-soft: var(--blue-soft); --a-ch-soft: var(--blue-soft); --a-stk-soft: var(--blue-soft); --a-fq-soft: var(--blue-soft);
  --acc: var(--brand); --acc-soft: var(--blue-soft);
  
  --wrap: 1200px;
  --r-s: 6px; --r-m: 10px; --r-l: 12px; --r-xl: 16px;
  
  --scrim: rgba(8, 12, 20, .82); --scrim-chip: rgba(15, 23, 42, .72); --on-scrim: #fff; --scrim-btn: rgba(255, 255, 255, .92); --scrim-btn-ink: #0f172a;
  --sh-1: 0 1px 2px rgba(10,32,54,.06);
  --sh-2: 0 14px 34px -18px rgba(10,32,54,.32);
  --sh-head: 0 4px 14px -6px rgba(10,32,54,.16);   
  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;
  --fs: 17px;
  
  --sec-alt: #EEF3F8;      
  --sec-line: var(--line);
  --stage: #0B1626;        
  --stage-line: transparent;
  --stage-ink: #C9DCEA;  --stage-mute: #9DB6CB;   
  --band: linear-gradient(120deg, #1F7AC0, #1A6BAA);   
  --band-glow: rgba(42,171,238,.35);
  --thumb-line: transparent;   
  --sp-sec: 72px; --sp-head: 24px; --sp-gap: 24px; --sp-row: 12px; --row-s: 76px;
  --t-h2: 26px; --t-l: 24px; --t-m: 17px; --t-s: 15px; --t-meta: 12.5px;
  --sec-grid: rgba(10,40,80,.06);  --sec-glow: rgba(42,171,238,.14);  --deco-blend: multiply;   
}
@media (max-width: 640px) {
  :root { --sp-sec: 48px; --sp-head: 16px; --sp-gap: 16px; --sp-row: 8px; --row-s: 68px; --t-h2: 21px; --t-l: 20px; --t-m: 16px; }
}


:root[data-theme="dark"] {
  color-scheme: dark;
  --link: #6CC0F5;  --link-ink: #8ED0F8;  --link-hover: #B0E0FA;
  --ink: #E8EEF4;   --ink-2: #B7C4D1;     --muted: #8FA1B3;
  --bg: #0E1621;    --surface: #152230;   --soft: #182839;   --soft-2: #1E3247;
  --line: #223547;  --line-2: #2E475D;
  --sec-alt: #080E17;  --stage: #04080F;  --stage-line: rgba(255,255,255,.08);  --thumb-line: var(--line-2);  --sec-grid: rgba(255,255,255,.04);  --sec-glow: rgba(42,171,238,.16);  --deco-blend: screen;
  --blue-soft: #11293C;  --blue-line: #1E4560;  --icon: #8ED0F8;  --art-filter: brightness(.86);
  --ok-ink: #5FD394;   --ok-soft: #0F2A1E;   --ok-line: #1C5A3A;
  --warn-ink: #F2B24C; --warn-soft: #2C2312; --warn-line: #5C4715;
  --err-ink: #FF8A80;  --err-soft: #2E1614;  --err-line: #6A2B27;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 14px 34px -18px rgba(0,0,0,.75);
  --sh-head: 0 4px 14px -4px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --link: #6CC0F5;  --link-ink: #8ED0F8;  --link-hover: #B0E0FA;
    --ink: #E8EEF4;   --ink-2: #B7C4D1;     --muted: #8FA1B3;
    --bg: #0E1621;    --surface: #152230;   --soft: #182839;   --soft-2: #1E3247;
    --line: #223547;  --line-2: #2E475D;
    --sec-alt: #080E17;  --stage: #04080F;  --stage-line: rgba(255,255,255,.08);  --thumb-line: var(--line-2);  --sec-grid: rgba(255,255,255,.04);  --sec-glow: rgba(42,171,238,.16);  --deco-blend: screen;
    --blue-soft: #11293C;  --blue-line: #1E4560;  --icon: #8ED0F8;  --art-filter: brightness(.86);
    --ok-ink: #5FD394;   --ok-soft: #0F2A1E;   --ok-line: #1C5A3A;
    --warn-ink: #F2B24C; --warn-soft: #2C2312; --warn-line: #5C4715;
    --err-ink: #FF8A80;  --err-soft: #2E1614;  --err-line: #6A2B27;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 14px 34px -18px rgba(0,0,0,.75);
    --sh-head: 0 4px 14px -4px rgba(0,0,0,.55);
  }
}


.tg-th-d { display: none !important; }
:root[data-theme="dark"] .tg-th-l { display: none !important; }
:root[data-theme="dark"] .tg-th-d { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg-th-l { display: none !important; } :root:not([data-theme="light"]) .tg-th-d { display: block !important; } }
:root { --art-bg: #F6FAFE; --thumb-bg: #0B1626; }   
:root[data-theme="dark"] { --art-bg: #0B1626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --art-bg: #0B1626; } }


* { box-sizing: border-box; }

:root { --head-h: 65px; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs); line-height: 1.7;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
svg { flex: none; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; letter-spacing: -.025em; color: var(--ink); }
h1 { font-size: 32px; font-weight: 800; }
h2 { font-size: 24px; font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 1.1em; }
.tg-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
main.tg-wrap { padding-top: 28px; padding-bottom: 64px; min-height: 60vh; }
.tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tg-skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.tg-skip:focus { left: 8px; top: 8px; z-index: 100; }

.tg-staging { background: var(--primary); color: #fff; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }


.tg-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); background: var(--bg); }   

@keyframes tg-head-sh { from { box-shadow: none; } to { box-shadow: var(--sh-head); } }
@supports (animation-timeline: scroll()) { .tg-header { animation: tg-head-sh linear both; animation-timeline: scroll(root block); animation-range: 0 24px; } }
.tg-mnav { display: none; }
.tg-header-in { position: relative; display: flex; align-items: center; gap: 24px; height: 64px; }
.tg-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; letter-spacing: -.03em; }
.tg-brand:hover { text-decoration: none; }
.tg-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,32,54,.2); flex-shrink: 0; }
.tg-logo img, .tg-logo svg { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: contain; }
.tg-nav { display: flex; align-self: stretch; margin: 0 auto; }
.tg-nav-l { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tg-nav-i { display: flex; align-items: center; }   
.tg-nav-a { position: relative; color: var(--ink-2); padding: 7px 11px; border-radius: 8px; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.tg-nav-a:hover, .tg-nav-i.open > .tg-nav-a { color: var(--ink); text-decoration: none; background: var(--soft); }
@media (hover: hover) { .tg-nav-i.has-mega:hover > .tg-nav-a { color: var(--ink); background: var(--soft); } }
.tg-nav-a.on { color: var(--ink); font-weight: 700; }
.tg-nav-a.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -14px; height: 2px; border-radius: 2px; background: var(--brand); }


.tg-mega { position: absolute; left: 16px; right: 16px; top: calc(100% + 1px); z-index: 70; visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease .18s, transform .16s ease .18s, visibility 0s linear .34s; }
@media (hover: hover) { .tg-nav-i:hover > .tg-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .16s ease .12s, transform .16s ease .12s, visibility 0s linear .12s; } }
.tg-nav-i.open > .tg-mega, :root:not(.js) .tg-nav-i:focus-within > .tg-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
.tg-nav-i.shut > .tg-mega { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
.tg-mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px 32px; padding: 24px 28px 16px; max-height: calc(100vh - var(--head-h) - 24px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: var(--sh-2); }
.tg-mega-in.no-rail { grid-template-columns: minmax(0, 1fr); }
.tg-mega ul { list-style: none; margin: 0; padding: 0; }
.tg-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 4px 28px; align-content: start; }
.tg-mega-h { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.tg-mega-col a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 8px;
  color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.tg-mega-col a:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.tg-mega small { color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-mega-rail { align-self: stretch; padding: 16px 18px; border-radius: 10px; background: var(--soft); }   
.tg-mega-rail a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.tg-mega-rail a:hover { color: var(--link); }
.tg-mega-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 20px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.tg-mega-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.tg-mega-chips b { margin-right: 4px; color: var(--muted); font-weight: 700; }
.tg-mega-chips a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 600; }
.tg-mega-chips a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.tg-mega-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--link); font-size: 14px; font-weight: 700; white-space: nowrap; }

@media (min-width: 1100px) {
  .tg-mega.is-s, .tg-mega.is-m { left: 50%; right: auto; transform: translate(-50%, -6px); }
  .tg-mega.is-s { width: 640px; }
  .tg-mega.is-m { width: 920px; }   
  .tg-nav-i.open > .tg-mega.is-s, .tg-nav-i.open > .tg-mega.is-m, :root:not(.js) .tg-nav-i:focus-within > .tg-mega.is-s, :root:not(.js) .tg-nav-i:focus-within > .tg-mega.is-m { transform: translate(-50%, 0); }
  .tg-mega.is-s .tg-mega-in, .tg-mega.is-m .tg-mega-in { border-top: 1px solid var(--line); border-radius: 12px; }
  .tg-mega.is-s .tg-mega-in { grid-template-columns: minmax(0, 1fr) 220px; }
  .tg-mega.is-m .tg-mega-in { grid-template-columns: minmax(0, 1fr) 240px; }
  
  .tg-mega.is-s .tg-mega-in.has-intro { grid-template-columns: 200px minmax(0, 1fr); }
  .tg-mega.is-m .tg-mega-in.has-intro { grid-template-columns: 190px minmax(0, 1fr) 210px; gap: 8px 26px; }
  .tg-mega.is-m .has-intro .tg-mega-cols { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 4px 22px; }
  .tg-mega.is-l .tg-mega-cols { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 24px; }
}


.tg-mega-intro { display: none; }
@media (min-width: 1100px) {
  .tg-mega-intro { display: flex; flex-direction: column; gap: 6px; align-self: stretch; padding: 12px; border-radius: 12px; background: var(--soft); }
  
  .tg-mega-art { display: block; flex: 1 0 auto; aspect-ratio: 2 / 1; max-height: 190px; margin: -2px -2px 4px; border-radius: 8px; background: var(--surface) center / cover no-repeat; filter: var(--art-filter); }
  
  #tg-mega-security .tg-mega-art { flex: none; }
  #tg-mega-security .tg-mega-go { margin-top: auto; }
}

.tg-lz { background-color: var(--soft); background-position: center; background-repeat: no-repeat; background-size: cover; }
.tg-nav-i.open .tg-lz, :root:not(.js) .tg-nav-i:focus-within .tg-lz { background-image: var(--l); }
:root[data-theme="dark"] .tg-nav-i.open .tg-lz, :root[data-theme="dark"]:not(.js) .tg-nav-i:focus-within .tg-lz { background-image: var(--d); }
@media (hover: hover) {
  .tg-nav-i:hover .tg-lz { background-image: var(--l); }
  :root[data-theme="dark"] .tg-nav-i:hover .tg-lz { background-image: var(--d); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-nav-i.open .tg-lz { background-image: var(--d); }
}
@media (prefers-color-scheme: dark) and (hover: hover) {
  :root:not([data-theme="light"]) .tg-nav-i:hover .tg-lz { background-image: var(--d); }
}

.tg-mega-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--blue-soft); color: var(--link-ink); font-size: 12px; font-style: normal; font-weight: 800; }
.tg-mega-col a:has(.tg-mega-num) { justify-content: flex-start; align-items: center; }
.tg-mega-num.is-mark { border-radius: 6px; font-size: 11.5px; }

.tg-mega-col.is-tiles, .tg-mega-col.is-stats, .tg-mega-col.is-wide { grid-column: 1 / -1; }
.tg-mega-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px !important; }
.tg-mega-tiles a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-align: center; }
.tg-mega-tiles a:hover { border-color: var(--brand); text-decoration: none; }
.tg-mega-dev { width: 56px; height: 40px; margin-bottom: 3px; background-color: transparent !important; background-size: contain !important; }

.tg-mega-col.is-wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }

.tg-mega-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px !important; }
.tg-mega-rail .tg-mega-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tg-mega .tg-mega-rail .tg-mega-stats a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; padding: 8px 10px; }   
.tg-mega-rail .tg-mega-stats b { font-size: 16px; }
.tg-mega-rail .tg-mega-stats span { font-size: 12.5px; white-space: nowrap; }
@media (min-width: 1100px) { .tg-mega.is-l .tg-mega-in:has(.tg-mega-rail .tg-mega-stats) { grid-template-columns: minmax(0, 1fr) 296px; } }   
.tg-mega .tg-mega-stats a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; margin: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tg-mega .tg-mega-stats a:hover { border-color: var(--brand); background: var(--surface); }
.tg-mega-stats b { color: var(--link-ink); font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tg-mega-stats b.is-ic { display: inline-flex; height: 24px; align-items: center; }
.tg-mega-stats span { color: var(--ink-2); font-size: 13px; font-weight: 600; }

.tg-mega-h { display: flex; align-items: center; gap: 6px; }
.tg-mega-hi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--blue-soft); color: var(--link-ink); }
.tg-mega-rail a.has-n { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tg-mega-col small, .tg-mega-rail small, .tg-mega-also small, .tg-mega-chips small { flex: none; display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11.5px; font-weight: 700; line-height: 1.5; text-align: center; }
.tg-mega-col a:hover small { background: var(--blue-soft); color: var(--link-ink); }
.tg-mega-rail small { background: var(--surface); }   
.tg-mega-ava { flex: none; width: 26px; height: 26px; margin-right: 8px; border-radius: 7px; background-color: var(--soft); background-size: contain; }
.tg-mega-col a:has(.tg-mega-ava) { align-items: center; }
.tg-mega-col a:has(.tg-mega-ava) > span { flex: 1; }
.tg-mega-tiles b { font-size: 14px; font-weight: 700; }
.tg-mega-tiles em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 500; }


.tg-mega-card a { display: flex; align-items: center; gap: 10px; padding: 0 0 10px !important; color: var(--ink) !important; font-weight: 650; }
.tg-mega-card b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.tg-mega-thumb { flex: none; display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 6px; filter: var(--art-filter); }
.tg-mega-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px !important; }
.tg-mega-covers a { display: block; padding: 0 !important; }
.tg-mega-covers .tg-lz { display: block; aspect-ratio: 1; border-radius: 8px; background-size: contain; background-color: var(--surface); }
.tg-mega-rail .tg-mega-h + ul + .tg-mega-h, .tg-mega-rail ul + .tg-mega-h { margin-top: 12px; }
.tg-mega-rail a.has-d { display: flex; flex-direction: column; }
.tg-mega-rail a.has-d em { color: var(--muted); font-size: 12px; font-style: normal; }
.tg-mega-it { color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.tg-mega-tx { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.tg-mega-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 9px 12px; border-radius: 10px;
  background: var(--primary); color: var(--on-brand); font-size: 14px; font-weight: 700; }
.tg-mega-go:hover { background: var(--primary-hover); color: var(--on-brand); text-decoration: none; }
.tg-mega-q { position: relative; display: flex; align-items: center; margin-top: 6px; }
.tg-mega-q svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.tg-mega-q input { width: 100%; height: 38px; padding: 0 10px 0 32px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); }
.tg-mega-q input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(42,171,238,.22); }

.tg-mega-col a.has-d { padding: 7px 8px; }
.tg-mega-col a.has-d span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tg-mega-col a.has-d em { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 500; line-height: 1.45; }

.tg-mega-also { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; }
.tg-mega-also b { margin-right: 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; }   
.tg-mega-also a { color: var(--ink-2); }
.tg-mega-also a:hover { color: var(--link); }
.tg-mega-stat { color: var(--muted); font-size: 13px; font-weight: 600; }
@media (max-width: 900px) { .tg-mnav-home.is-go { margin-bottom: 6px; background: var(--primary); color: var(--on-brand); } .tg-mnav-home.is-go svg { color: var(--on-brand); } }
@media (min-width: 1100px) and (hover: hover) { .tg-nav-i:hover > .tg-mega.is-s, .tg-nav-i:hover > .tg-mega.is-m { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .tg-mega, .tg-nav-i:hover > .tg-mega { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) { .tg-mega.is-s, .tg-mega.is-m, .tg-nav-i:hover > .tg-mega.is-s, .tg-nav-i:hover > .tg-mega.is-m { transform: translateX(-50%); } }
@media (max-width: 1099px) { .tg-mega-in { grid-template-columns: minmax(0, 1fr) 220px; padding: 20px 22px 14px; gap: 8px 24px; } .tg-mega-cols { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.tg-hsearch { position: relative; display: flex; align-items: center; flex: 0 1 200px; min-width: 120px; }
.tg-hsearch svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.tg-hsearch input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft);
  font: inherit; font-size: 14.5px; color: var(--ink); }
.tg-hsearch input:focus { outline: none; border-color: var(--link); background: var(--surface); box-shadow: 0 0 0 3px rgba(42,171,238,.22); }

.tg-theme { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--soft); color: var(--ink-2); cursor: pointer; }
.js .tg-theme { display: inline-flex; }
.tg-theme:hover { border-color: var(--line-2); color: var(--ink); }
.tg-theme .i-sun { display: none; }
.tg-theme .i-moon { display: inline-flex; }
:root[data-theme="dark"] .tg-theme .i-sun { display: inline-flex; }
:root[data-theme="dark"] .tg-theme .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-theme .i-sun { display: inline-flex; }
  :root:not([data-theme="light"]) .tg-theme .i-moon { display: none; }
}


.tg-footer { background: var(--soft); color: var(--muted); padding: 40px 0 44px; font-size: 14px; border-top: 1px solid var(--line); }
.tg-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.tg-footer .tg-brand { font-size: 16px; color: var(--ink); }
.tg-footer .tg-logo { width: 28px; height: 28px; box-shadow: none; }
.tg-footer-nav, .tg-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tg-footer-nav a, .tg-footer-links a { color: var(--ink-2); }
.tg-footer-nav a:hover, .tg-footer-links a:hover { color: var(--link); }
.tg-footer-links { padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 10px; }
.tg-footer-links a { font-weight: 700; }
.tg-footer-note { margin: 0; color: var(--muted); line-height: 1.65; }
.tg-footer-note b { color: var(--ink-2); }
@media (max-width: 640px) {   
  .tg-footer-nav, .tg-footer-links { gap: 0 18px; }
  .tg-footer-nav a, .tg-footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .tg-footer-links { padding-top: 8px; }
}


.tg-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--link-ink); letter-spacing: .01em; }
.tg-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.tg-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  background: var(--soft); border: 1px solid var(--line); padding: 2px 9px; border-radius: 6px; }
.tg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 20px; border-radius: 10px;
  font-weight: 700; font-size: 15.5px; white-space: nowrap; border: 1px solid transparent; background: var(--primary); color: var(--on-brand); }
.tg-btn:hover { text-decoration: none; }
.tg-btn.tone-primary { background: var(--primary); color: var(--on-brand); box-shadow: 0 1px 2px rgba(10,32,54,.18); }

.tg-btn.tone-amber, .tone-mint.tg-btn, .tg-btn.tone-mint { background: var(--surface); color: var(--link-ink); border-color: var(--line-2); }
.tg-btn.tone-ghost { background: var(--surface); color: var(--link-ink); border-color: var(--link); }
.tg-entry-card:hover .tg-btn.tone-primary { background: var(--primary-hover); }
.tg-entry-card:hover .tg-btn.tone-amber, .tg-entry-card:hover .tg-btn.tone-mint { border-color: var(--link); background: var(--blue-soft); }
.tg-note, .tg-empty { color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); padding: 14px 18px; border-radius: var(--r-m); font-size: 15px; }
.tg-count { color: var(--ink-2); font-size: 15px; }
.tg-crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.tg-crumb a { color: var(--muted); }
.tg-sec { margin-top: 60px; }
.tg-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tg-sec-h h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 23px; }
.tg-sec-h h2 i { width: 4px; height: 20px; border-radius: 2px; background: var(--brand); }
.tg-sec-h a { font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tg-sec-h a:hover { color: var(--link-ink); }



:root { --hero-bg: #F6FAFE; --hero-grid: rgba(10,40,80,.045); }
:root[data-theme="dark"] { --hero-bg: #070F1C; --hero-grid: rgba(255,255,255,.035); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-bg: #070F1C; --hero-grid: rgba(255,255,255,.035); } }
html, body { overflow-x: clip; }
.tg-hero { position: relative; isolation: isolate; margin: -28px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%); background: var(--hero-bg); }
.tg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 70% at 25% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 25% 40%, #000, transparent 75%); }
.tg-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
.tg-hero-kv { position: absolute; z-index: -2; top: 0; bottom: 0; right: max(-160px, calc((100% - 1200px) / 2 - 40px)); aspect-ratio: 3 / 2; min-height: 680px; pointer-events: none; }

.kv-stage { --mx: 0; --my: 0; --blend: normal; position: absolute; inset: 0; background: var(--hero-bg); isolation: isolate; }
.kvl { position: absolute; display: block; background: var(--l) center / contain no-repeat; mix-blend-mode: var(--blend);
  transform: translate(calc(var(--mx) * var(--z) * 1px), calc(var(--my) * var(--z) * 1px)); transition: transform .8s cubic-bezier(.2,.7,.2,1); will-change: transform, translate;
  filter: drop-shadow(0 22px 26px rgba(14, 60, 100, .16)); }
:root[data-theme="dark"] .kvl { background-image: var(--d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kvl { background-image: var(--d); } }
:root[data-theme="dark"] .kvl { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .45)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kvl { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .45)); } }
.kvl-book    { --z: 14; left: 55%; top: 33.6%; width: 26%; animation: kv-book 9s ease-in-out infinite; }   /* tgway: 3D logo block (0.96:1) in place of pe.kr's book - same height and centre, 2026-10-12 */
.kvl-plane   { --z: 42; left: 79.8%; top: 23.5%; width: 14.9%; animation: kv-plane 7s ease-in-out infinite; }
.kvl-bubble1 { --z: 30; left: 42%; top: 26.2%; width: 11.8%; animation: kv-bub 8s ease-in-out -1s infinite; }
.kvl-bubble2 { --z: 36; left: 85.4%; top: 59.2%; width: 11.6%; animation: kv-bub 8s ease-in-out -5s infinite reverse; }

.kv-glow { position: absolute; left: 42%; top: 15%; width: 52%; aspect-ratio: 1; border-radius: 50%; transform: translate(calc(var(--mx) * 6px), calc(var(--my) * 6px));
  background: radial-gradient(closest-side, rgba(42,171,238,.26), rgba(42,171,238,.10) 55%, transparent 100%); filter: blur(8px); animation: kv-glow 9s ease-in-out infinite; }
:root[data-theme="dark"] .kv-glow { background: radial-gradient(closest-side, rgba(42,171,238,.55), rgba(31,122,192,.22) 55%, transparent 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-glow { background: radial-gradient(closest-side, rgba(42,171,238,.55), rgba(31,122,192,.22) 55%, transparent 100%); } }
.kv-floor { position: absolute; left: 50%; top: 76%; width: 36%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,50,100,.20), transparent);
  animation: kv-floor 9s ease-in-out infinite; }
:root[data-theme="dark"] .kv-floor { background: radial-gradient(closest-side, rgba(42,171,238,.32), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-floor { background: radial-gradient(closest-side, rgba(42,171,238,.32), transparent); } }
@keyframes kv-book  { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: -1.2deg; } }
@keyframes kv-plane { 0%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: 18px -16px; rotate: -3deg; } 70% { translate: 6px -4px; rotate: 1.5deg; } }
@keyframes kv-bub   { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -14px; rotate: 2deg; } }
@keyframes kv-glow  { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes kv-floor { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .65; scale: .88; } }
@media (prefers-reduced-motion: reduce) { .kvl, .kv-glow, .kv-floor { animation: none; transition: none; } }

.kvl-book { z-index: 2; } .kvl-bubble1 { z-index: 3; } .kvl-bubble2 { z-index: 5; transform-origin: 12% 88%; } .kvl-plane { z-index: 6; }
.kv-stage.is-live .kvl, .kv-stage.is-live .kv-glow, .kv-stage.is-live .kv-floor { animation: none; transition: none; }
.kv-trail { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kv-ring { position: absolute; z-index: 4; left: 85.4%; top: 59.2%; width: 11.6%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(42,171,238,.55); opacity: 0; pointer-events: none; }
:root[data-theme="dark"] .kv-ring { border-color: rgba(120,205,250,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-ring { border-color: rgba(120,205,250,.6); } }

.kv-shine { position: absolute; inset: 0; overflow: hidden; -webkit-mask: var(--l) center / contain no-repeat; mask: var(--l) center / contain no-repeat; }
/* tgway (2026-10-14): on phones (<=900px) the key visual sits below the hero text, outside the first screen, yet its layer images
   were fetched at high priority and competed with the CSS and the Inter font for the mobile LCP (the hero sub-line). Until the
   page has loaded (.kv-ready, inline script in pages/home), the layers have no image; the boxes keep their aspect-ratio, so nothing
   moves when the images arrive. Without JS (no .js) nothing changes; desktop unchanged */
@media (max-width: 900px) {
  .js .kv-stage:not(.kv-ready) .kvl { background-image: none !important; }
  .js .kv-stage:not(.kv-ready) .kv-shine { display: none; }
}
:root[data-theme="dark"] .kv-shine { -webkit-mask-image: var(--d); mask-image: var(--d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-shine { -webkit-mask-image: var(--d); mask-image: var(--d); } }
.kv-shine i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; transform: translateX(-120%) skewX(-18deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 50%, transparent); mix-blend-mode: soft-light; }
:root[data-theme="dark"] .kv-shine i { mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(160,220,255,.38) 50%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-shine i { mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(160,220,255,.38) 50%, transparent); } }

.kv-dot { position: absolute; width: 13.4%; aspect-ratio: 1; margin: -6.7% 0 0 -6.7%; border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, #fff 0 38%, #EEF0F4 70%, #DADFE7 100%); box-shadow: 0 1px 2px rgba(8,50,90,.25); }
.kv-dot:nth-child(1) { left: 35.5%; top: 50.8%; } .kv-dot:nth-child(2) { left: 54.7%; top: 49.6%; } .kv-dot:nth-child(3) { left: 73.9%; top: 48.3%; }
.tg-hero-in { position: relative; z-index: 1; max-width: 620px; min-height: 680px; padding: 92px 0 128px; display: flex; flex-direction: column; justify-content: center; }
.tg-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; font-size: 13.5px; font-weight: 650;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line); box-shadow: 0 6px 18px -10px rgba(10,50,100,.25); }
.tg-hero-eyebrow b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--brand-grad); }
.tg-hero h1 { margin: 22px 0 18px; font-size: 64px; line-height: 1.1; letter-spacing: -.05em; font-weight: 800; color: var(--ink); }
.tg-hero h1 em { font-style: normal; background: linear-gradient(100deg, #2AABEE 0%, #1F7AC0 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg-hero-sub { margin: 0 0 32px; max-width: 540px; font-size: 19px; line-height: 1.6; font-weight: 450; color: var(--ink-2); }
.tg-hero .tg-bigsearch { max-width: 580px; margin: 0; }
.tg-hero .tg-bigsearch input { height: 66px; border-radius: 20px; border-color: rgba(10,50,100,.08); background: #fff; color: #0A2036;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 48px -24px rgba(20,90,160,.45), 0 2px 6px rgba(10,40,80,.06); }
.tg-hero .tg-bigsearch input::placeholder { color: #7D8A99; }
.tg-hero .tg-bigsearch > svg { left: 22px; z-index: 1; color: #66768A; }
.tg-hero .tg-bigsearch button { width: 50px; height: 50px; border-radius: 14px; right: 8px; }
.tg-hero .tg-popular { max-width: 600px; }
.tg-hero .tg-popular a { background: color-mix(in srgb, var(--surface) 75%, transparent); }
.tg-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 550; color: var(--muted); }
.tg-hero-trust li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.tg-hero-trust svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: var(--link); background: var(--blue-soft); }

:root[data-theme="dark"] .tg-hero h1 em { background-image: linear-gradient(100deg, #9BE0FF 0%, #2AABEE 55%, #1F8FD8 100%); }
:root[data-theme="dark"] .tg-hero .tg-bigsearch input { background: rgba(255,255,255,.06); color: #EEF4FA; border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(42,171,238,.10), 0 30px 60px -30px rgba(42,171,238,.55); }
:root[data-theme="dark"] .tg-hero .tg-bigsearch input::placeholder { color: #7F92A6; }
:root[data-theme="dark"] .tg-hero .tg-bigsearch > svg { color: #8497AB; }
:root[data-theme="dark"] .tg-hero .tg-popular a, :root[data-theme="dark"] .tg-hero-eyebrow { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.11); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-hero h1 em { background-image: linear-gradient(100deg, #9BE0FF 0%, #2AABEE 55%, #1F8FD8 100%); }
  :root:not([data-theme="light"]) .tg-hero .tg-bigsearch input { background: rgba(255,255,255,.06); color: #EEF4FA; border-color: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(42,171,238,.10), 0 30px 60px -30px rgba(42,171,238,.55); }
  :root:not([data-theme="light"]) .tg-hero .tg-bigsearch input::placeholder { color: #7F92A6; }
  :root:not([data-theme="light"]) .tg-hero .tg-bigsearch > svg { color: #8497AB; }
  :root:not([data-theme="light"]) .tg-hero .tg-popular a, :root:not([data-theme="light"]) .tg-hero-eyebrow { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.11); }
}
.tg-bigsearch { position: relative; display: flex; align-items: center; max-width: 720px; margin: 0 auto; }
.tg-bigsearch > svg { position: absolute; left: 20px; color: var(--muted); pointer-events: none; }
.tg-bigsearch input { width: 100%; height: 62px; padding: 0 72px 0 56px; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--surface);
  font: inherit; font-size: 17px; color: var(--ink); }
.tg-bigsearch input::placeholder { color: var(--muted); }
.tg-bigsearch input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(42,171,238,.22); }
.tg-bigsearch button { position: absolute; right: 7px; width: 48px; height: 48px; border: 0; border-radius: 12px; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #2AABEE, #1F8FD8); box-shadow: 0 8px 18px -8px rgba(31,122,192,.8); }
.tg-bigsearch button:hover { background: linear-gradient(180deg, #229ED9, #1F7AC0); }
.tg-bigsearch.is-inline { margin: 12px 0 0; }
.hb-search { max-width: 560px; margin-top: 18px; }
.hb-problems { margin-top: 40px; }
.tg-popular { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tg-popular a { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.tg-popular a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }


:root { --entry-bg: #FFFFFF; }
:root[data-theme="dark"] { --entry-bg: #0F1A2B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --entry-bg: #0F1A2B; } }
.tg-entry { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; margin-top: -64px; }
.tg-entry-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; color: var(--ink);
  background: var(--entry-bg); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10,40,80,.04), 0 24px 48px -32px rgba(10,50,100,.35);
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.tg-entry-card:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--blue-line); box-shadow: 0 32px 60px -30px rgba(20,90,160,.45); }
.tg-entry-art { display: block; height: 200px; background: var(--ic-l) center / cover no-repeat; border-bottom: 1px solid var(--line); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tg-entry-card:hover .tg-entry-art { transform: scale(1.04); }

:root[data-theme="dark"] .tg-entry-art { background-image: var(--ic-d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg-entry-art { background-image: var(--ic-d); } }
.tg-entry-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 20px 26px 24px; background: var(--entry-bg); }
.tg-entry-body .tg-kicker { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--link); }
.tg-entry-body b { margin: 6px 0 8px; font-size: 24px; line-height: 1.3; letter-spacing: -.035em; font-weight: 750; }
.tg-entry-body small { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-bottom: 18px; padding-right: 48px; }
.tg-entry-body .tg-btn { margin-top: auto; align-self: flex-start; height: 46px; padding: 0 20px; border-radius: var(--r-m); color: #fff;
  background: var(--band);    box-shadow: 0 10px 22px -10px rgba(31,122,192,.8); }
.tg-entry-go { position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  color: var(--ink-2); background: var(--soft); transition: .25s; }
.tg-entry-card:hover .tg-entry-go { color: #fff; background: linear-gradient(180deg, #2AABEE, #1F8FD8); }
@media (prefers-reduced-motion: reduce) { .tg-entry-art { transition: none; } .tg-entry-card:hover .tg-entry-art { transform: none; } }

@media (max-width: 1099px) {
  .tg-hero h1 { font-size: 52px; }
  .tg-hero-in { max-width: 540px; }
  .tg-hero-kv { right: -220px; }
}

@media (min-width: 901px) and (max-width: 1279px) {
  .tg-hero-kv { --kvw: min(1058px, calc((100% - 608px) / .55), calc((100% - 644px) / .479));
    top: 50%; bottom: auto; min-height: 0; width: var(--kvw); translate: 0 -50%; right: calc(32px - var(--kvw) * .03); }
}
@media (min-width: 901px) and (max-width: 1099px) {   
  .tg-hero-kv { --kvw: min(1058px, calc((100% - 547px) / .55), calc((100% - 604px) / .479)); }
}
@media (max-width: 900px) {
  .tg-hero { display: flex; flex-direction: column; }
  .tg-hero-in { order: 1; min-height: 0; max-width: none; padding: 40px 0 0; }
  .tg-hero-kv { order: 2; position: relative; top: auto; bottom: auto; right: auto; width: 150%; min-height: 0; aspect-ratio: 3 / 2; margin: 0 0 -8% -50%; }
  .tg-hero::before { height: 90px; }
  .tg-hero h1 { font-size: 42px; }
  .tg-hero-sub { font-size: 17px; margin-bottom: 24px; }
  .tg-hero-trust { margin-top: 22px; }
  .tg-entry { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: -48px; }
  .tg-entry-card { flex-direction: row; }
  .tg-entry-art { flex: 0 0 38%; height: auto; min-height: 150px; border-bottom: 0; border-right: 1px solid var(--line); }
  .tg-entry-body { padding: 16px 18px 18px; }
  .tg-entry-body small { margin-bottom: 12px; padding-right: 40px; }
  .tg-entry-body b { font-size: 20px; margin: 4px 0 4px; }
  .tg-entry-go { right: 18px; bottom: auto; top: 50%; margin-top: -22px; }
}
@media (max-width: 640px) {
  .tg-hero h1 { font-size: 34px; }
  .tg-hero-in { padding-top: 28px; }
  .tg-hero-eyebrow { font-size: 12.5px; height: 30px; }
  .tg-hero .tg-bigsearch input { height: 58px; padding-left: 50px; font-size: 16px; border-radius: 16px; }
  .tg-hero .tg-bigsearch > svg { left: 17px; }
  .tg-hero .tg-bigsearch button { width: 44px; height: 44px; border-radius: 12px; }
  .tg-popular a { font-size: 13.5px; padding: 6px 12px; }
  .tg-hero-trust { font-size: 13px; gap: 6px 14px; }
  .tg-entry-art { flex-basis: 34%; min-height: 128px; }
  .tg-entry-body { padding: 14px 14px 16px; }
  .tg-entry-body b { font-size: 18px; }
  .tg-entry-body small { font-size: 14px; }
  .tg-entry-body .tg-btn { height: 40px; font-size: 14.5px; padding: 0 16px; }
}




.tg-problems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tg-problems a { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); background: var(--surface); }
.tg-problems a:hover { border-color: var(--link); box-shadow: var(--sh-2); text-decoration: none; }
.tg-problems b { font-size: 15.5px; line-height: 1.45; font-weight: 700; }
.tg-dot { flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--blue-soft); border: 1px solid var(--blue-line); position: relative; }
.tg-dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--brand); }


.tg-mag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tg-mcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; }
.tg-mcard:hover { text-decoration: none; border-color: var(--line-2); box-shadow: var(--sh-2); }
.tg-mcard-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--art-bg); overflow: hidden; }
.tg-mcard-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-ph-ic { color: var(--navy-mute); display: inline-flex; }

.tg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.tg-tag { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; background: rgba(8,18,40,.78);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .01em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tg-tag-auto { left: 12px; top: 12px; }
.tg-tag-auto i { width: 6px; height: 6px; border-radius: 50%; background: #FF5A5F; }
.tg-dur { right: 12px; bottom: 12px; font-variant-numeric: tabular-nums; }
.tg-dur svg { margin-left: -2px; }
@media (prefers-reduced-motion: reduce) { .tg-vid, .tg-tag-auto { display: none; } }
.tg-mcard-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 18px; flex: 1; }
.tg-mcard-body b { font-size: 17px; line-height: 1.45; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-mcard-body small { font-size: 15px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tg-mcard-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); margin-top: auto; }
.tg-mcard-meta span + span::before { content: "·"; margin: 0 7px; }
.tg-mcard.is-feature { grid-column: 1 / -1; flex-direction: row; }
.tg-mcard.is-feature .tg-mcard-art { flex: 0 0 52%; aspect-ratio: 16 / 9; }
.tg-mcard.is-feature .tg-mcard-body { justify-content: center; padding: 28px 36px; gap: 12px; }
.tg-mcard.is-feature b { font-size: 27px; line-height: 1.35; }
.tg-mcard.is-ph .tg-mcard-body b { color: var(--ink-2); }


.tg-tcard-art { display: block; width: 84px; height: 84px; margin: -10px 0 -6px -10px; border-radius: var(--r-m); overflow: hidden; background: var(--art-bg); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.tg-tcard:hover .tg-tcard-art { transform: translateY(-3px) scale(1.04); }
.tg-tcard:has(.tg-tcard-art) { background: linear-gradient(180deg, var(--art-bg), var(--surface) 60%); }
.tg-tcard-art img { display: block; width: 100%; height: 100%; object-fit: cover; }


.mz-demo { margin: 18px 0 0; padding: 8px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink); font-size: 13.5px; font-weight: 600; text-align: center; }
.mc { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--ink); }
.mc:hover { text-decoration: none; }
.mc-art { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--thumb-line); }   
.mc-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mc:hover .mc-art img { transform: scale(1.045); }
.mc-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #4FB8EE; opacity: .7; }   
.mc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--link); }
.mc-title { font-size: 17px; line-height: 1.42; font-weight: 700; letter-spacing: -.025em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.mc:hover .mc-title { color: var(--link); }
.mc-desc { font-size: 15px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 0; font-size: 12.5px; color: var(--muted); }
.mc-meta span + span::before { content: "·"; margin: 0 6px; }
.mc-meta:empty { display: none; }
.mc-lg .mc-title { font-size: 28px; line-height: 1.3; letter-spacing: -.04em; font-weight: 800; }
.mc-lg .mc-art { border-radius: var(--r-l); }
.mc-sm { flex-direction: row; align-items: center; gap: 14px; }
.mc-sm .mc-art { flex: 0 0 112px; aspect-ratio: 16 / 9; border-radius: var(--r-m); }

.mc-sm .mc-art:not(.is-poster) img { transform: scale(1.3); }
.mc-sm:hover .mc-art:not(.is-poster) img { transform: scale(1.36); }
.mc .mc-art.is-poster img, .mc:hover .mc-art.is-poster img { transform: none; }
/* tgway fork: news thumbnails = official blog art with a soft white vignette - no frame, and no navy fill peeking at the rounded edge (2026-10-12) */
.mc .mc-art.is-news { border: 0; background: transparent; }
.mc-sm .mc-title { font-size: 15px; }
.mc-sm .mc-kicker { font-size: 12px; }
.mc-row { flex-direction: row; align-items: center; gap: 18px; }
.mc-row .mc-art { flex: 0 0 44%; }
.mc-row .mc-title { font-size: 20px; line-height: 1.38; }
.mc-row .mc-desc { -webkit-line-clamp: 2; }





.mz-band-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mz-band-in:has(> .mz-band-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; }
.mz-band-in > .mz-steps { grid-column: 1 / -1; }
.mz-band-art { justify-self: end; margin-block: -76px -36px; pointer-events: none; }   
.mz-band-art img { display: block; width: auto; max-width: 100%; height: 360px; object-fit: contain; mix-blend-mode: screen; }
.mz-band-copy { max-width: 600px; }
.mz-band h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.25; letter-spacing: -.04em; color: #fff; }
.mz-band h2 em { font-style: normal; color: #fff; }
.mz-band p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.65; color: #fff; max-width: 520px; }
.mz-band-cta { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: var(--r-m); font-weight: 700; font-size: 16px; color: #155A91;
  background: #fff; box-shadow: 0 12px 28px -14px rgba(4,30,60,.6); }
.mz-band-cta:hover { text-decoration: none; background: #EAF6FD; }
.mz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mz-steps li { margin: 0; }
.mz-steps a { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 56px; padding: 10px 14px 10px 10px; border-radius: var(--r-m); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35;
  background: rgba(8,40,72,.28); border: 1px solid rgba(255,255,255,.2); transition: background .2s, border-color .2s; }   
.mz-steps a:hover { text-decoration: none; background: rgba(8,40,72,.44); border-color: rgba(255,255,255,.5); }
.mz-steps b { flex: 0 0 30px; height: 30px; border-radius: var(--r-s); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #1A6BAA; background: #fff; }
.mz-steps span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.mz-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.mz-split.is-solo { grid-template-columns: minmax(0, 1fr); }
.mz-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.mz-rank li { margin: 0; border-bottom: 1px solid var(--line); }
.mz-rank a { display: flex; align-items: center; gap: 16px; padding: 16px 4px; color: var(--ink); }
.mz-rank a:hover { text-decoration: none; }
.mz-rank a:hover b { color: var(--link); }
.mz-rank-n { flex: 0 0 38px; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--link-ink); }   
.mz-rank li:nth-child(n+4) .mz-rank-n { color: var(--muted); }
.mz-rank b { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: -.02em; transition: color .2s; }
.mz-rank svg { color: var(--muted); }
.mz-side { --link: var(--link-ink); display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--r-l); background: var(--soft); border: 1px solid var(--line); }
.mz-side-h { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.mz-side .mc-sm .mc-art { flex-basis: 88px; }



.hm-sec { position: relative; padding-block: var(--sp-sec); }
.hm-sec.is-alt, .hm-sec.is-band, .hm-sec.is-stage { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.hm-sec.is-alt { background: var(--sec-alt); border-block: 1px solid var(--sec-line); --link: var(--link-ink); }   
.hm-sec.is-band { isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(36% 70% at 100% 0%, var(--band-glow), transparent 70%), var(--band); }
.hm-sec.is-stage { color: var(--stage-ink); background: var(--stage); border-block: 1px solid var(--stage-line); }
main.tg-wrap:has(> .hm-sec:last-child) { padding-bottom: 0; }   
.hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--sp-head); }
.hm-head-t { min-width: 0; }
.hm-k { display: block; margin-bottom: 6px; font-size: var(--t-meta); font-weight: 800; letter-spacing: .04em; color: var(--link-ink); }
.hm-head h2 { margin: 0; font-size: var(--t-h2); line-height: 1.3; letter-spacing: -.035em; font-weight: 800; color: var(--ink); }
.hm-desc { margin: 6px 0 0; font-size: var(--t-s); line-height: 1.6; color: var(--muted); }
.hm-more { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; color: var(--link-ink); white-space: nowrap; }
.hm-more:hover { color: var(--link-hover); }
.hm-sub { display: flex; align-items: center; gap: 12px; margin: calc(var(--sp-gap) * 2) 0 var(--sp-head); font-size: var(--t-s); font-weight: 800; color: var(--ink-2); }
.hm-sub::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.is-band .hm-k { color: #fff; margin-bottom: 12px; }
.is-stage .hm-k { color: var(--stage-mute); }
.is-stage .hm-head h2 { color: #fff; }
.is-stage .hm-more { color: var(--stage-ink); }
.is-stage .hm-more:hover { color: #fff; }

.hm-sec .mc-title { min-height: calc(2em * 1.42); }   
.hm-sec .mc-lg .mc-title { font-size: var(--t-l); line-height: 1.3; min-height: calc(2em * 1.3); -webkit-line-clamp: 2; }
.hm-sec .mc-lg .mc-desc { -webkit-line-clamp: 2; }
.hm-sec .mc-md .mc-title { font-size: var(--t-m); }

.mc-s { gap: 14px; }
.mc-s .mc-art { flex: 0 0 96px; }
.mc-s .mc-body { gap: 4px; }
.mc-s .mc-title { font-size: var(--t-s); }

.hm-sec .mc-s .mc-title { min-height: 0; -webkit-line-clamp: 1; }
.hm-board .mc-s .mc-title { -webkit-line-clamp: 2; }
.hm-split > .mc-lg .mc-title { min-height: 0; }   
.mc-s .tg-dur { right: 4px; bottom: 4px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
.is-alt .mc-s, .is-alt .hm-cards .mc-md { padding: var(--sp-row); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }   
.is-alt .mc-s:hover, .is-alt .hm-cards .mc-md:hover { border-color: var(--link); text-decoration: none; }

.hm-g2, .hm-g4, .hm-g5 { display: grid; gap: var(--sp-gap); }
.hm-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-row) var(--sp-gap); }
.hm-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hm-rows { display: grid; gap: var(--sp-row); }

.hm-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--sp-gap) * 1.5); align-items: stretch; }
.hm-split.is-solo { grid-template-columns: minmax(0, 1fr); }
.hm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--n, 6), minmax(var(--row-s), 1fr)); }
.hm-list li { display: flex; align-items: center; margin: 0; border-top: 1px solid var(--line); }
.hm-list li:first-child { border-top: 0; }
.hm-list li > .mc { flex: 1; }

.hm-tile { display: flex; align-items: center; gap: 12px; min-height: var(--row-s); padding: var(--sp-row) 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); transition: border-color .15s, box-shadow .15s; }
a.hm-tile:hover { text-decoration: none; border-color: var(--link); box-shadow: var(--sh-2); }
.hm-tile b { font-size: var(--t-s); line-height: 1.42; font-weight: 700; letter-spacing: -.02em; }
.hm-tile small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.hm-tile-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }   
.hm-tile-art { flex: 0 0 auto; display: block; overflow: hidden; border-radius: var(--r-m); background: var(--art-bg); }
.hm-tile-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-tile-ic { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--brand-grad); color: #fff; }

.hm-tile.is-os { flex-direction: column; align-items: stretch; gap: var(--sp-row); padding: 16px; }
.hm-tile-top { display: flex; align-items: center; gap: 12px; }
.is-os .hm-tile-art { width: 64px; height: 48px; }
.is-os .hm-tile-t b { font-size: 16px; }
.hm-os-get { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: var(--r-m); background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--link-ink); font-size: 14.5px; font-weight: 700; }
.hm-os-get:hover { background: var(--primary); border-color: var(--primary); color: var(--on-brand); text-decoration: none; }
.hm-os-how { align-self: center; font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

.hm-ranks { list-style: none; margin: 0; padding: 0; gap: var(--sp-row) var(--sp-gap); }
.hm-ranks li { margin: 0; display: flex; }
.hm-ranks .hm-tile { flex: 1; }
.hm-rank-n { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--primary); color: var(--on-brand); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hm-ranks li:nth-child(n+4) .hm-rank-n { background: var(--blue-soft); color: var(--link-ink); }
.is-rank b { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-rank svg { flex: 0 0 auto; color: var(--muted); }

.hm-tile.is-topic { min-height: 96px; gap: 14px; }
.is-topic .hm-tile-art { width: 56px; height: 56px; }
.is-topic .hm-tile-t b { font-size: var(--t-m); }

.hm-sec.is-stage { --ink: #FFFFFF; --muted: var(--stage-mute); --link: #8ED0F8; --line: rgba(255,255,255,.12); }
.hm-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-gap); align-items: start; }
.hm-tips.has-lead > .mc-lg { grid-column: span 2; grid-row: span 2; }
.hm-tips.has-lead > .mc-md .mc-kicker { display: none; }   

.hm-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-gap); }
.hm-bcol { display: flex; flex-direction: column; min-width: 0; }
.hm-bhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 var(--sp-row); padding-bottom: var(--sp-row); border-bottom: 2px solid var(--ink); font-size: var(--t-s); font-weight: 800; }
.hm-bhead h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.hm-bhead a { color: var(--ink); white-space: nowrap; }
.hm-bhead i { font-style: normal; }
.hm-bhead a span { margin-left: 2px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-bhead a:hover { color: var(--link-ink); text-decoration: none; }
.hm-bhead .hm-bextra { font-size: 13px; font-weight: 700; color: var(--link-ink); }
.hm-brows { flex: 1; display: grid; grid-auto-rows: 1fr; }   
.hm-brows > * { min-height: var(--row-s); padding: var(--sp-row) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.hm-brows > :first-child { border-top: 0; }
.hm-brows > a.hm-tile:hover { box-shadow: none; }
.hm-brows > a:hover b { color: var(--link); }
.hm-brows .mc-s { align-items: center; }
.hm-brows .hm-tile b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-stk .hm-tile-art { width: 54px; height: 54px; background: var(--soft); }
.is-stk .hm-tile-art img { object-fit: contain; padding: 4px; }
.hm-avs { flex: 0 0 auto; display: flex; }
.hm-avs .ch-av { box-shadow: 0 0 0 2px var(--bg); }
.hm-avs .ch-av + .ch-av { margin-left: -10px; }

.hm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: calc(var(--sp-gap) * 2); align-items: stretch; }
.hm-col { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--sp-row); min-width: 0; }
.hm-col .hm-head { margin-bottom: calc(var(--sp-head) - var(--sp-row)); }
.hm-col > .hm-g2 { margin-bottom: calc(var(--sp-head) - var(--sp-row)); }
.hm-col .hm-rows { display: contents; }
.hm-col .mc-s .mc-title { min-height: 0; }

#home-howto { isolation: isolate; overflow: hidden; }
#home-howto::before, #home-howto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#home-howto::before { background-image: linear-gradient(var(--sec-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sec-grid) 1px, transparent 1px); background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 25%, transparent 75%); }
#home-howto::after { background: radial-gradient(32% 55% at 22% 0%, var(--sec-glow), transparent 70%), radial-gradient(32% 55% at 78% 0%, var(--sec-glow), transparent 70%); }
.hm-col > :not(.hm-deco) { position: relative; z-index: 1; }
.hm-deco { position: absolute; z-index: 0; top: -64px; right: 56px; width: 184px; aspect-ratio: 1; pointer-events: none;
  background: var(--l) center / contain no-repeat; mix-blend-mode: var(--deco-blend);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  animation: hm-float 7s ease-in-out infinite; }
.hm-col + .hm-col .hm-deco { animation-delay: -3.5s; }
:root[data-theme="dark"] .hm-deco { background-image: var(--d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hm-deco { background-image: var(--d); } }
@keyframes hm-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .hm-deco { animation: none; } }
@media (max-width: 1100px) {
  .is-os .hm-tile-top { flex-direction: column; text-align: center; }
  .is-os .hm-tile-t { align-items: center; }
}
@media (max-width: 900px) {
  .hm-g4, .hm-tips, .hm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tips.has-lead > .mc-lg { grid-row: auto; }
}
@media (max-width: 760px) {
  .hm-split, .hm-two, .hm-g2 { grid-template-columns: minmax(0, 1fr); }
  .hm-col + .hm-col { margin-top: calc(var(--sp-gap) * 2); }
  .hm-sec .mc-s .mc-title { -webkit-line-clamp: 2; }
  .hm-list { grid-template-rows: none; }
  .hm-list li { padding: var(--sp-row) 0; }
  .hm-list li:first-child { border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .hm-list li:nth-child(n+4) { display: none; }
  .hm-g5 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-row); }
  .hm-tile.is-os { flex-direction: row; align-items: center; padding: var(--sp-row) 12px; }
  .is-os .hm-tile-top { flex-direction: row; text-align: left; flex: 1; min-width: 0; }
  .is-os .hm-tile-t { align-items: flex-start; }
  .is-os .hm-tile-art { width: 48px; height: 36px; }
  .hm-os-get { margin-top: 0; padding: 0 12px; }
  .hm-os-get span { display: none; }
  .hm-os-get::after { content: "Get"; }
  .hm-os-how { display: none; }
  #home-dl .hm-g2 > :nth-child(n+3) { display: none; }
  
  .hm-ranks { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
  .hm-ranks .hm-tile { border: 0; border-radius: 0; min-height: 60px; }
  .hm-ranks li + li .hm-tile { border-top: 1px solid var(--line); }
  .hm-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-row); }
  .hm-cards .mc-md { flex-direction: row; align-items: center; gap: 14px; }
  .hm-cards .mc-md .mc-art { flex: 0 0 96px; }
  .hm-cards .mc-md .mc-art:not(.is-poster) img { transform: scale(1.3); }
  .hm-cards .mc-md .mc-kicker { display: none; }
  .hm-cards .mc-md .mc-title { font-size: var(--t-s); }
  .hm-cards .mc-md .tg-dur { right: 4px; bottom: 4px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
  #home-fix .hm-cards > :nth-child(n+3) { display: none; }
  
  .hm-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-gap) var(--sp-row); }
  .hm-tips.has-lead > .mc-lg { grid-column: 1 / -1; }
  .hm-tips.has-lead > :nth-child(n+4), .hm-tips > :nth-child(n+5) { display: none; }
  .hm-tips .mc-md .mc-title { font-size: var(--t-s); }
  .hm-tips .mc-md .tg-dur { right: 6px; bottom: 6px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
  .hm-tips .mc-lg .mc-desc { display: none; }
  #home-howto .hm-rows > :nth-child(n+2) { display: none; }
  .hm-deco { top: -36px; right: 48px; width: 112px; }
  .hm-board { grid-template-columns: minmax(0, 1fr); gap: calc(var(--sp-gap) * 1.5); }
  .hm-brows > :nth-child(n+3) { display: none; }
  .hm-brows { grid-auto-rows: auto; }
  .hm-brows .hm-tile b, .hm-brows .mc-title { min-height: 0; }   
  .is-topic .hm-tile-art { width: 40px; height: 40px; }
  .hm-tile.is-topic { min-height: 72px; gap: 10px; padding: var(--sp-row); }
}
.mz-soon { display: flex; flex-direction: column; gap: 8px; min-height: 200px; justify-content: center; padding: 28px; border-radius: var(--r-l); color: var(--ink);
  background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--soft); border: 1px dashed var(--line-2); }
.mz-soon:hover { text-decoration: none; border-color: var(--brand); }
.mz-soon b { font-size: 19px; letter-spacing: -.03em; }
.mz-soon small { font-size: 15px; color: var(--muted); }
.mz-soon span { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--link); }

.mz-kw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: calc(var(--sp-gap) * 2); padding-top: var(--sp-gap); border-top: 1px solid var(--line); }
.mz-kw-k { margin-right: 6px; font-size: 14px; font-weight: 800; color: var(--ink); }
.mz-kw a { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.mz-kw a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
@media (max-width: 1099px) {
  .mz-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mz-band-in { gap: 32px; }
}
@media (max-width: 900px) {
  .mz-split, .mz-band-in, .mz-band-in:has(> .mz-band-art) { grid-template-columns: minmax(0, 1fr); }
  .mz-band-art { display: none; }   
  .mc-lg .mc-title { font-size: 24px; }
  .mz-band h2 { font-size: 28px; }
  .mz-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }   
  .mz-rank { grid-template-columns: minmax(0, 1fr); }
  .mz-rank-n { font-size: 26px; flex-basis: 30px; }
  .mc-sm .mc-art { flex-basis: 96px; }
  .mc-row { flex-direction: column; align-items: stretch; }
  .mc-row .mc-art { flex: none; }
  .mz-band h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .mc-art img { transition: none; } .mc:hover .mc-art img { transform: none; } }


.tg-tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tg-tcard { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.tg-tcard:hover { text-decoration: none; border-color: var(--link); box-shadow: var(--sh-2); }
.tg-tcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tg-tcard-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-m); background: var(--brand-grad); color: #fff; }
.tg-tcard-n { font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); padding: 1px 9px; border-radius: 6px; }
.tg-tcard b { font-size: 18px; letter-spacing: -.02em; }
.tg-tcard small { font-size: 14px; color: var(--muted); line-height: 1.55; }


.tg-chlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.tg-chlist li { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--soft); }
.tg-ch-av { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.tg-ch-t { display: flex; flex-direction: column; line-height: 1.4; }
.tg-ch-t b { font-size: 15px; color: var(--ink-2); }
.tg-ch-t small { font-size: 13px; color: var(--muted); }





.tg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 16px 0 8px; }
.tg-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; color: var(--ink); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.tg-card:hover { border-color: var(--link); box-shadow: var(--sh-2); text-decoration: none; }
.tg-card-board { font-size: 12.5px; color: var(--link-ink); font-weight: 700; }
.tg-card-title { font-size: 16px; line-height: 1.45; }
.tg-card-meta { font-size: 12.5px; color: var(--muted); }
.tg-phead { margin-bottom: 20px; }
.tg-phead-sub { font-weight: 400; color: var(--ink-2); font-size: .7em; }
.tg-phead-lead { color: var(--ink-2); font-size: 17px; max-width: 760px; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tg-chips a { border: 1px solid var(--line); border-radius: 8px; padding: 5px 13px; font-size: 14px; color: var(--ink); background: var(--surface); }
.tg-chips a:hover { border-color: var(--link); text-decoration: none; }
.tg-chips a.on { background: var(--primary); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.tg-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 0; }
.tg-pager a, .tg-pager span { min-width: 38px; text-align: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.tg-pager .on { background: var(--primary); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.tg-list { padding-left: 20px; }
.tg-list li { margin: 4px 0; }


.lh { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 32px; align-items: center; overflow: hidden;
  margin: 0 0 40px; padding: 36px 40px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--art-bg); }
.lh.no-art { grid-template-columns: minmax(0, 1fr); }
.lh-k { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--link-ink); }   
.lh h1 { margin: 8px 0 12px; font-size: 42px; line-height: 1.2; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }   
.lh p { margin: 0 0 22px; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.lh-copy > p:last-child { margin-bottom: 0; }   
.lh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-meta + .lh-chips { margin-top: 12px; }   
.lh-chips a { padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.lh-chips a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.lh-chips a small { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lh-chips a.on small { color: var(--on-brand); }
.lh-chips a.on { background: var(--primary); border-color: transparent; color: var(--on-brand); box-shadow: 0 8px 18px -10px rgba(31,122,192,.8); }   
.lh-art { display: block; aspect-ratio: 2 / 1; }

.lh-art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 30px -18px rgba(14, 60, 100, .55); }

.lh-art img[src*="-obj"] { border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 22px rgba(14, 60, 100, .2)); }
:root[data-theme="dark"] .lh-art img[src*="-obj"] { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lh-art img[src*="-obj"] { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); } }

.ls-feature { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.ls-feature .mc-row .mc-art { flex-basis: 52%; border-radius: var(--r-l); }
.ls-feature .mc-row .mc-title { font-size: 28px; line-height: 1.3; letter-spacing: -.04em; font-weight: 800; -webkit-line-clamp: 3; }
.ls-feature .mc-row .mc-desc { -webkit-line-clamp: 3; font-size: 16px; }
.ls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }

.ls-top { margin: 8px 0 48px; }
.ls-first-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 18px 20px; border: 1px solid var(--blue-line); border-radius: var(--r-l); background: var(--blue-soft); --link: var(--link-ink); }   
.ls-pop-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.ls-all-h { margin: 60px 0 0; }   
.ls-pop-g.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ls-pop-g, .ls-pop-g.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ls-first-g { grid-template-columns: minmax(0, 1fr); } .ls-pop-g, .ls-pop-g.is-3 { grid-template-columns: minmax(0, 1fr); } }
.ls-grid .mc-md .mc-title { font-size: 18px; }
.ls-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 56px 0 0; }
.ls-pg-nums { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.ls-pg-nums a, .ls-pg-nums span { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 15px; font-weight: 650; color: var(--ink-2); }
.ls-pg-nums a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.ls-pg-nums .on { background: var(--primary); color: var(--on-brand); box-shadow: 0 6px 14px -8px rgba(31,122,192,.8); }
.ls-pg-nums .ls-pg-gap { min-width: 0; padding: 0 2px; color: var(--muted); }
.ls-pg-nums .is-mb { display: none; }
.ls-pg-edge { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 15px; font-weight: 650; }
.ls-pg-edge:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
@media (max-width: 1099px) { .ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lh { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } }
@media (max-width: 900px) {
  .lh { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .lh-art { order: -1; margin: -12px -8px 0; }
  .lh h1 { font-size: 32px; }
  .ls-feature .mc-row { flex-direction: column; align-items: stretch; }
  .ls-feature .mc-row .mc-art { flex: none; }
  .ls-feature .mc-row .mc-title { font-size: 23px; }
}
@media (max-width: 640px) {
  .lh { border-radius: var(--r-l); margin-bottom: 28px; }
  .lh h1 { font-size: 28px; }
  .lh p { font-size: 15.5px; }
  
  .ls-news .lh-art, .ls-news .ah-meta { display: none; }
  .ls-news .lh-chips { gap: 6px; }
  .ls-news .lh-chips a { padding: 6px 11px; font-size: 13.5px; }
  
  .ls-hd .lh-art { display: none; }
  .ls-hd:not(.ls-news) .lh-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -22px; padding: 2px 22px 2px 0;    scrollbar-width: none; }
  .ls-hd:not(.ls-news) .lh-chips::-webkit-scrollbar { display: none; }
  .ls-hd:not(.ls-news) .lh-chips a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .ls-hd:not(.ls-news) .lh-chips a:first-child { order: -2; }
  .ls-hd:not(.ls-news) .lh-chips a.on:not(:first-child) { order: -1; }
  .ls-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ls-pg-edge span { display: none; }
  .ls-pg-edge { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .ls-pg-nums a, .ls-pg-nums span { min-width: 36px; height: 36px; padding: 0 8px; }
  .ls-pg-nums .ls-pg-gap { min-width: 0; padding: 0 1px; }
  .ls-pg-nums .is-far, .ls-pg-nums .is-dk { display: none; }
  .ls-pg-nums .is-mb { display: inline-grid; }   
  .ls-pager { gap: 8px; }
}


.hb-stat { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.hb-num { font-size: 15px; color: var(--ink-2); }
.hb-num b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--link); margin-right: 2px; }
.hb-num small { font-size: 14px; color: var(--muted); }
.hb-bar { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2AABEE, #1F7AC0); }
.hb-mod { margin-top: 48px; }
.hb-mod-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hb-mod-code { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #fff; background: var(--brand-grad); }
.hb-mod-h h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.hb-mod .hm-head { align-items: flex-end; }
.hb-mod-n { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--muted); }
.hb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.hb-item { margin: 0; min-width: 0; }
.hb-item a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px 16px 12px 12px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.hb-item a:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.hb-item a:hover b { color: var(--link); }
.hb-n { flex: 0 0 38px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; text-align: center; color: var(--link-ink); }   
.hb-art { flex: 0 0 120px; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--thumb-line); }
.hb-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hb-t b { font-size: 15.5px; line-height: 1.42; font-weight: 700; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.hb-t small { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.hb-t em { font-style: normal; font-weight: 800; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; color: var(--ink-2); border: 1px solid var(--line-2); }
.hb-item.is-wait { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1px dashed var(--line-2); background: transparent; }
.hb-item.is-wait .hb-n { color: var(--muted); }
.hb-n.is-dot { color: var(--muted); font-size: 26px; }   
.hb-item.is-wait b { font-weight: 500; color: var(--muted); }
.hb-wait { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: var(--soft); }

.hb-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }


.tg-snav { display: flex; gap: 6px; margin: 0 0 24px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tg-snav a { flex: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 650; white-space: nowrap; }
.tg-snav a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.tg-snav a.on { background: var(--primary); border-color: var(--primary); color: var(--on-brand); }
.tg-snav .tg-snav-home { background: var(--soft); color: var(--ink); }
.lh + .tg-snav { margin-top: -12px; }
.tg-crumb + .tg-snav { margin: -6px 0 18px; }


.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tp-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
  scroll-margin-top: 16px; }
.tp-card h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.tp-card h3 a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink); }   
.tp-card h3 a:hover { text-decoration: none; }
.tp-card h3 a:hover span { color: var(--link); }
.tp-card h3 small { flex: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.tp-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.tp-card ul { flex: 1; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tp-card li a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.tp-card li a:hover { color: var(--link); text-decoration: none; }
.tp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--link); font-size: 14px; font-weight: 700; }
.tp-card:hover { border-color: var(--line-2); }
.tp-sec:first-of-type { margin-top: 40px; }
.hb-pop { margin-top: 40px; }

@media (max-width: 600px) {
  .hb-pop .ls-grid, .ls-pop-g, .ls-grid { gap: 14px; }
  .hb-pop .mc-md, .ls-pop-g .mc-md { flex-direction: row; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .hb-pop .mc-md:last-child, .ls-pop-g .mc-md:last-child { padding-bottom: 0; border-bottom: 0; }
  .hb-pop .mc-md .mc-art, .ls-pop-g .mc-md .mc-art { flex: 0 0 112px; aspect-ratio: 16 / 9; border-radius: 12px; }
  .hb-pop .mc-md .mc-art:not(.is-poster) img, .ls-pop-g .mc-md .mc-art:not(.is-poster) img { transform: scale(1.3); }
  .hb-pop .mc-md .mc-title, .ls-pop-g .mc-md .mc-title { font-size: 15px; }
  .hb-pop .mc-md .mc-desc, .ls-pop-g .mc-md .mc-desc { display: none; }
  
  .ls-grid .mc-md { flex-direction: row; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .ls-grid .mc-md:last-child { padding-bottom: 0; border-bottom: 0; }
  .ls-grid .mc-md .mc-art { flex: 0 0 112px; aspect-ratio: 16 / 9; border-radius: var(--r-m); }
  .ls-grid .mc-md .mc-art:not(.is-poster) img { transform: scale(1.3); }
  .ls-grid .mc-md .mc-title { font-size: 15px; }
  .ls-grid .mc-md .mc-desc { display: none; }
  .ls-grid .mc-md .mc-kicker { display: none; }   
  .ls-grid .mc-md .tg-dur { right: 6px; bottom: 6px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
  .hb-pop .mc-md .tg-dur, .ls-pop-g .mc-md .tg-dur { right: 6px; bottom: 6px; height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
}

@media (min-width: 1100px) {
  .tp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tp-grid > .tp-card { grid-column: span 2; }
  .tp-grid > .tp-card:nth-child(3n+1):nth-last-child(2), .tp-grid > .tp-card:nth-child(3n+1):nth-last-child(2) + .tp-card { grid-column: span 3; }
  .tp-grid > .tp-card:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
@media (max-width: 1099px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-grid > .tp-card:nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .tp-grid { grid-template-columns: minmax(0, 1fr); } .tp-card { padding: 18px; } .lh + .tg-snav { margin-top: 0; }
  .tp-card p, .tp-card .tp-more { display: none; }   
  
  .tp-card h3 a span { color: var(--link); }
  .tp-card h3 small::after { content: ' ›'; }
  .tp-card li:last-child a { border-bottom: 0; padding-bottom: 0; }
  .fq-hero .cs-sum { display: none; }   
}

@media (max-width: 900px) { .tg-snav .tg-snav-home { order: -2; } .tg-snav a.on, .ch-nav a.on { order: -1; } }

@property --snav-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --snav-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes snav-edge { 0% { --snav-l: 0px; --snav-r: 32px; } 6% { --snav-l: 32px; } 94% { --snav-r: 32px; } 100% { --snav-l: 32px; --snav-r: 0px; } }
@media (min-width: 901px) { .tg-snav { flex-wrap: wrap; overflow: visible; gap: 8px 6px; padding-bottom: 2px; } }
@media (max-width: 900px) {
  .tg-snav, .lh + .tg-snav, .tg-crumb + .tg-snav { margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; scroll-padding-inline: 16px; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--snav-l), #000 calc(100% - var(--snav-r)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--snav-l), #000 calc(100% - var(--snav-r)), transparent); }
  .tg-snav::-webkit-scrollbar { display: none; }
  .tg-snav a { scroll-snap-align: start; }
  @supports (animation-timeline: scroll()) { .tg-snav { animation: snav-edge linear both; animation-timeline: scroll(self inline); } }
  @supports not (animation-timeline: scroll()) { .tg-snav { --snav-r: 32px; } }
}
.hb-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; }
.hb-jump a:hover { text-decoration: none; border-color: var(--blue-line); color: var(--link); }
.hb-jump small { font-weight: 600; color: var(--muted); }
.hb-also { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.hb-also-h { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.hb-also-h h2 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.hb-also-h .hb-num { margin: 0; }
.hb-also-h .hb-num b { font-size: 26px; }
@media (max-width: 900px) { .hb-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .hb-art { flex-basis: 88px; }
  .hb-n { flex-basis: 28px; font-size: 18px; }
  .hb-item a, .hb-item.is-wait { gap: 10px; padding: 10px 12px 10px 8px; }
  .hb-mod-h h2 { font-size: 20px; }
  .hb-num b { font-size: 28px; }
}


.sh-form { max-width: 600px; margin: 18px 0 0; }
.sh-form input { height: 60px; border-radius: var(--r-l); border-color: rgba(10,50,100,.08); box-shadow: 0 22px 44px -24px rgba(20,90,160,.45), 0 2px 6px rgba(10,40,80,.06); }
.sh-form button { width: 48px; height: 48px; border-radius: var(--r-m); right: 6px; }
.sh-pop { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; margin-top: 18px; }
.sh-pop span { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.sh-pop a { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.sh-pop a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.sr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.sr-count { margin: 0; font-size: 15px; color: var(--muted); }
.sr-count b { font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); margin-right: 2px; }
.sr-facets small { font-size: 12.5px; font-weight: 700; opacity: .7; margin-left: 2px; }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sr-list li { margin: 0; }
.sr-item { display: flex; align-items: flex-start; gap: 20px; padding: 16px; margin: 0 -16px; border-radius: var(--r-l); color: var(--ink); transition: background .2s; }
.sr-item:hover { text-decoration: none; background: var(--soft); }
.sr-item:hover b { color: var(--link); }
.sr-art { position: relative; flex: 0 0 200px; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--art-bg); border: 1px solid var(--line); }
.sr-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-art .tg-dur { right: 8px; bottom: 8px; }
.sr-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; padding-top: 2px; }
.sr-t b { font-size: 18px; line-height: 1.42; font-weight: 700; letter-spacing: -.025em; transition: color .2s; }
.sr-t small { font-size: 15px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-t em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.sr-t mark, .sr-t b mark { color: inherit; background: color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 4px; padding: 0 2px; }
.sr-more { margin: 32px 0 0; text-align: center; }
.sr-more a { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; color: var(--link); background: var(--surface); border: 1px solid var(--line-2); }
.sr-more a:hover { border-color: var(--brand); text-decoration: none; }
.sr-empty { padding: 8px 0 0; }
.sr-empty h2 { font-size: 24px; letter-spacing: -.035em; margin: 0 0 8px; }
.sr-empty > p { margin: 0 0 24px; color: var(--muted); }
@media (max-width: 640px) {
  .sh-form input { height: 54px; }
  .sh-form button { width: 44px; height: 44px; }
  .sr-item { gap: 12px; padding: 12px; margin: 0 -12px; }
  .sr-art { flex-basis: 108px; }
  .sr-t b { font-size: 15.5px; }
  .sr-t small { display: none; }
  
  .sr-hero.has-res .sh-pop { display: none; }
  .sr-bar { flex-wrap: nowrap; gap: 12px; margin-bottom: 8px; padding-bottom: 12px; }
  .sr-count { flex: none; }
  .sr-facets { flex-wrap: nowrap; min-width: 0; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 0; scrollbar-width: none; }
  .sr-facets::-webkit-scrollbar { display: none; }
  .sr-facets a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .sr-facets a:first-child { order: -2; }   
  .sr-facets a.on:not(:first-child) { order: -1; }
  .sr-item.is-desc .sr-t small { display: -webkit-box; font-size: 13px; line-height: 1.5; }   
}


.ah-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.ah-k a { color: var(--link); }
.ah-step { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; color: #fff; background: var(--brand-grad); }
.ah-step small { font-weight: 600; opacity: .85; }
.ah-desc { margin: 0 0 20px; max-width: 620px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ah-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ah-meta li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); }
.ah-meta span { color: var(--muted); }
.ah-meta b { color: var(--ink); font-weight: 700; }
.ah-art { display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--thumb-line); }
.ah-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

:is(.mc-art, .hb-art, .ah-art):has(img[src*="/thumbs/"][src*="-ig"]) { background: var(--art-bg); border-color: var(--line); }

.tg-toc a.on { color: var(--link); font-weight: 700; border-left-color: var(--brand); }
.tg-progress > b em { font-style: normal; font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--link); }
.tg-side-in > .tg-progress + .tg-toc { margin-top: 24px; }
.tg-side-in > .tg-progress { margin-top: 0; }

.tg-sources ul { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.tg-sources li { margin: 0; }
.tg-sources a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; font-size: 14px; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); text-decoration: none; }
.tg-sources a:hover { border-color: var(--brand); color: var(--link); }
.tg-sources a svg { color: var(--muted); }
.ar-rel { padding-top: 48px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .ah-art { order: -1; }
}
@media (max-width: 640px) {
  .ah-desc { font-size: 15px; }
  .ah-art { width: 52%; }   
  .ah-meta li { padding: 5px 10px; font-size: 12.5px; }
}


.tg-hubhead { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 32px; align-items: center; padding: 28px 32px; border: 1px solid var(--line);
  border-radius: var(--r-xl); background: linear-gradient(135deg, var(--soft), var(--bg) 62%); margin-bottom: 32px; }
.tg-hubhead.no-art { grid-template-columns: minmax(0, 1fr); }
.tg-hubhead h1 { font-size: 34px; margin: 8px 0 10px; }
.tg-hubhead p { color: var(--ink-2); font-size: 17px; margin: 0 0 10px; max-width: 640px; }
.tg-hubhead .tg-hubstat { font-size: 14.5px; color: var(--muted); margin: 0; }
.tg-hubhead .tg-hubstat b { color: var(--ink); }
.tg-hubhead-art { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-l); background: var(--surface); }
.tg-hubmod { margin-top: 36px; }
.tg-hubmod h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin-bottom: 14px; }
.tg-hubmod h2 span { font-size: 13px; font-weight: 800; color: var(--link-ink); background: var(--blue-soft); border: 1px solid var(--blue-line); padding: 1px 10px; border-radius: 6px; }
.tg-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.tg-rows li + li { border-top: 1px solid var(--line); }
.tg-rows li > a, .tg-rows li.is-wait { display: flex; align-items: center; gap: 16px; padding: 14px 20px; color: var(--ink); }
.tg-rows li > a:hover { background: var(--soft); text-decoration: none; }
.tg-rows-n { flex: 0 0 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  background: var(--primary); color: #fff; }
.is-wait .tg-rows-n { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.tg-rows-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.tg-rows-t b { font-size: 16px; font-weight: 700; }
.is-wait .tg-rows-t b { font-weight: 500; color: var(--ink-2); }
.tg-rows-t small { font-size: 13px; color: var(--muted); }
.tg-lv { font-size: 12px; font-weight: 800; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 7px; }
.tg-wait { font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; white-space: nowrap; }
.tg-rows-go { color: var(--link); display: inline-flex; }


.tg-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.tg-article { min-width: 0; max-width: 760px; }

.tg-metabar { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); padding: 11px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tg-metabar b { color: var(--ink); font-weight: 700; margin-right: 5px; }
.tg-lead { position: relative; margin: 0 0 32px; padding: 22px 24px 20px; border-radius: 20px; border: 1px solid var(--blue-line);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%), var(--blue-soft); }
.tg-lead-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--link); }
.tg-lead-h span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--brand-grad); }
.tg-lead ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tg-lead li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 600; line-height: 1.6; }
.tg-lead li b { flex: 0 0 26px; height: 26px; margin-top: 1px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.tg-toc-m { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 18px; margin-bottom: 28px; background: var(--surface); }
.tg-toc-m summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; }
.tg-toc-m summary::-webkit-details-marker { display: none; }
.tg-toc-m summary::after { content: "Show"; margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.tg-toc-m[open] summary::after { content: "Hide"; }
.tg-toc-m ol { margin: 0 0 14px; padding-left: 22px; font-size: 15px; }
.tg-toc-m li { margin: 4px 0; }
.ah-meta:not(:has(li)) { display: none; }   
@media (max-width: 640px) { .tg-crumb-cur { display: none; } }
.tg-side { display: none; }


.tg-post > :first-child { margin-top: 0; }

.tg-post .nw-fig, .tg-post .nw-video { margin: 0 0 1.3em; text-align: center; }

.tg-post .nw-fig img { display: inline-block; width: auto; max-width: 100%; max-height: 78vh; height: auto; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--art-bg); }
.tg-post .nw-video video { display: inline-block; max-width: 100%; max-height: 72vh; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--art-bg); }
.tg-post .nw-fig img[style*='--r'] { width: min(100%, var(--w), calc(78vh * var(--r))); max-height: none; }
.tg-post .nw-video video[style*='--r'] { width: min(100%, var(--w), calc(72vh * var(--r))); height: auto; max-height: none; }
.tg-post blockquote { margin: 0 0 1.2em; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--soft); border-radius: 0 var(--r-m) var(--r-m) 0; }
.tg-post blockquote p:last-child { margin-bottom: 0; }
.nw-credit { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 24px; padding: 12px 16px; border-radius: var(--r-m); border: 1px solid var(--blue-line); background: var(--blue-soft); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.nw-credit > svg { flex: 0 0 auto; margin-top: 3px; color: var(--link); }
.nw-credit > span { flex: 1 1 260px; }
.nw-credit a { color: var(--link); font-weight: 700; }
.nw-credit .nw-src { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {   
  .nw-credit { display: block; margin-bottom: 16px; padding: 10px 12px; font-size: 13px; line-height: 1.55; }
  .nw-credit > svg { display: inline-block; vertical-align: -3px; margin: 0 4px 0 0; }
  .nw-credit .nw-src { margin-left: 6px; }
}
.tg-post h2 { font-size: 25px; margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.tg-post h3 { font-size: 19.5px; margin: 32px 0 10px; }
.tg-post p { margin: 0 0 1.15em; }
.tg-post ul, .tg-post ol { margin: 0 0 1.2em; padding-left: 24px; }
.tg-post li { margin: .35em 0; }
.tg-post li::marker { color: var(--link); font-weight: 700; }
.tg-post strong, .tg-post b { font-weight: 700; }
.tg-post code { font-family: var(--mono); font-size: .88em; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.tg-post pre { font-family: var(--mono); font-size: 14px; line-height: 1.6; background: var(--navy); color: #E6EEF6; border-radius: var(--r-m); padding: 16px 18px; overflow-x: auto; margin: 0 0 1.3em; }
.tg-post pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.tg-post kbd { font-family: var(--mono); font-size: .85em; padding: 1px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
.tg-post blockquote { margin: 0 0 1.3em; padding: 12px 20px; border-left: 3px solid var(--line-2); background: var(--soft); border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink-2); }
.tg-post blockquote p:last-child { margin: 0; }
.tg-post table { border-collapse: collapse; width: 100%; margin: 0 0 1.4em; font-size: 15.5px; line-height: 1.6; }
.tg-post th, .tg-post td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.tg-post th { background: var(--soft); font-weight: 700; }
.tg-post img { border-radius: var(--r-s); }
.tg-post hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.tg-post a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15,106,163,.4); }
.tg-placeholder { color: var(--warn-ink); background: var(--warn-soft); padding: 10px 14px; border-radius: var(--r-s); font-size: 15px; }


.tg-path { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 1.3em; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--soft); }
.tg-path > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tg-path > label { flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 10px; border-radius: 7px; font-size: 14.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tg-path > label:hover { color: var(--ink); }
.tg-path > input:checked + label { background: var(--surface); color: var(--link-ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.tg-path > input:focus-visible + label { outline: 3px solid rgba(34,158,217,.6); outline-offset: 1px; }
.tg-path__pane { display: none; flex: 0 0 100%; padding: 12px 8px 6px; }
.tg-path > input:nth-of-type(1):checked ~ .tg-path__pane:nth-of-type(1),
.tg-path > input:nth-of-type(2):checked ~ .tg-path__pane:nth-of-type(2),
.tg-path > input:nth-of-type(3):checked ~ .tg-path__pane:nth-of-type(3) { display: block; }
.tg-path__pane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; }
.tg-path__pane li { display: inline-flex; align-items: center; margin: 0; }
.tg-path__pane li + li::before { content: "›"; margin: 0 8px; color: var(--muted); font-weight: 700; }
.tg-path__pane li::marker { content: none; }
.tg-path__pane li > span, .tg-path__pane li > a { display: inline-block; padding: 5px 12px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line-2); font-size: 14.5px;
  font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.5; }
.tg-path__pane li:first-child > span, .tg-path__pane li:first-child > a { background: var(--blue-soft); border-color: var(--blue-line); color: var(--link-ink); }
.tg-path__pane li:last-child > span, .tg-path__pane li:last-child > a { background: var(--primary); border-color: var(--primary); color: var(--on-brand); }
.tg-path__pane li > a:hover { border-color: var(--link); }
.tg-path__pane p { margin: 10px 0 0; font-size: 14px; color: var(--muted); }


.tg-fig { margin: 0 0 1.5em; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.tg-fig > img, .tg-fig__zoom > img, .tg-fig__scroll img { display: block; width: auto; max-width: 100%; max-height: 840px; height: auto; margin: 0 auto; border-radius: var(--r-s); background: var(--soft); border: 1px solid var(--line); }

.tg-fig.is-land > img, .tg-fig.is-land .tg-fig__zoom > img { width: min(100%, calc(var(--w, 9999px) * 1.4)); }
.tg-fig__scroll { display: block; }

.tg-fig__zoom { display: block; position: relative; cursor: zoom-in; border-radius: var(--r-s); }
.tg-fig__zoom::after { content: "Enlarge"; position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: var(--scrim-chip); color: var(--on-scrim); font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tg-fig__zoom:hover::after, .tg-fig__zoom:focus-visible::after { opacity: 1; }
@media (hover: none) { .tg-fig__zoom::after { opacity: .85; } }
.tg-fig.is-wide .tg-fig__zoom::after { display: none; }
.tg-lb { width: auto; max-width: 96vw; max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.tg-lb::backdrop { background: var(--scrim); }
.tg-lb__in { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 94vh; overflow: auto; }
.tg-lb img { display: block; max-width: 96vw; max-height: 80vh; width: auto; height: auto; border-radius: var(--r-s); background: var(--surface); cursor: zoom-out; }
.tg-lb__cap { max-width: min(96vw, 760px); margin: 0; padding: 12px 16px; border-radius: var(--r-m); background: var(--surface); color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.tg-lb__cap:empty { display: none; }
.tg-lb__pan { max-width: 96vw; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: var(--r-s); }
.tg-lb.is-actual .tg-lb__pan { width: 96vw; max-height: 74vh; }
.tg-lb.is-actual img { max-width: none; max-height: none; cursor: zoom-out; }
.tg-lb.is-big:not(.is-actual) img { cursor: zoom-in; }
.tg-lb__hint { margin: 0; color: var(--on-scrim); font-size: 13px; font-weight: 700; }
.tg-lb__hint:empty { display: none; }
.tg-lb__x { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--scrim-btn); color: var(--scrim-btn-ink); font-size: 26px; line-height: 44px; cursor: pointer; }
html.tg-lb-open { overflow: hidden; }
.tg-fig__hint { display: none; }
.tg-fig figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.tg-fig figcaption > b { display: block; color: var(--ink); margin-bottom: 6px; }
.tg-fig .tg-fig__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tg-fig .tg-fig__legend li { position: relative; padding-left: 34px; margin: 0; }
.tg-fig .tg-fig__legend li::marker { content: none; }
.tg-fig__n { position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--fig-red); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.tg-fig .is-blue .tg-fig__n { background: var(--fig-blue); }
.tg-fig .is-green .tg-fig__n { background: var(--fig-green); }
.tg-fig .is-gray .tg-fig__n { background: var(--fig-gray); }
.tg-fig .tg-fig__note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }


.tg-video { margin: 0 0 1.5em; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--soft); }
.tg-video > video { display: block; width: auto; max-width: 100%; max-height: 560px; height: auto; margin: 0 auto; border-radius: var(--r-s); background: #000; }
.tg-video figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.tg-video figcaption > span { display: block; }
.tg-video .tg-video__len { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }


.tg-callout { position: relative; margin: 0 0 1.3em; padding: 14px 18px 14px 52px; border-radius: var(--r-m); background: var(--blue-soft); border: 1px solid var(--blue-line); font-size: 16px; }
.tg-callout::before { content: ""; position: absolute; left: 18px; top: 16px; width: 22px; height: 22px; background: var(--link);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.tg-callout > b:first-child, .tg-callout > strong:first-child { display: block; margin-bottom: 2px; }
.tg-callout p:last-child, .tg-callout ul:last-child { margin-bottom: 0; }
.tg-callout.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.tg-callout.is-warn::before { background: var(--warn);
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); }
.tg-callout.is-danger { background: var(--err-soft); border-color: var(--err-line); }
.tg-callout.is-danger::before { background: var(--err);
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); }
.tg-callout.is-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.tg-callout.is-ok::before { background: var(--ok);
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); }


.tg-mistakes { margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.tg-post .tg-mistakes table { margin: 0; border: 0; font-size: 15px; }
.tg-post .tg-mistakes th { background: var(--primary); color: #fff; border: 0; border-bottom: 1px solid var(--primary); }
.tg-post .tg-mistakes td { border: 0; border-top: 1px solid var(--line); }
.tg-post .tg-mistakes td:first-child { font-weight: 700; color: var(--ink); width: 30%; }
.tg-post .tg-mistakes td + td, .tg-post .tg-mistakes th + th { border-left: 1px solid var(--line); }
.tg-post .tg-mistakes th + th { border-left-color: rgba(255,255,255,.14); }


.tg-faq, .tg-sources, .tg-related { margin-top: 48px; }
.tg-faq h2, .tg-sources h2, .tg-related h2 { font-size: 23px; margin-bottom: 14px; }
.tg-faq details { border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 10px; background: var(--surface); }
.tg-faq details[open] { border-color: var(--line-2); }
.tg-faq summary { position: relative; padding: 14px 48px 14px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.tg-faq summary::-webkit-details-marker { display: none; }
.tg-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--link); }
.tg-faq details[open] summary::after { content: "−"; }
.tg-faq details p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); }
.tg-sources ul { padding-left: 20px; font-size: 15px; margin: 0; }
.tg-updated { color: var(--muted); font-size: 13.5px; margin-top: 36px; }


.tg-recap { margin: 52px 0 8px; padding: 26px 26px 28px; border-radius: var(--r-l); background: var(--soft); border: 1px solid var(--line); }
.tg-recap-head { margin-bottom: 18px; }
.tg-recap-head .k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--link-ink); }
.tg-recap-head h2 { margin: 6px 0 0; padding: 0; border: 0; font-size: 26px; letter-spacing: -.03em; }
.tg-recap-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.tg-recap-body.no-art { grid-template-columns: minmax(0, 1fr); }
.tg-recap-art { width: 220px; height: 220px; border-radius: var(--r-m); object-fit: cover; background: var(--art-bg); border: 1px solid var(--line); }
.tg-recap-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tg-recap-list li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 18px 14px 62px; margin: 0; }
.tg-recap-list .rn { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 15px; color: #fff; background: var(--primary); }
.tg-recap-list .r1 .rn, .tg-recap-list .r2 .rn, .tg-recap-list .r3 .rn { background: var(--primary); }
.tg-recap-list b { display: block; font-size: 16.5px; letter-spacing: -.02em; line-height: 1.4; }
.tg-recap-list p { margin: 3px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }


.an { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.an-card { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.an-card:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.an-art { flex: 0 0 112px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--art-bg); }
.an-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.an-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.an-t small { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--link); }
.an-t b { font-size: 15.5px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-next { text-align: right; }
.an-next .an-t small { justify-content: flex-end; }
.tp-an { margin-top: 40px; }   
.tp-an .an-card { min-height: 0; padding: 14px 18px; }
.tp-an .an-next:first-child { grid-column: 2; }
.tp-an b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.tp-home { margin: 16px 0 0; text-align: center; font-size: 14.5px; font-weight: 700; }
@media (max-width: 640px) {   
  .an { grid-template-columns: minmax(0, 1fr); }
  .an-art { flex-basis: 88px; }
  .an > span:empty { display: none; }   
  .tp-an { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .tp-an .an-next:first-child { grid-column: auto; }
}
.tg-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tg-related a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.tg-related a:hover { border-color: var(--link); box-shadow: var(--sh-2); text-decoration: none; }
.tg-related b { font-size: 15.5px; line-height: 1.45; }
.tg-pcnudge { display: none; align-items: center; gap: 16px; margin-top: 32px; padding: 16px 20px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--soft); }
.tg-pcnudge-ic { flex: 0 0 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-grad); color: #fff; }
.tg-pcnudge > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.5; }
.tg-pcnudge b { font-size: 16px; }
.tg-pcnudge small { font-size: 14px; color: var(--muted); }
.tg-pcnudge a { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .tg-pcnudge { display: flex; } }


.tg-toc b, .tg-progress small { display: block; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .02em; margin-bottom: 8px; }
.tg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.tg-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tg-toc a:hover { color: var(--link-ink); border-left-color: var(--link); text-decoration: none; }
.tg-progress { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--soft); }
.tg-progress > b { display: block; font-size: 17px; margin-bottom: 8px; }
.tg-progress progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--line); overflow: hidden; -webkit-appearance: none; appearance: none; }
.tg-progress progress::-webkit-progress-bar { background: var(--line-2); border-radius: 3px; }
.tg-progress progress::-webkit-progress-value { background: var(--brand); border-radius: 3px; }
.tg-progress progress::-moz-progress-bar { background: var(--brand); border-radius: 3px; }
.tg-progress a { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; }


.dl { margin: 0 0 56px; padding: 28px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.dl-h h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.035em; }
.dl-h p { margin: 0 0 20px; font-size: 15px; color: var(--muted); }
.dl.is-single .dl-h h2 { margin-bottom: 16px; }
.dl-tabs { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 12px; }
.dl-tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dl-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 8px 14px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: var(--art-bg); text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.dl-tab-art { display: grid; place-items: center; width: 100%; max-width: 150px; aspect-ratio: 4 / 3; }
.dl-tab-art img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.dl-tab-art i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-l); color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.dl-tab b { font-size: 15.5px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
.dl-tab small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dl-tab:hover { border-color: var(--blue-line); transform: translateY(-2px); }
.dl-tab:hover .dl-tab-art img { transform: translateY(-3px) scale(1.03); }
.dl-tabs > input:checked + .dl-tab { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent), var(--sh-2); }
.dl-tabs > input:checked + .dl-tab b { color: var(--link-ink); }   
.dl-tabs > input:checked + .dl-tab::after { content: ''; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-grad);
  box-shadow: 0 4px 10px -4px rgba(31,122,192,.9); }
.dl-tabs > input:checked + .dl-tab::before { content: ''; position: absolute; z-index: 1; top: 16px; right: 16.5px; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.dl-tabs > input:focus-visible + .dl-tab { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; }
.dl-pane { display: none; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 6px; padding: 22px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--art-bg); }
.dl-tabs > input:nth-of-type(1):checked ~ .dl-pane:nth-of-type(1),
.dl-tabs > input:nth-of-type(2):checked ~ .dl-pane:nth-of-type(2),
.dl-tabs > input:nth-of-type(3):checked ~ .dl-pane:nth-of-type(3),
.dl-tabs > input:nth-of-type(4):checked ~ .dl-pane:nth-of-type(4),
.dl-tabs > input:nth-of-type(5):checked ~ .dl-pane:nth-of-type(5),
.dl-tabs > input:nth-of-type(6):checked ~ .dl-pane:nth-of-type(6) { display: grid; }
.dl-pane.is-open { display: grid; margin-top: 0; }
.dl.is-single .dl-tabs { display: block; }
.dl-main { min-width: 0; }
.dl-go { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 104px; padding: 20px 24px; border-radius: var(--r-l); color: #fff;
  background: linear-gradient(135deg, #2AABEE 0%, #1F8FD8 55%, #1F7AC0 100%); box-shadow: 0 20px 36px -20px rgba(31,122,192,.95), inset 0 1px 0 rgba(255,255,255,.25); transition: box-shadow .2s, transform .2s; }
.dl-go::before { content: ''; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); }
.dl-go:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 26px 44px -22px rgba(31,122,192,1), inset 0 1px 0 rgba(255,255,255,.25); }
.dl-go-ic { flex: 0 0 60px; height: 60px; display: grid; place-items: center; border-radius: var(--r-m); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); }
.dl-go-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-go-t small { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; opacity: .88; }
.dl-go-t b { font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -.03em; }
.dl-go-t em { font-style: normal; font-size: 14px; opacity: .9; }
.dl-go-arrow { margin-left: auto; flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .2s; }
.dl-go:hover .dl-go-arrow { transform: translateX(4px); }
.dl-alt-h { margin: 18px 0 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.dl-alt { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dl-alt-btn { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.dl-alt-btn > svg { flex: 0 0 auto; color: var(--link); }
.dl-alt-btn span { display: flex; flex-direction: column; min-width: 0; }
.dl-alt-btn b { font-size: 15px; line-height: 1.35; font-weight: 700; }
.dl-alt-btn small { font-size: 12.5px; color: var(--muted); }
.dl-alt-btn:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-1); }
.dl-alt-btn:hover b { color: var(--link); }
.dl-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.dl-note { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.dl-note b { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--muted); }
.dl-ver { display: flex; flex-direction: column; padding: 12px 16px; border-radius: var(--r-m); border: 1px solid var(--blue-line); background: var(--blue-soft); --link: var(--link-ink); }   
.dl-ver span { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.dl-ver b { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; color: var(--link-ink); }
.dl-ver small { font-size: 12.5px; color: var(--muted); }

.dl-side > :has(+ .dl-next) { margin-bottom: 24px; }   
.dl-next { --nx-art: 116px; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 16px 16px 16px; border-radius: var(--r-l); color: #fff;
  background: radial-gradient(circle at 88% 0%, rgba(42,171,238,.6), transparent 62%), var(--band);
  box-shadow: 0 18px 32px -20px rgba(31,122,192,.95), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .2s, box-shadow .2s; }
.dl-next:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 24px 40px -22px rgba(31,122,192,1), inset 0 1px 0 rgba(255,255,255,.22); }
.dl-next:focus-visible { outline: 3px solid rgba(34,158,217,.6); outline-offset: 3px; }
.dl-next-art { position: absolute; z-index: -1; top: -34px; right: 2px; width: calc(var(--nx-art) - 6px); pointer-events: none; }   
.dl-next-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(8,40,80,.3)); transform-origin: 70% 100%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.dl-next:hover .dl-next-art img { transform: translateY(-3px) rotate(-1.5deg); }
.dl-next small, .dl-next b { padding-right: calc(var(--nx-art) - 12px); }
.dl-next small { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.dl-next b { font-size: 18.5px; line-height: 1.3; font-weight: 800; letter-spacing: -.03em; word-break: keep-all; text-wrap: balance; }
.dl-next-steps { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 10px 0 2px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); }
.dl-next-steps i { font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.dl-next-steps i + i::before { content: '›'; margin: 0 7px; font-weight: 800; }   
.dl-next-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 800; color: #1A6BAA; background: #fff;
  box-shadow: 0 6px 14px -8px rgba(8,40,80,.6); }   
.dl-next-cta svg { flex: 0 0 auto; transition: transform .2s; }
.dl-next:hover .dl-next-cta svg { transform: translateX(3px); }
.dl-guides ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.dl-guides.is-one ul { grid-template-columns: minmax(0, 1fr); }   
.dl-guides li { margin: 0; border-bottom: 1px solid var(--line); }
.dl-guides a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.dl-guides a svg { flex: 0 0 auto; color: var(--muted); transition: transform .2s, color .2s; }
.dl-guides a:hover { text-decoration: none; color: var(--link); }
.dl-guides a:hover svg { color: var(--link); transform: translateX(3px); }
.dl-foot { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.dl-foot svg { flex: 0 0 auto; color: var(--link); }
@media (max-width: 1100px) { .dl-pane { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (min-width: 901px) and (max-width: 1100px) {   
  .dl-next-steps { padding: 5px 8px; }
  .dl-next-steps i { font-size: 11.5px; }
  .dl-next-steps i + i::before { margin: 0 4px; }
}
@media (max-width: 900px) {
  .dl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl.dl-n2 .dl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-pane { grid-template-columns: minmax(0, 1fr); }
  .dl-side { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .dl-side > :has(+ .dl-next) { margin-bottom: 30px; }
  .dl-next { --nx-art: 190px; padding: 18px 20px; }   
  .dl-next-art { top: auto; bottom: 0; right: 20px; }
  .dl-next-cta { align-self: flex-start; padding-inline: 22px; }
}
@media (max-width: 640px) {
  .dl { margin-bottom: 40px; padding: 18px 14px; }
  .dl-h h2 { font-size: 21px; }
  .dl-h p { margin-bottom: 14px; font-size: 14px; }
  .dl-tabs { gap: 8px; }
  .dl-tab { padding: 4px 4px 10px; }
  .dl-tab b { font-size: 14px; }
  .dl-tab small { display: none; }
  .dl-tabs > input:checked + .dl-tab::after { top: 6px; right: 6px; width: 18px; height: 18px; }
  .dl-tabs > input:checked + .dl-tab::before { top: 11px; right: 11px; width: 7px; height: 4px; }
  .dl-pane { padding: 14px; }
  .dl-go { gap: 12px; min-height: 88px; padding: 16px; }
  .dl-go-ic { flex-basis: 48px; height: 48px; }
  .dl-go-t b { font-size: 17.5px; }
  .dl-go-t em { font-size: 13px; }
  .dl-go-arrow { width: 36px; height: 36px; }
  
  .lh:has(+ .dl) .lh-art { display: none; }
  .lh + .dl .dl-h p { display: none; }
  .dl-tab-art { max-width: 60px; }   
  .lh:has(+ .dl) .ah-meta { display: none; }   
  .lh:has(+ .dl) .lh-copy > p { margin-bottom: 0; }
  .dl-go-t b { text-wrap: balance; }   
  .dl-alt { grid-template-columns: minmax(0, 1fr); }
  .dl-guides ul { grid-template-columns: minmax(0, 1fr); }
  .dl-next { --nx-art: 112px; padding: 16px; }
  .dl-next-art { top: -34px; bottom: auto; right: 2px; }
  .dl-next-cta { align-self: stretch; }
}


.gl-where { padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-2); }
.gl-where-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.gl-where-h svg { color: var(--link); }
.gl-where ul { list-style: none; margin: 0; padding: 0; }
.gl-where li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
.gl-where-p { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.gl-where-p svg { flex: 0 0 auto; color: var(--link); }
.gl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; }
.gl-crumbs em { font-style: normal; font-weight: 700; padding: 2px 8px; border-radius: 7px; color: var(--ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gl-crumbs i { font-style: normal; color: var(--muted); }
.gl-common { margin-top: 8px; }
.gl-say { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gl-say li { margin: 0; min-width: 0; }
.gl-say a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.gl-say a:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.gl-say-from { font-size: 13.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.gl-say b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--link); }
.gl { position: relative; margin-top: 56px; }
.gl-diff-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gl-bar { position: sticky; top: var(--head-h); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 8px; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.gl-bar h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.gl-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-jump a { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.gl-jump a:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.gl-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; user-select: none; }
.gl-switch small { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--link); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gl-switch-k { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); transition: background .2s; }
.gl-switch-k::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.gl-diff-in:checked ~ .gl-bar .gl-switch-k { background: var(--brand-grad); }
.gl-diff-in:checked ~ .gl-bar .gl-switch-k::after { transform: translateX(18px); }
.gl-diff-in:focus-visible ~ .gl-bar .gl-switch { outline: 3px solid rgba(34,158,217,.6); outline-offset: 4px; border-radius: 8px; }
.gl-diff-in:checked ~ .gl-grp tbody tr:not(.is-diff) { display: none; }
.gl-diff-in:checked ~ .gl-grp:not(.has-diff) { display: none; }
.gl-grp { margin-top: 32px; scroll-margin-top: 100px; }   
.gl-fold-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gl-grp h3 label { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
@media (max-width: 760px) {
  
  .gl-grp h3 { margin-bottom: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .gl-grp h3 label { display: flex; width: 100%; cursor: pointer; }
  .gl-grp h3 label::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
  .gl-grp .gl-tb { display: none; margin-top: 12px; }
  .gl-fold-in:checked ~ .gl-tb, .gl-grp:target .gl-tb, .gl-grp:has(tr:target) .gl-tb, .gl-grp:has(.gl-alias:target) .gl-tb, .gl-diff-in:checked ~ .gl-grp .gl-tb { display: block; }
  .gl-fold-in:checked ~ h3 label::after, .gl-grp:target h3 label::after, .gl-grp:has(tr:target) h3 label::after, .gl-grp:has(.gl-alias:target) h3 label::after, .gl-diff-in:checked ~ .gl-grp h3 label::after { transform: rotate(-135deg); }
  .gl-fold-in:focus-visible ~ h3 { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; }
  .gl-grp { margin-top: 10px; }
}
.gl-grp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 19px; letter-spacing: -.03em; }
.gl-grp h3 small { font-size: 13px; font-weight: 700; color: var(--muted); }
.gl-tb { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); font-size: 14.5px; }
.gl-tb thead th { padding: 11px 14px; text-align: left; font-size: 12.5px; font-weight: 800; color: var(--muted); background: var(--art-bg); border-bottom: 1px solid var(--line); }
.gl-tb thead th svg { vertical-align: -3px; margin-right: 5px; color: var(--link); }
.gl-tb thead th:first-child { width: 22%; }
.gl-tb tbody tr { scroll-margin-top: 100px; }
.gl-tb tbody tr:target, .gl-tb tbody tr:has(.gl-alias:target) { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.gl-alias { display: block; height: 0; scroll-margin-top: 116px; }   
.gl-tb tbody th, .gl-tb td { padding: 12px 14px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.gl-tb tbody tr:last-child > * { border-bottom: 0; }
.gl-tb tbody th { font-weight: 400; }
.gl-tb tbody th b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.gl-tb tbody th small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.gl-go { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--link); }

.gl-about svg { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--link); }
.gl-about a { color: var(--link); font-weight: 700; }
.gl-tnote { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.gl-badge { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; color: var(--link); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gl-tb td b { display: block; font-weight: 650; }
.gl-tb td small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.gl-tb td.is-alt { background: var(--blue-soft); }
.gl-tb td.is-alt b { color: var(--link); font-weight: 800; }
.gl-tb td.is-none { color: var(--line-2); }
.gl-note { margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--art-bg); border: 1px solid var(--line); font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.gl-note p { margin: 0; }
.gl-note p + p { margin-top: 8px; }
.gl-note b { margin-right: 6px; color: var(--ink); }
@media (max-width: 1100px) { .gl-say { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .gl-bar { position: static; }
  .gl-switch { margin-left: 0; }
  
  .gl-tb tbody tr { scroll-margin-top: 16px; }
  .gl-alias { scroll-margin-top: 32px; }
}
@media (max-width: 760px) {
  .gl-say { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  
  .gl-where li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; }
  .gl-where-p { flex: none; }
  .gl-tb, .gl-tb tbody, .gl-tb tr, .gl-tb th, .gl-tb td { display: block; }
  .gl-tb { border: 0; border-radius: 0; background: none; overflow: visible; }
  .gl-tb thead { display: none; }
  .gl-tb tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
  .gl-tb tbody th { grid-column: 1 / -1; background: var(--art-bg); }
  .gl-tb tbody th .gl-badge { margin: 0 0 0 6px; }
  .gl-tb td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .gl-tb tbody tr > td:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .gl-tb td::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
  .gl-tb tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
  .gl-tb tbody tr:last-child > td:last-child { border-bottom: 0; }
  .gl-tb tbody tr.is-same > td:not(:first-of-type) { display: none; }
  .gl-tb tbody tr.is-same > td:first-of-type { grid-column: 1 / -1; border-bottom: 0; }
  .gl-tb tbody tr.is-same > td:first-of-type::before { content: attr(data-all); }
}


.ab-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: var(--brand-grad); box-shadow: 0 10px 20px -12px rgba(31,122,192,.9); }
.ab-what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-what > div { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.ab-what b { display: block; margin: 14px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.ab-what p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ab-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; counter-reset: none; }
.ab-rules li { display: grid; grid-template-columns: 44px 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin: 0; padding: 20px 0; border-top: 1px solid var(--line); }
.ab-n { grid-row: 1 / 3; align-self: start; font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px var(--brand); line-height: 1.1; }
.ab-rule-ic { color: var(--link); display: inline-flex; }
.ab-rules b { font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.ab-rules p { grid-column: 2 / 4; margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ab-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-stats li { margin: 0; padding: 22px 22px 20px; border-radius: 20px; border: 1px solid var(--blue-line);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--blue-soft); }
.ab-stats b { display: block; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.045em; color: var(--link); }
.ab-stats b small { margin-left: 3px; font-size: 17px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.ab-stats span { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ab-stats-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.ab-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab-ed { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ab-ed .ab-ic { flex: 0 0 auto; color: var(--link); background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.ab-ed b { display: block; margin: 8px 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.ab-ed p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ab-ed a { color: var(--link); font-weight: 700; }
.ab-notice { display: flex; gap: 16px; align-items: flex-start; margin: 56px 0 0; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--art-bg); }
.ab-notice-ic { flex: 0 0 auto; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.ab-notice h2 { margin: 2px 0 6px; font-size: 17px; }
.ab-notice p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.ab-go { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-go a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.ab-go a:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ab-go b { margin-top: 10px; font-size: 16.5px; font-weight: 800; }
.ab-go small { font-size: 13.5px; color: var(--muted); }
.ab-go i { position: absolute; top: 20px; right: 20px; color: var(--muted); transition: transform .2s, color .2s; }
.ab-go a:hover i { color: var(--link); transform: translateX(3px); }
@media (max-width: 900px) {
  .ab-what, .ab-rules, .ab-contact { grid-template-columns: minmax(0, 1fr); }
  .ab-stats, .ab-go { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-art { order: -1; justify-self: center; width: 100%; max-width: 380px; margin: 0; }
}
@media (max-width: 640px) {
  
  .ab-art { max-width: 170px; margin: -6px auto -10px; }
  .ab-stats b { font-size: 32px; }
  .ab-stats li, .ab-go a { padding: 16px; }
  .ab-ed { padding: 18px; gap: 12px; }
  .ab-notice { padding: 18px; }
}


.fq-form { max-width: 560px; margin: 0 0 18px; }
.fq-form input { height: 56px; border-radius: var(--r-l); }
.fq-topics { position: sticky; top: var(--head-h); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.fq-topics a { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.fq-topics a small { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.fq-topics a:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.fq-grp { margin-top: 40px; scroll-margin-top: 70px; }
.fq-alias { display: block; height: 0; scroll-margin-top: 30px; }   
.fq-grp-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fq-grp-art { flex: 0 0 56px; height: 56px; border-radius: var(--r-l); overflow: hidden; background: var(--art-bg); border: 1px solid var(--line); }
.fq-grp-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fq-grp-h h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.fq-grp-n { font-size: 13px; font-weight: 800; padding: 1px 9px; border-radius: 999px; color: var(--link-ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }   
.fq-grp-go { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--link); }
.fq-list { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.fq-item { border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.fq-item:first-child { border-top: 0; }
.fq-item summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; transition: background .2s; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary:hover { background: var(--art-bg); }
.fq-item summary:hover b { color: var(--link); }
.fq-item summary:focus-visible { outline: 3px solid rgba(34,158,217,.6); outline-offset: -3px; }
.fq-item summary b { flex: 1; min-width: 0; font-size: 16.5px; line-height: 1.5; font-weight: 700; letter-spacing: -.02em; transition: color .2s; }
.fq-k { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--link-ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.fq-k.is-a { color: var(--on-brand); background: var(--primary); border-color: transparent; }   
.fq-chev { flex: 0 0 auto; width: 10px; height: 10px; margin: 0 4px 4px 0; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.fq-item[open] summary { background: var(--art-bg); }
.fq-item[open] summary b { color: var(--link-ink); }   
.fq-item[open] .fq-chev { transform: rotate(-135deg); margin-bottom: -4px; border-color: var(--link); }
.fq-rest { border-top: 1px solid var(--line); }
.fq-rest > summary { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 700; color: var(--link); }
.fq-rest > summary::-webkit-details-marker { display: none; }
.fq-rest > summary:hover { background: var(--art-bg); }
.fq-rest > summary .fq-chev { border-color: var(--link); }
.fq-rest[open] > summary { display: none; }
.fq-rest > .fq-item:first-of-type { border-top: 0; }
.fq-a { display: flex; gap: 14px; padding: 4px 22px 22px; background: var(--art-bg); }
.fq-a > div { flex: 1; min-width: 0; }
.fq-a p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.fq-a-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.fq-a-foot a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.fq-a-foot a:hover { text-decoration: none; border-color: var(--link); }
.fq-a-foot small { font-size: 12.5px; color: var(--muted); }
.fq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 56px; padding: 26px 28px; border-radius: var(--r-l); border: 1px solid var(--blue-line);
  background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--blue-soft); }
.fq-more h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.03em; }
.fq-more p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.fq-more-go { display: flex; flex-wrap: wrap; gap: 8px; }
.fq-more-go a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.fq-more-go a svg { color: var(--link); }
.fq-more-go a:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
@media (max-width: 640px) {
  .fq-topics { position: static; }
  .fq-grp-art { flex-basis: 44px; height: 44px; }
  .fq-grp-h h2 { font-size: 19px; }
  .fq-grp-go { display: none; }
  .fq-item summary { gap: 10px; padding: 14px 14px; }
  .fq-item summary b { font-size: 15.5px; }
  .fq-k { flex-basis: 28px; height: 28px; font-size: 13px; }
  .fq-a { gap: 10px; padding: 2px 14px 16px; }
  .fq-a p { font-size: 15px; }
  .fq-more { padding: 20px 18px; }
}


.ch-av { position: relative; flex: 0 0 var(--s); width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, #7FD2FA, #2AABEE 55%, #1F7AC0); box-shadow: 0 0 0 1px var(--line); }
.ch-av img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ch-av i { position: absolute; font-style: normal; font-weight: 800; font-size: calc(var(--s) * .42); color: #fff; }
.ch-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: 1px; border-radius: 50%; color: #fff; background: var(--brand-grad); }
.ch-ok.is-lg { width: 26px; height: 26px; margin-left: 10px; vertical-align: 4px; }
.ch-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); white-space: nowrap; }
.ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ch-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.ch-card:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ch-card:hover .ch-card-id b { color: var(--link); }
.ch-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch-card-id { display: flex; flex-direction: column; min-width: 0; }
.ch-card-id b { display: flex; align-items: center; min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; transition: color .2s; }
.ch-card-id b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-card-id b .ch-ok { flex: 0 0 auto; }
.ch-card-id small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-card-desc { flex: 1; font-size: 14px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ch-subs { margin-right: auto; font-size: 13px; color: var(--muted); }
.ch-subs b { font-size: 15px; font-weight: 800; color: var(--ink); }
.is-wait { color: var(--muted); font-weight: 600; }
.chl-form { max-width: 560px; margin: 0 0 18px; }
.chl-form input { height: 56px; border-radius: var(--r-l); }
.chl-rank { flex: 0 0 auto; font-size: 22px; font-weight: 800; color: var(--link-ink); min-width: 16px; }   
.chl-week-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chl-week-t b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chl-week-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chl-bar { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.chl-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 32px 0 24px; border-bottom: 1px solid var(--line); }
.chl-tabs a { padding: 10px 16px; margin-bottom: -1px; font-size: 15px; font-weight: 800; color: var(--muted); border-bottom: 3px solid transparent; }
.chl-tabs a:hover { text-decoration: none; color: var(--ink); }
.chl-tabs a.on { color: var(--ink); border-bottom-color: var(--brand); }
.chl-tabs small { font-size: 12px; font-weight: 700; color: var(--muted); }

.ch-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ch-nav a { flex: none; white-space: nowrap; }
.lh + .ch-nav { margin-top: 20px; }

@media (max-width: 600px) {
  .ch-nav { flex-wrap: wrap; overflow: visible; gap: 0 2px; }
  .ch-nav a { padding: 9px 10px; font-size: 14.5px; }
}
.chl-cats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.chr-hd { margin: 8px 0 0; }

.chl-colrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-row) var(--sp-gap); }
.chl-colrows .hm-tile b { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .chl-colrows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .chl-colrows { grid-template-columns: minmax(0, 1fr); } }
.chr-hd h1 { margin: 6px 0 8px; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.03em; }
.chr-hd p { margin: 0; max-width: 760px; color: var(--ink-2); line-height: 1.7; }
.chr-hd p + p { margin-top: 10px; }   
.chl-cats.is-sub { margin-top: 10px; }

.chl-lab { flex: none; align-self: center; min-width: 2.6em; font-size: 13px; font-weight: 800; color: var(--muted); }
.chr-up { font-size: 13px; font-weight: 700; color: var(--ok-ink); white-space: nowrap; }
.chr-hd b { white-space: nowrap; }
@media (max-width: 640px) {
  
  .chr-bar .chl-cats { flex-wrap: nowrap; align-items: center; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 0; scrollbar-width: none; }
  .chr-bar .chl-cats::-webkit-scrollbar { display: none; }
  .chr-bar .chl-cats a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .chr-bar .chl-lab { order: -3; min-width: 0; margin-right: 2px; }
  .chr-bar .chl-cats a:first-of-type { order: -2; }
  .chr-bar .chl-cats a.on:not(:first-of-type) { order: -1; }
  .chr-bar .chl-cats + .chl-cats { margin-top: 6px; }
}
.chl-cats a, .chl-more > summary { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.chl-cats a small, .chl-more > summary small { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.chl-cats a:hover, .chl-more > summary:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.chl-cats a.on { color: var(--on-brand); background: var(--primary); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(31,122,192,.8); }
.chl-cats a.on small { color: var(--on-brand); }
.chl-more { display: contents; }
.chl-more > summary { list-style: none; cursor: pointer; }
.chl-more > summary::-webkit-details-marker { display: none; }
.chl-more[open] > summary { display: none; }
.chl-more > div { display: contents; }
.chl-sort { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.chl-count { font-size: 15px; font-weight: 800; }
.chl-sort nav { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.chl-sort nav a { padding: 6px 12px; border-radius: var(--r-m); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.chl-sort nav a:hover { text-decoration: none; color: var(--link); }
.chl-sort nav a.on { background: var(--surface); color: var(--link); box-shadow: var(--sh-1); }
.ch-warn { display: flex; gap: 14px; align-items: flex-start; margin-top: 48px; padding: 18px 22px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--art-bg); }
.ch-warn p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.ch-warn b { color: var(--ink); }
.ch-warn-ic { flex: 0 0 auto; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--link); background: var(--surface); border: 1px solid var(--blue-line); }
.ch-warn.is-invest { border-color: color-mix(in srgb, #E8A33D 45%, var(--line)); background: color-mix(in srgb, #E8A33D 8%, var(--surface)); }
.ch-warn.is-invest .ch-warn-ic { color: #B86E0A; border-color: color-mix(in srgb, #E8A33D 45%, var(--line)); }
.ch-warn.is-side { margin: 0; }
.ch-warn.is-side b { display: block; margin-bottom: 4px; font-size: 15px; }
.ch-warn.is-side + .ch-warn.is-side { margin-top: 12px; }   
.chd-hd { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; overflow: hidden;
  margin: 0 0 36px; padding: 32px 36px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--art-bg); }
.chd-hd > .ch-av { box-shadow: 0 0 0 4px var(--surface), 0 18px 36px -18px rgba(20,90,160,.6); }
.chd-id { min-width: 0; }
.chd-id h1 { margin: 6px 0 2px; font-size: 34px; line-height: 1.25; letter-spacing: -.04em; font-weight: 800; word-break: keep-all; }
.chd-handle { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--muted); user-select: all; }
.chd-dormant { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.6; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.chd-dormant b { margin-right: 6px; font-weight: 800; }
.ch-act { align-self: flex-start; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--muted); }
.ch-act.is-dormant { padding: 1px 8px; border-radius: 6px; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.chd-stats b.is-sm { font-size: 18px; line-height: 1.5; }
.chd-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.chd-aud { font-size: 15px; color: var(--ink-2); }
.chd-aud b { margin-right: 8px; color: var(--ink); }
.chd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 16px 0 8px; }
.chd-facts div { padding: 12px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.chd-facts dt { font-size: 12px; font-weight: 800; color: var(--muted); }
.chd-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.chd-facts small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.chd-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chd-posts li { margin: 0; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.chd-posts p { margin: 6px 0; font-size: 15px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.chd-posts a { font-size: 13px; font-weight: 700; }
.chd-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.chd-post-meta time { font-weight: 700; color: var(--ink-2); }
.chd-post-k { padding: 0 6px; border-radius: 6px; background: var(--soft-2); }
.chd-post-v { margin-left: auto; }
.chd-report { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); }
.chd-report b { font-size: 15px; color: var(--ink); }
.chd-report p { margin: 6px 0 10px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.chd-report a { font-size: 14px; font-weight: 800; }
.chd-report small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.chd-report small a { font-size: 12px; font-weight: 600; }
.chl-submit { margin: 32px 0 0; padding: 14px 18px; border-radius: var(--r-l); background: var(--blue-soft); border: 1px solid var(--blue-line); font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.chl-submit a { color: var(--link-ink); }   
.chd-trend { margin: 0; color: var(--link); }
.chd-trend svg { display: block; width: 100%; height: 140px; border-radius: 12px; background: var(--soft); }
.chd-trend figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.chd-trend figcaption b { color: var(--ink); }
.chd-trend .is-up { color: var(--ok-ink); font-weight: 700; }
.chd-trend .is-down { color: var(--err-ink); font-weight: 700; }
.chd-stats b.is-dormant { color: var(--warn-ink); }
.chd-stats { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chd-stats li { display: flex; flex-direction: column; margin: 0; padding: 10px 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); min-width: 130px; }
.chd-stats span { font-size: 12px; font-weight: 800; color: var(--muted); }
.chd-stats b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--link); }
.chd-stats b.is-wait { font-size: 16px; color: var(--muted); }
.chd-stats small { font-size: 12px; color: var(--muted); }
.chd-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chd-cats .ch-tag:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.chd-open { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: var(--r-l); color: #fff; align-self: center;
  background: linear-gradient(135deg, #2AABEE 0%, #1F8FD8 55%, #1F7AC0 100%); box-shadow: 0 20px 36px -20px rgba(31,122,192,.95), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s, box-shadow .2s; }
.chd-open:hover { text-decoration: none; transform: translateY(-2px); }
.chd-open > svg { flex: 0 0 auto; }
.chd-open span { display: flex; flex-direction: column; }
.chd-open b { font-size: 17px; font-weight: 800; }
.chd-open small { font-size: 12.5px; opacity: .85; }
.chd-body { display: grid; grid-template-columns: minmax(0, 760px) 320px; justify-content: space-between; gap: 40px; }
.chd-sec { margin: 0 0 36px; }
.chd-sec h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.035em; }
.chd-sec p { margin: 0 0 10px; font-size: 16px; line-height: 1.8; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.chd-sec p.chd-src { font-size: 13px; color: var(--muted); }
.chd-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.chd-steps li { counter-increment: s; position: relative; margin: 0; padding: 14px 16px 14px 58px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); }
.chd-steps li::before { content: counter(s); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-m); font-size: 14px; font-weight: 800; color: #fff; background: var(--brand-grad); }
.chd-steps b { display: block; font-size: 15.5px; font-weight: 800; }
.chd-steps span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.chd-steps em { font-style: normal; font-weight: 700; padding: 1px 7px; border-radius: 6px; color: var(--ink); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.chd-side { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; }
@media (max-width: 1100px) {
  .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chd-body { grid-template-columns: minmax(0, 1fr); }
  .chd-side { position: static; }
  .chd-main > :last-child { margin-bottom: 0; }   
}
@media (max-width: 900px) {
  .chd-hd { grid-template-columns: auto minmax(0, 1fr); }
  .chd-open { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 640px) {
  .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  
  .ch-card { gap: 8px; padding: 14px 16px; }
  .ch-card-desc { -webkit-line-clamp: 1; }
  .chd-hd { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 24px 18px; gap: 16px; }
  .chd-hd > .ch-av { --s: 96px !important; }
  .chd-id h1 { font-size: 26px; }
  .chd-stats, .chd-cats { justify-content: center; }
  .chd-stats li { min-width: 0; flex: 1; }
  
  .chd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .chd-stats li { padding: 8px 4px; }
  .chd-stats span { font-size: 11.5px; }
  .chd-stats b { font-size: 19px; }
  .chd-stats b.is-sm, .chd-stats b.is-wait { font-size: 15px; }
  .chd-stats small { font-size: 11px; line-height: 1.35; word-break: keep-all; text-wrap: balance; }
}

@media (max-width: 640px) {
}


.stk-grid-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; }
.stk-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink); }
.stk-card:hover { text-decoration: none; }
.stk-card-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; border-radius: var(--r-l); background: var(--art-bg); border: 1px solid var(--line); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.stk-card-art img { width: 78%; height: 78%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.stk-card:hover .stk-card-art { border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.stk-card:hover .stk-card-art img { transform: scale(1.06) rotate(-2deg); }
.stk-card:hover b { color: var(--link); }
.stk-empty { display: grid; place-items: center; color: var(--line-2); font-style: normal; }
.stk-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--on-brand); background: var(--primary); box-shadow: 0 4px 10px -4px rgba(31,122,192,.8); }   
.stk-card b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.stk-card small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-card-n { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.stk-hd-art { display: grid; place-items: center; width: 180px; height: 180px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 36px -22px rgba(20,90,160,.6); }
.stk-hd-art img, .stk-hd-art video, .stk-hd-art .stk-lot { width: 82%; height: 82%; object-fit: contain; }

.stk-cell:has(> .stk-lot.is-fail:not([style*="background-image"])) { display: none; }
.stk-lot.is-fail { animation: none; }
.stk-en { margin: 2px 0 14px; font-size: 15px; font-weight: 600; color: var(--muted); }
.stk-desc { margin: 14px 0 0; max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
html:not(.js) .stk-vid { display: none; }   

.stk-more, .stk-more-c { display: none; }
.stk-prev { margin: 0 0 40px; }
.stk-prev h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.035em; }
.stk-prev h2 small { font-size: 14px; font-weight: 700; color: var(--muted); }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; padding: 18px; border-radius: 22px; background: var(--art-bg); border: 1px solid var(--line); }
.stk-cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--surface); overflow: hidden; }
.stk-cell img, .stk-cell video { width: 86%; height: 86%; object-fit: contain; }
.stk-lot { display: block; width: 86%; height: 86%; background: center / contain no-repeat; }
.stk-lot svg { display: block; }

.is-tint .stk-lot svg [fill^="rgb"] { fill: var(--ink); }
.is-tint .stk-lot svg [stroke^="rgb"] { stroke: var(--ink); }

.stk-lot:empty:not([style*="background-image"]) { border-radius: 14px; background: linear-gradient(100deg, var(--art-bg) 30%, color-mix(in srgb, var(--brand) 10%, var(--art-bg)) 50%, var(--art-bg) 70%) 0 0 / 250% 100%; animation: stk-wait 1.4s linear infinite; }
@keyframes stk-wait { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .stk-lot:empty { animation: none; } }
.stk-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.stk-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.stk-tags .ch-tag { padding: 6px 12px; font-size: 13.5px; }
.stk-tags .ch-tag:hover { text-decoration: none; border-color: var(--brand); color: var(--link); }
.sg-steps { max-width: 900px; }
.sg-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sg-cat { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.sg-cat:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.sg-cat:hover b { color: var(--link); }
.sg-cat-art { flex: 0 0 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: var(--art-bg); overflow: hidden; }
.sg-cat-art img { width: 80%; height: 80%; object-fit: contain; }
.sg-cat > span:last-child { display: flex; flex-direction: column; }
.sg-cat b { font-size: 16px; font-weight: 800; transition: color .2s; }
.sg-cat small { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .sg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) {
  .sg-hero .sg-chips { display: none; }   
  .sg-top .stk-card:nth-child(n+7) { display: none; }
  .sg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sg-cat { gap: 10px; padding: 10px; border-radius: 12px; }
  .sg-cat-art { flex-basis: 48px; height: 48px; border-radius: 10px; }
  .sg-cat b { font-size: 15px; }
  .sg-cat small { font-size: 12.5px; }
}
@media (max-width: 1100px) { .stk-grid-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .stk-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  
  .sk-hero .cs-lead, .sk-hero .cs-sum { display: none; }
  .sk-hero .chl-form { margin-top: 12px; }
  .stk-bar .chl-cats { gap: 6px; }
  .stk-bar .chl-cats a { padding: 6px 11px; font-size: 13.5px; }   
  .stk-bar .chl-lab { min-width: 0; margin-right: 2px; }
  .stk-card b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }   
  .stk-more-c { display: block; }
  .stk-desc.is-long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .stk-more { display: inline-block; margin-top: 4px; padding: 4px 8px; font-size: 14px; font-weight: 700; color: var(--link); cursor: pointer; }
  .stk-more-c:focus-visible + .stk-desc + .stk-more { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
  .stk-more-c:checked + .stk-desc { display: block; }
  .stk-more-c:checked + .stk-desc + .stk-more { display: none; }
  .stk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 18px; }
  .stk-cell { border-radius: 10px; }
}


.bt-jump { margin: 0 0 8px; }
.bt-jump a small { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.bt-more, .bt-more-c { display: none; }
@media (max-width: 640px) {
  .bt-jump { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 0; scrollbar-width: none; }
  .bt-jump::-webkit-scrollbar { display: none; }
  .bt-jump a { flex: none; padding: 6px 12px; font-size: 13.5px; }
  .bt-more-c { display: block; }
  .bt-intro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .bt-more { display: inline-block; margin: 2px 0 0 -8px; padding: 4px 8px; font-size: 14px; font-weight: 700; color: var(--link); cursor: pointer; }
  .bt-more-c:focus-visible ~ .bt-more { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
  .bt-more-c:checked + .bt-intro { display: block; }
  .bt-more-c:checked ~ .bt-more { display: none; }
  .bt-more-c:not(:checked) ~ .chd-src { display: none; }   
  .bt-card .ch-card-desc { -webkit-line-clamp: 2; }
}


.sr-hero h1 em { font-style: normal; color: var(--link-ink); }
.sr-help h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--muted); }
.sr-help ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.sr-help li { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sr-hero + * { margin-top: 28px; }
@media (max-width: 640px) {
  .sr-hero .cs-sum { display: none; }
  .sr-hero .sh-form { margin-top: 12px; }
  .sr-hero + * { margin-top: 20px; }
}


.ct-sum .cs-nums dd.is-date { padding-top: 3px; font-size: 16px; white-space: nowrap; }
.ct-sum .cs-note svg { color: var(--ok-ink); }
.ct-hero + * { margin-top: 32px; }
@media (max-width: 640px) {
  .cs-sum.ct-sum { flex: 1 0 100%; }
  .ct-sum .cs-note { display: none; }
  .ct-sum .cs-nums dd.is-date { padding-top: 0; font-size: 14px; }
  .ct-hero + * { margin-top: 20px; }
}


.ar-hero .tg-snav { margin: -4px 0 22px; }
.ar-hero .cs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; }
.ar-hero.has-art .cs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.ar-hero .cs-copy h1 { margin: 12px 0 14px; text-wrap: balance; }
.ar-hero .ah-desc { margin: 0; font-size: 16.5px; }
.ar-hero .ah-meta { margin-top: 18px; }
.ar-hero .ah-meta li { background: var(--surface); }
.ar-hero .tg-share-c { margin-top: 14px; }
.ar-hero .ah-art { border-radius: var(--r-l); }
.ar-sum .cs-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
.ar-sum .cs-nums div, .ar-sum .cs-nums div:first-child { padding: 0 12px; border-left: 1px solid var(--line); }
.ar-sum .cs-nums div:nth-child(odd) { padding-left: 0; border-left: 0; }
.ar-sum .cs-nums dd.is-sm { padding-top: 3px; font-size: 15.5px; line-height: 1.4; }
.ar-sum .cs-note svg { color: var(--ok-ink); }
.ar-hero + .tg-doc { margin-top: 32px; }
@media (max-width: 900px) {
  .ar-hero .cs-grid, .ar-hero.has-art .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .ar-hero .ah-art { order: -1; max-width: 520px; }
}
@media (max-width: 640px) {
  .ar-hero .tg-snav { margin-bottom: 14px; }
  .ar-hero .ah-art { width: 52%; margin-bottom: 12px; }   
  .ar-hero .cs-copy h1 { margin: 8px 0 10px; }
  .ar-hero .ah-desc { font-size: 15px; }
  .ar-hero .ah-meta { margin-top: 12px; }
  .cs-sum.ar-sum { flex: 1 0 100%; margin-top: 12px; }
  .ar-hero .cs-copy > .tg-share-c { margin-left: 0; }
  .ar-sum .cs-nums { display: flex; flex-wrap: wrap; gap: 2px 14px; }   /* tgway: English 'Applies to' runs long - wrap instead of squeezing five cells into one row */
  .ar-sum .cs-nums div, .ar-sum .cs-nums div:first-child, .ar-sum .cs-nums div:nth-child(odd) { max-width: 100%; padding: 0; border: 0; }
  .ar-sum .cs-nums dd.is-sm { padding-top: 0; font-size: 14px; }
  .ar-sum .cs-note { display: none; }
  .ar-hero + .tg-doc { margin-top: 20px; }
}


.fq-hero .fq-form { margin: 18px 0 0; }
.fq-sum .cs-nums dd.is-date { padding-top: 3px; font-size: 16px; white-space: nowrap; }
.fq-hero + * { margin-top: 24px; }
@media (max-width: 640px) {
  .fq-hero .fq-form { margin-top: 14px; }
  .fq-hero + * { margin-top: 12px; }
}


.ab-sum .cs-nums dd.is-date { padding-top: 3px; font-size: 16px; }
.ab-sum .cs-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }   
.ab-sum .cs-nums div, .ab-sum .cs-nums div:first-child { padding: 0 12px; border-left: 1px solid var(--line); }
.ab-sum .cs-nums div:nth-child(odd) { padding-left: 0; border-left: 0; }
.ab-sum .cs-nums dd { white-space: nowrap; }
.ab-sum .cs-note svg { color: var(--link); }
@media (max-width: 640px) {
  .cs-sum.ab-sum { flex: 1 0 100%; }
  .ab-sum .cs-nums { display: flex; row-gap: 2px; }
  .ab-sum .cs-nums div, .ab-sum .cs-nums div:first-child, .ab-sum .cs-nums div:nth-child(odd) { padding: 0; border: 0; }
  .ab-sum .cs-note { display: none; }
  .ab-sum .cs-nums dd.is-date { padding-top: 0; font-size: 14px; }
}


.gl-hero .cs-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.cs-copy .gl-about { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.gl-sum .gl-where { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.gl-sum .cs-nums dt { white-space: nowrap; }
@media (max-width: 900px) {
  .gl-hero .cs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cs-sum.gl-sum { flex: 1 0 100%; gap: 12px; }
  .gl-hero .gl-about, .gl-sum .cs-note { display: none; }
  .gl-sum .cs-nums div:last-child { display: flex; }
  .gl-sum .gl-where { width: 100%; }
}


.hb-hero .hb-search { margin-top: 18px; }
.hb-hero .hb-jump { margin-top: 18px; }
.hb-sum .cs-nums dd.is-date { padding-top: 3px; font-size: 16px; }
.hb-hero + :not(.tg-sec) { margin-top: 32px; }
@media (max-width: 640px) {
  .cs-sum.hb-sum { flex: 1 0 100%; }
  .hb-hero .hb-search, .hb-hero .hb-jump { margin-top: 14px; }
  .hb-sum .cs-nums dd.is-date { padding-top: 0; font-size: 14px; }
  .hb-hero + :not(.tg-sec) { margin-top: 24px; }
}


.tp-hero .cs-rest { font-size: 14.5px; }
.tp-sum .cs-nums dd.is-date { padding-top: 3px; font-size: 16px; }
.tp-first h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--muted); }
.tp-first ol { list-style: none; margin: 0; padding: 0; counter-reset: f; display: grid; gap: 2px; }
.tp-first li { counter-increment: f; }
.tp-first a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.tp-first a::before { content: counter(f); flex: none; min-width: 16px; font-size: 13px; font-weight: 800; color: var(--link-ink); }
.tp-first a:hover { text-decoration: none; color: var(--link); }
.tp-hero + .tg-snav { margin-top: 20px; }
@media (max-width: 640px) {
  .tp-hero .cs-rest { display: none; }
  .tp-first { display: none; }
  .cs-sum.tp-sum { flex: 1 0 100%; }
  .tp-sum .cs-nums dd.is-date { padding-top: 0; font-size: 14px; }
}


.sg-chips { margin-top: 18px; }
.sg-how { margin-top: 8px; }
.sg-how .sg-steps { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sg-how .sg-steps li { padding: 58px 18px 18px; }   
.sg-how .sg-steps li::before { top: 18px; left: 18px; }
.sg-alt { margin-top: 56px; }
.sg-alt + .tg-sec, .sg-alt + .ch-warn { margin-top: 56px; }
.sg-cat { border-radius: var(--r-l); }
.sg-cat-art { border-radius: var(--r-m); }
@media (max-width: 900px) {
  .sg-how .sg-steps { grid-template-columns: minmax(0, 1fr); }
  .sg-how .sg-steps li { padding: 14px 16px 14px 58px; }
  .sg-how .sg-steps li::before { top: 14px; left: 16px; }
}
@media (max-width: 640px) {
  .sk-hero.sg-hero .cs-lead { display: block; }   
  .sg-alt { margin-top: 40px; }
  .sg-alt + .tg-sec, .sg-alt + .ch-warn { margin-top: 40px; }
}


.sd-hero .stk-hd-art { flex: none; width: 132px; height: 132px; border-radius: var(--r-l); }
.sd-hero .stk-en { margin: 2px 0 0; }
.cs-copy.cd-id .stk-desc { margin: 16px 0 0; max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.sd-hero .cs-nums dd a { color: var(--ink); }
.sd-hero .cs-nums dd a:hover { color: var(--link); }
.stk-grid { border-radius: var(--r-l); }
.stk-cell { border-radius: var(--r-m); }
@media (max-width: 640px) {
  .sd-hero .stk-hd-art { width: 88px; height: 88px; }
  .cs-copy.cd-id .stk-desc { margin-top: 12px; font-size: 14.5px; }
  .sd-hero .stk-more { margin: 2px 0 0 -8px; }
}


.sk-hero .chl-form { margin: 18px 0 0; }
.sk-faces { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-faces img { width: 64px; height: 64px; padding: 4px; object-fit: contain; border-radius: var(--r-m); background: var(--soft); border: 1px solid var(--line); }
.sk-guides { margin-top: 56px; }
@media (max-width: 640px) { .sk-guides { margin-top: 40px; } }


.cd-top { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cd-top > .ch-av { box-shadow: 0 0 0 4px var(--surface), 0 18px 36px -18px rgba(20,90,160,.6); }
.cd-top > div { min-width: 0; }
.cs-copy.cd-id h1 { display: flex; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; font-size: clamp(26px, 3vw, 34px); line-height: 1.25; letter-spacing: -.04em; font-weight: 800; word-break: keep-all; }
.cd-id .chd-handle { margin: 0; }
.cd-id .chd-dormant { margin: 16px 0 0; }
.cd-id .chd-cats { margin-top: 16px; }
.cd-id .tg-share-c { margin-top: 14px; }
.cd-sum .cs-nums dd.is-sm { padding-top: 4px; font-size: 16px; }
.cd-sum .cs-nums dd.is-dormant { color: var(--warn-ink); }
.cd-sum .cs-nums .is-wait { font-size: 16px; color: var(--muted); }
.cd-sum .cd-open { align-self: stretch; justify-content: center; }
.cd-src { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.chd-side.cd-side { position: static; display: flex; flex-direction: column; gap: 14px; }   
.cd-side .chd-report { margin-top: 0; }
.cd-toc ol { counter-reset: t; }
.cd-toc a { gap: 8px; font-size: 14px; font-weight: 700; }
.cd-toc a::before { counter-increment: t; content: counter(t); flex: none; min-width: 18px; font-size: 12px; font-weight: 800; color: var(--muted); }
.cd-cols .chl-colrows { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cd-cols .hm-tile { min-height: 0; padding: 10px 12px; }
.cd-same { margin-top: 24px; }
@media (max-width: 1100px) {
  .chd-side.cd-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .cd-sum .cd-open { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .cd-hero .cs-copy > .tg-share-c { order: 0; flex: 1 0 100%; margin: 12px 0 0; }
  .cs-sum.cd-sum { flex: 1 0 100%; gap: 10px; }
  .cd-top { gap: 14px; }
  .cd-top > .ch-av { --s: 72px !important; }
  .cs-copy.cd-id h1 { margin-top: 4px; font-size: 22px; }
  .cd-id .chd-handle { font-size: 14px; }
  .cd-id .chd-cats { margin-top: 12px; }
  .cd-sum .cs-nums dd.is-sm { padding-top: 0; font-size: 14px; }
  .cd-src { display: none; }
  .chd-side.cd-side { grid-template-columns: minmax(0, 1fr); }
}


.cs-sum.cn-sum { gap: 14px; }
.cn-sum h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cn-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cn-topics a { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; padding: 7px 12px; border-radius: var(--r-m); font-size: 13.5px; font-weight: 650; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); }
.cn-topics a:hover { text-decoration: none; border-color: var(--blue-line); color: var(--link); }
.cn-topics a small { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); }
.cn-topics a.on { color: var(--on-brand); background: var(--primary); border-color: transparent; }
.cn-topics a.on small { color: var(--on-brand); }
.cs-nums dd.is-date { padding-top: 3px; font-size: 16px; }
@media (max-width: 900px) {
  .cn-topics { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 640px) {
  .cs-sum.cn-sum { flex: 1 0 100%; gap: 8px; }
  .cn-sum h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cn-topics { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 0; scrollbar-width: none; }
  .cn-topics::-webkit-scrollbar { display: none; }
  .cn-topics a { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--surface); }
  .cs-nums dd.is-date { padding-top: 0; font-size: 14px; }
}


.bt-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 40px; align-items: start; }
.bt-main { min-width: 0; }
.bt-main > .bt-jump { margin: 0 0 32px; }
.bt-sec { scroll-margin-top: calc(var(--head-h) + 16px); }
.bt-sec + .bt-sec { margin-top: 40px; }
.bt-sec h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; font-size: 20px; letter-spacing: -.03em; }
.bt-sec h2 small { font-size: 14px; font-weight: 700; color: var(--muted); }
.bt-main .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.bt-main .bt-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; padding: 16px 18px; }
.bt-main .bt-card .ch-card-top { display: contents; }
.bt-main .bt-card .ch-av { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.bt-main .bt-card .ch-card-id, .bt-main .bt-card .ch-card-desc, .bt-main .bt-card .ch-card-foot { grid-column: 2; }
.bt-main .bt-card .ch-card-desc { -webkit-line-clamp: 2; font-size: 13.5px; }
.bt-side { position: sticky; top: calc(var(--head-h) + 24px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bt-mu { flex: none; font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }
@media (max-height: 640px) { .bt-side { position: static; } }   
@media (max-width: 1100px) {
  .bt-body { grid-template-columns: minmax(0, 1fr); }
  .bt-side { position: static; margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 640px) {
  .bt-main > .bt-jump { margin-bottom: 20px; }
  .bt-main .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bt-main .bt-card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 14px; }
  .bt-main .bt-card .ch-av { --s: 40px !important; }
  .bt-sec + .bt-sec { margin-top: 32px; }
  .bt-sec h2 { margin-bottom: 10px; font-size: 18px; }
  .bt-side { grid-template-columns: minmax(0, 1fr); }
}


.rk-week { margin-top: 14px !important; font-size: 14px; color: var(--ink-2); }
.rk-week b { color: var(--ink); }
.cs-sum.rk-podium { gap: 14px; }
.rk-podium h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.rk-podium h2 small { margin-left: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.rk-podium ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rk-podium a { display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
.rk-podium a:hover { text-decoration: none; border-color: var(--blue-line); }
.rk-podium .is-1 a { background: var(--blue-soft); border-color: var(--blue-line); }
.rk-pn { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-align: center; color: var(--link-ink); font-variant-numeric: tabular-nums; }
.rk-pt { display: flex; flex-direction: column; min-width: 0; }
.rk-pt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.rk-pt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.rk-pv { font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.rk-body { margin-top: 8px; }
.rk-list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.rk-list li { display: grid; grid-template-columns: 36px 52px minmax(0, 1fr) 150px; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--line); }
.rk-list li:first-child { border-top: 0; }
.rk-list li:hover { background: var(--soft); }
.rk-list.no-move li { grid-template-columns: 36px minmax(0, 1fr) 150px; }
.rk-n { font-size: 17px; font-weight: 800; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.rk-mv em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.rk-mv .is-up { color: var(--ok-ink); }
.rk-mv .is-down { color: var(--err-ink); }
.rk-mv .is-new { padding: 1px 6px; border-radius: 6px; color: var(--link-ink); background: var(--blue-soft); }
.rk-ch { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.rk-ch:hover { text-decoration: none; color: var(--link); }
.rk-ch > span { display: flex; flex-direction: column; min-width: 0; }
.rk-ch b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.rk-ch small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.rk-val { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rk-val b { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-val i { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--soft-2); overflow: hidden; }
.rk-val s { display: block; height: 100%; margin-left: auto; border-radius: 2px; background: var(--brand); }
.rk-more { margin-top: 12px; }
.rk-more > summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: var(--r-l); border: 1px dashed var(--line-2); font-size: 14.5px; font-weight: 800; color: var(--link-ink); cursor: pointer; list-style: none; }
.rk-more > summary::-webkit-details-marker { display: none; }
.rk-more > summary::after { content: "↓"; }
.rk-more[open] > summary { margin-bottom: 12px; }
.rk-more[open] > summary::after { content: "↑"; }
.rk-more > summary small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rk-more > summary:hover { border-color: var(--blue-line); background: var(--soft); }
.rk-more > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.rk-src { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.cs-side.rk-side { position: static; }   
.rk-box { padding: 18px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.rk-box h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.rk-box ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }   
.rk-box ol a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink); }
.rk-box ol a:hover { text-decoration: none; }
.rk-box ol a:hover b { color: var(--link); }
.rk-box ol b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.rk-bn { flex: none; min-width: 20px; font-size: 13px; font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rk-tag { flex: none; padding: 1px 6px; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--link-ink); background: var(--blue-soft); }
.hm-rank { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-gap); }   /* home: one ranking box per topic */
.hm-rank .rk-box h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.hm-rank .rk-box h3 a { color: var(--ink); }
.hm-rank .rk-box h3 a:hover { color: var(--link); text-decoration: none; }
.hm-rank .rk-box h3 i { font-style: normal; color: var(--muted); }
.hm-rank .rk-v { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Home site notice (2026-10-14) */
.hm-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; padding: 12px 16px; border-radius: var(--r-l); border: 1px solid var(--blue-line); background: var(--blue-soft); color: var(--ink); font-size: 14px; line-height: 1.5; }
.hm-notice-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--link); }
.hm-notice-t { flex: 1 1 260px; min-width: 0; }
.hm-notice-a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--link); white-space: nowrap; }

/* Home glossary block (2026-10-14) */
.hm-gl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-gl li { margin: 0; min-width: 0; }
.hm-gl-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px 18px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.hm-gl-card:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.hm-gl-card > b { font-size: 16px; letter-spacing: -.02em; }
.hm-gl-card dl { margin: 0; display: grid; gap: 4px; }
.hm-gl-card dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); }
.hm-gl-card dt { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.hm-gl-card dd { margin: 0; font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hm-gl-card dd.is-alt { color: var(--link); }
.hm-gl-card dd.is-none { color: var(--muted); font-weight: 400; }
@media (max-width: 1000px) { .hm-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hm-gl { grid-template-columns: minmax(0, 1fr); } }

/* Home Mini App directory panel (2026-10-14) */
.hm-madir { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; }
.hm-madir-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 10px; align-content: center; padding: 18px 20px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.hm-madir-main:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.hm-madir-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-line); color: var(--link); }
.hm-madir-t { display: grid; gap: 4px; min-width: 0; }
.hm-madir-t b { font-size: 16px; }
.hm-madir-t small { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.hm-madir-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--link); }
.hm-madir-note { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.hm-madir-note svg { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 760px) { .hm-madir { grid-template-columns: minmax(0, 1fr); } }
.hm-rank-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.rk-box > p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.rk-defs dl { margin: 0; display: grid; gap: 10px; }
.rk-defs dl div { padding-left: 10px; border-left: 3px solid var(--line); }
.rk-defs dl div.is-on { border-left-color: var(--brand); }
.rk-defs dt { font-size: 13.5px; font-weight: 800; }
.rk-defs dt a { color: var(--ink); }
.rk-defs .is-on dt a { color: var(--link-ink); }
.rk-defs dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1100px) {
  .cs-side.rk-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .rk-podium ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-podium a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n av" "t t" "v v"; gap: 6px 10px; }
  .rk-pn { grid-area: n; } .rk-podium .ch-av { grid-area: av; justify-self: end; } .rk-pt { grid-area: t; } .rk-pv { grid-area: v; }
}
@media (max-width: 640px) {
  .rk-week { margin-top: 10px !important; }
  .cs-sum.rk-podium { flex: 1 0 100%; }
  .rk-podium .cs-nums div:last-child { display: flex; }
  .rk-podium h2 { font-size: 14px; }
  .rk-podium ol { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rk-podium a { grid-template-columns: 22px auto minmax(0, 1fr) auto; grid-template-areas: none; gap: 10px; padding: 8px 10px; background: var(--surface); }
  .rk-pn, .rk-podium .ch-av, .rk-pt, .rk-pv { grid-area: auto; }
  .rk-podium .ch-av { --s: 36px !important; justify-self: auto; }
  .rk-pn { font-size: 18px; }
  .rk-pv { font-size: 15px; }
  .rk-list li, .rk-list.no-move li { grid-template-columns: 28px minmax(0, 1fr) 76px; gap: 0 10px; padding: 8px 12px; }
  .rk-list .rk-n { grid-column: 1; grid-row: 1; align-self: end; font-size: 15px; }
  .rk-list .rk-mv { grid-column: 1; grid-row: 2; align-self: start; text-align: center; }
  .rk-list .rk-mv em { font-size: 11px; }
  .rk-list .rk-mv .is-new { padding: 0 3px; }
  .rk-list .rk-ch { grid-column: 2; grid-row: 1 / span 2; gap: 10px; }
  .rk-list .rk-ch .ch-av { --s: 34px !important; }
  .rk-list .rk-val { grid-column: 3; grid-row: 1 / span 2; }
  .rk-list.no-move .rk-n { grid-row: 1 / span 2; align-self: center; }
  .rk-val b { font-size: 14px; }
  .cs-side.rk-side { grid-template-columns: minmax(0, 1fr); }
}


.cl-hero .chl-form { margin: 18px 0 0; }
.cl-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main week" "main side"; grid-template-rows: auto 1fr; gap: 0 40px; }
.cl-main { grid-area: main; min-width: 0; }
.cl-main .chl-bar { scroll-margin-top: calc(var(--head-h) + 16px); }
.cl-main .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-week { grid-area: week; min-width: 0; margin-bottom: 16px; padding: 18px; border-radius: var(--r-l); border: 1px solid var(--blue-line); background: var(--blue-soft); }
.cl-week h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cl-week ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-week li { margin: 0; min-width: 0; }
.cl-week a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 8px 10px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.cl-week a:hover { text-decoration: none; border-color: var(--brand); }
.cl-week .chl-rank { font-size: 17px; min-width: 14px; }
.cl-week-n { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cl-week-n b { font-size: 14px; color: var(--link-ink); }
.cl-src { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.cl-side { grid-area: side; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cl-cols { padding: 18px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.cl-side-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cl-side-h h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cl-side-h a { font-size: 13px; font-weight: 700; color: var(--link-ink); white-space: nowrap; }
.cl-cols > p { margin: 4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cl-side .chl-colrows { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cl-side .hm-tile { min-height: 0; padding: 10px 12px; }
.cl-side .chl-submit { margin: 0; }
.cl-guides { margin-top: 64px; }
@media (max-width: 1100px) {
  .cl-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "week" "main" "side"; grid-template-rows: auto; gap: 0; }
  .cl-week { margin-bottom: 20px; }
  .cl-week ol { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .cl-side { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cl-side .cl-cols { grid-row: span 2; }
}
@media (max-width: 640px) {
  .cl-hero .chl-form { margin-top: 14px; }
  .cl-hero .cs-note { display: none; }   
  .cl-main .ch-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-week { margin-inline: -16px; padding: 14px 16px; border-radius: 0; border-inline: 0; }
  .cl-week ol { grid-auto-columns: 72%; margin-right: -16px; padding-right: 16px; }
  .cl-src { display: none; }
  .cl-side { grid-template-columns: minmax(0, 1fr); }
  .cl-side .cl-cols { grid-row: auto; }
  .cl-guides { margin-top: 48px; }
}


.cs-hero { margin: -28px calc(50% - 50vw) 0; padding: 20px calc(50vw - 50%) 40px; background: var(--sec-alt); border-bottom: 1px solid var(--sec-line); --link: var(--link-ink); }
.cs-hero .tg-crumb { margin-bottom: 18px; }
.cs-hero .tg-crumb a { color: var(--ink-2); }
.cs-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.cs-copy h1 { margin: 8px 0 14px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.25; letter-spacing: -.04em; font-weight: 800; word-break: keep-all; text-wrap: balance; }
.cs-copy p { margin: 0; max-width: 680px; line-height: 1.75; color: var(--ink-2); word-break: keep-all; }
.cs-copy .cs-lead { font-size: 17px; color: var(--ink); }
.cs-copy .cs-rest { margin-top: 10px; font-size: 15px; }
.cs-copy .chd-src { margin-top: 14px; font-size: 13px; color: var(--muted); }
.cs-copy .tg-share-c { margin-top: 14px; }
.cs-sum { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.cs-avs { display: flex; }
.cs-avs .ch-av { box-shadow: 0 0 0 3px var(--surface); }
.cs-avs .ch-av + .ch-av { margin-left: -10px; }
.cs-nums { display: flex; margin: 0; padding: 12px 0; border-block: 1px solid var(--line); }
.cs-nums div { flex: 1 1 0; min-width: 0; padding: 0 12px; }
.cs-nums div:first-child { padding-left: 0; }
.cs-nums div + div { border-left: 1px solid var(--line); }
.cs-nums dt { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--muted); }
.cs-nums dd { margin: 4px 0 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }
.cs-nums small { margin-left: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.cs-jump { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cs-jump a { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0; font-size: 14px; color: var(--ink); }
.cs-jump a:hover { text-decoration: none; color: var(--link); }
.cs-jump span { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-jump b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cs-jump .ch-ok { flex: none; width: 15px; height: 15px; margin-left: -2px; vertical-align: 0; }
.cs-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.cs-h { margin: 0 0 14px; font-size: 20px; letter-spacing: -.03em; }
.cs-h small { margin-left: 4px; font-size: 15px; font-weight: 700; color: var(--muted); }
.cp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cp { scroll-margin-top: calc(var(--head-h) + 16px); padding: 22px 24px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s; }
.cp:hover { border-color: var(--blue-line); }
.cp:target { border-color: var(--brand); box-shadow: 0 0 0 3px var(--blue-soft); }
.cp-top { display: flex; align-items: center; gap: 14px; }
.cp-n { flex: none; align-self: flex-start; min-width: 20px; padding-top: 2px; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-av { flex: none; display: block; border-radius: 50%; }
.cp-av:hover { text-decoration: none; }
.cp.is-dormant .cp-av .ch-av { filter: grayscale(1); }
.cp-id { min-width: 0; }
.cp-id h3 { display: flex; align-items: center; min-width: 0; margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.025em; font-weight: 800; }
.cp-id h3 a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cp-id h3 a:hover { text-decoration: none; color: var(--link); }
.cp-id h3 .ch-ok { flex: 0 0 auto; }
.cp-id p > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-id p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.cp-note { position: relative; max-width: 680px; margin: 16px 0 0; padding-left: 16px; font-size: 16px; line-height: 1.75; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.cp-note::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: var(--brand); }
.cp-desc { max-width: 680px; margin: 8px 0 0; padding-left: 16px; font-size: 13.5px; line-height: 1.65; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cp-desc.is-only { margin-top: 14px; padding-left: 0; font-size: 15px; color: var(--ink-2); -webkit-line-clamp: 3; }
.cp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cp-stats { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.cp-stats dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.cp-stats dd { margin: 1px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cp-stats .is-wait { font-size: 14px; font-weight: 600; color: var(--muted); }
.cp-stats .is-dormant dd { color: var(--warn-ink); }
.cp-go { display: flex; align-items: center; gap: 16px; }
.cp-open { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-m); font-size: 14.5px; font-weight: 800; color: var(--on-brand); background: var(--primary); box-shadow: var(--sh-1); }
.cp-open:hover { text-decoration: none; color: var(--on-brand); background: var(--primary-hover); }
.cp-more { font-size: 14px; font-weight: 700; color: var(--link-ink); white-space: nowrap; }
.cs-side { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 16px; }
.cs-guides { padding: 18px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.cs-guides h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cs-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cs-g { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.cs-g:hover { text-decoration: none; }
.cs-g:hover b { color: var(--link); }
.cs-g-art { flex: 0 0 88px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-s); background: var(--thumb-bg); color: var(--icon); }
.cs-g-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-g-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-g b { font-size: 14px; line-height: 1.45; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color .15s; }
.cs-g small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cs-others { margin-top: 64px; }
.cs-others .hm-sub a { order: 2; font-size: 14px; font-weight: 700; color: var(--link-ink); white-space: nowrap; }
@media (max-width: 1100px) {
  .cs-grid { gap: 28px; }
  .cs-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cs-side { position: static; }
  .cs-guides ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
}

@media (max-width: 900px) {
  .cs-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cs-jump { display: none; }
  .cs-sum { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .cs-nums { flex: 1 1 360px; padding: 0; border: 0; }
}

@media (max-width: 640px) {
  .cs-hero { padding-bottom: 24px; }
  .cs-copy h1 { margin-bottom: 10px; font-size: 24px; }
  .cs-copy .cs-lead { font-size: 16px; }
  .bt-more-c:not(:checked) ~ .cs-rest { display: none; }
  .cs-copy .bt-more + p { margin-top: 10px; }
  
  .cs-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
  .cs-copy { display: contents; }
  .cs-copy > * { flex: 1 0 100%; }
  .cs-copy > .tg-share-c { order: 3; flex: none; align-self: flex-start; margin: 14px 0 0 12px; }
  .cs-sum { order: 2; flex: 1 1 200px; min-width: 0; margin-top: 14px; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; }
  .cs-hero + .ch-nav { margin-top: 16px; }
  .cs-avs .ch-av { --s: 32px !important; box-shadow: 0 0 0 2px var(--sec-alt); }
  .cs-avs .ch-av:nth-child(n+6) { display: none; }
  .cs-avs .ch-av + .ch-av { margin-left: -8px; }
  .cs-nums { flex: none; flex-wrap: wrap; gap: 2px 12px; padding: 0; border: 0; }
  .cs-nums div, .cs-nums div:first-child { display: flex; align-items: baseline; gap: 4px; flex: none; padding: 0; border: 0 !important; }
  .cs-nums div:last-child { display: none; }
  .cs-nums dt { font-size: 13px; font-weight: 600; }
  .cs-nums dd { margin: 0; font-size: 14px; }
  .cs-nums small { margin: 0; font-size: 13px; color: var(--ink); }
  .cs-jump { display: none; }
  .cs-h { font-size: 18px; }
  .cp-list { gap: 12px; }
  .cp { padding: 16px; }
  .cp-top { gap: 12px; }
  .cp-n { min-width: 0; font-size: 12px; }
  .cp-av .ch-av { --s: 48px !important; }
  .cp-id h3 { font-size: 17px; }
  .cp-id p { font-size: 13px; }
  .cp-note { margin-top: 12px; padding-left: 12px; font-size: 15px; line-height: 1.7; }
  .cp-desc { display: none; }
  .cp-desc.is-only { display: -webkit-box; margin-top: 12px; }
  .cp-foot { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 14px; padding-top: 12px; }
  .cp-stats { gap: 2px 16px; }
  .cp-stats div { display: flex; align-items: baseline; gap: 5px; }
  .cp-stats dd { margin: 0; font-size: 14px; }
  .cp-go { justify-content: space-between; }
  .cp-open { flex: 1; justify-content: center; height: 44px; }
  .cs-guides ul { grid-template-columns: minmax(0, 1fr); }
  .cs-others { margin-top: 48px; }
}

.cs-copy .hb-jump { margin-top: 20px; }
.cs-sum.is-all .cs-avs { overflow: hidden; margin: -3px; padding: 3px; }
.cs-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cs-note svg { flex: none; color: var(--ok-ink); }
.ch-nav + .cc-sec { margin-top: 12px; }   
.cc-sec .tg-sec-h h2 small { font-size: 15px; font-weight: 700; color: var(--muted); }
.cc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cc-grid li { display: flex; min-width: 0; }
@media (min-width: 1101px) { .cc-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* home: 4 collections in one row */
.cc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cc:hover { text-decoration: none; border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cc-avs { display: flex; }
.cc-avs .ch-av { box-shadow: 0 0 0 2px var(--surface); }
.cc-avs .ch-av + .ch-av { margin-left: -8px; }
.cc-n { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cc-n b { font-size: 16px; font-weight: 800; color: var(--ink); }
.cc-t { font-size: 18px; line-height: 1.4; font-weight: 800; letter-spacing: -.025em; word-break: keep-all; transition: color .15s; }
.cc:hover .cc-t { color: var(--link); }
.cc-sub { margin-top: -4px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--link-ink); word-break: keep-all; }
.cc-desc { font-size: 14px; line-height: 1.65; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cc-names { font-size: 13px; line-height: 1.5; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.cc-foot em { font-style: normal; font-size: 13.5px; font-weight: 800; color: var(--link-ink); white-space: nowrap; }
@media (max-width: 1100px) { .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-sum.is-all .cs-avs .ch-av:nth-child(n+10) { display: none; } }
@media (max-width: 640px) {
  .hb-jump-tail { display: none; }
  .cs-copy .hb-jump { margin-top: 14px; }
  .cs-sum.is-all .cs-nums div:last-child { display: flex; }
  .cc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cc { gap: 6px; padding: 16px; }
  .cc-top { margin-bottom: 4px; }
  .cc-avs .ch-av { --s: 30px !important; }
  .cc-t { font-size: 17px; }
  .cc-desc { display: none; }   
  .cc-names { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .cc-foot { display: none; }   
}


.gi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) {   
  .gi-hd .lh-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -22px; padding: 2px 22px 2px 0; scrollbar-width: none; }
  .gi-hd .lh-chips::-webkit-scrollbar { display: none; }
  .gi-hd .lh-chips a { flex: none; padding: 6px 12px; font-size: 13.5px; }
}
.gi-card { display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.gi-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink); transition: background .2s; }
.gi-head:hover { text-decoration: none; background: var(--art-bg); }
.gi-head:hover b { color: var(--link); }
.gi-art { flex: 0 0 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--art-bg); overflow: hidden; color: var(--link); }
.gi-art img { width: 100%; height: 100%; object-fit: cover; }
.gi-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gi-t b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; transition: color .2s; }
.gi-t small { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.gi-n { flex: 0 0 auto; font-size: 13px; font-weight: 800; padding: 2px 10px; border-radius: 999px; color: var(--link); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.gi-first { list-style: none; counter-reset: gi; margin: 0; padding: 4px 18px 14px; border-top: 1px solid var(--line); }
.gi-first li { counter-increment: gi; margin: 0; }
.gi-first a { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.gi-first a::before { content: counter(gi); flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 800; color: var(--link); background: var(--blue-soft); }
.gi-first a:hover { text-decoration: none; color: var(--link); }
@media (max-width: 900px) { .gi-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 10. 404 ─────────────────────────────────────────── */

.nf { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: center; overflow: hidden;
  margin: 8px 0 0; padding: 48px 48px 44px; border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(60% 120% at 90% 10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%), var(--art-bg); }
.nf-code { margin: 0; font-size: 132px; line-height: .9; font-weight: 800; letter-spacing: -.06em;
  background: linear-gradient(160deg, #7FD2FA 0%, #2AABEE 45%, #1F7AC0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1 { margin: 14px 0 12px; font-size: 34px; letter-spacing: -.045em; font-weight: 800; }
.nf-sub { margin: 0 0 26px; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.nf-form { max-width: 560px; margin: 0; }
.nf-form input { height: 62px; border-radius: 18px; border-color: rgba(10,50,100,.08); box-shadow: 0 22px 44px -24px rgba(20,90,160,.45), 0 2px 6px rgba(10,40,80,.06); }
.nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.nf-home { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; margin-right: 6px; border-radius: 12px; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(180deg, #2AABEE, #1F8FD8); box-shadow: 0 10px 22px -10px rgba(31,122,192,.8); }
.nf-home:hover { text-decoration: none; background: linear-gradient(180deg, #229ED9, #1F7AC0); }
.nf-chip { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.nf-chip:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.nf-art { position: relative; display: block; }
.nf-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; transform: rotate(-14deg) translate(-4%, 6%); animation: nf-drift 7s ease-in-out infinite; }
:root[data-theme="dark"] .nf-art img { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nf-art img { mix-blend-mode: screen; } }
.nf-trail { position: absolute; left: -6%; bottom: 8%; width: 60%; height: 42%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  border-color: transparent transparent color-mix(in srgb, var(--brand) 45%, transparent) transparent; transform: rotate(-18deg); }
@keyframes nf-drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 10px -14px; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .nf-art img { animation: none; } }
@media (max-width: 900px) {
  .nf { grid-template-columns: minmax(0, 1fr); padding: 32px 26px; }
  .nf-art { order: -1; max-width: 260px; margin: -10px auto 0; }
  .nf-code { font-size: 96px; }
}
@media (max-width: 640px) {
  .nf { border-radius: 20px; padding: 24px 18px; }
  .nf-code { font-size: 76px; }
  .nf h1 { font-size: 26px; }
  .nf-sub { font-size: 15.5px; }
  .nf-form input { height: 56px; border-radius: 16px; }
}


@media (min-width: 1100px) {
  .tg-doc { grid-template-columns: minmax(0, 760px) 280px; justify-content: space-between; }
  .tg-side { display: block; }
  .tg-side-in { position: sticky; top: calc(var(--head-h) + 24px); max-height: calc(100vh - var(--head-h) - 48px); overflow-y: auto; }
  .tg-toc-m { display: none; }
  .tg-fig:has(> figcaption) { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
  .tg-fig:has(> figcaption) > figcaption { margin-top: 0; }
  
  .tg-fig.is-land:has(> figcaption) { display: block; }
  .tg-fig.is-land:has(> figcaption) > figcaption { margin-top: 14px; }
  .tg-fig.is-land .tg-fig__legend:has(> li:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 1099px) {
  .tg-nav-a { padding: 7px 8px; font-size: 15px; }
  .tg-nav-a.on::after { left: 8px; right: 8px; }
  .tg-hsearch { flex-basis: 160px; }
  .tg-problems, .tg-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-hubhead { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  
  .tg-brand { font-size: 17px; }
  
  :root { --head-h: 61px; }
  .tg-header-in { height: 60px; gap: 8px; }
  .tg-brand { margin-right: auto; min-width: 0; }
  .tg-nav, .tg-hsearch { display: none; }
  .tg-mnav { display: block; }
  .tg-mnav > summary { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--soft); color: var(--ink); cursor: pointer; list-style: none; }
  .tg-mnav > summary::-webkit-details-marker { display: none; }
  .tg-mnav > summary:focus-visible { outline: 3px solid rgba(34,158,217,.6); outline-offset: 2px; }
  .tg-mnav .i-close, .tg-mnav[open] .i-open { display: none; }
  .tg-mnav[open] .i-close { display: inline-flex; }
  .tg-mnav[open] > summary { background: var(--primary); border-color: var(--primary); color: #fff; }
  
  .tg-mnav-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--head-h)); max-height: calc(100dvh - var(--head-h)); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(10,40,80,.45); animation: tg-mnav-in .18s ease-out; }
  @keyframes tg-mnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .tg-mnav-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
  .tg-mnav-search svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
  .tg-mnav-search input { width: 100%; height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
  .tg-mnav-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(42,171,238,.22); }
  
  .tg-mnav-list { display: flex; flex-direction: column; gap: 8px; }
  .tg-mnav-g, .tg-mnav-g1 { border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
  .tg-mnav-g > summary, .tg-mnav-g1 { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px 0 16px;
    color: var(--ink); font-size: 16px; font-weight: 650; cursor: pointer; list-style: none; }
  .tg-mnav-g > summary::-webkit-details-marker { display: none; }
  .tg-mnav-g > summary:focus-visible { outline-offset: -3px; }
  .tg-mnav-g > summary svg, .tg-mnav-g1 svg { color: var(--muted); transition: transform .15s ease; }
  .tg-mnav-g[open] { background: var(--surface); }
  .tg-mnav-g[open] > summary svg { transform: rotate(180deg); }
  .tg-mnav-g.on, .tg-mnav-g1.on { border-color: var(--brand); }
  .tg-mnav-g1:hover, .tg-mnav-g1:active { border-color: var(--brand); text-decoration: none; }
  .tg-mnav-sub { padding: 0 14px 14px; }
  .tg-mnav-home { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 10px;
    background: var(--blue-soft); color: var(--link-ink); font-size: 15px; font-weight: 700; }
  .tg-mnav-home:hover { text-decoration: none; }
  .tg-mnav-h { margin: 14px 0 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
  .tg-mnav-sub ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; margin: 0; padding: 0; list-style: none; }
  .tg-mnav-sub li a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--line);
    color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
  .tg-mnav-sub li a:hover { color: var(--link); text-decoration: none; }
  .tg-mnav-sub small { flex: none; color: var(--muted); font-size: 12px; font-weight: 600; }
  @media (max-width: 380px) { .tg-mnav-sub ul { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) { .tg-mnav-g > summary svg { transition: none; } }
  @media (prefers-reduced-motion: reduce) { .tg-mnav-panel { animation: none; } }
  .tg-mag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tg-mcard.is-feature { flex-direction: column; }
  .tg-mcard.is-feature .tg-mcard-art { flex: none; }
  .tg-mcard.is-feature .tg-mcard-body { padding: 18px 20px; }
  .tg-mcard.is-feature b { font-size: 22px; }
  .tg-chlist { grid-template-columns: minmax(0, 1fr); }
  .tg-hubhead { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .tg-hubhead-art { order: -1; }
}
@media (max-width: 640px) {
  :root { --fs: 16px; }
  h1 { font-size: 26px; }
  main.tg-wrap { padding-top: 20px; }
  .tg-sec { margin-top: 44px; }
  .tg-sec-h h2 { font-size: 20px; }
  .tg-problems { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tg-problems a { min-height: 56px; }
  .tg-mag { grid-template-columns: minmax(0, 1fr); }
  .tg-mcard:not(.is-feature) { flex-direction: row; align-items: stretch; }
  .tg-mcard:not(.is-feature) .tg-mcard-art { flex: 0 0 38%; aspect-ratio: auto; min-height: 96px; }
  .tg-mcard:not(.is-feature) .tg-mcard-body { padding: 12px 14px; gap: 6px; }
  .tg-mcard:not(.is-feature) .tg-mcard-body b { font-size: 15.5px; }
  .tg-tracks { gap: 10px; }
  .tg-tcard { padding: 14px 14px 16px; }
  .tg-tcard small { font-size: 13px; }
  .tg-post h2 { font-size: 22px; margin-top: 40px; }
  .tg-post table { font-size: 14.5px; }
  .tg-post tr > :first-child:nth-last-child(2) { min-width: 90px; }   
  
  .tg-fig.is-wide .tg-fig__scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: var(--r-s); }
  .tg-fig.is-wide .tg-fig__scroll img { max-width: none; width: auto; margin: 0; }
  .tg-fig.is-wide .tg-fig__hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right; }
  .tg-post .tg-mistakes thead { display: none; }
  .tg-post .tg-mistakes tr { display: block; padding: 12px 14px; border-top: 1px solid var(--line); }
  .tg-post .tg-mistakes tr:first-child { border-top: 0; }
  .tg-post .tg-mistakes td { display: block; border: 0 !important; padding: 2px 0; width: auto !important; }
  .tg-post .tg-mistakes td[data-label]::before { content: attr(data-label) " · "; font-weight: 700; color: var(--link-ink); }
  .tg-recap { padding: 20px 16px; }
  .tg-recap-body { grid-template-columns: minmax(0, 1fr); }
  .tg-recap-art { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 220px; margin: 0 auto; }
  .tg-related ul { grid-template-columns: minmax(0, 1fr); }
  .tg-path > label { font-size: 13.5px; padding: 7px 4px; }
  .tg-hubhead h1 { font-size: 27px; }
  .tg-rows li > a, .tg-rows li.is-wait { gap: 12px; padding: 12px 14px; }
  .tg-rows-n { flex-basis: 32px; height: 32px; font-size: 13px; }
  .tg-rows-t b { font-size: 15px; }
  .tg-rows .tg-lv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-entry-card, .tg-mcard, .tg-tcard, .tg-card, .an-card, .tg-related a { transition: none; }
}
@media print {
  .tg-header, .tg-footer, .tg-side, .tg-toc-m, .an, .ar-rel, .tg-pcnudge, .tg-staging { display: none !important; }
  .tg-path__pane { display: block !important; }
}


@media (max-width: 700px) {
}


.tg-share { margin: 40px 0 8px; padding: 20px 22px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.tg-share-head h2 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.tg-share-head p { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }
.tg-share-main { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tg-share-b { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: var(--r-m);
  background: var(--soft); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.tg-share-b:hover { background: var(--soft-2); border-color: var(--line-2); text-decoration: none; }
.tg-share-b:focus-visible, .tg-share-ib:focus-visible, .tg-share-chip:focus-visible, .tg-share-more summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.tg-share-b[hidden], .tg-share-ib[hidden] { display: none; }
.tg-share-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--ink-2); }

.tg-share-mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.tg-share-mark.is-kakaotalk { background: #FEE500; color: #191919; }
.tg-share-mark.is-telegram { background: var(--brand-grad); }
.tg-share-mark.is-band { background: #00C73C; }
.tg-share-mark.is-naver { background: #03C75A; }
.tg-share-mark.is-naver svg { transform: scale(.72); }
.tg-share-mark.is-x, .tg-share-mark.is-threads { background: #000; }
.tg-share-mark.is-facebook { background: #0866FF; }
.tg-share-mark.is-line { background: #06C755; }
.tg-share-mark.is-line svg, .tg-share-mark.is-x svg, .tg-share-mark.is-threads svg { transform: scale(.82); }

.tg-share-more { margin-top: 12px; }
.tg-share-more summary { display: inline-flex; align-items: center; gap: 2px; list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--link); border-radius: 6px; }
.tg-share-more summary::-webkit-details-marker { display: none; }
.tg-share-more summary svg { transition: transform .15s ease; }
.tg-share-more[open] summary svg { transform: rotate(180deg); }
.tg-share-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tg-share-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.tg-share-chip:hover { background: var(--soft); text-decoration: none; }
.tg-share-chip .tg-share-mark { width: 22px; height: 22px; }

.tg-share-qr { display: none; align-items: center; gap: 14px; margin-top: 12px; }
@media (hover: hover) and (pointer: fine) { .tg-share-qr { display: flex; } }
.tg-share-qr-box { display: block; flex: 0 0 auto; width: 120px; height: 120px; padding: 6px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); }
.tg-share-qr-box svg { display: block; width: 100%; height: 100%; }
.tg-share-qr-box svg .dark, .tg-share-qr-box svg path { fill: #0A2036; }
.tg-share-qr p { margin: 0; display: grid; gap: 2px; }
.tg-share-qr b { font-size: 15px; color: var(--ink); }
.tg-share-qr span { font-size: 14px; color: var(--muted); }

.tg-share-url { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.tg-share-url input { width: 100%; height: 40px; padding: 0 10px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }

.tg-share-c { display: flex; gap: 8px; margin-top: 12px; }
.tg-share-ib { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer; text-decoration: none; }
.tg-share-ib:hover { background: var(--soft); text-decoration: none; }
.tg-share-ib.is-brand { border-color: transparent; }
.tg-share-ib.is-brand .tg-share-mark { width: 36px; height: 36px; }
.tg-share-s { margin-top: 20px; padding: 16px 0 8px; border-top: 1px solid var(--line); }   
.tg-share-s .tg-share-ib:focus-visible { outline-offset: -2px; }   


.tg-ad { margin: 40px 0 0; }
.tg-ad-k { display: block; margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.tg-ad-box { min-height: 280px; }
.tg-ad-box:not(:has(ins)), .tg-ad-box:has(ins[data-ad-status="unfilled"]) { background: var(--soft); border-radius: 6px; }
.tg-ad--side { margin: 0 0 28px; }
.tg-ad--side .tg-ad-box { min-height: 250px; }
.tg-ad--list { margin-top: 64px; }   
.tg-ad-box:not(:has(ins)) { display: flex; align-items: center; justify-content: center; padding: 16px; }
.tg-ad-off { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }   
@media print { .tg-ad { display: none !important; } }
.tg-share-s > b { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tg-share-s > div { display: flex; flex-wrap: wrap; gap: 8px; }

.tg-share-toast { position: fixed; z-index: 1000; top: 16px; left: 50%; transform: translate(-50%, -8px); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: 14.5px; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.tg-share-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .tg-share-toast, .tg-share-more summary svg { transition: none; } }

@media (max-width: 640px) {
  .tg-share { padding: 16px; }
  .tg-share-main { display: grid; grid-template-columns: 1fr 1fr; }
  .tg-share-b { height: 44px; justify-content: flex-start; }
  .tg-share-ib { width: 40px; height: 40px; }
  
  .chd-hd .tg-share-c { justify-content: center; }
}