/* ─────────────────────────────────────────────────────────────
   014 서울미라클치과의원 — 브랜드 토큰(로고 픽셀 실측)
   네이비 #093981 / 딥네이비 #06285a / 포인트 옐로 #FECE06(면적 최소)
   배경 쿨화이트 #f7f8fa (치과 톤 · 012 크림 아님)
   골격·클래스명·미디어쿼리는 012 아우름 목업 이식, 색·문구·구성만 014
   ───────────────────────────────────────────────────────────── */
: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}
html{scroll-padding-top:calc(var(--hdr) + 12px)}
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}
.sec{padding:88px 0}
.sec.white{background:#fff}
.eyebrow{margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--navy)}
h2.st{margin:0 0 12px; color:var(--ink); font-weight:800; font-size:clamp(23px,2.6vw,32px); letter-spacing:-.03em; line-height:1.3}
h2.st .u{box-shadow:inset 0 -.34em 0 rgba(254,206,6,.55)}
.lead{margin:0; color:var(--mut); font-size:15px}
.sechead{margin-bottom:38px}
.sechead.ctr{text-align:center}

/* 사유박스 — 확인 대기·발행 전 상태 명시(가짜데이터 금지 원칙) */
.notebox{
  margin:14px 0 0; padding:12px 16px; border-radius:10px; background:#FFF8E1;
  border:1px solid #F0DC8C; font-size:12.5px; color:#7a5f00; line-height:1.6;
}

/* 헤더 */
.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; flex:0 0 auto; position:relative}
.logo img{height:58px; width:auto}
.gnb{display:flex; gap:14px; margin-left:auto; align-items:center}
.gnb a{font-size:13px; font-weight:700; letter-spacing:-.03em; color:#3a3a3d; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap}
.gnb a:hover{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:hover{background:var(--navy-d)}
.telbtn svg{width:14px; height:14px; fill:currentColor}

/* 히어로 — 로비 실사진(hero.jpg) 우측 배치 */
.hero{position:relative; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 66%,#041c40 100%); color:#fff; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(72% 58% at 84% 16%, rgba(254,206,6,.16), transparent 62%)}
.hero-in{position:relative; z-index:2; padding:72px 0 64px; max-width:none;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px; align-items:center}
.hero-txt{max-width:680px}
.hero-shot img{width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 22px 48px rgba(4,16,40,.45); border:1px solid rgba(255,255,255,.14)}
.hero .eyebrow{color:var(--yellow)}
.hero h1{margin:0 0 20px; font-weight:800; color:#fff; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.03em; line-height:1.32}
.hero .lead{color:rgba(255,255,255,.82); font-size:15.5px; max-width:36em}
.hsearch{display:flex; margin:30px 0 16px; max-width:440px; background:#fff; border-radius:999px; padding:6px 6px 6px 18px; align-items:center}
.hsearch input{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:10px 0; font:inherit; font-size:15px; color:var(--ink)}
.hsearch button{border:0; cursor:pointer; border-radius:999px; background:var(--yellow); color:var(--ink); padding:11px 20px; font:inherit; font-size:14.5px; font-weight:800}
.hcount{margin:0; font-size:13px; color:rgba(255,255,255,.62)}
.hcount b{color:#fff}
.hbadges{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.hbadges li{font-size:12px; font-weight:700; letter-spacing:-.02em; color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:5px 12px}
@media(max-width:900px){ .hero-in{grid-template-columns:1fr; gap:26px} .hero-shot{max-width:520px} }

/* 진료 갈래 타일 3×2 — 배경사진 + 어둡게 깔린 그라디언트 */
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.tile{position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end; background:var(--navy-d)}
.tile .tbg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.tile .tsc{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(6,40,90,.10) 30%,rgba(6,40,90,.86) 100%)}
.tile .tin{position:relative; z-index:2; padding:18px; color:#fff; width:100%}
.tile h3{margin:0 0 4px; font-size:17px; font-weight:800; letter-spacing:-.02em}
.tile h3::after{content:""; display:block; width:26px; height:3px; margin-top:7px; border-radius:2px; background:var(--yellow)}
.tile p{margin:6px 0 0; font-size:12.5px; color:rgba(255,255,255,.8)}

/* 가이드 캐러셀 */
.kw-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.kw-card{display:block; text-decoration:none; color:inherit}
.kw-card img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; display:block; height:auto; background:#eef1f6; border:1px solid var(--line)}
.kw-card strong{display:block; font-size:15px; font-weight:700; margin:10px 0 2px; text-align:center; color:var(--ink)}
.kw-card span{display:block; font-size:12px; color:var(--mut); text-align:center}
@media(max-width:1024px){.kw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .kw-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px}
  .kw-grid>a{flex:0 0 46%; scroll-snap-align:start}
}

/* 최근 글 — 집필 전이므로 안내 블록 1개(가짜 제목·가짜 날짜 금지) */

/* 글 카드 — 02_전체글과 동일 규격(발행 후 최신 글이 들어오는 자리) */
.grid4{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:18px; row-gap:30px}
.pcard{display:block; min-width:0}
.pcard .thumb{width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line)}
.pcard .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.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; gap:7px; flex-wrap:wrap}
.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; color:#8a6d00; font-size:11px; font-weight:800}
@media(max-width:1024px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){
  .grid4{display:block; border-top:1px solid var(--line)}
  .pcard{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line)}
  .pcard .thumb{order:2; flex:0 0 72px; width:72px; height:72px; aspect-ratio:auto; border-radius:9px}
  .pcard .txt{order:1; flex:1 1 auto; min-width:0}
  .pcard .pt{margin:0 0 7px; font-size:14.5px}
}
.emptybox{background:#fff; border:1px solid var(--line); border-radius:16px; padding:44px 28px; text-align:center}
.emptybox .ei{width:56px; height:56px; margin:0 auto 16px; border-radius:16px; display:grid; place-items:center; background:#EAF0FA; color:var(--navy)}
.emptybox .ei svg{width:26px; height:26px}
.emptybox b{display:block; font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.emptybox p{margin:8px auto 0; max-width:34em; font-size:14px; color:var(--mut)}
.emptybox .notebox{max-width:44em; margin-left:auto; margin-right:auto; text-align:left}
.morewrap{margin-top:32px; text-align:center}
.ghostbtn{display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:999px; border:1.5px solid var(--navy); color:var(--navy); font-size:14.5px; font-weight:700}
.ghostbtn:hover{background:var(--navy); color:#fff}

/* 오시는 길 */
.loc{display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:stretch}
.mapcard{display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.mapcard .mapimg{flex:1; min-height:320px; position:relative; background:#E9EEF6}
/* iframe 을 absolute 로 부모에 고정 — 레이아웃(우측 카드 높이)이 확정된 뒤에야 크기가 정해지면
   구글맵이 «초기 작은 크기»로 타일을 그려 좌상단만 렌더된다. absolute 면 처음부터 최종 크기다. */
.mapcard iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.mapbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-top:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--mut)}
.mapbar .addr{color:var(--ink)}
.ctacol{display:flex; flex-direction:column; gap:10px; height:100%}
.ctacard{display:flex; align-items:center; gap:13px; padding:15px 18px; border-radius:14px; background:#fff; border:1px solid var(--line)}
.ctacard .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; background:var(--navy); color:#fff}
.ctacard .ic svg{width:19px; height:19px}
.ctacard b{display:block; font-size:14.5px; font-weight:800; color:var(--ink)}
.ctacard .d{display:block; font-size:12px; color:var(--mut)}
.hours{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 18px}
.hours h4{margin:0 0 12px; font-size:11.5px; font-weight:800; letter-spacing:.14em; color:var(--navy)}
.htable{width:100%; border-collapse:collapse; font-size:13.5px}
.htable caption{caption-side:top; text-align:left; font-size:11.5px; color:var(--mut); padding-bottom:8px}
.htable th{text-align:left; font-weight:700; color:var(--ink); padding:9px 0; border-bottom:1px solid #eef0f4; white-space:nowrap}
.htable td{text-align:right; padding:9px 0; border-bottom:1px solid #eef0f4; color:var(--body); font-variant-numeric:tabular-nums}
.htable tr:last-child th,.htable tr:last-child td{border-bottom:0}
.htable .lunch th,.htable .lunch td{color:var(--mut)}
.htable .off td{color:#9aa0aa}
.htable .night td b{font-weight:800; color:var(--navy); box-shadow:inset 0 -.32em 0 rgba(254,206,6,.5)}
.hnote{margin:10px 0 0; font-size:12px; color:var(--mut)}
.park{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px}
.park h4{margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.14em; color:var(--navy)}
.park p{margin:0; font-size:13px; color:var(--body)}
.park .tag{display:inline-block; margin-top:9px; font-size:11.5px; font-weight:800; color:var(--ink); background:rgba(254,206,6,.32); border-radius:6px; padding:3px 9px}
.ctarow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:12px; font-size:14.5px; font-weight:800; letter-spacing:-.02em}
.btn svg{width:16px; height:16px}
.btn.navy{background:var(--navy); color:#fff}
.btn.navy:hover{background:var(--navy-d)}
.btn.book{background:#03C75A; color:#fff}

/* 푸터 */
.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 고정과 충돌해 찌그러진다.
   width:auto 만으로는 못 막는다(012 「로고가 계속 찌그러진다」 사고와 같은 유형). max-width 해제가 정답. */
.ft .logo img{height:30px; width:auto; max-width:none}
.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{display:block; 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}

/* 모바일 드로어 — checkbox 방식(스크립트 없음) */
.dtoggle{position:absolute; opacity:0; width:0; height:0}
.scrim{position:fixed; inset:0; z-index:75; background:rgba(6,40,90,.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(6,40,90,.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:16px 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:15.5px; font-weight:700; color:#3a3a3d}
.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 .dbook{background:#03C75A; color:#fff}
.dfoot .dkakao{background:#FEE500; color:#191919}
/* 옛 901px 드로어 숨김 — 새 헤더가 1100px에서 GNB를 접으므로 분기를 1101px로 올렸다(아래 패치 블록). 여기선 제거. */

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

@media(max-width:1100px){ .gnb{gap:11px} .gnb a{font-size:12.5px} .tiles{gap:12px}
  /* 좁아지면 뒤쪽 보조 링크(전체 글·오시는 길)만 접는다 — 6갈래는 900px 드로어 전까지 유지 */
  .gnb a:nth-child(n+7){display:none} }
@media(max-width:900px){
  :root{--hdr:60px}
  .gnb{display:none}
  .logo img{height:44px}
  .telbtn{margin-left:auto; padding:9px 12px; font-size:13px} .burger span::after{top:7px; position:absolute}
  .sec{padding:56px 0}
  .hero-in{padding:48px 0 52px; max-width:none}
  .hero h1{font-size:27px}
  .hsearch{max-width:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tile h3{font-size:15px}
  .tile .tin{padding:14px}
  .loc{grid-template-columns:1fr}
  .emptybox{padding:34px 20px}
  .ft-top{grid-template-columns:1fr 1fr; gap:24px}
  .ft-top > div:first-child{grid-column:1 / -1}   /* 로고+주소 블록은 전폭 — 227px 로고가 2열 폭에 눌리지 않게 */

  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; min-width:0}
  .mbar .ic{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none}
  .mbar .ic svg{width:22px; height:22px}
  .mbar em{font-style:normal; font-size:11px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1}
  .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:#EAF0FA; color:var(--navy)}
}
@media(max-width:640px){ .ctarow{grid-template-columns:1fr} }
@media(max-width:359px){ .mbar em{font-size:10px} .mbar .ic{width:42px; height:42px} }

/* PC 우측 퀵메뉴 — 1460px 이상에서만(미만은 하단바가 대체). 아이콘은 인라인 SVG 자체 제작 */
.mq-quick{position:fixed; right:22px; top:190px; z-index:8500; display:none; flex-direction:column; gap:8px; width:76px;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px 8px; box-shadow:0 10px 26px rgba(6,40,90,.12)}
.mq-quick a{display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 0; border-radius:12px}
.mq-quick a:hover{background:#f2f5fa}
.mq-quick .qi{width:40px; height:40px; border-radius:13px; display:grid; place-items:center}
.mq-quick .qi svg{width:20px; height:20px}
.mq-quick em{font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:-.04em; color:var(--ink); line-height:1.1; text-align:center}
.mq-quick .q1 .qi{background:var(--navy); color:#fff}
.mq-quick .q2 .qi{background:#03C75A; color:#fff}
.mq-quick .q3 .qi{background:#FEE500; color:#191919}
.mq-quick .q4 .qi{background:#2DB400; color:#fff}
.mq-quick .q5 .qi{background:#FF0000; color:#fff}
.mq-quick .qtop{font-size:9.5px; font-weight:800; letter-spacing:.1em; color:var(--mut); text-align:center; padding:2px 0 4px; border-bottom:1px solid var(--line); margin-bottom:2px}
@media(min-width:1460px){ .mq-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}

body{padding-top:0}
.hero{padding-top:46px}

/* 헤더 전화 버튼 — 공식홈엔 없으나 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-17 approved square card layout: one set, one photo per destination. */
#jinryo-guide .kw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;overflow:visible}
#jinryo-guide .kw-card{background:#fff;border:1px solid #dedbd3;border-radius:14px;overflow:hidden;min-width:0;transition:box-shadow .15s}
#jinryo-guide .kw-card:hover{box-shadow:0 7px 24px #0000000b}
#jinryo-guide .kw-card img{border:0;border-radius:0;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
#jinryo-guide .kw-caption{padding:17px 20px}
#jinryo-guide .kw-caption strong{margin:0;font-size:16px;text-align:left}
#jinryo-guide .kw-caption>span{margin:7px 0 14px;font-size:14px;line-height:1.65;min-height:46px;text-align:left;color:#686963}
#jinryo-guide .kw-caption .kw-more{min-height:0;margin:0;color:#716346;font-size:13px}
@media(max-width:650px){#jinryo-guide .kw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0}#jinryo-guide .kw-caption{padding:12px}#jinryo-guide .kw-caption strong{font-size:14px}#jinryo-guide .kw-caption>span{font-size:12px;min-height:60px}}
/* 2026-10-01 jh 「여기도 케러셀 적용해 3*2로!」, 「휴대폰도 3열 x 2줄」: 휴대폰에서도 한 줄에 3장. 카드 폭이 좁아 설명 줄과 「해당 게시물 보기」는 휴대폰에서만 숨기고 이름만 남긴다(사진 안 문구가 주제를 보여 준다). */
@media(max-width:650px){#jinryo-guide .kw-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#jinryo-guide .kw-caption{padding:8px 6px}#jinryo-guide .kw-caption strong{font-size:12px;line-height:1.35;text-align:center;word-break:keep-all}#jinryo-guide .kw-caption>span,#jinryo-guide .kw-caption .kw-more{display:none}}

/* 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} }

/* ── 네이버 지도(NCP Web Dynamic Map) - 2026-09-26 구글 지도 교체, 정본 _자료/navermap_snippet.md ──
   SDK 가 컨테이너에 인라인 position:relative 를 박으므로 .nmap 자신에게 min-height 를 준다(높이 0 사고 방지) */
.nmap{position:absolute; inset:0; width:100%; height:100%; min-height:320px; background:#F7F7F7}
.nmap-pin{display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; font-weight:800; font-size:15px; letter-spacing:-.03em;
  padding:10px 18px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.18); white-space:nowrap; transform:translate(-50%,-118%)}
.nmap-fb{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:14px; color:#6E6E70; text-align:center; padding:16px}
.nmap-fb a{font-weight:700}

/* ── 산본치과 필라 페이지(토픽 클러스터 허브) - 2026-09-26, page.php → mir_pillar_render() ── */
.pl-crumb{padding:64px 0 0; font-size:13px; color:var(--mut)} /* 고정 헤더 46px + 18px (홈은 body padding 0) */
.pl-crumb a{color:var(--mut)} .pl-crumb a:hover{color:var(--navy)} .pl-crumb span{margin:0 8px}
.pl-head{padding:34px 0 52px}
.pl-h1{margin:0 0 16px; font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.3; color:var(--ink)}
.pl-intro{max-width:46em; color:var(--body); font-size:15.5px; line-height:1.85}
.pl-intro p{margin:0 0 10px}
.pl-facts{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.pl-facts li{padding:7px 13px; border-radius:999px; background:#EAF0FA; color:var(--navy); font-size:12.5px; font-weight:700}
.pl-toc{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.pl-toc a{padding:9px 15px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:13.5px; font-weight:700; color:var(--ink)}
.pl-toc a:hover{border-color:var(--navy); color:var(--navy)}
.pl-cards, .pl-group{padding:60px 0}
.pl-cnt{margin-left:6px; font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap}
@media(max-width:900px){ .pl-h1{font-size:26px} .pl-head{padding:24px 0 36px} .pl-cards, .pl-group{padding:44px 0} }

/* ── 홈 산본치과 토픽 클러스터 지도 - 2026-09-26, functions.php mir_cluster_map_html() ── */
.cl-map{padding:72px 0}
.cl-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.cl-box{display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px; padding:20px 20px 18px}
.cl-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px}
.cl-top h3{margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em}
.cl-top h3 a{color:var(--ink)} .cl-top h3 a:hover{color:var(--navy)}
.cl-cnt{font-size:12.5px; font-weight:700; color:var(--navy); white-space:nowrap}
.cl-box ul{margin:0 0 12px; padding:0; list-style:none; flex:1}
.cl-box li{border-top:1px solid #eef0f4}
.cl-box li a{display:block; padding:10px 0; font-size:14px; line-height:1.5; color:var(--body)}
.cl-box li a:hover{color:var(--navy)}
.cl-more{align-self:flex-start; font-size:13px; font-weight:700; color:var(--navy)}
@media(max-width:1024px){ .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .cl-grid{grid-template-columns:1fr} .cl-map{padding:48px 0} }

/* ── 홈 「산본치과」 필라 글(visiontrend 방식, 펼친 긴 글) - 2026-09-26, functions.php mir_sanbon_guide_html() ── */
.sg-sec{padding:64px 0}
.sg-box{max-width:880px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:18px; padding:44px 48px; color:var(--body)}
.sg-title{margin:0 0 26px; padding-bottom:16px; border-bottom:3px solid var(--navy); font-size:30px; font-weight:800; line-height:1.4; letter-spacing:-.03em; color:var(--navy)}
.sg-toc{margin:0 0 30px; padding:22px 26px; border:1px solid #DCE5F5; border-radius:14px; background:#F4F7FD}
.sg-toc-h{margin:0 0 10px !important; font-size:20px !important; font-weight:800; color:var(--ink)}
.sg-toc ol{margin:0; padding:0; list-style:none}
.sg-toc li{margin:6px 0}
.sg-toc a{color:var(--navy); font-size:15.5px; text-decoration:underline; text-underline-offset:3px}
.sg-box p{margin:0 0 16px; font-size:16px; line-height:1.9}
.sg-kw{color:var(--navy); font-weight:800}
.sg-box h2{margin:52px 0 16px; font-size:27px; font-weight:800; line-height:1.4; letter-spacing:-.03em; color:var(--navy)}
.sg-box h3{margin:30px 0 12px; font-size:20px; font-weight:800; line-height:1.45; color:var(--ink)}
.sg-fig{margin:6px 0 22px}
.sg-fig img{width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line)}
.sg-fig figcaption{margin-top:8px; font-size:13px; color:var(--mut); text-align:center}
.sg-svc{display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:start; margin-bottom:8px}
.sg-svc img{width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line)}
.sg-check{margin:0 0 18px; padding:0; list-style:none}
.sg-check li{position:relative; padding:5px 0 5px 28px; font-size:16px; line-height:1.7}
.sg-check li::before{content:"\2714"; position:absolute; left:2px; top:5px; color:var(--navy); font-weight:800}
.sg-quote{margin:8px 0 22px; padding:18px 22px; border-left:4px solid var(--navy); border-radius:0 12px 12px 0; background:#F4F7FD; font-size:15.5px; font-style:italic; line-height:1.8; color:var(--ink)}
.sg-steps{margin:0 0 18px; padding:0; list-style:none; counter-reset:sg}
.sg-steps li{counter-increment:sg; position:relative; padding:14px 0 14px 52px; border-top:1px solid #eef0f4}
.sg-steps li::before{content:counter(sg); position:absolute; left:0; top:14px; width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; display:grid; place-items:center}
.sg-steps b{display:block; font-size:17px; color:var(--ink); margin-bottom:4px}
.sg-steps span{display:block; font-size:15.5px; line-height:1.8}
.sg-more{margin:-4px 0 18px !important}
.sg-more a{font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.sg-top{text-align:right; margin:4px 0 0 !important; font-size:13.5px}
.sg-top a{color:var(--mut)}
.sg-q{padding:16px 0; border-top:1px solid #eef0f4}
.sg-q h3{margin:0 0 8px; font-size:17.5px}
.sg-q p{margin:0}
.sg-center{text-align:center}
.sg-table{width:100%; border-collapse:collapse; margin:4px 0 18px; font-size:15px}
.sg-table th, .sg-table td{border:1px solid #D9E1F0; padding:13px 16px; text-align:left; vertical-align:top; line-height:1.75}
.sg-table th{width:28%; background:#EEF3FC; color:var(--ink); font-weight:800; text-align:center}
.sg-table a{color:var(--navy); font-weight:700}
.sg-disclaim{margin-top:26px !important; padding:16px 18px; border-radius:12px; background:#F7F8FA; font-size:13px !important; line-height:1.8 !important; color:var(--mut)}
@media(max-width:900px){ .sg-box{padding:28px 20px} .sg-title{font-size:23px} .sg-box h2{font-size:21.5px; margin-top:40px} .sg-box h3{font-size:18px} .sg-sec{padding:44px 0} }
@media(max-width:640px){ .sg-svc{grid-template-columns:1fr; gap:12px} .sg-svc img{max-width:320px} .sg-table th{width:34%} .sg-table th, .sg-table td{padding:11px 10px; font-size:14px} }

/* ── 홈 「산본치과」 발행 글 펼쳐 보기 - 2026-09-26, functions.php mir_sanbon_posts_html() ── */
.sp-sec{padding:8px 0 64px}
.sp-headline{max-width:880px; margin:0 auto 22px}
.sp-post{max-width:880px; margin:0 auto 28px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:40px 48px}
.sp-meta{margin:0 0 8px; font-size:13px; color:var(--mut)}
.sp-meta span{margin-left:10px; padding:2px 9px; border-radius:999px; background:#E9EFFA; color:var(--navy); font-weight:700; font-size:12px}
.sp-title{margin:0 0 22px; padding-bottom:14px; border-bottom:2px solid var(--navy); font-size:26px; font-weight:800; line-height:1.45; letter-spacing:-.03em}
.sp-title a{color:var(--navy)}
.sp-body{font-size:16px; line-height:1.9; color:var(--body)}
.sp-body p{margin:0 0 18px}
.sp-body .lead{margin:0 0 18px; font-size:16px; font-weight:700; color:var(--ink)}
.sp-body h2{margin:34px 0 12px; font-size:20px; font-weight:800; line-height:1.45; color:var(--ink); padding-left:12px; border-left:4px solid var(--yellow)}
.sp-body h3{margin:24px 0 10px; font-size:17.5px; font-weight:800; color:var(--ink)}
.sp-body ul, .sp-body ol{margin:0 0 18px; padding-left:20px}
.sp-body li{margin-bottom:6px}
.sp-body img{max-width:100%; height:auto; border-radius:12px}
.sp-body figure{margin:0 0 20px}
.sp-body figcaption{margin-top:6px; font-size:13px; color:var(--mut); text-align:center}
.sp-body table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px}
.sp-body th, .sp-body td{border:1px solid var(--line); padding:9px 12px; vertical-align:top}
.sp-body a{color:var(--navy); text-decoration:underline}
.sp-link{margin:18px 0 0; text-align:right}
.sp-link a{font-weight:700; color:var(--navy)}
@media(max-width:900px){ .sp-post{padding:26px 18px} .sp-title{font-size:21px} .sp-body h2{font-size:18.5px} }

/* ── 모바일 하단바 5번째 칸 = 홈(맨 위로) - 2026-09-26 jh ── */
@media(max-width:900px){ .mbar a:nth-child(5) .ic{background:var(--ink); color:#fff} }
/* ── 우측 퀵바 맨 아래 = 홈(맨 위로) - 2026-09-26 jh ── */
html{scroll-behavior:smooth}
.mq-quick .q6 .qi{background:var(--ink); color:#fff}
/* 펼친 글의 조판 칸(geo-readcol)은 width:min(700px,92vw) 라 모바일 글 상자 안에서 넘친다 - 상자 안에서는 상자 폭을 따른다(2026-09-26) */
.sp-body .geo-readcol{width:auto; max-width:700px}