/* ============================================================
   実践ポイント スタイル
   方針: 大きく・シンプル・楽しく（高齢者にもやさしい）。スマホ優先。
   ============================================================ */
:root {
  --orange: #ff7a59;
  --orange-d: #f0603c;
  --pink: #ff8fab;
  --yellow: #ffd166;
  --green: #06d6a0;
  --blue: #4d9de0;
  --purple: #9b5de5;
  --ink: #333a4d;
  --muted: #7a8296;
  --bg: #fff7f2;
  --card: #ffffff;
  --line: #ffe3d6;
  --shadow: 0 6px 18px rgba(255, 122, 89, 0.15);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.7;
  padding-bottom: 88px; /* タブバー分 */
  max-width: 100%;
  overflow-x: hidden; /* 個々の要素のはみ出しに対する保険 */
}
a { color: var(--orange); text-decoration: none; }

/* ---- ヘッダー ---- */
.app-header {
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: #fff;
  position: sticky; top: 0; z-index: 20;
  box-shadow: var(--shadow);
}
.app-header-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
  gap: 8px;
}
.brand { color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.brand-icon { width: 26px; height: 26px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.brand-icon svg { width: 100%; height: 100%; display: block; }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.who-name {
  font-size: 14px; opacity: .95; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 32vw;
}
.logout {
  color: #fff; background: rgba(255,255,255,.25);
  padding: 6px 12px; border-radius: 999px; font-size: 14px; flex: 0 0 auto;
}

/* ---- レイアウト ---- */
.container { max-width: 760px; margin: 0 auto; padding: 16px; }
.page-title { font-size: 22px; font-weight: 800; margin: 8px 4px 16px; }
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px;
  border: 2px solid var(--line);
}
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---- サマリー（ポイント大表示） ---- */
.summary { display: flex; gap: 12px; }
.summary .stat {
  flex: 1; text-align: center; border-radius: var(--radius);
  padding: 18px 10px; color: #fff;
}
.stat.total { background: linear-gradient(135deg, var(--orange), var(--pink)); }
.stat.month { background: linear-gradient(135deg, var(--blue), var(--green)); }
.stat .num { font-size: 40px; font-weight: 900; line-height: 1.1; }
.stat .unit { font-size: 16px; font-weight: 700; }
.stat .cap { font-size: 14px; opacity: .95; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange); color: #fff; border: none;
  font-size: 18px; font-weight: 800; padding: 14px 20px;
  border-radius: 999px; cursor: pointer; box-shadow: var(--shadow);
  width: 100%; text-align: center;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.btn:active { transform: translatey(1px); }
.btn.secondary { background: #fff; color: var(--orange); border: 2px solid var(--orange); box-shadow: none; }
.btn.ghost { background: #f1f3f7; color: var(--ink); box-shadow: none; }
.btn.small {
  width: auto; max-width: 100%; font-size: 15px; padding: 8px 14px;
  white-space: normal; word-break: break-word; line-height: 1.3;
  flex-direction: column; gap: 0;
}
.btn.danger { background: #ef476f; }

/* ---- フォーム ---- */
label.field { display: block; margin-bottom: 14px; font-weight: 700; }
label.field .req { color: #ef476f; font-size: 14px; }
input[type=text], input[type=number], input[type=password], input[type=date], select, textarea {
  width: 100%; font-size: 18px; padding: 14px; margin-top: 6px;
  border: 2px solid var(--line); border-radius: 12px; background: #fff;
  font-family: inherit; color: var(--ink);
}
textarea { min-height: 80px; resize: vertical; }
.hint { font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 4px; }

/* ---- 実践項目ボタン一覧 ---- */
/* minmax(0,1fr) にしないと、中の要素の最小幅でグリッド列自体が
   押し広げられ、カード枠からはみ出すため注意（Grid特有の挙動） */
.items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.item-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 16px 10px; cursor: pointer; text-align: center; color: var(--ink);
  font-family: inherit; width: 100%; min-width: 0; box-sizing: border-box;
}
.item-btn .ic { font-size: 30px; }
.item-btn .nm { font-size: 15px; font-weight: 700; line-height: 1.3; word-break: break-word; }
.item-btn .pt { font-size: 13px; color: var(--orange); font-weight: 800; }
.item-btn.disabled { opacity: .5; }
.item-btn.disabled .pt { color: var(--muted); }
.item-btn .done { font-size: 12px; color: var(--muted); word-break: break-word; }

/* 数量入力つき項目（声掛け・ゲスト・入会など）
   Grid にして中央のinput列だけ伸縮させ、両端のボタン・単位ラベルは
   自身のサイズを保ったまま、行全体が親幅を超えないようにする。 */
.qty-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 4px; margin: 6px 0; width: 100%; box-sizing: border-box;
}
.qty-btn {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0 !important;
  font-size: 16px; line-height: 1; border-radius: 50%;
  -webkit-appearance: none; appearance: none;
}
.qty-input {
  width: 100%; min-width: 0; padding: 6px 2px !important; text-align: center;
  font-size: 15px; -webkit-appearance: none; -moz-appearance: textfield; appearance: none;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-unit { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- カレンダー ---- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head .ym { font-size: 20px; font-weight: 800; }
.cal-nav { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 18px; font-weight: 800; color: var(--orange); cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-dow.sun { color: #ef476f; }
.cal-dow.sat { color: var(--blue); }
.cal-cell {
  aspect-ratio: 1 / 1; border: 2px solid var(--line); border-radius: 12px;
  background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; position: relative;
}
.cal-cell.empty { border: none; background: transparent; cursor: default; }
.cal-cell.today { border-color: var(--orange); }
.cal-cell.selected { background: var(--orange); color: #fff; border-color: var(--orange); }
.cal-cell.sun { color: #ef476f; }
.cal-cell.sat { color: var(--blue); }
.cal-cell.selected.sun, .cal-cell.selected.sat { color: #fff; }
/* 登録済みの日は ok.png を背景に薄く重ねる */
.cal-cell.marked {
  background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), url('../img/ok.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
}
.cal-cell.marked.selected {
  background-image: linear-gradient(rgba(255, 122, 89, .6), rgba(255, 122, 89, .6)), url('../img/ok.png');
  background-size: 62%;
}

/* ---- 履歴リスト ---- */
.hist-day { margin-bottom: 16px; }
.hist-date { font-weight: 800; font-size: 16px; margin-bottom: 8px; color: var(--ink); }
.hist-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 8px;
}
.hist-item .ic { font-size: 24px; }
.hist-item .body { flex: 1; }
.hist-item .nm { font-weight: 700; }
.hist-item .memo { font-size: 14px; color: var(--muted); }
.hist-item .pt { font-weight: 800; color: var(--orange); white-space: nowrap; }
.row-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ---- ランキング ---- */
.rank-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rank-tab {
  padding: 10px 16px; border-radius: 999px; background: #fff;
  border: 2px solid var(--line); font-weight: 700; color: var(--muted); cursor: pointer; font-size: 15px;
}
.rank-tab.is-active { background: var(--orange); color: #fff; border-color: var(--orange); }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed var(--line); }
.rank-row.me { background: #fff6ee; border-radius: 12px; }
.rank-medal { font-size: 22px; width: 34px; text-align: center; font-weight: 800; }
.rank-name { flex: 0 0 auto; min-width: 84px; font-weight: 700; }
.rank-bar-wrap { flex: 1; background: #f1f3f7; border-radius: 999px; height: 20px; overflow: hidden; }
.rank-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--orange), var(--pink)); }
.rank-val { flex: 0 0 auto; font-weight: 800; color: var(--ink); min-width: 52px; text-align: right; }
.rank-empty { text-align: center; color: var(--muted); padding: 24px 0; }

/* ---- 進捗バー ---- */
.progress { background: #f1f3f7; border-radius: 999px; height: 22px; overflow: hidden; margin-top: 8px; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 999px; }

/* ---- タブバー（下部ナビ） ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: #fff; border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px; color: var(--muted); font-size: 12px; font-weight: 700;
}
.tab-icon { font-size: 22px; }
.tab.is-active { color: var(--orange); }

/* ---- お祝いモーダル ---- */
.celebrate-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.celebrate-box {
  background: #fff; border-radius: 24px; padding: 28px 24px; text-align: center;
  max-width: 360px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: pop .35s ease;
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.celebrate-box .emoji { font-size: 56px; }
.celebrate-box h2 { font-size: 22px; margin: 8px 0; color: var(--orange); }
.celebrate-box p { font-size: 16px; color: var(--ink); }

/* ---- メッセージ ---- */
.flash { border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-weight: 700; }
.flash.ok { background: #e6fbf3; color: #08916c; border: 2px solid #b8f1de; }
.flash.err { background: #ffeef2; color: #d1214c; border: 2px solid #ffd0dc; }

/* ---- ログイン ---- */
.login-wrap { max-width: 420px; margin: 0 auto; padding-top: 24px; }
.login-logo { text-align: center; font-size: 40px; }
.login-title { text-align: center; font-size: 24px; font-weight: 900; margin: 6px 0 4px; }
.login-sub { text-align: center; color: var(--muted); margin-bottom: 20px; }

/* ---- テーブル（管理画面） ---- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.table th { color: var(--muted); font-size: 13px; }

@media (min-width: 560px) {
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}