/* ==========================================================
   진료과목 검색 노출(승격) 페이지 — inc/medical-landing.php · template-embed.php (2026-10-17)
   자윤 지점 content.css .ml-* 구조를 위강 토큰(weekang-branch.css :root)으로 옮긴 것.
   진료과목 미러 페이지(승격·비승격)와 링크가 붙는 블로그 글에서만 로드한다.
   ========================================================== */

/* ---- 머리: 브레드크럼 · H1 · 지점 한 줄 · CTA (고정 헤더 72px / 모바일 64px 아래) ---- */
.ml-head{padding:calc(72px + clamp(36px,5vw,64px)) 0 clamp(28px,3.5vw,40px);background:var(--paper);border-bottom:1px solid var(--line)}
.ml-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px;font-size:13px;color:var(--mute)}
.ml-crumb a{color:inherit;text-decoration:none}
.ml-crumb a:hover{color:var(--bronze-600);text-decoration:underline;text-underline-offset:3px}
.ml-h1{margin:0 0 14px;font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,44px);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.ml-meta{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.ml-meta strong{color:var(--ink);font-weight:700}
.ml-dot{margin:0 8px;color:var(--mute)}
.ml-cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---- 원장 코멘트 ---- */
.ml-note{background:var(--cream);border-bottom:1px solid var(--line);padding:clamp(36px,5vw,60px) 0}
.ml-note__inner{display:grid;grid-template-columns:168px 1fr;gap:clamp(24px,4vw,52px);align-items:start}
.ml-note__doc{margin:0;text-align:center}
.ml-note__photo{display:block;width:148px;height:148px;margin:0 auto 14px;object-fit:cover;object-position:top center;border-radius:50%;
  background:var(--bronze-100);border:1px solid var(--line);filter:saturate(.9) contrast(1.02)}
.ml-note__doc figcaption strong{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink)}
.ml-note__doc figcaption span{display:block;margin-top:4px;font-size:12.5px;color:var(--mute)}
.ml-note__body{max-width:800px}
.ml-note__body .eyebrow{margin-bottom:12px}
.ml-note__title{margin:0 0 18px;font-size:clamp(20px,2.4vw,26px);line-height:1.4}
.ml-note__body p{margin:0;font-size:16px;line-height:1.9;color:var(--ink-2)}
.ml-note__body p+p{margin-top:1em}

/* ---- 본원 진료 안내(iframe) — 접었다 펼치기 ---- */
.ml-guide{padding:clamp(56px,7vw,88px) 0 clamp(44px,5vw,72px)}
.ml-guide__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.ml-guide__head .eyebrow{margin-bottom:12px}
.ml-guide__title{margin:0;font-size:clamp(24px,3vw,34px)}
.ml-guide__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--bronze-600);
  font:600 14px/1 var(--sans);cursor:pointer}
.ml-guide__link[hidden]{display:none}
.ml-guide__toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ml-guide__toc[hidden]{display:none}
.ml-guide__chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:42px;padding:0 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink-2);font:600 14px/1 var(--sans);cursor:pointer;transition:border-color .2s,color .2s}
.ml-guide__chip .n{flex:none;font-family:var(--serif);color:var(--bronze-600);font-weight:600}
.ml-guide__chip .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.ml-guide__chip:hover{border-color:var(--bronze-400);color:var(--bronze-700)}
/* 액자는 .wrap 밖 전폭 — 본원 PC 판이 최소 1300px 고정 폭. 좁은 화면은 모바일 판을 가운데 760px(.is-m) */
.ml-guide__frame{position:relative;margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#fff}
.ml-guide__frame.is-m{max-width:760px;margin-inline:auto;border:1px solid var(--line);box-shadow:0 18px 50px -30px rgba(34,25,19,.35)}
.ml-guide__iframe{display:block;width:100%;height:calc(100vh - 160px);border:0;background:#fff}
.ml-guide__frame.is-collapsed{max-height:720px}
.ml-guide__fade{position:absolute;left:0;right:0;bottom:0;height:260px;padding-bottom:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 55%,#fff 100%)}
.ml-guide__fade[hidden]{display:none}
.ml-guide__more{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 30px;border:0;border-radius:var(--radius);
  background:var(--bronze-600);color:var(--card);font:600 15px/1 var(--sans);cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(34,25,19,.6);transition:transform .2s,background .2s}
.ml-guide__more:hover{background:var(--bronze-700);transform:translateY(-2px)}
.ml-guide__count{font-size:13px;color:var(--mute)}
.ml-guide__foot{display:flex;justify-content:center;margin-top:28px}
.ml-guide__foot[hidden]{display:none}

/* 펼친 본원 안내를 지나는 동안 헤더 아래 따라오는 바 */
.ml-sticky{position:fixed;left:0;right:0;top:72px;z-index:90;background:rgba(251,248,243,.98);border-bottom:1px solid var(--line);
  box-shadow:0 8px 22px -18px rgba(34,25,19,.5);opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.ml-sticky.is-on{opacity:1;transform:none}
.ml-sticky[hidden]{display:none}
.ml-sticky__inner{display:flex;align-items:center;gap:18px;min-height:60px}
.ml-sticky__title{font-family:var(--serif);font-size:15px;font-weight:600;white-space:nowrap;color:var(--ink)}
.ml-sticky__now{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--bronze-600)}
.ml-sticky__sp{flex:1}
.ml-sticky__close{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--mute);
  font:600 13.5px/1 var(--sans);cursor:pointer}

/* ---- 아래: 자주 묻는 질문 · 진료 안내 카드 ---- */
.ml-info{background:var(--paper);border-top:1px solid var(--line)}
.ml-info .eyebrow{margin-bottom:12px}
.ml-info__title{margin:0 0 26px;font-size:clamp(22px,3vw,30px)}
.ml-faq{margin:0 0 clamp(48px,6vw,72px)}
.ml-faq__item{border:1px solid var(--line);background:var(--card);margin:0 0 10px}
.ml-faq__item summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;font-size:16px;line-height:1.5;color:var(--ink)}
.ml-faq__item summary::-webkit-details-marker{display:none}
.ml-faq__item summary::before{content:"Q";margin-right:12px;font-family:var(--serif);color:var(--bronze-600);font-weight:700}
.ml-faq__item p{margin:0;padding:0 24px 22px 50px;font-size:15.5px;line-height:1.85;color:var(--ink-2)}
.ml-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}
.ml-card{background:var(--card);border:1px solid var(--line-soft);padding:26px 26px 24px}
.ml-card h3{margin:0 0 16px;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.ml-card__doc{margin:0 0 8px}
.ml-card__doc strong{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}
.ml-card__doc span{margin-left:8px;font-size:14px;color:var(--mute)}
.ml-hours{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.ml-hours th,.ml-hours td{padding:11px 4px;border-bottom:1px solid var(--line-soft);font-size:14.5px;text-align:left;vertical-align:top}
.ml-hours th{width:96px;font-weight:600;color:var(--ink)}
.ml-hours td{color:var(--ink-2)}
.ml-hours td.off{color:var(--mute)}
.ml-card__note{margin:12px 0 0;font-size:13px;color:var(--mute)}
.ml-card__rows{display:grid;grid-template-columns:64px 1fr;gap:10px 12px;margin:0;font-size:14.5px;line-height:1.6}
.ml-card__rows dt{color:var(--mute);font-weight:600}
.ml-card__rows dd{margin:0;color:var(--ink-2)}
.ml-card__rows a{color:inherit}
.ml-card__more{margin:18px 0 0;font-size:14px}
.ml-card__more a{color:var(--bronze-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* 연결된 지점 블로그 글 — iframe 과 FAQ 사이 (행 마크업·스타일은 블로그 목록 .post-list/.post-row 재사용) */
.ml-related{padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--line)}
.ml-related__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}
.ml-related .ml-info__title{margin-bottom:18px}

/* 글 하단 → 진료과목 검색 노출 페이지 링크 */
.ml-postlinks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:36px 0 0;padding:18px 22px;border:1px solid var(--line);
  background:var(--cream);font-size:15px}
.ml-postlinks__k{font:700 12px/1 var(--sans);letter-spacing:.16em;color:var(--gold-deep)}
.single .entry .ml-postlinks a{color:var(--bronze-700);font-weight:600;text-decoration:none}
.single .entry .ml-postlinks a:hover{text-decoration:underline}

body.admin-bar .ml-head{padding-top:calc(104px + clamp(36px,5vw,64px))}

@media (max-width:880px){
  .ml-head{padding-top:calc(64px + 32px)}
  body.admin-bar .ml-head{padding-top:calc(110px + 32px)}
  .ml-sticky{top:64px}
}
@media (max-width:640px){
  .ml-cta .btn{flex:1 1 auto}
  .ml-guide__head{align-items:flex-start;flex-direction:column;gap:4px}
  .ml-guide__link{display:none}
  .ml-guide__toc{flex-wrap:nowrap;overflow-x:auto;margin:18px -20px 0;padding:0 20px 4px;scrollbar-width:none}
  .ml-guide__toc::-webkit-scrollbar{display:none}
  .ml-guide__chip{flex:none;min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap}
  .ml-guide__frame.is-collapsed{max-height:560px}
  .ml-guide__frame.is-m{border-inline:0;box-shadow:none}
  .ml-guide__fade{height:220px;padding-bottom:28px}
  .ml-guide__more{font-size:14.5px;padding:0 22px}
  .ml-sticky__inner{gap:10px;min-height:52px}
  .ml-sticky__title{font-size:14px;overflow:hidden;text-overflow:ellipsis}
  .ml-sticky__now,.ml-sticky__cta{display:none}
  .ml-note__inner{grid-template-columns:1fr;gap:18px}
  .ml-note__doc{display:flex;align-items:center;gap:14px;text-align:left}
  .ml-note__photo{width:76px;height:76px;margin:0}
  .ml-faq__item summary{padding:18px 18px}
  .ml-faq__item p{padding:0 18px 20px}
  .ml-card{padding:22px 20px 20px}
}

/* src 는 인라인 스크립트가 넣음(wkb_ml_frame) — JS 가 없으면 빈 iframe 대신 noscript 의 PC 판만 보이게 */
iframe[data-src]:not([src]){display:none}

/* 비승격 미러(화면 높이 iframe) — 모바일 판은 유동 폭 최대 1000px 이라 넓은 태블릿에선 가운데로 */
.embed-frame.is-m{max-width:1000px;margin-inline:auto;border-inline:1px solid var(--line)}
@media (max-width:1000px){.embed-frame.is-m{border-inline:0}}

/* 미러 페이지의 숨김 제목(<h1 class="sr-only">) — 부모 CSS 를 dequeue 하면서 정의가 빠져 54px 블록으로 iframe 을 밀어내던 것 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
