/*
 Theme Name:   Photo Database
 Template:     swell
 Description:  A refined child theme for the Photo Database System, with high CSS specificity to prevent SWELL interference.
 Author:       Akira Takise
 Version:      1.0.0
*/

/* ==========================================================================
   Photo Database System - Final Stable Ver
   ========================================================================== */

/* ===============================
    CSS変数（:root）
   =============================== */
:root {
    /* 必要に応じてカスタムプロパティをここに追加 */
}

/* 位置合わせ中はメインコンテンツを隠す */
html.is-restoring-scroll #photo-db-app {
    opacity: 0 !important;
}

/* 位置合わせ完了でフワッと表示 */
html.is-restoring-scroll.is-ready #photo-db-app {
    opacity: 1 !important;
    transition: opacity 0.3s ease-out !important;
}

/* 位置合わせ中のみ表示されるロードアニメーション（くるくる） */
html.is-restoring-scroll:not(.is-ready)::before {
    content: "" !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin: -20px 0 0 -20px !important;
    border: 4px solid rgba(0, 0, 0, 0.1) !important;
    border-left-color: #555 !important;
    border-radius: 50% !important;
    animation: db-spin 1s linear infinite !important;
    z-index: 9999 !important;
}

@keyframes db-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===============================
    基本設定
   =============================== */
body.photo-db-immersive {
    background-color: #000 !important;
    color: #fff !important;
    margin: 0;
}

#photo-db-app {
    background-color: #000 !important;
    min-height: 100vh !important;
    font-family: "Inter", sans-serif !important;
}

/* ===============================
    ヘッダー
   =============================== */
#photo-db-app .db-sticky-bar {
    background: rgba(10, 10, 10, 0.9) !important;
    padding: 18px 25px !important;
    border-bottom: 1px solid #222 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    backdrop-filter: blur(15px) !important;
}

#photo-db-app .db-sticky-bar.is-scrolled {
    padding: 10px 25px !important;
}

#photo-db-app .db-header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1400px;
    margin: 0 auto;
}

#photo-db-app .db-logo-group {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#photo-db-app .db-sticky-logo {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-decoration: none !important;
    letter-spacing: 0.1em !important;
}

#photo-db-app .db-result-count {
    font-size: 0.7rem !important;
    color: #555 !important;
    font-family: "JetBrains Mono", monospace !important;
}

#photo-db-app .header-right-actions,
#photo-db-app .db-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#photo-db-app .db-sort-controls {
    display: inline-flex !important;
    background: #111 !important;
    padding: 2px !important;
    border-radius: 4px !important;
    border: 1px solid #222 !important;
}

#photo-db-app .btn-sort-toggle {
    font-size: 0.65rem !important;
    color: #555 !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

#photo-db-app .btn-sort-toggle.is-active {
    background: #222 !important;
    color: #fff !important;
}

#photo-db-app .pc-search-btn {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    padding: 8px 20px !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#photo-db-app .badge-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    color: #ccc !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    transition: 0.2s !important;
}

#photo-db-app .badge-tag:hover {
    background: #222 !important;
    color: #fff !important;
    border-color: #555 !important;
}

#photo-db-app .db-header-back {
    font-size: 0.75rem !important;
}

/* ===============================
    検索モーダル／フィルタ・バッジ・ピル
   =============================== */
#photo-db-app .db-active-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 15px !important;
    align-items: center !important; /* 縦方向の中央揃え */
}

#photo-db-app .db-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    font-size: 0.65rem !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}

#photo-db-app .db-filter-pill .db-pill-label {
    color: #666 !important;
    margin-right: 6px !important;
    font-weight: 800 !important;
}

#photo-db-app .db-clear-all {
    font-size: 0.65rem !important;
    color: #666 !important;
    margin-left: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ===============================
    メインコンテンツ（グリッドレイアウト等）
   =============================== */
#photo-db-app .db-photo-grid {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 4px !important;
}

/* ----- Empty State（検索0件時） ----- */
#photo-db-app .db-empty-state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60vh !important;
    padding: 80px 24px !important;
    background: radial-gradient(ellipse 120% 100% at 50% 50%, #1a1a1a 0%, #111 35%, #0a0a0a 65%, #050505 100%) !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    #photo-db-app .db-empty-state {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

#photo-db-app .db-empty-state__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 500px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

#photo-db-app .db-empty-state__icon {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 28px !important;
    color: #fff !important;
    opacity: 0.6 !important;
    line-height: 0 !important;
}

#photo-db-app .db-empty-state__icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    stroke-width: 1.2 !important;
}

#photo-db-app .db-empty-state__heading {
    font-size: clamp(0.9375rem, 2.5vw + 0.5rem, 1.05rem) !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin: 0 0 26px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.05em !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

#photo-db-app .db-empty-state__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 10px !important;
    margin: 24px 0 32px !important;
    max-width: 100% !important;
}

#photo-db-app .db-empty-state__chips:empty {
    display: none !important;
}

#photo-db-app .db-empty-state__text {
    font-size: clamp(0.8125rem, 1.5vw + 0.5rem, 0.9rem) !important;
    color: #a0a0a0 !important;
    margin: 0 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.06em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

#photo-db-app .db-grid-item {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    scroll-margin-top: initial !important;
}

#photo-db-app .db-item-card-link {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    position: relative !important;
}

#photo-db-app .db-thumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s ease !important;
}

#photo-db-app .db-item-overlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 40%, transparent 70%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 15px !important;
    transition: opacity 0.3s ease !important;
}

#photo-db-app .db-meta-date {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.5) !important;
    margin-bottom: 2px !important;
    display: block !important;
}

#photo-db-app .db-meta-subject {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 8px !important;
    line-height: 1.1 !important;
}

#photo-db-app .db-pill-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

#photo-db-app .db-pill {
    font-size: 9px !important;
    padding: 2px 7px !important;
    border-radius: 2px !important;
    background: rgba(255,255,255,0.1) !important;
    color: #ccc !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

/* ===============================
    5. 個別ページ（single-photo.php 用）
    2カラムグリッド・縦線装飾・レスポンシブ
   =============================== */
/* タクティカル・ナビ：コンテンツ末尾（EXIF等の直後）、フッター直前 */
#photo-db-app .photo-nav {
    margin-top: 50px !important;
    border-top: 1px solid #333 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* 上段：検索条件チップ（左寄せ） */
#photo-db-app .photo-nav-context {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#photo-db-app .photo-nav-context .db-context-label {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #666 !important;
    margin-right: 4px !important;
}

#photo-db-app .photo-nav-context .db-context-fallback {
    font-size: 0.8rem !important;
    color: #666 !important;
    font-weight: 600 !important;
}

/* ナビエリアのSVGアイコン（絵文字の代わり・計器感統一） */
#photo-db-app .nav-icon {
    width: 1.1em !important;
    height: 1.1em !important;
    vertical-align: -0.2em !important;
    margin-right: 6px !important;
    color: #888 !important;
}

/* ナビエリアのセクション見出し（GEAR INFO と同じスタイル） */
#photo-db-app .photo-nav .spec-block-label {
    margin-top: 24px !important;
}

/* 下段：案B ボックス型（GEAR INFO と同じ箱の質感のみ） */
#photo-db-app .photo-nav-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-top: 10px !important;
}

#photo-db-app .photo-nav-buttons .photo-nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 48% !important;
    padding: 20px 22px !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #0c0c0c !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#photo-db-app .photo-nav-buttons a.photo-nav-btn:hover {
    border-color: #2a2a2a !important;
    background: #111 !important;
}

/* 無効状態：案Bの上から適用 */
#photo-db-app .photo-nav-buttons .photo-nav-btn.disabled {
    opacity: 0.3 !important;
    border: 1px dashed #444 !important;
    cursor: default !important;
    pointer-events: none !important;
    background: transparent !important;
}

#photo-db-app .photo-nav-buttons .nav-inner {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 24px !important;
}

#photo-db-app .photo-nav-buttons .nav-arrow {
    flex-shrink: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    color: #e67e22 !important;
    font-family: "JetBrains Mono", monospace !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
}

#photo-db-app .photo-nav-buttons .nav-data {
    font-family: "JetBrains Mono", monospace !important;
    text-align: left !important;
    align-items: flex-start !important;
}

#photo-db-app .photo-nav-buttons .nav-date-full,
#photo-db-app .photo-nav-buttons .nav-date-short {
    font-size: 0.9rem !important;
    color: #fff !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    font-family: "JetBrains Mono", monospace !important;
}

#photo-db-app .photo-nav-buttons .nav-time {
    font-size: 0.9rem !important;
    color: #999 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    font-family: "JetBrains Mono", monospace !important;
}

#photo-db-app .photo-nav-buttons .nav-newer .nav-thumb {
    margin-left: auto !important;
}

#photo-db-app .photo-nav-buttons .nav-older .nav-thumb {
    margin-right: auto !important;
}

@media (min-width: 768px) {
    #photo-db-app .photo-nav-buttons .nav-newer .nav-inner {
        justify-content: flex-start !important;
    }
    #photo-db-app .photo-nav-buttons .nav-older .nav-inner {
        justify-content: flex-end !important;
    }
    #photo-db-app .photo-nav-buttons .nav-data {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 12px !important;
    }
    #photo-db-app .photo-nav-buttons .nav-date-full {
        display: block !important;
    }
    #photo-db-app .photo-nav-buttons .nav-date-short {
        display: none !important;
    }
}

/* SP: 縦積み・フルワイド・日付と時刻は1行表示 */
@media (max-width: 767px) {
    #photo-db-app .photo-nav-buttons {
        flex-direction: column !important;
        gap: 16px !important;
    }
    #photo-db-app .photo-nav-buttons .photo-nav-btn {
        width: 100% !important;
        padding: 16px 18px !important;
    }
    #photo-db-app .photo-nav-buttons .nav-inner {
        justify-content: space-between !important;
        gap: 24px !important;
    }
    #photo-db-app .photo-nav-buttons .nav-newer .nav-thumb,
    #photo-db-app .photo-nav-buttons .nav-older .nav-thumb {
        flex-shrink: 0 !important;
    }
    #photo-db-app .photo-nav-buttons .nav-data {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 12px !important;
    }
    #photo-db-app .photo-nav-buttons .nav-date-full {
        display: none !important;
    }
    #photo-db-app .photo-nav-buttons .nav-date-short {
        display: block !important;
    }
}

#photo-db-app .photo-nav-buttons .nav-status-label {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #fff !important;
}

/* 空のサムネイル枠（無効ボタン用） */
#photo-db-app .photo-nav-buttons .nav-thumb-empty {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border: 1px solid #333 !important;
    border-radius: 2px !important;
}

#photo-db-app .photo-nav-buttons .nav-thumb {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-radius: 2px !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s ease !important;
}

#photo-db-app .photo-nav-buttons .nav-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#photo-db-app .photo-nav-buttons a.photo-nav-btn:hover .nav-thumb {
    opacity: 1 !important;
}

#photo-db-app .photo-stage {
    position: relative !important;
    width: 100% !important;
    background: #000 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ラッパー：画像サイズにぴったり合わせ、ウォーターマークの配置基準にする。中央寄せは .photo-stage の flex で実施 */
#photo-db-app .photo-stage .photo-image-wrapper {
    position: relative !important;
    display: inline-block !important;
    max-width: 100% !important;
}

#photo-db-app .photo-stage .photo-image-wrapper img {
    display: block !important;
    max-width: 1600px !important;
    width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    pointer-events: none !important;
}

/* 透明保護レイヤー：長押し・右クリック保存を抑制。pointer-events: auto で画像への直接アクセスをブロック */
#photo-db-app .photo-stage::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 1 !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* ウォーターマーク（透かし）：.photo-image-wrapper 基準で画像枠内の右下に配置 */
#photo-db-app .photo-stage .photo-image-wrapper .photo-watermark {
    position: absolute !important;
    bottom: 1em !important;
    right: 1em !important;
    z-index: 2 !important;
    font-family: 'Caveat', cursive !important;
    font-size: clamp(0.875rem, 2.2vw, 1.25rem) !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    white-space: nowrap !important;
}

#photo-db-app .photo-info-container {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 40px 25px 100px !important;
}

/* PC版：日付とタイトルの左端を完全一致。共通の左余白は photo-info-container の padding で統一 */
@media (min-width: 769px) {
    #photo-db-app .photo-info-container .meta-top-row,
    #photo-db-app .photo-info-container .photo-heading-block {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #photo-db-app .photo-info-container .photo-display-title {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* 日付：左パディング0でタイトル最初の文字と垂直に並ぶ */
    #photo-db-app .photo-display-date {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* 上部: 日付｜バッジ。日付と1行目バッジが完璧な水平ライン。PC版 */
#photo-db-app .meta-top-row,
#photo-db-app .photo-meta-row {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    margin-bottom: 16px !important;
}

/* 日付：透明バッジとして扱い、右側バッジと完全に水平同期。左padding=0でタイトルと左端揃え */
#photo-db-app .photo-display-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    min-width: 140px !important;
    padding: 7px 14px 7px 0 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    font-family: "JetBrains Mono", monospace !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    letter-spacing: 0.02em !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* 垂直仕切り線：擬似要素で高さ固定（1行分）。日付右端に配置 */
#photo-db-app .photo-display-date::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 1.2em !important;
    background: #444 !important;
}

/* 時刻：時計アイコン（ホワイト）。padding-left=0 のため margin-right でアイコンと文字の間隔を維持 */
#photo-db-app .photo-display-date::before {
    content: '' !important;
    display: block !important;
    width: 0.95em !important;
    height: 0.95em !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12%206%2012%2012%2016%2014'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* バッジエリア：flex:1 で残り幅を占有。1行目が日付と水平になるよう flex-start */
#photo-db-app .photo-badges {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    align-content: flex-start !important;
    padding: 0 !important;
}

/* 被写体：ベーススタイル */
#photo-db-app .meta-top-row .photo-badges .badge-tag,
#photo-db-app .photo-meta-row .photo-badges .badge-tag {
    background: #1f1f1f !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* 全バッジ統一：ダークグレー。アイコン拡大に合わせて padding を調整 */
#photo-db-app .meta-top-row .photo-badges .badge-tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 14px !important;
}

#photo-db-app .meta-top-row .photo-badges .badge--subject,
#photo-db-app .meta-top-row .photo-badges .badge--line,
#photo-db-app .meta-top-row .photo-badges .badge--location,
#photo-db-app .meta-top-row .photo-badges .badge--condition,
#photo-db-app .meta-top-row .photo-badges .badge--layout {
    background: #222222 !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* 主要バッジのSVGアイコン共通：視認性向上（1.3倍、不透明、間隔8px） */
#photo-db-app .meta-top-row .photo-badges .badge--subject::before,
#photo-db-app .meta-top-row .photo-badges .badge--line::before,
#photo-db-app .meta-top-row .photo-badges .badge--location::before {
    content: '' !important;
    display: block !important;
    width: 1.3em !important;
    height: 1.3em !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* 被写体：Photoアイコン（画像フレーム風） */
#photo-db-app .meta-top-row .photo-badges .badge--subject::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15%208h.01'/%3E%3Cpath d='M3%206a3%203%200%200%201%203-3h12a3%203%200%200%201%203%203v12a3%203%200%200%201-3%203h-12a3%203%200%200%201-3-3v-12'/%3E%3Cpath d='M3%2016l5-5c.928-.893%202.072-.893%203%200l5%205'/%3E%3Cpath d='M14%2014l1-1c.928-.893%202.072-.893%203%200l3%203'/%3E%3C/svg%3E") !important;
}

/* 路線：斜めパースの線路（Track）アイコン */
#photo-db-app .meta-top-row .photo-badges .badge--line::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0%200h24v24H0z' fill='none'/%3E%3Cpath d='M4%2015l11-11m5%205l-11%2011m-4-8l7%207m-3.5-10.5l7%207m-3.5-10.5l7%207'/%3E%3C/svg%3E") !important;
}

/* 撮影地：マップピンアイコン */
#photo-db-app .meta-top-row .photo-badges .badge--location::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12%202c-3.3%200-6%202.7-6%206%200%204.5%206%2010%206%2010s6-5.5%206-10c0-3.3-2.7-6-6-6z'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3C/svg%3E") !important;
}

#photo-db-app .meta-top-row .photo-badges .badge--subject:hover,
#photo-db-app .meta-top-row .photo-badges .badge--line:hover,
#photo-db-app .meta-top-row .photo-badges .badge--location:hover,
#photo-db-app .meta-top-row .photo-badges .badge--condition:hover,
#photo-db-app .meta-top-row .photo-badges .badge--layout:hover {
    background: #333 !important;
    border-color: #444 !important;
}

#photo-db-app .badge-tag--muted {
    background: transparent !important;
    border-color: #2a2a2a !important;
    color: #888 !important;
}

#photo-db-app .badge-tag--dark {
    background: #222 !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* タイトル：静かで写真の邪魔をしないレイアウト */
#photo-db-app .photo-heading-block {
    margin-bottom: 20px !important;
}

/* Mission Brief：見出しスタイル統一。TECHNICAL DATA と等間隔リズム */
#photo-db-app .photo-mission-brief {
    margin-bottom: 24px !important;
}
#photo-db-app .photo-mission-brief .mission-label {
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #fff !important;
    margin: 0 0 16px !important;
    padding-left: 12px !important;
    border-left: 2px solid #854d2b !important;
}
#photo-db-app .photo-mission-brief .mission-body {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.85rem !important;
    color: #ccc !important;
    line-height: 1.7 !important;
    margin-top: 12px !important;
    padding-left: 14px !important;
}
#photo-db-app .photo-mission-brief .mission-body p {
    margin: 0 0 0.8em !important;
}
#photo-db-app .photo-mission-brief .mission-body p:last-child {
    margin-bottom: 0 !important;
}

#photo-db-app .photo-display-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 0 2px !important;
    line-height: 1.4 !important;
}

/* 撮影地情報：タイトル直下。控えめな色・軽い字重で邪魔しない */
#photo-db-app .photo-heading-block .photo-location-info {
    margin: 0 0 20px !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

/* サブタイトル：路線 (都道府県) : 撮影地情報。文字サイズはメインと統一 */
#photo-db-app .photo-display-title .photo-title-suffix {
    color: #888 !important;
    font-weight: 500 !important;
    font-size: inherit !important;
    margin-left: 1em !important;
}

/* 区切り線 */
#photo-db-app .db-divider {
    border: none !important;
    border-top: 1px solid #2a2a2a !important;
    margin: 0 0 24px !important;
}

/* フラットデザイン：ボックス廃止。見出しのオレンジ線を FIELD NOTE と垂直に揃える */
#photo-db-app .photo-spec-grid {
    margin-bottom: 0 !important;
}

#photo-db-app .spec-block-label {
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #fff !important;
    margin: 0 0 12px !important;
    padding-left: 12px !important;
    border-left: 2px solid #854d2b !important;
    line-height: 1.4 !important;
}

/* TECHNICAL DATA：統合セクション（背景・枠なし） */
#photo-db-app .photo-specs {
    margin-bottom: 24px !important;
}

#photo-db-app .photo-specs-data {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 24px !important;
}

#photo-db-app .photo-specs-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#photo-db-app .photo-specs .spec-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
}

#photo-db-app .photo-specs .spec-label {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.65rem !important;
    color: #555 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    flex-shrink: 0 !important;
    min-width: 5em !important;
}

#photo-db-app .photo-specs .spec-value {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.85rem !important;
    color: #fff !important;
}

#photo-db-app .action-footer {
    text-align: center !important;
    margin-top: 30px !important;
}

#photo-db-app .action-footer__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    transition: 0.2s !important;
}

#photo-db-app .action-footer__btn:hover {
    background: #252525 !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* 個別ページ・モバイル: TECHNICAL DATA 1カラム */
@media (max-width: 599px) {
    #photo-db-app .photo-specs-data {
        grid-template-columns: 1fr !important;
    }

    #photo-db-app .photo-display-title {
        font-size: 1.25rem !important;
    }
}

/* 個別ページ・タブレット/SP最適化（768px以下） */
@media (max-width: 768px) {
    /* メタ情報行：日付とバッジを上下にスタック */
    #photo-db-app .meta-top-row,
    #photo-db-app .photo-meta-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    /* 日付：縦並び時は右側仕切り線を非表示、下ボーダーに変更 */
    #photo-db-app .photo-display-date {
        min-width: auto !important;
        padding: 4px 0 12px 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #444 !important;
    }

    #photo-db-app .photo-display-date::after {
        display: none !important;
    }

    /* バッジ群：フル幅で折り返し */
    #photo-db-app .photo-badges {
        flex: none !important;
        min-width: auto !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* タイトル：メインと補足を縦並びに */
    #photo-db-app .photo-display-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* メインタイトル（被写体 [#No]）は通常サイズ */
    #photo-db-app .photo-display-title .photo-title-main {
        display: block !important;
        margin-bottom: 0 !important;
    }

    /* 補足情報：メインと同じ文字サイズで統一 */
    #photo-db-app .photo-display-title .photo-title-suffix {
        display: block !important;
        font-size: inherit !important;
        margin-top: 6px !important;
        line-height: 1.5 !important;
        margin-left: 0 !important;
    }
}

/* ===============================
    フッター
   =============================== */
/* フッター用のCSSはここに必要に応じて追加 */

/* ===============================
    レスポンシブ（メディアクエリ）
   =============================== */
#photo-db-app .sp-search-btn {
    display: none !important;
}

@media (max-width: 599px) {
    #photo-db-app .db-header-actions,
    #photo-db-app .pc-search-btn {
        display: none !important;
    }

    #photo-db-app .db-photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
    }

    #photo-db-app .db-item-overlay {
        opacity: 1 !important;
        padding: 10px !important;
    }

    #photo-db-app .db-meta-date {
        font-size: 0.65rem !important;
    }

    #photo-db-app .db-meta-subject {
        font-size: 0.95rem !important;
    }

    #photo-db-app .db-pill--location {
        display: none !important;
    }

    #photo-db-app .u-pc-only {
        display: none !important;
    }

    #photo-db-app .sp-search-btn {
        display: flex !important;
        position: fixed !important;
        bottom: 30px !important;
        right: 20px !important;
        z-index: 2000 !important;
        background: #fff !important;
        color: #000 !important;
        height: 50px !important;
        padding: 0 25px !important;
        border-radius: 25px !important;
        border: none !important;
        align-items: center;
        gap: 10px;
        box-shadow: 0 5px 25px rgba(0,0,0,0.5);
        font-size: 0.8rem;
        font-weight: 900;
    }
}

@media (min-width: 600px) {
    #photo-db-app .db-item-overlay {
        opacity: 0 !important;
    }

    #photo-db-app .db-item-card-link:hover .db-item-overlay {
        opacity: 1 !important;
    }

    #photo-db-app .db-item-card-link:hover .db-thumb {
        transform: scale(1.05) !important;
    }
}

/* ===============================
    SWELL排除等（必要に応じて追加）
   =============================== */
body.photo-db-immersive .l-footer, body.photo-db-immersive .p-fixNav, body.photo-db-immersive #header, body.photo-db-immersive #breadcrumb { display: none !important; }

/* ===============================
    ページネーション (Pagination) 
    SWELLの強力な指定を完全に上書き
   =============================== */
/* 親要素のクラス名を .db-pagination に修正 */
#photo-db-app .db-pagination {
    display: flex !important;
    justify-content: center !important;
    margin: 60px 0 100px !important;
    padding: 0 !important;
}

/* リスト自体の装飾を解除 */
#photo-db-app .db-pagination ul.page-numbers {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; /* SWELLの枠線を消去 */
}

/* 各数字ボタン：SWELLの属性セレクタに勝つための指定 */
#photo-db-app .db-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    background: #0a0a0a !important; /* 常に黒背景を強制 */
    border: 1px solid #222 !important;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    font-family: "JetBrains Mono", monospace !important;
    border-radius: 4px !important;
    box-shadow: none !important; /* SWELLの影を消去 */
}

/* 【重要】現在のページ：SWELLの青色を白で上書き */
#photo-db-app .db-pagination .page-numbers.current {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* ホバー時 */
#photo-db-app .db-pagination .page-numbers:hover:not(.current) {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* SWELLの余計な要素を非表示 */
#photo-db-app .db-pagination .dots {
    background: transparent !important;
    border: none !important;
    color: #444 !important;
}