/* =====================================================================
   MIND LINKER — Notification Settings (알림 설정)
   Sub-screen rendered inside .main. Reuses privacy.css primitives
   (.pv-hero / .pv-sec / .pv-list / .pv-row / .pv-appseg / .gd-topbar).
   Only the bits unique to this screen live here.
   ===================================================================== */

/* master-off dims & locks the dependent sections */
.ns-locked { opacity: .45; pointer-events: none; transition: opacity var(--dur-base) var(--ease); filter: saturate(.6); }

/* quiet-hours time range */
.ns-quiet { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; }
.ns-time { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ns-time__lbl { font: var(--fw-mono) 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ns-time__val { font: var(--fw-display) 30px var(--font-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ns-time__step { display: flex; gap: 6px; margin-top: 4px; }
.ns-time__step button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font: var(--fw-strong) 15px var(--font-body);
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.ns-time__step button:hover { border-color: var(--green-300); color: var(--green-600); }
.ns-arrow { color: var(--ink-3); display: grid; place-items: center; }
.ns-arrow svg { width: 22px; height: 22px; }

/* preview chip in hero */
.ns-hero__count { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 8px 13px; border-radius: 999px;
  background: oklch(100% 0 89.9 / 0.5); border: 1px solid oklch(100% 0 89.9 / 0.5);
  font: var(--fw-strong) 12.5px var(--font-body); color: oklch(29.6% 0.052 172.7); }
.ns-hero__count svg { width: 15px; height: 15px; }

/* a small inline preview of how a push notification looks */
.ns-preview { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.ns-preview__app { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
  color: oklch(29.8% 0.055 171.9); background: var(--grad-signature); box-shadow: 0 4px 10px oklch(64.7% 0.134 162.2 / .3); }
.ns-preview__app svg { width: 20px; height: 20px; }
.ns-preview__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ns-preview__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ns-preview__name { font: var(--fw-strong) 13px var(--font-body); color: var(--ink); white-space: nowrap; }
.ns-preview__time { font: var(--fw-mono) 10px var(--font-mono); color: var(--ink-3); flex: 0 0 auto; }
.ns-preview__t { font: var(--fw-strong) 14px var(--font-body); color: var(--ink); margin-top: 4px; }
.ns-preview__d { font: var(--fw-body) 12.5px/1.45 var(--font-body); color: var(--ink-3); margin-top: 2px; }