/* =============================================================================
   영천댐 별빛걷기대회 · 공개 사이트
   토큰 → 리셋 → 레이아웃 → 헤더 → 히어로 → 섹션 → 컴포넌트 → 폼 → 반응형
   빌드 도구가 없으므로 단일 파일을 유지한다. 섹션 주석으로 구획한다.
   ========================================================================== */

/* --- 토큰 ---------------------------------------------------------------- */

:root {
    /* 표면과 잉크 */
    --navy: #102a43;
    --ivory: #fbf8f0;
    --gold: #c59a45;
    --ink: #15212b;
    --paper: #f7f5ef;
    --line: #d8dfdd;
    --surface: #ffffff;
    --muted: #5f6d76;
    --accent: #e9ff74;

    /* 히어로 전용 야간 톤. 사진 위 흰 텍스트의 가독성을 확보하는 오버레이다. */
    --night: #0a1622;
    --on-night: #ffffff;
    --on-night-muted: #dbe3ea;

    /* 간격 4px 스케일 */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --s9: 96px;

    /* 레이아웃 */
    --measure: 1120px;
    --pad: clamp(20px, 5vw, 32px);
    --radius: 3px;
}

/* --- 리셋 ---------------------------------------------------------------- */

* { box-sizing: border-box; }

/* label 같은 요소에 display 를 주면 UA 의 [hidden] 규칙을 이겨 숨김이 풀린다. */
[hidden] { display: none !important; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 16px/1.65 system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

h1, h2, h3 { letter-spacing: -.035em; text-wrap: balance; }
h1 { margin: 0 0 var(--s5); font-size: clamp(2.1rem, 6.4vw, 4.4rem); line-height: 1.08; }
h2 { margin: 0 0 var(--s4); font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2; }
h3 { margin: 0; font-size: 1.12rem; line-height: 1.4; }

:where(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- 레이아웃 프리미티브 --------------------------------------------------
   폭과 좌우 여백은 여기 한 곳에서만 정한다. 자식 선택자로 폭을 주지 않는다.
   ------------------------------------------------------------------------ */

.container,
.site-header,
.content-section,
footer {
    width: min(100%, var(--measure));
    margin-inline: auto;
    padding-inline: var(--pad);
}

.content-section { padding-block: var(--s7); }

/* --- 헤더 ---------------------------------------------------------------- */

.site-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s2);
    min-height: 88px;
    padding-block: var(--s4);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-decoration: none;
}

.brand { min-height: 44px; }
.brand img { display: block; width: auto; height: 42px; }

.brand span,
.eyebrow {
    color: #63717b;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.eyebrow { display: block; margin: 0 0 var(--s3); text-transform: uppercase; }

nav { display: flex; flex-wrap: wrap; width: 100%; justify-content: flex-start; gap: var(--s2); font-size: .85rem; }

nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--s2) var(--s1);
    font-weight: 600;
    text-decoration: none;
}

nav a:hover { color: var(--gold); }

.site-header nav { min-width: 0; }

/* --- 히어로 --------------------------------------------------------------
   행사 사진을 어둡게 깔고 흰 텍스트를 올린다. 어두운 처리는 장식이 아니라
   텍스트 가독성을 위한 오버레이다. 2026-08-27 결정.
   ------------------------------------------------------------------------ */

.hero {
    display: flex;
    align-items: flex-end;
    min-height: min(80vh, 700px);
    padding-block: var(--s9) var(--s7);
    color: var(--on-night);
    background-color: var(--night);
    background-image:
        linear-gradient(to bottom, rgba(10, 22, 34, .50) 0%, rgba(10, 22, 34, .70) 45%, rgba(10, 22, 34, .92) 100%),
        url("../img/hero/walk-crowd-1920.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 38%;
    border-bottom: 4px solid var(--gold);
}

.hero h1 { margin-bottom: var(--s5); color: var(--on-night); }

/* 히어로 문단은 클래스로만 지정한다. `.hero p` 같은 후손 선택자를 두면
   명시도가 .hero-note 를 이겨 간격이 무시된다. */
.hero-lede {
    max-width: 34rem;
    margin: 0 0 var(--s6);
    color: var(--on-night-muted);
    font-size: 1.06rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin: 0 0 var(--s6);
    padding: 0;
    list-style: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-night);
}

.hero-meta span { margin-right: var(--s2); color: var(--gold); font-size: .74rem; letter-spacing: .16em; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

.hero-note { margin: var(--s7) 0 0; color: var(--on-night-muted); font-size: .88rem; }

.hero .button:focus-visible { outline: 3px solid var(--on-night); outline-offset: 3px; }

.hero .link-inverse {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--on-night);
    font-weight: 700;
    text-underline-offset: 4px;
}

/* --- 버튼 ---------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--s3) var(--s6);
    border: 0;
    border-radius: var(--radius);
    background: var(--gold);
    color: var(--navy);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.button:hover { background: #b3862f; }

.button.secondary { background: var(--navy); color: #fff; }
.button.secondary:hover { background: #0a1c2e; }

.text-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #31536b;
    padding: var(--s2) var(--s3);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* --- 섹션 머리 ------------------------------------------------------------ */

.section-heading { margin-bottom: var(--s6); }
.section-heading h2 { margin: 0; }

.page-intro {
    padding: var(--s7) var(--pad);
    background: var(--ivory);
    border-bottom: 1px solid #e6dece;
}

.event-page-intro h1 { max-width: 22ch; }
.event-page-intro p:last-child { max-width: 62ch; margin: 0; color: #4c5b64; font-size: 1.05rem; }

.event-content { max-width: var(--measure); }

.prose { max-width: 68ch; margin: var(--s6) 0; color: #3f505a; font-size: 1.05rem; }

.muted { color: var(--muted); }

/* --- 대회 안내 내비게이션 (가로 스크롤 유지) ------------------------------- */

.event-navigation {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: 0 max(var(--pad), calc((100% - var(--measure)) / 2 + var(--pad)));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    scrollbar-width: thin;
}

.event-navigation a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: var(--s3) var(--s5);
    border-right: 1px solid var(--line);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}

.event-navigation a:last-child { border-right: 0; }

/* --- 사실 카드 (메인) ------------------------------------------------------ */

.fact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.fact-grid > div { min-width: 0; padding: var(--s6); background: var(--surface); }
.fact-grid dt { margin: 0 0 var(--s3); color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.fact-grid dd { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.fact-grid p { margin: var(--s2) 0 0; color: var(--muted); font-size: .9rem; font-weight: 400; }

/* --- 코스 ---------------------------------------------------------------- */

.course-grid,
.preparation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.course-item,
.preparation-grid article { min-width: 0; padding: var(--s6); background: var(--surface); }

.course-item p:last-child,
.preparation-grid p { margin-bottom: 0; color: var(--muted); }

.course-distance { margin: 0 0 var(--s5); color: #4e6a56; font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; }

.preparation-grid article > span { display: block; margin-bottom: var(--s6); color: #7b897f; font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.preparation-grid h3 { margin-bottom: var(--s3); }
.preparation-grid ul { margin: var(--s3) 0 0; padding-left: 1.15em; color: #4a5a63; }
.preparation-grid li { margin: var(--s2) 0; }
.preparation-grid p + p { margin-top: var(--s3); }

.guide-note {
    margin-top: var(--s5);
    padding: var(--s5);
    border-left: 3px solid var(--gold);
    background: var(--ivory);
}

.guide-note strong { display: block; color: var(--navy); }
.guide-note p { margin: var(--s2) 0 0; color: #52616a; }

/* --- 요강 정의 목록 -------------------------------------------------------- */

.spec-list { margin: 0; border-top: 2px solid var(--navy); }

.spec-list > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s1);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
}

.spec-list dt { color: var(--muted); font-size: .9rem; font-weight: 700; }
.spec-list dd { margin: 0; font-weight: 600; }
.spec-list dd ul { margin: var(--s2) 0 0; padding-left: 1.1em; font-weight: 400; }
.spec-list dd li { margin: var(--s1) 0; }

.organizer { margin: var(--s6) 0 0; color: var(--muted); font-size: .92rem; }
.organizer strong { color: var(--ink); }

/* --- 공지 ---------------------------------------------------------------- */

.notice-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.notice-list article { background: var(--surface); padding: var(--s5); }
.notice-list h3 { margin-bottom: var(--s3); }
.notice-list p { margin: 0; color: var(--muted); font-size: .94rem; }

.public-notice-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--navy); }
.public-notice-list li { border-bottom: 1px solid var(--line); }

.public-notice-list a {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s4) var(--s1);
    text-decoration: none;
}

.public-notice-list a:hover strong { color: var(--gold); }
.public-notice-list a > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: var(--s1); }
.public-notice-list strong { overflow-wrap: anywhere; }
.public-notice-list small { color: #5f6d76; }

.notice-detail { max-width: 78ch; }
.notice-detail header { padding-bottom: var(--s5); border-bottom: 2px solid var(--navy); }
.notice-detail h1 { overflow-wrap: anywhere; font-size: clamp(1.9rem, 5vw, 3.2rem); }
.notice-body { padding: var(--s6) 0; color: #2f414a; font-size: 1.05rem; line-height: 1.85; overflow-wrap: anywhere; }
.notice-media { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
.notice-media img { display: block; width: 100%; }

.pagination { display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--s5); margin-top: var(--s6); }
.pagination a { min-height: 44px; display: inline-flex; align-items: center; padding: var(--s2) var(--s4); border: 1px solid var(--line); text-decoration: none; }

.empty-state { padding: var(--s7) var(--s5); border-top: 2px solid var(--navy); border-bottom: 1px solid var(--line); color: var(--muted); text-align: center; }

/* --- 상세 정의 목록 (신청/조회/입금) ---------------------------------------- */

.details dl, .payment dl, .status dl { margin: 0; border-top: 2px solid var(--navy); }

.details dl div, .payment dl div, .status dl div {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s1);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
}

.details dt, .payment dt, .status dt { color: var(--muted); font-size: .9rem; }
dd { margin: 0; font-weight: 700; }

/* --- 폼 ------------------------------------------------------------------ */

form { max-width: 720px; }

fieldset { border: 0; border-top: 1px solid var(--line); margin: 0 0 var(--s6); padding: var(--s5) 0 0; }
legend { padding: 0; font-weight: 800; }

label { display: block; margin: var(--s4) 0; font-size: 1rem; font-weight: 700; }

input, select {
    width: 100%;
    margin-top: var(--s2);
    border: 1px solid #b7c2c2;
    border-radius: var(--radius);
    background: var(--surface);
    padding: var(--s3);
    font: inherit;
    min-height: 48px;
}

input:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }

.choice-row { display: flex; flex-direction: column; gap: var(--s3); }
.choice-row label { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); background: var(--surface); }
.choice-row input, .check input { flex: 0 0 auto; width: 22px; height: 22px; min-height: 0; margin: 0 var(--s3) 0 0; accent-color: var(--gold); }
.check { display: flex; align-items: center; gap: var(--s1); min-height: 44px; margin: 0 0 var(--s6); font-weight: 500; }

.participant { margin-top: var(--s4); padding: var(--s5); border: 1px solid var(--line); background: var(--ivory); }
.participant-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }

.form-message { min-height: 1.5em; color: #9d3527; font-weight: 700; }
.unavailable { max-width: 720px; }
.lookup-form { display: grid; gap: var(--s3); }
.lookup-form .button { margin-top: var(--s3); justify-self: start; }

/* --- 신청 폼 보조 요소 ------------------------------------------------------ */

.field-help { margin: 0 0 var(--s4); color: var(--muted); font-size: .95rem; }

.postcode-row,
.bulk-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }

.postcode-row label { flex: 1 1 180px; max-width: 220px; }
.bulk-row label { flex: 1 1 220px; max-width: 280px; }
.postcode-row .button,
.bulk-row .button { flex: 0 0 auto; margin-bottom: var(--s4); }

.participant-tools { display: inline-flex; flex-wrap: wrap; gap: var(--s2); }

.consent-detail {
    margin: 0 0 var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.consent-detail summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.consent-detail p { margin: var(--s3) 0 0; color: #46555e; }
.consent-detail ul { margin: var(--s3) 0 0; padding-left: 1.15em; color: #46555e; }
.consent-detail li { margin: var(--s2) 0; }

.consent-terms { margin: var(--s3) 0 0; border-top: 1px solid var(--line); }
.consent-terms > div { display: grid; grid-template-columns: 1fr; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.consent-terms dt { color: var(--muted); font-size: .92rem; font-weight: 700; }
.consent-terms dd { margin: 0; color: #46555e; font-weight: 400; line-height: 1.7; }

.location-panel { display: grid; gap: var(--s5); align-items: end; }
.location-panel h2 { margin: var(--s1) 0; }
.location-panel .button { justify-self: start; }

/* --- 푸터 ---------------------------------------------------------------- */

footer {
    padding-block: var(--s7);
    margin-top: var(--s7);
    border-top: 1px solid var(--line);
    color: #59666e;
    font-size: .92rem;
}

footer strong { display: block; margin-bottom: var(--s3); color: var(--ink); font-size: 1rem; letter-spacing: .04em; }
footer p { margin: var(--s2) 0; }
.tel-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 3px; }

footer .sponsors { margin-top: var(--s5); font-size: .82rem; line-height: 1.9; }

/* --- 모바일 고정 동선 ------------------------------------------------------
   문서가 길어 히어로를 지나면 신청 버튼에 닿기 어렵다. 좁은 화면에서만 띄운다.
   ------------------------------------------------------------------------ */

.mobile-actions { display: none; }

/* --- 반응형 -------------------------------------------------------------- */

@media (max-width: 620px) {
    .mobile-actions {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 20;
        display: flex;
        border-top: 1px solid var(--line);
        background: var(--surface);
        box-shadow: 0 -6px 20px rgba(16, 42, 67, .10);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-actions a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        padding: var(--s2);
        border-left: 1px solid var(--line);
        font-size: .92rem;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-actions a:first-child { border-left: 0; background: var(--gold); color: var(--navy); }

    /* 고정 바가 푸터와 폼 버튼을 가리지 않도록 아래 여백을 준다. */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
    .hero {
        background-image:
            linear-gradient(to bottom, rgba(10, 22, 34, .55) 0%, rgba(10, 22, 34, .74) 45%, rgba(10, 22, 34, .94) 100%),
            url("../img/hero/walk-crowd-960.jpg");
    }
}

/* 태블릿과 작은 노트북은 1920 원본을 받을 이유가 없다. 오버레이는 기본값을 그대로 쓴다. */
@media (min-width: 701px) and (max-width: 1439px) {
    .hero {
        background-image:
            linear-gradient(to bottom, rgba(10, 22, 34, .50) 0%, rgba(10, 22, 34, .70) 45%, rgba(10, 22, 34, .92) 100%),
            url("../img/hero/walk-crowd-1440.jpg");
    }
}

@media (max-width: 360px) {
    .new-window-visible { display: none; }
}

@media (min-width: 621px) {
    .site-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--s5);
        padding-block: 0;
    }

    nav { width: auto; justify-content: flex-end; gap: var(--s5); font-size: .9rem; }

    .content-section { padding-block: var(--s8); }
    .page-intro { padding: var(--s8) max(var(--pad), calc((100% - var(--measure)) / 2 + var(--pad))); }

    .fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .notice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .consent-terms > div,
    .spec-list > div,
    .details dl div, .payment dl div, .status dl div {
        grid-template-columns: 148px 1fr;
        gap: var(--s5);
    }

    .choice-row { flex-direction: row; }
    .choice-row label { flex: 1; }

    /* 단체 신청은 인원이 많을수록 세로가 길어진다. 넓은 화면에서는 두 칸씩 배치한다. */
    .participant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
    .participant-heading { grid-column: 1 / -1; }
}

@media (min-width: 760px) {
    .course-grid, .preparation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .location-panel { grid-template-columns: minmax(0, 1fr) auto; }
    .event-navigation { justify-content: center; }
}