/* restaurant/assets/css/events.css
 * 사용자 이벤트 화면 공통 보조 스타일
 * 기본 색상/레이아웃은 app.css 변수를 그대로 사용한다.
 */
.event-wrap {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 24px 14px;
}

.event-phone {
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0 auto;
}

.event-head {
    padding: 16px 18px;
}

.event-head .gate-status {
    margin-bottom: 12px;
}

.event-home-link,
.event-user-link {
    color: var(--green-dark);
    font-weight: 800;
}

.event-brand-mark {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--r);
    display: grid;
    place-items: center;
    background: var(--green);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.event-userbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--green-soft);
    color: #3b473f;
    font-size: 12px;
}

.event-userbar-links {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.event-content {
    padding: 16px 18px 20px;
}

.event-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    padding: 14px;
}

.event-card + .event-card {
    margin-top: 10px;
}

.event-card.is-soft {
    background: var(--green-soft);
    border-color: #cde2d2;
}

.event-card.is-warm {
    background: #fff9e7;
    border-color: #f0dda1;
}

.event-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 900;
}

.event-card strong {
    color: var(--ink);
}

.event-card p,
.event-card li {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.event-card p {
    margin: 5px 0 0;
}

.event-menu-list {
    margin-top: 7px;
    color: #34443a;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.55;
}

.event-rating {
    margin-top: 14px;
    padding: 18px 12px 8px;
    text-align: center;
}

.event-stars {
    display: inline-flex;
    gap: 6px;
}

.event-star {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: #d5dbd5;
    font-size: clamp(40px, 11vw, 52px);
    line-height: 1;
    cursor: pointer;
}

.event-star.is-active {
    color: var(--yellow);
}

.event-rating-help {
    min-height: 20px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}

.event-textarea {
    width: 100%;
    min-height: 88px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    resize: vertical;
    outline: none;
}

.event-textarea:focus {
    border-color: #9bc8aa;
    box-shadow: 0 0 0 3px rgba(35, 115, 77, .08);
}

.event-primary-btn {
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border: 0;
    border-radius: var(--r);
    background: var(--green);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.event-primary-btn:hover {
    background: var(--green-dark);
}

.event-foot-links {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
}

.event-result {
    padding: 28px 18px 22px;
    text-align: center;
}

.event-result-mark {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: 25px;
    font-weight: 900;
}

.event-result h2 {
    margin: 0;
    color: var(--green-dark);
    font-size: 19px;
}

.event-result-message {
    margin-top: 10px;
    color: #47564c;
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .event-wrap {
        padding: 0;
    }

    .event-phone {
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .event-userbar {
        align-items: flex-start;
    }
}


/* 공통 폼/목록 */
.event-form-label {
    display: block;
    margin-top: 12px;
    color: #34443a;
    font-size: 12px;
    font-weight: 900;
}
.event-input {
    width: 100%;
    min-height: 42px;
    margin-top: 6px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    outline: none;
}
.event-input:focus {
    border-color: #9bc8aa;
    box-shadow: 0 0 0 3px rgba(35,115,77,.08);
}
.event-message {
    margin-bottom: 10px;
    padding: 10px 11px;
    border: 1px solid #cde2d2;
    border-radius: var(--r);
    background: var(--green-soft);
    color: #34443a;
    font-size: 12px;
    line-height: 1.55;
}
.event-message.is-error {
    border-color: #efc9c3;
    background: #fff2ef;
    color: #8f3f34;
}
.event-sub-btn,
.event-danger-btn,
.event-muted-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 11px;
    border: 0;
    border-radius: var(--r);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.event-sub-btn { background: var(--green); color: #fff; }
.event-danger-btn { background: #d95c4a; color: #fff; }
.event-muted-btn { background: #eef3ea; color: #536159; }

.event-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}
.event-list-item {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    color: #34443a;
    font-size: 12px;
    line-height: 1.55;
}
.event-list-item strong {
    display: block;
    margin-bottom: 3px;
}
.event-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.event-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef3ea;
    color: #536159;
    font-size: 10.5px;
    font-weight: 900;
}
.event-badge.is-ok { background: var(--green-soft); color: var(--green-dark); }
.event-badge.is-warn { background: #fff9e7; color: #7a5a14; }

.event-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-top: 10px;
}
.event-summary-box {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    text-align: center;
}
.event-summary-box span {
    display: block;
    color: var(--muted);
    font-size: 10.5px;
}
.event-summary-box strong {
    display: block;
    margin-top: 3px;
    color: var(--green-dark);
    font-size: 18px;
}

/* ===== Event V2 games ===== */
.event-page { background: var(--bg); }
.event-topbar {
    padding: 14px 18px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #f8fcf7, #edf6ee);
}
.event-topnav { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.event-topnav a {
    display:inline-flex; align-items:center; min-height:30px; padding:0 9px;
    border:1px solid #cfe0d0; border-radius:999px; background:#fff;
    color:var(--green-dark); font-size:11px; font-weight:900;
}
.event-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.event-title-row small { display:block; color:#65806b; font-size:10px; font-weight:900; letter-spacing:.7px; }
.event-title-row h1 { margin:4px 0 0; color:var(--green-dark); font-size:22px; letter-spacing:-.7px; }
.event-title-row p { margin:5px 0 0; color:var(--muted); font-size:11.5px; line-height:1.45; }
.event-stats {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px;
    margin-bottom:12px; color:inherit; text-decoration:none;
}
.event-stats > div { padding:10px 6px; border:1px solid var(--line); border-radius:var(--r); background:#fff; text-align:center; }
.event-stats span { display:block; color:var(--muted); font-size:10px; line-height:1.25; }
.event-stats strong { display:block; margin-top:3px; color:var(--green-dark); font-size:17px; }
.event-game-card { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:14px; margin-bottom:10px; }
.event-game-card.is-soft { background:var(--green-soft); border-color:#cde2d2; }
.event-game-card.is-warm { background:#fff9e7; border-color:#efdca5; }
.event-game-card h2,.event-game-card h3 { margin:0; color:#2b3b30; }
.event-game-card h2 { font-size:18px; }
.event-game-card h3 { font-size:14px; }
.event-game-card p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.event-phase { display:inline-flex; align-items:center; min-height:23px; padding:3px 8px; border-radius:999px; font-size:10px; font-weight:900; }
.event-phase.is-active { background:#e7f5eb; color:#17643d; }
.event-phase.is-upcoming { background:#fff4d9; color:#795613; }
.event-phase.is-ended { background:#eef1ee; color:#657168; }
.event-game-meta { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:8px; }
.event-game-link {
    display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px;
    border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-bottom:8px;
}
.event-game-link strong { display:block; color:#26372c; font-size:14px; }
.event-game-link span { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.35; }
.event-game-link b { color:var(--green-dark); font-size:18px; }
.event-big-number { display:block; margin:8px 0 2px; color:var(--green-dark); font-size:38px; line-height:1; font-weight:950; letter-spacing:-1px; }
.event-dice-face {
    width:112px; height:112px; margin:14px auto; display:grid; place-items:center;
    border:1px solid #cfe0d0; border-radius:22px; background:#fff; color:var(--green-dark);
    font-size:54px; font-weight:950; box-shadow:0 10px 24px rgba(35,115,77,.08);
}
.event-dice-face.is-rolling { animation:eventDiceRoll .65s ease; }
@keyframes eventDiceRoll { 0%{transform:rotate(0) scale(1)} 35%{transform:rotate(160deg) scale(.9)} 70%{transform:rotate(300deg) scale(1.08)} 100%{transform:rotate(360deg) scale(1)} }
.event-actions-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.event-choice-btn {
    min-height:58px; border:1px solid #cbd8cc; border-radius:var(--r); background:#fff;
    color:#2e4735; font:inherit; font-size:15px; font-weight:950; cursor:pointer;
}
.event-choice-btn:hover,.event-choice-btn.is-selected { border-color:#8fbc99; background:var(--green-soft); color:var(--green-dark); }
.event-choice-btn.is-up { color:#23734d; }
.event-choice-btn.is-down { color:#a34e3e; }
.event-history { display:grid; gap:7px; margin-top:10px; }
.event-history-row { display:grid; grid-template-columns:72px 1fr auto; gap:8px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r); background:#fff; font-size:11px; }
.event-history-row span { color:var(--muted); }
.event-history-row strong { color:#34443a; }
.event-result-ok { color:var(--green-dark)!important; }
.event-result-bad { color:#b04a3b!important; }
.event-tug-item { padding:12px 0; border-bottom:1px solid var(--line); }
.event-tug-item:last-child { border-bottom:0; }
.event-tug-title { margin-bottom:8px; color:#2d3f33; font-size:13px; font-weight:900; }
.event-own-choice { margin-top:6px; color:var(--muted); font-size:10.5px; text-align:center; }
.event-jj-result { margin-top:12px; padding:13px; border-radius:var(--r); background:#f7faf5; border:1px solid var(--line); color:#405047; font-size:12px; line-height:1.55; }
.event-jj-result.is-success { background:var(--green-soft); color:var(--green-dark); border-color:#cde2d2; font-weight:900; }
.event-small-note { margin-top:8px; color:var(--muted); font-size:10.5px; line-height:1.5; }
.event-ranking { width:100%; border-collapse:collapse; margin-top:10px; }
.event-ranking th,.event-ranking td { padding:8px 6px; border-bottom:1px solid var(--line); font-size:11px; text-align:left; }
.event-ranking th { color:var(--muted); font-weight:800; }
.event-ranking td:last-child,.event-ranking th:last-child { text-align:right; }
.event-admin-link { display:inline-flex; margin-top:6px; color:var(--green-dark); font-size:11px; font-weight:900; }
@media (max-width:460px){
    .event-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    .event-actions-2{grid-template-columns:1fr 1fr;}
}

/* ===== Event home refinement 2026-09-05 ===== */
.event-title-row { justify-content:flex-start; }
.event-brand-mark { display:none !important; }

.event-activity-card {
    display:block;
    margin-bottom:14px;
    padding:12px;
    border:1px solid #cfe0d0;
    border-radius:14px;
    background:#fff;
    color:inherit;
    text-decoration:none;
    box-shadow:0 7px 20px rgba(35,83,52,.06);
}
.event-activity-card:active { background:#f8fcf9; transform:scale(.995); }
.event-activity-main { display:flex; align-items:center; gap:10px; min-width:0; }
.event-level-img { width:46px; height:46px; object-fit:contain; flex:0 0 46px; }
.event-activity-user { flex:1; min-width:0; }
.event-activity-user > span {
    display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    color:var(--muted); font-size:11px;
}
.event-level-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:4px; }
.event-level-line strong { color:var(--green-dark); font-size:17px; }
.event-level-line b {
    padding:3px 8px; border:1px solid #cfe0d0; border-radius:999px;
    background:var(--green-soft); color:#3f5c49; font-size:10.5px;
}
.event-activity-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:10px; }
.event-activity-value {
    min-width:0; padding:7px 4px; border:1px solid var(--line); border-radius:10px;
    background:#fafcfb; text-align:center;
}
.event-activity-value span { display:block; color:#758179; font-size:9.5px; line-height:1.2; }
.event-activity-value strong { display:block; margin-top:3px; font-size:15px; color:#27362d; }
.event-activity-value.is-valid { background:#eef8f1; border-color:#cfe5d5; }
.event-activity-value.is-valid strong { color:#23734d; }
.event-activity-value.is-total { background:#fff9e7; border-color:#f0dda1; }
.event-activity-value.is-total strong { color:#8a6512; }
.event-activity-value.is-toll { background:#eef4fb; border-color:#d3e0ef; }
.event-activity-value.is-toll strong { color:#3f6f9f; }

.event-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:18px 2px 8px; }
.event-section-head.is-games { margin-top:22px; }
.event-section-head h2 { margin:0; color:#263a2d; font-size:17px; letter-spacing:-.45px; }
.event-section-head p { margin:4px 0 0; color:var(--muted); font-size:10.5px; line-height:1.4; }

.event-banner-list { display:flex; flex-direction:column; gap:9px; }
.event-banner-card {
    display:flex; align-items:stretch; gap:10px; padding:10px;
    border:1px solid var(--line); border-radius:14px; background:#fff;
    box-shadow:0 7px 20px rgba(35,83,52,.045);
}
.event-banner-action {
    width:94px; min-height:78px; flex:0 0 94px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    border:0; border-radius:11px; color:#fff; text-align:center; text-decoration:none;
    font:inherit; cursor:pointer;
}
.event-banner-action.is-attendance { background:linear-gradient(135deg,#23734d,#5aa879); }
.event-banner-action.is-survey { background:linear-gradient(135deg,#d99622,#f2c84b); }
.event-banner-action.is-referral { background:linear-gradient(135deg,#4b8160,#78a88a); }
.event-banner-action.is-dice { background:linear-gradient(135deg,#6553c7,#8a78de); }
.event-banner-action.is-updown { background:linear-gradient(135deg,#d8763f,#efa16e); }
.event-banner-action.is-tug { background:linear-gradient(135deg,#4778b8,#75a1d1); }
.event-banner-action.is-jj { background:linear-gradient(135deg,#228a68,#55b28f); }
.event-banner-icon { font-size:22px; line-height:1; font-weight:900; }
.event-banner-action strong { color:#fff; font-size:12px; line-height:1.25; }
.event-banner-copy { min-width:0; flex:1; padding:3px 1px 2px 0; }
.event-banner-title-row { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.event-banner-title { color:#26382d; font-size:13.5px; font-weight:900; }
.event-banner-desc { margin-top:5px; color:#5c6a61; font-size:11px; line-height:1.48; }
.event-banner-reward,
.event-banner-date {
    display:inline-flex; align-items:center; min-height:21px; margin-top:7px; padding:2px 7px;
    border:1px solid #cfe0d0; border-radius:999px; background:var(--green-soft);
    color:var(--green-dark); font-size:9.5px; font-weight:900;
}
.event-banner-reward.is-survey { background:#fff9e7; border-color:#efdca5; color:#816018; }
.event-banner-reward.is-referral { background:#eef6f0; border-color:#d4e5d8; color:#4b7559; }
.event-banner-date { background:#f5f7f5; border-color:var(--line); color:#6b746d; }

.event-home-foot { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; }
.event-home-foot a {
    min-height:36px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:10px; background:#fff;
    color:#516258; font-size:10.5px; font-weight:800;
}

.event-modal-backdrop {
    position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
    padding:18px; background:rgba(20,35,25,.55);
}
.event-modal-backdrop.is-open { display:flex; }
.event-modal {
    width:min(100%,400px); max-height:88vh; overflow:auto; border-radius:18px;
    background:#fff; box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.event-modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 15px 10px; border-bottom:1px solid var(--line); }
.event-modal-head strong { color:#294431; font-size:15px; }
.event-modal-close { width:32px; height:32px; border:0; border-radius:50%; background:#f1f5f2; color:#4f6254; font-size:20px; cursor:pointer; }
.event-modal-body { padding:14px 15px; }
.event-modal-label { color:var(--green-dark); font-size:11.5px; font-weight:900; }
.event-modal-menu { margin-top:7px; padding:12px; border:1px solid #cfe0d0; border-radius:11px; background:var(--green-soft); color:#203a28; font-size:15px; font-weight:900; line-height:1.6; }
.event-modal-menu.is-empty { color:var(--muted); font-size:12px; font-weight:700; }
.event-modal-guide { margin-top:11px; padding:9px 10px; border-radius:10px; background:#f8faf8; color:#56655b; font-size:11px; line-height:1.55; }
.event-modal-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:7px; padding:0 15px 15px; }
.event-modal-btn { min-height:41px; display:flex; align-items:center; justify-content:center; padding:9px; border:0; border-radius:10px; font:inherit; font-size:12px; font-weight:900; cursor:pointer; text-decoration:none; }
.event-modal-btn.is-muted { background:#eef2ef; color:#526057; }
.event-modal-btn.is-primary { background:var(--green); color:#fff; }

@media (max-width:390px) {
    .event-content { padding-left:12px; padding-right:12px; }
    .event-banner-card { gap:8px; padding:9px; }
    .event-banner-action { width:84px; flex-basis:84px; min-height:76px; }
    .event-banner-action strong { font-size:11.5px; }
    .event-banner-desc { font-size:10.5px; }
    .event-activity-card { padding:10px; }
    .event-level-img { width:41px; height:41px; flex-basis:41px; }
    .event-activity-value span { font-size:9px; }
}

/* ===== 이벤트 홈: 기존 index2 녹색 양식 복구 ===== */
.event-home-legacy{
    background:#f4f8f5;
}
.event-home-wrap{
    width:100%;
    min-height:100vh;
    padding:0 14px 28px;
}
.event-home-shell{
    width:min(100%,560px);
    margin:0 auto;
}
.event-home-hero{
    position:relative;
    overflow:hidden;
    margin:0 -14px;
    padding:14px 16px 20px;
    border-radius:0 0 24px 24px;
    background:
        radial-gradient(circle at 88% 28%,rgba(255,255,255,.12) 0 52px,transparent 53px),
        linear-gradient(135deg,#145a39,#23734d);
    color:#fff;
    box-shadow:0 8px 22px rgba(35,83,52,.14);
}
.event-home-nav{
    position:relative;
    z-index:2;
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}
.event-home-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}
.event-home-brand{
    position:relative;
    z-index:1;
    margin-top:14px;
    padding-right:82px;
}
.event-home-brand small{
    display:block;
    margin-bottom:4px;
    font-size:10px;
    letter-spacing:.9px;
    opacity:.82;
}
.event-home-brand h1{
    margin:0;
    color:#fff;
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.8px;
}
.event-home-brand p{
    margin:7px 0 0;
    color:rgba(255,255,255,.92);
    font-size:12px;
    line-height:1.45;
}
.event-home-deco{
    position:absolute;
    right:13px;
    bottom:-9px;
    width:92px;
    height:92px;
    color:rgba(255,255,255,.20);
    transform:rotate(5deg);
    pointer-events:none;
}
.event-home-userbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:10px 0 12px;
    padding:8px 10px;
    border:1px solid #cfe7d7;
    border-radius:12px;
    background:#eaf6ee;
    color:#3b5142;
    font-size:12px;
}
.event-home-userbar a{
    color:#25673d;
    text-decoration:none;
    font-weight:800;
}
.event-home-body{
    padding-bottom:6px;
}
.event-home-stat-card{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:10px 11px;
    border:1px solid #cfe7d7;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(35,83,52,.08);
    color:inherit;
    text-decoration:none;
}
.event-home-stat-card:active{
    transform:scale(.99);
    background:#f8fcf9;
}
.event-home-level-img{
    width:42px;
    height:42px;
    object-fit:contain;
    flex:0 0 auto;
}
.event-home-stat-main{
    min-width:70px;
    flex:1 1 auto;
}
.event-home-stat-name{
    margin-bottom:4px;
    overflow:hidden;
    color:#6b7c70;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.event-home-level-row{
    display:flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}
.event-home-level{
    color:#25673d;
    font-size:16px;
    font-weight:900;
}
.event-home-exp{
    padding:3px 7px;
    border:1px solid #cfe7d7;
    border-radius:999px;
    background:#eaf6ee;
    color:#37533f;
    font-size:10.5px;
    font-weight:800;
}
.event-home-stat-minis{
    display:flex;
    gap:5px;
    flex:0 0 auto;
}
.event-home-stat-mini{
    width:58px;
    min-width:0;
    padding:5px 3px;
    border:1px solid #e2ebe5;
    border-radius:12px;
    text-align:center;
}
.event-home-stat-mini span{
    display:block;
    min-height:23px;
    color:#6b7c70;
    font-size:9px;
    line-height:1.2;
}
.event-home-stat-mini strong{
    display:block;
    margin-top:1px;
    color:#1d2c22;
    font-size:15px;
    font-weight:900;
}
.event-home-stat-mini.is-green{background:#f0f8f1;border-color:#d3e8d6;}
.event-home-stat-mini.is-yellow{background:#fff9e9;border-color:#ead9a7;}
.event-home-stat-mini.is-blue{background:#eef4fb;border-color:#d6e1ee;}
.event-home-login-card{
    padding:14px;
    border:1px solid #e2ebe5;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(35,83,52,.08);
    text-align:center;
}
.event-home-login-card strong{display:block;color:#263a2d;font-size:14px;}
.event-home-login-card span{display:block;margin-top:5px;color:#6b7c70;font-size:11px;}
.event-home-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    margin:18px 2px 8px;
}
.event-home-section-head h2{
    margin:0;
    color:#263a2d;
    font-size:18px;
    letter-spacing:-.5px;
}
.event-home-section-head p{
    margin:4px 0 0;
    color:#6b7c70;
    font-size:10.5px;
}
.event-home-section-head.is-game-head{margin-top:22px;}
.event-home-list{
    display:flex;
    flex-direction:column;
    gap:9px;
}
.event-home-card{
    display:flex;
    align-items:stretch;
    gap:11px;
    padding:11px;
    border:1px solid #e2ebe5;
    border-radius:17px;
    background:#fff;
    box-shadow:0 8px 24px rgba(35,83,52,.08);
}
.event-home-action{
    width:104px;
    min-height:84px;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:0;
    border-radius:14px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    font:inherit;
    cursor:pointer;
}
.event-home-action:active{transform:scale(.97);}
.event-home-action span{font-size:23px;line-height:1;}
.event-home-action strong{color:#fff;font-size:12px;line-height:1.2;}
.event-home-action.is-attendance{background:linear-gradient(135deg,#397e50,#6ba37b);}
.event-home-action.is-survey{background:linear-gradient(135deg,#d49a2b,#e6b84e);}
.event-home-action.is-referral{background:linear-gradient(135deg,#4d7c5b,#73977d);}
.event-home-action.is-dice{background:linear-gradient(135deg,#4536c7,#6d5fe0);}
.event-home-action.is-updown{background:linear-gradient(135deg,#d77632,#e99a50);}
.event-home-action.is-tug{background:linear-gradient(135deg,#23734d,#5aa879);}
.event-home-action.is-jj{background:linear-gradient(135deg,#567a8d,#75a0b5);}
.event-home-copy{
    min-width:0;
    flex:1 1 auto;
    padding:5px 2px 3px 0;
}
.event-home-card-title{
    color:#253b2c;
    font-size:14px;
    font-weight:900;
}
.event-home-card-desc{
    margin-top:5px;
    color:#526257;
    font-size:11.5px;
    line-height:1.5;
}
.event-home-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
    flex-wrap:wrap;
}
.event-home-reward,
.event-home-date{
    display:inline-block;
    margin-top:7px;
    padding:3px 7px;
    border:1px solid #cfe7d7;
    border-radius:999px;
    background:#eaf6ee;
    color:#25673d;
    font-size:10px;
    font-weight:800;
}
.event-home-reward.is-warm{background:#fff8e8;border-color:#ead9a7;color:#855f1c;}
.event-home-date{background:#f5f7f5;border-color:#e2ebe5;color:#66756b;}
.event-home-card .event-phase{margin:0;}
.event-home-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(20,35,25,.55);
}
.event-home-modal-backdrop.is-open{display:flex;}
.event-home-modal{
    width:min(100%,400px);
    max-height:88vh;
    overflow:auto;
    border-radius:20px;
    background:#fff;
    box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.event-home-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:15px 16px 11px;
    border-bottom:1px solid #e2ebe5;
}
.event-home-modal-head strong{color:#294431;font-size:16px;}
.event-home-modal-head button{
    width:32px;height:32px;border:0;border-radius:50%;background:#f1f5f2;color:#4f6254;font-size:20px;cursor:pointer;
}
.event-home-modal-body{padding:15px 16px;}
.event-home-modal-label{color:#25673d;font-size:12px;font-weight:900;}
.event-home-modal-menu{
    margin-top:7px;
    padding:13px;
    border:1px solid #cfe7d7;
    border-radius:13px;
    background:#eaf6ee;
    color:#203a28;
    font-size:16px;
    font-weight:900;
    line-height:1.6;
}
.event-home-modal-menu.is-empty{color:#6b7c70;font-size:13px;font-weight:700;}
.event-home-modal-guide{
    margin-top:12px;
    padding:10px;
    border-radius:12px;
    background:#f8faf8;
    color:#56655b;
    font-size:11.5px;
    line-height:1.55;
}
.event-home-modal-actions{
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:8px;
    padding:0 16px 16px;
}
.event-home-modal-actions a,
.event-home-modal-actions button{
    min-height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    border:0;
    border-radius:12px;
    background:#23734d;
    color:#fff;
    text-decoration:none;
    font:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}
.event-home-modal-actions .is-cancel{background:#eef2ef;color:#526057;}
@media(max-width:430px){
    .event-home-wrap{padding-left:10px;padding-right:10px;}
    .event-home-hero{margin-left:-10px;margin-right:-10px;}
    .event-home-stat-card{gap:6px;padding:9px 8px;}
    .event-home-level-img{width:38px;height:38px;}
    .event-home-stat-main{min-width:64px;}
    .event-home-stat-name{font-size:9.5px;}
    .event-home-level{font-size:14px;}
    .event-home-exp{padding:2px 5px;font-size:9px;}
    .event-home-stat-minis{gap:3px;}
    .event-home-stat-mini{width:47px;padding:4px 2px;}
    .event-home-stat-mini span{font-size:8.3px;}
    .event-home-stat-mini strong{font-size:14px;}
    .event-home-card{gap:8px;padding:9px;}
    .event-home-action{width:92px;min-height:80px;}
    .event-home-action strong{font-size:11.5px;}
    .event-home-card-desc{font-size:11px;}
}

/* ===== 2026-09-05: 기존 index2 시각 비율/타이포 복원 ===== */
body.event-home-legacy{
    margin:0;
    background:#f4f8f5;
    color:#1f2d24;
    font-family:Arial,"Noto Sans KR",sans-serif;
    word-break:keep-all;
}
.event-home-wrap{
    width:min(100%,460px);
    min-height:100vh;
    margin:0 auto;
    padding:0 14px 28px;
}
.event-home-shell{
    width:100%;
    max-width:none;
    margin:0;
}
.event-home-hero{
    margin:0 -14px;
    padding:14px 16px 19px;
    border-radius:0 0 24px 24px;
}
.event-home-nav a{
    min-height:35px;
    padding:7px 11px;
    font-size:12px;
    font-weight:800;
}
.event-home-brand{
    margin-top:14px;
    padding-right:80px;
}
.event-home-brand small{
    margin-bottom:4px;
    font-size:10px;
    letter-spacing:.9px;
    opacity:.78;
}
.event-home-brand h1{
    margin:0;
    font-size:24px;
    line-height:1.2;
    letter-spacing:-.8px;
}
.event-home-brand p{
    margin:7px 0 0;
    font-size:12px;
    line-height:1.45;
    opacity:.9;
}
.event-home-userbar{
    margin:10px 0 12px;
    padding:8px 10px;
    font-size:12px;
}
.event-home-stat-card{
    gap:10px;
    padding:11px 12px;
    border-radius:18px;
}
.event-home-level-img{
    width:42px;
    height:42px;
}
.event-home-stat-main{
    flex:1;
    min-width:0;
}
.event-home-stat-name{
    margin-bottom:4px;
    font-size:12px;
}
.event-home-level-row{
    gap:6px;
    flex-wrap:wrap;
}
.event-home-level{
    font-size:16px;
}
.event-home-exp{
    padding:3px 8px;
    font-size:12px;
}
.event-home-stat-minis{
    gap:5px;
    flex-shrink:0;
}
.event-home-stat-mini{
    width:auto;
    min-width:44px;
    padding:5px 4px;
    border-radius:12px;
    background:#f8faf8;
}
.event-home-stat-mini span{
    min-height:0;
    margin-bottom:2px;
    font-size:10px;
    line-height:1.15;
}
.event-home-stat-mini span br{display:none;}
.event-home-stat-mini strong{
    margin-top:0;
    font-size:15px;
}
.event-home-login-card{
    padding:14px;
    border-radius:18px;
}
.event-home-login-card strong{font-size:15px;}
.event-home-login-card span{font-size:12px;line-height:1.5;}
.event-home-section-head{
    margin:18px 2px 8px;
}
.event-home-section-head h2{
    font-size:17px;
    letter-spacing:-.5px;
}
.event-home-section-head p{
    font-size:10.5px;
}
.event-home-list{
    gap:9px;
}
.event-home-card{
    gap:11px;
    padding:11px;
    border-radius:17px;
}
.event-home-action{
    width:105px;
    min-height:86px;
    border-radius:14px;
}
.event-home-action span{font-size:25px;}
.event-home-action strong{font-size:13px;line-height:1.25;}
.event-home-copy{
    padding:5px 2px 3px 0;
}
.event-home-card-title{
    margin-bottom:5px;
    font-size:14px;
}
.event-home-card-desc{
    font-size:11.5px;
    line-height:1.5;
}
.event-home-reward,
.event-home-date{
    margin-top:7px;
    padding:3px 7px;
    font-size:10.5px;
}
@media (max-width:390px){
    .event-home-wrap{padding-left:10px;padding-right:10px;}
    .event-home-hero{margin-left:-10px;margin-right:-10px;}
    .event-home-stat-card{gap:6px;padding:9px 8px;}
    .event-home-level-img{width:38px;height:38px;}
    .event-home-stat-mini{min-width:40px;padding-left:3px;padding-right:3px;}
    .event-home-stat-mini span{font-size:9px;}
    .event-home-stat-mini strong{font-size:14px;}
}

/* ===== 2026-09-05: 4게임 화면을 이벤트 홈 양식으로 통일 ===== */
body.event-game-legacy{
    margin:0;
    background:#f4f8f5;
    color:#1f2d24;
    font-family:Arial,"Noto Sans KR",sans-serif;
    word-break:keep-all;
}
.event-game-legacy .event-home-wrap{
    width:min(100%,460px);
    min-height:100vh;
    margin:0 auto;
    padding:0 14px 28px;
}
.event-game-legacy .event-home-shell{
    width:100%;
    max-width:none;
    margin:0;
}
.event-game-legacy .event-game-hero{
    margin:0 -14px;
    padding:14px 16px 19px;
    border-radius:0 0 24px 24px;
}
.event-game-legacy .event-home-brand h1{
    font-size:24px;
}
.event-game-legacy .event-home-userbar{
    margin:10px 0 12px;
}
.event-game-body{
    padding:0 0 8px;
}
.event-game-stat-card{
    margin-bottom:14px;
}
.event-game-legacy .event-home-stat-mini{
    min-width:44px;
}
.event-game-legacy .event-home-stat-mini span{
    min-height:0;
    white-space:nowrap;
}

/* 게임 카드도 홈 카드와 같은 체형 */
.event-game-legacy .event-game-card{
    margin-bottom:10px;
    padding:13px 14px;
    border:1px solid #d9e5dc;
    border-radius:18px;
    background:#fff;
    box-shadow:0 7px 20px rgba(35,83,52,.055);
}
.event-game-legacy .event-game-card.is-soft{
    border-color:#cfe7d7;
    background:linear-gradient(180deg,#f7fcf8,#eef7f0);
}
.event-game-legacy .event-game-card.is-warm{
    border-color:#ead9a9;
    background:#fffaf0;
}
.event-game-legacy .event-game-card h2{
    font-size:16px;
    line-height:1.3;
    letter-spacing:-.35px;
}
.event-game-legacy .event-game-card h3{
    font-size:14px;
    line-height:1.35;
}
.event-game-legacy .event-game-card p{
    margin-top:5px;
    font-size:11.5px;
    line-height:1.5;
}
.event-game-legacy .event-game-meta{
    margin-bottom:7px;
}
.event-game-legacy .event-phase,
.event-game-legacy .event-badge{
    min-height:22px;
    padding:3px 7px;
    font-size:10px;
}

/* 숫자/진행 현황: 가능한 경우 한 줄 */
.event-game-legacy .event-summary-grid{
    grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
    gap:6px;
    margin-top:9px;
}
.event-game-legacy .event-summary-box{
    min-width:0;
    padding:8px 5px;
    border-color:#e0e9e2;
    border-radius:12px;
    background:#fbfdfb;
}
.event-game-legacy .event-summary-box span{
    font-size:9.5px;
    line-height:1.25;
}
.event-game-legacy .event-summary-box strong{
    margin-top:3px;
    font-size:15px;
}

/* 주사위 */
.event-game-legacy .event-dice-face{
    width:94px;
    height:94px;
    margin:12px auto;
    border:1px solid #cfe7d7;
    border-radius:20px;
    background:#f8fcf9;
    color:#23734d;
    font-size:46px;
    box-shadow:0 7px 18px rgba(35,83,52,.07);
}
.event-game-legacy .event-primary-btn{
    min-height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,#23734d,#4f936a);
    font-size:13px;
}

/* UP/DOWN, 줄다리기 */
.event-game-legacy .event-big-number{
    margin:7px 0 1px;
    font-size:32px;
}
.event-game-legacy .event-actions-2{
    gap:7px;
    margin-top:9px;
}
.event-game-legacy .event-choice-btn{
    min-height:52px;
    border-radius:12px;
    font-size:13px;
}
.event-game-legacy .event-choice-btn small{
    font-size:10px;
    font-weight:700;
}
.event-game-legacy .event-tug-item{
    padding:11px 0;
}
.event-game-legacy .event-tug-title{
    margin-bottom:7px;
    font-size:12px;
}
.event-game-legacy .event-own-choice{
    font-size:10px;
}

/* JJ 및 안내 */
.event-game-legacy .event-jj-result{
    margin-top:10px;
    padding:11px;
    border-radius:12px;
    font-size:11.5px;
}
.event-game-legacy .event-small-note{
    font-size:10px;
}

/* 기록/랭킹 */
.event-game-legacy .event-history{
    gap:6px;
    margin-top:8px;
}
.event-game-legacy .event-history-row{
    grid-template-columns:66px 1fr auto;
    gap:6px;
    padding:8px;
    border-radius:11px;
    font-size:10.5px;
}
.event-game-legacy .event-ranking{
    margin-top:8px;
}
.event-game-legacy .event-ranking th,
.event-game-legacy .event-ranking td{
    padding:7px 5px;
    font-size:10.5px;
}
.event-game-legacy .event-message{
    margin-bottom:10px;
    border-radius:12px;
    font-size:11.5px;
}

@media (max-width:390px){
    .event-game-legacy .event-home-stat-card{
        gap:6px;
        padding:9px 8px;
    }
    .event-game-legacy .event-home-level-img{
        width:36px;
        height:36px;
    }
    .event-game-legacy .event-home-stat-name{
        display:none;
    }
    .event-game-legacy .event-home-level{
        font-size:14px;
    }
    .event-game-legacy .event-home-exp{
        padding:2px 5px;
        font-size:9px;
    }
    .event-game-legacy .event-home-stat-minis{
        gap:3px;
    }
    .event-game-legacy .event-home-stat-mini{
        min-width:39px;
        padding:4px 2px;
    }
    .event-game-legacy .event-home-stat-mini span{
        font-size:8.5px;
    }
    .event-game-legacy .event-home-stat-mini strong{
        font-size:13px;
    }
}


/* ===== Event fixed bottom navigation ===== */
body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.ev2-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 9990;
    width: min(100%, 460px);
    min-height: 62px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    transform: translateX(-50%);
    background: #23734d;
    border-top: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 -8px 24px rgba(20,90,57,.18);
}
.ev2-bottom-tab {
    min-width: 0;
    min-height: 50px;
    padding: 5px 4px 4px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800;
    -webkit-tap-highlight-color: transparent;
}
.ev2-bottom-tab.is-active {
    background: rgba(255,255,255,.15);
}
.ev2-bottom-tab:active {
    background: rgba(255,255,255,.22);
}
.ev2-bottom-icon {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    color: #fff;
}
.ev2-bottom-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ev2-bottom-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 10.5px;
    line-height: 1.15;
    letter-spacing: -.15px;
}
@media (min-width: 461px) {
    .ev2-bottom-nav {
        border-radius: 14px 14px 0 0;
    }
}

/* ===== Step 9: common Toll Draw ===== */
.event-home-action.is-draw{
    background:linear-gradient(145deg,#fff4cf,#ffd772);
    color:#6d4b00;
    border-color:#edc65e;
}
.event-home-action.is-draw span{font-size:25px}
.event-home-section-head.is-draw-head{margin-top:14px}

.draw-summary-card,.draw-winner-card,.draw-room-card,.draw-board-card,.draw-history-card{
    margin-bottom:10px;
}
.draw-summary-card h2{margin:3px 0 0;font-size:18px;color:#24362b}
.draw-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.draw-toll-box{
    background:#eef7ff!important;
    border-color:#cfe3f5!important;
}
.draw-toll-box strong{color:#24678f!important}
.draw-rule-note{
    margin-top:9px;
    padding:9px 10px;
    border-radius:11px;
    background:#fffaf0;
    border:1px solid #f0dfb0;
    color:#75633b;
    font-size:10.5px;
    line-height:1.55;
}
.draw-state-message{margin:9px 0 0!important}
.draw-section-title{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:9px;
    color:#2b4032;
    font-size:13px;
}
.draw-section-title>span{font-size:18px}
.draw-winner-card{
    background:linear-gradient(135deg,#fffdfa,#fff7df)!important;
    border-color:#eddca5!important;
}
.draw-winner-ticker{
    display:grid;
    gap:5px;
}
.draw-winner-line{
    padding:7px 8px;
    border-radius:9px;
    background:rgba(255,255,255,.78);
    border:1px solid #efe3bb;
    color:#6f5b25;
    font-size:10.5px;
}
.draw-winner-line b{color:#3f5a45}
.draw-room-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}
.draw-room-btn{
    min-width:0;
    padding:10px 9px;
    border:1px solid #dfe9e2;
    border-radius:12px;
    background:#fafcfb;
    color:#385044;
}
.draw-room-btn strong{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:12px;
}
.draw-room-btn span{
    display:block;
    margin-top:3px;
    color:#819087;
    font-size:9.5px;
}
.draw-room-btn.is-active{
    background:#23734d;
    color:#fff;
    border-color:#23734d;
    box-shadow:0 5px 12px rgba(35,115,77,.16);
}
.draw-room-btn.is-active span{color:rgba(255,255,255,.8)}
.draw-board-title{
    justify-content:space-between;
    gap:8px;
}
.draw-board-title>div{display:flex;align-items:center;gap:6px}
.draw-board-title small{color:#84928a;font-size:9.5px;font-weight:700}
.draw-board{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}
.draw-item{
    min-width:0;
    min-height:70px;
    padding:7px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid #dce7df;
    border-radius:13px;
    background:linear-gradient(145deg,#fff,#f7fbf8);
    color:#334a3b;
    font-family:inherit;
    cursor:pointer;
    box-shadow:0 3px 9px rgba(37,81,51,.05);
}
.draw-item:not(:disabled):active{transform:translateY(1px);background:#f0f8f2}
.draw-item-no{font-size:8.5px;color:#94a097;font-weight:800}
.draw-item-label{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.25;
    font-size:10.5px;
    text-align:center;
}
.draw-item.is-opened{
    background:#f0f2f1;
    color:#9aa39d;
    border-color:#e3e7e4;
    box-shadow:none;
}
.draw-item.is-mine{
    background:#edf7f0;
    color:#2d6240;
    border-color:#cde3d4;
}
.draw-item.is-win{
    background:linear-gradient(145deg,#fff4bf,#ffe184);
    color:#6c4b00;
    border-color:#e8c34d;
    box-shadow:0 5px 14px rgba(199,151,24,.15);
}
.draw-board-guide{
    margin-top:9px;
    color:#849188;
    font-size:9.5px;
    line-height:1.5;
}
.draw-result-modal{
    position:fixed;
    inset:0;
    z-index:10020;
    display:none;
    place-items:center;
    padding:20px;
    background:rgba(13,31,21,.56);
}
.draw-result-modal.is-open{display:grid}
.draw-result-box{
    width:min(100%,330px);
    padding:22px 18px 17px;
    border-radius:20px;
    background:#fff;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.draw-result-icon{font-size:42px}
.draw-result-box h2{margin:6px 0 2px;font-size:21px;color:#263c2d}
.draw-result-prize{margin:8px 0 4px;font-size:17px;font-weight:900;color:#a46d00}
.draw-result-box p{margin:6px 0 13px;color:#758179;font-size:11px;line-height:1.5}
.draw-result-box .event-primary-btn{width:100%;border:0;cursor:pointer}
.draw-history-link{display:block;margin-top:9px;color:#477358;font-size:10.5px;font-weight:800}
.draw-history-list{display:grid;gap:7px}
.draw-history-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border:1px solid #e2e9e4;
    border-radius:11px;
    background:#fafcfb;
}
.draw-history-row>div:first-child{min-width:0;display:grid;gap:2px}
.draw-history-row strong{font-size:12px;color:#2f4636}
.draw-history-row span,.draw-history-row small{font-size:9.5px;color:#839087}
.draw-claim-status{
    flex:0 0 auto;
    padding:5px 7px;
    border-radius:999px;
    background:#fff6d9;
    color:#8c6919;
    font-size:9.5px;
    font-weight:900;
}
.draw-claim-status.is-claimed{background:#e9f6ed;color:#2a7348}
.draw-claim-status.is-cancelled{background:#f5eeee;color:#8d4b4b}
.draw-back-btn{display:flex!important;margin:10px 0!important;text-decoration:none!important}
@media(max-width:360px){
    .draw-room-grid{grid-template-columns:1fr 1fr}
    .draw-board{grid-template-columns:repeat(2,minmax(0,1fr))}
    .draw-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ===== Step 10: Toll wallet / draw schedule / prize wallet / QR ===== */
.is-toll-link{cursor:pointer}
.event-home-draw-meta{display:grid;gap:2px;margin-top:5px;color:#75847a;font-size:9.5px;line-height:1.35}
.event-home-draw-meta span:last-child{font-weight:800;color:#55705f}
.event-secondary-btn{
    min-height:36px;padding:8px 11px;border:1px solid #d9e5dc;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;background:#f8fbf9;color:#3b5d47;
    font-size:10.5px;font-weight:900;text-decoration:none;font-family:inherit;cursor:pointer
}
.event-secondary-btn:disabled,.event-primary-btn:disabled{opacity:.45;cursor:not-allowed}
.draw-public-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.draw-public-actions>a,.draw-public-actions>button{flex:1 1 100px;text-align:center}
.draw-schedule-box{margin-top:8px;padding:9px 10px;border:1px solid #dfe8e1;border-radius:10px;background:#f8fbf9}
.draw-schedule-box span{display:block;font-size:9px;color:#89958d;font-weight:800}
.draw-schedule-box strong{display:block;margin-top:2px;color:#324b3a;font-size:11px;line-height:1.4}
.draw-public-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:8px}
.draw-my-summary-grid{margin-top:7px}
a.event-summary-box{text-decoration:none}
.draw-public-note{margin-top:9px;font-size:9.5px;line-height:1.5;color:#89938d}

/* toll wallet */
.toll-wallet-card,.toll-draw-guide-card,.toll-history-card{margin-bottom:10px}
.toll-wallet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
.toll-wallet-grid>div{padding:9px 6px;border:1px solid #dce8df;border-radius:10px;background:#f8fbf9;text-align:center}
.toll-wallet-grid span{display:block;color:#849188;font-size:9px;font-weight:800}
.toll-wallet-grid strong{display:block;margin-top:2px;color:#294936;font-size:15px}
.toll-exchange-rule{margin-top:8px;padding:8px 9px;border-radius:9px;background:#fff8df;border:1px solid #efdfab;color:#705f34;font-size:10px;line-height:1.45}
.toll-exchange-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.toll-exchange-actions form{margin:0}.toll-exchange-actions button{width:100%;height:100%;border:0}
.toll-exchange-message{margin-top:8px!important}.toll-exchange-message.is-ok{background:#eaf6ee!important;color:#266843!important}.toll-exchange-message.is-error{background:#fff1ef!important;color:#99433e!important}
.toll-draw-status{display:grid;gap:3px;padding:9px 10px;border:1px solid #dfe8e1;border-radius:10px;background:#fafcfb}
.toll-draw-status strong{font-size:12px;color:#2d4936}.toll-draw-status span{font-size:9.5px;color:#7d8b82}
.toll-history-list{display:grid;gap:6px}.toll-history-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px;border:1px solid #e2e9e4;border-radius:10px;background:#fafcfb}
.toll-history-row>div{min-width:0;display:grid;gap:1px}.toll-history-row strong{font-size:10.5px;color:#314b39}.toll-history-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#7f8b84}.toll-history-row small{font-size:8.5px;color:#99a29c}.toll-history-row>b{flex:0 0 auto;font-size:11px}.toll-history-row>b.is-plus{color:#247049}.toll-history-row>b.is-minus{color:#a1534f}

/* public winners */
.draw-winner-period{margin:5px 0 9px;font-size:10px;color:#7e8b83}
.draw-winner-rounds{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px;margin-bottom:9px}.draw-winner-rounds a{flex:0 0 auto;padding:6px 8px;border:1px solid #dfe8e1;border-radius:999px;background:#fafcfb;color:#65786c;font-size:9px;font-weight:800}.draw-winner-rounds a.is-active{background:#23734d;color:#fff;border-color:#23734d}
.draw-public-winner-list{display:grid;gap:6px}.draw-public-winner-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid #e9e2c9;border-radius:10px;background:#fffdf6}.draw-public-winner-rank{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#ffe590;color:#7c5a00;font-size:9px;font-weight:900}.draw-public-winner-row>div{min-width:0;display:grid;gap:1px}.draw-public-winner-row strong{font-size:11px;color:#304a39}.draw-public-winner-row span{font-size:9.5px;color:#7a632c}.draw-public-winner-row small{font-size:8.5px;color:#919991;white-space:nowrap}

/* prize wallet */
.draw-prize-row{align-items:stretch}.draw-prize-main{flex:1;min-width:0}.draw-prize-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px}.draw-prize-qr-btn{padding:6px 8px;border-radius:8px;background:#23734d;color:#fff!important;font-size:9.5px;font-weight:900;text-decoration:none}.draw-prize-disabled{padding:5px 7px;border-radius:8px;background:#f1f3f2;color:#8b948e!important;font-size:9px!important;font-weight:800}.draw-prize-row.is-expired,.draw-prize-row.is-cancelled,.draw-prize-row.is-used{opacity:.72}

/* meal ticket QR */
.prize-qr-card{margin-bottom:10px;text-align:center}.prize-qr-head h2{margin:4px 0 2px;font-size:19px;color:#294432}.prize-qr-head p{margin:0;color:#819087;font-size:10px}.prize-qr-owner,.prize-qr-validity,.prize-qr-code-label{display:grid;grid-template-columns:74px 1fr;gap:8px;align-items:center;text-align:left;padding:8px 9px;border-bottom:1px solid #edf1ee}.prize-qr-owner{margin-top:10px;border-top:1px solid #edf1ee}.prize-qr-owner span,.prize-qr-validity span,.prize-qr-code-label span{color:#87948c;font-size:9.5px;font-weight:800}.prize-qr-owner strong,.prize-qr-validity strong{font-size:11px;color:#344c3b}.prize-qr-code-label code{min-width:0;overflow-wrap:anywhere;color:#4c6555;font-size:9px}
.prize-qr-box{width:244px;min-height:244px;margin:15px auto 8px;padding:12px;display:grid;place-items:center;background:#fff;border:1px solid #d9e3dc;border-radius:14px;box-shadow:0 5px 16px rgba(26,68,42,.08)}.prize-qr-box img,.prize-qr-box canvas{display:block!important;margin:auto!important;max-width:220px!important;height:auto!important}
.prize-qr-live{color:#276b46;font-size:10.5px;font-weight:900}.prize-qr-warning{margin-top:6px;padding:7px 8px;border-radius:9px;background:#fff8df;color:#806925;font-size:9px;line-height:1.45}.prize-qr-state{margin:14px 0;padding:15px;border-radius:12px;background:#f2f4f3;color:#6d7771}.prize-qr-state strong,.prize-qr-state span{display:block}.prize-qr-state strong{font-size:14px}.prize-qr-state span{margin-top:3px;font-size:10px}.prize-qr-state.is-used{background:#eaf5ed;color:#236443}.prize-qr-state.is-expired,.prize-qr-state.is-cancelled{background:#fff0ef;color:#914843}

@media(max-width:360px){
    .toll-exchange-actions{grid-template-columns:1fr}
    .draw-public-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
    .prize-qr-box{width:224px;min-height:224px}.prize-qr-box img,.prize-qr-box canvas{max-width:200px!important}
}

/* ===== Dice game finish pass · STEP 11 ===== */
.event-dice-page{
    --dice-purple:#6553c7;
    --dice-purple-dark:#5142aa;
    --dice-purple-light:#8a78de;
    --dice-soft:#f3f0ff;
    --dice-line:#ded8fb;
}
.event-dice-page .event-dice-intro{
    border-color:var(--dice-line);
    background:linear-gradient(145deg,#fff 0%,#faf8ff 100%);
}
.event-dice-page .event-dice-intro h2{color:#42358d;}
.event-dice-page .event-dice-summary .event-summary-box.is-rank{
    border-color:var(--dice-line);
    background:var(--dice-soft);
}
.event-dice-page .event-dice-summary .event-summary-box.is-rank strong{color:var(--dice-purple-dark);}

.event-dice-stage{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:132px;
    margin:8px 0 5px;
    perspective:520px;
}
.event-dice-visual{
    position:relative;
    z-index:2;
    display:inline-flex;
    transform-origin:50% 55%;
    will-change:transform;
}
.event-dice-page .event-dice-face,
.event-dice-page .event-dice-mini{
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    background:linear-gradient(145deg,var(--dice-purple-light) 0%,var(--dice-purple) 58%,var(--dice-purple-dark) 100%);
    border:1px solid rgba(255,255,255,.72);
    overflow:hidden;
}
.event-dice-page .event-dice-face{
    width:96px;
    height:96px;
    margin:0;
    border-radius:21px;
    box-shadow:
        0 7px 0 #493c9a,
        0 13px 19px rgba(71,55,144,.24),
        inset 0 2px 4px rgba(255,255,255,.28);
}
.event-dice-page .event-dice-face::after,
.event-dice-page .event-dice-mini::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 38%,rgba(0,0,0,.07));
    pointer-events:none;
}
.event-dice-page .event-dice-mini{
    width:27px;
    height:27px;
    flex:0 0 27px;
    border-radius:7px;
    box-shadow:0 2px 0 #5142aa,0 4px 7px rgba(71,55,144,.16);
}
.event-dice-pip{
    position:absolute;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#fff;
    box-shadow:inset 0 -1px 1px rgba(44,35,92,.23),0 1px 1px rgba(255,255,255,.16);
    opacity:0;
    transform:translate(-50%,-50%);
    transition:opacity .06s linear;
}
.event-dice-mini .event-dice-pip{
    width:4px;
    height:4px;
    box-shadow:none;
}
.event-dice-pip.p1{left:25%;top:25%;}
.event-dice-pip.p2{left:50%;top:25%;}
.event-dice-pip.p3{left:75%;top:25%;}
.event-dice-pip.p4{left:25%;top:50%;}
.event-dice-pip.p5{left:50%;top:50%;}
.event-dice-pip.p6{left:75%;top:50%;}
.event-dice-pip.p7{left:25%;top:75%;}
.event-dice-pip.p8{left:50%;top:75%;}
.event-dice-pip.p9{left:75%;top:75%;}
.event-dice-face[data-face="0"] .p1,
.event-dice-face[data-face="0"] .p3,
.event-dice-face[data-face="0"] .p5,
.event-dice-face[data-face="0"] .p7,
.event-dice-face[data-face="0"] .p9{opacity:.25;}
.event-dice-face[data-face="1"] .p5,
.event-dice-mini[data-face="1"] .p5,
.event-dice-face[data-face="2"] .p1,
.event-dice-face[data-face="2"] .p9,
.event-dice-mini[data-face="2"] .p1,
.event-dice-mini[data-face="2"] .p9,
.event-dice-face[data-face="3"] .p1,
.event-dice-face[data-face="3"] .p5,
.event-dice-face[data-face="3"] .p9,
.event-dice-mini[data-face="3"] .p1,
.event-dice-mini[data-face="3"] .p5,
.event-dice-mini[data-face="3"] .p9,
.event-dice-face[data-face="4"] .p1,
.event-dice-face[data-face="4"] .p3,
.event-dice-face[data-face="4"] .p7,
.event-dice-face[data-face="4"] .p9,
.event-dice-mini[data-face="4"] .p1,
.event-dice-mini[data-face="4"] .p3,
.event-dice-mini[data-face="4"] .p7,
.event-dice-mini[data-face="4"] .p9,
.event-dice-face[data-face="5"] .p1,
.event-dice-face[data-face="5"] .p3,
.event-dice-face[data-face="5"] .p5,
.event-dice-face[data-face="5"] .p7,
.event-dice-face[data-face="5"] .p9,
.event-dice-mini[data-face="5"] .p1,
.event-dice-mini[data-face="5"] .p3,
.event-dice-mini[data-face="5"] .p5,
.event-dice-mini[data-face="5"] .p7,
.event-dice-mini[data-face="5"] .p9,
.event-dice-face[data-face="6"] .p1,
.event-dice-face[data-face="6"] .p3,
.event-dice-face[data-face="6"] .p4,
.event-dice-face[data-face="6"] .p6,
.event-dice-face[data-face="6"] .p7,
.event-dice-face[data-face="6"] .p9,
.event-dice-mini[data-face="6"] .p1,
.event-dice-mini[data-face="6"] .p3,
.event-dice-mini[data-face="6"] .p4,
.event-dice-mini[data-face="6"] .p6,
.event-dice-mini[data-face="6"] .p7,
.event-dice-mini[data-face="6"] .p9{opacity:1;}

.event-dice-shadow{
    position:absolute;
    left:50%;
    bottom:12px;
    width:80px;
    height:15px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(57,44,119,.16);
    filter:blur(5px);
}
.event-dice-visual.is-preview-roll{animation:eventDiceSpin .68s cubic-bezier(.2,.75,.28,1) both;}
.event-dice-visual.is-result-roll{animation:eventDiceLand .72s cubic-bezier(.18,.82,.26,1) both;}
@keyframes eventDiceSpin{
    0%{transform:translateY(0) rotate(0deg) rotateX(0deg) scale(1);}
    42%{transform:translateY(-16px) rotate(190deg) rotateX(18deg) scale(1.06);}
    100%{transform:translateY(0) rotate(360deg) rotateX(0deg) scale(1);}
}
@keyframes eventDiceLand{
    0%{transform:translateY(-11px) rotate(-18deg) scale(.94);}
    65%{transform:translateY(2px) rotate(342deg) scale(1.04);}
    82%{transform:translateY(-3px) rotate(355deg) scale(.99);}
    100%{transform:translateY(0) rotate(360deg) scale(1);}
}
.event-dice-page .event-dice-roll-btn{
    background:linear-gradient(135deg,var(--dice-purple-dark),var(--dice-purple-light));
    box-shadow:0 6px 13px rgba(82,67,170,.20);
}
.event-dice-page .event-dice-roll-btn:disabled{opacity:.76;cursor:wait;}
.event-dice-today-result{
    margin-top:6px;
    padding:9px 10px;
    border:1px solid var(--dice-line);
    border-radius:11px;
    background:var(--dice-soft);
    color:#5b5372;
    text-align:center;
    font-size:11px;
}
.event-dice-today-result strong{color:var(--dice-purple-dark);font-size:14px;}
.event-dice-today-result b{color:#3e355f;}

.event-card-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.event-card-title-row h3{margin:0;}
.event-card-title-row p{margin:3px 0 0!important;color:var(--muted);font-size:10px!important;}
.event-my-rank-chip,
.event-history-count{
    flex:0 0 auto;
    padding:4px 7px;
    border-radius:999px;
    border:1px solid var(--dice-line);
    background:var(--dice-soft);
    color:var(--dice-purple-dark);
    font-size:9.5px;
    font-weight:900;
}
.event-dice-ranking td:first-child{width:44px;}
.event-dice-ranking td:nth-child(3){width:45px;color:#6f756f;}
.event-dice-ranking td:last-child{width:50px;}
.event-rank-medal{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    color:#fff;
    font-size:11px;
    font-weight:900;
    border:2px solid rgba(255,255,255,.72);
    box-shadow:0 2px 5px rgba(0,0,0,.12);
}
.event-rank-medal.is-gold{background:linear-gradient(145deg,#f7cf4b,#c89413);}
.event-rank-medal.is-silver{background:linear-gradient(145deg,#cfd5dc,#89939f);}
.event-rank-medal.is-bronze{background:linear-gradient(145deg,#d99862,#9a5c36);}
.event-rank-number{display:inline-block;min-width:24px;text-align:center;font-weight:900;color:#6e7470;}
.event-dice-ranking tr.is-mine td{
    background:#f3f0ff;
    color:#3f356f;
    font-weight:900;
    border-top:1px solid var(--dice-line);
    border-bottom:1px solid var(--dice-line);
}
.event-dice-ranking tr.is-mine td:first-child{border-left:3px solid var(--dice-purple);}
.event-dice-ranking tr.is-mine td:last-child{border-right:1px solid var(--dice-line);}
.event-dice-ranking tr.is-mine small{
    display:inline-flex;
    margin-left:3px;
    padding:1px 4px;
    border-radius:999px;
    background:var(--dice-purple);
    color:#fff;
    font-size:8px;
    vertical-align:1px;
}
.event-rank-ellipsis td{
    padding:3px!important;
    border:0!important;
    color:#aaa!important;
    text-align:center!important;
    letter-spacing:3px;
    background:transparent!important;
}

.event-dice-history-list{display:flex;flex-direction:column;margin-top:9px;}
.event-dice-history-row{
    display:grid;
    grid-template-columns:68px 1fr auto;
    align-items:center;
    gap:8px;
    min-height:43px;
    padding:7px 3px;
    border-bottom:1px solid var(--line);
}
.event-dice-history-row:last-child{border-bottom:0;}
.event-dice-history-date{color:#535d56;font-size:10.5px;font-weight:800;}
.event-dice-history-roll{display:flex;align-items:center;gap:7px;color:#4c426e;font-size:11px;}
.event-dice-history-roll strong{white-space:nowrap;}
.event-dice-history-total{text-align:right;white-space:nowrap;}
.event-dice-history-total span{display:block;color:#89908b;font-size:8.5px;line-height:1.1;}
.event-dice-history-total b{display:block;margin-top:2px;color:#303833;font-size:11px;}
.event-empty-note{
    margin-top:9px;
    padding:13px;
    border-radius:11px;
    background:#fafafa;
    color:#7d857f;
    text-align:center;
    font-size:10.5px;
}
.event-history-pagination{
    display:flex;
    justify-content:center;
    gap:5px;
    margin-top:10px;
}
.event-history-pagination a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border:1px solid #dddfe0;
    border-radius:8px;
    background:#fff;
    color:#656d67;
    text-decoration:none;
    font-size:10.5px;
    font-weight:800;
}
.event-history-pagination a.is-active{
    border-color:var(--dice-purple);
    background:var(--dice-purple);
    color:#fff;
}

@media (max-width:390px){
    .event-dice-page .event-dice-face{width:88px;height:88px;border-radius:19px;}
    .event-dice-pip{width:12px;height:12px;}
    .event-dice-history-row{grid-template-columns:62px 1fr auto;gap:6px;}
    .event-dice-history-date{font-size:10px;}
}
@media (prefers-reduced-motion:reduce){
    .event-dice-visual.is-preview-roll,
    .event-dice-visual.is-result-roll{animation:none;}
}

/* STEP 12 · Dice toll reward + large draw room pagination */
.event-dice-toll-progress{
  margin:12px 0 4px;padding:11px 12px;border:1px solid #ded3f5;border-radius:12px;
  background:linear-gradient(135deg,#f8f4ff 0%,#ffffff 100%);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.event-dice-toll-progress.is-earned{animation:eventTollPop .55s ease both;border-color:#9a72db;box-shadow:0 6px 18px rgba(104,66,160,.13)}
.event-dice-toll-main{display:grid;gap:2px}.event-dice-toll-main span{font-size:11px;color:#6e6281;font-weight:800}.event-dice-toll-main strong{font-size:20px;color:#6543a0}
.event-dice-toll-next{font-size:11px;color:#5f5968;text-align:right;line-height:1.45}.event-dice-toll-next b{color:#6543a0;font-size:13px}
.event-dice-earned-text{display:inline-block;margin-left:4px;color:#6d45a8;font-weight:900}
@keyframes eventTollPop{0%{transform:scale(.97);opacity:.65}60%{transform:scale(1.025)}100%{transform:scale(1);opacity:1}}

.draw-issued-note{margin:-2px 0 10px;font-size:10.5px;color:#66736c;line-height:1.5}
.draw-room-btn{position:relative;min-height:76px}
.draw-room-lucky{display:inline-block;width:max-content;max-width:100%;font-style:normal;font-size:10px;font-weight:900;line-height:1.25;padding:3px 6px;border-radius:999px;background:#fff3c7;color:#7f5d09;border:1px solid #ead58c;white-space:normal}
.draw-room-lucky.rank-1{background:#fff0b8;color:#765300;border-color:#ddc06a}
.draw-room-lucky.rank-2{background:#f1f3f5;color:#59616a;border-color:#d6dbe0}
.draw-room-lucky.rank-3{background:#f5e0cf;color:#86532b;border-color:#ddbea4}
.draw-board-pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:13px 0 4px}
.draw-board-pagination a{min-width:31px;height:31px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d9e2dc;border-radius:8px;background:#fff;color:#355243;font-size:12px;font-weight:900;text-decoration:none}
.draw-board-pagination a.is-active{background:#23734d;color:#fff;border-color:#23734d;box-shadow:0 4px 10px rgba(35,115,77,.18)}
.draw-page-gap{font-weight:900;color:#8a9690;padding:0 2px}

@media(max-width:480px){
  .event-dice-toll-progress{align-items:flex-start;flex-direction:column}
  .event-dice-toll-next{text-align:left}
  .draw-board-pagination{gap:5px}
  .draw-board-pagination a{min-width:29px;height:29px;font-size:11px}
}


/* =========================================================
   STEP 13 · TOLL STORY / 2026-09-05
   One grain, one chance. Shared lightweight storytelling UI.
   ========================================================= */
.event-toll-story{
  border:1px solid #dce9df;
  background:linear-gradient(180deg,#fffdf6 0%,#ffffff 78%);
  overflow:hidden;
}
.event-toll-story summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  cursor:pointer;
  user-select:none;
}
.event-toll-story summary::-webkit-details-marker{display:none}
.event-toll-story summary>span:nth-child(2){min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.event-toll-story summary strong{font-size:14px;color:#1c5539}
.event-toll-story summary small{font-size:11.5px;line-height:1.45;color:#657068;font-weight:500}
.event-toll-story summary>b{font-size:11px;color:#23734d;white-space:nowrap}
.event-toll-story[open] summary>b{font-size:0}
.event-toll-story[open] summary>b::after{content:'접기';font-size:11px}
.event-toll-story-body{padding:0 14px 14px;border-top:1px dashed #e7e8df}
.event-toll-story-body h3{margin:12px 0 7px;font-size:15px;color:#193d2d}
.event-toll-story-body p{margin:9px 0;font-size:12px;line-height:1.7;color:#454d48}
.event-toll-story-body p strong{color:#1c6040}
.event-toll-story-rule{margin-top:10px;padding:10px 11px;border-radius:8px;background:#f1f7f2;color:#31483a;font-size:11.5px;line-height:1.55}
.event-toll-story-rule strong{color:#145a39}
.event-toll-story-icon{position:relative;display:inline-block;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#23734d}
.event-toll-story-icon i{position:absolute;display:block;width:5px;height:13px;border-radius:60% 40% 60% 40%;background:#fff8dd;transform:rotate(42deg)}
.event-toll-story-icon i:nth-child(1){left:8px;top:10px}
.event-toll-story-icon i:nth-child(2){left:14px;top:6px}
.event-toll-story-icon i:nth-child(3){left:19px;top:11px}
.event-toll-story-icon.is-small{flex-basis:27px;width:27px;height:27px}
.event-toll-story-icon.is-small i{width:4px;height:11px}
.event-toll-story-icon.is-small i:nth-child(1){left:7px;top:9px}
.event-toll-story-icon.is-small i:nth-child(2){left:12px;top:5px}
.event-toll-story-icon.is-small i:nth-child(3){left:17px;top:9px}
.event-home-toll-story{margin-top:16px;border-radius:10px}
.toll-wallet-story{margin-bottom:12px}
.draw-toll-story{margin-top:12px}
.draw-toll-quick-rule{display:flex;align-items:center;gap:10px;margin:11px 0;padding:10px 11px;border-radius:9px;background:#f6faf6;border:1px solid #dbe9de}
.draw-toll-quick-rule>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.draw-toll-quick-rule strong{font-size:13px;color:#185638}
.draw-toll-quick-rule span{font-size:11.5px;line-height:1.45;color:#5b665f}
.event-toll-earned-banner{display:flex;align-items:center;gap:10px;margin:10px 0;padding:11px 12px;border:1px solid #ded2f3;border-radius:10px;background:linear-gradient(135deg,#f8f4ff,#fffdf7);box-shadow:0 4px 12px rgba(66,40,100,.06)}
.event-toll-earned-banner>div{display:flex;flex-direction:column;gap:2px}
.event-toll-earned-banner strong{font-size:13px;color:#6d43a3}
.event-toll-earned-banner span{font-size:11.5px;line-height:1.45;color:#635b68}
@media(max-width:390px){
  .event-toll-story summary{padding:11px 12px;gap:8px}
  .event-toll-story-icon{flex-basis:29px;width:29px;height:29px}
  .event-toll-story summary small{font-size:11px}
  .event-toll-story-body{padding:0 12px 12px}
}

/* ============================================================
   STEP 14 · UP&DOWN 2026-09-05
   Event-home orange/ochre family, same density/pattern as Dice.
   ============================================================ */
:root{
  --updown-ochre:#b66f32;
  --updown-ochre-dark:#8f5124;
  --updown-ochre-soft:#fff5e8;
  --updown-orange:#dc8441;
  --updown-blue:#4f78a8;
  --updown-red:#b95e4d;
}
.event-updown-page .event-game-card{overflow:hidden}
.event-updown-intro{
  background:linear-gradient(145deg,#fff9ef,#fff2df) !important;
  border-color:#edd2ad !important;
  position:relative;
}
.event-updown-intro:after{
  content:"↕";
  position:absolute;
  right:10px;
  bottom:-18px;
  font-size:82px;
  line-height:1;
  font-weight:900;
  color:rgba(182,111,50,.08);
  pointer-events:none;
}
.event-updown-intro h2{color:var(--updown-ochre-dark)!important;letter-spacing:-.4px}
.event-updown-intro strong{color:var(--updown-ochre-dark)}
.event-updown-test{
  display:inline-flex;
  margin-top:9px;
  padding:5px 8px;
  border-radius:999px;
  background:#7d522e;
  color:#fff;
  font-size:10px;
  font-weight:800;
}
.event-updown-summary .event-summary-box{background:#fffaf4;border-color:#efddc6}
.event-updown-summary .event-summary-box strong{color:#4c4035}
.event-updown-summary .event-summary-box.is-pending strong,
.event-updown-summary .event-summary-box.is-rank strong{color:var(--updown-ochre-dark)}
.event-updown-rule-line{
  margin-top:9px;
  padding:8px 10px;
  border-radius:8px;
  background:#fff5e8;
  color:#6c594a;
  font-size:10.5px;
  line-height:1.5;
  text-align:center;
}
.event-updown-rule-line span{font-weight:900;color:var(--updown-ochre-dark)}
.event-updown-rule-line b{margin:0 5px;color:#c9a98b}
.event-updown-date-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 8px;border-radius:999px;background:#f3dfc8;color:#865126;
  font-size:10px;font-weight:900;white-space:nowrap
}
.event-updown-baseline{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:11px;padding:12px;border-radius:10px;
  background:linear-gradient(135deg,#b66f32,#d68745);color:#fff;
  box-shadow:0 5px 14px rgba(143,81,36,.13)
}
.event-updown-baseline div{display:grid;gap:2px}
.event-updown-baseline span{font-size:10px;opacity:.82;font-weight:700}
.event-updown-baseline div strong{font-size:13px;color:#fff}
.event-updown-baseline>b{font-size:28px;line-height:1;letter-spacing:-1px}
.event-updown-baseline>b small{font-size:10px;margin-left:2px;font-weight:800}
.event-updown-menu{margin-top:10px}
.event-updown-menu>span{display:block;margin-bottom:6px;font-size:10px;font-weight:900;color:#7b6654}
.event-updown-menu-list{display:flex;gap:5px;flex-wrap:wrap}
.event-updown-menu-list em{
  font-style:normal;padding:5px 7px;border-radius:999px;background:#fff8ee;border:1px solid #efdac1;
  color:#5d5147;font-size:10px;font-weight:700
}
.event-updown-decision-title{margin:13px 0 7px;text-align:center;font-size:12px;font-weight:900;color:#59493c}
.event-updown-decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}
.event-updown-decision{
  position:relative;display:grid;gap:3px;min-height:108px;padding:11px 9px;border:2px solid #ead8c5;
  border-radius:11px;background:#fff;cursor:pointer;text-align:center;transition:.15s ease
}
.event-updown-decision input{position:absolute;opacity:0;pointer-events:none}
.event-updown-decision-name{font-size:11px;font-weight:900;color:#80654f}
.event-updown-decision strong{font-size:15px;color:#44392f}
.event-updown-decision small{font-size:9.5px;line-height:1.45;color:#76695e}
.event-updown-decision:has(input:checked){transform:translateY(-1px);box-shadow:0 5px 13px rgba(112,77,44,.10)}
.event-updown-decision.is-bank:has(input:checked){border-color:#84a886;background:#f4fbf4}
.event-updown-decision.is-bank:has(input:checked) .event-updown-decision-name{color:#4e7650}
.event-updown-decision.is-challenge:has(input:checked){border-color:#d58a4f;background:#fff6eb}
.event-updown-decision.is-challenge:has(input:checked) .event-updown-decision-name{color:#a65c25}
.event-updown-fresh{
  margin:12px 0;padding:9px 10px;border-radius:9px;background:#fff5e8;border:1px solid #efd7b8;
  color:#685647;font-size:11px;text-align:center
}
.event-updown-fresh strong{color:var(--updown-ochre-dark)}
.event-updown-predict-label{text-align:center;margin:7px 0 8px;font-size:11px;font-weight:900;color:#655549}
.event-updown-actions{gap:9px}
.event-updown-actions .event-choice-btn{
  min-height:92px;border-width:2px;border-radius:12px;display:grid;place-items:center;align-content:center;gap:1px;
  background:#fff;font-weight:900
}
.event-updown-actions .event-choice-btn span{font-size:21px;line-height:1}
.event-updown-actions .event-choice-btn strong{font-size:18px;line-height:1.15}
.event-updown-actions .event-choice-btn small{font-size:10px;font-weight:800}
.event-updown-actions .event-choice-btn.is-up{color:var(--updown-blue);border-color:#cbd9e7;background:#f7fbff}
.event-updown-actions .event-choice-btn.is-up:hover{background:#edf5fc;border-color:#8fafcf}
.event-updown-actions .event-choice-btn.is-down{color:var(--updown-red);border-color:#ead0c9;background:#fff9f7}
.event-updown-actions .event-choice-btn.is-down:hover{background:#fff0eb;border-color:#cf998c}
.event-updown-submitted{
  margin-top:12px;padding:13px;border-radius:11px;background:#fff7ec;border:1px solid #edcfab;text-align:center
}
.event-updown-submitted>span{display:inline-block;padding:3px 7px;border-radius:999px;background:#f0dcc4;color:#79512f;font-size:10px;font-weight:900}
.event-updown-submitted>strong{display:block;margin:7px 0 4px;font-size:23px;color:var(--updown-ochre-dark)}
.event-updown-submitted p{font-size:10.5px!important}
.event-updown-closed{
  margin-top:12px;padding:15px 10px;border-radius:11px;background:#faf7f3;border:1px dashed #d8c7b6;text-align:center
}
.event-updown-closed strong{display:block;color:#5b4c40;font-size:12px}
.event-updown-closed span{display:block;margin-top:4px;color:#87786b;font-size:10px}
.event-updown-ranking th,.event-updown-ranking td{font-size:10.5px}
.event-updown-ranking tr.is-mine td{background:#fff4e5!important;border-top-color:#ddb687!important;border-bottom-color:#ddb687!important}
.event-updown-ranking tr.is-mine td:first-child{border-left:2px solid #c77a3a}
.event-updown-ranking tr.is-mine td:last-child{border-right:2px solid #c77a3a}
.event-updown-ranking td:last-child strong{color:var(--updown-ochre-dark)}
.event-updown-history-list{display:grid;gap:7px;margin-top:10px}
.event-updown-history-row{
  display:grid;grid-template-columns:72px 1fr 78px;gap:7px;align-items:center;padding:9px;
  border:1px solid #eadfd4;border-radius:9px;background:#fff
}
.event-updown-history-date{font-size:9.5px;font-weight:800;color:#7c6d60}
.event-updown-history-main{display:grid;gap:1px;min-width:0}
.event-updown-history-main>strong{font-size:12px;color:#56483c}
.event-updown-history-main>span{font-size:9px;color:#aa6a34;font-weight:900}
.event-updown-history-main>small{font-size:9px;color:#8a7b6e;white-space:normal}
.event-updown-history-result{text-align:right;display:grid;gap:1px}
.event-updown-history-result b{font-size:10px}
.event-updown-history-result small{font-size:8.5px;color:#8a7b6e}
.event-updown-history-result.is-success b{color:#4f8559}
.event-updown-history-result.is-fail b{color:#b95e4d}
.event-updown-history-result.is-pending b{color:#a96b31}
.event-updown-history-result.is-void b{color:#74808a}
@media(max-width:390px){
  .event-updown-decision-grid{grid-template-columns:1fr 1fr;gap:6px}
  .event-updown-decision{min-height:105px;padding:9px 6px}
  .event-updown-history-row{grid-template-columns:64px 1fr 70px;gap:5px;padding:8px 7px}
  .event-updown-history-main>small{font-size:8.5px}
}

/* ============================================================
   STEP 15 · 줄다리기 게임
   BLUE vs RED / 한 문제씩 / 숫자 비공개 LIVE 줄다리기
   ============================================================ */
.event-game-legacy .tug-intro-card{
    border-color:#d8dfeb;
    background:linear-gradient(145deg,#f5f9ff 0%,#fff 48%,#fff7f5 100%);
    overflow:hidden;
    position:relative;
}
.event-game-legacy .tug-intro-card::before{
    content:"";position:absolute;left:0;right:50%;top:0;height:4px;background:#477db9;
}
.event-game-legacy .tug-intro-card::after{
    content:"";position:absolute;left:50%;right:0;top:0;height:4px;background:#c85c50;
}
.event-game-legacy .tug-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:10px}
.event-game-legacy .tug-headline h2{margin:2px 0 6px;font-size:20px;color:#263744}
.event-game-legacy .tug-headline p{margin:0;color:#5d6670;font-size:11.5px;line-height:1.55}
.event-game-legacy .tug-kicker{display:block;color:#6d7580;font-size:9.5px;font-weight:900;letter-spacing:.09em}
.event-game-legacy .tug-toll-orb{flex:0 0 76px;min-height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#436fa7,#c4584e);color:#fff;box-shadow:0 7px 18px rgba(67,82,104,.18)}
.event-game-legacy .tug-toll-orb small{font-size:9px;font-weight:800;opacity:.9}.event-game-legacy .tug-toll-orb strong{font-size:25px;line-height:1.05}.event-game-legacy .tug-toll-orb span{font-size:8.5px;font-weight:800;opacity:.88}
.event-game-legacy .tug-live-note{margin-top:10px;padding:7px 9px;border-radius:7px;background:rgba(255,255,255,.72);color:#6f665f;font-size:10.5px;line-height:1.45}

.event-game-legacy .tug-progress-card{padding-top:14px}
.event-game-legacy .tug-progress-top{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin-bottom:12px}
.event-game-legacy .tug-progress-top>div:first-child{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.event-game-legacy .tug-progress-top span{font-size:10px;color:#6c766f;font-weight:800}.event-game-legacy .tug-progress-top strong{font-size:15px;color:#273a2e}
.event-game-legacy .tug-progress-track{height:7px;border-radius:999px;background:#edf0ee;overflow:hidden}.event-game-legacy .tug-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#477db9,#847287,#c85c50);transition:width .25s ease}
.event-game-legacy .tug-empty{padding:18px 10px;text-align:center;border-radius:9px;background:#f7f8f7;color:#69736d;font-size:12px;line-height:1.5}.event-game-legacy .tug-empty.is-done{background:#f5f7fb;color:#526476}

.event-game-legacy .tug-current-question{text-align:center;padding:4px 0 2px}.event-game-legacy .tug-question-no{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eef3f8;color:#496b8e;font-size:9.5px;font-weight:900;letter-spacing:.03em}.event-game-legacy .tug-current-question.is-overall .tug-question-no{background:#f2ecf4;color:#765b82}.event-game-legacy .tug-current-question h3{margin:9px auto 4px;max-width:360px;color:#263842;font-size:17px;line-height:1.35;word-break:keep-all}.event-game-legacy .tug-choice-guide{margin:0 0 12px;color:#788078;font-size:10.5px}
.event-game-legacy .tug-choice-form{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:6px;align-items:stretch}.event-game-legacy .tug-side-choice{min-width:0;min-height:124px;padding:11px 8px 9px;border:0;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 14px rgba(35,55,75,.11);transition:transform .13s ease,box-shadow .13s ease;font:inherit}.event-game-legacy .tug-side-choice:active{transform:scale(.97)}.event-game-legacy .tug-side-choice.is-blue{background:linear-gradient(145deg,#3f78b5,#6e9bc7);color:#fff}.event-game-legacy .tug-side-choice.is-red{background:linear-gradient(145deg,#bd5049,#d87b6d);color:#fff}.event-game-legacy .tug-punch{display:grid;place-items:center;width:31px;height:31px;margin-bottom:4px;border-radius:50%;background:rgba(255,255,255,.18);font-size:18px;line-height:1}.event-game-legacy .tug-side-choice small{font-size:8.5px;font-weight:900;opacity:.78;letter-spacing:.08em}.event-game-legacy .tug-side-choice strong{display:block;width:100%;margin:6px 0 7px;font-size:14px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;color:#fff}.event-game-legacy .tug-side-choice em{font-style:normal;font-size:9.5px;font-weight:900;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.18)}.event-game-legacy .tug-vs{display:flex;align-items:center;justify-content:center;color:#4f5b61;font-size:11px;font-weight:1000}

.event-game-legacy .event-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}.event-game-legacy .event-section-head h3{margin:1px 0 0;font-size:15px;color:#293b31}.event-game-legacy .tug-live-desc{margin:0 0 13px;color:#68726c;font-size:10.5px;line-height:1.45}
.event-game-legacy .tug-live-card{background:linear-gradient(90deg,#f5f9ff,#fff 46%,#fff,#fff6f4);border-color:#dce2e7}
.event-game-legacy .tug-arena{display:grid;grid-template-columns:55px minmax(0,1fr) 55px;align-items:center;gap:4px;min-height:78px;padding:7px 3px}
.event-game-legacy .tug-team{text-align:center}.event-game-legacy .tug-team b{display:block;font-size:26px;line-height:1.1;filter:saturate(.8)}.event-game-legacy .tug-team span{display:block;margin-top:4px;font-size:9.5px;font-weight:900}.event-game-legacy .tug-team.is-blue span{color:#3f74aa}.event-game-legacy .tug-team.is-red span{color:#ba5149}
.event-game-legacy .tug-rope-wrap{position:relative;height:42px}.event-game-legacy .tug-rope{position:absolute;left:0;right:0;top:20px;height:5px;border-radius:999px;background:repeating-linear-gradient(90deg,#987652 0 7px,#c79e6d 7px 13px);box-shadow:0 2px 3px rgba(75,52,29,.16)}.event-game-legacy .tug-center-line{position:absolute;left:50%;top:4px;bottom:3px;width:1px;border-left:1px dashed #cbd0cd}.event-game-legacy .tug-flag{position:absolute;left:var(--tug-position,50%);top:4px;transform:translateX(-50%);width:18px;height:27px;transition:left .45s ease}.event-game-legacy .tug-flag::before{content:"";position:absolute;left:8px;top:0;width:2px;height:27px;background:#4e504e;border-radius:2px}.event-game-legacy .tug-flag i{position:absolute;left:10px;top:1px;width:11px;height:9px;background:#e4ad43;clip-path:polygon(0 0,100% 20%,0 100%)}.event-game-legacy .tug-mood-text{text-align:center;margin-top:2px;color:#5e6962;font-size:10.5px;font-weight:800}

.event-game-legacy .tug-my-list{display:grid;gap:6px}.event-game-legacy .tug-my-row{display:grid;grid-template-columns:34px minmax(0,1fr) 95px;align-items:center;gap:7px;min-height:48px;padding:7px 8px;border:1px solid #e5e9e6;border-radius:9px;background:#fff}.event-game-legacy .tug-my-no{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#eef1ef;color:#657069;font-size:9.5px;font-weight:1000}.event-game-legacy .tug-my-pick{min-width:0}.event-game-legacy .tug-my-pick strong{display:block;color:#304038;font-size:11.5px;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}.event-game-legacy .tug-my-pick small{display:block;margin-top:2px;color:#89918c;font-size:8.5px;font-weight:900}.event-game-legacy .tug-my-state{display:flex;align-items:center;justify-content:flex-end;gap:5px}.event-game-legacy .tug-my-state b{font-size:18px}.event-game-legacy .tug-my-state span{font-size:9px;color:#737d77;white-space:nowrap}.event-game-legacy .tug-my-row.is-win{border-color:#b8d8c4;background:#f6fbf7}.event-game-legacy .tug-my-row.is-lose{border-color:#ead7d4;background:#fffafa}.event-game-legacy .tug-my-row.is-final{border-style:dashed;background:linear-gradient(90deg,#f5f9ff,#fff8f6)}

.event-game-legacy .tug-result-card{border-color:#d8dfdf;background:#fbfcfb}.event-game-legacy .tug-final-toll{padding:5px 8px;border-radius:999px;background:#eaf5ed;color:#236645;font-size:10px;font-weight:1000}.event-game-legacy .tug-result-list{display:grid;gap:8px}.event-game-legacy .tug-result-row{padding:9px;border:1px solid #e3e7e4;border-radius:9px;background:#fff}.event-game-legacy .tug-result-title{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:5px;margin-bottom:7px}.event-game-legacy .tug-result-title>b{font-size:10px;color:#65716a}.event-game-legacy .tug-result-title>span{font-size:10.5px;color:#3e4d45;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-game-legacy .tug-result-title em{font-style:normal;padding:3px 6px;border-radius:999px;font-size:8.5px;font-weight:1000}.event-game-legacy .tug-result-title em.is-hit{background:#e8f5ec;color:#24714a}.event-game-legacy .tug-result-title em.is-miss{background:#f2f3f2;color:#7d8580}.event-game-legacy .tug-result-score{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:4px}.event-game-legacy .tug-result-score>div{padding:7px;border-radius:7px;text-align:center;background:#f4f5f5;border:1px solid transparent}.event-game-legacy .tug-result-score>div.is-blue.is-winner{background:#edf5ff;border-color:#b8d2ea}.event-game-legacy .tug-result-score>div.is-red.is-winner{background:#fff0ef;border-color:#e5c0bb}.event-game-legacy .tug-result-score strong{display:block;font-size:10px;line-height:1.25;color:#3d4a44;word-break:keep-all}.event-game-legacy .tug-result-score span{display:block;margin-top:2px;font-size:9px;color:#79817d}.event-game-legacy .tug-result-score>b{text-align:center;font-size:8.5px;color:#8a918d}.event-game-legacy .tug-result-total{margin-top:10px;padding:9px;text-align:center;border-radius:8px;background:#eef6f0;color:#4a6252;font-size:10px}.event-game-legacy .tug-result-total strong{color:#23734d;font-size:13px}

/* 홈의 줄다리기 배너도 같은 BLUE vs RED 느낌으로 통일 */
.event-home-action.is-tug,.event-banner-action.is-tug{background:linear-gradient(135deg,#477db9 0%,#477db9 47%,#c85c50 53%,#c85c50 100%) !important}

@media(max-width:390px){
    .event-game-legacy .tug-headline{gap:8px}.event-game-legacy .tug-toll-orb{flex-basis:68px;min-height:68px}.event-game-legacy .tug-toll-orb strong{font-size:22px}
    .event-game-legacy .tug-current-question h3{font-size:15.5px}.event-game-legacy .tug-side-choice{min-height:116px;padding-left:6px;padding-right:6px}.event-game-legacy .tug-side-choice strong{font-size:12.5px}.event-game-legacy .tug-arena{grid-template-columns:49px minmax(0,1fr) 49px}.event-game-legacy .tug-team b{font-size:23px}.event-game-legacy .tug-my-row{grid-template-columns:31px minmax(0,1fr) 85px}.event-game-legacy .tug-my-state span{font-size:8.5px}
}

/* ============================================================
   STEP 16 · JJ 찾기
   이벤트홈 JJ 배너의 청록/파랑 톤 + 16종 수집형 화면
   ============================================================ */
:root{
  --jj-blue:#5b8296;
  --jj-blue-dark:#3f6679;
  --jj-blue-soft:#eef6f8;
  --jj-sky:#8db8c8;
  --jj-line:#cfdee4;
}
.event-home-action.is-jj{
  background:linear-gradient(145deg,#52788b,#79a7b9)!important;
  overflow:hidden;
}
.event-home-action.has-character{position:relative;padding-top:7px}
.event-home-action.has-character .event-home-game-character{
  width:49px;height:49px;object-fit:contain;border-radius:50%;background:#fff;
  box-shadow:0 4px 10px rgba(31,67,84,.16);margin-bottom:3px
}
.event-home-action.has-character strong{position:relative;z-index:1}

.jj-page .event-game-card{overflow:hidden}
.jj-intro-card{
  position:relative;background:linear-gradient(145deg,#eef7fa,#fff 58%,#edf4f7)!important;
  border-color:var(--jj-line)!important
}
.jj-intro-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#5b8296,#91bccb)}
.jj-mini-badge,.jj-collection-count{
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#e0eef2;color:var(--jj-blue-dark);font-size:9.5px;font-weight:900;white-space:nowrap
}
.jj-intro-main{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:9px;align-items:center}
.jj-kicker{display:block;font-size:9px;font-weight:1000;letter-spacing:.12em;color:#66899a;margin-bottom:5px}
.jj-intro-main h2{font-size:18px!important;color:#294858!important;line-height:1.28}
.jj-intro-main p{font-size:11px!important;line-height:1.55!important;color:#586e78!important}
.jj-intro-main p strong{color:var(--jj-blue-dark)}
.jj-intro-character{width:82px;height:82px;object-fit:contain;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(59,91,106,.12)}

.jj-stats-card{border-color:#d9e6ea!important}
.jj-today-state{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:9.5px;font-weight:900}
.jj-today-state.is-ready{background:#e9f4f7;color:#3d7085}.jj-today-state.is-done{background:#edf2ee;color:#5f7265}
.jj-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.jj-stat-grid>div{padding:10px 5px;border-radius:9px;background:#f8fbfc;border:1px solid #dce9ed;text-align:center}
.jj-stat-grid span{display:block;font-size:9px;color:#72848d;font-weight:800}.jj-stat-grid strong{display:inline-block;margin-top:2px;color:var(--jj-blue-dark);font-size:20px;line-height:1}.jj-stat-grid strong em{font-size:10px;font-style:normal;color:#84949b}.jj-stat-grid small{margin-left:2px;font-size:8.5px;color:#84949b;font-weight:800}
.jj-today-caught{display:flex;align-items:center;gap:9px;margin-top:9px;padding:8px 9px;border-radius:9px;background:#edf7f9;border:1px solid #d3e5ea}.jj-today-caught img{width:46px;height:46px;object-fit:contain;border-radius:9px;background:#fff}.jj-today-caught div{display:grid;gap:2px}.jj-today-caught strong{font-size:11.5px;color:#315c70}.jj-today-caught span{font-size:9.5px;color:#6b8089}

.jj-catch-card{background:linear-gradient(180deg,#fff,#f7fbfc);border-color:#d8e6eb!important}
.jj-camera-note{font-size:9px;color:#758891;font-weight:800}
.jj-catch-copy{font-size:10.5px!important;color:#687d86!important;margin-bottom:10px!important}
.jj-catch-main-btn{width:100%;border:0;border-radius:13px;min-height:86px;background:linear-gradient(145deg,#4f778a,#75a4b6);color:#fff;display:grid;grid-template-columns:45px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:12px 14px;cursor:pointer;box-shadow:0 7px 16px rgba(55,91,108,.16)}
.jj-catch-main-btn:disabled{opacity:.55;cursor:not-allowed}.jj-camera-icon{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border:2px solid rgba(255,255,255,.9);border-radius:10px;font-size:18px;color:#fff}.jj-catch-main-btn strong{font-size:16px;color:#fff}.jj-catch-main-btn small{font-size:9.5px;color:rgba(255,255,255,.82);font-weight:700}
.jj-catch-result{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border-radius:10px;border:1px solid #d7e3e7;background:#f8fbfc}.jj-catch-result img{width:55px;height:55px;object-fit:contain;border-radius:10px;background:#fff}.jj-catch-result div{display:grid;gap:2px}.jj-catch-result strong{font-size:12px;color:#3b5662}.jj-catch-result span{font-size:10px;line-height:1.45;color:#697c84}.jj-catch-result.is-success{background:#ebf7ef;border-color:#c8e5d1}.jj-catch-result.is-success strong{color:#236545}.jj-catch-result.is-fail{background:#fff8f5;border-color:#ead9d1}

.jj-rank-card{border-color:#dbe6ea!important}.jj-rank-desc,.jj-collection-desc{font-size:10px!important;color:#74858c!important;margin:0 0 9px!important}.jj-empty{padding:14px;border-radius:9px;background:#f6fafb;color:#71838b;text-align:center;font-size:10.5px}
.jj-rank-list{display:grid;gap:5px}.jj-rank-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px;align-items:center;padding:8px;border-radius:9px;background:#fafcfd;border:1px solid #e1eaed}.jj-rank-row.is-mine{background:#edf7fa;border:2px solid #7ea9b9}.jj-rank-no{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e8f0f3;color:#4e7181;font-size:10px}.jj-rank-row:nth-child(1) .jj-rank-no{background:#fff1bd;color:#8b6717}.jj-rank-row:nth-child(2) .jj-rank-no{background:#edf0f2;color:#6b7379}.jj-rank-row:nth-child(3) .jj-rank-no{background:#f4dfcf;color:#8d6245}.jj-rank-name{font-size:10.5px;font-weight:900;color:#40545d}.jj-rank-count{font-size:9px;color:#788991;white-space:nowrap}.jj-rank-count strong{font-size:13px;color:var(--jj-blue-dark)}.jj-rank-count small{margin-left:4px;color:#95a2a8}.jj-rank-mine{display:grid;grid-template-columns:34px 1fr auto;align-items:center;margin-top:6px;padding:8px;border:2px solid #7ea9b9;border-radius:9px;background:#edf7fa;font-size:10px}.jj-rank-mine>span{text-align:center;color:#79909a}.jj-rank-mine>strong{color:#365f72}.jj-rank-mine>b{color:#365f72}.jj-rank-pages{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:9px}.jj-rank-pages a{display:grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:7px;background:#f0f5f6;color:#617984;font-size:9.5px;font-weight:900;text-decoration:none}.jj-rank-pages a.is-current{background:var(--jj-blue);color:#fff}

.jj-collection-card{border-color:#d7e4e9!important;background:linear-gradient(180deg,#fff,#f9fbfc)}
.jj-collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.jj-collection-item{position:relative;min-width:0;aspect-ratio:1/1.08;border-radius:10px;border:1px solid #dce7eb;background:#fff;padding:4px 3px 14px;display:grid;place-items:center;cursor:pointer;overflow:hidden}.jj-collection-item img{width:100%;height:100%;min-height:0;object-fit:contain}.jj-collection-item>b{position:absolute;right:4px;top:4px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 4px;border-radius:999px;background:#52788b;color:#fff;font-size:9px;box-shadow:0 2px 5px rgba(40,70,84,.2)}.jj-collection-item small{position:absolute;left:0;right:0;bottom:3px;font-size:7.5px;color:#71868f;font-weight:900}.jj-collection-item.is-empty{background:#f1f5f6;border-style:dashed;cursor:default}.jj-collection-item.is-empty>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e5ecef;color:#a0adb3;font-size:22px;font-weight:1000}.jj-complete-badge{margin-top:10px;padding:9px;border-radius:9px;background:#fff6d9;color:#7d641b;text-align:center;font-size:11px;font-weight:900}

.jj-camera-modal,.jj-character-modal{position:fixed;inset:0;z-index:3000;background:rgba(15,25,29,.78);padding:14px;display:grid;place-items:center}.jj-camera-modal[hidden],.jj-character-modal[hidden]{display:none!important}.jj-camera-panel{width:min(440px,100%);background:#172229;border-radius:17px;padding:12px;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35)}.jj-camera-top{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 10px}.jj-camera-top strong{font-size:13px}.jj-camera-top button,.jj-character-close{border:0;background:rgba(255,255,255,.12);color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer}.jj-camera-stage{position:relative;overflow:hidden;border-radius:13px;background:#000;aspect-ratio:3/4}.jj-camera-stage video{width:100%;height:100%;object-fit:cover}.jj-camera-frame{position:absolute;left:14%;right:14%;top:24%;aspect-ratio:1;border:3px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.2);pointer-events:none}.jj-camera-status{position:absolute;left:10px;right:10px;bottom:12px;padding:8px;border-radius:999px;background:rgba(0,0,0,.55);font-size:10px;text-align:center}.jj-camera-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.jj-camera-actions button{border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(255,255,255,.09);color:#fff;padding:10px;font-size:11px;font-weight:900}
.jj-character-modal{z-index:3100}.jj-character-close{position:absolute;right:18px;top:18px}.jj-character-dialog{width:min(330px,88vw);padding:15px;border-radius:18px;background:#fff;text-align:center;display:grid;gap:5px}.jj-character-dialog img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:13px;background:#f7fafb}.jj-character-dialog strong{font-size:16px;color:#345a6c}.jj-character-dialog span{font-size:11px;color:#74858c}

@media(max-width:390px){
  .jj-intro-main{grid-template-columns:minmax(0,1fr) 70px}.jj-intro-character{width:68px;height:68px}.jj-intro-main h2{font-size:16px!important}
  .jj-stat-grid>div{padding:9px 3px}.jj-stat-grid strong{font-size:18px}
  .jj-collection-grid{gap:5px}.jj-collection-item{border-radius:8px}.jj-rank-row{grid-template-columns:31px minmax(0,1fr) auto;padding:7px 6px}
}


/* ===== STEP 17B: Prize draw core-first layout ===== */
.draw-intro-card{
    margin-bottom:10px;
}
.draw-intro-card .draw-state-message{
    margin-top:8px!important;
}
.draw-top-balance{
    margin-top:8px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid #d8e7dc;
    border-radius:11px;
    background:#f4faf6;
    color:#466252;
    text-decoration:none;
}
.draw-top-balance span{
    font-size:10px;
    font-weight:800;
}
.draw-top-balance strong{
    display:flex;
    align-items:baseline;
    gap:2px;
    color:#23734d;
    font-size:11px;
}
.draw-top-balance strong b{
    font-size:19px;
}
.draw-core-card{
    border-color:#d5e4d9!important;
    box-shadow:0 7px 18px rgba(36,83,51,.07)!important;
}
.draw-core-title{
    align-items:flex-start!important;
}
.draw-core-title>div{
    display:grid;
    gap:2px;
}
.draw-core-title small{
    color:#849188;
    font-size:9.5px;
    font-weight:600;
}
.draw-room-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.draw-room-btn{
    position:relative;
    min-height:78px;
    padding:11px 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid #dce7df;
    border-radius:14px;
    background:linear-gradient(145deg,#fff,#f7faf8);
    box-shadow:0 3px 10px rgba(32,72,45,.045);
}
.draw-room-btn strong{
    font-size:12.5px;
    color:#314c39;
}
.draw-room-btn span{
    margin-top:6px;
    color:#74877b;
    font-size:9.5px;
    font-weight:800;
}
.draw-room-btn.is-active{
    background:linear-gradient(145deg,#f0f8f2,#e7f3eb);
    color:#29553a;
    border:2px solid #5b9470;
    box-shadow:0 5px 13px rgba(35,115,77,.10);
}
.draw-room-btn.is-active strong{color:#245638}
.draw-room-btn.is-active span{color:#3d7250}
.draw-room-lucky{
    display:inline-flex;
    align-self:flex-start;
    margin-top:5px;
    padding:3px 6px;
    border-radius:999px;
    background:#fff2c9;
    color:#8b6511;
    font-size:8.5px;
    font-style:normal;
    font-weight:900;
    line-height:1.25;
}
.draw-room-lucky.rank-1{background:#ffe8a1;color:#7f5a00}
.draw-room-lucky.rank-2{background:#edf0f2;color:#5f6c73}
.draw-room-lucky.rank-3{background:#f4dfd0;color:#8b5d40}
.draw-pick-first{
    margin-top:9px;
    padding:8px 10px;
    border-radius:10px;
    background:#f8fbf9;
    color:#74847a;
    font-size:9.5px;
    text-align:center;
}
.draw-pick-first strong{color:#2d6843}
.draw-board{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
}
.draw-item{
    min-height:64px!important;
    padding:6px 4px!important;
    border-radius:11px!important;
}
.draw-item-no{font-size:7.5px!important}
.draw-item-label{
    font-size:9.4px!important;
    -webkit-line-clamp:2;
    line-height:1.2!important;
}
.draw-board-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex-wrap:wrap;
    margin-top:10px;
}
.draw-board-pagination a,
.draw-board-pagination span{
    min-width:28px;
    height:28px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dce7df;
    border-radius:9px;
    background:#fff;
    color:#617369;
    font-size:9.5px;
    font-weight:900;
    text-decoration:none;
}
.draw-board-pagination a.is-active{
    background:#23734d;
    color:#fff;
    border-color:#23734d;
}
.draw-page-gap{
    border:0!important;
    background:transparent!important;
    min-width:18px!important;
    padding:0!important;
}
.draw-info-card{
    margin-top:10px;
}
.draw-info-card .draw-public-summary-grid{
    margin-top:9px;
}
.draw-info-card .draw-public-actions{
    margin-top:9px;
}
@media(max-width:360px){
    .draw-board{
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        gap:5px!important;
    }
    .draw-item{
        min-height:61px!important;
        padding:5px 3px!important;
    }
    .draw-item-label{font-size:8.8px!important}
}


/* ===== STEP 18: Unified event-game intro cards ===== */
.event-unified-intro{
    --game-accent:#6f86a8;
    --game-soft:#f5f8fb;
    --game-ink:#294056;
    position:relative;
    overflow:hidden;
    padding:13px 13px 13px 16px!important;
    border:1px solid color-mix(in srgb,var(--game-accent) 28%, #dfe6e1)!important;
    background:linear-gradient(135deg,#fff 0%,var(--game-soft) 100%)!important;
    box-shadow:0 5px 14px rgba(24,56,38,.045)!important;
}
.event-unified-intro::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:5px;
    background:var(--game-accent);
}
.event-unified-intro.theme-dice{--game-accent:#7867ca;--game-soft:#f5f1ff;--game-ink:#493d8c}
.event-unified-intro.theme-updown{--game-accent:#d2a041;--game-soft:#fff7e7;--game-ink:#805f1f}
.event-unified-intro.theme-tug{--game-accent:#657fb1;--game-soft:#fffafa;--game-ink:#334b75}
.event-unified-intro.theme-jj{--game-accent:#6f98ae;--game-soft:#f2f8fb;--game-ink:#31566a}
.event-unified-intro.theme-draw{--game-accent:#e2b24e;--game-soft:#fff9e9;--game-ink:#755514}
.event-unified-intro .event-game-meta{
    margin-bottom:8px!important;
    min-height:24px;
}
.event-unified-intro .event-badge,
.event-unified-intro .jj-mini-badge{
    background:rgba(255,255,255,.74)!important;
    border:1px solid rgba(45,70,54,.06)!important;
    color:#4c5e52!important;
    font-size:9px!important;
    font-weight:900!important;
    padding:5px 8px!important;
    border-radius:999px!important;
}
.event-unified-intro-main{
    display:grid;
    grid-template-columns:minmax(0,1fr) 78px;
    align-items:center;
    gap:10px;
}
.event-unified-intro-copy{min-width:0}
.event-unified-kicker{
    display:block;
    margin-bottom:2px;
    color:var(--game-accent);
    font-size:8.5px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.09em;
}
.theme-tug .event-unified-kicker{color:#546f9d}
.event-unified-intro h2{
    margin:0 0 5px!important;
    color:var(--game-ink)!important;
    font-size:18px!important;
    line-height:1.25!important;
    font-weight:900!important;
    letter-spacing:-.025em;
}
.event-unified-intro p{
    margin:0!important;
    color:#596860!important;
    font-size:10.5px!important;
    line-height:1.55!important;
    word-break:keep-all;
}
.event-unified-intro p strong{color:var(--game-ink)!important}
.event-unified-visual{
    width:76px;
    height:76px;
    justify-self:end;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(46,72,56,.06);
    box-shadow:0 5px 14px rgba(46,66,53,.05);
    flex:none;
}
/* Dice header visual */
.dice-header-face{
    position:relative;
    width:48px;height:48px;
    border-radius:13px;
    background:linear-gradient(145deg,#8d7add,#6657b8);
    box-shadow:inset -4px -5px 9px rgba(47,35,104,.16),0 7px 12px rgba(77,61,153,.18);
    transform:rotate(-8deg);
}
.dice-header-face i{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.13)}
.dice-header-face i:nth-child(1){left:10px;top:9px}.dice-header-face i:nth-child(2){right:10px;top:9px}.dice-header-face i:nth-child(3){left:50%;top:50%;transform:translate(-50%,-50%)}.dice-header-face i:nth-child(4){left:10px;bottom:9px}.dice-header-face i:nth-child(5){right:10px;bottom:9px}
/* UP&DOWN header visual */
.updown-header-visual{gap:3px;flex-direction:column;background:linear-gradient(145deg,#fffdf7,#fff4dc)}
.updown-header-visual .up-arrow{color:#4e86b7;font-size:25px;line-height:.8;text-shadow:0 2px 0 rgba(59,102,141,.12)}
.updown-header-visual .down-arrow{color:#c96856;font-size:25px;line-height:.8;text-shadow:0 2px 0 rgba(151,70,55,.10)}
.updown-header-visual b{font-size:7px;color:#a07a32;letter-spacing:.08em}
/* Tug header keeps its toll orb as the right visual */
.tug-header-visual{background:linear-gradient(135deg,#edf4ff,#fff1ef);border-color:#e5e1e1}
.tug-header-visual .tug-toll-orb{width:64px!important;height:64px!important;margin:0!important;box-shadow:0 5px 11px rgba(67,69,100,.12)!important}
.tug-header-visual .tug-toll-orb strong{font-size:21px!important}
.tug-header-visual .tug-toll-orb small,.tug-header-visual .tug-toll-orb span{font-size:7.5px!important}
.theme-tug::before{background:linear-gradient(180deg,#547fbe 0 50%,#c9675f 50% 100%)}
.tug-intro-card::after{display:none!important}
.tug-intro-card .tug-live-note{margin-top:9px!important}
/* JJ header visual */
.jj-header-visual{background:#fff;border-radius:18px}
.jj-header-visual .jj-intro-character{width:70px!important;height:70px!important;object-fit:contain!important;margin:0!important;filter:none!important}
/* Prize draw header visual */
.draw-header-visual{background:linear-gradient(145deg,#fffdf6,#fff4c9)}
.draw-gift-box{position:relative;width:46px;height:36px;margin-top:10px;border-radius:5px;background:#e3b64d;box-shadow:0 5px 10px rgba(155,112,20,.15)}
.draw-gift-box::before{content:"";position:absolute;left:-4px;right:-4px;top:-9px;height:11px;border-radius:5px;background:#efc967;box-shadow:0 2px 3px rgba(155,112,20,.10)}
.draw-gift-box::after{content:"";position:absolute;top:-9px;bottom:0;left:20px;width:7px;background:#fff4d0}
.draw-gift-box i,.draw-gift-box b{position:absolute;top:-24px;width:21px;height:17px;border:5px solid #d8a736;border-radius:50% 50% 20% 50%;background:transparent}
.draw-gift-box i{left:5px;transform:rotate(22deg)}.draw-gift-box b{right:5px;transform:scaleX(-1) rotate(22deg)}
.draw-date-badge{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.draw-intro-card .draw-top-balance{margin-top:10px!important}
.draw-intro-card .draw-state-message{margin-top:8px!important}
@media(max-width:390px){
    .event-unified-intro-main{grid-template-columns:minmax(0,1fr) 72px;gap:8px}
    .event-unified-visual{width:70px;height:70px;border-radius:16px}
    .event-unified-intro h2{font-size:17px!important}
    .event-unified-intro p{font-size:10px!important;line-height:1.5!important}
    .jj-header-visual .jj-intro-character{width:64px!important;height:64px!important}
    .draw-date-badge{max-width:150px}
}


/* STEP 18B · 메뉴 줄다리기 상단 좌측 BLUE/RED 라인 보정 */
.event-unified-intro.theme-tug::before{
    background:linear-gradient(
        180deg,
        #547fbe 0%,
        #547fbe 50%,
        #c9675f 50%,
        #c9675f 100%
    ) !important;
}


/* STEP 18C · 메뉴 줄다리기 상단 좌측 세로색줄 최종 보정
   기존 tug-intro-card::before 의 height:4px / right:50% 잔여값까지 모두 덮어쓴다. */
.event-game-legacy .event-unified-intro.theme-tug::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:auto !important;
    top:0 !important;
    bottom:0 !important;
    width:5px !important;
    height:auto !important;
    background:linear-gradient(
        180deg,
        #547fbe 0%,
        #547fbe 50%,
        #c9675f 50%,
        #c9675f 100%
    ) !important;
}

.event-game-legacy .event-unified-intro.theme-tug::after{
    display:none !important;
    content:none !important;
}