: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}
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}
.근거{font-size:13px;color:var(--흐린);margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--테)}

/* 목록 쪽 */
.찾기{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}

.바닥{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){
  h1{font-size:1.85rem}
  h1 .한자{display:block;margin:2px 0 0;font-size:1.05rem}
  body{font-size:15.5px}
}