/* =========================================================
   미주치과병원 | 공통 헤더·푸터 (head.php / tail.php)
   - #mh : 헤더   #mf : 푸터   #mq : 휴대폰 하단 퀵바
   - .is-m : 휴대폰 (js/miju_header.js 가 붙임)
   ========================================================= */
#mh,#mf,#mq{font-family:'Noto Sans KR',sans-serif;letter-spacing:-.02em;box-sizing:border-box}
#mh *,#mf *,#mq *{box-sizing:border-box}
#mh a,#mf a,#mq a{text-decoration:none}
#mh ul,#mf ul{list-style:none;margin:0;padding:0}
#mh svg,#mf svg,#mq svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mh .in,#mf .in{max-width:1240px;margin:0 auto;padding:0 30px}

/* ---------- 헤더 : PC ---------- */
#mh{position:relative;z-index:1001;background:#fff}
#mh .mh-util{background:#f5f6f8;border-bottom:1px solid #e6e8ed}
#mh .mh-util ul{display:flex;justify-content:flex-end;gap:22px;height:36px;align-items:center}
#mh .mh-util a{font-size:13px;color:#5b6375}
#mh .mh-util b{font-weight:700;color:#143571}
#mh .mh-hold{height:92px}
#mh .mh-bar{background:#fff;border-bottom:1px solid #e6e8ed;transition:box-shadow .2s}
#mh .mh-bar .in{display:flex;align-items:center;height:92px;transition:height .2s}
#mh .mh-logo{flex:0 0 220px;display:flex;align-items:center}
#mh .mh-logo img{height:62px;width:auto;display:block;transition:height .2s}
#mh .mh-nav{flex:1;height:100%}
#mh .mh-nav ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:100%}
#mh .mh-nav li{display:flex}
#mh .mh-nav a{flex:1;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#1d2433;white-space:nowrap}
#mh .mh-nav a:hover,#mh .mh-nav li.on a{color:#143571}
#mh .mh-nav li.on a{box-shadow:inset 0 -4px 0 #143571}
#mh .mh-act{flex:0 0 320px;display:flex;justify-content:flex-end;align-items:center;gap:16px}
#mh .mh-tel{display:flex;align-items:center;gap:7px;font-size:20px;font-weight:900;color:#143571;white-space:nowrap}
#mh .mh-tel svg{width:20px;height:20px;stroke-width:2.2}
#mh .mh-btn{height:48px;padding:0 24px;border-radius:24px;background:#143571;color:#fff;display:flex;align-items:center;font-size:16px;font-weight:700;white-space:nowrap}
#mh .mh-btn:hover{background:#0e2856}
#mh .mh-burger{display:none}

/* 메가메뉴 */
#mh .mh-mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 18px 40px rgba(10,20,45,.18)}
#mh.mopen .mh-mega{display:block}
#mh .mh-mega .in{display:flex}
#mh .mh-lead{flex:0 0 220px;padding:34px 0}
#mh .mh-lead b{display:block;font-size:22px;font-weight:700;color:#143571}
#mh .mh-lead span{display:block;margin-top:10px;font-size:15px;line-height:1.6;color:#5b6375}
#mh .mh-cols{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
#mh .mh-cols ul{padding:28px 0 32px;border-left:1px solid #eef0f3;text-align:center}
#mh .mh-cols ul.hl{background:#f4f7fc}
#mh .mh-cols a{display:block;font-size:15px;line-height:2.3;color:#3a4254;letter-spacing:-.05em;white-space:nowrap}
#mh .mh-cols a:hover{color:#143571;font-weight:700}
#mh .mh-quick{flex:0 0 320px;padding:28px 0 28px 28px;border-left:1px solid #eef0f3;display:flex;flex-direction:column;gap:10px}
#mh .mh-quick a{height:54px;border-radius:12px;display:flex;align-items:center;padding:0 18px;font-size:16px;font-weight:700}
#mh .mh-quick .q1{background:#143571;color:#fff}
#mh .mh-quick .q2{background:#eaf1fb;color:#143571}
#mh .mh-quick .q3{background:#f5f6f8;color:#1d2433}

/* 스크롤 시 고정 */
#mh.fix .mh-bar{position:fixed;left:0;right:0;top:0;box-shadow:0 6px 20px rgba(10,20,45,.10)}
#mh.fix .mh-bar .in{height:72px}
#mh.fix .mh-logo img{height:46px}
#mh.fix .mh-mega{position:fixed;top:72px}

/* 전체메뉴(모바일) : PC 에서는 숨김 */
#mh .mh-drawer{display:none}

/* ---------- 헤더 : 휴대폰 ---------- */
#mh.is-m .mh-util,#mh.is-m .mh-nav,#mh.is-m .mh-btn,#mh.is-m .mh-mega{display:none!important}
#mh.is-m .mh-hold{height:64px}
#mh.is-m .mh-bar .in{height:64px;padding:0 6px 0 18px}
#mh.is-m .mh-logo{flex:1}
#mh.is-m .mh-logo img{height:44px}
#mh.is-m .mh-act{flex:0 0 auto;gap:0}
#mh.is-m .mh-tel{width:48px;height:48px;justify-content:center}
#mh.is-m .mh-tel span{display:none}
#mh.is-m .mh-tel svg{width:24px;height:24px}
#mh.is-m .mh-burger{display:flex;width:48px;height:48px;align-items:center;justify-content:center;border:0;background:none;padding:0;color:#1d2433;cursor:pointer}
#mh.is-m .mh-burger svg{width:26px;height:26px;stroke-width:2.2}

#mh.is-m.dopen .mh-drawer{display:flex}
#mh .mh-drawer{position:fixed;left:0;top:0;z-index:2000;flex-direction:column;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch}
#mh .mh-dhead{flex:0 0 64px;display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 18px;border-bottom:1px solid #e6e8ed}
#mh .mh-dhead img{height:44px;width:auto;display:block}
#mh .mh-close{width:48px;height:48px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;color:#1d2433;cursor:pointer}
#mh .mh-close svg{width:26px;height:26px;stroke-width:2.2}
#mh .mh-dbtn{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 18px 8px}
#mh .mh-dbtn a{height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}
#mh .mh-dbtn .t{background:#eaf1fb;color:#143571;font-weight:900}
#mh .mh-dbtn .c{background:#143571;color:#fff}
#mh .mh-acc{padding-top:6px;flex:1 0 auto}
#mh .mh-acc details{border-bottom:1px solid #eef0f3}
#mh .mh-acc summary{list-style:none;height:60px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;font-size:19px;font-weight:700;color:#1d2433;cursor:pointer}
#mh .mh-acc summary::-webkit-details-marker{display:none}
#mh .mh-acc summary:after{content:"";width:9px;height:9px;border-right:2.2px solid #9aa1b0;border-bottom:2.2px solid #9aa1b0;transform:rotate(45deg) translate(-3px,-3px)}
#mh .mh-acc details[open] summary{color:#143571}
#mh .mh-acc details[open] summary:after{border-color:#143571;transform:rotate(-135deg) translate(-3px,-3px)}
#mh .mh-acc details>div{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;padding:6px 22px 16px;background:#f6f8fb}
#mh .mh-acc details>div a{height:46px;display:flex;align-items:center;font-size:16px;color:#3a4254}
#mh .mh-acc .mh-solo{display:flex;align-items:center;height:60px;padding:0 22px;font-size:19px;font-weight:700;color:#143571;border-bottom:1px solid #eef0f3}
#mh .mh-dfoot{padding:16px 22px 24px;background:#f5f6f8}
#mh .mh-dfoot p{margin:0;font-size:14px;color:#5b6375}
#mh .mh-dfoot ul{display:flex;gap:18px;margin-top:10px}
#mh .mh-dfoot a{font-size:14px;color:#5b6375}
#mh .mh-dfoot a.b{color:#143571;font-weight:700}

/* ---------- 푸터 : PC ---------- */
#mf{background:#0f1d3a;color:#c9d3e6;padding:64px 0 40px}
#mf a{color:#c9d3e6}
#mf a:hover{color:#fff}
#mf h3{margin:0;font-size:18px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}
#mf .mf-grid{display:grid;grid-template-columns:1.15fr 1.25fr 1fr .8fr;gap:56px}
#mf .mf-logo{display:inline-flex;padding:10px 14px;border-radius:12px;background:#fff}
#mf .mf-logo img{height:54px;width:auto;display:block}
#mf .mf-lab{margin:26px 0 0;font-size:15px;color:#8fa0c0}
#mf .mf-tel{display:block;margin-top:4px;font-size:36px;font-weight:900;color:#fff;letter-spacing:-.01em}
#mf .mf-btn{margin-top:18px;height:50px;width:220px;border-radius:25px;background:#fff;color:#143571!important;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
#mf .mf-hours h3 span{height:26px;padding:0 10px;border-radius:13px;background:#2b63d2;color:#fff;display:inline-flex;align-items:center;font-size:13px;font-weight:700}
#mf dl{margin:16px 0 0}
#mf dl div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px}
#mf dt{margin:0}
#mf dd{margin:0;color:#fff}
#mf dl .sun dt,#mf dl .sun dd{color:#9cc0ff;font-weight:700}
#mf .off{margin:12px 0 0;font-size:15px;color:#ffb4b4}
#mf .addr{margin:16px 0 0;font-size:16px;line-height:1.7;color:#fff}
#mf .mf-loc ul{margin-top:12px}
#mf .mf-loc li{font-size:15px;line-height:2}
#mf .mf-map{margin-top:14px;display:flex;gap:8px}
#mf .mf-map a{height:40px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;font-size:14px}
#mf .mf-links ul{margin-top:14px}
#mf .mf-links li{font-size:16px;line-height:2.3}
#mf .mf-links a.b{color:#fff;font-weight:700}
#mf .mf-bottom{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;font-size:14px;line-height:1.8;color:#8fa0c0}
#mf .mf-bottom p{margin:0}
#mf .in.mf-bottom{padding-top:24px}

/* ---------- 푸터 : 휴대폰 ---------- */
#mf.is-m{padding:40px 0 96px}
#mf.is-m .in{padding:0 22px}
#mf.is-m .mf-grid{grid-template-columns:1fr;gap:30px}
#mf.is-m .mf-logo img{height:44px}
#mf.is-m .mf-lab{display:none}
#mf.is-m .mf-tel{margin-top:20px;height:60px;border-radius:14px;background:#fff;color:#143571;font-size:24px;display:flex;align-items:center;justify-content:center}
#mf.is-m .mf-btn{display:none}
#mf.is-m .mf-map{display:grid;grid-template-columns:1fr 1fr}
#mf.is-m .mf-map a{height:46px;justify-content:center;font-size:15px}
#mf.is-m .mf-links ul{display:flex;flex-wrap:wrap;gap:4px 18px}
#mf.is-m .mf-links li{font-size:15px}
#mf.is-m .mf-bottom{margin-top:30px;padding-top:20px;display:block;font-size:13px}

/* ---------- 휴대폰 하단 퀵바 ---------- */
#mq{display:none}
#mq.is-m{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;bottom:0;z-index:1500;height:72px;background:#fff;border-top:1px solid #e6e8ed;box-shadow:0 -6px 18px rgba(10,20,45,.06)}
#mq a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:700}
#mq a svg{width:22px;height:22px}
#mq .q1{color:#143571}
#mq .q2{color:#1d2433;border-left:1px solid #e6e8ed}
#mq .q3{color:#fff;background:#143571}
