*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕',sans-serif;background:#f0f2f5;color:#1a1a2e;line-height:1.6}
a{color:inherit;text-decoration:none}
.site-nav{background:linear-gradient(135deg,#0f3460,#16213e);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.site-nav .logo{font-size:18px;font-weight:700}
.site-nav .nav-links{display:flex;gap:16px;font-size:13px;opacity:0.85}
.site-nav .nav-links a:hover{opacity:1;text-decoration:underline}
.hero{background:linear-gradient(135deg,#0f3460,#16213e);color:#fff;padding:56px 20px 48px;text-align:center}
.hero .emoji{font-size:64px;margin-bottom:16px;display:block}
.hero h1{font-size:28px;font-weight:800;margin-bottom:12px;line-height:1.3}
.hero p{font-size:16px;opacity:0.85;max-width:480px;margin:0 auto 28px}
.cta-btn{display:inline-block;background:#4F46E5;color:#fff;padding:16px 36px;border-radius:12px;font-size:17px;font-weight:700;box-shadow:0 4px 18px rgba(79,70,229,0.5);transition:transform 0.2s}
.cta-btn:hover{transform:translateY(-2px)}
.container{max-width:700px;margin:0 auto;padding:40px 20px}
.section{margin-bottom:40px}
.section h2{font-size:20px;font-weight:700;color:#0f3460;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #e8e8e8}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.feature-card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06)}
.feature-card .icon{font-size:28px;margin-bottom:10px}
.feature-card h3{font-size:15px;font-weight:700;color:#0f3460;margin-bottom:6px}
.feature-card p{font-size:13px;color:#555}
.steps{list-style:none}
.steps li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #f0f0f0}
.steps li:last-child{border-bottom:none}
.step-num{width:32px;height:32px;border-radius:50%;background:#0f3460;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.step-text strong{display:block;font-size:14px;margin-bottom:3px}
.step-text span{font-size:13px;color:#666}
.faq-list{list-style:none}
.faq-item{background:#fff;border-radius:12px;padding:18px 20px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.faq-item .q{font-size:14px;font-weight:700;color:#0f3460;margin-bottom:8px}
.faq-item .q::before{content:"Q. ";color:#4F46E5}
.faq-item .a{font-size:13px;color:#555;line-height:1.7}
.faq-item .a::before{content:"A. ";font-weight:600;color:#1a9a5c}
.cta-banner{background:linear-gradient(135deg,#0f3460,#4F46E5);color:#fff;border-radius:16px;padding:32px 24px;text-align:center;margin-bottom:40px}
.cta-banner h2{font-size:20px;font-weight:700;margin-bottom:10px}
.cta-banner p{font-size:14px;opacity:0.85;margin-bottom:20px}
.cta-banner .cta-btn{background:#fff;color:#0f3460}
.breadcrumb{font-size:13px;color:#888;margin-bottom:24px}
.breadcrumb a{color:#4F46E5}
.breadcrumb a:hover{text-decoration:underline}
.preset-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.preset-nav a{background:#fff;border:2px solid #e8e8e8;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:600;color:#555;transition:all 0.2s}
.preset-nav a:hover,.preset-nav a.active{border-color:#0f3460;color:#0f3460;background:#f0f4ff}
.preset-nav a.active{background:#0f3460;color:#fff;border-color:#0f3460}
/* === Expert Tip === */
.expert-tip{background:#f0f4ff;border-left:4px solid #4F46E5;border-radius:8px;padding:1.5rem 2rem;margin:2rem 0}
.expert-tip h2{font-size:1.1rem;color:#3730a3;margin-bottom:0.75rem}
.expert-tip p{color:#374151;line-height:1.7;margin-bottom:0.5rem}
/* === Related Calculators === */
.related-calculators{padding:2rem 0}
.related-calculators h2{font-size:1.2rem;color:#111827;margin-bottom:1rem;border-bottom:2px solid #e5e7eb;padding-bottom:0.5rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;list-style:none;padding:0}
.related-grid a{display:block;padding:0.6rem 1rem;background:#fff;border:1px solid #e5e7eb;border-radius:6px;font-size:0.9rem;color:#4F46E5;text-decoration:none;transition:background 0.2s,box-shadow 0.2s}
.related-grid a:hover{background:#eff6ff;box-shadow:0 2px 6px rgba(79,70,229,0.15)}
/* === Site Footer === */
.site-footer{background:#1e1b4b;color:#e0e7ff;padding:2.5rem 1.5rem;margin-top:3rem}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-brand{font-size:0.9rem;margin-bottom:1.5rem;opacity:0.7}
.footer-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}
.footer-group strong{display:block;font-size:0.85rem;color:#a5b4fc;margin-bottom:0.5rem}
.footer-group a{display:block;font-size:0.82rem;color:#c7d2fe;text-decoration:none;padding:0.15rem 0}
.footer-group a:hover{color:#fff}