/* 레트로 파스텔 스타일. 색은 :root 값만 바꾸면 전체에 적용됩니다. */
:root{--wood:#4b3a7a;--wood2:#7565bd;--paper:#fff0f6;--paper2:#f8d9e8;--olive:#f7cfe0;--teal:#6b62d0;--gold:#ffa3cc;--mint:#8ee6b8;--red:#c2306f;--text:#3a2b5c;--muted:#6f5a90;--line:#d9b6d0;--ok:#1f7a4d;--bad:#c2306f}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;color:var(--text);font:16px/1.7 "Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;word-break:keep-all;overflow-wrap:anywhere;
background:var(--olive) repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 2px,transparent 2px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 2px,transparent 2px 32px)}
.wrap{max-width:900px;margin:0 auto;padding:0 16px}
h1,h2,h3{line-height:1.35;color:var(--wood);margin:0 0 .6em}
h1{font-size:clamp(1.6rem,6vw,2.4rem)}h2{font-size:1.3rem}h3{font-size:1.05rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.site-header{position:sticky;top:0;z-index:10;background:var(--wood);border-bottom:4px solid var(--gold)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding-top:8px;padding-bottom:8px}
.logo{font-weight:800;color:var(--gold);text-decoration:none;font-size:1.1rem}
nav{display:flex;flex-wrap:wrap;gap:2px 4px}
nav a{padding:6px 10px;color:var(--paper);text-decoration:none;font-size:.9rem}
nav a:hover{background:var(--gold);color:var(--wood)}

.hero{background:var(--teal) repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 14px,transparent 14px 28px);padding:40px 0;border-bottom:4px solid var(--wood)}
.hero h1{color:#fff;text-shadow:3px 3px 0 var(--wood)}
.hero p{margin:0 0 24px;color:#fff;font-weight:500}

.btn{display:inline-block;min-height:48px;padding:12px 28px;background:var(--gold);color:var(--wood);font:inherit;font-weight:800;border:3px solid var(--wood);border-radius:2px;box-shadow:0 4px 0 var(--wood);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wood)}
#calcBtn{width:100%}

.card{background:var(--paper);border:4px solid var(--wood);outline:2px solid var(--gold);outline-offset:-8px;box-shadow:0 6px 0 rgba(0,0,0,.25);border-radius:2px;padding:24px 22px;margin:22px 0}
.hint{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:8px}
.field{display:flex;flex-direction:column;min-width:0}
label{font-weight:700;font-size:.92rem;margin-bottom:4px}
input,select{width:100%;min-height:48px;padding:10px 12px;font:inherit;font-size:1rem;border:3px solid var(--wood2);border-radius:2px;background:#fff;color:var(--text)}
small{color:var(--red);font-size:.82rem;min-height:1.2em;margin-top:2px;font-weight:600}
.error{color:var(--bad);font-weight:700;margin:12px 0 0;white-space:pre-line}

.big{background:var(--wood);border:3px solid var(--gold);padding:18px;margin-bottom:14px;text-align:center}
.big span{display:block;color:var(--paper);font-size:.95rem}
.big strong{display:block;font-size:clamp(1.5rem,7vw,2.2rem);color:var(--gold);font-variant-numeric:tabular-nums}
.big em{font-style:normal;color:var(--paper2)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats div{background:var(--paper2);border:2px solid var(--wood2);padding:12px}
.stats span{display:block;color:var(--muted);font-size:.85rem}
.stats strong{font-size:1.05rem;font-variant-numeric:tabular-nums}
.status-row{display:flex;align-items:center;gap:12px;margin:14px 0}
.status-row .status{margin:0;flex:1}
.status{padding:12px 14px;font-weight:800;border:3px solid;background:#fff}
.status.ok{color:var(--ok);border-color:var(--ok)}.status.bad{color:var(--bad);border-color:var(--bad)}
.explain{padding-left:20px}
.warn{background:#ffe9f3;border:2px dashed var(--wood2);padding:10px 14px;font-size:.9rem;margin:14px 0 0}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 8px;border-bottom:2px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
th{background:var(--wood2);color:var(--paper);font-size:.9rem;border:0}
tr.sel td{background:var(--mint);font-weight:800}

details{border-bottom:2px solid var(--line);padding:4px 0}
summary{cursor:pointer;font-weight:700;padding:12px 0}
details p{margin:0 0 12px;color:#4a3b6a}
article{border-top:2px dashed var(--line);padding-top:12px;margin-top:12px}
article p{margin:0}

/* 캐릭터(픽셀 스프라이트): 크기는 아래에서 조절 */
.mascot{display:block;flex:none;overflow:visible;image-rendering:pixelated}
.mascot.big{width:132px;height:176px;animation:bob 1.2s steps(2) infinite}
.mascot.mid{width:60px;height:80px}.mascot.sm{width:36px;height:48px}
.hero-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-mascot{display:flex;flex-direction:column;align-items:center}
.bubble{position:relative;margin:0 0 14px!important;padding:8px 14px;background:var(--paper);border:3px solid var(--wood);font-weight:800;font-size:.9rem;text-align:center;color:var(--wood)!important}
.bubble:after{content:"";position:absolute;left:50%;bottom:-11px;width:12px;height:12px;background:var(--paper);border:solid var(--wood);border-width:0 3px 3px 0;transform:translateX(-50%) rotate(45deg)}
.with-m{display:flex;align-items:center;gap:10px}
.foot-m{display:flex;align-items:center;gap:10px;margin:0}
@keyframes bob{50%{transform:translateY(-6px)}}

.ad{margin:20px 0;text-align:center}
.ad:empty{display:none}
.site-footer{background:var(--wood);color:var(--paper);padding:28px 0;font-size:.85rem;margin-top:32px;border-top:4px solid var(--gold)}
.disclaimer{margin:0 0 12px}

@media(max-width:560px){
  .grid,.stats{grid-template-columns:1fr}
  .card{padding:20px 16px}
  .hero-in{flex-direction:column;align-items:flex-start}.hero-mascot{align-self:center}
  .mascot.big{width:99px;height:132px}.mascot.mid{width:48px;height:64px}
  th,td{padding:10px 4px;font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mascot.big{animation:none}}

/* 안내 페이지(소개·방침·문의) */
.doc{max-width:720px;margin-left:auto;margin-right:auto}
.doc h1{font-size:1.6rem;border-bottom:3px solid var(--gold);padding-bottom:8px}
.doc h2{margin-top:1.4em}
.doc a{color:var(--wood2);font-weight:700}
.doc a.btn{color:var(--wood);text-decoration:none}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 12px}
.foot-links a{color:var(--paper);font-weight:700}