*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.8;color:#333;background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* Header */
header{background:linear-gradient(135deg,#2c5f2d 0%,#97bc62 100%);color:#fff;padding:20px 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.header-content{display:flex;justify-content:space-between;align-items:center;gap:18px}
.logo{font-size:1.6em;font-weight:800;text-decoration:none;color:#fff;display:flex;align-items:center;gap:10px}
.logo:before{content:"💊";font-size:1.2em}
nav ul{display:flex;list-style:none;gap:24px;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;transition:all .25s;padding:8px 14px;border-radius:25px}
nav a:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
nav a.active{background:rgba(255,255,255,.28)}
/* Hero */
.hero{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:100px 0;text-align:center;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;top:-50%;right:-10%;width:520px;height:520px;background:radial-gradient(circle,rgba(44,95,45,.12) 0%,transparent 70%);border-radius:50%}
.hero h1{font-size:3rem;margin-bottom:18px;background:linear-gradient(45deg,#2c5f2d,#97bc62);-webkit-background-clip:text;background-clip:text;color:transparent;animation:fadeUp .9s ease}
.hero-subtitle{font-size:1.2rem;color:#555;margin-bottom:22px;animation:fadeUp 1.1s ease}
.hero-badge{display:inline-block;background:#2c5f2d;color:#fff;padding:12px 22px;border-radius:50px;font-weight:700;margin-bottom:20px;animation:pulse 2s infinite}
.cta-button{display:inline-block;background:linear-gradient(45deg,#2c5f2d,#97bc62);color:#fff;padding:16px 42px;border-radius:50px;text-decoration:none;font-size:1.1rem;font-weight:800;transition:all .25s;box-shadow:0 10px 30px rgba(44,95,45,.24)}
.cta-button:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(44,95,45,.32)}
/* Sections */
.section{padding:80px 0}
.section.alt{background:#f8f9fa}
.section-title{font-size:2.1rem;text-align:center;margin-bottom:44px;position:relative}
.section-title:after{content:"";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:120px;height:4px;background:linear-gradient(45deg,#2c5f2d,#97bc62);border-radius:6px}
/* Product info */
.product-info{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:30px}
.card{background:#fff;border:1px solid #eaeaea;border-radius:20px;box-shadow:0 15px 35px rgba(0,0,0,.06);padding:34px}
.card h3{color:#2c5f2d;margin-bottom:14px}
.list{list-style:none;padding:0}
.list li{padding:10px 0 10px 28px;position:relative}
.list li:before{content:"✓";position:absolute;left:0;color:#2c5f2d;font-weight:700}
/* Features grid */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:28px}
.feature-card{background:linear-gradient(135deg,#f6f8fb 0%,#e9f7e9 100%);padding:34px;border-radius:18px;text-align:center;transition:all .25s;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 18px 48px rgba(44,95,45,.22)}
.feature-icon{font-size:2.4rem;margin-bottom:12px}
/* Tables */
.table{width:100%;border-collapse:collapse;margin-top:14px}
.table th,.table td{border:1px solid #eee;padding:10px 12px;text-align:left;vertical-align:top}
.table thead th{background:#eef2ee}
.badge{display:inline-block;background:#eef6f0;color:#2c5f2d;border:1px solid #cfe6d3;border-radius:999px;padding:5px 10px;margin-right:6px}
/* Price cards */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:28px}
.price-card{border-radius:20px;overflow:hidden;box-shadow:0 15px 35px rgba(0,0,0,.08)}
.price-head{background:linear-gradient(135deg,#2c5f2d,#97bc62);color:#fff;padding:24px;text-align:center}
.price-body{background:#fff;padding:26px}
.price-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eee}
.price-row:last-child{border-bottom:none}
.price-amt{font-size:2rem;font-weight:800;color:#2c5f2d;text-align:center;margin:18px 0}
/* Footer */
footer{background:#2c3e50;color:#fff;padding:50px 0;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-bottom:18px}
footer h4{margin-bottom:12px;color:#97bc62}
footer a{color:#ecf0f1;text-decoration:none;line-height:2}
footer a:hover{color:#97bc62}
.footer-bottom{text-align:center;padding-top:16px;border-top:1px solid #34495e;color:#95a5a6}
/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* Responsive */
@media (max-width: 900px){.product-info{grid-template-columns:1fr} .hero{padding:80px 0} .hero h1{font-size:2.4rem}}


/* --- popup modal --- */
.popup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:1200}
.popup{background:#fff;border:1px solid #eaeaea;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.25);max-width:520px;width:92%;padding:22px}
.popup h3{margin:0 0 10px 0;font-size:1.25rem}
.popup .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.popup .btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer}
.popup .btn.primary{background:#2c5f2d;color:#fff}
.popup .btn.ghost{background:#eef2ff;color:#111}
.show{display:flex}