/* 글상자 — 결 여섯의 재질 한 벌 (2026-09-23 · 사용자 결정 「통일안대로 진행」).
 *
 *  **한 벌이다.** 전쟁 · 천하 · 설전 · 일기토 · 면담 서찰 · 엔딩 · 로비와 읽는 화면이 같은 파일을 링크한다 — 베끼면 조용히 갈린다.
 *  왜 그런가와 잰 값은 개발자 페이지 「글상자 분석」(static/글상자.html · 「어긋남」 · 「통일안」 탭)에 있다. 화면 다섯의 글상자 141 을
 *  훑으니 종이 그라디언트가 네 벌 · 먹 글색이 여섯 벌 · 어두운 덧창이 일곱 벌이었다 — 변수가 없어 손으로 베낀 값들이라 한 벌을 바꾸면
 *  나머지가 안 따라왔다.
 *
 *  **결을 먼저 고른다** — 이 글은 무엇을 하는가.
 *    서찰  사람이 말한다      말풍선 · 면담 · 고사 대사 · 결산의 한마디 · 함성 설명
 *    종이  사람이 읽고 답한다  문항창(문항창.css 가 그 벌) · 기록 되짚기
 *    옥새  판이 선언한다      국면 알림 · 시작 표찰 · 논제 · 판정 · 결산 제목   (그림 판이 결이다 · 여기는 글 값만)
 *    먹판  도구 · 목록 · 설정  로비 덧창 · 저장 · 열전 · 일지 · 결산 몸통 · 순위 · 설정
 *    먹띠  판 위 짧은 알림     토스트 · 힌트 · 상태 띠 · 첩보 · 못 내는 까닭
 *    뜬글  순간의 수 · 한마디  피해 · 이득 · 유언 · 덧말
 *  여섯에 안 들면 결을 늘리기 전에 글상자.html 의 표에 적는다.
 *
 *  **여기는 재질만 든다**(바탕 · 테 · 그림자 · 글꼴 · 글빛). 자리와 크기(padding · max-width · font-size · 폰 값)는 화면이 제 선택자로
 *  둔다 — 문항창.css 와 같은 나눔이다. 화면의 선택자가 여기 클래스보다 무거우니(#say .bub > .서찰) **화면 CSS 에서 재질 줄을 걷어야**
 *  여기 값이 선다. 걷지 않으면 화면 값이 이겨 조용히 옛 결로 남는다(scan_screen 의 「베낀 재질」 검사가 본다 · 걸음 6).
 *
 *  값은 새로 지은 것이 아니라 **지금 가장 많이 쓰이던 벌**이다 — 서찰 결 10곳 · 먹 #241b10 15곳 · 먹판 #1e1a15 다섯 화면.
 *  이름을 한글로 둔 것은 이 저장소의 관례(--문항먹 · --덧글 · --알림)다. 전쟁의 --parch1/2 · --ink 는 이 이름으로 갈아 끼웠다. */

:root{
  /* 종이 */
  --한지1:#f2e8d0; --한지2:#ddcba4;
  --한지결:repeating-linear-gradient(0deg,rgba(120,96,58,.055) 0 1px,transparent 1px 7px);   /* 발틀 무늬 · 7px 마다 옅은 선 */
  /* 먹 */
  --먹:#241b10; --먹옅:#6b5a3e; --먹이름:#7a6242; --먹부제:#7a5a2a; --먹선:#7b6540; --주묵:#a8321c;
  /* 어둠 */
  --먹판:#1e1a15; --먹판2:#252019; --선:#3a332a; --글:#ece4d6; --흐림:#9b9184; --금:#c9a227;
  /* 띠 */
  --띠바탕:rgba(10,8,5,.9); --띠테:rgba(201,162,39,.5);
  /* 꼴 */
  --모서리:12px; --모서리잔:8px;
  --그늘:0 18px 48px rgba(0,0,0,.65); --그늘잔:0 9px 22px rgba(0,0,0,.55);
  /* 글꼴 — 사람의 말 · 종이 위 글은 명조, 도구는 고딕 */
  --명조:"Noto Serif KR","Batang","바탕",serif;
  --고딕:"Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  /* 옛 이름의 별칭 — 화면 여덟이 저마다 :root 에 베껴 두던 것(record = rank = settings · index +blue · plots·results 몇 개 뺌 ·
     설전은 강철빛 · 일기토는 자줏빛)을 걷고 여기 한 벌을 읽는다(걸음 3). 새 글은 한글 이름을 쓴다 · 옛 이름은 옮기는 동안만. */
  --bg:#14110e; --panel:var(--먹판); --panel2:var(--먹판2); --line:var(--선); --text:var(--글); --dim:var(--흐림); --gold:var(--금);
  --red:#c0453a; --green:#86b58a; --blue:#4a9fe0;
}

/* ── ① 서찰 — 사람이 말한다 ────────────────────────────────────────────
 *  한지 발틀 결 · 먹선 1px(box-shadow 로 긋는다 · border 는 자리를 먹는다) · 명조 · 모서리 3.
 *  `isolation:isolate` 는 꼬리(z-index:-1)가 이 상자 밖(마당 바탕 뒤)으로 떨어지지 않게 한다. */
.서찰{font-family:var(--명조);color:var(--먹);border-radius:3px;
  background:var(--한지결),linear-gradient(var(--한지1),var(--한지2));
  box-shadow:0 1px 0 rgba(255,250,238,.6) inset,0 0 0 1px var(--먹선),var(--그늘잔);
  isolation:isolate}
.서찰 .nm{color:var(--먹이름);font-weight:700}
.서찰 .sub, .서찰 .pn{color:var(--먹부제)}
.서찰 .an{color:var(--먹이름)}   /* 결산의 말한 이(.adv) — 이름은 갈색, 곁딱지는 옅은 먹 */
.서찰 .an span{color:var(--먹옅)}
/* 꼬리 — **네모를 45° 돌려 반을 몸통에 잠근다**(일기토가 먼저 쓰던 꼴 · 2026-09-23 · 셋을 하나로).
 *  삼각형(border)은 몸통 밖에 따로 서서 ① 몸통의 먹선이 꼬리 밑동을 가로지르고 ② 맞댄 두 변이 저마다 가장자리를 반투명으로 뭉개
 *  밝은 실금이 남았다(전쟁 · 2026-09-20 · 3배로 재 봄). 돌린 네모는 절반이 몸통 안에 잠겨 그 먹선을 덮고, 드러난 두 변이 제 테로
 *  먹선을 이어받는다. z-index:-1 이라 글 밑 · 바탕 위에 선다 — 잠긴 절반은 몸통과 같은 빛이라 안 보인다.
 *  · 아래 꼬리(설전 · 일기토)는 몸통 아래끝 빛(--한지2) · 왼 꼬리(전쟁 · 세로 가운데)는 두 결의 가운데 빛.
 *  · 크기는 `--꼬리`(한 변 · 밑값 14 → 튀어나옴 10 · 밑변 20) · 자리는 `--꼬리자리`(아래 꼬리의 왼끝) · `--꼬리높이`(왼 꼬리의 세로). */
.서찰.꼬리아래::after, .서찰.꼬리왼::after{content:'';position:absolute;z-index:-1;
  width:var(--꼬리,14px);height:var(--꼬리,14px);transform:rotate(45deg);pointer-events:none}
.서찰.꼬리아래::after{bottom:calc(var(--꼬리,14px) * -.5);left:var(--꼬리자리,21px);background:var(--한지2);
  border-right:1px solid var(--먹선);border-bottom:1px solid var(--먹선)}
.서찰.꼬리아래.오른::after{left:auto;right:var(--꼬리자리,21px)}
.서찰.꼬리왼::after{left:calc(var(--꼬리,14px) * -.5);top:var(--꼬리높이,50%);margin-top:calc(var(--꼬리,14px) * -.5);
  background:color-mix(in srgb,var(--한지1),var(--한지2));
  border-left:1px solid var(--먹선);border-bottom:1px solid var(--먹선)}
/* 단추 — 세 벌 · 금 · 먹 · 한지 (2026-09-23 D안 · 2026-09-25 사용자 「버튼은 셋 · 노란색 · 흰색 · 먹색」 · 같은 날 「이미지 한지는 문항창만」).
 *  덧창·곁판이 다 어두운 먹판이라 **곁 단추의 기본이 먹**이다. 한지빛 곁은 밝은 서찰 위에서만 쓴다.
 *  **금**(`.단추.주`) — 고르는 쪽 · #c9a227 · 테 #7b5a10 · 글 #221c0c.
 *  **먹**(`.단추`) — 곁 단추 · #241e17 · 금빛 옅은 테 · 글 한지빛 · 누르면 테가 금.
 *  **한지**(`.단추.한지` · 서찰의 `.btns button`) — 밝은 종이 위의 곁 · #f7eed8 · 먹선 · 글 #4a3208.
 *  `button.단추` 로 한 단 무겁게 — 천하의 `.btn` · `.btn.main` 이 같은 무게로 뒤에 실려 덮는다.
 *  크기(padding · font-size)는 화면이 둔다. 폰 과녁 30 은 화면의 padding 이 지킨다. */
button.단추, .서찰 .btns button, .서찰 button.서찰단추{border:1px solid rgba(201,162,39,.42);background:#241e17;border-radius:3px;color:#e8dcc0;
  font-family:var(--명조);font-weight:700;letter-spacing:.03em;line-height:1.25;cursor:pointer;box-shadow:0 1px 0 rgba(255,240,200,.07) inset;
  transition:background .12s,border-color .12s,transform .08s}
button.단추:hover:not(:disabled){background:#2e261c;border-color:#c9a227;color:#fff3cf}
button.단추:active:not(:disabled){transform:translateY(1px)}
button.단추.한지, .서찰 .btns button, .서찰 button.서찰단추{border-color:var(--먹선);background:#f7eed8;color:#4a3208;box-shadow:0 1px 0 rgba(255,250,238,.7) inset}
button.단추.한지:hover:not(:disabled), .서찰 .btns button:hover, .서찰 button.서찰단추:hover{border-color:#4a3208;background:#fffaf0;color:#4a3208}
button.단추.주, .서찰 .btns button.go{background:#c9a227;border-color:#7b5a10;color:#221c0c;box-shadow:0 1px 0 rgba(255,236,170,.55) inset}
button.단추.주:hover:not(:disabled), .서찰 .btns button.go:hover{background:#d6ae33;border-color:#4a3208;color:#221c0c}
button.단추:disabled{opacity:.5;cursor:default}

/* ── ② 종이 — 사람이 읽고 답한다 ─────────────────────────────────────────
 *  문항창(문항창.css)이 그 벌이다 — 9조각 종이.webp · 보기는 옅은 먹선 상자 · 주묵 채점. 이미지 종이는 문항창에만 쓴다(2026-09-25 · 사용자 「이미지 한지는 문항창만」).
 *  여기서는 문항창이 읽는 먹 토큰만 잇는다. */
.종이글{color:var(--먹);font-family:var(--명조)}

/* ── ③ 옥새 — 판이 선언한다 ────────────────────────────────────────────
 *  그림 판(game/ui/알림/옥새_* · 설전/논제_* · 일기토/판정)이 결이다. 글은 명조 900 · 밝은 글 · 그림자. 적군은 --옥새글적. */
.옥새글{font-family:var(--명조);font-weight:900;color:var(--옥새글,#fff3cf);letter-spacing:.08em;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 10px rgba(0,0,0,.5)}
.옥새글.적{--옥새글:#ffd9d2}
/* 옥새 판 — 결산 제목이 앉는 시작 표찰의 중립 옥새(검은 옻칠 · 금 · 2:1) 하나. 승패는 글빛만 가른다(사용자 A · 2026-09-23 · 걸음 4).
   폭 `--옥새폭` 하나로 재고(전쟁 넓은 400 · 설전·일기토 300 · 폰 240) 높이는 판의 비(1/2). 글 크기는 화면이 `.rtitle` 에 둔다. */
.옥새판{display:grid;place-items:center;box-sizing:border-box;width:var(--옥새폭,400px);height:calc(var(--옥새폭,400px) / 2);margin:0 auto;
  padding:0 calc(var(--옥새폭,400px) * .08) calc(var(--옥새폭,400px) * .02);background:url(./game/ui/알림/옥새_시작.webp) center/100% 100% no-repeat;filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
/* **결산 전용 판은 3:1 로 낮다**(2026-09-26 · 사용자 「상하로 길어서 여백이 많이 남는다 · 어차피 두 줄 대사는 없다」) — 같은 테·같은 넝쿨무늬를
   옥새_시작 을 참고로 Gemini 에서 3:1 로 다시 뽑았다(`옥새_결산.webp` · 600×200). 2:1 판은 시작 표찰(두 줄)의 것이라 그대로 둔다. */
.옥새판.결산{height:calc(var(--옥새폭,400px) / 3);padding-bottom:0;background-image:url(./game/ui/알림/옥새_결산.webp)}

/* ── ④ 먹판 — 도구 · 목록 · 설정 ─────────────────────────────────────── */
.먹판{background:var(--먹판);border:1px solid var(--선);border-radius:var(--모서리);box-shadow:var(--그늘);
  color:var(--글);font-family:var(--고딕)}
.먹판.붙박이{box-shadow:none}   /* 판 안에 눌러앉은 칸(순위 표 · 설정 판 · 내 열전 칸 · 열전 유리 판) — 뜬 덧창이 아니라 그림자가 없다 */
.먹판속{background:var(--먹판2);border:1px solid var(--선);border-radius:var(--모서리잔)}

/* ── ⑤ 먹띠 — 판 위 짧은 알림 · 딱지 ────────────────────────────────── */
.먹띠{background:var(--띠바탕);border:1px solid var(--띠테);border-radius:var(--모서리잔);color:var(--글);font-family:var(--고딕)}
.먹띠.줄{border:0;border-left:3px solid var(--금);border-radius:0 6px 6px 0}
.먹띠.금{color:var(--금);font-weight:700}
/* 툴팁 — 툴팁.js 가 body 에 하나 두고 요소의 title 을 옮겨 세운다(걸음 7). 판 밖이라 화면 px · 여러 줄 title 은 줄 그대로(pre-line) */
.먹띠.툴팁{position:fixed;left:0;top:0;z-index:10000;max-width:min(360px,calc(100vw - 24px));padding:6px 11px;font-size:12.5px;line-height:1.45;
  white-space:pre-line;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.먹띠.툴팁.보임{opacity:1}
/* 닫개 ✕ — 덧창 오른쪽 위(CLAUDE.md). 로비 · 내 열전 · 천하가 글자까지 같은 벌을 베끼고 있었다(걸음 6 · 2026-09-23). 자리(right·top)와 폰 과녁은 화면이 둔다.
   ⚠ 이름이 「닫개」인 까닭 — 천하에 이미 딴 뜻의 `.닫이`(덧창 머리 단추 · line-height:1)가 있어 부딪쳤다(폰 과녁 26 < 28 · 재 봄으로 잡음).
   **모든 닫기 단추는 이 동그라미 한 벌이다**(2026-09-26 · 사용자 결정 · 「원 모양에 ✕ 로 통일」) — 천하의 네모 닫이 · 전쟁의 일지·열전 ·
   덧틀의 personX 가 저마다 딴 꼴이었다. 화면은 자리와 크기(`--닫개`)만 정한다.
   **보이는 원은 작게 · 과녁은 늘 44**(같은 날 · 「너무 튄다 · 단 터치가 어렵게 하면 안 된다」) — 원을 34 → 28(폰 26 → 22)로 줄이고
   `::after` 가 원 크기와 상관없이 42 를 채운다(전엔 원 + 12 = 38 · 과녁은 도리어 커졌다). */
.닫개{position:relative;box-sizing:border-box;flex:0 0 auto;width:var(--닫개,28px);height:var(--닫개,28px);padding:0;
  display:inline-grid;place-items:center;border-radius:50%;
  background:var(--먹판);border:1px solid rgba(201,162,39,.45);color:var(--글);
  font-size:calc(var(--닫개,28px) * .5);line-height:1;font-weight:700;font-family:inherit;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
.닫개::after{content:'';position:absolute;inset:calc((var(--닫개,28px) - 44px) / 2);border-radius:50%}
.닫개:hover{color:var(--금);border-color:var(--금);background:var(--먹판2)}
/* 폰은 22 한 벌 — 폰 머리띠는 36 안팎이라 30 이면 머리의 밑줄에 걸쳐 밖으로 튀어나왔다(2026-09-26 · 사용자 겪음 · 거점 곁판).
   과녁은 ::after 로 44 라 SE(배율 .83)에서도 36. 화면이 폰 크기를 따로 적지 않는다 — 여기 한 곳이다.
   ⚠ 42 였을 때 배치 훑개가 SE 의 거점 곁판 ✕ 를 33 으로 쟀다(그 자리 잣대 34 · 원 끝의 둥근 데를 손이 덜 잡는다) — 44 로 올렸다. */
html.폰 .닫개{--닫개:22px}
/* **손끝 기기의 과녁은 56 — 왼쪽 · 아래로 넓힌다** (2026-09-29 · 사용자 「모든 창의 닫기 버튼을 여유 있게 · 모바일 사용성 · 단 가로 세로 스크롤바가
   생기면 안 된다」). 보이는 원은 그대로(22 · 넓은 판 28) 두고 누르는 넓이(::after)만 44 → 56. 닫개는 다 창의 **오른쪽 위**에 산다 — 위 · 오른쪽은
   여태 값(폰 11 · 넓은 판 8)만큼만 둬 판 · 창 가장자리 밖으로 안 나가고(나가면 굴러 막대가 선다), 늘어난 몫은 안쪽인 **왼쪽 · 아래**로 받는다.
   곁의 누를 것을 덮지 않는지는 배치 훑개 ⑱ 닫개겹침이 잰다. 마우스(손끝 아님)는 44 그대로. */
html.손끝 .닫개::after{inset:calc((var(--닫개,28px) - 44px) / 2) calc((var(--닫개,28px) - 44px) / 2)
  calc((var(--닫개,28px) - 44px) / 2 - 12px) calc((var(--닫개,28px) - 44px) / 2 - 12px)}

/* ── ⑥ 뜬글 — 순간의 수 · 한마디 (바탕 없음) ───────────────────────── */
.뜬글{text-shadow:0 2px 6px #000,0 0 10px #000;font-weight:900;pointer-events:none}
.뜬글.말{font-family:var(--명조);font-weight:400}

/* ── ⑦ 싣는표 — 화면 전환 서찰 (2026-09-29 · 옛 싣는표.css 를 여기로 합쳤다) ─────────
 *  화면 전환 글을 이 서찰 한 벌로 통일하며(개발자 페이지 「화면 전환 글」) 로비 · 순위 · 열전 · 역사 · 사전까지
 *  쓰게 되자, 따로 두면 그 다섯이 요청을 하나씩 더 받았다(scan_speed · 장수 열전 요청 12 → 13 · 한도 11).
 *  서찰은 글상자의 한 결이고 쓰는 쪽은 모두 이 파일을 이미 받는다 — 천하 · 전쟁은 요청이 하나 준다. */
/* 「군을 정돈하는 중…」 — 전투 화면으로 넘어가는 사이의 표시 (2026-09-16 · 사용자 요청).
 *
 *  천하가 전쟁·설전·일기토를 덧틀(iframe)로 여는데, 누르고 판이 설 때까지 4G 언저리(80ms ·
 *  10Mbps)에서 **3.1~4.6초**가 검은 화면이었다(재 봄 · 회선 없이 0.4~0.5초). 그 사이 덧창
 *  (`#veil전투`)에 이것이 서고, 자식이 판을 세워 「판섰다」를 보내면 걷힌다(`덧틀말.js`).
 *  자식이 혼자(덧틀 아님 · `?판=천하` 를 곧장) 열렸을 때는 자식 제 몸통에 같은 것을 세운다 —
 *  그래서 **한 벌**로 두고 두 화면이 링크로 나눠 쓴다(베끼면 두 자리가 조용히 갈린다).
 *
 *  · 0.5초 안에 판이 서면 안 띄운다 — 깜박임. 세우는 쪽이 시계를 건다(`.늦음` 딱지).
 *  · 글 13px(읽는 글 바닥) · 명조 · 양피지 결의 작은 서찰 위 · 붓 한 획이 돈다(꼬리가 옅어지는
 *    고리 · `conic-gradient` 를 고리 가면으로 오려 낸다 · 그림 파일 없음).
 *  · 판 안이다(천하의 `#veil전투` 는 `#fitall` 안 · 전쟁도 `#veil` 안) — `vh`·`vw` 금지가 걸린다 · % 와 px 만 쓴다(2026-09-23 · 주석이 「판 밖」이라 적혀 있었다).
 *  · `pointer-events:none` — 표시일 뿐, 손짓은 밑으로 흘린다. */
.싣는표{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
       pointer-events:none;opacity:0;transition:opacity .25s ease}
.싣는표.늦음{opacity:1}
.싣는표 .서찰{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:9px;
       background:linear-gradient(#efe2c4,#ddcba4);color:#2a2118;
       box-shadow:inset 0 1px 0 #fff8e6,inset 0 -2px 6px rgba(90,60,20,.28),0 12px 30px rgba(0,0,0,.6);
       font:13px/1.4 "Noto Serif KR","Batang","바탕",serif;letter-spacing:.3px;white-space:nowrap}
/* 붓 한 획 — 앞은 짙고 꼬리는 마르듯 옅어지는 고리가 돈다 */
.싣는표 .획{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
       background:conic-gradient(from 0deg,transparent 0 28%,rgba(90,60,20,.18) 28%,#3a2a12 100%);
       -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
               mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
       animation:획돌기 1.1s linear infinite}
@keyframes 획돌기{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.싣는표 .획{animation-duration:2.4s}}

/* ── 화면 전환 글을 이 한 벌로 통일한다 (2026-09-29 · 사용자 「제안대로」 · 통일안 `화면전환.html`) ──
 *  천하 → 싸움 한 자리만 이 꼴이었고 나머지는 빈 화면 · 흐린 글 · 「데이터를 불러오는 중...」 으로 제각각이었다.
 *  글은 「무엇을 ~하는 중…」 한 줄 · 그 판의 말로(펴다 · 싸움의 말 · 적어 두다 · 모으다 · 살피다).
 *  · `.저절로` — JS 없이 0.5초 문턱을 건다(세운 지 0.5초 뒤 .25초 떠오른다 · 그 전에 걷히면 안 보인다).
 *    페이지가 막 서는 자리(천하의 첫 판 · 연대표)처럼 시계를 걸 코드가 아직 없는 곳에 쓴다.
 *  · `.제자리` — 목록 칸 안에 흐름으로 선다(순위 · 열전 목록 · 칸 창 · 사전) · 문턱은 `.저절로` 와 같다.
 *  · `.곧` — 문턱 없이 곧바로(앞 화면이 이미 같은 서찰을 띄우고 넘어왔을 때 · 끊김 없이 잇는다).
 *  · `.못섬` — 못 섰을 때 · 같은 서찰에 획만 걷고 「~하지 못했습니다 · 다시 열어 주십시오」 · 줄을 접는다. */
.싣는표.저절로,.싣는표.제자리{animation:싣는표떠오름 .25s ease .5s both}
@keyframes 싣는표떠오름{from{opacity:0}to{opacity:1}}
.싣는표.제자리{position:relative;inset:auto;z-index:auto;padding:36px 12px}
.싣는표.곧,.싣는표.못섬{opacity:1;animation:none;transition:none}
.싣는표.못섬 .획{display:none}
.싣는표.못섬 .서찰{white-space:normal;text-align:center;max-width:min(420px,92%);padding:12px 18px}