:root {
  --bg: #ffffff;
  --side: #fafafa;
  --ink: #1f1f1f;
  --ink2: #5f5f5f;
  --ink3: #767676;
  --line: #e3e3e3;
  --seal: #a51c30;
  --seal2: #c94457;
  --tint: #fbf0f2;
  --cell: #f2d3d9;
  --good: #2f7d4f;
  --bad: #b3261e;
  --gold: #9a6b12;
  --serif: "Nanum Myeongjo", "Batang", "바탕", "AppleMyungjo", serif;
  --sans: "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; }
button { font: inherit; color: inherit; cursor: pointer; }
dl { margin: 0; }

#app { height: 100vh; display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; }
.col { min-height: 0; overflow-y: auto; }
.left, .right { background: var(--side); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.left { border-right: 1px solid var(--line); }
.right { border-left: 1px solid var(--line); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.card h3 { margin: 0 0 10px; font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card h3 small { font-size: 12px; color: var(--ink2); font-weight: 400; text-align: right; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.kv dt { color: var(--ink2); font-size: 12px; padding-top: 1px; }
.kv dd { margin: 0; font-weight: 500; }
.kv dd .sm { color: var(--ink2); font-weight: 400; font-size: 12px; }

/* 왼쪽 */
.prof { padding: 0; overflow: hidden; }
.band { background: var(--seal); color: #fff; font-weight: 700; padding: 9px 14px; font-size: 13px; }
.pbody { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; align-items: start; }
#portrait { width: 96px; height: 96px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 4px; }
.pinfo h2 { margin: 2px 0 10px; font-size: 20px; }
.bars { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px 10px; align-items: center; }
.bars .l { color: var(--seal); font-size: 12px; text-align: right; }
.bars .t { height: 9px; background: #ececec; border-radius: 5px; overflow: hidden; }
.bars .t i { display: block; height: 100%; background: var(--seal); border-radius: 5px; }
.bars .v { font-size: 12px; color: var(--ink2); text-align: right; white-space: nowrap; }
.list dt { min-width: 34px; }
.money .row { display: flex; gap: 26px; }
.money .lbl { font-size: 12px; color: var(--seal); font-weight: 700; }
.money .num { font-size: 22px; font-weight: 800; margin-top: 2px; }
.money .cmp { margin: 10px 0 0; color: var(--seal); font-size: 12.5px; line-height: 1.5; }
.src { color: var(--ink3); font-size: 12px; margin-top: 4px; }

/* 가운데 */
.mid { display: flex; flex-direction: column; overflow: hidden; }
.mhead { display: flex; align-items: center; gap: 14px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.ybig { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; white-space: nowrap; }
.ybig small { font-size: 16px; font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.ttl { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ttl b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl span { color: var(--ink2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hstat { text-align: right; font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.hstat b { color: var(--ink); font-size: 14px; }
.btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 7px 12px; font-weight: 700; color: var(--seal); white-space: nowrap; }
.btn.icon { color: var(--ink); padding: 7px 11px; }
.strip { border-bottom: 1px solid var(--line); background: #000; }
.strip canvas { display: block; width: 100%; height: clamp(110px, 19vh, 170px); object-fit: cover; object-position: 50% 100%; image-rendering: pixelated; }
.loghead { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; background: #f6f6f6; border-bottom: 1px solid var(--line); font-size: 13px; }
.tog { border: 0; background: none; color: var(--ink3); font-size: 12px; padding: 2px 4px; }
.tog.on { color: var(--seal); font-weight: 700; }
.logbox { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.yg { border-bottom: 1px solid var(--line); }
.yg h4 { margin: 0; padding: 8px 18px 4px; font-size: 13px; }
.yg ol { list-style: none; margin: 0; padding: 0 0 6px; }
.yg li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 4px 18px 4px 0; line-height: 1.55; }
.yg li .n { color: var(--ink3); font-size: 12px; text-align: center; padding-top: 3px; border-right: 1px solid var(--line); }
.yg li .t { padding-left: 12px; overflow-wrap: anywhere; }
.yg li.big .t { font-weight: 700; }
.yg li.ach .t { font-weight: 700; color: var(--gold); }
.yg li.death .t { color: var(--bad); }
.yg li.birth .t { color: var(--good); }
.yg li.dec .t { color: var(--seal); }
.yg li.minor .t { color: var(--ink2); font-size: 12.5px; }
.yg li.omen .t { color: #8a6a2f; font-style: italic; }

.mfoot { border-top: 1px solid var(--line); padding: 10px 18px 14px; }
.bar { height: 4px; background: #ececec; border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.bar i { display: block; height: 100%; width: 0; background: var(--seal); }
.decbar { display: none; border-left: 3px solid var(--seal); background: var(--tint); padding: 9px 12px; margin-bottom: 10px; }
.decbar.on { display: block; }
.decbar b { font-size: 14px; }
.decbar span { color: var(--ink2); font-size: 12.5px; margin-left: 8px; }
.ctrl { display: flex; gap: 10px; align-items: stretch; }
.choices { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.choices button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 9px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 48px; }
.choices button:first-child { border-color: var(--seal); }
.choices button:hover { background: var(--tint); border-color: var(--seal); }
.choices button .l { font-weight: 700; }
.choices button .e { color: var(--ink2); font-size: 12px; }
.choices button .k { color: var(--ink3); font-size: 12px; margin-right: 4px; }
.speed { display: flex; gap: 4px; align-self: flex-end; }
.speed button { width: 46px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 13px; }
.speed button.on { border-color: var(--seal); color: var(--seal); font-weight: 700; background: var(--tint); }

/* 오른쪽 */
.cmp { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 14px; font-size: 13px; }
.cmp .h { color: var(--ink2); font-size: 12px; text-align: right; }
.cmp .h:first-child { text-align: left; }
.cmp .a { text-align: right; font-weight: 600; }
.cmp .b { text-align: right; font-weight: 700; color: var(--seal); }
.cmp .k { color: var(--ink2); }
.kin { display: flex; flex-direction: column; gap: 10px; }
.kin .r { display: flex; justify-content: space-between; gap: 10px; }
.kin .nm b { font-size: 14px; }
.kin .nm span { color: var(--ink2); font-size: 12px; margin-left: 4px; }
.kin .sub { color: var(--ink3); font-size: 12px; }
.kin .rt { text-align: right; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.kin .rt div { color: var(--seal); font-size: 12px; font-weight: 500; }
.grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.grid i { aspect-ratio: 1; border: 1px solid #dadada; border-radius: 3px; }
.grid i.f { background: var(--cell); border-color: var(--cell); }
.grid i.m { background: var(--seal2); border-color: var(--seal2); }
.grid i.now { border: 2px solid var(--ink); }
.grid i.exp { border: 1.5px dashed var(--ink); }
.credit { color: var(--ink3); font-size: 12px; margin: 0; text-align: center; }

/* 덮개 창 */
.ov { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.45); display: none; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
.ov.on { display: flex; }
.dlg { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; width: min(460px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); }
.dlg h2 { margin: 0; font-size: 21px; }
.dlg .sub { margin: 4px 0 14px; color: var(--ink2); }
.ver { color: var(--ink3); font-size: 12px; margin: 12px 0 0; }
/* 가계도 트리 (v0.0.13): 세로로 내려가는 들여쓰기 트리, 이음선 */
.dlg.tree { width: min(720px, 100%); }
.ft, .ft ul { list-style: none; margin: 0; padding: 0; }
.ft ul { padding-left: 14px; }
.ft li { position: relative; padding: 3px 0 3px 16px; }
.ft ul > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid #cfcfcf; }
.ft ul > li:last-child::before { bottom: auto; height: 17px; }
.ft ul > li::after { content: ""; position: absolute; left: 0; top: 17px; width: 12px; border-top: 1px solid #cfcfcf; }
/* 계보 줄기: 대마다 같은 높이로, 굵은 인주색 줄로 잇는다 */
.ft.spine > li { padding: 0 0 8px 16px; }
.ft.spine > li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: -12px; border-left: 2px solid var(--cell); }
.ft.spine > li:last-child::before { display: none; }
.ft.spine > li::after { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--seal2); box-sizing: content-box; margin-left: -1px; }
.ft.spine > li > ul { margin-top: 3px; }
.tn { display: inline-block; max-width: 100%; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 12.5px; line-height: 1.45; vertical-align: top; }
.tn b { font-weight: 700; }
.tn span { color: var(--ink3); font-size: 12px; margin-left: 5px; }
.tn i { font-style: normal; font-size: 10.5px; margin-left: 5px; padding: 0 5px; border-radius: 8px; background: #f1f1f1; color: var(--ink2); }
.tn i.hd { background: var(--tint); color: var(--seal); font-weight: 700; }
.tn i.hr { background: #fff4d6; color: var(--gold); font-weight: 700; }
.tn em { font-style: normal; font-size: 10.5px; color: var(--ink3); margin-left: 6px; }
.tn .sp { color: var(--ink2); font-size: 12px; }
.tn.now { border-color: var(--seal); box-shadow: 0 0 0 1px var(--seal) inset; }
.tn.now b { color: var(--seal); }
.tn.dead { background: #f7f7f7; color: var(--ink2); }
.tn.dead b { font-weight: 600; }
.tn.f b { color: #7a3b5c; }
.tn.now.f b { color: var(--seal); }
.tn.mini { padding: 2px 8px; font-size: 12px; border-style: dashed; }
.tn.root { background: var(--tint); border-color: var(--cell); }
.ft details > summary { list-style: none; cursor: pointer; }
.ft details > summary::-webkit-details-marker { display: none; }
.ft details > summary .cnt { font-style: normal; font-size: 12px; color: var(--seal2); margin-left: 6px; }
.ft details > summary .cnt::before { content: "▸ "; }
.ft details[open] > summary .cnt::before { content: "▾ "; }
.start { text-align: center; padding: 36px 26px 22px; }
.start h1 { margin: 0; font-family: var(--serif); font-size: 48px; letter-spacing: 8px; color: var(--seal); }
.modes { display: flex; gap: 8px; justify-content: center; margin: 18px 0 14px; }
.mode { width: 120px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mode.on { border-color: var(--seal); color: var(--seal); font-weight: 700; background: var(--tint); }
.mode:disabled { opacity: 0.4; cursor: default; }
.acts { display: flex; gap: 8px; justify-content: center; }
.cta { padding: 11px 28px; border: 0; border-radius: 8px; background: var(--seal); color: #fff; font-weight: 700; font-size: 15px; }
.ghost { padding: 11px 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; }
.ghost:disabled { opacity: 0.35; cursor: default; }
.ghost.danger { color: var(--bad); }
.menu { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); text-align: center; }
.dlg.birth { text-align: center; }
.dlg.birth .yy { color: var(--ink2); font-size: 15px; }
.dlg.birth .cc { font-family: var(--serif); font-size: 38px; font-weight: 700; margin: 4px 0; }
.dlg.birth .odds { color: var(--seal); font-weight: 600; }
.dlg.birth .kv { text-align: left; margin: 18px auto; width: fit-content; }
.end h2 { text-align: center; }
.end .total { text-align: center; font-size: 42px; font-weight: 800; color: var(--seal); margin: 6px 0 12px; }
.end .stat { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-bottom: 14px; }
.end .stat div:nth-child(even) { text-align: right; font-weight: 700; }
.chain { margin: 0 0 12px; padding: 0; list-style: none; border-left: 2px solid var(--seal); }
.chain li { padding: 3px 0 3px 12px; position: relative; }
.chain li::before { content: ""; position: absolute; left: -5px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--seal); }
.chain li.now { font-weight: 700; }
.chain .sm, .gen .sm { color: var(--ink2); font-size: 12px; font-weight: 400; }
.end .chain { max-height: 180px; overflow-y: auto; }
/* v0.0.15: 재산 쓰기 · 도움말 · 시드 · 지난 가문 */
button.mini { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--ink2); }
button.mini:hover { border-color: var(--seal2); color: var(--seal); }
.card h3 button.mini.sp { color: var(--seal); border-color: var(--cell); background: var(--tint); }
.dlg.spend { width: min(520px, 100%); }
.spl { display: flex; flex-direction: column; gap: 6px; }
.spi { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 9px 12px; }
.spi .l { display: flex; flex-direction: column; gap: 2px; }
.spi .l span { color: var(--ink2); font-size: 12px; }
.spi .r { font-weight: 700; color: var(--seal); white-space: nowrap; font-size: 13px; }
.spi:disabled { opacity: 0.5; cursor: default; }
.spi:disabled .r { color: var(--ink3); font-weight: 400; }
.spi:not(:disabled):hover { border-color: var(--seal2); background: var(--tint); }
.dlg.help { width: min(560px, 100%); }
.dlg.help h4 { margin: 14px 0 4px; color: var(--seal); font-size: 14px; }
.dlg.help p { margin: 0; line-height: 1.65; color: var(--ink); font-size: 13.5px; }
.start .goal { margin: 4px 0 12px; color: var(--ink2); font-size: 12.5px; }
.seedrow { display: flex; gap: 6px; justify-content: center; margin: 0 auto 10px; max-width: 300px; }
.seedrow input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13px; }
.seedrow input.bad { border-color: var(--bad); }
.seedrow button { padding: 6px 12px; }
.hall { text-align: left; max-width: 360px; margin: 0 auto; }
.hall h4 { margin: 6px 0 4px; font-size: 12.5px; color: var(--ink2); }
.hall ol { margin: 0; padding-left: 18px; font-size: 12.5px; }
.hall li { padding: 2px 0; }
.hall li span { color: var(--ink3); font-size: 12px; }
.hall li em { font-style: normal; font-weight: 700; color: var(--seal); margin-left: 6px; }
.hall li button.mini { margin-left: 6px; padding: 0 6px; }
.linkbtn { border: 0; background: none; color: var(--ink2); text-decoration: underline; font-size: 12px; margin-top: 4px; }
.seedinfo { color: var(--ink3); font-size: 12px; margin: 8px 0 0; user-select: all; }
.end .seedline { text-align: center; color: var(--ink2); font-size: 12px; margin: 10px 0 0; }
.end .seedline b { user-select: all; }
.end .acts { flex-wrap: wrap; }
/* 끝 화면 요약 (v0.0.14) */
.dlg.end { width: min(560px, 100%); }
.end .endh { margin: 16px 0 8px; font-size: 13px; color: var(--seal); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.end .story { font-family: var(--serif); font-size: 14px; line-height: 1.75; }
.end .story p { margin: 0 0 6px; word-break: keep-all; overflow-wrap: anywhere; }
.end .sumg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; font-size: 13px; margin-top: 10px; }
.end .sumg .k { color: var(--ink2); }
.end .sumg .v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.end .achy { display: flex; flex-wrap: wrap; gap: 4px; }
.end .achy .chip { margin: 0; }
.chip { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 12px; }
.chip.h { border-color: var(--seal); color: var(--seal); font-weight: 700; }
.chip.far { border-style: dashed; }
.chip.debt { border-color: var(--bad); color: var(--bad); font-weight: 700; }
.dlg.tree { width: min(640px, 100%); }
.tree h4 { margin: 14px 0 8px; font-size: 15px; }
.gen { margin: 4px 0 10px; }
.gen b { display: inline-block; min-width: 38px; color: var(--ink2); }
.dlg .close { float: right; }

@media (max-width: 1100px) {
  #app { grid-template-columns: 270px minmax(0, 1fr); }
  .right { display: none; }
}
@media (max-width: 760px) {
  #app { height: auto; min-height: 100vh; display: flex; flex-direction: column; }
  .mid { order: 1; overflow: visible; }
  .left { order: 2; border: 0; }
  .right { order: 3; display: flex; border: 0; }
  .mhead { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px 10px; }
  .ybig { font-size: 28px; }
  .hstat { order: 5; flex-basis: 100%; text-align: left; }
  .logbox { max-height: 46vh; }
  .mfoot { position: sticky; bottom: 0; background: #fff; z-index: 5; padding: 10px 12px 12px; }
  .ctrl { flex-direction: column; }
  .speed { align-self: stretch; }
  .speed button { flex: 1; width: auto; }
  .choices { grid-template-columns: 1fr 1fr; }
}

/* ---- v0.0.3 추가: 실록 달 · 생활/방계 기록 · 큰 결정 카드 · 가계도 · 개발 기록 ---- */
.yg li .n { font-size: 12px; white-space: nowrap; }
.yg li.life .t { color: var(--ink); }
.yg li.kin .t { color: #5b6b7a; }
.logwrap { position: relative; flex: 1; min-height: 0; display: flex; }
.logwrap .logbox { flex: 1; }
.deccard { display: none; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.97); padding: 26px 30px; overflow-y: auto; z-index: 3; }
.deccard.on { display: block; }
.deccard .dch { border-left: 4px solid var(--seal); padding: 4px 0 4px 14px; margin-bottom: 18px; }
.deccard .dch b { display: block; font-size: 24px; letter-spacing: -0.5px; }
.deccard .dch span { color: var(--ink2); font-size: 14px; }
.deccard .dcc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.deccard .dcc button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 16px 18px; text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 76px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.deccard .dcc button:hover { border-color: var(--seal); background: var(--tint); }
.deccard .dcc button .l { font-weight: 800; font-size: 16px; }
.deccard .dcc button .e { color: var(--ink2); font-size: 13px; }
.deccard .dcc button .k { color: var(--ink3); font-size: 12px; margin-right: 6px; font-weight: 600; }
.inrow { display: flex; gap: 8px; margin-top: 14px; }
.inrow input { flex: 1; max-width: 240px; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--seal); border-radius: 8px; }
.inrow button { padding: 10px 18px; border: 0; border-radius: 8px; background: var(--seal); color: #fff; font-weight: 700; }
@media (min-width: 761px) {
  .mfoot .decbar, .mfoot .choices { display: none !important; }
  .mfoot .ctrl { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .deccard { display: none !important; }
  .logwrap { display: block; }
}
.ftree { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 2px solid var(--cell); }
.ftree > li { position: relative; padding: 4px 0 4px 14px; font-size: 13px; }
.ftree > li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--seal2); }
.ftree > li.now::before { background: var(--seal); border-color: var(--seal); }
.ftree > li b { font-weight: 700; }
.ftree > li.now b { color: var(--seal); }
.ftree > li span { color: var(--ink3); font-size: 12px; margin-left: 4px; }
.ftree > li em { font-style: normal; color: var(--ink2); font-size: 12px; float: right; }
.ftree .kids { margin: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 4px; }
.ftree .kids .chip { margin: 0; }
.devbtn { position: fixed; left: 50%; top: 4px; transform: translateX(-50%); z-index: 20; padding: 6px 10px; border: 1px dashed var(--ink3); background: #fff; border-radius: 6px; font-size: 12px; color: var(--ink2); }
.dlg.dev { width: min(900px, 100%); }
.dlg.dev h2 small { font-size: 12px; color: var(--ink3); font-weight: 400; }
.dlg.dev textarea { width: 100%; height: 60vh; margin: 12px 0; font: 12px/1.45 Consolas, "D2Coding", monospace; border: 1px solid var(--line); border-radius: 6px; padding: 10px; white-space: pre; }
.choices .inrow { grid-column: 1 / -1; margin-top: 0; }

/* ---- 0.0.6: 나라 이름 · 경고 · 알림 · 결과 카드 · 재산 · 지파 · 성장 목표 · 자동 ---- */
.nation { font-size: 22px; font-weight: 800; color: var(--seal); white-space: nowrap; letter-spacing: -0.5px; }
.band { font-size: 16px; padding: 10px 14px; }
.warn { display: none; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.warn.on { display: block; }
.warn.r { background: #fde8e6; color: var(--bad); }
.warn.y { background: #fff4d6; color: #8a5a00; }
.strip { position: relative; }
.banner { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px); opacity: 0; transition: opacity 0.25s, transform 0.25s; background: rgba(255, 255, 255, 0.95); border-left: 4px solid var(--seal); border-radius: 6px; padding: 8px 14px; font-weight: 700; font-size: 15px; max-width: 86%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); pointer-events: none; }
.banner.on { opacity: 1; transform: translate(-50%, 0); }
.banner small { display: block; font-weight: 500; color: var(--ink2); font-size: 12px; margin-top: 2px; }
.banner.death { border-left-color: var(--bad); }
.banner.birth { border-left-color: var(--good); }
.banner.ach { border-left-color: var(--gold); }
.yg li .tag { display: block; color: var(--ink3); font-size: 12px; font-weight: 400; margin-top: 1px; }
.money .big { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.money .chg { font-size: 12.5px; font-weight: 700; margin-left: 6px; }
.money .chg.up { color: var(--good); }
.money .chg.dn { color: var(--bad); }
.money .pos { color: var(--ink2); font-size: 12px; margin-top: 2px; }
.money .hold { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.inc .big { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.inc .pos { color: var(--ink2); font-size: 12px; margin-top: 2px; }
.inc .why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.inc .why .chip { margin: 0; }
.inc .chip.up { border-color: #b9dcc4; color: var(--good); }
.inc .chip.dn { border-color: #efc2c2; color: var(--bad); }
.goalbar { display: grid; grid-template-columns: 60px 1fr 58px; gap: 6px 8px; align-items: center; margin-top: 10px; font-size: 12px; }
.goalbar .t { height: 6px; background: #ececec; border-radius: 3px; overflow: hidden; }
.goalbar .t i { display: block; height: 100%; background: var(--gold); }
.goalbar .v { color: var(--ink2); text-align: right; white-space: nowrap; }
.goalbar .l { color: var(--ink2); }
.brl { display: flex; flex-direction: column; gap: 8px; }
.brl .r { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.brl .r b { font-size: 13.5px; }
.brl .r span { color: var(--ink3); font-size: 12px; }
.speed .auto { width: 52px; }
.speed .auto.on { border-color: var(--seal); background: var(--seal); color: #fff; font-weight: 700; }
.cl h4 { margin: 14px 0 4px; }
.cl ul { margin: 0; padding-left: 18px; }
.cl li { margin: 3px 0; font-size: 13.5px; }
@media (max-width: 760px) {
  .nation { font-size: 18px; }
  .warn { order: 6; }
}

/* ---- 0.0.7: 인생 방향 · 살림 방침 · 자녀 교육 ---- */
.plan { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; }
#dirs { padding: 0 14px 14px; }
.money .plan { margin-top: 12px; }
.pl { font-size: 12px; color: var(--ink2); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; border-left: 1px solid var(--line); background: #fff; padding: 6px 0; font-size: 12px; white-space: nowrap; min-width: 0; overflow: hidden; }
.seg button:first-child { border-left: 0; }
.seg[data-wrap] { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); }
.seg[data-wrap] button:nth-child(4n+1) { border-left: 0; }
.seg[data-wrap] button:nth-child(n+5) { border-top: 1px solid var(--line); }
.seg button.on { background: var(--seal); color: #fff; font-weight: 700; }
.seg button:disabled { color: var(--ink3); background: #f6f6f6; cursor: default; }
.seg button.on:disabled { background: var(--seal2); color: #fff; }
.seg button:not(:disabled):not(.on):hover { background: var(--tint); }
.kidl { display: flex; flex-direction: column; gap: 10px; }
.kr .kn { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.kr .kn b { font-size: 13.5px; }
.kr .kn span { color: var(--ink2); font-size: 12px; }
@media (max-width: 1100px) { .seg button { font-size: 12px; } }
.left > .card, .right > .card { flex-shrink: 0; }
/* 시작 화면: 시작 나라 */
.startby { margin: 0 0 16px; }
.startby .seg { max-width: 300px; margin: 0 auto; }
.startby .seg button { padding: 8px 0; font-size: 13px; }
.regs { display: none; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; max-height: 36vh; overflow-y: auto; text-align: left; padding: 2px; }
.regs.on { display: grid; }
.regs button { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 6px 8px; font-size: 12.5px; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.regs button small { color: var(--ink3); font-size: 12px; white-space: nowrap; }
.regs button.on { border-color: var(--seal); color: var(--seal); font-weight: 700; background: var(--tint); }
.cta:disabled { opacity: 0.4; cursor: default; }

/* ---- 0.0.9: 모바일 탭 — 장면을 줄이고 가주 · 가문 · 실록 탭, 아래 단추 줄 고정 ---- */
.mtabs { display: none; }
.logpane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@media (max-width: 760px) {
  html, body { height: 100%; overflow: hidden; }
  #app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; min-height: 0; }
  .mid { display: contents; }
  .mhead { grid-row: 1; flex-wrap: nowrap; position: relative; }
  .hstat, .ttl { display: none; }
  .nation { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .warn.on { position: absolute; right: 10px; top: calc(100% + min(16vh, 120px) - 36px); z-index: 4; }   /* 장면 띠 오른쪽 아래 (알림은 위 가운데) */
  .strip { grid-row: 2; }
  .strip canvas { height: min(16vh, 120px); }
  .mtabs { grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: #fff; }
  .mtabs button { border: 0; background: none; padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--ink2); border-bottom: 2px solid transparent; }
  .mtabs button.on { color: var(--seal); border-bottom-color: var(--seal); }
  .mtabs button.new::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--seal); margin-left: 4px; vertical-align: middle; }
  .left, .right, .logpane { grid-row: 4; min-height: 0; overflow-y: auto; display: none; }
  .left, .right { padding: 12px; gap: 12px; }
  #app[data-tab="head"] .left, #app[data-tab="fam"] .right { display: flex; }
  #app[data-tab="log"] .logpane { display: flex; overflow: hidden; }
  .logwrap { display: flex; }
  .logbox { max-height: none; }
  .mfoot { grid-row: 5; position: static; }
}
/* 시작 화면: 나라 · 신분 줄 (0.0.21) */
.startby .srow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; max-width: 340px; margin: 0 auto; }
.startby .srow .seg { max-width: none; margin: 0; }
.startby .srow + .regs { margin-bottom: 8px; }
.startby .regs + .srow, .startby .srow + .srow { margin-top: 8px; }
.grps { grid-template-columns: 1fr 1fr; }
.dlg.birth .odds small { display: block; color: var(--ink3); font-weight: 400; font-size: 12px; margin-top: 2px; }

/* ---- 0.0.27: 넓은 PC 배치 + 가운데 큰 가계도 ---- */
.hband { display: none; }
.treepane { display: none; }
.stage { flex: 1; min-height: 0; display: flex; position: relative; }
.stage > .logpane { flex: 1; }
@media (max-width: 760px) {
  .stage { display: contents; }
}
@media (min-width: 1440px) {
  /* 왼쪽 칸 맨 위의 장면 */
  .left > .strip { flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #000; }
  .left > .strip canvas { height: 168px; }
  .left > .strip .banner { font-size: 13px; padding: 6px 10px; top: 8px; max-width: 92%; }
  /* 가운데 위 가주 띠: 프로필 · 방향 · 재산 · 명성 */
  .hband { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--side); align-items: stretch; flex-shrink: 0; overflow-x: auto; }
  .hband > .card { flex: 0 0 auto; }
  .hband .prof { display: flex; align-items: stretch; padding: 0; }
  .hband .prof .band { display: none; }
  .hband .prof .pbody { padding: 12px 14px; grid-template-columns: 72px minmax(170px, auto); gap: 12px; }
  .hband .prof #portrait { width: 72px; height: 72px; }
  .hband .prof .pinfo h2 { font-size: 18px; margin: 0 0 6px; }
  .hband .prof .kv { gap: 3px 10px; }
  .hband .prof #dirs { padding: 12px 14px; border-left: 1px solid var(--line); display: grid; grid-template-columns: auto; align-content: center; gap: 6px; width: 228px; }
  .hband .money { width: 250px; }
  .hband .barsc { width: 250px; align-self: flex-start; }
  /* 가계도 + 실록 */
  .stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 38%); }
  .treepane { display: block; position: relative; border-right: 1px solid var(--line); background: #faf7f0; overflow: hidden; min-height: 0; }
  .stage > .logpane { min-height: 0; }
}
/* 가계도 */
.tview { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.tview.grab { cursor: grabbing; }
.tcan { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tlines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tlines .ln { fill: none; stroke: #c9c0b0; stroke-width: 1.5; }
.tlines .sp { fill: none; stroke: var(--seal); stroke-width: 3; stroke-linejoin: round; }
.tnode { position: absolute; width: 84px; height: 86px; text-align: center; cursor: pointer; user-select: none; }
.tnode canvas { display: block; width: 44px; height: 44px; margin: 0 auto 3px; image-rendering: pixelated; border: 2px solid #d8d0c2; border-radius: 50%; background: #f4f2ee; }
.tnode b { display: block; font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnode span { display: block; font-size: 12px; color: var(--ink2); line-height: 1.2; }
.tnode i { position: absolute; top: 0; right: 4px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--seal); border-radius: 8px; padding: 1px 5px; }
.tnode i.o { background: #9a8f80; }
.tnode em { position: absolute; left: 4px; top: 0; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--seal); background: #fff; border: 1px solid var(--seal2); border-radius: 8px; padding: 0 5px; cursor: pointer; }
.tnode em.c { color: var(--ink2); border-color: var(--line); }
.tnode.spn canvas { border-color: var(--seal2); }
.tnode.now canvas { border: 3px solid var(--seal); box-shadow: 0 0 0 3px rgba(165, 28, 48, 0.18); }
.tnode.now b { color: var(--seal); }
.tnode.dead canvas { filter: grayscale(0.85); opacity: 0.6; }
.tnode.dead b { color: var(--ink2); font-weight: 600; }
.troot { position: absolute; width: 180px; text-align: center; font-size: 12px; }
.troot b { display: block; font-weight: 600; color: var(--ink2); }
.troot span { display: block; font-size: 12px; color: var(--ink3); }
.ttools { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; z-index: 2; }
.ttools button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--seal); }
.tpop { position: absolute; display: none; width: 200px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--seal); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); z-index: 3; }
.tpop.on { display: block; }
.tpop b { font-size: 14px; }
.tpop .rel { color: var(--seal); font-size: 12px; margin-left: 6px; }
.tpop div { color: var(--ink2); }

/* ---- 0.0.28: 시인성 · 방향/살림 효과 줄 · 휴대폰 결정 단추 ---- */
/* 0.0.35: 가계도 창 — 그림 · 목록 */
.dlg.tree .tsw { margin: 0 0 10px; width: 140px; }
.treeg { position: relative; height: min(68vh, 620px); border: 1px solid var(--line); border-radius: 8px; background: #faf7f0; overflow: hidden; }
#treec h3 .mini { margin-left: auto; }
@media (max-width: 760px) {
  #treeOv { padding: 8px; }
  .dlg.tree { padding: 14px 14px 12px; max-height: 96vh; }
  .treeg { height: 72vh; }
}
/* 0.0.34: 휴대폰 — 탭 넷(가주·살림·가문·실록), 가주 카드 촘촘히, 누르기 쉬운 크기 */
.homec { display: none; }
@media (max-width: 760px) {
  .mtabs { grid-template-columns: repeat(4, 1fr); }
  .homec { grid-row: 4; min-height: 0; overflow-y: auto; flex-direction: column; padding: 12px; gap: 12px; }
  #app[data-tab="home"] .homec { display: flex; }
  .homec > .card, .left > .card { flex-shrink: 0; }
  .prof .band { display: none; }
  .pbody { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 14px; }
  #portrait { width: 56px; height: 56px; }
  .pinfo h2 { font-size: 18px; margin: 2px 0 8px; }
  .pinfo .kv, .prof .plife { grid-template-columns: auto 1fr auto 1fr; gap: 5px 10px; }
  .prof .plife { margin: 0 14px 10px; padding-top: 8px; }
  #dirs { padding: 0 14px 12px; }
  .seg button { min-height: 34px; font-size: 13px; }
  .kr .trk { height: 32px; font-size: 13px; }
  .tog { padding: 8px 10px; font-size: 13px; }
  button.mini { padding: 6px 10px; font-size: 12.5px; }
  .mtabs button { padding: 11px 0; }
  .bars { grid-template-columns: 36px 1fr auto; }
}
/* 0.0.33: 혼인·자녀·상속·후계를 가주 카드 안으로 */
.prof .plife { margin: 0 14px 12px; padding-top: 10px; border-top: 1px solid var(--line); gap: 4px 14px; }
/* 넓은 PC: 사진·이름 | 방향 위에, 혼인·자녀·상속·후계는 그 아래 두 쌍씩. 1900px 넘으면 사진·이름 | 혼인… | 방향 세 칸 */
@media (min-width: 1440px) {
  .hband .prof { display: grid; grid-template-columns: auto auto; grid-template-areas: "body dirs" "life life"; }
  .hband .prof .pbody { grid-area: body; }
  .hband .prof #dirs { grid-area: dirs; }
  .hband .prof .plife { grid-area: life; margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); grid-template-columns: auto 1fr auto 1fr; gap: 3px 10px; }
}
@media (min-width: 1900px) {
  .hband .prof { grid-template-columns: auto auto auto; grid-template-areas: "body life dirs"; }
  .hband .prof .plife { padding: 12px 14px; border-top: 0; border-left: 1px solid var(--line); grid-template-columns: auto 1fr; align-content: center; min-width: 180px; max-width: 260px; }
}
/* 0.0.32: 자녀 진로 */
.kr .trk { margin-left: auto; font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
/* 0.0.29: 가문이 바꾼 나라의 흐름 */
.natd { margin-top: 8px; font-size: 12px; color: var(--seal); }
.ptip { font-size: 12px; color: var(--ink2); line-height: 1.4; margin-top: 4px; }
.plan .ptip { grid-column: 2; margin-top: 0; }
.hband .prof #dirs .ptip { max-width: 200px; }
@media (max-width: 760px) {
  .choices { max-height: 38vh; overflow-y: auto; gap: 6px; }
  .choices button { padding: 7px 10px; min-height: 40px; }
  .choices button .e { font-size: 12px; }
}
/* 저장 칸 고르기 (이어하기) */
.slots { display: flex; flex-direction: column; gap: 6px; max-width: 320px; margin: 10px auto 0; }
.slots:empty { display: none; }
.slots button { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.slots button:hover { border-color: var(--seal); background: var(--tint); }
.slots button b { font-size: 14px; }
.slots button span { font-size: 12px; color: var(--ink2); }