/*
 * 모바일 전체 메뉴(☰) — Figma common › 로그인 › mobile-menu (1143:50749, 2026-10-26 · 2026-10-29 갱신 3028:5015)
 * 마크업: _inc/mobile-menu.php · 패널 위치·열림 애니메이션은 assets/css/main/index-header.css(.index-mobile-menu)
 * 패널 320 · 위 여백 30 · 닫기 36 · 머리(아바타 60 · 간격 8 · 좌우 16) · 정보(좌우 36 · 위아래 20 · 줄 간격 10)
 * 구분선 #eee · 검색(여백 20 · 아래 선 1.2 #1a1a1a) · 메뉴(좌 36 우 40 · 줄 위아래 10 · 간격 10 · 14px)
 */
.index-mobile-menu.mws-mobile-menu {
  width: min(300px, calc(100vw - 40px));
  padding-top: 10px;
  box-sizing: border-box;
  color: var(--neutral-tx2-title, #444);
  font-size: 14px;
  line-height: 20px;
}

.mws-mobile-menu__ui {
  display: flex;
  justify-content: flex-end;
  padding: 10px 10px 0;
}

.mws-mobile-menu__close {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mws-mobile-menu__close::before,
.mws-mobile-menu__close::after {
  position: absolute;
  top: 17.25px;
  left: 6px;
  width: 24px;
  height: 1px;
  border-radius: 1px;
  background: var(--neutral-tx2-title, #444);
  content: "";
}

.mws-mobile-menu__close::before {
  transform: rotate(45deg);
}

.mws-mobile-menu__close::after {
  transform: rotate(-45deg);
}

.mws-mobile-menu__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: inherit;
  text-decoration: none;
}

.mws-mobile-menu__avatar {
  display: flex;
  width: 60px;
  height: 60px;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
}

.mws-mobile-menu__avatar img {
  display: block;
  width: 53.33px;
  height: 53.33px;
  border-radius: 9999px;
  object-fit: cover;
}

/* 비로그인 아바타: 회색 원(53.33, #eee) 가운데 사람 아이콘 */
.mws-mobile-menu__guest-circle {
  display: flex;
  width: 53.33px;
  height: 53.33px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--semantic-border, #eee);
}

.mws-mobile-menu__guest-circle img {
  width: 23.64px;
  height: 29.33px;
  border-radius: 0;
}

.mws-mobile-menu__name {
  display: flex;
  font-size: 14px;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

.mws-mobile-menu__name strong {
  overflow: hidden;
  color: var(--neutral-tx1-hero, #1a1a1a);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-overflow: ellipsis;
}

.mws-mobile-menu--biz .mws-mobile-menu__name strong {
  color: var(--neutral-tx1-hero, #1a1a1a);
}

.mws-mobile-menu__name strong + span {
  margin-left: -6px;
}

.mws-mobile-menu__badge {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
}

.mws-mobile-menu__login {
  color: var(--neutral-tx3-sub, #949494);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

/* 2026-10-29 Figma 갱신 — 정보 목록(지역 · D-day/플랜 · 포인트/예치금, 회색 14px) + «마이페이지» 민트 버튼
   (커뮤니티 판은 위에 «내 스토리 모먼트» 진회색 버튼) · 좌 38 우 36 위 20 아래 28 · 목록↔버튼 20 */
.mws-mobile-menu__profile {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 36px 28px 38px;
}

.mws-mobile-menu--guest .mws-mobile-menu__profile {
  gap: 6px;
}

.mws-mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mws-mobile-menu__row {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--neutral-tx3-sub, #949494);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

button.mws-mobile-menu__row {
  align-self: flex-start;
  cursor: pointer;
}

.mws-mobile-menu__row > img,
.mws-mobile-menu__row-value > img {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

.mws-mobile-menu__row .mws-mobile-menu__region-arrow {
  width: 6px;
  height: auto;
  margin: 2px 3px 0 5px;
}

.mws-mobile-menu__row--chip {
  justify-content: space-between;
  gap: 8px;
}

.mws-mobile-menu__row-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mws-mobile-menu__chip {
  display: inline-flex;
  height: 22px;
  flex: none;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--neutral-tx2-title, #444);
  color: var(--semantic-white, #fff);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.mws-mobile-menu__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mws-mobile-menu__button {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--brand-primary, #81d8d0);
  color: var(--semantic-white, #fff);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.mws-mobile-menu__button--dark {
  background: var(--neutral-tx2-title, #444);
}

.mws-mobile-menu__divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--semantic-border, #eee);
}

.mws-mobile-menu__search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 20px 28px;
  padding: 4px 8px 4px 16px;
  border-bottom: 1.2px solid var(--neutral-tx1-hero, #1a1a1a);
}

.mws-mobile-menu__search input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--neutral-tx1-hero, #1a1a1a);
  font: inherit;
  font-size: 16px;
  line-height: 22px;
}

.mws-mobile-menu__search input::placeholder {
  color: var(--neutral-tx4-dissolved, #cfcfcf);
}

.mws-mobile-menu__search button {
  display: flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.mws-mobile-menu__search button img {
  display: block;
  width: 20px;
  height: 20px;
}

.mws-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 40px 20px 36px;
}

.mws-mobile-menu__nav--secondary {
  gap: 0;
  padding: 20px 40px 20px 36px;
}

.mws-mobile-menu__nav a {
  display: block;
  overflow: hidden;
  padding: 10px 0;
  color: var(--neutral-tx1-hero, #1a1a1a);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 서랍(메뉴별 머리말 화면용, 2026-10-29) — 메인은 main/index-header.css 에 같은 규칙이 있다 ── */
.index-mobile-menu-layer {
  display: none;
}

@media (max-width: 767px) {
  .index-mobile-menu-layer {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    visibility: hidden;
  }

  .index-mobile-menu-layer.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .index-mobile-menu-layer__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: var(--badge-alpha-b-20, rgba(0, 0, 0, 0.2));
  }

  .index-mobile-menu {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--semantic-border, #eee);
    background: var(--semantic-white, #fff);
    transform: translateX(-100%);
    transition: transform 220ms ease;
  }

  .index-mobile-menu-layer.is-open .index-mobile-menu {
    transform: translateX(0);
  }

  /* 2026-10-30 Figma «화면수정»(#161) — 전체 메뉴는 오른쪽에서 나온다(☰ 가 오른쪽으로 옮겨 감). 메인·메뉴별 머리말 공용. */
  .index-mobile-menu-layer .index-mobile-menu {
    margin-left: auto;
    border-right: 0;
    border-left: 1px solid var(--semantic-border, #eee);
    transform: translateX(100%);
  }

  body.has-mobile-menu {
    overflow: hidden;
  }
}

/* 2026-11-04 Figma «화면수정» #09(selectbox 1534:11420) — 프로필 줄(D-day · 포인트 · 예치금 · 플랜 · 지역) = 글자·아이콘 #444(예전 #949494, 아이콘 menu3-*). 지역 줄은 포인트(예치금) 아래 */
.mws-mobile-menu .mws-mobile-menu__row {
  color: var(--neutral-tx2-title, #444);
}