/* 이면동 site. Colors follow the game's tokens (game/handoff/08_ART_BIBLE.md A2): Ink, Hanji, Violet, Gold, Cinnabar, Teal.
   System fonts only, so the pages load nothing from third parties. */
:root {
  --ink: #120e1a; --ink2: #1b1526; --hanji: #f2e8d1; --muted: #b3a8c4; --line: rgba(242, 232, 209, .14);
  --violet: #b07dff; --gold: #ffd47a; --cinnabar: #db382e; --teal: #3fd6c6;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--hanji);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }

/* documents: privacy, support, probability */
.doc main { max-width: 780px; margin: 0 auto; padding: 36px 16px 80px; }
.back { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; font-size: 14px; }
.back img { border-radius: 7px; }
.doc h1 { font-size: 30px; line-height: 1.3; margin: 36px 0 8px; }
.doc h2 { font-size: 20px; margin: 52px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--gold); }
.doc h3 { font-size: 16px; margin: 28px 0 6px; color: var(--violet); }
.lead { color: var(--muted); margin: 0 0 24px; }
p, li { color: rgba(242, 232, 209, .86); }
ul, ol { padding-left: 22px; }
.note { color: var(--muted); font-size: 14px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 8px; font-size: 14px; }
.toc a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }
.wrap { overflow-x: auto; margin: 10px 0 6px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.ladder td { white-space: nowrap; }
details { margin: 10px 0; }
summary { cursor: pointer; color: var(--gold); }
.lang { font-size: 14px; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 56px 0; }
footer { margin-top: 64px; color: var(--muted); font-size: 13px; }

/* landing */
.hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,14,26,.15) 30%, rgba(18,14,26,.92) 88%, var(--ink)); }
.hero .in { position: relative; z-index: 1; max-width: 1080px; width: 100%; margin: 0 auto; padding: 0 16px 48px; }
.hero .logo { width: min(340px, 70vw); filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.tagline { font-size: clamp(18px, 2.6vw, 24px); margin: 14px 0 6px; max-width: 34em; }
.sub { color: var(--muted); margin: 0; }
.section { max-width: 1080px; margin: 0 auto; padding: 56px 16px 0; }
.section h2 { font-size: 22px; margin: 0 0 12px; color: var(--gold); }
.story p { max-width: 40em; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.shots img { border-radius: 10px; border: 1px solid var(--line); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.links a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; }
.site-foot { max-width: 1080px; margin: 72px auto 0; padding: 24px 16px 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }