/* houi.css — 「今日の方位」（/houi/・/houi/<star>）の見た目。移植元＝docs/ui/今日の方位_v8_2026-08-28.html
 * 確定値：四正30度・四隅60度／南が上／白盤（v8 の body.white の値をそのまま盤の変数に固定）。
 * 背景は Canvas 描画（js/houi.js mountStarfield）。画像は使わない。テスト用コントロール（#ui）は撤去済み。
 * ★ 6診断色は使わない。使う色は 紺・黒・白・金 の系統のみ（theme.css 冒頭） */

.houi {
  --goldL: #e8c65a; --dim: rgba(232, 236, 248, .30); --red: #e2645f;
  /* 白盤 */
  --board: #f4f6fb; --line: rgba(60, 70, 104, .30); --oct: rgba(138, 109, 18, .55);
  --txt: #2a3350; --txtKyo: rgba(60, 70, 104, .45); --kichiFill: rgba(201, 162, 39, .22);
  --kichiLine: #8a6d12; --kichiTxt: #7a5f10; --mkX: rgba(60, 70, 104, .40); --numC: rgba(60, 70, 104, .55); --boardRed: #b5232a;
  background: #05060f; color: #e8ecf8; min-height: 100svh;
}
.houi #bg { position: fixed; inset: 0; z-index: 0; background: #05060f; }
.houi #bg canvas { width: 100%; height: 100%; display: block; }
.houi .nav { z-index: 3; }
.houi #wrap { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 84px 18px 80px; }
.houi h1 { font-size: 12px; letter-spacing: .24em; color: var(--goldL); font-weight: 700; margin: 0 0 6px; text-align: center; }
.houi #date { text-align: center; font-size: 19px; letter-spacing: .06em; margin: 0 0 20px; }
.houi .lead { text-align: center; font-size: 13px; color: var(--dim); line-height: 1.9; margin: 0 0 22px; }
.houi [data-houi="error"] { margin: 0 0 22px; padding: 14px 16px; border-radius: 11px; background: rgba(226, 100, 95, .10); border: 1px solid rgba(226, 100, 95, .35); font-size: 13px; line-height: 1.8; }
.houi [data-houi="error"][hidden] { display: none; }

/* ── STEP1 九星リスト ── */
.houi .star { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; text-decoration: none;
  padding: 14px 15px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(201, 162, 39, .22); color: inherit; }
.houi .star:hover { background: rgba(255, 255, 255, .08); }
.houi .star.mine { border-color: rgba(201, 162, 39, .7); background: rgba(201, 162, 39, .10); }
.houi .star .nm { font-size: 15.5px; letter-spacing: .05em; flex: 0 0 auto; width: 96px; }
.houi .star .yr { font-size: 11.5px; color: var(--dim); line-height: 1.6; flex: 1 1 auto; }
.houi .star.mine .yr { color: var(--goldL); }
.houi .star .yr .nb { white-space: nowrap; }
.houi .star .ar { color: rgba(201, 162, 39, .7); font-size: 15px; }
.houi #notice { margin: 0 0 22px; padding: 14px 16px; border-radius: 11px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px; line-height: 1.9; color: rgba(232, 236, 248, .68); }
.houi #notice p { margin: 0 0 9px; }
.houi #notice p:last-child { margin: 0; }
.houi #notice b { color: var(--goldL); font-weight: 700; }
.houi #cta { display: block; margin-top: 26px; padding: 16px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #d9b445, #b8912a); color: #1a1405; font-weight: 700;
  font-size: 15px; letter-spacing: .06em; text-decoration: none;
  box-shadow: 0 6px 20px rgba(201, 162, 39, .25); }
.houi .ctaSub { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.8; color: var(--dim); text-align: center; }
.houi #dob { margin-top: 16px; padding: 14px 15px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 11px;
  font-size: 12.5px; line-height: 1.85; color: rgba(232, 236, 248, .55); }
.houi #dob a { color: var(--goldL); }

/* ── STEP2 方位盤 ── */
.houi #who { text-align: center; font-size: 12.5px; color: var(--dim); margin: 0 0 14px; }
.houi svg { width: 100%; height: auto; display: block; }
.houi .oct { fill: var(--board); stroke: var(--oct); stroke-width: 1.2; }
.houi .sect { fill: none; stroke: var(--line); stroke-width: 1; }
.houi .sect.kichi { fill: var(--kichiFill); stroke: var(--kichiLine); stroke-width: 1.6; }
.houi .hubdot { fill: var(--oct); }
.houi .axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.houi .dir { font-size: 18px; fill: var(--txt); text-anchor: middle; dominant-baseline: middle; }
.houi .dir.kichi { fill: var(--kichiTxt); font-weight: 700; }
.houi .dir.kyo { fill: var(--txtKyo); }
.houi .dir.sei { fill: var(--boardRed); }
.houi .axis.sei { stroke: var(--boardRed); opacity: .85; }
.houi .mk { font-size: 21px; text-anchor: middle; dominant-baseline: middle; }
.houi .mk.o { fill: var(--kichiTxt); }
.houi .mk.x { fill: var(--mkX); }
.houi .num { font-size: 12px; text-anchor: middle; dominant-baseline: middle; fill: var(--numC); }
.houi .row { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); align-items: flex-start; }
.houi .row:last-child { border-bottom: 0; }
.houi .badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.houi .badge.o { background: rgba(201, 162, 39, .9); color: #1a1405; }
.houi .badge.x { background: rgba(255, 255, 255, .10); color: rgba(232, 236, 248, .55); }
.houi .txt { flex: 1; font-size: 14px; line-height: 1.85; }
.houi .txt b { color: var(--goldL); margin-right: 6px; }
.houi #foot { margin-top: 20px; padding: 14px 15px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 11px;
  font-size: 12.5px; line-height: 1.85; color: rgba(232, 236, 248, .60); }
.houi #foot p { margin: 0 0 1em; }
.houi #foot p:last-child { margin: 0; }
.houi #back { display: block; margin-top: 22px; width: 100%; padding: 13px; border-radius: 11px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14); color: rgba(232, 236, 248, .7); font-size: 13px; text-align: center; text-decoration: none; }
/* 有料導線の枠（末尾） */
.houi #paid { margin-top: 22px; padding: 14px 15px; border: 1px dashed rgba(201, 162, 39, .35); border-radius: 11px;
  font-size: 12.5px; line-height: 1.85; color: rgba(232, 236, 248, .6); text-align: center; text-wrap: balance; }

/* 方位の表記の注記（「方位は気学の表記です…」）。STEP1 は #notice の最後の段落、STEP2 は盤の下・凡例の上 */
.houi #wrap > .dir-note { margin: 6px 0 16px; text-align: center; font-size: .8rem; color: var(--dim); }