/* ════════════════════════════════════════
   responsive.css — 태블릿 · 모바일
════════════════════════════════════════ */
.tabbar{display:none}

@media (max-width:1100px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .skin-gallery{grid-template-columns:repeat(2,1fr)}
  .mall-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  /* 레일 → 오프캔버스 (하단 탭바보다 위에, 로그인/회원가입 안 가리게) */
  .rail{position:fixed;left:0;top:0;z-index:90;overflow-y:auto;transform:translateX(-100%);transition:transform .32s var(--ease)}
  .rail.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.5)}
  .rail .rail-foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .nav-scrim{z-index:85}
  .tb-burger{display:block}
  .view{padding:22px 18px 110px}
  .topbar{padding:12px 16px}
  .tb-clock{display:none}

  /* 하단 탭바 */
  .tabbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:80;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);
    border-top:1px solid var(--line);justify-content:space-around;
  }
  .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--sub);font-weight:600;flex:1}
  .tab span{font-size:19px}
  .tab.active{color:var(--brand)}
  .tab-new span{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 20px -8px var(--glow);margin-top:-22px}
}

@media (max-width:520px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .skin-gallery{grid-template-columns:1fr 1fr;gap:11px}
  .mall-grid{grid-template-columns:1fr}
  .skin-pick{grid-template-columns:repeat(4,1fr)}
  .device.mobile{max-width:100%}
  /* 더 구체적인 .device.mobile .device-screen(600px)까지 확실히 눌러서 탭바와 겹침 방지 */
  .device-screen,
  .device.mobile .device-screen{height:480px}
  .vh-title{font-size:24px}
  .ps-tools{margin-left:0;width:100%}
}

/* ════════════════════════════════════════
   모바일 정밀 최적화
════════════════════════════════════════ */
@media (max-width:760px){
  .editor{height:96vh;border-radius:18px 18px 0 0}
  .ed-head{flex-wrap:wrap;padding:12px 16px;gap:10px}
  .ed-name{order:3;flex-basis:100%;font-size:17px}
  .ed-actions{margin-left:auto}
  .ed-actions .btn{padding:10px 16px;font-size:12.5px}
}

@media (max-width:640px){
  .tb-search{display:none}                 /* 장식용 검색 → 모바일에선 숨겨 공간 확보 */
  .topbar{gap:9px;padding:11px 14px}
  .tb-tools{gap:7px}
  .view{padding:20px 16px 110px}
}

@media (max-width:520px){
  #langName{display:none}
  .lang-btn{padding:9px 11px}
  .tb-theme,.tb-ico{width:38px;height:38px}
  .ps-bar{gap:10px}
  .ps-tools{flex-wrap:wrap}
  .dev-toggle button{padding:7px 11px;font-size:11.5px}
  .ps-tools .btn.solid{flex:1;text-align:center;padding:11px 14px;font-size:12.5px}
  .device-screen{height:60vh}
  .device.mobile .device-screen{height:64vh}
  .store .stb-nav{display:none}            /* 좁은 스토어 상단 링크 정리 */
  /* 실제 폰 화면에선 미리보기(데스크탑/모바일 무관) 상품을 쿠팡식 2열로 */
  .sh-grid{grid-template-columns:repeat(2,1fr)!important;gap:11px!important}
  .vh-desc{font-size:13px}
  .preview-stage{padding:14px}
  /* 시네마틱 */
  .cine-top{padding:15px 15px;gap:10px}
  .cine-skip{font-size:11.5px}
  .sc-tag{font-size:14px;padding:0 18px}
  .cap-sub{padding-right:20px}
  .cine-mall-grid{gap:10px}
}

@media (max-width:400px){
  .tbh-lbl{display:none}                   /* 대문 버튼 라벨 숨기고 아이콘만 */
  .tb-home{padding:0 11px}
  .skin-gallery{gap:10px}
}