/* 글꼴은 scripts/landing-fonts.py 가 이 페이지에 쓰는 글자만 잘라 만든다 */
@font-face { font-family: 'Gowun Batang'; src: url('/fonts/gowun-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gowun Batang'; src: url('/fonts/gowun-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'East Sea Dokdo'; src: url('/fonts/dokdo.woff2') format('woff2'); font-display: swap; }
:root { --paper: #EFE6D2; --ink: #1C1A17; --seal: #A82A1A; --sub: #574F44; --gutter: 16px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { position: relative; color: var(--ink); font: 400 20px/1.8 'Gowun Batang', 'AppleMyungjo', 'Noto Serif KR', serif; word-break: keep-all; overflow-wrap: break-word; overflow-x: hidden; }
/* 앱처럼 바탕 그림은 화면에 붙어 있고 글만 지나간다 */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--paper) url('/img/paper-tall.webp') center bottom / cover no-repeat; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--seal); outline-offset: 3px; }

.hero { display: grid; gap: 18px; padding: max(20px, env(safe-area-inset-top)) var(--gutter) 40px; }
.hero h1 img { width: min(82%, 340px); margin: 0 auto; }
.hero-words { display: contents; }
.hero h1, .line { text-align: center; }
.hero h1 { margin-bottom: -14px; }
.line { font-size: 24px; font-weight: 700; line-height: 1.5; }
.hero-board { order: 3; }
.promo { order: 5; font-size: 20px; }
.hero .stores { order: 4; }

/* 판: 돌은 site.js 가 한 수씩 놓는다. 좌표는 % 라 어떤 크기에서도 칸에 맞는다 */
.board { position: relative; aspect-ratio: 1; max-width: 640px; margin: 0 auto; }
.board img { width: 100%; }
.stone { position: absolute; width: 6.43%; aspect-ratio: 1; transform: translate(-50%, -50%); background: center / 100% 100% no-repeat; }
.stone.b { background-image: url('/img/stone-b.webp'); }
.stone.w { background-image: url('/img/stone-w.webp'); }
.stone.on { animation: put .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes put { from { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.mark-last { position: absolute; width: 1.44%; aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--seal); }
.mark-better { position: absolute; width: 5.8%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2.5px dashed var(--seal); border-radius: 50%; }
figcaption { min-height: 3.6em; margin-top: 10px; text-align: center; font-size: 20px; line-height: 1.6; color: var(--seal); font-weight: 700; opacity: 0; transition: opacity .5s; }
figcaption.on { opacity: 1; }

.stores { display: grid; gap: 12px; width: 100%; max-width: 420px; margin: 0 auto; }
.soon { grid-column: 1 / -1; padding: 6px 0; text-align: center; font-size: 21px; font-weight: 700; line-height: 1.6; }
.store { display: grid; place-items: center; min-height: 72px; padding: 10px 16px; border-radius: 12px; background: var(--ink) url('/img/ink.webp') center / 100% 100% no-repeat; color: var(--paper); font-size: 22px; font-weight: 700; text-decoration: none; }
.store.other { background: none; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

.part { display: grid; gap: 26px; padding: 44px var(--gutter); }
.words { max-width: 34em; }
h2 { font: 400 60px/1.1 'East Sea Dokdo', 'Gowun Batang', serif; margin-bottom: 14px; }
h3 { font: 400 42px/1.1 'East Sea Dokdo', 'Gowun Batang', serif; margin: 28px 0 8px; }
.words p + p { margin-top: 12px; }
.words .plain { font-weight: 700; }
ul { list-style: none; display: grid; gap: 12px; }
li { padding-left: 1.1em; text-indent: -1.1em; }
li::before { content: ''; display: inline-block; width: .42em; height: .42em; margin: 0 .68em .14em 0; background: var(--ink); border-radius: 50%; }
.rules { display: grid; gap: 14px; margin-bottom: 18px; }
dt { font-weight: 700; }
.shots { display: flex; gap: 12px; justify-content: center; }
.shots img { width: min(76%, 320px); box-shadow: 0 0 0 1px rgba(28, 26, 23, .55); }
.two-shots .shots img { width: calc(50% - 6px); }

.last { display: grid; gap: 18px; justify-items: center; padding: 48px var(--gutter) 40px; }
.last > img { width: min(70%, 300px); }
footer { display: grid; gap: 4px; padding: 16px var(--gutter) max(32px, env(safe-area-inset-bottom)); text-align: center; color: var(--sub); font-size: 19px; }
footer a { display: inline-block; min-height: 44px; padding: 6px 4px; }

@media (min-width: 720px) {
  body { font-size: 21px; }
  .hero { padding: 36px 40px 56px; }
  .hero h1 img { width: 420px; }
  .stores { grid-template-columns: 1fr 1fr; max-width: 640px; }
  .part { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; max-width: 1120px; margin: 0 auto; padding: 64px 40px; }
  .part.flip .shots { order: -1; }
  .shots img { width: 300px; }
  h2 { font-size: 76px; }
}
@media (min-width: 1100px) {
  body { font-size: 22px; }
  body::before { background-image: url('/img/paper-wide.webp'); }
  /* 넓은 화면: 왼쪽 제목 · 오른쪽 큰 판 */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; max-width: 1360px; min-height: min(100vh, 960px); margin: 0 auto; padding: 32px 64px; }
  .hero-words { display: block; }
  .hero h1, .line { text-align: left; }
  .hero h1 { margin: 0 0 6px -40px; }
  .hero h1 img { width: min(100%, 600px); margin: 0; }
  .line { font-size: 34px; margin-bottom: 14px; }
  .promo { font-size: 23px; margin-bottom: 30px; max-width: 28em; }
  .hero .stores { margin: 0; }
  .hero .soon { text-align: left; }
  .hero-board { order: 0; }
  .board { max-width: min(640px, calc(100vh - 200px)); }
  .two-shots .shots img { width: calc(50% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .stone.on { animation: none; }
  figcaption { transition: none; }
}