/**
 * カスタムCSS - サイト全体の微調整用
 *
 * このファイルは全てのテンプレートで読み込まれます。
 * レガシーサイトからWordPressへの移行に伴う調整や
 * サイト全体の微調整はここに記述してください。
 *
 * @package UenoClinic
 * @since 1.0.0
 */

/* ==========================================================================
   GlobalFooter位置修正
   ========================================================================== */

/* Contentsの後をクリア */
#Contents::after {
    content: "";
    display: table;
    clear: both;
}

/* box-bodyのfloatをクリア */
#Contents .box-body::after {
    content: "";
    display: table;
    clear: both;
}


/* GlobalFooterを確実に下に配置 */
#GlobalFooter {
    clear: both;
    position: relative;
    width: 100%;
    margin-top: 20px; /* 上部に余白を追加 */
}

/* hrタグも確実にクリア */
hr {
    clear: both;
    margin: 20px 0;
    border: none;
    border-top: 1px solid #ccc;
}

/* ==========================================================================
   リストマーカー調整
   ========================================================================== */

/* レガシーサイトと同様にリストマーカーを制御 */
#NearClinicGuide .list ul li {
    display: block; /* layout.cssの設定を確実に適用 */
}

/* ==========================================================================
   画像パス調整
   ========================================================================== */

/* 画像が見つからない場合のフォールバック */
img[src*="/common/img/"]:not([src*="<?php"]) {
    /* PHPタグを含まない古いパスの画像にボーダーを追加（デバッグ用） */
    /* border: 1px solid red; */ /* 本番では無効化 */
}

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

@media screen and (max-width: 1200px) {
    #GlobalFooter .box-body {
        width: 100%;
        max-width: 1180px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    #Contents .box-body {
        width: 100%;
        max-width: 1180px;
        /* padding: 0 20px; */
        box-sizing: border-box;
    }
}

/* ==========================================================================
   WordPress管理バー対応
   ========================================================================== */

/* 管理バーが表示されている場合の調整 */
body.admin-bar #CommonHeader {
    /* margin-top: 32px; */
}

@media screen and (max-width: 782px) {
    body.admin-bar #CommonHeader {
        /* margin-top: 46px; */
    }
}

/* ==========================================================================
   デバッグ用スタイル（本番では削除）
   ========================================================================== */

/* デバッグモードの時のみ有効 */
body.debug-mode #GlobalFooter {
    border-top: 5px solid red;
}

body.debug-mode #Contents {
    border: 2px dotted blue;
}

body.debug-mode .debug-highlight {
    background: yellow !important;
    border: 2px solid orange !important;
}

/* ==========================================================================
   その他の微調整
   ========================================================================== */

/* フォント調整 */
body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* リンクのホバー効果 */
a {
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

/* フォーム要素のスタイル統一 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    font-family: inherit;
    font-size: 100%;
}

/* 印刷時の調整 */
@media print {
    #CommonHeader,
    #GlobalHeader,
    #GlobalFooter,
    #SubArea {
        display: none !important;
    }

    #MainArea {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   今後の調整用エリア
   ========================================================================== */

/* ここに新しい調整を追加してください */