/* _v2 보정 스타일. 디자인 원본 CSS 는 수정하지 않고 서버 연동에 필요한 규칙만 여기에 둔다. */

/* 서버가 hidden 으로 전환하는 계정 영역은 어떤 display 규칙보다 우선해 숨긴다. */
.site-header__actions[hidden],
.account-bar__member[hidden],
.account-bar__badge[hidden],
.sports-panel.bet-panel[hidden] { display: none !important; }

/* 쪽지 미확인 수 배지 */
.account-bar__badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #e3b467);
  color: #1a1512;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

/* 로그인 보안문자 */
.login-form__captcha { display: flex; align-items: center; gap: 8px; }
.login-form__captcha img { height: 42px; border-radius: 6px; background: #fff; }
.login-form__captcha .form-field__input { flex: 1; min-width: 0; }

/* 준비 중 메뉴는 톤을 낮춘다. */
.site-game-nav [data-game-pending],
.account-bar [data-ui-message],
.site-footer__nav [data-ui-message],
.card[data-ui-message],
.promotion__action[data-ui-message] { opacity: .72; }

/* 메인 히어로 반응형 보정.
   디자인 원본은 1980px 캔버스 기준 px 절대 좌표라 폭이 줄면 요소가 잘린다.
   .page 가 컨테이너(inline-size)이므로 좌표를 cqw(컨테이너 폭 1%)로 환산해 배경(100% auto)과 같은 비율로 축소한다.
   1980px 이상에서는 원본 px 값과 같다. */
@media (min-width: 701px) {
  .hero { height: 35.2756cqw; }
  .hero__wordmark { left: 29.3438cqw; top: 1.3123cqw; width: 38.8451cqw; }
  .hero__slogan { left: 5.3543cqw; top: 6.9291cqw; width: 21.5223cqw; }
  .hero__description {
    left: 7.61cqw;
    top: 17.06cqw;
    width: max(14.7cqw, 200px);
    height: auto;
    padding: .16cqw .37cqw;
    font-size: max(13px, .997cqw);
  }
  .hero__actions { left: 36.85cqw; top: 26.352cqw; gap: max(1.26cqw, 10px); }
  .hero__actions .action-link {
    height: max(3.78cqw, 42px);
    font-size: max(13px, 1.207cqw);
    border-width: max(1px, .105cqw);
    padding-inline: max(2.36cqw, 16px);
  }
  .hero__actions .action-link:first-child { width: max(13.438cqw, 160px); }
  .hero__actions .action-link:last-child { width: max(11.916cqw, 140px); padding-inline: max(2.95cqw, 18px) max(2.62cqw, 16px); }
}
/* 메인 본문·푸터 유동 폭.
   원본은 .content-section__inner / .site-footer__inner 가 1692px 고정폭(좌 147.6px)이라 1980px 미만에서 화면 밖으로 나간다.
   좌우 여백을 컨테이너 비율(147.59/1980 = 7.454cqw)로 바꿔 어떤 폭에서도 화면 안에 들어오게 한다. */
@media (min-width: 701px) {
  .content-section__inner,
  .site-footer__inner { width: auto; margin-left: 7.454cqw; margin-right: 7.454cqw; }
  .card__description { white-space: normal; text-align: center; padding-inline: 6px; }
}
/* 1001~1400px: 카드 3열, 프로모션 1열 (701~1000px 원본 규칙과 같은 배치) */
@media (min-width: 1001px) and (max-width: 1400px) {
  .card-list { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .card { height: 176px; }
  .promotion-list { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .promotion { height: 185px; }
  .promotion__media { width: 46%; object-fit: cover; object-position: right; }
  .promotion__content { padding: 26px 35px; }
  .promotion--membership .promotion__content { padding-left: 72px; }
  .promotion--contact .promotion__content { padding-left: 43%; }
  .promotion--contact .promotion__media { width: 38%; object-position: left; }
  .promotion__heading { font-size: 23px; }
  .promotion__description { font-size: 16px; }
  .promotion__action { font-size: 14px; height: 35px; margin-top: 12px; padding: 0 16px; gap: 15px; }
  .promotion__icon { width: 40px; height: 44px; top: 28px; left: 22px; }
  .site-footer { height: auto; padding-block: 14px; }
  .site-footer__inner { min-height: 74px; flex-wrap: wrap; gap: 14px; padding-top: 12px; }
  .site-footer__nav { order: 3; width: 100%; justify-content: center; font-size: 12px; }
  .site-footer__social { margin-left: auto; }
}
/* 1401~1979px: 원본 6열/3열 배치를 유지하되 프로모션 안쪽 여백·글자를 폭에 비례시킨다 */
@media (min-width: 1401px) and (max-width: 1979px) {
  .card { height: max(160px, 9.71cqw); }
  .card__media { width: max(100px, 6.82cqw); height: max(72px, 4.88cqw); }
  .card__title { font-size: max(17px, 1.102cqw); }
  .card__description { font-size: max(13px, .882cqw); }
  .promotion { height: max(150px, 10.18cqw); }
  .promotion__content { padding-top: 1.63cqw; padding-left: 2.26cqw; }
  .promotion--membership .promotion__content { padding-left: 4.2cqw; }
  .promotion--contact .promotion__content { padding-left: 10.08cqw; }
  .promotion__heading { font-size: max(18px, 1.207cqw); }
  .promotion__description { font-size: max(13px, .892cqw); }
  .promotion__icon { left: 1.63cqw; top: 1.37cqw; }
  .promotion__action { height: max(32px, 2.05cqw); font-size: max(12px, .735cqw); margin-top: .74cqw; }
}
/* 700px 이하: 세로 배치. 히어로가 직접 배경을 갖고(cover) 워드마크·슬로건은 흐름 배치로 바꾼다. */
@media (max-width: 700px) {
  .page { background-image: none; }
  .hero {
    height: auto;
    padding: 22px 16px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: none;
    background-size: cover;
    background-position: 62% top;
  }
  .hero__wordmark, .hero__slogan { position: static; left: auto; top: auto; }
  .hero__slogan { order: 1; width: min(64%, 330px); align-self: flex-start; margin-left: 4%; }
  .hero__wordmark { order: 2; width: min(86%, 460px); margin-top: -4%; }
  .hero__description { order: 3; }
  .hero__actions { order: 4; }
}

/* ---------- 게시판·고객센터 (서버 연동 보정) ---------- */
.community-post__meta { margin: 6px 0 12px; color: var(--muted, #caad8d); font-size: 13px; }
.community-post__meta .community-level { margin-right: 4px; }
.community-post__image img { max-width: 100%; height: auto; border-radius: 10px; }
.community-post__message { word-break: break-word; }
.community-post__message img { max-width: 100%; height: auto; }
/* 에디터 본문 이미지(고객센터 답변의 로고 등)는 공통 img{display:block} 때문에 앞뒤 글자를 다른 줄로 밀었다(335 YAHO 2026-10-24 이관).
   A10 에디터와 같이 글자와 같은 줄에 놓는다. 큰 이미지는 max-width 로 폭에 맞춰지고 혼자 한 줄을 차지한다. */
.community-post__message img, .linked-reply__item img, .community-comment__body img, .extra-message img { display: inline; vertical-align: middle; }
.community-comment__delete { margin-left: 8px; color: #ff9c9c; font-size: 12px; }
.community-comment__body { word-break: break-word; }
.community-bet-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px;
  background: rgba(227, 180, 103, .18); color: var(--accent, #e3b467); font-size: 11px; line-height: 18px; vertical-align: middle;
}
.community-notice-badge--category { margin-right: 4px; }
.community-empty-row td { text-align: center; padding: 28px 12px; color: var(--muted, #caad8d); }
.community-pagination a[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.support-state { color: var(--muted, #caad8d); }
.support-state--done { color: var(--accent, #e3b467); font-weight: 700; }
.linked-reply__item { padding: 12px 14px; margin-top: 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); word-break: break-word; }
.linked-reply__item + .linked-reply__item { margin-top: 8px; }
.community-attachment-list { max-height: 50vh; overflow: auto; margin: 12px 0; display: grid; gap: 8px; }
.community-attachment-list .community-attachment-choice { display: flex; gap: 10px; align-items: flex-start; }
.community-attachment-list .community-attachment-choice small { display: block; color: var(--muted, #caad8d); }
.community-attachment-list [data-attachment-more] { justify-self: center; }
.post-bet-result--succeeded { color: #7fe08a; }
.post-bet-result--failed { color: #ff8c8c; }
.post-bet-result--canceled { color: #c8ae9a; }
.post-bet-result--wait { color: #ffe34f; }
.extra-card-art--image { display: block; overflow: hidden; }
.extra-card-art--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 이벤트·공지 썸네일은 등록한 이미지 비율 그대로 전체를 보인다(2026-11-01 운영 요청: 309 이벤트 썸네일 300x300 이 4:3 고정으로 위아래가 잘렸다). 남는 높이는 제목 위로 보낸다. */
.extra-event-card .extra-card-art--image { flex: 0 0 auto; min-height: 0; aspect-ratio: auto; margin-bottom: auto; border-radius: 4px; }
.extra-event-card .extra-card-art--image img { height: auto; object-fit: contain; }
.extra-event-card:has(.extra-card-art--image) { min-height: 0; }
/* 이미지 카드는 썸네일 아래에 제목을 보인다(2026-10-25 운영 요청: 목록에 썸네일만 나와 제목도 표시). 긴 제목은 두 줄까지, 작성일은 숨긴다. */
.extra-event-card:has(.extra-card-art--image) { padding: 8px 8px 12px; }
.extra-event-card:has(.extra-card-art--image) h2 { margin: 10px 2px 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.extra-event-card:has(.extra-card-art--image) h2 a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.extra-event-card:has(.extra-card-art--image) p { display: none; }
@media (max-width: 760.98px) {
  .extra-event-card:has(.extra-card-art--image) h2 { margin-top: 8px; font-size: 13px; }
}
/* 탑메뉴(PC): 12칸 균등 그리드는 긴 메뉴명("YAHO 이용안내" 등)이 칸을 넘쳐 붙어 보인다. 글자 폭대로 두고 사이 간격을 같게 나눈다. 1000px 이하는 기존 그리드 유지. */
@media (min-width: 1001px) {
  .site-header:has(.site-game-nav) .site-nav__list.site-game-nav__list { display: flex; justify-content: space-between; gap: 12px; }
  .site-header:has(.site-game-nav) .site-game-nav__item { flex: 0 0 auto; }
  .site-header:has(.site-game-nav) .site-nav__link.site-game-nav__link { width: auto; padding-inline: 10px; white-space: nowrap; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .site-header:has(.site-game-nav) .site-nav__list.site-game-nav__list { gap: 6px; }
  .site-header:has(.site-game-nav) .site-nav__link.site-game-nav__link { padding-inline: 4px; }
}
.extra-event-card p { color: var(--muted, #caad8d); }
/* 갤러리 목록(2026-11-01 운영 요청: 공지사항 board/free.php·이벤트): 썸네일만, 제목 없음(_inc/board_helpers.php v2_board_gallery_html).
   썸네일이 없는 글은 기호 칸으로 두고 제목은 화면낭독기에만 읽힌다. */
.board-gallery .extra-event-card { position: relative; min-height: 0; padding: 8px; justify-content: flex-start; }
.board-gallery .extra-event-card > a.extra-card-art { display: grid; flex: 0 0 auto; min-height: 170px; margin-bottom: 0; text-decoration: none; }
.board-gallery .extra-event-card > a.extra-card-art--image { display: block; min-height: 0; }
.board-gallery .extra-card-art .board-gallery-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760.98px) {
  .board-gallery .extra-event-card > a.extra-card-art { min-height: 120px; }
}
.community-input[readonly] { opacity: .75; }

/* ---------- 머니 화면 (서버 연동 보정) ---------- */
.charge-page__bank { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(227, 180, 103, .08); border: 1px solid rgba(227, 180, 103, .35); }
.charge-page__bank dl { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; margin: 0; }
.charge-page__bank dt { color: var(--muted, #caad8d); }
.charge-page__bank dd { margin: 0; font-weight: 700; word-break: break-all; }
.charge-page__guide { line-height: 1.6; }
.charge-page__guide ul { padding-left: 18px; }
.charge-page__categories label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; }
.charge-page__categories[hidden] { display: none; }
.charge-page__history .extra-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.extra-table .support-state--cancel { color: #ff9c9c; }
.extra-wallet .community-input { min-width: 0; flex: 1; }
.extra-comp-form .extra-inline .community-button + .community-button { margin-left: 6px; }
.community-pagination [aria-disabled="true"] { opacity: .4; pointer-events: none; }
[data-money-status] { margin-top: 10px; }
/* 2026-11-01: 환전신청 "마지막 충전 대비 롤링" 표. 안내 상자와 같은 패널, 전체만 강조색. 모바일은 2열 격자(전체는 한 줄). */
.charge-page__rolling { margin-top: 13px; padding: 12px 11px; border: 1px solid var(--charge-border); border-radius: 6px; background: var(--charge-panel); box-shadow: 0 2px 8px #0003; }
.charge-page__rolling-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
.charge-page__rolling-head h2 { margin: 0; color: var(--accent); font-size: 14px; }
.charge-page__rolling-base { margin: 0; color: var(--muted); font-size: 12px; }
.charge-page__rolling-base strong { color: var(--text); font-weight: 700; }
.charge-page__rolling-base span { margin-left: 4px; color: var(--muted); }
.charge-page__rolling-frame { margin-top: 12px; border: 1px solid var(--charge-border); border-radius: 4px; overflow: hidden; }
.charge-page__rolling-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.charge-page__rolling-table th { padding: 8px 4px; border-right: 1px solid var(--charge-border); border-bottom: 1px solid var(--charge-border); background: #ff3d6a12; color: var(--muted); font-size: 12px; font-weight: 600; }
.charge-page__rolling-table td { padding: 11px 4px 10px; border-right: 1px solid var(--charge-border); background: var(--charge-panel-deep); }
.charge-page__rolling-table th:last-child, .charge-page__rolling-table td:last-child { border-right: 0; }
.charge-page__rolling-table td strong { display: block; color: var(--text); font-size: 16px; line-height: 22px; font-variant-numeric: tabular-nums; }
.charge-page__rolling-table td span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.charge-page__rolling-table .is-total { color: var(--accent); }
.charge-page__rolling-table td.is-total { background: linear-gradient(#ff3d6a14, #ff3d6a14), var(--charge-panel-deep); }
.charge-page__rolling-table td.is-total strong { color: var(--accent); }
.charge-page__rolling-table td strong.is-empty { color: var(--muted); }
.charge-page__rolling-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
@media (max-width: 700px) {
  .charge-page__rolling-head { flex-direction: column; align-items: flex-start; }
  .charge-page__rolling-table thead { display: none; }
  .charge-page__rolling-table, .charge-page__rolling-table tbody { display: block; }
  .charge-page__rolling-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--charge-border); }
  .charge-page__rolling-table td { display: flex; flex-direction: column; align-items: center; padding: 9px 4px; border-right: 0; }
  .charge-page__rolling-table td::before { content: attr(data-label); margin-bottom: 3px; color: var(--muted); font-size: 11px; }
  .charge-page__rolling-table td.is-total { grid-column: 1 / -1; }
  .charge-page__rolling-table td.is-total::before { color: var(--accent); }
  .charge-page__rolling-table td:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* ---------- 회원 화면 (서버 연동 보정) ---------- */
.community-notice-badge.is-new { background: var(--accent, #e3b467); color: #1a1512; }
.extra-message { word-break: break-word; line-height: 1.6; }
.extra-message img { max-width: 100%; height: auto; }
/* 쪽지 표는 최소 750px 가로 스크롤이라, 좁은 화면에서는 펼친 본문을 화면 폭에 맞춰 왼쪽에 고정한다. */
@media (max-width: 800px) {
  [data-memo-body] .extra-message { position: sticky; left: 0; box-sizing: border-box; max-width: calc(100vw - 64px); }
}
/* 2026-10-31: 쪽지와 함께 지급된 선물(포인트·쿠폰) 표시. 제목 옆 '선물' 표식, 펼친 본문 아래 지급 완료 줄(공유 v2.member.js). */
.extra-gift-flag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--rb-accent, #e8a844); border-radius: 4px; color: #ffd0da; font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.extra-gifts { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.extra-gift { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; border: 1px solid var(--rb-line, #66482e); border-left: 3px solid var(--rb-accent, #e8a844); border-radius: 6px; background: var(--rb-panel, #261f1a); line-height: 1.4; }
.extra-gift b { color: var(--rb-text, #f9ebd1); font-size: 14px; overflow-wrap: anywhere; }
.extra-gift small { color: var(--rb-muted, #caad8d); font-size: 12px; }
.extra-gift__done { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--rb-deep, #8c6642); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.extra-stamp.is-on { color: var(--accent, #e3b467); border-color: var(--accent, #e3b467); }
.extra-stamp.is-on small { display: block; font-size: 10px; }
.extra-calendar td.is-today > span:first-child { color: var(--accent, #e3b467); font-weight: 700; }
.stamp-actions { align-items: center; gap: 14px; }
.stamp-count { color: var(--muted, #caad8d); }
.stamp-count strong { color: var(--accent, #e3b467); }
.coupon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 16px 0; }
.coupon-card { padding: 18px; border-radius: 14px; border: 1px solid rgba(227, 180, 103, .45); background: linear-gradient(145deg, rgba(227, 180, 103, .12), rgba(7, 10, 12, .6)); }
.coupon-card h2 { font-size: 18px; margin: 0 0 6px; }
.coupon-card .community-button { margin-top: 12px; }
.roulette-wheel svg [data-wheel] { will-change: transform; }
.history-row__middle.is-selected { color: var(--accent, #e3b467); font-weight: 700; }
.history-ticket h2 small { font-size: 12px; color: var(--muted, #caad8d); }
.history-ticket strong.is-wait { color: #ffe34f; }
.history-board__actions [hidden] { display: none; }
.profile-field .extra-inline { margin-top: 8px; }

/* ---------- 게임 화면 (5·6단계, 서버 연동 보정) ---------- */
/* 고정 크기 iframe 을 폭에 맞춰 축소(v2.frames.js) */
.v2-frame { position: relative; width: 100%; overflow: hidden; min-height: 0 !important; border-radius: 8px; background: #000; }
.v2-frame > iframe { position: absolute; top: 0; left: 0; right: auto; bottom: auto; border: 0; background: #000; }
.v2-frame--auto > iframe, .v2-frame--fixed > iframe { position: static; width: 100%; height: 100%; display: block; }
.v2-frame--auto, .v2-frame--fixed { margin-top: 12px; }
.virtual-video.v2-frame { display: block; aspect-ratio: auto; min-height: 0; margin-top: 14px; }
.v2-game-notice { margin: 12px 0; }
.v2-game-desc { margin: 0 0 12px; color: var(--muted, #caad8d); font-size: 12px; }
.virtual-league-nav[hidden], .game-board__bonuses[hidden], .game-board__league-filter[hidden], .v2-closed-games[hidden], [data-closed-events][hidden], .v2-round-message[hidden] { display: none; }

/* 스포츠 목록 도구 */
.sports-page .game-board__events.event-panel { min-height: 0; }
.game-board__tools { align-items: center; flex-wrap: wrap; }
.v2-sports-search { flex: 1 1 220px; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid #5b4535; border-radius: 6px; background: #291f18; color: var(--muted, #caad8d); }
.v2-sports-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text, #f9ebd1); font: inherit; }
.v2-league-filter__actions { width: 100%; display: flex; gap: 8px; margin-bottom: 4px; }
.game-board__league-filter label { font-size: 12px; }
.game-board__bonuses { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.game-board__bonuses > a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #66482e; border-radius: 7px; background: var(--ui-panel, #291f18); color: var(--ui-accent, #e3b467); font-size: 12px; }
.game-board__bonuses > a strong { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 4px; border: 1px solid #66482e; border-radius: 17px; background: var(--ui-bg, #1b1510); color: var(--ui-text, #f9ebd1); }
.game-board__bonuses > a.is-selected { border-color: var(--ui-accent, #e3b467); box-shadow: inset 0 0 0 1px var(--ui-accent, #e3b467); background: #ff3d6a15; }
.game-board__bonuses > a.is-selected strong { color: var(--ui-accent, #e3b467); }

/* 경기 행 */
.sports-page .game-row .game-row__odd strong { white-space: nowrap; }
/* 마켓 표시: 핸디캡 H 녹색, 오버 ▲ 빨강, 언더 ▼ 파랑 (목록·경기결과·가상게임 공통) */
.odd-mark { display: inline-block; margin: 0 4px; font-style: normal; font-weight: 900; }
.odd-mark--handi, .virtual-trend--handi { color: #3ddc84 !important; }
.odd-mark--over, .virtual-trend--up { color: #ff5c6c !important; }
.odd-mark--under, .virtual-trend--down { color: #4b9dff !important; }
.sports-page.virtual-sports-page .virtual-trend { font-size: 13px; margin-inline: 4px; }
.result-row .odd-mark { margin: 0 3px; }
.sports-page .game-row .game-row__middle--odd { color: var(--ui-text, #f9ebd1); }
.sports-page .game-row .game-row__middle--odd.is-selected { border-color: var(--ui-accent, #e3b467); color: var(--ui-accent, #e3b467); box-shadow: inset 0 0 0 1px var(--ui-accent, #e3b467); background: #ff3d6a15; }
.game-row.is-closed { opacity: .5; }
.game-row .odd-link.is-disabled, .virtual-match-odds .odd-link.is-disabled { pointer-events: none; cursor: default; }
.sports-page .game-row.game-row--options { grid-template-columns: 22px 122px 100px minmax(0, 1fr); }
.game-row__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; min-width: 0; }
.sports-page .game-row.game-row--extra time { min-height: 0; }
.v2-closed-games { margin-top: 24px; }
.v2-closed-games__title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v2-closed-games__title .ui-control { padding: 4px 10px; font-size: 11px; }
@media (max-width: 1300px) {
  .sports-page .game-row.game-row--options { grid-template-columns: 20px 100px 74px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sports-page .game-row.game-row--options { grid-template-columns: 22px minmax(0, 1fr); }
  .sports-page .game-row.game-row--options .game-row__market { grid-column: 2; grid-row: 1; text-align: right; }
  .game-row__options { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-board__bonuses { grid-template-columns: 1fr; }
}

/* 가상게임 목록 */
.sports-page.virtual-sports-page .odd-link.is-static { pointer-events: none; justify-content: center; }
.virtual-multi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.virtual-multi__title { grid-column: 1 / -1; color: var(--accent, #e3b467); font-size: 12px; }
.sports-page.virtual-sports-page .event-group.is-closed { opacity: .55; }
.sports-page.virtual-sports-page .match-card { max-height: none; }
.sports-page.virtual-sports-page .event-group.is-collapsed .match-card { max-height: 0; }
.virtual-league-nav { flex-wrap: wrap; gap: 8px; }

/* 배당 변동 표시(Vue: 재조회 때 오른 배당 is-up, 내린 배당 is-down 을 2.5초 강조) */
.odd-link.is-up, .market-option.is-up { box-shadow: inset 0 -2px 0 #ff5c6c; }
.odd-link.is-down, .market-option.is-down { box-shadow: inset 0 -2px 0 #4b9dff; }
.odd-link.is-up strong, .odd-link.is-down strong { transition: color .3s; }
.game-board.is-loading .game-board__events { opacity: .7; }

/* 베팅카트 */
.bet-preset-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0 0 8px; }
/* 2026-11-01: 카트 초기화 규칙(.main-content .content-layout > .bet-panel * / .sports-page * { margin: 0 })이 위 아래 여백을 지워
   금액 버튼과 금액리셋·베팅하기 줄이 붙어 보였다. 같은 경로로 우선순위를 올려 간격을 되살린다. */
.sports-page .bet-actions .bet-preset-row, .game-interface .bet-actions .bet-preset-row, .main-content .content-layout > .bet-panel .bet-actions .bet-preset-row { margin: 0 0 8px; }
.sports-page .bet-preset, .game-interface .bet-preset, .main-content .content-layout > .bet-panel .bet-preset { min-height: 30px; font-size: 10px; padding: 0 4px; }
.bet-pick--bonus { border-style: dashed; }
.bet-action-link.is-busy { opacity: .6; pointer-events: none; }
.bet-live-row[hidden] { display: none; }
.main-content .content-layout > .bet-panel .bet-limit strong { text-align: right; }
.bet-pick-list { display: grid; gap: 6px; position: relative; }
.bet-pick.is-up .bet-pick-meta strong { color: #ff5c6c; }
.bet-pick.is-down .bet-pick-meta strong { color: #4b9dff; }
/* Vue TransitionGroup(v2-pick): 카트 항목 추가·삭제 */
.v2-pick-enter-active, .v2-pick-leave-active { transition: opacity .18s ease, transform .18s ease; }
.v2-pick-enter-from { opacity: 0; transform: translateY(-6px); }
.v2-pick-leave-to { opacity: 0; transform: translateX(12px); }
.v2-pick-leave-active { position: absolute; left: 0; right: 0; }
.v2-pick-move { transition: transform .18s ease; }
/* Vue Transition(v2-fade): 회차 안내문 */
.v2-fade-enter-active, .v2-fade-leave-active { transition: opacity .2s ease; }
.v2-fade-enter-from, .v2-fade-leave-to { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .v2-pick-enter-active, .v2-pick-leave-active, .v2-pick-move, .v2-fade-enter-active, .v2-fade-leave-active { transition: none; }
}

/* 회차형 미니게임 */
.main-content .content-layout__main .game-layout { grid-template-columns: minmax(0, 1fr); }
.game-interface .market-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.game-interface .status-item { grid-template-columns: 64px minmax(0, 1fr); }
.game-interface .status-value { white-space: nowrap; }
.game-interface .status-item--actions { grid-template-columns: 1fr; padding: 4px; }
.game-interface .status-item--actions .ui-control { min-height: 30px; font-size: 11px; }
.game-interface .v2-round-message { margin: 8px; }
.v2-round-app { display: contents; }
.game-interface .market-list.is-locked { opacity: .45; pointer-events: none; }
.game-interface .market-option.is-disabled { opacity: .4; pointer-events: none; }
.game-interface .market-option.is-blue .option-token { border-color: #4b7bff; color: #ffc294; }
.game-interface .market-option.is-red .option-token { border-color: #e85d68; color: #edcf9a; }
.game-interface .market-option.is-black .option-token { border-color: #a68973; color: #e0c9b7; }
.game-interface .market-option.is-green .option-token { border-color: #28b884; color: #7fe0b6; }
.game-interface .market-option.is-yellow .option-token { border-color: #ffe34f; color: #ffe886; }
.game-interface .market-option.is-white .option-token { border-color: #e0c9b7; color: #ffffff; }
.game-interface .market-option .option-token { min-width: 0; max-width: 100%; height: auto; min-height: 30px; padding: 4px 10px; border-radius: 16px; white-space: normal; }
.game-interface .v2-round-history { grid-column: 1 / -1; margin-top: 8px; }
.game-interface .v2-round-history .game-board__league { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.game-interface .v2-round-history .ui-control { min-height: 28px; padding: 3px 10px; font-size: 11px; }
.game-interface .v2-round-history__table td, .game-interface .v2-round-history__table th { font-size: 12px; white-space: nowrap; }
.v2-round-history__pick small { color: var(--muted, #caad8d); }
.game-interface .is-won { color: #7fe08a; } .game-interface .is-lost { color: #ff8c8c; } .game-interface .is-wait { color: #ffe34f; }
@media (max-width: 420px) {
  .game-interface .market-status { grid-template-columns: 1fr; }
}

/* 안내 다이얼로그: 서비스 메시지의 줄바꿈을 살린다 */
#community-info [data-info-message] { white-space: pre-line; }

/* 경기결과 */
.v2-result-pages { margin-top: 14px; }
.result-row .is-lost { color: #ff8c8c; }

/* 상단 안내(로그아웃 완료 등) */
.v2-flash {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10010;
  max-width: min(92vw, 480px);
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(7, 10, 12, .94);
  border: 1px solid rgba(227, 180, 103, .45);
  color: var(--text, #f9ebd1);
  font-size: 14px;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.v2-flash[hidden] { display: none; }
/* 메인 hero: 세 이미지를 섹션 안에서 함께 축소 */
#home.page {
  background-image: none;
  background-color: #070a0c;
}

#home .hero {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 490;
  padding: 0;
  background: #070a0c;
  overflow: hidden;
}

#home .hero::before {
  content: none;
}

#home .hero__scene,
#home .hero__wordmark,
#home .hero__slogan {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
}

#home .hero__scene {
  inset: -14.69387755% auto auto 0;
  width: 100%;
}

#home .hero__wordmark {
  inset: 11% auto auto 8.5%;
  width: 29%;
  aspect-ratio: auto;
}

#home .hero__slogan {
  inset: auto auto 3.5% 9.5%;
  width: 26%;
  aspect-ratio: auto;
}
#home .content-section.main-content__section {
  padding-top: clamp(16px, 1.5cqw, 30px);
}
/* 위 카드 이미지: 위로 뜨면서 확대 */
@keyframes card-image-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.12);
  }
}

/* 아래 버튼: 오른쪽으로 통통 이동 */
@keyframes promotion-action-hop {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(5px, -3px); }
  40% { transform: translate(9px, 0); }
  60% { transform: translate(14px, -3px); }
  80% { transform: translate(18px, 0); }
}

#home .card__media {
  transform-origin: center;
}

#home .card:hover .card__media,
#home .card:focus-visible .card__media {
  animation: card-image-pulse 1200ms ease-in-out infinite !important;
}

#home .action-link.promotion__action:hover,
#home .action-link.promotion__action:focus-visible {
  animation: promotion-action-hop 1100ms ease-in-out infinite !important;
}

/* 원본의 동작 줄이기 설정 대응 */
@keyframes card-image-feedback {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes promotion-action-feedback {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  #home .card:hover .card__media,
  #home .card:focus-visible .card__media {
    animation: card-image-feedback 300ms ease-out 1 !important;
  }

  #home .action-link.promotion__action:hover,
  #home .action-link.promotion__action:focus-visible {
    animation: promotion-action-feedback 300ms ease-out 1 !important;
  }
}

/* 회원 레벨 아이콘·등급명(_inc/helpers.php v2_level_badge_html). 색은 등급 아이콘(assets/images/level)과 맞춘다. */
.v2-level { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font: 800 14px/1 var(--font-kr, 'Noto Sans KR', sans-serif); letter-spacing: -.2px; white-space: nowrap; }
.v2-level__icon { width: 30px; height: 30px; flex: none; }
.v2-level__name { background: var(--level-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px var(--level-glow)); }
.v2-level--plain { color: var(--accent, #e3b467); font-weight: 700; }
.v2-level--silver { --level-text: linear-gradient(180deg, #ffffff, #dcc0ab 55%, #aa8b74); --level-glow: rgba(230, 200, 177, .45); }
.v2-level--gold { --level-text: linear-gradient(180deg, #fff3b0, #ffcf3f 55%, #d4911a); --level-glow: rgba(255, 197, 49, .5); }
.v2-level--platinum { --level-text: linear-gradient(180deg, #ffd6ff, #d77cff 55%, #a446e0); --level-glow: rgba(196, 92, 255, .5); }
.v2-level--diamond { --level-text: linear-gradient(180deg, #ffd8ba, #4fe3ff 55%, #2a9fd8); --level-glow: rgba(52, 212, 255, .5); }
.v2-level--vip { --level-text: linear-gradient(180deg, #d9ffe9, #49f0a0 55%, #18b07f); --level-glow: rgba(46, 227, 154, .5); }
.account-bar__rank .v2-level { font-size: 15px; }
.account-bar__rank .v2-level__icon { width: 34px; height: 34px; margin: -6px 0; }
.community-post__meta .v2-level, .community-table .v2-level, .community-comment__meta .v2-level { margin-right: 4px; }
.community-post__meta .v2-level__icon, .community-table .v2-level__icon, .community-comment__meta .v2-level__icon { width: 22px; height: 22px; margin: -3px 0; }
.profile-field__value .v2-level { margin-left: 6px; }
/* 게시판 운영진 표시(config board_staff): 운영진 아이콘 + 로고 + 운영진 */
.v2-staff { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; white-space: nowrap; font: 800 13px/1 var(--font-kr, 'Noto Sans KR', sans-serif); letter-spacing: -.2px; }
.v2-staff__icon { width: 22px; height: 22px; margin: -3px 0; flex: none; }
.v2-staff__logo { width: auto; height: 20px; margin: -2px 0; flex: none; }
.v2-staff__name { background: linear-gradient(180deg, #e3b467, #e3b467 55%, #cda258); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(237, 194, 118, .45)); }
.v2-level-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .account-bar__rank .v2-level { font-size: 13px; }
  .account-bar__rank .v2-level__icon { width: 28px; height: 28px; margin: -4px 0; }
}

/* 회원가입 입력칸별 안내(v2.auth.js announce). 중복확인·인증번호 결과를 버튼 바로 아래에 보여준다. */
.signup-form__feedback { flex: 1 0 100%; margin: 0; color: var(--accent, #e3b467); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.signup-form__feedback[data-tone="success"] { color: #49f0a0; }
.signup-form__feedback[data-tone="error"] { color: #edcf9a; }
.signup-form__feedback::before { content: 'ⓘ '; }
.signup-form__feedback[data-tone="success"]::before { content: '✓ '; }
.signup-form__feedback[data-tone="error"]::before { content: '! '; }
.signup-form__button[aria-busy="true"] { cursor: progress; opacity: .75; }
/* 회차형 미니게임(모바일): 카트 팝업 대신 베팅 영역을 화면 안에 바로 보인다(335 YAHO 2026-10-24 이관, yaho-bet-cart.js 가 팝업 초기화를 건너뜀).
   카트 요소·스타일은 그대로 두고, 본문 래퍼를 display:contents 로 풀어 순서만 바꾼다: 게임 화면 → 마켓 버튼 → 베팅카트 → 최근 베팅내역. */
@media (max-width: 1023.98px) {
  .main-content .content-layout:has([data-round-game]) > .content-layout__main,
  .main-content .content-layout:has([data-round-game]) .game-layout[data-round-game],
  .main-content .content-layout:has([data-round-game]) .game-layout[data-round-game] > .game-content,
  .main-content .content-layout:has([data-round-game]) [data-round-app] { display: contents; }
  .main-content .content-layout:has([data-round-game]) .market-board,
  .main-content .content-layout:has([data-round-game]) .v2-round-history { align-self: stretch; width: 100%; box-sizing: border-box; }
  .main-content .content-layout:has([data-round-game]) > .sports-panel.bet-panel { order: 1; margin-top: 12px; }
  .main-content .content-layout:has([data-round-game]) .v2-round-history { order: 2; margin-top: 16px; }
  /* 중계 주소가 없을 때(로투스 토큰 발급 실패 등) 높이가 접혀 안내 문구가 가려지지 않게 한다. iframe 이 있으면 v2.frames.js 가 높이를 정한다. */
  .main-content .game-stage.v2-frame:not(:has(iframe)) { height: 140px; }
}
/* 메인 공지팝업(partials/notice_popups.php). 화면을 막지 않고 헤더 아래 가운데에 나란히 띄운다. 좁은 화면은 세로로 쌓고 영역 안에서 스크롤.
   색은 루비메탈 팔레트(ruby-shell.css --rb-*)에 맞춘다. */
.notice-popups {
  position: fixed;
  top: calc(var(--rb-header-h, 84px) + 12px);
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  max-height: calc(100vh - var(--rb-header-h, 84px) - 28px);
  padding: 0 16px;
  overflow-y: auto;
  pointer-events: none;
  box-sizing: border-box;
}
.notice-popups[hidden], .notice-popup[hidden] { display: none; }
.notice-popup {
  width: var(--notice-popup-width, 500px);
  max-width: 100%;
  border: 1px solid rgba(232, 168, 68, .55);
  border-radius: 4px;
  background: #261f1a;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
  overflow: hidden;
  pointer-events: auto;
}
.notice-popup__content { color: #fff; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.notice-popup__content img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.notice-popup__actions { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #1a1512; border-bottom: 1px solid rgba(232, 168, 68, .3); }
.notice-popup__button { color: #cfb7a5; font-size: 14px; text-decoration: none; padding: 4px 2px; }
.notice-popup__button:hover, .notice-popup__button:focus-visible { color: #f0c070; }
.notice-popup__button--close { font-weight: 700; color: #fff; }
@media (max-width: 760px) {
  .notice-popups { top: 64px; max-height: calc(100vh - 76px); padding: 0 12px; gap: 12px; }
}