/* 별자리 계산기 전용 CSS (2026-10-09). 입력·결과·12궁/12띠 원판·연간 시작표 zo-*. 원소 색 4가지는 툴 안 토큰. 공용 부품은 assets/v2.css */
.zo-work{--zo-fire:#f6c9b5;--zo-earth:#dfd3a8;--zo-air:#c9dcf0;--zo-water:#bfe0d6}
:root[data-theme="dark"] .zo-work{--zo-fire:#7a3d26;--zo-earth:#5f5530;--zo-air:#2f4a66;--zo-water:#24534a}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .zo-work{--zo-fire:#7a3d26;--zo-earth:#5f5530;--zo-air:#2f4a66;--zo-water:#24534a} }
.zo-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-bottom:1px solid var(--soft)}
.zo-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.zo-date{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zo-date input[type="date"],.zo-time,.zo-select{height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;outline:0;max-width:100%}
.zo-date input[type="date"]{min-width:170px}
.zo-time{display:block;width:100%}
.zo-select{display:block;width:100%;font-size:14px;padding:0 6px}
.zo-date input:focus,.zo-time:focus,.zo-select:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.zo-row{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(0,1.2fr);gap:10px 12px}
.zo-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.zo-set .v2-status:empty{display:none}
.zo-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px 16px;padding:16px 18px;min-width:0;border-left:1px solid var(--soft);align-content:start}
.zo-res .v2-label{display:block;margin-bottom:4px}
.zo-big{margin:0;font-family:var(--sans);font-size:clamp(24px,4.2vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.zo-mid{margin:0;font-family:var(--sans);font-size:22px;font-weight:800;color:var(--ink);line-height:1.2}
.zo-big .gl,.zo-year .gl{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols",var(--sans);color:var(--accent);margin-right:4px}
.zo-big i,.zo-mid i{font-style:normal;color:var(--muted);font-weight:500}
.zo-sub{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.zo-facts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;padding-top:12px;border-top:1px solid var(--soft)}
.zo-facts b{display:block;margin-top:2px;font-family:var(--sans);font-size:15px;font-weight:750;color:var(--ink)}
.zo-notes{grid-column:1 / -1;margin:0;padding-left:18px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.zo-notes:empty{display:none}
.zo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.zo-box{padding:14px 18px 16px;min-width:0}
.zo-split>.zo-box+.zo-box{border-left:1px solid var(--soft)}
.zo-box>.v2-label{display:block;margin-bottom:8px}
/* 원판: 태양 표시가 출생일의 황경으로 돌아감(R45). 동작 줄이기면 바로 */
.zo-wheel svg{display:block;width:100%;max-width:380px;height:auto;margin:0 auto}
.zo-seg{stroke:var(--paper);stroke-width:1.5}
.zo-seg.e-fire{fill:var(--zo-fire)} .zo-seg.e-earth{fill:var(--zo-earth)} .zo-seg.e-air{fill:var(--zo-air)} .zo-seg.e-water{fill:var(--zo-water)}
.zo-seg.is-on{stroke:var(--ink);stroke-width:3}
.zo-gl{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols",var(--sans);font-size:15px;fill:var(--ink)}
.zo-sn{font-family:var(--sans);font-size:9.5px;font-weight:650;fill:var(--ink)}
.zo-aseg{fill:var(--wash);stroke:var(--paper);stroke-width:1.5}
.zo-aseg.is-on{fill:var(--accent-wash);stroke:var(--accent);stroke-width:2.5}
.zo-ae{font-size:15px}
.zo-core{fill:var(--paper);stroke:var(--line)}
.zo-coret{font-family:var(--sans);font-size:13px;font-weight:750;fill:var(--ink);font-variant-numeric:tabular-nums}
.zo-sun{transform-origin:160px 160px;transform-box:view-box;transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.zo-sun line{stroke:var(--accent);stroke-width:2;stroke-dasharray:3 3}
.zo-sun circle{fill:#f2b705;stroke:var(--paper);stroke-width:2}
@media (prefers-reduced-motion:reduce){ .zo-sun{transition:none} }
.zo-year{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:2px 12px}
.zo-year li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:5px 6px;border-radius:var(--radius);font-family:var(--sans);font-size:12.5px}
.zo-year li b{font-weight:650;overflow-wrap:anywhere} /* 두 열에서도 이름이 잘리지 않게 줄바꿈 허용 */
.zo-year li .at{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.zo-year li.is-on{background:var(--accent-wash)}
.zo-year li.is-on b{font-weight:800}
@media (max-width:720px){
  .zo-top{display:flex;flex-direction:column}
  .zo-head{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
  .zo-split{grid-template-columns:minmax(0,1fr)}
  .zo-split>.zo-box+.zo-box{border-left:0;border-top:1px solid var(--soft)}
}
@media (max-width:480px){
  .zo-set,.zo-head,.zo-box{padding-left:12px;padding-right:12px}
  .zo-head{grid-template-columns:minmax(0,1fr)}
  .zo-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zo-row{grid-template-columns:minmax(0,1fr)}
}