/* 없던연구소 사이트 공통 모습: 첫 화면(세없겜·세없앱 고르기), 세없겜 오락실, 세없앱이 함께 쓴다.
   밤의 선반. 게임·앱마다 포스터 카드 한 장(큰 그림 · 장르 딱지 · 이름 · 한 줄 · 단추), 다음 자리는 점선 카드.
   2026-10-24 사용자 "글이 너무 주저리주저리 많고 게임 종류가 한눈에 안 보인다" → 긴 소개·조작법·주의 목록을 빼고(게임 안에서 알려 준다),
   폰에서도 카드를 두 줄로 나란히 놓아 첫 화면에 다 보이게. 공통 안내는 맨 아래 한 줄.
   게임 화면 바탕과 같은 짙은 보라로 한 가지 모습만 쓴다 (들어갈 때 화면이 이어지게) */
:root {
  --night: #1e1620;
  --shelf: #2a1f2c;
  --line: #4a3a4c;
  --cream: #fff6e3;
  --mute: #c9b8c6;
  --gold: #ffd76a;
  --gold-ink: #3a2633;
  --leaf: #9be27a;
  --sky: #8fc8ee;
  --coral: #ff9f6e;
  --display: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: dark;
}
html, body { background: var(--night); color: var(--cream); margin: 0; }
body {
  font-family: var(--body); font-size: 1rem; line-height: 1.5; word-break: keep-all;   /* 좁은 카드에서 "용사"가 "용/사"로 쪼개지지 않게 낱말 단위로 줄을 바꾼다 */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 22px 36px;
}
.wrap { max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }

header { display: grid; gap: 2px; }
.back { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -4px; font-family: var(--display); font-size: 0.95rem; color: var(--mute); text-decoration: none; }
.back:hover { color: var(--cream); }
.back:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; border-radius: 6px; }
.sign { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--gold); }
.sign i { width: 10px; height: 10px; background: var(--gold); box-shadow: 14px 0 0 var(--leaf), 28px 0 0 var(--sky); margin-right: 28px; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.15; margin: 0; }
header p { margin: 0; color: var(--mute); }

/* 카드: 폰은 두 줄, 넓은 화면은 세 줄 이상 */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 640px) { .cards { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

.card { display: flex; flex-direction: column; min-width: 0; background: var(--shelf); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; transition: transform 0.08s, border-color 0.15s; }
.card:hover { border-color: var(--gold); }
.card:active { transform: translateY(2px); }
.card:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.cover { position: relative; aspect-ratio: 4 / 5; background: #120d14; overflow: hidden; }
.cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover .pixel { image-rendering: pixelated; }
.new { position: absolute; top: 8px; left: 8px; z-index: 3; font-family: var(--display); font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }

.info { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 10px 12px 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-family: var(--display); font-size: 0.8rem; line-height: 1.5; padding: 0 9px; border-radius: 999px; color: var(--night); }
.t-action { background: var(--coral); }
.t-climb { background: var(--gold); }
.t-farm { background: var(--leaf); }
.t-mystery { background: var(--sky); }
.t-coop { background: #f4a6c8; }
.t-office { background: #9ad7b0; }
.t-book { background: #c7b6f2; }
.info h2 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin: 2px 0 0; overflow-wrap: anywhere; }
.hook { margin: 0; font-size: 0.92rem; line-height: 1.4; }
.meta { margin: 0; font-size: 0.8rem; color: var(--mute); }
.play { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; background: var(--gold); color: var(--gold-ink); font-family: var(--display); font-size: 1.15rem; box-shadow: 0 4px 0 #b8863a; }
.card:active .play { transform: translateY(3px); box-shadow: 0 1px 0 #b8863a; }

.soon { border: 2px dashed var(--line); border-radius: 16px; display: grid; place-content: center; gap: 4px; padding: 20px 12px; text-align: center; color: var(--mute); font-size: 0.85rem; min-height: 180px; }
.soon strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--cream); }

footer { margin: 0; color: var(--mute); font-size: 0.85rem; text-align: center; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) { .card, .card:active .play { transition: none; transform: none; } }

/* 2026-11-01 소개·연락처, 개인정보처리방침 같은 글 페이지와 바닥의 링크 */
.doc { display: grid; gap: 12px; }
.doc section { background: var(--shelf); border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.doc h2 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; margin: 0 0 6px; }
.doc p { margin: 0 0 8px; }
.doc p:last-child { margin-bottom: 0; }
.doc ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.doc a { color: var(--gold); text-underline-offset: 3px; }
.doc .mail { font-family: var(--display); font-size: 1.15rem; }
footer .links { margin-top: 6px; }
footer .links a { color: var(--mute); text-underline-offset: 3px; }
footer .links a:hover { color: var(--cream); }