/* ============================================================================================
@me Design System v1 — Phase 3 / Step 1（導入のみ）。
正解は design-review の静的モック。ここはその Design System を実アプリへ「追加」する層。
重要: この層は完全に追加・名前空間化されている。
- 変数はすべて `--ds-*`（既存の `--color-*` 等には触れない）
- クラスはすべて `.dsv1-*`（既存クラスと衝突しない）
- 素の要素セレクタ（button / body / * 等）は一切書かない
したがって、既存画面の見た目・挙動・テストには影響しない。各画面は Step 3 で順に採用する。
値の出所: 添付基準画像②（Design System v1）。勝手な最適化はしない。
============================================================================================ */
:root {
/* ---- Color / Brand ---- */
--ds-purple: #7c5cff; /* Primary */
--ds-blue: #3b82f6; /* Search */
--ds-green: #22c55e; /* Life Map */
--ds-pink: #ff6ba7; /* Timeline */
--ds-orange: #ff9f1c; /* Profile */
/* Color / Neutral */
--ds-white: #ffffff;
--ds-g50: #fafafb;
--ds-g100: #f1f3f5;
--ds-g200: #e5e7eb;
--ds-g300: #d1d5db;
--ds-g600: #4b5563;
--ds-g900: #111827;
/* 薄いアクセント面（各画面のfeature帯・soft背景） */
--ds-purple-soft: #f3f0ff;
--ds-blue-soft: #ebf3fe;
--ds-green-soft: #e9f9f0;
--ds-pink-soft: #ffeff5;
--ds-orange-soft: #fff5e9;
/* いまの画面のアクセント。既定は Home の紫で、シェルの data-accent が上書きする。
各コンポーネントは色名（purple/blue…）を知らず、この役割名だけを見る。 */
--page-accent: var(--ds-purple);
--page-accent-soft: var(--ds-purple-soft);
--page-accent-contrast: #ffffff;
/* アクセント面に乗せるアイコンの色。既定は白で、明るいアクセントの画面だけ濃色へ。 */
--fab-icon-color: var(--page-accent-contrast);
/* テキスト階層（Neutral の別名。役割で引けるように） */
--ds-text: var(--ds-g900);
--ds-muted: var(--ds-g600);
--ds-faint: #9aa1ac;
--ds-line: #ececf1;
/* ---- Typography ---- */
--ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
--ds-fs-h1: 28px; --ds-fw-h1: 700;
--ds-fs-h2: 22px; --ds-fw-h2: 600;
--ds-fs-h3: 18px; --ds-fw-h3: 600;
--ds-fs-body: 16px; --ds-fw-body: 400;
--ds-fs-cap: 13px; --ds-fw-cap: 400;
--ds-fs-ov: 11px; --ds-fw-ov: 500;
/* ---- Radius ---- */
--ds-r-card: 24px;
--ds-r-btn: 20px;
--ds-r-input: 18px;
--ds-r-chip: 999px;
--ds-r-sm: 12px;
/* ---- Spacing（8pt Grid） ---- */
--ds-s1: 8px;
--ds-s2: 16px;
--ds-s3: 24px;
--ds-s4: 32px;
--ds-s5: 48px;
--ds-s6: 64px;
/* ---- Elevation ---- */
--ds-elev-none: none;
--ds-elev-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
--ds-elev-med: 0 4px 12px rgba(0, 0, 0, 0.08);
--ds-elev-strong: 0 8px 24px rgba(0, 0, 0, 0.12);
/* ---- Motion ---- */
--ds-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
--ds-dur: 300ms;
--ds-dur-map: 600ms;
}
/* ============================================================================================
Typography utilities
============================================================================================ */
.dsv1-h1 { font-family: var(--ds-font); font-size: var(--ds-fs-h1); font-weight: var(--ds-fw-h1); line-height: 1.3; letter-spacing: -0.01em; color: var(--ds-text); }
.dsv1-h2 { font-family: var(--ds-font); font-size: var(--ds-fs-h2); font-weight: var(--ds-fw-h2); line-height: 1.3; letter-spacing: -0.01em; color: var(--ds-text); }
.dsv1-h3 { font-family: var(--ds-font); font-size: var(--ds-fs-h3); font-weight: var(--ds-fw-h3); line-height: 1.35; color: var(--ds-text); }
.dsv1-body { font-family: var(--ds-font); font-size: var(--ds-fs-body); font-weight: var(--ds-fw-body); line-height: 1.6; color: var(--ds-text); }
.dsv1-caption { font-family: var(--ds-font); font-size: var(--ds-fs-cap); font-weight: var(--ds-fw-cap); line-height: 1.5; color: var(--ds-muted); }
.dsv1-overline { font-family: var(--ds-font); font-size: var(--ds-fs-ov); font-weight: var(--ds-fw-ov); line-height: 1.4; color: var(--ds-muted); }
/* ============================================================================================
共通Component（基盤）。Step 2/3 でこれらを使って各画面を移植する。
すべて .dsv1-* 名前空間。既存画面には未使用。
============================================================================================ */
/* Icon（線画2px） */
.dsv1-ic { display: inline-block; vertical-align: middle; stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
/* PrimaryButton */
.dsv1-btn {
font-family: var(--ds-font); font-size: var(--ds-fs-body); font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s1);
height: 50px; padding: 0 20px; border: 0; border-radius: var(--ds-r-btn);
background: var(--page-accent); color: var(--page-accent-contrast); box-shadow: var(--ds-elev-med);
cursor: pointer; transition: transform var(--ds-dur) var(--ds-ease), opacity var(--ds-dur) var(--ds-ease);
}
.dsv1-btn:active { transform: scale(0.98); }
.dsv1-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--page-accent) 50%, transparent); outline-offset: 2px; }
/* SecondaryButton */
.dsv1-btn-secondary {
font-family: var(--ds-font); font-size: 15px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s1);
height: 46px; padding: 0 18px; border: 1px solid var(--ds-g200); border-radius: var(--ds-r-btn);
background: #fff; color: var(--ds-muted); cursor: pointer;
transition: transform var(--ds-dur) var(--ds-ease);
}
.dsv1-btn-secondary:active { transform: scale(0.98); }
/* TextButton */
.dsv1-btn-text { font-family: var(--ds-font); font-size: 14px; font-weight: 600; color: var(--page-accent); background: none; border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
/* SearchField */
.dsv1-field {
display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 16px;
border: 1px solid var(--ds-g200); border-radius: var(--ds-r-chip);
background: #fff; box-shadow: var(--ds-elev-soft); color: var(--ds-faint);
}
.dsv1-field input { flex: 1; min-width: 0; border: 0; outline: none; background: none;
font-family: var(--ds-font); font-size: 15px; color: var(--ds-text); }
.dsv1-field input::placeholder { color: var(--ds-faint); }
/* Chip / Tag */
.dsv1-chip {
display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 16px;
border-radius: var(--ds-r-chip); background: var(--ds-g100); color: var(--ds-muted);
font-family: var(--ds-font); font-size: 13px; font-weight: 500; white-space: nowrap;
border: 0; cursor: pointer; transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.dsv1-chip.is-on { background: var(--page-accent); color: var(--page-accent-contrast); font-weight: 600; }
.dsv1-chip.is-on-blue { background: var(--ds-blue); color: #fff; font-weight: 600; }
/* Avatar（人物写真 or 頭文字） */
.dsv1-avatar { flex: 0 0 auto; border-radius: 999px; overflow: hidden;
background: #cbd2db center / cover no-repeat; display: inline-grid; place-items: center;
color: var(--ds-muted); font-family: var(--ds-font); font-weight: 700; }
/* Photo holder（写真は実素材を cover 表示） */
.dsv1-photo { position: relative; overflow: hidden; flex: 0 0 auto;
background: var(--ds-g200) center / cover no-repeat; }
/* RecordCard（写真サムネ + 本文 + メタ） */
.dsv1-card {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 10px; border: 1px solid var(--ds-g100); border-radius: 16px;
background: #fff; box-shadow: var(--ds-elev-soft); cursor: pointer;
transition: transform var(--ds-dur) var(--ds-ease);
}
.dsv1-card:active { transform: scale(0.99); }
.dsv1-card .dsv1-card-thumb { width: 52px; height: 52px; border-radius: 12px; }
.dsv1-card .dsv1-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dsv1-card .dsv1-card-title { font-family: var(--ds-font); font-size: 15px; font-weight: 600; color: var(--ds-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsv1-card .dsv1-card-meta { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
/* TimelineCard（アバター + 見出し + 写真 + リアクション） */
.dsv1-tlcard {
width: 100%; text-align: left; padding: 12px; border: 1px solid var(--ds-g100);
border-radius: 16px; background: #fff; box-shadow: var(--ds-elev-soft);
}
.dsv1-tlcard .dsv1-tl-head { display: flex; align-items: center; gap: 10px; }
.dsv1-tlcard .dsv1-tl-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.dsv1-tlcard .dsv1-tl-photos .dsv1-photo { height: 108px; border-radius: 12px; }
/* MapPin（写真ピン + 件数バッジ）。地図上に重ねる。 */
.dsv1-pin { position: absolute; width: 56px; height: 66px; transform: translate(-50%, -100%); border: 0; background: none; cursor: pointer; }
.dsv1-pin .dsv1-pin-ph { display: block; width: 56px; height: 56px; border-radius: 999px; border: 3px solid #fff;
box-shadow: var(--ds-elev-med); overflow: hidden; background: var(--ds-g200) center / cover no-repeat; }
.dsv1-pin::after { content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
border: 7px solid transparent; border-top: 9px solid #fff; border-bottom: 0; }
.dsv1-pin.is-sel .dsv1-pin-ph { border-color: var(--ds-green); }
.dsv1-pin .dsv1-badge { position: absolute; top: -6px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px;
border-radius: 999px; border: 2px solid #fff; background: var(--ds-purple); color: #fff;
font-family: var(--ds-font); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dsv1-pin .dsv1-badge.is-blue { background: var(--ds-blue); }
/* BottomNavigation + FAB（4タブ + 中央FAB） */
.dsv1-nav {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); align-items: center;
height: 80px; padding: 4px 10px calc(18px + env(safe-area-inset-bottom, 0px));
background: #fff; border-top: 1px solid var(--ds-g100);
}
.dsv1-nav-item {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 44px; border: 0; background: none; cursor: pointer;
color: #a6adb8; font-family: var(--ds-font); font-size: 10px; font-weight: 500;
}
.dsv1-nav-item.is-on { font-weight: 600; }
/* IA Phase 2: Friends ゲートON のときだけ5タブ。列がひとつ増えるだけで、高さ・safe-area の余白・
タップ領域（min-height:44px）は4タブと同じ。列は 0 まで縮められるようにして、狭い端末でも
ナビが画面幅を押し広げない（ラベルは省略記号で degrade する）。 */
.dsv1-nav--5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
/* 知識ゲートも ON だと6タブ。390px でも 1項目 57px を確保できるよう、FAB の左右の余白だけ
詰める。文字サイズとタップ領域（min-height:44px）は減らさない -- 押しにくくなるのは、
項目がひとつ増えることより悪い。ラベルは2文字なので詰めても省略記号にならない。 */
.dsv1-nav--6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto repeat(4, minmax(0, 1fr)); }
.dsv1-nav--6 .dsv1-fab { margin: 0 4px; }
.dsv1-nav-item > span {
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsv1-fab {
width: 48px; height: 48px; margin: 0 10px; border: 0; border-radius: 999px;
background: var(--page-accent); color: var(--fab-icon-color); display: grid; place-items: center;
box-shadow: var(--ds-elev-med); cursor: pointer;
}
/* Motion: enter（ふわっと自然に現れる） */
@keyframes dsv1-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dsv1-enter { animation: dsv1-enter var(--ds-dur) var(--ds-ease) both; }
@media (prefers-reduced-motion: reduce) {
.dsv1-enter { animation: none; }
.dsv1-btn:active, .dsv1-btn-secondary:active, .dsv1-card:active { transform: none; }
.dsv1-spinner { animation: none; }
}
/* ============================================================================================
共通Component — 仕上げ（Step 2）。すべて .dsv1-* 名前空間。既存画面は未使用。
============================================================================================ */
/* disabled は全コンポーネント共通の見た目 */
.dsv1-btn:disabled, .dsv1-btn-secondary:disabled, .dsv1-btn-text:disabled,
.dsv1-chip:disabled, .dsv1-iconbtn:disabled, .dsv1-field.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
/* loading spinner（PrimaryButton） */
.dsv1-spinner { width: 16px; height: 16px; border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff;
animation: dsv1-spin 0.7s linear infinite; }
@keyframes dsv1-spin { to { transform: rotate(360deg); } }
/* TextButton neutral / focus */
.dsv1-btn-text--neutral { color: var(--ds-muted); }
.dsv1-btn:focus-visible, .dsv1-btn-secondary:focus-visible, .dsv1-btn-text:focus-visible,
.dsv1-chip:focus-visible, .dsv1-iconbtn:focus-visible, .dsv1-nav-item:focus-visible,
.dsv1-fab:focus-visible, .dsv1-pin:focus-visible, .dsv1-field-btn:focus-visible {
outline: 3px solid color-mix(in srgb, var(--page-accent) 45%, transparent); outline-offset: 2px;
}
/* 画面ごとの割り当て。値は既存トークンで、ここでは付け替えているだけ。 */
[data-accent="blue"] { --page-accent: var(--ds-blue); --page-accent-soft: var(--ds-blue-soft); }
/* 緑とオレンジは明るいので、白アイコンでは 3:1 を下回る。アイコンだけ濃色にする
（背景色は変えない）。値は既存の --ds-g900 で、7.79 / 8.64。 */
[data-accent="green"] { --page-accent: var(--ds-green); --page-accent-soft: var(--ds-green-soft);
--fab-icon-color: var(--ds-g900); }
[data-accent="orange"] { --page-accent: var(--ds-orange); --page-accent-soft: var(--ds-orange-soft);
--fab-icon-color: var(--ds-g900); }
[data-accent="purple"] { --page-accent: var(--ds-purple); --page-accent-soft: var(--ds-purple-soft); }
/* IconButton — 見た目のアイコンが小さくても操作領域は44px以上 */
.dsv1-iconbtn { width: 44px; height: 44px; display: grid; place-items: center;
border: 0; background: none; color: var(--ds-muted); cursor: pointer; border-radius: 12px; }
/* SearchField — clear/filter ボタン、focus */
.dsv1-field { transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.dsv1-field:focus-within { border-color: var(--ds-purple); box-shadow: 0 0 0 3px var(--ds-purple-soft); }
.dsv1-field-btn { width: 30px; height: 30px; display: grid; place-items: center;
border: 0; background: none; color: var(--ds-faint); cursor: pointer; flex: 0 0 auto; }
/* Chip icon の色は継承 */
.dsv1-chip .dsv1-ic { color: currentColor; }
/* Avatar badge */
.dsv1-avatar { position: relative; }
.dsv1-avatar-badge { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px;
border-radius: 999px; border: 2px solid #fff; background: var(--ds-orange); color: #fff;
display: grid; place-items: center; font-size: 9px; }
/* SectionHeader */
.dsv1-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-s2); }
.dsv1-sechead-title { font-weight: 600; }
/* RecordCard — 追加スロット（density 対応） */
.dsv1-card-thumb--icon { display: grid; place-items: center; background: var(--ds-purple-soft); color: var(--ds-purple); }
.dsv1-card--compact .dsv1-card-thumb { width: 48px; height: 48px; }
.dsv1-card-excerpt { font-family: var(--ds-font); font-size: 12px; line-height: 1.5; color: var(--ds-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dsv1-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dsv1-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px;
background: var(--ds-g100); color: var(--ds-muted); font-family: var(--ds-font); font-size: 11px; }
.dsv1-card-icons { display: flex; gap: 8px; margin-top: 2px; color: #a6adb8; }
/* TimelineCard — head / text / foot */
.dsv1-tl-who { flex: 1; min-width: 0; font-family: var(--ds-font); font-size: 14px; color: var(--ds-text); }
.dsv1-tl-who b { font-weight: 700; }
.dsv1-tl-time { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
.dsv1-tl-menu { width: 32px; height: 32px; margin-right: -4px; }
.dsv1-tl-text { font-family: var(--ds-font); font-size: 14px; color: var(--ds-text); margin-top: 8px; }
.dsv1-tl-foot { display: flex; gap: 18px; margin-top: 10px; }
.dsv1-tl-fbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer;
color: var(--ds-faint); font-family: var(--ds-font); font-size: 13px; min-height: 32px; }
.dsv1-tl-fbtn.is-liked { color: var(--ds-pink); }
.dsv1-tl-fbtn.is-liked .dsv1-ic { fill: var(--ds-pink); }
/* ProfileCard */
.dsv1-profilecard { border: 1px solid var(--ds-g100); border-radius: 16px; padding: 14px; box-shadow: var(--ds-elev-soft); background: #fff; }
.dsv1-pc-head { display: flex; align-items: center; gap: 12px; }
.dsv1-pc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dsv1-pc-name { font-family: var(--ds-font); font-size: 16px; font-weight: 700; color: var(--ds-text); }
.dsv1-pc-username { font-family: var(--ds-font); font-size: 13px; color: var(--ds-faint); }
.dsv1-pc-desc { margin: 10px 0 0; font-family: var(--ds-font); font-size: 13px; line-height: 1.7; color: var(--ds-muted); }
.dsv1-pc-stats { display: flex; gap: 24px; margin-top: 12px; }
.dsv1-pc-stat { display: flex; flex-direction: column; align-items: center; }
.dsv1-pc-stat-n { font-family: var(--ds-font); font-size: 18px; font-weight: 700; color: var(--ds-text); font-variant-numeric: tabular-nums; }
.dsv1-pc-stat-l { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); margin-top: 2px; }
/* MapPin — saved indicator */
.dsv1-pin-saved { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 999px;
border: 2px solid #fff; background: var(--ds-green); color: #fff; display: grid; place-items: center; }
/* ============================================================================================
Home 画面レイアウト（Phase 3 / Step 3）。静的モックの Home に一致させる。
.dsv1-home-* 名前空間。他画面は未使用。
============================================================================================ */
.dsv1-home { background: var(--ds-white); min-height: 100%; padding: 0 0 108px; }
.dsv1-home-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 4px; }
.dsv1-home-logo { font-family: var(--ds-font); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-purple); }
.dsv1-home-greet { margin: 0; padding: 10px 20px 0; font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); }
.dsv1-home-q { margin: 0; padding: 4px 20px 0; font-family: var(--ds-font); font-size: var(--ds-fs-h1); font-weight: var(--ds-fw-h1); line-height: 1.32; letter-spacing: -0.01em; color: var(--ds-text); }
/* 検索エリアは「Searchへ移動する」タップ導線（モック同様、Home内では入力させない）。 */
.dsv1-home-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 40px); margin: 18px 20px 0;
height: 48px; padding: 0 18px; border: 1px solid var(--ds-g200); border-radius: var(--ds-r-chip);
background: #fff; box-shadow: var(--ds-elev-soft); color: var(--ds-faint); font-family: var(--ds-font); font-size: 15px; cursor: pointer; }
.dsv1-home-search .dsv1-ic { color: var(--ds-faint); }
.dsv1-home-cta { padding: 14px 20px 0; }
.dsv1-home-cta .dsv1-btn { width: 100%; }
.dsv1-home-sec { padding: 0 20px; margin-top: 8px; }
.dsv1-home-sec .dsv1-sechead { padding: 24px 0 10px; }
.dsv1-home-list { display: flex; flex-direction: column; gap: 10px; }
.dsv1-home-empty { padding: 40px 20px; text-align: center; }
.dsv1-home-empty-title { font-family: var(--ds-font); font-size: 16px; font-weight: 700; color: var(--ds-text); margin: 0 0 6px; }
.dsv1-home-empty-note { font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); margin: 0 0 16px; line-height: 1.7; }
/* Home の RecordCard サムネは実アプリの写真ハイドレーション枠を内包する */
.dsv1-card-thumb.page-thumb-photo { position: relative; }
.dsv1-card-thumb .dsv1-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dsv1-card-thumb[data-page-photo] { background: var(--ds-g200); }
/* Home の BottomNavigation は全幅バー（モック同様）。他画面の floating pill は変更しない。 */
.dsv1-nav--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 861px) { .dsv1-nav--fixed { max-width: 640px; left: 50%; transform: translateX(-50%); } }
/* ============================================================================================
Search 画面レイアウト（Phase 3 / Step 5）。静的モックの Search に一致させる。
.dsv1-search-* 名前空間。既存の検索ロジック（正規化/ランキング/Concept Index）は不変で、
表示層だけをここへ載せ替える。他画面は未使用。
============================================================================================ */
.dsv1-search { background: var(--ds-white); min-height: 100%; padding: 0 0 108px; }
.dsv1-search-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; }
.dsv1-search-title { font-family: var(--ds-font); font-size: var(--ds-fs-h2); font-weight: var(--ds-fw-h2); letter-spacing: -0.01em; color: var(--ds-text); }
/* 検索フィールド行（モックの sfield-row：pillフィールド + 右のフィルターアイコン）。 */
.dsv1-search-fieldrow { display: flex; align-items: center; gap: 10px; padding: 4px 20px 0; }
.dsv1-field-form { flex: 1; min-width: 0; display: flex; }
.dsv1-search-fieldrow .dsv1-field { flex: 1; height: 46px; }
.dsv1-field-btn { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px;
border: 0; background: none; color: var(--ds-faint); cursor: pointer; }
.dsv1-search-filterbtn { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
border: 0; background: none; color: var(--ds-muted); cursor: pointer; }
/* カテゴリChip行（すべて / Record / 場所 / タグ / 友達）。アクティブは青（Search色）。 */
/* 余白は .dsv1-search [data-search-categories] が一手に持つ（下の方で定義）。
ここは並べ方だけ。二重に足さないよう、margin も padding も書かない。 */
.dsv1-search-chips { display: flex; gap: 8px; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none; }
.dsv1-search-chips::-webkit-scrollbar { display: none; }
.dsv1-search-chips .dsv1-chip { flex: 0 0 auto; }
/* 知識への入口。Search のカテゴリでも設定項目でもなく、主要機能への「機能カード」。
温かい面＋大きめのアイコン面で、補助リンクには見えないようにする。
ただし高さは抑え、Search の主役は奪わない。 */
.dsv1-search-knowledge { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px);
margin: 12px 20px 2px; padding: 13px 14px; min-height: 44px; text-align: left; cursor: pointer;
border: 1px solid var(--ds-purple-soft); border-radius: 20px;
background: linear-gradient(135deg, var(--ds-purple-soft) 0%, var(--ds-pink-soft) 100%);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(124, 92, 255, 0.10); }
.dsv1-search-knowledge:active { transform: scale(0.995); }
.dsv1-search-knowledge-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 14px; background: var(--ds-white); color: var(--ds-purple); }
.dsv1-search-knowledge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dsv1-search-knowledge-title { font-family: var(--ds-font); font-size: 15.5px; font-weight: 700; color: var(--ds-text); }
.dsv1-search-knowledge-sub { font-family: var(--ds-font); font-size: 12.5px; line-height: 1.4; color: var(--ds-g600); }
.dsv1-search-knowledge-tag { font-family: var(--ds-font); font-size: 11px; color: var(--ds-purple); font-weight: 600; }
.dsv1-search-knowledge-chev { flex: none; color: var(--ds-purple); display: grid; place-items: center; }
/* Phase 22.7: 記録にきく への入口。知識への入口と同じ「行 + 右向きの矢印」にする --
押すと画面ごと変わることが形で分かり、検索の絞り込みには見えない。
色は Search の青。知識（紫）と並んだときに、別の行き先だと分かる。 */
.dsv1-search-brain { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px);
margin: 12px 20px 2px; padding: 13px 14px; min-height: 44px; text-align: left; cursor: pointer;
border: 1px solid var(--ds-blue-soft); border-radius: 20px; background: var(--ds-blue-soft);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.dsv1-search-brain:active { transform: scale(0.995); }
.dsv1-search-brain-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 14px; background: var(--ds-white); color: var(--ds-blue); }
.dsv1-search-brain-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dsv1-search-brain-title { font-family: var(--ds-font); font-size: 15.5px; font-weight: 700; color: var(--ds-text); }
.dsv1-search-brain-sub { font-family: var(--ds-font); font-size: 12.5px; line-height: 1.4; color: var(--ds-g600); }
.dsv1-search-brain-chev { flex: none; color: var(--ds-blue); display: grid; place-items: center; }
/* ---- Knowledge 共通デザイン（さがす / 保存 / 公開 / 各詳細で同じ規則） ---------------------- */
/* 概要（ヒーロー）。どの詳細も、まず「何の知識か」から始まる。 */
.mkt-kv { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; }
.mkt-kv .mkt-thumb { width: 60px; height: 60px; border-radius: 18px; font-size: 27px; }
.mkt-kv-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.mkt-kv-title { margin: 0; font-family: var(--ds-font); font-size: 19px; font-weight: 700;
line-height: 1.35; color: var(--ds-text); word-break: break-word; }
.mkt-kv-summary { margin: 0; font-family: var(--ds-font); font-size: 13.5px; line-height: 1.6; color: var(--ds-g600); }
/* 主操作の帯。画面でいちばん押してほしいものだけを置く。 */
.mkt-primary { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 8px; }
.mkt-primary-hint { margin: 0; font-family: var(--ds-font); font-size: 12px; line-height: 1.5; color: var(--ds-muted); }
.mkt-primary-state { margin: 0; display: flex; align-items: center; gap: 6px;
font-family: var(--ds-font); font-size: 14px; font-weight: 600; color: var(--ds-green); }
.mkt-primary-subactions { display: flex; flex-wrap: wrap; gap: 14px; }
/* セクション。詳細画面はこの単位で積む（全部をカードで囲まない）。 */
.mkt-sec { padding: 16px 20px; border-top: 1px solid var(--ds-line); }
.mkt-sec-title { margin: 0 0 8px; font-family: var(--ds-font); font-size: 14px; font-weight: 700; color: var(--ds-text); }
.mkt-sec-note { margin: 0 0 10px; font-family: var(--ds-font); font-size: 12.5px; line-height: 1.6; color: var(--ds-muted); }
.mkt-sec-empty { margin: 0; font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); }
/* 本文。この画面の主役。設定カードと同じ面にはしない --「読みもの」として、
少しだけ温かい紙の色を敷き、行間と余白を広くとる。長文でも疲れないように。 */
.mkt-read { padding: 8px 16px 18px; }
.mkt-body-card { background: #fffdf9; border: 1px solid var(--ds-line); border-radius: 20px;
padding: 22px 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.05); }
.mkt-body-card > * { margin: 0 0 16px; }
.mkt-body-card > *:last-child { margin-bottom: 0; }
.mkt-body-card p { font-family: var(--ds-font); font-size: 15.5px; line-height: 1.95;
color: var(--ds-text); letter-spacing: 0.01em; }
.mkt-body-card h2, .mkt-body-card h3 { font-family: var(--ds-font); font-size: 16px; font-weight: 700;
line-height: 1.5; color: var(--ds-text); margin-top: 26px; }
.mkt-body-card h2:first-child, .mkt-body-card h3:first-child { margin-top: 0; }
.mkt-body-card ul, .mkt-body-card ol { padding-left: 22px; }
.mkt-body-card li { font-family: var(--ds-font); font-size: 15px; line-height: 1.9; color: var(--ds-text); margin-bottom: 8px; }
@media (prefers-color-scheme: dark) {
.mkt-body-card { background: var(--ds-white); }
}
/* 選べるアクション（内容を編集 / 更新版を公開）。違いが分かるよう一言そえる。 */
.mkt-actions { display: flex; flex-direction: column; gap: 8px; }
.mkt-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
text-align: left; cursor: pointer; background: var(--ds-white);
border: 1px solid var(--ds-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.mkt-action[disabled] { opacity: 0.55; cursor: default; }
.mkt-action-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center;
border-radius: 12px; background: var(--ds-purple-soft); color: var(--ds-purple); }
.mkt-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-action-title { font-family: var(--ds-font); font-size: 14px; font-weight: 700; color: var(--ds-text); }
.mkt-action-sub { font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); }
/* 情報行（公開設定などの読み物）。操作と混ぜない。 */
.mkt-rows { margin: 0 0 12px; padding: 0; background: var(--ds-white);
border: 1px solid var(--ds-line); border-radius: 16px; overflow: hidden; }
.mkt-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ds-line); }
.mkt-row:first-child { border-top: 0; }
.mkt-row dt { flex: none; width: 84px; font-family: var(--ds-font); font-size: 12.5px; color: var(--ds-muted); }
.mkt-row dd { margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--ds-font); font-size: 13.5px;
color: var(--ds-text); word-break: break-word; }
/* 補助セクション。履歴・公開日時・保存解除など、主役ではないもの。 */
.mkt-aux { padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mkt-aux-line { margin: 0; font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); }
.mkt-aux-danger { border-top: 1px solid var(--ds-line); margin-top: 4px; }
/* ボタンの階層: 主=purple filled / 副=soft outline / 補助=text / 危険=red soft。 */
.mkt-secondary { min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--ds-purple); background: var(--ds-white); color: var(--ds-purple);
font-family: var(--ds-font); font-size: 13px; font-weight: 600; }
.mkt-text-btn { min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
font-family: var(--ds-font); font-size: 13px; font-weight: 600; color: var(--ds-purple); }
.mkt-text-danger { color: #b42318; }
/* ---- 知識（Marketplace）専用UI --------------------------------------------------------------
Search の中の絞り込みではなく、独立した機能の画面。通常のナビは出さないので、
ここのヘッダーとセグメントが唯一の現在地表示になる。地味な灰色一色にせず、
既存トークン（purple / green / surface）の範囲で温度を与える。 */
/* 専用ヘッダー＋セグメントを、ひとつの shell としてまとめる。
本文（薄い面）より一段だけ手前に見えるよう白＋薄い境界と shadow を置き、
sticky でも本文と自然に分かれるようにする。 */
.mkt-head { position: sticky; top: 0; z-index: 5; background: var(--ds-white);
padding: 4px 0 0; border-bottom: 1px solid var(--ds-line);
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05); }
.mkt-head-bar { display: flex; align-items: center; gap: 8px; padding: 0 20px 8px; }
.mkt-head-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px;
margin-left: -10px; border-radius: 999px; color: var(--ds-text); }
.mkt-head-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-head-title { margin: 0; font-family: var(--ds-font); font-size: 21px; font-weight: 700;
letter-spacing: 0.01em; color: var(--ds-text); }
.mkt-head-sub { margin: 0; font-family: var(--ds-font); font-size: 12.5px; color: var(--ds-g600); }
/* セグメント。太い pill 3つではなく、細い下線式。375px でも3つが等幅で収まり、折り返さない。
app.css の旧 pill 定義（角丸・面・枠）を打ち消すため、当たっている値をすべて上書きする。 */
.mkt-tabs { display: flex; gap: 0; padding: 0 12px; flex-wrap: nowrap; }
/* タップ領域は 44px 以上。下線は選択中のボタン自身の ::after なので、
必ず「選ばれている場所の真下」に1本だけ出る（nth-child にも DOM 順にも依存しない）。 */
.mkt-tab { position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 12px 4px;
background: none; border: 0; border-radius: 0; cursor: pointer;
font-family: var(--ds-font); font-size: 13px; font-weight: 600; color: var(--ds-g600);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-tab.is-active { background: none; color: var(--ds-purple); font-weight: 700; }
.mkt-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
height: 2.5px; border-radius: 2px; background: var(--ds-purple); }
@media (prefers-reduced-motion: no-preference) {
.mkt-tab { transition: color var(--ds-dur) var(--ds-ease); }
.mkt-tab.is-active::after { animation: mkt-underline 180ms var(--ds-ease) both; }
}
@keyframes mkt-underline { from { transform: scaleX(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* ヒーロー。入口として、白一色にせず、ほんの少し温かい面をつくる。
主役は検索欄なので、見出し・説明・検索欄の間隔をここで整える。 */
.mkt-hero { margin: 0 0 4px; padding: 18px 20px 20px;
background: linear-gradient(160deg, var(--ds-purple-soft) 0%, var(--ds-pink-soft) 55%, var(--ds-g50) 100%); }
.mkt-hero-title { margin: 0 0 6px; font-family: var(--ds-font); font-size: 20px; font-weight: 700;
line-height: 1.35; color: var(--ds-text); }
.mkt-hero-sub { margin: 0 0 14px; font-family: var(--ds-font); font-size: 13px; line-height: 1.6; color: var(--ds-g600); }
/* 一体型の検索フィールド。Record 検索とは形を変える。実行ボタンだけが浮かないよう、
面の中に収め、枠と地続きに見せる。 */
.mkt-search { display: flex; align-items: center; gap: 8px; min-height: 48px;
padding: 0 5px 0 14px; background: var(--ds-white); border: 1px solid var(--ds-g200);
border-radius: 999px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 14px rgba(16, 24, 40, 0.06); }
.mkt-search-icon { flex: none; display: grid; place-items: center; color: var(--ds-g300); }
.mkt-search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
font-family: var(--ds-font); font-size: 15px; color: var(--ds-text); }
.mkt-search-button { flex: none; width: 38px; height: 38px; display: grid; place-items: center;
border: 0; border-radius: 999px; background: var(--ds-purple); color: #fff; cursor: pointer; }
/* セクション見出し。 */
.mkt-section { margin: 18px 0 0; padding: 0 20px; }
.mkt-section-title { margin: 0 0 10px; font-family: var(--ds-font); font-size: 15px; font-weight: 700; color: var(--ds-text); }
/* サムネイル代わりの記号タイル。画像が無くても面が持つようにする。
カードでは少し大きくして、左側に「絵のある面」を作る。 */
.mkt-thumb { flex: none; width: 56px; height: 56px; display: grid; place-items: center;
border-radius: 16px; font-size: 25px; line-height: 1; background: var(--ds-g100); }
.mkt-thumb-travel { background: var(--ds-blue-soft); }
.mkt-thumb-study { background: var(--ds-purple-soft); }
.mkt-thumb-certification { background: var(--ds-orange-soft); }
.mkt-thumb-work { background: var(--ds-green-soft); }
.mkt-thumb-life { background: var(--ds-pink-soft); }
/* カテゴリ。数字だけのフィルターに見せない。0件は数字を出さず、弱く置く。 */
.mkt-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mkt-cat { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 10px; padding: 9px 11px;
text-align: left; cursor: pointer; background: var(--ds-white);
border: 1px solid var(--ds-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.mkt-cat .mkt-thumb { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
.mkt-cat-name { flex: 1 1 auto; min-width: 0; font-family: var(--ds-font); font-size: 14px; font-weight: 600;
color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 件数はいちばん弱い階層（アイコン面 > 名前 > 件数）。 */
.mkt-cat-count { flex: none; min-width: 20px; text-align: right;
font-family: var(--ds-font); font-size: 11.5px; color: var(--ds-g300); }
/* 0件は「使えない」ではなく「まだ少ない」。薄くしすぎない。 */
.mkt-cat.is-quiet { opacity: 0.72; }
.mkt-cat.is-quiet .mkt-cat-name { color: var(--ds-g600); }
/* 絞り込み中のカテゴリは、選ばれていることが分かるようにする。 */
.mkt-cat.is-on { border-color: var(--ds-purple); background: var(--ds-purple-soft); }
/* 知識カード。単色灰色をやめ、白地＋控えめな2層shadow＋@me の角丸で「読みもの」に見せる。 */
.mkt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* app.css の旧カード（灰色面・内側 padding・縦積み）を打ち消して置き換える。 */
.mkt-card { display: block; padding: 0; gap: 0;
background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: 22px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.06); overflow: hidden; }
.mkt-card-open { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px;
font-weight: 400; text-align: left; background: none; border: 0; cursor: pointer; }
.mkt-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.mkt-card-title { font-family: var(--ds-font); font-size: 15.5px; font-weight: 700; line-height: 1.4;
color: var(--ds-text); word-break: break-word; }
/* 本文preview は2行まで。長文でも高さが暴れない。 */
.mkt-card-summary { font-family: var(--ds-font); font-size: 13px; line-height: 1.5; color: var(--ds-g600);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mkt-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0;
font-family: var(--ds-font); font-size: 11.5px; color: var(--ds-muted); }
.mkt-card-cat { padding: 2px 8px; border-radius: 999px; background: var(--ds-g100); color: var(--ds-g600); }
.mkt-card-onmap { color: var(--ds-green); }
.mkt-card-price { font-weight: 700; color: var(--ds-text); }
.mkt-card-go { flex: none; align-self: center; font-family: var(--ds-font); font-size: 12px; color: var(--ds-purple); font-weight: 600; }
.mkt-card-foot { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; }
.mkt-flag { font-family: var(--ds-font); font-size: 11px; font-weight: 600; color: var(--ds-orange); }
.mkt-card-foot .mkt-save { margin-left: auto; }
.mkt-save { align-self: center; min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--ds-purple); background: var(--ds-white); color: var(--ds-purple);
font-family: var(--ds-font); font-size: 13px; font-weight: 600; }
.mkt-save.is-saved { border-color: var(--ds-g200); background: var(--ds-g100); color: var(--ds-muted); }
/* 空状態。大きな空白にしない。 */
.mkt-empty { margin: 24px 20px; padding: 26px 20px; text-align: center; display: flex;
flex-direction: column; align-items: center; gap: 8px;
background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: 22px; }
.mkt-empty .mkt-thumb { width: 54px; height: 54px; border-radius: 18px; font-size: 25px; }
.mkt-empty-title { font-family: var(--ds-font); font-size: 15px; font-weight: 700; color: var(--ds-text); }
.mkt-empty-note { margin: 0; font-family: var(--ds-font); font-size: 13px; line-height: 1.6; color: var(--ds-muted); }
/* 主ボタン。CTA は十分なコントラストで。 */
.mkt-publish { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--ds-purple); color: #fff; font-family: var(--ds-font); font-size: 14px; font-weight: 700; }
.mkt-mine-cta { padding: 14px 20px 4px; }
.mkt-mine-cta-sub { margin: 8px 0 0; font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); }
/* 管理詳細。通常操作と危険操作を、色でも位置でも分ける。 */
.mkt-manage { padding: 0 20px 8px; }
.mkt-manage-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 12px; }
.mkt-manage-title { margin: 0 0 6px; font-family: var(--ds-font); font-size: 17px; font-weight: 700; color: var(--ds-text); }
.mkt-manage-row { padding-bottom: 12px; }
.mkt-manage-sec { padding: 14px 0; border-top: 1px solid var(--ds-line); }
.mkt-manage-sec-title { margin: 0 0 8px; font-family: var(--ds-font); font-size: 13px; font-weight: 700; color: var(--ds-g600); }
.mkt-manage-line { margin: 0 0 6px; font-family: var(--ds-font); font-size: 13px; color: var(--ds-text); }
.mkt-manage-hint { margin: 8px 0 0; font-family: var(--ds-font); font-size: 12px; line-height: 1.6; color: var(--ds-muted); }
.mkt-manage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mkt-manage-danger { margin-top: 6px; }
.mkt-danger { min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--ds-g200); background: var(--ds-white); color: #b42318;
font-family: var(--ds-font); font-size: 13px; font-weight: 600; }
/* 本文には、ごく薄い面を敷く。白カードが白地に沈んで階層が消えるのを防ぐ。
知識の画面はナビを出さないので、ナビ分の余白も残さない。 */
.marketplace-screen { background: var(--ds-g50);
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* セクションの導入（保存した知識 / あなたの知識）。1件でも上部にまとまりを作る。 */
.mkt-intro { padding: 16px 20px 10px; }
.mkt-intro-title { margin: 0 0 4px; font-family: var(--ds-font); font-size: 17px; font-weight: 700; color: var(--ds-text); }
.mkt-intro-sub { margin: 0; font-family: var(--ds-font); font-size: 13px; line-height: 1.5; color: var(--ds-g600); }
.mkt-intro .mkt-publish { margin-top: 12px; }
/* 主CTA は画面幅に合う横長。ただしバナーにはしない。 */
.mkt-publish-wide { width: 100%; }
.mkt-mine-handle { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 公開状態の badge。黒い pill にせず、状態ごとに既存の soft color を使う。
カテゴリ（灰色の面）とは色で見分けがつく。 */
.mkt-status-pill { padding: 2px 9px; border-radius: 999px; border: 0;
font-family: var(--ds-font); font-size: 11px; font-weight: 700; }
.mkt-status-published { background: var(--ds-green-soft); color: var(--ds-green); }
.mkt-status-draft { background: var(--ds-g100); color: var(--ds-g600); }
.mkt-status-unlisted { background: var(--ds-orange-soft); color: var(--ds-orange); }
/* カード右端の chevron。カード全体が押せることを、文字を足さずに伝える。 */
.mkt-card-chev { flex: none; align-self: center; display: grid; place-items: center; color: var(--ds-g300); }
/* カテゴリの色みを、細い縁として1本だけ持たせる。一覧が同じ白い行の連続に見えなくなる。
面ごと塗らないので、タイトル（主役）のコントラストは落ちない。 */
.mkt-tone-travel { border-left: 3px solid var(--ds-blue); }
.mkt-tone-study { border-left: 3px solid var(--ds-purple); }
.mkt-tone-certification { border-left: 3px solid var(--ds-orange); }
.mkt-tone-work { border-left: 3px solid var(--ds-green); }
.mkt-tone-life { border-left: 3px solid var(--ds-pink); }
/* 押した感触。過剰にしない。 */
.mkt-card-open:active { background: var(--ds-g50); }
/* セグメント切替のときだけ、本文を軽く出す。300ms を超える重い動きはしない。 */
@media (prefers-reduced-motion: no-preference) {
.marketplace-screen .mkt-list,
.marketplace-screen .mkt-intro,
.marketplace-screen .mkt-hero,
.marketplace-screen .mkt-empty { animation: mkt-fade 160ms ease-out both; }
}
@keyframes mkt-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* 件数ラベル。 */
.dsv1-scount { padding: 16px 20px 8px; font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); }
.dsv1-slist { display: block; }
/* ---- Search 専用 RecordCard variation（モックの検索結果カード準拠） ----------------------------
既存機能（カード内音声再生 / 一致理由 / メディア手掛かり / 整理状態 / 知識バッジ / 詳細遷移）は
そのまま保持し、視覚階層だけ整える：写真を明確に、タイトル最優先、日時・場所・種別は補助、
一致理由と整理状態は小さく。Home の compact には影響しない（.dsv1-card--search のみ）。 */
.dsv1-card--search { display: flex; flex-direction: column; gap: 8px; width: calc(100% - 40px); text-align: left;
margin: 0 20px 10px; padding: 12px; border: 1px solid var(--ds-g100); border-radius: 16px;
background: #fff; box-shadow: var(--ds-elev-soft); cursor: pointer; min-height: 44px;
transition: transform var(--ds-dur) var(--ds-ease); }
.dsv1-card--search:active { transform: scale(0.99); }
.dsv1-card--search .dsv1-card-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
/* サムネ枠: 写真 / 種別アイコンをこの 64px 枠に収める（写真を明確に）。 */
.dsv1-card--search .dsv1-card-thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
position: relative; display: grid; place-items: center; background: var(--ds-g200); color: var(--ds-faint); }
.dsv1-card--search .dsv1-card-thumb .dsv1-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dsv1-card--search .dsv1-card-thumb--icon { background: var(--ds-g100); }
/* 音声は seek 可能な既存プレイヤーを全幅で保持（再生・シーク機能を失わない）。ただし主役にはしない
ので、カード内では控えめな高さに収める（操作域は 44px 以上を確保）。 */
.dsv1-card--search .dsv1-card-media { display: block; width: 100%; min-width: 0; }
/* 既存プレイヤーの grid レイアウトはそのまま使い（配線・シークを壊さない）、カード内に収まる寸法へ
詰めるだけにする。枠線・余白は既存メディア枠のものを外し、カード内で浮かないようにする。 */
.dsv1-card--search .dsv1-card-media .record-card-media {
width: 100%; max-width: 100%; min-width: 0; margin: 0; min-height: 0;
border: 0; background: none; padding: 0; }
.dsv1-card--search .dsv1-card-media .record-audio-player { width: 100%; max-width: 100%; min-width: 0; gap: 0; }
.dsv1-card--search .dsv1-card-media .record-audio-toggle {
width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 0;
grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
.dsv1-card--search .dsv1-card-media .record-card-play { width: 34px; height: 34px; font-size: 13px; }
.dsv1-card--search .dsv1-card-media .record-card-wave { height: 26px; min-width: 0; }
.dsv1-card--search .dsv1-card-media .record-audio-time { font-family: var(--ds-font); font-size: 11px; color: var(--ds-faint); }
.dsv1-card--search .dsv1-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* タイトル最優先。2行までで省略（モックの行数感）。 */
.dsv1-card--search .dsv1-card-title { font-family: var(--ds-font); font-size: 15px; font-weight: 600; color: var(--ds-text);
line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dsv1-card--search .dsv1-card-meta { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
.dsv1-card--search .dsv1-card-line { font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsv1-card--search .dsv1-card-icons { display: flex; gap: 8px; color: var(--ds-faint); margin-top: 2px; }
/* 補助情報（整理状態 / 一致理由）は小さく、主役にしない。 */
.dsv1-card--search .dsv1-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.dsv1-card--search .dsv1-card-foot .ai-status,
.dsv1-card--search .dsv1-card-foot .match-reasons span,
.dsv1-card--search .dsv1-card-foot .record-knowledge-badge {
font-family: var(--ds-font); font-size: 11px; line-height: 1.5; padding: 2px 8px; border-radius: 999px;
background: var(--ds-g100); color: var(--ds-muted); border: 0; }
.dsv1-card--search .dsv1-card-foot .match-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.dsv1-card--search .dsv1-card-foot .record-knowledge-badge { cursor: pointer; min-height: 24px; }
/* People / Places の軽量カード（RecordCardには入れない）。サムネ/アバター + 名前 + 補足 + chevron。 */
.dsv1-slite { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px); text-align: left;
margin: 0 20px 10px; padding: 10px; border: 1px solid var(--ds-g100); border-radius: 16px;
background: #fff; box-shadow: var(--ds-elev-soft); cursor: pointer;
transition: transform var(--ds-dur) var(--ds-ease); }
.dsv1-slite:active { transform: scale(0.99); }
.dsv1-slite-thumb { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
background: var(--ds-g200) center / cover no-repeat; position: relative; }
.dsv1-slite-thumb.is-round { border-radius: 999px; }
.dsv1-slite-thumb .dsv1-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dsv1-slite-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dsv1-slite-t { font-family: var(--ds-font); font-size: 15px; font-weight: 600; color: var(--ds-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsv1-slite-d { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
.dsv1-slite-chev { flex: 0 0 auto; color: var(--ds-g300); align-self: center; }
/* タグ browse は軽量Chip雲（RecordCardには入れない）。 */
.dsv1-search-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 20px 0; }
/* ---- 検索前の探索（補助導線） ----------------------------------------------------------------
Search が主役なので、見出しは小さく、中身は軽量カード / Chip / 写真グリッドに留める。
該当データが無い節はそもそも描画されない（空欄・0件カードは置かない）。 */
.dsv1-explore { padding: 4px 0 0; }
.dsv1-explore-sec { margin-top: 18px; }
.dsv1-explore-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px 8px; }
.dsv1-explore-h { margin: 0; font-family: var(--ds-font); font-size: 14px; font-weight: 600; color: var(--ds-text); letter-spacing: -0.01em; }
.dsv1-explore-head .dsv1-btn-text { font-size: 13px; min-height: 32px; margin: -6px 0; }
.dsv1-explore-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; }
.dsv1-explore-chips .dsv1-chip { height: 32px; padding: 0 14px; }
.dsv1-chip-n { margin-left: 6px; font-size: 11px; opacity: 0.6; }
/* 写真グリッド（正方形3列）。写真は既存のハイドレーション枠をそのまま入れる。 */
.dsv1-explore-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 20px; }
.dsv1-explore-photo { position: relative; aspect-ratio: 1 / 1; border: 0; padding: 0; border-radius: 12px;
overflow: hidden; background: var(--ds-g200); cursor: pointer; }
.dsv1-explore-photo .ph, .dsv1-explore-photo figure { width: 100%; height: 100%; margin: 0; border-radius: inherit; }
.dsv1-explore-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* 探索の軽量行に使うサムネのアイコン版 */
.dsv1-slite-thumb--icon { display: grid; place-items: center; background: var(--ds-g100); color: var(--ds-faint); }
/* Recordが一件も無いときの案内（技術文言は出さない）。 */
.dsv1-explore-empty { padding: 56px 32px; text-align: center; }
.dsv1-explore-empty-t { margin: 0 0 6px; font-family: var(--ds-font); font-size: 16px; font-weight: 700; color: var(--ds-text); }
.dsv1-explore-empty-n { margin: 0 0 16px; font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); line-height: 1.7; }
.dsv1-explore-empty-a .dsv1-btn { width: 100%; }
/* 空状態 / 該当なし。技術的な語は使わず、やさしい日本語だけ。 */
.dsv1-sempty { padding: 56px 32px; text-align: center; font-family: var(--ds-font); font-size: 14px; color: var(--ds-faint); line-height: 1.7; }
/* ============================================================================================
Life Map 画面レイアウト（Phase 3 / Step 6）。静的モックの Life Map に合わせる。
「場所」が主役。既存の地図実装（端末内で座標を投影して打つピン）はそのままで、その上に DS の
視覚レイヤーだけを被せる。地図ライブラリ・SDK・APIキー・位置データモデルには一切触れない。
.dsv1-lifemap / .dsv1-lm-* 名前空間。他画面は未使用。
============================================================================================ */
.dsv1-lifemap { background: var(--ds-white); min-height: 100%; padding: 0 0 108px; }
.dsv1-lifemap-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 20px 10px; }
.dsv1-lifemap-title { font-family: var(--ds-font); font-size: var(--ds-fs-h2); font-weight: var(--ds-fw-h2); letter-spacing: -0.01em; color: var(--ds-text); }
/* 場所を探す導線（既存の Search へ渡すだけ。新しい検索機能は作らない）。 */
.dsv1-lifemap-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 40px); margin: 0 20px 4px;
height: 46px; padding: 0 18px; border: 1px solid var(--ds-g200); border-radius: var(--ds-r-chip);
background: #fff; box-shadow: var(--ds-elev-soft); color: var(--ds-faint);
font-family: var(--ds-font); font-size: 15px; cursor: pointer; }
.dsv1-lm-sec { margin-top: 20px; }
.dsv1-lm-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px 10px; }
.dsv1-lm-h { margin: 0; font-family: var(--ds-font); font-size: var(--ds-fs-h3); font-weight: var(--ds-fw-h3); color: var(--ds-text); }
.dsv1-lm-n { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
.dsv1-lm-note { margin: 0; padding: 0 20px 8px; font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); }
/* 場所カード（写真が場所の顔）。 */
.dsv1-lm-places { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.dsv1-lm-place { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 10px; border: 1px solid var(--ds-g100); border-radius: 16px; background: #fff;
box-shadow: var(--ds-elev-soft); cursor: pointer; min-height: 44px;
transition: transform var(--ds-dur) var(--ds-ease); }
.dsv1-lm-place:active { transform: scale(0.99); }
.dsv1-lm-place-ph { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
position: relative; background: var(--ds-g200) center / cover no-repeat; display: grid; place-items: center; color: var(--ds-faint); }
.dsv1-lm-place-ph .dsv1-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dsv1-lm-place-ph--blank { background: var(--ds-g100); }
.dsv1-lm-place-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dsv1-lm-place-name { font-family: var(--ds-font); font-size: 15px; font-weight: 600; color: var(--ds-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsv1-lm-place-meta { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
/* 場所別写真 / 月ごとの軌跡 */
.dsv1-lm-album { padding: 0 0 14px; }
.dsv1-lm-album-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px 6px; }
.dsv1-lm-album-name { font-family: var(--ds-font); font-size: 14px; font-weight: 600; color: var(--ds-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsv1-lm-trail { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.dsv1-lm-trail-month { display: flex; flex-direction: column; gap: 2px; }
.dsv1-lm-trail-label { font-family: var(--ds-font); font-size: 14px; font-weight: 600; color: var(--ds-text); }
.dsv1-lm-trail-places { font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); }
/* 「地図を見る」入口（ゲートON時のみ描画される）。 */
.dsv1-lm-mapentry { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px); text-align: left;
margin: 8px 20px 0; padding: 12px; border: 1px solid var(--ds-g100); border-radius: 16px;
background: var(--ds-green-soft); box-shadow: var(--ds-elev-soft); cursor: pointer; min-height: 44px; }
.dsv1-lm-mapentry-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
border-radius: 12px; background: #fff; color: var(--ds-green); }
.dsv1-lm-mapentry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dsv1-lm-mapentry-t { font-family: var(--ds-font); font-size: 15px; font-weight: 600; color: var(--ds-text); }
.dsv1-lm-mapentry-s { font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); }
/* ---- 地図レンズ（ユーザー単位ゲート。ONのときだけ到達する） ------------------------------------
地図が画面の主役になるよう、投影キャンバスを大きく取る。ピンの位置は % なので、高さを変えても
既存の投影計算・座標・クラスタIDには一切影響しない。 */
.dsv1-lm-maphead .life-map-back, .dsv1-lm-maphead .ghost { font-family: var(--ds-font); font-size: 14px; }
.dsv1-lm-map { position: relative; width: calc(100% - 40px); margin: 4px 20px 0; height: 52vh; min-height: 300px;
border-radius: 20px; overflow: hidden; background: var(--ds-green-soft); border: 1px solid var(--ds-g100); }
/* MapPin（DS）。見た目は小さくても、透明な操作域で 44px 以上を確保する。 */
.dsv1-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center;
width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.dsv1-pin .dsv1-pin-ph { width: 18px; height: 18px; border-radius: 999px; background: var(--ds-green);
border: 2px solid #fff; box-shadow: var(--ds-elev-med); }
.dsv1-pin--friend .dsv1-pin-ph { background: var(--ds-purple); }
.dsv1-pin.is-sel .dsv1-pin-ph { width: 26px; height: 26px; background: var(--ds-green); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.22), var(--ds-elev-med); }
.dsv1-pin .dsv1-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: var(--ds-green); color: #fff; border: 2px solid #fff;
font-family: var(--ds-font); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.dsv1-pin .dsv1-pin-label { position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
max-width: 120px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
font-family: var(--ds-font); font-size: 11px; color: var(--ds-text); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; box-shadow: var(--ds-elev-soft); }
/* 選択中の場所カード。地図を覆いすぎない高さに留め、選択時だけ現れる。 */
.dsv1-lm-placecard { width: calc(100% - 40px); margin: 12px 20px 0; padding: 12px;
border: 1px solid var(--ds-g100); border-radius: 18px; background: #fff; box-shadow: var(--ds-elev-med); }
.dsv1-lm-pc-row { display: flex; align-items: center; gap: 12px; }
.dsv1-lm-pc-ph { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; position: relative;
background: var(--ds-g200) center / cover no-repeat; display: grid; place-items: center; color: var(--ds-faint); }
.dsv1-lm-pc-ph .dsv1-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dsv1-lm-pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dsv1-lm-pc-title { margin: 0; font-family: var(--ds-font); font-size: 15px; font-weight: 600; color: var(--ds-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsv1-lm-pc-sub { margin: 0; font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); }
.dsv1-lm-pc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
/* ---- 地図レンズの調整（ヘッダー整列 / 絞り込みのDS化 / 場所カードが見える高さ） ------------------ */
/* 戻る＋タイトルは左に並べる（左右に離さない）。 */
.dsv1-lm-maphead { justify-content: flex-start; gap: 12px; padding: 12px 20px 6px; }
.dsv1-lm-maphead .dsv1-lifemap-title { font-size: var(--ds-fs-h3); }
.dsv1-lm-note { padding: 0 20px 6px; }
/* 既存の絞り込み（種類 / 期間）を DS の Chip 見た目へ。配線・data-action は変えない。 */
.dsv1-lifemap .life-map-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 8px; }
.dsv1-lifemap .life-map-filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.dsv1-lifemap .life-map-filter {
display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0;
border-radius: var(--ds-r-chip); background: var(--ds-g100); color: var(--ds-muted);
font-family: var(--ds-font); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.dsv1-lifemap .life-map-filter.is-active { background: var(--ds-green); color: #fff; font-weight: 600; }
.dsv1-lifemap .life-map-summary { margin: 0; padding: 0 20px 8px; font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
/* 地図は主役だが、選択した場所カードが同じ画面に収まる高さに留める。 */
.dsv1-lm-map { height: 40vh; min-height: 260px; }
/* 場所カードのアクションまで 390×844 に収まる高さへ最終調整。 */
.dsv1-lifemap .life-map-summary { padding: 0 20px 4px; }
.dsv1-lm-map { height: 34vh; min-height: 240px; margin-top: 0; }
.dsv1-lm-placecard { margin-top: 10px; }
/* 場所カードのアクションは1行に（既存ボタンの全幅指定をカード内でだけ解除）。 */
.dsv1-lm-pc-actions .dsv1-btn-secondary, .dsv1-lm-pc-actions .secondary { width: auto; min-width: 0; height: 40px; padding: 0 16px; }
.dsv1-lm-pc-actions .dsv1-btn-text { min-height: 40px; }
/* 地図の枠の縦横比を、論理座標系（320x320）と合わせる。
ここがずれると、SVG の viewBox が実寸へ引き伸ばされて日本が太って見える
（実測で横に22%伸びていた）。ピンは同じ枠の % 配置なので、比を合わせれば
地図・ピン・現在地の3つが同時に正しくなる。 */
.dsv1-lm-map { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
/* 地図の縁でピンのラベルが切れないようにする（投影座標は一切変えない）。
ラベルはピンの下（top: 30px）へ伸びるので、開けておくのは縦だけでよい。
横まで開けると、拡大（.dsv1-lm-pins の transform: scale）ではみ出した分がそのまま
ページの幅になり、画面ごと横へずれて右側に余白が出る。横はここで閉じる。
clip は hidden と違ってスクロール領域を作らないので、縦のはみ出しはそのまま見える。 */
.dsv1-lm-map { overflow-x: clip; overflow-y: visible; }
/* 既存の縦積み指定に勝たせて、閉じる／記録を開く を1行に並べる。 */
.dsv1-lm-placecard .dsv1-lm-pc-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
/* ============================================================================================
Life Map V1 — 抽象キャンバス（Phase 3 / Step 6）。
ここは「実地図」ではなく「人生の場所を眺めるキャンバス」。したがって背景に描いてよいのは
ごく薄い有機的グラデーション / 抽象ノイズ / 等高線風ライン / 地域を示さない柔らかなテクスチャ だけ。
道路・川・海岸線・駅・地名・国境・実在地形、および実地図に見える装飾は一切描かない。
すべて CSS のみ（画像・タイル・SDK・APIキー・通信なし）。座標は端末外へ出ない。
============================================================================================ */
.dsv1-lm-map { position: relative; isolation: isolate; background: none; border: 0; }
/* ①ごく薄い有機的グラデーション（地形ではなく「気配」）。 */
.dsv1-lm-canvas {
position: absolute; inset: 0; border-radius: 20px; z-index: 0;
background:
radial-gradient(120% 92% at 22% 16%, rgba(34, 197, 94, 0.13), transparent 62%),
radial-gradient(105% 85% at 84% 74%, rgba(59, 130, 246, 0.08), transparent 64%),
radial-gradient(90% 70% at 55% 105%, rgba(124, 92, 255, 0.06), transparent 60%),
linear-gradient(160deg, #f7fbf8 0%, #f2f6f4 100%);
}
/* ②等高線風の抽象リング。地形の写しではなく、ただの同心円。 */
.dsv1-lm-canvas-contours {
position: absolute; inset: 0; border-radius: 20px; z-index: 1; pointer-events: none; opacity: 0.55;
background-image:
repeating-radial-gradient(circle at 30% 34%, rgba(17, 24, 39, 0.05) 0 1px, transparent 1px 26px),
repeating-radial-gradient(circle at 76% 70%, rgba(17, 24, 39, 0.04) 0 1px, transparent 1px 34px);
}
/* ③抽象ノイズ（粒状感だけ）。 */
.dsv1-lm-canvas-grain {
position: absolute; inset: 0; border-radius: 20px; z-index: 2; pointer-events: none; opacity: 0.5;
background-image: radial-gradient(rgba(17, 24, 39, 0.055) 0.5px, transparent 0.6px);
background-size: 3px 3px;
}
/* ピン層。CSS transform だけで拡大する（SDK・タイルなし）。ピンは逆スケールで大きさを保つ。 */
.dsv1-lm-pins { position: absolute; inset: 0; z-index: 3; transition: transform var(--ds-dur-map) var(--ds-ease); }
.dsv1-lm-pins .dsv1-pin { transform: translate(-50%, -50%) scale(calc(1 / var(--lm-z, 1))); }
/* 表示倍率の切替（右下）。 */
.dsv1-lm-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 4;
width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ds-g200);
border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ds-muted);
box-shadow: var(--ds-elev-soft); cursor: pointer; }
/* Bottom Sheet に添える地域名。名前より控えめに置く（地図の上では場所は既に見えている）。 */
.life-map-pin-sheet-area { margin: 2px 0 0; font-size: 12px; color: var(--ds-muted);
overflow-wrap: anywhere; }
/* 実地図。Record が主役なので、地図は画面を埋め尽くさず、下部ナビにもかからない。 */
.life-map-map-live { position: relative; width: calc(100% - 40px); margin: 4px 20px 0;
aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden;
border: 1px solid var(--ds-g100); background: var(--ds-g50, #f7f8f9); }
.life-map-live-host { position: absolute; inset: 0; }
/* 地図そのものの入れ物。Mapbox GL の CSS が .mapboxgl-map へ position: relative を当てて
inset を無効化するため、高さは幅と同じく明示する -- 指定しないと高さ 0 に潰れ、
タイルが1枚も描かれない（Preview で実際にそうなった）。 */
.life-map-live { width: 100%; height: 100%; }
/* いまいる場所。Record のピン（緑）と見分けられるよう青い点にする。 */
.life-map-live-here { display: block; width: 14px; height: 14px; border-radius: 999px;
background: var(--ds-blue, #3b82f6); border: 2px solid #fff;
box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.22); }
/* 実地図に置く「保存した知識」。静的地図の .life-map-saved-pin と同じ見た目にする
（同じものが地図によって別の姿だと、同じものだと分からない）。位置は Mapbox の
Marker が transform で決めるので、ここでは position も transform も持たない。 */
.life-map-live-saved { width: 26px; height: 26px; border-radius: 999px; display: grid;
place-items: center; font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
background: var(--ds-amber, #f59e0b); border: 2px solid #fff;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.20), var(--ds-elev-soft); }
/* 地域で地図を動かす欄。Record の検索とは別物だと分かるよう、地図のすぐ上に置く。 */
.life-map-place-search { position: relative; margin: 8px 20px 0; }
.life-map-place-input { width: 100%; min-height: 44px; padding: 0 12px;
border: 1px solid var(--ds-g200); border-radius: 12px; font-family: var(--ds-font);
font-size: 14px; background: #fff; }
.life-map-place-status { margin: 6px 2px 0; font-size: 12px; color: var(--ds-muted); }
.life-map-place-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--ds-g200);
border-radius: 12px; box-shadow: var(--ds-elev-med); max-height: 240px; overflow-y: auto; }
.life-map-place-item { display: flex; flex-direction: column; gap: 2px; width: 100%;
min-height: 44px; padding: 8px 10px; border: 0; background: none; text-align: left;
cursor: pointer; border-radius: 8px; }
.life-map-place-item:hover { background: var(--ds-g50, #f7f8f9); }
.life-map-place-name { font-size: 14px; font-weight: 600; color: var(--ds-text); }
.life-map-place-detail { font-size: 12px; color: var(--ds-muted); overflow-wrap: anywhere; }
/* 日本の輪郭。主役は Record なので、主張する図ではなく、静かな土台として置く。
線は細く、面は淡く -- 地図アプリのような主張をさせない。 */
.life-map-japan { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
pointer-events: none; }
.life-map-japan path { fill: var(--ds-g100, #eef2f0); stroke: var(--ds-g200, #d7dedb);
stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Life Map のピンは、位置を指すだけの小さな点。DS の MapPin には人物用の大きな丸
（56px）の指定もあり、そちらが当たると地図が写真カードの一覧のように見えてしまう。
ここは地図なので、地図用の点の大きさを名指しで決める（操作域は .dsv1-pin の 44px のまま）。 */
.dsv1-pin .dsv1-pin-ph.life-map-pin-dot {
width: 16px; height: 16px; border-radius: 999px;
background: var(--ds-green); border: 2px solid #fff; box-shadow: var(--ds-elev-med);
}
/* まとまっている場所は、少しだけ重く見せる（数はバッジが持つ）。 */
.dsv1-pin.life-map-pin-cluster .dsv1-pin-ph.life-map-pin-dot { width: 20px; height: 20px; }
/* 選んだ場所だけ、控えめに強調する。写真には戻さない。 */
.dsv1-pin.is-sel .dsv1-pin-ph.life-map-pin-dot {
width: 22px; height: 22px;
box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.22), var(--ds-elev-med);
}
/* いまいる場所の目印。Record のピン（緑）とは色も形も分ける（青い点＋白い縁＋淡い輪）。
押せない・選べない・保存されない、ただの目印なので pointer-events は持たせない。 */
.life-map-here-dot { position: absolute; transform: translate(-50%, -50%); z-index: 3;
width: 14px; height: 14px; border-radius: 999px; pointer-events: none;
background: var(--ds-blue, #3b82f6); border: 2px solid #fff;
box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.22), var(--ds-elev-soft); }
/* 記録した場所から離れていて、地図の縁に寄せて出しているとき。 */
.life-map-here-dot-edge { opacity: 0.65; }
/* Phase 21: 保存した知識の配置。Record のピン（緑）とも現在地（青い点）とも別のもの
（琥珀色の丸＋本のアイコン）。押すと、その知識を開く。座標の数字は出さない。 */
.life-map-saved-pin { position: absolute; transform: translate(-50%, -50%); z-index: 3;
width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
background: var(--ds-amber, #f59e0b); border: 2px solid #fff;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.20), var(--ds-elev-soft); }
.life-map-saved-pin-edge { opacity: 0.7; }
/* 保存した知識の一覧（地図の下に添える確実な入口）。 */
.life-map-saved { margin: 16px 0 4px; }
.life-map-saved-title { font-size: 14px; font-weight: 600; color: var(--ds-ink, #1f2937); margin: 0 0 8px; }
.life-map-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.life-map-saved-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
padding: 10px 12px; border: 1px solid var(--ds-g200); border-radius: 12px;
background: rgba(255, 255, 255, 0.94); cursor: pointer; min-height: 44px; }
.life-map-saved-emoji { flex: none; }
.life-map-saved-name { font-size: 14px; color: var(--ds-ink, #1f2937); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 現在地へ寄せる（右下・拡大の上）。拡大の「＋」と同じ形・同じ大きさで縦に並べ、
中身のアイコンだけで役割を分ける。記録作成の FAB とは色も位置も別。 */
.dsv1-lm-here { position: absolute; right: 10px; bottom: 64px; z-index: 4;
width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ds-g200);
border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ds-green);
box-shadow: var(--ds-elev-soft); cursor: pointer; }
.dsv1-lm-here[disabled] { cursor: default; color: var(--ds-muted); }
.dsv1-lm-here .dsv1-spinner { width: 18px; height: 18px; }
/* ---- ピン: 円形写真 / 件数バッジ / 選択リング / 44px操作域 --------------------------------- */
.dsv1-pin--photo .dsv1-pin-ph { width: 38px; height: 38px; border-radius: 999px; overflow: hidden;
background: var(--ds-g200) center / cover no-repeat; border: 2px solid #fff; box-shadow: var(--ds-elev-med); }
.dsv1-pin--photo .dsv1-pin-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.dsv1-pin--photo .dsv1-pin-fallback { position: absolute; inset: 0; background: var(--ds-green-soft); }
.dsv1-pin.is-sel .dsv1-pin-ph { box-shadow: 0 0 0 3px var(--ds-green), 0 0 0 9px rgba(34, 197, 94, 0.22), var(--ds-elev-med); }
.dsv1-pin--photo.is-sel .dsv1-pin-ph { width: 44px; height: 44px; }
.dsv1-pin:focus-visible { outline: 3px solid rgba(34, 197, 94, 0.55); outline-offset: 2px; border-radius: 999px; }
/* ---- 選択中の場所カード（写真ストリップつき） ------------------------------------------------ */
.dsv1-lm-placecard--cluster .dsv1-lm-pc-close { flex: 0 0 auto; width: 32px; height: 32px; color: var(--ds-faint); }
.dsv1-lm-pc-ph--blank { background: var(--ds-g100); }
.dsv1-lm-pc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.dsv1-lm-pc-shot { position: relative; aspect-ratio: 1 / 1; border: 0; padding: 0; border-radius: 10px;
overflow: hidden; background: var(--ds-g200); cursor: pointer; }
.dsv1-lm-pc-shot .page-thumb-photo { display: block; width: 100%; height: 100%; }
.dsv1-lm-pc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsv1-lm-placecard--cluster .dsv1-lm-pc-actions .dsv1-btn-secondary { width: 100%; height: 44px; }
/* 写真ピンの中では、既存サムネ枠の装飾擬似要素（種別マーク等）を出さない（丸い写真だけを見せる）。 */
.dsv1-pin--photo .dsv1-pin-ph::before, .dsv1-pin--photo .dsv1-pin-ph::after { content: none; display: none; }
.dsv1-pin--photo .dsv1-pin-ph > *:not(.dsv1-pin-img):not(.dsv1-pin-fallback) { display: none; }
/* ============================================================================================
Timeline 画面レイアウト（Phase 3 / Step 7）。静的モックの Timeline に合わせた「写真主体の縦フィード」。
移植するのは表示層だけ。Friendship / 公開範囲 / リアクション / コメント / ランキングには触れない。
友達フィードは Home 側のゲート機能なので、この画面には社交機能を新設しない。
.dsv1-timeline / .dsv1-tl-* 名前空間。他画面は未使用。
============================================================================================ */
.dsv1-timeline { background: var(--ds-white); min-height: 100%; padding: 0 0 108px; }
.dsv1-tl-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 6px; }
.dsv1-tl-title { font-family: var(--ds-font); font-size: var(--ds-fs-h2); font-weight: var(--ds-fw-h2); letter-spacing: -0.01em; color: var(--ds-text); }
/* 「今日」を示す軽い一行。 */
.dsv1-tl-today { margin: 0; padding: 0 20px 10px; font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); }
/* 日ごとのまとまり。 */
.dsv1-tl-group { margin-top: 8px; }
.dsv1-tl-grouphead { padding: 10px 20px 8px; }
.dsv1-tl-groupday { margin: 0; font-family: var(--ds-font); font-size: var(--ds-fs-h3); font-weight: var(--ds-fw-h3); color: var(--ds-text); }
.dsv1-tl-groupsub { margin: 2px 0 0; font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
.dsv1-tl-feed { display: flex; flex-direction: column; gap: 14px; padding: 0 20px; }
/* TimelineCard（RecordCardとは別物のまま）。人物 -> 今日の写真 -> 補助情報 の順に読ませる。 */
.dsv1-tlcard { display: block; width: 100%; text-align: left; border: 1px solid var(--ds-g100);
border-radius: var(--ds-r-card); background: #fff; box-shadow: var(--ds-elev-soft); padding: 12px;
cursor: pointer; transition: transform var(--ds-dur) var(--ds-ease); }
.dsv1-tlcard:active { transform: scale(0.995); }
.dsv1-tl-head { display: flex; align-items: center; gap: 10px; }
.dsv1-tlcard .dsv1-tl-who { flex: 1; min-width: 0; font-family: var(--ds-font); font-size: 14px; font-weight: 600;
color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsv1-tlcard .dsv1-tl-time { flex: 0 0 auto; font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
.dsv1-tlcard .dsv1-tl-text { font-family: var(--ds-font); font-size: 14px; line-height: 1.6; color: var(--ds-muted);
margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 写真が主役。1枚は横幅いっぱいで、縦長になりすぎない比率に収める。 */
.dsv1-tl-photos { margin-top: 10px; border-radius: var(--ds-r-sm); overflow: hidden; }
.dsv1-tl-photos.is-single { display: block; }
.dsv1-tl-photos.is-single .day-media, .dsv1-tl-photos.is-single .ph, .dsv1-tl-photos.is-single figure {
width: 100%; margin: 0; border-radius: var(--ds-r-sm); aspect-ratio: 4 / 3; max-height: 320px; }
.dsv1-tl-photos.is-single img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ds-r-sm); display: block; }
/* 複数枚は自然なグリッド（新しい大規模カルーセルは足さない）。 */
.dsv1-tl-photos.is-multi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dsv1-tl-photos.is-multi img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* 補助情報（種別・タグ・知識バッジ）は小さく最後に。 */
.dsv1-tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.dsv1-tl-meta .kind, .dsv1-tl-tags .tag { font-family: var(--ds-font); font-size: 11px; line-height: 1.5;
padding: 2px 8px; border-radius: 999px; background: var(--ds-g100); color: var(--ds-muted); }
.dsv1-tl-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* リアクション行は「存在する場合だけ」出る（自分のRecordには出ない）。 */
.dsv1-tl-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.dsv1-tl-fbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
border: 0; background: none; color: var(--ds-muted); font-family: var(--ds-font); font-size: 13px; cursor: pointer; }
.dsv1-tl-fbtn.is-liked { color: var(--ds-pink); }
.dsv1-tl-menu { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.dsv1-tlcard, .dsv1-lm-pins { transition: none; }
}
/* 写真枠を含み込みにして、既存の絶対配置![]()
がカード全体（＝ヘッダー）を覆わないようにする。 */
.dsv1-tl-photos, .dsv1-tl-photos .ph, .dsv1-tl-photos .day-media { position: relative; }
.dsv1-tl-photos .ph img, .dsv1-tl-photos .day-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 年月の見出しは DS の落ち着いたサイズに（既存の大きな album 見出しは Timeline では使わない）。 */
.dsv1-timeline .album-month-title { font-family: var(--ds-font); font-size: 13px; font-weight: 600;
color: var(--ds-faint); letter-spacing: 0.02em; padding: 18px 20px 2px; margin: 0; }
/* ============================================================================================
Profile 画面レイアウト（Phase 3 / Step 8）。Profile は「自分の資産の集約点」。
節を縦一列に整理して、将来ここへ 履歴（Timeline）と まとめ（Collections）を受け入れられる形にする。
変えない約束: アバターは名前の一文字（画像を取りに行かない）／社交要素ゼロ／統計は表ではなくChip。
.dsv1-profile / .dsv1-pf-* 名前空間。他画面は未使用。
============================================================================================ */
.dsv1-profile { background: var(--ds-white); min-height: 100%; padding: 0 0 108px; }
.dsv1-pf-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; }
.dsv1-pf-title { font-family: var(--ds-font); font-size: var(--ds-fs-h2); font-weight: var(--ds-fw-h2); letter-spacing: -0.01em; color: var(--ds-text); }
/* 本人。アバターは名前の一文字（＝ネットワークへ出ない）。モックの写真アバターは採らない。 */
.dsv1-pf-identity { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 20px 4px; }
.dsv1-pf-avatar { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 999px;
background: var(--ds-purple-soft); color: var(--ds-purple);
font-family: var(--ds-font); font-size: 34px; font-weight: 700; line-height: 1; }
.dsv1-pf-name { margin: 12px 0 0; font-family: var(--ds-font); font-size: var(--ds-fs-h2); font-weight: 700; letter-spacing: -0.01em; color: var(--ds-text); }
.dsv1-pf-summary { margin: 6px 0 0; font-family: var(--ds-font); font-size: 13px; line-height: 1.7; color: var(--ds-muted); max-width: 30em; }
/* 節。小さな見出し ＋ 中身。 */
.dsv1-pf-sec { margin-top: 22px; }
.dsv1-pf-h { margin: 0 0 10px; padding: 0 20px; font-family: var(--ds-font); font-size: var(--ds-fs-h3); font-weight: var(--ds-fw-h3); color: var(--ds-text); }
.dsv1-pf-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; }
.dsv1-pf-chips .chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
border: 0; border-radius: var(--ds-r-chip); background: var(--ds-g100); color: var(--ds-muted);
font-family: var(--ds-font); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.dsv1-pf-chips .chip .t-n { font-size: 11px; opacity: 0.65; }
/* 好きな場所（横スクロールではなく、収まる2列）。 */
.dsv1-pf-places { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 20px; }
.dsv1-pf-place { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 8px;
border: 1px solid var(--ds-g100); border-radius: 16px; background: #fff; box-shadow: var(--ds-elev-soft);
cursor: pointer; min-height: 44px; }
.dsv1-pf-place .placecard-cover, .dsv1-pf-place .ph { width: 100%; height: 84px; border-radius: 12px; overflow: hidden; position: relative; background: var(--ds-g200); }
.dsv1-pf-place img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 最近の活動（30日の粒）。 */
.dsv1-pf-sec .profile-activity { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; padding: 0 20px; }
.dsv1-pf-sec .profile-activity-day { aspect-ratio: 1 / 1; border-radius: 4px; background: var(--ds-g100); }
.dsv1-pf-sec .profile-activity-day.is-active { background: var(--ds-purple); }
.dsv1-pf-sec .profile-activity-note { margin: 10px 0 0; padding: 0 20px; font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
/* 行（設定など）。将来ここに 履歴 / まとめ の入口が並ぶ。 */
/* Recordが一件も無いとき。 */
.dsv1-pf-empty { padding: 56px 32px; text-align: center; }
.dsv1-pf-empty-t { margin: 0 0 6px; font-family: var(--ds-font); font-size: 16px; font-weight: 700; color: var(--ds-text); }
.dsv1-pf-empty-n { margin: 0 0 16px; font-family: var(--ds-font); font-size: 13px; color: var(--ds-muted); line-height: 1.7; }
.dsv1-pf-empty-a .dsv1-btn { width: 100%; }
/* 場所カード：既存の絶対配置![]()
をカバー枠内に収め、名前と件数を積む。 */
.dsv1-pf-place .placecard-cover, .dsv1-pf-place .ph { position: relative; display: block; }
.dsv1-pf-place .placecard-cover img, .dsv1-pf-place .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dsv1-pf-place .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dsv1-pf-place .t-item { font-family: var(--ds-font); font-size: 14px; font-weight: 600; color: var(--ds-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsv1-pf-place .t-n { font-family: var(--ds-font); font-size: 12px; color: var(--ds-faint); }
/* 既存の placecard は固定幅のカバーを持つので、Profile のカード内では幅をカードへ揃え直す。 */
.dsv1-profile .dsv1-pf-place .placecard-cover,
.dsv1-profile .dsv1-pf-place .ph { width: 100%; max-width: 100%; margin: 0; height: 84px; }
/* 操作可能な Chip だけ、実操作域を 44×44px 以上にする。
要素そのものを 44px にしたうえで背景を content-box に限定するので、見た目の pill はモック準拠の
34px のまま（＝視覚密度を崩さない）。上下 5px は透明な操作域。
非操作の Chip（記録の傾向の ）は対象外＝button化しない。
要素の箱を広げているだけなので、隣接 Chip の操作域が重なることはない（gap はそのまま効く）。 */
.dsv1-pf-chips button.chip {
height: 44px; min-height: 44px; min-width: 44px;
padding: 5px 14px; box-sizing: border-box;
background-clip: content-box;
}
.dsv1-pf-chips button.chip:focus-visible { outline: 3px solid rgba(124, 92, 255, 0.5); outline-offset: -3px; }
/* ---- IA Phase 3: 記録ライブラリ / Profile 配下ヘッダー / Friends ------------------------- */
/* Profile overview の「記録ライブラリ」。実在する2つ（履歴 / まとめ）だけを並べる行。
行の高さは 44px 以上（タップ領域＝視覚上の行そのもの。ズレを作らない）。 */
.dsv1-pf-liblist { display: flex; flex-direction: column; gap: 2px; }
.dsv1-pf-libitem {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; min-height: 56px; padding: 10px 14px; box-sizing: border-box;
border: 0; border-radius: 12px; background: var(--ds-g50, #f7f8fa);
font-family: var(--ds-font); text-align: left; cursor: pointer;
}
.dsv1-pf-libitem:focus-visible { outline: 3px solid rgba(124, 92, 255, 0.5); outline-offset: -3px; }
.dsv1-pf-libmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dsv1-pf-liblabel { font-size: 15px; font-weight: 600; color: var(--ds-ink, #12151a); }
.dsv1-pf-libnote { font-size: 12px; color: #7b828d; }
.dsv1-pf-libchev { display: grid; place-items: center; flex: 0 0 auto; color: #b3b9c2; }
/* Profile 配下（履歴 / まとめ / 概要）のヘッダー。名乗りと、ひとつ上へ戻る導線。 */
.dsv1-pf-subhead { display: flex; align-items: center; gap: 6px; }
.dsv1-pf-back {
display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px;
border: 0; border-radius: 999px; background: none; color: var(--ds-ink, #12151a); cursor: pointer;
}
.dsv1-pf-back:focus-visible { outline: 3px solid rgba(124, 92, 255, 0.5); outline-offset: -3px; }
/* Friends 画面。足したのは Header だけで、フィード本体は既存のスタイルをそのまま使う。 */
.dsv1-friends { padding-bottom: 8px; }
/* ============================================================================================
UI Polish Phase 1 — 密度・空状態・アニメーション
ここから下は「見た目の仕上げ」だけを担う層。上の構造 CSS は触らず、値だけを寄せる。
ねらい: 余白を締めて情報密度を上げ、Record が 0 件でも完成した画面に見せる。
============================================================================================ */
/* ---- 画面の余白と視線の始まり -------------------------------------------------------------- */
/* 上端の空白を詰め、最初の見出しが画面の上のほうから始まるようにする。 */
.dsv1-home, .dsv1-search, .dsv1-lifemap, .dsv1-profile, .dsv1-friends, .dsv1-timeline {
padding-top: max(14px, env(safe-area-inset-top, 0px));
padding-bottom: 104px; /* 固定ナビ(80) + 余白。最後の要素がナビに隠れない */
}
/* ---- ヘッダー: 高さを詰めて、画面名を主役から脇役へ ---------------------------------------- */
.dsv1-home-head, .dsv1-search-head, .dsv1-lifemap-head, .dsv1-pf-head, .dsv1-tl-head {
min-height: 44px; padding: 2px 20px 10px;
}
.dsv1-search-title, .dsv1-lifemap-title, .dsv1-pf-title, .dsv1-tl-title {
font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
}
.dsv1-home-logo { font-size: 22px; }
/* ---- Home: 「今日のページ」の密度 ----------------------------------------------------------- */
.dsv1-home-greet { margin: 2px 0 2px; font-size: 13px; color: #7b828d; }
.dsv1-home-q { margin: 0 0 14px; font-size: 26px; line-height: 1.28; letter-spacing: -0.02em; }
.dsv1-home-search { min-height: 46px; margin-bottom: 10px; font-size: 14px; border-radius: 14px; }
.dsv1-home-cta { margin: 0 0 18px; }
.dsv1-home-cta .dsv1-btn { min-height: 48px; font-size: 15px; border-radius: 14px; }
.dsv1-home-sec { margin-top: 4px; }
.dsv1-sechead { margin-bottom: 8px; }
.dsv1-h3, .dsv1-sechead-title { font-size: 14px; letter-spacing: -0.01em; }
.dsv1-home-list { gap: 8px; }
/* Home のカードは低く、たくさん並ぶ形へ */
.dsv1-card--compact { min-height: 60px; padding: 10px 12px; border-radius: 14px; }
.dsv1-card--compact .dsv1-card-title { font-size: 14px; }
.dsv1-card--compact .dsv1-card-meta { font-size: 11.5px; }
/* ---- 共通の空状態 -------------------------------------------------------------------------- */
/* 中央に寄せた小さな絵 → 見出し → 説明 → 導線 → ひとことヒント。
画面の真ん中ではなく、少し上に置く（下に大きな死角を作らないため）。 */
.dsv1-empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 10px; padding: 26px 26px 30px; margin: 4px 16px 0;
border-radius: 22px;
background: linear-gradient(180deg, rgba(124, 92, 255, 0.055), rgba(124, 92, 255, 0));
animation: dsv1-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dsv1-empty-orb {
position: relative; display: grid; place-items: center;
width: 66px; height: 66px; border-radius: 999px; margin-bottom: 2px;
background: rgba(124, 92, 255, 0.1); color: var(--ds-purple, #7c5cff);
}
.dsv1-empty-orb-ring {
position: absolute; inset: -9px; border-radius: 999px;
border: 1px solid rgba(124, 92, 255, 0.22);
animation: dsv1-breathe 3.6s ease-in-out infinite;
}
.dsv1-empty-t { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ds-ink, #12151a); }
.dsv1-empty-n { margin: 0; font-size: 13px; line-height: 1.7; color: #6f7681; max-width: 30ch; }
.dsv1-empty-a { margin-top: 4px; }
.dsv1-empty-hint { margin: 2px 0 0; font-size: 11.5px; color: #9aa1ac; }
.dsv1-empty--green { background: linear-gradient(180deg, rgba(22, 163, 110, 0.06), rgba(22, 163, 110, 0)); }
.dsv1-empty--green .dsv1-empty-orb { background: rgba(22, 163, 110, 0.1); color: var(--ds-green, #16a36e); }
.dsv1-empty--green .dsv1-empty-orb-ring { border-color: rgba(22, 163, 110, 0.22); }
.dsv1-empty--blue { background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0)); }
.dsv1-empty--blue .dsv1-empty-orb { background: rgba(37, 99, 235, 0.1); color: var(--ds-blue, #2563eb); }
.dsv1-empty--blue .dsv1-empty-orb-ring { border-color: rgba(37, 99, 235, 0.22); }
/* Home の空状態も同じ密度に寄せる */
.dsv1-home-empty {
padding: 22px 20px 26px; margin-top: 2px; border-radius: 22px;
background: linear-gradient(180deg, rgba(124, 92, 255, 0.055), rgba(124, 92, 255, 0));
text-align: center;
}
.dsv1-home-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.dsv1-home-empty-note { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: #6f7681; }
/* ---- Life Map: 空でも地面を見せる ----------------------------------------------------------- */
.dsv1-lm-emptycanvas {
position: relative; margin: 0 16px; border-radius: 24px; overflow: hidden;
min-height: 460px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, #f4f7f5, #eef3ef);
border: 1px solid rgba(22, 163, 110, 0.12);
}
.dsv1-lm-emptycanvas > .dsv1-empty { margin: 0; background: none; }
/* 背景の抽象模様は薄く沈める（地図を騙らない、あくまで地の模様） */
.dsv1-lm-emptycanvas > *:not(.dsv1-empty) { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
/* ---- Profile: 情報密度 ---------------------------------------------------------------------- */
.dsv1-pf-sec { margin: 0 16px 16px; }
.dsv1-pf-empty { margin: 0; }
.dsv1-pf-library { margin-top: 2px; }
.dsv1-pf-libitem { min-height: 58px; }
.dsv1-pf-liblabel { font-size: 14.5px; }
/* ---- Friends: 「友達の今日」 ---------------------------------------------------------------- */
.friends-feed { padding: 0 16px; }
.friends-feed-bar { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.friends-feed-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.friends-feed-card {
padding: 14px 16px 12px; border-radius: 18px; background: #fff;
border: 1px solid var(--ds-g100, #eceef2); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
animation: dsv1-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.friends-feed-owner { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.friends-feed-avatar { width: 30px; height: 30px; font-size: 12px; }
.friends-feed-name { font-size: 13px; font-weight: 600; color: #4a515c; }
.friends-feed-title { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.friends-feed-date { margin: 0 0 8px; font-size: 11.5px; color: #9aa1ac; }
.friends-feed-tags { margin-bottom: 8px; }
.friends-feed-reactions { gap: 6px; }
.friends-feed-reactions .feed-reaction {
min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px;
border: 1px solid var(--ds-g100, #eceef2); background: #fff;
}
/* ---- 動き: 軽く、控えめに ------------------------------------------------------------------- */
@keyframes dsv1-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dsv1-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsv1-breathe { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.06); opacity: 0.35; } }
/* 画面切替: 中身がふわっと現れる（レイアウトは動かさない） */
.dsv1-home, .dsv1-search, .dsv1-lifemap, .dsv1-profile, .dsv1-friends {
animation: dsv1-fade 220ms ease-out both;
}
/* カードは順に少しだけ遅れて出る */
.dsv1-home-list > * { animation: dsv1-rise 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.dsv1-home-list > *:nth-child(2) { animation-delay: 40ms; }
.dsv1-home-list > *:nth-child(3) { animation-delay: 80ms; }
.friends-feed-list > *:nth-child(2) { animation-delay: 50ms; }
.friends-feed-list > *:nth-child(3) { animation-delay: 100ms; }
/* 押した感触 */
.dsv1-btn, .dsv1-fab, .dsv1-nav-item, .dsv1-pf-libitem, .dsv1-card, .friends-feed-card .feed-reaction {
transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1), background-color 140ms ease, box-shadow 140ms ease;
}
.dsv1-btn:active, .dsv1-fab:active, .dsv1-pf-libitem:active, .dsv1-card:active { transform: scale(0.975); }
.dsv1-nav-item:active { transform: scale(0.94); }
/* 動きを減らす設定を尊重する。装飾のアニメーションは全部止める。 */
@media (prefers-reduced-motion: reduce) {
.dsv1-empty, .dsv1-empty-orb-ring, .friends-feed-card,
.dsv1-home, .dsv1-search, .dsv1-lifemap, .dsv1-profile, .dsv1-friends,
.dsv1-home-list > * {
animation: none !important;
}
.dsv1-btn, .dsv1-fab, .dsv1-nav-item, .dsv1-pf-libitem, .dsv1-card, .friends-feed-card .feed-reaction {
transition: none !important;
}
.dsv1-btn:active, .dsv1-fab:active, .dsv1-pf-libitem:active, .dsv1-card:active, .dsv1-nav-item:active {
transform: none !important;
}
}
/* ---- UI Polish Phase 1 / 追い込み ------------------------------------------------------------ */
/* Home: 上端の余白が積み上がっていたので、節ごとの上下を締める。 */
.dsv1-home-greet { padding-top: 2px; }
.dsv1-home-q { padding-top: 0; }
.dsv1-home-search { margin-top: 4px; }
/* Home の空状態は「今日のページ」そのものなので、下に死角を作らず縦を使う。 */
.dsv1-home-empty { padding: 30px 20px 34px; }
/* Profile: 名前まわりが間延びしていたので詰め、空状態との距離も縮める。 */
.dsv1-pf-avatar { width: 72px; height: 72px; }
.dsv1-pf-name { margin-top: 10px; font-size: 20px; }
.dsv1-pf-summary { margin-top: 4px; }
.dsv1-pf-identity { padding: 6px 16px 10px; }
.dsv1-profile .dsv1-empty { margin-top: 0; }
/* ボタンの文字は折り返さない（2行になると急に安っぽく見える）。 */
.dsv1-btn, .dsv1-empty-a .dsv1-btn { white-space: nowrap; }
.dsv1-empty-a .dsv1-btn { padding-inline: 18px; }
/* Life Map: 地面が画面の高さを使い切るようにして、下の死角をなくす。 */
.dsv1-lm-emptycanvas { min-height: min(600px, calc(100dvh - 210px)); }
/* ============================================================================================
モック整合（数値はすべて design-review/mock.css＝添付画像②の転記から取る）
UI Polish で独自に詰めた値が、モックの数値から離れていた箇所を元に戻す。
ここでは「モックにある数値」以外を書かない。
============================================================================================ */
/* ---- Home ---------------------------------------------------------------------------------- */
/* mock: .home-head { padding: 14px 20px 4px } / .home-logo { 26px / 800 } */
.dsv1-home-head { min-height: 0; padding: 14px 20px 4px; }
.dsv1-home-logo { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
/* mock: .home-greet { padding: 10px 20px 0; 13px } */
.dsv1-home-greet { margin: 0; padding: 10px 20px 0; font-size: 13px; }
/* mock: .home-q { padding: 4px 20px 0; 28px / 700 / 1.32 / -0.01em } */
.dsv1-home-q { margin: 0; padding: 4px 20px 0; font-size: 28px; font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; }
/* mock: .home-search { margin: 18px 20px 0; height: 48px; radius: 999px; padding: 0 18px; 15px; sh-soft } */
.dsv1-home-search {
margin: 18px 20px 0; height: 48px; min-height: 48px; width: calc(100% - 40px);
border-radius: var(--ds-r-chip); border: 1px solid var(--ds-g200); background: var(--ds-white);
padding: 0 18px; font-size: 15px; box-shadow: var(--ds-elev-soft);
}
/* mock: .cta { margin: 14px 20px 0; height: 50px; radius: r-btn(20px); 16px / 600; gap 8px } */
.dsv1-home-cta { margin: 14px 20px 0; }
.dsv1-home-cta .dsv1-btn {
height: 50px; min-height: 50px; width: 100%;
border-radius: var(--ds-r-btn); font-size: 16px; font-weight: 600; gap: 8px;
}
/* mock: .sechead { padding: 24px 20px 10px } / .st { 18px / 600 } / .more { 13px } */
.dsv1-sechead { margin: 0; padding: 24px 20px 10px; }
.dsv1-h3, .dsv1-sechead-title { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.dsv1-sechead .dsv1-btn-text { font-size: 13px; }
/* mock: .mediacard { margin: 0 20px 12px; padding: 12px; radius: 16px; border 1px g100; sh-soft } */
.dsv1-home-list { gap: 0; }
.dsv1-card--compact {
min-height: 0; margin: 0 20px 12px; padding: 12px; border-radius: 16px;
background: var(--ds-white); border: 1px solid var(--ds-g100);
box-shadow: var(--ds-elev-soft);
}
/* mock: 本文 15px / メタ 12.5px（.shell a.card b / span と同じ密度） */
.dsv1-card--compact .dsv1-card-title { font-size: 15px; }
.dsv1-card--compact .dsv1-card-meta { font-size: 12.5px; }
/* ---- Chips（Search）------------------------------------------------------------------------- */
/* mock: .chips { gap: 8px; padding: 14px 20px 0 } / .chip { height: 34px; padding: 0 16px; 13px / 500 } */
.dsv1-chips { gap: 8px; padding: 14px 20px 0; }
.dsv1-chip { height: 34px; padding: 0 16px; border-radius: var(--ds-r-chip); font-size: 13px; font-weight: 500; }
/* ---- 画面名（topbar 相当）------------------------------------------------------------------- */
/* mock: 画面タイトルは h1 = 28px / 700。Polish で 21px まで下げていたのを戻す。 */
.dsv1-search-title, .dsv1-lifemap-title, .dsv1-pf-title, .dsv1-tl-title {
font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
}
.dsv1-search-head, .dsv1-lifemap-head, .dsv1-pf-head, .dsv1-tl-head { padding: 14px 20px 4px; }
/* Profile 配下のヘッダーは戻るを抱えるので、行の高さだけ確保する（数値は据え置き）。 */
.dsv1-pf-subhead { align-items: center; }
.dsv1-pf-subhead .dsv1-tl-title { font-size: 22px; }
/* ---- Friends のカード ------------------------------------------------------------------------ */
/* mock: カード面は radius 16px / border 1px g100 / sh-soft */
.friends-feed-card {
border-radius: 16px; border: 1px solid var(--ds-g100);
box-shadow: var(--ds-elev-soft);
padding: 12px;
}
/* ---- 空状態 ---------------------------------------------------------------------------------- */
/* 空状態はモックに無い画面なので、モックの「面」の数値（card radius 24px / soft 背景 / sh-soft）に合わせる。 */
.dsv1-empty { border-radius: var(--ds-r-card); }
.dsv1-empty--purple, .dsv1-empty { background: var(--ds-purple-soft); }
.dsv1-empty--green { background: var(--ds-green-soft); }
.dsv1-empty--blue { background: var(--ds-blue-soft); }
.dsv1-home-empty { border-radius: var(--ds-r-card); background: var(--ds-purple-soft); }
.dsv1-empty-t { font-size: 18px; font-weight: 600; line-height: 1.35; }
.dsv1-empty-n { font-size: 13px; line-height: 1.5; }
.dsv1-empty-hint { font-size: 11px; font-weight: 500; line-height: 1.4; }
.dsv1-empty-a .dsv1-btn { height: 50px; min-height: 50px; border-radius: var(--ds-r-btn); font-size: 16px; font-weight: 600; }
/* ============================================================================================
Screen Recreation — Home のみ
モック（design-review/mock-shot.html?s=home）を実測し、同じ座標・同じ寸法になるまで寄せる。
数値の右のコメントはモックの実測値。Home 以外の画面には一切かからないよう、すべて
.dsv1-home 配下に閉じている。
============================================================================================ */
/* 外側コンテナの左右余白を Home でだけ外す。
これが最大のズレだった: 画面の器が 14px 内側に寄せていたため、モックで x=20 のカードが
実装では x=54 に出ていた。Home の中身は自前で 20px を持つので、器の余白は要らない。 */
.app-shell:has(.dsv1-home),
.primary-panel:has(.dsv1-home) { padding-left: 0; padding-right: 0; }
/* 節そのものが持っていた左右 20px を外す。中の要素が自分で 20px を持つので、
そのままだと 40px になり、モックの x=20 に乗らない。 */
.dsv1-home .dsv1-home-sec, .dsv1-home .dsv1-home-cta { padding-left: 0; padding-right: 0; }
/* ---- 検索バー: モックは内容ぶんだけの幅（350px ではなく 201px） --------------------------- */
.dsv1-home .dsv1-home-search {
width: fit-content; /* mock: w=201（テキスト＋アイコンに合わせて縮む） */
min-width: 0;
margin: 18px 20px 0; /* mock: x=20 / y=230 */
}
/* ---- ＋Record ボタン: mock x=20 / w=350 / h=50 / r=20 / 16px 600 / gap 8 ------------------- */
.dsv1-home .dsv1-home-cta { margin: 14px 20px 0; }
.dsv1-home .dsv1-home-cta .dsv1-btn { width: 100%; }
/* ---- セクション見出し: mock padding 24px 20px 10px / st 18px 600 / more 13px 400 ---------- */
.dsv1-home .dsv1-sechead { padding: 24px 20px 10px; }
.dsv1-home .dsv1-sechead .dsv1-btn-text { font-weight: 400; padding: 0; }
/* ---- Record カード -------------------------------------------------------------------------
mock: .rcard x=20 w=350 h=80 radius=16 padding=10 縦のピッチ 90px（80 + 10）
.thumb 52x52 radius=12、本文まで 12px
.rc-t 15px / h21 .rc-m 12px / h17 .rc-i アイコン14px・ピッチ22px
------------------------------------------------------------------------------------------ */
.dsv1-home .dsv1-home-list { gap: 0; }
.dsv1-home .dsv1-card--compact {
margin: 0 20px 10px; /* mock: ピッチ 90px = 高さ80 + 余白10 */
padding: 10px; /* mock: 10px */
min-height: 80px; /* mock: 80px */
width: auto; /* 100% だと margin ぶん右へはみ出す（mock: w=350） */
border-radius: 16px;
gap: 12px; /* mock: サムネ右端 83 → 本文 95 */
}
.dsv1-home .dsv1-card--compact .dsv1-card-thumb {
width: 52px; height: 52px; border-radius: 12px; /* mock: 52x52 / r12 */
}
.dsv1-home .dsv1-card--compact .dsv1-card-body { gap: 0; justify-content: center; }
.dsv1-home .dsv1-card--compact .dsv1-card-title { font-size: 15px; line-height: 1.4; } /* mock: h21 */
.dsv1-home .dsv1-card--compact .dsv1-card-meta { font-size: 12px; line-height: 1.42; } /* mock: 12px / h17 */
.dsv1-home .dsv1-card--compact .dsv1-card-icons { gap: 8px; } /* mock: ピッチ22 = 14+8 */
.dsv1-home .dsv1-card--compact .dsv1-card-icons .dsv1-ic { width: 14px; height: 14px; } /* mock: 14px */
/* ---- 空状態: 幅と余白をカードと同じ 20px の柱に乗せる ------------------------------------- */
/* 空状態は、Record が3枚並ぶ領域（mock: 80x3 + 10x2 = 260px）をそのまま満たす。
下に大きな死角を残さないので、0件でも画面が完成して見える。 */
.dsv1-home .dsv1-home-empty {
margin: 0 20px; min-height: 260px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* ============================================================================================
Screen Recreation — Search のみ
数値の出所は design-review/mock.css の Search 節（.sfield / .chips / .chip / .scount / .scard …）
と、それを描いたモック画面の実測値。Search 以外にかからないよう .dsv1-search 配下へ閉じている。
============================================================================================ */
/* Home と同じ理由: 器が左右 14px 内側へ寄せていて、モックで x=20 のものが x=34 に出ていた。 */
.app-shell:has(.dsv1-search),
.primary-panel:has(.dsv1-search) { padding-left: 0; padding-right: 0; }
/* ---- 検索フィールド行 ---------------------------------------------------------------------- */
/* mock: .sfield-row { gap: 10px; padding: 4px 20px 0 } / .sfield { h46 / r999 / padding 0 14px / gap 9 }
.filterbtn { 40x40 } 実測: フィールド x=20 w=300、フィルタ x=330 */
.dsv1-search .dsv1-search-fieldrow { gap: 10px; padding: 4px 20px 0; }
/* mock: .sfield { flex: 1 } — 狭い端末ではフィールドが縮んで、フィルタボタンと重ならない。 */
.dsv1-search .dsv1-field { height: 46px; border-radius: var(--ds-r-chip); padding: 0 14px; gap: 9px; }
.dsv1-search .dsv1-search-fieldrow .dsv1-field-form { flex: 1 1 auto; min-width: 0; }
.dsv1-search .dsv1-search-fieldrow .dsv1-field { flex: 1 1 auto; min-width: 0; width: auto; }
.dsv1-search .dsv1-search-filterbtn { flex: 0 0 auto; }
.dsv1-search .dsv1-field input { font-size: 15px; }
/* input[type=search] のブラウザ標準クリアボタンを消す。実装側の × と二重に出ていた。 */
.dsv1-search .dsv1-field input::-webkit-search-cancel-button,
.dsv1-search .dsv1-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.dsv1-search .dsv1-search-filterbtn { width: 40px; height: 40px; padding: 0; }
/* ---- Chip 行 -------------------------------------------------------------------------------- */
/* mock: .chips { gap: 8px; padding: 14px 20px 0 } / .chip { h34 / padding 0 16px / 13px 500 / r999 }
.chip.on は青地に白・600 */
/* 検索バーとの間隔はここだけで決める。10(外) + 4(内) = 14px。
内側の 4px は overflow-x による切り取りから、選択中チップの影と輪郭を守るぶん。 */
.dsv1-search [data-search-categories] { gap: 8px; margin-top: 10px; padding: 4px 20px; }
.dsv1-search .dsv1-chip { height: 34px; padding: 0 16px; border-radius: var(--ds-r-chip); font-size: 13px; font-weight: 500; }
/* ---- 件数行 --------------------------------------------------------------------------------- */
/* mock: .scount { padding: 16px 20px 8px; font-size: 13px; color: g600 } */
.dsv1-search .dsv1-scount { padding: 16px 20px 8px; font-size: 13px; color: var(--ds-g600); }
/* ---- 結果カード ------------------------------------------------------------------------------
mock: .scard { margin: 0 20px 12px; padding: 12px; radius 16; border 1px g100; sh-soft; gap 12;
width: calc(100% - 40px) } 実測: x=20 / w=350 / h=125 / 縦ピッチ 137
.thumb 64x64 r12 / .sc-main gap 3 / .sc-t 15px 600 / .sc-d 12px / .sc-p 12px / .sc-i gap 8
------------------------------------------------------------------------------------------- */
.dsv1-search .dsv1-slist { padding: 0; gap: 0; }
.dsv1-search .dsv1-card--search {
margin: 0 20px 12px; padding: 12px; width: calc(100% - 40px);
border-radius: 16px; background: var(--ds-white);
border: 1px solid var(--ds-g100); box-shadow: var(--ds-elev-soft);
}
.dsv1-search .dsv1-card--search .dsv1-card-row { gap: 12px; align-items: flex-start; }
.dsv1-search .dsv1-card--search .dsv1-card-thumb { width: 64px; height: 64px; border-radius: 12px; }
.dsv1-search .dsv1-card--search .dsv1-card-body { gap: 3px; }
.dsv1-search .dsv1-card--search .dsv1-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.dsv1-search .dsv1-card--search .dsv1-card-meta { font-size: 12px; line-height: 1.42; }
/* 行の高さをモックの実測に合わせる: 場所/タグ行 17px、アイコン行 13px。
（12px x 1.42 = 17.04、アイコンは 13px）これで body が 97px になり、カードが 125px に収まる。 */
.dsv1-search .dsv1-card--search .dsv1-card-line { font-size: 12px; line-height: 17px; }
.dsv1-search .dsv1-card--search .dsv1-card-icons { gap: 8px; margin-top: 0; line-height: 13px; }
.dsv1-search .dsv1-card--search .dsv1-card-icons .dsv1-ic { width: 13px; height: 13px; }
.dsv1-search .dsv1-card--search .dsv1-card-icons .dsv1-ic { width: 14px; height: 14px; }
/* 一致理由・メディア手掛かりの帯も、カードの中の同じ12pxの柱に乗せる（機能は変えない）。 */
/* 整理状態・一致理由の帯はモックのカードには無いが、Search では残す約束の機能。
行として増える高さを最小にする（消さずに詰める）。 */
/* カード自身が grid（音声プレーヤ用の 34px 先頭列）だったため、サムネが 33px ではなく 90px から
始まっていた。カードは縦積みにして、中の行がカードの padding 端から始まるようにする。 */
.dsv1-search .dsv1-slist .dsv1-card--search {
display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
}
.dsv1-search .dsv1-card--search > * { grid-column: auto; }
.dsv1-search .dsv1-card--search .dsv1-card-foot { margin-top: 4px; gap: 6px; }
.dsv1-search .dsv1-card--search .dsv1-card-foot .ai-status { font-size: 11px; line-height: 1.4; padding: 0; }
/* ---- 探索UI（検索前）--------------------------------------------------------------------------
モックには検索前の画面が無いので、モックの「面」の数値（節見出し 18px/600・padding 24/20/10、
カード面 radius 16 / sh-soft）に合わせる。中身は既存データだけを使う既存実装のまま。 */
.dsv1-search .dsv1-explore { padding: 4px 0 0; gap: 20px; }
.dsv1-search .dsv1-explore .dsv1-sechead { padding: 24px 20px 10px; }
/* ---- 空状態 ---------------------------------------------------------------------------------- */
/* mock: .sempty { padding: 60px 32px; text-align: center; color: #9CA3AF; font-size: 14px } */
.dsv1-search .dsv1-empty { margin: 0 20px; }
/* 検索結果なし。既存の文言（別の言葉で / 場所・日付・タグ・写真内の文字）はそのまま、
モックの .sempty の面と余白に乗せる。 */
.dsv1-search .search-empty {
padding: 60px 32px; margin: 0; text-align: center; font-size: 14px; color: #9ca3af;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.dsv1-search .search-empty strong { font-size: 16px; font-weight: 600; color: var(--ds-text); line-height: 1.5; }
.dsv1-search .search-empty span { font-size: 13px; line-height: 1.7; color: var(--ds-g600); max-width: 30ch; }
/* ---- 長い内容で崩れない ------------------------------------------------------------------------
mock: .sc-t / .sc-p / .sc-g は white-space:nowrap + ellipsis。長いタイトル・長い場所・長いタグでも
行数が増えず、カード高さが一定に保たれる（カード外へはみ出さない・隣と重ならない）。 */
.dsv1-search .dsv1-card--search .dsv1-card-title,
.dsv1-search .dsv1-card--search .dsv1-card-meta,
.dsv1-search .dsv1-card--search .dsv1-card-line {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dsv1-search .dsv1-card--search .dsv1-card-body { min-width: 0; }
.dsv1-search .dsv1-field input { min-width: 0; }
/* 一致理由は折り返してよいが、カード幅は超えない。 */
.dsv1-search .dsv1-card--search .dsv1-card-foot { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
/* ============================================================================================
Screen Recreation — Life Map のみ（案A: 承認済みの抽象キャンバス方式が前提）
数値の出所は design-review/mock.css の Life Map 節（.lmap / .placecard / .pin / .pin-n /
.pinhot / .mapfab / .maplabel）。実地図タイル・実在の地名は再現対象外（地図SDKを入れない
という承認済みの方針のため）。CSS はすべて .dsv1-lifemap 配下に閉じている。
============================================================================================ */
/* Home / Search と同じ器の 14px ずれを解消する（モックで x=20 のものが x=34 に出ていた）。 */
.app-shell:has(.dsv1-lifemap),
.primary-panel:has(.dsv1-lifemap) { padding-left: 0; padding-right: 0; }
/* ---- 節と見出し ------------------------------------------------------------------------------ */
/* mock: .sechead { padding: 24px 20px 10px } / 見出し 18px 600 */
.dsv1-lifemap .dsv1-lm-sec { padding: 0; }
.dsv1-lifemap .dsv1-lm-head { padding: 24px 20px 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dsv1-lifemap .dsv1-lm-h { font-size: 18px; font-weight: 600; line-height: 1.35; }
.dsv1-lifemap .dsv1-lm-n { font-size: 13px; color: var(--ds-g600); }
/* ---- 場所カード ------------------------------------------------------------------------------
mock: .placecard { border-radius: 20; box-shadow: sh-strong; padding: 14px 14px 12px }
.pc-t 17px/700 / .pc-c 12px g600 / .pc-ph { gap: 8; margin-top: 10 } / 写真 76x62 r12
------------------------------------------------------------------------------------------- */
.dsv1-lifemap .dsv1-lm-places { padding: 0; gap: 0; }
.dsv1-lifemap .dsv1-lm-place {
margin: 0 20px 12px; width: calc(100% - 40px); padding: 14px 14px 12px;
border-radius: 20px; background: var(--ds-white);
/* mock の sh-strong は「地図の上に浮く1枚の場所カード」用。一覧に並ぶカードは他画面と同じ
sh-soft にする（一覧全部が浮いていると、選択中のカードとの差が出せない）。 */
border: 1px solid var(--ds-g100); box-shadow: var(--ds-elev-soft);
}
/* 選択中の場所だけは、mock の浮く場所カードと同じ強さで前に出す（色だけに頼らない表現）。 */
.dsv1-lifemap .dsv1-lm-place[aria-current="true"],
.dsv1-lifemap .dsv1-lm-place.is-selected {
box-shadow: var(--ds-elev-strong); border-color: var(--ds-green);
}
.dsv1-lifemap .dsv1-lm-place-name { font-size: 17px; font-weight: 700; line-height: 1.35; }
.dsv1-lifemap .dsv1-lm-place-meta { font-size: 12px; color: var(--ds-g600); margin-top: 2px; }
.dsv1-lifemap .dsv1-lm-place-ph { width: 76px; height: 62px; border-radius: 12px; flex: 0 0 auto; }
.dsv1-lifemap .dsv1-lm-place-body { min-width: 0; }
/* 長い場所名でもカードの外へ出ない・隣と重ならない。 */
.dsv1-lifemap .dsv1-lm-place-name,
.dsv1-lifemap .dsv1-lm-place-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Record の行（.dsv1-slite）: Search の結果カードと同じ密度に揃える -------------------- */
.dsv1-lifemap .dsv1-slite {
margin: 0 20px 12px; width: calc(100% - 40px); padding: 12px;
border-radius: 16px; background: var(--ds-white);
border: 1px solid var(--ds-g100); box-shadow: var(--ds-elev-soft);
}
.dsv1-lifemap .dsv1-slite-thumb { width: 64px; height: 64px; border-radius: 12px; flex: 0 0 auto; }
.dsv1-lifemap .dsv1-slite-t { font-size: 15px; font-weight: 600; line-height: 1.4; }
.dsv1-lifemap .dsv1-slite-d { font-size: 12px; line-height: 17px; color: var(--ds-g600); }
.dsv1-lifemap .dsv1-slite-main { min-width: 0; }
.dsv1-lifemap .dsv1-slite-t,
.dsv1-lifemap .dsv1-slite-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- アルバム帯 ------------------------------------------------------------------------------ */
.dsv1-lifemap .dsv1-lm-album-head { padding: 0 20px 8px; }
.dsv1-lifemap .dsv1-lm-album-name { font-size: 15px; font-weight: 600; }
.dsv1-lifemap .dsv1-explore-photos { padding: 0 20px; gap: 8px; }
.dsv1-lifemap .dsv1-explore-photo { border-radius: 12px; }
/* ---- 空状態のキャンバス ----------------------------------------------------------------------
mock: .lmap { top: 56px; left/right/bottom: 0; background: #EAEFEA } -- 画面いっぱいの地の面。
角丸も左右の余白も持たない（端まで地面が続く）。案内はその手前に置く。
------------------------------------------------------------------------------------------- */
.dsv1-lifemap .dsv1-lm-emptycanvas {
margin: 0; border-radius: 0; border: 0;
background: #eaefea;
/* ヘッダー下から Bottom Navigation まで、地の面が途切れずに続く（mock の .lmap と同じ）。
画面の下端余白ぶんは負のマージンで打ち消し、白い帯が残らないようにする。 */
min-height: calc(100dvh - 162px); margin-bottom: -104px;
}
.dsv1-lifemap .dsv1-lm-emptycanvas > .dsv1-empty { background: none; margin: 0; }
/* 案内は白い面に乗せて、地の面から浮かせる（mock .placecard と同じ面の作り）。 */
.dsv1-lifemap .dsv1-lm-emptycanvas .dsv1-empty {
background: rgba(255, 255, 255, 0.92);
border-radius: 20px; box-shadow: var(--ds-elev-strong);
padding: 22px 22px 24px; margin: 0 20px; max-width: 330px;
}
.dsv1-lifemap .dsv1-empty-t { font-size: 17px; font-weight: 700; }
.dsv1-lifemap .dsv1-empty-n { font-size: 13px; line-height: 1.7; }
.dsv1-lifemap .dsv1-empty-hint { font-size: 11px; font-weight: 500; }
/* ---- ピン（lens が有効なときの見た目。既定ゲートには触れない）------------------------------
mock: .pin 56x66 / .pin-ph 56x56 円・3px 白枠・sh-med / 下向きの白い三角
.pin.sel .pin-ph は緑枠 / .pin-n min-w24 h24 r999 2px白枠 紫地 11px 700
.pinhot 56x66（＝操作領域は 44px 以上）
------------------------------------------------------------------------------------------- */
.dsv1-lifemap .life-map-pin { width: 56px; height: 66px; }
.dsv1-lifemap .life-map-pin-dot,
.dsv1-lifemap .dsv1-mappin-ph {
width: 56px; height: 56px; border-radius: 999px;
border: 3px solid #fff; box-shadow: var(--ds-elev-med); overflow: hidden;
}
.dsv1-lifemap .life-map-pin.is-selected .life-map-pin-dot,
.dsv1-lifemap .life-map-pin.is-selected .dsv1-mappin-ph { border-color: var(--ds-green); }
.dsv1-lifemap .life-map-pin-badge {
min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
border: 2px solid #fff; background: var(--ds-purple);
color: #fff; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.dsv1-lifemap .life-map-pin-label { font-size: 11px; font-weight: 600; color: #7ba37a; white-space: nowrap; }
/* 選択は色だけに頼らない: 緑の枠に加えてリングを出す。 */
.dsv1-lifemap .life-map-pin.is-selected::after {
content: ""; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
width: 62px; height: 62px; border-radius: 999px;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.55); pointer-events: none;
}
.dsv1-lifemap .life-map-pin:focus-visible { outline: 3px solid rgba(34, 197, 94, 0.6); outline-offset: 2px; }
/* ---- 動きは控えめに（reduced-motion では止める）-------------------------------------------- */
.dsv1-lifemap .dsv1-lm-place, .dsv1-lifemap .dsv1-slite { animation: dsv1-rise 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
.dsv1-lifemap .dsv1-lm-place, .dsv1-lifemap .dsv1-slite { animation: none !important; }
}
/* ============================================================================================
Screen Recreation — Friends のみ
数値の出所は design-review/mock.css の Timeline 節（モックの Timeline 画面＝いまの Friends）:
.tlpost / .tp-head / .avatar / .tp-who / .tp-time / .tp-text / .tp-foot / .fbtn。
モックの Friends/Me タブと日付グループは、いまの情報設計に無いので再現対象外。
写真グリッドも、友達に出るのは Projection だけで写真を持たないため対象外。
CSS はすべて .dsv1-friends 配下に閉じている。
============================================================================================ */
/* Home / Search / Life Map と同じ器の 14px ずれを解消。 */
.app-shell:has(.dsv1-friends),
.primary-panel:has(.dsv1-friends) { padding-left: 0; padding-right: 0; }
/* フィード自身が持っていた 16px を外す（カードが自分で 20px を持つので二重になっていた）。 */
.dsv1-friends .friends-feed { padding: 0; }
/* 管理導線もカードと同じ 20px の柱に乗せる（右端で切れていた）。 */
.dsv1-friends .friends-feed-bar { padding: 0 20px; margin: 0 0 8px; }
/* ---- 投稿カード -------------------------------------------------------------------------------
mock: .tlpost { margin: 0 20px 14px; padding: 12px; radius 16; border 1px g100; sh-soft;
width: calc(100% - 40px) }
------------------------------------------------------------------------------------------- */
.dsv1-friends .friends-feed-list { gap: 0; }
.dsv1-friends .friends-feed-card {
margin: 0 20px 14px; width: calc(100% - 40px); padding: 12px;
border-radius: 16px; background: var(--ds-white);
border: 1px solid var(--ds-g100); box-shadow: var(--ds-elev-soft);
}
/* mock: .tp-head { gap: 10 } / .avatar 38x38 / .tp-who 14px（名前は 700）/ .tp-time 12px #9CA3AF */
.dsv1-friends .friends-feed-owner { gap: 10px; margin-bottom: 0; align-items: center; }
.dsv1-friends .friends-feed-avatar { width: 38px; height: 38px; font-size: 14px; }
.dsv1-friends .friends-feed-name { font-size: 14px; font-weight: 700; color: var(--ds-text); }
.dsv1-friends .friends-feed-date { font-size: 12px; color: #9ca3af; margin: 0; }
/* mock: .tp-text { font-size: 14px; margin-top: 8px } — 何を記録したかは本文と同じ静かさで置く。 */
.dsv1-friends .friends-feed-title {
font-size: 14px; font-weight: 600; line-height: 1.55; margin: 8px 0 0; letter-spacing: 0;
}
.dsv1-friends .friends-feed-tags { margin-top: 8px; gap: 6px; }
.dsv1-friends .friends-feed-tags span { font-size: 12px; color: var(--ds-g600); }
/* ---- リアクション ------------------------------------------------------------------------------
mock: .tp-foot { gap: 18; margin-top: 10; color: #9CA3AF; font-size: 13px }
.fbtn は塗りのないフラットな並び。いいね済みだけ pink。
ただし操作領域は 44px 以上を保つ（見た目は小さいまま、上下に当たり判定を広げる）。
------------------------------------------------------------------------------------------- */
.dsv1-friends .friends-feed-reactions { gap: 18px; margin-top: 10px; }
.dsv1-friends .friends-feed-reactions .feed-reaction {
min-height: 44px; padding: 0; margin: -5px 0; gap: 5px;
border: 0; background: none; border-radius: 8px;
color: #9ca3af; font-size: 13px;
}
.dsv1-friends .friends-feed-reactions .feed-reaction.is-liked { color: var(--ds-pink); }
.dsv1-friends .friends-feed-reactions .feed-reaction:focus-visible {
outline: 3px solid rgba(124, 92, 255, 0.5); outline-offset: 2px;
}
/* ---- 空状態 ------------------------------------------------------------------------------------
「友達の今日は、まだ届いていません」を主役に、静かな面の上へ置く。ダミー投稿は出さない。 */
.dsv1-friends .dsv1-empty {
margin: 0 20px; border-radius: var(--ds-r-card);
background: var(--ds-purple-soft);
min-height: 300px; justify-content: center;
}
.dsv1-friends .dsv1-empty-t { font-size: 17px; font-weight: 700; }
.dsv1-friends .dsv1-empty-n { font-size: 13px; line-height: 1.7; }
/* ---- 長文・長いタグで崩れない ------------------------------------------------------------------ */
.dsv1-friends .friends-feed-title { overflow-wrap: anywhere; }
.dsv1-friends .friends-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dsv1-friends .friends-feed-owner { min-width: 0; }
/* ---- 動きは控えめに（reduced-motion では止める）------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.dsv1-friends .friends-feed-card { animation: none !important; }
}
/* ============================================================================================
Screen Recreation — Profile のみ
数値の出所は design-review/mock.css の Profile 節（.pf-avatar / .pf-name / .pf-bio /
.pf-sec / .pf-tags .chip / .pf-hl）。
再現対象外: カバー写真（@me はユーザー写真を預からない）／@ID（データに無い）／
アバター編集バッジ（その機能が無い）。無い機能のUIは作らない。
CSS はすべて .dsv1-profile 配下に閉じている。
============================================================================================ */
/* 他4画面と同じ器の 14px ずれを解消（mock で x=20 のものが x=30 に出ていた）。 */
.app-shell:has(.dsv1-profile),
.primary-panel:has(.dsv1-profile) { padding-left: 0; padding-right: 0; }
/* ---- 入口としての顔（アバター → 名前 → 説明）--------------------------------------------------
mock: .pf-avatar 92x92 / 4px 白枠 / sh-soft、.pf-name 22px 700 mt10、.pf-bio 13px g600 mt6
------------------------------------------------------------------------------------------- */
.dsv1-profile .dsv1-pf-identity { padding: 18px 20px 4px; }
.dsv1-profile .dsv1-pf-avatar {
width: 92px; height: 92px; font-size: 40px;
border: 4px solid #fff; box-shadow: var(--ds-elev-soft);
}
.dsv1-profile .dsv1-pf-name { font-size: 22px; font-weight: 700; margin-top: 10px; }
.dsv1-profile .dsv1-pf-summary { font-size: 13px; color: var(--ds-g600); margin-top: 6px; line-height: 1.7; }
/* ---- 節 ---------------------------------------------------------------------------------------
mock: .pf-sec { padding: 22px 20px 0 } / .st { 16px 600 }
------------------------------------------------------------------------------------------- */
.dsv1-profile .dsv1-pf-sec { padding: 22px 20px 0; margin: 0; width: auto; }
.dsv1-profile .dsv1-pf-h,
.dsv1-profile .dsv1-pf-sec h2 { font-size: 16px; font-weight: 600; line-height: 1.35; padding: 0; }
/* mock: .pf-tags .chip { height: 32px } / .pf-tags { gap: 8; margin-top: 10 } */
.dsv1-profile .dsv1-pf-chips { gap: 8px; margin-top: 10px; }
.dsv1-profile .dsv1-pf-chips button.chip { height: 44px; padding: 6px 14px; }
.dsv1-profile .dsv1-pf-chips .chip { font-size: 13px; font-weight: 500; }
/* mock: .pf-hl { gap: 8; margin-top: 10 } / .pf-hl .photo { 68x68 / r12 } */
.dsv1-profile .dsv1-pf-places { gap: 8px; margin-top: 10px; }
.dsv1-profile .dsv1-pf-place .ph { width: 68px; height: 68px; border-radius: 12px; }
/* ---- Record Library（人生の入口。モックには無いので DS の面の値で整える）-------------------- */
.dsv1-profile .dsv1-pf-library { padding: 22px 20px 0; }
.dsv1-profile .dsv1-pf-liblist { gap: 8px; margin-top: 10px; }
.dsv1-profile .dsv1-pf-libitem {
min-height: 58px; padding: 12px 14px; border-radius: 16px;
background: var(--ds-white); border: 1px solid var(--ds-g100); box-shadow: var(--ds-elev-soft);
}
.dsv1-profile .dsv1-pf-liblabel { font-size: 15px; font-weight: 600; }
.dsv1-profile .dsv1-pf-libnote { font-size: 12px; color: var(--ds-g600); }
/* ---- 空状態: 0件でも「入口」として完成して見えるように ---------------------------------------- */
.dsv1-profile .dsv1-pf-empty { padding: 0 20px; }
.dsv1-profile .dsv1-empty { margin: 0; border-radius: var(--ds-r-card); min-height: 240px; justify-content: center; }
.dsv1-profile .dsv1-empty-t { font-size: 17px; font-weight: 700; }
.dsv1-profile .dsv1-empty-n { font-size: 13px; line-height: 1.7; }
/* ---- 長いユーザー名でも崩れない ---------------------------------------------------------------- */
.dsv1-profile .dsv1-pf-name { overflow-wrap: anywhere; }
/* ---- 動きは控えめに（reduced-motion では止める）------------------------------------------------ */
.dsv1-profile .dsv1-pf-libitem { animation: dsv1-rise 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
.dsv1-profile .dsv1-pf-libitem { animation: none !important; }
}
/* ============================================================================================
Visual Gap Review Phase 1 — 「画面全体の印象」を直す層
px の一致ではなく、第一印象・世界観・視線誘導・情報密度・余白・感情を整える。
新しい機能・データ・導線は足していない。
============================================================================================ */
/* ---- Life Map: 一覧ではなく「地図を見ている」画面へ ------------------------------------------
画面の地に抽象キャンバスを敷き、場所のカードをその上に浮かせる。実在の地形も地名も描かない。 */
.dsv1-lifemap { position: relative; }
/* 地の層はヘッダーの下から画面の下端まで。ヘッダー自身は白い面として地の上に置くので、
固定の 56px に頼らずタイトルが切れない。 */
.dsv1-lifemap .dsv1-lifemap-head { position: relative; z-index: 2; background: var(--ds-white); }
.dsv1-lm-ground {
position: absolute; left: 0; right: 0; top: 0; bottom: -104px;
background: linear-gradient(180deg, #eef3ef 0%, #eaefea 42%, #e7ece8 100%);
overflow: hidden; pointer-events: none; z-index: 0;
}
/* 地の層の3枚。ゲートされた地図レンズ（.dsv1-lm-canvas*）とは別クラスにしてある。
見た目は同じ考え方（淡いグラデ + 同心円 + 粒）だが、角丸を持たず画面いっぱいに敷く。 */
.dsv1-lm-ground-base {
position: absolute; inset: 0;
background:
radial-gradient(120% 92% at 22% 16%, rgba(34, 197, 94, 0.13), transparent 62%),
radial-gradient(105% 85% at 84% 74%, rgba(59, 130, 246, 0.08), transparent 64%),
radial-gradient(90% 70% at 55% 105%, rgba(124, 92, 255, 0.06), transparent 60%);
}
.dsv1-lm-ground-contours {
position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
background-image:
repeating-radial-gradient(circle at 30% 34%, rgba(17, 24, 39, 0.05) 0 1px, transparent 1px 26px),
repeating-radial-gradient(circle at 76% 70%, rgba(17, 24, 39, 0.04) 0 1px, transparent 1px 34px);
}
.dsv1-lm-ground-grain {
position: absolute; inset: 0; opacity: 0.45; pointer-events: none;
background-image: radial-gradient(rgba(17, 24, 39, 0.055) 0.5px, transparent 0.6px);
background-size: 3px 3px;
}
.dsv1-lm-ground > * { position: absolute; inset: 0; opacity: 0.55; }
/* 地の面の上へ、下に行くほど白へ溶ける。カードの可読性と「奥行き」を同時に作る。 */
.dsv1-lm-ground::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 100%);
}
.dsv1-lm-overlay { position: relative; z-index: 1; }
/* 地の上に置くものは、白い面で浮かせる（地図の上のカードに見えるように）。 */
.dsv1-lifemap .dsv1-lifemap-search {
margin: 14px 20px 0; background: rgba(255, 255, 255, 0.96);
box-shadow: var(--ds-elev-soft); border: 1px solid rgba(255, 255, 255, 0.9);
}
.dsv1-lifemap .dsv1-lm-h { color: var(--ds-text); }
.dsv1-lifemap .dsv1-lm-head { padding-top: 20px; }
.dsv1-lifemap .dsv1-lm-place { background: rgba(255, 255, 255, 0.97); backdrop-filter: saturate(1.05); }
/* ---- Friends: 静かなタイムライン ---------------------------------------------------------------
届いた日で束ね、見出しは主張しない小さな文字。カードの間だけを少し広げて、時間の切れ目を作る。 */
.dsv1-friends .friends-feed-day {
margin: 0; padding: 18px 20px 8px;
font-size: 13px; font-weight: 600; color: var(--ds-g600);
}
.dsv1-friends .friends-feed-day:first-child { padding-top: 4px; }
.dsv1-friends .friends-feed-list + .friends-feed-day { padding-top: 10px; }
/* ---- Profile: 設定画面ではなく「人生の入口」 -----------------------------------------------
入口（記録ライブラリ）を顔のすぐ下へ上げ、好きな場所は横に流れる帯にする。
並び替えは CSS の order だけで、DOM も内容も変えていない。 */
.dsv1-profile .v3-profile,
.dsv1-profile { display: flex; flex-direction: column; }
.dsv1-profile .dsv1-pf-head { order: 0; }
.dsv1-profile .dsv1-pf-identity { order: 1; }
/* ライブラリは .dsv1-pf-sec でもあるので、詳細度を上げないと順番が負ける。 */
.dsv1-profile section.dsv1-pf-library { order: 2; }
.dsv1-profile .dsv1-pf-sec { order: 3; }
.dsv1-profile .dsv1-pf-settings, .dsv1-profile .profile-settings-entry { order: 9; }
/* 入口は「押せる場所」として少し強く。 */
.dsv1-profile .dsv1-pf-libitem {
min-height: 62px; border-radius: 18px;
background: linear-gradient(180deg, #fff, #fcfcfe);
}
.dsv1-profile .dsv1-pf-libitem:active { transform: scale(0.985); }
/* 好きな場所は 2列グリッドではなく、横に流れる帯（mock .pf-hl の考え方）。 */
.dsv1-profile .dsv1-pf-places {
display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
padding: 0 20px 2px; margin: 10px -20px 0; gap: 10px;
}
.dsv1-profile .dsv1-pf-places::-webkit-scrollbar { display: none; }
.dsv1-profile .dsv1-pf-place { flex: 0 0 auto; width: 132px; }
.dsv1-profile .dsv1-pf-place .ph { width: 132px; height: 96px; border-radius: 14px; }
/* ---- Search: 検索結果の視線誘導 ---------------------------------------------------------------
件数 → 結果、の順に目が動くよう、件数行を少しだけ立たせて、結果の塊との間を詰める。 */
.dsv1-search .dsv1-scount { font-weight: 600; color: var(--ds-text); padding-bottom: 6px; }
.dsv1-search .dsv1-slist { padding-top: 2px; }
/* ---- 5画面に共通する「@meらしさ」 -------------------------------------------------------------
面は白、地はごく淡く、影は弱い。どの画面も同じ 20px の柱に乗る。 */
/* DS v1 は光の設計のみ（モックが Light）。リリースは Light 固定なので、画面の地も白で確定させる。
dark を再開するときは、DS のカード・文字・ナビの色ごと設計し直す必要がある。 */
.dsv1-home, .dsv1-search, .dsv1-friends, .dsv1-profile, .dsv1-lifemap { background: var(--ds-white); }
html, body { background: var(--ds-white); }
/* ============================================================================================
UI Polish Fix — Record作成画面
原因: 作成UI（.record-capture）は、いま開いているタブの画面と「並べて」描かれる。つまり
Home の全高（約1700px超）がその上に残り、作成UIはそのはるか下に置かれていた。JS の
スクロールで見える位置まで運んでいたが、上に残った画面ぶんが「画面半分の空白」に見えていた。
直し方: 作成UIが出ている間は、同じ枠の中のタブ画面を出さない。描画も state も routing も
変えず、見えるものだけを切り替える。
============================================================================================ */
/* Record作成中はタブ画面を隠す */
.primary-panel:has(> .record-capture) > .dsv1,
.app-shell:has(> .record-capture) > .dsv1 { display: none; }
/* 作成UIは枠の先頭から始める。 */
.primary-panel > .record-capture { margin-top: 0; }
/* ---- 初回オンボーディング ---------------------------------------------------------------------
既存画面の上に重ねるだけの層。tab も Navigation も増やさない。1画面 = 1メッセージ + 1操作。 */
.dsv1-ob {
position: fixed; inset: 0; z-index: 200;
display: flex; flex-direction: column; justify-content: center;
padding: 32px 28px calc(40px + env(safe-area-inset-bottom, 0px));
background: var(--ds-white); text-align: center;
animation: dsv1-fade 220ms ease-out both;
}
.dsv1-ob-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.dsv1-ob-logo { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-purple); }
.dsv1-ob-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; max-width: 18ch; }
.dsv1-ob-lead { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ds-g600); max-width: 26ch; }
.dsv1-ob-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dsv1-ob-dots { display: flex; gap: 6px; margin-bottom: 6px; }
.dsv1-ob-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ds-g200); }
.dsv1-ob-dot.is-on { background: var(--ds-purple); }
.dsv1-ob-cta { width: 100%; height: 50px; min-height: 50px; border-radius: var(--ds-r-btn); font-size: 16px; font-weight: 600; }
.dsv1-ob-skip { min-height: 44px; font-size: 14px; color: var(--ds-g600); }
@media (prefers-reduced-motion: reduce) { .dsv1-ob { animation: none !important; } }
/* ---- まとめ（compiled Record）の選択モードとシート ------------------------------------------ */
.dsv1-compile-head { display: flex; align-items: center; gap: 8px; padding: 14px 20px 10px; }
.dsv1-compile-x { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px;
border: 0; border-radius: 999px; background: none; color: var(--ds-ink, #12151a); cursor: pointer; }
.dsv1-compile-head-t { flex: 1; font-size: 15px; font-weight: 600; }
/* 履歴のように見出しの行が無い画面で、「選ぶ」を単独で置くときの行。 */
.dsv1-compile-entryrow { display: flex; justify-content: flex-end; padding: 0 20px 8px; }
/* 選択できるカードは、長押し中にテキスト選択や iOS の吹き出しが出ないようにする。 */
.dsv1-compile-selectable { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 見出しの行の右側。「選ぶ」と「すべて見る」が並ぶ。 */
.dsv1-sechead-actions { display: flex; align-items: baseline; gap: 14px; flex: 0 0 auto; }
.dsv1-compile-entry { padding: 0; }
/* 下の帯は Bottom Navigation と同じ場所に、入れ替わりで出る（bottomNavMarkup 側で出し分け）。 */
.dsv1-compile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
background: #fff; border-top: 1px solid var(--ds-g100); box-shadow: var(--ds-elev-med); }
.dsv1-compile-count { font-size: 14px; color: var(--ds-g600); }
.dsv1-compile-go { height: 44px; min-height: 44px; border-radius: var(--ds-r-btn); font-size: 15px; font-weight: 600; padding: 0 20px; }
/* 選択中のカード。色だけに頼らず、チェックの有無でも分かるようにする。
カードの種類（Home の .dsv1-card / 履歴の .dsv1-tlcard / Search の .dsv1-card--search）で
分けない -- 分けると1つ足すたびに選択の見た目が画面ごとにずれていくため、is-compile-* だけで
決める。.dsv1 を前置きしているのは、各カードが自前で持つ background / border に競り負けない
ためで、カードの種類を見ているわけではない。 */
.dsv1 .is-compile-selected, .is-compile-selected {
border-color: var(--ds-purple); background: var(--ds-purple-soft); }
.dsv1 .is-compile-disabled, .is-compile-disabled { opacity: 0.45; }
.dsv1-compile-check { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
border-radius: 999px; border: 2px solid var(--ds-g300); color: #fff; font-size: 15px; }
.is-compile-selected .dsv1-compile-check { background: var(--ds-purple); border-color: var(--ds-purple); }
/* 派生した Record は、自分で残した Record より前に出ない。一覧の並びは変えず、
枠と面の強さだけを一段落とす。消しているのではなく、譲っている。 */
.dsv1-card.is-compiled { background: var(--ds-g50, #f7f7f9); border-color: transparent; box-shadow: none; }
.dsv1-card.is-compiled .dsv1-compiled-thumb { background: transparent; color: var(--ds-g600); }
/* 選択中は、派生かどうかより「選ばれているか」が主。譲りをいったん解く。 */
.dsv1-card.is-compiled.is-compile-selected { background: var(--ds-purple-soft); border-color: var(--ds-purple); }
/* ---- 派生Recordの詳細「もとにしたRecord」 -------------------------------------------------------- */
.dsv1-compiled-note { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: var(--ds-g600); }
.dsv1-compiled-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dsv1-compiled-item { margin: 0; }
.dsv1-compiled-open { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 44px;
padding: 10px 12px; border: 1px solid var(--ds-g100); border-radius: 12px; background: #fff;
text-align: left; cursor: pointer; }
.dsv1-compiled-t { flex: 1; font-size: 14px; color: var(--ds-text); }
.dsv1-compiled-d { flex: 0 0 auto; font-size: 12px; color: var(--ds-g600); }
/* 消えた元Record は行ごと消さずに残す。押せないので、囲みも押せる見た目にしない。 */
.dsv1-compiled-item.is-gone { padding: 10px 12px; border: 1px dashed var(--ds-g200, #e3e3e8);
border-radius: 12px; color: var(--ds-g600); font-size: 14px; }
.dsv1-danger { color: #b42318; }
/* 失敗の知らせ。赤で身構えさせず、次にどうすればいいかだけを静かに置く。 */
.dsv1-compile-fail { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
background: var(--ds-g50, #f7f7f9); color: var(--ds-text); font-size: 14px; line-height: 1.7; }
.dsv1-compile-fail p { margin: 0; }
.dsv1-compile-fail-n { color: var(--ds-g600); font-size: 13px; margin-top: 4px; }
.dsv1-compile-fail .dsv1-btn-text { margin-top: 6px; padding: 0; }
/* 縦積みのカード（履歴 / Search）はチェックを本文の上に積まず、左上へ添える。 */
.dsv1-tlcard { position: relative; }
.dsv1-tlcard > .dsv1-compile-check { position: absolute; top: 12px; left: 12px; z-index: 1; background: #fff; }
.dsv1-tlcard.is-compile-selected > .dsv1-compile-check { background: var(--ds-purple); }
/* Search のカードは縦並びなので、チェックはサムネに重ねず一段上へ置く。写真の上に丸を乗せると
何の写真かが読めなくなるうえ、選択が「写真への操作」に見えてしまう。 */
.dsv1-card--search.is-compile-selected, .dsv1 .dsv1-card--search.is-compile-selected {
border-color: var(--ds-purple); background: var(--ds-purple-soft); }
.dsv1-card--search > .dsv1-compile-check { margin-bottom: 2px; }
/* Bottom Sheet */
.dsv1-sheet-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(17, 24, 39, 0.32); }
.dsv1-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
background: #fff; border-radius: 24px 24px 0 0; box-shadow: var(--ds-elev-strong);
padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
animation: dsv1-rise 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.dsv1-sheet-t { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.dsv1-sheet-n { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--ds-g600); }
.dsv1-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dsv1-sheet-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.dsv1-compile-kinds { display: flex; flex-direction: column; gap: 8px; }
/* 大きな角丸カードを3つ続けると、画面の下半分が選択肢だけで埋まる。カードをやめて、
薄い罫線で区切った行にする -- 影も角丸も要らない。タップ領域(44px)は保つ。 */
.dsv1-compile-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-height: 44px; padding: 10px 2px; border-radius: 0; text-align: left; cursor: pointer;
background: none; border: 0; border-top: 1px solid var(--ds-g100); box-shadow: none; }
.dsv1-compile-kinds > .dsv1-compile-kind:last-child { border-bottom: 1px solid var(--ds-g100); }
.dsv1-compile-kind-t { font-size: 15px; font-weight: 600; }
.dsv1-compile-kind-n { font-size: 12px; color: var(--ds-g600); }
.dsv1-compile-field { display: block; margin-bottom: 12px; }
.dsv1-compile-field > span { display: block; margin-bottom: 6px; font-size: 12px; color: var(--ds-g600); }
.dsv1-compile-field input, .dsv1-compile-field textarea { width: 100%; box-sizing: border-box;
min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ds-g200);
font-family: var(--ds-font); font-size: 15px; background: #fff; }
.dsv1-compile-field textarea { line-height: 1.7; resize: vertical; }
.dsv1-compile-save { height: 44px; min-height: 44px; border-radius: var(--ds-r-btn); padding: 0 20px; font-size: 15px; font-weight: 600; }
.dsv1-compile-from { margin: 0; font-size: 12px; color: var(--ds-g600); }
.dsv1-compile-error { margin: 10px 0 0; font-size: 13px; color: #b42318; }
@media (prefers-reduced-motion: reduce) { .dsv1-sheet { animation: none !important; } }
/* ── この頃の記録 ─────────────────────────────────────────────────────────────
開いている詳細の下に出る、同じ頃のものの一覧。検索結果の一覧には出さない。
1行は44pxを下回らない（指で押せる大きさ）。 */
.related-moments {
margin-top: 24px;
border-top: 1px solid var(--ds-g200);
padding-top: 16px;
}
.related-moment-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.related-moment-row {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "source title" "source meta";
column-gap: 10px;
align-items: baseline;
width: 100%;
min-height: 44px;
padding: 10px 8px;
border: 0;
border-radius: 10px;
background: transparent;
text-align: left;
font: inherit;
color: var(--ds-g900);
}
button.related-moment-row { cursor: pointer; }
button.related-moment-row:hover { background: var(--ds-g50); }
button.related-moment-row:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: -2px; }
.related-moment-source {
grid-area: source;
align-self: start;
font-size: 13px;
color: var(--ds-g600);
white-space: nowrap;
}
/* 長いタイトルは省略する。折り返すと、6件で画面が埋まってしまう。 */
.related-moment-title {
grid-area: title;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.related-moment-meta {
font-size: 13px;
color: var(--ds-g600);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.related-moment-meta { grid-area: meta; }
/* 詳細の小さな項目（種類・大きさ・所属・読み・チャンネル）。
本文ではないので、本文より一段静かに置く。 */
.search-unified-meta-list {
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.search-unified-meta-row {
display: grid;
grid-template-columns: 5.5em 1fr;
gap: 8px;
font-size: 14px;
}
.search-unified-meta-row dt { color: var(--ds-g600); }
.search-unified-meta-row dd { margin: 0; color: var(--ds-g900); overflow-wrap: anywhere; }
/* ── 取り込んだものの検索結果カード ──────────────────────────────────────────────
ここまで、この節のカードには CSS が1行も無かった。素のままだと、同じ検索結果の中で
Connector の結果だけがブラウザ既定の見た目で並ぶ。
新しいデザインは作らない。面の作り（余白・幅・角丸・枠・影・書体・押したときの縮み）は
Search の Record カード（.dsv1-card--search）から、そのままの値で借りる。
借りないのは1つだけ: カードの一番上に、何から来たのかを小さく置く。
Record と見分けが付かないと、押した先が Record の詳細ではないことに驚くことになる。 */
/* 節の見出しを、Record の件数行（.dsv1-scount）と同じ静かさ・同じ左端に合わせる。
旧デザインの .section-heading（24px・左余白なし）のままだと、同じ画面の中で
Connector の節だけが大きく、しかも左端が 20px ずれて見えていた。 */
.dsv1-search .search-unified-section .section-heading.compact { margin: 0; padding: 16px 20px 8px; }
.dsv1-search .search-unified-section .section-heading h2 {
font-family: var(--ds-font); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ds-g600); }
.dsv1-search .search-unified-section .section-heading p {
margin: 0; font-family: var(--ds-font); font-size: 13px; color: var(--ds-g600); }
.search-unified-list { list-style: none; margin: 0; padding: 0; }
/* 面はボタンが持つ（押せる範囲＝カード全体）。 は行の器だけ。 */
.search-unified-card { display: block; }
.search-unified-open {
display: flex; flex-direction: column; gap: 3px;
width: calc(100% - 40px); margin: 0 20px 12px; padding: 12px; min-height: 44px;
border: 1px solid var(--ds-g100); border-radius: 16px;
background: var(--ds-white); box-shadow: var(--ds-elev-soft);
font-family: var(--ds-font); color: var(--ds-text); text-align: left; cursor: pointer;
transition: transform var(--ds-dur) var(--ds-ease);
}
.search-unified-open:active { transform: scale(0.99); }
/* キーボードで辿れること。関連の行（button.related-moment-row）と同じ出し方。 */
.search-unified-open:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: -2px; }
/* どこから来たのかの札。小さく静かに置く -- 消すと Record と区別が付かない。 */
.search-unified-source { font-size: 11px; font-weight: 500; color: var(--ds-g600); }
/* タイトルが主役。長い題・URL・ファイル名でも行数を増やさず、1行で省略する
（Record カードと同じ約束: .dsv1-search .dsv1-card--search .dsv1-card-title）。 */
.search-unified-title {
font-size: 15px; font-weight: 600; line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* 中身の手掛かりは2行まで。3行目からは、探す助けになるより場所を取るほうが大きい。
切れ目の無い URL やファイル名は、途中で折る（横にはみ出させない）。 */
.search-unified-preview {
font-size: 12px; line-height: 1.5; color: var(--ds-g600);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; overflow-wrap: anywhere;
}
/* 日付・場所・取り込み済みは補助。折り返してよいが、カードの幅は超えない。 */
.search-unified-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;
font-size: 12px; line-height: 17px; color: var(--ds-faint);
}
.search-unified-place { min-width: 0; overflow-wrap: anywhere; }
/* 取り込み済み・一致理由・タグは、Record カードの補助表示（.dsv1-card-foot）と同じ小さなピル。 */
.search-unified-note,
.search-unified-reason,
.search-unified-tag {
font-size: 11px; line-height: 1.5; padding: 2px 8px; border-radius: var(--ds-r-chip);
background: var(--ds-g100); color: var(--ds-muted);
}
.search-unified-reason { align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; }
.search-unified-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* 読み取れたこと（時期・場所）の要約。解析の中身は出さない小さな chip の行。 */
.search-query-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 20px 0; }
.search-summary-chip {
font-family: var(--ds-font); font-size: 12px; line-height: 1.5;
padding: 3px 10px; border-radius: var(--ds-r-chip);
background: var(--ds-blue-soft); color: var(--ds-g600);
}
/* ほかの source を読めなかったとき。既に出ている結果は消さず、事実だけを静かに置く。
カードと同じ幅・同じ左端に並べる（別の画面の部品に見えないように）。 */
.search-unified-error {
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
width: calc(100% - 40px); margin: 0 20px 12px; padding: 12px;
border: 1px solid var(--ds-g200); border-radius: 16px; background: var(--ds-g50);
}
.search-unified-error p {
margin: 0; font-family: var(--ds-font); font-size: 13px; line-height: 1.6; color: var(--ds-g600);
}
/* 取り込んだものの詳細。カードから開いた先なので、同じ余白・同じ書体で続ける。 */
.search-unified-detail { display: block; padding: 8px 20px 24px; font-family: var(--ds-font); }
.search-unified-detail-header { margin-top: 12px; }
.search-unified-detail-title {
margin: 4px 0 0; font-size: var(--ds-fs-h3); font-weight: var(--ds-fw-h3);
line-height: 1.35; color: var(--ds-text); overflow-wrap: anywhere;
}
.search-unified-detail-date { margin: 4px 0 0; font-size: 12px; color: var(--ds-faint); }
.search-unified-body { margin-top: 12px; }
.search-unified-block {
margin: 0 0 8px; font-size: 14px; line-height: 1.8; color: var(--ds-g900); overflow-wrap: anywhere;
}
.search-unified-empty-body { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--ds-g600); }
/* source の facet chip。いまの Search には出していない（カテゴリ chip と役割が重なるため、
render.js の renderSearchSourceChips は呼ばれていない）。将来の詳細フィルターで戻すときに
素の見た目で出ないよう、DS の chip と同じ値だけ置いておく。 */
.search-source-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px; }
.search-source-chip {
height: 34px; padding: 0 16px; border: 1px solid var(--ds-g200); border-radius: var(--ds-r-chip);
background: var(--ds-white); font-family: var(--ds-font); font-size: 13px; font-weight: 500;
color: var(--ds-g600); cursor: pointer;
}
.search-source-chip.is-active { background: var(--ds-blue); border-color: var(--ds-blue); color: var(--ds-white); font-weight: 600; }
.search-source-chip:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px; }
/* ── 押した場所の Bottom Sheet ────────────────────────────────────────────────
既存の capture-sheet の上に、行を並べるだけ。新しい形は作らない。 */
.life-map-pin-sheet-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.life-map-pin-sheet-head h2 {
margin: 0;
font-size: 17px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.life-map-pin-sheet-rows {
margin: 12px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 12px;
}
.life-map-pin-sheet-row dt {
font-size: 12px;
color: var(--ds-g600);
}
.life-map-pin-sheet-row dd {
margin: 0;
font-size: 15px;
color: var(--ds-g900);
}
/* Life Map の戻る。指で押せる高さを確保する（見た目は変えず、当たり判定だけ）。
実測で 32px しかなく、この画面で唯一 44px を下回っていた。 */
.life-map-back {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* ============================================================================
Phase 33 — Public Core & RC2。実測で見つかった実害だけを直す。
デザインは変えない。一括削除もしない。
============================================================================ */
/* 1) デスクトップ幅でナビが2つ出ていた。
.desktop-rail（旧デザインの縦レール）は min-width:861px で display:flex になるが、
DS v1 のナビは無条件 display:grid なので、861px 以上で両方見えていた。
ラベルも中身も違う（レール: ホーム/検索/ライフマップ/プロフィール/設定、
DS v1: Home/Search/FAB/Life Map/Profile）ので、利用者には別物が2つ並んで見える。
読み上げにも aria-current="page" が2つ出ていた。
DS v1 の画面を描いているときだけレールを畳む。DS v1 が扱っていない画面
（Marketplace / AI Workspace / Settings 下位など）は、これまでどおりレールを使う。
ds-v1.css は app.css の後に読み込まれるので、ここで上書きできる。
なお 356 行目に既に @media (min-width: 861px) で DS v1 ナビを中央寄せする指定がある。
デスクトップを考慮した形跡はあり、旧レールを消し忘れていた、というのが実際のところ。 */
@media (min-width: 861px) {
/* 判定は画面クラスではなく「DS v1 のナビが在るか」で行う。画面 div は
.app-shell > main.layout > section.primary-panel > .dsv1-* と深く、
:has(> .dsv1-home) では届かない（最初この形で書いて外した）。
ナビは .app-shell の直下にあり、DS v1 の画面でだけ描かれるので、これが正確な条件。 */
.app-shell:has(> .dsv1-nav--fixed) > .desktop-rail {
display: none;
}
/* レールが場所を取らないときは1列にする。
・DS v1 の画面 -> 上の規則でレールを隠している
・Settings など -> そもそもレールを描いていない（render.js が空を返す）
後者は元から壊れていた。app.css の desktop グリッドは 216px + 1fr を敷くのに、
レールが無いと main.layout が先頭の 216px 列へ入り、1280px の画面で
Settings 全体が 216px に潰れていた（右 1031px が空白）。実測で見つけた。
:has は構造で見るので display:none のレールにも当たる。だから
「隠している場合」と「そもそも無い場合」を両方書く。 */
.app-shell:has(> .dsv1-nav--fixed),
.app-shell:not(:has(> .desktop-rail)) {
grid-template-columns: minmax(0, 1fr);
}
}
/* 2) Search のタップ標的が 44px を下回っていた。
実測: カテゴリ Chip 34px、フィルタボタン 40x40（アイコンのみ）。
44px はこのプロジェクト自身の約束（--button-min-height: 44px）で、Phase 27 は
同じ理由で歯車を 40→44 に上げている。
Chip は「見えている形は変えず、当たり判定だけ広げる」既存のやり方に従う
（app.css の .page-thumb-audio-toggle と同じ考え方）。ピルは 34px のままで、
指の当たる範囲だけ上下に 5px ずつ伸ばして 44px にする。 */
/* フィルタボタンはアイコンだけで、掴む形が無い。中身は中央寄せなので
40 -> 44 にしても見た目は動かない。Phase 27 が歯車に対してやったのと同じ。
詳細度は .dsv1-search .dsv1-search-filterbtn（0,2,0）に合わせる。
クラス1つでは負けて、40px のままだった（実測で気づいた）。 */
.dsv1-search .dsv1-search-filterbtn { width: 44px; height: 44px; }
/* カテゴリ Chip（34px）は 44px 床を満たしていない。ここでは直さない。
当たり判定だけ広げる手（::after を -5px はみ出させる）を試して実測したが、
親の横スクロール行が overflow:auto でクリップするため 42px 止まりだった。
44px にするには「ピルを高くする」か「行の余白を増やす」しかなく、どちらも
見た目の変更にあたる。42px の中途半端な状態を残すと、後から読む人が
「対応済み」と誤解するので、擬似要素ごと取り下げてある。
-> Owner のデザイン判断が要る項目として RC2 の残課題に記載。 */
/* 3) Search と Life Map に見出しが1つも無かった（h1/h2/h3 すべて 0）。
読み上げで開くと、画面の名前が無いまま中身が始まる。Home と Profile には
既に h1 があり、Phase 27 は「どの画面も h1 で自分を名乗る」を標準にしている。
画面名の span を h1 にした。CSS はクラスで当たっているので見た目は変わらないが、
h1 の既定マージンだけは効いてしまうので、ここで打ち消す。 */
.dsv1-search-title, .dsv1-lifemap-title { margin: 0; }
/* Phase 34 — Record 詳細の場所。編集と削除は、大きなボタンを縦に並べず控えめな一行に。 */
.location-actions-inline { display: flex; gap: 16px; margin: 8px 0 0; }
.location-actions-inline .linklike {
min-height: 44px; padding: 0; border: 0; background: none;
color: var(--ds-muted); font-family: var(--ds-font); font-size: 14px; cursor: pointer;
}
.location-actions-inline .linklike:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px; }
/* Phase 34 — Record 作成画面が、下部ナビの裏に隠れていた。
一番下までスクロールしても、フォームの末尾がナビの下に約60px 残る（padding-bottom が 0 で、
ナビは position:fixed のため場所を取らない）。実測で見つけた。
ナビの高さ + iPhone のホームインジケータ分を空ける。 */
.record-capture .record-create-form,
.record-capture .capture-form {
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 16px);
}
/* Phase 34b — Record 詳細の場所。カードでも見出しでもなく、1行。
Life Map へ行けるときは行そのものが入口なので、別のボタンを置かない。 */
.location-section { margin: 0; padding: 0; border: 0; background: none; }
.location-row {
display: flex; align-items: center; gap: 8px; width: 100%;
min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
font-family: var(--ds-font); font-size: 15px; color: var(--ds-muted); text-align: left;
}
.location-row-tappable { cursor: pointer; }
.location-row-tappable:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 4px; border-radius: 8px; }
.location-row .location-pin { flex: 0 0 auto; font-size: 14px; }
.location-row .location-name { color: var(--ds-text); }
.location-row .location-area { color: var(--ds-muted); font-size: 13px; }
/* 編集画面へ移した場所の操作。削除は主ボタンと同じ強さにしない。 */
.record-edit-location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.record-edit-location-actions .linklike {
min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
font-family: var(--ds-font); font-size: 14px; color: var(--ds-muted);
}
.record-edit-location-actions .linklike.danger { color: var(--ds-muted); }
/* Phase 34d — Record 詳細。カードを積まず、余白と文字の強弱で階層を作る。 */
.detail-flow { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.detail-flow .detail-head { display: flex; flex-direction: column; gap: 4px; }
/* 節の名前は見出しではなく小さなラベル。本文より弱くする。 */
.detail-label {
display: block; font-family: var(--ds-font); font-size: 12px; font-weight: 600;
letter-spacing: 0.02em; color: var(--ds-muted);
}
.detail-block { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
.detail-block p { margin: 0; }
.detail-block .empty { color: var(--ds-muted); font-size: 14px; }
/* Record 本体。見出しより本文が目立つ。 */
.detail-primary-text p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--ds-text); }
.summary-body { font-size: 15.5px; line-height: 1.7; }
.transcript-body { font-size: 15px; line-height: 1.75; color: var(--ds-text); }
/* 長い全文は、切れ目を不自然に見せずに畳む。 */
.transcript-clamped {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
overflow: hidden;
}
.detail-more {
align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
font-family: var(--ds-font); font-size: 14px; font-weight: 600; color: var(--ds-blue);
}
.detail-more:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px; }
.detail-tags { display: flex; flex-direction: column; gap: 6px; }
/* 上部の操作。Record より目立たせない。 */
.detail-fav {
min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
font-size: 18px; line-height: 1; color: var(--ds-muted);
}
.detail-fav[aria-pressed="true"] { color: var(--ds-amber, #f59e0b); }
.detail-edit-link {
min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
font-family: var(--ds-font); font-size: 15px; color: var(--ds-blue);
}
.detail-fav:focus-visible, .detail-edit-link:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px; }
/* Phase 34e — 日時は補助情報。太字の 11.5px はラベルのように見えて、タイトルと張り合っていた。 */
.detail-flow .detail-date { font-weight: 400; font-size: 12.5px; letter-spacing: 0; }
/* ============================================================================
Phase 35 — Life Map を主役にする。
これまでは 検索 -> フィルタ -> 小さな地図 の順に積んでいて、地図は背景の飾りだった。
逆にする。地図が画面を占め、操作はその上に浮く。開いた瞬間「地図に入った」と感じる形。
============================================================================ */
.dsv1-lifemap {
position: relative;
/* 下部ナビの分だけ残して、画面いっぱいを地図の面にする。 */
min-height: calc(100dvh - 80px);
padding: 0;
overflow: hidden;
}
/* 地図の面。画面を覆う。 */
.dsv1-lifemap .dsv1-lm-ground {
position: absolute;
inset: 0;
z-index: 0;
opacity: 1;
}
.dsv1-lifemap .dsv1-lm-ground > * { position: absolute; inset: 0; }
/* 画面名は地図の上へ浮かせる。地の面を隠さない。 */
.dsv1-lifemap .dsv1-lifemap-head {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 2;
padding: 14px 20px 10px;
background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0));
pointer-events: none;
}
/* 操作は地図の上。検索は浮いた丸い入口にする。 */
.dsv1-lifemap .dsv1-lm-overlay {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
}
.dsv1-lifemap .dsv1-lm-overlay > * { pointer-events: auto; }
.dsv1-lifemap .dsv1-lifemap-search {
position: absolute;
top: 52px; left: 20px; right: 20px;
width: auto; margin: 0;
z-index: 3;
background: #fff;
border-radius: 999px;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}
/* 場所の一覧は、地図の下から出るシート。地図が 6〜7 割見えるところで止める。 */
.dsv1-lifemap .dsv1-lm-sheet {
position: relative;
z-index: 2;
max-height: 42dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-radius: 20px 20px 0 0;
box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.1);
}
/* シートの持ち手。掴めることを形で伝える（説明文を足さない）。 */
.dsv1-lifemap .dsv1-lm-sheet::before {
content: "";
display: block;
width: 36px; height: 4px;
margin: 4px auto 10px;
border-radius: 999px;
background: var(--ds-g200, #e5e7eb);
}
/* 中身が無いときは、シートを出さずに地図だけを見せる。 */
.dsv1-lifemap .dsv1-lm-sheet:empty { display: none; }
/* Phase 35 — Record 詳細を「思い出を読む」体験へ。余白と文字で、本文を主役にする。 */
.detail-flow { gap: 26px; }
.detail-primary-text p { font-size: 17.5px; line-height: 1.85; }
.detail-flow .detail-title { font-size: 22px; line-height: 1.3; }
/* 写真と音声は、画面幅を使って大きく見せる。 */
.detail-flow .record-photo-section img,
.detail-flow .record-photo-section .page-thumb-photo { width: 100%; height: auto; border-radius: 18px; }
.detail-flow .record-audio-section { padding: 18px 16px; }
/* Phase 37 — 場所行の chevron。押せることを形で伝えるが、主張はしない。 */
.location-chevron { margin-left: auto; color: var(--ds-g300, #d1d5db); font-size: 18px; line-height: 1; }
.location-row-tappable:active { opacity: 0.6; }
/* Phase 38 — 作成画面の位置情報。設定項目ではなく「いまの状態」を1行で。 */
.record-place { margin: 4px 0 0; }
.record-place-toggle {
display: flex; align-items: center; gap: 10px; width: 100%;
min-height: 48px; padding: 10px 14px; margin: 0;
border: 1px solid var(--ds-g150, #eceef1); border-radius: 14px;
background: var(--ds-g50, #fafbfc); cursor: pointer;
font-family: var(--ds-font); font-size: 15px; color: var(--ds-text); text-align: left;
}
.record-place-toggle:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px; }
.record-place-check { color: var(--ds-green, #22c55e); font-weight: 700; }
.record-place-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.record-place-name { font-size: 13px; color: var(--ds-muted); }
/* 見た目のスイッチ。ON/OFF が一目で分かる。 */
.record-place-switch {
flex: 0 0 auto; position: relative; width: 42px; height: 26px;
border-radius: 999px; background: var(--ds-g200, #e5e7eb); transition: background var(--ds-dur) var(--ds-ease);
}
.record-place-switch::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,0.2);
transition: transform var(--ds-dur) var(--ds-ease);
}
.record-place-toggle.is-on { background: color-mix(in srgb, var(--ds-green, #22c55e) 8%, #fff); border-color: color-mix(in srgb, var(--ds-green, #22c55e) 30%, #fff); }
.record-place-toggle.is-on .record-place-switch { background: var(--ds-green, #22c55e); }
.record-place-toggle.is-on .record-place-switch::after { transform: translateX(16px); }
/* 写真・音声が読めなかったときの静かな表示（赤い帯にしない）。 */
.media-slot-empty { margin: 0; padding: 14px 4px; color: var(--ds-muted); font-size: 14px; }
/* Phase 21 — 公開知識の area-level 場所ラベル。控えめに。 */
.mkt-card-place { margin: 2px 0 0; font-size: 13.5px; color: var(--ds-muted); }
.mkt-detail-place { font-size: 15px; margin: 6px 0 0; }
.mkt-place-consent .mkt-place-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.mkt-place-consent .mkt-place-field input { min-height: 44px; }