/* ==========================================================================
   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; }
.ac-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  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; }

/* 켜고 끄는 스위치 */
.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-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);
  color:var(--text-1); 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);
  color:var(--text-1); 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; }
}