@charset "utf-8";

/* ===== 마이페이지 — 스크랩 목록 — Figma 1119:5738 (teal 액센트) =====
   meet-place.css 컨벤션 준수 (720px → Figma 1.92×). prefix: msc-  */
.msc-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 헤더 */
.msc-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:22px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.msc-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px;}
.msc-back img {width:38px; height:38px;}
.msc-head h1 {flex:1; margin-right:54px; text-align:center; font-size:32px; font-weight:700; color:var(--ink);}
.msc-htool {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px;}
.msc-htool img {width:38px; height:38px;}

/* ===== 스크랩 통계 배너 (teal gradient) — Figma 1119:5170 ===== */
.msc-hero {margin:21px 27px 0; padding:31px 33px; border-radius:23px; background:linear-gradient(135deg, #0F766E 0%, #115E59 55%, #134E4A 100%); box-shadow:0 12px 30px rgba(15,118,110,.28);}
.msc-hero-top {display:flex; align-items:center; gap:17px;}
.msc-hero-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; border-radius:19px; background:rgba(255,255,255,.16);}
.msc-hero-ic img {width:38px; height:38px;}
.msc-hero-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.msc-hero-tx b {font-size:29px; font-weight:700; color:#fff;}
.msc-hero-tx span {font-size:21px; color:rgba(255,255,255,.78);}
.msc-hero-manage {flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:12px 21px; border-radius:38px; background:rgba(255,255,255,.16); color:#fff; font-size:21px; font-weight:600;}
.msc-hero-manage img {width:23px; height:23px;}
/* 통계 4분할 */
.msc-stats {display:grid; grid-template-columns:repeat(4, 1fr); margin-top:25px; padding-top:25px; border-top:1.92px solid rgba(255,255,255,.18);}
.msc-stat {display:flex; flex-direction:column; align-items:center; gap:7px; padding:4px 0;}
.msc-stat + .msc-stat {border-left:1.92px solid rgba(255,255,255,.18);}
.msc-stat .v {font-size:42px; font-weight:800; color:#fff; line-height:1;}
.msc-stat .k {display:flex; align-items:center; gap:5px; font-size:19px; color:rgba(255,255,255,.78);}

/* ===== 폴더 칩 행 — Figma 1119:5230 ===== */
.msc-chips {display:flex; align-items:center; gap:11.52px; padding:21px 27px 19px; overflow-x:auto; scrollbar-width:none;}
.msc-chips::-webkit-scrollbar {display:none;}
.msc-chip {flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:11px 21px; border:1.92px solid var(--line); border-radius:38px; background:var(--card); color:#475569; font-size:21px; font-weight:500; white-space:nowrap;}
.msc-chip .em {font-size:21px; line-height:1;}
.msc-chip .cnt {display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 7px; border-radius:15px; background:var(--snow); color:var(--sub); font-size:18px; font-weight:700;}
.msc-chip.on {border-color:var(--teal-2); background:var(--mint); color:var(--teal); font-weight:700;}
.msc-chip.on .cnt {background:var(--teal); color:#fff;}
.msc-chips-toggle {flex:0 0 auto; margin-left:auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border:1.92px solid var(--teal-2); border-radius:15px; background:var(--mint);}
.msc-chips-toggle img {width:27px; height:27px;}

/* ===== 목록 헤더 ===== */
.msc-lhead {display:flex; align-items:center; justify-content:space-between; padding:6px 31px 14px;}
.msc-lhead .l {font-size:23px; color:#6B7280;}
.msc-lhead .l b {color:var(--teal); font-weight:700;}
.msc-lhead .edit {font-size:22px; font-weight:600; color:var(--teal);}

/* ===== 본문 / 카드 ===== */
.msc-body {flex:1; padding:0 27px 190px;}
.msc-group {display:flex; flex-direction:column; gap:17px; margin-bottom:25px;}
/* 분류 구분 헤더 (미분류 등) */
.msc-ghead {display:flex; align-items:center; justify-content:space-between; padding:8px 4px 2px;}
.msc-ghead-l {display:flex; align-items:center; gap:11px; font-size:23px; font-weight:700; color:var(--ink);}
.msc-ghead-l .em {font-size:23px;}
.msc-ghead-l .cnt {color:var(--sub); font-weight:600;}
.msc-ghead-add {display:flex; align-items:center; gap:7px; padding:7px 17px; border:1.92px solid var(--line); border-radius:38px; background:var(--card); color:var(--teal); font-size:20px; font-weight:600;}
.msc-ghead-add img {width:21px; height:21px;}

.msc-card {position:relative; display:flex; flex-direction:column; gap:14px; padding:25px 27px; background:var(--card); border:1.92px solid var(--line); border-radius:19px; box-shadow:0 1.92px 7.68px rgba(0,0,0,.06);}
.msc-card-top {display:flex; align-items:center; gap:13px;}
.msc-card-av {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:17px; font-size:33px;}
.msc-card-av.c-bible {background:#EDE9FE;}
.msc-card-av.c-praise {background:#D1FAE5;}
.msc-card-av.c-etc {background:#F1F5F9;}
.msc-card-src {flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.msc-card-src .nm {font-size:21px; font-weight:700; color:var(--ink);}
.msc-card-src .dt {font-size:19px; color:var(--sub);}
.msc-folder-tag {flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:5px 15px; border-radius:38px; background:var(--mint); color:var(--teal); font-size:18px; font-weight:600;}
.msc-folder-tag .dot {width:13px; height:13px; border-radius:50%; background:var(--teal);}
.msc-folder-tag.t-praise {background:#D1FAE5; color:#047857;}
.msc-folder-tag.t-praise .dot {background:#10B981;}
.msc-folder-tag.t-etc {background:#F1F5F9; color:#64748B;}
.msc-folder-tag.t-etc .dot {background:#94A3B8;}

.msc-card-main {display:flex; gap:17px; align-items:flex-start;}
.msc-card-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;}
.msc-card-title {font-size:26px; font-weight:700; color:var(--ink); line-height:1.35;}
.msc-card-excerpt {font-size:22px; color:#6B7280; line-height:1.55; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.msc-card-thumb {flex:0 0 96px; width:96px; height:96px; border-radius:14px; overflow:hidden; background:var(--snow); display:flex; align-items:center; justify-content:center; font-size:42px;}
.msc-card-thumb img {width:100%; height:100%; object-fit:cover;}

.msc-card-foot {display:flex; align-items:center; gap:21px; padding-top:13px; border-top:1.92px solid var(--line);}
.msc-card-stat {display:flex; align-items:center; gap:6px; font-size:19px; color:var(--sub);}
.msc-card-stat img {width:21px; height:21px;}
.msc-card-bm {margin-left:auto; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:46px; height:46px;}
.msc-card-bm img {width:31px; height:31px;}

@media (hover:hover) and (pointer:fine) {
	.msc-card:hover {background:var(--snow);}
	.msc-chip:hover {border-color:var(--teal-2);}
}

/* ===== 빈 상태 — Figma 1119:5624 ===== */
.msc-empty {flex:1; display:flex; flex-direction:column; align-items:center; padding:40px 40px 190px;}
.msc-empty-ic {display:flex; align-items:center; justify-content:center; width:173px; height:173px; margin-bottom:33px; border:5.76px solid #FDE68A; border-radius:50%; background:#FFFBEB;}
.msc-empty-ic img {width:80px; height:80px;}
.msc-empty-title {font-size:38px; font-weight:700; color:var(--ink); text-align:center; margin-bottom:14px;}
.msc-empty-sub {font-size:24px; color:#6B7280; text-align:center; line-height:1.6; margin-bottom:38px;}
.msc-empty-card {width:100%; padding:27px 31px; background:var(--card); border:1.92px solid var(--line); border-radius:19px; margin-bottom:38px;}
.msc-empty-card-h {display:flex; align-items:center; gap:11px; margin-bottom:21px;}
.msc-empty-card-h img {width:27px; height:27px;}
.msc-empty-card-h b {font-size:23px; font-weight:700; color:var(--teal);}
.msc-step {display:flex; align-items:center; gap:15px; padding:11px 0; font-size:22px; color:#6B7280; line-height:1.5;}
.msc-step + .msc-step {border-top:1.92px solid var(--line);}
.msc-step .no {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; font-size:20px; font-weight:700;}
.msc-step b {color:var(--ink); font-weight:700;}
.msc-empty-cta {display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:25px; border-radius:19px; background:var(--teal); color:#fff; font-size:26px; font-weight:700;}
.msc-empty-cta img {width:29px; height:29px;}
.msc-wrap a.msc-empty-cta {color:#fff;}

/* ===== 바텀시트 "새 폴더 만들기" — space-share .sa-overlay/.sa-sheet 패턴 ===== */
.msc-overlay {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:50; width:720px; max-width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(15,23,42,.45);}
.msc-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;}
.msc-grip {display:flex; align-items:center; justify-content:center; padding:21px 0 6px;}
.msc-grip span {width:77px; height:8px; border-radius:8px; background:#CBD5E1;}
.msc-sheet-head {display:flex; align-items:center; justify-content:space-between; gap:15px; padding:8px 35px 25px; border-bottom:1.92px solid var(--line);}
.msc-sheet-head b {font-size:33px; font-weight:800; color:var(--ink);}
.msc-sheet-close {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:61px; height:61px; border:1.92px solid var(--line); border-radius:31px; background:var(--snow);}
.msc-sheet-close img {width:27px; height:27px;}
.msc-sheet-body {flex:1; overflow-y:auto; padding:27px 35px 38px;}
.msc-field {margin-bottom:31px;}
.msc-field > label {display:block; margin-bottom:13px; font-size:23px; font-weight:600; color:var(--ink);}
.msc-name-input {width:100%; padding:21px 27px; background:var(--snow); border:1.92px solid var(--teal-2); border-radius:15px; font-size:25px; color:var(--ink); font-family:inherit;}
.msc-name-input::placeholder {color:var(--sub);}
/* 아이콘 그리드 (7열) */
.msc-icon-grid {display:grid; grid-template-columns:repeat(7, 1fr); gap:13px;}
.msc-icon-cell {display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; border:1.92px solid var(--line); border-radius:15px; background:var(--snow); font-size:31px;}
.msc-icon-cell.on {border-color:var(--teal-2); background:var(--mint); box-shadow:0 0 0 3.5px rgba(13,148,136,.18);}
/* 색상 선택 (8열) */
.msc-color-grid {display:flex; flex-wrap:wrap; gap:15px;}
.msc-color-cell {flex:0 0 auto; width:54px; height:54px; border-radius:50%; border:3.5px solid transparent;}
.msc-color-cell.on {border-color:var(--ink); box-shadow:0 0 0 4px var(--card) inset;}
.msc-sheet-foot {padding:21px 35px 31px; border-top:1.92px solid var(--line); background:var(--card);}
.msc-sheet-submit {display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:27px; border-radius:19px; background:var(--teal); color:#fff; font-size:27px; font-weight:700;}
.msc-sheet-submit img {width:29px; height:29px;}
.msc-wrap a.msc-sheet-submit {color:#fff;}

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

/* ===== 다크모드 보정 ===== */
.churchro.dark-mode .msc-card-av.c-bible {background:#2A2342;}
.churchro.dark-mode .msc-card-av.c-praise {background:#10322A;}
.churchro.dark-mode .msc-card-av.c-etc {background:#1E293B;}
.churchro.dark-mode .msc-folder-tag.t-praise {background:#10322A; color:#6EE7B7;}
.churchro.dark-mode .msc-folder-tag.t-etc {background:#1E293B; color:#94A3B8;}
.churchro.dark-mode .msc-empty-ic {border-color:#5C4A1A; background:#20221A;}
.churchro.dark-mode .msc-color-cell.on {box-shadow:0 0 0 4px var(--card) inset; border-color:#fff;}