/*
 * 共通UI・文言確認で承認されたスタイル（2026-10-01 本番反映）
 *
 * 出典：css/preview-20260926.css（確認ページ専用・body.inoue-preview-20260926 配下）のうち、
 * 先生が確認ページで承認した共通UIのルールを、本番で同じ表示になるよう移植したもの。
 * 確認用の幕ID・サンプルブロック・--faint変数定義は移植していない。
 *
 * セレクタ先頭の「:root body」は、確認ページの「body.inoue-preview-20260926」と
 * 詳細度が同一（0,1,1）になるよう選んでいる（本番style.css上の既存ルールとの
 * 勝ち負けを確認ページと同じにするため）。body.class は付けない。
 *
 * 読み込み順は wp_head の最後（functions.php：優先度100）。確認ページでも
 * 本番CSS・記事紙面刷新CSSの後に読み込んでいたため、同じ順序を再現している。
 */

/* ==========================================
   先生FB12（2026-09-27）：サイト名は撤回。ヘッダーには表示しない。
   ナビは最終7項目（ホーム復活・お知らせは戻さない）。
   マークアップが本番の .menu-item / .nav-list とセレクタ互換のため、
   本番 style.css のナビ・ハンバーガー関連ルール（768px breakpoint含む）が
   確認ページにもそのまま適用される。

   ChatGPT R3差戻し §2（visual QA）で判明：R2までの「rows=1・navOverflow=0」
   という実測方法（各.nav-item aのgetBoundingClientRect().topの異なり数で
   判定）は、7項目全体が同じ行に留まったまま「各項目の文字列内部だけが
   2行に折り返す」ケースを検出できていなかった（getClientRects().length
   で確認しなおすと、769〜884px幅で7項目全てが内部2行折り返しになっていた。
   本番768px breakpointの外側で実際に起きているレイアウト崩れ）。
   独自の新デザインを作らず、本番の768px以下ハンバーガーメニュー用ルール
   一式（.hamburger / .nav-menu / .nav-list flex-direction / .nav-item a
   font-size / .header 背景・padding / main padding-top）を、確認ページ内
   でのみ769〜899px帯へ複製・拡張する（本番style.css自体は変更しない）。
   ========================================== */
@media screen and (min-width: 769px) and (max-width: 899px) {
    :root body .hamburger {
        display: flex;
        background-color: var(--main-color);
        width: 62px;
        height: 62px;
        padding: 18px;
        gap: 5px;
    }

    :root body .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(49, 56, 100, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1000;
    }

    :root body .nav-menu.is-active {
        opacity: 1;
        visibility: visible;
    }

    :root body .nav-list,
    :root body .header .menu {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    :root body .nav-item a,
    :root body .menu-item a {
        font-size: 2.0rem;
        text-shadow: none;
    }

    :root body .header {
        background-color: transparent;
        padding: 0;
    }

    :root body main {
        padding-top: 62px;
    }

    /* main のpadding-topを62pxへ合わせたため、同じ62px前提で組まれている
       各ページ固有のヒーロー／見出しセクションも本番768px tierの値へ揃える。
       揃えないと、FB13で調査した「header高さとmain padding-topの不一致」と
       同種のズレをこの帯だけ新たに作ってしまう。 */
    :root body .hero {
        height: 100vh;
        margin-top: -62px;
        padding-top: 62px;
    }

    :root body .team-hero {
        height: 400px;
        margin-top: -62px;
        padding-top: 62px;
    }

    :root body .aneurysm-hero {
        height: 400px;
        margin-top: -62px;
        padding-top: 62px;
    }

    :root body .page-header {
        padding: 80px 20px 40px;
        margin-top: -62px;
        padding-top: 102px;
    }

    /* §7 tap targetを、拡張したハンバーガー帯（769〜899px）にも適用する */
    :root body .nav-menu .nav-list a,
    :root body .nav-menu .menu-item a {
        display: inline-block;
        padding: 10px 0;
    }
}

/* ==========================================
   UNIT-A: カテゴリ一覧冒頭の説明文
   既存の本文・リード文タイポグラフィ（.aneurysm-intro 等）をそのまま流用し、
   新しい装飾は追加しない。
   ========================================== */
:root body .category-archive-intro {
    text-align: left;
    font-size: 1.8rem;
    line-height: 2;
    max-width: 750px;
    margin: 0 auto 40px;
}

@media screen and (max-width: 480px) {
    :root body .category-archive-intro {
        font-size: 1.4rem;
    }
}

/* 先生FB14（2026-09-27）：team-faqセクションはFAQ0件時、PHP側で節ごと
   出力しない方式へ変更したため、前回のUNIT-E1 is-faq-empty CSS（padding調整）
   は不要になり削除した。詳細はpage-preview-team-20260926.php側のコメント参照。

   ChatGPT差戻し §3：team-faqにはそもそも写真が無く（background-color:var(--gray)
   のみ）、「写真内CTA」に該当するのは末尾の.team-contactセクション
   （background-image:contact-bg.jpg、白文字＋text-shadowで対応、CTA=
   .btn-outline-white「ご相談はこちら」）。45750ce→a651c7eの差分でも
   .team-contactは一度も変更されておらず、FAQ非表示化と無関係に既存のまま残存
   している（本文§FB14参照）。今回は先生指定の「写真に薄いdark overlay」だけを
   .team-contactの背景写真に追加する。CTAの文言・URL・typography・button style
   は無変更。 */
:root body .team-contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), url('../images/contact-bg.jpg');
}

/* ==========================================
   先生FB16（2026-09-27）：SP主要本文のフォントサイズ監査・是正
   本番実測（375/390、いずれも同値）は本文§FB16の一覧表のとおり。
   「本文」として読む段落のみ 16.5px（1.65rem）へ引き上げる。対象は
   13〜14px だった実際の説明文・紹介文・回答文のみで、日付・caption・
   eyebrow・label・meta・注記（.doctor-v2-cert / .doctor-v2-role /
   .faq-question-text / .series-card-text / .news-text /
   .team-hero-subtitle / .facility-main-name 等）は対象外。
   ========================================== */
@media screen and (max-width: 480px) {
    /* TOP: 本文段落 */
    :root body .message-text p,
    :root body .hero-text,
    :root body .aneurysm-intro,
    :root body .other-surgery-intro,
    :root body .flow-intro,
    :root body .partners-intro,
    :root body .treatment-method-text p,
    :root body .treatment-note p,
    :root body .surgery-card-text,
    :root body .flow-item-text p,
    :root body .faq-answer-text p,
    :root body .doctor-v2-lead,
    :root body .doctor-v2-personal p {
        font-size: 1.65rem;
    }

    /* aneurysm: 主要説明文 */
    :root body .surgery-choice-intro,
    :root body .surgery-choice-card p {
        font-size: 1.65rem;
    }

    /* team: 施設・チーム説明文 */
    :root body .facility-main-text p,
    :root body .doctor-profile-text,
    :root body .medical-team-intro,
    :root body .team-contact-text {
        font-size: 1.65rem;
    }
}

/* ==========================================
   ChatGPT差戻し §6（2026-09-27）：responsive残件は「以前からあるissue」として
   除外しない、との指示のため、実測で原因を特定し確認ページのみ修正する。

   [TOP] .aneurysm-cta（.btn-secondary×2、各min-width:400px、gap:50px）が、
   本番768pxモバイル breakpointより上、769〜849pxの帯だけで横溢れする
   （実測：850pxでdocOverflow=0、840pxで5px、830pxで10px、769pxで41px）。
   ナビとは無関係（同帯でnav rows=1・navOverflow=0を実測済み）。

   [team] 2系統の別バグ:
   (1) .facility-sub-list（3列grid。各列は.btn-outline-grayのmin-width:400pxで
       420px未満に縮まない）が、769〜1379px帯で横溢れする
       （実測：1400pxでdocOverflow=0、1379pxで1px、1024pxで356px、769pxで611px）。
   (2) .facility-main（画像60%+情報70%・margin-left:-20%の重なりデザイン）の
       .facility-main-infoが、959px以下で右へ溢れる
       （実測：1024pxで溢れなし、1010pxで約2px、900pxで28px）。
   いずれも本番style.cssには769〜1379px帯用の中間breakpointが存在しないための
   ギャップで、独自の新レイアウトを作らず、既存の768px以下モバイル向け
   スタック処理と同じ扱いをこの帯へ拡張するだけに留める（最小修正）。
   本番 style.css / page-team.php / front-page.php は変更していない。
   ========================================== */
@media screen and (min-width: 769px) and (max-width: 849px) {
    :root body .aneurysm-cta {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
    :root body .facility-sub-list {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    :root body .facility-main {
        flex-direction: column;
    }

    :root body .facility-main-image {
        width: 100%;
    }

    :root body .facility-main-info {
        width: 100%;
        margin-left: 0;
        margin-top: -30px;
        padding: 30px 20px;
    }
}

/* ==========================================
   ChatGPT差戻し §7（2026-09-27）：mobile nav各linkのtap targetが44px未満
   （実測：幅390pxで.nav-item a / .menu-item aの実高さ26px、
   ハンバーガー自体は58×58pxで問題なし）。文言・フォントサイズは変更せず、
   縦paddingだけを追加して44px以上を確保する（26px + 10px×2 = 46px）。
   ========================================== */
@media screen and (max-width: 768px) {
    :root body .nav-menu .nav-list a,
    :root body .nav-menu .menu-item a {
        display: inline-block;
        padding: 10px 0;
    }
}

/* ==========================================
   先生確認後 最終残件 §2（2026-09-28、ChatGPT監修差戻しで修正）：横向きスマホで
   mobile menuを開くと、.nav-menuがdisplay:flex; align-items:center;
   justify-content:centerのままoverflow指定が無いため、.nav-listの高さ
   （実測572px）がlandscapeのviewport高（実測360〜390px）を超え、「ホーム」
   （画面上91〜106px外）・「お問い合わせ」（画面下466〜481px外）が操作不能に
   なる（TOP確認ページで844×390・740×360・667×375の3landscape幅で
   実測・再現確認済み）。先生ご指定のとおり overflow-y:auto と
   align-items:flex-start を追加する。

   【監修差戻し対応】前回はmedia query外（常時適用）で実装していたため、
   900px以上のデスクトップnavにもpadding等が当たっていた。mobile／拡張
   hamburger帯（.nav-menuがposition:fixedの全画面オーバーレイになる幅）
   だけに限定するため、max-width:899pxのmedia query内へ移す。
   本番768px以下tier・確認ページ拡張769〜899px帯のいずれも899px以下のため、
   このmedia query内に置けば両方を上書きできる。900px以上では.nav-menuは
   このルールの対象外となり、computed layoutは変化しない。
   ========================================== */
@media screen and (max-width: 899px) {
    :root body .nav-menu {
        overflow-y: auto;
        align-items: flex-start;
        padding: 90px 20px 40px;
        box-sizing: border-box;
    }
}

/* ==========================================
   先生確認後 最終残件 §3（2026-09-28）：/aneurysm/ TOCの「手術が難しいと
   言われた方へ」ボタンが770〜820px帯で単語単位にバラバラ分断される件。
   原因はword-breakではなく、マークアップ（テキスト＋<strong>混在）を
   .aneurysm-toc-btn（display:flex）が複数の匿名flex itemへ分裂させ、
   それぞれが個別に折り返すこと（実測：820pxでボタン高さ90px→126pxへ
   急増、800×600pxスクリーンショットで文言の分断を直接確認済み）。
   文字列ハードコードではなく、display:blockへ変更しflex itemへの分裂を
   解消する（単一テキストフローに戻す）。padding（25px 40px）は左右対称の
   ためtext-align:centerのみで元の見た目とほぼ同じ垂直中央寄せが保たれる。
   ========================================== */
:root body .aneurysm-toc-btn {
    display: block;
    text-align: center;
    /* 2026-09-30 最終プレビュー提出前の追加：770〜820px帯で「手術が難しいと言われた方／へ」と
       末尾1文字（「へ」）だけが2行目に孤立していたため、行の長さを均等化する
       （text-wrap:balance未対応ブラウザでは従来どおり＝無害）。このボタンのみが対象。 */
    text-wrap: balance;
}

/* ==========================================
   先生確認後 最終残件 §4（2026-09-28）：TOP「お知らせ」見出しが320〜360px幅で
   最後の「せ」が欠ける件。style.css:1698（≤768px tier）の
   .news-title{white-space:nowrap}がそのまま残り、320〜360px幅では
   コンテナ幅が足りず見切れる（480px tierでもfont-sizeのみ再指定され
   nowrapは上書きされていないことを確認済み）。nowrapを解除する。
   あわせて、「ホームページ公開のお知らせ」等の一覧リンク（front-page.php:96
   .news-text a）にpadding指定が無くタップ高が約20px相当だったため、
   タップ域を確保する。

   【監修差戻し対応】当初はpadding:8px 0（line-height由来の実高+16px）で
   対応していたが、480px tierでは.news-textのfont-sizeが1.4rem(14px)・
   line-height継承1.8のため実測41.2px相当までしか届かない可能性があった。
   font-size/line-heightの計算に依存しない確実な保証として、
   min-height:44px + box-sizing:border-box + display:inline-flex;
   align-items:centerへ変更し、320/360pxを含め常に44px以上を保証する。
   ========================================== */
@media screen and (max-width: 768px) {
    :root body .news-title {
        white-space: normal;
        /* 2026-09-30 最終プレビュー提出前の追加：ベースの width:30% がモバイルにも残り、
           320/360px では見出しが約84〜96pxの枠に押し込まれて「お知ら／せ」と2行に
           折り返していた。モバイル（縦積みレイアウト）では幅を内容に合わせる。 */
        width: auto;
    }

    :root body .news-text a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
        padding: 4px 0;
    }
}

/* ==========================================
   先生確認後 最終残件 §1（2026-09-28）：/aneurysm/ SP本文サイズの是正。
   既存承認済みFB16の「本文16.5px」ロールへ、これまで対象外だった残り全ての
   本文セレクタ（実測390pxで14px）を追加する。表は新しいサイズ体系を発明せず、
   デスクトップ既存値を再利用：th/td=16px、th-main=16px、th-sub=14px。
   surgery-notes（12px）も本文相当として14pxへ。カード見出し（15px、
   diagnosed-card-title等）は今回維持し変更しない。
   ========================================== */
/* 2026-09-30 先生依頼10の追加是正（ChatGPT差戻し）：上記の本文・表のサイズ体系（480px以下で採用・QA済みの値）を、
   テーマのモバイル境界である768px（横向きスマホ相当を含む）まで延長した。新しい値は追加していない。
   li 4群（symptoms-notice-list／diagnosed-card-content／surgery-choice-card／difficult-content-list）も
   本文pと同じ16.5pxとして同ブロックに含める。769px以上は既存のまま。
   hero subtitle／TOCボタン／CTAボタン／copyright／カード見出しなど別ロールは変更しない。 */
@media screen and (max-width: 768px) {
    :root body .about-aneurysm-text p,
    :root body .about-aneurysm-detail-text,
    :root body .symptoms-item-text,
    :root body .symptoms-notice-text,
    :root body .symptoms-notice-list li,
    :root body .diagnosed-card-content li,
    :root body .surgery-choice-card li,
    :root body .difficult-content-list li,
    :root body .diagnosed-intro,
    :root body .diagnosed-card-content p,
    :root body .surgery-methods-intro,
    :root body .difficult-intro,
    :root body .difficult-content-text,
    :root body .consultation-flow-intro,
    :root body .flow-step-text p,
    :root body .about-aneurysm-related-label,
    :root body .about-aneurysm-related-link {
        font-size: 1.65rem;
    }

    :root body .surgery-table th,
    :root body .surgery-table td {
        font-size: 1.6rem;
    }

    /* ChatGPT監修差戻し（targeted deploy後のlive QA、2026-09-28）：
       390px実測で.th-main=12px/.th-sub=10pxのまま是正されていなかった。
       原因は本番style.cssが.surgery-table thead th .th-main /
       .surgery-table thead th .th-sub という高詳細度セレクタ
       （specificity (0,2,2)）で指定しており、確認ページ側の汎用
       :root body .th-main（(0,2,1)）がこれに負けていたため。
       本番と同じ祖先チェーンを含めることで詳細度を(0,3,3)へ引き上げ、
       確実に上書きする。汎用な.th-main/.th-subへの広い上書きは廃止した。 */
    :root body .surgery-table thead th .th-main {
        font-size: 1.6rem;
    }

    :root body .surgery-table thead th .th-sub {
        font-size: 1.4rem;
    }

    :root body .surgery-notes p {
        font-size: 1.4rem;
    }
}

/* ==========================================
   先生確認後 最終残件 §6（2026-09-28）：固定ページ（page.php通常分岐）の左右余白。
   確認ページで承認されたのはプライバシーポリシー（page ID 3）。他の固定ページ5本（520〜523・1909）は
   style.css の 11-A で対応済み。.page-content / .page-inner を使う他ページへ広げない。
   ========================================== */
@media screen and (max-width: 768px) {
    body.page-id-3 .page-content {
        padding: 30px 0;
    }

    body.page-id-3 .page-inner {
        padding: 30px 18px;
    }
}

/* ==========================================
   先生確認後 最終残件 §7・§12（2026-09-28）：カテゴリ一覧（「患者さんへ」ほか）の
   スマホ余白と日付色。外側16px・カード内側20px、日付は端末のdark設定に関わらず #687080 固定。
   確認ページで承認されたのは category.php の表示。ブログ一覧（archive.php）・お知らせ一覧は対象外。
   ========================================== */
@media screen and (max-width: 768px) {
    body.category .archive-content {
        padding: 40px 16px;
    }

    body.category .post-item {
        padding: 20px;
    }
}

body.category .archive-inner .post-item-date {
    color: #687080;
}