/* ==========================================================================
   본인 인증 창 (레드 2026-09-14)

   「회원가입시는 1레벨 미인증 상태 지갑 사용 불가 …
     미인증시 회원은 홈화면에 열때마다 인증 안내 띄우기」

   ★ 가입 창(.authmodal)과 <같은 결>이다. 덮개·시트·닫기 단추의 크기와 움직임을
     맞춰 둔다 — 한 사이트에서 창마다 다르게 열리면 고장처럼 보인다.

   ⚠ 이름을 .authmodal 로 같이 쓰지 않는다. 이 창은 <가로가 더 넓고>(갈래 둘이
     나란히 선다) 스크롤이 생긴다. 한 이름을 공유하면 한쪽을 고칠 때
     다른 쪽이 조용히 따라 바뀐다.
   ========================================================================== */

.vmodal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.vmodal__veil {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 15, .72);
  backdrop-filter: blur(2px);
}
.vmodal__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  /* ⚠ 창보다 커지면 <시트 안에서> 구른다. 페이지가 통째로 구르면 덮개가 따라 움직인다 */
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: vmodal-in .16s ease-out;
}
@keyframes vmodal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vmodal__sheet { animation: none; }
}

/* ---- 머리 --------------------------------------------------------------- */
.vmodal__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.vmodal__head b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 900;
}
.vmodal__close {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .06);
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vmodal__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.vmodal__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- 몸 ----------------------------------------------------------------- */
.vmodal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

/* 안내 그림 자리. 전달본은 사진을 쓰지만 우리는 그 그림이 없다 — 색 면으로 대신한다 */
.vmodal__art {
  height: 132px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: var(--r);
  background:
    radial-gradient(120% 140% at 50% 120%, color-mix(in oklab, var(--primary) 42%, transparent), transparent 66%),
    var(--surface-2);
  color: var(--text-2);
  font-size: 56px;
}

.vmodal__title { font-size: var(--fs-xl); font-weight: 900; margin-bottom: 8px; }
.vmodal__lead {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-4);
  margin-bottom: 20px;
}

/* 반려 사유. 다시 낼 수 있게 <무엇이 문제였는지> 남긴다 */
.vmodal__reject {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--auth-error, #E11D3F) 45%, transparent);
  background: color-mix(in srgb, var(--auth-error, #E11D3F) 12%, transparent);
  font-size: var(--fs-sm);
}
.vmodal__reject b { font-weight: 900; }
.vmodal__reject span { color: var(--text-3); }

/* ---- 갈래 고르개 -------------------------------------------------------- */
/* ⚠ 좁아지면 한 줄로 쌓는다. 390px 에서 나란히 두면 설명 글이 두 글자씩 끊긴다 */
.vmodal__kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 520px) {
  .vmodal__kinds { grid-template-columns: 1fr; }
}
.vmodal__kind {
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-3);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.vmodal__kind i { font-size: 20px; color: var(--text-4); }
.vmodal__kind b { font-size: var(--fs-base); font-weight: 900; color: var(--text); }
.vmodal__kind span { font-size: var(--fs-xs); color: var(--text-5); }
.vmodal__kind:hover { border-color: var(--text-5); }
.vmodal__kind.is-on {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  color: var(--text);
}
.vmodal__kind.is-on i { color: var(--primary); }

/* 이미 끝낸 갈래 — 고를 수 없다 (레드 2026-09-17, 캐시 인증 뒤 크립토를 더 하는 길).
   ⚠ 감추지 않는다. 자리가 사라지면 <무엇을 이미 했는지>를 알 수 없다. */
.vmodal__kind:disabled {
  opacity: .55;
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--surface-2);
}
.vmodal__kind:disabled:hover { border-color: var(--line); }
.vmodal__kind.is-done span { color: var(--success); font-weight: 800; }

/* ---- 칸 ----------------------------------------------------------------- */
.vmodal__field { margin-bottom: 14px; }
.vmodal__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-4);
}
.vmodal__label .req { color: var(--auth-error, #E11D3F); margin-left: 4px; }
.vmodal__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color .15s;
}
.vmodal__input:focus { border-color: var(--primary); }
.vmodal__input::placeholder { color: var(--text-5); }
select.vmodal__input { appearance: none; cursor: pointer; }

.vmodal__hint { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-5); }
.vmodal__hint.is-err { color: var(--auth-error, #E11D3F); }

.vmodal__err {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--auth-error, #E11D3F) 45%, transparent);
  background: color-mix(in srgb, var(--auth-error, #E11D3F) 12%, transparent);
  font-size: var(--fs-sm);
}

/* ---- 대기·안내 한 덩이 -------------------------------------------------- */
.vmodal__note { text-align: center; display: grid; gap: 10px; place-items: center; }
.vmodal__note b { font-size: var(--fs-lg, 18px); font-weight: 900; }
.vmodal__note p { font-size: var(--fs-sm); color: var(--text-4); line-height: 1.6; }
.vmodal__note .btn { margin-top: 8px; }
.vmodal__mark {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font-size: 26px;
  color: var(--text-3);
}
.vmodal__mark.is-wait { color: var(--cta); }

/* ==========================================================================
   지갑 창 안의 <잠김> 안내

   ★ 지갑은 <주소로> 열린다(?modal=cashier). 단추만 막으면 주소를 치거나
     옛 링크를 누른 회원에게 그대로 열린다 — 게임 중 잠금과 같은 함정이다.
   ========================================================================== */
.vlock { display: grid; gap: 12px; place-items: center; text-align: center; padding: 28px 20px; }
.vlock b { font-size: var(--fs-lg, 18px); font-weight: 900; }
.vlock p { font-size: var(--fs-sm); color: var(--text-4); line-height: 1.6; max-width: 34ch; }
.vlock .btn { margin-top: 6px; }

/* ==========================================================================
   준비중 덮개 (레드 2026-09-14 「전체 "준비중입니다." blur처리해서 클릭안되게」)

   ★ 뒤 화면은 <그대로 그린다>. 흐릿하게라도 무엇이 올지 보여야
     「준비중」이 되지, 비워 두면 <아직 안 만든 것>으로 읽힌다.

   ⚠ 막는 것은 두 겹이다 — pointer-events 로 누름을, inert 로 탭 키를.
     흐리게만 하는 것은 <가린 것>이지 <막은 것>이 아니다.
     (inert 는 화면 쪽 JSX 가 붙인다. CSS 만으로는 키보드를 못 막는다)
   ========================================================================== */
.prep { position: relative; }

.prep__under {
  filter: blur(5px) saturate(.7);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

/* ⚠ 덮개는 <흐려지면 안 된다>. .prep__under 바깥에 형제로 둔 까닭이다 —
   안에 넣으면 filter 를 같이 받아 글자까지 뭉개진다. */

/* ★★ 글자 <한 줄>만 둔다 (레드 2026-09-14 「페이지 콘텐츠 덮는건 없애줘야지」).

     처음에는 가운데에 동그란 마크를 크게 얹었는데, 그것이 카드를 통째로 가렸다.
     막는 일은 blur 와 pointer-events 가 이미 한다 — 덮개는 <왜 안 눌리는지>만
     말하면 되지 화면을 가릴 까닭이 없다.

   ⚠ 맨 위에 <붙여 둔다>. 가운데로 두면 긴 화면에서 한참 내려가야 보이고,
     짧은 화면에서는 카드 위에 올라앉는다.
   ⚠ 띠 자체는 pointer-events:none 이다. 안 그러면 이 투명한 판이
     뒤를 덮어 <스크롤까지> 막는다. */
.prep__veil {
  position: sticky;
  top: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.prep__veil b {
  padding: 8px 18px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--line);
  font-size: var(--fs-base);
  font-weight: 900;
  color: var(--text-2);
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   카드 안 <선택지 칸만> 준비중 (레드 2026-09-14
   「각 카드별로 이부분만 처리해달라고 다음페이지 못넘어가게」)

   ★ 처음에는 화면을 통째로 흐리게 했다. 그랬더니 카드가 아예 안 읽혀
     「준비중」이 아니라 <고장>으로 보였다. 막아야 하는 것은 <고르는 자리>뿐이고,
     제목·거래량은 그대로 보여야 무엇이 준비중인지 안다.

   ⚠ 링크 자체를 span 으로 바꿔 두었다(화면 쪽). 흐리게 하고 pointer-events 만
     끄면 탭 키로 들어가 엔터를 치면 그대로 넘어간다 — 그 길을 없앴다.
   ========================================================================== */
.mk-opts.is-prep { position: relative; }

/* ⚠ 자식만 흐린다. 칸 자체에 filter 를 걸면 위에 얹은 글자까지 뭉개진다 */
.mk-opts.is-prep > .mk-opt {
  filter: blur(4px) saturate(.7);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

.mk-opts__prep {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
  font-weight: 900;
  color: var(--text-2);
  text-shadow: 0 1px 6px rgba(5, 8, 15, .9);
  pointer-events: none;
}

/* 무료스핀 배너 (2026-09-17). 창 너비에 맞추고 비율을 지킨다 —
   ⚠ height:auto 가 없으면 width·height 속성 때문에 세로가 926 비율로 늘어난다. */
.vmodal__banner{
  display:block; width:100%; height:auto;
  margin:0 0 16px; border-radius:var(--r, 12px);
}