/* ==========================================================================
   하지정맥류 수술비용 정보센터 — 공통 디자인 시스템
   블루-티일 팔레트 · 8pt 스케일 · 일관 토큰 · 접근성 AA
   ========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --brand:#0d6e8c;          /* 주색: 딥 티일-블루 */
  --brand-2:#0f9a94;        /* 보조: 티일 */
  --brand-ink:#0b3a4a;      /* 짙은 헤드라인 */
  --accent:#0f9a94;
  --ink:#17232e;
  --body:#33424e;
  --muted:#67757f;
  --line:#e6ecf0;
  --line-2:#d5dfe5;
  --bg:#ffffff;
  --bg-soft:#f4f8fa;
  --bg-tint:#eef5f7;
  --warn-bg:#fffbea;--warn-line:#f0d98a;
  --ok:#0f9a94;
  --r-xs:6px;--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;--sp-7:96px;--sp-8:128px;
  --sh-1:0 1px 2px rgba(16,42,55,.06),0 1px 3px rgba(16,42,55,.05);
  --sh-2:0 6px 18px rgba(16,42,55,.08);
  --sh-3:0 18px 48px rgba(16,42,55,.12);
  --maxw:1120px;--readw:760px;
  --t:180ms cubic-bezier(.2,.6,.2,1);
  --font:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.vsi, .vsi{font-family:var(--font);color:var(--body);background:var(--bg);line-height:1.75;font-size:17px;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.vsi img{max-width:100%;height:auto;display:block}
.vsi a{color:var(--brand);text-decoration:none;transition:color var(--t)}
.vsi a:hover{color:var(--brand-ink)}
.vsi :focus-visible{outline:3px solid rgba(15,154,148,.45);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- 타이포 ---------- */
.vsi h1,.vsi h2,.vsi h3,.vsi h4{color:var(--brand-ink);line-height:1.32;letter-spacing:-.02em;font-weight:800}
.vsi h2{font-size:clamp(1.42rem,1.1rem+1.4vw,1.9rem);margin:2.4em 0 .7em;position:relative;padding-top:.2em}
.vsi h3{font-size:clamp(1.14rem,1rem+.6vw,1.32rem);margin:1.9em 0 .5em}
.vsi p{margin:0 0 1.15em}
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2)}

/* ---------- 헤더/네비 ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--brand-ink);letter-spacing:-.02em}
.brand .mark{width:38px;height:38px;flex:0 0 38px}
.brand .bt{display:flex;flex-direction:column;line-height:1.12}
.brand .bt b{font-size:1.02rem}
.brand .bt small{font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{padding:9px 14px;border-radius:var(--r-pill);font-size:.95rem;font-weight:600;color:var(--body);min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{background:var(--bg-tint);color:var(--brand-ink)}
.nav .btn{margin-left:6px}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{width:20px;height:2px;background:var(--brand-ink);position:relative;display:block}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--brand-ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:var(--r-pill);font-weight:700;font-size:.98rem;cursor:pointer;border:1px solid transparent;transition:transform var(--t),box-shadow var(--t),background var(--t)}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--brand-ink)}
.btn-ghost:hover{background:var(--bg-tint);color:var(--brand-ink);border-color:var(--brand-2)}
.btn-lg{min-height:54px;padding:15px 30px;font-size:1.05rem}

/* ---------- 히어로 ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-tint),#fff)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
.hero h1{font-size:clamp(2rem,1.3rem+3vw,3.15rem);line-height:1.2;color:var(--brand-ink);margin:.35em 0 .5em;letter-spacing:-.03em}
.hero p.lead{font-size:1.12rem;color:var(--body);max-width:44ch;margin-bottom:1.8em}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative}
.hero-visual img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.hero-visual::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);background:linear-gradient(180deg,transparent 55%,rgba(11,58,74,.14));pointer-events:none}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.6em}
.hero-badges span{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600;color:var(--brand-ink);background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.hero-badges span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-2)}

/* ---------- 섹션 ---------- */
.section{padding:var(--sp-7) 0}
.section.soft{background:var(--bg-soft)}
.section-head{max-width:var(--readw);margin:0 auto var(--sp-5);text-align:center}
.section-head h2{margin:.3em 0 .35em;border:0;padding:0}
.section-head p{color:var(--muted);font-size:1.05rem}

/* ---------- 카드 그리드 ---------- */
.grid{display:grid;gap:24px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--bg-tint)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(.2,.6,.2,1)}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .kicker{font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--brand-2)}
.card h3{margin:0;font-size:1.1rem;line-height:1.4}
.card h3 a{color:var(--brand-ink)}
.card p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.card .more{margin-top:auto;padding-top:10px;font-weight:700;font-size:.9rem;color:var(--brand);display:inline-flex;align-items:center;gap:6px}

/* ---------- 특징 3열 ---------- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat .item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.feat .ic{width:46px;height:46px;border-radius:var(--r);background:var(--bg-tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--brand)}
.feat .ic svg{width:24px;height:24px}
.feat h3{margin:0 0 .35em;font-size:1.08rem}
.feat p{margin:0;color:var(--muted);font-size:.95rem}

/* ---------- 병원검색 위젯 ---------- */
.hsearch{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:30px 30px 34px;max-width:var(--maxw)}
.hsearch .row{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:12px;align-items:end}
.hsearch label{display:block;font-size:.82rem;font-weight:700;color:var(--brand-ink);margin:0 0 6px 2px}
.hsearch select,.hsearch input{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;font-size:.96rem;color:var(--ink);background:#fff}
.hsearch select:focus,.hsearch input:focus{border-color:var(--brand-2);outline:none;box-shadow:0 0 0 3px rgba(15,154,148,.16)}
.hs-meta{margin:16px 2px 0;font-size:.9rem;color:var(--muted)}
.hs-results{margin-top:20px;display:grid;gap:12px}
.hs-item{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:center;transition:border-color var(--t),box-shadow var(--t)}
.hs-item:hover{border-color:var(--brand-2);box-shadow:var(--sh-1)}
.hs-item .hi-main{min-width:0}
.hs-item .hi-name{font-weight:800;color:var(--brand-ink);font-size:1.04rem}
.hs-item .hi-sub{color:var(--muted);font-size:.9rem;margin-top:3px}
.hs-item .tag{display:inline-block;font-size:.74rem;font-weight:700;color:var(--brand);background:var(--bg-tint);border-radius:var(--r-pill);padding:3px 10px;margin-right:6px}
.hs-item .hi-act{display:flex;gap:8px;flex-shrink:0}
.hs-pager{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.hs-pager button{min-height:40px;min-width:40px;padding:8px 12px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-sm);font:inherit;font-weight:600;cursor:pointer;color:var(--body)}
.hs-pager button[aria-current="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.hs-empty{padding:30px;text-align:center;color:var(--muted)}

/* ---------- 본문(글/페이지) ---------- */
.article-hero{background:linear-gradient(180deg,var(--bg-tint),#fff);border-bottom:1px solid var(--line)}
.article-hero .wrap{max-width:var(--readw);padding-top:var(--sp-6);padding-bottom:var(--sp-4)}
.article-hero .cat{font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--brand-2)}
.article-hero h1{font-size:clamp(1.7rem,1.2rem+2.2vw,2.5rem);color:var(--brand-ink);margin:.4em 0 .5em;line-height:1.25}
.article-hero .meta{color:var(--muted);font-size:.9rem;display:flex;gap:14px;flex-wrap:wrap}
.article-body{max-width:var(--readw);margin:0 auto;padding:var(--sp-5) 24px var(--sp-6)}
.article-body>figure:first-child,.article-body>.vsi-figure:first-child{margin-top:0}
.vsi-lead{font-size:1.14rem;color:var(--ink);line-height:1.8;font-weight:500;margin-bottom:1.6em}
.vsi-figure{margin:2em 0}
.vsi-figure img{border-radius:var(--r);box-shadow:var(--sh-1);width:100%}
.vsi-figure figcaption{margin-top:10px;font-size:.85rem;color:var(--muted);text-align:center}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.3em}
.article-body li{margin:.4em 0}
.article-body ul{list-style:none;padding-left:0}
.article-body ul>li{position:relative;padding-left:1.5em}
.article-body ul>li::before{content:"";position:absolute;left:.2em;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--brand-2)}

/* 요약 박스 */
.vsi-summary{background:var(--bg-tint);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:0 0 2em}
.vsi-summary h2,.vsi-summary h3{margin:0 0 .5em;font-size:1rem;color:var(--brand-ink);border:0;padding:0}
.vsi-summary ul{margin:0}
.vsi-summary li{color:var(--ink)}

/* 콜아웃 */
.vsi-callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand-2);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:2em 0;color:var(--ink)}
.vsi-callout strong{color:var(--brand-ink)}
blockquote{margin:2em 0;padding:18px 24px;background:var(--bg-soft);border-left:4px solid var(--brand);border-radius:0 var(--r) var(--r) 0;color:var(--ink);font-size:1.02rem}
blockquote p:last-child{margin:0}

/* 표 */
.vsi-table{width:100%;border-collapse:separate;border-spacing:0;margin:1.8em 0;font-size:.94rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.vsi-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8em 0}
.vsi-tablewrap .vsi-table{margin:0;min-width:520px}
.vsi-table th,.vsi-table td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.vsi-table thead th{background:var(--brand-ink);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:-.01em}
.vsi-table tbody tr:nth-child(even){background:var(--bg-soft)}
.vsi-table tbody tr:last-child td{border-bottom:0}
.vsi-table .pill{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:var(--r-pill)}
.pill.cov{background:#e6f5f0;color:#0a7a5f}
.pill.non{background:#fdeeea;color:#b4552f}
.pill.mix{background:#eef2fb;color:#3a5bb0}

/* 단계 다이어그램 */
.vsi-steps{list-style:none;counter-reset:s;padding:0;margin:2em 0}
.vsi-steps li{position:relative;padding:14px 18px 14px 60px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;background:#fff}
.vsi-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.vsi-steps li b{color:var(--brand-ink);display:block;margin-bottom:2px}

/* 가로 막대 차트 */
.vsi-bars{margin:2em 0;display:grid;gap:14px}
.vsi-bars .bar{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center}
.vsi-bars .bar .lab{font-size:.9rem;font-weight:600;color:var(--brand-ink)}
.vsi-bars .bar .track{background:var(--bg-tint);border-radius:var(--r-pill);height:26px;position:relative;overflow:hidden}
.vsi-bars .bar .fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand),var(--brand-2));display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-size:.78rem;font-weight:700;min-width:34px}

/* FAQ */
.vsi-faq{margin:2.4em 0}
.vsi-faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:#fff;overflow:hidden}
.vsi-faq summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--brand-ink);list-style:none;position:relative;padding-right:46px}
.vsi-faq summary::-webkit-details-marker{display:none}
.vsi-faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-right:2px solid var(--brand-2);border-bottom:2px solid var(--brand-2);transform:translateY(-70%) rotate(45deg);transition:transform var(--t)}
.vsi-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.vsi-faq .fa{padding:0 20px 18px;color:var(--body)}
.vsi-faq .fa p:last-child{margin:0}

/* CTA 박스 */
.vsi-cta{margin:2.6em 0 .5em;background:linear-gradient(135deg,var(--brand-ink),var(--brand));border-radius:var(--r-lg);padding:30px 32px;color:#eaf6f9;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.vsi-cta h3{color:#fff;margin:0 0 .3em}
.vsi-cta p{margin:0;color:#cfe8ef;font-size:.96rem}
.vsi-cta .btn-ghost{background:#fff;border-color:#fff}

/* 관련글 */
.related{max-width:var(--maxw);margin:0 auto;padding:0 24px var(--sp-7)}
.related h2{font-size:1.35rem;color:var(--brand-ink);margin:0 0 24px;text-align:center}

/* 고지 */
.legal-notice,.ai-notice,.affiliate-notice{max-width:100%}
.article-body .legal-notice{margin-top:2.4em}

/* ---------- 푸터 ---------- */
.site-footer{background:var(--brand-ink);color:#c7dbe3;padding:var(--sp-6) 0 var(--sp-4);margin-top:var(--sp-6)}
.site-footer a{color:#dcecf1}
.site-footer a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:var(--sp-4);border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .brand{color:#fff}
.foot-brand .brand .bt b{color:#fff}
.foot-brand .brand .bt small{color:#9fc0cc}
.foot-brand p{margin:16px 0 0;font-size:.9rem;color:#a9c6d0;max-width:38ch;line-height:1.7}
.foot-col h4{color:#fff;font-size:.9rem;margin:0 0 14px;letter-spacing:.02em}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{font-size:.92rem}
.foot-legal{padding-top:24px;font-size:.8rem;color:#8fb0bc;line-height:1.7}
.foot-legal .disc{margin:0 0 14px}
.foot-legal .cr{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.foot-legal .legal-notice{background:rgba(255,255,255,.04);border-left-color:rgba(255,255,255,.35);color:#a9c6d0}
.foot-legal .legal-notice p{color:#a9c6d0}

/* ---------- 반응형 ---------- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
  .hero-visual{order:-1}
  .grid.g3,.feat{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .hsearch .row{grid-template-columns:1fr 1fr}
  .hsearch .row .col-q,.hsearch .row .col-btn{grid-column:1 / -1}
}
@media(max-width:640px){
  .vsi{font-size:16px}
  .nav{display:none;position:fixed;inset:68px 0 auto 0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;gap:2px;box-shadow:var(--sh-2)}
  .nav.open{display:flex}
  .nav a{width:100%;justify-content:flex-start}
  .nav-toggle{display:flex}
  .section{padding:var(--sp-5) 0}
  .grid.g3,.grid.g2,.feat{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:28px}
  .hsearch .row{grid-template-columns:1fr}
  .vsi-cta{flex-direction:column;align-items:flex-start}
  .vsi-bars .bar{grid-template-columns:96px 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
/* 스크롤 등장 */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}