/* 10thly App — 画面の CSS（Desktop First・3ペイン）。色・書体・級数は tokens.css からだけ取る。
   原則：紙の続き（明朝の見出し・ヘアライン・余白・語）を保ちつつ、操作部品は「操作できる」と分かる形にする。 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); height: 100%;
  font-family: var(--sans); font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: .02em; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- 3ペイン Shell ---------- */
/* 3ペインは画面の高さに固定し、各ペインの中だけがスクロールする（grid item の min-height:auto で伸びないよう min-height:0） */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--aside-w); height: 100dvh; min-height: 0; overflow: hidden; }
/* 左 Nav：ひと続きのスクロール領域（文字ロゴ・検索・Inbox／Today／10thly／All・Projects・Labels・Rooms）＋ 最下部固定（Kaname／Settings）。上部固定は無し */
.nav { border-right: 1px solid var(--line); background: var(--paper-2); overflow: hidden; min-height: 0; height: 100%; padding: 0; display: flex; flex-direction: column; position: relative; }
.nav__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px 12px; }
.nav__bottom { flex: none; border-top: 1px solid var(--line); padding: 8px 12px calc(12px + var(--safe-b)); background: var(--paper-2); }
.nav__title { display: none; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; position: relative; }
/* 上＝固定 Header ／ 中＝スクロールする本文 ／ 下＝固定 Quick Add */
.main__head { flex: none; padding: 22px 32px 10px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; background: var(--paper); border-bottom: 1px solid var(--line-soft); z-index: 2; }
.main__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 32px calc(var(--quickadd-h) + 40px); }
.aside { border-left: 1px solid var(--line); overflow-y: auto; min-height: 0; padding: 22px 22px 32px; background: var(--paper); }
body { overflow: hidden; }
body.is-locked { overflow: auto; }
/* Task を扱わない画面（Settings・Kaname・Review）では Quick Add を出さず、下の余白も残さない */
body.no-quickadd .quickadd-dock { display: none; }
body.no-quickadd .main__body { padding-bottom: 32px; }
body.no-quickadd .companion-root { bottom: 30px; }
body.is-tendays-cal .main__body { padding-left: 18px; padding-right: 18px; }   /* g133：カレンダー表示のときだけ（リスト表示は他の一覧と同じ .main__body の余白＝独自値を持たない）。ヘッダーは両表示とも下の is-tendays（切替の位置を変えない） */
body.is-tendays .main__head { padding-left: 18px; padding-right: 18px; }
.tabbar { display: none; }

/* Nav */
.nav__brand { display: flex; align-items: center; gap: 8px; padding: 4px 10px 14px; }
.nav__close { display: none; }   /* スマホの「その他」でだけ角に固定表示 */
.wordmark { font-family: var(--en); letter-spacing: .18em; color: var(--accent-deep); font-size: 15px; }
/* g249：左 Nav のブランド表示＝公式サイト（task.10thly.com）のロゴ資産 10thly-task-logo-trimmed.png（790×245・透過）をそのまま・幅 132px（高さは比率どおり約 41px）。文字だけの wordmark は Nav では使わない（ログイン画面は従来どおり） */
.brand__logo { width: 118px; height: auto; display: block; flex: none; user-select: none; -webkit-user-drag: none; }   /* g250：132→118px（高さ約 37px）＝左 Nav の密度に合わせる */
@media (min-width: 761px) {   /* g253：PC のブランド行＝上 2px・ロゴ 37px・下 11px（行 50px）＝ロゴと検索欄の間に呼吸を戻す（g252 の 6px から +5px）・Nav 上端 14px・ベル記号は 2x 切り出しの比較で「10thly Task」の文字軸に並ぶ -3px（スマホ「その他」は従来どおり） */
  .nav__scroll { padding-top: 14px; }
  .nav__brand { padding-top: 2px; padding-bottom: 11px; }
  .nav__bellslot--brand .bell { transform: translateY(-3px); }
}
.nav__search { display: flex; align-items: center; gap: 6px; margin: 0 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 0 8px; min-height: 34px; }
.nav__search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--fs-small); padding: 6px 0; }
.nav__search input:focus { outline: none; }
.nav__search__k { color: var(--gray-2); font-size: 11px; font-family: var(--en); }
.navitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; color: var(--ink); min-height: 34px; text-align: left; border: 1px solid transparent; }
.navitem:hover { background: var(--hover); }
.navitem[aria-current="page"] { background: var(--accent-pale); color: var(--ink); }
.navitem.is-dragover { border-color: var(--accent); background: var(--accent-pale); }
.navitem__ico { width: 14px; height: 14px; flex: none; display: inline-grid; place-items: center; color: var(--gray); }
.navitem__ico svg { width: 14px; height: 14px; display: block; }
.navitem__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navitem__count { color: var(--gray); font-family: var(--sans); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.navitem--sub { padding-left: 30px; }
.navitem--sub2 { padding-left: 48px; }
.nav__section { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 4px; color: var(--gray); font-size: 11px; letter-spacing: .14em; font-family: var(--en); text-transform: uppercase; }
.nav__section button { color: var(--gray); width: 22px; height: 22px; border-radius: var(--radius); font-size: 15px; line-height: 1; }
.nav__section button:hover { background: var(--hover); color: var(--ink); }
/* PC の左サイドバー（常設）だけ：セクション（Projects／Labels／Rooms）を余白＋見出しで階層化する（罫線は入れない・項目の行高は変えない・スマホの「その他」には波及させない）。
   前セクション最終項目 → 見出し＝広く（28px）／見出し → 自分の最初の項目＝近く（4px）。見出し色は選択中の Ring Color の --accent-deep を薄めた色（連動）・字間やや広め・太字にしない */
@media (min-width: 761px) {
  .nav__section { padding: 28px 10px 4px; font-size: 11.5px; letter-spacing: .17em; font-weight: 400; color: color-mix(in srgb, var(--accent-deep) 68%, var(--gray)); }
  .nav__section button { color: var(--gray); }
}
/* g104e：フォルダは全 Project 共通の印・chevron は「子を持つ親」だけ。行の左の余白（.nav__scroll の padding 12px）に置き、フォルダ・名前の位置は子なしの行と揃える */
.nav__toggle { position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gray-2); display: inline-grid; place-items: center; border-radius: var(--radius); }
.nav__toggle svg { width: 12px; height: 12px; display: block; transition: transform 120ms var(--ease-out); }
.nav__toggle.is-open svg { transform: rotate(90deg); }
.nav__toggle:hover { color: var(--ink); background: var(--hover); }
@media (prefers-reduced-motion: reduce) { .nav__toggle svg { transition: none; } }
.nav__ring { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--gray); display: inline-block; }

/* 見出し */
.h1 { font-family: var(--mincho); font-weight: 400; font-size: var(--fs-head); letter-spacing: .06em; margin: 0; }
.h1 small { font-family: var(--sans); font-weight: 400; font-size: var(--fs-small); color: var(--gray); letter-spacing: .06em; margin-left: .8em; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* g118d：日付は一塊（375px で右上領域と 1 行目を分け合うとき「水曜／日」と語の途中で折れない＝折れるなら日付ごと次の行） */
.head__sub { color: var(--gray); font-size: var(--fs-small); }
.head__spacer { flex: 1; }
.head__tools { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }   /* g118：ヘッダーの操作群は縮めない（重なり防止） */
/* g118b：ヘッダーの左右分離。左＝head__main（見出し・ガイド・操作群＝幅が足りなければこの中で折り返す）・右＝head__end（登録日・Undo/Redo＝縮まず、左の増減や画面幅で押し出されない＝常に 1 行目の右端） */
.head__main { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.head__end { flex: 0 0 auto; margin-left: auto; align-self: baseline; }   /* g118c：Today も同じ（Focus＋Undo/Redo）。旧 .head__tools--today（PC flex:1／mobile margin-left:auto＋margin-top）は撤去 */

/* ---------- 共通の部品 ---------- */
.muted { color: var(--gray); }
.small { font-size: var(--fs-small); }
.mincho { font-family: var(--mincho); font-weight: 400; letter-spacing: .04em; }
.en { font-family: var(--en); letter-spacing: .14em; }
.label { font-family: var(--en); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); margin: 4px 0 6px; }
.label--ja { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: none; }   /* g230：日本語の見出しラベル＝英字用の Baskerville・11px・.18em 字間・大文字化を当てない（色と余白は .label と同じ） */
.link { color: var(--gray); font-size: var(--fs-small); border-bottom: 1px solid var(--line); display: inline-block; text-decoration: none; cursor: pointer; }
.link:hover { color: var(--ink); border-bottom-color: var(--gray); }
.empty { color: var(--gray); font-size: var(--fs-body); padding: 18px 0; }
.hr { height: 1px; background: var(--line); margin: 14px 0; }
/* ボタン：線で囲む＝押せると分かる。主要は塗り */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); padding: 0 14px; border-radius: var(--radius); min-height: 34px; font-size: var(--fs-small); letter-spacing: .04em; white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--gray); background: var(--hover); }
.btn--primary { border-color: var(--accent); color: var(--accent-deep); }
.btn--primary:hover { background: var(--accent-pale); border-color: var(--accent-deep); }
.btn--fill { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--fill:hover { background: var(--accent-deep); color: var(--paper); border-color: var(--accent-deep); }
.btn--quiet { border-color: transparent; color: var(--gray); }
/* 「選択」＝控えめな操作ボタン（白地・薄い枠・右端）。Focus のスイッチ（状態）とは見た目も位置も分ける */
.btn--select { border-color: var(--line); color: var(--gray); background: var(--paper); margin-left: auto; min-height: 28px; padding: 0 10px; }
.btn--select:hover { border-color: var(--gray-2); color: var(--ink); }
.btn--select.is-on { color: var(--ink); border-color: var(--gray-2); }
.btn--selectall { margin-left: 0; }   /* すべて選択（g90）：「選択」の右隣・同じ密度 */
.btn--selectall[hidden] { display: none; }
/* 一覧の絞り込み検索（g50）：ヘッダー右の小さな虫眼鏡 → ヘッダーの下に検索欄を展開（常時大きな欄は置かない） */
.head__search-btn { width: 30px; height: 30px; color: var(--gray); }
.head__search-btn svg { width: 15px; height: 15px; }
.head__search-btn.is-on, .head__search-btn:hover { color: var(--ink); background: var(--hover); }
/* 検索欄＝虫眼鏡・入力・× を 1 つの静かな箱に（g51）。通常は薄い枠と地、フォーカスはテーマ色の太枠にせず枠を濃くするだけ */
.head__search { flex: 0 0 100%; width: 100%; display: flex; align-items: center; gap: 4px; margin-top: 4px; border: 1px solid var(--line); border-radius: 4px; background: transparent; padding: 0 0 0 8px; min-height: 30px; }   /* 検索欄の共通 style（g53）：一覧画面・検索結果画面とも同じ薄い枠・地・角丸。テーマ色は使わない */
.head__search:focus-within { border-color: var(--line); background: var(--hover); box-shadow: none; }   /* focus＝地がわずかに濃くなるだけ（紫の太枠を出さない・薄いが識別できる） */
.head__search .navitem__ico { color: var(--gray-2); display: inline-flex; }
.head__search .navitem__ico svg { width: 13px; height: 13px; }
.head__search__in { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--fs-body); padding: 3px 0; outline: none; -webkit-appearance: none; line-height: 1.3; }
.head__search__in:focus, .head__search__in:focus-visible { outline: none; }
.head__search__in::-webkit-search-cancel-button { -webkit-appearance: none; }
.head__search__x { width: 26px; height: 26px; min-height: 0; padding: 0; color: var(--gray-2); font-size: 15px; line-height: 1; }   /* .btn の最低高さを打ち消して欄を低く保つ */
.head__search__x:hover { color: var(--ink); }
.head__break { display: none; }   /* 一覧の操作（選択・虫眼鏡）と表示モード（Focus）の分け目。PC では同じ行のまま */
.head__ops { display: flex; align-items: center; gap: 8px; }
.head__search--global { flex: 1 1 200px; width: auto; margin-top: 0; }   /* 全体検索の結果：題「検索」の横に検索語の欄（再検索できる） */
.head__sub--search { flex: 0 0 100%; }
.btn--more { min-width: 34px; padding: 0 8px; font-size: 16px; letter-spacing: .1em; color: var(--gray); }
.pop__list { display: flex; flex-direction: column; gap: 2px; }
.sheet__title { font-size: var(--fs-head); }
.promptform { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.promptform .field--box { font-size: 16px; padding: 10px 12px; }
.btn--quiet:hover { border-color: var(--line); color: var(--ink); }
.btn--danger { color: var(--gray); }
.btn--danger:hover { color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn--lg { min-height: 40px; font-size: var(--fs-body); padding: 0 18px; }
.btn--icon { padding: 0; width: 34px; }
/* チップ（状態＋押せる） */
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-small); color: var(--gray); min-height: 26px; background: var(--paper); cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--gray); color: var(--ink); }
.chip.is-on { border-color: var(--accent); background: var(--accent-pale); color: var(--ink); }
/* All の並び・絞り込み chip（g53）：選択状態はテーマ色でなく neutral（［選択］の hover と同じ薄いグレー）。Task の状態色・期限色と競合させない */
.chips--filter .chip { background: var(--paper); }
.chips--filter .chip:hover { border-color: var(--gray); background: var(--hover); color: var(--ink); }
.chips--filter .chip.is-on { border-color: var(--gray-2); background: var(--hover); color: var(--ink); }
.chips--filter .chip:focus-visible { outline: 1px solid var(--gray); outline-offset: 2px; }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--line); color: var(--gray); }
.chip__x { margin-left: 2px; color: var(--gray-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 入力：下線 */
.field { border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 8px 0; border-radius: 0; -webkit-appearance: none; width: 100%; }
.field:focus { outline: none; border-bottom-color: var(--accent-deep); }
.field::placeholder { color: var(--gray-2); }
.field--title { font-size: 18px; font-weight: 400; }
.field--notes { font-size: var(--fs-body); line-height: var(--lh-log); resize: none; min-height: 0; overflow: hidden; }   /* 空なら 1 行。入力すると JS で伸びる（巨大な空白を常時確保しない） */
.field--box { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; min-height: 34px; background: var(--input-bg); }   /* g62：入力欄の地は neutral（テーマ色の地の上でも白／paper） */
.field--box:focus { border-color: var(--accent-deep); }
select.field--box { background: var(--paper); }
.frow { display: grid; grid-template-columns: 7em 1fr; align-items: center; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); min-height: 44px; }
.frow__k { color: var(--gray); font-size: var(--fs-small); }
.frow__v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.kbd { font-family: var(--en); font-size: 11px; color: var(--gray-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }

/* ---------- Task 行 ---------- */
.tlist { margin-top: 4px; position: relative; }
/* スマホの左スワイプで出す操作（行の下に敷き、行が左へ動くと見える） */
.trow__tray { position: absolute; right: 0; display: flex; z-index: 0; transition: opacity 120ms; }
.trow__tray.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.trow__tray--left { right: auto; left: 0; justify-content: flex-start; background: transparent; transition: opacity 120ms, background-color 120ms; }   /* g58：閾値前は地も線も出さない（armed で accent-pale だけ） */   /* 右スワイプ＝左側から「今はやらない」（g49）。幅は露出した分だけ JS が敷く */
.trow__tray--left .trow__tray__b { width: 72px; white-space: nowrap; border: 0; box-shadow: none; background: transparent; transition: color 120ms; }   /* g58：tray と行の境界の縦線（border-right）を撤去 */   /* 72px＝「今はやらない」が折れない幅（JS の LEFT_W と同じ値） */   /* 右スワイプで閉じたら行の背面にも残さない（opacity／visibility／pointer-events を同期） */
.trow__tray--left.is-armed { background: var(--accent-pale); }   /* 閾値を超えた＝離せば実行（g54）。色が変わるだけ・ラベルは常に出す */
.trow__tray--left.is-armed .trow__tray__b { color: var(--accent-deep); }
.trow__tray--left.is-done { pointer-events: none; }
.trow.is-gone { pointer-events: none; }   /* 右スワイプで確定した行：一覧が組み直されるまで触れない（二度実行しない） */
.trow__tray__b { width: 60px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; color: var(--gray); background: var(--paper-2); border-left: 1px solid var(--line); }
.trow__tray__b svg { width: 16px; height: 16px; }
.trow__tray__b--trash { color: var(--ink); }
.trow.is-swiping, .trow.is-open { z-index: 1; background: var(--paper); }
.trow { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px 6px 0; border-bottom: 1px solid var(--line-soft); min-height: 40px; position: relative; border-radius: var(--radius); }
.trow.is-selected { background: var(--accent-pale); }
.trow.is-selected .trow__acts { background: var(--accent-pale); }
.trow__grip { width: 14px; flex: none; color: var(--gray-2); opacity: 0; cursor: grab; display: grid; place-items: center; align-self: stretch; font-size: 14px; letter-spacing: -2px; }
.trow__chk { width: 32px; height: 32px; flex: none; display: grid; place-items: center; cursor: pointer; margin-top: -2px; }
.trow__chk::before { content: ''; width: 18px; height: 18px; border: 1px solid var(--gray); border-radius: 50%; transition: background var(--t-fade); }
.trow.is-important .trow__chk::before { border-width: 2px; border-color: var(--accent-deep); }
.trow.is-done .trow__chk::before { background: var(--gray-2); border-color: var(--gray-2); }   /* 完了＝neutral（黒い丸で現役より強く見せない・g53） */
.trow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 5px; cursor: pointer; }
.trow__title { font-size: var(--fs-body); line-height: 1.45; word-break: break-word; }
.trow.is-done .trow__title { color: var(--gray); text-decoration: line-through; text-decoration-color: var(--line); }
.trow.is-done .trow__meta, .trow.is-done .trow__meta .is-over { color: var(--gray-2); }   /* 完了の補助情報も muted（期限切れ色も出さない） */
.field--title.is-done { color: var(--gray); text-decoration: line-through; text-decoration-color: var(--line); }
.released { margin-top: 14px; }
.released__n { margin-left: .5em; font-family: var(--sans); color: var(--gray-2); }   /* g131：実用の数字＝Sans（Journal 仕様） */
.released__lead { margin: -2px 0 6px; }
.released__row { display: flex; align-items: baseline; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }   /* 本文と「戻す」の間に明確な間隔（g56） */
.released__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.released__proj { color: var(--gray); }
.released__back { color: var(--gray-2); flex: none; white-space: nowrap; }
.released__date { color: var(--gray-2); flex: none; white-space: nowrap; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }   /* g120：手放し日（ON のときだけ出す＝OFF では幅も残らない） */
.released__back:hover { color: var(--ink); }
.done__yohaku { padding: 4px 0 8px; }
.trow__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--gray); font-size: var(--fs-small); }
.trow__meta .is-over { color: var(--accent-deep); }
/* Project の印は左 Nav と同じフォルダアイコン（表示だけ。Quick Add の #Project 記法は別） */
.m-proj { display: inline-flex; align-items: center; gap: 3px; }
.m-notes { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray); }
/* g144：一覧のメモ＝URL は直接開く（リンクと分かる下線）・URL 以外を押すとその場で編集。編集欄は Section 追加欄と同じ枠付き textarea */
.m-notes a.m-url { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
/* g182：メモ内 URL のページタイトル（取れたときだけ）＝リンク文字がタイトルになり、後ろに小さく host。href は URL のまま（ツールチップ＝URL） */
/* g184：Task 名の中の URL（一覧・10thly ボード・詳細の閲覧表示・Review・手放した一覧）＝メモの URL と同じ見た目 */
a.t-url { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.lt__title { text-decoration: inherit; }
.lt__host { display: inline-block; margin-left: 6px; color: var(--gray-2); font-size: var(--fs-small); text-decoration: none; }
a[data-lt="title"] .lt__host::before { content: '·'; margin-right: 6px; }
.trow__memo { margin-top: 6px; }
.trow__memo__in { width: 100%; box-sizing: border-box; min-height: 56px; max-height: 160px; font-size: var(--fs-body); line-height: 1.5; resize: none; overflow: auto; }
.trow__memo__bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.trow.is-memoedit .trow__acts { display: none; }
.trow__acts .trow__act--text { width: auto; padding: 0 8px; font-size: var(--fs-small); white-space: nowrap; }   /* 「メモ」＝文字ボタン（.trow__act の 28px 固定幅より後に効かせるため詳細度を上げる） */   /* g140：メモ本文のプレビュー＝meta の最後で行を折り返し、1 行に省略（行の高さは 1 行分だけ増える） */
/* g138：行に見えている値（日付・Project・Label）はその場で変えられる。当たり判定は padding＋負の margin＝行の高さは変えない。装飾は hover の色だけ（下線なし） */
.trow__meta [data-m] { cursor: pointer; border-radius: var(--radius); padding: 3px 3px; margin: -3px -3px; }
@media (hover: hover) { .trow__meta [data-m]:hover { color: var(--ink); background: var(--hover); } }
.trow__meta [data-m]:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 1px; }
body.is-selecting .trow__meta [data-m], body.is-focus .trow__meta [data-m], body.is-editing .trow__meta [data-m] { cursor: default; }
@media (max-width: 760px) { .trow__meta [data-m] { padding: 7px 5px; margin: -7px -5px; } }   /* スマホ＝12px の文字だけを狙わせない（約 33px の当たり） */
.m-proj svg { width: 12px; height: 12px; flex: none; color: var(--gray-2); }
.m-parent { color: var(--gray); }   /* g129：10thly リストの Subtask 行＝親の名前 */
.viewtoggle { margin-left: 8px; }   /* g129：10thly の「カレンダー ｜ リスト」（All の並びチップと同じ chip） */
.uplist .group__label { display: inline-flex; align-items: baseline; gap: 6px; }   /* g130：中身はカレンダーの列見出しと同じ .cal__d／.cal__w（書体・大きさ・ウェイトを新設しない） */
.uplist .cal__d { font-size: var(--fs-body); letter-spacing: inherit; }   /* g132：横長のリストでは日付数字を本文と同じ 14px に（カレンダーの .cal__d 18px は不変・ウェイト／字間は本文の Sans と同じ） */
.trow__meta .m-label::before { content: '@'; color: var(--gray-2); }
.trow__meta .m-time { font-family: var(--sans); letter-spacing: .04em; }   /* g131：実用の数字＝Sans（Journal 仕様） */
/* サブタスクの開閉（g100）：件数（0/4）と一体の小さな操作。親の主操作（完了・タイトル）より目立たせない。折りたたみ中は山形を横向きに */
/* g125：サブタスクの開閉＝行の頭（左の余白）の chevron。左 Nav の Sub-project（.nav__toggle・g104e）と同じ型＝閉＝右向き・開＝下向き・子を持つ親だけ。完了チェック（trow__chk）・詳細（trow__main）とは別要素 */
.trow__toggle { position: absolute; left: -18px; top: 12px; width: 16px; height: 16px; padding: 0; color: var(--gray-2); display: inline-grid; place-items: center; border-radius: var(--radius); }
.trow__toggle svg { width: 12px; height: 12px; display: block; transition: transform 120ms var(--ease-out); }
.trow__toggle.is-open svg { transform: rotate(90deg); }
.trow__toggle:hover { color: var(--ink); background: var(--hover); }
.trow__toggle:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 1px; }
.m-subcount { color: var(--gray); }
.trow__fold { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; margin: -3px 0; padding: 0 6px 0 2px; border-radius: var(--radius); color: var(--gray); font-size: inherit; line-height: 1; cursor: pointer; }
.trow__fold svg { width: 12px; height: 12px; flex: none; transition: transform var(--t-fade); }
.trow__fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.trow__fold:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 1px; }
.trow__acts { display: flex; gap: 2px; opacity: 0; flex: none; align-self: center; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--paper); border-radius: var(--radius); padding-left: 6px; }   /* g106e：hover まで見えない操作列は幅を予約せず右端に重ねる＝Task 本文・meta（登録日）が行の右端まで使える。出るときは行と同じ地色で下の文字を覆う */
.trow:focus-within .trow__acts { opacity: 1; }
.trow__act { width: 28px; height: 28px; border-radius: var(--radius); color: var(--gray); display: grid; place-items: center; }
.trow__act svg { width: 14px; height: 14px; }
/* hover の見た目はポインタが浮く端末だけ（g54）：iPhone Safari は触った要素に :hover が残り、スワイプ中に別の行が hover 色に見えていた。状態 class は JS が付けていない＝CSS の :hover そのものが原因 */
@media (hover: hover) {
  .trow:hover { background: var(--hover); }
  .trow:hover .trow__grip { opacity: 1; }
  .trow__chk:hover::before { background: var(--accent-pale); border-color: var(--accent-deep); }
  .trow:hover .trow__acts { opacity: 1; background: var(--hover); }
  .trow__act:hover { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
  .trow__fold:hover { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
}
.trow.is-sub { padding-left: 32px; }
.trow.is-dragging { opacity: .4; }
.trow.is-dropbefore::before, .trow.is-dropafter::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent-deep); z-index: 1; }
.trow.is-dropbefore::before { top: -1px; } .trow.is-dropafter::after { bottom: -1px; }
/* g102→g102c：階層の変更は「どの Task が本体になるか」を基本色で示し、挿入線は位置だけ（1 種類＝上の実線）。
   入れるとき（into／右インデント）＝親になる Task 本体を強調（.is-dropinto）／出すとき（左へずらす）＝top-level になる Subtask 本体を強調（.is-dropself・drag 中の薄さを戻す）。色は既存 token だけ */
.trow.is-dropinto, .trow.is-dropself { background: var(--accent-pale); box-shadow: inset 0 0 0 1px var(--accent-deep); }
.trow.is-dragging.is-dropself { opacity: 1; }
.cal__task.is-dragging { opacity: .4; }
/* g102e：複数選択 drag の札（drag 画像・1 枚）＝先頭の題名＋n 件。静かな見た目（既存 token だけ）。画像を取ったらすぐ外す */
.drag-ghost { position: fixed; left: -9999px; top: 0; display: inline-flex; align-items: center; gap: 10px; max-width: 360px; padding: 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); font-size: var(--fs-small); white-space: nowrap; }
.drag-ghost__title { overflow: hidden; text-overflow: ellipsis; }
.drag-ghost__n { flex: none; color: var(--gray); font-family: var(--sans); letter-spacing: .04em; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.trow__sel { width: 32px; height: 32px; flex: none; display: none; place-items: center; }
.trow__sel::before { content: ''; width: 14px; height: 14px; border: 1px solid var(--gray); border-radius: 3px; }
.trow.is-selected .trow__sel::before, .prow.is-selected .trow__sel::before { background: var(--accent-deep); border-color: var(--accent-deep); }
.prow.is-selected { background: var(--accent-pale); }   /* g134：Projects 一覧の選択（Task 行と同じ見た目・同じ .trow__sel） */
body.is-selecting .prow .trow__grip { display: none; }
body.is-selecting .trow__sel { display: grid; }
body.is-selecting .trow__chk { display: none; }
/* グループ／Section */
.group { margin-top: 16px; }
.group__head { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.group__label { font-size: var(--fs-body); color: var(--ink); }
.group__label.mincho { font-size: 16px; }
.group__count { color: var(--gray); font-family: var(--sans); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.group__tools { margin-left: auto; opacity: 0; display: flex; gap: 4px; }
.group:hover .group__tools { opacity: 1; }
.group.is-dragover { background: var(--accent-pale); }
.fold-toggle { color: var(--gray); font-size: var(--fs-small); padding: 8px 0; text-align: left; display: inline-flex; gap: 6px; align-items: center; }
.fold-toggle:hover { color: var(--ink); }
.addline { display: flex; align-items: center; gap: 8px; color: var(--gray); font-size: var(--fs-small); padding: 8px 0; min-height: 36px; text-align: left; }
.addline:hover { color: var(--ink); }
.addline__plus { width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; line-height: 1; }
/* Section のインライン追加欄（g112）：「この Section に追加」の位置に開く。見た目は addline（＋の丸）＋下線の入力欄 */
.secadd { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-height: 36px; }
.secadd .secadd__in { flex: 1; min-width: 0; padding: 6px 0; font-size: var(--fs-body); border-bottom-color: var(--accent); }
.secadd .btn { flex: 0 0 auto; }

/* 一括操作バー */
.bulkbar { position: sticky; top: 0; z-index: 3; background: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius); padding: 6px 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; box-shadow: var(--shadow); }
.bulkbar__n { font-family: var(--sans); color: var(--accent-deep); margin-right: 6px; font-variant-numeric: tabular-nums; }   /* g131：実用の数字＝Sans（Journal 仕様） */

/* ---------- Quick Add（Center 下部に固定） ---------- */
.quickadd-dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 32px 14px; background: linear-gradient(to bottom, transparent, var(--paper) 30%); pointer-events: none; }
.quickadd { pointer-events: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); padding: 6px 8px 6px 12px; display: flex; flex-direction: column; gap: 4px; }
.quickadd:focus-within { border-color: var(--accent); }
.quickadd__row { display: flex; align-items: center; gap: 8px; }
.quickadd__plus { color: var(--accent-deep); width: 22px; height: 22px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 15px; line-height: 1; }
.quickadd__input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--fs-body); padding: 8px 0; }
.quickadd__input:focus { outline: none; }
.quickadd__submit { flex: none; }
.quickadd__preview { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; padding-left: 30px; color: var(--gray); font-size: var(--fs-small); }
.quickadd__preview .chip { min-height: 22px; padding: 0 8px; }
.quickadd__preview .chip[data-qa-date] { cursor: pointer; }   /* g150：日付チップは押せる（共通の Date Picker） */
.quickadd__to { color: var(--gray-2); background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.quickadd__to:hover, .quickadd__to:focus-visible { color: var(--ink); }
.quickadd__to b { font-weight: 400; color: var(--gray); }
.quickadd__to { display: inline-flex; align-items: center; gap: 3px; }   /* g152：入口のアイコン（.m-proj と同じ 12px・同じ色） */
.quickadd__to svg { width: 12px; height: 12px; flex: none; color: var(--gray-2); }
/* g142：Quick Add のメモ欄（「メモを追加」で展開・既定は隠す） */
.quickadd__notes { padding: 4px 0 2px 30px; }
.quickadd__notes__in { width: 100%; box-sizing: border-box; min-height: 56px; max-height: 160px; font-size: var(--fs-body); line-height: 1.5; resize: none; overflow: auto; }
.quickadd__notes__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
/* g143：詳細のメモ＝閲覧表示（本文中の URL だけ押せる）。押すと textarea（.field--notes）に切り替わる */
.td__notesview { font-size: var(--fs-body); line-height: var(--lh-log); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; padding: 6px 0; min-height: 1.6em; cursor: text; border-bottom: 1px solid transparent; }
.td__notesview:hover { border-bottom-color: var(--line); }
.td__notesview:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 2px; }
.td__notesview.is-empty { color: var(--gray-2); }
.td__url { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 10 Days Calendar ---------- */
/* 10 日の列：各列に最低可読幅（200px）。収まらない日は 10 日グリッドの中だけ横スクロール（Quick Add や画面全体は流さない） */
.cal { display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(200px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; min-height: 60vh; background: var(--paper); scroll-snap-type: x proximity; }
.cal__day { scroll-snap-align: start; }
.cal__day { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-width: 0; }
.cal__day:last-child { border-right: 0; }
.cal__day.is-today { background: var(--accent-pale); }
.cal__day.is-past { background: var(--paper-2); }
.cal__day.is-dragover { box-shadow: inset 0 0 0 1px var(--accent-deep); }
.cal__head { padding: 8px 10px 6px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline; gap: 6px; position: sticky; top: 0; background: inherit; }
.cal__d { font-family: var(--sans); font-size: var(--fs-body); letter-spacing: inherit; }   /* g133：カレンダーの日付数字も 14px（本文と同値・日付が Task より主張しない）。曜日 .cal__w 12px・「今日」の補助表示・カードの文字サイズは不変 */   /* g131：実用の数字＝Sans（Journal 仕様） */
.cal__w { color: var(--gray); font-size: var(--fs-small); }
.cal__w.is-sun { color: var(--pink); } .cal__w.is-sat { color: var(--blue); }
.cal__day.is-today .cal__d { color: var(--accent-deep); }
.cal__body { flex: 1; padding: 4px 6px 30px; display: flex; flex-direction: column; gap: 3px; }
.cal__task { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 5px 8px 5px 6px; display: flex; gap: 6px; align-items: flex-start; cursor: grab; position: relative; font-size: var(--fs-small); line-height: 1.4; }
.cal__task:hover { border-color: var(--gray); }
.cal__task.is-done { color: var(--gray); }
.cal__task.is-done .cal__t { text-decoration: line-through; text-decoration-color: var(--line); }
.cal__task.is-selected { background: var(--accent-pale); border-color: var(--accent); }
.cal__task.is-important { border-left: 2px solid var(--accent-deep); }
.cal__task .trow__chk { width: 20px; height: 20px; margin: 0; }
.cal__task .trow__chk::before { width: 13px; height: 13px; }
.cal__t { flex: 1; min-width: 0; word-break: normal; overflow-wrap: anywhere; line-break: strict; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* 横書きのまま自然に折り返し、3 行まで。1 文字ずつの縦並びにしない */
.cal__time { font-family: var(--sans); color: var(--gray); letter-spacing: .04em; margin-right: 4px; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.cal__task.is-dropbefore::before, .cal__task.is-dropafter::after { content: ''; position: absolute; left: 4px; right: 4px; height: 2px; background: var(--accent-deep); }
.cal__task.is-dropbefore::before { top: -3px; } .cal__task.is-dropafter::after { bottom: -3px; }
.cal__add { color: var(--gray-2); font-size: var(--fs-small); padding: 4px 6px; text-align: left; border-radius: var(--radius); }
.cal__day:hover .cal__add { color: var(--gray); }
.cal__add:hover { background: var(--hover); color: var(--ink); }
.overdue-strip { padding: 6px 0 10px; }
.overdue-strip__head { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 0 0; color: var(--gray); font-size: var(--fs-small); }
.overdue-strip__head:hover { color: var(--ink); }
.overdue-strip__n { font-family: var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.overdue-strip__arrow { display: inline-block; transition: transform 160ms var(--ease-out); }
.overdue-strip__head[aria-expanded="true"] .overdue-strip__arrow { transform: rotate(90deg); }
.overdue-strip__body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 2px; }
.overdue-strip .chip { cursor: grab; }
.junnav { display: flex; align-items: center; gap: 6px; }

/* ---------- Kaname Right Pane ---------- */
.kp { display: flex; flex-direction: column; gap: 6px; }
.kp__head { display: flex; align-items: baseline; gap: 8px; }
.kp__jun { font-family: var(--mincho); font-size: 18px; letter-spacing: .06em; }
.kp__range { color: var(--gray); font-family: var(--sans); font-size: var(--fs-small); letter-spacing: .06em; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.kp__nav { margin-left: auto; display: flex; gap: 2px; }
.kp__nav .btn--icon { width: 28px; min-height: 28px; }
.kp__ring { display: flex; justify-content: center; margin: 14px 0 10px; touch-action: pan-y; }
.kp__ring .kaname-ring { width: 170px; }
.kp__sec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.kp__text { white-space: pre-wrap; font-size: var(--fs-small); line-height: var(--lh-log); color: var(--ink); }
.kp__done { display: flex; flex-direction: column; gap: 4px; }
.kp__done .row { padding: 4px 0; min-height: 0; font-size: var(--fs-small); border-bottom: 1px solid var(--line-soft); display: flex; gap: 8px; }
.kp__done .row .d { color: var(--gray-2); font-family: var(--sans); flex: none; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.kp__hint { color: var(--gray-2); font-size: 11px; margin-top: 8px; }
.kp__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.milestone { border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; background: var(--accent-pale); }
.milestone__t { font-size: var(--fs-body); margin-bottom: 4px; }
.milestone__a { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.onboard { margin: 4px 0 14px; }   /* 初回オンボーディング（g89）：中央カラム先頭の 1 枚。milestone と同じ見た目 */
.onboard .milestone__a { flex-wrap: wrap; }

/* ---------- Kaname Ring ---------- */
/* Ring は平らな色面だけ＝影・ぼかし・光沢は付けない（2026-09-09 g39 で drop-shadow を撤去。外周は色面がそのまま地に接する） */
.kaname-ring { filter: none; }
.kaname-ring.is-prev { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .kaname-ring.is-animate .kr-body { animation: kr-fill var(--t-ring-fill) var(--ease-out) both; transform-origin: 50% 50%; }
  @keyframes kr-fill { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
}
.ring-labels { display: flex; flex-direction: column; gap: 2px; }
.ring-label { display: flex; gap: .6em; align-items: baseline; flex-wrap: wrap; }
.ring-label__name { font-weight: 300; word-break: break-word; }
.ring-label__pct { font-family: var(--sans); color: var(--gray); letter-spacing: .04em; font-variant-numeric: tabular-nums; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.ring-labels--b1 .ring-label__name { font-size: var(--fs-body); }
/* Today の Kaname：最大 3 行を常時表示（1 項目なら 1 行）。3 項目とも同じ文字サイズ＝16px、長い名前があれば 3 項目一緒に 15px → 14px（13px 未満にしない）。名前は 2 行まで折返し（… で 1 行に省略しない） */
.ring-labels--today { gap: 3px; min-width: 0; }
.ring-labels--today .ring-label { flex-wrap: nowrap; gap: .5em; min-width: 0; }
.ring-labels--today .ring-label__name { font-size: 16px; font-weight: 400; line-height: 1.3; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ring-labels--today.is-long .ring-label__name { font-size: 15px; }
.ring-labels--today.is-verylong .ring-label__name { font-size: 14px; }
.ring-labels--today .ring-label__pct { font-size: 13px; color: var(--gray); flex: none; }
/* Kaname 本画面（hero 下）：Today の自動縮小とは分離した固定サイズ＝項目名 22px／% 15px・line-height 1.35・3 項目同じ・長い名前は縮小せず折返し（g45）。Kaname 用 token で持つ */
:root { --fs-kaname-label: 22px; --fs-kaname-pct: 15px; }
.ring-labels--kaname { gap: 6px; min-width: 0; }
.ring-labels--kaname .ring-label { flex-wrap: nowrap; gap: .5em; align-items: baseline; min-width: 0; }
.ring-labels--kaname .ring-label__name { font-size: var(--fs-kaname-label); font-weight: 400; line-height: 1.35; letter-spacing: .02em; min-width: 0; overflow-wrap: anywhere; }
.ring-labels--kaname .ring-label__pct { font-size: var(--fs-kaname-pct); color: var(--gray); font-weight: 400; flex: none; }
.ring-labels--kaname .ring-label__pct::after { content: '%'; font-size: .6em; color: var(--gray); margin-left: .1em; }
/* Editor 確定後・Review・右ペイン（b2）：Today と同じ思想＝3 項目すべて同じ文字サイズ（16 → 15 → 14px・最長の項目で決める・項目ごとに縮めない・2 行折返し優先） */
.ring-labels--b2 { gap: 4px; min-width: 0; }
.ring-labels--b2 .ring-label { flex-wrap: nowrap; gap: .5em; min-width: 0; }
.ring-labels--b2 .ring-label__name { font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: .02em; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ring-labels--b2.is-long .ring-label__name { font-size: 15px; }
.ring-labels--b2.is-verylong .ring-label__name { font-size: 14px; }
.ring-labels--b2 .ring-label__pct { font-size: 14px; color: var(--gray); font-weight: 400; flex: none; }
.ring-labels--today .ring-label__pct::after, .ring-labels--b2 .ring-label__pct::after { content: '%'; font-size: .55em; color: var(--gray); margin-left: .1em; }
.today-ring { display: flex; gap: 14px; align-items: center; margin: 12px 0 6px; }
.today-ring > div { min-width: 0; flex: 1 1 auto; }
@media (min-width: 1181px) { body:not(.is-focus) .today-ring--empty { display: none; } }   /* g232（C-1）：Ring 未記入の案内（今のKanameを記録しましょう…書く）は、同じ文と「書く」を持つ右ペインが出る幅では Today 本文に重ねて出さない。右ペインが無い幅・Focus 中は従来どおり */
.today-review { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 10px 0 -6px; }
.today-review__sub { white-space: nowrap; }
.today-next { margin: -2px 0 12px; }   /* g265：旬末当日の「明日から（◯月◯旬）：…　詳細」（Ring 行の直下・小さい灰字） */
.today-next .link { margin-left: 8px; }   /* g264：ボタン左の添え書き「Log → Kaname Ring → Plan」（PC 右ペインのカードと同じ文） */   /* g153→g154：Today の Review 導線（mobile のみ）＝右寄せ・「まとめて見直す」「追加」と同じ .btn.btn--primary.small */
.today-ring .kaname-ring { width: var(--ring-today); max-width: 88px; min-width: 56px; }
.plan-line { color: var(--ink); font-size: var(--fs-small); line-height: var(--lh-log); margin-top: 14px; white-space: pre-wrap; }   /* Plan／Log の文：見出しの次の行から本文（改行は保持・g61c） */
.plan-line .label { display: block; margin: 0 0 4px; }
.plan-line .muted { color: var(--gray); }
.jun-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jun-header__name { font-family: var(--mincho); font-weight: 400; font-size: var(--fs-head); letter-spacing: .06em; }
.jun-header__range { color: var(--gray); font-family: var(--sans); font-size: var(--fs-small); letter-spacing: .06em; font-variant-numeric: tabular-nums; }   /* g131：実用の数字＝Sans（Journal 仕様） */

/* Kaname 画面（B2）・履歴 */
.kaname-hero { display: flex; justify-content: center; margin: 22px 0 14px; }
.kaname-hero .kaname-ring { width: var(--ring-kaname); max-width: var(--ring-max); }
.kaname-edit { margin: 8px 0 4px; }
.kaname-edit .link { padding: 10px 0; display: inline-flex; align-items: center; }
.kaname-prev { display: flex; gap: 12px; align-items: center; margin-top: 22px; text-decoration: none; color: inherit; }
.kaname-prev .kaname-ring { width: 56px; }
.history { margin-top: 18px; border-top: 1px solid var(--line); }
.history__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
.history__row:hover { background: var(--hover); }
.history__row .kaname-ring { width: 28px; }
.history__jun { font-family: var(--mincho); font-size: var(--fs-body); flex: none; }
.history__items { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); min-height: 40px; }
.kaname-center { max-width: none; }   /* Kaname メインの本文・Plan 入力は Task 一覧と同じ横幅（.main__body の左右 padding＝Quick Add と同じ基準線・g61i） */
.kaname-center .junnav { justify-content: space-between; margin-top: 22px; }
:root { --ring-face: 200px; --ring-hist: 96px; }
.kaname-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 18px; }
.kaname-face { min-width: 0; border-top: 1px solid var(--line); padding-top: 10px; }
.kaname-face__t { display: flex; align-items: baseline; gap: 10px; font-size: 11px; letter-spacing: .16em; color: var(--gray); }
.kaname-face__t .en { color: var(--ink); font-size: 12px; }
.kaname-face__s { letter-spacing: .04em; color: var(--gray-2); }
.kaname-face__ring { display: flex; justify-content: center; margin: 14px 0 10px; }
.kaname-face .kaname-ring { width: var(--ring-face); max-width: 100%; }
.kaname-face .plan-line { margin-top: 14px; }
/* Kaname の Ring 詳細（Kaname メインの Plan／Log 面・旬詳細）の余白だけ g61f の最終採用値（セクション間 36／スマホ 40・セクション内 10・項目→文 12）に戻す（g61j）。フォント・色・Ring・構造は g61h のまま */
.kaname-center .kaname-faces { gap: 36px 32px; margin-top: 36px; }
.kaname-center .kaname-face__ring { margin: 10px 0 10px; }
.kaname-center .kaname-face .plan-line { margin-top: 12px; }
.kaname-center .kaname-face__edit { margin-top: 8px; }
.kaname-center .released { margin-top: 36px; padding-top: 10px; }
.kaname-center .kaname-edit { margin: 12px 0 4px; gap: 6px 18px; }
.kaname-center .kaname-hero { margin: 22px 0 10px; }
.kaname-crumb .link { padding: 6px 0; display: inline-flex; }
/* 履歴（g56）：紙面のように時系列で並べる。PC は横に流して一画面で俯瞰・スマホは 1 旬 1 ブロックで縦 */
.hist__toggle { margin: 12px 0 6px; align-items: center; }
.hist__toggle .chip { text-decoration: none; }
.hist__sub { margin-left: 6px; }
.hist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 18px; margin-top: 10px; }
.hist__block { display: block; min-width: 0; text-decoration: none; color: inherit; border-top: 1px solid var(--line); padding: 10px 0 8px; border-radius: var(--radius); }
.hist__block:hover { background: var(--hover); }
.hist__jun { font-size: var(--fs-body); }
.hist__range { font-size: 11px; color: var(--gray); letter-spacing: .06em; }
.hist__ring { display: flex; align-items: center; margin: 10px 0 8px; min-height: var(--ring-hist); }
.hist__ring .kaname-ring { width: var(--ring-hist); }
.hist__none { color: var(--gray-2); }
.hist__block .ring-labels--b1 .ring-label__name { font-size: var(--fs-small); }
.paper-hint { color: var(--gray-2); font-size: var(--fs-small); margin: 10px 0 0; }   /* 紙の 10thly Journal との接続＝小さな補助文（g56） */
.kp__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }   /* 右ペインの小さなナビ（g57） */
/* g61：Kaname List／Hitotoki List */
.kp__ringwrap { position: relative; }
/* Ring 編集の鉛筆＝Ring に付随する小さな操作（右ペインの階層には入れない）：右下・neutral の細線・枠や地は付けない。見た目は小さく（svg 12px）、押せる範囲は 36px を保つ */
.kp__edit { position: absolute; right: 2px; bottom: 2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gray-2); background: transparent; border: 0; text-decoration: none; opacity: .8; }
.kp__edit:hover, .kp__edit:focus-visible { color: var(--ink); background: var(--hover); opacity: 1; outline: none; }
.kp__edit svg { width: 12px; height: 12px; stroke-width: 1.1; }
.trow--list { border-bottom-style: dashed; }
.trow__lchk { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--gray); font-size: 17px; line-height: 1; margin-top: -2px; cursor: pointer; border-radius: 50%; }
.trow__lchk:hover, .trow__lchk:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.trow--list .m-list { color: var(--gray-2); }
/* 主要導線の行（右ペイン・スマホの Kaname 画面で共通）：Kaname List／Hitotoki List を同格の「行」として。大きなボタン・accent の塗りは使わない。hover で押せると分かる */
/* List の段（g61c）：Plan と同じ情報ブロック（見出し LIST＋同格の 2 リンクを横に）。全幅メニュー・強い罫線・右矢印は使わない。hover／tap でリンクと分かる程度 */
.lsec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.lnav { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.lnav__row { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 0; color: var(--ink); text-decoration: none; font-family: var(--mincho); font-size: 15px; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.lnav__row:hover, .lnav__row:focus-visible { border-bottom-color: var(--ink); outline: none; }
.kp__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }   /* 補助導線（この旬の詳細／一覧）＝List より弱く（g61c） */
.kp__links .link { color: var(--gray-2); }
.kp__links .link:hover { color: var(--ink); }
.kaname-histlink { margin-top: 12px; }
.kaname-histlink .link { color: var(--gray-2); }
.kaname-histlink .link:hover { color: var(--ink); }

/* 管理画面：1 項目 1 行＝◇・本文・3 択（なし｜毎日｜10日ごと）・ゴミ箱 */
.lp__lead { margin: 4px 0 6px; }
.lp__row { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 0; border-bottom: 1px solid var(--line-soft); border-radius: var(--radius); }
/* 並び替えハンドル（管理画面だけ・g61i）：Ring Editor の .kitem__grip と同じ 6 点。PC は行 hover で明確に・スマホは常時 */
.lp__grip { width: 28px; height: 40px; flex: none; color: var(--gray-2); cursor: grab; touch-action: none; display: grid; place-items: center; border-radius: var(--radius); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lp__grip svg { width: 10px; height: 16px; }
.lp__grip:hover, .lp__grip:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.lp__row.is-dragging { background: var(--paper); box-shadow: 0 1px 6px rgba(0, 0, 0, .10), 0 0 0 1px var(--line); position: relative; z-index: 2; opacity: .96; }
.lp__row.is-armed .lp__grip { color: var(--ink); background: var(--hover); }
.rv--list .rv__head .link { margin-left: auto; }
.kaname-listnav { display: none; }   /* スマホの入口：右ペインが無い幅だけ */
@media (max-width: 1180px) { .kaname-listnav { display: block; margin-top: 12px; } .kaname-listnav .link { padding: 6px 0; display: inline-flex; } }
.lp__row .lmark { width: 24px; flex: none; text-align: center; color: var(--gray); font-size: 15px; line-height: 1; }   /* 管理画面の ◇＝種別の視覚記号（押す操作ではない。Today の ◇ とは別） */
.lp__text { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.5; padding: 8px 4px; display: flex; align-items: center; cursor: text; border-radius: var(--radius); overflow-wrap: anywhere; }
/* 番号（g62・Settings で ON のときだけ）＝今の並び順。ID ではない */
.lp__num { flex: none; min-width: 1.8em; text-align: right; color: var(--gray); font-family: var(--sans); font-size: var(--fs-small); font-variant-numeric: tabular-nums; letter-spacing: .02em; }   /* g131：実用の数字＝Sans（Journal 仕様） */
/* 本文の inline 編集（g62）＝その行の本文が textarea に変わる。地は neutral・枠は薄い線・focus だけ accent。中央 modal は使わない */
.lp__edit { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.5; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--input-bg); color: var(--ink); resize: none; overflow: hidden; -webkit-appearance: none; display: block; }
.lp__edit:focus { outline: none; border-color: var(--accent-deep); }
/* 上部 tab（g62）：Kaname List｜Hitotoki List。派手なボタンにせず、文字＋選択中だけ細い下線。長い List でも切り替えられるよう content の上部に留まる（地は画面と同じ） */
.ltabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-top: 16px; position: sticky; top: 0; z-index: 3; background: var(--review-bg); }
.ltab { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: 0 2px; color: var(--gray); font-size: var(--fs-body); letter-spacing: .04em; border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ltab:hover { color: var(--ink); }
.ltab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ltab:focus-visible { outline: 1px solid var(--gray); outline-offset: 2px; }
.ltab__n { color: var(--gray-2); font-family: var(--sans); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.lpanel { min-width: 0; }
/* 下部の追加欄（g62）＝選択中の List 専用。その場で追加し同じ画面に留まる */
.lp__add { margin-top: 18px; display: flex; gap: 8px; align-items: center; }
.lp__add .field { flex: 1; min-width: 0; }
.lp__text:focus-visible { outline: 1px solid var(--gray); outline-offset: -1px; }   /* g62：本文に独立した hover 背景は付けない（行全体の 1 層だけ）。キーボードフォーカスは枠で示す */
.lp__mode { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 1px; background: var(--paper); }
.lp__opt { min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-small); color: var(--gray-2); white-space: nowrap; }
.lp__opt:hover { color: var(--ink); }
.lp__opt.is-on { color: var(--ink); background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.lp__opt:focus-visible { outline: 1px solid var(--gray); outline-offset: 1px; }
.lp__del { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--gray-2); border-radius: var(--radius); }
.lp__del svg { width: 14px; height: 14px; }
.lp__del:hover, .lp__del:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.lp__empty { padding: 8px 0; }
/* PC（ポインタが浮く端末）：通常時は操作部を控えめに。行 hover／focus で明確に。選んでいる値は常に読める */
@media (hover: hover) {
  .lp__mode, .lp__del, .lp__grip { opacity: .45; transition: opacity var(--t-fade); }
  .lp__row:hover .lp__mode, .lp__row:hover .lp__del, .lp__row:hover .lp__grip, .lp__row:focus-within .lp__mode, .lp__row:focus-within .lp__del, .lp__row:focus-within .lp__grip { opacity: 1; }
  .lp__row:hover { background: var(--hover); }
}
/* 固定入力欄の List モード：追加先・日付チップの行を出さない（欄の大きさ・位置は Task と同じ） */
.quickadd--list .quickadd__preview { display: none; }
/* 複数行ペーストの確認（g84）：候補の一覧＝Task 行と同じ密度・チップは Quick Add の下見と同じ */
.bulk { list-style: none; margin: 8px 0 0; padding: 0; max-height: 44dvh; overflow: auto; border-top: 1px solid var(--line); }
.bulk__item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
.bulk__item .chip { min-height: 22px; padding: 0 8px; }
.bulk__title { flex: 1 1 auto; min-width: 0; }
/* Review の List 見直し（g61e）：Section＝B（Kaname List／Hitotoki List）・本文＝C・3 択＝D。Review の地（accent-pale）はそのまま */
.rv__preview { font-size: var(--fs-small); color: var(--gray); margin: 8px 0 0; padding: 6px 10px; border: 1px dashed var(--line); border-radius: var(--radius); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }   /* 確認用の再表示（beta） */
.kaname-planedit { margin-left: 16px; }
.planedit { margin-top: 10px; }
.kaname-rvview { margin-top: 10px; }
.kaname-face__edit { margin-top: 6px; }
.kaname-loglink { margin-left: .8em; }
.logedit { margin-top: 18px; }
.logedit .rv__text { margin-top: 8px; }
.logedit__actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
/* 並び替えのハンドル（g61d）：↑↓ の代わりに 1 つの控えめな 6 点ハンドル。PC＝ドラッグ／スマホ＝長押し→上下ドラッグ（touch-action:none はハンドルだけ＝本文や余白の縦スクロールは邪魔しない）。キーボード＝ハンドルにフォーカスして ↑↓ */
.kitem__grip { width: 28px; height: 40px; flex: none; color: var(--gray-2); cursor: grab; touch-action: none; display: grid; place-items: center; border-radius: var(--radius); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kitem__grip svg { width: 10px; height: 16px; }
.kitem__grip:hover, .kitem__grip:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.kitem.is-dragging { background: var(--paper); box-shadow: 0 1px 6px rgba(0, 0, 0, .10), 0 0 0 1px var(--line); position: relative; z-index: 2; opacity: .96; }
.kitem.is-dragging .kitem__grip { cursor: grabbing; color: var(--ink); }
.kitem.is-armed .kitem__grip { color: var(--ink); background: var(--hover); }   /* スマホ：長押しが成立してドラッグ待ち */

/* Ring Editor */
.editor__head { display: flex; justify-content: space-between; align-items: center; }
.editor__ring { margin: 14px 0 6px; }
.editor__ring .kaname-ring { width: var(--ring-editor); max-width: 260px; }
.editor__sum { text-align: center; color: var(--gray); font-size: var(--fs-small); min-height: 1.6em; margin-bottom: 8px; }
.editor__items { border-top: 1px solid var(--line); }
.kitem { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); min-height: 52px; }
.kitem__tone { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kitem__tone--1 { background: var(--ring-1); } .kitem__tone--2 { background: var(--ring-2); } .kitem__tone--3 { background: var(--ring-3); border: 1px solid var(--line); }
/* STEP 1 のスロット：まだ色は付けない（番号だけ） */
.kitem__tone--slot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--gray-2); font-family: var(--sans); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; background: transparent; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.editor__step { margin: 14px 0 4px; }
.kitem__name { flex: 1; min-width: 0; font-size: 17px; border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 8px 0; border-radius: 0; -webkit-appearance: none; }
.kitem__name:focus { outline: none; border-bottom-color: var(--accent); }
.kitem__clear { width: 32px; height: 40px; flex: none; color: var(--gray-2); font-size: 16px; line-height: 1; border-radius: var(--radius); display: grid; place-items: center; }   /* Log の欄だけ：その欄の文字を空にする ×（検索欄の × と同じ考え方・行は消さない・g61c） */
.kitem__clear:hover, .kitem__clear:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.kitem__name::placeholder { color: var(--gray-2); font-size: var(--fs-body); }
.editor__step { margin-top: 10px; }
.kitem__label { flex: 1; min-width: 0; font-size: 17px; padding: 8px 0; overflow-wrap: anywhere; }
/* 配分バー（STEP 2 だけ）：100% を一本に。区画の境界ハンドルを動かすと両隣の 2 項目だけが増減する（10% 刻み） */
.kbar { position: relative; height: 48px; display: flex; align-items: center; margin: 4px 14px 10px; touch-action: pan-y; }
.kbar__track { display: flex; width: 100%; height: 16px; border-radius: 8px; overflow: hidden; background: var(--line); }
.kbar__seg { height: 100%; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .18); }   /* 区切りは 1px の薄い線だけ（Ring の濃い境界線は流用しない） */
.kbar__seg:last-child { box-shadow: none; }
.kbar__seg--1 { background: var(--ring-1); } .kbar__seg--2 { background: var(--ring-2); } .kbar__seg--3 { background: var(--ring-3); }
.kbar__handle { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--accent-deep); box-shadow: var(--shadow); cursor: ew-resize; touch-action: none; }
.kbar__handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; border-radius: 1px; background: var(--accent-deep); }
.kbar__handle:focus { outline: none; }
.kbar__handle:focus-visible { box-shadow: 0 0 0 4px var(--accent-pale), var(--shadow); }
.kbar[data-single] .kbar__track { opacity: .7; }
/* 「40%」：押すと数字で直接入力（差分は隣接 1 項目だけで調整） */
.kitem__pctbtn { width: 60px; height: 44px; text-align: right; font-family: var(--sans); font-size: 18px; color: var(--ink); padding: 0; border-bottom: 1px solid transparent; border-radius: 0; font-variant-numeric: tabular-nums; flex: none; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.kitem__pctbtn:hover, .kitem__pctbtn:focus-visible { border-bottom-color: var(--line); outline: none; }
.kitem__num { width: 60px; text-align: right; font-family: var(--sans); font-size: 18px; border: 0; border-bottom: 1px solid var(--accent); background: transparent; padding: 6px 0; border-radius: 0; -webkit-appearance: none; font-variant-numeric: tabular-nums; flex: none; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.kitem__num:focus { outline: none; }
.kitem__remove { width: 36px; height: 40px; color: var(--gray-2); font-size: 16px; flex: none; border-radius: var(--radius); }
.kitem__remove:hover, .kitem__remove:focus-visible { color: var(--ink); background: var(--hover); }
.editor__add { display: block; padding: 12px 0; min-height: 44px; }
.editor__cands { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
.cand { color: var(--gray); font-size: var(--fs-small); min-height: 28px; border: 1px solid var(--line); border-radius: 999px; padding: 0 10px; }
.cand:hover { color: var(--ink); border-color: var(--gray); }
.editor__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); align-items: flex-start; }
.editor__done { font-size: var(--fs-head); margin: 12px 0 0; }
.editor--done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- Review（モード） ---------- */
body.is-review .nav, body.is-review .aside, body.is-review .quickadd-dock, body.is-review .tabbar { display: none; }
body.is-review .shell { grid-template-columns: 1fr; background: var(--review-bg); --ring-gap: var(--review-bg); }   /* Review／List 画面の地＝--review-bg（accent-pale を paper で薄めた色・テーマ連動・g62）。Ring の区画間の抜けもその地の色にする（地と同化） */
body.is-review .main { max-width: 640px; margin: 0 auto; width: 100%; height: auto; }
body.is-review .main__head { display: none; }   /* Review の上端に出ていた内容のない白い帯＝空の .main__head（padding＋白地）。Review では見出しを使わないので出さない（g56） */
/* Review は入れ子スクロールにしない（g56）：Shell の固定高さと .main__body の overflow を外し、document のスクロール 1 本にする（右端に突然出る内側の縦バーを無くす） */
body.is-review { overflow: auto; }
body.is-review .shell { height: auto; min-height: 100dvh; overflow: visible; }
body.is-review .main__body { overflow: visible; flex: none; padding-top: 26px; padding-bottom: 60px; }
body.is-review .released__back { color: var(--gray); }   /* テーマ色の地では gray-2 の「戻す」が薄すぎる */
/* Review／List 画面（テーマ色の地）の入力欄＝neutral の地＋薄い枠（g62）。Kaname 名・割合の数字（Ring Editor）も同じ扱い。focus だけ accent */
body.is-review .kitem__name, body.is-review .kitem__num { background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
body.is-review .kitem__name:focus, body.is-review .kitem__num:focus { border-color: var(--accent); }
.rv { display: flex; flex-direction: column; }
.rv__head { display: flex; align-items: baseline; gap: 12px; }
.rv__head .link { margin-left: auto; }
.rv__jun { font-size: var(--fs-head); }
.rv__q { font-size: var(--fs-head); margin: 26px 0 6px; line-height: 1.6; text-wrap: balance; }
.rv__ring .kaname-ring { width: var(--ring-review); max-width: 300px; }
.rv__ringsmall { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.rv__text { --rv-fs: var(--fs-body); --rv-lh: var(--lh-log); width: 100%; display: block; font-size: var(--rv-fs); line-height: var(--rv-lh); border: 1px solid var(--line); background-color: var(--input-bg); padding: 10px 12px; border-radius: var(--radius); -webkit-appearance: none; resize: vertical; margin: 14px 0 0;   /* g62：入力欄にはテーマ色を塗らない＝neutral の地＋薄い枠（Review の地の上でも「ここが入力欄」と分かる）。罫線は content-box 基準のまま */
  /* 罫線（g56）：1 行の高さ＝--rv-fs × --rv-lh を 1 タイルにして各行の下端に 1px。padding-top 0・background-position 0 0 で 1 行目から最終行まで文字が罫線に乗る。スマホは --rv-fs／--rv-lh だけ変える（罫線も同じ式で追従） */
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--line-soft) calc(100% - 1px)); background-size: 100% calc(var(--rv-fs) * var(--rv-lh)); background-position: 0 0; background-repeat: repeat-y; background-origin: content-box; background-attachment: local; }
.rv__text:focus { outline: none; border-color: var(--accent); }
.rv__fold { margin-top: 12px; }
.rv__done-title { min-width: 0; overflow-wrap: anywhere; }
.rv__done-date { margin-left: auto; padding-left: 10px; white-space: nowrap; }   /* g207：完了日は補助（灰・右寄せ・折り返さない） */
.rv__actions { display: flex; align-items: center; gap: 22px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv__actions--sub { border-top: 0; margin-top: 6px; }
.rv--done { align-items: center; text-align: center; }
.rv--done .rv__head { align-self: stretch; }
.rv .editor__head { display: none; }
.rv .editor { margin-top: 6px; }
details.fold summary { padding: 8px 0; cursor: pointer; list-style: none; } details.fold summary::-webkit-details-marker { display: none; }

/* ---------- Sheet / Panel（Task 詳細・確認） ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 30; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(52, 50, 56, .18); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: 14px var(--gutter) calc(20px + var(--safe-b)); max-height: 86dvh; overflow: auto; box-shadow: 0 -2px 12px rgba(52, 50, 56, .06); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.sheet__text { font-size: var(--fs-body); margin: 8px 0 14px; }
.sheet__actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
body.has-sheet { overflow: hidden; }
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .sheet:not(.sheet--center) { animation: sheet-up 220ms var(--ease-out); } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } }
.sheet-wrap.is-closing .sheet-backdrop { transition: opacity 180ms; opacity: 0; }
/* g139：Task 詳細の右ペインは 820px 以上（819px 以下は従来どおり bottom sheet・mobile 不変）。幅は可変＝clamp(380px, 100vw − ナビ 232px − 一覧 200px, 460px)＝820px で 388px・892px 以上で従来の 460px。380px＝詳細フォームの行が折れない最小幅（実測）。中央ダイアログ（.sheet--center）は下の 900px の規則のまま */
@media (min-width: 820px) {
  .sheet:not(.sheet--center) { left: auto; right: 0; top: 0; bottom: 0; width: clamp(380px, calc(100vw - 232px - 200px), 460px); border-top: 0; border-left: 1px solid var(--line); border-radius: 0; max-height: none; padding: 22px 26px 40px; box-shadow: -4px 0 24px rgba(52, 50, 56, .08); }
}
@media (min-width: 900px) {
  .sheet--center { left: 50%; right: auto; top: 50%; bottom: auto; width: 420px; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: var(--radius-sheet); max-height: calc(100dvh - 32px); overflow: auto; }   /* g110：中央ダイアログは画面を超えない＝長い内容は中でスクロール */
}
/* Task 詳細 */
.td__title { margin-bottom: 8px; }
.td__sub { margin-top: 10px; }
.td__subrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.td__subrow input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 4px 0; }
.td__subrow input:focus { outline: none; border-bottom-color: var(--accent); }
.td__subrow.is-done input { color: var(--gray); text-decoration: line-through; }
.td__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.td__meta { color: var(--gray-2); font-size: 11px; margin-top: 14px; }
.remrow { display: flex; align-items: center; gap: 8px; }

/* Popover（日付・選択） */
.pop { position: fixed; z-index: 40; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 10px; min-width: 260px; }
.pop__row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pop__list { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.pop__item { text-align: left; padding: 7px 8px; border-radius: var(--radius); display: flex; gap: 8px; align-items: center; }
.pop__item:hover { background: var(--hover); }
.pop__item.is-on { background: var(--accent-pale); }
.pop__item--sub { padding-left: 24px; }
.cal-pick { width: 100%; }
.cal-pick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-pick__m { font-family: var(--sans); letter-spacing: .06em; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.cal-pick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-pick__w { text-align: center; color: var(--gray-2); font-size: 10px; padding: 2px 0; }
.cal-pick__d { text-align: center; padding: 5px 0; border-radius: var(--radius); font-family: var(--sans); font-size: 13px; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.cal-pick__d:hover { background: var(--hover); }
.cal-pick__d.is-today { color: var(--accent-deep); font-weight: 600; }
.cal-pick__d.is-on { background: var(--accent-pale); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-pick__d.is-out { color: var(--gray-2); }
.pop__time { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 6px; }
.pop__time input[type=time] { border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 6px; font-family: var(--sans); }   /* g131：実用の数字＝Sans（Journal 仕様） */

/* ---------- Settings ---------- */
.settings { max-width: 640px; }
@media (min-width: 761px) { .settings { max-width: min(920px, 84%); } .settings .themes--ring, .settings .themes--bg { max-width: 640px; gap: 12px; } .settings .theme { padding: 12px 8px 8px; gap: 6px; } .settings .theme__ring .kaname-ring { width: 56px !important; } .settings .themes--bg .theme__swatch { height: 36px; } }   /* PC：Settings 本文は中央カラムの 8 割強を使う（他画面には波及しない）。Appearance のカードは横に広がり見本 56px */
.settings__sec { border-top: 1px solid var(--line); padding: 16px 0; }
.settings__t { font-family: var(--mincho); font-size: 16px; margin: 0 0 8px; }
/* g300：特典の受け取り画面＝「購入時のメールアドレス（必須）」「アンケート（任意）」「受け取る」を見出しで区切る（番号なし）。スマホで入力欄とボタンの関係が一目で分かるように */
.benefit__step { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.benefit__step__t { font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.benefit__badge { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 400; color: var(--gray); background: var(--paper-2); flex: none; }
.benefit__badge--req { color: var(--accent-deep); border-color: var(--accent-soft); background: var(--accent-pale); }
.benefit__step .chips .btn--primary { min-height: 40px; }

.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Appearance：Ring Color は 3 列 × 2 段（A1｜A2｜A3／B1｜はやぶさ｜Custom）・Background は 3 列 × 1 段。375px でも同じ列数・横はみ出しなし。カードは余白を詰め、見本の Ring は 44px を保つ */
.themes--ring, .themes--bg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.theme__ring { display: inline-flex; align-items: center; justify-content: center; }
.theme__ring .kaname-ring { filter: none; }
.theme { border: 1px solid var(--line); border-radius: 6px; padding: 8px 6px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.theme:hover { border-color: var(--gray); }
.theme.is-on { border-color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent-deep); }
.theme.is-locked { cursor: default; }
.theme.is-locked .theme__name { color: var(--gray); }
.theme__ring--lock { position: relative; }
/* g187：期間末キャンセル予約中の表示（Settings の Pro 行）。通常の補足文より一段目立つ薄いアクセント色の枠・日付は太字。危険色ではない */
.billing-cancel { margin: 6px 0 10px; padding: 8px 12px; border: 1px solid var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--accent-pale); color: var(--ink); font-size: var(--fs-small); line-height: var(--lh-log); max-width: 640px; }
.billing-cancel__date { font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
/* g233：月額⇄年額のプラン行（Settings「10thly アカウント」・Portal 状態のときだけ）。現在のプラン／次回のお支払い＝小さな本文。変更予約中は g187 と同じ薄いアクセント色の枠 */
.billing-plan { display: grid; gap: 2px; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.billing-plan__pending { margin: 6px 0 4px; }
/* g185：Custom Color の編集欄（Ring Color カード群の直下・PC／スマホ共通）。色欄はブラウザ標準の color 入力＋HEX。見本の Ring はこの欄の --ring-1/2/3 だけを見る */
.ringcustom { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.ringcustom__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ringcustom__f { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ringcustom input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.ringcustom__hex { font-size: var(--fs-small); color: var(--gray); font-family: inherit; }
.ringcustom__preview { margin-left: auto; display: inline-flex; }
.ringcustom__preview .kaname-ring { filter: none; }
@media (min-width: 761px) { .settings .ringcustom { max-width: 640px; } }
/* Custom のロック：見本の上に鍵と控えめな斜線。カード自体は読める濃さのまま（opacity を下げすぎない） */
.theme.is-locked .theme__ring--lock .kaname-ring { opacity: .45; }
.theme.is-locked .theme__ring--lock::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(52, 50, 56, .10) 4px 5px); pointer-events: none; }
.theme__lock { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); z-index: 1; }
.theme__lock svg { width: 13px; height: 13px; }
.plan-line--acct { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: var(--fs-small); }
@media (min-width: 1181px) { .kaname-review, .today-review { display: none; } }   /* g228：右ペイン（同じ Review 導線あり）が出る 1181px 以上でだけ隠す。761〜1180px は右ペインが無い（.shell 2 列）ため Today／Kaname の導線を残す（g153 の min-width 761px ではこの幅帯で Review の入口が 0 本だった） */
.trow__act--danger { color: var(--ink); }
/* 共有カード */
.kaname-edit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.kaname-share { color: var(--gray); }
.share__img { display: block; width: 100%; max-width: 360px; height: auto; margin: 10px auto; border: 1px solid var(--line); border-radius: var(--radius); }
.share__designs { margin: 6px 0 2px; }   /* g285：デザインの選択（ベーシック＋A〜D） */
.share__photo { margin: 8px 0 4px; }   /* g286：写真背景の操作 */
.share__zoomlabel { display: block; margin-top: 8px; }
.share__zoom { width: 100%; max-width: 360px; display: block; }
.share__img.is-draggable { touch-action: none; }   /* g286→g288c：写真を選んでいるときだけドラッグ（位置調整）＝それ以外はプレビューの上でも画面をスクロールできる */
.sheet--share { overscroll-behavior: contain; }   /* g288c：共有画面の端で背景の Kaname 画面へスクロールが伝わらない */
.share__ref { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }   /* g282：紹介リンク付きでシェア */
.share__textlabel { display: block; margin-bottom: 6px; }
.share__text { width: 100%; max-width: 560px; box-sizing: border-box; resize: none; overflow: hidden; line-height: 1.6; font-size: 13px; color: var(--ink); background: var(--input-bg); }   /* g288c：内容に合わせて伸びる（screens/kaname.js grow）＝入れ子のスクロールなし */
.share__link { margin: 8px 0 0; line-height: 1.6; }
.share__url { word-break: break-all; color: var(--ink); }
.share-fab { position: absolute; right: 32px; bottom: 20px; z-index: 5; pointer-events: none; }   /* g288c：共有の入口＝中央の本文領域（.main＝position: relative）の右下に固定＝本文のスクロールに関係なく同じ位置・右ペインには掛からない・シート（z 30）より下。.main__body（overflow）の中にあるが包含ブロックは .main なので切り取られない */
.share-entry { pointer-events: auto; min-height: 36px; padding: 0 14px; gap: 6px; color: var(--accent-deep); border-color: var(--accent); background: var(--paper); font-size: var(--fs-small); border-radius: 999px; box-shadow: 0 2px 10px rgba(52, 50, 56, .10); }
.share-entry:hover { background: var(--accent-pale); border-color: var(--accent-deep); }
.share-entry__icon { width: 15px; height: 15px; }
@media (max-width: 760px) { .share-fab { right: 16px; bottom: 12px; } }   /* スマホ：.main の下端＝タブバー（.main の外・in-flow）の上＝タブバーと重ならない。本文の末尾がボタンに隠れないよう .main__body の下余白を足す */
@media (max-width: 760px) { body.no-quickadd .main__body { padding-bottom: 64px; } }   /* Quick Add の無い画面（Kaname 等）＝右下の共有ボタン（36px＋12px）の分だけ本文の下余白を足す＝末尾の操作が隠れない */
.share__label { display: block; margin: 12px 0 4px; }
.share__ops { margin-top: 14px; }
.share__main { width: 100%; max-width: 360px; display: flex; }
.share__sub { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.share__opsnote { margin: 8px 0 0; }
.share__snsnote { width: 100%; margin-bottom: 2px; }
.share__help { margin-top: 12px; }
.share__helplist { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.share__helplist li { margin: 4px 0; }
@media (max-width: 760px) { .share__main { max-width: none; } }   /* g288c：共有画面は 1 つのスクロール領域で上から下へ連続（固定表示は置かない＝本人指示 2026-10-15） */
.share__period { display: block; max-width: 360px; margin: 2px 0 10px; }   /* g288：共有する期間 */
.share__img.is-transparent { background-color: #fff; background-image: linear-gradient(45deg, #E4E2E8 25%, transparent 25%, transparent 75%, #E4E2E8 75%), linear-gradient(45deg, #E4E2E8 25%, transparent 25%, transparent 75%, #E4E2E8 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; }   /* g288：透過はプレビューだけ市松（保存画像には入らない） */
.share__refopt { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
.share__refopt input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-deep); }
.share__ops { margin-top: 12px; }
.share__sns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }   /* g288：SNS 別＝本文だけを渡す（公式な共有 URL） */
.sns { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.sns:hover { border-color: var(--gray); background: var(--hover); }
.sns[disabled] { opacity: .45; cursor: default; }
.sns__icon { display: block; }
.sns__name { font-size: var(--fs-small); line-height: 1.2; color: var(--ink); }
.sns[hidden] { display: none; }
/* モニター利用状況（admin） */
.admin { max-width: 980px; }
.admin__tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.admin__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.admin__table th, .admin__table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: top; }
.admin__table th { color: var(--gray); font-weight: 400; letter-spacing: .04em; font-size: 11px; }
.admin__table td.num { text-align: right; }
.admin__wrap { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.admin__grant { display: grid; gap: 8px; max-width: 520px; margin-top: 8px; }
.admin__grant .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin__toc { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0 10px; }   /* g294：機能ごとの目次 */
.admin__toc .link { padding: 6px 0; }
.admin__count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--hover); color: var(--gray); font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.admin__sec { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.admin__sum { cursor: pointer; padding: 8px 0; list-style: none; }
.admin__sumt { margin: 0; }
.admin__table--compact [data-opt] { display: none; }   /* g294：主要な列だけ（「すべての列」で広げる） */
.theme__tag { font-family: var(--en); font-size: 10px; letter-spacing: .06em; color: var(--gray); margin-left: .4em; text-transform: uppercase; }
.theme__en { font-family: var(--en); font-size: 10px; letter-spacing: .06em; color: var(--gray); margin-left: .4em; }   /* g79：テーマの英字名（黎明 REIMEI 等）。Pro の印（.theme__tag）と同じ大きさ・色。狭い画面ではカードに収まらないため出さない（下の media） */
@media (max-width: 760px) { .themes--ring .theme__en { display: none; } }
.themes--bg .theme__swatch { height: 28px; width: 100%; }
.theme__swatch { height: 44px; border-radius: var(--radius); border: 1px solid var(--line); position: relative; overflow: hidden; }
.theme__swatch i { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%; }
.theme__name { font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.settings__switches { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.switch input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-2); position: relative; margin: 0; cursor: pointer; transition: background var(--t-fade); }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 1px solid var(--gray); transition: transform var(--t-fade); }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(14px); border-color: var(--accent-deep); }

/* CSV の受け皿 */
.csvdrop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px dashed var(--line); border-radius: 6px; padding: 12px; }
.csvdrop.is-dragover { border-color: var(--accent-deep); background: var(--accent-pale); }

/* ---------- Lock ---------- */
.lock-root { min-height: 100dvh; background: var(--paper); }
.lock { max-width: 360px; margin: 0 auto; padding: calc(var(--safe-t) + 18vh) var(--gutter) 40px; display: flex; flex-direction: column; gap: 10px; }
.lock__mark { display: flex; justify-content: center; margin-bottom: 18px; }
.lock__lead { font-size: var(--fs-body); margin: 0 0 6px; }
.lock__msg { min-height: 1.6em; margin: 6px 0 0; }

/* ---------- Loading / Notice ---------- */
.boot { position: fixed; inset: 0; background: var(--paper); display: grid; place-items: center; z-index: 40; }
.boot__line { width: 120px; height: 1px; background: var(--line); }
@media (prefers-reduced-motion: no-preference) { .boot__line { animation: boot-pulse 1.4s ease-in-out infinite; } @keyframes boot-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } }
.notice { position: fixed; bottom: calc(var(--quickadd-h) + var(--quickadd-extra, 0px) + 28px); left: 50%; transform: translateX(-50%); width: min(480px, calc(100% - 32px)); background: var(--ink); color: var(--paper); border-radius: 6px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); z-index: 50; box-shadow: var(--shadow); }
.notice__text { flex: 1; }
.notice__act { color: var(--accent); border-bottom: 1px solid var(--accent); }
.notice__close { width: 28px; height: 28px; color: var(--gray-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Today（mobile 幅）。固定バナー（sticky）は g43 で撤去＝Ring＋Kaname は通常コンテンツとしてスクロールで隠れる ---------- */
@media (max-width: 760px) {
  body.no-quickadd .main__body { padding-bottom: 24px; }
  body.no-quickadd .companion-root { bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }   /* Quick Add の無い画面（Kaname 等）：固定タブバー（45px＋safe-area）の上＝タブバーの裏に隠れない（PC 用の bottom: 30px を上書き） */
}

/* ---------- Companion（Character Mode） ---------- */
/* 置き場＝Quick Add・追加ボタン・タブバーなど操作 UI を覆わない safe area（中央ペイン右下、Quick Add の上）。最大サイズでも同じ枠に収める */
:root { --companion-size: 84px; --companion-max: 96px; }
.companion-root { position: fixed; right: calc(var(--aside-w) + 20px); bottom: calc(var(--quickadd-h) + var(--quickadd-extra, 0px) + 30px); width: var(--companion-max); height: var(--companion-max); z-index: 5; pointer-events: none; display: flex; align-items: flex-end; justify-content: flex-end; }
.companion { width: var(--companion-size); height: var(--companion-size); pointer-events: auto; cursor: pointer; transition: transform .6s var(--ease-out), opacity .6s; }
body.is-locked .companion-root { right: 24px; bottom: 60px; }
.companion svg { width: 100%; height: 100%; display: block; }
/* 退避：成長した段階＝飛んで行く（従来）／卵＝転がる／幼いひよこ＝走って勢い余って転がる（地上）。戻りは端から転がって定位置へ */
.companion.is-away { transform: translate(60px, -80px) rotate(12deg); opacity: 0; pointer-events: none; }
.companion.is-away-roll { transform: translateX(140px) rotate(720deg); opacity: 0; pointer-events: none; transition: transform 1.1s cubic-bezier(.3,.6,.4,1), opacity .5s .7s; }
.companion.is-away-run { animation: cp-run 1.2s cubic-bezier(.4,0,.8,1) forwards; pointer-events: none; }
.companion.is-return-roll { animation: cp-return 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cp-run { 0% { transform: translateX(0) rotate(0); } 35% { transform: translateX(40px) rotate(-8deg); } 55% { transform: translateX(70px) rotate(25deg); } 100% { transform: translateX(150px) rotate(400deg); opacity: 0; } }
@keyframes cp-return { 0% { transform: translateX(150px) rotate(-540deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .companion.is-away-roll { transform: translateX(40px); transition: opacity .3s; }
  .companion.is-away-run { animation: none; opacity: 0; transform: translateX(40px); }
  .companion.is-return-roll { animation: none; }
}
.companion__bubble { position: absolute; right: calc(var(--companion-size) + 6px); bottom: calc(var(--companion-size) - 24px); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: var(--fs-small); white-space: nowrap; max-width: 260px; box-shadow: var(--shadow); pointer-events: none; }
.companion__bubble::after { content: ''; position: absolute; right: -5px; bottom: 10px; width: 8px; height: 8px; background: var(--paper); border-right: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .companion.is-idle svg { animation: cp-breathe 3.2s ease-in-out infinite; transform-origin: 50% 90%; } @keyframes cp-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .aside { display: none; }
  .companion-root { right: 20px; }
}
/* Focus（Today）：左サイドバーと右ペインを隠し、Today を中央に広げる。操作は完了チェックと Task を開くこと・Quick Add だけ。
   並び替え・行の操作・選択・一括操作は出さない（ショートカットとドラッグも app 側で止める） */
body.is-focus .nav, body.is-focus .aside, body.is-focus .bulkbar, body.is-focus .nav-toggle { display: none; }
body.is-focus .shell { grid-template-columns: 1fr; }
body.is-focus .main { max-width: 760px; margin: 0 auto; width: 100%; }
body.is-focus .trow__grip, body.is-focus .trow__acts, body.is-focus [data-select], body.is-focus .trow__sel { display: none; }
body.is-focus .trow__main { cursor: default; }
body.is-focus .main__head { border-bottom-color: var(--accent); }
.switch--focus { font-size: var(--fs-small); color: var(--gray); }
.switch--focus .switch__state { font-family: var(--en); font-size: 11px; letter-spacing: .08em; color: var(--gray-2); min-width: 2.2em; }
.switch--focus input:checked ~ .switch__state { color: var(--accent-deep); }
/* 閲覧専用の Task 詳細（Focus 中） */
.tdv__title { font-size: 18px; font-weight: 400; margin: 6px 0 4px; }
.tdv__notes { white-space: pre-wrap; line-height: var(--lh-log); color: var(--ink); margin: 6px 0 10px; }
.tdv__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--gray); font-size: var(--fs-small); }
.tdv__sub { margin-top: 10px; }
.m-rem svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.senpai { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); font-size: var(--fs-small); color: var(--ink); }
.senpai__ico { width: 28px; height: 28px; flex: none; }
.senpai__ico svg { width: 100%; height: 100%; display: block; }
.senpai__q { color: var(--gray); }
.senpai__ico--locked svg { filter: brightness(0) opacity(.28); }   /* パイセン未解放：正体の分からない影（自分のキャラがニワトリに到達したら完成したニワトリに・g49） */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  /* 文書は固定し、Header・一覧・入力欄を同じ高さの枠内に置く。 */
  body.has-viewport-shell { position: fixed; inset: 0; width: 100%; overflow: hidden; }
  body.has-viewport-shell .shell { position: absolute; top: var(--app-top, 0px); left: 0; right: 0; height: var(--app-height, 100dvh); }
  body.has-viewport-shell .main__body { overscroll-behavior-y: contain; }
  body.has-viewport-shell:not(.no-quickadd):not(.is-editing) .main__body { padding-bottom: 16px; }
  body.has-viewport-shell .quickadd-dock { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; background: var(--paper); }
  body.is-kbd .tabbar { display: none; }
  body.is-kbd .shell { --safe-b: 0px; }
  body.is-kbd .companion-root { display: none; }
  .main__head { padding-top: calc(var(--safe-t) + 14px); }
  .nav { display: none; }
  /* 「その他」：同じ Nav を全画面に。× は右上の角に固定（上部 Nav 領域は作らない）。中身はひと続きにスクロール。下は Kaname／Settings 固定、その下に既存タブバー（重ねない） */
  .nav.is-open { display: flex; position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--tabbar-h) + var(--safe-b)); height: auto; z-index: 25; background: var(--paper); padding: 0; }
  .nav.is-open .nav__scroll { padding-top: calc(var(--safe-t) + 14px); }
  .nav.is-open .nav__brand { padding-right: 56px; }
  .nav.is-open .wordmark, .nav.is-open .brand__logo { display: none; }
  .nav.is-open .nav__title { display: inline; font-size: var(--fs-head); font-family: var(--mincho); }
  .nav.is-open .nav__close { display: inline-grid; position: absolute; top: calc(var(--safe-t) + 6px); right: 6px; width: 44px; height: 44px; font-size: 20px; line-height: 1; color: var(--gray); z-index: 2; background: transparent; border: 0; box-shadow: none; border-radius: var(--radius); }   /* 控えめな ×（タップ領域 44px は確保・主役にしない） */
  .nav.is-open .nav__close:hover, .nav.is-open .nav__close:focus-visible { color: var(--ink); background: var(--hover); }
  .nav.is-open .nav__bottom { padding-bottom: 10px; background: var(--paper); }
  /* スマホ「その他」のセクション：PC 左バーと同じ思想（前とは広く 22px・自分の項目とは近く 4px・罫線なし・見出しは本文より小さく字間あり・色は同じ token） */
  .nav.is-open .nav__section { padding: 22px 10px 4px; font-size: 11px; letter-spacing: .16em; font-weight: 400; color: color-mix(in srgb, var(--accent-deep) 68%, var(--gray)); }
  .kaname-review { margin: 14px 0 6px; }
  .tabbar { display: flex; justify-content: space-around; border-top: 1px solid var(--line); background: var(--paper); padding: 0 8px var(--safe-b); position: relative; z-index: 26; }
  body.has-menu .tab[data-menu] { color: var(--ink); }
  .tab { color: var(--gray); font-size: 11px; letter-spacing: .04em; padding: 2px 4px; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-height: 44px; min-width: 44px; text-decoration: none; justify-content: center; }
  .tab[aria-current="page"] { color: var(--ink); }
  .main__head { padding: calc(var(--safe-t) + 14px) var(--gutter) 6px; }
  .main__body { padding: 8px var(--gutter) calc(var(--quickadd-h) + 48px); }   /* 固定 Quick Add（下 ≒ 96px）の下に最後の行が隠れない */
  .quickadd-dock { padding: 8px var(--gutter) 10px; }
  .main__body { overflow-x: hidden; }   /* スワイプで横へ動いた行が横スクロールを生まない（g54）。10 Days の横スクロールは .cal 自身が持つ */
  .trow__grip { display: none; }
  .trow__fold { min-height: 28px; padding: 0 8px 0 4px; }   /* スマホ：指で押せる高さ（行の高さは変えない） */
  .trow__toggle { left: -20px; width: 20px; height: 22px; top: 10px; }   /* g125：スマホは左の余白（gutter 20px）いっぱいに */
  .trow__acts { display: none; }   /* スマホでは行の右側の日付／複製／ゴミ箱を常時出さない（Task 詳細で行う）＝タイトルに幅を戻す */
  .today-ring .kaname-ring { width: 84px !important; max-width: 88px; min-width: 80px; }   /* 実表示 84px（inline の width 指定より優先）＝区画が目視で分かる */
  .today-ring { gap: 12px; margin: 8px 0 4px; }
  .head__break { display: block; flex-basis: 100%; height: 0; }   /* スマホ：操作の行を題の行から折る（全一覧で同じ位置に） */
  .main__head { row-gap: 0; }   /* 折り目の空行に行間を足さない（Today 上部を高くしない） */
  .head__main { row-gap: 0; }   /* g118d：内側の左領域も同じ（gap:14px が行間にも効いて、見出し→説明／ガイド→折り目→操作群の各段に 14px ずつ空白が入っていた）。段の間隔は .head__ops の margin-top だけ */
  .head__ops { gap: 6px; margin-top: 6px; }
  .head__search--global { margin-top: 0; }
  .head__sub--search { margin-top: 6px; }
  .switch--focus .switch__state { display: none; }   /* ON／OFF の文字はスマホでは出さない（toggle と Focus の文字で分かる） */
  .head__search__in { font-size: 16px; padding: 4px 0; }   /* 検索欄も自動ズームなし（16px 未満にしない） */
  .head__search { margin-top: 4px; min-height: 31px; }
  .trow__act { width: 40px; height: 40px; }
  .trow__chk { width: 44px; height: 44px; margin-top: -6px; }
  .trow__lchk { width: 44px; height: 44px; margin-top: -6px; }
  /* iPhone Safari：入力欄の実効 font-size が 16px 未満だとフォーカス時に画面が自動ズームされる（g49）。モバイルの入力可能要素は 16px 以上にそろえる。
     要素セレクタで底上げし、既に 16px 以上の欄（タイトル 17・Kaname 17・割合 18・Lock 22）はクラス側の値のまま。本文の文字サイズ・PC は変えない。user-scalable は制限しない */
  input, textarea, select, [contenteditable="true"] { font-size: 16px; }   /* 要素セレクタ＝font: inherit のリセットには勝ち、クラスで大きさを決めている欄には負ける */
  .quickadd__input { font-size: 16px; padding: 7px 0; }
  .quickadd__notes__in { font-size: 16px; }   /* g142：スマホは拡大されない 16px */
  .trow__memo__in { font-size: 16px; }   /* g144 */
  .quickadd__notes { padding-left: 0; }
  .nav__search input { font-size: 16px; padding: 5px 0; }
  .field--notes { font-size: 16px; line-height: 1.6; }
  .rv__text { --rv-fs: 16px; --rv-lh: 1.7; }   /* 罫線も同じ式（16 × 1.7＝27.2px）で追従 */
  body.is-review .main__body { padding-top: calc(var(--safe-t) + 18px); }
  .kaname-faces { grid-template-columns: 1fr; gap: 6px; }   /* スマホは Plan → Log の縦配置 */
  .kaname-center .kaname-faces { gap: 40px; }   /* 旬詳細だけ g61f のセクション間（g61j） */
  .kaname-center .released { margin-top: 40px; }
  :root { --ring-face: 52vw; --ring-hist: 120px; }
  .hist__grid { grid-template-columns: 1fr; gap: 6px; }
  .hist__block { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-items: center; }
  .hist__block .hist__ring { grid-row: 1 / 4; grid-column: 1; margin: 0; }
  .hist__block .hist__jun, .hist__block .hist__range, .hist__block .ring-labels { grid-column: 2; }
  .field--box, select.field--box, .field--box.small, select.field--box.small { font-size: 16px; }
  .pop__time input[type=time] { font-size: 16px; }
  /* スマホの Task 詳細：短い Task なら開いた直後に主要項目（タイトル・メモ・Project・日付・期限・繰り返し・リマインダー・ラベル）が 1 画面に収まる密度に */
  .sheet { padding: 8px var(--gutter) calc(12px + var(--safe-b)); max-height: 90dvh; }
  .sheet__head { margin-bottom: 0; min-height: 36px; }
  .sheet__head .btn--icon { width: 44px; height: 40px; }
  /* 1 入力だけの sheet（新しい Section／Project／ラベル・名前変更）：内容に必要な高さだけの compact bottom sheet。横幅・背景・機能・入力仕様は同じ */
  .sheet--prompt { padding: 6px var(--gutter) calc(8px + var(--safe-b)); }
  .sheet--prompt .sheet__head { min-height: 32px; margin-bottom: 0; }
  .sheet--prompt .sheet__head .btn--icon { width: 40px; height: 36px; }
  .sheet--prompt .sheet__title { font-size: 18px; line-height: 1.3; }
  .sheet--prompt .promptform { margin-top: 4px; gap: 10px; }
  .sheet--prompt .field--box { min-height: 56px; padding: 12px 12px; }   /* 入力欄は 56px を基準 */
  .sheet--prompt .sheet__actions { margin-top: 0; }
  .td__title { margin-bottom: 2px; }
  .td__title .trow__chk { width: 40px; height: 40px; margin-top: 0 !important; }
  .field--title { font-size: 17px; padding: 6px 0; }
  .field--notes { padding: 4px 0 6px; line-height: 1.6; }
  .senpai { display: none; }   /* スマホの詳細ではパイセン欄を出さない（Character Mode 本体や他画面は変えない） */
  .frow { padding: 2px 0; min-height: 40px; grid-template-columns: 5.5em 1fr; gap: 4px 8px; }
  .frow__v { gap: 6px; }
  .frow .chip { min-height: 30px; }
  .frow .btn.small { min-height: 30px; }
  .td__sub { margin-top: 6px; }
  .td__actions { margin-top: 10px; padding-top: 8px; }
  .td__meta { margin-top: 8px; }
  .trow__sel { width: 44px; height: 44px; }
  .cal { grid-template-columns: repeat(var(--cols, 10), minmax(78vw, 1fr)); scroll-snap-type: x mandatory; min-height: 50vh; }
  .cal__day { scroll-snap-align: start; }
  .group__tools { opacity: 1; }
  :root { --companion-size: 60px; --companion-max: 72px; }
  /* iPhone：固定 Quick Add（下 ≒ 80px）＋タブバー（下 ≒ 56px）の上に置く。追加ボタン・追加先チップと重ならない */
  .notice { bottom: calc(var(--quickadd-h) + var(--quickadd-extra, 0px) + 56px + var(--safe-b) + 34px); }   /* スマホの Quick Add は 2 行（≒98px）＋タブバー＝ --quickadd-h 基準の 92px では Undo トーストが入力欄に重なっていた（g54）。Companion と同じ基準で上に置く */
  .companion-root { right: 10px; bottom: calc(var(--quickadd-h) + var(--quickadd-extra, 0px) + 56px + var(--safe-b) + 34px); }   /* g183：Quick Add の展開分（--quickadd-extra）を足す＝「追加」に重ならない */
  body.is-locked .companion-root { right: 16px; bottom: calc(60px + var(--safe-b)); }
  /* g61 スマホ：hover が無いので 3 択は常に操作できる見え方（薄くしない）。1 行に ◇・本文・3 択・ゴミ箱。本文は折り返す */
  .lp__row { gap: 4px; }
  .lp__opt { padding: 0 7px; min-height: 30px; font-size: 11px; }
  .lp__del { width: 40px; height: 40px; }
  .lp__grip { width: 32px; height: 44px; }
  .lp__text { padding: 8px 2px; }
  .lp__edit { font-size: 16px; padding: 8px 8px; }   /* 自動ズームなし（16px 未満にしない） */
  /* g62 スマホ：1 行に全部並べると本文が 60px 幅に潰れる（100 項目で縦に長い折り返し）。行は 2 段＝上段：ハンドル・◇・番号・本文・ゴミ箱／下段：3 択（本文の列に揃える）。操作領域の分離（本文＝編集・ハンドル＝並び替え・3 択＝表示・ゴミ箱＝削除）は同じ */
  .lp__row { display: grid; grid-template-columns: 32px 24px max-content minmax(0, 1fr) 40px; grid-template-areas: "grip mark num text del" "grip mark num mode del"; column-gap: 4px; row-gap: 0; align-items: center; padding: 6px 0; }
  .lp__row .lp__grip { grid-area: grip; align-self: center; }
  .lp__row .lmark { grid-area: mark; }
  .lp__row .lp__num { grid-area: num; align-self: start; padding-top: 10px; }
  .lp__row .lp__text, .lp__row .lp__edit { grid-area: text; padding: 6px 2px; }
  .lp__row .lp__mode { grid-area: mode; justify-self: start; margin: 2px 0 2px 2px; }
  .lp__row .lp__del { grid-area: del; }
  .ltab { min-height: 44px; }
  .ltabs { top: var(--safe-t); }
  .lnav__row { min-height: 40px; }
  /* g61c スマホ：Ring Editor（Kaname Ring を書く／Log を書く・編集する）の縦の詰まりを解く＝Ring・割合バー・項目・決定ボタン・補足文をそれぞれのブロックとして読める余白（巨大化はしない） */
  .editor__ring { margin: 20px 0 10px; }
  .editor__sum { margin-bottom: 12px; }
  .kbar { margin: 8px 14px 20px; }
  .editor__step { margin: 20px 0 8px; }
  .kitem { padding: 6px 0; }
  .editor__cands { margin: 14px 0 6px; }
  .editor__actions { margin-top: 26px; padding-top: 16px; gap: 10px; }
  .editor .paper-hint { margin-top: 18px; }
  .logedit { margin-top: 28px; }
  .kitem__clear { width: 40px; height: 44px; }
  .kitem__grip { width: 36px; height: 44px; }
  .kp__edit { width: 40px; height: 40px; }
  :root { --ring-kaname: 62vw; --ring-editor: 56vw; }
}

/* Google 認証ボタン（ブランド指針：白地・薄い枠・「G」ロゴは色を変えない） */
.lock__google { margin-top: 18px; display: flex; justify-content: center; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; min-width: 260px; padding: 0 18px; background: rgb(255, 255, 255); color: #1F1F1F; border: 1px solid #DADCE0; border-radius: 6px; font-size: 15px; font-weight: 500; font-family: var(--sans); cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.gbtn:hover { background: #F8F9FA; border-color: #C6C8CC; }
.gbtn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-pale), 0 1px 2px rgba(0, 0, 0, .06); }
.gbtn__g { flex: none; }
.lock__entry { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lock__entry + .lock__entry { margin-top: 12px; }
.lock__entry__label { letter-spacing: .04em; }
/* Settings：アカウント管理（退会は危険操作として分ける） */
.acct__state { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.acct__danger { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); }
.btn--danger { color: var(--ink); border-color: var(--line); }
.btn--danger:hover { border-color: var(--gray); }
.confirm__field { width: 100%; margin-top: 10px; }

/* g103：Project picker＝「新しい Project」はスクロールする一覧（.pop__list）の外・最下部に固定。Section 行は Project より深い字下げ（§）で Sub-project（フォルダ）と見分ける */
.pop__newp { margin-top: 2px; }
.pop__newp .field { flex: 1; min-width: 0; }
/* g103：Project 画面の Sub-projects 群＝自分の Task・Section の後ろ。行は Nav と同じ navitem */
.group--subprojects { margin-top: 18px; }
.group--subprojects .navitem { margin-top: 4px; }

/* ---------- g104：Project 階層 DnD（Nav・Projects ページ共通）と Projects ページ ---------- */
/* 線＝実際に入る位置（--drop-indent 1＝Sub-project の階層）。入れる（into）＝親になる Project 本体を強調。is-dropsub＝右にずらして親になる Project を静かに示す。色は既存 token だけ */
.navitem[data-pid], .prow { position: relative; }
.navitem.is-dragging, .prow.is-dragging { opacity: .4; }
.navitem.is-dropbefore::before, .navitem.is-dropafter::after, .prow.is-dropbefore::before, .prow.is-dropafter::after { content: ''; position: absolute; left: calc(6px + var(--drop-indent, 0) * 18px); right: 4px; height: 2px; background: var(--accent-deep); z-index: 1; pointer-events: none; }
.prow.is-dropbefore::before, .prow.is-dropafter::after { left: calc(8px + var(--drop-indent, 0) * 24px); }
.navitem.is-dropbefore::before, .prow.is-dropbefore::before { top: -1px; } .navitem.is-dropafter::after, .prow.is-dropafter::after { bottom: -1px; }
.navitem.is-dropinto, .prow.is-dropinto { background: var(--accent-pale); box-shadow: inset 0 0 0 1px var(--accent-deep); }
.navitem.is-dropsub, .prow.is-dropsub { box-shadow: inset 0 0 0 1px var(--accent); }
.nav__section__link { color: inherit; text-decoration: none; letter-spacing: inherit; } .nav__section__link:hover, .nav__section__link[aria-current="page"] { color: var(--ink); }
/* Projects ページ：1 行 1 Project・Sub-project は字下げ。操作は PC は hover・スマホは常時 */
.plist { display: flex; flex-direction: column; }
.prow { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 8px 4px 4px; border-bottom: 1px solid var(--line); }
.prow--sub { padding-left: 28px; }
.prow .trow__grip { width: 14px; color: var(--gray-2); cursor: grab; font-size: 11px; letter-spacing: -2px; opacity: 0; }
.prow:hover .trow__grip { opacity: 1; }
.prow--archived .trow__grip { visibility: hidden; }
.prow__name { color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.prow__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.prow__count { color: var(--gray); font-family: var(--sans); font-size: var(--fs-small); font-variant-numeric: tabular-nums; margin-left: 4px; }   /* g131：実用の数字＝Sans（Journal 仕様） */
.prow__acts { margin-left: auto; display: flex; gap: 2px; opacity: 0; }
.prow:hover .prow__acts, .prow:focus-within .prow__acts { opacity: 1; }
.prow--archived .prow__name { color: var(--gray); }
.group--plater { margin-top: 22px; }
@media (max-width: 760px) { .prow__acts { opacity: 1; } .prow .trow__grip { display: none; } .prow { padding-left: 8px; } .prow--sub { padding-left: 30px; } }

/* g104f：「今はやらない」に居る Project の画面＝本文先頭の 1 行（いつから・戻す）。既存 token だけ */
.pstate { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 2px 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); color: var(--gray); font-size: var(--fs-small); }
.pstate__t { flex: 1; min-width: 0; }
.pstate--guide { background: transparent; }   /* g266：Pack 由来の Project の案内 1 行（退避中の案内行と同じ枠・地は紙のまま） */
@media (max-width: 760px) { .pstate { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* g104g：手放した Project（Projects ページ最下部の群・Yohaku の Project 行）。装飾は増やさない */
.released__row--project .released__proj { color: var(--gray); }

/* g105：常設 Undo／Redo（ヘッダー末尾・同じ位置）。disabled は薄く。色は既存 token */
.undoredo { display: inline-flex; gap: 2px; margin-left: 8px; align-self: center; }
.main__head > .undoredo, .head__tools:not(.head__end) > .undoredo:last-child { margin-left: auto; }   /* head__end（Focus／登録日の右隣・8px）は g118b のまま */   /* g232（C-4）：head__end の無い画面（Kaname／10日の詳細／10thly／ゴミ箱）でも右端へ＝Today／Inbox と同じ位置 */
.head__tools:not(.head__end):has(> .undoredo:last-child) { flex: 1 1 auto; }   /* 操作群の行を右端まで伸ばして Undo/Redo を右へ（head__end＝Focus／登録日の行は従来どおり縮めない） */
.undoredo__b { width: 30px; min-width: 30px; height: 30px; padding: 0; color: var(--gray); }
.undoredo__b svg { width: 15px; height: 15px; }
.undoredo__b:disabled { opacity: .35; cursor: default; }
.undoredo__b:not(:disabled):hover { color: var(--ink); }
body.is-focus .undoredo { display: none; }
.undoredo.is-off { display: none; }   /* g110：Settings／Admin（表示だけ・履歴は保持） */
/* g246：お知らせのベル＝PC は左 Nav 最上部のロゴ「10thly」の右（アプリ全体のお知らせ・Settings の機能に見せない）。通常時は枠も地も出さずアイコンだけ・hover／focus のときだけ薄い地。未読の点＝アクセント色の 6px。スマホ＝「その他」の Settings の右＋「その他」タブに点（g243 のまま） */
.nav__bottom--row { display: flex; align-items: center; gap: 4px; }
.nav__bottom--row .navitem { flex: 1 1 auto; min-width: 0; }
.nav__bellslot { flex: none; display: inline-flex; }
.nav__bellslot--brand { margin-left: auto; }
.bell { position: relative; width: 34px; min-height: 34px; color: var(--gray); flex: none; background: transparent; border-color: transparent; box-shadow: none; }
.bell svg { width: 15px; height: 15px; }
.bell:hover, .bell:focus-visible { color: var(--ink); background: var(--hover); border-color: transparent; }
.bell__dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); pointer-events: none; }
.tab[data-menu] { position: relative; }
.tab__dot { position: absolute; top: 9px; right: calc(50% - 15px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); pointer-events: none; }
.bellpop { max-width: 340px; }
.bellpop__h { margin: 0 0 6px; }
.bellpop__list { display: flex; flex-direction: column; max-height: min(60vh, 420px); overflow: auto; }
.bellpop__item { padding: 8px 6px; border-top: 1px solid var(--line-soft); }
.bellpop__item:first-child { border-top: 0; }
.bellpop__t { font-size: var(--fs-small); color: var(--ink); }
.bellpop__item.is-read .bellpop__t { color: var(--gray); }
.bellpop__x { margin-top: 2px; }
.bellpop__a { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.bellpop__empty { margin: 4px 0 0; }
@media (max-width: 760px) {   /* g232（C-2）：スマホ＝見た目と配置は変えず、押せる範囲だけ 44px 相当にする（負のマージンで占有幅・高さは従来どおり＝ヘッダー高さ不変）。.undoredo__b の既定（30×30）より後ろに置く */
  .undoredo .undoredo__b { width: 40px; min-width: 40px; height: 44px; margin: -5px; position: relative; z-index: 1; }   /* 占有 30×34・隣の Redo と 8px 重なるが互いのアイコン（15px・中央）には掛からない */
  .head__search-btn { width: 44px; height: 44px; margin: -5px; position: relative; z-index: 1; }   /* 占有 34×34・左隣の「Taskを編集」とは重ならない（1px 空く） */
}
/* g105：登録日（補助情報・他の meta と同じ小さな灰色） */
.m-created { color: var(--gray-2); }
/* g105：ガイド OFF＝説明の見出し下文と手帳への一言を隠す（状態表示・警告・空状態は別 class＝残る） */
body.no-guide .head__sub--guide, body.no-guide .paper-hint, body.no-guide .guide-text { display: none; }

/* g106：ゴミ箱の残日数（補助情報） */
.m-trashleft { color: var(--gray-2); }

/* g106c：登録日の位置＝PC は meta 行（2 行目）の右端（既存 meta は左のまま・登録日だけ右へ寄せる）。mobile は従来どおり meta の並びの中 */
.trow__meta .m-created { margin-left: auto; padding-left: 10px; white-space: nowrap; }   /* g106e：main が行の右端まで広がった＝meta 行の右端＝行の右端（操作列は hover 時だけ上に重なる）。g106f：mobile も同じ＝左の meta が長ければ折り返し、登録日は最後の行の右端 */

/* ---------- 不具合・要望を報告（g109） ---------- */
.fb { display: grid; gap: 10px; margin-top: 6px; }
.fb .field--box { width: 100%; box-sizing: border-box; }
.fb__file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb__preview { display: flex; align-items: center; gap: 8px; }
.fb__preview img { max-width: 120px; max-height: 90px; border: 1px solid var(--line); border-radius: var(--radius); }
.fb__err { color: var(--ink); min-height: 1em; margin: 0; }
.admin__msg { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; min-width: 0; }   /* g110：長い URL／UA でも横にはみ出さない */
.admin__table td.admin__msg { max-width: 360px; }
.admin__shot { max-width: 100%; max-height: 50dvh; width: auto; height: auto; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); }   /* g110：大きな画像でもダイアログの幅・高さを壊さない */

/* ---------- Task 編集モード（g113→g114） ---------- */
.editbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 0; margin-bottom: 6px; background: var(--paper); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.btn--editmode { margin-left: 6px; }
.trow--edit { align-items: center; padding: 4px 6px 4px 0; gap: 6px; }
.prow--edit { padding-top: 4px; padding-bottom: 4px; padding-right: 8px; gap: 8px; }   /* padding-left は .prow／.prow--sub のまま＝Sub-project のインデントを保つ */   /* g136：Projects の編集行＝Task の編集行と同じ input（.trow__edit）。名前の欄は行の幅いっぱい */
.prow--edit .trow__main--edit { flex: 1 1 auto; min-width: 0; }
.prow--edit.is-dragging { background: var(--paper); box-shadow: 0 1px 6px rgba(0, 0, 0, .10), 0 0 0 1px var(--line); position: relative; z-index: 2; opacity: .96; }   /* g137：Task の編集行のドラッグ中と同じ */
.prow--edit.is-armed .trow__grip { color: var(--ink); background: var(--hover); }
.prow--edit.is-error .trow__edit { border-color: var(--ink); }   /* Task の編集行（.trow--edit.is-error）と同じ */
.trow--edit .trow__grip, .prow--edit .trow__grip { opacity: 1; width: 22px; height: 36px; align-self: center; border-radius: var(--radius); color: var(--gray-2); touch-action: none; -webkit-user-select: none; user-select: none; display: grid; place-items: center; }   /* g114：Kaname List と同じく常時見える grip・ここからだけ並び替え */
.trow--edit .trow__grip--edit:hover, .trow--edit .trow__grip--edit:focus-visible, .prow--edit .trow__grip--edit:hover, .prow--edit .trow__grip--edit:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.trow--edit .trow__grip--off, .prow--edit .trow__grip--off { visibility: hidden; }
.trow--edit.is-dragging { background: var(--paper); box-shadow: 0 1px 6px rgba(0, 0, 0, .10), 0 0 0 1px var(--line); position: relative; z-index: 2; opacity: .96; }
.trow--edit.is-armed .trow__grip { color: var(--ink); background: var(--hover); }
.trow__main--edit { cursor: default; padding-top: 0; gap: 0; }
.trow__edit { width: 100%; min-width: 0; font-size: var(--fs-body); line-height: 1.5; padding: 7px 8px; min-height: 36px; }   /* Kaname List の inline 編集（.lp__edit）と同じ枠付き */
.trow--edit.is-new .trow__edit { border-style: dashed; }
.trow--edit.is-error .trow__edit { border-color: var(--ink); }
.trow__hint { margin-top: 4px; }
.trow__err { color: var(--ink); font-size: var(--fs-small); }
.trow__acts--edit { position: static; opacity: 1; transform: none; align-self: center; margin: 0; background: transparent; gap: 4px; flex: none; }
.trow__datechip { min-height: 30px; padding: 2px 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
.trow__datechip__short { display: none; }
.trow__datechip:not(.is-on) { color: var(--gray); }
.trow__datechip.is-read { border-color: var(--accent); background: var(--accent-pale); }
.trow--edit .trow__act { width: 32px; height: 32px; color: var(--gray-2); }
.trow--edit .trow__act:hover, .trow--edit .trow__act:focus-visible { color: var(--ink); background: var(--hover); }
body.is-editing .btn--select, body.is-editing .btn--editmode, body.is-editing .head__search-btn, body.is-editing [data-selectall], body.is-editing .addline, body.is-editing .secadd, body.is-editing .quickadd-dock { display: none !important; }
body.is-editing .head__tools .switch--focus, body.is-editing .head__tools .switch--created, body.is-editing .undoredo { display: none !important; }   /* g116：編集モード中のヘッダー操作は保存／キャンセルだけ＝Focus・登録日・Undo/Redo は隠す（表示だけ・設定と履歴は不変）
body.is-editing .trow:not(.trow--edit) { opacity: .55; pointer-events: none; }
body.is-editing .main__body { padding-bottom: 32px; }
@media (max-width: 760px) {
  .trow--edit .trow__grip, .prow--edit .trow__grip { display: grid; }   /* mobile でも grip を出す（通常行は非表示のまま） */
  .trow--edit .trow__acts--edit { display: flex !important; position: static; opacity: 1; }   /* g114：通常行の操作列はスワイプに任せて隠すが、編集行の右列（日付 chip・今はやらない・ゴミ箱）は mobile でも出す */
  .trow--edit { padding-right: 2px; gap: 4px; }
  .trow__datechip { padding: 2px 7px; font-size: 12px; min-height: 30px; }
  .trow__datechip__full { display: none; } .trow__datechip__short { display: inline; }   /* mobile は曜日を省く */
  .trow--edit .trow__act { width: 30px; height: 30px; }
  .trow__main--edit { min-width: 120px; }
}
.group--overfold .group__head { flex-wrap: wrap; }
.group--overfold .fold-toggle { font-size: var(--fs-body); color: var(--ink); padding: 4px 0; }
/* g124→g125：期限切れの見出し行＝行全体が開閉ボタン（頭＝開閉 chevron・その右に「期限切れ N」。開いているときは下向き）。挙動（overFoldOpen・展開ロジック）と「まとめて見直す」は不変 */
.group--overfold .fold-toggle--row { flex: 1 1 auto; min-width: 0; justify-content: flex-start; gap: 6px; cursor: pointer; }   /* g125：chevron は見出しの頭（「期限切れ」の直前・左）。行の空き部分も押せる。「まとめて見直す」は右側の別ボタンのまま */
.group--overfold .fold-toggle--row:disabled { cursor: default; }
.fold-toggle__t { display: inline-flex; align-items: center; gap: 6px; }
.fold-toggle__chev { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--gray); transition: transform var(--t-fade); }
.fold-toggle__chev svg { width: 14px; height: 14px; }
.fold-toggle--row[aria-expanded="true"] .fold-toggle__chev { transform: rotate(90deg); }
.fold-toggle--row:hover .fold-toggle__chev { color: var(--ink); }
/* g127：Section の開閉（見出しの頭・g124/g125 の chevron と同型）。閉＝右向き・開＝下向き（90°）。見出し・件数・名前／外す・受け皿はそのまま */
.fold-toggle--sec { padding: 0; min-width: 24px; min-height: 24px; justify-content: center; align-self: center; margin-left: -4px; cursor: pointer; }
.fold-toggle--sec[aria-expanded="true"] .fold-toggle__chev { transform: rotate(90deg); }
.fold-toggle--sec:hover .fold-toggle__chev { color: var(--ink); }
.fold-toggle--sec:disabled { cursor: default; opacity: .45; }
.fold-toggle--sec:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 1px; }
@media (max-width: 760px) { .fold-toggle--sec { min-width: 36px; min-height: 36px; margin-left: -8px; } }   /* g127：スマホは指で押せる大きさ（基本の規則より後に置く＝同じ詳細度で上書き） */
.overfold__hint { margin: 6px 0 4px; }

/* ---------- Google Calendar の予定（g156・B1 読み取り表示のみ）：Task 行（.trow）・カード（.cal__task）とは別の class。操作は「Google Calendar で開く」だけ ---------- */
/* Today「今日 N」／10thly リストの Google 予定（g163・g172）：既存の見出し（「今日 N」／日付）の横に置く小さな札。行も専用の群も持たない。
   札＝左に印色（--accent）の縦線 4px だけ（g164：地・角丸なし＝タグに見せない）。文字は 12px（--fs-small）・時刻は Sans の gray。長い題は 1 行で省略（… ）・title 属性に全文。
   見出しの行（.group__head＝flex・baseline）の中で、札の列（.ghev）は残りの幅を使い折り返す（mobile は札ごとに次の行へ）。新しい色定義なし */
.ghev { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; flex: 1; min-width: 0; margin-left: 10px; }   /* g164：見出し（日付／今日 N）との間＝.group__head の gap 10＋10 ／ g172：札同士の横の間 10→16（縦線→時刻→題の中の間隔・見出しとの距離は不変） */
.gev { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 1px 0 1px 7px; border-left: 4px solid var(--accent); color: var(--ink); text-decoration: none; font-size: var(--fs-small); line-height: 1.45; }   /* g164：地なし・縦線だけ（4px＝カレンダーの 2 倍） */
.gev:hover, .gev:focus-visible { border-left-color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--line); outline: none; }
.gev.is-nolink { cursor: default; }
.gev__time { flex: none; font-family: var(--sans); letter-spacing: .04em; color: var(--gray); }
.gev__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-focus .ghev[data-gcal-today] { display: none; }   /* Focus＝今日の Task だけに集中（予定は出さない。renderToday も Focus 中は組み込まない＝二重の保険） */
/* 10thly カレンダーの列：Task カードの上に予定。左にテーマの印色（--accent）の線＋全体背景と同じ地（枠・チェックは無い・g159→g166） */
.cal__gcal { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 3px; }   /* g173：追加当初（g156）の詰まった縦配置に戻す＝予定同士の間 3px・Task カードとの間 3px（g168 の 8／6 を撤回）。予定の箱（線 4px・上下 1px・line-height 1.45＝g167）は不変 */
.cal__gev { display: flex; gap: 6px; align-items: flex-start; padding: 1px 6px 1px 7px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper); color: var(--ink); text-decoration: none; font-size: var(--fs-small); line-height: 1.45; min-width: 0; }   /* g167：縦線＝リストの札（.gev）と同じ 4px・上下 padding 1px＋line-height 1.45＝線の長さも同じ */   /* g166：地＝アプリ全体の背景色（--paper・Task カードと同じ）。今日の列の色（accent-pale）の上でも白地で載る */
.cal__gev:hover, .cal__gev:focus-visible { border-left-color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--line); outline: none; }
.cal__gev.is-nolink { cursor: default; }
.cal__gev__dot { display: none; }
.cal__gev__time { flex: none; font-family: var(--sans); letter-spacing: .04em; color: var(--gray); }
.cal__gev__title { flex: 1; min-width: 0; word-break: normal; overflow-wrap: anywhere; line-break: strict; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  .cal__gev { padding: 1px 8px 1px 7px; }   /* g164：文字は Task カード（.cal__task）と同じ 12px のまま／g167：上下 1px＝線の長さをリストの札と同じに */
}
/* g202：Journal 購入者特典の受け取り画面（Settings の区画と同じ骨格） */
.benefit__lead { font-family: var(--mincho); font-size: var(--fs-head); letter-spacing: .06em; margin: 0 0 12px; }
.benefit .chips { margin-top: 14px; }
.coupon-line { display: grid; gap: 2px; margin: 0 0 10px; }
.benefit__list { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.benefit__only { margin: 14px 0 6px; }
.benefit__survey { display: grid; gap: 6px; margin-top: 14px; }   /* g227：ライブ参加者アンケート（launch_live_2027 だけ） */
.benefit__survey .chips label { display: inline-flex; align-items: center; gap: 6px; }   /* g225：購入者限定の案内（journal_2027 だけ） */
.coupon-line__h { letter-spacing: .06em; }
.coupon-line__total { margin-top: 2px; }
/* g237：Settings「友だちを紹介する」欄（10thly アカウント欄の中・既存の chips／field--box をそのまま使う）。g238：直前の「Task 環境の初期化」（.acct__danger）と同じ区切りルール＝上 36px・罫線・内側 14px で独立した区画に見せる */
.acct__referral { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.acct__referral .chips { margin-top: 4px; }
.acct__referral .field--box[readonly] { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--ink); background: var(--input-bg); }
.acct__referral .acct__referral__list { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 3px; }
/* g276：SNS 共有＝紹介文（編集できる textarea）と共有ボタンの行。ボタンは既存の .btn（<a> も同じ見た目）・aria-disabled のあいだは薄く */
.acct__referral .acct__referral__textlabel { margin-top: 8px; }
.acct__referral .acct__referral__text { width: 100%; max-width: 560px; box-sizing: border-box; resize: vertical; line-height: 1.6; font-size: 13px; color: var(--ink); background: var(--input-bg); }
.acct__referral .acct__referral__share .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* g240：Settings「アプリの更新」の「最近の更新」一覧（紹介欄の list と同じ形）。日付は実用の数字＝Sans */
.update__list { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.update__date { font-family: var(--sans); color: var(--gray-2); margin-right: .6em; font-variant-numeric: tabular-nums; }
/* g239：開閉できることが分かる summary（紹介欄の「特典のしくみ」）＝頭に chevron（閉＝右向き・開＝下向き＝Section／期限切れの開閉と同じ向きの規則）。CSS の線だけで組む（画像・URL なし）。色は muted → hover で ink */
details.fold--chev > summary { display: inline-flex; align-items: center; gap: 8px; }
details.fold--chev > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 2px 0 3px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fade); }
details.fold--chev[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
details.fold--chev > summary:hover, details.fold--chev > summary:focus-visible { color: var(--ink); outline: none; }

/* g256→g257：Task Pack の Preview（#pack/<id>）＝「追加すると」の箱＋「中身」の Section と Task の階層。箱・字・色は settings／benefit の既存のまま（新しい世界観は作らない） */
.pack__desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.pack__body { margin-top: 14px; display: grid; gap: 12px; }
.pack__sec { border-top: 1px solid var(--line); padding-top: 10px; }
.pack__secname { margin: 0 0 6px; font-size: inherit; font-weight: 600; }
.pack__tasks { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; overflow-wrap: anywhere; }
.pack__dup { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); }
.pack__h { margin: 14px 0 6px; font-weight: 600; }   /* g257：「追加すると」「中身」の小見出し */
.pack__adds { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); }   /* g257：追加前に何が作られるかを 1 つの箱に */
.pack__adds .pack__h { margin-top: 0; }
.pack__adds__p { margin: 0 0 6px; }   /* g259：「追加すると」の 2 文 */
/* g262：縦が短い端末（iPhone SE 級＝390×844 では不要）だけ、Kaname Ring 編集の操作行を画面下に固定＝主ボタンへ迷わず到達。地は紙色・上に細い線 */
@media (max-width: 760px) and (max-height: 720px) { .editor__actions { position: sticky; bottom: 0; background: var(--paper); padding-bottom: 10px; z-index: 3; } }

/* ---------- g272：紹介ページ（紹介リンクの未ログイン）＋特典モーダル。公式サイトの余白・構成を踏襲 ---------- */
body.is-invite .lock-root { padding: 0; }
.invite { max-width: 1120px; margin: 0 auto; padding: 0 40px 72px; color: var(--ink); }
.invite__head { min-height: 80px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.invite__brand { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; }
.invite__head__note { color: var(--accent-deep); letter-spacing: .08em; }
.invite__kicker { font-family: var(--en); letter-spacing: .18em; font-size: 11px; color: var(--accent-deep); margin: 0 0 8px; }
.invite__h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.24; margin: 0 0 24px; letter-spacing: .05em; font-weight: 400; }
.invite__nowrap { white-space: nowrap; }
.invite__h2 { font-size: clamp(25px, 3vw, 38px); line-height: 1.45; margin: 0 0 22px; letter-spacing: .04em; font-weight: 400; }
.invite__p { font-size: var(--fs-body); line-height: 1.9; margin: 0 0 12px; }
.invite__hero { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center; gap: 72px; padding: 70px 0 76px; }
.invite__hero__copy { max-width: 620px; }
.invite__hero__visual { margin: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.invite__hero__visual img { display: block; width: auto; max-width: 100%; max-height: 650px; object-fit: contain; }
.invite__benefit { display: inline-flex; margin: 0 0 22px; padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent-pale); color: var(--accent-deep); font-size: 13px; letter-spacing: .04em; }
.invite__invalid { margin: 0 0 20px; padding: 14px 16px; border-left: 3px solid var(--gray-2); background: var(--paper-2); line-height: 1.7; }
.invite__flow { margin: 0 -40px; padding: 27px 40px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; gap: 26px; font-family: var(--mincho); letter-spacing: .05em; }
.invite__flow i { width: 46px; height: 1px; background: var(--accent); position: relative; }
.invite__flow i::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); }
.invite__sec { margin-top: 110px; }
.invite__sec--story { display: grid; grid-template-columns: 120px minmax(0, 700px); justify-content: center; gap: 40px; }
.invite__number { font-family: var(--en); font-size: 54px; line-height: 1; color: var(--accent-soft); }
.invite__sec--tendays { margin-left: -40px; margin-right: -40px; padding: 96px 40px; background: var(--paper-2); }
.invite__sec--screens, .invite__sec--plans { text-align: center; }
.invite__sec--cta { margin-left: -40px; margin-right: -40px; padding: 74px 40px; background: var(--accent-pale); text-align: center; }
.invite__sec--cta .invite__benefit { background: var(--paper); }
.invite__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 20px 0 8px; }
.invite__sec--cta .invite__cta { align-items: center; }
.invite__cta .gbtn { min-width: 260px; min-height: 48px; border-color: var(--accent); box-shadow: 0 5px 18px rgba(52, 50, 56, .08); }
.invite__shots { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, .7fr); gap: 28px; align-items: start; margin-top: 34px; text-align: left; }
.invite__shot { margin: 0; }
.invite__shot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sheet); background: var(--paper-2); box-shadow: var(--shadow); }
.invite__shot figcaption { margin-top: 6px; }
.invite__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 34px auto 18px; max-width: 790px; text-align: left; }
.invite__plan { border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 28px; background: var(--paper); }
.invite__plan + .invite__plan { border-color: var(--accent); background: var(--accent-pale); }
.invite__plan__name { font-size: 25px; margin-bottom: 4px; }
.invite__plan__price { color: var(--gray); margin-bottom: 10px; }
.invite__ul { margin: 0; padding-left: 1.2em; line-height: 1.8; }
.invite__foot { margin-top: 40px; text-align: center; }
.invite-modal { position: fixed; inset: 0; z-index: 60; background: rgba(40, 36, 48, .48); display: flex; align-items: center; justify-content: center; padding: var(--gutter); backdrop-filter: blur(3px); }
.invite-modal__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 38px 36px 30px; max-width: 460px; width: 100%; box-shadow: 0 18px 60px rgba(0, 0, 0, .18); }
.invite-modal__title { font-size: 30px; line-height: 1.35; margin: 0 0 16px; letter-spacing: .04em; font-weight: 400; }
.invite-modal__button { width: 100%; min-height: 49px; margin: 24px 0 16px; border: 1px solid var(--accent-deep); border-radius: var(--radius); background: var(--accent-deep); color: var(--paper); font: inherit; cursor: pointer; }
.invite-modal__button:hover { opacity: .9; }
body.has-invite-modal { overflow: hidden; }
@media (max-width: 760px) { .invite { padding: 0 20px 48px; } .invite__head { min-height: calc(var(--safe-t) + 64px); padding-top: var(--safe-t); } .invite__hero { min-height: 0; grid-template-columns: 1fr; gap: 18px; padding: 42px 0 50px; } .invite__h1 { font-size: clamp(32px, 9.7vw, 39px); line-height: 1.3; margin-bottom: 20px; letter-spacing: .035em; } .invite__hero__copy > .invite__cta { margin-bottom: 4px; } .invite__hero__visual { width: min(82vw, 350px); margin: 0 auto; } .invite__hero__visual img { max-height: none; } .invite__flow { margin: 0 -20px; padding: 24px 18px; gap: 10px; font-size: 12px; } .invite__flow i { width: 18px; } .invite__sec { margin-top: 76px; } .invite__sec--story { grid-template-columns: 1fr; gap: 8px; } .invite__number { font-size: 38px; } .invite__sec--tendays { margin-left: -20px; margin-right: -20px; padding: 68px 20px; } .invite__shots, .invite__plans { grid-template-columns: 1fr; } .invite__shot--sp { max-width: 300px; margin: 0 auto; width: 100%; } .invite__sec--cta { margin-left: -20px; margin-right: -20px; padding: 58px 20px; } .invite__cta .gbtn { width: 100%; min-width: 0; } .invite-modal { align-items: flex-end; padding: 0; } .invite-modal__card { max-width: none; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: 28px 22px calc(24px + var(--safe-b, 0px)); } .invite-modal__title { font-size: 26px; } }