/* 남상천한의원 — 공통 스타일. 팔레트(사용자 지시 2026-10-21): 기존 홈페이지 yakchim.clinic 의 그린·화이트로 교체 — 녹색 #499720 · 짙은 녹색 #265730 · 가장 짙은 녹색 #205107 · 옅은 녹색 구획 #e6ebe4.
   포인트색(앰버 --accent, 주황 #9a6a2c)은 그대로 유지. Noto Sans KR. 배경은 흰색 + 옅은 초록 두 가지만(사용자 지시 2026-10-21, 본문 바탕 흰색 허용). 제공 로고 없음 → 헤더는 글자 로고 + 인라인 SVG 마크. */

:root{
  --brand:#499720;      /* yakchim 녹색 — 버튼·강조 */
  --brand-d:#265730;    /* yakchim 짙은 녹색 — 헤더 밑줄·표 머리·제목 */
  --brand-l:#e9f2e3;
  --brand-m:#b7d9a3;
  --accent:#d9a45b;     /* 앰버 포인트 — 히어로 강조·제목 밑줄 (유지, 사용자 지시 2026-10-21) */
  --accent-l:#f3dfbe;
  --point:var(--brand); /* 섹션 제목 강조(em) */
  --cta:var(--brand);   /* 빠른 CTA */
  --cta-d:var(--brand-d);
  --underline:var(--accent);
  --wood:#265730;       /* (이름 유지) 짙은 녹색 — 맨 위로 버튼 등 */
  --wood-2:#205107;     /* yakchim 가장 짙은 녹색 — 푸터 */
  --btn-bg:#eef4ea;
  --btn-bg-hover:#dfeada;
  --btn-ink:#265730;
  --btn-line:#499720;
  --ink:#2a2e2a;
  --ink2:#4b514b;
  --ink3:#767e76;
  --line:#dfe6db;
  --bg:#fff;            /* 본문 바탕 — 흰색(사용자 지시 2026-10-21) */
  --bg-soft:#e6ebe4;    /* 구획 섹션 — yakchim 옅은 녹색 */
  --bg-tint:#e6ebe4;    /* 하이라이트 띠·강조 섹션 — 구획과 같은 옅은 녹색(배경은 두 색만) */
  --radius:16px;
  --shadow:0 6px 24px rgba(32,60,30,.08);
  --fs-h2:clamp(26px,3.2vw,38px);
  --fs-h3:clamp(19px,1.7vw,22px);
  --fs-body:17px;
  --fs-small:15.5px;
  --wrap:1280px;        /* 본문 폭 = 헤더 안쪽 폭(.header-inner 1280). 로고 왼쪽 끝~전화 버튼 오른쪽 끝 */
  --header-h:76px;
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{font-family:inherit;font-size:var(--fs-body);line-height:1.75;color:var(--ink);background:var(--bg);word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden}
img,picture{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{line-height:1.35;letter-spacing:-.025em;font-weight:700}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand-d);color:#fff;padding:10px 16px;z-index:200}
.skip:focus-visible{left:12px;top:12px} /* 키보드 포커스에만 표시. 맨 위로 클릭 뒤 스크립트 포커스로는 안 나오게(사용자 지시 2026-10-20) */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:720px){br.br-d{display:none}}
.nw{white-space:nowrap} /* 같이 읽히는 어구 줄 중간 분리 방지(seo-render-page 3장 b) */ /* 설명문 문장 단위 줄바꿈은 데스크톱만 */

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 24px;border-radius:12px;font-size:16.5px;font-weight:700;line-height:1.3;transition:transform .18s ease,background .18s ease,border-color .18s ease;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn .ic{width:19px;height:19px}
.btn-primary{background:#fff;color:var(--brand-d)}
.btn-primary:hover{background:var(--accent)}
.btn-outline{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-d)}
.btn-line,.sec .btn-primary,.sec .btn-outline,.sec .btn-brand{background:var(--btn-bg);color:var(--btn-ink);border:1.5px solid var(--btn-line)}
.btn-line:hover,.sec .btn-primary:hover,.sec .btn-outline:hover,.sec .btn-brand:hover{background:var(--btn-bg-hover)}

/* ---------- 헤더 — 로고(왼쪽) · 메뉴(가운데) · 전화(오른쪽) ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid var(--brand-d);transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 4px 18px rgba(32,60,30,.1)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 22px;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
@media (min-width:961px){.header-inner>.gnb{justify-self:center}}
.header-inner>.header-call{justify-self:end}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand-logo{display:block;height:44px;width:auto} /* 제공 로고 이미지 720×211 (2026-10-21). 높이만 정하고 폭은 비율대로 */
.gnb{margin-left:0}
.gnb ul{display:flex;align-items:center;gap:2px}
.gnb ul a,.gnb .sub-toggle{display:flex;align-items:center;gap:4px;padding:10px 11px;border-radius:9px;font-size:15.5px;font-weight:500;color:var(--ink2);white-space:nowrap;transition:color .15s ease,background .15s ease}
.gnb ul a:hover,.gnb .sub-toggle:hover{color:var(--brand-d);background:var(--brand-l)}
.gnb ul a[aria-current="page"]{color:var(--brand-d);font-weight:700}
.gnb .has-sub.current>.sub-toggle{color:var(--brand-d);font-weight:700} /* 진료분야 서랍 안 페이지에 있을 때 상위 "진료분야"도 진하게(사용자 지시 2026-10-19) */
.gnb .nav-magazine{color:var(--brand);font-weight:700}
.gnb .nav-magazine .ic{width:16px;height:16px}
.sub-toggle .ic{width:14px;height:14px;transition:transform .2s ease}
.has-sub{position:relative}
.has-sub .sub{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);min-width:200px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(32,60,30,.16);padding:8px;flex-direction:column;gap:0;z-index:5}
.has-sub .sub a{padding:10px 14px;font-size:15px;border-radius:9px}
@media (min-width:961px){
  .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:flex}
  .has-sub:hover .sub-toggle .ic,.has-sub.open .sub-toggle .ic{transform:rotate(180deg)}
  .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px} /* 호버 유지용 틈 */
}
.header-call{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;font-size:15.5px;white-space:nowrap}
.header-call:hover{background:var(--brand-d)}
.nav-toggle{display:none;width:46px;height:46px;border-radius:10px;align-items:center;justify-content:center;margin-left:auto;color:var(--ink)}
.nav-toggle .ic,.nav-close .ic{width:26px;height:26px}
.gnb-top{display:none}

/* ---------- 히어로 (기준: 신세계한의원 .hero) ---------- */
.hero{position:relative;color:#fff;padding:104px 0 108px;overflow:hidden;isolation:isolate}
.hero-slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;animation:heroCycle 21s infinite;will-change:opacity,transform}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide.s1{opacity:1;animation-delay:0s}
.hero-slide.s2{animation-delay:7s}
.hero-slide.s3{animation-delay:14s}
@keyframes heroCycle{0%{opacity:0;transform:scale(1.04)}5%{opacity:1}33%{opacity:1;transform:scale(1.12)}38%{opacity:0;transform:scale(1.12)}100%{opacity:0;transform:scale(1.04)}}
.hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(16,28,14,.92) 0%,rgba(32,81,7,.82) 52%,rgba(73,151,32,.5) 100%)}
.hero-overlay::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(217,164,91,.26),transparent 55%)}
.hero-inner{max-width:var(--wrap);margin:0 auto;padding:0 22px;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);padding:9px 18px;border-radius:999px;font-size:15px;font-weight:500;border:1px solid rgba(255,255,255,.24);margin-bottom:24px}
.hero-badge .dot{width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px rgba(217,164,91,.28);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.hero h1{color:#fff;font-size:clamp(30px,4.6vw,54px);line-height:1.28;margin-bottom:24px;text-shadow:0 2px 14px rgba(0,0,0,.22)}
.hero h1 .hl{color:var(--accent);font-weight:800}
.hero-desc{font-size:clamp(16.5px,1.45vw,19.5px);line-height:1.85;max-width:820px;margin-bottom:32px;color:rgba(255,255,255,.94)}
.hero-desc .hero-sym{display:block;margin-bottom:1.85em} /* 증상 나열 줄 아래 한 줄 여백(사용자 지시 2026-10-23, 자율신경장애·수험생 ADHD·불면증) */
.hero-usp{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.hero-usp li{background:rgba(255,255,255,.11);padding:10px 16px;border-radius:9px;font-size:15.5px;font-weight:500;border:1px solid rgba(255,255,255,.2)}
.hero-usp li strong{color:var(--accent);margin-right:6px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
@keyframes fadeUp{to{opacity:1;transform:none}}
.hero .stagger{opacity:0;transform:translateY(22px);animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero .stagger.d1{animation-delay:.05s}.hero .stagger.d2{animation-delay:.2s}.hero .stagger.d3{animation-delay:.35s}.hero .stagger.d4{animation-delay:.5s}.hero .stagger.d5{animation-delay:.65s}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14.5px;color:rgba(255,255,255,.8);margin-bottom:14px}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
@media (prefers-reduced-motion:reduce){
  .hero-slide{animation:none}
  .hero-slide.s2,.hero-slide.s3{display:none}
  .hero .stagger{animation:none;opacity:1;transform:none}
  .hero-badge .dot{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- 하이라이트 띠 — 메인 히어로 바로 밑 (기준: 신세계한의원 .highlights) ---------- */
.highlights{background:var(--bg-tint);padding:64px 0}
.hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.hl-item{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 20px;text-align:center;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover){.hl-item:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(32,60,30,.14)}}
.hl-num{font-size:38px;font-weight:800;color:var(--brand);line-height:1;margin-bottom:12px;letter-spacing:-.03em}
.hl-num .ic{width:38px;height:38px;margin:0 auto;stroke-width:1.8}
.hl-num .unit{font-size:18px;font-weight:700;color:var(--brand-d);margin-left:2px}
.hl-item h3{font-size:16.5px;color:var(--ink);margin-bottom:6px}
.hl-item p:not(.hl-num){font-size:14.5px;color:var(--ink3);line-height:1.5}

/* ---------- 본문 섹션 ---------- */
.sec{padding:96px 0}
.sec.soft{background:var(--bg-soft)}
.sec.tint{background:var(--bg-tint)}
.sec-tag,.prose .sec-tag{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--brand-d);margin-bottom:12px}
.sec-tag::before{content:"";width:16px;height:2px;background:currentColor;border-radius:1px;flex:0 0 auto}
.sec h2{font-size:var(--fs-h2);margin-bottom:18px}
.sec-tag+h2::after{content:"";display:block;width:52px;height:4px;border-radius:2px;background:var(--underline);margin-top:14px}
.sec h2 em{font-style:normal;color:var(--point)}
.lead{font-size:clamp(16.5px,1.35vw,18.5px);color:var(--ink2);max-width:860px;margin-bottom:40px}
.sec h3{font-size:var(--fs-h3);margin-bottom:10px}
.prose p+p{margin-top:14px}
.prose p{color:var(--ink2)}
.prose a[href^="tel:"]{color:#9a6a2c;font-weight:700}
.prose ul.dots{margin-top:14px}
.sec .lead,.sec .prose p:not(.sec-tag),.sec .prose ul.dots li{color:var(--ink)}
ul.dots li{position:relative;padding-left:18px;color:var(--ink2)}
ul.dots li+li{margin-top:6px}
ul.dots li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.quote{font-size:clamp(20px,2.2vw,28px);font-weight:700;color:var(--brand-d);line-height:1.5;letter-spacing:-.02em}
.quote+p{margin-top:12px}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.tags li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--brand-m);color:var(--brand-d);border-radius:999px;padding:9px 16px;font-size:15px;font-weight:700}
.tags .ic{width:17px;height:17px;color:var(--brand)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .num{font-size:14px;font-weight:800;color:var(--brand);letter-spacing:.08em;margin-bottom:8px}
.card p{color:var(--ink2);font-size:var(--fs-small)}
.card .ic-big{width:44px;height:44px;border-radius:12px;background:var(--brand-l);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ic-big .ic{width:22px;height:22px}
.card .more{margin-top:auto;padding-top:16px;font-weight:700;color:var(--brand-d);display:inline-flex;align-items:center;gap:6px}
.card .more:hover{text-decoration:underline}
.card.photo{padding:0;overflow:hidden}
.card.photo picture{aspect-ratio:10/7;overflow:hidden;background:var(--brand-l)}
.card.photo picture img{width:100%;height:100%;object-fit:cover}
.card.photo .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card .motto{font-weight:700;color:var(--brand-d);font-size:16px;margin-bottom:10px}
.card ul.dots{margin:0 0 4px}
.card h3.ttl{display:flex;align-items:center;gap:10px}
.card h3.ttl .ic{width:24px;height:24px;color:var(--brand);flex:0 0 auto;stroke-width:1.9}
.card h3.ttl a{color:inherit;transition:color .15s ease}
.card h3.ttl a:hover{color:var(--point)}
.cards .card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cards .card .more .ic{transition:transform .25s ease}
@media (hover:hover){
  .cards .card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(32,60,30,.16);border-color:var(--brand-m)}
  .cards .card:hover .more .ic{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .cards .card,.cards .card .more .ic{transition:none}
  .cards .card:hover{transform:none}
  .cards .card:hover .more .ic{transform:none}
}
.card ul.dots li{font-size:var(--fs-small)}

/* 진료분야 카드 — 첫 카드(자율신경장애)를 가장 크게(2열 차지) */
.clinics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.clinics .card.featured{grid-column:span 2;flex-direction:row}
.clinics .card.featured picture{aspect-ratio:auto;flex:0 0 48%}
.clinics .card.featured .body{justify-content:center}
.clinics .card.featured h3{font-size:clamp(22px,2vw,26px)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>.split-media{order:2}
.split-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--brand-l)}
.split-media img{width:100%;height:auto}
/* 의료진·세로 사진: 사진 높이를 글 열에 맞추고 아래 정렬(머리 보존). 사진이 행 높이를 키우지 않도록 절대 배치 */
.doc-split{align-items:stretch}
.doc-split .prose{align-self:center}
.doc-split .split-media{position:relative;min-height:560px}
.doc-split .split-media picture{position:absolute;inset:0}
.doc-split .split-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.split + .split{margin-top:72px}
.loc-split{align-items:stretch}
.loc-photos{display:flex;flex-direction:column;gap:16px;height:100%;min-height:0}
.loc-photos .split-media{flex:1 1 0;min-height:0}
.loc-photos .split-media picture,.loc-photos .split-media img{width:100%;height:100%;object-fit:cover}
.loc-photos-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.loc-photos-row .split-media{height:338px}
.loc-photos-row .split-media picture,.loc-photos-row .split-media img{width:100%;height:100%;object-fit:cover}
.loc-split .map-embed{margin-top:24px}
.loc-split .map-embed iframe{height:260px}

.note{border-left:4px solid var(--brand);background:#fff;border-radius:0 12px 12px 0;padding:18px 22px;color:var(--ink2);font-size:var(--fs-small);margin-top:24px}
.note strong{color:var(--ink)}
.note.warn{border-left-color:var(--accent)}

/* 의료진 약력 목록 */
.bio{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:18px;font-size:var(--fs-small)}
.bio dt{font-weight:800;color:var(--brand-d);white-space:nowrap}
.bio dd{color:var(--ink2)}
.bio dd ul li+li{margin-top:3px}
.bio dd ul li{position:relative;padding-left:14px}
.bio dd ul li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--brand-m)}

/* 진료 과정 단계 */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:pstep}
.process li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow);counter-increment:pstep;position:relative}
.process li::before{content:"0" counter(pstep);display:block;font-size:14px;font-weight:800;color:var(--accent);letter-spacing:.1em;margin-bottom:10px}
.process h3{font-size:17.5px;margin-bottom:8px}
.process p{font-size:var(--fs-small);color:var(--ink2)}

/* 증상 체크 목록(칩) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14.5px;font-weight:500;color:var(--ink2)}

/* 진료시간 표 — 원장별 2열 */
.hours{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:var(--fs-small)}
.hours th,.hours td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.hours thead th{background:var(--brand-d);color:#fff;font-size:14px;letter-spacing:.04em;border-bottom-color:var(--brand-d)}
.hours tbody th{font-weight:700;width:22%}
.hours td{white-space:nowrap}
.hours tbody tr:last-child th,.hours tbody tr:last-child td{border-bottom:0}
.hours td.off{color:var(--ink3)}
.hours tr.lunch th,.hours tr.lunch td{color:var(--ink3);background:var(--bg)}
.hours td a{color:var(--brand-d);font-weight:700}
.badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:6px;background:var(--brand-l);color:var(--brand-d);font-size:13px;font-weight:700}
.hours-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.hours-wrap:has(.info-box){align-items:stretch}
.hours-wrap .info-box{display:flex;flex-direction:column}
.hours-wrap .info-box .kv{flex:1 1 auto;align-items:center}
.hours-wrap .info-box .box-more{margin-top:auto;padding-top:20px;text-align:center}

/* 사진 가로 스크롤 */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,32%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 12px;overscroll-behavior-x:contain;scrollbar-width:thin}
.gallery figure{scroll-snap-align:start;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.gallery picture{aspect-ratio:10/7}
.gallery picture img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{padding:12px 16px;font-size:15px;font-weight:500;color:var(--ink2)}
.gallery-wrap{position:relative;padding:0 64px}
.gal-btn{position:absolute;top:calc(50% - 22px);transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink);border:1.5px solid var(--btn-line);box-shadow:0 4px 14px rgba(32,60,30,.18);display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,background .2s ease}
.gal-btn:hover{background:var(--btn-bg-hover)}
.gal-btn .ic{width:20px;height:20px}
.gal-btn.prev{left:0}
.gal-btn.prev .ic{transform:rotate(180deg)}
.gal-btn.next{right:0}
.gal-btn:disabled{opacity:.35;pointer-events:none}
.gallery-wrap.no-scroll{padding:0}
.gallery-wrap.no-scroll .gal-btn{opacity:.35;pointer-events:none}
.gallery figure,.card.photo,.photo-grid figure{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gallery picture,.card.photo picture,.photo-grid picture{overflow:hidden}
.gallery picture img,.card.photo picture img,.photo-grid picture img{transition:transform .45s ease}
@media (hover:hover){
  .gallery figure:hover,.card.photo:hover,.photo-grid figure:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(32,60,30,.16);border-color:var(--brand-m)}
  .gallery figure:hover picture img,.card.photo:hover picture img,.photo-grid figure:hover picture img{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .hl-item,.gallery figure,.card.photo,.photo-grid figure,.gallery picture img,.card.photo picture img,.photo-grid picture img{transition:none}
  .hl-item:hover,.gallery figure:hover,.card.photo:hover,.photo-grid figure:hover{transform:none}
  .gallery figure:hover picture img,.card.photo:hover picture img,.photo-grid figure:hover picture img{transform:none}
}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photo-grid figure{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.photo-grid picture{aspect-ratio:10/7}
.photo-grid picture img{width:100%;height:100%;object-fit:cover}
.photo-grid figcaption{padding:12px 16px;font-size:15px;font-weight:500;color:var(--ink2)}
.gap-top{margin-top:36px}
.sec-more{margin-top:24px}
.box-more{margin-top:20px;text-align:right}
.btn-row{margin-top:20px}
.align-center{text-align:center}
.align-right{text-align:right}
.prose .btn-row.gap-s{margin-top:24px}
.prose .btn-row.gap-m{margin-top:36px}
.prose .btn-row.gap-l{margin-top:44px}

/* FAQ */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 20px;color:var(--ink2);font-size:var(--fs-small)}

/* CTA 띠 */
.cta-band{background:linear-gradient(135deg,var(--brand-d),var(--brand));color:#fff;border-radius:22px;padding:44px 48px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}
.cta-band h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 6px;color:var(--accent)}
.cta-band p{color:rgba(255,255,255,.88)}
.cta-band .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sec .cta-band .btn-primary:hover,.sec .cta-band .btn-outline:hover{background:var(--accent);border-color:var(--accent);color:var(--brand-d)}

/* ---------- 오시는 길 (기준: 참잘함 수원 #location) ---------- */
.hours-loc{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.info-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.info-box h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.info-box h3 .ic{width:20px;height:20px;color:var(--brand)}
.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-small)}
.kv:last-child{border-bottom:none}
.kv b{flex:0 0 auto}
.kv span{color:var(--ink2);text-align:right;line-height:1.65;font-weight:500}
.kv span a{color:var(--brand-d);font-weight:700}
.addr-line{font-size:var(--fs-small);line-height:1.65;margin-bottom:14px;font-weight:600}
.addr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.prose .addr-actions{margin-top:24px}
.abtn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:1.5px solid var(--btn-line);background:var(--btn-bg);font-size:14.5px;font-weight:700;color:var(--btn-ink);line-height:1.3;transition:border-color .18s ease,color .18s ease,transform .18s ease}
.abtn:hover{background:var(--btn-bg-hover);transform:translateY(-1px)}
.abtn.done{background:#1f6b3a;border-color:transparent;color:#fff}
.abtn .ic{width:15px;height:15px}
.route-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.route-grid.c3{grid-template-columns:repeat(3,1fr)}
.route{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.route-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.route-head h3{font-size:18px;font-weight:800;margin:0}
.line-badge{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:800;color:#fff;flex:0 0 auto;background:var(--brand)}
.line-badge.l2{background:#00a84d} /* 서울 2호선 노선색 */
.nb{white-space:nowrap}
.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips-label{font-size:13.5px;font-weight:700;color:var(--ink3);margin-top:12px}
.bus{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:#3d5bab;border:1px solid #3d5bab;color:#fff;font-size:13px;font-weight:800;line-height:1} /* 서울 간선(파랑) */
.bus.branch{background:#5bb025;border-color:#5bb025}   /* 지선(초록) */
.bus.town{background:#5bb025;border-color:#5bb025}     /* 마을(초록) */
.bus.wide{background:#e60012;border-color:#e60012}     /* 광역(빨강) */
.steps{list-style:none;counter-reset:step}
.steps li{position:relative;padding:0 0 18px 38px;counter-increment:step;font-size:15.5px;color:var(--ink2);line-height:1.6;font-weight:500}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--brand-m);color:var(--ink);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.steps li::after{content:"";position:absolute;left:12px;top:30px;bottom:0;width:2px;background:var(--brand-l)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps b,.stop-note b{color:var(--ink)}
.steps+.stop-note{margin-top:14px}
.stop-note{font-size:15px;color:var(--ink2);line-height:1.6;font-weight:500}
.map-embed{margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.map-embed iframe{display:block;width:100%;height:380px;border:0}
.hours-wrap:has(.hours-side){align-items:stretch}
.hours-side{display:flex;flex-direction:column;gap:18px}
.hours-side .route{flex:1 1 auto}
.route .addr-actions .abtn{padding:7px 10px;font-size:13px;gap:5px}
.route .addr-actions .abtn .ic{width:14px;height:14px}
.hours-side .route .kv{padding:10px 0}
.hours-side .route .stop-note+.kv{margin-top:16px}
.route-grid .route{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
@media (hover:hover){.route-grid .route:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(32,60,30,.16);border-color:var(--brand-m)}}
@media (prefers-reduced-motion:reduce){.route-grid .route{transition:none}.route-grid .route:hover{transform:none}}
.route .addr-line{margin-bottom:8px}
.route .addr-actions{margin-top:18px;margin-bottom:18px}

/* ---------- 푸터 (어두운 우드) ---------- */
.site-footer{background:var(--wood-2);color:rgba(255,255,255,.8);padding:64px 0 110px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.footer-brand{display:block;margin-bottom:18px}
.footer-brand .brand-logo{height:40px} /* 흰색 버전 logo-white.png */
.site-footer h2{font-size:16px;color:#fff;margin-bottom:12px}
.site-footer dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.site-footer dt{color:rgba(255,255,255,.55)}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px} /* 바로가기 2열(사용자 지시 2026-10-21) */
.footer-notice{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.65);line-height:1.8}
.footer-notice p+p{margin-top:4px}
.copyright{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.45)}
.copy-buffer{position:fixed;opacity:0;left:0;top:0;width:1px;height:1px}

/* ---------- 우하단 빠른 CTA — 예약·전화·오시는 길 ---------- */
.quick-cta{position:fixed;right:24px;bottom:24px;z-index:90}
.quick-cta ul{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.quick-cta a{display:flex;align-items:center;gap:9px;min-width:136px;height:50px;padding:0 18px 0 16px;border-radius:12px;background:var(--cta);color:#fff;font-size:15px;font-weight:700;line-height:1;box-shadow:0 8px 22px rgba(73,151,32,.35);transition:background .18s ease,transform .18s ease}
.quick-cta a:hover{background:var(--cta-d);transform:translateX(-3px)}
.quick-cta a:focus-visible{outline-color:var(--cta-d)}
.quick-cta .ic{width:20px;height:20px;color:#fff}
.quick-cta li:nth-child(2) a{background:#fff;color:var(--cta-d);border:1.5px solid var(--cta);box-shadow:0 8px 22px rgba(73,151,32,.22)}
.quick-cta li:nth-child(2) a:hover{background:var(--brand-l)}
.quick-cta li:nth-child(2) .ic{color:var(--cta)}
@media print{.quick-cta{display:none}}

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .gnb ul a,.gnb .sub-toggle{padding:10px 8px;font-size:14.5px}
  .header-call span{display:none}
}
@media (max-width:960px){
  :root{--header-h:64px}
  .brand-logo{height:36px}
  .site-header{backdrop-filter:none;background:var(--bg)}
  .header-inner{display:flex}
  .nav-toggle{display:inline-flex}
  .header-call{display:none}
  .gnb{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);padding:0 22px calc(40px + env(safe-area-inset-bottom));overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  .nav-open .gnb{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .gnb-top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);margin-bottom:12px;border-bottom:1px solid var(--line)}
  .nav-close{display:inline-flex;width:46px;height:46px;border-radius:10px;align-items:center;justify-content:center;color:var(--ink)}
  .nav-close:hover{background:var(--brand-m)}
  .gnb ul{flex-direction:column;align-items:stretch;gap:2px}
  .gnb ul a,.gnb .sub-toggle{padding:16px 6px;font-size:17px;border-bottom:1px solid var(--line);border-radius:0;width:100%}
  .gnb-top .brand{flex:0 1 auto;min-width:0}
  .nav-close{flex:0 0 auto}
  .has-sub .sub-toggle{display:none}            /* 모바일은 접지 않고 전부 펼친다 */
  .has-sub .sub{display:flex;position:static;transform:none;min-width:0;background:none;border:0;box-shadow:none;padding:0;border-radius:0}
  .has-sub .sub::before{content:"진료분야";display:block;padding:14px 6px 6px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ink3)}
  .has-sub .sub a{padding:13px 6px 13px 18px;font-size:16px}
  .nav-open{overflow:hidden}
  .cards,.cards.c4,.hl-grid,.clinics,.photo-grid,.process{grid-template-columns:repeat(2,1fr)}
  .clinics .card.featured{grid-column:span 2}
  .split{grid-template-columns:1fr;gap:28px}
  .doc-split .split-media{min-height:0;aspect-ratio:1/1}
  .doc-split .split-media img{object-position:50% 12%}
  .loc-photos{height:auto}
  .loc-photos .split-media{flex:none;aspect-ratio:4/3}
  .split.rev>.split-media{order:0}
  .hours-loc,.route-grid,.route-grid.c3,.hours-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .quick-cta{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .quick-cta ul{gap:8px}
  .quick-cta a{min-width:0;height:46px;padding:0 15px 0 13px;font-size:14px}
  .quick-cta .ic{width:18px;height:18px}
  .bio{grid-template-columns:1fr;gap:4px 0}
  .bio dt{margin-top:10px}
}
@media (max-width:640px){
  :root{--fs-body:16.5px}
  .sec{padding:68px 0}
  .hero{padding:72px 0 80px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .cards,.cards.c2,.cards.c4,.clinics,.photo-grid,.process{grid-template-columns:1fr}
  .clinics .card.featured{grid-column:auto;flex-direction:column}
  .clinics .card.featured picture{aspect-ratio:10/7;flex:none}
  .highlights{padding:44px 0}
  .hl-grid{gap:12px}
  .hl-item{padding:20px 12px}
  .hl-num{font-size:30px}
  .gallery{grid-auto-columns:82%}
  .gallery-wrap{padding:0 44px}
  .gal-btn{width:36px;height:36px}
  .gal-btn .ic{width:17px;height:17px}
  .cta-band{padding:32px 24px}
  .cta-band .btns,.cta-band .btn{width:100%}
  .hours th,.hours td{padding:10px 9px;font-size:14px}
  .hours tbody th{width:26%}
  .kv{flex-direction:column;gap:4px}
  .kv span{text-align:left}
  .map-embed iframe{height:300px}
}

/* ---------- 404 안내 페이지 ---------- */
.notfound{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:48px 0;text-align:center}
.notfound .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.notfound .brand{margin-bottom:28px}
.notfound .brand-logo{height:52px}
.notfound-code{font-size:clamp(56px,10vw,96px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--brand-m)}
.notfound h1{font-size:clamp(24px,3.2vw,34px);color:var(--brand-d)}
.notfound-desc{color:var(--ink2);max-width:520px}
.notfound-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.notfound-addr{margin-top:28px;font-size:var(--fs-small);color:var(--ink3)}
@media (max-width:600px){.notfound-btns{flex-direction:column;width:100%;max-width:340px}.notfound-btns .btn{width:100%}}

/* 홈 의료진 카드 — 세로 프로필 사진을 4:3 로 자르되 윗부분(머리)을 남긴다 */
.card.photo .doc-card{border-radius:0;box-shadow:none}
.card.photo .doc-card picture{aspect-ratio:4/3}
.card.photo .doc-card img{object-position:50% 0}

/* 홈 진료분야 — 강조 3분야 카드 나열 + 나머지 캐러셀 (사용자 지시 2026-10-19) */
.clinics-main{grid-template-columns:repeat(3,1fr)}
.clinics-more-title{font-size:var(--fs-h3);margin:56px 0 18px;display:flex;align-items:center;gap:10px}
.clinics-more-title::before{content:"";width:16px;height:2px;background:var(--brand);border-radius:1px}
.clinic-carousel .gallery{display:flex;gap:16px;align-items:stretch;padding:8px 2px 16px}
.clinic-carousel .gallery>.card{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start}
@media (max-width:960px){.clinic-carousel .gallery>.card{flex-basis:calc((100% - 16px)/2)}.clinics-main{grid-template-columns:repeat(2,1fr)}.clinics-main .card:first-child{grid-column:span 2}}
@media (max-width:640px){.clinics-main{grid-template-columns:1fr}.clinics-main .card:first-child{grid-column:auto}.clinic-carousel .gallery>.card{flex-basis:100%}}

/* 푸터 — 바로가기 목록 외 클릭 가능한 글자(전화·원장별 진료시간 등)는 포인트색(사용자 지시 2026-10-19, 전 페이지·매거진 공통) */
.site-footer a:not(.footer-links a){color:var(--accent);font-weight:700}
.site-footer a:not(.footer-links a):hover{color:var(--accent-l)}

/* 클리닉 페이지 — 증상 목록 가운데 정렬, 진료 과정 카드 호버(사용자 지시 2026-10-19, 자율신경장애) */
.chips.center{justify-content:center}
.process.hover li{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
@media (hover:hover){.process.hover li:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(32,60,30,.16);border-color:var(--brand-m)}}
@media (prefers-reduced-motion:reduce){.process.hover li{transition:none}.process.hover li:hover{transform:none}}

/* 우하단 "맨 위로" 버튼 (사용자 지시 2026-10-19) — 400px 이상 내리면 나타남. 숨김 중에도 자리를 지켜 다른 버튼이 움직이지 않는다 */
.quick-cta .to-top-item{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.show-top .quick-cta .to-top-item{opacity:1;visibility:visible;transform:none}
.quick-cta .to-top{background:var(--wood-2);border:2px solid #9a6a2c;box-shadow:0 8px 22px rgba(32,60,30,.3)} /* 주황 포인트 테두리(사용자 지시 2026-10-19) */
.quick-cta .to-top .ic{color:var(--accent)}
.quick-cta .to-top:hover{background:var(--wood)}
@media (prefers-reduced-motion:reduce){.quick-cta .to-top-item{transition:none;transform:none}}

/* 증상 칩 강제 줄나눔(페이지별 breakAfter) — 데스크톱만, 모바일은 자연 줄바꿈 */
.chips .chips-break{flex-basis:100%;height:0;padding:0;margin:0;border:0;background:none}
@media (max-width:720px){.chips .chips-break{display:none}}
@media (max-width:640px){.loc-photos-row{grid-template-columns:1fr;margin-top:24px}.loc-photos-row .split-media{height:auto;aspect-ratio:4/3}}
@media (max-width:720px){.quick-cta li:not(.to-top-item){display:none}} /* 모바일은 우하단 CTA 숨김, 맨 위로만 유지(사용자 지시 2026-10-20) */