/* ==============================
   RESET / BASE
============================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==============================
   CLICKABLE ELEMENTS
============================== */

button,
a,
.category-btn,
.menu-card,
.footer-btn,
.close-btn,
.modal-link{
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;

    -webkit-tap-highlight-color:transparent;

    -webkit-touch-callout:none;
}

:root{
    --bg:#07152d;
    --bg2:#10254c;
    --text:#ffffff;
    --sub:#c9d4ec;
    --cyan:#37d7ff;
}

body{
    font-family:"Pretendard",sans-serif;
    color:var(--text);
    background:linear-gradient(90deg,var(--bg),var(--bg2));
    min-height:100vh;
}

/* ==============================
   HEADER
============================== */

header{
    text-align:center;
    padding:60px 20px;
}

header h1{
    font-size:3rem;
    font-weight:800;
}

header p{
    color:var(--sub);
}

/* ==============================
   SEARCH
============================== */

.search{
    width:90%;
    max-width:900px;
    margin:50px auto 20px;
}

.search input{
    width:100%;
    padding:16px 20px;
    border-radius:50px;
    border:none;
    outline:none;
    background:#122a56;
    color:white;
}

/* ==============================
   CATEGORY BAR
============================== */

.category-bar{
    width:90%;
    max-width:900px;
    margin:10px auto 40px;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;

    position:sticky;
    top:0;
    z-index:999;

    backdrop-filter: blur(10px);
    background: rgba(7, 21, 45, 0.85);

    padding:10px 0;
}

.category-btn{
    padding:10px 16px;
    border-radius:999px;

    border:1px solid rgba(255,255,255,.15);
    background:rgba(18,42,86,.6);

    color:#c9d4ec;

    font-size:.85rem;
    font-weight:600;

    cursor:pointer;
    transition:.25s;

    white-space:nowrap;

    box-sizing:border-box;
}

.category-btn:hover{
    transform:translateY(-2px);
    border-color:#37d7ff;
    color:white;
}

.category-btn.active{
    background:linear-gradient(90deg,#2dc8ff,#bb72ff);
    color:white;
    border-color:transparent;
    box-shadow:0 0 15px rgba(55,215,255,.25);
}

/* ==============================
   SECTION TITLE
============================== */

.section-title{
    width:90%;
    max-width:1400px;
    margin:0 auto 30px;
    font-size:1.8rem;
}

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

footer{
    padding-top:18px;
    text-align:center;
}

/* ==============================
   MENU GRID
============================== */

.menu-grid{
    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:20px;
    align-items:stretch;
}

.menu-card{
    min-height:120px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:linear-gradient(180deg,rgba(7,22,52,.9),rgba(4,13,32,.95));
    border:2px solid rgba(55,215,255,.45);

    border-radius:20px;

    padding:22px 15px;

    text-align:center;
    color:white;
    text-decoration:none;

    transition:.25s;

    box-sizing:border-box;
}

.menu-card:hover{
    transform:translateY(-6px);
    border-color:var(--cyan);
    box-shadow:0 0 25px rgba(55,215,255,.35);
}

/* ==============================
   GUILD GRID
============================== */

.guild-grid{
    width:90%;
    max-width:1600px;
    margin:auto;
    margin-bottom:18px;

    display:grid;
    gap:24px;
}

/* 추천 / 전체 */
#featuredGuilds{
    grid-template-columns:repeat(4,1fr);
}

#guildContainer{
    grid-template-columns:repeat(6,1fr);
}

/* ==============================
   CARD
============================== */

.guild-card{
    display:flex;
    flex-direction:column;

    background:linear-gradient(180deg,rgba(10,24,52,.95),rgba(5,13,30,.95));
    border-radius:24px;
    overflow:hidden;

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

    transition:.3s;

    opacity:0;
    transform:translateY(20px);
    animation:fadeInUp .35s ease forwards;
}

@keyframes fadeInUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.guild-card:hover{
    transform:translateY(-8px);
    border-color:var(--cyan);
    box-shadow:
        0 0 15px rgba(55,215,255,.25),
        0 0 40px rgba(55,215,255,.15);
}

/* ==============================
   IMAGE
============================== */

.guild-image{
    width:100%;
    aspect-ratio:16/10;
    background:#08142f;
}

.guild-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==============================
   CONTENT
============================== */

.guild-content{
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.guild-top-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.guild-name{
    font-size:1.1rem;
    font-weight:700;
}

.guild-member{
    font-size:.85rem;
    color:#9eb4df;
}

.guild-description{
    font-size:.9rem;
    color:#c5d3ef;
    line-height:1.4;
}

/* ==============================
   BADGES
============================== */

.guild-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    min-height:28px;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    white-space:nowrap;

    font-size:.75rem;
    padding:4px 10px;
    border-radius:999px;
    font-weight:700;

    line-height:1;
    box-sizing:border-box;
}

/* RANK */
.badge.rank{
    background:#d4a300;
    color:#1a1a1a;
    box-shadow:0 0 10px rgba(212,163,0,.25);
}

/* HOT */
.badge.hot{
    background:#ff3b3b;
    color:#fff;
    box-shadow:0 0 10px rgba(255,59,59,.25);
}

/* NEW */
.badge.new{
    background:#6CFF7A;
    color:#0b1d0f;
    box-shadow:0 0 10px rgba(108,255,122,.25);
}

/* 모집중 */
.badge.recruit,
.badge.open{
    background:#2d7dff;
    color:#fff;
    box-shadow:0 0 10px rgba(45,125,255,.25);
}

/* 모집중단 */
.badge.closed{
    background:#6b7280;
    color:#fff;
    box-shadow:0 0 10px rgba(107,114,128,.25);
}

/* ==============================
   FOOTER (가입조건 동일 문제 해결)
============================== */

.guild-footer{
    display:flex;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-btn{
    flex:1;

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

    height:50px;

    padding:0;
    margin:0;

    border:0;

    font-size:15px;
    font-weight:700;

    line-height:1;

    color:white;
    text-decoration:none;

    cursor:pointer;

    transition:.2s;

    box-sizing:border-box;
}

.footer-btn.left{ background:#2dc8ff; }
.footer-btn.right{ background:#bb72ff; }

.footer-btn:hover{
    filter:brightness(1.1);
}

.footer-btn:active{
    transform:scale(0.96);
}

/* ==============================
   MODAL
============================== */

.modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    overflow-y:auto;

    padding:40px 20px;

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:9999;
}

.modal.show{
    opacity:1;
    visibility:visible;
}

.modal-content{
    position:relative;

    width:90%;
    max-width:520px;
    max-height:90vh;
    overflow-y:auto;
    background:#0b1d3d;
    border-radius:16px;
    padding:20px;

    transform:translateY(40px);
    transition:.3s;
}

.modal.show .modal-content{
    transform:translateY(0);
}

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

@media (max-width:1024px){
    #featuredGuilds{ grid-template-columns:repeat(3,1fr); }
    #guildContainer{ grid-template-columns:repeat(4,1fr); }
    .menu-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:768px){
    .menu-grid{
        grid-template-columns:repeat(3,1fr);
        gap:12px;
    }

    .menu-card{
        min-height:100px;
        padding:14px 10px;
    }

    .menu-card h2{ font-size:1rem; }
    .menu-card span{ font-size:.75rem; }

    #featuredGuilds{ grid-template-columns:repeat(2,1fr); }
    #guildContainer{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
    #featuredGuilds,
    #guildContainer{
        grid-template-columns:1fr;
    }

    header h1{
        font-size:2rem;
    }
}

/* ==========================================
   MODAL
========================================== */

.modal{
    position:fixed;
    inset:0;

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

    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:opacity .25s ease, visibility .25s ease;
    will-change:opacity;

    z-index:99999;
}

.modal.show{
    opacity:1;
    visibility:visible;
}


/* ==========================================
   MODAL BOX
========================================== */

.modal-content{

    width:92%;
    max-width:900px;
    max-height:90vh;
    overflow-y:auto;

    background:linear-gradient(
        180deg,
        #10254c 0%,
        #081730 100%
    );

    border:2px solid rgba(55,215,255,.25);

    border-radius:24px;

    box-shadow:
        0 0 35px rgba(55,215,255,.18),
        0 15px 50px rgba(0,0,0,.55);

    transform:translateY(40px) scale(.96);

    transition:transform .3s ease;
    will-change:transform;
}

.modal.show .modal-content{

    transform:translateY(0) scale(1);

}


/* ==========================================
   TOP
========================================== */

.modal-top{

    position:relative;

    display:flex;

    gap:28px;

    padding:28px;

}


/* ==========================================
   LEFT BANNER
========================================== */

.modal-banner{

    width:300px;
    flex-shrink:0;

    border-radius:18px;

    overflow:hidden;

    background:#08142f;

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

}

.modal-banner img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

}


/* ==========================================
   RIGHT
========================================== */

.modal-info{

    flex:1;

    display:flex;
    flex-direction:column;

}


/* ==========================================
   TITLE
========================================== */

.modal-title{

    font-size:34px;

    font-weight:800;

    color:white;

    margin-bottom:25px;

}


/* ==========================================
   CLOSE
========================================== */

.close-btn{
    position:absolute;

    top:18px;
    right:18px;

    z-index:10001;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:#233f74;

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:background .2s, transform .2s;
}

.close-btn:hover{

    background:#37d7ff;

    transform:rotate(90deg);

}


/* ==========================================
   INFO GRID
========================================== */

.modal-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}


/* ==========================================
   CARD
========================================== */

.info-card{

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

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

    border-radius:16px;

    padding:15px;

}


.info-title{

    font-size:13px;

    color:#7ca4d9;

    margin-bottom:8px;

    font-weight:700;

}

.info-value{

    font-size:18px;

    color:white;

    font-weight:700;

    line-height:1.5;

}


/* ==========================================
   CONDITION
========================================== */

.condition-box{

    margin-top:20px;

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

    border-radius:18px;

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

    padding:20px;

}

.condition-title{

    color:#7ca4d9;

    font-weight:700;

    margin-bottom:14px;

}

.condition-box ul{

    padding-left:22px;

}

.condition-box li{

    margin:8px 0;

    color:#dde7ff;

    line-height:1.6;

}


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

.modal-footer{

    margin-top:25px;

    display:flex;

    justify-content:flex-end;

}


/* 문의하기 */

.modal-link{

    padding:14px 34px;

    border-radius:12px;

    text-decoration:none;

    background:linear-gradient(
        90deg,
        #2dc8ff,
        #53e0ff
    );

    color:white;

    font-weight:700;

    transition:.2s;

}

.modal-link:hover{

    transform:translateY(-2px);

    box-shadow:0 0 20px rgba(45,200,255,.35);

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:900px){

.modal-top{

    flex-direction:column;

}

.modal-banner{

    width:100%;

}

.modal-grid{

    grid-template-columns:1fr;

}

.modal-title{

    font-size:28px;

}

.modal-footer{

    justify-content:center;

}

.modal-link{

    width:100%;

    text-align:center;

}

}