/* =========================================================
   서울라이프치과의원 — Light · Navy · Clear Blue
   ========================================================= */
:root{
  color-scheme:only light;
  --navy:#0f2d52; --navy-2:#123a73; --navy-3:#1a4683;
  --blue:#1a6fc2; --blue-2:#2f68b0; --sky:#5aaef5; --sky-2:#7cc0f8;
  --ink:#0f2d52; --text:#4a5565; --muted:#5a6675; --line:#e4ebf3;
  --bg:#ffffff; --bg-soft:#f8fbff; --tint:#f3f7fc; --card:#ffffff;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --radius:16px; --max:1240px;
  --shadow:0 1px 2px rgba(15,45,82,.04),0 6px 20px rgba(15,45,82,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.75;word-break:keep-all;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
@media (min-width:720px){.wrap{padding:0 40px}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;color:#000;padding:8px 12px;z-index:100}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;height:68px;gap:16px}
.logo{display:block;font-weight:700;font-size:1.12rem;color:var(--navy-2);letter-spacing:-.02em;white-space:nowrap}
.logo b{font-weight:700;color:var(--blue)}
.logo small{margin-left:8px;font-size:.58rem;font-weight:600;letter-spacing:.2em;color:var(--blue-2)}
.hd-loc{font-size:.8rem;color:var(--muted);margin-left:6px;padding-left:16px;border-left:1px solid var(--line);white-space:nowrap}
nav{margin-left:auto}
nav ul{display:flex;gap:28px;list-style:none;font-size:.9rem;font-weight:600}
nav a{color:var(--navy-2);transition:color .2s}
nav a:hover,nav a[aria-current="page"]{color:var(--blue)}
@media (max-width:900px){.hd-loc{display:none}}
@media (max-width:640px){.hd{height:60px}.logo small{display:none}nav ul{gap:16px;font-size:.84rem}}

/* ---------- common ---------- */
section{padding:100px 0}
@media (max-width:720px){section{padding:72px 0}}
section.alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eb{display:flex;align-items:center;gap:12px;font-size:.74rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-2);margin-bottom:18px}
.eb::before{content:"";width:32px;height:1px;background:currentColor}
.eb.center{justify-content:center}
.sec-h{font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:800;color:var(--navy-2);letter-spacing:-.035em;line-height:1.35}
.sec-h em{font-style:normal}
.sec-sub{color:var(--muted);margin-top:18px;max-width:780px;font-size:.98rem}
.center{text-align:center}
.center .sec-sub{margin-left:auto;margin-right:auto}
.disclaimer{font-size:.72rem;color:var(--muted);margin-top:32px;line-height:1.8;letter-spacing:-.02em}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-size:.92rem;font-weight:700;color:var(--navy-2);border-bottom:1px solid currentColor;padding-bottom:2px}
.more:hover{color:var(--blue)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:.92rem;transition:all .2s;border:1px solid transparent;white-space:nowrap}
.btn-primary,.btn-gold{background:var(--navy-2);color:#fff;box-shadow:0 8px 20px rgba(15,45,82,.16)}
.btn-primary:hover,.btn-gold:hover{background:var(--navy-3)}
.btn-outline,.btn-ghost{background:#fff;border-color:#d3deec;color:var(--navy-2)}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--navy-2)}
.btn-naver{background:#fff;border-color:#d3deec;color:var(--navy-2)}
.btn-naver::before{content:"N";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#03c75a;color:#fff;font-size:.66rem;font-weight:900}
.btn-naver:hover{border-color:var(--navy-2)}

/* ---------- hero (3x2 카드) ---------- */
.hero{padding:44px 0 56px}
.hero .eyebrow{display:flex;align-items:center;gap:12px;color:var(--blue-2);font-size:.78rem;font-weight:600;letter-spacing:.24em;margin-bottom:16px}
.hero .eyebrow::before{content:"";width:32px;height:1px;background:currentColor}
.hero h1{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:800;color:#111;line-height:1.3;letter-spacing:-.05em}
.hero h1 small{font-size:.8em}
.hero h1 em{font-style:normal;color:var(--navy-2)}
.hero-sub{margin-top:18px;font-size:.88rem;line-height:1.7;color:var(--muted)}
.hero p.lead{margin-top:14px;color:var(--muted);max-width:760px}
.carousel{margin-top:30px}
.track{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:600px){.track{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.track{grid-template-columns:repeat(3,1fr)}}
.slide{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.slide:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,45,82,.1)}
.slide>a{display:block}
.slide .cap{padding:20px 20px 24px}
.slide .cap small{display:block;font-size:.72rem;font-weight:600;color:var(--blue)}
.slide .cap strong{display:block;margin-top:6px;font-size:1.06rem;font-weight:700;color:var(--navy-2);letter-spacing:-.02em}
.slide .cap span{display:block;margin-top:8px;font-size:.8rem;line-height:1.7;color:var(--muted)}

/* ---------- intro ---------- */
.intro{padding:24px 0 80px}

/* ---------- at a glance ---------- */
.glance{display:grid;grid-template-columns:1fr;gap:36px 56px;margin-top:52px}
@media (min-width:720px){.glance{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.glance{grid-template-columns:repeat(3,1fr)}}
.glance dt{font-weight:700;color:var(--navy-2);font-size:1rem}
.glance dd{margin-top:10px;color:var(--muted);font-size:.92rem;line-height:1.85}
.photos{display:grid;gap:18px;margin-top:52px}
.wrap > .photos:first-child{margin-top:0}
@media (min-width:720px){.photos{grid-template-columns:repeat(2,1fr)}}
.photos img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.photos.sm{max-width:780px;margin-top:32px}

/* ---------- director (light) ---------- */
.dr{display:grid;gap:40px;align-items:start}
@media (min-width:980px){.dr{grid-template-columns:384px 1fr;gap:160px}}
.dr-photo{margin:0;max-width:384px;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:var(--tint)}
.dr-photo img{display:block;width:100%;aspect-ratio:384/480;object-fit:cover;object-position:top;transform-origin:38% 0;transform:translateX(11.4%) scale(1.3)}
.dr-body .sec-sub{max-width:none}
.dr-list{list-style:none;display:grid;gap:12px 32px;margin-top:36px}
@media (min-width:720px){.dr-list{grid-template-columns:1fr 1fr}}
.dr-list li{position:relative;padding-left:14px;font-size:.92rem;color:var(--navy-2)}
.dr-list li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--sky)}

/* doctor.html 프로필 (light) */
.director .tagline{margin-top:16px;color:var(--muted)}
.director .dr{margin-top:44px}
@media (min-width:980px){.director .dr{grid-template-columns:340px 1fr;gap:72px}}
.namecard{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:12px;padding:20px 24px;background:#fff}
.namecard strong{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;padding-right:18px;border-right:1px solid var(--line);color:var(--navy-2)}
.namecard span{font-size:.84rem;line-height:1.6;color:var(--muted)}
.namecard span em{font-style:normal;color:var(--blue)}
.quote{position:relative;margin-top:28px;border-left:2px solid var(--sky);padding:6px 0 6px 22px}
.quote p{font-weight:600;line-height:1.7;color:var(--navy-2);font-size:1.1rem}
@media (min-width:1200px){.quote p{font-size:1.2rem;white-space:nowrap}}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:.82rem;color:var(--muted)}
.quote cite b{color:var(--navy-2)}
.dr-lists{display:grid;gap:28px;margin-top:36px}
@media (min-width:720px){.dr-lists{grid-template-columns:1fr 1fr}}
.dr-lists h4,.chips-h{font-size:.72rem;font-weight:700;letter-spacing:.28em;color:var(--blue-2)}
.dr-lists ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.dr-lists li{position:relative;padding-left:14px;font-size:.92rem;color:var(--navy-2)}
.dr-lists li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--sky)}
.chips-h{margin-top:36px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips a{border:1px solid #d3deec;border-radius:999px;padding:8px 16px;font-size:.84rem;font-weight:600;color:var(--navy-2);background:#fff;transition:all .2s}
.chips a:hover{border-color:var(--navy-2)}

/* doctor (light card) */
.doctor{display:grid;grid-template-columns:1fr;gap:32px;margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);padding:32px 24px;background:var(--card)}
@media (min-width:820px){.doctor{grid-template-columns:1.2fr 1fr;padding:44px}}
@media (min-width:980px){.doctor.has-photo{grid-template-columns:280px 1.2fr 1fr;align-items:start}}
.doctor h3{font-size:1.5rem;font-weight:800;color:var(--navy-2)}
.doctor h3 span{font-size:.86rem;font-weight:500;color:var(--muted);margin-left:10px}
.doctor blockquote{margin-top:18px;padding:4px 0 4px 18px;border-left:2px solid var(--sky);font-weight:600;color:var(--navy-2);line-height:1.8}
.doctor h4{font-size:.72rem;letter-spacing:.24em;color:var(--blue-2);font-weight:700;margin-bottom:10px}
.doctor ul{list-style:none;display:grid;gap:8px}
.doctor h4+ul{margin-bottom:24px}
.doctor li{padding-left:14px;position:relative}
.doctor li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--sky)}
.doctor li a{color:var(--navy-2);font-weight:600}
.doctor-photo{margin:0;max-width:320px}
.doctor-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.doctor-photo figcaption{margin-top:10px;font-size:.78rem;color:var(--muted)}

/* ---------- first visit (5 cards) ---------- */
.visit{list-style:none;display:grid;gap:20px;margin-top:52px}
@media (min-width:640px){.visit{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.visit{grid-template-columns:repeat(5,1fr)}}
.visit li{border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;background:var(--bg-soft)}
.visit b{display:block;font-size:1.04rem;font-weight:800;color:var(--navy-2)}
.visit p{margin-top:14px;font-size:.88rem;line-height:1.85;color:var(--muted)}

/* ---------- location ---------- */
.loc-grid{display:grid;gap:48px}
@media (min-width:980px){.loc-grid{grid-template-columns:1fr 1fr;gap:80px}}
.loc-grid .body{margin-top:36px;display:grid;gap:14px;font-size:.94rem;color:var(--muted)}
.loc-grid .body strong{color:var(--ink);font-weight:700}
.loc-grid h3{font-size:1.3rem;font-weight:800;color:var(--navy-2)}
.htable{width:100%;border-collapse:collapse;margin-top:18px}
.htable th,.htable td{padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem;text-align:left}
.htable th{font-weight:700;color:var(--navy-2)}
.htable td{text-align:right;color:var(--text)}
.htable .night td{color:var(--blue);font-weight:600}
.note{margin-top:18px;font-size:.8rem;color:var(--muted);line-height:1.9}
.line-tag{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;margin-right:6px;border-radius:50%;background:#8b50a4;color:#fff;font-size:.82rem;font-weight:800;line-height:1;vertical-align:.08em}
.hours{list-style:none;display:grid}
.hours li{display:flex;align-items:center;gap:14px;font-size:.92rem;padding:12px 0;border-bottom:1px solid var(--line)}
.hours li b{color:var(--navy-2);font-weight:700;white-space:nowrap}
.hours li i{flex:1}
.hours li em{font-style:normal;color:var(--text);white-space:nowrap}
.hours li.night em{color:var(--blue);font-weight:600}

/* 표 형식 (location.html) */
.loc{display:grid;gap:20px;margin-top:40px}
@media (min-width:820px){.loc{grid-template-columns:1fr 1fr}}
.loc .box{border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:var(--card)}
.loc h3{font-size:1.1rem;font-weight:700;color:var(--navy-2)}
.loc table{width:100%;border-collapse:collapse;margin-top:14px}
.loc th,.loc td{text-align:left;padding:13px 4px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top}
.loc th{font-weight:600;width:34%;color:var(--navy-2)}
.loc td{color:var(--text)}
.loc .night{color:var(--blue);font-weight:600}

/* ---------- feature ---------- */
.feature{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.feature{grid-template-columns:1fr 1fr;gap:72px}}
.feature figure img{border-radius:var(--radius);border:1px solid var(--line)}
.feature .sec-sub a{color:var(--navy-2);font-weight:700;border-bottom:1px solid currentColor}
.feat-list{margin-top:24px;list-style:none;display:grid;gap:10px}
.feat-list li{padding-left:16px;position:relative;color:var(--navy-2)}
.feat-list li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--sky)}

/* ---------- choosing (long text) ---------- */
.guide .body{max-width:860px;margin-top:40px;display:grid;gap:22px}
.guide .body p{color:var(--muted);line-height:2;font-size:.95rem}
.guide h3{margin-top:32px;font-size:1.1rem;font-weight:700;color:var(--navy-2)}
.guide>.wrap>p:not(.eb){margin-top:10px;color:var(--text);max-width:820px}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;gap:44px}
@media (min-width:980px){.faq-wrap{grid-template-columns:5fr 7fr;gap:72px}.faq-wrap .side{position:sticky;top:110px;align-self:start}}
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq-wrap .faq{margin-top:0;border-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:24px 40px 24px 0;font-weight:700;color:var(--navy-2);list-style:none;display:flex;gap:18px;align-items:baseline;position:relative;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:1.5rem;font-weight:300;color:var(--sky);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--blue)}
.faq details[open] summary{color:var(--blue)}
.faq summary span{font-size:.7rem;letter-spacing:.14em;color:var(--blue);font-weight:700;min-width:28px}
.faq details p{padding:0 0 26px 50px;color:var(--muted);font-size:.94rem}
@media (max-width:600px){.faq details p{padding-left:0}}

/* ---------- footer ---------- */
footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:36px 0 28px;font-size:.86rem;color:var(--muted)}
.ft{display:grid;gap:28px}
@media (min-width:900px){.ft{grid-template-columns:1fr 1fr;gap:56px;align-items:start}.ft-brand address,.ft-brand .park,.ft-brand .biz{white-space:nowrap}}
.ft-brand strong{display:block;font-size:1.12rem;font-weight:800;color:var(--navy-2)}
.ft-brand small{display:block;margin-top:4px;font-size:.64rem;font-weight:700;letter-spacing:.3em;color:var(--blue)}
.ft-brand address{font-style:normal;margin-top:14px;line-height:1.7;font-weight:600;color:var(--text)}
.ft-brand .park{display:block;margin-top:2px;color:var(--blue-2)}
.ft-brand .biz{margin-top:4px;font-size:.76rem;line-height:1.7;color:#8a929c}
.ft h5{font-size:.72rem;font-weight:600;letter-spacing:.3em;color:var(--blue-2);margin-bottom:6px}
.ft .hours li{padding:7px 0;font-size:.88rem}
.ft .hours li em{margin-left:auto}
.ft .note{margin-top:6px;color:var(--blue-2)}
.ft-bottom{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.72rem;line-height:1.7;color:var(--blue-2)}
.ft-bottom p+p{margin-top:2px}

/* ---------- floating CTA ---------- */
.cta-bar{position:fixed;right:28px;bottom:28px;z-index:60;display:grid;gap:12px}
@media (min-width:641px){footer{padding-bottom:250px}}
.cta-bar a{display:flex;align-items:center;gap:16px;min-width:150px;padding:12px 22px 12px 22px;border-radius:999px;box-shadow:0 10px 26px rgba(15,45,82,.22);transition:transform .2s}
.cta-bar a:hover{transform:translateY(-2px)}
.cta-bar a b{display:block;font-size:.86rem;line-height:1.3}
.cta-bar a small{display:block;font-size:.7rem;opacity:.8;line-height:1.3}
.cta-bar .c-kakao{background:#fee500;color:#191919}
.cta-bar .c-book{background:var(--sky);color:var(--navy)}
.cta-bar .c-call{background:var(--navy);color:#fff}
/* PC: 평소엔 아이콘만 있는 둥근 정사각형, 마우스를 올리면 글자까지 펼침 */
@media (min-width:641px){
  .cta-bar{justify-items:end}
  .cta-bar a{height:56px;min-width:0;gap:0;padding:0 17px;border-radius:16px;transition:padding .3s,gap .3s,border-radius .3s,transform .2s}
  .cta-bar a .i{width:22px;height:22px}
  .cta-bar a span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .3s,opacity .2s}
  .cta-bar a:hover,.cta-bar a:focus-visible{gap:14px;padding:0 22px;border-radius:28px}
  .cta-bar a:hover span,.cta-bar a:focus-visible span{max-width:140px;opacity:1}
}
@media (max-width:640px){
  .cta-bar{left:12px;right:12px;bottom:12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .cta-bar a{min-width:0;justify-content:center;gap:6px;padding:10px 4px;border-radius:14px}
  .cta-bar a span{min-width:0;white-space:nowrap}
  .cta-bar a b{font-size:.8rem}
  .cta-bar a small{font-size:.66rem;letter-spacing:-.02em}
  body{padding-bottom:76px}
}

/* ===== 진료 상세 · 서브 페이지 ===== */
.sub-hero{padding:48px 0 80px;background:#fff;border-bottom:1px solid var(--line)}
.crumb{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.crumb a:hover{color:var(--blue)}
.sub-hero .grid{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.sub-hero .grid{grid-template-columns:1.1fr 1fr;gap:72px}}
.sub-hero h1{font-size:clamp(1.7rem,3.8vw,2.5rem);font-weight:800;color:var(--navy-2);line-height:1.38;letter-spacing:-.035em}
.sub-hero h1 em{font-style:normal;color:var(--blue)}
.sub-hero .lead{margin-top:20px;color:var(--muted);max-width:640px}
.sub-hero .lead + .lead{margin-top:12px}
.sub-hero figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.sub-hero figcaption{padding:14px 18px;font-size:.86rem;font-weight:600;color:var(--navy-2);border-top:1px solid var(--line)}
.checks{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:40px}
.checks li{padding:20px 22px 20px 52px;border:1px solid var(--line);border-radius:12px;position:relative;background:#fff;color:var(--navy-2);font-weight:500}
.checks li::before{content:"";position:absolute;left:22px;top:27px;width:12px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px}
.points div{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:var(--bg-soft)}
.points b{display:block;font-size:1.06rem;font-weight:800;color:var(--navy-2)}
.points p{margin-top:10px;color:var(--muted);font-size:.9rem}
section.alt .points div{background:#fff}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:40px;counter-reset:s}
.steps li{padding:26px 24px;counter-increment:s;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.steps li::before{content:"0" counter(s);display:inline;font-size:1.04rem;font-weight:800;color:var(--navy-2);margin-right:6px}
.steps b{display:inline;font-weight:800;color:var(--navy-2);font-size:1.04rem}
.steps p{font-size:.88rem;color:var(--muted);margin-top:12px}
.step-note{margin-top:16px;font-size:.82rem;line-height:1.7;color:var(--muted)}
.caution{margin-top:28px;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;background:var(--bg-soft)}
.caution b{color:var(--navy-2);font-weight:800}
.caution ul{margin-top:12px;padding-left:18px;color:var(--muted);display:grid;gap:6px;font-size:.9rem}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:40px}
.related a{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.related a span{display:block;padding:14px 16px;font-weight:700;color:var(--navy-2);font-size:.9rem}
.related a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* 줄바꿈 가독성 */
h1,h2,h3,.sec-h{text-wrap:balance}
p,dd,li{text-wrap:pretty}

/* ===== 디자인 차별화 (2026-10-22) — 이 블록을 지우면 이전 디자인으로 돌아갑니다 ===== */
/* 섹션 라벨: 가로줄 → 둥근 배지 */
.eb,.hero .eyebrow{display:inline-flex;gap:8px;padding:6px 14px;border-radius:999px;background:#eaf2fc;color:var(--navy-2);letter-spacing:.16em}
.eb::before,.hero .eyebrow::before{width:6px;height:6px;border-radius:50%;background:var(--sky)}
.eb.center{display:flex;width:max-content;margin-left:auto;margin-right:auto}
/* 진료 카테고리 카드 */
.slide{border:0;border-radius:22px;box-shadow:0 2px 6px rgba(15,45,82,.05),0 18px 40px -18px rgba(15,45,82,.22)}
.slide:hover{transform:translateY(-5px);box-shadow:0 2px 6px rgba(15,45,82,.06),0 26px 50px -18px rgba(15,45,82,.32)}
.slide img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.slide:hover img{transform:scale(1.03)}
.slide .cap{padding:22px 24px 26px;position:relative}
.slide .cap small{display:inline-block;padding:3px 10px;border-radius:6px;background:#eaf2fc;color:var(--blue-2)}
.slide .cap strong{margin-top:10px;font-size:1.12rem;padding-right:34px}
.slide .cap strong::after{content:"→";position:absolute;right:24px;font-weight:600;color:var(--sky);transition:transform .25s}
.slide:hover .cap strong::after{transform:translateX(4px)}
/* 처음 오시는 분께 · 진료 원칙 · 단계 카드 */
.visit li,.points div,.steps li{border:0;border-radius:20px;border-top:3px solid var(--sky);background:#fff;box-shadow:0 12px 30px -20px rgba(15,45,82,.35)}
section.alt .visit li,section.alt .points div,section.alt .steps li{background:#fff}
.visit b{color:var(--blue-2)}
.steps li::before{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:10px;border-radius:9px;background:var(--navy-2);color:#fff;font-size:.78rem;vertical-align:middle}
/* 사진 · 버튼 · FAQ */
.photos img,.doctor-photo img,.feature figure img{border-radius:20px;border:0}
.btn{border-radius:12px}
.faq summary span{padding:2px 8px;border-radius:6px;background:#eaf2fc;color:var(--navy-2);text-align:center}
.faq summary::after{content:"";width:10px;height:10px;top:30px;right:10px;border-right:2px solid var(--sky);border-bottom:2px solid var(--sky);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
/* 모바일: 소개 문구의 강제 줄바꿈을 풀어 화면 폭에 맞게 자연스럽게 흐르도록 */
@media (max-width:640px){.lead br,.tagline br,.sec-sub br,.guide>.wrap>p br{display:none}}
/* 대표원장 약력: 주요 이력 옆에 진료 원칙, 촘촘하고 작은 글씨 */
.dr-lists{gap:24px 28px}
@media (min-width:720px){.dr-lists{grid-template-columns:minmax(0,2fr) minmax(0,.85fr)}.dr-lists .career ul{display:block;columns:2;column-gap:24px}.dr-lists .career li{break-inside:avoid;margin-bottom:5px}}
.dr-lists ul{margin-top:12px;gap:5px}
.dr-lists li{font-size:.8rem;line-height:1.55;color:#232a65}
.dr-lists li::before{top:.68em}

/* ===== 간격 줄이기 (2026-10-22): 줄간격·단락·섹션 여백 축소 ===== */
body{line-height:1.65}
section{padding:72px 0}
@media (max-width:720px){section{padding:52px 0}}
.hero{padding:36px 0 44px}.carousel{margin-top:24px}
.intro{padding:16px 0 56px}
.sub-hero{padding:40px 0 56px}.crumb{margin-bottom:16px}
.sub-hero .lead{margin-top:14px}
.eb,.hero .eyebrow{margin-bottom:12px}
.sec-sub,.hero-sub{margin-top:12px}
.btns{margin-top:24px}
.glance{gap:28px 48px;margin-top:36px}.glance dd{margin-top:6px;line-height:1.7}
.photos{margin-top:36px}
.visit{margin-top:36px}.visit p{margin-top:10px;line-height:1.7}
.points,.steps,.related,.loc{margin-top:28px}
.points p,.steps p{margin-top:8px}
.loc-grid .body{margin-top:24px;gap:10px}
.guide .body{margin-top:28px;gap:14px}.guide .body p{line-height:1.75}
.director .tagline{margin-top:10px}.director .dr{margin-top:32px}
.quote{margin-top:20px}.dr-lists{margin-top:28px}.chips-h{margin-top:28px}
.feat-list{margin-top:18px}
.faq{margin-top:28px}.faq summary{padding:18px 40px 18px 0}.faq summary::after{top:24px}.faq details[open] summary::after{top:28px}
.note{line-height:1.75}.disclaimer{margin-top:24px;line-height:1.65}
/* 헤더 로고 이미지 */
.logo{line-height:0;flex-shrink:0}.logo img{display:block;height:40px;width:auto}
@media (max-width:640px){.logo img{height:30px}}
/* 스크롤 인터랙션 (reveal.js가 .rv 부여, 화면 진입 시 .in) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* 주요 이력 두 열 간격 좁히기 (진료 원칙 위치는 그대로) */
@media (min-width:720px){.dr-lists .career ul{display:grid;columns:auto;grid-auto-flow:column;grid-template-rows:repeat(10,auto);grid-template-columns:repeat(2,max-content);column-gap:28px;row-gap:0}}
@media (min-width:720px){.dr-lists:has(> :only-child){grid-template-columns:1fr}}
/* 주요 이력·진료 원칙: 제목 크게, 항목 작게 진한 회색 */
.dr-lists h4{font-size:.9rem;letter-spacing:.12em}
.dr-lists li{font-size:.74rem;color:#3f454d}
/* 대표원장 페이지: 상단 소개 + 프로필 한 섹션으로 통합 */
.director.dr-top{padding-top:40px}
.dr-top h1 em{font-style:normal;color:var(--blue)}
.namecard strong{font-size:2rem;padding-right:22px}
@media (max-width:640px){.namecard strong{font-size:1.7rem}}
.namecard strong small{margin-left:8px;font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0}

/* 버튼·칩 hover 시 살짝 떠오르기 */
.btn:hover,.chips a:hover{transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(15,45,82,.25)}
.chips a:hover{color:var(--blue)}
@media (prefers-reduced-motion:reduce){.btn:hover,.chips a:hover,.slide:hover,.slide:hover img,.related a:hover,.cta-bar a:hover{transform:none}}
/* 푸터: 홈페이지·인스타그램 이모지 링크 */
.ft-brand .sns{display:flex;gap:8px;margin-top:10px}
.ft-brand .sns a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;box-shadow:0 6px 16px -6px rgba(15,45,82,.3);transition:transform .2s,box-shadow .2s}
.ft-brand .sns .i{width:18px;height:18px}
.ft-brand .sns .s-home{background:var(--navy-2);color:#fff}
.ft-brand .sns .s-ig{background:var(--sky);color:var(--navy)}
.ft-brand .sns a:hover,.ft-brand .sns a:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(15,45,82,.3)}
/* '이런 분께 상담을 권합니다' 체크 박스 hover */
.checks li{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.checks li:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:0 10px 24px -14px rgba(15,45,82,.28)}
@media (prefers-reduced-motion:reduce){.checks li:hover{transform:none}}