@charset "UTF-8";

/*
    🔴 Green 製の /moon 用 CSS（Blue に対応する原本は無い）。

    ここに書くのは「PC とモバイルの HTML を1枚に統合したことで生まれた面」の手当てだけ。
    移送物（Blue 由来の Calendar.css / Info.css / index.mobile/Main.css）は1バイトも触らない
    ＝目録のハッシュ突合を守るため。

    ⚠️ このファイルは media 属性なしで読み込む（全幅で効く）。
       幅ごとの出し分けは、このファイルの中の @media で書くこと。
*/

/* ---------------------------------------------------------------
   狭い幅：カレンダーを日付バーより手前に出す（Step3-21-3g）
   --------------------------------------------------------------- */
/*
    🔴 何が起きていたか
    `#date_wrap`（日付バー）と `#calendar_wrap`（カレンダー）は、Blue のモバイル CSS で
    どちらも `position: absolute; top: 40px; left: 50%; width: 200px` ＝<b>まったく同じ座標</b>。
    どちらも `z-index: auto` なので、<b>DOM で後に出てくる方が手前</b>になる。

    ・Blue のモバイル ＝ 同じ親（TD）の兄弟で `date_wrap` → `calendar_wrap` の順
                        ＝<b>カレンダーが後＝手前</b>。日付バーを覆い隠すので何も問題が無い。
    ・Green          ＝ 21-2b で <b>カレンダーを PC の情報パネル（#info_wrap）の中へ移した</b>ので、
                        `#calendar_wrap` は `#info_wrap` の子、`#date_wrap` は TD 直下。
                        DOM 順が <b>#info_wrap → #date_wrap</b> なので<b>日付バーが手前</b>になり、
                        カレンダーのヘッダ（2026年8月）を完全に隠し、
                        曜日の行（日月火水木金土）の上 6px を削っていた。

    🔑 <b>レイアウト統合が「Blue では一度も起こり得なかった重なり」を作る型の3件目</b>
       （1件目＝`onBaseMarkerMove` の二重定義／2件目＝パンくずの全幅帯）。
    ⚠️ <b>getBoundingClientRect では重なりが出ない</b>（矩形は隣り合っているだけ）。
       見つかったのは<b>ユーザーが画面を見たから</b>＝台帳 §9d の事例。

    📌 なぜ z-index: 1 で足りるか
       `#calendar_wrap` の祖先に<b>スタッキングコンテキストを作る要素が1つも無い</b>ことを実測済み
       （position:static か z-index:auto、transform / opacity / filter も無し）。
       だから同じ文脈の中で単純に 1 > auto(0) で勝てる。
    ⚠️ <b>PC 幅には効かせない</b>＝PC ではカレンダーは情報パネルの中に収まっており、
       重なりは起きない。無条件に付けると別の要素との前後関係を黙って変えてしまう。
*/
@media (max-width: 767.98px) {
    #calendar_wrap {
        z-index: 1;
    }
}

/* ---------------------------------------------------------------
   「時間ごとの月の方角」の見せ分け（Step3-21-3h）
   --------------------------------------------------------------- */
/*
    🔴 なぜ Green にしか無い規則が要るか
    この機能は <b>Blue では PC ビューにしか無い</b>。Green は狭い幅でも出す判断（ユーザー確定）を
    したが、規則を持つ `Calendar.css` / `Info.css` は <b>media="(min-width: 768px)" で読み込む</b>ので
    <b>狭い幅には1つも届かない</b>＝素の青いリンクが並ぶ状態だった。

    🎯 ここでの方針＝<b>狭い幅ではタグを出さず、ネイティブの select に寄せる</b>（ユーザー発案）。
       16px 角のタグは指では押せない（HIG 44pt / Material 48dp）。44px 角に拡げると
       器を 280px に広げるか縦に 220px 伸ばすかの二択になるが、select なら 1行で済み、
       <b>OS の大きな選択画面が開く</b>。
    📌 設計書 v0.7 の D-2（自作カレンダー → ネイティブ input[type=date]）と同じ判断の2件目。
*/
@media (max-width: 767.98px) {
    /* 🔴 PC 用のタグは出さない（狭い幅では規則が届かず素のリンクになるため） */
    #anytime_wrap > div {
        display: none;
    }

    /*
        見出し＝PC の Calendar.css と同じ配色を狭い幅にも与える（届かないので自前で書く）。
        ⚠️ <b>1行に収める</b>＝見出し（12px×9文字≒108px）＋ボタン（≒76px）で
           器の内寸（190px）に収まる寸法にしてある。太らせると2行に折り返す（実機で1度踏んだ）。
    */
    #anytime_wrap p {
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        text-align: left;
        margin: 10px 0 5px;
        padding: 4px 5px;
        background-color: coral;
        line-height: 28px;
        white-space: nowrap;
    }

    #anytime_hour_reset_button {
        font-size: 12px;
        float: right;
        display: block;
        background-color: crimson;
        color: #fff;
        border: 1px solid #fff;
        cursor: pointer;
        min-height: 28px;
        padding: 0 8px;
    }

    #anytime_hour_select {
        display: block;
        width: 100%;
        min-height: 44px;
        font-size: 16px; /* 🔴 16px 未満だと iOS Safari が選択時に画面を拡大する */
        padding: 0 8px;
        margin: 0 0 5px;
        border: 1px solid #999;
        background-color: #fff;
        color: #333;
    }
}

/* PC 幅ではドロップダウンを出さない（タグ側が本体） */
@media (min-width: 768px) {
    #anytime_hour_select {
        display: none;
    }
}

/* ---------------------------------------------------------------
   狭い幅：時刻ラベルのチップを PC と同じ配色にする（Step3-21-末・ユーザー依頼）
   --------------------------------------------------------------- */
/*
    🔴 何が見にくかったか
    狭い幅のラベル（月の出時刻／月の入時刻）は移送物が <b>両方とも #eee</b> を与えている。
    器の `#info_wrap` は #fff なので<b>白地に極薄グレー</b>となり、
    すぐ右に並ぶ時刻（22時00分）との境目がほとんど見えない。

    🎯 <b>色は発明していない＝PC の枠の色をそのまま持ってきた</b>
       （実測＝`#moon_rise_time_wrap` の背景 rgb(221,221,221)＝#ddd ／
              `#moon_set_time_wrap` の背景 rgb(204,204,204)＝#ccc）。
       PC は「枠に色・ラベルは透明・時刻は白い箱」で区別している。
       その理屈をチップに移しただけなので、<b>広い幅と狭い幅で同じ意味の色</b>になる。
    📌 `/`（日の出マップ）の狭い幅は <b>Blue 由来で既に色分け済み</b>
       （日の出＝#f6e82c ／ 日の入＝#2f318b）。<b>月のページだけ両方 #eee だった</b>＝
       これは Blue 側の抜けで、ここは `/` が持っている作法に揃える側の変更。

    🔴 なぜ id 3個で書くのか
    移送物の `#info_wrap #time_wrap div span` は <b>(id 2 + 要素 2)</b>。
    `#moon_rise_time_wrap span` だけでは <b>id 1 個で負ける</b>ので、
    PC 側の打ち消し（layoutmapmain/Main.css 末尾）と同じく <b>id 3 個</b>にして上回らせる。

    ⚠️ <b>PC 幅には効かせない</b>＝PC ではこの span を transparent に打ち消すのが Blue の見た目。
       無条件に書くと、せっかく 21-2b で直した「PC の混血」を自分で作り直すことになる。
    ⚠️ <b>Blue（モバイル）との意図的差分</b>＝台帳 <b>§2e（D-1）</b>に登録済み。
       （§2b は「配らない」物の区画・こちらは「<b>配るが中身を違えた</b>」物の区画で別。）
*/
@media (max-width: 767.98px) {
    #info_wrap #time_wrap #moon_rise_time_wrap span {
        background-color: #ddd;
    }

    #info_wrap #time_wrap #moon_set_time_wrap span {
        background-color: #ccc;
    }
}