/* ==========================================================================
   account — 내 정보 · 본인인증 · 설정 · 책임도박 · 거래·베팅 내역
   프로필 드롭다운의 계정 항목들이 전부 이 한 화면의 탭으로 들어온다 (EG-02 §7).
   페이지를 다섯 개로 나누지 않는 이유는, 오가며 볼 일이 많기 때문이다.
   ========================================================================== */

/* ---- 탭 줄 -------------------------------------------------------------- */
.ac-tabs{
  display:flex; gap:4px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  border-bottom:1px solid var(--line);
}
.ac-tabs::-webkit-scrollbar{ display:none; }
.ac-tab{
  flex:none; height:48px; padding:0 16px;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:var(--fs-base); font-weight:700; color:var(--text-4);
  border-bottom:2px solid transparent;
  transition:color var(--t-color), border-color var(--t-bg);
}
.ac-tab:hover{ color:var(--text-2); }
.ac-tab.is-on{ color:var(--text); border-bottom-color:var(--primary); }
.ac-tab svg{ width:20px; height:20px; }

/* ---- 패널 --------------------------------------------------------------- */
.ac-panel{
  margin-top:var(--gap-sec); padding:24px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.ac-panel__title{ font-size:var(--fs-lg); font-weight:900; }
.ac-panel__sub{ margin-top:6px; font-size:var(--fs-base); color:var(--text-4); }

/* ---- 항목 줄 — 왼쪽 이름, 오른쪽 값이나 조작 ---------------------------- */
.ac-rows{ margin-top:20px; display:grid; gap:2px; }
/*
  ★ 줄 높이를 못 박는다 (레드 2026-09-24 「여기 리스트 높이 동일하게해주기」).

    padding 만 주면 <속에 든 것>이 높이를 정한다. 글자만 있는 줄(닉네임·가입일)보다
    단추가 든 줄(본인 인증·비밀번호)이 커져서, 네 줄이 나란히 선 목록인데
    두 가지 키로 보였다. 목록은 <같은 줄이 반복되는 것>이라 키가 흔들리면 안 된다.

  ⚠ height 가 아니라 min-height 다. 이름표 아래 설명글이 붙는 줄(「리워드 수령 방식」)은
    더 커져야 한다 — 고정하면 그 글이 잘린다.
*/
.ac-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:72px;
  padding:16px; border-radius:var(--r); background:var(--surface-2);
}
.ac-row__label{ font-size:var(--fs-base); color:var(--text-3); }
.ac-row__label small{ display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--text-5); }
.ac-row__value{ font-size:var(--fs-base); font-weight:800; text-align:right; }
.ac-row .btn, .ac-row .select{ flex:none; margin:0; }

/*
  ★ 고르개 글자를 <이름표와 같게> (레드 2026-09-24 「셀렉트 박스 폰트 앞에 라벨이랑 맞추기」).

    고르개가 이름표보다 굵고 커서 한 줄 안에서 오른쪽이 먼저 눈에 들어왔다.
    고르는 값은 <답>이지 <제목>이 아니다 — 왼쪽과 같은 무게라야
    「표시 통화 : 원」이 한 문장으로 읽힌다.

  ⚠ 값이므로 색은 이름표보다 밝게 둔다. 굵기와 크기만 맞춘다.
*/
.ac-row .select{
  font-size:var(--fs-base);
  font-weight:500;
  color:var(--text);
}

/* 켜고 끄는 스위치 */
.ac-switch{
  flex:none; width:52px; height:30px; padding:3px; border-radius:var(--r-full);
  background:var(--surface-3); transition:background var(--t-bg);
}
.ac-switch i{
  display:block; width:24px; height:24px; border-radius:var(--r-full);
  background:var(--text-3); transition:transform var(--t-bg), background var(--t-bg);
}
.ac-switch.is-on{ background:var(--primary); }
.ac-switch.is-on i{ transform:translateX(22px); background:#fff; }

/* ---- 본인인증 단계 ------------------------------------------------------ */
.ac-steps{ margin-top:20px; display:grid; gap:8px; }
.ac-step{
  display:flex; align-items:center; gap:12px;
  padding:16px; border-radius:var(--r); background:var(--surface-2);
}
.ac-step__mark{
  flex:none; width:28px; height:28px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--text-5);
  font-size:var(--fs-sm); font-weight:900;
}
.ac-step.is-done .ac-step__mark{ background:var(--success); color:var(--text-on-cta); }
.ac-step__label{ font-size:var(--fs-base); font-weight:700; }
.ac-step.is-done .ac-step__label{ color:var(--text-4); }
.ac-step .btn{ margin:0 0 0 auto; }

/* ---- 거래·베팅 내역 ----------------------------------------------------- */
.ac-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }

/*
  ★ 기간 고르개 (레드 2026-09-19 「내역란 기간 조회할 수 있는 기능 추가」).

    탭 줄 바로 아래에 붙는다. 같은 .ac-chip 을 쓰되 <위 줄과 덜 붙게> 간격을 좁힌다 —
    두 줄이 같은 간격이면 어느 것이 탭이고 어느 것이 기간인지 안 읽힌다.

  ⚠ 날짜 칸은 <줄바꿈을 막는다>. 「시작 ~ 끝」이 갈라지면 물결표만 남은 줄이 생긴다.
*/
.ac-filter--period{ margin-top:10px; align-items:center; }
.ac-filter__dates{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

.ac-filter__dates input[type="date"]{
  /*
    ★★ color-scheme:dark 가 핵심이다 (레드 2026-09-19 「달력아이콘 흰색으로」).

      브라우저가 그리는 것 둘을 한꺼번에 바꾼다 —
        ① 오른쪽 달력 아이콘이 <흰색>이 된다
        ② 눌러서 뜨는 <달력 판>도 어두운 테마가 된다
      아이콘만 필터로 뒤집으면 달력 판은 흰 채로 떠서 화면이 반짝 밝아진다.
  */
  color-scheme:dark;
  cursor:pointer;
  padding:7px 10px; border-radius:var(--r-sm, 8px);
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
  /* 브라우저마다 기본 폭이 제각각이라 박아 둔다 — 두 칸이 어긋나 보이면 지저분하다 */
  min-width:0; width:9.5rem;
}
.ac-filter__dates input[type="date"]:hover{ border-color:var(--line-2, var(--line)); background:var(--surface-3); }
.ac-filter__dates input[type="date"]:focus-visible{ outline:2px solid #4EC3F7; outline-offset:1px; }

/* 아이콘도 손가락 모양으로 — 칸 아무 데나 눌러도 열리므로 결이 같아야 한다 */
.ac-filter__dates input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; }

.ac-filter__dates em{ font-style:normal; color:var(--text-5); padding:0 2px; }

/*
  ★ 찾기 단추 — 칩과 <같은 키>로 맞춘다. 높이가 다르면 줄이 어긋나 보인다.
*/
.ac-filter__go{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  border-radius:var(--r-sm, 8px);
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  cursor:pointer;
}
.ac-filter__go:hover{ background:#4EC3F7; border-color:#4EC3F7; color:#06121c; }

/*
  폰에서는 날짜 줄을 <통째로 내린다>. 칩과 한 줄에 두면 칸이 눌려
  「2026-08-…」처럼 날짜가 잘린다.
*/
@media (max-width:560px){
  .ac-filter__dates{ width:100%; margin-top:6px; }
  .ac-filter__dates input[type="date"]{ flex:1; width:auto; }
}

/* ★ 폰에서는 <한 줄>이다 (레드 2026-09-15 「한줄 처리」).
     다섯(전체·카지노·스포츠·입출금·기타)이 접혀 「기타」 하나만 둘째 줄에
     덩그러니 남았다 — 한 칸 때문에 줄 하나를 더 쓰는 셈이다.
   ⚠ 줄이는 것은 <안쪽 여백과 글자>다. 칸 수는 그대로 다섯이다. */
@media (max-width:640px){
  /* ⚠⚠ flex:1 1 0 으로 다섯을 <억지로> 한 줄에 넣었더니 칸이 좁아
       「카지 / 노」처럼 쪼개졌다. 한 줄에 다 넣는 것과 한 줄로 보이는 것은 다르다.
     ★ 칸은 <제 글자 폭>을 지키고, 넘치면 밀어서 본다. 종목 줄과 같은 결이다. */
  .ac-filter{
    flex-wrap:nowrap; gap:6px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .ac-filter::-webkit-scrollbar{ display:none; }
  .ac-chip{
    flex:0 0 auto; white-space:nowrap;
    height:34px; padding:0 12px; font-size:var(--fs-sm);
  }
}
.ac-chip{
  height:36px; padding:0 14px; border-radius:var(--r);
  display:inline-flex; align-items:center;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:var(--fs-base); font-weight:700; color:var(--text-4);
  transition:color var(--t-color), border-color var(--t-color);
}
.ac-chip:hover{ color:var(--text-2); }
.ac-chip.is-on{ background:var(--primary); border-color:var(--primary); color:#fff; }

.ac-table{ width:100%; margin-top:16px; border-collapse:separate; border-spacing:0 6px; }
.ac-table th{
  padding:0 16px 8px; text-align:left;
  font-size:var(--fs-xs); font-weight:800; color:var(--text-5);
}
.ac-table th:last-child, .ac-table td:last-child{ text-align:right; }
.ac-table td{
  padding:14px 16px; background:var(--surface-2);
  font-size:var(--fs-base);
}
.ac-table td:first-child{ border-radius:var(--r) 0 0 var(--r); color:var(--text-4); }
.ac-table td:last-child{ border-radius:0 var(--r) var(--r) 0; font-weight:900; }
/* 들어온 돈은 초록, 나간 돈은 그대로 둔다 */
.ac-amt--in { color:var(--success); }
.ac-amt--out{ color:var(--text-2); }
.ac-empty{ padding:40px; text-align:center; font-size:var(--fs-md); color:var(--text-5); }
/* 「카지노 내역이 없습니다.」 — 폰(380 이하)에서 「…없습니 / 다.」로 낱글자에서 끊기고, 떨어진 「다.」가
   아래 단추에 붙었다(2026-09-12 폰 폭 검증). 낱말 단위로 넘기고 단추와 사이를 둔다. */
.ac-empty h2{ word-break:keep-all; text-wrap:balance; margin:0 0 16px; }
/* 내 정보 — 「비밀번호 변경은 고객센터로」 안내 (레드 2026-09-12). 줄 목록 바로 아래 한 상자 */
.ac-notice{
  margin-top:12px; padding:14px 16px; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.ac-notice p{ margin:0; font-size:var(--fs-base); color:var(--text-2); word-break:keep-all; }

/* ---- 좁은 화면 ---------------------------------------------------------- */
@media (max-width:640px){
  .ac-panel{ padding:16px; }
  .ac-row{ flex-wrap:wrap; }
  .ac-row__value{ text-align:left; }
  /* ★★ 좁은 화면에서는 <표가 아니라 카드>다 (레드 2026-09-15
       「날짜 밑에 상세내용 · 분류」).

       네 칸을 그대로 두면 한 칸이 40px 도 안 된다 — 「카지노 정산」이
       <세로로 쪼개져> 「카지 / 노 정 / 산」으로 섰다.

     ⚠⚠ 전에는 <내용 칸을 감춰서> 버텼다(td:nth-child(3){display:none}).
       그런데 스포츠 베팅의 「상세」 단추가 <그 칸 안에> 있다 —
       모바일에서 배팅 상세로 가는 길이 통째로 없었다.
       (레드 「스포츠 상세보기없음」) 이제 감추지 않는다.

     ★ 왼쪽은 <시각 · 구분 · 내용>을 쌓고, 금액은 오른쪽에 통째로 세운다.
       금액 칸은 잔액 줄까지 품고 있어 높이가 제일 크다. */
  .ac-table thead{ display:none; }
  .ac-table{ margin-top:12px; border-spacing:0; }
  .ac-table tbody{ display:grid; gap:8px; }
  /* ⚠⚠ 금액을 <오른쪽 기둥>으로 세웠더니 그 칸이 auto 라 제 내용만큼 버티고,
       왼쪽이 24px 로 짓눌려 「카 / 지 / 노」가 됐다. 잔액 줄이 길어서다.
     ★ 기둥을 걷고 <시각과 금액만> 한 줄에 둔다. 구분·내용은 각자 한 줄 전체를
       쓴다 — 쪼갤 칸이 없으면 쪼개질 일도 없다. */
  /* ★★ <칸을 나누지 않는다> (레드 2026-09-15).

       금액을 오른쪽 기둥으로 세우면 그 칸이 잔액 두 줄을 품고 있어
       네 줄로 접히고, 왼쪽은 그만큼 눌려 글자가 쪼개진다.
       393px 에서는 나눌 폭이 없다 — <위에서 아래로> 쌓는다.

         1줄  시각 · 구분        (왼쪽)
         2줄  상세              (왼쪽, 없으면 안 그린다)
         3줄  금액 · 잔액        (오른쪽 정렬, 한 칸 전체를 쓴다)

     ★ 금액만 오른쪽으로 민다. 줄을 훑을 때 숫자가 한 줄로 서야
       「얼마가 오갔나」가 바로 보인다. */
  .ac-table tr{
    display:grid;
    /* ⚠ 시각과 구분을 <같은 줄>에 둔다. display:inline 은 안 먹는다 —
         grid 자식은 블록으로 바뀌어 각자 한 줄을 차지한다(실측 @12 / @38).
         칸을 둘로 나누고 영역으로 앉히는 것이 유일하게 확실하다. */
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"at kind" "dtl dtl" "amt amt";
    gap:2px 6px; align-items:baseline;
    padding:12px 14px; border-radius:var(--r);
    background:var(--surface-2);
  }
  .ac-table td{ display:block; padding:0; border:0; background:none; border-radius:0; min-width:0; }
  .ac-table td{ font-size:var(--fs-xs); }
  .ac-table td:nth-child(1){ grid-area:at; color:var(--text-5); white-space:nowrap; }
  .ac-table td:nth-child(2){
    grid-area:kind; font-weight:800; color:var(--text-2);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .ac-table td:nth-child(2)::before{ content:"· "; color:var(--text-6); font-weight:400; }
  .ac-table td:nth-child(3){ grid-area:dtl; font-size:var(--fs-sm); color:var(--text-4); }
  /* 내용이 비면 줄을 안 만든다 — 구분과 같은 말이던 건이다 */
  .ac-table td:nth-child(3):empty{ display:none; }
  /* 금액은 <한 칸 전체>를 쓰고 오른쪽으로 민다. 기둥으로 세우면 잔액 두 줄이
     네 줄로 접히고 왼쪽이 눌린다 — 393px 에서는 나눌 폭이 없다. */
  .ac-table td:nth-child(4){ grid-area:amt; text-align:right; margin-top:4px; }
}

/* ═══════════════════════════════════════════════════════════════════
   보안 탭 — 2단계 인증 · 출금 주소   (2026-08-31)

   ★ 코드 입력과 주소 목록만 새로 온다. 나머지는 위의 .ac-* 를 그대로 쓴다 —
     같은 화면인데 모양이 달라지면 탭을 옮긴 것이 아니라 다른 화면으로 보인다.
   ═══════════════════════════════════════════════════════════════════ */

.ac-panel__title--sub{ margin-top:28px; }

/* 코드 단계 — 켜기·끄기 둘 다 여기를 지난다 */
.ac-code{
  margin-top:14px; padding:16px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
}
.ac-code__lead{ margin:0 0 10px; font-size:var(--fs-sm); color:var(--text-3); }
.ac-code__row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ac-code__row input{
  width:9rem; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-1);
  color:var(--text); font-size:var(--fs-lg);
  /* 코드는 여섯 자리 숫자다. 자릿수를 세기 쉽게 넓게 벌린다 */
  letter-spacing:.28em; text-align:center; font-variant-numeric:tabular-nums;
}

.ac-note{ margin:10px 0 0; font-size:var(--fs-sm); color:var(--text-3); }
.ac-note--bad{ color:var(--danger); }

/* 출금 주소 */
.ac-addr{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.ac-addr__row{
  display:grid; gap:8px 12px; align-items:center;
  grid-template-columns:7rem 1fr auto;
  padding:12px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
}
.ac-addr__coin strong{ display:block; font-size:var(--fs-base); }
.ac-addr__net{ display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--text-5); }
.ac-addr__row input{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-1);
  color:var(--text); font-size:var(--fs-sm);
  /* 주소는 길고 비슷하게 생겼다. 고정폭이라야 회원이 눈으로 대조할 수 있다 */
  font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.ac-addr__hint,
.ac-addr__row .ac-note{ grid-column:1 / -1; margin:0; font-size:var(--fs-xs); }
.ac-addr__hint{ color:var(--text-5); }

/*
  주소 줄 안에 붙는 코드 칸.

  ★ 모달로 띄우지 않는다. 코인이 여덟 개인 화면에서 모달이 뜨면
    회원은 <어느 주소를 바꾸는 중이었는지>를 잃는다.
  ★ 한 줄을 통째로 차지하게 둔다 — 저장 단추 옆에 끼우면 주소 칸이 글자 몇 개로 줄어든다.
*/
.ac-code--inline{ grid-column:1 / -1; margin-top:4px; padding:12px; }
/*
  ⚠ 주소 칸 규칙(.ac-addr__row input)이 여기까지 따라온다 — 코드 칸이 <주소처럼>
    전체 폭에 고정폭 글꼴로 그려진다. 여섯 자리 숫자는 그렇게 생기면 안 된다.
*/
.ac-code--inline .ac-code__row input{
  width:9rem; font-family:inherit; font-size:var(--fs-lg);
  letter-spacing:.28em; text-align:center;
}
@media (max-width:640px){
  .ac-code--inline .ac-code__row input{ width:100%; }
}

@media (max-width:640px){
  /* 좁은 화면에서 세 칸을 우겨넣으면 주소 칸이 글자 몇 개로 줄어든다 */
  .ac-addr__row{ grid-template-columns:1fr; }
  .ac-code__row input{ width:100%; }
}


/* ==========================================================================
   거래내역 — 배팅 상세 (레드 2026-09-14)
   ========================================================================== */

/*
  ★ 줄 안에 앉는 작은 단추다. 내용 글자와 같은 줄에 서야 「이 줄의 상세」로 읽힌다 —
    칸을 새로 만들면 표가 한 칸 넓어지고 좁은 화면에서 금액이 밀린다.
*/
.ac-history__detail{
  margin-left:8px; padding:2px 8px;
  border:1px solid var(--line); border-radius:var(--r-full);
  background:var(--surface-2); color:var(--text-3);
  font-size:var(--fs-xs); line-height:var(--lh-xs); font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:border-color var(--t-color), color var(--t-color), background var(--t-bg);
}
.ac-history__detail:hover{ border-color:var(--primary); color:var(--text); background:var(--surface-3); }
.ac-history__detail:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* 창 — 지갑 창과 같은 결로 둔다. 회원에게는 같은 「창」이다 */
.ac-modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.62);
}
.ac-modal__box{
  width:min(560px, 100%); max-height:86vh;
  display:flex; flex-direction:column;
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:clip;
}
.ac-modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.ac-modal__head h3{ margin:0; font-size:var(--fs-md); font-weight:900; }
.ac-modal__close{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--text-4); cursor:pointer;
  transition:color var(--t-color);
}
.ac-modal__close:hover{ color:var(--text); }
/* ⚠ 안쪽만 구른다. 창 전체가 구르면 머리글이 따라 올라가 닫기가 사라진다 */
.ac-modal__body{ padding:16px 20px 20px; overflow-y:auto; }
.ac-modal__msg{ margin:0; padding:24px 0; text-align:center; color:var(--text-5); }

/* 엠블럼 — 이름 옆에 붙는 작은 그림. 없으면 아예 안 그린다(화면이 판단) */
.ex-mybet__emblem{
  width:16px; height:16px; margin-right:4px;
  object-fit:contain; vertical-align:-3px;
}
/* 넓은 창 — VIP 등급별 혜택처럼 <표>가 들어가는 자리.
   기본 560 은 8등급 × 11줄 표가 들어가면 첫 칸만 보인다. */
.ac-modal__box--wide{ width:min(880px, 100%); }

/* ==========================================================================
   설정 칸 — 위아래 여백 줄이기 (레드 2026-09-15 「위아래 여백좀 최소화」)

   ★ 고를 것이 둘뿐인 화면이라 판이 성길 필요가 없다. 줄 사이가 넓으면
     스크롤만 길어지고, 모바일에서는 두 줄 보자고 한 화면을 넘긴다.
   ⚠ 칸 안쪽(.ac-row)은 손대지 않는다 — 누르는 넓이라 좁히면 잘못 눌린다.
   ========================================================================== */
@media (max-width:640px){
  .ac-panel{ padding:16px 14px; }
  .ac-panel__title{ margin-bottom:4px; }
  .ac-panel__sub{ margin-bottom:12px; }
  .ac-rows{ gap:8px; }
}

/* ⚠ 「구분」 칸이 좁아 <낱말이 두 줄로 쪼개졌다> (레드 2026-09-17).
     「미니게임 베 / 팅」 · 「출석 리워 / 드」처럼 끊긴다.
   ★ 표는 칸 폭을 <내용 길이>로 정한다. 갈래 이름은 길어야 예닐곱 자라
     그만큼을 미리 잡아 주고 줄바꿈을 막는다. 남는 폭은 「내용」 칸이 가져간다. */
.ac-table td:nth-child(2),
.ac-table th:nth-child(2){
  min-width:132px;
  white-space:nowrap;
}
/* 좁은 화면에서는 줄바꿈을 허용한다 — 가로 스크롤이 생기는 쪽이 더 나쁘다 */
@media (max-width:560px){
  .ac-table td:nth-child(2),
  .ac-table th:nth-child(2){ min-width:0; white-space:normal; }
}

/* ==========================================================================
   마이페이지 — 시안 my.css 를 그대로 옮긴다 (레드 2026-09-26)
   ⚠ 색만 WHALEY 로 — 금색(--gold) 자리에 사파이어(--primary).
   ⚠ 글꼴은 우리 것. Barlow Condensed 는 우리가 안 싣는다.
   ========================================================================== */
/* ==========================================================================
   my — 마이페이지 · 접두어 my-
   회원카드 [나 | 다음 등급 진행 | 다음 등급 혜택] → [사용 중 자산 | 한 줄 메뉴 4개] → 탭 + 날짜별 목록
   금액 · 숫자는 흰색 (금색 글자 금지 — 사용자 요청). 금색은 선 · 버튼 · 진행 막대 · 아이콘에만.
   ========================================================================== */
.my{ --in:#2fd39a; --out:#60a5fa; --card:#0f1528; --well:#0a0f1e; display:grid; gap:14px; padding-top:24px; padding-bottom:60px; }

/* ---- 회원카드 — [회원증] | [진행률 · 출석 · 등급별 혜택 보기 / 내 등급 혜택 6칸] ----
   회원증은 금색을 죽인 어두운 금속판 — 금색은 글자 · 얇은 결에만 */
.my-card{
  display:grid; grid-template-columns:240px minmax(0,1fr) minmax(0,1.25fr); overflow:hidden;
  border-radius:20px; border:1px solid rgba(255,255,255,.07); background:#0c1228;
}
.my-card__plate{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; align-content:space-between; gap:10px; min-height:140px; padding:16px 20px;
  /* ★ 회원증 바탕은 <브랜드 색>이다 (레드 2026-09-26 「앞에 노란색은 우리톤으로」).
     시안은 금빛 갈색(#2b2415…)인데 그것은 SKYCITY 의 금색이다.
   ⚠ --primary 에서 섞어 만든다. 값을 박으면 EX·WHALEY 가 갈리고,
     브랜드 색이 바뀔 때 이 한 줄만 안 따라온다. */
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--primary) 30%, #0a0f1e) 0%,
    color-mix(in srgb, var(--primary) 12%, #070b16) 55%,
    color-mix(in srgb, var(--primary) 24%, #0a0f1e) 100%);
  border-right:1px solid rgba(30,79,168,.16); color:#a9c6f2;
}
/* ⚠⚠ 알파를 시안 값 그대로 베끼면 <안 보인다> (레드 2026-09-26 「배경디자인도 같이」).
     시안의 금색(#fcb826)은 밝아 .035 로도 결이 드러나지만, 우리 사파이어는
     바탕(#0a0f1e)과 명도가 가까워 같은 알파에서 그냥 어둠이 된다.
   ★ color-mix 로 <흰 쪽으로 섞어> 결을 만든다. 브랜드 색은 그대로 따라온다. */
.my-card__plate::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:repeating-linear-gradient(115deg,
    color-mix(in srgb, #dce9ff 9%, transparent) 0 1px, transparent 1px 8px); }
.my-card__plate::after{ content:""; position:absolute; z-index:-1; width:220px; height:220px; right:-100px; top:-110px; border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--primary) 55%, transparent), transparent 65%); }
.my-card__brand{ display:flex; justify-content:space-between; align-items:center; margin:0; font-size:10px; font-weight:800; letter-spacing:.22em; color:color-mix(in srgb, var(--primary) 45%, #cfe0ff); }
.my-card__brand i{ font-style:normal; letter-spacing:0; }
/* ⚠ line-height .8 은 <시안 글꼴(Barlow Condensed)>을 전제한 값이다. 우리 글꼴은
     아래로 더 내려와 「Lv.2」의 밑동이 잘렸다 (레드 2026-09-26 「LV.2 아래짤리는듯」).
   ★ 글자도 한 치수 줄인다 — 시안보다 커 보인다고 했다. */
/* ★ 시안은 「LV.1」 — 등급 이름이 소문자로 와도 화뱴은 대문자로 세운다 */
.my-card__lv{ font-family:var(--font); font-size:44px; text-transform:uppercase; font-weight:800; line-height:1.05; background:linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 20%, #eaf2ff),
    var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* ⚠ flex-end 는 <글자 상자의 밑>을 맞춘다. 두 글자의 크기가 달라 상자 높이도
     달라서, SINCE 가 아이디보다 떠 보였다 (레드 2026-09-26). baseline 이라야
     <글자가 앉은 줄>이 같아진다. */
.my-card__who{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.my-card__nick{ margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font); font-size:19px; font-weight:800; line-height:1.15; color:#dce9ff; }
.my-card__who small{ flex:none; font-size:9px; font-weight:700; color:color-mix(in srgb, var(--primary) 40%, #9fb6d8); }
/* 가운데 — [출석 체크 · 이번 달 · 연속 ›] + 이번 주 월~일 일곱 칸 / [레벨업까지 남은 조건] [등급별 혜택 보기] */
.my-card__info{ display:grid; align-content:center; gap:12px; padding:16px 22px; }
.my-att{ display:grid; gap:8px; color:inherit; }
.my-att__head{ display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:var(--text-3); }
.my-att__head b{ font-size:13px; font-weight:900; color:#fff; }
.my-att__head em{ font-style:normal; font-weight:800; color:#fff; }
.my-att__head svg{ width:11px; height:11px; margin-left:auto; transition:transform .2s; }
.my-att:hover .my-att__head svg{ transform:translateX(2px); color:var(--primary); }
.my-week{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.my-week li{ display:grid; justify-items:center; gap:4px; font-size:10px; color:var(--text-3); }
.my-week i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.14); }
.my-week i svg{ width:13px; height:13px; }
/* ⚠ 사파이어 바탕에 검정 체크는 <안 보인다>. 시안은 금색 바탕이라 검정이 맞았다
     (레드 2026-09-26 「체크 흰색표기 그래야잘보일듯」). */
.my-week .is-on i{ border:0; background:var(--primary); color:#fff; }
.my-week .is-later{ opacity:.4; }
.my-week .is-today span{ font-weight:800; color:var(--primary); }
.my-week .is-today:not(.is-on) i{ border-style:solid; border-color:var(--primary); }
.my-card__lvup{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:10px;
  background:var(--primary); color:#fff; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; transition:filter .2s;
}
.my-card__lvup svg{ width:14px; height:14px; }
.my-card__lvup:hover{ filter:brightness(1.08); }
.my-card__lvup:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.my-card__acts{ display:flex; gap:8px; }
.my-card__go{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:10px;
  border:1px solid rgba(30,79,168,.4); color:var(--primary); font-size:12px; font-weight:700; white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s;
}
.my-card__go svg{ width:12px; height:12px; transition:transform .2s; }
.my-card__go:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }
.my-card__go:hover svg{ transform:translateX(2px); }
.my-card__go:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* 맨 오른쪽 — 친구초대 · 적립 [머리 · 바로가기] / [내 초대 코드 · 복사] / [초대한 친구 · 이번 달 예상 · 적립률] */
.my-card__inv{
  display:grid; align-content:center; gap:12px; padding:16px 22px;
    /* ★ 위에서 아래로 옅어지는 결 (레드 2026-09-26 「그라데이션 위에서 아래 디자인 누락됨」).
       .06 은 사파이어에서 바탕과 구분이 안 돼 <없는 것과 같았다>. */
  border-left:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 16%, transparent), transparent 75%);
}
.my-inv__head{ display:flex; align-items:center; justify-content:space-between; margin:0; }
.my-inv__head b{ font-size:14px; font-weight:900; color:#fff; }
.my-inv__head a{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--primary); }
.my-inv__head a svg{ width:11px; height:11px; transition:transform .2s; }
.my-inv__head a:hover svg{ transform:translateX(2px); }
/* 숫자 — 세 칸 같은 너비, 모두 왼쪽 맞춤 (칸 사이 세로선) */
.my-inv__nums{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0; }
.my-inv__nums div{ min-width:0; padding-left:16px; border-left:1px solid rgba(255,255,255,.06); }
.my-inv__nums div:first-child{ padding-left:0; border-left:0; }
.my-inv__nums dt{ font-size:11px; color:var(--text-3); white-space:nowrap; }
.my-inv__nums dd{ margin:4px 0 0; font-family:var(--font); font-size:22px; font-weight:800; line-height:1; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.my-inv__nums dd.is-gold{ color:var(--primary); }
/* 링크 — [주소 …… ] [내 초대 링크 복사] 한 칸 */
.my-inv__link{ display:flex; align-items:center; gap:10px; margin:0; height:40px; padding:0 5px 0 12px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06); }
.my-inv__link span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--text-3); }
.my-inv__link button{ flex:none; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; border-radius:8px; background:var(--primary); color:#fff; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; transition:filter .2s; }
.my-inv__link button svg{ width:12px; height:12px; }
.my-inv__link button:hover{ filter:brightness(1.08); }
.my-inv__link button[disabled]{ opacity:.55; cursor:default; }

/* ---- 자산 + 한 줄 메뉴 -------------------------------------------------- */
.my-row2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.my-asset{
  position:relative; display:grid; align-content:space-between; gap:14px; padding:20px 22px; border-radius:18px;
  border:1px solid rgba(30,79,168,.22);
  /* ⚠ 시안 금색 .09 를 남색에 그대로 쓰면 <안 보인다> (레드 2026-09-27 「왼쪽 그라데이션 체크」) */
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--primary) 20%, transparent), transparent 50%), var(--card);
}
.my-asset__top{ display:flex; align-items:center; justify-content:space-between; }
.my-asset__cap{ font-size:12px; font-weight:700; color:var(--text-3); }
.my-asset__total{ font-size:13px; color:var(--text-3); }
.my-asset__total b{ margin-left:6px; font-size:17px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.my-asset__pick{ position:relative; }
.my-asset__btn{ display:inline-flex; align-items:center; gap:12px; padding:4px 0; text-align:left; cursor:pointer; }
.my-asset__btn > b{ font-family:var(--font); font-size:44px; font-weight:800; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.my-asset__coin{ width:28px; height:28px; flex:none; }
.my-asset__name{ display:inline-flex; align-items:center; gap:6px; margin-left:4px; height:34px; padding:0 10px 0 14px; border-radius:99px; border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--text); transition:border-color .2s; }
.my-asset__name small{ padding-right:8px; margin-right:2px; border-right:1px solid var(--line); font-size:11px; font-weight:600; color:var(--text-3); }
.my-asset__name svg{ width:14px; height:14px; color:var(--text-3); transition:transform .2s; }
.my-asset__btn:hover .my-asset__name, .my-asset__btn[aria-expanded="true"] .my-asset__name{ border-color:var(--primary); }
.my-asset__btn[aria-expanded="true"] .my-asset__name svg{ transform:rotate(180deg); }
.my-asset__menu{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:320px; display:grid; gap:2px; padding:6px;
  border-radius:14px; border:1px solid var(--line); background:var(--surface-1); box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.my-asset__menu button{ display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; height:42px; padding:0 10px; border-radius:10px; text-align:left; cursor:pointer; }
.my-asset__menu button:hover{ background:var(--surface-2); }
.my-asset__menu button.is-on{ background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(30,79,168,.45); }
.my-asset__menu .my-asset__coin{ width:22px; height:22px; }
.my-asset__menu span{ font-size:13px; font-weight:700; }
.my-asset__menu span small{ margin-left:5px; font-size:11px; font-weight:500; color:var(--text-3); }
.my-asset__menu b{ font-size:13px; color:#fff; font-variant-numeric:tabular-nums; }
.my-asset__btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.my-asset__btns .btn{ height:44px; gap:6px; font-size:14px; }
.my-asset__btns .btn svg{ width:16px; height:16px; }
.my-asset__out{ background:transparent; border:1px solid var(--line); color:#fff; }
.my-asset__out:hover{ border-color:var(--primary); color:var(--primary); }

.my-links{ display:grid; grid-template-rows:repeat(4,1fr); border-radius:18px; border:1px solid var(--line); background:var(--card); overflow:hidden; }
.my-link{ display:grid; grid-template-columns:38px 1fr auto auto; align-items:center; gap:12px; padding:0 18px; min-height:52px; text-align:left; color:var(--text); cursor:pointer; transition:background-color .2s; }
.my-link + .my-link{ border-top:1px solid var(--line); }
.my-link:hover{ background:rgba(30,79,168,.05); }

.my-link__label{ font-size:14px; font-weight:700; }
.my-link__val{ display:inline-flex; align-items:baseline; gap:3px; font-size:18px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.my-link__val small{ font-size:12px; font-weight:600; color:var(--text-3); }
.my-link__dot{ align-self:center; margin-left:6px; padding:1px 6px; border-radius:6px; background:var(--danger); color:#fff; font-size:9px; font-weight:800; font-style:normal; letter-spacing:.04em; }
.my-link__act{ display:inline-flex; align-items:center; gap:2px; min-width:76px; justify-content:flex-end; font-size:12px; color:var(--text-3); transition:color .2s; }
.my-link__act svg{ width:13px; height:13px; transition:transform .2s; }
.my-link:hover .my-link__act{ color:var(--primary); }
.my-link:hover .my-link__act svg{ transform:translateX(2px); }

/* ---- 탭 --------------------------------------------------------------- */
.my-board{ margin-top:6px; border-radius:18px; border:1px solid var(--line); background:var(--card); overflow:hidden; }
.my-tabs{ display:flex; gap:2px; padding:0 14px; border-bottom:1px solid var(--line); }
/* ⚠ 56px 은 시안 값이지만 시안에는 zoom:.9 가 걸려 있어 화면에서는 50px 이다.
     우리는 zoom 이 없으므로 <보이는 크기>를 맞춘다 (레드 2026-09-27 「여백 최소한으로」). */
.my-tabs button, .my-tabs .my-tab{ position:relative; display:inline-flex; align-items:center; gap:7px; height:48px; padding:0 18px; font-size:14px; font-weight:700; color:var(--text-3); cursor:pointer; transition:color .2s; }
.my-tabs button svg, .my-tabs .my-tab svg{ width:16px; height:16px; }
.my-tabs button::after, .my-tabs .my-tab::after{ content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px; background:var(--primary); transform:scaleX(0); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.my-tabs button:hover, .my-tabs .my-tab:hover{ color:var(--text); }
.my-tabs button.is-on, .my-tabs .my-tab.is-on{ color:var(--text); }
.my-tabs button.is-on svg, .my-tabs .my-tab.is-on svg{ color:var(--primary); }
.my-tabs button.is-on::after, .my-tabs .my-tab.is-on::after{ transform:scaleX(1); }
.my-body{ display:grid; gap:12px; padding:12px 18px 16px; }

/* ---- 거르기 ------------------------------------------------------------ */
.my-filter{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.my-chips{ display:flex; gap:2px; padding:3px; border-radius:11px; background:var(--well); border:1px solid var(--line); }
.my-chips button{ height:30px; padding:0 14px; border-radius:8px; font-size:12px; font-weight:700; color:var(--text-3); cursor:pointer; transition:background-color .2s, color .2s; }
.my-chips button:hover{ color:var(--text); }
.my-chips button.is-on{ background:var(--primary); color:#fff; }

.my-pill{ justify-self:end; display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:11px; font-weight:700; background:rgba(255,255,255,.05); color:var(--text-3); white-space:nowrap; }
.my-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.my-pill.is-ok{ background:color-mix(in srgb, var(--in) 12%, transparent); color:var(--in); }
.my-pill.is-wait{ background:rgba(30,79,168,.12); color:var(--primary); }
.my-pill.is-no{ background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
.my-pill.is-miss{ background:rgba(255,255,255,.05); color:var(--text-3); }
.my-more{ justify-self:center; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 24px; border-radius:99px; border:1px solid var(--line); background:var(--well); font-size:13px; font-weight:700; cursor:pointer; transition:border-color .2s; }
.my-more small{ font-size:11px; color:var(--text-3); }
.my-more:hover{ border-color:var(--primary); }
.my-empty{ display:grid; justify-items:center; gap:6px; padding:48px 0; border-radius:14px; border:1px dashed var(--line); text-align:center; }
.my-empty svg{ width:30px; height:30px; color:var(--text-3); }
.my-empty small{ font-size:12px; color:var(--text-3); }

/* ---- 내 정보 · 보안 ---------------------------------------------------- */
.my-panel{ border-radius:14px; border:1px solid var(--line); background:var(--well); overflow:hidden; }
.my-panel + .my-panel{ margin-top:2px; }
.my-panel__h{ display:flex; align-items:center; gap:8px; margin:0; padding:12px 16px; font-size:14px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--line); }
.my-panel__h svg{ width:16px; height:16px; color:var(--primary); }
.my-panel__h small{ margin-left:6px; font-size:12px; font-weight:500; color:var(--text-3); }
.my-panel__foot{ display:flex; justify-content:flex-end; padding:10px 16px; border-top:1px solid var(--line); }
.my-kv{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:54px; padding:0 16px; }
.my-kv + .my-kv{ border-top:1px solid rgba(255,255,255,.05); }
.my-kv > span{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-3); }
.my-kv > span small{ font-size:10px; padding:1px 6px; border-radius:5px; border:1px solid var(--line); }
.my-kv > b{ font-size:14px; color:#fff; min-width:0; }
.my-kv > b i{ font-style:normal; font-weight:500; color:var(--text-3); }
.my-kv code{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; letter-spacing:.02em; }
.my-kv code .is-short{ display:none; }
.my-kv__btn em{ font-style:normal; }
.my-kv > b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-kv__coin{ width:20px; height:20px; }
.my-kv__acts{ display:flex; gap:6px; }
.my-kv__btn{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 14px; border-radius:9px; border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--text); cursor:pointer; transition:border-color .2s, color .2s; }
.my-kv__btn svg{ width:14px; height:14px; }
.my-kv__btn:hover{ border-color:var(--primary); color:var(--primary); }
.my-bank{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) auto; align-items:center; gap:12px; padding:14px 16px; }
.my-bank div{ display:grid; gap:3px; }
.my-bank div + div{ padding-left:14px; border-left:1px solid var(--line); }
.my-bank span{ font-size:11px; color:var(--text-3); }
.my-bank b{ font-size:15px; color:#fff; letter-spacing:.03em; font-variant-numeric:tabular-nums; }

/* ---- 좁은 화면 --------------------------------------------------------- */
/* ---- PC — 큰 판 하나 안에 상자들 (회원카드 · 자산 · 바로가기 · 내역) ----------------
   바깥 판이 한 장으로 감싸고, 안쪽 상자는 한 단계 어두운 면 · 작은 모서리로 들어앉는다 */
@media (min-width:1024px){
  .my{
    gap:12px; margin-top:-16px; margin-bottom:40px; padding:14px;   /* 위 — 페이지 기본 여백 30 에서 16 을 당겨 헤더와 14 만 띄운다 */
    border-radius:26px; border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg, #131b33 0%, #0d1326 100%);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  }
  .my-card{ border-radius:18px; }
  .my-row2{ gap:12px; }
  .my-asset, .my-links, .my-board{ border-radius:16px; border-color:rgba(255,255,255,.06); background-color:#0a1022; }
  .my-links{ background:#0a1022; }
  .my-board{ margin-top:0; }
}

/* 마이페이지 아이콘 — 색 타일(뒷배경) 없이 그림만. 그림을 타일 색으로 칠한다 (다른 화면의 .dt 는 그대로) */
.my .dt{ background:none; box-shadow:none; }
.my .dt::after{ display:none; }
.my .dt svg{ width:26px; height:26px; fill:var(--t1); filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--t2) 45%, transparent)); }
.my .dt svg [stroke="#fff"]{ stroke:var(--t1); }

@media (max-width:1100px){
  .my-card{ grid-template-columns:220px minmax(0,1fr); }
  .my-card__inv{ grid-column:1 / -1; border-left:0; border-top:1px solid rgba(255,255,255,.06); }
}
@media (max-width:860px){
  .my-row2{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .my-asset__btn > b{ font-size:34px; }
  .my-bank{ grid-template-columns:1fr 1fr; }
}

/* 한 줄 메뉴 아이콘 — 타일은 작게 · 그림은 크게 */
.my-link{ grid-template-columns:32px 1fr auto auto; }
.my-link .dt{ width:32px; height:32px; border-radius:9px; }
.my-link .dt svg{ width:24px; height:24px; }


/* ---- 쪽지함 탭 ------------------------------------------------------------ */
.msg-cat{ justify-self:start; display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:6px; font-size:11px; font-weight:800; white-space:nowrap; }
.msg-cat.is-blue{ background:rgba(96,165,250,.14); color:#9cc6ff; }
.msg-cat.is-pink{ background:rgba(255,143,194,.14); color:#ffb0d4; }
.msg-cat.is-gold{ background:rgba(30,79,168,.14); color:#9ec4ff; }
.msg-cat.is-violet{ background:rgba(179,146,255,.16); color:#c9b3ff; }
.msg-cat.is-red{ background:rgba(255,77,79,.14); color:#ff9a9b; }
.msg-cat.is-green{ background:rgba(47,211,154,.14); color:#7ff0c6; }

/* ---- 쿠폰함 탭 ------------------------------------------------------------ */
.cp-dday{ margin-left:6px; padding:1px 7px; border-radius:6px; background:rgba(255,255,255,.06); font-size:11px; font-weight:800; color:var(--text-3); }
.cp-dday.is-soon{ background:rgba(255,77,79,.14); color:#ff9a9b; }
.cp-dday.is-dead{ background:rgba(255,255,255,.04); }
.cp-type{ flex:none; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; }
.cp-type.is-bonus{ background:rgba(179,146,255,.16); color:#c9b3ff; }
.cp-type.is-money{ background:rgba(47,211,154,.14); color:#7ff0c6; }
.cp-strong{ color:#fff; font-weight:700; }
.cp-use{ justify-self:end; height:32px; padding:0 14px; border-radius:9px; background:var(--primary); color:#fff; font-size:12px; font-weight:800; cursor:pointer; transition:filter .2s, transform .2s; }
.cp-use:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ---- 자산 선택 접힘메뉴 (입출금 내역) — 선택칸 밑으로 겹쳐 내려온다 ---------------- */
.my-drop{ position:relative; }
.my-drop__btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 14px; border-radius:11px; border:1px solid var(--line); background:var(--well); cursor:pointer; transition:border-color .2s; }
.my-drop__btn small{ padding-right:8px; border-right:1px solid var(--line); font-size:11px; font-weight:600; color:var(--text-3); }
.my-drop__btn b{ min-width:56px; font-size:13px; color:#fff; text-align:left; }
.my-drop__btn svg{ width:14px; height:14px; color:var(--text-3); transition:transform .2s; }
.my-drop__btn:hover, .my-drop.is-open .my-drop__btn{ border-color:var(--primary); }
.my-drop.is-open .my-drop__btn svg{ transform:rotate(180deg); }
.my-drop__menu{ position:absolute; z-index:20; top:calc(100% + 6px); left:0; min-width:100%; display:grid; gap:2px; padding:6px; border-radius:12px; border:1px solid var(--line); background:var(--surface-1); box-shadow:0 18px 40px rgba(0,0,0,.55); animation:myOpen .2s ease-out; }
.my-drop__menu button{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:36px; padding:0 12px; border-radius:8px; font-size:13px; font-weight:700; color:var(--text-3); text-align:left; cursor:pointer; white-space:nowrap; }
.my-drop__menu button:hover{ background:var(--surface-2); color:var(--text); }
.my-drop__menu button.is-on{ background:rgba(30,79,168,.12); color:#fff; }
.my-drop__menu svg{ width:14px; height:14px; color:var(--primary); }

/* ---- 휴대폰 (1023px 이하) 덧붙임 — 자산 금액과 고르개를 두 줄로, 탭은 스크롤 막대 없이 민다 ---- */
@media (max-width:1023px){
  .my-asset__btn{ flex-wrap:wrap; gap:8px 10px; }
  .my-asset__name{ margin-left:0; white-space:nowrap; }
  .my-asset__name small{ white-space:nowrap; }
  .my-tabs{ overflow-x:auto; scrollbar-width:none; }
  .my-tabs::-webkit-scrollbar{ display:none; }
  /* ⚠ 우리 탭은 <a>(Link) 다 — button 만 겨누므하므 폰에서 글자가 세로로 눈렸다 */
  .my-tabs button, .my-tabs .my-tab{ flex:none; white-space:nowrap; }
  /* 종류 · 기간 칩 — 줄바꿈 대신 옆으로 민다 */
  .my-chips{ max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .my-chips::-webkit-scrollbar{ display:none; }
  .my-chips button{ flex:none; white-space:nowrap; }
}


/* ---- 휴대폰 — 위쪽 요약(등급 카드 · 자산 · 한 줄 메뉴)을 낮게 ---------------------------- */
@media (max-width:1023px){
  /* 회원카드 — [LV.1 | 닉네임 · SINCE ……… 등급별 혜택 보기] / [출석 · 레벨업 조건] / [친구초대 · 적립] */
  .my-card{ position:relative; grid-template-columns:minmax(0,1fr); border-radius:16px; }
  .my-card__plate{ grid-template-columns:auto minmax(0,1fr); align-items:center; align-content:center; gap:14px; min-height:0; height:60px; padding:0 16px; border-right:0; border-bottom:1px solid rgba(30,79,168,.16); }
  .my-card__brand{ display:none; }
  .my-card__lv{ font-size:38px; }
  .my-card__who{ display:grid; justify-content:start; gap:3px; }
  .my-card__nick{ font-size:21px; }
  .my-card__go{ position:absolute; top:14px; right:14px; height:32px; padding:0 10px; font-size:12px; border-color:rgba(30,79,168,.3); background:rgba(12,18,40,.6); }
  /* 가운데 — 출석 머리 · 일곱 칸 / [레벨업까지 남은 조건] (등급별 혜택 보기는 회원증 띠 오른쪽) */
  .my-card__info{ gap:10px; padding:12px 14px; }
  .my-week i{ width:24px; height:24px; }
  .my-card__acts{ display:block; }
  .my-card__lvup{ width:100%; justify-content:center; height:34px; }
  /* 친구초대 · 적립 */
  .my-card__inv{ grid-column:auto; gap:10px; padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.06); }
  .my-inv__head b{ font-size:13px; }
  .my-inv__nums div{ padding-left:10px; }
  .my-inv__nums dd{ font-size:18px; }
  .my-inv__link{ height:38px; }
  .my-inv__link span{ font-size:11px; }
  .my-inv__link button{ height:28px; padding:0 10px; font-size:11px; }
  .my-asset{ gap:8px; padding:14px; }
  .my-asset__btn > b{ font-size:28px; }
  .my-asset__coin{ width:22px; height:22px; }
  .my-links .my-link{ min-height:44px; padding:6px 12px; }
  .my-row2{ gap:10px; }
}

/* ==========================================================================
   아래 탭 목록 — 모든 탭이 같은 틀 (js/my-list.js)
   줄 = [lead(쪽지 ☐)] [한 줄 칸들 .my-cells ……… ⌄] [tail(쿠폰 사용하기)] → 누르면 아래로 상세
   칸 너비는 목록마다 --cols (PC) · --cols-m (휴대폰). 머리줄도 같은 값을 써서 세로 줄이 맞는다
   ========================================================================== */
/* 탭 줄 — 휴대폰에서만 양옆 < > */
.my-tabbar{ display:flex; align-items:stretch; border-bottom:1px solid var(--line); }
.my-tabbar .my-tabs{ position:relative; flex:1; min-width:0; border-bottom:0; }
.my-tabnav{ display:none; }

/* 거르개 — 왼쪽 칩 · 오른쪽 접힘메뉴 */
.my-filter{ flex-wrap:nowrap; }
.my-drops{ display:flex; gap:6px; flex:none; margin-left:auto; }
.my-drops .my-drop__menu{ left:auto; right:0; }

/* 목록 */
.my-list{ border-radius:14px; border:1px solid var(--line); background:var(--well); overflow:hidden; }
.my-list__head, .my-row{ display:flex; flex-wrap:wrap; align-items:center; }
.my-list__head{ height:38px; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--text-3); background:rgba(255,255,255,.025); border-bottom:1px solid var(--line); }
.my-rows{ display:grid; }
.my-row + .my-row{ border-top:1px solid rgba(255,255,255,.05); }
.my-row{ transition:background-color .2s; }
.my-row:hover{ background:rgba(255,255,255,.02); }
.my-row.is-open{ background:rgba(30,79,168,.035); }
.my-row.is-dead{ opacity:.55; }
.my-row__hit{ flex:1 1 0; min-width:0; display:flex; align-items:center; min-height:52px; padding:0 18px; text-align:left; cursor:pointer; }
.my-list__head > .my-cells{ padding:0 18px; }
.my-lead + .my-row__hit, .my-lead + .my-cells{ padding-left:8px; }
.my-row__hit:has(+ .my-tail){ padding-right:10px; }
.my-cells{ flex:1; min-width:0; display:grid; grid-template-columns:var(--cols); align-items:center; gap:16px; }
.my-lead{ flex:none; display:flex; align-items:center; padding-left:18px; }
.my-list__head > .my-lead{ width:44px; }
.my-tail, .my-tail-sp{ flex:none; display:flex; justify-content:flex-end; width:96px; padding-right:18px; }

/* 칸 */
.my-asset-tag{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px 0 4px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; }
.my-asset-tag svg{ width:15px; height:15px; }
.my-asset-tag.is-cash{ background:rgba(30,79,168,.1); color:#9ec4ff; }
.my-asset-tag.is-coin{ background:rgba(96,165,250,.12); color:#9cc6ff; }
.my-kind{ padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.06); font-size:11px; font-weight:700; color:var(--text-3); }
.my-kind.is-comp{ background:rgba(179,146,255,.14); color:#c9b3ff; }
.my-kind.is-point{ background:rgba(30,79,168,.12); color:#9ec4ff; }
.my-when{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.my-when i{ font-style:normal; }
.my-when span{ margin-left:4px; font-weight:500; color:var(--text-3); }
.my-c-type{ display:flex; align-items:center; gap:7px; min-width:0; font-size:14px; color:#fff; white-space:nowrap; }
.my-c-type > span{ flex:none; }
.my-c-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#fff; }
.my-c-desc{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--text-3); }
.my-c-desc em{ font-style:normal; color:var(--danger); }
.my-c-num{ text-align:right; white-space:nowrap; font-size:14px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.my-c-num i{ font-style:normal; }
.my-c-num.is-dim{ color:var(--text-3); font-weight:600; }
.my-c-bal{ text-align:right; white-space:nowrap; font-size:13px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.my-c-state{ justify-self:end; font-size:12px; color:var(--text-3); }
.my-c-state i{ display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--danger); color:#fff; font-size:10px; font-weight:900; font-style:normal; }
.my-pill i{ font-style:normal; }
.my-kind{ justify-self:start; white-space:nowrap; }
.cp-type, .cp-dday, .msg-cat{ justify-self:start; }
.cp-dday{ margin:0; }
.my-chev{ justify-self:end; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; border:1px solid var(--line); color:var(--text-3); transition:transform .25s, border-color .2s, color .2s; }
.my-chev svg{ width:13px; height:13px; }
.my-row__hit:hover .my-chev{ border-color:var(--primary); color:var(--primary); }
.my-row.is-open .my-chev{ transform:rotate(180deg); border-color:var(--primary); color:var(--primary); }
/* 베팅 탭 줄 끝 「상세」 — ⌄ 자리(56px)에 선다. 모양은 ⌄ 와 같은 테두리 결 (레드 2026-09-27 「상세 버튼 오른쪽 끝 · 전부 상세 모달」) */
.my-detail-btn{ justify-self:end; height:28px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:none; color:var(--text-3); font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; transition:border-color .2s, color .2s; }
.my-row__hit:hover .my-detail-btn, .my-detail-btn:hover{ border-color:var(--primary); color:var(--primary); }
.my-detail-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* 상세 창 안의 한 판 표 — 줄 아래 펼침(.my-detail)과 같은 칸 모양을 창 안에서 쓴다. 여백 · 펼침 움직임만 뺀다 */
.my-detail.is-modal{ margin:0; animation:none; }
.my-row.is-unread .my-c-title{ font-weight:800; }
.my-row:not(.is-unread) .my-c-title{ font-weight:600; }
.is-msg .my-row:not(.is-unread) .my-c-title{ color:var(--text-3); }
.my-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; word-break:break-all; }

/* 상세 — 줄 아래 한 판 */
.my-detail{ flex-basis:100%; display:grid; gap:10px; margin:0 18px 14px; padding:12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); animation:myOpen .25s ease-out; }
/* ⚠ auto-fill 은 <빈 칸을 남긴다> — 시안은 칸이 여섯이라 꽉 찼지만 우리는 넷이라
     오른쪽이 비었다 (레드 2026-09-27 「가로 100% 사용하기」). auto-fit 은 남는 칸을 접는다. */
.my-detail dl{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:6px; margin:0; }
.my-detail dl div{ display:grid; gap:3px; min-width:0; padding:7px 10px; border-radius:8px; background:rgba(0,0,0,.2); }
.my-detail dt{ font-size:11px; color:var(--text-3); }
.my-detail dd{ margin:0; font-size:13px; font-weight:700; color:#fff; overflow-wrap:anywhere; }
.my-detail dd em{ font-style:normal; color:var(--danger); }
@keyframes myOpen{ from{ opacity:0; transform:translateY(-4px); } }
/* 스포츠 베팅 — 고른 경기 한 줄씩 */
.my-picks{ display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.my-picks li{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 48px 70px; align-items:center; gap:12px; padding:8px 10px; border-radius:8px; background:rgba(0,0,0,.2); font-size:13px; }
.my-picks__game{ display:grid; min-width:0; color:#fff; font-weight:700; }
.my-picks__game small{ font-size:11px; font-weight:500; color:var(--text-3); }
.my-picks__game > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-picks__game i{ font-style:normal; color:var(--text-3); font-weight:500; }
.my-picks__pick{ min-width:0; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-picks__pick b{ color:#fff; }
.my-picks__odds{ text-align:right; color:#fff; font-variant-numeric:tabular-nums; }
/* 쪽지 내용 */
.msg-body{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:16px 18px; }
.msg-body p{ margin:0; font-size:14px; line-height:1.8; color:var(--text); word-break:keep-all; }
.msg-body__go{ flex:none; gap:4px; height:38px; padding:0 16px; font-size:13px; }
.msg-body__go svg{ width:13px; height:13px; }

/* 목록마다 칸 너비 (PC) — 마지막 26px 는 ⌄ */
.my-list.is-money{ --cols:150px 150px minmax(0,1fr) 130px 88px 26px; }
.my-list.is-point{ --cols:150px 170px minmax(0,1fr) 110px 110px 26px; }
.my-list.is-bet{ --cols:150px 64px minmax(0,1fr) 110px 110px 76px 26px; }
.my-list.is-coupon.is-held{ --cols:minmax(0,1.2fr) 70px minmax(0,1fr) 64px 90px 26px; }
.my-list.is-coupon.is-using, .my-list.is-coupon.is-used{ --cols:150px minmax(0,1fr) minmax(0,1fr) 110px 100px 26px; }
.my-list.is-msg{ --cols:64px minmax(0,1fr) 150px 40px 26px; }
.my-list:is(.is-money, .is-point, .is-coupon) .my-list__head .my-cells > span:is(:nth-child(4), :nth-child(5)),
.my-list.is-bet .my-list__head .my-cells > span:is(:nth-child(4), :nth-child(5), :nth-child(6)),
.my-list.is-msg .my-list__head .my-cells > span:nth-child(4){ text-align:right; }
.my-list.is-coupon.is-held .my-list__head .my-cells > span:nth-child(4){ text-align:left; }

/* ---- 휴대폰 (1023px 이하) — 모든 목록을 한 줄로 ----------------------------------------
   해는 빼고(09.25 13:00) · ₩ 빼고 · 상태는 '완료' 로 줄이고 · ⌄ 는 숨긴다 (줄 전체가 누르는 곳)
   잔액 · 설명 · 당첨금처럼 한 줄에 못 넣는 것은 상세에서 본다 */
@media (max-width:1023px){
  .my-tabnav{ flex:none; display:grid; place-items:center; width:30px; color:var(--text-3); background:var(--card); }
  .my-tabnav svg{ width:14px; height:14px; }
  .my-tabnav:disabled{ opacity:.25; pointer-events:none; }
  .my-tabbar .my-tabs{ padding:0; }

  .my-filter{ gap:6px; }
  .my-filter > .my-chips{ flex:0 1 auto; min-width:0; }
  .my-drop__btn{ height:36px; gap:6px; padding:0 8px 0 10px; }
  .my-drop__btn small{ display:none; }
  .my-drop__btn b{ min-width:0; font-size:12px; }

  .my-list__head{ display:none; }
  .my-row__hit{ min-height:44px; padding:0 10px; }
  .my-lead{ padding-left:10px; }
  .my-lead + .my-row__hit{ padding-left:8px; }
  .my-tail{ width:auto; padding-right:10px; }
  .my-cells{ grid-template-columns:var(--cols-m); gap:6px; }
  .my-chev{ display:none; }
  /* 휴대폰은 줄 전체가 누르는 곳이라 「상세」 단추와 빈 자리를 함께 숨긴다 — 하나만 남으면 칸이 여섯이 되어 줄이 두 겹으로 접힌다 */
  .my-detail-btn, .my-detail-gap{ display:none; }
  /* 상세 창 안 표는 두 칸씩 — 폭(279)이 150 두 개에 못 미쳐 한 칸씩 일곱 줄로 늘어졌다 */
  .my-detail.is-modal dl{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .my-when{ font-size:11px; font-weight:500; color:var(--text-3); }
  .my-when i{ display:none; }
  .my-when span{ margin-left:3px; }
  .my-c-type{ gap:4px; font-size:12px; }
  .my-c-title{ font-size:13px; }
  .my-c-desc{ font-size:11px; }
  .my-c-num{ font-size:12px; }
  .my-c-num i{ display:none; }
  .my-asset-tag{ height:18px; gap:3px; padding:0 6px 0 3px; font-size:10px; white-space:nowrap; }
  .my-filter .my-chips button{ padding:0 10px; }
  .my-asset-tag svg{ width:12px; height:12px; }
  .my-kind, .cp-type, .cp-dday, .msg-cat{ padding:1px 6px; font-size:10px; }
  .msg-cat{ height:18px; }
  .my-pill{ padding:2px 7px; font-size:10px; gap:0; }
  .my-pill::before{ display:none; }
  .my-pill i{ display:none; }
  .my-c-bal, .my-list.is-bet .my-c-win, .my-list.is-coupon .my-c-desc{ display:none; }
  .cp-use{ height:26px; padding:0 10px; font-size:11px; }
  .my-c-state i{ width:16px; height:16px; font-size:9px; }

  .my-list.is-money{ --cols-m:auto auto minmax(0,1fr) auto auto; }
  .my-list.is-point{ --cols-m:auto auto minmax(0,1fr) auto; }
  .my-list.is-bet{ --cols-m:auto auto minmax(0,1fr) auto auto; }
  .my-list.is-coupon.is-held{ --cols-m:minmax(0,1fr) auto auto auto; }
  .my-list.is-coupon.is-using, .my-list.is-coupon.is-used{ --cols-m:auto minmax(0,1fr) auto auto; }
  .my-list.is-msg{ --cols-m:auto minmax(0,1fr) auto 16px; }
  .my-list.is-msg .my-when span{ display:none; }   /* 쪽지는 날짜만 */

  .my-body{ grid-template-columns:minmax(0,1fr); gap:10px; padding:10px; }
  .my-row__hit{ padding:0 8px; }
  /* 상세 — 휴대폰은 [이름 ····· 값] 한 줄씩 (상자 두 칸보다 세로가 짧다) */
  .my-detail{ margin:0 8px 8px; padding:4px 10px; gap:6px; }
  .my-detail dl{ grid-template-columns:minmax(0,1fr); gap:0; }
  .my-detail dl div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; border-radius:0; background:none; }
  .my-detail dl div + div{ border-top:1px solid rgba(255,255,255,.05); }
  .my-detail dt{ flex:none; }
  .my-detail dd{ min-width:0; text-align:right; font-size:12px; }
  .my-detail .my-picks{ padding-bottom:6px; }
  .my-picks li{ grid-template-columns:minmax(0,1fr) auto auto; gap:4px 8px; }
  .my-picks__pick{ grid-column:1; grid-row:2; font-size:12px; }
  .my-picks__odds{ grid-row:1 / 3; grid-column:2; }
  .my-picks li > .my-pill{ grid-row:1 / 3; grid-column:3; }
  .msg-body{ flex-direction:column; align-items:stretch; gap:12px; padding:12px; }
  .msg-body p{ font-size:13px; line-height:1.7; }

  .my-c-state.is-read{ visibility:hidden; }   /* 휴대폰은 안 읽은 쪽지에만 N 점 */
}

/* ---- 휴대폰 — 내 정보 · 보안도 한 줄 [이름 | 값 ……… 버튼] (이름을 윗줄로 올리지 않는다) ---- */
@media (max-width:1023px){
  .my-kv{ grid-template-columns:64px minmax(0,1fr) auto; gap:10px; min-height:46px; padding:0 12px; }
  .my-kv > span{ font-size:12px; }
  .my-kv > b{ font-size:13px; }
  .my-kv__btn{ height:28px; padding:0 10px; font-size:11px; }
  .my-kv.is-addr{ grid-template-columns:auto minmax(0,1fr) auto; }
  .my-kv.is-addr > span:first-child{ gap:5px; }
  .my-kv.is-addr > span:first-child small{ display:none; }
  .my-kv__coin{ width:18px; height:18px; }
  .my-kv code{ font-size:12px; }
  .my-kv code .is-full{ display:none; }
  .my-kv code .is-short{ display:inline; }
  .my-kv__acts{ gap:4px; }
  .my-kv__btn em{ display:none; }                 /* '변경 요청' → '변경' · 복사는 그림만 */
  .my-kv__btn.is-copy{ width:28px; padding:0; justify-content:center; }
  .my-panel__h{ padding:10px 12px; font-size:13px; white-space:nowrap; }
  .my-panel__h small{ display:none; }
  /* 출금 계좌 — [은행] [예금주] [계좌번호] [변경] 한 줄 */
  .my-bank{ grid-template-columns:auto auto minmax(0,1fr) auto; gap:10px; padding:10px 12px; }
  .my-bank div + div{ padding-left:10px; }
  .my-bank b{ font-size:13px; white-space:nowrap; }
  .my-bank > .my-kv__btn em{ display:none; }
}

/* 동그란 색 아이콘 — 시안 components.css 의 색 변형. `.my .dt svg` 와 짝이다 */
.dt--gold{ --t1:#ffd66b; --t2:#e09a0b; }
.dt--green{ --t1:#4fe3ae; --t2:#0e9f6e; }
.dt--blue{ --t1:#6aa9ff; --t2:#2f5fe0; }
.dt--pink{ --t1:#ff8fc2; --t2:#d9366f; }
.dt--violet{ --t1:#b392ff; --t2:#6d3fe0; }
.dt--teal{ --t1:#5ee0e0; --t2:#138b9e; }

/* ==========================================================================
   내 정보 · 보안 · 설정의 줄 묶음 — 시안 .my-panel 모양 (레드 2026-09-26)
   둥근 판에 테두리 · 바탕. 전에는 바탕이 없어 줄이 허공에 떠 있었다.
   ========================================================================== */
.ac-rows{
  border-radius:14px; border:1px solid var(--line); background:var(--surface-1);
  overflow:hidden;
}
.ac-rows + .ac-rows{ margin-top:12px; }
/* ⚠ 줄 사이 선은 <판 안에서만> 긋는다. 첫 줄 위에 그으면 테두리와 겹쳐 두 겹이 된다 */
.ac-rows > .ac-row{ padding-left:16px; padding-right:16px; }
.ac-rows > .ac-row + .ac-row{ border-top:1px solid rgba(255,255,255,.05); }

/* ==========================================================================
   레벨업까지 남은 조건 — 가운데 창 (레드 2026-09-26 「모달이렇게뜸」)

   ⚠ 겹창 껍데기(.pg-overlay · .pg-dialog)는 pages.css 것을 그대로 쓴다.
     여기서 다시 그리면 회원이 이미 본 창과 <다른 창>이 되어, 같은 사이트에
     창이 두 벌 있는 것처럼 읽힌다.
   ========================================================================== */
.my-lvup{ position:relative; width:100%; max-width:420px; text-align:left; }
.my-lvup h3{ margin:0 0 8px; font-size:17px; font-weight:900; color:#fff; }
.my-lvup > p{ margin:0 0 14px; font-size:13px; color:var(--text-3); }
.my-lvup__rows{ display:grid; margin:0 0 16px; border-radius:12px; background:var(--surface-2, rgba(0,0,0,.24)); }
.my-lvup__rows > div{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06);
}
.my-lvup__rows > div:last-child{ border-bottom:0; }
.my-lvup__rows dt{ font-size:12px; color:var(--text-3); }
.my-lvup__rows dd{ margin:0; font-size:13px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.my-lvup__rows dd.is-gold{ color:var(--primary); }

/* ── 레벨업 창 — 시안 결로 (레드 2026-09-26 「디자인좀 보고하자」) ──
   ⚠ .pg-dialog 는 가운데 정렬이다. 시안 창은 <왼쪽부터> 읽히므로 덮어쓴다. */
.pg-dialog.my-lvup{ text-align:left; }
.my-lvup::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px;
  border-radius:0 4px 4px 0; background:var(--primary);
}
.pg-dialog.my-lvup h3{ font-size:16px; }
.pg-dialog.my-lvup > p{ font-size:12px; }
.my-lvup__rows > div{ padding:11px 14px; }
.my-lvup__rows dt{ display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.my-lvup__rows dt svg{ width:13px; height:13px; color:var(--text-4); }
.my-lvup__rows .is-met dt{ color:#cfe0ff; }
.my-lvup__rows .is-met dt svg{ color:var(--primary); }
.my-lvup__rows dd{ font-size:12px; }
/* ★ 확인 단추는 <브랜드 색>이다. btn--cta 는 흰 바탕이라 시안의 금색 자리와 결이 다르다 */
.my-lvup .pg-dialog__actions .btn{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ── 사용 중 자산 · 한 줄 메뉴 마무리 (레드 2026-09-27) ── */
/* ⚠ btn--cta 는 <흰 알약>이다. 시안의 입금 자리는 브랜드색이다 */
.my-asset__btns .btn--cta{ background:var(--primary); border:0; box-shadow:none; color:#fff; }
.my-asset__btns .btn--cta:hover{ filter:brightness(1.08); }
/* 출금 — 테두리가 없어 글자만 떠 있었다 */
.my-asset__out{ border:1px solid var(--line); background:transparent; color:#fff; }
/* ⚠ 아이콘 칸이 줄 위쪽에 붙어 보였다 — 그림만 그리는 .dt 라 높이가 글자만큼이다 */
.my-links .my-link .dt{ display:grid; place-items:center; align-self:center; height:100%; }
/* 고르개 목록은 이제 <단추>다. 링크와 같은 결로 보여야 한다 */
.my-asset__menu button{ width:100%; text-align:left; background:none; border:0; cursor:pointer; font:inherit; color:inherit; }

/* ── 무료스핀 탭 — 시안 쿠폰함 자리 (레드 2026-09-27) ──
   ⚠ 줄 칸은 [개수][받은 까닭][사용 기한] 셋이다. 내역 탭(다섯 칸)과 --cols 가 다르다 */
.my-spin__sum{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px;
  padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--well);
}
.my-spin__sum span{ font-size:12px; color:var(--text-3); }
.my-spin__sum b{ font-family:var(--font); font-size:24px; font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; }
.my-list.is-spin{ --cols:120px minmax(0,1fr) 140px; }

/* ==========================================================================
   체크 상자 · 도구줄 — 시안 components.css (2026-09-27 옮김)

   [☐ 전체 선택] [선택 삭제] [전체 삭제] ……… [모두 읽음]
   ⚠ 시안의 --gold 는 우리 --primary 다. 체크 안 글자는 사파이어 위에서
     검정이 안 읽혀 흰색으로 둔다.
   ========================================================================== */
.chk{ position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.chk input{ position:absolute; opacity:0; width:1px; height:1px; }
.chk > i{ flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line); background:transparent; color:transparent; transition:background-color .15s, border-color .15s; }
.chk > i svg{ width:12px; height:12px; }
.chk:hover > i{ border-color:var(--primary); }
.chk input:checked + i{ background:var(--primary); border-color:var(--primary); color:#fff; }
.chk input:focus-visible + i{ outline:2px solid var(--primary); outline-offset:2px; }

.sel-tools{ display:flex; align-items:center; gap:6px; }
.sel-tools__all{ margin-right:6px; padding-left:18px; font-size:12px; font-weight:700; color:var(--text-3); white-space:nowrap; }
.sel-tools__all b{ color:var(--primary); }
.sel-tools__btn{ display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--well, rgba(0,0,0,.2)); font-size:12px; font-weight:700; color:var(--text-3); white-space:nowrap; cursor:pointer; transition:border-color .2s, color .2s; }
.sel-tools__btn svg{ width:13px; height:13px; }
.sel-tools__btn:hover{ color:var(--text); border-color:var(--line); }
.sel-tools__btn.is-del:hover{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 50%, transparent); }
.sel-tools__btn.is-end{ margin-left:auto; }
.sel-tools__btn:disabled{ opacity:.4; pointer-events:none; }
@media (max-width:1023px){
  .sel-tools{ gap:4px; }
  .sel-tools__all{ padding-left:4px; margin-right:2px; }
  .sel-tools__btn{ height:28px; padding:0 8px; font-size:11px; }
  .sel-tools__btn.is-end svg{ display:none; }
}
.my-list.is-msg{ --cols:64px minmax(0,1fr) 150px 40px 26px; }


/* ── 내 정보 · 보안 — 시안에 없는 우리 두 조각 (2026-09-27) ─────────────────────
   ① .my-ask       「변경 요청」 안내 창 (시안은 alert 이라 모양이 없다)
   ② .my-addr-edit 주소 편집칸 — 시안은 안내뿐이지만 우리는 직접 저장할 수 있다
   ⚠ 클래스 이름을 my- 로 맞춘다. ac- 를 쓰면 옛 규칙과 섞여 여백이 두 겹이 된다 */

.my-ask{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:rgba(3,7,18,.72); backdrop-filter:blur(3px); animation:myOpen .18s ease-out; }
.my-ask__box{ width:min(420px,100%); display:grid; gap:10px; padding:20px; border-radius:16px; border:1px solid var(--line-strong); background:var(--surface); box-shadow:0 30px 60px -20px rgba(0,0,0,.7); }
.my-ask__box h4{ margin:0; font-size:16px; font-weight:800; color:var(--text); }
.my-ask__box p{ margin:0; font-size:13px; line-height:1.65; color:var(--text-sub); }
.my-ask__acts{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.my-ask__acts .btn{ height:38px; padding:0 14px; font-size:13px; }

.my-addr-edit{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:0 14px 12px; }
.my-addr-edit input{ height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--well); font-size:13px; color:var(--text); }
.my-addr-edit input:focus{ outline:none; border-color:var(--primary); }
.my-addr-edit .btn{ height:40px; padding:0 16px; font-size:13px; }
.my-addr-edit .ac-note{ grid-column:1 / -1; margin:0; }

@media (max-width:1023px){
  .my-addr-edit{ grid-template-columns:minmax(0,1fr); padding:0 12px 10px; }
  .my-ask__box{ padding:16px; }
}

/* ── 무료스핀 탭 — 지급·사용 한 표 (레드 2026-09-27) ────────────────────────
   다른 탭과 같은 .my-list 부품을 쓰므로 폰 규칙이 그대로 따라온다.
   여기서는 <이 표에만 있는 칸> 둘만 더한다. */
.my-list.is-spin .my-c-no{ font-size:12px; font-weight:700; color:var(--text-3); }
.my-list.is-spin .my-kind{ justify-self:start; }
.my-list.is-spin .my-kind.is-grant{ background:rgba(47,211,154,.14); color:#7ff0c6; }
.my-list.is-spin .my-kind.is-use{ background:rgba(255,255,255,.06); color:var(--text-sub); }
.my-list.is-spin .my-c-num{ justify-self:end; font-weight:700; }

@media (max-width:1023px){
  /* 폰 — [유형][내역][개수][일시]. 순번과 기한은 뺀다(한 줄에 안 들어간다) */
  .my-list.is-spin .my-cells > *:nth-child(1),
  .my-list.is-spin .my-cells > *:nth-child(2){ display:none; }
}

/* ⚠ 머리도 줄과 <같은 쪽>으로 붙인다 — 「잔여 스핀」은 숫자라 줄이 오른쪽 정렬인데
     머리만 왼쪽이면 두 줄이 어긋나 보인다 (2026-09-27: 머리 1376 / 숫자 1435) */
.my-list.is-spin .my-list__head .my-cells > span:nth-child(5){ text-align:right; }