:root{
    --bg:#050816;
    --bg2:#0b1022;
    --panel:rgba(15,22,45,.72);
    --panel2:rgba(9,14,30,.88);
    --line:rgba(0,255,224,.22);
    --line-strong:rgba(0,255,224,.45);
    --text:#e9f9ff;
    --muted:#9bb4c7;
    --neon:#00ffe0;
    --neon2:#5be7ff;
    --neon3:#9d7bff;
    --danger:#8a1d32;
    --shadow:0 20px 60px rgba(0,0,0,.45);
    --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    min-height:100vh;
    color:var(--text);
    font-family: 'SUIT', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        radial-gradient(circle at 15% 20%, rgba(0,255,224,.14), transparent 25%),
        radial-gradient(circle at 85% 10%, rgba(157,123,255,.18), transparent 28%),
        radial-gradient(circle at 50% 90%, rgba(91,231,255,.10), transparent 25%),
        linear-gradient(180deg, #030611 0%, #07101e 45%, #050816 100%);
    overflow-x:hidden;
}
body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:36px 36px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.15));
    opacity:.18;
    pointer-events:none;
}
body::after{
    content:"";
    position:fixed; inset:-20%;
    background:
        radial-gradient(circle, rgba(0,255,224,.10) 0%, transparent 35%),
        radial-gradient(circle, rgba(157,123,255,.10) 0%, transparent 40%);
    filter:blur(70px);
    animation: driftGlow 18s linear infinite;
    pointer-events:none;
}
@keyframes driftGlow{
    0%{transform:translate(-4%, -2%) rotate(0deg)}
    50%{transform:translate(4%, 2%) rotate(180deg)}
    100%{transform:translate(-4%, -2%) rotate(360deg)}
}
.site-wrap,
.admin-wrap{
    width:min(540px, calc(100% - 24px));
    margin:0 auto;
    position:relative;
    z-index:2;
}
.hero{
    text-align:center;
    padding:24px 0 12px;
}
.badge{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    color:#081117;
    background:linear-gradient(135deg, var(--neon2), var(--neon));
    box-shadow:
      0 0 12px rgba(0,255,224,.45),
      0 0 28px rgba(0,255,224,.20);
}
.hero h1{
    margin:14px 0 8px;
    font-size:clamp(30px, 7vw, 46px);
    line-height:1.02;
    letter-spacing:-1.5px;
    text-shadow:0 0 24px rgba(91,231,255,.20);
}
.hero p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.event-card{
    margin:18px 0 28px;
}
.event-main{
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(18,28,54,.92), rgba(9,14,30,.95));
    border:1px solid rgba(91,231,255,.18);
    box-shadow:
      0 0 0 1px rgba(157,123,255,.08) inset,
      0 0 24px rgba(0,255,224,.08),
      var(--shadow);
    backdrop-filter:blur(10px);
}
.banner-box{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg, rgba(91,231,255,.10), rgba(157,123,255,.12));
}
.banner-box::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(135deg, rgba(255,255,255,.04), transparent 35%, rgba(0,255,224,.06) 70%, transparent);
    pointer-events:none;
}
.banner-box img{
    display:block;
    width:100%;
    height:auto;
}
.banner-placeholder{
    height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b5cbe0;
    font-size:34px;
    font-weight:800;
    letter-spacing:-1px;
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
}
.desc-box{
    background:rgba(249,251,255,.96);
    color:#0d1016;
    text-align:center;
    padding:22px 18px 24px;
}
.desc-title{
    margin:0 0 8px;
    font-size:17px;
    color:#07121b;
}
.desc-text{
    margin:0;
    font-size:15px;
    line-height:1.72;
    white-space:pre-line;
}
.event-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:58px;
    margin-top:10px;
    border-radius:0;
    background:linear-gradient(90deg, rgba(20,27,51,.96), rgba(32,42,78,.96));
    color:var(--text);
    font-size:17px;
    font-weight:800;
    letter-spacing:-.4px;
    text-decoration:none;
    border:1px solid rgba(91,231,255,.18);
    box-shadow:
      0 0 18px rgba(91,231,255,.10),
      0 0 0 1px rgba(91,231,255,.08) inset;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.event-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(91,231,255,.36);
    box-shadow:
      0 0 24px rgba(91,231,255,.18),
      0 0 0 1px rgba(91,231,255,.10) inset;
}
.toggle-link{
    display:block;
    margin-top:10px;
    padding:14px 16px;
    text-align:center;
    border-radius:16px;
    cursor:pointer;
    user-select:none;
    color:var(--neon2);
    background:rgba(12,20,38,.72);
    border:1px solid rgba(91,231,255,.16);
    box-shadow:0 0 18px rgba(91,231,255,.06);
    transition:all .22s ease;
}
.toggle-link:hover{
    color:#fff;
    border-color:rgba(91,231,255,.34);
    box-shadow:0 0 20px rgba(91,231,255,.14);
}
.expand-wrap{
    display:grid;
    grid-template-rows:0fr;
    opacity:.5;
    transition:grid-template-rows .45s ease, opacity .35s ease, margin-top .35s ease;
    margin-top:0;
}
.expand-wrap.open{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:12px;
}
.expand-inner{
    min-height:0;
    overflow:hidden;
}
.expand-stack{
    display:grid;
    gap:12px;
}
.expand-item{
    overflow:hidden;
    border-radius:22px;
    background:rgba(11,17,34,.96);
    border:1px solid rgba(91,231,255,.12);
    box-shadow:
      0 0 18px rgba(91,231,255,.06),
      0 12px 34px rgba(0,0,0,.28);
}
.expand-item img{
    display:block;
    width:100%;
    height:auto;
}
.empty-box{
    padding:18px;
    border-radius:18px;
    background:rgba(12,20,38,.75);
    border:1px dashed rgba(91,231,255,.14);
    color:var(--muted);
    text-align:center;
}
.admin-top{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:22px 0 16px;
}
.admin-top h1{
    margin:0;
    font-size:28px;
}
.actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.panel{
    margin-bottom:18px;
    padding:18px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(15,22,45,.82), rgba(9,14,30,.92));
    border:1px solid rgba(91,231,255,.16);
    box-shadow:
      0 0 20px rgba(91,231,255,.07),
      var(--shadow);
}
.panel h2{
    margin:0 0 14px;
    font-size:22px;
}
.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.stat{
    padding:16px;
    border-radius:18px;
    background:rgba(10,18,36,.90);
    border:1px solid rgba(91,231,255,.14);
}
.stat strong{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:8px;
}
.stat span{
    display:block;
    font-size:28px;
    font-weight:800;
}
.form-grid{display:grid; gap:12px}
.form-row{display:grid; gap:8px}
label{
    color:var(--neon2);
    font-size:14px;
    font-weight:700;
}
input[type=text],
input[type=url],
input[type=password],
input[type=number],
textarea,
select{
    width:100%;
    padding:13px 14px;
    border-radius:14px;
    border:1px solid rgba(91,231,255,.16);
    background:rgba(8,14,29,.90);
    color:#fff;
    outline:none;
}
textarea{
    min-height:150px;
    resize:vertical;
}
input[type=file]{color:#bfd8e7}
.btn,
.btn-outline,
.btn-danger{
    appearance:none;
    border:0;
    cursor:pointer;
    text-decoration:none;
    height:42px;
    padding:0 14px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}
.btn{
    color:#071117;
    background:linear-gradient(135deg, var(--neon2), var(--neon));
    box-shadow:0 0 18px rgba(91,231,255,.20);
}
.btn-outline{
    color:var(--text);
    background:rgba(8,14,29,.90);
    border:1px solid rgba(91,231,255,.16);
}
.btn-danger{
    color:#fff;
    background:var(--danger);
}
.table-wrap{overflow:auto}
table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}
th,td{
    padding:12px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-align:left;
    vertical-align:top;
    font-size:14px;
}
th{color:var(--neon2)}
.thumb{
    width:96px;
    height:64px;
    object-fit:cover;
    border-radius:12px;
    display:block;
}
.notice{
    margin-bottom:12px;
    padding:12px 14px;
    border-radius:14px;
    font-size:14px;
}
.notice.ok{
    background:rgba(16,185,129,.15);
    border:1px solid rgba(16,185,129,.32);
}
.notice.error{
    background:rgba(239,68,68,.15);
    border:1px solid rgba(239,68,68,.28);
}
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.login-card{
    width:min(460px, 100%);
    padding:28px;
    border-radius:26px;
    background:linear-gradient(180deg, rgba(15,22,45,.82), rgba(9,14,30,.92));
    border:1px solid rgba(91,231,255,.16);
    box-shadow:0 0 24px rgba(91,231,255,.08), var(--shadow);
}
.login-card h1{
    margin:0 0 18px;
    text-align:center;
}
.small{
    font-size:13px;
    color:var(--muted);
}
@media (max-width: 768px){
    .site-wrap,.admin-wrap{width:min(540px, calc(100% - 16px))}
    .banner-placeholder{height:220px; font-size:30px}
    .grid-3{grid-template-columns:1fr}
}

/* =========================
   폰트 / 전체 분위기 업그레이드
========================= */

html, body{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    letter-spacing:-0.02em;
}

body{
    background:
        radial-gradient(circle at 12% 18%, rgba(0,255,224,.18), transparent 22%),
        radial-gradient(circle at 82% 10%, rgba(129,140,248,.16), transparent 26%),
        radial-gradient(circle at 50% 85%, rgba(56,189,248,.10), transparent 24%),
        linear-gradient(180deg, #030611 0%, #07101e 42%, #050816 100%);
}

body::before{
    opacity:.15;
    background-size:32px 32px;
}

body::after{
    filter:blur(90px);
    opacity:.95;
}

/* =========================
   사용자 메인 폭
========================= */

.site-wrap{
    width:min(560px, calc(100% - 20px));
}

/* =========================
   어드민 폭 850px
========================= */

.admin-wrap{
    width:min(850px, calc(100% - 24px));
}

/* =========================
   타이틀 / 텍스트
========================= */

.hero h1{
    font-weight:800;
    letter-spacing:-0.05em;
    text-shadow:
      0 0 14px rgba(91,231,255,.14),
      0 0 34px rgba(157,123,255,.10);
}

.hero p{
    font-size:15px;
    line-height:1.65;
    color:#a9bfd1;
}

.desc-title{
    font-size:19px;
    font-weight:800;
    letter-spacing:-0.04em;
    margin-bottom:10px;
}

.desc-text{
    font-size:15px;
    line-height:1;
    letter-spacing:-0.02em;
    color:#111827;
}

.badge{
    font-weight:800;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:
      0 0 10px rgba(91,231,255,.45),
      0 0 26px rgba(91,231,255,.16),
      inset 0 1px 0 rgba(255,255,255,.35);
}

/* =========================
   카드 / 패널
========================= */

.event-main{
    border-radius:30px;
    border:1px solid rgba(91,231,255,.22);
    box-shadow:
      0 0 0 1px rgba(129,140,248,.08) inset,
      0 0 30px rgba(0,255,224,.08),
      0 24px 70px rgba(0,0,0,.42);
}

.banner-box{
    background:
      linear-gradient(135deg, rgba(91,231,255,.08), rgba(129,140,248,.10)),
      rgba(10,16,32,.92);
}

.banner-box img{
    width:100%;
    display:block;
    height:auto;
}

.desc-box{
    padding:24px 20px 26px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.96));
}

.toggle-link{
    font-weight:700;
    font-size:15px;
    border-radius:18px;
    background:
      linear-gradient(180deg, rgba(14,22,42,.92), rgba(9,15,30,.96));
    box-shadow:
      0 0 0 1px rgba(91,231,255,.10) inset,
      0 0 18px rgba(91,231,255,.08);
}

.toggle-link:hover{
    transform:translateY(-1px);
}

.expand-item{
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(91,231,255,.14);
    box-shadow:
      0 0 18px rgba(91,231,255,.05),
      0 14px 30px rgba(0,0,0,.26);
}

.expand-item img{
    width:100%;
    height:auto;
    display:block;
}

/* =========================
   버튼 고급화
========================= */

.event-btn{
    height:60px;
    border-radius:18px;
    margin-top:12px;
    font-size:17px;
    font-weight:800;
    letter-spacing:-0.03em;
    background:
      linear-gradient(90deg, rgba(10,17,34,.98), rgba(23,34,64,.98));
    border:1px solid rgba(91,231,255,.24);
    box-shadow:
      0 0 0 1px rgba(91,231,255,.08) inset,
      0 0 18px rgba(91,231,255,.12),
      0 10px 24px rgba(0,0,0,.28);
}

.event-btn:hover{
    transform:translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(91,231,255,.12) inset,
      0 0 26px rgba(91,231,255,.18),
      0 14px 30px rgba(0,0,0,.34);
}

/* =========================
   어드민 가독성 향상
========================= */

.admin-top h1{
    font-size:32px;
    font-weight:800;
    letter-spacing:-0.04em;
}

.panel{
    border-radius:26px;
    padding:20px;
}

.panel h2{
    font-size:24px;
    font-weight:800;
    letter-spacing:-0.04em;
}

label{
    font-size:14px;
    font-weight:800;
    letter-spacing:-0.02em;
}

input[type=text],
input[type=url],
input[type=password],
input[type=number],
textarea,
select{
    min-height:48px;
    font-size:15px;
    border-radius:16px;
    padding:14px 15px;
    background:rgba(8,14,29,.94);
    border:1px solid rgba(91,231,255,.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);
}

textarea{
    min-height:170px;
}

.btn,
.btn-outline,
.btn-danger{
    min-width:96px;
    height:44px;
    border-radius:14px;
    font-size:14px;
    font-weight:800;
}

.btn-outline{
    background:rgba(10,17,34,.92);
}

.table-wrap table{
    min-width:780px;
}

th{
    font-size:14px;
    font-weight:800;
}

td{
    font-size:14px;
    line-height:1.6;
}

.thumb{
    width:110px;
    height:72px;
    border-radius:14px;
}

/* =========================
   통계 카드
========================= */

.stat{
    border-radius:20px;
    padding:18px;
    background:
      linear-gradient(180deg, rgba(9,16,32,.96), rgba(12,20,38,.92));
    border:1px solid rgba(91,231,255,.16);
    box-shadow:
      0 0 18px rgba(91,231,255,.05),
      inset 0 0 0 1px rgba(255,255,255,.02);
}

.stat strong{
    font-size:13px;
    font-weight:700;
}

.stat span{
    font-size:30px;
    font-weight:800;
    letter-spacing:-0.05em;
}

/* =========================
   로그인 페이지
========================= */

.login-card{
    border-radius:28px;
    padding:30px;
    box-shadow:
      0 0 24px rgba(91,231,255,.08),
      0 24px 70px rgba(0,0,0,.42);
}

.login-card h1{
    font-size:30px;
    font-weight:800;
    letter-spacing:-0.05em;
}

/* =========================
   모바일
========================= */

@media (max-width: 768px){
    .site-wrap{
        width:min(560px, calc(100% - 14px));
    }

    .admin-wrap{
        width:min(850px, calc(100% - 14px));
    }

    .hero{
        padding:20px 0 10px;
    }

    .hero h1{
        font-size:32px;
    }

    .desc-box{
        padding:20px 16px 22px;
    }

    .desc-title{
        font-size:17px;
    }

    .desc-text{
        font-size:14px;
        line-height:1;
    }

    .event-btn{
        height:56px;
        font-size:16px;
    }
}

@media (max-width: 768px){
    body::after{
        display:none !important;
    }

    .event-main,
    .panel,
    .login-card,
    .telegram-float,
    .toggle-link,
    .expand-item{
        backdrop-filter:none !important;
    }

    .event-main,
    .panel,
    .login-card{
        box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
    }

    .telegram-float{
        box-shadow:
            0 0 10px rgba(91,231,255,.16),
            0 8px 18px rgba(0,0,0,.24) !important;
    }

    .telegram-float::before{
        display:none !important;
    }

    *{
        -webkit-tap-highlight-color: transparent;
    }
}