*{box-sizing:border-box}
body{margin:0;background:#f4f6f8;color:#101720;
  font:16px/1.72 -apple-system,BlinkMacSystemFont,'Pretendard','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 18px 60px}

/* 히어로 — 인스타 카드와 같은 그라데이션. 브랜드가 한눈에 이어진다 */
.top{background:linear-gradient(155deg,#1b4468 0%,#132f4b 58%,#0f2438 100%);color:#fff;
  padding-bottom:52px;position:relative;overflow:hidden}
.top::after{content:"";position:absolute;right:-90px;top:-90px;width:290px;height:290px;
  border-radius:50%;background:radial-gradient(circle,rgba(127,199,232,.16),transparent 68%)}
.hd{max-width:760px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:9px;
  position:relative;z-index:1}
.hd b{font-size:16.5px;font-weight:800;letter-spacing:-.03em;color:#fff}
.hd b i{font-style:normal;color:#3ADCB8}
.hd .sp{flex:1}
.hd a.go{font-size:13px;font-weight:700;color:#0f2438;background:#3ADCB8;text-decoration:none;
  padding:8px 14px;border-radius:9px;white-space:nowrap;
  transition:transform .12s cubic-bezier(.23,1,.32,1),filter .15s ease}
.hd a.go:hover{filter:brightness(1.05)}
.hd a.go:active{transform:scale(.97)}
.hero{max-width:760px;margin:0 auto;padding:16px 18px 0;position:relative;z-index:1}
.crumb{font-size:12.5px;color:#9dc7e4;margin:0 0 14px}
.crumb a{color:#9dc7e4;text-decoration:none}
.crumb a:hover{color:#cfe4f3}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.tag{font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px;
  background:rgba(157,199,228,.15);color:#cfe4f3;border:1px solid rgba(157,199,228,.28)}
.tag.g상{background:rgba(217,45,32,.2);border-color:rgba(255,140,130,.45);color:#ffc9c4}
.tag.g중{background:rgba(180,120,20,.22);border-color:rgba(240,190,120,.4);color:#f6dcae}
.tag.g하{background:rgba(90,150,210,.2);border-color:rgba(150,200,240,.38);color:#cfe4f3}
.tag.ok{background:rgba(18,161,135,.22);border-color:rgba(58,220,184,.42);color:#9FE8DB}
.hero .no{font-size:14px;font-weight:700;color:#7FC7E8}
.hero h1{margin:5px 0 10px;font-size:32px;line-height:1.3;letter-spacing:-.04em;font-weight:800;color:#fff}   /* 히어로는 어두운 바탕 — 색을 반드시 명시한다 */
.hero .law{font-size:14px;color:#a9c4da}
.hero .sum{margin:18px 0 0;font-size:15.5px;line-height:1.8;color:#dbe8f2;max-width:640px}

/* 수치 타일 — 히어로에 걸쳐 올라온다. 지켜야 할 숫자를 글에서 꺼내는 자리다 */
.nums{max-width:760px;margin:-34px auto 0;padding:0 18px;position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.nums div{background:#fff;border:1px solid #e7ebef;border-radius:14px;padding:15px 16px;
  box-shadow:0 4px 16px rgba(16,50,79,.07);
  transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .14s ease}
.nums div:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,50,79,.11)}
.nums b{display:block;font-size:24px;font-weight:800;color:#16324f;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.nums span{display:block;font-size:12.5px;color:#6d7883;margin-top:3px;line-height:1.5}
.nums.none{display:none}
/* 히어로가 없는 페이지(목록·분야·원문)의 얇은 브랜드 띠 — 로고는 어디서나 같다 */
.top.slim{padding-bottom:0}
.top.slim .hd{padding:13px 18px}
/* 히어로가 없는 페이지의 제목 — 브라우저 기본 크기(2em)로 두면 지나치게 크다 */
.wrap h1{font-size:26px;line-height:1.35;letter-spacing:-.035em;margin:22px 0 10px;color:#101720}
.wrap>p:first-of-type{color:#3b4855}
/* 목록·분야 페이지의 등급 배지 — 히어로의 칩과 달리 밝은 바탕에 얹힌다 */
.grade{display:inline-block;padding:2px 10px;border-radius:11px;font-size:12.5px;font-weight:700;margin-left:7px;vertical-align:2px}
.grade.g상{background:#fdecea;color:#a62121}
.grade.g중{background:#fff5e0;color:#8a5b00}
.grade.g하{background:#e9f3ff;color:#12558f}

section{margin-top:26px}
h2{font-size:19px;letter-spacing:-.03em;margin:0 0 12px;display:flex;align-items:center;gap:9px;
  color:#101720}
h2 .ic{width:27px;height:27px;border-radius:8px;background:#eaf1f7;color:#16324f;
  display:grid;place-items:center;font-size:14px;flex:none}
.card{background:#fff;border:1px solid #e7ebef;border-radius:16px;padding:18px 20px;margin:0}

ol.duty{margin:0;padding:0;list-style:none;counter-reset:d}
ol.duty li{counter-increment:d;position:relative;padding:11px 0 11px 36px;
  border-bottom:1px solid #f2f5f8;font-size:15px;line-height:1.7;color:#3b4855}
ol.duty li:last-child{border-bottom:0}
ol.duty li::before{content:counter(d);position:absolute;left:0;top:12px;width:24px;height:24px;
  border-radius:7px;background:#eaf1f7;color:#3f5871;font-size:12px;font-weight:800;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}

.chk label{display:flex;gap:11px;align-items:flex-start;padding:11px 0;cursor:pointer;
  border-bottom:1px solid #f2f5f8;font-size:15px;line-height:1.65;color:#3b4855}
.chk label:last-child{border-bottom:0}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:#12A187;flex:none}
.chk input:checked+span{color:#6d7883;text-decoration:line-through}

.act{background:linear-gradient(180deg,#f2fbf9,#eaf7f3);border:1px solid #cfeee6}
.act ul{margin:0;padding-left:20px}
.act li{font-size:15px;color:#12564a;line-height:1.7;margin:5px 0}

.pen{background:linear-gradient(180deg,#fef5f4,#fdeceb);border:1px solid #fbd5d1;
  font-size:15px;line-height:1.74;color:#7a271f}
.pen p{margin:0}
.pen .m2{margin-top:12px;padding-top:12px;border-top:1px solid #fbd5d1;color:#8a4b16;
  font-size:14.5px}

.rawbtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #cfe0f1;
  color:#0b5ca8;border-radius:10px;padding:11px 17px;font-weight:700;font-size:14.5px;
  text-decoration:none;transition:background .15s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.rawbtn:hover{background:#f2f8fd}
.rawbtn:active{transform:scale(.97)}
.qprint{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e2cfa0;
  color:#7a5c14;border-radius:9px;padding:8px 13px;font:inherit;font-weight:700;font-size:13px;
  cursor:pointer;transition:background .15s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.qprint:hover{background:#fdf9ef}
.qprint:active{transform:scale(.97)}
.src{font-size:13.5px;color:#6d7883;word-break:break-all;line-height:1.65}
.src a{color:#0b5ca8}

.rel{display:flex;flex-wrap:wrap;gap:8px}
.rel a{font-size:14px;color:#3b4855;text-decoration:none;background:#fff;border:1px solid #e7ebef;
  border-radius:10px;padding:9px 14px;
  transition:border-color .15s ease,color .15s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.rel a:hover{border-color:#16324f;color:#16324f}
.rel a:active{transform:scale(.97)}

/* 마무리 CTA — 히어로와 같은 색으로 닫는다(위아래가 한 브랜드로 묶인다) */
.cta{display:block;margin:32px 0 0;background:linear-gradient(150deg,#1b4468,#122d47);color:#fff;
  border-radius:20px;padding:26px 24px;text-align:center;text-decoration:none;
  transition:transform .12s cubic-bezier(.23,1,.32,1),filter .15s ease}
.cta:hover{filter:brightness(1.06)}
.cta:active{transform:scale(.99)}
.cta b{display:block;font-size:20px;letter-spacing:-.035em;font-weight:800}
.cta small{display:block;font-weight:400;color:#c3d8e8;margin-top:8px;font-size:14px;
  line-height:1.65}

footer{margin-top:34px;padding-top:18px;border-top:1px solid #e7ebef;font-size:13px;
  color:#6d7883;line-height:1.75}
footer a{color:#0b5ca8}

.annex figure{margin:0 0 14px}
.annex img{width:100%;height:auto;border:1px solid #e7ebef;border-radius:10px;background:#fff}
.annex figcaption{font-size:13px;color:#6d7883;margin-top:6px}
.annex .why{font-size:14px;color:#3b4855;margin:0 0 12px;line-height:1.7}

/* 질의회시·판례 — 법령 카드와 **확실히 갈라 보이게** 한다. 법 조문과 섞여 보이면
   행정해석을 법으로 읽게 되고, 그것이 이 시스템 최악의 실패다. */
.interp{border-left:4px solid #b08a3e;background:#fffdf7}
.interp .why{font-size:13.5px;color:#6b5a2e;background:#fdf6e3;border-radius:9px;padding:10px 12px;
  margin:0 0 12px;line-height:1.6}
.interp details{border-top:1px solid #efe6cf;padding:12px 0 4px}
.interp details:first-of-type{border-top:0;padding-top:2px}
.interp summary{cursor:pointer;font-size:14.5px;font-weight:600;color:#101720;line-height:1.55}
.interp summary::marker{color:#b08a3e}
.interp summary:focus-visible{outline:2px solid #b08a3e;outline-offset:3px;border-radius:4px}
.interp .tag{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 8px;
  border-radius:9px;margin-right:7px;vertical-align:1px;background:#f0e4c4;color:#7a5c14;
  border:0}
.interp .tag.t판례{background:#e6e2f5;color:#4b3f8f}
.interp .meta{display:block;font-size:12.5px;font-weight:400;color:#6b7684;margin-top:4px}
.interp .qa{font-size:14.5px;color:#2b3542;margin:10px 0 4px}
.interp .qa b{display:block;font-size:12px;color:#8a6d20;letter-spacing:-.2px;margin:12px 0 4px}
.interp .qa p{margin:0}
.interp .qa .src{margin-top:12px}

@media(max-width:520px){
  .hero h1{font-size:26px}
  .nums{grid-template-columns:1fr 1fr}
  .hd a.go{font-size:12px;padding:7px 11px}
}