:root { --ink:#111827; --ground:#F3F5F8; --line:#DCE1E8; --soft:#EEF1F5; --dim:#5B6474; --accent:#1F3A8A; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: "IBM Plex Sans KR", sans-serif; font-size: 15px; line-height: 1.55; }
a { color: var(--accent); } a:hover { color: #142660; }
.page { max-width: 560px; margin: 0 auto; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; }
.mono { font-family: "IBM Plex Mono", monospace; }
.small { font-size: 12px; } .dim { color: var(--dim); } .accent { color: var(--accent); } .strong { font-weight: 600; }
.big { font-size: 20px; font-weight: 600; } .r { text-align: right; }
.band { background: var(--ink); color: #F3F5F8; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.band h1 { margin: 4px 0 0; font-size: 24px; letter-spacing: -0.02em; }
.band .dim, .band .sub { color: #A9B4C6; } .band .sub { margin: 0; font-size: 13px; }
.band .intro { margin: 6px 0 0; font-size: 13px; color: #CBD3E0; }
.band-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.back { color: #CBD3E0; text-decoration: none; }
.card { margin: 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card h2 { margin: 0; font-size: 15px; } .card p { margin: 0; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pad-x { padding: 0 16px; } .pad { padding: 14px 16px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--ground); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-lite { background: #fff; border: 1px solid var(--line); }
.notice { margin: 0 16px; font-size: 12px; color: #374151; background: #E8ECF3; border-radius: 6px; padding: 10px 12px; }
.note { margin: 0 16px; font-size: 12.5px; color: #374151; background: #E8ECF3; border-radius: 8px; padding: 12px 14px; }
.list { padding: 0; gap: 0; }
.item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--soft); color: var(--ink); text-decoration: none; min-height: 44px; }
.item:last-child { border-bottom: 0; }
.item .num { font-size: 11px; color: #8A93A3; padding-top: 3px; }
.item-main, .item-nums { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-nums { align-items: flex-end; } .name { font-weight: 700; }
.trow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px 56px; gap: 8px; padding: 10px 0; border-top: 1px solid var(--soft); font-size: 13px; }
.thead { padding: 6px 0; }
.who { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.chip { font-size: 11px; background: #E8ECF3; color: #374151; border-radius: 4px; padding: 0 6px; }
.summary { min-height: 88px; }
.summary.is-typing::after { content: "▍"; color: var(--accent); animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.replay { font: inherit; font-size: 11px; color: #374151; background: none; border: 0; padding: 0; cursor: pointer; }
.replay span { background: var(--ground); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }
.foot { margin: 0 16px; font-size: 11px; color: var(--dim); line-height: 1.7; }
.replay, .back, .who a, .notice a, .foot a { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; }
.replay[hidden] { display: none; }