/* 목업 37판 tip 화면 전용 CSS — 이 파일은 그 화면 담당 에이전트만 고친다(10/16 목업 구현 계약). 화면 파일에서 page({ styles: ['/assets/screens/tip.css'] }) 로 붙인다.
   사연 알리기(/tip) · 후원 미리보기(/donate) · 후원 완료 미리보기(/donate/done) 가 같이 쓴다. 색·모양은 기존 토큰만 쓰고 디자이너가 나중에 손본다. */

/* 앱 바: ‹ 뒤로 · 화면 이름 · 빈 자리(목업 .top.nav) */
.tip-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 60px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-1); position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line); }
.tip-bar-back, .tip-bar-close { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); text-decoration: none; flex: none; }
.tip-bar-back .ic, .tip-bar-close .ic { width: 20px; height: 20px; }
.tip-bar-title { flex: 1; margin: 0; max-width: none; text-align: center; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.tip-bar-gap { width: 44px; flex: none; }

/* 본문 틀(목업 .sec.form: 좌우 16, 칸 사이 16) */
.tip-page { max-width: 42rem; margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }
.tip-page p, .tip-page li { max-width: none; margin: 0; word-break: keep-all; }
.tip-page strong { overflow-wrap: anywhere; word-break: break-all; }
.tip-form { display: grid; gap: var(--sp-4); margin: 0; }
.tip-page .field { display: grid; gap: var(--sp-1); border: 0; padding: 0; margin: 0; min-width: 0; max-width: none; }
.tip-page .field legend, .tip-page .lbl { font-weight: var(--fw-strong); color: var(--ink); padding: 0; }
.tip-page label.lbl { display: block; margin: 0; max-width: none; }
.tip-page .field input:not([type="checkbox"]):not([type="radio"]), .tip-page .field select, .tip-page .field textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); background: var(--bg); }
.tip-page .field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.tip-page .field [aria-invalid="true"] { border-color: var(--err); }
.tip-page ::placeholder { color: var(--muted); opacity: 1; }
.tip-page .help { font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-ui); }
.tip-page .center { text-align: center; }
.tip-page .errline, .tip-page .field-error { color: var(--err); font-size: var(--fs-caption); font-weight: var(--fw-strong); }
.tip-page .form-error { border: 1px solid var(--err); border-radius: var(--radius); padding: var(--sp-3); color: var(--err); }
.tip-page .form-error h2 { font-size: var(--fs-body); margin: 0 0 var(--sp-1); }
.tip-page .tip-message { padding: var(--sp-3); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-caption); line-height: var(--lh-ui); }

/* 누구의 사연인가요? 분절 단추(라디오라서 스크립트 없이 고른다) */
.tip-page .seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.tip-page .seg label { position: relative; flex: 1; display: grid; place-items: center; margin: 0; max-width: none; min-height: 44px; padding: 0 var(--sp-2); background: var(--bg); font-size: var(--fs-caption); font-weight: var(--fw-strong); text-align: center; cursor: pointer; }
.tip-page .seg label + label { border-left: 1px solid var(--line-strong); }
.tip-page .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tip-page .seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.tip-page .seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -4px; }
.tip-page .field[aria-invalid="true"] .seg { border-color: var(--err); }

/* 당사자와의 관계: '아는 분을 대신해요' 를 고르면 열린다(서버가 다시 그릴 때는 is-visible) */
.tip-page .third-party-fields { display: none; }
.tip-page .third-party-fields.is-visible,
.tip-page .tip-form:has(input[name="kind"][value="third_party"]:checked) .third-party-fields { display: grid; }

/* 안내 상자 · 동의 · 14세 */
.tip-page .notice { display: grid; gap: var(--sp-1); font-size: var(--fs-caption); line-height: var(--lh-ui); color: var(--muted); background: var(--surface); border-radius: var(--radius); padding: var(--sp-3); }
.tip-page .check, .tip-page .check-row { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; max-width: none; min-height: 44px; padding-top: var(--sp-2); line-height: var(--lh-ui); cursor: pointer; }
.tip-page .check input, .tip-page .check-row input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }

/* 단추 */
.tip-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-ui); text-align: center; text-decoration: none; cursor: pointer; }
.tip-page .btn.ghost { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.tip-page .linkish { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--accent); font-weight: var(--fw-strong); }

/* 접수 완료(목업 .done) */
.tip-page .tip-step { display: grid; gap: var(--sp-4); }
.tip-page .done { display: grid; place-items: center; width: 64px; height: 64px; margin: var(--sp-5) auto 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.tip-page .done .ic { width: 30px; height: 30px; }
.tip-page .done-title { margin: 0; text-align: center; font-size: var(--fs-heading); font-weight: var(--fw-bold); }

/* 옛 확인 화면(서버가 action=confirm 을 받을 때만) */
.tip-page .tip-steps { display: grid; gap: var(--sp-2); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.tip-page .tip-steps li { border-top: 2px solid var(--line); padding-top: var(--sp-2); font-size: var(--fs-caption); }
.tip-page .tip-steps [aria-current="step"] { border-color: var(--accent); font-weight: var(--fw-bold); }
.tip-page .tip-collection-notice { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--sp-3); display: grid; gap: var(--sp-2); }

/* 후원 미리보기 · 후원 완료 미리보기(모금 전 모양만, 결제 칸 없음) */
.tip-page .sec-h { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.tip-page .sub-h { margin: 0 0 var(--sp-1); font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: 0; }
.tip-page > section { border-top: 0; padding-block: 0; }
.tip-page .rows { display: grid; grid-template-columns: none; max-width: none; font-size: var(--fs-caption); line-height: var(--lh-ui); margin: 0; }
.tip-page .rows > div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.tip-page .rows > div:last-child { border-bottom: 0; }
.tip-page .rows dt, .tip-page .rows dd { border-top: 0; padding: 0; margin: 0; }
.tip-page .rows dt { color: var(--muted); font-weight: var(--fw-regular); }
.tip-page .rows a { color: var(--accent); }
.tip-page .warnline { font-size: var(--fs-caption); line-height: var(--lh-ui); }
.tip-page .tip-links { display: grid; justify-items: center; }

@media (min-width: 40rem) {
  .tip-page { padding-top: var(--sp-5); }
}

/* 반응형 웹(RW3, 10/16) — 휴대폰(767px 이하)은 위 규칙 그대로. 태블릿 768px 이상은 읽기 폭 760px 가운데(좌우 여백 24px), PC 1080px 이상은 좌우 여백 32px.
   앱 바는 내용 폭(최대 1200px) 왼쪽 끝에 ‹ 를 맞추고 제목은 가운데 그대로. 휴대폰에서 가로 전체이던 단추는 넓은 화면에서 22rem 안으로. */
@media (min-width: 768px) {
  .tip-bar { padding-inline: max(var(--sp-3), calc((100% - 1200px) / 2 - var(--sp-3))); }
  .tip-page { max-width: calc(760px + 2 * var(--sp-5)); padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .tip-page .btn { width: min(100%, 22rem); justify-self: start; }
  .tip-page .tip-step .btn { justify-self: center; }
}

@media (min-width: 1080px) {
  .tip-bar { padding-inline: max(20px, calc((100% - 1200px) / 2 - var(--sp-3))); }
  .tip-page { max-width: calc(760px + 64px); padding-inline: 32px; }
}