@font-face { font-family: Pretendard; src: url("/fonts/PretendardVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: NanumBrush; src: url("/fonts/NanumBrushScript-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --paper:#f5ecd8; --paper-deep:#e8d9b9; --ink:#281d17; --muted:#66574b; --red:#9e352e; --green:#235c4d; --gold:#b17a27; --line:rgba(64,43,28,.18); --font:Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
* { box-sizing: border-box; }
html { background: #e9dcc2; color: var(--ink); font-family: var(--font); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
.paper { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-color: var(--paper); background-image: repeating-linear-gradient(3deg,rgba(74,50,29,.022) 0 1px,transparent 1px 5px),repeating-linear-gradient(93deg,rgba(255,255,255,.12) 0 1px,transparent 1px 8px),radial-gradient(circle at 16% 8%,rgba(255,255,255,.68),transparent 35%),radial-gradient(circle at 84% 30%,rgba(177,122,39,.08),transparent 33%); }
.letters { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.topbar { width: min(1120px,calc(100% - 36px)); height: 68px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font-weight: 850; letter-spacing: -.03em; }
button,.start { font: 800 14px var(--font); }
.share { min-height: 42px; padding: 0 17px; border: 1px solid rgba(35,92,77,.45); border-radius: 999px; color: var(--green); background: rgba(255,255,255,.42); cursor: pointer; }
.share:focus-visible,.start:focus-visible,.game-card:focus-visible,footer a:focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }
main { width: min(1120px,calc(100% - 36px)); margin: 0 auto; }
.hero { min-height: 560px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; padding: 52px 0 36px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 16px; color: var(--green); font-size: 14px; font-weight: 850; letter-spacing: .06em; }
h1 { margin: 0; max-width: 680px; font: 400 clamp(56px,7.2vw,92px)/.96 NanumBrush,var(--font); letter-spacing: -.02em; color: #3c261b; }
h1 span { color: var(--red); }
.lead { max-width: 530px; margin: 24px 0 28px; color: #51443a; font-size: 17px; font-weight: 580; line-height: 1.75; word-break: keep-all; }
.start { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 22px; border-radius: 14px; color: #fff; background: var(--green); text-decoration: none; box-shadow: 0 12px 28px -14px rgba(24,72,59,.75); }
.start span { font-size: 20px; }
.king-wrap { position: relative; display: grid; place-items: center; min-height: 450px; }
.king-wrap picture { position: relative; display: block; width: min(100%,480px); filter: drop-shadow(0 24px 20px rgba(55,35,20,.17)); }
.king-wrap img { display: block; width: 100%; height: auto; }
.sun { position: absolute; width: min(84%,410px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(158,53,46,.22); background: rgba(228,190,111,.24); box-shadow: inset 0 0 0 18px rgba(255,255,255,.12); }
.dancheong { height: 6px; margin: 0 0 58px; border-radius: 99px; background: linear-gradient(90deg,var(--red) 0 18%,#d6a13c 18% 35%,var(--green) 35% 65%,#d6a13c 65% 82%,var(--red) 82%); box-shadow: 0 1px 0 rgba(255,255,255,.7); }
.games { padding-bottom: 76px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-head p { margin: 0 0 7px; color: var(--red); font-size: 13px; font-weight: 850; }
h2 { margin: 0; font-size: clamp(25px,3vw,34px); letter-spacing: -.04em; }
.section-head > span { color: var(--muted); font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.game-card { display: grid; grid-template-columns: minmax(145px,40%) 1fr; min-height: 270px; overflow: hidden; color: var(--ink); background: rgba(255,252,244,.78); border: 1px solid var(--line); border-radius: 24px; text-decoration: none; box-shadow: 0 18px 42px -32px rgba(48,30,18,.65); transition: transform .2s ease,box-shadow .2s ease; }
.game-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(48,30,18,.75); }
.thumb { position: relative; display: block; overflow: hidden; background: linear-gradient(145deg,#243b36,#9c4d39); }
.pang-card .thumb { background: linear-gradient(145deg,#aa7132,#315f51); }
.omok-card .thumb { background: linear-gradient(145deg,#e1c28b,#713c31); }
.thumb::after { content:"한글날 놀이"; position:absolute; inset:auto 12px 12px; color:rgba(255,255,255,.78); font:400 28px NanumBrush,var(--font); text-align:center; }
.thumb img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card-copy { display: flex; flex-direction: column; padding: 28px 25px 24px; }
.card-copy small { color: var(--green); font-size: 12px; font-weight: 850; }
.card-copy strong { margin: 8px 0 12px; font-size: 24px; line-height: 1.25; letter-spacing: -.04em; word-break: keep-all; }
.card-copy > span { color: var(--muted); font-size: 14px; line-height: 1.65; word-break: keep-all; }
.card-copy b { margin-top: auto; padding-top: 18px; color: var(--red); font-size: 14px; }
footer { display: flex; justify-content: space-between; gap: 24px; width: min(1120px,calc(100% - 36px)); margin: 0 auto; padding: 26px 0 calc(34px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
footer p { margin: 0; } footer a { color: #4e443b; font-weight: 750; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 5; padding: 11px 16px; border-radius: 999px; color: #fff; background: #2e2722; font-size: 13px; font-weight: 750; opacity: 0; transform: translate(-50%,10px); pointer-events: none; transition: opacity .18s,transform .18s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.copy-helper { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width:900px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .topbar,main,footer { width:min(100% - 28px,560px); } .topbar { height:58px; } .hero { min-height:0; grid-template-columns:1fr; gap:0; padding:34px 0 28px; text-align:center; } .hero-copy { display:flex; flex-direction:column; align-items:center; } .eyebrow { margin-bottom:10px; font-size:12px; } h1 { font-size:clamp(50px,15vw,68px); } .lead { margin:18px 4px 20px; font-size:15px; line-height:1.65; } .king-wrap { order:-1; min-height:0; height:250px; margin-bottom:8px; } .king-wrap picture { width:280px; } .sun { width:230px; } .dancheong { margin-bottom:38px; } .section-head { align-items:start; } .section-head > span { display:none; } .cards { grid-template-columns:1fr; gap:16px; } .game-card { grid-template-columns:36% 1fr; min-height:220px; border-radius:20px; } .card-copy { padding:22px 18px 19px; } .card-copy strong { font-size:21px; } footer { flex-direction:column; gap:10px; } }
@media (max-width:390px) { .topbar,main,footer { width:calc(100% - 24px); } .hero { padding-top:26px; } .king-wrap { height:226px; } .king-wrap picture { width:250px; } .sun { width:205px; } h1 { font-size:52px; } .start { width:100%; justify-content:center; } .game-card { grid-template-columns:34% 1fr; min-height:214px; } .card-copy { padding:20px 15px 17px; } .card-copy strong { font-size:19px; } .card-copy > span { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .game-card,.toast { transition:none; } .game-card:hover { transform:none; } }

/* 판정 보정(클로드): 세종대왕 발과 문구 겹침 해소 */
@media (max-width:760px) { .king-wrap { margin-bottom: 20px; } }
@media (max-width:390px) { .king-wrap { height: 256px; } .king-wrap picture { width: 226px; } }