:root{
  --navy:#093981; --navy-d:#06285a; --yellow:#FECE06; --ink:#221E1F;
  --bg:#f7f8fa; --body:#4a4a4d; --mut:#7c7c82; --line:#e3e6ec;
  --wrap:1200px; --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.72; 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{display:flex; align-items:center; gap:8px}
.logo img{height:56px; width:auto}
.gnb{display:flex; gap:19px; margin-left:auto; align-items:center}
.gnb a{font-size:14.5px; font-weight:700; color:#33343a; padding:6px 0; border-bottom:2px solid transparent}
.gnb a:hover{color:var(--navy)}
.gnb a[aria-current]{color:var(--navy); border-bottom-color:var(--yellow)}
.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}

/* 페이지헤드 */
.pagehead{background:#fff; border-bottom:1px solid var(--line); padding:44px 0}
.pagehead .eyebrow{margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--navy)}
.pagehead h1{margin:0 0 10px; font-size:clamp(24px,3vw,32px); font-weight:800; color:var(--ink); letter-spacing:-.03em; position:relative; display:inline-block}
.pagehead h1::after{content:""; display:block; width:38px; height:4px; border-radius:2px; background:var(--yellow); margin-top:10px}
.pagehead p{margin:0; color:var(--mut); font-size:14.5px}

/* 툴바(필터칩·검색·정렬) */
.toolbar{padding:22px 0 4px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.fchip{padding:8px 15px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:13px; font-weight:700; color:var(--mut)}
.fchip:hover{border-color:#c6cede; color:var(--navy)}
.fchip[aria-current]{background:var(--navy); border-color:var(--navy); color:#fff}
.tbright{display:flex; gap:10px; align-items:center}
.toolbar .search{display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:8px 16px}
.toolbar .search svg{width:15px; height:15px; flex:0 0 auto; stroke:var(--mut); fill:none; stroke-width:2}
.toolbar .search input{border:0; outline:0; font:inherit; font-size:13.5px; width:170px; background:transparent; color:var(--ink)}
.sortsel{border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; font:inherit; font-size:13px; font-weight:700; background:#fff; color:var(--mut)}

.count{margin:16px 0 0; font-size:13px; color:var(--mut)}
.count b{color:var(--navy)}

/* 안내 박스 */
.notebox{margin:14px 0 26px; padding:13px 16px; border-radius:10px; background:#FFF8DE; border:1px solid #F0DE93; font-size:12.5px; color:#75600b; line-height:1.68}
.notebox b{color:#5d4c05}
.notebox + .notebox{margin-top:-14px}

/* 글 카드 그리드 */
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:16px; row-gap:32px; padding-bottom:46px}
.pcard{display:block; min-width:0}
.pcard .thumb{position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:linear-gradient(150deg,var(--t1,#0a4aa0),var(--t2,var(--navy-d)) 78%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:0 12px; text-align:center}
.pcard .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pcard .thumb{background:#fff; border:1px solid var(--line)}
.pcard:hover .thumb{filter:saturate(1.08)}
.tt-kw{display:block; color:#fff; font-size:18px; font-weight:800; line-height:1.34; letter-spacing:-.02em}
.tt-bar{display:block; width:26px; height:3px; border-radius:2px; background:var(--yellow)}
.tt-sub{display:block; font-style:normal; color:rgba(255,255,255,.74); font-size:11.5px; font-weight:700; letter-spacing:.01em}
.c-implant{--t1:#0a4aa0; --t2:#06285a}
.c-wisdom{--t1:#1b6f8a; --t2:#0d3f55}
.c-cavity{--t1:#17756a; --t2:#0c4239}
.c-esthetic{--t1:#4a3d86; --t2:#2b2359}
.c-sleep{--t1:#2f4f86; --t2:#17305e}
.c-gum{--t1:#8a6a12; --t2:#4d3a06}
.pcard .pt{margin:12px 0 7px; color:var(--ink); font-size:15px; font-weight:700; line-height:1.46}
.pcard:hover .pt{color:var(--navy)}
.metarow{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.chip{padding:3px 9px; border-radius:999px; background:#E9EFFA; color:var(--navy); font-size:11px; font-weight:800}
.badge{padding:3px 9px; border-radius:999px; background:#FFF6D6; border:1px solid #F0DE93; color:#7d6708; font-size:11px; font-weight:800}

/* 페이저 */
.pager{display:flex; justify-content:center; gap:6px; padding-bottom:66px}
.pager a,.pager span{width:36px; height:36px; border-radius:9px; display:grid; place-items:center; border:1.5px solid var(--line); font-size:13px; font-weight:700; color:var(--mut); background:#fff}
.pager a[aria-current]{background:var(--navy); border-color:var(--navy); color:#fff}
.pager span{opacity:.4}
.pager svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2}

/* 푸터 */
.ft{background:var(--ink); color:rgba(255,255,255,.8); padding:52px 0 36px}
.ft-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12)}
/* 가로형(273×36) 푸터 로고 — 전역 max-width:100% 가 폭을 자르면 height 고정과 충돌해 찌그러진다(012 사고 유형) */
.flogo img{height:30px; width:auto; max-width:none}
.ft .fabout{margin:14px 0 0; font-size:12.5px; line-height:1.8; opacity:.7}
.ft h5{margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--yellow)}
.ft ul{margin:0; padding:0; list-style:none; font-size:13px; line-height:2.1}
.ft ul a{color:rgba(255,255,255,.72)}
.ft ul a:hover{color:#fff}
.ftnote{padding-top:22px; font-size:12.5px}
.ftnote .nm{font-weight:800; color:#fff; font-size:14px; margin-bottom:3px}
.ftnote .warn{margin-top:12px; opacity:.55; font-size:11.5px; line-height:1.7}

/* 모바일 드로어 */
.dtoggle{position:absolute; opacity:0; width:0; height:0}
.scrim{position:fixed; inset:0; z-index:75; background:rgba(34,30,31,.5); opacity:0; visibility:hidden; transition:opacity .25s; cursor:pointer}
.drawer{position:fixed; top:0; right:0; z-index:80; width:min(300px,82vw); height:100%; background:#fff; box-shadow:-12px 0 30px rgba(34,30,31,.2);
  transform:translateX(100%); transition:transform .28s; display:flex; flex-direction:column; overflow-y:auto}
.dtoggle:checked ~ .scrim{opacity:1; visibility:visible}
.dtoggle:checked ~ .drawer{transform:none}
.dtop{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line)}
.dtop img{height:34px; width:auto}
.dx{width:38px; height:38px; display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.drawer ul{margin:0; padding:0 18px; list-style:none; flex:1}
.drawer li+li{border-top:1px solid #eef0f4}
.drawer li a{display:block; padding:15px 2px; font-size:16px; font-weight:700; color:#33343a}
.dfoot{padding:16px 18px 20px; border-top:1px solid var(--line); display:grid; gap:8px}
.dfoot a{display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; border-radius:11px; font-size:14px; font-weight:800}
.dfoot .dtel{background:var(--navy); color:#fff}
.dfoot .dkakao{background:#FEE500; color:#191919}
/* 옛 901px 드로어 숨김 — 새 헤더가 1100px에서 GNB를 접으므로 분기를 1101px로 올렸다(아래 패치 블록). 여기선 제거. */

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

@media(max-width:1100px){ .gnb{gap:11px} .gnb a{font-size:12.5px; letter-spacing:-.03em} }
@media(max-width:900px){
  :root{--hdr:60px}
  .gnb{display:none}
  .logo img{height:44px; width:auto}
  .telbtn{margin-left:auto; padding:9px 12px; font-size:13px} .burger span::after{top:7px; position:absolute}
  .pagehead{padding:32px 0}
  .toolbar{flex-direction:column; align-items:flex-start; gap:10px}
  .tbright{width:100%}
  .toolbar .search{flex:1 1 auto}
  .toolbar .search input{width:100%}
  .grid4{display:block; border-top:1px solid var(--line); padding-bottom:20px}
  .pcard{display:flex; flex-direction:row; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); min-height:88px}
  .pcard .thumb{order:2; flex:0 0 64px; width:64px; height:64px; aspect-ratio:auto; border-radius:9px; gap:4px; padding:0 5px}
  .tt-kw{font-size:11px; line-height:1.28}
  .tt-bar,.tt-sub{display:none}
  .pcard .txt{order:1; flex:1 1 auto; min-width:0}
  .pcard .pt{margin:0 0 7px; font-size:14.5px}
  .ft-top{grid-template-columns:1fr 1fr; gap:24px}
  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)}
  .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:#E9EFFA; color:var(--navy)}
}
@media(max-width:560px){
  .ft-top{grid-template-columns:1fr}
}

/* PC 우측 퀵메뉴 — 1460px 이상 */
.quick{position:fixed; right:22px; top:190px; z-index:55; display:none; flex-direction:column; gap:8px; width:64px}
.quick a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:64px; height:64px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 6px 16px rgba(9,57,129,.08)}
.quick a em{font-style:normal; font-size:10px; font-weight:800; color:var(--ink); letter-spacing:-.03em}
.quick a svg{width:20px; height:20px}
.quick a:hover{border-color:#c6cede}
.q-book{background:#03C75A !important; border-color:#03C75A !important}
.q-book em{color:#fff !important}
.q-talk{background:#00C73C !important; border-color:#00C73C !important}
.q-talk em{color:#fff !important}
.q-kakao{background:#FEE500 !important; border-color:#FEE500 !important}
.q-blog{background:#03C75A !important; border-color:#03C75A !important}
.q-blog em{color:#fff !important}
.q-tube{background:#FF0000 !important; border-color:#FF0000 !important}
.q-tube em{color:#fff !important}
@media(min-width:1460px){ .quick{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}
}

/* ─── 전반 점검 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} }

/* 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, parts-listing.php ── */
.cl-crumb{margin:0 0 14px; font-size:13px; color:var(--mut)}
.cl-crumb a{color:var(--mut)} .cl-crumb a:hover{color:var(--navy)} .cl-crumb span{margin:0 8px}
.pagehead p.cl-back{margin-top:14px}
.cl-back a{display:inline-flex; align-items:center; padding:10px 18px; border-radius:999px; border:1.5px solid var(--navy); color:var(--navy); font-size:13.5px; font-weight:700}
.cl-back a:hover{background:var(--navy); color:#fff}

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