/* =============================================================================
   デザパッと — UIデザイン(MTG55: 商業施設のマーケティング担当者向けに再設計)

   ■ ターゲット(concept.md 0章)
     商業施設・駅ビル等の販促/マーケティング担当(女性・30〜40代を想定)。
     季節キャンペーン、テナント共同企画、ファミリーイベントを年間で回している。
     ポスター・チラシのデザインデータは既に手元にある。
     最大のハードルは「私にできるか」ではなく
     **「上司・テナントに見せられる品質になるか」「今週中に出せるか」**。
     → MTG53〜54の「安心をほどく」設計(丸い人物イラスト・やさしい言葉)は、
       この層には仕事の道具として幼く映るため全廃した。

   ■ 体験コンセプト
     **1枚のキービジュアルが、その場でWebへ"展開"される。**
     「展開」は販促の実務用語(メディア展開・横展開)。この言葉を、
     ローディング演出(1枚の面が分割されてページになる)にもそのまま使う。

   ■ 伝達コンセプト
     「発注しなくても、見せられる品質が今日出せる」
     → ①何ができるか ②どのくらい速いか ③品質の証拠(本物のBefore/After)

   ■ 世界観
     配色 … UIはほぼ無彩色に徹し、**色はコンテンツ(ポスター画像)が持つ**。
             Figma/Linear等のプロ向けツールと同じ構造。強調は朱1色だけ。
     角丸 … 10px(面) / 6px(小物)。**ピル型をやめた**(丸みは道具感を下げるため)。
     線   … 1px のみ。
     影   … 極端に浅い1パターンのみ。
     書体 … Zen Kaku Gothic New(見出し・数字) + Noto Sans JP(本文)の2種類。
             見出しは weight 900 / 字間 -.04em / 行間 1.25 で締める。
   ========================================================================== */

:root{
  /* ================================================================
     コンセプト「紙と刷り」（2026-09-16）
     このサービスは**紙のチラシをWebへ移す道具**。Base44 などの生成AIツールと並んだとき、
     色（オレンジ）ではなく「印刷物の文法」で見分けがつくようにする。
       ・生成りの紙の地（冷たいグレーをやめる）
       ・朱（オレンジ）はハンコ・朱肉の色として、ごく狭い面積に
       ・大きな見出しは明朝（ポスター・告知物の文字）。小さな文字と数字はゴシック
       ・入力欄・パネル・料金カードの四隅にトンボ（断ち落としの目印）
       ・角は小さく（紙の角）
     ================================================================ */
  --bg:#F3EEE5;        /* 生成り */
  --surface:#FFFDF8;   /* 刷る前の紙 */
  --surface-2:#FAF6EE;
  --line:#E3DBCC;
  --line-2:#EEE8DC;

  --ink:#1E1B16;       /* 墨 */
  --ink-2:#5E574C;
  --ink-3:#958C7E;

  --hi:#FF4A1F;        /* 朱。塗り・線・現在地。ごく狭い面積にだけ使う */
  --hi-ink:#C8380F;    /* 朱を文字に使うときはこちら（白地で読める濃さ） */
  --hi-soft:#FFEDE5;
  --warn:#A8330F;      /* 足りない・失敗 */
  --warn-soft:#FBEAE2;
  --ok:#2F8A5B;
  --ok-soft:#E6F2EA;

  --r:4px;
  --r-sm:3px;

  --font-display:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;   /* 大きな見出しだけ */
  --font-ui:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;                 /* ラベル・数字 */
  --font-body:'Noto Sans JP','Hiragino Sans',sans-serif;

  /* サイト全体でこの1パターンのみ */
  --soft:0 1px 2px rgba(18,19,23,.04), 0 6px 18px -12px rgba(18,19,23,.22);
}

/* hidden属性は display を指定した要素では効かなくなるため、明示的に打ち消す */
[hidden]{ display:none !important; }

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

h1,h2{ font-family:var(--font-display); font-weight:900; letter-spacing:.01em; line-height:1.35; }

/* 作業中(Step2以降)は、ヒーローと実例を畳んで作業領域を広く使う */
body.is-working .hero,
body.is-working .samples{ display:none; }

/* ===== ヘッダー ======================================================== */

.topbar{ background:var(--surface); border-bottom:1px solid var(--line); }
.topbar__inner{
  max-width:1120px; margin:0 auto; padding:12px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand__mark{ display:block; width:24px; height:24px; flex:0 0 auto; }
.brand__mark svg{ display:block; width:100%; height:100%; }
.brand__name{ font-family:var(--font-ui); font-weight:700; font-size:14.5px; letter-spacing:-.02em; }
.topbar__nav{ display:flex; align-items:center; gap:8px; }
.topbar__help{
  font-size:12.5px; color:var(--ink-2); text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 13px;
  transition:border-color 160ms ease, color 160ms ease;
}
.topbar__help:hover{ border-color:var(--ink-3); color:var(--ink); }

/* ===== ヒーロー(入力そのものが主役) ====================================
   Base44 / Lovable / Durable がそろって採る構造。
   見出し → 一文 → **大きな入力** → 工程 → 数字、をファーストビューに収め、
   それ以外は置かない。使い方を説明する前に、使える状態にする。 */

.hero{ position:relative; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--line); }
.hero__inner{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:44px 28px 34px; }
.hero__head{ max-width:760px; margin:0 auto 24px; text-align:center; }

.eyebrow{
  display:inline-block; margin:0; font-family:var(--font-ui);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--hi-ink);
}
.hero__title{ margin:12px 0 0; font-size:clamp(25px,3.3vw,38px); }
/* 行ごとにマスクして下から立ち上げる */
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hero__title .line > span{ display:block; animation:lineUp 780ms cubic-bezier(.16,.84,.28,1) both; }
.hero__title .line:nth-child(2) > span{ animation-delay:110ms; }
@keyframes lineUp{ from{ transform:translateY(106%); } to{ transform:none; } }
.hero__title em{ font-style:normal; color:var(--hi-ink); }

.hero__sub{
  margin:13px auto 0; color:var(--ink-2); font-size:13.5px; max-width:52ch;
  animation:fadeUp 640ms ease-out both; animation-delay:300ms;
}

/* 入力カードの器。ここがファーストビューの主役。 */
.hero__stage{ max-width:830px; margin:0 auto; animation:fadeUp 700ms cubic-bezier(.16,.84,.28,1) both; animation-delay:380ms; }
/* パネルの装飾を外し、中の .composer だけを見せる */
.panel--bare{ background:transparent; border:0; box-shadow:none; padding:0; animation:none; }

/* 仕事として判断するための数字 */
.meta{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  margin:20px 0 0; padding:0;
  animation:fadeUp 640ms ease-out both; animation-delay:520ms;
}
.meta li{ padding:0 18px; border-right:1px solid var(--line); text-align:center; }
.meta li:last-child{ border-right:0; }
.meta b{ display:block; font-family:var(--font-ui); font-size:16px; font-weight:900; letter-spacing:-.03em; line-height:1.4; }
.meta span{ display:block; font-size:11px; color:var(--ink-3); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* 作業中(Step2以降)は、見出しと数字を畳んで工程バーだけ残す */
body.is-working .hero{ background:transparent; border-bottom:0; }
body.is-working .hero__inner{ padding:22px 28px 0; }
body.is-working .hero__head,
body.is-working .meta,
body.is-working .showcase{ display:none; }
/* 作業中でも「できあがりを見る」から見に行けるようにする（作業内容はそのまま残す） */
body.is-working.is-peeking .showcase{ display:block; }

/* --- ヒーロー背景: ベルトコンベヤー -------------------------------------
   左からチラシが運ばれてきて、入力カードの裏に吸い込まれ、
   右からWebページになって出てくる。**入力カードそのものが「装置」**という見立て。
   カードは不透明なので、その裏を通ることで「中で作られている」ように見える。

   テンポは「しゅっ・パ・すーっ」:
     しゅっ … 左から速く助走する(強い ease-out)
     パ     … カードの右から跳ねて出てくる(1.1倍に行き過ぎてから戻る + 一瞬光る)
     すーっ … そのまま滑らかに右へ流れていく(ゆるい ease)
   キーフレームごとに timing-function を変えて作り分けている。

   立体感は、コンテナの perspective と各要素の rotateY / rotateX で出している。 */

.hero__deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* 制作の下地であることを示す、ごく薄いドットの方眼 */
.hero__deco::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px; opacity:.9;
  -webkit-mask-image:radial-gradient(118% 90% at 50% 44%, transparent 42%, #000 100%);
          mask-image:radial-gradient(118% 90% at 50% 44%, transparent 42%, #000 100%);
}

.conveyor{ position:absolute; inset:0; perspective:1100px; perspective-origin:50% 42%; }

/* 走るベルト面。奥へ倒して置き、縞を流す。 */
.conveyor__belt{
  position:absolute; left:-6%; right:-6%; top:calc(50% + 62px); height:190px;
  transform:rotateX(63deg); transform-origin:50% 0%;
  overflow:hidden;
  /* 面であることを示すごく薄い陰影 */
  background:linear-gradient(180deg, rgba(18,19,23,.07), rgba(18,19,23,.02) 55%, rgba(18,19,23,0));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.conveyor__belt span{
  position:absolute; inset:0 -48px;
  background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 26px);
  animation:beltMove 1.5s linear infinite;
}
/* 奥へ行くほど溶けるようにして、面の奥行きを出す（縞と一緒に動かさない） */
.conveyor__belt::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 48%, #fff 88%);
}
@keyframes beltMove{ from{ transform:translateX(0); } to{ transform:translateX(26px); } }

/* ベルトの手前の縁 */
.conveyor__rail{
  position:absolute; left:-6%; right:-6%; top:calc(50% + 62px); height:2px;
  background:var(--ink-3); opacity:.55;
  box-shadow:0 1px 0 rgba(255,255,255,.9);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}

.cv{ position:absolute; left:0; }
.cv i{
  display:block; width:100%; height:100%; border-radius:6px; position:relative;
  border:1px solid var(--line); box-shadow:0 15px 22px -14px rgba(18,19,23,.52);
}

/* 5組を 2.6秒ずつずらして巡回させる。1周期13秒 = 2.6秒 × 5。 */
.cv--t1{ --d:0s; }  .cv--t2{ --d:-2.6s; }  .cv--t3{ --d:-5.2s; }
.cv--t4{ --d:-7.8s; } .cv--t5{ --d:-10.4s; }

.cv--in { animation:cvIn  13s infinite; animation-delay:var(--d); }
.cv--out{ animation:cvOut 13s infinite; animation-delay:var(--d); }

/* ---- 入ってくる素材（5種類） ----------------------------------------
   **素材ごとに形が違う**ので、遠目でも「これはポスター」「これはチラシ」と分かる。
   中身はインラインSVGで描いている（画像ファイルは使わない）。
   ベルトに乗せるため、下端をレールの高さに合わせている。 */
.cv i > svg{ display:block; width:100%; height:100%; border-radius:5px; }

.cv--in-poster { width:92px;  height:128px; top:calc(50% + 62px - 128px); }  /* 縦長・写真主役 */
.cv--in-flyer  { width:92px;  height:128px; top:calc(50% + 62px - 128px); }  /* 縦長・情報量が多い */
.cv--in-ad     { width:154px; height:66px;  top:calc(50% + 62px - 66px); }   /* 横長のバナー */
.cv--in-product{ width:104px; height:104px; top:calc(50% + 62px - 104px); }  /* 正方形の商品写真 */
.cv--in-prompt { width:142px; height:84px;  top:calc(50% + 62px - 84px); }   /* 入力欄そのもの */
/* プロンプトは紙ではないので、枠と影を持たせない */
.cv--in-prompt i{ border:0; box-shadow:0 12px 18px -14px rgba(18,19,23,.4); }

/* ---- 出てくるページ ---------------------------------------------------
   種類を作り分けるより、**ブラウザの窓だと一目で分かること**を優先している
   （上部のドット3つとアドレスバー）。素材より少し大きい＝良くなって出てくる。 */
.cv--out{ width:190px; height:134px; top:calc(50% + 62px - 134px); }

/* パ の瞬間に一度だけ光る */
.cv--out i::after{
  content:''; position:absolute; inset:-10px; border-radius:12px;
  background:radial-gradient(closest-side,rgba(255,74,31,.5),rgba(255,74,31,0) 72%);
  opacity:0; animation:cvFlash 13s linear infinite; animation-delay:var(--d);
}

/* しゅっ → そのまま吸い込まれる（間は置かない） */
@keyframes cvIn{
  0%   { transform:translateX(-170px) rotateY(-32deg) rotateX(5deg) scale(.86); opacity:0;
         animation-timing-function:cubic-bezier(.1,.88,.26,1); }            /* しゅっ */
  1.6% { opacity:1; animation-timing-function:cubic-bezier(.1,.88,.26,1); }
  /* 余白の中を通り抜ける。max() で、幅が狭いときも画面外へ行かせない */
  8%   { transform:translateX(max(40px, calc(50vw - 660px))) rotateY(-19deg) rotateX(5deg) scale(1); opacity:1;
         animation-timing-function:cubic-bezier(.62,0,.88,.36); }           /* ここから吸い込み加速 */
  14%  { transform:translateX(calc(50vw - 412px)) rotateY(-6deg) rotateX(5deg) scale(.4); opacity:0; }
  100% { transform:translateX(calc(50vw - 412px)) rotateY(-6deg) rotateX(5deg) scale(.4); opacity:0; }
}

/* パ → すーっ */
@keyframes cvOut{
  0%,13%  { transform:translateX(calc(50vw + 400px)) rotateY(-4deg) rotateX(5deg) scale(.5); opacity:0;
            animation-timing-function:cubic-bezier(.2,1.5,.4,1); }          /* パ */
  16%     { transform:translateX(calc(50vw + 452px)) rotateY(-13deg) rotateX(5deg) scale(1.1); opacity:1;
            animation-timing-function:ease-out; }
  18%     { transform:translateX(calc(50vw + 486px)) rotateY(-15deg) rotateX(5deg) scale(1); opacity:1;
            animation-timing-function:cubic-bezier(.35,.02,.5,1); }         /* すーっ */
  36%     { transform:translateX(calc(100vw + 90px)) rotateY(-21deg) rotateX(5deg) scale(1); opacity:1; }
  38.5%,100%{ transform:translateX(calc(100vw + 130px)) rotateY(-22deg) rotateX(5deg) scale(1); opacity:0; }
}

@keyframes cvFlash{
  0%,13%{ opacity:0; } 15.5%{ opacity:1; } 21%{ opacity:0; } 100%{ opacity:0; }
}

/* 余白が足りない幅では、装置に見えないので出さない */
@media (max-width:1180px){ .conveyor{ display:none; } }
@media (prefers-reduced-motion:reduce){ .conveyor{ display:none; } }

/* ===== 本体 ============================================================ */

.wrap{ max-width:1120px; margin:0 auto; padding:26px 28px 76px; }
/* Step1では中身(パネル2〜4)が全て隠れるため、空の帯が出ないよう畳む */
body:not(.is-working) .wrap{ display:none; }

/* ===== 工程バー ======================================================== */

.steps{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0;
  list-style:none; margin:22px 0 0; padding:0; font-size:12.5px;
}
body.is-working .steps{ justify-content:flex-start; margin:0 0 18px; }
.steps__item{ display:flex; align-items:center; gap:8px; color:var(--ink-3); }
.steps__item + .steps__item::before{
  content:''; width:clamp(14px,3.6vw,48px); height:1px; background:var(--line); margin:0 12px;
}
.steps__num{
  display:grid; place-items:center; width:21px; height:21px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line); color:var(--ink-3);
  font-family:var(--font-ui); font-weight:700; font-size:11px; line-height:1;
  transition:background 240ms ease, border-color 240ms ease, color 240ms ease;
}
.steps__name{ white-space:nowrap; transition:color 240ms ease; }
.steps__item.is-done .steps__num{ background:var(--ink); border-color:var(--ink); color:#fff; }
.steps__item.is-done .steps__name{ color:var(--ink-2); }
.steps__item.is-active .steps__num{ background:var(--hi); border-color:var(--hi); color:#fff; }
.steps__item.is-active .steps__name{ color:var(--ink); font-weight:700; }

/* ===== パネル ========================================================== */

.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px 30px; box-shadow:var(--soft);
  animation:fadeUp 460ms cubic-bezier(.16,.84,.28,1) both;
}
.panel__eyebrow{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--ink-3);
}
.panel__eyebrow b{ color:var(--hi-ink); font-weight:700; }
h2{ margin:0 0 6px; font-size:19px; }
.panel__desc{ margin:0 0 20px; max-width:62ch; color:var(--ink-2); font-size:13px; }

.panel__hint{
  margin:0 0 14px; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--warn-soft); color:var(--warn); font-size:12.5px; line-height:1.7;
}

/* ===== 入力(Step 1) ==================================================== */
/* Base44 / Lovable / Durable がそろって採る構造。「素材を足す」「意図を書く」
   「つくる」を1枚の面にまとめ、どこを操作すればよいか迷わせない。 */

.composer{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  overflow:hidden; transition:border-color 180ms ease, box-shadow 180ms ease;
}
.composer:focus-within{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(18,19,23,.07); }
.composer.is-over{ border-color:var(--hi); box-shadow:0 0 0 3px var(--hi-soft); }

.dropzone{
  position:relative; padding:26px 20px 22px; text-align:center;
  background:var(--surface-2); border-bottom:1px solid var(--line-2);
  cursor:pointer; transition:background 160ms ease;
}
.dropzone:hover{ background:var(--hi-soft); }
.composer.is-over .dropzone{ background:var(--hi-soft); }
.dropzone input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}

/* 「ここにチラシを置く」ことが、読まなくても分かるようにする。
   実物のポスターを3枚重ねて置き、真ん中の上に＋を出している。 */
.dropzone__art{
  position:relative; display:block; width:176px; height:80px; margin:0 auto 16px;
  pointer-events:none;
}
.dropzone__card{
  position:absolute; top:0; left:50%; width:54px; height:76px;
  margin-left:-27px; border-radius:3px; overflow:hidden; background:var(--surface);
  box-shadow:0 3px 10px rgba(18,19,23,.13), 0 0 0 1px rgba(18,19,23,.06);
  transition:transform 260ms cubic-bezier(.2,.9,.3,1);
}
.dropzone__card svg{ display:block; width:100%; height:100%; }
/* 商品写真だけ正方形。素材そのものが主役なので、切り取らずに収める */
.dropzone__card--r{ height:58px; top:12px; }
.dropzone__card--r svg{ object-fit:contain; }
.dropzone__card--l{ transform:translateX(-47px) rotate(-12deg); }
.dropzone__card--r{ transform:translateX(47px) rotate(12deg); }
.dropzone__card--c{ transform:translateY(-2px) rotate(-1deg); }
/* 近づくと束がひらく＝受け取る場所だと分かる */
.dropzone:hover .dropzone__card--l,
.composer.is-over .dropzone__card--l{ transform:translateX(-60px) rotate(-17deg); }
.dropzone:hover .dropzone__card--r,
.composer.is-over .dropzone__card--r{ transform:translateX(60px) rotate(17deg); }
.dropzone:hover .dropzone__card--c,
.composer.is-over .dropzone__card--c{ transform:translateY(-7px) rotate(0deg); }

.dropzone__plus{
  position:absolute; left:50%; bottom:-13px; margin-left:-13px;
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--hi); color:#fff; box-shadow:0 2px 8px rgba(255,74,31,.4);
  transition:transform 260ms cubic-bezier(.2,.9,.3,1);
}
.dropzone__plus svg{ display:block; width:13px; height:13px; }
.dropzone:hover .dropzone__plus,
.composer.is-over .dropzone__plus{ transform:scale(1.14); }

.dropzone__title{ margin:0; font-family:var(--font-ui); font-weight:700; font-size:13.5px; color:var(--ink); }
.dropzone__sub{ margin:4px 0 0; font-size:11.5px; color:var(--ink-3); }
.dropzone .filelist{ justify-content:center; margin-top:12px; }

.composer textarea{
  display:block; width:100%; min-height:98px; border:0; background:transparent;
  padding:15px; font-family:var(--font-body); font-size:14px; line-height:1.85;
  color:var(--ink); resize:vertical;
}
.composer textarea:focus{ outline:none; }
.composer textarea::placeholder{ color:var(--ink-3); }

.composer__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 12px 12px; flex-wrap:wrap;
}

.filelist{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.filelist li{
  font-size:11.5px; color:var(--ok); background:var(--ok-soft);
  border-radius:var(--r-sm); padding:3px 10px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  animation:fadeUp 300ms ease-out both;
}

/* 使う人が少ない設定は開くまで隠す */
.more{ margin:0; }
.more > summary{
  cursor:pointer; font-size:12px; color:var(--ink-3); list-style:none;
  display:inline-flex; align-items:center; gap:6px;
}
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::before{ content:'＋'; font-size:10px; }
.more[open] > summary::before{ content:'−'; }
.more > summary:hover{ color:var(--ink); }
.more__body{ margin-top:12px; }

.field{ display:block; margin-bottom:18px; }
.field:last-of-type{ margin-bottom:0; }
.field__label{ display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field input[type="text"]{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
  font-family:var(--font-body); font-size:13.5px; color:var(--ink); background:var(--surface-2);
  transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.field input[type="text"]::placeholder{ color:var(--ink-3); }
.field input[type="text"]:focus{
  outline:none; border-color:var(--ink); background:var(--surface);
  box-shadow:0 0 0 3px rgba(18,19,23,.07);
}

.field--mode, .field--sections{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:15px 17px; margin:0 0 18px;
  background:var(--surface-2);
}
.field--mode .field__label, .field--sections .field__label{ margin-bottom:9px; }
.radio, .checkbox{
  display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-2);
  cursor:pointer; line-height:1.7; min-width:0; transition:color 140ms ease;
}
.radio:hover, .checkbox:hover{ color:var(--ink); }
.radio{ margin-bottom:8px; }
.radio:last-child{ margin-bottom:0; }
.radio input, .checkbox input{ margin-top:4px; accent-color:var(--hi); flex:0 0 auto; width:15px; height:15px; }
.field--sections{ display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:10px 20px; }
.field--sections legend{ grid-column:1/-1; }

/* --- ページ構成の指定（お問い合わせ先・外部リンク・対応範囲） --------- */

.field__note{ margin:0 0 12px; font-size:12px; color:var(--ink-2); line-height:1.8; }
.field__note b{ color:var(--ink); }

.more--block{ display:block; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 17px; margin:0 0 18px; background:var(--surface-2); }
.more--block > summary{ font-size:13px; color:var(--ink); font-weight:700; }

.linkrows{ display:grid; gap:9px; }
.linkrow{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; align-items:center; }
.linkrow > span{ font-size:12px; color:var(--ink-2); }
.linkrow input{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 11px;
  font-family:var(--font-body); font-size:12.5px; color:var(--ink); background:var(--surface);
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.linkrow input::placeholder{ color:var(--ink-3); }
.linkrow input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(18,19,23,.07); }

/* できること／できないことを、つくる前にはっきり見せる。
   「あとから直せる範囲」を先に伝えておくと、選び直しの手戻りが減る。 */
.scope{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px 18px; margin:0 0 18px; background:var(--surface-2);
}
.scope__title{ margin:0 0 12px; font-family:var(--font-ui); font-weight:700; font-size:13px; }
.scope__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px 24px; }
.scope ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.scope li{ position:relative; padding-left:21px; font-size:12.5px; line-height:1.7; color:var(--ink-2); }
.scope li b{ color:var(--ink); }
.scope__ok li::before, .scope__ng li::before{
  position:absolute; left:0; top:0; font-family:var(--font-ui); font-weight:700; font-size:12px;
}
.scope__ok li::before{ content:'○'; color:var(--ok); }
.scope__ng li::before{ content:'×'; color:var(--ink-3); }
.scope__note{ margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3); line-height:1.7; }

/* ===== ボタン ========================================================== */

.btn{
  position:relative; overflow:hidden;
  font-family:var(--font-ui); font-size:13px; font-weight:700; cursor:pointer;
  border-radius:var(--r-sm); padding:10px 20px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:background 140ms ease, border-color 140ms ease, opacity 140ms ease, transform 140ms ease;
}
.btn:hover:not(:disabled){ border-color:var(--ink-3); background:var(--surface-2); }
.btn:active:not(:disabled){ transform:translateY(1px); transition-duration:80ms; }
.btn:focus-visible{ outline:2px solid var(--hi); outline-offset:2px; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }

.btn--primary{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--primary:hover:not(:disabled){ background:#2A2C33; border-color:#2A2C33; }
.btn--next::after{ content:'→'; margin-left:8px; }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
.btn--ghost:hover:not(:disabled){ border-color:var(--line); background:transparent; }
.btn--small{ padding:6px 13px; font-size:12px; }

.panel__actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; align-items:center; }

.error{
  margin-top:14px; padding:11px 14px; border-radius:var(--r-sm);
  background:var(--warn-soft); color:var(--warn); font-size:12.5px;
  animation:fadeUp 300ms ease-out both;
}

/* ===== 候補 ============================================================ */

.candidates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.candidate{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  overflow:visible; cursor:pointer; background:var(--surface-2); min-width:0;
  transition:border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  animation:fadeUp 460ms cubic-bezier(.16,.84,.28,1) both;
}
.candidate:nth-child(2){ animation-delay:70ms; }
.candidate:nth-child(3){ animation-delay:140ms; }
.candidate img{
  display:block; width:100%; height:250px; object-fit:cover;
  border-radius:var(--r) var(--r) 0 0;
}
.candidate:hover{ border-color:var(--ink-3); box-shadow:var(--soft); transform:translateY(-3px); }
.candidate.is-selected{
  border-color:var(--hi); transform:translateY(-3px);
  box-shadow:0 0 0 3px var(--hi-soft), var(--soft);
}
/* デザインツールの選択ハンドルのように、四隅にトンボを出す */
.candidate.is-selected::after{
  content:''; position:absolute; inset:-6px; pointer-events:none;
  background:
    linear-gradient(var(--hi),var(--hi)) left top/10px 2px no-repeat,
    linear-gradient(var(--hi),var(--hi)) left top/2px 10px no-repeat,
    linear-gradient(var(--hi),var(--hi)) right top/10px 2px no-repeat,
    linear-gradient(var(--hi),var(--hi)) right top/2px 10px no-repeat,
    linear-gradient(var(--hi),var(--hi)) left bottom/10px 2px no-repeat,
    linear-gradient(var(--hi),var(--hi)) left bottom/2px 10px no-repeat,
    linear-gradient(var(--hi),var(--hi)) right bottom/10px 2px no-repeat,
    linear-gradient(var(--hi),var(--hi)) right bottom/2px 10px no-repeat;
  animation:markIn 320ms cubic-bezier(.16,.84,.28,1) both;
}
@keyframes markIn{ from{ opacity:0; transform:scale(.93); } to{ opacity:1; transform:none; } }
.candidate__label{
  padding:12px 14px 14px; font-size:12.5px; background:var(--surface); color:var(--ink-2);
  border-top:1px solid var(--line-2); border-radius:0 0 var(--r) var(--r);
}
.candidate__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
/* 方向性の見出し。どちらを選ぶかの判断材料になるので、番号より大きく扱う。 */
.candidate__title{
  font-family:var(--font-ui); font-size:13.5px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); line-height:1.5;
}
.candidate__no{ font-size:10.5px; color:var(--ink-3); letter-spacing:.08em; }
.candidate__desc{ margin:6px 0 0; font-size:11.5px; line-height:1.75; color:var(--ink-2); }
.candidate.is-selected .candidate__label{ color:var(--ink); font-weight:700; }
.candidate.is-selected .candidate__title{ color:var(--hi-ink); }
.candidate__state{
  font-size:11px; border-radius:var(--r-sm); padding:2px 9px; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);
}
.candidate__state::before{ content:'選ぶ'; }
.candidate.is-selected .candidate__state{ background:var(--hi); color:#fff; border-color:var(--hi); }
.candidate.is-selected .candidate__state::before{ content:'選択中'; }

/* ===== 展開中(ローディング) ============================================
   署名演出。1枚の面(＝ポスター)が4つに分かれ、ページのブロックへ再配置される。
   ピースの枚数は最初から最後まで変えないので「増える」不自然さが出ない。
   コンセプトの「展開」を、待ち時間そのもので見せる。 */

.loading{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:52px 0; color:var(--ink-2); font-size:13px; text-align:center;
}
.loading p{ margin:0; }
.deploy{ position:relative; width:136px; height:104px; flex:0 0 auto; }
.deploy__p{
  position:absolute; border-radius:3px;
  animation:deploy 4.4s cubic-bezier(.7,0,.25,1) infinite;
}
@keyframes deploy{
  0%,16%  { transform:translate(var(--tx),var(--ty)) scale(var(--sx),var(--sy)); }
  48%,86% { transform:none; }
  100%    { transform:translate(var(--tx),var(--ty)) scale(var(--sx),var(--sy)); }
}
.deploy__p--1{ left:0;    top:0;    width:136px; height:14px; background:var(--ink);
  --tx:0px;   --ty:18px; --sx:.353; --sy:1.286; }
.deploy__p--2{ left:6px;  top:22px; width:124px; height:40px;
  background:linear-gradient(135deg,#FFB23A,var(--hi));
  --tx:0px;   --ty:6px;  --sx:.387; --sy:.7; }
.deploy__p--3{ left:6px;  top:70px; width:60px;  height:28px; background:var(--line);
  --tx:20px;  --ty:-9px; --sx:.4;   --sy:.929; }
.deploy__p--4{ left:72px; top:70px; width:58px;  height:28px; background:var(--line);
  --tx:-21px; --ty:-9px; --sx:.414; --sy:.929; }

/* ===== 生成結果 ======================================================== */

/* グリッドの子は既定で min-width:auto のため、コードブロックの長い行に
   トラックごと押し広げられてパネルからはみ出す。minmax(0,1fr) で止める。 */
/* 出来上がり（左）とチャット（右）。
   直したいところを見ながら書けるように横に並べる（2026-09-17）。
   狭い画面では プレビュー → チャット → サイトマップ の縦並びに戻す */
.result{
  display:grid; gap:22px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:'preview' 'talk' 'rest';
}
.result > *{ min-width:0; }
.result__preview{ grid-area:preview; }
.result .talk{ grid-area:talk; }
.result__rest{ grid-area:rest; display:grid; gap:22px; min-width:0; }

@media (min-width:1080px){
  .result{
    grid-template-columns:minmax(0,1fr) 360px;
    grid-template-areas:'preview talk' 'rest talk';
    align-items:start;
  }
  .result .talk{
    position:sticky; top:14px; align-self:start;
    max-height:calc(100vh - 28px);
  }
}
.result__label{ margin:0 0 8px; font-family:var(--font-ui); font-weight:700; font-size:12.5px; color:var(--ink-2); }
.result__preview iframe{
  width:100%; height:440px; display:block; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--soft);
}
.result__code-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.result__code-actions{ display:flex; gap:8px; }
.result pre{
  max-height:260px; overflow:auto; margin:0; padding:15px;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.7;
}

/* --- 内容の差し替え(編集モード) --------------------------------------- */

.result__previewhead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:9px;
}
.result__previewhead .result__label{ margin:0; }
.editbar{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.editbar__note{ font-size:11.5px; color:var(--ink-3); }
.editbar__help{
  margin:10px 0 0; padding:9px 13px; border-radius:var(--r-sm);
  background:var(--hi-soft); color:#A8330F; font-size:12px; line-height:1.7;
}
/* 編集中はプレビューの枠を強調して、いまどのモードかを分かるようにする */
.is-editing .result__preview iframe{ border-color:var(--hi); box-shadow:0 0 0 3px var(--hi-soft); }

/* ===== 公開(Step 4) ==================================================== */

.field__hint{ display:block; margin-top:8px; font-size:12px; color:var(--ink-3); word-break:break-all; line-height:1.7; }
.pricing{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:16px 18px;
  background:var(--surface-2); margin:20px 0;
}
.pricing__amount{ margin:0; font-family:var(--font-ui); font-size:17px; font-weight:900; letter-spacing:-.03em; }
.pricing__note{ margin:6px 0 0; font-size:12px; color:var(--ink-2); }

.published{
  margin-top:22px; border:1px solid var(--ok); border-radius:var(--r);
  padding:20px 22px; background:var(--ok-soft);
  animation:fadeUp 520ms cubic-bezier(.16,.84,.28,1) both;
}
.published__label{
  margin:0 0 10px; font-family:var(--font-ui); font-weight:700; font-size:13px;
  letter-spacing:.06em; color:var(--ok);
}
.published__url{
  display:block; font-size:14.5px; font-weight:700; color:var(--ink);
  word-break:break-all; margin-bottom:10px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
  transition:border-color 160ms ease;
}
.published__url:hover{ border-color:var(--ok); }
.published__detail{ margin:0 0 13px; font-size:12px; color:var(--ink-2); }

/* ===== ショーケース:「素材から、こんなページに。」 =====================
   ポスターを選ぶと、そこから実際にできたページが現れる。
   **チラシは縦長のまま全体を見せる**(切り抜くと、絵柄によって見え方が壊れるため)。
   そのため素材は横一列に置き、下向きの矢印でページへつなぐ。
   ページの画像は縦長のまま置き、枠の中をゆっくりスクロールさせている(＝アニメーション素材)。 */

.showcase{ background:var(--surface); border-top:1px solid var(--line); }
.showcase__inner{ max-width:1120px; margin:0 auto; padding:52px 28px 60px; }
.showcase__head{ margin-bottom:26px; text-align:center; }
.showcase__title{ margin:0; font-size:clamp(19px,2.5vw,26px); }
.showcase__note{ margin:9px auto 0; max-width:74ch; color:var(--ink-2); font-size:12.5px; }

.picker{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px;
  max-width:1064px; margin:0 auto; padding:0; list-style:none;
}
.picker li{ display:grid; }
.pick{
  display:flex; flex-direction:column; height:100%; width:100%; padding:0;
  text-align:left; cursor:pointer; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* 素材は切り抜かない。比率がばらついても全体が見えるよう、枠の中に収める。 */
.pick__frame{
  aspect-ratio:3/4; background:var(--surface-2);
  border-bottom:1px solid var(--line-2); overflow:hidden;
}
/* contain なので、比率が違う素材でも必ず全体が入る（切り抜かない） */
.pick__frame img{ display:block; width:100%; height:100%; object-fit:contain; }
.pick__body{ margin-top:auto; padding:8px 9px 9px; text-align:center; }
.pick__kind{
  display:block; font-family:var(--font-ui); font-size:10.5px; font-weight:700;
  letter-spacing:.08em; color:var(--hi-ink); margin-bottom:2px;
}
.pick__name{
  display:block; font-family:var(--font-ui); font-size:11px; font-weight:700;
  color:var(--ink-3); line-height:1.45; transition:color .18s ease;
}
.pick:hover{ transform:translateY(-3px); box-shadow:var(--soft); border-color:var(--ink-3); }
.pick:focus-visible{ outline:2px solid var(--hi); outline-offset:2px; }
.pick.is-on{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.pick.is-on .pick__name{ color:var(--ink); }

/* 扱える素材の種類を、見出しのすぐ下で言い切る */
.kinds{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  list-style:none; margin:14px 0 22px; padding:0;
}
.kinds li{
  font-family:var(--font-ui); font-size:11.5px; font-weight:700;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 13px;
  background:var(--surface-2); color:var(--ink-2);
}

.showcase__arrow{ display:grid; place-items:center; padding:20px 0 18px; color:var(--ink-3); font-size:19px; }
.showcase__arrow span{ display:block; animation:nudgeY 2.6s ease-in-out infinite; }
@keyframes nudgeY{ 0%,100%{ transform:translateY(-4px); } 50%{ transform:translateY(4px); } }

.stage{
  max-width:940px; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); box-shadow:var(--soft);
}
.stage__chrome{
  height:32px; display:flex; align-items:center; gap:6px; padding:0 12px;
  background:var(--surface-2); border-bottom:1px solid var(--line-2);
}
.stage__chrome i{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.stage__url{
  margin-left:10px; font-size:11px; color:var(--ink-3);
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:2px 10px; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 枠の中は、自動でゆっくり流れつつ、マウスでも動かせる。
   transform でずらすと手で動かせないため、実際にスクロールさせる方式にした
   （自動送りは app.js が scrollTop を毎フレーム進める。操作されたら一時停止する）。 */
.stage__view{
  position:relative; height:460px; background:#fff;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.stage__view::-webkit-scrollbar{ width:8px; }
.stage__view::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.stage__view::-webkit-scrollbar-track{ background:transparent; }
.stage__view img{ display:block; width:100%; }

/* 手で動かせることを示す小さな目印。操作すると消える。 */
.stage__hint{
  position:absolute; right:14px; bottom:12px; z-index:2; pointer-events:none;
  font-family:var(--font-ui); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  background:rgba(18,19,23,.78); color:#fff; border-radius:var(--r-sm); padding:4px 10px;
  transition:opacity .4s ease;
}
.stage.is-touched .stage__hint{ opacity:0; }

/* クリックしたときに、ページが立ち上がって現れる */
.stage.is-swap{ animation:stageIn 620ms cubic-bezier(.16,.84,.28,1); }
@keyframes stageIn{
  0%{ opacity:0; transform:translateY(12px) scale(.988); }
  100%{ opacity:1; transform:none; }
}

/* ===== 料金(無料でできること / 有料でできること) ======================= */

.plans{ background:var(--bg); border-top:1px solid var(--line); }
.plans__inner{ max-width:1120px; margin:0 auto; padding:48px 28px 56px; }
.plans__head{ text-align:center; margin-bottom:26px; }
.plans__title{ margin:0; font-size:clamp(18px,2.3vw,24px); }
.plans__note{ margin:9px auto 0; max-width:66ch; color:var(--ink-2); font-size:12.5px; }
.plans__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px; max-width:1060px; margin:0 auto; align-items:start; }
.plan{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px 24px;
}
.plan--paid{ border-color:var(--ink); }
.plan__tag{
  display:inline-block; font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:.1em; padding:3px 10px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
}
.plan--paid .plan__tag{ background:var(--ink); color:#fff; border-color:var(--ink); }
.plan__name{ margin:12px 0 4px; font-family:var(--font-ui); font-size:17px; font-weight:900; letter-spacing:-.03em; }
.plan__lead{ margin:0 0 14px; font-size:12.5px; color:var(--ink-2); }
.plan ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.plan li{ position:relative; padding-left:22px; font-size:13px; line-height:1.75; }
.plan li::before{
  content:''; position:absolute; left:0; top:.55em; width:13px; height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9L12.5 5.2' fill='none' stroke='%230E9F6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.plan__foot{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-2); font-size:11.5px; color:var(--ink-3); }

/* 有料であることを示す小さなタグ（工程バー・パネル見出し） */
.tag-paid{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:4px;
  background:var(--ink); color:#fff;
  font-family:var(--font-ui); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  vertical-align:1px;
}

.footer{
  max-width:1120px; margin:0 auto; padding:34px 28px 44px;
  color:var(--ink-3); font-size:11.5px; text-align:center;
}

/* ===== レスポンシブ ==================================================== */

@media (max-width:880px){
  .topbar__inner{ padding:10px 18px; }
  .hero__inner{ padding:30px 18px 26px; }
  .hero__head{ margin-bottom:20px; }
  .hero__title{ font-size:clamp(22px,5.8vw,30px); }
  .hero__sub{ max-width:none; }
  .meta{ gap:10px 0; }
  .meta li{ padding:0 12px; }
  .meta b{ font-size:15px; }
  .steps{ justify-content:flex-start; }
  .wrap{ padding:18px 18px 56px; }
  .panel{ padding:22px 18px 24px; }
  h2{ font-size:17px; }
  .steps{ font-size:11.5px; gap:8px 0; }
  .steps__item + .steps__item::before{ width:12px; margin:0 8px; }
  .composer textarea{ min-height:124px; }
  .linkrow{ grid-template-columns:1fr; gap:4px; }
  .composer__foot{ flex-direction:column; align-items:stretch; }
  .composer__foot .btn{ width:100%; }
  .candidate img{ height:200px; }
  .result__preview iframe{ height:300px; }
  .panel__actions .btn{ flex:1 1 auto; }
  .showcase__inner{ padding:40px 18px 46px; }
  .picker{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .pick__name{ font-size:10.5px; }
  .pick__kind{ font-size:10.5px; }
  .showcase__arrow{ padding:14px 0 12px; }
  .stage__view{ height:320px; }
  .plans__inner{ padding:38px 18px 44px; }
  .footer{ padding:26px 18px 40px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ── サイトマップ / ページの追加（STEP3） ───────────────────────────── */
.sitemap{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:18px 20px 20px;
}
.sitemap__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap;
}
.sitemap__head .result__label{ margin:0; display:flex; align-items:center; gap:8px; }
.sitemap__desc{
  margin:8px 0 14px; font-size:12px; line-height:1.85; color:var(--ink-3);
}
.sitemap__tree{ list-style:none; margin:0; padding:0; }

.sitemap__node{ position:relative; }
/* 下層ページは、TOPからぶら下がっていることが分かるよう左に罫を引く */
.sitemap__node--child{ padding-left:26px; }
.sitemap__node--child::before{
  content:""; position:absolute; left:9px; top:0; bottom:50%;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  width:11px; border-bottom-left-radius:5px;
}
.sitemap__btn{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border:1px solid transparent; border-radius:var(--r-sm);
  background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.sitemap__btn:hover{ background:#FAFAFB; border-color:var(--line); }
.sitemap__node.is-current > .sitemap__btn{
  background:var(--hi-soft); border-color:rgba(255,74,31,.28);
}
.sitemap__icon{
  flex:none; width:16px; height:16px; border:1.5px solid var(--ink-3); border-radius:2px;
}
.sitemap__icon::after{
  content:""; display:block; width:8px; height:1.5px; margin:3px auto 0; background:var(--ink-3);
}
.sitemap__node.is-current .sitemap__icon{ border-color:var(--hi); }
.sitemap__node.is-current .sitemap__icon::after{ background:var(--hi); }
.sitemap__name{ font-size:13px; font-weight:700; }
.sitemap__file{ font-size:11px; color:var(--ink-3); font-family:ui-monospace,Menlo,Consolas,monospace; }
.sitemap__state{ margin-left:auto; font-size:11px; color:var(--hi-ink); }
/* 足したページだけに出る削除ボタン。TOPには出さない */
.sitemap__del{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; padding:0; border:0; border-radius:4px;
  background:none; color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .16s ease, background .16s ease, color .16s ease;
}
.sitemap__node:hover .sitemap__del,
.sitemap__del:focus-visible{ opacity:1; }
.sitemap__del:hover{ background:var(--warn-soft); color:var(--warn); }

.pageform{
  margin-top:16px; padding-top:18px; border-top:1px dashed var(--line);
  display:grid; gap:14px;
}
.pageform textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font:inherit; font-size:13px; line-height:1.9; color:var(--ink);
  resize:vertical;
}
.pageform textarea:focus{ outline:none; border-color:var(--ink); }
.pageform__actions{ display:flex; gap:10px; justify-content:flex-end; }
.pageform__wait{ margin:0; font-size:12px; color:var(--ink-2); }
.pageform.is-busy .pageform__actions{ opacity:.45; pointer-events:none; }

/* ── 無料／有料の2段構え（STEP2） ─────────────────────────────────── */
.tier{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:16px 18px 18px; margin-bottom:14px;
}
/* 有料側は、無料側と地の色で見分けられるようにする */
.tier--paid{ background:#FAFAFB; }
.tier__head{ display:flex; align-items:center; gap:2px; padding:0; }
.tier__title{ font-size:13px; font-weight:700; color:var(--ink); }
.tier__desc{ margin:8px 0 0; font-size:12px; line-height:1.9; color:var(--ink-2); }
.tier__note{
  margin:10px 0 0; padding:9px 12px; border-radius:var(--r-sm);
  background:#F1F8F4; color:#0B6B4C; font-size:11.5px; line-height:1.85;
}
.tag-free{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:4px;
  background:var(--ok); color:#fff;
  font-family:var(--font-ui); font-size:9.5px; font-weight:700; letter-spacing:.08em;
  vertical-align:1px;
}

/* 素材を読んでいる間 */
.reading{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:12px; color:var(--ink-3); }
.reading__dot{
  width:7px; height:7px; border-radius:50%; background:var(--hi);
  animation:readingPulse 1.1s ease-in-out infinite;
}
@keyframes readingPulse{ 0%,100%{ opacity:.25; transform:scale(.8) } 50%{ opacity:1; transform:scale(1) } }

.checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:8px 18px; margin-top:13px; }
.checks:empty{ margin-top:0; }
.check{
  display:flex; align-items:flex-start; gap:9px; padding:8px 10px;
  border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.check:hover{ background:#FAFAFB; border-color:var(--line); }
.check input{ margin-top:3px; accent-color:var(--hi); flex:0 0 auto; width:15px; height:15px; }
.check__body{ min-width:0; }
.check__label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.6; }
/* 素材から読み取れた中身。ここがあるので「何を書くか」を尋ねずに済む */
.check__note{ display:block; margin-top:2px; font-size:11px; line-height:1.7; color:var(--ink-3); }
.check__note b{ color:var(--ok); font-weight:700; }
.check__del{
  margin-left:auto; flex:none; width:20px; height:20px; padding:0; border:0; border-radius:4px;
  background:none; color:var(--ink-3); font-size:14px; line-height:1; cursor:pointer;
}
.check__del:hover{ background:var(--line); color:var(--ink); }

.secadd{ margin-top:12px; padding-top:13px; border-top:1px dashed var(--line); }
.secadd__form{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.secadd__form input{
  flex:1 1 190px; min-width:0; padding:8px 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); font:inherit; font-size:12.5px; color:var(--ink);
}
.secadd__form input:focus{ outline:none; border-color:var(--ink); }
.secadd__hint{ margin:8px 0 0; font-size:11px; line-height:1.8; color:var(--ink-3); }

/* 先に決めておく下層ページ */
.planned{ list-style:none; margin:13px 0 11px; padding:0; display:grid; gap:7px; }
.planned:empty{ margin:0; }
.planned li{
  display:flex; align-items:flex-start; gap:10px; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.planned__name{ font-size:12.5px; font-weight:700; color:var(--ink); flex:none; }
.planned__body{ font-size:11.5px; line-height:1.7; color:var(--ink-3); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planned__del{
  margin-left:auto; flex:none; width:20px; height:20px; padding:0; border:0; border-radius:4px;
  background:none; color:var(--ink-3); font-size:14px; line-height:1; cursor:pointer;
}
.planned__del:hover{ background:var(--line); color:var(--ink); }

.planform{ margin-top:11px; display:grid; gap:9px; }
.planform input, .planform textarea{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font:inherit; font-size:12.5px; line-height:1.85; color:var(--ink);
  resize:vertical;
}
.planform input:focus, .planform textarea:focus{ outline:none; border-color:var(--ink); }
.planform__actions{ display:flex; gap:9px; justify-content:flex-end; }

/* ── ベーシック／プロの切り替え（入力欄の足元） ─────────────────────── */
/* スイッチは、ボタンと同じ行に詰めると窮屈になるので独立した行に置く */
.composer__mode{
  display:flex; align-items:center; gap:14px;
  padding:10px 14px; border-top:1px solid var(--line-2);
}
.switch{ display:flex; align-items:center; gap:9px; cursor:pointer; flex:none; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{
  position:relative; flex:none; width:34px; height:19px; border-radius:999px;
  background:var(--line); transition:background 180ms ease;
}
.switch__knob{
  position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--surface); box-shadow:0 1px 3px rgba(18,19,23,.3);
  transition:transform 180ms cubic-bezier(.2,.9,.3,1);
}
.switch input:checked + .switch__track{ background:var(--hi); }
.switch input:checked + .switch__track .switch__knob{ transform:translateX(15px); }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--ink); outline-offset:2px; }
.switch__name{ font-size:12px; font-weight:700; color:var(--ink-2); white-space:nowrap; }
.switch input:checked ~ .switch__name{ color:var(--ink); }
.switch__desc{
  margin:0; font-size:11px; line-height:1.7; color:var(--ink-3);
  flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tag-pro{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px;
  background:var(--line); color:var(--ink-3);
  font-family:var(--font-ui); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  vertical-align:1px; transition:background 180ms ease, color 180ms ease;
}
.switch input:checked ~ .switch__name .tag-pro{ background:var(--hi); color:#fff; }
/* 狭い画面では説明が途中で切れて読めないので、出さない（スイッチだけ残す） */
@media (max-width: 560px){ .switch__desc{ display:none; } }

/* PROのときは、入力欄そのものにオレンジの枠を出す（いまどちらかが一目で分かる） */
.composer.is-pro{ border-color:var(--hi); box-shadow:0 0 0 3px var(--hi-soft); }
.composer.is-pro .dropzone{ border-bottom-color:rgba(255,74,31,.2); }
.composer.is-pro .composer__mode{ border-top-color:rgba(255,74,31,.2); }

/* TOPも合わせて直したことの知らせ */
.toprev{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:13px 0 0; padding:10px 13px; border-radius:var(--r-sm);
  background:#F1F8F4; color:#0B6B4C; font-size:11.5px; line-height:1.8;
}
.toprev__text{ min-width:0; }
.toprev .btn{ margin-left:auto; }

/* たたんだ「つくれるもの／つくらないもの」（最初の画面） */
.scope--fold{
  margin:0 0 10px; padding:11px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.scope--fold > summary{
  cursor:pointer; list-style:none; margin:0;
  font-size:12.5px; font-weight:700; color:var(--ink);
}
.scope--fold > summary::-webkit-details-marker{ display:none; }
.scope--fold > summary::before{
  content:'＋'; display:inline-block; width:15px; color:var(--ink-3); font-weight:400;
}
.scope--fold[open] > summary::before{ content:'−'; }
.scope--fold[open] > summary{ margin-bottom:12px; }

/* オレンジの小ボタン（「＋ 項目を足す」など、気づいてほしい操作） */
.btn--hi{
  background:var(--hi); border-color:var(--hi); color:#fff;
}
.btn--hi:hover{ background:#E63F16; border-color:#E63F16; color:#fff; }

/* ── 「？」で詳しく ──────────────────────────────────────────────── */
.hint{ position:relative; flex:none; display:inline-flex; cursor:help; }
.hint__mark{
  display:grid; place-items:center; width:17px; height:17px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface);
  font-size:10px; font-weight:700; color:var(--ink-3); line-height:1;
}
.hint:hover .hint__mark,
.hint:focus-visible .hint__mark{ border-color:var(--hi); color:var(--hi-ink); }
.hint__pop{
  position:absolute; left:50%; bottom:calc(100% + 10px); z-index:30;
  width:296px; margin-left:-148px; padding:13px 15px 12px;
  border-radius:var(--r-sm); background:var(--ink); color:#fff;
  font-size:11.5px; line-height:1.85; text-align:left;
  box-shadow:0 10px 28px rgba(18,19,23,.26);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.hint:hover .hint__pop,
.hint:focus-visible .hint__pop{ opacity:1; visibility:visible; transform:none; }
/* 吹き出しの足 */
.hint__pop::after{
  content:''; position:absolute; left:50%; top:100%; margin-left:-6px;
  border:6px solid transparent; border-top-color:var(--ink);
}
.hint__pop > b{ display:block; margin-bottom:7px; font-size:12px; color:#fff; }
.hint__pop ul{ list-style:none; margin:0; padding:0; }
.hint__pop li{ position:relative; padding-left:13px; color:#D8DAE0; }
.hint__pop li::before{
  content:''; position:absolute; left:0; top:.72em; width:5px; height:5px;
  border-radius:50%; background:var(--hi);
}
.hint__pop li b{ color:#fff; font-weight:700; }
.hint__pop > i{
  display:block; margin-top:9px; padding-top:8px; border-top:1px solid rgba(255,255,255,.16);
  font-style:normal; color:#A9ADB6;
}
@media (max-width: 560px){
  .hint__pop{ width:230px; margin-left:-115px; }
}


/* ------------------------------------------------------------------ 料金 */

/* いま契約しているプラン。1枚だけ前に出す */
.plan--current{ border-color:var(--hi); box-shadow:0 0 0 3px var(--hi-soft); }
.plan--current .plan__tag{ background:var(--hi); color:#fff; border-color:var(--hi); }

/* 「できないこと」。チェックではなく横線にして、同じ列でも見分けがつくようにする */
.plan__no{ color:var(--ink-3); }
.plan__no::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%238C909A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat !important;
}

/* 1件あたりの値段。段が効いているのが目で分かる */
.plan__unit{
  margin:14px 0 0; font-family:var(--font-ui); font-size:12px; font-weight:700;
  color:var(--hi-ink);
}
.plan .btn{ margin-top:16px; width:100%; }
.plans__fine{
  margin:22px auto 0; max-width:66ch; text-align:center;
  font-size:11.5px; line-height:1.9; color:var(--ink-3);
}

/* --------------------------------------------------- ヘッダーのログイン */

.account{ display:flex; align-items:center; }
.account__in{ display:flex; align-items:center; gap:10px; }
.account__plan{
  font-family:var(--font-ui); font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:var(--r-sm);
  background:var(--ink); color:#fff;
}
.account__meters{ display:flex; gap:6px; }

/* 残り回数。**使い切る前から見える**ようにする。切れてから知らされるのが一番困る */
.meter{
  display:inline-flex; align-items:baseline; gap:5px;
  font-size:11px; line-height:1; padding:5px 9px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink-2); white-space:nowrap;
}
.meter b{ font-weight:600; color:var(--ink-3); font-size:10.5px; }
.meter span{ font-family:var(--font-ui); font-weight:700; color:var(--ink); }
.meter--low{ border-color:var(--warn); color:var(--warn); }
.meter--low span{ color:var(--warn); }
.meter--out{ background:var(--warn); border-color:var(--warn); color:#fff; }
.meter--out b, .meter--out span{ color:#fff; }

.account__login, .account__logout{
  font:inherit; cursor:pointer; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); padding:5px 13px; font-size:12.5px;
}
.account__login{ border-color:var(--ink); background:var(--ink); color:#fff; }
.account__logout{ font-size:11.5px; padding:5px 10px; }
.account__login:hover{ opacity:.88; }
.account__logout:hover{ border-color:var(--ink-3); color:var(--ink); }

/* ----------------------------------------- ログイン/プランの案内（覆い） */

.gate{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(18,19,23,.48);
}
.gate__box{
  position:relative; width:min(460px,100%);
  background:var(--surface); border-radius:var(--r); padding:30px 32px 26px;
  box-shadow:0 30px 60px -20px rgba(18,19,23,.5);
}
.gate__eyebrow{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--hi-ink);
}
.gate__title{
  margin:10px 0 0; font-family:var(--font-ui);
  font-size:19px; font-weight:900; letter-spacing:-.03em; line-height:1.5;
}
.gate__desc{ margin:11px 0 0; font-size:13px; line-height:1.85; color:var(--ink-2); }
.gate__actions{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
.gate__actions .btn{ flex:1 1 auto; }
.gate__close{
  position:absolute; top:12px; right:14px; width:30px; height:30px;
  border:0; background:none; cursor:pointer;
  font-size:22px; line-height:1; color:var(--ink-3);
}
.gate__close:hover{ color:var(--ink); }

@media (max-width:720px){
  /* 狭い画面では、残り回数まで出すとヘッダーが折り返して読みにくくなる */
  .account__meters{ display:none; }
  .account__plan{ font-size:11px; padding:3px 8px; }
}


/* ------------------------------------------------------- 作ったもの一覧 */

/* つくる画面では、工程が始まるまで .wrap を畳んでいる（空の帯を出さないため）。
   管理画面は最初から中身があるので、その扱いから外す。
   後に書いてあるぶん、同じ強さでもこちらが勝つ。 */
body.page-manage .wrap{ display:block; }

/* 枠の使い方。ここが埋まると何もできなくなるので、いちばん上に置く */
.quota{ margin:18px 0 22px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.quota__plan{
  display:flex; align-items:baseline; gap:10px; margin:0;
  padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.quota__plan b{ font-family:var(--font-ui); font-size:14px; }
.quota__plan span{ font-size:12px; color:var(--ink-2); }
.quota__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.quota__item{
  padding:14px 16px; border-right:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:4px;
}
.quota__item:last-child{ border-right:0; }
.quota__label{ font-size:11px; color:var(--ink-3); }
.quota__value{ font-family:var(--font-ui); }
.quota__value b{ font-size:20px; font-weight:900; letter-spacing:-.03em; }
.quota__value span{ font-size:12px; color:var(--ink-3); }
/* 埋まっている枠は赤くして、次にどうすればいいかを書く */
.quota__item.is-full{ background:var(--hi-soft); }
.quota__item.is-full .quota__value b{ color:var(--hi-ink); }
.quota__note{ font-size:10.5px; line-height:1.6; color:var(--hi-ink); }
/* 単位の説明。**「回」がサイト数だと読まれやすい**ので、埋まる前から出す */
.quota__unit{ font-size:10.5px; line-height:1.6; color:var(--ink-3); }

.projects{ display:grid; gap:12px; }
.projects__empty{ padding:36px 0; text-align:center; color:var(--ink-3); font-size:13px; }

.proj{
  display:grid; grid-template-columns:76px 1fr auto; gap:16px; align-items:center;
  padding:12px 16px 12px 12px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
/* 公開中のものは、一目で分かるようにする */
.proj.is-live{ border-color:var(--hi); }

.proj__thumb{
  width:76px; height:96px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
}
.proj__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.proj__noimg{ font-size:10px; color:var(--ink-3); }

.proj__body{ min-width:0; }
.proj__title{
  margin:0 0 5px; font-family:var(--font-ui); font-size:15px; font-weight:900;
  letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.proj__meta{ margin:0; display:flex; gap:12px; font-size:11.5px; color:var(--ink-3); }
.proj__url{
  display:inline-block; margin-top:7px; font-size:11.5px; color:var(--hi-ink);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.proj__side{ display:flex; align-items:center; gap:16px; flex:none; }
.proj__del{
  font:inherit; font-size:11.5px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  color:var(--ink-3); padding:6px 12px;
}
.proj__del:hover{ border-color:var(--hi); color:var(--hi-ink); }
.proj__del:disabled{ opacity:.5; cursor:default; }

@media (max-width:640px){
  .proj{ grid-template-columns:60px 1fr; }
  .proj__thumb{ width:60px; height:76px; }
  /* 狭いときは、切り替えと削除を下の段へ回す */
  .proj__side{ grid-column:1 / -1; justify-content:space-between; padding-top:4px; }
}


/* 作ったものを「見る」ための導線。公開していないものはここからしか確かめられない */
a.proj__thumb{ cursor:pointer; transition:border-color 140ms ease, transform 140ms ease; }
a.proj__thumb:hover{ border-color:var(--hi); transform:translateY(-1px); }

.proj__pages{ margin:8px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.proj__page{
  display:inline-block; font-size:11px; line-height:1;
  padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.proj__page:hover{ border-color:var(--hi); color:var(--hi-ink); }

.proj__edit{
  font-size:11.5px; line-height:1; text-decoration:none; white-space:nowrap;
  border:1px solid var(--ink); border-radius:var(--r-sm);
  background:var(--ink); color:#fff; padding:7px 13px;
}
.proj__edit:hover{ opacity:.88; }


/* ------------------------------------------------------------ トークルーム */

.talk{
  display:flex; flex-direction:column; min-height:420px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); overflow:hidden; box-shadow:var(--soft);
}
.talk__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.talk__head .result__label{ margin:0; }
/* いまどのページに話しかけているか。ページを足すと迷いやすいので出す */
.talk__where{
  display:inline-block; margin-top:2px; padding:1px 8px; border-radius:999px;
  background:var(--hi-soft); color:var(--hi-ink); font-size:10.5px; font-weight:700;
}
.talk__meter{ font-size:11px; color:var(--ink-3); white-space:nowrap; }

/* 会話のログ。伸びる側。空のときは使い方を出す */
.talk__log{
  flex:1 1 auto; min-height:180px; overflow-y:auto;
  padding:12px 14px; display:flex; flex-direction:column; gap:8px;
}
.talk__log:empty::before{
  content:'ここに、これまでの指示と返事がたまります。';
  margin:auto; padding:0 18px; text-align:center;
  font-size:12px; line-height:1.9; color:var(--ink-3);
}
.talk__row{ display:flex; }
.talk__row--me{ justify-content:flex-end; }
.talk__bubble{
  margin:0; max-width:78%; padding:8px 12px; border-radius:14px;
  font-size:12.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word;
}
.talk__row--me .talk__bubble{ background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
.talk__row--bot .talk__bubble{ background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px; }
.talk__row--wait .talk__bubble{ color:var(--ink-3); }
.talk__row--warn .talk__bubble{ background:var(--warn-soft); color:var(--warn); }

.talk__form{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-top:1px solid var(--line-2); flex:none; }
.talk__form textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:62px;
  font:inherit; font-size:13px; line-height:1.6;
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.talk__form textarea:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.talk__formfoot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.talk__formfoot .cost-hint{ margin:0; }
.talk__form .btn{ white-space:nowrap; }
.talk__hint{ margin:0; padding:0 14px 12px; font-size:11px; color:var(--ink-3); flex:none; }

/* 吹き出しは、横に並べたぶん幅が狭い。目一杯使う */
.talk__row--me{ justify-content:flex-end; }
.talk .talk__bubble{ max-width:90%; }

/* 持ち帰りがプランで閉じているとき */
.codelock{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border:1px dashed var(--line); border-radius:var(--r-sm);
  background:var(--surface-2);
}
.codelock__text{ margin:0; font-size:12.5px; line-height:1.85; color:var(--ink-2); }

/* ダッシュボードの「新しく作る」 */
.dash__new{ display:flex; justify-content:flex-end; margin:0 0 14px; }


/* ----------------------------------------- 作業の前に「◯pt使います」 */
/* 値段は先に見せる。押してから「足りません」と言われるのが一番困る */
.cost-hint{ margin:8px 0 0; font-size:12px; color:var(--ink-3); }
.cost-hint--right{ text-align:right; }
.cost-hint--inline{ display:inline; margin:0 0 0 8px; }
.cost-hint.is-short{ color:var(--warn); font-weight:600; }


/* ----------------------------------------- 表示チェックの結果 */
.qbadge{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.02em; vertical-align:middle; border:1px solid transparent; }
.qbadge--ok{ background:#e9f6ee; color:#1d6b3a; border-color:#bfe3cc; }
.qbadge--warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
.qbadge--skip{ background:transparent; color:var(--ink-3); border-color:var(--line); }

/* 書き直し（8pt）の確認。吹き出しの中にボタンを並べる */
.talk__row--ask .talk__bubble{ background:var(--surface-2); border:1px solid var(--line); }
.talk__acts{ display:flex; gap:8px; margin-top:10px; }

/* 法定表記へのリンク。小さく、でも必ず見える場所に */
.footer__legal{ margin-top:8px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.footer__legal a{ color:var(--ink-3); font-size:11.5px; text-decoration:none; border-bottom:1px solid var(--line); }
.footer__legal a:hover{ color:var(--ink); }
.quota__cancel{ margin-left:auto; background:none; border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:11px; color:var(--ink-3); cursor:pointer; }
.quota__cancel:hover{ color:var(--warn); border-color:var(--warn); }

/* ---------------------------------------------- ロゴは家に帰るリンク */
a.brand{ text-decoration:none; color:inherit; border-radius:8px; }
a.brand:hover .brand__name{ color:var(--hi-ink); }
.topbar__help.is-current{ border-color:var(--ink); color:var(--ink); }

/* 料金表: 「◯◯のすべてに加えて」は見出し。上のプランとの差だけを読ませる */
.plan__base{ list-style:none; margin:0 0 6px -18px; padding:4px 8px; font-weight:700; font-size:12px; color:var(--ink-2); background:var(--surface-2); border-radius:6px; }
.plan__base::before{ content:none; }

/* 作ったもの: ポイントを足す・チーム・操作中のアカウント */
.quota__buy{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--line); background:var(--surface); }
.quota__buylabel{ font-size:11.5px; color:var(--ink-3); margin-right:auto; }
.dash__acting{ margin:0 0 12px; padding:10px 14px; background:var(--hi-soft); color:var(--hi-ink); border-radius:8px; font-size:13px; }
.team{ margin:16px 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.team__head{ display:flex; align-items:baseline; gap:10px; margin:0; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.team__head b{ font-family:var(--font-ui); font-size:14px; }
.team__head span{ font-size:12px; color:var(--ink-2); }
.team__desc{ margin:0; padding:10px 16px 0; font-size:12px; color:var(--ink-3); line-height:1.8; }
.team__list{ list-style:none; margin:0; padding:8px 16px; }
.team__item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.team__item:last-child{ border-bottom:0; }
.team__rm{ background:none; border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:11px; color:var(--ink-3); cursor:pointer; }
.team__rm:hover{ color:var(--warn); border-color:var(--warn); }
.team__form{ display:flex; gap:8px; padding:8px 16px 14px; }
.team__form input{ flex:1; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; }

/* ------------------------------------ 公開の整理（プランを下げる・やめる前に） */
.tidy{ margin:16px 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.tidy.is-urgent{ border-color:var(--warn); }
.tidy__head{ display:flex; align-items:baseline; gap:10px; margin:0; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap; }
.tidy__head b{ font-family:var(--font-ui); font-size:14px; }
.tidy__head span{ font-size:12px; color:var(--ink-2); }
.tidy__note{ margin:0; padding:10px 16px 0; font-size:12.5px; color:var(--ink-2); line-height:1.8; }
.tidy.is-urgent .tidy__note{ color:var(--warn); font-weight:600; }
.tidy__list{ list-style:none; margin:0; padding:8px 16px 12px; }
.tidy__item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.tidy__item:last-child{ border-bottom:0; }
.tidy__item a{ color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tidy__done{ margin:0; padding:10px 16px 14px; font-size:13px; color:var(--ok); font-weight:600; }
.tidy__done a{ color:var(--hi-ink); margin-left:8px; }
.quota__leave{ background:none; border:0; padding:3px 6px; font-size:11px; color:var(--ink-3); cursor:pointer; text-decoration:underline; }
.quota__leave:hover{ color:var(--warn); }

/* スマホ: 上のバーは折り返し、ボタンは指で押せる幅に */
@media (max-width:560px){
  .topbar__inner{ flex-wrap:wrap; gap:8px 12px; }
  .topbar__nav{ flex-wrap:wrap; gap:6px; }
  .topbar__help{ padding:6px 10px; font-size:12px; }
  .account__meters{ flex-wrap:wrap; }
  .stage__url{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 60px); }
  .talk{ min-height:0; }
  .talk__form .btn{ flex:1; }
  .quota__buy{ flex-direction:column; align-items:stretch; }
  .quota__buy .btn{ width:100%; }
  .quota__buylabel{ margin:0 0 4px; }
  .team__form{ flex-direction:column; }
  .team__form .btn{ width:100%; }
  .quota__plan{ flex-wrap:wrap; }
  .quota__cancel, .quota__leave{ margin-left:0; }
  .plans__grid{ grid-template-columns:1fr; }
  .cost-hint--right{ text-align:left; }
}

/* 料金カード: 上げる（塗り）と下げる（線）を見た目でも分ける */
.plan .btn{ width:100%; }
.plan__btn--down{ background:transparent; color:var(--ink-2); border:1px solid var(--line); }
.plan__btn--down:hover{ border-color:var(--ink-3); color:var(--ink); }
.plan__hint{ margin:6px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.7; }

/* 料金カードの項目は折り返す（768pxで4枚並ぶと「（50pt）」が箱からはみ出した） */
.plan li{ overflow-wrap:anywhere; word-break:normal; white-space:normal; }
@media (min-width:561px) and (max-width:1000px){ .plans__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* 大きな見出しの強調は、明るい朱で（大きい文字は明るい色でも読める） */
.hero__title em{ color:var(--hi); }


/* ======================================================= 紙と刷り ===== */

/* 紙の地。ごく薄いざらつき（SVGノイズ）を重ねる */
body{
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .18  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero, .showcase, .topbar{ background-color:var(--surface); }

/* 見出しは明朝 */
.hero__title, .plans__title, .showcase__title, .plan__name, .brand__name{
  font-family:var(--font-display); font-weight:900; letter-spacing:.02em;
}
.hero__title{ font-size:clamp(26px,3.5vw,42px); }
.brand__name{ font-size:16px; }

/* 見出しの上の小さなラベルは、朱の枠で「刷り」の印に */
.eyebrow{
  padding:3px 10px; border:1px solid var(--hi); border-radius:var(--r-sm);
  color:var(--hi-ink); letter-spacing:.18em; background:var(--surface);
}

/* トンボ（断ち落としの目印）。四隅の外側に、細い十字の端だけを置く */
.hero__stage, .panel, .plan{ position:relative; }
.hero__stage::before, .panel::before, .plan::before{
  content:''; position:absolute; inset:-9px; pointer-events:none; z-index:0;
  --tm:var(--ink-3);
  background:
    linear-gradient(var(--tm),var(--tm)) left 0 top 9px / 6px 1px no-repeat,
    linear-gradient(var(--tm),var(--tm)) left 9px top 0 / 1px 6px no-repeat,
    linear-gradient(var(--tm),var(--tm)) right 0 top 9px / 6px 1px no-repeat,
    linear-gradient(var(--tm),var(--tm)) right 9px top 0 / 1px 6px no-repeat,
    linear-gradient(var(--tm),var(--tm)) left 0 bottom 9px / 6px 1px no-repeat,
    linear-gradient(var(--tm),var(--tm)) left 9px bottom 0 / 1px 6px no-repeat,
    linear-gradient(var(--tm),var(--tm)) right 0 bottom 9px / 6px 1px no-repeat,
    linear-gradient(var(--tm),var(--tm)) right 9px bottom 0 / 1px 6px no-repeat;
  opacity:.7;
}
.plan--current::before{ --tm:var(--hi); opacity:1; }

/* STEPの番号はハンコ。いま進めているところだけ朱で少し傾ける */
.steps__num{ border-radius:50%; width:23px; height:23px; }
.steps__item.is-active .steps__num{
  background:var(--surface); color:var(--hi-ink); border:1.5px solid var(--hi);
  box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 3px rgba(255,74,31,.35);
  transform:rotate(-8deg);
}

/* 紙の上の面は、影を浅く（紙が1枚置かれている程度） */
.panel, .plan{ box-shadow:0 1px 0 rgba(30,27,22,.04), 0 8px 20px -16px rgba(30,27,22,.35); }
.plan--paid{ border-color:var(--ink); }

/* 「◯◯のすべてに加えて」は見出し。チェックを付けず、左端をそろえる */
.plan li.plan__base{ margin:0 0 4px; padding:5px 10px; }
.plan li.plan__base::before{ content:none; display:none; }


/* ============================================================ スマホ ===== */

/* 指で触る端末かどうかで、言葉を出し分ける（「クリック」「ドロップ」「マウス」はスマホでは通じない） */
.only-touch{ display:none; }
@media (hover:none) and (pointer:coarse), (max-width:700px){
  .only-touch{ display:inline; }
  .only-pointer{ display:none; }
}

/* プレビュー: スマホ／PC 切り替え */
.result__previewhead{ flex-wrap:wrap; }
.devsw{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--surface); }
.devsw__btn{ border:0; background:transparent; border-radius:999px; padding:6px 14px; font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer; min-height:34px; }
.devsw__btn[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.preview-frame{ position:relative; overflow:hidden; border-radius:var(--r); }
.preview-frame iframe{ transform-origin:0 0; }
.result__preview .preview-frame iframe{ box-shadow:none; }
.preview-frame.is-sp{ background:var(--surface-2); padding:16px 0; border:1px solid var(--line); }
.preview-frame.is-sp iframe{ margin:0 auto; border-radius:18px; border:6px solid var(--ink); box-sizing:border-box; }
.preview-frame.is-pc iframe{ margin:0; }

/* HTMLは畳む */
.result__code{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.result__code-sum{ cursor:pointer; padding:12px 14px; font-size:13px; color:var(--ink-2); list-style:none; }
.result__code-sum::-webkit-details-marker{ display:none; }
.result__code-sum::before{ content:'＋'; margin-right:8px; color:var(--ink-3); }
.result__code[open] .result__code-sum::before{ content:'－'; }
.result__code[open] > :not(summary){ margin:0 14px 14px; }

/* 作ったもの: 決まりは畳む・解約と退会はいちばん下 */
.rules{ margin:0 0 16px; font-size:13px; color:var(--ink-2); }
.rules summary{ cursor:pointer; color:var(--hi-ink); font-weight:600; }
.rules ul{ margin:8px 0 0; padding-left:1.2em; line-height:1.9; }
.acctzone{ margin-top:36px; padding-top:20px; border-top:1px dashed var(--line); }
.acctzone__title{ margin:0 0 12px; font-size:14px; color:var(--ink-2); font-family:var(--font-ui); }
.acctzone__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 0; }
.acctzone__note{ margin:0; font-size:12px; color:var(--ink-3); flex:1 1 220px; }
.acctzone__danger{ color:var(--warn); border-color:var(--warn); }

/* 画面下のタブ（スマホだけ） */
.tabbar{ display:none; }

@media (max-width:700px){
  /* ヘッダーは1行。移動は下のタブで */
  .topbar__inner{ flex-wrap:nowrap; padding:10px 14px; }
  .topbar__nav .topbar__help{ display:none; }
  .account__meters .meter:not(:first-child){ display:none; }
  .account__plan{ display:none; }
  .account__logout{ padding:6px 10px; font-size:11.5px; }

  .tabbar{
    display:grid; grid-template-columns:repeat(3,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar__item{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height:50px; font-size:11px; color:var(--ink-2); text-decoration:none; border-radius:10px;
  }
  .tabbar__icon{ font-size:17px; line-height:1; }
  .tabbar__item.is-current{ color:var(--hi-ink); font-weight:700; }
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)); }

  /* 作業中はタブを隠して、その画面の「次の一手」を下に固定する */
  body.is-working .tabbar{ display:none; }
  body.is-working{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  body.is-working .plans, body.is-working .showcase{ display:none; }
  .panel__actions--sticky{
    position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line);
    display:flex; gap:10px;
  }
  .panel__actions--sticky .btn{ min-height:48px; }
  .panel__actions--sticky #restart-btn{ flex:0 0 auto; }
  .panel__actions--sticky #to-publish-btn{ flex:1 1 auto; }
  #panel-3:not([hidden]) ~ * .panel__actions--sticky{ display:flex; }

  /* 指で押せる大きさ */
  .btn{ min-height:44px; }
  .btn--small{ min-height:40px; padding-left:14px; padding-right:14px; }
  .switch{ min-height:44px; }

  /* STEP表示は、いまの段の名前だけ */
  .steps__item:not(.is-active) .steps__name{ display:none; }
  .steps__item .tag-paid{ display:none; }

  /* プレビューは大きく */
  .result__previewhead{ gap:10px; }
  .editbar{ width:100%; justify-content:space-between; }
  .editbar__note{ display:none; }

  /* 料金カードは横スワイプ */
  .plans__grid{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    margin:0 -18px; padding:14px 18px 18px; -webkit-overflow-scrolling:touch;
  }
  .plans__grid .plan{ flex:0 0 84%; scroll-snap-align:center; }
  .plans__head::after{ content:'← 横にスワイプして比べられます →'; display:block; margin-top:10px; font-size:11.5px; color:var(--ink-3); }
  .plans__note{ font-size:12.5px; text-align:left; }

  /* 作ったもの: カード */
  .proj__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
  .proj__meta{ flex-wrap:wrap; gap:4px 10px; }
  .proj__meta > *{ white-space:nowrap; }
  .proj__side{ gap:10px; }
  .proj__side .btn, .proj__del{ min-height:40px; }
  .dash__new .btn{ width:100%; }
  .quota__buy .btn{ min-height:44px; }
}

@media (max-width:700px){
  /* ヘッダーに残りポイントだけは出す（いくら使えるかは、どの画面でも見えていてほしい） */
  .account__meters{ display:flex !important; }
  .account__meters .meter:not(:first-child){ display:none; }
  /* 作ったもの: 「編集する」「消す」を指で押せる大きさに */
  .proj__edit, .proj__del{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; font-size:13px; }
  .proj__edit{ flex:1 1 auto; }
  /* ポイント購入の2つ目以降も、ボタンに見えるように枠を付ける */
  .quota__buy .btn--ghost{ border-color:var(--line); background:var(--surface); color:var(--ink); }
}

/* 入場アニメが終わったあとに transform を残さない。
   残ると、中の position:fixed（スマホの「公開する」バー）がパネル基準になって、画面の下に固定されなかった */
.panel{ animation-fill-mode:backwards; }


/* ======================================= スマホ（2回目: 360pxで崩れたところ） ===== */
.picker__stage{ display:none; }
.devsw__btn{ min-height:40px; }
.gate__close{ width:44px; height:44px; top:6px; right:6px; }
.dash__new .btn{ text-decoration:none; }
.account__logout, .account__login, .proj__del, .proj__edit, .meter, .tabbar__item{ white-space:nowrap; }

@media (max-width:700px){
  /* 作例: 2列。押したチラシの行の真下に、ページの枠を差し込む（app.js placeStage） */
  .picker{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .picker__stage{ display:block; grid-column:1 / -1; }
  .picker__stage .stage{ margin:2px 0 8px; animation:fadeUp 320ms ease-out both; }
  .picker__stage .stage__view{ height:62vh; max-height:520px; }
  .pick__kind, .pick__name{ word-break:keep-all; overflow-wrap:anywhere; }
  .pick.is-on{ box-shadow:0 0 0 2px var(--hi); border-color:var(--hi); }

  /* 「40pt 使います」は入力欄の中、ボタンの真下に */
  #generate-cost{ text-align:center; margin:10px 0 0; padding:0 12px 12px; }

  /* ヘッダー: ロゴ・残りポイント・ログアウトが1行に収まるように */
  .brand__name{ font-size:14px; }
  .account__in{ gap:6px; }
  .meter{ padding:3px 8px; }

  /* 作ったもの: 公開の切り替えを1段目、「編集する」「消す」を2段目に並べる */
  .proj__side{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:center; }
  .proj__side .switch{ grid-column:1 / -1; }
  .proj__edit, .proj__del{ width:100%; }
}
@media (max-width:380px){
  .brand__mark{ display:none; }
  .topbar__inner{ padding:8px 10px; gap:8px; }
}

@media (max-width:700px){ .account__logout, .account__login{ min-height:40px; } }


/* ============================================================ ヘッダー（整理） ===== */
/* 左: ロゴ／まんなか: このページの案内（文字のリンク）／右: 作ったもの＋アカウント */
.topbar__inner{ gap:12px; }
.topnav{ display:flex; align-items:center; gap:22px; margin:0 auto 0 28px; }
.topnav__link{ font-size:13px; color:var(--ink-2); text-decoration:none; padding:8px 0; border-bottom:2px solid transparent; }
.topnav__link:hover{ color:var(--ink); border-bottom-color:var(--hi); }
.account{ position:relative; gap:8px; }
.hdr__btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 14px;
  font:inherit; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.hdr__btn:hover{ border-color:var(--ink-3); }
.hdr__btn--primary{ background:var(--ink); border-color:var(--ink); color:#fff; }
.hdr__btn--primary:hover{ background:#2E2A24; border-color:#2E2A24; }
.acct__chip{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:3px 12px 3px 3px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); cursor:pointer; font:inherit;
}
.acct__chip:hover, .acct__chip[aria-expanded="true"]{ border-color:var(--ink-3); }
.acct__avatar{ width:30px; height:30px; border-radius:50%; background:var(--hi); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; }
.acct__pt{ font-family:var(--font-ui); font-weight:900; font-size:14px; color:var(--ink); }
.acct__pt small{ font-size:11px; font-weight:700; color:var(--ink-3); margin-left:1px; }
.acct__chip.is-low .acct__pt{ color:var(--warn); }
.acct__menu{
  position:absolute; right:0; top:calc(100% + 8px); width:300px; z-index:70;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px;
  box-shadow:0 18px 40px -18px rgba(30,27,22,.45);
}
.acct__head{ display:flex; flex-direction:column; gap:2px; padding:8px 10px 10px; border-bottom:1px solid var(--line-2); }
.acct__head b{ font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct__head span{ font-size:12px; color:var(--ink-2); }
.acct__stats{ display:grid; gap:2px; padding:8px 0; border-bottom:1px solid var(--line-2); }
.acct__stat{ display:grid; grid-template-columns:1fr auto; align-items:baseline; padding:6px 10px; }
.acct__label{ font-size:12px; color:var(--ink-2); }
.acct__stat b{ font-family:var(--font-ui); font-size:18px; font-weight:900; }
.acct__stat b small{ font-size:11px; color:var(--ink-3); font-weight:700; }
.acct__sub{ grid-column:1 / -1; font-size:11px; color:var(--ink-3); line-height:1.6; }
.acct__item{
  display:flex; align-items:center; width:100%; min-height:42px; padding:0 10px; border:0; border-radius:6px;
  background:none; font:inherit; font-size:13.5px; color:var(--ink); text-decoration:none; text-align:left; cursor:pointer;
}
.acct__item:hover{ background:var(--surface-2); }
.acct__item--quiet{ color:var(--ink-3); border-top:1px solid var(--line-2); border-radius:0; margin-top:4px; }

@media (max-width:700px){
  .topnav{ display:none; }
  .account .hdr__go{ display:none; }          /* 「作ったもの」は画面下のタブにある */
  .account .hdr__btn{ min-height:40px; padding:0 12px; }
  .acct__chip{ min-height:40px; }
  .acct__menu{ position:fixed; left:10px; right:10px; top:58px; width:auto; }
}
@media (max-width:380px){
  .account .hdr__btn--ghost{ padding:0 10px; }
}

/* ============================================================ 料金プラン（見せ方） ===== */
.plans__title{ font-size:clamp(22px,3vw,30px); }
.flow3{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:760px; margin:22px auto 0; padding:0; counter-reset:f; }
.flow3__item{ position:relative; display:grid; justify-items:center; gap:2px; padding:14px 10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); text-align:center; }
.flow3__item + .flow3__item::before{ content:'→'; position:absolute; left:-10px; top:50%; transform:translate(-50%,-50%); color:var(--ink-3); font-size:14px; }
.flow3__icon{ width:36px; height:36px; color:var(--hi); }
.flow3__icon svg{ width:100%; height:100%; }
.flow3__item b{ font-size:13px; }
.flow3__item span:last-child{ font-size:11.5px; color:var(--ink-3); }

.plans__grid{ margin-top:28px; }
.plan{ display:flex; flex-direction:column; }
.plan > .btn{ margin-top:auto; }
.plan__ribbon{ position:absolute; top:-11px; left:18px; z-index:1; background:var(--hi); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.plan--pick{ border-color:var(--hi); box-shadow:0 0 0 1px var(--hi), 0 12px 30px -18px rgba(255,74,31,.45); }
.plan__name{ margin:4px 0 2px; font-family:var(--font-display); font-size:19px; }
.plan__price{ margin:0; font-family:var(--font-ui); font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1.2; }
.plan__price small{ font-size:13px; font-weight:700; color:var(--ink-2); margin-left:3px; }
.plan__lead{ min-height:3.4em; }
.plan__viz{ display:grid; gap:10px; margin:4px 0 16px; padding:12px; background:var(--surface-2); border-radius:var(--r); }
.viz{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px 8px; }
.viz__label{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ink-2); }
.viz__value{ font-family:var(--font-ui); font-size:20px; font-weight:900; }
.viz__value small{ font-size:11px; font-weight:700; color:var(--ink-3); margin-left:1px; }
.viz__icons{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:3px; color:var(--hi); align-items:center; min-height:18px; }
.viz__icon{ display:inline-block; width:14px; height:17px; }
.viz__icon svg{ width:100%; height:100%; display:block; }
.viz__more{ font-size:11px; font-weight:700; color:var(--hi-ink); margin-left:2px; }
.viz__sub{ grid-column:1 / -1; font-size:11px; color:var(--ink-3); }

/* 「?」: 押すと説明が開く（指でも押せる大きさ） */
.q{ position:relative; display:inline-block; vertical-align:middle; }
.q__btn{ list-style:none; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--ink-3); color:var(--ink-2); font-size:11px; font-weight:700; cursor:pointer; background:var(--surface); position:relative; }
.q__btn::after{ content:''; position:absolute; inset:-11px; }          /* 押せる範囲を広げる */
.q__btn::-webkit-details-marker{ display:none; }
.q[open] .q__btn{ background:var(--ink); color:#fff; border-color:var(--ink); }
.q__pop{
  position:absolute; z-index:30; left:50%; top:calc(100% + 8px); transform:translateX(-50%); width:240px; margin:0;
  padding:10px 12px; background:var(--ink); color:#fff; border-radius:6px; font-size:12px; line-height:1.7; font-weight:400; text-align:left;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.4);
}
.plan li .q{ margin-left:4px; }

/* ポイントでできること */
.ptuse{ max-width:1060px; margin:34px auto 0; }
.ptuse__title{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 14px; font-family:var(--font-display); font-size:18px; }
.ptuse__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.ptuse__tile{ display:grid; justify-items:center; gap:2px; padding:14px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); text-align:center; }
.ptuse__tile.is-free{ border-style:dashed; }
.ptuse__icon{ width:26px; height:26px; color:var(--hi); }
.ptuse__icon svg{ width:100%; height:100%; }
.ptuse__label{ font-size:12.5px; font-weight:700; }
.ptuse__pt{ font-family:var(--font-ui); font-size:22px; font-weight:900; }
.ptuse__pt small{ font-size:11px; color:var(--ink-3); margin-left:1px; }
.ptuse__note{ font-size:11px; color:var(--ink-3); line-height:1.6; }
.ptuse__example{ margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--ink-2); }
.faq{ max-width:720px; margin:26px auto 0; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ list-style:none; cursor:pointer; padding:14px 30px 14px 4px; font-size:13.5px; font-weight:600; position:relative; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{ content:'＋'; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--ink-3); }
.faq__item[open] .faq__q::after{ content:'－'; }
.faq__a{ margin:0 0 14px; padding:0 4px; font-size:13px; color:var(--ink-2); line-height:1.9; }

@media (max-width:700px){
  .flow3{ grid-template-columns:1fr; gap:8px; }
  .flow3__item{ grid-template-columns:36px 1fr; justify-items:start; text-align:left; column-gap:12px; }
  .flow3__item .flow3__icon{ grid-row:1 / span 2; }
  .flow3__item + .flow3__item::before{ content:'↓'; left:50%; top:-8px; }
  .plans__head::after{ margin-top:18px; }
  .plans__grid .plan{ flex:0 0 86%; }
  .plan__lead{ min-height:0; }
  .ptuse__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ptuse__tile:last-child{ grid-column:1 / -1; }
  .q__pop{ position:fixed; left:16px; right:16px; top:auto; bottom:90px; width:auto; transform:none; font-size:13px; }
}

/* 作ったもの: 公開中の一覧は、名前を上・ボタンを下に（「公開をやめる」が3行に折れていた） */
.tidy__item .btn{ white-space:nowrap; }
@media (max-width:700px){
  .tidy__item{ flex-direction:column; align-items:stretch; gap:8px; }
  .tidy__item .btn{ width:100%; }
}

/* 作るAI（標準／高品質＝Opus） */
.modelsw{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 18px; border-top:1px solid var(--line-2); }
.modelsw__label{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
.modelsw__opts{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--surface); }
.modelsw__btn{ display:inline-flex; align-items:center; gap:6px; min-height:36px; border:0; background:transparent; border-radius:999px; padding:0 14px; font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.modelsw__btn[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.modelsw__btn[aria-pressed="true"] .tag-pro{ background:var(--hi); color:#fff; border-color:var(--hi); }
.modelsw__desc{ flex:1 1 100%; margin:0; font-size:11.5px; color:var(--ink-3); }
@media (max-width:700px){
  .modelsw{ padding:12px 14px; }
  .modelsw__opts{ width:100%; }
  .modelsw__btn{ flex:1 1 50%; justify-content:center; min-height:40px; padding:0 8px; }
}

/* 素材の権利の一言（入力欄の中、控えめに） */
.rights-note{ margin:0; padding:8px 18px 0; font-size:11.5px; color:var(--ink-3); line-height:1.7; }
.rights-note a{ color:var(--ink-2); margin-left:6px; }
@media (max-width:700px){ .rights-note{ padding:8px 14px 0; } }


/* ======================================= 入れた素材のプレビュー ===== */
/* 何を入れたのかが分かり、1枚ずつ外せるようにする（2026-09-17） */
.thumbs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; margin:14px 0 0; padding:0; }
.thumb{
  position:relative; width:84px; animation:fadeUp 300ms ease-out both;
}
.thumb img{
  display:block; width:84px; height:84px; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
}
.thumb__name{
  display:block; margin-top:4px; font-size:10.5px; color:var(--ink-3); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
}
.thumb__del{
  position:absolute; top:-7px; right:-7px; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 1px 4px rgba(30,27,22,.2);
}
.thumb__del:hover{ background:var(--warn); border-color:var(--warn); color:#fff; }
.dropzone__count{ margin:8px 0 0; font-size:11.5px; color:var(--ink-3); text-align:center; }
.dropzone__count.is-full{ color:var(--hi-ink); font-weight:700; }

@media (max-width:700px){
  .thumb, .thumb img{ width:72px; }
  .thumb img{ height:72px; }
  .thumb__del{ width:28px; height:28px; }
}


/* ===================================================== 運営用の画面 (admin.html) */
/* 代表だけが見るところ。数字が主役なので、飾りは最小限にする */

.adm__loading{ padding:40px 0; text-align:center; color:var(--ink-3); }
.adm__h3{ margin:26px 0 10px; font-family:var(--font-ui); font-size:13px; color:var(--ink-2); }
.adm__note{ margin:12px 0 0; font-size:12px; line-height:1.85; color:var(--ink-3); }
.adm__note--ok{ color:#1d6b3a; font-weight:600; }
.adm__note--warn{ color:var(--warn); font-weight:600; }
.adm__details{ margin-top:18px; }
.adm__details > summary{ cursor:pointer; font-size:12.5px; color:var(--ink-2); }

/* 大きい数字のカード */
.adm__big{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-top:6px; }
.admcard{
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2);
}
.admcard--ok{ border-color:#bfe3cc; background:#f2fbf5; }
.admcard--warn{ border-color:var(--warn); background:var(--warn-soft); }
.admcard__label{ margin:0; font-size:11.5px; color:var(--ink-3); }
.admcard__value{
  margin:4px 0 0; font-family:var(--font-ui); font-weight:700; font-size:24px;
  line-height:1.3; color:var(--ink); letter-spacing:.01em;
}
.admcard--warn .admcard__value{ color:var(--warn); }
.admcard__sub{ margin:4px 0 0; font-size:11px; line-height:1.7; color:var(--ink-3); }

/* 表。横に長いので、枠の中だけで横スクロールさせる */
.adm__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.adm__table{ width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap; }
.adm__table th, .adm__table td{
  padding:8px 10px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:middle;
}
.adm__table th{
  position:sticky; top:0; background:var(--surface); font-weight:700;
  font-size:11.5px; color:var(--ink-3); border-bottom:1px solid var(--line);
}
.adm__table .is-right{ text-align:right; font-variant-numeric:tabular-nums; }
.adm__table tbody tr:hover{ background:var(--surface-2); }
.adm__table .is-warn{ color:var(--warn); }
.adm__empty{ padding:22px 10px; color:var(--ink-3); text-align:center; }
.adm__table--users td{ white-space:nowrap; }

/* 月ごとの棒グラフ。ライブラリは足さない（依存を増やさない方針） */
.adm__bars{ display:flex; align-items:flex-end; gap:12px; padding:10px 0 0; flex-wrap:wrap; }
.admbar{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:56px; }
.admbar__stack{
  display:flex; flex-direction:column; justify-content:flex-end;
  width:34px; height:110px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.admbar__seg{ display:block; width:100%; }
.admbar__seg--claude{ background:var(--hi); }
.admbar__seg--openai{ background:#7FA6C9; }
.admbar__yen{ font-size:11px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.admbar__month{ font-size:10.5px; color:var(--ink-3); }
.adm__legend{ margin:0 0 0 6px; align-self:flex-end; font-size:11px; color:var(--ink-3); }
.admdot{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; vertical-align:baseline; }
.admdot--claude{ background:var(--hi); }
.admdot--openai{ background:#7FA6C9; }

/* プランの数 */
.adm__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; }
.admchip{
  display:inline-flex; align-items:baseline; gap:2px; padding:5px 11px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface-2); font-size:12px;
}
.admchip--free{ color:var(--ink-3); }
.admchip--total{ background:var(--ink); color:#fff; border-color:var(--ink); }
.admchip small{ color:var(--ink-3); font-size:10.5px; }
.admchip--total small{ color:rgba(255,255,255,.7); }

.admplan{ font-weight:700; }
.admplan--free{ color:var(--ink-3); font-weight:400; }
.admplan small{ color:var(--ink-3); font-weight:400; font-size:10.5px; }

.admacts{ display:flex; gap:5px; }
.admacts .btn{ padding:4px 9px; font-size:11px; }
.btn.is-danger{ border-color:var(--warn); color:var(--warn); }
.btn.btn--primary.is-danger{ background:var(--warn); border-color:var(--warn); color:#fff; }

.admselect, .adminput{
  width:100%; box-sizing:border-box; padding:9px 11px; font:inherit; font-size:13px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}

@media (max-width:700px){
  .admcard__value{ font-size:20px; }
  .adm__table{ font-size:11.5px; }
  .adm__table th, .adm__table td{ padding:7px 8px; }
}