@font-face{font-family:'Pretendard';font-weight:300;font-display:swap;src:url('../fonts/Pretendard-Light.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:url('../fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:500;font-display:swap;src:url('../fonts/Pretendard-Medium.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:url('../fonts/Pretendard-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:700;font-display:swap;src:url('../fonts/Pretendard-Bold.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green-900:#0a2e1a;--green-800:#0f4a2a;--green-700:#166534;--green-600:#15803d;
  --green-500:#16a34a;--green-400:#22c55e;--green-200:#bbf7d0;--green-100:#dcfce7;--green-50:#f0fdf4;
  --teal-600:#0d9488;--teal-400:#2dd4bf;--teal-100:#ccfbf1;
  --amber-600:#d97706;--amber-400:#fbbf24;--amber-100:#fef3c7;
  --blue-600:#2563eb;--blue-100:#dbeafe;
  --gray-900:#111827;--gray-800:#1f2937;--gray-700:#374151;--gray-600:#4b5563;
  --gray-500:#6b7280;--gray-400:#9ca3af;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;
  --white:#ffffff;
  --font-serif:'Pretendard',sans-serif;
  --font-sans:'Pretendard',sans-serif;
  --radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;
}
html{scroll-behavior:smooth}
@media (max-width:768px){body.hide-nav nav{display:none}}
body{font-family:var(--font-sans);background:var(--gray-50);color:var(--gray-900);min-height:100vh;overflow-x:hidden}

/* ─── NAV ─── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);height:60px;display:flex;align-items:center;padding:0 2rem}
.nav-inner{width:100%;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.nav-logo-badge{width:32px;height:32px;background:var(--green-600);border-radius:8px;display:flex;align-items:center;justify-content:center}
.nav-logo-badge svg{width:18px;height:18px;fill:white}
.nav-logo-text{font-size:20px;font-weight:700;color:var(--gray-900);line-height:1.2}
.nav-logo-sub{font-size:11px;color:var(--gray-500);font-weight:400}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-btn{padding:6px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--gray-600);transition:all .2s}
.nav-btn:hover{background:var(--gray-100);color:var(--gray-900)}
.nav-btn.active{background:var(--green-100);color:var(--green-700)}

/* ─── PAGES ─── */
.page{display:none;min-height:100vh;padding-top:60px}
.page.active{display:block}

/* ─── MAIN PAGE ─── */
#main-page{}
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;background:var(--green-900)}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 70% 50%, rgba(22,163,74,0.25) 0%, transparent 70%),
  radial-gradient(ellipse 40% 40% at 20% 80%, rgba(13,148,136,0.2) 0%, transparent 60%),
  linear-gradient(135deg, var(--green-900) 0%, #0f3d23 50%, #0a2e1a 100%)}
.hero-particles{position:absolute;inset:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;opacity:.15;animation:float linear infinite}
@keyframes float{0%{transform:translateY(0) rotate(0deg);opacity:.1}50%{opacity:.2}100%{transform:translateY(-120px) rotate(360deg);opacity:.05}}
.hero-inner{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:0 2rem;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-label{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3);border-radius:100px;padding:6px 14px;font-size:12px;color:var(--green-400);font-weight:500;margin-bottom:1.5rem;letter-spacing:.05em}
.hero-label span{width:6px;height:6px;border-radius:50%;background:var(--green-400);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}
.hero-title{font-family:var(--font-serif);font-size:clamp(2.9rem,4.6vw,4.9rem);font-weight:700;color:white;line-height:1.2;margin-bottom:1rem}
.hero-title em{color:var(--green-400);font-style:normal}
.hero-desc{font-size:1.37rem;color:rgba(255,255,255,0.65);line-height:1.8;margin-bottom:2rem;max-width:730px}
.hero-stats{display:flex;gap:2.6rem;margin-bottom:2.5rem}
.stat-item{text-align:left}
.stat-num{font-size:2.34rem;font-weight:700;color:var(--green-400);font-family:var(--font-serif)}
.stat-label{font-size:14px;color:rgba(255,255,255,0.5);margin-top:2px}
.hero-cta-group{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{padding:12px 28px;background:var(--green-500);color:white;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s;letter-spacing:.01em}
.btn-primary:hover{background:var(--green-600);transform:translateY(-1px)}
.btn-outline{padding:12px 28px;background:transparent;color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.btn-outline:hover{border-color:rgba(255,255,255,0.5);color:white;background:rgba(255,255,255,0.05)}
.hero-visual{display:flex;flex-direction:column;gap:21px}
.hero-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-lg);padding:26px 31px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.hero-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient)}
.hero-card.g1::before{background:linear-gradient(90deg,var(--green-500),var(--teal-400))}
.hero-card.g2::before{background:linear-gradient(90deg,var(--teal-600),var(--blue-600))}
.hero-card.g3::before{background:linear-gradient(90deg,var(--amber-600),var(--green-500))}
.hero-card:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);transform:translateX(4px)}
.hero-card-num{font-size:14px;color:rgba(255,255,255,0.35);font-weight:600;letter-spacing:.1em;margin-bottom:8px}
.hero-card-title{font-size:20px;font-weight:600;color:white;margin-bottom:5px}
.hero-card-desc{font-size:16px;color:rgba(255,255,255,0.5);line-height:1.6}
.hero-card-arrow{position:absolute;right:24px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.3);font-size:23px;transition:all .3s}
.hero-card:hover .hero-card-arrow{color:rgba(255,255,255,0.7);right:16px}

/* ─── SECTIONS ─── */
.section{padding:5rem 2rem}
.section-inner{max-width:1400px;margin:0 auto}
.section-tag{font-size:12px;font-weight:600;color:var(--green-600);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem}
.section-title{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:var(--gray-900);margin-bottom:1rem;line-height:1.25}
.section-desc{font-size:1rem;color:var(--gray-600);line-height:1.8;max-width:600px}

/* ─── 3-CARD GRID ─── */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:3rem}
.feature-card{background:white;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:2rem;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.feature-card::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;border-radius:inherit}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.08)}
.feature-card:hover::after{opacity:1}
.feature-card.c1:hover{border-color:var(--green-400)}
.feature-card.c2:hover{border-color:var(--teal-400)}
.feature-card.c3:hover{border-color:var(--amber-400)}
.feat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:1.25rem}
.feat-icon.i1{background:var(--green-100)}
.feat-icon.i2{background:var(--teal-100)}
.feat-icon.i3{background:var(--amber-100)}
.feat-num{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gray-400);text-transform:uppercase;margin-bottom:.5rem}
.feat-title{font-size:1.1rem;font-weight:700;color:var(--gray-900);margin-bottom:.6rem;line-height:1.3}
.feat-desc{font-size:.875rem;color:var(--gray-600);line-height:1.7;margin-bottom:1.5rem}
.feat-link{font-size:.875rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.feat-link.l1{color:var(--green-600)}
.feat-link.l2{color:var(--teal-600)}
.feat-link.l3{color:var(--amber-600)}
.feature-card:hover .feat-link{gap:10px}
.feat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem}
.feat-tag{font-size:11px;padding:3px 10px;border-radius:100px;font-weight:500}
.feat-tag.t1{background:var(--green-100);color:var(--green-700)}
.feat-tag.t2{background:var(--teal-100);color:var(--teal-600)}
.feat-tag.t3{background:var(--amber-100);color:var(--amber-600)}

/* ─── RESULTS STRIP ─── */
.results-section{background:var(--green-900);padding:4rem 2rem}
.results-inner{max-width:1400px;margin:0 auto}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:2.5rem}
.result-item{background:rgba(255,255,255,0.04);padding:2rem 1.5rem;text-align:center;border-radius:var(--radius-md)}
.result-num{font-family:var(--font-serif);font-size:2.8rem;font-weight:700;color:var(--green-400);line-height:1}
.result-unit{font-size:1.2rem;font-weight:600;color:var(--green-400)}
.result-label{font-size:.8rem;color:rgba(255,255,255,0.5);margin-top:.5rem;line-height:1.5}

/* ─── TIMELINE ─── */
.timeline{display:flex;gap:0;margin-top:2.5rem;position:relative}
.timeline::before{content:'';position:absolute;top:24px;left:24px;right:24px;height:2px;background:var(--gray-200);z-index:0}
.tl-item{flex:1;padding:0 8px;position:relative;z-index:1}
.tl-dot{width:48px;height:48px;border-radius:50%;border:3px solid var(--gray-200);background:white;display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 12px;font-weight:700;transition:all .3s}
.tl-item.done .tl-dot{border-color:var(--green-500);background:var(--green-500);color:white}
.tl-item.current .tl-dot{border-color:var(--green-500);background:white;color:var(--green-600);box-shadow:0 0 0 4px var(--green-100)}
.tl-month{font-size:12px;font-weight:600;color:var(--gray-500);text-align:center;margin-bottom:4px}
.tl-label{font-size:12px;color:var(--gray-700);text-align:center;line-height:1.4}
.tl-item.done .tl-label{color:var(--green-700)}

/* ─── PAGE HEADER ─── */
.page-header{background:white;border-bottom:1px solid var(--gray-200);padding:2.5rem 2rem}
.page-header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:flex-start;gap:1.5rem}
.page-header-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.page-header-icon.h1{background:var(--green-100)}
.page-header-icon.h2{background:var(--teal-100)}
.page-header-icon.h3{background:var(--amber-100)}
.page-header-badge{display:inline-flex;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;margin-bottom:.5rem}
.page-header-badge.b1{background:var(--green-100);color:var(--green-700)}
.page-header-badge.b2{background:var(--teal-100);color:var(--teal-600)}
.page-header-badge.b3{background:var(--amber-100);color:var(--amber-600)}
.page-header-title{font-family:var(--font-serif);font-size:1.8rem;font-weight:700;color:var(--gray-900);margin-bottom:.4rem}
.page-header-desc{font-size:.95rem;color:var(--gray-600);line-height:1.7}

/* ─── TAB BAR ─── */
.tab-bar{background:white;border-bottom:1px solid var(--gray-200);padding:0 2rem;position:sticky;top:60px;z-index:500}
.tab-bar-inner{max-width:1400px;margin:0 auto;display:flex;gap:0}
.tab-item{padding:14px 20px;font-size:14px;font-weight:500;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap}
.tab-item:hover{color:var(--gray-900)}
.tab-item.active{color:var(--green-700);border-bottom-color:var(--green-600);font-weight:600}
.tab-item.t2.active{color:var(--teal-600);border-bottom-color:var(--teal-600)}
.tab-item.t3.active{color:var(--amber-600);border-bottom-color:var(--amber-600)}

/* ─── SUB TABS CONTENT ─── */
.sub-content{display:none;padding:3rem 2rem}
.sub-content.active{display:block}
.sub-inner{max-width:1400px;margin:0 auto}

/* ─── CARDS ─── */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:2rem}
.info-card{background:white;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.75rem}
.info-card-header{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.info-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.info-card-title{font-size:1rem;font-weight:700;color:var(--gray-900)}
.info-card-sub{font-size:.8rem;color:var(--gray-500);margin-top:2px}
.info-card p{font-size:.875rem;color:var(--gray-600);line-height:1.7}
.info-card ul{list-style:none;margin-top:.75rem}
.info-card ul li{font-size:.875rem;color:var(--gray-700);padding:5px 0;padding-left:1.2rem;position:relative;line-height:1.5}
.info-card ul li::before{content:'·';position:absolute;left:0;color:var(--green-500);font-weight:700}

/* ─── CURRICULUM TABLE ─── */
.curr-table{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:.875rem}
.curr-table th{background:var(--gray-800);color:white;padding:10px 16px;text-align:left;font-weight:500}
.curr-table td{padding:12px 16px;border-bottom:1px solid var(--gray-100);color:var(--gray-700)}
.curr-table tr:hover td{background:var(--gray-50)}
.curr-table .badge{display:inline-flex;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600}
.b-bee{background:var(--green-100);color:var(--green-700)}
.b-frog{background:var(--teal-100);color:var(--teal-600)}
.b-butterfly{background:var(--amber-100);color:var(--amber-600)}

/* ─── SPECIES CARDS ─── */
.species-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2rem}
.species-card{background:white;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s}
.species-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.species-visual{height:120px;display:flex;align-items:center;justify-content:center;font-size:64px}
.species-visual.v1{background:linear-gradient(135deg,#f0fdf4,#dcfce7)}
.species-visual.v2{background:linear-gradient(135deg,#ccfbf1,#99f6e4)}
.species-visual.v3{background:linear-gradient(135deg,#fef3c7,#fde68a)}
.species-body{padding:1.25rem}
.species-name{font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:.25rem}
.species-latin{font-size:.75rem;color:var(--gray-400);font-style:italic;margin-bottom:.75rem}
.species-desc{font-size:.8rem;color:var(--gray-600);line-height:1.6}
.species-status{display:inline-flex;align-items:center;gap:5px;margin-top:.75rem;font-size:.75rem;font-weight:600}
.status-dot{width:6px;height:6px;border-radius:50%}

/* ─── GPS DEMO ─── */
.gps-demo{background:white;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;margin-top:2rem}
.gps-demo-header{background:var(--gray-800);padding:12px 20px;display:flex;align-items:center;gap:8px}
.gps-demo-header span{font-size:13px;font-weight:500;color:white}
.gps-demo-header .dot{width:8px;height:8px;border-radius:50%;background:var(--green-400);animation:pulse 2s infinite}
.gps-map{background:#f6efe3;height:200px;position:relative;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--green-800);overflow:hidden}
.gps-map-grid{position:absolute;inset:0}
.school-marker{position:absolute;width:64px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(4px 6px 4px rgba(90,70,40,.25))}
.school-marker svg{width:100%;height:100%;display:block}
.school-marker:hover{transform:translate(-50%,-50%) scale(1.1)}
.school-marker .tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--gray-900);color:white;font-size:11px;padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.school-marker:hover .tooltip{opacity:1}
.marker-label{position:absolute;top:calc(100% - 6px);left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#5a4628;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px rgba(255,255,255,.8)}
.radius-circle{position:absolute;border:2px dashed rgba(30,124,57,.5);border-radius:50%;width:80px;height:80px;pointer-events:none;animation:radiusPulse 3s ease-in-out infinite;transition:width .3s ease,height .3s ease;transform:translate(-50%,-50%);z-index:1}
@keyframes radiusPulse{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.05)}}
.gps-controls{padding:16px 20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.gps-controls label{font-size:13px;color:var(--gray-600);display:flex;align-items:center;gap:8px}
.gps-controls input[type=range]{width:120px;accent-color:var(--green-600)}
.gps-log{border-top:1px solid var(--gray-100);padding:12px 20px;max-height:120px;overflow-y:auto}
.log-entry{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid var(--gray-50);font-size:12px;color:var(--gray-600)}
.log-time{color:var(--gray-400);flex-shrink:0;min-width:60px}
.log-status{color:var(--green-600);font-weight:500}
.log-status.fail{color:var(--gray-400)}

/* ─── INSTRUCTOR TABLE ─── */
.instr-table-wrap{overflow-x:auto;margin-top:1.5rem}
.instr-table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:600px}
.instr-table th{background:var(--gray-50);border-bottom:2px solid var(--gray-200);padding:10px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}
.instr-table td{padding:12px 16px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.instr-table tr:hover td{background:var(--gray-50)}
.instr-avatar{width:32px;height:32px;border-radius:50%;background:var(--green-100);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--green-700);flex-shrink:0}
.instr-name-cell{display:flex;align-items:center;gap:10px}
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600}
.s-active{background:var(--green-100);color:var(--green-700)}
.s-away{background:var(--amber-100);color:var(--amber-600)}
.s-offline{background:var(--gray-100);color:var(--gray-500)}

/* ─── AI GAME DEMO ─── */
.game-container{background:white;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;margin-top:2rem}
.game-header{background:linear-gradient(135deg,var(--green-900),#1a5c35);padding:20px 24px;display:flex;align-items:center;justify-content:space-between}
.game-title-area h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:white;margin-bottom:4px}
.game-title-area p{font-size:12px;color:rgba(255,255,255,.6)}
.game-score{text-align:right}
.game-score .score-num{font-family:var(--font-serif);font-size:2rem;font-weight:700;color:var(--green-400)}
.game-score .score-label{font-size:11px;color:rgba(255,255,255,.5)}
.game-body{padding:24px}
.game-question{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:20px;margin-bottom:20px}
.game-q-label{font-size:11px;font-weight:600;color:var(--green-600);letter-spacing:.08em;margin-bottom:8px}
.game-q-text{font-size:1rem;font-weight:600;color:var(--gray-900);line-height:1.5}
.game-q-image{font-size:56px;text-align:center;margin:12px 0;line-height:1}
.game-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.game-option{padding:14px 16px;background:white;border:1px solid var(--gray-200);border-radius:var(--radius-md);font-size:.9rem;color:var(--gray-700);cursor:pointer;text-align:left;transition:all .2s;line-height:1.4}
.game-option:hover:not(:disabled){border-color:var(--green-400);background:var(--green-50);color:var(--green-800)}
.game-option.correct{background:var(--green-100);border-color:var(--green-500);color:var(--green-800)}
.game-option.wrong{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.game-option:disabled{cursor:not-allowed;opacity:.7}
.game-feedback{padding:16px;border-radius:var(--radius-md);font-size:.9rem;line-height:1.6;display:none;margin-bottom:16px}
.game-feedback.show{display:block}
.game-feedback.ok{background:var(--green-50);border:1px solid var(--green-200);color:var(--green-800)}
.game-feedback.no{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.game-feedback strong{font-weight:700}
.game-controls{display:flex;align-items:center;justify-content:space-between}
.game-progress{flex:1;margin-right:16px}
.game-progress-bar{height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden}
.game-progress-fill{height:100%;background:var(--green-500);border-radius:3px;transition:width .5s}
.game-progress-text{font-size:11px;color:var(--gray-500);margin-top:4px}
.game-next-btn{padding:10px 24px;background:var(--green-600);color:white;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;display:none}
.game-next-btn.show{display:block}
.game-next-btn:hover{background:var(--green-700)}
.game-result{text-align:center;padding:2rem;display:none}
.game-result.show{display:block}
.result-emoji{font-size:64px;margin-bottom:1rem}
.result-title{font-family:var(--font-serif);font-size:1.6rem;font-weight:700;color:var(--gray-900);margin-bottom:.5rem}
.result-desc{font-size:.95rem;color:var(--gray-600);line-height:1.7;margin-bottom:1.5rem}
.result-restart{padding:12px 28px;background:var(--green-600);color:white;border:none;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}
.result-restart:hover{background:var(--green-700)}

/* ─── AI CHAT ─── */
.ai-chat-wrap{margin-top:2rem}
.chat-window{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden}
.chat-header{background:white;border-bottom:1px solid var(--gray-200);padding:14px 20px;display:flex;align-items:center;gap:10px}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--green-500);display:flex;align-items:center;justify-content:center;font-size:18px}
.chat-header-info strong{font-size:14px;color:var(--gray-900);display:block}
.chat-header-info span{font-size:12px;color:var(--green-600)}
.chat-messages{padding:16px;display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:320px;overflow-y:auto}
.msg{max-width:80%;display:flex;gap:8px;align-items:flex-start}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg-bubble{padding:10px 14px;border-radius:var(--radius-md);font-size:.875rem;line-height:1.6}
.msg.bot .msg-bubble{background:white;border:1px solid var(--gray-200);color:var(--gray-800);border-top-left-radius:4px}
.msg.user .msg-bubble{background:var(--green-600);color:white;border-top-right-radius:4px}
.msg-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.msg.bot .msg-avatar{background:var(--green-100)}
.msg.user .msg-avatar{background:var(--blue-100)}
.chat-input-area{border-top:1px solid var(--gray-200);padding:12px 16px;display:flex;gap:8px;background:white}
.chat-input{flex:1;padding:9px 14px;border:1px solid var(--gray-200);border-radius:var(--radius-md);font-size:.875rem;font-family:var(--font-sans);outline:none;transition:border-color .2s}
.chat-input:focus{border-color:var(--green-400)}
.chat-send{padding:9px 20px;background:var(--green-600);color:white;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}
.chat-send:hover{background:var(--green-700)}
.chat-suggestions{padding:10px 16px;border-top:1px solid var(--gray-100);background:white;display:flex;gap:8px;flex-wrap:wrap}
.chat-sug-btn{padding:5px 12px;background:var(--gray-100);border:none;border-radius:100px;font-size:12px;color:var(--gray-600);cursor:pointer;transition:all .2s;font-family:var(--font-sans)}
.chat-sug-btn:hover{background:var(--green-100);color:var(--green-700)}
.typing{display:flex;gap:4px;align-items:center;padding:6px 0}
.typing span{width:6px;height:6px;background:var(--gray-400);border-radius:50%;animation:bounce 1.4s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

/* ─── FOOTER ─── */
footer{background:var(--gray-900);color:white;padding:3rem 2rem}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem}
.footer-brand h3{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;margin-bottom:.5rem}
.footer-brand p{font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.6}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.3);margin-top:.75rem}

/* ─── UTILITY ─── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:2rem}
.full-width{grid-column:1/-1}
.divider{height:1px;background:var(--gray-200);margin:2rem 0}
.chip-group{display:flex;gap:8px;flex-wrap:wrap;margin-top:1rem}
.chip{padding:5px 12px;border-radius:100px;font-size:12px;font-weight:500;background:var(--gray-100);color:var(--gray-700)}
.empty-state{text-align:center;padding:3rem;color:var(--gray-400)}
.loading{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--gray-500);padding:12px 0}
.loading::before{content:'';width:16px;height:16px;border:2px solid var(--gray-200);border-top-color:var(--green-500);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .hero-inner,.feature-grid,.species-grid,.two-col,.info-grid,.results-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .hero-stats{gap:1.2rem;flex-wrap:wrap}
  .game-options{grid-template-columns:1fr}
  /* nav: 로고 + 가로 스크롤 메뉴 2단 */
  nav{height:auto;padding:0;flex-direction:column;align-items:stretch}
  .nav-inner{flex-direction:column;align-items:stretch;gap:0}
  .nav-logo{padding:10px 16px}
  .nav-logo-text{font-size:17px}
  .nav-links{overflow-x:auto;padding:0 8px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-btn{flex-shrink:0;padding:8px 12px;font-size:13px}
  .page{padding-top:96px}
  /* 서브탭: 가로 스크롤 */
  .tab-bar{padding:0 8px;top:97px}
  body.hide-nav .tab-bar{top:0}
  body.hide-nav .page{padding-top:0}
  .tab-bar-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tab-bar-inner::-webkit-scrollbar{display:none}
  .tab-item{padding:13px 14px;font-size:13.5px;flex-shrink:0}
  /* 공통 여백 축소 */
  .section{padding:2.5rem 1rem}
  .page-header{padding:1.5rem 1rem}
  .page-header-inner{gap:.9rem}
  .page-header-icon{width:44px;height:44px;font-size:20px;border-radius:12px}
  .page-header-title{font-size:1.3rem}
  .page-header-desc{font-size:.85rem}
  .hero{padding:2rem 1.25rem}
  .hero-title{font-size:2rem}
  .hero-desc{font-size:1rem}
  .stat-num{font-size:1.7rem}
  .satisfaction-grid{grid-template-columns:1fr;gap:12px}
  /* 생물 MBeeTI: 선택지 1열 */
  #mbti-options{grid-template-columns:1fr !important}
  #mbti-card-header,#mbti-result-header{padding:1.5rem 1.25rem !important}
  #mbti-intro{padding:2rem 1.25rem !important}
  .two-col-game{grid-template-columns:1fr !important}
  #wbg-intro,#gb-intro{padding:2rem 1.25rem !important}
  /* AI연동 챗봇게임: 화면 폭에 맞춤 */
  .wbg-holder{width:100% !important;max-width:400px;height:78vh !important;min-height:560px;margin:0 auto;border-radius:18px !important}
  .wbg-holder .sc-host,#wbg-root{width:100% !important;height:100% !important;border-radius:18px !important}
  /* 지도 데모: 세로 스택 (two-col로 처리됨) + 표는 가로 스크롤 유지 */
  .gps-map{height:200px !important}
  /* 큰 장식 요소 숨김 */
  .hero-label{display:none}
}

/* ─── SCROLL ANIMATE ─── */
.reveal{opacity:0;transform:translateY(20px);transition:all .5s}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─── SATISFACTION BAR ─── */
.satisfaction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.5rem}
.sat-card{background:white;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:1.25rem;text-align:center}
.sat-num{font-family:var(--font-serif);font-size:2.2rem;font-weight:700;color:var(--green-600)}
.sat-label{font-size:.8rem;color:var(--gray-500);margin-top:4px;line-height:1.4}
.sat-bar-wrap{margin-top:8px;height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden}
.sat-bar{height:100%;border-radius:3px;background:var(--green-500);transition:width 1.2s ease}

a{color:var(--green-700, #166534)}
a:hover{color:var(--green-600, #15803d)}