/* 공개 확률 페이지(odds.html). 머리줄은 terms.html 과 같은 틀, 표는 관리자 표 토큰 값(2026-11-05 시안 승인). */
:root {
    --odds-ink: #10344a;
    --odds-paper: #fff6ea;
    --odds-paper-line: #ebcba8;
    --odds-head: #583011;
    --odds-bg: #dff1fb;
    --odds-white: #fff;
    --odds-text: #0f172a;
    --odds-sub: #475569;
    --odds-dim: #64748b;
    --odds-line: #dbe3ef;
    --odds-line-strong: #cbd5e1;
    --odds-surface: #f1f5f9;
    --odds-group: #f8fafc;
    --odds-hint: #1e3a8a;
    --odds-time: #2563eb;
    --odds-points: #60a5fa;
    --odds-attempts: #bfdbfe;
    --odds-background: #cbd5e1;
    --odds-fs-small: 13px;
    --odds-fs-body: 14px;
    --odds-fs-page: 15px;
    --odds-fs-title: 17px;
    --odds-fs-heading: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--odds-bg);
    color: var(--odds-ink);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: var(--odds-fs-page);
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.legal-top {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    background: var(--odds-paper);
    border-bottom: 2px solid var(--odds-paper-line);
}

.legal-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 2px solid var(--odds-paper-line);
    border-radius: 999px;
    background: var(--odds-white);
    color: var(--odds-head);
    font-size: var(--odds-fs-body);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.legal-top h1 {
    margin: 0;
    color: var(--odds-head);
    font-size: var(--odds-fs-title);
    line-height: 1.3;
}

main {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.legal-doc {
    padding: 20px 16px 24px;
    border: 1px solid var(--odds-line);
    border-radius: 12px;
    background: var(--odds-white);
}

.legal-doc h2 {
    margin: 0 0 4px;
    color: var(--odds-text);
    font-size: var(--odds-fs-heading);
    line-height: 1.4;
}

.odds-sub {
    margin: 0 0 16px;
    color: var(--odds-sub);
    font-size: var(--odds-fs-body);
}

.odds-status {
    margin: 0;
    padding: 16px 0;
    color: var(--odds-sub);
}

.odds-retry {
    display: block;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--odds-line-strong);
    border-radius: 6px;
    background: var(--odds-white);
    color: var(--odds-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.odds-search-label {
    display: block;
    margin-bottom: 4px;
    color: var(--odds-text);
    font-size: var(--odds-fs-body);
    font-weight: 700;
}

.odds-search {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 20px;
    padding: 0 12px;
    border: 1px solid var(--odds-line-strong);
    border-radius: 6px;
    background: var(--odds-white);
    color: var(--odds-text);
    font: inherit;
}

.odds-empty {
    margin: 0;
    padding: 16px 0;
    color: var(--odds-sub);
}

.odds-shares {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--odds-text);
    font-size: var(--odds-fs-body);
}

.odds-bar {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--odds-surface);
}

.odds-bar span {
    display: block;
    min-width: 2px;
}

.odds-swatch-hint { background: var(--odds-hint); }
.odds-swatch-time { background: var(--odds-time); }
.odds-swatch-points { background: var(--odds-points); }
.odds-swatch-attempts { background: var(--odds-attempts); }
.odds-swatch-background { background: var(--odds-background); }

.odds-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    color: var(--odds-sub);
    font-size: var(--odds-fs-small);
}

.odds-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.odds-legend i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.odds-legend b {
    color: var(--odds-text);
    font-variant-numeric: tabular-nums;
}

.odds-wrap {
    border: 1px solid var(--odds-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--odds-white);
}

.odds-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--odds-text);
    font-size: var(--odds-fs-body);
}

.odds-table th,
.odds-table td {
    padding: 0 12px;
    border-bottom: 1px solid var(--odds-line);
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
}

.odds-table thead th {
    height: 42px;
    background: var(--odds-surface);
    font-weight: 700;
}

/* 숫자 칸은 내용 폭만큼만 잡는다. 삼성 인터넷 글자 확대는 고정 폭·em 칸에 반영되지 않아 숫자가 넘쳤다(150% 실측). */
.odds-table .odds-num {
    width: 1%;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.odds-table .odds-group th,
.odds-table .odds-group td {
    height: 40px;
    background: var(--odds-group);
    color: var(--odds-sub);
    font-size: var(--odds-fs-small);
    font-weight: 700;
}

.odds-table .odds-group th span {
    color: var(--odds-dim);
    font-weight: 400;
}

.odds-row td { height: 52px; }
.odds-row-plain td { height: 44px; }
.odds-table .odds-row td.odds-num { font-weight: 600; }

.odds-reward {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.odds-icon {
    flex: none;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.odds-name { min-width: 0; }

.odds-table .odds-sum td {
    height: 48px;
    border-bottom: 0;
    background: var(--odds-surface);
    font-weight: 700;
}

.odds-notes {
    margin: 16px 0 0;
    padding: 0 0 0 1.2em;
    color: var(--odds-sub);
    font-size: var(--odds-fs-small);
    line-height: 1.6;
}

.odds-notes li { margin: 0 0 4px; }

[hidden] { display: none; }

@media (max-width: 400px) {
    .odds-reward { gap: 8px; }
    .legal-doc { padding-right: 12px; padding-left: 12px; }
}