@charset "UTF-8";
/* ==========================================================================
   CLEARLENS — Design System
   담백한 백색 · 라이트 틸 강조 · 여백을 살린 고급 타이포
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --paper:#ffffff;
  --paper-2:#f8fafb;
  --paper-3:#f1f6f7;
  --ink:#101619;
  --ink-2:#46545e;
  --ink-3:#5e6c75;
  --line:#e4eaed;
  --line-2:#eff3f5;
  --line-strong:#cdd8dc;
  --teal:#2b9c99;
  --teal-ink:#0f6c6a;
  --teal-deep:#0a5250;
  --teal-soft:#e9f5f4;
  --teal-mist:#f4fafa;
  --navy:#1b3b56;
  --gold:#a5813f;

  /* 8pt spacing scale */
  --s-05:4px;  --s-1:8px;   --s-15:12px; --s-2:16px;
  --s-3:24px;  --s-4:32px;  --s-5:48px;  --s-6:64px;
  --s-7:96px;  --s-8:128px; --s-9:160px;

  /* radii */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* elevation */
  --sh-1:0 1px 2px rgba(16,22,25,.04), 0 0 0 1px rgba(16,22,25,.035);
  --sh-2:0 6px 22px rgba(16,22,25,.055), 0 0 0 1px rgba(16,22,25,.03);
  --sh-3:0 18px 52px rgba(16,22,25,.09), 0 0 0 1px rgba(16,22,25,.03);
  --sh-teal:0 10px 30px rgba(15,108,106,.14);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:150ms; --t:220ms; --t-slow:320ms;

  /* layout */
  --wrap:1200px;
  --wrap-narrow:820px;
  --prose:760px;
  --header-h:72px;

  /* type */
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-serif:"Noto Serif KR","Nanum Myeongjo",Georgia,"Times New Roman",serif;
  --font-num:"Pretendard Variable",Pretendard,ui-monospace,"SF Mono",Menlo,monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.75;
  font-weight:400;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
svg{display:block;flex:none}
/* 크기 지정이 없는 인라인 아이콘의 안전한 기본값 */
svg:not([width]){width:20px;height:20px}
a{color:var(--teal-ink);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--teal-deep)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-5) 0}
::selection{background:var(--teal-soft);color:var(--teal-deep)}

/* focus ring — keyboard only */
:focus{outline:none}
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:var(--r-xs)}

/* ---------- Typography scale ---------- */
.cl-display{
  font-size:clamp(2.35rem,1.55rem + 3.3vw,4.4rem);
  font-weight:300;line-height:1.14;letter-spacing:-.035em;color:var(--ink);
}
.cl-h1{font-size:clamp(1.95rem,1.35rem + 2.2vw,3.05rem);font-weight:300;line-height:1.22;letter-spacing:-.03em}
.cl-h2{font-size:clamp(1.5rem,1.2rem + 1.05vw,2.1rem);font-weight:400;line-height:1.32;letter-spacing:-.026em}
.cl-h3{font-size:clamp(1.1rem,1.03rem + .32vw,1.32rem);font-weight:600;line-height:1.45;letter-spacing:-.018em}
.cl-lead{font-size:clamp(1.03rem,.99rem + .22vw,1.17rem);line-height:1.82;color:var(--ink-2);font-weight:350}
.cl-small{font-size:.875rem;line-height:1.7;color:var(--ink-3)}
.cl-xsmall{font-size:.8125rem;line-height:1.65;color:var(--ink-3)}

.cl-eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-ink);
}
.cl-eyebrow::before{content:"";width:22px;height:1px;background:var(--teal);flex:none}
.cl-eyebrow--center::before{display:none}

/* ---------- Layout ---------- */
.cl-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.cl-wrap--narrow{max-width:var(--wrap-narrow)}
.cl-section{padding-block:clamp(64px,7vw,128px)}
.cl-section--tight{padding-block:clamp(48px,5vw,88px)}
.cl-section--soft{background:var(--paper-2)}
.cl-section--mist{background:var(--teal-mist)}
.cl-section--line{border-top:1px solid var(--line)}

.cl-head{max-width:720px;margin-bottom:clamp(36px,4vw,64px)}
.cl-head--center{margin-inline:auto;text-align:center}
.cl-head .cl-h2{margin-top:var(--s-2)}
.cl-head .cl-lead{margin-top:var(--s-2);max-width:62ch}
.cl-head--center .cl-lead{margin-inline:auto}

.cl-grid{display:grid;gap:var(--s-3)}
@media (min-width:720px){
  .cl-grid--2{grid-template-columns:repeat(2,1fr)}
  .cl-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1020px){
  .cl-grid--3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Buttons ---------- */
.cl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);
  min-height:48px;padding:0 26px;border-radius:var(--r-pill);
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;text-align:center;
  white-space:nowrap;flex:0 0 auto;max-width:100%;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.cl-btn svg{flex:none;width:18px;height:18px}
@media (max-width:400px){
  .cl-btn{padding-inline:20px;font-size:.9rem}
}
.cl-btn:hover{transform:translateY(-1px)}
.cl-btn:active{transform:translateY(0)}
.cl-btn--primary{background:var(--teal-ink);color:#fff;box-shadow:var(--sh-teal)}
.cl-btn--primary:hover{background:var(--teal-deep);color:#fff}
.cl-btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.cl-btn--ghost:hover{border-color:var(--teal);color:var(--teal-ink);background:var(--teal-mist)}
.cl-btn--quiet{background:transparent;color:var(--teal-ink);padding-inline:4px;min-height:44px}
.cl-btn--quiet:hover{color:var(--teal-deep)}
.cl-btn--sm{min-height:44px;padding:0 18px;font-size:.875rem}
.cl-btn--block{width:100%}

.cl-arrow{transition:transform var(--t) var(--ease)}
.cl-btn:hover .cl-arrow{transform:translateX(3px)}

/* ---------- Header / Nav ---------- */
.cl-header{
  position:sticky;top:0;z-index:120;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.cl-header.is-stuck{border-bottom-color:var(--line);background:rgba(255,255,255,.94)}
.cl-header__inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 24px;
  min-height:var(--header-h);display:flex;align-items:center;gap:var(--s-2);
}
.cl-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);flex:none;min-height:44px}
.cl-logo:hover{color:var(--ink)}
.cl-logo svg{width:30px;height:30px;flex:none}
.cl-logo__text{display:flex;flex-direction:column;line-height:1.1}
.cl-logo__name{font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.cl-logo__sub{font-size:.65rem;letter-spacing:.1em;color:var(--ink-3);font-weight:500}

.cl-nav{margin-left:auto;display:none}
.cl-nav ul{display:flex;align-items:center;gap:var(--s-1)}
.cl-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:.92rem;font-weight:500;color:var(--ink-2);border-radius:var(--r-xs);
  position:relative;transition:color var(--t-fast) var(--ease)
}
.cl-nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:14px;height:1px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease)
}
.cl-nav a:hover,.cl-nav a[aria-current="page"]{color:var(--ink)}
.cl-nav a:hover::after,.cl-nav a[aria-current="page"]::after{transform:scaleX(1)}
.cl-header__cta{display:none;margin-left:var(--s-2);flex:none}
@media (min-width:1040px){
  .cl-nav{display:block}
  .cl-header__cta{display:inline-flex}
}

.cl-burger{
  margin-left:auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--r-xs);cursor:pointer
}
.cl-burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:background var(--t) var(--ease)}
.cl-burger span::before,.cl-burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);
  transition:transform var(--t) var(--ease),top var(--t) var(--ease)
}
.cl-burger span::before{top:-6px}
.cl-burger span::after{top:6px}
.cl-burger[aria-expanded="true"] span{background:transparent}
.cl-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.cl-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (min-width:1040px){.cl-burger{display:none}}

.cl-mobnav{
  position:fixed;inset:var(--header-h) 0 auto 0;background:#fff;z-index:119;
  border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)
}
.cl-mobnav.is-open{transform:none;opacity:1;visibility:visible}
.cl-mobnav ul{padding:var(--s-2) 24px var(--s-4)}
.cl-mobnav a{display:flex;align-items:center;min-height:52px;font-size:1.02rem;color:var(--ink);border-bottom:1px solid var(--line-2)}
.cl-mobnav .cl-btn{margin-top:var(--s-3)}
@media (min-width:1040px){.cl-mobnav{display:none}}

/* ---------- Source badges (학회 인증 배지열 패턴) ---------- */
.cl-badgerow{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1);
  padding-block:var(--s-2);position:relative;
  /* 툴팁이 우측 가장자리에서 가로 스크롤을 만들지 않도록 잘라낸다(세로는 보임) */
  overflow-x:clip;overflow-clip-margin:80px
}
.cl-badge{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  font-size:.78rem;font-weight:600;color:var(--navy);letter-spacing:-.01em;cursor:default;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)
}
.cl-badge:hover,.cl-badge:focus-visible{border-color:var(--gold);box-shadow:var(--sh-1);transform:translateY(-1px)}
.cl-badge__mark{
  width:18px;height:18px;flex:none;border-radius:50%;
  background:linear-gradient(140deg,#d9bd85,var(--gold));
  display:inline-flex;align-items:center;justify-content:center
}
.cl-badge__mark svg{width:10px;height:10px;color:#fff}
.cl-badge__tip{
  position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,4px);
  width:max-content;max-width:min(280px,80vw);padding:10px 13px;
  background:var(--navy);color:#fff;border-radius:var(--r-xs);
  font-size:.75rem;font-weight:400;line-height:1.55;letter-spacing:0;
  opacity:0;visibility:hidden;pointer-events:none;z-index:20;
  box-shadow:var(--sh-3);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)
}
.cl-badge__tip::before{
  content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;
  background:var(--navy);transform:translateX(-50%) rotate(45deg)
}
.cl-badge:hover .cl-badge__tip,.cl-badge:focus-visible .cl-badge__tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.cl-badge__tip b{display:block;font-weight:600;margin-bottom:2px}
/* 좁은 화면 — 툴팁을 배지열 전체 기준으로 중앙 정렬해 화면 밖으로 나가지 않게 한다 */
@media (max-width:719px){
  .cl-badge{position:static}
  .cl-badge__tip{left:50%;top:auto;bottom:-6px;width:calc(100% - 16px);max-width:none;transform:translate(-50%,calc(100% + 4px))}
  .cl-badge__tip::before{display:none}
  .cl-badge:hover .cl-badge__tip,.cl-badge:focus-visible .cl-badge__tip{transform:translate(-50%,100%)}
}

/* ---------- Hero (청결한 여백의 첫 장) ---------- */
.cl-hero{position:relative;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(48px,5vw,80px);text-align:center;background:#fff}
.cl-hero__inner{max-width:840px;margin-inline:auto;padding-inline:24px}
.cl-hero .cl-display{margin-top:var(--s-3)}
.cl-hero__sub{margin-top:var(--s-3);max-width:46ch;margin-inline:auto}
.cl-hero__actions{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-15);justify-content:center}
.cl-hero__rule{width:40px;height:1px;background:var(--teal);margin:var(--s-5) auto 0}
.cl-hero__visual{
  margin:var(--s-5) auto 0;max-width:720px;padding-inline:24px
}
.cl-hero__visual figure{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);background:var(--paper-3);aspect-ratio:1823/863
}
.cl-hero__visual img{width:100%;height:100%;object-fit:cover}
.cl-hero__caption{margin-top:var(--s-15);text-align:center}

/* ---------- Cards ---------- */
.cl-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-3);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)
}
.cl-card:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);transform:translateY(-2px)}
.cl-card__icon{
  width:44px;height:44px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;
  background:var(--teal-soft);color:var(--teal-ink);margin-bottom:var(--s-2)
}
.cl-card__icon svg{width:22px;height:22px}

/* ---------- 비용 항목 그리드 : 상세오픈 포커스 ---------- */
.cl-focusgrid{display:grid;gap:var(--s-2);grid-template-columns:1fr}
@media (min-width:720px){.cl-focusgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.cl-focusgrid{grid-template-columns:repeat(3,1fr)}}
.cl-focusgrid.has-active .cl-fc:not(.is-active){opacity:.5}

.cl-fc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:opacity var(--t-slow) var(--ease),border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease),grid-column var(--t) var(--ease)
}
.cl-fc:hover{border-color:var(--line-strong)}
.cl-fc.is-active{
  border-color:var(--teal);box-shadow:var(--sh-2);opacity:1
}
@media (min-width:720px){.cl-fc.is-active{grid-column:1 / -1}}
.cl-fc__btn{
  width:100%;display:flex;align-items:flex-start;gap:var(--s-2);
  background:none;border:0;padding:var(--s-3);text-align:left;cursor:pointer;min-height:44px
}
.cl-fc__ic{
  width:42px;height:42px;flex:none;border-radius:var(--r-xs);
  background:var(--teal-soft);color:var(--teal-ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)
}
.cl-fc__ic svg{width:21px;height:21px}
.cl-fc.is-active .cl-fc__ic{background:var(--teal-ink);color:#fff}
.cl-fc__t{flex:1;min-width:0}
.cl-fc__t h3{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;line-height:1.4}
.cl-fc__tag{
  display:inline-block;margin-top:6px;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--ink-2)
}
.cl-fc__tag--np{background:#fdf3e7;color:#8a6224}
.cl-fc__tag--gy{background:var(--teal-soft);color:var(--teal-deep)}
.cl-fc__chev{
  flex:none;width:26px;height:26px;color:var(--ink-3);margin-top:8px;
  transition:transform var(--t) var(--ease),color var(--t) var(--ease)
}
.cl-fc.is-active .cl-fc__chev{transform:rotate(180deg);color:var(--teal-ink)}
.cl-fc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
.cl-fc.is-active .cl-fc__panel{grid-template-rows:1fr}
.cl-fc__panelin{overflow:hidden}
.cl-fc__body{padding:0 var(--s-3) var(--s-3);border-top:1px solid var(--line-2);margin-top:2px;padding-top:var(--s-3)}
.cl-fc__body p{color:var(--ink-2);max-width:70ch}
.cl-fc__body ul{margin-top:var(--s-2);display:grid;gap:10px}
.cl-fc__body li{position:relative;padding-left:20px;color:var(--ink-2);font-size:.95rem}
.cl-fc__body li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--teal)}
.cl-fc__body .cl-btn{margin-top:var(--s-3)}

/* ---------- 인용 블록 (진료철학 패턴) ---------- */
.cl-quotes{display:grid;gap:var(--s-4)}
@media (min-width:860px){.cl-quotes{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
.cl-quote figure{margin:0}
.cl-quote__img{
  border-radius:var(--r);overflow:hidden;background:var(--paper-3);
  aspect-ratio:4/3;box-shadow:var(--sh-1)
}
.cl-quote__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* 세로로 긴 인물 사진 — 가운데를 자르면 얼굴이 잘려나가므로 위쪽을 기준으로 자른다 */
.cl-quote__img--top img{object-position:center top}
.cl-quote blockquote{
  margin-top:var(--s-3);padding-left:var(--s-3);border-left:2px solid var(--teal);
  font-family:var(--font-serif);font-size:1.12rem;line-height:1.85;font-weight:300;
  color:var(--ink);letter-spacing:-.015em
}
.cl-quote__sign{
  margin-top:var(--s-2);padding-left:var(--s-3);
  font-size:.82rem;letter-spacing:.06em;color:var(--ink-3);font-weight:500
}
.cl-quote__sign b{display:block;font-family:var(--font-serif);font-size:1rem;font-weight:500;color:var(--ink-2);letter-spacing:-.01em;margin-bottom:3px}

/* ---------- 파노라마 ---------- */
.cl-pano{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);
  box-shadow:var(--sh-2)
}
.cl-pano img{width:100%;height:auto;display:block}
.cl-pano__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cl-pano__scroll img{max-width:none;width:auto;height:clamp(200px,34vw,420px)}
@media (min-width:1100px){
  .cl-pano__scroll{overflow-x:visible}
  .cl-pano__scroll img{width:100%;height:auto}
}
.cl-pano__hint{margin-top:var(--s-15);text-align:center}
@media (min-width:1100px){.cl-pano__hint{display:none}}

/* ---------- 장비실 라벨 투어 ---------- */
.cl-tour{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
@media (min-width:960px){.cl-tour{grid-template-columns:1.35fr 1fr;gap:var(--s-5);align-items:start}}
.cl-tour__stage{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-3);box-shadow:var(--sh-1);aspect-ratio:3/2}
.cl-tour__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--t-slow) var(--ease)
}
.cl-tour__stage img.is-on{opacity:1}
.cl-tour__pin{
  position:absolute;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--teal-deep);border:1px solid var(--teal);
  font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 2px 10px rgba(16,22,25,.18);
  transform:translate(-50%,-50%);transition:transform var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)
}
/* 시각 크기는 유지하고 터치 영역만 44px로 넓힌다 */
.cl-tour__pin::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
/* 현재 보이는 사진에 속하지 않는 핀은 감춘다 (author display 가 UA [hidden] 을 덮으므로 명시) */
.cl-tour__pin[hidden]{display:none}
.cl-tour__pin:hover{transform:translate(-50%,-50%) scale(1.12)}
.cl-tour__pin.is-active{background:var(--teal-ink);color:#fff;border-color:var(--teal-ink);transform:translate(-50%,-50%) scale(1.15)}
.cl-tour__panel{border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3);background:#fff}
.cl-tour__panel h3{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.cl-tour__num{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--teal-ink);color:#fff;font-size:.75rem;font-weight:700;margin-right:10px
}
.cl-tour__panel p{margin-top:var(--s-15);color:var(--ink-2);font-size:.96rem}
.cl-tour__meta{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line-2);display:grid;gap:8px}
.cl-tour__meta div{display:flex;gap:12px;font-size:.87rem}
.cl-tour__meta dt{color:var(--ink-3);flex:none;width:82px}
.cl-tour__meta dd{margin:0;color:var(--ink-2)}
.cl-tour__nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3)}
.cl-tour__nav button{
  min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;font-size:.85rem;color:var(--ink-2);cursor:pointer;
  transition:all var(--t) var(--ease)
}
.cl-tour__nav button:hover{border-color:var(--teal);color:var(--teal-ink)}
.cl-tour__nav button.is-active{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}

/* ---------- 썸네일 슬라이드 캐러셀 ---------- */
.cl-carousel{position:relative}
.cl-carousel__track{
  display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  padding:6px 24px var(--s-3);margin-inline:-24px;scrollbar-width:none
}
.cl-carousel__track::-webkit-scrollbar{display:none}
.cl-carousel__item{
  flex:0 0 clamp(258px,78vw,340px);scroll-snap-align:center;
  transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease)
}
@media (min-width:760px){.cl-carousel__item{flex-basis:340px;scroll-snap-align:start}}
.cl-carousel__item:not(.is-active){opacity:.62}
.cl-carousel__item.is-active{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  .cl-carousel__item.is-active{transform:none}
  .cl-carousel__item:not(.is-active){opacity:1}
}
.cl-carousel__ctrl{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--s-2)}
.cl-carousel__ctrl button{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--ease)
}
.cl-carousel__ctrl button:hover{border-color:var(--teal);color:var(--teal-ink)}
.cl-carousel__ctrl button:disabled{opacity:.35;cursor:default}
.cl-carousel__ctrl svg{width:18px;height:18px}

/* post card */
.cl-pcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.cl-pcard:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.cl-pcard__img{aspect-ratio:16/10;background:var(--paper-3);overflow:hidden}
.cl-pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.cl-pcard:hover .cl-pcard__img img{transform:scale(1.04)}
.cl-pcard__body{padding:var(--s-3);display:flex;flex-direction:column;gap:10px;flex:1}
.cl-pcard__date{font-size:.75rem;letter-spacing:.06em;color:var(--ink-3)}
.cl-pcard__title{font-size:1.06rem;font-weight:600;line-height:1.5;letter-spacing:-.022em;color:var(--ink)}
.cl-pcard:hover .cl-pcard__title{color:var(--teal-deep)}
.cl-pcard__ex{font-size:.9rem;color:var(--ink-2);line-height:1.7;flex:1}
.cl-pcard__more{font-size:.84rem;font-weight:600;color:var(--teal-ink);display:inline-flex;align-items:center;gap:6px}

/* ---------- FAQ 증상 리스트 ---------- */
.cl-faq{border-top:1px solid var(--line);max-width:var(--wrap-narrow)}
.cl-faq__item{border-bottom:1px solid var(--line)}
.cl-faq__q{
  width:100%;display:flex;align-items:flex-start;gap:var(--s-2);
  background:none;border:0;padding:var(--s-3) 0;text-align:left;cursor:pointer;
  font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.6;min-height:44px
}
.cl-faq__q:hover{color:var(--teal-deep)}
.cl-faq__q span{flex:1}
.cl-faq__sign{
  flex:none;width:22px;height:22px;margin-top:4px;position:relative;color:var(--teal-ink)
}
.cl-faq__sign::before,.cl-faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)
}
.cl-faq__sign::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.cl-faq__sign::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.cl-faq__item.is-open .cl-faq__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.cl-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
.cl-faq__item.is-open .cl-faq__a{grid-template-rows:1fr}
.cl-faq__ain{overflow:hidden}
.cl-faq__a p{padding-bottom:var(--s-3);color:var(--ink-2);max-width:70ch;font-size:.98rem}
.cl-faq__a p + p{padding-top:0;margin-top:-8px}

/* ---------- 데이터 표 ---------- */
.cl-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.cl-table{min-width:520px;font-size:.93rem}
.cl-table th,.cl-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.cl-table thead th{
  background:var(--paper-2);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-2);text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap
}
.cl-table tbody tr:last-child td{border-bottom:0}
.cl-table tbody tr:hover{background:var(--teal-mist)}
.cl-table td b{font-weight:600;color:var(--ink)}

/* ---------- 지역 검색 (hospital finder) ---------- */
.cl-finder{display:grid;gap:var(--s-3)}
.cl-finder__controls{
  display:grid;gap:var(--s-2);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s-3)
}
@media (min-width:760px){.cl-finder__controls{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.cl-finder__controls{grid-template-columns:repeat(4,1fr)}}
.cl-field{display:flex;flex-direction:column;gap:8px}
.cl-field > label{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.cl-input,.cl-select,.cl-textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r-xs);background:#fff;font-size:.95rem;color:var(--ink);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)
}
.cl-select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a83' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px
}
.cl-textarea{min-height:140px;resize:vertical;line-height:1.7}
.cl-input:focus,.cl-select:focus,.cl-textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);outline:none}
.cl-input::placeholder,.cl-textarea::placeholder{color:#9aa7ae}

.cl-finder__summary{
  display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:space-between;
  padding:var(--s-2) 0;border-bottom:1px solid var(--line)
}
.cl-stat{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cl-stat__i{display:flex;flex-direction:column;gap:2px}
.cl-stat__k{font-size:.74rem;letter-spacing:.06em;color:var(--ink-3)}
.cl-stat__v{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.cl-stat__v em{font-style:normal;font-size:.8rem;font-weight:500;color:var(--ink-3);margin-left:3px}

/* 종별 전체 조회 시 — 안과 진료 여부 미확인 고지 */
.cl-scopenote{
  margin:0 0 var(--s-2);padding:12px 16px;
  border-left:3px solid var(--teal);border-radius:0 var(--r-xs) var(--r-xs) 0;
  background:var(--teal-mist);color:var(--ink-2);
  font-size:.86rem;line-height:1.7
}
.cl-scopenote b{color:var(--ink);font-weight:600}

.cl-results{display:grid;gap:var(--s-2)}
.cl-hosp{
  display:grid;gap:10px;padding:var(--s-3);background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)
}
.cl-hosp:hover{border-color:var(--teal);box-shadow:var(--sh-1)}
.cl-hosp__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.cl-hosp__name{font-size:1.06rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.cl-hosp__cl{
  font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--teal-soft);color:var(--teal-deep);flex:none
}
.cl-hosp__addr{font-size:.9rem;color:var(--ink-2)}
.cl-hosp__meta{display:flex;flex-wrap:wrap;gap:var(--s-2);font-size:.84rem;color:var(--ink-3)}
.cl-hosp__meta a{font-weight:600}
.cl-hosp__meta span{display:inline-flex;align-items:center;gap:5px}

.cl-map{height:clamp(300px,45vw,460px);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-3)}
.cl-map .leaflet-container{font:inherit}
.cl-map .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;font-size:20px}
.cl-map .leaflet-control-attribution{font-size:11px;padding:3px 8px}

.cl-loading{display:flex;align-items:center;gap:12px;padding:var(--s-4);justify-content:center;color:var(--ink-3);font-size:.9rem}
.cl-spin{width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--teal-ink);border-radius:50%;animation:cl-spin .7s linear infinite}
@keyframes cl-spin{to{transform:rotate(360deg)}}
.cl-empty{padding:var(--s-5) var(--s-3);text-align:center;color:var(--ink-3);border:1px dashed var(--line-strong);border-radius:var(--r)}

.cl-pager{display:flex;gap:10px;justify-content:center;align-items:center;padding-top:var(--s-3)}
.cl-pager button{
  min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:.88rem;color:var(--ink-2);transition:all var(--t) var(--ease)
}
.cl-pager button:hover:not(:disabled){border-color:var(--teal);color:var(--teal-ink)}
.cl-pager button:disabled{opacity:.35;cursor:default}
.cl-pager__now{font-size:.88rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- Floating consult chip ---------- */
.cl-chip{position:fixed;right:20px;bottom:20px;z-index:130;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cl-chip__menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cl-chip__link{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 16px;
  white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--sh-2);font-size:.875rem;font-weight:600;color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transform-origin:right center;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t),border-color var(--t) var(--ease)
}
.cl-chip__link svg{width:18px;height:18px;color:var(--teal-ink);flex:none}
.cl-chip__link:hover{border-color:var(--teal);color:var(--teal-deep)}
.cl-chip.is-open .cl-chip__link{opacity:1;visibility:visible;transform:none}
.cl-chip.is-open .cl-chip__link:nth-child(1){transition-delay:0ms}
.cl-chip.is-open .cl-chip__link:nth-child(2){transition-delay:45ms}
.cl-chip.is-open .cl-chip__link:nth-child(3){transition-delay:90ms}
.cl-chip__btn{
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--teal-ink);color:#fff;box-shadow:var(--sh-teal);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t) var(--ease),transform var(--t) var(--ease)
}
.cl-chip__btn:hover{background:var(--teal-deep);transform:scale(1.05)}
.cl-chip__btn svg{width:24px;height:24px;transition:transform var(--t) var(--ease)}
.cl-chip.is-open .cl-chip__btn svg{transform:rotate(135deg)}
@media (min-width:1040px){.cl-chip{right:28px;bottom:28px}}

/* ---------- Footer ---------- */
.cl-footer{background:var(--paper-2);border-top:1px solid var(--line);padding-block:var(--s-6) var(--s-4);margin-top:0}
.cl-footer__grid{display:grid;gap:var(--s-4)}
@media (min-width:860px){.cl-footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-5)}}
.cl-footer h2{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-2)}
.cl-footer ul{display:grid;gap:10px}
.cl-footer li a{font-size:.92rem;color:var(--ink-2)}
.cl-footer li a:hover{color:var(--teal-ink)}
.cl-footer__about p{font-size:.9rem;color:var(--ink-2);margin-top:var(--s-2);max-width:44ch;line-height:1.75}
.cl-footer__bottom{
  margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);justify-content:space-between;align-items:center
}
.cl-footer__bottom p{font-size:.8rem;color:var(--ink-3)}
.cl-footer__links{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cl-footer__links a{font-size:.8rem;color:var(--ink-3)}
.cl-footer__links a:hover{color:var(--teal-ink)}

/* 법적 고지 (전 페이지 상시 노출) */
.legal-notice{
  font-size:.8em;color:#777;background:#f8f9fa;border-left:3px solid #cbd5e1;
  padding:10px 14px;margin-top:2em;border-radius:0 6px 6px 0;line-height:1.7
}
.legal-notice p{margin:4px 0}
.cl-footer .legal-notice{margin-top:var(--s-4);background:#fff;border-color:var(--teal)}
.ai-notice{font-size:.85em;color:#888;margin-top:2em}

/* ---------- Prose (single / page) ---------- */
.cl-prose{max-width:var(--prose);margin-inline:auto;font-size:1.0625rem;line-height:1.8;color:var(--ink-2)}
.cl-prose > * + *{margin-top:1.35em}
.cl-prose p{color:var(--ink-2)}
.cl-prose h2{
  font-size:clamp(1.34rem,1.16rem + .7vw,1.7rem);font-weight:600;line-height:1.42;letter-spacing:-.026em;
  color:var(--ink);margin-top:2.4em;padding-top:var(--s-3);border-top:1px solid var(--line-2);
  position:relative
}
.cl-prose h2::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--teal)}
.cl-prose h3{font-size:clamp(1.1rem,1.04rem + .3vw,1.24rem);font-weight:600;color:var(--ink);margin-top:2em;letter-spacing:-.02em}
.cl-prose h4{font-size:1.02rem;font-weight:600;color:var(--ink);margin-top:1.8em}
.cl-prose strong{color:var(--ink);font-weight:600}
.cl-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(15,108,106,.35)}
.cl-prose a:hover{text-decoration-color:var(--teal-ink)}
.cl-prose ul,.cl-prose ol{display:grid;gap:12px;padding-left:0}
.cl-prose ul li{position:relative;padding-left:22px}
.cl-prose ul li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;background:var(--teal)}
.cl-prose ol{counter-reset:cl-ol}
.cl-prose ol li{position:relative;padding-left:32px;counter-increment:cl-ol}
.cl-prose ol li::before{
  content:counter(cl-ol);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--teal-soft);color:var(--teal-deep);font-size:.74rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center
}
.cl-prose blockquote{
  margin-block:2em;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background:var(--teal-mist);border-left:2px solid var(--teal);border-radius:0 var(--r-xs) var(--r-xs) 0;
  font-family:var(--font-serif);font-weight:300;font-size:1.06rem;line-height:1.85;color:var(--ink)
}
.cl-prose blockquote p{color:inherit}
.cl-prose figure{margin-block:2.2em}
.cl-prose figure img,.cl-prose > img{border-radius:var(--r);box-shadow:var(--sh-1);width:100%}
.cl-prose figcaption{margin-top:12px;font-size:.83rem;color:var(--ink-3);text-align:center}
.cl-prose table{margin-block:2em;font-size:.94rem}
.cl-prose :is(table) th,.cl-prose :is(table) td{padding:12px 16px;border-bottom:1px solid var(--line-2);text-align:left}
.cl-prose :is(table) thead th{background:var(--paper-2);font-size:.8rem;letter-spacing:.05em;color:var(--ink-2);font-weight:600}
.cl-prose .cl-tablewrap{margin-block:2em}
.cl-prose .cl-tablewrap table{margin:0}
.cl-prose code{background:var(--paper-3);padding:2px 6px;border-radius:4px;font-size:.9em}
.cl-prose pre{overflow-x:auto;background:var(--paper-3);padding:var(--s-3);border-radius:var(--r-xs)}
.cl-prose hr{margin-block:2.5em}

/* callout used inside posts */
.cl-note{
  margin-block:2em;padding:var(--s-3);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--paper-2)
}
.cl-note b{display:block;color:var(--ink);font-weight:600;margin-bottom:8px;font-size:.95rem}
.cl-note p{font-size:.95rem;margin:0;color:var(--ink-2)}
.cl-note ul{margin-top:10px}

/* checklist */
.cl-check{display:grid;gap:12px;margin-block:1.6em}
.cl-check li{position:relative;padding-left:30px;color:var(--ink-2)}
.cl-check li::before{
  content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:5px;
  border:1px solid var(--teal);background:var(--teal-soft)
}
.cl-check li::after{
  content:"";position:absolute;left:6px;top:11px;width:6px;height:3px;
  border-left:1.5px solid var(--teal-deep);border-bottom:1.5px solid var(--teal-deep);
  transform:rotate(-45deg)
}

/* ---------- Article header ---------- */
.cl-article__head{padding-block:clamp(40px,5vw,72px) 0;text-align:center}
.cl-article__meta{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;align-items:center;font-size:.82rem;color:var(--ink-3);letter-spacing:.03em}
.cl-article__meta a{color:var(--teal-ink);font-weight:600}
.cl-article__title{margin-top:var(--s-2);max-width:20ch;margin-inline:auto}
.cl-article__hero{margin-top:clamp(32px,4vw,56px)}
.cl-article__heroimg{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:16/9;background:var(--paper-3)}
.cl-article__hero img{width:100%;height:100%;object-fit:cover}
.cl-article__hero figcaption{margin-top:12px;font-size:.83rem;color:var(--ink-3);text-align:center}
.cl-article__body{padding-block:clamp(40px,5vw,64px)}

/* TOC */
.cl-toc{
  max-width:var(--prose);margin:0 auto clamp(32px,4vw,48px);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3);background:var(--paper-2)
}
.cl-toc__t{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-2)}
.cl-toc ol{counter-reset:cl-toc;display:grid;gap:9px}
.cl-toc li{counter-increment:cl-toc;position:relative;padding-left:26px}
.cl-toc li::before{
  content:counter(cl-toc,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:.72rem;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums
}
.cl-toc a{font-size:.93rem;color:var(--ink-2);line-height:1.6}
.cl-toc a:hover{color:var(--teal-ink)}

/* related */
.cl-related{padding-block:clamp(48px,5vw,80px);background:var(--paper-2);border-top:1px solid var(--line)}

/* archive list */
.cl-archive__grid{display:grid;gap:var(--s-3)}
@media (min-width:700px){.cl-archive__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.cl-archive__grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Consult form ---------- */
.cl-form{display:grid;gap:var(--s-3);max-width:var(--wrap-narrow);margin-inline:auto}
@media (min-width:720px){
  .cl-form__row2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
}
.cl-form__consent{
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3);background:var(--paper-2)
}
.cl-form__consent h3{font-size:.95rem;font-weight:600;margin-bottom:10px}
.cl-form__consent p{font-size:.86rem;color:var(--ink-2);line-height:1.75}
.cl-checkbox{display:flex;align-items:flex-start;gap:12px;margin-top:var(--s-2);cursor:pointer;min-height:44px;align-items:center}
.cl-checkbox input{width:20px;height:20px;flex:none;accent-color:var(--teal-ink);cursor:pointer}
.cl-checkbox span{font-size:.92rem;color:var(--ink)}
.cl-req{color:#b4472e;margin-left:3px}
.cl-alert{padding:var(--s-3);border-radius:var(--r);font-size:.93rem;line-height:1.7}
.cl-alert--ok{background:var(--teal-soft);border:1px solid var(--teal);color:var(--teal-deep)}
.cl-alert--err{background:#fdf1ee;border:1px solid #e8b9ac;color:#8f3a22}

/* ---------- Reveal on scroll ---------- */
.cl-reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
/* 자바스크립트가 꺼져 있어도 콘텐츠가 보이도록 — head 의 <noscript> 스타일과 함께 동작 */
.cl-reveal.is-in{opacity:1;transform:none}
.cl-reveal[data-d="1"]{transition-delay:80ms}
.cl-reveal[data-d="2"]{transition-delay:160ms}
.cl-reveal[data-d="3"]{transition-delay:240ms}

/* ---------- Utilities ---------- */
.cl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cl-skip{
  position:absolute;left:-9999px;top:8px;z-index:200;background:var(--teal-ink);color:#fff;
  padding:12px 20px;border-radius:var(--r-xs);font-size:.9rem
}
.cl-skip:focus{left:24px;color:#fff}
.cl-center{text-align:center}
.cl-mt-1{margin-top:var(--s-1)}.cl-mt-2{margin-top:var(--s-2)}.cl-mt-3{margin-top:var(--s-3)}
.cl-mt-4{margin-top:var(--s-4)}.cl-mt-5{margin-top:var(--s-5)}
.cl-muted{color:var(--ink-3)}
.cl-nowrap{white-space:nowrap}
.cl-stamp{
  display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;background:#fff
}
.cl-stamp svg{width:13px;height:13px;color:var(--teal)}

/* split media section */
.cl-split{display:grid;gap:var(--s-4);align-items:center}
@media (min-width:900px){
  .cl-split{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}
  .cl-split--rev .cl-split__media{order:2}
}
.cl-split__media{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);box-shadow:var(--sh-2);aspect-ratio:4/3}
.cl-split__media img{width:100%;height:100%;object-fit:cover}
.cl-split__body p{margin-top:var(--s-2)}
.cl-split__body .cl-btn{margin-top:var(--s-3)}
.cl-split__list{margin-top:var(--s-3);display:grid;gap:14px}
.cl-split__list li{position:relative;padding-left:26px;color:var(--ink-2);font-size:.97rem}
.cl-split__list li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;
  border:1.5px solid var(--teal)
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important
  }
  .cl-reveal{opacity:1;transform:none}
}

/* print */
@media print{
  .cl-header,.cl-chip,.cl-footer,.cl-carousel__ctrl{display:none}
  body{font-size:12pt}
}

/* ---------- Easy Table of Contents 방어 스타일 ----------
   플러그인 기본 목차(파란 링크 · 회색 제목)가 디자인 시스템 밖으로 새는 것을 막는다.
   자동 삽입은 설정에서 꺼두었지만, 플릿 자동화로 다시 켜지더라도 사이트 톤을 유지하도록 남겨둔다. */
#ez-toc-container,
.ez-toc-v2_0_67 #ez-toc-container{
  background:var(--paper-2) !important;border:1px solid var(--line) !important;
  border-radius:var(--r) !important;box-shadow:none !important;
  padding:var(--s-3) !important;max-width:var(--prose);margin:0 auto clamp(32px,4vw,48px) !important;
  width:auto !important;font-family:var(--font-sans)
}
#ez-toc-container p.ez-toc-title{
  color:var(--ink-3) !important;font-size:.78rem !important;font-weight:600 !important;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-2) !important
}
#ez-toc-container a,
#ez-toc-container a:visited{color:var(--ink-2) !important;font-size:.93rem !important;line-height:1.6;text-decoration:none}
#ez-toc-container a:hover{color:var(--teal-ink) !important}
#ez-toc-container .ez-toc-list-level-1 > li{margin-bottom:9px}
#ez-toc-container .ez-toc-counter > ul > li > a{font-weight:500}

/* ── 접근성: 고지 문구 명도대비 AA 확보 ─────────────────────────────
   법적 고지(legal-notice)·AI 작성 고지(ai-notice)의 문구와 크기는 그대로 두고
   글자색만 올려 WCAG AA(4.5:1)를 만족시킨다.
   #777/#888 → #5f6773 (각각 5.42:1 / 5.72:1) */
.legal-notice,
.legal-notice p,
.ai-notice{color:#5f6773 !important}
/* 지도 저작자 표시 링크도 AA 확보 (#0078a8 3.64:1 → #0a5f86 5.16:1)
   leaflet.css가 site.css 뒤에 로드돼 동일 특이도로는 밀리므로 !important 사용 */
.leaflet-container .leaflet-control-attribution a{color:#0a5f86 !important}

/* ── 네이버 SEO 마이크로데이터 목록(nseo) 디자인 통일 ─────────────────
   ItemList/ListItem 구조화 데이터 마크업은 그대로 두고 겉모습만 빌드 카드 규격으로
   맞춘다(플러그인 CSS가 body 인라인 <style>로 뒤에 오므로 특이도를 한 단계 올림). */
ol[class*="nseo-microdata-list"]{
  max-width:var(--wrap);
  padding:clamp(48px,5vw,72px) 24px clamp(56px,6vw,88px);
  border-top:1px solid var(--line);
  gap:var(--s-3);
  overflow:visible;
}
ol[class*="nseo-microdata-list"]::before{
  content:"건강정보 전체 보기";
  grid-column:1/-1;
  display:inline-flex;align-items:center;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:var(--s-05);
}
ol[class*="nseo-microdata-list"] > li{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  padding-bottom:0;
  text-align:left;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease);
}
ol[class*="nseo-microdata-list"] > li:hover{
  box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-strong);
}
ol[class*="nseo-microdata-list"] > li a{
  display:block;padding:0;border:0;border-radius:0;align-items:stretch;
}
ol[class*="nseo-microdata-list"] > li a:hover{border-color:transparent;box-shadow:none}
ol[class*="nseo-microdata-list"] > li img{
  aspect-ratio:16/10;object-fit:cover;margin-bottom:0;
  border-radius:0;background:var(--paper-3);
}
ol[class*="nseo-microdata-list"] > li .nseo-title{
  padding:14px 16px 16px;margin-top:0;
  font-size:.92rem;font-weight:600;line-height:1.5;
  letter-spacing:-.015em;color:var(--ink);
  transition:color var(--t) var(--ease);
}
ol[class*="nseo-microdata-list"] > li:hover .nseo-title{color:var(--teal-ink)}
@media (max-width:768px){
  ol[class*="nseo-microdata-list"]{padding-inline:20px;gap:var(--s-2)}
  ol[class*="nseo-microdata-list"] > li .nseo-title{padding:12px 13px 14px;font-size:.87rem}
}
/* 모바일에서 3열은 국문 제목이 잘게 끊겨 읽히므로 2열로 고정 */
@media (max-width:600px){
  ol[class*="nseo-microdata-list"]{grid-template-columns:repeat(2,1fr)}
}