/* ═══════════════════════════════════════════════════════════════
   わがこと日本 — アプリ側 追加クローム
   （サイト内ナビ／我がこと帳ひとこと欄／登録案内／県ハイライト）
   ═══════════════════════════════════════════════════════════════ */

/* トップバー内ナビ（折返し禁止：ブランドとの重なり防止） */
.app-nav { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.app-nav::-webkit-scrollbar { display: none; }
header.topbar { flex-wrap: nowrap; }
.topbar .topbar-right { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 760px) {
  header.topbar { flex-wrap: wrap; }
  .app-nav { order: 4; flex-basis: 100%; padding: 2px 0 6px; }
}
.app-nav a {
  font-size: 12.5px; text-decoration: none; color: var(--ink-soft);
  padding: 6px 10px; border-radius: 7px; white-space: nowrap;
}
.app-nav a:hover { background: var(--bg-dim); color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--shu); font-weight: 700; }
.app-nav a[data-guest] {
  border: 1px solid var(--shu); color: var(--shu);
  border-radius: 999px; padding: 5px 13px; font-weight: 700;
}
.app-nav a[data-guest]:hover { background: var(--shu); color: #fff8ef; }
@media (max-width: 640px) {
  .app-nav a { font-size: 11.5px; padding: 5px 7px; }
}

/* 我がこと帳・ひとこと欄 */
.wk-noteform { margin-top: 16px; }
.wk-note-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.wk-note-text {
  width: 100%; font: inherit; font-family: var(--serif); font-size: 15px; line-height: 1.9;
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink); resize: vertical;
}
.wk-note-text:focus-visible { outline: 2px solid var(--shu); outline-offset: 1px; }
.wk-note-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.wk-note-save {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 9px 18px; border-radius: 8px; border: 0;
  background: var(--shu); color: #fff8ef;
}
.wk-note-save:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }
.wk-note-msg { font-size: 13px; color: var(--ink-soft); }
.wk-note-msg a { color: var(--shu); font-weight: 700; }

/* ゲストへの登録案内（1回だけ・閉じられる） */
.invite-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; max-width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow-lift);
  font-size: 13px; line-height: 1.7;
  animation: inviteIn var(--dur-m, .6s) var(--ease-lift, ease) both;
}
@keyframes inviteIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .invite-bar { animation: none; } }
.invite-bar .invite-go {
  flex: none; text-decoration: none; font-weight: 700; font-size: 13px;
  background: var(--shu); color: #fff8ef; border-radius: 999px; padding: 7px 16px;
}
.invite-bar .invite-close {
  flex: none; font-size: 15px; border: 0; background: none; color: var(--ink-soft);
  cursor: pointer; padding: 4px 6px; line-height: 1;
}

/* 登録直後：「あなたの県では」を灯す */
.cnode.c2.hl {
  border-color: var(--shu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shu) 22%, transparent);
}
.cnode.c2.hl i { color: var(--shu); font-weight: 700; }

/* 読了のしるし — 読み終えた瞬間の小さな報酬 */
.read-reward {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 61; max-width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--shu); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow-lift);
  font-size: 13px; line-height: 1.7;
  animation: inviteIn var(--dur-m, .6s) var(--ease-lift, ease) both;
}
@media (prefers-reduced-motion: reduce) { .read-reward { animation: none; } }
.read-reward .rr-seal {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--shu); color: var(--shu);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  writing-mode: vertical-rl;
}
.read-reward .rr-copy b { color: var(--shu); }
.read-reward .rr-quiz {
  flex: none; font-weight: 700; font-size: 13px; cursor: pointer;
  background: var(--shu); color: #fff8ef; border: 0; border-radius: 999px; padding: 7px 16px;
}
.read-reward .rr-close {
  flex: none; font-size: 15px; border: 0; background: none; color: var(--ink-soft);
  cursor: pointer; padding: 4px 6px; line-height: 1;
}