/* ==========================================================================
   데이터 이용 약관·개인정보 처리방침 — 팝업(js/terms-dialog.js)·로그인 화면 동의 줄·열람 페이지(#/terms·#/privacy).
   디자인 시스템 v1: 흰 판(radius-xl, shadow-lg) + 옅은 오렌지 머리띠 + 꼬마 에이전트가 요약을 건넨다.
   움직임은 transform·opacity 키프레임뿐(prefers-reduced-motion이면 app.css 전역 규칙이 멈춘다). 팝업 규칙은 .terms-*, 처리방침 표는 .legal-*.
   약관·처리방침 본문 글자는 js/terms.js·js/privacy.js(원문 그대로)이고 여기서는 모양만 다룬다.
   ========================================================================== */

.terms-back { z-index: 90; background: var(--st-scrim); }
.terms-modal {
  position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left;
  width: min(720px, 100%); max-height: min(880px, calc(100dvh - 48px));
  background: var(--st-paper); border-radius: var(--st-radius-xl); box-shadow: var(--st-shadow-lg);
  animation: terms-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes terms-pop { from { opacity: 0; transform: translateY(22px) scale(0.97); } }

/* 머리띠: 제목 + 말풍선 건네는 꼬마 */
.terms-hero {
  position: relative; flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--st-space-4);
  padding: var(--st-space-8) var(--st-space-8) 0; overflow: hidden; background: var(--st-brand-soft);
}
.terms-head { position: relative; padding-bottom: var(--st-space-6); min-width: 0; }
.terms-head h2 { margin: var(--st-space-3) 0 var(--st-space-2); font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; }
.terms-head p { font-size: 14px; line-height: 1.6; color: var(--st-ink-2); }
.terms-head p a { color: var(--st-brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.terms-buddy { position: relative; flex: none; display: flex; align-items: flex-end; gap: var(--st-space-3); margin-right: var(--st-space-6); }
.terms-mascot {
  width: 74px; height: 74px; margin-bottom: var(--st-space-4); transform-origin: 50% 100%;
  box-shadow: var(--st-shadow-agent);
  animation: mascot-hello 1.3s cubic-bezier(0.3, 0.7, 0.4, 1) 0.25s both;
}
.terms-mascot.is-happy { animation: terms-cheer 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
.terms-mascot.is-calm { animation: none; }
@keyframes terms-cheer {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-12px) scale(0.96, 1.08); }
  65% { transform: translateY(0) scale(1.1, 0.88); }
  100% { transform: none; }
}
.terms-bubble {
  position: relative; align-self: flex-start; margin: -4px 0 0; padding: 10px 14px; border-radius: var(--st-radius-xl) var(--st-radius-xl) 4px var(--st-radius-xl);
  background: var(--st-paper); box-shadow: var(--st-shadow-sm);
  font-size: 13px; line-height: 1.5; color: var(--st-ink-2); white-space: nowrap;
  animation: terms-bubble 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
.terms-bubble b { color: var(--st-ink); }
@keyframes terms-bubble { from { opacity: 0; transform: translateY(6px) scale(0.92); } }
.terms-x {
  position: absolute; top: var(--st-space-4); right: var(--st-space-4); width: 36px; height: 36px; border-radius: var(--st-radius-pill); border: 0;
  background: var(--st-paper); color: var(--st-ink); cursor: pointer; font-size: 15px; line-height: 1;
}
.terms-x:hover { box-shadow: var(--st-shadow-sm); }

/* 읽은 만큼 차는 띠 */
.terms-progress { height: 3px; background: var(--st-paper-sunk); flex: none; }
.terms-progress i { display: block; height: 100%; background: var(--st-brand); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.12s linear; }

/* 가운데: 요약 + 전문(한 덩어리로 스크롤) */
.terms-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: var(--st-space-6) var(--st-space-8) var(--st-space-3); }
.terms-body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--st-line-strong); }
.terms-kicker { margin-bottom: var(--st-space-3); font-size: 14px; font-weight: 800; color: var(--st-ink); }
.terms-kicker span { margin-left: var(--st-space-2); font-weight: 500; color: var(--st-ink-2); }
.terms-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-space-3); }
.terms-points li {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--st-space-3); padding: var(--st-space-4);
  border: 1px solid var(--st-line); border-radius: var(--st-radius-lg); background: var(--st-paper-warm);
  animation: terms-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.15s + var(--i, 0) * 0.07s);
}
@keyframes terms-rise { from { opacity: 0; transform: translateY(8px); } }
.terms-no {
  grid-row: span 2; width: 28px; height: 28px; border-radius: var(--st-radius-agent); display: grid; place-items: center;
  background: var(--st-brand); color: var(--st-on-brand); font: 800 14px/1 var(--st-font-sans); font-variant-numeric: tabular-nums;
}
.terms-points b { display: block; margin-bottom: 3px; font-size: 15px; letter-spacing: -0.03em; }
.terms-points span:not(.terms-no) { display: block; font-size: 13.5px; line-height: 1.65; color: var(--st-ink-2); }
.terms-points em { grid-column: 2; font: 500 12.5px/1.4 var(--st-font-sans); font-style: normal; color: var(--st-ink-2); }
.terms-tags { display: flex; flex-wrap: wrap; gap: var(--st-space-2); margin: var(--st-space-3) 0 0; }
.terms-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--st-radius-pill); background: var(--st-paper-sunk); font-size: 13px; font-weight: 600; color: var(--st-ink); }
.terms-tags em { font: 500 12px/1 var(--st-font-sans); font-style: normal; color: var(--st-ink-2); }

.terms-full { margin-top: var(--st-space-8); padding-top: var(--st-space-6); border-top: 1px solid var(--st-line); }
.terms-full-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--st-space-3); margin-bottom: var(--st-space-1); }
.terms-full-head h3 { font-size: 16px; letter-spacing: -0.03em; }
.terms-full-head a { flex: none; font-size: 13px; font-weight: 600; color: var(--st-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.terms-links { flex: none; display: inline-flex; gap: var(--st-space-3); }
.terms-doc h4 { margin: var(--st-space-5) 0 var(--st-space-2); font-size: 15px; letter-spacing: -0.03em; }
.terms-doc p, .terms-doc li { font-size: 14px; line-height: 1.8; color: var(--st-ink-2); }
.terms-doc p { margin: 0 0 6px; }
.terms-doc a, .terms-page a[href^="mailto:"] { color: var(--st-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.terms-items { margin: var(--st-space-1) 0 var(--st-space-2); padding-left: 22px; display: grid; gap: var(--st-space-1); }
.terms-items li::marker { color: var(--st-brand-ink); font-weight: 700; }
.terms-addendum { margin-top: var(--st-space-5) !important; padding: var(--st-space-4) var(--st-space-5); border-radius: var(--st-radius-lg); background: var(--st-paper-sunk); color: var(--st-ink) !important; }
.terms-end { display: flex; align-items: center; justify-content: center; gap: var(--st-space-3); margin: var(--st-space-6) 0 var(--st-space-2); font-size: 13px; color: var(--st-ink-2); }

/* 아래: 필수 확인 두 개 + 버튼 */
.terms-foot { flex: none; padding: var(--st-space-4) var(--st-space-8) var(--st-space-5); border-top: 1px solid var(--st-line); background: var(--st-paper); box-shadow: 0 -14px 24px -22px rgba(25, 23, 20, 0.4); }
.terms-checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-space-3); }
.terms-check {
  display: flex; align-items: center; gap: var(--st-space-3); padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-lg); cursor: pointer;
  border: 1.5px solid var(--st-line-strong); font-size: 14px; color: var(--st-ink); transition: border-color 0.18s, background-color 0.18s;
}
.terms-check:hover { background: var(--st-paper-warm); }
.terms-check:has(input:checked) { border-color: var(--st-ink); background: var(--st-brand-soft); }
.terms-check input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--st-ink); }
.terms-check b {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: var(--st-radius-pill); vertical-align: 1px;
  font-size: 12px; font-weight: 800; color: var(--st-brand-ink); background: var(--st-brand-soft);
}
.terms-foot .form-msg:empty { display: none; }
.terms-foot .form-msg { margin-top: var(--st-space-3); }
.terms-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--st-space-3); margin-top: var(--st-space-4); }

/* 개인정보 처리방침 본문: 표·글머리표·표 아래 한 줄 */
.legal-table-wrap { overflow-x: auto; margin: var(--st-space-2) 0 6px; border: 1px solid var(--st-line); border-radius: var(--st-radius-lg); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.65; }
.legal-table th, .legal-table td { padding: 10px var(--st-space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--st-line); }
.legal-table thead th { background: var(--st-paper-sunk); color: var(--st-ink-2); font-weight: 700; font-size: 13px; white-space: nowrap; }
.legal-table tbody th { color: var(--st-ink); font-weight: 700; white-space: nowrap; }
.legal-table td { color: var(--st-ink-2); }
.legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table a, .legal-list a, .legal-note a { color: var(--st-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-note { font-size: 13px !important; color: var(--st-ink-2) !important; }
.legal-list { margin: var(--st-space-1) 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.legal-list li::marker { color: var(--st-brand-ink); }
.legal-effective { font-weight: 700; color: var(--st-ink) !important; }
.terms-page .doc-sec .legal-table { font-size: 14.5px; }
.terms-page .doc-sec ul.legal-list { list-style: disc; padding-left: 22px; margin-top: var(--st-space-3); }
.terms-page .doc-sec ul.legal-list li { padding-left: 2px; }
.terms-page .doc-sec ul.legal-list li::before { content: none; }

/* 읽기 팝업 아래: 전체 화면으로 보기 + 확인 */
.terms-actions-read { margin-top: 0; }

/* 푸터 맨 아래 줄: 약관·처리방침(처리방침은 법령대로 굵게 구분) */
.footer-legal { display: flex; gap: var(--st-space-4); align-items: center; }
.footer-legal a { color: var(--st-ink-2); }
.footer-legal a:hover { color: var(--st-ink); text-decoration: underline; }
.footer-legal b { color: var(--st-ink); font-weight: 700; }

/* 팝업 아래 받는 이메일 */
.terms-to { display: flex; align-items: center; gap: var(--st-space-2); margin: var(--st-space-3) 0 0; min-width: 0; font-size: 13.5px; color: var(--st-ink-2); }
.terms-to svg { width: 16px; height: 16px; flex: none; color: var(--st-brand-ink); }
.terms-to span { min-width: 0; overflow-wrap: anywhere; }
.terms-to b { color: var(--st-ink); font-weight: 700; }

/* 로그인 화면: 버튼 아래 한 줄 안내 */
.terms-note { margin: 0; font-size: 13px; color: var(--st-ink-2); text-align: center; }
.terms-note a { color: var(--st-brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 동의 상태 줄(약관 열람 페이지) */
.terms-status {
  display: flex; align-items: center; gap: var(--st-space-3); flex-wrap: wrap; padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-lg);
  font-size: 14px; line-height: 1.6; color: var(--st-ink-2); background: var(--st-paper-sunk);
}
.terms-status.ok { background: var(--st-ok-soft); color: var(--st-ink); }
.terms-status svg { width: 16px; height: 16px; flex: none; color: var(--st-ok); }
.terms-status .st-btn { margin-left: auto; }

/* 열람 페이지(#/terms·#/privacy) */
.terms-page .terms-points { margin-bottom: var(--st-space-2); }
.terms-page .doc-sec .terms-points li { padding: var(--st-space-4); font-size: inherit; }
.terms-page .doc-sec .terms-points li::before { content: none; }
.terms-page .doc-sec ol.terms-items { list-style: decimal; padding-left: 22px; margin-top: var(--st-space-3); }
.terms-page .doc-sec ol.terms-items li { padding-left: 2px; }
.terms-page .doc-sec ol.terms-items li::before { content: none; }
.terms-page .doc-sec > p { margin: 0 0 var(--st-space-3); line-height: 1.8; }
.terms-page .doc-sec .docs-sec-head + p { margin-top: 0; }

/* 휴대폰: 아래에서 올라오는 시트 */
@media (max-width: 640px) {
  .terms-back { padding: 0; place-items: end center; }
  .terms-modal { width: 100%; max-height: 92dvh; border-radius: var(--st-radius-xl) var(--st-radius-xl) 0 0; animation-name: terms-up; }
  .terms-modal::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--st-line-strong); opacity: 0.5; z-index: 2; }
  .terms-hero { padding: var(--st-space-6) var(--st-space-5) 0; gap: var(--st-space-3); }
  .terms-head { padding-bottom: var(--st-space-4); }
  .terms-head h2 { font-size: 24px; margin-top: 6px; }
  .terms-head p { font-size: 13px; }
  .terms-bubble { display: none; }
  .terms-buddy { margin-right: 4px; }
  .terms-mascot { width: 52px; height: 52px; margin-bottom: -6px; }
  .terms-x { top: var(--st-space-3); right: var(--st-space-3); }
  .terms-body { padding: var(--st-space-4) var(--st-space-5) var(--st-space-2); }
  .terms-points { grid-template-columns: 1fr; }
  .terms-kicker span { display: block; margin: 2px 0 0; }
  .terms-checks { grid-template-columns: 1fr; gap: var(--st-space-2); }
  .terms-check { padding: 10px var(--st-space-3); font-size: 14px; }
  .terms-foot { padding: var(--st-space-3) var(--st-space-5) calc(var(--st-space-4) + env(safe-area-inset-bottom)); }
  .terms-actions { flex-direction: column-reverse; align-items: stretch; gap: var(--st-space-2); margin-top: var(--st-space-3); }
  .terms-actions .st-btn { width: 100%; justify-content: center; }
  .terms-full-head { flex-wrap: wrap; }
}
@keyframes terms-up { from { transform: translateY(100%); } }

/* 상금 규정(#/prize): 항 번호 + 본문 2열. 예시 표는 3열이라 최소 너비를 풀어 390px에서도 가로로 밀지 않는다. */
.prize-clause { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--st-space-3); padding: var(--st-space-3) 0; }
.prize-no { grid-row: auto; width: 24px; height: 24px; margin-top: 2px; font-size: 12px; }
.prize-text { min-width: 0; overflow-wrap: anywhere; }
.prize-text p { margin: 0; }
.prize-page .ex-table .table { min-width: 0; }
.prize-page .ex-table .table th, .prize-page .ex-table .table td { padding-left: var(--st-space-2); padding-right: var(--st-space-2); }
.prize-note { margin-top: var(--st-space-3); }