/* ==========================================================================
   정국영한의원 — v4 "바른 치료" (claude.ai/design 프로젝트 정국영한의원.dc.html 이식)
   크림(#F4F4ED) × 다크 그린(#1C261F/#0F1712) × 세이지(#9CC48A/#4E7A44) · 라인 그리드
   히어로 자동 슬라이더 + Q&A 탭 + 의토리 브랜드 스토리. 부모 clinic-base CSS는
   dequeue — 랜딩 + 블로그(리스팅/상세) 전부 여기서 커버.
   ========================================================================== */
:root{
  --cream:#F4F4ED;
  --paper:#FFFFFF;
  --paper2:#FDFCF8;
  --ink:#212B23;
  --body-c:#3A443C;
  --body2:#5C665D;
  --mut:#6B756C;
  --mut2:#79837A;
  --mut3:#A3ACA4;
  --line:rgba(33,43,35,.14);
  --line-soft:rgba(33,43,35,.1);
  --dark:#1C261F;
  --darkest:#0F1712;
  --dline:rgba(242,238,227,.18);
  --dline2:rgba(242,238,227,.12);
  --sage:#9CC48A;
  --sage-hi:#DBEBD1;
  --sage-dim:rgba(156,196,138,.16);
  --green:#4E7A44;
  --d-text:#B7C1B8;
  --d-mut:#9AA79C;
  --d-sub:#CDD6CE;
  --parch:#F2EEE3;
  /* 브라스 골드 — 세이지(브랜드 기본)와 역할이 다른 '전문성' 액센트.
     전문 특화 진료 배지에만 절제해서 씁니다. 남발하면 두 액센트가 서로를 죽입니다.
     다크그린 배경에서 충분히 밝고, 노랗게 뜨지 않도록 채도를 낮춘 톤. */
  --gold:#C9A961;
  --gold-hi:#E3CB96;
  --gold-line:rgba(201,169,97,.34);
  --gold-dim:rgba(201,169,97,.12);
  --sans:"Pretendard Variable",Pretendard,'Apple SD Gothic Neo','Malgun Gothic',-apple-system,sans-serif;
  --serif:'Noto Serif KR',serif;
  --wrap:1080px;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--body-c);background:var(--cream);
  line-height:1.7;letter-spacing:-.008em;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s,background .2s,border-color .2s}
img,svg{display:block;max-width:100%}
main ul,main ol,#hdr ul,.site-foot ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
::selection{background:var(--dark);color:var(--parch)}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{position:relative}
section[id],footer[id]{scroll-margin-top:98px}
.sec-pad{padding:clamp(72px,8.5vw,110px) 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* 섹션 공통 헤딩 */
.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px}
.sec-title{font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);font-weight:600;
  letter-spacing:-.005em;line-height:1.42;color:var(--ink)}
.sec-desc{margin-top:14px;font-size:15px;color:var(--mut);max-width:560px}
.on-dark .eyebrow{color:var(--sage)}
.on-dark .sec-title{color:var(--parch)}
.on-dark .sec-desc{color:var(--d-mut)}

/* 버튼 — 직각 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14.5px;font-weight:700;letter-spacing:.01em;padding:15px 28px;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-dark{background:var(--dark);color:var(--parch)}
.btn-dark:hover{background:#37473B;color:var(--parch)}
.btn-sage{background:var(--sage);color:var(--dark)}
.btn-sage:hover{background:var(--sage-hi);color:var(--dark)}
.btn-ghostd{border:1px solid rgba(242,238,227,.35);color:var(--parch);font-weight:600}
.btn-ghostd:hover{border-color:var(--parch);color:var(--parch)}
.btn-line{border:1px solid rgba(33,43,35,.3);color:var(--ink);font-weight:600;font-size:13.5px;padding:12px 24px;display:inline-block}
.btn-line:hover{border-color:var(--ink);background:var(--paper2);color:var(--ink)}

/* ============================================================
   NAV (스티키 다크)
   ============================================================ */
#hdr{position:sticky;top:0;z-index:100;background:rgba(23,32,26,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--dline2)}
#hdr .nav{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:88px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;min-width:0}
.brand-logo{height:66px;width:auto;filter:brightness(0) invert(1);opacity:.96;transition:opacity .2s}
.brand:hover .brand-logo{opacity:1}
.gnb{display:flex;align-items:center;gap:34px}
.gnb .lk{position:relative;font-size:14.5px;font-weight:500;color:#C6CFC7;padding:6px 0}
.gnb .lk::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--sage);transition:right .25s ease}
.gnb .lk:hover::after{right:0}
.gnb .lk:hover{color:var(--sage)}
.gnb .tel-cta{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sage);color:var(--sage);
  padding:10px 20px;font-size:14px;font-weight:600;letter-spacing:.04em}
.gnb .tel-cta:hover{background:var(--sage);color:var(--dark)}
.gnb .tel-cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   HERO — 자동 슬라이더 + 퀵링크 바
   ============================================================ */
.hero{background:var(--darkest);color:var(--parch);position:relative;overflow:hidden}
/* 구 홈페이지 메인 배너의 병원 실사 흑백 콜라주(main_vs01_bg)를 텍스처로 —
   저해상 원본이라 다크 오버레이를 진하게 깔아 질감만 살림 */
/* ── 히어로 — claude.ai/design 「5b 중앙 정렬 + 비네트」 ────────────
   배경 모자이크를 지우는 대신 **비네트로 중앙에 시선을 모읍니다**.
   덕분에 단일 실사진이 없어도 성립 — 사진 확보 시 배경만 교체하면 그대로 살아납니다. */
.hero-collage{position:absolute;inset:0;pointer-events:none;
  background:url("../img/hero-collage.jpg") center 42%/cover no-repeat;
  filter:grayscale(1) brightness(.6)}
.hero-collage::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 78% at 50% 46%,
    rgba(10,11,8,.94) 0%, rgba(10,11,8,.86) 45%, rgba(10,11,8,.62) 100%)}

.hero-inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:120px 24px 240px;min-height:700px;display:flex;align-items:center;justify-content:center}
.hero-body{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:24px;max-width:780px}

.hero-eyebrow{margin:0;font-size:13.5px;font-weight:600;letter-spacing:.24em;color:var(--gold)}
.hero-title{margin:0;font-family:var(--serif);font-weight:600;color:#F8F4E9;
  letter-spacing:-.025em;line-height:1.16;font-size:clamp(34px,5.6vw,72px);
  text-shadow:0 2px 28px rgba(10,10,7,.9)}
.hero-div{width:56px;height:1px;background:var(--gold)}
.hero-sub{margin:0;font-size:clamp(15px,1.7vw,19px);line-height:1.85;color:#C0BAA8;max-width:620px}
.hero-sub b{color:#EAE5D6;font-weight:600}

.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px}
.hb{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;padding:17px 32px;
  transition:background .25s,border-color .25s,color .25s}
.hb-naver{background:var(--gold);color:#17150D;font-weight:700}
.hb-naver:hover{background:var(--gold-hi);color:#17150D}
.hb-line{border:1px solid rgba(201,169,97,.42);background:rgba(14,14,9,.55);
  color:#E6E0CF;font-weight:500}
.hb-line:hover{border-color:var(--gold);color:#F6F2E6}
.hb.is-soon{cursor:default;color:#A9A392}
.hb.is-soon:hover{border-color:rgba(201,169,97,.42);color:#A9A392}
.hb em{font-style:normal;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;
  background:rgba(201,169,97,.2);color:var(--gold)}

/* 슬라이더 컨트롤 — 5b 는 정적 시안이지만 기존 슬라이더를 유지합니다.
   중앙 정렬 히어로라 컨트롤도 중앙, 신뢰 지표 바 바로 위. */
.hero-ctrl{position:absolute;z-index:1;left:0;right:0;bottom:96px;
  display:flex;align-items:center;justify-content:center;gap:14px}
.hero-ctrl .no{font-family:var(--serif);font-size:13.5px;letter-spacing:.1em;color:var(--gold)}
.hero-ctrl .no i{font-style:normal;color:rgba(242,238,227,.4)}
.hero-ctrl .segs{display:flex;gap:7px}
.hero-ctrl .segs span{width:32px;height:2px;background:rgba(242,238,227,.24);transition:background .3s}
.hero-ctrl .segs span.on{background:var(--gold)}
.hero-ctrl button{width:32px;height:32px;border:1px solid rgba(242,238,227,.2);color:var(--parch);
  font-size:14px;line-height:1;background:rgba(10,11,8,.5);
  transition:border-color .25s,color .25s}
.hero-ctrl button:hover{border-color:var(--gold);color:var(--gold)}

/* 하단 신뢰 지표 바 */
.hero-facts{position:absolute;z-index:1;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:rgba(10,11,8,.92);border-top:1px solid var(--dline2)}
.hero-facts>div{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:22px 18px;border-right:1px solid var(--dline2);text-align:center}
.hero-facts>div:last-child{border-right:0}
.hero-facts b{font-family:var(--serif);font-size:clamp(15px,1.6vw,20px);font-weight:600;
  color:var(--gold);white-space:nowrap}
.hero-facts span{font-size:13.5px;color:var(--d-mut)}

@media (max-width:900px){
  .hero-inner{padding:92px 20px 226px;min-height:560px}
  .hero-ctrl{bottom:104px;gap:10px}
  .hero-ctrl button{width:29px;height:29px}
  .hero-body{gap:18px}
  .hero-cta .hb{padding:14px 22px;font-size:14px}
  .hero-facts>div{flex-direction:column;gap:4px;padding:16px 10px}
  .hero-facts span{font-size:12px}
}
@media (max-width:560px){
  .hero-inner{padding-bottom:260px}
  .hero-cta{gap:8px;width:100%}
  .hero-cta .hb{flex:1 1 100%;justify-content:center}
  .hero-ctrl{bottom:172px}
  .hero-ctrl .segs span{width:24px}
  .hero-facts{grid-template-columns:1fr;}
  .hero-facts>div{flex-direction:row;gap:10px;border-right:0;
    border-bottom:1px solid var(--dline2);padding:12px 14px}
  .hero-facts>div:last-child{border-bottom:0}
}

/* ============================================================
   Q&A — 다크 탭 섹션
   ============================================================ */
.qa-sec{background:var(--dark);color:var(--parch)}
.qa-sec h2{font-family:var(--serif);font-size:clamp(25px,3.2vw,34px);line-height:1.35;font-weight:600;color:#fff;margin:0 0 14px;max-width:640px}
.qa-sec .lead{font-size:15.5px;line-height:1.8;color:var(--d-mut);margin:0 0 44px;max-width:520px}
.qa-grid{display:grid;grid-template-columns:360px 1fr;align-items:stretch;min-height:340px}
.qa-list{display:flex;flex-direction:column;border-top:1px solid var(--dline)}
.qa-item{display:flex;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--dline);
  cursor:pointer;text-align:left;transition:background .25s;width:100%}
.qa-item .qno{font-family:var(--serif);font-size:13px;color:var(--sage);font-weight:700;flex-shrink:0}
.qa-item .qt{font-size:15.5px;font-weight:600;color:var(--parch);flex:1}
.qa-item .qa-ar{color:var(--sage);font-size:14px}
.qa-item:hover,.qa-item.active{background:var(--sage-dim)}
.qa-panel{padding:44px 48px;display:flex;flex-direction:column;justify-content:space-between;background:var(--paper)}
.qa-panel .al{font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--green);font-weight:700;margin-bottom:16px}
.qa-panel h3{font-family:var(--serif);font-size:clamp(21px,2.4vw,27px);line-height:1.45;font-weight:600;color:var(--ink);margin:0 0 18px;max-width:520px}
.qa-panel .ab{font-size:15.5px;line-height:1.9;color:var(--body2);margin:0;max-width:520px}
.qa-panel .qa-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.qa-fade{transition:opacity .3s ease}
.qa-fade.fading{opacity:0}

/* 플로팅 전화 pill */
/* PC 우측 하단 플로팅 레일 — 전화 · 네이버예약 · 카톡상담 */
.quick-rail{position:fixed;right:24px;bottom:28px;z-index:60;display:flex;flex-direction:column;gap:8px}
.qk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:76px;padding:13px 6px;border-radius:14px;font-size:11.5px;font-weight:700;letter-spacing:-.01em;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(28,38,31,.18);transition:transform .2s,box-shadow .2s,background .2s}
.qk svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qk:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,38,31,.26);color:var(--ink)}
.qk-tel{background:var(--sage);border-color:transparent;color:var(--dark)}
.qk-tel:hover{background:var(--sage-hi);color:var(--dark)}
.qk-naver{background:#03C75A;border-color:transparent;color:#fff}
.qk-naver:hover{background:#02B351;color:#fff}
.qk-kakao{background:#FEE500;border-color:transparent;color:#191600}
.qk-kakao:hover{background:#FFEB33;color:#191600}
.qk-kakao svg{fill:currentColor;stroke:none}
/* 채널 개설 전 — 최종 색상(카카오 옐로)을 그대로 두어 완성 모습을 미리 확인.
   링크만 비활성이고, URL 이 들어오면 hover 반응까지 살아납니다. */
.qk.is-soon{cursor:default}
.qk.is-soon:hover{transform:none;box-shadow:0 6px 20px rgba(28,38,31,.18);background:#FEE500}
.qk.is-soon::after{content:"준비중";position:absolute;top:-5px;right:-5px;
  font-size:9px;font-weight:800;letter-spacing:-.02em;padding:2px 6px;border-radius:999px;
  background:var(--dark);color:var(--parch);box-shadow:0 2px 6px rgba(28,38,31,.3)}
.qk{position:relative}

/* ============================================================
   TREATMENTS — 3×3 라인 그리드 (9과목)
   ============================================================ */
.treat{background:var(--paper);border-top:1px solid var(--line-soft)}
.treat-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(44px,6vw,64px)}
.treat-head .sec-desc{margin-top:0;text-align:right;max-width:340px}
.treat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tcell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 32px;transition:background .25s,box-shadow .25s}
.tcell:hover{box-shadow:inset 0 -2px 0 var(--green)}
.tcell:hover{background:var(--cream)}
.tcell .no{font-family:var(--serif);font-size:13px;color:var(--green);margin-bottom:22px}
.tcell h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:12px}
.tcell p{font-size:13.5px;color:var(--mut2);line-height:1.7}

/* ============================================================
   WHY — 다크 밴드
   ============================================================ */
.why{background:var(--dark)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin:clamp(44px,6vw,64px) 0 clamp(56px,7vw,80px)}
.why-item{border-top:1px solid rgba(156,196,138,.45);padding-top:28px}
.why-item h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--parch);margin-bottom:14px}
.why-item p{font-size:14.5px;line-height:1.85;color:var(--d-text)}
.why-item p b{color:var(--sage-hi);font-weight:500}
/* ── 전문 특화 진료 — claude.ai/design 「1b 증상 진입형 2×2」 이식 ──────
   치료명이 아니라 증상 문장으로 진입시키는 구조.
   시안의 갈색 톤(#232116)은 정국영 팔레트에 맞춰 골드 틴트로 환산. */
.spec-head{display:flex;align-items:center;gap:18px;margin-bottom:40px}
.spec-kick{font-size:12px;letter-spacing:.3em;color:var(--gold);font-weight:600;white-space:nowrap}
.spec-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-line),transparent)}

.spec-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.spec-card{display:flex;flex-direction:column;gap:18px;padding:36px 34px;
  background:linear-gradient(160deg,rgba(201,169,97,.075),rgba(201,169,97,.015) 62%);
  border:1px solid var(--gold-line);color:inherit;
  transition:border-color .3s,transform .3s,background .3s}
a.spec-card:hover{border-color:var(--gold);transform:translateY(-3px);color:inherit;
  background:linear-gradient(160deg,rgba(201,169,97,.13),rgba(201,169,97,.03) 62%)}
.sc-kick{font-size:11.5px;letter-spacing:.22em;color:var(--gold);font-weight:600}
.sc-quote{margin:0;font-family:var(--serif);font-size:clamp(19px,2.1vw,22px);line-height:1.55;
  color:var(--parch);font-weight:500}
.sc-tags{display:flex;flex-wrap:wrap;gap:8px}
.sc-tags span{border:1px solid var(--dline);color:var(--d-mut);font-size:12px;
  padding:6px 12px;border-radius:999px;white-space:nowrap}
.sc-line{height:1px;background:var(--dline2);margin-top:2px}
.sc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto}
.sc-no{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--mut3);margin-bottom:6px}
.sc-name{margin:0;font-family:var(--serif);font-size:clamp(24px,2.9vw,32px);font-weight:600;
  line-height:1.2;color:var(--parch)}
.sc-go{flex:none;font-size:13px;letter-spacing:.08em;color:var(--gold);font-weight:600;
  transition:transform .25s}
a.spec-card:hover .sc-go{transform:translateX(3px)}

@media (max-width:900px){
  .spec-cards{grid-template-columns:1fr;gap:16px}
  .spec-card{padding:28px 24px;gap:15px}
}

/* ============================================================
   DOCTOR
   ============================================================ */
.doctor{background:var(--paper)}
.doctor .wrap{display:grid;grid-template-columns:380px 1fr;gap:clamp(44px,7vw,80px);align-items:start}
.doc-left{position:sticky;top:110px}
.doc-portrait{width:100%;max-width:340px;aspect-ratio:340/430;overflow:hidden;margin-bottom:16px;
  background:linear-gradient(170deg,#FBF8EF 0%,var(--parch) 55%,#E3D9BE 100%)}
.doc-portrait img{width:100%;height:100%;object-fit:contain;object-position:bottom center;padding:26px 22px 0}
.doc-plaque{width:100%;max-width:340px;height:130px;overflow:hidden;position:relative}
.doc-plaque img{width:100%;height:100%;object-fit:cover;object-position:left center}
.doc-plaque span{position:absolute;left:0;bottom:0;background:rgba(28,38,31,.88);color:var(--parch);
  font-size:11px;font-weight:600;padding:6px 12px;letter-spacing:.04em}
.doc-name{font-family:var(--serif);font-size:24px;color:var(--green);font-weight:600;margin:8px 0 36px}
.doc-quote{font-family:var(--serif);font-size:19px;line-height:1.9;color:var(--body-c);margin:0 0 48px;max-width:560px}
.phil{display:flex;flex-direction:column}
.phil li{display:flex;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.phil li:last-child{border-bottom:1px solid var(--line)}
.phil .no{font-family:var(--serif);font-size:14px;color:var(--green);width:24px;flex-shrink:0;padding-top:2px}
.phil b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px}
.phil span{font-size:14px;color:var(--mut2)}
/* 아코디언 (약력·논문) */
.doc-accs{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.acc{flex:1;min-width:260px}
.acc-h{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid rgba(33,43,35,.25);padding:16px 22px;font-size:14px;font-weight:600;color:var(--ink);transition:.2s}
.acc-h small{font-weight:400;color:var(--mut2);font-size:13px;margin-left:6px}
.acc-h .ai{color:var(--green);font-family:var(--serif);font-size:15px;transition:transform .3s}
.acc-h:hover,.acc.open .acc-h{border-color:var(--ink);background:var(--paper2)}
.acc.open .acc-h .ai{transform:rotate(45deg)}
.acc-b{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.3,.7,.3,1)}
.acc-b-in{padding:24px 4px 8px}
.bio-cols{display:grid;grid-template-columns:1fr;gap:20px}
.bio-cols h4{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--green);margin:0 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.bio-cols li{position:relative;padding:4px 0 4px 14px;font-size:13.3px;color:var(--mut);line-height:1.6}
.bio-cols li::before{content:"";position:absolute;left:0;top:14px;width:3px;height:3px;background:var(--green)}
.papers li{position:relative;padding:10px 0 10px 32px;font-size:13.5px;color:var(--mut);line-height:1.65;
  border-bottom:1px dashed var(--line)}
.papers li:last-child{border-bottom:0}
.papers li i{font-style:normal;position:absolute;left:0;top:12px;font-family:var(--serif);font-size:12px;color:var(--green)}
.papers li b{color:var(--ink);font-weight:600}
.papers li small{display:block;font-size:12px;color:var(--mut3)}

/* ============================================================
   STORY — 의토리 브랜드 스토리
   ============================================================ */
.story{background:var(--cream);border-top:1px solid var(--line-soft)}
.story .wrap{display:grid;grid-template-columns:1fr 460px;gap:clamp(44px,7vw,80px);align-items:center}
.story h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);font-weight:600;color:var(--ink);margin:0 0 20px;line-height:1.4}
.story .lead{font-size:15.5px;line-height:1.9;color:var(--body2);margin:0 0 28px;max-width:460px}
.story-rows{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:460px}
.story-rows li{display:flex;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.story-rows .hanja{font-family:var(--serif);font-size:13px;color:var(--green);flex-shrink:0}
.story-rows span+span{font-size:14.5px;color:var(--body-c)}
.story .btn-line{margin-top:32px}
.story-photo{position:relative}
.story-photo .offset{position:absolute;inset:-20px 20px 20px -20px;border:1px solid rgba(78,122,68,.35);pointer-events:none}
.story-photo .ph{position:relative;width:100%;aspect-ratio:460/400;overflow:hidden}
.story-photo .ph img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   TOUR — 4+2 / 2+2+2 모자이크
   ============================================================ */
.tour{background:var(--paper);border-top:1px solid var(--line-soft)}
.tour-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:300px 240px;gap:16px;
  margin-top:clamp(40px,5.5vw,56px)}
.tour-ph{position:relative;overflow:hidden}
.tour-ph:nth-child(1){grid-column:span 4}
.tour-ph:nth-child(n+2){grid-column:span 2}
.tour-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.25,1)}
.tour-ph:hover img{transform:scale(1.04)}
.tour-ph .lab{position:absolute;left:0;bottom:0;background:rgba(28,38,31,.88);color:var(--parch);padding:12px 20px;pointer-events:none}
.tour-ph .lab b{font-size:14px;font-weight:600}
.tour-ph .lab span{font-size:11px;color:var(--sage);margin-left:10px;letter-spacing:.06em}

/* ============================================================
   REVIEWS — 3열 라인 컬럼
   ============================================================ */
.reviews{background:var(--paper);border-top:1px solid var(--line-soft)}
.rev-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,5.5vw,56px)}
.rev-head .sec-desc{margin-top:12px}
.rev-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.rev-card{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:26px;transition:border-color .3s}
.rev-card:hover{border-top-color:var(--green)}
.rev-card blockquote{font-family:var(--serif);font-size:16px;line-height:1.85;color:var(--ink);margin-bottom:24px;flex:1}
.rev-card blockquote a:hover{color:var(--green)}
.rev-card figcaption{font-size:13px;color:var(--mut2);line-height:1.7}
.rev-note{font-size:12px;color:var(--mut3);margin-top:48px}

/* ============================================================
   FAQ — details 라인 리스트
   ============================================================ */
.faq{background:var(--cream)}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:clamp(40px,5.5vw,56px)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:baseline;gap:24px;padding:26px 8px;cursor:pointer;list-style:none;transition:background .2s}
.faq-list summary:hover{background:var(--paper2)}
.faq-list summary .cat{font-size:12px;color:var(--green);letter-spacing:.08em;width:76px;flex-shrink:0}
.faq-list summary .q{font-size:16.5px;font-weight:500;color:var(--ink);flex:1;line-height:1.55}
.faq-list summary .pl{font-family:var(--serif);color:var(--green);transition:transform .3s}
.faq-list details[open] summary .pl{transform:rotate(45deg)}
.faq-list .a{font-size:14.5px;line-height:1.85;color:var(--mut);padding:0 8px 30px 100px;max-width:760px}
.faq-list details[open] .a{animation:faqIn .35s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================
   COLUMN — 의토리 건강칼럼
   ============================================================ */
.column-sec{background:var(--cream);border-top:1px solid var(--line-soft)}
.column-sec .wrap{display:grid;grid-template-columns:1fr 620px;gap:clamp(44px,7vw,80px);align-items:start}
.column-sec h2{font-family:var(--serif);font-size:clamp(25px,3vw,32px);font-weight:600;color:var(--ink);margin:0 0 14px;line-height:1.45}
.col-links{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-bottom:28px}
.col-links a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;
  border-bottom:1px solid var(--line);font-size:14px;color:var(--body-c)}
.col-links a:hover{color:var(--green)}
.col-links .go{color:var(--green)}
.col-card{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center;
  border:1px solid var(--line);padding:24px;background:var(--paper2);transition:border-color .2s}
.col-card:hover{border-color:rgba(78,122,68,.6)}
.col-card .thumb{width:220px;height:160px;overflow:hidden}
.col-card .thumb img{width:100%;height:100%;object-fit:cover}
.col-card .cat{font-size:11px;letter-spacing:.14em;color:var(--green);font-weight:600;margin-bottom:12px}
.col-card h3{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);line-height:1.5;margin-bottom:12px}
.col-card p{font-size:13.5px;line-height:1.75;color:var(--mut2);margin-bottom:16px}
.col-card time{font-size:12.5px;color:var(--mut3)}
.col-empty{border:1px dashed var(--line);padding:44px 24px;text-align:center;color:var(--mut3);background:var(--paper2)}

/* ============================================================
   FOOTER — 다크: 슬로건 + NAP + 진료시간 + 사업자
   ============================================================ */
.site-foot{background:var(--dark);color:var(--d-mut)}
.site-foot .wrap{padding-top:80px;padding-bottom:56px}
.ft-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(36px,6vw,60px);align-items:start;margin-bottom:56px}
.ft-logo{height:52px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:18px}
.ft-brand .b1{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--sage);font-weight:600;margin-bottom:6px}
.ft-brand .b2{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--parch);margin-bottom:24px}
.ft-addr{font-size:14px;line-height:2;color:var(--d-mut)}
.ft-addr b{color:var(--d-text);font-weight:500}
.ft-map{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;color:#C6CFC7;
  border-bottom:1px solid rgba(242,238,227,.3);padding-bottom:3px}
.ft-map:hover{color:var(--sage);border-color:var(--sage)}
.ft-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.ft-hours{min-width:300px}
.ft-hours h4{font-size:12px;letter-spacing:.22em;color:var(--sage);font-weight:600;margin:0 0 16px}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:10px 2px;
  border-bottom:1px solid var(--dline2);font-size:14px}
.hrow .d{color:var(--d-text)}
.hrow .t{font-weight:600;color:var(--parch);font-feature-settings:"tnum"}
.hrow.off .t{color:#C98A7E}
.hrow.lunch .d,.hrow.lunch .t{color:var(--sage)}
.hours-note{margin-top:12px;font-size:12px;color:var(--d-mut)}
.ft-bottom{border-top:1px solid var(--dline2);padding-top:24px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:8px 20px;font-size:12px;color:#6E7A70}

/* 모바일 하단 CTA바 */
#mcta{display:none}

/* ==========================================================================
   BLOG 서브페이지 (인사이트 리스팅/상세) — clinic-base 템플릿 클래스
   ========================================================================== */
.u-container{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.page-head{background:var(--dark);color:var(--parch);padding:72px 0 64px}
.page-head .eyebrow{color:var(--sage);margin-bottom:14px}
.page-head h1,.page-head .sec-title{font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);
  font-weight:600;color:var(--parch);letter-spacing:-.005em;line-height:1.42;margin:0}
.page-head .sec-desc{margin-top:14px;color:var(--d-mut);font-size:15px;line-height:1.7;max-width:640px}
.page-head .post-date{margin-top:12px;font-size:13.5px;color:var(--d-mut)}

.sec{padding:52px 0 96px;background:var(--cream)}

/* 카테고리 필터 칩 — 직각 라인 */
.fchips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px;padding:0;list-style:none}
.fchip{display:inline-flex;align-items:center;font-size:13.5px;font-weight:500;color:var(--mut);
  border:1px solid var(--line);padding:9px 19px;background:transparent;transition:.2s}
.fchip:hover{border-color:var(--green);color:var(--green)}
.fchip.active{background:var(--dark);border-color:var(--dark);color:var(--parch);font-weight:600}

/* 리스팅 행 — 라인 리스트 */
.post-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:132px 1fr auto;gap:26px;align-items:center;
  padding:22px 8px;border-bottom:1px solid var(--line);transition:background .2s}
.post-row:hover{background:var(--paper2)}
.post-row__thumb{width:132px;aspect-ratio:4/3;overflow:hidden;display:block}
.post-row__thumb img{width:100%;height:100%;object-fit:cover}
.post-row__thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px;font-size:12px;font-weight:600;color:var(--green);background:var(--parch)}
.post-row__main{min-width:0}
.post-row__cat{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--green);margin-bottom:9px}
.post-row__title{font-family:var(--serif);font-size:clamp(16px,1.8vw,19px);font-weight:600;color:var(--ink);
  letter-spacing:-.005em;line-height:1.45;margin:0}
.post-row:hover .post-row__title{color:var(--green)}
.post-row__ex{margin-top:7px;font-size:13.5px;color:var(--mut2);line-height:1.65;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.post-row__date{font-size:13px;color:var(--mut3);white-space:nowrap}
.content-empty{padding:60px 0;text-align:center;color:var(--mut3)}

/* 더보기/목록 버튼 (부모 템플릿 btn--outline/btn--lg) */
.more-wrap{margin-top:38px;text-align:center}
.btn--outline{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);
  border:1px solid rgba(33,43,35,.3);padding:13px 30px;transition:.2s}
.btn--outline:hover{border-color:var(--ink);background:var(--paper2)}
.btn--lg{padding:15px 38px;font-size:15px}

/* 단일 글 본문 */
.single .entry{max-width:760px;margin-inline:auto;font-size:16px;line-height:1.9;color:var(--body-c)}
.single .entry p{margin:0 0 1.4em}
.single .entry h2{margin:2.1em 0 .7em;font-family:var(--serif);font-size:clamp(21px,2.4vw,26px);font-weight:600;
  color:var(--ink);letter-spacing:-.005em}
.single .entry h3{margin:1.7em 0 .6em;font-size:clamp(17px,2vw,20px);font-weight:700;color:var(--ink)}
.single .entry img{max-width:100%;height:auto}
.single .entry a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.single .entry blockquote{margin:1.6em 0;padding:20px 26px;border-left:2px solid var(--green);
  background:var(--paper2);color:var(--ink);font-family:var(--serif)}
.single .entry ul,.single .entry ol{margin:0 0 1.4em;padding-left:1.3em}
.single .entry li{margin:.35em 0;list-style:disc}
.single .entry ol li{list-style:decimal}

/* 참고 자료 (post-links) */
.post-refs{max-width:760px;margin:44px auto 0;padding:22px 26px;background:var(--paper2);border:1px solid var(--line)}
.post-refs-title{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--green);text-transform:uppercase;margin:0 0 12px}
.ref-list{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.ref-item a{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut);padding:9px 13px;
  background:transparent;border:1px solid var(--line);transition:.2s;text-decoration:none}
.ref-item a:hover{border-color:var(--green);color:var(--ink)}
.ref-title{font-weight:500;flex:1;min-width:0}
.ref-host{font-size:12px;color:var(--mut3)}
.ref-go{color:var(--green)}

.post-nav{margin-top:44px;text-align:center}

/* WP 어드민바 보정 */
body.admin-bar #hdr{top:32px}

/* ============================================================
   RESPONSIVE ≤ 1023 / ≤ 880
   ============================================================ */
@media (max-width:1023px){
  .qa-grid{grid-template-columns:320px 1fr}
  .doctor .wrap{grid-template-columns:320px 1fr;gap:36px}
  .story .wrap{grid-template-columns:1fr 380px;gap:40px}
  .column-sec .wrap{grid-template-columns:1fr;gap:36px}
}
@media (max-width:880px){
  section[id],footer[id]{scroll-margin-top:66px}
  .sec-pad{padding:64px 0}
  /* NAV — 홈/블로그 링크 축소 유지 */
  #hdr .nav{height:72px}
  .gnb{gap:16px}
  .gnb .tel-cta{padding:8px 14px;font-size:13px}
  .brand-logo{height:52px}
  /* 히어로 */
  .hero-inner{padding:64px 24px 240px;min-height:0}
  /* Q&A 스택 */
  .qa-grid{grid-template-columns:1fr;min-height:0}
  .qa-panel{padding:32px 24px}
  /* 그리드 스택 */
  .treat-head{flex-direction:column;align-items:flex-start;gap:14px}
  .treat-head .sec-desc{text-align:left}
  .treat-grid{grid-template-columns:1fr 1fr}
  .tcell{padding:26px 22px}
  .why-grid{grid-template-columns:1fr;gap:36px}
  .doctor .wrap{grid-template-columns:1fr}
  .doc-left{position:static;max-width:340px;margin:0 auto}
  .doc-accs{flex-direction:column}
  .story .wrap{grid-template-columns:1fr;gap:44px}
  .story-photo{max-width:460px}
  .story-photo .offset{inset:-14px 14px 14px -14px}
  .tour-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:12px}
  .tour-ph:nth-child(1),.tour-ph:nth-child(2),.tour-ph:nth-child(5){grid-column:span 2;height:220px}
  .tour-ph:nth-child(3),.tour-ph:nth-child(4){grid-column:span 1;height:170px}
  .rev-head{flex-direction:column;align-items:flex-start;gap:16px}
  .rev-grid{grid-template-columns:1fr;gap:28px}
  .faq-list summary{flex-wrap:wrap;gap:10px 24px}
  .faq-list summary .cat{width:auto}
  .faq-list summary .q{flex-basis:100%;order:3}
  .faq-list .a{padding-left:8px}
  .col-card{grid-template-columns:1fr;gap:18px}
  .col-card .thumb{width:100%;height:180px}
  .ft-grid{grid-template-columns:1fr}
  .ft-hours{min-width:0}
  .ft-bottom{flex-direction:column}
  /* 플로팅 pill 숨김 + 하단 CTA바 */
  .quick-rail{display:none}
  #mcta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    border-top:1px solid var(--dline)}
  /* 카카오 '준비중'은 <span> 이라 a 전용 규칙을 못 받습니다 — 함께 지정할 것. */
  #mcta a,#mcta>span{display:flex;align-items:center;justify-content:center;gap:8px;
    padding:16px 10px calc(16px + env(safe-area-inset-bottom,0px));font-size:15px;font-weight:700;letter-spacing:.01em}
  #mcta svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #mcta .c-tel{background:var(--sage);color:var(--dark)}
  #mcta .c-naver{background:var(--dark);color:var(--parch)}
  body{padding-bottom:56px}
  /* 블로그 */
  .page-head{padding:52px 0 44px}
  .post-row{grid-template-columns:88px 1fr;gap:14px;padding:16px 4px}
  .post-row__thumb{width:88px}
  .post-row__date{display:none}
  .post-row__ex{-webkit-line-clamp:1}
}
@media (max-width:782px){
  body.admin-bar #hdr{top:46px}
}
@media (max-width:420px){
  .treat-grid{grid-template-columns:1fr}
  .tour-ph:nth-child(3),.tour-ph:nth-child(4){grid-column:span 2;height:200px}
  .gnb .lk{display:none} /* 초소형: 로고+전화만 */
}

/* 진료분야 카드 — 구 홈페이지 상세 링크 어포던스 */
.tcell .t-go{display:inline-flex;margin-top:16px;font-size:12.5px;font-weight:600;color:var(--green);
  opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.tcell:hover .t-go{opacity:1;transform:none}
@media (hover:none){.tcell .t-go{opacity:1;transform:none}}

/* ── 진료분야 상세 — 구 홈페이지 삽입(iframe) ──────────────────────
   부모 clinic-base 의 content.css 에 있던 .embed-frame 규칙을 이 테마는
   dequeue 하므로(디자인 takeover) 여기서 직접 정의합니다. 빠지면 iframe 이
   기본 높이 150px 로 찌그러집니다. */
.embed-frame{display:block;width:100%;height:calc(100vh - 88px);border:0;background:#fff}
@supports (height:100svh){.embed-frame{height:calc(100svh - 88px)}}
@media (max-width:900px){.embed-frame{height:calc(100svh - 64px)}}
.embed-page{padding:0}



/* ── 카카오톡 상담 CTA ────────────────────────────────────────
   채널 개설 전에는 URL 이 비어 있어 "준비 중" 비활성 상태로 자리만 잡습니다
   (클라 요청 — 3버튼 구조를 미리 확정). 어드민에 URL 을 넣으면 자동 활성. */
.btn-kakao{background:#FEE500;color:#191600;font-weight:700}
.btn-kakao:hover{background:#FFEB33;color:#191600}
.btn-kakao.is-soon{background:#FEE500;color:#191600;cursor:default;
  display:inline-flex;align-items:center;gap:9px}
.btn-kakao.is-soon:hover{background:#FEE500;color:#191600}
.btn-kakao.is-soon em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:-.01em;
  padding:3px 8px;border-radius:999px;background:rgba(25,22,0,.16);color:#191600}
#mcta .c-kakao{background:#FEE500;color:#191600}
#mcta .c-kakao svg{fill:#191600;stroke:none}

/* 모바일 하단바 — 카카오는 채널 개설 전에도 자리·색상을 확정해 3열 유지 */
#mcta .c-kakao.is-soon{position:relative;background:#FEE500;color:#191600;opacity:.72}
#mcta .c-kakao.is-soon em{font-style:normal;font-size:9px;font-weight:800;margin-left:4px;
  padding:2px 5px;border-radius:999px;background:rgba(25,22,0,.2);color:#191600}
/* 3열이 되면 폭이 좁아 라벨이 잘림 — 아이콘 축소·여백 압축·줄바꿈 금지 */
#mcta a,#mcta>span{min-width:0;padding-left:6px;padding-right:6px;font-size:13.5px;gap:6px;
  white-space:nowrap;overflow:hidden}
#mcta svg{width:16px;height:16px;flex:none}
@media (max-width:400px){
  #mcta a,#mcta>span{font-size:12.5px;gap:4px}
  #mcta .c-kakao.is-soon em{display:none}
}