@charset "utf-8";

/* ===== 마이페이지 · 정보동의 설정 — Figma 1119:11455 (teal) =====
   720px viewport · Figma 1.92× = CSS px
   ① 메인 1119:10951 / ② 동의 항목 상세 바텀시트 1119:11203 / ③ 완료 1119:11336 */

.mcs-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

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

/* ===== 본문 스크롤 영역 ===== */
.mcs-body {flex:1; padding:0 0 170px;}

/* ===== 요약 카드 (3 동의함 / 2 동의안함 / 2 필수) — 1119:10969 ===== */
.mcs-summary {position:relative; margin:0; padding:31px 35px 27px; overflow:hidden;
	background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 55%, #0F766E 100%);}
.mcs-summary::before {content:''; position:absolute; right:-19px; top:-77px; width:288px; height:288px; border-radius:50%; background:rgba(255,255,255,.04);}
.mcs-summary::after {content:''; position:absolute; left:-19px; bottom:-77px; width:192px; height:192px; border-radius:50%; background:rgba(13,148,136,.12);}
.mcs-sum-top {position:relative; z-index:1; display:flex; align-items:center; gap:23px; margin-bottom:23px;}
.mcs-sum-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);}
.mcs-sum-ic img {width:46px; height:46px;}
.mcs-sum-tx {display:flex; flex-direction:column; gap:6px;}
.mcs-sum-tx b {font-size:33px; font-weight:800; color:#fff;}
.mcs-sum-tx span {font-size:21px; color:rgba(255,255,255,.55);}
.mcs-stats {position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, 1fr); border-radius:23px; background:rgba(255,255,255,.08); border:1.92px solid rgba(255,255,255,.12); overflow:hidden;}
.mcs-stat {display:flex; flex-direction:column; align-items:center; gap:6px; padding:21px 12px;}
.mcs-stat + .mcs-stat {border-left:1.92px solid rgba(255,255,255,.1);}
.mcs-stat b {font-size:38px; font-weight:800; line-height:1; color:rgba(255,255,255,.55);}
.mcs-stat.ok b {color:#5EEAD4;}
.mcs-stat.no b {color:rgba(255,255,255,.35);}
.mcs-stat span {font-size:19px; color:rgba(255,255,255,.5); text-align:center;}

/* ===== 동의 그룹 카드 ===== */
.mcs-group {background:var(--card); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line);}
.mcs-group + .mcs-group {margin-top:15px;}

/* 그룹 헤더 (아이콘 칩 + 제목 + 배지) */
.mcs-ghead {display:flex; align-items:center; gap:15px; padding:23px 35px 15px;}
.mcs-gchip {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:17px;}
.mcs-gchip img {width:29px; height:29px;}
.mcs-ghead b {flex:1; font-size:23px; font-weight:800; color:var(--ink);}
.mcs-badge {flex:0 0 auto; padding:4px 15px; border-radius:38px; font-size:19px; font-weight:700;}
.mcs-badge.sel {background:#F0FDF4; color:#16A34A;}
.mcs-badge.lock {background:#FEF2F2; color:var(--red);}

/* 칩/아이콘 배경 톤 */
.tone-pink   {background:#FDF2F8;}
.tone-orange {background:#FFF7ED;}
.tone-amber  {background:#FFFBEB;}
.tone-blue   {background:#EFF6FF;}
.tone-violet {background:#F5F3FF;}
.tone-indigo {background:#EEF2FF;}
.tone-red    {background:#FEF2F2;}

/* ===== 동의 항목 행 ===== */
.mcs-item {display:flex; align-items:center; gap:0; padding:27px 35px; border-top:1.92px solid var(--line);}
.mcs-item-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; margin-right:23px; border-radius:21px;}
.mcs-item-ic img {width:35px; height:35px;}
.mcs-item-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.mcs-item-tx .t {font-size:25px; font-weight:700; color:var(--ink);}
.mcs-item.is-required .mcs-item-tx .t {color:var(--ink);}
.mcs-item-tx .d {font-size:21px; color:var(--sub);}
.mcs-item-tx .s {margin-top:3px; font-size:19px; font-weight:600; color:var(--sub);}
.mcs-item-tx .s.on {color:var(--teal);}

/* 토글 + 보기(상세) */
.mcs-item-ctrl {flex:0 0 auto; display:flex; align-items:center; gap:15px; padding-left:19px;}
.mcs-view {display:flex; align-items:center; justify-content:center; width:29px; height:29px;}
.mcs-view img {width:24px; height:24px;}

/* 토글 스위치 (.switch 재사용 — 사이즈 미세 조정) */
.mcs-group .switch {width:92px; height:52px; border-radius:26px; background:var(--mute);}
.mcs-group .switch::after {top:5px; left:5px; width:42px; height:42px;}
.mcs-group .switch.on {background:var(--teal-2);}
.mcs-group .switch.on::after {transform:translateX(40px);}
.mcs-group .switch:disabled {opacity:1; cursor:default;}

/* 필수 배지 (행 우측) */
.mcs-req {flex:0 0 auto; padding:6px 17px; border-radius:38px; background:#FEF2F2; color:var(--red); font-size:19px; font-weight:700;}

/* ===== 저장 버튼 (sticky) ===== */
.mcs-savebar {position:sticky; bottom:124px; z-index:15; padding:25px 27px 31px; background:var(--card); border-top:1.92px solid var(--line);}
.mcs-save {display:flex; align-items:center; justify-content:center; gap:13px; width:100%; height:88px; border:0; border-radius:19px; background:linear-gradient(136deg, #0F766E 0%, #0D9488 100%); color:#fff; font-size:29px; font-weight:700; cursor:pointer;}
.mcs-save img {width:33px; height:33px;}

/* ===== 하단 탭바 (fixed) — 다른 마이페이지 nav 규약과 동일 ===== */
.mcs-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 .mcs-nav {background:#0F1826;}
.mcs-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mcs-nav .tab img {width:42px; height:42px;}
.mcs-nav .tab.on {color:var(--teal);}
.mcs-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mcs-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);}
.mcs-nav .tab-fab .fab img {width:48px; height:48px;}

/* ========================================================= */
/* ② 동의 항목 상세 — 바텀시트 (space-share .sa-* 패턴 차용) */
/* ========================================================= */
.mcs-overlay {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:60; width:720px; max-width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(15,23,42,.45); opacity:0; pointer-events:none; transition:opacity .2s ease;}
.mcs-overlay.show {opacity:1; pointer-events:auto;}
.mcs-sheet {display:flex; flex-direction:column; max-height:calc(100% - 60px); background:var(--card); border-radius:42px 42px 0 0; box-shadow:0 -7.68px 30.72px rgba(0,0,0,.18); overflow:hidden; transform:translateY(100%); transition:transform .25s ease;}
.mcs-overlay.show .mcs-sheet {transform:translateY(0);}
.mcs-grip {display:flex; align-items:center; justify-content:center; padding:21px 0 6px;}
.mcs-grip span {width:77px; height:8px; border-radius:8px; background:#CBD5E1;}

.mcs-sheet-head {display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:8px 35px 21px; border-bottom:1.92px solid var(--line);}
.mcs-sheet-head-tx {display:flex; flex-direction:column; gap:5px;}
.mcs-sheet-head-tx b {font-size:31px; font-weight:800; color:var(--ink);}
.mcs-sheet-head-tx span {font-size:21px; color:var(--sub);}
.mcs-sheet-close {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:29px; background:var(--snow);}
.mcs-sheet-close img {width:25px; height:25px;}

.mcs-sheet-body {flex:1; overflow-y:auto; padding:31px 35px 44px;}

/* 시트 상단: 아이콘 + 제목 + 선택 동의 배지 */
.mcs-sh-title {display:flex; align-items:center; gap:23px; margin-bottom:31px;}
.mcs-sh-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:100px; height:100px; border-radius:29px;}
.mcs-sh-ic img {width:50px; height:50px;}
.mcs-sh-tx {display:flex; flex-direction:column; gap:11px;}
.mcs-sh-tx b {font-size:35px; font-weight:800; color:var(--ink);}
.mcs-sh-tag {align-self:flex-start; padding:4px 17px; border-radius:33px; background:#F0FDF4; color:#16A34A; font-size:21px; font-weight:600;}

.mcs-sh-label {margin:31px 0 15px; font-size:23px; font-weight:700; color:var(--ink);}
.mcs-sh-label:first-of-type {margin-top:0;}

/* 수집 항목 chips */
.mcs-chips {display:flex; flex-wrap:wrap; gap:13px;}
.mcs-chip {padding:10px 21px; border:1.92px solid var(--line); border-radius:16px; background:var(--snow); font-size:25px; color:var(--body);}

/* 이용 목적 박스 */
.mcs-purpose {margin-top:8px; padding:25px 29px; border:1.92px solid var(--line); border-radius:23px; background:var(--snow);}
.mcs-purpose-h {display:flex; align-items:center; gap:13px; margin-bottom:6px; font-size:25px; font-weight:700; color:var(--body);}
.mcs-purpose-h img {width:25px; height:25px;}
.mcs-purpose li {display:flex; align-items:center; gap:17px; padding:13px 0; font-size:25px; color:var(--body);}
.mcs-purpose li + li {border-top:1.92px solid var(--line);}
.mcs-purpose li::before {content:''; flex:0 0 auto; width:12px; height:12px; border-radius:50%; background:var(--teal);}

/* 안내 박스 (보유기간 / 동의 거부 안내) */
.mcs-note {display:flex; align-items:flex-start; gap:15px; margin-top:21px; padding:21px 27px; border:1.92px solid var(--line); border-radius:21px; background:var(--snow);}
.mcs-note img {flex:0 0 auto; width:29px; height:29px; margin-top:2px;}
.mcs-note p {font-size:23px; line-height:1.5; color:var(--body);}
.mcs-note.warn {background:#FFFBEB; border-color:#FDE68A;}
.mcs-note.warn p {color:#92400E;}
.mcs-note.warn b {font-weight:700;}

/* 동의 여부 선택 버튼 */
.mcs-choice {display:flex; gap:15px; margin-top:21px;}
.mcs-choice-btn {flex:1; display:flex; align-items:center; justify-content:center; gap:13px; height:81px; border:1.92px solid var(--line); border-radius:19px; background:var(--card); font-size:25px; font-weight:700; color:var(--body); cursor:pointer;}
.mcs-choice-ic {flex:0 0 auto; width:29px; height:29px; background:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;}
.mcs-choice-btn.on {background:linear-gradient(136deg, #0F766E 0%, #0D9488 100%); border-color:transparent; color:#fff;}

/* ========================================================= */
/* ③ 동의 변경 — 완료 (1119:11336) */
/* ========================================================= */
.mcs-done-head {display:flex; align-items:center; justify-content:center; padding:21px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mcs-done-head h1 {font-size:33px; font-weight:800; color:var(--ink);}

.mcs-done-body {flex:1; display:flex; flex-direction:column; align-items:center; padding:61px 46px 170px; background:var(--snow);}
.mcs-done-circle {display:flex; align-items:center; justify-content:center; width:169px; height:169px; border-radius:50%; background:var(--teal); box-shadow:0 19px 44px rgba(15,118,110,.32);}
.mcs-done-circle img {width:84px; height:84px;}
.mcs-done-title {margin-top:42px; font-size:42px; font-weight:800; color:var(--ink); text-align:center;}
.mcs-done-sub {margin-top:15px; font-size:25px; line-height:1.5; color:var(--sub); text-align:center;}

/* 변경된 항목 카드 */
.mcs-done-card {width:100%; margin-top:38px; padding:0; border:1.92px solid var(--line); border-radius:25px; background:var(--card); overflow:hidden;}
.mcs-done-card-h {display:flex; align-items:center; gap:15px; padding:25px 29px; font-size:25px; font-weight:700; color:var(--ink);}
.mcs-done-card-h img {width:25px; height:25px;}
.mcs-done-row {display:flex; align-items:center; gap:19px; padding:21px 29px; border-top:1.92px solid var(--line);}
.mcs-done-row-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%;}
.mcs-done-row-ic.ok {background:#F0FDFA;}
.mcs-done-row-ic.no {background:#FEF2F2;}
.mcs-done-row-ic img {width:25px; height:25px;}
.mcs-done-row .nm {flex:1; font-size:25px; color:var(--ink);}
.mcs-done-row .st {flex:0 0 auto; font-size:23px; font-weight:700;}
.mcs-done-row .st.ok {color:var(--teal);}
.mcs-done-row .st.no {color:var(--red);}

/* 동의 효력 안내 */
.mcs-done-info {width:100%; margin-top:31px; padding:25px 29px; border:1.92px solid #C7D2FE; border-radius:25px; background:#EEF2FF;}
.mcs-done-info-h {display:flex; align-items:center; gap:15px; margin-bottom:13px; font-size:25px; font-weight:700; color:#4338CA;}
.mcs-done-info-h img {width:25px; height:25px;}
.mcs-done-info li {display:flex; gap:13px; padding:6px 0; font-size:23px; line-height:1.5; color:#4F46E5;}
.mcs-done-info li::before {content:'•'; flex:0 0 auto; color:#4F46E5;}

/* 완료 버튼들 */
.mcs-done-btns {width:100%; display:flex; flex-direction:column; gap:15px; margin-top:38px;}
.mcs-done-btn {display:flex; align-items:center; justify-content:center; gap:15px; height:83px; border:1.92px solid var(--line); border-radius:19px; background:var(--card); font-size:27px; font-weight:700; color:var(--body); cursor:pointer; text-decoration:none;}
.mcs-done-btn img {width:31px; height:31px;}
.mcs-done-btn.primary {border-color:transparent; background:linear-gradient(136deg, #0F766E 0%, #0D9488 100%); color:#fff;}

/* ===== 다크모드 ===== */
.churchro.dark-mode .mcs-summary {background:linear-gradient(160deg, #16263B 0%, #14324F 55%, #0B413C 100%);}
.churchro.dark-mode .mcs-badge.sel {background:rgba(34,197,94,.14); color:#86EFAC;}
.churchro.dark-mode .mcs-badge.lock,
.churchro.dark-mode .mcs-req {background:rgba(220,38,38,.16); color:#FCA5A5;}
.churchro.dark-mode .tone-pink   {background:rgba(219,39,119,.15);}
.churchro.dark-mode .tone-orange {background:rgba(245,158,11,.15);}
.churchro.dark-mode .tone-amber  {background:rgba(245,158,11,.13);}
.churchro.dark-mode .tone-blue   {background:rgba(59,130,246,.15);}
.churchro.dark-mode .tone-violet {background:rgba(139,92,246,.16);}
.churchro.dark-mode .tone-indigo {background:rgba(99,102,241,.16);}
.churchro.dark-mode .tone-red    {background:rgba(220,38,38,.14);}
.churchro.dark-mode .mcs-chip {background:var(--snow); border-color:var(--line); color:var(--body);}
.churchro.dark-mode .mcs-purpose,
.churchro.dark-mode .mcs-note {background:var(--snow); border-color:var(--line);}
.churchro.dark-mode .mcs-note p {color:var(--body);}
.churchro.dark-mode .mcs-note.warn {background:rgba(245,158,11,.1); border-color:rgba(253,230,138,.35);}
.churchro.dark-mode .mcs-note.warn p {color:#FCD9A0;}
.churchro.dark-mode .mcs-sh-tag {background:rgba(34,197,94,.14); color:#86EFAC;}
.churchro.dark-mode .mcs-done-circle {box-shadow:0 19px 44px rgba(45,212,191,.22);}
.churchro.dark-mode .mcs-done-row-ic.ok {background:rgba(45,212,191,.14);}
.churchro.dark-mode .mcs-done-row-ic.no {background:rgba(220,38,38,.14);}
.churchro.dark-mode .mcs-done-info {background:rgba(99,102,241,.12); border-color:rgba(199,210,254,.3);}
.churchro.dark-mode .mcs-done-info-h {color:#C7D2FE;}
.churchro.dark-mode .mcs-done-info li,
.churchro.dark-mode .mcs-done-info li::before {color:#C7D2FE;}