:root {
  /* オーク×真鍮（Oak & Brass）— favicon/ロゴの木目グラデーションに合わせた配色。 */
  --bg: #1b140d;
  --surface: #251b12;
  --surface-2: #2f2318;
  --border: #4a3826;
  --text: #f5efe4;
  --text-dim: #b3a08c;
  --accent: #c9973f;
  --accent-2: #d9793f;
  --danger: #e0604a;
  --radius: 14px;
  /* Interactive controls (inputs, secondary/neutral buttons, chips) sit on
     this lighter tone so they visibly "raise" off card backgrounds instead
     of blending into or receding behind them. */
  --control: #4f3d29;
  --control-hover: #614c34;
}

/* Always reserves the scrollbar's width, whether or not the page actually
   needs to scroll — otherwise content that grows just enough to trigger a
   scrollbar (e.g. a wrapped error message) visibly shifts everything
   sideways as the available width changes. */
html {
  scrollbar-gutter: stable;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* .app always wraps just the menu + screen name on every screen, so its
   spacing (and therefore the gap to the main content below) is identical
   everywhere. The main content itself lives in .app-content (single-column
   screens) or .app-wide (the top page's two-column area), both nested
   alongside .app inside .page-shell — that's what carries the page's
   trailing bottom space, not .app. */
.app {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.page-shell {
  width: 100%;
}

.app-content,
.app-wide {
  margin: 0 auto;
  padding: 0 16px 48px;
}

.app-content {
  max-width: 720px;
}

.app-wide {
  max-width: 1100px;
}

@media (min-width: 600px) {
  .app-content,
  .app-wide {
    padding: 0 24px 64px;
  }
}

/* ---------- Roulette ---------- */
.roulette-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.roulette-section h2,
.form-section h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.1rem;
  text-align: center;
}

.roulette-display-wrap {
  position: relative;
}

/* Height matches .field input exactly (10px 12px padding + 1px border +
   1rem/1.6 line-height), so it lines up with the title input on the left. */
.roulette-display {
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--control);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Reserves room on the right so a long title's ellipsis lands before the
   clear button instead of running underneath it. */
.roulette-display--result {
  padding-right: 38px;
}

.roulette-clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.roulette-clear-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  color: var(--text);
}

/* Without this, the unconditional display:flex above (an author rule)
   outranks the browser's built-in display:none for [hidden] (a UA-stylesheet
   rule) — author styles always win over UA styles regardless of specificity,
   so the JS hidden=true toggle would silently stop working. */
.roulette-clear-btn[hidden] {
  display: none;
}

.roulette-placeholder {
  color: var(--text-dim);
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roulette-display .roulette-title {
  font-size: 1rem;
  font-weight: 700;
  /* 紫文字は薄い紫系の背景と馴染みすぎてコントラストが低かったため、
     常に白系にして視認性を優先する（配信中に読み上げる前提の要素）。 */
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* flexアイテムは既定でmin-width:autoのため、内容（改行なしの全文）の
     幅より縮まらない。min-width:0でJS側の文字サイズ縮小が効くようにする。 */
  min-width: 0;
  max-width: 100%;
}

.roulette-display--spinning {
  border-color: var(--accent);
}

.roulette-display--result {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(201, 151, 63, 0.5), rgba(217, 121, 63, 0.32));
  animation: pop-in 0.35s ease;
}

@keyframes pop-in {
  0% { transform: scale(0.9); opacity: 0.4; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}

.roulette-display--spinning .roulette-title {
  animation: flicker 0.08s linear infinite;
}

@keyframes flicker {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* All buttons across every screen share this size (matches "ルーレットを回す"). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.btn i {
  margin-right: 4px;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Category chips: pressing one spins the roulette within that category only. */
.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Forces a line break right before the season buttons on narrow screens
   (see @media below) so 春/夏/秋/冬 always land together on their own row
   instead of being split arbitrarily wherever the previous row happens to
   run out of width. Inert (display:none) everywhere else. */
.category-break {
  display: none;
}

.btn-category {
  flex: 0 0 auto;
  background: rgba(201, 151, 63, 0.26);
  border: 1px solid rgba(201, 151, 63, 0.65);
  border-radius: 8px;
  padding: 5px 10px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.btn-category:hover:not(:disabled) {
  background: rgba(201, 151, 63, 0.4);
  border-color: var(--accent);
}

.btn-category:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-category:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* margin-top (not the preceding field's margin-bottom) sets this gap, so it's
   identical on both sides regardless of how tall each column's textarea is. */
.roulette-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn-add {
  background: #fbead0;
  color: #4a3220;
  box-shadow: 0 2px 12px rgba(201, 151, 63, 0.32);
}

.btn-add:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-add:disabled {
  background: var(--surface-2);
  color: var(--text-dim);
}

/* ---------- Form ---------- */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.field {
  margin-bottom: 14px;
}

/* Always the last field before a button row — the row's own margin-top
   provides that gap instead, so it can't double up with this one. */
.field-grow {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--control);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.field textarea {
  overflow-y: auto;
}

.field input:disabled,
.field textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* パスワード欄の表示/非表示トグルボタン。 */
.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  padding-right: 40px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.password-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.btn-secondary {
  background: var(--control);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--control-hover);
}

/* ---------- Navigation ---------- */
/* Fixed width on every screen, in every layout mode — never inherits a
   wider or narrower parent (e.g. the top page's .app-wide columns). */
.main-nav {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 20px;
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.main-nav-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav-link:hover {
  color: var(--text);
}

.main-nav-link.active {
  background: var(--accent);
  color: #fff;
}

.main-nav-link .count-badge {
  font-size: 0.68rem;
  padding: 1px 7px;
}

.main-nav-link.active .count-badge {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  color: #fff;
}

/* ---------- List ---------- */
.list-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.count-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.list-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.list-toolbar select {
  background: var(--control);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.list-toolbar select:focus {
  outline: none;
  border-color: var(--accent);
}

.list-toolbar .search-input {
  background: var(--control);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  flex: 1 1 160px;
  min-width: 0;
}

.list-toolbar .search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.list-toolbar .search-input::placeholder {
  color: var(--text-dim);
}

.select-all-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}

.select-all-label input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.list-toolbar .btn-delete {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 0.85rem;
}

.neta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.neta-item {
  background: var(--control);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.neta-item--flash {
  border-color: var(--accent);
  background: rgba(201, 151, 63, 0.18);
  animation: pop-in 0.35s ease;
}

.neta-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
  cursor: pointer;
}

.neta-item-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}

.neta-item-title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.neta-item-body {
  color: var(--text-dim);
  margin: 0 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.neta-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* One step lighter than .neta-item's own background — otherwise a button
   inside an already-elevated card would recede instead of standing out. */
.btn-edit {
  background: var(--control-hover);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-edit:hover {
  border-color: var(--accent);
}

.btn-delete {
  background: rgba(255, 92, 92, 0.24);
  color: #ffd2d2;
  border: 1px solid rgba(255, 92, 92, 0.6);
}

.btn-delete:hover {
  background: rgba(255, 92, 92, 0.36);
}

.btn-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.btn-pin:hover {
  color: var(--accent);
}

.btn-pin.is-pinned {
  color: var(--accent);
}

.neta-item--pinned {
  border-color: var(--accent);
}

.field-warning {
  color: var(--danger);
  font-size: 0.8rem;
  margin: 6px 0 0;
}

/* ---------- Confirm modal (replaces window.confirm) ---------- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.confirm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: pop-in 0.18s ease;
}

.confirm-message {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-line;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-actions .btn {
  padding: 10px 20px;
  font-size: 0.82rem;
}

/* ---------- Toast (undo notifications etc.) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 0.85rem;
  max-width: min(90vw, 420px);
  z-index: 1100;
  animation: pop-in 0.18s ease;
}

.toast-action {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.toast-action:hover {
  text-decoration: underline;
}

.empty-message {
  color: var(--text-dim);
  text-align: center;
  padding: 24px 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- Account bar (login status, every screen) ---------- */
.account-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* PC幅のみ、アカウントバー中央に固定表示するロゴ。左右のステータス
   文字・リンクの長さに関わらず常に真ん中に来るよう絶対配置にしている。
   モバイルはトップ画面専用の大きいロゴ（.top-logo-mobile）に任せ、
   ここは非表示にする。 */
.account-bar-logo {
  display: none;
}

@media (min-width: 480px) {
  .account-bar {
    min-height: 64px;
  }

  .account-bar-logo {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 60px;
    width: auto;
    pointer-events: none;
  }
}

.account-bar-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ログイン中のみ<a>で描画され、アカウント情報ページへのリンクになる。
   ゲスト時は<span>のままなのでここには当たらない。 */
a.account-bar-status {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.account-bar-status:hover {
  color: var(--text);
  text-decoration: underline;
}

.account-bar-action {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 2px 4px;
}

.account-bar-action:hover {
  text-decoration: underline;
}

.account-bar-logout {
  color: var(--danger);
}

.account-bar-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---------- Login / sign-up screen ---------- */
body.page-auth .page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* .auth-wrap has no CSS of its own otherwise, which left it sizing itself
   via shrink-to-fit as a flex item — .auth-card's own width:100% then had
   nothing definite to resolve against, so its longest line of text could
   nudge the whole card a couple pixels wider. An explicit 100% width here
   gives .auth-card a fixed reference regardless of its content. */
.auth-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}

/* お問い合わせフォームは本文が長め・プレースホルダーも長いため、
   ログイン系カードより横幅を広く取る。 */
@media (min-width: 660px) {
  body.page-contact .auth-card {
    max-width: 620px;
  }
}

.auth-card h1 {
  font-size: 1.3rem;
  text-align: center;
  margin: 0 0 6px;
}

.auth-card h1 i {
  color: var(--accent);
  margin-right: 0;
}

/* min-height reserves room for 2 lines — ログイン/新規登録で文言の長さが
   違っても折り返し行数が変わらず、切り替え時にカードの高さが変わらない。 */
.auth-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0 0 20px;
}

/* hidden時もdisplay:noneにせず高さだけ保つことで、エラー表示の有無で
   カード全体のサイズが変わらないようにする（JS側はhidden切り替えのまま）。
   white-space:pre-lineで、長い文言はJS側の\nで狙った位置だけ改行できる
   （自動折り返し任せだと不自然な位置で割れることがあるため）。 */
.auth-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  color: var(--danger);
  background: rgba(255, 92, 92, 0.14);
  border: 1px solid rgba(255, 92, 92, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  margin: 0 0 14px;
  overflow: hidden;
}

.auth-error[hidden] {
  display: flex;
  visibility: hidden;
}

/* 移行成功などの通知は同じ箱をエラーとは違う色味で使い回す。 */
.auth-error.auth-message--success {
  color: var(--text);
  background: rgba(201, 151, 63, 0.18);
  border-color: rgba(201, 151, 63, 0.48);
}

.auth-actions {
  justify-content: stretch;
}

.auth-actions .btn {
  width: 100%;
}

.auth-mode-toggle {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  margin-top: 18px;
  padding: 4px;
}

.auth-mode-toggle:hover {
  text-decoration: underline;
}

/* パスワード欄のラベルと「お忘れですか？」リンクを横並びにする行。 */
.auth-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.auth-field-header label {
  margin-bottom: 0;
}

.auth-inline-link {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}

.auth-inline-link:hover {
  text-decoration: underline;
}

.auth-inline-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* アカウント削除ボタンをフォーム操作から視覚的に切り離す区画。 */
.auth-danger-zone {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.auth-danger-zone p {
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0 0 12px;
}

.auth-danger-zone .btn {
  width: 100%;
}

.auth-guest-link {
  display: block;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-top: 10px;
  text-decoration: none;
}

.auth-guest-link:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---------- Guide / usage page (no nav — just a back link) ---------- */
body.page-guide .page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 32px 16px;
}

.guide-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.guide-card {
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 36px;
}

.guide-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 22px;
}

.guide-back:hover {
  color: var(--text);
}

.guide-card h1 {
  font-size: 1.4rem;
  text-align: center;
  margin: 0 0 28px;
}

.guide-card h1 i {
  color: var(--accent);
  margin-right: 0;
}

.guide-section {
  margin-bottom: 28px;
}

.guide-section:last-child {
  margin-bottom: 0;
}

.guide-section h2 {
  font-size: 1.05rem;
  color: var(--accent);
  margin: 0 0 12px;
}

.guide-section p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.85;
}

.guide-section p:last-child {
  margin-bottom: 0;
}

/* はじめにセクションだけ、手書き風フォント＋暖色でやわらかい雰囲気にする
   （外部の実画像URLを断定的に用意できないため、装飾アイコンを"イラスト代わり"
   の透かしとして右上に添えている）。 */
.guide-intro-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 178, 107, 0.14), rgba(217, 121, 63, 0.08));
  border: 1px dashed rgba(255, 178, 107, 0.5);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
}

.guide-intro-section h2 {
  color: #ffb26b;
}

.guide-intro-icon {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 3.4rem;
  color: rgba(255, 178, 107, 0.18);
  transform: rotate(12deg);
  pointer-events: none;
}

.guide-intro {
  position: relative;
  font-family: "Klee One", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 600;
}

.guide-intro p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.9;
}

.guide-intro p:last-child {
  margin-bottom: 0;
}

.guide-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guide-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
}

.guide-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.guide-step-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(201, 151, 63, 0.22);
  color: var(--accent);
  font-size: 0.9rem;
}

.guide-step-title {
  font-weight: 700;
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
}

.guide-step > p {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.75;
}

/* ---------- Guide step previews: small non-interactive mockups reusing ---------- */
/* ---------- the real app's colors so the described UI is recognizable ---------- */
.guide-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
}

/* 使い方ページのプレビューは実際のUIコンポーネント（.field, .btn-category,
   .neta-item, .account-bar など）をそのまま流用している。ここにあるのは
   guide.html固有の微調整だけ。 */
.guide-preview .field {
  margin-bottom: 0;
}

.guide-preview .list-toolbar {
  margin-bottom: 0;
}

.guide-mock-account-bar {
  margin-bottom: 0;
  padding: 0;
  /* 実物の.account-barは中央固定ロゴ用にmin-height:64pxを確保しているが、
     ここではロゴを置かないので詰めて表示する。 */
  min-height: 0;
}

.guide-mock-arrow {
  align-self: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  .app {
    padding: 32px 24px;
  }
}

/* トップ画面のみ・モバイル幅のみで表示する大きいロゴ。PC版は
   アカウントバー中央の.account-bar-logoが担当するため、ここでは常に
   非表示にしておき、@media側で表示を切り替える。パネルを開いている
   間は縦スペースを譲るため非表示にする。 */
.mobile-top-spacer {
  display: none;
}

.mobile-bottom-spacer {
  display: none;
}

/* ---------- Top page on phones: pick a panel from two buttons, then it ---------- */
/* ---------- opens full-screen instead of both columns being stacked ---------- */
.mobile-panel-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.btn-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--control);
  border: 1px solid rgba(201, 151, 63, 0.6);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.btn-panel-toggle i:first-child {
  margin-right: 8px;
  color: var(--accent);
}

.btn-panel-toggle:hover {
  background: var(--control-hover);
  border-color: var(--accent);
}

.btn-panel-toggle:active {
  transform: scale(0.98);
}

@media (max-width: 479px) {
  .main-columns > .form-section,
  .main-columns > .roulette-section {
    display: none;
  }

  /* Fills whatever height is left below the (always-visible) nav/header
     instead of scrolling — the heading stays fixed-size, the body
     textarea (the one field with room to give) absorbs the rest, so the
     add button never gets pushed off-screen. See body.page-fit below for
     the flex chain that carves out that remaining height. */
  .main-columns > .form-section.mobile-open,
  .main-columns > .roulette-section.mobile-open {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    gap: 8px;
  }

  /* Edit page: same fill-the-height treatment, minus the border/margin
     reset — this one keeps its card look, index's picker panels don't. */
  .app-content > .form-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
  }

  /* The picker buttons make no sense alongside an already-open panel. */
  .app-wide.mobile-panel-open .mobile-panel-buttons {
    display: none;
  }

  .mobile-top-spacer {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
  }

  .top-logo-mobile {
    display: block;
    height: 100px;
    width: auto;
  }

  /* パネルを開いている間はフォーム欄の縦スペースを優先する。
     bottom側も消さないと、page-fitモードでflex:1のまま残り続けて
     .main-columnsと space を奪い合い、ヘッダー直下に大きな空白が
     できてしまう。 */
  .app-wide.mobile-panel-open .mobile-top-spacer,
  .app-wide.mobile-panel-open .mobile-bottom-spacer {
    display: none;
  }

  .form-section.mobile-open h2,
  .roulette-section.mobile-open h2 {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .form-section.mobile-open form,
  .app-content > .form-section form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-section.mobile-open .field,
  .roulette-section.mobile-open > .field,
  .app-content > .form-section .field {
    margin-bottom: 0;
  }

  .form-section.mobile-open .field:not(.field-grow),
  .roulette-section.mobile-open > .field:not(.field-grow),
  .app-content > .form-section .field:not(.field-grow) {
    flex-shrink: 0;
  }

  .form-section.mobile-open .field-grow,
  .roulette-section.mobile-open > .field-grow,
  .app-content > .form-section .field-grow {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .form-section.mobile-open .field-grow textarea,
  .roulette-section.mobile-open .field-grow textarea,
  .app-content > .form-section .field-grow textarea {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .form-section.mobile-open .form-actions,
  .roulette-section.mobile-open .roulette-buttons,
  .app-content > .form-section .form-actions {
    flex-shrink: 0;
    margin-top: 0;
  }

  /* ---------- Everywhere on phones: nav pinned to the bottom (thumb ---------- */
  /* ---------- reach), no screen-name heading, smaller type/controls ---------- */
  .app {
    padding: 0;
  }

  /* .app has padding:0 above, so this is now the only in-flow content at
     the top of the screen — give it back some breathing room. */
  .account-bar {
    padding: 12px 16px 0;
    margin-bottom: 4px;
  }

  .app-content,
  .app-wide {
    /* margin: 0 (not auto) matters once these become flex items below —
       auto cross-axis margins opt an item out of stretch sizing, which
       silently shrink-wrapped and re-centered them at a fraction of the
       screen width. */
    margin: 0;
    padding-top: 16px;
    padding-bottom: var(--nav-clearance, 76px);
  }

  .main-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 200;
    margin: 0;
    max-width: none;
    padding: 3px;
    gap: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  }

  .main-nav-link {
    padding: 5px 8px;
    font-size: 0.72rem;
    gap: 4px;
  }

  /* Clears the fixed bottom nav bar instead of hiding behind it. */
  .toast {
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 64px));
    max-width: calc(100vw - 32px);
  }

  .count-badge {
    padding: 1px 6px;
    font-size: 0.65rem;
  }

  .roulette-section,
  .form-section,
  .list-section {
    padding: 14px;
  }

  .roulette-section h2,
  .form-section h2 {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .field label {
    font-size: 0.75rem;
    margin-bottom: 4px;
  }

  .field input,
  .field textarea {
    font-size: 0.88rem;
    padding: 8px 10px;
  }

  .roulette-display {
    height: 40px;
    padding: 8px 10px;
  }

  /* The shorthand padding above resets padding-right too, which would
     otherwise cancel out the room reserved for the clear button. */
  .roulette-display--result {
    padding-right: 34px;
  }

  .roulette-clear-btn {
    width: 20px;
    height: 20px;
    right: 6px;
  }

  .roulette-placeholder,
  .roulette-display .roulette-title {
    font-size: 0.82rem;
  }

  .btn {
    padding: 10px 18px;
    font-size: 0.72rem;
  }

  .btn-category {
    padding: 4px 8px;
    font-size: 0.72rem;
  }

  .category-break {
    display: block;
    flex-basis: 100%;
    width: 0;
  }

  .btn-panel-toggle {
    padding: 12px 14px;
    font-size: 0.85rem;
  }

  .list-toolbar {
    gap: 8px;
    margin-bottom: 8px;
  }

  /* flex-basis 100% forces the sort dropdown onto its own row; "select
     all" and "delete selected" then share the row below it, grouped
     together since that's the pair a user acts on together. */
  .list-toolbar select,
  .list-toolbar .search-input {
    flex: 1 1 100%;
    padding: 5px 8px;
    font-size: 0.78rem;
  }

  .select-all-label {
    font-size: 0.78rem;
    gap: 4px;
  }

  .select-all-label input,
  .neta-item-checkbox {
    width: 14px;
    height: 14px;
  }

  .list-toolbar .btn-delete {
    margin-left: auto;
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  .neta-item {
    padding: 10px 12px;
  }

  .neta-item-title {
    font-size: 0.92rem;
  }

  .neta-item-body {
    display: none;
  }

  .neta-item-actions {
    gap: 6px;
  }

  .btn-edit,
  .neta-item-actions .btn-delete {
    padding: 8px 14px;
    font-size: 0.72rem;
  }

  .guide-card {
    padding: 22px 18px 28px;
  }

  .guide-intro-section {
    padding: 16px 16px 14px;
  }

  .guide-intro-icon {
    font-size: 2.6rem;
  }

  .guide-intro p {
    font-size: 0.82rem;
  }

  .guide-step-title {
    font-size: 0.88rem;
  }

  .guide-step-icon {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }
}

/* ---------- Top page: form (left) and roulette (right) side by side ---------- */
@media (min-width: 480px) {
  .main-columns {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .main-columns > .form-section,
  .main-columns > .roulette-section {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }

  .main-columns .roulette-buttons,
  .main-columns .form-actions {
    flex-wrap: nowrap;
  }

  /* Desktop/tablet always shows both columns — the mobile picker screen
     never applies here. */
  .mobile-panel-buttons {
    display: none;
  }
}

/* ---------- Every phone screen: header's gone and nav is pinned to the ---------- */
/* ---------- bottom, so this fills the remaining height instead of ---------- */
/* ---------- leaving the page to scroll past a mostly-empty screen ---------- */
@media (min-height: 500px) and (max-width: 479px) {
  body.page-fit {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.page-fit .page-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.page-fit .app {
    flex-shrink: 0;
  }

  body.page-fit .app-content,
  body.page-fit .app-wide {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Top page only: no panel open centers the picker buttons in the
     available space; panel open switches .main-columns below to flex:1
     and it fills that same space edge-to-edge instead. */
  body.page-fit .app-wide {
    justify-content: center;
  }

  body.page-fit .mobile-panel-buttons {
    flex-shrink: 0;
  }

  /* ボタン群自体は画面中央に来てほしいので、上下に同じ伸縮量の余白を
     置いて挟み込む（片方だけ伸ばすとボタンごと下や上に寄ってしまう）。
     ロゴは上側の余白の中でさらに中央に配置し、結果として
     「ヘッダーとボタン群の間の余白の中央」に来るようにする。 */
  body.page-fit .mobile-top-spacer,
  body.page-fit .mobile-bottom-spacer {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0;
  }

  body.page-fit .mobile-top-spacer {
    align-items: center;
    justify-content: center;
  }

  body.page-fit .main-columns {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.page-fit .app-wide.mobile-panel-open .main-columns {
    flex: 1 1 auto;
  }

  /* Edit page: title stays fixed-size, the body textarea (the field with
     room to give) absorbs whatever height is left instead of leaving
     blank space below the buttons. */
  body.page-fit .app-content > .form-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body.page-fit .app-content > .form-section form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* List page: the card list scrolls inside its own box instead of the
     whole page, so cards never end up rendered underneath the floating
     bottom nav mid-scroll. */
  body.page-list .list-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.page-list .neta-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  body.page-list .empty-message {
    flex: 1 1 auto;
  }
}

/* ---------- Shared app shell: every screen fits a typical display, ---------- */
/* ---------- same nav/header position & size, no page-level scroll ---------- */
@media (min-height: 500px) and (min-width: 480px) {
  body.page-fit {
    height: 100vh;
    overflow: hidden;
  }

  /* .app is always just the fixed-size nav+header wrapper now — .page-shell
     is the one that fills the viewport height (below), so .app itself
     must stay at its natural content height on every screen. */
  body.page-fit .app {
    max-width: 640px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 20px;
  }

  body.page-fit .page-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
  }

  body.page-fit .app-content,
  body.page-fit .app-wide {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.page-fit .app-content {
    max-width: 640px;
  }

  body.page-fit .app-wide {
    max-width: 1100px;
  }

  /* Nav never shrinks — the columns below fill the rest, and each
     column's body textarea flexes to absorb the remaining space. */
  body.page-fit .main-nav {
    flex-shrink: 0;
  }

  body.page-fit .main-columns {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }

  body.page-fit .main-nav {
    margin-bottom: 0;
    padding: 3px;
  }

  body.page-fit .roulette-section,
  body.page-fit .form-section,
  body.page-fit .list-section {
    padding: 12px 18px;
    margin-bottom: 0;
  }

  /* All spacing between a section's heading/fields/button-row comes from
     a single gap value on the flex column (below) rather than individual
     margins, so the left and right columns can never drift out of sync. */
  body.page-fit .roulette-section h2,
  body.page-fit .form-section h2 {
    margin-bottom: 0;
  }

  body.page-fit .field {
    margin-bottom: 0;
  }

  body.page-fit .roulette-buttons,
  body.page-fit .form-actions {
    margin-top: 0;
  }

  /* Each column and its body field/textarea flex to fill whatever vertical
     space nav/header leave behind, independently in both columns.
     flex-basis 0 (not auto) keeps the two columns equal width. */
  body.page-fit .form-section,
  body.page-fit .roulette-section {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  body.page-fit .form-section form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  body.page-fit .field-grow {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.page-fit .field-grow textarea {
    flex: 1 1 auto;
    min-height: 56px;
    max-height: 320px;
  }

  /* List page only: the list section fills remaining space and scrolls internally */
  body.page-list .list-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.page-list .neta-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  body.page-list .empty-message {
    flex: 1;
  }
}