:root { --ink:#201613; --paper:#f6f3ee; --red:#d71920; --blue:#245fa8; --line:rgba(32,22,19,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"Noto Sans KR",sans-serif; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.8rem 1rem; background:#fff; border-radius:.5rem; }
.skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:blur(14px); }
.header-inner { width:min(1180px,calc(100% - 40px)); min-height:78px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand img { display:block; width:min(310px,48vw); height:auto; }
nav { display:flex; align-items:center; gap:1.8rem; font-size:.92rem; font-weight:700; }
nav a:hover { color:var(--red); }
.header-actions { display:flex; align-items:center; gap:.55rem; }
.header-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.65rem 1rem; border-radius:999px; color:#fff; font-size:.82rem; font-weight:900; white-space:nowrap; }
.header-login { background:var(--ink); }
.header-volunteer { background:var(--blue); }
.header-inactive { opacity:.48; cursor:not-allowed; }
.hero { width:min(1180px,calc(100% - 40px)); min-height:590px; margin:auto; display:grid; grid-template-columns:1.35fr .65fr; align-items:center; gap:3rem; padding:5rem 0; overflow:hidden; }
.eyebrow,.section-kicker { margin:0 0 1rem; color:var(--red); font-size:.78rem; font-weight:900; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(3rem,4.7vw,4.8rem); line-height:1.08; letter-spacing:-.055em; }
.title-line { display:block; white-space:nowrap; }
.hero-description { max-width:650px; margin:2rem 0 0; color:#685e59; font-size:1.12rem; line-height:1.8; }
.hero-links,.competition-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:.85rem 1.25rem; border:1px solid transparent; border-radius:999px; font-weight:800; text-align:center; }
.button-primary { color:#fff; background:var(--red); }
.button-blue { color:#fff; background:var(--blue); }
.button-secondary { border-color:var(--line); background:#fff; }
.button-disabled { color:#8b837f; border-color:#ddd8d3; background:#e9e5e1; cursor:not-allowed; }
.hero-mark { display:grid; grid-template-columns:repeat(5,1fr); transform:rotate(-8deg); font-size:clamp(3.5rem,8vw,7rem); font-weight:1000; letter-spacing:-.12em; }
.hero-mark span { display:grid; place-items:center; aspect-ratio:.68; color:white; background:var(--ink); border-right:1px solid rgba(255,255,255,.25); }
.hero-mark span:first-child { background:var(--red); }
.hero-mark span:last-child { background:var(--blue); }
.section { width:min(1180px,calc(100% - 40px)); margin:auto; padding:6rem 0; scroll-margin-top:80px; }
.section-panel { width:100%; padding-inline:max(20px,calc((100% - 1180px)/2)); background:#fff; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; }
.section-heading h2,.contact h2 { margin:0; font-size:clamp(2.1rem,4vw,3.5rem); letter-spacing:-.04em; }
.section-heading>p { max-width:430px; margin:0; color:#746b66; line-height:1.7; }
.competition-card { overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 24px 60px rgba(55,40,33,.08); }
.competition-main { padding:2.4rem 2.5rem 2rem; }
.competition-main h3 { margin:1rem 0 .7rem; font-size:clamp(1.8rem,4vw,3.1rem); letter-spacing:-.04em; }
.competition-main p { margin:0; color:#706661; line-height:1.7; }
.status,.pin { display:inline-flex; border-radius:999px; padding:.42rem .7rem; font-size:.75rem; font-weight:900; }
.status-upcoming { color:#8a4a00; background:#ffedbf; }
.status-open { color:#fff; background:var(--red); }
.competition-card dl { display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:1.6rem 2.5rem; border-block:1px solid var(--line); background:#faf8f5; }
.competition-card dl div { padding-right:1.4rem; }
.competition-card dt { color:#877d77; font-size:.78rem; font-weight:700; }
.competition-card dd { margin:.55rem 0 0; font-weight:800; }
.competition-actions { margin:0; padding:1.5rem 2.5rem 2.1rem; }
.notice-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; }
.notice-layout h3 { margin:0 0 1.2rem; font-size:1.2rem; }
.notice-list,.document-list { border-top:2px solid var(--ink); }
.notice-item { padding:1.5rem 0; border-bottom:1px solid var(--line); }
.notice-item>div { display:flex; align-items:center; gap:.6rem; color:#867b75; font-size:.78rem; }
.pin { color:#fff; background:var(--red); padding:.25rem .55rem; }
.notice-item h4 { margin:.8rem 0 .45rem; font-size:1.08rem; }
.notice-item p { margin:0; color:#716762; font-size:.92rem; line-height:1.65; }
.document-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.file-type { display:grid; place-items:center; width:50px; aspect-ratio:1; border-radius:12px; color:#fff; background:var(--blue); font-size:.72rem; font-weight:900; }
.document-item strong,.document-item small { display:block; }
.document-item small { margin-top:.35rem; color:#897f79; }
.download { font-size:1.5rem; }
.empty-state { margin:0; padding:2rem 1rem; color:#817771; border-bottom:1px solid var(--line); text-align:center; line-height:1.7; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:5rem; padding:5rem max(20px,calc((100% - 1180px)/2)); color:#fff; background:var(--ink); }
.section-kicker-light { color:#ff7b80; }
.contact p { max-width:530px; color:#c8bfbb; line-height:1.7; }
.contact-links { display:grid; gap:.8rem; }
.contact-links a { padding:1.2rem 1.3rem; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(255,255,255,.06); }
.contact-links span,.contact-links strong { display:block; }
.contact-links span { color:#aaa09c; font-size:.75rem; }
.contact-links strong { margin-top:.35rem; font-size:1.08rem; }
footer { padding:2rem max(20px,calc((100% - 1180px)/2)); color:#a99f9a; background:#120d0b; }
footer>div { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.footer-logo { width:220px; height:auto; filter:brightness(0) invert(1); }
footer p { font-size:.75rem; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
@media (max-width:800px) { .title-line { white-space:normal; } nav { display:none; } .hero { min-height:auto; grid-template-columns:1fr; gap:3rem; padding:4rem 0; } .hero-mark { max-width:480px; } .section-heading,.contact,footer>div { align-items:start; flex-direction:column; } .section-heading { display:flex; } .notice-layout,.contact { grid-template-columns:1fr; gap:3rem; } .competition-card dl { grid-template-columns:1fr; gap:1.2rem; } }
@media (max-width:520px) { .header-inner { flex-wrap:wrap; padding-block:.7rem; } .header-actions { width:100%; } .header-button { flex:1; } .header-inner,.hero,.section { width:min(100% - 28px,1180px); } .header-inner { min-height:68px; } .brand img { width:230px; max-width:72vw; } .hero { padding:3rem 0 4rem; } h1 { font-size:clamp(2.65rem,14vw,4rem); } .hero-links,.competition-actions { flex-direction:column; } .button { width:100%; } .competition-main,.competition-card dl,.competition-actions { padding-inline:1.25rem; } .section { padding-block:4.5rem; } .section-panel { padding-inline:14px; } .contact { padding:4rem 20px; } footer>div { display:flex; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }