/* ===== ATLAS Hub Mobile UX (< 640px) =====
   PC 화면은 영향 0 — 모든 규칙이 미디어 쿼리 안에 있음.
   styles.css / career.html inline CSS 와 분리되어 충돌 없음. */

/* ── 1. 상단바: 검색·버튼 줄바꿈 + 터치 타겟 확대 ── */
@media(max-width:640px){
  .topbar-inner{padding:8px 12px;gap:8px}
  .brand{font-size:17px}
  .brand small{display:none}
  .search-box{order:10;flex-basis:100%;min-width:0}
  .search-box input{padding:10px 14px 10px 34px;font-size:14px}
  .country-toggle button{padding:8px 12px;font-size:12px}
  .top-btn{padding:9px 12px;font-size:12px;min-height:40px}
  .sb-toggle{width:40px;height:40px;font-size:18px}
}

/* ── 2. 히어로 섹션 ── */
@media(max-width:640px){
  header.hero{padding:20px 14px 10px}
  .kicker{font-size:10px;letter-spacing:.2em}
  .sub{font-size:13px}
  .rebanner{font-size:11.5px;padding:9px 12px;flex-direction:column;gap:4px}
}

/* ── 3. 뷰 네비게이션 (카테고리 탭) ── */
@media(max-width:640px){
  .viewnav-inner{padding:7px 10px;gap:5px}
  .viewnav button{padding:8px 10px;font-size:11.5px;min-height:38px}
  .grp-label{font-size:9px;padding:0 2px}
}

/* ── 4. 회사 카드 (career) ── */
@media(max-width:640px){
  .game-card{padding:11px 12px;margin-bottom:8px}
  .gc-top{gap:6px}
  .gc-name{font-size:14px}
  .gc-meta{font-size:11px}
  .gc-ow{font-size:11.5px;padding:5px 8px}
  .gc-news{font-size:11.5px;padding:5px 9px}
  .gc-tip{font-size:11px;padding:5px 8px}
  /* 장단점 2열 → 1열 */
  .gc-pc{grid-template-columns:1fr;gap:5px}
  /* 갤러리 모자이크 → 세로 배치 */
  .gc-gallery2{flex-direction:column;gap:7px}
  .gc-hero{width:100%;height:180px}
  .gc-thumbs{flex-basis:auto;gap:6px}
  .gc-thumb{width:calc(33.3% - 4px);height:65px}
  /* 뱃지 터치 타겟 */
  .tier-badge,.size-badge,.vd-badge,.wbadge,.ot-badge{font-size:10px;padding:2px 8px;min-height:24px;display:inline-flex;align-items:center}
  /* 게임 타이틀 태그 */
  .gt{font-size:11px;padding:3px 4px 3px 8px}
  .gt a{padding:4px 7px;font-size:9px;min-height:26px}
  /* 핀 버튼 터치 타겟 */
  .gc-pin{font-size:20px;padding:4px 6px;min-width:36px;min-height:36px}
}

/* ── 5. 찜 카드 ── */
@media(max-width:640px){
  .wish-grid{grid-template-columns:1fr;gap:10px}
  .wish-card{padding:11px 12px}
}

/* ── 6. 삶의질 비교 (QoL) ── */
@media(max-width:640px){
  .qol-grid{grid-template-columns:1fr;gap:10px}
  .qol-card{padding:12px 13px}
  .qol-h .qn{font-size:15px}
  .qol-pc{grid-template-columns:1fr;gap:5px}
  .qol-row{flex-direction:column;gap:2px}
  .qol-row .qk{flex:none;font-size:11px}
}

/* ── 7. 이직 후회·현실 카드 ── */
@media(max-width:640px){
  .reg-grid{grid-template-columns:1fr;gap:10px}
  .reg-card{padding:12px 13px}
  .reg-h{font-size:14px}
}

/* ── 8. 테이블 가로 스크롤 보호 ── */
@media(max-width:640px){
  .wel-table,.cmp-table,.gloss-table,.iv-exp,.cg-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-scroll{-webkit-overflow-scrolling:touch}
}

/* ── 9. 복지 토글 ── */
@media(max-width:640px){
  .wel-box>summary,.wel-real>summary{padding:6px 0;font-size:13px}
  .wel-k{width:auto;white-space:normal}
}

/* ── 10. 면접 준비 ── */
@media(max-width:640px){
  .iv-q{padding:10px 12px}
  .iv-q>summary{font-size:13px}
  .iv-ans{padding:8px 10px;font-size:12.5px}
  .iv-model{padding:8px 10px;font-size:12px}
}

/* ── 11. 엔진 그룹 ── */
@media(max-width:640px){
  .eng-group{padding:11px 13px}
  .eng-group ul{font-size:12px}
}

/* ── 12. 라이트박스 모바일 최적화 ── */
@media(max-width:640px){
  #lightbox{padding:12px}
  .lb-img{max-width:96vw;max-height:72vh;border-radius:6px}
  .lb-cap{font-size:13px;margin-top:10px}
  .lb-close{top:10px;right:14px;font-size:28px;min-width:40px;min-height:40px}
}

/* ── 13. 게임 정보 모달 ── */
@media(max-width:640px){
  .gi-modal{padding:16px 14px;border-radius:12px;max-height:90vh}
  .gi-head{font-size:15px}
  .gi-sites{gap:5px}
  .gi-site{padding:8px 12px;font-size:11.5px;min-height:38px}
}

/* ── 14. FAB 위치 ── */
@media(max-width:640px){
  .fab{right:12px;bottom:16px}
  .fab button{width:42px;height:42px;font-size:16px}
}

/* ── 15. 비교 표 (찜) ── */
@media(max-width:640px){
  .cmp-box{padding:11px 12px}
  .cmp-table th,.cmp-table td{padding:5px 7px;font-size:11px}
}

/* ── 16. 링크그리드 ── */
@media(max-width:640px){
  .linkgrid{grid-template-columns:1fr;gap:10px}
  .linkcard{padding:13px 14px}
}

/* ── 17. 가이드 카드 ── */
@media(max-width:640px){
  .guide-grid{grid-template-columns:1fr;gap:10px}
  .guide-card{padding:13px 14px}
}

/* ── 18. 출처 링크 그리드 ── */
@media(max-width:640px){
  .cs-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:5px}
  .cs-link{padding:5px 8px}
}

/* ── 19. 컨트롤 (정렬/필터) 터치 타겟 ── */
@media(max-width:640px){
  .controls{gap:6px;margin:14px 0 6px}
  .fchip{padding:7px 12px;font-size:12px;min-height:36px}
  select.sortsel{padding:7px 10px;font-size:12px;min-height:36px}
}

/* ── 20. 본문 패딩 ── */
@media(max-width:640px){
  .wrap{padding:0 12px}
  .main .wrap{padding:0 10px}
}

/* ── 21. ⌘K 팔레트 모바일 ── */
@media(max-width:640px){
  .ck-box{margin-top:6vh;width:96vw}
  .ck-input{padding:14px 14px;font-size:16px}
  .ck-item{padding:10px 12px;min-height:44px}
}

/* ── 22. 용어 해설 토글 ── */
@media(max-width:640px){
  .gc-gloss-item{font-size:12px;padding:6px 9px}
  .gc-gloss-item .jp{font-size:12px}
}

/* ── 23. 스크롤바 모바일 (얇게) ── */
@media(max-width:640px){
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-thumb{border:1px solid var(--bg)}
}