/*
Theme Name: 진심장혈관흉부외과
Theme URI: https://jinvascularclinic.com/
Author: 상승기획
Description: 진심장혈관흉부외과의원 커스텀 워드프레스 테마 (기존 정적 사이트 디자인 이식)
Version: 1.0
Text Domain: jinvascular
*/
@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   진심장혈관흉부외과의원 — 공통 스타일시트
   브랜드 가치 : 자립(自立)  ／  디자인 모티프 : 맹그로브(형태·리듬)

   ▸ 색   흰색·검정 베이스 + 시그니처 한 가지(로고 하트 심홍 #D70051).
          기준은 원내 실사진 — 크림빛 석재 카운터, 화이트 벽, 블랙 슬랫 사인월.
          유채색은 심홍 하나뿐이다. 회색·크림 외의 다른 색을 절대 추가하지 않는다.
          심홍이 칠해지는 곳은 네 군데뿐 : 주 CTA 버튼 / 강조 세로선 / 작은 표식 / 로고.
   ▸ 검정 히어로·서브히어로·푸터에만. 원내의 블랙 슬랫 벽처럼 '한 면만' 어둡게 한다.
          나머지 섹션은 흰색 → 크림 → 석재빛 세 단계 밝기로만 리듬을 만든다.
   ▸ 형태 위만 아치, 아래는 직각 — 사방 둥근 모서리 금지
   ▸ 그림자 순수 검정 저알파 — 떠 있지 않고 가라앉게
   ▸ 모션 조수(潮水) — 느리고 확실하게, 튀지 않게
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 토큰 ───────────────────────────────────────── */
:root{
  /* 검정 — 히어로·서브히어로·푸터 전용. 다른 섹션에는 쓰지 않는다 */
  --deep:#141414;        /* 히어로 바닥 */
  --deep-2:#0B0B0B;      /* 푸터 */

  /* 잉크 — 검정 계열의 글자·버튼·테두리 (예전 --forest 자리) */
  --forest:#1A1A1A;      /* 로고 글자·전화번호·보조 버튼 */
  --forest-2:#000000;    /* 눌린 상태 */
  --forest-soft:#F2EFE9; /* 크림 : 이미지 프레임·안내 블록 바탕 */
  --brackish:#3F3F3F;    /* 중간 회색 : 설명 그림 선 */

  /* 시그니처 — 유일한 유채색 */
  --root:#D70051;        /* 로고 하트 심홍 */
  --root-2:#AE0041;      /* 눌린 상태 */
  --root-soft:#FCE9F0;
  --root-lite:#FF7B9C;   /* 검정 위 심홍 — #D70051은 --deep 위에서 3.1:1이라 미달 */

  /* 밝은 면 세 단계 — 이 세 가지 밝기로만 섹션 리듬을 만든다 */
  --paper:#FFFFFF;       /* 순백 */
  --soft:#F7F5F1;        /* 옅은 크림 */
  --stone:#EBE8E1;       /* 석재빛 — 원내 INFORMATION 카운터 톤 */

  --line:#E4E2DC;
  --line-soft:#EFEDE8;
  --text:#151515;
  --text-2:#3C3C3C;
  --muted:#6B6B6B;       /* 본문 보조 글자 (흰 바탕 대비 5.3:1) */
  --salt:#F7F6F3;        /* 검정 위의 글자 */

  /* 간격 — 임의값 금지, 아래 값만 사용 */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* 형태 */
  --wrap:1180px;
  --r:4px;                          /* 기본 모서리 — 거의 직각 */
  --arch:150px 150px var(--r) var(--r);   /* 지주근 아치 */
  --arch-sm:88px 88px var(--r) var(--r);
  --round-sm:88px;                       /* 위아래 모두 둥근 모서리 — 영상 칸 */

  /* 그림자 — 검정이 아니라 심록 */
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 16px 40px -26px rgba(0,0,0,.45);
  --shadow-lg:0 2px 4px rgba(0,0,0,.06), 0 28px 64px -32px rgba(0,0,0,.55);

  /* 모션 — 조수 */
  --tide:cubic-bezier(.22,.61,.36,1);
  --pop:cubic-bezier(.34,1.32,.64,1);    /* 끝에서 살짝 지나쳤다 돌아온다 — 툭 올라오는 느낌 */
  --t:.8s;
  --t-fast:.28s;

  /* 글꼴
     Noto Serif Bengali에는 한글 글리프가 없습니다(bengali/latin/latin-ext만 보유).
     브라우저는 글자 단위로 폰트를 고르므로 아래 순서대로 지정하면
     영문·숫자는 Noto Serif Bengali가, 한글은 형제 폰트인 Noto Serif KR이 담당합니다. */
  --font:'Noto Serif Bengali','Noto Serif KR','Nanum Myeongjo',serif;
}

/* ── 2. 리셋 ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.9;          /* 세리프 본문은 행간을 더 준다 */
  letter-spacing:.002em;    /* 세리프 한글은 음수 자간을 쓰지 않는다 */
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,p,figure,dl,dd{margin:0;}
h1,h2,h3,h4{line-height:1.42;text-wrap:balance;font-weight:700;}
/* 본문은 마지막 줄에 한두 글자만 남는 일이 없도록 브라우저에게 맡긴다.
   손으로 넣는 줄바꿈(.br-w)과 함께 쓰면 줄 길이가 고르게 잡힌다. */
p,li,dd,figcaption{text-wrap:pretty;}
/* ⭐손으로 넣은 줄바꿈은 넓은 화면에서만 살린다.
   좁은 화면에서 그대로 두면 한 줄에 두세 글자만 남아 오히려 지저분해진다.
   글을 고칠 때는 <br class="br-w"> 를 쓰고, 반드시 뜻이 끊기는 자리에만 넣는다. */
.br-w{display:none;}
@media (min-width:721px){ .br-w{display:inline;} }
ul,ol{margin:0;padding:0;list-style:none;}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a:focus-visible,button:focus-visible{outline:2px solid var(--root);outline-offset:3px;border-radius:var(--r);}
address{font-style:normal;}

/* ── 3. 레이아웃 ───────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--s3);padding-right:var(--s3);}
.section{padding-top:var(--s7);padding-bottom:var(--s7);}

/* 밝은 면 세 단계 — 검정은 히어로·푸터에만 두고, 본문은 밝기로만 나눈다 */
.section--paper{background:var(--paper);border-top:1px solid var(--line);}
.section--soft{background:var(--soft);border-top:1px solid var(--line);}

/* --deep 이라는 이름은 남기되(HTML 5개 파일이 참조) 실제로는 가장 짙은 '밝은 면'이다.
   원장 섹션이 여기 해당한다. 예전에 검정이었으므로, 검정 위를 전제로 쓰인
   하위 규칙들의 색을 여기서 전부 밝은 바탕용으로 되돌려 놓는다. */
.section--deep{background:var(--stone);color:var(--text);border-top:1px solid var(--line);}
.section--deep .sec-desc{color:var(--muted);}
.section--deep .sec-title,
.section--deep .sub-block__title{color:var(--text);}
.section--deep .doctor__name span{color:var(--root);}
.section--deep .doctor__quote{color:var(--text);border-left-color:var(--root);border-left-width:2px;}
.section--deep .career__group h4{color:var(--muted);}
.section--deep .career__group li{color:var(--text-2);}
.section--deep .career__group li::before{background:var(--root);}
.section--deep .society li{color:var(--text-2);background:var(--paper);border-color:var(--line);}
.section--deep .principle__item h4{border-bottom-color:var(--line);}
.section--deep .principle__item p{color:var(--muted);}
.section--deep .col-card__cat{color:var(--root);}

.sec-head{text-align:center;margin-bottom:var(--s6);}
.sec-head--left{text-align:left;}
/* 설명 문장 없이 제목만 두는 자리 — 아래 여백을 한 단계 줄여 빈 느낌을 없앤다 */
.sec-head--solo{margin-bottom:var(--s5);}
.sec-title{
  font-family:var(--font);
  font-size:clamp(26px,3.4vw,36px);
  letter-spacing:-.008em;
  line-height:1.45;
  color:var(--text);
}
.sec-desc{margin-top:var(--s2);color:var(--muted);font-size:16.5px;line-height:1.85;}

/* 한 섹션 안에서 흐름을 한 번 더 나눌 때 */
.sub-block{margin-top:var(--s7);}
.sub-block__head{text-align:center;margin-bottom:var(--s5);}
/* 제목 바로 아래 설명, 그 아래 버튼 — 셋이 붙어 있으면 답답하다.
   설명은 한 칸(s3), 버튼은 그보다 크게(s5) 띄워 눌러야 할 것이 분명히 보이게 한다. */
.sub-block__title + p{margin-top:var(--s3);color:var(--muted);font-size:16.5px;line-height:1.9;}
.sub-block .btn-row{margin-top:var(--s5);}
.sub-block__title{
  font-family:var(--font);
  font-size:clamp(21px,2.4vw,26px);
  letter-spacing:-.008em;line-height:1.5;
}

/* 버튼 — 모서리 거의 직각 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  height:56px;padding:0 var(--s4);border-radius:var(--r);
  font-size:16px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  line-height:1;                      /* 본문 1.9를 물려받으면 줄상자가 글자보다 훨씬 커져 중앙정렬이 폰트 메트릭에 휘둘린다 */
  transition:background var(--t-fast) var(--tide),color var(--t-fast) var(--tide),border-color var(--t-fast) var(--tide),
             transform var(--t-fast) var(--tide),box-shadow var(--t-fast) var(--tide);
}
.btn--root{background:var(--root);color:var(--salt);}
.btn--root:hover{background:var(--root-2);}
.btn--forest{background:var(--forest);color:var(--salt);}
.btn--forest:hover{background:var(--forest-2);}
.btn--line{border:1px solid var(--line);background:var(--paper);color:var(--text);}
.btn--line:hover{border-color:var(--forest);color:var(--forest);}
.btn--salt{border:1px solid rgba(247,246,243,.4);color:var(--salt);}
.btn--salt:hover{background:rgba(247,246,243,.1);border-color:var(--salt);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);}

/* 마우스로 가리켰을 때만(터치는 제외) 살짝 떠오르는 느낌을 준다.
   (hover:hover) + (pointer:fine) 이 아니면 터치 기기에서 탭한 뒤에도
   호버 상태가 눌어붙어 남는 문제가 생긴다 — PC에서만 걸리게 막아 둔다. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .btn:active{transform:translateY(-1px);transition-duration:.1s;}
}

/* 스크롤 등장 — 아래에서 차오르듯 */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t) var(--tide),transform var(--t) var(--tide);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  /* 이유 칸은 안쪽 요소가 움직이므로 여기서도 함께 풀어 준다 — 안 그러면 아예 안 보인다 */
  .reason__item.reveal > .reason__media,
  .reason__item.reveal > .reason__body{opacity:1;transform:none;transition:none;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ── 4. 헤더 ───────────────────────────────────────────
   히어로 영상 위에서는 완전히 숨겼다가,
   후기 섹션이 화면 절반을 넘어오면 위에서 아래로 내려옵니다.
   노출 판정은 js/main.js 가 담당하고 여기서는 상태만 정의합니다.  */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-soft);
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition:transform var(--t) var(--tide),
             opacity .55s var(--tide),
             background var(--t-fast) var(--tide),
             border-color var(--t-fast) var(--tide);
}
.header.is-visible{transform:none;opacity:1;pointer-events:auto;}
/* 스크립트가 실행되지 않는 환경에서는 헤더를 그냥 보여 준다 */
.no-js .header{transform:none;opacity:1;pointer-events:auto;}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:78px;}

.logo{display:flex;align-items:center;gap:10px;line-height:1.25;}
/* 병원 로고의 하트 마크 — 원본 로고에서 심벌만 잘라낸 것 */
.logo__mark{height:30px;width:auto;flex:none;}
.logo__ko{font-family:var(--font);font-size:22px;font-weight:700;letter-spacing:-.012em;color:var(--forest);}

.gnb{display:flex;align-items:center;gap:var(--s4);}
.gnb__item{position:relative;}
.gnb__link{display:flex;align-items:center;height:78px;line-height:1;font-size:16px;font-weight:500;letter-spacing:-.005em;transition:color var(--t-fast) var(--tide);}
.gnb__link:hover{color:var(--forest);}

.gnb__sub{
  position:absolute;top:66px;left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:194px;padding:var(--s1) 0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-fast) var(--tide),transform var(--t-fast) var(--tide),visibility var(--t-fast);
}
.gnb__item:hover .gnb__sub,.gnb__item:focus-within .gnb__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.gnb__sub a{display:block;padding:9px var(--s3);font-size:15px;color:var(--text-2);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast);}
.gnb__sub a:hover{background:var(--forest-soft);color:var(--forest);}

.header__tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;}
.header__tel span{font-size:10.5px;letter-spacing:.06em;color:var(--muted);}
.header__tel strong{font-size:20px;font-weight:700;color:var(--forest);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}

.burger{display:none;width:44px;height:44px;position:relative;}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:var(--text);transition:transform var(--t-fast) var(--tide),opacity var(--t-fast);}
.burger i:nth-child(1){top:16px;} .burger i:nth-child(2){top:22px;} .burger i:nth-child(3){top:28px;}
body.nav-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.nav-open .burger i:nth-child(2){opacity:0;}
body.nav-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ── 5. 히어로 — 수면 아래 ─────────────────────────── */
.hero{position:relative;min-height:100svh;min-height:calc(var(--vh, 1vh) * 100);display:flex;align-items:flex-end;background:var(--deep);overflow:hidden;}
.hero__media{position:absolute;inset:0;}
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 영상 두 편을 같은 자리에 겹쳐 두고 번갈아 보여 준다.
   재생이 끝난 쪽은 마지막 화면을 그대로 들고 있으므로,
   0.6초 동안 서로 넘기면 바뀌는 자리가 끊겨 보이지 않는다.
   1번에는 마크업에서 미리 is-on 을 달아 두어, 자바스크립트가 없어도 화면이 비지 않는다. */
.hero__media video{opacity:0;transition:opacity .6s var(--tide);}
.hero__media video.is-on{opacity:1;}
/* 영상 위 덮개 없음 — 원본 색을 그대로 보여 준다.
   예전에는 검정 그라데이션을 겹겹이(위 .72 / 중간 .34 / 아래 .92 + 좌측 .42) 깔아
   영상이 거의 죽었다. 전부 걷어냈다.
   글자 가독성은 화면을 어둡게 하는 대신 글자 자체의 그림자로만 지킨다
   (.hero__title / .hero__desc 의 text-shadow 참고). */
/* 버튼이 빠진 만큼 본문과 스크롤 표시 사이 여백을 한 단계 키운다 (s7 → s8) */
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:var(--s8);color:var(--salt);}
.hero__title{
  font-family:var(--font);
  font-size:clamp(32px,5.4vw,58px);
  line-height:1.34;letter-spacing:-.012em;
  /* 덮개를 걷어낸 만큼 글자 자체에 그림자를 둔다.
     화면 전체를 어둡게 만들지 않고 글자만 지켜 주는 방법. */
  text-shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 28px rgba(0,0,0,.45);
}
.hero__desc{
  margin-top:var(--s3);
  font-size:clamp(16px,1.85vw,19px);line-height:1.85;
  color:rgba(247,246,243,.88);max-width:36em;
  text-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 20px rgba(0,0,0,.5);
}

/* 스크롤 표시 — 물이 차오르는 세로선 */
.hero__scroll{
  position:absolute;left:50%;bottom:var(--s4);transform:translateX(-50%);z-index:2;
  width:1px;height:56px;background:rgba(247,246,243,.22);overflow:hidden;
}
.hero__scroll::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:100%;
  background:var(--salt);transform-origin:bottom;
  animation:tide 3.2s var(--tide) infinite;
}
@keyframes tide{
  0%   {transform:scaleY(0);}
  45%  {transform:scaleY(1);}
  55%  {transform:scaleY(1);}
  100% {transform:scaleY(0);}
}

/* 사실 띠 — 검정 히어로 바로 아래. 검정을 더 늘리지 않도록 크림으로 받는다 */
.waterline{background:var(--soft);color:var(--text);border-bottom:1px solid var(--line);}
.waterline__inner{display:grid;grid-template-columns:repeat(3,1fr);}
.waterline__item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--s3) var(--s2);text-align:center;
  border-left:1px solid var(--line);
}
.waterline__item:first-child{border-left:0;}
.waterline__item b{font-size:16px;font-weight:600;letter-spacing:-.005em;}
.waterline__item span{font-size:14px;color:var(--muted);}

/* ── 6-1. 후기 ─────────────────────────────────────── */
/* 후기 띠는 아래로 갈수록 종이 색에 잠긴다. 섹션 아래 여백까지 그대로 두면
   아무것도 없는 흰 자리가 길게 남으므로 한 단계 줄인다. */
.section--reviews{padding-bottom:var(--s5);}
/* 덮개가 잠길 색 — 섹션 바탕색과 맞춘다. 값은 --paper / --soft 와 같은 색의 rgb 성분이다. */
.reviews{position:relative;--veil:255,255,255;}
.section--soft .reviews{--veil:247,245,241;}
/* 후기 캡처가 왼쪽에서 오른쪽으로 천천히 흘러간다.
   사진마다 세로 길이가 달라 아랫단이 들쭉날쭉해지므로 아래를 잘라 낸다. */
/* 사진 폭 480px. 480px로 놓으면 사진 세로는 694~823px로 제각각이라,
   가장 긴 사진에 띠를 맞추면 짧은 사진 아래가 빈 흰 칸으로 남는다.
   ⭐가장 짧은 사진(694px)에 맞추고 나머지는 아래를 잘라 낸다 — 어차피 덮개에 잠기는 부분이다. */
.reviews__marquee{height:690px;overflow:hidden;}
.reviews__track{
  display:flex;align-items:flex-start;width:max-content;
  animation:review-slide 46s linear infinite;
}
/* 간격을 gap 이 아니라 margin 으로 주는 이유 :
   gap 을 쓰면 마지막 칸 뒤에 여백이 붙지 않아 track 의 절반이 한 벌 폭과 어긋난다.
   그러면 한 바퀴 돌 때마다 사진이 조금씩 튄다. */
.review-shot{
  flex:none;width:480px;height:auto;margin-right:var(--s2);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  user-select:none;pointer-events:none;
}
@keyframes review-slide{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
@media (prefers-reduced-motion:reduce){
  .reviews__track{animation:none;transform:none;}
}
.stars{color:var(--root);font-size:13px;letter-spacing:2px;}
.reviews__veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s2);
  /* 더미 카드 세 장을 덮던 시절의 값은 사진에 얹으니 너무 하얬습니다.
     위쪽은 거의 비워 사진이 보이게 두고, 아래로 갈수록 바탕색으로 잠기게 합니다.
     ⭐덮개가 잠기는 색은 반드시 그 섹션의 바탕색과 같아야 합니다.
       홈은 흰 섹션, 하지정맥류·투석혈관은 크림 섹션이라
       흰색으로 고정해 두면 아래쪽에 크림색 띠가 한 줄 남습니다. */
  padding:var(--s4);
  background:linear-gradient(180deg,
    rgba(var(--veil),0) 0%,
    rgba(var(--veil),.22) 46%,
    rgba(var(--veil),.72) 82%,
    rgb(var(--veil)) 100%);
}

/* ── 6-2. 의료진 — 수면 아래 ───────────────────────── */
.doctor{display:grid;grid-template-columns:.85fr 1fr;gap:var(--s7);align-items:center;}
.doctor__media{
  position:relative;overflow:hidden;background:var(--deep-2);
  border-radius:var(--arch);          /* 지주근 아치 */
  aspect-ratio:3/4;
}
.doctor__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--tide);}
.doctor__media img.is-on{opacity:1;}
/* 예전에는 사진 위에 '원장 인사 영상' 재생 버튼과 어두운 그라데이션 덮개가 있었습니다.
   사진만 단독으로 두기로 하여 버튼·덮개·유튜브 지연 로드 스크립트를 모두 걷어냈습니다.
   지금은 사진 3장이 5초 간격으로 겹쳐 페이드 전환됩니다(js/main.js data-photo-rotate). */

.doctor__name{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3);}
.doctor__name strong{font-family:var(--font);font-size:32px;letter-spacing:-.01em;}
.doctor__name span{font-size:15px;color:var(--root);font-weight:600;}
.doctor__quote{
  font-family:var(--font);
  font-size:20px;line-height:1.85;color:var(--salt);letter-spacing:-.005em;
  padding-left:var(--s3);border-left:1px solid rgba(247,246,243,.3);
  margin-bottom:var(--s5);
}
.career{display:grid;gap:var(--s4);}
.career__group h4{font-size:13px;font-weight:600;color:rgba(247,246,243,.5);margin-bottom:var(--s2);}
.career__group li{position:relative;padding-left:14px;font-size:15.5px;color:rgba(247,246,243,.88);line-height:1.95;}
.career__group li::before{content:"";position:absolute;left:0;top:13px;width:3px;height:3px;border-radius:50%;background:var(--root);}
.society{display:flex;flex-wrap:wrap;gap:var(--s1);}
.society li{
  padding:5px 13px;font-size:13.5px;color:rgba(247,246,243,.8);
  background:rgba(247,246,243,.07);border:1px solid rgba(247,246,243,.14);border-radius:var(--r);
}
.society li::before{display:none;}

/* ── 6-3. 진료 4갈래 ───────────────────────────────── */
/* 분기선의 네 끝점이 카드 중심과 맞도록 .wrap 안쪽 폭에 정렬 */
.branch{
  display:block;
  width:calc(100% - var(--s3) * 2);
  max-width:calc(var(--wrap) - var(--s3) * 2);
  margin:0 auto calc(var(--s2) * -1);
}
.branch path{fill:none;stroke:var(--brackish);stroke-width:1;opacity:.45;}

/* 네 갈래 — 하지정맥류·투석혈관은 설명 페이지로, PICC·케모포트는 상담 창으로 이어집니다. */
.tx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);}
.tx-card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t-fast) var(--tide),box-shadow var(--t-fast) var(--tide);
}
.tx-card:hover{border-color:var(--forest);box-shadow:var(--shadow-lg);}
.tx-card__thumb{
  aspect-ratio:4/5;background:var(--forest-soft);overflow:hidden;
  border-radius:var(--arch-sm);            /* 지주근 아치 */
  margin:var(--s2) var(--s2) 0;
}
.tx-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--tide);}
.tx-card:hover .tx-card__thumb img{transform:scale(1.04);}
.tx-card__body{padding:var(--s3);display:flex;flex-direction:column;flex:1;}
.tx-card__title{font-family:var(--font);font-size:22px;letter-spacing:-.01em;margin-bottom:var(--s1);}
.tx-card__who{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:var(--s3);flex:1;}
.tx-steps{display:flex;flex-direction:column;gap:6px;padding-top:var(--s2);border-top:1px solid var(--line-soft);margin-bottom:var(--s3);}
.tx-steps li{display:flex;gap:var(--s1);font-size:13.5px;color:var(--text-2);align-items:baseline;}
.tx-steps li b{flex:none;color:var(--brackish);font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;}
.tx-card__more{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--forest);}
.tx-card__more::after{content:"→";transition:transform var(--t-fast) var(--tide);}
.tx-card:hover .tx-card__more::after{transform:translateX(5px);}
/* 버튼으로 만든 카드도 링크 카드와 똑같이 보이게 한다 */
.tx-card--ask{text-align:left;padding:0;width:100%;font:inherit;}

/* ── 6-3-0. 안내 팝업 ───────────────────────────────
   접속하면 화면 가운데에 뜨고, 화면 아무 곳이나 누르면 닫힙니다.
   상담 창(.ask, z-index 200)보다 위에서 가장 먼저 보이도록 300을 씁니다. */
body.popup-open{overflow:hidden;}
.popup{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:var(--s4);cursor:pointer;}
.popup[hidden]{display:none;}
.popup__dim{position:absolute;inset:0;background:rgba(10,10,10,.6);}
.popup__box{
  position:relative;width:100%;max-width:510px;max-height:90vh;overflow:auto;
  background:var(--paper);box-shadow:var(--shadow-lg);
}
.popup__box img{display:block;width:100%;height:auto;}
.popup__foot{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s3);background:var(--paper);}
.popup__foot .btn{height:44px;padding:0 var(--s3);font-size:14.5px;}
@media (max-width:520px){
  .popup__foot{flex-wrap:wrap;}
  .popup__foot .btn{flex:1 1 auto;}
}

/* ── 6-3-1. 상담 창 ─────────────────────────────────
   PICC · 케모포트는 설명 페이지 대신 이 창으로 안내합니다.
   전화와 카카오톡을 나란히 두어 편한 쪽을 고르시게 합니다. */
body.ask-open{overflow:hidden;}
.ask{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--s3);}
.ask[hidden]{display:none;}
.ask__dim{position:absolute;inset:0;background:rgba(10,10,10,.55);}
.ask__box{
  position:relative;width:100%;max-width:520px;
  background:var(--paper);border-radius:var(--r);
  padding:var(--s6) var(--s5) var(--s5);
  text-align:center;box-shadow:var(--shadow-lg);
}
.ask__x{
  position:absolute;top:var(--s2);right:var(--s2);
  width:40px;height:40px;font-size:26px;line-height:1;color:var(--muted);
}
.ask__x:hover{color:var(--text);}
.ask__cat{font-size:13px;font-weight:600;color:var(--root);margin-bottom:var(--s2);}
.ask__title{font-family:var(--font);font-size:26px;letter-spacing:-.008em;line-height:1.5;}
.ask__desc{margin-top:var(--s3);font-size:16px;color:var(--muted);line-height:1.9;}
.ask__btns{justify-content:center;margin-top:var(--s5);}

/* ── 6-4. 자주 묻는 질문 ───────────────────────────── */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
  display:flex;align-items:flex-start;gap:var(--s2);width:100%;
  padding:var(--s3) 0;text-align:left;font-size:17px;font-weight:600;
  letter-spacing:-.005em;line-height:1.7;
}
.faq__q::after{
  content:"";flex:none;margin-left:auto;width:10px;height:10px;margin-top:9px;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg);transition:transform var(--t-fast) var(--tide);
}
.faq__item.is-open .faq__q::after{transform:rotate(-135deg);}
.faq__a{overflow:hidden;max-height:0;transition:max-height .5s var(--tide);}
.faq__item.is-open .faq__a{max-height:1100px;}
.faq__a-inner{display:flex;gap:var(--s2);padding:0 0 var(--s3);color:var(--text-2);font-size:16px;line-height:1.9;}
/* 답이 길면 줄만 끊어서는 한 덩어리로 읽힌다. 뜻이 넘어가는 자리에서 문단을 나누고
   문단 사이를 한 칸(s3) 띄운다 — 줄 사이(1.9)와 확실히 구분되는 간격이다. */
.faq__text{min-width:0;}
.faq__text p + p{margin-top:var(--s3);}
.faq__a-inner::before{content:"";flex:none;width:1px;align-self:stretch;background:var(--root);opacity:.5;}

/* ── 6-5. 오시는 길 ────────────────────────────────── */
.contact{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s6);align-items:start;}
.contact__map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--forest-soft);}

/* 지도 세 가지를 탭으로 번갈아 본다 */
.maptabs{display:flex;background:var(--soft);border-bottom:1px solid var(--line);}
.maptab{
  flex:1;padding:var(--s2) var(--s1);
  font-size:14.5px;font-weight:600;line-height:1;color:var(--muted);
  border-right:1px solid var(--line-soft);
  transition:color var(--t-fast) var(--tide),background var(--t-fast) var(--tide);
  touch-action:manipulation;
}
.maptab:last-child{border-right:0;}
.maptab:hover{color:var(--text);}
.maptab.is-on{background:var(--paper);color:var(--text);box-shadow:inset 0 -2px 0 var(--root);}

/* 패널을 겹쳐 두고 보이고 감추기만 한다.
   display:none 으로 감추면 카카오 지도가 폭 0으로 그려져 깨진다. */
.mapstack{position:relative;height:460px;}
.mappanel{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-fast) var(--tide);
}
.mappanel.is-on{opacity:1;visibility:visible;}
.mappanel--naver{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);padding:var(--s4);text-align:center;background:var(--soft);
}
.mappanel__lead{font-family:var(--font);font-size:20px;letter-spacing:-.008em;line-height:1.7;}
.mappanel__sub{font-size:15px;color:var(--muted);}

/* 카카오(다음) 지도 퍼가기 — 고정 픽셀로 그려지므로 폭을 강제로 늘린다 */
.contact__map iframe{width:100% !important;height:100% !important;min-height:460px;border:0;}
.contact__map .root_daum_roughmap{width:100% !important;}
.contact__map .root_daum_roughmap .wrap_map{height:460px !important;}
.contact__map .root_daum_roughmap .wrap_map iframe{width:100% !important;height:460px !important;}
.contact__map .root_daum_roughmap .map_border{display:none;}
.info-list{border-top:1px solid var(--line);}
.info-list > div{display:grid;grid-template-columns:92px 1fr;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--line);}
.info-list dt{font-size:13.5px;font-weight:600;color:var(--muted);}
.info-list dd{font-size:16px;color:var(--text-2);line-height:1.85;}
.info-list dd strong{color:var(--text);font-weight:600;}
.hours{display:flex;flex-direction:column;gap:5px;}
.hours div{display:flex;gap:var(--s2);}
.hours dt{flex:none;width:76px;font-size:15px;color:var(--muted);font-weight:400;}
.hours dd{font-size:15px;font-variant-numeric:tabular-nums;}
.hours .off{color:var(--root);}
.contact .btn-row{margin-top:var(--s5);}

/* ── 7. 진료 상세 페이지 ───────────────────────────── */
/* 상세 페이지 첫 화면 — 안내 문구 대신 공감 문장 하나로 연다 */
.subhero{position:relative;padding-top:calc(78px + var(--s8));padding-bottom:var(--s8);background:var(--deep);color:var(--salt);overflow:hidden;}
/* 진료 일러스트를 배경 가득 늘리면 형상이 잘려 정체 모를 선이 된다.
   우측에 통째로 얹어 은은한 표식으로만 쓴다. */
.subhero__bg{
  position:absolute;top:var(--s5);right:var(--s6);bottom:var(--s5);
  width:min(30%,340px);opacity:.34;pointer-events:none;
}
/* 진료 일러스트는 밝은 바탕용(회색 선 + 심홍 강조)이라 검정 위에서는 선이 묻히고
   심홍만 남아 정체 모를 곡선이 된다. 검정 면에서는 통째로 흰 워터마크로 눕힌다. */
.subhero__bg img{width:100%;height:100%;object-fit:contain;object-position:center;filter:brightness(0) invert(1);}
.subhero__inner{position:relative;z-index:2;}
.crumb{display:flex;flex-wrap:wrap;gap:var(--s1);font-size:13px;color:rgba(247,246,243,.55);margin-bottom:var(--s2);}
.crumb li::after{content:"／";margin-left:var(--s1);opacity:.45;}
.crumb li:last-child::after{display:none;}
.subhero__title{font-family:var(--font);font-size:clamp(28px,4.4vw,44px);letter-spacing:-.012em;}
.subhero__desc{margin-top:var(--s2);font-size:clamp(15px,1.75vw,18px);color:rgba(247,246,243,.78);line-height:1.85;max-width:38em;}
.subhero .btn-row{margin-top:var(--s5);}

/* 공감 문구 — 두 문장이 5초 간격으로 교차한다.
   두 줄을 같은 그리드 칸에 겹쳐 두어 높이가 흔들리지 않게 한다. */
.rotator{display:grid;min-height:1px;}
.rotator__line{
  grid-area:1/1;
  font-family:var(--font);
  font-size:clamp(24px,3.8vw,42px);
  line-height:1.5;letter-spacing:-.012em;
  color:var(--salt);
  opacity:0;transform:translateY(12px);
  transition:opacity .9s var(--tide),transform .9s var(--tide);
}
.rotator__line.is-on{opacity:1;transform:none;}

/* 이유 — 세로로 쌓고, 그림과 글을 좌우로 번갈아 놓는다.
   순서가 있는 절차가 아니므로 번호는 붙이지 않는다. */
.reason{display:flex;flex-direction:column;gap:var(--s7);}
.reason__item{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s6);align-items:center;
}
.reason__item--wide:nth-child(even) .reason__media,
.reason__item--wide:nth-child(even) .howto__media{order:2;}   /* 짝수 번째는 그림을 오른쪽으로(좌우 대조용 --wide 섹션에서만) */
/* 개통술 탭(풍선확장술 등)만 예외로 소제목·설명 다음에 영상을 둔다 — ID로 콕 집어야
   보존적 치료법 목록 같은 다른 .reason__item 목록까지 같이 뒤집히지 않는다. */
#howto-recanal .reason__item .reason__media,
#howto-recanal .reason__item .howto__media{order:2;}
/* 영상이 들어간 칸은 그림보다 크게 둔다. 16:9라 폭이 커진 만큼 높이도 같이 커진다.
   1.92 : 1 = 영상 702px / 글 366px (본문 폭 1132px, 사이 간격 64px 기준).
   짝수 번째는 영상이 오른쪽으로 가므로 두 폭도 같이 뒤집는다. */
.reason__item--wide{grid-template-columns:minmax(0,1.92fr) minmax(0,1fr);}
.reason__item--wide:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.92fr);}

/* ── 칸마다 따로 올라온다 ────────────────────────────────
   예전에는 세 칸을 묶은 .reason 하나에 .reveal 을 걸어서 한꺼번에 나타났다.
   그러면 첫 칸을 볼 때 이미 세 칸이 다 나타나 버려 아래 두 칸은 움직임이 보이지 않는다.
   이제 칸마다 .reveal 을 걸고, 칸 자체는 그대로 둔 채 안의 영상과 글을 올린다.
   글은 영상보다 조금 늦게 올라온다 — 둘이 똑같이 움직이면 밋밋하다.
   화면 크기와 무관하게 같은 값을 쓴다(PC·모바일 동일).                     */
.reason__item.reveal{opacity:1;transform:none;transition:none;}
.reason__item.reveal > .reason__media,
.reason__item.reveal > .reason__body{
  opacity:0;transform:translateY(36px);
  transition:opacity .62s var(--tide),transform .62s var(--pop);
}
.reason__item.reveal.is-in > .reason__media,
.reason__item.reveal.is-in > .reason__body{opacity:1;transform:none;}
.reason__item.reveal.is-in > .reason__body{transition-delay:.14s;}
.reason__media{
  aspect-ratio:4/3;background:var(--forest-soft);
  border-radius:var(--arch-sm);overflow:hidden;
}
.reason__media img{width:100%;height:100%;object-fit:contain;}
/* 사진 프레임은 4:3이다. 화면비가 다른 그림·영상을 그대로 넣으면 위아래에 빈 띠가 생기는데,
   설명용 그림은 잘라내면 내용이 사라진다. 그림을 프레임에 맞추지 말고 프레임을 그림에 맞춘다.
   712/400 = 16:9. 병원 촬영본이 16:9라 영상이 들어가는 칸은 이 수식자를 쓴다.
   그림 칸은 위만 둥근 아치지만, 영상 칸은 위아래를 모두 둥글게 둔다. */
.reason__media--wide{aspect-ratio:712/400;border-radius:var(--round-sm);}
.reason__media video{width:100%;height:100%;object-fit:cover;display:block;}
.reason__body h4{
  font-family:var(--font);
  font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.008em;line-height:1.5;
  margin-bottom:var(--s2);
}
.reason__body p{font-size:16px;color:var(--muted);line-height:1.9;}

.symptom{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s4);max-width:920px;margin:0 auto;}
.symptom li{
  display:flex;gap:var(--s2);align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);font-size:15.5px;color:var(--text-2);line-height:1.75;
}
.symptom li::before{
  content:"";flex:none;width:8px;height:8px;margin-top:11px;
  background:var(--brackish);border-radius:50%;opacity:.6;
}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);counter-reset:step;}
.process--3{grid-template-columns:repeat(3,1fr);}
.process__item{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s5) var(--s3) var(--s4);
}
.process__item::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:var(--s3);left:var(--s3);
  font-family:var(--font);font-size:15px;font-weight:700;
  color:var(--brackish);font-variant-numeric:tabular-nums;
}
.process__item h4{font-size:18px;letter-spacing:-.008em;margin-bottom:var(--s1);}
.process__item p{font-size:14.5px;color:var(--muted);line-height:1.8;}

.principle{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.principle__item h4{font-family:var(--font);font-size:20px;letter-spacing:-.008em;margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid rgba(247,246,243,.2);}
.principle__item p{font-size:15px;line-height:1.9;color:rgba(247,246,243,.72);}

.col-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);}
.col-card{
  display:flex;flex-direction:column;gap:var(--s1);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);transition:border-color var(--t-fast) var(--tide);
}
.col-card:hover{border-color:var(--forest);}
.col-card__cat{font-size:12.5px;color:var(--root);font-weight:600;}
.col-card__title{font-size:17px;letter-spacing:-.008em;line-height:1.6;}
.col-card__date{font-size:13px;color:var(--muted);margin-top:auto;padding-top:var(--s2);font-variant-numeric:tabular-nums;}

/* 아직 글이 없을 때. 빈 화면을 그대로 두지 않고 다음에 갈 곳을 알려 준다. */
.col-empty{
  text-align:center;padding:var(--s7) var(--s3);
  background:var(--soft);border:1px solid var(--line-soft);border-radius:var(--r);
}
.col-empty__lead{font-family:var(--font);font-size:20px;letter-spacing:-.008em;margin-bottom:var(--s2);}
.col-empty__sub{font-size:16px;color:var(--muted);line-height:1.9;margin-bottom:var(--s4);}
.col-empty .btn-row{justify-content:center;}

/* ── 6-6. 비급여 진료비용 표 ─────────────────────────
   법으로 고지해야 하는 표라 칸을 줄이거나 합칠 수 없다.
   좁은 화면에서는 표를 그대로 두고 가로로 밀어 보게 한다.
   (키보드로도 밀 수 있도록 tabindex 를 준 영역이다) */
.page-top{padding-top:calc(78px + var(--s7));}
.price-wrap{margin-top:var(--s6);}
.price-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);}
.price-scroll:focus-visible{outline:2px solid var(--root);outline-offset:2px;}
.price-table{border-collapse:collapse;width:100%;min-width:900px;font-size:14.5px;}
.price-table th,
.price-table td{border-bottom:1px solid var(--line-soft);padding:var(--s2) var(--s2);text-align:center;vertical-align:middle;}
.price-table thead th{
  background:var(--stone);color:var(--text);font-weight:600;font-size:13.5px;line-height:1.5;
  border-bottom:1px solid var(--line);
}
.price-table tbody th.cat{background:var(--soft);font-weight:600;white-space:nowrap;}
.price-table .name{text-align:left;color:var(--text-2);line-height:1.6;}
.price-table .code{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.price-table .num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td{border-bottom:0;}

/* 화면에는 안 보이지만 화면 낭독기에는 읽히는 글 */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 안내 인용문 — 각주가 아니라 '한마디'로 읽히게 본문(17px)보다 한 단계 키운 블록.
   더 키워도 봤으나 과했다. 20px가 상한. 여백은 s3→s4. */
.notice{
  display:block;max-width:920px;margin:var(--s6) auto 0;
  background:var(--forest-soft);border-left:2px solid var(--root);
  border-radius:0 var(--r) var(--r) 0;
  padding:var(--s4);
  font-size:20px;
  color:var(--text-2);line-height:1.8;letter-spacing:-.008em;
}
.notice b{color:var(--text);font-weight:700;}
/* 첫 문장(굵게)에서 아래로 갈수록 글자가 작아지며 힘을 뺀다 —
   전부 같은 크기면 세 문장이 한 덩어리로 뭉쳐 눈에 위계가 안 잡힌다. */
.notice__sub{font-size:17.5px;}
.notice__sub2{font-size:15.5px;}
/* 한 덩어리로 붙어 읽히면 답답한 안내문은 문단을 나눠 넣는다.
   문단 사이는 본문 한 줄만큼(--s3) 띄운다 — 여백은 기존 값만 쓴다. */
.notice--stack{padding:var(--s5) var(--s4);}
.notice--stack p + p{margin-top:var(--s3);}

/* ── 6-3-2. 치료 방법 탭 ───────────────────────────────
   시술법 4가지를 버튼으로 골라 보게 한다.
   다른 버튼(.btn)과 구분되도록 네 모서리를 모두 크게 둥글렸다 — 이 컴포넌트 전용 값이다.
   영상 프레임(.howto__media)은 기존 규칙대로 위만 아치를 준다. */
.howto__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-bottom:var(--s5);}
.howto__tab{
  height:52px;padding:0 var(--s4);border-radius:16px;
  border:1px solid var(--line);background:var(--paper);
  font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--text-2);
  transition:background var(--t-fast) var(--tide),color var(--t-fast) var(--tide),border-color var(--t-fast) var(--tide);
  touch-action:manipulation;
}
.howto__tab:hover{border-color:var(--forest);color:var(--forest);}
.howto__tab.is-on{background:var(--forest);border-color:var(--forest);color:var(--salt);}

/* 패널 여러 개를 같은 자리에 겹쳐 두고(.rotator와 같은 방식) 위에서 아래로 나타나게 한다.
   ⚠ grid-area:1/1로 겹치면 칸 높이가 "숨은 패널까지 포함해 가장 큰 것" 기준으로 잡힌다
   (visibility:hidden도 레이아웃 높이는 그대로 차지하기 때문) — 투석혈관 조성술(짧다)과
   개통술(영상 칸이 커서 훨씬 길다)처럼 패널마다 길이 차이가 크면 짧은 쪽 아래에 빈 공간이
   그대로 남는다. 숨은 패널은 position:absolute로 흐름에서 완전히 빼고, 보이는 패널만
   relative로 되돌려 그 높이만큼만 .howto__stage가 커지게 한다. */
.howto__stage{position:relative;}
.howto__panel{
  position:absolute;top:0;left:0;right:0;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:var(--s6);align-items:center;
  opacity:0;visibility:hidden;transform:translateY(-24px);
  transition:opacity .55s var(--tide),transform .55s var(--tide),visibility .55s;
}
.howto__panel.is-on{position:relative;opacity:1;visibility:visible;transform:none;}
/* 자료화면 원본이 16:9 계열이라 사진 프레임(4:3)이 아니라 영상 프레임을 쓴다 —
   영상 칸은 기존 규칙대로 위아래를 모두 둥글게 둔다(.reason__media--wide와 동일). */
.howto__media{position:relative;aspect-ratio:712/400;background:var(--forest-soft);border-radius:var(--round-sm);overflow:hidden;}
/* 출처가 저마다 달라 화면비가 뒤섞인 자료(가로 파노라마+세로 영상 등)는
   cover로 채우면 내용이 잘려 나간다. 정사각형 칸에 통째로 담아 위아래(또는 좌우)를 살짝 비운다.
   4:3(가로로 낮은 칸)에서는 세로 영상이 칸 높이에 눌려 작게 나온다 — 정사각형으로 키를 키운다. */
.howto__media--contain{aspect-ratio:1/1;}
.howto__media--contain video{object-fit:contain;}
/* 레이저 칸은 영상 두 편을 같은 자리에 겹쳐 두고 번갈아 보여 준다(히어로 영상과 같은 방식) */
.howto__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s var(--tide);}
.howto__media video.is-on{opacity:1;}
.howto__body h4{font-family:var(--font);font-size:clamp(20px,2.4vw,24px);letter-spacing:-.008em;line-height:1.5;margin-bottom:var(--s2);}
.howto__body p{font-size:16px;color:var(--muted);line-height:1.9;}

/* 패널 하나에 방법을 하나가 아니라 여러 개 세로로 담아야 할 때(투석혈관 개통술 등) —
   기본 2단 배치를 풀고 위에서 아래로 쌓는다. 안쪽은 .reason__item을 그대로 재사용한다. */
.howto__panel--stack{display:flex;flex-direction:column;gap:var(--s5);}
.howto__lead{font-size:16px;color:var(--muted);line-height:1.9;}
.howto__placeholder{padding:var(--s6) 0;text-align:center;color:var(--muted);font-size:16px;}

/* ── 8. 푸터 · 모바일 고정바 ───────────────────────── */
.footer{background:var(--deep-2);color:rgba(247,246,243,.58);padding-top:var(--s6);padding-bottom:var(--s6);font-size:14px;line-height:1.95;}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid rgba(247,246,243,.12);}
.footer__logo .logo__ko{color:var(--salt);}
.footer__nav{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:14.5px;}
.footer__nav a{color:rgba(247,246,243,.74);transition:color var(--t-fast);}
.footer__nav a:hover{color:var(--salt);}
.footer__body{padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);}
.footer__copy{margin-top:var(--s3);font-size:12.5px;color:rgba(247,246,243,.38);}

.fixbar{display:none;}

/* ── 8-1. PC 전용 퀵메뉴 ─────────────────────────────
   메인(index)에만 있다. 히어로를 지나면(헤더가 나타나는 시점과 같다) 오른쪽에서
   나타난다 — 판단 기준은 js/main.js 의 updateHeader() 를 그대로 재사용한다.
   자립·맹그로브 톤을 지키려고 아이콘은 잉크색 하나, 심홍은 마우스오버 때만 —
   이 버튼열 전체가 '작은 표식' 하나로 취급된다(심홍 네 자리 규칙 안). */
.quickbar{
  position:fixed;right:var(--s3);top:50%;z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transform:translateY(-50%) translateX(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t) var(--tide),transform var(--t) var(--tide),visibility var(--t);
}
.quickbar.is-visible{
  transform:translateY(-50%) translateX(0);
  opacity:1;visibility:visible;pointer-events:auto;
}
/* 아이콘 네 개(블로그·상담·인스타그램·플레이스)는 이름표가 있어 원이 아니라
   둥근 사각형으로 — 글자가 원 모서리에 눌리지 않는다. 맨 위로는 이름표 없이
   원 모양 그대로 두어 '이동 링크'와 '동작 버튼'이 형태로 구분된다. */
.quickbar a,.quickbar button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:92px;height:92px;flex:none;
  background:var(--paper);border:1px solid var(--line);color:var(--forest);
  box-shadow:var(--shadow);
  transition:background var(--t-fast) var(--tide),color var(--t-fast) var(--tide),
             border-color var(--t-fast) var(--tide),transform var(--t-fast) var(--tide);
}
.quickbar a{border-radius:22px;}
.quickbar a span{font-size:13px;font-weight:600;letter-spacing:-.005em;}
.quickbar button{border-radius:50%;}
.quickbar svg{width:32px;height:32px;flex:none;}
.quickbar__divider{width:40px;height:1px;background:var(--line);margin:4px 0;}
@media (hover:hover) and (pointer:fine){
  .quickbar a:hover,.quickbar button:hover{
    background:var(--root);border-color:var(--root);color:var(--salt);transform:translateY(-2px);
  }
}

/* ── 9. 반응형 ─────────────────────────────────────── */
@media (max-width:1024px){
  .tx-grid{grid-template-columns:repeat(2,1fr);}
  .branch{display:none;}
  .doctor{grid-template-columns:1fr;gap:var(--s5);}
  /* 사진 원본이 3:4(세로)라 4:3(가로)로 바꾸면 위아래가 잘려 나간다. PC와 같은 3:4를 유지한다. */
  .doctor__media{border-radius:var(--arch-sm);max-width:460px;}
  .contact{grid-template-columns:1fr;gap:var(--s5);}
  .process{grid-template-columns:repeat(2,1fr);}
  .reason{gap:var(--s6);}
  .reason__item{grid-template-columns:1fr;gap:var(--s3);}
  /* 영상 칸의 좌우 비율은 화면이 좁아지면 의미가 없다. 홀수·짝수 모두 한 줄로 되돌린다.
     :nth-child(even) 쪽은 선택자가 더 세서 여기서 함께 풀어 주지 않으면 두 칸으로 남는다. */
  .reason__item--wide,
  .reason__item--wide:nth-child(even){grid-template-columns:1fr;}
  .reason__item:nth-child(even) .reason__media{order:0;}
  /* 순서 기준이 셋으로 갈린다 — 섹션마다 다르다(사용자 확인 기준):
     · 판단 기준 이유 섹션          : 영상 → 소제목 → 설명 (기본 DOM 순서, 손대지 않는다)
     · 개통술 탭(풍선확장술 등)      : 소제목 → 설명 → 영상 (media를 뒤로)
     · 조성술 탭(자가·인조혈관 그림) : 사진 → 소제목 → 설명 (기본 DOM 순서, 손대지 않는다)
     #howto-recanal 하나만 콕 집어야지, .howto__panel 전체에 걸면 조성술까지 뒤집힌다. */
  #howto-recanal .reason__item .reason__media,
  #howto-recanal .reason__item .howto__media{order:2;}
  .reason__media{max-width:460px;}
  /* 영상 칸은 PC에서 크게 두었으므로 좁은 화면에서도 폭을 그대로 다 쓴다 (PC·모바일 통일) */
  .reason__media--wide{max-width:none;}
  .col-list{grid-template-columns:1fr;}
  .principle{grid-template-columns:1fr;gap:var(--s4);}
  .howto__panel{grid-template-columns:1fr;gap:var(--s3);}
}

@media (max-width:880px){
  :root{--s7:72px;}
  .burger{display:block;}
  .header__tel{display:none;}
  /* 옆에서 밀려 들어오지 않고, 헤더 바로 아래에서 위→아래로 부드럽게 펼쳐진다.
     ⚠ 예전에는 bottom:0으로 화면 끝까지 채웠는데, 아이폰 사파리에서 주소창이
     늘어난 상태(줄어들지 않은 상태)로 열리면 그 높이만큼 메뉴 패널이 화면 아래로
     밀려나 "메뉴 일부만 보이는" 것처럼 보였다. 메뉴 4~5줄은 내용만큼만 높이를
     차지해도 충분하므로 bottom을 버리고 내용 높이(auto) + 안전판(max-height)로 바꾼다. */
  .gnb{
    position:fixed;top:78px;left:0;right:0;
    max-height:calc(100svh - 78px);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);padding:var(--s2) var(--s3) var(--s4);
    overflow-y:auto;
    transform:translateY(-16px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform var(--t) var(--tide),opacity var(--t) var(--tide),visibility var(--t);
  }
  body.nav-open{overflow:hidden;}
  body.nav-open .gnb{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  body.nav-open .header{background:rgba(255,255,255,.98);border-bottom-color:var(--line-soft);backdrop-filter:blur(12px);}
  body.nav-open .header .logo__ko{color:var(--forest);}
  body.nav-open .burger i{background:var(--text);}
  .gnb__link{height:auto;padding:var(--s2) 0;font-size:18px;font-weight:600;color:var(--text);border-bottom:1px solid var(--line-soft);}
  .gnb__sub{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;border:0;box-shadow:none;background:transparent;padding:var(--s1) 0 var(--s2);
  }
  .gnb__sub a{padding:7px 0 7px var(--s2);font-size:15.5px;}

  .hero{min-height:92svh;min-height:calc(var(--vh, 1vh) * 92);}
  .subhero__bg{display:none;}
  .waterline__inner{grid-template-columns:1fr;}
  .waterline__item{flex-direction:row;justify-content:center;gap:var(--s1);border-left:0;border-top:1px solid var(--line);padding:var(--s2);}
  .waterline__item:first-child{border-top:0;}
  /* 좁은 화면에서는 사진과 높이를 한 단계 줄인다 */
  /* 좁은 화면도 같은 계산 — 320px 폭에서 가장 짧은 사진이 463px */
  .reviews__marquee{height:460px;}
  .review-shot{width:320px;}
  .symptom{grid-template-columns:1fr;}
  .footer{padding-bottom:calc(var(--s6) + 68px);}

  .quickbar{display:none;}   /* 모바일·태블릿은 아래 fixbar가 같은 역할을 한다 */
  .fixbar{
    display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:99;
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -4px 24px -16px rgba(0,0,0,.5);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .fixbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:62px;line-height:1;font-size:12.5px;font-weight:600;color:var(--text-2);
    border-left:1px solid var(--line-soft);
  }
  .fixbar a:first-child{border-left:0;}
  .fixbar a.is-main{background:var(--root);color:var(--salt);border-left-color:var(--root);}
  .fixbar svg{width:19px;height:19px;}

  /* ── 모바일 : 텍스트 전부 가운데 정렬 (전 페이지 공통) ───────── */
  .hero__inner{text-align:center;}

  .doctor__info{text-align:center;}
  .doctor__name{justify-content:center;}
  .doctor__quote{border-left:0;padding-left:0;}
  .career__group{text-align:center;}
  /* .society(학회 태그)는 같은 .career__group 안에 있지만 padding을 따로 쓴다(5px 13px) —
     여기서 li 전체를 건드리면 그 좌우 패딩까지 깨져 글자가 한쪽으로 쏠린다. 경력 목록만 콕 집는다. */
  .career__group ul:not(.society) li{padding-left:0;}
  .career__group ul:not(.society) li::before{display:none;}
  .society{justify-content:center;}

  .tx-card__body{text-align:center;}
  .tx-steps li{justify-content:center;}
  .tx-card__more{justify-content:center;}

  /* 이유·조성술 등 사진+글 칸도 가운데로 — 짝수 번째가 사진을 오른쪽으로 보내는
     규칙은 화면이 좁아지면 어차피 한 줄로 풀리므로(1024px 규칙) 서로 부딪히지 않는다 */
  .reason__body{text-align:center;}

  /* 질문 글자를 가운데로 옮기는 대신, 화살표는 플렉스 흐름에서 빼내 오른쪽 끝에 고정한다 —
     같이 가운데로 몰리면 화살표가 글자에 붙어 버린다. */
  .faq__q{justify-content:center;text-align:center;position:relative;padding-left:28px;padding-right:28px;}
  .faq__q::after{position:absolute;right:0;top:50%;margin:0;transform:translateY(-50%) rotate(45deg);}
  .faq__item.is-open .faq__q::after{transform:translateY(-50%) rotate(-135deg);}
  .faq__a-inner{text-align:center;}
  .faq__a-inner::before{display:none;}
  .hours div{justify-content:center;}

  .footer__top{flex-direction:column;align-items:center;text-align:center;}
  .footer__nav{justify-content:center;}
  .footer__body{flex-direction:column;align-items:center;text-align:center;}
  .footer__copy{text-align:center;}
}

@media (max-width:520px){
  :root{--s7:60px;--s6:48px;}
  .wrap{padding-left:var(--s2);padding-right:var(--s2);}
  .tx-grid{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr;}
  /* 폰 폭에서 카드 하나만 꽉 차면 "블러 처리된 후기가 여러 장 있다"는 느낌이 안 산다.
     두 장 이상(+세 번째 끝자락)이 한눈에 걸치도록 폭을 더 줄인다. 세로는 같은 비율로 축소 */
  .reviews__marquee{height:246px;}
  .review-shot{width:170px;}
  .btn{height:54px;padding:0 var(--s3);font-size:15px;}
  .btn-row .btn{flex:1;min-width:150px;}
  .hero .btn-row .btn{flex:1 1 100%;}
  /* height 고정값을 주면 "클라리베인 · 플레보그립"처럼 두 줄로 넘어가는 이름이 박스 밖으로
     삐져나온다. min-height + stretch로 바꿔서 같은 줄의 버튼끼리 키가 저절로 맞춰지게 한다. */
  /* flex-grow는 0으로 — 1이면 홀수 개일 때 마지막 줄에 혼자 남은 버튼이
     남는 폭을 다 먹어 유독 커진다(하지정맥류 5개 탭에서 발생). */
  .howto__tab{
    flex:0 1 calc(50% - var(--s1));display:flex;align-items:center;justify-content:center;
    min-height:48px;height:auto;padding:10px var(--s2);font-size:14px;line-height:1.3;text-align:center;
  }
  .doctor__quote{font-size:18px;}
  /* 상담 창 버튼은 전화번호까지 들어가 길다. 좁은 화면에서는 한 줄에 하나씩 놓는다 */
  .ask__box{padding:var(--s5) var(--s3) var(--s4);}
  .ask__btns .btn{flex:1 1 100%;}
  .info-list > div{grid-template-columns:1fr;gap:6px;}
  /* 이제 한 줄로 쌓였으니(위 규칙) 메인(index)에서는 이 칸도 가운데로 맞춘다 */
  .info-list{text-align:center;}
  .info-list > div{justify-items:center;}
}

@media print{
  .header,.fixbar,.hero__scroll,.gnb{display:none !important;}
  body{font-size:12pt;background:#fff;}
}