/* 사례비 지급대행 화면 공용 스타일 — payout-console(연구자), payout(참가자), admin-payouts(관리자).
   style.css 위에 .po- 접두어로만 얹는다(기존 화면에 영향 없음). */
.po { --po-ink:#17233c; --po-muted:#65738b; --po-line:#e5eaf2; --po-bg:#f6f8fc; --po-blue:#635BFF; --po-blue2:#4f46e5;
  --po-tint:#eef0ff; --po-good:#168260; --po-goodbg:#e9f8f0; --po-warn:#b4691b; --po-warnbg:#fff5e8;
  --po-bad:#b23a4a; --po-badbg:#fdecee; --po-r:16px; --po-shadow:0 8px 30px rgba(28,47,94,.055);
  color:var(--po-ink); }
.po *, .po *::before, .po *::after { box-sizing:border-box; }
.po [hidden] { display:none !important; }
.po-hero { padding:0.5rem 0 1.25rem; }
.po-eyebrow { font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--po-blue); font-weight:800; margin:0 0 6px; }
.po-hero h1 { font-size:1.65rem; letter-spacing:-.04em; line-height:1.3; margin:0 0 8px; font-weight:800; }
.po-hero p { color:var(--po-muted); margin:0; max-width:880px; font-size:.95rem; }
.po-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:20px; align-items:start; }
.po-col { min-width:0; }
.po-col > .po-card + .po-card { margin-top:16px; }
.po-card { background:#fff; border:1px solid var(--po-line); border-radius:var(--po-r); padding:22px; box-shadow:var(--po-shadow); }
.po-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.po-title { margin:0; font-size:1.02rem; letter-spacing:-.02em; font-weight:780; display:flex; align-items:center; }
.po-step { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:8px; background:var(--po-tint); color:var(--po-blue); font-size:12px; margin-right:8px; font-weight:800; }
.po-pill { font-size:11px; padding:4px 9px; border-radius:50px; background:#fff; border:1px solid var(--po-line); color:var(--po-muted); font-weight:650; white-space:nowrap; }
.po-hint { font-size:12px; color:var(--po-muted); margin:8px 0 0; }
.po-label { display:block; font-size:13px; font-weight:720; margin-bottom:7px; }
.po-study { padding:15px 16px; background:#f7f8fe; border-radius:12px; border:1px solid #ebeef8; }
.po-study .po-kicker { font-size:12px; color:var(--po-muted); }
.po-study strong { font-size:1.02rem; display:block; margin-top:2px; }
.po-meta { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.po-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.po-mode { display:flex; gap:11px; text-align:left; background:#fff; border:1.5px solid var(--po-line); border-radius:12px; padding:14px 12px; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s, background .15s; }
.po-mode.active { border-color:var(--po-blue); background:#f5f5ff; box-shadow:inset 0 0 0 1px var(--po-blue); }
.po-mode-ico { font-size:19px; background:#f3f4fb; border-radius:10px; width:36px; height:36px; display:grid; place-items:center; flex:none; }
.po-mode b { font-size:14px; }
.po-mode small { display:block; font-size:11.5px; color:var(--po-muted); margin-top:4px; line-height:1.5; }
.po textarea, .po .po-input, .po select.po-input { width:100%; border:1px solid #dce3ee; background:#fff; border-radius:10px; padding:11px 12px; outline:0; color:var(--po-ink); font:inherit; transition:border-color .15s, box-shadow .15s; }
.po textarea:focus, .po .po-input:focus { border-color:#7c75ff; box-shadow:0 0 0 3px #eeedff; }
.po textarea { resize:vertical; min-height:170px; line-height:1.9; font-family:inherit; }
.po-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.po-link-btn { border:0; background:none; color:var(--po-blue); font-size:12.5px; font-weight:700; padding:0; cursor:pointer; }
.po-estimate { background:#f7f8fe; border:1px solid var(--po-line); border-radius:12px; padding:12px 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.po-estimate span { display:block; color:var(--po-muted); font-size:11.5px; }
.po-estimate b { display:block; margin-top:2px; font-size:1.05rem; }
.po-warning { color:var(--po-warn); font-size:12px; margin:8px 0 0; }
.po-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.po-actions .po-btn-primary { flex:1; }
.po-btn-primary { border:0; border-radius:11px; background:var(--po-blue); color:#fff; padding:12px 16px; font-weight:740; cursor:pointer; font:inherit; font-weight:740; }
.po-btn-primary:hover:not(:disabled) { background:var(--po-blue2); }
.po-btn-primary:disabled, .po-btn:disabled { opacity:.45; cursor:not-allowed; }
.po-btn { border:1px solid #dce3ee; border-radius:10px; background:#fff; color:#38496b; padding:9px 12px; font-weight:700; cursor:pointer; font:inherit; font-weight:700; font-size:13px; }
.po-btn:hover:not(:disabled) { background:#f7f8ff; }
.po-btn-soft { border:0; background:var(--po-tint); color:var(--po-blue); border-radius:10px; padding:9px 12px; font-weight:730; cursor:pointer; font:inherit; font-weight:730; font-size:13px; }
.po-notice { display:flex; gap:10px; align-items:flex-start; border:1px solid #f2dbac; border-radius:12px; background:#fff9eb; padding:11px 14px; color:#8a6122; font-size:12.5px; margin-bottom:16px; }

/* 진행 현황 */
.po-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.po-sum { background:#f7f8fe; border:1px solid var(--po-line); border-radius:12px; padding:11px 13px; }
.po-sum span { display:block; font-size:11.5px; color:var(--po-muted); }
.po-sum b { display:block; font-size:1.2rem; margin-top:2px; letter-spacing:-.02em; }
.po-sum small { font-size:11px; color:var(--po-muted); }
.po-progress { display:flex; align-items:center; gap:10px; margin:2px 0 14px; font-size:12px; color:var(--po-muted); }
.po-progress-track { flex:1; height:8px; background:#edf0f7; border-radius:99px; overflow:hidden; }
.po-progress-bar { height:100%; background:linear-gradient(90deg,#635BFF,#8b85ff); border-radius:99px; transition:width .3s; }
.po-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.po-filters { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.po-chip { border:1px solid var(--po-line); background:#fff; color:#52627e; border-radius:99px; padding:5px 10px; font-size:12px; font-weight:650; cursor:pointer; font-family:inherit; }
.po-chip b { margin-left:3px; }
.po-chip.active { background:var(--po-ink); color:#fff; border-color:var(--po-ink); }
.po-search { width:150px !important; padding:7px 10px !important; font-size:12.5px !important; }
.po-table-wrap { overflow-x:auto; border:1px solid var(--po-line); border-radius:12px; max-height:560px; overflow-y:auto; }
.po-table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:12.5px; }
.po-table th { text-align:left; color:#8a96a9; background:#f7f9fc; font-weight:700; padding:10px; border-bottom:1px solid var(--po-line); position:sticky; top:0; z-index:1; }
.po-table td { border-bottom:1px solid #eef1f6; padding:10px; vertical-align:middle; }
.po-table tr:last-child td { border-bottom:0; }
.po-table tr.po-new td { background:#f6f5ff; }
.po-name { max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.po-amt { font-variant-numeric:tabular-nums; }
.po-code { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.po-token { letter-spacing:.3px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:#3b37c9; }
.po-link { color:#3b37c9; font-weight:650; }
.po-note { font-size:11px; color:var(--po-bad); margin-top:3px; white-space:normal; max-width:180px; }
.po-status { display:inline-block; font-size:11.5px; font-weight:720; padding:3px 9px; border-radius:99px; background:#edf1f7; color:#5b6b84; }
.st-issued { background:#edf1f7; color:#5b6b84; }
.st-submitted { background:#e8f0ff; color:#2557d6; }
.st-pending { background:var(--po-warnbg); color:var(--po-warn); }
.st-paid { background:var(--po-goodbg); color:var(--po-good); }
.st-error { background:var(--po-badbg); color:var(--po-bad); }
.st-revoked { background:#f3f4f6; color:#9aa3b2; text-decoration:line-through; }
.po-chip.st-issued, .po-chip.st-submitted, .po-chip.st-pending, .po-chip.st-paid, .po-chip.st-error { background:#fff; }
.po-chip.active.st-issued, .po-chip.active.st-submitted, .po-chip.active.st-pending, .po-chip.active.st-paid, .po-chip.active.st-error { background:var(--po-ink); color:#fff; }
.po-row-actions { display:flex; gap:6px; align-items:center; }
.po-mini { border:1px solid var(--po-line); background:#fff; color:#52627e; padding:5px 8px; border-radius:7px; font-size:11.5px; cursor:pointer; font-family:inherit; }
.po-mini:hover { background:#f7f8ff; }
.po-more { position:relative; }
.po-more summary { list-style:none; cursor:pointer; border:1px solid var(--po-line); border-radius:7px; padding:3px 8px; color:#52627e; font-weight:800; }
.po-more summary::-webkit-details-marker { display:none; }
.po-more > div { position:absolute; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--po-line); border-radius:9px; box-shadow:0 8px 20px rgba(20,30,60,.12); padding:4px; z-index:5; min-width:120px; }
.po-more > div button { display:block; width:100%; text-align:left; border:0; background:none; padding:7px 9px; font-size:12px; border-radius:6px; cursor:pointer; font-family:inherit; }
.po-more > div button:hover { background:#f5f6fb; }
.po-more > div button.danger { color:var(--po-bad); }
.po-table-footer { margin-top:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; }
.po-empty { text-align:center; padding:30px 14px; color:var(--po-muted); font-size:13px; white-space:normal; }
.po-empty-ico { font-size:28px; margin-bottom:6px; }
.po-flow { display:flex; align-items:center; gap:8px; margin:6px 0 0; color:#5e6f86; font-size:12px; flex-wrap:wrap; }
.po-flow b { background:var(--po-tint); color:var(--po-blue); padding:5px 9px; border-radius:8px; font-weight:700; }
.po-flow i { font-style:normal; color:#a0aabc; }
.po-sheet { padding:14px 15px; background:#f8f9ff; border:1px solid #e6e8ff; border-radius:12px; margin-top:12px; }
.po-sheet strong { font-size:13px; }
.po-sheet p { font-size:12px; color:#61728c; margin:5px 0 0; }

/* 참가자 화면 */
.po-portal-wrap { max-width:620px; margin:0 auto; padding-bottom:40px; }
.po-portal-brand { text-align:center; margin-bottom:18px; }
.po-portal-ico { display:inline-grid; place-items:center; width:52px; height:52px; color:#fff; background:linear-gradient(135deg,#635BFF,#8f8aff); border-radius:18px; font-size:25px; box-shadow:0 10px 24px #dcdaff; }
.po-portal-brand h2 { font-size:1.3rem; margin:12px 0 3px; letter-spacing:-.03em; }
.po-portal-brand p { font-size:13px; color:var(--po-muted); margin:0; }
.po-steps { display:flex; justify-content:center; gap:6px; margin:0 0 18px; flex-wrap:wrap; }
.po-steps span { font-size:11.5px; padding:4px 10px; border-radius:99px; background:#f1f3f8; color:#8090a6; font-weight:650; }
.po-steps span.on { background:var(--po-tint); color:var(--po-blue); }
.po-steps span.done { background:var(--po-goodbg); color:var(--po-good); }
.po-token-wrap { display:flex; gap:8px; }
.po-token-wrap input { flex:1; min-width:0; text-transform:uppercase; font-weight:700; letter-spacing:2px; }
.po-screen { background:#f7f8fe; border:1px solid var(--po-line); padding:15px; border-radius:13px; }
.po-amount-big { font-size:1.75rem; font-weight:850; letter-spacing:-.02em; color:var(--po-blue); }
.po-badge-good { display:inline-block; background:var(--po-goodbg); color:var(--po-good); font-weight:700; font-size:11px; padding:4px 9px; border-radius:99px; }
.po-divider { height:1px; background:var(--po-line); margin:20px 0; }
.po-field { margin-top:14px; }
.po-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.po-claim-notice { background:#f7f8fe; border:1px solid var(--po-line); padding:18px 18px 8px; border-radius:13px; line-height:1.7; font-size:14px; }
.po-claim-notice .po-title { margin:0 0 6px; }
.po-claim-notice p { margin:0 0 10px; }
.po-claim-notice-study { font-size:12.5px; color:#6b7a99; font-weight:650; }
.po-claim-notice-tax { display:block; font-size:12px; color:#6b7a99; }
.po-alert { border-left:3px solid var(--po-blue); padding:10px 11px; font-size:12px; background:#f3f3ff; border-radius:8px; color:#4b5a80; margin:12px 0; }
.po-agree { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:#4f6079; margin:10px 0; cursor:pointer; }
.po-agree input { margin-top:3px; accent-color:var(--po-blue); }
.po-result { border:1px solid #cdebdc; background:#f2fbf7; border-radius:14px; padding:24px 20px; text-align:center; }
.po-result h3 { margin:6px 0; font-size:1.2rem; }
.po-result p { color:#506f60; font-size:13px; }
.po-result .po-amount-big { color:var(--po-good); }
.po-verified { color:var(--po-good); font-weight:700; font-size:12.5px; }
.po-err { color:var(--po-bad); font-size:12px; margin-top:6px; }

@media (max-width:900px) {
  .po-layout { grid-template-columns:minmax(0,1fr) !important; }
  .po-hero h1 { font-size:1.4rem; }
}
@media (max-width:520px) {
  .po-card { padding:16px; }
  .po-mode-grid, .po-grid2 { grid-template-columns:1fr; }
  .po-summary { grid-template-columns:1fr 1fr; }
  .po-search { width:100% !important; }
  .po-actions .po-btn-primary { width:100%; flex:auto; }
}