/* 관전/임베드 독립 페이지 + 포럼 상세 공용 — spectate 위젯 스타일 */
:root { color-scheme: dark; }
body { margin: 0; font: 14px/1.5 system-ui, sans-serif; background: #14161a; color: #d7dae0; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 16px; }
.wrap.embed { padding: 8px; }
h1 { font-size: 16px; color: #9aa3b2; font-weight: 600; margin: 0 0 14px; }
a { color: #6fb3e0; }
.watch-links { margin-top: 14px; font-size: 13px; }
.spectate { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .spectate { grid-template-columns: 1fr; } }
.sp-status { color: #7fd188; font-weight: 600; font-size: 13.5px; min-height: 20px; }
.chessboard { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; width: 100%; border: 2px solid #3a3f47; border-radius: 4px; overflow: hidden; }
.chessboard .sq { display: flex; align-items: center; justify-content: center; }
.chessboard .sq.l { background: #ecead2; } .chessboard .sq.d { background: #77694f; }
.chessboard .pc { font-size: min(6vw, 40px); line-height: 1; }
.jangboard { position: relative; background: #d9c193; border: 3px solid #7a5c33; border-radius: 4px; padding: 14px; }
.jang-inner { position: relative; width: 100%; aspect-ratio: 8 / 9; }
.jang-lines { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jang-lines line { vector-effect: non-scaling-stroke; }
.jp { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 9.2%; aspect-ratio: 1; border-radius: 50%; font-size: min(3vw, 19px); font-weight: 700; z-index: 1; }
.jp.red { background: #d84b3a; color: #fff; border: 2px solid #a83226; }
.jp.blue { background: #3a6ea8; color: #fff; border: 2px solid #2a4f7f; }
.jp.moved { outline: 3px solid #e08a3c; outline-offset: -1px; }
.sp-players { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sp-pl { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid #2a2e36; border-radius: 8px; background: #1c1f24; }
.sp-pl.turn { border-color: #e08a3c; background: #26221c; }
.sp-pl .glyph { font-size: 18px; line-height: 1.3; }
.sp-pl b { color: #fff; display: block; font-size: 13.5px; }
.sp-pl .sub { color: #8b93a3; font-size: 12px; }
.sp-pl .clock { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.sp-pl .score { margin-left: 8px; color: #d8c07f; font-size: 12.5px; white-space: nowrap; }
.sp-feed { background: #1c1f24; border: 1px solid #2a2e36; border-radius: 8px; padding: 12px 14px; }
.sp-feed h2 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8b93a3; }
.sp-msgs { max-height: 640px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.sp-red { color: #666; font-style: italic; }
#sp-board { margin-top: 8px; }