/* [v25] mobile.css — 모바일 전용 레이어
 * ===================================================================
 * 규칙
 *   1. 브레이크포인트는 둘뿐입니다.  ≤560px 폰 / ≤900px 태블릿
 *      (기존에는 560·620·640·680·700·720·760·768 여덟 종류가 섞여 있었습니다)
 *   2. 색은 항상 토큰으로. 하드코딩 hex 를 새로 넣지 않습니다.
 *   3. 모바일 관련 규칙은 전부 이 파일에만 씁니다.
 *      app.bundle.css 의 모바일 블록은 순차적으로 이쪽으로 옮깁니다.
 *   4. index.html 의 마지막 <link> 라서, 여기 쓴 것이 이깁니다.
 *      !important 는 옛 규칙을 이겨야 할 때만 쓰고 주석을 답니다.
 */

:root{
  --mnav-h:58px;
  --mnav-safe:env(safe-area-inset-bottom,0px);
}

/* ===================================================================
   1. 하단 내비게이션
   =================================================================== */

.mnav{display:none}

@media (max-width:900px){
  .mnav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:1400;
    height:calc(var(--mnav-h) + var(--mnav-safe));
    padding-bottom:var(--mnav-safe);
    background:color-mix(in srgb, var(--v23-surface, #0f1520) 92%, transparent);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-top:1px solid var(--v23-line, #263242);
  }

  .mnav-tab{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    color:var(--v23-soft, #667284);
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
    transition:color .18s ease;
  }
  .mnav-tab b{
    font-size:10px;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1;
    white-space:nowrap;
  }
  .mnav-ico{display:block;width:22px;height:22px}
  .mnav-ico svg{
    width:100%;height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mnav-more .mnav-ico svg{stroke:none;fill:currentColor}

  /* 활성 탭 — 알약 배경 대신 아이콘 색 + 상단 2px 표시선 */
  .mnav-tab.is-active{color:var(--v23-accent, #ff4f7d)}
  .mnav-tab.is-active::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:26px;height:2px;
    border-radius:0 0 2px 2px;
    background:var(--v23-accent, #ff4f7d);
  }
  .mnav-tab:active{color:var(--v23-text, #f4f6f9)}

  /* 라이브 중일 때 켜지는 점 */
  .mnav-dot{
    position:absolute;
    top:9px;
    left:calc(50% + 8px);
    width:6px;height:6px;
    border-radius:50%;
    background:var(--v23-accent, #ff4f7d);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--v23-surface, #0f1520) 85%, transparent);
    animation:mnav-pulse 1.8s ease-in-out infinite;
  }
  @keyframes mnav-pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* 하단바에 콘텐츠가 가리지 않도록 */
  .app-shell,
  .app-main,
  .app-content{padding-bottom:calc(var(--mnav-h) + var(--mnav-safe) + 20px)}
}

@media (prefers-reduced-motion:reduce){
  .mnav-dot{animation:none}
}

/* ===================================================================
   2. 「더보기」 시트
   =================================================================== */

.mnav-sheet{
  position:fixed;
  inset:0;
  z-index:1500;
  display:flex;
  align-items:flex-end;
}
.mnav-sheet[hidden]{display:none}

.mnav-sheet-scrim{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  background:rgba(4,6,10,.62);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .22s ease;
  cursor:pointer;
}
.mnav-sheet.is-open .mnav-sheet-scrim{opacity:1}

.mnav-sheet-panel{
  position:relative;
  width:100%;
  max-height:82vh;
  overflow-y:auto;
  padding:8px 18px calc(22px + env(safe-area-inset-bottom,0px));
  border-radius:20px 20px 0 0;
  background:var(--v23-surface, #0f1520);
  border-top:1px solid var(--v23-line, #263242);
  box-shadow:0 -18px 44px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.mnav-sheet.is-open .mnav-sheet-panel{transform:translateY(0)}

.mnav-sheet-grip{
  width:38px;height:4px;
  margin:6px auto 14px;
  border-radius:99px;
  background:var(--v23-line-strong, #334154);
}

.mnav-sheet-panel header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.mnav-sheet-panel header span{
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--v23-accent, #ff4f7d);
  margin-bottom:6px;
}
.mnav-sheet-panel header strong{
  font-size:19px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--v23-text, #f4f6f9);
}
.mnav-sheet-x{
  flex:none;
  width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid var(--v23-line, #263242);
  border-radius:9px;
  background:none;
  cursor:pointer;
  color:var(--v23-muted, #8d98a8);
}
.mnav-sheet-x svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
}

.mnav-sheet-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.mnav-sheet-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:16px 6px;
  border:1px solid var(--v23-line, #263242);
  border-radius:13px;
  background:var(--v23-surface-2, #131b27);
  cursor:pointer;
  color:var(--v23-muted, #8d98a8);
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.mnav-sheet-item b{
  font-size:12px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--v23-text, #f4f6f9);
}
.mnav-sheet-item .mnav-ico{width:22px;height:22px}
.mnav-sheet-item .mnav-ico svg{
  width:100%;height:100%;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.mnav-sheet-item.is-active{
  border-color:var(--v23-accent, #ff4f7d);
  color:var(--v23-accent, #ff4f7d);
  background:color-mix(in srgb, var(--v23-accent, #ff4f7d) 12%, transparent);
}

.mnav-sheet-foot{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--v23-line, #263242);
  display:grid;
  gap:2px;
}
.mnav-sheet-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 2px;
  border:0;
  background:none;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--v23-muted, #8d98a8);
  -webkit-tap-highlight-color:transparent;
}
.mnav-sheet-line b{
  font-size:12.5px;
  font-weight:700;
  color:var(--v23-text, #f4f6f9);
}

body.mnav-sheet-open{overflow:hidden}

/* ===================================================================
   3. 테마 전환 버튼 — 동그라미가 아니라 텍스트 칩
   =================================================================== */

/* 기존 규칙이 `.v23-global-header #themeToggle{...!important}` 로 36×36 원형을
   강제하고 있어서, 같은 무게로 되받아야 이깁니다. ID + 클래스 + !important. */
#themeToggle.v24-theme-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 auto !important;   /* 상단바가 flex 라서 이걸 안 주면 20px 로 찌그러집니다 */
  box-sizing:border-box;
  width:auto !important;
  min-height:0 !important;
  max-height:none !important;
  min-width:0 !important;
  height:32px !important;
  padding:0 11px !important;
  border:1px solid var(--v23-line, #263242) !important;
  border-radius:9px !important;
  background:none !important;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px !important;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--v23-muted, #8d98a8) !important;
  white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
#themeToggle.v24-theme-toggle:hover{
  color:var(--v23-text, #f4f6f9) !important;
  border-color:var(--v23-line-strong, #334154) !important;
}

@media (max-width:560px){
  #themeToggle.v24-theme-toggle{
    height:30px !important;
    padding:0 9px !important;
    font-size:11px !important;
  }
}

/* ===================================================================
   4. 옛 모바일 크롬 잔재 차단
      마크업은 mobile-nav.js 가 걷어내지만, 혹시 남아도 안 보이게 합니다.
   =================================================================== */

.mobile-bottom-nav,
#mobileBottomNav,
.mobile-nav,
.bottom-mobile-nav,
[data-mobile-bottom-nav],
.mobile-floating-menu,
.mobile-menu-layer,
.mobile-sidebar-toggle,
.mobile-push-settings-button{
  display:none !important;   /* 옛 규칙이 !important 라서 같이 씁니다 */
}

/* ===================================================================
   5. 페이지 머리 — 모바일에서 겹치던 것 정리
   -------------------------------------------------------------------
   .v23-ui .live-hub-header::before 계열이 content:"05 / LIVE" 를
   position:absolute; top:7px 로 얹습니다. 데스크톱은 머리 위쪽 여백이
   충분해서 괜찮지만, 폰에서는 바로 아래 .eyebrow 와 그대로 겹칩니다.
   상단바에 이미 같은 문구(#pageEyebrow)가 나오므로 폰에서는 뺍니다.
   =================================================================== */

@media (max-width:900px){
  .v23-ui .live-hub-header::before,
  .v23-ui .poster-archive-header::before,
  .v23-ui .schedule-page-head::before,
  .v23-ui .up-rank-head::before,
  .v23-ui .vod-page-head::before{content:none !important}

  /* 페이지 머리를 한 가지 모양으로 통일합니다. */
  .live-hub-header,
  .poster-archive-header,
  .schedule-page-head,
  .up-rank-head,
  .vod-page-head,
  .v23-page-intro{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    padding:20px 0 16px !important;
    margin:0 0 18px !important;
    border-bottom:1px solid var(--v23-line, #263242);
  }
  .live-hub-header h1, .live-hub-header h2,
  .up-rank-head h1, .up-rank-head h2,
  .vod-page-head h1, .vod-page-head h2,
  .poster-archive-header h1, .poster-archive-header h2,
  .schedule-page-head h1, .schedule-page-head h2,
  .v23-page-intro h1{
    margin:2px 0 0 !important;
    font-size:30px !important;
    line-height:1.05 !important;
    letter-spacing:-.05em !important;
    color:var(--v23-text, #f4f6f9) !important;
  }
  .live-hub-header p, .up-rank-head p, .vod-page-head p,
  .poster-archive-header p, .schedule-page-head p, .v23-page-intro p{
    margin:0 !important;
    font-size:12.5px !important;
    line-height:1.6 !important;
    color:var(--v23-muted, #8d98a8) !important;
  }
  .live-hub-header .eyebrow, .v23-page-intro>span{
    font-size:9.5px !important;
    font-weight:800 !important;
    letter-spacing:.2em !important;
    color:var(--v23-accent, #ff4f7d) !important;
  }

  /* 머리에 붙은 버튼들은 한 줄로 눕히고 크기를 줄입니다. */
  .live-hub-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .live-hub-actions .btn{
    flex:1 1 auto;
    min-width:0;
    height:34px !important;
    padding:0 12px !important;
    font-size:12px !important;
    border-radius:9px !important;
  }
}

/* ===================================================================
   6. 라이브 카드 — 폰에서 한 화면에 두 장은 들어오게
   =================================================================== */

@media (max-width:560px){
  #liveCardGrid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  #liveCardGrid .live-stream-card{border-radius:12px !important}
  #liveCardGrid .live-card-body{padding:11px 12px 12px !important}
  #liveCardGrid .live-card-copy strong{font-size:13px !important}
  #liveCardGrid .live-card-copy p{
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
}

/* ===================================================================
   7. 홈 히어로 — 폰에서 화면 하나를 통째로 먹지 않게
   -------------------------------------------------------------------
   기존: #page-home .home-v23-hero{height:100svh!important}
   폰에서는 제목이 화면 맨 아래에 걸리고 위쪽 2/3 가 빈 검은 화면이라,
   첫 콘텐츠(오늘의 일정)를 보려면 1.4 화면을 스크롤해야 했습니다.
   높이를 줄이고 글을 위로 올려서, 히어로 아래로 다음 섹션이 살짝
   보이게 합니다. (스크롤할 게 더 있다는 신호)
   =================================================================== */

@media (max-width:900px){
  #page-home .home-v23-hero{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
  }
  #page-home .home-v23-hero-inner{
    min-height:58svh !important;
    padding:26px 20px 30px !important;
    justify-content:flex-end !important;
  }
  #page-home .home-v23-hero h1{
    font-size:clamp(30px,8.6vw,42px) !important;
    line-height:1.06 !important;
    max-width:none !important;
  }
  #page-home .home-v23-hero-copy{
    width:auto !important;
    max-width:none !important;
  }
  #page-home .home-v23-hero-copy>p{
    max-width:none !important;
    font-size:12px !important;
  }
  #page-home .home-v23-hero-actions{
    display:flex !important;
    flex-wrap:wrap;
    gap:8px !important;
    margin-top:16px !important;
  }
  #page-home .home-v23-hero-actions>*{
    flex:1 1 auto;
    min-width:0;
    height:42px !important;
    padding:0 16px !important;
    font-size:13px !important;
  }

  /* 데스크톱 장식 — 폰에서는 자리만 먹습니다. */
  #page-home .home-v23-scroll,
  #page-home .home-v23-hero-foot,
  #page-home .home-v23-hero-controls{display:none !important}
}

/* ===================================================================
   8. 홈 섹션 · 카드
   =================================================================== */

@media (max-width:560px){
  /* ON AIR 카드 제목이 한 줄에서 잘리던 것을 두 줄까지 허용 */
  .home-v23-live-title{
    white-space:normal !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.4 !important;
  }
  .home-v23-live-copy b{font-size:12.5px !important}

  /* 멤버 캐러셀 — 폰에서 화살표는 손가락에 안 맞고,
     이름 뒤 고스트 영문이 겹칩니다. 둘 다 뺍니다. */
  #page-home .home-v23-member-arrow{display:none !important}
  #page-home .home-v23-member-carousel{width:100% !important}
  /* 고스트 영문은 body.home-v23-page #page-home .home-v23-member... 로
     정의돼 있어서 같은 깊이로 받아야 이깁니다. */
  body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{
    display:none !important;
  }
}

/* ===================================================================
   9. 멤버 캐러셀 — 폰에서 오른쪽이 잘리던 것
   -------------------------------------------------------------------
   실측: 셀은 87px 인데 초상 이미지가 99px 이라 칸마다 12px 씩 넘쳤고,
   그게 누적돼 세 번째 멤버가 화면 밖으로 나갔습니다.
   화살표를 없앤 만큼 좌우 여백도 회수합니다.
   =================================================================== */

@media (max-width:560px){
  /* 이기는 규칙이 body.home-v23-page #page-home .home-v23-member... 깊이라서
     같은 깊이로 받습니다. 초상 99px + 위 여백 38px 이던 것을 줄여
     한 화면에 더 많은 멤버가 들어오게 합니다. */
  body.home-v23-page #page-home .home-v23-member-strip{
    grid-template-columns:repeat(var(--member-count,12),80px) !important;
    gap:10px !important;
    padding:14px 2px 14px !important;
  }
  body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{
    width:72px !important;
    height:72px !important;
    margin-top:6px !important;
    margin-bottom:11px !important;
  }
}

/* ===================================================================
   10. 플로팅 버튼 모드
   -------------------------------------------------------------------
   mobile-nav.js 의 NAV_MODE 로 켜고 끕니다. 스크립트가 <html> 에
   data-mnav-mode 를 붙이므로, 아래 규칙은 그 모드일 때만 적용됩니다.
   =================================================================== */

.mnav-fab{display:none}

@media (max-width:900px){
  html[data-mnav-mode="floating"] .mnav-fab{
    position:fixed;
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    z-index:1400;
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    padding:0;
    border:1px solid color-mix(in srgb, var(--v23-accent, #ff4f7d) 42%, transparent);
    border-radius:18px;
    background:color-mix(in srgb, var(--v23-surface, #0f1520) 88%, transparent);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(4,6,10,.55);
    color:var(--v23-accent, #ff4f7d);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s ease, border-color .18s ease;
  }
  html[data-mnav-mode="floating"] .mnav-fab:active{transform:scale(.94)}
  html[data-mnav-mode="floating"] .mnav-fab-ico{display:block;width:23px;height:23px}
  html[data-mnav-mode="floating"] .mnav-fab-ico svg{
    width:100%;height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linejoin:round;
  }
  html[data-mnav-mode="floating"] .mnav-fab .mnav-dot{
    position:absolute;
    top:8px;right:8px;
    left:auto;
  }

  /* 플로팅 모드에는 하단바가 없으니, 하단바용 여백을 되돌립니다. */
  html[data-mnav-mode="floating"] .app-shell,
  html[data-mnav-mode="floating"] .app-main,
  html[data-mnav-mode="floating"] .app-content{
    padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));
  }

  /* 시트가 열려 있는 동안에는 버튼을 숨깁니다. 시트 위에 겹칩니다. */
  body.mnav-sheet-open .mnav-fab{opacity:0;pointer-events:none}
}

/* ===================================================================
   11. 캘린더 — 폰에서 PC 월간 캘린더가 같이 보이던 문제
   -------------------------------------------------------------------
   원래 의도는 app.bundle.css:1090 에 이미 있었습니다.
       @media(max-width:760px){ .schedule-layout{display:none!important} }
   그런데 7,400 줄 아래 8495 줄에 미디어쿼리 없는 규칙이 덧붙어 있습니다.
       #page-calendar .schedule-layout{display:grid!important; ...}
   셀렉터가 더 구체적(ID 포함)이고 뒤에 있어서 모든 화면 폭에서 이깁니다.
   그래서 폰에서도 월간 캘린더가 살아나, 모바일 주간 뷰 아래에
   980px 짜리 표가 화면(346px)을 넘겨 붙어 있었습니다.

   여기서만 760px 을 쓰는 이유:
   모바일 주간 뷰(#mobileScheduleApp)를 켜는 규칙이 max-width:760px 이라,
   같은 값을 써야 "둘 다 없는" 구간이 안 생깁니다.
   =================================================================== */

@media (max-width:760px){
  #page-calendar .schedule-layout,
  #page-calendar .schedule-layout[style]{display:none !important}
}