/* ===== トークン：明（冷たい製図紙） ===================================== */
:root {
  color-scheme: light dark;
  --ground:      #EEF0F4;
  --surface:     #F9FAFC;
  --surface-2:   #E3E7EF;
  --ink:         #161D2E;
  --ink-2:       #3C465C;
  --ink-dim:     #5F6A80;
  --rule:        #C6CDDA;
  --rule-soft:   #DDE2EB;
  --rule-strong: #A3AEC1;
  --accent:      #8A6216;
  --accent-2:    #6E4D10;
  --accent-wash: rgba(138, 98, 22, .10);
  /* 月は明暗どちらの面でも「夜の地」に置く。地を明るくすると照らされた側を
     墨で塗ることになり、満ち欠けの向きを取り違える。ここは両テーマ共通 */
  --moon-plate:  #0E1526;
  --moon-dark:   #202A42;
  --moon-lit:    #F4F6FF;
  --fire:  #B03A2E;
  --water: #2A6099;
  --air:   #856A18;
  --earth: #33694A;
  --wheel-bg:    #F4F6F9;
  --shadow: 0 1px 2px rgba(20,28,45,.05), 0 10px 30px rgba(20,28,45,.07);

  --f-disp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-ui:   "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-xs: .75rem;  --fs-sm: .8125rem; --fs-base: .9375rem;
  --fs-md: 1.0625rem; --fs-lg: 1.375rem; --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem; --fs-3xl: 3.5rem;

  --sp: 8px;
  --maxw: 1080px;
}

/* ===== トークン：暗（夜天の観測盤） ===================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0A0E1C;
    --surface:     #121828;
    --surface-2:   #1A2134;
    --ink:         #EDE8DC;
    --ink-2:       #C2C6D4;
    --ink-dim:     #8B94AC;
    --rule:        #26304A;
    --rule-soft:   #1B2336;
    --rule-strong: #3A4664;
    --accent:      #C08A2E;
    --accent-2:    #DDA847;
    --accent-wash: rgba(192, 138, 46, .13);
    --fire:  #D6564A;
    --water: #4E90D4;
    --air:   #E3CE5B;
    --earth: #56A56C;
    --wheel-bg:    #0D1324;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.34);
  }
}
:root[data-theme="dark"] {
  --ground:      #0A0E1C;
  --surface:     #121828;
  --surface-2:   #1A2134;
  --ink:         #EDE8DC;
  --ink-2:       #C2C6D4;
  --ink-dim:     #8B94AC;
  --rule:        #26304A;
  --rule-soft:   #1B2336;
  --rule-strong: #3A4664;
  --accent:      #C08A2E;
  --accent-2:    #DDA847;
  --accent-wash: rgba(192, 138, 46, .13);
  --fire:  #D6564A;
  --water: #4E90D4;
  --air:   #E3CE5B;
  --earth: #56A56C;
  --wheel-bg:    #0D1324;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.34);
}

/* ===== 素地 ============================================================ */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: var(--maxw); margin: 0 auto; padding: 0 calc(var(--sp)*3); }

h1, h2, h3 { font-family: var(--f-disp); text-wrap: balance; margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .18em; color: var(--ink-dim); text-transform: uppercase;
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ===== 天板（yayoik.jp 共通の crumb 行）=============================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--sp)*2); padding: calc(var(--sp)*3) 0 0;
}
.crumb { font-size: var(--fs-sm); color: var(--ink-dim); }
.crumb a { color: var(--ink-dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.theme-btn {
  font: inherit; font-size: var(--fs-xs); font-family: var(--f-ui);
  color: var(--ink-dim); background: transparent;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--rule-strong); }

/* ===== 序（ヒーロー）=================================================== */
.hero { padding: calc(var(--sp)*6) 0 calc(var(--sp)*5); }
.title {
  font-size: var(--fs-3xl); line-height: 1.12; font-weight: 700;
  letter-spacing: .02em;
}
.yomi {
  margin-top: calc(var(--sp)*1.5); font-size: var(--fs-sm);
  color: var(--ink-dim); letter-spacing: .08em;
}
.lead {
  margin-top: calc(var(--sp)*3); max-width: 34em; color: var(--ink-2);
  font-family: var(--f-disp); font-size: var(--fs-md); line-height: 1.95;
}
.lead + .lead { margin-top: calc(var(--sp)*1.5); }

/* ===== 盤 ============================================================== */
.instrument {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: calc(var(--sp)*5); align-items: center;
  padding: calc(var(--sp)*4) 0 calc(var(--sp)*8);
}
.dial-box {
  background: var(--wheel-bg); border: 1px solid var(--rule);
  border-radius: 4px; box-shadow: var(--shadow); padding: calc(var(--sp)*2);
}
.dial { display: block; width: 100%; height: auto; }
.dial-sector { cursor: pointer; transition: opacity .18s ease; }
.dial-sector:hover { opacity: .82; }

.readout { display: flex; flex-direction: column; gap: calc(var(--sp)*2.5); }
.readout-head { display: flex; align-items: center; gap: calc(var(--sp)*1.5); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.readout .pos {
  font-family: var(--f-disp); font-size: var(--fs-2xl);
  font-weight: 700; line-height: 1.2; letter-spacing: .01em;
}
.readout .pos .deg { font-family: var(--f-mono); font-weight: 500; font-size: .72em; color: var(--ink-2); }

.card-strip {
  border-left: 3px solid var(--suit, var(--accent));
  padding-left: calc(var(--sp)*2);
  display: flex; flex-direction: column; gap: 2px;
}
.card-strip .num { font-family: var(--f-disp); font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; }
.card-strip .ttl { font-size: var(--fs-sm); color: var(--ink-2); }
.card-strip .fml { font-size: var(--fs-sm); color: var(--ink-dim); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px calc(var(--sp)*2); font-size: var(--fs-sm); }
.facts dt { color: var(--ink-dim); white-space: nowrap; }
.facts dd { margin: 0; color: var(--ink-2); }

/* ===== 節 ============================================================== */
section { padding: calc(var(--sp)*7) 0; border-top: 1px solid var(--rule-soft); }
.sec-head { margin-bottom: calc(var(--sp)*4); }
.sec-head h3 { font-size: var(--fs-xl); font-weight: 700; margin-top: calc(var(--sp)*1); }
.sec-head p { max-width: 40em; color: var(--ink-2); margin-top: calc(var(--sp)*1.5); font-family: var(--f-disp); line-height: 1.9; }

/* ===== 三規則 ========================================================== */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--sp)*3); }
.rule-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; padding: calc(var(--sp)*3);
  display: flex; flex-direction: column; gap: calc(var(--sp)*1.5);
}
.rule-card .n {
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--accent);
  letter-spacing: .1em;
}
.rule-card h4 { font-family: var(--f-disp); font-size: var(--fs-md); font-weight: 600; margin: 0; }
.rule-card p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.85; }
.rule-card .mini { font-size: var(--fs-sm); border-collapse: collapse; width: 100%; }
.rule-card .mini td { padding: 3px 0; border-bottom: 1px dotted var(--rule); color: var(--ink-2); }
.rule-card .mini td:last-child { text-align: right; color: var(--ink); }

.worked {
  margin-top: calc(var(--sp)*4); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: calc(var(--sp)*3) calc(var(--sp)*3.5);
  font-size: var(--fs-sm); line-height: 2;
}
.worked b { font-family: var(--f-disp); }
.worked .step { color: var(--ink-2); }
.worked .step::before { content: "→"; color: var(--accent); margin-right: .6em; }

/* ===== 表 ============================================================== */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); min-width: 720px; }
table.data th {
  font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .12em; color: var(--ink-dim); text-align: left;
  padding: 0 calc(var(--sp)*1.5) calc(var(--sp)*1) 0;
  border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
}
table.data td { padding: calc(var(--sp)*1.25) calc(var(--sp)*1.5) calc(var(--sp)*1.25) 0; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
table.data tr.sign-head td {
  padding-top: calc(var(--sp)*3); border-bottom: 1px solid var(--rule);
  font-family: var(--f-disp); font-weight: 600; color: var(--ink);
}
table.data tr.sign-head .atu { font-family: var(--f-ui); font-weight: 400; color: var(--ink-dim); font-size: var(--fs-xs); margin-left: 1em; }
table.data tbody tr.decan { transition: background-color .15s ease; }
table.data tbody tr.decan:hover { background: var(--surface-2); }
table.data tbody tr.decan.is-now { background: var(--accent-wash); }
table.data tbody tr.decan.is-now td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.chip {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--suit); margin-right: .65em; vertical-align: baseline;
}
.card-cell { font-family: var(--f-disp); font-weight: 600; white-space: nowrap; }
.card-cell .en { font-family: var(--f-mono); font-weight: 400; font-size: var(--fs-xs); color: var(--ink-dim); display: block; }
.ttl-cell .ja { color: var(--ink-dim); font-size: var(--fs-xs); display: block; }
.deg-cell { font-family: var(--f-mono); color: var(--ink-dim); white-space: nowrap; }
.now-tag {
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .1em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 2px; padding: 0 5px; margin-left: .8em;
  white-space: nowrap;
}

/* ===== 度数を引く ====================================================== */
.lookup {
  display: flex; gap: calc(var(--sp)*2); align-items: flex-end; flex-wrap: wrap;
  padding: calc(var(--sp)*3); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-xs); color: var(--ink-dim); letter-spacing: .08em; }
.field select, .field input {
  font: inherit; font-family: var(--f-ui); font-size: var(--fs-base);
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 7px 10px;
}
.field input { font-family: var(--f-mono); width: 6.5em; }
.lookup-out { flex: 1 1 16em; min-width: 0; border-left: 3px solid var(--suit, var(--accent)); padding-left: calc(var(--sp)*2); }
.lookup-out .big { font-family: var(--f-disp); font-size: var(--fs-lg); font-weight: 700; }
.lookup-out .sm { font-size: var(--fs-sm); color: var(--ink-dim); }

/* ===== 二段組 ========================================================== */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--sp)*5); }
.duo h4 { font-family: var(--f-disp); font-size: var(--fs-md); font-weight: 600; margin: 0 0 calc(var(--sp)*2); }

/* ===== 補足の小さな文 ================================================== */
.note { font-size: var(--fs-sm); color: var(--ink-dim); margin-top: calc(var(--sp)*2); line-height: 1.9; }
.note-lead { color: var(--ink-2); margin-bottom: calc(var(--sp)*2); }
/* .duo h4 が margin を一括指定しているので、同じ強さで上書きする */
.duo h4.h4-gap { margin-top: calc(var(--sp)*5); }

/* ===== 月相 ============================================================ */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--sp)*2); }
.phase-cell {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: calc(var(--sp)*2.5); display: flex; flex-direction: column; gap: calc(var(--sp)*1);
}
.phase-cell.is-now { border-color: var(--accent); background: var(--accent-wash); }
.phase-cell svg { display: block; }
.phase-cell .nm { font-family: var(--f-disp); font-weight: 600; font-size: var(--fs-md); }
.phase-cell .ang { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--ink-dim); }
.phase-cell .hint { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.8; }

/* ===== 奥付（この盤について・出典）===================================== */
.colophon .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(var(--sp)*5); }
.colophon p { font-size: var(--fs-sm); color: var(--ink-dim); line-height: 1.95; max-width: 42em; }
.colophon p + p { margin-top: calc(var(--sp)*2); }
.colophon h4 { font-family: var(--f-disp); font-size: var(--fs-base); font-weight: 600; margin: 0 0 calc(var(--sp)*1.5); color: var(--ink); }
.colophon .src { font-size: var(--fs-xs); }
.colophon .src li { margin-bottom: 4px; }
.colophon ul { margin: 0; padding-left: 1.2em; }

/* ===== 脚（yayoik.jp 共通。about/contact/privacy はここに手書き）======= */
.foot {
  border-top: 1px solid var(--rule); margin-top: calc(var(--sp)*3);
  padding: calc(var(--sp)*5) 0 calc(var(--sp)*8);
  display: flex; flex-direction: column; gap: calc(var(--sp)*.75);
  font-size: var(--fs-sm); color: var(--ink-dim);
}
.foot a { color: var(--ink-dim); }
.foot a:hover { color: var(--accent); }
.foot-pages span { margin: 0 .45em; opacity: .5; }

noscript .warn {
  margin: calc(var(--sp)*4) 0; padding: calc(var(--sp)*2.5);
  border: 1px solid var(--accent); border-radius: 3px;
  background: var(--accent-wash); font-size: var(--fs-sm);
}

/* ===== 応答 ============================================================ */
@media (max-width: 900px) {
  .instrument { grid-template-columns: 1fr; gap: calc(var(--sp)*4); }
  .rules { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .phases { grid-template-columns: repeat(2, 1fr); }
  .colophon .cols { grid-template-columns: 1fr; }
  :root { --fs-3xl: 2.5rem; --fs-2xl: 1.875rem; }
}
@media (max-width: 520px) {
  .phases { grid-template-columns: 1fr; }
  .page { padding: 0 calc(var(--sp)*2.5); }
}

/* ===== 動き ============================================================ */
@keyframes seg-in { from { opacity: 0; } to { opacity: 1; } }
.dial-sector { animation: seg-in .5s ease both; }
@media (prefers-reduced-motion: reduce) {
  .dial-sector { animation: none; }
  * { transition-duration: .01ms !important; }
}