/* わたしの昆虫図鑑（有料版）だけの見た目。
   土台は今のアプリから持ち込んだ style.css と themes.css（背景セット）。ここはその上に重ねる */
:root { --soft: var(--ink-soft); --bg: var(--drawer); --ok: #2E6B2E; }
.dev-band { position: relative; z-index: 30; background: #C0392B; color: #fff; text-align: center; font-weight: 700; padding: 4px; letter-spacing: .1em; font-size: 13px; }

/* 登録・ログイン・設定・記録・観察日記の画面（今のアプリにない画面）：大きく押しやすいボタン */
:is(.auth-page, #settingsPage, #view, #viewRec) .btn {
  display: block; width: 100%; margin: 10px 0; padding: 13px 16px; font: inherit; font-size: 16px; font-weight: 700;
  border: 1.5px solid var(--moss); border-radius: 10px; background: var(--paper); color: var(--moss); cursor: pointer; text-decoration: none; text-align: center; }
:is(.auth-page, #settingsPage, #view, #viewRec) .btn.primary { background: var(--moss); color: #fff; }
:is(.auth-page, #settingsPage, #view, #viewRec) .btn.ghost { border-color: var(--line); color: var(--ink); font-weight: 500; text-decoration: none; }
:is(.auth-page, #settingsPage, #view, #viewRec) .btn.small { padding: 9px 10px; font-size: 14px; margin: 0; }
:is(.auth-page, #settingsPage, #view, #viewRec) .btn.danger { color: var(--pin); border-color: var(--pin); }
:is(.auth-page, #settingsPage) .btn.google { background: #fff; color: #1F1F1F; border-color: #747775; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; font-size: 17px; }
.btn.google .g { font-family: Arial, sans-serif; font-weight: 700; color: #4285F4; font-size: 20px; }
.btn:disabled { opacity: .55; cursor: default; }

/* 登録・ログインの画面は、表紙と同じ背景の上に白い紙を敷いて読みやすく */
.auth-page .wrap.narrow { max-width: 440px; }
.auth-page .wrap > * { position: relative; }
.auth-page .wrap { background: var(--sheet, rgba(255,255,255,.93)); border-radius: 14px; padding: 18px 18px 22px; box-shadow: 0 4px 18px rgba(0,0,0,.12); color: var(--ink); }
html[data-theme="furuhon"] .auth-page .wrap { background: rgba(251, 246, 230, .96); }
.title { font-family: var(--mincho); font-size: 30px; margin: 12px 0 8px; text-align: center; letter-spacing: .06em; }
.title2 { font-family: var(--mincho); font-size: 22px; margin: 12px 0 16px; }
.auth-page .lead { text-align: center; margin: 0 0 28px; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.auth-page .sub { text-align: center; font-size: 13px; margin: 6px 0 0; }
.hint { font-size: 13px; margin: 4px 0 12px; }
.or { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; color: var(--ink-soft); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-page .back { background: none; border: 1.5px solid var(--moss); border-radius: 999px; color: var(--moss); padding: 4px 14px; font-size: 14px; cursor: pointer; }
.link { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--moss); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }
:is(.auth-page, #settingsPage) form label { display: block; margin: 0 0 14px; font-size: 14px; font-weight: 500; }
:is(.auth-page, #settingsPage) :is(input[type=email], input[type=password], input[type=text], select) {
  display: block; width: 100%; margin-top: 4px; padding: 11px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 2px; margin: 0 0 16px; background: var(--paper); }
legend { font-size: 13px; color: var(--ink-soft); padding: 0 4px; background: var(--paper); border-radius: 4px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--moss); }
a { color: var(--moss); }
.msg { min-height: 1.5em; margin: 8px 0 0; font-size: 14px; }
.msg.err { color: var(--pin); }
.msg.ok { color: var(--ok); }
.zno { text-align: center; margin: 24px 0 0; font-family: var(--mincho); color: var(--ink-soft); letter-spacing: .1em; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 24px 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.info dt { color: var(--ink-soft); }
.info dd { margin: 0; }
/* 設定・記録・観察日記の入力欄のまわりを紙にして、背景の絵の上でも読みやすく */
#settingsPage form { background: var(--sheet, rgba(255,255,255,.93)); border-radius: 12px; padding: 14px 14px 6px; }

/* 表紙の図鑑番号（④-2）：「昆虫採集記録」の横に小さく */
.cover-no { margin-left: .8em; letter-spacing: .08em; font-size: .9em; }
.cover-no:empty { display: none; }
.closed-msg { font-family: var(--mincho); margin: 22px 0 0; }

/* ===== 記録（③-2） ===== */
:is(.auth-page, #settingsPage, #pubDlg) .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row > label, .row > .btn { margin-bottom: 0; }
:is(.auth-page, #settingsPage) form .row { margin-bottom: 14px; }
.fsub { font-size: 13px; color: var(--soft); margin: 0 0 6px; }
/* 種類を書いていない入力欄（和名など）も同じ見た目に */
.btn.small { padding: 9px 10px; font-size: 14px; margin: 0; }
.btn.danger { color: var(--pin); border-color: var(--pin); }
.photo-edit { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.photo-edit .p { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: var(--line); }
.photo-edit .p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-edit .p .saved { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 11px; color: var(--soft); text-align: center; padding: 4px; }
.photo-edit .x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.photo-edit .x.star { right: auto; left: 4px; font-size: 13px; }
.photo-edit .cover { position: absolute; left: 4px; bottom: 4px; font-size: 11px; background: var(--moss); color: #fff; padding: 1px 6px; border-radius: 4px; }
.photo-edit .addphoto { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border: 1.5px dashed var(--moss); border-radius: 8px; color: var(--moss); font-size: 14px; font-weight: 700; cursor: pointer; margin: 0; }
.photo-edit .addphoto input { display: none; }
.loc-box .now { margin: 2px 0 10px; font-size: 14px; }
.loc-box .link { margin: 8px 0 0; }
.count { text-align: center; font-size: 14px; margin: 4px 0 8px; }
#view .rec-list { display: grid; gap: 8px; margin: 8px 0 18px; }
#view .rec-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; font: inherit; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
#view .rec-item strong { display: block; font-size: 16px; }
#view .rec-item .th { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--line); display: block; }
#view .rec-item .t { flex: 1; min-width: 0; }
#view .rec-item span { font-size: 13px; color: var(--soft); }
#view .rec-item .go { font-size: 20px; color: var(--soft); }
/* 地図（今のアプリの部品） */
.map { position: relative; height: 300px; background: #D2DBD8; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.map svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.map .land path { fill: var(--paper); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .pts circle { fill: var(--pin); stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.map .pts circle.keeping { fill: var(--moss); }
.map .pts circle.sel { stroke: var(--ink); stroke-width: 3; }
.map .mk circle { fill: var(--pin); stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.map-ctl { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; }
.map-ctl button { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; min-width: 36px; height: 32px; cursor: pointer; font-size: 13px; color: var(--ink); }
.map .tiles { pointer-events: none; }
.map .map-attr { display: none; position: absolute; right: 4px; bottom: 4px; font-size: 10px; line-height: 1.3; padding: 1px 5px; background: rgba(255,255,255,.85); color: #333; border-radius: 3px; text-decoration: none; }
.map.tiled .map-attr { display: block; }

/* 観察日記（③-3）：見た目は今のアプリの style.css・themes.css のまま */

/* ===== 公開（③-4） ===== */
.pub-box { margin: 20px 0 0; }
.pub-state { margin: 2px 0 8px; font-weight: 700; }
.pub-box a.btn { text-align: center; text-decoration: none; }
.pub-list { padding-left: 1.2em; font-size: 14px; }
.small-note { font-size: 12px; margin-top: 20px; }
.v-photos { display: grid; gap: 8px; margin: 12px 0; }
.v-photos img { width: 100%; border-radius: 10px; background: var(--line); min-height: 120px; object-fit: cover; }
.v-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.v-dl dt { color: var(--soft); }
.v-dl dd { margin: 0; white-space: pre-wrap; }
.v-head { font-family: "Shippori Mincho", serif; font-size: 24px; margin: 12px 0 0; }
.v-sci { font-style: italic; color: var(--soft); margin: 0 0 4px; }
#vTimeline .log-acts { display: none; }

/* ===== 図鑑の一覧（④-3） ===== */
#zukanPage .filters { grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); }
@media (max-width: 600px) { #zukanPage .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.index.tabs button[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.index.tabs button[aria-current="true"] svg, .index.tabs button[aria-current="true"] small { color: var(--paper); }
.sp-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; padding: 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.sp-filter .btn { padding: 4px 10px; }
.more-btn { display: block; margin: 8px auto 24px; padding: 12px 28px; }

/* ===== 記録の詳細・種のページ（④-4） ===== */
.map.detail-map { height: 240px; }
#detailPage .head-acts .btn.danger { color: var(--pin); border-color: var(--pin); }
/* 観察日記の右下のボタンは、大きいボタンの見た目にしない（今のアプリと同じ丸いボタン） */

/* 記録の画面（④-4）：今のアプリの .form。観察日記を開くボタンと削除のボタンだけ有料版で足したもの */
#recordPage .to-log-form { justify-self: start; }
#recordPage #delBtn { justify-self: center; color: var(--pin); }
#pubDlg .btn { display: block; width: 100%; margin: 10px 0; padding: 12px; }
#pubDlg .btn.primary { background: var(--moss); color: #fff; border-color: var(--moss); }

/* 会員の種類（⑤-1） */
.plan-box { margin: 20px 0 0; }
.cover-locked { margin: 12px 0 0; padding: 10px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }

/* データの取り出し（⑥） */
.ex-box { margin: 20px 0 0; }
.ex-box .row { margin: 4px 0 10px; }
.ex-warn { color: var(--pin); }

/* reCAPTCHA の印を出さない代わりの一文（Google の決まり） */
.recaptcha-note { font-size: 11px; line-height: 1.6; margin-top: 18px; }
.recaptcha-note a { color: inherit; }

/* 節約モード（公開の図鑑がたくさん見られた日） */
.view-notice { position: sticky; top: 0; z-index: 50; background: #fff8e6; color: #5a4300; border-bottom: 1px solid #ecd9a6; padding: 8px 16px; font-size: 13px; line-height: 1.6; text-align: center; }
.view-notice a { color: inherit; font-weight: 700; margin-left: 4px; }
img.ph-fail { visibility: hidden; }

/* 自動チェックで見えなくした写真（本人の画面の札） */
.ph-has-badge { position: relative; }
.ph-hidden-badge { position: absolute; left: 4px; bottom: 4px; z-index: 2; background: rgba(160, 52, 40, .92); color: #fff; font-size: 11px; line-height: 1.5; padding: 1px 7px; border-radius: 99px; pointer-events: none; white-space: nowrap; }

/* 報告する（見る人の画面） */
.report-btn { position: fixed; right: 12px; bottom: 12px; z-index: 40; background: rgba(255,255,255,.92); border: 1px solid #ccc; border-radius: 99px; padding: 6px 12px; font-size: 12px; color: #555; cursor: pointer; }
.report-reasons { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
#reportDlg textarea { width: 100%; box-sizing: border-box; font: inherit; margin-top: 4px; }

/* 月で見る：章の中の年の見出し（⑧） */
.family.year-sub { font-family: var(--mincho); font-weight: 600; letter-spacing: .04em; }
.family.year-sub small { font-family: inherit; font-weight: 400; font-size: .75em; margin-left: .4em; color: var(--ink-soft); }

/* 古本：ログインなどの画面は明るい紙の上なので、革の背景用のクリーム色の文字を墨色に戻す（⑧ 11-03。確認番号の画面のお知らせが読めなかった） */
html[data-theme="furuhon"] .auth-page .wrap :is(.msg, .cover-kicker, .login-form label) { color: var(--ink-soft); }
html[data-theme="furuhon"] .auth-page .wrap .btn.ghost { color: var(--ink); }
html[data-theme="furuhon"] .auth-page .wrap .msg.err { color: var(--pin); }
html[data-theme="furuhon"] .auth-page .wrap .msg.ok { color: var(--ok); }

/* メールのリンクを開いたときの画面（auth-action.html。⑧ 11-03） */
.act-page { min-height: 100vh; display: flex; align-items: flex-start; padding-top: 6vh; }
.act-page .wrap { width: 100%; }
.act-brand { font-family: var(--mincho); font-weight: 700; font-size: 20px; letter-spacing: .08em; text-align: center; margin: 4px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--moss); }
.act-page .center { text-align: center; }
.act-mark { width: 64px; height: 64px; margin: 8px auto 4px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 700; background: var(--field, #eee); color: var(--ink-soft); font-family: var(--mincho); }
.act-mark.ok { background: var(--moss); color: #fff; }
.act-list { padding-left: 1.2em; margin: 8px 0 18px; line-height: 1.8; }
.act-list li { margin-bottom: 6px; }
.act-page a.btn { display: flex; justify-content: center; text-decoration: none; margin-top: 14px; }
.act-foot { font-size: 12px; margin-top: 22px; text-align: center; }
html[data-theme="furuhon"] .act-page .wrap :is(.act-brand) { color: var(--moss, #3f5a2a); }

/* 観察日記：右下の「＋ 観察日記を書く」に、いちばん下の日記やボタンが隠れないように下をあける（⑧ 11-05） */
#logPage { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* ===================== 古本：中のページに重みを足す（⑧ 11-05 決定。案1＋2＋3＋4。「背景セット決定メモ.md」） ===================== */
html[data-theme="furuhon"] { --dark-halo: 0 0 2px #08100A, 0 0 4px #08100A, 0 0 8px rgba(8, 16, 10, .95), 0 0 14px rgba(8, 16, 10, .9), 0 0 24px rgba(8, 16, 10, .8); }   /* 革の上の明るい文字の後ろに、暗いぼかし（葉に重なっても読めるように。11-05 強めた） */
/* 案1（11-05 に変更）：背景は表紙と同じ深い緑の革＋すき間に葉。中身は明るい紙の台紙にのせる（読みやすさのため） */
html[data-theme="furuhon"] .page:not(#coverPage):not(.auth-page):not(#closedPage)::before {
  background:
    linear-gradient(rgba(10, 20, 13, .28), rgba(10, 20, 13, .28)),   /* 葉を少し暗くして、上の文字を読みやすく */
    url(../images/cover-leaf-tr.webp) right top / 150px auto no-repeat,
    url(../images/cover-leaf-l.webp) left bottom 6% / 120px auto no-repeat,
    radial-gradient(ellipse at center, #22392A 0%, #15241A 70%, #0E1912 100%);   /* 葉は表紙の絵から切り抜いたもの（11-05） */
}
html[data-theme="furuhon"] .page:not(#coverPage):not(.auth-page):not(#closedPage)::after { background: transparent; }
/* 紙の台紙：見出しの帯・ボタン以外の、ページの中身のかたまり */
html[data-theme="furuhon"] .page:not(#coverPage):not(.auth-page):not(#closedPage):not(#detailPage):not(#speciesPage) > .wrap > :not(.page-head):not(.btn):not(.timeline):not(#grid):not([hidden]):not(:empty) {
  background: rgba(244, 234, 210, .97); border: 1px solid var(--goldline); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45); padding: 12px 14px; margin-top: 0; margin-bottom: 14px;
}
html[data-theme="furuhon"] #zukanPage .toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-theme="furuhon"] #settingsPage #settingsForm { background: rgba(244, 234, 210, .97); }
html[data-theme="furuhon"] .page .more-btn { background: var(--gold); border-color: var(--gold); color: var(--leather); }

/* 案2 章の見出しを革と金に（目次のボタンも革の色。上の線だけ目の色） */
html[data-theme="furuhon"] .chapter-head {
  background: linear-gradient(#1F3527, #15241A); border: 1px solid var(--goldline); border-radius: 4px;
  outline: 1px solid rgba(228,198,126,.45); outline-offset: -5px;
  padding: 14px 16px; margin-bottom: 22px; box-shadow: 0 3px 8px rgba(40,25,5,.35);
}
html[data-theme="furuhon"] .page .chapter-head h2 { color: var(--gold) !important; text-shadow: none !important; letter-spacing: .08em; }
html[data-theme="furuhon"] .page .chapter-head :is(p, .cnt) { color: var(--cream) !important; text-shadow: none !important; }
html[data-theme="furuhon"] .page .chapter-head .cnt { color: var(--gold) !important; }
html[data-theme="furuhon"] .chapter-head .ico { background: transparent; border: 1.5px solid var(--gold); color: var(--gold); }
html[data-theme="furuhon"] .index { background: rgba(226,210,174,.95); }
html[data-theme="furuhon"] .index button { background: var(--leather2); border-color: var(--goldline); border-top-color: var(--oc, var(--goldline)); color: var(--cream); }
html[data-theme="furuhon"] .index button small { color: #CFC3A0; }
html[data-theme="furuhon"] .index button[aria-current="true"] { background: var(--gold); color: var(--leather); }
html[data-theme="furuhon"] .index button[aria-current="true"] small { color: var(--leather); }
html[data-theme="furuhon"] .family.year-sub { color: var(--moss); border-bottom: 3px double var(--goldline); }

/* 案3：見出し（題名・件数・戻る）は革の上に金で */
html[data-theme="furuhon"] .page:not(#coverPage):not(.auth-page):not(#closedPage) .page-head { padding-bottom: 6px; border-bottom: 3px double var(--goldline); margin-bottom: 16px; }
html[data-theme="furuhon"] .page .page-head .page-title { color: var(--gold) !important; text-shadow: var(--dark-halo) !important; border-bottom: 0; }
html[data-theme="furuhon"] .page .page-head .tally { color: var(--cream) !important; text-shadow: var(--dark-halo) !important; }
html[data-theme="furuhon"] .page .page-head .back { background: transparent !important; border-color: var(--goldline) !important; color: var(--gold) !important; }
html[data-theme="furuhon"] .page .page-head .rb-toggle { background: rgba(16, 30, 20, .85); border-color: var(--goldline); color: var(--cream); }
html[data-theme="furuhon"] .page .page-head .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--leather); }
html[data-theme="furuhon"] .page .page-head .btn.danger { background: transparent; border-color: #E8907F; color: #E8907F; }

/* 案4 標本のカードを重く（古い標本箱のラベル） */
html[data-theme="furuhon"] .specimen .photo { border: 3px solid #F6EEDB; box-shadow: 0 0 0 1px var(--goldline), 0 4px 8px rgba(40,25,5,.35); }
html[data-theme="furuhon"] .specimen.stack .photo { box-shadow: 0 0 0 1px var(--goldline), 5px 5px 0 -1px #F6EEDB, 5px 5px 0 0 var(--goldline), 0 4px 8px rgba(40,25,5,.35); }
html[data-theme="furuhon"] .label { background: #F4EAD2; border-color: var(--goldline); box-shadow: 0 3px 6px rgba(40,25,5,.25); }
html[data-theme="furuhon"] .label .data { border-top-color: var(--goldline); }
/* 観察日記の時間の線は革の上に金で引き、日記の1つ1つを紙のカードにする */
html[data-theme="furuhon"] .page > .wrap > #timeline { background: none; border: 0; border-left: 1px solid var(--goldline); border-radius: 0; box-shadow: none; padding: 0 0 0 18px; margin-bottom: 40px; }
html[data-theme="furuhon"] #timeline li { background: rgba(244, 234, 210, .97); border: 1px solid var(--goldline); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); padding: 10px 12px 12px 14px; margin-bottom: 14px; }
html[data-theme="furuhon"] #timeline li::before { left: -24px; top: 14px; background: var(--leather); border-color: var(--gold); }
html[data-theme="furuhon"] #timeline li.event::before { background: var(--gold); border-color: var(--gold); }
html[data-theme="furuhon"] .fab { background: var(--gold); border-color: var(--gold); color: var(--leather); }
/* 図鑑の一覧（11-05）：検索・絞り込み・並べ方・目次（目のボタン）は紙の台紙、一覧そのものは革の上に直接 */
html[data-theme="furuhon"] #zukanPage .index {
  background: rgba(244, 234, 210, .97); border: 1px solid var(--goldline); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45); padding: 10px 12px; margin-bottom: 18px;
}
html[data-theme="furuhon"] #zukanPage #grid :is(.family, .msg, .empty, .empty p) { color: var(--cream) !important; text-shadow: var(--dark-halo) !important; }
html[data-theme="furuhon"] #zukanPage #grid .family { border-bottom-color: var(--goldline); }
html[data-theme="furuhon"] #zukanPage #grid .family.year-sub { color: var(--gold) !important; border-bottom: 3px double var(--goldline); }
html[data-theme="furuhon"] #zukanPage #grid .family.year-sub small { color: var(--cream); }

/* 記録の詳しい画面（11-05）：文字は革の上に直接。メモだけ紙 */
html[data-theme="furuhon"] :is(#detailPage, #speciesPage) :is(.detail-name, h3.sec) { color: var(--gold) !important; text-shadow: var(--dark-halo) !important; }
html[data-theme="furuhon"] :is(#detailPage, #speciesPage) :is(.detail-sci, dl.facts, dl.facts dt, dl.facts dd, .log-hint, .idb-book, #locText, .private, .to-species, .msg, p) { color: var(--cream) !important; text-shadow: var(--dark-halo) !important; }
html[data-theme="furuhon"] :is(#detailPage, #speciesPage) dl.facts dt { color: #CFC3A0 !important; }
html[data-theme="furuhon"] :is(#detailPage, #speciesPage) .linkish { color: var(--gold); text-decoration-color: var(--goldline); }
html[data-theme="furuhon"] #detailPage .memo { background: rgba(244, 234, 210, .97); color: var(--ink); border: 1px solid var(--goldline); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
/* 「記録を削除」は葉に重なっても読めるように塗りつぶす */
html[data-theme="furuhon"] #detailPage .page-head .head-acts .btn.danger { background: #8A2E22; border-color: #C9604E; color: #FBEDE6; }
html[data-theme="furuhon"] #detailPage .to-log { background: var(--gold); border-color: var(--gold); color: var(--leather); }
html[data-theme="furuhon"] #detailPage .memo { text-shadow: none !important; }
html[data-theme="furuhon"] :is(#detailPage, #speciesPage) .linkish { text-shadow: var(--dark-halo); }
html[data-theme="furuhon"] .page .page-head .rb-toggle { text-shadow: var(--dark-halo); }
/* 種のページ（11-05）：文字は革の上に直接。記録の一覧は紙のカード */
html[data-theme="furuhon"] #speciesPage .rec-list button { background: rgba(244, 234, 210, .97); border: 1px solid var(--goldline); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); color: var(--ink); }
html[data-theme="furuhon"] #speciesPage .rec-list button :is(span, .when, .where) { color: var(--ink) !important; text-shadow: none !important; }

/* ふりがな（11-05）：少し大きく、はっきり。furigana.js が <span class="rb">漢字<span class="rt">かんじ</span></span> を作る。
   ふりがなを漢字の上に「浮かせて」置き、漢字の幅は変えない（長いふりがなは左右に少しはみ出す）。
   上には、ふりがなの分の高さだけあける（上の行にぶつからないように） */
.rb { display: inline-block; position: relative; padding-top: .62em; text-indent: 0; }
.rb > .rt { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: max(.54em, 8px); font-weight: 400; font-style: normal; letter-spacing: -.02em; line-height: 1; text-align: center; pointer-events: none; }
body.no-rb .rb { padding-top: 0; }
/* 下線のある文字（リンク・「ログアウト」など）は、ふりがなの付いた漢字にも下線を引く（11-05。部品の中へは下線が伝わらないため） */
:where(a, u, .link, .linkish, .btn.ghost, .timeline .del) .rb { text-decoration: underline; text-underline-offset: 3px; }
/* ボタンの形のリンク（下線なし）には引かない（11-07。「見る人の画面」の漢字だけに下線が出ていた） */
:where(a.btn, #settingsPage .btn.ghost, .auth-page .btn.ghost) .rb { text-decoration: none; }
html[data-theme="furuhon"] :is(#detailPage, #speciesPage) .linkish .rb { text-decoration-color: var(--goldline); }
.rb > .rt { text-decoration: none; }
body.no-rb .rb > .rt { display: none; }
.timeline .log-btn.fill .rt { color: rgba(255, 255, 255, .85); }
.map .map-attr .rt { display: none; }
.map .map-attr .rb { padding-top: 0; }
/* 文字を気持ち大きく（15px → 16px。11-05）。大きさを決めてある所（ラベル・小さな説明など）はそのまま */
body { font-size: 16px; }
/* 項目名と中身の行は、文字の下の線（ベースライン）でそろえる（ふりがなのある・ないで上下がずれないように） */
dl.facts { align-items: baseline; }
/* 設定（古本、11-05）：「会員の種類」などの見出しは、台紙の枠の上ではなく、台紙の上の革に金で置く */
html[data-theme] #settingsPage > .wrap > fieldset { position: relative; margin-top: 66px !important; padding-top: 12px; }   /* 台紙の決まり（上の余白 0）より強く。見出しの分のすき間 */
html[data-theme] #settingsPage > .wrap > fieldset > legend {
  position: absolute; top: -47px; left: 2px; line-height: 1.6; padding: 0; background: none; border-radius: 0;
  font-family: var(--mincho); font-size: 19px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold); text-shadow: var(--dark-halo);
}
/* 横に2つ並ぶ入力欄は、下（入力欄）でそろえる（片方の見出しにだけふりがながあっても、欄の高さがずれないように） */
.row:has(> label) { align-items: end; }   /* ボタンの並び（.row の中が button・a）は、高さをそろえたまま（11-07） */

/* 「飼育中」「飼育終了」などの札：ふりがなが枠の中に収まるように（11-06。自前のふりがなは枠を広げないため） */
.badge { padding: 2px 11px 2px; line-height: 1.45; }
.badge .rb { padding-top: 8px; }
.badge .rb > .rt { top: 1px; font-size: 7.5px; letter-spacing: -.04em; }
/* 古本：ページの地の色も革の色に（iPhone の Safari でアドレスバーが伸び縮みしたとき、背景の絵の外がクリーム色に見えないように。11-06） */
html[data-theme="furuhon"] { background-color: #0E1912; }
html[data-theme="furuhon"] body { background: transparent; }   /* body に色を塗ると、後ろに固定した背景の絵（葉など）が隠れるため（11-10） */
/* 横に並ぶボタンは、同じ高さで文字を上下の真ん中に（ふりがなのある・ないで高さや位置がずれないように。11-07） */
:is(#settingsPage, .auth-page, #pubDlg) .row > .btn, .row > .btn { display: flex; align-items: center; justify-content: center; text-align: center; }
.rb.rb-start > .rt { left: 0; transform: none; min-width: 100%; text-align: center; }   /* 短いふりがなは真ん中、長いふりがなは左から */
#pubOn .row { margin-top: 10px; }   /* リンクの欄とボタンの間をあける（11-07） */

/* 「↑ 上へ」（11-07）。見る人の画面では右下の「報告する」の上に */
.to-top { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  border: 1px solid var(--line); border-radius: 99px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .94); color: var(--moss); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); cursor: pointer; }
.to-top[hidden] { display: none; }
body:has(.report-btn:not([hidden])) .to-top { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
html[data-theme="furuhon"] .to-top { background: var(--gold); border-color: var(--gold); color: var(--leather); }

/* 見る人の画面の「報告する」（11-07）：表紙と記録の詳しい画面のいちばん下に、小さな文字で */
.report-link { display: block; margin: 36px auto 8px; background: none; border: 0; padding: 6px 10px; font: inherit; font-size: 13px;
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html[data-theme="furuhon"] .report-link { color: var(--cream); text-shadow: var(--dark-halo); }
.report-link .rb { text-decoration: underline; text-underline-offset: 3px; }
/* 設定の「図鑑番号・ログインの方法・アプリの版」：ふりがなのある・ないで上下がずれないように（11-07） */
.info { align-items: baseline; }

/* 設定の見出し（会員の種類など）：森・青空も、台紙の上の背景に大きく直接置く（11-10。古本と同じ形。色は見出しの緑） */
html[data-theme="mori"] #settingsPage > .wrap > fieldset > legend { color: var(--moss); text-shadow: 0 0 2px var(--halo), 0 0 6px var(--halo), 0 0 12px var(--halo), 0 0 20px var(--halo); }
html[data-theme="aozora"] #settingsPage > .wrap > fieldset > legend { color: var(--moss); text-shadow: var(--light-halo); }

/* 青空の中のページ（11-10）：表紙の絵を全体に敷く（少し白く淡く）。背景の上に直接のる文字には白いぼかしを広めに、薄い文字は濃く */
html[data-theme="aozora"] { --light-halo: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .9), 0 0 22px rgba(255, 255, 255, .8); }
html[data-theme="aozora"] .page:not(#coverPage):not(.auth-page):not(#closedPage)::before {
  background: linear-gradient(rgba(250, 252, 246, .30), rgba(250, 252, 246, .30)), #CFE6F5 url(../images/aozora-cover.webp) center top / cover no-repeat;
}
html[data-theme="aozora"] .page:not(#coverPage) :is(.tally, .page-title, .lead, .chapter-head h2, .chapter-head p, .chapter-head .cnt, .family, .msg, .private, .legend, h3.sec, .detail-name, .detail-sci, .to-species, dl.facts, .form > label, .form .row > label, .timeline, .log-hint, .back, .report-link) { text-shadow: var(--light-halo) !important; }
html[data-theme="aozora"] .page:not(#coverPage) :is(dl.facts dt, .detail-sci, .chapter-head p, .lead, .private) { color: #24331F !important; }

/* Android：背景の絵を画面の下にそろえる（アドレスバーが上で伸び縮みしても、背景が動かないように。boot.js が is-android を付ける。11-10） */
html.is-android .page::before { top: auto; bottom: 0; }
/* 標本のラベル（説明書きの台紙）を写真と同じ幅に（11-10。もとは少し内側に寄せていた） */
.specimen .label { margin-left: 0; margin-right: 0; }