/* ====================================================================
   알림 — 회원의 주요 활동 (레드 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; }
}