/* =========================================================
 * Base / 全体
 * ========================================================= */

/* 全体レイアウト */
*,
*::before,
*::after {
  box-sizing: border-box; /* パディングを含めて幅計算し、はみ出しを防ぐ */
}

body {
  margin: 0; /* ページ全体の余白をリセット */
  padding: 0; /* デフォルトの内側余白をリセット */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif; /* どの環境でも読みやすいシステムフォント */
  background: #060612; /* 夜空をイメージした濃い背景色 */
  color: #f5f5f5; /* 全体の文字色を淡い白に統一 */
  user-select: none; /* テキスト選択を抑止（全ブラウザ対応） */
  -webkit-user-select: none; /* Safari/Chrome用 */
  -ms-user-select: none; /* IE/Edge用 */
}

/* ==============================
 * 画像の右クリック・ドラッグ・コピー防止
 * ============================== */
img {
  pointer-events: none; /* 画像のドラッグ・右クリック・選択を抑止 */
  -webkit-user-drag: none; /* Safari/Chrome用：ドラッグ抑止 */
}

/* 画像の保存・コピー防止のため、imgタグの右クリック・ドラッグ・選択を抑止 */
img {
  -webkit-touch-callout: none; /* iOS長押しメニュー抑止 */
}

/* ==============================
 * 画面全体の透かし（ウォーターマーク）
 * ============================== */

@media print, screen and (-webkit-min-device-pixel-ratio: 0) {
  body::after {
    content: "© 2025–2026 Aynu Star Culture プロジェクト";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 3vw;
    color: #fff;
    opacity: 0.08;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    user-select: none;
    display: block;
  }
}

body::after {
  display: none; /* 通常表示では透かしを非表示 */
}

/* =========================================================
 * Accessibility helpers
 * ========================================================= */

/* スクリーンリーダー向け（視覚的には非表示） */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* キーボード操作時のフォーカス可視化 */
:where(a, button, select, input, textarea):focus-visible {
  outline: 2px solid #66ccff;
  outline-offset: 2px;
}

/* =========================================================
 * Header / ヘッダー
 * ========================================================= */

.site-header {
  padding: 0.8rem 1.2rem; /* ヘッダー内の余白 */
  background: #111827; /* ヘッダーの背景色 */
  border-bottom: 1px solid #1f2933; /* 下部に薄い境界線 */
}

.site-header h1 {
  margin: 0; /* h1 の余白をリセット */
  font-size: 1.3rem; /* タイトルの文字サイズ */
}

.subtitle {
  margin: 0.2rem 0 0; /* タイトルとの隙間を調整 */
  font-size: 0.85rem; /* サブタイトルの文字サイズ */
  color: #cbd5f5; /* サブタイトルの文字色 */
}

.subtitle a {
  color: #8ae2ff; /* 暗背景でも目立つ明るめのシアン */
  font-weight: 600; /* 少し強調 */
  text-decoration: none; /* 下線はデフォルト非表示 */
}

.subtitle a:hover {
  text-decoration: underline; /* ホバーでリンクと分かりやすく */
}

/* ヘッダー内の補足ナビ（星図ビュー／ノートページ等） */
.utility-nav {
  margin-top: 0.35rem; /* ヘッダー下部のナビ間隔 */
  display: flex; /* 横並びに配置 */
  gap: 0.75rem; /* リンク間の余白 */
  font-size: 0.85rem; /* 少し小さめの文字 */
}

.utility-nav a {
  color: #e5e7eb; /* 明るめの文字色 */
  text-decoration: none; /* 下線を消す */
  padding: 0.1rem 0.35rem; /* クリックしやすい余白 */
  border-radius: 6px; /* 角丸 */
  border: 1px solid transparent; /* 枠線を初期透明に */
}

.utility-nav a:hover {
  border-color: #374151; /* ホバー時に薄く枠線 */
  background: #0b1221; /* 背景色で浮かせる */
}

/* 現在ページの強調（ARIA属性で判定） */
.utility-nav a[aria-current="page"] {
  border-color: #66ccff; /* 現在ページを強調 */
  background: #0b152b; /* 背景色を少し明るく */
}

/* =========================================================
 * Layout / 2カラム
 * ========================================================= */

/* 全体の2カラムレイアウト（左:操作、右:星図） */
.layout {
  display: flex; /* 横並びレイアウトにする */
  flex-wrap: wrap; /* 狭い幅では折り返しを許可 */
  max-width: 1600px; /* 1600px 幅で整える */
  margin: 0 auto; /* 中央寄せ */
  width: 100%; /* 余白を含めて横幅を占有 */
  padding: 0 0.75rem 1rem; /* 端の余白と下余白 */
}

/* =========================================================
 * Controls / 左サイドパネル
 * ========================================================= */

/* 左：コントロールパネル */
.controls {
  flex: 0 0 260px; /* 固定幅ベースのサイドパネル */
  max-width: 300px; /* 広がりすぎを防止 */
  padding: 1rem; /* 内側余白 */
  background: #111827; /* 背景色 */
  border-right: 1px solid #1f2933; /* 右側に仕切り線 */
  box-sizing: border-box; /* パディング込みでサイズ計算 */
}

.controls h2 {
  margin-top: 0; /* セクションタイトルの上余白を除去 */
  font-size: 1rem; /* h2 の文字サイズ */
}

/* 入力フィールド全体のレイアウト（ラベル＋UIを横並び、間隔調整） */
.field {
  margin-bottom: 0.8rem; /* フィールド同士の間隔 */
  display: flex; /* 横並びにする */
  align-items: center; /* 垂直方向中央揃え */
  gap: 0.5em; /* 子要素間の隙間 */
}

/* 特定フィールドだけ縦間隔をコンパクトに */
.field.field-compact {
  margin-bottom: 0.45rem;
}

/* 共通ラベル（※.field内では横並び用に別途指定あり） */
label {
  display: block; /* ラベルをブロック表示に */
  font-size: 0.85rem; /* ラベル文字サイズ */
  margin-bottom: 0.25rem; /* ラベルと入力の間隔 */
}

/* 投影法ラベルの折り返し防止・幅指定（UI崩れ防止） */
.field label[for="projection-select"] {
  min-width: 6em; /* ラベルの最小幅（折り返し防止） */
  white-space: nowrap; /* ラベル内のテキストを折り返さない */
}

/* 恒星等級ラベルの折り返し防止・幅指定 */
.field label[for="star-mag-limit"] {
  min-width: 6em;
  white-space: nowrap;
}

/* スライダーは横幅を取り、値表示を右寄せで固定幅に */
.field input[type="range"] {
  flex: 1;
  min-width: 120px;
}

.field output {
  min-width: 4.5em;
  text-align: left;
  font-size: 0.85rem;
  color: #cbd5f5;
}

/* プルダウン（市町村／投影法など） */
select {
  width: 100%; /* セレクトボックスを横いっぱいに */
  padding: 0.25rem 0.5rem; /* セレクト内の余白 */
  font-size: 0.9rem; /* 入力文字サイズ */
  border-radius: 4px; /* 角を少し丸める */
  border: 1px solid #4b5563; /* 枠線色 */
  background: #020617; /* 背景色 */
  color: #e5e7eb; /* 文字色 */
}

/* 選択中の地域情報（市町村／予報区／文化地域など） */
#region-info {
  font-size: 0.85rem; /* 情報テキストのサイズ */
  line-height: 1.4; /* 行間で読みやすく */
}

/* =========================================================
 * Status / Error message
 * ========================================================= */

.status-message {
  margin: 0.25rem 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
  font-size: 0.85rem;
  line-height: 1.45;
}

.status-message a {
  color: #8ae2ff;
}

/* =========================================================
 * List / 星文化一覧
 * ========================================================= */

/* アイヌ民族星文化リスト */
.aynu-list {
  list-style: none; /* 行頭マーカーを消す */
  padding-left: 0; /* 左インデントをなくす */
  margin: 0; /* 周囲の余白をゼロに */
  font-size: 0.85rem; /* リスト文字サイズ */
  max-height: 210px; /* 高さを制限 */
  overflow-y: auto; /* 内容が溢れたら縦スクロール */
}

/* アイヌ民族星文化リストの各項目 */
.aynu-list li {
  margin-bottom: 0.5rem; /* 項目間の下余白 */
  padding-bottom: 0.4rem; /* 下ボーダーとの距離 */
  border-bottom: 1px dashed #374151; /* 点線の区切り線 */
}

/* アイヌ民族星文化リストの名称（クリック可能） */
.aynu-name-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.1rem 0.2rem;
  margin: 0;
  font: inherit;
  font-weight: bold; /* 名称を強調 */
  color: #e5e7eb;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  border-radius: 6px;
}

.aynu-name-btn:hover {
  text-decoration: underline;
  background: #0b1221;
}

.aynu-name-btn:focus-visible {
  outline: 2px solid #ffeb3b;
  outline-offset: 2px;
  border-radius: 4px;
}

.aynu-list li.is-selected .aynu-name-btn {
  color: #ffeb3b;
}

/* アイヌ民族星文化リストのコード部分（将来用／表示する場合に使用） */
.aynu-list li .code {
  font-size: 0.75rem; /* コードを小さめに */
  color: #9ca3af; /* 淡めの文字色 */
}

/* アイヌ民族星文化リストの説明部分 */
.aynu-list li .desc {
  margin-top: 0.15rem; /* 説明とタイトルの間隔 */
  font-size: 0.8rem; /* 説明テキストのサイズ */
  color: #d1d5db; /* 説明文の文字色 */
}

/* =========================================================
 * Notes / 画面右側の注記
 * ========================================================= */

/* 備考表示用（星図の直下に表示する短い説明） */
.note {
  margin-top: 0.8rem; /* 備考の上余白 */
  font-size: 0.8rem; /* 備考の文字サイズ */
  color: #9ca3af; /* 備考の文字色 */
}

/* 注意事項表示用（利用規約／免責など強調文） */
.attention {
  margin-top: 0.8rem; /* 注意事項の上余白 */
  font-size: 0.8rem; /* 注意事項の文字サイズ */
  color: #ffcc66; /* 注意事項の色 */
}

/* =========================================================
 * Loading / ローディング
 * ========================================================= */

/* ローディングインジケーター（データ取得中などに表示） */
#loading-indicator {
  display: none; /* ロード中のみ表示 */
  margin-bottom: 0.75rem; /* 下余白で他要素と区切る */
  padding: 0.5rem 0.75rem; /* 内側余白で見やすく */
  background: #0b152b; /* 背景色（暗め） */
  border-left: 3px solid #66ccff; /* 左側にアクセントの線 */
  border-radius: 4px; /* 角を丸めて柔らかい印象に */
  color: #d9e6ff; /* 文字色（明るめの青白） */
  font-size: 0.9rem; /* 文字サイズ（やや大きめ） */
}

/* 問い合わせ先リンク（X/Twitter）を強調 */
a[href*="x.com/trapezium_orion"] {
  color: #66ccff; /* リンクの色 */
  font-weight: bold; /* リンクを強調 */
}

/* =========================================================
 * Map area / 右ペイン（星図）
 * ========================================================= */

/* 右：星図エリア（余ったスペースを占有） */
.map-area {
  flex: 1 1 0; /* 余ったスペースを占有 */
  min-width: 0; /* はみ出し防止の最小幅リセット */
  padding: 0.5rem; /* 内側余白 */
  box-sizing: border-box; /* パディング込みで計算 */
}

/* d3-celestial のコンテナ（星図の「枠」）
   - 高さを事前に確保し、描画要素の挿入前後で下の文章位置がズレるのを抑止
   - 内部の canvas は absolute で全面フィットさせ、レイアウト計算から外す
 */
#celestial-map {
  width: 100%; /* 横幅いっぱいに描画 */
  max-height: none; /* clampで制御するため上限は不要 */
  position: relative; /* 子要素(canvas)の絶対配置の基準にするためrelativeを指定 */
  overflow: hidden; /* はみ出し分でレイアウトが崩れないようにする */
}

/* d3-celestial が挿入する canvas を常にコンテナにフィットさせる */
#celestial-map canvas {
  position: absolute; /* 親(#celestial-map)内で上下左右にピッタリ重ねるためabsolute */
  inset: 0; /* top/right/bottom/left:0; と同じ。全体にフィットさせる */
  width: 100% !important;
  height: 100% !important;
  display: block;
  background-color: #000000; /* 星空表示用に真っ黒背景 */
}

/* d3-celestial の背景（ライブラリ側のクラスが付与される場合の保険） */
.celestial-map canvas {
  background-color: #000000; /* 星空表示用に真っ黒背景 */
}

/* =========================================================
 * Area map preview / エリアマップ（左ペイン）
 * ========================================================= */

/* 地図エリア用（市町村選択に応じて表示／非表示） */
.area-map-preview {
  position: relative;
  width: 250px; /* プレビューの表示幅 */
  height: auto; /* 高さは画像比率に追従 */
  border: 1px solid #aaa; /* 薄い枠線 */
  background: #fff; /* 背景色 */
  padding: 4px; /* 内側余白 */
  border-radius: 6px; /* 角丸 */
  opacity: 0.9; /* 少し透けさせる */
  z-index: 2000; /* 星図より前面に配置（将来重なった場合の保険） */
  display: none; /* 初期は非表示（JSで表示制御） */
  margin: 0 auto; /* 中央寄せ */
  overflow: hidden; /* はみ出し防止 */
}

/* 単一表示用の画像 */
.area-map-image {
  width: 100%;
  height: auto;
  display: block;
  /* 画像は親の枠内で100%表示。position指定なし（通常フロー） */
}

/* 複数エリア重ね合わせ表示用のコンテナ */
.area-map-stack {
  position: relative; /* 子(.area-stack-layer)の絶対配置の基準にするためrelativeを指定 */
  width: 100%;
  height: auto;
  display: none;
}

/* 重ね合わせ各レイヤー（CSSの比較暗合成で重ねる） */
.area-stack-layer {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: darken; /* 比較暗合成で重ねる */
  /* 1枚目は通常フロー、2枚目以降はabsoluteで重ねる（下記参照） */
}

/* 2枚目以降は同一座標に重ねる */
.area-map-stack .area-stack-layer:not(:first-child) {
  position: absolute; /* 2枚目以降の画像を親(.area-map-stack)の同じ位置に重ねるためabsolute */
  top: 0;
  left: 0;
}

/* 一番上のレイヤー（area0等） */
.area-stack-top {
  position: relative; /* z-indexを効かせて最上位レイヤーにするためrelative */
  z-index: 5;
}

/* =========================================================
 * Notes page / notes.html 用
 * ========================================================= */

.content-wrapper {
  max-width: 960px; /* 横幅を中央で制限 */
  margin: 0 auto; /* 中央寄せ */
  padding: 1.5rem; /* 全体の余白 */
  box-sizing: border-box; /* パディング込みで計算 */
  line-height: 1.8; /* 読みやすい行間 */
}

.content-card {
  background: #0b1221; /* 落ち着いた背景色 */
  border: 1px solid #1f2933; /* 薄い枠線 */
  border-radius: 12px; /* 少し丸みをつける */
  padding: 1.5rem; /* 内側余白 */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); /* 立体感 */
}

.content-card h2 {
  margin-top: 0; /* 上の余白を消す */
  margin-bottom: 0.8rem; /* タイトル下の余白 */
  font-size: 1.1rem; /* タイトルサイズ */
}

.content-card p {
  margin: 0 0 1rem; /* 段落間の余白 */
  font-size: 0.95rem; /* 読みやすい文字サイズ */
  color: #e5e7eb; /* 明るい文字色 */
}

.content-card p:last-child {
  margin-bottom: 0; /* 最後の段落は余白なし */
}

.back-link {
  display: inline-block; /* ボタン風にする */
  margin-top: 1rem; /* 上の余白 */
  padding: 0.5rem 0.9rem; /* 内側余白 */
  background: #0b152b; /* 背景色 */
  color: #8ae2ff; /* 文字色 */
  text-decoration: none; /* 下線を消す */
  border-radius: 8px; /* 角丸 */
  border: 1px solid #1f2933; /* 枠線 */
}

.back-link:hover {
  border-color: #66ccff; /* ホバー時に枠線を強調 */
}

/* =========================================================
 * Responsive / スマホ対応
 * ========================================================= */

@media (max-width: 768px) {
  /* スマホでは縦積みに変更 */
  .layout {
    flex-direction: column;
  }

  /* 左パネルを全面幅へ */
  .controls {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid #1f2933;
  }

  /* 星図コンテナはviewport高ベースに */
  #celestial-map {
    height: 60vh;
  }
}