@font-face { font-family: 'GowunBatang'; src: url('/fonts/gowun-batang.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GowunBatang'; src: url('/fonts/gowun-batang-bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'SongMyung'; src: url('/fonts/song-myung.woff') format('woff'); font-weight: 400; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  background: #101a29; color: #e8edf5; min-height: 100vh; display: flex; flex-direction: column;
}
.site-header { text-align: center; padding: 46px 20px 22px; }
.site-header h1 { font-family: 'SongMyung', serif; font-weight: 400; font-size: 30px; letter-spacing: 9px; margin-top: 10px; }
.site-header .tagline { margin-top: 9px; color: #93a3ba; font-size: 13px; line-height: 1.6; }

main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 10px 24px 56px; }
.panel { background: #172335; border: 1px solid #24385a; border-radius: 15px; padding: 28px 30px; margin-top: 18px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 720px) { .row3 { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 12.5px; color: #9fb2cc; margin-bottom: 7px; letter-spacing: .5px; }
input[type=text], select {
  width: 100%; padding: 12px 13px; border-radius: 9px; border: 1px solid #2c466e;
  background: #0e1a2c; color: #e8edf5; font-size: 15px; outline: none; appearance: none;
}
input[type=text]:focus, select:focus { border-color: #d4af37; }
button {
  cursor: pointer; border: none; border-radius: 10px; padding: 14px 24px;
  font-size: 15px; font-weight: 700; color: #14243c;
  background: linear-gradient(135deg, #e8c96a, #d4af37);
}
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible { outline: 2px solid #e8c96a; outline-offset: 2px; }
#go { width: 100%; letter-spacing: 2px; }
button.ghost { background: #2c466e; color: #e8edf5; }
.error { color: #ff8a8a; margin-top: 12px; font-size: 14px; }
.terms-link { margin-top: 12px; font-size: 12.5px; color: #8fa2bd; text-align: center; }
.terms-link a { color: #d4af37; }
.spinner { width: 42px; height: 42px; margin: 8px auto 16px; border-radius: 50%;
  border: 4px solid #23385a; border-top-color: #d4af37; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }
#loading-section { text-align: center; color: #b7c5da; }

/* ── 산정서(종이) ─────────────────────────── */
#paper { margin-top: 18px; }
#paper svg { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 20px 55px rgba(0,0,0,.5); }
.actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.actions button { flex: 1; min-width: 150px; }

/* ── 상세 패널 ─────────────────────────────── */
#detail h3 { font-size: 15px; margin: 22px 0 12px; color: #d4af37; letter-spacing: 1px; }
#detail h3:first-child { margin-top: 0; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.member {
  background: #0e1a2c; border: 1px solid #23385a; border-radius: 12px; padding: 14px 16px;
}
.member.culprit { border-color: #c0392b; }
.member .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.member .head img { width: 42px; height: 42px; border-radius: 8px; background: #1b2c46; }
.member .nm { font-weight: 800; font-size: 15px; }
.member .pct { margin-left: auto; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.member .role { font-size: 11px; color: #8fa2bd; }
.member.culprit .role { color: #ff8d7d; }
.member ul { list-style: none; margin-top: 6px; }
.member li { font-size: 12.5px; color: #b7c5da; padding: 3px 0; display: flex; gap: 7px; }
.member li .cl { color: #8fa2bd; flex: none; font-size: 11.5px; padding-top: 1px; min-width: 58px; }
.member li .ct { margin-left: auto; color: #8fa2bd; flex: none; font-variant-numeric: tabular-nums; }

.table-scroll { overflow-x: auto; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-table th, .acc-table td { padding: 8px 10px; border-bottom: 1px solid #22375a; white-space: nowrap; text-align: left; }
.acc-table th { color: #9fb2cc; font-weight: 600; }
.acc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sev { font-size: 11px; padding: 2px 8px; border-radius: 5px; border: 1px solid; }
.sev.s1 { color: #9fb2cc; border-color: #3a557f; }
.sev.s2 { color: #f0b24a; border-color: #8a6a2f; }
.sev.s3 { color: #ff8d7d; border-color: #c0392b; }
.mini { display: flex; height: 10px; border-radius: 4px; overflow: hidden; min-width: 130px; border: 1px solid rgba(255,255,255,.12); }
.mini i { display: block; height: 100%; }
.culprit-chip { font-size: 11.5px; color: #ff8d7d; border: 1px solid #c0392b; border-radius: 5px; padding: 1.5px 7px; }

/* 판별 상세 */
.hint-inline { font-size: 12px; color: #8fa2bd; font-weight: 400; letter-spacing: 0; }
.acc-row { cursor: pointer; }
.acc-row:hover td { background: rgba(212,175,55,.05); }
.caret { color: #d4af37; font-size: 11px; display: inline-block; width: 12px; }
.acc-detail td { background: #0c1626; padding: 14px 12px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.game-member { background: #121e31; border: 1px solid #23385a; border-radius: 10px; padding: 11px 13px; white-space: normal; }
.game-member.culprit { border-color: #c0392b; }
.gm-head { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 7px; }
.gm-head img { width: 38px; height: 38px; border-radius: 7px; background: #1b2c46; }
.gm-head b { font-size: 14px; }
.gm-fault { font-size: 13px; font-weight: 800; color: #e8edf5; }
.gm-stat { font-size: 11.5px; color: #8fa2bd; margin-top: 2px; }
.game-member ul { list-style: none; margin: 0; }
.game-member li { display: flex; gap: 7px; font-size: 12px; padding: 2.5px 0; align-items: baseline; }
.game-member li .cl { color: #8fa2bd; flex: none; min-width: 58px; font-size: 11px; }
.game-member li .pt { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; font-weight: 700; }
.game-member li.pen .pt { color: #ff8d7d; }
.game-member li.mit .pt { color: #7fd8a8; }
.game-member li.none { color: #5f7089; }

footer { text-align: center; color: #64768f; font-size: 12px; padding: 22px 18px 36px; line-height: 1.8; }
footer a { color: #93a3ba; }