/* 🪙 전국 운빨 리그 (2026-10-10) — act/luckleague.php 전용 */
#ll-wrap {
    --ll-bg: #fffaf0; --ll-card: #ffffff; --ll-line: #f1e3c4; --ll-text: #2b2216; --ll-sub: #7a6a52;
    --ll-gold: #f5b301; --ll-gold2: #d48806; --ll-accent: #7c3aed; --ll-ok: #16a34a; --ll-bad: #dc2626;
    --ll-chip: #fff3d6; --ll-input: #fff;
    width: 100%; max-width: none; margin: 0 auto 8px; box-sizing: border-box; color: var(--ll-text);
}
html[data-theme="dark"] #ll-wrap {
    --ll-bg: #17140f; --ll-card: #1f1b14; --ll-line: #3a3122; --ll-text: #f4ead8; --ll-sub: #b9a988;
    --ll-gold: #fbbf24; --ll-gold2: #f59e0b; --ll-accent: #a78bfa; --ll-ok: #4ade80; --ll-bad: #f87171;
    --ll-chip: #2c2416; --ll-input: #120f0a;
}
#ll-wrap *, #ll-wrap *::before, #ll-wrap *::after { box-sizing: border-box; }

.ll-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ll-me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ll-me-nick { font-weight: 900; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.ll-linkbtn { border: 1px solid var(--ll-line); background: var(--ll-card); color: var(--ll-sub); border-radius: 16px; padding: 6px 12px; min-height: 34px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ll-reset { font-size: 13px; color: var(--ll-sub); }
.ll-reset b { color: var(--ll-text); font-variant-numeric: tabular-nums; }
.ll-nickform { display: flex; gap: 6px; margin: 0 0 10px; }
.ll-nickform[hidden] { display: none; }
.ll-nickform input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--ll-line); border-radius: 12px; padding: 0 12px; font-size: 15px; background: var(--ll-input); color: var(--ll-text); }
.ll-nickform button { height: 44px; padding: 0 14px; border: 0; border-radius: 12px; font-weight: 800; cursor: pointer; background: var(--ll-gold); color: #2b1a00; }
.ll-nickform .ll-ghost { background: transparent; color: var(--ll-sub); border: 1px solid var(--ll-line); }

.ll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .ll-grid { grid-template-columns: 1fr; } }
.ll-card {
    background: var(--ll-card); border: 1px solid var(--ll-line); border-radius: 18px; padding: 16px;
    box-shadow: 0 10px 26px rgba(120, 80, 10, .08); min-width: 0;
}
.ll-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ll-card-head h2 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: var(--ll-text); }
.ll-badge { font-size: 10px; font-weight: 900; letter-spacing: .08em; padding: 3px 7px; border-radius: 8px; background: var(--ll-chip); color: var(--ll-gold2); }

/* ── 동전 ── */
.ll-stage { height: 190px; display: flex; align-items: center; justify-content: center; perspective: 900px; }
.ll-coin { position: relative; width: 140px; height: 140px; transform-style: preserve-3d; transform: rotateY(0deg); }
.ll-face {
    position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: 6px solid #c98a00; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), inset 0 -10px 18px rgba(0, 0, 0, .18), 0 10px 22px rgba(0, 0, 0, .18);
}
.ll-heads { background: radial-gradient(circle at 35% 30%, #fff1b8, #f5c542 55%, #d99a00); }
.ll-tails { background: radial-gradient(circle at 35% 30%, #eef2f7, #a7b0bf 55%, #6b7280); border-color: #4b5563; transform: rotateY(180deg); }
.ll-ico { font-size: 54px; line-height: 1; }
.ll-lab { margin-top: 4px; font-size: 14px; font-weight: 900; color: #3a2600; }
.ll-tails .ll-lab { color: #1f2937; }
.ll-coin.show-H { transform: rotateY(0deg); }
.ll-coin.show-T { transform: rotateY(180deg); }
.ll-coin.idle { animation: ll-wobble 3s ease-in-out infinite; }
.ll-coin.spin-H { animation: ll-spin-H 1.2s cubic-bezier(.25, .7, .3, 1) forwards; }
.ll-coin.spin-T { animation: ll-spin-T 1.2s cubic-bezier(.25, .7, .3, 1) forwards; }
.ll-coin.spinning { animation: ll-spin-loop .45s linear infinite; }
@keyframes ll-wobble { 0%, 100% { transform: rotateY(-14deg); } 50% { transform: rotateY(14deg); } }
@keyframes ll-spin-loop { from { transform: translateY(-30px) rotateY(0deg); } to { transform: translateY(-30px) rotateY(360deg); } }
@keyframes ll-spin-H {
    0% { transform: translateY(-30px) rotateY(0deg); } 45% { transform: translateY(-48px) rotateY(1080deg); }
    85% { transform: translateY(4px) rotateY(1760deg); } 100% { transform: translateY(0) rotateY(1800deg); }
}
@keyframes ll-spin-T {
    0% { transform: translateY(-30px) rotateY(0deg); } 45% { transform: translateY(-48px) rotateY(1170deg); }
    85% { transform: translateY(4px) rotateY(1940deg); } 100% { transform: translateY(0) rotateY(1980deg); }
}
@media (prefers-reduced-motion: reduce) { .ll-coin.idle, .ll-coin.spinning { animation: none; } .ll-coin.spin-H, .ll-coin.spin-T { animation-duration: .01s; } }

.ll-coin-msg { text-align: center; font-weight: 800; font-size: 15px; min-height: 46px; line-height: 1.5; word-break: keep-all; margin: 4px 0 8px; }
.ll-coin-msg .ok { color: var(--ll-ok); } .ll-coin-msg .bad { color: var(--ll-bad); }
.ll-btn {
    display: block; width: 100%; min-height: 50px; border: 0; border-radius: 26px; cursor: pointer;
    background: linear-gradient(135deg, var(--ll-gold), #f97316); color: #2b1600; font-size: 16px; font-weight: 900;
    box-shadow: 0 8px 18px rgba(245, 158, 11, .28);
}
.ll-btn:disabled { cursor: default; opacity: .5; box-shadow: none; }
.ll-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ll-stats > div { text-align: center; padding: 8px 2px; border-radius: 12px; background: var(--ll-chip); }
.ll-stats small { display: block; font-size: 11px; color: var(--ll-sub); font-weight: 700; }
.ll-stats strong { display: block; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ll-text); }
.ll-sub { margin-top: 8px; font-size: 12.5px; color: var(--ll-sub); text-align: center; word-break: keep-all; line-height: 1.5; }

/* ── 숫자 ── */
.ll-num-desc { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--ll-sub); word-break: keep-all; }
.ll-num-desc b { color: var(--ll-text); }
.ll-num-form { display: flex; gap: 8px; }
.ll-num-form input {
    flex: 1; min-width: 0; height: 50px; border: 2px solid var(--ll-line); border-radius: 14px; padding: 0 14px;
    font-size: 22px; font-weight: 900; text-align: center; background: var(--ll-input); color: var(--ll-text); font-variant-numeric: tabular-nums;
}
.ll-num-form input:focus { outline: none; border-color: var(--ll-gold); }
.ll-num-form .ll-btn { width: 96px; flex: 0 0 96px; }
.ll-num-done { padding: 14px; border-radius: 14px; background: var(--ll-chip); text-align: center; font-size: 14px; line-height: 1.6; word-break: keep-all; }
.ll-num-done[hidden] { display: none; }
.ll-num-done b.big { display: block; font-size: 34px; font-weight: 900; color: var(--ll-gold2); line-height: 1.2; }
.ll-num-players { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--ll-sub); font-weight: 700; }
.ll-tip { margin: 10px 0 0; font-size: 12.5px; color: var(--ll-sub); line-height: 1.5; word-break: keep-all; }
.ll-result { margin-top: 12px; border-top: 1px dashed var(--ll-line); padding-top: 12px; font-size: 13.5px; line-height: 1.6; }
.ll-result:empty { display: none; }
.ll-res-h { font-weight: 900; font-size: 14px; margin-bottom: 6px; }
.ll-res-win { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--ll-chip); }
.ll-res-win .n { font-size: 30px; font-weight: 900; color: var(--ll-gold2); font-variant-numeric: tabular-nums; min-width: 54px; text-align: center; }
.ll-res-win .w { min-width: 0; word-break: break-all; }
.ll-res-win .w small { display: block; color: var(--ll-sub); font-size: 12px; }
.ll-res-meta { margin: 8px 0 4px; color: var(--ll-sub); font-size: 12.5px; }
.ll-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.ll-chips span { padding: 3px 9px; border-radius: 12px; background: var(--ll-chip); font-size: 12.5px; font-weight: 700; }
.ll-chips span.dup { background: transparent; border: 1px solid var(--ll-line); color: var(--ll-sub); }
.ll-res-lab { font-size: 12px; color: var(--ll-sub); font-weight: 700; margin-top: 6px; }
.ll-before { margin-top: 10px; font-size: 13px; }
.ll-before summary { cursor: pointer; color: var(--ll-sub); font-weight: 700; min-height: 32px; }
.ll-before[hidden] { display: none; }

/* ── 보드·가이드 ── */
.ll-board .btn_4 { cursor: pointer; }
.ll-board-sum { margin: 10px 0 4px; font-size: 13px; text-align: center; color: inherit; opacity: .85; }
.ll-board tr.ll-mine td { background: rgba(245, 179, 1, .18) !important; font-weight: 900; }
.ll-board .ll-pend { font-size: 11px; opacity: .7; margin-left: 4px; }
.ll-myrank { text-align: center; font-size: 13px; margin-top: 6px; font-weight: 700; }
.ll-guide { text-align: left; line-height: 1.7; margin-top: 16px; }
.ll-guide p, .ll-guide li { font-size: .9rem; }
.ll-guide h3 { font-size: 1rem; margin: 10px 0 4px; }
.ll-guide small { font-size: .8rem; display: block; margin-top: 8px; }
.ll-guide ul { padding-left: 18px; margin: 4px 0; }