@charset "utf-8";

/* ============================================================
   마이페이지 · 개인정보 처리방침 — Figma 1119:10718
   ① 요약(MyPagePrivacy) 1119:9955
   ② 상세(MyPagePrivacyDetail) 1119:10226
   ③ 현황(MyPagePrivacyStatus) 1119:10416
   720px 뷰포트 → Figma 1.92× = CSS px (teal 디자인 시스템)
   ============================================================ */

/* ===== 공통 래퍼 / 헤더 (세 화면 공용) ===== */
.mpv-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

.mpv-head-act {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px;}
.mpv-head-act img {width:38px; height:38px;}
.mpv-head-spacer {flex:0 0 auto; width:54px;}

/* ===== 히어로 그라데이션 (요약·현황 공용) ===== */
.mpv-hero {position:relative; overflow:hidden; padding:31px 35px 38px; background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 55%, #0F766E 100%);}
.mpv-hero::before {content:''; position:absolute; top:-58px; right:-58px; width:288px; height:288px; border-radius:50%; background:rgba(255,255,255,.04);}
.mpv-hero::after {content:''; position:absolute; bottom:-58px; left:-58px; width:192px; height:192px; border-radius:50%; background:rgba(13,148,136,.18);}
.mpv-hero > * {position:relative; z-index:1;}

/* ── 요약 히어로 헤더 줄 ── */
.mpv-hero-top {display:flex; align-items:center; gap:13px; margin-bottom:21px;}
.mpv-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);}
.mpv-hero-ic img {width:46px; height:46px;}
.mpv-hero-tt {display:flex; flex-direction:column; gap:4px;}
.mpv-hero-tt b {font-size:33px; font-weight:800; color:#fff;}
.mpv-hero-tt span {font-size:21px; color:rgba(255,255,255,.55);}

/* ── 히어로 배지 줄 ── */
.mpv-badges {display:flex; flex-wrap:wrap; gap:11px; margin-bottom:21px;}
.mpv-badge {display:flex; align-items:center; gap:7px; padding:9px 21px; border-radius:38px; background:rgba(255,255,255,.1); border:1.92px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); font-size:19px; font-weight:600;}
.mpv-badge img {width:21px; height:21px;}

/* ── CTA 카드 (요약 → 현황 이동) ── */
.mpv-cta {display:flex; align-items:center; gap:15px; width:100%; padding:23px 27px; border-radius:19px; background:rgba(255,255,255,.1); border:1.92px solid rgba(255,255,255,.2); text-align:left;}
.mpv-cta-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:65px; height:65px; border-radius:17px; background:#0D9488;}
.mpv-cta-ic img {width:33px; height:33px;}
.mpv-cta-tt {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.mpv-cta-tt b {font-size:23px; font-weight:700; color:#fff;}
.mpv-cta-tt span {font-size:19px; color:rgba(255,255,255,.55);}
.mpv-cta > img {flex:0 0 auto; width:27px; height:27px;}

/* ===== 본문 공용 ===== */
.mpv-body {flex:1; padding:0 0 135px;}
.mpv-sec-label {padding:23px 27px 12px; font-size:23px; font-weight:800; color:var(--ink);}

/* ============================================================
   ① 요약 — 수집 항목별 처리 요약 카드
   ============================================================ */
.mpv-cards {display:flex; flex-direction:column; gap:21px; padding:0 27px;}
.mpv-card {display:flex; flex-direction:column; gap:17px; padding:29px; background:var(--card); border:1.92px solid var(--line); border-radius:19px; box-shadow:0 1.92px 5.76px rgba(15,23,42,.05);}
.mpv-card-head {display:flex; align-items:center; gap:15px;}
.mpv-card-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:77px; height:77px; border-radius:21px;}
.mpv-card-ic img {width:38px; height:38px;}
.mpv-card-ic.t-required {background:#F0FDFA;}
.mpv-card-ic.t-church {background:#FFFBEB;}
.mpv-card-ic.t-activity {background:#EFF6FF;}
.mpv-card-ic.t-auto {background:#F5F3FF;}
.mpv-card-ic.t-optional {background:#F0FDF4;}
.mpv-card-head h3 {flex:1; font-size:27px; font-weight:700; color:var(--ink);}
.mpv-card-head .chev {flex:0 0 auto; width:31px; height:31px;}

.mpv-chips {display:flex; flex-wrap:wrap; gap:11px;}
.mpv-chip {padding:8px 19px; border-radius:38px; background:var(--snow); border:1.92px solid var(--line); color:var(--body); font-size:21px; font-weight:600;}

.mpv-card-meta {display:flex; flex-wrap:wrap; gap:11px 25px; padding-top:6px;}
.mpv-meta {display:flex; align-items:center; gap:8px; font-size:21px; color:var(--sub);}
.mpv-meta img {width:23px; height:23px;}
.mpv-meta b {font-weight:600; color:var(--teal);}

/* ── 개인정보 주체 권리 패널 ── */
.mpv-rights {margin:23px 27px 0; padding:29px; background:#EEF2FF; border:1.92px solid #C7D2FE; border-radius:19px;}
.mpv-rights-head {display:flex; align-items:center; gap:11px; margin-bottom:17px;}
.mpv-rights-head img {width:29px; height:29px;}
.mpv-rights-head b {font-size:25px; font-weight:800; color:#1E3A5F;}
.mpv-rights ol {display:flex; flex-direction:column;}
.mpv-rights li {display:flex; align-items:flex-start; gap:13px; padding:15px 0; font-size:23px; line-height:34px; color:#1E3A5F;}
.mpv-rights li + li {border-top:1.92px solid #C7D2FE;}
.mpv-rights li .n {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:21px; background:#1E3A5F; color:#fff; font-size:19px; font-weight:700;}
.mpv-rights li b {font-weight:700;}

/* 다크모드 — 인디고 권리 패널 톤 보정 */
.churchro.dark-mode .mpv-rights {background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.4);}
.churchro.dark-mode .mpv-rights-head b,
.churchro.dark-mode .mpv-rights li {color:#C7D2FE;}
.churchro.dark-mode .mpv-rights li + li {border-top-color:rgba(199,210,254,.25);}
.churchro.dark-mode .mpv-rights li .n {background:#6366F1;}
/* 다크모드 — 카드 아이콘 타일 톤 보정 */
.churchro.dark-mode .mpv-card-ic.t-required {background:rgba(15,118,110,.18);}
.churchro.dark-mode .mpv-card-ic.t-church {background:rgba(217,119,6,.16);}
.churchro.dark-mode .mpv-card-ic.t-activity {background:rgba(29,78,216,.16);}
.churchro.dark-mode .mpv-card-ic.t-auto {background:rgba(124,58,237,.16);}
.churchro.dark-mode .mpv-card-ic.t-optional {background:rgba(22,163,74,.16);}

/* ============================================================
   ② 상세 — 처리방침 본문(조문)
   ============================================================ */
/* 문서 제목 블록 */
.mpv-doc-title {display:flex; flex-direction:column; gap:15px; padding:31px 35px 25px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mpv-doc-badge {align-self:flex-start; padding:5px 17px; border-radius:38px; background:#FEF2F2; color:#DC2626; font-size:19px; font-weight:700;}
.churchro.dark-mode .mpv-doc-badge {background:rgba(220,38,38,.16); color:#FCA5A5;}
.mpv-doc-title h2 {font-size:33px; font-weight:800; color:var(--ink);}
.mpv-doc-meta {display:flex; flex-wrap:wrap; gap:11px 23px;}
.mpv-doc-meta span {display:flex; align-items:center; gap:8px; font-size:21px; color:var(--sub);}
.mpv-doc-meta img {width:23px; height:23px;}

/* 조문 섹션 */
.mpv-art {display:flex; flex-direction:column; gap:17px; padding:33px 35px 40px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mpv-art-head {display:flex; align-items:center; gap:15px;}
.mpv-art-no {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:25px; background:var(--teal); color:#fff; font-size:21px; font-weight:700;}
.mpv-art-head h3 {flex:1; font-size:27px; font-weight:800; color:#1E3A5F;}
.churchro.dark-mode .mpv-art-head h3 {color:#93C5FD;}
.mpv-art-intro {font-size:23px; line-height:44px; color:var(--body);}

/* 조문 사이 구분 바 */
.mpv-art-gap {height:15px; background:var(--snow); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line);}

/* 수집 항목 표 */
.mpv-table {border:1.92px solid var(--line); border-radius:15px; overflow:hidden;}
.mpv-trow {display:flex;}
.mpv-trow + .mpv-trow {border-top:1.92px solid var(--line);}
.mpv-trow.head {background:#EEF2FF;}
.churchro.dark-mode .mpv-trow.head {background:rgba(99,102,241,.12);}
.mpv-tc {padding:15px 21px; font-size:21px; line-height:33px; color:var(--body); border-right:1.92px solid var(--line);}
.mpv-tc:last-child {border-right:0;}
.mpv-tc.c1 {flex:0 0 108px;}
.mpv-tc.c2 {flex:1; min-width:0; word-break:break-all;}
.mpv-tc.c3 {flex:0 0 128px;}
.mpv-trow.head .mpv-tc {color:#1E3A5F; font-weight:700; border-right-color:#C7D2FE;}
.churchro.dark-mode .mpv-trow.head .mpv-tc {color:#C7D2FE;}
.mpv-trow.r-required {background:#F0FDFA;}
.mpv-trow.r-auto {background:var(--snow);}
.churchro.dark-mode .mpv-trow.r-required {background:rgba(15,118,110,.1);}
.mpv-trow .mpv-tc.key {font-weight:700; color:var(--ink);}

/* 정보 콜아웃(teal) */
.mpv-callout {padding:19px 31px; border-left:5.76px solid #0D9488; border-radius:0 15px 15px 0; background:#F0FDFA; font-size:21px; line-height:39px; color:var(--teal);}
.churchro.dark-mode .mpv-callout {background:rgba(15,118,110,.12);}

/* 본문 불릿 리스트 */
.mpv-list {display:flex; flex-direction:column; gap:6px; padding-left:33px; list-style:disc;}
.mpv-list li {font-size:23px; line-height:44px; color:var(--body);}
.mpv-list li b {font-weight:700; color:var(--ink);}

/* 경고 박스(노랑) */
.mpv-warn {display:flex; gap:13px; padding:23px 27px; background:#FFFBEB; border:1.92px solid #FDE68A; border-radius:15px;}
.mpv-warn img {flex:0 0 auto; width:27px; height:27px; margin-top:4px;}
.mpv-warn p {font-size:21px; line-height:39px; color:#92400E;}
.churchro.dark-mode .mpv-warn {background:rgba(146,64,14,.16); border-color:rgba(253,230,138,.3);}
.churchro.dark-mode .mpv-warn p {color:#FCD34D;}

/* 개인정보 보호 담당자 카드 */
.mpv-officer {margin:42px 35px 23px; padding:29px; background:var(--card); border:1.92px solid var(--line); border-radius:19px;}
.mpv-officer-head {display:flex; align-items:center; gap:11px; margin-bottom:17px;}
.mpv-officer-head img {width:27px; height:27px;}
.mpv-officer-head b {font-size:23px; font-weight:800; color:var(--ink);}
.mpv-officer-row {display:flex; gap:15px; padding:15px 0;}
.mpv-officer-row + .mpv-officer-row {border-top:1.92px solid var(--line);}
.mpv-officer-row .k {flex:0 0 130px; font-size:23px; font-weight:600; color:var(--sub);}
.mpv-officer-row .v {flex:1; min-width:0; font-size:23px; color:var(--body); word-break:break-all;}

/* ============================================================
   ③ 현황 — 내 개인정보 현황
   ============================================================ */
/* 프로필 히어로 */
.mpv-pf {display:flex; align-items:center; gap:21px; margin-bottom:23px;}
.mpv-pf-avatar {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:42px; background:rgba(255,255,255,.15); border:3.84px solid rgba(255,255,255,.25);}
.mpv-pf-avatar img {width:42px; height:42px;}
.mpv-pf-info {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.mpv-pf-info .nm {font-size:29px; font-weight:800; color:#fff;}
.mpv-pf-info .sub {font-size:21px; color:rgba(255,255,255,.55);}
.mpv-pf-badge {flex:0 0 auto; padding:6px 19px; border-radius:38px; background:#0D9488; color:#fff; font-size:19px; font-weight:700;}

/* 통계 그리드 */
.mpv-stats {display:grid; grid-template-columns:repeat(3, 1fr); background:rgba(255,255,255,.08); border:1.92px solid rgba(255,255,255,.12); border-radius:19px; overflow:hidden;}
.mpv-stat {display:flex; flex-direction:column; align-items:center; gap:5px; padding:21px 0;}
.mpv-stat + .mpv-stat {border-left:1.92px solid rgba(255,255,255,.1);}
.mpv-stat .n {font-size:31px; font-weight:800; color:#fff;}
.mpv-stat .k {font-size:19px; color:rgba(255,255,255,.5);}

/* 데이터 섹션 */
.mpv-dsec {background:var(--card); border-bottom:1.92px solid var(--line);}
.mpv-dsec-head {display:flex; align-items:center; gap:13px; padding:23px 35px 12px;}
.mpv-dsec-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:15px;}
.mpv-dsec-ic img {width:27px; height:27px;}
.mpv-dsec-ic.t-required {background:#F0FDFA;}
.mpv-dsec-ic.t-church {background:#FFFBEB;}
.mpv-dsec-ic.t-optional {background:#EFF6FF;}
.mpv-dsec-ic.t-auto {background:#F5F3FF;}
.churchro.dark-mode .mpv-dsec-ic.t-required {background:rgba(15,118,110,.18);}
.churchro.dark-mode .mpv-dsec-ic.t-church {background:rgba(217,119,6,.16);}
.churchro.dark-mode .mpv-dsec-ic.t-optional {background:rgba(29,78,216,.16);}
.churchro.dark-mode .mpv-dsec-ic.t-auto {background:rgba(124,58,237,.16);}
.mpv-dsec-head h3 {flex:1; font-size:23px; font-weight:800; color:var(--ink);}
.mpv-dsec-head .cnt {flex:0 0 auto; font-size:21px; font-weight:600; color:var(--sub);}

/* 데이터 행 */
.mpv-drow {display:flex; align-items:center; gap:13px; padding:25px 35px; border-top:1.92px solid var(--line);}
.mpv-drow .lbl {flex:0 0 auto; font-size:25px; font-weight:600; color:var(--ink);}
.mpv-drow .val {flex:1; min-width:0; font-size:23px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mpv-drow .val.muted {color:var(--sub);}
.mpv-drow .val.ok {color:var(--teal); font-weight:700;}
.mpv-drow .val.mask {letter-spacing:1.15px;}
.mpv-drow .tag {flex:0 0 auto; padding:4px 14px; border-radius:38px; font-size:19px; font-weight:700;}
.mpv-drow .tag.t-required {background:#FEF2F2; color:#DC2626;}
.mpv-drow .tag.t-optional {background:#F0FDF4; color:#16A34A;}
.mpv-drow .tag.t-auto {background:#EFF6FF; color:#1D4ED8;}
.churchro.dark-mode .mpv-drow .tag.t-required {background:rgba(220,38,38,.16); color:#FCA5A5;}
.churchro.dark-mode .mpv-drow .tag.t-optional {background:rgba(22,163,74,.16); color:#86EFAC;}
.churchro.dark-mode .mpv-drow .tag.t-auto {background:rgba(29,78,216,.16); color:#93C5FD;}
.mpv-drow .acts {flex:0 0 auto; display:flex; align-items:center; gap:13px;}
.mpv-act {flex:0 0 auto; font-size:21px; font-weight:700; color:#0D9488;}
.mpv-act.del {color:#DC2626;}
.churchro.dark-mode .mpv-act.del {color:#FCA5A5;}

/* 권리 행사 카드 */
.mpv-rsec-label {padding:31px 35px 12px; font-size:23px; font-weight:800; color:var(--ink);}
.mpv-rights-acts {display:flex; flex-direction:column; gap:15px; padding:0 27px;}
.mpv-ract {display:flex; align-items:center; gap:17px; padding:25px 29px; background:var(--card); border:1.92px solid var(--line); border-radius:19px; text-align:left;}
.mpv-ract-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; border-radius:19px;}
.mpv-ract-ic img {width:35px; height:35px;}
.mpv-ract-ic.t-view {background:#F0FDFA;}
.mpv-ract-ic.t-edit {background:#EFF6FF;}
.mpv-ract-ic.t-stop {background:#FFFBEB;}
.mpv-ract-ic.t-delete {background:#FEF2F2;}
.churchro.dark-mode .mpv-ract-ic.t-view {background:rgba(15,118,110,.18);}
.churchro.dark-mode .mpv-ract-ic.t-edit {background:rgba(29,78,216,.16);}
.churchro.dark-mode .mpv-ract-ic.t-stop {background:rgba(217,119,6,.16);}
.churchro.dark-mode .mpv-ract-ic.t-delete {background:rgba(220,38,38,.16);}
.mpv-ract-tt {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.mpv-ract-tt b {font-size:25px; font-weight:700; color:var(--ink);}
.mpv-ract-tt span {font-size:21px; color:var(--sub);}
.mpv-ract > .chev {flex:0 0 auto; width:29px; height:29px;}

/* ===== 하단 탭바 (fixed) — 세 화면 공용 ===== */
.mpv-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);}
.mpv-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mpv-nav .tab img {width:42px; height:42px;}
.mpv-nav .tab.on {color:var(--teal);}
.mpv-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mpv-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,.4);}
.mpv-nav .tab-fab .fab img {width:48px; height:48px;}

@media (hover:hover) and (pointer:fine) {
	.mpv-card:hover, .mpv-cta:hover, .mpv-ract:hover {background:var(--snow);}
	.churchro.dark-mode .mpv-card:hover, .churchro.dark-mode .mpv-ract:hover {background:var(--snow);}
}