:root{
  --바탕:#14110e; --판:#1c1813; --테:#3a332a;
  --글:#ece4d6; --흐린:#9b9184; --금:#c9a227; --붉:#8d2f28;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--바탕);color:var(--글);
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:16px;line-height:1.85;
  padding:0 16px env(safe-area-inset-bottom) 16px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right))}
.속{max-width:760px;margin:0 auto}
a{color:var(--금);text-decoration:none}
a:hover{text-decoration:underline}

.길{font-size:13px;color:var(--흐린);padding:18px 0 6px}
.길 a{color:var(--흐린)}

h1{font-family:"Noto Serif KR",serif;font-size:2.4rem;letter-spacing:2px;
  margin:.2em 0 .1em;color:var(--금);line-height:1.25}
/* 머리칸 — 이름·곁말이 왼쪽, 초상이 오른쪽. 초상은 아래 14% 를 잘라 낙관을 뺀다 */
.머리칸{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.머리글{min-width:0;flex:1 1 auto}
.얼굴{width:150px;height:auto;aspect-ratio:320/344;object-fit:cover;object-position:top;
  border-radius:10px;border:1px solid var(--테);flex:0 0 auto;margin:11px 0;display:block}
/* 여백 11 · 폰 7 은 디자인 캔버스에서 손으로 민 값이다(2026-09-06 · 사용자 결정) */
h1 .한자{font-size:1.4rem;color:var(--흐린);letter-spacing:1px;margin-left:.35em}
.자{color:var(--흐린);font-size:14px;margin:0 0 14px}
.한줄{font-size:1.12rem;font-weight:700;color:#ffe9a8;margin:0 0 22px;
  padding:14px 16px;background:var(--판);border-left:3px solid var(--금);
  border-radius:0 8px 8px 0;line-height:1.6}

h2{font-family:"Noto Serif KR",serif;font-size:1.28rem;color:var(--금);
  margin:38px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--테);
  letter-spacing:1px}
p{margin:0 0 14px}

/* 능력치 — 다섯 줄의 막대 */
.능{display:grid;grid-template-columns:3.2em 1fr 2.4em;gap:7px 10px;
  align-items:center;font-size:14px}
.능 .막{background:#2a251d;border-radius:3px;height:9px;overflow:hidden}
.능 .참{display:block;height:100%;background:linear-gradient(90deg,#7a5f17,var(--금))}
.능 .값{text-align:right;color:var(--금);font-variant-numeric:tabular-nums}

/* 카드 수치 */
.칸들{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.칸{background:var(--판);border:1px solid var(--테);border-radius:8px;
  padding:8px 13px;font-size:14px}
.칸 b{color:var(--금);font-variant-numeric:tabular-nums}

dl.재주{margin:0}
dl.재주 dt{color:var(--금);font-weight:700;margin-top:12px}
dl.재주 dd{margin:2px 0 0;color:var(--흐린);font-size:14.5px}

/* 인연 */
.인연 h3{font-size:1rem;margin:18px 0 8px;color:var(--글);font-weight:700}
.무리{display:flex;flex-wrap:wrap;gap:7px}
.쪽지{display:inline-block;background:var(--판);border:1px solid var(--테);
  border-radius:7px;padding:5px 11px;font-size:14px;color:var(--글)}
.쪽지:hover{border-color:var(--금);color:var(--금);text-decoration:none}
.쪽지 .뭇{color:var(--흐린);font-size:12px;margin-left:5px}
.쪽지.숙{border-color:#5a2a26}
.쪽지.숙:hover{border-color:var(--붉);color:#e39b95}

/* 남긴 말 */
.말{border-left:2px solid var(--테);padding:2px 0 2px 15px;margin:0 0 15px}
.말 .자리{font-size:12.5px;color:var(--흐린);letter-spacing:1px}
.말 p{margin:2px 0 0;font-family:"Noto Serif KR",serif;font-size:1.04rem;
  color:#f3ead9;line-height:1.7}

/* 목록 쪽 */
.찾기{width:100%;padding:11px 14px;font-size:16px;border-radius:9px;
  background:var(--판);border:1px solid var(--테);color:var(--글);margin:0 0 8px;
  font-family:inherit}
.세력{margin:26px 0 0}
.세력 h2{margin-bottom:10px}
.셈{color:var(--흐린);font-size:13px;font-weight:400;margin-left:8px}
.없음{color:var(--흐린);padding:20px 0}

/* 원문으로 새로 쓴 열전(2026-09-28) — 출전 · 원문 인용 · 정사와 연의가 다른 곳 · 생애 · 연대표 속 이 사람 */
.출전{font-size:13px;color:var(--흐린);margin:-4px 0 14px;line-height:1.6}
.원문{margin:18px 0 6px;padding:12px 16px;border-left:2px solid #4f7a66;background:#181d18;border-radius:0 8px 8px 0}
.원문 blockquote{margin:0;font-family:"Noto Serif KR",serif;font-size:1.08rem;color:#f3ead9;line-height:1.7}
.원문 figcaption{margin-top:6px;font-size:14px;line-height:1.65}
.원문 cite{display:block;font-style:normal;font-size:12.5px;color:var(--흐린)}
ul.다름{padding-left:1.2em;margin:0 0 14px}
ul.다름 li{margin-bottom:.45em}
ol.생애,ul.일{list-style:none;margin:0;padding:0}
ol.생애 li,ul.일 li{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--테);font-size:15px;line-height:1.7}
ol.생애 li:first-child,ul.일 li:first-child{border-top:0}
.해{flex:0 0 3em;color:var(--금);font-weight:700;font-variant-numeric:tabular-nums}
.몸{flex:1;min-width:0}
.카드이름{margin-left:6px;font-size:12.5px;color:var(--흐린)}
.딱{display:inline-block;margin-right:6px;padding:0 7px;border:1px solid currentColor;border-radius:8px;font-size:12px;line-height:1.7}
.딱.같음{color:#8fc7a8} .딱.각색{color:#d9b35a} .딱.연의{color:#e08a72} .딱.정사{color:#8fb0d9}
ul.일 .이름{font-weight:700}
ul.일 .줄{display:block;color:var(--흐린);font-size:14px}
/* 글의 접힘(CLAUDE.md) — 줄 목록은 낱말 한가운데서 안 접는다 · pretty 는 웹킷이 줄을 줄이므로 @supports 안에만 */
ol.생애 li,ul.일 li,ul.다름 li{word-break:keep-all}
/* 일본어판(ja/列伝/ · 같은 CSS)은 띄어쓰기가 없어 keep-all 이면 한 줄이 통째로 한 낱말이 된다 — 폰에서 570px 로 넘쳤다 */
html:lang(ja) ol.생애 li,html:lang(ja) ul.일 li,html:lang(ja) ul.다름 li{word-break:normal;line-break:strict}
@supports (text-justify: inter-character){
  ol.생애 .몸,ul.일 .몸,ul.다름 li{text-wrap:pretty}
}

.바닥{margin:48px 0 30px;padding-top:16px;border-top:1px solid var(--테);
  font-size:13px;color:var(--흐린);line-height:1.9}
.바닥 a{color:var(--흐린)}

@media (max-width:600px){
  /* 폰 — 한자는 이름 곁에 그대로 두고(2026-09-06 · 사용자 결정 · 줄을 바꾸지 않는다),
     초상은 이름 아래 가운데에 선다. 좁은 폭에서 이름과 초상을 나란히 두면 이름이 눌린다. */
  .머리칸{flex-direction:column;align-items:stretch;gap:12px}
  .얼굴{width:150px;margin:7px auto}
  h1{font-size:1.85rem}
  h1 .한자{font-size:1.05rem}
  body{font-size:15.5px}
}