/* ============================================================
   모두의 AI 홈 (game 앱 /ai) — 페이지 전용 스타일
   기준: docs/design/ax-robot/ai-home.html 확정 목업 이식 (v2)
   프레임(GNB·사이드바 골격)은 common.css/main.css/mygame.css 재사용,
   여기는 배너·난이도 카드·3스텝·결과 목록 + 사이드바 AI 메뉴만 담는다.
   충돌 회피: 전 셀렉터 .p-ai-home 스코프, 목업 .banner→.ai-banner, .btn→.ai-btn 로 개명
   ============================================================ */

.p-ai-home {
  background: #F8F8F8;
  letter-spacing: -.3px;
  word-break: keep-all;
}

/* ---------- 사이드바: AI 게임 메뉴 (목업 .side-menu) ---------- */
.p-ai-home .snb .ai-side-menu { padding: 12px 12px 20px; }
.p-ai-home .snb .ai-side-menu .sec {
  font-size: 12px; font-weight: 700; color: #707070; padding: 6px 8px 8px;
}
.p-ai-home .snb .ai-side-menu .item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 16px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: #2B2B2B;
  text-decoration: none;
}
.p-ai-home .snb .ai-side-menu .item:hover { background: #F2F7FF; }
.p-ai-home .snb .ai-side-menu .item.active { background: #E8F6FE; font-weight: 700; }
.p-ai-home .snb .ai-side-menu .item .gthumb {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  /* 비선택 = 반투명, 선택 = 불투명 검정 (게임별 색 아이콘이 밝아 옅은 바탕이 필요하다) */
  background: rgba(16, 21, 28, .45);
  transition: background .15s ease;
}
.p-ai-home .snb .ai-side-menu .item.active .gthumb { background: #10151C; }
.p-ai-home .snb .ai-side-menu .item.soon { color: #B5B5B5; cursor: default; }
.p-ai-home .snb .ai-side-menu .item.soon:hover { background: none; }
.p-ai-home .snb .ai-side-menu .item.soon .gthumb { background: #EFEFEF; color: #C9C9C9; font-size: 16px; }
/* (2026-08-21 제거) 사이드바 하단 「대기실 참여하기」 버튼 — 각 게임 화면에 자체 입장 버튼이 있어 삭제 */

/* ---------- 메인 ---------- */
.p-ai-home .ai-content { flex: 1; padding: 0 24px; min-width: 0; }
.p-ai-home .main-inner { max-width: 1122px; margin: 0 auto; padding: 24px 0 60px; }

/* ============================================================
   ① 히어로 배너 — 미래도시 미로 씬 (262px r24 · 인라인 SVG)
   ============================================================ */
.p-ai-home .ai-banner {
  position: relative; height: 262px; border-radius: 24px; overflow: hidden;
  background: #0C1118;
  box-shadow: 0 12px 30px rgba(12,17,24,.22);
}
.p-ai-home .ai-banner svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-ai-home .ai-banner svg .bob  { animation: ai-bob 5.2s ease-in-out infinite; }
.p-ai-home .ai-banner svg .bob2 { animation: ai-bob 6.6s ease-in-out infinite; animation-delay: -2.8s; }
.p-ai-home .ai-banner svg .bob3 { animation: ai-bob 7.4s ease-in-out infinite; animation-delay: -1.3s; }
@keyframes ai-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.p-ai-home .ai-banner svg .trace { stroke-dasharray: 7 8; animation: ai-trace 1.5s linear infinite; }
@keyframes ai-trace { to { stroke-dashoffset: -15; } }
@media (prefers-reduced-motion: reduce) {
  .p-ai-home .ai-banner svg .bob,
  .p-ai-home .ai-banner svg .bob2,
  .p-ai-home .ai-banner svg .bob3,
  .p-ai-home .ai-banner svg .trace { animation: none; }
}
.p-ai-home .ai-banner .copy {
  position: absolute; left: 44px; top: 50%; transform: translateY(-50%);
  color: #EAF2F9; max-width: 52%; z-index: 2;
}
.p-ai-home .ai-banner .copy .tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: #35E0FF; letter-spacing: 0;
  border: 1px solid rgba(53,224,255,.4); border-radius: 999px; padding: 5px 13px;
  background: rgba(53,224,255,.08); margin-bottom: 14px;
}
.p-ai-home .ai-banner .copy .tag i {
  width: 6px; height: 6px; border-radius: 50%; background: #35E0FF;
  box-shadow: 0 0 6px rgba(53,224,255,.9);
}
.p-ai-home .ai-banner .copy h1 {
  font-family: jalnan, Pretendard, sans-serif;
  font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1.1;
  color: #fff; text-shadow: 0 0 28px rgba(53,224,255,.35), 0 2px 0 rgba(0,0,0,.35);
  margin: 0;
}
.p-ai-home .ai-banner .copy h1 em { font-style: normal; color: #35E0FF; text-shadow: 0 0 24px rgba(53,224,255,.6); }
.p-ai-home .ai-banner .copy p { font-size: 15.5px; font-weight: 500; color: #A9BCCF; margin: 10px 0 0; line-height: 1.5; }
.p-ai-home .ai-banner .copy p b { color: #EAF2F9; font-weight: 700; }
.p-ai-home .ai-banner .feats { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.p-ai-home .ai-banner .feats span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #C7D6E4;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px; padding: 5px 11px; backdrop-filter: blur(2px);
}
.p-ai-home .ai-banner .feats svg { flex: none; }
/* 사용법 다운로드 (배너 우상단 — 다른 게임 메인의 "사용법 다운로드" 규격을 이 배너 톤으로) */
.p-ai-home .ai-banner .btn-guide-dl {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #EAF2F9; text-decoration: none;
  border: 1px solid rgba(53,224,255,.45); border-radius: 999px; padding: 8px 16px;
  background: rgba(12,17,24,.55); backdrop-filter: blur(3px);
  transition: background .15s, border-color .15s, color .15s;
}
.p-ai-home .ai-banner .btn-guide-dl:hover {
  background: rgba(53,224,255,.16); border-color: #35E0FF; color: #fff;
}
.p-ai-home .ai-banner .btn-guide-dl svg { flex: none; }

/* ============================================================
   ② 난이도 선택 + 진행 방식 (섹션 카드 공통)
   ============================================================ */
.p-ai-home .play-row { display: flex; gap: 20px; margin-top: 24px; align-items: stretch; }
.p-ai-home .diff-box {
  flex: 1.5; background: #fff; border: 1px solid #E7E7E7; border-radius: 24px; padding: 24px;
  box-shadow: 0 2px 4px rgba(108,108,108,.08);
}
.p-ai-home .box-title { font-size: 17px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 4px; }
.p-ai-home .box-sub { font-size: 12.5px; color: #707070; margin-bottom: 16px; line-height: 1.55; }
.p-ai-home .diff-cards { display: flex; gap: 14px; }
/* 난이도 카드: 상단 = 미로 테마 그래픽 밴드(초급 정글 / 중급 미래도시) */
.p-ai-home .diff-card {
  flex: 1; border: 2px solid #E7E7E7; border-radius: 16px; background: #fff;
  padding: 0; cursor: pointer; position: relative; text-align: left; overflow: hidden;
  font-family: inherit; letter-spacing: -.3px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.p-ai-home .diff-card:hover { border-color: #79CAFD; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(22,163,247,.12); }
.p-ai-home .diff-card.selected {
  border-color: #16A3F7;
  box-shadow: 0 0 0 3px rgba(22,163,247,.15), 0 8px 18px rgba(22,163,247,.14);
}
.p-ai-home .diff-card .band { position: relative; height: 86px; display: block; }
.p-ai-home .diff-card .band svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p-ai-home .diff-card .band .theme-tag {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: #fff;
  background: rgba(10,15,20,.55); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 3px 9px;
}
.p-ai-home .diff-card .body { display: block; padding: 13px 16px 14px; background: #fff; }
.p-ai-home .diff-card.selected .body { background: #F4FBFF; }
.p-ai-home .diff-card .chk {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75); background: rgba(10,15,20,.35); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.p-ai-home .diff-card .chk svg { opacity: 0; transition: opacity .15s; }
.p-ai-home .diff-card.selected .chk { background: #16A3F7; border-color: #fff; box-shadow: 0 2px 6px rgba(22,163,247,.45); }
.p-ai-home .diff-card.selected .chk svg { opacity: 1; }
.p-ai-home .diff-card .dname { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: #2B2B2B; }
.p-ai-home .diff-card .dname .lv {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: #16A3F7;
  background: #E8F6FE; border-radius: 6px; padding: 2.5px 7px;
}
.p-ai-home .diff-card.selected .dname .lv { background: #16A3F7; color: #fff; }
.p-ai-home .diff-card .dmeta { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.p-ai-home .diff-card .dmeta .mrow { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #707070; }
.p-ai-home .diff-card .dmeta .mrow svg { flex: none; }
.p-ai-home .diff-card .dmeta .mrow b { color: #2B2B2B; font-weight: 700; }
.p-ai-home .enter-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
/* 버튼 공통 (목업 .btn — bootstrap .btn 충돌 회피로 .ai-btn) */
.p-ai-home .ai-btn {
  height: 40px; border-radius: 8px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.3px;
  padding: 0 22px; display: inline-flex; align-items: center; gap: 7px;
}
.p-ai-home .ai-btn.primary {
  background: #16A3F7; color: #fff; padding: 0 34px; font-size: 15px;
  box-shadow: 0 4px 10px rgba(22,163,247,.3);
}
.p-ai-home .ai-btn.primary:hover { background: #0F93E4; }
.p-ai-home .enter-row .note { font-size: 12px; color: #707070; display: inline-flex; align-items: center; gap: 5px; }
/* ---- 진행 방식 3스텝: 번호 타임라인 + 자체 SVG 아이콘 ---- */
.p-ai-home .step-box {
  flex: 1; background: #fff; border: 1px solid #E7E7E7; border-radius: 24px; padding: 24px;
  box-shadow: 0 2px 4px rgba(108,108,108,.08);
}
.p-ai-home .steps { display: flex; flex-direction: column; margin-top: 10px; }
.p-ai-home .step { display: flex; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 20px; }
.p-ai-home .step:last-child { padding-bottom: 0; }
/* 연결선: 번호 원 중심(x=12) 아래로 */
.p-ai-home .step:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 28px; bottom: -2px; width: 2px;
  background: linear-gradient(180deg, #BFE4FB, #E8F6FE);
}
.p-ai-home .step .num {
  width: 24px; height: 24px; border-radius: 50%; background: #16A3F7; color: #fff; flex: none;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(22,163,247,.35); position: relative; z-index: 1;
  margin-top: 8px;
}
.p-ai-home .step .ic {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: linear-gradient(180deg, #EDF8FF, #DFF2FE); border: 1px solid #CFEAFC;
  display: flex; align-items: center; justify-content: center;
}
.p-ai-home .step .tt { font-size: 14px; font-weight: 700; padding-top: 3px; color: #2B2B2B; }
.p-ai-home .step .tt small { display: block; font-size: 12px; font-weight: 500; color: #707070; margin-top: 2px; line-height: 1.45; }

/* ============================================================
   ③ 저장된 결과 목록 (결정 ⑥)
   ============================================================ */
.p-ai-home .result-sec {
  margin-top: 24px; background: #fff; border: 1px solid #E7E7E7; border-radius: 24px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(108,108,108,.08);
}
.p-ai-home .result-sec .head { display: flex; align-items: baseline; gap: 8px; padding: 22px 24px 12px; }
.p-ai-home .result-sec .head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.p-ai-home .result-sec .head .cnt { font-size: 13px; font-weight: 800; color: #16A3F7; }
.p-ai-home .result-sec table { width: 100%; border-collapse: collapse; }
.p-ai-home .result-sec thead th {
  font-size: 11.5px; font-weight: 700; color: #949494; text-align: left; letter-spacing: .2px;
  padding: 10px 24px; border-bottom: 1px solid #EFEFEF; background: #FBFBFB;
}
.p-ai-home .result-sec tbody td { font-size: 14px; padding: 14px 24px; border-bottom: 1px solid #F5F5F5; transition: background .12s; }
.p-ai-home .result-sec tbody tr:hover td { background: #F2F7FF; cursor: pointer; }
.p-ai-home .result-sec tbody tr:hover td.title { color: #16A3F7; }
.p-ai-home .result-sec tbody tr:last-child td { border-bottom: none; }
.p-ai-home .result-sec td.title { font-weight: 700; font-size: 15px; transition: color .12s; }
.p-ai-home .result-sec td.meta { color: #707070; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-ai-home .result-sec td.arrow { color: #C9C9C9; font-size: 16px; font-weight: 700; text-align: right; padding-right: 28px; }
.p-ai-home .result-sec tbody tr:hover td.arrow { color: #16A3F7; }
.p-ai-home .diff-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3.5px 11px;
}
.p-ai-home .diff-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.p-ai-home .diff-badge.easy { background: #E4F5EC; color: #1E9E5A; }
.p-ai-home .diff-badge.easy::before { background: #2EBD72; }
.p-ai-home .diff-badge.mid { background: #E8F6FE; color: #0F93E4; }
.p-ai-home .diff-badge.mid::before { background: #16A3F7; }
/* 빈 상태(결과 0건일 때) */
.p-ai-home .result-sec .empty { padding: 48px 0; text-align: center; font-size: 14px; color: #949494; }

/* ---------- 반응형 (목업 브레이크포인트 이식 — 사이드바 숨김은 mygame.css .snb.pc 관례 따름) ---------- */
@media (max-width: 992px) {
  .p-ai-home .play-row { flex-direction: column; }
  .p-ai-home .ai-banner .copy { max-width: 72%; left: 24px; }
  .p-ai-home .ai-banner .copy h1 { font-size: 32px; }
  /* 좁은 화면에서 미로 씬이 카피 아래로 들어옴 → 좌측 스크림으로 가독성 확보 */
  .p-ai-home .ai-banner::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(10,15,22,.9) 0%, rgba(10,15,22,.6) 52%, rgba(10,15,22,.08) 100%);
  }
}
@media (max-width: 560px) {
  .p-ai-home .ai-content { padding: 0 14px; }
  .p-ai-home .ai-banner { height: 236px; }
  .p-ai-home .ai-banner .copy { max-width: 86%; }
  .p-ai-home .ai-banner .btn-guide-dl { top: 14px; right: 14px; padding: 6px 12px; font-size: 12px; }
  .p-ai-home .ai-banner .copy h1 { font-size: 27px; }
  .p-ai-home .ai-banner .copy p { font-size: 13.5px; }
  .p-ai-home .ai-banner .feats span { font-size: 11px; padding: 4px 9px; }
  .p-ai-home .ai-banner svg .bob,
  .p-ai-home .ai-banner svg .bob2,
  .p-ai-home .ai-banner svg .bob3 { display: none; } /* 부유 큐브: 카피와 겹쳐 숨김 */
  .p-ai-home .diff-cards { flex-direction: column; }
  .p-ai-home .enter-row .note { width: 100%; }
  .p-ai-home .result-sec thead th,
  .p-ai-home .result-sec tbody td { padding-left: 14px; padding-right: 14px; }
  .p-ai-home .result-sec td.title { font-size: 14px; }
  .p-ai-home .result-sec thead th:nth-child(3),
  .p-ai-home .result-sec tbody td:nth-child(3) { display: none; }
  .p-ai-home .result-sec thead th:nth-child(4),
  .p-ai-home .result-sec tbody td:nth-child(4) { display: none; }
  .p-ai-home .result-sec td.arrow { display: none; }
}

/* ============================================================
   (추가) 사이드바 "AI 모션 슈팅" 항목 — NEW 칩 · 우주 톤 썸네일
   위 복원된 AXROBOT(/ai) 스타일은 건드리지 않는다 — 여기부터 추가분만.
   ============================================================ */
.p-ai-home .snb .ai-side-menu .new-chip {
  margin-left: auto; font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, #ffba37, #f9b32f); border-radius: 999px; padding: 2px 7px;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* ============================================================
   (추가) AI 모션 슈팅 메인 (/ai/motion) — 페이지 스코프 .p-ai-motion
   body 는 p-ai-home + p-ai-motion 을 함께 달아 위 공통(사이드바·배너 골격·
   섹션 카드·결과 목록) 스타일을 재사용하고, 여기는 우주/골드 톤 차이만 담는다.
   ============================================================ */
/* (2026-08-21 제거) 사이드바 썸네일을 페이지별로 덧칠하던 예외 — 밝은 아이콘이 흰 배경에서 뜨는 문제는
   공통 `.gthumb` 의 반투명 기본 배경으로 해결했다. 선택된 항목만 불투명 검정이 되어야 한다. */
/* 배너 — 골드 시그니처 태그·타이틀 글로우 */
.p-ai-motion .ai-banner { background: #0a0620; }
.p-ai-motion .ai-banner .copy .tag {
  color: #FFD37A; border-color: rgba(252,183,51,.45); background: rgba(252,183,51,.12);
}
.p-ai-motion .ai-banner .copy .tag i { background: #FCB733; box-shadow: 0 0 6px rgba(252,183,51,.9); }
.p-ai-motion .ai-banner .copy h1 { text-shadow: 0 0 28px rgba(252,183,51,.35), 0 2px 0 rgba(0,0,0,.35); }
/* 배너 우주선 부유 (AXROBOT 배너 .bob 계열 문법) */
.p-ai-motion .ai-banner svg .ship-bob { animation: ai-bob 4.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .p-ai-motion .ai-banner svg .ship-bob { animation: none; }
}
/* PC + 웹캠 필수 안내 박스 */
.p-ai-motion .req-note {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 12.5px; font-weight: 600; color: #8A6D1F; line-height: 1.5;
  background: #FFF7E2; border: 1px solid #F5DFA8; border-radius: 10px; padding: 10px 14px;
}
.p-ai-motion .req-note svg { flex: none; }
.p-ai-motion .req-note b { color: #6B5417; font-weight: 800; }
/* 좁은 화면: 배너 아트가 카피 아래로 들어옴 → 좌측 스크림 (AXROBOT 992px 관례) */
@media (max-width: 992px) {
  .p-ai-motion .ai-banner::after {
    background: linear-gradient(90deg, rgba(10,6,32,.9) 0%, rgba(10,6,32,.6) 52%, rgba(10,6,32,.08) 100%);
  }
}