:root{
color-scheme:light;
--blue:#2563eb; --blue-d:#1d4ed8;
--btn-bg:#2563eb; --btn-bg-h:#1d4ed8; --btn-fg:#fff;
--btn-shadow:rgba(37,99,235,.28); --btn-shadow-h:rgba(37,99,235,.32);
--ink:#0f172a; --slate:#475569; --muted:#94a3b8; --kind-ink:#64748b; --chip-ink:#334155;
--line:#e6ebf2; --soft:#f6f9ff; --card:#ffffff; --bg:#ffffff;
--bar:rgba(255,255,255,.82);
--edge:#cfe0ff;
--tint:#eff6ff;
--shadow:rgba(15,23,42,.09); --shadow-2:rgba(15,23,42,.08);
--glow-1:#dbeafe; --glow-2:#eef4ff;
--on-bg:#0f172a; --on-fg:#fff;
--on-chip:rgba(255,255,255,.18);
--off-bg:#e2e8f0; --off-ink:#94a3b8;
--soon-bg:#fff7ed; --soon-ink:#c2610a; --soon-line:#fed7aa;
--field:#ffffff; --chip-off:#cbd5e1;
}
:root[data-theme="dark"]{
color-scheme:dark;
--blue:#7ba4ff; --blue-d:#9dbcff;
--btn-shadow:rgba(0,0,0,.45); --btn-shadow-h:rgba(0,0,0,.55);
--ink:#e8ecf3; --slate:#a7b2c4; --muted:#6e7b8f; --kind-ink:#8592a6; --chip-ink:#b9c4d4;
--line:#232b37; --soft:#11161f; --card:#141922; --bg:#0d1017;
--bar:rgba(13,16,23,.86);
--edge:#31507f;
--tint:#16233c;
--shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.45);
--glow-1:#152847; --glow-2:#101a2e;
--on-bg:#e8ecf3; --on-fg:#0b0e14;
--on-chip:rgba(0,0,0,.16);
--off-bg:#1c222c; --off-ink:#5b6675;
--soon-bg:#2a1a0d; --soon-ink:#fdba74; --soon-line:#4a2c12;
--field:#0a0e15; --chip-off:#3a4453;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.ico{width:20px;height:20px;display:block}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:100;
background:var(--on-bg);color:var(--on-fg);font-weight:700;font-size:14px;padding:11px 18px;
border-radius:0 0 10px 10px;transition:top .12s}
.skip:focus{top:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--btn-bg);color:var(--btn-fg);font-weight:700;
font-size:16px;padding:14px 24px;border-radius:12px;transition:transform .12s,box-shadow .12s,background .12s;
box-shadow:0 8px 22px var(--btn-shadow)}
.btn:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:0 12px 26px var(--btn-shadow-h)}
.btn.ghost{background:var(--card);color:var(--blue);box-shadow:none;border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft)}
.btn.sm{padding:10px 16px;font-size:14px;border-radius:10px}
.btn.disabled{background:var(--off-bg);color:var(--off-ink);box-shadow:none;pointer-events:none}
header{position:sticky;top:0;z-index:50;background:var(--bar);
backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--on-bg);display:flex;align-items:center;justify-content:center;color:var(--on-fg)}
.brand .logo svg{width:19px;height:19px}
.brand small{color:var(--slate);font-weight:600;font-size:13px;margin-left:2px}
.nav .sp{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav .sp a.link{color:var(--slate);font-weight:600;font-size:15px}
.nav .sp a.link:hover{color:var(--ink)}
@media(max-width:640px){.nav .sp{gap:14px}.nav .sp a.link.hide-sm{display:none}}
.brand--sm{font-size:15px}
.brand--sm .logo{width:26px;height:26px;border-radius:7px}
.brand--sm .logo svg{width:15px;height:15px}
.theme{width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
padding:0;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--slate);
cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.theme:hover{color:var(--ink);border-color:var(--edge)}
.theme svg{width:16px;height:16px;display:none}
:root[data-theme-pref="auto"] .theme .i-auto,
:root[data-theme-pref="light"] .theme .i-light,
:root[data-theme-pref="dark"] .theme .i-dark{display:block}
:root:not([data-theme-pref]) .theme .i-auto{display:block}
@media(max-width:640px){.nav .sp{gap:12px}}
.hero{position:relative;overflow:hidden;background:
radial-gradient(900px 420px at 85% -10%, var(--glow-1) 0%, transparent 60%),
radial-gradient(680px 380px at 0% 8%, var(--glow-2) 0%, transparent 55%),var(--bg);
padding:76px 0 56px;text-align:center}
.eyebrow{color:var(--blue);font-weight:800;font-size:14px;letter-spacing:.4px;text-transform:uppercase}
.hero h1{font-size:clamp(30px,7.2vw,46px);line-height:1.18;letter-spacing:-1px;font-weight:800;margin:14px 0 14px}
.hero h1 .c{color:var(--blue)}
.hero p{font-size:clamp(16px,4vw,18px);color:var(--slate);max-width:600px;margin:0 auto}
.hero .stat{display:inline-flex;align-items:center;gap:8px;margin-top:22px;background:var(--card);border:1px solid var(--line);
border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;color:var(--slate)}
.hero .stat b{color:var(--blue)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.fbtn{font:inherit;font-size:14px;font-weight:700;color:var(--slate);cursor:pointer;
background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;
display:inline-flex;align-items:center;gap:7px;transition:background .12s,color .12s,border-color .12s}
.fbtn:hover{background:var(--soft);color:var(--ink)}
.fbtn span{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--soft);
border-radius:999px;padding:1px 7px;min-width:22px;text-align:center}
.fbtn.on{background:var(--on-bg);border-color:var(--on-bg);color:var(--on-fg)}
.fbtn.on span{background:var(--on-chip);color:var(--on-fg)}
.tools{padding:56px 0 90px}
.grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
.empty{margin-top:28px;color:var(--muted);font-size:15px;text-align:center}
.tool{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;
display:flex;flex-direction:column;transition:transform .14s,box-shadow .14s,border-color .14s}
.tool:hover{transform:translateY(-3px);box-shadow:0 20px 46px var(--shadow);border-color:var(--edge)}
.tool:focus-within{border-color:var(--edge);box-shadow:0 20px 46px var(--shadow)}
.tool[data-soon]{background:var(--soft)}
.tool .top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.tool .tico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.tool .tico svg{width:28px;height:28px}
.tool .name{font-size:20px;font-weight:800}
.tool .name em{font-style:normal;color:var(--muted);font-weight:700;font-size:15px;margin-left:6px}
.tool .namelink::after{content:"";position:absolute;inset:0;border-radius:20px}
.tool .namelink:focus-visible{outline:none}
.tool:focus-within .namelink{color:var(--blue-d)}
.tool .badge{margin-left:auto;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.tool .badge.soon{background:var(--soon-bg);color:var(--soon-ink);border:1px solid var(--soon-line)}
.tool .badge.kind{background:var(--soft);color:var(--kind-ink);border:1px solid var(--line)}
.tool .tag2{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.tool .desc{color:var(--slate);font-size:15px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 20px}
.chip{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:13px;font-weight:600;color:var(--chip-ink)}
.actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.tool[data-locked] .actions{pointer-events:none}
.promise{background:var(--soft);border-top:1px solid var(--line);padding:64px 0 70px}
.promise h2{font-size:clamp(22px,5vw,28px);font-weight:800;letter-spacing:-.5px;text-align:center;margin-bottom:34px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.pitem{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.pico{width:40px;height:40px;border-radius:11px;background:var(--tint);color:var(--blue);
display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pico svg{width:22px;height:22px}
.pitem h3{font-size:16.5px;font-weight:800;margin-bottom:6px}
.pitem p{color:var(--slate);font-size:14.5px}
.notfound{padding:84px 0 96px}
.notfound h1{font-size:clamp(26px,6.4vw,40px);font-weight:800;letter-spacing:-.8px;margin:10px 0 12px}
.nf-lead{color:var(--slate);font-size:clamp(16px,4vw,17.5px);max-width:560px}
.nf-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:14px;margin:34px 0 30px}
.nf-list a{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
border-radius:16px;padding:18px;transition:border-color .14s,box-shadow .14s,transform .14s}
.nf-list a:hover{border-color:var(--edge);box-shadow:0 14px 32px var(--shadow-2);transform:translateY(-2px)}
.nf-ico{width:42px;height:42px;border-radius:12px;color:#fff;flex:0 0 auto;
display:flex;align-items:center;justify-content:center}
.nf-ico svg{width:22px;height:22px}
.nf-txt{display:flex;flex-direction:column}
.nf-txt b{font-size:16.5px;font-weight:800}
.nf-txt span{color:var(--slate);font-size:14.5px}
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:14px}
.foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot .sp{margin-left:auto;display:flex;gap:20px}
.foot a:hover{color:var(--ink)}
.footnote{margin-top:18px;color:var(--slate);font-size:14.5px}
.copy{margin-top:10px}
@media print{
:root,:root[data-theme="dark"]{
color-scheme:light;
--ink:#000; --slate:#333; --muted:#666; --kind-ink:#555; --chip-ink:#333;
--line:#ccc; --soft:#fff; --card:#fff; --bg:#fff; --bar:#fff;
--blue:#1d4ed8; --blue-d:#1d4ed8;
--shadow:transparent; --shadow-2:transparent; --btn-shadow:transparent; --btn-shadow-h:transparent;
--glow-1:#fff; --glow-2:#fff; --tint:#fff;
--on-bg:#000; --on-fg:#fff;
}
.theme{display:none}
}