/* パスポート(旅券)風テーマ
 * 生成りの紙・濃紺のインク・朱色の押印。明るい背景で屋外の日差しでも読みやすい。
 * index.html の基本スタイルの後に読み込み、色・形・書体だけを上書きする(構造は変えない)。
 * 文字と背景のコントラストは WCAG AA(本文4.5:1以上)を満たす組み合わせにしている。 */
:root{
  --bg:#ece4d1;          /* 紙(台紙) */
  --surface:#fbf8ef;     /* 紙(ページ) */
  --surface2:#f1e9d6;    /* 紙(一段濃い) */
  --card:#fbf8ef;
  --text:#1c2740;        /* 濃紺のインク  対#fbf8ef 14:1 */
  --muted:#525a6b;       /* 補足  対#fbf8ef 6.6:1 */
  --line:#cbbd9c;        /* 罫線 */
  --accent:#1f3a6b;      /* 表紙の紺 */
  --accent2:#a8321f;     /* 朱色(押印)  対#fbf8ef 6.0:1 */
  --ok:#2c6e48; --ng:#a3271f; --warn:#8a5a12; /* 黄土色: 朱色(--ng)と見分けがつく注意色 */
  --gold:#b08d4a;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
}
html,body{background:var(--bg);color:var(--text)}

/* ヘッダー = 旅券の表紙 */
header{background:var(--accent);border-bottom:3px double var(--gold);color:#f4ead2}
header h1{font-family:var(--mincho);font-weight:600;letter-spacing:.12em;font-size:17px}
header .sub{color:#d9cfb4}
.badge-unofficial{background:transparent;color:#f4ead2;border:1px solid #d9cfb4;border-radius:3px;letter-spacing:.08em}
header .acct-btn,header .acct-btn.secondary{background:transparent;color:#f4ead2;border:1px solid #d9cfb4}

/* カード = ページ。角は小さく、影は使わず罫線で区切る */
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 0 rgba(28,39,64,.06)}
.card > strong:first-child, .card > .row > strong{font-family:var(--mincho);font-weight:600;letter-spacing:.06em;font-size:16px}
.seclabel{font-family:var(--mincho);font-weight:600;letter-spacing:.12em;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:3px}
.hint{color:var(--muted)}
a{color:var(--accent);text-underline-offset:2px}

/* ボタン: 紺の判子色。丸いピルは使わない */
button{background:var(--accent);color:#fff;border-radius:4px;font-weight:600}
button.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.checkin{background:var(--accent2);color:#fff}
.checkin:disabled{background:transparent;color:var(--muted);border:1px solid var(--line);opacity:1}
input,.filters select{background:#fffdf7;color:var(--text);border:1px solid var(--line);border-radius:3px}
input:focus,.filters select:focus{outline:2px solid var(--accent);outline-offset:1px}
.chip{background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--text)}
.navbtn{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:3px}

/* タブ = 旅券の見出し(下線で選択中を示す) */
#tabs{border-bottom:1px solid var(--line);gap:0 !important}
.tab{border-radius:0;background:transparent;border:0;border-bottom:3px solid transparent;font-family:var(--mincho);font-weight:600;letter-spacing:.04em}
.tab-on{background:transparent;color:var(--accent);border-bottom-color:var(--accent2)}
.tab-off{background:transparent;color:var(--muted);border:0;border-bottom:3px solid transparent}
.plan{border-radius:3px;background:transparent;border:1px solid var(--line);color:var(--text)}
.plan.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 進捗 */
.big{font-family:var(--mincho);font-weight:600}
.progress-wrap{border-radius:2px;background:var(--surface2)}
.progress-bar{background:var(--accent2)}
.pct{color:var(--accent2)}
.stat{background:transparent;border:0;border-left:3px solid var(--accent2);border-radius:0}
.stat .v{font-family:var(--mincho);font-weight:600}

/* 一覧の行 */
.idx{background:transparent;border:1px solid var(--accent);color:var(--accent);border-radius:2px;font-family:var(--mincho)}
.spot{border-top:1px dashed var(--line)}

/* 次の目的地へナビ: グラデーションをやめて紺の帯に */
.nextnav-btn{background:var(--accent);border-radius:4px;border-bottom:3px solid var(--gold)}
.nextnav-btn .t{font-family:var(--mincho);font-weight:600;letter-spacing:.06em}
.nextbar,.toast{background:var(--surface);color:var(--text);border:1px solid var(--accent);border-radius:4px;box-shadow:0 4px 16px rgba(28,39,64,.18)}

/* スタンプ帳 = 査証欄。押印は朱肉の色で少し傾ける */
.stamp{background:#fffdf7;border:1px solid var(--line);border-radius:2px}
.stamp.got{background:#fbf1ea;border-color:#d9a596}
.stamp .city{font-family:var(--mincho);color:var(--muted)}
.stamp.got .city{color:var(--text)}
.stamp .seal{font-family:var(--mincho);font-weight:700}
.stamp .seal.on{border:2px double var(--accent2);color:var(--accent2);transform:rotate(-12deg);
  box-shadow:inset 0 0 0 2px rgba(168,50,31,.08)}
.stamp .seal.off{border:1px dashed var(--line);color:#b6a98a}
.stamp .got-date,.stamp .dots{color:var(--accent2)}
.book-detail{background:var(--surface);border-radius:2px}

/* ランキング */
.rank-me{background:var(--surface2);border:1px solid var(--line);border-radius:2px}
.rank-me .big{font-family:var(--mincho)}
.rank-row{border-top:1px dashed var(--line)}
.rank-row.me{background:#fbf1ea;border-radius:0}
.rank-row .no{font-family:var(--mincho)}

/* バッジ */
.alt-badge,.tag2.alt{background:transparent;color:var(--accent2);border:1px solid var(--accent2);border-radius:2px}
.tag2.add{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:2px}
.tag2.warn{background:transparent;color:#8a5a12;border:1px solid #c79a4a;border-radius:2px}

/* 地図 */
#map{border-radius:2px;border:1px solid var(--line)}
.maplibregl-popup-content{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:3px}
.maplibregl-popup-tip{border-top-color:var(--surface)!important;border-bottom-color:var(--surface)!important}
.mk.remain{background:var(--accent)} .mk.done{background:var(--accent2)} .mk.dim{background:#9a8c70}
/* 地図コントロール: 全体の button 指定(白文字)が効かないよう紺で固定 */
.maplibregl-ctrl-group{background:#fbf8f0;border:1px solid var(--line);box-shadow:0 1px 3px rgba(28,39,64,.15)}
.maplibregl-ctrl-group button,.maplibregl-ctrl-group button.map-icon-btn{background-color:transparent;color:var(--accent);border-radius:0;display:flex;align-items:center;justify-content:center}
.maplibregl-ctrl-group button:hover{background-color:var(--surface2)}

/* 押印演出 */
.celebrate{background:rgba(28,39,64,.35)}
.celebrate .seal-big{background:#fbf8ef;border:6px double var(--accent2);color:var(--accent2);font-family:var(--mincho)}

/* アカウントメニュー */
.acct-menu{background:var(--surface);border-radius:4px;box-shadow:0 6px 20px rgba(28,39,64,.2)}
.acct-menu button{background:transparent;color:var(--text)}
.acct-menu button:hover{background:var(--surface2)}

/* 管理画面(運営向けは引き続き区別する) */
.admin-panel{border-color:var(--accent);border-radius:4px}
.admin-panel .admin-head,.sheet-head{background:var(--surface2);color:var(--text)}
.admin-tabs button{border-radius:3px;background:transparent;color:var(--muted)}
.admin-tabs button[aria-selected="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.sheet-box{border-color:var(--accent);border-radius:6px 6px 0 0}
details.op summary{background:transparent;border-radius:3px}

/* 管理モード: 台紙を少し濃い紙色にして一般画面と区別する(以前の暗い背景だと文字が読めないため上書き) */
body.admin-mode{--bg:#e2d8bf}
.admin-bar .tag{background:var(--accent2);color:#fff}
/* 編集できない欄(設置場所の市町村名・エリア等)は薄く表示 */
input:disabled{background:var(--surface2);color:var(--muted);cursor:not-allowed}