@charset "utf-8";

/* ===== 마이페이지 HUB + 계정설정 — Figma 1126:2193 (teal/navy) =====
   720px 뷰포트 = Figma 375 × 1.92. 모든 px 값은 Figma px × 1.92. */

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

/* ===================== 1. 마이페이지 메인 (HUB) ===================== */
/* 프로필 히어로 (네이비→틸 그라데이션) */
.my-hero {position:relative; overflow:hidden; padding:38px 38px 42px; background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 60%, #0F766E 100%);}
.my-hero::before {content:''; position:absolute; top:-77px; right:-77px; width:307px; height:307px; border-radius:50%; background:rgba(255,255,255,.04);}
.my-hero::after {content:''; position:absolute; bottom:-58px; left:38px; width:230px; height:230px; border-radius:50%; background:rgba(13,148,136,.12);}
.my-hero-top {position:relative; z-index:1; display:flex; gap:27px; align-items:center;}

.my-ava {position:relative; flex:0 0 auto;}
.my-ava-img {display:flex; align-items:center; justify-content:center; width:138px; height:138px; padding:6px; border:5.76px solid rgba(255,255,255,.3); border-radius:69px; background:linear-gradient(135deg, #CCFBF1 0%, #0D9488 100%);}
.my-ava-img img {width:69px; height:69px;}
.my-ava-edit {position:absolute; right:0; bottom:0; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:23px; background:#fff; box-shadow:0 3.84px 5.76px rgba(0,0,0,.2);}
.my-ava-edit img {width:25px; height:25px;}

.my-prof {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.my-prof-name {display:flex; align-items:center; gap:11px;}
.my-prof-name b {font-size:35px; font-weight:800; color:#fff;}
.my-prof-badge {display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:19px; background:#0D9488;}
.my-prof-badge img {width:21px; height:21px;}
.my-prof-lv {font-size:21px; color:rgba(255,255,255,.65);}
.my-prof-church {display:flex; align-items:center; gap:10px; padding:5px 0 12px; font-size:23px; color:rgba(255,255,255,.75);}
.my-prof-church img {width:23px; height:23px;}
.my-prof-vis {align-self:flex-start; display:flex; align-items:center; gap:10px; padding:12px 21px; border:1.92px solid rgba(255,255,255,.2); border-radius:38px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); font-size:19px; font-weight:700;}
.my-prof-vis img {width:21px; height:21px;}
.my-prof-vis img:last-child {width:21px; height:21px; opacity:.7;}
/* base.css a:link{color:inherit}(0,1,1)가 .my-prof-vis(0,1,0)를 이김 → :link로 우선순위 높여 75% 흰색 고정 */
.my-prof-vis:link, .my-prof-vis:visited {color:rgba(255,255,255,.75);}

/* 통계 (3분할) */
.my-stats {position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, 1fr); margin-top:31px; border:1.92px solid rgba(255,255,255,.12); border-radius:23px; background:rgba(255,255,255,.08); overflow:hidden;}
.my-stat {display:flex; flex-direction:column; align-items:center; gap:4px; padding:23px 15px;}
.my-stat + .my-stat {border-left:1.92px solid rgba(255,255,255,.12);}
.my-stat-l {font-size:19px; color:rgba(255,255,255,.55);}
.my-stat-n {padding-top:4px; font-size:35px; font-weight:800; color:#fff;}
.my-stat-n.point {color:#5EEAD4;}
.my-stat-u {font-size:17px; color:rgba(255,255,255,.4);}

/* 로그아웃 버튼 */
.my-logout {display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:23px 0 34px; border-bottom:11.52px solid var(--snow); background:var(--snow); color:var(--sub); font-size:27px; font-weight:600;}
.my-logout img {width:31px; height:31px;}

/* 메뉴 그룹 */
.my-group {background:var(--card); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line);}
.my-group + .my-group {margin-top:0;}
.my-group-spacer {height:11.52px; background:var(--snow);}
.my-gtitle {padding:27px 35px 15px; font-size:25px; font-weight:800; color:var(--ink);}
.my-row {display:flex; align-items:center; gap:12px; width:100%; padding:27px 35px 25px; border-top:1.92px solid var(--line); background:var(--card); text-align:left;}
.my-row-label {flex:1; min-width:0; font-size:27px; color:var(--ink);}
.my-row.danger .my-row-label {color:var(--red);}
.my-row-val {font-size:25px; color:var(--sub); white-space:nowrap;}
.my-row-badge {display:flex; align-items:center; padding:4px 15px; border-radius:38px; font-size:19px; font-weight:700; white-space:nowrap;}
.my-row-badge.ok {background:#F0FDF4; color:#16A34A;}
.my-row-badge.alert {background:#FEF2F2; color:#DC2626;}
.my-row-chev {flex:0 0 auto; width:31px; height:31px;}
.churchro.dark-mode .my-row-badge.ok {background:#16241B; color:#4ADE80;}
.churchro.dark-mode .my-row-badge.alert {background:#3A1D1D; color:#FCA5A5;}

/* 하단 탭바 (fixed) — meet-place 동일 */
.my-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);}
.my-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.my-nav .tab img {width:42px; height:42px;}
.my-nav .tab.on {color:var(--teal);}
.my-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.my-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);}
.my-nav .tab-fab .fab img {width:48px; height:48px;}

.my-hub-pad {padding-bottom:170px;}

/* ===================== 공통 폼 본문 ===================== */
.my-body {flex:1; display:flex; flex-direction:column; gap:31px; padding:45px 38px 60px;}
.my-htitle {font-size:42px; font-weight:800; line-height:1.4; color:var(--ink);}
.my-htitle.sm {font-size:38px;}
.my-field {display:flex; flex-direction:column; gap:13px;}
.my-field-lbl {font-size:25px; font-weight:600; color:var(--body);}
.my-input {width:100%; padding:29px 29px 25px; border:1.92px solid var(--line); border-radius:19px; background:var(--snow); font-size:27px; color:var(--ink);}
.my-input::placeholder {color:var(--sub);}
.my-input.readonly {background:#F3F4F6; color:var(--sub);}
.churchro.dark-mode .my-input.readonly {background:#1E2A38;}
.my-input.focus {border-color:var(--teal-2);}
.my-input.err {border-color:var(--red);}
.my-field-help {font-size:23px; color:var(--teal-2);}
.my-field-help.err {color:var(--red);}

/* 셀렉트 드롭다운 (시·도 / 군·구) */
.my-dd {position:relative;}
.my-dd .my-input {display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left;}
.my-dd .my-input .lbl {flex:1; min-width:0; font-size:inherit; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.my-dd .my-input img {flex:0 0 auto; width:27px; height:27px; transition:transform .2s ease;}
.my-dd.open .my-input img {transform:rotate(180deg);}
.my-dd-menu {position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; max-height:0; overflow:hidden; opacity:0; background:var(--card); border-radius:16px; box-shadow:0 18px 44px rgba(15,23,42,.18); transition:opacity .15s ease;}
.my-dd.open .my-dd-menu {max-height:520px; overflow-y:auto; opacity:1; padding:10px; border:1.92px solid var(--line);}
.my-dd-menu li {padding:18px 22px; border-radius:10px; font-size:25px; color:var(--body); cursor:pointer; white-space:nowrap;}
.my-dd-menu li.on {background:var(--mint); color:var(--teal); font-weight:700;}

/* 검색 행 (시·도 / 군·구 셀렉트 + 검색 입력 + 버튼) */
.my-selects {display:grid; grid-template-columns:1fr 1fr; gap:15px;}
.my-search-row {display:flex; gap:15px; align-items:stretch; padding-top:2px;}
.my-search-row .my-input {flex:1;}
.my-btn-sm {flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0 35px; border-radius:19px; background:var(--teal-2); color:#fff; font-size:25px; font-weight:700;}

/* 안내 박스 (틸/블루/레드 톤) */
.my-note {display:flex; gap:15px; align-items:flex-start; padding:25px 29px; border:1.92px solid; border-radius:19px;}
.my-note img {flex:0 0 auto; width:27px; height:27px; margin-top:4px;}
.my-note p {font-size:23px; line-height:1.6;}
.my-note b {font-weight:700;}
.my-note.teal {background:var(--mint); border-color:#CCFBF1;}
.my-note.teal, .my-note.teal p, .my-note.teal b {color:var(--teal);}
.my-note.blue {background:#EFF6FF; border-color:#BFDBFE;}
.my-note.blue, .my-note.blue p {color:#1D4ED8;}
.my-note.red {background:#FEF2F2; border-color:#FECACA;}
.my-note.red, .my-note.red p {color:var(--red);}
.churchro.dark-mode .my-note.blue {background:#142033;}
.churchro.dark-mode .my-note.red {background:#2A1818;}

/* 하단 고정 액션 버튼 바 */
.my-foot {position:sticky; bottom:0; z-index:15; padding:25px 27px 31px; background:var(--card); border-top:1.92px solid var(--line);}
.my-cta {display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:27px 0; border-radius:19px; font-size:29px; font-weight:700; color:#fff;}
.my-cta img {width:33px; height:33px;}
.my-cta.teal {background:linear-gradient(137deg, #0F766E 0%, #0D9488 100%);}
.my-cta.navy {background:linear-gradient(137deg, #1E3A5F 0%, #1A4A7A 100%);}
.my-cta.red {background:linear-gradient(137deg, #DC2626 0%, #EF4444 100%);}
.my-cta:disabled {background:var(--line); color:var(--sub); cursor:default;}

/* ===================== 회원 탈퇴 ===================== */
.my-bullets {display:flex; flex-direction:column; gap:20px; padding-top:4px;}
.my-bullet {display:flex; gap:15px; align-items:flex-start; font-size:25px; line-height:1.6; color:var(--body);}
.my-bullet img {flex:0 0 auto; width:29px; height:29px; margin-top:5px;}
.my-check {display:flex; gap:19px; align-items:center; width:100%; padding:36px 29px 29px; border:1.92px solid #FECACA; border-radius:19px; background:#FEF2F2; text-align:left;}
.churchro.dark-mode .my-check {background:#2A1818;}
.my-check-box {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; border:1.92px solid #DC2626; background:transparent;}
.my-check.on .my-check-box {background:#DC2626;}
.my-check-box img {width:23px; height:23px; opacity:0;}
.my-check.on .my-check-box img {opacity:1;}
.my-check-label {font-size:25px; font-weight:700; color:var(--red);}

/* ===================== 공개범위 설정 ===================== */
.my-vis-hero {display:flex; flex-direction:column; gap:8px; padding:38px; background:linear-gradient(135deg, #1E3A5F 0%, #1A4A7A 100%);}
.my-vis-hero-ic {display:flex; align-items:center; justify-content:center; width:77px; height:77px; border-radius:23px; background:rgba(255,255,255,.12);}
.my-vis-hero-ic img {width:42px; height:42px;}
.my-vis-hero h2 {padding-top:8px; font-size:31px; font-weight:800; color:#fff;}
.my-vis-hero p {font-size:21px; line-height:1.4; color:rgba(255,255,255,.6);}

.my-legend {display:flex; gap:31px; align-items:center; padding:23px 38px; background:var(--card); border-bottom:1.92px solid var(--line);}
.my-legend span {display:flex; align-items:center; gap:11px; font-size:19px; color:var(--sub);}
.my-legend i {width:17px; height:17px; border-radius:50%;}
.my-legend i.all {background:#0D9488;}
.my-legend i.mem {background:#1E3A5F;}
.my-legend i.none {background:#CBD5E1;}

.my-vis-sec {padding:0 38px; background:var(--card);}
.my-vis-sectitle {padding:31px 0 19px; font-size:21px; font-weight:700; letter-spacing:.96px; color:var(--sub);}
.my-vis-row {display:flex; gap:23px; align-items:center; padding:23px 0; border-top:1.92px solid var(--line);}
.my-vis-row:first-of-type {border-top:0;}
.my-vis-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:17px;}
.my-vis-ic img {width:31px; height:31px;}
.my-vis-ic.t-teal {background:#F0FDFA;}
.my-vis-ic.t-blue {background:#EFF6FF;}
.my-vis-ic.t-amber {background:#FFFBEB;}
.my-vis-ic.t-green {background:#F0FDF4;}
.my-vis-ic.t-violet {background:#F5F3FF;}
.my-vis-ic.t-indigo {background:#EEF2FF;}
.my-vis-ic.t-red {background:#FEF2F2;}
.churchro.dark-mode .my-vis-ic {background:#1E2A38 !important;}
.my-vis-meta {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.my-vis-meta b {font-size:25px; font-weight:600; color:var(--ink);}
.my-vis-meta span {font-size:21px; font-weight:600;}
.my-vis-meta span.s-all {color:#0F766E;}
.my-vis-meta span.s-mem {color:#1E3A5F;}
.my-vis-meta span.s-none {color:#94A3B8;}
.churchro.dark-mode .my-vis-meta span.s-mem {color:#93C5FD;}

/* 세그먼트(공개범위) */
.my-seg {display:flex; gap:8px; flex:0 0 auto;}
.my-seg .seg {padding:11px 19px; border:1.92px solid var(--line); border-radius:38px; background:var(--snow); color:var(--sub); font-size:19px; font-weight:700; white-space:nowrap;}
.my-seg .seg.on {color:#fff; border-color:transparent;}
.my-seg.v-all .seg.on {background:#0D9488;}
.my-seg.v-mem .seg.on {background:#1E3A5F;}
.my-seg.v-none .seg.on {background:#CBD5E1; color:#fff;}

/* ===================== 모달 (확인/완료) ===================== */
.my-modal {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:60; width:720px; max-width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:38px; background:rgba(0,0,0,.5);}
.my-modal-card {width:100%; max-width:538px; overflow:hidden; border-radius:35px; background:var(--card); box-shadow:0 15px 77px rgba(0,0,0,.2);}
.my-modal-head {position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:35px 35px 23px;}
.my-modal-head h3 {font-size:31px; font-weight:800; color:var(--ink); text-align:center;}
.my-modal-head p {font-size:23px; color:var(--sub); text-align:center;}
.my-modal-close {position:absolute; top:27px; right:27px; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:27px; background:var(--snow);}
.my-modal-close img {width:25px; height:25px;}
.my-modal-foot {display:flex; flex-direction:column; gap:15px; padding:0 27px 35px;}
.my-modal-btn {display:flex; align-items:center; justify-content:center; padding:25px 0; border-radius:19px; font-size:27px; font-weight:700;}
.my-modal-btn.primary {background:#0D9488; color:#fff;}
.my-modal-btn.ghost {border:1.92px solid var(--line); color:var(--body);}
.my-modal-or {padding:4px 0; font-size:21px; color:var(--sub); text-align:center;}