/* 실시간 학생 투표 (Live Poll) 공통 스타일 */

:root {
    --lp-navy: #0b2f63;
    --lp-navy-deep: #071b38;
    --lp-blue: #0f4291;
    --lp-accent: #2f7dd1;
    --lp-o: #2e8b57;
    --lp-x: #d9534f;
    --lp-ink: #1a2233;
    --lp-muted: #6b7688;
    --lp-line: #e4e9f2;
    --lp-bg: #f5f7fb;
}

.lp-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 22px 18px 60px;
}
.lp-wrap.narrow { max-width: 560px; }

.lp-card {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 6px 22px rgba(11, 47, 99, 0.06);
}

.lp-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(47, 125, 209, 0.12);
    color: var(--lp-blue);
    margin-bottom: 10px;
}
.lp-badge.closed { background: rgba(217, 83, 79, 0.14); color: var(--lp-x); }

.lp-question {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.45;
    color: var(--lp-ink);
    margin: 4px 0 0;
    word-break: keep-all;
}

/* ── 생성 폼 ── */
.lp-form label.lp-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-muted);
    margin: 16px 0 7px;
}
.lp-form textarea,
.lp-form input[type="text"] {
    width: 100%;
    padding: 12px 13px;
    font-size: 1rem;
    border: 1.5px solid var(--lp-line);
    border-radius: 11px;
    font-family: inherit;
    background: #fff;
    color: var(--lp-ink);
}
.lp-form textarea { min-height: 76px; resize: vertical; }
.lp-form textarea:focus,
.lp-form input[type="text"]:focus {
    outline: none;
    border-color: var(--lp-accent);
    box-shadow: 0 0 0 3px rgba(47, 125, 209, 0.14);
}

.lp-typegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.lp-type {
    display: block;
    cursor: pointer;
    text-align: center;
    padding: 14px 8px;
    border: 1.5px solid var(--lp-line);
    border-radius: 12px;
    background: #fff;
    transition: all 0.15s;
}
.lp-type input { display: none; }
.lp-type .ic { font-size: 1.4rem; display: block; margin-bottom: 5px; }
.lp-type .tt { font-size: 0.86rem; font-weight: 700; color: var(--lp-ink); }
.lp-type:hover { border-color: var(--lp-accent); }
.lp-type.sel {
    border-color: var(--lp-blue);
    background: rgba(47, 125, 209, 0.08);
    box-shadow: 0 0 0 2px rgba(15, 66, 145, 0.12) inset;
}

.lp-optrow { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.lp-optrow .num {
    width: 26px; height: 26px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--lp-bg);
    font-size: 0.8rem; font-weight: 800; color: var(--lp-muted);
}

.lp-check {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px; border: 1.5px solid var(--lp-line); border-radius: 11px;
    cursor: pointer;
}
.lp-check input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }
.lp-check .ct { font-size: 0.9rem; font-weight: 700; color: var(--lp-ink); }
.lp-check .cd { font-size: 0.78rem; color: var(--lp-muted); margin-top: 2px; }

.lp-btn {
    display: inline-block;
    width: 100%;
    padding: 14px;
    font-size: 1.02rem;
    font-weight: 800;
    text-align: center;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(120deg, var(--lp-navy) 0%, var(--lp-blue) 100%);
    color: #fff;
    text-decoration: none;
    transition: filter 0.15s, transform 0.05s;
}
.lp-btn:hover { filter: brightness(1.08); }
.lp-btn:active { transform: translateY(1px); }
.lp-btn.ghost {
    background: #fff;
    color: var(--lp-blue);
    border: 1.5px solid var(--lp-line);
}
.lp-btn.sm { width: auto; padding: 9px 16px; font-size: 0.86rem; }
.lp-btn.danger { background: #fff; color: var(--lp-x); border: 1.5px solid rgba(217,83,79,.35); }

.lp-error {
    background: rgba(217, 83, 79, 0.1);
    color: #b93b37;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 10px 13px;
    border-radius: 9px;
    margin-bottom: 12px;
}

/* ── 교사 화면 ── */
.lp-hostgrid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
}
@media (max-width: 720px) {
    .lp-hostgrid { grid-template-columns: 1fr; }
    .lp-typegrid { grid-template-columns: 1fr; }
}

.lp-qr {
    text-align: center;
}
.lp-qr img {
    width: 100%;
    max-width: 220px;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
}
.lp-code {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--lp-navy);
    margin: 10px 0 2px;
    text-transform: uppercase;
}
.lp-url {
    font-size: 0.76rem;
    color: var(--lp-muted);
    word-break: break-all;
}

.lp-livecount {
    text-align: center;
    padding: 18px 10px 20px;
}
.lp-livecount .n {
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--lp-navy);
    font-variant-numeric: tabular-nums;
}
.lp-livecount .lbl { font-size: 0.9rem; font-weight: 700; color: var(--lp-muted); margin-top: 4px; }
.lp-livecount .pulse {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--lp-o); margin-right: 6px; vertical-align: middle;
    animation: lp-pulse 1.4s ease-in-out infinite;
}
@keyframes lp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.lp-controls { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }

/* ── 결과 시각화 ── */
.lp-results { margin-top: 6px; }
.lp-results .empty {
    text-align: center; color: var(--lp-muted); font-size: 0.9rem; padding: 26px 0;
}

.lp-bar-row { margin-bottom: 14px; }
.lp-bar-row .top {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.92rem; font-weight: 700; color: var(--lp-ink); margin-bottom: 5px;
}
.lp-bar-row .top .cnt { color: var(--lp-muted); font-weight: 700; font-size: 0.84rem; }
.lp-bar-track {
    height: 30px; background: var(--lp-bg); border-radius: 8px; overflow: hidden;
}
.lp-bar-fill {
    height: 100%; border-radius: 8px;
    background: linear-gradient(90deg, var(--lp-accent), var(--lp-blue));
    transition: width 0.5s cubic-bezier(.2,.7,.3,1);
    min-width: 2px;
}
.lp-bar-row.win .lp-bar-fill { background: linear-gradient(90deg, #37a06a, var(--lp-o)); }
.lp-bar-row.ox-o .lp-bar-fill { background: linear-gradient(90deg, #37a06a, var(--lp-o)); }
.lp-bar-row.ox-x .lp-bar-fill { background: linear-gradient(90deg, #e2726e, var(--lp-x)); }

.lp-ox {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px;
}
.lp-ox .cell {
    text-align: center; padding: 18px 10px; border-radius: 14px; background: var(--lp-bg);
}
.lp-ox .cell .mark { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.lp-ox .cell.o .mark { color: var(--lp-o); }
.lp-ox .cell.x .mark { color: var(--lp-x); }
.lp-ox .cell .pct { font-size: 1.5rem; font-weight: 900; color: var(--lp-ink); margin-top: 8px; }
.lp-ox .cell .sub { font-size: 0.8rem; color: var(--lp-muted); }

.lp-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(47, 125, 209, 0.1); color: var(--lp-blue);
    font-weight: 700; font-size: 0.9rem;
}
.lp-chip .x2 { background: var(--lp-blue); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 0.76rem; }

.lp-answerlist { border-top: 1px solid var(--lp-line); }
.lp-answerlist .item {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 9px 2px; border-bottom: 1px solid var(--lp-line); font-size: 0.88rem;
}
.lp-answerlist .item .who { color: var(--lp-muted); flex-shrink: 0; }
.lp-answerlist .item .ans { color: var(--lp-ink); font-weight: 600; text-align: right; word-break: break-word; }

/* ── 학생 투표 UI ── */
.lp-choices { display: flex; flex-direction: column; gap: 10px; }
.lp-choice {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 16px;
    border: 1.5px solid var(--lp-line);
    border-radius: 13px;
    font-size: 1.02rem; font-weight: 700; color: var(--lp-ink);
    cursor: pointer; background: #fff;
    transition: all 0.12s;
}
.lp-choice .k {
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--lp-bg); font-weight: 800; font-size: 0.9rem; color: var(--lp-muted);
}
.lp-choice:hover { border-color: var(--lp-accent); }
.lp-choice.sel {
    border-color: var(--lp-blue);
    background: rgba(47, 125, 209, 0.09);
}
.lp-choice.sel .k { background: var(--lp-blue); color: #fff; }

.lp-oxbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-oxbtn {
    padding: 30px 10px; border-radius: 18px; border: 2px solid var(--lp-line);
    background: #fff; cursor: pointer; text-align: center;
    font-size: 3rem; font-weight: 900; line-height: 1;
    transition: all 0.12s;
}
.lp-oxbtn.o { color: var(--lp-o); }
.lp-oxbtn.x { color: var(--lp-x); }
.lp-oxbtn.o.sel { background: rgba(46,139,87,0.12); border-color: var(--lp-o); }
.lp-oxbtn.x.sel { background: rgba(217,83,79,0.12); border-color: var(--lp-x); }

.lp-done {
    text-align: center; padding: 6px 0 2px;
}
.lp-done .big { font-size: 1.15rem; font-weight: 800; color: var(--lp-o); }
.lp-done .small { font-size: 0.85rem; color: var(--lp-muted); margin-top: 4px; }

.lp-hint { font-size: 0.8rem; color: var(--lp-muted); margin-top: 10px; text-align: center; }

.lp-mylist { list-style: none; padding: 0; margin: 8px 0 0; }
.lp-mylist li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 11px 0; border-bottom: 1px solid var(--lp-line); font-size: 0.9rem;
}
.lp-mylist li a { color: var(--lp-blue); font-weight: 700; text-decoration: none; }
.lp-mylist li .q { color: var(--lp-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-color-scheme: dark) {
    :root {
        --lp-ink: #e8ecf4;
        --lp-muted: #9aa6ba;
        --lp-line: #2b3446;
        --lp-bg: #1b2536;
    }
    body { background: #131a27; }
    .lp-card { background: #1a2230; }
    .lp-form textarea, .lp-form input[type="text"],
    .lp-type, .lp-choice, .lp-oxbtn, .lp-check { background: #1a2230; }
    .lp-qr img { background: #fff; }
    .lp-btn.ghost { background: #1a2230; }
}