/* =========================================================================
しましま旅行記 — 見た目の土台（サイト共通）
ふわっと浮く白いカードと、すこし青みのある白い地。
文字は焦げ茶をやめて濃紺、差し色はやわらかいオレンジ1色で通す。
もとは「影を使わず、面（色）と細い罫線だけで組む」つくりだった。
手本にした画面が「白いカードが地から浮く」つくりだったので、そこを入れ替えた。
ただし浮きかたは3段しか持たない。増やすと、どれが手前か分からなくなる。
地（ページ） 影なし
カード・行・地図 --sh
手前にかぶせるもの（シート）--sh-l
オレンジのボタンだけ --sh-a（色のついた影）
使いかた：ページの で、そのページの CSS の「あと」に読む。
あとに置くのは、ここの :root と上書きを効かせるため。
ホーム（/）と、すべての旅のしおりが読む。しおり固有の組みかたは
/trip/trip.css が持ち、色・字・角丸・影だけをここから借りる。
========================================================================= */
:root{
/* --- 地と面：白を3段。いちばん奥が地、手前が白いカード --- */
--paper:#F4F6F8; --paper-2:#E9EEF3;
--card:#FFFFFF; --card-2:#F8FAFC; --card-3:#EFF3F7;
/* --- 文字：黒でも焦げ茶でもなく濃紺。空の青とオレンジのどちらにもなじむ --- */
--ink:#1E3A5F; --ink-2:#2F4E75; --body:#566E8C; --muted:#798DA5; --subtle:#9DAEC0;
/* --- 仕切り。濃紺をうすく引くだけ --- */
--rule:rgba(30,58,95,.08); --rule-2:rgba(30,58,95,.16);
--line:#E4EAF0; --line-2:#D3DDE6;
/* --- 差し色はオレンジ1色でまわす。役割ごとに濃さを分ける ---
--accent しるし・細い線・進み具合
--accent-s 白い字をのせるベタ面。白が読めるところまで濃くしてある
--accent-l 丸ボタンや札の、淡い地
--accent-i その淡い地の上にのせる字 */
--accent:#EE9C5A; --accent-s:#B85C24; --accent-l:#FCEADA; --accent-i:#A65318;
--gold:#C1974E; /* 見出しのしるし */
--marker:#FBE7A4; /* 文字を選んだときの地。装飾には使わない */
/* --- しおりの日別テーマ。濃色｜淡い面｜淡い面にのせる字 ---
日を見分けるためだけに使い、サイト共通の操作はオレンジのままにする。 */
--day1:#B85C24; --day1-l:#FCEADA; --day1-i:#A65318;
--day2:#366B99; --day2-l:#E4EEF7; --day2-i:#2C5B84;
--day3:#3D7965; --day3-l:#E4F0EB; --day3-i:#2F6554;
--day4:#A64F3F; --day4-l:#F8E7E3; --day4-i:#853F34;
/* --- 状態色。飾りには使わず、注意と確認済みの意味がある所だけ --- */
--danger:#D96A63; --danger-l:#FBEBE8; --danger-i:#B04138;
--success:#3F9B76; --success-l:#E4F1EB; --success-i:#227052;
/* --- 浮きかた。3段だけ --- */
--sh:0 6px 18px rgba(30,58,95,.07), 0 1px 3px rgba(30,58,95,.05);
--sh-l:0 14px 34px rgba(30,58,95,.10), 0 2px 6px rgba(30,58,95,.05);
--sh-a:0 5px 14px rgba(184,92,36,.28);
/* --- 表紙の空。写真が届くまでと、上のバーの帯に敷く。
絵のいちばん上と同じ色にしてあるので、境目が出ない --- */
--sky:#48AFF9;
/* --- 字。見出しの手書きは表紙だけに使う。全体に回すと読みにくい --- */
--disp:'Baloo 2','Zen Maru Gothic',system-ui,sans-serif;
--round:'Zen Maru Gothic','M PLUS Rounded 1c','Hiragino Maru Gothic ProN',sans-serif;
--hand:'Zen Kurenaido','Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
/* --- 角丸。カードは20px、その中に入るものは16px以下にする --- */
--r-s:12px; --r-m:16px; --r-l:20px; --r-xl:26px; --r-p:999px;
}
/* ---------- 地 ---------- */
/* iOS 26 のホーム画面 Web アプリは、ノッチ側を DOM の外へ切り離す版がある。
そのとき OS が参照する最背面だけは表紙上端の空色にし、白い帯に見せない。
実際のページ面は body の --paper のままなので、本文の見た目は変えない。 */
html{background:var(--sky)}
body{background:var(--paper)}
body{color:var(--ink)}
/* 紙の目（粒）はやめる。カードが影で浮くので、地は平らなほうが手前がはっきりする */
body::after{display:none !important}
::selection{background:var(--marker);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent-s);outline-offset:3px;border-radius:10px}
/* =========================================================
共通の部品
ここに置いたものは、theme.css を読むページ全部に効く
========================================================= */
/* カード。白い面 ＋ 影。輪郭線は持たせない（線と影の二重取りになる） */
.t-card{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh);border:0}
/* オレンジのベタのボタン。白い字をのせる唯一の面 */
.t-btn{display:inline-flex;align-items:center;gap:5px;
background:var(--accent-s);color:#FFFFFF;border-radius:var(--r-p);
padding:9px 15px 9px 17px;font-size:12.5px;font-weight:800;letter-spacing:.02em;
box-shadow:var(--sh-a);transition:transform .18s var(--ease,ease),background .18s var(--ease,ease)}
.t-btn:active{background:var(--accent-s);transform:scale(.97)}
/* =========================================================
経県値の上書き
app.css は前の色を直に書いている所がある。変数で追えないものだけ、
ここで塗りなおす。app.css より「あと」に読むので、これで足りる。
========================================================= */
/* 点数の札 */
.scorecard{background:var(--card);box-shadow:var(--sh);border-radius:var(--r-l);
padding:0;overflow:hidden}
.scorecard .big{color:var(--ink)}
.scorecard .cap{color:var(--muted);font-weight:700}
.bar{background:var(--paper-2)}
.bar i{background:var(--accent-s)}
/* 凡例。丸の輪郭は、濃紺のベタ2pxだと点が強すぎる。うすく細く */
.lg{background:var(--card);box-shadow:var(--sh)}
.lg .dot{border-width:1.5px;border-color:rgba(30,58,95,.34)}
.lg .tx i{color:var(--muted)}
.lg .n{color:var(--subtle)}
/* 地図 */
.mapbox{background:var(--card);box-shadow:var(--sh);border-radius:var(--r-l)}
#mapG path.pref{stroke:rgba(30,58,95,.5)}
#mapG path.pref.on{stroke:var(--ink)}
#mapG .inset{stroke:rgba(30,58,95,.45)}
#mapG .plabel{fill:var(--ink-2);stroke:rgba(255,255,255,.9)}
.maptools button{background:#FFFFFF;border:0;box-shadow:var(--sh);border-radius:50%;
color:var(--ink-2)}
.maptools button:active{background:var(--paper-2)}
.maphint{background:rgba(255,255,255,.92);color:var(--muted);box-shadow:var(--sh)}
/* 一覧。地域の入口と、県の行 */
.rows{background:var(--card)}
.compact .reg{border:0 !important;box-shadow:var(--sh);background:var(--card)}
.compact .reg.open{box-shadow:var(--sh),0 0 0 2px var(--accent-l)}
.reg-toggle:active{background:var(--card-2)}
.reg-count{background:var(--paper-2);color:var(--muted)}
.reg.has-data .reg-count{background:var(--accent-l);color:var(--accent-i)}
.reg-chev{color:var(--muted)}
.row{border-top-color:var(--line)}
.row:active{background:var(--card-2)}
.row .dot{border-width:1.5px;border-color:rgba(30,58,95,.34)}
.row .lvn{color:var(--muted)}
/* 右端の「>」は、淡いオレンジの丸にのせる。押せる所だと一目で分かる。
svg そのものに地と丸みを付けているので、囲む箱を足さなくていい */
.row .chev{width:26px;height:26px;flex:0 0 26px;padding:6px;border-radius:50%;
background:var(--accent-l);fill:var(--accent-i)}
/* 県のシート */
.scrim{background:rgba(30,58,95,.44)}
.sheet{background:var(--card);box-shadow:var(--sh-l)}
.grab{background:var(--line-2)}
.sheet-h .sub{color:var(--muted)}
.xbtn{background:var(--paper-2);color:var(--ink-2)}
.xbtn:active{background:var(--line)}
.pick>.pick-h .now{color:var(--body)}
.lvls button{border-width:1.5px;border-color:var(--line-2);border-radius:var(--r-s)}
.lvls button .d{border-width:1.5px;border-color:rgba(30,58,95,.34)}
.lvls button .t{color:var(--muted)}
.lvls button[aria-pressed=true]{border-color:var(--accent-s);background:var(--accent-l)}
.lvls button[aria-pressed=true] .t{color:var(--accent-i)}
.fld>label{color:var(--muted)}
textarea.memo{border-width:1.5px;border-color:var(--line-2);border-radius:var(--r-m)}
textarea.memo::placeholder{color:var(--subtle)}
textarea.memo:focus{border-color:var(--accent-s)}
.chip{border-width:1.5px;border-color:var(--line-2)}
.chip button{background:var(--paper-2);color:var(--muted)}
.addrow input{border-width:1.5px;border-color:var(--line-2)}
.addrow input:focus{border-color:var(--accent-s)}
.addrow button{background:var(--accent-s);color:#FFFFFF;box-shadow:var(--sh-a)}
.addrow button:active{background:var(--accent-s);transform:scale(.97)}
/* 通信の帯と、起動中 */
.netbar{background:var(--ink);color:#FFFFFF}
.boot{background:var(--paper);color:var(--muted)}
.boot .sp{border-color:var(--line-2);border-top-color:var(--accent-s)}
/* =========================================================
あいことばの門（/gate.js）
門の CSS は gate.js が持っているが、色は var() で借りているので
ほとんど自動で付いてくる。太い輪郭だけ、ここで細くする。
========================================================= */
.sitegate .mark svg{color:var(--accent-s)}
.sitegate .pinbox i{border:0;box-shadow:var(--sh);border-radius:var(--r-m);
font-family:var(--disp)}
.sitegate .pinbox i.f{box-shadow:var(--sh),0 0 0 2px var(--accent-s)}
.sitegate .pinbox.err i{box-shadow:var(--sh),0 0 0 2px #D96A63}
.sitegate .tap{color:var(--muted)}
@media (prefers-reduced-motion:reduce){
.t-btn{transition:none}
}