/* ==========================================================
   写真館toiro 共通デザイン（theme.css）
   ・全ページ（管理画面／アルバム／選定／ガイド）から読み込まれます
   ・色や雰囲気を変えたいときは、まず下の「色の設定」だけを書き換えてください
   ・各ページの中のCSSより後に読み込まれるので、ここが優先されます
   ========================================================== */

/* ── 色の設定（★修正箇所：ここを変えると全ページの色が変わります） ── */
:root{
  --toi-gold:#DDA94E;        /* メインの金色（ボタン・バッジ） */
  --toi-gold-deep:#B98530;   /* 濃い金色（リンク・押したとき） */
  --toi-cream:#FDF8EA;       /* 生成り（背景） */
  --toi-stripe:#F6ECD6;      /* 背景のしま模様の色 */
  --toi-ink:#4D4237;         /* 文字（あたたかい茶色） */
  --toi-muted:#8C7E6E;       /* 薄い文字 */
  --toi-line:rgba(160,120,50,.22); /* 線 */
  --toi-font:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif; /* ★修正箇所：文字の種類（しっかりしたゴシック） */

  /* 管理画面（home.html）の変数 */
  --bg:var(--toi-cream);--sur:#fff;--bd:rgba(160,120,50,.16);--bdm:var(--toi-line);
  --tx:var(--toi-ink);--mt:var(--toi-muted);--r:12px;--rl:20px;
  /* アルバム・選定ページの変数 */
  --text:var(--toi-ink);--muted:var(--toi-muted);--border:rgba(160,120,50,.16);--border-md:var(--toi-line);
  --accent:var(--toi-gold);
  /* 保存方法ガイドの変数 */
  --yellow:var(--toi-gold);--yellow-soft:#FBF0D8;--yellow-pale:var(--toi-cream);--ink:var(--toi-ink);--gray:var(--toi-muted);--line:#EADFC8;--pale:var(--toi-cream);
}

/* ── 文字 ── */
body{font-family:var(--toi-font);letter-spacing:.02em;font-weight:400;color:var(--toi-ink);}
button,input,select,textarea{font-family:inherit;letter-spacing:.02em;}
.logo{font-weight:500;letter-spacing:.08em;}

/* ── 背景：生成りに、うすいしま模様（管理画面・選定ページ） ── */
body.toi-home,body.toi-select{
  background:repeating-linear-gradient(135deg,var(--toi-cream) 0 16px,var(--toi-stripe) 16px 32px) fixed;
}
body.toi-album{background:var(--toi-cream);}

/* ── ヘッダー ── */
body.toi-home .hd,body.toi-select .hd,.hd.solid{border-bottom:1px solid var(--toi-line);}
/* ※アルバムページの先頭ヘッダーは、写真の上に重なる透明のままにします */

/* ── ボタン：まるいカプセル型 ── */
.btn{border-radius:999px;letter-spacing:.04em;font-weight:500;}
.btn-p,.btn-a{background:var(--toi-gold);color:#fff;border:none;}
.btn-p:hover,.btn-a:hover{background:var(--toi-gold-deep);opacity:1;}
.btn-p.needsave{background:#b0691c;}
.btn-s{background:#fff;color:var(--toi-ink);border:1px solid var(--toi-line);}
.btn-s:hover{background:var(--toi-cream);border-color:var(--toi-gold);}
.btn-d{border-radius:999px;}
.ft{border-radius:999px;border-color:var(--toi-gold);color:var(--toi-gold-deep);background:#fff;padding:6px 16px;letter-spacing:.08em;}
.ft.on{background:var(--toi-gold);border-color:var(--toi-gold);color:#fff;}
.bb{background:var(--toi-ink);}

/* ── カード・枠：白＋金のうすい線＋大きめの角丸 ── */
.card,.lc,.name-card{border:1px solid var(--toi-line);border-radius:20px;background:#fff;}
.card:hover{box-shadow:0 6px 22px rgba(160,120,50,.14);}
.card.sel-c{outline:2.5px solid var(--toi-gold);}
.card.sel-c .ck{background:var(--toi-gold);border-color:var(--toi-gold);}
.ub{border-radius:12px;background:var(--toi-cream);}
.cvt-sel,.fd input,input[type=text],input[type=number],input[type=password],input[type=date],select{border-radius:10px;}
.fd input:focus,input:focus,select:focus{border-color:var(--toi-gold);outline:none;box-shadow:0 0 0 3px rgba(221,169,78,.18);}
.mo>div,.modal,.popup{border-radius:20px;}
.mh{font-weight:700;letter-spacing:.08em;}
.ph-t{font-weight:700;letter-spacing:.1em;}

/* ── 状態バッジ（公開中など）はそのまま白地＋点。角だけ合わせる ── */
.sb,.spill{border-radius:999px;}

/* ── 選定ページ ── */
.banner{border-radius:0;}
.banner-warn{background:#FFF6E0;color:#9a6a1a;border-bottom:1px solid #F3DDAA;}
.banner-note{background:#fff;color:var(--toi-ink);border-bottom:1px solid var(--toi-line);}
.banner-note b{color:var(--toi-ink);}
.flag-btn{border-radius:14px;border-color:var(--toi-line);}
.flag-btn.active{border-color:var(--toi-gold);background:#FFF8E8;}
.flag-btn.active .flag-btn-badge{background:var(--toi-gold);border-color:var(--toi-gold);}
.submit-bar{border-top:1px solid var(--toi-line);}
.gi{border-radius:12px;overflow:hidden;}
.gi-flag{background:rgba(255,255,255,.96);color:var(--toi-ink);border:1.5px solid var(--toi-gold);}
.gi-flag small{color:var(--toi-muted);}
#textBox .name-card{box-shadow:0 2px 10px rgba(160,120,50,.08);}
.name-card-title{letter-spacing:.1em;}

/* ── アルバムページ ── */
.dl-menu{border-radius:16px;border:1px solid var(--toi-line);}
.dl-item small{color:var(--toi-muted);}
.sel-bar{background:var(--toi-ink);}

/* ── 保存方法ガイド ── */
.method,.tipbox{border-radius:18px;}
a{color:var(--toi-gold-deep);}