:root { --bg:#f5f7fa; --paper:#ffffff; --ink:#20242b; --ink-soft:#626b78; --line:#dce2ea; --primary:#11468c; --accent:#11468c; }
* { box-sizing:border-box; }
html { color-scheme:light; }
body { color:var(--ink); background-color:var(--bg); font-family:"Noto Sans KR",system-ui,sans-serif; }
h1,h2,h3,h4 { color:var(--ink); letter-spacing:-.025em; }
a { color:var(--primary); }
button,input,select,textarea { font:inherit; border-radius:8px; }
input,select,textarea { border-color:var(--line); background:var(--paper); }
.card,.panel,section,table { border-color:var(--line); }
.container { width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:clamp(56px,8vw,96px) 0; }
.modern-header { margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.modern-header h1 { margin:0 0 8px; font-size:clamp(2rem,6vw,4rem); }
.modern-header p { margin:0; color:var(--ink-soft); }
.m-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; }
.m-card { display:flex; flex-direction:column; min-width:0; padding:24px; color:var(--ink); text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(51,48,43,.05); }
.m-card h3 { margin:12px 0 8px; font-size:1.1rem; line-height:1.45; }
.m-card p { margin:0; color:var(--ink-soft); line-height:1.7; }
.icon-box { width:fit-content; color:var(--accent); font-family:"JetBrains Mono",monospace; font-weight:800; }
.m-back-btn { position:fixed; z-index:20; top:16px; left:16px; display:grid; place-items:center; width:40px; height:40px; color:var(--primary); background:var(--paper); border:1px solid var(--line); border-radius:50%; }
.search-container { max-width:none !important; }
@media(max-width:720px){img,canvas,svg,video{max-width:100%}table{display:block;max-width:100%;overflow-x:auto}}