/* index.html 固有のスタイル。
   リセット・変数・ヘッダー/ロゴ/ナビ/ハンバーガー/ドロワーなどの
   共通部分は css/common.css を参照してください（このファイルより先に読み込みます）。*/

/* ===== BREADCRUMB（ヘッダー直下に固定） ===== */
#breadcrumb{
  padding:0.5rem 1.0rem;background:var(--bg2);border-bottom:1px solid var(--border);
  font-size:1rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:nowrap;
  overflow-x:auto;white-space:nowrap;
  position:sticky;top:var(--header-h);z-index:100;
  /* スクロールバーを非表示（スクロール自体は有効） */
  scrollbar-width:none;
}
#breadcrumb::-webkit-scrollbar{display:none}
.bc{color:var(--text2);cursor:pointer;transition:color 0.2s}
.bc:hover{color:var(--accent)}
.bc-sep{color:var(--text3)}
.bc.active{color:var(--text);cursor:default}
#breadcrumb.hidden{display:none}

/* ===== ALBUM / MAP VIEW ===== */
#album-view{flex:1}
#main{padding:1rem 0.8rem}
.section-title{font-size:0.72rem;letter-spacing:0.16em;color:var(--text3);margin-bottom:0.6rem;font-weight:400;text-transform:uppercase}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:3px}
@media(min-width:1200px){.folder-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
@media(min-width:1600px){.folder-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
.folder-card{position:relative;cursor:pointer;overflow:hidden;background:var(--bg3);aspect-ratio:3/2}
.folder-card-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s;opacity:1}
.folder-card:hover .folder-card-thumb{transform:scale(1.04)}
.folder-card-no-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg3);font-size:2.4rem;color:var(--accent);opacity:0.2}
.folder-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.78) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:0.9rem 1rem;transition:background 0.3s}
.folder-card:hover .folder-card-overlay{background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,0.88) 100%)}
.folder-card-overlay::before{content:'';position:absolute;left:0;bottom:0;top:0;width:2px;background:transparent;transition:background 0.2s}
.folder-card:hover .folder-card-overlay::before{background:var(--accent)}
.fc-name{font-size:0.95rem;color:#fff;line-height:1.4;margin-bottom:0.2rem;font-weight:400;text-shadow:0 1px 6px rgba(0,0,0,0.7)}
.fc-meta{font-size:0.72rem;color:rgba(255,255,255,0.6);text-shadow:0 1px 4px rgba(0,0,0,0.6)}
.album-header{margin-bottom:0.4rem;border-bottom:1px solid var(--border);padding-bottom:0.4rem}
.album-title{font-size:1.35rem;letter-spacing:0.04em;color:var(--text);font-weight:400;margin-bottom:0.3rem}
.album-summary{font-size:0.88rem;color:var(--text2);line-height:1.8;margin-bottom:0.5rem}
.album-meta-row{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin-top:0.3rem}
.album-coords{font-size:0.75rem;color:var(--text3);display:flex;align-items:center;gap:0.4rem}
.coords-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}
.map-link{color:var(--accent);text-decoration:none;font-size:0.75rem;border:1px solid var(--border2);padding:0.18rem 0.55rem;border-radius:3px;transition:background 0.2s;cursor:pointer}
.map-link:hover{background:rgba(212,168,67,0.1)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:4px}
@media(min-width:1400px){.media-grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}}
@media(min-width:1800px){.media-grid{grid-template-columns:repeat(auto-fill,minmax(500px,1fr))}}
.photo-thumb{position:relative;cursor:pointer;overflow:hidden;background:var(--bg3);aspect-ratio:3/2}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s;opacity:1}
.photo-thumb:hover img{transform:scale(1.04)}
.media-overlay{position:absolute;bottom:0;left:0;right:0;padding:0.75rem 0.9rem;background:linear-gradient(transparent,rgba(0,0,0,0.84));opacity:0;transition:opacity 0.3s;pointer-events:none}
.photo-thumb:hover .media-overlay{opacity:1}
.overlay-title{font-size:0.82rem;color:#fff;line-height:1.45}
.overlay-date{font-size:0.7rem;color:#fff;margin-top:0.12rem}
.overlay-place{font-size:0.7rem;color:#fff;margin-top:0.06rem}
.yt-thumb{position:relative;cursor:pointer;overflow:hidden;background:#000;aspect-ratio:3/2}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s;opacity:1}
.yt-thumb:hover img{transform:scale(1.03)}
.yt-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,0.6);display:flex;align-items:center;justify-content:center;transition:background 0.2s,transform 0.2s;pointer-events:none}
.yt-thumb:hover .yt-play-btn{background:rgba(255,255,255,0.88);transform:translate(-50%,-50%) scale(1.08)}
.yt-play-btn svg{width:21px;height:21px;fill:#111;margin-left:3px}
.yt-thumb .media-overlay{opacity:1;background:linear-gradient(transparent,rgba(0,0,0,0.72))}
#map-view{display:none;flex:1;flex-direction:column}
#map-view.active{display:flex}
#map{flex:1;min-height:calc(100vh - var(--header-h));min-height:calc(100dvh - var(--header-h))}
.leaflet-popup-content-wrapper{background:#1a1d24 !important;border:1px solid rgba(212,168,67,0.3) !important;border-radius:8px !important;box-shadow:0 6px 28px rgba(0,0,0,0.65) !important;padding:0 !important;overflow:hidden}
.leaflet-popup-tip{background:#1a1d24 !important}
.leaflet-popup-content{margin:0 !important;width:auto !important}
.leaflet-popup-close-button{color:rgba(255,255,255,0.4) !important;font-size:18px !important;top:6px !important;right:8px !important;z-index:1}
.leaflet-popup-close-button:hover{color:#fff !important}
.map-popup{width:230px;cursor:pointer;overflow:hidden}
.map-popup-img{width:230px;height:140px;object-fit:cover;display:block;transition:transform 0.4s}
.map-popup:hover .map-popup-img{transform:scale(1.03)}
.map-popup-no-img{width:230px;height:140px;background:#22262f;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#555}
.map-popup-body{padding:0.75rem 0.9rem;background:#1a1d24}
.map-popup-genre{font-size:0.68rem;letter-spacing:0.12em;color:var(--accent);margin-bottom:0.2rem;font-family:var(--font)}
.map-popup-title{font-size:0.92rem;color:#f0f2f5;line-height:1.4;margin-bottom:0.2rem;font-family:var(--font);font-weight:400}
.map-popup-region{font-size:0.72rem;color:#b0b6c2;font-family:var(--font)}
.map-popup-hint{font-size:0.66rem;color:#8a909e;margin-top:0.45rem;letter-spacing:0.04em;font-family:var(--font)}
/* ===== MEDIA VIEWER（写真・動画共通、左右スライド + 下部サムネイル） ===== */
#viewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:200;touch-action:pan-y;--mv-pad-top:64px;--mv-pad-bottom:140px}
#viewer.open{display:block}
#mv-stage{position:absolute;inset:0;overflow:hidden}
.mv-slide{position:absolute;inset:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:var(--mv-pad-top) 0 var(--mv-pad-bottom);transition:transform 0.4s cubic-bezier(0.65,0,0.35,1);will-change:transform}
.mv-slide.from-right{transform:translateX(100%)}
.mv-slide.from-left{transform:translateX(-100%)}
.mv-slide.to-left{transform:translateX(-100%)}
.mv-slide.to-right{transform:translateX(100%)}
.mv-slide.settled,.mv-slide.current{transform:translate(0,0)}
.mv-img-wrap{height:100%;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.mv-img-wrap.panning{cursor:grabbing}
.mv-img{max-width:92vw;max-height:100%;object-fit:contain;display:block;transform-origin:center center;user-select:none;-webkit-user-drag:none;will-change:transform}
.mv-video-wrap{position:relative;width:min(92vw,calc((100vh - var(--mv-pad-top) - var(--mv-pad-bottom)) * 16 / 9));max-height:100%}
.mv-video-wrap iframe{width:100%;aspect-ratio:16/9;display:block;border:none}
#mv-bottom{position:absolute;left:0;right:0;bottom:0;z-index:15;height:var(--mv-pad-bottom);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end}
#mv-info{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0.2rem;text-align:center;max-width:720px;margin:0 auto;padding:0 1rem}
#mv-caption{font-size:0.92rem;color:#fff;line-height:1.3;margin:0}
#mv-detail{font-size:0.82rem;color:var(--text2);line-height:1.4;margin:0}
#mv-sub{font-size:0.78rem;color:#fff;line-height:1.3;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:0}
#mv-close{position:fixed;top:0.6rem;right:0.6rem;background:none;border:1px solid rgba(255,255,255,0.2);color:var(--text2);cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:210}
#mv-close:hover{color:#fff;border-color:#fff}
#mv-close svg{width:16px;height:16px;flex-shrink:0}
#mv-ai-btn{position:fixed;top:1.2rem;left:1.5rem;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.25);color:var(--text2);font-size:0.73rem;cursor:pointer;padding:0.3rem 0.7rem;border-radius:4px;transition:all 0.2s;font-family:var(--font);display:none;letter-spacing:0.04em;z-index:210}
#mv-ai-btn:hover{color:#fff;border-color:#fff}
#mv-ai-btn.visible{display:block}
#mv-counter{position:fixed;top:1.2rem;left:50%;transform:translateX(-50%);font-size:0.75rem;color:var(--text3);letter-spacing:0.1em;z-index:210}
.mv-nav{position:fixed;top:calc(50vh + (var(--mv-pad-top) - var(--mv-pad-bottom)) / 2);transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,0.2);color:var(--text2);cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:210}
.mv-nav:hover{color:#fff;border-color:#fff}
.mv-nav svg{width:22px;height:22px;flex-shrink:0}
#mv-prev{left:0.6rem}
#mv-next{right:0.6rem}

/* 下部サムネイルストリップ：現アルバムの写真・動画を横断して一覧表示、クリックでジャンプ */
.thumb-strip{flex:0 0 auto;z-index:16;display:flex;justify-content:flex-start;background:linear-gradient(to top,rgba(0,0,0,0.92),rgba(0,0,0,0.78) 55%,transparent 100%);padding:8px 1rem 14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;cursor:grab;user-select:none;-webkit-user-select:none}
/* サムネイル総幅がストリップ幅に収まる場合のみ中央寄せする（JS側で幅を判定してこのクラスを付与）。
   常時 justify-content:center にすると、あふれた分の左側が
   スクロールで到達不能になってしまう（scrollLeftを負にできないため）ので注意。 */
.thumb-strip.is-centered{justify-content:center}
.thumb-strip.dragging{cursor:grabbing;scroll-behavior:auto}
.thumb-strip::-webkit-scrollbar{display:none}
.thumb-track{display:flex;gap:6px;flex:0 0 auto}
.thumb-item{position:relative;flex:0 0 auto;width:87px;height:58px;overflow:hidden;background:var(--bg3);opacity:0.5;border:1px solid transparent;cursor:pointer;transition:opacity 0.2s,border-color 0.2s}
.thumb-item img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-drag:none;pointer-events:none}
.thumb-item:hover{opacity:0.85}
.thumb-item.is-active{opacity:1;border-color:var(--accent)}
.thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.28)}
.thumb-play svg{width:16px;height:16px;fill:#fff}

/* ===== レスポンシブ（ヘッダー/ナビ共通部分は common.css 側にあります） ===== */
@media(max-width:768px){
  #main{padding:0.75rem}
  #breadcrumb{padding:0.45rem 0.75rem}
  .folder-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .mv-nav{width:34px;height:34px}
  .mv-nav svg{width:18px;height:18px}
  #viewer{--mv-pad-top:56px;--mv-pad-bottom:110px}
  .thumb-strip{padding:6px 0.75rem 10px}
  .thumb-item{width:69px;height:46px}
}

/* 縦画面（ポートレート）では写真・動画を画面幅いっぱいに表示し、左右の余白をなくす */
@media(orientation:portrait){
  .mv-img{max-width:100vw}
  .mv-video-wrap{width:min(100vw,calc((100vh - var(--mv-pad-top) - var(--mv-pad-bottom)) * 16 / 9))}
}