@charset "UTF-8";
/* =============================================================================
   エルピーヤ — styles.css
   全画面共通スタイル（ライトテーマ固定）

   このファイルが提供するクラス契約（各 screens-*.js はこの綴りを使うこと）
   ---------------------------------------------------------------------------
   レイアウト  .screen / .screen__title / .screen__lead / .section /
               .section__title / .section__desc / .stack / .row / .row--2 /
               .spacer / .divider
   カード      .card / .card--gradient / .card--soft / .card__label /
               .card__value / .card__unit / .card__sub / .card__foot
   入力        .field / .field__label / .field__hint / .field__error /
               .input / .textarea / .select / .input--error / .counter /
               .search / .search__input
   ボタン      .btn / .btn--primary / .btn--secondary / .btn--text /
               .btn--danger / .btn--block / .btn-row / .icon-btn / .fab
   チップ      .chips / .chip / .chip--selected
   タブ        .tabs / .tabs__item / .tabs__item--active
   リスト      .list / .list-row / .list-row__body / .list-row__title /
               .list-row__sub / .list-row__meta / .list-row__thumb /
               .list-row__action / .list-row__chevron / .list-row--danger
   情報行      .info-list / .info-row / .info-row__key / .info-row__val
   選択        .check-row / .check-row__box / .check-row__label / .switch
   進捗        .progress / .progress__bar / .progress__label
   バッジ      .badge / .badge--ok / .badge--warn / .badge--danger / .badge--mute
   画像        .thumb-grid / .thumb / .thumb__img / .thumb__remove / .thumb-add
   モック      .mock / .mock--pc / .mock--phone / .mock__screen / .mock__frame
   状態        .skeleton / .skeleton--title / .skeleton--card / .skeleton--row /
               .loading-text / .empty / .empty__text / .banner / .banner__text /
               .banner__retry
   浮くもの    .toast / .toast--success / .toast--danger /
               .modal / .modal__title / .modal__body / .modal__actions /
               .sheet
   ユーティリティ .t-title / .t-sub / .t-body / .t-note / .t-danger / .t-ok /
               .t-main / .t-center / .t-right / .num / .break-url / .sr-only

   app.js への約束:
   - タブバーを隠すときは #tabbar に hidden を付ける（本文下余白は自動調整）。
     .app-shell--no-tabbar を併用しても同じ結果になる。
   - モーダルを閉じるときは #modal-root に hidden を付ける。
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* 面と文字 */
  --c-bg: #FAF8FB;            /* オフホワイト背景 */
  --c-surface: #FFFFFF;       /* 面・カード */
  --c-text: #171018;          /* 本文字 */
  --c-text-sub: #6B6270;      /* 副文字 */
  --c-line: #ECE6EE;          /* 罫線 */
  --c-skeleton: #F1EDF3;      /* ローディング矩形 */

  /* ブランド */
  --c-main: #C13584;
  --c-sub: #5B2A86;
  --c-accent: #515BD4;
  --c-white: #FFFFFF;
  --c-black: #000000;

  /* 状態色 */
  --c-danger: #D92D5A;
  --c-danger-line: #F3C6D3;
  --c-danger-bg: #FFF3F6;
  --c-success: #2E7D57;

  /* グラデーション（この2本以外は作らない） */
  --grad-main: linear-gradient(135deg, #C13584 0%, #5B2A86 55%, #515BD4 100%);
  --grad-soft: linear-gradient(180deg, rgba(193, 53, 132, .06), rgba(81, 91, 212, .06));

  /* フォントスタック（意図書のとおり） */
  --font-title: system-ui, -apple-system, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --font-sub: 'Hiragino Sans', system-ui, -apple-system, 'Noto Sans JP', sans-serif;
  --font-body: -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

  /* タイポ3段階 */
  --fs-title: 22px;
  --lh-title: 1.35;
  --fs-sub: 17px;
  --fs-body: 15px;
  --lh-body: 1.6;
  --fs-note: 13px;
  --fs-input: 16px;   /* iOSズーム防止 */

  /* 余白（4の倍数） */
  --sp-screen: 20px;  /* 画面左右 */
  --sp-item: 12px;    /* 要素間 */
  --sp-group: 16px;   /* グループ間 */
  --sp-section: 24px; /* セクション間 */

  /* 角丸 */
  --r-card: 16px;
  --r-control: 12px;
  --r-pill: 999px;
  --r-thumb: 12px;

  /* 影は「実際に浮くもの」だけ */
  --shadow-float: 0 8px 24px rgba(91, 42, 134, .12);

  /* 寸法 */
  --h-header: 56px;
  --h-accent: 4px;
  --h-tabbar: 56px;
  --h-control: 48px;
  --tap-min: 44px;
  --content-max: 640px;

  /* 安全領域 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

/* ライト固定。dark を要求されてもトークンは変えない（意図書：表示テーマ ライト） */
[data-theme='light'] { color-scheme: light; }

/* -----------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  /* 日本語が一文字ずつ切れないように：既定は通常の禁則、必要時だけ折る */
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

a { color: var(--c-main); }

table { border-collapse: collapse; width: 100%; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--c-main);
  outline-offset: 2px;
}

::selection {
  background: rgba(193, 53, 132, .16);
  color: var(--c-text);
}

/* 登場アニメーションは使わない方針。残りの微細な動きも無効化する */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   3. シェル（ヘッダー / 本文 / タブバー）
   -------------------------------------------------------------------------- */
.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* --- ヘッダー：上端4pxグラデーションライン＋高さ56pxの白地sticky --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-surface);
  padding-top: var(--safe-top);
  border-bottom: 1px solid var(--c-line);
}

.app-header__accent {
  height: var(--h-accent);
  background: var(--grad-main);
}

.app-header__bar {
  position: relative;
  height: var(--h-header);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-header__back,
.app-header__action {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-control);
  color: var(--c-text);
}

.app-header__back:active { opacity: .88; }

.app-header__back-icon { display: block; }

.app-header__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--font-sub);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* 戻る矢印が hidden のときも中央を保つためのダミー幅 */
.app-header__back[hidden] + .app-header__title { margin-left: var(--tap-min); }

.app-header__action:empty { pointer-events: none; }

/* --- ログイン未実装の注意書き（1行） --- */
.notice-line {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px var(--sp-screen);
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--c-text-sub);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}

/* --- 通信失敗バナーの置き場 --- */
.banner-root {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--sp-screen);
  width: 100%;
}

.banner-root:empty { display: none; }

/* --- 本文 --- */
.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding:
    var(--sp-group)
    var(--sp-screen)
    calc(var(--sp-section) + var(--h-tabbar) + var(--safe-bottom));
  outline: none;
}

/* タブバーを隠す画面（S1・S2 など）では下余白からタブバー分を外す */
.app-shell--no-tabbar .app-main,
.app-shell:has(#tabbar[hidden]) .app-main {
  padding-bottom: calc(var(--sp-section) + var(--safe-bottom));
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-section);
}

.screen__title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-title);
  color: var(--c-text);
  margin: 0;
}

.screen__lead {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
  margin-top: 4px;
}

.screen__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- 下部タブバー --- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.tabbar__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--h-tabbar);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  color: var(--c-text-sub);
  font-family: var(--font-sub);
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.tabbar__item:active { opacity: .88; }

.tabbar__item--active { color: var(--c-main); }

.tabbar__label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
   4. タイポグラフィ・ユーティリティ
   -------------------------------------------------------------------------- */
.t-title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-title);
}

.t-sub {
  font-family: var(--font-sub);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.4;
}

.t-body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.t-note {
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text-sub);
}

.t-danger { color: var(--c-danger); }
.t-ok { color: var(--c-success); }
.t-main { color: var(--c-main); }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-strong { font-weight: 600; }

.num {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

.break-url {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   5. セクション・並び
   -------------------------------------------------------------------------- */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-group);
}

.section__title {
  font-family: var(--font-sub);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-item);
  min-height: 24px;
}

.section__desc {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
  margin-top: -8px;
}

/* 要素間12px の縦積み */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-item);
}

.stack--group { gap: var(--sp-group); }
.stack--tight { gap: 8px; }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-item);
  flex-wrap: wrap;
}

.row--between {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-item);
  align-items: end;
}

.row--input-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

@media (max-width: 359px) {
  .row--2 { grid-template-columns: 1fr; }
}

.divider {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}

.spacer { flex: 1 1 auto; }

/* -----------------------------------------------------------------------------
   6. カード（カードの中にカードを重ねない）
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--sp-group);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* タップできるカード（残高カードなど） */
.card[role='button'],
button.card,
a.card {
  width: 100%;
  text-align: left;
  min-height: var(--tap-min);
  color: inherit;
  text-decoration: none;
}

button.card:active,
a.card:active,
.card[role='button']:active { opacity: .88; }

/* 残高カード：グラデーション塗り */
.card--gradient {
  background: var(--grad-main);
  border-color: transparent;
  color: var(--c-white);
}

.card--gradient .card__label,
.card--gradient .card__sub,
.card--gradient .card__unit { color: rgba(255, 255, 255, .88); }

.card--gradient .card__value { color: var(--c-white); }

/* 淡い差し込み地 */
.card--soft {
  background-image: var(--grad-soft);
  background-color: var(--c-surface);
}

.card__label {
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--c-text-sub);
}

.card__value {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-title);
  font-variant-numeric: tabular-nums;
}

.card__unit {
  font-size: var(--fs-note);
  font-weight: 400;
  color: var(--c-text-sub);
  margin-left: 4px;
}

.card__sub {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-item);
  padding-top: 8px;
  border-top: 1px solid var(--c-line);
}

.card--gradient .card__foot { border-top-color: rgba(255, 255, 255, .28); }

/* 横並びの統計カード（進行中／今月の消費 など） */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-item);
}

@media (max-width: 359px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   7. 入力
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px; /* ラベルは上に4px空けて置く */
}

.field__label {
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--c-text-sub);
}

.field__req {
  color: var(--c-danger);
  margin-left: 4px;
}

.field__hint {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
}

.field__error {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-danger);
}

.field__error:empty { display: none; }

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--h-control);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: var(--fs-input);
  line-height: 1.5;
  color: var(--c-text);
  appearance: none;
  -webkit-appearance: none;
  transition: none;
}

.textarea {
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}

.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

.input::placeholder,
.textarea::placeholder { color: #A79FAC; }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--c-main);
  box-shadow: 0 0 0 3px rgba(193, 53, 132, .12);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--c-skeleton);
  color: var(--c-text-sub);
  cursor: not-allowed;
}

.input--error,
.input[aria-invalid='true'],
.textarea[aria-invalid='true'],
.select[aria-invalid='true'] { border-color: var(--c-danger); }

.input--error:focus,
.input[aria-invalid='true']:focus,
.textarea[aria-invalid='true']:focus,
.select[aria-invalid='true']:focus {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px rgba(217, 45, 90, .12);
}

.counter {
  align-self: flex-end;
  font-size: var(--fs-note);
  color: var(--c-text-sub);
  font-variant-numeric: tabular-nums;
}

.counter--over { color: var(--c-danger); }

/* 検索欄 */
.search { position: relative; }

.search__input {
  width: 100%;
  min-height: var(--h-control);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  padding: 0 14px 0 40px;
  font-size: var(--fs-input);
  color: var(--c-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 20px 20px;
}

.search__input:focus {
  outline: none;
  border-color: var(--c-main);
  box-shadow: 0 0 0 3px rgba(193, 53, 132, .12);
}

/* 数値入力のスピナーを消す（クレジット・価格） */
.input[type='number']::-webkit-outer-spin-button,
.input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input[type='number'] { -moz-appearance: textfield; }

/* -----------------------------------------------------------------------------
   8. ボタン
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--h-control);
  min-width: var(--tap-min);
  padding: 10px 16px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* 長い日本語ラベルはボタン外に溢れず折り返す */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.btn:active { opacity: .88; }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* 主ボタン：グラデ塗り・白文字 */
.btn--primary {
  background: var(--grad-main);
  color: var(--c-white);
  border-color: transparent;
}

/* 副ボタン：白地・1px罫線 */
.btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-line);
}

/* テキストボタン */
.btn--text {
  background: none;
  color: var(--c-main);
  border-color: transparent;
  padding: 10px 8px;
}

/* 削除：白地・淡い赤枠・赤文字 */
.btn--danger {
  background: var(--c-surface);
  color: var(--c-danger);
  border-color: var(--c-danger-line);
}

/* 小さめ（行内の操作など。タップ領域は44px維持） */
.btn--sm {
  min-height: var(--tap-min);
  padding: 8px 12px;
  font-size: var(--fs-note);
}

.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-item);
}

.btn-row--1 { grid-template-columns: 1fr; }
.btn-row--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 359px) {
  .btn-row,
  .btn-row--3 { grid-template-columns: 1fr; }
}

/* アイコンだけのボタン（…メニュー・削除など） */
.icon-btn {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-control);
  color: var(--c-text-sub);
}

.icon-btn:active { opacity: .88; }

/* ＋ボタン（ダッシュボード） */
.fab {
  position: fixed;
  right: calc(var(--sp-screen) + var(--safe-right));
  bottom: calc(var(--h-tabbar) + var(--safe-bottom) + var(--sp-group));
  z-index: 25;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--grad-main);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-float);
}

.fab:active { opacity: .88; }

.app-shell--no-tabbar .fab,
.app-shell:has(#tabbar[hidden]) .fab {
  bottom: calc(var(--safe-bottom) + var(--sp-group));
}

/* -----------------------------------------------------------------------------
   9. チップ
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text);
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.chip:active { opacity: .88; }

.chip--selected {
  background: var(--grad-main);
  border-color: transparent;
  color: var(--c-white);
}

.chip--mute {
  color: var(--c-text-sub);
  font-weight: 400;
}

/* -----------------------------------------------------------------------------
   10. タブ（画面内の切替：LINEコンテンツ4種・PC／スマホ など）
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__item {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--tap-min);
  padding: 10px 12px;
  font-family: var(--font-sub);
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text-sub);
  white-space: nowrap;
}

.tabs__item:active { opacity: .88; }

.tabs__item--active { color: var(--c-main); }

.tabs__item--active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--grad-main);
}

/* -----------------------------------------------------------------------------
   11. リスト（1列左揃え・行高最小56px・区切りは1px罫線のみ）
   -------------------------------------------------------------------------- */
.list {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-item);
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  text-align: left;
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-surface);
}

.list-row + .list-row { border-top: 1px solid var(--c-line); }

button.list-row:active,
a.list-row:active { opacity: .88; }

.list-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-row__title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-text);
  overflow-wrap: break-word;
}

.list-row__sub {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
  overflow-wrap: break-word;
}

.list-row__meta {
  flex: 0 0 auto;
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--c-text-sub);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.list-row__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--r-thumb);
  background: var(--c-skeleton);
  object-fit: cover;
  border: 1px solid var(--c-line);
}

.list-row__action {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-control);
  color: var(--c-text-sub);
  font-size: 18px;
  line-height: 1;
}

.list-row__action:active { opacity: .88; }

.list-row__chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--c-text-sub);
}

.list-row--danger .list-row__title { color: var(--c-danger); }

.list-row--selected { background-image: var(--grad-soft); }

.list__head {
  padding: 12px 16px;
  font-family: var(--font-sub);
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--c-text-sub);
  border-bottom: 1px solid var(--c-line);
}

/* 情報行（プロジェクト情報・削除される項目 など） */
.info-list {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-item);
  min-height: 56px;
  padding: 12px 16px;
}

.info-row + .info-row { border-top: 1px solid var(--c-line); }

.info-row__key {
  flex: 0 1 auto;
  font-size: var(--fs-note);
  color: var(--c-text-sub);
}

.info-row__val {
  flex: 1 1 auto;
  text-align: right;
  font-size: var(--fs-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  min-width: 0;
}

/* 並び替え可能な行（S12 LPセクション構成） */
.list-row--sortable { cursor: grab; }
.list-row--dragging { opacity: .6; }

.list-row__handle {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-sub);
}

/* -----------------------------------------------------------------------------
   12. チェック・トグル
   -------------------------------------------------------------------------- */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--sp-item);
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  text-align: left;
  background: var(--c-surface);
}

.check-row + .check-row { border-top: 1px solid var(--c-line); }

.check-row__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  accent-color: var(--c-main);
  margin: 0;
}

.check-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.check-row__note {
  font-size: var(--fs-note);
  color: var(--c-text-sub);
  line-height: 1.6;
}

.switch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  accent-color: var(--c-main);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   13. 進捗・バッジ
   -------------------------------------------------------------------------- */
.progress {
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-skeleton);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--c-main);
  border-radius: var(--r-pill);
}

.progress__label {
  font-size: var(--fs-note);
  color: var(--c-text-sub);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-text-sub);
  white-space: nowrap;
}

.badge--ok {
  color: var(--c-success);
  border-color: #C7E3D6;
  background: #F1F9F5;
}

.badge--warn {
  color: var(--c-sub);
  border-color: #DCD0E8;
  background: #F7F3FA;
}

.badge--danger {
  color: var(--c-danger);
  border-color: var(--c-danger-line);
  background: var(--c-danger-bg);
}

.badge--mute {
  color: var(--c-text-sub);
  border-color: var(--c-line);
  background: var(--c-bg);
}

/* -----------------------------------------------------------------------------
   14. 画像サムネイル
   -------------------------------------------------------------------------- */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-thumb);
  border: 1px solid var(--c-line);
  background: var(--c-skeleton);
  overflow: hidden;
}

.thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.thumb__remove:active { opacity: .88; }

.thumb-add {
  aspect-ratio: 1 / 1;
  min-height: var(--tap-min);
  border-radius: var(--r-thumb);
  border: 1px dashed var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-size: var(--fs-note);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 8px;
}

.thumb-add:active { opacity: .88; }

/* 画像を選ぶ<input type=file>は隠して、ラベルをタップ領域にする */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   15. デバイスモックアップ（S13 / S15）
   -------------------------------------------------------------------------- */
.mock-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-item);
}

@media (min-width: 720px) {
  .mock-grid { grid-template-columns: 1fr 1fr; }
}

.mock {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--sp-group);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock__label {
  font-size: var(--fs-note);
  color: var(--c-text-sub);
}

.mock__frame {
  border: 1px solid var(--c-line);
  border-radius: var(--r-thumb);
  background: var(--c-skeleton);
  overflow: hidden;
}

.mock--pc .mock__frame { aspect-ratio: 16 / 10; }

.mock--phone .mock__frame {
  aspect-ratio: 9 / 16;
  max-width: 200px;
  margin: 0 auto;
  border-radius: var(--r-card);
}

.mock__screen {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--c-white);
  display: block;
}

/* 実寸プレビュー：横スクロールで 1440px / 375px を見る */
.preview-stage {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 60vh;
}

.preview-stage__inner {
  border: 0;
  display: block;
  background: var(--c-white);
}

.preview-stage--pc .preview-stage__inner { width: 1440px; min-height: 900px; }
.preview-stage--phone .preview-stage__inner { width: 375px; min-height: 667px; margin: 0 auto; }

/* デザイン編集キャンバス */
.editor-canvas {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  background-image: var(--grad-soft);
  min-height: 220px;
  overflow: auto;
  padding: var(--sp-group);
}

.editor-node {
  border: 1px solid transparent;
  border-radius: var(--r-thumb);
  padding: 8px;
}

.editor-node--selected {
  border-color: var(--c-main);
  box-shadow: 0 0 0 3px rgba(193, 53, 132, .12);
}

/* 生成HTML・コードの表示 */
.code-block {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-thumb);
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-note);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
}

/* -----------------------------------------------------------------------------
   16. ローディングスケルトン
   -------------------------------------------------------------------------- */
.skeleton {
  background: var(--c-skeleton);
  border-radius: var(--r-control);
  width: 100%;
}

.skeleton--title {
  height: 28px;
  width: 60%;
  border-radius: 8px;
}

.skeleton--card {
  height: 96px;
  border-radius: var(--r-card);
}

.skeleton--row {
  height: 56px;
  border-radius: var(--r-control);
}

.skeleton--line {
  height: 14px;
  border-radius: 7px;
}

.skeleton--thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-thumb);
}

.loading-text {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
  text-align: center;
}

/* インライン待機表示（ボタン内など） */
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-note);
  color: var(--c-text-sub);
}

/* -----------------------------------------------------------------------------
   17. 空状態（説明1行＋主ボタン1つ）
   -------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-group);
  padding: var(--sp-section) var(--sp-group);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  text-align: center;
}

.empty__text {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
}

.empty .btn { min-width: 200px; }

/* -----------------------------------------------------------------------------
   18. エラーバナー（通信失敗）
   -------------------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-item);
  flex-wrap: wrap;
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-line);
  border-radius: var(--r-control);
  padding: 12px 16px;
  margin-bottom: var(--sp-item);
}

.banner__text {
  flex: 1 1 200px;
  min-width: 0;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-danger);
  overflow-wrap: break-word;
}

.banner__retry {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  padding: 8px 16px;
  border-radius: var(--r-control);
  border: 1px solid var(--c-danger-line);
  background: var(--c-surface);
  color: var(--c-danger);
  font-size: var(--fs-note);
  font-weight: 600;
  white-space: nowrap;
}

.banner__retry:active { opacity: .88; }

.banner__close {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-danger);
  font-size: 18px;
  line-height: 1;
}

/* 画面の中で使う注意書き（残高不足の警告など） */
.warn-box {
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-line);
  border-radius: var(--r-control);
  padding: 12px 16px;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-danger);
}

.note-box {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  padding: 12px 16px;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
}

/* -----------------------------------------------------------------------------
   19. トースト（浮くので影あり）
   -------------------------------------------------------------------------- */
.toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--h-tabbar) + var(--safe-bottom) + var(--sp-item));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--sp-screen);
  pointer-events: none;
}

.app-shell--no-tabbar ~ .toast-root,
.toast-root--bare { bottom: calc(var(--safe-bottom) + var(--sp-item)); }

.toast {
  pointer-events: auto;
  max-width: var(--content-max);
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-float);
  padding: 12px 16px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: var(--sp-item);
  min-height: var(--tap-min);
  overflow-wrap: break-word;
}

.toast--success { border-left: 4px solid var(--c-success); }
.toast--danger { border-left: 4px solid var(--c-danger); }

.toast__text {
  flex: 1 1 auto;
  min-width: 0;
}

.toast__action {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  padding: 8px 12px;
  color: var(--c-main);
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   20. モーダル・確認ダイアログ・操作シート（浮くので影あり）
   -------------------------------------------------------------------------- */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-screen);
  padding-bottom: calc(var(--sp-screen) + var(--safe-bottom));
  background: rgba(23, 16, 24, .40);
}

.modal {
  width: 100%;
  max-width: 420px;
  max-height: 84dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  padding: var(--sp-group);
  display: flex;
  flex-direction: column;
  gap: var(--sp-group);
}

.modal__title {
  font-family: var(--font-sub);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
}

.modal__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  overflow-wrap: break-word;
}

.modal__note {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--c-text-sub);
}

.modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-item);
}

.modal__actions--1 { grid-template-columns: 1fr; }

@media (max-width: 359px) {
  .modal__actions { grid-template-columns: 1fr; }
}

/* 下から出る操作シート（…メニューなど） */
.sheet {
  width: 100%;
  max-width: var(--content-max);
  margin-top: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.modal-root--sheet {
  align-items: flex-end;
  padding: var(--sp-item);
  padding-bottom: calc(var(--sp-item) + var(--safe-bottom));
}

/* -----------------------------------------------------------------------------
   21. noscript
   -------------------------------------------------------------------------- */
.noscript-note {
  margin: var(--sp-group) var(--sp-screen);
  padding: 12px 16px;
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-line);
  border-radius: var(--r-control);
  color: var(--c-danger);
  font-size: var(--fs-note);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   22. タブレット・PC（幅が広くても1列のまま中央に置く）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root { --content-max: 720px; }

  .app-main { padding-left: var(--sp-section); padding-right: var(--sp-section); }

  .tabbar {
    justify-content: center;
  }

  .tabbar__item { flex: 0 1 160px; }
}

@media (min-width: 1024px) {
  :root { --content-max: 840px; }

  .preview-stage { max-height: 70vh; }
}

/* すべてのタップ対象は最小44×44px（取りこぼし防止の最終保険） */
button,
[role='button'],
input[type='checkbox'],
input[type='radio'],
label.tap,
a.tap {
  min-height: var(--tap-min);
}

button.icon-btn,
button.list-row__action,
button.app-header__back,
.thumb__remove {
  min-width: var(--tap-min);
}

input[type='checkbox'],
input[type='radio'] {
  min-height: 22px;
}