:root{--fg:#1b2235;--sub:#5b6476;--line:#dfe4ee;--bg:#f3f6fc;--card:#fff;--blue:#1d5fae;--blue2:#164a8a;--yellow:#f7c812;--ink:#2a1010;--soft:#eef3fb}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.85 -apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;word-break:keep-all}
a{color:var(--blue)}img{max-width:100%}
h1,h2,.logo,.hero h1{font-family:"Black Han Sans","Malgun Gothic",sans-serif;font-weight:400;letter-spacing:.6px}
.cattile b,.sec-h,.box h4,.hero .bubble{font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-weight:800;letter-spacing:-.3px}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
main.wrap{background:var(--card);padding-bottom:30px}
header.top{background:var(--blue);border-bottom:4px solid var(--ink)}
header.top .wrap{display:flex;align-items:center;gap:8px 16px;min-height:62px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{font-size:25px;color:#fff;text-decoration:none;text-shadow:2px 2px 0 var(--ink)}.logo b{color:var(--yellow);font-weight:400}
nav.cats{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:14px}nav.cats a{color:#e6eeff;text-decoration:none;font-weight:700}nav.cats a:hover{color:var(--yellow)}
.crumb{font-size:13px;color:var(--sub);padding-top:18px;margin-bottom:6px}.crumb a{color:var(--sub)}
h1{font-size:30px;line-height:1.35;margin:6px 0 10px}
h2{font-size:25px;line-height:1.5;margin:46px 0 14px}.hl{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h3{font-size:19px;margin:26px 0 8px}
.meta{font-size:13px;color:var(--sub);margin-bottom:16px}
.box{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:16px 18px;margin:20px 0;box-shadow:5px 5px 0 var(--ink)}
.box h4{margin:0 0 8px;font-size:18px;color:var(--blue)}.box ul,.box ol{margin:0;padding-left:20px}
.notice{background:var(--soft);border-left:6px solid var(--blue);border-radius:8px;padding:12px 16px;font-size:14px;color:#37445e;margin:18px 0}
table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}th,td{border:1px solid #c9d3e6;padding:9px 10px;text-align:left;vertical-align:top}th{background:var(--blue);color:#fff;border-color:var(--blue2)}
tr:nth-child(even) td{background:#f6f9ff}
.tablewrap{overflow-x:auto;border:3px solid var(--ink);border-radius:12px;margin:16px 0}
.toc a{text-decoration:none;font-weight:700}
.forms{display:flex;flex-wrap:wrap;gap:10px}.forms a{flex:1 1 200px;display:block;padding:12px;background:#fff;border:3px solid var(--ink);border-radius:12px;text-align:center;font-weight:800;text-decoration:none;font-size:15px;color:var(--blue);box-shadow:4px 4px 0 var(--ink)}
.faq dt{font-weight:800;margin-top:16px;color:var(--blue)}.faq dd{margin:4px 0 0}
.src{font-size:14px}.src li{margin:4px 0}
footer{background:var(--ink);font-size:13px;color:#cdbfbf}footer .wrap{padding:24px 16px}footer a{color:#f3e4a0}
.hero-img{width:100%;max-width:520px;border:3px solid var(--ink);border-radius:16px;margin:8px auto 4px;display:block;box-shadow:6px 6px 0 var(--ink)}
.figure{margin:24px 0}.figure img{width:100%;border-radius:14px;border:3px solid var(--ink);display:block}
.disc{margin:16px 0 4px}.disc img{width:100%;max-width:520px;display:block}
.aff{border:3px solid var(--ink);background:#fff6cf;border-radius:16px;padding:16px;margin:24px 0;box-shadow:5px 5px 0 var(--ink)}
.affh{font-weight:800;margin-bottom:10px}.adlaw{margin:28px 0 0;font-size:15px;color:var(--sub);text-align:right}.adtag{display:inline-block;font-size:12px;font-weight:800;background:var(--ink);color:var(--yellow);border-radius:4px;padding:1px 7px;margin-right:8px;vertical-align:2px}
.affbtns{display:grid;gap:10px}.affbtn{display:block;background:var(--blue);color:#fff!important;text-decoration:none;font-weight:800;text-align:center;border:3px solid var(--ink);border-radius:12px;padding:14px 10px;font-size:17px;box-shadow:4px 4px 0 var(--ink)}
.affbtn:active,.forms a:active,.pcard:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.hero{background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:20px;padding:26px 22px 24px;margin:22px 0;box-shadow:6px 6px 0 var(--ink)}
.hero .bubble{display:inline-block;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:3px 16px;font-size:15px;margin-bottom:12px}
.hero h1{color:#fff;margin:0 0 10px;font-size:36px;line-height:1.25;text-shadow:3px 3px 0 var(--ink)}.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p{margin:0 0 16px;color:#dfe8ff;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips a{background:#fff;border:2.5px solid var(--ink);color:var(--ink);text-decoration:none;border-radius:999px;padding:5px 13px;font-size:14px;font-weight:800}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 8px;font-size:12.5px;text-align:center;color:var(--sub)}.trust div{background:var(--soft);border-radius:12px;padding:10px 6px}.trust b{display:block;color:var(--blue);font-size:15px}
.cattiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.cattile{display:block;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:14px;color:var(--fg);text-decoration:none;box-shadow:4px 4px 0 var(--ink)}.cattile .ic{font-size:28px;display:block}.cattile b{display:block;font-size:17px;margin-top:6px;color:var(--blue)}.cattile span{font-size:13px;color:var(--sub)}
.feat{display:grid;grid-template-columns:42% 1fr;text-decoration:none;color:var(--fg);border:3px solid var(--ink);border-radius:18px;overflow:hidden;margin:14px 0;box-shadow:5px 5px 0 var(--ink);background:#fff}.feat img{width:100%;height:100%;object-fit:cover;display:block}.feat div{padding:16px}.feat b{font-size:20px;display:block;line-height:1.45}.feat span{color:var(--sub);font-size:14px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}.pcard{display:block;text-decoration:none;color:var(--fg);border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff;box-shadow:4px 4px 0 var(--ink)}.pcard img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}.pcard div{padding:10px 12px;font-weight:800;font-size:14.5px;line-height:1.5}.pcard small{display:block;font-weight:400;color:var(--sub);font-size:12px;margin-top:4px}
.thumbs3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.thumb3{display:block;border:3px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.thumb3 img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;transition:transform .35s ease}
.thumb3:hover{transform:translate(-3px,-5px);box-shadow:8px 10px 0 var(--ink)}.thumb3:hover img{transform:scale(1.06)}
.formlink{display:block;margin-top:28px;text-decoration:none;color:var(--fg);position:relative}.formlink span{display:block}.formlink b{color:var(--blue)}
.formlink .go{margin-top:8px;font-weight:800;color:var(--blue)}.formlink:hover{background:var(--yellow)}.formlink:hover .go{text-decoration:underline}
.sec-h{font-size:21px;margin:34px 0 6px;display:block;background:none;padding:0}.sec-h::before{content:"";display:inline-block;width:12px;height:22px;background:var(--yellow);border:2px solid var(--ink);margin-right:8px;vertical-align:-2px}
/* ── 마우스 올림 애니메이션 (2026-10-18 사용자) ── */
.pcard,.cattile,.feat,.forms a,.affbtn,.chips a,.box,.hero-img,.figure img,.logo{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
.pcard:hover,.cattile:hover,.feat:hover{transform:translate(-3px,-5px);box-shadow:8px 10px 0 var(--ink)}
.pcard img,.feat img{transition:transform .35s ease}.pcard:hover img,.feat:hover img{transform:scale(1.06)}
.pcard:hover div,.feat:hover b{color:var(--blue)}
.cattile:hover{background:var(--yellow)}.cattile:hover .ic{animation:wiggle .5s ease}
.forms a:hover,.affbtn:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--ink)}
.affbtn:hover{background:var(--blue2)}.forms a:hover{background:var(--yellow);color:var(--ink)}
.affbtn::after{content:"";display:inline-block}.affbtn:hover{animation:nudge .6s ease}
.chips a:hover{background:var(--yellow);transform:translateY(-3px) rotate(-2deg)}
.box:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.hero-img:hover{transform:rotate(-1.2deg) scale(1.02)}
.figure{overflow:hidden;border-radius:14px}.figure img:hover{transform:scale(1.03)}
.logo:hover{transform:rotate(-2deg) scale(1.04)}
.hero .bubble{animation:float 2.6s ease-in-out infinite}
h2 .hl{transition:background-size .35s ease;background-size:100% 100%;background-repeat:no-repeat}
h2:hover .hl{background:linear-gradient(transparent 20%,var(--yellow) 20%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.toc a,.list a,main p a{background:linear-gradient(var(--yellow),var(--yellow)) left bottom/0 3px no-repeat;transition:background-size .25s ease}
.toc a:hover,.list a:hover,main p a:hover{background-size:100% 3px}
tbody tr,table tr{transition:background-color .15s ease}table tr:hover td{background:#fff3b8}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.15)}75%{transform:rotate(12deg) scale(1.15)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes nudge{0%,100%{transform:translate(-2px,-3px)}40%{transform:translate(2px,-3px)}70%{transform:translate(-1px,-3px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:560px){body{font-size:16px}h1{font-size:25px}h2{font-size:22px}.hero h1{font-size:28px}.cattiles{grid-template-columns:repeat(2,1fr)}.pcards{grid-template-columns:repeat(2,1fr)}.feat{grid-template-columns:1fr}.trust{font-size:11.5px}}