/* ===== 서비스 · 게임 안내 페이지를 홈페이지와 같은 색(크림 · 네이비 · 구릿빛)으로 ===== */
/* style.css 의 어두운 색을 body.theme-light 안에서만 덮어씁니다.
   이 클래스를 달지 않은 페이지(아이콘 스튜디오, 로또, 사주, ART, 공지, Q&A)는 예전 그대로예요. */
body.theme-light {
  --bg: #fbf5e9;
  --bg-alt: #f4ecdc;
  --surface: #fffaf1;
  --line: #e9dcc7;
  --text: #142b50;
  --muted: #6e7670;
  --desc: #4a5870;
  --gold: #ac651f;
  --gold-light: #8f5116;
  --bronze: #955216;
  --gold-grad: linear-gradient(#c47c28, #955216);
  --sans: 'Noto Sans KR', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --header-h: 94px;   /* 위쪽 메뉴 높이: 앱 화면이 메뉴와 푸터 사이를 꼭 맞게 채우도록 */
  background: var(--bg);
  color: var(--text);
}
.theme-light ::selection { background: #e9c58e; color: #142b50; }

/* ===== 위쪽 메뉴 · 아래쪽 푸터: 홈페이지와 같은 모양 ===== */
.theme-light .company-header {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 40px;
  background: #fffaf1; padding: 20px 4%; border-radius: 0 0 28px 28px; box-shadow: 0 5px 20px #583b2210;
}
.theme-light .company-brand {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  color: #161818; font-size: 25px; font-weight: 900; letter-spacing: -1px; line-height: 1;
}
.theme-light .company-brand > img { width: 54px; height: 54px; object-fit: contain; flex: none; border-radius: 50%; }
.theme-light .company-ai { color: #b47728; }
.theme-light .company-menu { display: flex; align-items: center; gap: clamp(15px, 2.6vw, 38px); flex: 1; color: #28241e; }
.theme-light .company-menu a { font-size: 15px; font-weight: 600; }
.theme-light .company-menu a:hover { text-decoration: underline; text-underline-offset: 6px; }
.theme-light .company-menu a[aria-current="page"] { color: var(--gold); }

.theme-light .site-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 1440px; margin: 0 auto; padding: 35px 5%; color: #28241e;
}
.theme-light .site-footer p, .theme-light .site-footer > span { margin: 0; font-size: 12px; }
.theme-light .site-footer p { color: var(--muted); }
.theme-light .site-footer .company-brand { font-size: 20px; }
.theme-light .site-footer .company-brand > img { width: 42px; height: 42px; }

/* ===== 서비스 상세 페이지: 위쪽 소개 ===== */
.theme-light .page-hero { padding: 64px 0 56px; background: none; border-bottom: 1px solid var(--line); }
.theme-light .page-hero .crumb { margin-bottom: 28px; }
.theme-light .page-no { -webkit-text-stroke: 1.5px var(--gold); }
.theme-light .label { font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.theme-light .page-title { font-weight: 800; letter-spacing: -.03em; }
.theme-light .boxes-section { padding: 56px 0 70px; }

/* ===== 서비스 칸(박스) ===== */
/* 칸이 5개인 페이지 (웹 · 앱 서비스) */
.theme-light .boxes.boxes-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.theme-light .box-frame { border: 1px dashed #d6bb91; background: var(--surface); }
.theme-light .box:hover .box-frame { border-color: var(--gold); background: #fff3dc; box-shadow: 0 14px 28px #583b2214; }
.theme-light .box-title { color: var(--text); }
.theme-light .box-empty b { color: var(--desc); }

.theme-light .box-live .box-frame {
  border: 1px solid #e1cfae;
  background: radial-gradient(circle at 50% 45%, rgba(196, 124, 40, .16), transparent 62%), #fffaf1;
}
.theme-light .box-live:hover .box-frame {
  border-color: var(--gold);
  background: radial-gradient(circle at 50% 45%, rgba(196, 124, 40, .26), transparent 64%), #fff3dc;
}
.theme-light .box-badge { color: #8a5a14; border: 1px solid #d6bb91; background: #fff4de; }
.theme-light .box-badge.gold { color: #8a5a14; border-color: #d6bb91; }
.theme-light .box-cta { font-weight: 600; }
.theme-light .app-mark { box-shadow: 0 10px 26px rgba(88, 59, 34, .22); }
.theme-light .app-mark-img { box-shadow: 0 10px 26px rgba(88, 59, 34, .25); }
.theme-light .app-mark-saju { background: linear-gradient(#d19243, #a8651c); color: #fff; box-shadow: 0 10px 26px rgba(88, 59, 34, .25); }
.theme-light .lb { box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .16), 0 6px 14px rgba(88, 59, 34, .28); }

/* 작업물 칸 (아트 · 디자인) */
.theme-light .box-work .box-frame {
  border: 1px solid #e1cfae;
  background: radial-gradient(circle at 50% 50%, rgba(196, 124, 40, .14), transparent 62%), #fffaf1;
}
.theme-light .box-work:hover .box-frame { border-color: var(--gold); }
.theme-light .work-img { filter: drop-shadow(0 8px 18px rgba(88, 59, 34, .25)); }
.theme-light .thumb-bg { filter: blur(18px) saturate(1.1); opacity: .5; }
.theme-light .box-thumb .box-no, .theme-light .box-thumb .box-badge { text-shadow: none; }
.theme-light .box-thumb .box-badge { background: rgba(255, 250, 241, .92); }
.theme-light .fade-stack, .theme-light .video-frame, .theme-light .thumb-img { box-shadow: 0 10px 24px rgba(88, 59, 34, .28); }
.theme-light .play-mark { color: #fff; background: var(--gold); box-shadow: 0 4px 12px rgba(88, 59, 34, .35); }

/* 앞뒤 서비스로 넘어가는 줄 */
.theme-light .pager { margin-top: 80px; }

/* ===== 앱 · 게임 페이지: 위쪽 얇은 막대 ===== */
.theme-light.app-page main { padding-top: 0; }
.theme-light .app-bar { background: #fffaf1; }
.theme-light .app-bar .crumb { margin: 0; }

/* 게임을 홈페이지 가운데에서 바로 실행: 휴대폰 비율(636:1048) 틀 */
.theme-light .game-stage { display: flex; justify-content: center; padding: 14px 16px 20px; }
.theme-light .game-box {
  height: min(calc(100vh - 174px), 960px); height: min(calc(100dvh - 174px), 960px); min-height: 560px;
  aspect-ratio: 636 / 1048; max-width: 100%; overflow: hidden; background: #0b1633;
  border-radius: 26px; box-shadow: 0 0 0 1px #e1cfae, 0 22px 56px rgba(88, 59, 34, .28);
}
.theme-light .game-box .app-frame { width: 100%; height: 100%; min-height: 0; background: #0b1633; }

/* ===== 앱 소개 (휴대폰 미리보기 + 설치 안내) ===== */
.theme-light .app-show { background: radial-gradient(ellipse 50% 60% at 30% 40%, rgba(196, 124, 40, .12), transparent 70%); }
.theme-light .phone { border-color: #6b4a22; box-shadow: 0 26px 60px rgba(88, 59, 34, .35), inset 0 0 0 2px #000; }
.theme-light .app-icon { box-shadow: 0 10px 24px rgba(88, 59, 34, .25); }
.theme-light .app-features li { color: #33445f; }
.theme-light .btn-gold { color: #fff; box-shadow: 0 10px 24px rgba(149, 82, 22, .28); }
.theme-light .btn-gold:hover { box-shadow: 0 14px 30px rgba(149, 82, 22, .38); }
.theme-light .qr-box #qr { background: #fff; border: 1px solid var(--line); }

/* ===== 반응형 ===== */
@media (max-width: 1100px) {
  .theme-light .boxes.boxes-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .theme-light .company-header { gap: 24px; }
  .theme-light .company-brand { font-size: 23px; gap: 9px; }
  .theme-light .company-brand > img { width: 48px; height: 48px; }
  .theme-light .company-menu { gap: 22px; }
  .theme-light .company-menu a { font-size: 14px; }
}
@media (max-width: 600px) {
  body.theme-light { --header-h: 108px; }
  .theme-light .company-header { gap: 12px; justify-content: space-between; padding: 16px 5% 12px; border-radius: 0 0 20px 20px; }
  .theme-light .company-brand > img { width: 43px; height: 43px; }
  .theme-light .company-menu { order: 3; width: 100%; flex: auto; justify-content: space-between; gap: 10px; padding-top: 2px; }
  .theme-light .site-footer { flex-wrap: wrap; }
  .theme-light .site-footer p { width: 100%; order: 3; }
  .theme-light .page-hero { padding: 40px 0 36px; }
  .theme-light .page-hero .crumb { margin-bottom: 20px; }
  .theme-light .boxes.boxes-5 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .theme-light .boxes-section { padding: 36px 0 50px; }
  .theme-light .pager { margin-top: 56px; }
  .theme-light .app-bar { height: auto; min-height: 46px; padding: 6px 16px; gap: 12px; }
  .theme-light .app-bar .crumb { font-size: .8rem; line-height: 1.5; }
  .theme-light .game-stage { padding: 0; }
  .theme-light .game-box { width: 100%; height: calc(100vh - 176px); height: calc(100dvh - 176px); aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}