.room { display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding-top: 18px; align-items: start; }
.room aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.room .id { display: flex; gap: 14px; align-items: center; }
.room .id .av { width: 56px; height: 56px; }
.room h1 { font: 600 22px/1.15 var(--sans); letter-spacing: -.01em; }
.room .sub { color: var(--dim); font-size: 12.5px; }
.room .soul { color: var(--fg2); font-size: 13px; line-height: 1.7; }
.blk { border-top: 1px solid var(--line); padding-top: 14px; }
.blk h4 { font-weight: 400; color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.half { margin: 0 0 10px; font-size: 12.5px; color: var(--fg2); line-height: 1.55; } .half b { display: block; color: var(--fg); font-weight: 600; }
.lore { font-size: 12.5px; color: var(--fg2); line-height: 1.65; font-style: italic; }
.gauge { height: 4px; background: var(--line2); margin: 8px 0 6px; position: relative; } .gauge i { position: absolute; inset: 0 auto 0 0; background: var(--fg); transition: width .6s; }
.mini { font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; gap: 10px; }
.mini b { font-weight: 400; color: var(--fg2); }
.cabox { display: flex; gap: 8px; align-items: center; font-size: 12px; word-break: break-all; }
.room .stage { display: flex; flex-direction: column; height: calc(100vh - 130px); min-height: 520px; }
.room .stage .term { flex: 1; }
.state { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 12.5px; color: var(--dim); flex-wrap: wrap; }
.note { font-size: 12px; color: var(--dim); border: 1px solid var(--line2); padding: 10px 12px; line-height: 1.6; }
.note b { color: var(--fg2); font-weight: 400; }
@media (max-width: 900px) { .room { grid-template-columns: 1fr; } .room aside { position: static; } .room .stage { height: 70vh; } .tl { grid-template-columns: 56px 1fr; gap: 10px; } }