/* 앤딩라이프 공통 스타일
   - 사장님이 주신 템플릿(docs/reference/template)의 디자인·색감을 그대로 따릅니다.
     아이보리 #F8F7F5 바탕, 차콜 #1a1a1a·#2d2d2d 글자와 버튼, 베이지 #D5C5B5 강조, 짙은 판 #222222, 흰 카드.
   - 템플릿 글꼴 Inter 대신 한글이 있는 Pretendard를 씁니다(Pretendard의 영문 자형은 Inter 기반).
   - 필기체는 로고 이미지 안에서만 씁니다. */

@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(/assets/fonts/pretendard-regular.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:url(/assets/fonts/pretendard-medium.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:url(/assets/fonts/pretendard-semibold.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:url(/assets/fonts/pretendard-bold.woff2) format('woff2')}

:root{
  /* 템플릿 색 */
  --ivory:#f8f7f5; --charcoal:#1a1a1a; --charcoal-light:#2d2d2d; --beige:#d5c5b5; --dark:#222222; --white:#fff;
  --emerald:#10b981;
  /* 쓰임별 이름 */
  --bg:var(--ivory); --surface:var(--white); --ink:var(--charcoal);
  --text:rgb(45 45 45 / 80%);   /* 템플릿 본문 text-charcoal-light/80 */
  --muted:rgb(45 45 45 / 72%);  /* 템플릿 설명 text-charcoal-light/70 (대비 4.5 이상으로 약간 진하게) */
  --faint:rgb(45 45 45 / 60%);
  --line:rgb(0 0 0 / 5%); --line-2:rgb(0 0 0 / 10%); --line-3:rgb(26 26 26 / 20%);
  --font:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --container:80rem; --reading:48rem; --gutter:1.5rem;
  --r-card:20px; --r-xl:2rem; --r-md:1rem;
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / 10%),0 1px 2px -1px rgb(0 0 0 / 10%);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / 10%),0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 5%);
  --header-h:5rem; --callbar-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
::selection{background:var(--charcoal);color:#fff}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.75;word-break:keep-all;overflow-wrap:break-word;padding-bottom:var(--callbar-h);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--charcoal);text-underline-offset:.2em}
a:hover{color:var(--charcoal-light)}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.025em;margin:0 0 .6em;font-weight:600}
h1{font-size:clamp(2.75rem,6.4vw,4.5rem);line-height:1.15}
h2{font-size:clamp(2rem,4vw,3rem);line-height:1.2}
h3{font-size:1.25rem;line-height:1.4}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:#fff}
[id]{scroll-margin-top:calc(var(--header-h) + 1rem)}

.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--charcoal);color:#fff;padding:.6rem 1rem;border-radius:999px}
.skip:focus{top:1rem;color:#fff}
.wrap{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.reading{max-width:var(--reading)}
/* 템플릿 첫 화면의 알약 배지(흰 바탕 + 점) */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.8125rem;font-weight:500;color:var(--charcoal-light);margin-bottom:1.5rem;line-height:1.6}
.eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--beige);flex:none}
.eyebrow.live::before{background:var(--emerald)}
.on-dark .eyebrow,.panel-dark .eyebrow{background:rgb(255 255 255 / 8%);border-color:rgb(255 255 255 / 12%);color:rgb(255 255 255 / 85%)}
.lead{font-size:1.125rem;color:var(--muted);line-height:1.75}
@media (min-width:48rem){.lead{font-size:1.1875rem}}
.muted{color:var(--muted)}
.small{font-size:1rem}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 버튼: 템플릿의 알약형(px-8 py-4) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:1rem 2rem;border-radius:999px;font-weight:500;font-size:1rem;text-decoration:none;border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s;line-height:1.3;text-align:center}
.btn-primary{background:var(--charcoal);color:#fff}
.btn-primary:hover{background:var(--charcoal-light);color:#fff}
.btn-call{font-weight:600}
.btn-ghost{background:var(--surface);color:var(--charcoal);border-color:var(--line)}
.btn-ghost:hover{background:#efeeec;color:var(--charcoal)}
.btn-light{background:#fff;color:var(--charcoal)}
.btn-light:hover{background:var(--ivory);color:var(--charcoal)}
.btn-outline-light{color:#fff;border-color:rgb(255 255 255 / 25%)}
.btn-outline-light:hover{border-color:rgb(255 255 255 / 60%);color:#fff;background:rgb(255 255 255 / 6%)}
.btn svg{width:1rem;height:1rem;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.textlink{font-weight:500;color:var(--charcoal);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.textlink::after{content:"→";transition:transform .2s}
.textlink:hover{color:var(--charcoal-light)}
.textlink:hover::after{transform:translateX(3px)}
/* 짙은 판 위의 베이지 대문자 링크(템플릿 "Explore Our Gallery") */
.beige-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;letter-spacing:.06em;color:var(--beige);text-decoration:none;text-transform:uppercase}
.beige-link::after{content:"→"}
.beige-link:hover{color:#fff}

/* 헤더: 템플릿처럼 아이보리 반투명 + 흐림, 아래 옅은 선 */
.site-header{position:sticky;top:0;z-index:50;background:rgb(248 247 245 / 80%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:2rem;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand img{height:2.6rem;width:auto}
.brand .ko{display:none}
.nav{display:flex;align-items:center;gap:2rem;margin-inline:auto}
.nav a{color:var(--charcoal-light);text-decoration:none;font-weight:500;font-size:.9375rem;transition:color .2s;position:relative}
.nav a:hover{color:var(--charcoal)}
.nav a[aria-current="page"]{color:var(--charcoal);font-weight:600}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.45rem;height:1.5px;background:var(--charcoal);border-radius:2px}
.nav .sub-m{display:none}
.nav-divider{display:none}
.header-actions{display:flex;align-items:center;gap:1rem;flex:none}
.header-call{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line-3);font-size:.875rem;font-weight:500;color:var(--charcoal);text-decoration:none;transition:background-color .2s;white-space:nowrap}
.header-call:hover{background:rgb(26 26 26 / 5%);color:var(--charcoal)}
.header-call svg{width:1rem;height:1rem}
.header-call b{font-weight:600;font-variant-numeric:tabular-nums}
.header-cta{display:inline-flex;align-items:center;padding:.625rem 1.5rem;border-radius:999px;background:var(--charcoal);color:#fff;font-size:.875rem;font-weight:500;text-decoration:none;transition:background-color .2s;white-space:nowrap}
.header-cta:hover{background:var(--charcoal-light);color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line-3);border-radius:999px;min-height:2.75rem;padding:0 1.1rem;font:inherit;font-size:.9375rem;font-weight:500;color:var(--charcoal);cursor:pointer}

@media (max-width:72rem){
  .header-in{gap:1.25rem}
  .nav{gap:1.25rem}
  .header-call .k{display:none}
}
@media (max-width:62rem){
  .header-cta{display:none}
}
@media (max-width:56rem){
  :root{--header-h:4.25rem;--callbar-h:4.6rem}
  .brand img{height:2.2rem}
  .header-actions{display:none}
  .js .menu-btn{display:inline-flex;align-items:center;gap:.4rem}
  .nav .sub-m{display:block}
  /* 자바스크립트가 없으면 메뉴를 펼친 채로 헤더 아래에 보여 줍니다 */
  html:not(.js) .header-in{flex-wrap:wrap;height:auto;padding:.75rem 0}
  html:not(.js) .nav{display:flex;flex-wrap:wrap;width:100%;margin:0;gap:.5rem 1.25rem}
  html:not(.js) .nav a{display:inline-block;padding:.35rem 0}
  .js .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--ivory);border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1.25rem;box-shadow:var(--shadow-xl);display:none;max-height:calc(100dvh - var(--header-h) - var(--callbar-h));overflow:auto}
  .js .nav.open{display:flex}
  .js .nav a{padding:1rem .25rem;border-bottom:1px solid var(--line);font-size:1.0625rem;color:var(--charcoal)}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.35em}
}

/* 모바일 하단 긴급전화 바(차콜) */
.callbar{display:none}
@media (max-width:56rem){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:var(--charcoal);box-shadow:0 -6px 20px rgb(0 0 0 / 12%)}
  .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.4rem;border-radius:999px;text-decoration:none;font-weight:600;color:var(--charcoal);background:#fff;font-size:1.0625rem;line-height:1.2}
  .callbar a small{display:block;font-size:.75rem;font-weight:500;color:var(--muted)}
  .callbar a.secondary{flex:0 0 auto;background:transparent;color:#fff;border:1px solid rgb(255 255 255 / 30%);padding:0 1.1rem;font-size:.9375rem;font-weight:500}
  .callbar svg{width:1.2rem;height:1.2rem}
}

/* 구획: 템플릿 py-24 */
.section{padding:clamp(4rem,9vw,6rem) 0}
.section-tight{padding:clamp(2.5rem,6vw,4rem) 0}
.section-head{max-width:42rem;margin-bottom:clamp(2.5rem,6vw,4rem)}
.section-head h2{margin-bottom:1rem}
.section-head p:last-child{margin-bottom:0}
.section-head.center{text-align:center;margin-inline:auto}
/* 제목 왼쪽 + 버튼 오른쪽(템플릿 "View Full Menu") */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.5rem,6vw,4rem)}
.head-row .section-head{margin-bottom:0}
@media (max-width:56rem){.head-row{flex-direction:column;align-items:flex-start}}
.bg-surface{background:transparent}
.bg-sage{background:transparent}
.panel-dark{background:var(--dark);color:rgb(255 255 255 / 80%);border-radius:var(--r-xl);padding:clamp(2.5rem,7vw,5rem)}
.panel-dark h2,.panel-dark h3{color:#fff}
.panel-dark p{color:rgb(255 255 255 / 75%)}
.panel-dark a:not(.btn){color:#fff}
.panel-dark a.beige-link{color:var(--beige)}
.panel-dark a.beige-link:hover{color:#fff}

/* 짙은 판 + 오른쪽 사진(템플릿 "Why Clients Choose") */
.panel-split{background:var(--dark);color:#fff;border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.panel-split .body{padding:clamp(2.5rem,7vw,5rem)}
.panel-split h2{color:#fff;margin-bottom:2.5rem}
.panel-split .media{position:relative;min-height:25rem}
.panel-split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:64rem){.panel-split{grid-template-columns:1fr}.panel-split .media{min-height:20rem}}
.checks{list-style:none;padding:0;margin:0 0 2.5rem;display:grid;gap:1.5rem}
.checks li{display:flex;gap:1rem;align-items:flex-start;font-size:1.125rem;color:rgb(255 255 255 / 80%);line-height:1.6}
.checks li svg{flex:none;width:1.5rem;height:1.5rem;color:var(--beige);margin-top:.05rem}
.checks li b{display:block;color:#fff;font-weight:600}
.checks li span{display:block;font-size:1rem;color:rgb(255 255 255 / 65%);margin-top:.15rem}

/* 첫 화면: 템플릿 2열, 오른쪽 세로 사진 */
.hero{padding:clamp(3rem,8vw,5rem) 0 clamp(3rem,7vw,5rem);min-height:calc(90vh - var(--header-h));display:flex;align-items:center}
.hero > .wrap{width:min(100% - 2*var(--gutter),var(--container))}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero h1{margin-bottom:2rem}
.hero h1 .soft{color:rgb(26 26 26 / 60%)}
.hero .lead{max-width:28rem;margin-bottom:2rem;color:var(--text)}
.hero-note{margin-top:1.5rem;font-size:.9375rem;color:var(--muted)}
.hero-media{position:relative}
.hero-media img{border-radius:var(--r-xl);aspect-ratio:3/4;object-fit:cover;width:100%;box-shadow:var(--shadow-2xl)}
.hero-badge{display:none}
@media (max-width:64rem){
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .hero-media img{aspect-ratio:4/5;max-height:36rem}
}
@media (max-width:40rem){.hero .btns .btn{flex:1 1 100%}}
.page-hero{padding:clamp(3rem,8vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,3.75rem)}
.page-hero .lead{max-width:42rem}
.crumbs{font-size:.875rem;color:var(--muted);margin-bottom:1rem}
.crumbs a{color:var(--muted)}

/* 흰 카드 공통: 템플릿 rounded-[20px] + 옅은 테두리 + 작은 그림자 */
.card,.path,.plan,.brand-item,.contact-card,.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
a.svc,.path,.brand-item,.card.ext{transition:box-shadow .3s,transform .3s}
a.svc:hover,.path:hover,.brand-item:hover,.card.ext:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}

/* 사진 카드(템플릿 "Signature Treatments") */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.svc{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:var(--ink)}
.svc .svc-img{aspect-ratio:3/2;overflow:hidden}
.svc .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
a.svc:hover .svc-img img{transform:scale(1.05)}
.svc .svc-body{padding:2rem}
.svc h3{margin-bottom:.5rem}
.svc p{color:var(--muted);margin:0}
.svc .kicker{display:block;font-size:.8125rem;font-weight:500;letter-spacing:.05em;color:var(--faint);margin-bottom:.5rem}
.svc.urgent .svc-body{background:var(--dark);color:#fff;flex:1}
.svc.urgent h3{color:#fff}
.svc.urgent p{color:rgb(255 255 255 / 75%)}
.svc.urgent .kicker{color:var(--beige)}
.svc .phone{display:block;font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:.75rem}
@media (max-width:64rem){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.svc-grid{grid-template-columns:1fr}}

/* 상황별 입구 */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.path{position:relative;display:flex;flex-direction:column;padding:2rem}
.path .tag{font-size:.8125rem;font-weight:500;color:var(--faint);letter-spacing:.05em;margin-bottom:.6rem}
.path h3{margin-bottom:.5rem}
.path p{color:var(--muted);flex:1}
.path a.stretch{font-weight:500;color:var(--charcoal);text-decoration:none}
.path a.stretch::before{content:"";position:absolute;inset:0;border-radius:inherit}
.path a.stretch::after{content:" →"}
.path.urgent{background:var(--dark);border-color:var(--dark)}
.path.urgent h3,.path.urgent a.stretch,.path.urgent a{color:#fff}
.path.urgent .tag{color:var(--beige)}
.path.urgent p{color:rgb(255 255 255 / 75%)}
.path.urgent .phone{font-size:1.6rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;margin:.25rem 0 .75rem;display:block}
@media (max-width:56rem){.paths{grid-template-columns:1fr}}

/* 2열 편집 구획(템플릿 "Book Your Free Consultation") */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split.rev .split-media{order:2}
.split-media img{border-radius:var(--r-xl);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-2xl)}
.split-media.tall img{aspect-ratio:4/5}
.split h2{margin-bottom:1.5rem}
.split p{color:var(--muted)}
.split .btns{margin-top:2rem}
.caption{font-size:.8125rem;color:var(--faint);margin-top:.75rem}
@media (max-width:64rem){.split{grid-template-columns:1fr;gap:2.5rem}.split.rev .split-media{order:0}.split-media img{aspect-ratio:3/2}}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 1.5rem}
.chips li{background:var(--surface);border:1px solid var(--line);color:var(--charcoal-light);font-weight:500;font-size:.875rem;padding:.3rem .9rem;border-radius:999px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr);gap:1.25rem}
.card{padding:2rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);margin-bottom:.75rem}
.card p:last-child{margin-bottom:0}
.card .kicker{font-size:.8125rem;font-weight:500;color:var(--faint);letter-spacing:.05em;margin-bottom:.5rem;display:block}
.card.ext{display:flex;flex-direction:column}
.card.ext .textlink{margin-top:auto}
@media (max-width:64rem){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:56rem){.cards,.cards.two,.cards.four{grid-template-columns:1fr}}

/* ENDING & ANDING */
.axes{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:stretch}
.axis{background:rgb(255 255 255 / 4%);border:1px solid rgb(255 255 255 / 10%);border-radius:var(--r-card);padding:clamp(1.75rem,3vw,2.5rem)}
.axis .word{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:600;letter-spacing:.1em;color:#fff;line-height:1.1;margin-bottom:.5rem}
.axis .word em{font-style:normal;color:var(--beige)}
.axis .def{font-weight:500;color:#fff;margin-bottom:1.25rem}
.axis ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.axis li{display:flex;gap:.75rem;color:rgb(255 255 255 / 75%);line-height:1.5}
.axis li::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--beige);margin-top:.55em}
.amp{display:flex;align-items:center;justify-content:center}
.amp img{width:clamp(5rem,9vw,7.5rem)}
@media (max-width:56rem){.axes{grid-template-columns:1fr}.amp img{width:4.5rem}}

/* 원칙 */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:p}
.principle{border-top:1px solid var(--line-2);padding-top:1.5rem}
.principle::before{counter-increment:p;content:"0" counter(p);display:block;font-weight:500;color:var(--faint);font-size:.875rem;letter-spacing:.08em;margin-bottom:.75rem;font-variant-numeric:tabular-nums}
.principle p{color:var(--muted)}
@media (max-width:56rem){.principles{grid-template-columns:1fr}}

/* 단계 */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm);padding:1.5rem;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--charcoal);color:#fff;font-weight:500;font-size:.95rem}
.steps h3{font-size:1.125rem;margin:.25rem 0 .25rem}
.steps p{margin:0;color:var(--muted)}
.steps.row{grid-template-columns:repeat(4,1fr)}
.steps.row li{grid-template-columns:1fr}
@media (max-width:64rem){.steps.row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.steps.row{grid-template-columns:1fr}.steps.row li{grid-template-columns:3rem 1fr}}

/* 가격·멤버십 */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.plan{padding:2rem 1.75rem;display:flex;flex-direction:column}
.plan h3{font-size:1.125rem;margin-bottom:.25rem}
.plan .fit{color:var(--muted);font-size:.95rem;margin-bottom:1.25rem;line-height:1.55}
.plan .price{font-size:1.875rem;font-weight:600;color:var(--charcoal);font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.02em}
.plan .price small{font-size:1rem;font-weight:500}
.plan .member{font-size:.95rem;color:var(--charcoal-light);margin-top:.4rem;font-weight:500}
.plan ul{margin:1.25rem 0 0;padding-left:1.1em;color:var(--muted);font-size:.95rem;line-height:1.65}
.plan.featured{background:var(--dark);border-color:var(--dark);box-shadow:var(--shadow-xl)}
.plan.featured h3,.plan.featured .price{color:#fff}
.plan.featured .fit,.plan.featured ul{color:rgb(255 255 255 / 72%)}
.plan.featured .member{color:var(--beige)}
.membership{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:44rem}
@media (max-width:64rem){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.plans,.membership{grid-template-columns:1fr}}
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--beige);border-radius:var(--r-md);padding:1.1rem 1.4rem;color:var(--charcoal-light);font-size:1rem;line-height:1.7}
.note p:last-child{margin:0}
.note ul{margin:.25rem 0 0}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none;padding:0}
.benefits li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:1.25rem;line-height:1.55}
.benefits b{display:block;color:var(--charcoal);font-weight:600;margin-bottom:.25rem}
.benefits span{color:var(--muted);font-size:.95rem}
@media (max-width:64rem){.benefits{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.benefits{grid-template-columns:1fr}}

/* 구성 표 */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;font-size:.975rem;line-height:1.6}
th,td{text-align:left;padding:1rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#fbfaf9;color:var(--charcoal);font-weight:600;white-space:nowrap}
td{color:var(--charcoal-light)}
tr:last-child td{border-bottom:0}

/* FAQ: 템플릿 흰 상자 + 아래 화살표 */
.faq{display:grid;gap:1rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 3.5rem 1.25rem 1.5rem;font-weight:500;position:relative;line-height:1.55}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.6rem;top:50%;width:.55rem;height:.55rem;border-right:2px solid rgb(45 45 45 / 50%);border-bottom:2px solid rgb(45 45 45 / 50%);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .a{padding:0 1.5rem 1.25rem;color:var(--muted);line-height:1.75}
.faq .a p:last-child{margin:0}
.faq-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.faq-cats a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;text-decoration:none;color:var(--charcoal-light);font-weight:500;font-size:.9375rem;transition:background-color .2s}
.faq-cats a:hover{background:#efeeec;color:var(--charcoal)}
.faq-group{margin-bottom:3.5rem}

/* 글 카드(템플릿 "Insights") */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.post{display:block;text-decoration:none;color:var(--ink)}
.post .post-img{aspect-ratio:3/2;border-radius:var(--r-card);overflow:hidden;margin-bottom:1.5rem;background:var(--surface)}
.post .post-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.post:hover .post-img img{transform:scale(1.05)}
.post .cat{display:block;font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem}
.post h3{margin-bottom:.4rem;transition:color .2s}
.post:hover h3{color:rgb(45 45 45 / 70%)}
.post p{color:var(--muted);margin:0;font-size:1rem}
.post:not(:has(.post-img)){background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm);padding:2rem;transition:box-shadow .3s,transform .3s}
.post:not(:has(.post-img)):hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}
@media (max-width:56rem){.posts{grid-template-columns:1fr}}

/* 브랜드 목록 */
.brand-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.brand-item{padding:2rem;display:flex;flex-direction:column}
.brand-item .axis-tag{display:inline-block;font-size:.75rem;font-weight:500;letter-spacing:.1em;padding:.2rem .7rem;border-radius:999px;margin-bottom:1rem;align-self:flex-start}
.axis-tag.ending{background:var(--charcoal);color:#fff}
.axis-tag.anding{background:var(--beige);color:var(--charcoal)}
.brand-item h3{margin-bottom:.5rem}
.brand-item p{color:var(--muted)}
.brand-item .textlink{margin-top:auto}
@media (max-width:56rem){.brand-list{grid-template-columns:1fr}}

/* 연락처 */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.contact-card{padding:2rem}
.contact-card .big{display:block;font-size:1.75rem;font-weight:600;color:var(--charcoal);font-variant-numeric:tabular-nums;text-decoration:none;margin:.25rem 0 .5rem;overflow-wrap:anywhere;letter-spacing:-.02em}
.contact-card.urgent{background:var(--dark);border-color:var(--dark);color:rgb(255 255 255 / 75%)}
.contact-card.urgent h2,.contact-card.urgent h3,.contact-card.urgent .big{color:#fff}
@media (max-width:56rem){.contact-grid{grid-template-columns:1fr}}

/* 로고 쇼케이스 */
.logo-show{display:flex;justify-content:center;padding:clamp(1.5rem,4vw,3rem) 0}
.logo-show img{width:min(36rem,90%)}

/* 정책 문서 */
.doc h2{font-size:1.5rem;margin-top:3rem}
.doc h3{font-size:1.125rem;margin-top:1.75rem}
.doc p,.doc li{color:var(--charcoal-light)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:1.5rem 1.75rem}
.toc ol{margin:0}

/* 마지막 상담 구획 */
.cta-split{padding:clamp(4rem,9vw,6rem) 0}

/* 푸터: 템플릿처럼 흰 바탕 + 위쪽 옅은 선 */
.site-footer{margin-top:3rem;background:var(--surface);border-top:1px solid var(--line);color:var(--muted);padding:5rem 0 2.5rem;font-size:.875rem;line-height:1.75}
.site-footer a{color:var(--muted);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:var(--charcoal)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.footer-top img{width:10rem;margin-bottom:1.25rem}
.footer-top h2{font-size:.875rem;font-weight:600;color:var(--charcoal);letter-spacing:.06em;margin-bottom:1rem}
.footer-top ul{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.footer-tag{color:var(--charcoal);font-weight:500;margin-bottom:1rem}
.footer-top p{max-width:20rem}
.site-footer a.footer-phone{font-size:1.25rem;font-weight:600;color:var(--charcoal);font-variant-numeric:tabular-nums}
.footer-legal{padding-top:2rem;border-top:1px solid var(--line);display:grid;gap:.25rem;font-size:.8125rem;color:rgb(45 45 45 / 70%)}
.footer-legal .links{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:.5rem}
.footer-legal .links a{color:var(--charcoal);font-weight:500}
@media (max-width:64rem){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.footer-top{grid-template-columns:1fr;gap:2.25rem}}

/* 스크롤 등장: 템플릿 sn-reveal(24px, 0.6초). 장식 요소에만 씁니다 */
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
  .js .reveal.in{opacity:1;transform:none}
}

/* 가로 띠: 글 + 버튼, 모바일에서는 세로로 */
.band{display:grid;grid-template-columns:1fr auto;gap:1.5rem 2rem;align-items:center}
.card.band{padding:clamp(1.75rem,4vw,2.75rem)}
@media (max-width:56rem){.band{grid-template-columns:1fr}}

/* 고정 헤더·하단 전화 바가 초점과 앵커를 가리지 않도록 */
html{scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (max-width:56rem){html{scroll-padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom) + 1rem)}}

/* 외부 사이트 링크 표시 */
a.textlink[href^="http"]::after{content:"↗"}

/* 태블릿: 카드 목록은 2열 유지, 사진 높이 제한 */
@media (min-width:40rem) and (max-width:56rem){
  .cards,.cards.four,.brand-list,.contact-grid,.posts{grid-template-columns:repeat(2,1fr)}
  .split-media img{max-height:24rem}
}

/* 모바일 표: 행을 카드처럼 세로로 */
@media (max-width:40rem){
  .table-wrap.stack{border:0;background:none;overflow:visible;box-shadow:none}
  .table-wrap.stack table,.table-wrap.stack tbody,.table-wrap.stack tr,.table-wrap.stack td{display:block;width:100%}
  .table-wrap.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap.stack tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:.9rem 1.1rem;margin-bottom:.75rem}
  .table-wrap.stack td{border:0;padding:.3rem 0}
  .table-wrap.stack td::before{content:attr(data-label);display:block;font-size:.8125rem;font-weight:500;color:var(--faint)}
  .table-wrap.rows table,.table-wrap.rows tbody,.table-wrap.rows tr,.table-wrap.rows th,.table-wrap.rows td{display:block;width:100%}
  .table-wrap.rows thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap.rows th{border-bottom:0;padding:.85rem 1.1rem .1rem;white-space:normal}
  .table-wrap.rows td{padding:.1rem 1.1rem .9rem}
  .table-wrap.rows td:first-child:not(:last-child){font-weight:600;color:var(--charcoal);padding:.85rem 1.1rem .1rem}
}

/* ===== 2차 보완: 서브페이지 구성 요소(템플릿 값 재사용) ===== */
/* 서브페이지 첫 화면: 템플릿 첫 화면처럼 글 + 사진 2열 */
.page-hero.split-hero .hero-grid{grid-template-columns:1.05fr .95fr}
.page-hero.split-hero .hero-media img{aspect-ratio:4/3}
.page-hero.split-hero .hero-media.tall img{aspect-ratio:4/5;max-height:34rem}
.page-hero .btns{margin-top:2rem}
@media (max-width:64rem){.page-hero.split-hero .hero-media img{max-height:22rem;aspect-ratio:3/2}}

/* 사진 카드 4열 */
.svc-grid.four{grid-template-columns:repeat(4,1fr);gap:1.5rem}
.svc-grid.four .svc-body{padding:1.5rem}
.svc-grid.four h3{font-size:1.125rem}
@media (max-width:72rem){.svc-grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.svc-grid.four{grid-template-columns:1fr}}
.svc .tag-row{display:flex;gap:.4rem;margin-bottom:.6rem}
.svc .axis-tag{display:inline-block;font-size:.6875rem;font-weight:500;letter-spacing:.1em;padding:.15rem .6rem;border-radius:999px}
.svc .more{display:inline-block;margin-top:1rem;font-size:.9375rem;font-weight:500;color:var(--charcoal)}
.svc .more::after{content:" →"}
a.svc[href^="http"] .more::after{content:" ↗"}
/* 카드 안에 버튼 두 개(긴급 카드) */
div.svc .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
div.svc .actions a{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:999px;font-size:.9375rem;font-weight:500;text-decoration:none}
div.svc .actions a svg{width:1rem;height:1rem}
div.svc .actions .a-call{background:#fff;color:var(--charcoal)}
div.svc .actions .a-more{border:1px solid rgb(255 255 255 / 25%);color:#fff}
div.svc .actions .a-more:hover{border-color:#fff}

/* 단계: 가로 3·5칸 */
.steps.row3{grid-template-columns:repeat(3,1fr)}
.steps.row5{grid-template-columns:repeat(5,1fr)}
.steps.row3 li,.steps.row5 li{grid-template-columns:1fr}
@media (max-width:64rem){.steps.row5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:56rem){.steps.row3{grid-template-columns:1fr}.steps.row3 li{grid-template-columns:3rem 1fr}}
@media (max-width:40rem){.steps.row5{grid-template-columns:1fr}.steps.row5 li{grid-template-columns:3rem 1fr}}

/* 짧은 항목 격자(구성·혜택) */
.mini-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.mini-grid li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:1.25rem 1.35rem;line-height:1.5}
.mini-grid b{display:block;font-weight:600;margin-bottom:.2rem}
.mini-grid span{color:var(--muted);font-size:.9375rem}
@media (max-width:64rem){.mini-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.mini-grid{grid-template-columns:1fr}}

/* 실제 사진 띠 */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.photo-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card)}
@media (max-width:40rem){.photo-strip{grid-template-columns:1fr 1fr}.photo-strip figure:last-child{grid-column:span 2}.photo-strip figure:last-child img{aspect-ratio:16/9}}
.photo-strip figure{margin:0}

/* 사실 목록(교육원 등) */
.facts{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.75rem}
.facts li{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line-2);font-size:1rem;line-height:1.6}
.facts li:last-child{border-bottom:0}
.facts b{font-weight:600;color:var(--charcoal)}
.facts span{color:var(--charcoal-light)}
.panel-split .facts li{border-color:rgb(255 255 255 / 12%)}
.panel-split .facts b{color:#fff}
.panel-split .facts span{color:rgb(255 255 255 / 75%)}
.panel-split p{color:rgb(255 255 255 / 75%)}
.panel-split .eyebrow{background:rgb(255 255 255 / 8%);border-color:rgb(255 255 255 / 12%);color:rgb(255 255 255 / 85%)}
.panel-split .btns{margin-top:2rem}

/* 서브페이지 끝의 짧은 전화 띠 */
.callband{margin-top:clamp(1rem,4vw,3rem)}
.callband-in{background:var(--dark);border-radius:var(--r-xl);padding:clamp(1.75rem,4vw,2.5rem) clamp(1.75rem,5vw,3.5rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.callband-in p{margin:0;color:rgb(255 255 255 / 70%);font-size:.9375rem}
.callband-in b{display:block;color:#fff;font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:600;margin-bottom:.25rem}

/* 위치 카드 2개 */
.places{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:56rem){.places{grid-template-columns:1fr}}
.site-footer .footer-legal{scroll-margin-top:calc(var(--header-h) + 1rem)}
.contact-grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:72rem){.contact-grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.contact-grid.four{grid-template-columns:1fr}}
.contact-card h2{font-size:1rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-bottom:.25rem}
.contact-card.urgent h2{color:var(--beige)}
.contact-card .big.mail{font-size:1.2rem}
.contact-card p{margin:0}
.card .kicker{display:block}

/* 3차: 모바일 정리(GPT 10차 검토) */
@media (max-width:64rem){
  .page-hero.split-hero .hero-grid{grid-template-columns:1fr;gap:2rem}
  .page-hero.split-hero .hero-media.tall img{aspect-ratio:3/2;max-height:22rem}
}
@media (max-width:40rem){
  .hero-media img{aspect-ratio:4/3}
  .svc .svc-img{aspect-ratio:16/9}
  .svc .svc-body{padding:1.5rem}
  .mini-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .mini-grid li{padding:.9rem 1rem}
  .mini-grid span{font-size:.875rem}
  .steps.row li,.steps.row5 li,.steps.row3 li{padding:1rem 1.1rem;grid-template-columns:2.5rem 1fr}
  .steps li::before{width:2rem;height:2rem;font-size:.85rem}
  .checks{gap:1.1rem}
  .checks li{font-size:1rem}
  .panel-split .media{min-height:14rem}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .footer-top > div:first-child{grid-column:1 / -1}
  .section{padding:3.5rem 0}
}