/* ============================================================
   백억커피 스포츠 — 다크 그린
   구조: 제로백(vix534) 스포츠 화면 기반
   ------------------------------------------------------------
   배경 #0c1c16 (요청)
     · 배경 위에 카드(#12271f)를 한 단계 올려 깊이를 준다
     · 포인트는 밝은 그린(#34d399)
     · 국가/리그 헤더는 배경보다 살짝 밝은 그린
   ============================================================ */

.coffee-sports,
.coffee-sports * {
    box-sizing: border-box;
}

.coffee-sports {
    /* 배경 계층 */
    --bg: #0c1c16;
    --bg-2: #0a1712;
    --surface: #12271f;
    --surface-2: #163026;
    --soft: #163026;
    --soft2: #1b3a2e;

    /* 선 */
    --line: #22453a;
    --line2: #2c5647;

    /* 포인트 (그린) */
    --green: #34d399;
    --green-2: #10b981;
    --green-deep: #0b6b4a;
    --green-pale: rgba(52, 211, 153, .14);

    /* 텍스트 */
    --text: #f2fbf6;
    --text2: #c2d9cd;
    --text3: #a3bfb2;

    --red: #f87171;
    --red-bg: rgba(248, 113, 113, .12);
    --red-line: rgba(248, 113, 113, .35);

    display: block;
    margin: 0 0 28px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ 제목 */
.coffee-sports .bs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0 2px;
}

.coffee-sports .bs-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* 제로백: 제목 옆에 작은 소문자 cross */
.coffee-sports .bs-cross {
    display: inline;
    margin-left: 6px;
    color: var(--text3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

/* ------------------------------------------------------------ 레이아웃 */
.coffee-sports .bs-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 14px;
    align-items: start;
}

.coffee-sports .bs-main {
    min-width: 0;
}

/* ------------------------------------------------------------ 대분류 5탭 */
.coffee-sports .coffee-mode-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.coffee-sports .coffee-mode-tabs button {
    min-height: 42px;
    padding: 0 8px;
    border: 1px solid var(--line2);
    border-radius: 100px;
    background: var(--surface);
    color: var(--text2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}

.coffee-sports .coffee-mode-tabs button:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--surface-2);
}

.coffee-sports .coffee-mode-tabs button.is-on {
    border-color: var(--green);
    background: var(--green);
    color: #06231a;
    box-shadow: 0 2px 12px rgba(52, 211, 153, .28);
}

/* ------------------------------------------------------------ 종목 8탭 */
.coffee-sports .coffee-sport-tabs {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 14px;
}

.coffee-sports .coffee-sport-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 4px;
    border: 1px solid var(--line2);
    border-radius: 100px;
    background: var(--surface);
    color: var(--text2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}

.coffee-sports .bs-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: .7;
    filter: brightness(1.6) saturate(.6);
}

.coffee-sports .coffee-sport-tabs button:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--surface-2);
}

.coffee-sports .coffee-sport-tabs button.is-on {
    border-color: var(--green);
    background: var(--green);
    color: #06231a;
}

.coffee-sports .coffee-sport-tabs button.is-on .bs-ico {
    opacity: 1;
    filter: brightness(0) saturate(100%);
}

/* ------------------------------------------------------------ 리그 그룹 */
.coffee-sports .coffee-sports-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coffee-sports .bs-league-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.coffee-sports .bs-league-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    height: 38px;
    border-left: 4px solid var(--green);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #17352a, #122b22);
}

.coffee-sports .bs-league-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* 리그 국기
   로드 성공(is-loaded) 전에는 테두리/배경을 그리지 않는다.
   원본에 아이콘이 없어 404 가 나도 빈 박스가 보이지 않는다. */
.coffee-sports .bs-league-ico {
    flex: 0 0 auto;
    display: block;
    width: 20px;
    height: 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    object-fit: cover;
    /* 로드 완료 전에는 완전히 투명 → 404 여도 빈 박스가 보이지 않는다 */
    opacity: 0;
    transition: opacity .12s ease;
}

.coffee-sports .bs-league-ico.is-loaded {
    border-color: var(--line2);
    background-color: #0a1712;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    opacity: 1;
}

.coffee-sports .bs-league-ico.is-missing {
    display: none;
}

.coffee-sports .bs-league-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--green-pale);
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
}

.coffee-sports .bs-league-body {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------ 한 줄 = 한 마켓 */
.coffee-sports .bs-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 78px minmax(0, 1fr) 46px;
    gap: 7px;
    align-items: center;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(34, 69, 58, .7);
    background: var(--surface);
    transition: background .12s;
}

.coffee-sports .bs-row:last-child {
    border-bottom: 0;
}

/* 제로백은 경기 단위 강조선 없이 모든 행에 동일한 구분선을 쓴다. */
.coffee-sports .bs-row.is-cont {
    border-top: 0;
    box-shadow: none;
}

.coffee-sports .bs-row:hover {
    background: var(--surface-2);
}

.coffee-sports .bs-row.is-on {
    background: rgba(52, 211, 153, .1);
}

.coffee-sports .bs-row-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #c9dfd4;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.coffee-sports .bs-clock {
    flex: 0 0 auto;
    display: block;
    width: 11px;
    height: 11px;
    opacity: .78;
}

.coffee-sports .bs-row-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    border-radius: 4px;
    background: var(--soft2);
    color: var(--text2);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.coffee-sports .bs-row.is-on .bs-row-flag {
    background: var(--green);
    color: #06231a;
}

/* 대기 행: 제로백은 상태 표시가 없다 */
.coffee-sports .bs-row-flag.is-none {
    background: transparent;
    color: transparent;
    min-width: 0;
}

/* 배팅 가능: 제로백과 동일하게 빨강 "베팅" */
.coffee-sports .bs-row-flag.is-bet {
    background: transparent;
    color: #ff3b3b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

/* 선택됨 */
.coffee-sports .bs-row-flag.is-on-label {
    background: var(--green);
    color: #06231a;
}

/* 안내(보너스) */
.coffee-sports .bs-row-flag.is-info {
    background: #173f31;
    color: var(--green);
}

.coffee-sports .bs-row-flag.is-wait {
    background: transparent;
    color: #ff4d4d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

/* 실시간 행도 같은 높이를 유지한다 (들쭉날쭉 방지) */
.coffee-sports .bs-row.is-live-row .bs-row-flag {
    height: 20px;
}

.coffee-sports .bs-row-flag.is-info {
    background: #173f31;
    color: var(--green);
}

/* ------------------------------------------------------------ 배당 박스 (팀명 + 배당 통째로 클릭) */
.coffee-sports .bs-bet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    height: 31px;
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid var(--line2);
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}

.coffee-sports .bs-bet-n {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.005em;
    /* 한글 잉크가 1px 낮게 앉으므로 보정 */
    padding-bottom: 2px;
}

.coffee-sports .bs-bet-o {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #f4fdf8;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* 배당 아이콘 — 제로백과 동일 (↑ 오버 / ↓ 언더 / ⬛ 핸디) */
.coffee-sports .bs-bet-ic {
    flex: 0 0 auto;
    display: block;
    width: 15px;
    height: 15px;
}

.coffee-sports .bs-bet-ic.is-over {
    color: #ff6b81;
    filter: drop-shadow(0 0 2px rgba(255, 107, 129, .45));
}

.coffee-sports .bs-bet-ic.is-under {
    color: #5eb0ff;
    filter: drop-shadow(0 0 2px rgba(94, 176, 255, .45));
}

.coffee-sports .bs-bet-ic.is-handi {
    color: #fbbf24;
    filter: drop-shadow(0 0 2px rgba(251, 191, 36, .4));
}

.coffee-sports .bs-bet.is-on .bs-bet-ic {
    color: #06231a;
}

.coffee-sports .bs-bet:hover {
    border-color: var(--green);
    background: var(--surface-2);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, .12);
}

.coffee-sports .bs-bet:hover .bs-bet-o {
    color: var(--green-2);
}

.coffee-sports .bs-bet.is-on {
    border-color: var(--green);
    background: var(--green);
    box-shadow: none;
}

.coffee-sports .bs-bet.is-on .bs-bet-n,
.coffee-sports .bs-bet.is-on .bs-bet-o {
    color: #06231a !important;
}

/* 무승부 칸: 이름이 없으므로 배당을 가운데 정렬 (제로백과 동일) */
.coffee-sports .bs-bet.is-draw {
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    text-align: center;
}

.coffee-sports .bs-bet.is-draw .bs-bet-n {
    display: none;
}

.coffee-sports .bs-bet.is-draw .bs-bet-o {
    margin: 0 auto;
}

.coffee-sports .bs-bet.is-locked {
    border-color: var(--line);
    background: #12261e;
    cursor: not-allowed;
}

/* 대기 중에도 팀명은 읽혀야 한다 (대비 8:1 이상) */
.coffee-sports .bs-bet.is-locked .bs-bet-n {
    color: #cfe4d9;
    font-weight: 700;
}

.coffee-sports .bs-bet.is-locked .bs-bet-o {
    color: #d8ebe2;
    font-weight: 700;
}

.coffee-sports .bs-bet.is-locked:hover {
    border-color: var(--line);
    background: #142a22;
    box-shadow: none;
}

.coffee-sports .bs-bet.is-empty {
    border-color: var(--line);
    background: #10231c;
    cursor: default;
    opacity: .5;
}

/* ------------------------------------------------------------ 기준점 (VS / 라인) */
.coffee-sports .bs-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    min-height: 31px;
    padding: 0 4px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--soft2);
    color: #d9ece1;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: center;
    /* 한글/영문 글리프의 잉크 중심을 박스 중심에 맞춘다 (측정 기반 1px 보정) */
    padding-top: 2px;
}

/* ------------------------------------------------------------ 스페셜 행 */
.coffee-sports .bs-row.is-special {
    grid-template-columns: 78px minmax(0, 1.15fr) minmax(0, 1.7fr) 52px;
}

.coffee-sports .bs-row-lab {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
}

.coffee-sports .bs-row-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.coffee-sports .bs-row-opts .bs-odd {
    min-width: 64px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------ 스페셜용 배당 버튼 */
.coffee-sports .bs-odd {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line2);
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.coffee-sports .bs-odd b {
    color: var(--green);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.coffee-sports .bs-odd:hover {
    border-color: var(--green);
    background: var(--surface-2);
}

.coffee-sports .bs-odd:hover b {
    color: var(--green-2);
}

.coffee-sports .bs-odd.is-on {
    border-color: var(--green);
    background: var(--green);
}

.coffee-sports .bs-odd.is-on b {
    color: #06231a;
}

.coffee-sports .bs-odd.is-locked {
    border-color: var(--line);
    background: #142a22;
    cursor: not-allowed;
}

.coffee-sports .bs-odd.is-locked b {
    color: #8aa89a;
    font-weight: 700;
}

.coffee-sports .bs-odd.is-empty {
    border-color: var(--line);
    background: #10231c;
    cursor: default;
    opacity: .5;
}

/* ------------------------------------------------------------ 상태 */
.coffee-sports-empty,
.coffee-sports-loading {
    display: block;
    padding: 48px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text3);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

/* ------------------------------------------------------------ 배팅카드 */
.coffee-sports .bs-slip {
    position: sticky;
    top: 12px;
    align-self: start;
    border: 1px solid var(--line2);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}

.coffee-sports .bs-slip-toggle {
    display: none;
}

.coffee-sports .bs-slip h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, #1b4635, #14382b);
    border-bottom: 1px solid var(--line2);
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.coffee-sports .bs-slip h2 b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--green);
    color: #06231a;
    font-size: 11.5px;
    font-weight: 900;
}

.coffee-sports .bs-picks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 12px 12px 0;
}

.coffee-sports .bs-slip-empty {
    margin: 0;
    padding: 18px 8px;
    border: 1px dashed var(--line2);
    border-radius: 6px;
    color: var(--text3);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.coffee-sports .bs-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 24px;
    gap: 7px;
    align-items: center;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.coffee-sports .bs-pick > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coffee-sports .bs-pick small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text3);
    font-size: 10.5px;
    font-weight: 600;
}

.coffee-sports .bs-pick b {
    color: var(--green);
    font-size: 13.5px;
    font-weight: 800;
}

.coffee-sports .bs-pick button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--red-line);
    border-radius: 4px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.coffee-sports .bs-pick button:hover {
    background: var(--red);
    color: #2a0a0a;
}

.coffee-sports .bs-slip-note {
    margin: 9px 12px 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--green-pale);
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
}

.coffee-sports .bs-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    color: var(--text2);
    font-size: 12px;
    font-weight: 700;
}

.coffee-sports .bs-kv:first-of-type {
    margin-top: 12px;
}

.coffee-sports .bs-kv b {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.coffee-sports .bs-field {
    display: block;
    margin: 11px 14px 0;
}

.coffee-sports .bs-field > span {
    display: block;
    margin-bottom: 6px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 700;
}

.coffee-sports .bs-field input {
    width: 100%;
    height: 44px;
    padding: 0 11px;
    border: 1px solid var(--line2);
    border-radius: 6px;
    background: var(--bg-2);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    outline: none;
    transition: border-color .14s, background .14s;
}

.coffee-sports .bs-field input::placeholder {
    color: var(--text3);
    font-weight: 600;
}

.coffee-sports .bs-field input:focus {
    border-color: var(--green);
    background: #0a1712;
}

.coffee-sports .bs-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 11px 14px;
}

.coffee-sports .bs-quick button {
    min-height: 32px;
    padding: 0 2px;
    border: 1px solid var(--line2);
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text2);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .14s, color .14s, background .14s;
}

.coffee-sports .bs-quick button:hover {
    border-color: var(--green);
    background: var(--surface-2);
    color: var(--green);
}

.coffee-sports .bs-totals {
    display: grid;
    gap: 7px;
    margin: 0 14px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-2);
}

.coffee-sports .bs-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 700;
}

.coffee-sports .bs-totals b {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.coffee-sports .bs-error {
    margin: 9px 14px 0;
    padding: 8px 10px;
    border: 1px solid var(--red-line);
    border-radius: 5px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
}

.coffee-sports .bs-submit {
    display: block;
    width: calc(100% - 28px);
    min-height: 48px;
    margin: 13px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--green);
    color: #06231a;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background .14s, box-shadow .14s;
}

.coffee-sports .bs-submit:hover {
    background: var(--green-2);
    box-shadow: 0 3px 14px rgba(52, 211, 153, .3);
}

.coffee-sports .bs-submit:disabled {
    background: #1e3a30;
    color: #7d9c8e;
    cursor: not-allowed;
    box-shadow: none;
}

/* ------------------------------------------------------------ 포커스 */
.coffee-sports .bs-bet:focus-visible,
.coffee-sports .bs-odd:focus-visible,
.coffee-sports .coffee-mode-tabs button:focus-visible,
.coffee-sports .coffee-sport-tabs button:focus-visible,
.coffee-sports .bs-quick button:focus-visible,
.coffee-sports .bs-submit:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

/* ------------------------------------------------------------ 전체화면 모드 */
body.is-coffee-sports {
    background: #0c1c16;
}

body.is-coffee-sports .hero,
body.is-coffee-sports .notice-strip,
body.is-coffee-sports .mobile-game-tabs,
body.is-coffee-sports .feature-row,
body.is-coffee-sports .provider-search,
body.is-coffee-sports .category-bar,
body.is-coffee-sports .page-heading,
body.is-coffee-sports .search-status,
body.is-coffee-sports #casino-section,
body.is-coffee-sports #slot-section,
body.is-coffee-sports #community,
body.is-coffee-sports footer,
body.is-coffee-sports .footer {
    display: none !important;
}

body.is-coffee-sports .content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

body.is-coffee-sports .content > *:not(#extra-section) {
    display: none !important;
}

body.is-coffee-sports #extra-section {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.is-coffee-sports #coffee-sports-root {
    width: 100%;
}

body.is-coffee-sports .coffee-sports {
    margin: 0;
    padding: 18px 22px 36px;
    border: 0;
    border-radius: 0;
    background: #0c1c16;
    min-height: calc(100vh - 64px);
}

body.is-coffee-sports .coffee-sports .bs-head {
    margin: 0 0 16px;
    padding: 0 2px 13px;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 1600px) {
    body.is-coffee-sports .coffee-sports {
        padding: 20px 30px 40px;
    }
}

/* ------------------------------------------------------------ 반응형 */
@media (max-width: 1200px) {
    .coffee-sports .bs-wrap {
        grid-template-columns: minmax(0, 1fr) 246px;
    }

    .coffee-sports .bs-row {
        grid-template-columns: 70px minmax(0, 1fr) 70px minmax(0, 1fr) 42px;
        gap: 6px;
        padding: 6px 10px;
    }

    .coffee-sports .bs-bet-n {
        font-size: 13.5px;
    }

    .coffee-sports .bs-bet-o {
        font-size: 16px;
    }
}

@media (max-width: 980px) {
    .coffee-sports .bs-wrap {
        grid-template-columns: 1fr;
    }

    .coffee-sports .bs-slip {
        position: static;
    }

    .coffee-sports .coffee-sport-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .coffee-sports .coffee-mode-tabs {
        gap: 5px;
    }

    .coffee-sports .coffee-mode-tabs button {
        min-height: 40px;
        border-radius: 20px;
        font-size: 13px;
    }

    .coffee-sports .bs-row {
        grid-template-columns: 62px minmax(0, 1fr) 62px minmax(0, 1fr) 38px;
        gap: 5px;
        padding: 0 9px;
    }

    .coffee-sports .bs-bet {
        height: 30px;
        min-height: 30px;
        padding: 0 7px;
        gap: 6px;
    }

    .coffee-sports .bs-mark {
        height: 30px;
        min-height: 30px;
    }

    .coffee-sports .bs-bet-n {
        font-size: 13px;
    }

    .coffee-sports .bs-bet-o {
        font-size: 15.5px;
    }

    .coffee-sports .bs-row-time {
        font-size: 11px;
    }

    .coffee-sports .bs-row.is-special {
        grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.5fr) 44px;
    }
}

@media (max-width: 620px) {
    body.is-coffee-sports .coffee-sports {
        padding: 12px 10px 28px;
    }

    .coffee-sports .coffee-mode-tabs {
        gap: 4px;
    }

    .coffee-sports .coffee-mode-tabs button {
        min-height: 36px;
        border-radius: 18px;
        font-size: 12px;
    }

    .coffee-sports .coffee-sport-tabs button {
        min-height: 42px;
        gap: 4px;
        padding: 0 2px;
        font-size: 12px;
    }

    .coffee-sports .bs-ico {
        width: 15px;
        height: 15px;
    }

    .coffee-sports .bs-row {
        grid-template-columns: 50px minmax(0, 1fr) 52px minmax(0, 1fr);
        gap: 4px;
        padding: 0 7px;
        height: 36px;
        min-height: 36px;
    }

    .coffee-sports .bs-row-flag {
        display: none;
    }

    .coffee-sports .bs-row-time {
        font-size: 10px;
    }

    .coffee-sports .bs-bet {
        height: 29px;
        min-height: 29px;
        padding: 0 6px;
        gap: 4px;
    }

    .coffee-sports .bs-bet-n {
        font-size: 11px;
    }

    .coffee-sports .bs-bet-o {
        font-size: 13.5px;
    }

    .coffee-sports .bs-mark {
        height: 29px;
        min-height: 29px;
        font-size: 12px;
    }

    .coffee-sports .bs-league-head {
        height: 34px;
        padding: 0 10px;
    }

    .coffee-sports .bs-league-name {
        font-size: 12.5px;
    }

    .coffee-sports .bs-row.is-special {
        grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1.4fr);
    }
}

/* ============================================================
   폴백: 스포츠 루트가 DOM 에 있으면 클래스 없이도 적용
   (a20261021.js 의 세션 판정으로 클래스가 지워지는 경우 대비)
   ============================================================ */
body:has(#coffee-sports-root) {
    background: #0c1c16 !important;
    background-image: none !important;
}

body:has(#coffee-sports-root) .hero,
body:has(#coffee-sports-root) .notice-strip,
body:has(#coffee-sports-root) .mobile-game-tabs,
body:has(#coffee-sports-root) .feature-row,
body:has(#coffee-sports-root) .provider-search,
body:has(#coffee-sports-root) .category-bar,
body:has(#coffee-sports-root) .page-heading,
body:has(#coffee-sports-root) .search-status,
body:has(#coffee-sports-root) #casino-section,
body:has(#coffee-sports-root) #slot-section,
body:has(#coffee-sports-root) #community,
body:has(#coffee-sports-root) footer,
body:has(#coffee-sports-root) .footer {
    display: none !important;
}

body:has(#coffee-sports-root) .content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

body:has(#coffee-sports-root) .content > *:not(#extra-section) {
    display: none !important;
}

body:has(#coffee-sports-root) #extra-section {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(#coffee-sports-root) #coffee-sports-root {
    width: 100%;
}

body:has(#coffee-sports-root) .coffee-sports {
    margin: 0;
    padding: 18px 22px 36px;
    border: 0;
    border-radius: 0;
    background: #0c1c16;
    min-height: calc(100vh - 64px);
}

body:has(#coffee-sports-root) .coffee-sports .bs-head {
    margin: 0 0 16px;
    padding: 0 2px 13px;
    border-bottom: 1px solid var(--line);
}
/* ------------------------------------------------------------ 배팅 알림 (toast) */
.bs-toast-host {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 100000;
  width: min(420px, calc(100vw - 24px));
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.bs-toast-host.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.bs-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line2, rgba(228,199,138,.4));
  border-radius: 10px;
  background: #10251a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.bs-toast.is-success { border-color: #2f9e63; background: #10301f; }
.bs-toast.is-error { border-color: #b23a3a; background: #2a1414; }
.bs-toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  color: #f6f0e2;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
}
.bs-toast.is-success .bs-toast-msg { color: #8ff0b6; }
.bs-toast.is-error .bs-toast-msg { color: #ffb3b3; }
.bs-toast-detail {
  flex: 1 1 100%;
  color: rgba(246, 240, 226, .78);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.bs-toast-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(246, 240, 226, .7);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.bs-toast-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 760px) {
  .bs-toast-host { top: 8px; width: calc(100vw - 16px); }
  .bs-toast { padding: 10px 12px; border-radius: 8px; }
  .bs-toast-msg { font-size: 13px; }
}

/* ===== 배팅 확인 팝업 (20261027) ===== */
.bs-confirm-host {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  transition: opacity .16s ease;
}
.bs-confirm-host.is-open { opacity: 1; }
.bs-confirm-host[hidden] { display: none; }

.bs-confirm-panel {
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(228, 199, 138, .42);
  border-radius: 12px;
  background: #10251a;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform .16s ease;
}
.bs-confirm-host.is-open .bs-confirm-panel { transform: translateY(0); }

.bs-confirm-head {
  padding: 13px 16px;
  background: linear-gradient(180deg, #1b4635, #14382b);
  border-bottom: 1px solid rgba(228, 199, 138, .22);
}
.bs-confirm-head b {
  color: #f6f0e2;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.bs-confirm-body {
  padding: 14px 16px;
  overflow-y: auto;
}

.bs-confirm-legs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bs-confirm-leg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 9px 11px;
  border-radius: 7px;
  background: #0d2018;
}
.bs-confirm-leg-game {
  grid-column: 1 / 2;
  color: #f6f0e2;
  font-size: 12.5px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-confirm-leg-odds {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #e4c78a;
  font-size: 13.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.bs-confirm-leg-pick {
  grid-column: 1 / 2;
  color: #a8b8ab;
  font-size: 11.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-confirm-money {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 12px;
  border-radius: 7px;
  background: #0b1c14;
}
.bs-confirm-money > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
}
.bs-confirm-money span { color: #cbb992; font-size: 12px; font-weight: 700; }
.bs-confirm-money b {
  color: #f6f0e2;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.bs-confirm-money b.is-gold { color: #e4c78a; font-size: 15px; }

.bs-confirm-policy {
  margin: 11px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(240, 193, 101, .32);
  border-radius: 6px;
  background: rgba(240, 193, 101, .1);
  color: #f0c165;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.5;
}

.bs-confirm-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(228, 199, 138, .16);
}
.bs-confirm-actions button {
  flex: 1 1 0;
  height: 42px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
}
.bs-confirm-cancel {
  border: 1px solid rgba(228, 199, 138, .35);
  background: transparent;
  color: #cbb992;
}
.bs-confirm-cancel:hover { background: rgba(228, 199, 138, .1); color: #f6f0e2; }
.bs-confirm-ok {
  border: 0;
  background: #e4c78a;
  color: #10281c;
}
.bs-confirm-ok:hover { background: #f0d69f; }

/* 배팅카드 하단 30분 규칙 안내 */
.coffee-sports .bs-policy {
  margin: 9px 14px 0;
  padding: 7px 9px;
  border: 1px solid rgba(240, 193, 101, .28);
  border-radius: 5px;
  background: rgba(240, 193, 101, .08);
  color: #e0c48d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.coffee-sports .bs-policy b { color: #f0c165; font-weight: 900; }

@media (max-width: 760px) {
  .bs-confirm-host { padding: 12px; }
  .bs-confirm-panel { width: 100%; border-radius: 10px; }
  .bs-confirm-head { padding: 11px 13px; }
  .bs-confirm-body { padding: 12px 13px; }
  .bs-confirm-actions { padding: 10px 13px 12px; }
  .bs-confirm-actions button { height: 44px; font-size: 14px; }
  .coffee-sports .bs-policy { margin: 8px 12px 0; font-size: 10.5px; }
}

/* ────────────────────────────────────────────────────────────────
   모바일 배팅카드: 하단 고정 시트 (2026-11-04)
   기존에는 1단 그리드가 되면서 카트가 수천 px 아래로 밀려
   사실상 보이지 않았다. 화면 하단에 항상 띄우고 접기/펴기 가능.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    /* 하단 고정 배팅카드(50px) + 하단 독 여백을 확보한다.
       specificity (1,2,1) 로 위쪽 규칙들을 확실히 이긴다. */
    body.is-coffee-sports:has(#coffee-sports-root) .coffee-sports,
    body.is-coffee-sports .coffee-sports {
        padding-bottom: 104px;
    }

    .coffee-sports .bs-slip {
        position: fixed;
        left: 8px;
        right: 8px;
        top: auto;
        bottom: calc(70px + env(safe-area-inset-bottom));
        z-index: 60;
        max-height: 68vh;
        overflow-y: auto;
        border-radius: 12px;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .55);
    }

    .coffee-sports .bs-slip.is-collapsed {
        overflow: hidden;
    }

    .coffee-sports .bs-slip.is-collapsed > *:not(.bs-slip-toggle) {
        display: none !important;
    }

    .coffee-sports .bs-slip h2 {
        display: none;
    }

    .coffee-sports .bs-slip-toggle {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        height: 48px;
        min-height: 48px;
        white-space: nowrap;
        overflow: hidden;
        padding: 0 14px;
        border: 0;
        background: linear-gradient(180deg, #1b4635, #14382b);
        color: var(--text);
        font-size: 13.5px;
        font-weight: 900;
        letter-spacing: .01em;
        cursor: pointer;
    }

    .coffee-sports .bs-slip-toggle [data-bs-toggle-win] {
        min-width: 0;
        max-width: 58%;
        overflow: hidden;
        color: var(--green);
        font-size: 12px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .coffee-sports .bs-slip-toggle::after {
        content: '▴';
        margin-left: 4px;
        color: var(--text3);
        font-size: 11px;
    }

    .coffee-sports .bs-slip:not(.is-collapsed) .bs-slip-toggle::after {
        content: '▾';
    }
}