:root {
    --bg: #0b0f14;
    --panel: #111826;
    --muted: #8aa0b8;
    --text: #e6eef8;
    --acc: #4da3ff;
    --acc2: #22c55e;
    --warn: #ef4444;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Inter, Pretendard, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
    background: linear-gradient(180deg, #09111a, #0b0f14 30%, #0f172a);
    color: var(--text)
}

.wrap {
    margin: 28px auto;
    padding: 20px
}

h1 {
    font-size: 22px;
    margin: 0 0 14px;
    letter-spacing: .2px;
    display: flex;
    gap: 10px;
    align-items: center
}

.bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 14px;
}

.btn {
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    background: #1e293b;
    color: #dbe7f8;
    cursor: pointer;
    transition: .15s
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(77, 163, 255, .15)
}

.btn.primary {
    background: var(--acc);
    color: #031427
}

.btn.success {
    background: var(--acc2);
    color: #06220f
}

.btn.warn {
    background: var(--warn)
}

.btn.ghost {
    background: #0b1220;
    color: #9db7d9;
    border: 1px solid #20304a
}

.btn.small {
    padding: 6px 10px;
    border-radius: 10px
}

/* ===== Layout ===== */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(500px, 1fr);
    gap: 14px;
    min-width: 0;
}

@media (max-width: 980px) {
    .grid {
        grid-template-columns: 1fr
    }
}

.panel {
    min-width: 0;
    overflow-x: hidden;
}

.panel .hd {
    padding: 12px 14px;
    border-bottom: 1px solid #1c2b45;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.panel .hd .title {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #a9c3e6
}

.panel .bd {
    padding: 14px
}

.muted {
    color: var(--muted)
}

input[type="text"],
input[type="number"] {
    background: #0a1220;
    border: 1px solid #233656;
    color: #e6eef8;
    border-radius: 10px;
    padding: 9px 11px
}

input[type="file"] {
    color: #9bb3cf
}

.team {
    border: 1px dashed #2a4168;
    border-radius: 14px;
    padding: 12px;
    background: linear-gradient(180deg, #0c1626, #0c1422);
    min-width: 0;
    position: relative;
}

.confetti-canvas {
    position: absolute;
    inset: 0;
    /* top/right/bottom/left: 0 */
    pointer-events: none;
}

.team h3 {
    margin: 0 0 8px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.team ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 263px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
    padding-right: 6px;
}

/* 팀 행 */
.teamRow {
    display: grid;
    grid-template-columns: minmax(12ch, 1fr) 8ch 6ch 14ch;
    gap: 8px;
    padding: 10px 14px;
    background: #0e1a2a;
    border: 1px solid #1f2e47;
    border-radius: 12px;
    align-items: center;
}

.teamRow:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    transition: .15s;
}

.teamRow .cell-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    text-overflow: unset;
    line-height: 1.3;
    text-align: center;
}

.teamRow .cell-line {
    text-align: center;
    opacity: .9
}

.teamRow .cell-wr {
    text-align: center
}

.teamRow .cell-score {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tabnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

.avg {
    font-weight: 800
}

.avg .good {
    color: var(--acc2)
}

.avg .bad {
    color: #f59e0b
}

.winbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0
}

.winbar-left {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.winbar-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width:640px) {
    .winbar .wins {
        margin-left: 0;
    }
}

.winbar .wins {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.winbar label {
    align-items: center;
    gap: 6px;
}

.winbar label input {
    width: 80px;
    max-width: 80px
}

.winbar label select {
    max-width: 180px
}

.winbar .btn.success {
    min-width: 108px;
    white-space: nowrap;
    flex: 0 0 auto
}

.winbar .btn.ghost {
    white-space: nowrap
}

.teamControls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0 12px
}

/* ===== Roster ===== */
.rosterTable {
    border: 1px solid #1c2b45;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px
}

.rhead,
.rbody {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 8px
}

.rhead thead th {
    font-size: 12px;
    color: #8fb1d6;
    font-weight: 700;
    text-align: center;
    padding: 8px;
    background: #0c1422
}

.rscroll {
    /* 기본 크기 ↑ */
    min-height: 320px;        /* 기본 높이 늘림 */
    max-height: 520px;        /* 필요하면 더 늘리거나 기존 440px로 유지해도 OK */
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    padding: 6px;

    position: relative;       /* 안내문 중앙 배치용 */
}

/* rosterBody가 비어있을 때 rscroll에 안내 UX */
.rscroll:has(#rosterBody:empty) {
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 12px;
    background-image: linear-gradient(180deg, rgba(77,163,255,.06), transparent);
}

/* 완전 가운데 정렬된 안내 문구 */
.rscroll:has(#rosterBody:empty)::before {
    content: "인원 관리가 비어있습니다.\A 상단 입력으로 추가하거나 파일을 드래그해 불러오세요.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    white-space: pre-line;    /* 줄바꿈(\A) 처리 */
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
    opacity: 0.9;
    padding: 10px 8px;
    pointer-events: none;     /* 드롭 방해 X */
}


.rbody tbody tr {
    background: #0b1422;
    border: 1px solid #1c2b45;
}

.rbody tbody tr td {
    padding: 10px 8px;
    text-align: center
}

.rbody tbody tr td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px
}

.rbody tbody tr td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px
}

.rbody .cell-name,
.rhead th:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 12ch;
    text-align: center
}

.cell-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.cell-score .score-num {
    display: inline-block;
    width: 8ch;
    text-align: right;
}

.cell-score .delta {
    display: inline-block;
    min-width: 5ch;
    text-align: right;
}

.line-select {
    width: 54px;
    height: 30px;
    background: #0a1220;
    border: 1px solid #233656;
    color: #e6eef8;
    border-radius: 8px;
    appearance: none;
    text-align: center
}

.rscroll input.cell-score,
.rscroll input.cell-games {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box
}

.wl-badge,
.wr-badge {
    font-size: 14px;
    opacity: .85
}

.wr-good {
    color: var(--acc2)
}

.wr-bad {
    color: var(--warn)
}

select {
    max-width: 180px !important;
    background: #0a1220;
    border: 1px solid #233656;
    color: #e6eef8;
    border-radius: 10px;
    height: 34px;
    padding: 0 10px;
    appearance: none;
}

.listbar.manage {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 120px repeat(2, auto) auto auto;
    gap: 8px 12px;
    align-items: center;
}

@media (max-width: 1100px) {
    .listbar.manage {
        grid-template-columns: minmax(160px, 1fr) 110px auto auto;
    }
}

.listbar.manage #scoreInput {
    width: 110px !important;
}

#linePrimaryInput,
#lineSecondaryInput {
    width: 80px;
    height: 28px;
    font-size: 12px;
}

.listbar.manage label[for="rosterSort"],
.listbar.manage select#rosterSort {
    justify-self: end;
}

/* 검색어 하이라이트 */
mark {
    background: rgba(77, 163, 255, .25);
    padding: 0 2px;
    border-radius: 3px;
}

#managePanel.dragover {
    outline: 2px dashed var(--acc);
    outline-offset: -6px;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, .12) inset;
    background-image: linear-gradient(180deg, rgba(77, 163, 255, .06), transparent);
}

.rhead thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sort-ind {
    font-weight: 800;
    margin-left: 4px;
    opacity: .9;
}

/* === Thin Footer - centered & 3-line layout === */
.site-footer {
    background: #0b1220;
    border-top: 1px solid #1c2b45;
    color: #9bb3cf;
    font-size: 12px;
}

.site-footer .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    /* 세로 스택 */
    align-items: center;
    /* 가로 가운데 */
    gap: 6px;
    text-align: center;
    /* 텍스트도 가운데 */
}

/* 1줄차: 문의 · 제작 · 버전 */
.site-footer .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 가로 가운데 */
    align-items: center;
    gap: 8px;
}

.site-footer .sep {
    opacity: .6;
    margin: 0 6px;
}

.site-footer a {
    color: #9bb3cf;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* 2줄차: 토글(요약) */
.site-footer details {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 요약 가운데 */
}

.site-footer summary {
    list-style: none;
    cursor: pointer;
    color: #9db7d9;
    font-weight: 700;
    outline: none;
    display: inline-block;
}

.site-footer summary::-webkit-details-marker {
    display: none;
}

/* 3줄차: 열렸을 때 닉네임 칩이 중앙 한 줄(여러 줄로 감싸짐) */
.site-footer .chip-wrap {
    display: none;
    /* 기본 숨김(닫힘) */
    justify-content: center;
    /* 가운데 정렬 */
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.site-footer details[open] .chip-wrap {
    display: flex;
}

.site-footer .chip {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #20304a;
    background: #0b1220;
    color: #cfe0fb;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .1px;
    user-select: text;
}

.rbody tbody tr.in-team1 {
    background: #0b1422;
    /* 단색 */
    box-shadow: inset 0 0 0 2px rgba(77, 163, 255, .35);
    border-color: #234a78;
}

.rbody tbody tr.in-team2 {
    background: #0b1422;
    /* 단색 */
    box-shadow: inset 0 0 0 2px rgba(239, 68, 68, .35);
    border-color: #5a2330;
}

#managePanel.drop-target {
    outline: 3px dashed #3b82f6;
    /* 파란 점선 */
    outline-offset: -4px;
    background-color: rgba(59, 130, 246, 0.06);
    transition: background-color .12s ease, outline-color .12s ease;
}

.ver-badge {
    display: inline-block;
    /* margin-left: 8px; */
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    color: #8b8b8b;
    border: 1px solid #454545;
    border-radius: 10px;
    vertical-align: middle;
}

/* 팀 영역이 비어 있으면 안내 문구 표시 */
.team ul:empty {
  position: relative;
  padding: 8px;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
}

.team ul:empty::before {
  content: "팀 박스 안에 멤버를 드래그 드롭하여 팀에 추가 해주세요";
  position: absolute;            /* ⬅️ 부모를 꽉 채움 */
  inset: 0;                      /* top/right/bottom/left = 0 */
  display: flex;                 /* ⬅️ 여기서 중앙 정렬 */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.9;
  padding: 10px 6px;
  pointer-events: none;
}


/* 드롭 타겟 강조 (기존 drop-target 클래스를 쓰고 있다면 보강) */
.drop-target.team,
.team ul.drop-target,
#team1.drop-target,
#team2.drop-target {
  outline: 2px solid rgba(77,163,255,0.45);
  outline-offset: 2px;
}