/* 사주 풀이 결과·명리 분석·공유 이미지·백업 — 2026-10-31 구조 정리로 index.html <style> 536~647줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ---- 사주 풀이 결과 ---- */
.saju-result{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.saju-wait{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 0;color:var(--muted);font-size:.92rem}
.saju-wait[hidden]{display:none}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:380px;margin:0 auto 12px}
.pillar{border:1px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center;background:var(--bg)}
.pillar.is-day{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pillar-label{font-size:.72rem;color:var(--muted);margin-bottom:4px}
.pillar-char{font-size:1.5rem;line-height:1.2;font-weight:700}
.pillar-sub{font-size:.72rem;color:var(--muted);margin-bottom:4px}
.pillar.is-unknown .pillar-char{color:var(--muted)}
.elements{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.element-chip{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink)}
.element-chip b{margin-left:4px}
.element-chip.is-zero{color:var(--muted)}
.saju-warn{margin:0 0 12px;font-size:.78rem;color:var(--muted);text-align:center}
.saju-text{font-size:.93rem;line-height:1.75;max-width:560px;margin:0 auto}
.saju-text p{margin:0 0 10px}

.saju-text .sec:first-child{margin-top:0}
/* ---- 명리 분석·대운·공유 이미지 (2026-10-02) ---- */
:root{--el-wood:#2f8f5b;--el-fire:#d4503a;--el-earth:#b8892a;--el-metal:#7c8594;--el-water:#3567c9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--el-wood:#5cc48a;--el-fire:#f07a64;--el-earth:#d9ad4f;--el-metal:#a7afbd;--el-water:#6d97ee}}
:root[data-theme="dark"]{--el-wood:#5cc48a;--el-fire:#f07a64;--el-earth:#d9ad4f;--el-metal:#a7afbd;--el-water:#6d97ee}
.pillar-god{font-size:.68rem;font-weight:700;color:var(--ink);margin:-2px 0 4px;letter-spacing:-.02em}
.pillar-god.is-me{color:var(--muted);font-weight:500}
.ana{max-width:420px;margin:0 auto 16px;display:grid;gap:10px}
.ana-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg);min-width:0}
.ana-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.78rem;color:var(--muted);margin-bottom:8px}
.ana-title b{color:var(--ink);font-size:.86rem}
.ana-big{font-size:1.05rem;font-weight:700}
.ana-big small{font-size:.8rem;font-weight:500;color:var(--muted);margin-left:6px}
.st-bar{position:relative;height:8px;border-radius:99px;background:var(--line);margin:10px 0 4px;overflow:hidden}
.st-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--accent);transition:width .6s ease}
.st-mark{position:absolute;top:0;bottom:0;width:2px;background:var(--surface)}
.st-scale{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted)}
.ys-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ys-chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:.78rem;border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.ys-chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ys-chip.is-main{font-weight:700;border-color:currentColor}
.ys-chip.is-avoid{color:var(--muted)}
.ana-note{font-size:.76rem;color:var(--muted);margin:8px 0 0;line-height:1.55;word-break:keep-all}
.rel-row{display:flex;flex-wrap:wrap;gap:6px}
.rel-chip{font-size:.75rem;border-radius:999px;padding:3px 9px;background:var(--surface);border:1px solid var(--line)}
.rel-chip.is-hap{border-color:var(--el-wood);color:var(--el-wood)}
.rel-chip.is-chung{border-color:var(--el-fire);color:var(--el-fire)}
/* 신살·12운성 (2026-10-05) */
.pillar-twelve{font-size:.66rem;color:var(--muted);margin-top:2px;letter-spacing:-.02em}
.shinsal-chip.is-good{border-color:var(--el-water);color:var(--el-water)}
.shinsal-chip.is-mind{border-color:var(--muted);color:var(--muted)}
.shinsal-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:.78rem;line-height:1.5;word-break:keep-all}
.shinsal-list b{font-weight:700}
.dy-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px;padding:0 6px;scrollbar-width:thin}
.dy-svg{display:block}
.dy-svg text{font-family:inherit;fill:var(--muted)}
.dy-col{cursor:pointer}
.dy-col .dy-bar{fill:var(--line);transition:fill .2s}
.dy-col.is-current .dy-bar{fill:var(--muted)}
.dy-col.is-sel .dy-bar{fill:var(--accent)}
.dy-col.is-sel text,.dy-col.is-current text.dy-ko{fill:var(--ink);font-weight:700}
.dy-col:focus{outline:none}
.dy-col:focus-visible .dy-bar{stroke:var(--accent);stroke-width:2}
.dy-line{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 3;opacity:.7}
.dy-now{fill:var(--ink)!important;font-weight:700;font-size:10px;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.dy-detail{font-size:.8rem;line-height:1.6;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);word-break:keep-all}
.dy-detail b{font-weight:700}
.share-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 4px}
.backup-bar[hidden]{display:none}
.backup-bar{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px}
.backup-info{margin:0;font-size:.78rem;color:var(--muted);line-height:1.5;text-align:center}
.backup-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px} /* 2026-10-16: 비밀번호 → 백업파일 만들기 → 백업파일 불러오기, 가운데 정렬 */
.backup-btn{all:unset;box-sizing:border-box;padding:8px 14px;border-radius:999px;border:1px solid var(--pick);background:var(--surface);color:var(--ink);font-size:.82rem;line-height:normal;font-weight:600;cursor:pointer} /* 2026-10-23 결정 7: 상단 막대·백업·꼬리 버튼 크기 기준 (0.82rem · 위아래 8px) */
@media (max-width:420px){#home-backup .backup-btns{gap:6px}#home-backup .backup-btn{padding:8px 10px;font-size:.78rem}} @media (max-width:374px){#home-backup .backup-btns{gap:4px}#home-backup .backup-btn{padding:7px 7px;font-size:.72rem}} /* 폰: 세 개가 한 줄에 들어가게 */
.backup-btn.is-primary{background:var(--pick);border-color:var(--pick);color:var(--pick-ink)} /* 2026-10-16: [백업파일 만들기]는 채운 버튼, [백업파일 불러오기]는 테두리 버튼 */
@media (hover:hover){.backup-btn.is-primary:hover{background:var(--pick);filter:brightness(.95)}}
.backup-btn:active{transform:scale(.97)}
@media (hover:hover){.backup-btn:hover{background:var(--bg)}}
.backup-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.backup-btn[disabled]{opacity:.5;cursor:default}
/* 백업 창 (2026-10-16): 공유 이미지 창과 같은 틀 */
body.bk-open{overflow:hidden}
.share-card.bk-card{padding:16px 20px 18px;text-align:left}
.bk-card .share-close{top:16px;right:12px} /* 제목과 × 같은 선 (2026-10-16) */
.bk-ttl{margin:0 40px 6px 0;font-size:1.02rem;line-height:36px;font-weight:700;color:var(--ink)}
.bk-sub{margin:0 0 14px;font-size:.84rem;line-height:1.55;color:var(--muted);word-break:keep-all}
.bk-sub.is-done{color:var(--ink);font-size:.9rem}
.bk-sub.is-error{color:#e5484d}
.bk-pw[hidden]{display:none}
.bk-labelrow{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
.bk-label{display:block;margin:0;font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap}
.bk-note{font-size:.74rem;color:var(--muted)}
.bk-field{position:relative}
.bk-field input{box-sizing:border-box;width:100%;padding:10px 44px 10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px}
.bk-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bk-field input.is-error{border-color:#e5484d}
.bk-eye{all:unset;position:absolute;top:50%;right:6px;width:34px;height:34px;margin-top:-17px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);cursor:pointer}
.bk-eye svg{width:20px;height:20px}
.bk-eye[aria-pressed="true"]{color:var(--ink)}.bk-eye[aria-pressed="true"] .bk-eye-off{display:none}
.bk-eye:focus-visible{outline:2px solid var(--accent)}
.bk-hint:empty{display:none}
.bk-hint{margin:6px 0 0;font-size:.74rem;line-height:1.5;color:var(--muted)}
.bk-msg{margin:10px 0 0;font-size:.8rem;line-height:1.5;color:#e5484d}
.bk-msg:empty{display:none}
.bk-card .share-actions{margin-top:16px}
.bk-card .share-actions button[disabled]{opacity:.5;cursor:default}
.share-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}
.share-btn svg{width:18px;height:18px}
.share-btn:active{transform:scale(.97)}
@media (hover:hover){.share-btn:hover{background:var(--bg)}}
.share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}