/* Kaname 家計簿（明細型・会員特典）— 専用スタイル。
 *
 * 方針：
 *  - トークンは kaname.css / kaname_pop.css の --kt-* / --ktp-* を再利用（既存CSSは編集しない）。
 *  - 390px で崩れない・320でも横スクロールしない。新規 width:100% リテラルは使わない（max-width / 自動幅で組む）。
 *  - タップ領域 44px 以上・入力は font-size 16px 以上（モバイルの自動ズーム防止）。
 *  - スコープは .kk-app 配下だけ。tabbar など共通UIには干渉しない。
 *  - .kt-kakeibo（外側ラッパー）には幅を一切指定しない＝共通の --kt-app-w に従う。
 */

.kk-app { box-sizing: border-box; }
.kk-app *,
.kk-app *::before,
.kk-app *::after { box-sizing: border-box; }

.kk-app .kk-hero { margin: 0 0 1.1rem; }
.kk-app .kk-kicker {
  margin: 0 0 .3rem;
  font-weight: 800;
  font-size: .85rem;
  color: var(--ktp-pink-d, #C72E80);
}
.kk-app .kk-title {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--kt-ink, #1E2433);
  overflow-wrap: anywhere;
}
.kk-app .kk-lead {
  margin: 0 0 .5rem;
  line-height: 1.75;
  color: var(--kt-ink-soft, #5B6478);
}
.kk-app .kk-disc {
  margin: .4rem 0 0;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--kt-ink-soft, #5B6478);
  background: var(--kt-bg-soft, #F2F6FF);
  border-radius: 12px;
  padding: .6rem .8rem;
}

/* ── カード共通 ─────────────────────────────────────── */
.kk-app .kk-card {
  max-width: none;
  border: 2px solid var(--kt-line, #E4E9F2);
  border-radius: 18px;
  background: var(--kt-card, #fff);
  padding: 1rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
}
.kk-app .kk-card-h {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--kt-ink, #1E2433);
}
.kk-app .kk-card-sub {
  margin: 0 0 .8rem;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--kt-ink-soft, #5B6478);
}

/* ── 月切替＋サマリ ─────────────────────────────────── */
.kk-app .kk-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0 0 .8rem;
}
.kk-app .kk-month-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 2px solid var(--kt-line, #E4E9F2);
  background: var(--kt-bg-soft, #F2F6FF);
  color: var(--kt-ink, #1E2433);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.kk-app .kk-month-btn:hover { filter: brightness(.97); }
.kk-app .kk-month-label {
  margin: 0;
  min-width: 7rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--kt-ink, #1E2433);
}
.kk-app .kk-load-status {
  margin: .2rem 0 0;
  min-height: 1.1em;
  font-size: .78rem;
  color: var(--kt-ink-soft, #5B6478);
  text-align: center;
}

/* ── 入力フォーム ───────────────────────────────────── */
.kk-app .kk-field { display: block; margin: 0 0 .8rem; }
.kk-app .kk-field-label {
  display: block;
  margin: 0 0 .3rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--kt-ink, #1E2433);
}
.kk-app .kk-inwrap {
  display: flex;
  align-items: center;
  gap: .4rem;
  border: 2px solid var(--kt-line, #E4E9F2);
  border-radius: 12px;
  background: var(--kt-bg-soft, #F7FAFF);
  padding: .1rem .7rem;
}
.kk-app .kk-inwrap:focus-within { border-color: var(--ktp-pink, #FF6FB5); }
.kk-app .kk-in,
.kk-app .kk-select {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 16px; /* iOS 自動ズーム防止 */
  font-weight: 700;
  color: var(--kt-ink, #1E2433);
  padding: .55rem 0;
  outline: none;
}
.kk-app .kk-in::-webkit-outer-spin-button,
.kk-app .kk-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kk-app .kk-in[type="number"] { -moz-appearance: textfield; }
.kk-app .kk-unit { flex: 0 0 auto; font-size: .85rem; color: var(--kt-ink-soft, #5B6478); }

.kk-app .kk-row2 { display: flex; flex-wrap: wrap; gap: .6rem; }
.kk-app .kk-row2 > .kk-field { flex: 1 1 8rem; margin-bottom: 0; }

.kk-app .kk-formbtns { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0; }
.kk-app .kk-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .55rem 1.2rem;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid var(--kt-line, #E4E9F2);
  background: transparent;
  color: var(--kt-ink, #1E2433);
}
.kk-app .kk-btn--primary { background: var(--ktp-pink, #FF6FB5); color: #fff; border-color: transparent; }
.kk-app .kk-btn--ghost { color: var(--kt-ink-soft, #5B6478); }
.kk-app .kk-btn:hover { filter: brightness(.97); }

/* ── 支出／収入トグル ───────────────────────────────── */
.kk-app .kk-kind-toggle {
  display: flex;
  gap: .5rem;
  margin: 0 0 .9rem;
}
.kk-app .kk-kind-btn {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 14px;
  border: 2px solid var(--kt-line, #E4E9F2);
  background: var(--kt-bg-soft, #F7FAFF);
  color: var(--kt-ink-soft, #5B6478);
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
  padding: .5rem .6rem;
}
.kk-app .kk-kind-btn.is-active {
  background: var(--ktp-pink, #FF6FB5);
  border-color: transparent;
  color: #fff;
}

/* ── クイックチップ（日付・金額） ───────────────────── */
.kk-app .kk-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .5rem 0 .8rem;
}
.kk-app .kk-chip {
  min-height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--kt-line, #E4E9F2);
  background: var(--kt-bg-soft, #F2F6FF);
  color: var(--kt-ink, #1E2433);
  font-size: .82rem;
  font-weight: 700;
  padding: .35rem .9rem;
  cursor: pointer;
}
.kk-app .kk-chip:hover { filter: brightness(.97); }
.kk-app .kk-chip--ghost { color: var(--kt-ink-soft, #5B6478); }

/* ── カテゴリチップ・グリッド ───────────────────────── */
.kk-app .kk-cat-label { margin-top: .2rem; }
.kk-app .kk-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .9rem;
}
.kk-app .kk-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  border-radius: 999px;
  border: 2px solid var(--kt-line, #E4E9F2);
  background: var(--kt-card, #fff);
  color: var(--kt-ink, #1E2433);
  font-size: .84rem;
  font-weight: 700;
  padding: .4rem .85rem;
  cursor: pointer;
}
.kk-app .kk-cat-chip-ic { font-size: 1rem; }
.kk-app .kk-cat-chip.is-active {
  background: var(--ktp-pink-bg, #FFE6F2);
  border-color: var(--ktp-pink, #FF6FB5);
  color: var(--ktp-pink-d, #C72E80);
}

.kk-app .kk-form-status {
  margin: .5rem 0 0;
  min-height: 1.2em;
  font-size: .82rem;
  font-weight: 700;
}
.kk-app .kk-status--ok { color: #2f7d5b; }
.kk-app .kk-status--warn { color: var(--ktp-coral-d, #D8421F); }

/* ── 明細フィルタ（検索・カテゴリ絞り込み） ─────────── */
.kk-app .kk-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 .8rem;
}
.kk-app .kk-inwrap--search { flex: 1 1 12rem; }
.kk-app .kk-inwrap--filter { flex: 1 1 9rem; }
.kk-app .kk-in[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── 明細リスト ─────────────────────────────────────── */
.kk-app .kk-list { display: flex; flex-direction: column; gap: .55rem; margin: .2rem 0 0; }
.kk-app .kk-item {
  max-width: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  border: 2px solid var(--kt-line, #E4E9F2);
  border-radius: 14px;
  background: var(--kt-card, #fff);
  padding: .7rem .8rem;
}
.kk-app .kk-item-date {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 800;
  color: var(--kt-ink-soft, #5B6478);
  white-space: nowrap;
}
.kk-app .kk-item-cat {
  flex: 0 0 auto;
  font-size: .74rem;
  font-weight: 800;
  color: var(--ktp-pink-d, #C72E80);
  background: var(--ktp-pink-bg, #FFE6F2);
  border-radius: 999px;
  padding: .16rem .6rem;
  white-space: nowrap;
}
.kk-app .kk-item-name {
  flex: 1 1 6rem;
  min-width: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--kt-ink, #1E2433);
  overflow-wrap: anywhere;
}
.kk-app .kk-item-amt {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}
.kk-app .kk-item-amt--expense { color: var(--ktp-coral-d, #D8421F); }
.kk-app .kk-item-amt--income { color: #2f7d5b; }
.kk-app .kk-item-acts { flex: 1 1 100%; display: flex; gap: .5rem; margin-top: .2rem; justify-content: flex-end; }
.kk-app .kk-mini {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  background: var(--kt-bg-soft, #F2F6FF);
  color: var(--kt-ink, #1E2433);
  border: 1.5px solid var(--kt-line, #E4E9F2);
  border-radius: 999px;
  padding: .3rem .95rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.kk-app .kk-mini--del { color: var(--ktp-coral-d, #D8421F); }
.kk-app .kk-empty {
  margin: .5rem 0 0;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--kt-ink-soft, #5B6478);
}

/* ── 集計サマリー ───────────────────────────────────── */
.kk-app .kk-sum { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .2rem; }
.kk-app .kk-sum-cell {
  flex: 1 1 7rem;
  border-radius: 14px;
  background: var(--kt-bg-soft, #F2F6FF);
  padding: .7rem .8rem;
}
.kk-app .kk-sum-cap { margin: 0 0 .2rem; font-size: .74rem; color: var(--kt-ink-soft, #5B6478); }
.kk-app .kk-sum-val { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--kt-ink, #1E2433); white-space: nowrap; }
.kk-app .kk-sum-val--good { color: #2f7d5b; }
.kk-app .kk-sum-val--bad { color: var(--ktp-coral-d, #D8421F); }

/* ── カテゴリ内訳バー ───────────────────────────────── */
.kk-app .kk-break { display: flex; flex-direction: column; gap: .5rem; margin: .2rem 0 0; }
.kk-app .kk-break-row { display: flex; align-items: center; gap: .5rem; }
.kk-app .kk-break-name { flex: 0 0 6.4rem; font-size: .78rem; font-weight: 700; color: var(--kt-ink, #1E2433); overflow-wrap: anywhere; }
.kk-app .kk-break-track { flex: 1 1 auto; min-width: 0; height: 12px; border-radius: 999px; background: var(--kt-line, #E4E9F2); overflow: hidden; }
.kk-app .kk-break-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ktp-pink, #FF6FB5); transition: width .3s ease; }
.kk-app .kk-break-amt { flex: 0 0 auto; font-size: .76rem; font-weight: 700; color: var(--kt-ink-soft, #5B6478); white-space: nowrap; }

/* ── 直近の推移 ─────────────────────────────────────── */
.kk-app .kk-trend-legend { display: flex; gap: 1rem; margin: 0 0 .6rem; }
.kk-app .kk-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  color: var(--kt-ink-soft, #5B6478);
}
.kk-app .kk-trend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.kk-app .kk-trend-dot--inc { background: #2f7d5b; }
.kk-app .kk-trend-dot--exp { background: var(--ktp-coral, #FF8A65); }
.kk-app .kk-trend { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 .2rem; }
.kk-app .kk-trend-row { display: flex; align-items: center; gap: .5rem; }
.kk-app .kk-trend-ym { flex: 0 0 2.6rem; font-size: .76rem; font-weight: 800; color: var(--kt-ink, #1E2433); }
.kk-app .kk-trend-bars { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .22rem; }
.kk-app .kk-trend-track { height: 8px; border-radius: 999px; background: var(--kt-line, #E4E9F2); overflow: hidden; }
.kk-app .kk-trend-fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .3s ease; }
.kk-app .kk-trend-fill--inc { background: #2f7d5b; }
.kk-app .kk-trend-fill--exp { background: var(--ktp-coral, #FF8A65); }
.kk-app .kk-trend-amt {
  flex: 0 0 auto;
  font-size: .7rem;
  color: var(--kt-ink-soft, #5B6478);
  white-space: nowrap;
  text-align: right;
}

/* ── 連携 ───────────────────────────────────────────── */
.kk-app .kk-save-note {
  margin: .7rem 0 0;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--kt-ink-soft, #5B6478);
}
.kk-app .kk-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 0; }
.kk-app .kk-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 12px;
  padding: .5rem .9rem;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--kt-ink, #1E2433);
  background: var(--kt-bg-soft, #F2F6FF);
  border: 1.5px solid var(--kt-line, #E4E9F2);
}

/* ── ロック（非会員プレビュー） ─────────────────────── */
.kk-app .kk-lock-preview { position: relative; overflow: hidden; }
.kk-app .kk-lock-blur { filter: blur(3px); opacity: .7; pointer-events: none; user-select: none; }
.kk-app .kk-lock-veil {
  position: relative;
  margin-top: -.4rem;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.kk-app .kk-plan-lock { font-size: 1.6rem; }
.kk-app .kk-lock-veil-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--kt-ink, #1E2433);
}

.kk-app [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .kk-app .kk-break-fill,
  .kk-app .kk-trend-fill { transition: none; }
}