:root{
    --bg:#050505;
    --panel:rgba(18,18,18,.88);
    --line:rgba(255,255,255,.09);
    --text:#f4f4f4;
    --muted:#9d9d9d;
    --point:#ffffff;
    --point2:#d8d8d8;
    --danger:#34161c;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    min-height:100vh;
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    letter-spacing:-.02em;
    color:var(--text);
    background:
        radial-gradient(circle at 12% 18%,rgba(255,255,255,.045),transparent 24%),
        radial-gradient(circle at 88% 8%,rgba(255,255,255,.035),transparent 28%),
        radial-gradient(circle at 50% 90%,rgba(255,255,255,.025),transparent 26%),
        linear-gradient(180deg,#030303 0%,#0a0a0a 45%,#141414 100%);
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:38px 38px;
    opacity:.18;
    mask-image:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.12));
}



.site-wrap{
    width:min(1180px,calc(100% - 28px));
    margin:0 auto;
    position:relative;
    z-index:2;
    padding:28px 0 52px;
}

.hero{
    text-align:center;
    padding:16px 0 24px;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    box-shadow:0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.18);
}

.hero h1{
    margin:14px 0 8px;
    font-size:clamp(32px,5vw,58px);
    line-height:1.02;
    font-weight:900;
    letter-spacing:-.06em;
    color:#fff;
    text-shadow:0 18px 44px rgba(0,0,0,.45);
}

.hero p{
    margin:0;
    color:var(--muted);
    line-height:1.65;
}

/* =========================
   MAIN BANNER GRID
========================= */

.banner-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:22px;
}

.banner-card{
    width:calc((100% - 44px) / 3);
}

.banner-card{
    display:flex;
    flex-direction:column;
    min-height:100%;
    text-decoration:none;
    color:inherit;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(24,24,24,.96),rgba(8,8,8,.98));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 22px 56px rgba(0,0,0,.56);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.banner-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 32px 76px rgba(0,0,0,.72);
}

.banner-img{
    position:relative;
    background:#111;
    overflow:hidden;
}

.banner-img::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.05) 38%,transparent 76%);
    transform:translateX(-120%);
    transition:transform .75s ease;
}

.banner-card:hover .banner-img::after{
    transform:translateX(120%);
}

.banner-img img{
    display:block;
    width:100%;

    object-fit:cover;
}

.banner-placeholder{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    font-weight:900;
    color:#cfcfcf;
    background:linear-gradient(135deg,#252525,#111);
}

.banner-body{
    flex:1;
    padding:22px 20px 24px;
    text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(232,232,232,.96));
    color:#08111a;
}

/* 제목 잘 보이게 */
.banner-body h2{
    display:inline-block;
    position:relative;
    margin:0 0 20px;
    padding:8px 16px 9px;
    border-radius:999px;
    font-size:22px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.045em;
    color:#fff;
    background:linear-gradient(180deg,#202020,#080808);
    border:1px solid rgba(0,0,0,.28);
    box-shadow:
        0 8px 18px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.16);
}



.banner-body p{
    margin:0;
    font-size:15px;
    line-height:1;
    white-space:normal;
    color:#222;
}

/* =========================
   FOOTER TELEGRAM
========================= */

.footer-contact{
    margin:60px auto 0;
    max-width:560px;
    text-align:center;
}

.footer-image{
    margin-bottom:16px;
}

.footer-image img{
    display:block;
    width:100%;
    height:auto;
    border-radius:26px;

    box-shadow:0 18px 45px rgba(0,0,0,.46);
}

/* 텔레그램 버튼 잘 보이게 */
.telegram-bottom{
    width:100%;
    min-height:70px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;

    text-decoration:none;

    border-radius:999px;

    color:#fff;

    background:
        linear-gradient(180deg,
        #2AABEE 0%,
        #229ED9 100%);

    border:1px solid rgba(255,255,255,.20);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 14px 34px rgba(34,158,217,.34),
        0 10px 24px rgba(0,0,0,.38);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.telegram-bottom:hover{
    transform:translateY(-3px);

    border-color:rgba(255,255,255,.34);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 18px 40px rgba(34,158,217,.45),
        0 12px 30px rgba(0,0,0,.42);
}

.telegram-icon{
    width:44px;
    height:44px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#229ED9;

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(255,255,255,.10),
        0 10px 20px rgba(0,0,0,.20);
}

.telegram-icon svg{
    width:22px;
    height:22px;
}

.telegram-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    line-height:1.1;
}

.telegram-text strong{
    font-size:18px;
    font-weight:900;

    color:#fff;

    text-shadow:
        0 2px 8px rgba(0,0,0,.18);
}

.telegram-text small{
    margin-top:5px;

    color:rgba(255,255,255,.92);

    font-size:12px;
    font-weight:800;
}

.empty-box{
    padding:22px;

    border-radius:22px;

    text-align:center;

    background:rgba(18,18,18,.74);

    border:1px dashed rgba(255,255,255,.14);

    color:var(--muted);
}

/* =========================
   ADMIN
========================= */

.admin-wrap{
    width:min(850px,calc(100% - 24px));
    margin:0 auto;
    position:relative;
    z-index:2;
    padding:28px 0 52px;
}

.admin-top{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
}

.admin-top h1{
    margin:0;
    font-size:32px;
    font-weight:900;
    letter-spacing:-.055em;
}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.panel{
    margin-bottom:18px;
    padding:20px;
    border-radius:26px;
    background:linear-gradient(180deg,rgba(20,20,20,.92),rgba(8,8,8,.98));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 22px 60px rgba(0,0,0,.55);
}

.panel h2{
    margin:0 0 14px;
    font-size:24px;
    font-weight:900;
    letter-spacing:-.05em;
}

.form-grid{
    display:grid;
    gap:12px;
}

.form-row{
    display:grid;
    gap:8px;
}

label{
    color:#e5e5e5;
    font-size:14px;
    font-weight:900;
}

input[type=text],
input[type=url],
input[type=password],
input[type=number],
textarea,
select{
    width:100%;
    min-height:48px;
    padding:14px 15px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:#101010;
    color:#fff;
    outline:none;
    font-family:inherit;
    font-size:15px;
}

textarea{
    min-height:170px;
    resize:vertical;
}

input[type=file]{
    color:#cfcfcf;
}

.btn,
.btn-outline,
.btn-danger{
    appearance:none;
    border:0;
    cursor:pointer;
    text-decoration:none;
    min-width:96px;
    height:44px;
    padding:0 14px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:14px;
    font-family:inherit;
}

.btn{
    color:#000;
    background:linear-gradient(180deg,#fff,#dcdcdc);
    box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.btn-outline{
    color:var(--text);
    background:#151515;
    border:1px solid rgba(255,255,255,.10);
}

.btn-outline:hover{
    border-color:rgba(255,255,255,.20);
}

.btn-danger{
    color:#fff;
    background:var(--danger);
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.stat{
    padding:18px;
    border-radius:20px;
    background:linear-gradient(180deg,rgba(28,28,28,.96),rgba(10,10,10,.98));
    border:1px solid rgba(255,255,255,.09);
}

.stat strong{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:8px;
}

.stat span{
    display:block;
    font-size:30px;
    font-weight:900;
    letter-spacing:-.05em;
}

.table-wrap{
    overflow:auto;
}

table{
    width:100%;
    min-width:780px;
    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;
    line-height:1.6;
}

th{
    color:#fff;
    font-weight:900;
}

.thumb{
    width:110px;
    height:72px;
    object-fit:cover;
    border-radius:14px;
    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:30px;
    border-radius:28px;
    background:linear-gradient(180deg,rgba(22,22,22,.96),rgba(8,8,8,.98));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 30px 80px rgba(0,0,0,.68);
}

.login-card h1{
    margin:0 0 18px;
    text-align:center;
    font-size:30px;
    font-weight:900;
}

.small{
    font-size:13px;
    color:var(--muted);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:980px){
    .banner-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){


    .site-wrap{
        width:100%;
        max-width:100%;
        padding:18px 14px 42px;
    }

    .banner-grid{
        width:100%;
        grid-template-columns:1fr;
        gap:18px;
    }

    .banner-card{
        width:100%;
        max-width:100%;
        border-radius:22px;
        box-shadow:0 12px 28px rgba(0,0,0,.44);
    }

    .banner-img img{
        width:100%;
        height:auto;
        aspect-ratio:auto;
        object-fit:contain;
    }

    .banner-body{
        padding:20px 16px 22px;
    }

    .banner-body h2{
        font-size:20px;
        padding:7px 14px 8px;
    }

    .banner-body p{
        font-size:14px;
        line-height:1;
    }

    .footer-contact{
        width:100%;
        max-width:100%;
        padding:0;
        margin-top:26px;
    }

    .telegram-bottom{
        min-height:62px;
    }

    .telegram-icon{
        width:40px;
        height:40px;
    }

    .telegram-text strong{
        font-size:16px;
    }

    .telegram-text small{
        font-size:11px;
    }

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

    .grid-3{
        grid-template-columns:1fr;
    }

    .panel,
    .login-card{
        box-shadow:0 12px 28px rgba(0,0,0,.44);
    }
}

.main-img{
    display:flex;
    justify-content:center;
}

.main-img img{
    display:block;
}

@media(max-width:768px){

    .main-img img{
        width:100%;
        height:auto;
    }

}
/* =========================
   모바일 텔레그램 플로팅
========================= */

@media(max-width:768px){

    .footer-contact{
        margin-bottom:90px;
    }

    .telegram-bottom{
        position:fixed;

        left:14px;
        right:14px;
        bottom:14px;

        width:auto;

        min-height:58px;

        z-index:9999;

        border-radius:18px;

        backdrop-filter:blur(10px);

        animation:telegramFloat 2.2s ease-in-out infinite;
    }

    .telegram-icon{
        width:38px;
        height:38px;
    }

    .telegram-icon svg{
        width:20px;
        height:20px;
    }

    .telegram-text strong{
        font-size:16px;
    }

    .telegram-text small{
        font-size:11px;
    }
}

/* 둥실둥실 */

@keyframes telegramFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }
}

/* 제목 빛 샥 지나가는 효과 */
.banner-body h2{
    position:relative;
    overflow:hidden;
}

.banner-body h2::before{
    content:"";
    position:absolute;
    top:-80%;
    left:-45%;

    width:22%;
    height:260%;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.08) 25%,
        rgba(255,255,255,.85) 50%,
        rgba(255,255,255,.08) 75%,
        transparent 100%
    );

    transform:rotate(20deg);
    pointer-events:none;

    animation:titleShine 2.8s ease-in-out infinite;
}

@keyframes titleShine{
    0%{
        left:-45%;
        opacity:0;
    }

    8%{
        opacity:1;
    }

    22%{
        left:125%;
        opacity:1;
    }

    28%{
        opacity:0;
    }

    100%{
        left:125%;
        opacity:0;
    }
}

/* =========================
   CINEMATIC 3D PARTICLES
========================= */

.particle-bg{
    position:fixed;
    inset:0;

    z-index:1;
    pointer-events:none;
    overflow:hidden;

    perspective:1200px;
}

/* 공통 */

.particle-bg span{
    position:absolute;
    display:block;

    border-radius:50%;

    background:rgba(255,255,255,.55);

    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

/* 가까운 입자 */

.particle-bg span:nth-child(1),
.particle-bg span:nth-child(4),
.particle-bg span:nth-child(7),
.particle-bg span:nth-child(10){

    width:14px;
    height:14px;

    filter:blur(.5px);

    box-shadow:
        0 0 18px rgba(255,255,255,.35),
        0 0 40px rgba(255,255,255,.18);

    opacity:.95;

    animation:particleNear 11s linear infinite;
}

/* 중간 */

.particle-bg span:nth-child(2),
.particle-bg span:nth-child(5),
.particle-bg span:nth-child(8),
.particle-bg span:nth-child(11){

    width:9px;
    height:9px;

    filter:blur(1px);

    box-shadow:
        0 0 12px rgba(255,255,255,.18);

    opacity:.65;

    animation:particleMid 16s linear infinite;
}

/* 먼 입자 */

.particle-bg span:nth-child(3),
.particle-bg span:nth-child(6),
.particle-bg span:nth-child(9),
.particle-bg span:nth-child(12){

    width:5px;
    height:5px;

    filter:blur(2px);

    opacity:.28;

    animation:particleFar 24s linear infinite;
}

/* 위치 */

.particle-bg span:nth-child(1){left:6%; top:105%; animation-delay:-1s;}
.particle-bg span:nth-child(2){left:18%; top:102%; animation-delay:-4s;}
.particle-bg span:nth-child(3){left:28%; top:108%; animation-delay:-2s;}
.particle-bg span:nth-child(4){left:40%; top:104%; animation-delay:-7s;}
.particle-bg span:nth-child(5){left:52%; top:106%; animation-delay:-5s;}
.particle-bg span:nth-child(6){left:62%; top:102%; animation-delay:-9s;}
.particle-bg span:nth-child(7){left:73%; top:108%; animation-delay:-3s;}
.particle-bg span:nth-child(8){left:82%; top:105%; animation-delay:-8s;}
.particle-bg span:nth-child(9){left:91%; top:109%; animation-delay:-6s;}
.particle-bg span:nth-child(10){left:12%; top:112%; animation-delay:-10s;}
.particle-bg span:nth-child(11){left:58%; top:111%; animation-delay:-11s;}
.particle-bg span:nth-child(12){left:95%; top:113%; animation-delay:-12s;}
/* 추가 입자 */

.particle-bg span:nth-child(13){
    left:8%;
    top:118%;
    width:12px;
    height:12px;
    animation:particleNear 13s linear infinite;
    animation-delay:-13s;
}

.particle-bg span:nth-child(14){
    left:24%;
    top:114%;
    width:8px;
    height:8px;
    animation:particleMid 18s linear infinite;
    animation-delay:-14s;
}

.particle-bg span:nth-child(15){
    left:36%;
    top:120%;
    width:5px;
    height:5px;
    animation:particleFar 26s linear infinite;
    animation-delay:-15s;
}

.particle-bg span:nth-child(16){
    left:57%;
    top:116%;
    width:13px;
    height:13px;
    animation:particleNear 12s linear infinite;
    animation-delay:-16s;
}

.particle-bg span:nth-child(17){
    left:76%;
    top:119%;
    width:9px;
    height:9px;
    animation:particleMid 17s linear infinite;
    animation-delay:-17s;
}

.particle-bg span:nth-child(18){
    left:92%;
    top:121%;
    width:5px;
    height:5px;
    animation:particleFar 28s linear infinite;
    animation-delay:-18s;
}

/* 가까운 입자 */

@keyframes particleNear{

    0%{
        transform:
            translate3d(0,0,0)
            scale(.7);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    50%{
        transform:
            translate3d(40px,-55vh,120px)
            scale(1.4);
    }

    100%{
        transform:
            translate3d(-20px,-120vh,220px)
            scale(.6);

        opacity:0;
    }
}

/* 중간 */

@keyframes particleMid{

    0%{
        transform:
            translate3d(0,0,0)
            scale(.9);

        opacity:0;
    }

    10%{
        opacity:.7;
    }

    50%{
        transform:
            translate3d(-20px,-45vh,60px)
            scale(1.1);
    }

    100%{
        transform:
            translate3d(18px,-110vh,100px)
            scale(.8);

        opacity:0;
    }
}

/* 먼 입자 */

@keyframes particleFar{

    0%{
        transform:
            translate3d(0,0,-80px)
            scale(1);

        opacity:0;
    }

    10%{
        opacity:.28;
    }

    100%{
        transform:
            translate3d(8px,-100vh,-160px)
            scale(.5);

        opacity:0;
    }
}

/* 컨텐츠 */

.site-wrap,
.admin-wrap{
    position:relative;
    z-index:2;
}

/* 모바일 최적화 */

@media(max-width:768px){

    .particle-bg{
        opacity:.45;
    }

    .particle-bg span{
        animation-duration:22s !important;
    }
}