/* HB3 새 화면 전용 CSS(10/17 대표 '빈칸들 다 넣어버리자 화면만') — 후원하기 흐름 · 기부금 영수증 안내 · 사연 찾기 · 기업·단체와 함께하기 · 이야기·소식 · 영역(펀딩·함께 외치기·개인적으로 돕기).
   색·크기·여백은 tokens.css 의 토큰만 쓴다(로고 색으로 토큰 값이 바뀌면 이 화면들도 같이 바뀐다). 장식 그라데이션·그림자·px 글자 크기·인라인 style 은 쓰지 않는다.
   미디어 쿼리는 768px·1080px 둘뿐이다. 후원 흐름은 tip.css(앱 바·틀·단추), 사연 찾기는 feed.css(알약·카드 격자)와 함께 불린다. */

/* 이 화면의 hidden 은 .btn·.pill 같은 공용 display 규칙에 지지 않는다(스크립트가 켜 주기 전에는 눌러도 아무 일 없는 단추·칸을 보이지 않는다). */
.xp-page [hidden], .xp-flow [hidden], .xp-find [hidden] { display: none !important; }

/* ===== 공용: 정보 화면 틀(영수증 안내·기업 단체·소식·영역이 같이 쓴다) ===== */
.xp-page { display: grid; gap: var(--sp-5); align-content: start; padding: var(--sp-5) var(--page-gutter) var(--sp-6); }
.xp-page > * { margin: 0; min-width: 0; max-width: none; }
.xp-page h1 { max-width: none; margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.xp-page h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.xp-page p, .xp-page li { max-width: none; }
.xp-page .help { margin: 0; }
.xp-lead { font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: var(--lh-body); }
.xp-page > section.xp-sec { display: grid; gap: var(--sp-3); align-content: start; padding: 0; border: 0; }
.xp-sec > * { margin: 0; min-width: 0; }
.xp-sec > h2 { margin-bottom: 0; }
.xp-sub { font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: 0; }
.xp-note { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--surface); line-height: var(--lh-ui); }

/* 맨 위 '아직 열리지 않았어요' 줄 · 상태 안내 상자 */
.xp-notice-line { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--warm-blush); color: var(--ink); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.xp-notice { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--warm-blush); color: var(--ink); }
.xp-notice p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-ui); }
.xp-notice .xp-notice-title { font-size: var(--fs-body); font-weight: var(--fw-bold); }

/* 사실 목록 · 세 걸음 · 빈 상태 */
.xp-facts { display: grid; gap: var(--sp-2); margin: 0; padding-left: var(--sp-4); }
.xp-facts li { line-height: var(--lh-body); }
.xp-how { counter-reset: xp; display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.xp-how li { counter-increment: xp; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); align-items: start; line-height: var(--lh-body); }
.xp-how li::before { content: counter(xp); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--warm-blush); color: var(--link); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.xp-empty { font-weight: var(--fw-strong); line-height: var(--lh-body); }
.xp-emptybox { display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.xp-emptybox p { margin: 0; max-width: none; }

/* 행동 줄: 주 단추 하나 + 글자 링크 */
.xp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.xp-actions .btn { flex: 1 1 100%; }
.xp-page .btn { width: 100%; }
.xp-page .linkish.block { font-size: var(--fs-small); }

/* 태블릿 768 이상 */
@media (min-width: 768px) {
  .xp-page { padding: var(--sp-6) var(--page-gutter); gap: var(--sp-6); }
  .xp-page h1 { font-size: var(--fs-display); }
  .xp-actions .btn { flex: 0 0 auto; width: auto; min-width: 12rem; }
  .xp-page .xp-actions .btn { width: auto; }
  .xp-page .xp-sec > .btn, .xp-page .xp-sec > a.btn { width: auto; justify-self: start; min-width: 12rem; }
}

/* ===== 후원하기 흐름(tip.css 의 앱 바·.tip-page 틀 위에 얹는다) ===== */
.xp-stepper { counter-reset: xps; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.xp-stepper li { counter-increment: xps; display: flex; align-items: flex-start; gap: var(--sp-1); border-top: 3px solid var(--line); padding-top: var(--sp-2); color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.xp-stepper li::before { content: counter(xps) "."; flex: none; }
.xp-stepper li.is-reached { border-top-color: var(--warm-coral); }
.xp-stepper li[aria-current="step"] { border-top-color: var(--warm-coral); color: var(--ink); }
.xp-stepper li button { display: block; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--fw-strong); text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.xp-flow .xp-step { display: grid; gap: var(--sp-3); align-content: start; }
.xp-flow .xp-step[hidden] { display: none; }
.xp-flow:not(.xp-js) .xp-step + .xp-step { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.xp-flow:not(.xp-js) .xp-sum { display: none; }
.xp-flow .xp-step > p { margin: 0; max-width: none; line-height: var(--lh-body); }
.xp-flow .xp-step > .help { font-size: var(--fs-small); color: var(--muted); line-height: var(--lh-ui); }

.xp-notice, .xp-flow .xp-notice { margin: 0; }
.xp-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sp-2); }
.xp-flow .xp-opt { position: relative; display: grid; place-items: center; min-height: 52px; margin: 0; max-width: none; padding: 0 var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); font-weight: var(--fw-strong); text-align: center; cursor: pointer; }
.xp-flow .xp-opt input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }
.xp-flow .xp-opt:has(input:checked) { background: var(--warm-blush); border-color: var(--warm-coral); color: var(--link); font-weight: var(--fw-bold); }
.xp-flow .xp-opt:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.xp-flow .xp-other { display: none; gap: var(--sp-1); }
.xp-flow .xp-step:has(input[value="other"]:checked) .xp-other { display: grid; }
.xp-flow .xp-other .lbl { margin: 0; max-width: none; }
.xp-flow .xp-other input { width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); font-size: var(--fs-body); }

.xp-flow .xp-actions { display: flex; flex-wrap: nowrap; gap: var(--sp-3); }
.xp-flow .xp-actions .btn { flex: 1 1 0; width: auto; }
.xp-flow .xp-actions:empty { display: none; }
.xp-flow .xp-done { justify-items: center; text-align: center; }
.xp-flow .xp-done .btn { width: 100%; }
.xp-flow .xp-sum { margin: 0; }

@media (min-width: 768px) {
  .xp-options { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .xp-stepper li { font-size: var(--fs-small); }
  .xp-flow .xp-actions .btn { flex: 0 1 12rem; }
  .xp-flow .xp-done .btn { width: min(100%, 22rem); }
}

/* ===== 사연 찾기(feed.css 의 .feed-page · .pills · .grid · .rank 위에 얹는다) ===== */
.xp-gap { width: 44px; flex: none; }
.xp-find .xp-searchbox { display: grid; gap: var(--sp-1); }
.xp-find .xp-searchbox .lbl { display: block; margin: 0; max-width: none; font-weight: var(--fw-strong); }
.xp-find .xp-searchbox input[type="search"] { width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); }
.xp-find .xp-chips .sec-h { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-strong); }
.xp-find .sec > .help[role="status"] { margin: 0 0 var(--sp-3); }
.xp-find .sec > .sec-h { margin-bottom: var(--sp-3); }
.xp-find .empty { margin: 0 0 var(--sp-3); }

@media (min-width: 768px) {
  .xp-find .xp-searchbox { max-width: 36rem; }
}

/* ===== 이야기·소식: 소식 줄 ===== */
.xp-updates { display: grid; margin: 0; padding: 0; list-style: none; }
.xp-updates li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); }
.xp-updates a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; }
.xp-updates time { flex: none; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }

/* ===== 영역(펀딩·함께 외치기·개인적으로 돕기) ===== */
/* 영역 알약 줄: 사연 · 펀딩 · 함께 외치기 · 개인적으로 돕기 */
.xp-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter); }
.xp-tabs::-webkit-scrollbar { display: none; }
.xp-pill { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-strong); text-decoration: none; white-space: nowrap; }
.xp-pill.on, .xp-pill[aria-current] { background: var(--warm-blush); border-color: var(--warm-coral); color: var(--link); }

/* 카드 한 모양(영역 모아 보기·사례 목록): 가장자리 선 + 옅은 바탕, 카드 전체가 제목 링크 하나로 눌린다 */
.xp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.xp-card { position: relative; display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.xp-card p { margin: 0; max-width: none; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-ui); }
.xp-page .xp-card-t { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.xp-card-t a { display: inline; min-height: 0; color: inherit; text-decoration: none; }
.xp-card-t a::after { content: ""; position: absolute; inset: 0; }
.xp-card:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.xp-card .xp-chip { justify-self: start; padding: 2px var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg); color: var(--muted); font-weight: var(--fw-strong); font-size: var(--fs-caption); }
.xp-card .xp-chip.is-open { background: var(--warm-blush); border-color: var(--warm-coral); color: var(--link); }

@media (min-width: 768px) {
  .xp-areas, .xp-area { max-width: calc(var(--content-max) + 2 * var(--page-gutter)); margin-inline: auto; }
  .xp-area > .xp-lead, .xp-area > .xp-sec, .xp-area > .xp-notice-line, .xp-area > .xp-emptybox { max-width: var(--read-max); }
  .xp-areas > .xp-notice-line { max-width: var(--read-max); }
  .xp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .xp-tabs { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}

@media (min-width: 1080px) {
  .xp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}