@charset "utf-8";
/* 확률표 · 팟 오즈 계산법 · 레인지 표 도구 · 레인지 표 보는 법 (2026-11-05). odds.css 위에 덧붙임. 테마 색 변수만 씁니다. */

.o2-lead-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* 본문 */
.o2-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.8; color: #cfd3d1; }
.o2-body p:last-child { margin-bottom: 0; }
.o2-body ul, .o2-body ol { margin: 0 0 10px; padding-left: 20px; color: #cfd3d1; font-size: 15px; }
.o2-body li { margin: 5px 0; line-height: 1.75; list-style: disc; }
.o2-body ol li { list-style: decimal; }
.o2-body b, .o2-body strong { color: var(--text); }
.o2-body a { color: var(--felt-ink); text-decoration: underline; text-underline-offset: 3px; }
.o2-body h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.o2-body h3:first-child { margin-top: 0; }
.o2-body .pc-row { vertical-align: middle; margin: 2px 2px; }
.o2-formula { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); font-size: 15px; line-height: 1.7; color: var(--text); }
.o2-formula b { color: var(--gold-ink); }
.o2-sum { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* 표 : 360px 에서도 넘치지 않게 글자를 줄이고 줄바꿈 허용 */
.o2-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.o2-table th, .o2-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.o2-table th:first-child, .o2-table td:first-child { text-align: left; }
.o2-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); vertical-align: bottom; }
.o2-table td small, .o2-table th small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.o2-table tr.o2-sub td { padding-top: 2px; font-size: 12px; color: var(--muted); border-bottom-style: dashed; }
.o2-table tr.o2-sub td:first-child { padding-left: 18px; }
.o2-table tr.is-hl td { background: var(--felt-bg); }
.o2-table td.o2-plus { color: var(--red); }
.o2-table td.o2-minus { color: var(--felt-ink); }
@media (max-width: 520px) {
  .o2-table { font-size: 12px; }
  .o2-table th, .o2-table td { padding: 7px 4px; }
  .o2-table thead th { font-size: 11px; }
  .o2-table td small { font-size: 10px; }
}

/* 숫자 칸 */
.o2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 4px; }
.o2-stat { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); min-width: 0; }
.o2-stat span { display: block; font-size: 12px; color: var(--muted); }
.o2-stat strong { display: block; margin: 4px 0 2px; font-size: 22px; font-weight: 700; color: var(--felt-ink); font-variant-numeric: tabular-nums; }
.o2-stat em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.o2-stat .pc-row { display: block; margin: 0 0 6px; }
@media (max-width: 640px) { .o2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o2-stat strong { font-size: 19px; } }

/* 작은 고정 13×13 표 */
.o2-grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; margin: 4px 0 0; }
.o2-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden;
  border-radius: 4px; background: var(--surface2); color: var(--dim); }
.o2-cell b { font-size: 11px; font-weight: 600; line-height: 1.1; }
.o2-cell i { font-style: normal; font-size: 9px; line-height: 1.2; color: inherit; opacity: .85; }
.o2-cell--pair { box-shadow: inset 0 0 0 1px var(--line2); }
.o2-cell.is-on { background: var(--felt); color: #fff; }
.o2-cell.is-on.o2-cell--pair { box-shadow: inset 0 0 0 1px var(--felt-ink); }
/* 종류별 색 (보는 법) */
.o2-grid--type .o2-cell--pair { background: var(--gold-bg); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold); }
.o2-grid--type .o2-cell--s { background: var(--felt-bg); color: var(--felt-ink); }
.o2-grid--type .o2-cell--o { background: var(--surface2); color: var(--muted); }
/* 자리별 진하기 (앞 자리일수록 진함) */
.o2-cell[style*="--p"] { background: color-mix(in srgb, var(--felt) calc(var(--p) * 100%), var(--surface2)); color: var(--text); }
@media (max-width: 520px) { .o2-grid { gap: 1px; } .o2-cell b { font-size: 9px; } .o2-cell i { font-size: 7px; } }

.o2-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.o2-legend li { display: flex; align-items: center; gap: 5px; }
.o2-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--surface2); }
.o2-legend i.is-pair { background: var(--gold-bg); box-shadow: inset 0 0 0 1px var(--gold); }
.o2-legend i.is-s { background: var(--felt-bg); box-shadow: inset 0 0 0 1px var(--felt2); }
.o2-legend i.is-o { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line2); }
.o2-legend i.is-on { background: var(--felt); }
.o2-legend i[style*="--p"] { background: color-mix(in srgb, var(--felt) calc(var(--p) * 100%), var(--surface2)); }

.o2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.o2-two h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text); }
@media (max-width: 640px) { .o2-two { grid-template-columns: minmax(0, 1fr); } }

.o2-combos { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 12px; }
.o2-combos .pc-row { margin: 0; }

/* 관련 링크 */
.o2-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.o2-rel a { display: block; height: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.o2-rel a:hover { border-color: var(--felt2); }
.o2-rel b { display: block; font-size: 14px; }
.o2-rel span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ---------- 레인지 표 도구 ---------- */
.rg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.rg-bar > span { min-width: 72px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rg-bar button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line2); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.rg-bar button:hover { border-color: var(--felt2); }
.rg-bar button.is-on { border-color: var(--felt2); background: var(--felt-bg); color: var(--felt-ink); font-weight: 700; }
.rg-tag { margin: 0 0 12px; font-size: 12px; color: var(--gold-ink); }

.rg-grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; touch-action: none; user-select: none; -webkit-user-select: none; }
.rg-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-width: 0; margin: 0; padding: 0;
  border: 0; border-radius: 4px; background: var(--surface2); color: var(--muted); font: inherit; cursor: pointer; overflow: hidden; }
.rg-cell b { font-size: 11px; font-weight: 600; line-height: 1.1; pointer-events: none; }
.rg-cell.rg-cell--pair { box-shadow: inset 0 0 0 1px var(--line2); }
.rg-cell.is-on { background: var(--felt); color: #fff; }
.rg-cell.is-on.rg-cell--pair { box-shadow: inset 0 0 0 1px var(--felt-ink); }
.rg-cell:hover { outline: 2px solid var(--gold); outline-offset: -2px; }
.rg-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 520px) { .rg-grid { gap: 1px; } .rg-cell b { font-size: 9px; } .rg-cell { border-radius: 3px; } }

.rg-top { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.rg-top input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--felt2); }
.rg-top output { min-width: 42px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

.rg-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.rg-out div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); min-width: 0; }
.rg-out span { display: block; font-size: 12px; color: var(--muted); }
.rg-out strong { display: block; margin-top: 2px; font-size: 20px; font-weight: 700; color: var(--felt-ink); font-variant-numeric: tabular-nums; }
.rg-out small { display: block; font-size: 11px; color: var(--muted); }
@media (max-width: 640px) { .rg-out { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-out strong { font-size: 18px; } }

.rg-text { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 10px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
.rg-text:empty::before { content: "선택한 핸드가 없습니다. 표의 칸을 눌러 보세요."; font-family: var(--font); color: var(--muted); }
.rg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.rg-msg { min-height: 1.5em; margin: 8px 0 0; font-size: 13px; color: var(--felt-ink); }

.od-sec h3.od-sub { margin: 20px 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }

/* 'Q10o' 처럼 네 글자인 칸 : 좁은 화면에서 두 줄로 꺾이지 않게 */
.rg-cell b, .o2-cell b { white-space: nowrap; letter-spacing: -0.03em; }
@media (max-width: 520px) { .rg-cell.is-long b, .o2-cell.is-long b { font-size: 7.5px; letter-spacing: -0.05em; } }
@media (max-width: 380px) { .rg-cell b, .o2-cell b { font-size: 8.5px; } .rg-cell.is-long b, .o2-cell.is-long b { font-size: 7px; } }