/* 散骨メモリアル お客様専用サイト
 *
 * 方針: 静かで、余白があって、読みやすいこと。装飾より読みやすさを優先する。
 * 見出しは明朝、本文はゴシック。字間を広めに取り、行間を1.9〜2.0にして、
 * 画面を「急がせない」ようにしている。ご遺族がゆっくり見るための場所なので、
 * 動くもの・光るもの・急かすものを置かない。 */

:root {
  --paper:      #faf8f4;
  --paper-2:    #f3efe8;
  --paper-3:    #ece6dc;
  --ink:        #2f2c28;
  --ink-soft:   #6b665d;
  --ink-faint:  #948d82;
  --line:       #e2dbd1;
  --sea:        #2b4a58;
  --sea-soft:   #4a6f7e;
  --danger:     #9c4a3c;
  --shadow:     0 1px 2px rgba(47,44,40,.04), 0 10px 30px rgba(47,44,40,.06);
  --serif:      "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Times New Roman", serif;
  --sans:       -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --radius:     3px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* 中国語で表示するときの書体。
 * 同じ漢字でも日本語と中国語では字形が違う（骨・海・記 など）。
 * html の lang 属性と合わせてここを切り替えないと、
 * 中国語の文章が日本語の字形のまま出て、読み手に微妙な違和感が残る。 */
html[lang^="zh"] {
  --serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
           "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
/* palt は日本語の約物を詰めるための機能。中国語では効かせない */
html[lang^="zh"] body { font-feature-settings: normal; }

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #16181a;
    --paper-2:   #1e2124;
    --paper-3:   #262a2e;
    --ink:       #e7e2da;
    --ink-soft:  #9c958a;
    --ink-faint: #7b746a;
    --line:      #32363a;
    --sea:       #9dc4d2;
    --sea-soft:  #7ba4b3;
    --danger:    #d98f80;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

/*
 * 長い文字列がレイアウトを押し広げるのを防ぐ。
 *
 * flex と grid の中身は既定で「中身より小さくならない」(min-width:auto)。
 * そのため「…」で省略するつもりの要素でも、実際には縮まずに枠を広げてしまう。
 * 動画の説明が未設定だとファイル名がそのまま出るため、
 * 長いファイル名ひとつで画面全体が横にずれる ―― 実際にスマホで起きた。
 *
 * 省略したい要素には min-width:0 を必ず添える。ここに列挙してあるのは
 * 「white-space:nowrap で省略する」つもりの箇所すべて。
 */
.viewer__bar, .viewer__title,
.site-head, .site-head__title, .site-head__right,
.card, .card__caption,
.album-row, .album-row__head, .album-row__title,
.queue__head, .queue__name {
  min-width: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.95;
  font-feature-settings: "palt" 1;   /* 日本語の字詰め。約物まわりの間延びを抑える */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--sea); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.75;
  margin: 0;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.12rem; margin: 0 0 1.1rem; }

.page { max-width: 1000px; margin: 0 auto; padding: 3.5rem 1.5rem 6rem; }
.muted { color: var(--ink-soft); font-size: .85rem; }
/* 説明文には地図などの長いURLが入りうる。区切りのない文字列でも画面からはみ出さないようにする */
.lead  { color: var(--ink-soft); max-width: 32em; margin: 1.4rem 0 0; overflow-wrap: anywhere; }
.lead a { color: var(--sea); text-decoration: underline; text-underline-offset: .2em; }

/* 開いた瞬間にすべてが飛び込んでこないよう、ごく静かに立ち上げる */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .9s var(--ease) both; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  * { transition-duration: .001ms !important; }
}

/* ============================================================
   見出しの背景映像
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  height: 58vh;
  min-height: 340px;
  max-height: 600px;
  background: #11161a center/cover no-repeat;
  background-image: url(/assets/hero/hero-wide.jpg);
  isolation: isolate;
}
.hero--full {
  height: 100vh;
  height: 100dvh;      /* スマホのアドレスバーで高さが動くのを防ぐ */
  max-height: none;
}
/* ポスター画像は「その枠が横長か縦長か」で選ぶ。hero.js が映像を選ぶ基準と揃えてある。
 * 帯（58vh）は横長になりやすく、画面いっぱいの入口は縦長になりやすい。 */
@media (max-width: 760px) {
  .hero { background-image: url(/assets/hero/hero-tall.jpg); }
}
.hero--full { background-image: url(/assets/hero/hero-tall.jpg); }
@media (min-aspect-ratio: 18/10) {
  .hero--full { background-image: url(/assets/hero/hero-wide.jpg); }
}

/* ポスターの上に映像を重ねる。映像が実際に流れ始めてから、ゆっくり現れる */
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  z-index: -1;
}
.hero.is-playing .hero__media { opacity: 1; }

/* 文字を読ませるための膜。
 *
 * 上下を締めるだけでは足りない。文字が置かれる中央には白飛びした太陽が来るので、
 * 明朝の細い白文字が沈んで読めなくなる。そこで文字のある範囲だけを楕円で静かに落とす。
 * 全体を均一に暗くすると夕陽の色が死ぬので、暗くするのは必要な場所だけにしている。 */
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 46% at 50% 46%, rgba(10,14,18,.46) 0%, rgba(10,14,18,0) 72%),
    linear-gradient(to bottom,
      rgba(12,16,20,.56) 0%,
      rgba(12,16,20,.18) 38%,
      rgba(12,16,20,.32) 70%,
      rgba(12,16,20,.70) 100%);
}
.hero--full .hero__veil {
  background:
    radial-gradient(ellipse 52% 44% at 50% 50%, rgba(10,14,18,.50) 0%, rgba(10,14,18,0) 72%),
    linear-gradient(to bottom,
      rgba(12,16,20,.42) 0%,
      rgba(12,16,20,.16) 30%,
      rgba(12,16,20,.30) 68%,
      rgba(12,16,20,.62) 100%);
}
.hero__inner {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
  color: #f4f1ec;
}

.hero__mark {
  width: 1px; height: 46px;
  margin: 0 auto 2rem;
  background: linear-gradient(to bottom, transparent, rgba(244,241,236,.75));
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.6vw, 2.05rem);
  letter-spacing: .22em;
  line-height: 2;
  margin: 0;
  text-indent: .22em;              /* 字間を広げた分の右寄りを打ち消す */
  text-shadow: 0 1px 3px rgba(8,12,16,.55), 0 0 30px rgba(8,12,16,.65);
  /* 日本語は既定でどこでも改行できてしまい、「散骨メモリアル お／客様専用ページ」のように
   * 語の途中で折れる。keep-all で文字間の改行を止め、空白の位置だけで折り返させる。
   * 空白の無い長い題名は break-word で救う（はみ出させない）。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hero__rule {
  width: 44px; height: 1px;
  margin: 1.8rem auto;
  background: rgba(244,241,236,.5);
}
.hero__lead {
  font-size: .875rem;
  line-height: 2.2;
  letter-spacing: .08em;
  color: rgba(244,241,236,.86);
  max-width: 30em;
  margin: 0 auto;
  text-shadow: 0 1px 3px rgba(8,12,16,.8), 0 0 22px rgba(8,12,16,.6);
}

/* ============================================================
   入口（合言葉）
   ============================================================ */

.layout-gate .page { width: 100%; max-width: 430px; margin: 0 auto; padding: 3rem 1.5rem; }

/* 題名は広く、入力欄は狭く。長い題名が窮屈に折り返すのを避けつつ、
 * 入力欄が間延びしないようにする */
.gate { width: 100%; max-width: 30rem; }
.gate__form, .gate__note, .gate__error { max-width: 22rem; margin-left: auto; margin-right: auto; }
.gate__form { display: grid; gap: 1rem; margin-top: 2.6rem; }
.gate__form label { color: rgba(244,241,236,.7); text-align: left; }
.gate__form input[type="password"], .gate__form input[type="text"] {
  text-align: center;
  letter-spacing: .16em;
  font-size: 1.02rem;
  padding: .85rem;
  color: #f4f1ec;
  background: rgba(255,255,255,.08);
  border-color: rgba(244,241,236,.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gate__form input::placeholder { color: rgba(244,241,236,.4); }
.gate__form input:focus {
  border-color: rgba(244,241,236,.6);
  box-shadow: 0 0 0 3px rgba(244,241,236,.12);
}
.gate__form .btn {
  background: rgba(244,241,236,.94);
  border-color: rgba(244,241,236,.94);
  color: #1b2126;
  letter-spacing: .2em;
  text-indent: .2em;
  padding: .82rem;
}
.gate__form .btn:hover { background: #fff; border-color: #fff; }
.gate__note {
  margin-top: 2.4rem; font-size: .78rem; letter-spacing: .04em;
  color: rgba(244,241,236,.72);
  /* 光の道の上に重なるので、膜を濃くする代わりに影で浮かせる */
  text-shadow: 0 1px 3px rgba(8,12,16,.9), 0 0 18px rgba(8,12,16,.7);
}
.gate__form label { text-shadow: 0 1px 3px rgba(8,12,16,.85); }
.gate__error {
  margin: 2.2rem auto 0;
  padding: .8rem 1rem;
  font-size: .85rem;
  color: #ffe6df;
  background: rgba(140,50,38,.42);
  border: 1px solid rgba(255,190,175,.32);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 管理側のログインは映像なし。事務的でよい */
.layout-gate { display: grid; place-items: center; min-height: 100vh; }
.admin-gate { text-align: center; }
.admin-gate h1 { font-size: 1.2rem; margin-bottom: 2rem; }
.admin-gate form { display: grid; gap: .9rem; }

/* ============================================================
   サイトのヘッダ / フッタ
   ============================================================ */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; flex-wrap: wrap;   /* 収まらなければ折り返す。右端が画面外へ出ない */
  padding: 1.15rem 1.6rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.site-head__title { margin: 0; font-family: var(--serif); font-size: .95rem; letter-spacing: .14em; }
.site-head__right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.site-head__exit  { font-size: .78rem; color: var(--ink-soft); letter-spacing: .06em; white-space: nowrap; }

/* 幅の狭い端末では、題名と操作を上下に分ける。
 * 横一列のままだと題名・言語切替・閉じるが入りきらず、
 * 右端の「閉じる」が画面の外へ押し出されていた（実測で4px）。 */
@media (max-width: 480px) {
  .site-head { padding: 1rem 1.1rem; }
  .site-head__title { font-size: .88rem; letter-spacing: .1em; flex: 1 1 100%; }
  .site-head__right { flex: 1 1 100%; justify-content: flex-end; gap: .9rem; }
}
.site-head--over-hero { position: absolute; inset: 0 0 auto; z-index: 2; background: none; border: 0; }
.site-head--over-hero .site-head__title { color: rgba(244,241,236,.9); }
.site-head--over-hero .site-head__exit  { color: rgba(244,241,236,.7); }

/* ---- 言語の切り替え ---- */

.langsw { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; letter-spacing: .04em; white-space: nowrap; }
.langsw__item { color: var(--ink-faint); }
.langsw__item:hover { color: var(--ink); text-decoration: none; }
.langsw__item.is-current { color: var(--ink); }
.langsw__sep { color: var(--line); }

/* 映像の上に重ねるとき */
.langsw--over .langsw__item { color: rgba(244,241,236,.55); }
.langsw--over .langsw__item:hover { color: rgba(244,241,236,.95); }
.langsw--over .langsw__item.is-current { color: rgba(244,241,236,.95); }
.langsw--over .langsw__sep { color: rgba(244,241,236,.3); }

/* 合言葉の画面は右上に置く。入力より先に言語を選べる位置 */
.langsw--gate {
  position: absolute; top: 1.15rem; right: 1.5rem; z-index: 3;
  font-size: .8rem;
}
.langsw--gate .langsw__item { color: rgba(244,241,236,.6); text-shadow: 0 1px 3px rgba(8,12,16,.8); }
.langsw--gate .langsw__item:hover,
.langsw--gate .langsw__item.is-current { color: rgba(244,241,236,.96); }
.langsw--gate .langsw__sep { color: rgba(244,241,236,.35); }

.site-foot {
  border-top: 1px solid var(--line);
  padding: 2.6rem 1.5rem 3.4rem;
  text-align: center;
}
.site-foot p { margin: 0; color: var(--ink-faint); font-size: .76rem; letter-spacing: .1em; }

/* ============================================================
   フォーム部品
   ============================================================ */

label { display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: .4rem; letter-spacing: .08em; }

input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea, select {
  width: 100%;
  padding: .74rem .9rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--sea-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 13%, transparent);
}
textarea { resize: vertical; min-height: 5.5em; line-height: 1.9; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .72rem 1.5rem;
  font: inherit; font-size: .88rem; letter-spacing: .1em;
  color: var(--paper); background: var(--sea);
  border: 1px solid var(--sea); border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover { background: var(--sea-soft); border-color: var(--sea-soft); text-decoration: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--ghost  { color: var(--ink); background: transparent; border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-2); border-color: var(--line); }
.btn--danger { color: var(--danger); background: transparent; border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.btn--sm { padding: .4rem .85rem; font-size: .8rem; letter-spacing: .06em; }

.notice {
  padding: .9rem 1.15rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-2);
  font-size: .875rem; margin: 0 0 1.6rem;
}
.notice--error { border-color: color-mix(in srgb, var(--danger) 42%, transparent); color: var(--danger); }
.notice--ok    { border-color: color-mix(in srgb, var(--sea) 34%, transparent); }

/* ============================================================
   アルバム一覧
   ============================================================ */

.section-label {
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink-faint);
  margin: 0 0 1.6rem;
}

.albums { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 題名・日付・中身の数枚を縦に積む。
 * 表紙1枚だけだと中に何が入っているか伝わらないので、
 * 開く前に中身の気配が分かるようにしている。 */
.album-row {
  display: block;
  padding: 1.5rem .4rem 1.6rem;
  background: var(--paper); color: inherit;
  transition: background .25s var(--ease);
}
.album-row:hover { background: var(--paper-2); text-decoration: none; }

.album-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.album-row__title { font-family: var(--serif); font-size: 1.12rem; letter-spacing: .08em;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-row__meta  { display: block; margin-top: .35rem;
                    color: var(--ink-soft); font-size: .78rem; letter-spacing: .04em;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-row__count { color: var(--ink-faint); font-size: .76rem; white-space: nowrap; letter-spacing: .08em; }

/* 中身の数枚。大きさは枚数によらず一定にして、行が並んだときに揃って見えるようにする */
.album-row__strip { display: flex; gap: .5rem; margin-top: 1rem; }
.album-row__cell {
  position: relative; flex: 0 0 auto;
  width: clamp(66px, 21vw, 96px); aspect-ratio: 1;
  border-radius: 2px; overflow: hidden; background: var(--paper-3);
}
.album-row__cell img { width: 100%; height: 100%; object-fit: cover; display: block;
                       transition: transform .6s var(--ease); }
.album-row:hover .album-row__cell img { transform: scale(1.04); }
/* 並べきれない分は枚数で示す */
.album-row__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(14,16,18,.55); color: #f2efe9;
  font-size: .82rem; letter-spacing: .04em;
}

@media (max-width: 560px) {
  .album-row { padding: 1.3rem .2rem 1.4rem; }
  .album-row__title { font-size: 1.05rem; }
  .album-row__count { font-size: .72rem; }
}

/* ============================================================
   写真・動画のグリッド
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.card { display: block; color: inherit; }
.card:hover { text-decoration: none; }
.card__frame {
  position: relative; display: block;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--paper-3); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.card:hover .card__frame img { transform: scale(1.035); }
.card__placeholder { position: absolute; inset: 0; background: var(--paper-3); }
.card__play {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(18,22,26,.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.3);
}
.card__play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 19px;
  border-left: 12px solid rgba(255,255,255,.95);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.card__duration {
  position: absolute; right: .5rem; bottom: .5rem;
  padding: .1rem .42rem; border-radius: 2px;
  background: rgba(18,22,26,.6); color: #fff; font-size: .7rem; letter-spacing: .04em;
}
.card__caption {
  display: block; margin-top: .6rem;
  font-size: .78rem; color: var(--ink-soft); letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.empty { padding: 5rem 1rem; text-align: center; color: var(--ink-faint); font-size: .88rem; line-height: 2.3; }

/* ============================================================
   拡大表示
   ============================================================ */

/* 拡大表示を開いている間は、背後のページのスクロールを止める。
 *
 * スクロールバーが残っていると、position:fixed の基準がスクロールバーを含んだ
 * 大きさになり、実際に見えている範囲より広く・高く配置される。
 * その結果、下端のダウンロードボタンが画面の外に出る（実測で33px下）。 */
html.viewer-open, html.viewer-open body { overflow: hidden; }

.viewer {
  position: fixed; inset: 0; z-index: 50;
  /* ブラウザの上下バーを除いた実際の高さ。iPhone で下端のボタンが隠れないように */
  height: 100vh;
  height: 100dvh;
  display: none;
  /* 1列だと明示する。auto のままだと列幅が「一番長い中身」に合わせて広がり、
   * 画面より広いレイアウトが組まれて、中央寄せの中身が画面外へ逃げる。 */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  /* 背後のページを透かさない。わずかでも透けると、下の見出しや
   * 言語切り替えの文字が写真に重なって見え、汚れのように見える */
  background: #0b0d0f;
  touch-action: pan-y;
}
.viewer.is-open { display: grid; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; color: #e9e5de; }
.viewer__title { font-size: .82rem; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__close { background: none; border: 0; color: #e9e5de; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .5rem; }
/* 中身の配置に flex を使い、min-height:0 を添える。
 *
 * grid のままだと、中の max-height:100% が効かない（枠の高さが
 * 中身に依存すると見なされ、パーセントが解決されない）。実測でも
 * 縦1080x1920 の動画が 1248x2219 に膨らみ、658px の枠を突き抜けた。
 * flex なら枠の高さが確定として扱われ、パーセントが素直に効く。 */
.viewer__stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  padding: 0 3.5rem; overflow: hidden;
}
/* 縦の動画・横の動画のどちらも枠に収める。
 * 幅を固定すると（width:min(100%,1200px) など）、縦の動画が横幅いっぱいに
 * 引き伸ばされて上下が切れる。auto と max- の組み合わせが正しい。 */
.viewer__stage img, .viewer__stage video {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
}
.viewer__stage video { background: #000; }

/* 再生できない形式だったときの案内（HEVC を Chrome で開いた場合など） */
.viewer__unplayable {
  max-width: 26em; padding: 1.6rem; text-align: center;
  color: #ece8e1; font-size: .88rem; line-height: 2.1;
  border: 1px solid rgba(236,232,225,.25); border-radius: var(--radius);
}
.viewer__unplayable strong { display: block; font-family: var(--serif); font-size: 1rem; margin-bottom: .6rem; }
.viewer__actions { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem 1rem 1.8rem; flex-wrap: wrap; }
.viewer__actions .btn { background: #ece8e1; color: #1b2126; border-color: #ece8e1; }
.viewer__actions .btn--ghost { background: transparent; color: #ece8e1; border-color: rgba(236,232,225,.35); }
.viewer__hint { color: rgba(236,232,225,.55); font-size: .74rem; width: 100%; text-align: center; letter-spacing: .06em; }
.viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; padding: 0;
  border: 0; border-radius: 50%;
  /* 写真の上に重なるので、明るい写真でも消えないよう薄い下地を敷く */
  background: rgba(12,14,16,.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #ece8e1; font-size: 1.5rem; line-height: 1; cursor: pointer;
  opacity: .7; transition: opacity .2s var(--ease);
}
.viewer__nav:hover { opacity: 1; }
.viewer__nav--prev { left: .5rem; }
.viewer__nav--next { right: .5rem; }

@media (max-width: 560px) {
  .viewer__bar     { padding: .8rem .9rem; }
  .viewer__stage   { padding: 0 .5rem; }
  .viewer__nav     { width: 2.1rem; height: 2.1rem; font-size: 1.25rem; opacity: .6; }
  .viewer__actions { gap: .6rem; padding: .9rem .8rem 1rem; }
  .viewer__actions .btn { padding: .7rem 1rem; font-size: .84rem; }
  /* iPhone の下端のバーに操作ボタンが隠れないよう、その分だけ余白を足す */
  .viewer__actions { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   管理画面
   ============================================================ */

.admin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.5rem;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.admin-bar__home { font-family: var(--serif); letter-spacing: .12em; font-size: .9rem; color: var(--ink); }
.admin-bar nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.admin-bar nav a { font-size: .8rem; color: var(--ink-soft); }

.panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 1.7rem; margin-bottom: 1.5rem;
}
.panel h2 { margin-top: 0; }

/* 一覧から「削除」で飛んできたとき、どこに着いたのかが一目で分かるようにする */
.panel:target {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent);
  scroll-margin-top: 5rem;
}

.password-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.55rem; letter-spacing: .06em;
  padding: 1.15rem 1.3rem; margin: .9rem 0;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  word-break: break-all;
}

.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stack { display: grid; gap: 1.1rem; }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-top: 1.3rem; }

table.list { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.list th, table.list td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list th { font-weight: 400; color: var(--ink-faint); font-size: .76rem; letter-spacing: .08em; }
table.list td.num { text-align: right; white-space: nowrap; color: var(--ink-soft); }
table.list img.mini { width: 54px; height: 40px; object-fit: cover; border-radius: 2px; display: block; }

/* ---- 登録済み一覧（カード） ----
 * table だと列数が多く、スマホの幅では説明欄が文字の入らない細さまで
 * 押し縮められていた。カードにして、狭い画面では自然に縦積みにする。 */

.media-list { display: flex; flex-direction: column; gap: 1px; background: var(--line);
             border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.media-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: var(--paper);
}
.media-row__thumb {
  width: 64px; height: 48px; border-radius: 2px; overflow: hidden;
  background: var(--paper-3); display: grid; place-items: center;
}
.media-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.media-row__main { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.media-row__filename {
  margin: 0; font-size: .9rem; word-break: break-word; overflow-wrap: anywhere;
}
.media-row__meta { margin: 0; color: var(--ink-soft); font-size: .78rem; letter-spacing: .02em; }
.media-row__meta .btn { margin-left: .3rem; }

.media-row__fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem;
  margin-top: .3rem;
}
.media-row__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.media-row__field-label { font-size: .7rem; letter-spacing: .04em; color: var(--ink-faint); }
.media-row__field input {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: .55rem .65rem; font-size: .88rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.media-row__field input:focus {
  outline: none; border-color: var(--sea-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sea) 18%, transparent);
}
.media-row__save {
  grid-column: 1 / -1; min-height: 1.1em;
  font-size: .74rem; letter-spacing: .03em; color: var(--ink-faint);
}
.media-row__save.is-ok    { color: var(--sea); }
.media-row__save.is-error { color: var(--danger); }

/* ご家族以外にも見せるかの切り替え */
.media-row__share {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-soft); cursor: pointer;
}
.media-row__share input { margin: .25rem 0 0; flex: 0 0 auto; }
.media-row__share input:disabled + span { opacity: .55; cursor: default; }
.media-row__share-on {
  display: inline-block; margin-left: .4rem; padding: .08rem .45rem;
  font-size: .7rem; letter-spacing: .04em;
  color: var(--paper); background: var(--sea); border-radius: 2px;
}

.media-row__actions { display: flex; align-items: flex-start; }

@media (max-width: 620px) {
  .media-row { grid-template-columns: 1fr; }
  .media-row__thumb { width: 100%; height: 140px; }
  .media-row__fields { grid-template-columns: 1fr; }
  .media-row__actions { justify-content: flex-end; }
}

/* ============================================================
   アップローダ
   ============================================================ */

.dropzone {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 2.6rem 1.5rem; text-align: center; color: var(--ink-soft);
  background: var(--paper-2); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.dropzone.is-hot { border-color: var(--sea); color: var(--sea); }

.queue { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.queue li { border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; }
.queue__head { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.queue__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue__state { color: var(--ink-soft); font-size: .78rem; white-space: nowrap; }
.queue__state.is-error { color: var(--danger); }
.queue__state.is-done  { color: var(--sea); }
.bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: .65rem; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--sea); transition: width .25s var(--ease); }