/* =========================================================
   NBBang · 카드 뽑기 (실제 신용카드 스타일)
   룰렛 페이지와 동일한 톤 유지 + 리얼 카드 디자인
========================================================= */

/* ========== 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;
    -webkit-tap-highlight-color:transparent;
}

a{
    color:inherit;
    text-decoration:none;
}

/* ========== 공통 레이아웃 (룰렛과 동일) ========== */
.container{
    width:100%;
    max-width:1000px;
    margin:auto;
    padding:40px 20px 80px;
}

.card{
    background:#fff;
    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;
}

/* ========== 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:#fff;
    font-size:2rem;
    cursor:pointer;
    transition:.25s;
}

.count-btn:hover{
    transform:scale(1.08);
    background:#3768f4;
}

.count-btn:active{
    transform:scale(.94);
}

.people-count{
    text-align:center;
}

.people-count strong{
    display:block;
    font-size:2rem;
}

.people-count span{
    color:#777;
}

/* =========================================================
   실제 신용카드 스타일 (핵심)
   - 모든 내부 요소는 em 단위 → --cw(카드 너비)에 맞춰 자동 확대/축소
========================================================= */
.credit-card{
    position:relative;
    display:flex;
    flex-direction:column;
    width:var(--cw,300px);
    aspect-ratio:1.586 / 1;
    font-size:calc(var(--cw,300px) * .05);
    border-radius:.9em;
    padding:1.15em 1.25em;
    color:#f4f7ff;
    line-height:1.25;
    overflow:hidden;
    isolation:isolate;
    /* 프리미엄 메탈릭 그라데이션 */
    background:
        radial-gradient(130% 150% at 12% 8%, rgba(255,255,255,.30), rgba(255,255,255,0) 42%),
        linear-gradient(135deg,#26307d 0%,#3a49b8 34%,#4f7cff 60%,#6b5cff 82%,#2c2a86 100%);
    box-shadow:
        0 .55em 1.4em rgba(38,48,125,.35),
        inset 0 0 0 1px rgba(255,255,255,.10);
    user-select:none;
}

/* 잔무늬(길로쉬) 오버레이 */
.credit-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px),
        repeating-linear-gradient(65deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px);
    mix-blend-mode:screen;
    opacity:.6;
}

/* 대각선 광택 */
.cc-sheen{
    position:absolute;
    top:-40%;
    left:-30%;
    width:60%;
    height:180%;
    background:linear-gradient(115deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));
    transform:rotate(8deg);
    pointer-events:none;
}

/* 상단: 로고 + NFC */
.cc-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.cc-brand{
    font-size:1.4em;
    font-weight:800;
    letter-spacing:.01em;
    text-shadow:0 1px 2px rgba(0,0,0,.28);
}

.cc-nfc{
    width:1.35em;
    height:1.35em;
    opacity:.9;
    color:#f4f7ff;
}

/* 골드 EMV 칩 */
.cc-chip{
    width:2.9em;
    height:2.2em;
    margin-top:.6em;
    border-radius:.4em;
    background:
        linear-gradient(135deg,#f9edb3 0%,#d9b45e 45%,#b8923f 55%,#f4e6a5 100%);
    box-shadow:inset 0 0 0 1px rgba(120,90,20,.4);
    position:relative;
    flex-shrink:0;
}

/* 칩 내부 회로 라인 */
.cc-chip::before{
    content:"";
    position:absolute;
    inset:.32em .2em;
    border:.09em solid rgba(120,90,20,.45);
    border-radius:.18em;
    background:
        linear-gradient(to right,transparent 46%,rgba(120,90,20,.45) 46% 54%,transparent 54%),
        linear-gradient(to bottom,transparent 46%,rgba(120,90,20,.45) 46% 54%,transparent 54%);
}

/* 카드 번호 */
.cc-number{
    margin-top:.42em;
    font-size:1.2em;
    font-family:"Courier New",ui-monospace,monospace;
    font-weight:700;
    letter-spacing:.05em;
    white-space:nowrap;
    /* 양각(엠보싱) 효과 */
    color:#eaf0ff;
    text-shadow:
        0 1px 0 rgba(0,0,0,.4),
        0 -1px 0 rgba(255,255,255,.18);
}

/* 하단 영역 */
.cc-valid{
    margin-top:.32em;
    display:flex;
    align-items:baseline;
    gap:.45em;
}

.cc-label{
    display:block;
    font-size:.58em;
    letter-spacing:.18em;
    color:rgba(244,247,255,.72);
    margin-bottom:.15em;
}

.cc-valid .cc-label{
    display:inline;
    margin-bottom:0;
}

.cc-exp{
    font-size:.95em;
    font-family:"Courier New",ui-monospace,monospace;
    letter-spacing:.08em;
    color:#eaf0ff;
}

.cc-bottom{
    margin-top:auto;
    padding-top:.28em;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:.6em;
}

.cc-holder{
    min-width:0;
    flex:1;
}

/* 카드 위 이름 (입력 / 표시 공용) */
.cc-name,
.cc-name-input{
    display:block;
    width:100%;
    font-size:1.05em;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#f4f7ff;
    text-shadow:0 1px 1px rgba(0,0,0,.35);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.15;
}

.cc-name-input{
    border:none;
    background:transparent;
    border-bottom:.09em solid rgba(255,255,255,.35);
    padding:.04em 0 .02em;
    font-family:inherit;
    transition:border-color .2s;
}

.cc-name-input::placeholder{
    color:rgba(244,247,255,.5);
    letter-spacing:.05em;
    text-transform:none;
    font-weight:500;
}

.cc-name-input:focus{
    outline:none;
    border-bottom-color:#ffd35c;
}

/* 브랜드 마크 (겹친 원 · 자체 디자인) */
.cc-logo{
    display:flex;
    align-items:center;
    flex:none;
}

.cc-logo span{
    display:block;
    width:1.6em;
    height:1.6em;
    border-radius:50%;
    mix-blend-mode:screen;
}

.cc-logo span:first-child{
    background:#ff7a59;
}

.cc-logo span:last-child{
    margin-left:-.7em;
    background:#ffd35c;
}

/* ===== 카드 뒷면 ===== */
.credit-card.back{
    background:
        radial-gradient(120% 140% at 85% 15%,rgba(255,255,255,.14),transparent 45%),
        linear-gradient(135deg,#313a86,#22265e 60%,#181b45);
    padding:0;
    color:#dfe4ff;
}

.cc-stripe{
    width:100%;
    height:2.7em;
    margin-top:1.15em;
    background:#0b0d1c;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.cc-sign{
    margin:1em 1.25em 0;
    height:1.6em;
    border-radius:.2em;
    background:
        repeating-linear-gradient(45deg,#e9ecff 0 .5em,#cdd3ff .5em 1em);
    position:relative;
}

.cc-sign::after{
    content:"Nbbang";
    position:absolute;
    right:.5em;
    top:50%;
    transform:translateY(-50%);
    font-size:.75em;
    font-weight:800;
    color:#3a49b8;
    letter-spacing:.02em;
}

.cc-back-brand{
    position:absolute;
    left:0;
    right:0;
    bottom:1.1em;
    text-align:center;
    font-size:1.15em;
    font-weight:800;
    letter-spacing:.05em;
    color:rgba(223,228,255,.55);
}

.cc-back-brand small{
    display:block;
    font-size:.5em;
    font-weight:600;
    letter-spacing:.28em;
    margin-top:.2em;
    color:rgba(223,228,255,.4);
}

/* =========================================================
   준비 화면 (이름 입력 카드 그리드)
========================================================= */
.setup-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:22px;
}

.setup-grid .credit-card{
    --cw:min(320px, calc(100vw - 96px));
    flex-shrink:0;
}

.start-wrap{
    margin-top:38px;
    text-align:center;
}

.start-btn{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    border:none;
    border-radius:16px;
    padding:18px 46px;
    background:#4f7cff;
    color:#fff;
    font-size:1.2rem;
    font-weight:800;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 12px 30px rgba(79,124,255,.32);
}

.start-btn:hover{
    background:#3768f4;
    transform:translateY(-2px);
}

.start-btn:active{
    transform:translateY(0) scale(.98);
}

/* =========================================================
   플레이 무대 (셔플 & 뽑기)
========================================================= */
.stage-hint{
    text-align:center;
    font-size:1.15rem;
    font-weight:700;
    color:#3a49b8;
    min-height:1.6em;
    margin-bottom:6px;
    transition:.2s;
}

.stage-sub{
    text-align:center;
    color:#888;
    margin-bottom:26px;
}

.card-stage{
    position:relative;
    width:100%;
    margin:0 auto;
    /* 높이는 JS에서 지정 */
}

/* 무대 위 카드 (위치/회전 = outer, 뒤집기 = inner) */
.stage-card{
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,0);
    transform-origin:center bottom;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.card-stage.shuffling .stage-card{
    transition:transform .13s ease;
}

.stage-card.pickable{
    cursor:pointer;
}

/* 자동 뽑기 스윕 하이라이트 */
.stage-card.cardhi .flip{
    filter:brightness(1.32) saturate(1.08);
}

/* 뽑기 액션 버튼 */
.draw-actions{
    text-align:center;
    margin-top:28px;
}

.auto-btn{
    border:none;
    border-radius:14px;
    padding:14px 34px;
    background:#eef2ff;
    color:#3a49b8;
    font-size:1.05rem;
    font-weight:800;
    cursor:pointer;
    transition:.25s;
}

.auto-btn:hover{
    background:#e0e7ff;
    transform:translateY(-2px);
}

.auto-btn:active{
    transform:translateY(0) scale(.98);
}

.auto-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
}

.stage-card.pickable .flip:hover{
    filter:brightness(1.06);
}

.flip{
    position:relative;
    transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.4,.2,.2,1);
}

.flip.faceup{
    transform:rotateY(180deg);
}

.flip .credit-card{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.flip .credit-card.back{
    position:absolute;
    inset:0;
    transform:rotateY(0deg);
}

.flip .credit-card.front{
    transform:rotateY(180deg);
}

/* 뽑힌 카드 강조 (스케일/이동은 outer, 뒤집기는 inner가 담당) */
.stage-card.picked{
    z-index:999 !important;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
    filter:drop-shadow(0 1em 1.6em rgba(38,48,125,.4));
}

/* =========================================================
   결과 팝업 (룰렛과 동일 톤)
========================================================= */
.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:20px;
}

.hidden{
    display:none !important;
}

.modal-content{
    background:#fff;
    border-radius:30px;
    padding:45px 40px;
    width:100%;
    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:14px;
}

.modal-content .pre{
    color:#666;
}

#winnerName{
    font-size:2.6rem;
    margin:14px 0 6px;
    color:#4f7cff;
    word-break:keep-all;
}

.modal-content .post{
    font-weight:700;
    color:#333;
}

.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;
    font-size:1rem;
    transition:.25s;
}

#drawAgainButton{
    background:#f1f3f7;
}

#drawAgainButton:hover{
    background:#e5e8ef;
}

#closeModalButton{
    background:#4f7cff;
    color:#fff;
}

#closeModalButton:hover{
    background:#3768f4;
}

/* ========== 안내 / 푸터 (룰렛과 동일) ========== */
.info-box{
    margin-top:50px;
    background:#fff;
    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{
    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;
}

/* ========== 반응형 ========== */
@media(max-width:700px){
    .card{padding:25px;}
    .hero h1{font-size:2.3rem;}
    .hero-icon{font-size:4rem;}
    .start-btn{padding:16px 38px;font-size:1.1rem;}
    #winnerName{font-size:2.2rem;}
}

/* ========== 모션 최소화 ========== */
@media(prefers-reduced-motion:reduce){
    .stage-card,.flip{transition-duration:.001s !important;}
}

/* =========================================================
   콘텐츠/가이드 섹션 (읽을거리 · 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; }
}