/* 게임 문의·개인정보 페이지 공통 모양 — 게임 화면 그대로: 타이틀 그림 + 나무 액자 패널 + 리본 제목 + 놋쇠 버튼
   게임마다 다른 것(배경색·빛 색·그림)은 각 페이지의 <body style> 과 <img> 로 넣는다. 여기는 손대지 않아도 된다. */
@font-face { font-family: Galmuri11; font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/galmuri@2.40.3/dist/Galmuri11.woff2) format("woff2"); }

:root {
  --px: 2px;                       /* 도트 1칸 크기 — 폰 2배, 넓은 화면 3배 */
  --ink: #140d0f; --wood-hi: #6b4630; --wood-lo: #2e1d13;
  --gold: #d8ad52; --gold-hi: #f2d06b;
  --text: #ecdfc6; --dim: #a8977c;
  --night: #15132a;                /* 페이지 바탕 — 게임마다 body style 로 바꿈 */
  --glow: transparent;             /* 맨 위 가운데 빛 — 게임마다 body style 로 바꿈 */
  --pix: Galmuri11, ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Hiragino Sans", "Noto Sans KR", "Noto Sans JP", sans-serif;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --px: 3px; } }

* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--text); font: 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
[lang=ja] { font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; word-break: auto-phrase; }
[lang=ko] { font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; word-break: keep-all; }
a { color: var(--gold-hi); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* 맨 위 — 게임 타이틀 화면처럼 */
.hero { position: relative; isolation: isolate; min-height: clamp(380px, 60vw, 600px); display: flex; align-items: flex-end;
  justify-content: center; text-align: center; padding: 48px 16px 36px; overflow: hidden;
  background: radial-gradient(ellipse 55% 45% at 50% 42%, var(--glow), transparent 70%); }
.hero.small { min-height: 0; padding-top: 56px; }
.hero-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  image-rendering: pixelated; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, transparent 25%, color-mix(in srgb, var(--night) 60%, transparent) 62%, var(--night)); }
.app-icon { width: 60px; height: 60px; border-radius: 22%;
  box-shadow: 0 0 0 var(--px) var(--ink), 0 0 0 calc(2 * var(--px)) var(--gold), 0 10px 24px rgba(0, 0, 0, .6); }
.app-icon.big { width: 140px; height: 140px; box-shadow: 0 0 60px var(--glow); }
.hero.small .app-icon.big { width: 96px; height: 96px; }
.title { margin: 14px 0 6px; line-height: 0; }
.logo { width: calc(165 * var(--px)); height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 calc(2 * var(--px)) 0 rgba(0, 0, 0, .55)); }
.hero.small .logo { width: calc(110 * var(--px)); }
.title-text { font: 36px/1.2 var(--pix); color: var(--text); text-shadow: 0 3px 0 var(--ink); }
.title-text em { font-style: normal; color: #e0483c; }
.aka { font: 12px/1.6 var(--pix); color: var(--dim); margin: 6px 0 0; }
.kicker { font: 12px/1.6 var(--pix); letter-spacing: .18em; color: var(--gold-hi); text-shadow: 0 2px 0 var(--ink); margin: 14px 0 20px; }
.kicker span { white-space: nowrap; }

/* 언어 버튼 — 게임의 나무 버튼 */
.langs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.langs a { font: 12px/1 var(--pix); color: var(--text); text-decoration: none; padding: 8px 14px 6px;
  border: solid transparent; border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px));
  border-image: url(kit/btn.png) 2 2 3 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)) stretch;
  image-rendering: pixelated; }
.langs a[aria-current] { border-image-source: url(kit/btn_brass.png); color: var(--ink); }
.langs a:hover { filter: brightness(1.25); }

/* 한 언어만 — lang.js 가 <html data-lang> 을 정한다. JS 가 없으면 이 규칙이 안 걸려서 셋 다 보인다 */
[data-lang=en] .card:not([lang=en]), [data-lang=ko] .card:not([lang=ko]), [data-lang=ja] .card:not([lang=ja]) { display: none; }
.langs a:active { transform: translateY(var(--px)); }

/* 언어마다 나무 액자 패널 하나 */
main { max-width: 760px; margin: 0 auto; padding: 40px 16px 8px; }
.card { position: relative; margin-bottom: calc(40px + 10 * var(--px)); padding: calc(6 * var(--px) + 22px) 18px 26px;
  border: calc(8 * var(--px)) solid transparent; border-image: url(kit/panel_dark.png) 8 / calc(8 * var(--px)) round;
  background: var(--wood-lo) padding-box; image-rendering: pixelated; }
@media (min-width: 720px) { .card { padding-left: 32px; padding-right: 32px; } }

/* 제목 — 패널 윗변에 걸친 리본 */
.card h2 { position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-50% - 4 * var(--px))); margin: 0;
  height: calc(19 * var(--px)); padding: 0 10px; white-space: nowrap;
  border: solid transparent; border-width: 0 calc(9 * var(--px));
  border-image: url(kit/ribbon.png) 0 9 fill / 0 calc(9 * var(--px)) round; image-rendering: pixelated;
  font: calc(12 * var(--px) - 12px) / calc(17 * var(--px)) var(--pix); color: var(--gold-hi); text-shadow: 0 var(--px) 0 var(--ink); }

.lead { margin: 0 0 18px; font-size: 17px; }

/* 메일 — 놋쇠 버튼 */
.mail { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink);
  max-width: 420px; margin: 0 auto; padding: 10px 16px 8px; border: solid transparent;
  border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px));
  border-image: url(kit/btn_brass.png) 2 2 3 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)) stretch;
  image-rendering: pixelated; }
.mail:hover { filter: brightness(1.1); }
.mail:active { transform: translateY(var(--px)); }
.mail-label { font: 12px/1.3 var(--pix); color: #3a261a; }
.mail-addr { font: 700 18px/1.3 var(--sans); overflow-wrap: anywhere; }
.note { text-align: center; color: var(--dim); font-size: 14px; margin: 10px 0 0; }
.date { color: var(--dim); font-size: 14px; margin: 0 0 14px; }

/* 작은 제목 — 뒤로 점선이 이어짐 */
h3 { display: flex; align-items: center; gap: 10px; margin: 30px 0 10px; font: 12px/1.5 var(--pix); color: var(--gold); }
h3::after { content: ""; flex: 1; min-width: 24px; height: var(--px);
  background: repeating-linear-gradient(90deg, var(--wood-hi) 0 var(--px), transparent 0 calc(2 * var(--px))); }

ul { list-style: none; padding: 0; margin: 0; }
li { position: relative; padding-left: 20px; }
li + li { margin-top: 4px; }
li::before { content: ""; position: absolute; left: 3px; top: .72em; width: calc(2 * var(--px)); height: calc(2 * var(--px));
  background: var(--gold); box-shadow: var(--px) var(--px) 0 var(--ink); }

details { background: rgba(0, 0, 0, .22); border: var(--px) solid #1e140d; box-shadow: inset 0 var(--px) 0 #3a261a; padding: 12px 14px; }
details + details { margin-top: 8px; }
summary { cursor: pointer; list-style: none; display: flex; gap: 10px; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-family: var(--pix); color: var(--gold-hi); }
details[open] summary::before { content: "−"; }
details p { margin: 8px 0 0 22px; color: var(--dim); }

.more { display: inline-block; margin-top: 26px; font: 12px/1 var(--pix); text-decoration: none; }
.more::after { content: " →"; }
.more.back::after { content: none; }
.more.back::before { content: "← "; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

footer { text-align: center; font: 12px/1 var(--pix); color: #6e5c49; padding: 0 16px 56px; }