/* さくらドライブ 写真モード (docs/DRIVE_PHOTO_VIEW_DESIGN.md)。 drive.html から ?v= 付きで読む
   (Service Worker は静的ファイルを cache-first で配る = 版を上げないと 1 回遅れる)。 色は drive.html の :root を使う。 */

/* ---- 切り替え・並びの帯 ---- */
.dp-spacer{ flex:1; }
.dp-seg{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; vertical-align:middle; }
.dp-seg[hidden]{ display:none; }
.dp-seg button{ border:0; background:#fff; color:var(--pink-d); padding:7px 11px; font-size:13px; font-weight:700; cursor:pointer; }
.dp-seg button + button{ border-left:1px solid var(--line); }
.dp-seg button.on{ background:var(--pink); color:#fff; }
.dp-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:2px 0 10px; }
.dp-small{ font-size:12.5px; color:var(--sub); }
.dp-bar select{ padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:13px; color:var(--ink); background:#fff; }

/* ---- 並び (縦横そのまま = 切らない) ---- */
.dp-grid{ display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(min(var(--dp-tile,160px), calc((100% - 20px) / 3)), 1fr)); }   /* スマホでも 3 列から */
.dp-tile{ cursor:pointer; min-width:0; }
.dp-th{ position:relative; border-radius:8px; overflow:hidden; background:#f6edf1; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; }
.dp-th img{ width:100%; height:100%; object-fit:contain; display:block; opacity:0; transition:opacity .25s; }
.dp-th img.on{ opacity:1; }
.dp-tile:hover .dp-th, .dp-tile:focus-visible .dp-th{ outline:2px solid var(--pink); outline-offset:1px; }
.dp-tile:focus{ outline:none; }
.dp-nm{ font-size:12px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#555; }
.dp-tile.dir .dp-nm{ color:var(--pink-d); font-weight:700; }
.dp-ic{ font-size:40px; line-height:1; }
.dp-ext{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:11px; font-weight:700; color:var(--sub); }
.dp-badge{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,.62); color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px; }
.dp-tile.video .dp-th{ background:#2b2b33; }
.dp-play{ font-size:34px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.dp-spin{ position:absolute; width:22px; height:22px; border:3px solid rgba(214,75,120,.25); border-top-color:var(--pink); border-radius:50%;
  animation:dp-spin 1s linear infinite; }
@keyframes dp-spin{ to{ transform:rotate(360deg); } }
.dp-note{ font-size:12.5px; color:var(--sub); margin-top:12px; line-height:1.7; }
.dp-note a{ color:var(--pink-d); cursor:pointer; text-decoration:underline; }
.dp-empty{ color:#a08; text-align:center; padding:24px 10px; font-size:14px; }

/* ---- 1 枚ずつ大きく (ビューアー) ---- */
#dpViewer{ position:fixed; inset:0; z-index:200; background:var(--dp-bg,#000); color:#fff; overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:none; }
#dpViewer[hidden]{ display:none; }
#dpViewer.light{ color:#222; }
#dpStage{ position:absolute; inset:0; overflow:hidden; }
.dp-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; will-change:transform,opacity; }
.dp-layer .dp-spin{ width:34px; height:34px; }
.dp-fail{ font-size:14px; opacity:.85; text-align:center; line-height:1.8; padding:0 20px; }
.dp-vbar{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:8px; padding:10px 14px; z-index:5;
  background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); transition:opacity .35s; }
#dpViewer.light .dp-vbar{ background:linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); }
.dp-vbar .dp-vnm{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-vbar .dp-vcnt{ font-size:13px; opacity:.85; white-space:nowrap; }
.dp-vbar button{ background:rgba(255,255,255,.18); color:inherit; border:0; border-radius:8px; padding:6px 10px; font-size:15px; cursor:pointer; line-height:1.2; }
.dp-vbar button.on{ background:var(--pink); color:#fff; }
#dpViewer.light .dp-vbar button{ background:rgba(0,0,0,.08); }
#dpViewer.light .dp-vbar button.on{ background:var(--pink); color:#fff; }
@media (max-width:520px){   /* スマホ: ボタンが 7 つ = 名前は省いて 枚数を左に */
  .dp-vbar{ gap:5px; padding:8px; }
  .dp-vbar .dp-vnm{ display:none; }
  .dp-vbar .dp-vcnt{ flex:1; }
  .dp-vbar button{ padding:6px 8px; font-size:14px; }
}
.dp-nav{ position:absolute; top:60px; bottom:0; width:12%; display:flex; align-items:center; font-size:46px; opacity:.75; cursor:pointer; z-index:4;
  transition:opacity .35s; }
.dp-nav.l{ left:0; justify-content:flex-start; padding-left:16px; }
.dp-nav.r{ right:0; justify-content:flex-end; padding-right:16px; }
#dpViewer.idle .dp-vbar, #dpViewer.idle .dp-nav{ opacity:0; pointer-events:none; }
#dpViewer.idle{ cursor:none; }
.dp-pause{ position:absolute; right:18px; bottom:14px; font-size:26px; opacity:.85; z-index:5; }
.dp-pause[hidden]{ display:none; }
.dp-pop{ position:absolute; top:54px; right:14px; background:#fff; color:#222; border-radius:12px; padding:14px 14px 10px; width:340px;
  max-width:calc(100vw - 28px); max-height:calc(100vh - 70px); overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.45); z-index:10; font-size:13px; }
.dp-pop[hidden]{ display:none; }
.dp-pop h4{ margin:0 0 6px; color:var(--pink-d); font-size:14px; }
.dp-pop .dp-lbl{ font-weight:700; color:#765; margin:10px 0 4px; font-size:12.5px; }
.dp-pop .dp-opts{ display:flex; flex-wrap:wrap; gap:6px; }
.dp-pop .dp-opts button{ border:1px solid #ddd; background:#fff; border-radius:8px; padding:5px 9px; font-size:12.5px; cursor:pointer; color:#333; }
.dp-pop .dp-opts button.on{ border-color:var(--pink); background:#ffe3ee; color:var(--pink-d); font-weight:700; }
.dp-pop .dp-foot{ display:flex; justify-content:flex-end; margin-top:12px; }
.dp-pop input[type=number]{ width:70px; padding:4px 6px; border:1px solid #ddd; border-radius:6px; font-size:13px; }
.dp-pop .dp-go{ padding:8px 14px; border:0; border-radius:9px; background:var(--pink); color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.dp-sw{ width:30px; height:30px; border-radius:50%; border:2px solid #ccc; cursor:pointer; padding:0; }
.dp-sw.on{ border-color:var(--pink); box-shadow:0 0 0 2px #fff inset, 0 0 0 4px var(--pink); }
.dp-swc{ width:40px; height:30px; border:1px solid #ccc; border-radius:6px; padding:0; cursor:pointer; background:none; }

/* ---- 額縁 (額 = .dp-pf-frame の border・ 上下左右で色を変える = 四隅が 45° の継ぎ目) ---- */
.dp-pf{ margin:0; position:relative; display:flex; flex-direction:column; align-items:center; }
.dp-pf-frame{ position:relative; border:var(--f,0px) solid transparent; }
.dp-pf-mat{ padding:var(--m,0px); background:var(--matc,#fbfaf7); }
.dp-pf img{ display:block; }
.dp-pf.fr-none .dp-pf-mat{ background:transparent; }
.dp-pf.hasmat .dp-pf-mat{ box-shadow:inset 0 0 calc(var(--u)*.9) rgba(0,0,0,.2); }
.dp-pf.hasmat img{ box-shadow:0 0 0 calc(var(--u)*.22) rgba(255,255,255,.95), 0 0 0 calc(var(--u)*.34) rgba(0,0,0,.16); }
.dp-pf.shadow .dp-pf-frame{ box-shadow:0 calc(var(--u)*1.3) calc(var(--u)*3.4) rgba(0,0,0,.55); }
.dp-pf.shadow.fr-none .dp-pf-frame{ box-shadow:none; }
.dp-pf.shadow.fr-none img{ box-shadow:0 calc(var(--u)*1.2) calc(var(--u)*3) rgba(0,0,0,.5); }
.dp-pf.fr-gallery .dp-pf-frame{ border-color:#3b3b3b #1d1d1d #060606 #1d1d1d; }
.dp-pf.fr-wood .dp-pf-frame{ border-color:#e6bb88 #c3905d #8b5b2f #c3905d; }
.dp-pf.fr-walnut .dp-pf-frame{ border-color:#80593a #5a3a23 #2d1b0f #5a3a23; }
.dp-pf.fr-gold .dp-pf-frame{ border-color:#f7e397 #d3ad48 #8d6a1b #d3ad48; outline:calc(var(--f)*.13) solid rgba(105,75,12,.55); outline-offset:calc(var(--f)*-.62); }
.dp-pf.fr-white .dp-pf-frame{ border-color:#ffffff #f1f1f1 #d9d9d9 #f1f1f1; }
.dp-pf.fr-black .dp-pf-frame{ border-color:#353535 #1f1f1f #090909 #1f1f1f; }
.dp-pf.fr-wood .dp-pf-frame::after, .dp-pf.fr-walnut .dp-pf-frame::after, .dp-pf.fr-gold .dp-pf-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; box-shadow:0 0 0 calc(var(--u)*.18) rgba(0,0,0,.35); }
.dp-pf.fr-polaroid .dp-pf-mat{ background:#fdfdfb; padding:var(--m) var(--m) var(--mb); }
.dp-pf.fr-polaroid{ transform:rotate(var(--rot,0deg)); }
.dp-pf-cap{ margin-top:calc(var(--u)*1.3); font-size:calc(var(--u)*1.7); opacity:.85; text-align:center; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-pf-cap[hidden]{ display:none; }
.dp-pf.fr-polaroid .dp-pf-cap{ position:absolute; left:0; right:0; bottom:calc(var(--mb) * .3); margin:0; color:#555; opacity:1;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS","Yu Gothic UI",cursive; font-size:calc(var(--u)*2.1); }