/* ==========================================================================
   Jachiyeon Lab — Design tokens
   ========================================================================== */
:root{
	--ink:#1C1B1A;
	--graphite:#33312E;
	--warm-gray:#6B6560;
	--stone:#A8A29B;
	--light-gray:#E8E4DE;
	--off-white:#F7F5F1;
	--white:#FFFFFF;
	--gold:#B08D57;
	--gold-soft:#CBAE83;

	--font:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;

	--container:1160px;
	--radius-sm:4px;
	--radius-md:10px;
	--radius-lg:22px;
	--ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
	margin:0;
	font-family:var(--font);
	color:var(--graphite);
	background:var(--off-white);
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
	letter-spacing:-0.01em;
	word-break:keep-all;
	overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure{margin:0}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
input,select,textarea{font:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--off-white);padding:12px 20px;z-index:200}
.skip-link:focus{left:12px;top:12px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}

h1,h2,h3{font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
h2{font-size:clamp(24px,3.4vw,34px);line-height:1.35}
h3{font-size:clamp(18px,2.2vw,21px);line-height:1.5}

.eyebrow{
	display:inline-flex;align-items:center;gap:8px;
	font-size:13px;font-weight:600;letter-spacing:.14em;
	color:var(--gold);text-transform:uppercase;margin-bottom:14px;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--gold)}

.lede{font-size:clamp(16px,1.8vw,19px);color:var(--warm-gray);line-height:1.75;max-width:640px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:15px 30px;border-radius:999px;font-size:15px;font-weight:600;
	transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
	white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--off-white)}
.btn-primary:hover{transform:translateY(-2px);background:var(--graphite)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--stone)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-lg{padding:18px 38px;font-size:16px}
.btn-block{width:100%}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
	position:sticky;top:0;z-index:100;
	background:rgba(247,245,241,.92);backdrop-filter:blur(8px);
	border-bottom:1px solid var(--light-gray);
}
.header-inner{display:flex;align-items:center;gap:32px;height:76px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand-mark{border-radius:6px}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}

.primary-nav > ul{display:flex;align-items:center;gap:30px}
.primary-nav a{font-size:15px;font-weight:500;color:var(--graphite);padding:6px 0;position:relative}
.primary-nav > ul > li > a::after{
	content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);
	transition:width .25s var(--ease);
}
.primary-nav > ul > li > a:hover::after{width:100%}
.has-dropdown{position:relative}
.dropdown{
	position:absolute;top:calc(100% + 14px);left:-16px;width:260px;
	background:var(--white);border:1px solid var(--light-gray);border-radius:var(--radius-md);
	padding:16px;box-shadow:0 18px 40px -12px rgba(28,27,26,.18);
	opacity:0;visibility:hidden;transform:translateY(6px);
	transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-head{padding:2px 10px 14px;border-bottom:1px solid var(--light-gray);margin-bottom:8px}
.dropdown-eyebrow{display:block;font-size:11px;letter-spacing:.08em;color:var(--gold);font-weight:700;text-transform:uppercase;margin-bottom:6px}
.dropdown-desc{font-size:13px;color:var(--warm-gray);line-height:1.6;margin:0}
.dropdown-links li a{display:block;padding:10px 10px;border-radius:var(--radius-sm);font-size:14px}
.dropdown-links li a:hover{background:var(--off-white);color:var(--gold)}
.dropdown-more{
	display:block;margin-top:6px;padding:10px;border-top:1px solid var(--light-gray);
	font-size:13px;font-weight:600;color:var(--gold);
}
.dropdown-more:hover{color:var(--ink)}

.header-cta{margin-left:8px}
.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.menu-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px}

.mobile-nav{
	display:none;border-top:1px solid var(--light-gray);background:var(--off-white);
	padding:20px 24px 28px;
}
.mobile-nav ul{display:flex;flex-direction:column;gap:2px}
.mobile-nav li a{display:block;padding:12px 4px;font-size:16px;font-weight:500;border-bottom:1px solid var(--light-gray)}
.mobile-nav-heading{padding:14px 4px 4px;font-size:12px;letter-spacing:.1em;color:var(--stone);text-transform:uppercase}
.mobile-nav-cta{margin-top:18px}

@media (max-width:920px){
	.primary-nav,.header-cta{display:none}
	.menu-toggle{display:flex}
	.mobile-nav:not([hidden]){display:block}
}

/* ==========================================================================
   Sections / editorial layout
   ========================================================================== */
.section{padding:88px 0}
.section-tight{padding:56px 0}
.section-alt{background:var(--white)}
.section-ink{background:var(--ink);color:var(--off-white)}
.section-ink h2,.section-ink h3{color:var(--off-white)}
.section-ink .lede{color:var(--stone)}

.section-head{margin-bottom:52px;max-width:720px}
.section-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:52px}

.section-number{
	font-size:clamp(64px,9vw,108px);font-weight:300;line-height:1;color:var(--gold);
	opacity:.4;font-variant-numeric:tabular-nums;
}

.grid-2{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:860px){
	.grid-2{grid-template-columns:1fr;gap:32px}
	.grid-3{grid-template-columns:1fr;gap:24px}
	.grid-4{grid-template-columns:1fr;gap:20px}
}

.divider-list{border-top:1px solid var(--light-gray)}
.divider-list > *{border-bottom:1px solid var(--light-gray);padding:28px 0}
.divider-item{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline}
.divider-item .num{font-size:14px;color:var(--gold);font-weight:600;letter-spacing:.04em}
.divider-item h3{margin-bottom:6px}
.divider-item p{color:var(--warm-gray);font-size:15px;margin:0}
.section-ink .divider-list,.section-ink .divider-list > *{border-color:rgba(247,245,241,.16)}
.section-ink .divider-item p{color:var(--stone)}

.card{
	background:var(--white);border:1px solid var(--light-gray);border-radius:var(--radius-md);
	padding:32px 28px;transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover{transform:translateY(-3px);border-color:var(--gold-soft)}

/* process steps */
.process-list{display:flex;flex-direction:column}
.process-item{
	display:grid;grid-template-columns:100px 1fr;gap:28px;
	padding:34px 0;border-top:1px solid var(--light-gray);
}
.process-item:last-child{border-bottom:1px solid var(--light-gray)}
.process-item .step{font-size:15px;font-weight:600;color:var(--gold);letter-spacing:.06em}
.process-item h3{margin-bottom:8px}
.process-item p{color:var(--warm-gray);font-size:15px;max-width:560px;margin:0}
@media (max-width:640px){
	.process-item{grid-template-columns:1fr;gap:8px}
}

/* NSEO link cards */
.nseo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:920px){.nseo-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.nseo-grid{grid-template-columns:1fr}}
.nseo-card{
	display:block;border:1px solid var(--light-gray);border-radius:var(--radius-md);
	padding:26px 24px;background:var(--white);
	transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.nseo-card:hover{transform:translateY(-3px);border-color:var(--gold)}
.nseo-card .k{font-size:12px;letter-spacing:.1em;color:var(--stone);text-transform:uppercase;margin-bottom:10px;display:block}
.nseo-card h3{margin-bottom:8px;font-size:18px}
.nseo-card p{font-size:14px;color:var(--warm-gray);margin:0}
.nseo-card .arrow{display:inline-block;margin-top:16px;font-size:13px;color:var(--gold);font-weight:600}

/* checklist */
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--light-gray);border-left:1px solid var(--light-gray)}
.checklist li{border-right:1px solid var(--light-gray);border-bottom:1px solid var(--light-gray);padding:22px 24px;font-size:15px;display:flex;gap:12px}
.checklist li::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px}
@media (max-width:640px){.checklist{grid-template-columns:1fr}}

/* FAQ (native details/summary — no JS needed) */
.faq-list{border-top:1px solid var(--light-gray)}
.faq-item{border-bottom:1px solid var(--light-gray)}
.faq-item summary{
	display:flex;justify-content:space-between;align-items:center;gap:20px;
	padding:24px 4px;cursor:pointer;font-weight:600;font-size:16px;color:var(--ink);
	list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;font-weight:300;color:var(--gold);flex:0 0 auto;transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 4px 24px;color:var(--warm-gray);font-size:15px;max-width:760px}

/* breadcrumb */
.breadcrumb{font-size:13px;color:var(--stone);padding:22px 0}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{margin:0 8px}

/* CTA band */
.cta-band{
	background:var(--ink);color:var(--off-white);border-radius:var(--radius-lg);
	padding:64px 48px;text-align:center;
}
.cta-band h2{color:var(--off-white);margin-bottom:14px}
.cta-band p{color:var(--stone);margin-bottom:32px}
.cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta-band .btn-primary,
.cta-strong .btn-primary{background:var(--gold);border:1px solid var(--gold);color:var(--ink);font-weight:700}
.cta-band .btn-primary:hover,
.cta-strong .btn-primary:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.cta-band .btn-ghost,
.cta-strong .btn-ghost{border-color:rgba(247,245,241,.35);color:var(--off-white)}
.cta-band .btn-ghost:hover,
.cta-strong .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.cta-band .btn-kakao,
.cta-strong .btn-kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.cta-band .btn-kakao:hover,
.cta-strong .btn-kakao:hover{background:#e6cf00;border-color:#e6cf00;color:#191600}
@media (max-width:640px){.cta-band{padding:44px 24px}}

/* Contact page central block */
.contact-block{
	max-width:520px;margin:0 auto;background:var(--white);border:2px solid var(--gold);
	border-radius:var(--radius-lg);padding:44px 32px;text-align:center;
}
.contact-block-number{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.contact-block-hours{color:var(--warm-gray);font-size:15px;margin-top:8px;margin-bottom:28px}
.contact-block-actions{display:flex;flex-direction:column;gap:12px}
.contact-block-actions .btn{padding:16px;font-size:16px;font-weight:700}
.btn-contact-tel{background:var(--gold);color:var(--ink)}
.btn-contact-tel:hover{background:var(--gold-soft)}
.btn-contact-sms{background:var(--ink);color:var(--off-white)}
.btn-contact-sms:hover{background:var(--graphite)}
.btn-contact-kakao{background:#FEE500;color:#191600}
.btn-contact-kakao:hover{background:#e6cf00}
.contact-info-cards{display:flex;gap:16px;max-width:820px;margin:36px auto 0}
.contact-info-card{flex:1;background:var(--white);border:1px solid var(--light-gray);border-radius:var(--radius-md);padding:24px;text-align:center}
.contact-info-card h3{font-size:16px;margin-bottom:8px}
.contact-info-card p{color:var(--warm-gray);font-size:14px}
@media (max-width:640px){
	.contact-info-cards{flex-direction:column}
}

/* ==========================================================================
   Hero
   ========================================================================== */
@media (max-width:640px){.br-desktop{display:none}}
.hero{padding:76px 0 88px;border-bottom:1px solid var(--light-gray)}
.hero-h1{font-size:clamp(30px,4.4vw,46px);line-height:1.28;letter-spacing:-0.02em;margin-bottom:26px}
.hero-copy{font-size:clamp(17px,2vw,20px);color:var(--graphite);line-height:1.6;margin-bottom:20px;max-width:620px}
.hero-sub{color:var(--warm-gray);font-size:15px;line-height:1.8;max-width:560px;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.hero-figure{
	border-top:1px solid var(--light-gray);padding-top:40px;
	display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.hero-figure div{padding:0 24px;border-left:1px solid var(--light-gray)}
.hero-figure div:first-child{border-left:none;padding-left:0}
.hero-figure .label{display:block;font-size:13px;color:var(--stone);margin-bottom:8px}
.hero-figure .value{display:block;font-size:15px;color:var(--graphite);font-weight:500;line-height:1.5}
@media (max-width:760px){
	.hero-figure{grid-template-columns:1fr 1fr;row-gap:24px}
	.hero-figure div{border-left:none;padding-left:0;border-top:1px solid var(--light-gray);padding-top:16px}
	.hero-figure div:nth-child(-n+2){border-top:none;padding-top:0}
}

/* ==========================================================================
   Form
   ========================================================================== */
.consult-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media (max-width:920px){.consult-layout{grid-template-columns:1fr}}
.form-panel{background:var(--white);border:1px solid var(--light-gray);border-radius:var(--radius-lg);padding:40px}
@media (max-width:560px){.form-panel{padding:26px}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1 / -1}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.form-field .req{color:var(--gold)}
.form-field input[type=text],
.form-field input[type=tel],
.form-field input[type=email],
.form-field select,
.form-field textarea{
	width:100%;border:1px solid var(--light-gray);border-radius:var(--radius-sm);
	padding:12px 14px;font-size:15px;color:var(--graphite);background:var(--off-white);
	transition:border-color .2s var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--gold)}
.form-field textarea{resize:vertical;min-height:110px}
.form-check-group{display:flex;flex-wrap:wrap;gap:10px 20px}
.form-check{display:flex;align-items:center;gap:8px;font-size:14px}
.form-check input{width:16px;height:16px;accent-color:var(--gold)}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacy-box{
	background:var(--off-white);border:1px solid var(--light-gray);border-radius:var(--radius-sm);
	padding:16px;font-size:13px;color:var(--warm-gray);max-height:130px;overflow-y:auto;line-height:1.7;
}
.form-agree{display:flex;align-items:flex-start;gap:10px;font-size:14px;margin-top:14px}
.form-agree input{margin-top:3px;width:16px;height:16px;accent-color:var(--gold)}
.form-notice{padding:16px 18px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:24px}
.form-notice.success{background:#EEF3EA;color:#4B6146;border:1px solid #C9D9C1}
.form-notice.error{background:#F6EAE7;color:#8A4A3B;border:1px solid #E4C4BB}
.consult-aside .divider-list > *{padding:22px 0}

/* checklist-panel used on contact page (준비 체크) */
.aside-note{font-size:13px;color:var(--stone);margin-top:24px;line-height:1.8}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--stone);padding:64px 0 32px;margin-top:0}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(247,245,241,.12)}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--off-white);font-size:16px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{font-size:14px;color:var(--stone)}
.footer-links a:hover{color:var(--gold-soft)}
.footer-biz{padding:28px 0;font-size:13px;line-height:2;color:var(--stone)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(247,245,241,.12)}
.footer-legal{display:flex;gap:18px}
.footer-legal a{font-size:13px;color:var(--stone)}
.footer-legal a:hover{color:var(--gold-soft)}
.footer-copyright{font-size:12px;color:#75726D}
.footer-disclaimer{font-size:12px;color:#75726D;margin-top:20px;line-height:1.8;max-width:760px}

/* ==========================================================================
   Floating CTA — 전화 / 문자 / (선택) 카카오
   ========================================================================== */
.contact-float{position:fixed;right:24px;bottom:28px;z-index:90;display:flex;flex-direction:column;gap:12px}
.contact-float a{
	position:relative;width:52px;height:52px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--ink);color:var(--off-white);
	box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
	transition:transform .2s var(--ease),background .2s var(--ease);
}
.contact-float a:hover{transform:translateY(-3px);background:var(--graphite)}
.contact-float a.contact-float-kakao{background:#FEE500;color:#1C1B1A}
.contact-float a .tip{
	position:absolute;right:64px;top:50%;transform:translateY(-50%);
	background:var(--ink);color:var(--off-white);font-size:12px;padding:6px 12px;border-radius:6px;
	white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
}
.contact-float a:hover .tip{opacity:1}

.mobile-cta-bar{display:none}
@media (max-width:760px){
	.contact-float{right:14px;bottom:112px;gap:8px}
	.contact-float a{width:46px;height:46px}
	.contact-float a .tip{display:none}
	.mobile-cta-bar{
		display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;height:56px;
		background:var(--white);border-top:1px solid var(--light-gray);
		padding-bottom:env(safe-area-inset-bottom);
	}
	.mobile-cta-btn{
		flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
		font-size:11px;font-weight:600;color:var(--ink);background:var(--ink);
	}
	.mobile-cta-tel{background:var(--gold);color:var(--ink)}
	.mobile-cta-sms{background:var(--ink);color:var(--off-white)}
	.mobile-cta-kakao{background:#FEE500;color:#191600}
	.site-footer{padding-bottom:56px}
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
	.reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   Page header (NSEO / utility pages)
   ========================================================================== */
.page-hero{padding:16px 0 64px}
.page-h1{font-size:clamp(28px,4vw,40px);margin-bottom:18px}
.page-lede{color:var(--warm-gray);font-size:17px;max-width:640px;line-height:1.75}

.prose h2{margin-top:0;margin-bottom:20px}
.prose p{color:var(--graphite);font-size:16px;margin:0 0 16px}
.prose ul{margin:0 0 16px;padding-left:0}
.prose ul li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--graphite);font-size:15px}
.prose ul li::before{content:'';position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--gold)}

.note-box{
	border-left:2px solid var(--gold);background:var(--white);
	padding:22px 26px;font-size:16px;color:var(--warm-gray);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
	margin:28px 0 32px;line-height:1.8;
}

.related-links{display:flex;flex-wrap:wrap;gap:12px}
.related-links a{
	border:1px solid var(--light-gray);border-radius:999px;padding:10px 20px;font-size:14px;
	transition:border-color .2s var(--ease),color .2s var(--ease);
}
.related-links a:hover{border-color:var(--gold);color:var(--gold)}

/* 세부페이지(template-article.php) 하단 관련 페이지 — 도식 카드형 */
.related-cards{display:flex;flex-direction:column;gap:10px}
.related-card{
	display:flex;align-items:center;gap:16px;padding:14px 18px;
	border:1px solid var(--light-gray);border-radius:var(--radius-md);
	transition:border-color .2s var(--ease),background .2s var(--ease);
}
.related-card:hover{border-color:var(--gold);background:var(--white)}
.related-card-icon{flex:0 0 auto;width:56px;height:44px;display:block}
.related-card-icon svg{width:100%;height:100%;display:block}
.related-card-body{flex:1 1 auto;min-width:0}
.related-card-title{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.related-card-desc{display:block;font-size:13px;color:var(--warm-gray);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.related-card-arrow{flex:0 0 auto;color:var(--stone);font-size:18px;transition:color .2s var(--ease),transform .2s var(--ease)}
.related-card:hover .related-card-arrow{color:var(--gold);transform:translateX(3px)}

/* ==========================================================================
   Info table — NSEO 본문 내 비교/요약 표
   ========================================================================== */
.table-scroll{overflow-x:auto;margin:8px 0 32px;-webkit-overflow-scrolling:touch}
.info-table{width:100%;border-collapse:collapse;min-width:480px}
.info-table th{
	text-align:left;padding:12px 16px;font-size:12px;letter-spacing:.06em;color:var(--stone);
	text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--ink);white-space:nowrap;
}
.info-table td{padding:16px;font-size:15px;color:var(--graphite);border-bottom:1px solid var(--light-gray);vertical-align:top}
.info-table tr:last-child td{border-bottom:none}
.info-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}

/* ==========================================================================
   Section background rhythm helpers
   ========================================================================== */
.section-stone{background:var(--light-gray)}
.section-warm{background:#EDE7DD}

/* ==========================================================================
   HERO v2 — split layout + diagnostic card
   ========================================================================== */
.hero-v2{padding:64px 0 96px}
.hero-v2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-v2-statement{
	font-size:clamp(26px,3.2vw,38px);font-weight:600;line-height:1.4;
	letter-spacing:-0.02em;color:var(--ink);margin:22px 0 20px;
}
@media (max-width:920px){
	.hero-v2-grid{grid-template-columns:1fr;gap:40px}
}

.hero-diagnostic{
	background:var(--ink);border-radius:var(--radius-lg);
	padding:36px 32px;color:var(--off-white);
}
@media (max-width:560px){.hero-diagnostic{padding:28px 22px}}
.diag-title{font-size:16px;font-weight:700;margin-bottom:26px;color:var(--off-white)}
.diag-group{margin-bottom:22px}
.diag-group-label{font-size:12px;letter-spacing:.06em;color:var(--stone);margin-bottom:10px;display:block}
.diag-options{display:flex;flex-wrap:wrap;gap:8px}
.diag-pill{position:relative;display:inline-flex}
.diag-pill input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.diag-pill label{
	display:inline-flex;padding:10px 16px;border:1px solid rgba(247,245,241,.22);border-radius:999px;
	font-size:13px;color:var(--stone);cursor:pointer;transition:all .2s var(--ease);
}
.diag-pill input:checked + label{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700}
.diag-pill input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
.diag-hint{font-size:12px;color:var(--stone);margin:2px 0 10px}
.diag-actions{display:flex;gap:10px;margin-top:10px}
.diag-actions .btn{flex:1;padding:14px 16px;font-size:14px;border:1px solid transparent}
.diag-actions .btn-ghost{border-color:rgba(247,245,241,.3);color:var(--off-white)}
.diag-actions .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.diag-actions .btn-primary{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700}
.diag-actions .btn-primary:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
@media (max-width:480px){.diag-actions{flex-direction:column}}

/* ==========================================================================
   Statement section — one strong sentence
   ========================================================================== */
.statement-section{padding:130px 0;text-align:center}
.statement-text{
	font-size:clamp(30px,5vw,54px);font-weight:700;line-height:1.45;letter-spacing:-0.02em;
	color:var(--off-white);max-width:820px;margin:18px auto 28px;
}
.statement-sub{color:var(--stone);font-size:16px;max-width:520px;margin:0 auto;line-height:1.8}
@media (max-width:640px){.statement-section{padding:88px 0}}

/* ==========================================================================
   Situation cards — asymmetric editorial grid
   ========================================================================== */
.situation-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:200px 200px;gap:20px}
.situation-card{
	position:relative;display:flex;flex-direction:column;justify-content:flex-end;
	padding:28px;border:1px solid var(--light-gray);border-radius:var(--radius-md);
	background:var(--white);overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.situation-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.situation-k{font-size:11px;letter-spacing:.12em;color:var(--stone);text-transform:uppercase;margin-bottom:auto}
.situation-card h3{font-size:22px;margin:16px 0 8px;color:var(--ink)}
.situation-card p{color:var(--warm-gray);font-size:14px;margin:0}
.situation-arrow{position:absolute;top:24px;right:24px;color:var(--gold);font-size:18px;opacity:0;transition:opacity .25s var(--ease)}
.situation-card:hover .situation-arrow{opacity:1}
.situation-card--a{grid-column:1 / 3;grid-row:1 / 2}
.situation-card--b{grid-column:3 / 5;grid-row:1 / 3;background:var(--ink);border-color:var(--ink)}
.situation-card--b h3,.situation-card--b p{color:var(--off-white)}
.situation-card--b .situation-k{color:var(--gold)}
.situation-card--b p{color:var(--stone)}
.situation-card--c{grid-column:1 / 2;grid-row:2 / 3}
.situation-card--d{grid-column:2 / 3;grid-row:2 / 3}
@media (max-width:760px){
	.situation-grid{grid-template-columns:1fr;grid-template-rows:none;gap:16px}
	.situation-card,.situation-card--a,.situation-card--b,.situation-card--c,.situation-card--d{grid-column:1;grid-row:auto;min-height:160px}
}

/* ==========================================================================
   Fund map — hub & spoke diagram
   ========================================================================== */
.fundmap{max-width:560px;margin:0 auto}
.fundmap-svg{width:100%;height:auto;overflow:visible}
.map-line{stroke:var(--stone);stroke-width:1;opacity:.4}
.map-node{cursor:pointer}
.map-node circle{fill:var(--white);stroke:var(--gold);stroke-width:1.5;transition:fill .25s var(--ease)}
.map-node text{font-size:16px;font-weight:600;fill:var(--ink);font-family:var(--font)}
.map-node .map-desc{font-size:11px;fill:var(--warm-gray);opacity:0;transition:opacity .2s var(--ease)}
.map-node:hover circle,.map-node:focus circle{fill:var(--gold)}
.map-node:hover .map-desc,.map-node:focus .map-desc{opacity:1}
.map-node:focus{outline:none}
.map-center circle{fill:var(--ink)}
.map-center text{fill:var(--off-white);font-size:17px;font-weight:700}
.fundmap-mobile{display:none}
@media (max-width:640px){
	.fundmap-svg{display:none}
	.fundmap-mobile{display:grid;grid-template-columns:1fr 1fr;gap:12px}
	.fundmap-mobile li{border:1px solid var(--light-gray);border-radius:var(--radius-sm);padding:16px;background:var(--white)}
	.fundmap-mobile strong{display:block;margin-bottom:4px;color:var(--ink);font-size:15px}
	.fundmap-mobile span{font-size:13px;color:var(--warm-gray)}
}

/* ==========================================================================
   Vertical timeline — big numbers + drawing line
   ========================================================================== */
.v-timeline{position:relative;padding-left:112px}
.v-timeline-line{position:absolute;left:95px;top:8px;bottom:8px;width:1px;background:rgba(247,245,241,.16);overflow:hidden}
.v-timeline-line::after{content:'';position:absolute;left:0;top:0;width:100%;height:0;background:var(--gold);transition:height 1.4s var(--ease)}
.v-timeline.in-view .v-timeline-line::after{height:100%}
.v-timeline-item{position:relative;padding-bottom:56px}
.v-timeline-item:last-child{padding-bottom:0}
.v-timeline-num{
	position:absolute;left:-112px;top:-8px;width:80px;text-align:left;white-space:nowrap;
	font-size:48px;font-weight:300;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1;
}
.v-timeline-item h3{color:var(--off-white);margin-bottom:8px;font-size:19px}
.v-timeline-item p{color:var(--stone);font-size:15px;margin:0;max-width:520px}
@media (max-width:640px){
	.v-timeline{padding-left:76px}
	.v-timeline-line{left:64px}
	.v-timeline-num{left:-76px;font-size:30px;width:60px}
}

/* ==========================================================================
   Founder section
   ========================================================================== */
.founder-grid{display:grid;grid-template-columns:.4fr .6fr;gap:56px;align-items:center}
.founder-media{max-width:320px}
.founder-avatar{border-radius:50%;display:block;width:100%;height:auto}
.founder-copy h2{margin:18px 0 20px}
.founder-quote{color:var(--warm-gray);font-size:16px;line-height:1.85;margin-bottom:26px;max-width:520px}
.founder-name strong{display:block;font-size:16px;color:var(--ink)}
.founder-name span{font-size:13px;color:var(--stone)}
@media (max-width:760px){
	.founder-grid{grid-template-columns:1fr;text-align:left}
	.founder-media{max-width:220px;margin:0 auto}
}

/* ==========================================================================
   Compare flow — 흔한 방식 vs 자금치유연구소 방식
   ========================================================================== */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare-col{padding:32px;border-radius:var(--radius-md);border:1px solid var(--light-gray);background:var(--white)}
.compare-label{font-size:13px;color:var(--stone);margin-bottom:20px;font-weight:700}
.compare-flow{display:flex;flex-direction:column}
.compare-step{padding:14px 4px;font-size:15px;color:var(--warm-gray);text-align:center}
.compare-step::after{content:'↓';display:block;text-align:center;color:var(--stone);font-size:12px;margin-top:8px}
.compare-step:last-child::after{content:none}
.compare-col--ours{background:var(--ink);border-color:var(--ink)}
.compare-col--ours .compare-label{color:var(--gold)}
.compare-col--ours .compare-step{color:var(--off-white)}
.compare-col--ours .compare-step::after{color:var(--gold)}
@media (max-width:760px){.compare-grid{grid-template-columns:1fr}}

/* ==========================================================================
   NSEO rows — big number list (replaces card grid on homepage)
   ========================================================================== */
.nseo-rows{border-top:1px solid var(--light-gray)}
.nseo-row{
	display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:24px;
	padding:28px 4px;border-bottom:1px solid var(--light-gray);
	transition:padding-left .25s var(--ease),background .25s var(--ease);
}
.nseo-row:hover{padding-left:14px;background:var(--white)}
.nseo-row-num{font-size:34px;font-weight:300;color:var(--gold);font-variant-numeric:tabular-nums}
.nseo-row-title{display:block;font-size:19px;font-weight:600;color:var(--ink);margin-bottom:4px}
.nseo-row-desc{display:block;font-size:14px;color:var(--warm-gray)}
.nseo-row-arrow{font-size:13px;color:var(--gold);font-weight:600;white-space:nowrap}
@media (max-width:640px){
	.nseo-row{grid-template-columns:40px 1fr;row-gap:6px}
	.nseo-row-arrow{grid-column:2;justify-self:start}
	.nseo-row-num{font-size:26px}
}

/* ==========================================================================
   Strong CTA band (bigger variant of .cta-band)
   ========================================================================== */
.cta-strong{background:var(--ink);color:var(--off-white);border-radius:var(--radius-lg);padding:96px 48px;text-align:center}
.cta-strong h2{color:var(--off-white);font-size:clamp(26px,3.6vw,40px);margin:16px 0 36px;line-height:1.45}
@media (max-width:640px){.cta-strong{padding:56px 24px}}

/* ==========================================================================
   Form step grouping + pill-style range select (light bg variant)
   ========================================================================== */
.form-step{margin-bottom:32px}
.form-step:last-child{margin-bottom:0}
.form-step-label{
	display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.1em;
	color:var(--gold);font-weight:700;text-transform:uppercase;margin-bottom:18px;
}
.form-step-label::after{content:'';flex:1;height:1px;background:var(--light-gray)}
.pill-group{display:flex;flex-wrap:wrap;gap:8px}
.pill-option{position:relative;display:inline-flex}
.pill-option input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill-option label{
	display:inline-flex;padding:10px 16px;border:1px solid var(--light-gray);border-radius:999px;
	font-size:13px;color:var(--graphite);cursor:pointer;background:var(--off-white);transition:all .2s var(--ease);
}
.pill-option input:checked + label{background:var(--ink);border-color:var(--ink);color:var(--off-white);font-weight:700}
.pill-option input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}