/* =============================================
   회원용 페이지 공유 CSS — tuntunplayer_handoff 프로토타입 기반
   3개 템플릿 공통 사용: member_main_list, member_title_list, member_content_play
   ============================================= */

/* ===== 폰트: NanumSquareRound 통일 ===== */
/* members.css를 로드하는 회원 페이지에만 적용 (로그인/가입은 memb-login.css만 쓰므로 제외) */
/* 스크롤바 유무 차이로 고정 네비가 좌우로 흔들리는 것 방지 — pages/min-height 방식으로 대체 */
body,
button,
input,
select,
textarea {
  font-family: 'NanumSquareRound', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
h1, h2, h3, h4, h5, h6, strong, b {
  font-family: 'NanumSquareRound', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

/* ===== 아이콘: Material Symbols Rounded (가변 폰트) ===== */
/* 구형 Material Icons 링크를 대체하므로 베이스 스타일을 자체 선언 — 기본 FILL 1(채움+둥근 스타일) */
.material-icons {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
/* on/off 토글 아이콘: off는 외곽선, on은 채움 */
.memb-page .likesq .material-icons,
.memb-page .ep .ep-fav .material-icons {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.memb-page .likesq.on .material-icons,
.memb-page .ep .ep-fav.on .material-icons {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ===== 회원용 네비게이션 (navbar_member.html) ===== */
/* 모바일 appbar — 기본 표시, 900px 이상에서 숨김 */
.memb-appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--m-page-bg);
  border-bottom: 0;
  box-shadow: none;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.memb-appbar.scrolled {
  background: #fff;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.memb-lock .memb-appbar { background: #fff; }
/* 모바일 햄버거 메뉴 열림 — 아래 흰 메뉴와 이어지게 appbar도 흰색 */
.memb-appbar:has(.memb-appbar-hamburger[aria-expanded="true"]) { background: #fff; }
.memb-appbar-logo { display: flex; align-items: center; }
.memb-logo-img { height: 28px; width: auto; display: block; }
.memb-appbar-actions { display: flex; align-items: center; gap: 4px; }
.memb-appbar-iconbtn {
  border: 0; background: none; cursor: pointer; padding: 8px;
  color: #474747; border-radius: 10px; transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
}
.memb-appbar-iconbtn .material-icons { font-size: 24px; }
.memb-appbar-iconbtn:hover { background: #F4F4F5; color: #EF6902; }
.memb-appbar-iconbtn:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
.memb-appbar-iconbtn:active { background: #ECECEE; }
a.memb-appbar-iconbtn { text-decoration: none; }
a.memb-gnb-back { text-decoration: none; }

/* 모바일 메뉴 — 앱바 아래 전체 화면 (항목은 위에서부터 붙여서 배치) */
.memb-appbar-menu {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 999;
  background: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.memb-appbar-menu[hidden] { display: none; }
.memb-appbar-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--m-ink);
  text-decoration: none; border-bottom: 1px solid #F4F4F5;
}
.memb-appbar-menu a .material-icons { font-size: 20px; color: #B0B0B0; }
.memb-appbar-menu a:hover { background: #FEF4E6; color: #EF6902; }
.memb-appbar-menu a.active { color: #EF6902; }
.memb-appbar-menu a:focus-visible { outline: 2px solid #171717; outline-offset: -2px; }
/* 메뉴 하단: 회원 이름 + 로그아웃 — 메뉴 영역 높이의 80% 지점에 배치 */
.memb-appbar-menu-foot {
  position: absolute; top: 80%; left: 0; right: 0;
  border-top: 1px solid #F4F4F5; margin-top: 0;
}
/* 메뉴 열린 동안 뒷페이지 스크롤 잠금 */
body.memb-lock { overflow: hidden; }
.memb-appbar-menu-foot .memb-menu-name {
  padding: 14px 18px 6px; font-weight: 800;
}
.memb-appbar-menu-foot .memb-menu-name:hover { background: none; }
.memb-appbar-logout { color: #737373 !important; }

/* 데스크톱 gnb — 기본 숨김, 900px 이상에서 표시 */
.memb-gnb { display: none; }

@media (min-width: 900px) {
  .memb-appbar { display: none; }
  .memb-appbar-menu { display: none !important; }
  .memb-gnb {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; gap: 36px;
    padding: 18px max(36px, calc((100vw - 1080px) / 2)); background: transparent;
    border-bottom: 0;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
  }
  .memb-gnb.scrolled {
    background: #fff;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  .memb-gnb-logo { display: flex; align-items: center; }
  .memb-logo-img.desktop { height: 34px; }
  .memb-gnb nav {
    display: flex; gap: 28px; font-weight: 800; font-size: 15px; color: var(--m-ink);
    /* 좌우 영역(로고/프로필) 너비가 달라 flex로는 정중앙이 안 되므로 절대 중앙 정렬 */
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .memb-gnb nav a {
    cursor: pointer; color: var(--m-ink); font-weight: 600; text-decoration: none;
    padding: 6px 2px; transition: color .15s;
  }
  .memb-gnb nav a:hover { color: #EF6902; }
  .memb-gnb nav a.active { color: #EF6902; font-weight: 800; }
  .memb-gnb nav a:focus-visible { outline: 2px solid #171717; outline-offset: 2px; border-radius: 4px; }
  .memb-gnb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .memb-gnb-back {
    background: none; border: 0; cursor: pointer; padding: 8px;
    color: var(--m-ink); border-radius: 10px; transition: background .15s, color .15s;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
  }
  .memb-gnb-back .material-icons { font-size: 22px; }
  .memb-gnb-back:hover { color: #EF6902; background: #FCFAF6; }
  .memb-gnb-back:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
  .memb-gnb-logout {
    border: 1px solid #EAECEF; background: #fff;
    border-radius: 12px; padding: 9px 18px; font-size: 13.5px; font-weight: 700;
    color: var(--m-ink); cursor: pointer; text-decoration: none; transition: .15s;
  }
  .memb-gnb-logout:hover { border-color: #EF6902; color: #EF6902; }
  .memb-gnb-logout:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
  /* 프로필 — 회원 이름 아웃라인 버튼, 클릭 시 드롭다운 (시안: 주황 글자) */
  .memb-gnb-userwrap { position: relative; }
  .memb-gnb-user {
    display: inline-flex; align-items: center;
    border: 1px solid #EAECEF; background: #fff;
    border-radius: 12px; padding: 9px 20px;
    font-size: 13.5px; font-weight: 700;
    font-family: inherit;
    color: #EF6902; text-decoration: none; cursor: pointer; transition: .15s;
  }
  .memb-gnb-user:hover { border-color: #EF6902; background: #FFFCF7; }
  .memb-gnb-user:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
  .memb-gnb-usermenu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 140px;
    background: #fff; border: 1px solid #EAECEF; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17,17,17,.1); padding: 6px; z-index: 1001;
    display: flex; flex-direction: column;
  }
  .memb-gnb-usermenu[hidden] { display: none; }
  .memb-gnb-usermenu a {
    padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--m-ink);
    text-decoration: none; border-radius: 8px;
  }
  .memb-gnb-usermenu a:hover { background: #FEF4E6; color: #EF6902; }
  .memb-gnb-usermenu a:focus-visible { outline: 2px solid #171717; outline-offset: -2px; }
  .memb-gnb-right { display: flex; align-items: center; gap: 10px; }
}

.memb-beta-tag {
  font-size: 12px; font-weight: 600; color: #9ca3af;
  letter-spacing: -.2px; white-space: nowrap;
}
.memb-appbar-menu .memb-beta-tag { display: block; padding: 8px 20px; }

/* ===== .memb-page: navbar 높이만큼 상단 여백 (상단 멘트 가려짐 방지) ===== */
:root { --m-page-bg: #FFF3E0; --m-ink: #341A09; --m-text-primary: #341A09; }
body,
#main-content { background-color: var(--m-page-bg); }
.memb-page {
  padding-top: 60px; /* 모바일 appbar 높이 */
  /* 하단 padding: 마지막 요소의 margin-bottom이 경계를 타고 상쇄되어
     body 배경(회색)이 푸터 위에 보이는 것을 방지 */
  padding-bottom: 46px;
  background: var(--m-page-bg);
  /* Primary */
  --m-orange: #FF9500;
  --m-orange-deep: #EF6902;
  --m-orange-heavy: #E64D03;
  /* CTA */
  --m-cta: #FF9500;
  --m-cta-hover: #EF6902;
  --m-cta-text: #FFFFFF;
  /* Orange Scale */
  --m-orange-90: #FEE6C6;
  --m-orange-95: #FEF4E6;
  --m-orange-99: #FFFCF7;
  --m-surface-gray: #F4F4F5;
  /* Neutral */
  --m-bg: #FFFFFF;
  --m-surface: #FFFCF7;
  --m-card: #FEF4E6;
  --m-line: #EAECEF;
  --m-divider: #D9DCE1;
  /* Text */
  --m-text-primary: #341A09;
  --m-text-secondary: #474747;
  --m-text-tertiary: #737373;
  --m-text-assistive: #9B9B9B;
  --m-text-disabled: #B0B0B0;
  --m-ink: var(--m-text-primary);
  --m-muted: var(--m-text-secondary);
  --m-tertiary: var(--m-text-tertiary);
  --m-disabled: var(--m-text-disabled);
  /* Status */
  --m-success: #16A34A;
  --m-warning: #FF9500;
  --m-error: #E53935;
  --m-info: #3B82F6;
  /* legacy */
  --m-orange-soft: #FEF4E6;
  --m-green: #16A34A;
  --m-green-deep: #15803D;
  --m-shadow: 0 6px 24px rgba(17,17,17,.07);

  color: var(--m-ink);
  -webkit-font-smoothing: antialiased;
}
/* 메인은 memb-main.css의 배경/구름이 보이도록 투명 유지 */
.memb-page.mm-main { background-color: transparent; }
/* 다운로드·게임 페이지는 기존 배경 유지 */
body:has(.memb-download), main#main-content:has(.memb-download),
body:has(.room-app), main#main-content:has(.room-app),
body:has(.game-hub), main#main-content:has(.game-hub),
body:has(.burger-game), main#main-content:has(.burger-game),
body:has(.dentist-page), main#main-content:has(.dentist-page),
body:has(.market-page), main#main-content:has(.market-page),
body:has(.memb-game), main#main-content:has(.memb-game) { background-color: #fff; }
.memb-page.memb-download,
.memb-page.room-app,
.memb-page.game-hub,
.memb-page.burger-game,
.memb-page.dentist-page,
.memb-page.memb-game { background-color: #fff; }
@media (max-width: 899px) {
  body:has(.memb-download) .memb-appbar { background-color: #fff; }
}
@media (min-width: 900px) {
  main#main-content:has(.memb-page):not(:has(.mm-main)):not(:has(.memb-download)):not(:has(.room-app)):not(:has(.game-hub)):not(:has(.burger-game)):not(:has(.dentist-page)):not(:has(.market-page)):not(:has(.memb-game)) {
    background-image:
      url("/static/images/member_main/motion/deco_cloud.png"),
      url("/static/images/member_main/motion/deco_cloud.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left 0 top 337px, right 0 top 620px;
    background-size: 206px 123.5px, 206px 123.5px;
  }
  main#main-content .memb-page:not(.mm-main):not(.memb-download):not(.room-app):not(.game-hub):not(.burger-game):not(.dentist-page):not(.market-page):not(.memb-game) {
    background-color: transparent;
  }
}
@media (min-width: 768px) {
  .memb-page { padding-top: 72px; } /* 데스크톱 gnb 높이 */
}
@media (min-width: 768px) and (max-width: 899px) {
  /* 900px 전에는 모바일 appbar/햄버거를 사용하므로 본문도 appbar 높이에 맞춤 */
  .memb-page { padding-top: 60px; }
}

/* ===== 데스크톱 너비 제한 (play 페이지, challenge 제외) ===== */
/* play 페이지는 자체 max-width가 있고, challenge도 자체 max-width가 있으므로 제외.
   768px 이상에서 직계 자식들을 1080px로 중앙 정렬. */
@media (min-width: 768px) {
  .memb-page:not(.memb-play):not(.memb-challenge) > * {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
  /* fixed 오버레이(모달 딤/모달)에는 폭 제한을 적용하지 않는다.
     inset:0 딤이 1080px로 좁혀져 화면 양끝이 안 가려지는 문제 방지.
     > * 규칙과 같은 명시도(0,3,0)를 맞추고 뒤에 두어 항상 이기게 한다. */
  .memb-page:not(.memb-play):not(.memb-challenge) > .mp-modal-dim,
  .memb-page:not(.memb-play):not(.memb-challenge) > .mp-modal,
  .memb-page:not(.memb-play):not(.memb-challenge) > .mp-modal-avatar,
  .memb-page:not(.memb-play):not(.memb-challenge) > .memb-end-modal {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===== 목록형 페이지 중앙 타이틀 (내교재·즐겨찾기·다운로드 공통) ===== */
.memb-page .memb-page-title {
  text-align: center; padding: 30px 18px 38px;
}
.memb-page .memb-page-title h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  color: var(--m-text-primary); margin: 0;
}

/* ===== 공통 섹션 ===== */
.memb-page .sec { padding: 16px 18px; }
.memb-page .sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}
.memb-page .sec-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.memb-page .sec-head .linkall {
  font-size: 15px; color: var(--m-orange-deep); font-weight: 800; cursor: pointer;
}

/* 정렬 토글 — 커리큘럼순 / 최근구매순 */
.memb-page .sort-toggle {
  display: inline-flex; gap: 0; flex: none;
  background: var(--m-bg); border-radius: 14px; padding: 0;
  height: 47px; border: 4px solid #fff; box-sizing: border-box;
}
.memb-page .sort-toggle .sort-btn {
  display: inline-flex; align-items: center;
  height: 100%; padding: 6px 14px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--m-muted);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.memb-page .sort-toggle .sort-btn:hover { color: var(--m-text-secondary); }
.memb-page .sort-toggle .sort-btn.on {
  background: var(--m-ink); color: #fff;
  box-shadow: none;
}
.memb-page .sort-toggle .sort-btn:focus-visible {
  outline: 2px solid var(--m-ink); outline-offset: 2px;
}

/* ===== HOME: 상단 카드 (hero3 — 모바일/PC 공통 위아래 스택) ===== */
.memb-page .hero3 {
  border-radius: 20px; overflow: hidden; background: #fff;
  border: 1px solid var(--m-line); cursor: pointer;
}
.memb-page .hero3 .h3thumb {
  aspect-ratio: 16/9; position: relative; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #DCD7CE 0 14px, #D3CEC4 14px 28px);
}
.memb-page .hero3 .h3thumb img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
}
.memb-page .hero3 .h3thumb .h3-poster { z-index: 1; }
.memb-page .hero3 .h3thumb iframe {
  width: 100%; height: 100%; position: absolute; inset: 0; border: 0; z-index: 3;
  background: #000;
}
.memb-page .hero3 .h3body { padding: 15px 18px 16px; }
.memb-page .hero3 .chip {
  display: inline-block; background: var(--m-orange-soft); color: var(--m-orange-deep);
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 8px; margin-bottom: 8px;
}
.memb-page .hero3 h3 { font-size: 20px; font-weight: 800; color: var(--m-ink); }
.memb-page .hero3 .prog {
  height: 8px; background: var(--m-line); border-radius: 999px;
  margin: 13px 0 4px; overflow: hidden;
}
.memb-page .hero3 .prog > span {
  display: block; height: 100%; background: var(--m-orange); border-radius: 999px;
}
.memb-page .cta3 {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: var(--m-cta); color: #fff; border: 0;
  border-radius: 999px; padding: 16px; font-size: 16px; font-weight: 800;
  cursor: pointer; box-shadow: 0 5px 0 0 var(--m-cta-hover);
  margin-top: 14px; transition: transform .1s, box-shadow .1s; transform: translateY(0);
}
.memb-page a.cta3 { text-decoration: none; }
.memb-page .cta3:active { transform: translateY(2px); box-shadow: 0 3px 0 0 var(--m-cta-hover); }
.memb-page .hero3 .listlink {
  display: block; text-align: center; width: 100%; background: none; border: 0;
  color: var(--m-muted); font-size: 12.5px; font-weight: 700;
  padding: 12px 0 0; cursor: pointer;
}

/* PC: hero3 카드 — 좌우 분할 (좌측 텍스트, 우측 썸네일) */
@media (min-width: 768px) {
  .memb-page .memb-hero-sec,
  .memb-page .memb-recent-sec { padding: 16px 36px; }
  .memb-page .hero3 {
    display: grid; grid-template-columns: 1fr 1.1fr;
  }
  .memb-page .hero3 .h3thumb { order: 2; aspect-ratio: auto; min-height: 360px; }
  .memb-page .hero3 .h3body {
    order: 1; padding: 34px 32px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .memb-page .hero3 .chip { font-size: 12px; padding: 6px 13px; border-radius: 9px; margin-bottom: 16px; align-self: flex-start; }
  .memb-page .hero3 h3 { font-size: 34px; letter-spacing: -.02em; }
  .memb-page .hero3 .prog { height: 10px; margin: 20px 0 8px; }
  .memb-page .cta3 { font-size: 18px; padding: 18px; border-radius: 15px; margin-top: 20px; }
}

/* ===== HOME: 최근 시청 캐러셀 ===== */
.memb-page .mini-carousel {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px;
  padding: 2px 0 6px;
}
/* 모바일 2열에서는 5번째 항목 숨김 — 두 줄(4개)까지만 노출 */
.memb-page .mini-carousel .mini:nth-child(5) { display: none; }
@media (min-width: 480px) {
  .memb-page .mini-carousel { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .memb-page .mini-carousel .mini:nth-child(5) { display: block; }
}
@media (min-width: 768px) {
  .memb-page .mini-carousel { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 1100px) {
  .memb-page .mini-carousel { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
.memb-page .mini { cursor: pointer; }
.memb-page a.mini { color: inherit; text-decoration: none; display: block; }
.memb-page .mini .cv {
  aspect-ratio: 1/1; border-radius: 18px; display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 14px; text-align: center;
  line-height: 1.1; text-shadow: 0 1px 3px rgba(0,0,0,.25);
  position: relative; overflow: hidden;
  border: 2.5px solid var(--m-line); box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--m-line); transform: translateY(0);
  transition: transform .1s, box-shadow .1s, border-color .15s;
}
.memb-page .mini:hover .cv { border-color: var(--m-orange); box-shadow: 0 6px 0 0 var(--m-orange-90), 0 8px 16px rgba(250,167,22,.15); transform: translateY(-2px); }
.memb-page .mini:hover .nm { color: var(--m-orange-deep); }
.memb-page .mini:active .cv { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--m-line); }
.memb-page .mini .cv.cv-logo { background: #fff; text-shadow: none; }
.memb-page .mini .cv.cv-logo img { width: 80%; height: 80%; object-fit: contain; }
.memb-page .mini .cv.cv-thumb { background: #fff; text-shadow: none; }
.memb-page .mini .cv.cv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.memb-page .mini .nm {
  font-size: 13px; font-weight: 800; margin-top: 7px; text-align: center;
  word-break: keep-all; overflow-wrap: anywhere;
  transition: color .15s;
}

/* ===== HOME: 빈 상태 ===== */
.memb-page .emptywatch {
  padding: 30px 20px 26px; text-align: center; background: #fff;
  border: 1px solid var(--m-line); border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.memb-page .emptywatch .ew-mascot { width: 64px; height: 64px; object-fit: contain; filter: grayscale(.15) opacity(.92); }
.memb-page .emptywatch .ew-bubble {
  position: relative; background: #fff; border: 1px solid var(--m-line);
  border-radius: 14px; padding: 11px 16px; font-size: 13px; font-weight: 700;
  color: var(--m-text-secondary); line-height: 1.5;
}
.memb-page .emptywatch .ew-bubble::before {
  content: ''; position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--m-line); border-top: 1px solid var(--m-line);
}
.memb-page .emptywatch .ew-bubble span { color: var(--m-orange-deep); font-weight: 800; }

/* ===== MY BOOKS: 전체 교재 ===== */
.memb-page .allwrap { padding: 8px 18px 24px; }
@media (min-width: 768px) { .memb-page .allwrap { padding: 8px 18px 40px; } }
@media (max-width: 899px) {
  main#main-content .memb-page-title,
  main#main-content .allwrap,
  main#main-content .memb-page .sec,
  main#main-content .fav-playbar-row { padding-left: 16px; padding-right: 16px; }
}

/* 검색 행 — 검색창 + 우측 정렬 탭 */
.memb-page .searchrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
}
.memb-page .searchrow .searchbar { flex: 1 1 auto; min-width: 0; margin: 0; }
.memb-page .searchrow .sort-toggle { flex: none; }
@media (max-width: 899px) {
  .memb-page .searchrow { flex-wrap: wrap; row-gap: 10px; }
  .memb-page .searchrow .searchbar { flex: 1 1 100%; }
  .memb-page .searchrow .sort-toggle {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: auto;
  }
}

.memb-page .searchbar {
  display: flex; align-items: center; gap: 9px;
  background: var(--m-bg); border: 1.5px solid transparent;
  border-radius: 14px; padding: 11px 16px; margin: 8px 0 16px;
}
.memb-page .searchbar .si { font-size: 15px; color: var(--m-muted); flex: none; }
.memb-page .searchbar input {
  flex: 1; border: 0; outline: 0; background: none;
  font-size: 14.5px; font-weight: 600; color: var(--m-ink);
}
.memb-page .searchbar input::placeholder { color: var(--m-text-assistive); font-weight: 600; }
.memb-page .searchbar:focus-within {
  border-color: var(--m-orange); box-shadow: 0 0 0 3px rgba(255,149,0,.14);
}
.memb-page .searchbar .sclear {
  flex: none; color: var(--m-muted); font-size: 14px; font-weight: 800;
  cursor: pointer; width: 22px; height: 22px; padding: 0; border: 0;
  display: grid; place-items: center; border-radius: 50%; background: var(--m-surface-gray);
  visibility: hidden;
}
/* 입력값이 있을 때만 ✕ 표시 — 돋보기 위치는 고정 */
.memb-page .searchbar:has(input:not(:placeholder-shown)) .sclear { visibility: visible; }
/* 우측 끝 검색 실행 버튼 (돋보기) */
.memb-page .searchbar .sgo {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--m-muted);
  font-size: 15px; transition: color .15s;
}
.memb-page .searchbar .sgo:hover { color: var(--m-orange-deep); }
.memb-page .searchbar .sgo:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
.memb-page .searchnote {
  font-size: 12.5px; font-weight: 700; color: var(--m-orange-deep); padding: 2px 2px 12px;
}
.memb-page .emptyq {
  grid-column: 1/-1; text-align: center; color: var(--m-muted);
  font-size: 13.5px; font-weight: 600; padding: 40px 10px;
}
/* 빈 상태 말풍선 — member_main의 mm-empty 패턴 이식 */
.memb-page .mm-empty {
  display: flex; flex-direction: column; align-items: center;
}
.memb-page .mm-empty-bubble {
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 14px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 700;
  color: #474747;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  margin: 0 0 18px;
}
.memb-page .mm-empty-bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
.memb-page .mm-empty-bubble-sub {
  font-size: 12px; font-weight: 500;
  color: #8a8a8a; line-height: 1.5;
}
.memb-page .mm-empty-avatar {
  width: 88px; height: auto;
  object-fit: contain;
}

.memb-page .sortsel {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--m-line); background: #fff;
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%236b6256"/></svg>') no-repeat right 14px center;
  border-radius: 999px; padding: 9px 34px 9px 16px;
  font-size: 12.5px; font-weight: 800; color: var(--m-ink); cursor: pointer; outline: 0;
}
.memb-page .sortsel:focus-visible {
  border-color: var(--m-orange); box-shadow: 0 0 0 3px rgba(255,149,0,.14);
}
.memb-page .backrow { padding: 12px 20px 0; background: #fff; }
@media (min-width: 768px) { .memb-page .backrow { padding: 14px 36px 0; } }
.memb-page .backrow .backlink {
  font-size: 14.5px; font-weight: 800; color: var(--m-ink); cursor: pointer;
}
.memb-page .backrow .backlink:hover { color: var(--m-orange-deep); }

/* ===== 교재 카드 (공통) ===== */
.memb-page .bgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
  align-items: end;
}
@media (min-width: 480px) {
  .memb-page .bgrid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 768px) {
  .memb-page .bgrid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
}
@media (min-width: 1100px) {
  .memb-page .bgrid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
}
@media (min-width: 1400px) {
  .memb-page .bgrid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
.memb-page .bcard { background: transparent; border: 0; border-radius: 16px; cursor: pointer; }
.memb-page a.bcard { color: inherit; text-decoration: none; display: block; }
.memb-page .bcard .cv {
  aspect-ratio: 1/1; border-radius: 18px; display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 15px; text-align: center;
  line-height: 1.1; position: relative; overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  border: 4px solid var(--m-line); box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--m-line); transform: translateY(0);
  transition: transform .1s, box-shadow .1s, border-color .15s;
}
.memb-page .bcard:not(:hover):not(:active) .cv {
  border-color: var(--m-orange-90);
  box-shadow: 0 4px 0 0 var(--m-orange-90);
}
.memb-page .bcard:hover .cv { border-color: var(--m-orange); box-shadow: 0 6px 0 0 var(--m-orange-90), 0 8px 16px rgba(250,167,22,.15); transform: translateY(-2px); }
.memb-page .bcard:hover .bb .nm { color: var(--m-orange-deep); }
.memb-page .bcard:active .cv { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--m-line); }
.memb-page .bcard .cv.cv-logo { background: #fff; text-shadow: none; }
.memb-page .bcard .cv.cv-logo img { width: 80%; height: 80%; object-fit: contain; }
.memb-page .bcard .cv.cv-thumb { background: #fff; text-shadow: none; aspect-ratio: auto; }
.memb-page .bcard .cv.cv-thumb img { width: 100%; height: auto; display: block; }
.memb-page .bcard .cv .badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 7px;
}
.memb-page .b-done { background: #fff; color: var(--m-success); }
.memb-page .b-ing { background: #fff; color: var(--m-orange-deep); }
.memb-page .b-new { background: rgba(255,255,255,.92); color: var(--m-tertiary); }
/* 하위 그룹 보유 표시 — 아이콘 전용 폴더 배지 (admin_main_list의 bi-folder2 대응) */
.memb-page .b-folder {
  background: rgba(255,255,255,.92); color: var(--m-text-tertiary);
  display: inline-flex; align-items: center; padding: 4px 6px;
}
.memb-page .b-folder .material-icons { font-size: 16px; }

/* ── 가이드 카드: 흰 바탕 + 테마색 원 + 큰 흰색 아이콘 ── */
.memb-page .booklet-card .booklet-icon {
  aspect-ratio: 1/1; border-radius: 18px; display: grid; place-items: center;
  border: 2.5px solid var(--m-line); box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--m-line); transform: translateY(0);
  transition: transform .1s, box-shadow .1s, border-color .15s;
  container-type: inline-size;   /* 카드 크기에 맞춰 아이콘 크기 조절 */
  /* 인라인 배경색을 원 안쪽(82%)에만 보이게 하고 바깥은 흰색으로 덮음 */
  background-image: radial-gradient(circle closest-side,
    transparent 82%, #fff calc(82% + 1px)) !important;
}
.memb-page .booklet-card .booklet-icon .material-icons {
  font-size: 34cqw;              /* 카드 폭의 34% (기존 56px → PC 약 80px) */
  color: #fff;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}
.memb-page .booklet-card:hover .booklet-icon {
  border-color: var(--m-orange);
  box-shadow: 0 6px 0 0 var(--m-orange-90), 0 8px 16px rgba(250,167,22,.15);
  transform: translateY(-2px);
}
.memb-page .booklet-card:active .booklet-icon {
  transform: translateY(2px); box-shadow: 0 2px 0 0 var(--m-line);
}

/* ── 즐겨찾기 버튼 (타이틀 카드) ── */
.memb-page .fav-btn {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); cursor: pointer;
  color: var(--m-text-tertiary);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .12s, background .15s, color .15s;
}
.memb-page .fav-btn .material-icons { font-size: 18px; }
.memb-page .fav-btn:hover { transform: scale(1.12); background: #fff; }
.memb-page .fav-btn:active { transform: scale(.95); }
.memb-page .fav-btn:focus-visible { outline: 2px solid var(--m-orange); outline-offset: 2px; }
.memb-page .fav-btn.on { color: var(--m-orange); background: #fff; }
.memb-page .fav-btn.on .material-icons { animation: favPop .25s ease; }
@keyframes favPop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* 카드 그리드(.bcard .cv) 내부 — 썸네일 우상단 */
.memb-page .bcard .fav-btn { top: 8px; right: 8px; }

/* 리스트 카드(.bk) — 우측 끝 세로 중앙 */
.memb-page .bk .fav-btn { top: 50%; right: 11px; transform: translateY(-50%); }
.memb-page .bk .fav-btn:hover { transform: translateY(-50%) scale(1.12); }
.memb-page .bk .fav-btn:active { transform: translateY(-50%) scale(.95); }

@media (prefers-reduced-motion: reduce) {
  .memb-page .fav-btn, .memb-page .fav-btn .material-icons { transition: none; animation: none; }
}

.memb-page .bcard .bb { padding: 12px 3px 0; text-align: center; }
.memb-page .bcard .bb .nm {
  font-size: 14px; font-weight: 800; line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all; overflow-wrap: anywhere;
  transition: color .15s;
}
.memb-page .bcard .bb .ct {
  font-size: 12px; font-weight: 700; margin-top: 10px; color: var(--m-text-secondary);
}
.memb-page .bcard .bb .ct b { color: var(--m-orange-deep); font-weight: 700; }
.memb-page .bcard .bb .ct.done { color: var(--m-text-tertiary); }
.memb-page .bcard .miniprog {
  height: 6px; background: var(--m-line); border-radius: 999px;
  margin-top: 13px; overflow: hidden;
}
.memb-page .bcard .miniprog > span {
  display: block; height: 100%; background: var(--m-orange); border-radius: 999px;
}

/* 커버 그라디언트 */
.memb-page .cv1 { background: linear-gradient(135deg, #FF8FB1, #E5547E); }
.memb-page .cv2 { background: linear-gradient(135deg, #FF6B5B, #E0392B); }
.memb-page .cv3 { background: linear-gradient(135deg, #FFD23E, #F2A900); }
.memb-page .cv4 { background: linear-gradient(135deg, #7ECB6B, #4E9E3E); }
.memb-page .cv5 { background: linear-gradient(135deg, #9B8CFF, #6C57D6); }
.memb-page .cv6 { background: linear-gradient(135deg, #5FC3F0, #2E92D6); }

/* ===== TITLE LIST: 브랜드 헤더 + 탭 ===== */
.memb-page .brandrow {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 6px; background: transparent;
}
/* 로고 + 타이틀 가로 배치 (시안: 로고 좌측, 타이틀 우측, 그룹 중앙 정렬) */
.memb-page .brandrow.center { flex-direction: row; justify-content: center; gap: 14px; padding: 20px 20px 10px; }
.memb-page .brandrow.center .blogo { width: 80px; height: 80px; font-size: 13px; }
.memb-page .brandrow.center h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.memb-page .brandrow .blogo {
  width: 52px; height: 52px; border-radius: 0;
  background: none;
  display: grid; place-items: center; color: #fff; font-weight: 900;
  font-size: 12px; text-align: center; line-height: 1; flex: none;
  border: 0; overflow: hidden;
  padding: 0; box-sizing: border-box;
}
.memb-page .brandrow .blogo img { width: 100%; height: 100%; object-fit: contain; background: none; }
.memb-page .brandrow .bt h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.memb-page .brandrow .bt .s { font-size: 12px; color: var(--m-muted); font-weight: 700; margin-top: 2px; }

@media (min-width: 768px) {
  .memb-page .memb-page-title h2,
  .memb-page .brandrow h2 { font-size: 26px; }
}

/* ── 즐겨찾기 페이지 ── */
.memb-page .fav-custom-add {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid #D5D8DD; background: #fff;
  color: var(--m-ink); font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 20px; cursor: pointer;
  transition: background .15s, color .15s;
}
.memb-page .fav-custom-add .material-icons { font-size: 18px; }
.memb-page .fav-custom-add:hover { background: var(--m-surface-gray); }
.memb-page .fav-custom-add:active { transform: scale(.96); }
.memb-page .fav-custom-add .fav-custom-add-label { display: none; }

/* ── 즐겨찾기 탭 바 (전체 + 플레이리스트 탭 + 생성/관리 버튼) ── */
.memb-page .fav-cg-tabbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px 14px;
}
.memb-page .fav-cg-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0;
}
.memb-page .fav-cg-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--m-text-secondary);
  border: 1px solid #F5D8B5; background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}
.memb-page .fav-cg-tab:hover { border-color: var(--m-orange); color: var(--m-orange-deep); }
.memb-page .fav-cg-tab.active {
  background: transparent; color: var(--m-ink);
  box-shadow: inset 0 0 0 2px #B84F00;
}
.memb-page .fav-cg-tab-name { white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: var(--m-ink); }
.memb-page .fav-cg-tab-cnt {
  font-size: 12px; font-weight: 800;
  background: rgba(0,0,0,.08); border-radius: 10px;
  padding: 1px 7px; min-width: 20px; text-align: center;
}
.memb-page .fav-cg-tab.active .fav-cg-tab-cnt { background: transparent; color: var(--m-orange-deep); }

/* ── 우측 관리 버튼 (활성 탭 것만 표시) ── */
.memb-page .fav-cg-actions { flex: none; display: flex; }
.memb-page .fav-cg-action-group { display: none; gap: 6px; }
.memb-page .fav-cg-action-group.active { display: flex; }
.memb-page .fav-cg-act-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.memb-page .fav-cg-act-btn .material-icons { font-size: 18px; }
.memb-page .fav-cg-act-edit { background: var(--m-line); color: #6D4C41; }
.memb-page .fav-cg-act-edit:hover { background: #e0d2bc; }
.memb-page .fav-cg-act-delete { background: #fdecea; color: #c62828; }
.memb-page .fav-cg-act-delete:hover { background: #f9d5d0; }

/* ── 데스크톱: 플레이리스트 좌측 사이드바 + 목록을 하나의 흰 패널로 (가운데 점선 구분) ── */
@media (min-width: 900px) {
  .memb-page .fav-body {
    display: flex; padding: 0 18px;
  }
  .memb-page .fav-cg-tabbar {
    flex-direction: column; align-items: stretch; gap: 4px;
    width: 240px; flex: none;
    background: var(--m-bg); border-radius: 24px 0 0 24px;
    padding: 24px 16px;
  }
  .memb-page .fav-cg-tabs { flex-direction: column; flex-wrap: nowrap; gap: 2px; flex: 0 0 auto; }
  /* 사이드바 항목 — pill 대신 리스트 행 스타일 */
  .memb-page .fav-cg-tab {
    border: none; border-radius: 12px; background: none;
    padding: 11px 14px; justify-content: flex-start; text-align: left;
  }
  .memb-page .fav-cg-tab:hover { background: var(--m-orange-95); color: var(--m-orange-deep); }
  .memb-page .fav-cg-tab.active {
    background: transparent; color: var(--m-ink);
    box-shadow: inset 0 0 0 2px #B84F00;
  }
  .memb-page .fav-cg-tab-name { max-width: none; flex: 1; min-width: 0; }
  .memb-page .fav-cg-tab-cnt {
    margin-left: auto; background: none;
    color: var(--m-text-assistive); font-weight: 700;
  }
  .memb-page .fav-cg-tab.active .fav-cg-tab-cnt {
    background: none; color: var(--m-orange-deep);
  }
  /* 새 플레이리스트 버튼 — 사이드바 탭 바로 아래 dashed 행 */
  .memb-page .fav-custom-add {
    justify-content: flex-start; border-style: dashed; border-radius: 12px;
    padding: 10px 14px; margin-top: 12px;
  }
  .memb-page .fav-custom-add .fav-custom-add-label { display: inline; }
  /* 활성 그룹 관리 버튼 — 사이드바 우측 정렬 */
  .memb-page .fav-cg-actions { justify-content: flex-end; padding: 0 6px; }
  .memb-page .fav-main {
    flex: 1; min-width: 0;
    background: var(--m-bg);
    border-radius: 0 24px 24px 0;
    border-left: 2px dashed var(--m-orange-90);
    padding: 24px 28px;
    min-height: 480px;
  }
  .memb-page .fav-main .fav-meta { padding: 0 0 12px; }
  .memb-page .fav-main .fav-cg-panels { padding: 0; }
  /* 흰 패널 바깥 2px 테두리 — 좌우 18px 패딩 안쪽(= 패널 가장자리)보다 2px 바깥에 한 줄로 */
  .memb-page .fav-body { position: relative; }
  .memb-page .fav-body::before {
    content: ""; position: absolute;
    top: -2px; bottom: -2px; left: calc(18px - 2px); right: calc(18px - 2px);
    border: 2px solid var(--m-orange-90);
    border-radius: 26px;
    box-sizing: border-box;
    pointer-events: none; z-index: 1;
  }
}

/* ── 모바일: 탭 바 숨기고 바텀시트로 대체, 콘텐츠는 흰 카드 (양옆 16px) ── */
@media (max-width: 899px) {
  .memb-page .fav-cg-tabbar { display: none; }
  .memb-page .fav-main {
    background: var(--m-bg);
    border-radius: 20px;
    margin: 0 16px;
    padding: 16px 16px 36px;
    outline: 2px solid var(--m-orange-90); outline-offset: 0;
  }
}

/* 메타 행 카테고리 트리거 — 모바일에서 바텀시트를 여는 버튼 */
.memb-page .fav-meta-cat {
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--m-orange-deep); font-weight: 700;
}
.memb-page .fav-meta-cat .material-icons {
  font-size: 18px; color: var(--m-orange-deep);
}
@media (min-width: 900px) {
  .memb-page .fav-meta-cat { cursor: default; pointer-events: none; }
  .memb-page .fav-meta-cat .material-icons { display: none; }
}

/* ── 플레이리스트 바텀시트 ── */
.memb-page .fav-sheet { display: none; }
.memb-page .fav-sheet.open { display: block; }
/* navbar(1000) 위에 올려서 시트 열릴 때 navbar도 함께 어둡게 — 모달(2000)보다는 아래 */
.memb-page .fav-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1010;
}
.memb-page .fav-sheet-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1011;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 70vh; overflow-y: auto;
  animation: favSheetUp .25s ease;
}
@keyframes favSheetUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* 상단 그립 영역 — 드래그로 닫기 (배경 없이 패널 흰색 그대로) */
.memb-page .fav-sheet-grip {
  margin: 0 -18px; padding: 10px 18px 14px;
  border-radius: 20px 20px 0 0;
  cursor: grab; touch-action: none; user-select: none;
}
.memb-page .fav-sheet-grip:active { cursor: grabbing; }
.memb-page .fav-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #CFCBC4; margin: 4px auto 12px;
}
.memb-page .fav-sheet-head h3 {
  font-size: 16px; font-weight: 800; color: var(--m-text-primary);
  margin: 0; text-align: center;
}
.memb-page .fav-sheet-list { padding-top: 12px; }
.memb-page .fav-sheet-item {
  display: flex; align-items: center; gap: 4px;
}
.memb-page .fav-sheet-item-btn {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px; border: 0; border-radius: 12px; background: none;
  font-size: 15px; font-weight: 700; color: var(--m-text-primary);
  cursor: pointer; text-align: left;
}
.memb-page .fav-sheet-item-btn .n {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.memb-page .fav-sheet-item-btn .c {
  font-size: 13px; font-weight: 700; color: var(--m-text-assistive); flex: none;
}
.memb-page .fav-sheet-item.active .fav-sheet-item-btn {
  background: var(--m-surface-gray); color: var(--m-orange-deep);
}
.memb-page .fav-sheet-item.active .fav-sheet-item-btn .c { color: var(--m-orange-deep); }
.memb-page .fav-sheet-ic {
  width: 34px; height: 34px; border: 0; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--m-surface-gray); color: var(--m-ink); transition: background .15s;
}
.memb-page .fav-sheet-ic .material-icons { font-size: 17px; }
.memb-page .fav-sheet-ic:hover { background: #EBE4D6; }
.memb-page .fav-sheet-ic-del { background: #fdecea; color: #c62828; }
.memb-page .fav-sheet-ic-del:hover { background: #f9d5d0; }
.memb-page .fav-sheet-add {
  width: 100%; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--m-orange); border-radius: 12px;
  background: #fff; color: var(--m-orange-deep);
  padding: 13px; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background .15s;
}
.memb-page .fav-sheet-add .material-icons { font-size: 18px; }
.memb-page .fav-sheet-add:hover { background: var(--m-orange-95); }

/* ── 탭 패널 (전체 / 플레이리스트) ── */
.memb-page .fav-cg-panels { padding: 0 18px; }
.memb-page .fav-cg-panel { display: none; }
.memb-page .fav-cg-panel.active { display: block; }
.memb-page .fav-cg-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; min-height: 320px;
  text-align: center; padding: 32px 16px;
  color: var(--m-text-tertiary); font-size: 13px; font-weight: 600;
  line-height: 1.7;
}
/* 캐릭터·문구 겹침 방지 — 자식 위치·여백·변형 리셋, 간격은 flex gap으로 */
.memb-page .fav-cg-empty > * { position: static; margin: 0; transform: none; }
.memb-page .fav-cg-empty p { margin: 0; }
/* p{margin:0}이 버블 여백을 덮지 않도록 다른 빈 상태와 같은 간격 복원 */
.memb-page .fav-cg-empty .mm-empty-bubble { margin-bottom: 18px; }
.memb-page .fav-cg-empty .fav-empty-mini {
  font-size: 15px; vertical-align: -3px;
}

/* ── 선택 모드 툴바 ── */
.memb-page .fav-sel-toolbar {
  display: none; flex-direction: column; gap: 10px;
  background: var(--m-surface, #FFFCF7); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px;
}
.memb-page .fav-sel-toolbar.active { display: flex; }
.memb-page .fav-sel-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 700; color: var(--m-ink);
}
.memb-page .fav-sel-all {
  border: 1px solid var(--m-line); background: #fff;
  font-size: 13px; font-weight: 700; color: var(--m-text-secondary);
  padding: 5px 12px; border-radius: 16px; cursor: pointer;
}
.memb-page .fav-sel-all.on { border-color: var(--m-orange); color: var(--m-orange-deep); background: var(--m-orange-95); }
.memb-page .fav-sel-play {
  border: 0; background: #FF9500; color: #fff;
  font-size: 15px; font-weight: 800; padding: 12px; border-radius: 12px; cursor: pointer;
}
.memb-page .fav-sel-play.dis { background: var(--m-line); color: var(--m-text-assistive); cursor: default; }
.memb-page .fav-sel-play.on:hover { background: #EF6902; }
.memb-page .fav-sel-cancel {
  border: 1px solid var(--m-line); background: #fff;
  font-size: 14px; font-weight: 700; color: var(--m-text-secondary);
  padding: 10px; border-radius: 12px; cursor: pointer;
}
.memb-page .fav-sel-cancel:hover { background: var(--m-surface-gray); }

/* ── 체크박스 표시 ── */
.memb-page .fav-ep-chk {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  color: var(--m-text-assistive);
}
.memb-page .fav-ep-chk .material-icons { font-size: 22px; }
.memb-page .fav-ep-chk.on { color: var(--m-orange); }
.memb-page .fav-ep.checked { background: var(--m-orange-95); border-radius: 12px; }

/* ── 재생 페이지: 에피소드 부제목 ── */
.memb-page.memb-fav-play .ep-sub {
  font-size: 12px; font-weight: 600; color: var(--m-text-tertiary);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 메타 행 (활성 탭 이름 · 개수 + 재생/편집 버튼) ── */
.memb-page .fav-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 0 18px 12px;
}
/* 모바일: 흰 카드(16px)와 안쪽 패딩(18px)이 이중으로 들어가 목록이 좁아 보임 — 안쪽만 해제.
   기본 규칙보다 뒤에 선언해야 적용됨 */
@media (max-width: 899px) {
  .memb-page .fav-meta,
  .memb-page .fav-cg-panels { padding-left: 0; padding-right: 0; }
}
.memb-page .fav-meta-txt {
  font-size: 14px; font-weight: 700; color: var(--m-orange-deep);
}
.memb-page .fav-meta-actions { display: flex; align-items: center; gap: 6px; }
.memb-page .fav-meta-btn {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1.5px solid var(--m-line); background: #fff; border-radius: 999px;
  padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--m-text-secondary);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.memb-page .fav-meta-btn .material-icons { font-size: 17px; }
.memb-page .fav-meta-btn:hover { border-color: var(--m-orange); color: var(--m-orange-deep); }
.memb-page .fav-meta-btn:active { transform: scale(.96); }
.memb-page .fav-edit-btn {
  border: 1.5px solid var(--m-line); background: #fff; border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--m-ink);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.memb-page .fav-edit-btn:hover { border-color: var(--m-orange); color: var(--m-orange-deep); }
.memb-page .fav-edit-btn:active { transform: scale(.96); }

/* ── 전체재생 버튼 — 주황 채움 + 아래 단색 그림자 입체 (PC 상단 / 모바일 하단 공통) ── */
/* :first-of-type 대신 전용 id(#fav-play-all)로 지정 — 디자이너 권고 */
.memb-page .fav-meta-actions #fav-play-all { transition: transform .08s, box-shadow .08s; }
.memb-page .fav-meta-actions #fav-play-all,
.memb-page .pcta:not(#memb-play-all):not(:disabled) {
  background: var(--m-orange-deep); border-color: var(--m-orange-deep); color: #fff;
  box-shadow: 0 4px 0 #B84F00;
  transform: translateY(-2px);
}
.memb-page .fav-meta-actions #fav-play-all:active,
.memb-page .pcta:not(#memb-play-all):not(:disabled):active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #B84F00;
}

/* ── 편집 모드 (전체 탭) — 드래그 순서 변경 + 행 탭 즉시 삭제 ── */
/* 행 우측 삭제 버튼 — 평소 숨김, 편집 모드에서 주황 채움 close 아이콘으로 표시 */
.memb-page .fav-ep-editchk {
  width: 24px; height: 24px; flex: none; border-radius: 6px;
  border: 1.5px solid var(--m-divider); background: #fff;
  display: none; place-items: center; color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.memb-page .fav-ep-editchk .material-icons { font-size: 17px; }
.memb-page.fav-editing .fav-ep-editchk {
  display: grid;
  background: #90C31F; border-color: #90C31F; color: #fff;
}
/* 편집 모드에서는 재생 버튼 숨김 */
.memb-page.fav-editing .fav-meta-btn { display: none; }
.memb-page.fav-editing .fav-sel-toolbar { display: none; }
/* 드래그 핸들 — 편집 모드에서 표시 (구성 모드는 dst 규칙이 별도 처리) */
.memb-page .fav-ep-handle { display: none; }
.memb-page.fav-editing .fav-ep-handle { display: grid; }

/* ── 전체재생 하단 바 (모바일) — 상단 우측 전체재생 버튼을 하단 고정 바로 대체
   재생 페이지 memb-play-footer와 동일 크롬(배경·경계선·패딩·800px 중앙 행)으로
   재생 페이지 이동 시 같은 위치의 버튼이 자연스럽게 이어지게 한다 ── */
.memb-page .fav-playbar { display: none; }
@media (max-width: 899px) {
  .memb-page .fav-playbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 0;
    background: var(--m-card);
    animation: favSheetUp .25s ease;
  }
  .memb-page .fav-playbar .fav-playbar-row {
    display: flex; gap: 10px; align-items: center;
    max-width: 800px; margin: 0 auto; padding: 0 18px;
  }
  .memb-page .fav-playbar .pcta { flex: 1; }
  /* 상단 우측 전체재생 버튼은 하단 바로 대체 */
  .memb-page .fav-meta-actions #fav-play-all { display: none; }
  /* 하단 바가 목록 마지막 행을 가리지 않도록 본문 하단 여백 (편집 바와 동일 수치) */
  .memb-page { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}
/* 편집 모드에서는 편집 바가 하단을 쓰므로 재생 바 숨김 */
.memb-page.fav-editing .fav-playbar { display: none; }
/* 재생 바가 떠 있는 동안 푸터는 숨긴다 — 하단 고정 바가 푸터 역할을 대신함 (모바일) */
@media (max-width: 899px) {
  body.fav-bar-on .idx-footer { display: none; }
}

/* ── 구성 모드 (새 플레이리스트) — 상단=플레이리스트 / 하단=전체 목록 ── */
.memb-page.fav-composing .fav-cg-panels {
  display: flex; flex-direction: column;
}
.memb-page.fav-composing .fav-cg-panel { display: none; }
.memb-page.fav-composing .fav-cg-panel.fav-compose-dst {
  display: block; order: -1;
  margin-bottom: 18px;
  padding: 14px;
  border: 1.5px dashed var(--m-orange-90); border-radius: 16px;
  background: var(--m-orange-95);
}
.memb-page.fav-composing .fav-cg-panel.fav-compose-src { display: block; }
.memb-page .fav-compose-label {
  font-size: 13px; font-weight: 800; color: var(--m-text-tertiary);
  margin: 0 0 10px; letter-spacing: -.1px;
}
/* 담기 영역 라벨은 컨테이너 색에 맞춰 강조 */
.memb-page.fav-composing .fav-compose-dst .fav-compose-label {
  color: var(--m-orange-deep);
}
/* 소스 행 — 담긴 항목은 이미지·텍스트만 흑백/흐림, 체크 아이콘은 선명하게 유지 (행 전체 탭 = 담기) */
.memb-page.fav-composing .fav-compose-src .fav-ep.fav-added .fav-ep-cover,
.memb-page.fav-composing .fav-compose-src .fav-ep.fav-added .fav-ep-body {
  opacity: .55; filter: grayscale(1);
}
/* 대상 행 — 우측 체크박스 상시 노출 (주황 채움, 구성 모드에서는 '빼기' 아이콘) */
.memb-page.fav-composing .fav-compose-dst .fav-ep-editchk {
  display: grid;
  background: var(--m-orange); border-color: var(--m-orange); color: #fff;
}
/* 대상 행 — 드래그 핸들 상시 노출 (구성 모드에서도 순서 변경 가능) */
.memb-page.fav-composing .fav-compose-dst .fav-ep-handle { display: grid; }
/* 구성 모드의 빈 상태 문구는 숨김 — 섹션 라벨이 안내 역할 */
.memb-page.fav-composing .fav-compose-dst .fav-cg-empty { display: none; }
/* 구성 모드에서는 메타 버튼·재생 바 숨기고 완료만 노출 */
.memb-page.fav-composing .fav-meta-actions .fav-meta-btn,
.memb-page.fav-composing .fav-meta-actions #fav-edit-btn { display: none; }
.memb-page.fav-composing .fav-playbar { display: none; }
/* 플레이리스트 전환 트리거 비활성 — 구성 중 탭 전환 방지 */
.memb-page.fav-composing .fav-meta-cat { pointer-events: none; opacity: .5; }

/* ── 순서 조정 (편집 모드 내 드래그) ── */
.memb-page .fav-ep-handle {
  width: 28px; flex: none; place-items: center;
  color: var(--m-text-assistive); cursor: grab;
}
.memb-page .fav-ep-handle:active { cursor: grabbing; }
.memb-page .fav-ep-handle .material-icons { font-size: 22px; }
.memb-page .fav-ep-list.reorder-mode .fav-ep {
  cursor: grab; user-select: none;
}
.memb-page .fav-ep-list.reorder-mode .fav-ep:active { cursor: grabbing; }
.memb-page .fav-ep.dragging {
  opacity: .95;
  background: #FFF3E0;
  border: 2px dashed #FF9500;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(255,149,0,.25);
}
.memb-page .fav-ep-list.reorder-mode .fav-ep:not(.dragging) {
  border-style: solid;
}
.memb-page .fav-ep-list.reorder-mode .fav-ep:not(.dragging):hover {
  border-color: var(--m-orange);
}

/* ── 즐겨찾기 페이지: 컨텐츠(영상) 목록 ── */
.memb-page .fav-ep-list { display: flex; flex-direction: column; gap: 8px; }

/* PC: 영상 항목 2열 배치 (순서 조정 모드에서는 1열) */
@media (min-width: 900px) {
  .memb-page .fav-ep-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .memb-page .fav-ep-list.reorder-mode {
    grid-template-columns: 1fr;
  }
}
.memb-page .fav-ep {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--m-line); border-radius: 14px;
  padding: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.memb-page .fav-ep:hover {
  border-color: var(--m-orange);
}
.memb-page .fav-ep-cover {
  width: 48px; height: 48px; border-radius: 8px; flex: none;
  border: 1px solid var(--m-line); box-sizing: border-box;
  overflow: hidden; background: var(--m-surface-gray);
  display: grid; place-items: center;
}
.memb-page .fav-ep-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.32);   /* 박스는 유지, 안쪽 이미지만 확대 (가장자리 크롭) */
}
.memb-page .fav-ep-body { flex: 1; min-width: 0; }
.memb-page .fav-ep-title {
  font-size: 14px; font-weight: 500; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.memb-page .fav-ep-title b { font-weight: 800; }
.memb-page .fav-ep-ep {
  font-size: 12.5px; font-weight: 600; color: var(--m-text-tertiary);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── 플레이리스트 생성/수정 모달 ── */
.fav-cg-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: rgba(0,0,0,.4);
  display: none;
  align-items: center; justify-content: center;
}
.fav-cg-modal.open { display: flex; }
.fav-cg-modal-box {
  width: calc(90% - 40px); max-width: 360px; background: #fff; border-radius: 20px;
  padding: 24px 20px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  box-sizing: border-box;
}
.fav-cg-modal-box h4 {
  font-size: 17px; font-weight: 800; color: var(--m-ink); margin: 0 0 16px;
}
.fav-cg-modal-box p {
  font-size: 14px; font-weight: 600; color: var(--m-text-secondary);
  margin: 0 0 4px; line-height: 1.5;
}
.fav-cg-modal-box input {
  width: 100%; border: 2px solid var(--m-line); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; font-weight: 600; color: var(--m-ink);
  outline: none; transition: border-color .15s;
  box-sizing: border-box;
}
.fav-cg-modal-box input:focus { border-color: var(--m-orange); }
.fav-cg-modal-btns {
  display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end;
}
.fav-cg-modal-cancel {
  border: 0; background: var(--m-surface-gray); color: var(--m-text-secondary);
  font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 12px; cursor: pointer;
}
.fav-cg-modal-cancel:hover { background: var(--m-line); }
.fav-cg-modal-ok {
  border: 0; background: #FF9500; color: #fff;
  font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 12px; cursor: pointer;
}
.fav-cg-modal-ok:hover { background: #EF6902; }
.fav-cg-modal-del {
  border: 0; background: #e53935; color: #fff;
  font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 12px; cursor: pointer;
}
.fav-cg-modal-del:hover { background: #c62828; }

/* ── 즐겨찾기 페이지: 빈 상태 ── */
.memb-page .fav-empty { margin-top: 48px; }
.memb-page .memb-empty-avatar {
  width: 130px; height: auto; margin-bottom: 12px;
}
/* 플레이리스트 패널의 인라인 빈 상태 — 120px 원형 타일(페이지 배경색) 안에 캐릭터 */
.memb-page .fav-cg-empty .memb-empty-avatar {
  width: 120px; height: auto;
  object-fit: contain;
}
.memb-page .fav-empty-sub {
  font-size: 13px; color: var(--m-muted); margin-top: 6px;
}
.memb-page .fav-empty-mini {
  font-size: 14px; vertical-align: middle;
}
.memb-page .fav-empty-link {
  display: inline-block; margin-top: 20px;
  font-size: 14px; font-weight: 700; color: var(--m-orange-deep);
  text-decoration: none; border-bottom: 1.5px solid var(--m-orange-90);
  padding-bottom: 2px; transition: border-color .15s;
}
.memb-page .fav-empty-link:hover { border-color: var(--m-orange); }

.memb-page .tabs {
  display: flex; gap: 18px;
  width: min(1044px, calc(100% - 36px));
  padding: 0; margin: 40px auto 0;
  background: var(--m-page-bg);
  border: 0; border-bottom: 2px solid rgba(52,26,9,.15);
  border-radius: 0; box-sizing: border-box;
  position: sticky; top: 0; z-index: 20;
}
@media (max-width: 767px) {
  .memb-page .tabs { margin: 30px auto 10px; }
}
.memb-page .tab {
  flex: 1 1 0; text-align: center;
  position: relative; border: 0; background: transparent; border-radius: 0;
  padding: 12px 2px; margin-bottom: -2px;
  border-bottom: 3px solid transparent; height: auto;
  font-size: 15.5px; font-weight: 700; color: rgba(52,26,9,.5);
  cursor: pointer; transition: .15s;
}
.memb-page .tab.on {
  color: var(--m-cta-hover); font-weight: 800;
  border-bottom-color: var(--m-cta-hover);
}
.memb-page .tab::after { display: none; }
.memb-page .tab .cnt { font-size: 12px; font-weight: 700; color: var(--m-muted); margin-left: 5px; }

/* ===== TITLE LIST: 가이드 탭 헤더 ===== */
.memb-page .guide-head {
  margin: 18px 0 22px; text-align: center;
  font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--m-text-primary);
}

/* ===== TITLE LIST: 권별 카드 ===== */
.memb-page .list { padding: 12px 18px 16px; }
@media (min-width: 768px) { .memb-page .list { padding: 16px 18px 24px; } }

.memb-page .bk {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--m-line);
  border-radius: 16px; padding: 11px; margin-bottom: 10px;
  cursor: pointer; transition: .15s; position: relative; box-shadow: var(--m-shadow);
}
.memb-page .bk:hover { border-color: var(--m-orange); transform: translateY(-2px); }
.memb-page .bk:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.memb-page .bk.next { border: 2px solid var(--m-orange); background: linear-gradient(0deg, #fff, #FFFDF8); }
.memb-page .bk .cover {
  width: 80px; height: 80px; border-radius: 13px;
  position: relative; display: grid; place-items: center; overflow: hidden; flex: none;
}
.memb-page .bk .cover img { width: 100%; height: 100%; object-fit: cover; }
.memb-page .bk .cover .ttl {
  font-weight: 900; color: #fff; font-size: 13px; line-height: 1.02;
  text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.28); padding: 0 6px; z-index: 1;
}
.memb-page .bk .info { flex: 1; min-width: 0; }
.memb-page .bk .info .nm {
  font-size: 15px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.memb-page .bk .info .row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.memb-page .bk .info .badge { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 7px; }
.memb-page .b-done2 { background: #EAF7EF; color: var(--m-success); }
.memb-page .b-ing2 { background: var(--m-orange-soft); color: var(--m-orange-deep); }
.memb-page .b-new2 { background: #F3F4F6; color: var(--m-tertiary); }
.memb-page .bk .info .ct { font-size: 12.5px; font-weight: 800; color: var(--m-ink); }
.memb-page .bk .info .ct b { color: var(--m-orange-deep); }
.memb-page .bk .info .miniprog {
  height: 6px; background: var(--m-line); border-radius: 999px;
  margin-top: 8px; overflow: hidden; max-width: 220px;
}
.memb-page .bk .info .miniprog > span { display: block; height: 100%; background: var(--m-orange); }
.memb-page .bk .nexttag {
  position: absolute; top: -9px; right: 14px;
  background: var(--m-orange); color: #fff;
  font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 7px;
  box-shadow: 0 4px 10px rgba(245,144,0,.3);
}

/* 모바일 booklist / 데스크톱 bgrid 전환 (member_title_list) */
.memb-page .memb-booklist-desktop { display: none; }
@media (min-width: 768px) {
  .memb-page .memb-booklist-mobile { display: none; }
  .memb-page .memb-booklist-desktop { display: grid; }
  .memb-page .list .bk { margin-bottom: 0; }
}

/* ===== TITLE LIST: 테마별 (collect) ===== */
.memb-page .collect { padding: 14px 16px 18px; }
@media (min-width: 768px) { .memb-page .collect { padding: 16px 36px 24px; } }
.memb-page .collect .lead {
  font-size: 12.5px; color: var(--m-muted); font-weight: 700;
  padding: 2px 4px 12px; line-height: 1.6;
}
.memb-page .typegrid { display: grid; gap: 11px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .memb-page .typegrid { grid-template-columns: repeat(4, 1fr); } }
.memb-page .tcard {
  background: #fff; border: 1px solid var(--m-line);
  border-radius: 16px; padding: 15px 13px;
  cursor: pointer; transition: .15s; text-align: left;
}
.memb-page .tcard:hover { border-color: var(--m-orange); box-shadow: var(--m-shadow); transform: translateY(-3px); }
.memb-page .tcard .em {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--m-orange-soft); display: grid; place-items: center;
  font-size: 21px; margin-bottom: 10px;
}
.memb-page .tcard .tn { font-size: 15px; font-weight: 800; }
.memb-page .tcard .ts { font-size: 12px; color: var(--m-muted); font-weight: 700; margin-top: 3px; }
.memb-page .tcard .go { margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--m-orange-deep); }

/* ===== PLAY PAGE: 비디오 ===== */
.memb-page .video {
  aspect-ratio: 16/9;
  background: repeating-linear-gradient(135deg, #3a3631 0 16px, #332f2a 16px 32px);
  position: relative; display: grid; place-items: center;
}
.memb-page .video .tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.92); font-size: 12px; font-weight: 800;
  color: #6b6256; padding: 5px 10px; border-radius: 7px;
}
.memb-page .video .pp {
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(0,0,0,.45); display: grid; place-items: center;
  color: #fff; font-size: 23px;
}
.memb-page .video .scrub {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 5px; background: rgba(255,255,255,.25);
}
.memb-page .video .scrub > span { display: block; height: 100%; width: 18%; background: #fff; }
.memb-page .video .time {
  position: absolute; bottom: 10px; right: 14px;
  color: #fff; font-size: 12px; font-weight: 600;
}

/* ===== PLAY PAGE: 플레이어 바 ===== */
.memb-page .playerbar {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px 4px;
}
.memb-page .playerbar .skip {
  background: none; border: 0; color: #5b554b; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; flex: none;
  transition: background .15s;
}
.memb-page .playerbar .skip:hover { background: #FCFAF6; }
.memb-page .playerbar .skip:disabled,
.memb-page .playerbar .skip.disabled { opacity: .3; cursor: default; }
.memb-page .playerbar .skip:disabled:hover,
.memb-page .playerbar .skip.disabled:hover { background: none; }
.memb-page .playerbar .skip:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }
.memb-page .playerbar .skip .material-icons { font-size: 30px; }
.memb-page .playerbar .ptt { flex: 1; text-align: center; cursor: pointer; min-width: 0; border-radius: 10px; transition: background .15s; }
.memb-page .playerbar .ptt:hover { background: #FCFAF6; }
.memb-page .playerbar .ptt:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }
.memb-page .playerbar .ptt .trow { display: flex; align-items: center; justify-content: center; gap: 7px; }
.memb-page .playerbar .ptt h3 { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; }
.memb-page .playerbar .ptt .sub { font-size: 12.5px; color: var(--m-text-tertiary); font-weight: 600; margin-top: 2px; }
.memb-page .playerbar .ptt .chev2 {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; color: var(--m-orange-deep);
  transition: transform .28s ease;
}
.memb-page .playerbar .ptt .chev2 .material-icons { font-size: 26px; }

/* ===== PLAY PAGE: CTA 영역 ===== */
.memb-page .cta-row { display: flex; gap: 10px; padding: 14px 18px 4px; align-items: center; }
.memb-page .pcta {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--m-orange-deep); color: #fff; border: 0;
  border-radius: 14px; padding: 16px; font-size: 16.5px; font-weight: 800;
  cursor: pointer; box-shadow: inset 0 -4px 0 var(--m-orange-heavy);
  transition: transform .1s, box-shadow .1s, filter .15s;
  transform: translateY(0);
}
.memb-page .pcta .material-icons { font-size: 22px; }
/* hover는 필터로 전체를 어둡게 — 입체 립(--m-orange-heavy)도 같이 어두워져 3D가 유지됨.
   터치 기기 sticky hover로 탭 후 어두운 상태가 남지 않도록 실제 호버 기기에서만 적용 */
@media (hover: hover) and (pointer: fine) {
  .memb-page .pcta:hover { filter: brightness(.94); }
}
.memb-page .pcta:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--m-orange-heavy); }
.memb-page .pcta:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }
/* 비활성 — 선택 모드에서 체크 전까지 (회색 립 유지, 클릭 피드백 없음) */
.memb-page .pcta:disabled {
  background: var(--m-divider); color: var(--m-text-assistive);
  box-shadow: inset 0 -4px 0 #C4C9CF;
  cursor: default;
}
.memb-page .pcta:disabled:hover { filter: none; }
.memb-page .pcta:disabled:active {
  transform: none; box-shadow: inset 0 -4px 0 #C4C9CF;
}

/* 반복재생 / 즐겨찾기 — 세련된 아이콘 버튼 (얇은 테두리 + subtle 그림자) */
.memb-page .repeatbtn,
.memb-page .likesq {
  flex: none; position: relative; width: 48px; height: 48px;
  border: 1px solid var(--m-line); background: #fff;
  border-radius: 14px; cursor: pointer; color: #8c857a;
  display: grid; place-items: center;
  box-shadow: inset 0 -4px 0 var(--m-divider);
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s, border-color .15s, color .15s, background .15s;
}
.memb-page .repeatbtn .material-icons,
.memb-page .likesq .material-icons { font-size: 22px; }
/* hover는 아이콘/배경/립만 오렌지 톤으로 — 테두리를 바꾸면 립(그림자)까지
   오렌지 라운드로 감싸져 어색해진다.
   터치 기기는 탭 후 :hover가 남는(sticky hover) 문제가 있어,
   .on 해제 후에도 주황으로 보이는 버그가 생긴다 → 실제 호버 가능 기기에서만 적용 */
@media (hover: hover) and (pointer: fine) {
  .memb-page .repeatbtn:hover,
  .memb-page .likesq:hover {
    color: var(--m-orange-deep); background: #FFF8EB;
    box-shadow: inset 0 -4px 0 var(--m-orange-90);
  }
}
.memb-page .repeatbtn:active,
.memb-page .likesq:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--m-divider); }
.memb-page .repeatbtn:focus-visible,
.memb-page .likesq:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }
.memb-page .repeatbtn.on {
  border-color: var(--m-orange); color: var(--m-orange-deep); background: #FFF8EB;
  box-shadow: inset 0 -4px 0 var(--m-orange-90);
}
.memb-page .likesq.on { border-color: var(--m-orange); color: var(--m-orange-deep); background: #FFF8EB; }
.memb-page .likesq.on .material-icons { font-variation-settings: 'FILL' 1; }
.memb-page .repeat-caption {
  text-align: center; font-size: 12px; font-weight: 700;
  color: var(--m-muted); padding: 7px 18px 0; min-height: 16px;
}
.memb-page .repeat-caption b { color: var(--m-orange-deep); }

/* ===== PLAY PAGE: 하단 컨트롤 바 — 화면 하단에 고정 ===== */
/* footer에 memb-page 클래스를 붙여 --m-* 변수와 버튼 스타일을 재사용한다.
   화면 하단에 고정해 재생 버튼이 스크롤 없이 항상 보이게 한다.
   목록 시트(.acc z-1002, backdrop z-1001)보다 낮게 두어 시트가 열리면 덮인다. */
footer.memb-page.memb-play-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding-top: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  /* 테두리·배경 제거 — 본문 위에 버튼만 뜨는 플로팅 컨트롤 */
}
/* 고정 푸터에 가려지지 않도록 재생 페이지 본문 하단에 푸터 높이만큼 여백 */
.memb-page.memb-play {
  padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}
footer.memb-page.memb-play-footer .cta-row {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 18px;
}
/* 하단 '처음부터 재생' + '반복' 버튼: 높이 54px로 통일 (반복은 56→54)
   그림자는 사이트 기존 그대로 — 처음부터 재생 #E64D03 / 반복 #D9DCE1 */
footer.memb-page.memb-play-footer #memb-play-all,
footer.memb-page.memb-play-footer #memb-repeat {
  height: 54px;
  box-sizing: border-box;
}
footer.memb-page.memb-play-footer #memb-repeat {
  width: 54px;
  border-radius: 16px;
}
footer.memb-page.memb-play-footer #memb-repeat .material-icons { font-size: 26px; margin-bottom: 2px; }
footer.memb-page.memb-play-footer .repeat-caption {
  padding: 6px 18px 0;
}

/* ===== PLAY PAGE: 마지막 권 / 첫 권 모달 ===== */
.memb-end-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
.memb-end-modal[hidden] { display: none; }
.memb-end-backdrop {
  position: absolute; inset: 0; background: rgba(17,17,17,.45);
  animation: membEndFade .2s ease;
}
.memb-end-box {
  position: relative; z-index: 1; background: #fff; border-radius: 22px;
  padding: 32px 26px 24px; width: calc(100% - 48px); max-width: 380px;
  text-align: center; box-shadow: 0 12px 40px rgba(17,17,17,.18);
  animation: membEndPop .28s cubic-bezier(.32,.72,0,1);
}
@keyframes membEndFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes membEndPop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .memb-end-backdrop, .memb-end-box { animation: none; }
}
.memb-end-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--m-orange-soft); color: var(--m-orange-deep);
}
.memb-end-icon .material-icons { font-size: 30px; }
.memb-end-box h4 { font-size: 19px; font-weight: 800; color: var(--m-ink); margin: 0 0 6px; }
.memb-end-box p { font-size: 14px; color: var(--m-muted); margin: 0 0 22px; line-height: 1.5; }
.memb-end-btns { display: flex; flex-direction: column; gap: 10px; }
.memb-end-replay, .memb-end-golist {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 15px; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: transform .1s, background .15s;
}
.memb-end-replay { background: var(--m-cta); color: #fff; box-shadow: 0 2px 0 0 var(--m-cta-hover); }
.memb-end-replay:active { transform: translateY(2px); box-shadow: 0 0 0 0 var(--m-cta-hover); }
.memb-end-replay .material-icons { font-size: 20px; }
.memb-end-golist {
  background: #fff; color: var(--m-ink); border: 1.5px solid var(--m-line);
}
.memb-end-golist:active { transform: translateY(1px); }
.memb-end-golist .material-icons { font-size: 20px; }
.memb-end-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--m-surface-gray); color: var(--m-muted); cursor: pointer;
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.memb-end-close:hover { background: var(--m-line); color: var(--m-ink); }
.memb-end-close .material-icons { font-size: 20px; }

/* ===== 권 완료 모달 (다음 권 제안 / 완주) ===== */
.memb-vol-cover {
  margin: 18px auto 10px; max-width: 180px;
  border-radius: 16px; overflow: hidden;
  background: var(--m-surface-gray);
}
/* 표지 이미지 비율이 제각각 — 원본 비율 그대로 노출 */
/* 원본 비율 유지, 가로·세로 모두 상한 — 세로로 긴 표지도 모달이 길어지지 않음 */
.memb-vol-cover img { display: block; max-width: 180px; max-height: 200px; width: auto; height: auto; margin: 0 auto; }
/* 투명 로고 — 표지 프레임(회색 배경) 벗김 */
.memb-vol-cover.is-logo { background: none; }
/* 피팅 로고는 내부 여백이 있어 권 표지보다 작아 보임 — 시각만 살짝 확대 */
.memb-vol-cover.is-logo img { transform: scale(1.15); }
.memb-vol-sub { font-weight: 600; }
/* 이미지와 주황 버튼 사이 간격 확보 — memb-end-box p의 22px보다 여유 */
.memb-end-box p.memb-vol-sub { margin-bottom: 30px; }
.memb-vol-text {
  border: 0; background: none; padding: 12px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--m-text-tertiary);
  transition: color .15s;
}
.memb-vol-text:hover { color: var(--m-orange-deep); }
.memb-vol-text:focus-visible {
  outline: 2px solid var(--m-ink); outline-offset: 2px; border-radius: 8px;
}
.memb-page .pickchip {
  margin: 9px 18px 0; display: flex; align-items: center; gap: 8px;
  background: var(--m-surface-gray); border: 1px solid var(--m-line);
  border-radius: 11px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 800; color: var(--m-text-secondary);
}
.memb-page .pickchip .x { margin-left: auto; cursor: pointer; font-weight: 800; }

/* ===== PLAY PAGE: 에피소드 목록 (bottom sheet — 하단에서 슬라이드업) ===== */
/* 시트 dim — navbar(z-index:1000) 위에 올려서 sheet 열릴 때 navbar도 함께 어둡게 */
.memb-page .memb-backdrop {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(17,17,17,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.memb-page .memb-backdrop.open { opacity: 1; pointer-events: auto; }

.memb-page .acc {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1002;
  background: #fff; border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(17,17,17,.12);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  max-height: 70vh; overflow: hidden;
}
.memb-page .acc.open { transform: translateY(0); }

/* grab handle — bottom sheet 시그니처 */
.memb-page .acc-grab {
  flex: none; height: 28px; display: grid; place-items: center;
  cursor: grab; user-select: none; touch-action: none;
}
.memb-page .acc-grab:active { cursor: grabbing; }
.memb-page .acc-grab::before {
  content: ''; width: 40px; height: 4px; border-radius: 999px;
  background: var(--m-line); transition: background .15s;
}
.memb-page .acc-grab:hover::before { background: var(--m-muted); }
.memb-page .acc-grab:focus-visible { outline: 2px solid var(--m-ink); outline-offset: -2px; }

/* 기존 acc-head 호환 (사용되지 않으나 안전용 유지) */
.memb-page .acc-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px; cursor: pointer; user-select: none;
}
.memb-page .acc-head:hover { background: #FCFAF6; }
.memb-page .acc-head.open { background: #F6F3EE; border-bottom: 1px solid var(--m-line); }
.memb-page .acc-head .lbl { font-size: 14.5px; font-weight: 800; }
.memb-page .acc-head .cnt { font-size: 12.5px; color: var(--m-muted); font-weight: 700; }
.memb-page .acc-head .chev { margin-left: auto; color: var(--m-muted); font-size: 13px; transition: .2s; }
.memb-page .acc-head.open .chev { transform: rotate(180deg); }

.memb-page .listtoolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--m-line);
  font-size: 12px; font-weight: 700; color: var(--m-muted);
}
.memb-page .listtoolbar.col {
  flex-direction: column; align-items: stretch; gap: 11px; padding: 14px 14px 12px;
}
.memb-page .listtoolbar .lt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.memb-page .listtoolbar .lt-row span { font-size: 16px; font-weight: 800; color: var(--m-text-primary); }
.memb-page .listtoolbar .lt-play-row {
  display: flex; gap: 10px;
}
.memb-page .listtoolbar .lt-play-row .selbtn { flex: 1; }
/* 선택 모드 우측 액션 — 취소 + 전체선택 체크박스 */
.memb-page .listtoolbar .lt-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* 전체선택 체크박스 — 행의 .chk와 동일한 라운드 박스 + 주황 체크 */
.memb-page .selallchk {
  width: 26px; height: 26px; border-radius: 7px; padding: 0;
  border: 2px solid #CFC8BC; background: #fff; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: background .15s, border-color .15s, transform .1s;
}
.memb-page .selallchk .material-icons { font-size: 18px; opacity: 0; transition: opacity .15s; }
.memb-page .selallchk.on { background: var(--m-orange); border-color: var(--m-orange); transform: scale(1.05); }
.memb-page .selallchk.on .material-icons { opacity: 1; }
.memb-page .selallchk:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; border-radius: 6px; }
.memb-page .selbtn {
  border: 1px solid var(--m-line); background: #fff;
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 800; color: var(--m-ink); cursor: pointer;
  transition: transform .1s; transform: translateY(0);
}
.memb-page .selbtn.on {
  background: #2d2a24; border-color: #2d2a24; color: #fff;
}
.memb-page .selbtn.on:active { transform: translateY(1px); }
.memb-page .selbtn.dis { color: var(--m-text-disabled); border-color: var(--m-line); background: var(--m-surface); }
.memb-page .selbtn.full { width: 100%; }

.memb-page .acc-body {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.memb-page .acc-body-inner {
  overflow-y: auto; min-height: 0; flex: 1;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.memb-page.memb-play .acc-tail { height: 0; }
.memb-page .acc-body-inner::-webkit-scrollbar { width: 6px; }
.memb-page .acc-body-inner::-webkit-scrollbar-thumb { background: #DDD7CD; border-radius: 6px; }

/* 목록 하단 전체 재생 버튼 바 — sheet 바닥에 고정 */
.memb-page .acc-playbar {
  flex: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--m-line);
  background: #fff;
}
.memb-page .acc-playbar .pcta { width: 100%; }

/* 즐겨찾기 토스트 — 시트 상단 중앙 고정 (grab+toolbar 아래), 잠시 표시 후 사라짐 */
.memb-page .memb-toast {
  position: absolute; top: 76px; left: 50%; z-index: 5;
  transform: translate(-50%, 0) scale(.96);
  background: #2d2a24; color: #fff;
  border-radius: 999px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(17,17,17,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.memb-page .memb-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* 목록 끝 표시 — 마지막 영상 아래 종단 마커 (양쪽 라인 + 텍스트) */
.memb-page .acc-end {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px calc(26px + env(safe-area-inset-bottom, 0px));
}
.memb-page .acc-end .acc-end-line {
  flex: 1; height: 1px; background: var(--m-line);
}
.memb-page .acc-end .acc-end-text {
  flex: none; font-size: 12px; font-weight: 700;
  color: var(--m-text-tertiary); white-space: nowrap;
}

.memb-page .ep {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--m-line);
  cursor: pointer; min-height: 56px;
}
.memb-page .ep:last-child { border-bottom: 0; }
.memb-page .ep:hover { background: #FCFAF6; }
.memb-page .ep.current { background: var(--m-surface-gray); }
.memb-page .ep .ep-fav {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; cursor: pointer; flex: none;
  display: grid; place-items: center; color: #C8C2B6;
  transition: color .15s, transform .1s;
}
.memb-page .ep .ep-fav .material-icons { font-size: 22px; }
.memb-page .ep .ep-fav:hover { color: var(--m-orange); transform: scale(1.12); }
.memb-page .ep .ep-fav:active { transform: scale(.95); }
.memb-page .ep .ep-fav.on { color: var(--m-orange); }
.memb-page .ep .ep-fav.on .material-icons { font-variation-settings: 'FILL' 1; }
.memb-page .ep.current .ep-fav:not(.on) { color: var(--m-text-secondary); }
.memb-page .ep .em { flex: 1; min-width: 0; }
.memb-page .ep .em .nm {
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.memb-page .ep .em .ko { font-size: 12px; color: var(--m-muted); font-weight: 600; margin-top: 1px; }
.memb-page .ep .dur { font-size: 12px; color: var(--m-text-tertiary); font-weight: 700; flex: none; }
.memb-page .ep .nowtag {
  font-size: 12px; font-weight: 800; color: var(--m-orange-deep);
  background: #fff; border: 1px solid var(--m-orange);
  padding: 3px 7px; border-radius: 6px; flex: none;
}
.memb-page .ep .chk {
  width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid #CFC8BC; flex: none; display: grid; place-items: center;
  color: #fff; background: #fff; transition: background .15s, border-color .15s, transform .1s; margin-left: 4px;
}
.memb-page .ep .chk .material-icons { font-size: 18px; opacity: 0; transition: opacity .15s; }
.memb-page .ep.checked .chk { background: var(--m-orange); border-color: var(--m-orange); transform: scale(1.05); }
.memb-page .ep.checked .chk .material-icons { opacity: 1; }

/* ===== PLAY PAGE: 팝업 ===== */
.memb-page .pop-dim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1060; }
.memb-page .pop {
  position: fixed; left: 50%; top: 44%; transform: translate(-50%,-50%); z-index: 1061;
  background: #fff; border-radius: 20px; padding: 26px 24px 20px;
  width: min(320px, 84%); border: 1.5px solid var(--m-line); text-align: center;
}
.memb-page .pop-msg { font-size: 16px; font-weight: 800; color: var(--m-ink); }
.memb-page .pop-sub { font-size: 12.5px; color: var(--m-text-tertiary); font-weight: 700; margin-top: 7px; }
.memb-page .pop-btns { display: flex; gap: 10px; margin-top: 20px; }
.memb-page .pop-btns.col { flex-direction: column; }
.memb-page .pop-gray {
  width: 100%; padding: 13px 0; border-radius: 999px !important;
  font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--m-surface-gray); border: 1.5px solid var(--m-line); color: var(--m-text-secondary);
}
.memb-page .pop-gray:hover { background: #EFEFF0; }
.memb-page .pop-btns button { flex: 1; padding: 13px 0; border-radius: 13px; font-size: 14px; font-weight: 800; cursor: pointer; }
.memb-page .pop-cancel { background: #fff; border: 1px solid var(--m-line); color: var(--m-ink); border-radius: 999px !important; }
.memb-page .pop-ok {
  background: var(--m-cta); border: 0; color: var(--m-cta-text); border-radius: 999px !important;
  box-shadow: 0 4px 0 0 var(--m-cta-hover);
  transition: transform .1s, box-shadow .1s; transform: translateY(0);
}
.memb-page .pop-ok:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--m-cta-hover); }

/* ===== PLAY PAGE: 바텀시트 (목록) ===== */
.memb-page .sheet-dim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; }
.memb-page .sheet {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: min(772px, 100%); z-index: 1041;
  background: #fff; border-radius: 22px 22px 0 0; max-height: 62%;
  display: flex; flex-direction: column; border: 1.5px solid var(--m-line); border-bottom: 0;
}
.memb-page .sheet-head { display: flex; align-items: center; padding: 16px 18px 10px; }
.memb-page .sheet-head .sh-title { flex: 1; text-align: center; font-size: 15.5px; font-weight: 800; padding-left: 28px; }
.memb-page .sheet-head .sh-x { background: none; border: 0; font-size: 17px; color: #8c8579; cursor: pointer; width: 28px; }
.memb-page .sheet-list { overflow-y: auto; padding-bottom: 10px; }

/* ===== PLAY PAGE: 데스크톱 2단布局 ===== */
@media (min-width: 768px) {
  .memb-page .dk { display: grid; grid-template-columns: 1.55fr 1fr; }
  .memb-page .dk .left { padding: 20px 20px 24px; }
  .memb-page .dk .left .video { border-radius: 16px; overflow: hidden; }
  .memb-page .dk .right {
    border-left: 1px solid var(--m-line); background: var(--m-surface);
    padding: 20px 18px; display: flex; flex-direction: column;
  }
  .memb-page .dk .right .rhead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
  .memb-page .dk .right .rhead .lbl { font-size: 15px; font-weight: 800; }
  .memb-page .dk .right .rhead .cnt { font-size: 12.5px; color: var(--m-muted); font-weight: 700; }
  .memb-page .dk .right .dklist {
    flex: 1; overflow-y: auto; border: 1px solid var(--m-line);
    border-radius: 14px; background: #fff;
  }
  .memb-page .dk .right .dklist::-webkit-scrollbar { width: 6px; }
  .memb-page .dk .right .dklist::-webkit-scrollbar-thumb { background: #DDD7CD; border-radius: 6px; }
}

/* ===== 브랜드 그라디언트 (커버 배경) ===== */
.memb-page .o { background: radial-gradient(circle at 50% 42%, #FFB23E 0 40%, #F59000 40%); }
.memb-page .g { background: radial-gradient(circle at 50% 42%, #9FD64B 0 40%, #7CB518 40%); }
.memb-page .gy { background: linear-gradient(135deg, #C9C3B8, #B3AC9E); }
.memb-page .bf { background: linear-gradient(135deg, #C9C3B8, #B3AC9E); }
.memb-page .pk { background: linear-gradient(135deg, #FF8FB1, #E5547E); }
.memb-page .sk { background: linear-gradient(135deg, #5FC3F0, #2E92D6); }

/* ===== PLAY PAGE: 모바일/데스크톱 구조 전환 ===== */
/* 하단 여백: margin은 상쇄되어 body 배경(다른 색)이 보일 수 있으므로
   페이지 흰색 padding으로 푸터와의 간격을 만든다. */
.memb-page.memb-play { padding-bottom: 46px; }

/* ===== PLAY PAGE: 교재 그룹 네비게이션 (영상 위) ===== */
.memb-page.memb-play .play-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: #000; color: #fff;
}
.memb-page.memb-play .play-nav-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  color: rgba(255,255,255,.8); text-decoration: none;
  border: 0; background: none; padding: 0; cursor: pointer;
  transition: background .15s;
}
.memb-page.memb-play .play-nav-back:hover { background: rgba(255,255,255,.12); }
.memb-page.memb-play .play-nav-back .material-icons { font-size: 22px; }
/* 뒤로가기+타이틀 통합 버튼 — 원형 대신 넓은 터치 영역 */
.memb-page.memb-play .play-nav-back--wide {
  width: auto; height: auto; border-radius: 8px;
  padding: 5px 10px; gap: 4px; max-width: 100%;
  text-align: left;
}
.memb-page.memb-play .play-nav-back--wide .play-nav-title {
  min-width: 0;
}
.memb-page.memb-play .play-nav-title {
  font-size: 15px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 모바일: 영상 영역은 static — bottom sheet가 위로 올라오므로 fixed 불필요.
   검정 레터박스로 영상에 집중. */
.memb-play-back { display: none; }

/* play 페이지 모바일 전환은 네비(appbar) 전환점과 같은 900px —
   768–899px에서 모바일 appbar + 데스크톱 영상 레이아웃이 섞이는 것 방지 */
@media (max-width: 899px) {
  /* 영상+플레이어바를 앱바와 하단 고정 푸터 사이에서 수직 중앙 정렬 (Figma 시안).
     auto 마진 쌍이 남는 공간을 균등 분배해 블록이 가운데에 온다.
     콘텐츠가 화면보다 길면(가로 모드 등) auto 마진은 0으로 붕괴해 자연 스크롤. */
  .memb-page.memb-play {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
    box-sizing: border-box;
  }
  /* 플레이 영역 — 모바일에서 너비 100%, 패딩 제거 */
  .memb-page.memb-play .playfocus.dk1col {
    width: 100%; max-width: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; flex: 1; min-height: 0;
  }
  /* 영상+플레이어바 — static (bottom sheet가 별도 fixed) */
  .memb-page.memb-play .memb-play-top {
    position: static; width: 100%;
    box-sizing: border-box;
    background: transparent; padding-bottom: 0;
    display: flex; flex-direction: column; flex: 1; min-height: 0;
  }
  /* 위·아래 auto 마진으로 영상+플레이어바 묶음을 수직 중앙에 */
  .memb-page.memb-play .memb-video-wrap { margin-top: auto; }
  .memb-page.memb-play .playerbar { margin-bottom: auto; }
  .memb-page.memb-play .memb-play-spacer { display: none; }
  .memb-page.memb-play .memb-video-wrap {
    position: relative; width: 100%;
    background: #fff;
    padding: 0;
  }
  /* 영상 위 play-nav도 흰색으로 — 레터박스 제거와 톤 통일 */
  .memb-page.memb-play .play-nav {
    background: none; color: var(--m-ink);
    /* 상단 내비 줄 여백 — 위·아래 10px, 오른쪽 16px, 왼쪽 0 */
    padding: 10px 16px 10px 0;
  }
  .memb-page.memb-play .play-nav-back { color: var(--m-text-secondary); }
  .memb-page.memb-play .play-nav-back:hover { background: var(--m-surface-gray); }
  .memb-page.memb-play .play-nav-title { color: var(--m-ink); }
  /* 영상은 너비 꽉 채우기 — iOS Safari 대응 */
  .memb-page.memb-play #screen {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .memb-page.memb-play #vimeo-player {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left;
  }
  .memb-page.memb-play #vimeo-player iframe {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 모바일 전체: 세로가 긴 영상(비율 < 16:9)은 플레이어 박스가 커져
   playerbar가 하단 고정 푸터 뒤로 가려지므로, 높이 기준으로 너비를 제한한다.
   310px ≈ appbar(60) + play-nav(~52) + playerbar(~80) + footer(~115).
   16:9 이상의 넓은 영상은 (여유 × 비율)이 100%를 넘어 기존과 동일하게 100% 유지.
   가로모드(≤480px)는 아래 블록이 footer static + 176px 상수로 덮어쓴다. */
@media (max-width: 899px) {
  .memb-page.memb-play #screen:not(.fake-fullscreen):not(:fullscreen) {
    width: min(100%, calc((100dvh - 310px) * var(--vimeo-ratio, 1.77778)));
    margin: 0 auto;
  }
}

/* 가로모드/낮은 화면: 16:9 영상을 너비 꽉 채우면 높이가 뷰포트를 넘어
   하단이 잘리므로, 높이 기준으로 너비를 제한해 영상 전체가 보이게 한다 (pillarbox).
   176px ≈ appbar(60) + play-nav(~52) + playerbar(~64). 전체화면 상태는 제외.
   #screen 자체를 제한하면 embed-responsive/player-enhanced 양쪽 상태에 모두 적용됨 */
@media (max-width: 899px) and (max-height: 480px) {
  .memb-page.memb-play #screen:not(.fake-fullscreen):not(:fullscreen) {
    width: min(100%, calc((100dvh - 176px) * var(--vimeo-ratio, 1.77778)));
    max-width: none;
    margin: 0 auto;
  }
  /* 고정 푸터가 짧은 화면의 플레이어바(타이틀)를 덮으므로 흐름 안으로 —
     스크롤로 도달 가능, 겹침 없음 */
  footer.memb-page.memb-play-footer { position: static; }
  /* 고정 푸터용 하단 여백도 불필요 — 기본값으로 복원 */
  .memb-page.memb-play { padding-bottom: 46px; }
}

/* 영상 기본 스타일 — 너비 제한은 모바일(max-width:899px → 100%)과
   데스크톱(min-width:900px → 800px) 미디어 블록이 각각 담당.
   (여기에 max-width를 두면 파일 순서상 모바일의 max-width:none을 덮어씀) */
.memb-page.memb-play #screen {
  margin: 0 auto;
  border-radius: 0; overflow: hidden;
  background: transparent;
}
.memb-page.memb-play #screen.player-enhanced,
.memb-page.memb-play #screen.player-enhanced #vimeo-player {
  background: transparent;
}
/* Vimeo iframe 요소 자체의 검정 배경 제거 — 서브픽셀 갭으로 인해 검정 선이 보이는 것 방지.
   Vimeo Player가 인라인 width/height를 설정하므로 !important로 강제. */
.memb-page.memb-play #vimeo-player,
.memb-page.memb-play #vimeo-player iframe {
  background: transparent !important;
  border: 0 !important;
}
/* 로딩 중 영상 박스는 검정 — Vimeo 'loaded' 이벤트에서 JS가 .is-loaded를
   붙이면 투명으로 돌아가 서브픽셀 검정 선 문제가 다시 생기지 않는다.
   player-enhanced(로딩 중에도 붙음)의 transparent보다 뒤에 와야 덮이지 않는다 */
.memb-page.memb-play #screen:not(.is-loaded) {
  background: #000;
}
.memb-page.memb-play #screen.player-enhanced #vimeo-player iframe {
  width: 100% !important;
  height: 100% !important;
}

/* 전체화면 버튼 — 영상 위 네비게이션 우측 끝 (영상 바깥) */
.memb-page.memb-play .play-nav-fs {
  margin-left: auto; flex: none;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 0 #D3D3D3;
  color: var(--m-text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
}
/* 누르면 그림자만큼 내려가는 입체 버튼 */
.memb-page.memb-play .play-nav-fs:active { transform: translateY(3px); box-shadow: 0 0 0 #D3D3D3; }
.memb-page.memb-play .play-nav-fs:hover { background: var(--m-surface-gray); color: var(--m-ink); }
.memb-page.memb-play .play-nav-fs .material-icons {
  font-size: 24px; color: var(--m-tertiary);
  font-variation-settings: "FILL" 0;
}
.memb-page.memb-play .play-nav-fs:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }

/* 전체화면 버튼 축소 — 흰 원 32px, 아이콘 20px (기본 48px 규칙보다 뒤에 선언해야 적용됨) */
@media (max-width: 899px) {
  .memb-page.memb-play .play-nav-fs { width: 32px; height: 32px; }
  .memb-page.memb-play .play-nav-fs .material-icons { font-size: 20px; }
}

/* 전체화면 종료 버튼(JS가 #screen 안에 생성) — 상단에서 살짝 내림 */
.memb-page.memb-play #fake-fs-exit { top: 28px; right: 16px; }

/* 데스크톱: dk1col 중앙 정렬 (모바일 전환점 899px와 쌍) */
@media (min-width: 900px) {
  /* 영상+플레이어바 묶음을 gnb와 하단 고정 푸터 사이에서 수직 중앙 정렬
     (모바일의 auto 마진 패턴과 동일). 콘텐츠가 화면보다 길면 auto 마진이
     0으로 붕괴해 자연 스크롤. 하단 padding은 고정 푸터 높이(~116px)만큼
     확보해 playerbar가 푸터에 가려지지 않게 한다. */
  .memb-page.memb-play {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
    box-sizing: border-box;
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  }
  .memb-page.memb-play .playfocus.dk1col {
    /* margin:0 auto가 flex stretch를 무력화하므로 width 명시 (max-width 820px 유지) */
    display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
  }
  .memb-page.memb-play .memb-play-top {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
  }
  .memb-page.memb-play .memb-video-wrap { margin-top: auto; }
  .memb-page.memb-play .playerbar { margin-bottom: auto; }
  .memb-page.memb-play .playfocus.dk1col {
    max-width: 820px; margin: 0 auto; padding: 24px 24px 8px;
    /* #screen 테두리의 cqw 기준 컨테이너 */
    container-type: inline-size;
  }
  .memb-page.memb-play .memb-play-top {
    position: static; z-index: auto; background: none; padding-bottom: 0;
  }
  .memb-page.memb-play .memb-play-spacer { display: none; }
  /* 너비 상한 800px — 단, 세로가 긴 영상은 playerbar가 하단 고정 푸터 뒤로
     가려지지 않도록 세로 여유분으로도 제한.
     330px ≈ gnb(72) + play-nav(~52) + playerbar(~90) + footer(~116). */
  .memb-page.memb-play #screen {
    max-width: min(800px, calc((100dvh - 330px) * var(--vimeo-ratio, 1.77778))) !important;
    margin: 0 auto;
    border-radius: 16px; overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }
  /* 주황 테두리 — 실제 border 대신 영상 위에 덮이는 ::after 링으로 그림.
     영상이 링 아래까지 채워지므로 테두리-영상 사이 갭(검정/흰 선)이 생기지 않고
     링 폭도 지정값 그대로 유지됨. 1.25cqw로 영상 폭에 비례 (800px 기준 ~10px, 미지원 시 10px 고정) */
  .memb-page.memb-play #screen::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    border-radius: 16px; pointer-events: none;
    box-shadow: inset 0 0 0 10px #EF6902;
    box-shadow: inset 0 0 0 min(10px, 1.25cqw) #EF6902;
  }
  .memb-page.memb-play #vimeo-player,
  .memb-page.memb-play #vimeo-player iframe {
    max-width: 800px !important; margin: 0 auto;
  }
  .memb-page.memb-play .playerbar { padding: 18px 0 8px; }
  .memb-page.memb-play .cta-row { padding: 14px 0 4px; }
  /* 데스크톱: play-nav를 흰색 배경으로 — 검정 레터박스 없음 */
  .memb-page.memb-play .play-nav {
    background: none; padding: 8px 0 12px;
  }
  .memb-page.memb-play .play-nav-back { color: var(--m-text-secondary); }
  .memb-page.memb-play .play-nav-back:hover { background: var(--m-surface-gray); }
  .memb-page.memb-play .play-nav-title { color: var(--m-ink); }
  /* 시트 너비 800px 고정 — left:50%+right:0 조합이 50vw로 줄어
     중간 폭에서 하단 버튼 바보다 좁아지는 문제 방지 (right는 auto로 해제).
     수평 오프셋은 개별 translate 속성으로 분리 — 드래그 시 JS가 transform을
     인라인으로 덮어써도 수평 중심이 유지되도록 (덮어쓰면 우측으로 튐) */
  .memb-page.memb-play .acc {
    width: 800px; max-width: 100%; right: auto;
    left: 50%; translate: -50% 0;
    transform: translateY(100%);
  }
  .memb-page.memb-play .acc.open { transform: translateY(0); }
}

/* 전체화면(의사/네이티브) 상태에서는 본문 크기 제한 해제 — 없으면 작은 박스로만 표시됨 */
.memb-page.memb-play #screen.fake-fullscreen,
.memb-page.memb-play #screen:fullscreen,
.memb-page.memb-play #screen:-webkit-full-screen {
  max-width: none !important;
  margin: 0;
  border-radius: 0;
}
/* 전체화면에서는 테두리 링(::after) 숨김 */
.memb-page.memb-play #screen.fake-fullscreen::after,
.memb-page.memb-play #screen:fullscreen::after,
.memb-page.memb-play #screen:-webkit-full-screen::after {
  display: none;
}

.memb-page.memb-play #screen.fake-fullscreen #vimeo-player,
.memb-page.memb-play #screen.fake-fullscreen #vimeo-player iframe,
.memb-page.memb-play #screen:fullscreen #vimeo-player,
.memb-page.memb-play #screen:fullscreen #vimeo-player iframe,
.memb-page.memb-play #screen:-webkit-full-screen #vimeo-player,
.memb-page.memb-play #screen:-webkit-full-screen #vimeo-player iframe {
  max-width: none !important;
}

/* 모달 오픈 시 Bootstrap이 body에 추가하는 스크롤바 보정 패딩(padding-right)
   영역에 body 배경이 보여 오른쪽에 다른 색 바가 생기는 문제 방지 */
body.modal-open { background: #fff; }

/* ===== MYPAGE: 마이페이지 ===== */
.memb-mypage {
  background: var(--m-page-bg);
  padding-top: 60px;
  padding-left: 16px; padding-right: 16px; padding-bottom: 60px;
  min-height: calc(100vh - 60px);
}
@media (min-width: 768px) {
  .memb-mypage {
    padding-top: 72px;
    padding-left: 36px; padding-right: 36px; padding-bottom: 80px;
    min-height: calc(100vh - 72px);
  }
}
@media (min-width: 992px) {
  .memb-mypage { padding-left: 48px; padding-right: 48px; }
}

/* 프로필 카드 — 카드 테두리는 PC(900px+)에서만 */
.mp-profile {
  display: flex; align-items: center; gap: 16px;
  padding: 0; margin-bottom: 28px;
}
.mp-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #faa716 0%, #f57c00 100%);
  display: grid; place-items: center; color: #fff;
  overflow: hidden;
  padding: 0; border: 0;
}
.mp-avatar .material-icons { font-size: 28px; color: #fff; }
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mp-profile-center {
  flex-direction: column; text-align: center; gap: 14px;
  padding: 32px 20px 28px; position: relative;
}
.mp-profile-center .mp-avatar { width: 72px; height: 72px; }
.mp-profile-center .mp-avatar .material-icons { font-size: 38px; }

/* 큰 아바타 (마이페이지 — 표시 전용, 변경은 설정에서) */
.mp-profile-center .mp-avatar.mp-avatar-lg {
  width: 120px; height: 120px; position: relative;
  border: 1px solid var(--m-line);
  background: #fff;
  box-shadow: none;
  transition: transform .15s, box-shadow .15s;
  overflow: visible;
  display: block;
}
.mp-avatar-lg > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.mp-avatar-edit {
  position: absolute; bottom: -2px; right: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--m-line); color: var(--m-muted);
  display: grid; place-items: center;
  border: 0;
  box-shadow: none;
}
.mp-profile-center .mp-avatar .mp-avatar-edit .material-icons { font-size: 18px; color: var(--m-muted); }
.mp-profile-center .mp-info { align-items: center; flex: none; }
.mp-profile-center .mp-name { font-size: 18px; font-weight: 800; }
.mp-profile-center .mp-email { justify-content: center; }

.mp-settings-btn {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--m-line); cursor: pointer;
  display: grid; place-items: center; color: var(--m-muted); text-decoration: none;
  touch-action: manipulation;
  transition: color .15s, background-color .15s;
}
.mp-settings-btn .material-icons { font-size: 22px; }
.mp-settings-btn:hover { color: var(--m-orange-deep); background: var(--m-orange-soft); }
.mp-settings-btn:active { transform: scale(.93); }
.mp-avatar-lg:focus-visible,
.mp-settings-btn:focus-visible {
  outline: 3px solid rgba(250,167,22,.42); outline-offset: 3px;
}

body.mp-modal-open { overflow: hidden; }
.memb-page.memb-mypage > .mp-modal-dim {
  position: fixed; inset: 0; z-index: 1060;
  max-width: none; margin: 0;
  background: rgba(17,11,2,.52); backdrop-filter: blur(4px);
  animation: mpDimIn .18s ease-out;
}
.memb-page.memb-mypage > .mp-modal-avatar {
  position: fixed; left: 50%; top: 50%; z-index: 1061;
  width: min(620px, calc(100% - 32px)); max-width: none; margin: 0;
  max-height: min(720px, calc(100dvh - 48px));
  overflow: hidden; transform: translate(-50%,-50%);
  border: 1px solid rgba(245,216,181,.85); border-radius: 28px;
  background: #FFFCF7;
  box-shadow: 0 28px 80px rgba(17,11,2,.24), 0 4px 16px rgba(109,76,65,.12);
  animation: mpModalIn .22s cubic-bezier(.2,.8,.2,1);
}
.memb-mypage .mp-modal-head {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 26px 28px 22px; border-bottom: 1px solid var(--m-line);
  background: linear-gradient(145deg, #fff8eb 0%, #FFFCF7 72%);
}
.memb-mypage .mp-modal-heading {
  display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start;
}
.memb-mypage .mp-modal-kicker {
  margin-bottom: 5px; color: var(--m-orange-deep); font-size: 12px;
  font-weight: 900; letter-spacing: 1.2px; line-height: 1.4;
}
.memb-mypage .mp-modal-title {
  color: var(--m-ink); font-size: 22px; font-weight: 900;
  line-height: 1.35; letter-spacing: -.4px; text-wrap: balance;
}
.memb-mypage .mp-modal-desc {
  margin-top: 6px; color: var(--m-muted); font-size: 14px;
  font-weight: 600; line-height: 1.55; letter-spacing: -.2px;
}
.memb-mypage .mp-modal-close {
  flex: none; display: grid; width: 40px; height: 40px; padding: 0;
  place-items: center; border: 1px solid var(--m-line); border-radius: 50%;
  background: rgba(255,255,255,.82); color: var(--m-muted); cursor: pointer;
  box-shadow: 0 2px 8px rgba(109,76,65,.08);
  transition: color .15s, background-color .15s, border-color .15s, transform .15s;
}
.memb-mypage .mp-modal-close:hover {
  border-color: #F5D8B5; background: #fff; color: var(--m-orange-deep); transform: rotate(5deg);
}
.memb-mypage .mp-modal-close .material-icons { font-size: 22px; }
.memb-mypage .mp-modal-body {
  max-height: calc(min(720px, 100dvh - 48px) - 139px);
  padding: 22px 28px 24px; overflow-y: auto; overscroll-behavior: contain;
  color: var(--m-ink); scrollbar-color: #F5D8B5 transparent; scrollbar-width: thin;
}
.memb-mypage .ch-avatar-tabs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin: 0 0 20px; padding: 4px;
  border: 1px solid var(--m-line); border-radius: 18px; background: #fff;
}
.memb-mypage .ch-avatar-tab {
  min-width: 0; padding: 10px 8px;
  border: 0; border-radius: 14px; background: transparent;
  color: var(--m-muted); font-size: 14px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.memb-mypage .ch-avatar-tab:hover { background: #fff8eb; color: var(--m-orange-deep); }
.memb-mypage .ch-avatar-tab.active {
  background: var(--m-orange); color: #fff;
  box-shadow: 0 3px 0 var(--m-orange-deep), 0 5px 10px rgba(250,167,22,.18);
}
.memb-mypage .ch-avatar-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  padding: 0;
}
.memb-mypage .ch-avatar-opt {
  width: fit-content; justify-self: center; margin-left: auto; margin-right: auto;
  position: relative; display: flex; min-width: 0; min-height: 118px;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 8px 10px; overflow: hidden;
  border: 2px solid transparent; border-radius: 18px;
  background: #fff; color: var(--m-ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--m-line), 0 3px 10px rgba(109,76,65,.06);
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.memb-mypage .ch-avatar-opt:hover {
  border-color: #F5D8B5; background: #fff8eb;
  box-shadow: 0 7px 18px rgba(109,76,65,.11); transform: translateY(-2px);
}
.memb-mypage .ch-avatar-opt.selected {
  border-color: var(--m-orange); background: #fff8eb;
  box-shadow: 0 0 0 3px rgba(250,167,22,.12), 0 7px 18px rgba(109,76,65,.1);
}
.memb-mypage .ch-avatar-opt.is-saving { opacity: .58; }
.memb-mypage .mp-modal-avatar[aria-busy="true"] .ch-avatar-opt { cursor: wait; }
.memb-mypage .ch-avatar-opt img {
  display: block; width: 72px; height: 72px; object-fit: cover;
  padding: 0; border-radius: 50%;
  background: var(--m-card);
  box-shadow: inset 0 0 0 2px var(--m-card);
  transition: transform .18s;
}
.memb-mypage .ch-avatar-opt.selected img { box-shadow: inset 0 0 0 2px var(--m-orange); }
.memb-mypage .ch-avatar-opt:hover img { transform: scale(1.06); }
.memb-mypage .ch-avatar-opt-name {
  width: 100%; overflow: hidden; color: var(--m-ink); font-size: 13px;
  font-weight: 800; line-height: 1.4; text-align: center;
  text-overflow: ellipsis; white-space: nowrap;
}
.memb-mypage .ch-avatar-check {
  position: absolute; top: 0; right: 0; display: grid;
  width: 24px; height: 24px; place-items: center;
  border-radius: 50%; background: var(--m-orange); color: #fff;
  box-shadow: 0 2px 6px rgba(109,76,65,.16);
  opacity: 0; transform: scale(.7);
  transition: opacity .15s, transform .15s;
}
.memb-mypage .ch-avatar-check .material-icons { font-size: 16px; }
.memb-mypage .ch-avatar-opt.selected .ch-avatar-check { opacity: 1; transform: scale(1); }
.memb-mypage .mp-avatar-status {
  margin: 18px 0 0; color: rgba(52,26,9,.6); font-size: 13px;
  font-weight: 600; line-height: 1.5; text-align: center;
}
.memb-mypage .mp-modal-close:focus-visible,
.memb-mypage .ch-avatar-tab:focus-visible,
.memb-mypage .ch-avatar-opt:focus-visible {
  outline: 3px solid rgba(250,167,22,.42); outline-offset: 2px;
}
@keyframes mpDimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpModalIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.98); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@media (max-width: 600px) {
  .memb-page.memb-mypage > .mp-modal-avatar {
    top: auto; right: 0; bottom: 0; left: 0;
    width: 100%; max-height: min(82dvh, 720px);
    transform: none; border-width: 1px 0 0; border-radius: 26px 26px 0 0;
    animation-name: mpModalSheetIn;
  }
  .memb-mypage .mp-modal-head { padding: 22px 20px 18px; }
  .memb-mypage .mp-modal-title { font-size: 20px; }
  .memb-mypage .mp-modal-desc { font-size: 13px; }
  .memb-mypage .mp-modal-body {
    max-height: calc(min(82dvh, 720px) - 129px); padding: 18px 16px 24px;
  }
  .memb-mypage .ch-avatar-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px;
  }
  .memb-mypage .ch-avatar-tab { min-width: 0; padding: 9px 8px; font-size: 13px; }
  .memb-mypage .ch-avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .memb-mypage .ch-avatar-opt { min-height: 108px; padding: 10px 6px 8px; border-radius: 16px; }
  .memb-mypage .ch-avatar-opt img { width: 64px; height: 64px; }
}
@keyframes mpModalSheetIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .memb-page.memb-mypage > .mp-modal-dim,
  .memb-page.memb-mypage > .mp-modal-avatar { animation: none; }
  .memb-mypage .mp-modal-close,
  .memb-mypage .ch-avatar-tab,
  .memb-mypage .ch-avatar-opt,
  .memb-mypage .ch-avatar-opt img,
  .memb-mypage .ch-avatar-check { transition: none; }
}

/* 서브페이지 헤더 */
.mp-sub-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px 18px;
}
.mp-sub-head h2 {
  font-size: 18px; font-weight: 800; color: var(--m-ink);
  margin: 0; letter-spacing: -.01em;
}
.mp-back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--m-muted);
  transition: color .15s, background .15s;
}
/* 뒤로가기+제목 통합 버튼 — 제목까지 터치 영역 */
.mp-sub-head .mp-back-btn--wide {
  width: auto; height: auto; border-radius: 10px;
  padding: 6px 12px 6px 8px; gap: 8px;
  display: inline-flex; align-items: center;
  font: inherit; letter-spacing: inherit; color: var(--m-ink);
}
.mp-sub-head .mp-back-btn--wide .material-icons { font-size: 24px; transform: translateY(-2px); }
.mp-back-btn .material-icons { font-size: 22px; }
.mp-back-btn:hover { color: var(--m-orange-deep); background: var(--m-orange-soft); }
.mp-back-btn:active { transform: scale(.93); }

/* 섹션 */
.mp-section {
  margin-bottom: 32px; padding: 20px;
  background: #FFFCF7; border: 1px solid var(--m-line);
  border-radius: 16px;
}
.mp-sec-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; font-size: 16px; font-weight: 800;
  color: var(--m-ink); letter-spacing: -.3px;
}
.mp-sec-head .material-icons { font-size: 20px; color: var(--m-orange); }
.mp-desc { font-size: 13px; color: var(--m-muted); line-height: 1.5; margin: 0 0 16px; }

/* 탭 */
.mp-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid var(--m-line); }
.mp-tab {
  flex: 1; padding: 12px 8px; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--m-text-assistive);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.mp-tab:hover { color: var(--m-text-secondary); }
.mp-tab.active { color: var(--m-orange-deep); border-bottom-color: var(--m-orange); }
.mp-tab-panel { display: none; }
.mp-tab-panel.active { display: block; }
.mp-form-error {
  font-size: 13px; font-weight: 700; color: #c62828;
  background: #FFF3F3; border: 1px solid #FFCDD2; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}

/* 폼 */
.mp-form { display: flex; flex-direction: column; gap: 14px; }
.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-label { font-size: 12.5px; font-weight: 700; color: var(--m-muted); }
.mp-input-wrap { position: relative; }
.mp-input {
  width: 100%; border: 1.5px solid var(--m-line); border-radius: 12px;
  padding: 12px 44px 12px 14px; font-size: 14.5px; font-weight: 600;
  color: var(--m-ink); background: #fff; outline: none; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.mp-input:focus { border-color: var(--m-orange); box-shadow: 0 0 0 3px rgba(250,167,22,.12); }
.mp-input::placeholder { color: var(--m-text-assistive); font-weight: 500; }
.mp-pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--m-text-assistive); line-height: 1; transition: color .15s;
}
.mp-pw-toggle:hover { color: var(--m-orange); }
.mp-pw-toggle .material-icons { font-size: 20px; }

.mp-field-row {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 480px) {
  .mp-field-row { grid-template-columns: 1fr 1fr; }
}

.mp-pw-hint { font-size: 12px; color: var(--m-text-assistive); transition: color .2s; }
.mp-pw-hint.is-ok { color: #2e7d32; }
.mp-pw-match {
  font-size: 13px; display: flex; align-items: center; gap: 4px;
  min-height: 20px; transition: color .2s;
}
.mp-pw-match.is-match { color: #2e7d32; }
.mp-pw-match.is-mismatch { color: #c62828; }
.mp-pw-match .material-icons { font-size: 16px; }

/* 제출 버튼 */
.mp-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  align-self: flex-start; border: 0; border-radius: 12px;
  padding: 12px 28px; font-size: 15px; font-weight: 800; color: #fff;
  background: var(--m-orange); cursor: pointer;
  box-shadow: 0 2px 0 0 #e0911a;
  transition: transform .1s, box-shadow .1s, background .15s;
}
.mp-submit:hover { background: #f0982a; }
.mp-submit:active { transform: translateY(2px); box-shadow: 0 0 0 0 #e0911a; }
.mp-submit .material-icons { font-size: 20px; }

/* 채널 연결정보 — 빈 상태 (테이블 내 .mp-channel-empty) */
.mp-channel-empty {
  text-align: center; padding: 32px 12px; color: var(--m-text-assistive);
}
.mp-channel-empty .material-icons { font-size: 40px; color: var(--m-divider); display: block; margin-bottom: 10px; }
.mp-channel-empty p { font-size: 15px; font-weight: 700; color: var(--m-muted); margin: 0 0 4px; }
.mp-channel-empty span { font-size: 13px; color: var(--m-text-assistive); }

/* ===== 채널 연결정보 테이블 (member_mypage_sub) ===== */
.mp-channel-table-wrap {
  border: 1px solid var(--m-line);
  border-radius: 12px;
  overflow: hidden;
}
.mp-channel-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}
.mp-channel-table thead th {
  background: var(--m-bg-soft);
  color: var(--m-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--m-line);
  text-align: left;
}
.mp-channel-table tbody td {
  font-size: 14px;
  font-weight: 600;
  color: var(--m-ink);
  padding: 14px;
  border-top: 1px solid var(--m-bg-soft);
  vertical-align: middle;
}
.mp-channel-table tbody tr:first-child td { border-top: none; }
.mp-channel-table tbody tr:nth-child(even) { background: rgba(255, 248, 235, 0.35); }
.mp-channel-table tbody tr:nth-child(odd) { background: #fff; }
.mp-channel-table tbody tr:hover { background: rgba(250, 167, 22, 0.06); }
.mp-channel-table .mp-channel-empty td {
  text-align: center;
  padding: 36px 12px;
  color: var(--m-text-assistive);
}
.mp-channel-table .mp-channel-empty .material-icons {
  font-size: 40px;
  color: var(--m-divider);
  display: block;
  margin-bottom: 10px;
}
.mp-channel-table .mp-channel-empty p {
  font-size: 15px;
  font-weight: 700;
  color: var(--m-muted);
  margin: 0 0 4px;
}
.mp-channel-table .mp-channel-empty span {
  font-size: 13px;
  color: var(--m-text-assistive);
}

/* ===== 맨 위로 버튼 (scroll-to-top) — 교사용 #to-top과 동일 스타일 ===== */
#memb-to-top {
  position: fixed; right: 16px; bottom: 20px;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(255, 149, 0, 0.55); border-radius: 50%;
  background: #fff; color: #EF6902; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(60, 40, 10, 0.14);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s, border-color .2s;
  z-index: 90;
}
#memb-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#memb-to-top:hover { background: #FEF4E6; border-color: rgba(255, 149, 0, 0.75); }
#memb-to-top:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }
#memb-to-top .material-icons { font-size: 22px; }
@media (min-width: 768px) {
  #memb-to-top { right: 24px; bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  #memb-to-top { transition: opacity .25s, visibility .25s; transform: none; }
  #memb-to-top.show { transform: none; }
}

/* ===== DOWNLOAD PAGE ===== */

/* 탭 */
.memb-download .dl-tabs {
  display: flex; gap: 0; padding: 4px 0 14px;
}
.memb-download .dl-tab {
  flex: 1; justify-content: center;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 4px 12px; border-radius: 0;
  background: none; border: 0; border-bottom: 2px solid var(--m-line);
  font-size: 15px; font-weight: 800; color: var(--m-muted);
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.memb-download .dl-tab .material-icons { font-size: 18px; }
.memb-download .dl-tab:hover { color: var(--m-orange-deep); }
.memb-download .dl-tab.on {
  color: var(--m-orange); border-bottom-color: var(--m-orange);
}
.memb-download .dl-tab-apk {
  color: var(--m-muted); gap: 7px;
}
.memb-download .dl-tab-apk .material-icons {
  font-size: 20px; line-height: 1;
  transform: translateY(-1px);   /* 글리프 중심 보정 — 텍스트와 세로선 맞춤 */
}
.memb-download .dl-tab-apk:hover { color: var(--m-orange-deep); }

/* 안내 박스 (순서 안내 + 메시지) */
.memb-download .dl-notice {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--m-orange-soft); border-radius: 12px;
  padding: 18px 16px 14px; margin-bottom: 6px;
}
.memb-download .dl-notice-msg {
  display: flex; align-items: flex-start; gap: 10px;
}
.memb-download .dl-notice-msg .material-icons {
  font-size: 20px; color: var(--m-orange-deep); flex: none; margin-top: 1px;
}
.memb-download .dl-notice-msg span {
  font-size: 13px; font-weight: 700; color: var(--m-orange-deep); line-height: 1.5;
}

/* 다운로드 순서 안내 (TLD) */
.memb-download .dl-steps {
  display: flex; align-items: stretch;
  justify-content: flex-start; gap: 16px;
  width: 100%;
}
.memb-download .dl-step {
  flex: 0 1 auto; max-width: 230px;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.memb-download .dl-step-no {
  font-size: 15px; font-weight: 800; color: var(--m-text-tertiary);
  letter-spacing: .18em;
}
.memb-download .dl-step-desc {
  margin: 8px 0 0;
  font-size: 14px; font-weight: 700; color: var(--m-text-primary);
  line-height: 1.5; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.memb-download .dl-step-arrow {
  flex: none; align-self: center;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--m-orange); color: #fff;
}
.memb-download .dl-step-arrow .material-icons { font-size: 20px; }
/* STEP 상세 안내 버튼 — 설명이 긴 STEP에만 노출 */
.memb-download .dl-step-more {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 8px; padding: 4px 10px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #EFEDE8; color: #5C5346;
  font-size: 12px; font-weight: 700;
  transition: background .15s;
}
.memb-download .dl-step-more:hover { background: #E4DFD7; }
.memb-download .dl-step-more .material-icons { font-size: 15px; }
/* STEP 상세 모달 — 가이드 이미지가 읽히게 가로 폭 확장.
   내용이 길면 본문만 스크롤 (제목·닫기는 고정) */
#dl-detail-modal .memb-end-box {
  width: calc(100% - 32px); max-width: 560px;
  max-height: calc(100dvh - 48px);
  padding-top: 22px; padding-bottom: 16px;
  display: flex; flex-direction: column; overflow: hidden;
}
/* STEP 상세 모달 본문 — 줄바꿈(\n) 그대로 표시
   (.memb-end-box p의 margin:0보다 우선순위를 올려 제목-본문 간격 확보) */
#dl-detail-modal .dl-detail-body {
  margin: 24px -18px 0 0; padding-right: 18px;
  text-align: left;
  font-size: 14px; line-height: 1.75; color: var(--m-text-primary);
  white-space: pre-line;
  overflow-y: auto; min-height: 0;
  overscroll-behavior: contain;
}
/* STEP 상세 이미지 목록 — 가이드 카드 */
.dl-detail-body .dl-detail-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  counter-reset: dl-step;
}
.dl-detail-body .dl-detail-list li {
  display: flex; flex-direction: column; gap: 6px;
  counter-increment: dl-step;
  padding: 14px 0;
}
.dl-detail-body .dl-detail-list li:first-child { padding-top: 0; }
.dl-detail-body .dl-detail-list li + li { border-top: 1px solid var(--m-line); }
.dl-detail-body .dl-detail-list img {
  width: 100%; border-radius: 12px; display: block;
  border: 1px solid var(--m-line); box-shadow: 0 2px 8px rgba(109,76,65,.10);
}
.dl-detail-body .dl-detail-list .desc {
  font-weight: 700; white-space: pre-line;
  display: flex; align-items: flex-start; gap: 8px;
}
.dl-detail-body .dl-detail-list li .desc::before {
  content: counter(dl-step);
  flex: none; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--m-orange); color: #fff;
  font-size: 12.5px; font-weight: 800; line-height: 1;
  margin-top: 1px;
}
.dl-detail-body .dl-detail-list .note {
  font-size: 12.5px; color: var(--m-muted); white-space: pre-line;
  padding-left: 30px;
}
.dl-detail-body .dl-detail-list .sub {
  font-size: 12.5px; color: var(--m-error); white-space: pre-line;
  padding-left: 30px;
}
.dl-detail-body .dl-detail-lead {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  color: var(--m-text-secondary);
}
.dl-detail-body .dl-detail-notice {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--m-surface-gray); font-size: 13px; line-height: 1.7;
  white-space: pre-line; color: var(--m-text-secondary);
}
/* 모달 제목 액센트 — 주황 밑줄 장식 */
#dl-detail-modal .memb-end-box h4 {
  display: inline-block; padding-bottom: 8px;
  border-bottom: 3px solid var(--m-orange-95);
}

@media (max-width: 768px) {
  .memb-download .dl-steps { flex-direction: column; gap: 10px; }
  .memb-download .dl-step-arrow { align-self: flex-start; }
  .memb-download .dl-step-arrow .material-icons { transform: rotate(90deg); }
}

/* 파일 목록 — 카드 그리드 */
.memb-download .dl-card .cv.cv-thumb { aspect-ratio: 1/1; }
/* 내 교재 로고 카드와 동일 크기 — contain 80% */
.memb-download .dl-card .cv.cv-thumb img { width: 80%; height: 80%; object-fit: contain; }
.memb-download .dl-card-fallback {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--m-surface-gray); color: var(--m-muted);
}
.memb-download .dl-card-fallback .material-icons { font-size: 40px; }
.memb-download .dl-card-kind {
  position: absolute; top: 8px; left: 8px;
  font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 7px;
  background: rgba(255,255,255,.92); color: var(--m-orange-deep);
  letter-spacing: .03em;
}
.memb-download .dl-card-dl {
  position: absolute; bottom: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--m-line); color: var(--m-ink);
  transition: border-color .15s, color .15s, transform .1s;
}
.memb-download .dl-card-dl .material-icons { font-size: 20px; }
.memb-download .dl-card:hover .dl-card-dl { border-color: var(--m-orange); color: var(--m-orange-deep); }
.memb-download .dl-card:active .dl-card-dl { transform: scale(.93); }
.memb-download .dl-card-explain {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--m-muted);
  transition: color .15s;
}
.memb-download .dl-card-explain .material-icons { font-size: 16px; }
.memb-download .dl-card-explain:hover { color: var(--m-orange-deep); }

/* 빈 상태 */
.memb-download .dl-empty {
  text-align: center; padding: 80px 20px;
}
.memb-download .dl-empty .material-icons {
  font-size: 64px; color: var(--m-line); margin-bottom: 12px;
}
.memb-download .dl-empty p {
  font-size: 15px; font-weight: 700; color: var(--m-muted);
}

/* 설명 모달 — 데스크톱 폭 제한 해제는 상단 공통 리셋 규칙이 담당 */
.memb-download .mp-modal-dim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1060;
  max-width: none; margin: 0;
}
.memb-download .mp-modal {
  position: fixed; left: 50%; top: 50%; z-index: 1061;
  max-width: none; margin: 0;
  width: min(460px, calc(100% - 32px)); max-height: min(600px, calc(100dvh - 48px));
  overflow: hidden; transform: translate(-50%,-50%);
  border: 1px solid rgba(245,216,181,.85); border-radius: 28px;
  background: #FFFCF7;
  box-shadow: 0 28px 80px rgba(17,11,2,.24), 0 4px 16px rgba(109,76,65,.12);
  animation: mpModalIn .22s cubic-bezier(.2,.8,.2,1);
}
.memb-download .mp-modal-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 20px 20px 6px;
}
.memb-download .mp-modal-heading { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.memb-download .mp-modal-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: var(--m-orange); text-transform: uppercase;
}
.memb-download .mp-modal-title { font-size: 17px; font-weight: 800; color: var(--m-ink); }
.memb-download .mp-modal-close {
  background: none; border: 0; cursor: pointer; padding: 4px;
  color: var(--m-muted); border-radius: 8px; transition: background .15s;
}
.memb-download .mp-modal-close .material-icons { font-size: 22px; }
.memb-download .mp-modal-close:hover { background: var(--m-orange-soft); }
.memb-download .mp-modal-body {
  padding: 0 20px 22px; font-size: 14px; line-height: 1.6; color: var(--m-ink);
  max-height: 50vh; overflow-y: auto;
}

/* 데스크톱 탭 */
@media (min-width: 768px) {
  .memb-download .dl-tab { padding: 13px 24px; font-size: 15px; }
}

.memb-page .ep:focus-visible,
.memb-page .fav-ep:focus-visible {
  outline: 3px solid rgba(255,149,0,.42); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .memb-page *,
  .memb-page *::before,
  .memb-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* ── 마이페이지: 내 교재 학습 진행도 ── */
.memb-mypage .mp-books { padding: 4px 18px 32px; }
.memb-mypage .mp-books-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.memb-mypage .mp-books-title {
  margin: 0; font-size: 17px; font-weight: 800; color: var(--m-ink);
  letter-spacing: -.01em;
}
.memb-mypage .mp-books-all {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 13px; font-weight: 700; color: var(--m-text-tertiary);
  text-decoration: none; transition: color .15s;
}
.memb-mypage .mp-books-all .material-icons { font-size: 18px; }
.memb-mypage .mp-books-all:hover { color: var(--m-orange-deep); }

/* 진행도 필터 칩 — 전체(주황) / 보는중(보라) / 다했어요(초록) / 시작전(파랑) */
.memb-mypage .mp-books-filter {
  display: flex; flex: 1; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end; margin-left: 12px;
}
.memb-mypage .mp-filter {
  padding: 5px 11px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700; line-height: 1.3;
  transition: background .15s, color .15s, transform .1s;
}
.memb-mypage .mp-filter:active { transform: scale(.95); }
/* 비활성은 전부 흑백(연한 회색), 선택은 진한 채움 + 흰 글씨 — '전체' 진갈색, 나머지는 필터 상태색 */
.memb-mypage .mp-filter { color: #B5B5B5; background: #F7F7F7; }
.memb-mypage .mp-filter.f-all.on   { color: #fff; background: var(--m-ink); }
.memb-mypage .mp-filter.f-doing.on { color: #fff; background: var(--m-cta); }
.memb-mypage .mp-filter.f-done.on  { color: #fff; background: var(--m-success); }
.memb-mypage .mp-filter.f-none.on  { color: #fff; background: var(--m-muted); }
.memb-mypage .mp-filter:focus-visible {
  outline: 3px solid rgba(255,149,0,.42); outline-offset: 2px;
}


.memb-mypage .mp-books-list {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.memb-mypage .mp-book {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--m-line); border-radius: 18px;
  background: var(--m-bg); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.memb-mypage .mp-book:hover {
  border-color: var(--m-orange); box-shadow: none; transform: translateY(-1px);
}
.memb-mypage .mp-book:hover .mp-book-chevron { color: var(--m-orange); }
.memb-mypage .mp-book:active { transform: scale(.98); }
.memb-mypage .mp-book:focus-visible {
  outline: 3px solid rgba(255,149,0,.42); outline-offset: 2px;
}

/* 진행도 링 — conic-gradient로 달성률 표시, 안쪽에 교재 썸네일
   상태별 색: 보는중=주황, 완료=초록, 시작전=아크 없음(pct 0) */
.memb-mypage .mp-book-ring.ring-doing { --ring-c: var(--m-orange); }
.memb-mypage .mp-book-ring.ring-done  { --ring-c: var(--m-green); }
.memb-mypage .mp-book-ring {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--ring-c, var(--m-orange)) calc(var(--pct, 0) * 1%), var(--m-line) 0);
  display: grid; place-items: center;
}

/* ── 진행 링 두께 변수 + 진행 중 링 끝 둥글게 (conic-gradient는 끝이 각지므로
   링 두께만 한 점을 시작점·끝점(--pct 위치)에 덧그려 linecap:round 효과) ── */
.memb-page .mp-book-ring { --ring-t: 4px; }
.memb-page.memb-book-detail .mp-book-ring { --ring-t: 5px; }
@media (min-width: 900px) {
  .memb-page.memb-book-detail .mp-book-ring { --ring-t: 6px; }
}
.memb-page.memb-book-detail .bd-book-ring.mp-book-ring { --ring-t: 6px; }
.memb-page .mp-book-ring.ring-doing::before,
.memb-page .mp-book-ring.ring-doing::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% calc(var(--ring-t) / 2),
    var(--ring-c, #FF9500) calc(var(--ring-t) / 2 - 0.5px),
    transparent calc(var(--ring-t) / 2));
}
.memb-page .mp-book-ring.ring-doing::after {
  transform: rotate(calc(var(--pct, 0) * 3.6deg));
}
/* 로고는 정사각형이 아니라 cover로 자르면 양옆이 잘리므로,
   흰 원 안에 contain으로 전체가 보이게 (교재 상세 bd-book-thumb과 동일 방식) */
.memb-mypage .mp-book-img {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: contain; background: #fff;
}
.memb-mypage .mp-book-img-empty {
  display: grid; place-items: center;
  color: var(--m-text-tertiary); font-size: 18px; font-weight: 800;
  background: var(--m-orange-95);
}

.memb-mypage .mp-book-body { flex: 1; min-width: 0; }
.memb-mypage .mp-book-name {
  display: block; font-size: 15.5px; font-weight: 600; color: var(--m-ink);
  line-height: 1.4; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.memb-mypage .mp-book-count {
  flex: none; font-size: 14px; font-weight: 700; color: var(--m-ink); opacity: .6;
  letter-spacing: -.2px;
}
.memb-mypage .mp-book-chevron { flex: none; font-size: 22px; color: var(--m-tertiary); }

/* ── 목록의 상태 표시: 진행 링·숫자·화살표 → 상태색 원 + 흰 연필 아이콘 (교재 상세는 링 유지) ── */
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book .mp-book-ring { background: none; --ring-t: 0px; }
/* §6-2 둥근 링 끝(::before/::after) 적용 시에도 목록에는 나타나지 않도록 미리 차단 */
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book .mp-book-ring::before,
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book .mp-book-ring::after { display: none; }
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book .mp-book-ring .mp-book-img {
  width: 100%; border: 1px solid var(--m-line); box-sizing: border-box;
  /* 피팅 로고의 내부 여백을 상쇄해 보이는 로고만 확대 (링 크기는 그대로) */
  transform: scale(1.2);
}
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book .mp-book-chevron { display: none; }
/* 숫자는 font-size:0으로 화면에서만 숨김 — 스크린리더는 '14/15' 그대로 읽음 */
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book .mp-book-count {
  --st: var(--m-disabled);
  font-size: 0; width: 24px; height: 24px; margin-left: auto;
  border-radius: 50%; background: var(--st); opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book:has(.ring-doing) .mp-book-count { --st: var(--m-cta); }
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book:has(.ring-done) .mp-book-count { --st: var(--m-success); }
.memb-page.memb-mypage:not(.memb-book-detail) .mp-book .mp-book-count::before {
  content: "edit";
  font-family: "Material Symbols Rounded"; font-feature-settings: "liga";
  font-size: 15px; font-weight: 400; line-height: 1; color: #fff;
}
.memb-mypage .mp-books-more {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; margin-top: 12px; padding: 11px;
  border: 1px dashed var(--m-line); border-radius: 12px;
  background: var(--m-bg); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--m-text-tertiary);
  transition: border-color .15s, color .15s, background .15s;
}
.memb-mypage .mp-books-more:hover {
  border-color: var(--m-orange); color: var(--m-orange-deep);
  background: var(--m-orange-95);
}
.memb-mypage .mp-books-more .material-icons { font-size: 18px; }
/* hidden 속성이 display:flex 규칙에 지지 않도록 */
.memb-mypage .mp-books-more[hidden] { display: none; }
.memb-mypage .mp-books-more:focus-visible {
  outline: 3px solid rgba(255,149,0,.42); outline-offset: 2px;
}

.memb-mypage .mp-books-empty {
  margin: 0; padding: 36px 16px; text-align: center;
  font-size: 14px; color: var(--m-text-tertiary);
}
/* 빈 상태도 카드로 감싸기 — 모바일에서 허전하지 않게 */
div.mp-books-empty {
  border: 1px solid var(--m-line); border-radius: 16px;
  background: var(--m-bg); padding: 28px 16px;
}
.memb-mypage .mp-books-empty-avatar {
  width: 72px; height: 72px; object-fit: contain;
  margin: 0 auto 12px; display: block;
}
.memb-mypage .mp-books-empty p { margin: 0; }
/* p{margin:0}이 버블 여백을 덮지 않도록 다른 빈 상태와 같은 간격 복원 */
.memb-mypage .mp-books-empty .mm-empty-bubble { margin-bottom: 18px; }

/* ── 설정 페이지 (member_settings) ── */
.memb-settings .ms-done-btn,
.memb-profile-photo .ms-done-btn {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 800; color: var(--m-orange-deep);
  text-decoration: none; padding: 6px 4px; border-radius: 8px;
  transition: color .15s;
}
.memb-settings .ms-done-btn:hover,
.memb-profile-photo .ms-done-btn:hover { color: var(--m-orange-heavy); }
.memb-settings .ms-done-btn:active,
.memb-profile-photo .ms-done-btn:active { transform: scale(.95); }

.memb-settings .ms-col-left {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 8px;
}
.memb-settings .ms-col-left .mp-field,
.memb-settings .ms-col-left .ms-email {
  width: 100%; align-items: center; text-align: center;
}

/* 닉네임 입력 — 밑줄 스타일, hover/focus 시 주황 라인 */
.memb-settings .ms-col-left .mp-input-line {
  border: 0; border-bottom: 2px solid var(--m-orange-90); border-radius: 0;
  padding: 8px 4px; text-align: center; background: transparent;
  font-size: 16px; box-shadow: none;
  width: auto; max-width: 280px; margin: 0 auto; display: block;
}
.memb-settings .ms-col-left .mp-input-line:hover,
.memb-settings .ms-col-left .mp-input-line:focus {
  border-bottom-color: var(--m-orange-deep); box-shadow: none;
}
.memb-settings .ms-col-left > .mp-avatar {
  width: 96px; height: 96px; cursor: pointer; position: relative;
  border: 1px solid var(--m-line); background: #fff;
  box-shadow: none;
  transition: transform .15s, box-shadow .15s;
  overflow: visible; display: block; text-decoration: none;
}
.memb-settings .ms-col-left > .mp-avatar > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.memb-settings .ms-col-left > .mp-avatar:hover { transform: translateY(-2px); }
.memb-settings .ms-col-left > .mp-avatar:active { transform: scale(.96); }
.memb-settings .ms-col-left .mp-avatar-edit .material-icons {
  font-size: 17px; color: var(--m-orange);
}
.memb-settings .ms-section-head + .mp-desc { margin-top: 8px; }

/* 오른쪽 컬럼 필드 간격 — mp-form의 gap 밖이므로 별도 부여 */
.memb-settings .ms-col-right {
  display: flex; flex-direction: column; gap: 14px;
}
.memb-settings .ms-col-right .mp-field,
.memb-settings .ms-col-right .mp-desc,
.memb-settings .ms-col-right .ms-section-head { margin: 0; }

.memb-settings .ms-col-left > .mp-avatar:focus-visible {
  outline: 3px solid rgba(255,149,0,.42); outline-offset: 3px;
}

.memb-settings .mp-form { padding: 8px 18px 0; }

/* 설정 모바일: 왼쪽 프로필은 배경 없이, 오른쪽 나머지만 흰 카드 + 폼 좌우 패딩 중복 제거 */
@media (max-width: 899px) {
  .memb-page.memb-settings .ms-cols:not(.ms-cols-tail) > .ms-col-left {
    background: transparent; border: 0;
  }
  .memb-page.memb-settings .ms-cols:not(.ms-cols-tail) > .ms-col-right {
    background: var(--m-bg); border: 0; border-radius: 20px;
    margin-left: 0; margin-right: 0; padding: 16px 16px 36px;
    box-sizing: border-box;
    outline: 2px solid var(--m-orange-90); outline-offset: 0;
  }
  .memb-page.memb-settings .mp-form.ms-cols { padding-left: 0; padding-right: 0; }
  /* '수정하기' 버튼 모바일 가운데 정렬 */
  .memb-page.memb-settings .ms-field-actions { justify-content: center; }
  .memb-page.memb-settings .ms-refresh { margin-left: 0; margin-right: 0; }
}
.memb-settings .ms-email {
  margin-top: -4px; font-size: 13.5px; font-weight: 600;
  color: var(--m-text-tertiary); letter-spacing: -.1px;
}
.memb-settings .ms-section-head,
.memb-profile-photo .ms-section-head {
  margin-top: 18px; padding-top: 18px;
  font-size: 16px; font-weight: 800; color: var(--m-ink); letter-spacing: -.3px;
}

.memb-settings .ms-refresh {
  margin: 26px 18px 0; padding: 18px; text-align: center;
  border: 0; border-radius: 16px;
  background: var(--m-orange-90);
}
.memb-settings .ms-refresh-desc {
  margin: 0 0 12px; font-size: 13px; color: var(--m-text-tertiary);
}
.memb-settings .ms-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px; border: 1px solid currentColor; border-radius: 999px;
  background: none; box-shadow: none; color: #B84F00;
  font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background .15s, transform .1s;
}
.memb-settings .ms-refresh-btn .material-icons { font-size: 19px; }
.memb-settings .ms-refresh-btn:hover { background: var(--m-orange-90); color: var(--m-orange-deep); }
.memb-settings .ms-refresh-btn:active { transform: scale(.96); }

.memb-settings .ms-sublink {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  margin: 22px 18px 30px; font-size: 13.5px; font-weight: 700;
  color: var(--m-text-tertiary); text-decoration: none;
  transition: color .15s;
}
.memb-settings .ms-sublink:hover { color: var(--m-orange-deep); }
.memb-settings .ms-sublink .material-icons { font-size: 18px; }

/* ── 프로필 사진 선택 페이지 (member_profile_photo) ── */
.memb-profile-photo .ms-photo { padding: 4px 18px 10px; }
.memb-profile-photo .ms-section-head { margin-top: 0; }
.memb-profile-photo .ms-photo-form {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  justify-content: center;
  background: var(--m-bg); border-radius: 24px;
  padding: 24px; box-sizing: border-box;
}
.memb-profile-photo .ms-photo-preview {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  border: 3px dashed var(--m-disabled); background: transparent;
  color: var(--m-disabled);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  overflow: hidden; transition: border-color .15s;
}
.memb-profile-photo .ms-photo-preview:hover { border-color: var(--m-orange); }
.memb-profile-photo .ms-photo-preview.on { border-style: solid; border-color: var(--m-orange-90); }
.memb-profile-photo .ms-photo-preview img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.memb-profile-photo .ms-photo-preview .material-icons {
  font-size: 34px; color: var(--m-disabled);
}
.memb-profile-photo .ms-photo-preview:focus-visible {
  outline: 3px solid rgba(255,149,0,.42); outline-offset: 3px;
}
.memb-profile-photo .ms-photo-desc {
  margin: 0; text-align: center; font-size: 13px;
  color: rgba(52,26,9,.6); line-height: 1.55;
}
.memb-profile-photo .ms-photo-submit {
  padding: 12px 26px; border: 1px solid var(--m-orange); border-radius: 999px;
  background: transparent; color: var(--m-orange);
  font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: none;
  transition: transform .1s, box-shadow .1s, background .15s;
}
/* ghost 버튼이므로 호버는 채움으로 대비 유지, 비활성은 테두리도 회색으로 */
.memb-profile-photo .ms-photo-submit:hover:not(:disabled) { background: var(--m-orange); color: #fff; }
.memb-profile-photo .ms-photo-submit:active:not(:disabled) {
  transform: translateY(2px); box-shadow: none;
}
.memb-profile-photo .ms-photo-submit:disabled {
  background: var(--m-surface-gray); color: var(--m-text-assistive);
  border-color: var(--m-text-assistive);
  cursor: not-allowed; box-shadow: none;
}

.memb-profile-photo .ms-char { padding: 4px 18px 32px; }
/* 캐릭터 목록과 안내 문구는 붙여서 하나의 흰 영역처럼 보이게 */
.memb-profile-photo .ms-char .ch-avatar-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-top: 10px;
  background: var(--m-bg); border-radius: 24px 24px 0 0;
  padding: 24px 24px 8px; box-sizing: border-box;
}
.memb-profile-photo .ms-char .mp-avatar-status {
  margin-top: 0; text-align: center;
  background: var(--m-bg); border-radius: 0 0 24px 24px;
  padding: 12px 24px 24px; box-sizing: border-box;
}

/* 모바일: 흰 영역 모서리 20px, 양옆은 페이지 여백 16px에 맞춤, 섹션 제목 가운데 */
@media (max-width: 899px) {
  .memb-profile-photo .ms-photo,
  .memb-profile-photo .ms-char { padding-left: 0; padding-right: 0; }
  .memb-profile-photo .ms-photo-form { padding: 20px 16px; border-radius: 20px; }
  .memb-profile-photo .ms-char .ch-avatar-grid { padding: 20px 16px 8px; border-radius: 20px 20px 0 0; }
  .memb-profile-photo .ms-char .mp-avatar-status { padding: 12px 16px 20px; border-radius: 0 0 20px 20px; }
  .memb-profile-photo .ms-section-head { text-align: center; }
}

@media (min-width: 768px) {
  .memb-mypage .mp-books,
  .memb-settings .mp-form,
  .memb-settings .ms-refresh,
  .memb-settings .ms-sublink,
  .memb-profile-photo .ms-photo,
  .memb-profile-photo .ms-char {
    max-width: 560px; margin-left: auto; margin-right: auto;
  }
  .memb-mypage .mp-books,
  .memb-settings .mp-form,
  .memb-profile-photo .ms-photo,
  .memb-profile-photo .ms-char { padding-left: 0; padding-right: 0; }
  .memb-profile-photo .ms-char .ch-avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── 마이페이지 데스크톱 2단: 왼쪽 프로필 카드 + 오른쪽 교재 진행도 ── */
@media (min-width: 900px) {
  .memb-page.memb-mypage.mp-home {
    display: flex; flex-wrap: wrap;
    align-items: stretch; align-content: flex-start; justify-content: center;
    gap: 0 24px;
  }
  /* max-width:1080 클램프가 basis를 줄여 한 줄에 들어가는 것 방지 — flex 줄 내 독립 행 확보 */
  .memb-page.memb-mypage.mp-home > .memb-page-title { flex: 0 0 100%; max-width: none; }
  .memb-page.memb-mypage.mp-home > .mp-profile {
    flex: 0 0 340px; margin: 0; align-self: flex-start;
    background: var(--m-bg); border: 0;
    border-radius: 24px; padding: 28px 20px;
  }
  /* 교재 패널 폭: 콘텐츠 1080 - 프로필 340 - 간격 24 = 716px */
  .memb-page.memb-mypage.mp-home > .mp-books {
    flex: 1 1 0; min-width: 0; max-width: 716px; margin: 0;
    background: var(--m-bg); border: 0;
    border-radius: 24px; padding: 28px 28px 28px 32px;
  }
  /* 흰 패널 바깥 2px 테두리 — 즐겨찾기 패널과 같은 값 */
  .memb-page.memb-mypage.mp-home > .mp-profile,
  .memb-page.memb-mypage.mp-home > .mp-books { outline: 2px solid var(--m-orange-90); outline-offset: 0; }
  .memb-mypage.mp-home .mp-books-list {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  }
  .memb-mypage.mp-home .mp-book { padding: 12px 14px; }
  .memb-mypage.mp-home .mp-book-ring { width: 46px; height: 46px; }
  .memb-mypage.mp-home .mp-book-img { width: 40px; height: 40px; }
  .memb-mypage.mp-home .mp-book-count { font-size: 13px; }
}

/* ── 마이페이지 모바일: 프로필은 배경 없이, 교재 목록만 흰 카드 (양옆 여백은 .memb-mypage의 16px) ── */
@media (max-width: 899px) {
  .memb-page.memb-mypage .mp-books {
    background: var(--m-bg); border: 0; border-radius: 20px;
    margin-left: 0; margin-right: 0;
    padding: 16px 16px 36px;
    max-width: none;
    outline: 2px solid var(--m-orange-90); outline-offset: 0;
  }
  /* '교재 진행 현황' 제목 가운데, 필터 칩은 아래 줄 가운데 한 줄 */
  .memb-page.memb-mypage .mp-books-head { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .memb-page.memb-mypage .mp-books-title { flex: 0 0 100%; text-align: center; font-size: 20px; }
  .memb-page.memb-mypage .mp-books-filter { flex: 0 0 100%; flex-wrap: nowrap; justify-content: center; margin-left: 0; }
}

/* ── 설정/프로필사진 데스크톱 2단: 왼쪽 프로필·닉네임, 오른쪽 나머지 ── */
@media (min-width: 900px) {
  .memb-settings .ms-cols,
  .memb-profile-photo .ms-cols,
  .memb-book-detail .ms-cols {
    display: flex; flex-direction: row;
    align-items: flex-start; justify-content: center; gap: 30px;
  }
  .memb-profile-photo .ms-cols { gap: 40px; }
  .memb-settings .ms-col-left { flex: 0 0 340px; }
  .memb-settings .ms-col-right { flex: 1 1 0; max-width: 560px; }
  .memb-settings .ms-cols-tail { margin-top: 8px; }
  .memb-settings .ms-cols-tail .ms-col-left { padding: 0; }
  /* 설정 2단 패널 — 왼쪽 프로필·오른쪽 나머지 둘 다 흰 패널 (교재 새로고침 행은 제외) */
  .memb-settings .ms-cols:not(.ms-cols-tail) > .ms-col-left {
    background: var(--m-bg); border: 0; border-radius: 24px; padding: 44px 20px;
    box-sizing: border-box;
  }
  .memb-settings .ms-cols:not(.ms-cols-tail) > .ms-col-right {
    background: var(--m-bg); border: 0; border-radius: 24px; padding: 32px;
    box-sizing: border-box;
  }
  /* 흰 패널 바깥 2px 테두리 — 즐겨찾기·마이페이지와 같은 값 */
  .memb-settings .ms-cols:not(.ms-cols-tail) > .ms-col-left,
  .memb-settings .ms-cols:not(.ms-cols-tail) > .ms-col-right { outline: 2px solid var(--m-orange-90); outline-offset: 0; }
  /* ≥768px의 560px 중앙정렬 규칙 해제 — 2단 컨테이너가 폭을 관리 */
  .memb-settings form.ms-cols,
  .memb-settings .ms-refresh,
  .memb-settings .ms-sublink { max-width: none; }
  .memb-settings .ms-refresh, .memb-settings .ms-sublink { margin-left: 0; margin-right: 0; }

  .memb-profile-photo .ms-photo { flex: 0 0 360px; margin: 0; }
  .memb-profile-photo .ms-char { flex: 1 1 0; max-width: 640px; margin: 0; }
  /* PC: '사진으로 등록' / '캐릭터로 등록' 두 영역 높이 맞춤 */
  .memb-profile-photo .ms-cols { align-items: stretch; }
  .memb-profile-photo .ms-photo { display: flex; flex-direction: column; padding-bottom: 0; }
  .memb-profile-photo .ms-photo-form { flex: 1 1 auto; margin-bottom: 0; }
  .memb-profile-photo .ms-char { padding-bottom: 0; }

  /* 교재 상세: 데스크톱 폭 배치 */
  .memb-book-detail .ms-col-left { flex: 0 0 300px; }
  .memb-book-detail .bd-right-wrap { flex: 1 1 0; max-width: 760px; margin-top: 0; }
}

/* ── 교재 상세 (member_book_progress): 왼쪽 교재 카드 + 오른쪽 권별 썸네일 그리드 ── */
/* 권 목록은 카드 컨테이너 (모바일도 동일). 교재 카드는 PC에서만 카드 테두리. */
.memb-book-detail .bd-right-wrap { display: flex; flex-direction: column; }
@media (max-width: 899px) {
  .memb-book-detail .bd-right-wrap { margin-top: 16px; }
}
/* 모바일: 왼쪽 요약은 배경 없이, 오른쪽 권 목록만 흰 카드 */
.memb-book-detail .bd-right-wrap > .ms-col-right {
  border: 0; border-radius: 20px;
  background: var(--m-bg); padding: 16px 16px 36px;
  outline: 2px solid var(--m-orange-90); outline-offset: 0;
}
.memb-book-detail .bd-help-link { align-self: flex-end; margin-top: 10px; }
@media (min-width: 900px) {
  /* PC: 왼쪽 교재 카드·오른쪽 권 목록 둘 다 흰 패널 + 바깥 2px 테두리 */
  .memb-book-detail .ms-col-left {
    border: 0; border-radius: 24px;
    background: var(--m-bg); padding: 44px 20px;
  }
  .memb-book-detail .bd-right-wrap > .ms-col-right {
    margin-top: 0; border-radius: 24px; padding: 32px; min-height: 520px;
  }
  .memb-book-detail .ms-col-left,
  .memb-book-detail .bd-right-wrap > .ms-col-right { outline: 2px solid var(--m-orange-90); outline-offset: 0; }
}
.memb-book-detail .bd-book {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.memb-book-detail .bd-book-ring { width: 104px; height: 104px; }
/* 상단 교재 링(진행 중)은 다 본 회차 링과 같은 초록 — 회차 완료색과 통일 */
.memb-page.memb-book-detail .bd-book-ring.mp-book-ring.ring-doing { --ring-c: var(--m-green); }
/* 링 테두리(8px) 안쪽은 흰 원으로 비우고 로고는 원형 클립 */
.memb-book-detail .bd-book-thumb {
  position: relative; display: grid; place-items: center;
  width: calc(100% - var(--ring-t) * 2); height: auto; aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden; background: #fff;
}
/* 로고 자체 패딩이 커서 살짝 확대해 안쪽 원을 채움 */
.memb-book-detail .bd-book-thumb img {
  position: absolute; left: 50%; top: 50%;
  width: 80%; height: 80%; object-fit: contain;
  transform: translate(-50%, -50%);
}
.memb-book-detail .bd-book-thumb .mp-book-img-empty {
  width: 100%; height: 100%; font-size: 34px;
}
.memb-book-detail .bd-book-empty {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--m-orange-95);
  font-size: 40px; font-weight: 800; color: var(--m-orange);
}
.memb-book-detail .bd-book-name {
  margin-top: 12px; font-size: 17px; font-weight: 800; color: var(--m-ink);
}
.memb-book-detail .bd-book-count {
  margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--m-text-tertiary);
}

/* 권별 썸네일 그리드 */
.memb-book-detail .bd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 18px 14px;
}
.memb-book-detail .bd-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; text-align: center;
}
.memb-book-detail .bd-ring {
  position: relative; width: 104px; height: 104px;
  transition: transform .15s, box-shadow .15s;
}
/* 권 표지는 비율이 제각각 — 원에 꽉 차게 cover로 채우고 넘치는 부분을 자른다 */
.memb-book-detail .bd-thumb {
  width: calc(100% - var(--ring-t) * 2); height: auto; aspect-ratio: 1/1; object-fit: cover;
}
.memb-book-detail .bd-item:hover .bd-ring {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.memb-book-detail .bd-item:active .bd-ring { transform: scale(.96); }
.memb-book-detail .bd-item:focus-visible .bd-ring {
  outline: 3px solid rgba(255,149,0,.42); outline-offset: 3px;
}

/* 재생 버튼 오버레이 — 상태별 색 */
.memb-book-detail .bd-play {
  position: absolute; right: 0; bottom: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--m-text-assistive); color: #fff;
  border: 3px solid #fff;
}
.memb-book-detail .bd-play .material-icons { font-size: 20px; }
.memb-book-detail .bd-play.play-doing { background: var(--m-orange); }
.memb-book-detail .bd-play.play-done  { background: var(--m-green); }

.memb-book-detail .bd-name {
  font-size: 13.5px; font-weight: 600; color: var(--m-text-secondary);
  line-height: 1.35; word-break: keep-all;
}

@media (min-width: 900px) {
  .memb-book-detail .bd-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 22px 18px;
  }
}

/* ── 프로필 사진 페이지: 캐릭터 그리드는 테두리 없는 원형만 ── */
.memb-profile-photo .ch-avatar-opt {
  min-height: 0; padding: 0; gap: 0;
  border: 0; border-radius: 50%; overflow: visible;
  box-shadow: none; background: transparent;
}
.memb-profile-photo .ch-avatar-opt:hover,
.memb-profile-photo .ch-avatar-opt.selected {
  background: transparent; box-shadow: none; transform: none;
}
/* 체크 배지를 원 테두리에 걸치게 — 캐릭터 얼굴을 덮지 않도록 밖으로 뺌
   (overflow:visible 이라 음수 위치도 잘리지 않음) */
.memb-profile-photo .ch-avatar-check { top: -2px; right: -2px; z-index: 2; }
.memb-profile-photo .ch-avatar-opt img { width: 72px; height: 72px; }
@media (min-width: 900px) {
  .memb-profile-photo .ch-avatar-opt img { width: 80px; height: 80px; }
}

/* ── 프로필 사진 페이지: 상단 토스트 ── */
.pp-toast {
  position: fixed; top: 24px; left: 50%; z-index: 9999;
  transform: translate(-50%, -8px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 10px;
  border-left: 4px solid #2e7d32;
  background: #f1f8f1; color: #2e7d32;
  font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  opacity: 0; pointer-events: none;
  max-width: 90vw;
  transition: opacity .3s ease, transform .3s ease;
}
.pp-toast .material-icons { font-size: 19px; line-height: 1; }
.pp-toast .pp-toast-msg { line-height: 1.35; }
.pp-toast.is-error {
  border-left-color: #c62828;
  background: #fff5f5; color: #c62828;
}
.pp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 교재 상세: 학습 기록 설명 링크 + 모달 ── */
.memb-book-detail .bd-help-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border: 0; border-radius: 8px; background: none;
  font-size: 13px; font-weight: 600; color: var(--m-text-tertiary);
  cursor: pointer; transition: color .15s, background-color .15s;
}
.memb-book-detail .bd-help-link:hover {
  color: var(--m-orange-deep); background: var(--m-orange-95);
}
.memb-book-detail .bd-help-link .material-icons { font-size: 17px; }

/* 설명 모달 — mp-modal 패턴 (중앙 고정, 좁은 폭) */
.memb-book-detail .bd-help-modal {
  position: fixed; left: 50%; top: 50%; z-index: 1061;
  width: min(460px, calc(100% - 32px)); max-width: none; margin: 0;
  max-height: min(600px, calc(100dvh - 48px));
  overflow: hidden; transform: translate(-50%,-50%);
  border: 1px solid rgba(245,216,181,.85); border-radius: 28px;
  background: #FFFCF7;
  box-shadow: 0 28px 80px rgba(17,11,2,.24), 0 4px 16px rgba(109,76,65,.12);
}
@keyframes mpModalIn {
  from { opacity: 0; transform: translate(-50%,-48%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.memb-book-detail .bd-help-modal { animation: mpModalIn .22s cubic-bezier(.2,.8,.2,1); }
/* 타이틀은 균등 줄나눔(balance) 대신 단어 단위로만 줄바꿈 — "어|떻게"처럼
   단어 중간에서 끊기지 않게 이 모달에만 적용 */
.memb-book-detail .bd-help-modal .mp-modal-title { text-wrap: wrap; word-break: keep-all; }
/* 닫기 버튼 — 키커 제거 후 타이틀 첫 줄 기준으로 살짝 아래로 보여 위로 보정 */
.memb-book-detail .bd-help-modal .mp-modal-close { margin-top: -4px; }
.memb-book-detail .bd-help-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 14px;
}
.memb-book-detail .bd-help-list li {
  font-size: 14px; color: var(--m-ink); line-height: 1.6;
  padding-left: 14px; position: relative;
}
.memb-book-detail .bd-help-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--m-orange);
}
.memb-book-detail .bd-help-list strong { color: var(--m-ink); font-weight: 800; }

/* 설정 페이지 헤더 — 뒤로가기+제목 통합 버튼 (mp-back-btn--wide) */
.memb-settings .mp-sub-head { position: relative; padding-top: 18px; padding-bottom: 26px; }

/* 설정 페이지: 폼 하단 우측 완료 버튼 */
.memb-settings .ms-actions { display: flex; justify-content: flex-end; }

/* 설정 탭 패널 내부 간격 — ms-col-right의 margin 리셋이 패널 안까지 먹으므로 패널을 flex로 묶음 */
.memb-settings .mp-tab-panel.active { display: flex; flex-direction: column; gap: 14px; }
.memb-settings .mp-tab-panel .mp-field { display: flex; flex-direction: column; gap: 6px; }

/* 닉네임 입력 밑줄 안 우측 끝의 체크 버튼 */
.memb-settings .ms-nick-row { position: relative; }
.memb-settings .ms-nick-row .mp-input-line { padding-right: 30px; padding-left: 30px; text-align: center; }
.memb-settings .ms-nick-btn {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  padding: 4px;
  border: 0; background: none; cursor: pointer;
  color: var(--m-ink); font-size: 13px; font-weight: 700;
  transition: color .15s;
}
.memb-settings .ms-nick-btn:hover { color: var(--m-orange-deep); }
.memb-settings .mp-sub-head { justify-content: space-between; }

/* 닉네임 옆 주황 적용 — 텍스트만 */
.memb-settings .ms-nick-apply {
  border: 0; background: none; padding: 0 2px;
  color: var(--m-orange-deep); font-size: 13px; font-weight: 700;
}
.memb-settings .ms-nick-apply:hover { background: none; color: var(--m-orange); text-decoration: underline; }
/* 닉네임 버튼 아이콘 — 평소 연필(#B84F00), 입력칸 포커스 시 체크(#EF6902)
   아이콘 글자(check)를 숨기고 ::before로 교체. '값이 바뀐 경우'만 체크로 바꾸려면
   JS로 .ms-nick-row에 .is-changed를 토글하고 :focus-within을 .is-changed로 교체 */
.memb-page .ms-nick-row .ms-nick-apply { color: #B84F00; }
.memb-page .ms-nick-row .ms-nick-apply .material-icons {
  font-size: 0; width: 19px; height: 19px;
  display: inline-flex; align-items: center; justify-content: center;
}
.memb-page .ms-nick-row .ms-nick-apply .material-icons::before { content: "edit"; font-size: 19px; }
.memb-page .ms-nick-row:focus-within .ms-nick-apply { color: var(--m-orange-deep); }
.memb-page .ms-nick-row:focus-within .ms-nick-apply .material-icons::before { content: "check"; }

/* 설정: 마지막 입력창 + 우측 수정 버튼 */
.memb-settings .ms-field-row { display: flex; align-items: center; gap: 10px; }
.memb-settings .ms-field-row .mp-input { flex: 1 1 auto; min-width: 0; }
.memb-settings .ms-field-row .ms-done-btn { flex: none; }

/* 설정: 입력창 아래 우측 정렬 수정 버튼 */
.memb-settings .ms-field-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.memb-settings .ms-nick-apply .material-icons { font-size: 19px; line-height: 1; }

/* ===== DOWNLOAD: FileKind별 섹션 분리 (2026-10-21) ===== */
.memb-download .dl-sec + .dl-sec { margin-top: 28px; }
.memb-download .dl-sec-title {
  font-size: 15px; font-weight: 800; color: var(--m-ink);
  margin: 0 0 12px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.memb-download .dl-sec-no {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--m-orange); color: #fff;
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}

/* ===== DOWNLOAD: 버튼형 다운로드 목록 (2026-10-21) ===== */
.memb-download .dl-btns {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.memb-download .dl-btn-wrap {
  display: inline-flex; align-items: center; gap: 4px;
}
.memb-download .dl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--m-line);
  font-size: 14px; font-weight: 700; color: var(--m-ink);
  text-decoration: none;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.memb-download .dl-btn .material-icons { font-size: 18px; }
.memb-download .dl-btn:hover {
  border-color: var(--m-orange); color: var(--m-orange-deep);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.memb-download .dl-btn:focus-visible {
  outline: 2px solid var(--m-orange-deep); outline-offset: 2px;
}
.memb-download .dl-btn-info {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: var(--m-surface-gray); color: var(--m-muted-icon, #8C8579);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.memb-download .dl-btn-info .material-icons { font-size: 16px; }
.memb-download .dl-btn-info:hover { color: var(--m-orange); }


/* ===== DOWNLOAD: 섹션 헤더 + 우측 방법 링크 ===== */
.memb-download .dl-sec-title { justify-content: space-between; }
.memb-download .dl-sec-head { display: flex; align-items: center; gap: 8px; }
.memb-download .dl-howto {
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--m-muted);
}
.memb-download .dl-howto .material-icons { font-size: 17px; }
.memb-download .dl-howto:hover { color: var(--m-orange-deep); }

/* ===== DOWNLOAD: 간소화된 한 줄 안내 ===== */
.memb-download .dl-notice-simple {
  flex-direction: row; align-items: flex-start; gap: 8px;
}
.memb-download .dl-notice-simple .material-icons { font-size: 17px; color: var(--m-orange-deep); }
.memb-download .dl-notice-simple span { font-size: 13px; line-height: 1.5; color: var(--m-text-secondary); }


/* ===== DOWNLOAD: 제품 카드 (이미지 + 타이틀 + 주의사항 + 스텝) ===== */
.memb-download .dl-hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-surface-gray); border-radius: 20px;
  padding: 26px 28px; margin-bottom: 28px;
}
.memb-download .dl-hero-img {
  position: absolute; left: 24px; bottom: 0;   /* 카드 좌측 장식 — 레이아웃 영향 없음 */
  height: 150px; width: auto;   /* 고정 높이 — 폭 변화에 크기 유지 */
  pointer-events: none;
}
.memb-download .dl-hero-body {
  min-width: 0; flex: 1;
  position: relative; z-index: 1;   /* 좌측 장식 이미지 위로 텍스트가 올라오게 */
  display: flex; flex-direction: column; align-items: center;
}
.memb-download .dl-hero-title {
  font-size: 22px; font-weight: 800; color: var(--m-ink);
  margin: 0 0 10px; letter-spacing: -.02em;
}
.memb-download .dl-caution {
  display: inline-flex; align-items: center;
  border: 1px solid var(--m-line); border-radius: 999px;
  background: #fff; padding: 6px 14px; margin: 0 0 18px;
  font-size: 13px; font-weight: 700; color: var(--m-text-secondary);
  cursor: pointer;
}
.memb-download .dl-caution:hover { border-color: var(--m-orange); color: var(--m-orange-deep); }
.memb-download .dl-hero-steps {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: nowrap;              /* 스텝 줄내림 금지 — 좁으면 가로 스크롤 */
  overflow-x: auto;
  width: 100%; box-sizing: border-box;   /* column flex 자식은 max-content로 커져 카드를 뚫음 — 부모 폭으로 제한해야 스크롤이 먹힘 */
}
.memb-download .dl-hero-step { text-align: center; flex: none; white-space: nowrap; }
.memb-download .dl-hero-step em {
  display: block; font-style: normal;
  font-size: 11px; font-weight: 800; color: var(--m-orange);
  letter-spacing: .05em;
}
.memb-download .dl-hero-step b {
  font-size: 14px; font-weight: 800; color: var(--m-ink);
}
.memb-download .dl-hero-arrow {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--m-orange); color: #fff;
  font-size: 15px; display: grid; place-items: center;
}
/* PC: 스텝 사이 간격 확장 */
@media (min-width: 744px) {
  .memb-download .dl-hero-steps { gap: 48px; }
}
@media (max-width: 743px) {
  .memb-download .dl-hero { gap: 16px; padding: 16px 12px; margin-bottom: 24px; }
  .memb-download .dl-hero-img { display: none; }
  .memb-download .dl-hero-title { font-size: 16px; }
  .memb-download .dl-caution { min-height: 40px; margin-bottom: 14px; }
  /* 스텝은 가로 스크롤 대신 등분+줄바꿈 — 좁은 폭에서 전부 보이게 */
  .memb-download .dl-hero-steps { gap: 4px; overflow: visible; }
  .memb-download .dl-hero-step { flex: 1 1 0; min-width: 0; white-space: normal; word-break: keep-all; }
  .memb-download .dl-hero-step b { display: block; font-size: 13px; line-height: 1.35; }
  .memb-download .dl-hero-arrow { flex: 0 0 16px; width: 16px; height: 16px; font-size: 11px; }
}

/* ===== DOWNLOAD: 빈 그룹 안내 (구매 교재 없음) ===== */
.memb-download .dl-empty-msg {
  margin: 0;
  background: var(--m-surface-gray);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--m-text-secondary);
  line-height: 1.6;
}

/* ===== DOWNLOAD: 회색 다운로드 박스 (안내문 좌측 + 버튼 우측) ===== */
.memb-download .dl-box {
  display: flex; align-items: center; gap: 16px;
  background: var(--m-surface-gray); border-radius: 14px;
  padding: 16px 18px;
}
.memb-download .dl-box .dl-btns { margin-left: auto; flex-shrink: 0; }
.memb-download .dl-box-note {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--m-text-secondary);
  white-space: pre-line;
}
@media (max-width: 743px) {
  .memb-download .dl-box { flex-direction: column; align-items: stretch; }
  .memb-download .dl-box .dl-btns { margin-left: 0; }
}

/* 섹션 제목 옆 작은 설명 */
.memb-download .dl-sec-sub {
  margin-left: 10px; font-size: 12.5px; font-weight: 500;
  color: var(--m-muted);
}

/* ===== DOWNLOAD: 제품 주의사항 모달 그리드 ===== */
.memb-download .dl-caution-group + .dl-caution-group { margin-top: 20px; }
.memb-download .dl-caution-group h5 {
  font-size: 14px; font-weight: 800; color: var(--m-orange-deep);
  margin: 0 0 12px; letter-spacing: .02em;
}
.memb-download .dl-caution-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.memb-download .dl-caution-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--m-surface-gray); border-radius: 12px;
  padding: 14px 14px;
}
.memb-download .dl-caution-item .material-icons {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--m-orange);
  display: grid; place-items: center; font-size: 20px;
}
.memb-download .dl-caution-item b {
  display: block; font-size: 13px; font-weight: 800;
  color: var(--m-ink); margin-bottom: 3px;
}
.memb-download .dl-caution-item span {
  font-size: 12px; line-height: 1.55; color: var(--m-text-secondary);
}
@media (max-width: 743px) {
  .memb-download .dl-caution-grid { grid-template-columns: 1fr; }
}


/* ===== DOWNLOAD: 펌웨어 모달 용량 탭 ===== */
.memb-download .dlfw-tab-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--m-text-secondary);
}
.memb-download .dlfw-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.memb-download .dlfw-tab {
  flex: 1; padding: 10px 0; border-radius: 999px;
  border: 1.5px solid var(--m-line); background: #fff;
  font-size: 14px; font-weight: 800; color: var(--m-muted); cursor: pointer;
}
.memb-download .dlfw-tab.on { background: var(--m-ink); border-color: var(--m-ink); color: #fff; }

/* ===== MYPAGE: 모바일에서 상단 타이틀 숨김 (앱바와 중복) ===== */
@media (max-width: 899px) {
  .memb-mypage .memb-page-title { display: none; }
}

/* ===== 서브페이지 푸터: 메인과 동일한 언덕/로고/풀 ===== */
body:has(.memb-page:not(.mm-main)) { --mm-hill: #64AC44; --mm-hill-rise: 12px; }
body:has(.memb-page:not(.mm-main)) .idx-footer {
  position: relative; margin-top: 0; background: var(--mm-hill); border-top: 0;
}
body:has(.memb-page:not(.mm-main)) .idx-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: var(--mm-hill-rise);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q50 -10 100 10 Z' fill='%2364AC44'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
body:has(.memb-page:not(.mm-main)) .idx-footer-copy,
body:has(.memb-page:not(.mm-main)) .idx-footer-nav a:not(.idx-footer-privacy) { color: var(--m-ink); opacity: .6; }
body:has(.memb-page:not(.mm-main)) .idx-footer-privacy,
body:has(.memb-page:not(.mm-main)) .idx-footer-privacy strong { color: var(--m-ink); opacity: 1; }
@media (min-width: 744px) and (max-width: 899px) {
  body:has(.memb-page:not(.mm-main)) { --mm-hill-rise: 14px; }
}
@media (min-width: 900px) {
  body:has(.memb-page:not(.mm-main)) { --mm-hill-rise: 40px; --u: min(1px, calc((100vw - 80px) / 1200)); position: relative; }
  body:has(.memb-page:not(.mm-main)) .idx-footer { min-height: 84px; display: flex; align-items: center; }
  body:has(.memb-page:not(.mm-main)) .idx-footer > .container { width: min(1200px, calc(100% - 80px)); max-width: none; position: relative; z-index: 1; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-inner { flex-wrap: nowrap; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-brand { gap: 20px; flex-wrap: nowrap; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-logo {
    display: block; width: 88px; height: 32px; font-size: 0;
    background: url("/static/images/logo/player_logo_hor.svg") left center / contain no-repeat;
  }
  body:has(.memb-page:not(.mm-main)) .idx-footer-nav { gap: 35px; flex-wrap: nowrap; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-pwa-btn { gap: 4px; padding: 10px 16px 10px 12px; border-radius: 10px; background: #FF9500; margin-left: -15px; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-pwa-icon { font-size: 24px; margin-right: 0; }
  body:has(.memb-page:not(.mm-main))::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(240 * var(--u));
    background: url("/static/images/member_main/motion/deco_bush_left.svg") no-repeat left 0 bottom calc(48 * var(--u)) / calc(225 * var(--u)) calc(170 * var(--u));
    pointer-events: none; z-index: 0;
  }
  body:has(.memb-page:not(.mm-main)) .idx-footer::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(200 * var(--u));
    background: url("/static/images/member_main/motion/deco_bush_right.svg") no-repeat right 0 bottom calc(56 * var(--u)) / calc(155 * var(--u)) calc(123 * var(--u));
    pointer-events: none; z-index: 0;
  }
}
@media (max-width: 899px) {
  body:has(.memb-page:not(.mm-main)) .idx-footer > .container { position: relative; width: auto; padding: 32px 20px 24px; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-brand { display: contents; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-logo {
    order: 1; display: block; width: 77px; height: 28px; font-size: 0;
    background: url("/static/images/logo/player_logo_hor.svg") left center / contain no-repeat;
  }
  body:has(.memb-page:not(.mm-main)) .idx-footer-nav { order: 2; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-copy { order: 3; align-self: center; text-align: center; }
  body:has(.memb-page:not(.mm-main)) .idx-footer-pwa-btn {
    position: absolute; top: 32px; right: 20px; gap: 4px; margin: 0;
    padding: 10px 16px 10px 12px; border-radius: 10px; background: #fff; color: #FF9500;
  }
  body:has(.memb-page:not(.mm-main)) .idx-footer-pwa-icon { font-size: 19px; margin-right: 0; }
}
body:not(:has(.idx-footer))::after { display: none; }