@charset "utf-8";

/* ===== 마이페이지 프로필 편집 — Figma 1119:3906 (teal 액센트, 720px = Figma×1.92) ===== */

/* ---------- ① 프로필 편집 메인 (Figma 1119:3462) ---------- */
.mpe-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 헤더 (Figma 1119:3469) */
.mpe-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);}
.mpe-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:19px;}
.mpe-back img {width:38px; height:38px;}
.mpe-head h1 {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink);}
.mpe-save {flex:0 0 auto; padding:12px 27px; border-radius:38px; background:var(--teal-2); color:#fff; font-size:23px; font-weight:700;}

/* 프로필 사진 영역 (Figma 1119:3478) */
.mpe-hero {position:relative; display:flex; flex-direction:column; align-items:center; gap:11px; padding:46px 38px 54px; overflow:hidden; background:linear-gradient(158deg, #1E3A5F 0%, #1A4A7A 60%, #0F766E 100%);}
.mpe-hero::before {content:''; position:absolute; top:-96px; right:-96px; width:346px; height:346px; border-radius:50%; background:rgba(255,255,255,.03);}
.mpe-hero::after {content:''; position:absolute; bottom:-58px; left:-38px; width:269px; height:269px; border-radius:50%; background:rgba(13,148,136,.1);}
.mpe-avatar {position:relative; z-index:2; width:200px; height:200px;}
.mpe-avatar-ring {display:flex; align-items:center; justify-content:center; width:200px; height:200px; padding:6px; border-radius:50%; background:linear-gradient(135deg, #CCFBF1 0%, rgba(255,255,255,.3) 100%);}
.mpe-avatar-inner {display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; overflow:hidden; background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%);}
.mpe-avatar-inner img.ph {width:92px; height:92px;}
.mpe-avatar-inner img.pic {width:100%; height:100%; object-fit:cover;}
.mpe-cam {position:absolute; right:4px; bottom:4px; z-index:3; display:flex; align-items:center; justify-content:center; width:61px; height:61px; padding:6px; border:5.76px solid #1E3A5F; border-radius:31px; background:var(--teal-2); box-shadow:0 4px 14px rgba(15,23,42,.2);}
.mpe-cam img {width:29px; height:29px;}
.mpe-hero-t {position:relative; z-index:2; font-size:23px; font-weight:600; color:rgba(255,255,255,.6);}
.mpe-hero-s {position:relative; z-index:2; font-size:19px; color:rgba(255,255,255,.35);}
.mpe-badge {position:relative; z-index:2; display:flex; align-items:center; gap:11.5px; margin-top:9px; padding:12px 25px; border:1.92px solid rgba(255,255,255,.18); border-radius:38px; background:rgba(255,255,255,.1);}
.mpe-badge .dot {flex:0 0 auto; width:15px; height:15px; border-radius:50%; background:#CCFBF1;}
.mpe-badge .lv {font-size:21px; font-weight:600; color:rgba(255,255,255,.7);}
.mpe-badge .vf {padding:4px 15px; border-radius:38px; background:var(--teal-2); color:#fff; font-size:19px; font-weight:700;}

/* 카드 섹션 공통 */
.mpe-sec {background:var(--card); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line); padding:17px 0;}
.mpe-sec + .mpe-sec {border-top:0;}
.mpe-sechead {display:flex; align-items:center; justify-content:space-between; padding:12px 35px 6px;}
.mpe-sechead .lbl {font-size:21px; font-weight:700; letter-spacing:.96px; color:var(--sub); text-transform:uppercase;}
.mpe-sechead .act {font-size:21px; font-weight:700; color:var(--teal-2);}

/* 닉네임 (Figma 1119:3507) */
.mpe-field {padding:19px 35px 27px;}
.mpe-inwrap {position:relative; display:flex; align-items:center;}
.mpe-input {flex:1; min-width:0; padding:23px 86px 23px 29px; background:var(--card); border:1.92px solid var(--teal-2); border-radius:19px; font-size:29px; font-weight:700; color:var(--ink); font-family:inherit;}
.mpe-input::placeholder {color:var(--sub); font-weight:400;}
.mpe-clear {position:absolute; right:23px; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--mute);}
.mpe-clear img {width:21px; height:21px;}
.mpe-hint {display:flex; align-items:center; justify-content:space-between; margin-top:13px;}
.mpe-hint .ok {display:flex; align-items:center; gap:8px; font-size:21px; color:var(--teal-2);}
.mpe-hint .ok img {width:23px; height:23px;}
.mpe-hint .cnt {font-size:21px; color:var(--sub);}
.mpe-rules {display:flex; flex-wrap:wrap; gap:11px; margin-top:17px;}
.mpe-rule {display:flex; align-items:center; gap:8px; padding:8px 19px; border:1.92px solid var(--mint); border-radius:38px; background:var(--mint); font-size:19px; color:var(--teal-2);}
.mpe-rule img {width:19px; height:19px;}
.mpe-rule.off {border-color:var(--line); background:var(--snow); color:var(--sub);}

/* 자기소개 (Figma 1119:3548) */
.mpe-textarea {width:100%; min-height:173px; padding:23px 29px; background:var(--snow); border:1.92px solid var(--line); border-radius:19px; font-size:25px; line-height:42px; color:var(--ink); resize:vertical; font-family:inherit;}
.mpe-textarea::placeholder {color:var(--sub);}
.mpe-tcnt {margin-top:10px; text-align:right; font-size:21px; color:var(--sub);}

/* 재능·관심 태그 (Figma 1119:3561) */
.mpe-chips {display:flex; flex-wrap:wrap; gap:13px; padding:19px 35px 27px;}
.mpe-chip {display:flex; align-items:center; gap:9.6px; padding:12px 23px; border:1.92px solid var(--line); border-radius:38px; background:var(--snow); color:#475569; font-size:23px; font-weight:600;}
.mpe-chip img {width:23px; height:23px;}
.mpe-chip.on {border-color:var(--teal-2); background:var(--teal-2); color:#fff;}
.mpe-chip.add {border-style:dashed; border-color:var(--mute); background:var(--card); color:var(--sub);}

/* 추가 정보 (Figma 1119:3588) */
.mpe-rows {display:flex; flex-direction:column;}
.mpe-row {display:flex; align-items:center; gap:19px; padding:27px 35px; border-top:1.92px solid var(--line);}
.mpe-row-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:61px; height:61px; border-radius:17px; background:var(--mint);}
.mpe-row-ic.blue {background:#EFF6FF;}
.mpe-row-ic.amber {background:var(--cream);}
.mpe-row-ic.green {background:#F0FDF4;}
.mpe-row-ic img {width:31px; height:31px;}
.mpe-row-body {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.mpe-row-k {font-size:25px; font-weight:600; color:var(--ink);}
.mpe-row-v {font-size:21px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mpe-row-tag {flex:0 0 auto; padding:4px 15px; border-radius:38px; font-size:19px; font-weight:700;}
.mpe-row-tag.verified {background:var(--mint); color:var(--teal);}
.mpe-row-tag.private {background:var(--cream); color:#D97706;}
.mpe-row > img.arrow {flex:0 0 auto; width:29px; height:29px;}

/* 안내 박스 (Figma 1119:3655) */
.mpe-note {display:flex; align-items:flex-start; gap:15px; margin:0 0 0; padding:23px 25px; background:var(--mint); border:1.92px solid #CCFBF1; border-radius:19px;}
.mpe-note img {flex:0 0 auto; width:25px; height:25px; margin-top:2px;}
.mpe-note p {font-size:21px; color:var(--teal); line-height:32px;}

/* 본문 컨테이너 패딩 */
.mpe-body {flex:1; padding-bottom:280px;}
.mpe-notewrap {padding:21px 27px 0;}

/* 하단 고정 저장 버튼 (Figma 1119:3660) */
.mpe-bottom {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%;}
.mpe-savebar {padding:25px 27px 31px; background:var(--card); border-top:1.92px solid var(--line);}
.mpe-savebtn {display:flex; align-items:center; justify-content:center; gap:11.5px; width:100%; padding:27px; border-radius:19px; background:linear-gradient(137deg, #0F766E 0%, #0D9488 100%); color:#fff; font-size:29px; font-weight:700;}
.mpe-savebtn img {width:33px; height:33px;}

/* 하단 탭바 (fixed) */
.mpe-nav {display:flex; align-items:center; justify-content:space-between; padding:21px 38px; background:var(--card); border-top:1.85px solid var(--line);}
.mpe-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mpe-nav .tab img {width:42px; height:42px;}
.mpe-nav .tab.on {color:var(--teal);}
.mpe-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mpe-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);}
.mpe-nav .tab-fab .fab img {width:48px; height:48px;}

@media (hover:hover) and (pointer:fine) {
	.mpe-chip:hover, .mpe-row:hover {background:var(--snow);}
}

/* ---------- ③ 저장 완료 (Figma 1119:3817) ---------- */
.mpd-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}
.mpd-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);}
.mpd-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:19px;}
.mpd-back img {width:38px; height:38px;}
.mpd-head h1 {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink);}
.mpd-head .sp {flex:0 0 auto; width:69px;}

.mpd-body {flex:1; display:flex; flex-direction:column; align-items:center; padding:61px 46px 120px;}

/* 아바타 (Figma 1119:3872) */
.mpd-avatar {position:relative; width:211px; height:211px; margin-bottom:38px;}
.mpd-avatar-ring {display:flex; align-items:center; justify-content:center; width:211px; height:211px; padding:6px; border-radius:50%; background:linear-gradient(135deg, #0D9488 0%, #1E3A5F 100%);}
.mpd-avatar-inner {display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; overflow:hidden; background:linear-gradient(135deg, #0D9488 0%, #1E3A5F 100%);}
.mpd-avatar-inner img.ph {width:100px; height:100px;}
.mpd-avatar-inner img.pic {width:100%; height:100%; object-fit:cover;}
.mpd-cam {position:absolute; right:4px; bottom:4px; display:flex; align-items:center; justify-content:center; width:65px; height:65px; padding:6px; border:5.76px solid var(--snow); border-radius:33px; background:linear-gradient(135deg, #0F766E 0%, #0D9488 100%); box-shadow:0 4px 14px rgba(15,23,42,.2);}
.mpd-cam img {width:31px; height:31px;}

.mpd-title {font-size:42px; font-weight:800; color:var(--ink); text-align:center; margin-bottom:15px;}
.mpd-sub {font-size:25px; color:#475569; text-align:center; line-height:41px; margin-bottom:46px;}

/* 변경 내역 카드 (Figma 1119:3826) */
.mpd-card {width:100%; padding:29px; background:var(--card); border:1.92px solid var(--line); border-radius:19px; margin-bottom:42px;}
.mpd-card-h {display:flex; align-items:center; gap:9.6px; margin-bottom:6px;}
.mpd-card-h img {width:25px; height:25px;}
.mpd-card-h b {font-size:21px; font-weight:700; color:var(--teal);}
.mpd-chg {display:flex; align-items:center; gap:19px; padding:15px 0; border-top:1.92px solid var(--line);}
.mpd-chg:first-of-type {border-top:0; padding-top:17px;}
.mpd-chg-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:13px; background:var(--mint);}
.mpd-chg-ic.blue {background:#EFF6FF;}
.mpd-chg-ic.amber {background:var(--cream);}
.mpd-chg-ic img {width:25px; height:25px;}
.mpd-chg-k {flex:0 0 auto; min-width:96px; font-size:23px; color:var(--sub);}
.mpd-chg-v {flex:1; min-width:0; display:flex; align-items:center; gap:9.6px; font-size:21px;}
.mpd-chg-v .old {color:var(--sub); text-decoration:line-through;}
.mpd-chg-v .arr {color:var(--sub);}
.mpd-chg-v .new {color:var(--teal); font-weight:700;}
.mpd-chg-v .done {color:var(--teal); font-weight:600;}

/* 버튼 (Figma 1119:3863) */
.mpd-btns {display:flex; flex-direction:column; gap:15px; width:100%;}
.mpd-btn {display:flex; align-items:center; justify-content:center; gap:11.5px; border-radius:19px; text-align:center;}
.mpd-btn.primary {padding:25px; background:linear-gradient(137deg, #0F766E 0%, #0D9488 100%); color:#fff; font-size:27px; font-weight:700;}
.mpd-btn.primary img {width:31px; height:31px;}
.mpd-btn.ghost {padding:23px; background:var(--card); border:1.92px solid var(--line); color:#475569; font-size:25px; font-weight:600;}

/* 하단 탭바 (fixed) */
.mpd-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:21px 38px; background:var(--card); border-top:1.85px solid var(--line);}
.mpd-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mpd-nav .tab img {width:42px; height:42px;}
.mpd-nav .tab.on {color:var(--teal);}
.mpd-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mpd-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);}
.mpd-nav .tab-fab .fab img {width:48px; height:48px;}

/* a:link 덮어쓰기 — 링크형 버튼 */
.mpd-btns a.mpd-btn.primary {color:#fff;}
.mpd-btns a.mpd-btn.ghost {color:#475569;}
.mpe-bottom a.mpe-savebtn {color:#fff;}

/* ---------- 다크 모드 보정 ---------- */
.churchro.dark-mode .mpe-save, .churchro.dark-mode .mpd-btn.primary, .churchro.dark-mode .mpe-savebtn {color:#fff;}
.churchro.dark-mode .mpe-chip.on {color:#0B1220;}
.churchro.dark-mode .mpe-row-tag.private, .churchro.dark-mode .mpd-chg-ic.amber {background:#3A2E1A;}
.churchro.dark-mode .mpe-row-tag.private {color:#FCD34D;}
.churchro.dark-mode .mpe-row-ic.blue, .churchro.dark-mode .mpd-chg-ic.blue {background:#1B2B45;}
.churchro.dark-mode .mpe-row-ic.green {background:#1A2B1F;}
.churchro.dark-mode .mpe-note {background:var(--mint); border-color:#1F3F3A;}