/* 만세력 도구형: 맨 위 입력 한 줄 + 왼쪽 명부 줄 + 명식 판. 판은 흰 종이 한 장, 칸은 가는 선으로만 나눠요(그림자·색 상자 없음).
   색은 오행 칸과 강조색 하나(--accent)에만 써요. 변수만 바꾸면 전체가 바뀌어요. */
:root {
  --page: #eceef1;
  --sheet: #ffffff;
  --sub: #f5f6f8;
  --hover: #eff1f4;
  --rule: #e2e5e9;
  --rule-2: #c7ccd3;
  --ink: #14171c;
  --ink-fg: #ffffff;
  --text: #14171c;
  --muted: #4c535d;
  --faint: #79808a;
  --accent: #2356c7;
  --accent-bg: #edf2fc;
  --me-bg: #f3f5f9;
  --bar: #14171c;
  --bar-fg: #ffffff;
  /* 오행 칸: 양은 꽉 채운 칸(글자 --on-*), 음은 옅은 칸에 색 테두리(글자 --t-*) */
  --wood: #2e8a62; --fire: #cf463c; --earth: #c58d2a; --metal: #8a94a1; --water: #22304b;
  --on-wood: #ffffff; --on-fire: #ffffff; --on-earth: #251a04; --on-metal: #ffffff; --on-water: #ffffff;
  --t-wood: #22744f; --t-fire: #b9372e; --t-earth: #94650f; --t-metal: #59636f; --t-water: #273a5e;
  --radius: 6px;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --han: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --code: ui-monospace, SFMono-Regular, Consolas, "D2Coding", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --page: #0c0e11; --sheet: #15181c; --sub: #1a1e23; --hover: #20252b; --rule: #262b32; --rule-2: #39404a;
    --ink: #cdd3db; --ink-fg: #111418; --text: #e5e8ec; --muted: #adb4bd; --faint: #848c96;
    --accent: #7ba2f6; --accent-bg: #172238; --me-bg: #1a1f26; --bar: #07080a; --bar-fg: #e5e8ec;
    --wood: #3a9c70; --fire: #da584d; --earth: #d29d3d; --metal: #8e99a7; --water: #3a5182;
    --on-wood: #ffffff; --on-fire: #ffffff; --on-earth: #1f1603; --on-metal: #111418; --on-water: #ffffff;
    --t-wood: #6ccf9f; --t-fire: #f08a80; --t-earth: #e6bd68; --t-metal: #b0bac6; --t-water: #95abdc;
    color-scheme: dark;
  }
}
:root[data-mode="dark"] {
  --page: #0c0e11; --sheet: #15181c; --sub: #1a1e23; --hover: #20252b; --rule: #262b32; --rule-2: #39404a;
  --ink: #cdd3db; --ink-fg: #111418; --text: #e5e8ec; --muted: #adb4bd; --faint: #848c96;
  --accent: #7ba2f6; --accent-bg: #172238; --me-bg: #1a1f26; --bar: #07080a; --bar-fg: #e5e8ec;
  --wood: #3a9c70; --fire: #da584d; --earth: #d29d3d; --metal: #8e99a7; --water: #3a5182;
  --on-wood: #ffffff; --on-fire: #ffffff; --on-earth: #1f1603; --on-metal: #111418; --on-water: #ffffff;
  --t-wood: #6ccf9f; --t-fire: #f08a80; --t-earth: #e6bd68; --t-metal: #b0bac6; --t-water: #95abdc;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.55; letter-spacing: -0.005em; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dim { color: var(--faint); }
.small { font-size: 12px; }
.nw { white-space: nowrap; }
.boot { padding: 40px; color: var(--muted); }
.offscreen { position: fixed; left: -9999px; top: 0; }
.hint { font-size: 12px; line-height: 1.5; color: var(--faint); }
.cap { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--faint); }
.cap.first { margin-top: 0; margin-bottom: 10px; }
.lnk { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.lnk:disabled { color: var(--faint); text-decoration: none; }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--rule-2); border-radius: 3px; font-family: var(--sans); font-size: 11px; line-height: 16px; text-align: center; color: var(--muted); background: var(--sheet); }

/* 단추: 먹 한 가지와 테두리 단추 */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--ink-fg); font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.btn:hover:not(:disabled) { opacity: .88; }
.btn.ghost { background: var(--sheet); color: var(--text); border-color: var(--rule-2); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); opacity: 1; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; font-weight: 600; }
.nb { min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--sheet); font-size: 14px; line-height: 1; }
.nb:hover { background: var(--hover); }
.nb.wide { font-size: 12px; font-weight: 600; }

/* 샘플 사이트 테마 띠 */
.demo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 7px 20px; background: var(--sub); color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--rule); }
.demo-strip a { text-decoration: none; }
.demo-strip a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.demo-strip .back { margin-left: auto; color: var(--text); font-weight: 700; }
/* 휴대폰: 안내 글은 한 줄을 다 쓰고, 테마 이름들은 다음 줄에 같이 놓여요 */
@media (max-width: 899px) { .demo-strip > span { flex-basis: 100%; } }

/* 위 막대 */
.top { background: var(--bar); color: var(--bar-fg); }
.top-in { display: flex; align-items: center; gap: 20px; max-width: 1600px; height: 46px; margin: 0 auto; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; }
.brand b { font-size: 15px; font-weight: 800; }
.brand small { padding-left: 9px; border-left: 1px solid currentColor; font-size: 12.5px; font-weight: 600; opacity: .75; }
.seal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 3px; background: var(--bar-fg); color: var(--bar); font-family: var(--han); font-weight: 700; font-size: 14px; }
.top-day { font-size: 13px; white-space: nowrap; opacity: .85; }
.top-day span { margin-right: 4px; opacity: .7; }
.top-a { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid currentColor; border-radius: var(--radius); background: none; color: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: .9; }
.tbtn:hover { opacity: 1; }
.tbtn svg { display: block; }

/* 맨 위 가로 한 줄: 새 명식 입력 */
.entry { background: var(--sheet); border-bottom: 1px solid var(--rule); }
.entry-bar { display: none; }
.entry-in { max-width: 1600px; margin: 0 auto; padding: 12px 20px 10px; }
.pform { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
.entry-k { display: grid; align-content: start; gap: 2px; min-width: 64px; padding-top: 2px; font-size: 13px; font-weight: 800; }
.entry-k .lnk { justify-self: start; font-size: 12px; }
.entry-note { margin-top: 8px; }
.f { display: grid; gap: 4px; min-width: 0; align-content: start; }
.f > span:first-child, .f > label:first-child, .f-k { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.f small { font-weight: 500; }
.f-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.f input:not([type="checkbox"]):not([type="radio"]):not([data-seg]), .f select, .rsearch, .rsort, .memo-form input, .record textarea, .rform select {
  height: 36px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--sheet); color: var(--text); font-size: 14px; font-weight: 500;
}
.f input::placeholder, .rsearch::placeholder, .memo-form input::placeholder, .record textarea::placeholder, .nbox input::placeholder { color: var(--faint); opacity: .75; }
.f input:disabled { background: var(--sub); color: var(--faint); }
.f input:focus, .f select:focus, .rsearch:focus, .rsort:focus, .memo-form input:focus, .record textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
select { appearance: none; -webkit-appearance: none; padding-right: 28px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2379808a' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.f-name input { width: 140px !important; }
.f-city input { width: 120px !important; }
/* 숫자 칸 묶음: 해·달·날 / 시·분 */
.nbox { display: inline-flex; align-items: center; height: 36px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--sheet); white-space: nowrap; }
.nbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nbox input { width: 1.7em; height: 32px; padding: 0; border: 0; background: none; color: var(--text); font-size: 15px; font-weight: 600; text-align: right; }
.nbox input[data-seg="y"] { width: 2.9em; }
.nbox input:focus { outline: none; }
.nbox input:disabled { color: var(--faint); }
.nbox input[aria-invalid="true"] { color: var(--t-fire); }
.nbox i { margin: 0 6px 0 2px; font-style: normal; font-size: 12.5px; color: var(--faint); }
.nbox i:last-child { margin-right: 0; }
.nbox:has([aria-invalid="true"]) { border-color: var(--t-fire); box-shadow: 0 0 0 1px var(--t-fire); }
/* 글자 토글: 고른 쪽을 먹색으로 뒤집어요 */
.seg { display: inline-flex; flex: none; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
.seg button { height: 34px; padding: 0 11px; border: 0; border-left: 1px solid var(--rule-2); background: var(--sheet); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ink-fg); }
.f > .seg { justify-self: start; }
.tgl { height: 30px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--sheet); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tgl:hover { background: var(--hover); }
.tgl[aria-pressed="true"] { color: var(--ink-fg); border-color: var(--ink); background: var(--ink); }
.f-line .tgl { height: 36px; flex: none; }
.sj-now { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.sj-now:empty { display: none; }
/* 시진 고르기: 펼침 판 */
.sj { position: relative; flex: none; }
.sj summary { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--sheet); color: var(--muted); font-size: 13px; font-weight: 600; list-style: none; cursor: pointer; white-space: nowrap; }
.sj summary::-webkit-details-marker { display: none; }
.sj summary::after { content: "▾"; font-size: 11px; color: var(--faint); }
.sj[open] summary { border-color: var(--ink); color: var(--text); }
.sj:not([open]) .sj-pop { display: none; }
.sj-pop { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; display: grid; grid-template-columns: repeat(4, 96px); padding: 6px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--sheet); }
.sj-pop button { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; padding: 6px 8px; border: 0; border-radius: 3px; background: none; color: var(--text); text-align: left; }
.sj-pop button b { grid-row: span 2; font-family: var(--han); font-size: 18px; font-weight: 600; }
.sj-pop button span { font-size: 12.5px; font-weight: 700; }
.sj-pop button small { font-size: 11px; color: var(--faint); }
.sj-pop button:hover:not(:disabled) { background: var(--hover); }
.sj-pop button[aria-pressed="true"] { background: var(--ink); color: var(--ink-fg); }
.sj-pop button[aria-pressed="true"] small { color: inherit; opacity: .75; }
.f-actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
.pform > .f-actions { align-self: flex-start; padding-top: 21px; }
.f-err { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--t-fire); }
.f input[aria-invalid="true"], .f select[aria-invalid="true"] { border-color: var(--t-fire); box-shadow: 0 0 0 1px var(--t-fire); }

/* 틀: 왼쪽 명부 줄 + 명식 판 */
.wrap { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1600px; margin: 0 auto; padding: 20px; }
.rail { min-width: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.rail > * { padding: 16px; border-bottom: 1px solid var(--rule); }
.rail > *:last-child { border-bottom: 0; }
.rail-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rail-h h2 { font-size: 14px; font-weight: 800; }
.rail-h h2 small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--faint); }
.pane { min-width: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.keys { font-size: 11.5px; line-height: 2; color: var(--faint); }

/* 명부 */
.rtools { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px; margin-bottom: 8px; }
.rsearch, .rsort { height: 32px; font-size: 13px; }
.tagbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tagbar:empty { display: none; }
.tg { height: 26px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--sheet); color: var(--muted); font-size: 12px; }
.tg[aria-pressed="true"] { color: var(--ink-fg); border-color: var(--ink); background: var(--ink); }
#roster { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--rule); }
.roster li { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); }
.roster li.on { background: var(--accent-bg); }
.roster .pick { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 8px 6px; border: 0; background: none; text-align: left; }
.roster .pick:hover { background: var(--hover); }
.roster li.on .pick:hover { background: none; }
.roster .pick b { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; }
.roster li.on .pick b { color: var(--accent); }
.roster .pick span { font-size: 12px; color: var(--faint); }
.roster .pick em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.has-note { font-style: normal; font-size: 11px; font-weight: 500; color: var(--faint); }
.roster .del { flex: none; min-width: 32px; padding: 0 6px; border: 0; background: none; color: var(--faint); font-size: 16px; }
.roster .del:hover { color: var(--t-fire); }
.del-ask { display: flex; align-items: center; gap: 2px; padding-right: 2px; }
.del-ask .del { min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--muted); }
.del-ask .del.yes { border-color: var(--t-fire); color: var(--t-fire); }
.io { display: flex; gap: 14px; margin-top: 10px; }
.store-note { margin-top: 8px; }
.store-note a { color: var(--muted); text-underline-offset: 3px; }

/* 계산 설정 */
.settings summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 800; }
.settings summary::-webkit-details-marker { display: none; }
.settings summary small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; text-align: right; }
.settings summary::after { content: "+"; color: var(--faint); font-weight: 500; }
.settings[open] summary::after { content: "−"; }
.sform { display: grid; gap: 12px; margin-top: 12px; }
.sform fieldset { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sform legend { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sform fieldset:disabled .radio { opacity: .55; }
.sform .f-actions > .btn { flex: 1; }
.radio { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.radio input { margin: 3px 0 0; accent-color: var(--ink); }
.radio b { display: block; font-size: 13px; }
.radio small { display: block; font-size: 12px; line-height: 1.45; color: var(--faint); }
.radio:has(input:checked) { border-color: var(--ink); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }

/* 명식 판: 사람 머리 · 시각 보정 줄 · 탭 · 내용 */
.blank { padding: 60px 28px; text-align: center; }
.blank h1 { font-size: 18px; margin-bottom: 8px; }
.blank p + p { margin-top: 14px; }
.ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: start; padding: 20px 24px 16px; }
.ph h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ph-day { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ph-day span { margin-left: 2px; font-family: var(--han); font-weight: 600; color: var(--text); }
.ph-line { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.ph-line > span + span::before { content: "·"; margin: 0 8px; color: var(--rule-2); }
.ph-saved { color: var(--accent); font-weight: 600; }
.ph-rule { margin-top: 4px; font-size: 12px; color: var(--accent); font-weight: 600; }
.ph-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 480px; }
.ph-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.ph-note::before { content: "예시"; margin-right: 8px; color: var(--accent); font-weight: 800; }
/* 시각 보정 줄: 입력 시각이 시주가 되기까지 */
.chain { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: start; padding-top: 14px; border-top: 1px solid var(--rule); }
.chain-k { padding-top: 2px; font-size: 12px; font-weight: 800; color: var(--text); white-space: nowrap; }
.chain ol { display: flex; flex-wrap: wrap; gap: 8px 0; }
.chain li { display: grid; gap: 0; padding-right: 30px; position: relative; }
.chain li:not(:last-child)::after { content: "→"; position: absolute; right: 9px; top: 15px; color: var(--faint); font-size: 13px; }
.chain li span { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.chain li b { font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.chain li small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.chain li.out b { color: var(--accent); }
.chain-none { font-size: 13px; color: var(--muted); }
.chain-warn { grid-column: 2; display: grid; gap: 2px; font-size: 12px; color: var(--t-fire); }
.tabs { border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); background: var(--sheet); }
.tabs-in { display: flex; gap: 2px; padding: 0 16px; }
.tab { position: relative; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab .ts { display: none; }
.tab[aria-selected="true"] { color: var(--text); font-weight: 800; }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--ink); }
.tabpanel { padding: 22px 24px 28px; }
.loading { padding: 40px 0; text-align: center; color: var(--muted); }
.loading .bar { position: relative; display: block; width: 160px; height: 2px; margin: 0 auto 14px; overflow: hidden; background: var(--rule); }
.loading .bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--accent); animation: slide 1s linear infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .loading .bar::after { animation: none; } }

/* 명식 탭: 넓은 화면은 두 줄기(각자 쌓아서 빈칸이 생기지 않아요), 좁으면 한 줄기 */
.deck { display: flex; flex-direction: column; gap: 30px; }
.stack { display: contents; }
.o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; } .o6 { order: 6; }
.o7 { order: 7; } .o8 { order: 8; } .o9 { order: 9; } .o10 { order: 10; } .o11 { order: 11; }
.sec { min-width: 0; }
.tabpanel > .sec + .sec { margin-top: 34px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--rule-2); }
.sec-h h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; }
.sec-h h2 small { font-size: 12.5px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.sec-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.pc { height: 26px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--sheet); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pc:hover { color: var(--text); border-color: var(--ink); }
.sub-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 22px 0 8px; font-size: 13.5px; font-weight: 800; }
.sub-h small { font-size: 12px; font-weight: 500; color: var(--faint); }
.sub-h.first { margin-top: 0; }

/* 간지 칸: 오행 색. 양은 꽉 채우고, 음은 옅은 바탕에 색 테두리 */
.e-wood { --el: var(--wood); --el-on: var(--on-wood); --el-t: var(--t-wood); }
.e-fire { --el: var(--fire); --el-on: var(--on-fire); --el-t: var(--t-fire); }
.e-earth { --el: var(--earth); --el-on: var(--on-earth); --el-t: var(--t-earth); }
.e-metal { --el: var(--metal); --el-on: var(--on-metal); --el-t: var(--t-metal); }
.e-water { --el: var(--water); --el-on: var(--on-water); --el-t: var(--t-water); }
.gz { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius); font-family: var(--han); font-size: 30px; font-weight: 600; line-height: 1; }
.gz.yang { background: var(--el); color: var(--el-on); }
.gz.yin { background: color-mix(in srgb, var(--el) 14%, var(--sheet)); color: var(--el-t); box-shadow: inset 0 0 0 1.5px var(--el); }
.gz.sm { width: 36px; height: 36px; font-size: 19px; }
.gz.xs { width: 24px; height: 24px; font-size: 14px; border-radius: 3px; }
.gz.xs.yin { box-shadow: inset 0 0 0 1px var(--el); }
.gz.none { background: var(--sub); color: var(--faint); font-family: var(--sans); font-size: 13px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.t-wood { color: var(--t-wood); } .t-fire { color: var(--t-fire); } .t-earth { color: var(--t-earth); } .t-metal { color: var(--t-metal); } .t-water { color: var(--t-water); }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; vertical-align: -1px; background: var(--el, var(--muted)); }
.pairgz { display: inline-flex; gap: 2px; vertical-align: middle; }
.pairgz + small { margin-left: 6px; font-size: 12px; color: var(--faint); }

/* 원국 표: 가로줄만, 일주 칸은 옅은 바탕 */
table { border-collapse: collapse; width: 100%; }
.won { table-layout: fixed; }
.won th, .won td { padding: 7px 4px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.won thead th { padding: 6px 4px 8px; font-size: 13px; font-weight: 700; border-bottom-color: var(--rule-2); }
.won thead th:first-child { width: 76px; }
.won tbody th { width: 76px; padding-left: 0; font-size: 12px; font-weight: 600; color: var(--faint); text-align: left; white-space: nowrap; }
.won tbody th small { font-size: 11px; font-weight: 500; }
.won .me { background: var(--me-bg); }
.won thead th.me { box-shadow: inset 0 3px 0 var(--ink); }
.won tr.god td { padding-top: 2px; font-size: 13.5px; font-weight: 700; }
.won tr.glyph td, .won tr.glyph th { padding: 8px 4px 4px; border-bottom: 0; }
.won tr.glyph th { padding-left: 0; }
.won tr.glyph .gz { display: grid; margin: 0 auto; }
.won .rd { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.won tr.two td small { display: block; font-size: 11.5px; }
.hs { display: inline-flex; align-items: baseline; gap: 1px; margin: 0 3px; white-space: nowrap; }
.hs b { font-family: var(--han); font-size: 16px; font-weight: 600; }
.hs i { font-style: normal; font-size: 10.5px; color: var(--faint); }
.hs.main b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.won tr.names td { padding: 6px 4px; vertical-align: top; }
.nl { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 8px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.nl > span { white-space: nowrap; }
dd.nl { justify-content: flex-start; font-size: 13.5px; color: var(--text); }

/* 키-값 */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; font-size: 13.5px; }
.kv dt { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.kv dd { min-width: 0; }
.kv.tight { gap: 4px 14px; }
.gates { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.gate { color: var(--faint); }
.gate.on { color: var(--text); font-weight: 700; }
.warn { margin-top: 12px; padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; }

/* 오행·십성 가로 막대 */
.bars { max-width: 640px; }
.bars th, .bars td { padding: 6px 0; border-bottom: 1px solid var(--rule); text-align: left; font-size: 13px; white-space: nowrap; }
.bars thead th { padding-top: 0; font-size: 11.5px; font-weight: 600; color: var(--faint); border-bottom-color: var(--rule-2); }
.bars tbody th { width: 76px; font-weight: 600; }
.bars .n { width: 58px; padding-left: 8px; text-align: right; }
.bars .n + .lv, .bars thead .n + th { padding-left: 14px; }
.bars .lv { width: 44px; color: var(--muted); }
.bars.gods tbody th { width: 52px; }
.mtc { width: auto; padding-left: 4px; }
.mt { display: block; height: 8px; background: var(--sub); border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.mt-f { display: block; height: 100%; width: 0; background: var(--el, var(--muted)); }

/* 합충형파해 */
.rel th, .rel td { padding: 7px 0; border-bottom: 1px solid var(--rule); text-align: left; font-size: 13px; vertical-align: top; }
.rel th { width: 96px; padding-right: 8px; font-weight: 700; }
.rel td + td { padding-left: 10px; text-align: right; }

/* 대운·세운 줄: 왼쪽에서 오른쪽으로 시간 순서 */
.strip { display: grid; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.strip.n10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.strip.n12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 8px 2px; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--sheet); color: var(--text); text-align: center; }
.col:hover { background: var(--hover); }
.col-h { display: grid; justify-items: center; margin-bottom: 2px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.col-h small { font-size: 10.5px; font-weight: 500; color: var(--faint); }
.col-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0 5px; border-radius: 2px; background: var(--ink); color: var(--ink-fg); font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.col-g { font-size: 12px; color: var(--muted); line-height: 1.3; }
.col-f { margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.col.now { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--ink); }
.col.sel, .col.now.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.fv { white-space: nowrap; }
.fv-favorable { color: var(--t-wood); font-weight: 700; }
.fv-unfavorable { color: var(--t-fire); font-weight: 700; }
.fv-mixed { color: var(--t-earth); font-weight: 600; }

/* 앞으로 열두 달: 왼쪽 줄 이름 + 열두 칸 */
.band { display: grid; grid-template-columns: 40px minmax(0, 1fr); border-top: 1px solid var(--rule); }
.band-k, .mcol { display: grid; grid-template-rows: 34px 32px 34px 48px; }
.band.with-r .band-k, .band.with-r .mcol { grid-template-rows: 34px 32px 34px 48px 26px; }
.band-k { align-items: center; border-bottom: 1px solid var(--rule); font-size: 11.5px; font-weight: 600; color: var(--faint); }
.band-m { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-left: 1px solid var(--rule); }
.mcol { position: relative; justify-items: center; align-items: center; min-width: 0; padding: 0 1px; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--sheet); color: var(--text); text-align: center; }
.mcol:hover { background: var(--hover); }
.mcol.now { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--ink); }
.mc-h { display: grid; justify-items: center; font-size: 12.5px; font-weight: 700; line-height: 1.15; }
.mc-h small { font-size: 10px; font-weight: 500; color: var(--faint); }
.mc-g { display: flex; gap: 2px; }
.mc-t { font-size: 11px; line-height: 1.25; color: var(--muted); }
.mc-c { display: grid; justify-items: center; align-content: center; font-size: 11px; line-height: 1.3; }
.ks { font-style: normal; font-weight: 700; }
.ks-rise { color: var(--accent); } .ks-change { color: var(--text); } .ks-exit { color: var(--t-earth); } .ks-caution { color: var(--t-fire); }
.mc-r .gr { font-size: 14px; }
.z { font-style: normal; color: var(--faint); }

/* 자세히(대운·세운·월운·명반 칸을 눌렀을 때) */
.drill { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin-top: 14px; padding: 14px 44px 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.drill .dg { display: grid; justify-items: center; align-content: start; gap: 4px; }
.drill .dg small { color: var(--faint); font-size: 12px; }
.x { position: absolute; top: 10px; right: 0; width: 30px; height: 30px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--sheet); font-size: 16px; line-height: 1; }
.x:hover { background: var(--hover); }

/* 일진 */
.dnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 14px; }
.dnav .nbox { height: 28px; padding: 0 6px; }
.dnav .nbox input { height: 26px; font-size: 13px; }
.daily-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.dj { display: flex; flex-direction: column; gap: 3px; }
.score { text-align: right; white-space: nowrap; }
.score b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.score span { color: var(--faint); }
.score em { display: block; font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--muted); }
.msg { margin: 12px 0; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.msg p + p { margin-top: 6px; }
.dt th, .dt td { padding: 6px 4px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; font-size: 13px; }
.dt thead th { font-size: 11.5px; font-weight: 600; color: var(--faint); border-bottom-color: var(--rule-2); white-space: nowrap; }
.dt .n { text-align: right; white-space: nowrap; }
.dt .wrap { font-size: 12.5px; color: var(--muted); }

/* 자미두수 명반 */
.zgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(120px, auto)); max-width: 880px; border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); }
.zc { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 7px 8px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); background: var(--sheet); }
.zc.year { background: var(--sub); }
.zc.decade { box-shadow: inset 0 0 0 2px var(--ink); }
.zc.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.zh { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; font-size: 12.5px; }
.zdr { padding: 0; border: 0; background: none; color: var(--text); font-weight: 800; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.zdr:hover, .zdr[aria-pressed="true"] { color: var(--accent); }
.zc.life .zdr { color: var(--accent); }
.zh .fl { font-family: var(--han); font-size: 11px; font-weight: 700; padding: 0 3px; border: 1px solid var(--ink); border-radius: 2px; line-height: 15px; }
.zg { margin-left: auto; font-family: var(--han); font-size: 12px; color: var(--faint); }
.zm, .za { display: flex; flex-wrap: wrap; gap: 1px 7px; }
.st { white-space: nowrap; }
.st.major { font-size: 14px; font-weight: 800; }
.st.aux { font-size: 12px; color: var(--muted); }
.st sub { margin-left: 1px; font-size: 10px; color: var(--faint); vertical-align: baseline; }
.st .tr { display: inline-block; margin-left: 2px; padding: 0 2px; border: 1px solid currentColor; border-radius: 2px; color: var(--accent); font-size: 10.5px; font-weight: 700; line-height: 14px; vertical-align: 1px; }
.st .tr-lu { color: var(--t-wood); }
.st .tr-ji { color: var(--t-fire); }
.zn { font-size: 11px; line-height: 1.4; color: var(--faint); }
.zf { display: flex; justify-content: space-between; gap: 6px; margin-top: auto; font-size: 11px; color: var(--muted); }
.zcenter { grid-column: 2 / 4; grid-row: 2 / 4; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 14px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); background: var(--sub); }
.zb { font-family: var(--han); font-size: 22px; font-weight: 700; }
.zcenter .kv { font-size: 12.5px; }
.zcenter .kv dt { font-size: 12px; }
.zmeta { display: grid; justify-items: center; font-size: 11px; color: var(--faint); }
.zmeta span { white-space: nowrap; }
.zfocus th, .zfocus td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: 13px; }
.zfocus th { width: 140px; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.zfocus td:last-child { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* 궁합 */
.pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.pickrow .f-k { margin-right: 4px; }
.cmp { margin-top: 4px; }
.cmp th, .cmp td { padding: 8px 4px; border-bottom: 1px solid var(--rule); text-align: center; }
.cmp thead th { font-size: 12px; font-weight: 600; color: var(--faint); border-bottom-color: var(--rule-2); }
.cmp tbody th { text-align: left; font-size: 13.5px; white-space: nowrap; }
.cmp td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.cmp-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 16px 0 6px; }
.cmp-score b { font-size: 30px; font-weight: 800; }
.cmp-score span { color: var(--muted); }
.cmp-items { margin-bottom: 16px; border-top: 1px solid var(--rule-2); }
.cmp-items li { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ci-h { display: grid; grid-template-columns: 96px 52px minmax(0, 220px); align-items: center; gap: 10px; font-size: 13.5px; }
.ci-h span { text-align: right; }
.cmp-items p { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* 만세력 월간표 */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.cgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cw { padding: 5px; font-size: 12px; font-weight: 600; color: var(--faint); text-align: center; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule-2); background: var(--sub); }
.cw.sun { color: var(--t-fire); }
.cd { position: relative; display: grid; align-content: start; gap: 1px; min-width: 0; min-height: 70px; padding: 5px 6px; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--sheet); text-align: left; }
.cd:hover { background: var(--hover); }
.cd.blank { background: var(--sub); }
.cd .cn { font-weight: 700; font-size: 13.5px; }
.cd.sun .cn { color: var(--t-fire); }
.cd .cl { font-size: 11px; color: var(--faint); }
.cd .cg { font-family: var(--han); font-size: 14.5px; font-weight: 600; }
.cd .ct { font-size: 11px; font-weight: 700; color: var(--accent); }
.cd .cs { position: absolute; top: 5px; right: 5px; padding: 0 3px; border: 1px solid var(--rule-2); border-radius: 2px; font-size: 10px; color: var(--muted); }
.cd.today { box-shadow: inset 0 0 0 2px var(--ink); }
.cd.picked { background: var(--accent-bg); }
.cd.match .cn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.cal-detail + .cal-detail { margin-top: 18px; }
.ym { min-width: 64px; text-align: center; font-weight: 700; font-size: 13.5px; }

/* AI에 넘기기 */
.ai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 920px; }
.ai > * { min-width: 0; }
.ai-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ai-parts legend { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ai-parts .chk, .ai-ask { align-items: flex-start; color: var(--text); }
.ai-parts .chk input, .ai-ask input { margin-top: 3px; }
.ai-parts .chk span, .ai-ask span { display: grid; }
.chk.off { color: var(--faint); }
.ai-meta { margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.ai-meta b { color: var(--text); }
.ai-out pre { margin: 0; max-height: 300px; overflow: auto; padding: 10px 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); font-family: var(--code); font-size: 12px; line-height: 1.55; white-space: pre; tab-size: 4; color: var(--muted); }

/* 해석 메모 */
.memo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 920px; }
.memo-log { display: grid; gap: 10px; max-height: 480px; overflow: auto; padding-right: 4px; }
.mq, .ma { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.lbl { padding-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--faint); }
.mq p { font-weight: 700; }
.ma > div { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.sample { justify-self: start; font-size: 11px; color: var(--faint); border: 1px solid var(--rule-2); border-radius: 3px; padding: 0 6px; }
.starters { display: grid; gap: 6px; }
.starter { justify-self: start; max-width: 100%; padding: 7px 12px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--sheet); font-size: 13px; text-align: left; }
.starter::before { content: "→ "; color: var(--accent); }
.starter:hover { background: var(--hover); }
.memo-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* 도구 */
.tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 920px; }
.tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.tf > .f { flex: 0 1 auto; }
.tf .f input:not([data-seg]) { min-width: 200px; }
.tf .chk { height: 36px; }
.tool-out { padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cities .tz { white-space: nowrap; color: var(--muted); }

/* 상담 기록 */
.record { display: grid; gap: 10px; }
.record textarea { height: auto; min-height: 130px; padding: 8px 10px; line-height: 1.55; resize: vertical; }

/* 직장운 시기·재회운: 행을 눌러 펼치는 표와 신호 표 */
.conclusion { margin-bottom: 4px; padding: 12px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lead { font-size: 14px; line-height: 1.6; }
.lead b { margin-right: 4px; font-weight: 800; color: var(--accent); }
.conclusion .kv { margin-top: 8px; font-size: 13px; }
.conclusion .cap { margin-top: 8px; }
.kv.natal { margin-top: 14px; }
.tt > * > tr > th, .tt > * > tr > td { padding: 7px 8px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; font-size: 13px; }
.tt > thead > tr > th { font-size: 11.5px; font-weight: 600; color: var(--faint); border-bottom-color: var(--rule-2); white-space: nowrap; }
.tt > tbody > tr > th { text-align: left; font-weight: 700; white-space: nowrap; }
.tt > tbody > tr.now > th, .tt > tbody > tr.now > td { background: var(--accent-bg); }
.tt > tbody > tr.open > th, .tt > tbody > tr.open > td { border-bottom-color: transparent; }
.tt .pairgz + small { display: inline; }
.tt .ta-l { display: grid; gap: 2px; text-align: left; line-height: 1.5; }
.tt .cnt { font-weight: 800; }
.tt .stage { font-size: 12px; }
.mn-y { display: block; font-size: 11px; white-space: nowrap; }
.sl { display: block; }
.xb, .xn { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-align: left; white-space: nowrap; }
.xb::before, .xn::before { content: "▸"; font-size: 11px; color: var(--faint); }
.xn::before { visibility: hidden; }
.xb[aria-expanded="true"]::before { content: "▾"; color: var(--accent); }
.xb:hover { color: var(--accent); }
.tt > tbody > tr.xrow > td { padding: 0; background: var(--sub); text-align: left; }
.xin { padding: 10px 12px 12px; }
.xmeta { margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.k { display: inline-block; padding: 0 5px; border: 1px solid var(--rule-2); border-radius: 3px; font-size: 11.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.k-rise, .k-reunion { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.k-change, .k-exit, .k-contact, .k-emotion, .k-moving { border-color: var(--ink); }
.k-caution, .k-conflict, .k-ended { border-style: dashed; border-color: var(--t-fire); color: var(--t-fire); }
.k-context, .k-gate, .k-base { color: var(--muted); }
.sg th, .sg td { padding: 7px 6px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: 13px; }
.sg thead th { font-size: 11.5px; font-weight: 600; color: var(--faint); border-bottom-color: var(--rule-2); white-space: nowrap; }
.sg .wh, .sg .kc, .sg .dir { white-space: nowrap; }
.sg .rule { min-width: 130px; font-weight: 700; }
.sg .fact { width: 24%; min-width: 140px; color: var(--muted); }
.sg .read { min-width: 200px; }
.dir-up { color: var(--t-wood); }
.dir-down { color: var(--t-fire); }
.dir-up::before { content: "▲ "; }
.dir-down::before { content: "▼ "; }
.dir-mixed::before { content: "◆ "; }
.dir-unknown { color: var(--faint); }
.gr { font-size: 15px; line-height: 1; }
.gr-strong, .gr-weak { color: var(--accent); }
.gr-quiet { color: var(--faint); }
.sustain { margin-top: 10px; font-size: 13.5px; }
.grade-note { margin-top: 14px; color: var(--muted); font-size: 12.5px; }
.copybar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.copybar .cap { margin-top: 0; }
.lock-note { padding: 10px 0; border-top: 1px dashed var(--rule-2); border-bottom: 1px dashed var(--rule-2); font-size: 13px; color: var(--muted); }
.lock-note p + p { margin-top: 6px; }
.gate-note .btn { margin-top: 8px; }
.term { color: var(--faint); font-weight: 500; font-size: .92em; }
.mk { margin-left: 4px; font-size: 12px; font-weight: 800; color: var(--accent); }
.hw { display: inline-block; }
/* 좁은 폭에서 아래 줄로 내리는 신호 칸: 넓은 화면에서는 숨겨요 */
.tt > tbody > tr.below { display: none; }
.bl { display: flex; align-items: baseline; gap: 8px; text-align: left; }
.bl + .bl { margin-top: 3px; }
.bl-k { flex: none; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.rform { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 12px 18px; align-items: end; }
.rform .wide { grid-column: span 2; }
.rform .wide input { min-width: 220px; }
.rform .f-actions { grid-column: 1 / -1; }
.rform + .cap { margin-bottom: 14px; }

/* 바닥글 */
.foot { padding: 6px 20px 32px; color: var(--faint); font-size: 12px; }
.foot-in { max-width: 1560px; margin: 0 auto; }
.legal-foot { margin-top: 8px; display: grid; gap: 4px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legal-links a { color: var(--muted); text-underline-offset: 3px; }
.legal-links b { color: var(--text); }
.biz { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 440px); padding: 10px 16px; border-radius: var(--radius); background: var(--ink); color: var(--ink-fg); font-size: 13.5px; }

/* 인쇄용 상담지: 화면에서는 숨겨요 */
.print-sheet { display: none; }

/* ── 화면 폭에 따라 ─────────────────────────────────────── */
/* 명식 판이 넓으면 두 줄기로 나눠 쌓아요(왼쪽 원국·열두 달·운·명반, 오른쪽 분포·강약·관계·일진·계산 기준·기록) */
@media (min-width: 1280px) {
  .deck { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
  .stack { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
  .sb .kv { font-size: 13px; }
}
@media (min-width: 1680px) {
  .wrap { grid-template-columns: 300px minmax(0, 1fr); }
  .deck { grid-template-columns: minmax(0, 1fr) 340px; }
  .gz:not(.sm):not(.xs) { width: 62px; height: 62px; font-size: 33px; }
}
@media (max-width: 1279px) {
  .cal-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) and (min-width: 900px) {
  .wrap { grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .rtools { grid-template-columns: minmax(0, 1fr); }
  .ph { grid-template-columns: 1fr; }
  .ph-a { justify-content: flex-start; max-width: none; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .band-k { display: none; }
  .band-m { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 휴대폰·좁은 창: 입력과 명부를 위에 접어 두고, 명식 판을 아래에 */
@media (max-width: 899px) {
  .top-in { height: 46px; padding: 0 14px; gap: 10px; }
  .top-day, .wide-only { display: none; }
  .tbtn { width: 34px; justify-content: center; padding: 0; }
  .entry { border-bottom: 0; background: none; }
  .entry-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: calc(100% - 20px); min-height: 50px; margin: 10px 10px 0; padding: 8px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); text-align: left; }
  .entry-bar span:first-child { display: grid; }
  .entry-bar small { color: var(--faint); font-size: 12px; font-weight: 500; }
  .entry-bar b { font-size: 13.5px; }
  .entry-bar-a { flex: none; padding: 5px 10px; border: 1px solid var(--rule-2); border-radius: var(--radius); font-size: 12.5px; font-weight: 600; }
  .entry-in { display: none; margin: 0 10px; padding: 14px; border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--sheet); }
  .drawer-open .entry-in { display: block; }
  .drawer-open .entry-bar { border-radius: var(--radius) var(--radius) 0 0; }
  .pform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .entry-k { display: none; }
  .f-name input, .f-city input { width: 100% !important; }
  .pform > .f-actions { padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .pform > .f-actions > .btn:only-child, .pform > .f-actions > .btn:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .f-time { position: relative; }
  .f-time .f-line { flex-wrap: wrap; }
  .sj { position: static; }
  .sj-pop { left: 0; right: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  .rail { display: none; }
  .drawer-open .rail { display: block; }
  #roster { max-height: 300px; }
  .keys { display: none; }
  .ph { grid-template-columns: 1fr; padding: 16px 14px 12px; }
  .ph h1 { font-size: 20px; }
  .ph-a { justify-content: flex-start; max-width: none; }
  .chain { grid-template-columns: 1fr; gap: 6px; }
  .chain ol { display: grid; gap: 0; }
  .chain li { grid-template-columns: 96px auto minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rule); }
  .chain li:not(:last-child)::after { content: none; }
  .chain li small { white-space: normal; }
  .chain-warn { grid-column: 1; }
  .tabs { position: sticky; top: 0; z-index: 20; }
  .tabs-in { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 0 4px; }
  .tab { height: 44px; padding: 0; font-size: 13px; }
  .tab .tl { display: none; }
  .tab .ts { display: inline; }
  .tab[aria-selected="true"]::after { left: 4px; right: 4px; }
  .tabpanel { padding: 18px 14px 24px; }
  .deck { gap: 26px; }
  .f input:not([type="checkbox"]):not([type="radio"]):not([data-seg]), .f select, .rsearch, .rsort, .memo-form input, .record textarea, .rform select, .nbox input { font-size: 16px; }
  .strip.n10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .strip.n12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .band { grid-template-columns: minmax(0, 1fr); }
  .band-k { display: none; }
  .band-m { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .drill { grid-template-columns: 1fr; padding-right: 0; }
  .drill .dg { grid-auto-flow: column; justify-content: start; align-items: center; }
  .rform { grid-template-columns: minmax(0, 1fr); }
  .rform .wide { grid-column: 1; }
  .rform .wide input { min-width: 0; }
  .rform .f-actions { display: grid; }
  .tool-row { grid-template-columns: 1fr; }
  .daily-head { grid-template-columns: auto minmax(0, 1fr); }
  .score { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; text-align: left; }
  .score em { display: inline; margin-left: 4px; }
  .ai-act { display: grid; }
  /* 신호 표: 한 신호를 한 덩어리로(머리 줄에 누구·종류·규칙·방향, 그 아래 사실과 읽는 법) */
  .sg, .sg tbody { display: block; }
  .sg thead { display: none; }
  .sg tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .sg td, .sg .rule, .sg .fact, .sg .read { padding: 0; border: 0; min-width: 0; width: auto; }
  .sg .fact { order: 1; flex-basis: 100%; font-size: 12.5px; }
  .sg .read { order: 2; flex-basis: 100%; }
  .sg .dir.none { display: none; }
  /* 직장운·재회운 표: 신호 칸은 행 아래 줄로 내리고, 남은 칸은 화면 폭 안에 들어오게 줄여요 */
  .tt.has-sig .sigc { display: none; }
  .tt.has-sig > tbody > tr.below { display: table-row; }
  .tt.has-sig > tbody > tr.has-below > th, .tt.has-sig > tbody > tr.has-below > td { border-bottom-color: transparent; }
  .tt.has-sig > tbody > tr.below > td { padding: 0 8px 9px; text-align: left; }
  .tt.has-sig > tbody > tr.below.now > td { background: var(--accent-bg); }
  .tt.has-sig > tbody > tr.below.open > td { border-bottom-color: transparent; }
  .tt > * > tr > th, .tt > * > tr > td { padding: 7px 4px; }
  .tt > thead > tr > th { white-space: normal; line-height: 1.3; }
  .tt .pairgz + small { display: none; }
  .xb, .xn { gap: 4px; }
}
@media (max-width: 600px) {
  .won thead th:first-child, .won tbody th { width: 44px; }
  .won tbody th { font-size: 11px; white-space: normal; line-height: 1.3; }
  .won th, .won td { padding: 6px 2px; }
  .gz { width: 46px; height: 46px; font-size: 26px; }
  .won tr.god td { font-size: 13px; }
  .won .rd { font-size: 11.5px; }
  .hs { margin: 0 1px; }
  .hs b { font-size: 14px; }
  .nl { gap: 0 6px; font-size: 11.5px; }
  .won tr.names .nl { flex-direction: column; align-items: center; gap: 0; }
  .zgrid { grid-template-rows: repeat(4, minmax(92px, auto)); }
  .zc { padding: 5px 4px; gap: 2px; }
  .zh { font-size: 11.5px; gap: 2px 3px; }
  .zg { display: none; }
  .zn, .zf span:last-child { display: none; }
  .st.major { font-size: 12.5px; }
  .st.aux { font-size: 11px; }
  .st .tr { font-size: 9.5px; padding: 0 2px; }
  .zf { font-size: 10.5px; }
  .zcenter { padding: 8px 6px; gap: 6px; }
  .zcenter .kv { gap: 2px 8px; font-size: 11.5px; }
  .zcenter .kv dt { font-size: 11px; }
  .zb { font-size: 18px; }
  .zfocus th { width: 84px; }
  .cd { min-height: 62px; padding: 4px 3px; }
  .cd .cn { font-size: 12.5px; }
  .cd .cl, .cd .ct { font-size: 10px; }
  .cd .cg { font-size: 13px; letter-spacing: -0.02em; }
  .cd .cs { top: 3px; right: 3px; font-size: 9.5px; }
  .cw { padding: 4px 0; font-size: 11px; }
  .col { padding: 7px 1px; }
  .col-g { font-size: 11.5px; }
  .kv { gap: 6px 12px; }
  .bars tbody th { width: 66px; }
  .bars .n { width: 52px; }
  .cmp th, .cmp td { padding: 7px 2px; }
  .cmp tbody th { font-size: 12.5px; white-space: normal; }
  .cmp td small { display: none; }
  .ci-h { grid-template-columns: minmax(0, 1fr) auto; }
  .ci-h .mt { grid-column: 1 / -1; }
  .ph-a .btn.sm { padding: 0 9px; }
  .ph-line { display: grid; gap: 1px; }
  .ph-line > span + span::before { content: none; }
  .rel th { width: 84px; }
  .rel td + td { display: none; }
  .tabs-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .gz { width: 42px; height: 42px; font-size: 24px; }
  .tab { font-size: 12.5px; letter-spacing: -0.02em; }
  .sj-pop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 인쇄: 화면은 숨기고 A4 상담지만 */
@page { size: A4; margin: 12mm 12mm 14mm; }
@media print {
  .screen, .toast { display: none !important; }
  html, body { background: #fff !important; color: #111 !important; }
  body { font-size: 10.5pt; line-height: 1.45; }
  .print-sheet { display: block; color: #111; font-family: var(--sans); }
  .print-sheet h1 { font-size: 17pt; margin: 6pt 0 2pt; }
  .print-sheet h1 small { font-size: 10.5pt; color: #555; margin-left: 6pt; }
  .print-sheet h2 { font-size: 10.5pt; margin: 10pt 0 4pt; padding-bottom: 2pt; border-bottom: 1px solid #111; }
  .print-sheet h2 small { font-weight: 400; color: #555; font-size: 9pt; }
  .ps-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 4pt; border-bottom: 2px solid #111; font-size: 10pt; }
  .ps-head b { font-size: 12pt; margin-right: 8pt; }
  .ps-meta { color: #333; font-size: 9.5pt; margin-bottom: 6pt; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th, .print-sheet td { border-bottom: 1px solid #bbb; padding: 3pt 4pt; text-align: center; font-size: 9.5pt; }
  .print-sheet th { font-weight: 700; color: #444; }
  .ps-mst b, .ps-ht b { font-family: var(--han); font-size: 13pt; }
  .ps-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12pt; }
  .ps-cols p { font-size: 9.5pt; }
  .ps-dt td { text-align: left; }
  .ps-note { white-space: pre-wrap; font-size: 10pt; padding: 6pt; border: 1px solid #bbb; min-height: 40pt; }
  .pq { font-weight: 700; margin-top: 4pt; }
  .pa { white-space: pre-wrap; font-size: 9.5pt; }
  .ps-foot { margin-top: 12pt; padding-top: 4pt; border-top: 1px solid #bbb; font-size: 8.5pt; color: #555; }
  .print-sheet section, .print-sheet table { break-inside: avoid; }
}