/* 게임투게더 웹사이트
   색·크기 값은 2026-08-16 현 사이트(우피)에서 getComputedStyle 로 실측한 것이다. */

@font-face {
  font-family: "Gmarket Sans";
  src: url("/assets/fonts/GmarketSansMedium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Gmarket Sans";
  src: url("/assets/fonts/GmarketSansBold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --content-width: 1000px;
  --content-padding: 96px;
  --text: #37352f;
  --muted: #787774;
  --accent: #d9730d;
  --callout-bg: #fdebec;
  --rule: #e9e9e7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Gmarket Sans", -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

/* 히어로 — 노션 페이지 커버. 높이 30vh, 중앙 크롭 (page_cover_position: 0.5) */
.hero {
  display: block;
  width: 100%;
  height: 30vh;
  object-fit: cover;
  object-position: center;
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 5px var(--content-padding) 78px;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 32px 0 24px;
}

.intro {
  margin: 0 0 24px;
  color: var(--muted);
  font-weight: 600;
}

.callout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 12px;
  border-radius: 4px;
  background: var(--callout-bg);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.callout strong { color: var(--accent); font-weight: 600; }
.callout-icon { flex: none; width: 20px; height: 20px; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 44px 0;
}

h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 24px;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
}
h3 em {
  color: var(--muted);
  font-style: italic;
}

/* GAMES
   슬라이드 값은 원본 우피 슬라이드 설정을 그대로 따랐다:
   ratio 1.78(16:9) · autoplay 3500ms · indicator #6196FF · backgroundColor #cdcdcd */
.game { margin: 0 0 40px; }

/* 타이틀 상태 배지. 서비스 중 / 개발 중 / 서비스 종료 */
.tag {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.tag-live { background: #e3f3e6; color: #1f6b32; }
.tag-dev  { background: #e8eefc; color: #2a4d9b; }
.tag-end  { background: #f1f0ee; color: #5f5e5a; }
/* 서비스 주체가 아니고 개발만 담당한 타이틀 — 서비스 상태와 구분한다 */
.tag-port { background: #f3f0fa; color: #534ab7; }

/* 한 줄 캐치프레이즈 + 장르·플랫폼·개발 단계 */
.pitch {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}
/* 주력 타이틀은 .pitch, 나머지는 .tagline — 여섯 개가 같은 크기면 주력이 안 보인다 */
.tagline {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #5f5e5a;
}
.spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0 0 12px;
  font-size: 15px;
}
.spec dt { color: var(--muted); }
.spec dd { margin: 0; }
.spec a { color: var(--accent); text-decoration: none; }
.spec a:hover { text-decoration: underline; }

.video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  margin: 0 0 12px;
  background: #cdcdcd;
}

.shots {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  background: #cdcdcd;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.shots::-webkit-scrollbar { display: none; }
.shots.dragging { scroll-snap-type: none; cursor: grabbing; }
.shots img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  scroll-snap-align: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* 슬라이드 위치 표시 점. 스크립트가 만든다.
   CSS ::scroll-marker 로 대체할 수 있으나 2026-08 기준 Safari 가 아직 지원하지 않는다. */
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
}
.dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
}
.dots button[data-on] { background: #6196ff; }

/* 원본(우피)은 노션 3분할 컬럼으로 배지 폭 205px·간격 79px 였다.
   배지가 4개(Steam·Google Play·App Store·ONE Store)로 늘어 한 줄에 안 들어가므로
   폭과 간격을 줄였다. 185*4 + 16*3 = 788px < 본문 폭 808px */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}
.badges img { display: block; width: 185px; height: auto; }

/* HISTORY */
.history { margin: 0 0 40px; }
.history dt {
  font-weight: 600;
  margin-top: 16px;
}
.history dd {
  margin: 4px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--text);
}

/* 원본 실측: 사진 3장이 각 239px, 컬럼 간격 46px (2026-08-16) */
.office {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
}
.office img { width: 100%; height: auto; }

/* RECRUIT */
.recruit-link { display: block; text-align: center; }
.recruit-link img { width: 400px; max-width: 100%; height: auto; }

/* CONTACT */
.map {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  background: #f5f4f2;
}
.contact {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 16px 0 0;
}
.contact dt { color: var(--text); }
.contact dd { margin: 0; }
.contact a { color: inherit; text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* 푸터 — 회사 정보와 법적 고지.
   상단 라인만 브랜드 주황이다. 배경을 주황으로 깔면 대비가 3.3:1 로 떨어지고
   (흰 글자 기준, AA 4.5:1 미달) 푸터가 페이지에서 가장 눈에 띄는 요소가 된다. */
footer {
  border-top: 3px solid var(--accent);
  padding: 26px var(--content-padding) 24px;
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
}
.footer-links a {
  color: var(--text);
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }
.footer-links a + a { border-left: 1px solid var(--rule); padding-left: 10px; }

.footer-info {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: #5f5e5a;
}
.footer-info a { color: inherit; text-decoration: none; }
.footer-info a:hover { text-decoration: underline; }

.footer-copy {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: #888780;
}

/* 하위 문서 페이지 (이용약관·개인정보처리방침·확률형 아이템 정보) */
.doc { padding-bottom: 40px; }
/* 언어 전환. 게임에서 언어를 잘못 받았을 때 이용자가 직접 바꿀 수 있어야 한다.
   회색 글자에 가운뎃점만 두면 누를 수 있는 것으로 안 보인다 — 칩 형태로 둔다.
   높이 30px 로 WCAG 2.5.8 터치 타깃 24px 를 넘긴다. */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 32px 0 20px;
}
.lang-switch a,
.lang-switch [aria-current] {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--rule);
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch a { color: #5f5e5a; background: #fff; }
/* hover 글자색은 브랜드 주황(#d9730d)이 아니라 어둡게 내린 값이다.
   연한 주황 배경 위에서 #d9730d 는 3.0:1 로 AA 미달이다. */
.lang-switch a:hover {
  color: #a85508;
  border-color: var(--accent);
  background: #fdf4ea;
}
.lang-switch [aria-current] {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  font-weight: 600;
}

/* 번역 대기 안내 */
.pending {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: #fdf4ea;
  font-size: 14px;
  line-height: 1.7;
}
.pending a { color: var(--accent); }

.doc-nav { margin: 0; font-size: 13px; }
.lang-switch + .doc-nav { margin-top: 0; }
.doc-nav a { color: var(--muted); text-decoration: none; }
.doc-nav a:hover { color: var(--accent); text-decoration: underline; }
.doc h1 { font-size: 28px; font-weight: 600; margin: 8px 0 8px; }
.doc > h1:first-child { margin-top: 32px; }
.doc .doc-meta { margin: 0 0 32px; font-size: 13px; color: var(--muted); }
.doc h2 { font-size: 18px; margin: 32px 0 12px; }
.doc p, .doc li { font-size: 15px; line-height: 1.8; }
.doc ul { padding-left: 20px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
.doc th, .doc td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; }
.doc th { background: #faf9f7; font-weight: 600; }
.doc .back { display: inline-block; margin: 24px 0 0; font-size: 14px; color: var(--accent); text-decoration: none; }
.doc .back:hover { text-decoration: underline; }

/* 확률 정보 표 (probability.html)
   레벨표는 11열이라 좁은 화면에서 본문 폭을 넘는다. .table-scroll 로 가로 스크롤만
   허용하고 표 자체는 줄이지 않는다 — 숫자가 줄바꿈되면 어느 등급의 값인지 읽기 어렵다. */
.doc h3 { font-size: 17px; font-weight: 600; margin: 36px 0 4px; }
.prob-note { margin: 4px 0; font-size: 13px; color: #5f5e5a; }
.prob-title { margin: 22px 0 6px; font-size: 15px; font-weight: 600; }
/* 상자 그룹 경계. 제목 크기가 모두 같아 선이 없으면 묶음이 바뀐 걸 못 알아본다.
   첫 그룹에는 붙지 않는다 (생성 스크립트가 두 번째 그룹부터 클래스를 준다). */
.prob-group {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.prob-sub { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #5f5e5a; }

.table-scroll { overflow-x: auto; margin: 0 0 8px; }

table.prob {
  border-collapse: collapse;
  font-size: 13px;
  margin: 0;
  min-width: 720px;
}
table.prob th,
table.prob td {
  border: 1px solid #dfe3e8;
  padding: 6px 10px;
  text-align: center;
  white-space: nowrap;
}
table.prob th { background: #eef2f7; font-weight: 600; }
table.prob tr > th:first-child { background: #f7f9fb; }
table.prob td { font-variant-numeric: tabular-nums; }

table.prob-narrow { min-width: 0; width: 100%; }
table.prob-mid { min-width: 0; }
table.prob-list { min-width: 560px; }
table.prob-list td.l { text-align: left; white-space: normal; line-height: 1.6; }

.prob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px 24px;
  margin: 0 0 8px;
}

@media (max-width: 720px) {
  :root { --content-padding: 20px; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  .hero { height: 22vh; }
  .pitch { font-size: 16px; }
  .spec { grid-template-columns: 1fr; gap: 2px; }
  .spec dd { margin: 0 0 8px; }
  .badges { gap: 10px; }
  .badges img { width: 148px; }
  .office { gap: 8px; }
  .contact { grid-template-columns: 1fr; gap: 2px; }
  .contact dd { margin: 0 0 10px; }
  .footer-links { gap: 8px; font-size: 12.5px; }
  .footer-links a + a { padding-left: 8px; }
  .footer-info { font-size: 11.5px; }
  .doc h1 { font-size: 24px; }
  .doc h3 { font-size: 16px; }
  table.prob th, table.prob td { padding: 5px 7px; font-size: 12px; }
  .prob-grid { grid-template-columns: 1fr; gap: 16px; }
}