/* 投稿画面・ログイン画面の共通スタイル
   色・フォント・ヘッダーは hokkaido-reception（2026-10-06）の common.css をそのまま引き継いだ（同じ会社のデザインの決まり） */
/* 字体は各ページの <head> で先読みし、optional にする。swap だと、ページ移動のたびに代わりの字体（游ゴシック UI。
   カナの幅が狭い）で一瞬描かれてから差し替わり、メニューの文字が伸び縮みしてチカチカした。
   optional は読み込みを最初の描画まで待ち、間に合わなければそのページは代わりの字体のまま（初回だけ起こりうる）。
   字体のファイルはブラウザに 1 年持たせている（main.py）。中身を差し替えるときはファイル名も変える */
@font-face { font-family: 'Noto Sans JP'; font-weight: 400; font-display: optional; src: url('/static/fonts/noto-sans-jp-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-weight: 700; font-display: optional; src: url('/static/fonts/noto-sans-jp-700.woff2') format('woff2'); }
@font-face { font-family: 'Zen Maru Gothic'; font-weight: 700; font-display: optional; src: url('/static/fonts/zen-maru-gothic-700.woff2') format('woff2'); }

:root {
  --bg: #F3F1EC;           /* reception-app の --page-bg */
  --surface: #ffffff;
  --text: #33291F;         /* --ink */
  --muted: #8E806C;        /* --text-sub */
  --border: #E7E2DB;       /* --header-border */
  --primary: #3A6FA0;      /* --sel（選択・操作の色） */
  --primary-dark: #2E5A84;
  --primary-soft: #EAF1F8;
  --brand-red: #E60012;
  --danger: #C0392B;
  --danger-soft: #FBE7E8;
  --warn: #9A6200;
  --warn-soft: #FBEEDA;
  --ok: #4F8063;
  --ok-soft: #E9F1EB;
  --radius: 16px;
  --shadow: 0 8px 22px rgba(120, 60, 40, 0.07);
  --font-display: 'Zen Maru Gothic', 'Yu Gothic UI', 'Meiryo', sans-serif;
  font-family: 'Noto Sans JP', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* hidden を付けた部品は必ず隠す。.btn・.steps など display を指定した部品では、ブラウザ既定の hidden が負けて出たままになる */
[hidden] { display: none !important; }
/* スクロールバーの場所を常に空けておく。一覧が届いてからページが伸びてスクロールバーが出る画面では、
   横幅が 15px 変わってヘッダーが伸び縮みし、ページ移動のたびにメニューが波打って見えた */
html { scrollbar-gutter: stable; }
body { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; }
a { color: var(--primary); }
h1, h2 { font-family: var(--font-display); font-weight: 700; }
h1 { font-size: 26px; margin: 0 0 12px; }
h2 { font-size: 19px; margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }

/* ===== ヘッダー（白地＋上端のグラデーションの帯＋ロゴ。reception-app と同じ） ===== */
.app-header {
  background: #fff; color: var(--text); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 22px; padding: 0 28px; min-height: 72px; flex-wrap: wrap;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, #9BD10C 0%, #68C35D 33%, #34B5AD 66%, #01A7FD 100%) 1 0 0 0;
}
.app-header .brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; text-decoration: none; color: inherit; }
.app-header .brand img { height: 40px; width: auto; display: block; }
.app-header .brand span { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.app-header nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; align-self: stretch; }
.app-header nav a {
  color: var(--muted); text-decoration: none; padding: 0 14px; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; border-bottom: 4px solid transparent; margin-bottom: -1px; position: relative;
}
.app-header nav a:hover { color: var(--text); }
.app-header nav a.active { color: var(--text); }
/* 選んでいるメニューの赤い下線（下の枠線の位置に重ねる）。ページ移動のときは前のメニューから滑って移る */
.app-header .nav-indicator {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--brand-red);
  view-transition-name: nav-indicator;
}
.app-header .user { font-size: 13px; color: var(--muted); white-space: nowrap; }
.app-header .user a { color: var(--primary); margin-left: 10px; }

main.page { max-width: 1280px; margin: 0 auto; padding: 20px 16px 80px; }

/* ===== ページ移動（Chrome・Edge 126 以降。対応しないブラウザは普通に切り替わる） =====
   ヘッダーはその場に残し、下の中身だけを短く入れ替える。Windows でアニメーションを切っている人には動かさない */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.app-header { view-transition-name: app-header; }
::view-transition-group(*) { animation-duration: 0.2s; }

/* ===== カード・表 ===== */
.card { background: var(--surface); border: none; border-radius: 20px; padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; }
table.list th, table.list td { border-bottom: 1px solid var(--border); padding: 7px 8px; text-align: left; vertical-align: top; }
table.list th { background: #F7F3ED; font-weight: bold; white-space: nowrap; position: sticky; top: 0; }
table.list tr.row-done td { color: var(--muted); }
table.list td.actions { white-space: nowrap; }
table.list input, table.list select { width: 100%; min-width: 70px; }
.empty { color: var(--muted); padding: 12px 0; }

/* ===== フォーム ===== */
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
input[type=text], input[type=date], input[type=datetime-local], input[type=time], input[type=search], select, textarea {
  font: inherit; padding: 8px 11px; border: 2px solid #E0DAD1; border-radius: 10px; background: #fff; color: var(--text);
}
textarea { width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.form-row > div { display: flex; flex-direction: column; }
.req::after { content: " 必須"; color: var(--danger); font-size: 11px; }

.btn {
  font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px; border: 1px solid #E0DAD1; background: #fff; color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #F8F5F0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: #e3b5b0; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 3px 9px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 17px; }

.alert { padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-info { background: var(--primary-soft); color: var(--primary-dark); }
.alert-warn { background: var(--warn-soft); color: var(--warn); }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.badge-pending { background: #eceff3; color: var(--muted); }
.badge-progress { background: var(--warn-soft); color: var(--warn); }
.badge-done { background: var(--ok-soft); color: var(--ok); }
.badge-info { background: var(--primary-soft); color: var(--primary-dark); }
.badge-red { background: var(--danger-soft); color: var(--danger); }
.text-red { color: var(--danger); font-weight: bold; }

/* ===== トースト・更新の帯 ===== */
#toast {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 1000;
  padding: 10px 18px; border-radius: 6px; background: var(--text); color: #fff; box-shadow: var(--shadow);
  display: none; max-width: 90vw;
}
#toast.error { background: var(--danger); }
#toast .btn { margin-left: 14px; background: #fff; color: var(--text); border-color: #fff; }
#update-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--primary); color: #fff;
  display: flex; gap: 12px; align-items: center; justify-content: center; padding: 10px 16px; flex-wrap: wrap;
}
#update-banner .btn { background: #fff; color: var(--primary-dark); border-color: #fff; }
#update-banner .btn-close { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

/* ===== ログイン ===== */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login-card { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 32px; max-width: 440px; width: 100%; text-align: center; }

@media (max-width: 640px) {
  main.page { padding: 12px 10px 80px; }
  /* スマホ幅：ロゴと名前の行の下に、メニューを 1 行で並べる（メニューの文字を途中で折り返さない） */
  .app-header { gap: 6px 12px; padding: 6px 12px 0; justify-content: space-between; }
  .app-header .brand img { height: 32px; }
  .app-header nav { order: 3; flex-basis: 100%; align-self: auto; }
  .app-header nav a { padding: 10px 8px; white-space: nowrap; }
}

/* ===== share-app の部品 ===== */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
main.page.narrow { max-width: 860px; }

/* 登録の流れ（1 アップロード → 2 中身を確認 → 3 公開）。いまどこにいるかを示す */
.steps { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 16px; font-size: 14px; }
.steps li { padding: 4px 12px; border-radius: 999px; background: #E9E4DC; color: var(--muted); font-weight: 700; }
.steps li.now { background: var(--primary); color: #fff; }
.steps li.done { background: var(--ok-soft); color: var(--ok); }

input[type=file] { font: inherit; padding: 10px; border: 2px dashed #D6CFC4; border-radius: 10px; background: #FBFAF7; width: 100%; }
.field { margin-bottom: 14px; }
.field input[type=text] { width: 100%; }
.hint { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

/* 公開前のプレビュー。PDF は枠の中に、画像はそのまま縮めて出す */
.preview-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.preview-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border: 1px solid var(--border); border-radius: 10px; }

/* 公開前の確認（SPEC §0 #22）。承認も通知も無いので、ここが最後の関門 */
.confirm-box { background: var(--warn-soft); border-left: 6px solid var(--warn); border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.confirm-box p { margin: 0 0 10px; color: var(--text); }
.confirm-box label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; margin: 0; }
.confirm-box input[type=checkbox] { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }

/* 公開中：URL と QR。入らない幅では QR の下へ積む（skill webapp-window-fit） */
.publish-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.publish-main { flex: 999 1 300px; min-width: 0; }
.qr-img { flex: none; width: 220px; height: 220px; border: 1px solid var(--border); border-radius: 10px; background: #fff; image-rendering: pixelated; }
.url-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.url-row input { flex: 1 1 16em; min-width: 12em; font-family: Consolas, 'Courier New', monospace; font-size: 14px; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* いま公開していないとき（非公開・期限切れ）の説明。ボタンは入らなければ次の行へ */
.state-note { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.state-note > span { flex: 999 1 20em; }

/* 公開の設定（期限・差し替え・非公開・削除）。項目ごとに線で区切る */
h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.manage-item { border-top: 1px solid var(--border); padding: 14px 0 6px; }
.manage-item:first-of-type { border-top: none; padding-top: 4px; }
.manage-item .hint { margin-bottom: 8px; }
.current-setting { margin: 0 0 8px; font-size: 14px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form input[type=file] { flex: 1 1 20em; min-width: 14em; width: auto; }

/* 表は枠（.table-wrap）の中だけ横スクロール。表と文の列に最小の幅を付け、列のほうが細らないように */
#list { min-width: 720px; }
#list th:first-child { min-width: 12em; }
#versions { min-width: 600px; }
#versions th:nth-child(4) { min-width: 10em; }
#users { min-width: 760px; }
#users th:nth-child(1) { min-width: 8em; }
#users th:nth-child(2) { min-width: 12em; }
#logs { min-width: 880px; }
#logs th:nth-child(2) { min-width: 15em; }
#logs th:nth-child(4) { min-width: 9em; }
#logs th:nth-child(5) { min-width: 12em; }
td.break, span.break { overflow-wrap: anywhere; }
td.num { text-align: right; white-space: nowrap; }

/* 管理画面の絞り込み。入らなければ次の行へ */
.filter-row { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.filter-row input[type=search] { flex: 0 1 22em; min-width: 14em; }
label.check-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--text); margin: 0; white-space: nowrap; cursor: pointer; }

dl.info { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
dl.info dt { color: var(--muted); }
dl.info dd { margin: 0; word-break: break-all; }