@font-face{
  font-family:"HS활공명조";
  src:url("../font/HSHwalkongSerif-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* =========================================================
   구름베개 한의원 — 피그마 "최종 산출물 0904" 기준
   컨테이너 1200 / 페이지 좌우 여백 120 / 섹션 간격 72
   ========================================================= */

:root{
  --navy:        #225065;   /* 시안 메인 컬러 */
  --ink:         #225065;
  --ink-soft:    #6e95a7;   /* 탭바 메뉴 */
  --paper:       #e9f6f8;   /* 다크카드 위 밝은 글자 */
  --ink-read:    #3c5a69;   /* 긴 글 본문 — 네이비(#225065)보다 한 단계 옅게 */

  /* 시안 그림자 */
  --sh-card:  var(--sh-card);   /* DROP_SHADOW r42 #225065 12% */
  --sh-glow:  0 0 87px rgba(255, 255, 255, .42); /* DROP_SHADOW r87 #FFFFFF 42% */
  --sh-deep:  0 0 56px rgba(19, 54, 70, .32);    /* DROP_SHADOW r56 #133646 32% */

  --container: 1440px;   /* 전체 폭. 좌우 120 빼면 본문 1200 */
  --pad-x: 120px;

  --font-title: "HS활공명조", "Gowun Batang", serif;
  --font-body:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
img{ max-width:100%; display:block; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin:0; }

/* ---------- 공통 래퍼 ---------- */
.section{
  max-width:var(--container);
  margin-inline:auto;
  padding:120px var(--pad-x);
}
.section__label{
  font-family:var(--font-title);
  font-size:48px;
  font-weight:400;
  line-height:67.2px;
  color:var(--navy);
  text-align:center;
  margin-bottom:56px;
}

/* =========================================================
   상단 고정 탭바 — 시안 1440x80, 안쪽 1200 space-between
   ========================================================= */
.tabbar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .25s ease, box-shadow .25s ease, transform .3s ease;
}
.tabbar.is-hidden{ transform:translateY(-100%); }
@media (prefers-reduced-motion: reduce){ .tabbar{ transition:none; } }
.tabbar.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(34,80,101,.08);
}
/* 어두운 섹션 위에 올라오면 탭바도 어둡게 — 로고가 흐려지지 않도록 */
.tabbar.is-dark.is-stuck{
  background:rgba(18,47,61,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.10);
}
.tabbar.is-dark .brand img{ content:url("../img/logo-lockup-light.svg"); }
.tabbar.is-dark .gnb a{ color:rgba(233,246,248,.72); }
.tabbar.is-dark .gnb a:hover,
.tabbar.is-dark .gnb a.is-active{ color:#fff; }
.tabbar__inner{
  max-width:var(--container); margin-inline:auto;
  padding-inline:var(--pad-x); height:80px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.brand{ display:flex; align-items:center; }
.brand img{ width:214px; height:auto; }
.gnb{ display:flex; gap:16px; }
.gnb a{
  padding:6px 20px; white-space:nowrap;
  font-size:18px; line-height:21.5px; letter-spacing:.72px;
  color:var(--ink-soft); transition:color .2s ease;
}
.gnb a:hover, .gnb a.is-active{ color:var(--navy); }

/* =========================================================
   히어로 — 시안 1440x1080, 세로 gap 72, 좌우 여백 120
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; overflow:hidden; isolation:isolate;
  background:#E5F7FC url("../img/hero-bg.webp") center/cover no-repeat;
}
/* Duotone noise — 시안 #6E95A7 1% */
.hero__noise{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--container); margin-inline:auto;
  padding:100px var(--pad-x) 40px;
  display:flex; flex-direction:column; align-items:center; gap:72px;
}
.hero__head{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.hero__glow{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  filter:drop-shadow(var(--sh-glow));
}
.hero__cloud{ width:65px; height:56px; }
.hero__wordmark{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.hero__eyebrow{
  font-family:var(--font-title);
  font-size:48px; line-height:67.2px; font-weight:400; color:var(--navy);
}
.hero__title{ line-height:0; }
.hero__title img{ width:445px; height:auto; }
.hero__sub{ font-size:18px; line-height:21.5px; color:var(--navy); }

/* ---------- 진입 카드 — 시안 534x218, r48 ---------- */
.entry{
  width:100%; max-width:1100px;
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  filter:drop-shadow(var(--sh-card));
}
.card{
  position:relative; isolation:isolate;
  min-height:218px; border-radius:48px;
  box-shadow:inset 0 0 0 2px #fff;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:24px 0 28px;
  display:flex; flex-direction:column; gap:20px;
  overflow:hidden;
  transition:transform .25s ease;
}
.card:hover{ transform:translateY(-4px); }
.card--cloud { background:rgba(211,237,255,.6); --fg:#225065; }
.card--pillow{ background:rgba(254,234,222,.6); --fg:#3C372E; }
/* 무늬 이미지 — 피그마에서 필터·투명도가 적용된 상태로 렌더된 파일 */
.card__graphic{ position:absolute; inset:0; z-index:-1; background:center/cover no-repeat; }
.card--cloud  .card__graphic{ background-image:url("../img/card-graphic-cloud.webp"); }
.card--pillow .card__graphic{ background-image:url("../img/card-graphic-pillow.webp"); }
.card__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 24px 0 40px; min-height:45px;
}
.card__title{
  font-family:var(--font-title);
  font-size:32px; line-height:44.8px; font-weight:400; color:var(--fg);
  -webkit-text-stroke:.3px var(--fg);
}
.goto{
  flex:none; width:40px; height:40px; border-radius:999px;
  background:var(--fg); position:relative;
}
.goto::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:11px; height:11px;
  border-top:1.8px solid #fff; border-right:1.8px solid #fff;
}
.goto::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:15px; height:1.8px; background:#fff; transform:rotate(-45deg);
}
.card__chips{ display:flex; flex-direction:column; gap:10px; padding:0 40px; }
.card__chips--mid{ justify-content:center; flex:1; }
.chiprow{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding:4px 16px; border-radius:24px;
  background:color-mix(in srgb, var(--fg) 10%, transparent);
  font-size:16px; line-height:19.1px; letter-spacing:.48px;
  color:var(--fg); white-space:nowrap;
}

/* =========================================================
   본문(Sub) 배경 — 시안: 세로 그라데이션 + 흐린 구름 + 노이즈
   ========================================================= */
.sub{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg, #EDFBFE 0%, #BAE0E7 84.35%);
}
.sub__clouds{
  position:absolute; z-index:-1; left:calc(50% - 720px - 199px);
  width:2217px; height:4870px; pointer-events:none;
  background:center/contain no-repeat;
}
.sub__clouds--1{ top:236px;  background-image:url("../img/clouds-1.webp"); }
.sub__clouds--2{ top:5849px; background-image:url("../img/clouds-2.webp"); }
.sub__noise{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* =========================================================
   섹션 공통 — 라벨 알약 / 텍스트 알약
   ========================================================= */
.sec{ max-width:var(--container); margin-inline:auto; }
.sec__main{
  padding:240px var(--pad-x) 200px;
  display:flex; flex-direction:column; align-items:center; gap:64px;
}
.seclabel{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:40px 80px; border-radius:94px;
  --glow:#B3DBE1;
  font-family:var(--font-title); font-weight:400;
  font-size:48px; line-height:67.2px; color:var(--navy);
}
.seclabel::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:150%; height:210%; transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--glow) 85%, transparent) 0%,
    color-mix(in srgb, var(--glow) 35%, transparent) 45%,
    transparent 72%);
  pointer-events:none;
}
.seclabel__cloud{ width:54px; height:47px; }

.pill{
  align-self:flex-start;
  display:inline-block; padding:4px 16px; border-radius:34px;
  background:var(--navy); color:var(--paper);
  font-size:16px; line-height:19.1px;
}

/* =========================================================
   브랜드 스토리
   ========================================================= */
/* 편지 카드 — 겉테두리 #B3DBE1 2px(r48) + 속 카드 #225065(r42) */
.letter{
  width:100%; max-width:1200px;
  box-shadow:inset 0 0 0 2px #B3DBE1;   /* 시안 테두리는 안쪽으로 그려짐 */
  border-radius:48px; padding:8px;
}
.letter__inner{
  position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px #B3DBE1;
  border-radius:42px;
  background:var(--navy);
  padding:128px 64px;
  display:flex; flex-direction:column; align-items:center; gap:56px;
}
/* 질감 이미지 — 시안 좌표 그대로 (카드 안쪽 기준) */
.letter__tex{
  position:absolute; pointer-events:none; background-size:100% 100%;
  mix-blend-mode:multiply;   /* 시안: MULTIPLY, 투명도는 이미지에 이미 반영됨 */
}
.letter__tex--a{
  width:774px; height:649px; left:418px; top:524px;
  background-image:url("../img/story-13513.webp");
}
.letter__tex--b{
  width:859px; height:404px; left:-148px; top:-8px;
  background-image:url("../img/story-13514.webp");
}
.letter__stack{
  position:relative; width:1054px; max-width:100%;
  display:flex; flex-direction:column; align-items:center; gap:48px;
}
.letter .pill{ position:relative; align-self:center; }
.letter__quote{
  max-width:640px;
  font-family:var(--font-title); font-weight:400;
  font-size:36px; line-height:52px; color:var(--paper); text-align:center;
  text-shadow:0 0 24px #225065, 0 0 24px #225065, 0 0 8px rgba(255,255,255,.3);
}
.letter__body{
  width:790px; max-width:100%; text-align:center;
  font-size:18px; line-height:40px; letter-spacing:-.36px;
  color:var(--paper);
}
.letter__body p{ margin:0 0 24px; }   /* 시안 문단 간격 24px */
.letter__body p:last-child{ margin-bottom:0; }
.letter__sign{
  font-size:18px; line-height:32px; letter-spacing:-.36px;
  font-weight:700; color:#fff;
}
/* 편지 맺음 서명 — 실제 자필 서명 이미지를 받으면 .signature__name 을 <img> 로 교체 */
.letter__close{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.signature{
  display:flex; align-items:baseline; gap:14px;
  padding-top:14px; border-top:1px solid rgba(233,246,248,.28);
}
.signature__role{ font-size:14px; letter-spacing:.4px; color:rgba(233,246,248,.7); }
.signature__name{
  font-family:var(--font-title); font-weight:400;
  font-size:34px; line-height:1.2; letter-spacing:6px; color:#fff;
  text-shadow:0 0 18px rgba(255,255,255,.28);
}
.signature img{ height:56px; width:auto; }

/* ---------- 원장 소개 ---------- */
.sec__doctor{
  padding:0 var(--pad-x) 120px;
  display:flex; flex-direction:column; align-items:center; gap:40px;
}
.doctor{
  width:100%; max-width:1200px;
  display:flex;                    /* 시안 707 : 493 — 좁아지면 비율 유지한 채 함께 줄어든다 */
}
.doctor__photo{ flex:0 1 707px; min-width:0; }
.doctor__side { flex:0 1 493px; min-width:0; }
.doctor__photo{
  position:relative; align-self:flex-start;   /* 카드 높이에 끌려 늘어나지 않게 */
  border-radius:48px; overflow:hidden;
  aspect-ratio:707/843; background:#dfe9ee;
}
.doctor__photo > img:first-child{ width:100%; height:100%; object-fit:cover; }
.doctor__badge{
  position:absolute; left:63.9%; top:0;
  width:36.1%; height:auto;
}
.doctor__side{ padding-left:clamp(16px,3vw,40px); }
.doctor__card{
  height:100%;
  border-radius:48px; box-shadow:inset 0 0 0 2px #fff;
  background:linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)), rgba(211,237,255,.6);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:clamp(28px,3vw,40px) clamp(28px,8.4vw,120px) clamp(28px,3vw,40px) clamp(24px,3vw,36px);
  display:flex; flex-direction:column; gap:20px;
}
.doctor__name{
  font-size:clamp(26px,2.9vw,40px); line-height:clamp(34px,3.4vw,47.7px); font-weight:700; color:var(--navy);
  white-space:nowrap;
}
.doctor__name .bar{ font-weight:400; opacity:.6; }
.doctor__list{ font-size:clamp(15px,1.45vw,20px); line-height:clamp(26px,2.55vw,36px); letter-spacing:-.6px; color:var(--navy); }
.doctor__list dt{ font-weight:700; }
.doctor__list dt + dd{ margin-top:0; }
.doctor__list dt:not(:first-of-type){ margin-top:36px; }
.doctor__list dd{ margin:0; }

/* ---------- 진료 철학 ---------- */
.pledge{
  width:100%; max-width:1200px;
  border-radius:40px; box-shadow:inset 0 0 0 2px #fff;
  background:rgba(34,80,101,.8);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:40px 120px 40px 36px;
  display:flex; flex-direction:column; gap:20px;
}
.pledge li{
  font-size:18px; line-height:36px; letter-spacing:-.54px; color:var(--paper);
  padding-left:1.1em; text-indent:-1.1em;
}
.pledge li::before{ content:"·"; margin-right:.6em; }
.pledge b{ color:#fff; font-weight:700; }

/* =========================================================
   진료 섹션 (구름 / 베개) — 시안 실측
   ========================================================= */
.sec--care{
  padding:240px var(--pad-x) 120px;
  display:flex; flex-direction:column; align-items:center; gap:120px;
}
.care__intro{
  width:100%; max-width:1200px;
  display:flex; flex-direction:column; align-items:center; gap:40px;
}
.seclabel--wide span{ letter-spacing:5.76px; }

/* 베개 진료 — 웜톤 */
.seclabel--pillow{ --glow:#E1C6B3; color:#3C372E; }
.seclabel--pillow .seclabel__cloud{ content:url("../img/logo-cloud-warm.svg"); }
/* 상세 글 머리말은 주변이 전부 차가운 톤이라 크림색으로 한 단계 밝게 */
.seclabel--sm.seclabel--pillow{ --glow:#FEEADE; }
.leadcard--pillow{
  background:rgba(255,228,211,.4) !important;
  box-shadow:inset 0 0 0 2px #fff, var(--sh-card) !important;
  color:#3C372E;
}
.leadcard--pillow .leadcard__title,
.leadcard--pillow .leadcard__body{ color:#3C372E; }

.leadcard{
  width:100%; max-width:1100px;
  border-radius:48px;
  background:rgba(211,237,255,.4);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 0 0 2px #fff, var(--sh-card);
  padding:40px 0;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center;
}
.leadcard__title{
  font-family:var(--font-title); font-weight:400;
  font-size:32px; line-height:44.8px; color:var(--navy);
}
.leadcard__body{ font-size:18px; line-height:34px; letter-spacing:-.54px; color:var(--navy); }
.leadcard__body p{ margin:0 0 10px; }   /* 시안 렌더 기준(노드 높이 112px에 맞춤) */
.leadcard__body p:last-child{ margin-bottom:0; }

.carelist{
  width:100%; max-width:1100px;
  display:flex; flex-direction:column; gap:32px;
  filter:drop-shadow(var(--sh-card));
}
.carelist__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px; }
.carelist__row > *{ flex:1 1 470px; max-width:534px; }
.carecard{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:201px; border-radius:48px;
  padding:24px 0 28px;
  display:flex; flex-direction:column; gap:16px;
  transition:transform .25s ease;
}
.carecard:hover{ transform:translateY(-4px); }
.carecard{ box-shadow:inset 0 0 0 2px #fff; }
.carecard--cloud { background:rgba(211,237,255,.6); --fg:#225065; }
.carecard--cloud .card__graphic{ background-image:url("../img/card-graphic-cloud.webp"); }
.carecard--pillow{ background:rgba(254,234,222,.6); --fg:#47331B; }
.carecard--pillow .card__graphic{ background-image:url("../img/card-graphic-pillow.webp"); }
.carecard__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 24px 0 40px; min-height:45px;
}
.carecard__title{
  font-family:var(--font-title); font-weight:400;
  font-size:32px; line-height:44.8px; color:var(--fg);
}
.carecard__desc{
  padding:6px 24px 0 40px;
  font-family:var(--font-title); font-weight:400;
  font-size:22px; line-height:30.8px; color:#537687;
}
.carecard--pillow .carecard__desc{ color:#7E5D4B; }

/* =========================================================
   공간과 한약 — 시안 실측
   ========================================================= */
.sec--space{ display:flex; flex-direction:column; align-items:center; }
.space__label{ padding:240px var(--pad-x) 40px; }

/* 슬라이더 1440x860 */
.slider{
  position:relative; width:100%; height:860px; overflow:hidden;
  box-shadow:inset 0 0 0 2px #fff;
}
.slider__img{ width:100%; height:100%; object-fit:cover; }
.slider__ctrl{
  position:absolute; inset:0; margin:auto 56px; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.slider__btn{
  pointer-events:auto; cursor:pointer;
  width:64px; height:64px; border:0; border-radius:48px;
  background:rgba(34,80,101,.2);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  position:relative; transition:background .2s ease;
}
.slider__btn:hover{ background:rgba(34,80,101,.35); }
.slider__btn::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:14px; height:14px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:translateX(3px) rotate(45deg);
}
.slider__btn--next::before{ transform:translateX(-3px) rotate(-135deg); }

/* 시설 안내 / 한약 소개 머리말 */
.space__head{
  padding:120px var(--pad-x) 80px;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  text-align:center;
}
.space__head--herb{ padding-top:200px; }
.pill2{
  padding:4px 8px; border-radius:999px;
  background:radial-gradient(closest-side, #B3DBE1 0%, rgba(179,219,225,0) 100%);
  font-family:var(--font-title); font-weight:400;
  font-size:36px; line-height:50.4px; letter-spacing:4.32px; color:var(--navy);
}
.space__lead{
  font-size:18px; line-height:34px; letter-spacing:-.54px; color:var(--navy);
}
.space__lead p{ margin:0; }
.space__lead p + p{ margin-top:10px; }

/* 사진 카드 */
.photogrid{
  /* content-box + width:100% + 좌우 패딩 120 이면 1440 미만에서 화면보다 240px 넓어졌다.
     border-box 로 두고 max-width 를 1440(=1200+패딩)으로 잡으면 시안 폭은 그대로다. */
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--pad-x); box-sizing:border-box;
  display:grid; grid-template-columns:1fr 1fr; gap:56px 32px;
  filter:drop-shadow(var(--sh-card));
}
.photogrid--herb{ padding-bottom:200px; }
.photo{ display:flex; flex-direction:column; gap:20px; }
.photo > img{
  width:100%; height:auto; aspect-ratio:584/366; object-fit:cover;   /* height 속성보다 CSS 우선 */
  border-radius:12px; box-shadow:inset 0 0 0 2px #fff;
}
.photo__cap{ padding-inline:8px; display:flex; flex-direction:column; gap:8px; }
.photo--herb .photo__cap{ gap:16px; }
.photo__title{
  font-family:var(--font-title); font-weight:400;
  font-size:28px; line-height:39.2px; letter-spacing:3.36px; color:var(--navy);
}
.photo__desc{ font-size:18px; line-height:30px; letter-spacing:-.54px; color:var(--navy); word-break:keep-all; }
.photo__row{ display:flex; align-items:flex-start; gap:16px; }
.photo__names{ flex:1; }
.photo__sub{
  font-family:var(--font-title); font-weight:400;
  font-size:22px; line-height:30.8px; color:var(--navy); word-break:keep-all;
}
.pill--sm{ font-size:14px; line-height:16.7px; padding:4px 16px; white-space:nowrap; align-self:flex-start; }

/* =========================================================
   예약과 방문 — 시안 실측 (배경 #225065 + 흑백 사진)
   ========================================================= */
.sec--visit{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy);
}
.sec--visit::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("../img/visit-bg.webp") center/cover no-repeat;
  mix-blend-mode:multiply;   /* 시안: MULTIPLY 50% (투명도는 이미지에 반영됨) */
}
.visit__inner{
  max-width:var(--container); margin-inline:auto;
  padding:200px var(--pad-x) 240px;
  display:flex; flex-direction:column; align-items:center; gap:160px;
}
.visit__head{ display:flex; flex-direction:column; align-items:center; gap:48px; text-align:center; }
.visit__title{ display:flex; flex-direction:column; align-items:center; gap:40px; }
.seclabel--dark{
  padding:40px 80px;
  --glow:#153B4D;
  color:var(--paper);
  font-size:40px; line-height:56px; letter-spacing:4.8px;
}
.seclabel--dark .seclabel__cloud{ filter:brightness(0) invert(1); }
.visit__wordmark{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  filter:drop-shadow(var(--sh-glow));
}
.visit__wordmark img{ width:445px; height:auto; }
.visit__eyebrow{
  font-family:var(--font-title); font-weight:400;
  font-size:48px; line-height:67.2px; color:#fff;
}
.visit__lead{ font-size:18px; line-height:34px; letter-spacing:-.54px; color:var(--paper); }
.visit__lead p{ margin:0; }
.visit__lead p + p{ margin-top:16px; }   /* 시안 문단간격 */

/* 네이버 예약 큰 버튼 218x66 */
.bookbtn{
  display:inline-flex; align-items:center; gap:8px;
  height:66px; padding:16px 40px; border-radius:48px;
  background:rgba(179,219,225,.12);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:2px 2px 24px rgba(26,63,80,.6);
  color:#fff; font-family:var(--font-title);
  font-size:24px; line-height:33.6px;
  text-shadow:0 0 16px #254F62;
  transition:transform .2s ease;
}
.bookbtn:hover{ transform:translateY(-2px); }
.bookbtn__icon{
  width:24px; height:24px; flex:none;
  background:url("../img/naver-n-green.svg") center/contain no-repeat;
}

/* 정보 카드 */
.visit__cards{
  width:100%; max-width:1200px;
  display:flex; flex-direction:column; gap:20px;
  filter:drop-shadow(var(--sh-deep));
}
.visit__row{ display:flex; gap:20px; align-items:stretch; flex-wrap:wrap; }
.vcard{
  border-radius:48px;
  background:rgba(40,71,93,.1);
  box-shadow:inset 0 0 0 2px #376175;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:24px 0 28px;
  display:flex; flex-direction:column; gap:16px;
}
/* basis 를 실제 폭으로 줘야 좁아질 때 양쪽이 같은 비율로 줄어든다.
   (flex:1 은 basis 0 이라 오른쪽 카드가 글자 한 칸까지 짜부라졌다) */
.vcard--hours{ flex:1 1 636px; max-width:636px; min-width:0; }
.vcard--first{ flex:1 1 420px; min-width:0; }
.vcard__title{
  padding:6px 24px 0 40px;
  font-family:var(--font-title); font-weight:400;
  font-size:32px; line-height:44.8px; color:#fff;
}
.vcard__list{
  padding:6px 32px 0 20px;
  font-size:18px; line-height:30px; letter-spacing:-.54px; color:var(--paper);
  word-break:keep-all;                      /* '보장합니 / 다' 처럼 낱말이 쪼개지지 않게 */
}
.vcard__list li{ padding-left:1em; text-indent:-1em; }
.vcard__list li::before{ content:"·"; margin-right:.6em; }
.vcard__list li + li{ margin-top:26px; }   /* 시안 listSpacing 26 */
.vcard__list b{ color:#fff; font-weight:700; }
.vcard__note{ padding:6px 24px 0 19px; font-size:18px; line-height:28px; color:var(--paper); word-break:keep-all; }

/* 요일 칩 */
/* 7칸을 한 줄로. 칸은 78px 이 최대이고 자리가 모자라면 같이 줄어든다 */
.hours{
  display:grid; grid-template-columns:repeat(7,minmax(0,78px));
  gap:8px; padding:6px 19px 0; justify-content:center;
}
.hours__day{
  width:100%; min-width:0; height:165px; border-radius:24px;
  background:#143B4D;
  /* 요일 · 달표시 · 시간 을 같은 높이에 고정 → 칸마다 줄이 일자로 맞는다 */
  display:grid; grid-template-rows:38px 16px 1fr;
  justify-items:center; align-items:center;
  padding:16px 0;
}
.hours__day--off{ background:rgba(20,59,77,.4); }
.hours__slot{ display:flex; align-items:center; justify-content:center; height:16px; }
.hours__badge{
  padding:4px 9px 6px; border-radius:24px; background:rgba(0,0,0,.4);
  font-family:var(--font-title); font-size:24px; line-height:28px; letter-spacing:-.72px; color:#fff;
  display:flex; align-items:center;
}
/* 야간진료 표시 달 (시안 12x12 #FFED62) */
.hours__moon{
  width:12px; height:12px; border-radius:50%;
  background:#FFED62;
  -webkit-mask:radial-gradient(circle 9px at 130% 22%, transparent 99%, #000 100%);
          mask:radial-gradient(circle 9px at 130% 22%, transparent 99%, #000 100%);
}
.hours__time{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:18px; line-height:28px; letter-spacing:-.54px; color:#fff;
  white-space:nowrap;
}
.hours__dash{ margin:-10px 0; }
.hours__late{ color:#FFED62; }
.hours__closed{ font-size:18px; line-height:28px; letter-spacing:-.54px; color:#fff; white-space:nowrap; }

/* 지도 */
.vcard--map{ padding:24px 0 20px; gap:24px; }
.vcard__maprow{ display:flex; flex-wrap:wrap; gap:24px; padding:0 20px; align-items:stretch; }
.mapbox{
  flex:0 1 693px; min-width:min(300px,100%);  /* 시안 693 : 443 비율 유지, 좁아지면 접힘 */
  aspect-ratio:693/393; height:auto;
  border-radius:36px; overflow:hidden; background:var(--navy);
}
.mapbox img{ width:100%; height:100%; object-fit:cover; }
.addr{
  flex:0 1 443px; min-width:min(280px,100%); border-radius:36px; background:rgba(24,65,85,.24);
  padding:24px 32px 36px 16px;
  display:flex; flex-direction:column; gap:21px;
}
.addr dt{
  align-self:flex-start; margin:6px 0 12px 12px;
  padding:0 8px; height:28px; border-radius:24px; background:rgba(0,0,0,.4);
  display:inline-flex; width:fit-content; align-items:center;
  font-size:14px; line-height:28px; letter-spacing:.56px; color:#fff;
}
.addr dd{
  margin:0 24px 0 12px;
  font-size:18px; line-height:21.5px; letter-spacing:-.36px; color:#fff;
}

/* =========================================================
   증상 호버 카드 — 시안: ON_HOVER → 오버레이 디졸브 0.3s
   ========================================================= */
.hovercard{
  position:absolute; inset:0; z-index:2;
  border-radius:48px;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:24px 0 28px;
  display:flex; flex-direction:column; gap:16px;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease-out, visibility .3s;
}
.carecard--cloud  .hovercard{ background:rgba(34,80,101,.9); }
.carecard--pillow .hovercard{ background:rgba(60,55,46,.9); }
.carecard:hover .hovercard,
.carecard:focus-visible .hovercard,
.carecard.is-open .hovercard{ opacity:1; visibility:visible; }
.hovercard__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 24px 0 40px; min-height:45px;
}
.hovercard__head .carecard__title{ color:var(--paper); }
.hovercard__head .goto{ background:var(--paper); }
.hovercard__head .goto::before{ border-color:var(--navy); }
.carecard--pillow .hovercard__head .goto::before{ border-color:#3C372E; }
.hovercard__head .goto::after{ background:var(--navy); }
.carecard--pillow .hovercard__head .goto::after{ background:#3C372E; }
.hovercard__desc{
  flex:1; display:flex; align-items:center;
  padding:0 24px 0 40px;
  font-size:16px; line-height:28px; color:var(--paper);
}

/* =========================================================
   증상 상세 페이지
   ========================================================= */
.detail{
  max-width:var(--container); margin-inline:auto; min-width:0;
  padding:140px var(--pad-x) 160px;
  display:flex; flex-direction:column; align-items:center; gap:64px;
}
.crumb{
  font-size:13px; letter-spacing:.2px; color:var(--ink-soft); opacity:.85;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px; align-items:center;
}
.crumb a{ color:var(--ink-soft); }
.crumb a:hover{ color:var(--navy); text-decoration:underline; }
.crumb b{ color:var(--navy); font-weight:600; }
.crumb span{ opacity:.5; }

.detail__head{
  width:100%; max-width:860px; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center;
}
.seclabel--sm{
  padding:24px 56px; font-size:36px; line-height:50.4px; gap:6px;
}
.seclabel--sm .seclabel__cloud{ width:40px; height:35px; }
.detail__title{
  font-family:var(--font-title); font-weight:400;
  font-size:40px; line-height:56px; color:var(--navy); word-break:keep-all;
}
.detail__sub{ font-size:20px; line-height:32px; color:var(--ink-soft); margin-top:-12px; }
.detail__lead{
  max-width:720px;
  font-size:17px; line-height:32px; letter-spacing:-.3px; color:var(--navy);
  background:rgba(211,237,255,.4);              /* 시안 안내 카드와 동일 */
  border-radius:48px; padding:28px 40px;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 0 0 2px #fff, var(--sh-card);
}
.bookbtn--light{
  background:rgba(34,80,101,.9); box-shadow:0 6px 24px rgba(18,58,71,.24);
}


.othergrid{ width:100%; max-width:1100px; min-width:0; display:flex; flex-direction:column; gap:20px; align-items:center; }
.othergrid__all{
  font-size:14px; color:var(--ink-soft); text-decoration:underline;
  text-underline-offset:4px; text-decoration-color:rgba(110,149,167,.4);
}
.othergrid__all:hover{ color:var(--navy); text-decoration-color:currentColor; }
.othergrid__title{
  font-family:var(--font-title); font-weight:400;
  font-size:28px; line-height:39px; color:var(--navy);
}
.othergrid__list{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.othercard{
  padding:10px 22px; border-radius:999px;
  font-size:16px; line-height:24px;
  box-shadow:inset 0 0 0 1.5px #fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.othercard--cloud { background:rgba(211,237,255,.7); color:#225065; }
.othercard--pillow{ background:rgba(254,234,222,.7); color:#3C372E; }
.othercard:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px #fff, 0 6px 18px rgba(34,80,101,.14); }

/* ---------- 미완성 섹션 ---------- */
.section--todo{ text-align:center; max-width:var(--container); margin-inline:auto; padding:120px var(--pad-x); }
.todo{
  border:1px dashed rgba(34,80,101,.22); border-radius:12px;
  padding:60px 20px; color:var(--ink-soft); font-size:14px;
}


/* =========================================================
   증상 글 본문 — 이미지가 아닌 실제 텍스트
   ========================================================= */
.art{
  width:100%; max-width:720px; min-width:0;
  display:flex; flex-direction:column; gap:22px;
}
.art__h{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(24px, 3.4vw, 32px); line-height:1.4;
  color:var(--navy); text-align:center;
  margin-top:18px; padding-top:22px;
  border-top:1px solid rgba(34,80,101,.14);
}
.art > .art__h:first-child{ margin-top:0; padding-top:0; border-top:0; }
.art__p{
  font-size:clamp(16px, 1.6vw, 17.5px); line-height:1.85;
  letter-spacing:-.3px; color:var(--ink-read); word-break:keep-all;
}
.art__p b{ color:var(--navy); font-weight:600; }
.art__chips{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;
  padding:20px; border-radius:24px;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
.art__chips li{
  padding:7px 16px; border-radius:999px;
  background:rgba(34,80,101,.08);
  font-size:clamp(13px, 1.4vw, 15px); line-height:1.5; color:var(--navy);
  word-break:keep-all;
}

/* 글 중간 브랜드 배너 — 원본 이미지 대신 우리 서체·로고로 */
.artbrand{
  margin:10px 0; padding:44px 32px;
  border-radius:48px; text-align:center;
  background:rgba(211,237,255,.5);
  box-shadow:inset 0 0 0 2px #fff, var(--sh-card);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.artbrand__eyebrow{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(20px,2.4vw,26px); line-height:1.5; color:var(--navy);
}
.artbrand__mark{ width:min(100%,300px); height:auto; }

.art__fig{ margin:2px 0; display:flex; justify-content:center; }
.art__fig img{
  width:100%; max-width:560px; height:auto; border-radius:12px; display:block;
  box-shadow:0 0 32px rgba(34,80,101,.1);
}

/* 원본에서 둥글게 잘린 사진 — 흰 상자 없이 타원 그대로 */
.art__fig--round{ display:flex; justify-content:center; margin:8px 0; }
.art__fig--round img{
  width:auto; max-width:min(100%, 340px);
  border-radius:50%;
  box-shadow:0 10px 30px rgba(34,80,101,.16);
}


/* =========================================================
   진료시간·오시는 길 압축판 — 시안 '예약과 방문' 부품 재사용
   ========================================================= */
.visit--compact .visit__inner{
  padding:clamp(64px,6vw,96px) var(--pad-x) clamp(72px,7vw,104px);
  gap:clamp(36px,3.4vw,52px);
}
.visit--compact .visit__cards{ gap:20px; }
/* 진료시간 카드는 공통 규칙(flex:1 1 636px)을 그대로 쓴다 — 좁아지면 같이 줄어든다.
   지도 카드만 세로 배치(basis가 높이가 되는 자리)라 auto 로 고정한다. */
.visit--compact .vcard--map{ flex:0 0 auto; width:100%; }
.addr__cta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
@media (max-width:620px){
  /* 좁으면 어차피 한 줄에 안 들어가므로 아예 꽉 찬 세로 버튼으로 */
  .addr__cta{ flex-direction:column; align-items:stretch; }
  .addr__cta .bookbtn--sm{ justify-content:center; }
}
.bookbtn--ghost{
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
  font-family:var(--font-body); font-size:17px; font-weight:600; letter-spacing:.2px;
  text-shadow:none;
}
.bookbtn--ghost .telicon{ width:17px; height:17px; }
/* 오시는 길 카드 안의 작은 버튼 3종 (전화·네이버·간편문의) */
.bookbtn--sm{
  height:52px; padding:12px 15px; gap:6px;   /* 3개가 한 줄에 들어가는 최대치 */
  font-family:var(--font-body); font-size:16px; font-weight:600; letter-spacing:-.2px;
  text-shadow:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4), 2px 2px 18px rgba(26,63,80,.4);
}
.bookbtn--sm .bookbtn__icon,
.bookbtn--sm .bookbtn__tel,
.bookbtn--sm .bookbtn__note{ width:19px; height:19px; }
/* 예약과 방문 3버튼 — 네이버 예약과 같은 모양, 아이콘만 다르게 */
.bookbtn__tel, .bookbtn__note{
  width:24px; height:24px; flex:none; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bookbtn__note{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4V5a1 1 0 0 1 1-1zm3 5h10v1.6H7V9zm0 3.4h6.6V14H7v-1.6z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4V5a1 1 0 0 1 1-1zm3 5h10v1.6H7V9zm0 3.4h6.6V14H7v-1.6z'/%3E%3C/svg%3E");
}



/* =========================================================
   증상별 안내 페이지
   ========================================================= */
.symwrap{
  max-width:var(--container); margin-inline:auto;
  padding:140px var(--pad-x) 40px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.symwrap__title{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(28px,3.4vw,40px); line-height:1.4; color:var(--navy); text-align:center;
}
.symwrap__lead{
  font-size:clamp(15px,1.5vw,18px); line-height:1.9; letter-spacing:-.3px;
  color:var(--ink-read); text-align:center; word-break:keep-all;
}
.symgroup{ width:100%; max-width:1100px; margin-top:32px; }
.symgroup__title{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(22px,2.6vw,28px); line-height:1.5; margin-bottom:20px; text-align:center;
}
.symgroup__title--cloud { color:#225065; }
.symgroup__title--pillow{ color:#3C372E; }
.symgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:16px;
  filter:drop-shadow(var(--sh-card));
}
.symcard{
  display:flex; flex-direction:column; gap:10px;
  padding:22px 24px; border-radius:36px;
  box-shadow:inset 0 0 0 2px #fff;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:transform .22s ease;
}
.symcard:hover{ transform:translateY(-3px); }
.symcard--cloud { background:rgba(211,237,255,.6); --fg:#225065; }
.symcard--pillow{ background:rgba(254,234,222,.6); --fg:#47331B; }
.symcard__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.symcard__head b{
  font-family:var(--font-title); font-weight:400;
  font-size:23px; line-height:1.4; color:var(--fg);
}
.symcard .goto{ width:32px; height:32px; }
.symcard .goto::before{ width:9px; height:9px; }
.symcard .goto::after{ width:12px; }
.symcard__desc{
  font-size:15px; line-height:1.7; letter-spacing:-.2px; word-break:keep-all;
  color:color-mix(in srgb, var(--fg) 76%, transparent);
}

/* =========================================================
   상단 메뉴 — 진료별 질환 펼침
   ========================================================= */
.gnb{ align-items:center; }
.navitem{ position:relative; display:flex; }
.navpanel{
  position:absolute; top:100%; left:50%; z-index:5;
  transform:translateX(-50%) translateY(2px);
  width:max-content; min-width:260px;
  max-width:min(560px, calc(100vw - 24px));
  padding:18px;
  border-radius:36px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 0 0 2px #fff, var(--sh-card);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
/* 메뉴와 패널 사이 빈틈을 덮는 투명 다리.
   이게 없으면 마우스를 목록으로 내리는 순간 패널이 닫혀 클릭할 수 없다. */
.navpanel::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:16px;
}
.navitem:hover .navpanel,
.navitem:focus-within .navpanel,
.navitem.is-open .navpanel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(10px);
}
/* 칸 폭을 글자에 맞춘다 (1fr 이면 '자율신경실조증' 이 옆 칸을 침범했다) */
.navpanel__grid{ display:grid; grid-template-columns:repeat(2,max-content); gap:6px 10px; }
.navitem:first-of-type .navpanel__grid{ grid-template-columns:max-content; }
.navpanel__item{
  padding:9px 14px; border-radius:24px; white-space:nowrap;
  font-size:15px; line-height:20px; letter-spacing:0;
  transition:background .18s ease;
}
.navpanel__item--cloud { color:#225065; }
.navpanel__item--pillow{ color:#3C372E; }
.navpanel__item--cloud:hover { background:rgba(211,237,255,.85); color:#225065; }
.navpanel__item--pillow:hover{ background:rgba(254,234,222,.85); color:#3C372E; }
.navpanel__all{
  display:block; margin-top:12px; padding-top:12px; text-align:center;
  border-top:1px solid rgba(34,80,101,.14);
  font-size:13px; color:var(--ink-soft); letter-spacing:0;
}
.navpanel__all:hover{ color:var(--navy); }
/* 손가락으로 쓰는 기기에서는 hover 가 없으므로 첫 탭으로 펼친다 */
@media (hover:none){
  .navitem > a[aria-haspopup]::after{
    content:""; width:7px; height:7px; margin-left:7px;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:translateY(-2px) rotate(45deg); opacity:.55;
    transition:transform .2s ease;
  }
  .navitem.is-open > a[aria-haspopup]::after{ transform:translateY(1px) rotate(225deg); opacity:.9; }
  .navpanel__item{ padding:12px 16px; }   /* 손가락으로 누를 수 있는 크기 */
  .navpanel__all{ padding-top:16px; padding-bottom:4px; }
}

/* 어두운 탭바 위에서는 패널도 어둡게 */
.tabbar.is-dark .navpanel{
  background:rgba(18,47,61,.9);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14), var(--sh-deep);
}
.tabbar.is-dark .navpanel__item{ color:rgba(233,246,248,.85); }
.tabbar.is-dark .navpanel__item:hover{ background:rgba(255,255,255,.12); color:#fff; }
.tabbar.is-dark .navpanel__all{ border-top-color:rgba(255,255,255,.18); color:rgba(233,246,248,.6); }

/* =========================================================
   맨 위로
   ========================================================= */
.totop{
  position:fixed; right:32px; bottom:calc(32px + 54px + 10px + 54px + 10px); z-index:89;
  width:54px; height:54px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--navy);
  box-shadow:0 6px 24px rgba(18,58,71,.2), inset 0 0 0 1.5px rgba(34,80,101,.18);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ transform:translateY(-2px); }
.totop::before{
  content:""; width:13px; height:13px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(-45deg) translate(-2px,2px);
}

/* =========================================================
   플로팅 — 전화 + 네이버 예약
   ========================================================= */
.fab{
  position:fixed; right:32px; bottom:32px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.fab__tel, .fab__book{
  display:inline-flex; align-items:center; gap:8px;
  height:54px; border-radius:999px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:transform .2s ease;
}
.fab__tel{
  padding:0 26px; background:rgba(255,255,255,.92); color:var(--navy);
  box-shadow:0 6px 24px rgba(18,58,71,.2), inset 0 0 0 1.5px rgba(34,80,101,.18);
  font-family:var(--font-title); font-size:19.7px; line-height:27.6px; font-weight:400;
}
/* 네이버 N 배지와 같은 형태의 전화 배지 */
.fab__tel .telicon{
  width:18px; height:18px; flex:none; border-radius:4px;
  background:var(--navy); color:#fff;
  -webkit-mask:none; mask:none;
  display:grid; place-items:center;
}
.fab__tel .telicon::before{
  content:""; width:11px; height:11px; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fab__book{
  padding:0 26px; background:rgba(34,80,101,.9); color:#fff;
  font-family:var(--font-title); font-size:19.7px; line-height:27.6px;
  text-shadow:0 0 13px #254F62;
  box-shadow:0 6px 24px rgba(18,58,71,.32);
}
.fab__tel:hover, .fab__book:hover{ transform:translateY(-2px); }
.fab{ transition:opacity .25s ease, visibility .25s; }
.fab.is-off{ opacity:0; visibility:hidden; }
.fab .telicon{ width:18px; height:18px; }


/* 랜딩 하단 진료시간·오시는 길 */

/* =========================================================
   푸터 — 시안 1440x296, pad 64/120, gap 28
   ========================================================= */
.footer{ background:#6E95A7; color:var(--paper); }
.footer__inner{
  max-width:var(--container); margin-inline:auto;
  padding:64px var(--pad-x); position:relative;
  display:flex; flex-direction:column; gap:28px;
}
.brand--footer img{ width:238px; height:auto; }
.footer__meta{ font-size:14px; line-height:20px; letter-spacing:.56px; }
.footer__meta p{ margin:0; }
.footer__meta p + p{ margin-top:8px; }
.footer__copy{
  position:absolute; right:var(--pad-x); bottom:64px;
  font-size:14px; line-height:16.7px; letter-spacing:.56px;
}

/* =========================================================
   네이버 예약 플로팅 — 시안 179x54, r39.4
   ========================================================= */
.naver-cta{
  position:fixed; right:32px; bottom:32px; z-index:90;
  display:inline-flex; align-items:center; gap:6.6px;
  height:54px; padding:13px 32px; border-radius:39.4px;
  background:rgba(34,80,101,.8);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:#fff; font-family:var(--font-title);
  font-size:19.7px; line-height:27.6px;
  text-shadow:0 0 13px #254F62;
  transition:transform .2s ease;
}
.naver-cta:hover{ transform:translateY(-2px); }
.naver-cta__icon{
  width:20px; height:20px; flex:none;
  background:url("../img/naver-n.svg") center/contain no-repeat;
}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:1320px){
  .gnb{ gap:0; }
  .gnb a{ padding:6px 12px; font-size:16px; letter-spacing:.4px; }
}
@media (max-width:1320px){
  /* 요일 칩을 줄이고 그만큼 '첫 진료 안내' 를 넓게.
     flex 는 '줄바꿈을 먼저 정하고 나서' 줄이므로, basis 합(880)이
     줄에 들어가야 옆으로 붙어 있는다. 1320 부터 적용해야 끊기지 않는다. */
  .vcard--hours{ flex:1 1 480px; max-width:560px; }
  .vcard--first{ flex:1 1 400px; }
  .hours{ gap:6px; padding:6px 12px 0; }
  .hours__day{
    height:auto; min-height:142px; padding:14px 2px; grid-template-rows:34px 14px 1fr;
  }
  .hours__badge{ font-size:20px; padding:3px 7px 5px; letter-spacing:-.4px; }
  .hours__time,.hours__closed{ font-size:15px; line-height:25px; letter-spacing:-.6px; }
  .vcard__title{ font-size:28px; line-height:40px; padding-left:32px; }
  .vcard__list{ font-size:17px; line-height:29px; padding:6px 24px 0 18px; }
  /* 지도·주소는 .vcard__maprow 의 flex 설정이 알아서 접히므로 강제하지 않는다 */
}
@media (max-width:1000px){
  /* 이보다 좁으면 나란히 두는 것보다 위아래로 두는 편이 훨씬 읽기 좋다 */
  .vcard--hours{ flex:1 1 100%; max-width:none; }
  .vcard--first{ flex:1 1 100%; }
}
@media (max-width:820px){
  /* 이보다 좁아지면 나란히 두기 어려우므로 위아래로, 사진은 가로형으로 */
  .doctor{ flex-direction:column; gap:24px; }
  .doctor__photo{ flex:none; aspect-ratio:16/10; }
  .doctor__side { flex:none; padding-left:0; }
}
@media (max-width:1100px){
  :root{ --pad-x:48px; }
  .sec__main{ padding:140px var(--pad-x) 100px; }
  .letter__inner{ padding:72px 32px; }
  .letter__tex{ display:none; }
  .sec--care{ padding:140px var(--pad-x) 80px; gap:72px; }
  .space__label{ padding:140px var(--pad-x) 32px; }
  .slider{ height:min(60vh,520px); }
  .space__head{ padding:80px var(--pad-x) 48px; }
  .space__head--herb{ padding-top:120px; }
  .photogrid{ grid-template-columns:1fr; gap:40px; }
  .photogrid--herb{ padding-bottom:120px; }
  .visit__inner{ padding:120px var(--pad-x) 140px; gap:80px; }
  .detail{ padding:120px var(--pad-x) 100px; gap:44px; }
  .gnb{ gap:26px; }
  .entry{ grid-template-columns:1fr; }
  .card{ border-radius:36px; }
  .doctor{ grid-template-columns:1fr; }
  .letter{ padding:48px 32px; }
}
@media (max-width:680px){
  :root{ --pad-x:20px; }
  .tabbar{ background:rgba(255,255,255,.9); backdrop-filter:blur(14px); }
  .detail{ padding-top:132px; }
  .symwrap{ padding-top:132px; }
  .symgrid{ grid-template-columns:1fr; }            /* 헤더 두 줄 아래로 여유 */
  .signature__name{ font-size:27px; letter-spacing:4px; }
  .seclabel{ font-size:32px; line-height:46px; padding:28px 40px; }
  .seclabel--dark{ font-size:28px; line-height:40px; padding:28px 40px; }
  .seclabel__cloud{ width:40px; height:35px; }
  .letter__quote{ font-size:23px; line-height:34px; }
  .letter__body{ font-size:15px; line-height:30px; }
  .letter__body p{ margin-bottom:18px; }
  .doctor{ gap:24px; }
  .doctor__photo{ aspect-ratio:4/3; }
  .doctor__side{ padding-left:0; }
  .doctor__card{ padding:28px 24px; border-radius:36px; }
  .doctor__name{ font-size:28px; line-height:36px; }
  .doctor__list{ font-size:16px; line-height:30px; }
  .pledge{ padding:28px 24px; border-radius:40px; }
  .pledge li{ font-size:15px; line-height:28px; }
  .leadcard__title,.carecard__title,.vcard__title{ font-size:23px; line-height:32px; }
  .leadcard__body,.space__lead,.visit__lead{ font-size:15px; line-height:28px; }
  .carecard{ border-radius:36px; }
  .hovercard{ border-radius:36px; padding:20px 0 24px; }
  .hovercard__head{ padding:0 20px 0 24px; }
  .hovercard__desc{ padding:0 20px 0 24px; font-size:14px; line-height:24px; }
  .carecard__head{ padding:0 20px 0 24px; }
  .carecard__desc{ padding:4px 20px 0 24px; font-size:18px; line-height:26px; }
  .pill2{ font-size:26px; line-height:38px; }
  .photo__title{ font-size:22px; line-height:32px; }
  .photo__desc,.vcard__list,.vcard__note,.addr dd{ font-size:15px; line-height:26px; }
  .visit__eyebrow{ font-size:28px; line-height:42px; }
  .detail__title{ font-size:28px; line-height:40px; }
  .detail__sub{ font-size:16px; line-height:26px; }
  .detail__lead{ font-size:15px; line-height:28px; padding:20px 20px; border-radius:24px; }
  .seclabel--sm{ font-size:22px; line-height:32px; padding:18px 24px; word-break:keep-all; }
  .visit--compact .seclabel--sm span{ letter-spacing:2px; }
  .othergrid__title{ font-size:22px; }
  .othercard{ font-size:14px; padding:8px 16px; }
  .visit__wordmark img{ width:min(100%,300px); }
  .bookbtn{ font-size:19px; height:58px; padding:14px 28px; }
  .vcard{ border-radius:36px; }
  .hours{ gap:6px; padding:6px 10px 0; }
  .hours__day{ min-height:120px; border-radius:24px; grid-template-rows:32px 13px 1fr; }
  .hours__badge{ font-size:19px; }
  .hours__time,.hours__closed{ font-size:15px; line-height:24px; }
  .addr{ padding:20px 16px 24px; border-radius:36px; }
  .footer__meta{ font-size:13px; }
  /* 모바일: 메뉴를 숨기지 않고 가로 스크롤로 */
  .tabbar__inner{ flex-direction:column; align-items:stretch; height:auto; gap:6px; padding-block:10px; }
  .brand img{ width:170px; }
  .gnb{
    gap:2px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad-x) * -1); padding-inline:var(--pad-x);
  }
  .gnb::-webkit-scrollbar{ display:none; }
  .gnb a{ padding:4px 10px; font-size:14px; white-space:nowrap; letter-spacing:0; }
  html{ scroll-padding-top:96px; }
  .hero__title img{ width:min(100%,320px); }
  .hero__cloud{ width:48px; height:41px; }
  .hero__eyebrow{ font-size:30px; line-height:44px; }
  .hero__sub{ font-size:14px; }
  .hero__inner{ gap:44px; }
  .card__head{ padding:0 20px 0 24px; }
  .card__title{ font-size:23px; line-height:32px; }
  .card__chips{ padding:0 24px; }
  .chip{ font-size:14px; padding:4px 13px; }
  .section{ padding:72px var(--pad-x); }
  .letter__quote{ font-size:20px; }
  .letter__body p{ font-size:13px; }
  .footer__copy{ position:static; margin-top:24px; }
  .naver-cta{ right:16px; bottom:16px; }
  /* 플로팅: 모바일에선 화면 아래 가로 막대로 */
  .fab{
    left:0; right:0; bottom:0; gap:0;
    flex-direction:row; align-items:stretch;   /* 데스크탑 세로배치를 모바일에선 가로 막대로 */
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 -2px 18px rgba(18,58,71,.14);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .fab__tel, .fab__book{ flex:1; justify-content:center; height:50px; border-radius:24px; }
  .fab__tel{ background:#fff; box-shadow:inset 0 0 0 1.5px rgba(34,80,101,.22); margin-right:8px; }
  .fab__book{ background:var(--navy); font-size:17px; }
  .fab__label{ font-size:16px; }
  .navpanel{ display:none; }                 /* 모바일 메뉴는 가로 스크롤이라 펼침 대신 증상 페이지로 */
  .totop{
    right:16px; bottom:calc(78px + env(safe-area-inset-bottom));
    width:46px; height:46px;
  }
  body{ padding-bottom:78px; }        /* 하단 막대에 내용이 가리지 않게 */
  .minihours__d{ padding:10px 2px; gap:2px; }
  .art__chips{ padding:16px; }
}

/* ===================== 간편 문의 폼 ===================== */
.formwrap{
  max-width:var(--container); margin-inline:auto;
  padding:140px var(--pad-x) 40px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.formwrap__title{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(28px,3.4vw,40px); line-height:1.4; color:var(--navy); text-align:center;
}
.formwrap__lead{
  font-size:clamp(15px,1.5vw,18px); line-height:1.9; letter-spacing:-.3px;
  color:var(--ink-read); text-align:center; word-break:keep-all;
}

.fcard{
  width:100%; max-width:720px; margin-top:24px;
  border-radius:48px;
  background:rgba(255,255,255,.52);
  box-shadow:inset 0 0 0 2px #fff, var(--sh-card);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:44px clamp(20px,4vw,52px) 40px;
}
.fform{ display:flex; flex-direction:column; gap:22px; }
.frow{ display:flex; gap:16px; }
.frow > *{ flex:1 1 0; min-width:0; }

.fgrp{ display:flex; flex-direction:column; gap:8px; }
.fgrp__label{
  font-size:15px; font-weight:600; letter-spacing:-.3px; color:var(--navy);
  display:flex; align-items:center; gap:5px;
}
.fgrp__req{ color:#C2726A; font-weight:700; }
.fgrp__hint{ font-size:13px; line-height:1.7; color:var(--ink-soft); letter-spacing:-.3px; }

.fform input[type=text],
.fform input[type=tel],
.fform input[type=date],
.fform select,
.fform textarea{
  width:100%; box-sizing:border-box;
  font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--navy);
  background:rgba(255,255,255,.72);
  border:0; border-radius:16px;
  box-shadow:inset 0 0 0 1.5px rgba(34,80,101,.22);
  padding:14px 18px;
  -webkit-appearance:none; appearance:none;
  transition:box-shadow .18s ease, background .18s ease;
}
.fform textarea{ min-height:132px; resize:vertical; line-height:1.8; }
.fform select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E95A7' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
  padding-right:44px; cursor:pointer;
}
.fform input::placeholder,
.fform textarea::placeholder{ color:#9DB9C6; }
.fform input:focus, .fform select:focus, .fform textarea:focus{
  outline:0; background:#fff;
  box-shadow:inset 0 0 0 2px var(--ink-soft), 0 0 0 4px rgba(110,149,167,.16);
}
.fform :is(input,select,textarea)[aria-invalid="true"]{
  box-shadow:inset 0 0 0 2px #C2726A;
}

/* 개인정보 동의 */
.fagree{
  border-radius:20px; background:rgba(233,246,248,.62);
  box-shadow:inset 0 0 0 1.5px rgba(34,80,101,.14);
  padding:18px 20px; display:flex; flex-direction:column; gap:10px;
}
.fagree__text{ font-size:13px; line-height:1.85; color:var(--ink-read); letter-spacing:-.3px; word-break:keep-all; }
.fagree__text a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.fcheck{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.fcheck input{
  flex:0 0 auto; width:20px; height:20px; margin:1px 0 0;
  accent-color:var(--navy); cursor:pointer;
}
.fcheck span{ font-size:15px; line-height:1.6; color:var(--navy); letter-spacing:-.3px; }

.fsubmit{
  margin-top:4px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:60px; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--font-body); font-size:18px; font-weight:600; letter-spacing:-.3px;
  color:#fff; background:var(--navy);
  box-shadow:var(--sh-card);
  transition:background .18s ease, transform .18s ease, opacity .18s ease;
}
.fsubmit:hover{ background:#1B4051; transform:translateY(-1px); }
.fsubmit:disabled{ opacity:.55; cursor:default; transform:none; }

.fnote{
  margin-top:18px; text-align:center;
  font-size:14px; line-height:1.9; color:var(--ink-soft); letter-spacing:-.3px; word-break:keep-all;
}
.fnote a{ color:var(--navy); font-weight:600; }

/* 상태 메시지 */
.fmsg{
  display:none; margin-top:2px; border-radius:20px; padding:16px 20px;
  font-size:15px; line-height:1.8; letter-spacing:-.3px; word-break:keep-all;
}
.fmsg.is-on{ display:block; }
.fmsg--err{ background:rgba(194,114,106,.1); box-shadow:inset 0 0 0 1.5px rgba(194,114,106,.4); color:#8E4A43; }
.fmsg--err a{ color:#8E4A43; font-weight:700; }

/* 전송 완료 */
.fdone{ display:none; text-align:center; padding:26px 0 8px; }
.fdone.is-on{ display:block; }
.fdone__mark{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  background:var(--paper); box-shadow:var(--sh-glow);
  display:grid; place-items:center;
}
.fdone__mark::after{
  content:""; width:22px; height:12px; margin-top:-5px;
  border-left:3px solid var(--navy); border-bottom:3px solid var(--navy);
  border-radius:2px; transform:rotate(-45deg);
}
.fdone__title{
  font-family:var(--font-title); font-weight:400;
  font-size:28px; line-height:1.5; color:var(--navy); margin-bottom:12px;
}
.fdone__body{ font-size:16px; line-height:1.9; color:var(--ink-read); letter-spacing:-.3px; word-break:keep-all; }

/* 개인정보처리방침 본문 */
.policy{ width:100%; max-width:860px; margin-top:8px; }
.policy h2{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(20px,2.4vw,26px); line-height:1.5; color:var(--navy);
  margin:44px 0 14px;
}
.policy h2:first-child{ margin-top:0; }
.policy p, .policy li{
  font-size:16px; line-height:1.95; color:var(--ink-read); letter-spacing:-.3px; word-break:keep-all;
}
.policy p{ margin-bottom:12px; }
.policy ul{ margin:0 0 12px; padding-left:20px; }
.policy li{ margin-bottom:6px; }
.policy__table{
  width:100%; border-collapse:collapse; margin:8px 0 16px;
  border-radius:20px; overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(34,80,101,.16);
}
.policy__table th, .policy__table td{
  padding:14px 18px; text-align:left; vertical-align:top;
  font-size:15px; line-height:1.8; color:var(--ink-read); letter-spacing:-.3px;
  border-bottom:1px solid rgba(34,80,101,.12);
}
.policy__table th{ background:rgba(233,246,248,.7); color:var(--navy); font-weight:600; white-space:nowrap; }
.policy__table tr:last-child :is(th,td){ border-bottom:0; }
.policy__updated{ margin-top:36px; font-size:14px; color:var(--ink-soft); }

@media (max-width:760px){
  .formwrap{ padding:124px 20px 32px; }   /* 고정 헤더와 「홈으로」 버튼 사이 여유 */
  .fcard{ border-radius:32px; padding:32px 20px 30px; }
  .frow{ flex-direction:column; gap:22px; }
  .fsubmit{ min-height:56px; font-size:17px; }
  .policy__table{ display:block; overflow-x:auto; }
}
.fw{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* 예약 버튼 2개 나란히 */
.bookrow{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; align-items:center; }
.bookrow > .bookbtn{ flex:0 0 auto; }
.footer__links{ margin-top:14px; }
.footer__links a{ font-size:14px; letter-spacing:-.3px; text-decoration:underline; text-underline-offset:3px; opacity:.85; }
.footer__links a:hover{ opacity:1; }
@media (max-width:760px){
  .bookrow{ flex-direction:column; align-items:stretch; width:100%; }
  .bookrow .bookbtn{ justify-content:center; padding:16px 24px; font-size:20px; }
}

/* 아주 좁은 휴대폰에서만 7칸을 4+3 으로 접는다 (그 위로는 늘 한 줄) */
@media (max-width:500px){
  .hours{ grid-template-columns:repeat(4,minmax(0,92px)); gap:8px; padding:6px 12px 0; }
}

/* ===================== 비급여 진료비용 표 ===================== */
.pricetable thead th{
  background:rgba(34,80,101,.9); color:#fff; font-weight:600; font-size:14px; letter-spacing:.2px;
}
.pricetable td{ vertical-align:top; }
.pricetable td b{ color:var(--navy); font-size:17px; font-weight:700; }
.pricetable__sub{ font-size:13px; color:var(--ink-soft); }
/* .policy__table td 가 (0,1,1) 이라 클래스 하나로는 정렬이 먹지 않는다 */
.policy__table td.pricetable__won,
.policy__table th.pricetable__won{
  width:1%; white-space:nowrap; text-align:left;   /* 값에 맞춰 칸을 좁혀 이름 옆에 붙인다 */
  font-variant-numeric:tabular-nums; font-weight:600; color:var(--navy);
}
.policy__table th.pricetable__won{ color:#fff; font-weight:600; }
.footer__links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.pricetable__sale{ color:#2C7A5E; }
.priceintro{
  margin:-4px 0 14px; font-size:15px; line-height:1.9;
  color:var(--ink-read); letter-spacing:-.3px; word-break:keep-all;
}
.priceintro b{ color:var(--navy); }
.pricetable__tag{
  display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px;
  background:rgba(44,122,94,.12); color:#2C7A5E;
  font-size:12px; font-weight:700; letter-spacing:-.2px; white-space:nowrap;
  vertical-align:2px;
}
.pricenote{
  margin:-6px 0 8px; padding:12px 18px; border-radius:16px;
  background:rgba(233,246,248,.72); box-shadow:inset 0 0 0 1.5px rgba(34,80,101,.12);
  font-size:15px; line-height:1.8; color:var(--ink-read); letter-spacing:-.3px; word-break:keep-all;
}
.pricenote b{ color:var(--navy); }
.pricenote s{ color:var(--ink-soft); }
.pricenote__tag{
  display:inline-block; margin-right:8px; padding:3px 11px; border-radius:999px;
  background:var(--navy); color:#fff; font-size:12px; font-weight:600; letter-spacing:.2px;
  vertical-align:1px;
}
@media (max-width:620px){
  /* 좁은 화면에서는 표를 항목별 카드처럼 쌓는다 (가로 스크롤보다 읽기 쉽다) */
  .pricetable thead{ display:none; }
  .pricetable, .pricetable tbody, .pricetable tr, .pricetable td{ display:block; width:100%; }
  .pricetable{ box-shadow:none; }
  .pricetable tr{
    border-radius:20px; background:rgba(255,255,255,.5);
    box-shadow:inset 0 0 0 1.5px rgba(34,80,101,.16);
    padding:14px 16px; margin-bottom:12px;
  }
  .pricetable td{ border-bottom:0; padding:4px 0; }
  .policy__table td.pricetable__won{ width:auto; text-align:left; font-size:18px; padding-top:10px; }
  /* 표 머리글이 사라지므로 각 칸 앞에 이름을 붙여준다 */
  .pricetable__won[data-label]::before{
    content:attr(data-label) " "; font-size:13px; font-weight:400; color:var(--ink-soft);
  }
}

/* ===================== 하위 페이지에서 길 잃지 않게 ===================== */
.backhome{
  align-self:flex-start; margin-bottom:-8px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px 10px 16px; border-radius:999px;
  background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1.5px #fff, var(--sh-card);
  font-size:15px; font-weight:600; letter-spacing:-.3px; color:var(--navy);
  transition:transform .18s ease, background .18s ease;
}
.backhome:hover{ transform:translateX(-2px); background:#fff; }
.backhome span{ font-size:17px; line-height:1; }
.othergrid--exit{
  margin-top:56px; padding-top:44px;
  border-top:1px solid rgba(34,80,101,.14);
}
@media (max-width:760px){
  .backhome{ align-self:center; margin-bottom:0; font-size:14px; padding:9px 18px 9px 14px; }
  .othergrid--exit{ margin-top:40px; padding-top:32px; }
}