/* ============================================================
   css/meishiki.css
   トップページ(index.php:命式作成・表示)専用のスタイル。
   common.css を読み込んだ後に読み込む前提。
   ============================================================ */

/* ---------- サイト説明文(トップページ冒頭) ---------- */
#siteIntro h1{
  font-size:17px;
  margin:0 0 10px;
  line-height:1.5;
  color: var(--text);
}
#siteIntro p{
  font-size:13.5px;
  color: var(--text-secondary);
  margin:0 0 10px;
  line-height:1.7;
}
#siteIntro p.lead{
  color: var(--text);
}
#siteIntro p:last-of-type{ margin-bottom:0; }
#siteIntro h2{
  font-size:14px;
  margin:18px 0 8px;
  color: var(--text);
}
#siteIntro h2::before{ content:"◆ "; color: var(--accent-dark); }
#siteIntro ul{
  margin:0;
  padding-left:1.4em;
  color: var(--text-secondary);
  font-size:13px;
}
#siteIntro li{ margin-bottom:5px; }
#siteIntro li:last-child{ margin-bottom:0; }

/* ---------- メインコンテンツ ---------- */
.main-content{
  padding: 28px 32px 80px;
  max-width: 900px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
#resultsWrapper.results-visible{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.card-header h2{
  font-size:15px; font-weight:600; margin:0;
  display:flex; align-items:center; gap:8px;
}
.card-header .hint{ font-size:12px; color: var(--text-tertiary); font-weight:400; }

.copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--accent-btn);
  border:1px solid var(--accent-btn);
  color: #fff;
  border-radius:6px;
  padding:5px 10px;
  font-size:12.5px;
  position:relative;
  transition: background .15s, border-color .15s;
}
.copy-btn:hover{ background: var(--accent-btn-hover); border-color: var(--accent-btn-hover); }
.copy-btn.copied{ background: var(--accent-btn-hover); border-color: var(--accent-btn-hover); }
.copy-btn.primary{
  background: var(--accent-btn);
  border-color: var(--accent-btn);
  color:#fff;
  font-size:14px;
  padding:9px 16px;
  font-weight:600;
}
.copy-btn.primary:hover{ background: var(--accent-btn-hover); border-color: var(--accent-btn-hover); color:#fff; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--text); color:#fff;
  padding:9px 18px; border-radius:6px; font-size:13px;
  opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s;
  z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* 陰占 */
.inyou-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.inyou-table th, .inyou-table td{
  border:1px solid var(--border);
  padding:8px 6px;
  text-align:center;
}
.inyou-table th{ background: var(--bg); color: var(--text-secondary); font-weight:500; font-size:12px; }
.inyou-table th:first-child{ font-size:12px; padding-left:4px; padding-right:4px; }
/* 算命学カードの陰占テーブルだけは、これまで通り1列目の幅を固定する(要望により維持) */
.sanmei-table th:first-child{ width:60px; }

.cell-explain{ cursor:pointer; transition: background .15s; }
.cell-explain:hover{ background: var(--accent-tint); }
/* 日干支(日柱・壬午)と九星気学の本命星(年柱)だけ、さりげなく色を変えて強調する */
.highlight-cell{ background: var(--accent-tint); font-weight:600; }
.highlight-cell:hover{ background: var(--accent-tint); }

.alt-name{ font-size:10.5px; color: var(--text-tertiary); margin-left:2px; }
.daynushi{ color: var(--text-tertiary); font-size:12.5px; }
.zoukan-cell{ font-size:12px; letter-spacing:-.02em; }
.zoukan-active{ color: var(--text); font-weight:600; }
.zoukan-dim{ color: var(--text-tertiary); font-weight:400; }

/* 四柱推命カード内の位相法・神殺サブブロック */
.sub-block{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.sub-block-title{ font-size:14px; font-weight:600; margin-bottom:6px; }
.sub-block-text{ font-size:13px; color: var(--text-tertiary); margin:0; }

/* 算命学カード:テーブルと人体図を横並びにする */
.sanmei-layout{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.sanmei-table{ flex:0 0 auto; width:auto; }
.sanmei-left-col{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }

.gogyou-block{ margin-top:2px; }
.gogyou-title{ font-size:11px; color: var(--text-tertiary); margin-bottom:4px; }
.gogyou-row{ display:flex; gap:10px; flex-wrap:wrap; }
.gogyou-item{
  display:inline-flex; align-items:baseline; gap:3px;
  font-size:12px;
}
.gogyou-label{ color: var(--text-tertiary); }
.gogyou-count{ font-size:12.5px; font-weight:600; color: var(--text-secondary); }
.kyusei-row th, .kyusei-row td{ font-size:12.5px; }

.tenchusatsu-block .name{
  font-size:14px; font-weight:600; color: var(--text);
}
.tenchusatsu-block .desc{
  font-size:13px; color: var(--text-secondary);
  margin-top:2px;
}

/* 陽占 人体図(3×3):中央8マスが十大主星、四隅が十二大従星 */
.jintaizu{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap:8px;
  margin-top:6px;
  width:320px;
  max-width:100%;
  aspect-ratio: 1 / 1;
  flex-shrink:0;
}
.star-cell{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
  transition: border-color .15s, background .15s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.star-cell:hover{ border-color: var(--accent); background: var(--accent-tint); }
.star-cell .pos{ font-size:11px; color: var(--text-tertiary); }
.star-cell .name{ font-size:14px; font-weight:600; margin-top:2px; }
.star-cell .sub-label{ font-size:10.5px; color: var(--text-tertiary); margin-top:1px; }
.star-cell.head{ grid-column:2; grid-row:1; }
.star-cell.right-hand{ grid-column:1; grid-row:2; }
.star-cell.center{ grid-column:2; grid-row:2; background: var(--accent-tint); border-color: var(--accent); }
.star-cell.left-hand{ grid-column:3; grid-row:2; }
.star-cell.belly{ grid-column:2; grid-row:3; }

/* 四隅:十二大従星(左肩/右足/左足)+伴星(右肩、日主の干合相手の陰陽反転から算出) */
.star-cell.top-left{ grid-column:1; grid-row:1; }
.star-cell.top-right{ grid-column:3; grid-row:1; }
.star-cell.bottom-left{ grid-column:1; grid-row:3; }
.star-cell.bottom-right{ grid-column:3; grid-row:3; }
.star-cell.juni-cell{ background: var(--bg); }
.star-cell.juni-cell .name{ font-size:13px; }
.star-cell.juni-cell.pending{
  border-style: dashed;
  cursor: default;
}
.star-cell.juni-cell.pending:hover{ background: var(--bg); border-color: var(--border); }
.star-cell.juni-cell.pending .name{ color: var(--text-tertiary); font-weight:500; }

/* 大運:現在の大運は常時表示、詳細は展開式 */
.taiun-current{
  background: var(--accent-tint);
  border-radius: var(--radius);
  padding:12px 16px;
  margin-top:12px;
}
.taiun-current .label{ font-size:11.5px; color: var(--accent-dark); }
.taiun-current .value{ font-size:17px; font-weight:600; margin-top:2px; }
.taiun-current .star-name{ font-size:14px; font-weight:500; color: var(--text-secondary); }

.taiun-toggle{
  display:flex; align-items:center; gap:6px;
  cursor:pointer;
  margin-top:14px;
  font-size:13px;
  color: var(--text-secondary);
}
.taiun-toggle:hover{ color: var(--accent-dark); }
.taiun-toggle .arrow{ transition: transform .15s; color: var(--text-tertiary); font-size:11px; }
.taiun-body{ display:none; margin-top:12px; }
.taiun-body.open{ display:block; }
.taiun-toggle.open .arrow{ transform: rotate(90deg); }
.taiun-table{ width:100%; border-collapse:collapse; font-size:13px; }
.taiun-table th, .taiun-table td{ border:1px solid var(--border); padding:7px 6px; text-align:center; }
.taiun-table th{ background: var(--bg); font-weight:500; color: var(--text-secondary); font-size:11.5px; }
.taiun-table tr.current td{ background: var(--accent-tint); font-weight:600; }
.taiun-table tbody tr{ cursor:pointer; transition: background .15s; }
.taiun-table tbody tr:hover td{ background: var(--accent-tint); }
.taiun-table tbody tr.current:hover td{ background: var(--accent-tint); }
.taiun-table tbody tr.selected td{ box-shadow: inset 0 0 0 2px var(--accent); }

/* 今日の運勢 */
.meishiki-title{
  font-size:15px; font-weight:700; color: var(--text);
  padding:10px 2px 16px; border-bottom:1px solid var(--border); margin-bottom:12px;
}
.date-control{
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.date-control input[type="date"]{
  border:1px solid var(--border); border-radius:6px;
  padding:7px 10px; font-size:14px; color: var(--text);
  background: var(--surface);
}
.ymd-select{
  border:1px solid var(--border); border-radius:6px;
  padding:7px 26px 7px 10px; font-size:14px; color: var(--text);
  background: var(--surface);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ymd-suffix{ font-size:13px; color: var(--text-secondary); }

.btn-calc{
  display:block;
  width:100%;
  margin-top:14px;
  background: var(--accent-btn);
  border:none;
  color:#fff;
  border-radius: var(--radius);
  padding:13px 20px;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.02em;
  transition: background .15s;
}
.btn-calc:hover{ background: var(--accent-btn-hover); }
@media (min-width:600px){
  .btn-calc{ width:auto; min-width:160px; }
}
.date-arrow{
  border:1px solid var(--border); background:var(--surface);
  width:32px; height:32px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-secondary); font-size:14px;
}
.date-arrow:hover{ border-color: var(--accent); color: var(--accent-dark); }
.today-btn{
  border:none; background:none; color: var(--accent-dark);
  font-size:12.5px; font-weight:600; padding:6px 4px;
}
.fortune-result{
  background: var(--bg);
  border-radius: var(--radius);
  padding:6px 0 2px;
  font-size:13.5px;
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.fp-block{
  background: var(--bg);
  border-radius: var(--radius);
  padding:14px 16px;
}
.fp-label{ font-size:11.5px; color: var(--text-tertiary); margin-bottom:4px; }
.fp-primary{ font-size:19px; font-weight:700; color: var(--text); }
.fp-chip{ cursor:pointer; transition: color .15s; }
.fp-chip:hover{ color: var(--accent-dark); }
.fp-sep{ color: var(--text-tertiary); font-weight:400; margin:0 2px; }
.fp-raw{ font-size:11.5px; color: var(--text-tertiary); margin-top:6px; }

.kanshi-vs{ display:flex; align-items:baseline; gap:8px; font-size:12.5px; color: var(--text-tertiary); flex-wrap:wrap; }
.kanshi-vs .vs-symbol{ font-size:11px; color: var(--text-tertiary); }
.kanshi-vs .my-kanshi{ color: var(--text-tertiary); }
.kanshi-vs .today-kanshi{ color: var(--text-tertiary); }
.kanshi-vs .furigana{ font-size:11px; color: var(--text-tertiary); margin-left:2px; }

.kyou-columns{ display:flex; gap:16px; flex-wrap:nowrap; margin-top:12px; }
.kyou-col{
  flex:1 1 0;
  min-width:0;
  background: var(--bg);
  border-radius: var(--radius);
  padding:14px 16px;
}

.kanshi-breakdown{ margin-top:8px; display:flex; flex-direction:column; gap:10px; }
.breakdown-row{ display:flex; align-items:center; gap:12px; font-size:19px; font-weight:700; }
.breakdown-row .pair{ color: var(--text-tertiary); font-size:11.5px; font-weight:400; min-width:36px; }

.fp-relations{ display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
.fp-rel-item{ font-size:13px; display:flex; align-items:center; gap:5px; }
.fp-rel-label{ font-size:11px; color: var(--text-tertiary); }
.fp-chip-muted{ color: var(--text-tertiary); font-weight:600; }
.fp-chip-sep{ color: var(--text-tertiary); margin: 0 2px; }

.taiun-table-wide{ font-size:11.5px; }
.taiun-table-wide th, .taiun-table-wide td{ padding:6px 4px; }

/* ---------- 解説パネル ----------
   常時表示の固定カラムではなく、普段は画面右外に控えていて、
   星がタップされた時だけ静かにスライドインするオーバーレイ方式。
   閉じている間はシャドウも画面外にあるため見えない。 */
.explain-panel{
  background: var(--surface);
  border-left:1px solid var(--border);
  box-shadow: -2px 0 10px rgba(0,0,0,0.08);
  padding: 22px 20px;
  position: fixed;
  top:0; right:0; bottom:0;
  width: 340px;
  max-width: 60vw;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  z-index:150;
  overflow-y:auto;
}
.explain-panel.open{ transform: translateX(0); }
.explain-panel .ph-title{
  font-size:12px; color: var(--text-tertiary); margin-bottom:4px;
}
.explain-panel .pos-desc{
  font-size:12.5px; color: var(--text-secondary);
  background: var(--bg);
  border-radius:6px;
  padding:10px 12px;
  margin:0;
}
.explain-panel h3{ margin:0 0 12px; font-size:17px; }
.explain-panel p{ font-size:13.5px; color: var(--text-secondary); }
.explain-empty{ color: var(--text-tertiary); font-size:13px; margin-top:40px; text-align:center; }
.explain-panel .close-x{
  display:block; position:absolute; top:16px; right:16px;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface);
  font-size:14px; color:var(--text-secondary);
}

/* =====================================================
   レスポンシブ(スマホ)
   共通のトップバー/サイドバー/アプリ枠は common.css 側で
   制御している。ここでは命式表示まわりの調整のみ行う。
   ===================================================== */
@media (max-width: 900px){
  /* 今日の運勢:月運・日運の2カラムを、狭い画面でも横並びのまま維持する */
  .kyou-columns{ gap:8px; }
  .kyou-col{ padding:10px 8px; }
  .kyou-col .fp-primary{ font-size:16px; }
  .kyou-col .breakdown-row{ font-size:16px; gap:6px; }
  .kyou-col .breakdown-row .pair{ min-width:auto; }
  .kyou-col .kanshi-vs{ gap:4px; font-size:11px; }
  .kyou-col .fp-relations{ gap:8px; }
  .kyou-col .fp-rel-item{ font-size:11.5px; }

  .main-content{ padding: 78px 16px 100px; max-width:100%; }
}