/* ══════════════════════════════════════════════════════
   루나호야 PRO — 디자인 토큰 & 컴포넌트
   기본: 연한 베이지 / 다크: 다크 네이비
   오행 정색 타일: 목 청록 · 화 적 · 토 황 · 금 백금 · 수 진회색
   ══════════════════════════════════════════════════════ */
:root{
  --bg:#f0e7d4; --card:#fffdf7; --card2:#f8f2e4; --line:#e4dac4; --line2:#cfc2a6;
  --selBg:#faeed6; --txt:#221f1a; --txt2:#5c554a; --mut:#9d9481; --acc:#a8641c;
  --msLine:#eee5d2; --sipC:#a8641c;
  --tbBg:#fffdf7; --barBg:#e9e0cc; --ink:#2a251d; --onInk:#fffdf7;
  --sh:0 1px 2px rgba(120,100,60,.07);
  --mokBg:#1f9a5a; --mokFg:#fff; --mokLn:rgba(0,0,0,.08);
  --okT:#1f8a52; --midT:#9a7310; --badT:#c0392b;   /* 판정 글자 전용 */
  --tuchC:#2f7d9e; --tuchBg:#e7f1f7;               /* 투출 표시 */
  --hwaBg:#d93a32; --hwaFg:#fff; --hwaLn:rgba(0,0,0,.08);
  --toBg:#e5b02e;  --toFg:#31240a; --toLn:rgba(0,0,0,.10);
  --geumBg:#f4f5f7;--geumFg:#2b2f36;--geumLn:#bcc2ca;
  --suBg:#363c44;  --suFg:#fff;    --suLn:rgba(0,0,0,.10);
  --chBg:#fdecea; --chFg:#c0392b; --chBd:#f0cac4;
  --hpBg:#e8f5ee; --hpFg:#1b7f4b; --hpBd:#c0e2d0;
  --hyBg:#fbf1dc; --hyFg:#96701a; --hyBd:#e8d4a6;
}
[data-theme="dark"]{
  --bg:#0e1729; --card:#16223a; --card2:#1d2c48; --line:#293954; --line2:#3b4e6e;
  --selBg:#2a3252; --txt:#f4f7fb; --txt2:#ccd7e6; --mut:#a7b7cf; --acc:#eab455;
  --msLine:#1c2740; --sipC:#e0aa4a;
  --tbBg:#0b1424; --barBg:#293954; --ink:#e9eef6; --onInk:#0e1729; --sh:none;
  --mokLn:rgba(255,255,255,.10); --hwaLn:rgba(255,255,255,.10); --toLn:rgba(255,255,255,.10);
  --geumBg:#eef1f4; --geumLn:rgba(0,0,0,.15); --suLn:rgba(255,255,255,.14);
  --chBg:#37202b; --chFg:#f2a6a6; --chBd:#6d3844;
  --hpBg:#16302f; --hpFg:#7fd7b8; --hpBd:#2d5c58;
  --hyBg:#2e2718; --hyFg:#e6cd8a; --hyBd:#5c4d26;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font-size:14.5px;line-height:1.6;
  font-family:"Noto Sans KR",-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  overscroll-behavior:none}
button,input,select{font-family:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
.gz{font-family:"Noto Serif KR","Nanum Myeongjo",serif}
/* 점성 기호 — 웹폰트를 반드시 내려받아 쓰게 해서 기기별 차이를 없앤다 */
@font-face{
  font-family:'LHSym';
  src:url(https://fonts.gstatic.com/s/notosanssymbols2/v25/I_uyMoGduATTei9eI8daxVHDyfisHr71ypPqfX71-AI.woff2) format('woff2');
  unicode-range:U+2190-2BFF,U+1F300-1F5FF;
  font-display:swap;
}
.sym,.ms .sym,svg text.sym{font-family:'LHSym','Noto Sans Symbols 2','Segoe UI Symbol',serif;
  font-variant-emoji:text}

/* ── 셸 ── */
.app{width:100%;max-width:1400px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
     background:var(--bg)}
.hd{--hdpad:13px;display:flex;align-items:center;gap:10px;padding:10px var(--hdpad) 8px;
    position:sticky;top:0;z-index:20;background:var(--card)}
/* 최종 벡터 로고를 마스크로 써서 테마 강조색으로 칠한다 (사장님 2026-09-30) */
.mark{width:34px;height:34px;flex:none;display:block;background-color:var(--acc);
  -webkit-mask:url(logo_mark.svg?v=26.66) center/contain no-repeat;
          mask:url(logo_mark.svg?v=26.66) center/contain no-repeat}
.mark img{display:none}
.wm{font-size:15.5px;font-weight:700;letter-spacing:.4px;line-height:1.15;display:flex;
  flex-direction:column;gap:3px;justify-content:center}
/* 워드마크도 도형 — 테마 강조색으로 칠한다 (사장님 2026-09-30) */
.wm .wmt{display:block;height:17px;width:151px;background-color:var(--acc);
  -webkit-mask:url(logo_type.svg?v=26.66) left center/contain no-repeat;
          mask:url(logo_type.svg?v=26.66) left center/contain no-repeat}
@media (max-width:759px){ .wm .wmt{height:15px;width:134px} }
/* 심볼 ↔ 워드마크 간격 — 좁은 화면에선 더 벌린다 */
.hd .mark + .wm{margin-left:0}
@media (max-width:759px){ .hd .mark + .wm{margin-left:2px} }
.wm em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.2px;color:var(--mut);font-weight:400;
  white-space:nowrap}
.sp{flex:1}
/* 멤버십 — 헤더 오른쪽 (2026-10-23) */
.acct{display:flex;align-items:center;gap:5px;margin-right:4px}
.acct .mbtn{height:28px;padding:0 10px;border-radius:7px;font-size:12px;white-space:nowrap;
  border:1px solid var(--line);background:var(--card2);color:var(--txt2);line-height:1}
.acct .mbtn.join{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.acct .mbtn.me{max-width:116px;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--acc)}
@media (max-width:430px){
  .acct{gap:4px;margin-right:2px}
  .acct .mbtn{height:26px;padding:0 7px;font-size:11px}
  .acct .mbtn.me{max-width:78px}
}
.hic{width:30px;height:30px;border-radius:7px;background:var(--card2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--txt2)}
.who{font-size:11.5px;color:var(--mut);padding:0 14px 9px;line-height:1.5}
.who b{color:var(--txt2);font-weight:600}
.who i{font-style:normal;color:var(--line2);margin:0 5px}
/* flex:1 이면 본문이 남은 높이를 다 먹어 푸터 위가 868px 나 비었다
   — 푸터가 내용 바로 뒤에 붙게 한다 (사장님 2026-10-08) */
.body{flex:0 0 auto;padding:12px 13px 16px}
.tb{position:sticky;bottom:0;height:58px;display:flex;border-top:1px solid var(--line);
  background:var(--tbBg);z-index:20}
.tb button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;color:var(--mut)}
.tb button i{font-size:17px;font-style:normal;line-height:1;font-family:"Noto Serif KR",serif}
.tb button.on{color:var(--acc);font-weight:600}

/* ── 카드 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:7px;margin-bottom:10px;
  box-shadow:var(--sh)}
.card>h5{margin:0;padding:10px 12px;font-size:12px;font-weight:600;color:var(--txt2);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;letter-spacing:.2px}
.card>h5 .r{margin-left:auto;font-size:11px;color:var(--mut);font-weight:400}
.card>h5 .r b{color:var(--txt2)}
.card .in{padding:10px}
.seg{display:flex;gap:3px;margin-left:auto}
.seg button{font-size:10.5px;padding:3px 9px;border-radius:4px;border:1px solid var(--line);
  background:var(--card2);color:var(--mut);line-height:1.5}
.seg button.on{border-color:var(--acc);color:var(--acc);background:var(--selBg);font-weight:600}

/* ── 명식 표 ── */
.ms{width:100%;table-layout:fixed;border-collapse:collapse}
.ms tbody tr:last-child td{border-bottom:0}
.ms col.cl-gap{width:12px}
.ms th,.ms td{padding:0 3px;text-align:center;vertical-align:top}
.ms td,.ms tbody th{border-bottom:1px solid var(--msLine)}

.ms td.gapc,.ms th.gapc{border-bottom:0;background:none}
.ms thead th{font-size:10px;color:var(--mut);padding-bottom:5px;font-weight:400;line-height:1.25;
  border-bottom:1px solid var(--msLine);vertical-align:bottom}
.ms thead th b{display:block;font-size:13px;color:var(--txt2);font-weight:600}
.ms thead th.u b{color:var(--acc)}
.ms tr.r-gz td,.ms tr.r-gz th{border-bottom:1px solid var(--msLine);padding:6px 3px;vertical-align:middle}
.ct{font-size:13px;color:var(--sipC);padding:5px 0;line-height:1.35;font-weight:600}
.cx{font-size:13px;color:var(--txt2);line-height:1.35;letter-spacing:-.4px;padding:5px 0}
/* 표시 선택에 따라 줄 단위로 켜고 끈다 */
html:not([data-d-uns="jwa"])  tr.r-jwa{display:none}
html:not([data-d-uns="geo"])  tr.r-geo{display:none}
html:not([data-d-sin="year"]) tr.r-siny{display:none}
html:not([data-d-sin="day"])  tr.r-sind{display:none}
.tile{height:50px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif KR",serif;font-size:29px;font-weight:700;margin:2px 0}
.tile.sm{height:33px;font-size:19px;border-radius:4px}
.w-mok{background:var(--mokBg);color:var(--mokFg);box-shadow:inset 0 0 0 1px var(--mokLn)}
.w-hwa{background:var(--hwaBg);color:var(--hwaFg);box-shadow:inset 0 0 0 1px var(--hwaLn)}
.w-to{background:var(--toBg);color:var(--toFg);box-shadow:inset 0 0 0 1px var(--toLn)}
.w-geum{background:var(--geumBg);color:var(--geumFg);box-shadow:inset 0 0 0 1px var(--geumLn)}
.w-su{background:var(--suBg);color:var(--suFg);box-shadow:inset 0 0 0 1px var(--suLn)}
.tile.empty{background:transparent;border:1px dashed var(--line2);color:var(--mut);font-size:15px}

.ct.mutd{color:var(--mut)}

/* 지장간 칩 — <i> 기본 이탤릭 해제 */
.jjg{display:flex;justify-content:center;gap:1.5px;padding:2px 0}
.jjg i{font-style:normal;font-family:"Noto Serif KR",serif;font-size:11.5px;width:12.5px;height:14px;
  border-radius:2px;display:flex;align-items:center;justify-content:center;font-weight:600}

/* 운→원국 작용 배지 — 모든 칸 높이 동일(정렬 유지) */
.hit{display:flex;align-items:center;justify-content:center;min-height:30px;
  font-size:10px;text-align:center;border-radius:3px;padding:2px;margin-top:3px;
  letter-spacing:-.4px;line-height:1.25;overflow:hidden}
.hit.ch{background:var(--chBg);color:var(--chFg)}
.hit.hp{background:var(--hpBg);color:var(--hpFg)}
.hit.hy{background:var(--hyBg);color:var(--hyFg)}
.hit.ph{visibility:hidden}

/* 명식 부가 줄 — 셀렉트에서 고른 것만 보인다 (지장간·길흉신은 항상 표시) */

/* 컨트롤 — 바깥 박스 없이 셀렉트만 */
.ctrlbar{display:flex;align-items:center;gap:6px;padding:0;margin-bottom:10px;border:0;background:none}
.cselw{flex:1;min-width:0;position:relative;display:flex}
.cselw i{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;
  color:var(--mut);pointer-events:none;font-style:normal}
.cselw.on i{color:var(--acc)}
.csel{flex:1;min-width:0;font-size:11.5px;padding:7px 22px 7px 10px;border-radius:5px;
  border:1px solid var(--line2);background:var(--card);color:var(--txt2);
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis}
.csel.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);font-weight:600}
/* 운 → 원국 상세 (기둥별 3층) */
.setup{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px}
.setup .bg{font-size:12px;color:var(--txt2);margin-bottom:8px}
.setup .bg b{color:var(--acc)}
.pl{border:1px solid var(--line);border-radius:6px;padding:7px 9px;margin-bottom:6px;background:var(--card2)}
.pl h6{margin:0 0 5px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.pl h6 .gzl{font-family:"Noto Serif KR",serif;font-size:14px}
.pl h6 .gzl.grid2{display:inline-grid;grid-template-columns:auto auto;gap:0 3px;
  line-height:1.1;margin-right:3px}
.pl h6 .gzl.grid2 i{font-style:normal;font-size:13.5px;text-align:center}
.pl h6 em{font-style:normal;margin-left:auto;font-size:11px;color:var(--mut);font-weight:400}
.pl .ly{display:flex;gap:7px;font-size:12.5px;line-height:1.65;padding:3px 0}
.pl .ly .tag{flex:none;width:56px;font-size:10.5px;color:var(--mut);padding-top:2px;line-height:1.45}
.pl .ly .tag i{font-style:normal;font-size:9px;opacity:.75}
.pl .ly.h1 .tag{color:var(--mokBg)}
.pl .ly.h2 .tag{color:var(--acc)}
.pl .ly.h3 .tag{color:var(--hwaBg)}
.pl .ly div{flex:1;color:var(--txt2)}
.pl .ly.kw{border-top:1px dashed var(--line);margin-top:3px;padding-top:4px}
.pl .ly.kw div{color:var(--txt2);font-size:12px;line-height:1.7}
.pl .ly.kw b{font-weight:600}
.pl .ly.kw b.kn{color:var(--hwaBg)}
.pl .ly.kw b.kp{color:var(--mokBg)}
.pl .ly.kw i.kgen{font-style:normal;font-size:10.5px;color:var(--line2)}
.pl .ly.kw i.kend{font-style:normal;color:var(--hwaBg)}
.pl .ly.kw i.kact{font-style:normal;font-weight:600}
.pl .ly.kw b.kn i.kact,.pl .ly.kw b.kn+i.kact{color:var(--hwaBg)}
.kwside{display:flex;gap:7px;align-items:flex-start;padding:2px 0}
.kwside+.kwside{border-top:1px dotted var(--line);margin-top:2px;padding-top:4px}
.kwrel{flex:none;width:104px;font-size:11px;color:var(--mut);line-height:1.55}
.kwrel em{display:block;font-style:normal;font-size:9.5px;color:var(--acc);opacity:.8}
.kside{font-style:normal;font-size:10.5px;color:var(--acc);opacity:.85;margin-right:2px}
.kwrel b{color:var(--txt2);font-weight:600}
.kwbody{flex:1;min-width:0;line-height:1.6}
.pl .ly.kw .knote{margin-top:6px;font-size:10.5px;color:var(--mut);line-height:1.55;opacity:.75}
.pl .ly.kw .knote b{color:var(--mut);font-weight:600}
.pickmsg{font-size:11.5px;color:var(--mut);padding:9px 4px;text-align:center;width:100%;
  border:1px dashed var(--line2);border-radius:6px}

/* 길흉신 칸 */
.cg{font-size:12px;color:var(--txt2);text-align:center;line-height:1.35;letter-spacing:-.5px;
  padding:5px 0;word-break:keep-all;min-height:28px;display:flex;align-items:center;
  justify-content:center}
.cg b{display:block;font-weight:600;color:var(--acc)}

/* ── 스트립 ── */
.stp{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.stp::-webkit-scrollbar{height:0}
.sx{flex:none;width:64px;border:1px solid var(--line);border-radius:6px;background:var(--card2);
  padding:4px;text-align:center}
.sx.on{border-color:var(--acc);box-shadow:0 0 0 1.5px var(--acc) inset;background:var(--selBg)}
.sx{position:relative}
.sx.now{border-color:var(--line2)}
.nowtag{font-style:normal;font-size:8.5px;background:var(--ink);color:var(--onInk);
  border-radius:3px;padding:0 4px;margin-left:3px;letter-spacing:-.3px;white-space:nowrap}
.stp{padding-top:2px}
.sx .a{font-size:10px;color:var(--mut);letter-spacing:-.5px;margin-bottom:2px}
.sx .s{font-size:10.5px;color:var(--txt2);letter-spacing:-.6px;margin-top:2px;min-height:11px}
.sx .bar{height:3px;border-radius:2px;margin:4px 2px 0;background:var(--barBg)}
.sx .bar i{display:block;height:100%;border-radius:2px;background:var(--acc)}

/* ── 배지 ── */
.rel{display:flex;flex-wrap:wrap;gap:4px}
.bg1{font-size:11px;padding:3px 8px;border-radius:4px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt2)}
.bg1.ch{border-color:var(--chBd);background:var(--chBg);color:var(--chFg)}
.bg1.hp{border-color:var(--hpBd);background:var(--hpBg);color:var(--hpFg)}
.bg1.hy{border-color:var(--hyBd);background:var(--hyBg);color:var(--hyFg)}
.bg1.pa{border-color:var(--line2)}

/* ── 폼 ── */
.f{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:8px 11px;
  margin-bottom:8px}
.f label{display:block;font-size:11px;color:var(--mut);margin-bottom:3px}
.f input,.f select{width:100%;background:none;border:0;font-size:16.5px;font-weight:600;outline:none;
  padding:2px 0}
.f input[type=number]{-moz-appearance:textfield}
.row{display:flex;gap:8px}
.row>*{flex:1}
.chip{display:inline-block;font-size:12.5px;padding:6px 13px;border-radius:5px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt2);margin:0 4px 4px 0}
.chip.on{background:var(--selBg);border-color:var(--acc);color:var(--acc);font-weight:600}
.cta{width:100%;background:var(--acc);color:#fff;font-weight:700;font-size:15.5px;padding:13px 0;
  border-radius:7px;margin-top:6px}
.cta.gh{background:var(--card2);border:1px solid var(--line2);color:var(--txt2);font-weight:500}
.cityrow{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:6px;
  padding:7px 10px;background:var(--card2)}
.cityrow .ico{font-size:13px;opacity:.6;flex:none}
.cityrow input{border:0;background:none;flex:1;font-size:16.5px;font-weight:600;outline:none;
  min-width:0;padding:0}
.cityrow .clr{flex:none;width:22px;height:22px;border-radius:4px;color:var(--mut);font-size:12px;
  background:var(--card)}
.f.picked .cityrow{border-color:var(--acc);background:var(--selBg)}
.citylist .grp{padding:6px 11px;font-size:10.5px;color:var(--mut);background:var(--card);
  border-bottom:1px solid var(--line)}
.citylist{margin-top:6px;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  max-height:210px;overflow-y:auto;background:var(--card2)}
.citylist button{display:block;width:100%;text-align:left;padding:10px 12px;font-size:14.5px;
  border-bottom:1px solid var(--line)}
.citylist button:last-child{border-bottom:0}
.citylist button:hover,.citylist button:focus{background:var(--selBg)}
.citylist button span{color:var(--mut);font-size:11.5px;margin-left:6px}
.citylist button i{font-style:normal;float:right;color:var(--mut);font-size:10px;
  font-family:"IBM Plex Mono",monospace}
.hintline{font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.55}
.hintline b{color:var(--txt2)}

.subtabs{display:flex;gap:5px;overflow-x:auto;margin-bottom:10px;padding-bottom:2px;scrollbar-width:none}
.subtabs::-webkit-scrollbar{height:0}
.subtabs button{flex:none;font-size:13.5px;padding:9px 16px;border-radius:7px;
  border:1px solid var(--line2);background:var(--card);color:var(--txt2);white-space:nowrap}
.subtabs button.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);font-weight:700}

.bodysel{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.bodysel button{font-size:11px;padding:6px 2px;border-radius:5px;border:1px solid var(--line);
  background:var(--card);color:var(--mut);display:flex;align-items:center;justify-content:center;gap:3px}
.bodysel button .sym{font-size:14px}
.bodysel button.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);font-weight:600}
.bodysel button.pre{grid-column:span 2;color:var(--txt2);border-style:dashed}

.setrow{display:flex;flex-wrap:wrap;gap:5px}
.setrow button{flex:1;min-width:88px;font-size:12px;padding:8px 6px;border-radius:5px;
  border:1px solid var(--line);background:var(--card2);color:var(--mut);line-height:1.4}
.setrow button.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);font-weight:600}
.setrow button.ghost{border-style:dashed;color:var(--txt2);background:none}

.datebar{display:flex;gap:4px;align-items:center;margin-bottom:9px}
.datebar button{flex:none;min-width:34px;font-size:12px;padding:8px 6px;border-radius:5px;
  border:1px solid var(--line2);background:var(--card);color:var(--txt2)}
.datebar button.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);font-weight:700}
.datebar input[type=date]{flex:1;min-width:0;font-size:13px;padding:7px 6px;border-radius:5px;
  border:1px solid var(--line2);background:var(--card);color:var(--txt);font-family:inherit;
  text-align:center}

/* ── 피르다리아 표 ── */
table.fird{width:100%;border-collapse:collapse;font-size:12.5px}
table.fird th{font-size:12px;font-weight:600;color:var(--txt2);padding:7px 6px;
  border:1px solid var(--msLine);background:var(--card2)}
table.fird td{padding:5px 7px;border:1px solid var(--msLine)}
table.fird td.g{width:26px;text-align:center;font-size:16px}
table.fird tr.maj td{background:var(--card2);font-weight:600}
table.fird tr.maj.on td{background:var(--selBg);color:var(--acc)}
table.fird tr.sub td{color:var(--txt2);font-family:"IBM Plex Mono",monospace;font-size:12px}
table.fird tr.sub.on td{background:var(--selBg);color:var(--acc);font-weight:700}
table.fird .yy{color:var(--mut);font-weight:400;font-size:11.5px}
table.fird .nowmk{font-family:"Noto Sans KR",sans-serif;font-size:10.5px;color:var(--acc)}

/* ── 차트 ── */
.plate{background:#fff;border-radius:8px;padding:0;border:0}
.chartinfo{font-size:11px;color:#4a4a4a;line-height:1.6;padding:4px 6px 8px}
.chartcap{font-size:10.5px;color:#5a5a5a;text-align:center;padding:6px 4px 2px;line-height:1.6}
.card .in.tight{padding:6px}
table.tbl{width:100%;border-collapse:collapse;font-size:12px}
table.tbl th{font-size:10px;color:var(--mut);font-weight:500;text-align:left;padding:5px 6px;
  border-bottom:1px solid var(--msLine)}
table.tbl td{padding:5px 6px;border-bottom:1px solid var(--msLine)}
table.tbl tr:last-child td{border-bottom:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.rx{color:#c0562e}
table.ag2{border-collapse:collapse;font-size:11px;margin:0 auto}
table.ag2 td,table.ag2 th{width:24px;height:24px;text-align:center;border:1px solid var(--msLine)}
table.ag2 th{color:var(--mut);font-size:12px}
table.ag2 td.dead{background:var(--card2);border-color:var(--card2)}

.kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 0;
  border-bottom:1px dashed var(--line);align-items:flex-start}
.kv>span:first-child{flex:none;color:var(--mut)}
.kv:last-child{border:0}
.kv b{font-weight:600;text-align:right;word-break:keep-all;line-height:1.55}
.kv .dt{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mut);font-weight:400}
.why{font-size:11.5px;color:var(--mut);border-left:2px solid var(--line2);padding-left:8px;
  margin-top:8px;line-height:1.65}
.why b{color:var(--txt2)}
.li{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--card);
  border:1px solid var(--line);border-radius:7px;margin-bottom:7px;width:100%;text-align:left}
.av{width:36px;height:36px;border-radius:6px;background:var(--card2);display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;color:var(--acc);flex:none;
  font-family:"Noto Serif KR",serif}
.li b{font-size:14.5px}
.li em{font-style:normal;display:block;font-size:11.5px;color:var(--mut)}
.li .r{margin-left:auto;font-size:9.5px;color:var(--mut)}
h6.sec{font-size:10.5px;letter-spacing:1px;color:var(--mut);margin:14px 0 6px 2px;font-weight:600}
.skel{border:1px dashed var(--line2);border-radius:7px;padding:24px;text-align:center;color:var(--mut);
  font-size:12.5px}
.hide{display:none!important}

/* 차트 휠은 카드 여백을 무시하고 가로를 최대한 쓴다 — 모바일에서 글자가 작아지는 걸 막는다 */
#wheelBox{margin-left:-10px;margin-right:-10px;width:calc(100% + 20px)}
@media (max-width:480px){
  #wheelBox{margin-left:-13px;margin-right:-13px;width:calc(100% + 26px)}
}

/* ── 설정 저장 바 · 안내 토스트 ── */
.setsave{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0 14px;margin-top:12px;
  background:linear-gradient(to top,var(--bg) 70%,transparent)}
.setsave button{flex:1;padding:11px 0;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer}
.setsave .primary{background:var(--acc);color:#fff;border:1px solid var(--acc)}
.setsave .primary:disabled{opacity:.6}
.setsave .ghost{flex:0 0 90px;background:transparent;color:var(--txt2);border:1px solid var(--line)}
.lhtoast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:60;
  background:rgba(28,28,30,.92);color:#fff;font-size:13px;padding:9px 16px;border-radius:6px;
  opacity:1;transition:opacity .45s}
.lhtoast.out{opacity:0}
/* 한 번 더 눌러 저장하는 띠 — 손가락을 뗀 직후에만 공유창이 열리기에 (사장님 2026-10-09) */
.lhtoast.tap{background:var(--acc);color:#fff;font-weight:700;cursor:pointer;
  padding:12px 20px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.28)}

/* ── 해석 근거 박스 안의 길흉 표시 ── */
.pl .ly b.good{color:var(--mokBg)}
.pl .ly b.bad{color:var(--hwaBg)}
.pl .ly .mut{color:var(--mut);font-size:10.5px}

/* ── 내담자 ── */
.cliq{margin-bottom:7px}
.cliq input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;
  background:var(--card2);color:var(--txt);font-size:13px;font-family:inherit}
.cliq input:focus{outline:none;border-color:var(--acc)}
.cliviews{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.cliviews button{padding:5px 9px;border:1px solid var(--line);border-radius:5px;background:var(--card2);
  color:var(--txt2);font-size:11.5px;font-family:inherit;cursor:pointer}
.cliviews button.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
/* 「＋ 폴더」 — 점선 + 흐린 글자라 꺼진 단추로 보였다 (사장님 2026-10-08)
   누를 수 있는 단추다 — 실선·크림톤 글자로 바꿈 */
.cliviews button.add{border:1px solid var(--acc);color:var(--acc);font-weight:700}
.cliviews button.add:active{background:var(--selBg)}
/* 초성은 가로 스크롤 대신 두 줄로 접는다 */
.clitabs{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:6px;margin-bottom:2px;
  border-bottom:1px solid var(--line)}
.clitabs button{flex:none;min-width:29px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;
  background:var(--card2);color:var(--txt2);font-size:11.5px;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:3px}
.clitabs button.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.clitabs button.off{opacity:.35}
.clitabs button i{font-style:normal;font-size:9px;color:var(--mut)}
.clitabs button.on i{color:rgba(255,255,255,.8)}
.clilist{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.cli{display:flex;align-items:stretch;gap:3px}
.cli .go{flex:1;display:flex;align-items:center;gap:9px;padding:8px 10px;text-align:left;
  border:1px solid var(--line);border-radius:6px;background:var(--card2);cursor:pointer;
  font-family:inherit;color:var(--txt);min-width:0}
.cli .go .av{flex:none;width:28px;height:28px;border-radius:5px;background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.cli .go>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cli .go b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli .go b .fchip{font-style:normal;font-size:9.5px;font-weight:500;color:var(--acc);
  border:1px solid var(--line2);border-radius:3px;padding:0 4px;margin-left:3px}
.cli .go em{font-style:normal;font-size:10.5px;color:var(--mut);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cli .go .at{flex:none;font-size:10px;color:var(--mut)}
.cli .fav,.cli .ed,.cli .del{flex:none;width:28px;border:1px solid var(--line);border-radius:6px;
  background:var(--card2);color:var(--mut);font-size:13px;cursor:pointer;font-family:inherit}
.cli .fav{color:var(--line2)}
.cli .fav.on{color:#e0a81e}
.cli .del{font-size:16px}

/* 수정 시트 */
.sheetbg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;z-index:56;
  background:var(--card);border-radius:12px 12px 0 0;padding:14px 14px 18px;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);max-height:88vh;overflow-y:auto}
.sheet h6{margin:0 0 10px;font-size:13px;font-weight:700}
.sheet label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--mut)}
.sheet input,.sheet select{padding:8px 9px;border:1px solid var(--line);border-radius:5px;
  background:var(--card2);color:var(--txt);font-size:13px;font-family:inherit;width:100%}
.sheet input:focus,.sheet select:focus{outline:none;border-color:var(--acc)}
.edg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.edg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.edf{margin-bottom:8px;position:relative}
.edhint{font-size:10px;color:var(--mut);padding-top:2px}
.edcity{position:absolute;left:0;right:0;top:52px;z-index:5;background:var(--card);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.edcity button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;
  font-size:12.5px;font-family:inherit;color:var(--txt);cursor:pointer}
.edcity button:hover{background:var(--card2)}
.edcity button em{font-style:normal;font-size:10px;color:var(--mut)}

/* ── 첫 화면 · 오늘의 명식 ── */
.today{margin-bottom:12px}
.today .ms{margin:0 auto}

/* ── 일진 달력 ── */
.calbar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--acc);border-radius:6px;padding:8px 10px;margin-bottom:8px}
.calbar b{color:#fff;font-size:14px;font-weight:600;letter-spacing:.3px}
.calnow{flex:1;background:rgba(255,255,255,.16);border:0;border-radius:5px;color:#fff;
  font-size:14px;font-weight:600;font-family:inherit;padding:6px 0;cursor:pointer;letter-spacing:.3px}

/* 년·월·일 휠 피커 */
.pkbg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:70;
  display:flex;align-items:center;justify-content:center;padding:20px}
.pk{width:100%;max-width:330px;background:var(--card);border-radius:10px;overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.28)}
.pkwrap{position:relative;display:grid;height:210px}
.pkhd{padding:10px 12px;border-bottom:1px solid var(--line)}
.pktitle{display:block;text-align:center;font-size:12px;color:var(--mut);margin-bottom:6px}
.pkin{display:grid;gap:6px}
.pkin input{width:100%;padding:7px 4px;text-align:center;border:1px solid var(--line);
  border-radius:5px;background:var(--card2);color:var(--txt);font-size:15px;font-weight:600;
  font-family:inherit;-moz-appearance:textfield}
.pkin input::-webkit-outer-spin-button,.pkin input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.pkin input:focus{outline:none;border-color:var(--acc)}
.pkband{position:absolute;left:8px;right:8px;top:84px;height:42px;pointer-events:none;
  border-top:1px solid var(--acc);border-bottom:1px solid var(--acc);background:rgba(181,112,31,.07)}
.pkcol{overflow-y:auto;scrollbar-width:none;text-align:center;scroll-snap-type:y mandatory}
.pkcol::-webkit-scrollbar{width:0}
.pkpad{height:84px}
.pkit{height:42px;line-height:42px;font-size:16px;color:var(--mut);scroll-snap-align:center;
  transition:color .12s,font-size .12s}
.pkit.on{color:var(--txt);font-size:19px;font-weight:600}
.pkbtn{display:flex;border-top:1px solid var(--line)}
.pkbtn button{flex:1;padding:12px 0;border:0;background:none;font-size:14px;font-family:inherit;
  color:var(--txt2);cursor:pointer}
.pkbtn button+button{border-left:1px solid var(--line)}
.pkbtn button.ok{color:var(--acc);font-weight:700}
.caldow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.caldow span{text-align:center;font-size:10.5px;color:var(--mut);padding:3px 0;
  background:var(--card2);border-radius:4px}
.caldow .sun{color:#c0392b}
.caldow .sat{color:#2b6ca3}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calc{position:relative;min-height:62px;padding:3px 3px 2px;border:1px solid var(--line);
  border-radius:5px;background:var(--card2);cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:2px;overflow:hidden}
.calc.out{opacity:.34}
.calc.today{background:#fdf3dd;border-color:var(--acc)}
.calc.pick{outline:2px solid var(--acc);outline-offset:-2px}
.calc .dnum{align-self:flex-end;font-size:11px;font-weight:600;color:var(--txt2);line-height:1}
.calc .dnum.sun{color:#c0392b}
.calc .dnum.sat{color:#2b6ca3}
.calc .gz{display:flex;gap:1px}
.calc .gz i{font-style:normal;font-family:"Noto Serif KR",serif;font-size:12px;
  width:15px;height:16px;line-height:16px;text-align:center;border-radius:3px}
.calc .lun{font-size:9px;color:#a2559a}
.calc .jq{font-size:9px;color:#2b6ca3;line-height:1.1}
.calc .jq.jeol{font-weight:700}
@media (max-width:400px){
  .calc{min-height:56px}
  .calc .gz i{font-size:11px;width:14px}
}

/* 눌러서 고르는 입력칸 */
#iY,#iM,#iD,#iH,#iMi{cursor:pointer}

/* ── 폴드·태블릿처럼 넓은 화면 ── */
@media (min-width:700px){
  .body{padding:20px 18px 24px}
  .hd{padding:12px 18px 9px}
  /* 휠은 끝없이 커지지 않게 가운데로 모은다 */
  .plate svg{max-width:980px;margin:0 auto}
  .chartinfo{max-width:980px;margin:0 auto}
  /* 표·리스트는 넓어진 폭을 그대로 쓴다 */
  .clitabs button{min-width:34px;font-size:12.5px}
  .calc{min-height:74px}
  .calc .gz i{font-size:14px;width:18px;height:19px;line-height:19px}
  .calc .lun,.calc .jq{font-size:10px}
}
@media (min-width:700px){
  .sheet{max-width:620px;border-radius:12px;bottom:auto;top:50%;transform:translate(-50%,-50%)}
}

/* 폴드를 펼치면 화면을 거의 다 쓴다 (좌우 여백 최소) */
@media (min-width:900px){
  .body{padding:26px 22px 28px}
  .hd{padding:12px 22px 9px}
  /* 홈 명식도 만세력 화면처럼 가로를 다 쓴다 — 860px 상한 때문에
     오른쪽이 크게 비었다 (사장님 2026-10-08 「첫화면 배치를 우측처럼」) */
  .today .rel{margin-left:auto;margin-right:auto}
}

/* ── 운의 핵심 키워드 ── */
/* 카드 안에 카드가 겹치지 않게 — 테두리를 걷고 한 덩어리로 읽히게 한다 */
.pl.unkw{border:0;background:none;border-radius:0;padding:10px 0 4px;margin:0}
.pl.unkw + .pl.unkw{border-top:1px solid var(--line)}
.pl.unkw h6{padding-bottom:4px}
.pl.unkw h6 .gzl{font-size:14px;letter-spacing:1px}
.ukgz{font-family:"Noto Serif KR",serif;font-size:14.5px}
.uksip{color:var(--acc);font-size:13px;font-weight:600}
.ukwx{font-style:normal;font-size:11px;padding:1px 5px;border-radius:3px;vertical-align:1px}
.ukrole{font-size:11.5px;padding:1px 6px;border-radius:3px;border:1px solid currentColor}
.ukrole.good{color:var(--mokBg)}
.ukrole.bad{color:var(--hwaBg)}
.ukw{color:var(--txt2);font-size:12px;line-height:1.7;margin-top:3px}
.ukarrow{font-style:normal;color:var(--mut);margin:0 2px}
.ukgrp{font-size:11px;color:var(--acc);margin-left:3px}
.ukwhy{font-style:normal;font-size:10.5px;color:var(--mut);margin-left:5px}
.ukwhy.bad{color:var(--hwaBg);font-weight:600}
.kwturn{margin-top:3px;padding-top:3px;border-top:1px dotted var(--line);font-size:11.5px}
.ukmain{font-size:13.5px;color:var(--acc)}
.ukhwa{color:var(--mut);font-size:11.5px}
.uksum{display:block;margin-top:2px}

/* ── 운 글자가 4기둥에 퍼지는 나열 ── */
.spdtop{padding-bottom:5px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.spd{display:flex;gap:8px;padding:4px 0}
.spd+.spd{border-top:1px dotted var(--line)}
.spdh{flex:none;width:72px;font-size:11.5px;font-weight:600;color:var(--txt2);line-height:1.35}
.spdh em{display:block;font-style:normal;font-size:9px;color:var(--mut);font-weight:400}
.spdb{flex:1;min-width:0}
.kwtitle{font-size:12.5px}
.kwcause{font-size:11px;color:var(--acc);margin-top:2px}
.ukcore{font-size:11.5px;color:var(--txt2);margin-top:3px;line-height:1.6}
.ukcore b{color:var(--acc)}
.ukcore .sep{font-style:normal;color:var(--line2);margin:0 4px}
.ukw.lead{font-size:12.5px;color:var(--txt);line-height:1.7}
.uklean{font-size:10.5px;color:var(--mut);margin-top:3px}
.uklean b.good{color:var(--mokBg)}
.uklean b.bad{color:var(--hwaBg)}
.relkw{color:var(--hwaBg);font-weight:600}
.spd:not(.neg) .relkw{color:var(--mokBg)}
.spd.neg .kwtitle{color:var(--hwaBg)}
.spd:not(.neg) .kwtitle{color:var(--mokBg)}

/* ── 통합 유형 카드 ── */
.pl.unkw.cross h6 .gzl{color:var(--acc)}
.pl.unkw.cross h6 em{color:var(--txt2)}
.pl.unkw.cross{background:var(--card2);border-radius:7px;padding:10px 11px;margin:8px 0}
.pl.unkw.cross + .pl.unkw{border-top:0}

/* 통합 유형 (시안) */
.tycard{border-color:var(--acc)}
/* 이름은 한 줄로 — 배지를 옆에 두면 폭을 뺏어 어절이 깨진다 */
.tyhead{margin-bottom:6px}
.tyname{display:block;font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.3;
  word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
.tydraft{display:inline-block;margin-top:6px;font-size:10px;color:var(--mut);
  border:1px solid var(--line);border-radius:20px;padding:2px 8px;white-space:nowrap}
@media (max-width:400px){ .tyname{font-size:18px;letter-spacing:-.6px} }
.tyline{font-size:13.5px;color:var(--txt);line-height:1.6;padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.tygrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 0 2px}
@media (max-width:520px){ .tygrid{grid-template-columns:1fr} }
.tyside h6{margin:0 0 5px;font-size:10.5px;font-weight:500;color:var(--mut)}
.tyside h6 span{color:var(--acc);font-weight:700;font-size:12.5px;margin-left:3px}
.tyfact{font-size:11.5px;color:var(--txt2);line-height:1.6}
.tyfact b{color:var(--txt)}
.tybg{font-style:normal;color:var(--mut);font-size:10.5px}
.tywhy{font-size:11.5px;color:var(--mut);margin-top:4px;line-height:1.55}
.tybars{display:flex;flex-direction:column;gap:3px}
.tybar{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--mut)}
.tybar.on span,.tybar.on b{color:var(--txt);font-weight:700}
.tybar span{flex:none;width:26px}
.tybar i{height:7px;border-radius:3px;display:block}
.tybar b{font-size:10px;color:var(--txt2);font-weight:500;font-variant-numeric:tabular-nums}

/* 프라이머리 디렉션 */
.segbig{margin:0 0 10px}
.segbig button i{display:block;font-style:normal;font-size:10px;color:var(--mut);margin-top:1px}
.segbig button.on i{color:inherit;opacity:.75}
.pdmore{display:block;width:100%;margin:10px 0 2px;padding:11px;border:1px solid var(--acc);
  border-radius:8px;background:var(--card2);color:var(--acc);font-size:13px;font-weight:600;cursor:pointer}
.pdset{border:1px solid var(--line);border-radius:8px;padding:10px 11px;margin:8px 0 2px}
.pdset .f{margin-bottom:9px}
.pdset .f:last-of-type{margin-bottom:2px}
.pdset label{display:block;font-size:11px;color:var(--txt2);margin-bottom:4px}
.pdset label .mut{color:var(--mut)}
.pdrow{flex-wrap:wrap}
.pdrow button{font-size:11.5px;padding:5px 9px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pdt{width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.pdt td,.pdt th{white-space:nowrap}
.pdt .mz{color:var(--mut);font-size:10.5px}
.pdt .dc{color:var(--mut);font-size:11px}
.pdt .num{text-align:right}
/* 프로미터·시그 칸 — 어스펙트·글리프·이름을 고정폭 칸에 담아 줄을 맞춘다
   (사장님 2026-10-18 「기호 배치도 공간을 만들어서 정렬이 다 맞으면 · 들쑥날쑥 하지 않고」) */
.pdt td.prom, .pdt td.sigc{white-space:nowrap}
.pdt td.prom i, .pdt td.sigc i{font-style:normal}
.pdt td.prom > i.ax, .pdt td.sigc > i.ax{display:inline-block;width:15px;text-align:center;
  vertical-align:baseline}
.pdt td.prom > i.gx{display:inline-block;width:19px;text-align:center;font-size:14px;
  vertical-align:baseline}
.pdt td.prom > i.nx, .pdt td.sigc > i.nx{display:inline-block;margin-left:3px}
.pdt td.prom > i.ax .pdasp{margin-right:0}
.pdt .prom b{font-size:13px}
.pdasp{font-style:normal;color:var(--acc);margin-right:3px}
.pdhm{display:block;font-style:normal;font-size:10px;color:var(--mut);line-height:1.3}
.pdt .thsub{display:block;font-style:normal;font-size:9.5px;font-weight:400;color:var(--mut)}
/* 활성이어도 행 색·굵기는 바꾸지 않는다 — 오른쪽 근거로만 알린다 */
.pdt .lord{font-size:11px;color:var(--mut);text-align:right;white-space:normal}
.pdt .lord b{color:var(--acc);display:inline-block}
.pdt .lord i{display:block;font-style:normal;font-size:9.5px;color:var(--mut);line-height:1.3}
.lordkr{color:var(--acc)}
.lsrc{display:inline-block;font-style:normal;font-size:10px;color:var(--mut);margin:0 8px 0 3px}

/* 시기 지배 — 상단 버튼 하나, 열면 안에 메뉴 */
/* 탭이 맨 위 · 시기 지배 버튼은 그 옆에 따로 */
.tabrow{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.tabrow .subtabs{flex:1;min-width:0;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tlbtn{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--acc);border-radius:8px;padding:5px 10px;
  background:var(--card2);color:var(--txt);cursor:pointer;text-align:left;white-space:nowrap}
.tlname{font-size:11px;font-weight:600;color:var(--acc)}
.tlpk{font-size:10.5px;color:var(--txt2)}
.tlpk b{color:var(--txt)}
.tlmenu{margin-bottom:11px}

/* 창 — 화면을 밀지 않고 위에 띄운다 */
.mdbg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center}
@media (min-width:640px){ .mdbg{align-items:center} }
.md{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px 14px 0 0;padding:14px 15px 18px}
@media (min-width:640px){ .md{border-radius:14px} }
.mdhd{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.mdhd b{font-size:15px}
.mdhd span{font-size:10.5px;color:var(--mut);min-width:0}
.mdx{margin-left:auto;flex:none;border:0;background:none;color:var(--mut);
  font-size:15px;cursor:pointer;padding:0 2px}
.tlh{margin:14px 0 5px;font-size:10.5px;font-weight:500;color:var(--mut)}
@media (max-width:520px){ .tlbtn{flex-wrap:wrap;gap:5px 10px} .tlar{margin-left:auto} }

/* 일렉션 — 한 칸씩 미는 스테퍼 */
.elgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
@media (max-width:420px){ .elgrid{grid-template-columns:repeat(2,1fr)} }
.elrow{display:flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:8px;padding:5px 6px}
.ellab{flex:none;width:16px;font-size:10.5px;color:var(--mut)}
.elrow button{flex:none;width:26px;height:26px;border:1px solid var(--line);border-radius:6px;
  background:var(--card2);color:var(--txt);font-size:14px;line-height:1;cursor:pointer}
.elrow button:active{background:var(--acc);color:var(--onInk)}
.elval{flex:1;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.elbar{display:flex;gap:7px;margin-top:9px}
.elbar input{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;
  padding:7px 8px;background:var(--card);color:var(--txt);font-size:12.5px}
.elbar button{flex:none;border:1px solid var(--line);border-radius:7px;padding:7px 12px;
  background:var(--card2);color:var(--txt);font-size:12.5px;cursor:pointer}
.tldet{border-top:1px solid var(--line);margin-top:9px}

/* 랏 설정 */
.lotbtn{display:block;width:100%;border:1px solid var(--acc);border-radius:8px;padding:9px 11px;
  background:var(--card2);color:var(--acc);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.lott{width:100%;font-size:11.5px}
.lott td,.lott th{vertical-align:middle}
.lott .mut{color:var(--mut);text-align:center}
.lotck{width:20px;height:20px;border:1px solid var(--line);border-radius:5px;
  background:var(--card);color:var(--onInk);font-size:11px;line-height:1;cursor:pointer;padding:0}
.lotck.on{background:var(--acc);border-color:var(--acc)}
.lotact{text-align:right;white-space:nowrap}
.lotact button{border:1px solid var(--line);border-radius:5px;background:none;color:var(--mut);
  font-size:10px;padding:3px 6px;margin-left:3px;cursor:pointer}
.lotform{border-top:1px solid var(--line);margin-top:11px;padding-top:4px}
.lotform input[type=text],.lotform #lotName{width:100%;border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;background:var(--card);color:var(--txt);font-size:12.5px;margin-bottom:7px}
.lotf3{display:flex;align-items:center;gap:5px}
.lotf3 select{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:6px 4px;
  background:var(--card);color:var(--txt);font-size:12px}
.lotf3 span{flex:none;color:var(--mut);font-size:12px}
.lotdn{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--txt2)}

/* 아스트로차트 — 차트 · 테이블 · 옵션
   아래 서브탭(.subtabs)과 확실히 구분되게 통짜 세그먼트로 만든다 */
.aview{display:flex;margin:0 0 12px;border:1px solid var(--acc);border-radius:9px;
  overflow:hidden;background:var(--card)}
.aview button{flex:1;border:0;border-left:1px solid var(--acc);border-radius:0;
  padding:7px 6px;font-size:12px;font-weight:600;letter-spacing:.3px;
  background:none;color:var(--mut);cursor:pointer;transition:background .12s}
.aview button:first-child{border-left:0}
.aview button.on{background:var(--acc);color:var(--onInk)}
.tblwrap.tall{max-height:70vh;overflow-y:auto}
/* 디렉션 표 — 칸 안에서 굴리고 머리줄은 붙여 둔다 (사장님 2026-10-18) */
/* 기간 칩 — 전체·상반기·하반기·달 (사장님 2026-10-18) */
/* 「전체 | 활성만」 줄도 위아래 여백 (사장님 2026-10-18 「체크된 부분도 여백」) */
#panePred #onlyAct{margin:14px 0 0}
#panePred .pdseg{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 14px}
/* 단추는 사각에 끝만 살짝 둥글게 (사장님 2026-10-18) */
#panePred .pdseg button{appearance:none;border:1px solid var(--line2);background:transparent;
  color:var(--txt2);border-radius:4px;padding:7px 14px;font-size:12.5px;font-weight:600;
  cursor:pointer;line-height:1.5}
#panePred .pdseg button i{font-style:normal;color:var(--mut);font-size:11px;margin-left:3px;
  font-variant-numeric:tabular-nums}
#panePred .pdseg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
#panePred .pdseg button.on i{color:#fff;opacity:.75}
/* 날짜 — 지난 것은 흐리게, 오늘 언저리는 띠로 (사장님 2026-10-18 「지금 날짜가 구분이 잘 안됨」) */
#panePred .pdt td.dt{font-variant-numeric:tabular-nums}
/* 지난 줄을 흐리게 깔았더니 표 절반이 죽어 보였다 — 흐리게는 하지 않는다
   (사장님 2026-10-18 「이부분 왜 연하게 나와? 그렇게 하지 말고」) */
#panePred .pdt td.dt.now{color:#b5701f;font-weight:800}
#panePred .pdt tr.nowrow td{background:rgba(181,112,31,.10)}
[data-theme="dark"] #panePred .pdt td.dt.now{color:#d79a52}
[data-theme="dark"] #panePred .pdt tr.nowrow td{background:rgba(215,154,82,.14)}

/* 루나리턴 주기 이동 */
.lrbar{display:flex;gap:6px;margin-bottom:9px}
.lrbar button{flex:1;border:1px solid var(--line2);border-radius:7px;padding:8px 6px;
  background:var(--card);color:var(--txt2);font-size:12.5px;cursor:pointer}
.lrbar .lrnow{border-color:var(--acc);color:var(--acc);font-weight:600}

/* 솔라리턴 해석 근거 — 박스마다 붙는 키워드 */
.kwh{color:var(--acc);font-weight:700;font-size:11px;margin-right:3px}
.bgkw{font-size:13.5px;font-weight:600;line-height:1.55;margin:-2px 0 4px;padding:0 1px}
.bgkw2{font-size:11.5px;color:var(--txt2);margin:0 0 10px;padding:0 1px}
.bgkw2 b{color:var(--acc)}

/* 격 (디그니티) */
.dig{white-space:nowrap;font-size:10.5px}
.dig b{font-weight:700}
.dig b.mut{color:var(--mut);font-weight:400}
.digsc{color:var(--mut);font-size:9.5px;margin-left:3px}
.digsun{display:block;font-style:normal;font-size:9px;color:var(--mut);line-height:1.3}
.digsun.bad{color:var(--bad)}
.digsun.kaz{color:var(--acc);font-weight:700}

/* 어플라잉 / 세퍼레이팅 */
.apmk{display:inline-block;font-style:normal;font-size:8px;vertical-align:super;
  margin-left:1px;color:var(--acc);font-weight:700}
.apmk.sep{color:var(--mut);font-weight:400}

/* 차트 이미지 저장 버튼 */
.plate{position:relative}
/* 기호만 있어서 아무도 못 찾았다 — 글자를 붙인다 (사장님 2026-10-09) */
.wsave{position:absolute;right:2px;top:2px;z-index:3;min-width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--txt2);font-size:15px;line-height:1;cursor:pointer;opacity:1}
.wsave b{font-size:11.5px;font-weight:700;letter-spacing:-.2px}
.wsave:hover,.wsave:active{border-color:var(--acc);color:var(--acc);background:var(--selBg)}
@media (max-width:539px){ .wsave{padding:0;width:30px} .wsave b{display:none} }

/* 상담 메모 */
.cli .ntb2{position:relative;flex:none;width:30px;border:0;background:none;color:var(--mut);
  font-size:14px;cursor:pointer;padding:0}
.cli .ntb2 i{position:absolute;right:0;top:-2px;font-style:normal;font-size:9px;font-weight:700;
  background:var(--acc);color:var(--onInk);border-radius:8px;padding:0 4px;line-height:13px}
.ntwho{font-size:11px;color:var(--mut);font-weight:400;margin-left:6px}
.ntnew{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;
  background:var(--card);color:var(--txt);font-size:13px;line-height:1.6;resize:vertical;
  font-family:inherit}
.ntlist{max-height:44vh;overflow-y:auto;border-top:1px solid var(--line);padding-top:8px}
.nt{margin-bottom:9px}
.nth{display:flex;align-items:center;font-size:10.5px;color:var(--mut);margin-bottom:3px}
.nth button{margin-left:auto;border:0;background:none;color:var(--mut);font-size:14px;
  cursor:pointer;line-height:1;padding:0 2px}
.ntb{font-size:13px;line-height:1.65;white-space:pre-wrap;
  border-left:2px solid var(--line);padding-left:9px}

/* 포위 */
.bsg{font-size:10.5px;line-height:1.5;margin-top:2px}
.bsg.bad{color:var(--bad)}
.bsg.good{color:var(--good)}

/* ── 상담 인사이트 (insight.js) — 토큰 0 ── */
#insBox .ihead{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;margin:14px 0 8px}
#insBox .ihead:first-child{margin-top:2px}
#insBox .ihead i{font-style:normal;font-size:11px;font-weight:800;color:#8a7c68}
#insBox .ihead b{font-size:14.5px}
#insBox .ihead small{grid-column:2;font-size:11px;color:#8a7c68}
#insBox .ihl{font-size:17px;font-weight:800;line-height:1.45;background:#fff;border-left:4px solid var(--acc,#b5701f);border-radius:9px;padding:10px 13px;margin:6px 0 8px}
#insBox .ikw{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
#insBox .ikw span{font-size:11.5px;font-weight:700;color:var(--acc);background:var(--selBg);
  border:1px solid #e8d9bd;border-radius:6px;padding:4px 9px;letter-spacing:-.2px}
#insBox .icl b{display:block;font-size:13.5px}
#insBox .icl p{margin:3px 0 0;font-size:12.8px;line-height:1.6;color:#4a4236}
#insBox .itsum{background:#fff;border-left:4px solid #1d2640;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:700;margin-bottom:8px}
#insBox .irow{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:start;padding:7px 0;border-bottom:1px solid #f0ebe2}
#insBox .irow:last-child{border-bottom:0}
#insBox .its{display:flex;gap:3px;align-items:center}
#insBox .ikt{width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff}
#insBox .ikt.w{background:#2e7d4f}#insBox .ikt.f{background:#c0392b}#insBox .ikt.e{background:#d4a92a;color:#2a2118}
#insBox .ikt.m{background:#fff;color:#2a2118;border:1px solid #d8d0c0}#insBox .ikt.wa{background:#2b3038}
#insBox .ikl{font-size:11px;font-weight:800;border:1px solid #d8cfbf;border-radius:6px;padding:3px 7px;color:#6a5e4c;background:#fff}
#insBox .ikl.bad{color:#c0392b;border-color:#e6b9ae}
#insBox .itx b{display:block;font-size:13px;line-height:1.45}
#insBox .itx small{display:block;font-size:11.5px;color:#5a4e3c;line-height:1.5;margin-top:2px}
#insBox .iexp{margin-top:10px}
#insBox .iexp>summary{font-size:12.5px;color:#4a5a7a;cursor:pointer;list-style:none}
#insBox .iexp>summary::-webkit-details-marker{display:none}
#insBox .iexp>summary:after{content:' ＋'}
#insBox .iexp[open]>summary:after{content:' －'}
#insBox .iexpb{margin-top:6px;background:#fff;border:1px solid #e7e1d8;border-radius:9px;padding:9px 12px}
#insBox .iexpb p{margin:0 0 5px;font-size:12.5px;line-height:1.6;color:#4a4236}
#insBox .iexpb p:last-child{margin:0}
#insBox .ismall{color:#8a7c68!important;font-size:11.5px!important}

/* ══ 홈 · 상단 메뉴 · TODAY · 상담기록 (와이어프레임 main_v4 / main_record) ══ */

/* ── 메뉴를 상단으로 ── */
.tb.top{position:sticky;top:0;bottom:auto;z-index:20;height:auto;border-top:0;border-bottom:1px solid var(--line);
  background:var(--card);gap:3px;padding:6px 10px;box-shadow:0 1px 0 rgba(120,100,60,.04)}
.tb.top button{flex:0 0 auto;flex-direction:row;gap:6px;padding:7px 15px;font-size:13.5px;
  white-space:nowrap;                     /* 좁아도 「만세력」이 한 자씩 쪼개지지 않게
                                             (사장님 2026-09-30 「메뉴가 세로로 나와?」) */
  border-radius:7px;margin:0;color:var(--txt2);transition:background .12s,color .12s}
.tb.top button i{font-size:14px;font-family:"Noto Serif KR",serif}
.tb.top button.on{background:linear-gradient(180deg,#f7e9cf,#f1dfbe);color:var(--acc2,#7a4a12);
  font-weight:700;box-shadow:inset 0 0 0 1px rgba(168,100,28,.18)}
[data-theme="dark"] .tb.top button.on{background:#2a3252;color:var(--acc);box-shadow:none}

/* ── 홈 : 검색 + 등록 ── */
.homeact{display:flex;gap:9px;align-items:stretch;margin:14px 0 4px}
.homeact .hsr{flex:1;border:1px solid var(--line);border-radius:8px;padding:13px 15px;font:inherit;
  font-size:14px;background:var(--card);box-shadow:var(--sh)}
.homeact .hsr:focus{outline:none;border-color:var(--line2)}
/* 등록 단추 높이를 왼쪽 검색칸과 맞춘다 (사장님 2026-10-06)
   min-height:46px 가 늘어남을 막고 .cta 의 margin-top:6px 가 띄워 내려 6px 낮았다 */
.homeact .hadd{width:auto;flex:none;padding:0 18px;height:auto;min-height:0;margin-top:0;
  align-self:stretch;font-size:13.5px;border-radius:8px}
#regBox{margin-top:8px}
#regBox.hide{display:none}
#recentH{letter-spacing:3px}

/* ── TODAY 카드 ── */
.card.tdc{border-radius:9px;overflow:hidden;
  background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%)}
.card.tdc>.in{padding:15px 15px 16px}
.tdhd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tdlab{font-size:10.5px;letter-spacing:3.5px;color:var(--acc);font-weight:800;flex:none;white-space:nowrap}
.dp{display:inline-flex;align-items:center;gap:5px;flex:none}
.dp .ar{width:29px;height:29px;border:1px solid var(--line);border-radius:7px;background:var(--card);
  font-size:15px;line-height:1;color:var(--txt2);box-shadow:var(--sh)}
.dp .ar:active{background:var(--selBg)}
.dp .dd{position:relative;border:1px solid var(--line);border-radius:7px;background:var(--card);
  padding:5px 12px;font-weight:800;font-size:14.5px;letter-spacing:-.2px;box-shadow:var(--sh)}
.dp .dd:after{content:'▾';font-size:9px;color:var(--mut);margin-left:5px;vertical-align:middle}
.dp .dd input{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:0;padding:0;background:none}
.dp .tdy{font-size:11.5px;font-weight:800;color:var(--acc);border:1px solid var(--acc);
  border-radius:7px;padding:4px 11px;background:transparent}
.dp .tdy.on{background:var(--selBg)}
.tdhd .lu{font-size:12px;color:var(--mut);flex:none;white-space:nowrap}
.dp .dd .dlong{display:none}
.ttwrap{display:flex;align-items:center;gap:9px;margin-left:auto;flex:1 1 100%}
.ttwrap .dflt{display:none;font-size:10.5px;color:var(--mut)}

/* 만세력 / 트랜짓 탭 */
.ttab{display:flex;background:var(--barBg);border-radius:8px;padding:3px;gap:3px;margin:11px 0 0;flex:1}
.ttab button{flex:1;font-size:12.5px;font-weight:700;color:var(--txt2);padding:7px 0;border-radius:6px}
.ttab button.on{background:var(--card);color:var(--txt);box-shadow:0 1px 3px rgba(120,100,60,.14)}
.tp{padding-top:2px}
.jgline{font-size:11.5px;color:var(--txt2);margin:10px 0 2px}
.jgline b{color:var(--txt);font-weight:700}
.jgline i{font-style:normal;color:var(--mut);margin:0 2px}

/* 네 기둥 */
.pil4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:9px}
.pcell{text-align:center;min-width:0}
.pcell .h{font-size:11px;color:var(--mut);margin-bottom:4px;font-family:"Noto Serif KR",serif}
.pcell .h b{color:var(--acc);font-weight:700}
.pcell .h .dlbl{display:none;font-style:normal;color:var(--acc);font-weight:700}
.pcell .tile{height:46px;font-size:26px;margin:0 0 5px;border-radius:6px}
.pcell .ct{font-size:11.5px;padding:3px 0;font-weight:600}
.pcell .ct b{color:var(--acc);font-weight:700}
.pcell .jjg{padding:3px 0;gap:1px}
.pcell .jjg i{width:11px;font-size:10.5px}
.pcell .cx{font-size:11.5px;padding:2px 0 0;color:var(--txt2)}
.pcell.day .tile{box-shadow:0 0 0 2.5px var(--selBg),inset 0 0 0 1px rgba(0,0,0,.08)}

/* 기둥 옆 설명 칸 (넓은 화면) */
.todayrow{display:block}
.side{display:none;border-left:1px dashed var(--line);padding-left:20px;font-size:12.5px;
  color:var(--txt2);line-height:2}
.side b{color:var(--txt)}
.side .gz{font-family:"Noto Serif KR",serif;font-size:14px;color:var(--txt)}
.sidecal{display:block;margin-top:6px;font-size:11.5px;color:var(--acc);font-weight:700}

/* 칩 */
.gm{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.gm span{font-size:11.5px;background:var(--card);border:1px solid var(--line);border-radius:7px;
  padding:4px 11px;color:var(--txt2)}

/* 트랜짓 */
/* 차트는 한 줄로 · 행성 위치는 그 아래 (사장님 2026-09-23) */
.skyrow{margin-top:10px;display:block}
.tdwheel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;
  max-width:560px;margin:0 auto 14px;width:100%}
.tdwheel svg{border-radius:8px}
.skytb{width:100%;max-width:560px;margin:0 auto;border-collapse:collapse;font-size:12.5px}
.skytb td{padding:5px 6px;border-bottom:1px solid var(--msLine);vertical-align:middle}
.skytb tr:last-child td{border-bottom:0}
.skytb .pg{width:24px;text-align:center;font-size:14px;color:#2a4a8a}
[data-theme="dark"] .skytb .pg{color:#8fb0e4}
.skytb .pn{color:var(--txt2);white-space:nowrap}
.skytb .ps{font-weight:700;white-space:nowrap}
.skytb .pd{font-variant-numeric:tabular-nums;color:var(--txt2);white-space:nowrap}
.skytb .ph{width:34px;text-align:right;color:var(--mut);font-size:11.5px}
.skytb .rx{color:#c0392b;font-size:10.5px;font-weight:800}
.tchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;max-width:560px;margin-left:auto;
  margin-right:auto;justify-content:center}
.tchips span{font-size:11px;border-radius:7px;padding:4px 10px;font-weight:700}
.tc-v{background:#f6ecd8;color:#8a5a12}
.tc-r{background:#fbeae6;color:#a0442a}
.tc-a{background:#e8eef8;color:#2a4a8a}
[data-theme="dark"] .tc-v{background:#2e2718;color:#e6cd8a}
[data-theme="dark"] .tc-r{background:#37202b;color:#f2a6a6}
[data-theme="dark"] .tc-a{background:#1d2c48;color:#a8c4ee}
@media (max-width:430px){
  .homeact{flex-direction:column;align-items:stretch}
  .homeact .hadd{width:100%;min-height:46px;padding:12px 18px}
}
@media (max-width:380px){
  .skytb{font-size:12px}
  .skytb td{padding:4px 4px}
  .pcell .tile{height:42px;font-size:23px}
}

/* ══ 상담기록 (main_record.html) ══ */
#recPane .rsub{font-size:12.5px;color:var(--txt2)}
#recPane .rsub2{font-size:11.5px;color:var(--mut);margin-bottom:9px}
#recPane .rtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
#recPane .rtags span{font-size:11px;background:var(--selBg);color:var(--acc);border-radius:6px;
  padding:3px 10px;font-weight:700}
#recPane .rmut{color:var(--mut);font-size:11.5px}
#recPane .rfu{font-size:12.5px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--card2);margin-bottom:6px}
#recPane .rfu:last-child{margin-bottom:0}
#recPane .rfu b{color:var(--acc);margin-right:5px}
/* 로그인 권하는 띠 — 상담기록 맨 위 (2026-10-23) */
#recPane .rlog{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--selBg);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;margin:0 0 12px;font-size:13.5px;color:var(--txt2)}
#recPane .rlog span{flex:1;min-width:180px}
#recPane .rlog .rbtn{flex:none}
#recPane .rbtn{border:1px solid var(--line);background:var(--card);border-radius:7px;
  padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--txt2)}
#recPane .rbtn.on{background:var(--acc);border-color:var(--acc);color:#fff}
#recPane .rent{border:1px solid var(--line);border-radius:7px;background:var(--card);
  padding:10px 12px;margin-bottom:8px}
#recPane .rent[open]{background:var(--card2)}
#recPane .rent>summary{list-style:none;cursor:pointer}
#recPane .rent>summary::-webkit-details-marker{display:none}
#recPane .rd{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800}
#recPane .rbadge{font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 9px}
#recPane .rbadge.done{background:var(--hpBg);color:var(--hpFg);border:1px solid var(--hpBd)}
#recPane .rbadge.wait{background:var(--hyBg);color:var(--hyFg);border:1px solid var(--hyBd)}
#recPane .rq{font-size:13px;margin-top:4px;color:var(--txt)}
#recPane .rrow{display:grid;grid-template-columns:86px 1fr;gap:6px 10px;margin-top:10px;
  font-size:12.5px;line-height:1.6;border-top:1px dashed var(--line);padding-top:10px}
#recPane .rk{color:var(--mut);font-size:11.5px}
#recPane .rsrc{color:#2a4a8a}
#recPane .rbtns{display:flex;gap:6px;margin-top:10px}
#recPane .rfoot{display:flex;align-items:center;gap:9px;margin-top:10px}

/* 새 상담 모달 */
.rdim{position:fixed;inset:0;z-index:70;background:rgba(20,16,10,.45);display:flex;
  align-items:flex-end;justify-content:center}
.rmd{background:var(--card);width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;
  border-top-left-radius:10px;border-top-right-radius:10px;border:1px solid var(--line)}
.rmh{display:flex;align-items:center;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.rmh b{font-size:15px}
.rmx{margin-left:auto;font-size:12px;color:var(--mut)}
.rmb{padding:12px 16px 20px;overflow-y:auto}
.rmb>div{margin-bottom:10px}
.rmb label{display:block;font-size:11.5px;color:var(--mut);margin-bottom:4px}
.rmb input,.rmb textarea,.rmb select{width:100%;border:1px solid var(--line);border-radius:7px;
  padding:10px 12px;font:inherit;font-size:13.5px;background:var(--card2);color:var(--txt)}
.rmb textarea{min-height:64px;resize:vertical;line-height:1.6}
.rwho{font-size:13px;font-weight:800;color:var(--acc)}
.rtwo{display:flex;gap:9px}
.rtwo>div{flex:1;margin:0}
.rhint{font-size:11px;color:var(--acc);margin-top:4px}
.rsave{width:100%;background:var(--acc);color:#fff;border-radius:8px;padding:13px;
  font-size:14px;font-weight:700;margin-top:4px}

/* 최근 조회 — 무엇을 봤는지 태그 */
#recent .rtag{margin-left:auto;display:flex;gap:5px}
#recent .rtag i{font-style:normal;font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 9px;
  white-space:nowrap}
#recent .rtag .t1{background:#f3e6cc;color:#7a4a12}
#recent .rtag .t2{background:#e2e9f5;color:#2a4a8a}
#recent .rtag .t3{background:#efe6f5;color:#6a3a8a}
[data-theme="dark"] #recent .rtag i{filter:brightness(.8)}

/* ── 넓은 화면 : 와이어프레임 PC 구성 ── */
@media (min-width:760px){
  .card.tdc>.in{padding:20px 24px 22px}
  .tdhd{gap:11px}
  .dp .dd{font-size:17px;padding:6px 14px}
  .dp .dd .dlong{display:inline}
  .dp .dd .dshort{display:none}
  .ttwrap .dflt{display:inline}
  .ttwrap{flex:none}
  .ttab{flex:none;margin:0}
  .ttab button{padding:6px 18px}
  .jgline{font-size:12.5px;margin-top:10px}
  /* 명식을 560px 로 가두고 옆에 1fr 을 주니 PC 에서 오른쪽이 700px 넘게 비었다
     — 명식이 늘어나고 옆 정보는 내용만큼만 (사장님 2026-10-08) */
  .todayrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-top:6px}
  .pil4{gap:10px}
  .pcell .tile{height:56px;font-size:31px;border-radius:7px}
  .pcell .ct,.pcell .cx{font-size:12.5px}
  .pcell .h{font-size:11.5px}
  .pcell .h .dlbl{display:inline}
  .side{display:block}
  .gm{display:none}
  #recent .li{padding:13px 18px}
}

/* ── 헤더 안에 메뉴 (와이어프레임 PC 구성) ── */
.hd{flex-wrap:wrap}
.hd .tb.top{order:9;flex-basis:calc(100% + var(--hdpad) * 2);width:calc(100% + var(--hdpad) * 2);
  margin:8px calc(-1 * var(--hdpad)) -8px;border-radius:0;padding:6px var(--hdpad)}
.hic .hlabel{display:none}
@media (min-width:760px){
  .hd{--hdpad:26px;padding:13px var(--hdpad) 12px;gap:14px;border-bottom:1px solid var(--line);background:var(--card)}
  .hd .wm{font-size:16px}
  .hd .tb.top{border-bottom:0}
  .hd .tb.top button{padding:7px 14px;font-size:13.5px}
  .hd .tb.top button i{display:none}
  .hic{width:32px;height:32px;padding:0;font-size:14px;flex:none}
}
/* 메뉴를 로고 옆으로 올리고 버튼에 글자를 붙이는 건 자리가 넉넉할 때만 (사장님 2026-09-29) */
@media (min-width:1000px){
  .hd .tb.top{order:0;flex-basis:auto;width:auto;margin:0 0 0 14px;border:0;background:none;box-shadow:none;
    position:static;height:auto;
    /* 오른쪽 끝에 붙은 「⚙ 세팅」 칩이 overflow:auto 와 겠쳐 잘린 듯 보였다
       — 안쪽 여백을 주고 넘침을 푸다 (사장님 2026-10-08) */
    padding:0 4px 0 0; overflow:visible; flex-wrap:nowrap}
  .hd .tb.top button i{display:none}
  .hic{width:auto!important;height:auto;padding:0 12px!important;border:0!important;font-size:13px!important;
    color:var(--txt2)!important;font-weight:600}
  .hic .hicon{display:none}
  .hic .hlabel{display:inline}
  .hic:hover{color:var(--acc)!important}
}

/* ── 모바일 헤더 정렬 : 한 줄에 아이콘, 메뉴는 다음 줄 ── */
@media (max-width:759px){
  .hd{--hdpad:12px;gap:8px;padding:10px var(--hdpad) 0;background:var(--card);border-bottom:1px solid var(--line)}
  .hd .wm{font-size:14px}
  .hd .wm em{font-size:9.5px}
  .hic{width:32px!important;height:32px;padding:0!important;font-size:14px!important;flex:none}
  .hic.inst{border-color:var(--acc)!important;color:var(--acc)!important}
  .hd .tb.top{flex-basis:calc(100% + var(--hdpad) * 2);width:calc(100% + var(--hdpad) * 2);
    margin:8px calc(-1 * var(--hdpad)) 0;padding:7px var(--hdpad);
    background:transparent;border-top:1px solid var(--line);border-bottom:0}
  .hd .tb.top button{padding:6px 11px;font-size:13px;margin:0}
  .hd .tb.top .navset{margin-left:auto}
}

/* ══ 만세력 화면 (와이어프레임 main_saju) ══ */
.pbar{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:11px 13px;
  margin-bottom:10px}
.pbar .pb1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pbar .av{width:30px;height:30px;border-radius:6px;background:var(--selBg);color:var(--acc);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pbar .pb1 b{font-size:15px}
.pbar .m{font-size:12px;color:var(--txt2)}
.pbar .pb2{font-size:11px;color:var(--mut);margin:3px 0 0 39px}

/* 운 — 대운 · 세운 · 월운 한 카드 */
.unrow{display:flex;align-items:baseline;gap:8px;margin:10px 0 5px}
.unrow:first-child{margin-top:0}
.unrow b{font-size:12.5px;color:var(--acc);font-weight:700}
.unrow span{font-size:11px;color:var(--mut)}

/* 접히는 카드 (상담 인사이트 · 전문 분석) */
.card.pro{padding:0}
.card.pro>summary{list-style:none;cursor:pointer;padding:11px 13px;display:flex;align-items:baseline;gap:8px}
.card.pro>summary::-webkit-details-marker{display:none}
.card.pro>summary:after{content:'＋';margin-left:auto;color:var(--mut)}
.card.pro[open]>summary:after{content:'－'}
.card.pro>summary b{font-size:13.5px}
.card.pro>summary small{font-size:11px;color:var(--mut)}
.card.pro[open]>summary{border-bottom:1px solid var(--line)}
.prosec{display:flex;align-items:baseline;gap:8px;margin:14px 0 7px;font-size:12.5px}
.prosec:first-child{margin-top:0}
.prosec b{color:var(--acc)}
.prosec span{font-size:11px;color:var(--mut)}

.tb button.hide{display:none}
#sajuSetBox .f{background:transparent;border:0;padding:0;margin-bottom:12px}

/* 메뉴 옆 ⚙ 만세력 세팅 */
/* 만세력 세팅 — 메뉴 탭과 다른 모양 : 테두리만 강조색 */
.tb.top .navset{margin-left:auto;align-self:center;font-size:11px;font-weight:700;white-space:nowrap;
  padding:5px 11px;border-radius:999px;border:1px dashed #d9c19a;background:transparent;
  color:var(--acc);letter-spacing:-.2px;box-shadow:none}
.tb.top .navset:active{background:var(--selBg)}
.tb.top .navset.on{background:var(--acc);border-color:var(--acc);border-style:solid;color:#fff}
.tb.top .navset.hide{display:none}
#sajuSetBox .f{margin-bottom:12px}

/* 세팅 — 칸별 켜고 끄기 */
.subset{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.subset button{border:1px solid var(--line);background:var(--card2);border-radius:7px;padding:5px 10px;
  font-size:11.5px;color:var(--mut)}
.subset button.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);font-weight:700}
#insBox .hide,.card.pro .hide{display:none}

/* ── 세팅 · 카드 안을 섬션으로 가르기 ──
   규칙 : 소제목(갈색) + 흰 박스 한 덩어리 · 덩어리 사이는 선 대신 여백 */
.setgrp{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:12px 13px;
  margin-bottom:14px}
.setgrp .f{background:transparent;border:0;padding:0;margin-bottom:12px}
.setgrp .f:last-child{margin-bottom:0}
.setgrp .f > label{font-size:12px;color:var(--txt2);margin-bottom:6px;display:block}
.setgrp .hintline{margin-top:6px}
#paneSajuSet .sec{margin:0 2px 7px}
#paneSajuSet .sec:not(:first-child){margin-top:4px}

/* 전문 분석 — 칸마다 한 박스 */
#strBox,#yongBox,#etcBox{background:var(--card2);border:1px solid var(--line);border-radius:7px;
  padding:11px 12px}
.card.pro .prosec{margin:16px 0 6px}
.card.pro .prosec:first-child{margin-top:2px}

/* 상담 인사이트 — 칸마다 한 박스 (01 명식 핵심 · T라인 · 02 · 03) */
#insBox .insgrp{background:transparent;border:0;padding:0;margin-bottom:14px}
#insBox .insbody{background:var(--card2);border:1px solid var(--line);border-radius:7px;
  padding:11px 12px}
#insBox .insgrp:last-child{margin-bottom:0}
#insBox .insgrp.hide{display:none}
#insBox .insgrp > .ihead{margin:0 2px 7px}

/* ── T라인 그림 ── 위 줄 月干 · 日干 · 時干 / 아래 日支 */
#insBox .tgraph{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto 18px auto;justify-items:center;margin:10px 0 12px}
#insBox .tgraph .tg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--card);border:1px solid var(--line);border-radius:7px;padding:8px 6px;
  width:78px;height:78px;box-sizing:border-box;position:relative;z-index:1}
#insBox .tgraph .tg small{font-size:10px;color:var(--mut);font-family:"Noto Serif KR",serif}
#insBox .tgraph .tg b{font-size:11.5px;font-weight:700;color:var(--txt2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
#insBox .tgraph .tg .ikt{margin:0}
#insBox .tgraph .tl{grid-column:1;grid-row:1}
/* 일간 — 테두리 색은 투출 표시 전용이므로 쓰지 않는다 (사장님 2026-09-30)
   대신 테두리를 진하게(중립색) + 「나」 글자를 강조색으로 */
#insBox .tgraph .tc{grid-column:2;grid-row:1;border-width:2px;border-color:var(--line2);padding:7px 5px}
#insBox .tgraph .tc b{color:var(--acc)}
#insBox .tgraph .tr{grid-column:3;grid-row:1}
#insBox .tgraph .ty{grid-column:4;grid-row:1}
#insBox .tgraph .tb{grid-column:2;grid-row:3}
/* T 라인(시간~월간)은 실선 그대로, 월간↔연간만 점선 (사장님 2026-09-30) */
#insBox .tgraph .tbar{grid-column:1/4;grid-row:1;align-self:center;width:66%;height:1px;
  background:var(--line2);z-index:0}
#insBox .tgraph .tbar2{grid-column:3/5;grid-row:1;align-self:center;justify-self:center;
  width:56%;height:0;border-top:1px dashed var(--line2);z-index:0}
#insBox .tgraph .tstem{grid-column:2;grid-row:2;width:1px;height:100%;background:var(--line2)}
#insBox .itsum{margin-top:0}

/* 02 현재 변화 안으로 들어간 운 → 원국 작용 */
#insBox #relBox{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
#insBox #setupBox{margin-top:6px}

/* 01 명식 핵심 — 박스 위칸은 흰 바탕(한 줄 요약), 아래칸은 그대로 (박스 안 박스 없애기) */
#insBox .insgrp .insbody{overflow:hidden}
#insBox .insgrp .ihl{margin:-11px -12px 11px;background:var(--card);border:0;
  border-bottom:1px solid var(--line);border-radius:7px 7px 0 0;padding:14px 13px}
#insBox .insgrp .itsum{margin:-11px -12px 11px;background:var(--card);border:0;
  border-bottom:1px solid var(--line);border-radius:7px 7px 0 0;padding:14px 13px}
/* T라인 요약 문장 — 01 한 줄 요약과 같은 자리·같은 크기 */
#insBox .insgrp .itsum{font-size:17px;font-weight:800;line-height:1.45}

/* 02 현재 변화 — 대운·세운·월운 박스 (01 과 같은 모양) */
#insBox .insgrp[data-k="02"] .insbody{background:transparent;border:0;padding:0}
#insBox .ubox{border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-bottom:9px;
  background:var(--card2)}
#insBox .ubox:last-child{margin-bottom:0}
#insBox .ubox .uhl{display:flex;align-items:flex-start;gap:9px;background:var(--card);
  border-bottom:1px solid var(--line);padding:13px;margin:0;border-radius:0}
#insBox .ubox .uhl .utt{display:flex;flex-direction:column;gap:2px;margin-left:5px}
#insBox .ubox .uhl b{font-size:17px;font-weight:800;line-height:1.3}
#insBox .ubox .uhl b small{font-size:12px;color:var(--mut);font-weight:600}
#insBox .ubox .uhl .ikt{margin:0;width:44px;height:44px;font-size:26px;border-radius:7px;flex:none}
#insBox .ubox .uhl i{font-style:normal;font-size:19px;color:var(--line2)}
#insBox .ubox .ubody{display:flex;flex-wrap:wrap;gap:5px;padding:10px 12px}
#insBox .ubox .ubody span{font-size:11.5px;font-weight:700;color:var(--acc);background:var(--selBg);
  border:1px solid #e8d9bd;border-radius:6px;padding:4px 9px;display:inline-flex;align-items:baseline;gap:5px}
#insBox .ubox .ubody span i{font-style:normal;font-size:10px;color:var(--mut);font-weight:600}
#insBox .ubox .ubody .mut{color:var(--mut);background:transparent;border-color:transparent;padding:4px 0}
/* 배지 줄 — 천간·지지·원진을 줄로 가른다. 배지 모양은 그대로 (사장님 2026-10-11) */
#insBox .ubox .ubody .ulane{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start;width:100%;
  background:transparent;border:0;padding:0}
/* 작용 하나가 한 줄 (사장님 2026-10-11 「지지 두줄이어야지」) */
#insBox .ubox .ubody .ulist{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
#insBox .ubox .ubody .urow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#insBox .ubox .ubody .ulane .ulb{margin-top:5px}
/* 칸 나눔 — 띠 제목과 선 하나로만 가른다 (박스 안 박스 금지) */
#insBox .ubox .ubody.usub{flex-direction:column;align-items:stretch;gap:7px}
#insBox .ubox .ubody.usub + .ubody.usub{border-top:0;padding-top:2px}
#insBox .ubox .ubody.usub .hksrc{font-size:10.5px;font-weight:800;color:var(--mut);
  letter-spacing:.3px;background:transparent;border:0;padding:0;margin:0}
#insBox .ubox .ubody .ulane .ulb{flex:none;font-style:normal;font-size:10.5px;font-weight:700;
  color:var(--mut);letter-spacing:.3px;min-width:26px}
#insBox .ubox .ubody .uwhyg{font-style:normal;font-size:11px;font-weight:600;color:var(--txt2);
  background:transparent;border:0;padding:0 2px}
#insBox .ubox .ubody .uwhyg s{text-decoration:none;color:var(--mut);font-weight:400;padding:0 3px}
#insBox .ubox.off{background:transparent}

#insBox .uwhy{padding:0 12px 11px;font-size:12.5px;line-height:1.65;color:var(--txt2)}
#insBox .uwhy b{color:var(--txt);font-weight:700}

/* 운 박스 — 십성 키워드 */
#insBox .ukw{border-top:0;margin:0;padding:0}
#insBox .ukwh{font-size:12.5px;color:var(--txt2);margin-bottom:6px}
#insBox .ukwh b{color:var(--acc);font-weight:800}
#insBox .ukwr{display:flex;gap:7px;align-items:baseline;margin-bottom:4px}
#insBox .ukwr:last-child{margin-bottom:0}
#insBox .ukwt{flex:none;font-size:11px;font-weight:700;color:var(--txt2);background:var(--card2);
  border:1px solid var(--line);border-radius:6px;padding:2px 8px}
#insBox .ukwt.pos{color:var(--hpFg);background:var(--hpBg);border-color:var(--hpBd)}
#insBox .ukwt.neg{color:var(--chFg);background:var(--chBg);border-color:var(--chBd)}
#insBox .ukwb{font-size:12px;line-height:1.6;color:var(--txt2)}

/* 작용마다 붙는 키워드 줄 */
#insBox .hkws{padding:0 12px 4px}
#insBox .hkw{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-top:1px dashed var(--line)}
#insBox .hkw:first-child{border-top:0}
#insBox .hkt{flex:none;font-size:11px;font-weight:700;color:var(--txt2);background:var(--card2);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;white-space:nowrap}
#insBox .hkt.pos{color:var(--hpFg);background:var(--hpBg);border-color:var(--hpBd)}
#insBox .hkt.neg{color:var(--chFg);background:var(--chBg);border-color:var(--chBd)}
#insBox .hkb{font-size:12px;line-height:1.6;color:var(--txt2)}
#insBox .hkb b{color:var(--acc);font-weight:700}
#insBox .hkb i{font-style:normal;color:var(--mut);margin-left:5px;font-size:11px}

#insBox .hkb em{font-style:normal;font-size:10.5px;color:#fff;background:var(--mut);border-radius:4px;
  padding:1px 5px;margin-right:4px}
#insBox .hkw .hkt.pos + .hkb em{background:var(--hpFg)}
#insBox .hkw .hkt.neg + .hkb em{background:var(--chFg)}

#insBox .ubox .uhl .usip{font-size:13.5px;color:var(--txt2);font-weight:600}
#insBox .ubox .uhl .usip b{font-size:13.5px;color:var(--acc);font-weight:800}
#insBox .ukw{padding-top:7px}

#insBox .ubox .uhl .utt{flex:1;min-width:0}
#insBox .ubox .uhl .ukwr{margin-top:5px}

#insBox .uwhy i{font-style:normal;color:var(--mut);font-size:11.5px}

#insBox .uwhy em{font-style:normal;font-size:10.5px;color:#fff;background:var(--mut);border-radius:4px;
  padding:1px 5px;margin-left:4px}

#insBox .hksrc{font-size:10.5px;font-weight:700;color:var(--acc);letter-spacing:.3px;
  margin:8px 0 2px}
#insBox .hkws > .hksrc:first-child{margin-top:2px}
#insBox .hksrc + .hkw{border-top:0}

#insBox .hkb .kup,#insBox .hkb .kdn{display:block;margin-top:3px;font-size:11.5px;line-height:1.55}
#insBox .hkb .kup i,#insBox .hkb .kdn i{font-style:normal;font-weight:800;margin-right:4px}
#insBox .hkb .kup{color:var(--hpFg)}
#insBox .hkb .kdn{color:var(--chFg)}

#insBox .kflow{color:var(--acc);font-weight:800}
#insBox .uwhy .kflow{margin-left:4px}

#insBox .kflow.kbad{color:var(--chFg)}

/* ══ 아스트로 상담 인사이트 ══ */
#ainsBox .ahead{display:flex;align-items:baseline;gap:7px;margin:16px 2px 7px}
#ainsBox .ahead:first-child{margin-top:2px}
#ainsBox .ahead i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc)}
#ainsBox .ahead b{font-size:14px}
#ainsBox .ahead small{font-size:11px;color:var(--mut)}
#ainsBox .abody2{background:var(--card2);border:1px solid var(--line);border-radius:7px;padding:11px 12px}
#ainsBox .ahl{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:12px 13px;
  margin:-11px -12px 11px;border-width:0 0 1px;border-radius:7px 7px 0 0;font-size:15px;font-weight:700;
  line-height:1.5}
#ainsBox .ahl b{font-size:17px;font-weight:800;color:var(--acc)}
#ainsBox .ahl small{font-size:11.5px;color:var(--mut);font-weight:600}
#ainsBox .achips{display:flex;gap:5px;flex-wrap:wrap}
#ainsBox .achips span{font-size:11.5px;font-weight:700;color:var(--acc);background:var(--selBg);
  border:1px solid #e8d9bd;border-radius:6px;padding:4px 9px}
#ainsBox .abox{border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-bottom:8px;
  background:var(--card2)}
#ainsBox .ahd{display:flex;align-items:center;gap:7px;background:var(--card);
  border-bottom:1px solid var(--line);padding:10px 12px;flex-wrap:wrap}
#ainsBox .ahd .al{font-size:10.5px;font-weight:700;color:var(--acc);background:var(--selBg);
  border-radius:6px;padding:3px 8px}
#ainsBox .ahd b{font-size:15px;font-weight:800}
#ainsBox .ahd small{font-size:11.5px;color:var(--txt2)}
#ainsBox .abody{padding:9px 12px}
#ainsBox .arow{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:baseline;
  padding:5px 0;border-top:1px dashed var(--line)}
#ainsBox .arow:first-child{border-top:0}
#ainsBox .atx{font-size:11px;color:var(--mut);font-weight:700}
#ainsBox .avx{font-size:12.5px;line-height:1.6;color:var(--txt2)}
#ainsBox .avx i{font-style:normal;color:var(--mut);font-size:11.5px}
#ainsBox .avx b{color:var(--acc);font-weight:700}
#ainsBox .avx.good{color:var(--hpFg)}
#ainsBox .avx.bad{color:var(--chFg)}
#ainsBox .avx.amp{color:var(--acc)}

/* 아스트로 인사이트 — 영역별 지표성 · 네이탈 카드 */
#ainsBox .areas{padding:0}
#ainsBox .arw{display:grid;grid-template-columns:96px 1fr;gap:9px;padding:10px 12px;
  border-bottom:1px solid var(--line)}
#ainsBox .arw:last-of-type{border-bottom:0}
#ainsBox .arw.live{background:var(--selBg)}
#ainsBox .an{font-size:12.5px;font-weight:700}
#ainsBox .an small{display:block;font-size:10.5px;color:var(--mut);font-weight:600;margin-top:2px}
#ainsBox .apath{font-size:12px;line-height:1.6;color:var(--txt2)}
#ainsBox .apath b{color:var(--acc);font-weight:700}
#ainsBox .apath i{font-style:normal;color:var(--mut);font-size:11px}
#ainsBox .averd{margin-top:4px;font-size:12px;font-weight:700}
#ainsBox .averd small{display:block;font-size:10.5px;color:var(--mut);font-weight:600;margin-top:1px}
#ainsBox .averd.good{color:var(--hpFg)}
#ainsBox .averd.bad{color:var(--chFg)}
#ainsBox .averd.mid{color:var(--acc)}
#ainsBox .averd2{margin-left:auto;font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;
  background:var(--card2);border:1px solid var(--line)}
#ainsBox .averd2.good{color:var(--hpFg);background:var(--hpBg);border-color:var(--hpBd)}
#ainsBox .averd2.bad{color:var(--chFg);background:var(--chBg);border-color:var(--chBd)}
#ainsBox .averd2.mid{color:var(--acc);background:var(--selBg);border-color:#e8d9bd}
#ainsBox .anote{padding:9px 12px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--mut)}
#ainsBox .anote b{color:var(--txt2)}
#ainsBox .ahd small i{font-style:normal;color:var(--mut)}

/* 아스트로 인사이트 — 줄여서 */
#ainsBox .lrow{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding:9px 12px;
  border-bottom:1px solid var(--line)}
#ainsBox .lrow:last-of-type{border-bottom:0}
#ainsBox .lrow > b{font-size:14px;font-weight:800}
#ainsBox .lp{font-size:12px;color:var(--txt2)}
#ainsBox .lp b{font-weight:800}
#ainsBox .lp b.good{color:var(--hpFg)}
#ainsBox .lp b.bad{color:var(--chFg)}
#ainsBox .lp b.amp{color:var(--acc)}
#ainsBox .lp i{font-style:normal;color:var(--mut);font-size:11px}
#ainsBox .lr{font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;
  background:var(--card2);border:1px solid var(--line);color:var(--txt2)}
#ainsBox .lr.good{color:var(--hpFg);background:var(--hpBg);border-color:var(--hpBd)}
#ainsBox .lr.bad{color:var(--chFg);background:var(--chBg);border-color:var(--chBd)}
#ainsBox .achips.tight{margin-top:9px}
#ainsBox .achips.tight span.on{background:var(--hpBg);color:var(--hpFg);border-color:var(--hpBd)}
#ainsBox .ndet{margin-top:12px}
#ainsBox .ndet > summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--acc);
  padding:8px 2px}
#ainsBox .ndet > summary::-webkit-details-marker{display:none}
#ainsBox .ndet > summary:after{content:' ＋'}
#ainsBox .ndet[open] > summary:after{content:' －'}
#ainsBox .lrows{background:var(--card2);border:1px solid var(--line);border-radius:7px}

/* 아스트로 — STEP 세 덩어리 (사장님 형식) */
#ainsBox .stp2{background:var(--card2);border:1px solid var(--line);border-radius:7px;
  padding:11px 12px;margin-bottom:9px}
#ainsBox .sh{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
#ainsBox .sh i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc)}
#ainsBox .sh b{font-size:12.5px}
#ainsBox .ssign{font-size:15px;font-weight:800;color:var(--acc)}
#ainsBox .sh small{font-size:11px;color:var(--mut)}
#ainsBox .sl{margin-top:7px;font-size:13px;line-height:1.6}
#ainsBox .sl b{font-weight:800}
#ainsBox .sl b.good{color:var(--hpFg)}
#ainsBox .sl b.bad{color:var(--chFg)}
#ainsBox .sl b.amp{color:var(--acc)}
#ainsBox .sl small{font-size:11px;color:var(--mut);font-weight:600}
#ainsBox .sp{margin-top:4px;font-size:12px;color:var(--txt2);line-height:1.6}
#ainsBox .sm{margin-top:5px;font-size:12px;color:var(--txt2);line-height:1.6;
  border-top:1px dashed var(--line);padding-top:6px}
#ainsBox .sm b{color:var(--txt);font-weight:700}
#ainsBox .sm .mut{color:var(--mut)}
#ainsBox .sk{margin-top:5px;font-size:11.5px;color:var(--mut)}
#ainsBox .sk i{font-style:normal;color:var(--txt2)}

/* 네이탈 인사이트 — 차트 핵심 · 세 단계 */
#ainsBox .ntxt{font-size:12.5px;line-height:1.7;color:var(--txt2);margin-top:2px}
#ainsBox .ntxt b{color:var(--txt);font-weight:700}
#ainsBox .nflow{margin-top:9px;padding-left:9px;border-left:3px solid var(--acc);
  font-size:12.5px;font-weight:700;color:var(--txt2)}
#ainsBox .nbox{background:var(--card);border:1px solid var(--line);border-radius:7px;
  padding:11px 12px;font-size:12.5px;font-weight:700;text-align:center;color:var(--txt2)}
#ainsBox .nnote{margin-top:7px;font-size:11.5px;line-height:1.65;color:var(--mut)}
#ainsBox .nsteps{padding:0}
#ainsBox .nst{padding:10px 12px;border-bottom:1px solid var(--line)}
#ainsBox .nst:last-child{border-bottom:0}
#ainsBox .nsn{display:block;font-size:11px;color:var(--mut);font-weight:700;margin-bottom:3px}
#ainsBox .nst b{font-size:13px;font-weight:800}
#ainsBox .nst b i{font-style:normal;font-size:10px;color:var(--mut);margin-left:3px}
#ainsBox .nst p{margin:4px 0 0;font-size:11.5px;line-height:1.65;color:var(--mut)}
#ainsBox .nst b em{font-style:normal;font-size:10px;color:#fff;background:var(--acc);border-radius:4px;padding:1px 5px;margin-left:4px}

/* 네이탈 인사이트 — 정리된 틀 */
#ainsBox .nhl{font-size:19px;font-weight:800;line-height:1.4;margin:2px 0 10px}
#ainsBox .ndet[open] > summary{margin-bottom:4px}
#ainsBox .nsec{font-size:12.5px;font-weight:800;color:var(--txt2);margin:18px 0 8px;
  padding-top:14px;border-top:1px solid var(--line)}
#ainsBox .ntab{display:grid;gap:0}
#ainsBox .ntr{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line)}
#ainsBox .ntr:last-child{border-bottom:0}
#ainsBox .ntk{font-size:11.5px;color:var(--mut);font-weight:700}
#ainsBox .ntv b{font-size:13.5px;font-weight:800}
#ainsBox .ntv b u{text-decoration:none;font-size:10px;color:var(--mut);font-weight:600;margin-left:3px}
#ainsBox .ntv i{display:block;font-style:normal;font-size:11px;color:var(--mut);margin-top:2px}
#ainsBox .ntv p{margin:5px 0 0;font-size:11.5px;line-height:1.65;color:var(--mut)}
#ainsBox .ndrow{border:1px solid var(--line);border-radius:7px;background:var(--card);
  margin-bottom:7px}
#ainsBox .ndrow > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:11px 12px;font-size:13px}
#ainsBox .ndrow > summary::-webkit-details-marker{display:none}
#ainsBox .ndrow > summary:after{content:'＋';margin-left:auto;color:var(--mut);font-size:12px}
#ainsBox .ndrow[open] > summary:after{content:'－'}
#ainsBox .nds{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;
  background:var(--card2);border:1px solid var(--line)}
#ainsBox .nds.good{color:var(--hpFg);background:var(--hpBg);border-color:var(--hpBd)}
#ainsBox .nds.bad{color:var(--chFg);background:var(--chBg);border-color:var(--chBd)}
#ainsBox .nds.mid{color:var(--acc);background:var(--selBg);border-color:#e8d9bd}
#ainsBox .ndb{padding:0 12px 11px;font-size:12px;line-height:1.7;color:var(--txt2)}
#ainsBox .ndb i{font-style:normal;color:var(--mut);font-size:11px}
#ainsBox .ndb .ndc{color:var(--chFg)}
#ainsBox .nhl span{font-size:14px;font-weight:700;color:var(--txt2);margin-left:6px}

/* 상담 포인트 표 */
#ainsBox .ndsub{font-size:11px;color:var(--mut);font-weight:600}
#ainsBox .ntbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:2px}
#ainsBox .ntbl th{background:var(--card2);color:var(--mut);font-size:11px;font-weight:700;
  text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
#ainsBox .ntbl td{padding:8px;border-bottom:1px solid var(--msLine);color:var(--txt2)}
#ainsBox .ntbl tr:last-child td{border-bottom:0}
#ainsBox .ntbl td b{color:var(--txt);font-weight:800}
#ainsBox .ntbl .nhh{color:var(--acc);font-weight:700}
#ainsBox .ntbl sup{color:var(--mut)}
#ainsBox .ndf{margin-top:9px;font-size:11.5px;color:var(--acc);font-weight:700}
#ainsBox .ndn{margin-top:4px;font-size:10.5px;color:var(--mut)}

/* 로드의 작용 — 줄 펼치기 */
#ainsBox .nrow{border-bottom:1px solid var(--line)}
#ainsBox .nrow:last-child{border-bottom:0}
#ainsBox .nrow > summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:62px 1fr auto;gap:10px;align-items:baseline;padding:11px 0}
#ainsBox .nrow > summary::-webkit-details-marker{display:none}
#ainsBox .nrow .nsd{font-size:11px;color:var(--mut)}
#ainsBox .nrow .nsd:after{content:' ＋'}
#ainsBox .nrow[open] .nsd:after{content:' －'}
#ainsBox .nrb{padding:0 0 11px 72px;font-size:11.5px;line-height:1.7;color:var(--mut)}
#ainsBox .ndf2{font-size:11.5px;color:var(--mut);margin-top:9px}

#ainsBox .nrow2{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line)}
#ainsBox .nrow2:last-child{border-bottom:0}
#ainsBox .ntbl.fo{margin-top:10px}
#ainsBox .nsec span{font-size:11px;font-weight:600;color:var(--mut);margin-left:6px}
#ainsBox .ndn b{color:var(--txt2)}

/* 아스트로 인사이트 — 만세력 포맷과 같게 */
#ainsBox .insgrp{background:transparent;border:0;padding:0;margin-bottom:14px}
#ainsBox .insbody{background:var(--card2);border:1px solid var(--line);border-radius:7px;
  padding:11px 12px;overflow:hidden}
#ainsBox .ihead{display:flex;align-items:baseline;gap:7px;margin:0 2px 7px}
#ainsBox .ihead i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc)}
#ainsBox .ihead b{font-size:14px}
#ainsBox .ihead small{font-size:11px;color:var(--mut)}
#ainsBox .insbody .ihl{margin:-11px -12px 11px;background:var(--card);border:0;
  border-bottom:1px solid var(--line);border-radius:7px 7px 0 0;padding:14px 13px;
  font-size:17px;font-weight:800;line-height:1.45}
/* 로드가 걸치는 하우스 키워드 — 위 표와 구분선으로 떼어낸다 (사장님 2026-10-02) */
#ainsBox .insbody .ikw{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 9px;
  padding-top:9px;border-top:1px solid var(--line)}
#ainsBox .insbody .ikw span{font-size:11.5px;font-weight:700;color:var(--acc);background:var(--selBg);
  border:1px solid #e8d9bd;border-radius:6px;padding:4px 9px}
#ainsBox .insbody .ntab{margin:0}
#ainsBox .ntbl .nst2{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin-top:3px}

/* 전문 분석 — 행성 상태 · 위치표 */
#ainsBox .pnote{font-size:11.5px;line-height:1.7;color:var(--mut);background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:10px 12px;margin-bottom:10px}
#ainsBox .ptw{overflow-x:auto}
#ainsBox .ptbl{width:100%;min-width:560px;border-collapse:collapse;font-size:11.5px}
#ainsBox .ptbl th{background:var(--card);color:var(--mut);font-size:11px;font-weight:700;
  text-align:left;padding:8px;border-bottom:1px solid var(--line)}
#ainsBox .ptbl td{padding:9px 8px;border-bottom:1px solid var(--msLine);color:var(--txt2);
  vertical-align:top;line-height:1.6}
#ainsBox .ptbl tr:last-child td{border-bottom:0}
#ainsBox .ptbl i{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin-top:2px}
#ainsBox .ptbl .pl b{font-size:12.5px;color:var(--txt)}
#ainsBox .ptbl .pv b{font-size:12px;font-weight:800}
#ainsBox .ptbl .pv.good b{color:var(--hpFg)}
#ainsBox .ptbl .pv.bad b{color:var(--chFg)}
#ainsBox .ptbl .pv.mid b{color:var(--acc)}
#ainsBox .ptbl .pnow{margin-top:4px;color:var(--acc);font-weight:700}

#ainsBox .insbody .ihl span{font-size:12px;font-weight:600;color:var(--mut);margin-left:6px}
#ainsBox .ntv b span.good{color:var(--hpFg)}
#ainsBox .ntv b span.bad{color:var(--chFg)}
#ainsBox .ntv b span.amp{color:var(--acc)}
#ainsBox .ikw span.on{background:var(--hpBg);color:var(--hpFg);border-color:var(--hpBd)}
#ainsBox .areas .arw:last-of-type{border-bottom:1px solid var(--line)}
#ainsBox .ntv.good{color:var(--hpFg)}
#ainsBox .ntv.bad{color:var(--chFg)}
#ainsBox .ntv.amp{color:var(--acc)}
#ainsBox .ntv i{display:inline;font-size:11px}
#ainsBox .ntv.flow{font-size:12px}
#ainsBox .ntv.flow em{font-style:normal;color:var(--acc);margin:0 3px}
#ainsBox .ntv.flow b{color:var(--acc)}
#ainsBox .ntv.flow u{text-decoration:none;font-size:10.5px;color:var(--mut);margin-left:2px}

#ainsBox .obsline{margin:-4px 2px 14px;font-size:11.5px;line-height:1.7;color:var(--acc);font-weight:700}

/* STEP 머리 — SR·네이탈 자리 강조 */
#ainsBox .ihl .hbg{display:inline-flex;gap:5px;margin-left:9px;vertical-align:middle}
#ainsBox .ihl .hbg b{font-size:13px;font-weight:800;color:#fff;background:var(--acc);
  border-radius:6px;padding:3px 9px}
#ainsBox .ihl .hbg b:nth-child(2){background:var(--ink)}
#ainsBox .ihl .hbg em{font-style:normal;font-size:12px;font-weight:700;color:var(--txt2);
  background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:3px 9px}

/* 아스트로 인물 바 */
.pbar2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:10px 12px;margin-bottom:10px}
.pbar2 .av{width:28px;height:28px;border-radius:6px;background:var(--selBg);color:var(--acc);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.pbar2 > b{font-size:15px;font-weight:800}
.pbar2 .m{font-size:12px;color:var(--txt2)}
.pbar2 .m2{font-size:11px;color:var(--mut)}
.pbar2 .bt{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.pbar2 .bt button{border:1px solid var(--line);background:var(--card2);border-radius:7px;
  padding:6px 11px;font-size:11.5px;font-weight:700;color:var(--txt2);white-space:nowrap}
.pbar2 .bt button.k{color:var(--acc);border-color:#e6d2ae;background:var(--selBg)}
@media (max-width:759px){
  .pbar2 .bt{margin-left:0;width:100%;overflow-x:auto}
  .pbar2 .bt button{flex:none}
}

/* 인물 바 — 글자·버튼 크기 통일 (사장님 2026-09-29) */
.pbar2 .m,.pbar2 .m2{font-size:13px;color:var(--txt2)}
.pbar2 .bt button{font-size:13px;padding:8px 13px}
.pbar2 .bt button.g1{color:var(--txt2);background:var(--card2);border-color:var(--line)}
.pbar2 .bt button.k{color:var(--acc);border-color:#e6d2ae;background:var(--selBg)}
.pbar2{position:relative}
.pswrap{position:absolute;top:100%;left:0;z-index:30;margin-top:4px;background:var(--card);
  border:1px solid var(--line2);border-radius:8px;box-shadow:0 6px 18px rgba(120,100,60,.18);
  min-width:240px;max-height:320px;overflow-y:auto;padding:6px}
.pswrap.hide{display:none}
.pslist button{display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;
  padding:8px 10px;border-radius:6px;font-size:13px}
.pslist button:hover{background:var(--selBg)}
.pslist button b{font-weight:700}
.pslist button i{font-style:normal;font-size:11.5px;color:var(--mut)}
/* 인사이트 카드 제목도 같은 크기 */
.card.pro>summary b{font-size:15px}
.card.pro>summary small{font-size:12px}
#insBox .ihead b,#ainsBox .ihead b{font-size:14.5px}

#ainsBox .ntbl td i{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin-top:2px}
#ainsBox .insbody > .ndrow{background:var(--card)}

#ainsBox .ndlab{font-size:12px;color:var(--txt2)}
#ainsBox .ndlab b{color:var(--acc);font-weight:800}
#ainsBox .ndrow > summary .nds:empty{display:none}
#ainsBox .ntbl .nds{display:inline-block;min-width:26px;text-align:center;font-size:12px;font-weight:800}

/* 길 · 중 · 흉 표시 — 모양 + 색 */
#ainsBox .vsig{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;
  border-radius:6px;padding:2px 8px;border:1px solid var(--line);background:var(--card2);color:var(--txt2)}
#ainsBox .vsig i{font-style:normal;font-size:10px;line-height:1}
#ainsBox .vsig.good{color:var(--hpFg);background:var(--hpBg);border-color:var(--hpBd)}
#ainsBox .vsig.bad{color:var(--chFg);background:var(--chBg);border-color:var(--chBd)}
#ainsBox .vsig.mid{color:var(--txt2)}

/* 지표성 별점 — /115 와 같은 5단계 */
#ainsBox .stars{font-size:13px;letter-spacing:1px;color:var(--acc);white-space:nowrap;display:inline-block}
#ainsBox .stars i{font-style:normal;color:var(--line2);white-space:nowrap;display:inline!important;margin:0}
#ainsBox .stars.s1,#ainsBox .stars.s2{color:var(--chFg)}
#ainsBox .stars.s4,#ainsBox .stars.s5{color:var(--hpFg)}

/* 펼침형 섹션 (솔라리턴 ASC · 프로펙션 …) */
#ainsBox .secd{border:1px solid var(--line);border-radius:7px;background:var(--card);overflow:hidden}
#ainsBox .secd{margin-bottom:10px}
#ainsBox .secd > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  gap:5px 8px;padding:12px 13px;background:var(--card)}
#ainsBox .secd > summary .sdt{grid-column:1;display:flex;align-items:baseline;gap:7px}
#ainsBox .secd > summary .sdt i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc)}
#ainsBox .secd > summary .sdt b{font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.3px}
#ainsBox .secd > summary .sdh{grid-column:1/-1}
/* 부제 없는 섹션 — 제목이 첫 줄 (빈 줄 여백 없애기) */
#ainsBox .secd > summary.solo .sdh{grid-column:1;grid-row:1}
#ainsBox .secd > summary:after{grid-column:2;grid-row:1}
#ainsBox .secd[open] > summary{border-bottom:1px solid var(--line)}
#ainsBox .secd > .insbody{border:0;border-radius:0;background:var(--card2)}
#ainsBox .secd > summary::-webkit-details-marker{display:none}
#ainsBox .secd > summary:after{content:'＋';margin-left:auto;color:var(--mut);font-size:12px}
#ainsBox .secd[open] > summary:after{content:'－'}
#ainsBox .secd > summary i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc)}
#ainsBox .secd > summary b{font-size:14.5px}
#ainsBox .sdh{font-size:17px;color:var(--txt);font-weight:800;letter-spacing:-.3px}
#ainsBox .sdh b{font-size:12.5px;font-weight:800;color:#fff;background:var(--acc);border-radius:6px;
  padding:3px 8px;margin-left:5px;vertical-align:2px}
#ainsBox .sdh b:nth-of-type(2){background:var(--ink)}
#ainsBox .sdh em{font-style:normal;font-size:12px;color:var(--mut);margin-left:5px;font-weight:600}
#ainsBox .sdh u{text-decoration:none;font-weight:800;color:var(--acc);font-size:13.5px}
#ainsBox .sdh u.lg{font-size:17px}

.pswrap .psq{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px 10px;
  font:inherit;font-size:13px;background:var(--card2);margin-bottom:6px}
.pslist button.on{background:var(--selBg);color:var(--acc)}
/* 전문 분석 — 행성 상태 칸 (사장님 2026-09-29) */
#ainsBox .ptbl td.pst b{font-size:12px;font-weight:800}
#ainsBox .ptbl td.pst em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc)}
#ainsBox .ptbl td.pst i{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin-top:2px}
#ainsBox .ptbl td.pst i.rcp{color:var(--acc);font-weight:700}

/* ── 인물 바 — 박스 하나로 · 가운데 구분선 · 버튼은 아래 줄 (사장님 2026-09-29) ── */
#whoLine.pbar{border:0;padding:0;background:none;border-radius:0}
.pbar2{padding:11px 13px 0;gap:0 8px;row-gap:0}
.pbar2 .bt{flex-basis:calc(100% + 26px);width:calc(100% + 26px);margin:10px -13px 0;padding:9px 13px 10px;
  border-top:1px solid var(--line);justify-content:flex-start;gap:7px}
@media (max-width:759px){
  .pbar2 .bt{flex-basis:calc(100% + 26px);width:calc(100% + 26px);margin:10px -13px 0}
}

/* ── 내담자 화면 : 폴더 입력·새 인물 (사장님 2026-09-30) ── */
#paneClient .cliviews button.hi{color:#fff;background:var(--acc);border-color:var(--acc)}
#paneClient .cliviews button.fedit{color:var(--txt2);background:var(--card2);font-size:11.5px}
.cliform{display:flex;gap:6px;align-items:center;margin:8px 0 2px}
.cliform.hide{display:none}
.cliform input{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--line2);border-radius:7px;
  background:var(--card);color:var(--txt);font-size:13.5px}
.cliform button{padding:8px 13px;border:1px solid var(--line);border-radius:7px;background:var(--card2);
  color:var(--txt2);font-size:13px;font-weight:700;white-space:nowrap}
.cliform button[data-f="ok"]{color:#fff;background:var(--acc);border-color:var(--acc)}
#regFForm{margin:6px 0 0}
#regFForm input[readonly]{background:var(--card2);color:var(--txt2);font-size:12.5px}

/* 로고 크기 — 좁은 화면에선 조금 줄인다 (사장님 2026-09-30) */
@media (max-width:759px){ .mark{width:31px;height:31px} }

/* ══ 다크 네이비 — 밝은 테마 색이 박혀 있던 자리 되살리기 (사장님 2026-09-30)
      흰 바탕 · 갈색 글자가 그대로 남아 있어 남색 위에서 거의 안 보였다 ══ */
[data-theme="dark"] #insBox .ihead i,
[data-theme="dark"] #insBox .ihead small,
[data-theme="dark"] #insBox .ismall{color:var(--mut)!important}
[data-theme="dark"] #insBox .icl p,
[data-theme="dark"] #insBox .iexpb p{color:var(--txt2)}
[data-theme="dark"] #insBox .itx small{color:var(--txt2)}
[data-theme="dark"] #insBox .iexp>summary{color:var(--acc)}
[data-theme="dark"] #insBox .ihl,
[data-theme="dark"] #insBox .itsum,
[data-theme="dark"] #insBox .iexpb{background:var(--card2);color:var(--txt)}
[data-theme="dark"] #insBox .itsum{border-left-color:var(--acc)}
[data-theme="dark"] #insBox .iexpb{border-color:var(--line2)}
[data-theme="dark"] #insBox .irow{border-bottom-color:var(--line)}
[data-theme="dark"] #insBox .ikl{background:var(--card2);border-color:var(--line2);color:var(--txt2)}
[data-theme="dark"] #insBox .ikl.bad{color:#f2a6a6;border-color:#6d3844}
[data-theme="dark"] #insBox .ikt.m{background:var(--card2);color:var(--txt);border-color:var(--line2)}
/* 명식 타일 — 흰 글자가 초록·노랑 바탕에서 눌린다 : 글자에 그림자를 줘 또렷하게 */
[data-theme="dark"] .tile,[data-theme="dark"] .tile i{text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* ── 다크 : 남은 저대비 세 가지 (사장님 2026-09-30) ── */
/* ① 구분 기호·꼬리표에 선 색(--line2)이 글자색으로 쓰이고 있었다 */
[data-theme="dark"] .who i,
[data-theme="dark"] .pl .ly.kw i.kgen{color:var(--mut)}
/* ② 오행 색 위의 흰 글자 — 다크에선 바탕을 한 단계 진하게 */
[data-theme="dark"]{--mokBg:#17784a; --hwaBg:#b8322b;   /* 토·수는 원래 대비가 충분하다 */
  --okT:#5fd39a; --midT:#e5c06a; --badT:#f28b84; --tuchC:#6fc3e0; --tuchBg:#1d3445}
[data-theme="dark"] #insBox .ubox .uhl i{color:var(--mut)}
/* ③ 화(붉은) 글자를 본문 색으로 쓸 때는 밝은 쪽으로 */
[data-theme="dark"] .pl .ly.h3 .tag,
[data-theme="dark"] .pl .ly.kw b.kn,
[data-theme="dark"] .pl .ly.kw i.kend,
[data-theme="dark"] .pl .ly.kw b.kn i.kact,
[data-theme="dark"] .pl .ly.kw b.kn+i.kact,
[data-theme="dark"] .pl .ly b.bad{color:#f28b84}
[data-theme="dark"] .pl .ly.h1 .tag,
[data-theme="dark"] .pl .ly.kw b.kp{color:#5fd39a}

/* ── 다크 : 표·목록 안의 각 글리프는 휠(흰 바탕)용 색이라 남색 위에서 어둡다 (사장님 2026-09-30)
      휠 SVG 안은 건드리지 않고, 표·목록에 나온 것만 밝은 쪽으로 바꾼다 ── */
[data-theme="dark"] td.sym[style],
[data-theme="dark"] table b[style*="color"]{filter:brightness(1.85) saturate(.85)}
[data-theme="dark"] #ainsBox .stars i{color:#4d5f7e}

/* ── T라인 : 일지 옆 월지 원형 (사장님 2026-09-30) ── */
/* 일지는 일간 아래(가운데), 월지는 월간 아래 (사장님 2026-09-30)
   월지는 T 네 자리와 구분되게 바깥 박스를 원형으로 — 글자 타일은 나머지와 같다 */
#insBox .tgraph .tmw{grid-column:3;grid-row:3;display:flex;flex-direction:column;
  align-items:center;gap:4px}
#insBox .tgraph .tm{border-radius:50%;border-style:dashed}
#insBox .tgraph .tmw .tuc{text-decoration:none;font-size:10px;font-weight:800;
  color:var(--acc);background:var(--selBg);border:1px solid #e6d2ae;border-radius:5px;
  padding:1px 6px;white-space:nowrap}
[data-theme="dark"] #insBox .tgraph .tmw .tuc{border-color:var(--line2);background:var(--card2)}



/* T라인 칸 — 오행별로 타일 높이가 달라 십성 글자가 눌려 잘렸다 (사장님 2026-09-30 「정재 반절 깨짐」) */
#insBox .tgraph .tg{height:auto;min-height:80px}
#insBox .tgraph .tg .ikt{flex:none;height:26px;line-height:24px;box-sizing:border-box}
#insBox .tgraph .tg small,#insBox .tgraph .tg b{flex:none}
/* 월지가 투출된 천간 — 그 글자 타일 테두리를 강조색으로 (사장님 2026-09-30) */
/* 월지가 투출된 천간 — 바깥 라운드 박스 테두리만 색으로 (바탕은 그대로 · 사장님 2026-09-30) */
/* 테두리 색 = 그 지지의 오행 색 (사장님 2026-09-30)
   금은 원래 색이 거의 흰색이라 선용으로 한 단계 진한 값을 따로 쓴다 */
/* 투출 박스선은 실선 — 점선은 가로 연결선에만 쓴다 (사장님 2026-09-30) */
#insBox .tgraph .tg.tuch{border-color:var(--tuchC);box-shadow:0 0 0 1px var(--tuchC)}
#insBox .tgraph .tg.tuch-w{--tuchC:#1f9a5a}
#insBox .tgraph .tg.tuch-f{--tuchC:#d93a32}
#insBox .tgraph .tg.tuch-e{--tuchC:#c8951c}
#insBox .tgraph .tg.tuch-m{--tuchC:#9aa4ad}
#insBox .tgraph .tg.tuch-wa{--tuchC:#3f4a58}
[data-theme="dark"] #insBox .tgraph .tg.tuch-w{--tuchC:#3fc98a}
[data-theme="dark"] #insBox .tgraph .tg.tuch-f{--tuchC:#f28b84}
[data-theme="dark"] #insBox .tgraph .tg.tuch-e{--tuchC:#e5c06a}
[data-theme="dark"] #insBox .tgraph .tg.tuch-m{--tuchC:#d5dde6}
[data-theme="dark"] #insBox .tgraph .tg.tuch-wa{--tuchC:#8fa6c4}

/* 등록 화면 머리줄 (사장님 2026-09-30) */
.reghead{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.reghead button{border:1px solid var(--line);background:var(--card2);color:var(--txt2);
  border-radius:8px;padding:8px 13px;font-size:13px;font-weight:700;white-space:nowrap}
.reghead b{font-size:16px;font-weight:800}
/* 차트 표시 범례 — 제목줄 (사장님 2026-09-30) */
.card h5 .mklg{display:inline-flex;align-items:center;gap:4px;margin-right:9px;
  font-size:11.5px;font-weight:700;color:var(--txt2)}
.card h5 .mklg i{width:13px;height:4px;border-radius:2px;display:inline-block}

/* ── 빈 화면 — 고른 사람이 없을 때 (사장님 2026-09-30 「아무것도 없이 나오는게 맞아?」)
      아스트로만 보는 모드에서는 만세력 탭이 없으므로 그 탭을 가리키면 안 된다 ── */
.emptypane{margin:34px auto;max-width:420px;text-align:center;padding:26px 18px;
  border:1px dashed var(--line);border-radius:14px;background:var(--card)}
.emptypane b{display:block;font-size:15px;color:var(--txt);margin-bottom:6px}
.emptypane p{margin:0 0 15px;font-size:12.5px;color:var(--mut);line-height:1.6}
.emptypane .ebtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.emptypane button{padding:8px 15px;border-radius:9px;border:1px solid var(--acc);
  background:var(--acc);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}
.emptypane button.gh{background:transparent;color:var(--acc)}

/* ── 좁은 화면 메뉴 — 글자는 그대로 두고 여백만 줄인다 (사장님 2026-09-30 모바일) ── */
@media (max-width:560px){
  .tb.top{padding:6px 8px;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tb.top::-webkit-scrollbar{display:none}
  .tb.top button{padding:7px 10px;font-size:12.5px;gap:5px}
  .tb.top button i{font-size:13px}
  .tb.top .navset{font-size:10.5px;padding:5px 9px}
}
@media (max-width:420px){
  .tb.top button{padding:6px 7px;font-size:12px;gap:4px}
  .tb.top .navset{font-size:10px;padding:4px 8px;letter-spacing:-.4px}
}

/* ── 좁은 폰 : 헤더 아이콘이 둘째 줄로 밀리지 않게 (사장님 2026-09-30 모바일) ── */
@media (max-width:430px){
  .hd{--hdpad:10px;gap:6px}
  .hd .wm{font-size:13px}
  .hd .wm em{font-size:9px}
  .hic{width:29px!important;height:29px;font-size:13px!important}
}
@media (max-width:350px){
  .hd .wm em{display:none}
  .hd .mark{width:28px;height:28px}
  .hd .wm .wmt{height:13px;width:112px}
  .hic{width:27px!important;height:27px;font-size:12.5px!important}
}

/* ── 인물 바 버튼은 좁아도 한 줄 (사장님 2026-09-30 「인물바꾸기 사람등록 상담기록도 한줄로」)
      넘치면 줄바꿈 대신 가로로 밀린다 (.bt 에 이미 overflow-x:auto) ── */
@media (max-width:759px){
  .pbar2 .bt{flex-wrap:nowrap}
}
@media (max-width:430px){
  .pbar2 .bt{gap:6px}
  .pbar2 .bt button{font-size:12px;padding:7px 10px}
}
@media (max-width:350px){
  .pbar2 .bt button{font-size:11px;padding:7px 8px;letter-spacing:-.3px}
}

/* 올해의 주제 — 로드 위 한 줄 (사장님 2026-10-01) */
#panePred .nrow2.thm .ntv b{color:var(--acc);font-weight:800;letter-spacing:-.2px}
#panePred .nrow2.thm{background:var(--selBg);border-radius:6px}

/* 위치 행성 — SR / 네이탈 두 줄 (사장님 2026-10-01) */
#panePred .nrow2 .ntk i{font-style:normal;font-weight:700;font-size:10px;color:var(--acc);
  margin-left:3px;letter-spacing:-.2px}

/* ── 텀 디렉션 — 모리누스 Directions 표 (사장님 2026-10-01) ── */
.tbl.pdt.td .prom{letter-spacing:1px}
.tbl.pdt.td .tdsg{font-size:15px;color:var(--acc)}
.tbl.pdt.td .tdpl{font-size:15px}
#panePred #tdBase{margin-bottom:8px}
.tbl.pdt .prom .pdtm{font-style:normal;font-size:10.5px;color:var(--mut);margin-left:4px}
/* 디렉션 안쪽 갈래 탭 — 바깥 서브탭과 클래스를 나눈다 (사장님 2026-10-01 「클릭하면 없어짐」) */
/* 디렉션 탭 — 고른 탭 위에 크림톤 띠 (사장님 2026-10-18 「위쪽에 띠있던걸로」).
   안 보인다고 하셔서 띠를 3px 로 올리고, 고른 탭만 밝게 띄운다 */
#panePred .pdviews{display:flex;align-items:flex-end;gap:4px;overflow-x:auto;
  margin:14px 0 16px;padding:0 1px;scrollbar-width:none;
  border-bottom:1px solid var(--msLine)}
#panePred .pdviews::-webkit-scrollbar{height:0}
#panePred .pdv{flex:none;position:relative;display:inline-flex;align-items:center;
  background:var(--card2);border:1px solid var(--msLine);border-bottom:0;
  border-radius:5px 5px 0 0;margin-bottom:-1px;transition:background .12s}
/* 올렸을 때도 고른 탭과 같은 모양 — 흰 바탕에 띠. 다만 띠를 연하게 해 지금 고른 것과 구분
   (사장님 2026-10-18 「오버시도 나오도록」 · 「오버시에도 색상은 흰색과 띠여야지」 ·
   「첫째와 같이」 — 고른 탭과 똑같이 보이게) */
#panePred .pdv:hover{background:var(--card);box-shadow:inset 0 3px 0 var(--acc)}
#panePred .pdv:hover button{color:var(--acc)}
#panePred .pdv.on:hover{box-shadow:inset 0 3px 0 var(--acc)}
#panePred .pdv.on:hover button{color:var(--acc)}
#panePred .pdv button{border:0;background:transparent;color:var(--mut);font-size:12.5px;
  padding:10px 3px 10px 14px;cursor:pointer;white-space:nowrap;font-weight:600}
#panePred .pdv button.x{padding:10px 11px 10px 6px;font-size:13px;line-height:1;opacity:.45}
#panePred .pdv button.x:hover{opacity:1;color:#b3462f}
/* 고른 탭 : 위 띠 3px + 카드색으로 떠오르고 밑줄이 끊긴다 */
#panePred .pdv.on{background:var(--card);border-color:var(--msLine);
  box-shadow:inset 0 3px 0 var(--acc)}
#panePred .pdv.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--card)}
#panePred .pdv.on button{color:var(--acc);font-weight:800;padding-top:11px}
#panePred .pdv.on button.x{opacity:.65}
#panePred .pdviews input.nmed{font-size:12.5px;font-weight:800;color:var(--acc);border:0;
  background:transparent;outline:0;padding:11px 3px 10px 14px;width:13em;font-family:inherit}
#panePred .pdviews .pdlord{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--mut);
  white-space:nowrap;padding:0 2px 10px 10px}
#panePred .pdviews .pdlord b{font-weight:800;color:var(--acc);margin-left:3px}
#panePred .pdsetcard{margin-bottom:10px}
#panePred .pdhint{font-size:11.5px;color:var(--mut);line-height:1.7;margin:0 0 10px}
#panePred .pdhint b{color:var(--acc)}
.pdok button.save{border-color:var(--acc);color:var(--acc);font-weight:700}
.pdok button.txt{border:0;background:transparent;color:var(--mut);padding:7px 8px;
  text-decoration:underline;font-size:12px}

/* 모리누스 Zodiacal Options — 체크박스 줄 (사장님 2026-10-01) */
.pdset .pdchk{display:block;margin-bottom:5px}
.pdset .pdchk button{width:100%;text-align:left;font-size:12.5px;padding:7px 11px;
  border:1px solid var(--line);background:var(--card);color:var(--txt2);border-radius:7px}
.pdset .pdchk button.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);font-weight:700}
.pdset .setrow button.soon{opacity:.38;cursor:default;border-style:dashed}

/* ── 디렉션 설정 — 모리누스 창 배치 (사장님 2026-10-01) ── */
.pdset.mor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  align-items:start;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:11px}
.pdset.mor .pdcol{min-width:0;display:flex;flex-direction:column;gap:9px}
.pdset.mor .pdbox{border:1px solid var(--line);border-radius:7px;padding:7px 9px 9px;margin:0}
.pdset.mor .pdbox legend{font-size:11px;font-weight:700;color:var(--mut);padding:0 4px}
.pdset.mor .pdsub{font-size:11px;color:var(--mut);margin:2px 0 0 4px}
.pdset.mor .pdlist{display:flex;flex-direction:column;gap:2px;margin:0}
.pdset.mor .pdlist button{display:flex;align-items:flex-start;gap:5px;text-align:left;
  width:100%;font-size:12px;line-height:1.35;padding:4px 6px;border:0;background:none;
  color:var(--txt2);border-radius:5px}
.pdset.mor .pdlist button .mk{flex:none;font-size:12.5px;color:var(--mut)}
.pdset.mor .pdlist button.on{color:var(--acc);font-weight:700;background:var(--selBg)}
.pdset.mor .pdlist button.on .mk{color:var(--acc)}
.pdset.mor .pdlist button.soon{opacity:.35;cursor:default;border:0}
@media (max-width:759px){
  .pdset.mor{grid-template-columns:1fr 1fr;gap:8px;padding:9px}
  .pdset.mor .pdcol:first-child{grid-column:1 / -1}
}
@media (max-width:430px){
  .pdset.mor{grid-template-columns:1fr}
  .pdset.mor .pdcol:first-child{grid-column:auto}
}
/* 디렉션 설정 — Ok / Cancel (사장님 2026-10-01) */
.pdok{display:flex;align-items:center;gap:7px;margin:9px 0 4px}
.pdok button{padding:7px 20px;border-radius:7px;border:1px solid var(--line);
  background:var(--card);color:var(--txt2);font-size:12.5px;font-weight:700}
.pdok button.ok{border-color:var(--acc);background:var(--acc);color:#fff}
.pdok button.ok:disabled{opacity:.4;background:var(--card2);color:var(--mut);border-color:var(--line)}
.pdok .pddirty{font-style:normal;font-size:11px;color:var(--acc)}

/* 차트는 카드 안쪽 여백까지 쓴다 — 그만큼 휠이 커진다 (사장님 2026-10-01) */
.card .in > .plate{margin-left:-10px;margin-right:-10px}
@media (min-width:700px){ .card .in > .plate{margin-left:-14px;margin-right:-14px} }

/* 네이탈과 함께 — 위아래로 나란히. 휠은 네모 안의 원이라 위아래가 비니
   그만큼 당겨 붙여 빈 공간을 없앤다 (사장님 2026-10-01 「여백을 좀 줄여서 타이트하게」) */
.wstack{display:flex;flex-direction:column;gap:0}
.wstack .wsttl{font-size:11px;font-weight:800;color:var(--acc);letter-spacing:-.2px;
  padding:3px 2px 0;margin-bottom:-2px;position:relative;z-index:1}
.wstack .wsttl + svg{margin-top:-5%}
.wstack svg{margin-bottom:-5%}
.wstack svg:last-child{margin-bottom:-3%}

/* 차트가 카드 여백까지 쓰면서 아래 모서리가 각져 보였다 — 카드 둥근 모서리로 잘라 준다
   (사장님 2026-10-01 「차트 박스 아래쪽 라운드 없음」) */
#panePred .card, #paneChart .card, #paneInput .card{overflow:hidden}
.wstack svg:last-child{margin-bottom:-3%}
.card .in > .plate{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}

/* 텀 디렉션 — 앵글 사인(ASC·IC·DSC·MC)에 떨어지는 줄은 통째로 색 (사장님 2026-10-01) */
.tbl.pdt tr.angrow > td{background:var(--selBg)}
.tbl.pdt tr.angrow td.prom .tdsg,
.tbl.pdt tr.angrow td.prom .tdpl{color:var(--acc);font-weight:800}
.tbl.pdt tr.angrow td{color:var(--acc2,#7a4a12)}
.tbl.pdt td.prom .tdsg{color:var(--mut)}

/* ── 전왕 판정 (사장님 2026-10-01) ── */
#insBox .jwbox{border:1px solid var(--line);border-radius:9px;margin:10px 0 2px;
  background:var(--card2);overflow:hidden}
#insBox .jwbox.on{border-color:var(--acc);background:var(--selBg)}
#insBox .jwbox > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:7px;padding:9px 11px;font-size:13px}
#insBox .jwbox > summary::-webkit-details-marker{display:none}
#insBox .jwbox > summary b{color:var(--txt)}
#insBox .jwbox .jwlv{font-size:11.5px;font-weight:800;color:#fff;background:var(--mut);
  border-radius:999px;padding:2px 9px}
#insBox .jwbox.on .jwlv{background:var(--acc)}
#insBox .jwbox.may .jwlv{background:#b5701f}
#insBox .jwbox .jwpt{font-size:12.5px;font-weight:700;color:var(--acc)}
#insBox .jwbox .jwb{padding:0 11px 11px}
#insBox .jwbox .jwys{margin:0 0 7px;font-size:12.5px;color:var(--txt2);line-height:1.6}
#insBox .jwbox .jwys b{color:var(--acc)}
#insBox .jwbox .jwys i{display:block;font-style:normal;font-size:11.5px;color:var(--mut);margin-top:2px}
#insBox .jwbox .jwr{margin:0;padding-left:16px;font-size:12px;color:var(--txt2);line-height:1.65}
#insBox .jwbox .jwr li.bad{color:var(--badT,#b23b3b)}

/* 전문 분석 — 용신 칸의 전왕·조후 줄 (사장님 2026-10-01) */
#yongBox .ybar{margin-top:8px;padding:7px 9px;border-radius:7px;background:var(--card2);
  border:1px solid var(--line);font-size:11.5px;color:var(--txt2);line-height:1.55}
#yongBox .ybar b{color:var(--txt);margin-right:4px}
#yongBox .ybar em{font-style:normal;font-weight:800;color:var(--acc)}
#yongBox .ybar i{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin-top:3px}
#yongBox .ybar.jw{border-color:var(--acc)}
#yongBox .ybar.bad{border-color:#d8a3a3}
#yongMeta .ymsame{font-style:normal;font-weight:800;color:var(--acc)}

/* 대운·세운·월운 칸의 신살 (사장님 2026-10-01) */
.sx .ssx{font-size:9px;line-height:1.25;color:var(--acc);font-weight:700;margin-top:2px;
  letter-spacing:-.3px;white-space:normal;word-break:keep-all}
.sx.on .ssx, .sx.now .ssx{color:var(--acc2,#7a4a12)}
/* 네이탈 차트 아래 — 요일·시간의 주인 (사장님 2026-10-02) */
.hourlord{text-align:center;font-size:12.5px;color:var(--txt2);padding:7px 0 2px}
.hourlord b{color:var(--acc);font-weight:800}
.hourlord i{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin-top:2px}

/* 출생시각 미상 경고 (사장님 2026-10-04 검수 #1) */
.pbar2 .ntwarn{grid-column:1/-1;margin:7px 0 0;padding:8px 11px;border-radius:9px;
  background:#fdf0e4;border:1px solid #e9c49a;color:#8a4b12;
  font-size:11.5px;line-height:1.55;word-break:keep-all}
.pbar2 .ntwarn b{color:#7a3d08;font-weight:800}
:root[data-theme="dark"] .pbar2 .ntwarn{background:#3a2a16;border-color:#6b4a22;color:#f0c893}
.chartinfo .tw{color:#b5420f;font-weight:800}

/* 월운 칸의 절기 구간 (사장님 2026-10-04) */
.sx .a .jsp{display:block;font-style:normal;font-size:8.5px;font-weight:600;
  color:var(--mut);letter-spacing:-.3px;margin-top:1px}

/* 점수 범례 (사장님 2026-10-04 검수 #7) */
.lgd{display:block;font-style:normal;font-size:10px;line-height:1.5;color:var(--mut);
  margin-top:3px;word-break:keep-all}
.lgd b{color:var(--txt2);font-weight:700}

/* 가로 메뉴·탭이 더 있다는 표시 — 끝에 흐려지는 띠 (사장님 2026-10-04 검수 권장 #7) */
.tb.top{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.tb.top::-webkit-scrollbar{height:0}
.subtabs{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%)}
/* 그 흐림 띠가 오른쪽 끝의 「⚙ 세팅」 칩을 지워 버렸다(실측 : 칩 끝이 띠 안쪽 4px).
   띠 너비만큼 안쪽 여백을 둬서 띠가 빈자리에 떨어지게 한다 (사장님 2026-10-09) */
.tb.top, .hd .tb.top{padding-right:26px}
.subtabs{padding-right:22px}
/* 근거 글자가 너무 작지 않게 (검수 권장 #7) */
#ainsBox .nrow2 .ntv i, #insBox .nrow2 .ntv i{font-size:11.5px;color:var(--txt2)}
.hintline{font-size:11.5px;line-height:1.6;color:var(--txt2)}

/* 조후 — 처방의 출처 (사장님 명세 2026-10-04) */
.ybar.jh .jhest{display:block;font-style:normal;font-size:10.5px;margin-top:3px;color:#b5420f}
.ybar.jh .jhest.ok{color:var(--mut)}
.ybar.jh .jhest b{font-weight:800}

/* 조후 후보군 (사장님 표 2026-10-04) */
.ybar.jh .jhcand{display:block;font-style:normal;font-size:10.5px;line-height:1.6;
  margin-top:4px;color:var(--txt2);word-break:keep-all}
.ybar.jh .jhcand b{color:var(--txt);font-weight:800}
.ybar.jh .jhcand u{text-decoration:none;color:var(--acc);font-weight:700}

/* 한 줄 풀이와 그 아래 키워드 묶음을 선으로 가른다 (사장님 2026-10-04)
   — 옅으면 안 보인다고 하셔서 line2 로 */
#insBox .uwhy{border-bottom:1px solid var(--line2);margin:0 12px 10px;padding:0 0 11px}
#insBox .hkws{padding-top:1px}

/* 「세운 + 원국」 과 「대운 + 세운」 을 선으로 가른다 (사장님 2026-10-04) */
#insBox .hkws > .hksrc ~ .hksrc{border-top:1px solid var(--line2);
  margin-top:12px;padding-top:12px}

/* 배지 줄(전체 작용)과 그 아래 세부를 가른다 · 선 색은 한 가지로 (사장님 2026-10-04) */
#insBox .ubox .ubody{border-bottom:1px solid var(--line)}
#insBox .ubox .ubody:last-child{border-bottom:0}
/* 묶음 이름은 박스 밖 · 내용만 박스 안 */
#insBox .hkws{margin:0;padding:10px 12px 12px;background:transparent;border:0}
/* 묶음 이름을 키운다 (사장님 2026-10-04) */
#insBox .hkws > .hksrc{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:-.2px}
#insBox .hkws > .hkgrp{background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:7px 11px 8px}
#insBox .hkws > .hkgrp + .hksrc{margin-top:12px}
#insBox .hkgrp > .hkw:first-child{border-top:0;padding-top:2px}

/* 다섯 입장별 사건 후보 — 한 입장에 한 줄 (사장님 2026-10-04) */
#insBox .acts{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
#insBox .acts .ahd{display:block;font-style:normal;font-size:10px;font-weight:800;
  color:var(--mut);letter-spacing:.3px;margin-bottom:5px}
#insBox .acts .ahd span{font-weight:600;color:var(--line2);margin-left:4px}
#insBox .acts .arow{display:grid;grid-template-columns:34px 52px 1fr 1fr;gap:6px;
  align-items:baseline;font-size:11.5px;line-height:1.5;padding:2px 0}
#insBox .acts .arow + .arow{border-top:1px dotted var(--line)}
#insBox .acts .agrp{font-style:normal;font-weight:800;color:var(--acc)}
#insBox .acts .aact{font-style:normal;color:var(--mut);font-size:10.5px}
#insBox .acts .kup{font-style:normal;color:var(--hpFg)}
#insBox .acts .kdn{font-style:normal;color:var(--chFg)}
@media (max-width:520px){
  #insBox .acts .arow{grid-template-columns:34px 1fr;row-gap:1px}
  #insBox .acts .aact{grid-column:2}
  #insBox .acts .kup,#insBox .acts .kdn{grid-column:2}
}


/* ══ 자리별 — 네 칸 · 작용은 알약 모양 칩 (사장님 2026-10-04) ══ */
#insBox .pals{display:block}
#insBox .pals .pgrid{display:grid;grid-template-columns:1fr;gap:0}
#insBox .pals .pcel{padding:8px 0}
#insBox .pals .pcel + .pcel{border-top:1px dashed var(--line)}
#insBox .pals .pcel:first-child{padding-top:2px}
#insBox .pals .pcel:last-child{padding-bottom:2px}
/* 알약 */
#insBox .pals .pcel .hkt{display:inline-block;border-radius:999px;padding:2px 9px;
  margin:0 5px 3px 0;vertical-align:middle}
#insBox .pals .pact{display:inline-block;font-size:11.5px;font-weight:800;color:var(--txt2);
  margin:0 9px 3px 0;vertical-align:middle}
#insBox .pals .pcel > span.kup,#insBox .pals .pcel > span.kdn{display:block;
  font-size:11.5px;line-height:1.55;margin-top:3px}
#insBox .pals .kup{color:var(--hpFg)}
#insBox .pals .kup::before{content:'＋ '}
#insBox .pals .kdn{color:var(--chFg)}
#insBox .pals .kdn::before{content:'－ '}
#insBox .pals .non{color:var(--mut);font-size:11.5px}

/* ══ 명식 핵심 — 구조 이름 → 연결 → 핵심 의미 (사장님 2026-10-05) ══ */
#insBox .ihl .istr{display:inline-block;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.4px;color:#fff;background:var(--acc);border-radius:999px;
  padding:2px 8px;margin-right:7px;vertical-align:middle}
#insBox .ihl b{font-size:17px;font-weight:800;vertical-align:middle}
#insBox .ihl small{display:block;margin-top:5px;font-size:12.5px;font-weight:600;
  color:var(--txt2);line-height:1.5}
#insBox .icl p i{display:inline-block;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.3px;color:var(--acc);margin-right:6px}

/* 원국이 본래 지고 있던 충·형 — 운이 가져온 것과 구분 (사장님 2026-10-05) */
#insBox .pals .pcel .hkt.nat{background:transparent;color:var(--mut);border-style:dashed;
  border-color:var(--line2)}

/* 타고난 합·충·형 — 「핵심 구조」에 딸린 작은 머리 (사장님 2026-10-05) */
#insBox .natsub{margin:12px 2px 6px;font-size:12px;font-weight:800;color:var(--acc)}
#insBox .natsub small{margin-left:7px;font-size:10.5px;font-weight:600;color:var(--mut)}

#insBox .pals .pnote{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--mut)}

#insBox .pals .nathd{margin:0 0 7px}
#insBox .pals .nathd .hkt{display:inline-block;border-radius:999px;padding:2px 9px;
  margin:0 5px 3px 0;vertical-align:middle}
#insBox .pals .pcel > em{display:block;font-style:normal;font-size:11.5px;font-weight:800;
  color:var(--acc);margin-bottom:3px}

/* 원국 작용은 하나씩 따로 (사장님 2026-10-05 「구분해서」) */
#insBox .pals .natgrp + .natgrp{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
#insBox .pals .natgrp .nathd{margin:0 0 5px}
#insBox .pals .natgrp .pnote{display:block;margin-top:3px}

/* 탐합망충 — 합이 먼저라 충·형이 누그러지는 자리 (사장님 2026-10-05) */
#insBox .pals .ptam{display:block;margin-top:3px;font-size:11px;line-height:1.5;
  color:var(--acc);font-weight:600}

/* ══ 타고난 합·충·형 — 「정재를 쓰고 ~」 띠와 같은 모양, 그 아래는 그대로
      (사장님 2026-10-05) ══ */
#insBox .natbox{margin:16px 0 0}
/* 선은 좌우 여백 없이 카드 끝까지 쭉 (사장님 2026-10-05) */
#insBox .natbox .natsub{background:#fffdf7;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);border-radius:0;
  padding:14px 13px;font-size:17px;font-weight:800;color:inherit;
  margin:0 -12px 10px;}
#insBox .natbox .natsub small{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--mut)}
[data-theme="dark"] #insBox .natbox .natsub{background:var(--card)}
#insBox .natbox .pals{background:transparent;border:0;padding:0 2px}
#insBox .natbox .pals .natgrp + .natgrp{margin-top:11px;padding-top:11px;
  border-top:1px solid var(--line)}
#insBox .natbox .pals .nathd{margin:0 0 5px}
#insBox .natbox .pals .nathd .hkt{display:inline-block;border-radius:999px;padding:2px 9px;
  margin:0 5px 3px 0;vertical-align:middle}
#insBox .natbox .pals .pnote{display:block;margin-top:3px;font-size:11px;line-height:1.5;
  color:var(--mut)}

/* 자리 뜻과 ＋/－ 의 뜻 (사장님 2026-10-05 「일주는 대표적인 배우자 자리자나 / 긍정, 부정이라는 건가?」) */
#insBox .natbox .natnote{margin:0 2px 10px;font-size:11px;line-height:1.55;color:var(--mut)}
#insBox .natbox .natnote b{font-weight:800;color:var(--txt2)}
#insBox .natbox .pals .pcel > em small{margin-left:6px;font-size:10.5px;font-weight:600;
  color:var(--mut)}

/* ══ 대운·세운·월운 칸 줄 맞추기 (사장님 2026-10-05
      「라인들이 다 들쑥날쑥 · 신축은 내려가 있고 임신은 올라가 있고」) ══
   신살 줄이 1줄·2줄로 갈려 아래가 어긋났다. 두 줄 자리를 늘 잡아 둔다. */
.sx{display:flex;flex-direction:column}
.sx .a{min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx .s{min-height:13px}
.sx .ssx{height:23px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.sx .bar{margin-top:auto}


/* 상담 인사이트도 아스트로와 같은 접힘 카드로 (사장님 2026-10-05 「처음 오픈하면 이렇게 나오도록」) */
#insBox .secd{border:1px solid var(--line);border-radius:7px;background:var(--card);overflow:hidden}
#insBox .secd{margin-bottom:10px}
#insBox .secd > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  gap:5px 8px;padding:12px 13px;background:var(--card)}
#insBox .secd > summary .sdt{grid-column:1;display:flex;align-items:baseline;gap:7px}
#insBox .secd > summary .sdt i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc)}
#insBox .secd > summary .sdt b{font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.3px}
#insBox .secd > summary .sdh{grid-column:1/-1}
/* 부제 없는 섹션 — 제목이 첫 줄 (빈 줄 여백 없애기) */
#insBox .secd > summary.solo .sdh{grid-column:1;grid-row:1}
#insBox .secd > summary:after{grid-column:2;grid-row:1}
#insBox .secd[open] > summary{border-bottom:1px solid var(--line)}
#insBox .secd > .insbody{border:0;border-radius:0;background:var(--card2)}
#insBox .secd > summary::-webkit-details-marker{display:none}
#insBox .secd > summary:after{content:'＋';margin-left:auto;color:var(--mut);font-size:12px}
#insBox .secd[open] > summary:after{content:'－'}

/* 제목을 눈에 띄게 — 아스트로는 작은 라벨이지만 여기선 섹션 제목이다 */
#insBox .secd > summary .sdt b{font-size:14px;font-weight:800;color:inherit;letter-spacing:-.2px}
#insBox .secd > summary .sdh{font-size:11.5px;color:var(--mut)}

/* 하우스 기준 밝히기 (검수 2026-10-04 §3) */
#ainsBox .hbase{margin:0 2px 10px;font-size:11px;line-height:1.5;color:var(--mut)}
#ainsBox .hbase b{font-weight:800;color:var(--txt2)}

/* 구조 머리 — 박스 대신 선으로 가른다 · 배경은 흰색 (사장님 2026-10-06) */
#insBox .ihl{background:#fff;border:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);border-radius:0;
  padding:12px 13px;margin:6px -12px 10px}
[data-theme="dark"] #insBox .ihl{background:var(--card)}

/* 위쪽 선은 빼고 「명식 핵심」 머리에 바로 붙인다 (사장님 2026-10-06) */
#insBox .ihl{border-top:0;margin-top:-12px}

/* 위쪽 선은 두되 「명식 핵심」 머리에 딱 붙인다 — 본문 위 여백만 지운다 (사장님 2026-10-06) */
#insBox .ihl{border-top:1px solid var(--line);margin-top:-11px}

/* 선이 두 줄로 겹쳤다 — 위쪽은 머리 띠(summary)의 선 하나로 끝낸다 (사장님 2026-10-06 「라인은 한줄만」) */
#insBox .secd[open] > summary{border-bottom:1px solid var(--line)}
#insBox .ihl{border-top:0;margin-top:-11px}

/* ══ 핵심 구조 · 현재 변화도 같은 모양으로 — 박스 대신 흰 띠 + 아래 선 하나
      (사장님 2026-10-06 「나머지도 이 디자인으로 적용 · 핵심구조, 현재변화」) ══ */
/* 핵심 구조 머리 */
#insBox .itsum{background:#fff;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:12px 13px;margin:-11px -12px 10px}
[data-theme="dark"] #insBox .itsum{background:var(--card)}
/* 타고난 합·충·형 머리 */
#insBox .natbox .natsub{border-top:0;margin:16px -12px 10px}
/* 현재 변화 — 운 카드도 박스를 벗기고 띠 + 선으로 */
#insBox .ubox{border:0;border-radius:0;background:transparent;margin:0 0 14px;overflow:visible}
#insBox .ubox .uhl{background:#fff;border-bottom:1px solid var(--line);
  margin:0 -12px 9px;padding:12px 13px}
[data-theme="dark"] #insBox .ubox .uhl{background:var(--card)}
#insBox .ubox:first-child .uhl{margin-top:-11px}
#insBox .ubox .ubody{border-bottom:0}

/* 지웠던 선을 되살린다 — 운 띠 위에도 선 (사장님 2026-10-06 「라인들은 없애지 말고, 위쪽」) */
#insBox .ubox .uhl{border-top:1px solid var(--line)}
#insBox .ubox:first-child .uhl{border-top:0}
#insBox .ubox .ubody{border-bottom:1px solid var(--line)}
#insBox .ubox .ubody:last-child{border-bottom:0}

/* 「정재를 쓰고 ~」 줄은 핵심 구조 머리에 편입 — 머리와 한 덩어리로 보이게
   (사장님 2026-10-06 「이 부분은 핵심 구조의 영역에 편입」) */
#insBox .secd[data-k="tline"][open] > summary{border-bottom:0}
#insBox .itsum{background:var(--card);border-top:0;border-bottom:1px solid var(--line);
  margin:-11px -12px 12px;padding:2px 13px 12px}

/* 구조 문장 글자 키우기 (사장님 2026-10-06) */
#insBox .itsum{font-size:15.5px;line-height:1.5}

/* 타고난 합·충·형 — 위쪽 선 되살림 (사장님 2026-10-06) */
#insBox .natbox .natsub{border-top:1px solid var(--line)}

/* 배지 줄 아래 선도 양끝까지 (사장님 2026-10-06) */
#insBox .ubox .ubody{margin:0 -12px;padding:10px 13px}
#insBox .hkws{padding:10px 2px 12px}

#insBox .itsum .istr{display:inline-block;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.4px;color:#fff;background:var(--acc);border-radius:999px;
  padding:2px 8px;margin-right:7px;vertical-align:middle}

/* 「상관생재」와 같은 크기로 (사장님 2026-10-06) */
#insBox .itsum{font-size:17px;font-weight:800;line-height:1.45}

/* 「상관생재」와 같은 구성으로 — 흰 바탕 · 위쪽 라인 (사장님 2026-10-06) */
#insBox .itsum{background:#fff;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:12px 13px;margin:-11px -12px 12px}
[data-theme="dark"] #insBox .itsum{background:var(--card)}

/* 「타고난 합·충·형」은 섹션 제목(핵심 구조)과 같은 크기로 (사장님 2026-10-06) */
#insBox .natbox .natsub{font-size:14px;font-weight:800;letter-spacing:-.2px;padding:12px 13px}
#insBox .natbox .natsub small{font-size:11.5px}

/* 부제는 아랫줄로 — 섹션 머리와 같은 꼴 (사장님 2026-10-06) */
#insBox .natbox .natsub small{display:block;margin:4px 0 0;font-weight:600}


#panePred .pdt td.orb{font-size:11.5px;font-weight:700;color:var(--acc);white-space:nowrap}

/* ══ 루나호야 소개 배너 — 사장님 수정본 v4 그대로 2026-10-06 ══
   원본 _release/루나호야-배너-스타일조화-수정본.zip (banner.html / banner.css)
   모바일 구성(max-width:700px 가지)을 기본으로 옮긴다.
   나눔고딕 발개가 아니라 앱 기본 글꼴을 따른다.
   ※ 결제를 가리키는 말은 넣지 않는다 — 구글 결제 정책 */
.lhbn{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin:16px 0 18px;padding:23px 20px 20px;color:#493423;text-decoration:none;
  border:1px solid #dcc6a5;border-radius:15px;
  background:linear-gradient(120deg,#fffdf7 0%,#f6efdf 60%,#f0e3cd 100%);
  box-shadow:0 5px 18px rgba(121,80,29,.06);position:relative;overflow:hidden}
/* 박스 배경 — 크림 바탕의 금빛 천문반 (사장님 2026-10-06) */
.lhbn:after{content:'';position:absolute;right:0;bottom:0;
  width:74%;max-width:310px;aspect-ratio:1/1;pointer-events:none;
  background:url(img/astro_bg.svg) right bottom/contain no-repeat;opacity:.85}
.lhbn>*{position:relative;z-index:1}

.lhbn .lh-intro{grid-column:1/-1;position:relative}
/* 왼쪽 띄 — 브랜드줄부터 부제 끝까지 (사장님 2026-10-06) */
.lhbn .lh-intro:before{content:'';position:absolute;left:-20px;top:1px;bottom:1px;width:4px;
  background:#ad722e;border-radius:0 4px 4px 0}
.lhbn .lh-brand{display:flex;align-items:center;gap:14px;
  font-size:10px;letter-spacing:2.3px;color:#a06b32;font-weight:700}
.lhbn .lh-brand span{font-size:10px;letter-spacing:0;color:#8d7a61;
  border-left:1px solid #d8c5a8;padding-left:14px}
.lhbn h3{font-size:25px;line-height:1.3;letter-spacing:-1px;margin:13px 0 7px;
  font-weight:800;color:#493423}
.lhbn p{font-size:11.5px;margin:0;color:#8b7860;line-height:1.6}

.lhbn .lh-collection{align-self:stretch;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid #e7d7bd;border-radius:12px;background:rgba(255,253,248,.88);
  backdrop-filter:blur(1px)}
.lhbn .lh-fortune{background:rgba(249,241,228,.88)}
.lhbn .lh-art{width:100%;height:115px;display:flex;align-items:center;justify-content:center}
.lhbn .lh-art svg{width:157px;max-width:100%;height:128px;flex-shrink:0}
.lhbn .lh-label{padding:0 5px 14px;text-align:center}
.lhbn .lh-label small{display:block;color:#9b8568;font-size:10px;margin-bottom:7px}
.lhbn .lh-label strong{display:block;font-weight:800;color:#493423;
  white-space:nowrap;line-height:1.45;letter-spacing:-.6px;
  /* 한 줄로 집어넣는다 — 칸 너비에 따라 줄어들되 9.75px 같은 안 보일 크기는 안 쓴다
     (사장님 2026-10-06 「한줄 안되면 소원팔찌는 삭제」 — 세 개는 9.75px 까지 줄어야 들어가 뺀다) */
  font-size:clamp(11px, 3.2vw, 13px)}

/* 칸에 손 올리면 — 박스 색만 바뀜다 (사장님 2026-10-06 「박스만 색상변하게」) */
.lhbn .lh-collection{transition:background .18s}
@media (hover:hover){
  .lhbn .lh-collection:hover{background:#fff}
}
.lhbn .lh-collection:active{background:#fff}
[data-theme="dark"] .lhbn .lh-jewelry:hover,
[data-theme="dark"] .lhbn .lh-fortune:hover,
[data-theme="dark"] .lhbn .lh-jewelry:active,
[data-theme="dark"] .lhbn .lh-fortune:active{background:rgba(255,255,255,.1)}

/* 그림 선도 같이 진해진다 (사장님 2026-10-06 「라인도 볼드되거나 색상진하게」) */
.lhbn .lh-art svg g[stroke]{transition:stroke .18s, stroke-width .18s}
.lhbn .lh-art svg g[stroke] [opacity]{transition:opacity .18s}
@media (hover:hover){
  .lhbn .lh-collection:hover .lh-art svg g[stroke]{stroke:#96661f;stroke-width:1.5}
  .lhbn .lh-collection:hover .lh-art svg g[stroke] [opacity]{opacity:.62}
}
.lhbn .lh-collection:active .lh-art svg g[stroke]{stroke:#96661f;stroke-width:1.5}
.lhbn .lh-collection:active .lh-art svg g[stroke] [opacity]{opacity:.62}
[data-theme="dark"] .lhbn .lh-collection:hover .lh-art svg g[stroke],
[data-theme="dark"] .lhbn .lh-collection:active .lh-art svg g[stroke]{stroke:#dca95e}

.lhbn .lh-mobile-cta{grid-column:1/-1;display:flex;align-items:center;
  justify-content:space-between;background:#a46825;color:#fffdf7;border-radius:8px;
  padding:13px 15px;font-size:13px;font-weight:800}
.lhbn .lh-cta{display:none}
.lhbn .lh-cta b,.lhbn .lh-mobile-cta b{font-size:19px;line-height:1;font-weight:400}
/* 둘러보기 띄 — 색만 바뀜다 (사장님 2026-10-06) */
.lhbn .lh-cta,.lhbn .lh-mobile-cta{transition:background .18s}
@media (hover:hover){
  .lhbn:hover .lh-cta,.lhbn:hover .lh-mobile-cta{background:#8f561a}
}
.lhbn:active .lh-cta,.lhbn:active .lh-mobile-cta{background:#8f561a}

/* ══ 넓은 화면 — 시안 PC 배치 : 세 칸 + 둘러보기는 제목 칸 안
   사장님 2026-10-06 「화면 넓을때는 버튼 배치가 다르지」 ══ */
@media (min-width:760px){
  .lhbn{grid-template-columns:1.15fr 1fr 1fr;gap:22px;padding:28px 34px;
    min-height:260px;border-radius:18px}
  .lhbn .lh-intro{grid-column:auto;align-self:center}
  .lhbn .lh-intro:before{left:-34px;top:-26px;bottom:-26px}
  .lhbn .lh-brand{font-size:11px}
  .lhbn h3{font-size:29px;line-height:1.35;margin:15px 0 9px}
  .lhbn p{font-size:12.5px}
  .lhbn .lh-mobile-cta{display:none}
  .lhbn .lh-cta{display:inline-flex;align-items:center;gap:32px;margin-top:17px;
    background:#a46825;color:#fffdf7;border-radius:8px;padding:11px 17px;
    font-size:12.5px;font-weight:800}
  .lhbn .lh-art{height:147px}
  .lhbn .lh-art svg{width:200px;height:164px}
  .lhbn .lh-label{padding:0 10px 17px}
  .lhbn .lh-label small{font-size:11px;margin-bottom:9px}
  .lhbn .lh-label strong{font-size:17px}
  .lhbn:after{width:46%;max-width:420px}
}

/* ══ 다크 네이비 — 포인트는 갈색이 아니라 금색(--acc #eab455)
   사장님 2026-10-06 「네이비일때 너무 안 보임 / 포인트 색상이 갈색이 맞아?」 ══ */
[data-theme="dark"] .lhbn{background:linear-gradient(120deg,#1a2740 0%,#162134 60%,#121b2c 100%);
  border-color:#2b3b58;color:#e6eefc;box-shadow:none}
[data-theme="dark"] .lhbn .lh-intro:before{background:var(--acc)}
[data-theme="dark"] .lhbn .lh-brand{color:var(--acc)}
[data-theme="dark"] .lhbn .lh-brand span{color:#9fb2cf;border-left-color:#334566}
[data-theme="dark"] .lhbn h3{color:#f2f6fd}
[data-theme="dark"] .lhbn p{color:#9eb0cb}
[data-theme="dark"] .lhbn .lh-collection{background:rgba(255,255,255,.045);border-color:#2f4063}
[data-theme="dark"] .lhbn .lh-fortune{background:rgba(255,255,255,.07)}
[data-theme="dark"] .lhbn .lh-label strong{color:#f0e3c8}
[data-theme="dark"] .lhbn .lh-label small{color:#93a5c0}
/* 칸 오버 — 흰 바탕 대신 한 단계 밝은 남색 */
[data-theme="dark"] .lhbn .lh-collection:hover,
[data-theme="dark"] .lhbn .lh-collection:active{background:rgba(255,255,255,.13)}
/* 그림 선도 금색으로 */
[data-theme="dark"] .lhbn .lh-art svg g[stroke]{stroke:#b89156}
[data-theme="dark"] .lhbn .lh-collection:hover .lh-art svg g[stroke],
[data-theme="dark"] .lhbn .lh-collection:active .lh-art svg g[stroke]{stroke:var(--acc)}
/* 둘러보기 띄 — 금빛 바탕에 남색 글씨 */
[data-theme="dark"] .lhbn .lh-cta,
[data-theme="dark"] .lhbn .lh-mobile-cta{background:var(--acc);color:#15203a}
[data-theme="dark"] .lhbn:hover .lh-cta,
[data-theme="dark"] .lhbn:hover .lh-mobile-cta,
[data-theme="dark"] .lhbn:active .lh-cta,
[data-theme="dark"] .lhbn:active .lh-mobile-cta{background:#f3c470}
/* 천문반 배경 — 남색 위에선 은은하게 */
[data-theme="dark"] .lhbn:after{opacity:.16}

/* 큰 단추(새로운 인물 등록 등) — 밝은 금색 바탕에 흰 글씨는 안 보인다
   사장님 2026-10-06 「새로운인물 등록 버튼도 잘 안 보이고」 */
[data-theme="dark"] .cta{color:#15203a}
[data-theme="dark"] .cta.gh{color:var(--txt2)}

/* 자리에서 오는 말 — 일지 충 = 배우자 등 (명세 Part 5 · 2026-10-08) */
#insBox .pals .ppal{display:block;margin-top:3px;font-size:11.5px;line-height:1.55;
  font-weight:600;color:var(--acc)}

/* ══ PC — 위 띄(로고·메뉴) 배경을 창 끝까지 (사장님 2026-10-08) ══
   .app 이 max-width:1400px 이라 더 넓은 창에선 위 띄가 가운데서 끊기고
   양옆에 바탕색이 드러났다. 가짜 요소로 바깥을 메우고 내용은 그대로 가운데. */
@media (min-width:1401px){
  .hd::before, .hd::after,
  .tb.top::before, .tb.top::after{
    content:''; position:absolute; top:0; bottom:0; width:50vw;
    background:var(--card); pointer-events:none;
  }
  .hd::before, .tb.top::before{ right:100% }
  .hd::after,  .tb.top::after { left:100% }
  /* 메뉴 띄는 아래줄도 같이 늘어난다 */
  .tb.top::before, .tb.top::after{
    bottom:-1px; border-bottom:1px solid var(--line);
  }
}

/* ══ 하단 푸터 (사장님 2026-10-08) ══
   선 한 겹·상자 없이. 내용이 짧아도 화면 맨 아래에 붙는다. */
/* 푸터 — 위쪽 라인 없이, 안에 선 한 겹만 (사장님 2026-10-08) */
.ft{margin-top:0;padding:4px 13px 24px;border-top:0;
  background:transparent;color:var(--mut);font-size:12px;line-height:1.7}
/* 좌우 여백은 .body 와 똑같이 — 안 맞으면 푸터 글이 카드보다 안으로 들어간다 */
@media (min-width:700px){ .ft{padding-left:18px;padding-right:18px} }
@media (min-width:900px){ .ft{padding-left:22px;padding-right:22px} }
.ft .ftin{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  max-width:1400px;margin:0 auto}
.ft .ftl{display:flex;align-items:center;flex-wrap:wrap;gap:0 9px}
/* 푸터는 심볼 없이 로고만 (사장님 2026-10-08) */
.ft .ftwm{display:block;height:14px;width:124px;background-color:var(--acc);
  -webkit-mask:url(logo_type.svg?v=26.66) left center/contain no-repeat;
          mask:url(logo_type.svg?v=26.66) left center/contain no-repeat}
.ft .ftl small{flex:0 0 100%;margin-top:5px;font-size:11.5px}
.ft .ftn{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.ft .ftn a{color:var(--txt2);text-decoration:none;font-size:12px}
.ft .ftn a:active{color:var(--acc)}
.ft .ftb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:1400px;margin:16px auto 0;padding-top:13px;
  border-top:1px solid var(--line);font-size:11px}
.ft .ftv{margin-left:auto;font-variant-numeric:tabular-nums}
.ft .ftv em{font-style:normal}
@media (hover:hover){ .ft .ftn a:hover{color:var(--acc)} }
@media (max-width:520px){
  .ft{padding:2px 13px 22px}
  .ft .ftn{margin-left:0;gap:14px}
  .ft .ftb{margin-top:14px}
  .ft .ftv{margin-left:0}
}
/* 푸터는 바탕색 없이 선만 — 창 끝까지 늘리지 않는다 (사장님 2026-10-08) */

/* ══ 루나데일리 (사장님 2026-10-10) ══
   루나호야 위젯을 **그대로** 띄운다 — 디자인·배치·글씨 크기·선은 저쪽 것.
   여기서는 색만 오리진 것으로 덮는다.
   위젯이 자기 변수를 #lh-daily-root 에 직접 박으므로 ID 둘로 특이도를 올린다. */
/* 네 단계로 벌린다 — 제목 / 본문 / 보조 / 강조 (사장님 「색상은 차별화를 두는게 낫겠어」) */
#paneDaily #lh-daily-root{
  --bg:#f0e7d4; --panel:#f8f2e4;
  --ink:#1a1713;      /* 제목 — 가장 진함 */
  --ink2:#3f382f;     /* 본문 — 한 단계 옅게 */
  --mut:#7b7263;      /* 보조 — 날짜·라벨·설명줄 */
  --line:#e4dac4; --line2:#1a1713;
  --ldrule:#000;          /* 가로선 전용 — 블랙 (사장님 2026-10-10) */
  --acc:#a8641c;      /* 강조 — 크림톤 */
  --lab:#8a6a52;
}
[data-theme="dark"] #paneDaily #lh-daily-root{
  --bg:#0e1729; --panel:#1d2c48;
  --ink:#f8fafd; --ink2:#d2dcea; --mut:#9fb0c8;
  --line:#293954; --line2:#f4f7fb; --acc:#eab455; --lab:#e0b878;
  --ldrule:#fff;          /* 다크에서는 흰색으로 뒤집는다 */
}

/* 위젯 기본이 가는 글씨(300)라 흐려 보였다 — 굵기만 올리고 색 단계는 지킨다 */
#paneDaily #lh-daily-root{font-weight:400}
#paneDaily #lh-daily-root .sec p,
#paneDaily #lh-daily-root .top .sub,
#paneDaily #lh-daily-root .hero .sub,
#paneDaily #lh-daily-root .two p,
#paneDaily #lh-daily-root ul.chk li{color:var(--ink2);font-weight:400}
#paneDaily #lh-daily-root .ser,
#paneDaily #lh-daily-root h1,
#paneDaily #lh-daily-root h2,
#paneDaily #lh-daily-root h3{font-weight:600;color:var(--ink)}
#paneDaily #lh-daily-root .sec p.pst{font-weight:500;color:var(--ink)}
#paneDaily #lh-daily-root .lab{font-weight:800}

/* 푸터 정리 — 앱 안에는 오리진 푸터가 따로 있다.
   위젯의 루나호야 서명(LUNAHOYA / UNDERSTAND YOUR FLOW)이 그 바로 위에서 겹쳐
   푸터가 두 겹으로 보였다 → 앱에서는 서명만 감춘다 (사장님 2026-10-10)
   ※ 루나호야닷컴 쪽 위젯은 그대로다. */
/* 서명 글자만 빼고, 아래를 닫아 주던 진한 선(1.5px)은 남긴다
   — 「지난 흐름 모두 읽기」 아래에서 글이 끝났음을 알려 주는 선이다 (사장님 2026-10-10) */
#paneDaily #lh-daily-root .ft{
  display:block;margin-top:34px;padding:0;height:0;font-size:0;
  border-top:1.5px solid var(--ldrule);
}
#paneDaily #lh-daily-root .ft>*{display:none}

/* 가운데 구분선은 가늘게 통일 — 굵은 선은 글의 위아래를 닫는 둘만 남긴다
   (사장님 2026-10-10 「루나데일리 아래는 현재라인유지 · 나머지는 가늘게 통일」)
   ① 제호 아래 = .mast 바로 다음  ⑥ 맨 아래 = .ft 의 윗선
   ※ 색은 건드리지 않는다 — 두께만 줄인다 (사장님 「연한게 아니라」) */
#paneDaily #lh-daily-root .rule.k{height:1px;background:var(--ldrule)}
#paneDaily #lh-daily-root .mast + .rule.k{height:1.5px;background:var(--ldrule)}
/* 「오늘의 흐름 / 지난 브리핑」 바로 아래 선만 조금 더 진하게 — 블랙은 아님
   (사장님 2026-10-10) */
#paneDaily #lh-daily-root .nav + .rule{background:#c2b291}
[data-theme="dark"] #paneDaily #lh-daily-root .nav + .rule{background:#3b4e6e}
/* 박스를 넣는 대신 글 영역을 넓힌다 (사장님 2026-10-10).
   #paneDaily 는 .body 라 좌우 여백(13/18/22px)을 이미 준다.
   그 위에 위젯 .pg 가 또 여백을 얹어 26px 로 겹쳐 있었다 — 겹친 쪽을 뺀다.
   그러면 글 왼쪽 선이 오리진 푸터·다른 화면과 정확히 같아진다. */
#paneDaily #lh-daily-root .pg{padding-left:0;padding-right:0;padding-bottom:18px;max-width:none}

/* 트랜짓 하단 — 순행·역행 배지 (사장님 2026-10-17) */
#panePred .trb{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;
  letter-spacing:-.2px;margin-right:4px}
#panePred .trb.dr{background:#e7f1e8;color:#2f6b3a}
#panePred .trb.rx{background:#fae6e2;color:#a8422b}
[data-theme="dark"] #panePred .trb.dr{background:#24352a;color:#8fcf9f}
[data-theme="dark"] #panePred .trb.rx{background:#3a2420;color:#e3a394}

/* 트랜짓 하단 — 이달의 기준 두 칸 · 배지 · 각주 (사장님 2026-10-17) */
#panePred .trb.en{background:#e6edf5;color:#2b5a85}
#panePred .trb.td{background:#2a251f;color:#fff}
#panePred .trtoday td{background:var(--selBg)}
#panePred .trbx2{display:grid;grid-template-columns:1fr 1fr;gap:0}
#panePred .trbx{padding:13px 15px}
#panePred .trbx.a{background:#faf1ea}
#panePred .trbx.b{background:#eef4ef}
#panePred .trbx .l{font-size:11.5px;color:var(--mut);margin-bottom:5px}
/* 큰 제목은 박스의 바로 아래 b 하나뿐 — 아래 줄의 b 까지 커지면 안 된다 (2026-10-19) */
#panePred .trbx > b{font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:1.2;display:block}
#panePred .trbx .s b, #panePred .trbx .t b{display:inline;font-size:12px;letter-spacing:0;
  line-height:inherit}
#panePred .trbx .s{font-size:12px;color:var(--txt2);margin-top:4px;line-height:1.75}
/* 그 달의 주인 — 이름을 한 단 키워 부각 (사장님 2026-10-19) */
#panePred .trbx .s b.lp{display:inline-block;font-size:14.5px;font-weight:800;color:var(--acc);
  letter-spacing:-.2px;margin:0 1px}
#panePred .trbx .s b.lp .g{font-style:normal;font-size:14px;margin-right:3px}
#panePred .trbx .s b.good{color:#2f6b3a;font-weight:800}
#panePred .trbx .s b.bad{color:#b3462f;font-weight:800}
#panePred .trbx .s b.mut{color:var(--txt2);font-weight:700}
[data-theme="dark"] #panePred .trbx .s b.good{color:#8fcf9f}
[data-theme="dark"] #panePred .trbx .s b.bad{color:#e59684}
#panePred .trbx .t{font-size:12px;color:var(--mut);margin-top:3px}
#panePred .trfoot{font-size:11.5px;color:var(--mut);padding:10px 15px;border-top:1px solid var(--line)}
#panePred .trnote{font-size:11px;color:var(--mut);line-height:1.6;padding:9px 2px 0}
[data-theme="dark"] #panePred .trbx.a{background:#2b241d}
[data-theme="dark"] #panePred .trbx.b{background:#1f2a22}
[data-theme="dark"] #panePred .trb.en{background:#22303d;color:#9ec4e3}
[data-theme="dark"] #panePred .trb.td{background:#efe7d8;color:#1a1713}
@media (max-width:539px){ #panePred .trbx2{grid-template-columns:1fr} }
#panePred .trpos{list-style:none;margin:6px 0 0;padding:0}
#panePred .trpos li{position:relative;padding:2px 0 2px 11px;font-size:12.5px;line-height:1.75}
#panePred .trpos li:before{content:'·';position:absolute;left:0;color:var(--mut)}
#panePred .trpos b{font-weight:700;margin-right:3px}
#panePred .trpos .nh{color:var(--mut);font-size:11.5px}
#panePred .trpos .rx{color:#a8422b;font-weight:700}
#panePred .trpos em{display:block;font-style:normal;font-size:11px;color:var(--mut);
  font-weight:700;letter-spacing:.2px;margin-bottom:1px}
#panePred .trpos .kw{display:block;font-size:11.5px;color:var(--txt2)}
#panePred .trpos .ag{padding:3px 0 1px}
#panePred .trpos .as{font-size:14px}
#panePred .trpos li{padding-bottom:7px}

/* 행성과 이달의 움직임 — 표 대신 그리드 목록. 모바일에선 쌓인다 (사장님 2026-10-17) */
#panePred .trml{list-style:none;margin:0;padding:0}
/* 한 별 = 한 줄 (사장님 2026-10-17 「이건 그냥 라인 하나로 해도 될 거 같은데」)
   좁은 화면에서도 쌓지 않고 흘려 쓴다 — 넘치면 움직임 쪽만 다음 줄로 */
#panePred .trml li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:2px;
  padding:7px 0;border-bottom:1px solid var(--msLine)}
#panePred .trml li:last-child{border-bottom:0}
#panePred .trml .p{font-weight:700;font-size:13px;white-space:nowrap;flex:0 0 72px}
#panePred .trml .w{font-size:12.5px;white-space:nowrap}
#panePred .trml .w b{font-weight:600;color:var(--txt2)}
#panePred .trml .e{font-size:12px;color:var(--txt2);line-height:1.6;margin-left:auto;text-align:right}
#panePred .trml .e i{font-style:normal;font-family:ui-monospace,monospace;color:var(--mut);margin-right:2px}
#panePred .trml .e u{text-decoration:none;color:var(--mut);font-size:11.5px}
@media (max-width:539px){
  #panePred .trml .p{flex:0 0 64px;font-size:12.5px}
  #panePred .trml .w{font-size:12px;white-space:normal}
  /* 넘칠 때만 다음 줄로 — 억지로 쌓지 않는다 */
  #panePred .trml .e{font-size:11px;margin-left:auto;text-align:right}
}
#panePred .traspl .xd{color:var(--acc);font-weight:800;font-size:11px;margin-left:5px}
/* 오늘 칸 — 아직 올 파틸과 이미 지난 것을 선으로 가른다 (사장님 2026-10-20) */
#panePred .traspl li.gap{border-top:1px solid var(--msLine);margin-top:7px;padding-top:7px}
#panePred .trbx .l2{font-size:11px;color:var(--mut);font-weight:700;margin:11px 0 3px}
#panePred .traspl{margin:0;padding-left:18px}
#panePred .traspl li{font-size:12.5px;line-height:1.95}
#panePred .traspl .as{font-size:14px;padding:0 1px}
#panePred .traspl .nh{color:var(--mut);font-size:11.5px}
#panePred .noag{font-size:12px;color:var(--mut);padding:3px 0}

/* 위아래·겹치기 — 저장 버튼 왼쪽에 작은 토글 (사장님 2026-10-17) */
.wpair{position:absolute;right:76px;top:2px;z-index:3;display:inline-flex;height:30px;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.wpair button{border:0;background:none;color:var(--mut);font-size:11px;font-weight:600;
  padding:0 9px;line-height:28px;cursor:pointer;white-space:nowrap}
.wpair button.on{background:var(--selBg);color:var(--acc);font-weight:700}
@media (max-width:539px){ .wpair{right:40px} .wpair button{padding:0 7px;font-size:10.5px} }

/* 이달 타임라인 — 같은 날은 날짜를 첫 줄에만, 날이 바뀌면 선 하나 (사장님 2026-10-17) */
#panePred .trtl td{vertical-align:middle;line-height:1.7;padding-top:5px;padding-bottom:5px}
/* 선은 날짜 묶음 사이에만 하나 — 줄마다 그으면 어긋나 보인다 (사장님 2026-10-17) */
#panePred .trtl td{border-bottom:0}
#panePred .trtl tr.dh td{padding-top:10px;border-top:1px solid var(--msLine)}
#panePred .trtl tr:first-of-type td{border-top:0;padding-top:5px}
#panePred .trtl .dcell{white-space:nowrap;font-weight:700;color:var(--txt2)}
#panePred .trtl tr.on td{background:var(--selBg)}
#panePred .trtl .as{font-size:14px;padding:0 1px}
#panePred .trtl .pz{color:var(--mut);font-size:11px}
@media (max-width:539px){
}
#panePred .traspl .wh{color:var(--mut);font-size:11px;margin-left:4px}
#panePred .traspl .wh.pa{opacity:.6}
#panePred .trb.sk{background:#ece6f5;color:#6a4b9c}
[data-theme="dark"] #panePred .trb.sk{background:#2d2740;color:#b9a3dd}
/* 기간은 왼쪽 맞춤 + 고정폭 숫자 — 오른쪽 맞춤이면 글자 수가 달라 왼쪽 끝이 들쭉날쭉했다
   (사장님 2026-10-17 「라인 안 맞음」) */
#panePred .trtl td.dur{font-size:11px;color:var(--mut);white-space:nowrap;width:1%;text-align:left;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
@media (max-width:539px){
}
/* 비고 칸이 줄마다 어긋나 보이던 것 — 칸을 고정하고 가운데 맞춤 (사장님 2026-10-17) */
#panePred .trtl th:nth-child(1), #panePred .trtl td:nth-child(1),
#panePred .trtl th:nth-child(2), #panePred .trtl td:nth-child(2),
#panePred .trtl th:nth-child(5), #panePred .trtl td:nth-child(5){width:1%;white-space:nowrap}
#panePred .trtl .nb{color:var(--line2);opacity:.35}
/* 행성 칩 — 누르면 그 별이 주는 각만 (사장님 2026-10-18) */
/* 이달 ↔ 한 해 (사장님 2026-10-19 「이달도 보고, 1년도 보고」) */
#panePred .tlbar{display:flex;align-items:flex-start;gap:12px;margin:0 0 9px}
#panePred .tlbar .tlpick{flex:1;margin:0}
/* 차트 위 「위아래 | 겹치기」와 같은 모양으로 (사장님 2026-10-19 「버튼은 이스타일이면 됨」) */
#panePred .tlrange{flex:none;display:inline-flex;height:30px;margin:0;align-self:flex-start;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
@media (max-width:539px){
  #panePred .tlbar{flex-direction:column-reverse;gap:8px}
  #panePred .tlrange{align-self:flex-end}
}
#panePred .tlrange button{appearance:none;border:0;background:none;color:var(--mut);
  font-size:11px;font-weight:600;padding:0 11px;line-height:28px;cursor:pointer;white-space:nowrap}
#panePred .tlrange button.on{background:var(--selBg);color:var(--acc);font-weight:700}
#panePred .tlpick{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}
#panePred .tlpick button{appearance:none;border:1px solid var(--line2);background:transparent;
  color:var(--txt2);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;
  cursor:pointer;line-height:1.5}
#panePred .tlpick button i{font-style:normal;color:var(--mut);font-size:11px;margin-left:3px;
  font-variant-numeric:tabular-nums}
#panePred .tlpick button.on{background:var(--acc,#b5701f);border-color:var(--acc,#b5701f);color:#fff}
#panePred .tlpick button.on i{color:#fff;opacity:.75}
/* 각 거르개 — 모든 각 · 각 종류 · 파틸만 (사장님 2026-10-19) */
#panePred .tlfil{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
#panePred .tlfil button{appearance:none;border:1px solid var(--line2);background:transparent;
  color:var(--txt2);border-radius:4px;padding:4px 11px;font-size:11.5px;font-weight:600;
  cursor:pointer;line-height:1.6}
#panePred .tlfil button .as{font-size:13px;margin-right:4px}
#panePred .tlfil button i{font-style:normal;color:var(--mut);font-size:10.5px;margin-left:3px;
  font-variant-numeric:tabular-nums}
#panePred .tlfil button.on{background:var(--acc);border-color:var(--acc);color:#fff}
#panePred .tlfil button.on i{color:#fff;opacity:.75}
/* 골라 보기 — 여러 개 고르고 「검색」. 칸마다 띠 제목과 선 하나로 나눈다
   (사장님 2026-10-19 「영역 분리를 더 해줘 · 버튼이 더 커서 그것도 이상하고」) */
/* 골라 보기 묶음은 카드 끝까지 가지 않고 양쪽에서 조금 들어온다
   (사장님 2026-10-19 「체크된 영역까지 박스크기를 줄여달라는 말임」) */
/* 위·좌·우·아래 여백을 같게 (사장님 2026-10-19 「여백은 위쪽 좌측,우측, 아래쪽 동일」) */
#panePred .tlq{margin:0;padding:14px}
#panePred .tlq .hd{display:flex;align-items:center;justify-content:flex-start;gap:8px;
  padding:0 0 7px;border-bottom:0}
/* 모리누스 세팅 창과 같은 모양 — 테두리 칸 + 제목, 체크 한 줄에 하나 (사장님 2026-10-19) */
/* 한 상자 안에서 왼쪽 이름 칸(바탕색) · 가운데 고르는 칸 · 오른쪽 검색 칸
   (사장님 2026-10-19 「박스를 좌측 영역을 구분해서 … 우측에 검색 영역 넣는다」) */
#panePred .tlq .qgrid{display:grid;grid-template-columns:auto 1fr auto;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
#panePred .tlq .qgrid>em{grid-column:1;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.4px;
  background:var(--card2);border-right:1px solid var(--line);
  border-bottom:1px solid var(--msLine);padding:9px 12px;white-space:nowrap}
#panePred .tlq .qgrid>.pls{grid-column:2;display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  padding:7px 12px;border-bottom:1px solid var(--msLine);min-width:0}
#panePred .tlq .qgrid .tlrange{height:26px;margin:0}
#panePred .tlq .qgrid .tlrange button{line-height:24px;padding:0 13px}
#panePred .tlq .qgrid>em:nth-last-of-type(1),
#panePred .tlq .qgrid>.pls:last-of-type{border-bottom:0}
/* 오른쪽 칸 통째가 단추 (사장님 2026-10-19) */
#panePred .tlq .qgrid>.go{grid-column:3;grid-row:1 / span 4;appearance:none;border:0;
  border-left:1px solid var(--line);background:var(--card2);color:var(--acc);
  font-size:12.5px;font-weight:800;letter-spacing:.5px;padding:0 20px;cursor:pointer;
  transition:background .12s}
#panePred .tlq .qgrid>.go:hover{background:var(--selBg)}
#panePred .tlq .qgrid>.go.hot{background:var(--acc);color:#fff}
#panePred .tlq .qchk{display:inline-block;margin:0}
#panePred .tlq .qchk button{display:inline-flex;align-items:center;gap:3px;text-align:left;
  font-size:11.5px;font-weight:600;padding:3px 8px;border:1px solid var(--line2);
  background:var(--card);color:var(--txt2);border-radius:5px;cursor:pointer;white-space:nowrap}
#panePred .tlq .qchk button .mk{margin-right:1px;opacity:.7;font-size:11px}
#panePred .tlq .qchk button i{font-style:normal;margin-left:2px;font-size:10.5px;color:var(--mut);
  font-variant-numeric:tabular-nums}
#panePred .tlq .qchk button.on{border-color:var(--acc);background:var(--selBg);color:var(--acc);
  font-weight:700}
#panePred .tlq .qchk button.on i{color:var(--acc);opacity:.8}
#panePred .tlq .hd .clr{appearance:none;border:1px solid var(--line2);background:transparent;
  color:var(--mut);border-radius:5px;padding:4px 11px;font-size:11px;font-weight:600;
  cursor:pointer;margin-right:auto}
@media (max-width:539px){
  #panePred .tlq .qgrid{grid-template-columns:auto 1fr}
  #panePred .tlq .qgrid>.go{grid-column:1 / span 2;grid-row:auto;padding:9px 12px;
    border-left:0;border-top:1px solid var(--line)}
}
/* 오늘 자리 — 날짜 아래 「오늘」, 윗선과 글자색으로 표시 (사장님 2026-10-18) */
#panePred .trtl .dcell i{display:block;font-style:normal;font-size:10.5px;font-weight:800;
  color:#b5701f;letter-spacing:.4px;margin-top:1px}
/* 선 대신 그 행 배경을 연하게 (사장님 2026-10-18 「라인보다 그 행 배경을 연하게」) */
#panePred .trtl tr.on td,
#panePred .trtl tr.nowline td{background:rgba(181,112,31,.10)}
#panePred .trtl tr.nowhead td{padding-top:8px}
#panePred .trtl tr.nowhead .dcell{color:#b5701f}
[data-theme="dark"] #panePred .trtl .dcell i,
[data-theme="dark"] #panePred .trtl tr.nowhead .dcell{color:#d79a52}
[data-theme="dark"] #panePred .trtl tr.on td,
[data-theme="dark"] #panePred .trtl tr.nowline td{background:rgba(215,154,82,.14)}
/* 앞쪽으로 쏠리지 않게 — 트랜짓은 제 너비만, 남는 자리는 의미 칸이 받는다
   (사장님 2026-10-17 「뭔가 앞쪽으로 너무 쏠린 느낌이지?」 · 넓은 웹 화면까지 같은 규칙) */
#panePred .trtl th:nth-child(3), #panePred .trtl td:nth-child(3){width:1%;white-space:nowrap}
#panePred .trtl th:nth-child(4), #panePred .trtl td:nth-child(4){width:100%;padding-left:12px}
#panePred .trtl td:nth-child(4){font-size:12px;color:var(--mut)}
#panePred .trtl td.dur{padding-left:14px}
@media (max-width:539px){
  #panePred .trtl td:nth-child(4){font-size:11px;line-height:1.45;padding-left:8px}
  #panePred .trtl td.dur{padding-left:8px}
}
/* 행성 기호는 폭이 제각각이라 이름이 들쭉날쭉했다 — 기호를 고정폭 칸에 (사장님 2026-10-17) */
#panePred .trml .p{display:flex;align-items:baseline;gap:5px}
#panePred .trml .p .g{display:inline-block;width:16px;text-align:center;font-style:normal;
  font-size:14px;line-height:1;flex:none}

/* 판정은 색으로만 — 압박 빨강 · 길 초록 · 점검 파랑 (사장님 2026-10-17) */
#panePred .trtl tr.j-rx td:nth-child(3){color:#b3462f}
#panePred .trtl tr.j-dr td:nth-child(3){color:#2f6b3a}
#panePred .trtl tr.j-en td:nth-child(3){color:#2b5a85}
#panePred .trtl tr.j-rx td:nth-child(3) b{color:#a8371f}
#panePred .trtl tr.j-dr td:nth-child(3) b{color:#246030}
#panePred .trtl tr.j-en td:nth-child(3) b{color:#23507a}
[data-theme="dark"] #panePred .trtl tr.j-rx td:nth-child(3),
[data-theme="dark"] #panePred .trtl tr.j-rx td:nth-child(3) b{color:#e59684}
[data-theme="dark"] #panePred .trtl tr.j-dr td:nth-child(3),
[data-theme="dark"] #panePred .trtl tr.j-dr td:nth-child(3) b{color:#8fcf9f}
[data-theme="dark"] #panePred .trtl tr.j-en td:nth-child(3),
[data-theme="dark"] #panePred .trtl tr.j-en td:nth-child(3) b{color:#9ec4e3}

/* 가입 직후 한 번 뜨는 알림 (2026-10-23) */
.acctoast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:90;
  max-width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid var(--acc);
  border-radius:12px;padding:12px 16px;font-size:13px;line-height:1.6;color:var(--txt);
  box-shadow:0 8px 24px rgba(0,0,0,.18);transition:opacity .5s}
.acctoast b{color:var(--acc)}
.acctoast.go{opacity:0}

/* ── 마이페이지 (2026-10-23) ───────────────────── */
#paneMy .mycard{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 17px;margin:0 0 14px}
#paneMy .myhi{font-family:"Noto Serif KR",serif;font-size:18px;font-weight:700;letter-spacing:-.3px}
#paneMy .myid{font-size:13px;color:var(--acc);margin-top:3px;word-break:break-all}
#paneMy .mymeta{font-size:12px;color:var(--mut);margin-top:5px}
#paneMy .mysub{font-size:13.5px;color:var(--txt2);line-height:1.7;margin-top:7px}
#paneMy .myrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
#paneMy .mybtn{flex:1;min-width:132px;height:40px;border-radius:9px;font-size:13.5px;
  border:1px solid var(--line);background:var(--card2);color:var(--txt2)}
#paneMy .mybtn.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
#paneMy .mybtn.danger{color:#b3462f;border-color:#e0c4bc}
#paneMy .myhint{font-size:12.5px;color:var(--mut);line-height:1.7;margin-top:11px}
#paneMy .mymut{color:var(--mut)}
#paneMy .mytwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#paneMy .mylab{font-size:11.5px;color:var(--mut);margin-bottom:5px}
#paneMy .mystat{display:flex;gap:14px;flex-wrap:wrap}
#paneMy .mystat span{font-size:12px;color:var(--mut)}
#paneMy .mystat b{font-family:"Noto Serif KR",serif;font-size:19px;color:var(--txt);
  font-weight:700;margin-right:2px}
#paneMy .mystat i{font-style:normal;margin-left:4px}
@media (max-width:420px){ #paneMy .mytwo{grid-template-columns:1fr;gap:10px} }