/* ===== サイデリアル星座診断 =====
   2026-08-23 デザインハンドオフ sidereal.dc.html に準拠。
   **このページの主役は右(サイデリアル)**。左(トロピカル)をグレーに落とし、
   右を面の色+黒で強調して、色の強弱で主役を示す。
   スタイルはここにだけ書く(CLAUDE.md: CSSはCSSファイルにだけ書く)。 */

/* ---- 入力行 ---- */
.sdinput{border:1px solid var(--rule);display:grid;
  grid-template-columns:1fr 200px;gap:0;align-items:stretch;margin:0 0 8px}
.sdinput .field{padding:22px 26px}
.sdinput .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.sdinput .picks{display:flex;align-items:baseline;gap:10px}
.sdinput select{font:inherit;font-family:Archivo,sans-serif;font-size:30px;
  font-weight:300;letter-spacing:-.01em;color:var(--ink);background:none;
  border:0;border-bottom:1px solid var(--rule);padding:0 0 8px;cursor:pointer}
.sdinput select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sdinput .sep{font-family:Archivo,sans-serif;font-size:24px;
  font-weight:300;color:var(--ink-dim)}
.sdinput button{border:0;background:var(--ink);color:#fff;
  font-family:'Zen Kaku Gothic New',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.1em;cursor:pointer}
.sdinput button:hover{background:var(--primary)}
.sdinput button:focus-visible{outline:2px solid var(--primary);outline-offset:-4px}
.sdprivacy{background:var(--surface);padding:12px 26px;font-size:12.5px;
  color:var(--ink-card);margin:0 0 8px}

/* ---- 結果カード(左=トロピカル・右=サイデリアル) ---- */
.sdcard{border:1px solid var(--rule);margin:0 0 20px}
.sdpair{display:grid;grid-template-columns:1fr 1px 1fr}
.sdpair .divider{background:var(--rule)}
.sdside{padding:38px 40px}
.sdside .k{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;margin-bottom:18px}
.sdside .row{display:flex;align-items:baseline;gap:16px}
.sdside .glyph{font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',serif;
  font-variant-emoji:text;font-size:38px;line-height:1}
.sdside .name{font-size:52px;font-weight:900;letter-spacing:-.02em}
.sdside p{margin:18px 0 0;font-size:14.5px;line-height:1.95}
/* 左(トロピカル)は全体をグレーに落とす */
.sdside.trop .k{color:var(--ink-dim)}
.sdside.trop .glyph,.sdside.trop .name{color:var(--ink-dim)}
.sdside.trop p{color:var(--ink-card)}
/* 右(サイデリアル)が主役 */
.sdside.sid{background:var(--surface)}
.sdside.sid .k{color:var(--primary)}
.sdside.sid .glyph,.sdside.sid .name{color:var(--ink)}
.sdside.sid p{color:var(--ink-body)}

/* ---- アヤナムシャ(歳差によるずれ) ---- */
.sdaya{border-top:1px solid var(--rule);padding:32px 40px}
.sdaya .head{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;gap:16px}
.sdaya .k{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.sdaya .v{font-family:Archivo,sans-serif;font-size:26px;font-weight:600;
  letter-spacing:-.02em}
.sdaya .bar{height:4px;background:var(--rule-soft)}
.sdaya .bar > span{display:block;height:4px;width:var(--w,0);background:var(--primary)}
.sdaya .scale{display:flex;justify-content:space-between;margin-top:8px;
  font-family:Archivo,sans-serif;font-size:11px;color:var(--ink-dim)}
.sdaya .scale .now{color:var(--primary);font-weight:600}
.sdlink{display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-top:1px solid var(--rule);padding:20px 40px;background:var(--surface);
  flex-wrap:wrap;font-size:14px}
.sdlink a{white-space:nowrap}

/* ---- 12星座の期間表 ---- */
.sdperiods{margin:0 0 20px}
.sdperiods .head{display:flex;align-items:baseline;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.sdperiods h3{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.sdperiods .spacer{flex:1}
.sdperiods .cap{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.sdgrid{display:grid;grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--rule-soft)}
.sdgrid > div{padding:18px 20px;border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft)}
.sdgrid .s{font-size:17px;font-weight:700;margin-bottom:8px}
.sdgrid .t{font-family:Archivo,sans-serif;font-size:12.5px;color:var(--ink-dim)}
.sdgrid .d{font-family:Archivo,sans-serif;font-size:12.5px;
  color:var(--primary);font-weight:600}

/* ---- 狭い画面 ---- */
@media (max-width:820px){
  .sdinput{grid-template-columns:1fr}
  .sdinput button{padding:16px 0}
  .sdinput select{font-size:24px}
  /* 結果は上下2段に畳む */
  .sdpair{grid-template-columns:1fr}
  .sdpair .divider{height:1px}
  .sdside{padding:24px 22px}
  .sdside .name{font-size:34px}
  .sdside .glyph{font-size:28px}
  .sdaya,.sdlink{padding:22px}
  .sdgrid{grid-template-columns:1fr 1fr}
  .sdgrid > div{padding:14px 16px}
  .sdperiods h3{font-size:19px}
}