/* 四柱推命の相性(birth.html / compat.html 共通)。見た目はすべてここ(2026-09-05) */
.bcompat{margin-top:8px}
.cinput{border:1px solid var(--rule);padding:18px 24px 20px;display:flex;flex-direction:column;gap:10px}
.cinput .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.cinput .lab .opt{margin-left:8px;font-weight:400;letter-spacing:0;font-size:11px;text-transform:none}
.cinput .picks{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cpillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-mid);border:1px solid var(--rule-mid);margin-top:22px}
.cpillars .cp{background:var(--bg);padding:16px 20px;display:flex;flex-direction:column;gap:6px}
.cpillars .lab,.cgauges .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.cpillars strong{font-size:24px;font-weight:900;color:var(--ink)}
.cgauges{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-mid);border:1px solid var(--rule-mid);border-top:0}
.cgauges .cg{background:var(--bg);padding:16px 20px;display:flex;flex-direction:column;gap:4px}
.cgauges strong{font-size:26px;font-weight:900;color:var(--primary)}
.cgauges .d{font-size:11.5px;color:var(--ink-dim)}
.crel{list-style:none;margin:18px 0 0;padding:0}
.crel li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px;line-height:1.9}
.crel li strong{color:var(--ink)}
.crel li span{color:var(--ink-body)}
.bcompat .ttext{margin:18px 0 0;font-size:15.5px;line-height:2;color:var(--ink-body)}
.bcompat .ttext strong{color:var(--primary)}
.bcompat .fine{margin:12px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink-dim)}
@media (max-width:700px){.cpillars,.cgauges{grid-template-columns:1fr}.crel li{grid-template-columns:1fr}}
/* 相性ページの節(compat.html) */
.kcsec{padding-top:64px}
.kchead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.kchead h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em}
.kchead .meta{font-size:13px;color:var(--ink-dim)}
.cinput.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cinput.two > div{display:flex;flex-direction:column;gap:10px}
.cinput .pick{position:relative;display:inline-flex;background:var(--surface);border:1px solid var(--rule-mid)}
.cinput .pick select{-webkit-appearance:none;appearance:none;border:0;background:transparent;padding:10px 32px 10px 14px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.cinput .pick:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.cinput .pick .cv{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--ink-dim);pointer-events:none}
.bcompat .fine a{color:var(--primary)}
@media (max-width:700px){.cinput.two{grid-template-columns:1fr}}
/* 3つの掛け合わせ(星座の相性 × 四柱推命 × 九星) */
.ctriple{margin-top:18px;border:1px solid var(--rule);padding:18px 22px}
.cthead{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.cthead .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.cthead .meta{font-size:12px;color:var(--ink-dim)}
.cttotal{display:flex;align-items:baseline;gap:14px}
.cttotal strong{font-family:Archivo,sans-serif;font-size:40px;font-weight:700;color:var(--primary);line-height:1.1}
.cttotal .tier{font-size:15px;font-weight:700;color:var(--ink)}
.ctparts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-mid);border:1px solid var(--rule-mid);margin-top:14px}
.ctparts > div{background:var(--bg);padding:12px 16px;display:flex;flex-direction:column;gap:3px}
.ctparts .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.ctparts strong{font-family:Archivo,sans-serif;font-size:20px;color:var(--ink)}
.ctparts .d{font-size:11.5px;color:var(--ink-dim)}
@media (max-width:700px){.ctparts{grid-template-columns:1fr}}
/* 相性ページ: 星座グリッドの下の生年月日(案B・2026-09-05) */
.pboard .bday{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.pboard .bday .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.pboard .bday .lab .opt{margin-left:8px;font-weight:400;letter-spacing:0;font-size:11px;text-transform:none}
.pboard .bday .picks{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pboard .bday .pick{position:relative;display:inline-flex;background:var(--surface);border:1px solid var(--rule-mid)}
.pboard .bday .pick select{-webkit-appearance:none;appearance:none;border:0;background:transparent;padding:9px 30px 9px 12px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.pboard .bday .pick:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.pboard .bday .pick .cv{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--ink-dim);pointer-events:none}
.picker .pnote{grid-column:1 / -1;margin:14px 0 0;font-size:12.5px;color:var(--ink-dim)}
.kcsec{padding-top:40px}
/* その日の二人(見る日の順位・2026-09-05) */
.cday{margin-top:22px;border:1px solid var(--rule);padding:18px 22px}
.cdhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.cdhead .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.cdhead .pick-date{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}
.cdhead .pick-date input{border:1px solid var(--rule-mid);background:var(--surface);padding:7px 10px;font:inherit;font-size:14px;color:var(--ink)}
.cdhead .meta{font-size:12.5px;color:var(--ink-dim)}
.cdfuture{margin:0 0 12px;padding:10px 14px;border:1px solid var(--rule-mid);background:var(--surface);font-size:12.5px;line-height:1.8;color:var(--ink-body)}
.cdfuture strong{color:var(--primary)}
.cdcols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-mid);border:1px solid var(--rule-mid)}
.cdcols .cdp{background:var(--bg);padding:14px 18px;display:flex;flex-direction:column;gap:4px}
.cdcols .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.cdcols .pos strong{font-family:Archivo,sans-serif;font-size:34px;font-weight:700;color:var(--primary);line-height:1.1}
.cdcols .pos .of{font-family:Archivo,sans-serif;font-size:12px;color:var(--ink-dim);margin-left:4px}
.cdcols .who{font-size:14px;font-weight:700;color:var(--ink)}
.cdcols .line{margin:4px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink-dim)}
.cday .ttext{margin-top:12px}
.cday .fine a{color:var(--primary)}
@media (max-width:700px){.cdcols{grid-template-columns:1fr}}