/* ============================================================
   챌린지 팀 페이지 테마 (8색) — 편집기·공개 페이지 공용
   각 테마는 CSS 변수만 정의하고, 섹션은 변수를 사용해 자동으로
   가독성 있는 글씨색(진한 텍스트 / 밝은 배경)을 갖는다.
   ============================================================ */

/* 테마 컨테이너 배경/기본 글씨색 (변수 기반 — 어떤 테마든 적용) */
.device-viewport { background-color: var(--bg-color); color: var(--text-main); }

/* 변수 기반 공통 가독성 규칙 (모든 테마 공통, 어떤 테마든 글씨가 잘 보이도록) */
.pv-sec h1, .pv-sec h2, .pv-sec h3 { color: var(--text-main); }
.pv-sec p { color: var(--text-muted); }
.pv-sec-tag { color: var(--primary-color); }
/* 후원 버튼 기본 모양 — 모든 테마 공통 (테마별 규칙이 있으면 그게 우선) */
.pv-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background-color: var(--primary-color); color: #fff;
  font-weight: 700; font-size: 13px; padding: 10px 22px;
  border-radius: 12px; text-decoration: none; margin-top: 14px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* 테마별 태그 배경(연한 틴트) + 라운딩 — 모든 테마에서 둥근 알약 모양 유지 */
.pv-sec-tag {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  padding: 3px 9px;
  border-radius: 99px;
}

/* 히어로 라벨 2줄: "모두의기부 Giving-LIFE" + 챌린지 회차 */
.pv-sec-tag.pv-hero-tag2 {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 12px; border-radius: 12px; line-height: 1.25; text-transform: none;
}
.pv-hero-tag2 .ht-brand { font-size: 9.5px; font-weight: 800; opacity: 0.85; letter-spacing: 0.02em; }
.pv-hero-tag2 .ht-edition { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }

/* 히어로 해시태그 (편집기·공개 공용) — CTA 아래 가로 1열 중앙 정렬(넘치면 줄바꿈) */
.hero-hashtags { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin-top: 16px; }
.hero-hashtags .hh-chip {
  display: inline-flex; align-items: center; gap: 1px; max-width: 92%;
  padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; line-height: 1.25;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
  word-break: break-all;
}
.hero-hashtags .hh-chip .hh-h { font-weight: 800; }

/* ===== 이미지 전용 세션 (편집기·공개 공용) ===== */
/* 이미지 전용 세션 — 상하/좌우 갭 0 + 경계선 없음 (이미지끼리 딱 붙여 하나의 이미지/페이지처럼) */
.pv-sec.sec-image { padding: 0 !important; border-bottom: 0 !important; }
.pv-image-sec { width: 100%; }
.pv-image-sec img { display: block; width: 100%; height: auto; border-radius: 0; }

/* ===== 세션별 배경색(직접 지정) 위 글씨 가독성 — 밝기 자동 ===== */
.pv-sec--oncolor.on-dark,
.pv-sec--oncolor.on-dark h1, .pv-sec--oncolor.on-dark h2, .pv-sec--oncolor.on-dark h3,
.pv-sec--oncolor.on-dark b, .pv-sec--oncolor.on-dark strong { color: #fff !important; }
.pv-sec--oncolor.on-dark p, .pv-sec--oncolor.on-dark span,
.pv-sec--oncolor.on-dark small, .pv-sec--oncolor.on-dark li { color: rgba(255,255,255,0.85) !important; }
.pv-sec--oncolor.on-dark .pv-sec-tag { color: #fff !important; background: rgba(255,255,255,0.18) !important; }
.pv-sec--oncolor.on-light,
.pv-sec--oncolor.on-light h1, .pv-sec--oncolor.on-light h2, .pv-sec--oncolor.on-light h3,
.pv-sec--oncolor.on-light b, .pv-sec--oncolor.on-light strong { color: #0f172a !important; }
.pv-sec--oncolor.on-light p, .pv-sec--oncolor.on-light span,
.pv-sec--oncolor.on-light small, .pv-sec--oncolor.on-light li { color: #475569 !important; }
/* 세션별 테마(8색) 적용 세션은 .theme-X 변수로 글씨색이 자동 처리됨(배경은 인라인 var(--bg-color)) */

/* 지표 섹션은 항목이 2개(누적 후원금/후원자 수)뿐이라 3열 그리드에서 좌측으로 쏠림.
   2열로 균형 배치해 가운데 정렬되도록 한다. (대형 카드형/미니멀형 공통) */
.sec-metrics .metrics-grid { grid-template-columns: repeat(2, 1fr); }
/* 원형 진행형은 큰 원 2개 대신 적당한 크기의 원 2개를 가운데로 모은다. */
.sec-metrics.style-radialProgress .metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 116px));
  justify-content: center;
  gap: 18px;
}
/* 편집기 데스크탑 미리보기에서도 동일하게 (.desktop-view .metrics-grid 의 3열 !important 무력화) */
.device-viewport.desktop-view .sec-metrics .metrics-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
.device-viewport.desktop-view .sec-metrics.style-radialProgress .metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 150px)) !important;
  justify-content: center !important;
}

/* ===== 8개 테마 변수 세트 (전부 라이트 배경 + 진한 글씨) ===== */
.theme-Charity {
  --primary-color:#10b981; --primary-hover:#059669; --accent-color:#34d399;
  --bg-color:#f9fbf9; --card-bg:#ffffff;
  --text-main:#1f2937; --text-muted:#4b5563; --border-color:#e5e7eb;
}
.theme-Ocean {
  --primary-color:#2563eb; --primary-hover:#1d4ed8; --accent-color:#60a5fa;
  --bg-color:#f6f9ff; --card-bg:#ffffff;
  --text-main:#16213a; --text-muted:#4b5670; --border-color:#e2e8f4;
}
.theme-Sky {
  --primary-color:#0891b2; --primary-hover:#0e7490; --accent-color:#22d3ee;
  --bg-color:#f4fbfd; --card-bg:#ffffff;
  --text-main:#13282e; --text-muted:#48606a; --border-color:#dcebef;
}
.theme-Teal {
  --primary-color:#0d9488; --primary-hover:#0f766e; --accent-color:#2dd4bf;
  --bg-color:#f4fbfa; --card-bg:#ffffff;
  --text-main:#15302c; --text-muted:#4a5d59; --border-color:#dcebe8;
}
.theme-Grape {
  --primary-color:#7c3aed; --primary-hover:#6d28d9; --accent-color:#a78bfa;
  --bg-color:#faf8ff; --card-bg:#ffffff;
  --text-main:#231a3a; --text-muted:#544f66; --border-color:#ebe6f7;
}
.theme-Berry {
  --primary-color:#e11d48; --primary-hover:#be123c; --accent-color:#fb7185;
  --bg-color:#fff7f9; --card-bg:#ffffff;
  --text-main:#2c1620; --text-muted:#6a5158; --border-color:#f4e2e8;
}
.theme-Sunset {
  --primary-color:#ea580c; --primary-hover:#c2410c; --accent-color:#fb923c;
  --bg-color:#fffaf5; --card-bg:#ffffff;
  --text-main:#2c1c12; --text-muted:#6b574b; --border-color:#f3e7da;
}
.theme-Indigo {
  --primary-color:#4f46e5; --primary-hover:#4338ca; --accent-color:#818cf8;
  --bg-color:#f8f8ff; --card-bg:#ffffff;
  --text-main:#1a1a3a; --text-muted:#4b4f6b; --border-color:#e6e6f6;
}

/* ============================================================
   활동연혁 (sec-activity-history) — 편집기/공개 공용
   ============================================================ */
.sec-activity-history { position:relative; padding:46px 16px 58px; overflow:hidden; }
.sec-activity-history .pv-sec-tag { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--primary-color); font-size:13px; font-weight:900; letter-spacing:.04em; background:none; border:0; padding:0; border-radius:0; }
.sec-activity-history .pv-sec-tag:before, .sec-activity-history .pv-sec-tag:after { content:""; width:44px; height:2px; border-radius:999px; background:var(--primary-color); }
.sec-activity-history h3 { margin:12px 0 0; text-align:center; font-size:32px; line-height:1.14; font-weight:900; color:var(--text-main); word-break:keep-all; overflow-wrap:anywhere; }
.sec-activity-history p { margin:16px auto 0; max-width:360px; text-align:center; font-size:15px; line-height:1.7; color:var(--text-muted); word-break:keep-all; overflow-wrap:anywhere; }
.sec-activity-history .history-underbar { width:46px; height:3px; margin:22px auto 30px; border-radius:999px; background:var(--primary-color); }
.sec-activity-history .history-list { display:grid; gap:20px; position:relative; }
.sec-activity-history .history-list:before { content:""; position:absolute; top:45px; bottom:45px; left:42px; width:1px; border-left:1px dashed color-mix(in srgb, var(--primary-color) 40%, transparent); }
.sec-activity-history .history-item { position:relative; display:grid; grid-template-columns:86px 1fr; gap:14px; align-items:center; }
.sec-activity-history .history-year { position:relative; z-index:1; display:grid; place-items:center; box-sizing:border-box; width:84px; min-height:84px; height:auto; padding:8px 5px; border-radius:42px; background:var(--card-bg,#fff); color:var(--primary-color); border:1px solid color-mix(in srgb, var(--primary-color) 40%, transparent); box-shadow:0 10px 26px rgba(13,27,61,.14), inset 0 0 0 6px var(--card-bg,#fff); font-size:20px; line-height:1.12; font-weight:900; text-align:center; word-break:keep-all; }
.sec-activity-history .history-year:after { content:""; position:absolute; right:-20px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--primary-color); }
.sec-activity-history .history-card { display:grid; grid-template-columns:58px 1fr auto; gap:14px; align-items:center; min-height:116px; padding:18px 16px; border-radius:14px; background:var(--card-bg,#fff); border-left:4px solid var(--history-color, var(--primary-color)); box-shadow:0 16px 36px rgba(13,27,61,.11); }
.sec-activity-history .history-icon { position:relative; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:color-mix(in srgb, var(--history-color, var(--primary-color)) 12%, #fff); color:var(--history-color, var(--primary-color)); }
.sec-activity-history .history-icon svg { width:31px; height:31px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sec-activity-history .history-card-text { min-width:0; }
.sec-activity-history .history-card b { display:block; font-size:18px; line-height:1.35; color:var(--text-main); word-break:keep-all; overflow-wrap:anywhere; }
.sec-activity-history .history-card span { display:block; margin-top:7px; font-size:13px; line-height:1.65; color:var(--text-muted); word-break:keep-all; overflow-wrap:anywhere; }
.sec-activity-history .history-arrow { color:var(--text-main); font-size:30px; line-height:1; }
.sec-activity-history.style-compact .history-item { grid-template-columns:72px 1fr; }
.sec-activity-history.style-compact .history-year { width:70px; min-height:70px; height:auto; border-radius:35px; font-size:16px; }
.sec-activity-history.style-compact .history-list:before { left:35px; }
.sec-activity-history.style-compact .history-card { grid-template-columns:46px 1fr auto; min-height:0; padding:14px; }
.sec-activity-history.style-compact .history-icon { width:46px; height:46px; }
.sec-activity-history.style-compact .history-icon svg { width:25px; height:25px; }
.sec-activity-history.style-compact .history-arrow { display:none; }
.sec-activity-history.style-dark { background:linear-gradient(180deg,#101a33,#081225); }
.sec-activity-history.style-dark h3, .sec-activity-history.style-dark .pv-sec-tag { color:#fff; }
.sec-activity-history.style-dark .pv-sec-tag:before, .sec-activity-history.style-dark .pv-sec-tag:after { background:#fff; }
.sec-activity-history.style-dark p { color:rgba(255,255,255,.78); }
.sec-activity-history.style-dark .history-underbar { background:#fff; }
.sec-activity-history.style-dark .history-year { background:#0b1428; box-shadow:0 10px 26px rgba(0,0,0,.3), inset 0 0 0 6px #0b1428; }
.sec-activity-history.style-dark .history-card { background:rgba(255,255,255,.08); box-shadow:0 16px 36px rgba(0,0,0,.2); }
.sec-activity-history.style-dark .history-card b, .sec-activity-history.style-dark .history-arrow { color:#fff; }
.sec-activity-history.style-dark .history-card span { color:rgba(255,255,255,.72); }
/* 편집기 전용 컨트롤 */
.sec-activity-history .history-icon[data-act-icon] { cursor:pointer; }
.sec-activity-history .hist-color-dot { position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; }
.sec-activity-history .act-del { border:0; background:rgba(198,40,40,.92); color:#fff; width:22px; height:22px; border-radius:50%; font-size:14px; line-height:1; cursor:pointer; justify-self:end; }
.act-add-btn { display:block; width:100%; margin-top:18px; padding:11px; border:1.5px dashed color-mix(in srgb, var(--primary-color) 50%, #ccc); border-radius:12px; background:transparent; color:var(--primary-color); font-weight:800; font-size:13px; cursor:pointer; }

/* ============================================================
   활동사진 (sec-activity-photos) — 편집기/공개 공용
   ============================================================ */
.sec-activity-photos { margin:20px; padding:26px 24px 28px; border:1px solid var(--border-color); border-radius:16px; background:var(--card-bg,#fff); }
.sec-activity-photos .pv-sec-tag { display:none; }
.sec-activity-photos h3 { margin:0; font-size:22px; line-height:1.35; font-weight:800; color:var(--text-main); word-break:keep-all; }
.sec-activity-photos p { margin:14px 0 0; font-size:15px; line-height:1.65; color:var(--text-muted); word-break:keep-all; }
.sec-activity-photos .photo-upload { display:grid; place-items:center; width:100%; min-height:158px; margin-top:24px; padding:18px; border:1px dashed color-mix(in srgb, var(--primary-color) 35%, #cfd6df); border-radius:13px; background:color-mix(in srgb, var(--primary-color) 4%, #fff); text-align:center; color:var(--text-muted); cursor:pointer; }
.sec-activity-photos .photo-upload > div { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; }
.sec-activity-photos .photo-upload strong { display:block; margin-top:12px; color:var(--primary-color); font-size:16px; }
.sec-activity-photos .photo-upload span { display:block; margin-top:8px; font-size:13px; line-height:1.5; }
.sec-activity-photos .photo-plus { display:grid; place-items:center; width:54px; height:54px; border:2px solid var(--primary-color); border-radius:50%; color:var(--primary-color); font-size:38px; line-height:1; }
.sec-activity-photos .photo-count { margin:22px 0 0; font-size:14px; font-weight:700; color:var(--text-main); }
.sec-activity-photos .photo-count strong { margin-left:8px; color:var(--primary-color); }
.sec-activity-photos .photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.sec-activity-photos .photo-card { position:relative; overflow:hidden; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg,#fff); box-shadow:0 8px 20px rgba(13,27,61,.06); }
.sec-activity-photos .photo-img-wrap { display:block; cursor:pointer; }
.sec-activity-photos .photo-card img { display:block; width:100%; aspect-ratio:1.38/1; object-fit:cover; background:#edf1f6; }
.sec-activity-photos .photo-remove { position:absolute; top:8px; right:8px; z-index:2; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.sec-activity-photos .photo-card-body { padding:11px 13px 13px; }
.sec-activity-photos .photo-card-title { display:block; font-size:14px; line-height:1.4; font-weight:700; color:var(--text-main); word-break:keep-all; }
.sec-activity-photos .photo-card-date { display:block; margin-top:6px; font-size:13px; color:var(--text-muted); }
.sec-activity-photos.style-compact .photo-grid { gap:10px; }
.sec-activity-photos.style-single .photo-grid { grid-template-columns:1fr; }
.sec-activity-photos.style-single .photo-card img { aspect-ratio:1.6/1; }
.sec-activity-photos.style-scrapbook { background:#fffdf8; }
.sec-activity-photos.style-scrapbook .photo-card { transform:rotate(-1.5deg); }
.sec-activity-photos.style-scrapbook .photo-card:nth-child(2n) { transform:rotate(1.5deg); }
.sec-activity-photos.style-scrapbook .photo-card:nth-child(3n) { transform:rotate(-0.8deg); }
.sec-activity-photos.style-scrapbook .photo-card-body { text-align:center; }
.sec-activity-photos.style-scrapbook .photo-card-date { color:var(--primary-color); }