:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --border:#30363d; --border2:#21262d;
  --fg:#e6edf3; --txt:#c9d1d9; --dim:#8b949e; --faint:#6e7681;
  --green:#3fb950; --gold:#d4a017;
  --mok:#3fb950; --hwa:#ff7b72; --to:#e3b341; --geum:#e6edf3; --su:#58a6ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,"D2Coding",monospace;}
body{padding:16px;display:flex;justify-content:center}
.wrap{width:100%;max-width:660px}
.term{border:1px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.4)}
.bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--border);background:#0b0f14}
.dot{width:11px;height:11px;border-radius:50%}
.r{background:#ff5f56}.y{background:#ffbd2e}.g{background:#27c93f}
.bar .t{margin-left:8px;color:var(--faint);font-size:13px}
.body{padding:20px 18px 26px}
.boot{color:var(--dim);font-size:12.5px;line-height:1.9;white-space:pre-wrap;margin:0 0 18px}
.boot b{color:var(--green)}
h1{font-size:21px;margin:4px 0 4px}
.sub{color:var(--dim);font-size:13.5px;margin:0 0 20px;line-height:1.6}

.field{margin:0 0 16px}
.field label{display:block;color:var(--dim);font-size:13px;margin:0 0 7px}
.field label::before{content:"› ";color:var(--green)}
input[type=date]{width:100%;background:#0b0f14;border:1px solid var(--border);
  color:var(--fg);border-radius:9px;padding:12px;font:inherit;font-size:16px}
.row{display:flex;gap:9px;flex-wrap:wrap}
.seg{flex:1;min-width:72px;text-align:center;background:#0b0f14;border:1px solid var(--border);
  color:var(--fg);border-radius:9px;padding:12px 8px;font:inherit;font-size:14.5px;cursor:pointer;user-select:none}
.seg.on{border-color:var(--green);color:var(--green);background:rgba(63,185,80,.1);font-weight:700}
/* 시진 그리드 */
.sijin{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
@media(max-width:480px){.sijin{grid-template-columns:repeat(3,1fr)}}
.sj{background:#0b0f14;border:1px solid var(--border);border-radius:9px;padding:10px 4px;text-align:center;
  cursor:pointer;user-select:none}
.sj .h{font-size:17px;font-weight:800;color:var(--fg)}
.sj .t{font-size:10.5px;color:var(--faint);margin-top:2px}
.sj.on{border-color:var(--green);background:rgba(63,185,80,.1)}
.sj.on .h{color:var(--green)}
.hint{color:var(--faint);font-size:12px;margin:8px 0 0}
.go{width:100%;margin-top:8px;background:var(--green);color:#04210d;border:0;border-radius:10px;
  padding:15px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.go:disabled{opacity:.45;cursor:default}

/* 로딩 연출 */
.calc{font-size:13.5px;line-height:2;white-space:pre-wrap;min-height:220px;color:var(--dim)}
.calc .ok{color:var(--green);font-weight:700}
.calc .run{font-weight:600}
.calc .dim{color:var(--faint)}

/* 팔자 그리드 */
.palja{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:10px;margin:6px 0 12px}
.col{border:1px solid var(--border);border-radius:11px;padding:12px 4px;text-align:center;background:#0b0f14;
  opacity:0;transform:translateY(8px);animation:rise .4s forwards}
.col .lab{color:var(--dim);font-size:12px;margin-bottom:8px}
.col .ch{font-size:38px;line-height:1.2;font-weight:800}
.col .ko{font-size:11px;color:var(--dim);margin-top:2px}
.col .ss{font-size:10.5px;color:var(--faint);margin-top:1px;letter-spacing:-.3px}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.el-목{color:var(--mok)}.el-화{color:var(--hwa)}.el-토{color:var(--to)}.el-금{color:var(--geum)}.el-수{color:var(--su)}

.rel{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 14px}
.rel .chip{font-size:11.5px;color:var(--dim);background:#0b0f14;border:1px solid var(--border);border-radius:20px;padding:3px 10px}

.meta{display:flex;justify-content:center;gap:12px;color:var(--dim);font-size:14px;margin:0 0 16px;flex-wrap:wrap}
.meta b{color:var(--fg)}

.title{font-size:24px;font-weight:800;color:var(--green);text-align:center;margin:14px 0 6px;animation:fade .5s}
.summary{text-align:center;color:var(--dim);font-size:14.5px;margin:0 0 18px;line-height:1.6;animation:fade .5s}

.sec{border-top:1px solid var(--border2);padding:16px 2px;animation:fade .5s}
.sec h3{margin:0 0 10px;font-size:15px;color:var(--fg);font-weight:700;display:flex;align-items:center;gap:6px}
.sec p{margin:0;line-height:1.85;font-size:14.5px;color:var(--txt)}

.blist{list-style:none;margin:0;padding:0}
.blist li{display:flex;gap:8px;padding:8px 0;line-height:1.7;font-size:14px;border-bottom:1px dashed var(--border2)}
.blist li:last-child{border-bottom:0}
.blist .bk{flex:0 0 auto;font-weight:700;color:var(--fg)}
.blist .bk::before{content:"• ";color:var(--green)}
.blist .bv{color:var(--txt)}
.blist.bad .bk::before{content:"• ";color:var(--hwa)}

.ohaeng{display:flex;gap:6px;margin:6px 0 10px}
.ob{flex:1;text-align:center;border-radius:8px;padding:9px 2px;font-size:13px;background:#0b0f14;border:1px solid var(--border)}
.ob .v{font-weight:800;font-size:17px;display:block;margin-bottom:1px}

.dw{background:rgba(63,185,80,.07);border:1px solid #1f4d2b;border-radius:12px;padding:14px;margin:6px 0}
.dw .h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.dw .gz{font-size:22px;font-weight:800;color:var(--green)}
.dw .age{color:var(--dim);font-size:13px}
.dw .ss{color:var(--faint);font-size:12px}
.dw p{margin:0;font-size:14px;line-height:1.8;color:var(--txt)}

.yr{border:1px solid var(--border);border-radius:12px;padding:14px;margin:10px 0;background:#0b0f14}
.yr .yh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.yr .yy{font-size:16px;font-weight:800;color:var(--fg)}
.yr .yg{color:var(--green);font-weight:700}
.yr .ya{color:var(--dim);font-size:13px}
.yr .kw{display:inline-block;background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:2px 10px;font-size:12.5px;margin:4px 0 2px;color:var(--fg)}
.yr .stars{color:var(--gold);font-size:15px;letter-spacing:1px;margin-left:4px}
.yr .yb{list-style:none;margin:8px 0 0;padding:0}
.yr .yb li{padding:5px 0;font-size:13.5px;line-height:1.65;color:var(--txt)}
.yr .yb .k{font-weight:700;color:var(--fg)}
.yr .adv{margin-top:8px;font-size:13px;color:var(--green);background:rgba(63,185,80,.08);border-radius:8px;padding:8px 10px}

.lucky{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:8px}
@media(max-width:480px){.lucky{grid-template-columns:repeat(3,1fr)}}
.lk{text-align:center;background:#0b0f14;border:1px solid var(--border);border-radius:9px;padding:11px 4px}
.lk .k{color:var(--dim);font-size:11px}.lk .v{font-size:15px;margin-top:4px;font-weight:700}

.qa{margin-top:6px}
.qa .qmsgs{display:flex;flex-direction:column;gap:9px;margin:6px 0}
.qa .bub{padding:11px 13px;border-radius:12px;font-size:14px;line-height:1.7;max-width:88%}
.qa .me{align-self:flex-end;background:var(--green);color:#04210d;font-weight:600;border-bottom-right-radius:3px}
.qa .ai{align-self:flex-start;background:#0b0f14;border:1px solid var(--border);color:var(--txt);border-bottom-left-radius:3px;white-space:pre-wrap}
.qa .ai .who{color:var(--green);font-weight:700;font-size:12px;display:block;margin-bottom:3px}
.qform{display:flex;gap:8px;margin-top:8px}
.qform input{flex:1;background:#0b0f14;border:1px solid var(--border);color:var(--fg);border-radius:10px;padding:12px;font:inherit;font-size:15px}
.qform button{background:var(--green);color:#04210d;border:0;border-radius:10px;padding:0 16px;font:inherit;font-weight:700;cursor:pointer}
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qchips .c{font-size:12.5px;color:var(--dim);background:#0b0f14;border:1px solid var(--border);border-radius:18px;padding:6px 11px;cursor:pointer}

.share{display:flex;gap:9px;margin-top:22px}
.share button{flex:1;background:#0b0f14;border:1px solid var(--border);color:var(--fg);border-radius:10px;
  padding:14px;font:inherit;font-size:14px;cursor:pointer}
.share .prime{border-color:var(--green);color:var(--green);font-weight:700}
.foot{color:var(--faint);font-size:12px;text-align:center;margin-top:18px;line-height:1.7}
.hidden{display:none}
a{color:var(--su)}