:root {
    --ink: #152533;
    --ink-2: #243a49;
    --muted: #667985;
    --line: #dbe4e8;
    --line-dark: #c8d4da;
    --paper: #ffffff;
    --canvas: #f2f6f7;
    --mint: #5ee0bd;
    --mint-soft: #dff8f1;
    --teal: #0f766e;
    --teal-dark: #0a5b56;
    --amber: #f4b84a;
    --danger: #d44d5c;
    --shadow: 0 18px 50px rgba(21, 37, 51, 0.09);
    --radius: 20px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

button,
select,
input,
textarea {
    font: inherit;
}

button,
a,
select,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

.hidden {
    display: none !important;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: #fff;
    background: var(--ink);
    border-radius: 8px;
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.35);
    outline-offset: 3px;
}

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid rgba(219, 228, 232, 0.9);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(15px);
}

.header-inner,
.page-shell,
.footer-inner,
.footer-bottom {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.header-inner {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.brand-symbol {
    display: block;
    width: 43px;
    height: 43px;
    background: var(--ink);
    border-radius: 13px;
    box-shadow: 0 5px 16px rgba(21, 37, 51, 0.16);
    object-fit: cover;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-copy strong {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.35px;
}

.brand-copy small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.top-nav {
    display: flex;
    gap: 6px;
}

.top-nav a {
    padding: 9px 13px;
    border-radius: 9px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 750;
}

.top-nav a:hover {
    background: var(--canvas);
}

.page-shell {
    padding: 42px 0 70px;
}

.generator,
.results,
.manual-slip,
.saved-history,
.how-it-works,
.support-panel,
.responsible-note {
    margin-bottom: 28px;
}

.generator-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 23px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.generator-heading h1,
.section-title h2,
.results-header h2 {
    margin: 0;
    line-height: 1.22;
    letter-spacing: -1.3px;
}

.generator-heading h1 {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
}

.generator-heading > div > p:last-child {
    max-width: 700px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 16px;
}

.generator-heading strong {
    color: var(--teal);
}

.brand-banner {
    height: clamp(122px, 14vw, 168px);
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid rgba(94, 224, 189, 0.2);
    border-radius: var(--radius);
    background: #071f33;
    box-shadow: 0 12px 34px rgba(21, 37, 51, 0.1);
}

.brand-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
}

.data-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    background: var(--paper);
    font-size: 12px;
    font-weight: 750;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 4px rgba(244, 184, 74, 0.15);
}

.data-chip.ready .status-dot {
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13);
}

.data-chip.fallback .status-dot {
    background: var(--muted);
    box-shadow: none;
}

.latest-draw {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 14px;
    padding: 18px 24px;
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.latest-copy {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 10px;
}

.latest-copy span {
    grid-column: 1 / -1;
    color: #a9b9c3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.latest-copy strong {
    font-size: 22px;
    font-weight: 900;
}

.latest-copy small {
    color: #a9b9c3;
    font-size: 12px;
}

.latest-balls,
.combo-balls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ball {
    display: inline-grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    color: #152533;
    border-radius: 50%;
    background: #eef3f5;
    box-shadow: inset 0 -3px 0 rgba(21, 37, 51, 0.1);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.ball.range-1 { background: #ffd764; }
.ball.range-2 { color: #fff; background: #55a9e8; }
.ball.range-3 { color: #fff; background: #ef6f78; }
.ball.range-4 { color: #fff; background: #7e8790; }
.ball.range-5 { color: #fff; background: #45aa77; }

.latest-balls .bonus-mark {
    margin: 0 2px;
    color: #8ea2ae;
    font-size: 18px;
    font-weight: 500;
}

.latest-balls .ball {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.generator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(330px, 0.78fr);
    gap: 14px;
}

.control-panel,
.strategy-card,
.results,
.manual-slip,
.saved-history,
.how-it-works,
.support-panel,
.responsible-note {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: 0 10px 36px rgba(21, 37, 51, 0.055);
}

.control-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
    gap: 22px;
    padding: 28px;
}

.control-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.control-group legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 850;
}

.control-group legend span {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    color: #fff;
    background: var(--teal);
    border-radius: 7px;
    font-size: 11px;
}

.select-wrap {
    position: relative;
    display: block;
}

.select-wrap::after {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 8px;
    height: 8px;
    content: "";
    pointer-events: none;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
}

.select-wrap select {
    width: 100%;
    min-height: 54px;
    padding: 0 48px 0 16px;
    color: var(--ink);
    border: 1px solid var(--line-dark);
    border-radius: 12px;
    appearance: none;
    background: #fbfcfc;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.select-wrap select:hover,
.quantity-row label:hover {
    border-color: #95aaa9;
}

.strategy-description {
    min-height: 42px;
    margin: 10px 2px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.quantity-row {
    display: grid;
    grid-template-columns: 45px 1fr 45px;
    gap: 8px;
}

.quantity-button,
.quantity-row label,
.quantity-presets button {
    border: 1px solid var(--line-dark);
    background: #fbfcfc;
    border-radius: 11px;
}

.quantity-button {
    min-height: 54px;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
}

.quantity-button:hover,
.quantity-presets button:hover {
    color: var(--teal);
    border-color: var(--teal);
    background: var(--mint-soft);
}

.quantity-row label {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.quantity-row input {
    width: 54px;
    padding: 0;
    color: var(--ink);
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 22px;
    font-weight: 900;
    text-align: right;
    -moz-appearance: textfield;
}

.quantity-row input::-webkit-inner-spin-button,
.quantity-row input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.quantity-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.quantity-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-top: 8px;
}

.quantity-presets button {
    min-height: 30px;
    padding: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.quantity-presets button.active {
    color: var(--teal-dark);
    border-color: #9fd8cb;
    background: var(--mint-soft);
}

.generate-button {
    display: flex;
    grid-column: 1 / -1;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: var(--ink);
    border: 0;
    border-radius: 13px;
    background: var(--mint);
    box-shadow: 0 9px 24px rgba(15, 118, 110, 0.18);
    font-weight: 900;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease;
}

.generate-button:hover:not(:disabled) {
    background: #72e8c9;
    transform: translateY(-1px);
}

.generate-button:disabled {
    color: #8b9da7;
    background: #dfe7e9;
    box-shadow: none;
    cursor: wait;
}

.generate-button.loading span:last-child {
    animation: pulse-arrow 800ms ease-in-out infinite alternate;
}

.form-note {
    grid-column: 1 / -1;
    margin: -10px 2px 0;
    color: var(--muted);
    font-size: 11px;
}

.strategy-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    color: #fff;
    border-color: var(--ink);
    background: var(--ink);
}

.strategy-card::after {
    position: absolute;
    top: -120px;
    right: -100px;
    width: 250px;
    height: 250px;
    content: "";
    border: 45px solid rgba(94, 224, 189, 0.055);
    border-radius: 50%;
}

.strategy-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.strategy-card-top span {
    color: #92a8b4;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.strategy-card-top strong {
    color: var(--mint);
    font-size: 42px;
    font-weight: 950;
    line-height: 0.9;
}

.strategy-card h2 {
    position: relative;
    z-index: 1;
    margin: 16px 0 7px;
    font-size: 24px;
    letter-spacing: -0.6px;
}

.strategy-card > p {
    position: relative;
    z-index: 1;
    min-height: 50px;
    margin: 0 0 18px;
    color: #b9c7cf;
    font-size: 13px;
}

.criteria-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.criteria-list span {
    padding: 5px 8px;
    color: #dce7eb;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 10px;
    font-weight: 750;
}

.strategy-card-note {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.strategy-card-note strong {
    color: var(--mint);
    font-size: 11px;
}

.strategy-card-note p {
    margin: 4px 0 0;
    color: #9fb0ba;
    font-size: 11px;
    line-height: 1.55;
}

.results {
    padding: 30px;
    scroll-margin-top: 95px;
}

.results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.results-header h2,
.section-title h2 {
    font-size: 27px;
}

.results-header p:last-child {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.result-actions button,
.combo-copy {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line-dark);
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.result-actions button:hover,
.combo-copy:hover {
    border-color: var(--teal);
    color: var(--teal-dark);
}

.result-actions button.primary {
    color: #fff;
    border-color: var(--teal);
    background: var(--teal);
}

.result-actions button.primary:hover {
    background: var(--teal-dark);
}

.result-actions button.qr {
    color: #fff;
    border-color: var(--ink);
    background: var(--ink);
}

.result-actions button.qr:hover:not(:disabled) {
    color: var(--mint);
    border-color: var(--ink-2);
    background: var(--ink-2);
}

.result-actions button:disabled {
    color: #94a4ad;
    border-color: var(--line);
    background: #edf2f3;
    cursor: not-allowed;
}

.result-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.save-status {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    margin: -5px 0 14px;
    padding: 9px 12px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafb;
    font-size: 11px;
    font-weight: 700;
}

.save-status::before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    content: "";
    border-radius: 50%;
    background: var(--amber);
}

.save-status.saved {
    color: var(--teal-dark);
    border-color: #b9e5da;
    background: #effaf7;
}

.save-status.saved::before {
    background: var(--teal);
}

.save-status.error {
    color: #a33a46;
    border-color: #efc5ca;
    background: #fff7f8;
}

.save-status.error::before {
    background: var(--danger);
}

.selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid #cce8e1;
    border-radius: 11px;
    background: #f4fcfa;
}

.selection-toolbar > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.selection-toolbar strong {
    color: var(--teal-dark);
    font-size: 12px;
}

.selection-toolbar span {
    color: var(--muted);
    font-size: 10px;
}

.selection-toolbar > div:last-child {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.selection-toolbar button {
    min-height: 31px;
    padding: 0 10px;
    color: var(--ink-2);
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.selection-toolbar button:hover:not(:disabled) {
    color: var(--teal-dark);
    border-color: var(--teal);
}

.selection-toolbar button:disabled {
    opacity: 0.45;
    cursor: default;
}

.summary-item {
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8fafb;
}

.summary-item span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.summary-item strong {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 900;
}

.combination-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.combination-card {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.combination-card:hover {
    border-color: #b5c8ce;
    box-shadow: 0 8px 20px rgba(21, 37, 51, 0.06);
}

.combination-card.selected {
    border-color: #a9ddd1;
    background: #fcfffe;
}

.combo-select {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    cursor: pointer;
}

.combo-select input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.combo-index {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--teal-dark);
    border-radius: 11px;
    background: var(--mint-soft);
    font-size: 12px;
    font-weight: 900;
}

.combo-select input:not(:checked) + .combo-index {
    color: var(--muted);
    border: 1px solid var(--line);
    background: #f7f9fa;
}

.combo-select input:checked + .combo-index::after {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    content: "✓";
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--teal);
    font-size: 9px;
    line-height: 1;
}

.combo-select input:focus-visible + .combo-index {
    outline: 3px solid rgba(15, 118, 110, 0.35);
    outline-offset: 3px;
}

.combo-content {
    min-width: 0;
}

.combo-balls .ball {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 12px;
}

.combo-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 11px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.combo-metrics span + span::before {
    margin-right: 11px;
    color: var(--line-dark);
    content: "·";
}

.combo-copy {
    align-self: stretch;
}

.data-notice {
    margin: 16px 2px 0;
    padding-top: 13px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font-size: 11px;
}

.manual-slip {
    padding: 30px;
    scroll-margin-top: 95px;
}

.manual-slip-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.manual-slip-header h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -0.9px;
}

.manual-slip-header p:last-child {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.manual-slip-header > span {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: var(--teal-dark);
    border: 1px solid #b9e5da;
    border-radius: 99px;
    background: var(--mint-soft);
    font-size: 10px;
    font-weight: 850;
}

.manual-slip-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 14px;
}

.manual-slip-entry {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafcfc;
}

.manual-slip-entry > label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 850;
}

.manual-slip-entry textarea {
    display: block;
    width: 100%;
    min-height: 180px;
    padding: 14px 15px;
    resize: vertical;
    color: var(--ink);
    border: 1px solid var(--line-dark);
    border-radius: 11px;
    outline: 0;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.8;
}

.manual-slip-entry textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.manual-slip-entry > p {
    margin: 8px 2px 0;
    color: var(--muted);
    font-size: 10px;
}

.manual-slip-actions {
    display: flex;
    gap: 7px;
    margin-top: 14px;
}

.manual-slip-actions button {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 14px;
    color: #fff;
    border: 1px solid var(--teal);
    border-radius: 10px;
    background: var(--teal);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.manual-slip-actions button:hover {
    background: var(--teal-dark);
}

.manual-slip-actions button.secondary {
    color: var(--ink-2);
    border-color: var(--line-dark);
    background: #fff;
}

.manual-slip-actions button.secondary:hover {
    color: var(--teal-dark);
    border-color: var(--teal);
}

.manual-qr-errors {
    color: #a33a46;
    font-size: 10px;
    font-weight: 750;
}

.manual-qr-errors p {
    margin: 8px 2px 0;
}

.manual-slip-guide {
    padding: 22px;
    color: #fff;
    border-radius: 14px;
    background: var(--ink);
}

.manual-slip-guide > strong {
    color: var(--mint);
    font-size: 13px;
}

.manual-slip-guide ol {
    margin: 15px 0 0;
    padding-left: 20px;
    color: #d7e1e6;
    font-size: 11px;
}

.manual-slip-guide li + li {
    margin-top: 9px;
}

.manual-slip-guide p {
    margin: 17px 0 0;
    padding-top: 14px;
    color: #9fb0ba;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 10px;
}

.saved-history {
    padding: 30px;
    scroll-margin-top: 95px;
}

.history-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.history-header h2,
.support-panel h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -0.9px;
}

.history-header p:last-child {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.history-header button {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 13px;
    border: 1px solid var(--line-dark);
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.history-header button:hover:not(:disabled) {
    color: var(--teal-dark);
    border-color: var(--teal);
}

.history-header button:disabled {
    color: var(--muted);
    background: #f3f6f7;
    cursor: wait;
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.history-groups {
    display: grid;
    gap: 16px;
}

.history-group {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #f8fafb;
}

.history-group.is-winning {
    border-color: #ead59f;
    background: linear-gradient(135deg, #fffaf0, #ffffff 58%);
}

.history-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.history-group-kicker {
    margin: 0 0 3px;
    color: var(--teal-dark);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.history-group.is-winning .history-group-kicker {
    color: #9a6b07;
}

.history-group-header h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.5px;
}

.history-group-header p:last-child {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.history-group-count {
    display: inline-flex;
    min-height: 30px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 10px;
    color: var(--teal-dark);
    border: 1px solid #b9ddd4;
    border-radius: 99px;
    background: #edf9f6;
    font-size: 11px;
}

.history-group-count.winner {
    color: #835c05;
    border-color: #e5c46f;
    background: #fff4cc;
}

.saved-selection-toolbar {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #cce8e1;
    border-radius: 12px;
    background: #f4fcfa;
}

.saved-selection-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.saved-selection-overview > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.saved-selection-overview strong {
    color: var(--teal-dark);
    font-size: 12px;
}

.saved-selection-overview span {
    color: var(--muted);
    font-size: 10px;
}

.saved-selection-toggle,
.saved-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.saved-selection-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #d9eee9;
}

.saved-selection-toolbar button {
    min-height: 33px;
    padding: 0 11px;
    color: var(--ink-2);
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.saved-selection-toolbar button:hover:not(:disabled) {
    color: var(--teal-dark);
    border-color: var(--teal);
}

.saved-selection-toolbar button.qr {
    color: #fff;
    border-color: var(--ink);
    background: var(--ink);
}

.saved-selection-toolbar button.qr:hover:not(:disabled) {
    color: var(--mint);
    border-color: var(--ink-2);
    background: var(--ink-2);
}

.saved-selection-toolbar button:disabled {
    color: #94a4ad;
    border-color: var(--line);
    background: #edf2f3;
    cursor: not-allowed;
}

.history-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.history-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 28px;
    color: var(--muted);
    border: 1px dashed var(--line-dark);
    border-radius: 12px;
    background: #f8fafb;
    font-size: 12px;
    text-align: center;
}

.history-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

.history-card.selectable {
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.history-card.selectable:hover {
    border-color: #b5c8ce;
    box-shadow: 0 8px 20px rgba(21, 37, 51, 0.06);
}

.history-card.selectable.selected {
    border-color: #99d8c9;
    background: #fcfffe;
    box-shadow: 0 7px 18px rgba(15, 118, 110, 0.07);
}

.history-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.history-select input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--teal);
    cursor: pointer;
}

.history-card.selected .history-select {
    color: var(--teal-dark);
}

.history-card.is-winner {
    border-color: #e7c06b;
    background: linear-gradient(135deg, #fffdf5, #fff 65%);
    box-shadow: 0 8px 24px rgba(183, 127, 20, 0.09);
}

.history-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.history-card-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.history-copy {
    min-height: 25px;
    padding: 0 9px;
    color: var(--teal-dark);
    border: 1px solid #b9ddd5;
    border-radius: 99px;
    background: #f3fbf9;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.history-copy:hover {
    color: #fff;
    border-color: var(--teal);
    background: var(--teal);
}

.history-card-title {
    min-width: 0;
}

.history-card-title strong {
    display: block;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-card-title span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.prize-badge {
    display: inline-flex;
    min-height: 25px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 8px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #f7f9fa;
    font-size: 9px;
    font-weight: 900;
}

.prize-badge.waiting {
    color: #8a650e;
    border-color: #ead59f;
    background: #fff9e9;
}

.prize-badge.winner {
    color: #835c05;
    border-color: #e5c46f;
    background: #fff4cc;
}

.prize-badge.lose {
    color: #71818a;
}

.history-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.history-balls .ball {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 11px;
}

.history-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    color: var(--muted);
    border-top: 1px solid #edf1f2;
    font-size: 9px;
}

.history-card-foot strong {
    color: var(--ink-2);
}

.history-more {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin: 14px auto 0;
    padding: 0 18px;
    color: var(--ink-2);
    border: 1px solid var(--line-dark);
    border-radius: 10px;
    background: #fff;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.history-more:hover {
    color: var(--teal-dark);
    border-color: var(--teal);
}

.history-note {
    margin: 13px 2px 0;
    color: var(--muted);
    font-size: 10px;
}

.how-it-works {
    display: grid;
    grid-template-columns: 0.72fr 2fr;
    gap: 36px;
    padding: 30px;
}

.support-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    padding: 26px 30px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #effaf7 100%);
}

.support-panel > div > p:last-child {
    max-width: 720px;
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.support-panel figure {
    display: grid;
    margin: 0;
    justify-items: center;
    gap: 5px;
}

.support-qr-link {
    display: block;
    border-radius: 14px;
}

.support-qr-link:focus-visible {
    outline: 3px solid rgba(29, 135, 111, 0.32);
    outline-offset: 4px;
}

.support-panel img {
    display: block;
    width: 118px;
    height: 118px;
    padding: 7px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(21, 37, 51, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.support-qr-link:hover img {
    transform: translateY(-2px);
    box-shadow: 0 13px 30px rgba(21, 37, 51, 0.14);
}

.support-panel figcaption {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
}

.section-title p {
    margin-bottom: 5px;
}

.step-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.step-list article {
    padding: 15px;
    border-left: 2px solid var(--mint);
}

.step-list span {
    color: var(--teal);
    font-size: 10px;
    font-weight: 900;
}

.step-list h3 {
    margin: 5px 0 3px;
    font-size: 15px;
}

.step-list p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.responsible-note {
    display: grid;
    grid-template-columns: 0.82fr 1.6fr;
    align-items: center;
    gap: 30px;
    padding: 22px 26px;
    box-shadow: none;
}

.responsible-note > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.responsible-note > div span {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: #fff;
    background: var(--ink);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.responsible-note strong {
    font-size: 14px;
}

.responsible-note p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.site-footer {
    color: #c3d0d6;
    background: #101d26;
}

.footer-inner {
    display: flex;
    min-height: 115px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-brand > img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #1e3341;
    object-fit: cover;
}

.footer-brand strong {
    color: #fff;
    font-size: 15px;
}

.footer-brand p {
    margin: 1px 0 0;
    color: #7f939e;
    font-size: 10px;
}

.footer-inner nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px 18px;
}

.footer-inner nav a {
    font-size: 11px;
}

.footer-inner nav a:hover {
    color: var(--mint);
}

.footer-bottom {
    display: grid;
    min-height: 48px;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    color: #718691;
    border-top: 1px solid #21313b;
    font-size: 9px;
}

.footer-bottom > span:last-child {
    text-align: right;
}

.visitor-counter {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(4, max-content);
    color: #9fb0b8;
    font-size: 10px;
}

.visitor-counter > span {
    padding: 0 8px;
    white-space: nowrap;
}

.visitor-counter > span + span {
    border-left: 1px solid #2b3f4a;
}

.visitor-counter[hidden] {
    display: none;
}

.visitor-counter strong {
    color: var(--mint);
    font-variant-numeric: tabular-nums;
}

.qr-dialog {
    width: min(920px, calc(100% - 30px));
    max-width: none;
    max-height: calc(100vh - 30px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(6, 16, 23, 0.36);
}

.qr-dialog::backdrop,
.document-dialog::backdrop {
    background: rgba(10, 22, 30, 0.7);
    backdrop-filter: blur(5px);
}

.qr-shell {
    display: grid;
    max-height: calc(100vh - 30px);
    grid-template-rows: auto 1fr;
}

.qr-dialog-header {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}

.qr-dialog-header span {
    color: var(--teal);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

.qr-dialog-header h2 {
    margin: 2px 0 0;
    font-size: 19px;
}

.qr-dialog-header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.qr-dialog-header button,
.qr-pager button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.qr-dialog-header button b {
    margin-left: 5px;
    font-size: 17px;
}

.qr-dialog-body {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(360px, 1.08fr) minmax(300px, 0.92fr);
}

.qr-preview {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    padding: 26px;
    overflow-y: auto;
    background: #eef3f4;
}

.qr-preview img {
    display: block;
    flex: 0 0 auto;
    width: min(100%, 540px);
    height: auto;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(14, 33, 45, 0.12);
    image-rendering: pixelated;
}

.qr-preview strong {
    margin-top: 15px;
    font-size: 13px;
}

.qr-preview > span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.qr-details {
    min-width: 0;
    padding: 22px;
    overflow-y: auto;
}

.qr-purchase-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.qr-purchase-summary > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7faf9;
}

.qr-purchase-summary span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
}

.qr-purchase-summary strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.qr-game-list {
    display: grid;
    gap: 5px;
}

.qr-preview .qr-game-list {
    width: min(100%, 540px);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: 10px;
}

.qr-game-list div {
    display: flex;
    min-height: 31px;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fafcfc;
}

.qr-game-list span {
    color: var(--teal-dark);
    font-size: 9px;
    font-weight: 900;
}

.qr-game-list strong {
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 11px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.qr-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.qr-pager button:last-child {
    justify-self: stretch;
}

.qr-pager button:disabled {
    color: #9aa8af;
    background: #edf1f2;
    cursor: not-allowed;
}

.qr-pager span {
    min-width: 42px;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

.qr-save-actions {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.qr-share,
.qr-download {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
}

.qr-share {
    color: #fff;
    border: 0;
    background: var(--teal-dark);
    cursor: pointer;
}

.qr-share:hover {
    background: var(--teal);
}

.qr-share[hidden],
.qr-save-help[hidden] {
    display: none;
}

.qr-download {
    color: var(--ink-2);
    border: 1px solid var(--line-dark);
    background: #fff;
}

.qr-download:hover {
    color: var(--teal-dark);
    border-color: var(--teal);
}

.qr-save-help {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

.qr-notice {
    margin-top: 13px;
    padding: 13px;
    border: 1px solid #f0d6a7;
    border-radius: 10px;
    background: #fff9ed;
}

.qr-notice strong {
    color: #865e13;
    font-size: 11px;
}

.qr-notice p {
    margin: 4px 0 0;
    color: #755e32;
    font-size: 10px;
    line-height: 1.55;
}

.document-dialog {
    width: min(1060px, calc(100% - 30px));
    max-width: none;
    height: min(820px, calc(100vh - 30px));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(6, 16, 23, 0.34);
}

.document-shell {
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr;
}

.document-shell header {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line);
}

.document-shell header span {
    color: var(--teal);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

.document-shell h2 {
    margin: 1px 0 0;
    font-size: 17px;
}

.document-shell button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.document-shell button b {
    margin-left: 5px;
    font-size: 17px;
}

.document-shell iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--canvas);
}

.toast {
    position: fixed;
    z-index: 200;
    bottom: 24px;
    left: 50%;
    max-width: calc(100% - 30px);
    padding: 11px 16px;
    color: #fff;
    border-radius: 10px;
    background: var(--ink);
    box-shadow: var(--shadow);
    font-size: 12px;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 15px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes pulse-arrow {
    to { transform: translateX(4px); }
}

@media (max-width: 940px) {
    .generator-grid {
        grid-template-columns: 1fr;
    }

    .strategy-card > p {
        min-height: auto;
    }

    .combination-list {
        grid-template-columns: 1fr;
    }

    .history-list {
        grid-template-columns: 1fr;
    }

    .manual-slip-grid {
        grid-template-columns: 1fr;
    }

    .how-it-works {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 700px) {
    .header-inner,
    .page-shell,
    .footer-inner,
    .footer-bottom {
        width: min(100% - 24px, 1180px);
    }

    .header-inner {
        min-height: 64px;
    }

    .brand-copy small,
    .top-nav a:first-child {
        display: none;
    }

    .page-shell {
        padding: 27px 0 50px;
    }

    .generator-heading {
        display: block;
    }

    .generator-heading h1 {
        font-size: 31px;
    }

    .generator-heading > div > p:last-child {
        font-size: 14px;
    }

    .data-chip {
        margin-top: 15px;
    }

    .latest-draw {
        display: block;
        padding: 17px;
    }

    .latest-balls {
        margin-top: 13px;
    }

    .latest-balls .ball {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 12px;
    }

    .control-panel {
        grid-template-columns: 1fr;
        gap: 21px;
        padding: 20px;
    }

    .generate-button,
    .form-note {
        grid-column: auto;
    }

    .strategy-card,
    .results,
    .manual-slip,
    .saved-history,
    .support-panel,
    .how-it-works {
        padding: 21px;
    }

    .results-header {
        display: block;
    }

    .result-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 16px;
    }

    .result-actions .primary {
        grid-column: 1 / -1;
    }

    .result-actions .qr {
        grid-column: 1 / -1;
    }

    .result-actions #download-button {
        grid-column: 1 / -1;
    }

    .result-summary {
        grid-template-columns: 1fr 1fr;
    }

    .selection-toolbar,
    .selection-toolbar > div:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .selection-toolbar > div:last-child {
        width: 100%;
    }

    .selection-toolbar button {
        flex: 1;
    }

    .manual-slip-header {
        display: block;
    }

    .manual-slip-header > span {
        display: inline-flex;
        margin-top: 12px;
    }

    .manual-slip-entry,
    .manual-slip-guide {
        padding: 17px;
    }

    .manual-slip-actions {
        display: grid;
    }

    .history-header {
        display: block;
    }

    .history-header button {
        margin-top: 13px;
    }

    .history-summary {
        grid-template-columns: 1fr 1fr;
    }

    .history-group {
        padding: 15px;
    }

    .history-group-header {
        display: block;
    }

    .history-group-count {
        margin-top: 10px;
    }

    .saved-selection-overview,
    .saved-selection-overview > div:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .saved-selection-toggle,
    .saved-selection-actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .saved-selection-actions button {
        width: 100%;
    }

    .combination-card {
        grid-template-columns: 34px 1fr;
        gap: 10px;
        padding: 13px;
    }

    .combo-index {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 10px;
    }

    .combo-select {
        width: 34px;
        height: 34px;
    }

    .combo-copy {
        grid-column: 2;
        justify-self: start;
        min-height: 29px;
        margin-top: -2px;
    }

    .combo-balls {
        gap: 5px;
    }

    .combo-balls .ball {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        font-size: 11px;
    }

    .combo-metrics span:nth-child(n+4) {
        display: none;
    }

    .step-list {
        grid-template-columns: 1fr;
    }

    .support-panel {
        grid-template-columns: 1fr;
    }

    .support-panel figure {
        grid-template-columns: auto 1fr;
        justify-self: start;
        align-items: center;
    }

    .responsible-note {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 20px;
    }

    .footer-inner {
        display: block;
        padding: 28px 0 22px;
    }

    .footer-inner nav {
        justify-content: flex-start;
        margin-top: 22px;
    }

    .footer-bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 12px 0;
    }

    .footer-bottom > span:last-child,
    .visitor-counter {
        justify-content: flex-start;
        text-align: left;
    }

    .qr-dialog,
    .document-dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .qr-shell {
        height: 100%;
        max-height: none;
    }

    .qr-dialog-body {
        display: block;
        overflow-y: auto;
    }

    .qr-preview {
        padding: 18px;
    }

    .qr-preview img {
        width: min(82vw, 460px);
    }

    .qr-details {
        overflow: visible;
        padding: 18px;
    }
}

@media (max-width: 390px) {
    .combo-balls .ball {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 10px;
    }

    .quantity-presets {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Coupang Partners: one responsive placement, visually separated from service content. */
.partner-ad[hidden] {
    display: none;
}

.partner-ad {
    margin: 22px 0;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.partner-ad-label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.partner-ad-frame {
    display: flex;
    min-height: 140px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.partner-ad-frame iframe {
    display: block;
    flex: 0 0 auto;
    max-width: none;
    border: 0;
    background: transparent;
}

.partner-ad p {
    max-width: 680px;
    margin: 9px auto 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .partner-ad {
        margin: 16px 0;
        padding: 14px 0;
    }

    .partner-ad-frame {
        width: 100%;
        max-width: 100%;
        min-height: 100px;
        margin-left: 0;
    }

    .partner-ad p {
        padding: 0 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 역대 당첨번호 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.top-nav a[aria-current="page"] {
    color: #fff;
    background: var(--ink);
}

.draw-results-shell {
    max-width: 1180px;
}

.draws-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
    padding: clamp(30px, 5vw, 54px);
    border-radius: var(--radius);
    color: #fff;
    background:
        radial-gradient(circle at 92% 10%, rgba(94, 224, 189, 0.2), transparent 28%),
        linear-gradient(135deg, #152533, #123f3b);
    box-shadow: var(--shadow);
}

.draws-hero .eyebrow {
    color: #84e4ce;
}

.draws-hero h1 {
    margin: 0;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.12;
    letter-spacing: -2px;
}

.draws-hero > div > p:last-child {
    max-width: 670px;
    margin: 13px 0 0;
    color: #c9d9dc;
    font-size: 15px;
}

.draws-hero .data-chip {
    color: #d8e4e6;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

.draws-latest,
.draws-archive {
    margin-bottom: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.draws-latest {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
    gap: 30px;
    padding: 30px;
}

.draws-latest-main {
    min-width: 0;
}

.draws-latest-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.draws-latest-heading h2,
.draws-archive-header h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -1px;
}

.draws-latest-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}

.draws-latest-meta strong {
    color: var(--teal);
    font-size: 20px;
}

.draws-latest-meta span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.draws-latest-balls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 27px;
}

.draws-latest-balls .ball {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    font-size: 14px;
}

.draws-latest-balls .bonus-mark {
    margin: 0 3px;
    color: #9aaab3;
    font-size: 21px;
}

.bonus-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bonus-group small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.ball.is-bonus {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(15, 118, 110, 0.28);
}

.draws-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-self: stretch;
}

.draws-metrics > div {
    display: flex;
    min-height: 78px;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border: 1px solid #e5ecef;
    border-radius: 14px;
    background: var(--soft);
}

.draws-metrics span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.draws-metrics strong {
    margin-top: 2px;
    font-size: 20px;
}

.draws-archive {
    overflow: hidden;
    scroll-margin-top: 92px;
}

.draws-archive-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid var(--line);
}

.draws-archive-header > div > p:last-child {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.round-search {
    flex: 0 0 auto;
}

.round-search label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
}

.round-search > div {
    display: flex;
    gap: 7px;
}

.round-search input {
    width: 136px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-dark);
    border-radius: 9px;
    color: var(--ink);
    background: #fff;
}

.round-search button,
.draws-pagination button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ink);
    border-radius: 9px;
    color: #fff;
    background: var(--ink);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.round-search button.secondary {
    color: var(--ink-2);
    border-color: var(--line-dark);
    background: #fff;
}

.draws-table-wrap {
    overflow-x: auto;
}

.draws-table {
    width: 100%;
    border-collapse: collapse;
}

.draws-table th {
    padding: 12px 20px;
    color: #72838d;
    background: #f7f9fa;
    font-size: 10px;
    font-weight: 850;
    text-align: left;
}

.draws-table td {
    padding: 17px 20px;
    border-top: 1px solid #e7edef;
    color: #526571;
    font-size: 13px;
    vertical-align: middle;
}

.draw-row {
    cursor: pointer;
    transition: background 160ms ease;
}

.draw-row:hover,
.draw-row.is-expanded {
    background: #f8fcfb;
}

.draws-table td:first-child strong {
    color: var(--ink);
    font-size: 15px;
}

.draw-number-set {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.draw-number-set .ball,
.draws-table td:nth-child(4) .ball {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 11px;
}

.draw-detail-toggle {
    min-height: 34px;
    padding: 0 11px;
    color: var(--teal-dark);
    border: 1px solid #b8ddd4;
    border-radius: 9px;
    background: #f1fbf8;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.draw-row.is-expanded .draw-detail-toggle,
.draw-detail-toggle:hover {
    color: #fff;
    border-color: var(--teal);
    background: var(--teal);
}

.draw-detail-toggle:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.2);
    outline-offset: 2px;
}

.draw-prize-row > td {
    padding: 0;
    background: #f7faf9;
}

.draw-prize-panel {
    padding: 24px 20px 26px;
    border-top: 1px solid #dfe9e6;
}

.draw-prize-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.draw-prize-heading span {
    color: var(--teal-dark);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.draw-prize-heading h3 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 20px;
    letter-spacing: -0.7px;
}

.draw-prize-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.draw-prize-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.draw-prize-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

.draw-prize-card.rank-1 {
    border-color: #9bd8c9;
    box-shadow: inset 0 3px 0 var(--teal);
}

.draw-prize-card header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
}

.draw-prize-card header span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 8px;
    background: var(--ink);
    font-size: 10px;
    font-weight: 900;
}

.draw-prize-card.rank-1 header span {
    background: var(--teal);
}

.draw-prize-card header strong {
    color: var(--ink);
    font-size: 14px;
}

.draw-prize-card dl,
.draw-prize-card dd {
    margin: 0;
}

.draw-prize-card dl {
    display: grid;
    gap: 9px;
}

.draw-prize-card dl > div {
    display: grid;
    gap: 2px;
}

.draw-prize-card dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
}

.draw-prize-card dd {
    overflow-wrap: anywhere;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.draw-prize-card dl > div:last-child dd {
    color: var(--teal-dark);
}

.draw-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.draw-detail-metrics span {
    padding: 9px 11px;
    color: var(--muted);
    border-radius: 9px;
    background: #edf3f1;
    font-size: 10px;
    text-align: center;
}

.draw-detail-metrics strong {
    margin-left: 4px;
    color: var(--ink-2);
}

.draw-prize-empty {
    margin: 0;
    padding: 22px;
    color: var(--muted);
    border: 1px dashed var(--line-dark);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    text-align: center;
}

.draws-empty {
    margin: 0;
    padding: 48px 20px;
    color: var(--muted);
    text-align: center;
}

.draws-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px;
    border-top: 1px solid var(--line);
}

.draws-pagination span {
    min-width: 70px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.draws-pagination button {
    min-width: 74px;
    color: var(--ink-2);
    border-color: var(--line-dark);
    background: #fff;
}

.draws-pagination button:disabled {
    opacity: 0.42;
    cursor: default;
}

.footer-inner nav a[aria-current="page"] {
    color: var(--mint);
}

@media (max-width: 850px) {
    .draws-latest {
        grid-template-columns: 1fr;
    }

    .draws-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .draws-metrics > div {
        min-height: 68px;
    }

    .draw-prize-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .draws-hero {
        display: block;
        padding: 29px 22px;
    }

    .draws-hero h1 {
        font-size: 34px;
        letter-spacing: -1.4px;
    }

    .draws-hero .data-chip {
        margin-top: 20px;
    }

    .draws-latest {
        gap: 24px;
        padding: 21px;
    }

    .draws-latest-heading {
        display: block;
    }

    .draws-latest-meta {
        align-items: flex-start;
        margin-top: 12px;
    }

    .draws-latest-balls {
        gap: 7px;
        margin-top: 21px;
    }

    .draws-latest-balls .ball {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        font-size: 12px;
    }

    .draws-latest-balls .bonus-mark {
        margin: 0;
    }

    .bonus-group {
        gap: 5px;
    }

    .bonus-group small {
        display: none;
    }

    .draws-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .draws-archive-header {
        display: block;
        padding: 22px 18px 18px;
    }

    .round-search {
        margin-top: 18px;
    }

    .round-search > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .round-search input {
        width: 100%;
    }

    .round-search button.secondary {
        grid-column: 1 / -1;
    }

    .draws-table,
    .draws-table tbody,
    .draws-table tr,
    .draws-table td {
        display: block;
        width: 100%;
    }

    .draws-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .draws-table tbody {
        display: grid;
        gap: 10px;
        padding: 12px;
        background: #f7f9fa;
    }

    .draws-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: #fff;
    }

    .draws-table .draw-row.is-expanded {
        border-bottom: 0;
        border-radius: 13px 13px 0 0;
    }

    .draws-table td {
        padding: 0;
        border: 0;
    }

    .draws-table td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-size: 11px;
        text-align: right;
    }

    .draws-table td:nth-child(3) {
        grid-column: 1 / -1;
        margin-top: 13px;
    }

    .draws-table td:nth-child(4) {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        gap: 9px;
        margin-top: 10px;
    }

    .draws-table td:nth-child(5) {
        grid-column: 1 / -1;
        margin-top: 12px;
    }

    .draw-detail-toggle {
        width: 100%;
    }

    .draws-table td:nth-child(4)::before {
        color: var(--muted);
        content: "보너스";
        font-size: 9px;
        font-weight: 850;
    }

    .draw-number-set {
        gap: 5px;
    }

    .draw-number-set .ball,
    .draws-table td:nth-child(4) .ball {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        font-size: 10px;
    }

    .draws-table .draw-prize-row {
        display: block;
        margin-top: -10px;
        padding: 0;
        border-top: 0;
        border-radius: 0 0 13px 13px;
        background: #f7faf9;
    }

    .draws-table .draw-prize-row.hidden {
        display: none;
    }

    .draws-table .draw-prize-row > td {
        display: block;
        width: 100%;
    }

    .draw-prize-panel {
        padding: 19px 14px 16px;
        border-top-color: #d6e5e1;
    }

    .draw-prize-heading {
        display: block;
    }

    .draw-prize-heading p {
        margin-top: 5px;
    }

    .draw-detail-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    .draw-number-set .ball,
    .draws-table td:nth-child(4) .ball {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 9px;
    }

    .draw-prize-grid {
        grid-template-columns: 1fr;
    }
}

/* 로또 세금 계산기 */
.prize-tax-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 13px;
    padding-top: 11px;
    color: var(--teal-dark);
    border-top: 1px solid var(--line);
    font-size: 10px;
    font-weight: 850;
}

.prize-tax-link:hover span {
    transform: translateX(2px);
}

.prize-tax-link span {
    transition: transform 150ms ease;
}

.tax-shell {
    max-width: 1180px;
}

.tax-hero {
    align-items: flex-end;
}

.tax-hero h1 {
    max-width: 620px;
}

.tax-calculator,
.tax-guide {
    margin-bottom: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.tax-calculator {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    overflow: hidden;
}

.tax-entry {
    padding: clamp(26px, 4vw, 42px);
}

.tax-entry h2,
.tax-guide-heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -1px;
}

.tax-section-copy {
    margin: 8px 0 27px;
    color: var(--muted);
    font-size: 13px;
}

.tax-section-copy strong {
    color: var(--ink-2);
}

.tax-draw-picker {
    padding: 17px;
    border: 1px solid #cde4de;
    border-radius: 14px;
    background: #f4fbf9;
}

.tax-draw-picker header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.tax-draw-picker header > div {
    display: grid;
}

.tax-draw-picker header strong {
    color: var(--ink-2);
    font-size: 12px;
}

.tax-draw-picker header span,
.tax-draw-picker header small {
    color: var(--muted);
    font-size: 9px;
}

.tax-draw-picker header small.ready {
    color: var(--teal-dark);
    font-weight: 800;
}

.tax-draw-picker header small.fallback {
    color: var(--danger);
}

.tax-draw-picker > label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
}

.tax-draw-picker select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: var(--ink);
    border: 1px solid var(--line-dark);
    border-radius: 9px;
    outline: 0;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.tax-draw-picker select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.tax-rank-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.tax-rank-picker button {
    display: grid;
    min-width: 0;
    min-height: 52px;
    align-content: center;
    padding: 7px 3px;
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.tax-rank-picker button:hover:not(:disabled),
.tax-rank-picker button.is-selected {
    color: #fff;
    border-color: var(--teal);
    background: var(--teal);
}

.tax-rank-picker button:disabled {
    color: #a7b4ba;
    background: #f4f6f7;
    cursor: not-allowed;
}

.tax-rank-picker span {
    font-size: 10px;
    font-weight: 900;
}

.tax-rank-picker strong {
    overflow: hidden;
    margin-top: 1px;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tax-entry-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
}

.tax-entry-divider::before,
.tax-entry-divider::after {
    height: 1px;
    flex: 1;
    background: var(--line);
    content: "";
}

#tax-form > label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 850;
}

.tax-input-wrap {
    display: flex;
    min-height: 68px;
    align-items: center;
    border: 2px solid var(--line-dark);
    border-radius: 14px;
    background: #fff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tax-input-wrap:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1);
}

.tax-input-wrap input {
    width: 100%;
    min-width: 0;
    padding: 0 8px 0 18px;
    color: var(--ink);
    border: 0;
    outline: 0;
    background: transparent;
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 900;
    letter-spacing: -1px;
}

.tax-input-wrap input::placeholder {
    color: #b1bdc3;
    font-weight: 700;
}

.tax-input-wrap span {
    flex: 0 0 auto;
    padding-right: 18px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 850;
}

.tax-input-help,
.tax-amount-words,
.tax-error {
    margin: 7px 2px 0;
    font-size: 11px;
}

.tax-input-help {
    color: var(--muted);
}

.tax-amount-words {
    color: var(--teal-dark);
    font-weight: 850;
}

.tax-error {
    color: var(--danger);
    font-weight: 750;
}

.tax-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 17px;
}

.tax-quick button,
.tax-reset {
    min-height: 38px;
    color: var(--ink-2);
    border: 1px solid var(--line-dark);
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.tax-quick button:hover,
.tax-reset:hover {
    color: var(--teal-dark);
    border-color: #9bd8c9;
    background: var(--mint-soft);
}

.tax-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 24px;
}

.tax-submit,
.tax-reset {
    min-height: 52px;
    padding: 0 18px;
}

.tax-submit {
    color: #092f2c;
    border: 0;
    border-radius: 11px;
    background: var(--mint);
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.16);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.tax-submit:hover {
    background: #4dd5b1;
}

.tax-result {
    min-width: 0;
    min-height: 510px;
    padding: clamp(26px, 4vw, 42px);
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(94, 224, 189, 0.18), transparent 36%),
        var(--ink);
}

.tax-result-empty {
    display: flex;
    height: 100%;
    min-height: 420px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tax-result-empty > span {
    display: inline-flex;
    width: 66px;
    height: 66px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--mint);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 28px;
    font-weight: 900;
}

.tax-result-empty h2 {
    margin: 0;
    font-size: 24px;
}

.tax-result-empty p {
    max-width: 340px;
    margin: 9px 0 0;
    color: #aebfc5;
    font-size: 13px;
}

.tax-result-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tax-result-heading span {
    color: #84e4ce;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.tax-result-heading h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.tax-result-heading > strong {
    padding: 6px 9px;
    color: #0b4843;
    border-radius: 99px;
    background: var(--mint);
    font-size: 10px;
}

.tax-net {
    margin: 24px 0 0;
    color: var(--mint);
    font-size: clamp(31px, 4.2vw, 46px);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -2px;
    overflow-wrap: anywhere;
}

.tax-net-words {
    min-height: 20px;
    margin: 6px 0 24px;
    color: #a9ddd2;
    font-size: 12px;
    font-weight: 750;
}

.tax-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.1);
}

.tax-result-grid > div {
    display: flex;
    min-width: 0;
    min-height: 65px;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    background: rgba(12, 31, 43, 0.72);
}

.tax-result-grid span {
    color: #9bb0b7;
    font-size: 9px;
    font-weight: 750;
}

.tax-result-grid strong {
    margin-top: 2px;
    color: #edf7f5;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.tax-formula {
    margin-top: 14px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.05);
}

.tax-formula > span {
    display: block;
    color: #84e4ce;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.tax-formula > strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 12px;
}

.tax-formula > div {
    margin-top: 8px;
}

.tax-formula p {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 0;
    color: #9fb2b9;
    font-size: 10px;
}

.tax-formula p strong {
    flex: 0 0 auto;
    color: #cce8e1;
}

.tax-guide {
    padding: clamp(25px, 4vw, 38px);
}

.tax-guide-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.tax-guide-heading > p {
    max-width: 430px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.tax-rate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.tax-rate-grid article {
    display: flex;
    min-width: 0;
    min-height: 208px;
    flex-direction: column;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fbfcfc;
}

.tax-rate-grid article > span {
    color: var(--teal);
    font-size: 10px;
    font-weight: 900;
}

.tax-rate-grid article > strong {
    margin-top: 10px;
    font-size: 14px;
}

.tax-rate-grid article > em {
    margin-top: 4px;
    color: var(--teal-dark);
    font-size: 25px;
    font-style: normal;
    font-weight: 950;
    letter-spacing: -0.8px;
}

.tax-rate-grid article > p {
    margin: auto 0 0;
    color: var(--muted);
    font-size: 12px;
}

.tax-example {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(380px, 1.2fr);
    gap: 35px;
    margin-top: 18px;
    padding: 25px;
    color: #fff;
    border-radius: 16px;
    background: var(--ink);
}

.tax-example h3 {
    margin: 3px 0 0;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.tax-example ol {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tax-example li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 6px;
    color: #aebfc5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 11px;
}

.tax-example li:last-child {
    padding-top: 3px;
    color: #fff;
    border-bottom: 0;
    font-weight: 850;
}

.tax-example li strong {
    flex: 0 0 auto;
    color: #d9f5ee;
}

.tax-notes {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.tax-notes details {
    padding: 0 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.tax-notes summary {
    padding: 14px 0;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.tax-notes p {
    margin: -2px 0 15px;
    color: var(--muted);
    font-size: 12px;
}

.tax-source {
    margin: 17px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.tax-source a {
    color: var(--teal-dark);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .tax-calculator {
        grid-template-columns: 1fr;
    }

    .tax-result {
        min-height: auto;
    }

    .tax-result-empty {
        min-height: 280px;
    }

    .tax-example {
        grid-template-columns: 1fr;
        gap: 19px;
    }
}

@media (max-width: 700px) {
    .tax-hero h1 {
        font-size: 34px;
    }

    .tax-entry,
    .tax-result,
    .tax-guide {
        padding: 22px 18px;
    }

    .tax-guide-heading {
        display: block;
    }

    .tax-guide-heading > p {
        margin-top: 8px;
        text-align: left;
    }

    .tax-rate-grid {
        grid-template-columns: 1fr;
    }

    .tax-rate-grid article {
        min-height: 0;
    }

    .tax-rate-grid article > p {
        margin-top: 13px;
    }

    .tax-example {
        padding: 21px 18px;
    }
}

@media (max-width: 540px) {
    .top-nav a:last-child {
        display: none;
    }

    .top-nav a {
        padding: 8px 7px;
        font-size: 11px;
    }

    .tax-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tax-rank-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tax-result-grid {
        grid-template-columns: 1fr;
    }

    .tax-net {
        font-size: 30px;
    }

    .tax-formula p,
    .tax-example li {
        display: grid;
        gap: 2px;
    }
}