@charset "UTF-8";
/* ============================================================
   서울드림치과 · 메인(원페이지)
   구 홈페이지(www · theme/landing)의 섹션 순서와 이미지를 그대로 쓰고,
   글자가 박힌 이미지는 실제 텍스트로 바꿔 반응형으로 다듬었습니다.
   ============================================================ */

/* width/height 속성을 준 이미지가 CSS 너비에 맞춰 비율대로 줄어들도록 (배경용 이미지는 아래에서 100% 로 덮어씀) */
main img,.dlg img{height:auto}

/* ---------------------------------------------- 1. 메인 슬라이드 */
/* 헤더(항상 흰색) 바로 아래에서 시작 — 사진이 헤더 뒤로 들어가지 않음 */
.mhero{position:relative;margin-top:var(--header-h);height:min(calc(100svh - var(--header-h)),860px);min-height:560px;overflow:hidden;isolation:isolate;background:var(--deep);color:#fff}
@media (max-width:760px){.mhero{height:calc(100svh - var(--header-h));min-height:540px}}
.mhero__slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 1s}
.mhero__slide.is-active{opacity:1;visibility:visible;z-index:1}
.mhero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 8s linear}
.mhero__slide.is-active .mhero__bg{transform:scale(1)}
.mhero__slide::before{content:"";position:absolute;inset:0;z-index:-1}
.mhero__in{position:relative;display:grid;gap:clamp(14px,1.8vw,24px);align-content:center;width:100%;padding-top:clamp(20px,4vh,48px);padding-bottom:clamp(70px,9vh,110px)}
.mhero__eyebrow{font-family:var(--font-en);font-size:var(--fs-kicker);font-weight:700;letter-spacing:.42em;opacity:.55}
.mhero__lead{font-size:var(--fs-lead);line-height:1.9;max-width:40ch;letter-spacing:-.02em}
.mhero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:6px}

/* 1-1 원장 */
.mhero__slide--doctor{color:var(--ink)}
.mhero__slide--doctor .mhero__bg{object-position:70% 40%}
.mhero__slide--doctor::before{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 36%,rgba(255,255,255,.2) 62%,rgba(255,255,255,0) 72%)}
/* 모바일 · 태블릿 세로: PC 와 같은 구도(글 왼쪽 위 · 원장 오른쪽)를 세로 화면에 맞춤.
   흰 막으로 사진 전체를 덮지 않고, 사진을 오른쪽 아래에 앉혀 왼쪽 · 위쪽 가장자리만 흰 바탕으로 녹임.
   --ptop = 사진이 올라올 수 있는 윗변(병원명 아래) · --pclear = 왼쪽 글(대표원장 · 버튼)이 차지하는 폭 */
@media (max-width:900px){
  .mhero__slide--doctor{--ptop:calc(5vh + 140px);--pclear:280px;background:#fff}
  .mhero__slide--doctor .mhero__bg{inset:auto 0 0 auto;width:auto;max-width:none;
    height:min(calc(100% - var(--ptop)),calc((100vw - var(--pclear))*2.633));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px),linear-gradient(90deg,transparent 12%,#000 56%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,transparent 0,#000 22px),linear-gradient(90deg,transparent 12%,#000 56%);mask-composite:intersect;
    transform:translateX(14%) scale(1.06)}
  .mhero__slide--doctor.is-active .mhero__bg{transform:translateX(14%) scale(1)}
  .mhero__slide--doctor::before{content:none}
  .mhero__slide--doctor .mhero__in{align-self:flex-start;align-content:start;padding-top:5vh}
}
@media (max-width:560px){
  .mhero__slide--doctor{--pclear:175px}
  /* 폰: 자격증 → 대표원장 → 약력 버튼 순서로 한 줄씩, 자격증은 조금 크게.
     버튼 · 자격증 묶음(.mhero__acts)을 풀어 대표원장과 같은 줄 단위로 순서를 바꿈 */
  .mhero__slide--doctor .mhero__acts{display:contents}
  .mhero__slide--doctor .mhero__cert{order:1;justify-self:start}
  .mhero__slide--doctor .mhero__who{order:2}
  .mhero__slide--doctor .mhero__acts .btn{order:3;justify-self:start}
  .mhero__slide--doctor .mhero__cert img{width:min(34vw,140px)}
}
.mhero__pre{font-family:var(--font-display);font-size:clamp(1.02rem,2vw,1.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.6}
.mhero__pre mark{background:var(--navy);color:#fff;padding:.02em .32em;margin-inline:.1em;font-weight:700}
.mhero__title{display:flex;align-items:center;gap:.28em;font-family:var(--font-display);font-size:clamp(2.3rem,6.4vw,5.4rem);font-weight:700;letter-spacing:-.055em;line-height:1.05;color:var(--navy)}
.mhero__title em{font-style:normal;color:var(--blue)}
.mhero__title svg{width:.86em;height:auto;flex:0 0 auto}
.mhero__title .m1{fill:#0066b5}.mhero__title .m2{fill:#00367d}
.mhero__who{display:inline-grid;gap:2px;justify-self:start;padding:10px 20px 10px 16px;border-left:3px solid var(--blue);background:var(--navy);color:#fff}
.mhero__who span{font-size:.74rem;opacity:.75}
.mhero__who b{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:.14em;line-height:1.2}
.mhero__cert{margin:0;display:flex;align-items:center;gap:12px;font-size:var(--fs-small);color:var(--ink-3)}
.mhero__cert img{width:clamp(78px,7vw,108px);border-radius:6px;box-shadow:0 10px 28px -14px rgba(8,23,43,.5);background:#fff}
@media (max-width:900px){.mhero__cert figcaption{display:none}}

/* 1-2 더이상 두렵지 않도록 */
.mhero__slide--calm::before{background:linear-gradient(115deg,rgba(0,40,92,.9),rgba(0,59,124,.55) 60%,rgba(2,24,47,.75))}
.mhero__big{display:grid;font-family:var(--font-display);font-size:clamp(3.2rem,11vw,9rem);font-weight:500;line-height:1;letter-spacing:-.06em}
.mhero__big strong{font-weight:700;color:var(--sky)}
.mhero__mark{position:absolute;right:max(var(--gutter),6vw);top:50%;width:clamp(160px,26vw,420px);transform:translateY(-38%);opacity:.12}
.mhero__mark path{fill:#fff}
.mhero__slide--calm .mhero__lead{color:rgba(255,255,255,.84)}
.mhero__slide--calm .mhero__lead b{color:#fff}

/* 1-3 디지털 임플란트 */
.mhero__slide--digital::before{background:linear-gradient(90deg,rgba(2,12,30,.72) 0%,rgba(2,12,30,.35) 50%,rgba(2,12,30,0) 75%)}
.mhero__title2{font-family:var(--font-display);font-size:clamp(2.7rem,7.4vw,6rem);font-weight:700;letter-spacing:-.055em;line-height:1.04;
  background:linear-gradient(92deg,#fff 20%,#8fc2e8 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mhero__slide--digital .mhero__pre b,.mhero__slide--digital .mhero__lead b{color:#fff}
.mhero__slide--digital .mhero__lead{color:rgba(255,255,255,.8)}

/* 슬라이드 컨트롤 */
.mhero__ctrl{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px);z-index:3}
.mhero__ctrl .shell{display:flex;align-items:center;gap:14px}
.mhero__dots{display:flex;gap:8px}
.mhero__dots button{position:relative;width:34px;height:3px;border-radius:3px;background:currentColor;opacity:.3;overflow:hidden;transition:opacity .3s,width .4s var(--ease)}
.mhero__dots button[aria-current="true"]{opacity:1;width:64px;background:rgba(255,255,255,.35)}
.mhero__dots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:currentColor;transform-origin:0 50%;animation:mheroBar var(--dur,6.5s) linear forwards}
.mhero.is-paused .mhero__dots button::after{animation-play-state:paused}
@keyframes mheroBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mhero__count{font-family:var(--font-en);font-size:.74rem;font-weight:700;letter-spacing:.14em;opacity:.8;white-space:nowrap}
.mhero__btns{display:flex;gap:6px;margin-left:auto}
.mhero__btns button{width:40px;height:40px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;opacity:.7;transition:opacity .3s,background .3s}
.mhero__btns button:hover{opacity:1;background:rgba(255,255,255,.14)}
.mhero__btns svg{width:15px;height:15px}
@media (max-width:560px){
  .mhero__ctrl .shell{gap:10px}
  .mhero__dots button{width:18px}
  .mhero__dots button[aria-current="true"]{width:38px}
  .mhero__btns button{width:34px;height:34px}
}
.mhero[data-theme="light"] .mhero__ctrl{color:var(--navy)}
.mhero[data-theme="light"] .mhero__dots button[aria-current="true"]{background:rgba(0,59,124,.18)}
/* 밝은 슬라이드에서는 버튼이 사진 위에 묻히지 않도록 흰 바탕 */
.mhero[data-theme="light"] .mhero__btns button{opacity:1;background:rgba(255,255,255,.8);border-color:rgba(0,59,124,.22)}
.mhero[data-theme="light"] .mhero__btns button:hover{background:#fff}
/* 모바일: 원장 슬라이드 아래쪽은 사진 위라 숫자에 흰 테두리 빛을 줘서 읽히게 */
@media (max-width:900px){.mhero[data-theme="light"] .mhero__count{opacity:1;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 16px #fff}}

/* ---------------------------------------------- 공통 · 섹션 머리말 · 자세히 보기 */
.mhead{display:grid;gap:clamp(12px,1.4vw,18px);justify-items:center;text-align:center;margin-bottom:clamp(34px,4.4vw,64px)}
.mhead .h2{max-width:22ch}
.mhead .lead{margin-inline:auto}
/* 자세히 보기: 모든 섹션에서 같은 폭으로 가운데 */
.mmore{display:grid;gap:12px;width:min(100%,560px);margin:clamp(30px,3.6vw,52px) auto 0}
.mmore__i{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 18px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px);border-radius:var(--r-m);background:var(--navy);color:#fff;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.mmore__i:hover{background:var(--blue);transform:translateY(-3px)}
.mmore__i em{grid-column:1;font-style:normal;font-family:var(--font-en);font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--sky)}
.mmore__i b{grid-column:1;font-family:var(--font-display);font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.035em;line-height:1.35}
.mmore__i span{grid-column:1;font-size:var(--fs-small);color:rgba(255,255,255,.72)}
.mmore__i i{grid-column:2;grid-row:1/4;font-style:normal;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);transition:transform .4s var(--ease)}
.mmore__i:hover i{transform:translateX(4px)}

/* ---------------------------------------------- 2. 디지털 임플란트 */
.mdigital{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:center}
@media (max-width:900px){.mdigital{grid-template-columns:minmax(0,1fr)}}
.mdigital__list{border-top:1px solid var(--line)}
.mdigital__list li{display:grid;grid-template-columns:clamp(44px,5vw,64px) minmax(0,1fr);align-items:baseline;padding-block:clamp(16px,2vw,24px);border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:clamp(1.05rem,1.8vw,1.45rem);font-weight:600;letter-spacing:-.035em;line-height:1.45}
.mdigital__list b{font-family:var(--font-en);font-size:.78rem;letter-spacing:.14em;color:var(--blue)}
/* 영상 원본은 16:9 에서 오른쪽 절반에만 임플란트 모형이 있음 → 정사각형으로 오른쪽을 잘라 모형이 가운데 오게 */
.mdigital__video{position:relative;justify-self:center;width:100%;max-width:520px;margin:0;aspect-ratio:1/1;border-radius:var(--r-l);overflow:hidden;background:#fff}
.mdigital__video video{width:100%;height:100%;object-fit:cover;object-position:100% 50%}

/* 2-1. 상황별 임플란트 */
.mtypes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
@media (max-width:1024px){.mtypes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mtypes{grid-template-columns:minmax(0,1fr)}}
.mtypes li{display:grid;align-content:start;gap:10px;padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px);border-radius:var(--r-l);background:#fff}
.mtypes em{font-style:normal;font-family:var(--font-en);font-size:.66rem;font-weight:700;letter-spacing:.2em;color:var(--blue)}
.mtypes h3{font-family:var(--font-display);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.045em;line-height:1.3;color:var(--navy)}
.mtypes__when{justify-self:start;padding:.3rem .75rem;border-radius:999px;background:var(--sky-soft);font-size:.78rem;font-weight:700;color:var(--navy)}
.mtypes p:not(.mtypes__when){margin-top:4px;font-size:var(--fs-small);line-height:1.75;color:var(--ink-2)}
.mtypes p b{color:var(--ink)}

/* ---------------------------------------------- 3. 임플란트 재수술 */
.mretreat{position:relative;overflow:hidden;isolation:isolate;padding-block:var(--sec-y);background:#fff;text-align:center}
.mretreat__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5}
.mretreat::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 45%,rgba(255,255,255,.55) 100%)}
.mretreat__in{display:grid;gap:clamp(16px,2vw,26px);justify-items:center}
.mretreat__q{display:block;font-size:.55em;font-weight:500;color:var(--ink-3);letter-spacing:-.03em;margin-bottom:.35em}
.mretreat .h2{max-width:none}
.mretreat .h2 .qt{color:var(--blue)}
.mretreat .lead,.mretreat .body{margin-inline:auto;max-width:48ch}
.mbrands{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px}
.mbrands li{padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.85);font-family:var(--font-en);font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--navy)}

/* ---------------------------------------------- 5. 사랑니 */
.mwisdom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
@media (max-width:960px){.mwisdom{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mwisdom li{display:grid;justify-items:center;align-content:start;gap:16px;text-align:center;padding:clamp(22px,2.6vw,34px) clamp(14px,1.6vw,22px);border-radius:var(--r-l);background:var(--ivory)}
.mwisdom img{width:clamp(96px,10vw,140px);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #fff,0 18px 34px -20px rgba(8,23,43,.45)}
.mwisdom b{font-family:var(--font-display);font-size:clamp(.98rem,1.4vw,1.2rem);font-weight:600;line-height:1.55;letter-spacing:-.035em}
.mcheck{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;flex:0 0 auto}
.mcheck svg{width:13px;height:13px}

/* ---------------------------------------------- 7. 턱관절 */
.mtmj{display:grid;gap:clamp(22px,3vw,40px)}
.mtmj__sym{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.mtmj__sym{grid-template-columns:minmax(0,1fr)}}
.mtmj__sym li{display:flex;align-items:center;gap:14px;padding:clamp(16px,2vw,22px) clamp(18px,2vw,24px);border-radius:var(--r-m);background:var(--ivory);font-size:var(--fs-body);line-height:1.6}
.mtmj__sym li:nth-child(2) .mcheck{background:var(--sky);color:var(--navy)}
.mtmj__sym b{color:var(--navy)}
.mtmj__care{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:stretch}
/* 원본 png 는 원 아래로 투명 여백이 길게(138×434) 있어 위쪽 정사각형만 보이게 */
main .mtmj__icon{align-self:center;width:clamp(70px,7vw,96px);height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 0;opacity:.9}
@media (max-width:760px){.mtmj__care{grid-template-columns:minmax(0,1fr)}.mtmj__icon{display:none}}
.mtmj__care .card h3{font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.45rem)}
.mtmj__close{text-align:center;font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.04em;line-height:1.6}
.mtmj__close b{color:var(--navy)}

/* ---------------------------------------------- 8. 디지털 치아교정 */
.mortho__band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(74px,9vw,140px);background:var(--deep);color:#fff;text-align:center}
.mortho__band img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.mortho__band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(2,24,47,.55),rgba(2,24,47,.15) 70%)}
.mortho__band .mhead{margin-bottom:0}
.mortho__body{padding-block:clamp(56px,7vw,110px)}
.mortho__feat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:clamp(20px,2.6vw,34px)}
@media (max-width:1024px){.mortho__feat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.mortho__feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mortho__feat li{display:grid;justify-items:center;align-content:center;gap:12px;min-height:150px;padding:20px 14px;border-radius:var(--r-m);text-align:center;font-family:var(--font-display);font-size:clamp(.98rem,1.3vw,1.12rem);font-weight:600;line-height:1.5;letter-spacing:-.03em}
.mortho__feat li:nth-child(odd){background:var(--navy);color:#fff}
.mortho__feat li:nth-child(even){background:var(--sky-soft);color:var(--navy)}
.mortho__feat li:nth-child(odd) .mcheck{background:#fff;color:var(--navy)}
.mortho__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(28px,3.6vw,52px)}
@media (max-width:900px){.mortho__grid{grid-template-columns:minmax(0,1fr)}}
.mpanel{display:grid;align-content:start;gap:18px;padding:clamp(24px,3.2vw,44px);border-radius:var(--r-l);background:var(--ivory)}
.mpanel .h3 b{color:var(--navy)}
/* 추천 대상: 흰 줄 목록으로 옆 패널(로고)과 무게를 맞춤 */
.mrows{gap:10px}
.mrows li{padding:16px 20px 16px 52px;border-radius:var(--r-m);background:#fff;font-size:var(--fs-body);color:var(--ink)}
.mrows li::before{left:20px;top:calc(16px + .28em)}
.mlogos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mlogos img{width:100%;aspect-ratio:1;object-fit:contain;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--line)}

/* ---------------------------------------------- 10. 심미치료 */
.maes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,24px)}
@media (max-width:760px){.maes{grid-template-columns:minmax(0,1fr)}}
.maes__i{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:clamp(240px,26vw,320px);padding:clamp(26px,3.4vw,48px);border-radius:var(--r-l);background:var(--ivory);overflow:hidden;transition:background .45s var(--ease),color .45s var(--ease)}
.maes__i em{font-style:normal;font-family:var(--font-en);font-size:.64rem;font-weight:700;letter-spacing:.22em;color:var(--blue)}
.maes__i b{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:700;letter-spacing:-.05em;line-height:1.2;color:var(--navy)}
.maes__i p{font-size:var(--fs-body);color:var(--ink-2);max-width:32ch}
.maes__i .mchips{display:flex;flex-wrap:wrap;gap:6px}
.maes__i .mchips span{padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line-2);font-size:.76rem;color:var(--ink-2)}
.maes__i .go{margin-top:auto;display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:var(--fs-small);color:var(--navy)}
.maes__i:hover{background:var(--navy);color:#fff}
.maes__i:hover :is(b,.go){color:#fff}
.maes__i:hover p{color:rgba(255,255,255,.76)}
.maes__i:hover em{color:var(--sky)}
.maes__i:hover .mchips span{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}

/* ---------------------------------------------- 10-1. 치료 후 주의사항 */
/* 치료 종류 카드 6장 — 누르면 care.html 에서 그 종류만 걸러진 상태로 열립니다 (#implant 등) */
.mcare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media (max-width:900px){.mcare{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 폰: 두 칸이면 영문 라벨 · 제목이 글자 중간에서 꺾여 한 줄 목록으로 */
@media (max-width:560px){.mcare{grid-template-columns:minmax(0,1fr)}}
.mcare a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:start;gap:8px 12px;height:100%;padding:clamp(18px,2.4vw,30px);border-radius:var(--r-l);background:#fff;transition:background .45s var(--ease),transform .45s var(--ease)}
.mcare em{grid-column:1;font-style:normal;font-family:var(--font-en);font-size:.64rem;font-weight:700;letter-spacing:.2em;color:var(--blue)}
.mcare b{grid-column:1;font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.045em;line-height:1.3;color:var(--navy)}
.mcare i{grid-column:2;grid-row:1/3;font-style:normal;padding:.3rem .75rem;border-radius:999px;background:var(--sky-soft);font-size:.78rem;font-weight:700;color:var(--navy);white-space:nowrap}
.mcare span{grid-column:1/-1;margin-top:4px;font-size:var(--fs-small);line-height:1.7;color:var(--ink-2)}
.mcare a:hover{background:var(--navy);transform:translateY(-3px)}
.mcare a:hover b{color:#fff}
.mcare a:hover em{color:var(--sky)}
.mcare a:hover span{color:rgba(255,255,255,.76)}
.mcare a:hover i{background:rgba(255,255,255,.14);color:#fff}

/* ---------------------------------------------- 11. 진료안내 */
/* .mvisit · .minterior 는 진료안내 페이지(visit.html)와 같이 쓰므로 sections.css 19 에 있습니다 */

/* ---------------------------------------------- 원장 약력 팝업 */
.mdoc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,3vw,40px);align-items:start}
.mdoc__ph{position:sticky;top:0;margin:0;background:linear-gradient(180deg,var(--sky-soft),#fff);border-radius:var(--r-m);overflow:hidden}
@media (max-width:640px){.mdoc{grid-template-columns:minmax(0,1fr)}.mdoc__ph{position:static;max-width:240px;margin-inline:auto}}
.mdoc__ph img{width:100%}
.mdoc__name{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.03em;color:var(--navy)}
.mdoc__name small{font-size:.5em;color:var(--ink-3);margin-left:.4em}
.mdoc__sub{font-weight:700;color:var(--blue);margin:4px 0 14px}
.mdoc ul{display:grid;gap:4px;font-size:var(--fs-small);color:var(--ink-2);line-height:1.7}
.mdoc li.sp{height:8px}
.mdoc li b{color:var(--ink)}