:root{
  --bg:#030604;
  --bg-soft:#071008;
  --panel:rgba(8,16,9,.76);
  --line:rgba(104,255,78,.22);
  --green:#65ff45;
  --green2:#26d84d;
  --lime:#b6ff5a;
  --text:#f6faf6;
  --muted:#aab4ac;
  --shadow:0 0 35px rgba(72,255,74,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans KR",sans-serif;overflow-x:hidden}
body.light-mode{
  --bg:#edf4ee;--bg-soft:#dce8df;--panel:rgba(255,255,255,.82);--text:#0b150d;--muted:#415045;--line:rgba(30,150,50,.24)
}
body::selection{background:var(--green);color:#061007}
#particleCanvas{position:fixed;inset:0;z-index:-1;pointer-events:none}
.flash-layer{position:fixed;inset:0;background:rgba(145,255,113,.8);opacity:0;pointer-events:none;z-index:9998}
.flash-layer.active{animation:flash .45s ease}
@keyframes flash{0%,100%{opacity:0}20%{opacity:.32}35%{opacity:.05}52%{opacity:.2}}

.enter-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:linear-gradient(rgba(2,5,3,.78),rgba(2,5,3,.94)),url("assets/michikatsu-v3-hero.png") center/cover no-repeat;transition:opacity .8s ease,visibility .8s ease;overflow:hidden}
.enter-gate.hide{opacity:0;visibility:hidden}
.gate-lightning{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(101,255,69,.18),transparent 28%);animation:gatePulse 2.4s ease-in-out infinite}
@keyframes gatePulse{50%{filter:brightness(1.6)}}
.gate-content{text-align:center;position:relative;z-index:2;padding:32px}
.gate-kicker{letter-spacing:4px;color:var(--green);font-weight:900;font-size:13px}
.gate-content h1{font-family:"Black Ops One","Noto Sans KR",sans-serif;font-size:clamp(72px,13vw,180px);margin:10px 0;color:var(--green);text-shadow:0 0 22px rgba(101,255,69,.48),0 0 80px rgba(50,255,74,.22)}
.gate-copy{font-size:22px;color:#e6ece7}
.enter-btn{margin-top:18px;min-width:280px;padding:18px 32px;border:1px solid var(--green);background:linear-gradient(180deg,#8aff68,#4de23d);color:#041006;font-size:21px;font-weight:900;cursor:pointer;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);box-shadow:0 0 36px rgba(101,255,69,.38);transition:.25s}
.enter-btn:hover{transform:scale(1.04);filter:brightness(1.15)}
.gate-hint{margin-top:16px;color:#8fa094;font-size:12px}

.site-header{position:fixed;top:0;left:0;right:0;height:74px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;z-index:100;background:rgba(3,8,4,.7);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:900}
.brand-badge{width:38px;height:38px;display:grid;place-items:center;background:var(--green);color:#041006;clip-path:polygon(50% 0,100% 22%,88% 100%,12% 100%,0 22%);font-family:"Black Ops One"}
nav{display:flex;gap:23px}
nav a{color:var(--text);text-decoration:none;font-size:12px;letter-spacing:1.4px;font-weight:800}
nav a:hover{color:var(--green)}
.header-tools{display:flex;align-items:center;gap:10px}
.icon-btn,.music-btn{border:1px solid var(--line);background:rgba(6,15,7,.74);color:#fff;height:40px;cursor:pointer}
.icon-btn{width:40px}
.music-btn{padding:0 14px;display:flex;gap:8px;align-items:center;font-weight:800;font-size:11px}
.menu-btn{display:none;background:none;border:0}
.menu-btn span{display:block;width:26px;height:2px;background:#fff;margin:5px}

.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:120px 7vw 80px;background:url("assets/michikatsu-v3-hero.png") center/cover no-repeat;overflow:hidden}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,4,2,.92) 0%,rgba(1,4,2,.5) 42%,rgba(1,4,2,.22) 65%,rgba(1,4,2,.62) 100%)}
.hero-noise{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 26px,rgba(255,255,255,.018) 26px 28px)}
.hero-content{position:relative;z-index:2;max-width:770px}
.eyebrow{color:var(--green);letter-spacing:4px;font-size:12px;font-weight:900}
.hero h2,.section-heading h3,.contact-panel h3{font-family:"Black Ops One","Noto Sans KR",sans-serif}
.hero h2{font-size:clamp(78px,12vw,170px);line-height:.95;margin:10px 0;color:var(--green);text-shadow:0 0 22px rgba(101,255,69,.38)}
.hero-copy{color:#d8dfd9;font-size:18px;line-height:1.9}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{min-width:165px;height:52px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900;letter-spacing:1px;border:1px solid var(--green);transition:.25s}
.btn.primary{background:var(--green);color:#041006;box-shadow:var(--shadow)}
.btn.ghost{color:#fff;background:rgba(0,0,0,.35)}
.btn:hover{transform:translateY(-3px)}
.shockwave{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:80%;height:120px;background:radial-gradient(ellipse,rgba(101,255,69,.4),transparent 58%);filter:blur(18px);animation:shock 3.8s ease-in-out infinite}
@keyframes shock{50%{transform:translateX(-50%) scaleX(1.12);opacity:.55}}
.scroll-cue{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:3px;color:#a9b6ab}

.section{padding:110px 7vw;position:relative}
.section-heading{margin-bottom:45px}
.section-heading p{color:var(--green);font-size:12px;font-weight:900;letter-spacing:3px}
.section-heading h3{font-size:clamp(42px,6vw,84px);margin:8px 0 0;line-height:1.05}
.about-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:30px}
.about-copy{padding:35px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(14px)}
.about-copy p{color:var(--muted);line-height:1.95;font-size:17px}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pill-row span{border:1px solid var(--line);padding:10px 14px;color:var(--green);font-weight:900;font-size:12px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat-card{min-height:220px;border:1px solid var(--line);background:var(--panel);padding:25px;display:flex;flex-direction:column;justify-content:space-between}
.stat-card strong{font-size:56px;color:var(--green);font-family:"Black Ops One"}
.stat-card span{color:var(--muted);font-weight:800}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-card{min-height:280px;border:1px solid var(--line);display:flex;align-items:flex-end;padding:22px;position:relative;overflow:hidden;background:#08110a}
.gallery-card::before{content:"";position:absolute;inset:0;transition:.45s}
.gallery-card:hover::before{transform:scale(1.1)}
.gallery-card span{position:relative;z-index:1;font-family:"Black Ops One";letter-spacing:2px}
.g1::before{background:radial-gradient(circle at 30% 25%,rgba(101,255,69,.55),transparent 22%),#071008}
.g2::before{background:linear-gradient(135deg,rgba(101,255,69,.28),transparent 50%),#081008}
.g3::before{background:repeating-radial-gradient(circle at 50% 110%,rgba(101,255,69,.28) 0 2px,transparent 3px 28px),#071008}
.g4::before{background:linear-gradient(45deg,transparent 48%,rgba(101,255,69,.48) 50%,transparent 52%),#071008}
.g5::before{background:radial-gradient(circle at 70% 40%,rgba(182,255,90,.35),transparent 20%),#071008}
.g6::before{background:linear-gradient(120deg,rgba(101,255,69,.18),transparent 45%),#071008}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.video-card{border:1px solid var(--line);background:var(--panel);padding:18px}
.video-thumb{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,#111,#15331b);border:1px solid rgba(255,255,255,.05)}
.video-thumb span{font-size:52px;color:var(--green)}
.video-card h4{font-size:22px;margin:20px 0 8px}
.video-card p{color:var(--muted);line-height:1.7}

.gaming-panel{display:grid;grid-template-columns:1fr .7fr;gap:30px;align-items:center;border:1px solid var(--line);background:linear-gradient(135deg,rgba(8,18,10,.9),rgba(4,8,5,.78));padding:40px}
.gaming-panel h4{font-size:38px;margin:8px 0 14px}
.gaming-panel p{color:var(--muted);line-height:1.8}
.mission-meter span{font-size:12px;color:var(--green);font-weight:900;letter-spacing:2px}
.mission-meter div{height:15px;border:1px solid var(--line);margin:15px 0;background:#051007}
.mission-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--green2),var(--lime));box-shadow:0 0 18px rgba(101,255,69,.45)}
.mission-meter strong{font-size:36px;color:var(--green)}

.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.social-card{min-height:340px;padding:35px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:#fff;border:1px solid var(--line);position:relative;overflow:hidden;background:#071008;transition:.3s}
.social-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.social-card .social-icon{font-size:58px;margin-bottom:auto}
.social-card span{font-size:12px;letter-spacing:2px;font-weight:900}
.social-card h4{font-size:34px;margin:12px 0}
.social-card p{color:#b3bdb5}
.social-card strong{margin-top:12px}
.youtube{background:radial-gradient(circle at 75% 20%,rgba(255,40,40,.22),transparent 24%),#0c0909}
.instagram{background:radial-gradient(circle at 75% 20%,rgba(201,72,255,.24),transparent 24%),#0c0910}

.contact-panel{min-height:500px;border:1px solid var(--line);background:linear-gradient(rgba(4,10,5,.75),rgba(4,10,5,.9)),url("assets/michikatsu-v3-hero.png") center/cover;padding:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.contact-panel h3{font-size:clamp(52px,7vw,100px);line-height:1;margin:10px 0}
.contact-panel>p:not(.eyebrow){color:#c5cec7;margin-bottom:25px}

footer{padding:28px 5vw;border-top:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;color:var(--muted)}
footer strong{color:var(--green);font-size:20px}
.footer-values{display:flex;justify-content:center;gap:28px;font-size:12px}
.clock-wrap{text-align:right;display:flex;flex-direction:column}
.clock-wrap strong{font-family:"Black Ops One";font-size:30px}
.clock-wrap span{font-size:12px;letter-spacing:2px}

.to-top{position:fixed;right:20px;bottom:78px;width:44px;height:44px;border:1px solid var(--line);background:rgba(5,13,6,.82);color:var(--green);cursor:pointer;z-index:150}
.reveal{opacity:0;transform:translateY(28px);transition:.75s}
.reveal.show{opacity:1;transform:none}

@media(max-width:980px){
  nav{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:center;padding:28px;background:rgba(3,8,4,.96);transform:translateY(-140%);transition:.3s}
  nav.open{transform:none}
  .menu-btn{display:block}
  .about-layout,.gaming-panel{grid-template-columns:1fr}
  .gallery-grid,.video-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .site-header{padding:0 18px}
  .header-tools .music-btn span:last-child{display:none}
  .hero{padding:120px 22px 70px;background-position:62% center}
  .hero h2{font-size:72px}
  .hero-copy{font-size:15px}
  .section{padding:85px 22px}
  .stat-grid,.gallery-grid,.video-grid,.social-grid{grid-template-columns:1fr}
  .gaming-panel{padding:26px}
  .contact-panel{padding:30px 20px}
  footer{grid-template-columns:1fr;text-align:center}
  .footer-values{flex-wrap:wrap}
  .clock-wrap{text-align:center}
  .gate-content h1{font-size:64px}
  .enter-btn{min-width:230px}
}