:root {
    --green: #1b4332;
    --deep-green: #0b1f15;
    --gold: #d4a843;
    --gold-light: #ead39b;
    --ivory: #f6f5ef;
    --surface: #ffffff;
    --text: #1b2a22;
    --text-sub: #6b7b72;
    --border: rgba(49, 70, 59, .14);
    --danger: #c93f3f;
    --success: #238552;
    --shadow: 0 24px 60px rgba(18, 46, 34, .1);
    font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    color: var(--text);
    background: var(--ivory);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ivory); scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(circle at 5% 20%, rgba(212, 168, 67, .08), transparent 24rem), var(--ivory);
}

body.embedded {
    min-height: 100%;
    background: var(--ivory);
}

body.embedded .site-header {
    display: none;
}

body.embedded .view {
    width: min(100% - 32px, 1080px);
}

body.embedded .form-view {
    padding-top: 28px;
}

body.embedded .result-view {
    min-height: 100vh;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.is-hidden { display: none !important; }

.site-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 48px));
    height: 88px;
    margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50% 50% 50% 12%;
    color: var(--deep-green);
    background: var(--gold);
    font-family: Georgia, serif;
    font-size: 23px;
    font-style: italic;
    font-weight: 700;
    transform: rotate(-8deg);
}
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong {
    color: var(--green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    letter-spacing: .12em;
    line-height: 1;
}
.brand small { margin-top: 4px; color: var(--text-sub); font-size: 7px; letter-spacing: .08em; }
.text-button { border: 0; color: var(--text-sub); background: transparent; font-size: 14px; }
.view { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.hero {
    position: relative;
    display: grid;
    min-height: 570px;
    padding: 76px 72px;
    overflow: hidden;
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
    gap: 64px;
    border-radius: 34px;
    color: #fff;
    background: linear-gradient(125deg, rgba(8, 30, 19, .98) 10%, rgba(27, 67, 50, .92) 63%, rgba(37, 82, 61, .96)), var(--deep-green);
    box-shadow: 0 30px 90px rgba(11, 31, 21, .22);
}
.hero::after {
    position: absolute;
    right: -80px;
    bottom: -190px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .018);
    content: "";
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-one { top: -100px; right: 28%; width: 320px; height: 320px; background: rgba(212, 168, 67, .09); }
.hero-glow-two { bottom: -120px; left: 15%; width: 300px; height: 300px; background: rgba(108, 184, 142, .07); }
.hero-copy, .tournament-card { position: relative; z-index: 1; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
}
.eyebrow::before { display: block; width: 25px; height: 1px; background: currentColor; content: ""; }
.eyebrow.dark { color: #94701e; }
.hero h1 {
    margin: 25px 0 24px;
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: clamp(44px, 5.2vw, 72px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.16;
}
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-copy > p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, .68); font-size: 17px; line-height: 1.8; }
.hero-meta { display: flex; gap: 58px; margin-top: 56px; }
.hero-meta div { display: flex; flex-direction: column; gap: 8px; }
.hero-meta span, .tournament-card small { color: rgba(255, 255, 255, .48); font-size: 11px; letter-spacing: .08em; }
.hero-meta strong { color: rgba(255, 255, 255, .88); font-size: 15px; font-weight: 600; }
.tournament-card {
    display: flex;
    min-height: 350px;
    padding: 31px;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 25px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)), rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
}
.card-label, .test-badge {
    align-self: flex-start;
    padding: 7px 11px;
    border: 1px solid rgba(212, 168, 67, .52);
    border-radius: 999px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}
.card-number { position: absolute; top: 30px; right: 28px; color: rgba(255, 255, 255, .06); font-family: Georgia, serif; font-size: 100px; }
.tournament-card h2 { margin: 10px 0 13px; color: #fff; font-size: 25px; line-height: 1.35; }
.tournament-card p { margin: 0; color: rgba(255, 255, 255, .56); font-size: 13px; }

.feature-grid { display: grid; padding: 66px 38px; grid-template-columns: repeat(3, 1fr); }
.feature-grid article { min-height: 145px; padding: 10px 46px; border-right: 1px solid var(--border); }
.feature-grid article:last-child { border-right: 0; }
.feature-grid article > span { color: var(--gold); font-family: Georgia, serif; font-size: 13px; }
.feature-grid h3 { margin: 17px 0 10px; color: var(--green); font-size: 18px; }
.feature-grid p { margin: 0; color: var(--text-sub); font-size: 14px; line-height: 1.7; }
.landing-action {
    display: flex;
    min-height: 150px;
    margin-bottom: 60px;
    padding: 34px 46px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-radius: 25px;
    color: #fff;
    background: var(--green);
}
.landing-action > div { display: flex; flex-direction: column; gap: 8px; }
.landing-action > div span { color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.landing-action > div strong { font-family: Georgia, "Noto Serif KR", serif; font-size: 24px; font-weight: 400; }

.primary-button, .secondary-button {
    display: inline-flex;
    min-height: 52px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    gap: 28px;
    border: 0;
    border-radius: 11px;
    color: var(--deep-green);
    background: var(--gold);
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(212, 168, 67, .2); }
.primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.landing-action .primary-button { min-width: 180px; color: var(--green); background: #fff; }

.form-view { padding: 44px 0 84px; }
.flow-shell { width: min(790px, 100%); min-width: 0; max-width: 100%; margin: 0 auto; }
.payment-shell { width: min(1080px, 100%); }
.flow-heading { display: flex; align-items: flex-start; gap: 24px; }
.flow-heading > div { min-width: 0; }
.back-link {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    font-size: 20px;
}
.flow-heading h1 { margin: 8px 0 9px; color: var(--green); font-family: Georgia, "Noto Serif KR", serif; font-size: 39px; font-weight: 400; }
.flow-heading p { margin: 0; color: var(--text-sub); font-size: 14px; }
.flow-heading .signup-intro { line-height: 1.65; word-break: keep-all; }
.signup-intro span { display: block; }
.signup-intro .intro-gap { margin-top: 8px; }
.stepper { display: flex; margin: 40px 0 24px; padding: 0; list-style: none; }
.stepper li { display: flex; flex: 1; align-items: center; gap: 9px; color: #a0aaa4; font-size: 12px; font-weight: 600; }
.stepper li:not(:last-child)::after { height: 1px; margin: 0 12px; flex: 1; background: #d9ddd9; content: ""; }
.stepper li span {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #ced4cf;
    border-radius: 50%;
    background: var(--ivory);
}
.stepper li.active { color: var(--green); }
.stepper li.active span { border-color: var(--green); color: #fff; background: var(--green); }
.stepper li.complete { color: var(--success); }
.stepper li.complete span { border-color: #cae5d7; color: var(--success); background: #eaf7f0; }

.form-card, .order-card, .result-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 38px;
    border: 1px solid rgba(69, 89, 78, .1);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.form-mode-tabs { display: grid; margin: -14px -14px 34px; padding: 5px; grid-template-columns: 1fr 1fr; border-radius: 12px; background: #f0f2ef; }
.form-mode-tabs button { min-height: 45px; border: 0; border-radius: 9px; color: var(--text-sub); background: transparent; font-size: 13px; font-weight: 700; }
.form-mode-tabs button.active { color: var(--green); background: #fff; box-shadow: 0 4px 13px rgba(25, 55, 41, .08); }
.field-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 18px; }
.field-grid.single { grid-template-columns: 1fr; }
.field, fieldset.field { display: flex; min-width: 0; margin: 0; padding: 0; flex-direction: column; gap: 9px; border: 0; }
.field.full { grid-column: 1 / -1; }
.field > span:first-child, .field legend { color: #38483f; font-size: 12px; font-weight: 700; }
.field b, .required-note { color: #b38726; }
.field input, .field select {
    width: 100%;
    height: 51px;
    padding: 0 15px;
    border: 1px solid #dfe4e0;
    border-radius: 10px;
    outline: 0;
    color: var(--text);
    background: #fbfcfb;
    font-size: 14px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field input:focus, .field select:focus { border-color: rgba(27, 67, 50, .58); box-shadow: 0 0 0 3px rgba(27, 67, 50, .07); }
.field input::placeholder { color: #adb6b0; }
.inline-field { display: flex; min-width: 0; width: 100%; gap: 9px; }
.field .inline-field input { width: 0; min-width: 0; flex: 1 1 0; }
.secondary-button { min-width: 100px; min-height: 51px; flex: 0 0 auto; border: 1px solid var(--green); color: var(--green); background: #fff; font-size: 12px; white-space: nowrap; }
.identity-verification { display: flex; margin-bottom: 24px; padding: 18px; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #d8dfd9; border-radius: 14px; background: #f7f9f6; }
.identity-verification > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.identity-verification span { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.identity-verification strong { font-size: 15px; }
.identity-verification small { color: var(--text-sub); font-size: 11px; line-height: 1.5; }
.identity-verification.verified { border-color: #86ac9b; background: #f0f8f3; }
.identity-verification.error { border-color: #d9a5a5; background: #fff7f7; }
.field-message { min-height: 16px; color: var(--text-sub); font-size: 11px; }
.field-message.success { color: var(--success); }
.field-message.error { color: var(--danger); }
.segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.segmented input, .participant-options input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
    display: grid;
    height: 51px;
    place-items: center;
    border: 1px solid #dfe4e0;
    border-radius: 10px;
    color: var(--text-sub);
    background: #fbfcfb;
    font-size: 13px;
    cursor: pointer;
}
.segmented input:checked + span { border-color: var(--green); color: var(--green); background: #f1f7f3; font-weight: 700; }
.agreement-check { display: flex; margin-top: 28px; align-items: flex-start; gap: 10px; color: var(--text-sub); font-size: 12px; line-height: 1.55; cursor: pointer; }
.agreement-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green); }
.application-terms {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfaf5;
}
.application-terms summary {
    display: flex;
    padding: 15px 17px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--green);
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.application-terms summary::-webkit-details-marker { display: none; }
.application-terms-arrow {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms ease;
}
.application-terms[open] .application-terms-arrow { transform: rotate(225deg); }
.application-terms-content {
    max-height: 420px;
    padding: 18px;
    overflow: auto;
    border-top: 1px solid var(--border);
    color: var(--text-sub);
    background: #fff;
    font-size: 12px;
    line-height: 1.7;
}
.application-terms-content h3 { margin: 0 0 18px; color: var(--green); font-size: 16px; }
.application-terms-content section + section { margin-top: 22px; }
.application-terms-content h4 { margin: 0; color: var(--text); font-size: 13px; }
.application-terms-content p { margin: 7px 0 0; }
.application-terms-content ol { margin: 8px 0 0; padding-left: 21px; }
.application-terms-content li + li { margin-top: 5px; }
.application-terms-table-wrap { margin: 10px 0; overflow-x: auto; }
.application-terms table { width: 100%; min-width: 430px; border-collapse: collapse; }
.application-terms th, .application-terms td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.application-terms th { color: var(--text); background: #f6f4ed; font-weight: 700; }
.application-terms-effective { margin-top: 24px !important; padding-top: 14px; border-top: 1px solid var(--border); }
.form-error { min-height: 20px; margin: 14px 0 0; color: var(--danger); font-size: 12px; text-align: center; }
.submit-button { width: 100%; min-height: 57px; margin-top: 8px; border-radius: 12px; }
.payment-action-buttons { display: grid; margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.payment-action-buttons .submit-button,
.payment-action-buttons .result-button { width: 100%; margin-top: 0; }
.result-payment-actions { margin-top: 16px; }
.social-signup { display: grid; margin-top: 22px; gap: 10px; }
.social-divider { display: flex; margin: 3px 0 8px; align-items: center; gap: 13px; color: var(--text-sub); font-size: 11px; }
.social-divider::before, .social-divider::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.social-button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 62px;
    padding: 0 48px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}
.social-button:disabled { cursor: wait; opacity: .68; }
.social-button[hidden] { display: none; }
.social-button small { margin-left: 5px; font-size: 10px; font-weight: 700; }
.social-button-copy { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.15; }
.social-button-copy small { display: block; margin: 0; font-size: .8em; font-weight: 600; opacity: .78; }
.social-symbol {
    position: absolute;
    top: 50%;
    left: 20px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 900;
}
.kakao-button { color: #191919; background: #fee500; }
.kakao-button:hover { background: #f5dc00; }
.kakao-button .social-symbol { border-radius: 50%; color: #fee500; background: #191919; font-size: 12px; }
.naver-button { color: #fff; background: #03c75a; }
.naver-button:hover { background: #02b652; }
.naver-button .social-symbol { color: #03c75a; background: #fff; }
.apple-button { color: #fff; background: #000; }
.apple-button:hover { background: #222; }
.apple-button .social-symbol { width: 34px; color: #fff; font-size: 9px; letter-spacing: -.04em; }
.social-error { margin-top: 2px; }

.payment-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .72fr); align-items: start; gap: 23px; }
.section-title { display: flex; margin-bottom: 28px; align-items: flex-end; justify-content: space-between; }
.section-title > div { display: flex; flex-direction: column; gap: 4px; }
.section-title > div span, .section-title .required-note { color: #a08035; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.section-title h2 { margin: 0; color: var(--green); font-family: Georgia, "Noto Serif KR", serif; font-size: 25px; font-weight: 400; }
.participant-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.participant-options > label > span {
    display: flex;
    min-height: 74px;
    padding: 13px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px solid #dfe4e0;
    border-radius: 11px;
    color: var(--text-sub);
    background: #fbfcfb;
    cursor: pointer;
}
.participant-options b { color: inherit; font-size: 12px; }
.participant-options small { font-size: 11px; }
.participant-options input:checked + span { border-color: var(--green); color: var(--green); background: #eff6f2; box-shadow: inset 0 0 0 1px var(--green); }
.payment-method-fixed {
    display: flex;
    min-height: 70px;
    margin-top: 27px;
    padding: 13px 15px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--green);
    border-radius: 11px;
    background: #f3f8f5;
}
.card-icon { position: relative; width: 34px; height: 24px; border-radius: 4px; background: var(--green); }
.card-icon::after { position: absolute; top: 7px; right: 0; left: 0; height: 3px; background: var(--gold); content: ""; }
.payment-method-fixed div { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.payment-method-fixed b { color: var(--green); font-size: 13px; }
.payment-method-fixed small { color: var(--text-sub); font-size: 10px; }
.selected-dot { width: 17px; height: 17px; border: 5px solid var(--green); border-radius: 50%; background: #fff; }
.test-notice { margin: 16px 0 0; color: #8a6b25; font-size: 11px; text-align: center; }
.order-card { position: sticky; top: 24px; padding: 28px; }
.order-image {
    position: relative;
    display: grid;
    height: 150px;
    margin: 19px 0 22px;
    overflow: hidden;
    place-items: center;
    border-radius: 14px;
    color: rgba(255, 255, 255, .8);
    background: linear-gradient(145deg, rgba(11, 31, 21, .38), rgba(11, 31, 21, .74)), var(--green) center/cover no-repeat;
}
.order-image::before, .order-image::after { position: absolute; width: 130px; height: 130px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; content: ""; }
.order-image::before { right: -30px; bottom: -45px; }
.order-image::after { right: -58px; bottom: -73px; }
.order-image span { position: relative; z-index: 1; font-family: Georgia, serif; font-size: 18px; letter-spacing: .15em; }
.order-card > h2 { margin: 0; color: var(--green); font-size: 19px; line-height: 1.45; }
.order-card dl { display: flex; margin: 24px 0; padding: 19px 0; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.order-card dl div, .result-summary div { display: flex; justify-content: space-between; gap: 20px; }
.order-card dt, .order-card dd { margin: 0; font-size: 11px; }
.order-card dt { color: var(--text-sub); }
.order-card dd { color: var(--text); font-weight: 600; text-align: right; }
.order-card .payer-row {
    margin: -5px 0 3px;
    padding: 12px 13px;
    align-items: center;
    border-radius: 9px;
    background: #eff6f2;
}
.order-card .payer-row dt { color: var(--green); font-weight: 700; }
.order-card .payer-row dd { color: var(--green); font-size: 13px; }
.order-total { display: flex; align-items: center; justify-content: space-between; }
.order-total span { color: var(--text-sub); font-size: 12px; }
.order-total strong { color: var(--green); font-family: Georgia, "Noto Serif KR", serif; font-size: 23px; }
.ksnet-card { width: calc(100% - 303px); margin-top: 23px; }
.ksnet-payment-method { display: flex; flex-direction: column; gap: 6px; margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; }
.ksnet-payment-method strong { color: var(--green); font-size: 15px; }
.ksnet-payment-method span, .ksnet-payment-agreement { color: var(--text-sub); font-size: 12px; line-height: 1.6; }
.test-badge { border-color: #d9bd77; color: #94701e; background: #fff8e7; }

.business-info {
    display: grid;
    margin-top: 28px;
    padding: 26px 30px;
    grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
    gap: 30px;
    border-top: 1px solid var(--border);
    color: var(--text-sub);
}
.business-info-heading span {
    color: #a08035;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}
.business-info-heading h2 {
    margin: 7px 0 0;
    color: var(--green);
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: 20px;
    font-weight: 400;
}
.business-info dl {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}
.business-info dl div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 12px;
}
.business-info dl .business-address {
    grid-column: 1 / -1;
}
.business-info dt,
.business-info dd {
    margin: 0;
    font-size: 11px;
    line-height: 1.65;
}
.business-info dt { color: #8d9992; }
.business-info dd { color: #536159; font-weight: 600; }
.business-info a { text-decoration: underline; text-underline-offset: 2px; }

.result-view { display: grid; min-height: calc(100vh - 88px); padding: 24px 0 40px; place-items: center; }
.result-card { width: min(540px, 100%); padding: 32px 52px; text-align: center; }
.result-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    place-items: center;
    border: 1px solid #b9ddca;
    border-radius: 50%;
    color: var(--success);
    background: #eef9f3;
    font-size: 29px;
}
.result-icon.failure { border-color: #e6c0c0; color: var(--danger); background: #fff4f4; }
.result-card .eyebrow { justify-content: center; }
.result-card h1 { margin: 10px 0; color: var(--green); font-family: Georgia, "Noto Serif KR", serif; font-size: 34px; font-weight: 400; }
.result-card > p { margin: 0; color: var(--text-sub); font-size: 14px; line-height: 1.7; }
.result-summary { display: flex; margin: 16px 0 0; padding: 16px 22px; flex-direction: column; gap: 9px; border-radius: 13px; background: #f4f6f4; text-align: left; }
.result-summary span { color: var(--text-sub); font-size: 12px; }
.result-summary strong { color: var(--text); font-size: 12px; }
.result-button { width: 100%; margin-top: 16px; }

.loading-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    background: rgba(8, 23, 15, .68);
    backdrop-filter: blur(4px);
}
.loading-overlay p { margin: 16px 0 0; font-size: 13px; }
.spinner { width: 38px; height: 38px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--gold); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
    position: fixed;
    z-index: 110;
    right: 24px;
    bottom: 24px;
    max-width: min(390px, calc(100% - 48px));
    padding: 15px 18px;
    border: 1px solid #ecddb8;
    border-radius: 12px;
    color: #494a50;
    background: #fff4e4;
    box-shadow: 0 18px 50px rgba(22, 43, 32, .15);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 920px) {
    .hero { padding: 60px 48px; grid-template-columns: 1fr; }
    .tournament-card { min-height: 245px; }
    .feature-grid { padding-right: 0; padding-left: 0; }
    .feature-grid article { padding: 10px 28px; }
    .payment-layout { grid-template-columns: 1fr; }
    .order-card { position: static; grid-row: 1; }
    .ksnet-card { width: 100%; }
    .business-info { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 640px) {
    .site-header, .view { width: calc(100% - 32px); }
    .site-header { height: 70px; }
    .brand small { display: none; }
    .hero { min-height: auto; padding: 48px 25px 26px; gap: 38px; border-radius: 22px; }
    .hero h1 { margin-top: 20px; font-size: 39px; }
    .hero-copy > p { font-size: 14px; }
    .hero-meta { margin-top: 35px; gap: 25px; }
    .hero-meta strong { font-size: 13px; }
    .tournament-card { min-height: 220px; padding: 23px; border-radius: 17px; }
    .tournament-card h2 { font-size: 21px; }
    .feature-grid { padding: 38px 7px; grid-template-columns: 1fr; gap: 25px; }
    .feature-grid article { min-height: 0; padding: 0 10px 25px; border-right: 0; border-bottom: 1px solid var(--border); }
    .feature-grid article:last-child { padding-bottom: 0; border-bottom: 0; }
    .landing-action { padding: 27px 24px; align-items: stretch; flex-direction: column; border-radius: 18px; }
    .landing-action > div strong { font-size: 21px; }
    .landing-action .primary-button { width: 100%; }
    .payment-action-buttons { grid-template-columns: 1fr; }
    .form-view { padding-top: 24px; }
    .flow-heading { gap: 14px; }
    .flow-heading h1 { font-size: 32px; }
    .stepper li { overflow: hidden; font-size: 0; }
    .stepper li:not(:last-child)::after { margin: 0 7px; }
    .form-card, .order-card { padding: 24px 19px; border-radius: 17px; }
    .field-grid { grid-template-columns: minmax(0, 1fr); }
    .field.full { grid-column: auto; }
    .inline-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .field .inline-field input { width: 100%; }
    .secondary-button { min-width: 92px; padding: 0 12px; }
    .identity-verification { align-items: stretch; flex-direction: column; }
    .identity-verification .secondary-button { width: 100%; }
    .application-terms-content { max-height: 360px; padding: 15px; }
    .participant-options { grid-template-columns: 1fr; }
    .participant-options > label > span { min-height: 61px; }
    .result-card { padding: 24px; }
    .result-card h1 { font-size: 29px; }
    .toast { right: 16px; bottom: 16px; max-width: calc(100% - 32px); }
    .business-info { margin-top: 20px; padding: 22px 7px; }
    .business-info dl { grid-template-columns: 1fr; gap: 8px; }
    .business-info dl .business-address { grid-column: auto; }
    .business-info dl div { grid-template-columns: 100px minmax(0, 1fr); }

    body.embedded .view {
        width: calc(100% - 24px);
    }

    body.embedded .form-view {
        padding-top: 18px;
    }
}

/* Keep visually hidden choices within their labels on narrow screens. */
.segmented label, .participant-options > label { position: relative; }
.segmented input, .participant-options input { width: 1px; height: 1px; min-height: 0; padding: 0; }
.segmented input:focus-visible + span, .participant-options input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.stepper li span { font-size: 12px; }

/* Inline completion and device-specific installation actions inside the application sheet. */
#resultMessage.application-complete-message {
    margin: 16px 0; padding: 14px 20px; border: 1px solid #cae5d7;
    border-radius: 16px; background: #eff6f2; color: var(--green);
    font-size: 16px; line-height: 1.55; word-break: keep-all;
}
.app-download-card { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: var(--ivory); border: 1px solid var(--border); }
.app-download-title { color: var(--green); font-size: 18px; }
.app-download-card p { margin: 6px 0 0; color: var(--text-sub); font-size: 13px; line-height: 1.45; }
.app-download-card .result-button { margin-top: 12px; min-height: 54px; border-radius: 12px; }
.payment-guide {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid #d8c28a;
    border-radius: 18px;
    background: #fffaf0;
    text-align: left;
}
.payment-guide-title {
    display: block;
    color: var(--green);
    font-size: 18px;
    text-align: center;
}
.payment-guide dl { margin: 16px 0 0; }
.payment-guide dl div {
    display: grid;
    padding: 9px 0;
    grid-template-columns: 92px minmax(0, 1fr);
    border-bottom: 1px solid #eadfca;
}
.payment-guide dt { color: var(--text-sub); font-size: 13px; }
.payment-guide dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.payment-guide dd strong { color: var(--green); font-size: 16px; letter-spacing: .02em; }
.payment-guide p {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    color: #755a18;
    background: #fff1c9;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
}
#resultTitle:focus { outline: none; }

#resultMessage { margin: 16px 0; line-height: 1.55; word-break: keep-all; }
#resultMessage .result-message-emphasis {
    display: block; margin: 4px 0; color: var(--green);
    font-size: 17px; font-weight: 700; line-height: 1.5;
}