/* 持ち物・マイページ・記録の小窓（案1）。共通の骨格は wotalog.css。
   枠で囲まず、罫線と余白で区切る。角丸は最小限にする（台帳らしく静かに）。 */

/* ---- 共通の小さな部品 ---- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; margin: 0; padding: 6px 18px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.m-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.m-btn.sec { background: transparent; color: var(--accent-dark); }
.m-btn.sec:hover { background: var(--accent-soft); color: var(--accent-dark); }
.m-btn.plain { background: transparent; border-color: var(--rule-dark); color: var(--ink); font-weight: 400; }
.m-btn.plain:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.m-link { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--accent-dark); font-size: 13px; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.m-link:hover { background: none; color: var(--accent); }

/* 記録のボタン。店へのボタン（赤の塗り）より弱く、並べても騒がしくしない。 */
.rec { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 30px; padding: 2px 8px; border: 1px solid var(--rule-dark); border-radius: 3px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 400; white-space: nowrap; text-decoration: none; }
.rec:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.rec.own-on { background: var(--own-soft); border-color: var(--own); color: var(--own); font-weight: 700; }
.rec.wish-on { background: var(--accent-soft); border-color: #dca795; color: var(--accent-dark); font-weight: 700; }

/* ---- マイページのタブ ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 10px 0 20px; border-bottom: 1px solid var(--ink); align-items: flex-end; }
.tabs a, .tabs a:hover, .tabs a.on { margin-bottom: -1px; padding: 8px 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; font-size: 14px; text-align: center; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.tabs .logout { margin: 0 0 0 auto; }
.tabs .logout button { min-height: 0; margin: 0; padding: 8px 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 400; text-decoration: underline; }
.tabs .logout button:hover { background: none; color: var(--ink); }

/* ---- 持ち物の上部 ---- */
.mine-sum { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.mine-sum:empty { display: none; }
.mine-sum-scope { flex-basis: 100%; }
.mine-sum b { margin-left: 6px; color: var(--ink); font-size: 20px; font-variant-numeric: tabular-nums; }
.mine-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 18px; font-size: 13px; }
.mine-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent-dark); }
.mine-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

/* ---- 骨格 ---- */
.mine-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: start; }
.mine-main { min-width: 0; }
/* 1点も持っていないときは、絞り込みの列と検索欄を出さない（絞る物が無い）。 */
.mine-layout:has(#mine-results[data-empty="1"]) { grid-template-columns: minmax(0, 1fr); }
.mine-layout:has(#mine-results[data-empty="1"]) .mine-filters,
.mine-layout:has(#mine-results[data-empty="1"]) .mine-tools { display: none; }

/* ---- 絞り込みの列 ---- */
.mine-filters { position: sticky; top: calc(var(--head-h) + 16px); max-height: calc(100vh - var(--head-h) - 32px); overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; scrollbar-width: thin; overflow-anchor: none; }
.mine-filters .f-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.mine-filters .f-head h2 { margin: 0; font-size: 15px; }
.mine-filters .f-clear { font-size: 12px; }
.mine-filters .f-close, .mine-filters .f-foot { display: none; }
.mine-filters .f-sec { border-bottom: 1px solid var(--rule); }
.mine-filters .f-sec > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.mine-filters .f-sec > summary::-webkit-details-marker { display: none; }
.mine-filters .f-sec > summary::after { content: "＋"; color: var(--muted); font-weight: 400; }
.mine-filters .f-sec[open] > summary::after { content: "−"; }
.mine-filters .f-sec > summary .n { margin-left: auto; color: var(--accent-dark); font-size: 12px; }
.mine-filters .f-body { padding: 0 0 10px; }
.mine-filters input.f-box { width: 100%; min-height: 32px; margin: 0 0 6px; padding: 3px 8px; font-size: 13px; }
.f-list, .f-list ul { margin: 0; padding: 0; list-style: none; }
.f-row[hidden], .f-group[hidden], .tree-ch[hidden] { display: none; }
.f-group-name { display: block; padding: 6px 0 2px; color: var(--muted); font-size: 12px; }
.f-empty { padding: 4px 2px; color: var(--muted); font-size: 12px; }
.fx { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 7px; min-width: 0; min-height: 28px; margin: 0; padding: 4px 2px; font-size: 13px; font-weight: 400; line-height: 1.4; cursor: pointer; }
.fx:hover .n { color: var(--accent-dark); }
.fx input { flex: 0 0 auto; width: 14px; height: 14px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.fx .n { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fx .c { flex: 0 0 3em; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.fx.on .n { color: var(--accent-dark); }
.fx.zero { opacity: .42; cursor: default; }
.fx.zero:hover .n { color: inherit; }
.tree-row { display: flex; align-items: flex-start; }
.tree-tg { flex: 0 0 18px; width: 18px; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 9px; font-weight: 400; text-align: left; }
.tree-tg:hover { background: none; color: var(--accent); }
.tree-tg span { display: inline-block; transition: transform .1s; }
.tree-tg[aria-expanded="true"] span { transform: rotate(90deg); }
.tree-sp { flex: 0 0 18px; }
.tree-ch { margin-left: 18px !important; }
.mine-filters .more { display: block; width: 100%; min-height: 28px; margin: 2px 0 0; padding: 2px; border: 0; background: none; color: var(--accent-dark); font-size: 13px; font-weight: 400; text-align: left; }
.mine-filters .more[hidden] { display: none; }
.mine-filters .more:hover { background: none; text-decoration: underline; }

/* ---- 検索欄と並べ替え ---- */
.mine-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 0 10px; margin: 0 0 16px; border-bottom: 1px solid var(--rule); }
.mine-search { flex: 1 1 240px; min-width: 0; }
.mine-search input { width: 100%; min-height: 34px; padding: 3px 10px; font-size: 14px; }
.mine-tools .sort-label { color: var(--muted); font-size: 13px; }
.mine-tools select { min-height: 34px; padding: 3px 8px; font-size: 13px; }
.open-f { display: none; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; }
#mine-results .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; max-width: 100%; padding: 2px 8px; border: 1px solid #dca795; border-radius: 3px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; line-height: 1.35; text-decoration: none; }
#mine-results .chip:hover { border-color: var(--accent-dark); }
#mine-results .chip span { min-width: 0; overflow-wrap: anywhere; }
#mine-results .chip i { font-style: normal; font-weight: 700; }
.chips-clear { font-size: 13px; }

/* ---- 持ち物の表 ---- */
.m-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px 92px 92px 96px 64px; gap: 0 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.m-head { padding: 0 0 6px; border-bottom-color: var(--ink); color: var(--muted); font-size: 12px; }
.m-head .nb { display: inline-block; }
.m-ph { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; overflow: hidden; border-radius: 2px; background: #e9e5e0; color: #6a5f58; font-size: 10px; line-height: 1.2; text-align: center; text-decoration: none; }
.m-ph img { width: 100%; height: 100%; object-fit: contain; }
.m-name { min-width: 0; }
.mine-table .nm, .wish-card .nm { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.mine-table .nm:hover, .wish-card .nm:hover { color: var(--accent); text-decoration: underline; }
.mine-table .ki, .wish-card .ki { color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.m-row .r { font-variant-numeric: tabular-nums; text-align: right; }
.m-out { color: var(--muted); }
.m-row .m-btn { min-height: 30px; padding: 2px 10px; font-size: 12px; }
.m-sub { display: none; }
.m-name .record-shop-status { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 2px; font-size: 12px; line-height: 1.5; }
.m-name .record-shop-status strong { font-weight: 400; }

.mine-empty { padding: 56px 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--muted); text-align: center; }
.mine-empty p { margin: 0 0 12px; }
.mine-missing { margin-top: 36px; }
.mine-missing h2 { font-size: 15px; }

/* ---- ほしいもの ---- */
.wish-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 0 10px; margin: 0 0 12px; border-bottom: 1px solid var(--rule); }
.wish-tools label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 400; }
.wish-tools select { max-width: 200px; min-height: 34px; padding: 3px 8px; font-size: 13px; color: var(--ink); }
.res-count { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.res-count b { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.wish-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px; }
.wish-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wish-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 5px; overflow: hidden; border-radius: 2px; background: #e9e5e0; color: #6a5f58; font-size: 12px; text-decoration: none; }
.wish-ph img { width: 100%; height: 100%; object-fit: contain; }
.wish-card .nm { -webkit-line-clamp: 3; }
.wish-price { margin-top: auto; padding-top: 5px; font-variant-numeric: tabular-nums; line-height: 1.45; }
.wish-price .k { color: var(--muted); font-size: 12px; }
.wish-price .v { font-size: 16px; font-weight: 700; }
.wish-price .reached .v { color: var(--accent-dark); }
.wish-price .none { color: var(--muted); font-size: 13px; font-weight: 700; }
.wish-price .meta { color: var(--muted); font-size: 12px; line-height: 1.4; }
.wish-card .record-shop-status { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.wish-card .record-shop-status strong { font-weight: 400; }
.wish-card .marks { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 7px; }
.wish-card .marks .rec:first-child { flex: 1 1 auto; }
.wish-reached { color: var(--accent-dark); }

/* ---- お気に入り ---- */
.fav-groups { display: grid; gap: 28px; }
.fav-groups .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); }
.fav-groups h2 { margin: 0; font-size: 15px; }
.fav-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.fav-list .fav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--rule); }
.fav-list .fav-row a { min-width: 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.fav-list .fav-row a:hover { color: var(--accent); }
.fav-list form { margin: 0; }
.fav-list .star { min-height: 40px; min-width: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--accent); font-size: 16px; }
.fav-list .star:hover { background: none; color: var(--accent-dark); }

.fav-row.is-off a { color: var(--muted); }
.fav-list .star:not(.on) { color: var(--muted); }

/* ---- 統合の知らせ ---- */
.merge-notice p { margin: 0; overflow-wrap: anywhere; }
.merge-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.merge-notice-actions form { margin: 0; }

/* ---- 値下がりの知らせ ---- */
.alert-new { display: inline-block; padding: 0 5px; border: 1px solid #dca795; border-radius: 3px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* 白い箱に入れず、他の自分の記録の画面と同じ罫線で区切る。 */
.alerts-table { background: transparent; }
.alerts-table th { background: none; color: var(--muted); font-size: 12px; font-weight: 400; }
.alerts-table th, .alerts-table td { border-width: 0 0 1px; border-left: 0; border-right: 0; }
.alerts-table tr:first-child th { border-bottom-color: var(--ink); }
.alerts-table th:first-child, .alerts-table td:first-child { padding-left: 0; }

/* ---- 購入情報と関連商品の登録。箱に入れず、罫線と余白で区切る ---- */
.together .panel.together-group { border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: transparent; }
.together .together-group h2 { padding: 8px 0; border-bottom: 0; font-size: 15px; }
.together .together-group .buy-fields { padding: 4px 0 8px; }
.together .together-group .group-note { padding: 0 0 8px; }

/* ---- 振り返りの画面の共通の表。持ち物の表と同じ罫線で揃える ---- */
.led-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.led-head > a, .cal-nav a, .cal-all { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent-dark); font-size: 13px; }
.led-sum { margin: 10px 0 12px; align-items: baseline; }
.led-sec { margin-top: 24px; }
.led-sec h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font-size: 15px; }
.led-product { margin: 6px 0 12px; overflow-wrap: anywhere; }
table.led { width: 100%; margin-top: 8px; border-collapse: collapse; background: transparent; font-size: 13px; }
table.led th { padding: 0 8px 6px; border-bottom: 1px solid var(--ink); background: none; color: var(--muted); font-size: 12px; font-weight: 400; text-align: left; white-space: nowrap; }
table.led td { padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; line-height: 1.5; }
table.led th:first-child, table.led td:first-child { padding-left: 0; }
table.led th:last-child, table.led td:last-child { padding-right: 0; }
table.led .r { font-variant-numeric: tabular-nums; text-align: right; }
table.led .nowrap { white-space: nowrap; }
table.led .led-name { min-width: 0; width: 100%; overflow-wrap: anywhere; }
table.led .led-name a { color: var(--ink); text-decoration: none; }
table.led .led-name a:hover { color: var(--accent); text-decoration: underline; }
table.led tr:target td { background: var(--new-soft, #fff2cc); }
table.led tr:target { scroll-margin-top: calc(var(--head-h) + 16px); }
.led-sub { color: var(--muted); font-size: 12px; }
.led-no { color: var(--muted); }
.led-rate { min-width: 150px; white-space: nowrap; }
.led-bar { display: inline-block; width: 90px; height: 6px; margin-right: 8px; overflow: hidden; border-radius: 1px; background: var(--rule); vertical-align: middle; }
.led-bar > span { display: block; height: 100%; min-width: 1px; background: var(--accent); }
.led-pct { font-variant-numeric: tabular-nums; }
.led-empty { margin-top: 16px; }

/* ---- 購入カレンダー。箱に入れず、画面の幅を使う ---- */
.cal-nav { display: flex; gap: 16px; }
.cal { margin-top: 8px; border-left: 1px solid var(--rule); }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-week { border-bottom: 1px solid var(--ink); color: var(--muted); font-size: 12px; text-align: center; }
.cal-week span { padding: 4px 0; }
.cal-day { display: flex; flex-direction: column; gap: 2px; min-height: 84px; padding: 6px 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 13px; text-decoration: none; }
.cal-day.out { color: var(--rule-dark); }
.cal-day.has { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.cal-day.has:hover { background: #f8d9ce; color: var(--accent-dark); }
.cal-day b { font-size: 13px; }

/* ---- コレクションの内訳 ---- */
.am-controls { margin: 12px 0 16px; }
.am-controls label, .am-controls .atlas-target-field { font-size: 12px; color: var(--muted); }
.am-controls select, .am-controls input { color: var(--ink); font-size: 14px; }
.am-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.am-title small { color: var(--muted); font-size: 13px; font-weight: 400; }
.am-key { margin: 0 0 6px; }
.am-map { position: relative; height: 460px; margin-bottom: 8px; overflow: hidden; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); background: var(--bg); }
/* 1件だけの図は比べる相手が無い。画面いっぱいの色面にせず、札の大きさで見せる。 */
.am-map.is-single { max-width: 420px; height: 140px; }
.am-in { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-width: 0; }
.am-tile { position: absolute; display: block; padding: 2px 6px; overflow: hidden; border: 2px solid var(--bg); color: var(--ink); text-decoration: none; background: color-mix(in srgb, #e39c82 var(--shade, 0%), #fbf0ea); container-type: size; }
.am-tile:hover, .am-tile:focus-visible { color: var(--ink); outline: 2px solid var(--accent); outline-offset: -3px; }
.am-tile.is-rest { background: #eae5df; }
.am-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.am-head { display: flex; gap: 4px; align-items: baseline; min-width: 0; }
.am-no { flex: 0 0 auto; color: #5a4c45; font-size: 11px; font-weight: 400; }
.am-val { font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-val small { margin-left: 3px; font-size: 12px; font-weight: 400; }
.am-nos { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #5a4c45; font-size: 11px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
@container (max-height: 96px) { .am-val { font-size: 18px; } .am-name { font-size: 12px; -webkit-line-clamp: 1; } .am-nos { -webkit-line-clamp: 1; } }
@container (max-width: 110px) { .am-val { font-size: 18px; } .am-name { font-size: 12px; } }
/* 細い枠は名前を諦め、番号と数を読めるように残す（名前は下の表で番号から引ける）。 */
@container (max-height: 44px) { .am-in { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; } .am-val { font-size: 13px; } .am-val small { font-size: 11px; } }
@container (max-width: 66px) { .am-val small { display: none; } .am-name, .am-nos { display: none; } .am-val { font-size: 15px; } }

/* ---- 設定 ---- */
.settings-grid { margin-left: 0; }
.settings-card { border-radius: 3px; }
.settings-card button, .settings-card .chip { border-radius: 3px; }
.settings-card form:has(> .settings-logout) { margin: 0; }
.settings-card button.settings-logout { min-height: 0; margin: 0; background: #fff; color: inherit; font: inherit; }

/* ---- 小窓。登録後も画面を止めず、開いたまま次の商品を続けて登録できる ---- */
#record-dialog { position: fixed; inset: auto 20px 20px auto; z-index: 80; width: 380px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); margin: 0; padding: 18px 20px; overflow-y: auto; border: 1px solid var(--rule-dark); border-radius: 4px; background: #fff; color: var(--ink); box-shadow: 0 8px 28px rgba(36, 30, 27, .2); }
/* 小窓の中に「閉じる」があるので、枠に付いた古いボタンは出さない。 */
#record-dialog > .record-dialog-close { display: none; }
.rp h2 { margin: 0 0 2px; font-size: 16px; }
.rp h2:focus { outline: none; }
.rp-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 10px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.rp-buy { padding: 10px 0; border-top: 1px solid var(--rule); }
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-top label { margin: 0; font-weight: 400; }
.rp-step { display: inline-flex; align-items: center; }
.rp-step button { width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--rule-dark); background: #fff; color: var(--ink); font-size: 16px; font-weight: 400; }
.rp-step button:hover { background: var(--bg); color: var(--ink); }
.rp-step button:first-child { border-radius: 3px 0 0 3px; }
.rp-step button:last-child { border-radius: 0 3px 3px 0; }
.rp-step input { width: 52px; height: 38px; min-height: 0; padding: 0; border: 1px solid var(--rule-dark); border-width: 1px 0; border-radius: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.rp-step input::-webkit-outer-spin-button, .rp-step input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.rp-wish { display: grid; gap: 2px; min-width: 0; margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; }
.rp-wish input { width: 100%; min-height: 40px; color: var(--ink); font-size: 14px; }
.rp-links { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 4px 0 0; }
.rp-links a { display: inline-flex; align-items: center; min-height: 32px; }
.rp-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.rp-note[hidden] { display: none; }
/* 誤りはフォーカスの枠（--accent の赤茶）と別の色にし、背景も付ける。同じ赤だと、
   次の欄に移ったときにどちらの欄が誤りなのか分からなかった。 */
.rp-error { margin: 8px 0 0; color: var(--error); font-size: 13px; font-weight: 700; }
.rp-error[hidden] { display: none; }
#record-dialog { --error: #b00020; }
#record-dialog input[aria-invalid="true"] { border: 2px solid var(--error); background: #fff0f2; }
#record-dialog input:focus, #record-dialog textarea:focus { outline-color: var(--ink); }
.rp-saved { min-height: 18px; margin: 4px 0 0; color: var(--own); font-size: 12px; }
.rp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.rp-remove { margin-left: auto; color: var(--muted); }
.rp-cand { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ink); }
.rp-cand h3 { display: inline-block; margin: 0 8px 4px 0; font-size: 13px; }
.rp-cand-list { max-height: 220px; overflow-y: auto; }
.rp-cand-item { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; margin: 0; padding: 8px 2px; border-top: 1px solid var(--rule); font-size: 13px; font-weight: 400; line-height: 1.45; cursor: pointer; }
.rp-cand-item input { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.rp-cand-item span { min-width: 0; overflow-wrap: anywhere; }
.rp-cand .m-btn { margin-top: 6px; }
.rp-purchase .field { margin: 0 0 10px; }
.rp-purchase .field:last-child { margin-bottom: 0; }
.rp-purchase .field > label { display: block; margin: 0 0 2px; font-size: 13px; font-weight: 400; }
.rp-purchase .field > label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; }
.rp-purchase input:not([type=checkbox]):not([type=hidden]), .rp-purchase textarea { width: 100%; min-height: 40px; font-size: 14px; }
.rp-purchase input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.rp-purchase textarea { height: 64px; resize: vertical; }
.rp-purchase .errorlist { margin: 4px 0 0; padding: 0; color: var(--error); font-size: 13px; font-weight: 700; list-style: none; }
#record-dialog textarea[aria-invalid="true"] { border: 2px solid var(--error); background: #fff0f2; }

/* 通知。古い指定は押せない作りだったので、「取り消す」のために押せるように戻す。 */
.record-notice:not(:empty) { position: fixed; inset: auto auto 24px 50%; z-index: 90; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px; transform: translateX(-50%); border-radius: 3px; background: var(--ink); color: #fff; font-size: 13px; pointer-events: auto; }
.record-notice.at-top:not(:empty) { inset: 12px auto auto 50%; }
.record-notice button { min-height: 28px; margin: 0; padding: 0; border: 0; background: none; color: #ffd9cc; font-size: 13px; font-weight: 400; text-decoration: underline; white-space: nowrap; }
.record-notice button:hover { background: none; color: #fff; }

@media (max-width: 1240px) {
  .wish-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-row { grid-template-columns: 56px minmax(0, 1fr) 36px 84px 80px 84px 56px; gap: 0 10px; }
}

/* 絞り込みは900px未満で「絞り込み」ボタンから全画面で開く。 */
@media (max-width: 899px) {
  .mine-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mine-filters { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; max-height: none; padding: 0; overflow: hidden; background: #fff; }
  .mine-filters.open, .mine-filters:target { display: flex; }
  body.mine-lock { overflow: hidden; }
  .mine-filters .f-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
  .mine-filters .f-head { align-items: center; min-height: 52px; padding: 4px 8px; border-bottom: 1px solid var(--rule); }
  .mine-filters .f-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); font-size: 20px; text-decoration: none; }
  .mine-filters .f-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 13px; }
  .mine-filters .f-foot { display: block; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: #fff; }
  .mine-filters .f-foot .m-btn { width: 100%; min-height: 48px; font-size: 15px; }
  .mine-filters .f-sec > summary { min-height: 48px; font-size: 15px; }
  .fx { min-height: 44px; align-items: center; font-size: 14px; }
  .fx input { width: 18px; height: 18px; margin: 0; }
  .tree-tg { flex-basis: 36px; width: 36px; height: 44px; font-size: 11px; text-align: center; }
  .tree-sp { flex-basis: 36px; }
  .tree-ch { margin-left: 36px !important; }
  .mine-filters .more { min-height: 44px; font-size: 14px; }
  .mine-filters input.f-box { min-height: 44px; font-size: 16px; }
  .open-f { display: inline-flex; }
  .wish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  .m-btn { min-height: 44px; }
  .rec { min-height: 44px; padding: 2px 6px; font-size: 12px; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; margin: 4px 0 12px; border-bottom: 0; }
  .tabs a, .tabs a:hover, .tabs a.on { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 0; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.25; white-space: normal; }
  .tabs a.on { border-bottom: 3px solid var(--accent); }
  /* 未読の印が幅を取ると「値下がりの知らせ」が語の途中で折れる。角に載せる。 */
  .tabs a { position: relative; }
  .tabs a .badge { position: absolute; top: 0; right: 0; margin: 0; font-size: 11px; line-height: 16px; }
  .tabs .logout { display: none; }
  .mine-sum { gap: 2px 20px; margin-bottom: 6px; }
  .mine-sum b { font-size: 16px; }
  /* 横に流すと端のリンクの存在に気づけない。折り返して全部見せる。 */
  .mine-links { gap: 0 16px; margin-bottom: 6px; }
  .mine-links a { min-height: 44px; }
  /* スマホの表は行ごとに読む形へ組み替える。横スクロールさせない。 */
  table.led thead { display: none; }
  /* スマホは欄の名前（data-label）で同じことを出すので、二重に書かない。 */
  /* 見出しの行が無いので、数字だけでは何の値か分からない欄に名前を添える。 */
  table.led td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: 12px; font-weight: 400; }
  table.led, table.led tbody { display: block; }
  table.led tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.led td, table.led th:first-child, table.led td:first-child, table.led td:last-child { padding: 0; border-bottom: 0; }
  table.led .led-name { order: -1; flex: 1 1 100%; width: auto; font-size: 14px; }
  table.led td a:not(.led-name a) { display: inline-flex; align-items: center; min-height: 44px; }
  /* 図の枠の番号と結ぶので、スマホでも番号を残す。 */
  table.led .led-no { order: -2; flex: 0 0 auto; min-width: 1.5em; font-size: 14px; text-align: left; }
  table.led .led-no + .led-name { flex: 1 1 calc(100% - 3em); }
  table.led .led-rate { min-width: 0; }
  table.led td:last-child:has(> a) { margin-left: auto; }
  .led-head > a, .cal-nav a, .cal-all { min-height: 44px; }
  .cal-day { min-height: 56px; padding: 4px; font-size: 13px; }
  .cal-day b { font-size: 11px; font-weight: 400; }
  .am-map { height: 400px; }
  /* 欄を縦に4つ積むと図が画面の外へ押し出される。2列にして最初の画面に図を入れる。 */
  .am-controls { gap: 8px; }
  .am-controls label { flex: 1 1 40%; min-width: 0; }
  .am-controls .atlas-target-field { flex: 1 1 52%; }
  .am-controls .m-btn { width: 100%; }
  .mine-tools { flex-wrap: wrap; gap: 8px; padding: 6px 0; margin: 4px 0 10px; border-bottom: 0; }
  .mine-tools .sort-label { display: none; }
  .mine-search { flex: 1 1 100%; }
  .mine-search input { min-height: 44px; font-size: 16px; }
  .mine-tools select { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; padding: 4px 6px; font-size: 13px; }
  .open-f { flex: 0 0 auto; padding: 2px 12px; }
  .chips { margin: -4px 0 10px; }
  #mine-results .chip { min-height: 44px; font-size: 13px; }
  .chips-clear, .mine-filters .f-clear { display: inline-flex; align-items: center; min-height: 44px; }
  .m-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 0; }
  .m-head { display: none; }
  .m-row > .r, .m-row .ki { display: none; }
  .m-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .m-sub b { color: var(--ink); }
  .m-row .m-btn { min-height: 44px; padding: 2px 12px; font-size: 13px; }
  .m-name .record-shop-status a { display: inline-flex; align-items: center; min-height: 44px; }
  .wish-tools { gap: 8px; }
  .wish-tools .mine-search { flex-basis: 100%; }
  .wish-tools label { flex: 1 1 40%; min-width: 0; font-size: 12px; }
  .wish-tools select { flex: 1 1 0; width: 0; min-width: 0; max-width: none; min-height: 44px; font-size: 13px; }
  .wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .wish-card .record-shop-status a { display: inline-flex; align-items: center; min-height: 44px; }
  .fav-list { grid-template-columns: minmax(0, 1fr); }
  .fav-list .star { min-width: 44px; min-height: 44px; }
  #record-dialog { inset: auto 0 calc(58px + env(safe-area-inset-bottom)) 0; width: 100%; max-width: 100%; max-height: 70vh; border-width: 1px 0; border-radius: 0; padding-bottom: 14px; }
  .rp-step button { width: 44px; height: 44px; }
  .rp-step input { height: 44px; font-size: 16px; }
  .rp-wish input { min-height: 44px; font-size: 16px; }
  .rp-purchase input:not([type=checkbox]):not([type=hidden]), .rp-purchase textarea { min-height: 44px; font-size: 16px; }
  .rp-purchase .field > label:has(input[type=checkbox]) { min-height: 44px; }
  /* 入力欄が小窓の高さを超えるので、保存とキャンセルは常に見えるように下へ固定する。
     固定した帯の下に、選んだ欄が隠れないよう余白も取る。 */
  #record-dialog:has(.rp-purchase) { scroll-padding-bottom: 76px; }
  .rp-purchase .rp-foot { position: sticky; bottom: -14px; z-index: 1; margin: 8px -20px -14px; padding: 8px 20px 14px; border-top: 1px solid var(--rule); background: #fff; }
  .rp-foot .m-btn { flex: 1 1 auto; }
  .rp-links a, .rp-remove, .rp-cand > .m-link { display: inline-flex; align-items: center; min-height: 44px; }
  .record-notice:not(:empty) { bottom: calc(66px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); justify-content: space-between; }
  .together .panel.together-group { margin: 12px 0; }
  /* 表の外枠と行の角丸は wotalog.css の札の形の名残。行の罫線だけにする。 */
  .alerts-table tr { padding: 10px 0; }
  .record-notice button { min-height: 44px; }
}