:root{--bg:#fbf8f3;--paper:#fff;--ink:#22201d;--sub:#6b655d;--line:#e7e1d7;--accent:#9b2c55;--accent-soft:#f5e8ed;--deep:#2f3b36;--tint:#f3eee6}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--ink);font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:17px;line-height:1.75;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto;object-fit:cover}
figure img{height:100%}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2{font-family:"Noto Serif KR",serif;font-weight:700;letter-spacing:-.02em;line-height:1.35}
h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:18px}
h3{font-size:19px;margin-bottom:6px}
p+p{margin-top:12px}
.eyebrow{font-size:14px;color:var(--accent);font-weight:600;letter-spacing:.04em;margin-bottom:10px}
.eyebrow a{text-decoration:none}
.muted{color:var(--sub)}
section{padding:88px 0}
figure{overflow:hidden;border-radius:6px;background:#ddd}
.pc{display:inline}

/* 상단 */
.top{position:sticky;top:0;z-index:20;background:rgba(251,248,243,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:8px}
.brand b{font-family:"Noto Serif KR",serif;font-size:21px}
.brand span{font-family:"Noto Serif KR",serif;color:var(--accent);font-size:15px}
.top nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;color:var(--sub)}
.top nav a:hover{color:var(--ink)}
.tel{font-weight:700;text-decoration:none;font-size:15px}

/* 1 이야기형 상단 — 너무 크지 않게(원장 요청) */
.hero{padding:56px 0 64px}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(32px,4.4vw,50px);margin-bottom:22px}
.hero-sub{font-size:18px;color:var(--ink)}
.hero-note{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--sub);font-size:15px}
.hero-img{aspect-ratio:4/5;max-height:560px}

/* 2 선택형 */
.pick{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pick-in{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.tile{all:unset;cursor:pointer;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:6px;padding:18px 20px;background:var(--bg);display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.tile b{font-size:22px;font-weight:700;letter-spacing:-.01em}
.tile span{font-size:14px;color:var(--sub)}
.tile::after{content:"자세히 보기 →";font-size:13px;color:var(--accent);margin-top:6px}
.tile:hover{border-color:var(--accent)}
.tile.on{background:var(--accent-soft);border-color:var(--accent)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.panel{margin-top:18px;background:var(--deep);color:#fff;border-radius:6px;padding:24px 26px}
.pname{font-weight:700;font-size:18px;margin-bottom:4px}
.panel p{color:#e8ece9}
.side{border:1px solid var(--line);border-radius:6px;padding:18px;background:var(--bg);position:sticky;top:84px}
.side img{aspect-ratio:4/3;height:auto;border-radius:4px;margin-bottom:16px}
.side h3{font-size:16px}
.hours{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 16px}
.hours th{text-align:left;font-weight:500;color:var(--sub);padding:5px 0}
.hours td{text-align:right;padding:5px 0}
.btn{display:block;text-align:center;text-decoration:none;background:var(--accent);color:#fff;font-weight:600;padding:13px 16px;border-radius:6px;margin-top:8px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.light{display:inline-block;background:#fff;color:var(--deep);margin-top:14px;padding:10px 18px}

/* 진료 방식 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px}
.steps img{aspect-ratio:3/4;border-radius:6px;margin-bottom:16px}
.steps p{font-size:15px;color:var(--sub)}

.view{background:var(--tint)}
.view-in{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.view figure{background:#eee}
.view figure img{object-fit:contain}

.doctor-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.doctor figure{aspect-ratio:1/1}
.sig{font-family:"Noto Serif KR",serif;color:var(--accent);margin-top:22px}

.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:12px;margin-top:28px}
.gallery .g1{grid-row:span 2}
.gallery figure{position:relative}
.gallery figcaption{position:absolute;left:12px;bottom:10px;color:#fff;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.6)}

.notes{background:var(--paper);border-top:1px solid var(--line)}
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px;margin-top:28px}
.nhead{font-weight:700;text-decoration:none;display:block;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:10px}
.ngrid ul,.plist{list-style:none}
.ngrid li{font-size:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.ngrid li a,.plist a{text-decoration:none}
.ngrid li a:hover,.plist a:hover{color:var(--accent)}
.ngrid li span{display:none}
.soon{color:var(--sub)}
.more{display:inline-block;margin-top:30px;font-weight:600;color:var(--accent)}

.route{display:flex;gap:10px;overflow-x:auto;margin-top:26px;padding-bottom:10px;scroll-snap-type:x mandatory}
.route img{flex:0 0 auto;width:300px;height:220px;border-radius:6px;scroll-snap-align:start}

.foot{background:#1f2421;color:#c9cdc9;padding:56px 0 90px;font-size:14px}
.foot .wrap{display:grid;grid-template-columns:1fr 260px 1.4fr;gap:40px}
.foot .brand b{color:#fff}
.foot .sig{margin-top:8px;color:#e3a9bf}
.foot .hours th{color:#9aa19c}
.biz{line-height:1.9}
.biz span{display:block;margin-top:10px;color:#8b928d;font-size:13px}
.fab{display:none}

/* 증상 페이지 */
.chero{padding:52px 0 64px}
.chero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.chero h1{font-size:clamp(28px,3.6vw,42px);margin-bottom:18px}
.chero figure{aspect-ratio:4/3}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.two figure{aspect-ratio:4/5}
.signs{list-style:none}
.signs li{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);position:relative}
.signs li:before{content:"";position:absolute;left:4px;top:23px;width:10px;height:10px;border:2px solid var(--accent);border-radius:50%}
.note{background:var(--paper);border-left:3px solid var(--accent);padding:22px 24px;border-radius:0 6px 6px 0;margin-top:52px}
.note p{color:var(--sub);font-size:15px}
.tint{background:var(--tint)}
.cview{max-width:760px}
.wide{margin-top:30px;background:#eee}
.wide img{object-fit:contain}
.flow{list-style:none;counter-reset:f;margin:18px 0}
.flow li{counter-increment:f;padding:14px 0 14px 46px;border-bottom:1px solid var(--line);position:relative;color:var(--sub);font-size:15px}
.flow li:before{content:counter(f);position:absolute;left:0;top:14px;width:30px;height:30px;border-radius:50%;background:var(--deep);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center}
.flow b{display:block;color:var(--ink);font-size:17px}
.plist li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}
.plist li span{color:var(--sub);font-size:14px;flex-shrink:0}
.others{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.others span{color:var(--sub);font-size:14px;margin-right:6px}
.others a{text-decoration:none;border:1px solid var(--line);background:var(--paper);padding:6px 14px;border-radius:20px;font-size:14px}
.cta{text-align:center;background:var(--deep);color:#fff}
.cta .btn{display:inline-block;min-width:200px;margin:8px 4px 0}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}

@media (max-width:900px){
  body{font-size:16px}
  section{padding:60px 0}
  .wrap{padding:0 16px}
  .top nav{display:none}
  .tel{margin-left:auto}
  .hero{padding:28px 0 44px}
  .hero-in,.pick-in,.view-in,.doctor-in,.chero-in,.two{grid-template-columns:1fr;gap:28px}
  .hero-img{order:-1;aspect-ratio:4/3;max-height:none}
  .chero figure{order:-1}
  .pc{display:none}
  .tiles{grid-template-columns:1fr}
  .side{position:static}
  .steps{grid-template-columns:repeat(2,1fr);gap:16px}
  .steps img{aspect-ratio:1/1}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:200px 140px 140px}
  .gallery .g1{grid-column:span 2;grid-row:auto}
  .ngrid{grid-template-columns:1fr 1fr}
  .note{margin-top:0}
  .foot .wrap{grid-template-columns:1fr;gap:24px}
  .fab{display:block;position:fixed;right:16px;bottom:16px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:13px 20px;border-radius:30px;box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:30}
}
@media (max-width:420px){.steps{grid-template-columns:1fr}.ngrid{grid-template-columns:1fr}}

/* 10/5 2차: 상세 문구 · 건전지 그림(홈페이지 색) · 지도 */
.lead{max-width:760px;color:var(--sub);margin:-4px 0 6px}
.hero-note p{color:var(--sub);font-size:15px}
.hero-note .hn-h{color:var(--ink);font-weight:700;font-size:17px;margin-bottom:6px}
.view-head{max-width:780px}
.bat{display:grid;grid-template-columns:1fr 200px 1fr;gap:20px;align-items:stretch;margin-top:40px}
.bcard{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:26px 24px;display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto 1fr;column-gap:22px}
.bt{grid-column:1/-1;font-weight:700;font-size:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bsvg{width:72px;height:auto;align-self:center}
.bcard ul{list-style:none}
.bcard li{font-size:14px;color:var(--sub);padding:8px 0}
.bcard li+li{border-top:1px dashed var(--line)}
.bcard li b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.barrow{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative}
.barrow span{background:var(--deep);color:#fff;font-weight:700;padding:10px 18px;border-radius:30px;font-size:15px}
.barrow p{font-size:14px;color:var(--sub);margin-top:12px}
.barrow:after{content:"";width:60%;height:2px;background:var(--deep);opacity:.25;position:absolute;top:50%;left:20%;z-index:-1}
.ndesc{font-size:14px;color:var(--sub);margin:-4px 0 8px}
.ngrid li span{display:block;font-size:12px;color:#a79f93}
.visit-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.visit-in .btn{display:inline-block;min-width:200px;margin-right:6px;margin-top:16px}
.map{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.map img{height:auto}
@media (max-width:900px){
  .bat{grid-template-columns:1fr;gap:14px}
  .barrow{padding:6px 0}
  .barrow:after{display:none}
  .visit-in{grid-template-columns:1fr;gap:24px}
  .visit-in .btn{display:block;margin-right:0}
}

/* 10/5 3차: 건전지 세 단계(타고난 체질 → 닳아 감 → 다시 채움) */
.bat{grid-template-columns:1fr 36px 1fr 36px 1fr;gap:10px}
.bcard{grid-template-columns:64px 1fr;grid-template-rows:auto 1fr}
.bcard .bsvg{width:64px}
.bt em{font-style:normal;display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--deep);color:#fff;font-size:13px;align-items:center;justify-content:center;margin-right:8px}
.bx{font-size:14px;color:var(--sub);align-self:center}
.bcard.fill{border-color:#5f8a73;box-shadow:0 0 0 1px #5f8a73 inset}
.barr{align-self:center;justify-self:center;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:14px solid #b9ae9e}
@media (max-width:900px){.bat{grid-template-columns:1fr}.barr{transform:rotate(90deg)}}

/* 10/12 상세페이지(원장님 구성: 감성 문구 → 취약성 → 치료 → 증상 체크 → Q&A) */
.intro p{font-family:"Noto Serif KR",serif;font-size:clamp(16px,1.6vw,18px);color:var(--ink);line-height:1.9}
.intro p+p{margin-top:6px}
.vq{font-family:"Noto Serif KR",serif;font-size:20px;color:var(--accent);margin:-4px 0 14px}
.chkbox{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 24px 18px;margin-top:22px;max-width:860px}
.chkbox h3{margin:18px 0 4px;color:var(--deep)}
.chk{list-style:none}
.chk li{border-bottom:1px solid var(--line)}
.chk label{display:flex;gap:14px;align-items:flex-start;padding:13px 0;cursor:pointer}
.chk input{flex-shrink:0;width:20px;height:20px;margin-top:4px;accent-color:var(--accent)}
.chk b{display:block;font-weight:600}
.chk em{display:block;font-style:normal;color:var(--sub);font-size:15px;margin-top:2px}
.chk input:checked+span b{color:var(--accent)}
.chk-count{margin-top:14px;color:var(--sub);font-size:15px}
.chk-count b{color:var(--accent);font-size:18px}
.signs-note{margin-top:22px;color:var(--sub)}
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;padding:16px 28px 16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;color:var(--accent);font-weight:400}
.faq details[open] summary:after{content:"−"}
.faq details p{color:var(--sub);font-size:16px;padding-bottom:6px}
.faq details p:last-child{padding-bottom:18px}
.tpts{list-style:none;margin:16px 0 8px}
.tpts li{background:var(--accent-soft);border-radius:6px;padding:14px 18px;margin-bottom:10px;color:var(--sub);font-size:15px}
.tpts b{display:block;color:var(--accent);font-size:17px;margin-bottom:2px}

/* 10/18 상세페이지 확장: 진료실 이야기 · 원리 카드 · 취약성 형성 · 그림 두 장 · 치료 세 기둥 · 진료 흐름 · 먼저 확인 · 생활 */
.chero .btn{display:inline-block;margin-top:22px;padding:12px 22px}
h3.sub{font-family:"Noto Serif KR",serif;font-size:22px;margin:34px 0 8px}
.scenes{background:var(--paper);border-bottom:1px solid var(--line)}
.sc{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:8px}
.sc li{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:22px 20px 18px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.sc q{font-family:"Noto Serif KR",serif;font-size:17px;line-height:1.65;quotes:"“" "”"}
.sc span{font-size:13px;color:var(--accent);font-weight:600}
.mech{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 30px}
.mech li{background:var(--paper);border-radius:10px;padding:22px 22px 20px;border-top:4px solid var(--deep)}
.mech li.m1{border-top-color:#3d8a7a}.mech li.m2{border-top-color:var(--accent)}
.mech em{font-style:normal;font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.04em}
.mech b{display:block;font-size:19px;margin:2px 0 8px}
.mech p{font-size:15px;color:var(--sub);line-height:1.7}
.origin{background:var(--paper);border-radius:10px;padding:26px 26px 22px;margin:30px 0 8px;max-width:960px}
.otitle{font-weight:700;margin-bottom:14px}
.origin ul{list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.origin li{flex:1 1 180px;background:var(--accent-soft);border-radius:8px;padding:14px 16px}
.origin li b{display:block;color:var(--accent)}
.origin li span{font-size:14px;color:var(--sub)}
.origin i{font-style:normal;font-size:22px;color:var(--accent);font-weight:700}
.onote{font-size:15px;color:var(--sub);margin-top:14px}
.figs{display:grid;gap:18px;margin-top:30px}
.figs.n2{grid-template-columns:1.78fr 1fr;align-items:start}
.figs figure{background:#eee;border-radius:10px;overflow:hidden}
.figs img{object-fit:contain}
.treat{grid-template-columns:1.15fr .85fr;align-items:center}
.treat figure{aspect-ratio:1/1;background:#eee;border-radius:10px;overflow:hidden}
.treat figure img{object-fit:contain}
.pillars{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px}
.pillars li{background:var(--tint);border-radius:10px;padding:22px}
.pillars b{display:block;font-size:18px;margin-bottom:6px}
.pillars p{font-size:15px;color:var(--sub)}
.flow.row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
.flow.row li{border:1px solid var(--line);border-radius:10px;padding:56px 18px 18px;background:var(--paper)}
.flow.row li:before{left:18px;top:16px}
.flag{background:var(--paper);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:18px 22px;margin-top:28px;max-width:860px}
.flag b{display:block;margin-bottom:4px}
.flag p{font-size:15px;color:var(--sub)}
.life{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:10px}
.life li{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--paper)}
.life b{display:block;margin-bottom:6px}
.life p{font-size:15px;color:var(--sub)}
@media (max-width:900px){
  .mech,.figs.n2,.treat,.flow.row{grid-template-columns:1fr}
  .origin i{display:none}
  .sc{grid-template-columns:1fr}
}
@media print{
  .chero .btn,.fab,.top nav{display:none}
  body{font-size:14px}
  section{padding:28px 0}
  .chero figure{max-height:340px;overflow:hidden}
  .mech li,.sc li,.pillars li,.life li,.flow.row li,.figs figure,.origin,.flag,.faq details,.chk li{break-inside:avoid}
  h2,h3{break-after:avoid}
}

/* ── 회원(카카오 로그인) 10/20 ── */
.top .login{font-size:14px;text-decoration:none;color:var(--sub);border:1px solid var(--line);border-radius:6px;padding:5px 12px;white-space:nowrap}
.top .login:hover{color:var(--ink);border-color:var(--ink)}
.member section{padding:64px 0 88px}
.wrap.narrow{max-width:620px}
.member h1{font-family:"Noto Serif KR",serif;font-size:30px;line-height:1.4;margin-bottom:14px}
.member h2{font-size:19px;margin:34px 0 10px}
.member .lead{color:var(--sub);margin-bottom:26px}
.small{font-size:14px}
.msg{background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:12px 16px;margin-bottom:18px;font-size:15px}
.kakao{display:flex;align-items:center;justify-content:center;gap:8px;background:#FEE500;color:rgba(0,0,0,.85);font-weight:600;font-size:16px;text-decoration:none;border-radius:12px;height:52px;max-width:380px}
.kakao:hover{filter:brightness(.97)}
.mfeat{list-style:none;margin:32px 0 22px;display:grid;gap:12px}
.mfeat li{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.mfeat p{font-size:15px;color:var(--sub);margin-top:2px}
.agree{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:20px 22px}
.agree[hidden]{display:none}
.agree label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.agree input{width:20px;height:20px;margin-top:4px;accent-color:var(--accent);flex:none}
.agree .all{font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.agree ul{list-style:none}
.agree li{padding:10px 0;border-bottom:1px solid var(--line)}
.agree li em{font-style:normal;font-size:12px;font-weight:700;border-radius:4px;padding:1px 6px;margin-right:8px}
.agree em.req{background:var(--accent);color:#fff}
.agree em.opt{background:var(--tint);color:var(--sub)}
.agree details{margin:6px 0 0 30px;font-size:14px;color:var(--sub)}
.agree summary{cursor:pointer;color:var(--sub)}
.agree .btn{width:100%;border:0;font-size:16px;cursor:pointer;margin-top:18px}
.agree .btn:disabled,.mybtns .btn:disabled{opacity:.6}
.ptable{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:15px}
.ptable th,.ptable td{border-top:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.ptable th{width:34%;font-weight:600;color:var(--sub);background:var(--tint)}
.doc p{margin-bottom:10px;font-size:16px}
.switch{display:flex;gap:10px;align-items:center;cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--accent)}
.mychecks{list-style:none;margin:16px 0 10px}
.mychecks li{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:12px 16px;margin-bottom:8px}
.mychecks li span{color:var(--sub);font-size:13px;margin-left:8px}
.mychecks li p{font-size:14px;color:var(--sub)}
.mybtns{display:flex;gap:10px;margin-top:34px}
.mybtns .btn{flex:1;cursor:pointer;font-size:15px;margin:0}
.btn.danger{color:var(--accent);border-color:var(--accent)}
.chk-save{margin-top:14px;font-size:15px}
.chk-save .btn{display:inline-block;cursor:pointer;margin:0}
.chk-save .save-msg{color:var(--accent);margin-top:6px}
@media (max-width:760px){.top .login{padding:4px 9px;font-size:13px}.member h1{font-size:25px}.ptable th{width:38%}}
@media print{.top .login,.chk-save{display:none}}

.kakao[hidden]{display:none}
@media (max-width:760px){.top .wrap{gap:12px}.top .tel{white-space:nowrap;font-size:14px}}

/* ── 10/19 원장 「들어가면 어디로 나와야 할지 모르겠다」 ⇒ 하위 페이지마다 첫 화면 버튼 ── */
.homefab{position:fixed;left:16px;bottom:16px;z-index:30;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;
  padding:11px 18px;border-radius:30px;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.homefab:before{content:"←";margin-right:6px;color:var(--accent)}
.homefab:hover{border-color:var(--accent)}
@media print{.homefab{display:none}}
/* 불안장애의 여러 모습 */
.types{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0 18px}
.types li{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.types li:first-child{border-color:var(--accent);background:var(--accent-soft)}
.types b{display:block;font-size:17px;margin-bottom:6px}
.types p{font-size:15px;color:var(--sub)}
.types a{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--accent)}
.types li:first-child{grid-column:1/-1}
.types li:first-child p{font-size:16px;color:var(--ink)}
.kmap{width:100%;height:340px;border-radius:8px;border:1px solid var(--line)}
.mapbox a.map[hidden]{display:none}
@media print{.kmap{display:none}}

/* 10/25 증상 상세(원장식: 묶음 → 기전 한 줄 → 증상별 풀이) */
.sd{display:grid;gap:18px;margin:22px 0 10px}
.sd-group{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px 24px}
.sd-group h3{font-size:19px;margin:0 0 6px}
.sd-mech{font-size:14.5px;color:var(--accent);margin:0 0 14px;line-height:1.6}
.sd-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sd-list li{border-top:1px solid var(--line);padding-top:12px}
.sd-list b{display:block;font-size:16.5px;margin-bottom:4px}
.sd-list p{margin:0;font-size:15px;line-height:1.75;color:var(--ink,#222)}
.sd-more{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--accent);text-decoration:none}
.sd-more:hover{text-decoration:underline}
.sd-end{margin:18px 0 34px;padding:16px 20px;border-left:4px solid var(--accent);background:var(--accent-soft);font-weight:600;line-height:1.7}
@media (max-width:640px){.sd-group{padding:18px 16px}}

/* 10/25 치료 후기·온라인 상담실 */
.gate{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px 24px;margin:18px 0}
.gate p{margin:0 0 8px}.gate .btn{margin-top:6px}
.rv-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.rv-filter button{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;background:var(--paper)}
.rv-filter button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rv-list,.cs-list{list-style:none;margin:12px 0 30px;padding:0;display:grid;gap:10px}
.rv-list li,.cs-list li{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 18px}
.rv-list summary,.cs-list summary{cursor:pointer;font-weight:600;line-height:1.6}
.rv-list summary em,.cs-list summary em{font-style:normal;font-size:12.5px;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:1px 6px;margin-right:8px;vertical-align:2px}
.rv-list details p,.cs-q p,.cs-a p{font-size:15.5px;margin:10px 0 0}
.cs-meta{display:block;font-weight:400;font-size:13px;color:var(--sub);margin-top:2px}
.cs-a{margin-top:14px;padding:12px 16px;background:var(--accent-soft);border-radius:6px}
.cs-a b{font-size:14px;color:var(--accent)}
.cs-write{margin:20px 0 34px}
.fld{display:block;margin:0 0 14px}.fld span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.chk1{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;font-size:14.5px;line-height:1.6}
.chk1 input{margin-top:5px}
.chk1 em.req{font-style:normal;color:var(--accent);font-weight:700;margin-right:6px}
.btn.small{font-size:14px;padding:7px 14px;margin-top:12px}
.cs-list.admin textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:6px}
.cs-list.admin li.wait{border-color:var(--accent)}
.ad-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ── 10/26 원장 개편: 줄 세 개 메뉴 · 메인 문구 넘김 · 질환 이름만 · 치료 후기 · 인사말 · 상세 「뇌에서는」 ── */
.burger{display:none;background:none;border:0;width:40px;height:40px;padding:9px 8px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.top.open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.top.open .burger span:nth-child(2){opacity:0}
.top.open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media (max-width:900px){
  .burger{display:flex}
  .top.open nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:64px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.08);padding:6px 16px 12px}
  .top.open nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
  .top.open nav a:last-child{border-bottom:0}
}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s}
.slide.on{opacity:1;visibility:visible}
.hero-h{font-family:"Noto Serif KR",serif;font-weight:700;letter-spacing:-.02em;line-height:1.35;font-size:clamp(32px,4.4vw,50px);margin-bottom:22px}
.dots{display:flex;gap:8px;margin-top:26px}
.dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0}
.dot.on{background:var(--accent);width:24px;border-radius:5px}
.tiles.names{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.tiles.names .tile{padding:14px 16px;font-size:17px;font-weight:600;flex-direction:row;justify-content:space-between;align-items:center}
.tiles.names .tile::after{content:"→";margin:0}
.reviews-cta{text-align:center}
.reviews-cta .btn{display:inline-block;min-width:240px;margin-top:18px}
.btn.off{cursor:default;color:var(--sub)}
.notes .more{display:inline-block;margin-top:20px}
.visit .hours{max-width:360px;margin-top:18px}
.greet-in{max-width:760px}
.greet h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:30px}
.greet-body p{font-size:17.5px;line-height:1.95}
.greet-body p+p{margin-top:18px}
.greet-sign{margin-top:36px;text-align:right;color:var(--sub)}
.greet-sign b{color:var(--ink);font-family:"Noto Serif KR",serif;font-size:20px;margin-left:6px}
.brain-h{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.chero .fig-hero{background:#fff;aspect-ratio:auto}
.chero .fig-hero img{object-fit:contain;height:auto}
@media (max-width:900px){.tiles.names{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
.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}
.dots{align-items:center}
.pause{margin-left:8px;background:none;border:1px solid var(--line);border-radius:12px;font-size:12px;color:var(--sub);padding:1px 9px;cursor:pointer}
@media print{.pause{display:none}}

/* ── 10/27 대표 「허접하다 · 디자인 별로 · 화살표 없어 보인다 · 삼선 메뉴 · 원장님 잘나온 사진」 개편 ── */
:root{--deep:#1f2b27;--gold:#b9975b}
body{font-size:17px}
.kicker{font-size:12.5px;letter-spacing:.32em;color:var(--gold);font-weight:600;margin-bottom:10px}
section{padding:110px 0}
h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:28px}

/* 상단: 로고 · 전화 · 줄 세 개(PC 도 같다) */
.top{background:rgba(251,248,243,.92)}
.top .wrap{height:72px;gap:22px}
.top .tel{margin-left:auto;font-size:15px;letter-spacing:.02em}
.burger{display:flex;width:46px;height:46px;padding:13px 11px;border:1px solid var(--line);border-radius:50%;background:var(--paper)}
.burger span{height:1.6px}
.top.open .burger span:nth-child(1){transform:translateY(8.6px) rotate(45deg)}
.top.open .burger span:nth-child(3){transform:translateY(-8.6px) rotate(-45deg)}
.top nav.menu{display:block;position:fixed;left:0;right:0;top:72px;bottom:0;background:var(--deep);color:#e9ece8;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;overflow-y:auto;margin:0;padding:0}
.top.open nav.menu{opacity:1;visibility:visible;transform:none}
.menu-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:56px;padding-top:64px;padding-bottom:64px}
.menu .mh{font-size:12.5px;letter-spacing:.3em;color:var(--gold);margin-bottom:18px;font-weight:600}
.menu .mlist{list-style:none}
.top nav.menu a{color:#e9ece8;text-decoration:none;border:0;padding:0}
.menu .mlist li{border-bottom:1px solid rgba(255,255,255,.1)}
.menu .mlist a{display:block;padding:12px 0;font-size:18px}
.menu .mlist.big a{font-family:"Noto Serif KR",serif;font-size:24px;padding:11px 0}
.menu .mlist a:hover{color:#fff;padding-left:6px;transition:padding .15s}
.top nav.menu .mtel{font-family:"Noto Serif KR",serif;font-size:30px;color:#fff;display:block;margin-bottom:18px}
.menu .hours{max-width:300px}
.menu .hours th{color:#9fa8a3}.menu .hours td{color:#e9ece8}
.menu .maddr{font-size:14.5px;color:#b9c0bb;margin-top:10px}
body.menu-open{overflow:hidden}

/* 첫 화면: 사진 가득 */
.hero.full{position:relative;padding:0;min-height:min(88vh,820px);display:flex;align-items:center;overflow:hidden;background:#2a2622;color:#fff}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.hero.full:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,20,18,.86) 0%,rgba(22,20,18,.62) 38%,rgba(22,20,18,.08) 72%,rgba(22,20,18,0) 100%);z-index:1}
.hero.full .wrap{position:relative;z-index:2;width:100%}
.hero.full .hero-in{display:block}
.hero.full .hero-txt{max-width:560px}
.hero.full .eyebrow{color:var(--gold);letter-spacing:.12em}
.hero.full .hero-h{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1.3}
.hero.full .hero-sub{color:rgba(255,255,255,.86)}
.hero.full .dot{background:rgba(255,255,255,.35)}
.hero.full .dot.on{background:var(--gold)}
.hero.full .pause{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.35)}
.hero-cta{display:inline-block;margin-top:34px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.6);padding:13px 28px;border-radius:999px;font-size:15px;letter-spacing:.04em}
.hero-cta:hover{background:#fff;color:var(--ink)}

/* 진료과목: 번호 카드(화살표 없음) */
.pick{background:var(--bg);border:0}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.ccard{display:flex;flex-direction:column;min-height:220px;padding:30px 28px 28px;background:var(--paper);text-decoration:none;color:var(--ink);transition:background .2s,color .2s}
.ccard em{font-style:normal;font-family:"Noto Serif KR",serif;color:var(--gold);font-size:15px;letter-spacing:.08em}
.ccard b{font-family:"Noto Serif KR",serif;font-size:27px;font-weight:700;margin:auto 0 10px;letter-spacing:-.02em}
.ccard span{font-size:14.5px;color:var(--sub);line-height:1.65}
.ccard:hover{background:var(--deep);color:#fff}
.ccard:hover span{color:#c7cdc9}
.ccard.cta-card{background:var(--deep);color:#fff}
.ccard.cta-card b{font-size:24px}
.ccard.cta-card span{color:#c7cdc9}
.ccard.cta-card:hover{background:#2c3b36}

/* 치료 후기 띠 */
.reviews-cta{background:var(--tint);border:0}
.reviews-cta .btn{border-radius:999px}

/* 칼럼 */
.notes{background:var(--paper);border:0}
.ngrid{gap:40px 32px}
.nhead{font-family:"Noto Serif KR",serif;font-size:20px;border-bottom:1px solid var(--ink)}
.ngrid li{font-size:14.5px;padding:9px 0}

.visit{background:var(--bg)}
.btn{border-radius:999px}
.foot{background:var(--deep)}

@media (max-width:900px){
  section{padding:72px 0}
  .top .wrap{height:62px}
  .top nav.menu{top:62px}
  .menu-in{grid-template-columns:1fr;gap:34px;padding-top:30px}
  .menu .mlist.big a{font-size:21px}
  .hero.full{min-height:auto;align-items:flex-end;padding:56vw 0 44px}
  .hero-bg{object-position:70% 20%}
  .hero.full:before{background:linear-gradient(180deg,rgba(22,20,18,0) 20%,rgba(22,20,18,.55) 55%,rgba(22,20,18,.9) 100%)}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .ccard{min-height:170px;padding:22px 20px}
  .ccard b{font-size:22px}
}
@media (max-width:420px){.ccard span{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.top nav.menu{transition:none}}
@media print{.top nav.menu,.burger{display:none}}
/* backdrop-filter 가 있으면 position:fixed 메뉴가 header 안에 갇혀 높이 0 이 된다(10/27 확인) ⇒ 열릴 때 끈다 */
.top.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
.ccard span{min-height:3.3em}
.ccard b{margin:auto 0 10px}
/* .top .wrap(가로 줄·높이 72) 규칙이 메뉴 안 .wrap 에도 걸렸다 ⇒ 메뉴는 따로 */
.top .menu-in{display:grid;height:auto;align-items:start;gap:56px}
@media (max-width:900px){
  .top .menu-in{grid-template-columns:1fr;gap:34px}
  /* 휴대폰: 사진 위 · 글 아래(얼굴 위에 글씨가 얹히지 않게) */
  .hero.full{display:block;padding:0;background:var(--deep)}
  .hero.full .hero-bg{position:static;height:auto;aspect-ratio:4/3;object-position:62% 25%}
  .hero.full:before{display:none}
  .hero.full .wrap{padding-top:30px;padding-bottom:44px}
}
.top nav.menu .mlist a{padding:13px 0}
.top nav.menu .mlist.big a{padding:11px 0}
body.menu-open .fab,body.menu-open .homefab{display:none}  /* 10/27 Codex: 휴대폰 메뉴 위로 전화·첫 화면 버튼이 뜨던 것 */

/* 10/28 관리자 화면(방문자·회원) */
.st-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 28px}
.st-card{background:#fff;border:1px solid rgba(31,43,39,.12);border-radius:14px;padding:16px 18px}
.st-card span{display:block;font-size:13px;color:#6b726f}
.st-card b{display:block;font-size:26px;margin-top:4px;color:#1f2b27}
.st-bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding:8px 0;border-bottom:1px solid rgba(31,43,39,.15);margin-bottom:16px}
.st-bars i{flex:1;background:#b9975b;border-radius:3px 3px 0 0;min-height:2px}
.st-table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:14px}
.st-table th,.st-table td{padding:9px 8px;border-bottom:1px solid rgba(31,43,39,.1);text-align:left}
.st-table th{color:#6b726f;font-weight:600}
@media (max-width:640px){.st-cards{grid-template-columns:repeat(2,1fr)}.st-card b{font-size:22px}}

/* 10/28 머리 가운데 문구(대표 1번 선택) · 전화 앞 T. */
.top .top-copy{flex:1;text-align:center;margin:0;font-family:"Noto Serif KR",serif;font-size:15px;letter-spacing:.04em;color:#4a524f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .top-copy + .tel{margin-left:0}
.top .tel em{font-style:normal;font-weight:600;color:#b9975b;margin-right:2px}
@media (max-width:900px){.top .top-copy{display:none}.top .top-copy + .tel{margin-left:auto}}
/* 10/28 카드에 설명 줄을 뺐으니 높이를 줄인다 */
.ccard{min-height:150px}
@media (max-width:640px){.ccard{min-height:118px}}
@media (max-width:640px){.ccard.cta-card b{font-size:18px;white-space:nowrap}}

/* 10/28 네이버 로그인 버튼(네이버 브랜드 녹색) */
.naver{display:flex;align-items:center;justify-content:center;gap:8px;background:#03C75A;color:#fff;font-weight:600;font-size:16px;text-decoration:none;border-radius:12px;height:52px;max-width:380px;margin-top:10px}
.naver[hidden]{display:none}

/* 10/28 가입 화면 칸 · 관리자 표 가로 스크롤 */
.jfields{display:grid;gap:14px;margin:0 0 22px}
.jfields>label,.jfields fieldset{display:grid;gap:6px;font-weight:600;border:0;padding:0;margin:0}
.jfields input[type=text],.jfields input[type=tel]{height:48px;border:1px solid rgba(31,43,39,.25);border-radius:10px;padding:0 14px;font-size:16px;font-weight:400}
.jfields legend{margin-bottom:6px}
.jfields .rad{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-weight:400}
.jfields em{font-style:normal;font-size:12px;margin-left:6px;color:#b9975b}
.st-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-scroll .st-table{min-width:760px}

/* 10/28 가입 칸 모양 바로잡기(.agree 안 label·em 규칙을 물려받아 찌그러졌다) */
.agree .jfields{display:grid;gap:16px;margin:0 0 24px}
.agree .jfields .jf{display:block;border:0;padding:0;margin:0}
.agree .jfields .jl{display:block;font-weight:600;margin:0 0 6px;font-size:15px}
.agree .jfields .jl i{font-style:normal;font-size:12px;font-weight:600;color:#fff;background:#9b2a52;border-radius:4px;padding:1px 6px;margin-left:6px}
.agree .jfields .jl i.o{background:#efe9df;color:#6b726f}
.agree .jfields input[type=text],.agree .jfields input[type=tel]{display:block;width:100%;box-sizing:border-box;height:48px;border:1px solid rgba(31,43,39,.25);border-radius:10px;padding:0 14px;font-size:16px;font-weight:400;background:#fff}
.agree .jfields .rad{display:inline-flex;align-items:center;gap:6px;margin:4px 18px 0 0;font-weight:400}
.agree .jfields .rad input{width:auto;height:auto}

/* 10/28 휴대전화 인증 줄 */
.agree .jfields .jrow{display:flex;gap:8px;align-items:center}
.agree .jfields .jrow input{flex:1;min-width:0}
.agree .jfields .jrow .btn{white-space:nowrap;height:48px}
.agree .jfields #jf-smsmsg{margin:6px 0 0}