/*
 * unnook スタイル（共通の見た目）v1 2026-11-12
 * 正本：700_Private/100_Projects/140_unnook/002_unnookスタイル.md
 * すべてのページがこの 1 ファイルを読み込む。色・余白・部品はここだけで決め、ページ側で直書きしない。
 * 読み込み方：<link rel="stylesheet" href="https://unnook.net/ui/unnook.css">
 */

/* ---------- 1. トークン（色・形・余白） ---------- */
/* 色はテクラボと同じ青系（2026-11-12 東海林さん「ベースはテクラボと同じようにしたい」）。
   値の元：050_テクラボ/010_app/src/app/globals.css */
:root {
  --u-bg: #E6F1FC;          /* 地：うすい空色 */
  --u-surface: #FFFFFF;     /* カード */
  --u-surface-2: #F0F0F0;   /* 一段沈んだ面・表の見出し */
  --u-soft: #E6F1FC;        /* 印・選択中の地 */
  --u-ink: #222222;         /* 文字 */
  --u-muted: #6B7480;       /* 補足の文字 */
  --u-line: #D8D8D8;        /* 線 */
  --u-brand: #0074D9;       /* 主色：青 */
  --u-brand-hover: #005BB0;
  --u-on-brand: #FFFFFF;    /* 主色の上の文字 */
  --u-deep: #052B6B;        /* 紺：ロゴの灯りなど */
  --u-link: #0074D9;
  --u-ok: #1F7A45;     --u-ok-bg: #E7F6EC;
  --u-warn: #92400E;   --u-warn-bg: #FFFBEB; --u-mark: #FDE68A;
  --u-danger: #BE123C; --u-danger-bg: #FFF1F2;
  --u-focus: rgba(0, 116, 217, .25);
  --u-gold: #D99A00;        /* ★お気に入り */

  --u-radius: 16px;         /* カード */
  --u-radius-sm: 12px;      /* ボタン・入力欄（テクラボと同じ） */
  --u-shadow: 0 1px 2px rgba(0, 0, 0, .04);

  --u-s1: 4px; --u-s2: 8px; --u-s3: 12px; --u-s4: 16px; --u-s5: 24px; --u-s6: 32px; --u-s7: 48px;
  --u-width: 1080px;        /* 本文の最大幅 */
  --u-gutter: 16px;         /* スマホの左右の余白 */

  --u-font: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  color-scheme: light;
}

/* ダーク：OS の設定に合わせる。ただし手動でライトを選んだときは除く */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --u-bg: #0F1620; --u-surface: #182230; --u-surface-2: #1F2A38; --u-soft: #1E3A5F;
    --u-ink: #E8EDF3; --u-muted: #9AA7B5; --u-line: #2A3644;
    --u-brand: #4DA3FF; --u-brand-hover: #3B8FE6; --u-on-brand: #FFFFFF;
    --u-deep: #E8EDF3; --u-link: #4DA3FF;
    --u-ok: #86EFAC; --u-ok-bg: #12301F; --u-warn: #FCD34D; --u-warn-bg: #33250D; --u-mark: #7C5E10;
    --u-danger: #FDA4AF; --u-danger-bg: #3A1720;
    --u-focus: rgba(77, 163, 255, .35);
    --u-gold: #F5C542;
    --u-shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --u-bg: #0F1620; --u-surface: #182230; --u-surface-2: #1F2A38; --u-soft: #1E3A5F;
  --u-ink: #E8EDF3; --u-muted: #9AA7B5; --u-line: #2A3644;
  --u-brand: #4DA3FF; --u-brand-hover: #3B8FE6; --u-on-brand: #FFFFFF;
  --u-deep: #E8EDF3; --u-link: #4DA3FF;
  --u-ok: #86EFAC; --u-ok-bg: #12301F; --u-warn: #FCD34D; --u-warn-bg: #33250D; --u-mark: #7C5E10;
  --u-danger: #FDA4AF; --u-danger-bg: #3A1720;
  --u-focus: rgba(77, 163, 255, .35);
  --u-gold: #F5C542;
  --u-shadow: none;
  color-scheme: dark;
}

/* 文字の大きさ：個人の設定 3 段階（テクラボと同じ。標準＝中 90％・大 100％・小 80％） */
:root { font-size: 90%; }
:root[data-text="lg"] { font-size: 100%; }
:root[data-text="sm"] { font-size: 80%; }

/* ---------- 2. 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* スクロールバーの場所をいつも空けておく（中身の長さが変わるたびに、画面の幅が変わってガタつかないように） */
html { scrollbar-gutter: stable; }
body {
  min-height: 100svh;
  background: var(--u-bg);
  color: var(--u-ink);
  font-family: var(--u-font);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
a { color: var(--u-link); text-underline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.4; margin: 0; font-weight: 700; }
/* 見出しは行の長さをそろえて、最後の 1〜2 文字だけが次の行に落ちないようにする（「…バックアッ／プ」を防ぐ）。
   日本語は文節で折り返す（対応しているブラウザだけ。対応していなくても崩れない） */
h1, h2, h3, h4 { text-wrap: balance; word-break: auto-phrase; }
p { margin: 0; }
p, li, dd { text-wrap: pretty; }
/* 文節で折り返すのは、短い説明文だけ（長い本文でやると行がガタガタに短くなる） */
.u-page-head p, .u-card > p, .u-notice { word-break: auto-phrase; }
:focus-visible { outline: 3px solid var(--u-focus); outline-offset: 2px; border-radius: 6px; }
.u-num { font-variant-numeric: tabular-nums; }
.u-muted { color: var(--u-muted); }
.u-small { font-size: .875rem; }
.u-hidden { display: none !important; }
.u-mt { margin-top: var(--u-s4); }        /* 上に標準の間をあける */
.u-mt-lg { margin-top: var(--u-s6); }

/* ---------- 3. 画面の型（ヘッダー・本文・フッター） ---------- */
/* ヘッダー：テクラボの帯と同じ（高さ 72px・カードの色・下線・左右 16px／768px から 40px） */
.u-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-line);
}
.u-header-in {
  height: 72px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--u-s3);
}
@media (min-width: 768px) { .u-header-in { padding: 0 40px; } }
.u-header-left { display: flex; align-items: center; gap: var(--u-s3); min-width: 0; }
.u-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--u-ink); text-decoration: none; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
/* マークは図形が箱の 8〜56（64 のうち 48）なので、箱を 34px にすると見える四角が文字ロゴの高さ（k の上〜文字の下）とそろう */
.u-brand img, .u-brand svg { width: 34px; height: 34px; }
.u-brand-name { font-size: 1.125rem; }
/* 文字ロゴ（wordmark-light.svg／wordmark-dark.svg）。縦横比 649:167 */
.u-brand img.u-word { width: auto; height: 26px; }
/* ロゴは明暗で 2 枚を切り替える（mark-light.svg と mark-dark.svg を並べて置く） */
.u-mark-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .u-mark-light { display: none !important; }
  :root:not([data-theme="light"]) .u-mark-dark { display: inline-block !important; }
}
:root[data-theme="dark"] .u-mark-light { display: none !important; }
:root[data-theme="dark"] .u-mark-dark { display: inline-block !important; }
.u-crumb { color: var(--u-muted); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.u-crumb::before { content: "/"; margin-right: var(--u-s2); color: var(--u-line); }
/* ルームの名前はリンクにして、押すとルームのトップへ戻る（ページの中に「トップへ戻る」ボタンを置かない） */
a.u-crumb { text-decoration: none; }
a.u-crumb:hover { color: var(--u-brand); }
@media (max-width: 520px) { .u-crumb { font-size: .75rem; } }  /* スマホでも場所の表示は出す（押すと 1 つ上へ戻る。長ければ … で切る） */
/* 右上：テクラボと同じ並び（名前｜文字の大きさ｜明暗｜ログアウト）。間に縦線 */
.u-header-tools { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; gap: 12px; font-size: .875rem; font-weight: 700; }
@media (min-width: 768px) { .u-header-tools { gap: 20px; font-size: 1rem; } }
.u-user { display: none; color: var(--u-ink); text-decoration: none; white-space: nowrap; }
.u-user:hover { color: var(--u-brand); }
@media (min-width: 1024px) { .u-user { display: inline; } }
.u-sep { display: none; width: 1px; height: 28px; background: var(--u-line); }
@media (min-width: 640px) { .u-sep { display: block; } }
.u-sep-lg { display: none !important; }
@media (min-width: 1024px) { .u-sep-lg { display: block !important; } }
/* スマホ（520px まで）：右上は三本線（.u-menu-btn）だけ。押すと、名前・文字の大きさ・明暗・ログアウトが下に開く（動きは unnook.js） */
.u-menu-btn { display: none; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--u-ink); cursor: pointer; align-items: center; justify-content: center; flex: none; }
.u-menu-btn svg { width: 24px; height: 24px; }
.u-menu-btn:hover, .u-header.is-menu-open .u-menu-btn { background: var(--u-soft); color: var(--u-brand); }
/* 読み込み直す：ホーム画面のアプリには再読み込みのボタンが無いので、スマホのメニューにだけ出す */
.u-reload { display: none; font: inherit; font-weight: 700; color: var(--u-ink); background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 520px) {
  .u-header-in { position: relative; }
  .u-header.is-menu-open .u-reload { display: block; }
  .u-menu-btn { display: inline-flex; }
  .u-header-tools { display: none; }
  .u-header.is-menu-open .u-header-tools {
    display: flex; position: absolute; top: calc(100% + 1px); right: 12px; width: max-content; min-width: 200px; max-width: calc(100vw - 24px); z-index: 50;
    flex-direction: column; align-items: flex-start; gap: var(--u-s4); padding: var(--u-s4);
    background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18); font-size: .9375rem;
  }
  .u-header.is-menu-open .u-user { display: block; color: var(--u-muted); font-size: .8125rem; white-space: normal; overflow-wrap: anywhere; }
  .u-header.is-menu-open .u-sep { display: block; width: 100%; height: 1px; }
}
/* 文字の大きさ：「Aa 標準」の丸いボタン（幅 86px・高さ 36px） */
.u-textsize {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; width: 86px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-ink);
  font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.u-textsize .u-aa { font-size: 1rem; line-height: 1; }
.u-textsize .u-size { font-size: .75rem; color: var(--u-muted); }
/* 明暗：太陽と月の丸いボタン（幅 70px・高さ 36px）。今の側に丸い地 */
.u-theme {
  display: inline-flex; align-items: center; justify-content: space-between;
  height: 36px; width: 70px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-muted);
  cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.u-theme > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: var(--u-muted); }
.u-theme > span.is-on { background: var(--u-soft); color: var(--u-brand); }
.u-theme svg { width: 18px; height: 18px; }
/* ログアウト：青い太字の文字 */
.u-logout { font: inherit; font-weight: 700; color: var(--u-brand); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.u-logout:hover { color: var(--u-brand-hover); }

.u-main { max-width: var(--u-width); margin: 0 auto; padding: var(--u-s6) var(--u-gutter) var(--u-s7); }
.u-page-head { margin-bottom: var(--u-s5); }
.u-page-head h1 { font-size: 1.625rem; }
.u-page-head p { margin-top: var(--u-s2); color: var(--u-muted); }
/* 表題の横のガイドへのアイコン（オーナーだけ。Garden のマニュアルの印と同じ考え方） */
.u-guide-link { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: var(--u-s2); vertical-align: -3px; border-radius: 50%; color: var(--u-muted); text-decoration: none; }
.u-guide-link:hover { color: var(--u-brand); background: var(--u-soft); }
.u-guide-link svg { width: 18px; height: 18px; }
.u-section { margin-top: var(--u-s6); }
.u-page-head + .u-section, .u-page-head + .u-sort-status + .u-section { margin-top: 0; }  /* 見出しの直後は余白を重ねない */
.u-section > h2 { font-size: 1.125rem; margin-bottom: var(--u-s3); }

/* 並べる：カードの格子（スマホで横にはみ出さないよう 1 列目から minmax(0,1fr)） */
.u-grid { display: grid; gap: var(--u-s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .u-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .u-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 縦に並べる。隙間で空ける（form の先頭に Next.js が足す隠し入力があっても、最初の項目の上が空かない） */
.u-stack { display: flex; flex-direction: column; gap: var(--u-s4); }
.u-stack > .u-check, .u-stack > .u-btn { align-self: flex-start; }
.u-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s3); }

/* ---------- 4. 部品 ---------- */
.u-card { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); padding: var(--u-s5); box-shadow: var(--u-shadow); min-width: 0; }
.u-card > h2, .u-card > h3 { font-size: 1.0625rem; margin-bottom: var(--u-s2); }
a.u-card { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.u-card:hover { border-color: var(--u-brand); transform: translateY(-1px); }
.u-card-meta { margin-top: var(--u-s3); color: var(--u-muted); font-size: .8125rem; }

.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--u-s2);
  font: inherit; font-weight: 700; font-size: .9375rem; line-height: 1.4;
  padding: 11px 20px; border-radius: var(--u-radius-sm); border: 1px solid var(--u-brand);
  background: var(--u-brand); color: var(--u-on-brand); cursor: pointer; text-decoration: none;
}
.u-btn:hover { background: var(--u-brand-hover); border-color: var(--u-brand-hover); }
.u-btn:disabled { opacity: .55; cursor: not-allowed; }
.u-btn-ghost { background: transparent; color: var(--u-ink); border-color: var(--u-line); }
.u-btn-ghost:hover { background: var(--u-surface-2); border-color: var(--u-line); }
.u-btn-danger { background: transparent; color: var(--u-danger); border-color: currentColor; }
.u-btn-danger:hover { background: var(--u-danger-bg); border-color: currentColor; }
.u-btn-block { width: 100%; }
.u-btn-sm { padding: 6px 12px; font-size: .8125rem; }

.u-field { display: block; }
fieldset.u-field { border: 0; padding: 0; margin: 0; min-width: 0; }  /* 上下の空きは並べる側（.u-stack の隙間）に任せる */
/* 一覧の絞り込み（FilterBox）：チェック中は data-off の行を隠す */
.u-filter.is-hiding [data-off] { display: none; }
.u-field > span { display: block; font-weight: 700; font-size: .875rem; margin-bottom: var(--u-s1); }
.u-field small { display: block; color: var(--u-muted); font-size: .8125rem; margin-top: var(--u-s1); }
.u-input, .u-select, .u-textarea {
  width: 100%; font: inherit; color: var(--u-ink); background: var(--u-surface);
  border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); padding: 10px 12px;
}
.u-input:focus, .u-select:focus, .u-textarea:focus { outline: 3px solid var(--u-focus); outline-offset: 0; border-color: var(--u-brand); }
.u-check { display: inline-flex; align-items: center; gap: var(--u-s2); }
.u-check input { width: 18px; height: 18px; accent-color: var(--u-brand); }

.u-table-wrap { overflow-x: auto; border: 1px solid var(--u-line); border-radius: var(--u-radius); background: var(--u-surface); }
.u-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.u-table th, .u-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--u-line); vertical-align: top; }
.u-table th { background: var(--u-surface-2); font-size: .8125rem; font-weight: 700; color: var(--u-muted); white-space: nowrap; }
.u-table tr:last-child td { border-bottom: 0; }
.u-table td.u-num, .u-table th.u-num { text-align: right; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }  /* 数字は途中で折り返さない（スマホで 17,00／0 にならないように） */
/* 折り返さない（日付・時刻・金額・番号の列など）。表の外でも使える */
.u-nowrap, .u-table td.u-nowrap, .u-table th.u-nowrap { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }

.u-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--u-soft); color: var(--u-muted); white-space: nowrap; }
.u-badge-ok { background: var(--u-ok-bg); color: var(--u-ok); }
.u-badge-warn { background: var(--u-warn-bg); color: var(--u-warn); }
.u-badge-danger { background: var(--u-danger-bg); color: var(--u-danger); }
.u-badge-brand { background: var(--u-soft); color: var(--u-brand); }

.u-notice { border-radius: var(--u-radius-sm); padding: var(--u-s3) var(--u-s4); background: var(--u-surface-2); font-size: .9375rem; }
.u-notice-ok { background: var(--u-ok-bg); color: var(--u-ok); }
.u-notice-warn { background: var(--u-warn-bg); color: var(--u-warn); }
.u-notice-danger { background: var(--u-danger-bg); color: var(--u-danger); font-weight: 700; }

.u-empty { text-align: center; color: var(--u-muted); padding: var(--u-s6) var(--u-s4); }
.u-divider { display: flex; align-items: center; gap: var(--u-s3); color: var(--u-muted); font-size: .8125rem; margin: var(--u-s5) 0; }
.u-divider::before, .u-divider::after { content: ""; flex: 1; height: 1px; background: var(--u-line); }


/* 灯り（ロゴと同じ紺の小さな点）。1 画面に 1 つまで */
.u-light { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--u-deep); vertical-align: middle; }

/* ---------- ガイド：文書（Markdown）の組み方・目次・色見本 ---------- */
.u-toc { display: flex; flex-wrap: wrap; gap: var(--u-s2) var(--u-s4); margin-bottom: var(--u-s5); padding: var(--u-s3) var(--u-s4); background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); font-size: .875rem; }
.u-toc a { color: var(--u-link); text-decoration: none; }
.u-toc a:hover { text-decoration: underline; }
.u-prose { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); padding: var(--u-s5); line-height: 1.85; overflow-wrap: anywhere; }
@media (min-width: 768px) { .u-prose { padding: var(--u-s6); } }
.u-prose > :first-child { margin-top: 0; }
.u-prose h2 { font-size: 1.25rem; margin: var(--u-s7) 0 var(--u-s3); padding-bottom: var(--u-s2); border-bottom: 1px solid var(--u-line); scroll-margin-top: 88px; }
.u-prose h3 { font-size: 1.0625rem; margin: var(--u-s5) 0 var(--u-s2); }
.u-prose h4 { font-size: 1rem; margin: var(--u-s4) 0 var(--u-s2); }
.u-prose p, .u-prose ul, .u-prose ol, .u-prose pre, .u-prose blockquote, .u-prose .u-table-wrap { margin: var(--u-s3) 0; }
.u-prose ul, .u-prose ol { padding-left: 1.4em; }
.u-prose li + li { margin-top: var(--u-s1); }
.u-prose a { color: var(--u-link); }
.u-prose code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .875em; background: var(--u-surface-2); padding: 1px 6px; border-radius: 6px; }
.u-prose pre { background: var(--u-surface-2); border-radius: var(--u-radius-sm); padding: var(--u-s3) var(--u-s4); overflow-x: auto; line-height: 1.6; }
.u-prose pre code { background: none; padding: 0; font-size: .8125rem; }
.u-prose blockquote { border-left: 3px solid var(--u-brand); padding: var(--u-s1) var(--u-s4); color: var(--u-muted); }
.u-prose hr { border: 0; border-top: 1px solid var(--u-line); margin: var(--u-s5) 0; }
.u-prose .u-table { font-size: .875rem; }
.u-prose .u-table th { white-space: normal; }
/* 部品の見本：アイコンの一覧 */
.v-icon-list { display: grid; gap: var(--u-s2) var(--u-s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.v-icon-item { display: flex; align-items: center; gap: var(--u-s2); }
.u-swatches { display: grid; gap: var(--u-s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.u-swatch { display: flex; align-items: center; gap: var(--u-s3); padding: var(--u-s2) var(--u-s3); background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); }
.u-swatch-chip { width: 36px; height: 36px; flex: none; border-radius: 10px; border: 1px solid var(--u-line); }

/* ---------- タブ・項目と値の並び（マイページなど） ---------- */
.u-tabs { display: flex; gap: var(--u-s1); overflow-x: auto; border-bottom: 1px solid var(--u-line); scrollbar-width: thin; }
.u-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 700; font-size: .9375rem; color: var(--u-muted); white-space: nowrap; cursor: pointer; }
.u-tab:hover { color: var(--u-ink); }
.u-tab.is-on { color: var(--u-brand); border-bottom-color: var(--u-brand); }
.u-tab-count { font-size: .75rem; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--u-soft); color: var(--u-muted); }
.u-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--u-s2) var(--u-s3); margin: var(--u-s3) 0 0; font-size: .9375rem; }
.u-kv dt { color: var(--u-muted); font-size: .8125rem; padding-top: 3px; }
.u-kv dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s2); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .u-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .u-kv dd { margin-bottom: var(--u-s2); } }
/* マイページ（金庫） */
.v-narrow { max-width: 560px; }
.v-recovery { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.125rem; letter-spacing: .06em; padding: var(--u-s4); border: 2px dashed var(--u-brand); border-radius: var(--u-radius-sm); background: var(--u-soft); word-break: break-all; text-align: center; }
.v-toolbar { display: flex; align-items: center; gap: var(--u-s2); }
.v-search { position: relative; flex: 1 1 auto; min-width: 0; }
.v-search .u-input { padding-left: 40px; }
.v-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--u-muted); pointer-events: none; }
.v-search-ic svg { width: 20px; height: 20px; display: block; }
/* 鍵をかける：ほかのボタンと同じ線画のアイコン（塗りつぶさない） */
/* 最初から薄い青の丸に青い線画（マイページ・鍵をかけたページで同じ。押せる場所がひと目でわかるように） */
.v-lockbtn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: var(--u-soft); color: var(--u-brand); cursor: pointer; }
.v-lockbtn:hover { border-color: var(--u-brand); }
.v-lockbtn svg { width: 22px; height: 22px; }
/* 区分：スマホは 3 列×2 段、広い画面は 6 列×1 段のボタン（タブは横にはみ出すので使わない） */
.v-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u-s2); }
@media (min-width: 768px) { .v-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v-cats { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.v-cat { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--u-s2) var(--u-s3); border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); background: var(--u-surface); color: var(--u-ink); font: inherit; font-weight: 700; font-size: .875rem; line-height: 1.3; text-align: center; cursor: pointer; }
.v-cat:hover { border-color: var(--u-brand); }
.v-cat.is-on { background: var(--u-brand); border-color: var(--u-brand); color: var(--u-on-brand); }
/* 件数：右上の小さなバッジ（0 件は出さない） */
.v-cat-count { position: absolute; top: -7px; right: -5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--u-brand); color: var(--u-on-brand); font-size: .6875rem; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--u-bg); }
.v-cat.is-on .v-cat-count { background: var(--u-surface); color: var(--u-brand); }
.v-item-head { display: flex; align-items: center; gap: var(--u-s2); }
.v-item-head h3 { font-size: 1.0625rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.v-item-edit { margin-left: auto; }
.v-pre { white-space: pre-wrap; }
/* 書類のファイル */
.v-files { display: flex; flex-direction: column; gap: var(--u-s1); min-width: 0; flex: 1; }
.v-file { display: flex; align-items: center; gap: var(--u-s2); min-width: 0; }
.v-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: var(--u-link); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
span.v-file-name { color: var(--u-ink); cursor: default; }
.v-file-size { flex: none; color: var(--u-muted); font-size: .75rem; }
.v-files-edit > span { display: block; font-weight: 700; font-size: .875rem; margin-bottom: var(--u-s1); }
.v-files-edit .v-file { margin-bottom: var(--u-s2); }
.v-file-pick { cursor: pointer; }
/* 鍵をかけたページの表示枠 */
.v-sealed-frame { width: 100%; border: 1px solid var(--u-line); border-radius: var(--u-radius); background: var(--u-bg); }
/* PDF：画面の幅に合わせて 1 枚ずつ絵にする（PDF.js） */
.v-pdf { display: flex; flex-direction: column; gap: var(--u-s3); width: 100%; }
.v-pdf-page { display: block; width: 100%; height: auto; border-radius: var(--u-radius-sm); border: 1px solid var(--u-line); box-shadow: var(--u-shadow); }
.v-sealed-img { max-width: 100%; height: auto; border-radius: var(--u-radius); border: 1px solid var(--u-line); }
/* ふりがな：名前の上に小さく */
.v-kana { display: block; color: var(--u-muted); font-size: .6875rem; font-weight: 400; letter-spacing: .08em; line-height: 1.4; }
/* 線画のボタン（コピー・伏せ字の表示） */
.v-icbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--u-muted); cursor: pointer; }
.v-icbtn:hover, .v-icbtn[aria-pressed="true"] { color: var(--u-brand); background: var(--u-soft); }
.v-icbtn svg { width: 18px; height: 18px; }
/* 口座 */
.v-account { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.v-account-head { display: flex; align-items: center; gap: var(--u-s2); }
.v-account-type { margin-left: var(--u-s2); color: var(--u-muted); font-size: .8125rem; }
.v-account-holder { color: var(--u-muted); font-size: .8125rem; }
.v-accounts > span { display: block; font-weight: 700; font-size: .875rem; margin-bottom: var(--u-s1); }
.v-account-edit { padding: var(--u-s3); border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); margin-bottom: var(--u-s3); }
.v-account-edit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--u-s2); }
/* 設定（右上の歯車で開く） */
.v-settings-panel { padding: var(--u-s4); border: 1px dashed var(--u-brand); border-radius: var(--u-radius); }
.v-settings-panel .u-card { box-shadow: none; }
/* 並び替え中はカードの中のリンクやボタンを押せないようにする（掴みやすく） */
.is-sorting .v-item a, .is-sorting .v-item .u-btn, .is-sorting .v-item-edit { pointer-events: none; }
/* お知らせ（保存しました など）：ヘッダーのすぐ下に浮かべて 2.5 秒で消す（並びを押し下げない） */
.v-toast { position: fixed; left: 50%; top: calc(72px + 12px); z-index: 80; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; background: var(--u-ink); color: var(--u-bg); font-size: .875rem; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: v-toast 2.5s ease forwards; pointer-events: none; }
@keyframes v-toast { 0% { opacity: 0; transform: translate(-50%, -8px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .v-toast { animation: none; } }
/* マイページの項目：電話・メール・住所・日付は線画のアイコン＋押すと動く文字（ラベルとボタンを並べない） */
.v-rows { display: flex; flex-direction: column; gap: var(--u-s2); margin-top: var(--u-s3); font-size: .9375rem; }
.v-row { display: flex; align-items: flex-start; gap: var(--u-s3); min-width: 0; }
.v-ic { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--u-muted); }
.v-ic svg { width: 20px; height: 20px; display: block; }
.v-val { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s2); min-width: 0; overflow-wrap: anywhere; }
.v-val a { color: var(--u-link); text-decoration: none; }
.v-val a:hover { text-decoration: underline; }
.v-row-label { flex-direction: column; gap: 2px; margin-top: var(--u-s1); }
.v-lbl { color: var(--u-muted); font-size: .75rem; font-weight: 700; }
.v-zip { display: block; color: var(--u-muted); font-size: .8125rem; }
.v-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.v-pin { font-size: 1.5rem; letter-spacing: .5em; text-align: center; max-width: 200px; }
.v-mask { letter-spacing: .15em; color: var(--u-muted); }
.v-secret { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.u-grid > .v-wide { grid-column: 1 / -1; }
.u-textarea { resize: vertical; min-height: 80px; }

/* マイページの暗証番号：iPhone のロック解除と同じ形（4 つの丸＋数字のボタン。確定のボタンは無い） */
.v-lock { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 340px; margin: var(--u-s5) auto var(--u-s6); }
.v-lock-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--u-surface); border: 1px solid var(--u-line); color: var(--u-brand); margin-bottom: var(--u-s3); }
.v-lock-mark svg { width: 24px; height: 24px; }
.v-lock-title { font-size: 1.25rem; }
.v-lock-sub { margin-top: var(--u-s2); color: var(--u-muted); font-size: .8125rem; line-height: 1.7; }
.v-dots { display: flex; gap: 18px; margin-top: var(--u-s5); }
.v-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--u-brand); transition: background-color .12s; }
.v-dot.is-on { background: var(--u-brand); }
.v-dots.is-shake { animation: v-shake .42s ease-in-out; }
@keyframes v-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-7px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .v-dots.is-shake { animation: none; } }
.v-lock-msg { min-height: 2.6em; margin-top: var(--u-s3); color: var(--u-danger); font-size: .8125rem; font-weight: 700; line-height: 1.5; }
.v-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 24px; margin-top: var(--u-s2); }
.v-key {
  width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-ink);
  font: inherit; font-size: 1.75rem; font-weight: 400; line-height: 1; cursor: pointer; display: grid; place-items: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: background-color .08s, transform .08s;
}
.v-key:hover { border-color: var(--u-brand); }
.v-key:active { background: var(--u-soft); color: var(--u-brand); transform: scale(.96); }
.v-key:disabled { cursor: default; }
.v-key-sub { border-color: transparent; background: none; color: var(--u-muted); }
.v-key-sub svg { width: 26px; height: 26px; }
.v-key-sub:disabled { opacity: .35; }
.v-lock-foot { margin-top: var(--u-s5); }
.v-link { font: inherit; font-size: .875rem; font-weight: 700; color: var(--u-link); background: none; border: 0; padding: var(--u-s2); cursor: pointer; text-decoration: none; display: inline-block; }  /* ボタンでもリンクでも同じ見た目（下線なし） */

/* 読み込み中の「くるくる」：文字ロゴの nn を描いては消す（components/loading.tsx） */
.u-loading { display: grid; place-items: center; min-height: 45vh; opacity: 0; animation: u-loading-show .25s ease .6s forwards; }  /* すぐ終わる読み込みでは出さない（0.6 秒たっても終わらないときだけ出す） */
@keyframes u-loading-show { to { opacity: 1; } }
.u-loading svg { width: 112px; height: auto; overflow: visible; }
.u-loading path { fill: none; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.u-loading-track { stroke: var(--u-soft); }
.u-loading-line { stroke: var(--u-brand); stroke-dasharray: 100; animation: u-nn-draw 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes u-nn-draw { 0% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .u-loading-line { animation: u-nn-blink 1.2s ease-in-out infinite; stroke-dasharray: none; }
  @keyframes u-nn-blink { 50% { opacity: .35; } }
}

/* ---------- 5. ログイン画面などの中央寄せ ---------- */
.u-center { position: relative; min-height: 100svh; display: grid; place-items: center; padding: var(--u-s6) var(--u-gutter); }
.u-auth { width: min(420px, 100%); }
.u-auth .u-card { padding: var(--u-s6) var(--u-s5); }
.u-auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--u-s2); margin-bottom: var(--u-s5); text-align: center; }
.u-auth-brand img, .u-auth-brand svg { width: 64px; height: 64px; }
.u-auth-brand .u-brand-name { font-size: 1.5rem; }
.u-auth-brand img.u-word { width: auto; height: 34px; }
.u-auth h1 { font-size: 1.25rem; text-align: center; margin-bottom: var(--u-s4); }
.u-auth-lead { text-align: center; margin: var(--u-s2) 0 var(--u-s5); }
.u-auth-foot { text-align: center; margin-top: var(--u-s4); }
.u-auth-tools { position: absolute; top: 28px; right: 24px; display: flex; gap: 12px; }

/* ---------- 6. 並び替え・設定・お気に入り（Garden と同じ動き。2026-11-12） ----------
   一覧の右上に ↑↓（並び替え）と ⚙（設定）の線画のボタン。↑↓ を押すと各項目の前に ≣ の取っ手が出る。
   ⚙ を押すと各項目に ✎（鉛筆＝編集）が出る。
   取っ手（または項目のどこでも）を掴んで動かし、落とした瞬間に保存。スマホは約 0.4 秒の長押しで掴む。キーボードは取っ手で ↑↓←→。
   動きは unnook.js。並べる入れ物に data-u-sortable="名前"、各項目に .u-sort-item と data-key、取っ手に .u-grip。 */
.u-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--u-s3); flex-wrap: wrap; }
.u-head-actions { display: flex; gap: var(--u-s2); }
/* 枠や地は付けない（2026-11-12 東海林さん「四角はないほうが、くどく見えない」）。押している間は青い色だけで示す */
.u-iconbtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--u-muted); cursor: pointer;
}
.u-iconbtn svg { width: 20px; height: 20px; }
.u-iconbtn:hover { color: var(--u-brand); }
.u-iconbtn.is-on { color: var(--u-brand); }
.u-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.u-grip {
  display: none; place-items: center; width: 28px; height: 28px; padding: 0; margin-right: var(--u-s1);
  border: 0; border-radius: 8px; background: transparent; color: var(--u-muted); cursor: grab; touch-action: none; flex-shrink: 0;
}
.u-grip svg { width: 18px; height: 18px; }
.u-grip:hover, .u-grip:focus-visible { color: var(--u-brand); background: var(--u-soft); }
.is-sorting .u-grip { display: inline-grid; }
.is-sorting .u-sort-item { user-select: none; cursor: grab; touch-action: none; }
.is-sorting .u-sort-item:hover { border-color: var(--u-brand); }
.is-sorting .u-card-cover { display: none; }
/* iPhone のホーム画面のような動き：並び替えモードで小さく揺れ、掴むと持ち上がる（v2 2026-11-12） */
@keyframes u-jiggle { 0% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } 100% { transform: rotate(-.6deg); } }
.is-sorting .u-sort-item { animation: u-jiggle .32s ease-in-out infinite; transform-origin: 50% 60%; }
.is-sorting .u-sort-item:nth-child(2n) { animation-delay: -.16s; animation-duration: .36s; }
.is-sorting .u-sort-item:nth-child(3n) { animation-delay: -.08s; }
.is-dragging-any .u-sort-item { animation: none; }
.u-no-select, .u-no-select * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing; }
.u-sort-item.is-lifted {
  position: relative; z-index: 40; cursor: grabbing;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22), 0 4px 10px rgba(0, 0, 0, .12);
  border-color: var(--u-brand);
}
@media (prefers-reduced-motion: reduce) { .is-sorting .u-sort-item { animation: none; } }
.u-drop-line { position: fixed; z-index: 60; background: var(--u-brand); border-radius: 3px; pointer-events: none; }
.u-item-edit { display: none !important; width: 26px; height: 26px; border-radius: 8px; }
.u-item-edit svg { width: 15px; height: 15px; }
.is-setting .u-item-edit { display: inline-grid !important; }
.u-sort-status { margin: calc(-1 * var(--u-s3)) 0 var(--u-s3); color: var(--u-muted); font-size: .875rem; }
.u-sort-status.is-error { color: var(--u-danger); font-weight: 700; }

/* ルームのカード：全体を覆うリンク（.u-card-cover）の上に、取っ手・⚙・★を重ねる */
.u-card-area { position: relative; }
.u-card-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.u-card-area .u-card-title { display: flex; align-items: center; gap: var(--u-s1); font-size: 1.0625rem; font-weight: 700; padding-right: 36px; }
.u-card-area .u-grip, .u-card-area .u-item-edit { position: relative; z-index: 2; }
.u-card-area:hover { border-color: var(--u-brand); }
.u-star {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--u-muted); cursor: pointer; z-index: 2;
}
.u-star svg { width: 17px; height: 17px; }
.u-star:hover { background: var(--u-soft); }
.u-star.is-on { color: var(--u-gold); }

/* お気に入りの段：小さいカード */
.u-grid-sm { display: grid; gap: var(--u-s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.u-grid-sm .u-card { padding: var(--u-s3) var(--u-s4); }
.u-grid-sm .u-card-meta { display: none; }

/* 印刷：色の地を消す */
@media print {
  .u-header, .u-header-tools, .u-auth-tools { display: none !important; }
  body { background: #fff; color: #000; }
  .u-card { box-shadow: none; }
}

/* 鍵をかけたルーム：4 桁で開いたあとに出す一覧（担当のセッションが作ったルームのページの中身） */
.v-room > * + * { margin-top: var(--u-s4); }

/* 検索のマーカー（マイページ・鍵をかけたページで同じ）。PDF の上は紙が白いので明暗に関係なく黄色 */
mark.u-hit { background: var(--u-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.v-pdf-wrap { position: relative; }
.v-pdf-hits { position: absolute; inset: 0; pointer-events: none; }
.v-pdf-hit { position: absolute; background: rgba(250, 204, 21, .45); border-radius: 2px; }

/* hidden を付けたものは、どの部品でも必ず隠す（カードの display に負けないように） */
[hidden] { display: none !important; }