:root{
  --navy:#093981; --navy-d:#06285a; --yellow:#FECE06; --ink:#221E1F;
  --bg:#f7f8fa; --body:#4a4a4d; --mut:#7c7c82; --line:#e3e6ec;
  --wrap:1200px; --col:700px; --hdr:84px; --mbar:84px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--body); font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif; font-size:16px; line-height:1.85; letter-spacing:-.01em; word-break:keep-all}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.wrap{width:min(var(--wrap),92vw); margin:0 auto}

/* 헤더 */
.hdr{position:sticky; top:0; z-index:60; height:var(--hdr); background:#fff; border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex; align-items:center; gap:20px; height:100%}
.logo img{height:60px; width:auto}
.gnb{display:flex; gap:18px; margin-left:auto; align-items:center}
.gnb a{font-size:14.5px; font-weight:700; color:#33353c; padding:6px 0; border-bottom:2px solid transparent}
.gnb a:hover{color:var(--navy); border-bottom-color:var(--yellow)}
.gnb .sep{width:1px; height:14px; background:var(--line)}
.telbtn{display:flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px; background:var(--navy); color:#fff; font-weight:800; font-size:14px; white-space:nowrap}
.telbtn svg{width:14px; height:14px; fill:currentColor}

/* 모바일 드로어 — CSS 체크박스 방식 */
.navchk{position:absolute; opacity:0; width:0; height:0} .burger span::after{top:6px}
.drawer-bg{display:none; position:fixed; inset:0; background:rgba(9,57,129,.42); z-index:78}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(300px,82vw); background:#fff; z-index:80; padding:22px 22px 30px; transform:translateX(105%); transition:transform .26s ease; overflow-y:auto}
.drawer .dlogo img{height:52px; width:auto; margin-bottom:18px}
.drawer a.dl{display:block; padding:12px 2px; border-bottom:1px solid var(--line); font-size:15px; font-weight:700; color:var(--ink)}
.drawer .dclose{position:absolute; top:16px; right:16px; font-size:22px; font-weight:700; color:var(--mut); cursor:pointer; line-height:1}
.drawer .dtel{display:block; margin-top:18px; text-align:center; padding:13px; border-radius:10px; background:var(--navy); color:#fff; font-weight:800}
.navchk:checked ~ .drawer{transform:translateX(0)}
.navchk:checked ~ .drawer-bg{display:block}

/* 브레드크럼 */
.crumb{padding:18px 0 0; font-size:12.5px; color:var(--mut)}
.crumb a:hover{color:var(--navy)}
.crumb span{margin:0 6px}

/* 본문 */
.artwrap{max-width:var(--col); margin:0 auto; padding:20px 0 70px}
.chip{display:inline-block; padding:4px 12px; border-radius:999px; background:#e9eefb; color:var(--navy); font-size:12px; font-weight:800; margin-bottom:16px}
h1.pt{margin:0 0 16px; font-size:clamp(24px,3.4vw,32px); font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.4}
h1.pt em{font-style:normal; background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--mut); padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:28px}
.meta .badge{padding:3px 9px; border-radius:6px; background:#fff6d6; border:1px solid #f0dc95; color:#7a5f00; font-weight:800}

.notebox{margin:0 0 24px; padding:14px 18px; border-radius:10px; background:#fff8e0; border:1px solid #f0dc95; font-size:12.5px; color:#7a5f00; line-height:1.7}

.art p{margin:0 0 22px}
.art h2{margin:38px 0 14px; font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.02em; padding-left:12px; border-left:4px solid var(--yellow)}
.art ul{margin:0 0 22px; padding-left:20px}
.art li{margin-bottom:8px}
.artlead{font-weight:700; color:#3c3d42}

.kpbox{background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:12px; padding:18px 20px; margin:0 0 26px; font-size:14.5px}
.kpbox b{display:block; margin-bottom:8px; color:var(--navy)}
.kpbox ul{margin:0; padding-left:20px}
.kpbox li{margin-bottom:5px}

.figimg{margin:18px 0 26px}
.figimg img{width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line)}
.figimg figcaption{margin-top:8px; font-size:12px; color:var(--mut); text-align:center}

h3.fq{margin:22px 0 8px; font-size:15.5px; font-weight:800; color:var(--navy)}
.refs{font-size:13px; color:var(--mut)}
.refs li{margin-bottom:6px}

.disclaim{margin-top:44px; padding:18px 20px; border-radius:12px; background:#fff; border:1px solid var(--line); font-size:12.5px; color:var(--mut); line-height:1.8}
.disclaim b{color:var(--ink)}

.related{margin-top:54px}
.related h3{font-size:15px; font-weight:800; color:var(--ink); margin:0 0 16px}
.relgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.relcard{display:block}
.relcard .th{aspect-ratio:1/1; border-radius:10px; background:linear-gradient(150deg,#2a5aa8,var(--navy-d) 78%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; text-align:center; padding:10px; line-height:1.5}
.relcard:nth-child(2) .th{background:linear-gradient(150deg,#3f6fbd,#093981 78%)}
.relcard:nth-child(3) .th{background:linear-gradient(150deg,#1f4d96,#06285a 78%)}
.relcard p{margin:9px 0 0; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.5}

/* 푸터 */
.ft{background:var(--ink); color:rgba(255,255,255,.78); padding:46px 0 34px; font-size:13px; margin-top:60px; line-height:1.9}
.ftgrid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:28px}
/* 가로형(273×36) 푸터 로고 — 전역 max-width:100% 가 폭을 자르면 height 고정과 충돌해 찌그러진다(012 사고 유형) */
.ftlogo img{height:32px; width:auto; max-width:none; margin-bottom:14px}
.ft h4{margin:0 0 10px; font-size:13px; font-weight:800; color:#fff; letter-spacing:-.01em}
.ft a{color:rgba(255,255,255,.72)}
.ft a:hover{color:var(--yellow)}
.ft ul{list-style:none; margin:0; padding:0}
.ft li{margin-bottom:5px}
.ftlaw{margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:12px; color:rgba(255,255,255,.55)}

/* 모바일 하단바 */
.mbar{display:none}

@media(max-width:900px){
  :root{--hdr:60px}
  .gnb{display:none}
  .logo img{height:44px; width:auto}
  .telbtn{display:none}
  .relgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .relcard:nth-child(3){display:none}
  .ftgrid{grid-template-columns:1fr 1fr; gap:22px}
  body{padding-bottom:calc(var(--mbar) + env(safe-area-inset-bottom))}
  .mbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; height:calc(var(--mbar) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(0,0,0,.08); box-sizing:border-box}
  .mbar a{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px}
  .mbar .ic{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center}
  .mbar .ic svg{width:22px; height:22px}
  .mbar em{font-style:normal; font-size:11px; font-weight:700; color:var(--ink)}
  .mbar a:nth-child(1) .ic{background:var(--navy); color:#fff}
  .mbar a:nth-child(2) .ic{background:#03C75A; color:#fff}
  .mbar a:nth-child(3) .ic{background:#FEE500; color:#191919}
  .mbar a:nth-child(4) .ic{background:#e9eefb; color:var(--navy)}
}
@media(max-width:600px){
  .artwrap{padding:16px 0 54px}
  .ftgrid{grid-template-columns:1fr}
}

/* PC 우측 퀵메뉴 — 1460px 이상에서만 */
.mq{position:fixed; right:24px; top:190px; z-index:50; display:none; flex-direction:column; gap:8px; width:74px}
.mq b{display:block; text-align:center; font-size:11px; font-weight:800; color:var(--navy); letter-spacing:.02em; margin-bottom:2px}
.mq a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:10px 4px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px rgba(9,57,129,.06)}
.mq a:hover{border-color:var(--navy)}
.mq a svg{width:22px; height:22px}
.mq a em{font-style:normal; font-size:10.5px; font-weight:700; color:#44464d}
@media(min-width:1460px){ .mq{display:flex} }

/* ─── 공식 홈페이지 네비게이션 이식 (miracledc.com 실측 2026-08-27) ───────────────
   header#hd.main-hd = position:fixed · height 46px · rgba(9,57,129,.88) · z-index 9999
   로고는 «가로형 흰색»(273×36)이다 — 세로형 컬러는 메가패널 안에서만 쓴다.
   1차 메뉴 20px/400 흰색 · hover 시 흰 메가패널(중앙 로고 + 열 구분선 + 서브 목록).
   script 없이 :hover / checkbox 만으로 동작. */
.mhd{position:fixed; left:0; right:0; top:0; z-index:9999; background:rgba(9,57,129,.88)}
.mhd-wr{width:min(1460px,96vw); margin:0 auto; height:46px; display:flex; align-items:center; gap:14px}
.mhd .mlogo{flex:0 0 auto; line-height:0; margin:0}
.mhd .mlogo img{height:26px; width:auto; max-width:none; display:block}
.mgnb{display:flex; align-items:center; gap:clamp(14px,2vw,34px); margin-left:auto}
.mgnb > a{font-size:clamp(14px,1.3vw,20px); font-weight:400; color:#fff; letter-spacing:-.03em;
          white-space:nowrap; line-height:46px}
.mgnb > a:hover{color:var(--yellow)}
.mmenu{margin-left:auto; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; flex:0 0 auto}
.mgnb ~ .mmenu{margin-left:14px}
.mmenu span,.mmenu span::before,.mmenu span::after{display:block; width:24px; height:2px; background:#fff; content:""}
.mmenu span{position:relative}
.mmenu span::before{position:absolute; top:-7px} .mmenu span::after{position:absolute; top:7px}

/* 메가 패널 — 헤더에 hover 하면 열린다(공식홈은 JS, 여기선 CSS) */
.mega{position:absolute; left:min(76px,5vw); right:min(76px,5vw); top:46px; background:#fff;
      border-radius:0 0 20px 20px; box-shadow:0 22px 44px rgba(9,57,129,.18);
      padding:26px 0 32px; opacity:0; visibility:hidden; transform:translateY(-10px);
      transition:opacity .22s, transform .22s, visibility .22s;
      max-height:calc(100vh - 46px); overflow:auto}
.mhd:hover .mega, .mhd:focus-within .mega{opacity:1; visibility:visible; transform:none}
.mega-logo{display:flex; justify-content:center; margin-bottom:24px}
.mega-logo img{height:70px; width:auto; max-width:none}
.mega-cols{width:min(1400px,96vw); margin:0 auto; display:grid; grid-template-columns:repeat(8,minmax(0,1fr))}
.mega-col{padding:0 8px; text-align:center; border-left:1px solid #e9ecf2}
.mega-col:first-child{border-left:0}
.mega-col > b{display:block; font-size:16px; font-weight:400; color:#1d1d1d; line-height:1.35;
              padding-bottom:13px; margin-bottom:13px; border-bottom:1px solid #e9ecf2; word-break:keep-all}
.mega-col a{display:block; font-size:14.5px; color:#4a4a4d; padding:7px 2px; line-height:1.42; word-break:keep-all}
.mega-col a:hover{color:var(--navy); font-weight:700}
@media(max-width:1100px){ .mgnb{display:none} .mega{display:none} }

/* 본문이 고정 헤더에 가리지 않도록 */
body{padding-top:46px}
html{scroll-padding-top:58px}

/* 헤더 전화 버튼 — 공식홈엔 없으나 jh 지시(2026-08-27)로 복구. 네이비 바 위 옐로 필(면적 최소 원칙 안에서 CTA만) */
.mtel{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:18px;
      padding:6px 14px; border-radius:999px; background:var(--yellow); color:#221E1F;
      font-size:14px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; line-height:1}
.mtel:hover{background:#ffd93a}
.mtel svg{width:13px; height:13px; fill:currentColor}
@media(max-width:600px){ .mtel span{display:none} .mtel{padding:7px 10px; margin-left:auto} }

/* ─── 전반 점검 수정(2026-08-27) ────────────────────────────────────────────
   ① 901~1100px 네비 공백 — 새 헤더는 1100px에서 GNB를 접는데 옛 드로어는 901px부터 숨어
      그 사이 구간에 메뉴가 하나도 없었다. 두 분기를 1101px 로 통일한다.
   ② 드로어가 고정 헤더(z-index 9999)에 덮여 닫기 버튼이 눌리지 않았다 → 헤더 위로 올린다.
   ③ 메가패널 내부 열 그리드(96vw)가 패널(90vw)보다 넓어 마지막 열이 잘렸다 → 패널 폭에 종속.
   ④ 전화버튼 복구로 1차 메뉴가 가로로 넘쳤다 → 폰트·간격 하향, 좁은 폭에선 번호 텍스트 숨김. */
@media(min-width:1101px){ .scrim,.drawer,.dtoggle,.drawer-bg,.navchk,.mmenu{display:none} }
.scrim,.drawer-bg{z-index:10000}
.drawer{z-index:10001}
.mega-cols{width:100%; max-width:1400px; padding:0 12px}
.mgnb{gap:clamp(10px,1.5vw,26px)}
.mgnb > a{font-size:clamp(13px,1.16vw,17px)}
.mtel{margin-left:14px}
@media(max-width:1340px){ .mtel span{display:none} .mtel{padding:7px 10px} }
@media(max-width:1279px){
  .mega-cols{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:24px}
  .mega-col:nth-child(4n+1){border-left:0}
}

.drawer{padding-top:calc(22px + 46px)}
.drawer .dclose{top:58px}

/* ─── 전반 점검 2차 수정(2026-08-27) ─ 공식홈 실측치 근사 + 기능 파손 교정 ───────
   · 로고 224×29.5 / 메가 서브 17px #1d1d1d / 열 제목 밑줄 없음 / 햄버거 잉크 30×24 (gnb_probe·shot_* 실측)
   · GNB가 숨는 폭에서도 우측 정렬이 유지되도록 로고에 margin-right:auto 를 준다
     (기존엔 .mgnb{margin-left:auto} 만 auto 였던 탓에 GNB가 사라지면 전부 왼쪽에 뭉쳤다) */
.mhd .mlogo{margin-right:auto}
.mhd .mlogo img{height:29px}
.mgnb{margin-left:0}
.mgnb > a{font-size:clamp(14px,1.28vw,19px)}
.mmenu{width:38px; height:34px}
.mmenu span,.mmenu span::before,.mmenu span::after{width:30px; height:2px}
.mmenu span::before{top:-8px} .mmenu span::after{top:8px}
.mega-logo img{height:90px}
.mega-col > b{font-size:17px; color:#1d1d1d; border-bottom:0; padding-bottom:0; margin-bottom:18px}
.mega-col a{font-size:16px; color:#1d1d1d}
.mega-col a:hover{color:var(--navy)}
@media(max-width:1340px){ .mega-col > b{font-size:16px} .mega-col a{font-size:15px} }
.relbadge{display:inline-block; margin-right:6px; padding:2px 7px; border-radius:5px;
  background:#FFF6D6; border:1px solid #F0DE93; color:#7d6708; font-size:10.5px; font-weight:800; vertical-align:1px}

/* 2026-09-21 헤더 표준 ① — 가운데 분류 메뉴(mgnb)와 메가메뉴를 빼고 검색바를 넣었다. 분류 이동은 햄버거(서랍)로, 데스크톱에서도 서랍을 연다. */
.navsearch{flex:1;display:flex;align-items:center;gap:8px;max-width:520px;margin:0 auto;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:#fff;padding:4px 4px 4px 16px}
.navsearch input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--ink);height:30px}
.navsearch input::placeholder{color:#9aa6b4}
.navsearch button{flex-shrink:0;border:0;background:var(--yellow);color:var(--ink);border-radius:999px;padding:0 16px;height:30px;font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.mofficial{flex:0 0 auto;color:#fff;font-size:14px;font-weight:700;padding:6px 10px;border:1px solid rgba(255,255,255,.4);border-radius:999px;white-space:nowrap}
.mofficial:hover{color:var(--yellow)}
.dsearch{display:flex;gap:8px;margin:0 18px 14px;border:1px solid #dfe3ea;border-radius:999px;background:#fff;padding:4px 4px 4px 14px}
.dsearch input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;height:30px}
.dsearch button{border:0;background:var(--yellow);color:var(--ink);border-radius:999px;padding:0 14px;height:30px;font:inherit;font-weight:800;font-size:13px}
.dofficial{display:block;margin:0 18px;padding:14px 2px;font-weight:800;color:var(--navy);border-top:1px solid #eef0f4}
@media(min-width:1101px){ .mmenu{display:grid} .scrim,.drawer,.dtoggle{display:block} .dtoggle{position:absolute;opacity:0;width:0;height:0} }
@media(max-width:1100px){ .navsearch,.mofficial{display:none} }

/* 토픽 클러스터 역링크(글 → 허브) - 2026-09-26 */
.hubbox{margin-top:22px}
.hubbox a{display:flex; flex-direction:column; gap:4px; padding:16px 20px; border-radius:12px; border:1px solid var(--line); border-left:4px solid var(--navy); background:#fff}
.hubbox b{font-size:15px; font-weight:800; color:var(--navy)}
.hubbox span{font-size:13px; color:var(--mut); line-height:1.6}
.hubbox a:hover b{text-decoration:underline}

/* ── 모바일 하단바 5번째 칸 = 홈(맨 위로) - 2026-09-26 jh ── */
@media(max-width:900px){ .mbar a:nth-child(5) .ic{background:var(--ink); color:#fff} }