/* WordPress埋め込み用：リセットは .trr-hb の中だけに限定（テーマ全体に影響させない）。
   標準版(index2.php)冒頭の * / html,body{overflow:hidden} 等のページ全体リセットは入れない。 */
.trr-hb, .trr-hb *, .trr-hb *::before, .trr-hb *::after { box-sizing: border-box; }
.trr-hb figure { margin: 0; padding: 0; }
.trr-hb figcaption { margin: 0; padding: 0; }
.trr-hb img { max-width: 100%; height: auto; }

        /* ===== スマホ用ハンバーガーメニュー（index2 専用。共有CSSは変更していません） ===== */
        /* PCではハンバーガー関連の要素は非表示 */
        .trr-hb-btn { display: none; }
        #trr-hb-overlay { display: none; }
        #trr-hb-close { display: none; }
        #trr-hb-controls:empty { display: none; }
        /* 空状態の案内文：PCでは「左の目次」版を出し、スマホ用（右上メニュー）版は隠す */
        .trr-hb .trr-empty-sp { display: none; }

        /* ===== 検索結果リストをカード風に整えて見やすくする（index2 専用：.trr-hb） =====
           共有JSが作る各結果（.trr-result-item の中にタイトルdivと抜粋div）を、
           CSSだけでカード化する（共有JS・index.phpは変更しない）。 */
        .trr-hb #trr-problemList .trr-search-results {
            padding: 2px 2px 28px;
        }
        .trr-hb #trr-problemList .trr-result-item {
            position: relative;
            background: #fff;
            border: 1px solid #e6e8eb;
            border-radius: 12px;
            padding: 14px 38px 14px 16px;
            margin-bottom: 12px;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
            transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease, border-color .15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .trr-hb #trr-problemList .trr-result-item:hover {
            border-color: #cfd8e3;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
        }
        .trr-hb #trr-problemList .trr-result-item:active {
            background: #f4f8fd;
            transform: translateY(1px);
        }
        /* 右端に「›」を出して、タップで開けることを示す */
        .trr-hb #trr-problemList .trr-result-item::after {
            content: '\203A';
            position: absolute;
            top: 50%;
            right: 14px;
            transform: translateY(-50%);
            color: #c0c6cf;
            font-size: 22px;
            line-height: 1;
        }
        /* タイトル行（カテゴリ — 第N問） */
        .trr-hb #trr-problemList .trr-result-item > div:first-child {
            font-size: 15px !important;
            font-weight: 700 !important;
            color: #1f2a37 !important;
            line-height: 1.45 !important;
            margin: 0 0 7px !important;
        }
        /* 抜粋（本文の一部） */
        .trr-hb #trr-problemList .trr-result-item > div:last-child {
            font-size: 14px !important;
            color: #6b7280 !important;
            line-height: 1.75 !important;
            margin: 0 !important;
        }
        /* 検索語のハイライト */
        .trr-hb #trr-problemList .trr-result-item .trr-search-mark {
            background: #ffe98a;
            border-radius: 3px;
            padding: 0 2px;
            color: #1f2a37;
        }

        /* ===== 画像サイズ（figure_M 等）を editor.html と同じ大きさで表示する =====
           共有CSSの「.trr-explanation figure { max-width:100% !important }」が
           !important のため figure_M などのサイズ指定に勝ってしまい、解説の画像が
           横幅いっぱいに拡大されていた。editor と同じ固定幅で効くように上書きする。
           スマホでははみ出さないよう min(Xpx, 100%)（＝画面幅を超えない）にする。 */
        .trr-hb .trr-problem-list .figure_SSSS { max-width: min(100px, 100%) !important; }
        .trr-hb .trr-problem-list .figure_SSS  { max-width: min(150px, 100%) !important; }
        .trr-hb .trr-problem-list .figure_SS   { max-width: min(240px, 100%) !important; }
        .trr-hb .trr-problem-list .figure_S    { max-width: min(370px, 100%) !important; }
        .trr-hb .trr-problem-list .figure_M    { max-width: min(600px, 100%) !important; }
        .trr-hb .trr-problem-list .figure_L    { max-width: min(800px, 100%) !important; }
        .trr-hb .trr-problem-list .figure_LL   { max-width: min(1100px, 100%) !important; }

        @media (max-width: 768px) {
            /* 本文（問題エリア）を常に全画面表示にする（メニュー/本文の切替に依存しない） */
            .trr-hb .trr-main-area {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                height: 100vh !important;
                transform: none !important;
            }
            /* サイドバー（メニュー）をドロワー化：通常は画面の外（左）に隠す */
            .trr-hb .trr-sidebar {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 86% !important;
                max-width: 340px !important;
                min-width: 0 !important;
                height: 100vh !important;
                transform: translateX(-100%) !important;
                transition: transform .28s cubic-bezier(.2, .9, .2, 1) !important;
                z-index: 16060 !important;
                overflow-y: auto;
            }
            /* ドロワーを開いた状態。影は開いているときだけ付ける
               （閉じているときは画面外にあり、影が画面左端にはみ出して見えてしまうため）。 */
            .trr-hb.trr-drawer-open .trr-sidebar {
                transform: translateX(0) !important;
                box-shadow: 2px 0 14px rgba(0, 0, 0, .3);
            }
            /* 背景オーバーレイ */
            .trr-hb #trr-hb-overlay {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, .45);
                opacity: 0;
                visibility: hidden;
                transition: opacity .28s, visibility .28s;
                z-index: 16050;
            }
            .trr-hb.trr-drawer-open #trr-hb-overlay {
                opacity: 1;
                visibility: visible;
            }
            /* ハンバーガーボタン：四角＋横線3本のアイコンを画面右上に固定表示 */
            .trr-hb .trr-hb-btn {
                display: flex !important;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                position: fixed;
                top: 10px;
                right: 10px;
                width: 46px;
                height: 46px;
                padding: 0;
                border: 1px solid #333;
                /* 「検索結果をクリア」ボタンと同じ角丸（共有CSSの #trr-clearSearchResults＝6px）に合わせる */
                border-radius: 6px;
                background: #fff;
                cursor: pointer;
                z-index: 16040;
            }
            /* 横線3本 */
            .trr-hb .trr-hb-btn span {
                display: block;
                width: 22px;
                height: 2.5px;
                border-radius: 2px;
                background: #333;
            }
            /* 空状態の案内文：スマホでは「右上メニュー」版を出し、「左の目次」版は隠す */
            .trr-hb .trr-empty-pc { display: none; }
            .trr-hb .trr-empty-sp { display: block; }
            /* 空状態のタイトル「サブカテゴリーを選択」はスマホでは隠す（PCでは表示） */
            .trr-hb #trr-title.trr-empty-title { display: none; }
            /* 案内文の中に入れる、☰ボタンと同じ見た目の小さなアイコン */
            .trr-hb .trr-hb-inline-icon {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2.5px;
                width: 1.35em;
                height: 1.35em;
                padding: 0;
                border: 1px solid #333;
                border-radius: 5px;
                background: #fff;
                vertical-align: middle;
                box-sizing: border-box;
            }
            .trr-hb .trr-hb-inline-icon span {
                display: block;
                width: 0.8em;
                height: 2px;
                border-radius: 2px;
                background: #333;
            }
            /* ドロワー内の閉じるボタン（×） */
            .trr-hb #trr-hb-close {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 8px;
                right: 8px;
                width: 40px;
                height: 40px;
                border: none;
                border-radius: 8px;
                background: #f1f1f1;
                color: #333;
                font-size: 26px;
                line-height: 1;
                cursor: pointer;
                z-index: 16070;
            }
            /* ハンバーガーモードでは「メニューに戻る」は不要なので隠す */
            .trr-hb #trr-back { display: none !important; }

            /* トップバーのコントロール（すべての問題を表示・赤シートON）をドロワー内にまとめる。
               下線はヘッダー側(.trr-sidebar-header)に元からあるので、ここでは付けない（線が2本になるのを防ぐ）。 */
            .trr-hb #trr-hb-controls {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 12px 12px 4px;
            }
            .trr-hb #trr-hb-controls:empty {
                display: none;
            }
            .trr-hb #trr-hb-controls #trr-reviewFilter,
            .trr-hb #trr-hb-controls #trr-toggle-sheet {
                width: 100% !important;
                min-width: 0 !important;
                max-width: none !important;
                margin: 0 !important;
                flex: 0 0 auto !important;
                height: 50px !important;
                min-height: 50px !important;
                box-sizing: border-box !important;
            }
            /* 「すべての問題を表示」セレクトは、検索結果表示中やカテゴリ未選択でも常に表示する。
               （共有JSが検索時に display:none にするのを上書き） */
            .trr-hb #trr-hb-controls #trr-reviewFilter {
                display: block !important;
            }
            /* ドロワーの区切り線（ヘッダー下線）の色を、セレクトボックスの枠と同じ #777 にそろえる */
            /* スマホでは「てるるん日記」のロゴ画像は隠し、その分の上の余白を詰める。 */
            .trr-hb .trr-sidebar-header {
                border-bottom-color: #777 !important;
                padding-top: 14px !important;
            }
            .trr-hb .trr-sidebar-logo {
                display: none !important;
            }
            /* タイトルは中央寄せ。横幅いっぱいだと右上の☰に接するので、左右に余白を入れて
               ☰の手前で折り返させ、中央寄せのまま☰から離す。 */
            .trr-hb .trr-sidebar-title {
                padding-left: 32px !important;
                padding-right: 32px !important;
            }
            /* トップバーは「☰ メニュー」だけの最小構成にするため、ツールバー開閉ボタンは隠す */
            .trr-hb #trr-closeTopbarBtn,
            .trr-hb #trr-openTopbarBtn {
                display: none !important;
            }
            /* 検索時に出るトップバー。1行目（検索結果に戻る/クリア）だけ右上の☰を避け、
               2行目（検索バー）は横幅いっぱいにする。
               transition:none は padding のアニメーションで一瞬ずれて見えるのを防ぐため。
               padding-top:10px は1行目を☰（top:10px）と同じ高さ位置にそろえるため。
               gap:0／下部padding:10px／border-radius:0 はスマホ表示の見た目調整。 */
            .trr-hb .trr-content-topbar:not(.trr-topbar-empty) {
                padding-top: 10px !important;
                padding-bottom: 10px !important;
                gap: 0 !important;
                border-radius: 0 !important;
                transition: none !important;
            }
            /* 1行目（ボタンの行）だけ、右上の☰（右から約56px）を避けて余白を空ける。
               2行目の検索バーは .trr-topbar-right 側なので影響を受けず全幅になる。 */
            .trr-hb .trr-content-topbar:not(.trr-topbar-empty) .trr-topbar-left {
                /* クリア↔☰ の間隔を、下（ボタン行↔検索バー）の余白8pxに合わせる（56px→53px）。
                   ボタン同士の間隔も共有CSSの10pxから8pxに合わせる。 */
                padding-right: 53px;
                gap: 8px;
            }
            /* gap:0 にしたことで消えた「ボタン行 ⇄ 検索バー」の隙間だけ、検索バーの上に余白で戻す。
               検索バーがあるときだけ効くので、検索結果一覧の余分な隙間は出ない。 */
            .trr-hb .trr-content-topbar .trr-find-bar {
                margin-top: 8px;
            }
            /* 検索バー：検索ワードを「1 / 1」の手前（約10px）まで伸ばして表示する。
               ・検索ワードは余白を埋めて伸ばす（長いときは末尾を…で省略）。
               ・「1 / 1」カウントは中身の幅だけにして、ワードのすぐ近くに置く。
               （検索ワード右端 ＋ margin-right 2px ＋ バーの gap 8px ＝ 約10px） */
            .trr-hb .trr-find-keyword {
                flex: 1 1 auto !important;
                width: auto !important;
                min-width: 0 !important;
                margin-right: 2px !important;
            }
            .trr-hb .trr-find-count {
                min-width: 0 !important;
                flex: 0 0 auto !important;
                white-space: nowrap !important;
            }
            /* 1行目のボタンの高さを☰（46px）と同じにし、2つが横並びで収まるようにする。
               幅が狭くても文字が折り返さないよう、文字サイズと余白を調整し中央寄せにする。
               ※ #trr-back（メニューに戻る）はハンバーガー版では非表示のままにするので含めない。 */
            .trr-hb #trr-backToSearch,
            .trr-hb #trr-clearSearchResults {
                height: 46px !important;
                min-height: 46px !important;
                min-width: 0 !important;
                white-space: nowrap;
                font-size: 14px !important;
                padding: 0 6px !important;
                line-height: 44px;
                text-align: center;
            }
            /* 中身が無いトップバー（操作はドロワーへ移動済み）は完全に畳んで消す。
               検索結果に戻る等が出るときだけ JS で表示を戻す。 */
            .trr-hb .trr-content-topbar.trr-topbar-empty {
                height: 0 !important;
                min-height: 0 !important;
                padding: 0 !important;
                border: none !important;
                box-shadow: none !important;
                overflow: hidden !important;
                transition: none !important;
            }

            /* 赤シート：画面下に固定した帯として表示し、高さ（＝上端の位置）を
               画面の10%〜90%の範囲にする。
               共有CSSの position:sticky は本文が短いと中途半端な位置に出るため、
               index2 では position:fixed・bottom:0 で常に画面下に固定する。
               高さの実際の可変は共有JSの limits()（10%〜90%）と連動。
               min-height は、JSが高さを未設定のときでも潰れない下限（10%）。 */
            .trr-hb .trr-red-sheet.trr-visible {
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100vw !important;
                min-height: 10vh !important;
                min-height: 10dvh !important;
                max-height: 90vh !important;
                max-height: 90dvh !important;
            }
        }