/*
 * 첫 화면 챔순이 시안 — 챔순이가 든 태블릿 판을 전광판으로 (2026-10-05, home_board.php)
 *
 * .cs-board-frame : 원래 그림 크기(800×667) 그대로의 투명 판. JS가 --k(보이는 그림 폭 ÷ 800)로 줄인다
 * .cs-board       : 판 안쪽 263×299 상자를 matrix로 기울여 그림 속 태블릿 판에 맞춘다 (v0.93.3 기울기, v0.93.4 판 가득)
 *                   판 앞면 네 변을 그림에서 재어 직선을 맞춘 모서리 TL 56.7,176.9 · TR 331.1,135.9 ·
 *                   BR 380.2,442.6 · BL 103.3,493.5 (펼친 판 279×315) 안에서 사방 8 들어간 자리 — 판을 글자로 꽉 채운다.
 *                   원래 그림의 글씨 줄이 이 기울기로 펼치면 수평이 된다(0.9°). 예전 값은 2~4° 덜 기울었다
 * .cs-board-front : 판을 쥔 손과 판 오른쪽 끝을 덮는 볼(반짝이 포함)만 오려 낸 그림. 전광판 글씨 위에 얹어
 *                   손과 볼이 글씨를 가리게 한다 (원래 그림처럼 볼이 판 앞에 있다)
 * 글씨 크기는 그림 기준 px — 판에 문장 **세 개**(가운데 크게 하나 + 위아래 하나씩)가 꽉 차게 (v1.04, 2026-10-06 이상준님)
 * v1.05: 칸 높이를 글에 맞춘다(고정 높이 없음) — 문장 사이를 띄우지 않는다. 가운데 24px(길면 22·20·18px), 위아래 18px(세 줄까지).
 *
 * 볼 피하기 (v1.04): .cs-board-front의 볼이 판 오른쪽 가장자리를 덮는다. 그림에서 재어 보니 판 안 세로 위치마다
 * 덮는 폭이 다르다 — 판 위쪽(y<120) 0 · 가운데 칸 자리(y≈87~237) 최대 41px · 아래 칸 자리(y≈237~299) 41→0px.
 * 그래서 글이 볼 밑으로 들어가지 않게 가운데 칸은 오른쪽을 46px, 아래 칸은 34px 비우고 위 칸은 거의 안 비운다.
 * 칸 위치는 고정이라(가운데 = 보이는 창 가운데) JS가 가운데 문장에 is-focus, 바로 아래 문장에 is-below를 붙인다(위 칸은 비울 것이 없다).
 */
.cs-board-frame{
  position:absolute;left:0;top:0;width:800px;height:667px;
  transform-origin:0 0;transform:scale(var(--k,.65));
  pointer-events:none;z-index:3;
}
.cs-board{
  position:absolute;left:0;top:0;width:263px;height:299px;overflow:hidden;
  transform-origin:0 0;
  /* v0.93.5: 원근(matrix3d) 대신 평면 기울기(matrix) — 3D로 비틀면 파이어폭스 등이 글자를 그림처럼 찍어 흐려진다.
     같은 네 모서리에 가장 가깝게 맞춘 값(판 안 오차 평균 1px, 최대 3.4px — 화면에선 2px 남짓) */
  transform:matrix(0.987875,-0.164476,0.151889,0.988985,66.4195,185.0428);
  font-family:var(--font-sans);color:#2a2740;
}
.cs-board .cs-board-head{
  /* 첫 화면의 .hero p 규칙(색·크기·여백)을 이기도록 두 단계로 쓴다 */
  display:flex;align-items:center;gap:6px;margin:0;height:24px;max-width:none;
  font-size:14px;font-weight:700;letter-spacing:.06em;color:#7a4bb0;
}
.cs-board-head i{
  width:7px;height:7px;border-radius:50%;background:#ef4b87;
  box-shadow:0 0 0 0 rgba(239,75,135,.5);animation:cs-live 1.6s ease-out infinite;
}
@keyframes cs-live{0%{box-shadow:0 0 0 0 rgba(239,75,135,.55)}100%{box-shadow:0 0 0 7px rgba(239,75,135,0)}}
.cs-board-view{
  position:absolute;left:0;right:0;top:25px;bottom:0;overflow:hidden;
}
.cs-board-list{
  position:relative;margin:0;padding:0;list-style:none;
  transition:transform .9s cubic-bezier(.22,.8,.3,1);
}
.cs-board-list.no-anim,.cs-board-list.no-anim li{transition:none!important}
.cs-board-list li{
  /* v1.05: 문장 사이를 띄우지 않는다 — 칸 높이를 글에 맞춘다. 보이는 것은 가운데 문장 + 바로 위·아래 문장 셋뿐.
     v1.05.1: 볼·손·「CP 보상」 동그라미는 칸 여백이 아니라 판 안의 투명 「피할 자리」(.cs-board-dodge, JS가 모양을 잰다)로 피한다.
     그래서 li는 block이고(float를 줄마다 피하려면 flex·-webkit-box면 안 된다) 줄 수 자르기는 max-height + overflow:clip
     (clip은 hidden과 달리 새 formatting context를 만들지 않아, 줄마다 볼을 피해 흐른다) */
  display:block;box-sizing:border-box;padding:1px 2px;opacity:0;
  font-size:calc(19px * var(--f,1));line-height:1.34;font-weight:600;letter-spacing:-.015em;color:#433c53;word-break:keep-all;overflow-wrap:anywhere;
  max-height:calc(19px * var(--f,1) * 1.34 * 3 + 2px);overflow:clip;
  transition:opacity .9s ease,font-size .9s cubic-bezier(.22,.8,.3,1),color .9s ease;
}
.cs-board-list li.is-above,.cs-board-list li.is-below{opacity:.92}
.cs-board-list a{pointer-events:auto;color:inherit}
.cs-board-who,.cs-board-book{color:#7d7291;font-weight:600}
.cs-board-book{color:#6a5a99}
.cs-board-list li.is-focus{
  opacity:1;padding:2px;font-size:calc(25px * var(--f,1));line-height:1.28;font-weight:700;letter-spacing:-.018em;color:#1f2140;
  max-height:calc(25px * var(--f,1) * 1.28 * 8 + 4px);
}
/* 가운데 문장이 길면(80자까지 쓸 수 있다) 글씨를 줄인다 — 28자까지 24px · 42자까지 22px · 58자까지 20px · 그보다 길면 18px (× 배율 --f) */
.cs-board-list li.is-focus.len-m{font-size:calc(23px * var(--f,1))}
.cs-board-list li.is-focus.len-l{font-size:calc(21px * var(--f,1))}
.cs-board-list li.is-focus.len-xl{font-size:calc(19px * var(--f,1))}
.cs-board-dodge{display:block;height:0;width:0}
.cs-board-dodge.r{float:right}
.cs-board-dodge.l{float:left}
.cs-twin-wrap{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
.cs-board-list li.is-focus .cs-board-who{color:#d9467e;font-size:.82em}
.cs-board-list li.is-focus .cs-board-book{color:#6a4aa0;font-size:.82em;font-weight:600}
.cs-board-list.cs-twin{transition:none}
.cs-board-list.cs-twin li{transition:none}
.cs-board .cs-board-empty{max-width:none;margin:70px 0 0;text-align:center;font-size:13px;color:#9a8fa6}
@media (prefers-reduced-motion:reduce){
  .cs-board-list,.cs-board-list li{transition:none}
  .cs-board-head i{animation:none}
}
.cs-board-front{position:absolute;left:30px;top:188px;width:346px;height:296px;z-index:2;pointer-events:none}
.cs-board{z-index:1}
/* v0.94 「샥!」 — 막 들어온 한 마디가 오른쪽에서 미끄러져 들어오며 연보라로 한 번 빛난다 (flos-home-board.js가 is-new를 붙인다) */
.cs-board-list li.is-new{border-radius:8px;animation:cs-new 2.6s cubic-bezier(.22,.8,.3,1) 1}
@keyframes cs-new{
  0%{transform:translateX(75%);opacity:0;background:rgba(122,75,176,.24)}
  28%{transform:none;opacity:1;background:rgba(122,75,176,.24)}
  100%{transform:none;background:rgba(122,75,176,0)}
}
@media (prefers-reduced-motion:reduce){.cs-board-list li.is-new{animation:none}}

/* v1.16 (2026-10-14 Claude) 태블릿 글자 = 고운돋움 (이상준님: 프리텐다드가 기울어진 판에서 일렁거림)
   고운돋움은 보통 굵기 한 가지뿐이라, 억지 굵게(가짜 볼드)로 획이 뭉개지지 않게 굵기를 400으로 두고
   가운데 문장은 크기와 진한 색으로만 돋보이게 한다. 글꼴은 index.php의 구글 폰트 줄에서 함께 불러온다. */
.cs-board,.cs-board-frame,.cs-board .cs-board-head,.cs-board-list li,.cs-board-who,.cs-board-book,.cs-board .cs-board-empty{
  font-family:"Gowun Dodum",var(--font-sans);font-weight:400;font-synthesis:none;
}
.cs-board-list li{color:#2a2438;-webkit-text-stroke:.25px currentColor}
.cs-board-list li.is-above,.cs-board-list li.is-below{opacity:1}
.cs-board-list li.is-focus{font-weight:400;color:#14162e;-webkit-text-stroke:.35px currentColor}
/* v1.17 (2026-10-14 Claude) 가운데 문장을 더 굵게 (이상준님: "중앙 글이 더 굵어야돼")
   고운돋움은 굵기가 하나뿐이라 글자 둘레에 같은 색 테두리를 둘러 획을 두껍게 한다. 닉네임·책 제목도 함께. */
.cs-board-list li.is-focus,.cs-board-list li.is-focus .cs-board-who,.cs-board-list li.is-focus .cs-board-book{
  -webkit-text-stroke:.8px currentColor;paint-order:stroke fill;text-shadow:0 0 .5px currentColor;
}
.cs-board .cs-board-head{-webkit-text-stroke:.2px currentColor}
.cs-board .cs-board-head{letter-spacing:.04em}