/* 🆕 2026-05-15 ueckenさん: iPhone Safari/Chrome + Android で input focus 時の auto-zoom 防止
 * (= font-size < 16px だと iOS が 画面を 自動拡大 する仕様、 user-scalable=no でも 別挙動)
 * 全 page 共通 適用 (= zoom 完全 不可 と セット)
 */
@media (max-width: 768px) {
    input[type="text"], input[type="search"], input[type="number"],
    input[type="email"], input[type="tel"], input[type="url"],
    input[type="password"], textarea, select {
        font-size: 16px !important;
    }
}

/* ===== OP ヘッダー共通オーバーライド =====
 * components.js から全ページに自動読み込み (admin/pos 以外)
 * - h_member (マイページ) を必ず最右端に表示
 * - flex のはみ出しで隠れないよう shrink を制御
 * - 画面上部に常駐 (sticky) 全ページ共通
 *
 * NOTE: HP 専門店 (lbaph-hp) は黒テーマだが OP は OCNK 既定 (白系) を維持。
 *       色変更が必要な場合はこのファイルに追記する。
 */

/* === 全ページでヘッダー fixed (常時画面上部表示) ===
 * sticky だと OCNK の #container { overflow: hidden } 配下で動作が
 * 不安定になるため fixed で確実に viewport top に貼り付ける。
 */
#common-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000;
    background: #fff;
}
body { padding-top: 110px !important; }

/* 🆕 2026-05-26 ueckenさん報告「OP トップがスマホで崩れる」修正:
 * OCNK 既定で top_page_body の時だけ #header_wrapper{position:fixed} が効く
 * (= 旧テーマの固定ヘッダー)。 共通化で追加した上の #common-header{position:fixed}
 * と 二重固定 になり、 内側 #header_wrapper が flow から外れて 親 <header> が高さ0に潰れ、
 * ロゴ/告知/ナビが 最上部で重なっていた (= 商品ページ detail_page_body は非該当で正常)。
 * → 固定は #common-header に一本化し、 内側ヘッダーは 常に static に戻す (全ページ無害)。
 */
#common-header header,
#common-header #header_wrapper,
#common-header #header_wrapper.standard_header,
#common-header .standard_header {
    position: static !important;
}

/* === 共通: header_right の h_member 必ず可視化 === */
.header_right .inner_header_nav {
    flex-wrap: nowrap !important;
    overflow: visible !important;
}
.header_right .header_nav_item {
    flex-shrink: 0 !important;
}
.header_right .header_nav_item.h_member {
    display: flex !important;
    visibility: visible !important;
    order: 99; /* 必ず最右端 */
}

/* 狭い画面 (≤480px): 5 アイコン (X / YT / ハリポ店 / Cart / マイページ) すべて表示
 * 高い specificity + !important で OCNK 既定 padding を上書きし、
 * h_member が必ず viewport 内に収まるようにする。
 */
@media screen and (max-width: 768px) {
    #header_wrapper #inner_header .header_right .header_nav_item .nav_label {
        display: none !important;
    }
    #header_wrapper #inner_header .header_right .header_nav_item,
    #header_wrapper #inner_header .header_right .header_nav_item .nav_btn,
    #header_wrapper #inner_header .header_right .header_nav_item .nav_text,
    #header_wrapper #inner_header .header_right .header_nav_item .nav_text > i {
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }
    #header_wrapper #inner_header .header_right .header_nav_item .nav_btn {
        padding: 0 5px !important;
        min-width: 30px !important;
    }
    #header_wrapper #inner_header .header_right .menu_nav_icon,
    #header_wrapper #inner_header .header_right .nav_btn i.fa {
        font-size: 18px !important;
        line-height: 1 !important;
    }
    #header_wrapper #inner_header .header_right { flex-shrink: 0 !important; }
    #header_wrapper #inner_header .header_left {
        flex-shrink: 0 !important;
        min-width: 44px !important;
    }
    #header_wrapper #inner_header .header_center {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    #header_wrapper #inner_header .header_center .shoplogo,
    #header_wrapper #inner_header .header_center .shop_name_box,
    #header_wrapper #inner_header .header_center .compact_shop_name {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    #header_wrapper #inner_header .header_center .shoplogo img {
        max-height: 28px !important;
        max-width: 100% !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* ===== 🆕 2026-05-10 CLS 改善: layout shift 抑制 =====
 * 原因と対策:
 * 1. 共通 components (header / sidebar / footer-nav) は components.js で 非同期 fetch + 注入
 *    → 注入前後で layout が 動く ため、 placeholder に min-height を 事前確保
 * 2. 商品画像 (= /images/products/ 等) は width / height が 未指定で aspect ratio が
 *    決まらない → trading card は 5:7 (= 縦長) で 統一、 .item_image / .item_image_box に CSS 適用
 * 3. 商品一覧 grid (= .item_list) の 初期 empty 状態 → render() で 一気に 高さが伸びる
 *    → min-height で 1 行分 (= 約 250px) 事前確保
 * 4. /product/ 詳細 main_photo (= square_photo_slide_600) → aspect-ratio 1/1 で reservation
 */

/* ---- 共通 components placeholder (head 注入前の reservation) ---- */
#common-header { min-height: 110px; }
#common-sidebar { min-height: 600px; }
#common-footer-nav { min-height: 60px; }
/* 一部ページは <aside id="left_side_col"> に common-sidebar を内包 */
aside#left_side_col { min-height: 600px; }

/* ---- 商品画像 CLS 抑制 (= aspect-ratio 5/7 = トレカ縦長)
 * 🆕 2026-05-15 ueckenさん: aspect-ratio 強制 + overflow:hidden で 画像 下端 clip される問題
 *   修正: aspect-ratio を keep するが overflow:visible + object-fit:contain で letterbox (= 切れない)
 */
.portrait_item_image_box,
.item_image_box {
    aspect-ratio: 5/7;
    overflow: visible;   /* clip 防止 */
    display: block;
}
.portrait_item_image_box .item_image,
.item_image_box .item_image,
img.item_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* OCNK の square_photo_slide_600 は 元 1:1 reservation だが 5:7 card で clip 問題
 * → /product/ index.html 側 の inline style (= img max-height:70vh) で 自然 sizing するため
 *   親 box は overflow:visible で 画像 全表示 (= CLS は max-height:70vh で 一定 reservation) */
.square_photo_slide_600 .slider_image_box,
.square_photo_slide_600 .gallery_link {
    width: 100%;
    overflow: visible;   /* 5:7 card で 下端 clip 回避 */
    min-height: 0;       /* aspect-ratio 制約 解除 */
}
/* 親 (slider_image_box) には CLS 抑制 用 reservation を min-height で keep */
.square_photo_slide_600 .slider_image_box {
    min-height: 240px;
}

/* ---- 商品一覧 grid (= .item_list) reservation ----
 * 2026-05-10 修正: 旧 min-height: 1500px が flex_wrap items を stretch して
 *   各 cell が 369px に膨らみ 行間に大きな隙間が出る regression 発生。
 *   → 商品 image の aspect-ratio (= 5/7) で 既に reservation 済 のため 過剰な
 *     親 min-height は 撤回。 footer push-down は item 画像 reservation で 抑制可能。
 * 旧 fallback (= 商品 0 件時 320px 確保) は parent .itemlist_box で 維持。
 */
.itemlist_box .item_list,
.item_list.column3,
ul.tiled_list {
    min-height: 320px;  /* 0 件 placeholder のみ、 stretch を 起こさない 範囲 */
}

/* ---- カート popup img reservation (既に inline width/height あるが念のため) ---- */
.tcCartPopupImg {
    width: 80px;
    height: 112px;
    aspect-ratio: 80/112;
    object-fit: cover;
}

/* ---- index.html bottom search button img reservation ---- */
#ocnkBottomSearch button img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
#ocnkColorChips .chip img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* ---- バナー画像 (.banner_image > img) は inline width="1200" height="600" がある
 *      → max-width:100% + height:auto で responsive 維持しつつ aspect-ratio 維持 ---- */
.banner_image img,
.mk-bc-icon,
.mk-cell-icon,
.mk-hero-logotype,
.mk-cta-logo,
.mk-wide-bg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---- ポケット / バインダー の card img reservation (= 5:7) ---- */
.pk-card img,
.tcFloatBookmark img {
    width: 100%;
    aspect-ratio: 5/7;
    object-fit: cover;
    display: block;
}



/* 🆕 2026-05-16 ueckenさん: パンくず (= breadcrumb_area) を 全ページ 非表示 */
.breadcrumb_area { display: none !important; }