/**
 * 사용자 페이지 「모바일 전용 테마」 — yabam69 모바일 스타일 차용.
 *
 *  · ≤ 768px : 데스크톱 chrome (`#hd` `#tnb` `#hd_wrapper` `#navigation` `#ft`)
 *              을 전부 숨기고, mobile-shell.js 가 주입한 m-shell-* 만 표시
 *  · 모바일 셸은 상단 고정 헤더(56px) + 하단 고정 탭바(60px + safe-area) + 좌측
 *    슬라이드 드로어 + 본문(스크롤 영역) 으로 구성된다.
 *  · 본문 콘텐츠(`#container`, `.m-album-grid`, 폼 등) 는 풀폭으로 흐르고
 *    카드/리스트는 1~2열 그리드로 정리된다.
 *  · 색상: 다크네이비(#0a0e1a) + 골드 액센트(#cca354).
 */

/* Anti-FOUC 는 default_shop.css 상단으로 이전됨 (가장 빠르게 로드되는 site CSS).
   여기서는 .back-btn-wrap 만 별도로 다룬다. */

/* 페이지 전환 직후 본문이 늦게 채워지는 동안, 「← 메인으로 돌아가기」 버튼이
   잠깐 화면 한가운데로 떠 보였다가 콘텐츠가 채워지면 아래로 내려가 보이는
   '버튼이 뜨고 사라지는' 잔상이 있었다. 데이터 로드 완료 전까지 숨김. */
.back-btn-wrap { visibility: hidden; }
html.dom-ready .back-btn-wrap { visibility: visible; }

/* ───────── 글로벌 가드 ───────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip; /* 1px 단위 초과폭으로 가로 스크롤·좌우 흔들림 완화 */
  /* iOS Safari rubber-band(끝에서 당기면 튕기는) 효과 억제. iOS 16+ 에서 동작.
     하단 탭바·푸터 근처 스크롤 시 visualViewport 가 미세하게 이동해 흔들림이
     생기는 것을 같이 줄여 준다. */
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}
img, video, iframe { max-width: 100%; height: auto; }

/* theme/basic/css/layout.css 가 여러 페이지에서 </body> 직전에 로드되며
   `html, body { background: transparent }` 로 html 배경을 지운다 → UA 흰 캔버스가
   본문·채팅 위젯 아래로 드러남. 모바일·데스크톱 공통으로 복구한다.
   페이지 전환 시 body 가 opacity:0 으로 페이드되는데 #bg-animation (보라색 그라
   디언트 배경) 도 body 자손이라 같이 사라져 「검은 화면」 으로 깜빡여 보였다.
   html 자체에 사이트 메인 배경(보라 그라디언트)을 깔아서 전환 중에도 동일한
   톤이 유지되도록 한다. */
/* html 자체에 메인 톤을 깔아 전환 페이드 중에도 붕 뜨지 않게 함.
   background-attachment:fixed 는 스크롤 시 매 프레임 합성 비용이 커서 제거하고
   scroll 로 둔다(긴 문서는 html 높이에 맞춰 그라디언트가 함께 늘어남). */
html {
  min-height: 100%;
  background-color: #2c1638 !important;
  background-image: linear-gradient(135deg, #2f183b 0%, #3c204b 35%, #2c1638 70%, #22122d 100%) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ─────────────────────────────────────────────────────────────
   ≤ 768px — 모바일 전용 테마 활성화
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 모바일 홈 preinit:
     home.html 정적 데스크톱 마크업이 먼저 보였다가 mobile-shell 이 덮는
     깜빡임(다른 페이지가 잠깐 보이는 느낌)을 방지한다. */
  html.m-home-preinit #hd,
  html.m-home-preinit #topbanner,
  html.m-home-preinit #container,
  html.m-home-preinit .inner,
  html.m-home-preinit #ft {
    display: none !important;
  }

  /* ① 데스크톱 chrome 숨김 — 레거시 gnuboard 헤더/푸터/네비 통째로 제거
     · #hd 는 theme 의 min-width:1300px 를 그대로 갖고 있어, 자식(#tnb 등)만
       숨기면 문서 가로 폭이 1300px 로 남아 전체가 좌우로 흔들린다(가로 스크롤). */
  #hd, #hd_wrapper2,
  #tnb, #hd_wrapper, #navigation, #ft,
  #topbanner,                       /* 분홍 신규 안내 배너 — 모바일에선 모바일 토픽 배너로 대체됨 */
  .skipNav, #skipNav,
  /* 우측 페이지 점프, 폰트 사이즈 변경 등 부수적 위젯 */
  .no_text_resize { display: none !important; }

  /* ①-1 서브 페이지 (이용약관/개인정보처리방침 등) inline 스타일이
     걸어둔 #container { padding-top: 160px } 데스크톱 전용 헤더 보정값을
     0 으로 리셋. body 자체에 m-shell-header(56px) 만큼 padding-top 이
     이미 적용되어 있으므로 #container 는 추가 패딩이 필요 없다. */
  #container { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* ② body : 상단 헤더(56px) + 하단 탭바(60px + 홈 인디케이터 safe-area) 만큼 패딩 */
  body {
    margin: 0;
    padding: 56px 0 calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    background: #0a0e1a;
    color: #e2e8f0;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }

  /* ③ 메인 컨테이너 풀폭 — theme #container min-width:1300px 등 완화 */
  #wrapper, #container, .container, .wrapper, .sub_wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    background: transparent !important;
  }

  /* 서브 비주얼 배너 — desktop 전용 min-width:1300px 만 제거(여백·높이는 유지) */
  .sub_banner {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ───── 모바일 셸: 상단 헤더 ───── */
  .m-shell-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(180deg, #0f172a 0%, #0a0e1a 100%);
    border-bottom: 1px solid rgba(204,163,84,0.2);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px;
    z-index: 9999;
  }
  .m-shell-header .m-logo {
    display: flex; align-items: center;
    text-decoration: none; gap: 8px;
  }
  .m-shell-header .m-logo img {
    width: 170px;
    height: 34px;
    max-height: 34px;
    object-fit: contain;
    object-position: left center;
  }
  .m-shell-header .m-actions { display: flex; align-items: center; gap: 8px; }
  .m-shell-header .m-auth-slot { display: inline-flex; align-items: center; gap: 6px; }

  /* 로그인 트리거(모바일) — site-auth-ui 기본 스타일을 모바일 전용으로 내장 */
  .m-shell-header .sa-trigger {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding: 4px 12px 4px 4px !important;
    font-size: 12px !important;
    gap: 8px !important;
    background: linear-gradient(135deg, rgba(8,18,33,0.85), rgba(15,30,52,0.65)) !important;
    border: 1px solid rgba(204,163,84,0.40) !important;
    border-radius: 999px !important;
    color: #f7e7c4 !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    transition: all .22s ease !important;
    backdrop-filter: blur(6px) !important;
  }
  .m-shell-header .sa-trigger:hover {
    border-color: #e8c47a !important;
    box-shadow: 0 6px 22px rgba(204,163,84,0.28) !important;
  }
  .m-shell-header .sa-trigger.is-open { border-color: #fde68a !important; }
  .m-shell-header .sa-pts {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 11px 6px 8px !important;
    background: linear-gradient(135deg, #fde68a 0%, #facc15 45%, #cca354 100%) !important;
    color: #3a2200 !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 0 0 1px rgba(255,236,179,0.5) inset, 0 0 14px rgba(250,204,21,0.55), 0 2px 6px rgba(204,163,84,0.45) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
    animation: saPtsPulse 3.2s ease-in-out infinite;
  }
  .m-shell-header .sa-pts-gem {
    width: 12px !important;
    height: 12px !important;
    flex: none !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  }
  .m-shell-header .sa-pts-num { font-weight: 800 !important; }
  .m-shell-header .sa-pts-unit { font-size: 10px !important; }
  @keyframes saPtsPulse {
    0%,100% {
      box-shadow: 0 0 0 1px rgba(255,236,179,0.5) inset, 0 0 14px rgba(250,204,21,0.55), 0 2px 6px rgba(204,163,84,0.45);
    }
    50% {
      box-shadow: 0 0 0 1px rgba(255,236,179,0.6) inset, 0 0 22px rgba(250,204,21,0.85), 0 2px 8px rgba(204,163,84,0.55);
    }
  }
  .m-shell-header .sa-mini-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 10.5px !important;
    border-radius: 50% !important;
    color: #1a0e02 !important;
    font-weight: 800 !important;
    background: radial-gradient(circle at 30% 25%, #fde68a 0%, #cca354 60%, #8a6420 100%) !important;
    box-shadow: 0 0 0 1px rgba(255,236,179,0.55) inset, 0 1px 4px rgba(0,0,0,0.45), inset 0 -3px 6px rgba(0,0,0,0.20), inset 0 3px 6px rgba(255,255,255,0.30) !important;
    flex: none !important;
  }
  .m-shell-header .sa-name { max-width: 64px !important; font-size: 12px !important; }
  .m-shell-header .sa-mini-avatar + .sa-name { margin-left: -2px !important; }
  .m-shell-header .sa-caret {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid currentColor !important;
    opacity: .65 !important;
    margin-left: 2px !important;
    transition: transform .22s ease !important;
  }
  .m-shell-header .sa-trigger.is-open .sa-caret {
    transform: rotate(-180deg) !important;
    opacity: 1 !important;
  }

  /* 너무 좁은 화면(≤360px)에서는 닉네임 숨김 — 잼펠 + 아바타 + 캐럿만 */
  @media (max-width: 360px) {
    .m-shell-header {
      padding: 0 10px;
    }
    .m-shell-header .m-actions {
      gap: 6px;
    }
    .m-shell-header .m-logo img {
      max-height: 30px;
    }
    .m-shell-header .m-actions a {
      height: 28px;
      min-width: 46px;
      padding: 0 10px;
      font-size: 11.5px;
    }
    .m-shell-header .m-hamburger {
      width: 34px;
      height: 34px;
    }
    .m-shell-header .m-hamburger span {
      width: 20px;
    }
    .m-shell-header .sa-name { display: none !important; }
  }

  /* 초소형 폭(≤340px) — 버튼/간격을 한 단계 더 압축 */
  @media (max-width: 340px) {
    .m-shell-header {
      padding: 0 8px;
    }
    .m-shell-header .m-actions {
      gap: 5px;
    }
    .m-shell-header .m-logo img {
      max-height: 28px;
    }
    .m-shell-header .m-actions a {
      height: 27px;
      min-width: 42px;
      padding: 0 8px;
      font-size: 11px;
    }
    .m-shell-header .m-hamburger {
      width: 32px;
      height: 32px;
    }
    .m-shell-header .m-hamburger span {
      width: 18px;
    }
  }

  /* 주류 소형폭(361~390px) — 기본보다 약간 컴팩트 */
  @media (min-width: 361px) and (max-width: 390px) {
    .m-shell-header {
      padding: 0 12px;
    }
    .m-shell-header .m-actions {
      gap: 7px;
    }
    .m-shell-header .m-logo img {
      max-height: 32px;
    }
    .m-shell-header .m-actions a {
      min-width: 50px;
      padding: 0 11px;
    }
  }

  /* 주류 대형폰(391~430px) — 여유폭에 맞춰 기본 비율 유지 */
  @media (min-width: 391px) and (max-width: 430px) {
    .m-shell-header {
      padding: 0 14px;
    }
    .m-shell-header .m-actions {
      gap: 8px;
    }
    .m-shell-header .m-logo img {
      max-height: 34px;
    }
    .m-shell-header .m-actions a {
      min-width: 52px;
      padding: 0 12px;
    }
  }

  /* 팝업 — 헤더 우측에 붙되 화면 밖으로 못 나가게 (right 음수는 가로 오버플로 유발) */
  .m-shell-header .sa-pop {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    max-width: calc(100vw - 24px) !important;
    width: 280px !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    background: linear-gradient(160deg, #0a1d33 0%, #091221 100%) !important;
    border: 1px solid rgba(204,163,84,0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(204,163,84,0.12) inset !important;
    padding: 6px !important;
    color: #e8d8b1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity .18s ease, transform .22s cubic-bezier(0.34,1.56,0.64,1);
  }
  .m-shell-header .sa-pop.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .m-shell-header .sa-pop, .m-shell-header .sa-pop * { box-sizing: border-box; }
  /* 카드(.sa-card)와 첫 메뉴 줄 시각적 겹침 시에도 탭이 클릭을 우선 받도록
     카드 영역은 정보 표시 전용이므로 pointer-events 를 끈다. */
  .m-shell-header .sa-card {
    position: relative;
    z-index: 1;
    pointer-events: none;
    padding: 14px 14px 12px;
    background: linear-gradient(155deg, rgba(204,163,84,0.16), rgba(204,163,84,0.04) 60%, transparent);
    border-radius: 10px;
    border: 1px solid rgba(204,163,84,0.18);
    margin-bottom: 6px;
  }
  .m-shell-header .sa-card .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0 0 4px 0;
    color: #cfdef0;
  }
  .m-shell-header .sa-card .row:last-child { margin-bottom: 0; }
  .m-shell-header .sa-card .label { color: #8aa2bd; font-weight: 500; }
  .m-shell-header .sa-card .value {
    color: #f5e7c4;
    font-weight: 700;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-shell-header .sa-card .value.point {
    color: #facc15;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .m-shell-header .sa-card .value.level-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(204,163,84,0.18);
    border: 1px solid rgba(204,163,84,0.4);
    color: #f5e7c4;
    font-size: 11.5px;
    font-weight: 700;
  }
  .m-shell-header .sa-menu {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 2px 0;
    position: relative;
    z-index: 3;
    margin-top: 8px !important;
    pointer-events: auto !important;
  }
  .m-shell-header .sa-divider {
    height: 1px;
    background: rgba(204,163,84,0.22);
    margin: 3px 4px;
  }
  .m-shell-header .sa-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e8d8b1;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    line-height: 1.2;
    position: relative;
    z-index: 4;
    pointer-events: auto !important;
    transition: background .15s ease, color .15s ease;
  }
  .m-shell-header .sa-menu-item:hover { background: rgba(204,163,84,0.16); color: #fff8e3; }
  .m-shell-header .sa-menu-item.danger { color: #ff9b9b; }
  .m-shell-header .sa-menu-item.danger:hover { background: rgba(255,82,82,0.12); color: #ffb6b6; }
  .m-shell-header .sa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    opacity: .85;
    margin-right: 6px;
  }
  .m-shell-header .sa-icon svg { display: block; transform: translateY(-1px); }
  .m-shell-header .m-actions a {
    /* 글자 수가 달라도(로그인 3자 vs 가입 2자) 박스 크기는 같게.
       inline-flex + 고정 height + min-width 로 시각적 동일성 보장. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 30px;
    min-width: 52px;
    padding: 0 12px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid rgba(148,163,184,0.25);
  }
  .m-shell-header .m-actions a.primary {
    background: linear-gradient(135deg, #cca354, #b8913e);
    color: #0a0e1a;
    border-color: transparent;
    font-weight: 700;     /* 강조용 — height/min-width 가 동일하므로 박스는 동일 */
  }
  .m-shell-header .m-hamburger {
    background: none; border: none; cursor: pointer;
    width: 36px; height: 36px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 4px; padding: 0;
  }
  .m-shell-header .m-hamburger span {
    display: block; width: 22px; height: 2px;
    background: #e2e8f0;
    transition: transform 0.25s, opacity 0.25s;
  }
  .m-shell-header .m-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .m-shell-header .m-hamburger.active span:nth-child(2) { opacity: 0; }
  .m-shell-header .m-hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ───── 모바일 셸: 하단 탭바 ─────
     전역 border-box 에서 height·padding-bottom 를 같이 쓰면 WebKit 이
     safe-area 를 기대와 다르게 쌓는 경우가 있어, 탭만 content-box 로 분리. */
  .m-shell-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: content-box !important;
    width: auto;
    height: 60px;
    margin: 0;
    padding: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #0f172a;
    border-top: 1px solid rgba(204,163,84,0.2);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    z-index: 9998;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* 입력 포커스(가상 키보드) · 입금신청 모달: 탭바가 콘텐츠/모달과 겹치지 않게 숨김.
     m-shell-keyboard-open 은 채팅 FAB 등에서 참조. m-shell-shop-modal-open 은 shop.js 가 토글. */
  body.m-shell-keyboard-open .m-shell-tabbar,
  body.m-shell-shop-modal-open .m-shell-tabbar {
    transform: translateY(calc(100% + 8px));
    opacity: 0;
    pointer-events: none;
  }
  .m-shell-tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #64748b; text-decoration: none;
    font-size: 10px; gap: 2px;
    transition: color 0.2s;
  }
  .m-shell-tabbar a .m-icon { font-size: 22px; line-height: 1; }
  .m-shell-tabbar a.active,
  .m-shell-tabbar a:hover { color: #cca354; }

  /* ───── 모바일 셸: 슬라이드 드로어 ─────
     오버레이는 본문이 어렴풋이 비치도록 살짝 투명(0.30) + blur 6px.
     완전 불투명에 가까운 어두운 마스크는 드로어 옆에 "빈 검은 띠"
     같은 인상을 주어 사용자가 여백으로 오해한다. */
  .m-shell-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
  }
  .m-shell-overlay.open { opacity: 1; pointer-events: auto; }

  .m-shell-nav {
    /* 좌측 슬라이드 드로어 — 콘텐츠 길이에 맞춰 폭/높이 자동.
       transform 기반 슬라이드라 width 가 가변이어도 어색함이 없음.
       오른쪽 모서리는 둥글게(부드러운 카드 느낌). */
    position: fixed; top: 8px; left: 0;
    width: auto;
    min-width: 240px;
    max-width: 86vw;
    height: auto;
    max-height: calc(100vh - 16px);
    background: #0f172a;
    border-right: 1px solid rgba(204,163,84,0.25);
    border-radius: 0 18px 18px 0;
    /* 그림자는 가벼운 우측 페이드만 — 너무 진하면 "검은 띠" 처럼 보임 */
    box-shadow: 2px 0 12px rgba(0,0,0,0.35);
    z-index: 10001;
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 0 0 16px;
    /* 라운드 코너에서 자식 배경(헤더 등)이 삐져나오지 않게 */
    isolation: isolate;
  }
  .m-shell-nav.open { transform: translateX(0); }
  .m-shell-nav .m-nav-head {
    height: 56px;
    background: linear-gradient(135deg, #cca354, #b8913e);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    color: #0a0e1a;
    /* 부모의 border-radius 와 동일하게 우상단 라운딩 — overflow 클리핑이
       작동 안 하는 브라우저에서도 안전하게 둥글게 보이도록. */
    border-top-right-radius: 18px;
  }
  .m-shell-nav .m-nav-head .who {
    font-size: 14px; font-weight: 700;
  }
  .m-shell-nav .m-nav-close {
    background: none; border: none; cursor: pointer;
    color: #0a0e1a; font-size: 24px;
    line-height: 1; padding: 4px 8px;
  }
  .m-shell-nav .m-nav-section {
    padding: 14px 16px 6px;
    color: #64748b; font-size: 11px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
  }
  .m-shell-nav ul {
    list-style: none; margin: 0; padding: 0;
  }
  .m-shell-nav ul li a {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px;
    color: #e2e8f0; text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid rgba(148,163,184,0.06);
    transition: background 0.15s;
  }
  .m-shell-nav ul li a:hover,
  .m-shell-nav ul li a.active {
    background: rgba(204,163,84,0.08);
    color: #cca354;
  }
  .m-shell-nav ul li a .m-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    line-height: 1;
  }

  /* ───── 모바일 셸: 상단 띠배너 (옵션) ─────
     · 어두운 페이지 배경 위에서 시선이 가도록 밝은 골드 + 따뜻한 글로우.
     · 핵심 키워드는 강조 칩(붉은) / 다크칩(골드) 조합으로 대비를 만든다. */
  .m-topbanner {
    background: linear-gradient(135deg, #fde047 0%, #facc15 50%, #f59e0b 100%);
    color: #1a0a00;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 12px;
    margin: 0 12px 14px;
    border-radius: 10px;
    line-height: 1.5;
    box-shadow:
      0 4px 16px rgba(250, 204, 21, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .m-topbanner a,
  .m-topbanner .m-topbanner-text { color: inherit; text-decoration: none; display: block; }
  .m-topbanner mark {
    background: #1a0a00;
    color: #fde047;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 11px;
    margin-right: 5px;
    letter-spacing: 0.3px;
  }
  .m-topbanner span {
    color: #dc2626;
    font-weight: 800;
    text-decoration: none;
  }

  /* ───── 모바일 본문: 메인 슬라이더(배너) ─────
     · 원본 배너는 29:9(약 3.22:1)의 와이드 hero 지만, 그 비율을 그대로
       두면 모바일 화면에서 너무 납작해 시각적 무게감이 약해진다.
       16:9 는 좌우가 너무 많이 잘려 카피가 가려지는 문제가 있어,
       타협점인 21:9 (시네마틱) 를 채택. 이렇게 하면 좌우 약 16%
       정도만 살짝 잘려 메인 카피는 남고 hero 높이도 충분히 확보됨.
     · object-fit: cover — 이미지가 박스를 꽉 채우도록 유지. */
  .m-slider {
    margin: 0 12px 14px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #0f172a;
    aspect-ratio: 21 / 9;
  }
  .m-slider .slide-wrap {
    display: flex;
    transition: transform 0.4s ease;
    margin: 0; padding: 0; list-style: none;
    height: 100%;
  }
  .m-slider .slide-wrap > li {
    flex: 0 0 100%;
    list-style: none;
    height: 100%;
  }
  .m-slider .slide-wrap > li img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .m-slider-dots {
    position: absolute; bottom: 8px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
  }
  .m-slider-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
  }
  .m-slider-dots span.active {
    background: #cca354; width: 18px; border-radius: 4px;
  }

  /* ───── 모바일 본문: 소개 영상 ───── */
  .m-video-section {
    margin: 0 12px 16px;
  }
  .m-video-wrap {
    background: #0f172a;
    border-radius: 12px;
    padding: 14px 12px 12px;
    border: 1px solid rgba(204,163,84,0.12);
  }
  .m-video-wrap h2 {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    letter-spacing: 0.2px;
  }
  .m-video-wrap video {
    width: 100%;
    display: block;
    border-radius: 8px;
    background: #000;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* ───── 모바일 본문: 4개 빠른 메뉴 ───── */
  .m-quick-menu {
    margin: 0 12px 16px;
    background: #0f172a;
    border-radius: 12px;
    padding: 14px 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .m-quick-menu .m-quick-item {
    text-decoration: none;
    color: #e2e8f0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background 0.15s;
  }
  .m-quick-menu .m-quick-item:hover { background: rgba(204,163,84,0.1); }
  .m-quick-menu .m-quick-item img,
  .m-quick-menu .m-quick-item .m-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: #cca354;
    background: rgba(204,163,84,0.12);
    border-radius: 50%;
  }
  .m-quick-menu .m-quick-item span {
    font-size: 11px; line-height: 1.2; text-align: center;
  }

  /* ───── 모바일 본문: 섹션 제목 ───── */
  .m-section-title {
    margin: 18px 12px 10px;
    color: #f8fafc; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
  }

  /* ───── 모바일 본문: 이달의 베스트 (가로 스와이프 카드) ───── */
  .m-monthly-list {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding: 0 12px 6px;
    margin-bottom: 6px;
  }
  .m-monthly-list::-webkit-scrollbar { display: none; }
  .m-monthly-card {
    flex: 0 0 110px;
    text-decoration: none;
    text-align: center;
  }
  .m-monthly-card img {
    width: 110px; height: 140px; object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(204,163,84,0.2);
  }
  .m-monthly-card span {
    display: block;
    margin-top: 6px;
    color: #e2e8f0; font-size: 12px;
  }

  /* ───── 모바일 본문: 여성앨범 그리드 ───── */
  .m-album-section { margin-bottom: 20px; }
  .m-album-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px;
  }
  .m-album-item {
    background: #0f172a;
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .m-album-item .item-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1e293b;
  }
  .m-album-item .item-img img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .m-album-item .info {
    padding: 10px 10px 12px;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  /* ⚠ Legacy theme/basic/skin/shop/basic/style.css 의 .sorting / .sorting span
     이 height:44px / padding-top:12px / width:86px / line-height:22px 을
     강제로 박아두고 있어, 모바일 카드의 좁은 pill 이 fixed 86px 으로
     늘어나고 위쪽에 12px 빈 공간이 생긴다. 모바일 카드 안에서는
     명시적으로 width:auto / height:auto / padding-top:0 으로 풀어준다.   */
  .m-album-item .info .sorting {
    display: flex; gap: 8px; flex-wrap: nowrap;
    /* 태그 ↔ 이름 사이 — 7px 정도로 시각적 숨통 확보 */
    margin-bottom: 7px;
    /* 태그 칩이 1~4 개로 다양하므로, 카드 안에서 가운데 정렬해
       시각적으로 균형 잡히게 한다. */
    justify-content: center;
    height: auto;
    padding-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
    text-align: center;
  }
  .m-album-item .info .sorting::-webkit-scrollbar { display: none; }
  /* 태그 pill — 전용 앨범 페이지(.album-item .sorting span) 스타일과
     동일한 stroke + fill 톤. line-height 와 padding 을 모바일 셀에 맞게
     컴팩트하게 잡아 한글 자모가 짓눌리지 않으면서도 행 높이를 최소화. */
  .m-album-item .info .sorting span {
    display: inline-block;
    /* 레거시 .sorting span { width:86px } 을 무력화 — 콘텐츠 폭으로 자동 */
    width: auto;
    flex: 0 0 auto;
    font-size: 10.5px;
    line-height: 1.3;
    color: #cca354;
    background: rgba(204,163,84,0.15);
    border: 1px solid rgba(204,163,84,0.30);
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
    /* 레거시 nth-child(2) margin:3px 가 가운데 칩만 들뜨게 만드는 것 차단 */
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 두 번째 칩만 leak 으로 margin:3px 가 붙는 케이스를 추가로 잠금 */
  .m-album-item .info .sorting span:nth-child(2) { margin: 0; }
  .m-album-item .info .member-info {
    display: flex; align-items: center; gap: 6px;
    /* 이름 ↔ 상세(나이/키/몸무게) 사이 — 5px 로 약간 더 띄움 */
    margin-bottom: 5px;
  }
  .m-album-item .info .member-info .name {
    color: #f1f5f9; font-size: 14px; font-weight: 700;
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-album-item .info .member-info .recommend {
    background: linear-gradient(135deg, #cca354, #b8913e);
    color: #0a0e1a;
    font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 700;
  }
  .m-album-item .info .details {
    color: #94a3b8; font-size: 11px;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  /* status-box / btn — album-card.css 의 .album-item 과 동일한 룩(녹색 박스 + 핑크 그라데이션 버튼)을
     모바일 사이즈에 맞춰 축소 적용. admin 「실시간 미리보기」 = /album = home grid 가 한 화면을 공유한다. */
  .m-album-item .info .status-box {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    font-size: 11px; font-weight: 600;
    padding: 6px 10px; border-radius: 8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .m-album-item .info .status-box img { width: 14px; height: 14px; }
  .m-album-item .info .status-box.available {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
  }
  .m-album-item .info .status-box.dating {
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.3);
  }
  .m-album-item .info .status-box.pending {
    background: rgba(249, 191, 59, 0.15);
    border: 1px solid rgba(249, 191, 59, 0.4);
  }
  .m-album-item .info .status-box.available span { color: #4caf50; }
  .m-album-item .info .status-box.dating    span { color: #ff5252; }
  .m-album-item .info .status-box.pending   span { color: #facc15; }
  .m-album-item .info .btn {
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #ffffff; font-weight: 700;
    padding: 9px 14px; border-radius: 18px;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .m-album-item .info .btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
  }
  .m-album-item .info .btn.gray {
    background: #666;
    color: #e2e8f0;
    box-shadow: none;
    cursor: not-allowed;
  }

  /* ───── 모바일 본문: 일반 폼(로그인/가입 등) ─────
     사용자면 페이지(login/signup/mypage…)는 모두 자체 카드/.mp-* 룩으로 그려져
     레거시 GnuBoard 스킨용 래퍼(.login_box / .register_form / .form_01 / .m-form-shell)
     는 더 이상 마크업에 없음 → 본 저장소에선 통용 input·button 룰만 남긴다. */
  input[type=text], input[type=password], input[type=email],
  input[type=tel], input[type=number], input[type=date],
  textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;       /* iOS 자동확대 방지 */
    padding: 11px 14px;
    background: #1e293b;
    border: 1px solid rgba(148,163,184,0.2);
    color: #f1f5f9;
    border-radius: 8px;
    margin: 4px 0;
  }
  input[type=submit], input[type=button], button.btn_submit {
    width: 100% !important;
    background: linear-gradient(135deg, #cca354, #b8913e) !important;
    color: #0a0e1a !important;
    border: none !important;
    padding: 12px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin: 8px 0 !important;
    cursor: pointer;
  }

  /* ───── 모바일 본문: 게시판 / 공지 / FAQ 리스트 ───── */
  .tbl_head01, .tbl_wrap, .tbl_box {
    margin: 0 12px;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    padding: 4px;
  }
  .tbl_head01 table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse;
  }
  .tbl_head01 thead { display: none; } /* 헤더 행 숨김 */
  .tbl_head01 td {
    display: block;
    padding: 4px 8px;
    border: none !important;
    color: #cbd5e1;
  }
  .tbl_head01 tr {
    display: block;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(148,163,184,0.08);
  }
  .tbl_head01 td.title, .tbl_head01 td .title {
    color: #f1f5f9;
    font-weight: 600;
    font-size: 14px;
  }
  .tbl_head01 td.title a, .tbl_head01 td a { color: inherit; text-decoration: none; }
  .tbl_head01 .num, .tbl_head01 .datetime, .tbl_head01 td.datetime,
  .tbl_head01 .name { font-size: 11px; color: #64748b; }

  /* FAQ 아코디언 */
  .faq-list .faq-item {
    margin: 8px 12px;
    background: #0f172a;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.1);
    overflow: hidden;
  }
  .faq-list .faq-question {
    padding: 14px;
    color: #f1f5f9;
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .faq-list .faq-question::before {
    content: 'Q.'; color: #cca354; font-weight: 700;
  }
  .faq-list .faq-answer {
    display: none;
    padding: 0 14px 14px;
    color: #cbd5e1; font-size: 13px;
    line-height: 1.6;
    border-top: 1px solid rgba(148,163,184,0.08);
  }
  .faq-list .faq-item.open .faq-answer { display: block; }

  /* 페이지 네이션 */
  .pg_wrap, .pagination {
    margin: 16px auto;
    text-align: center;
  }
  .pg_wrap a, .pg_wrap strong, .pagination a {
    display: inline-block;
    padding: 6px 11px;
    margin: 0 2px;
    background: #1e293b;
    color: #cbd5e1;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
  }
  .pg_wrap strong, .pg_wrap a.on, .pagination a.active {
    background: linear-gradient(135deg, #cca354, #b8913e);
    color: #0a0e1a; font-weight: 700;
  }

  /* mypage 카드 / 표 */
  .mp-card, .mp-section {
    background: #0f172a;
    border-radius: 12px;
    margin: 0 12px 12px;
    padding: 14px;
    border: 1px solid rgba(148,163,184,0.1);
  }
  .mp-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .mp-table-wrap table { min-width: 480px; }

  /* shop 상품 그리드 */
  .shop-grid, #shop_list, .item-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px;
  }
  .shop-grid > *, .item-list > * {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* 모달 — 사용자면은 모두 .mp-modal 사용 (admin 의 .modal-box 등은 영향 안 받게 한정) */
  .mp-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
  }

  #chat-widget-btn {
    width: 54px !important;
    height: 54px !important;
    font-size: 22px !important;
    z-index: 100000 !important;
  }

  /* 모바일 푸터 (간단한 버전 — 본문 아래).
     비홝(서브페이지)에서는 숨기고, 모바일 홈(body.is-mobile-home) 에만 표시. */
  .m-shell-footer {
    display: none !important;
    padding: 18px 16px 24px;
    color: #64748b; font-size: 11px;
    text-align: center;
    line-height: 1.6;
  }
  .m-shell-footer .ft-links {
    margin-bottom: 10px;
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  }
  .m-shell-footer .ft-links a {
    color: #94a3b8; text-decoration: none; font-size: 12px;
  }
  .m-shell-footer .ft-links a:hover { color: #cca354; }
  .m-shell-footer .copyright {
    margin-top: 6px;
    color: #475569; font-size: 10px;
  }

  /* 데스크톱 사이드 어카운트 메뉴 — 모바일에선 드로어 안에 합치므로 숨김.
     단, m-shell-header 안의 .sa-menu (모바일 회원 드롭다운) 는 노출. */
  #side-account, .side-account-popup,
  body > .sa-menu, #tnb .sa-menu { display: none !important; }
  .m-shell-header .sa-menu { display: flex !important; }

  /* 메뉴 항목 좌측 정렬 — 상위에서 상속되는 text-align:center / justify-content
     를 무력화. (레거시 #hd / .m-shell-header 가 설정한 가운데 정렬이 .sa-pop
     내부 a 태그까지 잡아당기는 것을 차단.) */
  .m-shell-header .sa-pop,
  .m-shell-header .sa-card,
  .m-shell-header .sa-menu,
  .m-shell-header .sa-menu-item { text-align: left !important; }
  .m-shell-header .sa-menu-item {
    justify-content: flex-start !important;
    width: 100% !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  /* 인사말 라인 — 클릭 불가 */
  .m-shell-header .sa-greeting {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 6px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.3;
    pointer-events: none;
  }
  .m-shell-header .sa-greeting-text { color: #e2e8f0; }
  .m-shell-header .sa-greeting-text b {
    color: #facc15;
    font-weight: 800;
    margin-right: 2px;
  }

  /* 모바일 홈 전용 ─ 데스크톱 본문(슬라이더/홍보/베스트/출금내역/고객센터 등) 일괄 숨김.
     mobile-shell.js 가 .is-mobile-home 클래스를 body 에 부여한다. */
  body.is-mobile-home #container,
  body.is-mobile-home #main_bn,
  body.is-mobile-home #topbanner,
  body.is-mobile-home .video-container,
  body.is-mobile-home .main_howto,
  body.is-mobile-home .index-inner,
  body.is-mobile-home .tail-box,
  body.is-mobile-home .latest_wr,
  body.is-mobile-home .customer { display: none !important; }
  /* 위 .tail-box / .customer 는 <div class="inner"> 안에 있는 잔여 데스크톱
     섹션이지만, 다른 페이지에서도 같은 부모 .inner 안에 있을 수 있으므로
     하위 셀렉터로 한정한다. (.inner 자체는 건드리지 않는다.) */
  body.is-mobile-home .inner > .tail-box,
  body.is-mobile-home .inner > .customer { display: none !important; }

  /* 모바일 홈: body padding-bottom 이 푸터·탭 사이에 빈 스크롤 영역을 만듦(DOM 에 콘텐츠 없음).
     탭·홈 인디케이터 여백은 푸터 박스 안으로 옮긴다. */
  body.is-mobile-home {
    padding: 56px 0 0 !important;
  }
  body.is-mobile-home .m-shell-footer {
    display: block !important;
    padding: 18px 16px calc(24px + 60px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 모바일 홈 본문 루트 — 자식이 살짝 넓어져도 문서 가로 스크롤이 생기지 않게 */
  #mShellHome {
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  /* 슬라이더·가로 스크롤 카드: 터치 가로 제스처 허용 */
  .m-slider,
  .m-slider .slide-wrap,
  .m-monthly-list {
    touch-action: pan-x pan-y;
  }

  /* 키보드 열림: 탭바는 위쪽 규칙으로 숨김.
     body padding-bottom 은 평상시 그대로 유지 (탭 높이 + safe-area). */

  /* 이용안내 / 자주묻는 질문 카드 (.m-howto) */
  .m-howto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px;
    margin-bottom: 16px;
  }
  .m-howto-item {
    background: #0f172a;
    border-radius: 12px;
    padding: 16px 12px;
    text-decoration: none;
    border: 1px solid rgba(204,163,84,0.15);
    transition: transform 0.15s, border-color 0.15s;
  }
  .m-howto-item:hover { transform: translateY(-2px); border-color: rgba(204,163,84,0.4); }
  .m-howto-item h3 {
    color: #f1f5f9; font-size: 14px; font-weight: 700; margin: 0 0 6px;
  }
  .m-howto-item p {
    color: #94a3b8; font-size: 11px; margin: 0; line-height: 1.5;
  }
  .m-howto-item mark {
    background: none; color: #cca354; font-weight: 600;
  }

  /* VIP 회원 혜택 배너 (.m-event-banner) */
  .m-event-banner {
    display: block;
    margin: 8px 12px 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(204,163,84,0.18), rgba(184,131,58,0.08)),
      #1a1410;
    border: 1px solid rgba(204,163,84,0.35);
    text-decoration: none;
    color: #f5e9c8;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  }
  .m-event-banner h3 {
    margin: 0 0 6px;
    color: #ffe1a3;
    font-size: 14px;
    font-weight: 700;
  }
  .m-event-banner p {
    margin: 0 0 8px;
    color: #cbb98b;
    font-size: 12px;
    line-height: 1.5;
  }
  .m-event-banner .link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffd166;
    font-size: 12px;
    font-weight: 700;
  }
  .m-event-banner .link .m-icon { font-size: 13px; }

  /* 출금/신청 내역 (.m-history-section) */
  .m-history-section {
    margin: 0 12px 16px;
    background: #0f172a;
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 12px;
    padding: 12px 12px 6px;
  }
  .m-history-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .m-history-tab {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(148,163,184,0.08);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: all 0.18s ease;
  }
  .m-history-tab.active {
    color: #051627;
    background: linear-gradient(135deg, #cca354, #b8923a);
  }
  .m-history-list {
    max-height: 220px;
    overflow: hidden;
    position: relative;
  }
  .m-history-list.hidden { display: none; }
  .m-history-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    animation: m-history-scroll 180s linear infinite;
  }
  .m-history-list:hover ul { animation-play-state: paused; }
  .m-history-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 6px;
    font-size: 12.5px;
    color: #cbd5e1;
    border-bottom: 1px dashed rgba(148,163,184,0.10);
  }
  .m-history-list li:last-child { border-bottom: none; }
  .m-history-list li .m-icon {
    color: #34d399;
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
  }
  .m-history-list li .hl {
    color: #fde68a;
    font-weight: 600;
    margin-right: 2px;
  }
  .m-history-list li .amt {
    color: #34d399;
    font-weight: 700;
    margin: 0 2px;
  }
  @keyframes m-history-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }

  /* 여성앨범(/bbs/board.php?bo_table=more) — 야밤처럼 2열 그리드 강제 */
  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 12px !important;
    margin: 0 !important;
  }
  .album-item { border-radius: 10px !important; }
  .album-item .item-img img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
  /* 카드 정보 영역 — 좁은 폭 보정 */
  .album-item .info { padding: 10px !important; }
  /* 정렬 태그(.sorting) — 좁은 카드에서 콘텐츠 폭(자동)으로 표시.
     레거시 theme/basic/skin/shop/basic/style.css 의 .sorting span { width:86px }
     를 덮어쓰기 위해 width:auto !important 명시. */
  .album-item .sorting {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
    padding-top: 0 !important;
    margin-bottom: 6px !important;
    overflow: hidden !important;
    text-align: center !important;
  }
  .album-item .sorting span {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .album-item .sorting span:last-child { margin-right: 0 !important; }
  .album-item .member-info { gap: 6px !important; }
  .album-item .name { font-size: 14px !important; }
  .album-item .recommend {
    padding: 2px 8px !important;
    font-size: 10px !important;
  }
  .album-item .details { font-size: 11px !important; line-height: 1.4 !important; }
  .album-item .status-box { padding: 6px 8px !important; font-size: 11px !important; }
  .album-item .status-box span { font-size: 11px !important; }
  /* 데이트신청 빨강/회색 버튼 */
  .album-item .btn,
  .album-item .btn-date,
  .album-item .btn-cancel,
  .album-item .btn-status,
  .album-item a[class*="btn"],
  .album-item button[class*="btn"] {
    padding: 7px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  /* 별점 영역 */
  .album-item .rating, .album-item .stars { font-size: 11px !important; }

  /* 서브 페이지 (이용약관/개인정보처리방침/회사소개 등) — 모바일 가독성 보정 */
  .sub-page-content {
    max-width: 100% !important;
    padding: 0 0 24px !important;            /* 좌우 0 — 히어로는 풀폭 */
  }
  /* 로그인 / 회원가입 — page-title 히어로가 없는 카드형 페이지는
     헤더 바로 아래 카드가 붙어 답답해 보이므로 여백을 더한다. */
  .sub-page-content > .login-box,
  .sub-page-content > .register-box {
    margin: 28px 12px 0;
  }
  /* 히어로 타이틀 영역 — 헤더 바로 아래 풀폭 그라데이션 + 골드 보더 */
  .sub-page-content .page-title {
    margin: 0 0 16px !important;
    padding: 24px 16px 22px !important;
    text-align: center !important;
    background:
      linear-gradient(135deg, rgba(204,163,84,0.12), rgba(184,131,58,0.04)),
      #0a1428;
    border-bottom: 2px solid rgba(204,163,84,0.45);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    position: relative;
  }
  .sub-page-content .page-title::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    margin: 0 auto 10px;
    background: linear-gradient(90deg, transparent, #cca354, transparent);
  }
  .sub-page-content .page-title h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin: 0 !important;
    color: #ffe1a3 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
  }
  .sub-page-content .page-title p {
    font-size: 12px !important;
    margin: 6px 0 0 !important;
    color: #94a3b8 !important;
  }
  /* 본문은 좌우 12px 여백 복원 */
  .sub-page-content > .content-body,
  .sub-page-content > .back-btn-wrap,
  .sub-page-content > .event-banner,
  .sub-page-content > .benefits-grid,
  .sub-page-content > .event-cta-wrap { margin-left: 12px; margin-right: 12px; }

  /* 이벤트 혜택 페이지 — 모바일 2열 그리드 + 컴팩트 카드 + 핑크 CTA */
  .sub-page-content .event-banner { margin-bottom: 14px !important; }
  .sub-page-content .event-banner img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  .sub-page-content .benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  .sub-page-content .benefit-card {
    padding: 18px 10px !important;
    border-radius: 10px !important;
  }
  .sub-page-content .benefit-card .icon {
    font-size: 32px !important;
    margin-bottom: 8px !important;
  }
  .sub-page-content .benefit-card h3 {
    font-size: 13.5px !important;
    margin-bottom: 5px !important;
  }
  .sub-page-content .benefit-card p {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  .sub-page-content .event-cta-wrap { margin-top: 20px !important; }
  .sub-page-content .event-cta {
    display: block !important;
    padding: 14px 0 !important;
    font-size: 15px !important;
    border-radius: 28px !important;
  }
  .sub-page-content .content-body {
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }
  .sub-page-content .terms-content h3,
  .sub-page-content .privacy-content h3 {
    font-size: 15px !important;
    margin: 18px 0 10px !important;
    padding-left: 10px !important;
    border-left-width: 3px !important;
  }
  .sub-page-content .terms-content p,
  .sub-page-content .privacy-content p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding-left: 10px !important;
    margin-bottom: 8px !important;
  }
  .sub-page-content .back-btn-wrap { margin-top: 24px !important; }
  .sub-page-content .back-btn { padding: 10px 22px !important; font-size: 13px !important; }

  /* 고객센터 (.m-cs-section) */
  .m-cs-section {
    margin: 0 12px 16px;
  }
  .m-cs-box {
    background: #0f172a;
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }
  .m-cs-box h3 {
    color: #cca354; font-size: 14px; font-weight: 700; margin: 0 0 10px;
  }
  .m-cs-box p {
    color: #cbd5e1; font-size: 12px; margin: 4px 0;
  }
  .m-cs-box p.red {
    color: #f87171;
  }

  /* 빠른 바로가기 (.m-quick-links) — 공지사항 / 이용안내 / FAQ */
  .m-quick-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 12px 16px;
  }
  .m-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 6px;
    background: #0f172a;
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 12px;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.18s ease;
  }
  .m-quick-link:hover,
  .m-quick-link:active {
    border-color: rgba(204,163,84,0.45);
    background: #131e36;
    color: #ffe1a3;
  }
  .m-quick-link .m-icon {
    font-size: 24px;
    color: #cca354;
    line-height: 1;
  }
  .m-quick-link span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }

  /* ─────────────────────────────────────────────────────────────
     공지사항 / 포인트내역 / 충전내역 등 .notice-table —
     2025 한국 모바일 UX 트렌드 (Toss TDS / 당근 / 카카오톡 채널 / 정오의 데이트)
     스타일로 재설계. 데스크톱 4-컬럼 표를 모바일에서:

     ┌──────────────────────────────────────────────┐
     │  [공지] ※포인트 진?                       › │  ← 카드, 골드 강조 (핀)
     │  조회 1,249  ·  2026-05-03                   │
     ├──────────────────────────────────────────────┤
     │  ※아가씨 이미지 진실 여부                  › │  ← 일반 카드
     │  조회 784  ·  2026-02-18                     │
     └──────────────────────────────────────────────┘

     특징:
     - 둥근 카드 (12px) + 골드 테두리 hairline
     - 핀 게시글은 골드 그라데이션 배경 + 살짝 더 진한 테두리
     - 우측 chevron (›) — 탭 가능 여부 어포던스
     - 제목 15px semibold + 메타 12px 회색
     - 번호 컬럼은 모바일에선 숨김 (사용자 가치 낮음, [공지] prefix 가 이미 핀 표시)
     ※ JS / HTML 은 손대지 않고 CSS 만으로 처리.
     ───────────────────────────────────────────────────────────── */
  .notice-table,
  .notice-table tbody,
  .notice-table tr,
  .notice-table td {
    display: block;
  }
  .notice-table {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .notice-table thead { display: none !important; }

  /* 일반 카드 — Apple iOS 17 / macOS Sonoma 풍 frosted glass.
     배경 애니메이션 (보라 / 골드 / 블루 입자) 이 카드 뒤로 살짝 비치되,
     backdrop-filter blur + saturate 로 부드럽게 정제됨. */
  .notice-table tbody tr {
    position: relative;
    padding: 16px 40px 14px 16px !important;
    margin: 0 0 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    cursor: pointer;
    /* 핵심: backdrop blur 로 뒤 배경을 흐릿하게 + saturate 로 색감 살림 */
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    /* 미세한 elevation 그림자 (iOS Cards 표준) */
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,   /* 상단 highlight */
      0 4px 16px rgba(0, 0, 0, 0.18);             /* drop shadow */
    transition: background 0.18s ease, transform 0.12s ease;
  }
  .notice-table tbody tr:active {
    background: rgba(255, 255, 255, 0.07) !important;
    transform: scale(0.985);
  }
  .notice-table tbody tr:hover td,
  .notice-table tbody tr:active td {
    background: transparent !important;
  }

  /* 핀 게시글 — 사용자 피드백상 "행 전체 강조가 과해 보인다" 라서
     카드 배경 / 보더는 일반 글과 동일하게 두고, 식별은 제목 앞의
     [공지] 골드 텍스트 prefix 로만. (mobile.css 에선 배경 강조 룰 없음.) */

  /* 우측 chevron — "탭 가능" 시각적 어포던스 (iOS / Toss 표준).
     glass 카드에 어울리는 흰색 반투명 톤. */
  .notice-table tbody tr::after {
    content: "›";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-52%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    pointer-events: none;
  }

  /* td 기본 — 표 셀 룩 제거 */
  .notice-table tbody td {
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    background: transparent !important;
  }

  /* 번호 컬럼 (📌 / 일련번호) — 모바일에선 숨김.
     핀 표시는 카드 골드 배경 + 제목의 [공지] prefix 로 이미 충분. */
  .notice-table tbody td.col-no {
    display: none !important;
  }

  /* 제목 — 카드 메인. 15px / semibold / 흰색.
     ※ 이전에 -webkit-line-clamp 로 2줄 ellipsis 를 했는데 일부 환경에서
        제목 끝에 정체불명의 강조 / 박스 가 나타나는 보고가 있어 제거.
        제목이 길면 자연스럽게 줄바꿈 + 카드 높이가 늘어나게 둠. */
  .notice-table tbody td.title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
    color: #fff !important;
    /* 모든 강조 / 셀렉션 / 탭 하이라이트 제거 (제목 끝 잔상 방지) */
    text-decoration: none !important;
    text-emphasis: none !important;
    -webkit-text-emphasis: none !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .notice-table tbody td.title a,
  .notice-table tbody td.title a:link,
  .notice-table tbody td.title a:visited,
  .notice-table tbody td.title a:hover,
  .notice-table tbody td.title a:focus,
  .notice-table tbody td.title a:active {
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .notice-table tbody td.title a::after,
  .notice-table tbody td.title a::before {
    content: none !important;
  }

  /* 메타 줄 — 조회 (3번째 td) · 날짜 (.col-date), 12px 보조 회색.
     glass 카드 위에서 가독성 위해 흰색 반투명 톤 사용. */
  .notice-table tbody td:nth-of-type(3) {
    display: inline !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-weight: 500;
  }
  .notice-table tbody td:nth-of-type(3)::before {
    content: "조회 ";
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin-right: 1px;
  }
  .notice-table tbody td.col-date {
    display: inline !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-weight: 500;
    white-space: nowrap !important;
  }
  .notice-table tbody td.col-date::before {
    content: "·";
    color: rgba(255, 255, 255, 0.25);
    margin: 0 8px;
  }

  /* 빈 상태 / 로딩 — 카드 룩 유지하되 가운데 정렬 + 큰 padding. */
  .notice-table tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 48px 16px !important;
    color: #6c7a93 !important;
    font-size: 14px;
  }
  /* 빈 상태 행에는 chevron 표시 안 함 */
  .notice-table tbody tr:has(td[colspan])::after { content: ""; }
}

/* ─────────────────────────────────────────────────────────────
   ≥ 769px — 모바일 셸 자체를 숨김 (데스크톱에선 보이지 않게)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .m-shell-header, .m-shell-tabbar, .m-shell-nav,
  .m-shell-overlay, .m-shell-footer { display: none !important; }
}

/* 작은 폰 (≤ 380px) */
@media (max-width: 380px) {
  .m-album-grid { gap: 8px; padding: 0 8px; }
  .m-quick-menu { margin: 0 8px 12px; padding: 12px 4px; }
  .m-section-title { margin: 14px 10px 8px; font-size: 15px; }
  .m-shell-tabbar a { font-size: 9px; }
  .m-shell-tabbar a .m-icon { font-size: 20px; }
}