/* 旅スタマッチ — kabosu 方式（素の CSS 1 枚）。管理画面（/admin）と登録者の画面（/app）で共用 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* 色は青と緑（2026-10-16 峯岸さん決定。海と山）。帯は青→緑のグラデーション */
  --s-band: #0a6fb3; --s-accent: #0e8a9b; --s-deep: #0a5f6b;   /* suite.css の 3 色（帯・アクセント・濃い色） */
  --accent: #0e8a9b;        /* 青緑（ボタン・リンク・選択） */
  --accent-weak: #e4f3f5;
  --band-grad: linear-gradient(100deg, #27a86a 0%, #0e8a9b 45%, #0a5fb8 100%);   /* 左が緑・右が青（スマホの上の帯） */
  --band-grad-v: linear-gradient(180deg, #27a86a 0%, #0e8a9b 45%, #0a5fb8 100%);  /* 左の帯: 上が緑・下が青 */
  --border: #d9dee3;
  --text: #24292f;
  --muted: #6b7280;
  --danger: #b91c1c;
  --ok: #166534;
  --warn: #b45309;
}
body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px; color: var(--text); background: #f6f8fa;
}
a { color: var(--accent); }

/* ─── レイアウト: kabosu と同じ。上の帯は無し。左の帯（グラデーション）+ 左下のアカウント + 本文 ─── */
/* スクロールするのは窓 (window) だけ。本文 (.main) は自分でスクロールせず、左の帯は sticky で画面に貼り付く
   (前は .main が overflow: auto で本文の右端に 2 本目のスクロールバーが出ていた。2026-10-16 峯岸さん指摘) */
html, body { min-height: 100%; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 180px; flex-shrink: 0; background: var(--band-grad-v); padding: 0 0 60px; position: sticky; top: 0; height: 100vh; overflow: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
/* ロゴの枠: 3 部署と同じ高さ (20 + 140×2/3 + 20 = 133px) */
.sidebar .side-logo { height: calc(40px + (180px - 40px) * 2 / 3); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sidebar .side-logo .brand { color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 1px; }
.linewarn { font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 9px; background: #fff3cd; color: #7a5b00; white-space: nowrap; cursor: help; }
/* 項目: 13px・1 項目 38px・選択中は白い地に左 5px の印 */
.sidebar .nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; text-decoration: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.14); }
.sidebar .nav-item.active { background: rgba(255,255,255,.92); color: var(--s-deep); border-left: 5px solid #fff; padding-left: 7px; }
.sidebar .nav-item .ico, .group-bar .nav-item .ico { color: inherit; }   /* 絵は文字と同じ色（部-11） */
.user-menu .menu-item .ico { margin-right: 8px; color: #777; }
.sidebar .nav-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 左下のアカウント: 帯と同じ幅 180px・48px */
.footer { position: fixed; bottom: 0; left: 0; width: 180px; height: 48px; display: flex; align-items: center; padding: 0 12px; background: var(--s-deep); color: #fff; }
.footer .user { position: relative; min-width: 0; max-width: 100%; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; color: inherit; font-size: 13px; cursor: pointer; padding: 6px 4px; max-width: 100%; }
.user-btn .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--s-deep); font-size: 13px; }
.user-btn .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.user-btn .chev { font-size: 13px; line-height: 1; opacity: .8; }
.user-menu { position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 210px; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); z-index: 40; padding: 4px 0; }
.user-menu[hidden] { display: none; }
.user-menu-head { padding: 10px 16px; font-size: 14px; border-bottom: 1px solid #eee; }
.user-menu .menu-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 10px 16px; font-size: 13px; cursor: pointer; border-radius: 0; }
.user-menu .menu-item:hover { background: var(--accent-weak); }
.mobile-brand, .group-bar { display: none; }

.main { flex: 1; padding: 20px 24px 60px; max-width: 980px; min-width: 0; }
.main h1 { font-size: 20px; margin-bottom: 4px; }
.main h2 { font-size: 16px; margin: 18px 0 8px; }
.main .lead { color: var(--muted); margin-bottom: 16px; font-size: 13px; }
.crumb { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.crumb a { color: var(--muted); }

/* ─── カード ─── */
.card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.card h3 { font-size: 15px; margin-bottom: 8px; }
.card.link { cursor: pointer; }
.card.link:hover { border-color: var(--accent); }
.row { display: flex; gap: 14px; align-items: flex-start; }
.row > .grow { flex: 1; min-width: 0; }
.two-col { display: flex; gap: 12px; }
.two-col > div { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

label.fl { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 3px; }
label.fl .dl-hint { color: var(--s-deep); margin-left: 4px; }   /* 締切の横の（当日N日前） */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=tel], textarea, select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: #fff;
}
textarea { resize: vertical; }
/* 暦・時刻の欄 (suite.js が type=text に置き換える) は右端の絵を残す。上の background: #fff が絵を消すので background-color だけに */
input[data-date], input[data-time] { background-color: #fff; padding-right: 32px; }
input[data-date] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5'><rect x='2' y='3' width='12' height='11' rx='1.5'/><path d='M2 6.5h12M5 1.5v3M11 1.5v3'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px; }
input[data-time] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'><circle cx='8' cy='8' r='6'/><path d='M8 4.5V8l2.5 1.5'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
.check { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 13px; }
.check input { width: 15px; height: 15px; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.note { font-size: 12px; color: var(--muted); }
.warn { color: var(--warn); }
.err { color: var(--danger); }
.ok { color: var(--ok); }

/* 札（タグ） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chip { display: inline-block; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; background: #fff; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chips.pick .chip { cursor: pointer; user-select: none; }
.chip.grp { border: none; background: transparent; color: var(--muted); padding-left: 0; }

/* 状態の札は suite の .pill（罫線で囲む。UIルール 部-9）。種類: wait（待ち）・ok（済）・off（終わり） */
.pill { display: inline-block; padding: 0 8px; border: 1px solid var(--s-accent); border-radius: 10px; color: var(--s-accent); font-size: 12px; line-height: 20px; white-space: nowrap; vertical-align: middle; }
.pill.ok { border-color: #1a6b1a; color: #1a6b1a; }
.pill.wait { border-color: #e6cf8a; color: #7a5b00; }
.pill.off { border-color: var(--s-grey); color: var(--s-ink-mute); }
/* 見出しの右の札を押すと状態の小窓（募集の画面）。札の形のまま、右に小さな ⌄ */
button.pill-btn { background: #fff; cursor: pointer; font: inherit; font-size: 12px; line-height: 20px; padding: 0 6px 0 8px; display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 4px; }
button.pill-btn .ico { width: 11px; height: 11px; color: inherit; }
button.pill-btn:hover { background: var(--accent-weak); }
/* 募集の画面の上の箱: 一覧のカードと同じ行（棒・決定/募集・言葉） */
.card.jstat .jline { padding: 2px 0 8px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid #eef1f3; margin-bottom: 8px; }
.card.jstat .jline:hover { background: none; }
.card.jstat .jline .fill { width: 120px; height: 10px; border-radius: 5px; background: #e6eaee; overflow: hidden; flex: none; }
.card.jstat .jline .fill i { display: block; height: 100%; background: var(--s-accent); border-radius: 5px; }
.card.jstat .jline .frac { white-space: nowrap; font-size: 20px; }
.card.jstat .jline .frac small { font-size: 13px; color: var(--muted); }
.card.jstat .jline .words { flex: 1; min-width: 0; color: var(--text); display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.card.jstat .jline .words .ico { color: #999; }
.card.jstat .jline .words .err { color: var(--danger); }
.card.jstat .btns { margin-top: 8px; }
/* 状態を変える小窓 */
.sheet .now { margin: 2px 0 10px; }
.sheet .choices { display: flex; flex-direction: column; gap: 10px; }
.sheet .choice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sheet .choice button { min-width: 11em; }
.sheet .choice .note { flex: 1; min-width: 12em; }

/* 送った後の募集の内容（読むだけ）と、条件の変更の履歴（管理・登録者で共用） */
.kv.cond { display: grid; grid-template-columns: 6em 1fr; gap: 6px 10px; font-size: 14px; }
.kv.cond div:nth-child(odd) { color: var(--muted); font-size: 12px; padding-top: 2px; }
.app h2 { font-size: 16px; margin: 16px 0 8px; }
/* 募集の内容のカードの中の履歴（管理）: 1 件 1 行 */
.hist { margin-top: 10px; border-top: 1px solid #eef1f3; padding-top: 8px; font-size: 13px; }
.hist-h { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.hist-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 0; }
.hist-row .when { color: var(--muted); font-size: 12px; min-width: 11em; }
.hist-row .what { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.hist-row .lbl { color: var(--muted); font-size: 12px; margin-right: 4px; }
.hist-row s { color: var(--muted); }
.hist-row b { color: var(--danger); }
/* 登録者の見え方: スマホの枠は峯岸さんの画像 (admin/phone.png。画面の部分は透明にしてある。元 1000×1919 から切り出して 800×1619 に)。
   中身は画像の下に絶対配置 (画面の位置は画像に対する割合)。画像は上に重ねて押せないようにする (ノッチが中身の上に乗る) */
.modal.dark { background: rgba(0, 0, 0, .78); }   /* 登録者の見え方の外はもっと暗く (2026-10-16 峯岸さん指示) */
.sheet.bare { background: none; box-shadow: none; padding: 0; max-width: none; width: auto; overflow: visible; }
.phone-wrap { position: relative; padding: 24px 40px 0 0; }   /* 右上の × のぶん余白 */
.phone-x { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 26px; line-height: 32px; padding: 0; cursor: pointer; font-family: inherit; }
.phone-x:hover { background: rgba(255, 255, 255, .18); }
.sheet .phone { position: relative; width: 340px; max-width: 100%; aspect-ratio: 800 / 1619; margin: 0 auto; }
.sheet .phone > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.sheet .phone .app { position: absolute; left: 5.62%; top: 2.42%; width: 89.01%; height: 95.16%; overflow-y: auto; border-radius: 30px; background: #fff; scrollbar-width: none; }
.sheet .phone .app::-webkit-scrollbar { display: none; }
.sheet .phone .app .top { position: sticky; top: 0; z-index: 1; padding-top: 32px; }   /* ノッチ (画面の上から 24px) のぶん下げる */
.sheet .phone .app .wrap { padding: 14px 16px 30px; }
.sheet .phone button { cursor: default; }
/* 登録者の募集の画面: カードの中の「内容が変更になっています。」 */
.changed { margin-top: 10px; border-top: 1px solid #eef1f3; padding-top: 8px; font-size: 13px; }
.changed-h { color: var(--danger); font-weight: bold; margin-bottom: 4px; }
.changed-row { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 2px 0; }
.changed-row .when { color: var(--muted); font-size: 12px; }
.changed-row .lbl { color: var(--muted); font-size: 12px; margin-right: 4px; }
.changed-row s { color: var(--muted); }
.changed-row b { color: var(--danger); }
.changes { display: flex; flex-direction: column; gap: 8px; }
.change { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.change .when { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.change .line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 2px 0; }
.change .lbl { color: var(--muted); font-size: 12px; min-width: 6em; }
.change s { color: var(--muted); }
.change .arrow { color: var(--muted); }
.change b { color: var(--danger); }

/* ─── ボタン（形は suite.css。ここは並べ方だけ） ─── */
.btns { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
a.ghost { display: inline-flex; align-items: center; font-size: 14px; line-height: 20px; padding: 7px 16px; border: 1px solid var(--s-accent); border-radius: var(--s-radius); background: #fff; color: var(--s-accent); text-decoration: none; }
button.danger.arm { background: var(--danger); color: #fff; font-weight: bold; }
button.small { padding: 3px 10px; font-size: 12px; line-height: 20px; }   /* mini 28px */

/* ─── 表 ─── */
table.tbl { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
table.tbl th { text-align: left; font-weight: normal; color: var(--muted); font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--border); }
table.tbl td { padding: 6px 6px; border-bottom: 1px solid #eef1f3; vertical-align: top; }
table.tbl .num { text-align: right; white-space: nowrap; }
table.tbl tr.link { cursor: pointer; }
table.tbl tr.link:hover td { background: var(--accent-weak); }
table.tbl tr.off td { color: var(--muted); }

/* 顔写真 */
.face { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: #eef1f3; border: 1px solid var(--border); flex-shrink: 0; }
.face.big { width: 120px; height: 120px; }
.face.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }

/* ─── フラッシュ / 追加フォーム ─── */
#flash { position: fixed; top: 60px; right: 20px; z-index: 50; padding: 10px 18px; border-radius: 8px; background: var(--ok); color: #fff;
  font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.25); opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 80vw; }
#flash.show { opacity: 1; }
#flash.err { background: var(--danger); }
details.adder { margin-top: 20px; }
details.adder summary { cursor: pointer; font-weight: bold; color: var(--accent); padding: 8px 0; user-select: none; }
details.adder .card { margin-top: 8px; }

/* ─── ログイン ─── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 32px 36px; width: 320px; text-align: center; }
.login-box h1 { font-size: 18px; margin-bottom: 18px; }
.login-box input { margin-bottom: 12px; }
.login-box .err { font-size: 12px; margin-top: 8px; min-height: 1em; }

/* ─── 登録者の画面（スマホ・LINE の中） ─── */
body.app { background: #fff; }
.app .top { background: var(--band-grad); color: #fff; padding: 12px 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.app .top a { color: #fff; text-decoration: none; font-weight: normal; font-size: 13px; }
.app .top .spacer { flex: 1; }
.app .wrap { padding: 14px 16px 40px; max-width: 560px; margin: 0 auto; }
.app h1 { font-size: 18px; margin-bottom: 6px; }
.app .card { padding: 12px 14px; }
.app .big { font-size: 16px; font-weight: bold; }
.app .kv { display: grid; grid-template-columns: 5em 1fr; gap: 4px 8px; font-size: 14px; margin: 8px 0; }
.app .kv div:nth-child(odd) { color: var(--muted); font-size: 12px; padding-top: 2px; }
.app .kv-sep { border-top: 1px solid #eef1f3; margin: 2px 0; }   /* ツアー・集合・客数 の下の線（表を 2 つに分けて間に引く） */
.app button.primary, .app button.ghost, .app button.danger { width: 100%; padding: 12px; font-size: 15px; }
.app .btns { flex-direction: column; }
.app .apptabs { display: flex; gap: 6px; margin: 8px 0 12px; }
.app .apptabs a { flex: 1; text-align: center; padding: 8px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text); font-size: 13px; }
.app .apptabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.app .empty { color: var(--muted); text-align: center; padding: 30px 0; }
@media (max-width: 700px) {
  html, body { height: auto; }
  .layout { height: auto; display: block; }
  .sidebar, .footer { display: none; }
  .main { padding: 14px 12px 60px; }
  .mobile-brand { display: block; height: 30px; line-height: 30px; background: var(--band-grad); color: #fff; font-weight: bold; font-size: 16px; padding: 0 10px; letter-spacing: 1px; }
  .group-bar { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 0; border-bottom: 1px solid #e0e0e0; background: #fff; }
  .group-bar .gnav { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
  .group-bar .gnav::-webkit-scrollbar { display: none; }
  .group-bar .nav-item .ico { display: none; }   /* スマホの横並びは文字だけ（4 つが 1 行に入るように） */
  .group-bar .nav-item { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 11px 10px; color: var(--text); text-decoration: none; font-size: 13px; border-bottom: 3px solid transparent; }
  .group-bar .nav-item.active { color: var(--s-deep); border-bottom-color: var(--s-accent); }
  .group-bar .user { position: relative; flex: none; }
  .group-bar .user-btn { color: var(--text); gap: 4px; }
  .group-bar .user-btn .avatar { width: 24px; height: 24px; background: var(--s-accent); color: #fff; font-size: 11px; }
  .group-bar .user-btn .user-name { display: none; }
  .group-bar .user-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 4px); }
  .two-col { flex-direction: column; }
  .row { gap: 10px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ─── 行の一覧（表の代わり。スマホでも崩れない） ─── */
.plist { margin-top: 8px; }
.prow { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #eef1f3; color: var(--text); text-decoration: none; }
.prow .grow { flex: 1; min-width: 0; }
.prow .pname { font-size: 15px; font-weight: bold; }
.prow .pname .note { font-weight: normal; }
.prow.off, .prow.off .pname { color: var(--muted); }
a.prow:hover { background: var(--accent-weak); }
.prow .btns { margin-top: 6px; }
.jlist { margin-top: 8px; }
.jline { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #eef1f3; color: var(--text); text-decoration: none; }
.jline:hover { background: var(--accent-weak); }
.jline .jrole { font-weight: bold; min-width: 5em; }
.jline .jnum { white-space: nowrap; }
.nlist { margin-top: 8px; }
.nrow { border-bottom: 1px solid #eef1f3; }
.nrow summary { cursor: pointer; padding: 8px 4px; list-style: none; }
.nrow summary::-webkit-details-marker { display: none; }
.nrow summary::before { content: "▸ "; color: var(--muted); }
.nrow[open] summary::before { content: "▾ "; }
.nrow .nbody { white-space: pre-wrap; font-size: 12.5px; color: var(--muted); padding: 0 4px 10px 18px; word-break: break-all; }
.taglist { margin: 4px 0; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef1f3; }
.tgrp-h { font-size: 12px; color: var(--muted); margin: 12px 0 2px; }   /* 分類の見出し（札は分類ごとにまとめる） */
.taglist .tgrp-h:first-child { margin-top: 4px; }
.tagrow .tname { width: 12em; flex: 1; }
.tagrow .tsort { width: 5em; }
.tagrow .btns { margin: 0; }
.tagrow.off .tname { color: var(--muted); }
input.w10 { width: 10em; }

/* ─── スマホ（管理画面も基本はスマホで使う） ─── */
@media (max-width: 700px) {
  .main h1 { font-size: 18px; }
  /* iOS は 16px 未満の入力欄で画面が拡大するので 16px に */
  input[type=text], input[type=password], input[type=date], input[type=number], input[type=tel], textarea, select { font-size: 16px; padding: 9px 10px; }
  .card { padding: 12px; }
  .face { width: 56px; height: 56px; }
  .face.big { width: 96px; height: 96px; }
  .tagrow .tname { flex: 1; width: auto; }
  .tagrow .btns { width: 100%; }
  table.tbl { font-size: 12.5px; }
  table.tbl th, table.tbl td { padding: 5px 4px; }
  #flash { right: 12px; left: 12px; max-width: none; text-align: center; }
  .login-wrap { padding: 16px; }
  .login-box { width: 100%; max-width: 360px; padding: 24px 20px; }
}

/* ─── 曜日のチェック（出られる曜日） ─── */
.wd { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.wd label { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; user-select: none; font-size: 14px; }
.wd label:has(input:checked) { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); font-weight: bold; }
.wd input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* ─── タブのある画面（kabosu と同じ組み方: 白地・タブの帯・下の線は帯が持つ・ツールバー 46px） ─── */
body.tabbed { background: #fff; }
body.tabbed .main { padding: 0; background: #fff; max-width: none; }
.tabs-strip { position: relative; padding: 10px 10px 0; display: flex; align-items: flex-end; gap: 12px; }
.tabs-strip .tabs { flex: 1; min-width: 0; }
.tabs-strip .strip-btn { flex: none; height: 30px; padding: 0 14px; font-size: 13px; line-height: 28px; margin-bottom: 6px; }
.tabs-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #e0e0e0; }
.tabs-strip .tabs { position: relative; z-index: 1; flex-wrap: nowrap; align-items: flex-end; border-bottom: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs-strip .tabs::-webkit-scrollbar { display: none; }
.tabs-strip .tabs .tab { white-space: nowrap; flex-shrink: 0; margin-bottom: 1px; width: 160px; min-width: 0; padding-left: 10px; padding-right: 10px; }   /* 2 つのタブは同じ幅 */
.tabs-strip .tabs .tab.active { margin-bottom: 0; }
.toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; box-shadow: inset 0 -1px 0 #e0e0e0; flex-wrap: wrap; }
.toolbar button { border: none; background: none; display: inline-flex; align-items: center; padding: 0 10px; height: 30px; font-size: 13px; cursor: pointer; border-radius: 3px; color: #333; }
.toolbar button:hover { background: #f0f0f0; }
/* 絞り込みの帯（kabosu の検索タブの写し。style.css の .search-bar / .kind-bar / .search-box / #btn-search-reset）。
   タブの下・カードの上。欄の高さ 30・文字 13px・灰。狭い画面では折り返す */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; box-shadow: inset 0 -1px 0 #e0e0e0; }
.filter-bar .search-narrow { font-size: 13px; color: #888; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.filter-bar .search-narrow .ico[data-icon] { color: #888; }
.filter-bar select { padding: 0 26px 0 6px; height: 30px; font-size: 13px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; max-width: 190px; color: #888;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; }
.filter-bar .search-box { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 160px; max-width: 250px; height: 30px; padding: 0 8px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; margin-right: 4px; }
.filter-bar .search-box .ico[data-icon] { width: 14px; height: 14px; color: #999; }
.filter-bar .search-box input[type=search] { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 2px 0 0; margin: 0; font-size: 13px; color: #555; font-family: inherit; height: 28px; line-height: 26px; }
.filter-bar .search-box input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin: 0 0 0 4px; cursor: pointer; flex: none; align-self: center;
  background-color: #888; -webkit-mask: var(--s-icon) center / 100% 100% no-repeat; mask: var(--s-icon) center / 100% 100% no-repeat; }
.filter-bar #f-reset { height: 30px; padding: 0 10px; border: 1px solid var(--s-accent); border-radius: 4px; background: var(--s-accent); color: #fff; font-size: 13px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.filter-bar #f-reset:hover:not(:disabled) { background: var(--s-deep); border-color: var(--s-deep); }
.filter-bar #f-reset:disabled { background: #f3f3f3; border-color: #ddd; color: #aaa; cursor: default; }
@media (max-width: 700px) {   /* スマホは 2 行: 絞り込み・役割・状態 ／ 言葉・リセット */
  .filter-bar select { flex: 1 1 0; min-width: 0; max-width: none; }
  .filter-bar .search-box { flex: 1 1 calc(100% - 90px); max-width: none; margin-right: 0; }   /* 言葉の欄は必ず 2 行目の頭・右にリセット */
}
/* 並べ替えの見出し（kabosu の table.list th の写し: 11px・普通の太さ・#6b7280・地 #f8f8f8・下に線。押せる） */
.sort-head { display: flex; align-items: center; background: #f8f8f8; border-bottom: 1px solid #e0e0e0; padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
.sort-head::-webkit-scrollbar { display: none; }
.sort-head .sh { border: 0; background: none; color: #6b7280; font-size: 11px; line-height: 17px; padding: 7px 10px; font-family: inherit; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; border-radius: 0; }
.sort-head .sh:hover { background: #ececec; }
.sort-head .sh.on { color: #222; }
.sort-head .sh .sort-mark { width: 10px; height: 10px; margin-left: 3px; color: #9aa3ab; }
.sort-head .sh:not(.on) .sort-mark { opacity: 0; }
.sort-head .sh:not(.on):hover .sort-mark { opacity: .6; }
.content { padding: 14px 12px 60px; }
.content .lead { margin-bottom: 12px; }
.sec { margin-top: 8px; }
.sec h2 { font-size: 15px; font-weight: bold; margin: 0 0 2px; }
.golink { font-size: 13px; color: var(--s-accent); text-decoration: none; white-space: nowrap; }
.golink:hover { text-decoration: underline; }
.card.tour { padding: 16px 18px; }
.card.tour .head { display: flex; align-items: center; gap: 12px; }
.card.tour .head .date { flex: none; width: 62px; height: 56px; border-radius: 8px; background: var(--accent-weak); color: var(--s-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.card.tour .head .date b { font-size: 16px; font-weight: bold; letter-spacing: -.3px; }
.card.tour .head .date small { font-size: 11px; margin-top: 2px; }
.card.tour .head .date.sat { color: #1a5c9e; background: #e3f0fb; }
.card.tour .head .date.sun { color: #c0392b; background: #fdecea; }
.card.tour .head .titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card.tour .head .name { font-size: 17px; font-weight: bold; letter-spacing: .06em; color: var(--text); text-decoration: none; }
.card.tour .head .sub { font-size: 13px; color: var(--muted); text-decoration: none; }
.card.tour .head .sub:hover { text-decoration: underline; }
.card.tour .head .name:hover { text-decoration: underline; }
.card.tour .head .golink { display: inline-flex; align-items: center; gap: 4px; }
.card.tour .head .golink .ico { color: var(--s-accent); }
.card.tour .info { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; margin: 10px 0 0; padding-bottom: 10px; border-bottom: 1px solid #eef1f3; }
.card.tour .info > span { display: inline-flex; align-items: center; gap: 6px; }
.card.tour .info .ico { color: #777; }
.card.tour .info .memo { flex-basis: 100%; white-space: pre-wrap; align-items: flex-start; }
.card.tour .info .memo .ico { margin-top: 2px; }
.card.tour .jlist { margin-top: 2px; }
.card.tour .jline { padding: 10px 4px; font-size: 13px; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; border-bottom: 1px solid #eef1f3; color: var(--text); text-decoration: none; }
.card.tour .jline:last-child { border-bottom: none; }
.card.tour .jline:hover { background: var(--s-hover); }
.card.tour .jline .jrole { font-weight: normal; min-width: 5em; font-size: 14px; }
.card.tour .jline .fill { width: 80px; height: 8px; border-radius: 4px; background: #e6eaee; overflow: hidden; flex: none; }
.card.tour .jline .fill i { display: block; height: 100%; background: var(--s-accent); border-radius: 4px; }
.card.tour .jline .frac { min-width: 2.8em; white-space: nowrap; font-size: 15px; }
.card.tour .jline .frac small { font-size: 12px; color: var(--muted); }
.card.tour .jline .words { flex: 1; min-width: 0; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.card.tour .jline .words .ico { color: #999; }
.card.tour .jline .words .err { color: var(--danger); }
.card.tour .jline.closed .words, .card.tour .jline.done .words { color: var(--ok); }
.card.tour .jline.closed .words .ico, .card.tour .jline.done .words .ico { color: var(--ok); }
.card.tour .jline.closed .fill i, .card.tour .jline.done .fill i { background: #1a6b1a; }
.card.tour .jline.open .words .ico[data-icon="warn"] { color: var(--danger); }
.card.tour .jline .next { flex: none; color: var(--s-accent); white-space: nowrap; border: 1px solid var(--s-accent); border-radius: 4px; padding: 3px 10px; font-size: 12px; }
.card.tour .jline:hover .next { background: var(--s-accent); color: #fff; }
@media (max-width: 700px) {
  .card.tour { padding: 14px; }
  .card.tour .head .name { font-size: 16px; }
  .card.tour .jline { flex-wrap: wrap; gap: 6px 10px; }
  .card.tour .jline .words { flex-basis: 100%; padding-left: calc(3.5em + 10px); }
  .card.tour .jline .next { margin-left: auto; }
}
.sheet .fl:first-child { margin-top: 0; }
@media (max-width: 700px) {
  body.tabbed .main { padding: 0; }
  .tabs-strip { gap: 8px; }
  .tabs-strip .tabs { gap: 3px; }
  .tabs-strip .tabs .tab { min-width: 0; width: auto; flex: 1; padding: 9px 4px; font-size: 13px; }
  .tabs-strip .strip-btn { padding: 0 10px; }
}

/* ─── 設定: LINE を結ぶ合言葉 ─── */
.steps { margin: 8px 0 0 20px; line-height: 1.9; }
.steps .code { font-size: 22px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--accent); }