/* =========================
   Reset
========================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
    "Pretendard",
    "Noto Sans KR",
    sans-serif;

    background:#f6f8fc;

    color:#222;

    line-height:1.7;

}



/* =========================
   공통
========================= */

.container{

    width:100%;
    max-width:1000px;

    margin:auto;

    padding:40px 20px 80px;

}

.card{

    background:white;

    border-radius:25px;

    padding:40px;

    margin-top:40px;

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

}

.section-title{

    text-align:center;

    margin-bottom:35px;

}

.section-title h2{

    font-size:2rem;

    margin-bottom:10px;

}

.section-title p{

    color:#666;

}

a{

    color:inherit;

    text-decoration:none;

}
/* =========================
   Hero
========================= */

.hero{

    text-align:center;

    padding:30px 20px 50px;

}

.back-home{

    display:inline-block;

    margin-bottom:25px;

    color:#4f7cff;

    font-weight:700;

}

.hero-icon{

    display:block;

    font-size:5rem;

    margin-bottom:20px;

}

.hero h1{

    font-size:3rem;

    margin-bottom:20px;

}

.hero-description{

    color:#666;

    font-size:1.1rem;

    line-height:1.8;

}
/* =========================
   참가자 설정
========================= */

.people-setting{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

}

.count-btn{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#4f7cff;

    color:white;

    font-size:2rem;

    cursor:pointer;

    transition:.25s;

}

.count-btn:hover{

    transform:scale(1.08);

    background:#3768f4;

}

.people-count{

    text-align:center;

}

.people-count strong{

    display:block;

    font-size:2rem;

}

.people-count span{

    color:#777;

}
/* =========================
   참가자 입력
========================= */

#playerList{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.player-input{

    width:100%;

    padding:18px;

    border:2px solid #e3e7ee;

    border-radius:15px;

    font-size:1rem;

    transition:.25s;

}

.player-input:focus{

    outline:none;

    border-color:#4f7cff;

    box-shadow:0 0 0 5px rgba(79,124,255,.12);

}
/* =========================
   룰렛
========================= */

/* ==========================
   Roulette
========================== */

.roulette-area{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:40px;

}

.roulette-wrapper{

    position:relative;

    width:500px;

    height:500px;

    margin:0 auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

#rouletteCanvas{

    display:block;

}

.roulette-pointer{

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    z-index:100;

}

.pointer{

    width:0;

    height:0;

    border-left:18px solid transparent;

    border-right:18px solid transparent;

    border-top:32px solid #ff4d4f;

    filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));

}
/* =========================
   돌리기 버튼
========================= */

.spin-button{

    position:absolute;

    width:120px;

    height:120px;

    border:none;

    border-radius:50%;

    background:#4f7cff;

    color:white;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    font-size:1.2rem;

    font-weight:700;

    transition:.25s;

    z-index:10;

}

.spin-button:hover{

    transform:scale(1.06);

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

}

.spin-button:active{

    transform:scale(.96);

}

.spin-button:disabled{

    opacity:0.8;

    cursor:not-allowed;

}

.spin-button span{

    font-size:.95rem;

}
/* =========================
   안내
========================= */

.info-box{

    margin-top:50px;

    background:white;

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.07);

}

.info-box h2{

    margin-bottom:20px;

}

.info-box p{

    color:#666;

    margin-bottom:15px;

}

.warning{

    color:#ff6b6b;

    font-weight:600;

}
/* =========================
   Footer
========================= */

.footer{

    margin-top:80px;

    text-align:center;

    color:#777;

    padding-bottom:40px;

}

.footer h2{

    margin-bottom:10px;

}

.footer small{

    display:block;

    margin-top:10px;

    color:#999;

}
/* =========================
   Responsive
========================= */

@media(max-width:700px){

    .card{
        padding:25px;
    }

    .hero h1{
        font-size:2.3rem;
    }

    .hero-icon{
        font-size:4rem;
    }

    .roulette-wrapper{
        width:340px;
        height:340px;
    }

    .spin-button{
        width:90px;
        height:90px;
        font-size:1rem;
    }

    .spin-button span{
        font-size:.8rem;
    }

    .roulette-pointer{
        font-size:2.2rem;
        top:-8px;
    }

}


/* =========================
   결과 팝업
========================= */

.modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.hidden{

    display:none;

}

.modal-content{

    background:white;

    border-radius:30px;

    padding:45px;

    width:90%;

    max-width:430px;

    text-align:center;

    animation:popup .25s ease;

}

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.winner-emoji{

    font-size:4rem;

    margin-bottom:20px;

}

#winnerName{

    font-size:2.6rem;

    margin:20px 0;

    color:#4f7cff;

}

.modal-buttons{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.modal-buttons button{

    flex:1;

    border:none;

    border-radius:15px;

    padding:15px;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

#spinAgainButton{

    background:#f1f3f7;

}

#spinAgainButton:hover{

    background:#e5e8ef;

}

#closeModalButton{

    background:#4f7cff;

    color:white;

}

#closeModalButton:hover{

    background:#3768f4;

}

/* ==========================
   룰렛 화살표
========================== */

.roulette-area{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.roulette-pointer{

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    z-index:20;

}

.pointer{

    width:0;

    height:0;

    border-left:18px solid transparent;

    border-right:18px solid transparent;

    border-top:35px solid #ff3b30;

    filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));

}
/* =========================================================
   콘텐츠/가이드 섹션 (읽을거리 · EEAT용)
========================================================= */
.nb-guide{ max-width:820px; margin:50px auto 0; text-align:left; }
.nb-guide h2{ font-size:1.55rem; margin:0 0 16px; color:#222; }
.nb-guide h3{ font-size:1.15rem; margin:28px 0 10px; color:#2b3a99; }
.nb-guide p{ color:#555; margin-bottom:14px; line-height:1.85; }
.nb-guide .lead{ color:#333; font-size:1.05rem; }
.nb-guide b{ color:#222; }

.nb-story{
    background:linear-gradient(135deg,#eef3ff,#f4f0ff);
    border:1px solid #e2e8ff;
    border-radius:20px;
    padding:26px 28px;
    margin:22px 0;
    color:#333;
    line-height:1.95;
}
.nb-story strong{ color:#3a49b8; }

.nb-example{
    background:#fff;
    border:1px solid #eef1f7;
    border-left:5px solid #4f7cff;
    border-radius:14px;
    padding:22px 24px;
    margin:20px 0;
    box-shadow:0 10px 26px rgba(30,40,90,.06);
}
.nb-example .ex-title{ display:block; font-weight:800; color:#2b3a99; margin-bottom:14px; }
.nb-example .ex-row{
    display:flex; justify-content:space-between; gap:14px;
    padding:8px 0; border-bottom:1px dashed #eceff5; color:#555;
}
.nb-example .ex-row:last-child{ border-bottom:none; }
.nb-example .ex-bad{ color:#e5484d; font-weight:700; }
.nb-example .ex-good{ color:#1a9c6b; font-weight:700; }

.nb-faq{ margin-top:10px; }
.nb-faq details{
    background:#fff; border:1px solid #eef1f7; border-radius:14px;
    margin-bottom:12px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.nb-faq summary{
    cursor:pointer; list-style:none; padding:18px 22px;
    font-weight:700; color:#222; position:relative;
}
.nb-faq summary::-webkit-details-marker{ display:none; }
.nb-faq summary::after{
    content:"+"; position:absolute; right:20px; top:50%;
    transform:translateY(-50%); color:#4f7cff; font-size:1.35rem;
}
.nb-faq details[open] summary::after{ content:"\2212"; }
.nb-faq details p{ padding:0 22px 20px; margin:0; color:#555; line-height:1.85; }

@media(max-width:600px){
    .nb-guide h2{ font-size:1.32rem; }
    .nb-example .ex-row{ flex-direction:column; gap:2px; }
}