/* ===== Base ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#ffffff;--bg2:#f7f7fa;--card:#ffffff;
    --border:#e8e8ee;
    --t1:#111118;--t2:#555566;--t3:#999;
    --red:#e94560;--red-light:#fff0f3;
    --blue:#3b7ddd;--blue-light:#eef4ff;
}
html{scroll-behavior:smooth}
body{font-family:'Inter','Noto Sans KR',sans-serif;background:var(--bg);color:var(--t2);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1060px;margin:0 auto;padding:0 2.5rem}

/* reveal */
.game,.gf,.about-item,.contact{opacity:0;transform:translateY(24px);transition:opacity .55s,transform .55s}
.show{opacity:1;transform:none}
.gf:nth-child(2){transition-delay:.06s}.gf:nth-child(3){transition-delay:.12s}.gf:nth-child(4){transition-delay:.18s}
.about-item:nth-child(2){transition-delay:.08s}.about-item:nth-child(3){transition-delay:.16s}

/* ===== Nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;transition:background .3s,box-shadow .3s}
.nav-bg{background:rgba(255,255,255,.92);backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--border)}
.nav-wrap{height:68px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-size:1rem;font-weight:900;color:var(--t1);letter-spacing:2px}
.nav-logo span{color:var(--red);margin-left:3px}
.nav-menu{list-style:none;display:flex;gap:2rem}
.nav-menu a{font-size:.75rem;font-weight:600;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;transition:color .2s}
.nav-menu a:hover{color:var(--t1)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--bg2)}
.hero-bg-layer{position:absolute;inset:0;
    background:
        radial-gradient(ellipse 50% 40% at 50% 30%,rgba(233,69,96,.04),transparent),
        radial-gradient(ellipse 40% 50% at 70% 70%,rgba(59,125,221,.03),transparent);
    pointer-events:none}
.hero-wrap{position:relative;z-index:1;padding:8rem 2.5rem 5rem}
.hero-logo{display:block;width:360px;height:auto;margin:0 auto 2.5rem;animation:hIn .9s ease both}
.hero-tag{
    display:inline-block;font-size:.68rem;font-weight:700;color:var(--red);
    letter-spacing:5px;text-transform:uppercase;
    background:var(--red-light);border-radius:40px;padding:6px 20px;
    margin-bottom:2rem;animation:hIn .9s .1s ease both}
.hero h1{
    font-size:clamp(2.4rem,5vw,4.2rem);font-weight:900;color:var(--t1);
    line-height:1.08;letter-spacing:-1.5px;margin-bottom:1.2rem;animation:hIn .9s .2s ease both}
.hero-text{font-size:1rem;color:var(--t2);max-width:420px;margin:0 auto 2.5rem;line-height:1.8;animation:hIn .9s .3s ease both}
.hero-actions{display:flex;gap:10px;justify-content:center;animation:hIn .9s .4s ease both}
@keyframes hIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.btn-fill{padding:13px 30px;background:var(--red);color:#fff;font-size:.82rem;font-weight:700;border-radius:8px;transition:transform .15s,box-shadow .25s;box-shadow:0 2px 12px rgba(233,69,96,.2)}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(233,69,96,.3)}
.btn-line{padding:13px 30px;font-size:.82rem;font-weight:600;color:var(--t2);border:1px solid var(--border);border-radius:8px;transition:color .2s,border-color .2s}
.btn-line:hover{color:var(--t1);border-color:var(--t1)}

/* ===== Section ===== */
section{padding:6rem 0}
.bg-alt{background:var(--bg2)}
.label{display:block;font-size:.68rem;font-weight:700;color:var(--red);letter-spacing:4px;text-transform:uppercase;margin-bottom:.8rem}
h2{font-size:1.8rem;font-weight:800;color:var(--t1);letter-spacing:-.5px;margin-bottom:.8rem}
.sub{font-size:.9rem;color:var(--t2);line-height:1.8;margin-bottom:3rem;max-width:480px}
.left{text-align:left}

/* ===== Game ===== */
.game{
    background:var(--card);border:1px solid var(--border);border-radius:20px;
    padding:3rem;margin-top:2.5rem;box-shadow:0 2px 20px rgba(0,0,0,.04)}
.game-top{display:flex;gap:2rem;align-items:flex-start;margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--border)}
.game-img{width:140px;height:140px;border-radius:28px;flex-shrink:0;box-shadow:0 8px 30px rgba(0,0,0,.1)}
.game-info h3{font-size:1.5rem;font-weight:800;color:var(--t1);margin-bottom:.5rem;letter-spacing:-.3px}
.game-badges{display:flex;gap:6px;margin-bottom:.8rem}
.b{font-size:.62rem;font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:.8px;text-transform:uppercase}
.b-red{background:var(--red-light);color:var(--red)}.b-blue{background:var(--blue-light);color:var(--blue)}
.game-info>p{font-size:.88rem;color:var(--t2);line-height:1.75;max-width:520px}
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2.5rem}
.gf{padding:1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.gf:hover{border-color:var(--red);box-shadow:0 4px 16px rgba(233,69,96,.06)}
.gf-n{display:block;font-size:.65rem;font-weight:800;color:var(--red);opacity:.5;margin-bottom:.8rem;letter-spacing:1px}
.gf h4{font-size:.85rem;font-weight:700;color:var(--t1);margin-bottom:.35rem}
.gf p{font-size:.78rem;color:var(--t2);line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding-top:2rem;border-top:1px solid var(--border)}
.tags span{font-size:.68rem;font-weight:600;color:var(--t2);padding:4px 12px;border:1px solid var(--border);border-radius:4px;transition:color .15s,border-color .15s,background .15s}
.tags span:hover{color:var(--red);border-color:var(--red);background:var(--red-light)}

/* ===== About ===== */
.about-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.about-bar{width:20px;height:2px;background:var(--red);margin-bottom:1.2rem}
.about-item h3{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:.6rem}
.about-item p{font-size:.83rem;line-height:1.8}

/* ===== Contact ===== */
.contact{display:flex;justify-content:space-between;align-items:flex-start;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:3rem;gap:3rem}
.contact-sub{font-size:.88rem;color:var(--t2);margin-top:.5rem;line-height:1.7}
.ci-label{display:block;font-size:.65rem;font-weight:700;color:var(--t3);letter-spacing:2px;text-transform:uppercase;margin-bottom:.3rem}
.contact-info a{font-size:.95rem;font-weight:600;color:var(--t1);transition:color .2s}
.contact-info a:hover{color:var(--red)}

/* ===== Footer ===== */
footer{border-top:1px solid var(--border);padding:2.5rem 0 2rem}
.ft-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.ft-logo{font-size:.85rem;font-weight:900;color:var(--t3);letter-spacing:2px}
.ft-logo span{color:var(--red);opacity:.5;margin-left:2px}
.ft-nav{display:flex;gap:1.5rem}
.ft-nav a{font-size:.72rem;font-weight:500;color:var(--t3);transition:color .2s}
.ft-nav a:hover{color:var(--t1)}
.ft-bot{padding-top:1.5rem;border-top:1px solid var(--border)}
.ft-bot p{font-size:.7rem;color:var(--t3)}

/* ===== Legal ===== */
.legal{max-width:800px;margin:0 auto;padding:6rem 2rem 4rem}
.legal h1{font-size:2rem;font-weight:800;color:var(--t1);margin-bottom:.5rem}
.legal .updated{font-size:.85rem;color:var(--t2);margin-bottom:2.5rem}
.legal h2{font-size:1.2rem;font-weight:700;color:var(--t1);margin:2rem 0 .8rem;padding-top:1rem;border-top:1px solid var(--border)}
.legal h2:first-of-type{border-top:none;padding-top:0}
.legal p,.legal li{font-size:.92rem;color:var(--t2);line-height:1.8;margin-bottom:.6rem}
.legal ul,.legal ol{padding-left:1.5rem;margin-bottom:1rem}
.legal-back{display:inline-block;margin-top:2rem;color:var(--red);font-weight:600}

/* ===== Mobile ===== */
@media(max-width:768px){
    .nav-menu{display:none}
    .hero-wrap{padding:6rem 1.5rem 3rem}
    .hero-logo{width:260px}
    .hero h1{font-size:2rem}
    section{padding:4rem 0}
    .wrap{padding:0 1.5rem}
    .game{padding:2rem 1.5rem}
    .game-top{flex-direction:column;align-items:center;text-align:center}
    .game-img{width:120px;height:120px}
    .game-badges{justify-content:center}
    .game-grid{grid-template-columns:1fr 1fr;gap:1rem}
    .about-row{grid-template-columns:1fr;gap:2rem}
    .contact{flex-direction:column;padding:2rem}
    .ft-top{flex-direction:column;gap:1rem;align-items:flex-start}
    .ft-nav{flex-wrap:wrap;gap:1rem}
}
@media(max-width:480px){
    .game-grid{grid-template-columns:1fr}
}