/* 주안퍼스트병원 — 공용 스타일 (메디람 스타일 기반, 라이트 전용) */
:root{
  --ground:#ffffff;
  --paper:#ffffff;
  --soft:#F5F7FA;
  --ink:#4B4948;
  --ink-soft:#6E6C6A;
  --pine:#1A66AD;
  --pine-deep:#14508A;
  --pine-tint:#E9F1F9;
  --pine2:#5C7D1E;
  --pine2-tint:#F1F7E3;
  --lime:#8BBB31;
  --line:#E2E7EC;
  --shadow:0 14px 40px rgba(27,102,173,.12);
  --gothic:"Noto Sans KR","Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --myeongjo:"Noto Serif KR","Nanum Myeongjo","Apple Myungjo",Batang,"바탕",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--gothic); line-height:1.7; font-size:16px;
  padding-bottom:76px; /* 모바일 하단 CTA 바 */
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--pine); outline-offset:2px; border-radius:4px}
img,svg{max-width:100%}

.wrap{max-width:1060px; margin-inline:auto; padding-inline:20px}
.section{padding-block:56px}
.section.tight{padding-top:12px}
/* 섹션 배경 교차 — 스크롤 리듬 */
.section.alt{background:var(--soft)}
.section.tight.alt{padding-top:56px} /* 배경이 깔리면 위 여백을 되살린다 */
.section.alt .card,
.section.alt .step,
.section.alt .pillar,
.section.alt .info-box,
.section.alt .faq details{background:var(--paper)}
.section.alt .card .ico{background:var(--pine-tint)}
.eyebrow{color:var(--pine); font-size:.85rem; letter-spacing:.22em; font-weight:700}
.hero .eyebrow{color:var(--pine2)}
h1,h2,h3{line-height:1.35; text-wrap:balance; margin:0}
h2{font-family:var(--myeongjo); font-size:clamp(1.45rem,3.4vw,2rem); font-weight:700; letter-spacing:-.01em}
.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:34px; align-items:center; text-align:center}
.section-sub{color:var(--ink-soft); max-width:36em; margin:0}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-in{display:flex; align-items:center; gap:20px; height:62px}
/* 병원 CI — 가로형 로고 이미지 사용 */
.logo{display:flex; align-items:center}
.logo img{display:block; height:34px; width:auto}
@media(max-width:420px){ .logo img{height:28px} }
nav.gnb{display:none; gap:22px; margin-left:auto; font-size:.93rem; color:var(--ink-soft); font-weight:600; flex-wrap:wrap}
nav.gnb a:hover{color:var(--pine)}
.head-call{margin-left:auto; display:flex; align-items:center; gap:8px; font-weight:800; color:var(--pine); font-variant-numeric:tabular-nums}
@media(min-width:960px){ nav.gnb{display:flex} .head-call{margin-left:0} }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; border-radius:999px; font-weight:700; font-size:.98rem;
  border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--pine); color:#fff; box-shadow:var(--shadow)}
.btn-line{border-color:var(--line); background:var(--paper); color:var(--ink)}
.btn-han{background:var(--pine2-tint); color:var(--pine2); border-color:transparent}

/* ---------- 메인 히어로 ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-in{padding-block:64px 56px; position:relative; z-index:1}
.hero-grid{display:grid; gap:28px; align-items:center}
@media(min-width:880px){ .hero-grid{grid-template-columns:1.15fr .85fr} }
.hero-tx{display:flex; flex-direction:column; gap:18px}
.hero h1{font-family:var(--myeongjo); font-size:clamp(1.8rem,5.2vw,2.9rem); font-weight:700; letter-spacing:-.01em}
.hero h1 .yang{color:var(--pine)}
.hero p.lede{color:var(--ink-soft); max-width:32em; margin:0; font-size:1.05rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.hero-photo{margin:0; border-radius:28px; overflow:hidden; border:1px solid rgba(255,255,255,.55); box-shadow:0 18px 44px rgba(35,49,10,.30); position:relative}
.hero-photo img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
/* 사진 위 정보 칩 — 큰 색면이 비어 보이지 않게 */
.hero-photo .chip{
  position:absolute; left:14px; bottom:14px; right:14px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-radius:16px; padding:12px 16px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.hero-photo .chip b{color:var(--pine); font-size:.95rem; font-weight:800; letter-spacing:-.01em}
.hero-photo .chip span{font-size:.84rem; color:var(--ink-soft)}
.hero-orbs{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:0; filter:none; opacity:1; left:0; right:0; bottom:0; top:auto; width:100%; height:33%}

/* 히어로 색면 — 브랜드 2색의 아주 느린 추상 모션.
   시설·인물을 묘사하지 않으므로 오인 소지가 없고, 영상 파일이 아니라
   CSS 그라데이션이라 페이지 무게가 늘지 않는다. */
.orb.o1{
  background:linear-gradient(135deg,#8BBB31 0%,#A0CC4E 34%,#7CAB27 66%,#8BBB31 100%);
  background-size:240% 240%;
  clip-path:polygon(0 20%,100% 0,100% 100%,0 100%);
  animation:orb-drift 28s ease-in-out infinite;
}
.orb.o2{
  background:linear-gradient(135deg,#14508A 0%,#2E7CC4 50%,#1A66AD 100%);
  background-size:220% 220%;
  clip-path:polygon(0 20%,100% 0,100% 5%,0 25%);
  animation:orb-drift 23s ease-in-out infinite reverse;
}
@keyframes orb-drift{
  0%   {background-position:0% 50%}
  50%  {background-position:100% 50%}
  100% {background-position:0% 50%}
}
/* 색면 위를 천천히 지나가는 옅은 빛 */
.hero-orbs::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(45% 55% at 70% 35%, rgba(255,255,255,.30), rgba(255,255,255,0) 70%);
  animation:orb-sheen 19s ease-in-out infinite alternate;
}
@keyframes orb-sheen{
  from{transform:translate3d(-6%,-3%,0) scale(1)}
  to  {transform:translate3d(6%,4%,0) scale(1.12)}
}
@media (prefers-reduced-motion: reduce){
  .orb,.hero-orbs::after{animation:none}
}
@media(min-width:880px){
  .orb{left:56%; right:-4%; top:-10%; bottom:auto; width:auto; height:134%}
  .orb.o1{clip-path:polygon(40% 0,100% 0,100% 100%,16% 100%)}
  .orb.o2{clip-path:polygon(40% 0,44.5% 0,20.5% 100%,16% 100%)}
}

/* ---------- 서브페이지 히어로 ---------- */
.pghero{background:var(--soft); padding:52px 0 46px; text-align:center}
.pghero .crumb{font-size:.85rem; color:var(--ink-soft); margin-bottom:10px}
.pghero .crumb a:hover{color:var(--pine)}
.pghero h1{font-family:var(--myeongjo); font-size:clamp(1.6rem,4.4vw,2.3rem); font-weight:700}
.pghero .lede{color:var(--ink-soft); max-width:38em; margin:14px auto 0}
.subnav{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px}
.subnav a{padding:9px 16px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-size:.88rem; font-weight:700; color:var(--ink-soft)}
.subnav a:hover{color:var(--pine); border-color:var(--pine)}
.subnav a.on{background:var(--pine); border-color:var(--pine); color:#fff}

/* ---------- 신뢰 스트립 ---------- */
.trust{border-bottom:1px solid var(--line); background:var(--paper)}
.trust-in{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
.trust-item{background:var(--paper); padding:16px 14px; display:flex; flex-direction:column; gap:2px}
.trust-item b{font-size:.95rem; letter-spacing:-.01em}
.trust-item span{font-size:.8rem; color:var(--ink-soft)}
@media(min-width:880px){ .trust-in{grid-template-columns:repeat(4,1fr)} }
/* ---------- 미세 인터랙션 ---------- */
nav.gnb a{position:relative}
nav.gnb a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--pine); transition:right .2s ease;
}
nav.gnb a:hover::after{right:0}
.card .more,.pillar .more{transition:letter-spacing .18s ease}
.card:hover .more,.pillar:hover .more{letter-spacing:.04em}
@media (prefers-reduced-motion: reduce){
  nav.gnb a::after,.card .more,.pillar .more{transition:none}
}

/* ---------- 인쇄 (비급여표 출력용) ---------- */
@media print{
  header.site,.ctabar,footer .fnav,.subnav,.band,.hero-orbs,.hero-cta,.map-link{display:none !important}
  body{padding-bottom:0; background:#fff; color:#000}
  .pghero{background:#fff; padding:10px 0}
  .tblwrap{overflow:visible}
  .tbl th{background:#f0f0f0}
  .rv{opacity:1 !important; transform:none !important}
  a{text-decoration:none; color:inherit}
}

.feecat{
  font-size:1.02rem; font-weight:800; color:var(--pine);
  margin:34px 0 12px; padding-left:12px; border-left:4px solid var(--pine);
}
.feecat:first-of-type{margin-top:0}

/* ---------- 두 축 pillars ---------- */
.pillars{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:820px){ .pillars{grid-template-columns:1fr 1fr} }
.pillar{
  background:var(--soft); border:0; border-radius:26px;
  padding:34px 30px; display:flex; flex-direction:column; gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.pillar .tag{font-size:.8rem; font-weight:800; letter-spacing:.14em}
.pillar.p1 .tag{color:var(--pine)}
.pillar.p2 .tag{color:var(--pine2)}
.pillar h3{font-family:var(--myeongjo); font-size:clamp(1.2rem,2.6vw,1.45rem); font-weight:700; letter-spacing:-.01em}
.pillar p{margin:0; color:var(--ink-soft); font-size:.95rem}
.pillar .more{margin-top:auto; font-weight:700; font-size:.9rem}
.pillar.p1 .more{color:var(--pine)}
.pillar.p2 .more{color:var(--pine2)}

/* ---------- 협진 dual ---------- */
.dual{display:grid; gap:14px; grid-template-columns:1fr; position:relative}
@media(min-width:820px){ .dual{grid-template-columns:1fr auto 1fr; align-items:stretch} }
.dual-col{background:var(--soft); border:0; border-radius:24px; padding:26px 24px; display:flex; flex-direction:column; gap:14px}
.dual-col h3{font-size:1.1rem; font-weight:800; display:flex; align-items:center; gap:8px}
.dual-col.yang h3{color:var(--pine)}
.dual-col.han h3{color:var(--pine2)}
.dual-col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; color:var(--ink-soft)}
.dual-col li{display:flex; gap:10px; align-items:baseline}
.dual-col li::before{content:""; width:6px; height:6px; border-radius:50%; flex:none; transform:translateY(-2px)}
.dual-col.yang li::before{background:var(--pine)}
.dual-col.han li::before{background:var(--pine2)}
.dual-join{
  align-self:center; justify-self:center; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 18px; border-radius:999px; background:var(--paper); border:1px solid var(--line);
  font-weight:800; font-size:.9rem; white-space:nowrap; box-shadow:var(--shadow);
}
.dual-join .mark{width:30px; height:auto; display:block}
.dual-photo{margin:-26px -24px 4px; height:150px; overflow:hidden; border-radius:24px 24px 0 0}
.dual-photo img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- 치료 cards ---------- */
.cards{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.cards{grid-template-columns:repeat(4,1fr)}}
.cards.three{grid-template-columns:1fr}
@media(min-width:640px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--soft); border:0; border-radius:24px; padding:24px;
  display:flex; flex-direction:column; gap:10px; position:relative; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card .ico{width:42px; height:42px; border-radius:50%; background:var(--paper); color:var(--pine); display:grid; place-items:center}
.card h3{font-size:1.06rem; font-weight:800; letter-spacing:-.01em}
.card p{margin:0; color:var(--ink-soft); font-size:.92rem}
.card .more{margin-top:auto; font-size:.85rem; font-weight:700; color:var(--pine)}
.badge{
  position:absolute; top:16px; right:16px;
  background:var(--pine2-tint); color:var(--pine2);
  font-size:.72rem; font-weight:800; padding:4px 9px; border-radius:999px; letter-spacing:.02em;
}
.badge.green{background:var(--pine-tint); color:var(--pine)}

/* ---------- 강조 밴드 / CTA 밴드 ---------- */
.band{
  background:linear-gradient(120deg, var(--pine-deep), var(--pine));
  color:#f2faf7; border-radius:26px; padding:34px 28px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);
}
.band .eyebrow{color:inherit; opacity:.85}
.band h2{font-size:clamp(1.3rem,3vw,1.7rem); color:inherit}
.band .price{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; font-variant-numeric:tabular-nums}
.band .old{opacity:.65; text-decoration:line-through; font-size:1.05rem}
.band .new{font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; letter-spacing:-.02em}
.band small{opacity:.8; font-size:.82rem; max-width:40em}
.band.center{align-items:center; text-align:center}
.band .btn-primary{background:#fff; color:var(--pine-deep); box-shadow:none}

/* ---------- 병동 ---------- */
.wards{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:820px){.wards{grid-template-columns:1.15fr 1fr}}
.ward{background:var(--soft); border:0; border-radius:26px; padding:26px 24px; display:flex; flex-direction:column; gap:10px}
.ward.featured{background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow)}
.ward .floor{font-size:.8rem; font-weight:800; color:var(--pine); letter-spacing:.08em}
.ward h3{font-size:1.15rem; font-weight:800}
.ward p{margin:0; color:var(--ink-soft); font-size:.93rem}
.ward ul{margin:6px 0 0; padding-left:0; list-style:none; color:var(--ink-soft); font-size:.9rem; display:flex; flex-direction:column; gap:6px}
.ward li{display:flex; gap:8px}
.ward li::before{content:"—"; color:var(--pine); flex:none}
.ward-photo{margin:-26px -24px 6px; height:190px; overflow:hidden; border-radius:26px 26px 0 0}
/* 병실 사진은 원본 왼쪽의 켜진 TV를 잘라낸 버전(_img_orig에 원본 보관) */
.ward-photo img{width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block}

/* ---------- 절차 steps ---------- */
.steps{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} .steps.four{grid-template-columns:repeat(4,1fr)} }
.step{background:var(--soft); border:0; border-radius:22px; padding:26px 24px; display:flex; flex-direction:column; gap:10px}
.step .no{
  width:32px; height:32px; border-radius:50%; background:var(--pine); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.95rem; font-variant-numeric:tabular-nums;
}
.step h3{font-size:1.02rem; font-weight:800}
.step p{margin:0; color:var(--ink-soft); font-size:.9rem}
.steps-foot{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  border:0; background:var(--pine-tint); border-radius:22px; padding:22px 26px;
}
.steps-foot p{margin:0; color:var(--ink-soft); font-size:.92rem}
.steps-foot p b{color:var(--pine)}

/* ---------- 본문 요소 ---------- */
.prose{max-width:46em; margin-inline:auto; display:flex; flex-direction:column; gap:16px}
.prose p{margin:0}
.prose .sign{font-family:var(--myeongjo); font-size:1.1rem; text-align:right; margin-top:10px}
.two{display:grid; gap:24px; grid-template-columns:1fr; align-items:center}
@media(min-width:820px){ .two{grid-template-columns:1fr 1fr} }
.photo{margin:0; border-radius:24px; overflow:hidden}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.pill{display:inline-block; padding:9px 16px; border-radius:999px; background:var(--pine-tint); color:var(--pine); font-weight:700; font-size:.9rem}
.notice{font-size:.82rem; color:var(--ink-soft)}
.checks{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; color:var(--ink-soft)}
.checks li{display:flex; gap:10px}
.checks li::before{content:"✓"; color:var(--pine); font-weight:800; flex:none}

/* ---------- 표 ---------- */
.tblwrap{overflow-x:auto; border-radius:18px; border:1px solid var(--line)}
table.tbl{width:100%; border-collapse:collapse; min-width:560px; font-size:.95rem}
.tbl th{background:var(--soft); text-align:left; font-weight:800; padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.tbl tr:last-child td{border-bottom:none}
/* 금액·층수 칸 — 헤더(왼쪽 정렬) 바로 아래에 오도록 왼쪽 정렬을 맞춘다.
   자릿수가 달라도 세로로 가지런하도록 tabular-nums 유지. */
.tbl td.num{text-align:left; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); white-space:nowrap}

/* 비급여 진료비 — 분류별로 표가 나뉘어 있어 그냥 두면 표마다 열 너비가
   따로 계산돼 세로선이 어긋난다. 너비를 고정해 8개 표를 같은 선에 맞춘다. */
#fees table.tbl{table-layout:fixed}
#fees table.tbl th:nth-child(1), #fees table.tbl td:nth-child(1){width:46%}
#fees table.tbl th:nth-child(2), #fees table.tbl td:nth-child(2){width:20%}
#fees table.tbl th:nth-child(3), #fees table.tbl td:nth-child(3){width:34%}
#fees table.tbl td:nth-child(1),
#fees table.tbl td:nth-child(3){overflow-wrap:anywhere}

/* ---------- 의료진 ---------- */
.docs{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){ .docs{grid-template-columns:repeat(3,1fr)} }
.doc{background:var(--soft); border-radius:24px; padding:28px 24px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center}
.doc .avatar{width:88px; height:88px; border-radius:50%; background:var(--pine-tint); color:var(--pine); display:grid; place-items:center; font-weight:800; font-size:1.2rem; margin-bottom:6px}
.doc h3{font-size:1.1rem; font-weight:800}
.doc .role{color:var(--pine); font-weight:700; font-size:.88rem}
.doc p{margin:0; color:var(--ink-soft); font-size:.88rem}

/* ---------- FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:10px; max-width:46em; margin-inline:auto}
.faq details{background:var(--soft); border-radius:18px; padding:4px 22px}
.faq summary{cursor:pointer; font-weight:800; padding:16px 0; list-style:none}
.faq summary::before{content:"Q. "; color:var(--pine)}
.faq details p{margin:0 0 18px; color:var(--ink-soft); font-size:.93rem}

/* ---------- 갤러리 ---------- */
.gallery{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){ .gallery{grid-template-columns:repeat(3,1fr)} }
.gallery figure{margin:0; display:flex; flex-direction:column; gap:8px}
.gallery .ph{height:200px; border-radius:22px; overflow:hidden}
.gallery img{width:100%; height:100%; object-fit:cover; display:block}
.gallery figcaption{font-size:.85rem; color:var(--ink-soft); font-weight:600}

/* ---------- info ---------- */
.info{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:820px){.info{grid-template-columns:1fr 1.2fr}}
.info-box{background:var(--soft); border:0; border-radius:24px; padding:26px 24px}
.hours{display:flex; flex-direction:column; margin-top:14px}
.hours .row{display:flex; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--line); font-size:.95rem}
.hours .row:last-child{border-bottom:none}
.hours .d{color:var(--ink-soft)}
.hours .t{font-weight:700; font-variant-numeric:tabular-nums}
.hours .off .t{color:var(--pine2)}
.map-link{
  margin-top:14px; height:200px; border-radius:12px; border:1px solid var(--line);
  background:var(--pine-tint); color:var(--pine);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:1.02rem; transition:transform .15s ease, box-shadow .15s ease;
}
.map-link span{font-size:.85rem; color:var(--ink-soft); font-weight:500}
.map-link:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.map-ph{
  margin-top:14px; height:200px; border-radius:18px; border:1px dashed var(--line);
  background:repeating-linear-gradient(45deg, var(--soft), var(--soft) 12px, var(--pine-tint) 12px, var(--pine-tint) 13px);
  display:grid; place-items:center; color:var(--ink-soft); font-size:.85rem;
}
.addr{margin-top:12px; font-size:.95rem; line-height:1.8}
.addr b{font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); padding:38px 0 46px; color:var(--ink-soft); font-size:.85rem}
footer .fnav{display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:20px; font-weight:600}
footer .fnav a:hover{color:var(--pine)}
footer .nap{line-height:1.9}
footer .nap b{color:var(--ink)}

/* ---------- mobile cta bar ---------- */
.ctabar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--paper); border-top:1px solid var(--line);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  gap:6px;
}
.ctabar a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.72rem; font-weight:700; color:var(--ink-soft); padding:6px 0; border-radius:12px;
}
.ctabar a svg{color:var(--pine)}
.ctabar a.call{background:var(--pine); color:#fff}
.ctabar a.call svg{color:#fff}
.ctabar a.kakao{background:#FEE500; color:#3A1D1D}
.ctabar a.kakao svg{color:#3A1D1D}
@media(min-width:960px){ .ctabar{display:none} body{padding-bottom:0} }

/* ---------- reveal ----------
   JS(main.js)가 <html>에 .rv-ready 를 붙였을 때만 숨긴다.
   스크립트가 실패하거나 늦게 로드돼도 콘텐츠는 항상 보인다. */
.rv-ready .rv{opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease}
.rv-ready .rv.on{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .rv-ready .rv{opacity:1; transform:none; transition:none}
  .btn,.card,.pillar{transition:none}
}

/* ---------- 푸터 소셜(네이버 블로그) ---------- */
.fsocial{text-align:center; margin-bottom:16px}
.fsocial a{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:var(--ink-soft)}
.fsocial a:hover{color:var(--pine)}
.fsocial .nblog{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; background:#03C75A; color:#fff; font-weight:900; font-size:.82rem}

/* ---------- 네이버 지도 임베드 ---------- */
.nmap{display:none}
.nmap.on{display:block; margin-top:14px; height:320px; border-radius:16px; overflow:hidden; border:1px solid var(--line)}
.nmap.on + .map-link{margin-top:10px; height:auto; padding:12px; flex-direction:row; gap:10px; justify-content:center}
.nmap.on + .map-link span{display:none}
.nmap.on + .map-link svg{width:20px; height:20px}