@charset "utf-8";

/* =====================================================================
   마이페이지 알림 설정 — Figma 1119:7316 (teal 디자인 시스템)
   ① 메인 1119:6689 · ② 방해금지 1119:6990 · ③ 미리보기 1119:7153
   720px 뷰포트, Figma 1.92× = CSS px. meet-place 컨벤션 준수.
   ToggleSwitch(.switch)는 컴포넌트 자체 CSS(main.css) 재사용.
   ===================================================================== */

/* 공통 래퍼 */
.mno-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 공통 헤더 (뒤로 + 가운데 타이틀) */
.mno-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:15px; padding:21px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mno-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px;}
/* common/back.svg(정사각) 사용 — 흰 stroke 라 흰 헤더에서 보이도록 라이트=검정/다크=흰색 (다른 마이페이지와 통일) */
.mno-back img {width:38px; height:38px; filter:brightness(0);}
.churchro.dark-mode .mno-back img {filter:none;}
.mno-head h1 {flex:1; margin-right:54px; text-align:center; font-size:32px; font-weight:800; color:var(--ink);}

/* ============================ ① 메인 ============================ */

/* 상단 그라데이션 히어로 (마스터 토글) */
.mno-hero {display:flex; flex-direction:column; gap:27px; position:relative; padding:30px 34px; overflow:hidden;
	background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 55%, #0F766E 100%);}
.mno-hero::before {content:''; position:absolute; top:-77px; right:-77px; width:288px; height:288px; border-radius:50%; background:rgba(255,255,255,.04);}
.mno-hero::after {content:''; position:absolute; bottom:-38px; left:-19px; width:192px; height:192px; border-radius:50%; background:rgba(13,148,136,.10);}
.mno-hero-top {position:relative; z-index:1; display:flex; align-items:center; gap:23px;}
.mno-hero-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:25px; background:rgba(255,255,255,.12); border:1.92px solid rgba(255,255,255,.18);}
.mno-hero-ic img {width:46px; height:46px;}
.mno-hero-tt b {display:block; font-size:33px; font-weight:800; color:#fff;}
.mno-hero-tt span {display:block; margin-top:6px; font-size:21px; color:rgba(255,255,255,.55);}

.mno-master {position:relative; z-index:1; display:flex; align-items:center; gap:23px; padding:29px 33px; border-radius:27px; background:rgba(255,255,255,.10); border:1.92px solid rgba(255,255,255,.18);}
.mno-master-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:77px; height:77px; border-radius:21px; background:rgba(255,255,255,.12);}
.mno-master-ic img {width:42px; height:42px;}
.mno-master-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.mno-master-tx b {font-size:27px; font-weight:800; color:#fff;}
.mno-master-tx span {font-size:21px; color:rgba(255,255,255,.55);}

/* 토글 그룹 카드 */
.mno-body {flex:1; display:flex; flex-direction:column; gap:16px; padding:16px 0 170px;}
.mno-group {background:var(--card); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line);}
.mno-group.dim {opacity:.45; pointer-events:none;}

/* 그룹 헤더 (아이콘 배지 + 제목) */
.mno-ghead {display:flex; align-items:center; gap:14px; padding:23px 35px 12px;}
.mno-gbadge {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:15px;}
.mno-gbadge img {width:27px; height:27px;}
.mno-gbadge.b-basic {background:#EEF2FF;}
.mno-gbadge.b-chat {background:#F0FDFA;}
.mno-gbadge.b-comm {background:#EFF6FF;}
.mno-gbadge.b-church {background:#FFFBEB;}
.mno-gbadge.b-act {background:#F5F3FF;}
.mno-gbadge.b-mkt {background:#FDF2F8;}
.mno-ghead b {font-size:23px; font-weight:800; color:var(--ink);}

/* 토글 행 */
.mno-row {display:flex; align-items:center; gap:23px; padding:25px 35px; border-top:1.92px solid var(--line);}
.mno-row-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.mno-row-tt {font-size:25px; font-weight:600; color:var(--ink);}
.mno-row-sub {font-size:21px; color:var(--sub); line-height:31px;}

/* 링크형 행 (방해금지 시간 → 별도 화면) */
.mno-link {cursor:pointer; text-align:left; width:100%; background:none;}
.mno-link .mno-row-sub {color:var(--teal); font-weight:700;}
.mno-link .mno-chev {flex:0 0 auto; width:31px; height:31px;}

/* 방해금지 행 (스위치 + chevron 동시) */
.mno-dnd .mno-dnd-go {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; text-align:left; background:none; border:0; padding:0; cursor:pointer;}
.mno-dnd .mno-dnd-go .mno-row-sub {color:var(--teal); font-weight:700;}
.mno-chevbtn {flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer;}
.mno-chevbtn .mno-chev {width:31px; height:31px;}

/* 알림음 행 (값 + chevron) */
.mno-val {flex:0 0 auto; display:flex; align-items:center; gap:15px;}
.mno-val img {width:31px; height:31px;}

/* 하단 안내 (마케팅 동의 등) */
.mno-notice {display:flex; align-items:flex-start; gap:15px; padding:23px 35px; background:var(--cream); border-top:1.92px solid #FDE68A; border-bottom:1.92px solid #FDE68A;}
.mno-notice img {flex:0 0 auto; width:27px; height:27px; margin-top:3px;}
.mno-notice p {font-size:21px; color:#92400E; line-height:33px;}
.churchro.dark-mode .mno-notice {background:#20221A; border-color:#3A3416;}
.churchro.dark-mode .mno-notice p {color:#FCD34D;}

/* 알림 미리보기 진입 행 */
.mno-preview-link {display:flex; align-items:center; gap:23px; margin:0; padding:27px 35px; background:var(--card); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line); width:100%; text-align:left;}
.mno-preview-link .ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:15px; background:var(--mint);}
.mno-preview-link .ic img {width:27px; height:27px;}
.mno-preview-link .tx {flex:1; display:flex; flex-direction:column; gap:4px;}
.mno-preview-link .tx b {font-size:25px; font-weight:600; color:var(--ink);}
.mno-preview-link .tx span {font-size:21px; color:var(--sub);}
.mno-preview-link .chev {flex:0 0 auto; width:31px; height:31px;}

/* ======================== ② 방해금지 시간 ======================== */
.mnd-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}
.mnd-body {flex:1; padding:31px 31px 170px;}

.mnd-card {display:flex; flex-direction:column; background:var(--card); border:1.92px solid var(--line); border-radius:34px; overflow:hidden; box-shadow:0 8px 31px rgba(0,0,0,.10);}
.mnd-chead {display:flex; align-items:center; justify-content:space-between; gap:15px; padding:25px 35px; border-bottom:1.92px solid var(--line);}
.mnd-chead-tx b {display:block; font-size:31px; font-weight:800; color:var(--ink);}
.mnd-chead-tx span {display:block; margin-top:5px; font-size:21px; color:var(--sub);}

/* 시작 ~ 종료 라벨 라인 */
.mnd-inner {display:flex; flex-direction:column; gap:19px; padding:35px;}
.mnd-range {display:flex; align-items:center; gap:11px;}
.mnd-range .k {font-size:21px; font-weight:700; color:var(--sub);}
.mnd-range .k.on {color:var(--teal);}
.mnd-range .v {font-size:21px; font-weight:700; color:var(--teal); white-space:nowrap;}
.mnd-range .ln {flex:1; height:1.92px; background:var(--line);}

/* 시간 피커 (시작 : 분 ~ 종료) */
.mnd-pickers {display:flex; align-items:center; gap:11px; justify-content:center;}
.mnd-pcol {flex:1; display:flex; flex-direction:column; align-items:center; gap:15px;}
.mnd-pcol > .cap {font-size:21px; font-weight:600; color:var(--sub);}
.mnd-pbox {display:flex; flex-direction:column; align-items:center; gap:0; width:100%; padding:21px 21px; background:var(--snow); border:1.92px solid var(--line); border-radius:19px;}

/* AM/PM 칩 */
.mnd-ampm {display:flex; gap:8px; margin-bottom:11px;}
.mnd-ampm button {padding:9px 21px; border-radius:38px; background:var(--snow); border:1.92px solid var(--line); font-size:21px; font-weight:700; color:var(--sub);}
.mnd-ampm button.on {background:var(--teal-2); border-color:var(--teal-2); color:#fff;}

/* 스피너 (▲ 값 ▼) */
.mnd-spin {display:flex; flex-direction:column; align-items:center;}
.mnd-spin button {display:flex; align-items:center; justify-content:center; width:62px; height:62px;}
.mnd-spin button img {width:35px; height:35px;}
.mnd-spin .num {font-size:54px; font-weight:800; color:var(--ink); line-height:1; padding:4px 0;}
.mnd-spin .unit {font-size:23px; color:var(--sub); padding-top:4px;}

.mnd-colon {font-size:54px; font-weight:800; color:var(--mute); padding-bottom:30px;}
.mnd-tilde {font-size:35px; font-weight:800; color:var(--mute);}

/* 적용 요일 */
.mnd-daystt {margin-top:8px; font-size:23px; font-weight:700; color:var(--body);}
.mnd-days {display:flex; gap:11px; justify-content:center;}
.mnd-day {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:35px; background:var(--snow); border:1.92px solid var(--line); font-size:23px; font-weight:700; color:var(--body);}
.mnd-day.on {background:var(--navy); border-color:var(--navy); color:#fff;}

/* 프리셋 */
.mnd-presets {display:flex; gap:15px;}
.mnd-preset {flex:1; padding:17px; border-radius:15px; background:var(--snow); border:1.92px solid var(--line); font-size:21px; font-weight:700; color:var(--body); text-align:center;}
.mnd-preset.on {background:var(--mint); border-color:var(--teal-2); color:var(--teal);}

/* 설정 저장 */
.mnd-save {display:flex; align-items:center; justify-content:center; gap:13px; margin-top:8px; padding:27px; border-radius:19px; color:#fff; font-size:29px; font-weight:700;
	background:linear-gradient(137deg, #1E3A5F 0%, #1A4A7A 100%);}
.mnd-save img {width:33px; height:33px;}

/* ======================== ③ 알림 미리보기 ========================
   Figma 1119:7156. 720px = Figma px × 1.92.
   네이비 인트로 배너 + 5개 섹션(소문자라벨 + 흰 카드). 카드 = 색바 +
   메타row(그라데이션 벨 + 교회로 + 시각) + 타이틀 + 본문 + 보더후 버튼2개. */
.mnp-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 인트로 배너 (1119:7166) — px18 py14 / gap2 */
.mnp-intro {display:flex; flex-direction:column; gap:4px; padding:27px 35px; background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 100%);}
.mnp-intro b {font-size:29px; font-weight:800; color:#fff;}        /* 15px ExtraBold */
.mnp-intro span {font-size:21px; color:rgba(255,255,255,.55);}     /* 11px Regular, 흰55% */

/* 스크롤 본문 (1119:7171) — px18 pt14 */
.mnp-body {flex:1; padding:27px 35px 170px;}

/* 섹션 라벨 (1119:7173) — 11px Bold, 회색, letter-spacing .5, uppercase */
.mnp-sect {margin-top:23px;}
.mnp-sect:first-child {margin-top:0;}
.mnp-secttl {padding:0 8px 11px; font-size:21px; font-weight:700; letter-spacing:.96px; text-transform:uppercase; color:var(--sub);}

/* 푸시 알림 카드 (1119:7174) — radius16 / shadow */
.mnp-card {display:flex; flex-direction:column; background:var(--card); border-radius:31px; overflow:hidden; box-shadow:0 8px 38px rgba(0,0,0,.12);}

/* 좌상단 3px 색바 (섹션별 강조색 — 토큰 아님, 그대로 둠) */
.mnp-accent {height:6px;}
.mnp-accent.a-chat {background:#0D9488;}
.mnp-accent.a-market {background:#D97706;}
.mnp-accent.a-comment {background:#2563EB;}
.mnp-accent.a-church {background:#1E3A5F;}
.mnp-accent.a-service {background:#7C3AED;}

/* 메타 행 (1119:7176) — pt10 pb8 px14 / gap8 */
.mnp-meta {display:flex; align-items:center; gap:15px; padding:19px 27px 15px;}
.mnp-meta .ava {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:15px; background:linear-gradient(135deg, #0D9488 0%, #1E3A5F 100%);}
.mnp-meta .ava img {width:31px; height:31px;}
.mnp-meta .sender {font-size:23px; font-weight:700; color:var(--body);}   /* 교회로 12px Bold */
.mnp-meta .time {margin-left:auto; font-size:21px; color:var(--sub);}  /* 시각 11px */

/* 카드 본문 (1119:7187) — pb13 px14 / gap3 */
.mnp-cbody {display:flex; flex-direction:column; gap:6px; padding:0 27px 25px;}
.mnp-ctt {font-size:27px; font-weight:800; color:var(--ink);}         /* 14px ExtraBold */
.mnp-cmsg {padding-bottom:13px; font-size:23px; color:var(--body); line-height:35px;}  /* 12px / lh18 */
.mnp-cmsg b {font-weight:700; color:var(--body);}

/* 액션 버튼 행 (1119:7192) — 상단보더 후 pt11 / gap8 */
.mnp-actions {display:flex; gap:15px; padding-top:21px; border-top:1.92px solid var(--line);}
.mnp-actions button {flex:1; padding:15px; border-radius:15px; font-size:23px; font-weight:700;}
.mnp-actions .close {background:var(--snow); color:var(--body);}      /* 연회색 bg / 회색 텍스트 */
.mnp-actions .go {background:var(--mint); color:var(--teal);}         /* mint bg / teal 텍스트 */

/* ============================ 하단 탭바 ============================ */
.mno-nav, .mnp-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.mno-nav .tab, .mnp-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mno-nav .tab img, .mnp-nav .tab img {width:42px; height:42px;}
.mno-nav .tab.on, .mnp-nav .tab.on {color:var(--teal);}
.mno-nav .tab-fab, .mnp-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mno-nav .tab-fab .fab, .mnp-nav .tab-fab .fab {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488, #1E3A5F); border:5px solid var(--card); box-shadow:0 10px 24px rgba(13,148,136,0.4);}
.mno-nav .tab-fab .fab img, .mnp-nav .tab-fab .fab img {width:48px; height:48px;}

@media (hover:hover) and (pointer:fine) {
	.mno-row:hover, .mno-preview-link:hover, .mnd-day:hover, .mnd-preset:hover, .mnp-actions button:hover {filter:brightness(.98);}
}