* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --turquoise: #1ED9E0;
  --mint: #4DE8B0;
  --gray: #4A4A4A;
  --bg: #F7FAFA;
  --card: #FFFFFF;
  --border: #E8EDED;
  /* 補助テキスト用グレー（濃→淡） */
  --text-sub: #6c7676;   /* 本文に近い補助テキスト（説明・メタ） */
  --text-muted: #7d8888; /* ラベル・キャプション */
  --text-faint: #9AA6A6; /* さらに薄い（曜日ヘッダー・ヒント） */
  --text-ghost: #a6afaf; /* 空状態・取り消し線 */
  --chara: #8a9595;      /* キャラひとことのテキスト */
  --chara-bg: #eefdf8;   /* キャラひとことの背景 */
  --cat-default: #B7C0C0;/* カテゴリ色フォールバック */
  --radius: 20px;
  --shadow: 0 6px 20px rgba(74, 74, 74, 0.08);
  --font: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", "Rounded Mplus 1c", sans-serif;
}

body {
  font-family: var(--font);
  color: var(--gray);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden; /* ページ全体の横スクロール（見切れ）を防ぐ。カンバンは内側で横スクロール */
}

.screen { min-height: 100vh; }
.screen[hidden] { display: none; }

/* スプラッシュ */
.screen--splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--bg);
  cursor: pointer;
  animation: fadeIn 0.6s ease;
}
.splash__logo { width: min(60vw, 420px); height: auto; }
.splash__hint { color: var(--text-faint); font-size: 0.95rem; animation: pulse 1.6s ease-in-out infinite; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* 機能画面の共通レイアウト（サイドバー＋本体） */
.screen--app { display: flex; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 10px; background: var(--card); border-right: 1px solid var(--border);
}
.sidebar__item {
  width: 48px; height: 48px; border: none; border-radius: 14px;
  background: var(--bg); font-size: 1.3rem; cursor: pointer; transition: transform .12s, background .12s;
}
.sidebar__item:hover { transform: translateY(-2px); }
.sidebar__item.active { background: var(--mint); }

.screen__body { flex: 1; padding: 28px clamp(16px, 4vw, 48px); max-width: 1100px; margin: 0 auto; width: 100%; }

.back-btn {
  border: none; background: var(--card); color: var(--gray);
  padding: 10px 18px; border-radius: 999px; font-family: var(--font);
  box-shadow: var(--shadow); cursor: pointer; margin-bottom: 20px; font-size: 0.95rem;
}
.back-btn:hover { background: var(--chara-bg); }

.screen__title { font-size: 1.5rem; margin-bottom: 20px; }

/* 優先度ラベル */
.prio { padding: 2px 12px; border-radius: 999px; font-size: 0.8rem; color: #fff; }
.prio--high { background: #FF7A85; }
.prio--mid  { background: #FFB74D; }
.prio--low  { background: #9AD07F; }

/* タグ */
.tag { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--bg); font-size: 0.78rem; margin-right: 6px; }

/* 進捗バー */
.progress-bar { height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--turquoise), var(--mint)); }
.progress-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

/* モーダル */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(74,74,74,0.35);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
  animation: fadeIn .2s ease;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--card); border-radius: var(--radius); padding: 28px;
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); position: relative;
  animation: popIn .22s ease;
}
.modal__close { position: absolute; top: 16px; right: 16px; border: none; background: var(--bg); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.modal__title { margin: 8px 0; }
.modal__desc { color: var(--text-sub); margin-bottom: 16px; }
.modal__tags { margin-bottom: 4px; }
.modal__meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; font-size: 0.9rem; }
.modal__section { margin: 18px 0 8px; font-size: 1rem; }
.checklist { list-style: none; }
.checklist__item { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.checklist__box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff; }
.checklist__box.done { background: var(--mint); border-color: var(--mint); }
.done-text { text-decoration: line-through; color: var(--text-ghost); }
.comment { background: var(--bg); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; font-size: 0.9rem; }
.muted { color: var(--text-ghost); font-size: 0.9rem; }

@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* スマホではサイドバー非表示 */
@media (max-width: 640px) {
  .sidebar { display: none; }
  .screen__body { padding: 20px 16px; }
}

/* ホーム（Link Tree風） */
.home { max-width: 480px; margin: 0 auto; padding: 40px 20px 60px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.home__logo { width: 200px; height: auto; margin-bottom: 12px; }
.home__hello { color: var(--text-sub); margin-bottom: 24px; }
.today-card { width: 100%; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 28px; text-align: left; }
.today__heading { font-size: 1.1rem; margin-bottom: 14px; }
.today__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.today__item { display: flex; align-items: center; gap: 12px; }
.today__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.today__time { font-weight: bold; min-width: 52px; }
.today__title { color: #4a4a4a; }
.tree-links { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.tree-link {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 18px 22px; border: none; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow); cursor: pointer;
  font-family: var(--font); font-size: 1.05rem; color: var(--gray);
  transition: transform .14s, box-shadow .14s;
}
.tree-link:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(30,217,224,0.18); }
.tree-link__icon { font-size: 1.4rem; }
.tree-link__label { flex: 1; text-align: left; }
.tree-link__arrow { color: var(--turquoise); font-size: 1.4rem; }
.home__chara { margin-top: 30px; color: var(--chara); background: var(--chara-bg); padding: 10px 18px; border-radius: 999px; }

/* タスク一覧 */
.task-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.task-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; cursor: pointer; transition: transform .14s; }
.task-card:hover { transform: translateY(-3px); }
.task-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.task-card__status { font-size: 0.8rem; color: var(--text-muted); background: var(--bg); padding: 2px 10px; border-radius: 999px; }
.task-card__title { font-size: 1.05rem; margin-bottom: 10px; }
.task-card__meta { display: flex; gap: 14px; font-size: 0.85rem; color: var(--text-sub); margin-bottom: 10px; }

/* カンバン */
.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.kanban-list { flex: 0 0 240px; background: var(--bg); border-radius: var(--radius); padding: 14px; min-height: 200px; transition: background .12s; }
.kanban-list--over { background: #e2fbf3; }
.kanban-list__head { font-weight: bold; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.kanban-list__count { font-size: 0.75rem; background: var(--card); color: var(--text-muted); padding: 1px 8px; border-radius: 999px; }
.kanban-list__cards { display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.kanban-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kanban-card__title { font-size: 0.95rem; margin-bottom: 6px; }
.kanban-card__due { font-size: 0.8rem; color: var(--text-muted); }

/* カレンダー */
.cal-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cal-head .screen__title { margin-bottom: 0; }
.cal-tabs { display: flex; gap: 6px; background: var(--card); padding: 4px; border-radius: 999px; box-shadow: var(--shadow); }
.cal-tab { border: none; background: transparent; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-family: var(--font); color: var(--text-muted); }
.cal-tab.active { background: var(--mint); color: var(--gray); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd { text-align: center; font-size: 0.8rem; color: var(--text-faint); padding: 4px 0; min-width: 0; }
/* min-width:0 が無いとセル内のピルがセルを押し広げ、グリッドが横にはみ出す */
.cal-cell { background: var(--card); border-radius: 12px; min-height: 84px; min-width: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell--empty { background: transparent; }
.cal-cell--today { outline: 2px solid var(--turquoise); }
.cal-date { font-size: 0.8rem; color: var(--text-muted); }
.cal-pill { display: block; max-width: 100%; font-size: 0.7rem; color: #fff; padding: 2px 6px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-col { background: var(--card); border-radius: 12px; padding: 8px; min-height: 160px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-col--today { outline: 2px solid var(--turquoise); }
.cal-col__head { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-bottom: 4px; }

.cal-day { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.cal-day h2 { margin-bottom: 14px; }
.cal-day__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }

@media (max-width: 640px) {
  /* 7列を狭い画面に収めるため全体を詰める */
  .cal-grid, .cal-week { gap: 3px; }
  .cal-cell { min-height: 58px; padding: 4px 3px; border-radius: 9px; }
  .cal-date { font-size: 0.72rem; }
  .cal-wd { font-size: 0.7rem; padding: 2px 0; }
  .cal-pill { font-size: 0.56rem; padding: 1px 4px; border-radius: 6px; }
  /* 週表示：列パディングを詰めてはみ出しを防ぐ */
  .cal-col { padding: 6px 4px; }
  .cal-col__head { font-size: 0.7rem; }
  /* カレンダーのタブは見出しの下に回り込ませて横はみ出しを防ぐ */
  .cal-head { flex-direction: column; align-items: stretch; }
  .cal-tabs { align-self: flex-start; }
}

/* プロジェクト */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.proj-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; overflow: hidden; transition: transform .14s; }
.proj-card:hover { transform: translateY(-3px); }
.proj-card__bar { height: 8px; border-radius: 999px; margin-bottom: 14px; }
.proj-card__name { margin-bottom: 6px; }
.proj-card__desc { color: var(--text-sub); font-size: 0.9rem; margin-bottom: 14px; }
.proj-card__meta { display: flex; gap: 16px; font-size: 0.85rem; color: var(--text-muted); }

/* 仕上げ：スクロールバー・タップ領域・小画面調整 */
html { scroll-behavior: smooth; }
button { -webkit-tap-highlight-color: transparent; }
.kanban-board::-webkit-scrollbar, .task-list::-webkit-scrollbar { height: 8px; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

@media (max-width: 640px) {
  .home { padding: 28px 16px 48px; }
  .home__logo { width: 160px; }
  .screen__title { font-size: 1.3rem; }
  .modal { padding: 22px; }
}

/* ============================================================
   PWA / iPhone 15・16 最適化
   （viewport-fit=cover 前提。env(safe-area-inset-*) で
     ダイナミックアイランド・ホームインジケータを避ける）
   ============================================================ */

/* 背景をセーフエリアまで塗り、フルスクリーン起動でも縁が白くならないように */
html { background: var(--bg); }

/* iOS の慣性スクロール＆ページ全体のバウンス抑制 */
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

/* 100vh は iOS で下部バーぶんずれるので dvh を使えるときは差し替え */
.screen { min-height: 100vh; min-height: 100dvh; }

/* スプラッシュ：ダイナミックアイランド／ホームインジケータぶんの余白 */
.screen--splash {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ホーム：上下のセーフエリアを足す（既存 padding に加算） */
.home {
  padding-top: calc(40px + env(safe-area-inset-top));
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
}

/* 機能画面の本文：左右＋下のセーフエリアを尊重 */
.screen__body {
  padding-left: calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-left));
  padding-right: calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-right));
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.screen__body .back-btn { margin-top: env(safe-area-inset-top); }

/* サイドバー（横向き等でスマホでも出る場合）：上と左のセーフエリア */
.sidebar {
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-left: calc(10px + env(safe-area-inset-left));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* モーダル：下のセーフエリアを避けつつ画面内に収める */
.modal-overlay {
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.modal { max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

/* ---- タッチ最適化 ---- */

/* タップ時の青ハイライトを消し、選択・コールアウトを抑制 */
* { -webkit-tap-highlight-color: transparent; }
.tree-link, .sidebar__item, .back-btn, .cal-tab, .task-card, .proj-card,
.kanban-card, .modal__close {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /* ダブルタップズームを無効化しタップ遅延を除去 */
}

/* タップ領域を 44px 以上に（Apple ヒューマンインターフェースガイドライン準拠） */
.sidebar__item { min-width: 44px; min-height: 44px; }
.cal-tab { min-height: 44px; }
.back-btn { min-height: 44px; }
.modal__close { width: 40px; height: 40px; }
.tree-link { min-height: 56px; } /* 主要導線は特に大きく */

/* カンバンは横スワイプ、縦は妨げない */
.kanban-board { touch-action: pan-x; -webkit-overflow-scrolling: touch; }

/* ドラッグはポインタ端末向け。タッチ主体の端末ではホバーの浮きを弱める */
@media (hover: none) {
  .tree-link:active, .task-card:active, .proj-card:active { transform: scale(0.98); }
  .tree-link:hover, .task-card:hover, .proj-card:hover,
  .sidebar__item:hover { transform: none; }
}

/* ---- Phase 2: トースト ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--gray);
  color: #fff;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 14px;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  z-index: 100;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: #E36565; }

/* ---- Phase 2: フォーム共通 ---- */
.form-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.form-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--gray);
  background: #fff;
}
.form-input:focus { outline: none; border-color: var(--turquoise); }
textarea.form-input { resize: vertical; min-height: 72px; }

.btn {
  display: inline-block;
  padding: 10px 18px;
  border: none;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
  background: var(--bg);
  color: var(--gray);
}
.btn--primary {
  background: var(--turquoise);
  color: #fff;
  width: 100%;
  padding: 12px;
  font-weight: bold;
}
.btn--danger { background: #FF9A9A; color: #fff; }

/* ---- Phase 2: 認証画面 ---- */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 20px;
}
.auth__logo { width: 140px; }
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: var(--bg);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  color: var(--text-muted);
}
.auth-tab.active { background: var(--turquoise); color: #fff; font-weight: bold; }
.auth-error { color: #E36565; font-size: 13px; margin-bottom: 12px; }

/* ---- Phase 2: 追加ボタン ---- */
.add-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

/* ---- Phase 2: モーダルアクション ---- */
.modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.modal__actions .btn { flex: 1; }

/* ---- Phase 2: ログアウト ---- */
.home__logout {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--font);
  margin-top: 8px;
}