/* 화면 담당 전용 — css/ds-me.css. 디자인 시스템 v1(ds.css)의 st-* 컴포넌트를 쓰는 '내 경기·로그인·제보' 화면의 스타일만 둔다.
   이름은 me-(내 경기·공용 부품) · auth-(로그인) · rp-(제보). 색·간격·모서리는 모두 --st-* 토큰. */

/* ---------- 공용: 좁은 화면 폭, 코드 글꼴, 한 줄 안내, 안내 상자 ---------- */
.wrap.me-narrow { width: min(640px, calc(100% - 48px)); }
.me-report > * { max-width: 880px; } /* 폭은 다른 화면의 기본 틀과 같게 두고 내용만 880px 안쪽에 왼쪽 정렬 */
.me-page, .me-narrow, .me-report, .auth-body { word-break: keep-all; overflow-wrap: anywhere; }
.me-code { font-family: var(--st-font-mono); font-size: 0.92em; font-variant-ligatures: none; letter-spacing: 0; }
.st-hint-label { font: 600 13px/1.3 var(--st-font-sans); letter-spacing: -0.01em; color: var(--st-ink-2); }
.me-spacer { flex: 1; }

.me-msg, .auth-msg { min-height: 0; font: 600 14px/1.5 var(--st-font-sans); color: var(--st-ink-2); }
.me-msg:empty, .auth-msg:empty { display: none; }
.me-msg--err, .auth-msg--err { color: var(--st-danger); }
.me-msg--ok { color: var(--st-ok); }

/* 꼬마 없는 안내 상자(Callout 말풍선의 가벼운 형제): 옅은 상태색 면 + 머리 한 단어 */
.me-note { max-width: 760px; padding: var(--st-space-4) var(--st-space-5); border-radius: var(--st-radius-lg); background: var(--st-brand-soft); color: var(--st-ink); }
.me-note p { margin: 0; font-size: 15px; line-height: 1.65; }
.me-note .st-callout-tag { display: block; margin-bottom: 4px; font: 800 12.5px/1.2 var(--st-font-sans); letter-spacing: 0.01em; color: var(--st-brand-ink); }
.me-note--warn { background: var(--st-warn-soft); }
.me-note--warn .st-callout-tag { color: var(--st-warn); }
.me-note--brand { background: var(--st-brand-soft); }
.me-note--brand .st-callout-tag { color: var(--st-brand-ink); }
.me-note--danger { background: var(--st-danger-soft); }
.me-note--danger .st-callout-tag { color: var(--st-danger); }
.me-note b { font-weight: 800; }
.me-note .st-btn { margin-top: var(--st-space-3); }
.me-note a { color: var(--st-brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 시각 구획: 제목 줄(제목 + 오른쪽 행동) */
.me-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-3) var(--st-space-4); margin-bottom: var(--st-space-5); }
.me-section-head h2 { margin: 0; font: 800 24px/1.25 var(--st-font-sans); letter-spacing: -0.03em; }
.me-section-head .st-hint { margin: 4px 0 0; }

.me-form { display: grid; gap: var(--st-space-6); padding: var(--st-space-8); border-radius: var(--st-radius-xl); }
/* 닉네임 확인(ADR 0020): 입력 옆 보조 버튼(좁은 화면은 아래로), 결과 한 줄은 aria-live */
.me-handle-row { display: flex; flex-wrap: wrap; gap: var(--st-space-3); }
.me-handle-row .st-input { flex: 1 1 220px; min-width: 0; }
.me-handle-check { flex: 0 0 auto; white-space: nowrap; }
.me-check-msg { min-height: 0; font: 600 14px/1.5 var(--st-font-sans); color: var(--st-ink-2); }
.me-check-msg:empty { display: none; }
.me-check-msg--ok { color: var(--st-ok); }
.me-check-msg--err { color: var(--st-danger); }
.me-submit-hint:empty { display: none; }
.me-submit-hint { margin: calc(var(--st-space-3) * -1) 0 0; text-align: center; }
@media (max-width: 560px) { .me-handle-check { width: 100%; } }
.me-form .st-check { align-items: flex-start; }
.me-form .st-check a { color: var(--st-brand-ink); }
.me-empty { padding: var(--st-space-8) var(--st-space-4); }
.me-empty h3 { font-size: 20px; }
.me-empty p { max-width: 420px; }

/* ---------- 내 경기 ---------- */
.me-page .page-head { margin-bottom: var(--st-space-10); }
.me-who { display: inline-flex; align-items: center; gap: var(--st-space-5); max-width: 100%; }
.me-who .st-pair { margin-right: var(--st-space-2); }
.me-handle { min-width: 0; overflow-wrap: anywhere; }
.me-head-actions { margin-top: var(--st-space-5); }
.me-page > .me-note { margin-bottom: var(--st-space-6); }

.me-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.me-stats .st-stat { min-width: 0; }
.me-stats .st-stat-value { font-size: clamp(28px, 2.9vw, 38px); }
.me-stats .st-stat-value small { margin-left: 6px; font-size: 16px; }
.me-stats .st-stat-sub { line-height: 1.6; }
.me-meter { height: 8px; margin-top: var(--st-space-3); border-radius: var(--st-radius-pill); background: var(--st-paper-deep); overflow: hidden; }
.me-meter > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--st-brand); transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.me-stats .me-meter + .st-stat-sub { margin-top: var(--st-space-3); }

.me-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-space-12) var(--st-space-8); margin-top: var(--st-space-12); align-items: stretch; }
.me-section { display: flex; flex-direction: column; min-width: 0; }
.me-section > .st-card { flex: 1; }
.me-section--wide { grid-column: 1 / -1; }

.me-list { padding: 0; overflow: hidden; }
.me-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--st-space-4);
  padding: var(--st-space-5) var(--st-space-6); color: inherit; text-decoration: none; transition: background-color 0.15s;
}
.me-row + .me-row { box-shadow: inset 0 1px 0 var(--st-line); }
.me-row:hover { background: var(--st-paper-warm); }
.me-row-main { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.me-row-name { font: 700 17px/1.35 var(--st-font-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.me-row-meta { font: 600 13px/1.4 var(--st-font-sans); color: var(--st-ink-3); }
.me-reject { margin-top: var(--st-space-2); max-width: 64ch; padding: 8px 12px; border-radius: var(--st-radius-md); background: var(--st-danger-soft); color: var(--st-ink); font: 500 14px/1.55 var(--st-font-sans); text-decoration: none; overflow-wrap: anywhere; }
.me-reject b { font-weight: 800; }
.me-lint { margin-top: var(--st-space-2); height: auto; min-height: 28px; padding-block: 5px; white-space: normal; line-height: 1.35; }
.me-amount { min-width: 7ch; text-align: right; font: 800 18px/1.2 var(--st-font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.me-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--st-space-2); }
.me-amount-sub { display: block; margin-top: 2px; font: 600 13px/1.4 var(--st-font-sans); color: var(--st-ink-3); letter-spacing: 0; }
.me-vwait { margin-bottom: var(--st-space-6); }
.me-vwait .me-lead { margin: 0; }
.me-vstats { margin-bottom: var(--st-space-6); }
.me-appeal-note { margin: 0 0 var(--st-space-3); color: var(--st-ink-2); font: 500 14px/1.5 var(--st-font-sans); }
.me-old-stats { margin-bottom: var(--st-space-6); }
.me-old-stats > summary { cursor: pointer; padding: var(--st-space-2) 0 var(--st-space-4); color: var(--st-ink-2); font: 600 14px/1.4 var(--st-font-sans); }
.me-row.is-dead .me-row-name { text-decoration: line-through; text-decoration-color: var(--st-danger); text-decoration-thickness: 1.5px; color: var(--st-ink-2); }
.me-row.is-dead .me-amount { color: var(--st-ink-3); font-weight: 700; }

.me-token { display: grid; gap: var(--st-space-5); }
.me-lead { margin: 0; color: var(--st-ink-2); font-size: 15px; line-height: 1.7; }
.me-token .st-stack { gap: var(--st-space-4); }
.me-token #token-issue { justify-self: start; }
.me-token-card { display: grid; gap: var(--st-space-4); padding-top: var(--st-space-5); box-shadow: 0 -1px 0 var(--st-line); }
.me-token-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-2) var(--st-space-3); }
.me-token-mask { padding: 6px 10px; border-radius: var(--st-radius-sm); background: var(--st-paper-sunk); font-size: 14px; font-weight: 600; }
.me-token-card .st-hint, .me-token .st-hint { margin: 0; }
.me-usage-label { margin-bottom: var(--st-space-2); font: 700 13.5px/1.4 var(--st-font-sans); color: var(--st-ink-2); }
.me-usage .me-meter { margin: 0 0 var(--st-space-2); }
.me-access { margin: 0; font-size: 14px; line-height: 1.6; color: var(--st-ink-2); }
.me-access b { color: var(--st-ink); font-weight: 800; }
.me-token-actions { gap: var(--st-space-2); }
.me-input-code { font-family: var(--st-font-mono); font-size: 14px; letter-spacing: 0; }

.token-box.me-token-box {
  display: grid; gap: var(--st-space-3); padding: var(--st-space-5); border: 0; border-radius: var(--st-radius-lg);
  background: var(--st-paper-warm); box-shadow: inset 0 0 0 1.5px var(--st-brand);
}
.me-token-warn { margin: 0; font: 700 15px/1.55 var(--st-font-sans); color: var(--st-ink); }
.token-box.me-token-box code.me-token-value {
  display: block; padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-md); background: var(--st-paper); box-shadow: inset 0 0 0 1px var(--st-line);
  font-family: var(--st-font-mono); font-size: 14px; line-height: 1.6; color: var(--st-ink); word-break: break-all; user-select: all;
}
.me-token-box .st-hint { margin: 0; }
#token-out .me-note { margin-bottom: var(--st-space-3); }

.me-kv { display: grid; margin: 0; }
.me-kv > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--st-space-3); padding: var(--st-space-3) 0; }
.me-kv > div + div { box-shadow: inset 0 1px 0 var(--st-line); }
.me-kv dt { font: 600 13.5px/1.5 var(--st-font-sans); color: var(--st-ink-3); }
.me-kv dd { margin: 0; font: 600 14.5px/1.5 var(--st-font-sans); color: var(--st-ink); overflow-wrap: anywhere; }
.me-kv dd.me-code, .me-kv--code dd { font-family: var(--st-font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.me-kv--code { padding: var(--st-space-1) var(--st-space-4); border-radius: var(--st-radius-md); background: var(--st-paper-sunk); }
.me-kv--code dt { color: var(--st-ink-2); }
.me-kv--code > div + div { box-shadow: inset 0 1px 0 var(--st-line); }
.me-info-note { margin: var(--st-space-3) 0 var(--st-space-5); }

/* ---------- 로그인 ---------- */
.auth-wrap { min-height: calc(100vh - var(--nav-h)); padding: calc(var(--nav-h) + var(--st-space-12)) 24px var(--st-space-24); }
.st-card.auth-card { width: min(480px, 100%); padding: 0; border-radius: var(--st-radius-xl); box-shadow: var(--st-shadow-md); overflow: visible; }
.auth-body { display: grid; gap: var(--st-space-5); padding: var(--st-space-10); }
.auth-body > * { margin: 0; }
.auth-mark { display: flex; }
.auth-body .st-eyebrow { justify-self: start; }
.auth-body h1 { font: 800 34px/1.2 var(--st-font-sans); letter-spacing: -0.04em; text-wrap: balance; }
.auth-lead { font-size: 16px; line-height: 1.7; color: var(--st-ink-2); }
.auth-email { color: var(--st-ink); font-weight: 800; overflow-wrap: anywhere; }
.auth-body .terms-note { font-size: 13px; line-height: 1.6; color: var(--st-ink-3); text-align: left; }
.auth-body .terms-note a { color: var(--st-brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-actions { margin-top: var(--st-space-2); }
.auth-dev { padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-md); background: var(--st-paper-sunk); }
.auth-body .loader { min-height: 220px; }

/* ---------- 제보 ---------- */
.me-report .page-head { margin-bottom: var(--st-space-8); }
.me-report .page-head .st-pill { margin-top: var(--st-space-5); }
.rp-notes { display: grid; gap: var(--st-space-3); margin-bottom: var(--st-space-8); }
.rp-notes:empty { display: none; }
#report-product-slot:not(:empty) { margin-bottom: var(--st-space-8); }
#report-product-slot > .me-note { margin-bottom: 0; }
.rp-product .me-section-head { margin-bottom: var(--st-space-4); }

.rp-form { gap: var(--st-space-10); }
.rp-section { display: grid; gap: var(--st-space-5); }
.rp-section + .rp-section { padding-top: var(--st-space-10); box-shadow: 0 -1px 0 var(--st-line); }
.rp-section h2 { margin: 0; font: 800 22px/1.3 var(--st-font-sans); letter-spacing: -0.03em; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--st-space-5); align-items: start; }
.rp-grid--tight { gap: var(--st-space-3); }
.rp-grid > .st-field:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rp-group { grid-column: 1 / -1; display: grid; gap: var(--st-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.rp-group legend { padding: 0; margin-bottom: var(--st-space-3); }
.rp-form select.st-input {
  appearance: none; -webkit-appearance: none; padding-right: 44px; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625d57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.rp-form select.st-input:disabled { background-color: var(--st-paper-sunk); color: var(--st-ink-3); cursor: not-allowed; border-color: var(--st-line); }
.rp-form .st-input:disabled { cursor: not-allowed; }

.st-field > .st-input-wrap { width: 100%; }
.rp-form .st-field > .st-hint, .me-form .st-field > .st-hint { margin: 0; }

.drop.rp-drop {
  min-height: 0; padding: var(--st-space-8) var(--st-space-6); gap: var(--st-space-2); border: 2px dashed var(--st-line-strong); border-radius: var(--st-radius-lg);
  background: var(--st-paper-warm); color: var(--st-ink); transition: border-color 0.15s, background-color 0.15s;
}
.drop.rp-drop:hover, .drop.rp-drop.drag { border-color: var(--st-brand); background: var(--st-brand-soft); }
.drop.rp-drop:focus-within { border-color: var(--st-brand-ink); box-shadow: 0 0 0 3px var(--st-brand-soft); }
.drop.rp-drop svg { width: 32px; height: 32px; color: var(--st-brand-ink); }
.drop.rp-drop b { font: 700 16px/1.4 var(--st-font-sans); letter-spacing: -0.02em; }
.drop.rp-drop small { font: 600 13px/1.5 var(--st-font-sans); color: var(--st-ink-2); }
.rp-files { display: grid; gap: var(--st-space-2); }
.rp-files:not(:empty) { margin-top: var(--st-space-3); }
.rp-file { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--st-space-3); padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-md); box-shadow: inset 0 0 0 1px var(--st-line); }
.rp-file-main { display: grid; gap: 2px; min-width: 0; }
.rp-file-main b { font: 700 15px/1.4 var(--st-font-sans); overflow-wrap: anywhere; }
.rp-file-main .st-hint { overflow-wrap: anywhere; }
.rp-actions { gap: var(--st-space-3); }
.rp-actions [hidden] { display: none; }

.rp-history { margin-top: var(--st-space-16); }
.rp-list { display: grid; gap: var(--st-space-4); }
.rp-usage { margin: 0; }
.rp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--st-space-4); }
.rp-item-main { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.rp-item-name { font: 700 17px/1.35 var(--st-font-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rp-item-meta { font: 600 13px/1.5 var(--st-font-sans); color: var(--st-ink-3); overflow-wrap: anywhere; }
.rp-item-reason { margin: var(--st-space-2) 0 0; max-width: 65ch; font-size: 15px; line-height: 1.65; color: var(--st-ink-2); overflow-wrap: anywhere; }
.rp-item-links, .rp-item-actions { margin-top: var(--st-space-3); gap: var(--st-space-2); }
.rp-item-actions { margin-top: var(--st-space-4); }
.rp-item .ev-link { text-decoration: none; }
.rp-item .ev-link:hover { box-shadow: inset 0 0 0 1px var(--st-brand); color: var(--st-brand-ink); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1024px) {
  .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-stats .st-stat:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--st-line); }
  .me-stats .st-stat:nth-child(2) { box-shadow: inset 1px 0 0 var(--st-line); }
  .me-stats .st-stat:nth-child(4) { box-shadow: inset 1px 0 0 var(--st-line), inset 0 1px 0 var(--st-line); }
}
@media (max-width: 860px) {
  .me-layout { grid-template-columns: minmax(0, 1fr); gap: var(--st-space-10); }
}
@media (max-width: 720px) {
  .wrap.me-narrow, .wrap.me-report { width: calc(100% - 2 * var(--st-space-4)); }
  .wrap.me-page { width: calc(100% - 2 * var(--st-space-4)); }
  .me-page .page-head { margin-bottom: var(--st-space-8); }
  .me-who { gap: var(--st-space-4); }
  .me-who .st-person--xl { width: 64px; height: 64px; font-size: 34px; }
  .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-stats .st-stat:nth-child(-n+2) { grid-column: 1 / -1; }
  .me-stats .st-stat:nth-child(n) { box-shadow: inset 0 1px 0 var(--st-line); }
  .me-stats .st-stat:nth-child(1) { box-shadow: none; }
  .me-stats .st-stat:nth-child(4) { box-shadow: inset 1px 0 0 var(--st-line), inset 0 1px 0 var(--st-line); }
  .me-stats .st-stat { padding: var(--st-space-5) var(--st-space-6); }
  .me-stats .st-stat-value { font-size: 34px; }
  .me-form { padding: var(--st-space-6) var(--st-space-5); }
  .me-section-head h2 { font-size: 22px; }
  .me-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--st-space-4) var(--st-space-5); row-gap: var(--st-space-3); }
  .me-row-main { grid-column: 1 / -1; }
  .me-kv > div { grid-template-columns: 1fr; gap: 2px; }
  .auth-wrap { padding: calc(var(--nav-h) + var(--st-space-8)) var(--st-space-4) var(--st-space-16); }
  .auth-body { padding: var(--st-space-8) var(--st-space-6); }
  .auth-body h1 { font-size: 28px; }
  .rp-section + .rp-section { padding-top: var(--st-space-8); }
  .rp-file { grid-template-columns: minmax(0, 1fr) auto; }
  .rp-file .st-btn { grid-column: 1 / -1; }
  .rp-item { grid-template-columns: minmax(0, 1fr); }
  .rp-item > .st-pill { order: -1; justify-self: start; }
  .rp-actions .st-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .me-meter > i { transition: none; }
}

/* 제보 접수 직후 안내: 제보는 운영자 검토(순위 미포함), 점수는 물품 등록 */
.me-msg--ok .rp-received-note { margin-top: 6px; font-weight: 500; color: var(--st-ink-2); }
.me-msg--ok .rp-received-act { margin-top: 10px; }

/* 검증 결과 합계 카드: 원 단위 큰 숫자는 숫자 중간에서 줄바꿈하지 않는다 */
.me-vstats .st-stat-value { white-space: nowrap; font-size: clamp(22px, 2.3vw, 32px); }
@media (max-width: 720px) {
  .me-vstats .st-stat-value { font-size: clamp(19px, 5vw, 28px); }
  .me-vstats .st-stat:nth-child(-n+2) .st-stat-value { font-size: 28px; }
}