:root{--ink:#172033;--paper:#f5f7fb;--card:#fff;--line:#e4e8f0;--acc:#0e7c6b;--acc2:#f0a43a;--mut:#667085;
--soft:#f1f4f9;--field:#fbfcfe;--accs:#e6f5f1;--acct:#0b5f52;--sh:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.05);--sh2:0 2px 4px rgba(16,24,40,.06),0 14px 30px rgba(16,24,40,.10);
--hd:rgba(255,255,255,.82);--r:16px;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--ink:#e7ebf3;--paper:#0d1220;--card:#151c2c;--line:#263048;--acc:#34c3a8;--acc2:#f5b454;--mut:#98a2b8;
--soft:#1b2337;--field:#10172a;--accs:#123631;--acct:#7ee0cc;--sh:0 1px 2px rgba(0,0,0,.3);--sh2:0 2px 4px rgba(0,0,0,.3),0 16px 34px rgba(0,0,0,.45);--hd:rgba(13,18,32,.8)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-underline-offset:3px}
.w{max-width:1120px;margin:0 auto;padding:14px 18px}
main.w{max-width:860px;padding-bottom:10px}

/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--hd);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
header.top .w{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;padding-bottom:10px}
.logo{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:800;font-size:1.18rem;letter-spacing:-.03em}.logo b{color:var(--acc)}
.logo>span:not(.lg){display:inline}.logo .lg{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;font-size:1.05rem;background:linear-gradient(135deg,#14b8a6,#6366f1);box-shadow:0 4px 12px rgba(20,184,166,.35)}
header nav{display:flex;gap:2px}
header nav a{color:var(--mut);text-decoration:none;font-size:.9rem;font-weight:600;padding:6px 10px;border-radius:999px;white-space:nowrap}header nav a:hover{color:var(--ink);background:var(--soft)}

/* typography */
h1{font-size:1.75rem;line-height:1.3;letter-spacing:-.035em;margin:.5em 0 .25em;font-weight:800}
h2{font-size:1.24rem;line-height:1.4;letter-spacing:-.025em;margin:2em 0 .7em;font-weight:800}
main.w>h2,.rel>h2,.more>h2{display:flex;align-items:center;gap:10px}
main.w>h2::before,.rel>h2::before,.more>h2::before{content:"";flex:none;width:6px;height:1.1em;border-radius:6px;background:linear-gradient(180deg,var(--acc),var(--acc2))}
main.w>h3,.card>h3{font-size:1.06rem;letter-spacing:-.02em;margin:1.5em 0 .5em;padding:4px 12px;display:inline-block;border-radius:10px;background:var(--accs);color:var(--acct)}
.lead{color:var(--mut);margin-top:0;font-size:1.02rem}
main.w>p,main.w>ul,main.w>ol{max-width:72ch}
main.w li{margin:.25em 0}main.w li::marker{color:var(--acc)}
code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:.9em}
.crumb{font-size:.84rem;color:var(--mut);margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.crumb a{color:var(--mut);text-decoration:none}.crumb a:hover{color:var(--acc)}

/* cards & forms */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:18px 0;box-shadow:var(--sh)}
.card>:first-child{margin-top:0}.card>:last-child{margin-bottom:0}
label{display:block;font-weight:700;font-size:.9rem;margin:12px 0 6px;color:var(--ink)}
input,textarea,select{width:100%;font:inherit;color:var(--ink);padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);transition:border-color .15s,box-shadow .15s}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--acc)}input[type=range]{padding:0;border:0;background:none;accent-color:var(--acc)}input[type=color]{padding:3px;height:44px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
textarea{min-height:200px;resize:vertical}
button{font:inherit;font-weight:700;background:var(--acc);color:#fff;border:0;border-radius:12px;padding:11px 20px;cursor:pointer;margin-top:12px;transition:transform .12s,filter .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
@media(prefers-color-scheme:dark){button{color:#06231e}}
button:hover{filter:brightness(1.07)}button:active{transform:scale(.97)}button:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 45%,transparent);outline-offset:2px}
main.w .card button:not(.sub),main.w>button{box-shadow:0 4px 12px color-mix(in srgb,var(--acc) 28%,transparent)}
button.sub{background:var(--card);color:var(--acc);border:1.5px solid color-mix(in srgb,var(--acc) 55%,var(--line));box-shadow:none}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:11px 14px}.stat small{display:block;color:var(--mut);font-size:.8rem;font-weight:600}.stat b{display:inline-block;font-size:clamp(1.1rem,4.4vw,1.35rem);word-break:keep-all;overflow-wrap:normal;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.res{background:var(--accs);color:var(--acct);border:1px solid color-mix(in srgb,var(--acc) 22%,transparent);border-radius:12px;padding:13px 16px;margin-top:14px;font-weight:700;min-height:1em}
.res:empty{display:none}
.big{font-size:2.6rem;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--acc);line-height:1.3;margin:14px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.chips button{margin:0;padding:7px 13px;font-size:.88rem;border-radius:999px;box-shadow:none}

/* tables */
main.w table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);font-size:.93rem;font-variant-numeric:tabular-nums;margin:10px 0}
main.w th,main.w td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
main.w th{background:var(--soft);font-weight:700;font-size:.86rem;color:var(--mut)}
main.w tr:last-child>td{border-bottom:0}main.w tbody tr:nth-child(even)>td,main.w table>tr:nth-child(even)>td{background:color-mix(in srgb,var(--soft) 55%,transparent)}
main.w tr:hover>td{background:var(--accs)}
.card table{margin:0}

/* FAQ */
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;margin:10px 0;box-shadow:var(--sh);overflow:hidden;transition:border-color .15s}
details[open]{border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
summary{font-weight:700;cursor:pointer;padding:14px 46px 14px 16px;list-style:none;position:relative}summary::-webkit-details-marker{display:none}
summary::before{content:"Q";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:9px;border-radius:7px;background:var(--accs);color:var(--acc);font-size:.78rem;font-weight:800;vertical-align:1px}
summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border:solid var(--mut);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
details>:not(summary){margin:0 16px 14px;color:var(--ink)}details>p{color:var(--mut)}

/* related search chips */
.rel{margin-top:2.4em}
.rel .relq{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.rel .relq li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.86rem;color:var(--mut);margin:0}.rel .relq li::before{content:"🔎 ";font-size:.8em}
.cattag{display:inline-flex;align-items:center;margin-left:6px;padding:2px 10px;border-radius:999px;background:var(--accs);font-size:.78rem;font-weight:700;text-decoration:none}.crumb a.cattag{color:var(--acct)}

/* tool card grid */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:700px){.tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){main.w:has(.hero) .tools{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tools a{--kc:#0e9f87;display:block;min-width:0;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s,border-color .18s}
.tools a:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--kc) 45%,var(--line))}
.tools .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:1.45rem;line-height:1;background:color-mix(in srgb,var(--kc) 14%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kc) 18%,transparent)}
.tools h3{margin:12px 0 2px;font-size:.98rem;line-height:1.35;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools p{margin:0;color:var(--mut);font-size:.84rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-game{--kc:#8b5cf6}.k-money{--kc:#16a34a}.k-calc{--kc:#3b82f6}.k-health{--kc:#f43f5e}.k-time{--kc:#f59e0b}.k-util{--kc:#06b6d4}
.tools a[class^=k-]{--kc:inherit}.tools a.k-game{--kc:#8b5cf6}.tools a.k-money{--kc:#16a34a}.tools a.k-calc{--kc:#3b82f6}.tools a.k-health{--kc:#f43f5e}.tools a.k-time{--kc:#f59e0b}.tools a.k-util{--kc:#06b6d4}
.more{margin-top:40px}.more .tools{margin-bottom:8px}

/* home */
main.w:has(.hero){max-width:1120px}
.hero{position:relative;margin:10px 0 18px;padding:30px 22px 24px;border-radius:24px;overflow:hidden;color:#fff;
background:radial-gradient(120% 140% at 0% 0%,#20c3a5 0%,transparent 55%),radial-gradient(120% 140% at 100% 100%,#6d5df6 0%,transparent 60%),linear-gradient(135deg,#0f8f7a,#3f51d8);box-shadow:0 18px 40px -16px rgba(63,81,216,.55)}
.hero::after{content:"🧮 📐 💰 ⏰ 🎮";position:absolute;right:-6px;top:10px;font-size:3.3rem;letter-spacing:.2em;opacity:.15;transform:rotate(-8deg);pointer-events:none;white-space:nowrap}
.hero h1{margin:.3em 0 .2em;font-size:clamp(1.65rem,5.4vw,2.5rem);color:#fff}
.hero .lead{color:rgba(255,255,255,.88);max-width:46ch}
.badge{display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);font-size:.8rem;font-weight:700}
.badge i{width:7px;height:7px;border-radius:50%;background:#7dffcf;box-shadow:0 0 0 4px rgba(125,255,207,.25)}
.hsearch{position:relative;margin:18px 0 10px;max-width:640px}
.hsearch::before{content:"";position:absolute;left:17px;top:50%;width:13px;height:13px;border:2.5px solid #8a94a8;border-radius:50%;transform:translateY(-62%);pointer-events:none}
.hsearch::after{content:"";position:absolute;left:30px;top:calc(50% + 4px);width:7px;height:2.5px;background:#8a94a8;border-radius:2px;transform:rotate(45deg);pointer-events:none}
.hsearch input{font-size:1.02rem;padding:15px 16px 15px 46px;border-radius:16px;border:0;background:#fff;color:#172033;box-shadow:0 10px 26px rgba(10,20,60,.22)}
.hsearch input::placeholder{color:#8a94a8}.hsearch input:focus{box-shadow:0 0 0 4px rgba(255,255,255,.35),0 10px 26px rgba(10,20,60,.22)}
.pop{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0;font-size:.82rem}
.pop span{color:rgba(255,255,255,.75);font-weight:700;margin-right:2px;white-space:nowrap}
.pop a{color:#fff;text-decoration:none;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);white-space:nowrap}.pop a:hover{background:rgba(255,255,255,.26)}
.hstat{list-style:none;display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:18px 0 0;font-size:.85rem;color:rgba(255,255,255,.85)}.hstat li{margin:0}.hstat b{font-size:1.1rem;color:#fff;margin-right:3px}
.tabs{position:sticky;top:57px;z-index:10;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:10px 18px;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:700;white-space:nowrap;box-shadow:var(--sh);transition:background .15s,color .15s,border-color .15s}
.tabs a b{font-size:.74rem;font-weight:800;min-width:22px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--mut)}
.tabs a:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.tabs a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.tabs a.on b{background:rgba(127,127,127,.28);color:inherit}
.tabs a.zero{opacity:.45}
section.cat{scroll-margin-top:120px;margin-top:8px}
section.cat h2{display:flex;align-items:center;gap:10px;margin:1.6em 0 .8em;font-size:1.2rem}
section.cat h2 .hi{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:1.15rem;background:color-mix(in srgb,var(--kc) 16%,var(--card))}
section.cat h2 small{color:var(--mut);font-weight:700;font-size:.78rem;padding:1px 8px;border-radius:999px;background:var(--soft)}
body.one section.cat h2{margin-top:1em}
.gbanner{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:16px 18px;border-radius:20px;text-decoration:none;color:#fff;background:radial-gradient(90% 160% at 0% 0%,#ff5fa2 0%,transparent 55%),linear-gradient(120deg,#5b3df5,#1d1a5e);box-shadow:0 14px 30px -12px rgba(91,61,245,.6);transition:transform .18s}
.gbanner:hover{transform:translateY(-2px)}
.gb-ic{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;font-size:1.8rem;background:rgba(255,255,255,.16)}
.gb-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}.gb-t small{font-size:.7rem;font-weight:800;letter-spacing:.08em;color:#ffd34d}.gb-t b{font-size:1.04rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gb-t em{font-style:normal;font-size:1rem;letter-spacing:.12em;white-space:nowrap;overflow:hidden}
.gb-go{flex:none;font-weight:800;font-size:.9rem;padding:9px 15px;border-radius:999px;background:linear-gradient(180deg,#fff27a,#ffb21c);color:#3a1d00;box-shadow:0 4px 0 #b05a00}
.about{margin-top:44px;padding:20px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}.about h2{margin-top:0}.about p{margin-bottom:0;color:var(--mut)}
#qnone{text-align:center;padding:30px 10px;color:var(--mut)}
.tools a[hidden],section.cat[hidden],.gbanner[hidden],.catnav[hidden]{display:none}

/* footer */
footer{margin-top:56px;border-top:1px solid var(--line);background:var(--card);font-size:.85rem;color:var(--mut)}
footer .w{padding-top:26px;padding-bottom:30px}
footer .fb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}footer .fb .logo{font-size:1.05rem}footer .fb .lg{width:28px;height:28px;font-size:.9rem}
footer .fl{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0}footer .fl a{color:var(--mut);text-decoration:none}footer .fl a:hover{color:var(--acc)}
footer p{margin:14px 0 0;font-size:.8rem}

/* misc tools */
#wheel{display:block;margin:10px auto;max-width:100%}.wheelbox{position:relative;text-align:center}.pin{font-size:2rem;line-height:1;color:var(--ink)}
#lad{display:block;width:100%;height:auto;background:#fffdf8;border-radius:12px;margin-top:12px}
.catnav{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.catnav a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:.88rem;text-decoration:none;color:var(--ink)}

@media(max-width:560px){
 .w{padding:12px 14px}h1{font-size:1.45rem}.big{font-size:2.2rem}
 header nav a{padding:6px 8px;font-size:.86rem}header nav a:first-child{display:none}
 .card{padding:16px;border-radius:14px}
 .tools{gap:9px}.tools a{padding:13px}.tools .ic{width:40px;height:40px;font-size:1.3rem;border-radius:12px}.tools h3{font-size:.93rem;margin-top:10px}.tools p{font-size:.8rem}
 .hero{margin:6px -4px 14px;padding:24px 18px 20px;border-radius:20px}.hero::after{display:none}
 .pop{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px}.pop::-webkit-scrollbar{display:none}.hstat{gap:14px;margin-top:14px}
 .tabs{margin:0 -14px;padding:10px 14px;top:53px}
 .gbanner{padding:14px;gap:12px}.gb-ic{width:46px;height:46px;font-size:1.5rem}.gb-go{padding:8px 12px;font-size:.82rem}
 main.w table{font-size:.86rem}main.w th,main.w td{padding:8px 9px}
}
/* 게임 페이지(모바일): 게임(.gw)을 맨 위로, 경로는 숨기고 제목은 한 줄, 설명은 게임 아래로 */
@media(max-width:640px){
 main.w:has(>.gw){display:flex;flex-direction:column}main.w:has(>.gw)>*{order:2}
 main.w:has(>.gw)>.crumb{display:none}
 main.w:has(>.gw)>h1{order:0;font-size:1.05rem;margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 main.w:has(>.gw)>.gw{order:1;width:100%}main.w:has(>.gw)>.lead{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.k-test{--kc:#0ea5e9}.tools a.k-test{--kc:#0ea5e9}
.ghjump{display:flex;gap:8px;margin:14px 0 4px}.ghjump a{padding:8px 14px;border-radius:999px;border:1px solid var(--line,#d6dbe6);text-decoration:none;font-weight:700;font-size:.92rem;color:inherit}
.ghsec{margin:20px 0 8px;scroll-margin-top:72px}.ghsec h2 small{font-size:.8rem;color:var(--mut);font-weight:600;margin-left:4px}.ghsec .hi{margin-right:6px}.ghlead{color:var(--mut);margin:0 0 8px;font-size:.92rem}

.k-rhythm,.tools a.k-rhythm{--kc:#8b5cf6}.k-reflex,.tools a.k-reflex{--kc:#f59e0b}.k-arcade,.tools a.k-arcade{--kc:#ef4444}.k-puzzle,.tools a.k-puzzle{--kc:#a855f7}.k-memory,.tools a.k-memory{--kc:#ec4899}.k-fun,.tools a.k-fun{--kc:#8b5cf6}.k-random,.tools a.k-random{--kc:#06b6d4}.k-invest,.tools a.k-invest{--kc:#16a34a}.k-unit,.tools a.k-unit{--kc:#3b82f6}.k-unit2,.tools a.k-unit2{--kc:#3b82f6}.k-science,.tools a.k-science{--kc:#0ea5e9}.k-geo,.tools a.k-geo{--kc:#3b82f6}.k-math,.tools a.k-math{--kc:#6366f1}.k-math2,.tools a.k-math2{--kc:#6366f1}
.catnav{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;position:static}
.catnav a{white-space:nowrap}
.cat h1{font-size:1.4rem;margin:18px 0 12px}
.gamelink{margin:14px 0 4px}.gamelink a{font-weight:700}