/* 솜솜의 사주명리 — 내 사주 보기 도구 화면 */
.sj{--wood:#3c7550;--fire:#b0453a;--earth:#9a742a;--metal:#6c727c;--water:#2f4c78;margin:var(--md,24px) 0}
.sj *{box-sizing:border-box}
.sj-form{padding:20px;background:var(--card);border:1px solid var(--border-light);border-radius:var(--r-lg,16px);box-shadow:var(--shadow-sm)}
.sj-form fieldset{border:0;margin:0 0 16px;padding:0}
.sj-form legend,.sj-lb{display:block;margin:0 0 8px;font-weight:700;font-size:15px}
.sj-seg{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.sj-seg label{position:relative;cursor:pointer}
.sj-seg input{position:absolute;opacity:0;pointer-events:none}
.sj-seg span{display:block;padding:8px 16px;font-size:15px}
.sj-seg input:checked+span{background:var(--primary);color:var(--on-primary,#fff);font-weight:700}
.sj-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
.sj-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sj-row select,.sj-row input[type=number],.sj-row input[type=time]{font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);min-width:0}
.sj-row input[type=number]{width:96px}
.sj-check{display:inline-flex;align-items:center;gap:6px;font-size:15px;cursor:pointer}
.sj-check input{width:18px;height:18px;accent-color:var(--primary)}
.sj-go{display:block;width:100%;margin-top:8px;padding:14px;border:0;border-radius:12px;background:var(--primary);color:var(--on-primary,#fff);font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.sj-go:hover{background:var(--primary-dark)}
.sj-help{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
.sj-err{margin:10px 0 0;color:var(--fire);font-weight:700}
.sj-out{margin-top:24px}
.sj-out[hidden]{display:none}
.sj-card{margin:0 0 18px;padding:18px;background:var(--card);border:1px solid var(--border-light);border-radius:var(--r-lg,16px)}
.sj-card h3{margin:0 0 6px;font-size:19px;line-height:1.4}
.sj-card .sj-sub{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6}
.sj-card p{margin:8px 0;line-height:1.75}
.sj-more{display:inline-block;margin-top:6px;font-weight:700;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.sj-sum{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.sj-chip{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--elev);font-size:14px;font-weight:700}
.sj-tbl{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.sj-tbl th{font-size:13px;color:var(--muted);font-weight:700;padding:2px 0;text-align:center}
.sj-tbl td{text-align:center;padding:6px 2px;border-radius:10px;font-size:13px;line-height:1.35;background:var(--bg);word-break:keep-all}
.sj-tbl td.sj-gz{padding:8px 2px;color:#fff}
.sj-gz b{display:block;font-size:26px;line-height:1.1;font-family:"Noto Serif KR","Noto Serif CJK KR",serif}
.sj-gz small{display:block;font-size:12px;opacity:.92}
.sj-tbl .sj-me{outline:2px solid var(--text);outline-offset:1px}
.sj-tbl .sj-rh{font-size:12px;color:var(--muted);background:none;text-align:left;padding-left:0}
.oh0{background:var(--wood)!important}.oh1{background:var(--fire)!important}.oh2{background:var(--earth)!important}.oh3{background:var(--metal)!important}.oh4{background:var(--water)!important}
.sj-empty{color:var(--muted)}
.sj-bars{display:grid;gap:8px}
.sj-bar{display:grid;grid-template-columns:52px 1fr 64px;align-items:center;gap:8px;font-size:15px}
.sj-bar i{display:block;height:14px;border-radius:7px;min-width:2px}
.sj-bar span:last-child{text-align:right;color:var(--muted);font-size:14px}
.sj-list{margin:6px 0 0;padding-left:20px;line-height:1.75}
.sj-list li{margin:4px 0}
.sj-tag{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:6px;background:var(--elev);font-size:13px;font-weight:700}
.sj-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.sj-dw{display:flex;gap:6px;min-width:max-content;flex-direction:row-reverse}
.sj-dw div{width:58px;text-align:center;padding:6px 2px;border-radius:10px;background:var(--bg);font-size:12px;line-height:1.35}
.sj-dw div b{display:block;font-size:20px;font-family:"Noto Serif KR","Noto Serif CJK KR",serif}
.sj-dw .now{outline:2px solid var(--primary);background:var(--elev)}
.sj-note{margin:0 0 18px;padding:12px 14px;border-left:4px solid var(--accent);background:var(--elev);border-radius:8px;font-size:14px;line-height:1.7}
.sj-note p{margin:4px 0}
.sj-year{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.sj-year select{font:inherit;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.sj-big{display:flex;gap:10px;margin:10px 0}
.sj-big div{flex:1;text-align:center;padding:10px;border-radius:12px;color:#fff}
.sj-big b{display:block;font-size:30px;font-family:"Noto Serif KR","Noto Serif CJK KR",serif;line-height:1.2}
.sj-big span{font-size:13px}
.sj-disc{color:var(--muted);font-size:13px;line-height:1.7}
@media (max-width:420px){.sj-gz b{font-size:22px}.sj-tbl td{font-size:12px}.sj-row input[type=number]{width:84px}.sj-form{padding:16px}}