:root { --navy:#1c3147; --ink:#111315; --copper:#b7663f; --ivory:#f6f1ea; --paper:#fffdf9; --mist:#eef2f1; --muted:#5d6871; --line:#ded4c8; --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ivory); font:15px/1.75 var(--font); }
a { color:inherit; text-decoration:none; } button,input,select { font:inherit; }
.topline { min-height:35px; padding:8px max(24px,calc((100vw - 1240px)/2)); display:flex; justify-content:space-between; align-items:center; gap:18px; color:#dce5e7; background:var(--navy); font:500 9px/1.25 "DM Mono",monospace; letter-spacing:.12em; }.topline a { color:#fff; font-size:11px; }
.site-header { min-height:86px; padding:0 max(24px,calc((100vw - 1240px)/2)); display:flex; align-items:center; gap:24px; background:rgba(255,253,249,.96); border-bottom:1px solid #e7ddd1; }.brand { display:flex; align-items:center; gap:13px; min-width:368px; }.brand img { width:218px; height:auto; }.brand span { padding-left:13px; border-left:1px solid var(--line); }.brand b,.brand small { display:block; }.brand b { font-size:10px; letter-spacing:.075em; }.brand small { margin-top:3px; color:#778088; font:500 7px "DM Mono",monospace; letter-spacing:.11em; }.site-header nav { display:flex; gap:25px; margin-left:auto; }.site-header nav a { font-size:12px; font-weight:800; }.site-header nav a:hover { color:var(--copper); }.header-phone { color:var(--navy); font-size:13px; font-weight:800; text-decoration:underline; text-decoration-color:var(--copper); text-underline-offset:5px; }
.hero,.tools-section,.how-section,.guide-section,.faq-section,.contact-section { padding-left:max(24px,calc((100vw - 1240px)/2)); padding-right:max(24px,calc((100vw - 1240px)/2)); }.hero { position:relative; overflow:hidden; padding-top:93px; padding-bottom:86px; background:linear-gradient(118deg,#f0e9df 0%,#faf7f2 55%,#e9efee 100%); }.hero:after { content:""; position:absolute; width:430px; height:430px; right:-120px; top:-180px; border:1px solid rgba(28,49,71,.16); border-radius:50%; box-shadow:0 0 0 52px rgba(183,102,63,.045),0 0 0 106px rgba(28,49,71,.025); }.hero>* { position:relative; z-index:1; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 17px; color:var(--copper); font:500 10px/1.4 "DM Mono",monospace; letter-spacing:.15em; text-transform:uppercase; }.eyebrow span { width:25px; height:1px; background:currentColor; }.hero h1,.section-heading h2,.how-section h2,.guide-section h2,.faq-section h2,.contact-section h2 { max-width:810px; margin:0; color:var(--navy); font-size:clamp(44px,5.4vw,76px); font-weight:700; letter-spacing:-.065em; line-height:1.04; }.hero h1 em,.section-heading h2 em,.how-section h2 em,.guide-section h2 em,.contact-section h2 em { color:var(--copper); font-family:"DM Serif Display","Noto Sans KR",serif; font-weight:400; }.hero>p:not(.eyebrow) { max-width:600px; margin:26px 0; color:#52606a; font-size:16px; }.hero-actions { display:flex; align-items:center; gap:24px; }.button { display:inline-flex; justify-content:center; align-items:center; gap:12px; padding:15px 20px; border:1px solid var(--navy); color:#fff; background:var(--navy); font-size:12px; font-weight:800; transition:.2s ease; }.button:hover { border-color:var(--copper); background:var(--copper); transform:translateY(-2px); }.button span { font-size:17px; font-weight:400; }.text-link { padding-bottom:3px; border-bottom:1px solid currentColor; color:var(--navy); font-size:12px; font-weight:800; }.hero-notes { display:flex; flex-wrap:wrap; gap:8px; margin-top:43px; }.hero-notes span { padding:6px 10px; border:1px solid #d8cec1; color:#59646b; background:rgba(255,253,249,.64); font-size:10px; font-weight:700; }
.jump-links { max-width:1240px; margin:0 auto; padding:18px 24px; display:flex; flex-wrap:wrap; gap:8px; background:#fbf8f3; border-bottom:1px solid var(--line); }.jump-links a { padding:7px 11px; border:1px solid #ded5ca; color:var(--navy); background:var(--paper); font-size:11px; font-weight:700; }.jump-links a:hover { color:var(--copper); border-color:var(--copper); }
.tools-section { padding-top:96px; padding-bottom:96px; background:#f5f0e9; }.section-heading { display:grid; grid-template-columns:1fr .72fr; gap:55px; align-items:end; margin-bottom:43px; }.section-heading h2 { font-size:clamp(39px,4.2vw,58px); }.section-heading>p { max-width:430px; margin:0 0 3px; color:var(--muted); font-size:14px; }.calculator-shell { overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--paper); box-shadow:0 16px 42px rgba(17,19,21,.07); }.calculator-tabs { display:flex; overflow-x:auto; border-bottom:1px solid var(--line); background:#faf6f0; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }.calc-tab { flex:0 0 auto; min-height:51px; padding:14px 15px; border:0; border-bottom:2px solid transparent; color:#54616a; background:transparent; cursor:pointer; font-size:11px; font-weight:800; white-space:nowrap; }.calc-tab:hover,.calc-tab.active { border-bottom-color:var(--copper); color:var(--navy); background:#f6ede7; }.calculator-body { min-height:378px; padding:37px; display:grid; grid-template-columns:1.08fr .92fr; gap:46px; }.calc-title { margin:0 0 7px; color:var(--navy); font-size:26px; letter-spacing:-.045em; line-height:1.2; }.calc-subtitle { max-width:570px; margin:0 0 24px; color:#637078; font-size:12px; }.input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.input-field { display:block; min-width:0; }.input-field label { display:block; min-height:28px; margin:0 0 6px; color:#4d5960; font-size:10px; font-weight:800; line-height:1.35; }.input-wrap { height:44px; display:flex; align-items:center; border:1px solid #d9d0c5; background:#fff; }.input-wrap:focus-within { border-color:var(--copper); box-shadow:0 0 0 3px rgba(183,102,63,.12); }.input-wrap span { padding-left:11px; color:#6f7b81; font-size:12px; }.input-wrap input,.input-wrap select { width:100%; min-width:0; height:100%; padding:0 10px; border:0; outline:0; color:var(--navy); background:transparent; font-size:13px; font-weight:800; }.calc-actions { display:flex; align-items:center; gap:13px; margin-top:22px; }.calc-actions .button { padding:12px 17px; }.reset { padding:0; border:0; color:#66727a; background:none; cursor:pointer; font-size:11px; text-decoration:underline; }.calculator-result { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:28px 29px; color:#fff; background:var(--navy); border-radius:7px; }.calculator-result:after { content:""; position:absolute; width:240px; height:240px; right:-92px; top:-90px; border:1px solid rgba(255,255,255,.15); border-radius:50%; }.result-eyebrow,.result-main,.result-sub,.result-metrics { position:relative; z-index:1; }.result-eyebrow { margin:0 0 7px; color:#ddb79f; font:500 9px "DM Mono",monospace; letter-spacing:.12em; }.result-main { margin:0; color:#fff; font-size:clamp(31px,3.6vw,43px); font-weight:800; letter-spacing:-.055em; line-height:1.08; }.result-sub { max-width:340px; margin:11px 0 22px; color:#d4dfe2; font-size:11px; line-height:1.7; }.result-metrics { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.result-metrics div { padding-top:9px; border-top:1px solid rgba(255,255,255,.18); }.result-metrics span { display:block; color:#adc2c7; font-size:9px; line-height:1.4; }.result-metrics strong { display:block; margin-top:2px; color:#fff; font-size:13px; overflow-wrap:anywhere; }.disclaimer { margin:0; padding:0 37px 26px; color:#69747a; font-size:10px; line-height:1.7; }
.how-section { padding-top:96px; padding-bottom:96px; display:grid; grid-template-columns:.82fr 1.18fr; gap:105px; align-items:center; background:#fbf8f3; }.how-section h2 { font-size:clamp(37px,4vw,53px); }.how-section ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.how-section li { display:grid; grid-template-columns:58px 1fr; gap:19px; padding:21px 0; border-bottom:1px solid var(--line); }.how-section li>span,.guide-grid span { color:var(--copper); font:500 11px "DM Mono",monospace; }.how-section h3 { margin:0 0 4px; color:var(--navy); font-size:19px; letter-spacing:-.03em; }.how-section li p { margin:0; color:var(--muted); font-size:12px; }
.guide-section { padding-top:96px; padding-bottom:96px; background:#f1ebe3; }.guide-intro { display:grid; grid-template-columns:1fr .72fr; gap:55px; align-items:end; margin-bottom:40px; }.guide-intro h2 { font-size:clamp(37px,4vw,53px); }.guide-intro>p:last-child { max-width:405px; margin:0 0 5px; color:var(--muted); font-size:14px; }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.guide-grid article { min-height:220px; padding:23px; border:1px solid #e0d7cb; background:var(--paper); }.guide-grid h3 { margin:21px 0 9px; color:var(--navy); font-size:19px; letter-spacing:-.035em; line-height:1.3; }.guide-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.faq-section { padding-top:90px; padding-bottom:96px; background:#fbf8f3; }.faq-section h2 { margin-bottom:32px; font-size:clamp(37px,4vw,53px); }.faq-section details { max-width:970px; padding:20px 0; border-top:1px solid var(--line); }.faq-section details:last-child { border-bottom:1px solid var(--line); }.faq-section summary { color:var(--navy); cursor:pointer; font-size:16px; font-weight:800; }.faq-section details p { max-width:750px; margin:12px 0 0; color:var(--muted); font-size:13px; }.contact-section { padding-top:88px; padding-bottom:88px; display:grid; grid-template-columns:1fr .8fr; gap:90px; align-items:center; background:#efe7de; }.contact-section h2 { font-size:clamp(37px,4vw,54px); }.contact-section>div>p:not(.eyebrow) { max-width:540px; margin:20px 0 0; color:var(--muted); }.contact-card { padding:27px; border-top:4px solid var(--copper); background:var(--paper); }.contact-card>span { display:block; color:#747f84; font:500 9px "DM Mono",monospace; letter-spacing:.09em; }.contact-card>a:not(.button) { display:block; padding:14px 0; border-bottom:1px solid var(--line); color:var(--navy); font-size:19px; font-weight:800; }.contact-card .button { width:100%; margin-top:23px; }
footer { padding:35px max(24px,calc((100vw - 1240px)/2)); display:grid; grid-template-columns:.85fr 1fr .95fr; gap:35px; align-items:center; color:#d9e2e4; background:var(--navy); font-size:11px; line-height:1.75; border-top:4px solid var(--copper); } footer img { width:245px; max-width:100%; height:auto; } footer strong { color:#fff; } footer p { margin:3px 0 0; }
@media (max-width:960px) { .site-header nav { display:none; }.brand { min-width:0; }.header-phone { margin-left:auto; }.section-heading,.guide-intro,.how-section,.contact-section { grid-template-columns:1fr; gap:31px; }.calculator-body { grid-template-columns:1fr; gap:22px; }.calculator-result { min-height:300px; }.guide-grid { grid-template-columns:repeat(2,1fr); }.how-section { gap:38px; } footer { grid-template-columns:1fr 1fr; }.site-header { min-height:74px; } }
@media (max-width:620px) { html,body { overflow-x:hidden; } .topline { min-height:39px; padding:8px 18px; font-size:7px; letter-spacing:.06em; }.topline a { font-size:10px; white-space:nowrap; }.site-header { padding:0 18px; }.brand img { width:182px; }.brand span { display:none; }.header-phone { font-size:11px; }.hero,.tools-section,.how-section,.guide-section,.faq-section,.contact-section { padding-left:21px; padding-right:21px; }.hero { padding-top:64px; padding-bottom:60px; }.hero h1 { font-size:clamp(39px,12vw,50px); }.hero>p:not(.eyebrow) { font-size:14px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:17px; }.hero-notes { margin-top:31px; }.jump-links { padding:14px 21px; }.section-heading { margin-bottom:28px; }.section-heading>p,.guide-intro>p:last-child { font-size:13px; }.calculator-tabs { margin:0 -1px; }.calc-tab { min-height:47px; padding:12px; font-size:10px; }.calculator-body { min-height:0; padding:22px 17px; }.calc-title { font-size:23px; }.calc-subtitle { margin-bottom:18px; }.input-grid { gap:10px; }.input-field label { min-height:0; }.calculator-result { min-height:250px; padding:24px 21px; }.result-main { font-size:34px; }.disclaimer { padding:0 17px 20px; }.how-section,.guide-section,.faq-section,.contact-section { padding-top:65px; padding-bottom:65px; }.how-section li { grid-template-columns:43px 1fr; gap:12px; }.how-section h3 { font-size:18px; }.guide-grid { grid-template-columns:1fr; gap:9px; }.guide-grid article { min-height:0; padding:21px; }.guide-grid h3 { margin-top:14px; }.contact-section { gap:34px; }.contact-card { padding:22px; } footer { padding:30px 21px; grid-template-columns:1fr; gap:18px; } }
@media (max-width:410px) { .input-grid { grid-template-columns:1fr; }.header-phone { display:none; }.topline>span { max-width:230px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Shared site chrome: calculator hub uses the same header and footer as the main site. */
.topline { height:34px; min-height:34px; padding:0 max(28px,calc((100vw - 1280px)/2)); background:var(--ink); color:#f5f2ed; font:500 9px/1.2 var(--font); letter-spacing:.06em; text-transform:uppercase; }
.topline p { margin:0; display:flex; align-items:center; min-width:0; }.topline a { color:#fff; font-size:11px; font-weight:800; letter-spacing:.03em; }.signal { width:7px; height:7px; flex:0 0 7px; display:inline-block; margin:0 8px 1px 0; border-radius:50%; background:var(--copper); }
.site-header { height:82px; min-height:82px; padding:0 max(28px,calc((100vw - 1280px)/2)); gap:26px; position:relative; z-index:3; background:#fcfaf6; border-bottom:1px solid #e6ddd1; }
.brand { gap:13px; min-width:388px; }.brand img,.brand-logo { display:block; width:214px; height:auto; }.brand-identity,.brand span { padding-left:13px; border-left:1px solid #dbe5e9; }.brand-identity b,.brand b { color:var(--ink); font-size:10px; font-weight:800; letter-spacing:.075em; line-height:1.15; }.brand-identity small,.brand small { margin-top:3px; color:var(--navy); font:500 7px/1.4 var(--font); letter-spacing:.11em; }
.site-header nav { gap:27px; }.site-header nav a { color:var(--navy); font-size:11px; font-weight:700; letter-spacing:.02em; position:relative; }.site-header nav a::after { content:""; position:absolute; bottom:-9px; left:0; width:0; height:1px; background:var(--copper); transition:width .2s ease; }.site-header nav a:hover::after { width:100%; }
.header-actions { display:flex; align-items:center; gap:12px; margin-left:0; }.language-toggle { padding:8px; border:0; color:var(--navy); background:transparent; cursor:pointer; font:800 10px var(--font); letter-spacing:.04em; }.button-small { padding:12px 15px; font-size:10px; }
.hero h1 em,.section-heading h2 em,.how-section h2 em,.guide-section h2 em,.contact-section h2 em { font-family:var(--font); font-style:normal; font-weight:800; }
.eyebrow,.result-eyebrow,.how-section li>span,.guide-grid span,.contact-card>span { font-family:var(--font); font-weight:800; }
.calculator-tabs { overscroll-behavior-x:contain; touch-action:pan-x; }.calculator-body>*,.section-heading>*,.guide-intro>*,.how-section>*,.contact-section>* { min-width:0; }
.hero p,.section-heading p,.guide-intro p,.how-section p,.guide-grid p,.faq-section p,.contact-section p,.disclaimer { word-break:keep-all; overflow-wrap:anywhere; }
footer { padding:34px max(28px,calc((100vw - 1280px)/2)) 30px; grid-template-columns:minmax(220px,.86fr) minmax(280px,1.2fr) minmax(220px,.78fr); gap:30px; align-items:center; color:#e9eef0; background:var(--navy); border-top:4px solid var(--copper); font-size:11px; line-height:1.65; }
.footer-brand { display:block; }.footer-brand img { display:block; width:245px; max-width:100%; height:auto; }.footer-brand span { display:block; margin-top:10px; color:#d8a587; font-size:10px; font-weight:700; letter-spacing:.035em; }.footer-details p,.footer-corporate p { margin:0; }.footer-details p + p,.footer-corporate p + p { margin-top:4px; }.footer-personal { display:flex; align-items:baseline; gap:12px; margin-bottom:9px!important; }.footer-personal>span { display:flex; flex-direction:column; }.footer-personal strong,.footer-personal a { color:#fff; font-size:17px; font-weight:800; }.footer-personal small { color:#d8a587; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.footer-personal a { text-decoration:underline; text-decoration-color:var(--copper); text-underline-offset:4px; }.footer-corporate { color:#c9d3d7; }.footer-corporate p:first-child { color:#fff; font-size:12px; font-weight:700; }

@media (max-width:960px) { .header-actions { margin-left:auto; } footer { grid-template-columns:1fr 1fr; gap:26px; }.footer-brand { grid-row:span 2; }.footer-corporate { align-self:end; } }
@media (max-width:620px) { html,body { width:100%; max-width:100%; overflow-x:hidden; overflow-x:clip; }.topline { height:34px; min-height:34px; padding:0 18px; justify-content:flex-end; }.topline p { display:none; }.topline a { font-size:10px; }.site-header { height:70px; min-height:70px; padding:0 18px; gap:10px; }.brand { min-width:0; max-width:calc(100% - 47px); }.brand img,.brand-logo { width:178px; max-width:100%; }.brand-identity,.brand span { display:none; }.site-header nav,.header-actions .button { display:none; }.header-actions { margin-left:auto; flex:0 0 auto; }.language-toggle { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }.hero,.tools-section,.how-section,.guide-section,.faq-section,.contact-section { padding-left:23px; padding-right:23px; }.hero h1,.section-heading h2,.how-section h2,.guide-section h2,.faq-section h2,.contact-section h2 { letter-spacing:-.05em; word-break:keep-all; overflow-wrap:anywhere; }.calculator-shell { width:100%; max-width:100%; }.calculator-tabs { margin:0; }.calc-tab { min-height:44px; display:inline-flex; align-items:center; }.calculator-body { padding:22px 18px; }.result-metrics { gap:10px; }.disclaimer { padding-left:18px; padding-right:18px; } footer { padding:28px 23px; grid-template-columns:1fr; gap:16px; }.footer-brand { grid-row:auto; }.footer-brand img { width:235px; }.footer-personal strong,.footer-personal a { font-size:16px; } }
@media (max-width:450px) { .input-grid { grid-template-columns:1fr; }.hero h1 { font-size:clamp(37px,11.5vw,45px); }.hero-actions .button { width:100%; }.hero-notes { gap:6px; }.hero-notes span { font-size:9px; }.result-metrics { grid-template-columns:1fr; }.result-metrics div { padding-top:8px; }.contact-card>a:not(.button) { font-size:16px; overflow-wrap:anywhere; } }
@supports (padding:max(0px)) { @media (max-width:620px) { .topline,.site-header { padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); }.hero,.tools-section,.how-section,.guide-section,.faq-section,.contact-section,footer { padding-left:max(23px,env(safe-area-inset-left)); padding-right:max(23px,env(safe-area-inset-right)); } } }