/* =====================================================================
   MIND LINKER — Alert / Notification dialog system
   디자인 시스템(tokens.css) 위에 얹는 알림창 레이어.
   세이지 그린·시안 시그니처를 따르고, 파괴적 동작에만 코랄을 절제해 도입.
   ===================================================================== */

/* 파괴적(되돌릴 수 없는) 동작 전용 코랄 — 브랜드 그린과 보색으로 조화 */
:root {
  --coral:      oklch(63.5% 0.166 27.5);
  --coral-600:  oklch(56.0% 0.150 27.8);
  --coral-soft: oklch(94.2% 0.038 30.0);
  --coral-ink:  oklch(43.5% 0.118 29.0);
  --coral-line: oklch(86.0% 0.064 30.0);
}
[data-theme="dark"] {
  --coral:      oklch(67.0% 0.165 27.0);
  --coral-600:  oklch(60.0% 0.150 27.5);
  --coral-soft: oklch(31.0% 0.072 28.0 / 0.55);
  --coral-ink:  oklch(82.0% 0.090 30.0);
  --coral-line: oklch(40.0% 0.085 28.0);
}

/* ---- Scrim ---- */
.al-scrim {
  position: absolute; inset: 0; z-index: 5;
  background: oklch(20.7% 0.03 172.2 / 0.46);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
}

/* ---- Dialog shell ---- */
.al {
  position: relative;
  word-break: keep-all;
  width: 100%; max-width: 352px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 30px;
  padding: 30px 26px 24px;
  box-shadow: var(--sh-3), 0 30px 70px oklch(25% 0.043 169.2 / 0.32);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.al--toast { max-width: 380px; }

/* close affordance (optional) */
.al__x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.al__x:hover { color: var(--ink); border-color: var(--green-300); }
.al__x svg { width: 16px; height: 16px; }

/* ---- Medallion (icon disc) ---- */
.al__seal {
  width: 68px; height: 68px; border-radius: 22px;
  display: grid; place-items: center; flex: 0 0 auto;
  margin-bottom: 18px;
}
.al__seal svg { width: 30px; height: 30px; }
.al__seal--grad {
  background: var(--grad-signature);
  color: oklch(29.8% 0.055 171.9);
  box-shadow: var(--sh-glow);
}
.al__seal--teal {
  background: var(--teal-100); color: var(--teal-600);
  box-shadow: inset 0 0 0 1px oklch(72.2% 0.119 187.2 / .35), 0 8px 20px oklch(62.5% 0.104 194 / .18);
}
.al__seal--cyan {
  background: var(--cyan-100); color: var(--cyan-600);
  box-shadow: inset 0 0 0 1px oklch(71.7% 0.130 224.5 / .35), 0 8px 20px oklch(61.8% 0.122 232.1 / .18);
}
.al__seal--danger {
  background: var(--coral-soft); color: var(--coral);
  box-shadow: inset 0 0 0 1px oklch(63.5% 0.166 27.5 / .22), 0 8px 20px oklch(63.5% 0.166 27.5 / .16);
}
[data-theme="dark"] .al__seal--teal { background: oklch(38.5% 0.061 203 / .5); color: var(--teal-200); }
[data-theme="dark"] .al__seal--cyan { background: oklch(38.8% 0.072 236.1 / .5); color: var(--cyan-200); }

/* celebration seal has a soft lime spark ring */
.al__seal--celebrate {
  background: var(--grad-signature);
  color: oklch(29.8% 0.055 171.9);
  box-shadow: var(--sh-glow), 0 0 0 5px oklch(90.3% 0.208 122.9 / .22);
}

/* ---- Text ---- */
.al__eyebrow {
  font: var(--fw-mono) var(--fs-micro)/1 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  white-space: nowrap; margin-bottom: 9px;
}
.al__eyebrow--teal   { color: var(--teal-600); }
.al__eyebrow--cyan   { color: var(--cyan-600); }
.al__eyebrow--danger { color: var(--coral); }
.al__eyebrow--green  { color: var(--green-600); }
[data-theme="dark"] .al__eyebrow--teal { color: var(--teal-300); }
[data-theme="dark"] .al__eyebrow--cyan { color: var(--cyan-300); }

.al__title {
  font: var(--fw-display) 23px/1.18 var(--font-display);
  letter-spacing: -0.03em; color: var(--ink);
  margin: 0 0 8px;
}
.al__body {
  font: var(--fw-body) var(--fs-sm)/1.55 var(--font-body);
  color: var(--ink-3); margin: 0; max-width: 30ch;
}
.al__body b { color: var(--ink-2); font-weight: var(--fw-strong); }

/* optional inline meta row (e.g. streak count) */
.al__meta {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  margin-top: 16px; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font: var(--fw-strong) 13px/1 var(--font-body); color: var(--ink-2);
}
.al__meta .num { font: var(--fw-mono) 15px/1 var(--font-mono); color: var(--green-600); }
.al__meta svg { width: 16px; height: 16px; color: var(--green-500); }

/* ---- Button stack ---- */
.al__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 24px; }
.al__actions--row { flex-direction: row-reverse; }
.al__actions--row .al-btn { flex: 1; }

.al-btn {
  height: 52px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: var(--fw-strong) var(--fs-base)/1 var(--font-body);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .18s;
}
.al-btn:active { transform: translateY(1px); }
.al-btn svg { width: 19px; height: 19px; }

.al-btn--primary {
  background: var(--grad-signature); background-size: 160% 160%;
  color: oklch(29.8% 0.055 171.9); box-shadow: var(--sh-glow);
}
.al-btn--primary:hover { background-position: 100% 50%; box-shadow: var(--sh-glow), 0 0 0 4px oklch(64.7% 0.134 162.2 / .16); }

.al-btn--danger {
  background: var(--coral); color: oklch(99% 0.01 30);
  box-shadow: 0 3px 10px oklch(63.5% 0.166 27.5 / .30), 0 10px 26px oklch(63.5% 0.166 27.5 / .26);
}
.al-btn--danger:hover { background: var(--coral-600); box-shadow: 0 4px 14px oklch(63.5% 0.166 27.5 / .40); }

.al-btn--lime { background: var(--lime); color: var(--lime-ink);
  box-shadow: 0 4px 12px oklch(90.3% 0.208 122.9 / .35), 0 10px 28px oklch(90.3% 0.208 122.9 / .42); }

.al-btn--ghost {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink-2); border-color: var(--line);
}
.al-btn--ghost:hover { border-color: var(--green-300); color: var(--green-600); }

.al-btn--text { background: transparent; color: var(--ink-3); height: 44px; }
.al-btn--text:hover { color: var(--ink); }

/* ---- "다시 보지 않기 / 일주일 간 보지 않기" footer ---- */
.al__mute {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 2px 4px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  width: 100%;
}
.al__mute-btn {
  position: relative;
  background: transparent; border: none; cursor: pointer;
  font: var(--fw-medium, 500) 12.5px/1 var(--font-body);
  color: var(--ink-3); padding: 7px 12px; border-radius: var(--r-pill);
  transition: color .16s, background .16s;
}
.al__mute-btn:hover { color: var(--ink-2); background: var(--surface-2); }
.al__mute-btn + .al__mute-btn::before {
  content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: var(--line);
}