/* ====================================================================
   알림 — 회원의 주요 활동 (레드 2026-09-13)

   ★ 훑는 화면이다. 거래내역은 금액을 따지는 화면이고 이쪽은
     「무슨 일이 있었나」를 위에서 아래로 훑는다. 그래서 아이콘이 먼저 오고,
     문장이 굵고, 금액은 오른쪽 끝에 한 줄이다.

   ★ 결(tone)에 색을 준다. 기준은 <회원에게 좋은 일인가>지 잔액이 늘었는가가
     아니다 — 출금 완료는 잔액이 줄지만 좋은 일이라 초록이다.
     부호로 색을 정하면 「출금이 완료되었습니다」가 빨갛게 뜬다.

   ⚠ 색은 토큰만 쓴다.
   ==================================================================== */

.noti__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.noti__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: background var(--t-bg), border-color var(--t-bg);
}

/* 갈 곳이 있는 줄만 눌리는 것처럼 보인다.
   ⚠ 없는 줄까지 같은 모양이면 눌러 보고 아무 일도 안 일어난다 = 고장으로 읽힌다 */
.noti__row.is-link:hover {
  background: var(--surface-3);
  border-color: color-mix(in oklab, var(--primary) 45%, var(--line));
}

/* 눌러서 갈 수 있는 줄 — 지금은 관리자 쪽지 하나다 (레드 2026-09-18).
   ★ 화살표가 <눌러 보기 전에> 갈라 준다. 그게 없으면 2026-09-16 에 걷어낸
     「눌렀는데 아무 일도 없다」가 반대 방향으로 돌아온다 —
     이번엔 눌리는 줄을 안 눌러 보고 지나친다. */
.noti__row.is-open { cursor: pointer; }
.noti__row.is-open:hover {
  background: var(--surface-3);
  border-color: color-mix(in oklab, var(--primary) 45%, var(--line));
}
.noti__go { color: var(--text-5); font-size: 12px; flex: none; }
/* 창(팝오버) 안에서는 화살표를 안 쓴다 — 줄이 촘촘해 자리가 없다 */
.notipop__list .noti__go { display: none; }

.noti__ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  font-size: 16px;
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.noti__ico.is-good {
  color: var(--sp-soccer);
  background: color-mix(in oklab, var(--sp-soccer) 14%, var(--surface-3));
  border-color: color-mix(in oklab, var(--sp-soccer) 32%, var(--line));
}
.noti__ico.is-bad {
  color: var(--cta);
  background: color-mix(in oklab, var(--cta) 14%, var(--surface-3));
  border-color: color-mix(in oklab, var(--cta) 32%, var(--line));
}

.noti__main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.noti__title {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text);
}

/* 엔진이 남긴 설명. 길면 한 줄에서 자른다 — 문장이 본체고 이건 곁들이다 */
.noti__desc {
  font-size: var(--fs-xs);
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noti__when { font-size: var(--fs-xs); color: var(--text-5); }

.noti__amt {
  font-size: var(--fs-sm);
  font-weight: 800;
  /* 금액이 줄줄이라 자리를 고정한다 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-3);
}
.noti__amt.is-good { color: var(--sp-soccer); }
.noti__amt.is-bad { color: var(--cta); }

.noti__go { font-size: 12px; color: var(--text-5); }

.noti__more {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}

/* 종의 점 — 안 본 알림이 있다 */
.icon-btn.has-noti { position: relative; }
.icon-btn.has-noti::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--cta);
  /* 바탕과 같은 테두리로 감싸 단추 위에 <떠 있게> 보인다 */
  box-shadow: 0 0 0 2px var(--surface-1);
}

/* ── 토스트 ────────────────────────────────────────────────────────
   ⚠ 헤더 <아래>에 뜬다. 위에 겹치면 로그인 메뉴와 지갑 단추를 덮는다.
   ⚠ 화면을 막지 않는다(pointer-events). 뒤의 단추를 계속 누를 수 있어야 한다. */
.notoast {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 60;
  display: grid;
  gap: 8px;
  /* ⚠ 100vw 는 <스크롤 막대까지> 센다. 폰에서 그만큼 오른쪽으로 삐져나가
       토스트가 화면 밖 2px 에 걸렸다(실측 395 / 393).
     ★ 고정 요소의 % 는 막대를 뺀 폭을 쓴다 — 그쪽으로 잰다. */
  width: min(340px, calc(100% - 36px));
  pointer-events: none;
}

.notoast__item {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: notoast-in .28s ease-out both;
}
.notoast__item.is-good { border-left: 3px solid var(--sp-soccer); }
.notoast__item.is-bad { border-left: 3px solid var(--cta); }
.notoast__item.is-plain { border-left: 3px solid var(--primary); }

.notoast__ico { font-size: 15px; color: var(--text-3); }
.notoast__item.is-good .notoast__ico { color: var(--sp-soccer); }
.notoast__item.is-bad .notoast__ico { color: var(--cta); }

.notoast__body { min-width: 0; display: grid; gap: 2px; }
.notoast__body b {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notoast__amt {
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-4);
}

.notoast__x {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  font-size: 12px;
  color: var(--text-5);
  background: none;
  border: none;
  cursor: pointer;
}
.notoast__x:hover { color: var(--text-2); background: var(--surface-3); }

@keyframes notoast-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

/* 폰에서는 위쪽 가운데. 오른쪽에 붙이면 한 손으로 닫기가 멀다 */
@media (max-width: 640px) {
  .notoast {
    top: 66px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .noti__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; padding: 12px 13px; }
  /* 폰에서는 화살표를 뺀다 — 줄 전체가 눌리므로 없어도 뜻이 통한다 */
  .noti__go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .notoast__item { animation: none; }
}

/* 알림 화면은 정책 화면(.pol)의 머리와 여백을 그대로 쓴다 —
   읽는 화면의 골격이 같아서 두 벌로 두면 한쪽만 손보게 된다.
   여기서는 <목차가 없다>는 것만 다르다. */
.noti .pol__hero { margin-bottom: 16px; }

/* ════════════════════════════════════════════════════════════════════
   알림 창 — 종 옆에 붙는다 (레드 2026-09-13 「팝업식으로 부탁할게 페이지말고」)

   ★ 알림은 <보던 것을 두고 잠깐 확인하는 것>이다. 화면을 옮기면 하던 일을 잃는다.
     전체 목록(/notifications)은 그대로 살아 있고, 창 안의 「더 보기」가 그쪽으로 보낸다.

   ⚠ 창이 헤더 밖으로 나간다. 헤더에 overflow:hidden 이 걸려 있으면 잘린다 —
     지금은 안 걸려 있고, 걸게 되면 여기를 함께 봐야 한다.
   ════════════════════════════════════════════════════════════════════ */
.notipop{ position:relative; }

.notipop__sheet{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:70;
  width:min(380px, calc(100vw - 24px));
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--surface-1);
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  overflow:hidden;
  animation:notipop-in .16s ease-out both;
}

@keyframes notipop-in{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .notipop__sheet{ animation:none; }
}

.notipop__head{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
}
.notipop__head i{ color:var(--primary); }
.notipop__head b{ font-weight:800; color:var(--text); }
.notipop__all{
  margin-left:auto;
  font-size:var(--fs-xs); font-weight:700;
  color:var(--text-4);
  transition:color var(--t-color);
}
.notipop__all:hover{ color:var(--primary); }

/* ⚠ 창 안에서 구른다. 줄이 여섯이라 대개 안 구르지만, 글이 긴 줄이 섞이면 넘친다 */
.notipop__list{
  list-style:none; margin:0; padding:6px;
  display:grid; gap:2px;
  max-height:min(420px, 60vh);
  overflow-y:auto;
}

/* 창 안의 줄은 목록 화면(.noti__row)보다 촘촘하다 — 훑는 자리라서 */
.notipop__list .noti__row{
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px; padding:9px 10px;
  border:none; background:none;
  border-radius:calc(var(--r) - 4px);
}
.notipop__list .noti__row.is-link:hover{ background:var(--surface-2); }
.notipop__list .noti__ico{ width:32px; height:32px; font-size:13px; }
.notipop__list .noti__title{ font-size:var(--fs-sm); }
.notipop__list .noti__desc,
.notipop__list .noti__when{ font-size:11px; }
.notipop__list .noti__amt{ font-size:var(--fs-xs); }

/* ★ 빈 창도 <자리를 지킨다>. 한 줄만 남기면 종을 눌렀을 때 고장으로 보인다 */
.notipop__empty{
  display:grid; justify-items:center; gap:6px;
  padding:34px 18px 38px;
  text-align:center;
}
.notipop__empty i{ font-size:26px; color:var(--text-6, var(--text-5)); opacity:.7; }
.notipop__empty b{ font-size:var(--fs-sm); font-weight:800; color:var(--text-3); }
.notipop__empty span{ font-size:var(--fs-xs); color:var(--text-5); }

/* 폰에서는 화면 폭을 거의 다 쓴다 — 좁은 창에 여섯 줄은 안 읽힌다 */
@media (max-width:520px){
  .notipop__sheet{
    right:auto; left:50%; transform:translateX(-50%);
    width:calc(100vw - 20px);
  }
}

/* 종의 안 본 수 (레드 2026-09-13 「알람확인 안한거있으면 숫자표기해줄래」)

   ★ 점만 있으면 「뭔가 왔다」까지만 알린다. 회원이 알고 싶은 것은 <몇 건인가>다 —
     한 건과 열두 건은 지금 볼지 나중에 볼지를 가른다.

   ⚠ 종 단추 밖으로 나간다. 단추에 overflow:hidden 이 걸리면 잘린다.
   ⚠ 바탕과 같은 색 테두리를 둘러 단추 위에 <떠 있게> 보인다.
     안 두르면 붉은 동그라미가 종에 눌어붙은 것처럼 보인다. */
.notipop__bell{ position:relative; }
.notipop__count{
  position:absolute;
  top:-4px; right:-4px;
  min-width:17px; height:17px;
  padding:0 4px;
  display:grid; place-items:center;
  border-radius:999px;
  /* 숫자를 원 안 정중앙에 — layout.css 의 .badge-count 주석 참고 */
  font-style:normal; line-height:1; font-variant-numeric:tabular-nums;
  /*
   * ⚠⚠ --cta 는 <플래티넘(#D8DEE6)>이다. 붉은색이 아니다.
   *   흰 글자를 얹으면 흰 위에 흰이 된다 — 숫자가 안 읽힌다
   *   (레드 2026-09-13 「숫자가 잘안보이네」).
   *
   * ★ 알림 수는 <붉은 동그라미>다. LIVE 배지와 같은 붉은색을 쓴다 —
   *   「봐야 할 것이 있다」는 뜻이 한눈에 읽혀야 한다.
   */
  background:#E11D3F; color:#fff;
  font-size:10px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--surface-1);
  pointer-events:none;
}

/* ⚠⚠ 폰에서 알림 판이 <화면 밖으로 넘쳤다> (레드 2026-09-17).
     `right:0` 은 <종 단추> 기준이다. PC 는 그 단추가 머리띠 안쪽이라 괜찮은데,
     폰에서는 오른쪽 끝에 붙어 있어 380px 판이 그대로 삐져나간다.
     `width` 의 `100vw - 24px` 도 <판이 화면 왼쪽에서 시작할 때> 이야기라
     오른쪽 끝에서 열리면 여백을 못 지킨다.

   ★ 폰에서는 종 단추를 기준으로 삼지 않고 <화면>에 붙인다. 위치를 fixed 로 두고
     좌우를 직접 잡으면 어느 단추에서 열리든 같은 자리에 선다. */
@media (max-width:640px){
  .notipop__sheet{
    position:fixed;
    top:calc(var(--header-h, 56px) + 8px);
    right:12px;
    left:12px;
    width:auto;
    /* 목록이 길어도 화면을 넘지 않는다 — 넘치면 안에서 구른다 */
    max-height:calc(100vh - var(--header-h, 56px) - 24px);
    display:flex;
    flex-direction:column;
  }
  .notipop__list{ overflow-y:auto; }
}

/* ════════════════════════════════════════════════════════════════════
   선물 창 — 머리글 선물 상자 옆에 붙는 작은 창
   (레드 2026-09-21 · 디자인 핸드오프 whaley-gift-dropdown 으로 다시 짰다)

   ★ 색·크기·여백·모서리·그라데이션은 핸드오프 gift-dropdown.html 의 값을
     <그대로> 옮겼다. 고칠 때는 그 파일부터 본다.
   ★ 이름은 전부 .gift-dd 아래에 둔다. 핸드오프의 .btn · .reward-row 를 그대로 쓰면
     사이트 전역의 같은 이름과 부딪친다.
   ⚠ 창이 헤더 밖으로 나간다. 헤더에 overflow:hidden 이 걸려 있으면 잘린다.
   ════════════════════════════════════════════════════════════════════ */
.giftpop{ position:relative; }

.gift-dd{
  --wh-dd-bg:#081533;
  --wh-divider:rgba(79,140,255,.16);
  --wh-dd-border:rgba(79,140,255,.22);
  --wh-text-1:#eaf4ff;
  --wh-text-2:#8398c2;
  --wh-text-sub:#c9d8f5;       /* 리워드 줄 상태 문구 (그라데이션 위 가독성 — 더 어둡게 하지 말 것) */
  --wh-text-sub-dim:#8fa3cc;   /* 흐림 상태 문구 */
  --wh-text-3:#6a80ab;
  --wh-text-section:#8fa6d4;
  --wh-accent-cyan:#6fe0ff;    /* 포인트 강조 */
  --wh-accent-gold:#ffd36b;    /* 무료스핀 강조 */
  --wh-header-grad:linear-gradient(120deg,#0c2a78 0%,#1450d8 55%,#1e8fe0 100%);
  --wh-btn-pri-grad:linear-gradient(135deg,#2b6bff,#27c3ff);
  --wh-btn-pri-glow:0 4px 16px rgba(39,140,255,.35);
  --wh-radius-dd:18px;
  --wh-radius-row:12px;
  --wh-radius-btn:10px;

  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:70;
  width:420px; max-width:calc(100vw - 16px);
  /* 키가 작은 화면에서는 안에서 구른다 */
  max-height:calc(100vh - var(--header-h, 56px) - 24px);
  overflow-x:hidden; overflow-y:auto;
  background:var(--wh-dd-bg);
  border:1px solid var(--wh-dd-border);
  border-radius:var(--wh-radius-dd);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  color:var(--wh-text-1);
  text-align:left;
  animation:notipop-in .16s ease-out both;
}
.gift-dd *{ box-sizing:border-box; }
.gift-dd p{ margin:0; }

/* ── 머리 ── */
.gift-dd__header{ position:relative; height:96px; padding:20px 20px 0; background:var(--wh-header-grad); overflow:hidden; }
.gift-dd__h-title{ position:relative; z-index:1; font-size:20px; font-weight:800; margin:0 0 4px !important; letter-spacing:-.2px; color:var(--wh-text-1); }
.gift-dd__h-desc{ position:relative; z-index:1; font-size:12px; color:rgba(234,244,255,.78); }
.gift-dd__tail{ position:absolute; right:-6px; top:6px; width:150px; max-width:none; opacity:.9; pointer-events:none; }
.gift-dd__wave{ position:absolute; left:0; bottom:0; width:100%; height:30px; max-width:none; pointer-events:none; }

/* ── 리워드 세 줄 ── */
.gift-dd__rewards{ display:flex; flex-direction:column; gap:8px; padding:12px; }
.gift-dd__row{
  display:flex; align-items:center; gap:12px; padding:12px;
  border:1px solid transparent; border-radius:var(--wh-radius-row);
}
/* 아이콘은 배경 없는 투명 오브젝트 — 박스·배경을 입히지 않는다 */
.gift-dd__icon{ width:44px; height:44px; flex-shrink:0; display:block; }
/* 줄마다 그라데이션 (진 → 연, 왼쪽 → 오른쪽) */
.gift-dd__row--attendance{ background:linear-gradient(90deg,rgba(43,107,255,.55) 0%,rgba(43,107,255,.10) 100%); border-color:rgba(90,150,255,.35); }
.gift-dd__row--spin{ background:linear-gradient(90deg,rgba(138,61,255,.55) 0%,rgba(138,61,255,.10) 100%); border-color:rgba(170,110,255,.35); }
.gift-dd__row--point{ background:linear-gradient(90deg,rgba(25,201,168,.48) 0%,rgba(25,201,168,.08) 100%); border-color:rgba(80,230,200,.30); }
/* 흐림: 그라데이션도 약하게 */
.gift-dd__row--attendance.is-dim{ background:linear-gradient(90deg,rgba(43,107,255,.18) 0%,rgba(43,107,255,.04) 100%); border-color:rgba(90,150,255,.16); }
.gift-dd__row--spin.is-dim{ background:linear-gradient(90deg,rgba(138,61,255,.18) 0%,rgba(138,61,255,.04) 100%); border-color:rgba(170,110,255,.16); }
.gift-dd__row--point.is-dim{ background:linear-gradient(90deg,rgba(25,201,168,.16) 0%,rgba(25,201,168,.03) 100%); border-color:rgba(80,230,200,.14); }

.gift-dd__body{ flex:1; min-width:0; }
.gift-dd__title{ font-size:15px; font-weight:700; margin:0 0 3px !important; display:flex; align-items:center; gap:4px; color:var(--wh-text-1); }
.gift-dd__sub{
  font-size:12px; line-height:1.45; color:var(--wh-text-sub);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:keep-all;
}
.gift-dd__row.is-dim .gift-dd__icon,
.gift-dd__row.is-dim .gift-dd__title{ opacity:.45; }
.gift-dd__row.is-dim .gift-dd__title{ color:var(--wh-text-2); }
.gift-dd__row.is-dim .gift-dd__sub{ color:var(--wh-text-sub-dim); }
.gift-dd__err{ margin-top:4px !important; font-size:12px; line-height:1.4; color:#ffb4b4; }

.gift-dd__hl-point{ color:var(--wh-accent-cyan); font-weight:700; }
.gift-dd__hl-spin{ color:var(--wh-accent-gold); font-weight:700; }

/* 「+N」 획득 표시: 2초 떠 있다 사라진다 */
.gift-dd__gain{
  display:inline-block; font-size:11px; font-weight:800; border-radius:999px; padding:1px 7px;
  animation:gift-gain-in .25s ease-out, gift-gain-out .3s ease-in 1.7s forwards;
}
.gift-dd__gain--spin{ color:#1a1200; background:linear-gradient(135deg,#ffe08a,#ffb547); box-shadow:0 0 12px rgba(255,190,80,.45); }
.gift-dd__gain--point{ color:#001a24; background:linear-gradient(135deg,#8ff3ff,#3fc8ff); box-shadow:0 0 12px rgba(80,200,255,.45); }
@keyframes gift-gain-in{ from{ opacity:0; transform:translateY(4px) scale(.9); } to{ opacity:1; transform:none; } }
@keyframes gift-gain-out{ to{ opacity:0; transform:translateY(-4px); } }

/* ── 단추 ── */
.gift-dd__btn{
  font:inherit; font-size:13px; font-weight:700; line-height:normal;
  padding:9px 14px; border-radius:var(--wh-radius-btn);
  white-space:nowrap; flex-shrink:0;
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; border:0; background:none; color:inherit; text-decoration:none;
}
.gift-dd__btn--primary{ background:var(--wh-btn-pri-grad); color:#fff; box-shadow:var(--wh-btn-pri-glow); }
.gift-dd__btn--secondary{ border:1px solid rgba(111,224,255,.45); color:#9fe9ff; background:rgba(79,216,255,.06); }
.gift-dd__btn:disabled{ border:1px solid rgba(120,150,210,.2); color:#5f739c; background:none; box-shadow:none; cursor:default; }
.gift-dd__btn svg{ width:13px; height:13px; }

/*
  받을 방식 — 포인트 | 무료스핀 (레드 2026-09-21). 핸드오프에는 없는 칸이라
  같은 결(작게, 줄 안에서, 줄바꿈 없이)로 붙인다. 375px 에서도 한 줄에 든다.
*/
.gift-dd .paypick{ margin-top:6px; }

/* 포커스 링 — 키보드로 다닐 때만 */
.gift-dd__btn:focus-visible,
.gift-dd__foot-btn:focus-visible,
.gift-dd .paypick__opt:focus-visible{ outline:2px solid var(--wh-accent-cyan); outline-offset:2px; }
/* ⚠ 이벤트 줄은 창 끝까지 닿아 바깥 링이 잘린다 — 안쪽으로 그린다 */
.gift-dd__ev:focus-visible{ outline:2px solid var(--wh-accent-cyan); outline-offset:-2px; }

/* ── 진행 중인 이벤트 ── */
.gift-dd__events-head{
  display:flex; justify-content:space-between;
  padding:14px 18px 6px; font-size:13px; font-weight:700;
  color:var(--wh-text-section); border-top:1px solid var(--wh-divider);
}
.gift-dd__events-head span:last-child{ font-weight:400; color:#5f739c; }
.gift-dd__ev{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 18px; text-decoration:none; color:inherit;
}
.gift-dd__ev:hover{ background:rgba(79,140,255,.08); }
.gift-dd__ev-main{ min-width:0; }
.gift-dd__ev-title{ font-size:14px; margin:0 0 2px !important; color:var(--wh-text-1); }
/* 부가설명은 짧게 — 한 줄을 넘으면 말줄임 */
.gift-dd__ev-sub{ font-size:12px; color:var(--wh-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gift-dd__ev-period{ font-size:12px; color:var(--wh-text-3); flex-shrink:0; }
.gift-dd__ev-fail{ padding:4px 18px 10px; font-size:12px; color:var(--wh-text-3); }

/* ── 바닥 두 단추 ── */
.gift-dd__footer{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--wh-divider); margin-top:6px; }
.gift-dd__foot-btn{
  flex:1; text-align:center; padding:12px; font-size:13px; font-weight:700;
  color:var(--wh-dd-bg); background:#fff; border-radius:var(--wh-radius-btn); text-decoration:none;
}
.gift-dd__foot-btn:hover{ color:var(--wh-dd-bg); }

@media (prefers-reduced-motion:reduce){
  .gift-dd{ animation:none; }
  /* 움직임 없이 2초 뒤 사라진다 */
  .gift-dd__gain{ animation:gift-gain-out 0s linear 2s forwards; }
}

/* ── 받을 방식 두 칸 (선물 창 · 리워드 화면이 같이 쓴다) ── */
.paypick{
  display:inline-flex; flex-wrap:nowrap;
  padding:2px; gap:2px;
  border:1px solid rgba(111,224,255,.30);
  border-radius:8px;
  background:rgba(4,12,34,.35);
}
.paypick__opt{
  /* ★ 두 칸을 반반으로 (레드 2026-09-21). 글자 폭대로 두면 「포인트」만 넓고 옆이 비어 보였다 */
  flex:1 1 0; min-width:0; text-align:center;
  font:inherit; font-size:11px; font-weight:700; line-height:1.2;
  padding:4px 9px; border:0; border-radius:6px;
  background:none; color:#9fb4dc;
  white-space:nowrap; cursor:pointer;
}
.paypick__opt.is-on{ background:rgba(111,224,255,.18); color:#bff3ff; }
.paypick__opt:disabled{ color:#5f739c; cursor:default; }
.paypick__opt.is-on:disabled{ background:rgba(111,224,255,.08); }
.paypick__opt:focus-visible{ outline:2px solid #6fe0ff; outline-offset:1px; }

/* ── 폰에서는 <화면 폭에 물린다> (레드 2026-09-21 「모바일 어긋난다」) ──────
   ⚠ 선물 상자는 머리글 <가운데>에 있다. right:0 으로 펼치면 왼쪽으로 뻗어
     화면 밖으로 나간다(실측: 「무료스핀 4개」가 「스핀 4개」로 보였다).
   ★ 좁은 화면에서는 단추 기준을 버리고 <화면 기준>으로 고정한다 — 폭 calc(100vw - 16px).
   ⚠ position:fixed 는 top:100% 가 <화면 높이의 100%> 가 된다 — 머리글 높이로 잡는다. */
@media (max-width:560px){
  .gift-dd{
    position:fixed;
    top:calc(var(--header-h, 56px) + 8px);
    left:8px; right:8px;
    width:auto; max-width:none;
    max-height:calc(100dvh - var(--header-h, 56px) - 24px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   묻는 창과 가운데 쪽지 (레드 2026-09-25 「UIUX가 불편하다 심각하게」)

   ★ 브라우저 기본 window.confirm / alert 을 대신한다. 기본 창은 폰에서
     주소창에 붙어 뜨고 「whaley.bet 내용:」 머리말이 붙어 <딴 사이트가 끼어든>
     것처럼 보인다.

   ★ 쪽지를 <화면 가운데>에 둔다(레드가 정했다). 구석에 띄우면 폰에서 놓친다.
     오류를 자리마다 화면 안에 박아 넣던 것이 더 나빴다 — 스크롤을 내린 상태면
     오류가 화면 밖에 있어서, 회원은 눌렀는데 아무 일도 안 난 것으로 본다.

   ⚠ 위쪽 .notoast(서버 알림)와 <자리가 겹치지 않게> 가운데로 뒀다.
   ═══════════════════════════════════════════════════════════════════════ */

.ex-toasts{
    position:fixed; inset:0; z-index:9000;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:16px;
    pointer-events:none;              /* 뒤 화면을 계속 쓸 수 있다 */
}
.ex-toast{
    pointer-events:auto;
    display:flex; align-items:center; gap:10px;
    max-width:min(92vw, 420px);
    padding:13px 18px; border-radius:12px;
    background:var(--surface-1, #171a21);
    border:1px solid var(--line, #2a2f3a);
    color:var(--text, #fff);
    font-size:var(--fs-sm, 14px); font-weight:600; line-height:1.45;
    box-shadow:0 12px 34px rgba(0,0,0,.45);
    animation:ex-toast-in .18s ease-out both;
    word-break:break-word;
}
.ex-toast i{ flex:0 0 auto; font-size:16px; }
.ex-toast.is-error{ border-color:rgba(229,9,20,.55); }
.ex-toast.is-error i{ color:#ff4d5a; }
.ex-toast.is-ok   { border-color:rgba(0,230,118,.45); }
.ex-toast.is-ok i { color:#00e676; }
.ex-toast.is-info i{ color:var(--text-3, #9aa3b2); }

@keyframes ex-toast-in{
    from{ opacity:0; transform:translateY(8px) scale(.97); }
    to  { opacity:1; transform:none; }
}

/* ── 묻는 창 · 알림 창 — 스카이시티 시안 모양 (레드 2026-09-25 「알럿디자인은 시안디자인으로 통일」)
   ★ 왼쪽에 <갈래 색 띠> 한 줄, 제목 · 설명 · 값 표 · 아래 꽉 찬 단추.
     띠 색이 무슨 일인지 먼저 말한다 — 초록은 됐다, 빨강은 되돌릴 수 없다, 주황은 조심하라.
   ⚠ 치수는 시안 값 그대로다(360 폭 · radius 16 · 띠 3px · 단추 42 · 표 radius 10).
     var(--fs-sm) 은 두 프로젝트에서 값이 달라 숫자를 박는다. */
.ex-ask{
    position:fixed; inset:0; z-index:9100;
    display:flex; align-items:center; justify-content:center; padding:16px;
    background:rgba(0,0,0,.62);
    animation:ex-ask-fade .14s ease-out both;
}
.ex-ask__box{
    position:relative;
    width:min(92vw, 360px);
    padding:0;
    border-radius:16px;
    background:var(--surface-1, #171a21);
    border:1px solid rgba(255,255,255,.08);
    /* ★ 왼쪽 띠는 <안쪽 그림자>다. 요소를 하나 더 두지 않아 칸 배치가 안 흐트러진다 */
    box-shadow:inset 3px 0 0 var(--dlg-tone, var(--primary)), 0 20px 50px rgba(0,0,0,.55);
    animation:ex-toast-in .18s ease-out both;
}
/* 갈래 색 — 뜻이 있는 색이라 브랜드 색으로 바꾸지 않는다 */
.ex-ask.is-info   .ex-ask__box{ --dlg-tone:#4ea3ff; }
.ex-ask.is-ok     .ex-ask__box{ --dlg-tone:#2fd39a; }
.ex-ask.is-warn   .ex-ask__box{ --dlg-tone:#ffae3d; }
.ex-ask.is-ask    .ex-ask__box{ --dlg-tone:var(--primary, #2f6bff); }
.ex-ask.is-danger .ex-ask__box{ --dlg-tone:#ff5a6e; }

.ex-ask__close{
    position:absolute; top:8px; right:8px; z-index:1;
    display:grid; place-items:center; width:30px; height:30px;
    border-radius:50%; color:var(--text-4, #94A6BE); cursor:pointer;
    transition:color .12s, background .12s;
}
.ex-ask__close:hover{ color:var(--text, #fff); background:rgba(255,255,255,.08); }

.ex-ask__body{
    display:grid; grid-template-columns:minmax(0,1fr); gap:6px;
    padding:18px 18px 2px 20px; text-align:left;
}
/* 제목 — 오른쪽에 닫기 단추 자리를 비운다 */
.ex-ask__title{
    margin:0; padding-right:24px;
    font-size:16px; font-weight:900; line-height:1.35;
    color:var(--text, #fff); word-break:keep-all;
}
.ex-ask__detail{
    margin:0; padding:0; background:none; border-radius:0; text-align:left;
    font-size:14px; font-weight:800; color:var(--text, #fff);
}
.ex-ask__text{
    margin:0; text-align:left;
    font-size:13px; line-height:1.55; font-weight:400;
    color:var(--text-3, #9aa3b8); white-space:pre-line; word-break:keep-all;
}
/* 값 표 — 「최소 출금 ₩10,000 / 입력한 금액 ₩0」처럼 <다시 봐야 하는> 숫자 */
.ex-ask__rows{
    display:grid; margin:4px 0 0; padding:2px 12px;
    border-radius:10px; background:var(--bg, #05080F);
}
.ex-ask__rows div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 0; }
.ex-ask__rows div + div{ border-top:1px solid color-mix(in srgb, var(--line, #2A3A57) 70%, transparent); }
.ex-ask__rows dt{ flex:none; font-size:12px; color:var(--text-4, #94A6BE); }
.ex-ask__rows dd{
    min-width:0; margin:0; font-size:13px; font-weight:800; color:var(--text, #fff);
    text-align:right; font-variant-numeric:tabular-nums; word-break:break-all;
}
/* ★ 눈이 먼저 가야 하는 한 줄 — 갈래 색으로 칠한다 */
.ex-ask__rows .is-hot dd{ font-size:14px; font-weight:900; color:var(--dlg-tone, var(--primary)); }

.ex-ask__btns{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px;
    padding:14px 18px 18px; margin:0;
}
.ex-ask__btns button{
    height:42px; padding:0 10px; border-radius:10px; cursor:pointer;
    font-size:14px; font-weight:800; border:1px solid transparent;
}
.ex-ask__btns .ex-ask__no{
    background:var(--surface-2, #1e222b); color:var(--text-2, #c8cfdb); border-color:transparent;
}
.ex-ask__btns .ex-ask__no:hover{ color:var(--text, #fff); }
.ex-ask__btns .ex-ask__yes{ background:var(--primary, #2f6bff); color:#fff; }
.ex-ask__btns .ex-ask__yes:hover{ filter:brightness(1.08); }
/*
   되돌릴 수 없는 일 — 빨강으로 한 번 더 세운다.
   ⚠ --cta 를 쓰면 안 된다. EX 는 노랑, WHALEY 는 플래티넘이라 둘 다 <위험>으로 안 읽힌다.
     --danger 는 두 브랜드가 같은 값(#FF5470)을 쓰는 <뜻이 있는 색>이다.
*/
.ex-ask__btns .ex-ask__yes.is-danger{ background:var(--danger, #FF5470); color:#1A0509; }

@keyframes ex-ask-fade{ from{ opacity:0 } to{ opacity:1 } }

/* 움직임을 줄여 달라고 한 회원에게는 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce){
    .ex-toast, .ex-ask, .ex-ask__box{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════════
   알림 창 — 시안 js/notify.js · css/layout.css 「.noti__panel · .noti__item」 (레드 2026-09-27 「알림 디자인 변경」)
   [🔔 알림 ··········· 모두 읽음]  줄 = [제목 13 / 설명 11 | 시간 10] · 안 본 줄은 왼쪽 빨간 점 8 + 옅은 판
   ★ 크기는 시안 지정값. 색은 웨일리 톤(시안 금색 종 → 사파이어).
   ★ 아이콘 칸 · 금액 칸은 시안에 없다 — 금액은 설명 뒤에 붙는다(NotiPopover). 「더 보기」는 우리 기능이라 목록 아래 한 줄.
   ⚠ 휴대폰(≤640) 자리 잡기는 위 규칙(헤더 바로 아래 화면 폭)을 그대로 쓴다.
   (위쪽 .notipop__list .noti__row · .noti__ico … 규칙은 옛 창 — 지금 창은 안 쓴다. 전체 화면 /notifications 는 .noti__* 그대로)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width:641px){
  .notipop__sheet{ width:340px; }
}
.notipop__sheet{ border-radius:14px; background:var(--surface-1); font-size:14px; line-height:1.5; }
.notipop__head{ justify-content:space-between; gap:8px; padding:12px 14px; font-size:14px; }
.notipop__head b{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; }
.notipop__head b i{ font-size:15px; color:var(--primary); }
.notipop__head .notipop__all{ margin-left:0; border:0; background:none; font:inherit; font-size:11px; font-weight:400; color:var(--text-4); cursor:pointer; }
.notipop__head .notipop__all:hover{ color:var(--primary); }
.notipop__list{ max-height:360px; padding:6px; gap:0; }
.notipop__item{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px;
  padding:10px 10px 10px 26px; border-radius:8px; color:var(--text); text-decoration:none;
  transition:background-color 150ms ease;
}
.notipop__item.is-link:hover{ background:var(--surface-2); }
/* 안 읽음 — 아이콘 없이 왼쪽 빨간 점만 (8px) · 칸 세로 가운데 · 글과 10px 띄움 */
.notipop__item.is-new{ background:rgba(255,255,255,.05); }
.notipop__item.is-new::before{ content:""; position:absolute; left:8px; top:50%; translate:0 -50%; width:8px; height:8px; border-radius:50%; background:#E11D3F; box-shadow:0 0 0 3px rgba(225,29,63,.22); }
.notipop__txt{ display:grid; gap:2px; min-width:0; }
.notipop__txt b{ font-size:13px; font-weight:800; color:var(--text); }
.notipop__txt small{ font-size:11px; line-height:1.45; color:var(--text-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notipop__time{ padding-top:2px; font-size:10px; color:var(--text-5); white-space:nowrap; }
.notipop__more{ display:block; padding:10px; border-top:1px solid var(--line); text-align:center; font-size:12px; font-weight:700; color:var(--text-4); text-decoration:none; transition:color 150ms ease; }
.notipop__more:hover{ color:var(--primary); }

/* ════════════════════════════════════════════════════════════════════
   선물 창 — 새 디자인 (레드 2026-09-27 「선물상자 디자인 변경하고 연동하자」 · 전달본 whaley-선물상자/css/gift.css)
   [파란 머리 띠] → [카드 넷 : 출석체크 · 무료스핀 · 주간 페이백 · 친구초대 캐시백] → [리워드 전체보기 | 이벤트 전체보기]
   카드 = [3D 그림 48] [제목 · 한 줄] [단추]. 받을 것이 없으면 제목을 흐리게(.gp-card:not(.is-on))
   ★ 값은 전달본 그대로. 미리보기 전용 블록(바닥 · 확인 창 · 알림 · .gp-demo · .gp-bar)은 옮기지 않았다 —
     확인 창은 사이트의 묻는 창(.ex-ask), 알림은 가운데 쪽지(.ex-toast)를 쓴다.
   ★ 자리 잡기는 예전 창(.gift-dd)과 같다 — 단추 오른쪽 끝 아래, 폰(≤560)은 화면 폭에 물린다.
   (위쪽 .gift-dd 규칙은 옛 창 — 지금은 안 쓴다)
   ════════════════════════════════════════════════════════════════════ */
.giftpop > .gp{
  position:absolute; top:calc(100% + 10px); right:0; z-index:70;
  max-width:calc(100vw - 16px);
  max-height:calc(100dvh - var(--header-h, 72px) - 24px); overflow-x:hidden; overflow-y:auto;
}
.gp{ width:380px; overflow:hidden; border-radius:20px; border:1px solid rgba(143,182,255,.18); background:#0B1224; box-shadow:0 40px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4); text-align:left; }

/* 머리 띠 — 파랑 그라데이션 · 고래 꼬리 · 물결 */
.gp-head{ position:relative; overflow:hidden; display:grid; gap:4px; padding:20px 20px 28px; background:linear-gradient(120deg, #1C45A8 0%, #2D62D8 55%, #3A7DE6 100%); }
.gp-head h2{ position:relative; z-index:1; margin:0; font-size:22px; line-height:30px; font-weight:900; color:#fff; }
.gp-head p{ position:relative; z-index:1; margin:0; font-size:var(--fs-xs); color:rgba(255,255,255,.82); }
.gp-head__tail{ position:absolute; right:18px; top:-6px; width:150px; height:84px; fill:rgba(255,255,255,.16); }
.gp-head__wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:16px; fill:#0B1224; }

/* 카드 넷 */
.gp-cards{ display:grid; gap:8px; margin:0; padding:12px 12px 10px; list-style:none; }
.gp-card{
  --c:#4E93FF;
  display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:70px; padding:10px 12px 10px 10px;
  border-radius:15px; border:1px solid color-mix(in oklab, var(--c) 26%, transparent);
  background:linear-gradient(100deg, color-mix(in oklab, var(--c) 16%, #0E1730) 0%, #0E1730 70%);
}
.gp-card.is-attend{ --c:#4E93FF; }
.gp-card.is-spin{ --c:#8B5CF6; }
.gp-card.is-payback{ --c:#2F7BFF; }
.gp-card.is-referral{ --c:#2FB5A0; }
.gp-card__img{ width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.gp-card__txt{ display:grid; gap:3px; min-width:0; }
.gp-card__txt b{ display:flex; align-items:center; gap:6px; font-size:var(--fs-md); line-height:22px; font-weight:900; color:var(--text-5); }   /* 받을 것 없음 = 흐리게 */
.gp-card.is-on .gp-card__txt b{ color:var(--text); }
.gp-card__txt span{ font-size:var(--fs-sm); color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.gp-card__txt em{ font-style:normal; font-weight:900; color:var(--text); }
/* 출석 받을 방식 고르개(포인트 | 무료스핀 — 레드 2026-09-21) · 출석 오류 · 받은 직후 「+N」 */
.gp .paypick{ margin-top:4px; }
.gp-card__err{ margin:2px 0 0; font-size:var(--fs-xs); color:var(--danger, #FF5470); }
.gp-gain{ padding:0 7px; border-radius:99px; font-size:11px; line-height:18px; font-weight:900; color:#fff; background:color-mix(in oklab, var(--c) 70%, transparent); }
.gp-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:11px; white-space:nowrap; font:inherit; font-size:var(--fs-xs); font-weight:900; cursor:pointer; text-decoration:none;
  background:linear-gradient(180deg, var(--cta-hi), var(--cta)); color:var(--text-on-cta); border:0;
  transition:filter .2s, border-color .2s, color .2s;
}
.gp-btn:hover{ filter:brightness(1.06); }
.gp-btn:disabled{ opacity:.6; cursor:default; filter:none; }
.gp-btn.is-ghost{ background:rgba(255,255,255,.03); color:var(--text-2); border:1px solid color-mix(in oklab, var(--c) 45%, var(--line)); }
.gp-btn.is-ghost:hover{ color:var(--text); border-color:var(--c); filter:none; }
.gp-btn:focus-visible, .gp-link:focus-visible{ outline:2px solid var(--cta); outline-offset:2px; }

/* 아래 단추 두 개 */
.gp-foot{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 12px; }
.gp-link{ display:flex; align-items:center; justify-content:center; gap:4px; height:42px; border-radius:12px; background:var(--surface-2); font-size:var(--fs-xs); font-weight:800; color:var(--text-2); text-decoration:none; transition:background-color .2s, color .2s; }
.gp-ic{ width:13px; height:13px; }
.gp-link:hover{ background:var(--surface-3); color:var(--text); }

/* 휴대폰 — 화면 폭 가득, 헤더 바로 아래 (예전 창과 같은 자리 · ⚠ 선물 상자가 머리글 가운데라 right:0 이면 화면 밖으로 나간다) */
@media (max-width:560px){
  .giftpop > .gp{
    position:fixed; top:calc(var(--header-h, 56px) + 8px); left:8px; right:8px;
    width:auto; max-width:none; max-height:calc(100dvh - var(--header-h, 56px) - 24px);
  }
}
@media (max-width:767px){
  .gp{ border-radius:18px; }
  .gp-head{ padding:18px 18px 26px; }
  .gp-head__tail{ width:140px; height:78px; right:10px; }
  .gp-cards{ padding:12px 10px 10px; gap:6px; }
  .gp-card{ grid-template-columns:44px minmax(0,1fr) auto; gap:12px; min-height:66px; padding:8px 10px; }
  .gp-card__img{ width:44px; height:44px; }
  .gp-card__txt b{ font-size:var(--fs-base); }
  .gp-btn{ height:34px; padding:0 12px; font-size:var(--fs-sm); }
  .gp-foot{ padding:0 10px 10px; }
  .gp-link{ height:40px; }
}

/* ★ 알림 한 줄 (레드 2026-09-27 「알림 한줄로 줄이기」) — 제목과 설명을 한 줄에 잇고, 넘치면 끝을 「…」.
     전체 글은 마우스를 올리면 보인다(title). 시각은 「N분 전」(Time style=relative). */
.notipop__item{ align-items:center; }
.notipop__txt{ display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.notipop__txt b{ display:inline; }
.notipop__txt small{ display:inline; margin-left:6px; }
.notipop__time{ padding-top:0; }

/* ★★ 휴대폰 — 선물함 · 알림 창은 <오른쪽에 붙여 화면 폭 70%> (레드 2026-09-27).
     전에는 좌우 8~12px 을 남긴 화면 폭 가득이라, 창이 뜨면 뒤 화면이 통째로 가려졌다.
   ⚠ 위의 좁은 폭 규칙들(≤520 가운데 정렬 translateX(-50%) · ≤560 · ≤640 좌우 고정)을 <여기서 한 번에> 덮는다 —
     left 와 transform 을 풀지 않으면 창이 왼쪽으로 반쯤 밀려 나간다. */
@media (max-width:767px){
  .giftpop > .gp,
  .notipop__sheet{
    position:fixed; top:calc(var(--header-h, 56px) + 8px); left:auto; right:8px;
    width:70vw; max-width:none; transform:none;
    max-height:calc(100dvh - var(--header-h, 56px) - var(--tabbar-h, 56px) - 24px);
  }
}