/*
 * Teiten の画面を描く部品（使い方ガイド・公式サイト・ストア画像・動画で共通に使う）
 * 寸法は dp（1 CSS px = 1 dp）。アプリの StyleSheet の値に合わせてある。画面の幅は 412dp
 * 色は constants/theme.ts の LightColors / DarkColors（.tk.dark か、画面の .tk-screen.dark で暗い色）
 */

.tk {
  --bg: #FFFFFF; --surface: #FFFFFF;
  --primary: #00D1FF; --primaryLight: #E0F9FF;
  --accent: #FFD600; --accentLight: #FFF9E0;
  --text: #2D3436; --text2: #636E72; --text3: #B2BEC3;
  --border: #DFE6E9; --danger: #FF6B6B;
  --tabActive: rgba(45, 52, 54, 0.08);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  --frameBg: #F1F4F5;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.3;
}
.tk.dark, .tk .tk-screen.dark {
  --bg: #0D0D0D; --surface: #1A1A2E;
  --primaryLight: #003344; --accentLight: #332E00;
  --text: #F0F0F0; --text2: #A0A8B0; --text3: #606870; --border: #2A2A3A;
  --tabActive: rgba(240, 240, 240, 0.08);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  --frameBg: #1A1A2E;
}
.tk *, .tk *::before, .tk *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tk .emoji { font-family: "Noto Color Emoji", "Segoe UI Emoji", sans-serif; font-weight: 400; line-height: 1; }
.tk svg.photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── 画面 ── */
.tk-screen { position: relative; width: 412px; height: 915px; overflow: hidden; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
.tk-status { flex: none; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 2px 18px 0; font-size: 13px; font-weight: 500; color: var(--text); }
.tk-status .icons { display: flex; gap: 5px; align-items: center; }
.tk-status .icons i { display: block; background: currentColor; }
.tk-body { flex: 1; position: relative; overflow: hidden; }
.tk-gesture { flex: none; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.tk-gesture i { width: 108px; height: 4px; border-radius: 2px; background: var(--text); opacity: .5; }

/* ── 上の写真欄（components/hero-section.tsx） ── */
.tk-hero { padding: 16px 16px 8px; position: relative; }
.tk-hero-card { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.tk-hero-head { flex: none; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 3px 8px; }
.tk-hero-head .date { font-size: 14px; font-weight: 800; }
.tk-hero-head .right { display: flex; align-items: center; gap: 8px; }
.tk-hero-head .note { font-size: 12px; font-weight: 600; color: var(--text2); }
.tk-play { width: 26px; height: 26px; border-radius: 13px; background: var(--primaryLight); display: flex; align-items: center; justify-content: center; }
.tk-play svg { margin-left: 2px; }
.tk-hero-grid { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.tk-hero-item { position: relative; border-radius: 16px; overflow: hidden; background: var(--frameBg); box-shadow: var(--shadow); }
.tk-hero-band { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 4px 6px; background: rgba(0, 0, 0, 0.35); }
.tk-hero-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 6px; }
.tk-hero-chip .emoji { font-size: 9px; }
.tk-hero-chip b { font-size: 9px; font-weight: 700; color: #fff; }
.tk-hero-empty { border-radius: 16px; border: 2px dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tk-hero-empty .cam { width: 80px; height: 80px; border-radius: 40px; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.tk-hero-empty .d { font-size: 18px; font-weight: 800; margin-top: 4px; }
.tk-hero-empty .m { font-size: 14px; font-weight: 600; color: var(--primary); }
.tk-hero-empty-play { position: absolute; top: 26px; right: 26px; }
.tk-hero-empty-play .tk-play { background: var(--surface); }

/* ── タグのチップ（components/tag-filter-chips.tsx） ── */
.tk-chips { display: flex; gap: 8px; padding: 4px 16px; overflow: hidden; }
.tk-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); }
.tk-chip .emoji { font-size: 14px; }
.tk-chip b { font-size: 13px; font-weight: 700; color: var(--text2); }

/* ── カレンダー（components/calendar-grid.tsx） ── */
.tk-cal { padding: 4px 16px 0; }
.tk-cal-head { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; margin-bottom: 8px; }
.tk-round { width: 36px; height: 36px; border-radius: 18px; background: var(--primaryLight); display: flex; align-items: center; justify-content: center; }
.tk-cal-head .left { position: absolute; left: 0; }
.tk-cal-head .nav { display: flex; align-items: center; gap: 8px; }
.tk-cal-head .month { font-size: 18px; font-weight: 800; padding: 4px 8px; }
.tk-cal-head .today { position: absolute; right: 0; padding: 6px 12px; border-radius: 999px; background: var(--primaryLight); color: var(--primary); font-size: 12px; font-weight: 800; }
.tk-weekdays { display: flex; gap: 3px; margin-bottom: 3px; }
.tk-weekdays span { text-align: center; padding: 4px 0; font-size: 11px; font-weight: 700; color: var(--text2); }
.tk-days { display: flex; flex-wrap: wrap; gap: 3px; }
.tk-day { position: relative; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tk-day .n { position: relative; z-index: 1; font-size: 13px; font-weight: 700; color: var(--text3); }
.tk-day.photo .n { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.tk-day.today { background: var(--accentLight); }
.tk-day.today .n { color: var(--accent); font-weight: 900; }
.tk-day .dot { position: absolute; bottom: 12px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 3px; background: var(--accent); z-index: 1; }
.tk-day .sel { position: absolute; inset: 0; border: 2.5px solid var(--primary); border-radius: 12px; z-index: 2; }
.tk-day .count { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 3; }
.tk-day.future .n { opacity: .45; }

/* ── ＋ボタン（app/index.tsx の FAB） ── */
.tk-fab-wrap { position: absolute; right: 24px; bottom: 32px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 5; }
.tk-fab { width: 60px; height: 60px; border-radius: 30px; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 209, 255, 0.35); }
.tk-fab-row { display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.tk-fab-label { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.tk-fab-sub { width: 48px; height: 48px; border-radius: 24px; border: 2px solid rgba(0, 209, 255, 0.2); background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.tk-dim { position: absolute; inset: 0; background: var(--bg); opacity: .7; z-index: 4; }

/* ── 下部タブ（components/home/home-tab-bar.tsx） ── */
.tk-tabbar { flex: none; display: flex; gap: 8px; padding: 8px 16px 0; border-top: 0.5px solid var(--border); background: var(--bg); }
.tk-tab { flex: 1; min-height: 56px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text2); font-size: 12px; font-weight: 500; }
.tk-tab.on { background: var(--tabActive); color: var(--text); font-weight: 700; }

/* ── 振り返りタブ・設定タブ ── */
.tk-page { padding: 24px; }
.tk-page h1 { font-size: 24px; font-weight: 800; margin-bottom: 24px; }
.tk-entry { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 16px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg); margin-bottom: 8px; }
.tk-entry .ib { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--primaryLight); display: flex; align-items: center; justify-content: center; }
.tk-entry .tx { flex: 1; }
.tk-entry .tx b { display: block; font-size: 16px; font-weight: 700; }
.tk-entry .tx span { display: block; font-size: 13px; color: var(--text2); margin-top: 2px; }
.tk-sec { font-size: 13px; font-weight: 800; color: var(--text3); letter-spacing: 1px; margin: 0 0 8px 4px; }
.tk-seg { display: flex; gap: 4px; padding: 4px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); }
.tk-seg span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border-radius: 8px; border: 1.5px solid transparent; font-size: 13px; font-weight: 700; color: var(--text2); }
.tk-seg span.on { background: var(--primaryLight); border-color: var(--primary); color: var(--primary); font-weight: 800; }
.tk-menu { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg); }
.tk-menu + .tk-menu { margin-top: 8px; }
.tk-menu .ib { flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.tk-menu .tx { flex: 1; min-width: 0; }
.tk-menu .tx b { display: block; font-size: 16px; font-weight: 800; }
.tk-menu .tx span { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-top: 2px; }
.tk-switch { display: block; flex: none; width: 36px; height: 14px; border-radius: 7px; background: var(--border); position: relative; margin: 0 4px; }
.tk-switch::after { content: ""; position: absolute; top: -5px; left: -4px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.tk-switch.on { background: var(--primary); }
.tk-switch.on::after { left: 16px; }
.tk-gap { height: 24px; }

/* ── 画面の上のヘッダー（Stack のヘッダー） ── */
.tk-header { flex: none; height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 12px 0 16px; background: var(--bg); }
.tk-header h2 { flex: 1; font-size: 20px; font-weight: 700; }

/* ── 変化を比べる（app/compare.tsx） ── */
.tk-cmp-seg { margin: 12px 16px 0; }
.tk-cmp-pair { display: flex; gap: 8px; margin: 14px 16px 0; }
.tk-frame { position: relative; border-radius: 16px; overflow: hidden; background: var(--frameBg); }
.tk-pill { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; font-weight: 800; }
.tk-dot9 { width: 9px; height: 9px; border-radius: 5px; flex: none; }
.tk-span { display: flex; align-items: center; gap: 8px; margin: 16px 16px 0; }
.tk-span .line { flex: 1; height: 2px; border-radius: 1px; opacity: .6; }
.tk-span b { font-size: 16px; font-weight: 900; }
.tk-cards { display: flex; gap: 10px; margin: 12px 16px 0; }
.tk-card { flex: 1; border: 1.5px solid var(--border); border-radius: 16px; padding: 10px 12px 11px; }
.tk-card .lab { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text2); }
.tk-card .val { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; font-size: 15px; font-weight: 800; }

/* ── データ設定（app/settings/data.tsx） ── */
.tk-data { padding: 16px; }
.tk-row { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); }
.tk-row + .tk-row { margin-top: 8px; }
.tk-row .ib { flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 209, 255, 0.094); display: flex; align-items: center; justify-content: center; }
.tk-row .tx { flex: 1; }
.tk-row .tx b { display: block; font-size: 16px; font-weight: 700; }
.tk-row .tx span { display: block; font-size: 13px; color: var(--text2); margin-top: 2px; line-height: 1.45; }