/* ===== base (from houisamp) ===== */
:root{
  --bg: rgba(0, 59, 118, 0.635);
}
body {
    margin: 0;
    padding: 20px;
    min-width: 1360px;
    
    display: flex;
    justify-content: center;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, Arial;
    background: radial-gradient(1100px 600px at 30% 0%, rgba(95, 228, 255, 0.14), transparent 60%),
                radial-gradient(900px 560px at 80% 10%, rgba(255, 251, 1, 0.345), transparent 60%),
                var(--bg);
}
body,h1,h2,h3{ margin: 0; padding: 0;}
.wrap {
    padding: 10px;
}
.fui-card {
            width: 188px;
            background: #1e1e1e;
            border-radius: 8px;
            border: 1px solid #333;
            /* グリッドからフレックスボックスの縦並びに変更 */
            display: flex;
            flex-direction: column;
            gap: 1px; /* セクション間の余白 */
            padding: 2px;
            margin: 0 0 0 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            color: #e0e0e0;
        }

        /* 日付と詳細内容全体 */
        .info-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        /* 方位盤と月アイコンを配置するセクション */
        .compass-section {
            display: flex; /* 子要素を横並びに */
            align-items: center; /* 垂直方向中央揃え */
            justify-content: space-between; /* 均等配置 */
            padding: 0 0px;
        }

        /* SVGコンテナ */
        .svg-container {
            width: 120px;
            height: 120px;
        }

        .p { stroke: #444; stroke-width: 0.6; fill: rgba(255,255,255,0.03); }
        .bg-r { fill: rgba(255, 60, 60, 0.8); stroke: #ff8888; }
        .bg-b { fill: rgba(60, 100, 255, 0.8); stroke: #88aaff; }
        .bg-y { fill: rgba(255, 200, 0, 0.8); stroke: #ffe066; }
        text { font-size: 8px; font-weight: bold; text-anchor: middle; dominant-baseline: central; fill: #bbb; }
        .inv { fill: #000; }
        .chu-gu { font-size: 6.5px; fill: #fff; }
        .lbl { font-size: 6px; fill: #777; font-weight: normal; }


        /* 月のアイコン配置（通常の流れに配置） */
        .moon-icon-bg {
            /* 絶対配置を解除し、通常のブロック要素に */
            position: static; 
            width: 70px; 
            height: 70px; 
            border-radius: 50%;
            box-shadow: 15px 0px 0 0 #f1c40f; 
            transform: rotate(30deg); 
            opacity: 0.8;
            cursor: help;
            margin: 0px 15px 15px 0; /* 方位盤との隙間 */
        }

        /* 日付行のレイアウト */
        .date-line {
            display: flex;
            align-items: baseline;
            white-space: nowrap;
            margin-bottom: 5px;
        }
        .dot { color: #00ff7f; margin-right: 2px; }
        .date-main { font-size: 15px; font-weight: bold; color: #fff; margin-right: 3px; }
        
        .status-small { font-size: 9px; color: #ccc; margin-right: 4px; }
        .status-normal { font-size: 11px; color: #fff; }

        .num-badge {
            background-color: #00ff7f;
            color: #000;
            padding: 0px 3px;
            border-radius: 3px;
            font-weight: bold;
            margin-left: 1px;
        }
        /* ===== score badge coloring ===== */
        .num-badge { /* 既存の共通スタイルは残す前提 */ }

        .num-badge.pos { background: #0e3; color: #062; font-weight: 800; }   /* + */
        .num-badge.zero { background: #444; color: #eee; font-weight: 800; }  /* 0 */
        .num-badge.neg { background: #4a1111; color: #ffd7d7; font-weight: 800; } /* - */

        /* ===== score badge coloring ===== */
        .num-badge { /* 既存の共通スタイルは残す前提 */ }

        .num-badge.pos { background: #0e3; color: #062; font-weight: 800; }   /* + */
        .num-badge.zero { background: #444; color: #eee; font-weight: 800; }  /* 0 */
        .num-badge.neg { background: #4a1111; color: #ffd7d7; font-weight: 800; } /* - */


        /* 暦詳細テキスト */
        .calendar-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
            line-height: 1.4;
            margin:0 0 0 3px;
        }
        .cal-txt { font-size: 10px; color: #aaa; white-space: nowrap; }

        .star-keyword {
            display: inline-block;
            padding: 1px 5px;
            border-radius: 4px;
            font-size: 9px;
            font-weight: bold;
            margin-left: 4px;
            color: #fff;
        }
        .kw-green { background-color: #008f51; }
        .kw-darkred { background-color: #8b0000; }
        
        .astro-line {
            font-size: 10.5px;
            margin: 0 0 4px 2px;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .sun-sign { color: #ffaa33; font-weight: bold; }
        .moon-sign { color: #d192ff; font-weight: bold; }

        /* 凶方位データ（画像下部に配置） */
        .kyo-footer-bar {
            width: 100%; 
            display: flex;
            justify-content: space-around; 
            font-size: 10px;
            background-color: #121212; 
            padding: 5px 0px; 
            border-radius: 0 0 8px 8px; 
            box-sizing: border-box; 
        }
        
        .kyo-item {
             margin: 0 0px;
        }

        .tag {
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: bold;
            margin-right: 1px;
        }
        .t-g { background: #ff3c3c; color: #fff; }
        .t-a { background: #3c64ff; color: #fff; }
        .t-s { background: #ffc800; color: #000; }
        .val { color: #ccc; }


.toolbar {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.toolbar .month-title {
  font-size: 18px;
  font-weight: 700;
  color:#e0e0e0;
}
.toolbar .btns button {
  background:#1e1e1e;
  color:#e0e0e0;
  border:1px solid #333;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
}
.toolbar .btns button:hover{background:#2a2a2a}
.status {
  font-size:12px;
  color:#aaa;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* calendar grid */
.cal {
  display:grid;
  grid-template-columns: repeat(7, 192px);
  gap: 2px;
  align-items:start;
}
.cell-blank {
  width:192px;
  height: 1px; /* visually minimal; keeps grid alignment */
  opacity:.15;
}
/* make cards align nicely */
.fui-card { margin:0; }

/* make compass size exactly like houisamp */
.houi-compass { width:92px; height:92px; }
.houi-compass svg { width:92px; height:92px; display:block; }

/* hide debug legend if present */
.houi-legend { display:none; }

/* ===== fortune pills ===== */
.pill { display:inline-block; padding:1px 6px; border-radius:10px; font-size:11px; margin-left:4px; line-height:1.4; }
.pill-do { background: rgba(46, 204, 113, .18); color: #2ecc71; border: 1px solid rgba(46,204,113,.35); }
.pill-avoid { background: rgba(231, 76, 60, .18); color: #c0392b; border: 1px solid rgba(231,76,60,.35); }
.pill-target { background: rgba(52, 152, 219, .28); color: #f1c40f; border: 1px solid rgba(52,152,219,.45); }
.pill-group { display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:6px; }
/* ===== fortune pills ===== */
.pills{ display:inline-flex; gap:2px; margin-left:4px; flex-wrap:wrap; }
.pill{
  display:inline-block;
  padding:2px 6px;
  border-radius:8px;
  font-size:11px;
  line-height:1.2;
  vertical-align:middle;
  white-space:nowrap;
}
.pill-do{
  background:#008f51; color:#062; font-weight:700;
}
.pill-avoid{
  background:#4a1111; color:#ffd7d7; font-weight:700;
}
.pill-target{
  background:#1c4aa6; color:#ffd84d; font-weight:800;
}
/* ===== robust moon phase (8 types, underscore class) ===== */

/* compass-section内で絶対に崩れない配置 */
.compass-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* 盤が入る枠（既存があれば合わせてOK） */
.compass-box{
  flex: 0 0 auto;
  margin: 0 0 0 8px;
}

/* 月アイコン本体 */
.moon-icon-bg{
  --size: 63px;               /* ←必要ならここでサイズ調整 */
  --light: #ffd83d;
  --dark:  #0f0f12;
  --rim:   rgba(255,255,255,.25);
  --shift: 0%;                /* 月相ごとに上書き */

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: relative;
  margin: 0 20px 0 0;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--dark);
  box-shadow:
    inset 0 0 0 1px var(--rim),
    0 2px 6px rgba(0,0,0,.45);
}

/* 光る円（満月の元） */
.moon-icon-bg::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff6c9 0%, #ffd84d 55%, #f0b800 100%);
  box-shadow: 0 0 10px rgba(255, 216, 77, .25);
}

/* 影の円（光る円を削って月相にする） */
.moon-icon-bg::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: var(--dark);
  transform: translateX(var(--shift));
}

/* --- 8 phase8 classes (underscore) --- */

/* 新月：光を完全に隠す */
.moon-icon-bg.new_moon::before{ background: var(--dark); }
.moon-icon-bg.new_moon::after{ display:none; }

/* 満月：影なし */
/* 満月：全面を明るく（黄色） */
/* 満月：APIが full を返す場合の互換 */
.moon-icon-bg.full::before{
  background: radial-gradient(circle at 35% 35%, #fff6c9 0%, #ffd84d 55%, #f0b800 100%);
  box-shadow: 0 0 10px rgba(255, 216, 77, .25);
}
.moon-icon-bg.full::after{ display:none; }

/* ===== phase8 alias compatibility ===== */

/* 新月：APIが new を返す場合 */
.moon-icon-bg.new::before{ background: var(--dark); }
.moon-icon-bg.new::after{ display:none; }

/* 下弦：APIが third_quarter を返す場合（= last_quarter と同義扱い） */
.moon-icon-bg.third_quarter{ --shift: 50%; }



/* 上弦：右半分が光（waxing） */
.moon-icon-bg.first_quarter{ --shift: -50%; }

/* 下弦：左半分が光（waning） */
.moon-icon-bg.last_quarter{ --shift: 50%; }

/* 三日月（満ちる）：右に細く光 */
.moon-icon-bg.waxing_crescent{ --shift: -32%; }

/* 欠け三日月：左に細く光 */
.moon-icon-bg.waning_crescent{ --shift: 32%; }

/* 満ちていく（十三夜〜満月前）：右が多く光（影は左に寄る） */
.moon-icon-bg.waxing_gibbous{ --shift: -72%; }

/* 欠けていく（満月後〜小望月）：左が多く光（影は右に寄る） */
.moon-icon-bg.waning_gibbous{ --shift: 72%; }

/* 万一不明値が来た時の保険（暗い円） */
.moon-icon-bg:not(.new_moon):not(.waxing_crescent):not(.first_quarter):not(.waxing_gibbous)
            :not(.full_moon):not(.waning_gibbous):not(.last_quarter):not(.waning_crescent){
  background: var(--dark);
}
/* 今日のカード強調 */
.fui-card.is-today{
  outline: 2px solid rgba(255, 216, 77, 0.95);
  box-shadow:
    0 0 0 3px rgba(255, 216, 77, 0.25),
    0 10px 22px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}

.fui-card.is-today .date-main{
  color: #ffd84d;
  text-shadow: 0 0 8px rgba(255, 216, 77, 0.35);
}


/* ===== footer legend (houisamp vibe) ===== */
.fui-legend-wrap{
  margin-top: 14px;
  padding: 0 8px 16px;
}

.fui-legend-card{
  display: inline-block;
  background: rgba(20, 20, 24, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.fui-legend-title{
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: .02em;
}

.fui-legend-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.legend-label{
  min-width: 120px;
  opacity: 0.9;
  font-size: 12px;
}
/* ===== footer legend extra ===== */
.legend-sep{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 10px 0;
}

.legend-note{
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.5;
  margin: 6px 0;
}

.legend-text{
  font-size: 12px;
  opacity: 0.92;
  line-height: 1.45;
}

.legend-ul{
  margin: 6px 0 0 18px;
  padding: 0;
}
.legend-ul li{
  margin: 2px 0;
}

/* ===== day-of-week bar ===== */
.dow-bar{
  display: grid;
  grid-template-columns: repeat(7, 182px); /* カレンダーと同じ幅 */
  gap: 0;                                  /* ピッタリ揃える */
  margin: 8px 0 10px;
  user-select: none;
}

.dow{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 32px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;

  background: rgba(20, 20, 24, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: none;
  color: rgba(255,255,255,0.86);
}

.dow:first-child{
  border-left: 1px solid rgba(255,255,255,0.10);
  border-top-left-radius: 10px;
}
.dow:last-child{
  border-top-right-radius: 10px;
}

/* 日曜：朱色 */
.dow.sun{
  color: #ffd7d7;
  background: rgba(74, 17, 17, 0.70);
  border-color: rgba(255, 120, 120, 0.20);
}

/* 土曜：暗い青 */
.dow.sat{
  color: #cfe3ff;
  background: rgba(20, 40, 90, 0.70);
  border-color: rgba(120, 170, 255, 0.20);
}
/* ===== dot coloring by score sign ===== */
.dot{ display:inline-block; } /* 既にあれば不要 */

.dot.pos{ color:#0e3; }
.dot.zero{ color:#9aa0a6; }   /* グレー */
.dot.neg{ color:#b11f29; }    /* 朱色寄り（暗赤系） */

/* ===== top bar layout (year/month compass + buttons) ===== */
.topbar{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin: 10px 0 10px 0;
}
/* ===== year/month compass label ===== */
.ym-compass-inner{ 
  width: 100%;
  padding: 5px;
  background: rgba(20, 20, 24, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
}
.ym-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom: 6px;
}
.ym-title{
  font-weight: 900;
  font-size: 12px;
  opacity: .9;
}
.ym-star{
  font-size: 12px;
  opacity: .95;
  font-weight: 800;
}
.ym-kyo{ margin-top: 6px; }

/* ===== year/month compass side pills ===== */
.ym-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.ym-body{ flex: 0 0 auto; }

.ym-side{
  min-width: 140px;
  max-width: 200px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
}

.ym-side-title{
  font-size: 12px;
  font-weight: 900;
  opacity: 0.9;
  margin-bottom: 6px;
}

.ym-side-pills .pills{ display:flex; flex-wrap:wrap; gap:6px; }
.ym-side-pills .muted{ opacity:.6; font-size:12px; }

/* ===== header compact layout ===== */
.wrap{
  padding: 10px 10px 0;
}

/* 1段目：ブランド・月タイトル・右ブロック */
.toolbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:start;
  gap: 10px;
  margin-bottom: 8px;
}

/* 左：サイト名 */
.brand{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 240px;
}
.brand-title{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.brand-name{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .06em;
}
.brand-sub{
  font-size: 12px;
  opacity: .85;
  white-space: nowrap;
}
.brand-url{
  font-size: 12px;
  opacity: .65;
}

/* 中央：年月 */
.month-title{
  text-align:center;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .06em;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(20,20,24,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.30);
}

/* 右：年盤/月盤/ボタン */
.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  gap: 10px;
}

/* 年盤/月盤枠：少し締める */
.ym-compass{
  padding: 8px 10px;
}
.ym-compass-title{
  font-weight: 900;
  font-size: 12px;
  opacity: .9;
  margin-bottom: 6px;
}

/* ボタン群：盤の高さに寄せる */
.btns{
  display: grid;
  grid-template-columns: repeat(4, 162px);
  user-select: none;
  flex-direction:column;
  gap: 4px;
  margin: 0 0 10px 0;
  align-self:stretch;
  justify-content:flex-start;
}
.btns button{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20,20,24,0.72);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}
.btns button:hover{
  filter: brightness(1.12);
}

/* 2段目：API + 曜日 */
.header-under{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: -80px;
}

/* APIは左に固定表示（後で消す前提でも崩れない） */
#apiStatus{
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(20,20,24,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: .9;
}

/* 曜日バーは残り幅へ */
.dow-bar{
  flex: 1 1 auto;
  margin: 0; /* 既存の余白を殺す */
  grid-template-columns: repeat(7, 194px); /* あなたのカード幅と一致 */
}

/* 画面が狭い時は縦落ちしても崩れない */
@media (max-width: 1200px){
  .toolbar{
    grid-template-columns: 1fr;
  }
  .month-title{ text-align:left; }
  .topbar{ justify-content:flex-start; flex-wrap:wrap; }
  .btns{ flex-direction:row; }
  .dow-bar{ overflow-x:auto; }
}
/* ===== header-under: 2 rows (API row + DOW row) ===== */
.header-under{
  display: block;              /* flexをやめる */
  margin-bottom: 10px;
}

#apiStatus{
  display: block;
  margin-bottom: 8px;          /* 曜日バーとの間 */
  max-width: 20%;
  white-space: normal;         /* 折り返し許可 */
  overflow-wrap: anywhere;     /* 長いURLでも折れる */
  word-break: break-word;
}

.dow-bar{
  width: fit-content;          /* 200px*7 で“必要な分だけ” */
  max-width: 100%;
  overflow-x: auto;            /* 画面が狭いときだけ横スクロール */
}