@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #fafaf8; color: #1a1a1a; font-family: 'Inter', 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; }

/* NAV */
.nav { position: fixed; top:0; left:0; right:0; height:65px; background:rgba(250,250,248,0.9); border-bottom:1px solid #e8e6e1; backdrop-filter:blur(12px); z-index:100; display:flex; align-items:center; padding:0 32px; }
.nav-inner { width:100%; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:baseline; text-decoration:none; }
.logo-bridge { font-family:'DM Serif Display',serif; font-style:italic; font-size:20px; color:#1a1a1a; letter-spacing:-0.5px; line-height:28px; }
.logo-lab { font-family:'DM Serif Display',serif; font-style:normal; font-size:20px; color:#4a5d23; letter-spacing:-0.5px; line-height:28px; }
.nav-links { display:flex; align-items:flex-start; }
.nav-link { display:flex; flex-direction:column; padding:4px 0; margin-right:32px; text-decoration:none; position:relative; }
.nav-link-en { font-family:'Inter',sans-serif; font-size:14px; color:rgba(26,26,26,0.5); line-height:20px; }
.nav-link-kr { font-family:'Noto Sans KR',sans-serif; font-size:11px; color:rgba(26,26,26,0.25); line-height:14px; }
.nav-link.active .nav-link-en { color:#1a1a1a; }
.nav-link.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:#4a5d23; border-radius:100px; }
.nav-actions { display:flex; align-items:center; gap:4px; }
.nav-lang { display:flex; align-items:center; gap:4px; font-family:'Inter',sans-serif; font-size:12px; color:rgba(26,26,26,0.5); font-weight:500; letter-spacing:0.6px; padding:6px 12px; border-radius:100px; background:none; border:none; cursor:pointer; }
.nav-cart { position:relative; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; border-radius:100px; }
.nav-cart-badge { position:absolute; top:-2px; right:-2px; width:18px; height:18px; background:#4a5d23; color:white; font-size:10px; font-weight:500; border-radius:100px; display:flex; align-items:center; justify-content:center; }
.nav-cta { display:inline-flex; align-items:center; gap:8px; background:#4a5d23; color:white; font-family:'Inter',sans-serif; font-size:14px; padding:8px 20px; border-radius:100px; text-decoration:none; margin-left:8px; }

/* HERO */
.hero { padding-top:65px; background:#fafaf8; min-height:736px; display:flex; align-items:center; justify-content:center; }
.hero-inner { width:1037px; max-width:100%; padding:96px 32px 0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-h1 { font-family:'DM Serif Display',serif; font-style:normal; font-weight:400; font-size:160px; line-height:144px; letter-spacing:-4px; color:#1a1a1a; margin-bottom:32px; }
.hero-sub { font-family:'Inter',sans-serif; font-size:16px; color:rgba(26,26,26,0.4); line-height:26px; margin-bottom:6px; }
.hero-sub-kr { font-family:'Noto Sans KR',sans-serif; font-size:16px; color:rgba(26,26,26,0.4); line-height:26px; margin-bottom:50px; }
.hero-btns { display:flex; align-items:center; gap:12px; }
.btn-p { display:inline-flex; align-items:center; gap:12px; background:#4a5d23; color:white; font-family:'Inter','Noto Sans KR',sans-serif; font-size:16px; padding:13px 28px; border-radius:100px; text-decoration:none; height:50px; }
.btn-g { display:inline-flex; align-items:center; gap:12px; background:white; color:#1a1a1a; font-family:'Inter','Noto Sans KR',sans-serif; font-size:16px; padding:13px 28px; border-radius:100px; text-decoration:none; border:1px solid #e8e6e1; height:50px; }

/* STATS */
.stats { background:white; border-top:1px solid #e8e6e1; border-bottom:1px solid #e8e6e1; padding:49px 32px; }
.stats-grid { max-width:1037px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.stat { text-align:center; }
.stat-icon { font-size:20px; margin-bottom:8px; opacity:0.5; }
.stat-num { font-family:'DM Serif Display',serif; font-style:normal; font-size:30px; line-height:36px; color:#1a1a1a; letter-spacing:-0.75px; }
.stat-label { font-family:'Inter','Noto Sans KR',sans-serif; font-size:12px; color:rgba(26,26,26,0.4); letter-spacing:0.6px; text-transform:uppercase; margin-top:4px; }

/* SECTIONS */
.sec { border-top:1px solid #e8e6e1; padding:97px 32px; }
.sec-white { background:white; }
.sec-cream { background:#fafaf8; }
.sec-inner { max-width:1037px; margin:0 auto; }
.sec-hdr { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; }
.eyebrow { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#4a5d23; letter-spacing:2.4px; text-transform:uppercase; margin-bottom:12px; }
.h2 { font-family:'DM Serif Display',serif; font-style:normal; font-weight:400; font-size:48px; line-height:48px; color:#1a1a1a; letter-spacing:-1.2px; }
.h2-kr { font-family:'DM Serif Display','Noto Sans KR',serif; font-style:normal; font-weight:400; font-size:48px; line-height:48px; color:#1a1a1a; letter-spacing:-1.2px; }
.sec-link { display:flex; align-items:center; gap:6px; font-family:'Inter','Noto Sans KR',sans-serif; font-size:14px; color:rgba(26,26,26,0.4); text-decoration:none; white-space:nowrap; align-self:flex-end; }
.sec-link-green { display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#4a5d23; text-decoration:none; white-space:nowrap; align-self:flex-end; }

/* CATEGORIES */
.cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cat-card { border:1px solid #e8e6e1; border-radius:24px; padding:40px; text-decoration:none; display:block; position:relative; overflow:hidden; min-height:284px; }
.cat-dark { background:#4a5d23; border-color:#4a5d23; }
.cat-white { background:white; }
.cat-muted { background:#f5f4ef; }
.cat-icon { width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:24px; }
.icon-on-dark { background:rgba(255,255,255,0.1); }
.icon-on-light { background:rgba(74,93,35,0.05); }
.cat-title-row { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.cat-h3 { font-family:'DM Serif Display',serif; font-style:normal; font-size:30px; line-height:36px; color:#1a1a1a; letter-spacing:-0.75px; }
.cat-h3-w { color:white; }
.cat-sub { font-family:'Inter','Noto Sans KR',sans-serif; font-size:14px; color:rgba(26,26,26,0.25); }
.cat-sub-w { color:rgba(255,255,255,0.4); }
.cat-desc { font-family:'Inter',sans-serif; font-size:16px; color:rgba(26,26,26,0.4); line-height:26px; max-width:384px; margin-bottom:40px; }
.cat-desc-w { color:rgba(255,255,255,0.6); }
.cat-link { font-family:'Inter',sans-serif; font-size:14px; color:rgba(74,93,35,0.6); text-decoration:none; display:flex; align-items:center; gap:6px; }
.cat-link-w { color:rgba(255,255,255,0.8); }
.cat-link-m { color:rgba(74,93,35,0.4); }

/* KITS */
.kits-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kit-card { background:#fafaf8; border:1px solid #e8e6e1; border-radius:16px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; }
.kit-thumb { position:relative; height:182px; background:#e8e6e1; overflow:hidden; }
.kit-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg,#ddd9d0,#c8c5bc); }
.kit-badge { position:absolute; top:12px; left:12px; font-family:'Inter','Noto Sans KR',sans-serif; font-size:10px; padding:4px 10px; border-radius:100px; background:#4a5d23; color:white; letter-spacing:0.5px; text-transform:uppercase; }
.kit-lvl { position:absolute; top:12px; right:12px; font-family:'Inter','Noto Sans KR',sans-serif; font-size:10px; padding:4px 8px; border-radius:100px; background:rgba(74,93,35,0.05); color:#4a5d23; }
.kit-info { padding:20px; flex:1; }
.kit-cat { font-family:'Inter',sans-serif; font-size:10px; color:rgba(26,26,26,0.3); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:6px; }
.kit-name { font-family:'Inter','Noto Sans KR',sans-serif; font-weight:500; font-size:14px; color:#1a1a1a; line-height:20px; margin-bottom:12px; }
.kit-row { display:flex; align-items:center; justify-content:space-between; }
.kit-price { font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:16px; color:#4a5d23; }
.kit-rating { display:flex; align-items:center; gap:4px; font-family:'Inter',sans-serif; font-size:12px; color:rgba(26,26,26,0.3); }

/* PARTS */
.parts-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:0; }
.part-card { background:white; border:1px solid #e8e6e1; border-radius:14px; padding:12px; margin:8px; text-decoration:none; }
.part-thumb { width:100%; aspect-ratio:1; background:#f0efe8; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:12px; }
.part-cat { font-family:'Inter','Noto Sans KR',sans-serif; font-size:10px; color:rgba(26,26,26,0.25); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:4px; }
.part-name { font-family:'Inter','Noto Sans KR',sans-serif; font-weight:500; font-size:12px; color:rgba(26,26,26,0.7); line-height:16px; margin-bottom:4px; }
.part-price { font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:12px; color:#4a5d23; }

/* COURSES */
.courses-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.course-card { background:#fafaf8; border:1px solid #e8e6e1; border-radius:16px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; }
.course-thumb { position:relative; height:184px; background:#e8e6e1; }
.course-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg,#ddd9d0,#c8c5bc); }
.course-lvl { position:absolute; top:12px; left:12px; background:#4a5d23; color:white; font-family:'Inter','Noto Sans KR',sans-serif; font-size:10px; padding:4px 10px; border-radius:100px; letter-spacing:0.5px; text-transform:uppercase; }
.course-info { padding:20px; flex:1; }
.course-title { font-family:'Inter','Noto Sans KR',sans-serif; font-weight:500; font-size:14px; color:#1a1a1a; line-height:20px; margin-bottom:8px; }
.course-desc { font-family:'Inter','Noto Sans KR',sans-serif; font-size:12px; color:rgba(26,26,26,0.35); line-height:16px; margin-bottom:12px; }
.course-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.course-inst { font-family:'Inter','Noto Sans KR',sans-serif; font-size:12px; color:rgba(26,26,26,0.35); }
.course-rat { display:flex; align-items:center; gap:4px; font-family:'Inter',sans-serif; font-size:12px; color:rgba(26,26,26,0.35); }
.prog-bar { height:4px; background:#e8e6e1; border-radius:100px; overflow:hidden; margin-bottom:6px; }
.prog-fill { height:100%; background:#4a5d23; border-radius:100px; }
.prog-label { font-family:'Inter',sans-serif; font-size:10px; color:rgba(26,26,26,0.25); text-align:right; }

/* SUBSCRIPTION */
.sub-sec { border-top:1px solid #e8e6e1; background:#fafaf8; padding:97px 32px; text-align:center; }
.sub-eyebrow { font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:12px; color:#4a5d23; letter-spacing:2.4px; text-transform:uppercase; margin-bottom:16px; }
.sub-h2 { font-family:'DM Serif Display',serif; font-style:normal; font-weight:400; font-size:48px; line-height:48px; color:#1a1a1a; letter-spacing:-1.2px; margin-bottom:24px; }
.sub-desc-en { font-family:'Inter',sans-serif; font-size:16px; color:rgba(26,26,26,0.4); line-height:26px; }
.sub-desc-kr { font-family:'Inter','Noto Sans KR',sans-serif; font-size:16px; color:rgba(26,26,26,0.4); line-height:26px; margin-bottom:48px; }
.sub-card { max-width:448px; margin:0 auto; background:white; border:1px solid #e8e6e1; border-radius:24px; padding:40px; text-align:left; overflow:hidden; }
.sub-hdr { display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.sub-logo { width:40px; height:40px; background:#4a5d23; border-radius:14px; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; }
.sub-plan { font-family:'DM Serif Display',serif; font-style:normal; font-size:20px; color:#1a1a1a; letter-spacing:-0.5px; line-height:28px; }
.sub-price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.sub-price { font-family:'DM Serif Display',serif; font-style:normal; font-size:48px; color:#1a1a1a; letter-spacing:-1.2px; line-height:48px; }
.sub-period { font-family:'Inter',sans-serif; font-size:14px; color:rgba(26,26,26,0.3); }
.sub-price-kr { font-family:'Inter',sans-serif; font-size:14px; color:rgba(26,26,26,0.3); margin-bottom:24px; }
.sub-note { background:rgba(74,93,35,0.05); border-radius:14px; padding:12px 16px; margin-bottom:24px; }
.sub-note-en { font-family:'Inter',sans-serif; font-weight:500; font-size:12px; color:#4a5d23; line-height:16px; }
.sub-note-kr { font-family:'Inter','Noto Sans KR',sans-serif; font-size:12px; color:rgba(74,93,35,0.6); line-height:16px; }
.sub-div { height:1px; background:#e8e6e1; margin-bottom:24px; }
.sub-features { list-style:none; display:flex; flex-direction:column; gap:16px; margin-bottom:32px; }
.sub-feat { display:flex; align-items:flex-start; gap:12px; font-family:'Inter','Noto Sans KR',sans-serif; font-size:14px; color:rgba(26,26,26,0.7); line-height:20px; }
.sub-check { width:20px; height:20px; background:rgba(74,93,35,0.1); border-radius:100px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:10px; color:#4a5d23; }
.sub-feat-kr { color:rgba(26,26,26,0.25); }
.sub-btn { display:flex; align-items:center; justify-content:center; gap:12px; background:#4a5d23; color:white; font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:16px; padding:16px; border-radius:100px; text-decoration:none; height:56px; }

/* CTA */
.cta-sec { background:#4a5d23; padding:96px 32px; text-align:center; overflow:hidden; }
.cta-h2 { font-family:'DM Serif Display',serif; font-style:normal; font-weight:400; font-size:60px; line-height:60px; color:white; letter-spacing:-1.5px; margin-bottom:24px; }
.cta-desc { font-family:'Inter','Noto Sans KR',sans-serif; font-size:16px; color:rgba(255,255,255,0.6); line-height:26px; max-width:448px; margin:0 auto 48px; }
.cta-btn { display:inline-flex; align-items:center; gap:12px; background:white; color:#4a5d23; font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:16px; padding:16px 32px; border-radius:100px; text-decoration:none; height:56px; }

/* FOOTER */
footer { background:white; border-top:1px solid #e8e6e1; padding:64px 32px 0; }
.foot-inner { max-width:1037px; margin:0 auto; }
.foot-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.foot-logo { display:flex; align-items:baseline; text-decoration:none; margin-bottom:20px; }
.foot-bridge { font-family:'DM Serif Display',serif; font-style:italic; font-size:24px; color:#1a1a1a; letter-spacing:-0.6px; line-height:32px; }
.foot-lab { font-family:'DM Serif Display',serif; font-style:normal; font-size:24px; color:#4a5d23; letter-spacing:-0.6px; line-height:32px; }
.foot-tag { font-family:'Inter','Noto Sans KR',sans-serif; font-size:14px; color:rgba(26,26,26,0.4); line-height:22.75px; }
.foot-col-title { font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:#1a1a1a; letter-spacing:0.7px; text-transform:uppercase; margin-bottom:16px; }
.foot-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
.foot-links a { font-family:'Inter','Noto Sans KR',sans-serif; font-size:14px; color:rgba(26,26,26,0.4); text-decoration:none; line-height:20px; }
.foot-bottom { border-top:1px solid #e8e6e1; padding:32px 0; text-align:center; }
.foot-copy { font-family:'Inter',sans-serif; font-size:12px; color:rgba(26,26,26,0.25); letter-spacing:0.6px; }

/* AI FAB */
.ai-fab { position:fixed; bottom:32px; right:32px; width:56px; height:56px; background:#4a5d23; border-radius:100px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 15px rgba(74,93,35,0.25),0 4px 6px rgba(74,93,35,0.25); z-index:50; cursor:pointer; }
.ai-fab::before { content:''; position:absolute; width:64px; height:64px; background:rgba(74,93,35,0.3); border-radius:100px; opacity:0.85; }
.ai-fab svg { position:relative; z-index:1; }
svg { display:inline-block; vertical-align:middle; flex-shrink:0; }