@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 への約束:
   - 下部タブバーは廃止。ナビは左サイドバー（#sidebar）に集約した。
     認証画面ではシェルに .app-shell--no-nav が付き、サイドバーとアカウント表示が消える。
   - モーダルを閉じるときは #modal-root に hidden を付ける。
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* 面と文字（ttalkkak-ai.com 準拠：ラベンダー地に白パネル） */
  --c-bg: #F4F1FB;            /* 画面地。白ではなく薄いラベンダー */
  --c-surface: #FFFFFF;       /* 面・カード */
  --c-surface-2: #FBFAFE;     /* 一段沈めた面 */
  --c-text: #2A2440;          /* 本文字。黒ではなく紫寄りの濃紺 */
  --c-text-sub: #6B6385;      /* 副文字 */
  --c-line: #E8E3F4;          /* 罫線 */
  --c-line-soft: #F1EDF9;     /* 薄い区切り */
  --c-skeleton: #F1EDF9;      /* ローディング矩形 */

  /* ブランド */
  --c-main: #A855F7;
  --c-main-press: #9333EA;
  --c-sub: #7C3AED;
  --c-accent: #DB2777;
  --c-white: #FFFFFF;
  --c-black: #000000;

  /* 状態色 */
  --c-danger: #F43F5E;
  --c-danger-line: #FBD0D9;
  --c-danger-bg: #FFF1F4;
  --c-success: #10B981;
  --c-warn: #F59E0B;

  /* グラデーション（アクセント限定：上端ライン・CTA・残高カードのみ。この2本以外は作らない） */
  --grad-main: linear-gradient(120deg, #7C3AED 0%, #A21CAF 48%, #DB2777 100%);
  --grad-soft: linear-gradient(180deg, rgba(168, 85, 247, .06), rgba(219, 39, 119, .05));

  /* フォントスタック（意図書のとおり） */
  --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: 26px;
  --lh-title: 1.3;
  --fs-sub: 17px;
  --fs-body: 15px;
  --lh-body: 1.6;
  --fs-note: 13px;
  --fs-input: 16px;   /* iOSズーム防止 */

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

  /* 角丸（コーポレートミニマル：ほぼ直角） */
  --r-card: 14px;
  --r-control: 10px;
  --r-pill: 999px;
  --r-thumb: 12px;

  /* 影は「実際に浮くもの」だけ */
  --shadow-card: 0 1px 3px rgba(80, 60, 120, .07);
  --shadow-float: 0 2px 8px rgba(90, 70, 130, .10), 0 14px 40px rgba(120, 90, 170, .12);

  /* 寸法 */
  --h-header: 56px;
  --h-accent: 4px;
  --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-sub); }

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

[hidden] { display: none !important; }

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

::selection {
  background: rgba(91, 42, 134, .14);
  color: var(--c-text);
}

/* 登場アニメーションは使わない方針。残りの微細な動きも無効化する */
@media (prefers-reduced-motion: reduce) {
  /* 仕事の進行バーの縞だけは除く。これは飾りではなく「止まっていない」ことの
     唯一の合図で、消すと進行中と停止中が見分けられない（実測: macOS の
     「視差効果を減らす」を入れている端末で、受付待ちのバーが完全な静止画に
     見え、動いていないと受け取られた）。下の方で ゆっくり・薄く し直す */
  *:not(.jobwatch__fill) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .jobwatch__fill { transition: none !important; }
}

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

/* --- ヘッダー：グラデーション地にブランドとアカウント状態を並べる（ttalkkak の ws-header 相当） --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  padding-top: calc(10px + var(--safe-top));
  /* 高さを決め打ちにする。中身で伸び縮みすると、下の工程タブが貼り付く位置
     （sticky の top）も一緒に動き、スクロールのたびにタブが上下する。
     入っているのはブランドと account の短い1行だけなので、伸びる余地は要らない */
  height: calc(var(--h-header) + var(--safe-top));
  background:
    linear-gradient(90deg, rgba(20, 8, 40, .04), rgba(20, 8, 40, .18)),
    var(--grad-main);
  color: var(--c-white);
}

.app-header__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-control);
  color: var(--c-white);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  cursor: pointer;
}

.app-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--c-white);
  text-decoration: none;
  font-family: var(--font-title);
  font-size: var(--fs-sub);
  font-weight: 800;
  letter-spacing: -.3px;
  white-space: nowrap;
}

.app-header__spacer { flex: 1 1 auto; }

.app-header__account {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* ヘッダーに並ぶ丸いチップ（残高・プラン・アカウント名） */
.head-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 200px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
  color: var(--c-white);
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
}

.head-chip--strong { background: rgba(255, 255, 255, .26); font-weight: 800; }
.head-chip--plain { cursor: default; }
.head-chip:hover { background: rgba(255, 255, 255, .26); }

/* --- 本体：左サイドバー＋右カラム --- */
.app-body {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.sidebar {
  flex: 0 0 232px;
  width: 232px;
  border-right: 1px solid var(--c-line);
  background: var(--c-surface);
  padding: 12px 10px calc(20px + var(--safe-bottom));
  overflow-y: auto;
  position: sticky;
  top: calc(var(--h-header) + var(--safe-top));
  height: calc(100dvh - var(--h-header) - var(--safe-top));
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line-soft);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--c-text-sub);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar__item:hover { background: var(--c-surface-2); color: var(--c-text); }

.sidebar__item--active {
  background: rgba(168, 85, 247, .12);
  color: var(--c-sub);
}

.sidebar__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.sidebar__heading {
  flex: 1 1 auto;
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--c-text);
}

.sidebar__refresh {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-sub);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.sidebar__refresh:hover { background: var(--c-surface-2); color: var(--c-text); }

.sidebar__projects {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar__proj {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  background: var(--c-surface-2);
  width: 100%;
}

/* 名前と日付を押すと詳細へ。日付の行は右下のアイコンと同じ高さに来るので、
   その行だけアイコンぶん右を空ける（名前の行は全幅使える） */
.sidebar__proj-main {
  display: block;
  width: 100%;
  padding: 11px 12px 10px;
  border: 0;
  background: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* 操作アイコンは右下にまとめて常時出す。日付の行と同じ高さに並ぶので、
   名前の幅を削らずに済む */
.sidebar__proj-acts {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 3px;
}

.sidebar__proj-act {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar__proj-act:hover { background: var(--c-line); color: var(--c-text); }
.sidebar__proj-act--delete:hover {
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .35);
  color: #DC2626;
}
.sidebar__proj-act:disabled { opacity: .5; cursor: default; }


.sidebar__proj--active {
  border-color: var(--c-main);
  background: rgba(168, 85, 247, .12);
}

.sidebar__proj-name {
  display: block;
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__proj-date {
  display: block;
  margin-top: 4px;
  padding-right: 84px;
  font-size: 11px;
  color: var(--c-text-sub);
}

.sidebar__empty {
  padding: 10px 12px;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--c-text-sub);
}

.sidebar__backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 8, 40, .38);
}

.app-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 画面タイトルと戻る（旧ヘッダーの中身） */
/* 工程の耳は、下までスクロールしても常に見えるようにする。
   ヘッダー（sticky・z-index 60）のすぐ下に貼り付く。
   耳が見えていないと、いま何番目の工程にいるのかが分からなくなり、
   別の工程へ移るのにいちいち上まで戻ることになる。 */
.app-subhead {
  position: sticky;
  /* 貼り付く位置はヘッダーの高さそのもの。ヘッダーは高さを決め打ちにして
     あるので、ここも同じ式で書けば必ず一致する。
     前は app.js が実測して --h-header-real に入れていたが、測る時機が
     ずれると耳が動く（実測: スクロールのたびに工程タブが上下していた）。
     測るのをやめれば、そのずれ自体が起きない */
  top: calc(var(--h-header) + var(--safe-top));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 0 8px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

.app-subhead__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--font-sub);
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 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__back[hidden] + .app-subhead__title { margin-left: var(--tap-min); }

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

/* 戻るも操作も無い画面（S3 など）では、タイトルだけの帯を出さない */
.app-subhead:has(#header-back[hidden]):has(#header-action:empty) { display: none; }

/* 認証画面（S1/S2）ではサイドバーとアカウント表示を出さない */
.app-shell--no-nav .sidebar,
.app-shell--no-nav .sidebar__backdrop,
.app-shell--no-nav #sidebar-toggle,
.app-shell--no-nav .app-header__account { display: none; }

/* --- 通信失敗バナーの置き場 --- */
.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(--safe-bottom));
  outline: none;
}

/* 狭い画面ではサイドバーを引き出しにする */
@media (max-width: 860px) {
  .app-header__icon { display: flex; }
  .sidebar {
    position: fixed;
    left: 0;
    top: calc(var(--h-header) + var(--safe-top));
    z-index: 56;
    box-shadow: var(--shadow-float);
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .app-shell--sidebar-open .sidebar { transform: translateX(0); }
  .sidebar__backdrop[hidden] { display: none; }
}

@media (min-width: 861px) {
  .sidebar__backdrop { display: none; }
  .app-main { max-width: 900px; }
}

/* 段の間。これまで各段にも margin-bottom が残っていて、
   gap と足されて52pxになっていた（2026-10-05 指摘「行ごとの余白が広すぎ」）。
   margin は外し、間はここだけで決める */
.screen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-group);
}

.screen__title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  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;
  align-items: flex-start;
  gap: 4px;
  /* 見出しのかたまりの下だけ、少し多めに空ける */
  margin-bottom: 8px;
}

/* 見出し下の短いグラデーション罫線（グラデはアクセント限定で使う） */
.screen__head::after {
  content: '';
  width: 40px;
  height: 3px;
  margin-top: 8px;
  background: var(--grad-main);
}


/* -----------------------------------------------------------------------------
   4. タイポグラフィ・ユーティリティ
   -------------------------------------------------------------------------- */
.t-title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  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);
  /* end 揃えだと、注記の有無で高さが変わる相方に引っ張られてラベルと入力欄の段が
     ずれる。上揃えにして、ラベル行と入力欄の高さを揃える */
  align-items: start;
}

.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);
  /* 透明な1px枠にグラデの繰り返しが覗くのを防ぐ。background ショートハンドの後に置くこと */
  background-origin: border-box;
  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: 700;
  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);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
}

.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: 44px;
  background-color: var(--c-bg);
  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='%234A4458' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(var(--c-line), var(--c-line));
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, right 40px center;
  background-size: 20px 20px, 1px 60%;
  cursor: pointer;
}

.select:hover { border-color: var(--c-main); }

@media (prefers-reduced-motion: no-preference) {
  .select { transition: border-color .15s ease; }
}

.input::placeholder,
.textarea::placeholder { color: #9B94AE; }

/* -----------------------------------------------------------------------------
   工程タブ（商品入力 → 競合LP分析 → 分析レポート → 生成プロンプト → 生成結果）
   画面のいちばん上に置き、どの工程からでも他の工程へ移れるようにする。
   -------------------------------------------------------------------------- */
.wtabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* 耳が入っている行は、耳の下辺を境目にそろえる */
.app-subhead--tabs {
  align-items: stretch;
  padding-bottom: 0;
  min-height: 52px;
}

/* 工程の耳が出ているときは戻る矢印を出さない。
   どの工程へでも耳から直接移れるうえ、各画面の下に戻る導線があるので、
   矢印は行を詰めているだけだった */
.app-subhead--tabs .app-header__back { display: none; }

.wtabs::-webkit-scrollbar { height: 0; }

.wtabs__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-top: 7px;
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--c-bg);
  color: var(--c-text-sub);
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  position: relative;
}

.wtabs__item:active { opacity: .88; }

/* まだ画面が無い工程。全体で何工程あるかは見せたいので耳は出し、押せなくする */
.wtabs__item--pending {
  opacity: .45;
  cursor: not-allowed;
}
.wtabs__item--pending:active { opacity: .45; }

.wtabs__item--active {
  background: var(--c-surface);
  color: var(--c-text);
  cursor: default;
}

/* 選んでいる耳だけ、下の境目を消して中身とつなげる */
.wtabs__item--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-surface);
}

.wtabs__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-line);
  color: var(--c-text-sub);
  font-size: 11px;
  font-weight: 700;
}

.wtabs__item--active .wtabs__no {
  background: var(--c-sub);
  color: var(--c-white);
}

@media (max-width: 560px) {
  .wtabs__no { width: 17px; height: 17px; }
  .wtabs__item { padding: 8px 10px; }
  .wtabs__label { display: none; }
  .wtabs__item--active .wtabs__label { display: inline; }
}

/* 生成待ちの素材（S13）。1行に何枚も並べて見比べる */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-item);
  align-items: start;
}

.asset-card {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.asset-card .chips { gap: 4px; }

.asset-card .badge {
  padding: 2px 7px;
  font-size: 10.5px;
}

.asset-card .card__label {
  font-size: var(--fs-note);
  line-height: 1.5;
  margin: 0;
}

.asset-card .card__sub { font-size: 12px; }

/* できあがったものは現物を出す */
.asset-view {
  display: block;
  margin: 10px 0 4px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-thumb);
  overflow: hidden;
  background: var(--c-skeleton);
}

.asset-view__media {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: var(--c-skeleton);
}

/* まだ作っている最中の枠 */
.asset-view--making {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-skeleton);
}

.asset-prompt,
.asset-paste { margin-top: 0; }

.asset-prompt,
.asset-paste { margin-top: 10px; }

.asset-prompt__head,
.asset-paste > summary {
  cursor: pointer;
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--c-text-sub);
  padding: 4px 0;
  list-style: none;
}

.asset-prompt__head::-webkit-details-marker,
.asset-paste > summary::-webkit-details-marker { display: none; }

.asset-prompt__head::before,
.asset-paste > summary::before {
  content: '▸ ';
  color: var(--c-sub);
}

.asset-prompt[open] > .asset-prompt__head::before,
.asset-paste[open] > summary::before { content: '▾ '; }

/* 生成プロンプトの編集欄（S12）。長文をそのまま読むので、等幅で高めに取る */
.textarea--short { min-height: 96px; }

.textarea--prompt {
  min-height: 220px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--c-sub);
  box-shadow: 0 0 0 3px rgba(91, 42, 134, .14);
}

.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='%236B6385' 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-sub);
  box-shadow: 0 0 0 3px rgba(91, 42, 134, .14);
}

/* 数値入力のスピナーを消す（クレジット・価格） */
.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);
  /* 透明な1px枠にグラデの繰り返しが両端の色として覗くのを防ぐ（background の後ろに置くこと） */
  background-origin: border-box;
  color: var(--c-white);
  border-color: transparent;
}

/* 副ボタン：白地・黒1px枠（Accenture風アウトライン） */
.btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-text);
}

/* テキストボタン */
.btn--text {
  background: none;
  color: var(--c-sub);
  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(--safe-bottom) + var(--sp-section));
  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-nav .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(--c-sub);
  border-color: transparent;
  color: var(--c-white);
}

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

/* 競合が達成したか伸びなかったか（S10）。選んだ側だけ色を持たせる */
.chip--sm {
  min-height: 0;
  padding: 4px 12px;
  font-size: 12px;
}

/* 照合を通らなかったが残した絵に付ける。消さずに見て決めてもらう */
.chip--warn {
  background: var(--c-warn-weak, #FFF4E5);
  color: var(--c-warn, #B26A00);
  border-color: var(--c-warn, #B26A00);
}

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

.chip--failure {
  background: var(--c-danger);
  border-color: transparent;
  color: var(--c-white);
}

/* -----------------------------------------------------------------------------
   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-sub); }

.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--tap {
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: background-color .15s ease;
}

.list-row--tap:hover { background: var(--c-bg); }
.list-row--tap:active { opacity: .9; }

/* 飾りになった矢印。押せる的ではないので、当たり判定は出さない */
.list-row--tap .list-row__action { pointer-events: none; }

.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-sub);
  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-sub);
  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-sub);
  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: #BFE9D6;
  background: #ECFDF5;
}

.badge--warn {
  color: var(--c-sub);
  border-color: var(--c-line);
  background: var(--c-surface-2);
}

.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;
}

/* たたんでおいて押すと開く1件（競合ページの流れ・重要要素）。
   閉じているときは見出しだけ、開くと役割・つなぎ・読み手の状態まで出す */
.fold {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.fold + .fold { margin-top: 8px; }

.fold:hover { border-color: var(--c-line-strong, #ddd6ea); }

/* 開いている1件は影で少し持ち上げ、いま読んでいる場所を分かりやすくする */
.fold[open] {
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(43, 30, 60, .10), 0 0 0 1px rgba(122, 62, 168, .16);
}

.fold__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.fold__head::-webkit-details-marker { display: none; }

/* 開閉の印。文字と同じくらいの大きさにして、押すところだと分かるようにする */
.fold__head::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background:
    linear-gradient(var(--c-text-sub), var(--c-text-sub)) center / 9px 2px no-repeat,
    linear-gradient(var(--c-text-sub), var(--c-text-sub)) center / 2px 9px no-repeat;
  background-color: var(--c-bg);
  transition: transform .18s ease, background-color .18s ease;
}

/* 開いたら「＋」を「－」にする（縦棒を消す） */
.fold[open] > .fold__head::before {
  background:
    linear-gradient(var(--c-white), var(--c-white)) center / 9px 2px no-repeat;
  background-color: var(--c-accent);
}

.fold--danger[open] > .fold__head::before { background-color: var(--c-danger); }

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

.fold__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-text);
}

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

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

.fold__body {
  margin: 0 16px 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

/* 避けたい点は赤で示す。見出しの文字も合わせる */
.fold--danger { border-color: var(--c-danger); }
.fold--danger .fold__title { color: var(--c-danger); }

/* 見出しと中身を縦に積む情報行（横並びだと本文が細くなって読めない）。
   1件ずつを罫線で区切ると表のように読める */
.info-row--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  /* 中身（素材の帯）が親より広くならないようにする。
     これが無いと、帯が区画の面をはみ出して描かれる */
  align-self: stretch;
  min-width: 0;
}

.info-row--stack:last-child { border-bottom: 0; padding-bottom: 0; }
.info-row--stack:first-child { padding-top: 0; }

.info-row--stack .info-row__key {
  font-size: var(--fs-note);
  letter-spacing: .04em;
  color: var(--c-text-sub);
}

.info-row--stack .info-row__val {
  text-align: left;
  white-space: normal;
  font-weight: 600;
  line-height: 1.75;
}

/* 持ち帰る1行。素材と事実を見たあとに残るのはここだけなので、
   面を敷いて文字を大きくし、他の行と段を分ける。
   区画の左右いっぱいに広げた分だけ内側に余白を戻すので、
   文字の左端は上の行とそろう（枠を内側に浮かせると、
   この行だけ字下げされて左端がガタつく）。下は区画の底に
   ぴったり付ける。親が overflow:hidden なので角も丸まる */
.info-row--stack.info-row--lead {
  margin: 12px -16px -14px;
  padding: 16px;
  border: 0;
  border-top: 2px solid var(--c-sub);
  background: var(--c-white);
}

.info-row--stack.info-row--lead .info-row__key {
  color: var(--c-sub);
  font-weight: 700;
}

.info-row--stack.info-row--lead .info-row__val {
  font-size: calc(var(--fs-body) * 1.18);
  font-weight: 700;
  line-height: 1.6;
}

/* 反省点は、真似したい点と取り違えると害があるので色を分ける */
.info-row--stack.info-row--lead-danger { border-top-color: var(--c-danger); }
.info-row--stack.info-row--lead-danger .info-row__key { color: var(--c-danger); }

/* 収集した素材の置き場。100枚を超えることがあり、縦に全部並べると
   ページの流れや要因の話が下へ押し出されて読めなくなる。
   3行の帯に収め、続きは帯の中を横に送って見る。 */
.thumb-strip {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 88px);
  grid-auto-columns: 88px;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* 影と枠が切れないよう内側に余白を取り、その分を外へ戻す */
  padding: 2px 2px 10px;
  margin: 0 -2px;
  scrollbar-width: thin;
}

.thumb-strip .thumb {
  width: 88px;
  height: 88px;
  aspect-ratio: auto;
}

/* 区画の中で見せる素材は点数が少ないので1行。少し大きく出す */
.thumb-strip--one {
  grid-template-rows: 108px;
  grid-auto-columns: 108px;
  padding-bottom: 6px;
}

.thumb-strip--one .thumb { width: 108px; height: 108px; }

/* KV は最初の1画面ぶんしか無いので1行。3行にすると本文の帯と見分けがつかない */
.thumb-strip--kv {
  grid-template-rows: 88px;
  padding-bottom: 6px;
}

/* 帯は親の幅に収める。収めないと、中身の広さのまま
   親（区画の面）の外へはみ出して描かれる */
.thumb-strip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* 区画の見出しと中身を分ける仕切り。真ん中に置いて大きく太くする */
.src-divider {
  margin: 22px 0 12px;
  text-align: center;
  font-family: var(--font-sub);
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.src-divider::before,
.src-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line);
}

.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; }

/* 商品カットの印（S4）。★が付いたものだけを素材生成の見本に渡す */
/* 競合LP別の分析。1件ずつカルーセルで送る */
.carousel__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.src-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* 競合カードの中に入れる成否判定。カードの他の中身（分析の文章）と
   混ざらないよう、薄い面で1区画として囲う */
.verdict-box {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  background: var(--c-surface-2);
  display: grid;
  gap: 8px;
}

.verdict-box__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.verdict-box__title {
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--c-text);
}

.verdict-box .info-list { margin: 0; }

/* 何件目を見ているかは、いちばん先に知りたいこと。
   カードの枠の外（上辺）に貼り付く耳として出す。
   下側の角を落とし、下辺をカードの枠に1px重ねて、
   カードと1枚につながって見えるようにする。
   DOM 上はカードの子。こうしておくと左右に送ったとき、
   カードの transform に乗って耳も一緒に滑る */
.src-card__tab {
  position: absolute;
  left: -1px;
  bottom: calc(100% + 1px);
  z-index: 1;
  padding: 9px 20px;
  border-radius: 14px 14px 0 0;
  background: var(--grad-main);
  color: var(--c-white);
  font-family: var(--font-sub);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
}

/* 耳が付く側の角は落とす。丸いままだと耳とカードのあいだに隙間が見える */
.carousel__card:has(.src-card__tab) { border-top-left-radius: 0; }

.carousel__card .thumb-grid { margin-top: 2px; }
.carousel__card .list { margin-top: -2px; }

/* 動く素材の印。★（左下）と ×（右上）を避けて左上に置く */
.thumb__tag {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .58);
  color: var(--c-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  pointer-events: none;
}

.thumb__pick {
  position: absolute;
  left: 2px;
  bottom: 2px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .46);
  color: var(--c-white);
  font-size: 15px;
  line-height: 1;
}

.thumb__pick--on {
  background: var(--c-sub);
  color: var(--c-white);
}

.thumb__pick:active { opacity: .88; }

.thumb-add {
  position: relative;
  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;
  /* 文字の上でも I ビームに変えず、ボックス全体を押せる面として見せる */
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

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

/* 追加ボックスの上に写真をドラッグしている間の見た目 */
.thumb-add--over {
  border-style: solid;
  border-color: var(--c-main);
  color: var(--c-main);
  background: var(--c-skeleton);
}

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

/* -----------------------------------------------------------------------------
   14b. パネル（ttalkkak の상품입력カード）とドロップゾーン
   -------------------------------------------------------------------------- */
.panel {
  /* パネルの中身は直下の要素どうしを一定間隔で並べる。
     個々の要素に margin を持たせると、追加するたびに詰まりや二重余白が出る */
  display: flex;
  flex-direction: column;
  gap: var(--sp-item);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: var(--sp-group);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel__action {
  flex: 0 0 auto;
  margin-left: auto;
}

/* 見出しの脇に置く小さめのボタン */
.btn--sm {
  min-height: 32px;
  padding: 5px 12px;
  font-size: var(--fs-note);
}

.panel__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-title);
  font-size: var(--fs-sub);
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -.2px;
}

.panel__desc {
  margin: -6px 0 4px;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* 写真の追加口。小さなタイルではなくパネル幅いっぱいの受け皿にする */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 116px;
  padding: 20px 16px;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-thumb);
  background: var(--c-surface-2);
  color: var(--c-text-sub);
  font-size: var(--fs-note);
  text-align: center;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

.dropzone__sub { font-size: var(--fs-xs, 12px); color: var(--c-text-sub); opacity: .85; }

/* 透明な input を枠いっぱいに敷いて、クリックもドロップもブラウザ自身に処理させる。
   JSでクリックを転送する方式は環境によって開かないことがあるため使わない */
.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.dropzone--over { border-style: solid; border-color: var(--c-main); background: rgba(168, 85, 247, .06); color: var(--c-main); }
.dropzone:active { opacity: .9; }

/* -----------------------------------------------------------------------------
   14c. ブランドカラーの見本とターゲット案のラベル
   -------------------------------------------------------------------------- */
/* 配色案。フォントの選択肢と同じく「候補から選ぶ」ための札。
   押すと下のスウォッチ（1色ずつ直せる方）に入る */
.palettes { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.palettes__lead { margin: 0 0 2px; }
.palette {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  background: var(--c-surface);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}
.palette:hover { border-color: var(--c-text-sub); }
.palette--picked { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset; }
.palette__strip { display: flex; flex: 0 0 auto; gap: 2px; }
.palette__chip { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }
.palette__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.palette__name { font-size: var(--fs-note); font-weight: 600; }
.palette__note { font-size: var(--fs-note); color: var(--c-text-sub); }

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.swatch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 26px 6px 6px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  background: var(--c-surface);
}

.swatch__input {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.swatch__code {
  width: 84px;
  border: none;
  background: none;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-note);
  text-transform: uppercase;
}

.swatch__code:focus { outline: none; }

.swatch__remove {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-sub);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.swatch__remove:hover { background: var(--c-skeleton); color: var(--c-text); }

/* ターゲット案の A〜E */
/* パネル直下のボタンは横いっぱいに伸ばさず、中身の幅で左に置く */
.panel > .btn { align-self: flex-start; }

.target-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--grad-main);
  background-origin: border-box;
  color: var(--c-white);
  font-size: var(--fs-note);
  font-weight: 800;
}

/* -----------------------------------------------------------------------------
   15. デバイスモックアップ（S13 / S15）
   -------------------------------------------------------------------------- */
/* プレビューは1台ずつ。左右の矢印で PC とスマホを行き来する */
.mock-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.mock-stage__arrow {
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-size: 20px;
  line-height: 1;
}

.mock-stage__arrow:active { opacity: .88; }

@media (max-width: 480px) {
  .mock-stage { gap: 2px; }
  .mock-stage__arrow { width: 34px; }
}

.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);
}

/* ---- 端末のモックアップ（S13 のプレビュー）----
   PC はブラウザの窓、スマホは本体の縁。中身は実寸で描いてから縮尺を
   かけるので、文字と余白の関係は実機と同じに見える */
.device {
  background: #2A2536;
  box-shadow: 0 2px 6px rgba(40, 30, 70, .12), 0 18px 40px rgba(40, 30, 70, .18);
}

.device--pc {
  border-radius: 10px;
  padding: 0 0 8px;
  overflow: hidden;
}

.device__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px;
}

.device__dots { display: inline-flex; gap: 6px; }

.device__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}

.device__dot--r { background: #FF5F57; }
.device__dot--y { background: #FEBC2E; }
.device__dot--g { background: #28C840; }

.device__url {
  flex: 1;
  height: 17px;
  line-height: 17px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  letter-spacing: .02em;
  overflow: hidden;
  white-space: nowrap;
}

.device--phone {
  position: relative;
  width: min(300px, 100%);
  margin: 0 auto;
  border-radius: 38px;
  padding: 11px;
}

.device__island {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 19px;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}

.mock__frame {
  position: relative;
  background: var(--c-white);
  /* 端末の画面の上でそのままスクロールできるよう、枠のほうを動かす */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mock__frame::-webkit-scrollbar { width: 0; height: 0; }

/* スクロールできる高さを作るためだけの下敷き（縮尺後の高さを持つ） */
.mock__scroll {
  width: 1px;
  pointer-events: none;
}

.device--pc .mock__frame {
  aspect-ratio: 16 / 10;
  margin: 0 8px;
  border-radius: 4px;
}

.device--phone .mock__frame {
  aspect-ratio: 9 / 19.5;
  border-radius: 28px;
}

.mock__screen {
  /* 実寸（1440px / 390px）で描いてから縮尺をかける。
     ・全体に効いている max-width:100% が残っていると、iframe が枠の幅まで
       縮められたうえに更に縮小され、中身が左の一部にしか出ない
     ・縮尺は見た目だけを変えるので、実寸のまま並びに参加させると枠を
       押し広げてしまう。絶対配置にして枠の外に出さない */
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  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-sub);
  box-shadow: 0 0 0 3px rgba(91, 42, 134, .14);
}

/* 生成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(--safe-bottom) + var(--sp-group));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--sp-screen);
  pointer-events: none;
}

.app-shell--no-nav ~ .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(17, 17, 17, .44);
}

.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;
}

/* 開いたときだけ読む中身。見出しと中身を1つの塊にして、
   どこまでが1項目なのかを分かるようにする */
.modal__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.modal__block-key {
  font-size: var(--fs-note);
  letter-spacing: .04em;
  color: var(--c-text-sub);
}

/* 手順。番号を落とすと「どれから」が消えるので、番号は残す */
.modal__steps {
  margin: 0;
  padding-left: 1.35em;
  font-size: var(--fs-body);
  line-height: 1.7;
}

.modal__steps li + li { margin-top: 4px; }

.modal__sources {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-note);
  line-height: 1.6;
}

.modal__sources li + li { margin-top: 4px; }
.modal__sources a { color: var(--c-sub); }

/* 持ち帰る1行。長い文なので、値を右に寄せる .info-row の枠には入れない
   （枠に文字が貼り付いて行が崩れる） */
.modal__lead {
  padding: 14px 16px;
  border-left: 3px solid var(--c-sub);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--c-bg);
}

.modal__lead--danger { border-left-color: var(--c-danger); }

.modal__lead-key {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--c-sub);
}

.modal__lead--danger .modal__lead-key { color: var(--c-danger); }

.modal__lead-val {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  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); }

    }

@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);
}

/* 左の一覧に並ぶ操作アイコンは、この保険から外す。
   1項目に3つ横並びなので、44pxだと縦に伸びて名前の行まで覆ってしまう。
   ponytail: 当たり判定は見た目どおりの24pxで、44pxの推奨より小さい。
   見えない当たり判定を44pxに広げる手もあるが、3つが重なって
   隣のアイコンを誤爆するので採らない。指で触る端末で取りこぼすようなら、
   横並びをやめて「…」1つに畳む。 */
.sidebar__proj-act { min-height: 0; }

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;
}

/* -----------------------------------------------------------------------------
   20. S0 ログイン前ホーム（ttalkkak-ai.com のトップページ構成）
   -------------------------------------------------------------------------- */
.lp {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- ヒーロー：背景に映像、その上に紗をかけて白文字を置く --- */
/* ランディングは本文の横幅制限を外してあるので、ヒーローはそのままブラウザ幅になる */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  padding: 88px 28px 80px;
  text-align: center;
  color: var(--c-white);
  background: var(--grad-main);
}

.lp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* 映像の上の紗。これが無いと白文字が読めない */
.lp-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 8, 40, .34), rgba(20, 8, 40, .62)),
    linear-gradient(120deg, rgba(124, 58, 237, .5), rgba(219, 39, 119, .42));
}

.lp-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lp-hero__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(28px, 5.4vw, 46px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -.02em;
}

.lp-hero__lead {
  margin: 0;
  max-width: 620px;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(255, 255, 255, .9);
}

.lp-hero__note {
  margin: 0;
  font-size: var(--fs-note);
  color: rgba(255, 255, 255, .78);
}

.lp-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .14);
  font-size: var(--fs-note);
  font-weight: 700;
  letter-spacing: .02em;
}

.lp-eyebrow--dark {
  border-color: var(--c-line);
  background: rgba(168, 85, 247, .1);
  color: var(--c-sub);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.lp-cta {
  min-width: 168px;
  height: var(--h-control);
  padding: 0 24px;
  font-weight: 800;
}

.lp-cta--ghost {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--c-white);
}

.lp-cta--onband {
  background: var(--c-white);
  color: var(--c-sub);
  border: none;
}

/* --- 説明セクション --- */
.lp-section {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px var(--sp-screen) 8px;
  text-align: center;
}

.lp-section__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(21px, 3.4vw, 30px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--c-text);
}

.lp-section__desc {
  margin: 0;
  max-width: 620px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text-sub);
}

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 20px;
  text-align: left;
}

.lp-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.lp-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border-radius: var(--r-pill);
  background: var(--grad-main);
  color: var(--c-white);
  font-size: var(--fs-note);
  font-weight: 800;
}

.lp-card__title {
  display: block;
  font-size: var(--fs-sub);
  font-weight: 800;
  color: var(--c-text);
}

.lp-card__desc {
  margin: 8px 0 0;
  font-size: var(--fs-note);
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* --- 料金 --- */
.lp-price {
  width: 100%;
  max-width: 480px;
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.lp-price__label {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 900;
  color: var(--c-text);
}

.lp-price__desc {
  margin: 10px 0 0;
  font-size: var(--fs-note);
  line-height: 1.9;
  color: var(--c-text-sub);
}

/* --- 最終CTA --- */
.lp-band {
  width: calc(100% - var(--sp-screen) * 2);
  max-width: 1020px;
  margin: 56px auto 0;
  padding: 48px 24px;
  border-radius: var(--r-card);
  background: var(--grad-main);
  color: var(--c-white);
  text-align: center;
}

.lp-band__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 900;
  line-height: 1.45;
}

.lp-band__desc {
  margin: 10px 0 20px;
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, .88);
}

/* ランディングだけは本文の横幅制限を広げる */
/* ランディングだけは横幅制限と左右余白を外し、ヒーローをブラウザ幅で敷く */
.app-main:has(.lp) {
  max-width: none;
  padding: 0 0 var(--sp-section);
}

/* -----------------------------------------------------------------------------
   21. 自動入力ジョブの進行状況ウィンドウ
   大きく出す → 周りをクリックで右下の小窓へ畳む → 小窓クリックで戻る
   -------------------------------------------------------------------------- */
.jobwatch__backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 8, 40, .5);
}

.jobwatch__panel {
  position: fixed;
  z-index: 71;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: var(--sp-item);
  padding: 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-float);
}

/* 畳んだ状態。右下に小さく居座る */
.jobwatch--mini .jobwatch__panel {
  left: auto;
  top: auto;
  right: calc(var(--sp-screen) + var(--safe-right));
  bottom: calc(var(--sp-group) + var(--safe-bottom));
  transform: none;
  width: min(300px, calc(100vw - 32px));
  padding: 14px 16px;
  gap: 8px;
  cursor: pointer;
}

.jobwatch__title {
  font-family: var(--font-title);
  font-size: var(--fs-sub);
  font-weight: 800;
  color: var(--c-text);
}

.jobwatch--mini .jobwatch__title { font-size: var(--fs-body); }

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

.jobwatch__meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jobwatch__meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.jobwatch__step {
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--c-sub);
}

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

.jobwatch__bar {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-skeleton);
  overflow: hidden;
}

.jobwatch__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--grad-main);
  background-origin: border-box;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* 進行中は斜めの縞を流して「止まっていない」ことを示す */
.jobwatch__fill.is-running {
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, .28) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%,
      transparent 75%, transparent),
    var(--grad-main);
  background-size: 22px 22px, auto;
  animation: jobwatch-stripe 1s linear infinite;
}

/* 受付待ちは進み具合が分からないので、塗りを薄くして縞だけを流す */
.jobwatch__fill.is-waiting {
  opacity: .45;
}

@keyframes jobwatch-stripe {
  from { background-position: 0 0, 0 0; }
  to { background-position: 22px 0, 0 0; }
}

.jobwatch__bar.is-done .jobwatch__fill { background: var(--c-success); }
.jobwatch__bar.is-failed .jobwatch__fill { background: var(--c-danger); }
.jobwatch__bar.is-done + .jobwatch__step,
.jobwatch__bar.is-failed + .jobwatch__step { color: var(--c-text-sub); }

@media (prefers-reduced-motion: reduce) {
  /* 縞は止めない。これは飾りではなく「止まっていない」ことの唯一の合図で、
     消すと進行中と停止中が見分けられなくなる（実測: macOS の「視差効果を
     減らす」を入れている端末で、受付待ちのバーが完全な静止画に見えていた）。
     代わりに、目に障らないよう ゆっくり・薄く する */
  .jobwatch__fill.is-running {
    animation-duration: 2.4s;
    background-image:
      linear-gradient(120deg, rgba(255, 255, 255, .16) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .16) 75%,
        transparent 75%, transparent),
      var(--grad-main);
  }
}

/* 中止は目立たせない。押し間違えると走らせ直しになる */
.jobwatch__stop { display: block; width: 100%; margin: 0 0 6px; color: var(--c-text-sub); }
.jobwatch__stop:disabled { opacity: .6; }

.jobwatch__msg {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-text);
}

.jobwatch--mini .jobwatch__msg { font-size: var(--fs-note); }

.jobwatch__label {
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--c-text);
}

.jobwatch__urls {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--c-text-sub);
}

.jobwatch__note {
  margin: 0;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--c-text-sub);
}

.jobwatch__mini-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

/* 参照ページから集めた動画 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

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

.video-cell__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

/* -----------------------------------------------------------------------------
   22. 収集した写真・動画の拡大表示
   -------------------------------------------------------------------------- */
.viewer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 6, 24, .84);
}

.viewer__stage {
  position: fixed;
  z-index: 81;
  inset: 40px 64px 40px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.viewer__media {
  /* 小さく切り出された絵でも見えるところまで引き伸ばす。
     縦横の比は保ち、はみ出さない（contain） */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: min(46vw, 520px);
  object-fit: contain;
  border-radius: var(--r-thumb);
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  pointer-events: auto;
}

@media (max-width: 640px) {
  .viewer__media { min-width: 0; }
}

/* YouTube などの埋め込みは、中身の大きさを持たないので枠を指定する */
.viewer__media--frame {
  width: min(100%, 1120px);
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.viewer__close,
.viewer__nav {
  position: fixed;
  z-index: 82;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ブラウザ既定のボタン内余白が残ると、丸に対して中身が寄って見える */
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  color: var(--c-white);
  font-family: var(--font-body);
  cursor: pointer;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

/* × や ‹ › の字は書体ごとに上下の重心が違うので、字ではなく図形で描く */
.viewer__close svg,
.viewer__nav svg { display: block; }

.viewer__close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
}

.viewer__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}

.viewer__nav--prev { left: 12px; }
.viewer__nav--next { right: 12px; }

.viewer__close:hover,
.viewer__nav:hover { background: rgba(255, 255, 255, .28); }

.viewer__count {
  position: fixed;
  z-index: 82;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--c-white);
  font-size: var(--fs-note);
  font-variant-numeric: tabular-nums;
}

/* サムネイルは押せることを見た目でも示す */
.thumb__img { cursor: zoom-in; }

.video-cell__zoom {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: rgba(20, 8, 40, .58);
  color: var(--c-white);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.video-cell__zoom:hover { background: rgba(20, 8, 40, .78); }

@media (max-width: 720px) {
  .viewer__stage { inset: 56px 12px 56px 12px; }
  .viewer__nav { width: 38px; height: 38px; }
}

/* -----------------------------------------------------------------------------
   23. 入力フォームの操作バー
   本文が長いので、どこまでスクロールしても保存に手が届くよう下に貼り付ける
   -------------------------------------------------------------------------- */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-item);
  flex-wrap: wrap;
  /* 本文の左右余白を打ち消して、画面幅いっぱいの帯にする */
  margin: 0 calc(var(--sp-screen) * -1) calc(var(--safe-bottom) * -1);
  padding: 12px var(--sp-screen) calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--c-line);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.form-actions__mark {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--c-accent);
}

.form-actions__mark[hidden] { display: none; }

.form-actions__buttons {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 560px) {
  .form-actions__buttons { flex: 1 1 100%; }
  .form-actions__buttons .btn { flex: 1 1 0; }
}

/* -----------------------------------------------------------------------------
   24. ターゲット案 A〜E のカード
   5枚並ぶので、A〜Eの識別と「誰か／なぜ刺さるか」の区切りを見た目で作る
   -------------------------------------------------------------------------- */
.panel__count {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--c-skeleton);
  color: var(--c-text-sub);
  font-size: var(--fs-note);
  font-weight: 700;
  vertical-align: middle;
}

.target-card {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(80, 60, 120, .06), 0 4px 12px rgba(120, 90, 170, .10);
  transition: box-shadow .16s ease, transform .16s ease;
}

.target-card:hover {
  box-shadow: 0 2px 4px rgba(80, 60, 120, .08), 0 10px 24px rgba(120, 90, 170, .16);
  transform: translateY(-1px);
}

.target-card.is-open {
  box-shadow: 0 4px 10px rgba(80, 60, 120, .10), 0 18px 40px rgba(120, 90, 170, .20);
  transform: none;
}

/* 掴んで動かしている最中 */
.target-card.is-dragging {
  opacity: .5;
  box-shadow: 0 8px 20px rgba(80, 60, 120, .18), 0 24px 50px rgba(120, 90, 170, .28);
}

.target-card.is-drop-before { box-shadow: 0 -3px 0 0 var(--c-main), 0 4px 12px rgba(120, 90, 170, .10); }
.target-card.is-drop-after { box-shadow: 0 3px 0 0 var(--c-main), 0 4px 12px rgba(120, 90, 170, .10); }

/* 左端の帯で「1件のかたまり」を示す */
.target-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-main);
}

.target-card:focus-within { border-color: var(--c-main); }

.target-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  background: var(--c-surface-2);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.target-card__head:hover { background: var(--c-skeleton); }
.target-card__head { cursor: grab; }
.target-card__head:active { cursor: grabbing; }

/* 掴む場所であることを示す点々 */
.target-card__grip {
  flex: 0 0 auto;
  width: 14px;
  color: var(--c-line);
  letter-spacing: 1px;
  font-size: 11px;
  line-height: 1;
  user-select: none;
}

.target-card__head:hover .target-card__grip { color: var(--c-text-sub); }
.target-card.is-open .target-card__head { border-bottom: 1px solid var(--c-line-soft); }

/* 畳んだ状態で見せる要約（名前と年代） */
.target-card__summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.target-card__name {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-card__age {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--c-skeleton);
  color: var(--c-text-sub);
  font-size: var(--fs-note);
  font-weight: 700;
}

/* 開閉の矢印 */
.target-card__caret {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--c-text-sub);
  transition: transform .18s ease;
}

.target-card__caret svg { display: block; width: 18px; height: 18px; }
.target-card.is-open .target-card__caret { transform: rotate(180deg); }

.target-card__remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-sub);
  cursor: pointer;
}

.target-card__remove:hover { background: var(--c-skeleton); color: var(--c-danger); }
.target-card__remove svg { display: block; width: 16px; height: 16px; }

.target-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-item);
  padding: 14px 16px 16px;
  animation: target-open .18s ease;
}

@keyframes target-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .target-card__body { animation: none; }
  .target-card__caret { transition: none; }
}

.target-card__who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-item);
  align-items: start;
}

.target-card__body .textarea { min-height: 76px; }

@media (max-width: 560px) {
  .target-card__who { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   25. リワード（販売）価格・数量のカード
   ターゲット案と同じ作りに揃える。段階が一目で数えられるよう番号を振る
   -------------------------------------------------------------------------- */
.reward-card {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(80, 60, 120, .08), 0 12px 28px rgba(120, 90, 170, .14);
}

.reward-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-accent);
}

.reward-card:focus-within { border-color: var(--c-accent); }

/* 送るときは、出ていく1枚と入ってくる1枚を同じ速さ・同じ曲線で並べて動かす。
   入ってくる側だけを動かすと、前のカードが消えた瞬間だけが目に残って引っかかる。
   2枚が地続きに流れることで、はじめて「隣へ移った」と見える */
.reward-card.is-from-right,
.carousel__card.is-from-right { animation: reward-in-right var(--reward-slide) var(--reward-ease) both; }
.reward-card.is-from-left,
.carousel__card.is-from-left { animation: reward-in-left var(--reward-slide) var(--reward-ease) both; }

/* 出ていく1枚。入ってくる1枚と重ねるので、流れの上から外す */
.reward-card.is-leaving-left,
.reward-card.is-leaving-right,
.carousel__card.is-leaving-left,
.carousel__card.is-leaving-right {
  position: absolute;
  top: var(--reward-view-pad-top, var(--reward-view-pad));
  left: var(--reward-view-pad);
  right: var(--reward-view-pad);
  pointer-events: none;
}

.reward-card.is-leaving-left,
.carousel__card.is-leaving-left { animation: reward-out-left var(--reward-slide) var(--reward-ease) both; }
.reward-card.is-leaving-right,
.carousel__card.is-leaving-right { animation: reward-out-right var(--reward-slide) var(--reward-ease) both; }

/* 105% は、切り抜き枠の余白ぶんまで完全に外へ逃がすため。
   端に細く残ると、そこで色が瞬いて動きが途切れて見える */
@keyframes reward-in-right {
  from { transform: translateX(105%); }
  to { transform: translateX(0); }
}

@keyframes reward-in-left {
  from { transform: translateX(-105%); }
  to { transform: translateX(0); }
}

@keyframes reward-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-105%); }
}

@keyframes reward-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(105%); }
}

@media (prefers-reduced-motion: reduce) {
  .reward-card.is-from-right,
  .reward-card.is-from-left,
  .carousel__card.is-from-right,
  .carousel__card.is-from-left { animation: none; }
}

.reward-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface-2);
}

.reward-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: var(--fs-note);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.reward-card__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-note);
  font-weight: 800;
  color: var(--c-text);
}

.reward-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

/* 定価・リワード価格・数量を1行に収めて、カードの縦を詰める */
.reward-card__pair {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 10px;
  align-items: start;
}

.reward-card__body .textarea { min-height: 54px; }
.reward-card__body .field { gap: 3px; }
.reward-card__body .field__hint { line-height: 1.5; }

/* 数字の欄に単位を添える */
.input-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.input-unit .input {
  padding-right: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.input-unit__label {
  position: absolute;
  right: 12px;
  font-size: var(--fs-note);
  color: var(--c-text-sub);
  pointer-events: none;
}

@media (max-width: 560px) {
  .reward-card__pair { grid-template-columns: 1fr; }
}

@media (min-width: 561px) and (max-width: 860px) {
  .reward-card__pair { grid-template-columns: 1fr 1fr; }
}

/* リワード価格の下に出す定価比 */
.discount-mark {
  font-size: var(--fs-note);
  font-weight: 700;
  line-height: 1.6;
}

.discount-mark:empty { display: none; }
.discount-mark--off { color: var(--c-accent); }
.discount-mark--over { color: var(--c-text-sub); font-weight: 600; }
.discount-mark--hint { color: var(--c-text-sub); font-weight: 400; }

/* リワードは1枚ずつ。左右のボタンで送る */
.reward-carousel,
.carousel {
  --reward-slide: .52s;
  /* 動き出しと止まり際の両方をゆるめる。片側だけゆるめると、
     残る側が弾かれたように見えて「急」と感じる */
  --reward-ease: cubic-bezier(.45, .05, .15, 1);
  --reward-view-pad: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

/* 滑り込む途中のカードが矢印の上や枠の外へはみ出さないよう、ここで切る。
   影が切れないように内側へ余白を取り、その分を外側の負の余白で戻す */
.reward-carousel__view,
.carousel__view {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: var(--reward-view-pad);
  padding-top: var(--reward-view-pad-top, var(--reward-view-pad));
  margin: calc(var(--reward-view-pad) * -1);
  margin-top: calc(var(--reward-view-pad-top, var(--reward-view-pad)) * -1);
}

/* 耳はカードの外へはみ出す。切り取り枠の上をその分だけ広げないと、
   滑っている途中の耳が上で切られる。広げた分は外側に場所を取って、
   ひとつ上の要素と耳が重ならないようにする */
.carousel--eared { margin-top: 38px; }
.carousel--eared .carousel__view { --reward-view-pad-top: 56px; }

.reward-nav,
.carousel__nav {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text-sub);
  cursor: pointer;
}

/* 送りの矢印は、いま見えている画面の中央に置く。
   カードの縦中央に置くと、素材を全部並べた背の高いカードでは
   矢印がずっと下にあり、スクロールしても視界に入らない。
   sticky なので、カードの外までは出ない（次のカードへ移ると消える）。 */
.carousel__nav {
  align-self: start;
  position: sticky;
  top: calc(50vh - 36px);
  z-index: 2;
  /* 競合LPは1枚ずつしか出ないので、送りの矢印が唯一の移動手段になる。
     リワードの丸ボタン（.reward-nav）のままだと小さくて見落とすため、
     ここだけ縦に長い形にして、矢印も大きくする */
  width: 40px;
  height: 72px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

.reward-nav:hover:not(:disabled),
.carousel__nav:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); }
.reward-nav:disabled,
.carousel__nav:disabled { opacity: .35; cursor: not-allowed; }
.reward-nav svg,
.carousel__nav svg { display: block; }

.reward-card__pos {
  flex: 0 0 auto;
  font-size: var(--fs-note);
  color: var(--c-text-sub);
  font-variant-numeric: tabular-nums;
}

.reward-dots,
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: -6px;
}

.reward-dot,
.carousel__dot {
  width: 22px;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 見た目は小さな丸。押せる範囲だけ広く取る */
.reward-dot::before,
.carousel__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-line);
  transition: background var(--reward-slide) var(--reward-ease), transform var(--reward-slide) var(--reward-ease);
}

.reward-dot:hover::before,
.carousel__dot:hover::before { background: var(--c-text-sub); }

.reward-dot.is-current::before,
.carousel__dot.is-current::before {
  background: var(--c-accent);
  transform: scale(1.35);
}

@media (max-width: 560px) {
  .reward-carousel,
  .carousel { grid-template-columns: 1fr; }
  .reward-nav,
  .carousel__nav { display: none; }
}

/* ターゲットカードの優先順位まわり */

.target-card__top {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(168, 85, 247, .14);
  color: var(--c-sub);
  font-size: 11px;
  font-weight: 800;
}

.target-card__move-unused {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-sub);
  cursor: pointer;
}

.target-card__move:hover:not(:disabled) { background: var(--c-skeleton); color: var(--c-text); }
.target-card__move:disabled { opacity: .3; cursor: not-allowed; }
.target-card__move svg { display: block; width: 16px; height: 16px; }

/* AIが埋める欄であることを示す小さな印 */
.field__ai {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--grad-main);
  background-origin: border-box;
  color: var(--c-white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}

.textarea--ai {
  min-height: 62px;
  background: rgba(168, 85, 247, .05);
  border-color: var(--c-line);
}

.textarea--ai:focus { background: var(--c-surface); }

/* 拾われないまま止まっている状態は、進んでいる見た目をやめる */
.jobwatch__fill.is-stalled {
  background: var(--c-warn);
  opacity: 1;
  animation: none;
}

/* 生成中に結果を見ているときの帯。数字と「表示」を1行に並べる */
.run-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-item);
  flex-wrap: wrap;
  margin-bottom: var(--sp-group);
}

.run-banner .btn { width: auto; flex: 0 0 auto; }


/* 参照ページから読み取った組み立て方（商品入力の参考ページパネル内）。
   作るLPの骨格になるので、読み取れたことが画面から分かるようにする */
/* 参照ページの組み立て方。枠と開閉は .fold に任せ、ここは間だけ */
.ref-structure { margin-top: 14px; }

.ref-structure__list {
  margin: 10px 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: 6px;
}

.ref-structure__item {
  font-size: var(--fs-note);
  padding-bottom: 8px;
}

.ref-structure__line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* その区画がいちばん強く出している一言 */
.ref-structure__hook {
  display: block;
  color: var(--c-text);
  margin-top: 2px;
}

/* 何が置かれていたかの事実。骨格を組むときの材料 */
.ref-structure__body {
  display: block;
  color: var(--c-text-sub);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 3px;
}

.ref-structure__shots { color: var(--c-text-sub); font-style: normal; }
.ref-structure__name {
  display: block;
  font-weight: 600;
  color: var(--c-text);
}

.ref-structure__role {
  display: block;
  color: var(--c-text-sub);
  font-size: 12px;
  margin-top: 1px;
}


/* ---------- S12 LP案 ---------- */
.lp-notice:empty { display: none; }
.lp-notice__warn { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-control); background: #FEF3C7; color: #92400E; font-size: var(--fs-note); }
.lp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.lp-history { max-width: 360px; }
.lp-summary { margin: 6px 0 12px; line-height: 1.7; }
.lp-applied { margin: 4px 0 0; padding-left: 18px; }
.lp-applied li { margin: 0 0 6px; }
.lp-applied__how { color: var(--c-text-sub); font-size: var(--fs-note); }
.lpd-sections { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lpd-section { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); }
.lpd-section--cta { border-color: var(--c-accent); }
.lpd-section__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.lpd-section__no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-text); color: #fff; font-size: 12px; font-weight: 700; }
.lpd-section__title { font-weight: 700; }
.lpd-section .field { margin: 0 0 8px; }
.lp-assets { margin: 8px 0 0; }
.lp-assets__row { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-assets__thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--c-line); background: var(--c-bg); }
.lp-visual { margin: 8px 0 0; }
.lp-visual__text { margin: 2px 0 0; padding: 8px 10px; border-left: 3px solid var(--c-line); color: var(--c-text-sub); font-size: var(--fs-note); }

/* ---------- S13 生成結果 ---------- */
.lpr-stats { margin: 0; }
/* LPの下見と、その右の棚。狭い画面では棚が下に回る
   （2026-10-05 要望: 右にサイドメニュー） */
.lpr-stage { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1100px) {
  .lpr-stage { grid-template-columns: minmax(0, 1fr) 300px; }
  /* 下見と棚を、まとめて画面に貼り付ける。
     前は中身の高さぶん（実測 18,216px）に伸ばしていたので、ページ全体の
     スクロールと枠の中のスクロールが二重になって使いにくかった
     （2026-10-10 利用者の指摘）。
     貼り付けるのは枠ではなく、枠と棚をまとめた入れ物のほう。
     枠そのものを貼り付けても、入れ物が枠と同じ高さしか無いので動けない
     （実測: top:12 を指定しても -12 のまま＝上が12px切れていた）。
     高さは 100vh - 48px。24px だと、入れ物の下端に収まらず12px切れる */
  .lpr-stage { position: sticky; top: 12px; height: calc(100vh - 48px); }
  .lpr-frame { position: static; height: 100%; }
  .lpr-shelf { position: static; height: 100%; max-height: none; overflow-y: auto; }
}
.lpr-shelf:empty { display: none; }
.lpr-shelf {
  padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-surface, #fff);
}
.lpr-shelf__title { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 700; }
.lpr-pick { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--c-line); }
/* いまの下見が使っていない区画。選んでも見た目が変わらないので薄くする */
.lpr-pick--off { opacity: .6; }
/* いま見ている区画。スクロールに合わせて移る（2026-10-05 要望） */
.lpr-pick--here {
  margin-inline: -8px; padding-inline: 8px;
  border-radius: var(--r-control);
  background: var(--c-brand-soft, #F3EBFA);
  opacity: 1;
}
.lpr-pick--here .lpr-pick__no { background: var(--c-brand, #7A3FA6); color: #fff; }
@media (prefers-reduced-motion: reduce) { .lpr-shelf { scroll-behavior: auto; } }
/* 見出しは押せる。押すと下見がその区画まで動く（2026-10-05 要望） */
.lpr-pick__head {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  width: 100%; padding: 2px 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.lpr-pick__head:hover .lpr-pick__name { text-decoration: underline; }
.lpr-pick__head:focus-visible { outline: 2px solid var(--c-brand, #7A3FA6); outline-offset: 2px; }
.lpr-pick__no {
  flex: 0 0 auto; min-width: 22px; padding: 1px 5px;
  border-radius: var(--r-control); background: var(--c-surface-2, #F4F1F6);
  font-size: var(--fs-note); text-align: center;
}
.lpr-pick__name {
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-note);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lpr-pick__band { display: flex; flex-wrap: wrap; gap: 6px; }
/* 下見は画面の高さに収める。前は中身の高さぶん（1万8千pxなど）に
   伸ばしていたので、ページ全体のスクロールと枠の中のスクロールが
   二重になって使いにくかった（2026-10-10 利用者の指摘）。
   枠は貼り付けて、中だけをスクロールさせる */
.lpr-frame {
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  overflow: hidden; background: #fff;
  height: calc(100vh - 24px);
}
.lpr-frame__iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 1099px) {
  /* 狭い画面は棚が下に回るので、貼り付けない。高さだけ抑える */
  .lpr-frame { height: calc(100vh - 160px); min-height: 420px; }
}

/* ---------- S13 キャンバス: 区画ごとに絵か文字かを選ぶ ---------- */
.lpr-modes:empty { display: none; }
.lpr-modes {
  margin: 0; padding: 14px 16px;
  border: 1px solid var(--c-line); border-radius: var(--r-card);
}
.lpr-modes__title { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 700; }
/* 「すべての区画を◯◯に」。右の棚の頭に置く（幅が狭いので折り返す） */
.lpr-modes__all {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 4px; padding: 0 0 12px; border-bottom: 1px solid var(--c-line);
}
.lpr-modes__all .btn { flex: 0 0 auto; }
.lpr-modes__list { display: grid; gap: 6px; }
.lpr-modes__row { display: flex; align-items: center; gap: 10px; }
/* 区画ごとに選べる絵。作り直すと履歴がたまるので、その中から選ぶ
   （2026-10-05 要望）。横に流して、縦に伸びないようにする */
.lpr-shots {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 10px 34px; padding-bottom: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.lpr-shots__head { flex: 0 0 auto; font-size: var(--fs-note); color: var(--c-ink-3, #6B6472); }
.lpr-shot {
  position: relative; flex: 0 0 auto; padding: 0; cursor: pointer;
  border: 2px solid var(--c-line); border-radius: var(--r-control);
  background: var(--c-surface-2, #F4F1F6); line-height: 0; overflow: hidden;
}
.lpr-shot:hover { border-color: var(--c-brand, #7A3FA6); }
.lpr-shot--on { border-color: var(--c-brand, #7A3FA6); cursor: default; }
.lpr-shot__im { display: block; width: 84px; height: 56px; object-fit: cover; }
/* いま使っているものに ✓、ほかは何枚前かの番号 */
.lpr-shot__tick {
  position: absolute; right: 2px; top: 2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center;
}
.lpr-shot--on .lpr-shot__tick { background: var(--c-brand, #7A3FA6); }
/* 何回目の案を選ぶ帯 */
/* 「使う案」は層の耳とは別の行。耳の列（.lp-tabs）は横スクロールする帯なので、
   そこに入れると右の見えない所へ押し出され、幅が潰れて3行に折り返す。
   その高さが帯の高さになり、見出しの下に大きな空白ができていた
   （実測 2026-10-11: 耳は44pxなのに帯が162pxあった）*/
/* 棚の区画ごとに置く「見せ方」。写真の帯のすぐ下 */
.lpr-pick__mode { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.lpr-pick__mode .select--sm { flex: 1 1 auto; min-width: 0; }

/* 公開URLの名前。会社・ブランド／商品名／層（層は自動） */
.lpr-urlbar:empty { display: none; }
.lpr-url { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.lpr-url__title { font-size: var(--fs-note); color: var(--c-muted, #6B6270); }
.lpr-url .input--sm { width: 11em; min-width: 0; padding: 6px 10px; font-size: var(--fs-note); }
.lpr-url__sep { color: var(--c-muted, #6B6270); }
.lpr-url__layer {
  padding: 6px 10px; border: 1px dashed var(--c-line); border-radius: 8px;
  font-size: var(--fs-note); color: var(--c-muted, #6B6270);
}
.lpr-url__preview { margin: 6px 0 0; word-break: break-all; }

.lpr-takes-bar:empty { display: none; }
.lpr-takes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.lpr-modes__no {
  flex: 0 0 auto; min-width: 26px; padding: 2px 6px;
  border-radius: var(--r-control); background: var(--c-surface-2, #F4F1F6);
  font-size: var(--fs-note); text-align: center;
}
.lpr-modes__name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-note);
}
/* 小さい選び手。padding をまとめて書き直すと、もとの .select が空けていた
   右側（padding-right:44px）が消えて、文字が矢印に重なる
   （実測 2026-10-11 利用者の指摘:「矢印と数字が被ってる」）。
   右は矢印と仕切り線のぶんだけ空ける。矢印も小さくして収まりをそろえる */
.select--sm {
  min-height: 0;
  padding: 6px 34px 6px 10px;
  font-size: var(--fs-note);
  width: auto;
  background-position: right 9px center, right 28px center;
  background-size: 16px 16px, 1px 60%;
}

/* ---------- S12 LP案: ターゲット層の切り替えと絵の指示 ---------- */
/* 成果物の種類（LP / KV / 広告）。層タブより上に置く。
   中身が無い種類は薄くするが、押せるようにしておく（無いのか壊れたのか
   分からなくなるより、押して「まだ無い」と言われる方がよい） */
/* 成果物の切り替え（LP / KV / メタ広告）。書類ばさみの耳のかたち。
   丸い錠剤だと「並んだボタン」に見えて、いま開いているものと
   これから開けるものの区別が付かなかった。耳なら、開いている1枚だけが
   下の線を越えて、中身の面とつながって見える。

   仕組み:
     .lp-tabs   下に1本の線を引く。耳はこの線の上に並ぶ
     .lp-deliv  開いていない耳。線の上に載る（少し低い・少し沈んだ色）
     --on       開いている耳。1px下げて、下辺を面の色で塗り、線を切る */
.lp-tabs {
  border-bottom: 1px solid var(--c-line);
  margin: 0;
  display: flex; align-items: flex-end;
  overflow-x: auto;                 /* 狭い画面では横に送る（折り返すと耳に見えない） */
  scrollbar-width: none;
}
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-delivs { display: flex; align-items: flex-end; gap: 2px; padding: 0 0 0 4px; }
.lp-deliv {
  flex: 0 0 auto;
  padding: 7px 18px;
  border: 1px solid var(--c-line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;     /* 耳なので上の角だけ */
  font-size: var(--fs-note); font-weight: 700; color: var(--c-text-sub);
  cursor: pointer;
}
/* 開いている耳。1px下げて下の線に食い込み、その1pxを塗って線を切る。
   色は下の面と同じ（画面地）にする。白にすると耳だけ浮いて、
   下の面とつながって見えない（実測して直した） */
.lp-deliv--on {
  margin-bottom: -1px;
  padding: 9px 18px;                /* ほんの少し背を高くして、手前に見せる */
  background: var(--c-bg);
  color: var(--c-main);
  border-color: var(--c-main);
  border-bottom: 1px solid var(--c-bg);
  font-weight: 800;
}
/* 開いていない耳は、地より少し沈めて「奥にある紙」に見せる */
.lp-deliv { background: #EDE9F6; }
.lp-deliv:hover { background: #F7F5FC; color: var(--c-text); }
.lp-deliv--empty { color: var(--c-text-sub); opacity: .65; }
/* 耳の中に出す枚数（12/34）。耳そのものの文字より小さく、控えめに */
/* 「公開中」が2行に折れていた（実測 2026-10-12 利用者の指摘）。
   耳の幅に収まらないと、短い語でも「公開／中」と割れる。折らない */
.lp-deliv__count {
  margin-left: 6px; font-size: 11px; font-weight: 700; opacity: .75;
  white-space: nowrap; flex: 0 0 auto;
}
.lp-deliv__count.is-none { opacity: .45; }

/* 耳が「ターゲット層」のとき。層の名前は長いので、記号＋名前を並べる。
   種類（LP / KV / メタ広告）は短いので、そのままの幅でよい */
.lp-delivs--variants .lp-deliv {
  display: inline-flex; align-items: baseline; gap: 7px;
  max-width: 300px; padding-left: 14px; padding-right: 14px;
}
.lp-delivs--variants .lp-variant__label { font-weight: 800; }
.lp-delivs--variants .lp-variant__name {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-delivs--variants .lp-variant__count { font-size: 11px; font-weight: 700; opacity: .75; }
.lp-delivs--variants .lp-variant__count.is-none { opacity: .45; }

/* 種類の行。耳の下に並ぶので、小さめの錠剤にする */
.lp-toolbar .lp-delivs {
  gap: 6px; padding: 0;
}
.lp-toolbar .lp-deliv {
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 5px 14px; margin-bottom: 0; background: var(--c-surface);
}
.lp-toolbar .lp-deliv--on {
  border-color: var(--c-main); color: var(--c-main);
  background: var(--c-main-weak, #F6F0FB); padding: 5px 14px;
}

.lp-variants { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-variant {
  display: flex; align-items: center; gap: 6px;
  min-height: 0; padding: 7px 12px;
  border: 1px solid var(--c-line); border-radius: var(--r-control);
  background: var(--c-surface); color: var(--c-text); cursor: pointer;
}
.lp-variant:hover { border-color: var(--c-text-sub); }
.lp-variant--on { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset; }
/* この回に無い層（押すと別の回のその層へ飛ぶ）。薄くして区別する */
.lp-variant--faded { opacity: .55; }
.lp-variant__label { font-weight: 700; }
/* その層に絵が何枚あるか。どの層を作ったのかが一目で分かる */
.lp-variant__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--c-accent); font-weight: 700; }
.lp-variant__count.is-none { color: var(--c-text-sub); font-weight: 400; }

.lp-variant__name { font-size: var(--fs-note); color: var(--c-text-sub); }
.lp-target { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
.lp-visual__row { display: flex; gap: 8px; margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--c-line); background: #FBF9FC; border-radius: 0 8px 8px 0; }
.lp-visual__body { min-width: 0; }
.lp-visual__use { display: block; font-size: var(--fs-note); font-weight: 600; }
/* S12 生成プロンプト: マスターブリーフと区画カード */
.lp-brief__text { margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-bg); font-size: 13px; line-height: 1.75; white-space: pre-wrap; max-height: 60vh; overflow: auto; }
.lp-prompt { min-height: 120px; font-size: 13px; line-height: 1.7; }
/* 絵は区画の真ん中に置く。左右の矢印で版を送る（lp-shot）。
   矢印は絵の外に出す。上に重ねると、絵の端の情報が読めなくなる */
.lp-shot { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 6px; }
.lp-shot__nav { flex: 0 0 auto; min-width: 36px; font-size: 18px; line-height: 1; }
/* 両端に前後の版を覗かせる。ぼかして薄くするのは、真ん中と見間違えないため。
   押せば送れるので、指の当たる大きさを確保する */
.lp-shot__peek {
  flex: 0 0 auto;
  width: 64px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  filter: blur(2.5px);
  opacity: .4;
  cursor: pointer;
  transition: opacity .2s ease, filter .2s ease;
}
.lp-shot__peek:hover { opacity: .7; filter: blur(1px); }
@media (prefers-reduced-motion: reduce) { .lp-shot__peek { transition: none; } }
.lp-shot__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; }
/* 押すと大きく見られることが分かるように、指を乗せたら少し持ち上げる */
.lp-section__img { cursor: zoom-in; transition: box-shadow .15s ease; }
.lp-section__img:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.lp-section__img:focus-visible { outline: 2px solid var(--c-main); outline-offset: 2px; }
/* 拡大したときは、画面に収まる範囲でできるだけ大きく */
/* 動く絵は静止画の下に別枠で出す。並べて置くと、どちらが本番の絵か
   分からなくなるので、札を付けて分ける */
/* GIF まわりを1つにまとめた折りたたみ。静止画のじゃまをしない見た目にする */
.lp-gif { margin: 6px 0 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg-sub); }
.lp-gif > .lp-gif__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; }
.lp-gif > .lp-gif__head::-webkit-details-marker { display: none; }
/* 開いているかが一目で分かるよう、自前の三角を出す */
.lp-gif > .lp-gif__head::before { content: '▸'; color: var(--c-text-sub); font-size: 11px; transition: transform .15s ease; }
.lp-gif[open] > .lp-gif__head::before { transform: rotate(90deg); }
.lp-gif__title { font-weight: 600; font-size: 13px; }
.lp-gif > *:not(.lp-gif__head) { margin-left: 12px; margin-right: 12px; }
.lp-gif > *:last-child { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .lp-gif > .lp-gif__head::before { transition: none; } }

/* 動く絵に送る文。長いので枠を決めて中で送る */
.lp-motion-prompt { margin: 6px 0 10px; }
.lp-motion-prompt .textarea { font-size: 12px; line-height: 1.6; background: var(--c-bg-sub); }

.lp-motion { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 12px; }
.lp-motion__media { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 8px; border: 1px solid var(--c-line); background: var(--c-bg); }
.lp-zoom { display: flex; align-items: center; justify-content: center; }
.lp-zoom__img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .lp-section__img { transition: none; } }
.lp-section__img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0; border-radius: 8px; border: 1px solid var(--c-line); }
.btn--sm { min-height: 0; padding: 6px 12px; font-size: var(--fs-note); }
.lp-history { margin: 0 0 12px; }
.lp-history__cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lp-history__thumb { width: 120px; height: 180px; object-fit: cover; }
/* 素材の種別（image / gif / video）。chip を使うと --r-pill で薬みたいに丸くなり、
   さらに flex の伸びで行の高さぶん縦に伸びて、種別ごとに大きさが変わっていた。
   大きさを決め打ちし、伸びを止め、角は少しだけ落とす。色はインスタグラムの並び */
.lp-kind {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 26px;
  border-radius: 4px;
  background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

/* 版ごとの生成文。折りたたみで、開いたときだけ長い文が出る。
   区画のカードは縦に長くなりやすいので、既定は閉じておく */
.lp-shot__prompt { margin: 8px 0 0; }
.lp-shot__prompt > summary { cursor: pointer; font-size: 12px; color: var(--c-text-sub); }
.lp-shot__prompt-body {
  margin: 8px 0; padding: 10px 12px;
  background: var(--c-surface-2); border-radius: 8px;
  font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}

/* 一括生成。見出しのすぐ下に、幅いっぱいで置く。
   他のボタンに紛れていると、何を押せば全部作れるのか分からない */
/* 生成とダウンロードは1行に並べる。
   前は .lp-bulk__btn に width:100% が残っていて、生成が帯いっぱいに広がり、
   ダウンロードが次の行へ落ちていた（2026-10-04 指摘）。
   決まりが2か所に分かれていたのが原因なので、1つにまとめる */
.lp-bulk {
  margin: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
.lp-bulk__btn {
  flex: 1 1 60%; min-width: 0; min-height: 52px;
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
.lp-bulk__zip {
  flex: 0 1 auto; min-height: 52px; white-space: nowrap;
  font-size: 15px; font-weight: 600;
}
.lp-bulk__note {
  flex: 1 0 100%;
  margin: 8px 2px 0;
  font-size: var(--fs-note); color: var(--c-text-sub); line-height: 1.6;
}
/* 画面が狭いときは、無理に横に並べず縦に積む（文字が潰れるより読めるほうがよい） */
@media (max-width: 420px) {
  .lp-bulk__btn, .lp-bulk__zip { flex: 1 1 100%; }
}

/* 販売ページの公開 */
.lp-pub__url { margin: 6px 0 0; font-size: 13px; color: var(--c-text-sub, #666); word-break: break-all; }
.lp-pub__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lp-pub__list { list-style: none; margin: 16px 0 12px; padding: 0; display: grid; gap: 8px; }
.lp-pub__item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lp-pub__label {
  flex: 0 0 auto; min-width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 8px;
  background: var(--c-accent-weak, #f0eaf6); font-weight: 600; font-size: 13px;
}
.lp-pub__link { flex: 1 1 240px; font-size: 13px; word-break: break-all; }
.lp-pub__terms { margin: 16px 0 0; border: 1px solid var(--c-line, #e4dfea); border-radius: 12px; padding: 12px 14px; }
.lp-pub__sum { cursor: pointer; font-weight: 600; }
.lp-pub__modes { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 0; }
.lp-pub__mode, .lp-pub__check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lp-pub__leads { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--c-line, #e4dfea); }
.lp-pub__leadlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.lp-pub__lead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.lp-pub__leadmail { flex: 1 1 200px; word-break: break-all; }
.lp-pub__leadmeta { flex: 0 0 auto; opacity: .7; }

/* 区画の見せ方は折りたたむ。30区画あると、ここだけで画面が埋まる */
.lpr-modes__box { border: 1px solid var(--c-line, #e4dfea); border-radius: 12px; padding: 10px 14px; }
.lpr-modes__sum {
  cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  list-style: none;
}
.lpr-modes__sum::-webkit-details-marker { display: none; }
.lpr-modes__sum::before { content: '▸'; display: inline-block; transition: transform .15s; }
.lpr-modes__box[open] .lpr-modes__sum::before { transform: rotate(90deg); }
.lpr-modes__box .lpr-modes__title { margin: 0; font-size: 15px; font-weight: 700; }
.lpr-view { display: inline-flex; gap: 4px; }

/* 絵の作り先の切り替え（LP案の画面）。
   並べるのはラベル・2つのボタン・説明の4つ。狭い画面では折り返す */
.lp-via {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.lp-via .field__hint { margin: 0; flex: 1 1 240px; }

/* よくある質問の出来上がり（LP案の画面）。絵が出ない区画なので、
   このまま出ることをその場で見せる（2026-10-09） */
.lp-faq-preview { margin-top: 10px; }
.lp-faq-preview__svg {
  border: 1px solid var(--color-border, #E5E3EF);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.lp-faq-preview__svg svg { display: block; width: 100%; height: auto; }

/* ブランドロゴの選択（販売の条件の欄）。
   2026-10-13 要望: 自前のロゴ画像を添付して、文字の板に使えるようにする */
.lp-brandlogo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-brandlogo__img {
  max-height: 40px; max-width: 160px; height: auto; width: auto;
  /* 透過のロゴが見えるように、market の地を薄く敷く */
  background: repeating-conic-gradient(#f3f0f6 0 25%, #fff 0 50%) 0 0 / 14px 14px;
  border: 1px solid var(--line, #E3E0E8); border-radius: 6px; padding: 3px;
}
.is-hidden { display: none; }

/* ---- S21 LINEコンテンツ ----
   絵は実寸がばらばら（2500×1686 も 1040×1850 もある）ので、
   幅だけそろえて高さは中身に任せる。切ると形が分からなくなる */
.line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-group);
}

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

.line-card__title {
  font-family: var(--font-sub);
  font-size: var(--fs-note);
  margin: 0;
}

.line-card__img {
  width: 100%;
  height: auto;
  border-radius: var(--r-control);
  background: var(--c-bg);
}

.line-texts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-group);
}

.line-text {
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.line-text__when {
  font-family: var(--font-sub);
  font-size: var(--fs-note);
  margin: 0 0 6px;
}

/* 送る文章は改行がそのまま意味になる（LINEは書いたとおりに出る） */
.line-text__body {
  margin: 0 0 8px;
  white-space: pre-wrap;
}

/* 形を選ぶところ。文字だけ並べても、どの寸法か分からない
   （2026-10-15 指摘）。縦横比と枠の割り方をそのまま小さく描く */
/* 形は30種あり、全部並べると画面が縦に伸びすぎる（2026-10-15 指摘）。
   高さを決めた箱に入れて、中だけスクロールさせる */
.line-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 268px;
  overflow-y: auto;
  /* 中の位置を測る基準をこの箱にする。無いと offsetTop が外の要素からの
     距離になり、選んでいる所まで送るつもりが見当違いの所へ飛ぶ */
  position: relative;
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface-2);
  /* 箱の中で止める。中を端まで送っても、外のページが動き出さない */
  overscroll-behavior: contain;
}

.line-pick__one {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  background: var(--c-surface);
  cursor: pointer;
  text-align: center;
}

.line-pick__one.is-on {
  border-color: var(--c-main);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .25);
}

/* 見本。高さは aspect-ratio（画面が付ける）に任せ、枠は中に絶対で置く */
.line-pick__shape {
  position: relative;
  width: 100%;
  max-height: 86px;
  background: var(--c-bg);
  border-radius: 4px;
  overflow: hidden;
}

.line-pick__cell {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
}

.line-pick__none {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  color: var(--c-text-sub);
}

.line-pick__name { font-size: var(--fs-note); line-height: 1.3; }
.line-pick__size { font-size: 11px; color: var(--c-text-sub); }

/* 枠に出す商品を、ほかのプロジェクトから呼び出すところ */
.line-ask { display: flex; gap: 8px; margin: 8px 0 4px; }

.line-pull {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.line-pull__one {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  background: var(--c-surface);
  cursor: pointer;
  text-align: left;
}

.line-pull__one.is-on {
  border-color: var(--c-main);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .25);
}

/* 何番目の枠に入るか。選んだ順がそのまま枠の順 */
.line-pull__no {
  flex: 0 0 auto;
  width: 26px; height: 26px; line-height: 26px;
  border-radius: 999px;
  text-align: center;
  font-size: var(--fs-note);
  background: var(--c-bg);
  color: var(--c-text-sub);
}

.line-pull__one.is-on .line-pull__no { background: var(--c-main); color: #fff; }
.line-pull__name { font-size: var(--fs-note); line-height: 1.3; }

/* 呼び出した商品は、枠の順＋その商品の掲載先を縦に積む */
.line-pull__cell { display: flex; flex-direction: column; gap: 6px; }
.line-pull__cell .line-pull__one { width: 100%; }
.input--sm { padding: 6px 8px; font-size: var(--fs-note); }

/* 生成文を見る・足す */
.line-prompt { margin-top: 4px; }
.line-prompt__sum { cursor: pointer; font-size: var(--fs-note); color: var(--c-sub); }

/* 生成文。その場で直せる入力欄。長いので中だけスクロールさせる */
.line-prompt__base {
  width: 100%;
  max-height: 220px;
  overflow: auto;
  margin: 4px 0 8px;
  padding: 8px;
  font-size: 11px;
  line-height: 1.6;
  resize: vertical;
}

.line-prompt__add { width: 100%; font-size: var(--fs-note); }

/* 生成された絵は押したら大きく見える。押せると分かるようにする */
.line-card__img { cursor: zoom-in; }

/* 押せる面（LINEに登録する行き先） */
.line-area { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.line-area__no { flex: 0 0 56px; font-size: var(--fs-note); color: var(--c-text-sub); }
.line-area .input { flex: 1 1 0; min-width: 0; }

/* 公開URLの欄で、載せるドメインを選ぶ（並べたものが2本以上のときだけ出る） */
.lpr-url__site { flex: 0 1 auto; max-width: 220px; }

/* 管理画面で見るユーザーの使用履歴。長いので枠の中で送る */
.admin-hist { max-height: 260px; overflow-y: auto; margin-bottom: var(--sp-group); }

/* 問い合わせのやり取り。どちらが書いたかを左右で分ける */
.chat { max-height: 300px; overflow-y: auto; padding: 4px 0; margin-bottom: var(--sp-group); }
.chat__row { display: flex; margin-bottom: 8px; }
.chat__row--mine { justify-content: flex-end; }
.chat__bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--r-control);
  background: var(--c-bg);
  font-size: var(--fs-note);
}
.chat__bubble--mine { background: var(--c-accent-soft, #eef2ff); }
.chat__who { font-size: var(--fs-note); color: var(--c-text-sub); margin-bottom: 2px; }
.chat__body { white-space: pre-wrap; word-break: break-word; }
.chat__at { font-size: var(--fs-note); color: var(--c-text-sub); margin-top: 4px; text-align: right; }
/* 写真が満杯のとき。口は消さず、押せないことを見せる */
.dropzone--full { opacity: .55; cursor: not-allowed; }

/* 気をつけたい表現。たたんでおく（毎回開いていると本来の作業の邪魔になる） */
.compli { margin-bottom: var(--sp-group); }
.compli__sum { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 600; }
/* 言い換え案は本文として読む。list-row__meta は右寄せなので、左に戻す */
.compli .list-row__meta { white-space: normal; text-align: left; color: var(--c-text); }
.compli .list-row { align-items: flex-start; }
.compli .list-row__sub { font-weight: 600; }

/* 進捗の窓。閉じてよいことを小さく添える */
.jobwatch__close-note { font-size: var(--fs-note); color: var(--c-text-sub); margin: 4px 0 0; }

/* 押す前に出す値段。目立たせすぎない（脅しに見える） */
.cost-hint { margin-top: 2px; }