@charset "utf-8";

/* =====================================================================
 * 마이페이지 · 공지사항 — Figma 1119:8925 (teal 디자인 시스템)
 * 720px webview = Figma 1.92x → 표기 px / 1.92 = CSS px
 * 아이콘은 currentColor SVG + CSS mask 로 토큰 색상/다크모드 자동 반영
 * 접두사: mnt-
 * ===================================================================== */
.mnt-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 공통 mask 아이콘 (currentColor SVG → color 로 채색) */
.mnt-ic {flex:0 0 auto; display:inline-block; background-color:currentColor;
	-webkit-mask:var(--mnt-ic) center/contain no-repeat; mask:var(--mnt-ic) center/contain no-repeat;}
.mnt-ic-pin    {--mnt-ic:url('/asset/images/mypage-notice/pin.svg');}
.mnt-ic-cal    {--mnt-ic:url('/asset/images/mypage-notice/cal.svg');}
.mnt-ic-eye    {--mnt-ic:url('/asset/images/mypage-notice/eye.svg');}
.mnt-ic-comment{--mnt-ic:url('/asset/images/mypage-notice/comment.svg');}
.mnt-ic-chev   {--mnt-ic:url('/asset/images/mypage-notice/chevron.svg');}
.mnt-ic-nav    {--mnt-ic:url('/asset/images/mypage-notice/nav-chevron.svg');}
.mnt-ic-arrow  {--mnt-ic:url('/asset/images/mypage-notice/link-arrow.svg');}
.mnt-ic-gift   {--mnt-ic:url('/asset/images/mypage-notice/gift.svg');}
.mnt-ic-warn   {--mnt-ic:url('/asset/images/mypage-notice/warn.svg');}
.mnt-ic-bell   {--mnt-ic:url('/asset/images/mypage-notice/hero-bell.svg');}
.mnt-ic-doc    {--mnt-ic:url('/asset/images/mypage-notice/link-doc.svg');}
.mnt-ic-guide  {--mnt-ic:url('/asset/images/mypage-notice/link-guide.svg');}
.mnt-ic-down   {--mnt-ic:url('/asset/images/mypage-notice/download.svg');}

/* ===== 헤더 (상단 바 + 히어로) — Figma 1119:8351 / 1119:8558 ===== */
.mnt-head {position:sticky; top:0; z-index:20; background:var(--card);}
.mnt-bar {display:flex; align-items:center; gap:15px; padding:21px 27px; border-bottom:1.92px solid var(--line);}
.mnt-back, .mnt-share {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:19px;}
.mnt-back img, .mnt-share img {width:38px; height:38px;}
.churchro.dark-mode .mnt-back img, .churchro.dark-mode .mnt-share img {filter:invert(1) brightness(1.6);}
.mnt-bar h1 {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink);}

/* 히어로 (네이비→teal 그라데이션) — Figma 1119:8558 */
.mnt-hero {position:relative; display:flex; align-items:center; gap:23px; padding:31px 35px 38px; overflow:hidden;
	background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 55%, #0F766E 100%);}
.mnt-hero::before {content:''; position:absolute; right:-77px; top:-77px; width:288px; height:288px; border-radius:50%; background:rgba(255,255,255,.04);}
.mnt-hero::after {content:''; position:absolute; left:-19px; bottom:-38px; width:192px; height:192px; border-radius:50%; background:rgba(13,148,136,.1);}
.mnt-hero-ic {position:relative; z-index:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:85px; height:85px; border:1.92px solid rgba(255,255,255,.18); border-radius:25px; background:rgba(255,255,255,.12);}
.mnt-hero-ic .mnt-ic {width:46px; height:46px; color:#fff;}
.mnt-hero-tx {position:relative; z-index:1; display:flex; flex-direction:column; gap:6px;}
.mnt-hero-tx b {font-size:33px; font-weight:800; color:#fff;}
.mnt-hero-tx span {font-size:21px; color:rgba(255,255,255,.55);}

/* ===== 카테고리 탭 (pill) — Figma 1119:8361 ===== */
.mnt-cats {display:flex; gap:10.8px; padding:19px 27px; overflow-x:auto; scrollbar-width:none; background:var(--card); border-bottom:1.92px solid var(--line);}
.mnt-cats::-webkit-scrollbar {display:none;}
.mnt-cat {flex:0 0 auto; padding:11px 27px; border:1.92px solid var(--line); border-radius:38px; background:var(--snow); color:var(--body); font-size:23px; font-weight:600; white-space:nowrap;}
.mnt-cat.on {border-color:var(--teal-2); background:var(--teal-2); color:#fff; font-weight:700;}

/* ===== 목록 본문 ===== */
.mnt-body {flex:1; padding-bottom:170px;}

/* 고정 공지 블록 — Figma 1119:8375 */
.mnt-pinned {background:var(--card); border-bottom:11.52px solid var(--snow); padding-bottom:11px;}
.mnt-pin-head {display:flex; align-items:center; gap:9.6px; padding:15px 27px 8px;}
.mnt-pin-head .mnt-ic {width:23px; height:23px; color:var(--sub);}
.mnt-pin-head b {font-size:19px; font-weight:700; color:var(--sub);}

/* 공지 행 (목록/고정 공용) — Figma 1119:8381 / 1119:8418 */
.mnt-row {display:flex; gap:23px; align-items:center; padding:25px 27px; border-bottom:1.92px solid var(--line); background:var(--card);}
.mnt-row:last-child {border-bottom:0;}
.mnt-row.pin {background:linear-gradient(90deg, rgba(13,148,136,.04) 0%, rgba(13,148,136,0) 100%);}
.mnt-dot {flex:0 0 auto; width:13px; height:13px; border-radius:50%; background:#DC2626;}
.churchro.dark-mode .mnt-dot {background:#F87171;}
.mnt-rbody {flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;}
.mnt-tags {display:flex; flex-wrap:wrap; align-items:center; gap:11.5px;}

/* 카테고리 뱃지 (색상별) — Figma 1119:8386 ... */
.mnt-badge {display:inline-flex; align-items:center; gap:5.76px; padding:4px 15px; border-radius:38px; font-size:19px; font-weight:700; white-space:nowrap;}
.mnt-badge .mnt-ic {width:19px; height:19px; color:currentColor;}
.mnt-badge.pin     {background:var(--mint); color:var(--teal);}
.mnt-badge.notice  {background:#EFF6FF; color:#1D4ED8;}   /* 서비스 안내 */
.mnt-badge.update  {background:#F0FDF4; color:#16A34A;}   /* 업데이트 */
.mnt-badge.event   {background:#FFF7ED; color:#EA580C;}   /* 이벤트 */
.mnt-badge.policy  {background:#F5F3FF; color:#7C3AED;}   /* 정책 변경 */
.mnt-badge.check   {background:#F3F4F6; color:#374151;}   /* 점검/기타 */
.churchro.dark-mode .mnt-badge.notice {background:rgba(29,78,216,.18); color:#93C5FD;}
.churchro.dark-mode .mnt-badge.update {background:rgba(22,163,74,.18); color:#86EFAC;}
.churchro.dark-mode .mnt-badge.event  {background:rgba(234,88,12,.18); color:#FDBA74;}
.churchro.dark-mode .mnt-badge.policy {background:rgba(124,58,237,.18); color:#C4B5FD;}
.churchro.dark-mode .mnt-badge.check  {background:rgba(255,255,255,.06); color:var(--body);}

/* NEW 뱃지 (빨강) — Figma 1119:8393 */
.mnt-new {display:inline-flex; align-items:center; padding:2px 11px; border-radius:19px; background:#DC2626; color:#fff; font-size:17px; font-weight:700; line-height:1.4;}

.mnt-rtitle {font-size:25px; font-weight:700; color:var(--ink); line-height:1.4;
	overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mnt-meta {display:flex; align-items:center; gap:15px;}
.mnt-meta .m {display:flex; align-items:center; gap:5.76px; font-size:19px; color:var(--sub);}
.mnt-meta .m .mnt-ic {width:21px; height:21px; color:var(--sub);}
.mnt-row-chev {flex:0 0 auto; align-self:center; color:var(--sub);}
.mnt-row-chev .mnt-ic {width:29px; height:29px;}

/* 목록 섹션 헤더 (전체 공지 · N개) — Figma 1119:8416 */
.mnt-lhead {padding:19px 27px 9px; background:var(--card); border-bottom:1.92px solid var(--line); font-size:19px; font-weight:700; color:var(--sub);}

/* 썸네일(고정 첫 행 우측 아이콘 박스) — Figma 1119:8399 */
.mnt-rthumb {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:115px; height:115px; border:1.92px solid var(--line); border-radius:17px;
	background:linear-gradient(135deg, var(--mint), #EFF6FF); font-size:42px;}
.churchro.dark-mode .mnt-rthumb {background:rgba(255,255,255,.05);}

/* ===================================================================
 * 공지 상세 (이벤트 / 업데이트 공용) — Figma 1119:8571 / 1119:8707
 * =================================================================== */
.mnt-dwrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 상세 헤더 (뒤로 + 제목 + 공유) — Figma 1119:8581 */
.mnt-dhead {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:15px; padding:19px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mnt-dhead h1 {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink);}

.mnt-dbody {flex:1; padding-bottom:170px;}

/* 제목 영역 — Figma 1119:8592 */
.mnt-dtitle {display:flex; flex-direction:column; gap:17px; padding:34px 35px 28px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mnt-dtitle .mnt-tags {gap:11.5px;}
.mnt-dtitle h2 {font-size:35px; font-weight:800; color:var(--ink); line-height:1.4;}
.mnt-dmeta {display:flex; align-items:center; gap:23px;}
.mnt-dmeta .m {display:flex; align-items:center; gap:7.68px; font-size:21px; color:var(--sub);}
.mnt-dmeta .m .mnt-ic {width:23px; height:23px; color:var(--sub);}

/* 본문 카드 — Figma 1119:8616 */
.mnt-dcontent {display:flex; flex-direction:column; gap:24px; padding:34px 35px 36px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mnt-dbanner {display:flex; align-items:center; justify-content:center; height:307px; border:1.92px solid var(--line); border-radius:19px;
	background:linear-gradient(135deg, var(--mint), #EFF6FF);}
.churchro.dark-mode .mnt-dbanner {background:rgba(255,255,255,.05);}
.mnt-dbanner .mnt-ic {width:92px; height:92px; color:var(--teal);}
.mnt-dtext {display:flex; flex-direction:column; gap:21px;}
.mnt-dtext p {font-size:25px; color:var(--body); line-height:1.9;}
.mnt-dtext p b {color:var(--ink); font-weight:700;}
.mnt-dtext h3 {font-size:25px; font-weight:700; color:var(--ink); line-height:1.9;}

/* 강조 박스 (이벤트 정보) — Figma 1119:8632 */
.mnt-dquote {padding:23px 31px; border-left:5.76px solid var(--teal-2); border-radius:0 15px 15px 0; background:var(--mint); color:var(--teal); font-size:23px; line-height:1.7;}
.mnt-dquote p + p {margin-top:3px;}
.mnt-dquote b {color:var(--ink); font-weight:700;}

/* 경고 박스 — Figma 1119:8638 */
.mnt-dwarn {display:flex; gap:13px; padding:23px 27px; border:1.92px solid #FDE68A; border-radius:15px; background:var(--cream);}
.mnt-dwarn .mnt-ic {flex:0 0 auto; width:27px; height:27px; margin-top:3px; color:#92400E;}
.churchro.dark-mode .mnt-dwarn .mnt-ic {color:#FCD34D;}
.mnt-dwarn p {font-size:23px; color:#92400E; line-height:1.7;}
.churchro.dark-mode .mnt-dwarn p {color:#FCD34D;}

/* 관련 안내 — Figma 1119:8646 */
.mnt-related {display:flex; flex-direction:column; gap:11.5px; padding:27px 35px 29px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mnt-related > b {font-size:23px; font-weight:700; color:var(--sub);}
.mnt-rellink {display:flex; align-items:center; gap:15px; padding:21px 23px; border:1.92px solid var(--line); border-radius:15px; background:var(--snow);}
.mnt-rellink .ic {flex:0 0 auto; color:var(--teal);}
.mnt-rellink .ic .mnt-ic {width:29px; height:29px;}
.mnt-rellink span {flex:1; min-width:0; font-size:23px; font-weight:600; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mnt-rellink .arr {flex:0 0 auto; color:var(--sub);}
.mnt-rellink .arr .mnt-ic {width:25px; height:25px;}

/* 이전/다음 글 — Figma 1119:8666 */
.mnt-prevnext {background:var(--card);}
.mnt-pn {display:flex; align-items:center; gap:19px; padding:25px 35px; border-top:1.92px solid var(--line);}
.mnt-pn .k {flex:0 0 auto; min-width:46px; font-size:19px; font-weight:700; color:var(--sub);}
.mnt-pn .t {flex:1; min-width:0; font-size:23px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mnt-pn .arr {flex:0 0 auto; color:var(--sub);}
.mnt-pn .arr .mnt-ic {width:27px; height:27px;}

/* ===================================================================
 * 업데이트 버전 상세 (?type=update) — Figma 1119:8707
 * =================================================================== */
/* 버전 히어로 카드 — Figma 1119:8718 */
.mnt-vhero {position:relative; overflow:hidden; padding:35px; background:linear-gradient(136deg, #0F766E 0%, #0D9488 100%);}
.mnt-vhero::after {content:''; position:absolute; right:-58px; top:-58px; width:230px; height:230px; border-radius:50%; background:rgba(255,255,255,.06);}
.mnt-vbadges {position:relative; z-index:1; display:flex; align-items:center; gap:13px; margin-bottom:21px;}
.mnt-vchip {padding:6px 19px; border-radius:38px; background:rgba(255,255,255,.18); color:#fff; font-size:23px; font-weight:800;}
.mnt-vchip.latest {background:rgba(255,255,255,.92); color:var(--teal);}
.mnt-vhero h2 {position:relative; z-index:1; font-size:38px; font-weight:800; color:#fff; line-height:1.35; margin-bottom:11px;}
.mnt-vhero .date {position:relative; z-index:1; font-size:21px; color:rgba(255,255,255,.7); margin-bottom:27px;}
.mnt-vstats {position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:13px;}
.mnt-vstat {display:flex; flex-direction:column; align-items:center; gap:5px; padding:21px 8px; border-radius:17px; background:rgba(255,255,255,.12);}
.mnt-vstat b {font-size:42px; font-weight:800; color:#fff;}
.mnt-vstat span {font-size:19px; color:rgba(255,255,255,.8);}

/* 변경 섹션 (새 기능 / 개선 / 버그 수정) — Figma 1119:8730 ... */
.mnt-vsec {padding:31px 35px 13px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mnt-vsec + .mnt-vsec {border-top:11.52px solid var(--snow);}
.mnt-vsec h3 {display:flex; align-items:center; gap:11.5px; margin-bottom:21px; font-size:27px; font-weight:800; color:var(--ink);}
.mnt-vitem {display:flex; gap:17px; padding:0 0 27px;}
.mnt-vitem .vdot {flex:0 0 auto; width:15px; height:15px; margin-top:9px; border-radius:50%;}
.mnt-vsec.feat .vdot {background:#16A34A;}
.mnt-vsec.imp  .vdot {background:#2563EB;}
.mnt-vsec.fix  .vdot {background:#DC2626;}
.mnt-vitem .vbody {flex:1; min-width:0; display:flex; flex-direction:column; gap:7px;}
.mnt-vitem b {font-size:25px; font-weight:700; color:var(--ink); line-height:1.5;}
.mnt-vitem p {font-size:22px; color:var(--body); line-height:1.7;}

/* 이전 버전 목록 — Figma 1119:8830 ... */
.mnt-vprev {padding:31px 35px; background:var(--card); border-top:11.52px solid var(--snow);}
.mnt-vprev > b {display:block; margin-bottom:19px; font-size:23px; font-weight:700; color:var(--sub);}
.mnt-vplist {display:flex; flex-direction:column; gap:13px;}
.mnt-vprow {display:flex; align-items:center; gap:19px; padding:23px 27px; border:1.92px solid var(--line); border-radius:17px; background:var(--snow);}
.mnt-vprow .ver {flex:0 0 auto; font-size:25px; font-weight:800; color:var(--ink);}
.mnt-vprow .vdate {flex:1; min-width:0; font-size:21px; color:var(--sub);}
.mnt-vprow .vtags {display:flex; gap:9.6px;}
.mnt-vprow .vtag {padding:3px 13px; border-radius:38px; font-size:18px; font-weight:700; white-space:nowrap;}
.mnt-vprow .vtag.feat {background:#F0FDF4; color:#16A34A;}
.mnt-vprow .vtag.imp  {background:#EFF6FF; color:#2563EB;}
.mnt-vprow .vtag.fix  {background:#FEF2F2; color:#DC2626;}
.churchro.dark-mode .mnt-vprow .vtag.feat {background:rgba(22,163,74,.18); color:#86EFAC;}
.churchro.dark-mode .mnt-vprow .vtag.imp  {background:rgba(37,99,235,.18); color:#93C5FD;}
.churchro.dark-mode .mnt-vprow .vtag.fix  {background:rgba(220,38,38,.18); color:#FCA5A5;}

/* CTA (앱스토어에서 업데이트) — Figma 1119:8868 */
.mnt-vcta {margin:31px 35px; padding:31px; border-radius:19px; background:linear-gradient(136deg, #0F766E 0%, #0D9488 100%);
	display:flex; align-items:center; justify-content:center; gap:13px; color:#fff; font-size:27px; font-weight:800;}
/* base.css a:link{color:inherit}(0,1,1)가 .mnt-vcta(0,1,0)를 이김 → :link로 흰색 고정 */
.mnt-vcta:link, .mnt-vcta:visited {color:#fff;}
.mnt-vcta .mnt-ic {width:34px; height:34px; color:#fff;}

/* ===== 하단 탭바 (fixed) — Figma 1119:8534 ===== */
.mnt-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);}
.churchro.dark-mode .mnt-nav {background:#0F1826;}
.mnt-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mnt-nav .tab img {width:42px; height:42px;}
.mnt-nav .tab.on {color:var(--teal);}
.mnt-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mnt-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);}
.mnt-nav .tab-fab .fab img {width:48px; height:48px;}

@media (hover:hover) and (pointer:fine) {
	.mnt-row:hover, .mnt-rellink:hover, .mnt-vprow:hover, .mnt-pn:hover {background:var(--snow);}
	.mnt-row.pin:hover {background:var(--mint);}
}