:root{--ink:#152b35;--muted:#60727a;--blue:#164e63;--teal:#0f766e;--mist:#eef5f3;--line:#dce8e5;--paper:#fbfdfc;--white:#fff;--r-sm:12px;--r-md:20px;--r-lg:32px;--shadow:0 20px 60px rgba(20,70,75,.11);--max:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Pretendard Variable','Noto Sans KR',sans-serif;line-height:1.7;letter-spacing:-.02em}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:9999;background:#fff;padding:12px 18px}
.topbar{position:sticky;top:0;z-index:1000;background:rgba(251,253,252,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,232,229,.85)}
.nav-shell{max-width:var(--max);height:76px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{border-radius:12px}
.brand span{display:flex;flex-direction:column}
.brand b{font-size:16px;color:var(--blue)}
.brand small{font-size:11px;color:var(--muted)}
nav{display:flex;gap:6px}
nav a{padding:11px 14px;text-decoration:none;font-size:14px;font-weight:650;border-radius:10px;transition:.2s}
nav a:hover{background:var(--mist);color:var(--teal)}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;min-width:48px;min-height:44px}
.hero{max-width:var(--max);margin:auto;padding:96px 24px 120px;display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--teal);margin:0 0 18px}
.hero h1{font-size:clamp(50px,6.6vw,88px);line-height:1.04;letter-spacing:-.065em;margin:0 0 30px;max-width:620px}
.hero-lead{font-size:19px;color:var(--muted);max-width:610px}
.hero-actions{display:flex;gap:12px;margin:36px 0 24px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:999px;text-decoration:none;font-weight:750;transition:.22s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 12px 30px rgba(22,78,99,.2)}
.btn.ghost{border:1px solid var(--line);background:#fff}
.hero-note{font-size:13px;color:#7a898f}
.hero-visual{position:relative;margin:0}
.hero-visual img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.hero-visual:before{content:"";position:absolute;inset:-30px 30px 30px -30px;background:var(--mist);border-radius:var(--r-lg);z-index:-1}
.hero-visual figcaption{position:absolute;left:-34px;right:34px;bottom:28px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);padding:18px 20px;border-radius:16px;box-shadow:0 12px 35px rgba(20,50,55,.12);font-size:14px}
.hero-visual figcaption span{display:block;color:var(--teal);font-weight:800}
.signal{max-width:var(--max);margin:0 auto 128px;padding:54px;display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;background:var(--blue);border-radius:var(--r-lg);color:#fff}
.signal-kicker{font-size:12px;letter-spacing:.12em;color:#a9ddd4}
.signal h2{font-size:34px;line-height:1.3;margin:12px 0}
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.signal-grid article{border-left:1px solid rgba(255,255,255,.24);padding-left:20px}
.signal-grid b{color:#bfe7df}
.signal-grid p{margin:6px 0 0;color:rgba(255,255,255,.76);font-size:14px}
.section-shell{max-width:var(--max);margin:auto;padding:0 24px 132px}
.section-head{max-width:660px;margin-bottom:48px}
.section-head h2{font-size:clamp(34px,4.2vw,54px);line-height:1.18;letter-spacing:-.045em;margin:0 0 18px}
.section-head>p:last-child{color:var(--muted);font-size:17px}
.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.journey-grid a{padding:30px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;transition:.24s}
.journey-grid a:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#b7d6cf}
.journey-grid span{font-size:13px;font-weight:800;color:var(--teal)}
.journey-grid h3{margin:32px 0 10px;font-size:20px}
.journey-grid p{font-size:14px;color:var(--muted);margin:0}
.feature-wrap{background:#102f3b;padding:112px max(24px,calc((100vw - 1200px)/2));overflow:hidden}
.section-head.light{color:#fff}
.section-head.light .eyebrow{color:#8bd6c8}
.feature-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,calc((100% - 54px)/4));gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:4px 2px 18px}
.feature-card{background:#fff;border-radius:var(--r-md);overflow:hidden;scroll-snap-align:start}
.feature-card a{text-decoration:none}
.feature-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.feature-card div{padding:24px}
.feature-card span{font-size:12px;color:var(--teal);font-weight:800}
.feature-card h3{font-size:20px;line-height:1.4;margin:10px 0}
.feature-card p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feature-card b,.post-card b{font-size:13px;color:var(--teal)}
.guides{padding-top:128px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:.22s}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.post-card a{text-decoration:none}
.thumb{overflow:hidden}
.thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:.4s}
.post-card:hover img{transform:scale(1.025)}
.post-copy{padding:24px}
.post-copy span{font-size:12px;color:var(--teal);font-weight:700}
.post-copy h3{font-size:20px;line-height:1.4;margin:9px 0}
.post-copy p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.decision{max-width:var(--max);margin:0 auto 128px;padding:58px 64px;background:linear-gradient(135deg,#e4f1ee,#eef5f3);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:space-between;gap:48px}
.decision h2{font-size:38px;line-height:1.25;margin:0 0 12px}
.decision p{max-width:680px;color:var(--muted)}
.btn.inverse{background:var(--teal);color:#fff;white-space:nowrap}
.site-footer{background:#0d2934;color:rgba(255,255,255,.75);padding:72px max(24px,calc((100vw - 1200px)/2)) 32px}
.footer-main{display:flex;justify-content:space-between;gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff}
.footer-brand img{border-radius:9px}
.footer-main p{font-size:13px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.footer-links a{font-size:13px;text-decoration:none}
.footer-notice{padding:28px 0 18px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.55);max-width:1000px}
.footer-notice p{margin:5px 0}
.copyright{font-size:12px;color:rgba(255,255,255,.42)}
a:focus-visible,button:focus-visible{outline:3px solid #2dd4bf;outline-offset:3px}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:64px}
.hero-visual{max-width:680px}
.hero-visual img{aspect-ratio:16/10}
.signal{grid-template-columns:1fr;margin-left:20px;margin-right:20px}
.journey-grid{grid-template-columns:1fr 1fr}.feature-track{grid-auto-columns:minmax(280px,48%)}
.post-grid{grid-template-columns:1fr 1fr}
.decision{margin-left:20px;margin-right:20px}
}
@media(max-width:680px){.nav-shell{height:68px;padding:0 16px}
.brand small{display:none}
.nav-toggle{display:block}
nav{display:none;position:absolute;top:68px;left:12px;right:12px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);flex-direction:column}
nav.open{display:flex}
nav a{min-height:44px}
.hero{padding:54px 20px 88px;gap:44px}
.hero h1{font-size:49px}
.hero-lead{font-size:17px}
.hero-actions{flex-direction:column}
.btn{width:100%}
.hero-visual:before{inset:-15px 15px 15px -15px}
.hero-visual figcaption{left:14px;right:14px;bottom:14px}
.signal{padding:36px 24px;margin-bottom:88px}
.signal-grid,.journey-grid,.post-grid{grid-template-columns:1fr}.feature-track{grid-auto-columns:86%}
.section-shell{padding-left:20px;padding-right:20px;padding-bottom:92px}
.feature-wrap{padding-top:80px;padding-bottom:80px}
.guides{padding-top:88px}
.decision{padding:38px 26px;margin-bottom:88px;flex-direction:column;align-items:flex-start}
.decision h2{font-size:30px}
.footer-main{flex-direction:column}
.footer-links{gap:14px}
}