/* =========================================================
   pages.css — 서브 페이지 (회사소개 · 플랫폼 · 게임)
   피그마에는 메인만 있다. 서브는 메인의 색·타이포 체계를 그대로 확장했다.
   ========================================================= */

/* ---------- 서브 페이지 상단 (히어로 축소판) ---------- */
.page-hero {
  position: relative;
  background-color: var(--navy);
  background-image: url('../img/ui/bg-pattern.webp');
  background-size: cover;
  background-position: center;
  padding-block: clamp(112px, 13vw, 176px) clamp(40px, 5.4vw, 78px);
  text-align: left;
}
.page-hero__eyebrow {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--deco);
  margin-block-end: clamp(10px, 1.2vw, 16px);
}
.page-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.18; color: var(--white);
  max-width: 15ch;
}
.page-hero__lead {
  margin-block-start: clamp(14px, 1.8vw, 24px);
  max-width: 60ch;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- 밝은 본문 섹션 ---------- */
.section { padding-block: clamp(52px, 7vw, 104px); background: #fff; color: var(--dark); }
.section--tint { background: #f6f7f9; }
.section--dark { background: var(--dark); color: #fff; }

.section__head { max-width: 62ch; margin-block-end: clamp(28px, 3.6vw, 52px); }
.section__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.24;
}
.section--dark .section__title { color: #fff; }
.section__lead {
  margin-block-start: clamp(10px, 1.3vw, 18px);
  font-size: clamp(14px, 1.22vw, 17px);
  line-height: 1.7;
  color: #4a5058;
}
.section--dark .section__lead { color: rgba(255, 255, 255, 0.7); }

/* ---------- 실적 목록 ---------- */
.work-list { display: grid; gap: clamp(36px, 5vw, 72px); }
.work-item {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: center;
}
.work-item:nth-child(even) .work-item__media { order: 2; }
.work-item__media {
  border-radius: 14px; overflow: hidden;
  background: #eceff3;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.12);
}
.work-item__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.work-item__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 2.2vw, 31px);
  line-height: 1.25;
}
.work-item__summary {
  margin-block-start: 8px;
  font-weight: 600; font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.02em; color: var(--cyan);
}
.work-item__desc {
  margin-block-start: clamp(12px, 1.4vw, 18px);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.7; color: #4a5058;
}
.work-item__gallery { display: flex; gap: 10px; margin-block-start: 16px; flex-wrap: wrap; }
.work-item__gallery img {
  width: clamp(84px, 11vw, 132px); aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 8px;
}

/* ---------- 팀 ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.team-card {
  padding: clamp(20px, 2.4vw, 30px);
  background: #fff; border: 1px solid #e6e9ee; border-radius: 14px;
}
.section--tint .team-card { background: #fff; }
.team-card__name { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); }
.team-card__role {
  margin-block-start: 6px; font-weight: 600;
  font-size: 13px; letter-spacing: 0.03em; color: var(--pink);
}
.team-card__bg {
  margin-block-start: 12px; font-size: 13.5px; line-height: 1.65; color: #5a616a;
}

/* ---------- 연혁 ---------- */
.timeline { display: grid; gap: 0; }
.timeline__row {
  display: grid; grid-template-columns: minmax(96px, 148px) 1fr;
  gap: clamp(14px, 2vw, 30px);
  padding-block: clamp(14px, 1.8vw, 22px);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  align-items: baseline;
}
.timeline__row:last-child { border-block-end: 1px solid rgba(255, 255, 255, 0.12); }
.timeline__year {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(12px, 1.05vw, 14px); letter-spacing: 0.08em;
  color: var(--deco);
}
.timeline__text { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; color: rgba(255,255,255,0.86); }

/* ---------- 파트너 ---------- */
.partners__image {
  max-width: 760px; margin-inline: auto;
  padding: clamp(20px, 3vw, 40px);
  background: #fff; border: 1px solid #e6e9ee; border-radius: 16px;
}
.partners__names {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  justify-content: center; margin-block-start: clamp(18px, 2.2vw, 28px);
}
.partners__names span {
  font-size: 13px; color: #5a616a;
  border: 1px solid #dfe3e9; border-radius: 999px; padding: 6px 14px;
}

/* ---------- 플랫폼: 지표 ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(14px, 2vw, 26px);
}
.stat {
  padding: clamp(22px, 2.8vw, 36px);
  border-radius: 16px; background: #fff; border: 1px solid #e6e9ee;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1; color: var(--navy);
}
.stat__label { margin-block-start: 12px; font-weight: 600; font-size: clamp(14px, 1.2vw, 16px); }
.stat__note { margin-block-start: 6px; font-size: 13px; color: #6b727b; }

/* ---------- 플랫폼: 파이프라인 ---------- */
.pipeline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  counter-reset: step;
}
.pipeline__step {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.2vw, 26px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
}
.pipeline__step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-size: 13px;
  display: grid; place-items: center;
  width: 28px; aspect-ratio: 1; border-radius: 999px;
  background: var(--deco); color: var(--navy);
  margin-block-end: 14px;
}
.pipeline__name { font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px); color: #fff; }
.pipeline__desc { margin-block-start: 8px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.62); }

/* ---------- 플랫폼: 비교표 ---------- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%; min-width: 680px;
  border-collapse: separate; border-spacing: 0;
  font-size: clamp(13px, 1.08vw, 15px);
}
.compare th, .compare td {
  padding: clamp(12px, 1.4vw, 18px) clamp(10px, 1.3vw, 18px);
  text-align: left; border-block-end: 1px solid #e6e9ee;
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.03em;
  color: #5a616a; border-block-end: 2px solid #d9dee5;
  white-space: nowrap;
}
.compare tbody th { font-weight: 600; color: var(--dark); white-space: nowrap; }
.compare .col-dxp { background: rgba(0, 160, 185, 0.07); }
.compare thead .col-dxp { color: var(--navy); font-weight: 700; }
.compare tbody td.col-dxp { font-weight: 600; color: var(--navy); }
.compare tr:last-child td, .compare tr:last-child th { border-block-end: 0; }

/* ---------- 청중 ---------- */
.audience { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.audience li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: clamp(18px, 2.2vw, 26px);
  background: #fff; border: 1px solid #e6e9ee; border-radius: 14px;
  font-size: clamp(14px, 1.18vw, 16px); line-height: 1.65;
}
.audience li::before {
  content: ''; flex: none;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--orange); margin-block-start: 7px;
}

/* ---------- 게임 갤러리 ---------- */
.gallery-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-block-end: clamp(24px, 3vw, 40px);
}
.gallery-toolbar button {
  font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.gallery-toolbar button:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.gallery-toolbar button[aria-pressed='true'] {
  background: var(--deco); color: var(--navy); border-color: var(--deco);
}

.gallery {
  display: grid;
  /* min()을 쓰지 않으면 좁은 화면에서 1열이 되어 13개가 세로로 11,000px까지 늘어난다
     (390px 렌더에서 확인) → 모바일에서도 2열을 유지한다 */
  grid-template-columns: repeat(auto-fill, minmax(min(212px, 46%), 1fr));
  gap: clamp(22px, 3vw, 44px);
}
.gallery-empty {
  grid-column: 1 / -1;
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
  font-size: clamp(14px, 1.2vw, 16px);
  color: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 14px;
}

.game-card { text-align: left; display: block; }
.game-card .phone { transition: transform 0.22s; }
.game-card:hover .phone { transform: translateY(-8px); }
.game-card__meta { margin-block-start: 16px; }
.game-card__brand {
  font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.58);
}
.game-card__name {
  font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 20px);
  color: #fff; margin-block-start: 5px;
}
.game-card__desc {
  margin-block-start: 8px; font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.game-card__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-block-start: 12px; }
.tag {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px; padding: 4px 11px;
}
.tag--concept { color: var(--navy); background: var(--deco); border-color: var(--deco); }

/* ---------- CTA 띠 ---------- */
.cta-band {
  background: var(--pink); color: #fff;
  padding-block: clamp(40px, 5vw, 68px);
  text-align: center;
}
.cta-band__title { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 36px); }
.cta-band__link {
  display: inline-block; margin-block-start: 18px;
  font-weight: 700; font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.04em;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5); padding-block-end: 5px;
}
.cta-band__link:hover { border-bottom-color: #fff; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  .work-item { grid-template-columns: 1fr; }
  .work-item:nth-child(even) .work-item__media { order: 0; }
  .page-hero__title { max-width: none; }
}

/* 실제로 플레이 가능한 카드 표시 — playable 이 채워지면 자동으로 붙는다 */
.tag--play {
  color: #06202c; background: #7fe0a8; border-color: #7fe0a8;
  font-weight: 700;
}