/*
Theme Name: 원이비인후과
Theme URI: https://doorweb.net
Author: doorweb
Description: 질환정보 축적형 병원 테마. 질환 페이지 상단은 고정 설명, 하단은 관리자가 추가한 글이 유형별로 자동 수집된다. 클래식 PHP 테마 — 빌드 단계 없음.
Version: 0.12.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: oneent
*/

/* =========================================================
   0. Design Tokens — 이비인후과 톤(딥 네이비블루 + 앰버 포인트)
   ========================================================= */
:root{
  /* 브랜드 포인트 컬러 — 여기 한 곳만 바꾸면 전체 톤이 따라온다 */
  --point:        #173F57;   /* 딥 네이비블루 */
  --point-d:      #102E41;   /* hover · 눌림 */
  --point-dd:     #0B2231;
  --point-l:      #294C60;   /* 밝은 쪽 — 그라데이션 끝 */
  --point-soft:   #E9F0F5;   /* 옅은 배경 틴트 */
  --point-softer: #F4F8FA;
  --point-on-dark:#8FC0DC;   /* 어두운 바탕 위 강조 */

  /* 보조 포인트 — 아이브로우 · CTA 강조 */
  /* 주의 문구용 — 채도를 낮춘 붉은 계열 */
  --warn:         #C2503C;
  --warn-d:       #A63F2D;
  --warn-soft:    #FBF0EE;

  --amber:        #E08800;   /* 흰 배경 3.1:1 — 큰 글자·아이콘 전용 */
  --amber-d:      #C57700;
  --amber-soft:   #FFF4E2;

  /* 예전 이름 유지 — 포팅해 온 규칙들이 이걸 참조한다 */
  --blue:      var(--point);
  --blue-d:    var(--point-d);
  --blue-dd:   var(--point-dd);
  --blue-l:    var(--point-soft);
  --blue-ll:   var(--point-softer);
  --grad:      linear-gradient(100deg,#173F57 0%,#294C60 100%);

  --ink:       #16212B;   /* 제목 */
  --ink-2:     #1F2C38;
  --navy:      #16394E;   /* 푸터 · CTA 바탕 */
  --navy-d:    #0F2836;

  --g700:#3D4A55; --g600:#586773; --g500:#66757F; --g400:#98A5AF;
  --g300:#CBD4DB; --g200:#E3E9ED; --g100:#EFF3F6; --g50:#F7FAFB;

  --bg:#FFFFFF;
  --bg-alt:#F5F8FA;
  --bg-soft:#EAF1F6;
  --line:#E3E9ED;

  --sans:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Outfit",var(--sans);

  --fs-hero:clamp(1.95rem,4.4vw,3.05rem);
  --fs-h2:clamp(1.5rem,3vw,2.15rem);
  --fs-h3:clamp(1.12rem,1.8vw,1.35rem);

  --container:1200px;
  --gutter:clamp(1rem,4vw,2rem);
  --sec-y:clamp(3.2rem,7vw,5.5rem);

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --sh-xs:0 1px 3px rgba(22,33,43,.06);
  --sh-sm:0 4px 16px rgba(22,33,43,.06);
  --sh:0 10px 30px rgba(22,33,43,.08);
  --sh-lg:0 22px 56px rgba(22,33,43,.14);
  --sh-blue:0 12px 28px rgba(23,63,87,.26);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   1. Reset & Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
body{
  margin:0;background:var(--bg);color:var(--g700);
  font-family:var(--sans);font-size:1rem;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:anywhere;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue-d);}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.32;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em;padding-left:1.25em;}
li{margin:.3em 0;}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0;}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px;}
::selection{background:var(--blue);color:#fff;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container--narrow{max-width:880px;}
.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--blue);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0;color:#fff;}

/* =========================================================
   2. 공용 파츠 — 버튼 · 섹션 헤더 · 칩 · 그리드
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.9em 1.7em;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-weight:700;font-size:.97rem;line-height:1.2;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s,color .18s,border-color .18s,box-shadow .18s;
  text-decoration:none!important;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--primary{background:var(--blue);color:#fff;}
.btn--primary:hover{background:var(--blue-d);color:#fff;box-shadow:var(--sh-blue);}
.btn--flame{background:var(--blue);color:#fff;}          /* 구 클래스 호환 */
.btn--flame:hover{background:var(--blue-d);color:#fff;box-shadow:var(--sh-blue);}
.btn--ghost{background:#fff;color:var(--blue-d);border-color:var(--g300);}
.btn--ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn--light{background:#fff;color:var(--blue-d);}
.btn--light:hover{background:var(--blue-l);color:var(--blue-dd);}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn--on-dark:hover{background:#fff;color:var(--blue-d);border-color:#fff;}
.btn--sm{padding:.62em 1.2em;font-size:.88rem;min-height:44px;}
.btn--block{width:100%;}
.btn svg{flex:none;}

.eyebrow{
  display:inline-block;font-family:var(--display);font-size:.8rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 .8rem;
}
.sec-head{margin-bottom:clamp(1.8rem,3.6vw,2.8rem);}
.sec-head--center{text-align:center;}
.sec-title{font-size:var(--fs-h2);margin:0 0 .55rem;color:var(--ink);}
.sec-title em{font-style:normal;color:var(--blue);}
.sec-lede{font-size:1rem;color:var(--g600);margin:0;max-width:60ch;line-height:1.8;}
.sec-head--center .sec-lede{margin-inline:auto;}

.section{padding-block:var(--sec-y);}
.section--alt{background:var(--bg-alt);}
.section--soft{background:var(--bg-soft);}
.section--dark{background:var(--navy);color:#C9D5DD;}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark .sec-lede{color:#9BABB6;}
.section--dark .eyebrow{color:var(--point-on-dark);}

.chip{display:inline-block;padding:.34em .8em;border-radius:var(--r-pill);background:var(--g100);color:var(--g600);font-size:.8rem;font-weight:600;line-height:1.5;}
.chip--flame,.chip--navy{background:var(--blue-l);color:var(--blue-d);}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;}

.grid{display:grid;--grid-gap:clamp(1rem,2.2vw,1.6rem);gap:var(--grid-gap);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
/* 멤버 격자. auto-fit 은 항목이 적으면 남은 자리를 나눠 가져서, 두 명뿐인 지점에서는
   카드가 반 폭까지 부풀었다. 한 칸의 최대치를 1/3 로 묶어 둔다.
   최소값은 180px 로 낮춘다. 220px 로 두면 760~800px 구간에서 상한이 최소값보다 작아져
   minmax 가 뒤집히고, 칸이 220px 로 굳어 남은 공간을 못 채운다. */
@media (min-width:760px){
  .grid--members{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),calc((100% - var(--grid-gap) * 2) / 3)));justify-content:start;}
}

/* =========================================================
   3. 상단 유틸바 · 헤더 · 내비게이션
   ========================================================= */
.topbar{background:var(--navy);color:#9EACA5;font-size:.84rem;}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;}
.topbar__note{display:flex;align-items:center;gap:.4em;margin:0;}
.topbar__right{display:flex;align-items:center;gap:1.1rem;}
.topbar a{color:#C0CDC6;display:inline-flex;align-items:center;gap:.35em;font-weight:600;}
.topbar a:hover{color:#fff;}
.topbar__tel{color:#fff!important;}
@media (max-width:760px){.topbar__note{display:none;}.topbar__inner{justify-content:center;}}

.site-header{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid var(--line);}
/* 블러는 이 레이어가 맡는다 — 헤더 자체에 걸면 fixed 자식(서랍 메뉴)의 기준이
   뷰포트가 아니라 헤더가 되어 서랍이 헤더 박스 안에 갇힌다. */
.site-header__bg{position:absolute;inset:0;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);}
.header-inner{position:relative;display:flex;align-items:center;gap:1.2rem;min-height:76px;}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);flex:none;}
.brand__mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;flex:none;box-shadow:var(--sh-blue);}
.brand__mark--file{width:auto;height:auto;background:none;border-radius:0;box-shadow:none;}
.brand__mark--file img{max-height:44px;width:auto;}
.site-footer .footer-brand img{max-height:38px;width:auto;margin-bottom:.9rem;}
.brand__text b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:800;letter-spacing:.01em;line-height:1.15;text-transform:uppercase;}
.brand__text small{display:block;font-size:.72rem;color:var(--g500);font-weight:600;}

.main-nav{margin-left:auto;display:flex;align-items:center;}
.main-nav .menu{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0;}
.main-nav .menu > li{position:relative;margin:0;}
.main-nav .menu > li > a{display:block;padding:.65rem .9rem;border-radius:9px;color:var(--g700);font-weight:700;font-size:.95rem;}
.main-nav .current-menu-item > a,.main-nav .current_page_item > a,.main-nav .current-menu-ancestor > a{color:var(--blue);background:var(--blue-l);}
.main-nav .sub-menu{list-style:none;margin:0;padding:0;}

/* 데스크톱 드롭다운은 min-width 쿼리 안에 가둔다.
   :hover/:focus-within 규칙이 특이도로 모바일 규칙을 이겨서
   서랍 안 서브메뉴가 화면 밖으로 밀려나던 문제를 원천 차단한다. */
@media (min-width:1101px){
  /* 가로 메뉴 hover도 여기 안에 둔다 — 밖에 두면 특이도가 높아
     서랍 안 링크 hover까지 데스크톱 색으로 물들인다. */
  .main-nav .menu > li > a:hover{color:var(--blue);background:var(--blue-ll);}
  .main-nav .sub-menu{
    position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%) translateY(6px);
    min-width:198px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
    padding:.4rem;opacity:0;visibility:hidden;
    /* 속성을 명시한다. transition:.18s 는 all 이라 바깥 포커스 링까지 애니메이션된다. */
    transition:opacity .18s var(--ease),visibility .18s var(--ease),transform .18s var(--ease);
    /* 닫힐 때만 잠깐 버틴다. 대각선으로 빠르게 지나가도 깜빡이지 않는다.
       여는 쪽은 아래에서 지연 0으로 되돌려 즉시 열린다. */
    transition-delay:.12s;
  }
  /* 상위 항목과 서브메뉴 사이 8px 틈에서 커서가 "아무것도 hover 안 함" 상태가 되어
     메뉴가 사라졌다 다시 나왔다. 서브메뉴 쪽에서 그 틈을 투명하게 덮어 다리를 놓는다.
     서브메뉴는 li 의 자손이라, 이 다리 위에 있어도 li:hover 가 유지된다.
     숨김 상태에서는 visibility:hidden 이라 이 다리도 같이 죽어 오작동하지 않는다. */
  .main-nav .menu > li > .sub-menu::before{
    content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
  }
  .main-nav li:hover > .sub-menu,.main-nav li:focus-within > .sub-menu{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s;
  }
  .main-nav .sub-menu a{display:block;padding:.58rem .8rem;border-radius:8px;color:var(--g700);font-size:.9rem;font-weight:600;}
  .main-nav .sub-menu a:hover{background:var(--blue-l);color:var(--blue-d);}
}

/* 데스크톱에서는 서랍용 부품(머리·하단 버튼·서브메뉴 토글)을 숨기고,
   본문 래퍼는 display:contents로 없는 셈 친다 — 가로 메뉴 정렬이 그대로 유지된다. */
.oe-nav-head,.oe-nav-actions,.oe-submenu-toggle,.oe-nav-backdrop{display:none;}
.oe-nav-body{display:contents;}

.header-cta{display:flex;align-items:center;gap:.55rem;flex:none;}
.nav-toggle{
  display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:24px;height:3px;margin:0 auto;background:var(--ink);border-radius:2px;transition:.25s var(--ease);}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* =========================================================
   3-1. 모바일 서랍 메뉴 (오른쪽에서 슬라이드 인)
   ========================================================= */
@media (max-width:1100px){
  html.oe-menu-open,body.oe-menu-open{overflow:hidden;overscroll-behavior:none;}

  /* 서랍이 오버레이 위로 올라오도록 헤더 스택을 backdrop(99)보다 위에 둔다.
     헤더가 쌓임 맥락을 만들기 때문에 서랍의 z-index만 올려서는 소용이 없다. */
  .site-header{overflow:visible;z-index:120;}
  /* 서랍이 position:fixed로 흐름에서 빠지면 헤더 안에 브랜드와 버거만 남는다.
     밀어 줄 요소가 없으니 auto 여백을 직접 줘야 버거가 오른쪽 끝에 붙는다. */
  .header-cta{margin-left:auto;}
  .header-cta .btn{display:none;}
  .nav-toggle{display:flex;position:relative;z-index:102;}
  /* 열리면 서랍의 X가 닫기 역할을 가져간다. 버거를 겹쳐 두면 X가 둘이 된다. */
  .nav-toggle.is-open{visibility:hidden;pointer-events:none;}

  .oe-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:99;
    background:rgba(8,20,16,.56);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
  }
  .oe-nav-backdrop.is-visible{opacity:1;visibility:visible;pointer-events:auto;}

  .main-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(340px,88vw);max-width:100vw;height:100dvh;
    margin:0;padding:0;gap:0;
    display:flex;flex-direction:column;align-items:stretch;
    background:var(--bg-alt);
    transform:translate3d(100%,0,0);
    transition:transform .36s cubic-bezier(.22,1,.36,1),visibility .36s ease;
    box-shadow:-16px 0 48px rgba(8,20,16,.18);
    z-index:101;overflow:hidden;visibility:hidden;pointer-events:none;will-change:transform;
  }
  .main-nav.is-open{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto;}
  /* --oe-adminbar는 main.js가 실제 관리자 바 높이로 채운다(없으면 32px). */
  body.admin-bar .main-nav{top:var(--oe-adminbar,32px);height:calc(100dvh - var(--oe-adminbar,32px));}
  body.admin-bar .oe-nav-backdrop{top:var(--oe-adminbar,32px);}

  /* --- 서랍 머리 --- */
  .oe-nav-head{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    position:relative;overflow:hidden;flex-shrink:0;
    padding:1.5rem 1.25rem 1.35rem;
    background:linear-gradient(140deg,#052A1E 0%,#0D2019 46%,#0E5C40 150%);
    color:#fff;
  }
  .oe-nav-head::before{
    content:"";position:absolute;top:-38px;right:-26px;width:132px;height:132px;border-radius:50%;
    background:rgba(127,201,168,.16);pointer-events:none;
  }
  .oe-nav-head::after{
    content:"";position:absolute;bottom:-48px;left:-20px;width:96px;height:96px;border-radius:50%;
    background:rgba(255,255,255,.05);pointer-events:none;
  }
  .oe-nav-head__text{position:relative;z-index:1;min-width:0;}
  .oe-nav-title{display:block;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff;}
  .oe-nav-sub{display:block;margin-top:.25rem;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.62);}
  .oe-nav-close{
    display:grid;place-items:center;position:relative;z-index:1;flex-shrink:0;
    width:40px;height:40px;padding:0;border-radius:12px;cursor:pointer;
    border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;
    transition:background .2s ease,transform .2s ease;
  }
  .oe-nav-close:hover{background:rgba(255,255,255,.18);}
  .oe-nav-close:active{transform:scale(.96);}

  /* --- 메뉴 본문 --- */
  .oe-nav-body{display:block;flex:1;overflow-y:auto;padding:1rem .9rem .5rem;-webkit-overflow-scrolling:touch;}
  .main-nav .menu{flex-direction:column;align-items:stretch;gap:.4rem;padding:0;margin:0;}
  .main-nav .menu li{margin:0;}
  .main-nav .menu > li{display:flex;flex-wrap:wrap;align-items:stretch;position:static;}
  .main-nav .menu > li > a{flex:1;min-width:0;}
  .main-nav .menu a{
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    padding:.9rem 1rem;font-size:.95rem;font-weight:700;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-xs);
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  .main-nav .menu a:hover{color:var(--blue);border-color:#C6DDD1;box-shadow:0 6px 16px rgba(6,54,38,.08);transform:translateY(-1px);}
  .main-nav .current-menu-item > a,.main-nav .current_page_item > a{
    color:var(--blue-d);background:linear-gradient(135deg,#EDF5F0,#E1EFE7);border-color:#BFD9CC;box-shadow:0 4px 14px rgba(6,54,38,.1);
  }

  /* --- 하위 메뉴: hover가 없으니 버튼으로 편다 --- */
  .oe-submenu-toggle{
    display:grid;place-items:center;flex:none;width:48px;margin:0 0 0 .25rem;padding:0;cursor:pointer;
    border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--g600);
    box-shadow:var(--sh-xs);transition:background .2s ease,border-color .2s ease,color .2s ease;
  }
  .oe-submenu-icon{
    display:block;width:10px;height:10px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .25s ease;
  }
  .main-nav .menu > li.is-submenu-open > .oe-submenu-toggle{background:var(--blue-l);border-color:#BFD9CC;color:var(--blue);}
  .main-nav .menu > li.is-submenu-open > .oe-submenu-toggle .oe-submenu-icon{transform:rotate(-135deg) translateY(-2px);}
  .main-nav .sub-menu{display:none;width:100%;margin:.4rem 0 0;padding:0 0 0 .75rem;}
  .main-nav .menu li.is-submenu-open > .sub-menu{display:block;}
  .main-nav .sub-menu li{margin-bottom:.15rem;}
  .main-nav .sub-menu a{padding:.75rem .9rem;font-size:.88rem;font-weight:600;background:#F7FBF8;border-color:#E6EEE9;box-shadow:none;border-radius:11px;}
  .main-nav .sub-menu a:hover{transform:none;}

  /* --- 열릴 때 항목이 차례로 들어온다 --- */
  .main-nav.is-open .menu > li{animation:oe-menu-in .38s cubic-bezier(.22,1,.36,1) both;}
  .main-nav.is-open .menu > li:nth-child(1){animation-delay:.04s;}
  .main-nav.is-open .menu > li:nth-child(2){animation-delay:.07s;}
  .main-nav.is-open .menu > li:nth-child(3){animation-delay:.10s;}
  .main-nav.is-open .menu > li:nth-child(4){animation-delay:.13s;}
  .main-nav.is-open .menu > li:nth-child(5){animation-delay:.16s;}
  .main-nav.is-open .menu > li:nth-child(6){animation-delay:.19s;}
  .main-nav.is-open .menu > li:nth-child(7){animation-delay:.22s;}
  .main-nav.is-open .menu > li:nth-child(8){animation-delay:.25s;}
  @keyframes oe-menu-in{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:translateX(0);}}

  /* --- 서랍 하단 고정 버튼 --- */
  .oe-nav-actions{
    display:flex;gap:.6rem;margin-top:auto;flex-shrink:0;
    padding:.85rem .9rem calc(.95rem + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);background:#fff;
  }
  .oe-nav-action{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    min-height:48px;border-radius:12px;font-size:.9rem;font-weight:700;text-align:center;
    border:1px solid var(--g300);background:#fff;color:var(--g700);
  }
  .oe-nav-action:hover{border-color:var(--blue);color:var(--blue);}
  .oe-nav-action--cta{background:var(--blue);border-color:var(--blue);color:#fff;}
  .oe-nav-action--cta:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff;}
}

@media (prefers-reduced-motion:reduce){
  .main-nav{transition:none;}
  .main-nav.is-open .menu > li{animation:none;}
}

body.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px;}
  body.admin-bar .main-nav{top:var(--oe-adminbar,46px);height:calc(100dvh - var(--oe-adminbar,46px));}
  body.admin-bar .oe-nav-backdrop{top:var(--oe-adminbar,46px);}
}

/* =========================================================
   4. 히어로 슬라이더 (doorweb-pet의 .dw-hero-slider 계약 재사용)
   슬라이드 이미지는 배경 전체에 깔리고, 글자는 스크림 위에 얹힌다.
   PC/모바일 이미지를 각각 받아 세로 화면에서 인물이 잘리는 걸 피한다.
   ========================================================= */
.hero{
  --hero-h:clamp(520px,58vw,660px);
  --hero-h-m:clamp(500px,118vw,640px);
  position:relative;overflow:hidden;min-height:var(--hero-h);
  background:
    radial-gradient(1100px 520px at 78% 18%,#E6F1EB 0%,rgba(230,241,235,0) 62%),
    linear-gradient(170deg,#F7FBF8 0%,#FFFFFF 62%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);z-index:3;}
.hero .dw-hero-slider{position:absolute;inset:0;}
.hero .dw-hero-slide{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .8s var(--ease),visibility .8s;
}
.hero .dw-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}

/* --- 배경 이미지 --- */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* 영상은 뜨는 데 시간이 걸린다. 그동안 밝은 바탕이 비쳐 흰 글씨가 사라지지 않도록
   영상 슬라이드는 바탕부터 어둡게 깔아 둔다. */
.hero__bg.has-video{background:var(--navy);}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__bg .bg-m{display:none;}
/* 배경 영상 — 사진 위에 덮이고, 재생이 실제로 시작될 때만 드러난다.
   자동재생이 막히면 is-playing이 안 붙으므로 밑의 사진이 그대로 남는다. */
.hero__bg .bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.hero__bg .bg-video.is-playing{opacity:1;}

/* 유튜브 배경.
   iframe 은 object-fit 이 안 먹어서 16:9 상자를 히어로보다 크게 키운 뒤 가운데로 당긴다.
   pointer-events 를 죽여 클릭이 히어로 버튼으로 그대로 통과하게 한다. */
.hero__bg .bg-yt{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  container-type:size;
  opacity:0;transition:opacity .8s var(--ease);
}
.hero__bg .bg-yt.is-playing{opacity:1;}
.hero__bg .bg-yt iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  /* 구형 브라우저용 근사값 — 화면 크기 기준이라 히어로가 화면보다 낮으면 살짝 어긋난다. */
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;
}
/* 컨테이너 쿼리 단위를 읽는 브라우저에서는 화면이 아니라 **히어로 상자** 기준으로
   계산해 16:9 비율을 정확히 지킨다. vw/vh 로만 하면 상자가 화면보다 낮을 때
   가로·세로가 따로 늘어나 유튜브 화면에 검은 여백이 생긴다(실측 1.975:1). */
@supports (width: 1cqw) {
  .hero__bg .bg-yt iframe{
    width:max(100cqw, 177.7778cqh);
    height:max(56.25cqw, 100cqh);
    min-width:0;min-height:0;
  }
}
.hero[data-fx="zoom"] .dw-hero-slide .hero__bg img{transform:scale(1.07);transition:transform 7s linear;}
.hero[data-fx="zoom"] .dw-hero-slide.is-active .hero__bg img{transform:scale(1);}

/* --- 스크림: 글자가 놓이는 쪽만 덮는다 --- */
.hero__scrim{position:absolute;inset:0;z-index:1;}
.dw-hero-slide .hero__scrim{
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.92) 30%,
    rgba(255,255,255,.62) 52%,
    rgba(255,255,255,.10) 78%,
    rgba(255,255,255,0) 100%);
}
.dw-hero-slide.is-dark .hero__scrim{
  background:linear-gradient(90deg,
    rgba(8,20,16,.93) 0%,
    rgba(8,20,16,.82) 32%,
    rgba(8,20,16,.52) 56%,
    rgba(8,20,16,.16) 80%,
    rgba(8,20,16,0) 100%);
}

/* --- 텍스트 --- */
.hero__grid{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,6vw,4rem) clamp(5rem,9vw,6.5rem);}
.hero__text{max-width:min(100%,600px);}
.hero__kick{display:inline-block;font-size:.85rem;font-weight:800;color:var(--blue);margin:0 0 1rem;}
.hero__kick::before{content:"";display:inline-block;width:14px;height:2px;background:currentColor;border-radius:2px;vertical-align:middle;margin-right:.55em;}
.hero__title{font-size:var(--fs-hero);line-height:1.24;color:var(--ink);margin:0 0 1.05rem;letter-spacing:-.035em;}
.hero__title em{font-style:normal;color:var(--blue);}
.hero__lede{font-size:clamp(.96rem,1.3vw,1.06rem);color:var(--g600);max-width:44ch;margin:0 0 1.9rem;line-height:1.8;}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;}
.hero__play{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.94rem;color:var(--ink);}
.hero__play span.ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--g200);color:var(--blue);box-shadow:var(--sh-xs);transition:.2s var(--ease);}
.hero__play:hover{color:var(--blue);}
.hero__play:hover span.ico{background:var(--blue);color:#fff;border-color:var(--blue);transform:scale(1.06);}
.hero__hint{margin:1.6rem 0 0;font-size:.8rem;color:var(--g600);max-width:46ch;line-height:1.6;}

/* --- 어두운 슬라이드 --- */
.dw-hero-slide.is-dark .hero__title{color:#fff;}
.dw-hero-slide.is-dark .hero__title em{color:#7FC9A8;}
.dw-hero-slide.is-dark .hero__lede{color:rgba(234,244,239,.85);}
.dw-hero-slide.is-dark .hero__kick{color:#86C4A6;}
.dw-hero-slide.is-dark .hero__hint{color:rgba(234,244,239,.5);}
.dw-hero-slide.is-dark .hero__play{color:#fff;}
.dw-hero-slide.is-dark .hero__play span.ico{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;}
.dw-hero-slide.is-dark .hero__play:hover span.ico{background:#fff;color:var(--blue);}

/* --- 모바일: 세로 이미지로 교체하고 스크림을 전면 베일로 --- */
@media (max-width:820px){
  .hero{min-height:var(--hero-h-m);}
  .hero .dw-hero-slider{position:static;}
  .hero .dw-hero-slide{position:absolute;}
  .hero .dw-hero-slide.is-active{position:relative;min-height:var(--hero-h-m);}
  .hero__bg .bg-pc{display:none;}
  .hero__bg .bg-m{display:block;}
  .hero__grid{padding-block:2.6rem 5rem;}
  .hero__text{max-width:none;}
  .hero__lede{max-width:52ch;}
  /* 세로 화면은 글자가 화면 폭을 다 쓰므로 위쪽을 두껍게 덮고,
     아래로 갈수록 열어 사진이 보이게 한다. 완전히 덮으면 배경을 넣은 의미가 없다. */
  .dw-hero-slide .hero__scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.88) 42%,
      rgba(255,255,255,.66) 74%,
      rgba(255,255,255,.52) 100%);
  }
  .dw-hero-slide.is-dark .hero__scrim{
    background:linear-gradient(180deg,
      rgba(8,20,16,.9) 0%,
      rgba(8,20,16,.82) 42%,
      rgba(8,20,16,.6) 74%,
      rgba(8,20,16,.48) 100%);
  }
  .hero__title{letter-spacing:-.03em;}
}
@media (max-width:560px){
  .hero__lede{max-width:none;}
}
@media (max-width:480px){
  .hero__actions{gap:.7rem;}
}

/* --- 숫자형 슬라이더 내비 — ‹ 01 — 02 — 03 › --- */
.hero__nav{
  position:absolute;left:0;right:0;bottom:clamp(1.4rem,3vw,2.4rem);z-index:4;
  display:flex;align-items:center;gap:1rem;
}
.hero__nav .dw-hero-prev,.hero__nav .dw-hero-next{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--g200);background:rgba(255,255,255,.9);color:var(--g600);
  display:grid;place-items:center;cursor:pointer;padding:0;font-size:1.1rem;line-height:1;transition:.2s var(--ease);
}
.hero__nav .dw-hero-prev:hover,.hero__nav .dw-hero-next:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.dw-hero-dots{display:flex;align-items:center;gap:.55rem;}
.dw-hero-dot{
  border:0;background:none;padding:0 .1rem;cursor:pointer;
  font-family:var(--display);font-size:.94rem;font-weight:700;letter-spacing:.02em;
  color:var(--g600);transition:color .2s;
}
.dw-hero-dot + .dw-hero-dot{margin-left:1.4rem;position:relative;}
.dw-hero-dot + .dw-hero-dot::before{content:"";position:absolute;left:-1.15rem;top:50%;width:.85rem;height:1px;background:var(--g300);}
.dw-hero-dot.is-active{color:var(--ink);}

/* 어두운 슬라이드가 활성일 때 내비도 밝은 톤으로 (main.js가 클래스를 붙인다) */
.dw-hero-slider.is-dark-active .hero__nav .dw-hero-prev,
.dw-hero-slider.is-dark-active .hero__nav .dw-hero-next{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;
}
.dw-hero-slider.is-dark-active .dw-hero-dot{color:rgba(255,255,255,.55);}
.dw-hero-slider.is-dark-active .dw-hero-dot.is-active{color:#fff;}
.dw-hero-slider.is-dark-active .dw-hero-dot + .dw-hero-dot::before{background:rgba(255,255,255,.4);}
@media (max-width:820px){.hero__nav{bottom:1.5rem;}}

/* =========================================================
   5. 우측 플로팅 배너 · 모바일 하단 바
   ========================================================= */
.floater{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:1px;width:84px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.floater__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.32rem;
  padding:.8rem .35rem;background:#fff;color:var(--g600);
  font-size:.72rem;font-weight:700;line-height:1.25;text-align:center;border:0;cursor:pointer;
}
.floater__item:hover{background:var(--blue-l);color:var(--blue-d);}
.floater__item--cta{background:var(--blue);color:#fff;}
.floater__item--cta:hover{background:var(--blue-d);color:#fff;}
.floater__top{background:var(--g50);color:var(--g500);padding:.5rem;font-size:.68rem;font-family:var(--display);}
@media (max-width:1180px){.floater{display:none;}}

.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(3,1fr);background:var(--navy);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.6rem .3rem;color:#C9D5DD;font-size:.72rem;font-weight:700;}
.mobile-bar a:hover{color:#fff;}
.mobile-bar a.is-cta{background:var(--blue);color:#fff;}
@media (max-width:1180px){.mobile-bar{display:grid;}body{padding-bottom:62px;}}


/* =========================================================
   20. 페이지 머리 · 본문
   ========================================================= */
.page-head{padding-block:clamp(2.2rem,5vw,3.6rem) clamp(1.2rem,3vw,2rem);}
.page-head__title{font-size:var(--fs-h2);margin:0 0 .45rem;color:var(--ink);}
.page-head__desc,.page-head__meta{color:var(--g500);font-size:.9rem;margin:0;}
.page-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;}
.page-head--disease{background:linear-gradient(180deg,var(--point-softer),#fff);border-bottom:1px solid var(--line);}
.lede{color:var(--g600);font-size:1.02rem;line-height:1.85;margin:0;max-width:60ch;}
.page-head__types a,.card__types a{display:inline-block;margin-right:.35rem;padding:.22em .62em;border-radius:var(--r-pill);
  background:var(--g100);color:var(--g600);font-size:.76rem;font-weight:700;}
.page-head__types a:hover,.card__types a:hover{background:var(--blue-l);color:var(--blue-d);}

.entry{padding-bottom:clamp(1.5rem,4vw,2.6rem);}
.entry > *:last-child{margin-bottom:0;}
.entry h2{margin-top:2em;font-size:var(--fs-h3);}
.entry h3{margin-top:1.6em;}
.entry ul,.entry ol{padding-left:1.2em;margin:0 0 1.1em;}
.entry li{margin-bottom:.35em;}
.entry blockquote{margin:1.4em 0;padding:.9em 1.2em;background:var(--bg-alt);border-left:3px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--g700);}
.entry table{width:100%;border-collapse:collapse;font-size:.94rem;}
.entry th,.entry td{padding:.7em .8em;border:1px solid var(--line);text-align:left;}
.entry th{background:var(--bg-alt);font-weight:700;}
.entry img{border-radius:var(--r);}
.entry a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}

/* =========================================================
   21. 유형 칩 · 목차
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;}
.chip__count{margin-left:.4em;font-size:.72rem;opacity:.65;}
.chip.is-on{background:var(--blue);color:#fff;}
a.chip{transition:background-color .2s var(--ease),color .2s var(--ease);}
a.chip:hover{background:var(--blue);color:#fff;}
.toc{padding-block:1.2rem 0;}
.toc__list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;}

/* =========================================================
   22. 카드 목록
   ========================================================= */
.cards{display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);}
.card:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--g300);}
.card__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--g100);}
.card__shot img{width:100%;height:100%;object-fit:cover;}
.card__body{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem 1.15rem 1.25rem;flex:1;}
.card__kicker{margin:0;font-size:.77rem;font-weight:800;color:var(--blue);letter-spacing:.02em;}
.card__title{margin:0;font-size:1.05rem;line-height:1.45;}
.card__excerpt{margin:0;color:var(--g600);font-size:.9rem;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card__types{margin:auto 0 0;padding-top:.5rem;}

/* =========================================================
   23. 링크 목록 · 알림 · 페이지 넘김
   ========================================================= */
.section__title{margin:0 0 1.1rem;font-size:var(--fs-h3);color:var(--ink);}
.linklist{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.linklist__item + .linklist__item{border-top:1px solid var(--line);}
.linklist__item a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.95rem 1.2rem;transition:background-color .18s var(--ease);}
.linklist__item a:hover{background:var(--point-softer);}
.linklist__title{font-weight:700;font-size:.98rem;}
.linklist__date{flex:none;color:var(--g400);font-size:.8rem;font-variant-numeric:tabular-nums;}
.notice{padding:1rem 1.2rem;background:var(--bg-alt);border:1px dashed var(--g300);border-radius:var(--r-sm);color:var(--g600);font-size:.92rem;}
.backlink{margin:0 0 clamp(1.5rem,4vw,2.4rem);}
.pagination{display:flex;justify-content:center;margin-top:2rem;}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .6em;
  border:1px solid var(--line);border-radius:var(--r-sm);font-weight:700;font-size:.9rem;color:var(--g600);background:#fff;}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue);}
.pagination .current{background:var(--blue);border-color:var(--blue);color:#fff;}

/* =========================================================
   24. 푸터
   ========================================================= */
.site-footer{background:var(--navy);color:#9BABB6;padding-block:clamp(2.4rem,5vw,3.6rem) 1.6rem;margin-top:clamp(2.6rem,6vw,4.6rem);}
.site-footer a{color:#C9D5DD;}
.site-footer a:hover{color:#fff;}
.footer-top{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.footer-brand b{display:block;color:#fff;font-size:1.1rem;font-weight:800;margin-bottom:.5rem;}
.footer-brand p{margin:0 0 .4rem;font-size:.88rem;line-height:1.7;}
.footer-col h3{color:#fff;font-size:.92rem;margin:0 0 .7rem;}
.footer-col ul{list-style:none;margin:0;padding:0;font-size:.88rem;}
.footer-col li{margin-bottom:.45rem;}
.footer-bottom{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;font-size:.8rem;color:#7E8F9B;}

/* =========================================================
   25. 메인 — 클리닉 카드 · 진료안내 밴드
   ========================================================= */
.clinic-grid{display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.clinic{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.4rem 1.4rem 1.2rem;transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);}
.clinic:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--g300);}
.clinic__name{font-size:1.08rem;margin:0 0 .5rem;color:var(--ink);}
.clinic__desc{margin:0 0 .8rem;font-size:.88rem;color:var(--g600);line-height:1.7;}
.clinic__list{list-style:none;margin:0 0 1rem;padding:0;font-size:.92rem;}
.clinic__list li{padding:.34rem 0;border-bottom:1px dashed var(--g200);}
.clinic__list li:last-child{border-bottom:0;}
.clinic__list a{color:var(--g700);}
.clinic__list a:hover{color:var(--blue);}
.clinic__empty{margin:0 0 1rem;font-size:.84rem;color:var(--g500);}
.clinic__more{margin-top:auto;display:inline-flex;align-items:center;gap:.3em;font-size:.86rem;font-weight:700;color:var(--blue);}
.info-band{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.info-band .sec-title{margin-bottom:.9rem;}
.dgroup + .dgroup{margin-top:clamp(1.8rem,3.6vw,2.6rem);}

/* 슬라이드별 포인트 색. --blue 계열은 :root 에서 이미 값이 박혀 나오므로
   ( var() 는 선언한 곳에서 치환된다 ) 두 이름을 같이 갈아 준다. */
.dw-hero-slide.acc-teal{--point:#0E6E6B;--point-d:#0A534F;--point-l:#14908C;--blue:#0E6E6B;--blue-d:#0A534F;--sh-blue:0 12px 28px rgba(14,110,107,.26);}
.dw-hero-slide.acc-amber{--point:#C57700;--point-d:#A66300;--point-l:#E08800;--blue:#C57700;--blue-d:#A66300;--sh-blue:0 12px 28px rgba(197,119,0,.26);}
.dw-hero-slide.acc-green{--point:#2F7A44;--point-d:#245E34;--point-l:#3B9A56;--blue:#2F7A44;--blue-d:#245E34;--sh-blue:0 12px 28px rgba(47,122,68,.26);}

/* =========================================================
   26. 메인 · 병원 개요
   ========================================================= */
/* 이 구역은 배경 사진을 깔 수 있다. 사진이 없어도 완성돼 보이도록
   기본값을 옅은 그라데이션으로 두었다 — 사진은 있으면 좋은 것이지 전제가 아니다.
   아래쪽 여백을 0 으로 만드는 이유: 흰 안내 띠가 구역 바닥에 딱 붙어야 한다. */
.intro{position:relative;isolation:isolate;padding-bottom:0;
  background:linear-gradient(118deg,#F2F7FB 0%,#E7F0F7 46%,#F7FAFC 100%);}
.intro--bg::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--intro-bg);background-size:cover;background-position:center;}
/* 글이 얹히는 왼쪽만 하얗게 덮는다. 사진 전체를 덮으면 배경을 깐 의미가 없다. */
.intro--bg::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(247,250,252,.96) 0%,rgba(247,250,252,.86) 26%,rgba(240,246,250,.42) 52%,rgba(255,255,255,.10) 78%);}
/* 좁은 화면에서는 글이 폭 전체를 쓴다. 가로로 덮으면 오른쪽 글자 뒤로 화분·거울처럼
   복잡한 부분이 그대로 비친다 — 실제로 390 에서 본문이 잎사귀에 묻혔다.
   그래서 세로 방향으로 고르게 덮는다. */
@media (max-width:899px){
  .intro--bg::after{background:linear-gradient(180deg,rgba(247,250,252,.93) 0%,rgba(247,250,252,.88) 58%,rgba(247,250,252,.72) 100%);}
}

.intro__grid{display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
  padding-bottom:clamp(2rem,4.4vw,3.4rem);}
@media (min-width:900px){.intro__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}}
.intro__text .sec-title{margin-bottom:.9rem;}
/* 제목 둘째 줄부터 포인트 색. em 은 기울임을 지운다 — 여기서는 색만 빌려 쓴다. */
.intro__text .sec-title em{font-style:normal;color:var(--point);}
.intro__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0;}
.intro__shot{border-radius:var(--r-xl);overflow:hidden;background:var(--point-softer);box-shadow:var(--sh);}
.intro__shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
/* 머리말 아래 짧은 선. 제목 덩어리의 시작점을 잡아 준다. */
.eyebrow--rule{display:block;margin-bottom:1.1rem;}
.eyebrow--rule::after{content:"";display:block;width:34px;height:1px;
  margin-top:.75rem;background:currentColor;opacity:.45;}
.ticks{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.55rem;}
.ticks li{display:flex;align-items:flex-start;gap:.5rem;font-size:.93rem;color:var(--g700);line-height:1.6;}
.ticks svg{flex:none;margin-top:.22em;color:var(--point-l);}

/* 01~04 번호 안내 바 — 흰 띠는 화면 끝까지, 항목은 컨테이너 안에 */
.indexbar-wrap{background:#fff;border-top:1px solid var(--line);}
.indexbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));}
.indexbar__item{display:flex;align-items:center;gap:.85rem;padding:1.15rem 1.2rem;color:var(--g700);
  border-left:1px solid var(--line);transition:background-color .2s var(--ease),color .2s var(--ease);}
.indexbar__item:first-child{border-left:0;}
.indexbar__item:hover{background:var(--point-softer);color:var(--point);}
.indexbar__ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--point-soft);color:var(--point);
  transition:background-color .2s var(--ease),color .2s var(--ease);}
.indexbar__item:hover .indexbar__ico{background:var(--point);color:#fff;}
.indexbar__body{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.indexbar__num{font-family:var(--display);font-size:.76rem;font-weight:800;color:var(--point-l);letter-spacing:.06em;}
.indexbar__label{display:flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:700;color:var(--ink);}
.indexbar__label svg{flex:none;color:var(--g400);transition:transform .2s var(--ease),color .2s var(--ease);}
.indexbar__item:hover .indexbar__label svg{color:var(--point);transform:translateX(3px);}
@media (max-width:620px){.indexbar__item{border-left:0;border-top:1px solid var(--line);}.indexbar__item:first-child{border-top:0;}}

/* =========================================================
   27. 메인 · 중점 진료 사진 카드
   ========================================================= */
.clinic-grid--photo .clinic{padding:0;overflow:hidden;}
.clinic__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--g100);}
.clinic__shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.clinic:hover .clinic__shot img{transform:scale(1.04);}
.clinic-grid--photo .clinic__body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.35rem 1.2rem;}

/* =========================================================
   28. 메인 · 의료진
   ========================================================= */
.doctor__grid{display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;}
@media (min-width:900px){.doctor__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}}
.doctor__shot{border-radius:var(--r-xl);overflow:hidden;background:var(--point-softer);box-shadow:var(--sh);}
.doctor__shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.doctor__quote{margin:1.1rem 0 1.2rem;padding:.95em 1.2em;background:var(--point-softer);
  border-left:3px solid var(--point-l);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--g700);font-size:.96rem;line-height:1.85;}
.doctor__name{margin:0;display:flex;align-items:baseline;gap:.6rem;}
.doctor__name b{font-size:1.12rem;color:var(--ink);}
.doctor__name small{font-size:.85rem;color:var(--g500);font-weight:600;}

/* =========================================================
   29. 메인 · 공간·장비
   ========================================================= */
.shots{display:grid;gap:clamp(.8rem,1.8vw,1.2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
.shot{margin:0;}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--g100);}
.shot figcaption{margin-top:.55rem;font-size:.84rem;color:var(--g600);font-weight:600;}

/* =========================================================
   30. 아코디언 (FAQ)
   ========================================================= */
.acc-list{display:grid;gap:.6rem;}
.acc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.acc__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1.05rem 1.2rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.5;}
.acc__head:hover{color:var(--blue);}
.acc__mark{position:relative;flex:none;width:16px;height:16px;}
.acc__mark::before,.acc__mark::after{content:"";position:absolute;background:var(--point-l);border-radius:2px;transition:transform .25s var(--ease),opacity .25s var(--ease);}
.acc__mark::before{left:0;top:7px;width:16px;height:2px;}
.acc__mark::after{left:7px;top:0;width:2px;height:16px;}
.acc.is-open .acc__mark::after{transform:scaleY(0);opacity:0;}
/* 여는 높이는 max-height 로 준다. grid-template-rows 0fr→1fr 방식도 되지만
   60rem 을 넘는 답변이 잘리는 대신 계산이 단순하고 브라우저를 덜 탄다. */
.acc__body{overflow:hidden;max-height:0;transition:max-height .3s var(--ease);}
.acc.is-open .acc__body{max-height:60rem;}
.acc__inner{padding:0 1.2rem;color:var(--g600);font-size:.94rem;line-height:1.8;}
.acc.is-open .acc__inner{padding-bottom:1.2rem;}
.acc__inner p{margin:0 0 .7em;}
.acc__inner a{color:var(--blue);font-weight:700;}
.intro--bar-only{padding-block:0;}
.intro--bar-only .indexbar{margin-top:0;border-top:0;}

/* =========================================================
   30-1. 클리닉 페이지 · 질환을 가로지른 질문 모아보기
   ========================================================= */
.clinicqa__group{margin-top:clamp(1.6rem,3.2vw,2.4rem);}
.clinicqa__group:first-of-type{margin-top:0;}
/* 유형 이름 앞 세로 바 — 진료안내 카드 제목과 같은 표시를 쓴다. */
.clinicqa__type{display:flex;align-items:center;gap:.55rem;margin:0 0 .9rem;
  font-size:1.02rem;color:var(--ink);}
.clinicqa__type::before{content:"";flex:none;width:3px;height:1.05em;border-radius:2px;background:var(--point);}
.clinicqa__count{display:grid;place-items:center;min-width:1.55em;height:1.55em;padding:0 .4em;
  border-radius:var(--r-pill);background:var(--point-soft);
  font-family:var(--display);font-size:.72rem;font-weight:800;color:var(--point);}
.clinicqa__list{display:grid;gap:.6rem;}
/* 질문과 질환 이름이 한 줄에 못 들어가면 태그가 아래로 떨어진다.
   태그를 줄이거나 자르지 않는다 — 어느 질환의 질문인지가 이 화면의 핵심이다. */
.clinicqa__qwrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;min-width:0;}
.clinicqa__q{min-width:0;}
.clinicqa__tag{flex:none;padding:.2em .6em;border-radius:var(--r-pill);
  background:var(--point-softer);color:var(--point-l);
  font-size:.74rem;font-weight:700;letter-spacing:-.01em;}

.clinicqa__links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.clinicqa__links a{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.2rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);font-size:.98rem;font-weight:700;line-height:1.5;
  transition:border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);}
.clinicqa__links a:hover{border-color:var(--g300);color:var(--blue);box-shadow:var(--sh-sm);}
.clinicqa__links .clinicqa__q{flex:1;}
.clinicqa__links svg{flex:none;color:var(--g400);transition:transform .2s var(--ease),color .2s var(--ease);}
.clinicqa__links a:hover svg{color:var(--point);transform:translateX(3px);}

/* =========================================================
   31. 메인 · 빠른 답변
   ========================================================= */
.qa{padding-block:clamp(2.2rem,4.6vw,3.4rem);}
.qa__grid{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;}
@media (min-width:900px){.qa__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}}
.qa__media{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(140deg,#DCE9F2 0%,var(--point-softer) 55%,#fff 100%);
  display:grid;place-items:center;}
.qa__media img{grid-area:1/1;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;}
.qa__quote{grid-area:1/1;margin:0;padding:1.6rem;max-width:13em;text-align:center;
  color:var(--point-d);font-size:clamp(1.02rem,1.7vw,1.28rem);font-weight:500;line-height:1.65;letter-spacing:-.025em;}
.qa__quote::before{content:"\201C";}
.qa__quote::after{content:"\201D";}
/* 사진이 없을 때 — 비율을 잡아 두고 짧은 선을 얹어 "빈 액자"가 아니라 인용 판으로 읽히게 한다.
   글꼴에 없는 장식 글자를 쓰면 환경에 따라 네모로 깨진다. 선으로 간다. */
.qa__media--plain{aspect-ratio:16/10;}
.qa__media--plain .qa__quote::before,
.qa__media--plain .qa__quote::after{content:none;}
.qa__media--plain .qa__quote{position:relative;padding-block:2.2rem;}
.qa__media--plain .qa__quote+*{display:none;}
.qa__media--plain::before,.qa__media--plain::after{content:"";position:absolute;left:50%;
  width:34px;height:2px;border-radius:2px;background:var(--point);opacity:.28;transform:translateX(-50%);}
.qa__media--plain::before{top:calc(50% - 3.1em);}
.qa__media--plain::after{top:calc(50% + 3.1em);}
/* 사진 위에 얹힐 때는 글자가 묻히지 않도록 흰 글씨 + 옅은 그늘.
   그늘만으로는 모자라다 — 인물이 흰옷을 입은 사진이면 오른쪽 아래가 통째로 흰색이라
   흰 글씨가 사라진다. 그래서 아래쪽에만 어둡게 깔아 준다.
   z-index 를 주는 이유: ::after 는 자식들보다 뒤에 그려져서 그냥 두면 글자를 덮는다. */
/* place-self:stretch 가 반드시 있어야 한다. 부모가 place-items:center 라
   내용 없는 의사요소는 0×0 으로 줄어든다 — 실제로 그렇게 깔려서 그늘이 아예
   안 그려졌고, 글자는 흰 셔츠 위에서 사라졌다. 눈으로는 text-shadow 때문에
   그려진 것처럼 보였다. getComputedStyle 로 재서야 0px 인 걸 알았다. */
.qa__media:not(.qa__media--plain)::after{content:"";grid-area:1/1;z-index:1;place-self:stretch;
  background:linear-gradient(to top,rgba(11,34,49,.80) 0%,rgba(11,34,49,.46) 26%,rgba(11,34,49,0) 56%);}
.qa__media:not(.qa__media--plain) .qa__quote{position:relative;z-index:2;
  color:#fff;text-shadow:0 1px 12px rgba(11,34,49,.55);
  align-self:end;justify-self:start;text-align:left;
  max-width:none;width:100%;padding:1.2rem 1.4rem;}
.qa__q{margin:0 0 .9rem;}
.qa__a{margin:0 0 1.1rem;color:var(--g600);font-size:1.02rem;line-height:1.9;}
/* "이럴 땐 빨리 오세요" 상자다.
   한때 붉은 계열이었다 — 옆칸이 옅은 인용판이던 시절, 브랜드 톤으로 칠하면
   그 판과 같은 색이 되어 주의 문구인지 설명인지 구분이 안 갔기 때문이다.
   지금은 옆칸이 사진이라 그 이유가 사라졌고, 붉은색만 이 화면에서 혼자 떠 보였다.
   그래서 브랜드 틴트로 돌린다. 구분은 색이 아니라 왼쪽 바가 맡는다 —
   바가 진한 딥네이비라 옅은 바탕과 대비가 충분하다. */
.qa__note{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 1.2rem;padding:.9em 1.1em;
  background:var(--point-softer);border-left:3px solid var(--point);border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--g700);font-size:.93rem;line-height:1.75;}
.qa__note svg{flex:none;margin-top:.2em;color:var(--point);}
.qa .chips{margin:0;}

/* =========================================================
   32. 메인 · 진료안내 카드 (사진 자리 대신)
   ========================================================= */
/* 배경 사진 위에 뜨는 카드라 테두리 대신 그림자로 띄운다.
   사진이 없을 때를 대비해 아주 옅은 테두리는 남긴다 — 흰 바탕 위에서 형태가 사라지지 않게. */
.carecard{background:#fff;border:1px solid rgba(227,233,237,.9);border-radius:var(--r-xl);
  padding:1.7rem 1.8rem;box-shadow:var(--sh-lg);}
/* 제목 앞 짧은 세로 바. 카드 안에서 제목 줄을 잡아 준다. */
.carecard__title{display:flex;align-items:center;gap:.6rem;font-size:1.04rem;margin:0 0 1.1rem;color:var(--ink);}
.carecard__title::before{content:"";flex:none;width:3px;height:1.05em;border-radius:2px;background:var(--point);}
.carecard__list{margin:0;}
.carecard__list > div{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.6rem;
  padding:.7rem 0;border-top:1px dashed var(--g200);}
.carecard__list > div:first-child{border-top:0;padding-top:0;}
.carecard__list dt{margin:0;font-size:.84rem;font-weight:800;color:var(--g500);}
.carecard__list dd{margin:0;font-size:.92rem;line-height:1.7;color:var(--g700);}
.carecard__empty{margin:0;font-size:.88rem;color:var(--g500);line-height:1.8;}
/* 링크를 가는 선으로 내려 앉힌다. 본문과 행동을 눈으로 구분해 주는 선이다. */
.carecard .clinic__more{display:inline-flex;margin-top:1.3rem;padding-top:1.2rem;
  border-top:1px solid var(--g200);width:100%;}

/* =========================================================
   33. 메인 · 증상으로 찾기
   ========================================================= */
.pills{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;}
.pill{display:inline-flex;align-items:center;padding:.62em 1.15em;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--g300);color:var(--g700);font-size:.94rem;font-weight:700;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);}
.pill:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px);}
/* 아직 질환 페이지가 없어 클리닉으로 보내는 버튼. 눌러도 되지만 살짝 물러나 있다. */
.pill--soon{border-style:dashed;color:var(--g500);}

/* 클리닉 한 줄 = 왼쪽 이름, 오른쪽 그 클리닉의 질환들.
   카드 격자로 두면 질환이 적을 때 빈 칸이 눈에 띈다. 줄로 두면 내용만큼만 차지한다. */
.dirlist{display:grid;gap:.7rem;}
/* 넓은 화면에서는 2×2. 한 줄로 길게 늘어놓으면 오른쪽이 비고 구역만 길어진다.
   클리닉이 넷이라 2×2 가 딱 맞는다 — 다섯 번째가 생기면 3+2 로 흐른다. */
@media (min-width:900px){ .dirlist{grid-template-columns:repeat(2,minmax(0,1fr));} }
.dirrow{display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.2vw,1.5rem) clamp(1.2rem,2.4vw,1.6rem);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}
.dirrow:hover{border-color:var(--g300);box-shadow:var(--sh-sm);}
.dirrow__head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;}
.dirrow__ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--point-soft);overflow:hidden;}
.dirrow__ico img{width:34px;height:34px;object-fit:contain;display:block;}
/* 클리닉 사진을 등록하면 원을 꽉 채운다 — 아이콘과 달리 여백을 두지 않는다. */
.dirrow__ico--photo img{width:100%;height:100%;object-fit:cover;}
.dirrow__name{flex:1;min-width:0;}
.dirrow__name h3{margin:0;font-size:1.08rem;color:var(--ink);}
.dirrow__name h3 a{color:inherit;}
.dirrow__name h3 a:hover{color:var(--blue);}
.dirrow__name p{margin:.25rem 0 0;font-size:.88rem;color:var(--g600);line-height:1.6;}
.dirrow__more{flex:none;display:inline-flex;align-items:center;gap:.3em;
  font-size:.86rem;font-weight:700;color:var(--blue);}
.dirrow__more svg{transition:transform .2s var(--ease);}
.dirrow:hover .dirrow__more svg{transform:translateX(3px);}
/* 질환 버튼은 왼쪽 정렬 — 가운데로 모으면 아이콘 줄과 축이 어긋난다. */
/* margin-top:auto — 2×2 에서 두 칸 높이가 같아지는데, 질환 수가 다르면
   버튼 줄이 위아래로 어긋난다. 아래로 붙여 두 칸의 버튼 줄을 맞춘다. */
.dirrow__items{display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:auto;padding-top:1rem;border-top:1px dashed var(--g200);}
.dirrow__items .pill{font-size:.9rem;padding:.52em 1em;}
@media (max-width:560px){
  .dirrow__head{flex-wrap:wrap;}
  .dirrow__more{width:100%;margin-top:.2rem;}
}

/* =========================================================
   34. 메인 · 진료 과정
   ========================================================= */
.steps{--gap:clamp(.9rem,2vw,1.4rem);
  list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));}

/* 배경 사진이 걸린 구역. 사진이 없으면 이 블록은 통째로 안 걸리고
   section--alt(옅은 회색)로 돌아간다 — 사진은 덧칠이지 전제가 아니다. */
.flow{position:relative;isolation:isolate;}
.flow--bg::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--flow-bg);background-size:cover;background-position:center;}
/* 사진이 밝긴 해도 카드 밖 글(제목·설명)이 그 위에 바로 얹힌다.
   가운데를 흐리게 덮어 글자를 띄우되, 좌우 소품은 남긴다. */
.flow--bg::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 90% at 50% 45%,rgba(244,248,251,.94) 0%,rgba(244,248,251,.72) 55%,rgba(244,248,251,.30) 100%);}

/* 카드는 반투명 흰색. 완전 불투명이면 사진 위에 종이를 붙인 것처럼 뜬다. */
.step{position:relative;text-align:center;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-lg);box-shadow:0 6px 22px rgba(22,33,43,.07);
  padding:1.6rem 1.2rem 1.4rem;}
/* 번호는 왼쪽 위에 고정. 아이콘·제목은 가운데라 번호까지 가운데 두면 축이 셋이 된다. */
.step__num{position:absolute;top:.95rem;left:.95rem;
  display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;
  border-radius:50%;background:var(--point);color:#fff;
  font-family:var(--display);font-size:.76rem;font-weight:800;letter-spacing:.03em;}
.step__ico{display:grid;place-items:center;width:56px;height:56px;margin:0 auto .9rem;
  border-radius:50%;background:var(--point-soft);color:var(--point);}
.step__title{font-size:1.02rem;margin:0 0 .45rem;color:var(--ink);}
.step__desc{margin:0;font-size:.88rem;line-height:1.75;color:var(--g600);word-break:keep-all;}

/* 카드 사이 꺾쇠 — 넓은 화면에서만. 칸 사이 빈 곳 한가운데에 놓는다. */
@media (min-width:900px){
  .step:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(var(--gap) / -2);
    width:9px;height:9px;border-top:2px solid var(--point-l);border-right:2px solid var(--point-l);
    transform:translate(50%,-50%) rotate(45deg);opacity:.5;}
}

/* =========================================================
   35. 메인 · 증상·검사 표
   ========================================================= */
.tables{display:grid;gap:clamp(1rem,2.4vw,1.6rem);}
@media (min-width:900px){.tables{grid-template-columns:repeat(2,minmax(0,1fr));}}
.tablecard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.tablecard__title{margin:0;padding:1rem 1.2rem;font-size:.98rem;color:var(--ink);
  background:var(--point-softer);border-bottom:1px solid var(--line);}
.tablecard table{width:100%;border-collapse:collapse;font-size:.91rem;}
.tablecard th,.tablecard td{padding:.75rem 1.2rem;text-align:left;vertical-align:top;line-height:1.65;}
.tablecard thead th{font-size:.8rem;font-weight:800;color:var(--g500);background:var(--g50);border-bottom:1px solid var(--line);}
.tablecard tbody tr + tr td{border-top:1px solid var(--g200);}
.tablecard tbody td:first-child{font-weight:700;color:var(--g700);width:46%;}
.tablecard tbody td:last-child{color:var(--g600);}
@media (max-width:520px){
  .tablecard th,.tablecard td{padding:.65rem .9rem;}
  .tablecard tbody td:first-child{width:44%;}
}

/* =========================================================
   36. 메인 · 마무리 밴드
   ========================================================= */
.ctaband{text-align:center;background:linear-gradient(180deg,#fff,var(--point-softer));border-top:1px solid var(--line);}
.ctaband__title{margin:0 0 .7rem;}
.ctaband__text{margin:0 auto 1.5rem;max-width:52ch;color:var(--g600);line-height:1.85;}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}

/* =========================================================
   37. 메인 · 증상 카드 4장
   색은 넷 다 같게 간다. 부위마다 색을 달리 주면 그 색이
   무슨 뜻인지 방문자가 계속 추측하게 된다.
   ========================================================= */
.symcards-sec{padding-block:clamp(1rem,2.4vw,1.8rem) clamp(2.2rem,4.6vw,3.4rem);}
.symcards{display:grid;gap:clamp(.9rem,2vw,1.3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));}
/* 윗칸 높이를 변수로 둔다. 아이콘 원이 윗칸 아래 모서리에 걸쳐 앉는데,
   높이와 아이콘 위치를 따로 적어 두면 한쪽만 고쳤을 때 원이 어긋난다. */
.symcard{--top-h:clamp(88px,11vw,108px);
  display:flex;flex-direction:column;position:relative;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);}
.symcard:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--g300);}
.symcard__top{position:relative;height:var(--top-h);padding:1rem 1.2rem;background:var(--point-soft);}
.symcard__eng{position:relative;z-index:2;display:flex;flex-direction:column;gap:.12rem;
  font-family:var(--display);font-size:.67rem;font-weight:800;letter-spacing:.13em;
  color:var(--point);opacity:.5;}

/* --- 사진이 걸린 카드 --- */
/* 사진이 없으면 위 규칙 그대로 옅은 바탕만 남는다. 아래는 전부 덧칠이다. */
/* 사진칸을 178 이 아니라 200 으로 잡는다. 아이콘 원이 가운데 앉는데 칸이 낮으면
   원이 인물 가슴께에 얹혀 목을 짚은 손·코에 댄 휴지를 가린다 — 그 사진을 쓰는
   이유가 원 밑으로 들어간다. 칸을 키우면 원이 인물 아래로 내려간다.
   200 은 사진(400×300)이 카드 폭에서 위아래로 잘리지 않는 높이이기도 하다. */
.symcard--photo{--top-h:clamp(164px,20.5vw,200px);}
.symcard__photo{position:absolute;inset:0;z-index:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center 32%;}
/* 사진 위의 영문은 그냥 두면 읽히지 않는다. 왼쪽 위만 살짝 어둡게 깐다 —
   사진 전체를 덮으면 인물이 탁해진다. 창가 역광 사진이 섞여 있어
   처음 잡은 .52 로는 흰 글자가 묻혔다. 실제로 띄워 보고 .62 로 올렸다. */
.symcard__top--photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(16,46,65,.62) 0%,rgba(16,46,65,.26) 44%,rgba(16,46,65,0) 72%);}
.symcard__top--photo .symcard__eng{color:#fff;opacity:.92;text-shadow:0 1px 3px rgba(16,46,65,.45);}

/* 선이 가는 그림이라 24px 아이콘 크기로는 형태가 뭉갠다. 원과 그림을 함께 키웠다.
   top 의 38px 은 원 지름의 절반이다 — 원 중심을 사진칸 밑선에 정확히 얹는 값이라
   크기를 바꾸면 이 숫자도 같이 바꿔야 한다. 안 그러면 원이 모서리에서 어긋난다. */
.symcard__icon{position:absolute;top:calc(var(--top-h) - 38px);left:50%;transform:translateX(-50%);
  z-index:3;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;
  background:#fff;box-shadow:0 8px 22px rgba(22,33,43,.13);}
.symcard__icon img{width:42px;height:42px;object-fit:contain;display:block;}

.symcard__body{flex:1;padding:3.4rem 1.3rem 1.5rem;text-align:center;}
.symcard__title{margin:0 0 .5rem;font-size:1.1rem;color:var(--ink);}
.symcard__text{margin:0;color:var(--g600);font-size:.9rem;line-height:1.7;word-break:keep-all;}
.symcard__go{display:grid;place-items:center;width:34px;height:34px;margin:1.1rem auto 0;
  border-radius:50%;background:var(--point-softer);color:var(--point);
  transition:background-color .2s var(--ease),color .2s var(--ease);}
.symcard:hover .symcard__go{background:var(--point);color:#fff;}

/* Health library: airy photographic backdrop and readable editorial cards. */
.health-library{position:relative;isolation:isolate;background:#edf3f5 url('assets/img/health-library-bg.webp') center center/cover no-repeat;border-block:1px solid #e2eaee;}
.health-library::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(244,248,250,.95) 0%,rgba(244,248,250,.85) 48%,rgba(244,248,250,.48) 100%);}
.health-library>.container{display:grid;grid-template-columns:1fr auto;gap:2.2rem 2rem;align-items:end;}
.health-library .sec-head{margin:0;max-width:650px;}
.health-library .eyebrow{display:flex;align-items:center;gap:.7rem;letter-spacing:.18em;}
.health-library .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.65;}
.health-library .sec-title{margin-top:.75rem;}
.health-library .sec-lede{max-width:540px;line-height:1.85;color:#526674;}
.health-library .health-library__more{grid-column:2;grid-row:1;margin:0 0 .2rem;}
.health-library .health-library__more .btn{background:rgba(255,255,255,.85);border-color:#bdcfd8;border-radius:999px;padding:.8rem 1.25rem;}
.health-library .health-library__more .btn:hover{background:var(--point);color:white;}
.health-library .cards{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;}
.health-library .card{border:1px solid rgba(210,223,229,.9);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 5px 22px rgba(29,64,82,.035);}
.health-library .card:hover{border-color:#9bb6c4;box-shadow:0 12px 28px rgba(29,64,82,.09);transform:translateY(-4px);}
.health-library .card__body{padding:1.6rem 1.65rem;gap:.65rem;min-height:224px;}
.health-library .card__kicker{align-self:flex-start;background:#edf4f7;border-radius:6px;padding:.24rem .55rem;color:#466a7e;font-weight:600;font-size:.75rem;}
.health-library .card__title{font-size:1.13rem;line-height:1.55;letter-spacing:-.035em;word-break:keep-all;}
.health-library .card__title a{display:block;}
.health-library .card__title a:focus-visible{outline:2px solid var(--point);outline-offset:4px;border-radius:3px;}
.health-library .card__excerpt{font-size:.86rem;color:#687b87;line-height:1.8;}
.health-library .card__types{border-top:1px solid #eaf0f3;padding-top:.8rem;margin-top:auto;font-size:.75rem;}
@media(max-width:960px){.health-library .cards{grid-template-columns:repeat(2,minmax(0,1fr));}.health-library .card__body{padding:1.4rem;}}
@media(max-width:620px){.health-library{background-position:65% center;}.health-library>.container{grid-template-columns:1fr;gap:1.5rem;}.health-library .health-library__more{grid-column:1;grid-row:3;margin:0;text-align:center;}.health-library .cards{grid-template-columns:1fr;}.health-library .card__body{min-height:200px;}.health-library::before{background:rgba(244,248,250,.87);}}
@media(prefers-reduced-motion:reduce){.health-library .card{transition:none;}.health-library .card:hover{transform:none;}}

/* Responsive WebP hero artwork. */
.hero__bg picture{display:block;width:100%;height:100%;}
.hero__bg .hero__image{display:block;}
.hero .dw-hero-slide:not(.is-dark) .hero__scrim{background:linear-gradient(90deg,rgba(248,250,251,.92) 0%,rgba(248,250,251,.78) 32%,rgba(248,250,251,.28) 58%,rgba(248,250,251,0) 82%);}
#health-library{scroll-margin-top:80px;}
@media(max-width:820px){
  .hero__bg .hero__image{object-position:72% center!important;}
  .hero .dw-hero-slide:not(.is-dark) .hero__scrim{background:linear-gradient(180deg,rgba(249,251,252,.96) 0%,rgba(249,251,252,.9) 45%,rgba(249,251,252,.65) 72%,rgba(249,251,252,.25) 100%);}
}
/* White visiting information area with an embedded location map. */
.visit-section{background:#fff;color:var(--g700);border-top:1px solid var(--line);}
.visit-section__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;}
.visit-section .sec-title{color:var(--ink);}
.visit-section .eyebrow{color:var(--point);}
.visit-map{overflow:hidden;border:1px solid var(--line);border-radius:18px;margin:0 0 1rem;background:#f3f6f8;}
.visit-map iframe{display:block;width:100%;height:320px;border:0;}
@media(max-width:720px){.visit-section__grid{grid-template-columns:1fr;}.visit-map iframe{height:280px;}}
/* Illustrated visiting hours: clear daily rhythm and a compact schedule. */
.visit-hours__intro{margin:0 0 1.2rem;line-height:1.9;color:var(--g600);}
.visit-hours{min-height:322px;box-sizing:border-box;border:1px solid #dce7ec;border-radius:18px;background:#fff;padding:20px 25px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 6px 24px rgba(34,73,91,.035);}
.visit-hours__heading{display:flex;gap:15px;align-items:center;padding-bottom:14px;border-bottom:1px solid #dce7ec;}
.visit-hours__clock{display:grid;place-items:center;flex:none;width:54px;height:54px;color:#476c80;}
.visit-hours__clock svg{stroke-width:1.3;}
.visit-hours__heading strong{display:block;font-size:1.1rem;letter-spacing:-.03em;color:var(--ink);}
.visit-hours__caption{display:block;font-size:.61rem;letter-spacing:.15em;color:#7a929e;margin-bottom:3px;}
.visit-hours__rows{width:100%;}
.visit-hours__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f3;}
.visit-hours__day{display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:650;color:#425f70;}
.visit-hours__day-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;color:#638699;}
.visit-hours__day-icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;}
.visit-hours__time{font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:550;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--point);white-space:nowrap;}
.visit-hours__row.is-closed .visit-hours__day-icon{color:#b48273;}
.visit-hours__row.is-closed .visit-hours__time{font-size:.86rem;color:#a25c50;background:#faf0ed;border-radius:999px;padding:.25rem .8rem;}
.visit-hours__note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:9px 11px;border-radius:8px;background:#f5f8fa;font-size:.72rem;line-height:1.7;color:#697e89;}
.visit-hours__note svg{flex:none;margin-top:1px;color:#7d98a7;}
@media(max-width:720px){.visit-hours{padding:18px 20px;}.visit-hours__time{font-size:1.3rem;}}

/* High contrast logo on the dark footer. */
.site-footer .footer-brand img{filter:brightness(0) invert(1);}

/* Photographic subpage header with location breadcrumbs. */
.sub-hero{position:relative;isolation:isolate;background:#edf3f5 url('assets/img/hero-1.webp') center 52%/cover no-repeat;border-bottom:1px solid #dde6eb;}
.sub-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(239,245,248,.98) 0%,rgba(239,245,248,.92) 36%,rgba(239,245,248,.28) 100%);}
.sub-hero__inner{min-height:300px;padding-block:58px 36px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;box-sizing:border-box;}
.sub-hero__eyebrow{display:flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.19em;font-weight:650;color:#557a8d;margin:0 0 16px;}
.sub-hero__eyebrow::before{content:"";width:26px;height:1px;background:currentColor;}
.sub-hero__title{max-width:850px;margin:0;color:#193e50;font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:650;line-height:1.35;letter-spacing:-.045em;word-break:keep-all;overflow-wrap:anywhere;}
.sub-hero__breadcrumb{margin-top:28px;max-width:100%;}
.sub-hero__breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px 0;list-style:none;padding:0;margin:0;font-size:.8rem;line-height:1.6;color:#617b88;}
.sub-hero__breadcrumb li,.sub-hero__breadcrumb a{display:flex;align-items:center;gap:7px;}
.sub-hero__breadcrumb li{min-width:0;}
.sub-hero__breadcrumb a{color:inherit;text-decoration:none;}
.sub-hero__breadcrumb a:hover{text-decoration:underline;color:#193e50;}
.sub-hero__breadcrumb a:focus-visible{outline:2px solid #557a8d;outline-offset:4px;}
.sub-hero__breadcrumb [aria-current]{color:#264d60;overflow-wrap:anywhere;}
.sub-hero__home{width:16px;height:16px;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;}
.sub-hero__separator{width:16px;height:16px;margin:0 9px;flex:none;stroke:#91a6b1;stroke-width:1.3;}
.sub-hero + article:not(.info):not(.disease)>.entry{padding-top:clamp(36px,5vw,64px);}
.sub-hero ~ article .page-head{padding-block:28px 18px;margin-bottom:0;background:transparent;}
.sub-hero ~ .container>.page-head{padding:0;margin:0 0 25px;}
@media(max-width:620px){.sub-hero{background-position:65% center;}.sub-hero::before{background:linear-gradient(90deg,rgba(239,245,248,.97),rgba(239,245,248,.65));}.sub-hero__inner{min-height:230px;padding-block:35px 28px;}.sub-hero__eyebrow{font-size:.6rem;margin-bottom:13px;}.sub-hero__breadcrumb{margin-top:22px;}.sub-hero__breadcrumb ol{font-size:.72rem;}.sub-hero__separator{margin:0 4px;}}