/* ============================================================
   tnnet tools 共通スタイル
   各ページの <style> より前に読み込む（ページ側の指定が勝つ）。
   ここに置くのは「全ページで同じであるべきもの」だけ：
   デザイントークン・リセット・上部ナビ・スマホ時のナビ折返し。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1a1a18;--muted:#6b6b66;--muted2:#9b9b94;--border:#e2e2dc;
  --bg:#f7f7f4;--white:#fff;--accent:#2a5c45;--accent-light:#e8f0eb;
  --accent-mid:#3d7a5e;--danger:#c0392b;--warn:#856404;--warn-bg:#fff3cd;
  --radius:6px;--radius-lg:10px;
  /* 上部ナビの実測高さ。折り返して高くなった分を sticky の top に反映するため JS が更新する */
  --nav-h:52px;
}
html,body{min-height:100vh;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}

/* ---- 上部ナビ ----
   幅が足りないときは右側の操作群を次の行へ折り返す（横スクロールを出さない）。
   高さは固定せず min-height にし、実測値を --nav-h に入れて配下の sticky 要素が追従する */
.nav{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;
  padding:6px 1.5rem;min-height:52px}
.nav-left{display:flex;align-items:center;gap:12px;min-width:0}
.nav-brand{font-family:'DM Serif Display',serif;font-size:1.05rem;color:var(--accent);text-decoration:none;white-space:nowrap}
.nav-brand span{font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:300;letter-spacing:.1em;color:var(--muted2);text-transform:uppercase;margin-left:8px}
.nav-sep{color:var(--border);font-size:1.2rem}
.nav-title{font-size:.85rem;font-weight:500;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.nav-user{font-size:.78rem;color:var(--muted);padding:4px 10px;background:var(--bg);border-radius:20px;white-space:nowrap}
.nav-link{font-size:.78rem;color:var(--muted);text-decoration:none;padding:5px 9px;border-radius:var(--radius);transition:background .15s;white-space:nowrap}
.nav-link:hover{background:var(--bg);color:var(--ink)}
.nav-link.danger:hover{color:var(--danger)}
.btn-back{font-size:.8rem;color:var(--muted);text-decoration:none;padding:5px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--white);cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-back:hover{background:var(--bg)}

/* ---- 右下のメッセージボタン（各ページにインラインで置かれている） ---- */
@media (max-width:600px){
  #message-btn{width:48px!important;height:48px!important;font-size:19px!important;bottom:12px!important;right:12px!important}
}

/* ---- スマホ ---- */
@media (max-width:600px){
  .nav{padding:6px 12px;gap:4px 8px}
  .nav-brand{font-size:1rem}
  .nav-brand span{display:none}       /* 副題は省く */
  .nav-right{gap:4px}
  .nav-link{padding:5px 6px;font-size:.72rem}
  .nav-user{padding:3px 8px;font-size:.72rem}
  .btn-back{padding:4px 8px;font-size:.74rem}
}