@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ── About 페이지: hero.png(나무·캐릭터 일러스트)의 실제 픽셀 색을 뽑아
   맞춘 뉴트럴 톤. 캐릭터의 웜블랙(#2c2422)을 텍스트로, 나무/풀의
   중간 회색(#9d9d9d)을 서브 텍스트로 그대로 가져와 일러스트와 UI가
   한 장면처럼 이어지게 한다. ── */
:root {
  --text:   #2c2422;
  --sub:    #93908a;
  --paper:  #f7f6f4;
  --ring:   rgba(44, 36, 34, 0.12);

  --gs-page-bg: #dfe2e5;
  --gs-card-bg: #f5f6f8;
  --gs-card-border: rgba(44, 36, 34, 0.08);
  --gs-card-shadow: rgba(44, 36, 34, 0.18);
  --gs-card-radius: 26px;
  --gs-max-width: 480px;
  /* in-the-dark(9:16 아레나)과 카드 높이를 맞춰 방을 옮겨도 프레임 크기가 흔들리지 않게 함.
     --gs-max-width는 shared/game-shell.css의 모바일 분기점(<=560px)에서 100vw로
     바뀌므로, 그 값을 그대로 곱하면 실제 .game-shell 폭과 항상 일치한다. */
  --gs-card-min-height: calc(var(--gs-max-width) * 16 / 9);

  --gh-accent: rgba(44, 36, 34, 0.08);
  --gh-accent-2: rgba(44, 36, 34, 0.14);
  --gh-on-accent: var(--text);
  --gh-surface: rgba(44, 36, 34, 0.08);
  --gh-surface-hover: rgba(44, 36, 34, 0.15);
  --gh-icon: rgba(44, 36, 34, 0.65);
  --gh-text: #93908a;
  --gh-text-strong: #2c2422;
  --gh-divider: rgba(44, 36, 34, 0.12);
  --gh-font: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* game-header.css 기본값은 in-the-dark의 다크 테마라, 로케일 팝업(.gh-locale-*)이
     오버라이드 없이는 이 페이지의 라이트 톤과 어긋난다. */
  --gh-modal-bg: var(--gs-card-bg);
  --gh-modal-border: var(--ring);
  --gh-body-text: var(--text);
  --gh-cancel-bg: rgba(44, 36, 34, 0.06);
  --gh-cancel-bg-hover: rgba(44, 36, 34, 0.12);
}

/* box-sizing 리셋이 없으면 .about-card의 padding-top이 min-height 위에
   따로 더해져서 카드가 다른 방들보다 눈에 띄게 길어진다. */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--gh-font);
  -webkit-font-smoothing: antialiased;
}

.about-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 카드 높이가 in-the-dark 비율에 맞춰 고정되어(--gs-card-min-height) 내용보다
     훨씬 크다. 헤더 아이콘과 살짝 겹치는 걸 감수하고, 히어로+본문 전체를
     카드 세로 가운데에 놓는다. */
  justify-content: center;
}

/* 히어로: GameHeader 아이콘이 위 여백에 뜨고, 그림은 그 아래부터 시작한다.
   카드 세로 여백에 이미 여유(min-height 바닥값)가 있어서, 이미지 폭을
   카드에 꽉 채우고 높이는 원본 비율 그대로 따라가게 둔다. */
.about-hero {
  background: var(--gs-card-bg);
}

.about-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

.about-content {
  display: flex;
  flex-direction: column;
  padding: 16px 30px 28px;
}

.about-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 4px 28px;
  text-align: center;
}

.about-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--sub);
}

.about-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.about-welcome {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}

.about-divider {
  width: 40px;
  height: 1px;
  margin: 4px 0;
  background: var(--ring);
}

.about-text {
  margin: 0;
  max-width: 320px;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--sub);
  white-space: pre-line;
}

.about-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.about-contact-kicker {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--sub);
}

.about-contact-link.gh-cta {
  border: 0;
  font-size: 0.86rem;
  padding: 12px 26px;
}

.about-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 20;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--text);
  color: var(--paper);
  font-family: var(--gh-font);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.about-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}