/* 🎒 메인 페이지 내 가방 (2026-09-19 세션191) — 승부식 가방과 구조는 같고 저장은 완전 분리.
   기준 = memory/manual_main_cart.md. 색은 메인 페이지 톤(#1971c2)과 다크모드 변수 없이도 읽히게 고정값. */
.odd.mc-pick { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.odd.mc-pick:hover { box-shadow: inset 0 0 0 2px #74c0fc; }
.odd.mc-pick.mc-on { box-shadow: inset 0 0 0 2px #1971c2; background: #e7f5ff !important; color: #1864ab !important; font-weight: 800; }

#mcBar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000;
  display: none; align-items: center; gap: 12px;
  background: #1c3d5a; color: #fff; border-radius: 28px; padding: 10px 18px 10px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28); font-size: 14px; font-weight: 700; cursor: pointer; user-select: none;
}
#mcBar.mc-show { display: flex; }
#mcBar .mc-bar-n { background: #fff; color: #1c3d5a; border-radius: 12px; padding: 1px 9px; font-weight: 800; }
#mcBar .mc-bar-odds { color: #ffd43b; }
#mcBar .mc-bar-open { font-size: 12px; font-weight: 600; opacity: .85; }
#mcHistBtn { margin-left: 12px; padding: 6px 12px; border: 1.5px solid var(--border, #dee2e6); border-radius: 8px; background: transparent; color: inherit; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }   /* 09-27 세션204 */
#mcHistBtn:hover { border-color: #1971c2; color: #1971c2; }
#mcHistBtn .mc-hb-n { background: #1971c2; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 17px; }
@media (max-width: 600px) { #mcHistBtn { margin-left: 6px; padding: 6px 8px; } #mcHistBtn .mc-hb-l { display: none; } }

#mcPanel {
  position: fixed; right: 18px; bottom: 74px; z-index: 9001; width: 340px; max-width: calc(100vw - 24px);
  max-height: min(72vh, 640px); display: none; flex-direction: column;
  background: #fff; color: #212529; border: 1px solid #dee2e6; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
  font-size: 13px; overflow: hidden;
}
#mcPanel.mc-show { display: flex; }
#mcPanel .mc-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #f1f3f5; font-weight: 800; font-size: 14px; }
#mcPanel .mc-head .mc-x { margin-left: auto; border: 0; background: none; font-size: 18px; cursor: pointer; color: #868e96; }
#mcPanel .mc-tabs { display: flex; border-bottom: 1px solid #f1f3f5; }
#mcPanel .mc-tab { flex: 1; padding: 8px 0; text-align: center; cursor: pointer; font-weight: 700; color: #868e96; border-bottom: 2px solid transparent; }
#mcPanel .mc-tab.mc-on { color: #1971c2; border-bottom-color: #1971c2; }
#mcPanel .mc-body { overflow-y: auto; padding: 10px 12px; flex: 1; }
#mcPanel .mc-note { font-size: 11px; color: #868e96; line-height: 1.5; margin-bottom: 8px; }
.mc-item { position: relative; border: 1px solid #e9ecef; border-radius: 10px; padding: 8px 30px 8px 10px; margin-bottom: 6px; }
.mc-item .mc-lg { font-size: 10px; color: #868e96; }
.mc-item .mc-tm { font-weight: 700; margin: 2px 0; }
.mc-item .mc-pk { display: inline-block; background: #e7f5ff; color: #1864ab; border-radius: 8px; padding: 1px 8px; font-weight: 800; font-size: 12px; }
.mc-item .mc-od { margin-left: 6px; font-weight: 800; }
.mc-item .mc-rm { position: absolute; right: 6px; top: 6px; border: 0; background: none; color: #adb5bd; font-size: 16px; cursor: pointer; }
.mc-item .mc-res { float: right; font-size: 11px; font-weight: 800; }
.mc-item .mc-res.hit { color: #2b8a3e; } .mc-item .mc-res.miss { color: #c92a2a; } .mc-item .mc-res.wait { color: #868e96; }
#mcPanel .mc-foot { border-top: 1px solid #f1f3f5; padding: 10px 12px; background: #f8f9fa; }
#mcPanel .mc-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
#mcPanel .mc-row b { font-weight: 800; }
#mcPanel input.mc-amt { width: 110px; text-align: right; padding: 5px 8px; border: 1px solid #ced4da; border-radius: 8px; font-size: 13px; }
#mcPanel .mc-warn { color: #c92a2a; font-size: 11px; min-height: 14px; margin: 2px 0 6px; }
#mcPanel .mc-btns { display: flex; gap: 6px; }
#mcPanel .mc-btns button { flex: 1; padding: 9px 0; border-radius: 9px; border: 1px solid #ced4da; background: #fff; font-weight: 800; cursor: pointer; font-size: 13px; }
#mcPanel .mc-btns .mc-save { background: #1971c2; color: #fff; border-color: #1971c2; }
#mcPanel .mc-btns .mc-save:disabled { background: #adb5bd; border-color: #adb5bd; cursor: not-allowed; }
.mc-hist { border: 1px solid #e9ecef; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.mc-hist .mc-hh { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #868e96; margin-bottom: 4px; }
.mc-hist .mc-hh .mc-badge { margin-left: auto; font-weight: 800; border-radius: 8px; padding: 1px 8px; }
.mc-hist .mc-badge.win { background: #d3f9d8; color: #2b8a3e; } .mc-hist .mc-badge.lose { background: #ffe3e3; color: #c92a2a; } .mc-hist .mc-badge.wait { background: #f1f3f5; color: #495057; }
.mc-hist .mc-hl { font-size: 12px; padding: 2px 0; display: flex; gap: 6px; }
.mc-hist .mc-hl .mc-r { margin-left: auto; font-weight: 800; }
/* 09-28 세션205 (Drew "PC 웹에서만 줄이 깨진다"): 긴 팀 이름은 이름 칸만 줄바꿈 · 선택 칩·결과는 한 줄 고정 */
.mc-hist .mc-hl { align-items: center; }
.mc-hist .mc-hl > span:first-child { flex: 0 1 auto; min-width: 0; }
.mc-hist .mc-hl .mc-hpk, .mc-hist .mc-hl .mc-r { flex: 0 0 auto; white-space: nowrap; }
.mc-hist .mc-res.hit { color: #2b8a3e; } .mc-hist .mc-res.miss { color: #c92a2a; } .mc-hist .mc-res.wait { color: #868e96; }
.mc-hist .mc-hdel { border: 0; background: none; color: #adb5bd; cursor: pointer; font-size: 12px; }
.mc-hist .mc-hpk { background: #e7f5ff; color: #1864ab; border-radius: 6px; padding: 0 6px; font-weight: 800; }
#mcToast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9100; background: #212529; color: #fff; padding: 9px 16px; border-radius: 10px; font-size: 13px; display: none; max-width: 86vw; }
#mcToast.mc-err { background: #c92a2a; }
@media (max-width: 720px) { #mcPanel { right: 8px; left: 8px; width: auto; bottom: 70px; } }

/* 🌗 다크 모드 (09-27 세션204, Drew "다크·라이트 두 가지") — 사이트 html[data-theme="dark"] 를 따라간다.
   색 = 축하 팝업(congrats.js)과 같은 다크 열 (#1a1f2e 바탕 · #2d3748 테두리 · #8f98a3 보조 글자) */
[data-theme="dark"] .odd.mc-pick.mc-on { background: #1c3a5e !important; color: #a5d8ff !important; box-shadow: inset 0 0 0 2px #4dabf7; }
[data-theme="dark"] #mcBar { background: #1864ab; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
[data-theme="dark"] #mcBar .mc-bar-n { color: #1864ab; }
[data-theme="dark"] #mcHistBtn:hover { border-color: #4dabf7; color: #74c0fc; }
[data-theme="dark"] #mcPanel { background: #1a1f2e; color: #e9ecef; border-color: #2d3748; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
[data-theme="dark"] #mcPanel .mc-head,
[data-theme="dark"] #mcPanel .mc-tabs { border-color: #2d3748; }
[data-theme="dark"] #mcPanel .mc-head span,
[data-theme="dark"] #mcPanel .mc-tab,
[data-theme="dark"] #mcPanel .mc-note,
[data-theme="dark"] .mc-item .mc-lg,
[data-theme="dark"] .mc-hist .mc-hh { color: #8f98a3 !important; }
[data-theme="dark"] #mcPanel .mc-tab.mc-on { color: #74c0fc !important; border-bottom-color: #4dabf7; }
[data-theme="dark"] .mc-item,
[data-theme="dark"] .mc-hist { border-color: #2d3748; background: #1f2533; }
[data-theme="dark"] .mc-item .mc-pk,
[data-theme="dark"] .mc-hist .mc-hpk { background: #1c3a5e; color: #a5d8ff; }
[data-theme="dark"] .mc-item .mc-res.hit { color: #69db7c; } [data-theme="dark"] .mc-item .mc-res.miss { color: #ff8787; }
[data-theme="dark"] .mc-hist .mc-res.hit { color: #69db7c; } [data-theme="dark"] .mc-hist .mc-res.miss { color: #ff8787; }
[data-theme="dark"] .mc-hist .mc-badge.win { background: #1f3d2a; color: #69db7c; }
[data-theme="dark"] .mc-hist .mc-badge.lose { background: #3d1f24; color: #ff8787; }
[data-theme="dark"] .mc-hist .mc-badge.wait { background: #2d3748; color: #ced4da; }
[data-theme="dark"] #mcPanel .mc-foot { background: #151a26; border-color: #2d3748; }
[data-theme="dark"] #mcPanel input.mc-amt { background: #0f1420; color: #e9ecef; border-color: #3a4556; }
[data-theme="dark"] #mcPanel .mc-warn { color: #ff8787; }
[data-theme="dark"] #mcPanel .mc-btns button { background: #1f2533; color: #e9ecef; border-color: #3a4556; }
[data-theme="dark"] #mcPanel .mc-btns .mc-save { background: #1864ab; border-color: #1864ab; color: #fff; }
[data-theme="dark"] #mcPanel .mc-btns .mc-save:disabled { background: #3a4556; border-color: #3a4556; color: #8f98a3; }
[data-theme="dark"] #mcToast { background: #2d3748; }