/* ==========================================================================
   レスポンシブ対応

   ブレークポイントの考え方:
     - PC:      1025px 以上（2カラムレイアウト）
     - tablet:  768px 〜 1024px（レイアウト調整）
     - SP:      767px 以下（1カラム、タッチ最適化）

   なぜ min-width でなく max-width を使うか:
     このサイトは既存 PC デザインからリデザインするため、
     「PC が基準（デフォルト）→ 小さい画面で調整」という
     Desktop-first アプローチが適している。
   ========================================================================== */

/* ========================================
   タブレット（768px 〜 1024px）
   ======================================== */

@media (max-width: 1024px) {

    /* コンテンツエリアの余白を狭め、サイドバーも縮める */
    #contents {
        padding: 24px 16px;
        gap:     24px;
    }

    /* タブレットではサイドバーを少し狭くする */
    #sidebar {
        width: 260px;
    }

    #header {
        padding: 12px 16px;
    }

    /* フッターウィジェットを縦積みに */
    #footer-widget-box {
        flex-direction: column;
    }

    #footer-widget-left,
    #footer-widget-center,
    #footer-widget-center1,
    #footer-widget-center2,
    #footer-widget-right {
        min-width: unset;
    }

    .breadcrumb,
    #breadcrumb {
        padding: 8px 16px;
    }
}

/* ========================================
   スマートフォン（767px 以下）
   ======================================== */

@media (max-width: 767px) {

    /* --- 全体レイアウト --- */

    /* SP では縦積み（flex-direction: column）に変更し、サイドバーを下に移動 */
    #contents {
        flex-direction: column;
        padding:        16px 12px;
        gap:            24px;
    }

    #main-contents {
        width: 100%;
    }

    /* SP ではサイドバーを全幅で下に表示 */
    #sidebar {
        width: 100%;
    }

    /* --- ヘッダー --- */

    #header {
        padding: 10px 12px;
    }

    /* PC のグローバルナビを非表示（SP はハンバーガーメニューで代替） */
    #drawernav3 {
        display: none;
    }

    /* ヘッダー SNS を非表示（スペース節約） */
    .headsns {
        display: none;
    }

    /* --- ハンバーガーメニュー ---

       JIN の SP メニュー構造（#wrapper の直接子）:
         span.headsearch.jin-sp-design  ← SP ヘッダー検索フォーム
         input#navtoggle.jin-sp-design  ← チェックボックス（状態管理）
         label.sp-menu-open             ← ハンバーガー開くボタン
           span.cps-icon-bar × 3       ← 三本線の各バー
         label.sp-menu-close            ← 閉じる（×）ボタン
         div.sp-menu-box                ← メニューパネル
         div#scroll-content             ← ページ本体

       親テーマの CSS を dequeue したため、チェックボックスで
       メニューを制御するロジックが消えて .sp-menu-box が常時展開されていた。
       ここで再実装する。

       なぜ CSS-only で実装するか:
         JavaScript を追加せずとも、input[type=checkbox]:checked ~ .target
         セレクタで ON/OFF を切り替えられる。JIN がこの仕組みを前提に
         HTML を出力しているため、そのまま活用する。
       --- */

    /* SP ヘッダー検索: フッターに検索ウィジェットがあるため非表示 */
    span.headsearch.jin-sp-design {
        display: none;
    }

    /* チェックボックス: 非表示（状態管理のみに使用） */
    #navtoggle.jin-sp-design {
        position: absolute;
        opacity:  0;
        width:    0;
        height:   0;
    }

    /* 閉じるボタン: デフォルト非表示 */
    label.sp-menu-close {
        display: none;
    }

    /* 開くボタン（ハンバーガー）: ヘッダー右上に固定 */
    label.sp-menu-open {
        position:        fixed;
        top:             0;
        right:           0;
        width:           52px;
        height:          52px;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap:             5px;
        cursor:          pointer;
        z-index:         200; /* #header-box の z-index: 100 より上 */
    }

    /* 三本線バー */
    .cps-icon-bar {
        display:       block;
        width:         22px;
        height:        2px;
        background:    var(--color-text);
        border-radius: 2px;
        transition:    background var(--transition-base);
    }

    /* メニューパネル: デフォルト非表示、フルスクリーンで表示 */
    .sp-menu-box {
        display:          none;
        position:         fixed;
        top:              0;
        left:             0;
        right:            0;
        bottom:           0;
        background-color: var(--color-surface);
        z-index:          150;
        overflow-y:       auto;
        padding:          64px 0 calc(80px + env(safe-area-inset-bottom, 0));
    }

    /* チェック ON: メニューパネルを表示 */
    #navtoggle:checked ~ .sp-menu-box {
        display: block;
    }

    /* チェック ON: 閉じるボタンを表示 */
    #navtoggle:checked ~ label.sp-menu-close {
        display:         flex;
        align-items:     center;
        justify-content: center;
        position:        fixed;
        top:             0;
        right:           0;
        width:           52px;
        height:          52px;
        cursor:          pointer;
        z-index:         201;
        font-size:       22px;
        color:           var(--color-text);
        line-height:     1;
    }

    /* 閉じるアイコン（× を CSS で追加） */
    label.sp-menu-close::before {
        content: '✕';
    }

    /* チェック ON: 開くボタンを非表示 */
    #navtoggle:checked ~ label.sp-menu-open {
        display: none;
    }

    /* メニューパネル内: "MENU" タイトル */
    .sp-menu-title {
        padding:        24px 20px 12px;
        font-size:      0.7em;
        font-weight:    700;
        color:          var(--color-text-muted);
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* メニューパネル内: ナビリスト */
    .sp-menu-box nav.fixed-content ul {
        list-style: none;
        margin:     0;
        padding:    0;
    }

    .sp-menu-box nav.fixed-content ul li a {
        display:       block;
        padding:       16px 20px;
        color:         var(--color-text);
        font-size:     1em;
        border-bottom: 1px solid var(--color-border);
        transition:
            color            var(--transition-base),
            background-color var(--transition-base);
    }

    .sp-menu-box nav.fixed-content ul li a:hover {
        color:            var(--color-primary);
        background-color: rgba(88, 166, 255, 0.05);
        opacity:          1;
    }

    /* --- 記事一覧カード --- */

    /* basicstyle: サムネイルを小さく調整 */
    .post-list.basicstyle .post-list-thumb {
        width:      120px;
        min-height: 90px;
    }

    /* magazinestyle: 1カラムに変更 */
    .post-list.magazinestyle {
        grid-template-columns: 1fr;
    }

    .post-list.magazinestyle .post-list-inner {
        flex-direction: row; /* SP でも横並びに戻す */
    }

    .post-list.magazinestyle .post-list-thumb {
        width:      120px;
        height:     90px;
        min-height: unset;
    }

    /* magazine のカテゴリータグは元の absolute に戻す */
    .post-list.magazinestyle .post-list-cat {
        position: absolute;
        display:  block;
    }

    /* --- 記事詳細 --- */

    .cps-post-title,
    h1.post-title {
        font-size: clamp(20px, 5vw, 26px);
    }

    /* 表のスクロール対応（テーブルが画面幅を超えた場合にスクロール可能に） */
    .cps-post-main .table-container,
    .cps-post-main table {
        display:    block;
        overflow-x: auto;
        max-width:  100%;
    }

    /* 前後記事ナビを縦積みに */
    .prevnext-box,
    #prevnext,
    #prev-next {
        flex-direction: column;
    }

    /* 著者プロフィールカードを縦積みに */
    .author-box,
    .profile-card {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }

    /* --- サイドバー --- */

    /* SP ではサイドバーにトップマージンを追加 */
    #sidebar {
        margin-top: 32px;
    }

    /* --- スマホフッターナビ (#sp-footer-box) --- */

    #sp-footer-box {
        background-color: var(--color-surface);
        border-top:       1px solid var(--color-border);
        position:         fixed;
        bottom:           0;
        left:             0;
        right:            0;
        z-index:          50;
        /* スマホ底部のセーフエリア（iPhone のホームバー）に対応 */
        padding-bottom:   env(safe-area-inset-bottom, 0);
    }

    #sp-footer-box > ul,
    #sp-footer-box > div > ul {
        display:         flex;
        justify-content: space-around;
        padding:         8px 0;
        margin:          0;
        list-style:      none;
    }

    #sp-footer-box li {
        flex:       1;
        text-align: center;
    }

    #sp-footer-box a {
        color:          var(--color-text-muted);
        display:        flex;
        flex-direction: column;
        align-items:    center;
        font-size:      0.65em;
        padding:        6px 4px;
        gap:            3px;
        transition:     color var(--transition-base);
    }

    #sp-footer-box a:hover,
    #sp-footer-box a.current {
        color:   var(--color-primary);
        opacity: 1;
    }

    /* SP フッターナビがある分だけ各エリアの下に余白を追加 ---
       #sp-footer-box は position:fixed で画面下部に重なるため、
       その下に隠れるコンテンツが出ないよう余白を確保する。
       高さの内訳: ul padding 8px × 2 + アイコン+テキスト ~44px ≒ 60px + safe-area */
    #contents {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0) + 12px);
    }

    footer[role="contentinfo"] {
        margin-bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }

    #breadcrumb {
        padding-bottom: 4px;
    }

    /* --- スマホサイドメニュー (.sp-sidemenu-wrapper) --- */

    .sp-sidemenu-wrapper .sp-sidemenu-box {
        background-color: var(--color-surface);
        border-left:      1px solid var(--color-border);
    }

    .sp-sidemenu-box a {
        color:             var(--color-text);
        border-bottom:     1px solid var(--color-border);
        padding:           12px 16px;
        display:           block;
        font-size:         0.9em;
        transition:
            color            var(--transition-base),
            background-color var(--transition-base);
    }

    .sp-sidemenu-box a:hover {
        color:            var(--color-primary);
        background-color: rgba(88, 166, 255, 0.05);
        opacity:          1;
    }

    /* オーバーレイ背景 */
    .sp-sidemenu-bg {
        background-color: rgba(13, 17, 23, 0.8);
    }

    /* サイドメニュー内検索 */
    .sp-sidemenu-search {
        padding: 16px;
    }

    .sp-sidemenu-search input[type="text"],
    .sp-sidemenu-search input[type="search"] {
        background-color: var(--color-bg);
        border:           1px solid var(--color-border);
        color:            var(--color-text);
        padding:          8px 12px;
        width:            100%;
        font-family:      var(--font-base);
        border-radius:    var(--radius-tag);
        transition:       border-color var(--transition-base);
    }

    .sp-sidemenu-search input[type="text"]:focus,
    .sp-sidemenu-search input[type="search"]:focus {
        outline:      none;
        border-color: var(--color-primary);
    }

    /* トップへ戻るボタンを SP フッターナビの上に配置 */
    #page-top {
        bottom: calc(60px + env(safe-area-inset-bottom, 0) + 8px);
        right:  16px;
    }
}