/* ---- My Sundae 포트폴리오 한 화면 (2026-11-03 대표 피그마 코멘트 18번) ---- */
.pf-side { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.pf-profile { display: grid; gap: var(--s-5); }
.pf-profile-top { display: flex; align-items: center; gap: var(--s-4); }
.pf-intro-short { font-weight: 700; font-size: var(--t-lg); line-height: 1.45; }
.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0; }
.pf-stats > div { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--c-milk); }
.pf-stats dt { font-size: var(--t-xs); font-weight: 600; color: var(--c-muted); }
.pf-stats dd { margin: 0; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.pf-percent { font-size: var(--t-xl); font-weight: 700; color: var(--c-berry); }
.pf-actions { display: grid; gap: var(--s-2); }
.pf-actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.pf-note .ico { vertical-align: -3px; margin-right: 4px; }
.pf-main { min-width: 0; }
.pf-sec { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.pf-sec .panel-title { display: flex; align-items: center; gap: var(--s-2); }
.pf-intro-long { margin-top: var(--s-3); white-space: pre-line; }
.pf-ac-form { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); }
.pf-ac-form .ac-quick { border-top-color: var(--c-line); }
.ac-year h3 { font-size: var(--t-2xl); }
/* My Sundae 섹션 머리 버튼(편집·활동 기록 관리)도 터치 44px */
.pf-sec .panel-head .btn-sm { min-height: 44px; }
/* 활동 기록 관리(/my-sundae/activities) — 줄마다 수정·삭제, 수정 화면 저장 버튼 (코멘트 36번) */
.ac-item-actions { display: flex; flex: none; align-items: center; gap: var(--s-1); margin-left: auto; }
.ac-edit-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-5); }

/* ---- SNS 공유 카드 (코멘트 29번) — 심리테스트 결과처럼 '나의 사역 유형'. 미리보기는 canvas 이미지와 같은 배치 ---- */
.sc-sheet { max-width: 600px; }
.sc-card { display: grid; gap: var(--s-5); aspect-ratio: 4 / 5; padding: var(--s-8) var(--s-6) var(--s-6); border-radius: var(--r-lg); background: var(--c-bg); box-shadow: 0 0 0 var(--s-4) var(--c-milk-2); margin: var(--s-4); align-content: center; text-align: center; }
.sc-result { display: grid; justify-items: center; gap: var(--s-2); }
.sc-kicker { color: var(--c-berry); font-size: var(--t-sm); font-weight: 700; }
.sc-headline { font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; word-break: keep-all; }
.sc-type-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-top: var(--s-2); border-radius: 50%; background: var(--c-milk-2); color: var(--c-accent); }
.sc-type { color: var(--c-accent); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; }
.sc-desc { max-width: 30em; color: var(--c-muted); font-size: var(--t-sm); font-weight: 600; line-height: 1.6; word-break: keep-all; }
.sc-ministries { list-style: none; display: grid; gap: var(--s-2); text-align: left; }
.sc-ministries li { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); background: var(--c-milk); font-size: var(--t-sm); font-weight: 700; }
.sc-ministries li::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: var(--s-1); border-radius: 50%; background: var(--c-accent); }
.sc-ministries li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3); color: var(--c-berry); font-size: var(--t-sm); font-weight: 700; }
.sc-foot { align-self: end; display: flex; justify-content: center; }
.sc-logo { font-size: 20px; }
.sc-hint .ico { vertical-align: -3px; margin-right: 4px; }

@media (max-width: 1024px) {
  .pf-side { position: static; }
}
@media (max-width: 720px) {
  .sc-card { padding: var(--s-6) var(--s-4); gap: var(--s-4); margin: var(--s-3); box-shadow: 0 0 0 var(--s-3) var(--c-milk-2); }
  .sc-headline { font-size: var(--t-2xl); }
  .sc-type { font-size: var(--t-lg); }
  .sc-sheet .modal-foot .btn { flex: 1 1 auto; }
  /* 관리 화면 줄: 날짜(1줄) → 제목+수정·삭제(2줄). 버튼 두 개(88px)가 줄바꿈되지 않게 */
  .ac-item-actions { order: 3; }
  .ac-item:has(.ac-item-actions) .grow { flex-basis: calc(100% - 104px); }
}

/* ===== 2026-11-05 리뉴얼(팀 D) — My Sundae·프로필·설정·알림. 화면 바깥 틀은 .ms-page 로만 범위를 묶는다 ===== */
/* 뒤로 가기 줄이 띠 배너 바로 위에 붙는 화면: 줄까지 배너로 이어 한 덩어리로 */
.ms-crumb { position: relative; isolation: isolate; gap: var(--s-1); padding: var(--s-3) 0 0; color: var(--c-banner-ink); }
.ms-crumb::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--c-banner); }
.ms-crumb .bold { font-size: var(--t-sm); color: var(--c-banner-ink); }
.ms-crumb .icon-btn, .ms-head-back .icon-btn { width: 44px; height: 44px; margin-left: -10px; color: #fff; background: transparent; }
.ms-crumb .icon-btn:hover, .ms-head-back .icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ms-crumb a:focus-visible, .page-head.ms-head-back a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ms-crumb + .page-head { padding-top: var(--s-1); }
.ms-head-back { display: flex; align-items: center; gap: var(--s-1); }

/* 촘촘하게 — 섹션 사이·패널 머리 여백 줄이기 */
.ms-page .page-head { margin-bottom: var(--s-6); }
.ms-page .stack-lg > * + * { margin-top: var(--s-4); }
.ms-page .panel-head { padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5); min-height: 56px; }
.ms-page .panel-title { font-size: var(--t-lg); }
.ms-page .panel-body { padding: var(--s-4) var(--s-5); }
.ms-page .card-pad { padding: var(--s-5); }
.ms-page .pf-sec .panel-head .btn-sm { min-height: 44px; padding: 0 10px; color: var(--c-muted); font-weight: 600; }
.ms-page .pf-sec .panel-head .btn-sm:hover { color: var(--c-ink); }
.ms-layout.pf-layout { grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-5); }
.pf-side { top: calc(var(--header-h) + var(--s-4)); }
.pf-profile { gap: var(--s-4); }
.pf-stats > div { padding: var(--s-2) var(--s-3); }
.pf-stats dd { font-size: var(--t-lg); }
.ms-page .ms-bar { height: 8px; border: 0; border-radius: var(--r-sm); background: var(--c-line); }
.ms-page .ms-bar span { border-radius: var(--r-sm); }
.ms-page .ac-year { padding: var(--s-4) 0 var(--s-2); }
.ms-page .ac-year:first-child { padding-top: var(--s-1); }
.ms-page .ac-year h2, .ms-page .ac-year h3 { font-size: var(--t-xl); }
.ms-page .ac-item { padding: var(--s-2) 0; min-height: 48px; }
.ms-page .pr-strengths .badge { border-radius: var(--r-sm); }

/* 분홍 바탕 위의 회색 상자 → 흰 면 + 1px 선 (흰 카드 안의 상자는 그대로) */
.ms-page > .privacy-note, .ms-page > .notice-box, .ms-page > .mt-6 > .notice-box { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.ms-page .ms-stats { gap: var(--s-2); margin-bottom: var(--s-5); }
.ms-page .ms-stats > div { padding: var(--s-3) var(--s-4); background: #fff; border: 1px solid var(--c-line-2); border-radius: var(--r-md); }
.ms-page .ms-stats dd { font-size: var(--t-xl); font-weight: 700; }
.ms-page .ms-tabs { margin-bottom: 0; }
.ms-page .ms-res-list { margin-top: var(--s-4); }
.ms-page .ms-res-row { padding: var(--s-3) var(--s-4); }
.ms-page .ms-res-row:hover, .ms-page .c-noti-link:hover, .ms-page .c-row:hover { background: var(--c-surface-2); }
.ms-page .ms-res-thumb { width: 60px; }
.ms-page .ms-res-title { font-size: var(--t-md); }
.ms-page .ms-anon-list { border-radius: var(--r-md); }

/* 회원 프로필(/users/:id) 게시글 — 낱장 카드 대신 흰 목록 하나 + 1px 선 */
.ms-page .c-list { gap: 0; background: #fff; border: 1px solid var(--c-line-2); border-radius: var(--r-md); overflow: hidden; }
.ms-page .c-list > .c-row { border-radius: 0; padding: var(--s-4) var(--s-5); gap: 6px; }
.ms-page .c-list > .c-row + .c-row { border-top: 1px solid var(--c-line); }
.ms-page .c-list .c-row-title { font-size: var(--t-md); }
.ms-page .c-list .c-row-excerpt { font-size: var(--t-sm); }
.ms-page .c-profile-bio { border: 1px solid var(--c-line); background: var(--c-milk); }

/* 팔로우 목록·알림 */
.ms-page .c-person-head { background: #fff; border-color: var(--c-line-2); }
.ms-page .c-person-head:hover { box-shadow: var(--shadow-3); }
.ms-page .c-noti-link { padding: var(--s-3) var(--s-4); }
.ms-page .c-noti.is-unread { background: #fdf3f5; }
.ms-page .c-push-cta { background: #fff; border-color: var(--c-line-2); }
.ms-page .c-push-cta:hover { background: var(--c-surface-2); box-shadow: var(--shadow-3); }
.ms-page .tabs:not(.full) { margin-bottom: var(--s-4); }

/* 설정 — 흰 목록 패널 */
.ms-page .settings-menu .list-item { min-height: 52px; padding: var(--s-3) var(--s-4); }
.ms-page .settings-menu .list-item > .ico:first-child { color: var(--c-muted); }
.ms-page .profile-summary { padding: var(--s-4) var(--s-5); }

/* 정렬 — 점(•) 구분, 고른 것만 굵게 */
.ms-sort { display: flex; align-items: center; flex-wrap: wrap; }
.ms-sort-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: var(--t-sm); font-weight: 500; color: var(--c-muted); }
.ms-sort-link + .ms-sort-link::before { content: "•"; margin: 0 8px; color: var(--c-line-2); font-weight: 400; }
.ms-sort-link:hover { color: var(--c-ink); }
.ms-sort-link[aria-current="page"] { color: var(--c-ink); font-weight: 700; }

/* 포트폴리오 편집 하단 저장 줄 — 알약 대신 작은 모서리 */
.ms-page .rv-savebar { border-radius: var(--r-md); border-color: var(--c-line-2); }

/* SNS 공유 카드 — 정체성(분홍 테두리 액자)은 그대로, 바깥 시트만 얇은 선·작은 모서리 */
.ms-page .sc-sheet { border-color: var(--c-line-2); border-radius: var(--r-md); }

@media (max-width: 1024px) {
  .ms-layout.pf-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}
@media (max-width: 720px) {
  .ms-page .page-head { margin-bottom: var(--s-4); }
  .ms-crumb { padding-top: var(--s-2); }
  .ms-page .panel-head { padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); }
  .ms-page .panel-body, .ms-page .card-pad { padding: var(--s-4); }
  .ms-page .c-list > .c-row { padding: var(--s-4); }
}
/* 띠 배너 위의 포인트 글자(안 읽음 수 등) — 베리는 짙은 회색 위 대비가 모자라 옅은 분홍으로 */
.ms-page .page-head .berry { color: #f5809a; }