/* ═══════════════════════════════════════════════════════════════
   Weddia 순천점 (SP) — 공통 디자인 시스템
   style.css  |  전 페이지 공유
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. CSS 변수 ── */
:root {
  --k:  #0D1F3C;
  --a:  #3A86D4;
  --ah: #2268B0;
  --al: #7FB8E8;
  --bg: #F4F8FD;
  --s1: #DFF0FB;
  --s2: #C4E2F7;
  --tx: #162840;
  --mt: #4D7A9E;
  --ln: rgba(13,31,60,.1);

  --font-display:  'Manrope', sans-serif;
  --font-heading:  'Noto Serif KR', serif;
  --font-body:     'Noto Sans KR', sans-serif;

  --site-max:    1280px;
  --content-max: 760px;
  --px:          clamp(1.25rem, 5vw, 3rem);

  --shadow-sm: 0 1px 3px rgba(13,31,60,.07), 0 1px 2px -1px rgba(13,31,60,.07);
  --shadow:    0 4px 8px -1px rgba(13,31,60,.11), 0 2px 4px -2px rgba(13,31,60,.08);
  --shadow-lg: 0 12px 24px -4px rgba(13,31,60,.14), 0 4px 8px -4px rgba(13,31,60,.08);
}

/* ── 1. 리셋 & 베이스 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--a); border-radius: 3px; }
::selection { background: var(--k); color: #fff; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--tx);
  background: var(--bg);
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* ── 2. 진행바 ── */
#sp {
  position: fixed; top: 0; left: 0;
  height: 2px; background: var(--a); z-index: 999;
  transform-origin: left; transform: scaleX(0); width: 100%;
}

/* ── 3. 키워드 eyebrow (.kicker) ── */
.kicker {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--a);
  display: block;
  margin-bottom: .45rem;
}

/* ── 4. 애니메이션 키프레임 ── */
/* 히어로 등장 */
@keyframes hero-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Ken Burns — 줌 + 드리프트 (시네마틱) */
@keyframes kb-zoom {
  0%   { transform: scale(1.04) translate( .5%,  .2%); }
  25%  { transform: scale(1.10) translate(-.4%, -.4%); }
  50%  { transform: scale(1.13) translate(-.7%,  .3%); }
  75%  { transform: scale(1.08) translate( .3%,  .6%); }
  100% { transform: scale(1.04) translate( .5%,  .2%); }
}
/* 오버레이 미묘한 호흡 */
@keyframes overlay-breathe {
  0%,100% { opacity: 1; }
  50%     { opacity: .93; }
}
/* 필름 그레인 지터 */
@keyframes grain {
  0%,100% { background-position:   0     0   }
  10%     { background-position:  -5%  -10%  }
  20%     { background-position: -15%    5%  }
  30%     { background-position:   7%  -25%  }
  40%     { background-position:  -5%   25%  }
  50%     { background-position: -15%   10%  }
  60%     { background-position:  15%    0   }
  70%     { background-position:   0    15%  }
  80%     { background-position:   3%   35%  }
  90%     { background-position: -10%   10%  }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(58,134,212,.5); }
  65%  { box-shadow: 0 0 0 10px rgba(58,134,212,0); }
  100% { box-shadow: 0 0 0 0 rgba(58,134,212,0); }
}

/* ── 5. 스크롤 리빌 (.rv → .in) ── */
.rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s cubic-bezier(.25,1,.5,1), transform .85s cubic-bezier(.25,1,.5,1);
}
.rv.in {
  opacity: 1;
  transform: translateY(0);
}
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }
.rv.d4 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ── 6. 이미지 호버 줌 ── */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform 1.4s cubic-bezier(.25,1,.5,1);
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.img-zoom:hover img { transform: scale(1.06); }
@media (hover: none) { .img-zoom:hover img { transform: none; } }

/* ══════════════════════════════════════════════
   NAV
══════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem var(--px);
  background: transparent;
  transition: background .4s, padding .35s;
}
.nav--solid {
  background: rgba(244,248,253,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ln);
}

/* 로고 */
.nav__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.nav__logo-img { height: 27px; width: auto; opacity: .9; filter: brightness(0) invert(1); }
.nav--solid .nav__logo-img { filter: none; opacity: .85; }
.nav__brand { display: flex; flex-direction: column; line-height: 1; }
.nav__brand-en {
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: .2em;
  color: #fff; text-transform: uppercase;
}
.nav--solid .nav__brand-en { color: var(--k); }
.nav__brand-sub {
  font-size: .58rem; letter-spacing: .22em;
  color: rgba(255,255,255,.5); margin-top: .2rem; text-transform: uppercase;
}
.nav--solid .nav__brand-sub { color: var(--mt); }

/* 데스크탑 링크 */
.nav__links { display: none; }
@media (min-width: 1024px) {
  .nav__links { display: flex; gap: 2rem; align-items: center; }
}
.nav__links a {
  font-size: .68rem; letter-spacing: .12em;
  color: rgba(255,255,255,.7); text-transform: uppercase; transition: color .25s;
  font-weight: 300;
}
.nav__links a:hover { color: var(--al); }
.nav--solid .nav__links a { color: var(--mt); }
.nav--solid .nav__links a:hover { color: var(--a); }

/* 오른쪽 액션 영역 */
.nav__actions { display: flex; align-items: center; gap: .6rem; }

/* CTA 버튼 */
.nav__cta {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.3); color: #fff;
  padding: .4rem 1.1rem; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s;
}
.nav__cta:hover { background: rgba(255,255,255,.1); }
.nav--solid .nav__cta { border-color: var(--a); color: var(--a); }
.nav--solid .nav__cta:hover { background: var(--a); color: #fff; }

/* 햄버거 버튼 */
.nav__burger {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 36px; height: 36px; padding: 6px;
  cursor: pointer; background: none; border: none; flex-shrink: 0;
}
@media (min-width: 1024px) { .nav__burger { display: none; } }
.nav__burger-line {
  display: block; width: 18px; height: 1.5px;
  background: #fff; border-radius: 1px;
  transition: transform .3s, opacity .3s;
}
.nav--solid .nav__burger-line { background: var(--k); }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 모바일 메뉴 오버레이 */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 49;
  background: var(--k); flex-direction: column;
  justify-content: center; align-items: center;
  gap: 1.8rem; padding: 5rem 2rem 3rem;
}
.mobile-menu--open { display: flex; }
.mobile-menu__link {
  font-family: var(--font-heading); font-size: 1.4rem;
  color: rgba(255,255,255,.75); letter-spacing: .06em;
  text-align: center; transition: color .2s;
}
.mobile-menu__link:hover { color: #fff; }
.mobile-menu__cta {
  margin-top: .5rem; background: var(--a); color: #fff;
  padding: .85rem 2.5rem; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  font-family: var(--font-display);
}

/* ══════════════════════════════════════════════
   HERO — 풀블리드 / Ken Burns
══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  animation: hero-reveal 1.8s cubic-bezier(.25,1,.5,1) both;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 25%;
  animation: kb-zoom 28s ease-in-out infinite;
  will-change: transform;
  transform-origin: center center;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(13,31,60,.97) 0%, rgba(13,31,60,.65) 38%, rgba(13,31,60,.18) 72%, rgba(13,31,60,.04) 100%),
    linear-gradient(to right, rgba(13,31,60,.55) 0%, transparent 65%);
  animation: overlay-breathe 6s ease-in-out infinite;
}
/* 필름 그레인 레이어 */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.028;
  mix-blend-mode: overlay;
  animation: grain .5s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__bg img, .hero__overlay, .hero::after { animation: none !important; }
  .hero__bg { opacity: 1; }
}

/* 뱃지 (우측 상단, PC 전용) */
.hero__badge {
  position: absolute; top: 7rem; right: var(--px); z-index: 3;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14);
  padding: 1rem 1.4rem; text-align: right; display: none;
}
@media (min-width: 900px) { .hero__badge { display: block; } }
.hero__badge-lbl {
  font-family: var(--font-display);
  font-size: .56rem; color: var(--al); letter-spacing: .2em;
  text-transform: uppercase; display: block; margin-bottom: .35rem;
}
.hero__badge-val {
  font-family: var(--font-heading); font-size: .9rem;
  color: #fff; font-weight: 300; display: block; line-height: 1.55;
}

/* 메인 콘텐츠 */
.hero__content {
  position: relative; z-index: 2;
  padding: 0 var(--px) clamp(2.5rem, 6vh, 5rem);
  width: 100%;
}
@media (min-width: 900px) {
  .hero__content { max-width: var(--site-max); margin: 0 auto; }
}

.hero__kicker { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.hero__kicker::before {
  content: ''; width: 2rem; height: 1px;
  background: var(--a); display: block; flex-shrink: 0;
}
.hero__en {
  font-family: var(--font-display);
  color: var(--al); letter-spacing: .26em; font-size: .78rem;
  font-weight: 600;
}
.hero__h1 {
  font-family: var(--font-heading); font-weight: 300; color: #fff;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1.1rem;
}
.hero__h1 em { color: var(--al); font-style: normal; }
.hero__sub {
  color: rgba(255,255,255,.5); font-size: .88rem;
  line-height: 1.9; font-weight: 300; max-width: 380px; margin-bottom: 2.4rem;
}

.hero__bottom { display: flex; flex-direction: column; gap: 1.8rem; }
@media (min-width: 680px) {
  .hero__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.hero__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.hero__btn-a {
  display: inline-flex; align-items: center;
  background: var(--a); color: #fff;
  padding: .82rem 1.7rem; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  transition: background .25s;
}
.hero__btn-a:hover { background: var(--ah); }
.hero__btn-b {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.75);
  padding: .82rem 1.7rem; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  font-family: var(--font-display); font-weight: 400;
  transition: background .25s;
}
.hero__btn-b:hover { background: rgba(255,255,255,.08); }

.hero__stats { display: flex; gap: 2rem; }
@media (min-width: 680px) {
  .hero__stats { border-left: 1px solid rgba(255,255,255,.1); padding-left: 2rem; }
}
.hero__stat { text-align: center; }
.hero__stat-num {
  font-family: var(--font-display); font-size: 1.5rem;
  color: #fff; display: block; line-height: 1; font-weight: 700;
}
.hero__stat-lbl {
  font-size: .56rem; color: rgba(255,255,255,.3);
  letter-spacing: .16em; text-transform: uppercase; display: block; margin-top: .3rem;
  font-family: var(--font-display);
}

/* ══════════════════════════════════════════════
   SUB-HERO (template.php용)
══════════════════════════════════════════════ */
.sub-hero {
  position: relative;
  min-height: 60vh; min-height: 60svh;
  display: flex; align-items: flex-end;
  padding: clamp(5rem, 12vh, 9rem) var(--px) clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}
@media (max-width: 767px) {
  .sub-hero { min-height: 56vh; min-height: 56svh; align-items: flex-end; padding-left: 1.5rem; padding-right: 1.5rem; }
}
.sub-hero__img { position: absolute; inset: 0; }
.sub-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sub-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,31,60,.3) 0%, rgba(13,31,60,.6) 50%, rgba(13,31,60,.85) 100%);
}
.sub-hero__content { position: relative; z-index: 1; max-width: var(--site-max); width: 100%; }
.sub-hero__kicker {
  font-family: var(--font-display); color: var(--al);
  letter-spacing: .28em; font-size: clamp(.75rem, 2vw, 1rem);
  margin-bottom: .6rem; display: block; font-weight: 600;
}
.sub-hero__h1 {
  font-family: var(--font-heading); color: #fff; font-weight: 300;
  font-size: clamp(1.6rem, 5vw, 3rem); line-height: 1.3;
  margin-bottom: .6rem; text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.sub-hero__h1--keyword {
  font-size: clamp(2.4rem, 9vw, 4rem); letter-spacing: -.01em;
}
.sub-hero__label {
  display: block; font-family: var(--font-heading); color: rgba(255,255,255,.82);
  font-weight: 300; font-size: clamp(1rem, 4vw, 1.4rem);
  letter-spacing: .04em; margin-bottom: .9rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.sub-hero__tag {
  display: inline-block; border: 1px solid rgba(127,184,232,.4);
  color: var(--al); font-size: .65rem; letter-spacing: .14em;
  padding: .25rem .7rem; margin-bottom: .8rem;
  font-family: var(--font-display);
}
.sub-hero__sub {
  color: rgba(255,255,255,.65); font-weight: 300;
  font-size: clamp(.8rem, 2vw, .88rem); line-height: 1.8; max-width: 520px;
}

/* ══════════════════════════════════════════════
   MANIFESTO
══════════════════════════════════════════════ */
.manifesto { background: var(--k); padding: clamp(3.5rem, 8vw, 6rem) var(--px); }
.manifesto__inner {
  max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 960px) {
  .manifesto__inner { grid-template-columns: 1fr 1fr; align-items: end; }
}
.manifesto__quote {
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; line-height: 1.35;
}
.manifesto__quote em { color: var(--al); font-style: normal; }
.manifesto__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .8rem; letter-spacing: .22em;
  display: block; margin-bottom: .8rem;
}
.manifesto__body {
  color: rgba(255,255,255,.45); font-size: .88rem;
  line-height: 1.9; font-weight: 300; margin-bottom: 1.5rem;
}
.manifesto__link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--al); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid rgba(127,184,232,.3); padding-bottom: 2px;
  font-family: var(--font-display); font-weight: 600;
  transition: color .25s;
}
.manifesto__link:hover { color: #fff; }

/* ══════════════════════════════════════════════
   FEATURE ROW
══════════════════════════════════════════════ */
.features {
  background: var(--bg); border-bottom: 1px solid rgba(13,31,60,.08);
}
.features__inner {
  max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2,1fr);
}
@media (min-width: 700px) {
  .features__inner { grid-template-columns: repeat(4,1fr); }
}
.feature {
  padding: clamp(1.5rem, 4vw, 2rem) 1.8rem;
  border-right: 1px solid rgba(13,31,60,.08);
  transition: background .2s;
}
.feature:last-child { border-right: none; }
.feature:hover { background: var(--s1); }
.feature__num {
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--a); display: block; line-height: 1;
  font-weight: 700; margin-bottom: .5rem;
}
.feature__h {
  font-family: var(--font-heading); font-size: .88rem;
  color: var(--k); margin-bottom: .3rem; font-weight: 400;
}
.feature__b { font-size: .75rem; color: var(--mt); line-height: 1.6; font-weight: 300; }

/* ══════════════════════════════════════════════
   FEAT-CARD / FEAT-NUM (넘버드 피처카드)
══════════════════════════════════════════════ */
.feat-card {
  background: var(--bg);
  border: 1px solid var(--ln);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  transition: transform .3s, box-shadow .3s, background .2s;
}
.feat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.feat-num {
  font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: rgba(58,134,212,.15); font-weight: 700;
  display: block; line-height: 1; margin-bottom: .6rem;
  transition: color .3s;
}
.feat-card:hover .feat-num { color: rgba(58,134,212,.35); }

/* ══════════════════════════════════════════════
   SYMP-CARD / 진단카드
══════════════════════════════════════════════ */
.symp-card {
  background: var(--bg);
  border-left: 2px solid transparent;
  padding: 1.2rem 1.4rem;
  transition: border-color .3s, box-shadow .3s, background .2s;
}
.symp-card:hover {
  border-color: var(--a);
  box-shadow: var(--shadow-sm);
}
.symp-card .num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700; color: rgba(58,134,212,.2);
  display: block; line-height: 1; margin-bottom: .4rem;
  transition: color .3s;
}
.symp-card:hover .num { color: var(--al); }

/* ══════════════════════════════════════════════
   PROGRAMS — 비대칭 그리드
══════════════════════════════════════════════ */
.programs { padding: clamp(3rem, 7vw, 5rem) var(--px); background: #fff; }
.programs__inner { max-width: var(--site-max); margin: 0 auto; }
.programs__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2.5rem; gap: 1rem;
}
.programs__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .82rem; letter-spacing: .22em; display: block; margin-bottom: .4rem;
}
.programs__h {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--k); font-weight: 300;
}
.programs__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(13,31,60,.08); }
@media (min-width: 768px) { .programs__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .programs__grid { grid-template-columns: 2fr 1fr; } }

.prog-feat { grid-column: 1; grid-row: 1; background: #fff; }
@media (min-width: 768px) { .prog-feat { grid-row: span 2; } }
.prog-feat__img { height: clamp(260px, 35vw, 480px); }
.prog-feat__body { padding: 2rem; }
.prog-feat__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .75rem; letter-spacing: .2em; display: block; margin-bottom: .4rem;
}
.prog-feat__h { font-family: var(--font-heading); font-size: 1.3rem; color: var(--k); margin-bottom: .6rem; font-weight: 400; }
.prog-feat__b { font-size: .82rem; color: var(--mt); line-height: 1.75; margin-bottom: 1rem; font-weight: 300; }
.prog-feat__link {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a); text-decoration: none;
  border-bottom: 1px solid rgba(58,134,212,.3); padding-bottom: 2px;
  font-family: var(--font-display); font-weight: 600;
}

.prog-item {
  background: #fff; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.4rem 1.6rem; text-decoration: none;
  transition: background .2s;
}
.prog-item:hover { background: var(--s1); }
.prog-item__num {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem);
  color: rgba(13,31,60,.1); font-weight: 700; line-height: 1; flex-shrink: 0;
  width: 2.5rem; text-align: center; transition: color .2s;
}
.prog-item:hover .prog-item__num { color: rgba(58,134,212,.3); }
.prog-item__en {
  font-size: .6rem; color: var(--a); letter-spacing: .14em;
  display: block; margin-bottom: .2rem; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 700;
}
.prog-item__h { font-family: var(--font-heading); font-size: .95rem; color: var(--k); font-weight: 400; display: block; margin-bottom: .2rem; }
.prog-item__b { font-size: .75rem; color: var(--mt); line-height: 1.5; font-weight: 300; }
.prog-item__arr { margin-left: auto; color: var(--a); font-size: .8rem; opacity: 0; transition: opacity .2s, transform .2s; }
.prog-item:hover .prog-item__arr { opacity: 1; transform: translateX(4px); }

.prog-cta { background: var(--k); padding: 2.5rem 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) {
  .prog-cta {
    grid-column: 1 / -1; flex-direction: row;
    align-items: center; justify-content: space-between;
    padding: 2.5rem 3rem; gap: 2rem;
  }
}
.prog-cta__text { flex: 1; }
.prog-cta__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .75rem; letter-spacing: .2em; display: block; margin-bottom: .4rem;
}
.prog-cta__h { font-family: var(--font-heading); color: #fff; font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 300; margin-bottom: .4rem; line-height: 1.4; }
.prog-cta__b { color: rgba(255,255,255,.45); font-size: .78rem; line-height: 1.6; margin-bottom: 1.2rem; font-weight: 300; }
@media (min-width: 768px) { .prog-cta__b { margin-bottom: 0; } }
.prog-cta__action { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; flex-shrink: 0; }
@media (min-width: 768px) { .prog-cta__action { align-items: flex-end; } }
.prog-cta__btn {
  display: inline-flex; background: var(--a); color: #fff;
  padding: .7rem 1.6rem; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  transition: background .25s; white-space: nowrap;
}
.prog-cta__btn:hover { background: var(--ah); }
.prog-cta__tel { color: rgba(255,255,255,.35); font-size: .7rem; letter-spacing: .08em; text-decoration: none; transition: color .2s; }
.prog-cta__tel:hover { color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════
   WHY — 넘버드 그리드
══════════════════════════════════════════════ */
.why { background: var(--bg); padding: clamp(3rem, 7vw, 5rem) var(--px); }
.why__inner { max-width: var(--site-max); margin: 0 auto; }
.why__header { text-align: center; margin-bottom: 3.5rem; }
.why__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .82rem; letter-spacing: .22em; display: block; margin-bottom: .5rem;
}
.why__h { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--k); font-weight: 300; }
.why__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ln); }
@media (min-width: 540px)  { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px)  { .why__grid { grid-template-columns: repeat(4,1fr); } }
.why__item { background: var(--bg); padding: clamp(1.5rem, 3vw, 2rem) 1.6rem; position: relative; transition: background .2s; }
.why__item:hover { background: #fff; }
.why__num { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); color: rgba(58,134,212,.12); font-weight: 700; line-height: 1; display: block; margin-bottom: .8rem; transition: color .3s; }
.why__item:hover .why__num { color: rgba(58,134,212,.25); }
.why__item-h { font-family: var(--font-heading); font-size: .95rem; color: var(--k); font-weight: 400; margin-bottom: .5rem; line-height: 1.4; }
.why__item-b { font-size: .78rem; color: var(--mt); line-height: 1.7; font-weight: 300; }
.why__item-accent { width: 2rem; height: 2px; background: var(--a); margin-bottom: .8rem; }

/* ══════════════════════════════════════════════
   PROC-STEPS — 5단계 프로세스
══════════════════════════════════════════════ */
.process { background: var(--k); padding: clamp(3rem, 7vw, 5rem) var(--px); overflow: hidden; }
.process__inner { max-width: var(--site-max); margin: 0 auto; }
.process__header { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.process__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .82rem; letter-spacing: .22em; display: block; margin-bottom: .4rem;
}
.process__h { font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 1.7rem); color: #fff; font-weight: 300; }

/* 스텝 그리드 */
.proc-steps { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 560px)  { .proc-steps { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } }
@media (min-width: 1024px) { .proc-steps { grid-template-columns: repeat(5,1fr); gap: 0; } }

/* 모바일 세로 연결선 */
@media (max-width: 559px) {
  .proc-step:not(:last-child)::before {
    content: ''; display: block; position: absolute;
    left: 1.75rem; top: 3.5rem; bottom: -2rem; width: 1px;
    background: linear-gradient(to bottom, rgba(58,134,212,.35), rgba(58,134,212,.04)); z-index: 0;
  }
}

/* 개별 스텝 */
.proc-step {
  position: relative; padding: 0;
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.25,1,.5,1), transform .55s cubic-bezier(.25,1,.5,1);
}
@media (min-width: 1024px) { .proc-step { padding: 0 2rem 0 0; } }
@media (prefers-reduced-motion: reduce) { .proc-step { opacity: 1; transform: none; transition: none; } }

/* is-on 트리거 */
.proc-steps.is-on .proc-step                 { opacity: 1; transform: translateY(0); }
.proc-steps.is-on .proc-step:nth-child(1)    { transition-delay: .05s; }
.proc-steps.is-on .proc-step:nth-child(2)    { transition-delay: .18s; }
.proc-steps.is-on .proc-step:nth-child(3)    { transition-delay: .31s; }
.proc-steps.is-on .proc-step:nth-child(4)    { transition-delay: .44s; }
.proc-steps.is-on .proc-step:nth-child(5)    { transition-delay: .57s; }

/* 연결선 — desktop 좌→우 드로우 */
@media (min-width: 1024px) {
  .proc-step::after {
    content: ''; position: absolute;
    top: 1.75rem; left: 3.6rem; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--a) 0%, rgba(58,134,212,.15) 100%);
    transform-origin: left; transform: scaleX(0);
    transition: transform .7s cubic-bezier(.25,1,.5,1);
  }
  .proc-step:last-child::after { display: none; }
  .proc-steps.is-on .proc-step:nth-child(1)::after { transform: scaleX(1); transition-delay: .30s; }
  .proc-steps.is-on .proc-step:nth-child(2)::after { transform: scaleX(1); transition-delay: .43s; }
  .proc-steps.is-on .proc-step:nth-child(3)::after { transform: scaleX(1); transition-delay: .56s; }
  .proc-steps.is-on .proc-step:nth-child(4)::after { transform: scaleX(1); transition-delay: .69s; }
}

/* 원형 넘버 */
.proc-circle {
  width: 3.5rem; height: 3.5rem;
  border: 1px solid rgba(58,134,212,.18); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; position: relative; z-index: 1; background: transparent;
  transition: border-color .5s, background .5s, box-shadow .5s;
}
.proc-steps.is-on .proc-step:nth-child(1) .proc-circle { transition-delay: .05s; }
.proc-steps.is-on .proc-step:nth-child(2) .proc-circle { transition-delay: .18s; }
.proc-steps.is-on .proc-step:nth-child(3) .proc-circle { transition-delay: .31s; }
.proc-steps.is-on .proc-step:nth-child(4) .proc-circle { transition-delay: .44s; }
.proc-steps.is-on .proc-step:nth-child(5) .proc-circle { transition-delay: .57s; }
.proc-steps.is-on .proc-circle {
  border-color: var(--a);
  background: rgba(58,134,212,.09);
  box-shadow: 0 0 0 5px rgba(58,134,212,.06);
}
.proc-num {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: rgba(58,134,212,.28); transition: color .45s;
}
.proc-steps.is-on .proc-num { color: var(--al); }
.proc-h { font-family: var(--font-heading); font-size: clamp(.9rem, 2vw, 1.02rem); color: #fff; font-weight: 400; margin-bottom: .65rem; line-height: 1.4; }
.proc-b { font-size: clamp(.78rem, 1.8vw, .84rem); color: rgba(255,255,255,.65); line-height: 1.82; font-weight: 300; }

/* ══════════════════════════════════════════════
   METHOD-CARD — 비교카드 (pros/cons)
══════════════════════════════════════════════ */
.method-card {
  background: var(--bg);
  border: 1px solid var(--ln);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  transition: transform .3s, box-shadow .3s;
}
.method-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.method-card__h { font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--k); margin-bottom: 1rem; font-weight: 400; }

.pros, .cons { list-style: none; font-size: .83rem; color: var(--mt); line-height: 1.7; }
.pros li, .cons li { padding: .3rem 0; border-bottom: 1px solid var(--ln); display: flex; gap: .5rem; }
.pros li:last-child, .cons li:last-child { border-bottom: none; }
.pros li::before { content: '+'; color: var(--a); font-family: var(--font-display); font-weight: 700; flex-shrink: 0; }
.cons li::before { content: '−'; color: var(--mt); font-family: var(--font-display); font-weight: 700; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   SVC-GALLERY — 3컷 그리드
══════════════════════════════════════════════ */
.svc-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1.5vw, 1rem);
}
@media (max-width: 560px) { .svc-gallery { grid-template-columns: 1fr; } }
.svc-gallery__item {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  transition: transform .3s, box-shadow .3s;
}
.svc-gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.25,1,.5,1); }
.svc-gallery__item:hover img { transform: scale(1.05); }
.svc-gallery__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem;
  background: rgba(13,31,60,.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.25,1,.5,1);
}
.svc-gallery__item:hover .svc-gallery__caption { transform: translateY(0); }
.svc-gallery__caption-h { font-family: var(--font-heading); font-size: .9rem; color: #fff; font-weight: 400; margin-bottom: .25rem; }
.svc-gallery__caption-b { font-size: .72rem; color: rgba(255,255,255,.65); line-height: 1.5; }

/* ══════════════════════════════════════════════
   CARE CATEGORIES
══════════════════════════════════════════════ */
.care-cats { background: #fff; padding: 3.5rem var(--px); border-bottom: 1px solid rgba(13,31,60,.08); }
.care-cats__inner { max-width: var(--site-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.care-cats__label {
  font-size: .65rem; color: var(--mt); letter-spacing: .18em;
  text-transform: uppercase; flex-shrink: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600;
}
.care-cats__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.care-cats__tag {
  display: inline-block; border: 1px solid rgba(13,31,60,.12); color: var(--mt);
  font-size: .75rem; padding: .35rem .8rem; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s; font-weight: 300;
}
.care-cats__tag:hover { background: var(--a); color: #fff; border-color: var(--a); }

/* ══════════════════════════════════════════════
   LOCAL PAGES
══════════════════════════════════════════════ */
.local { padding: clamp(3rem, 6vw, 4rem) var(--px); background: var(--bg); }
.local__inner { max-width: var(--site-max); margin: 0 auto; }
.local__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.8rem; flex-wrap: wrap; gap: .5rem; }
.local__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .78rem; letter-spacing: .2em; display: block; margin-bottom: .3rem;
}
.local__h { font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--k); font-weight: 300; }
.local__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--ln); }
@media (min-width: 600px) { .local__grid { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 900px) { .local__grid { grid-template-columns: repeat(5,1fr); } }
.local__card { background: #fff; padding: .9rem 1rem; text-decoration: none; display: flex; flex-direction: column; gap: .2rem; transition: background .2s; }
.local__card:hover { background: var(--s1); }
.local__card-h { font-family: var(--font-heading); font-size: .82rem; color: var(--k); font-weight: 400; line-height: 1.3; }
.local__card-sub { font-size: .6rem; color: var(--a); letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; }

/* ══════════════════════════════════════════════
   ACCESS
══════════════════════════════════════════════ */
.access { display: grid; grid-template-columns: 1fr; position: relative; }
@media (min-width: 768px) { .access { grid-template-columns: 1fr 1fr; } }
.access::before {
  content: ''; display: block; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--a) 0%, var(--al) 50%, transparent 100%);
}
.access__map { min-height: 320px; position: relative; }
.access__map iframe { width: 100%; height: 100%; min-height: 320px; border: none; display: block; }
.access__info { background: #fff; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--ln); }
@media (min-width: 768px) { .access__info { border-top: none; border-left: 1px solid var(--ln); } }
.access__info-en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .8rem; letter-spacing: .2em; display: block; margin-bottom: .4rem;
}
.access__info-h { font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 1.4rem); color: var(--k); font-weight: 300; margin-bottom: 2rem; }
.access__items { display: flex; flex-direction: column; gap: 1.4rem; }
.access__item { display: flex; gap: .9rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(13,31,60,.06); }
.access__item:last-child { border-bottom: none; padding-bottom: 0; }
.access__item-icon { font-size: 1rem; flex-shrink: 0; margin-top: .15rem; }
.access__item-lbl {
  font-size: .58rem; color: var(--mt); letter-spacing: .18em;
  text-transform: uppercase; display: block; margin-bottom: .3rem;
  font-family: var(--font-display); font-weight: 600;
}
.access__item-val { font-size: .85rem; color: var(--tx); line-height: 1.7; font-weight: 300; }
.access__item small { color: var(--mt); font-size: .8em; }
.access__item a { color: var(--a); text-decoration: none; transition: color .2s; }
.access__item a:hover { color: var(--k); }

/* template.php access 스타일 (다크) */
.access--dark { background: var(--k); color: #fff; padding: clamp(2.5rem, 6vw, 4rem) var(--px); }
.access--dark .access__inner { max-width: var(--site-max); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 820px) { .access--dark .access__inner { grid-template-columns: 1fr 1fr; } }
.access__info-lbl { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .3rem; display: block; font-family: var(--font-display); font-weight: 600; }
.access__icon { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.access--dark .access__info-h { color: #fff; }
.access--dark .access__item-lbl { color: rgba(255,255,255,.4); }
.access--dark .access__item-val { color: rgba(255,255,255,.8); }
.access--dark .access__item small { color: rgba(255,255,255,.45); }
.access--dark .access__item { border-bottom-color: rgba(255,255,255,.08); }
.access--dark .access__item a { color: var(--al); }
.access--dark .access__item a:hover { color: #fff; }

/* ══════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════ */
.reviews { background: var(--k); padding: clamp(3rem, 7vw, 5rem) var(--px); }
.reviews__inner { max-width: var(--site-max); margin: 0 auto; }
.reviews__top { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; }
@media (min-width: 860px) { .reviews__top { grid-template-columns: auto 1fr; align-items: end; gap: 4rem; } }
.reviews__bignum {
  font-family: var(--font-display); font-size: clamp(4rem, 10vw, 7rem);
  color: rgba(58,134,212,.2); line-height: 1; font-weight: 700; display: block;
}
.reviews__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .8rem; letter-spacing: .22em; display: block; margin-bottom: .4rem;
}
.reviews__h { font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 1.7rem); color: #fff; font-weight: 300; margin-bottom: .8rem; }
.reviews__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.reviews__chip { font-size: .7rem; color: var(--al); border: 1px solid rgba(127,184,232,.2); padding: .2rem .6rem; font-weight: 300; }
.reviews__chip span { color: var(--a); font-family: var(--font-display); font-weight: 700; margin-left: .25rem; }

.reviews__feature {
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 3rem 0; margin-bottom: 3rem; position: relative;
}
.reviews__feature::before {
  content: '\201C'; font-family: var(--font-display); font-size: 6rem;
  color: rgba(58,134,212,.2); position: absolute; top: -1rem; left: 0;
  line-height: 1; font-weight: 700;
}
.reviews__feature-text {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: #fff; font-weight: 300; line-height: 1.7; padding-left: 1rem;
}
@media (min-width: 760px) { .reviews__feature-text { padding-left: 2rem; max-width: 80%; } }
.reviews__feature-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; padding-left: 1rem; }
@media (min-width: 760px) { .reviews__feature-meta { padding-left: 2rem; } }
.reviews__feature-id { font-family: var(--font-display); font-size: .8rem; color: var(--a); font-weight: 700; }
.reviews__feature-date { font-size: .7rem; color: rgba(255,255,255,.25); }
.reviews__feature-badge { font-size: .6rem; color: var(--a); border: 1px solid rgba(58,134,212,.3); padding: .15rem .5rem; letter-spacing: .1em; font-family: var(--font-display); }

.reviews__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.05); }
@media (min-width: 600px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .reviews__grid { grid-template-columns: repeat(3,1fr); } }
.review-card { background: var(--k); padding: 1.5rem; transition: background .2s; }
.review-card:hover { background: rgba(58,134,212,.06); }
.review-card__tags { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: .8rem; }
.review-card__tag { font-size: .68rem; color: var(--a); font-weight: 300; }
.review-card__tag + .review-card__tag::before { content: '·'; color: rgba(255,255,255,.15); margin-right: .35rem; }
.review-card__text { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.75; font-weight: 300; margin-bottom: 1rem; }
.review-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.06); }
.review-card__id { font-family: var(--font-display); font-size: .72rem; color: rgba(255,255,255,.3); font-weight: 700; }
.review-card__date { font-size: .65rem; color: rgba(255,255,255,.2); }
.reviews__more { text-align: center; margin-top: 2rem; }
.reviews__more a {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.4);
  font-size: .72rem; letter-spacing: .14em; padding: .65rem 1.6rem;
  text-decoration: none; transition: border-color .25s, color .25s;
  font-family: var(--font-display); font-weight: 600;
}
.reviews__more a:hover { border-color: var(--a); color: var(--al); }

/* ══════════════════════════════════════════════
   FAQ 아코디언 — html.php용 (.faq-item/.faq-btn/.faq-body/.faq-open)
══════════════════════════════════════════════ */
.faq-section { padding: clamp(3rem, 7vw, 5rem) var(--px); background: #fff; }
.faq-section__inner { max-width: 720px; margin: 0 auto; }
.faq-section__en {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .8rem; letter-spacing: .22em; display: block; margin-bottom: .4rem;
}
.faq-section__h { font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--k); font-weight: 300; margin-bottom: 2.5rem; }
.faq-item { border-top: 1px solid rgba(13,31,60,.08); }
.faq-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .95rem 0; text-align: left;
  font-family: var(--font-heading); font-size: .95rem; color: var(--k);
  cursor: pointer; background: none; border: none; transition: color .2s;
}
.faq-btn:hover { color: var(--a); }
.faq-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 1.5px; background: currentColor;
  transform: translate(-50%,-50%);
}
.faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .3s, opacity .3s; }
.faq-open .faq-icon::after { transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.25,1,.5,1); }
.faq-body p { padding-bottom: 1rem; font-size: .87rem; color: var(--mt); line-height: 1.85; font-weight: 300; }

/* FAQ 아코디언 — template.php용 (.faq__item/.faq__btn/.faq__body/.faq__item--open) */
.faqs { padding: clamp(2.5rem, 6vw, 3.5rem) var(--px); background: var(--bg); }
.faqs__inner { max-width: var(--content-max); margin: 0 auto; }
.faqs__lbl {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .8rem; letter-spacing: .2em; display: block; margin-bottom: .4rem;
}
.faqs__h { font-family: var(--font-heading); font-size: clamp(1.1rem, 3vw, 1.35rem); color: var(--k); margin-bottom: 1.8rem; font-weight: 400; }
.faq__item { border-top: 1px solid var(--ln); }
.faq__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .9rem 0; text-align: left;
  font-family: var(--font-heading); font-size: .95rem; color: var(--k);
  cursor: pointer; background: none; border: none; transition: color .25s;
}
.faq__btn:hover { color: var(--a); }
.faq__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%,-50%);
}
.faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .3s, opacity .3s; }
.faq__item--open .faq__icon::after { transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }
.faq__body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.25,1,.5,1); }
.faq__body p { padding-bottom: 1rem; font-size: .88rem; color: var(--mt); line-height: 1.85; font-weight: 300; }

/* ══════════════════════════════════════════════
   CTA-SPLIT
══════════════════════════════════════════════ */
.cta-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cta-split { grid-template-columns: 1fr 1fr; min-height: 280px; } }
.cta-split__img { position: relative; min-height: 200px; }
.cta-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-split__img::after { content: ''; position: absolute; inset: 0; background: rgba(13,31,60,.55); }
.cta-split__body { background: var(--a); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.cta-split__en {
  font-family: var(--font-display); font-weight: 700;
  color: rgba(255,255,255,.55); font-size: .78rem; letter-spacing: .22em; display: block; margin-bottom: .5rem;
}
.cta-split__h { font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 1.4rem); color: #fff; font-weight: 300; margin-bottom: .5rem; line-height: 1.4; }
.cta-split__sub { color: rgba(255,255,255,.65); font-size: .82rem; line-height: 1.7; margin-bottom: 1.5rem; font-weight: 300; }
.cta-split__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.cta-split__btn-a {
  display: inline-flex; background: var(--k); color: #fff;
  padding: .7rem 1.5rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  transition: background .25s;
}
.cta-split__btn-a:hover { background: var(--tx); }
.cta-split__btn-b {
  display: inline-flex; border: 1px solid rgba(255,255,255,.35); color: #fff;
  padding: .7rem 1.5rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  font-family: var(--font-display); font-weight: 400;
  transition: background .25s;
}
.cta-split__btn-b:hover { background: rgba(255,255,255,.1); }

/* template.php CTA (centered) */
.cta { background: var(--k); padding: clamp(2.5rem, 6vw, 3.5rem) var(--px); text-align: center; }
.cta__inner { max-width: 540px; margin: 0 auto; }
.cta__en { font-family: var(--font-display); font-weight: 700; color: var(--al); letter-spacing: .28em; font-size: .9rem; display: block; margin-bottom: .6rem; }
.cta__h { font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 1.5rem); color: #fff; font-weight: 300; margin-bottom: .5rem; line-height: 1.4; }
.cta__sub { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.7; margin-bottom: 1.6rem; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.btn-primary {
  display: inline-flex; align-items: center;
  background: var(--a); color: #fff; padding: .8rem 2rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 600;
  transition: background .25s, color .25s;
}
.btn-primary:hover { background: #fff; color: var(--k); }
.btn-outline {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.3); color: #fff; padding: .8rem 2rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 400;
  transition: background .25s;
}
.btn-outline:hover { background: rgba(255,255,255,.08); }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer { background: var(--bg); border-top: 1px solid var(--ln); padding: clamp(2.5rem, 6vw, 3.5rem) var(--px) 2rem; }
.footer__inner { max-width: var(--site-max); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 540px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .footer__inner { grid-template-columns: 2fr 1fr; } }
.footer__logo {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--k); letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; display: block; margin-bottom: .8rem;
}
.footer__biz { font-size: .7rem; color: var(--mt); line-height: 1.9; font-weight: 300; }
.footer__biz a { color: var(--a); text-decoration: none; }
.footer__nav-h {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mt); margin-bottom: .7rem; display: block;
  font-family: var(--font-display); font-weight: 700;
}
.footer__nav a { display: block; font-size: .78rem; color: var(--mt); margin-bottom: .35rem; text-decoration: none; transition: color .2s; font-weight: 300; }
.footer__nav a:hover { color: var(--a); }
.footer__copy {
  max-width: var(--site-max); margin: 2rem auto 0;
  border-top: 1px solid var(--ln); padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  font-size: .65rem; color: var(--mt); font-weight: 300;
}

/* 푸터 CTA 버튼 (클래스 기반) */
.footer__cta-btn {
  display: inline-flex;
  border: 1px solid rgba(13,31,60,.2); color: var(--tx);
  padding: .6rem 1.4rem; font-size: .65rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  transition: background .2s, color .2s;
}
.footer__cta-btn:hover { background: var(--k); color: #fff; }

/* ══════════════════════════════════════════════
   FLOATING CTA + SCROLL TOP
══════════════════════════════════════════════ */
.float-cta {
  position: fixed; bottom: 1.5rem; right: 1.25rem; z-index: 40;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s, transform .4s;
  pointer-events: none; display: flex; flex-direction: column;
  align-items: flex-end; gap: .5rem;
}
.float-cta--show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.float-cta a {
  display: flex; align-items: center;
  background: var(--a); color: #fff;
  padding: .65rem 1.3rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(13,31,60,.2); text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
}
.float-cta--show a { animation: pulse-ring 2.2s cubic-bezier(.25,1,.5,1) infinite; }
.float-cta a:hover { background: var(--k); animation: none; }

#totop {
  position: fixed; bottom: 1.5rem; left: 1.25rem; z-index: 40;
  width: 2.4rem; height: 2.4rem;
  background: rgba(13,31,60,.65); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12); color: #fff;
  font-size: .85rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .35s, background .2s;
  pointer-events: none; border-radius: 2px;
}
#totop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#totop:hover { background: var(--a); }

/* ══════════════════════════════════════════════
   TEMPLATE.PHP 전용 레이아웃 컴포넌트
══════════════════════════════════════════════ */

/* 브레드크럼 */
.breadcrumb { background: var(--s1); padding: .6rem var(--px); border-bottom: 1px solid var(--ln); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; max-width: var(--site-max); margin: 0 auto; }
.breadcrumb li { font-size: .65rem; color: var(--mt); letter-spacing: .06em; display: flex; align-items: center; gap: .35rem; }
.breadcrumb li a:hover { color: var(--a); }
.breadcrumb li + li::before { content: '›'; color: var(--al); }

/* 스탯 바 */
.stats { background: var(--k); }
.stats__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); max-width: var(--site-max); margin: 0 auto; }
.stats__item { padding: clamp(1rem, 3vw, 1.5rem) var(--px); border-right: 1px solid rgba(255,255,255,.08); text-align: center; }
.stats__item:last-child { border-right: none; }
.stats__num { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--al); display: block; line-height: 1; font-weight: 700; }
.stats__lbl { font-size: .6rem; color: rgba(255,255,255,.35); letter-spacing: .18em; text-transform: uppercase; margin-top: .35rem; display: block; font-family: var(--font-display); font-weight: 600; }

/* 메인 레이아웃 */
.layout { max-width: var(--site-max); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--px) clamp(3rem, 8vw, 5rem); display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 1024px) { .layout { grid-template-columns: 1fr 280px; gap: 3.5rem; } }

/* 인트로 */
.intro { padding: clamp(1.5rem, 4vw, 3rem); background: var(--s1); border-left: 3px solid var(--a); margin-bottom: clamp(2rem, 5vw, 3rem); }
.intro__h { font-family: var(--font-heading); font-size: clamp(1.05rem, 2.5vw, 1.35rem); color: var(--k); margin-bottom: .8rem; font-weight: 400; }
.intro__b { color: var(--mt); line-height: 1.85; font-size: .9rem; }

/* 콘텐츠 블록 */
.cb { margin-bottom: 3rem; }
.cb__overline {
  font-family: var(--font-display); font-weight: 700;
  color: var(--a); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  display: block; margin-bottom: .5rem;
}
.cb__h2 { font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 1.55rem); color: var(--k); font-weight: 400; margin-bottom: 1rem; line-height: 1.4; }
.cb__body { color: var(--mt); line-height: 1.9; font-size: .9rem; margin-bottom: .8rem; }
.cb__tip { background: var(--s2); border-left: 3px solid var(--a); padding: 1rem 1.2rem; font-size: .85rem; color: var(--tx); line-height: 1.75; margin-top: 1rem; }
.cb__tip strong { color: var(--a); }
.cb__list { list-style: none; margin-top: .8rem; }
.cb__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--mt); padding: .4rem 0; border-bottom: 1px solid var(--ln); line-height: 1.6; }
.cb__list li::before { content: ''; width: 6px; height: 6px; background: var(--a); border-radius: 50%; margin-top: .5rem; flex-shrink: 0; }

.cb--with-right { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 820px) { .cb--with-right { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.cb__right-cards { display: flex; flex-direction: column; gap: 1rem; }
.cb__card { background: var(--s1); padding: 1.2rem 1.4rem; border-left: 2px solid var(--a); }
.cb__card-lbl { font-size: .65rem; color: var(--al); letter-spacing: .15em; text-transform: uppercase; display: block; margin-bottom: .25rem; font-family: var(--font-display); font-weight: 700; }
.cb__card-h { font-family: var(--font-heading); font-size: 1rem; color: var(--k); margin-bottom: .3rem; }
.cb__card-b { font-size: .8rem; color: var(--mt); line-height: 1.65; }
.cb__timeline { display: flex; flex-direction: column; }
.cb__tl-item { display: flex; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--ln); }
.cb__tl-num { font-family: var(--font-display); font-size: 1.25rem; color: var(--al); flex-shrink: 0; width: 1.8rem; text-align: center; font-weight: 700; line-height: 1.2; }
.cb__tl-body { flex: 1; }
.cb__tl-h { font-size: .88rem; color: var(--k); font-weight: 500; margin-bottom: .2rem; }
.cb__tl-b { font-size: .78rem; color: var(--mt); line-height: 1.6; }
.cb__table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cb__table th { background: var(--k); color: #fff; padding: .6rem .8rem; text-align: left; font-weight: 400; letter-spacing: .05em; }
.cb__table td { padding: .55rem .8rem; border-bottom: 1px solid var(--ln); color: var(--tx); vertical-align: top; }
.cb__table tr:last-child td { border-bottom: none; }
.cb__table tr:nth-child(even) td { background: var(--s1); }
.cb__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 사이드바 */
.sidebar { display: none; }
@media (min-width: 1024px) { .sidebar { display: block; } }
.sidebar__block { background: var(--s1); padding: 1.5rem; margin-bottom: 1.5rem; }
.sidebar__h { font-family: var(--font-heading); font-size: .88rem; color: var(--k); margin-bottom: 1rem; font-weight: 400; padding-bottom: .5rem; border-bottom: 1px solid var(--ln); }
.sidebar__list a { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--mt); padding: .35rem 0; border-bottom: 1px solid rgba(13,31,60,.05); transition: color .2s; }
.sidebar__list a:hover { color: var(--a); }
.sidebar__list a::before { content: ''; width: 4px; height: 4px; background: var(--al); border-radius: 50%; flex-shrink: 0; }
.sidebar__cta { background: var(--k); padding: 1.5rem; text-align: center; }
.sidebar__cta-en { font-family: var(--font-display); font-weight: 700; color: var(--al); font-size: .75rem; letter-spacing: .2em; display: block; margin-bottom: .4rem; }
.sidebar__cta-h { font-family: var(--font-heading); font-size: 1rem; color: #fff; font-weight: 300; margin-bottom: 1rem; line-height: 1.4; }
.sidebar__cta a { display: block; background: var(--a); color: #fff; padding: .65rem; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; transition: background .25s; }
.sidebar__cta a:hover { background: #fff; color: var(--k); }
.sidebar__cta-tel { display: block; color: rgba(255,255,255,.5); font-size: .75rem; margin-top: .8rem; }

/* 관련 페이지 */
.related { padding: clamp(2rem, 5vw, 3rem) var(--px); background: var(--s1); border-top: 1px solid var(--ln); }
.related__inner { max-width: var(--site-max); margin: 0 auto; }
.related__lbl { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mt); display: block; margin-bottom: .8rem; font-family: var(--font-display); font-weight: 700; }
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: .8rem; }
.related__card { background: var(--bg); padding: 1rem 1.2rem; border: 1px solid var(--ln); transition: border-color .25s, box-shadow .25s; }
.related__card:hover { border-color: var(--a); box-shadow: 0 4px 16px rgba(13,31,60,.06); }
.related__card-label { font-family: var(--font-heading); font-size: .88rem; color: var(--k); margin-bottom: .3rem; }
.related__card-cat { font-size: .6rem; color: var(--al); letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; }

/* 추천 서비스 */
.rec-svc { padding: clamp(2rem, 5vw, 3rem) var(--px); border-top: 1px solid var(--ln); }
.rec-svc__inner { max-width: var(--site-max); margin: 0 auto; }
.rec-svc__lbl { font-family: var(--font-display); font-weight: 700; color: var(--a); font-size: .78rem; letter-spacing: .2em; display: block; margin-bottom: .4rem; }
.rec-svc__h { font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.1rem); color: var(--k); margin-bottom: 1.2rem; font-weight: 400; }
.rec-svc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1rem; }
.rec-svc__item { background: var(--s1); padding: 1.2rem; border-left: 2px solid var(--a); transition: transform .3s, box-shadow .3s; }
.rec-svc__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rec-svc__item-h { font-family: var(--font-heading); font-size: .9rem; color: var(--k); margin-bottom: .2rem; }
.rec-svc__item-b { font-size: .75rem; color: var(--mt); line-height: 1.6; margin-bottom: .6rem; }
.rec-svc__item-link { font-size: .65rem; letter-spacing: .1em; color: var(--a); border-bottom: 1px solid var(--ln); padding-bottom: 1px; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; }

/* ══════════════════════════════════════════════
   반응형 분기 3단
══════════════════════════════════════════════ */

/* 1024px — 메인 nav links 표시, 5-column proc, sidebar 활성 */
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .proc-steps { grid-template-columns: repeat(5,1fr); }
  .layout { grid-template-columns: 1fr 280px; }
  .sidebar { display: block; }
}

/* 768px — programs/reviews/access 2-column */
@media (min-width: 768px) {
  .programs__grid { grid-template-columns: 1fr 1fr; }
  .reviews__grid  { grid-template-columns: 1fr 1fr; }
  .access         { grid-template-columns: 1fr 1fr; }
  .cta-split      { grid-template-columns: 1fr 1fr; }
}

/* 560px — symp-grid 2-column, proc-steps 2-column */
@media (min-width: 560px) {
  .proc-steps { grid-template-columns: 1fr 1fr; }
  .why__grid  { grid-template-columns: 1fr 1fr; }
}

/* 모바일 폰트 보정 */
@media (max-width: 599px) {
  .nav__brand-sub, .breadcrumb li, .stats__lbl, .footer__nav-h, .footer__copy,
  .access__item-lbl, .cb__card-lbl, .rec-svc__item-link,
  .related__card-cat, .faqs__lbl, .rec-svc__lbl, .cta__en,
  .care-cats__label, .kicker { font-size: .72rem; }
  .footer__biz { font-size: .75rem; }
}

/* ══════════════════════════════════════════════
   유틸리티
══════════════════════════════════════════════ */
.md-show { display: none; }
@media (min-width: 768px) { .md-show { display: block; } }
.sr-only { position: absolute; left: -9999px; }

/* ══════════════════════════════════════════════
   INFO / ARTICLE TEMPLATE (.art-*)
══════════════════════════════════════════════ */

/* ── 아티클 2컬럼 레이아웃 ── */
.art-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: start;
  max-width: var(--site-max);
  margin: 0 auto;
}
@media (max-width: 860px) { .art-layout { display: block; } }

/* sticky TOC 사이드바 (데스크탑) */
.art-toc {
  position: sticky; top: 68px;
  max-height: calc(100vh - 72px); overflow-y: auto;
  padding: 1.75rem 1.25rem 2rem;
  border-right: 1px solid var(--ln);
  background: var(--bg);
}
@media (max-width: 860px) { .art-toc { display: none; } }
.art-toc__label { margin-bottom: 1rem; }
.art-toc__link {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .42rem .55rem; font-size: .73rem; color: var(--mt);
  line-height: 1.45; border-left: 2px solid transparent;
  margin-left: -2px; transition: color .15s, border-color .15s, background .15s;
  font-weight: 300; word-break: keep-all;
}
.art-toc__link:hover { color: var(--a); background: rgba(58,134,212,.05); }
.art-toc__link.is-active { color: var(--a); border-left-color: var(--a); background: rgba(58,134,212,.05); }
.art-toc__num { font-family: var(--font-display); font-size: .58rem; color: rgba(58,134,212,.35); flex-shrink: 0; margin-top: .12rem; }

/* 모바일 목차 드롭다운 */
.art-toc-mob { background: #fff; border-bottom: 1px solid var(--ln); padding: 0 var(--px); display: none; }
@media (max-width: 860px) { .art-toc-mob { display: block; } }
.art-toc-mob__btn {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: .65rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--a);
  padding: .85rem 0; display: flex; justify-content: space-between; align-items: center;
}
.art-toc-mob__nav { display: none; padding-bottom: .9rem; }
.art-toc-mob__nav.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; }
@media (max-width: 440px) { .art-toc-mob__nav.is-open { grid-template-columns: 1fr; } }
.art-toc-mob__nav a {
  font-size: .74rem; color: var(--mt); padding: .3rem .5rem;
  border-left: 2px solid var(--ln);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  transition: color .15s, border-color .15s;
}
.art-toc-mob__nav a:hover { color: var(--a); border-left-color: var(--a); }

/* art-main (오른쪽 콘텐츠 컬럼) */
.art-main { min-width: 0; }
.art-main .art-sec__inner { max-width: 660px; }

/* 리드 단락 (각 섹션 첫 번째 p) */
.art-sec__lead {
  font-size: clamp(.9rem, 2vw, .97rem);
  color: var(--tx); line-height: 1.9; margin-bottom: .8rem; font-weight: 400;
}

/* 히어로 */
.art-hero {
  background: var(--k);
  padding: clamp(5.5rem, 14vh, 8rem) var(--px) clamp(2rem, 4vh, 3rem);
}
.art-hero__inner { max-width: 820px; margin: 0 auto; }
.art-hero__h1 {
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  color: #fff; line-height: 1.3; margin-bottom: .75rem;
}
.art-hero__meta {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  font-size: .65rem; color: rgba(255,255,255,.25); letter-spacing: .08em;
  margin-top: .5rem;
}

/* 인트로 */
.art-intro { background: #fff; padding: clamp(2rem,5vw,3rem) var(--px); border-bottom: 1px solid var(--ln); }
.art-intro__inner {
  max-width: 820px; margin: 0 auto;
  border-left: 3px solid var(--a); padding-left: 1.5rem;
}
.art-intro__h {
  font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--k); margin-bottom: .75rem; font-weight: 400;
}
.art-intro__p { color: var(--mt); line-height: 1.9; font-size: .88rem; margin-bottom: .6rem; }
.art-intro__p:last-child { margin-bottom: 0; }

/* 섹션 */
.art-sec { padding: clamp(2.5rem,7vw,4rem) var(--px); background: #fff; }
.art-sec--alt { background: var(--bg); }
.art-sec__inner { max-width: 820px; margin: 0 auto; }

.art-sec__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.art-sec__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: rgba(58,134,212,.15); line-height: 1; flex-shrink: 0;
  letter-spacing: -.02em;
}
.art-sec__h2 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  color: var(--k); line-height: 1.4;
}
.art-sec__h3 {
  font-family: var(--font-heading); font-size: .95rem;
  color: var(--tx); font-weight: 400; margin: 1.5rem 0 .5rem;
}
.art-sec__text { margin-bottom: 1rem; }
.art-sec__p {
  color: var(--mt); line-height: 1.9; font-size: .875rem; margin-bottom: .7rem;
}
.art-sec__p:last-child { margin-bottom: 0; }

/* 카드 그리드 리스트 */
.art-sec__cards {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin: 1.2rem 0;
}
@media (max-width: 400px) { .art-sec__cards { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .art-sec__cards { grid-template-columns: repeat(3, 1fr); } }
.art-sec__card {
  background: var(--s1);
  border-top: 2px solid var(--a);
  padding: .65rem .9rem;
  font-size: .8rem; color: var(--tx); line-height: 1.55; font-weight: 400;
}
.art-sec--alt .art-sec__card { background: #fff; }

/* 팁 callout */
.art-sec__tip {
  background: var(--k); color: rgba(255,255,255,.8);
  padding: 1rem 1.25rem; margin-top: 1.2rem;
  font-size: .82rem; line-height: 1.8;
  border-left: 3px solid var(--a);
}
.art-sec__tip strong { color: var(--al); }

/* 테이블 */
.art-sec__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.2rem; }
.art-sec__table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.art-sec__table th {
  background: var(--k); color: #fff; padding: .55rem .85rem;
  text-align: left; font-weight: 400; letter-spacing: .04em; white-space: nowrap;
}
.art-sec__table td {
  padding: .55rem .85rem; border-bottom: 1px solid var(--ln);
  color: var(--tx); vertical-align: top; line-height: 1.55;
}
.art-sec__table tr:last-child td { border-bottom: none; }
.art-sec__table tr:nth-child(even) td { background: var(--s1); }

/* 모바일 아코디언 */
@media (max-width: 860px) {
  .art-sec { padding: 0; border-bottom: 1px solid var(--ln); }
  .art-sec__inner { max-width: 100%; }
  .art-sec__head { padding: 1rem var(--px); margin-bottom: 0; cursor: pointer; user-select: none; position: relative; padding-right: calc(var(--px) + 2rem); align-items: center; }
  .art-sec__num { font-size: 1.4rem; }
  .art-sec__head::after { content: '▾'; position: absolute; right: var(--px); top: 50%; transform: translateY(-50%); font-size: .8rem; color: var(--a); transition: transform .25s; }
  .art-sec--open .art-sec__head::after { transform: translateY(-50%) rotate(180deg); }
  .art-sec__body { overflow: hidden; padding: 0 var(--px); }
  .art-sec__body > *:last-child { margin-bottom: 1.5rem; }
  .art-sec__tip { margin-top: 1rem; }
  .art-sec__cards { grid-template-columns: 1fr; }
}

/* 중간 CTA 배너 */
.art-mid-cta { background: var(--a); padding: clamp(1.5rem,4vw,2.5rem) var(--px); }
.art-mid-cta__inner { max-width: 820px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.art-mid-cta__h { font-family: var(--font-heading); font-size: clamp(.95rem,2.5vw,1.1rem); color: #fff; font-weight: 300; flex: 1; min-width: 200px; }
.art-mid-cta__sub { font-size: .72rem; color: rgba(255,255,255,.6); margin-top: .25rem; letter-spacing: .05em; }
.art-mid-cta__btn {
  background: #fff; color: var(--a);
  font-family: var(--font-display); font-weight: 700;
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  padding: .7rem 1.5rem; white-space: nowrap; flex-shrink: 0;
  transition: background .2s, color .2s;
}
.art-mid-cta__btn:hover { background: var(--k); color: #fff; }

/* FAQ */
.art-faq { background: var(--bg); padding: clamp(2.5rem,7vw,4rem) var(--px); }
.art-faq__inner { max-width: 820px; margin: 0 auto; }
.art-faq__h {
  font-family: var(--font-heading); font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  color: var(--k); font-weight: 400; margin-bottom: 1.5rem;
  padding-left: .9rem; border-left: 3px solid var(--a);
}

/* ══════════════════════════════════════════════
   LOCAL PAGE (lp-*) — 지역 페이지 공유 레이아웃
══════════════════════════════════════════════ */
.lp-strip{background:var(--k);padding:.9rem var(--px)}
.lp-strip__inner{max-width:var(--site-max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem}
.lp-strip__item{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:rgba(255,255,255,.7);font-weight:300}
.lp-strip__item a{color:rgba(255,255,255,.7);transition:color .2s}
.lp-strip__item a:hover{color:#fff}
.lp-strip__cta{margin-left:auto;background:var(--a);color:#fff;font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.5rem 1.1rem;white-space:nowrap;transition:background .2s;flex-shrink:0}
.lp-strip__cta:hover{background:var(--ah)}
@media(max-width:560px){.lp-strip__cta{display:none}}

.lp-intro{padding:clamp(3rem,7vw,5rem) var(--px);background:#fff}
.lp-intro__inner{max-width:var(--site-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(min-width:768px){.lp-intro__inner{grid-template-columns:1fr 1fr}}
.lp-intro__h{font-family:var(--font-heading);font-size:clamp(1.25rem,3vw,1.6rem);color:var(--k);font-weight:300;margin:.4rem 0 1.1rem;line-height:1.55}
.lp-intro__b{font-size:clamp(.86rem,2vw,.93rem);color:var(--mt);line-height:1.95;font-weight:300;margin-bottom:1.75rem}
.lp-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.lp-chip{font-family:var(--font-display);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a);border:1px solid rgba(58,134,212,.35);padding:.35rem .8rem}
.lp-map-box iframe{width:100%;height:clamp(220px,35vw,380px);border:0;display:block}
.lp-addr-card{background:var(--bg);border-top:2px solid var(--a);padding:1.1rem 1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1.5rem}
@media(max-width:400px){.lp-addr-card{grid-template-columns:1fr}}
.lp-addr-item{display:flex;flex-direction:column;gap:.15rem}
.lp-addr-lbl{font-family:var(--font-display);font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--a)}
.lp-addr-val{font-size:.8rem;color:var(--k);font-weight:400;line-height:1.5}
.lp-addr-val a{color:var(--k);transition:color .2s}
.lp-addr-val a:hover{color:var(--a)}

.lp-routes{padding:clamp(2.5rem,6vw,4rem) var(--px);background:var(--bg)}
.lp-routes__inner{max-width:var(--site-max);margin:0 auto}
.lp-routes__head{margin-bottom:2rem}
.lp-routes__h{font-family:var(--font-heading);font-size:clamp(1.15rem,2.5vw,1.45rem);color:var(--k);font-weight:300;margin-top:.4rem}
.lp-route-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ln)}
@media(min-width:400px){.lp-route-grid{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.lp-route-grid{grid-template-columns:repeat(5,1fr)}}
.lp-route-card{background:#fff;padding:1.4rem 1.2rem 1.25rem;transition:background .2s}
.lp-route-card:hover{background:var(--s1)}
.lp-route-from{font-family:var(--font-heading);font-size:.95rem;color:var(--k);font-weight:400;margin-bottom:.55rem}
.lp-route-badge{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.lp-route-badge--walk{color:var(--a)}
.lp-route-badge--car{color:var(--mt)}
.lp-route-time{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--k);line-height:1}
.lp-route-unit{font-size:.7rem;color:var(--mt);font-weight:300;margin-top:.2rem}

.lp-care{padding:clamp(3rem,7vw,5rem) var(--px);background:#fff}
.lp-care__inner{max-width:var(--site-max);margin:0 auto}
.lp-care__head{margin-bottom:2rem}
.lp-care__h{font-family:var(--font-heading);font-size:clamp(1.15rem,2.5vw,1.45rem);color:var(--k);font-weight:300;margin-top:.4rem}
.lp-care__b{font-size:clamp(.84rem,2vw,.9rem);color:var(--mt);line-height:1.9;font-weight:300;margin-top:.65rem;max-width:580px}
.lp-care-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ln);margin-top:2rem}
@media(min-width:480px){.lp-care-grid{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.lp-care-grid{grid-template-columns:repeat(3,1fr)}}
.lp-care-item{background:#fff;padding:1.4rem 1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:background .2s}
.lp-care-item:hover{background:var(--bg)}
.lp-care-num{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2rem);font-weight:700;color:rgba(58,134,212,.13);line-height:1;flex-shrink:0;width:2.2rem;transition:color .3s}
.lp-care-item:hover .lp-care-num{color:rgba(58,134,212,.3)}
.lp-care-name{font-family:var(--font-heading);font-size:.95rem;color:var(--k);font-weight:400;margin-bottom:.25rem}
.lp-care-desc{font-size:.78rem;color:var(--mt);line-height:1.65;font-weight:300}

.lp-banner{background:var(--k);padding:clamp(2rem,5vw,3rem) var(--px)}
.lp-banner__inner{max-width:var(--site-max);margin:0 auto;display:flex;flex-direction:column;gap:1rem}
@media(min-width:768px){.lp-banner__inner{flex-direction:row;align-items:center;justify-content:space-between}}
.lp-banner__label{font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--a);display:block;margin-bottom:.5rem}
.lp-banner__h{font-family:var(--font-heading);font-size:clamp(1rem,2.5vw,1.3rem);color:#fff;font-weight:300;line-height:1.5}
.lp-banner__sub{font-size:.8rem;color:rgba(255,255,255,.45);font-weight:300;margin-top:.4rem;line-height:1.6}
.lp-banner__btns{display:flex;gap:.75rem;flex-wrap:wrap;flex-shrink:0}
.lp-banner__btn{display:inline-flex;background:var(--a);color:#fff;font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.7rem 1.4rem;white-space:nowrap;transition:background .2s}
.lp-banner__btn:hover{background:var(--ah)}
.lp-banner__btn--outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.lp-banner__btn--outline:hover{background:rgba(255,255,255,.08);color:#fff}