/* 컬러 시안: wf.css 위에 덮어쓰기 (브랜드 #572B02 기준) */
:root {
  --primary:#572B02; --primary-dark:#3E1F02; --primary-tint:#F1E6DA;
  --secondary:#5F7356; --secondary-tint:#E8EDE4; --accent:#C9925A;
  --bg:#FAF6F0; --surface:#FFFFFF; --soft:#F3ECE2; --line:#E4D9CC;
  --ink:#2B211A; --muted:#76695E; --box:#EADFD2; --dark:var(--primary); --anno:#b45309;
  --footer:#2A1A0C; --footer-ink:#CBBBA9; --footer-hi:#F3EADF; --footer-line:#47331F;
}
@media (prefers-color-scheme: dark) { :root {
  --primary:#D9A877; --primary-dark:#E6BE95; --primary-tint:#3A2B1F;
  --secondary:#9DB091; --secondary-tint:#26302A; --accent:#C9925A;
  --bg:#1C1612; --surface:#261E18; --soft:#211A15; --line:#3A2F27;
  --ink:#EDE5DB; --muted:#A99B8D; --box:#2E241C; --dark:var(--primary); --anno:#fb923c;
  --footer:#120D0A; --footer-ink:#A99B8D; --footer-hi:#EDE5DB; --footer-line:#2E241C;
} }

a:hover { color:var(--primary); }
.btn.fill:hover, .mm-act a.fill:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:var(--bg); }

/* 로고 */
.logo { width:auto; height:46px; background:none; border:0; }
.logo img { height:46px; width:auto; display:block; filter:brightness(0) invert(1); }
body.menu-open .logo { background:none; border:0; }
body.menu-open .logo img { filter:none; }
@media (prefers-color-scheme: dark) { body.menu-open .logo img { filter:brightness(0) invert(.9) sepia(.2); } }
@media (max-width: 900px) { .logo, .logo img { height:38px; } }

/* 헤더 */
/* 행동 버튼은 사진 위에서도 메인색 채움 (기획서 14 사용 규칙) */
header.top .btn.fill { background:var(--primary); border-color:var(--primary); color:var(--bg); }
header.top .btn.fill:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:var(--bg); }
.subm { background:rgba(250,246,240,.96); color:#2B211A; }
.subm a:hover { color:#572B02; }
.lang-m a:hover { background:#F1E6DA; color:#572B02; }

/* 히어로: 사진 자리 위 브라운 오버레이 */
.hero { background:linear-gradient(0deg,rgba(42,22,4,.78),rgba(42,22,4,.18)),repeating-linear-gradient(45deg,#9a8370 0 14px,#8e7764 14px 15px); }
.hero.band { background:var(--primary); }
/* 세부 진료·병원소개 히어로 높이 축소: 화면의 76% → 60% (모바일 70% → 56%). 메인·제목 띠는 그대로 */
.hero:not(.home):not(.band) { min-height:520px; min-height:60svh; }
.hero:not(.home):not(.band) .wrap { padding-top:150px; padding-bottom:72px; }
@media (max-width:900px) { .hero:not(.home):not(.band) { min-height:440px; min-height:56svh; } .hero:not(.home):not(.band) .wrap { padding-bottom:48px; } }
.hero .str { border-top-color:rgba(241,230,218,.45); }

/* 섹션 */
/* 섹션 구분: 실선 대신 배경색 교차. 홀수 섹션 흰색(--surface), 짝수 섹션 한지(--bg) */
.sec { border-bottom:0; }
main > .sec:nth-of-type(odd) { background:var(--surface); box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax); }
.cta { border-top:0; }
.sec h2 { color:var(--primary); }
.sec h2 small { color:var(--secondary); }
.img { background:var(--box); border-color:var(--line); }
.card, .menu-cards a, .feat div, .post, .checklist li, .tcard { background:var(--surface); }
.card:hover, .menu-cards a:hover, .post:hover { border-color:var(--primary); box-shadow:0 6px 18px rgba(87,43,2,.08); }
.menu-cards a:hover b { color:var(--primary); }
.feat b { color:var(--primary); }
.feat div { border-top:3px solid var(--accent); }
.checklist li::before { color:var(--secondary); }
.answer { background:var(--primary-tint); }
.life li, .cmp th { background:var(--soft); }
.principles span, .info span { color:var(--secondary); font-weight:600; }
.steps li:not(:last-child)::after { background:var(--accent); opacity:.6; }
summary::after { color:var(--primary); }
.badge { border-color:var(--primary); color:var(--primary); }
.more { color:var(--primary); }
.list-rows li span { color:var(--muted); }
/* 메인 병원 소식: 제목 앞 분류 표시(공지 = 메인색 채움, 소식 = 메인 연하게) */
.list-rows .tt { display:flex; align-items:center; gap:10px; min-width:0; }
.list-rows .nb { flex:none; display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; background:var(--primary); color:var(--bg); font-size:12px; font-style:normal; font-weight:700; }
.list-rows .nb.off { background:var(--primary-tint); color:var(--primary); }

.tabs a.on { background:var(--primary); border-color:var(--primary); color:var(--bg); }

/* 히어로 아래 한 줄: 왼쪽 경로, 오른쪽 하위 메뉴(세그먼트, 현재 페이지는 메인색 채움) */
.sub { position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:24px 0; border-bottom:1px solid var(--line); }
.sub .tag { position:absolute; top:4px; left:0; margin:0; }
.sub .crumb { padding:0; font-size:13px; color:var(--muted); }
.sub .crumb a { color:inherit; text-decoration:none; }
.sub .crumb a:hover { color:var(--primary); }
.sub nav { display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--soft); font-size:14.5px; overflow-x:auto; scrollbar-width:none; }
.sub nav a { flex:none; padding:8px 18px; border-radius:999px; white-space:nowrap; color:var(--ink); font-weight:600; text-decoration:none; }
.sub nav a:hover { background:var(--primary-tint); color:var(--primary); }
.sub nav a[aria-current] { background:var(--primary); color:var(--bg); }
@media (max-width:560px) { .sub nav { width:100%; font-size:14px; } .sub nav a { padding:8px 14px; } }

/* 원장 인터뷰 (진료 과목 핵심 답변): 체크는 보조색, Q·강조는 메인색, 따옴표는 포인트(장식), 답변은 본명조(인용문) */
.iv .portrait { margin:0 0 36px; display:flex; align-items:center; gap:16px; }
.iv .pic { width:64px; height:64px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); background:radial-gradient(circle at 50% 40%,var(--surface) 0 13%,transparent 13.5%),radial-gradient(ellipse 60% 34% at 50% 92%,var(--surface) 0 99%,transparent 100%),linear-gradient(165deg,var(--primary-tint),var(--secondary-tint)); }
.iv figcaption { display:grid; }
.iv figcaption b { font-size:16px; font-weight:600; }
.iv figcaption a { color:var(--ink); text-decoration:none; }
.iv figcaption a:hover { color:var(--primary); }
.iv figcaption small { font-size:13px; color:var(--muted); }
.iv .chk { display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-size:12px; font-weight:600; color:var(--secondary); }
.iv .chk::before { content:""; width:10px; height:6px; border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg) translate(1px,-2px); }
.iv .q { display:flex; gap:12px; align-items:baseline; margin:0 0 14px; font-size:16px; font-weight:600; color:var(--ink); }
.iv .q span { font-size:13px; font-weight:700; color:var(--primary); }
.iv blockquote { margin:0; position:relative; padding-left:clamp(0px,4vw,52px); }
.iv blockquote::before { content:"\201C"; position:absolute; left:-4px; top:-.12em; font:400 88px/1 var(--f-head); color:var(--accent); opacity:.45; }
.iv .a1 { margin:0; font-family:var(--f-head); font-size:clamp(20px,2.5vw,26px); font-weight:400; line-height:1.7; letter-spacing:-.015em; color:var(--ink); }
.iv .a1 b { font-weight:600; color:var(--primary); }
.iv .pair { margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
.iv .a2 { margin:0; padding-left:clamp(0px,4vw,52px); font-size:16px; line-height:1.85; color:var(--muted); }
.iv .sign { margin:20px 0 0; padding-left:clamp(0px,4vw,52px); font-size:13.5px; color:var(--muted); }
.iv .sign b { font-weight:600; color:var(--ink); }
@media (max-width:560px) { .iv blockquote::before { display:none; } }

/* 자가진단: 한 문항씩 예/아니오 → 결과. 진행 막대는 메인색, 질문 카드는 사진 배경 */
.selfq { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:center; }
.selfq > .tag { grid-column:1 / -1; margin:0; }
.selfq h2 em { font-style:normal; font-weight:400; }
.selfq .desc { margin:14px 0 0; font-size:15px; color:var(--muted); }
.selfq .dots { display:flex; gap:6px; margin-top:28px; }
.selfq .dots i { width:28px; height:4px; border-radius:2px; background:var(--line); }
.selfq .dots i.on { background:var(--primary); }
/* 질문 카드 배경 = 사진. 기획서 '사진 위 글자' 규칙: 아래→위 브라운 그라데이션 + 흰 글자. 실제 사진은 --q-img에 url() 지정 */
.selfq .stage { position:relative; overflow:hidden; border-radius:28px; background:linear-gradient(0deg,rgba(42,22,4,.78),rgba(42,22,4,.18)),var(--q-img,repeating-linear-gradient(45deg,#9a8370 0 14px,#8e7764 14px 15px)) center / cover; }
.selfq .stage .ph { position:absolute; top:16px; left:clamp(28px,4vw,44px); right:16px; font-size:12px; color:#fff; opacity:.85; }
.selfq .qcard { display:flex; flex-direction:column; min-height:300px; padding:clamp(28px,4vw,44px); padding-top:52px; color:#fff; }
.selfq .qcard[hidden] { display:none; }
.selfq .qcard small { font-size:12.5px; font-weight:700; letter-spacing:.1em; color:#F1E6DA; }
.selfq .qcard p { margin:14px 0 auto; font-family:var(--f-head); font-size:clamp(21px,2.6vw,27px); font-weight:400; line-height:1.5; letter-spacing:-.02em; color:#fff; }
.selfq .qcard .rmsg { margin:0 0 auto; font-size:15px; color:#F1E6DA; }
.selfq .yn { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
/* 사진 위 버튼: 행동 버튼(예·상담 예약)은 메인색 채움, 보조 버튼은 흰 테두리만 */
.selfq .yn button, .selfq .yn .btn { display:inline-flex; align-items:center; justify-content:center; height:52px; min-width:120px; padding:0 24px; border:1.5px solid rgba(255,255,255,.7); border-radius:999px; background:transparent; color:#fff; font:600 16px/1 var(--f-body); cursor:pointer; }
.selfq .yn button:hover { border-color:#fff; background:rgba(255,255,255,.12); }
.selfq .yn button[data-ans="1"], .selfq .yn .btn.fill { background:var(--primary); border-color:var(--primary); color:var(--bg); }
.selfq .yn button[data-ans="1"]:hover, .selfq .yn .btn.fill:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:var(--bg); }
@media (max-width:820px) { .selfq { grid-template-columns:1fr; } }

/* 비교: 항목별 카드(VS 없음). 원 배경은 메인 연하게/보조 연하게 교차, 글자(글리프)는 메인색, 짧은 선만 포인트(장식) */
.cmp-sec h2 em { font-style:normal; font-weight:400; }
.cmp-sec .desc { margin:-14px 0 0; font-size:15px; color:var(--muted); }
.cmpv { display:grid; grid-template-columns:repeat(var(--n,2),minmax(0,1fr)); gap:clamp(20px,4vw,48px); align-items:start; margin-top:36px; }
.cmpv article { min-width:0; text-align:center; }
.cmpv .viz { display:grid; place-items:center; width:min(100%,220px); aspect-ratio:1/1; margin:0 auto 28px; border-radius:50%; background:var(--primary-tint); }
.cmpv article:nth-child(even) .viz { background:var(--secondary-tint); }
.cmpv .glyph { font:400 clamp(56px,8vw,84px)/1 var(--f-head); letter-spacing:-.04em; color:var(--primary); }
.cmpv article:nth-child(even) .glyph { color:var(--secondary); }
.cmpv .glyph::after { content:""; display:block; width:28px; height:1.5px; margin:14px auto 0; background:var(--accent); }
.cmpv h3 { margin:0 0 14px; font-size:22px; color:var(--ink); }
.cmpv dl { display:inline-grid; gap:10px; margin:0; text-align:left; }
.cmpv dl div { display:grid; grid-template-columns:84px 1fr; gap:12px; font-size:15px; }
.cmpv dt { padding-top:2px; font-size:13px; color:var(--muted); }
.cmpv dd { margin:0; color:var(--ink); }
@media (max-width:560px) { .cmpv { grid-template-columns:1fr; } .cmpv .viz { width:160px; } }

/* 치료 방법: 정사각 사진 카드. 항목 수(3·4개)와 관계없이 항상 4칸 기준 폭이라 모든 페이지에서 같은 크기 */
.mth-sec h2 em { font-style:normal; font-weight:400; }
.mth { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:36px; }
.mth figure { margin:0; min-width:0; }
.mth .pic { position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:22px; background:linear-gradient(170deg,var(--primary-tint),var(--secondary-tint)) center / cover; }
.mth figure:nth-child(even) .pic { background-image:linear-gradient(170deg,var(--secondary-tint),var(--primary-tint)); }
.mth .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.mth .pic .ph { position:absolute; left:16px; bottom:14px; font-size:11.5px; color:var(--muted); }
.mth figcaption { padding:18px 4px 0; }
.mth b { display:block; font:600 19px/1.35 var(--f-head); letter-spacing:-.01em; color:var(--ink); }
.mth p { margin:6px 0 0; font-size:14.5px; color:var(--muted); }
@media (max-width:820px) { .mth { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* 치료 과정: 왼쪽 제목 + 방문 주기 카드, 오른쪽 세로 단계. 단계 번호·주기 막대는 메인색, 연결선·점은 포인트(장식) */
.flow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,7vw,96px); align-items:start; }
.flow > .tag { grid-column:1 / -1; margin:0; }
.flow h2 em { font-style:normal; font-weight:400; }
.fcycle { margin-top:32px; padding:28px; border-radius:22px; background:var(--surface); border:1px solid var(--line); box-shadow:0 12px 32px -16px rgba(87,43,2,.16); }
.fcycle h3 { margin:0 0 4px; font:600 15px/1.4 var(--f-body); color:var(--ink); }
.fcycle .sm { margin:0 0 22px; font-size:13px; color:var(--muted); }
.weeks { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; }
.weeks div { display:flex; flex-direction:column; align-items:center; gap:4px; }
.weeks i { display:block; width:100%; height:8px; border-radius:4px; background:var(--primary); }
.weeks i + i { opacity:.5; }
.weeks span { margin-top:4px; font-size:10.5px; color:var(--muted); }
.legend { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:18px; font-size:12.5px; color:var(--muted); }
.ph-in { padding:0 3px; border-bottom:1px dashed var(--accent); color:var(--primary); font-weight:600; }
.fsteps { position:relative; margin:0; padding:0; list-style:none; }
.fsteps::before { content:""; position:absolute; left:7px; top:16px; bottom:16px; width:2px; background:linear-gradient(var(--accent),var(--line)); }
.fsteps li { position:relative; padding:0 0 32px 44px; }
.fsteps li:last-child { padding-bottom:0; }
.fsteps li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--bg); box-shadow:0 0 0 2.5px var(--accent); }
.fsteps li:first-child::before { background:var(--accent); }
.fsteps .n { font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--primary); }
.fsteps b { display:block; margin-top:2px; font:600 19px/1.4 var(--f-head); letter-spacing:-.01em; color:var(--ink); }
.fsteps small { font-size:14.5px; color:var(--muted); }
@media (max-width:820px) { .flow { grid-template-columns:1fr; } }
@media (max-width:560px) { .weeks span { font-size:9px; } }

/* 생활관리: 왼쪽 제목, 오른쪽 아이콘 2열. 아이콘 칸은 메인 연하게/보조 연하게 교차, 아이콘은 메인/보조색 */
.life-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,88px); }
.life-wrap > .tag { grid-column:1 / -1; margin:0; }
.life-wrap h2 em { font-style:normal; font-weight:400; }
.lifeg { display:grid; grid-template-columns:1fr 1fr; gap:40px 32px; margin:0; padding:0; list-style:none; }
.lifeg li { min-width:0; }
.lifeg .ic { display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px; border-radius:16px; background:var(--primary-tint); color:var(--primary); }
.lifeg li:nth-child(even) .ic { background:var(--secondary-tint); color:var(--secondary); }
.lifeg .ic svg { width:22px; height:22px; }
.lifeg b { display:block; font-size:17px; font-weight:600; line-height:1.5; letter-spacing:-.01em; color:var(--ink); }
@media (max-width:820px) { .life-wrap { grid-template-columns:1fr; } }
@media (max-width:560px) { .lifeg { grid-template-columns:1fr; gap:28px; } }

/* 건강 이야기(블로그): 16:10 썸네일 3열. 썸네일 자리는 메인 연하게/보조 연하게 그라데이션, '보기' 링크는 메인색 */
.jour h2 em { font-style:normal; font-weight:400; }
.jposts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:36px; }
.jpost { display:block; min-width:0; text-decoration:none; color:var(--ink); }
.jpost .th { position:relative; aspect-ratio:16/10; margin-bottom:16px; overflow:hidden; border-radius:18px; background:linear-gradient(150deg,var(--primary-tint),var(--secondary-tint)) center / cover; transition:transform .35s ease; }
.jpost:nth-child(3n+2) .th { background-image:linear-gradient(150deg,var(--secondary-tint),var(--primary-tint)); }
.jpost .th img { width:100%; height:100%; object-fit:cover; display:block; }
.jpost .th .ph { position:absolute; left:14px; bottom:12px; font-size:11px; color:var(--muted); }
.jpost:hover .th { transform:translateY(-4px); }
.jpost .meta { font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--secondary); }
.jpost .t { display:block; margin-top:4px; font-size:16.5px; font-weight:600; line-height:1.5; }
.jpost:hover .t { color:var(--primary); }
.jpost .go { display:block; margin-top:8px; font-size:13px; font-weight:600; color:var(--primary); }
.jpost .s { display:block; margin-top:6px; font-size:14px; color:var(--muted); }
.jpost .go.chk { color:var(--secondary); }
.toolbar .tb-note { font-size:13.5px; color:var(--muted); }
.jpost .st { display:inline-block; padding:3px 10px; border-radius:999px; background:var(--primary-tint); color:var(--primary); font-size:12px; font-weight:700; letter-spacing:0; }
.jpost .st.off { background:var(--soft); color:var(--muted); }
.jpost.ended { opacity:.55; }
.jpost.ended:hover .th { transform:none; }
.jpost.ended:hover .t { color:var(--ink); }
.jour .ref { margin:28px 0 0; font-size:12.5px; color:var(--muted); }
@media (max-width:820px) { .jposts { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .jposts { grid-template-columns:1fr; } }

/* FAQ: 왼쪽 제목, 오른쪽 둥근 질문 카드(흰 면+테두리, 열어도 색 그대로), 답변은 말풍선, +/− 표시는 메인색 */
#faq { scroll-margin-top:24px; }
.faq-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,88px); }
.faq-wrap > .tag { grid-column:1 / -1; margin:0; }
.faq-wrap .side p { margin:16px 0 0; font-size:15px; color:var(--muted); }
.faq details { border:0; }
.faq details + details { margin-top:12px; }
.faq summary { display:flex; width:fit-content; max-width:85%; justify-content:space-between; align-items:center; gap:16px; padding:22px 24px 22px 28px; border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); font-size:16.5px; font-weight:600; color:var(--ink); }
.faq summary::after, .faq details[open] summary::after { content:none; }
.faq .pm { position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--bg); }
.faq .pm::before, .faq .pm::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; background:var(--primary); transform:translate(-50%,-50%); transition:transform .25s; }
.faq .pm::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] .pm::after { transform:translate(-50%,-50%) rotate(0); }
/* 말풍선 모양은 그대로, 배치만 메신저처럼: 질문은 왼쪽·답변은 오른쪽, 폭은 글 길이만큼(최대 85%) */
.faq details p { width:fit-content; max-width:85%; margin:12px 0 4px auto; padding:22px 24px 22px 28px; border-radius:20px; background:var(--primary-tint); color:var(--ink); font-size:16.5px; font-weight:600; line-height:1.7; }
@media (max-width:820px) { .faq-wrap { grid-template-columns:1fr; } }
/* 진료 과목·병원소개 페이지: 제목을 위로, 말풍선이 본문 전체 폭 사용 */
.faq-wrap.stack { grid-template-columns:1fr; gap:28px; }

/* 추천 대상(피부미용·다이어트): 섹션 전체 사진 배경 + 가운데 제목 + 크림색 알약 체크 목록.
   사진 위 글자 규칙: 브라운 그라데이션 + 흰 글자. 체크 표시는 보조색. 배경은 --rec-img로 교체 (지금은 임시 레이저 이미지) */
/* 배경 사진은 섹션 전체(화면 끝에서 끝까지)에 깔림 */
body { overflow-x:clip; }
.sec.rec { position:relative; isolation:isolate; background:none !important; box-shadow:none !important; clip-path:none !important; }
.sec.rec::before { content:""; position:absolute; top:0; bottom:0; left:50%; z-index:-1; width:100vw; transform:translateX(-50%); background:linear-gradient(0deg,rgba(42,22,4,.78),rgba(42,22,4,.18)),var(--rec-img,url("rec-laser.svg")) center / cover; }
.sec.rec .note { color:#F1E6DA; }
.rec-card { padding:clamp(8px,2vw,24px) 0; text-align:center; color:#fff; }
.rec-card h2 { margin:0 0 36px; font-size:clamp(26px,3.6vw,38px); line-height:1.35; color:#fff; }
.rec-card h2 em { font-style:normal; color:#F1E6DA; }
.rec-card ul { display:grid; gap:14px; max-width:520px; margin:0 auto; padding:0; list-style:none; }
.rec-card li { display:flex; align-items:center; gap:14px; padding:14px 28px; border-radius:999px; background:rgba(250,246,240,.95); color:#2B211A; font-size:17px; font-weight:600; text-align:left; box-shadow:0 6px 18px rgba(42,22,4,.18); }
.rec-card li svg { flex:none; width:22px; height:22px; fill:none; stroke:#5F7356; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.rec-card .rec-note { margin:28px 0 0; font-size:14px; color:#F1E6DA; }
@media (max-width:560px) { .rec-card li { padding:12px 20px; font-size:15.5px; } }

/* 공통 CTA: 지도 선택 아이콘·예약 버튼은 각 서비스 브랜드 색 (네이버 #03C75A, 카카오 #FEE500, 구글 4색).
   버튼 모서리는 오시는 길·주차 라벨과 같은 5px, 테두리 없음 */
.map-prov .bi { flex:none; width:22px; height:22px; }
.map-prov span.on { box-shadow:inset 0 3px var(--primary); }
.loc-book a { border-radius:5px; }
.loc-book a .bi { flex:none; width:20px; height:20px; }
.loc-book a.naver { background:#03C75A; border:0; color:#fff; }
.loc-book a.naver:hover { background:#02B350; color:#fff; }
.loc-book a.kakao { background:#FEE500; border:0; color:rgba(0,0,0,.85); }
.loc-book a.kakao:hover { background:#F5DC00; color:rgba(0,0,0,.85); }

/* 커뮤니티 게시판: 분류 버튼(전체·공지·소식). 선택된 버튼은 메인색 채움 */
.toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filters button { display:inline-flex; align-items:center; height:38px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font:600 14px/1 var(--f-body); cursor:pointer; }
.filters button:hover { border-color:var(--primary); color:var(--primary); }
.filters button[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:var(--bg); }
.board li[hidden] { display:none; }

/* 페이지 번호: 둥근 네모, 현재 페이지는 메인색 채움, 마우스 올리면 메인 연하게 */
.pg { gap:6px; margin-top:48px; }
.pg a, .pg strong { width:auto; min-width:40px; height:40px; padding:0 6px; border:0; border-radius:12px; font-size:14px; font-weight:600; color:var(--muted); }
.pg a:hover { background:var(--primary-tint); color:var(--primary); }
.pg strong { background:var(--primary); color:var(--bg); }

/* 진료 과목·병원소개 페이지: 섹션 간격 넓게 (기본 44px → 88px, 모바일 32px → 56px) */
.clinic > .sec { padding:88px 0; }
.clinic > .sec.skip { padding:14px 0; }
@media (max-width:900px) { .clinic > .sec { padding:56px 0; } }
/* 섹션 제목과 내용 사이 18px → 32px (진료 과목·병원소개). 바로 뒤 요소의 자체 위 여백은 0으로 맞춰 32px로 통일 */
.clinic > .sec > h2, .clinic > .sec > div:not(.side) > h2 { margin-bottom:32px; }
.clinic > .sec > h2 + :is(.mth, .jposts, .sched, .phil3-grid) { margin-top:0; }
.clinic .flow .fcycle { margin-top:0; }

/* 오시는 길 > 교통수단 카드: 아이콘과 이름 한 줄, 아래 설명. 기본은 메인 연하게 칸 + 메인색 아이콘, 선택된 카드는 메인색 채움 */
.tcard { position:relative; }
.tcard .tic { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--primary-tint); color:var(--primary); transition:background .2s, color .2s; }
.tcard .tic svg { width:28px; height:28px; }
.tcard { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:16px; row-gap:14px; min-height:0; }
.tcard strong { margin:0; }
.tcard em { grid-column:1 / -1; }
.tcard[aria-expanded="true"] .tic { background:var(--primary); color:var(--bg); }
/* 카드 모양: 둥근 모서리 + 옅은 테두리·그림자, 마우스 올리면 살짝 뜸, 선택된 카드는 흰 면 그대로 + 메인색 테두리. 오른쪽 위 화살표: 선택 안 됨 ›(눌러서 보기), 선택됨 ⌄(아래에 열린 경로를 가리킴) */
.tcards { gap:16px; }
.tcard { padding:24px 24px 22px; border:0; border-radius:22px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px rgba(87,43,2,.04); transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.tcard::after { content:""; position:absolute; top:28px; right:26px; width:8px; height:8px; border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted); transform:rotate(-45deg); transition:transform .25s ease, border-color .25s ease; }
.tcard:hover { transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line), 0 14px 30px -16px rgba(87,43,2,.28); }
.tcard[aria-expanded="true"] { background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--primary), 0 14px 30px -18px rgba(87,43,2,.3); }
.tcard[aria-expanded="true"]::after { border-color:var(--primary); transform:rotate(45deg); }
.tcard strong { font-size:21px; }
.tcard em { padding-top:14px; border-top:1px dashed var(--line); }
.route { border-radius:24px; }
.rsteps li { border-radius:18px; }
@media (max-width:900px) { .tcard .tic { width:44px; height:44px; } .tcard strong { margin:0; } .tcard .tic svg { width:24px; height:24px; } }

/* 메인 FAQ: 왼쪽 Q·A 질문 목록 카드(Q는 메인색, A는 보조색), 오른쪽 바로가기 6칸. 번호·아이콘은 메인색, 칸 배경은 메인 연하게 */
.hfaq h2 { margin-bottom:0; }
.hfaq-desc { margin:12px 0 28px; font-size:15px; color:var(--muted); }
.hfaq-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,32px); align-items:stretch; }
.hfaq-list { padding:10px 28px; border-radius:22px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.hfaq-list details { border:0; }
.hfaq-list details + details { border-top:1px solid var(--line); }
.hfaq-list summary { display:flex; align-items:center; gap:12px; padding:18px 0; font-size:15.5px; font-weight:600; color:var(--ink); }
.hfaq-list summary::after, .hfaq-list details[open] summary::after { content:none; }
.hfaq-list .no { flex:none; width:22px; color:var(--primary); font-size:15.5px; font-weight:700; }
.hfaq-list .q { flex:1; }
.hfaq-list .cv { flex:none; width:8px; height:8px; margin-right:4px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(-45deg); transition:transform .2s; }
.hfaq-list details[open] .cv { transform:rotate(45deg); border-color:var(--primary); }
.hfaq-list details p { display:flex; gap:12px; margin:-6px 0 0; padding:0 0 18px; font-size:14.5px; color:var(--muted); }
.hfaq-list details p .no { color:var(--secondary); font-size:15.5px; }
.hfaq-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hfaq-tiles a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:130px; padding:16px 8px; border-radius:20px; background:var(--primary-tint); color:var(--ink); text-decoration:none; text-align:center; transition:transform .2s, box-shadow .2s; }
.hfaq-tiles a:nth-child(even) { background:var(--secondary-tint); }
.hfaq-tiles a:hover { transform:translateY(-3px); box-shadow:0 12px 24px -14px rgba(87,43,2,.3); }
.hfaq-tiles .ic { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--surface); color:var(--primary); }
.hfaq-tiles a:nth-child(even) .ic { color:var(--secondary); }
.hfaq-tiles .ic svg { width:26px; height:26px; }
.hfaq-tiles b { font-size:14.5px; font-weight:600; }
@media (max-width:900px) { .hfaq-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .hfaq-list { padding:4px 18px; } .hfaq-tiles a { min-height:110px; } }

/* 원장 소개 > 진료 철학: 기본 제목 + 3열 인용 카드. 따옴표는 포인트(장식) */
.phil3-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,48px); margin-top:28px; }
.phil3-grid figure { margin:0; }
.phil3-grid .qm { display:block; height:30px; font:400 44px/1 var(--f-head); color:var(--accent); }
.phil3-grid b { display:block; margin:14px 0 10px; font:600 19px/1.4 var(--f-head); color:var(--ink); }
.phil3-grid p { margin:0; font-size:14.5px; line-height:1.8; color:var(--muted); }
.phil3-grid figcaption { margin-top:22px; font-size:13px; color:var(--muted); }
@media (max-width:820px) { .phil3-grid { grid-template-columns:1fr; gap:32px; } }

/* 원장 소개 > 진료 일정: 요일 카드 7칸 + 아래 정보 아이콘(보조색) 안내 문구. 평일은 메인 연하게를 흰색과 6:4로 섞은 옅은 채움, 토·일은 휴진 한 카드(2칸 폭, 흰 면 + 옅은 테두리) + 토요일 예약 진료 알약, 휴진은 흐리게 */
.sched { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.4fr); gap:10px; margin:32px 0 0; padding:0; list-style:none; }
.sched li { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; padding:18px 6px; border-radius:18px; text-align:center; font-variant-numeric:tabular-nums; }
.sched li.on { background:color-mix(in srgb, var(--primary-tint) 60%, var(--surface)); }
.sched li.off { background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.sched li.wknd { grid-column:auto; }
.sched .t.rsv { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--primary-tint); color:var(--primary); font-size:12.5px; font-weight:600; letter-spacing:0; }
.sched .d { margin-bottom:12px; font-size:13px; font-weight:500; letter-spacing:.16em; color:var(--muted); }
.sched b { margin-bottom:8px; font-size:17px; font-weight:700; color:var(--primary); }
.sched .tbd b { color:var(--ink); }
.sched .off b { font-weight:600; color:var(--muted); }
.sched .t { font-size:14px; letter-spacing:.04em; color:var(--muted); }
.sched-note { display:flex; justify-content:flex-end; align-items:center; gap:6px; margin:16px 0 0; font-size:14px; color:var(--muted); }
.sched-note svg { flex:none; width:17px; height:17px; fill:none; stroke:var(--secondary); stroke-width:1.8; stroke-linecap:round; color:var(--secondary); }
@media (max-width:640px) { .sched { grid-template-columns:repeat(3,minmax(0,1fr)); } .sched li.wknd { grid-column:span 1; } }

/* 한의원 소개: 카드 반복 대신 편집 지면처럼. 인사말은 좌우 2단, 특징은 로고 모티프 반원 인포그래픽, 둘러보기는 대표 사진 1장을 크게 */
.abt-greet { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(24px,5vw,64px); align-items:start; }
.abt-greet > .tag { grid-column:1 / -1; margin:0; }
.abt-greet .side h2 { margin:0; }
.abt-greet .side .sign { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); font:400 15px/1.5 var(--f-head); color:var(--muted); }
.abt-greet .body p { margin:0 0 1.2em; font-size:16.5px; line-height:1.95; color:var(--ink); }
.abt-greet .body p:first-child { font:400 20px/1.75 var(--f-head); color:var(--primary); }
.abt-greet .body p:first-child::before { content:"\201C"; display:block; height:34px; margin-bottom:6px; font:400 64px/1 var(--f-head); color:var(--accent); }
/* 한의원 특징: 로고(cdoc)의 굵은 원형 획을 모티프로 한 반원 인포그래픽. 가운데 로고, 오른쪽 반원 3칸(메인 진하게·메인·포인트), 점선으로 설명과 연결 */
.feat-wheel { display:grid; grid-template-columns:360px minmax(0,1fr); align-items:stretch; }
.fw-svg { display:block; width:360px; height:420px; overflow:visible; }
.fw-svg .ring { fill:none; stroke:var(--primary); stroke-width:6; }
.fw-svg .core { fill:var(--surface); }
.fw-svg .seg.s1 { fill:var(--primary-dark); }
.fw-svg .seg.s2 { fill:var(--primary); }
.fw-svg .seg.s3 { fill:var(--accent); }
.fw-svg .sn { font:400 22px var(--f-head); fill:var(--bg); }
.fw-svg .cd { fill:var(--primary); }
.fw-svg path.cn { fill:none; stroke:var(--muted); stroke-width:1.2; stroke-dasharray:3 4; }
.fw-list { display:grid; grid-template-rows:repeat(3,1fr); height:420px; }
.fw-item { align-self:center; padding-left:8px; }
.fw-item h3 .no { margin-left:4px; font:400 22px/1 var(--f-head); color:var(--accent); }
.fw-item h3 { margin:6px 0 6px; padding-bottom:8px; border-bottom:1px solid var(--line); font:600 20px/1.4 var(--f-head); color:var(--ink); }
.fw-item p { margin:0; font-size:14.5px; line-height:1.75; color:var(--muted); }
@media (max-width:820px) {
  .feat-wheel { grid-template-columns:1fr; }
  .fw-svg { width:100%; max-width:300px; height:auto; margin:0 auto 12px; }
  .fw-svg .cn, .fw-svg .cd { display:none; }
  .fw-list { grid-template-rows:none; height:auto; gap:24px; }
}
.abt-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:14px; }
.abt-gallery figure { display:flex; flex-direction:column; margin:0; min-width:0; }
.abt-gallery figure.big { grid-column:span 2; grid-row:span 2; }
.abt-gallery .pic { position:relative; flex:1; border-radius:14px; background:var(--box); overflow:hidden; }
.abt-gallery .pic .ph { position:absolute; left:12px; bottom:10px; font-size:11.5px; color:var(--muted); }
.abt-gallery figcaption { padding-top:8px; font-size:13.5px; font-weight:600; color:var(--ink); }
@media (max-width:820px) { .abt-greet { grid-template-columns:1fr; } }
@media (max-width:560px) { .abt-gallery { grid-template-columns:1fr 1fr; } .abt-gallery figure.big { grid-column:span 2; grid-row:span 1; } .abt-gallery .pic { min-height:140px; } }

/* 둘러보기 사진 크게 보기(라이트박스): 어두운 배경 위 사진 + 캡션, 좌우 넘기기, Esc·바깥 클릭으로 닫기 */
.abt-gallery figure { cursor:zoom-in; }
.abt-gallery figure:hover .pic, .abt-gallery figure:focus-visible .pic { box-shadow:0 0 0 2px var(--primary); }
.lb { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; gap:16px; padding:56px 24px; background:rgba(28,18,8,.88); }
.lb[hidden] { display:none; }
.lb-fig { margin:0; width:min(960px,100%); }
.lb-pic { display:grid; place-items:center; aspect-ratio:3/2; max-height:76vh; border-radius:14px; background:var(--box); overflow:hidden; color:var(--muted); font-size:14px; }
.lb-pic img { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.lb-cap { margin-top:12px; text-align:center; font-size:14.5px; font-weight:600; color:#F3EADF; white-space:pre; }
.lb-x { position:absolute; top:16px; right:20px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:18px; cursor:pointer; }
.lb-nav { flex:none; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.lb-x:hover, .lb-nav:hover { background:rgba(255,255,255,.24); }
@media (max-width:640px) { .lb { padding:56px 8px; gap:4px; } .lb-nav { width:36px; height:36px; font-size:22px; } }

/* ===== 메인 페이지 5개 섹션 (섹션마다 다른 구성) ===== */
/* 진료 안내: 대표 메뉴(통증·교통사고) 1개를 세로로 크게, 나머지 4개 2×2. 사진 위 브라운 그라데이션 + 흰 글자 */
.hmenu { display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:repeat(2,220px); gap:14px; }
.hmenu a { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:22px 24px; border-radius:18px; overflow:hidden; color:#fff; text-decoration:none; background:linear-gradient(0deg,rgba(42,22,4,.78),rgba(42,22,4,.05) 70%),repeating-linear-gradient(45deg,#9a8370 0 14px,#8e7764 14px 15px); }
.hmenu a.top { grid-row:span 2; padding:30px; }
.hmenu .ph { position:absolute; top:14px; left:16px; font-size:11.5px; opacity:.8; }
.hmenu .t { display:flex; flex-direction:column; gap:4px; }
.hmenu b { font:600 21px/1.3 var(--f-head); }
.hmenu a.top b { font-size:28px; }
.hmenu small { font-size:13.5px; color:#F1E6DA; }
.hmenu i { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.55); font-style:normal; transition:background .2s, color .2s; }
.hmenu a:hover i { background:#fff; color:var(--primary); }

/* 메인 한의원 특징: 둥근 흰 카드 안에 칸을 세로선으로 나누고, 칸마다 선 아이콘 + 굵은 제목 + 설명(가운데 정렬) */
.feat-card { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:44px 12px; list-style:none; border-radius:28px; background:var(--surface); box-shadow:0 1px 2px rgba(87,43,2,.04); }
.feat-card li { display:flex; flex-direction:column; align-items:center; padding:4px 24px; text-align:center; border-left:1px solid var(--line); }
.feat-card li:first-child { border-left:0; }
.feat-card .fi svg { display:block; width:76px; height:76px; fill:none; stroke:var(--primary-dark); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feat-card b { margin-top:22px; font-size:18px; font-weight:700; color:var(--ink); }
.feat-card p { margin:8px 0 0; font-size:15px; line-height:1.7; color:var(--muted); }
@media (max-width:820px) {
  .feat-card { grid-template-columns:1fr; padding:12px 24px; }
  .feat-card li { padding:28px 0; border-left:0; border-top:1px solid var(--line); }
  .feat-card li:first-child { border-top:0; }
}

/* 메인 원장 소개: 지도와 사진 자리 배치 */
.sec.hdoc-section { position:relative; isolation:isolate; padding:clamp(76px,8vw,108px) 0; background:none !important; box-shadow:none !important; clip-path:none !important; }
.sec.hdoc-section::before { content:""; position:absolute; top:0; bottom:0; left:50%; z-index:-1; width:100vw; transform:translateX(-50%); background:var(--surface); }
.hdoc { position:relative; z-index:1; min-height:610px; pointer-events:none; }
/* 카드 가로 기본 위치 = 지도 그림 중심(-7vw + 75vw/2 = 30.5vw)에서 왼쪽으로 60px. margin % = .hdoc 폭 */
.hdoc-copy { --cw:520px; position:relative; max-width:590px; margin-left:max(calc(16px - (100vw - 100%) / 2), calc(30.5vw - 60px - var(--cw) / 2 - (100vw - 100%) / 2)); padding-top:260px; pointer-events:auto; }
.hdoc-card { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; width:520px; margin:0; padding:28px 32px 26px; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.hdoc-card-body { align-self:start; }
.hdoc-photo { position:relative; display:grid; place-items:center; width:320px; height:380px; overflow:hidden; border-radius:16px; }
.hdoc-photo img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
/* 메인 원장 카드 원칙: 베이지 미니 카드 3칸 (번호 → 제목 → 짧은 설명), 모바일은 세로로 쌓고 번호 왼쪽 */
.hdoc-card .principles { counter-reset:pr; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:24px; padding-top:0; border-top:0; }
.hdoc-card .principles li { counter-increment:pr; display:grid; grid-template-columns:none; align-content:start; gap:6px; padding:16px 14px 18px; border-radius:16px; background:var(--bg); }
.hdoc-card .principles li::before { content:counter(pr, decimal-leading-zero); font-family:var(--f-head); font-size:18px; font-weight:700; line-height:1; color:var(--accent); }
.hdoc-card .principles b { margin-top:4px; font-size:15px; font-weight:700; color:var(--ink); }
.hdoc-card .principles span { font-size:12.5px; font-weight:400; line-height:1.5; color:var(--muted); }
@media (max-width:560px) {
  .hdoc-card .principles { grid-template-columns:1fr; }
  .hdoc-card .principles li { grid-template-columns:30px 1fr; column-gap:10px; row-gap:2px; padding:14px; }
  .hdoc-card .principles li::before { grid-column:1; grid-row:1 / span 2; padding-top:2px; }
  .hdoc-card .principles b { grid-column:2; margin-top:0; }
  .hdoc-card .principles span { grid-column:2; }
}
.hdoc-card .more { display:block; width:fit-content; margin:20px 0 0 auto; }
.hdoc-section .more:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
/* ▼ 카드 위치 직접 조정(PC): --card-x 오른쪽(+)/왼쪽(-), --card-y 아래(+)/위(-). 0이면 기본 위치 */
@media (min-width:901px) { .hdoc-card { --card-x:0px; --card-y:0px; transform:translate(var(--card-x), var(--card-y)); } }
/* PC 세로 기본 위치: 카드 위쪽이 .hdoc 위에서 240px. 가로 기본 위치는 위 .hdoc-copy (30.5vw - 60px) */
@media (min-width:901px) { .hdoc { min-height:610px; } .hdoc-copy { padding-top:240px; } }
/* 1500px 이상: 서울 점 오른쪽으로 비켜 둔 위치에서 직접 잡은 -60px 적용 */
@media (min-width:1500px) { .hdoc-copy { margin-left:calc(max(calc(14vw + 24px - (100vw - 100%) / 2), calc(30.5vw - var(--cw) / 2 - (100vw - 100%) / 2)) - 60px); } }
.hdoc-map { position:absolute; top:0; bottom:0; left:50%; z-index:0; width:100vw; overflow:hidden; transform:translateX(-50%); pointer-events:none; }
/* 지도 옆 배경 사진: 섹션 오른쪽 절반, 왼쪽 끝은 흰색으로 흐려져 지도와 이어짐 */
.hdoc-bg { position:absolute; top:0; right:0; bottom:0; z-index:1; width:52vw; background:url("doctor.webp") 50% 0/cover no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%); mask-image:linear-gradient(90deg,transparent 0%,#000 45%); }
.hdoc-map-art { position:absolute; top:28px; left:-7vw; width:75vw; aspect-ratio:462/550; }
.hdoc-map img { position:absolute; inset:0; display:block; width:100%; height:auto; opacity:.24; }
.hdoc-pin { position:absolute; top:19%; left:28%; z-index:2; width:0; height:0; color:var(--primary); }
.hdoc-pin-dot { position:absolute; top:-8px; left:-8px; width:16px; height:16px; border:3px solid var(--surface); border-radius:50%; background:var(--primary); box-shadow:0 0 0 6px var(--primary-tint); }
.hdoc-pin-card { position:absolute; bottom:18px; left:0; display:grid; width:max-content; text-align:center; transform:translateX(-50%); }
.hdoc-pin-card small { color:var(--muted); font-size:12px; font-weight:700; }
.hdoc-pin-card strong { color:var(--primary); font-size:17px; }
.hdoc-pin-name { color:inherit; text-decoration:none; pointer-events:auto; }
.hdoc-pin-name:hover strong { text-decoration:underline; text-underline-offset:3px; }
.hdoc-pin-name:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }

/* 첫 방문 안내: 단계 카드와 흐름 화살표 */
.sec.hsteps-section { padding:80px 0 72px; }
.sec.hsteps-section h2 { margin-bottom:50px; }
.hsteps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; max-width:1040px; margin:0 auto; padding:0; list-style:none; }
.hsteps li { position:relative; display:flex; flex-direction:column; align-items:center; min-height:290px; padding:48px 22px 22px; border-radius:24px; background:var(--surface); box-shadow:0 12px 30px rgba(87,43,2,.06); text-align:center; }
.hsteps li:not(:last-child)::after { content:"›"; position:absolute; top:50%; right:-27px; z-index:2; display:grid; place-items:center; width:34px; height:34px; transform:translateY(-50%); border:4px solid var(--bg); border-radius:50%; background:var(--secondary); color:var(--surface); font:600 25px/1 var(--f-body); }
.hsteps .n { position:absolute; top:-13px; left:50%; min-width:88px; padding:4px 14px; transform:translateX(-50%); border-radius:999px; background:var(--secondary); color:var(--surface); font-size:11.5px; font-weight:700; line-height:1.6; letter-spacing:.04em; white-space:nowrap; }
.hsteps b { display:block; margin:0 0 9px; color:var(--ink); font:700 19px/1.35 var(--f-body); }
.hsteps small { display:block; max-width:175px; color:var(--muted); font-size:13.5px; line-height:1.6; }
.hsteps img { display:block; width:min(100%,132px); height:112px; margin:auto auto 0; object-fit:contain; }
.hsteps-note { display:flex; align-items:center; justify-content:center; gap:8px; margin:28px 0 0; color:var(--ink); font-size:14.5px; line-height:1.5; text-align:center; }
.hsteps-note img { display:block; width:32px; height:34px; flex:none; object-fit:contain; filter:brightness(0) saturate(100%) invert(21%) sepia(27%) saturate(1952%) hue-rotate(354deg) brightness(90%) contrast(104%); }
.hsteps-note > span { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; column-gap:10px; min-height:34px; line-height:1.3; transform:translateY(3px); }
.hsteps-note b { color:var(--primary); }
@media (prefers-color-scheme:dark) { .hsteps-note img { filter:brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(814%) hue-rotate(340deg) brightness(92%) contrast(93%); } }

/* 둘러보기: 3장씩 보이는 자동 슬라이드(3.5초), 아래 진행 막대. 마우스를 올리면 멈춤, 누르면 크게 보기 */
.hslide { --vis:3; overflow:hidden; margin-top:4px; }
.hgal { display:flex; column-gap:24px; transition:transform .6s ease; }
.hgal figure { flex:0 0 calc((100% - 24px * (var(--vis) - 1)) / var(--vis)); margin:0; min-width:0; cursor:zoom-in; }
.hslide .hgal figure { flex-basis:calc((100% - 48px) / 3); }
.hgal .pic { position:relative; aspect-ratio:1/1; border-radius:12px; background:var(--box); overflow:hidden; }
.hgal .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.hgal .pic::after { content:""; position:absolute; inset:0; border:2px solid var(--primary); border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .2s; }
.hgal figure:hover .pic::after, .hgal figure:focus-visible .pic::after { opacity:1; }
.hgal .ph { position:absolute; left:12px; bottom:10px; font-size:11.5px; color:var(--muted); }
.hgal figcaption { padding-top:10px; font-size:13.5px; font-weight:600; color:var(--ink); }
.hslide-bar { position:relative; height:3px; margin-top:36px; background:var(--line); }
.hslide-bar i { position:absolute; top:0; bottom:0; left:0; width:50%; background:var(--primary); transition:left .6s ease; }

@media (max-width:900px) { .hdoc-card { width:100%; } }
@media (max-width:900px) {
  .hmenu { grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:170px; }
  .hmenu a.top { grid-column:span 2; grid-row:auto; }
  .hdoc { min-height:0; padding-top:0; }
  .hdoc-copy { max-width:620px; margin-left:0; padding-top:110px; }
  .hdoc-map-art { top:0; left:-14vw; width:min(130vw,600px); }
  .hdoc-bg { display:none; } /* 모바일·태블릿: 원장 사진 숨김, 카드가 지도 위로 올라옴 */
  .hsteps { grid-template-columns:1fr 1fr; row-gap:36px; }
  .hsteps li:nth-child(2)::after { display:none; }
  .hslide { --vis:2; }
  .hslide .hgal figure { flex-basis:calc((100% - 24px) / 2); }
}
@media (max-width:560px) {
  .sec.hdoc-section { padding:68px 0; }
  .hdoc-copy { padding-top:90px; }
  .hdoc-card { grid-template-columns:1fr; gap:20px; padding:26px 24px 22px; }
  .hdoc-photo { width:100%; max-width:320px; height:auto; aspect-ratio:320/380; }
  .hdoc { padding-top:0; }
  .hsteps { grid-template-columns:1fr; row-gap:32px; }
  .hsteps li { min-height:240px; }
  .hsteps li:not(:last-child)::after, .hsteps li:nth-child(2)::after { top:auto; right:auto; bottom:-25px; left:50%; display:grid; transform:translateX(-50%) rotate(90deg); }
}
/* 오시는 길 CTA */
.cta { background:var(--soft); }
.cta .map-block { border-radius:12px; overflow:hidden; }
.loc-list dt { background:var(--surface); color:var(--primary); }
.loc-list .phone { color:var(--primary); }
.loc-time .rsv { color:var(--primary); }

/* 푸터 */
footer.f { background:var(--footer); color:var(--footer-ink); }
.f-mark { border:0; width:auto; height:56px; justify-content:flex-start; }
.f-mark img { height:56px; width:auto; filter:brightness(0) invert(.92) sepia(.25); }
.f-logo, footer.f .sns .img:hover, .f-links a:hover { color:var(--footer-hi); }
.f-links a, footer.f .sns .img { color:var(--footer-hi); }
footer.f .f-bottom { border-top-color:var(--footer-line); }
footer.f .f-disc, footer.f .f-copy { color:var(--footer-ink); opacity:.8; }

/* 퀵메뉴 */
.qdock nav a:hover { background:var(--primary-tint); }

/* 둘러보기 슬라이드: 모바일은 1장씩 */
@media (max-width:560px) { .hslide { --vis:1; } .hslide .hgal figure { flex-basis:100%; } }