/* aiapptube 一般画面の共通デザイン変数(文書#129 §4・§5.1)。
 *
 * 適用範囲: <html data-ui="public"> が付いた画面だけ。
 *   管理・アプリ棚・分析(社内向け)は data-ui="internal" になり、ここの規則は当たらない。
 * テーマ: <html data-theme="playful|editorial|arcade">。既定は playful(A案)。
 *   部屋(グループ)ごとの上書きは <html style="--primary:#…"> で当てる(src/theme.js が検証した値だけ)。
 * 変数名はA案の名前に揃えてある。B/Cで元案に無い変数は意味の近い色を割り当ててある。
 * 外部フォント・外部UIライブラリは読み込まない。
 */

:root[data-ui="public"] {
  /* 書体(端末にあるものだけを使う。Webフォントは配信しない) */
  --font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --font-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ko: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font: var(--font-ja);

  /* 余白スケール 4/8/12/16/24/32/48/64/96 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* 幅(LP1120 / SPA1040 / 本文・フォーム680 / 認証480) */
  --w-lp:1120px; --w-app:1040px; --w-read:680px; --w-auth:480px;
  --gutter:16px;

  /* 操作の最小寸法 */
  --tap:44px; --ctl-h:48px; --ctl-h-lg:52px;

  /* A案(Playful Studio)= 既定 */
  --bg:#F7F8FC; --surface:#FFFFFF; --ink:#202238; --muted:#585D75;
  --primary:#5846D6; --primary-ink:#FFFFFF; --primary-hover:#4431BA; --primary-soft:#EEEBFF;
  --accent-lime:#DAF77C; --accent-peach:#FFE4D7;
  --border:#DADCE8; --control-border:#827F98;
  --success:#15704A; --danger:#B4233D; --warning:#805400; --focus:#5846D6;
  --r-ctl:12px; --r-card:20px; --r-hero:28px;
  --shadow-hero:0 12px 32px rgba(32,34,56,.10);
  --shadow-hover:0 6px 18px rgba(32,34,56,.08);
  --motion:160ms;
}

/* B. Editorial Pop */
:root[data-ui="public"][data-theme="editorial"] {
  --bg:#FFF8ED; --surface:#FFFFFF; --ink:#202A3B; --muted:#5F6070;
  --primary:#A83A32; --primary-ink:#FFFFFF; --primary-hover:#832A25; --primary-soft:#FFE8DE;
  --accent-lime:#F6CE5B; --accent-peach:#FFE8DE;
  --border:#E3D9CE; --control-border:#84766A;
  --success:#21664A; --danger:#B4233D; --warning:#805400; --focus:#A83A32;
  --r-ctl:8px; --r-card:12px; --r-hero:16px;
  --shadow-hero:4px 4px 0 rgba(32,42,59,.12);
  --shadow-hover:none;
  --motion:150ms;
}

/* C. Night Arcade */
:root[data-ui="public"][data-theme="arcade"] {
  --bg:#101424; --surface:#1B2238; --ink:#F5F6FF; --muted:#BAC2D9;
  --primary:#A9F0EA; --primary-ink:#101424; --primary-hover:#C9FFF8; --primary-soft:#263D4A;
  --accent-lime:#CAB8FF; --accent-peach:#263D4A;
  --border:#38435F; --control-border:#8290B0;
  --success:#A6E8C0; --danger:#FFB4C1; --warning:#F3C77A; --focus:#CAB8FF;
  --r-ctl:12px; --r-card:20px; --r-hero:24px;
  --shadow-hero:0 16px 40px rgba(0,0,0,.24);
  --shadow-hover:none;
  --motion:180ms;
}

/* ---- 基礎規則(一般画面のみ) ---- */
[data-ui="public"] * { box-sizing:border-box; }

[data-ui="public"] body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  /* iOSの自動拡大で本文だけ大きくならないように */
  -webkit-text-size-adjust:100%;
  /* 外枠は画面のくぼみを避ける */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
[data-ui="public"]:lang(ja) body { --font:var(--font-ja); word-break:normal; line-break:strict; }
[data-ui="public"]:lang(en) body { --font:var(--font-en); line-height:1.65; word-break:normal; }
[data-ui="public"]:lang(ko) body { --font:var(--font-ko); word-break:keep-all; overflow-wrap:anywhere; }

[data-ui="public"] h1, [data-ui="public"] h2, [data-ui="public"] h3 { font-weight:700; }
[data-ui="public"] code, [data-ui="public"] .url { overflow-wrap:anywhere; }

/* 文字の縮小・行数固定をしない。grid/flexの子がはみ出さないように */
[data-ui="public"] main > *, [data-ui="public"] .grid > * { min-width:0; }

/* 操作は44px以上、入力は16px(iOSの自動ズーム回避) */
[data-ui="public"] a.btn,
[data-ui="public"] button,
[data-ui="public"] [role="button"],
[data-ui="public"] summary {
  min-height:var(--tap);
  font-family:inherit;
  font-size:15px;
}
[data-ui="public"] input,
[data-ui="public"] select,
[data-ui="public"] textarea {
  font-size:16px;
  line-height:1.5;
  font-family:inherit;
  min-height:var(--ctl-h);
  border:1px solid var(--control-border);
  border-radius:var(--r-ctl);
  background:var(--surface);
  color:var(--ink);
  padding:10px 12px;
}
[data-ui="public"] textarea { min-height:200px; resize:vertical; }
[data-ui="public"] input[type="checkbox"],
[data-ui="public"] input[type="radio"] { width:20px; height:20px; min-height:20px; accent-color:var(--primary); }
[data-ui="public"] label:has(> input[type="checkbox"]),
[data-ui="public"] label:has(> input[type="radio"]) { min-height:var(--tap); display:flex; align-items:center; gap:var(--sp-2); }

/* 触れる場所どうしは8px以上あける */
[data-ui="public"] .cta, [data-ui="public"] .row-actions { gap:var(--sp-2); }

/* リンクは色以外の手掛かり(下線)を残す */
[data-ui="public"] a { color:var(--primary); }
[data-ui="public"] p a, [data-ui="public"] li a { text-decoration:underline; }
[data-ui="public"] a.btn, [data-ui="public"] a.logo { text-decoration:none; }

/* focusは3px・offset3px。背景と紛れる場所は白2px＋テーマ色3pxの二重リング */
[data-ui="public"] :focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px;
}
[data-ui="public"] .on-primary :focus-visible,
[data-ui="public"] .final :focus-visible {
  outline:3px solid var(--surface);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--focus);
}

/* 画面下のくぼみ(ホームバー)を避ける */
[data-ui="public"] footer { padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom)); }

/* 数字は桁を揃える */
[data-ui="public"] .num-val { font-variant-numeric:tabular-nums; }

@media (max-width:599px) { :root[data-ui="public"] { --gutter:16px; } }
@media (min-width:600px) and (max-width:1023px) { :root[data-ui="public"] { --gutter:24px; } }
@media (min-width:1024px) { :root[data-ui="public"] { --gutter:32px; } }

/* 動きを減らす設定では移動・拡縮・入場アニメを止める */
@media (prefers-reduced-motion:reduce) {
  [data-ui="public"] * ,
  [data-ui="public"] *::before,
  [data-ui="public"] *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  [data-ui="public"] { scroll-behavior:auto !important; }
  html:has([data-ui="public"]) { scroll-behavior:auto !important; }
}

/* ---- フォーム操作部品(文書#129 §3.1 M2・§3.2 F1/F2/F8・§5.10・§5.11・§5.16) ----
   label と input の for/id や aria-describedby は HTML 側で結ぶ。
   ここで決めるのは寸法(入力16px・高さ48px・操作44px)とテーマ変数だけ。 */
[data-ui="public"] .fm { max-width:var(--w-read); }
[data-ui="public"] .field { margin:0 0 var(--sp-4); }
[data-ui="public"] .field > label {
  display:block; margin:0 0 var(--sp-1);
  font-size:15px; font-weight:600; color:var(--ink);
}
[data-ui="public"] .field input,
[data-ui="public"] .field select,
[data-ui="public"] .field textarea { width:100%; }
[data-ui="public"] .hint { font-size:14px; line-height:1.6; color:var(--muted); margin:var(--sp-1) 0 0; }

/* 状態文字はテーマ変数で 4.5:1 以上を満たす色を使う(F8) */
[data-ui="public"] .msg { font-size:15px; margin-top:var(--sp-2); }
[data-ui="public"] .msg:empty { margin-top:0; }
[data-ui="public"] .msg.ok { color:var(--success); }
[data-ui="public"] .msg.err { color:var(--danger); }
[data-ui="public"] [aria-invalid="true"] { border-color:var(--danger); border-width:2px; }

/* パスワードの表示切替(§5.16)。ボタンは44×44px以上 */
[data-ui="public"] .pw { display:flex; gap:var(--sp-2); align-items:stretch; flex-wrap:wrap; }
[data-ui="public"] .pw > input { flex:1 1 200px; width:auto; min-width:0; }
[data-ui="public"] .pw-toggle {
  flex:0 0 auto; min-width:var(--tap); min-height:var(--ctl-h);
  padding:0 var(--sp-3); font-size:15px; font-family:inherit; white-space:nowrap; cursor:pointer;
  background:var(--surface); color:var(--primary);
  border:1px solid var(--control-border); border-radius:var(--r-ctl);
}

/* 同意チェック(§5.10)。label を包みにせず for で結ぶので、label 側で44pxを確保する */
[data-ui="public"] .chk { display:flex; gap:var(--sp-2); align-items:flex-start; margin:var(--sp-3) 0; }
[data-ui="public"] .chk > label {
  display:block; min-height:var(--tap);
  padding-block:12px; font-size:15px; line-height:1.6; color:var(--ink);
}
/* チェックの見た目は20pxのまま、押せる範囲だけを44pxに広げる(§3.2 F2) */
[data-ui="public"] .chk > input[type="checkbox"] {
  appearance:none; -webkit-appearance:none;
  position:relative; display:inline-block; flex:0 0 auto;
  width:var(--tap); height:var(--tap); min-width:var(--tap); min-height:var(--tap);
  margin:0; padding:0; border:0; background:none; cursor:pointer;
}
[data-ui="public"] .chk > input[type="checkbox"]::before {
  content:""; position:absolute; left:50%; top:50%; box-sizing:border-box;
  width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2px solid var(--control-border); border-radius:6px; background:var(--surface);
}
[data-ui="public"] .chk > input[type="checkbox"]:checked::before {
  background:var(--primary); border-color:var(--primary);
}
[data-ui="public"] .chk > input[type="checkbox"]:checked::after {
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:5px; margin:-5px 0 0 -5px;
  border-left:2px solid var(--primary-ink); border-bottom:2px solid var(--primary-ink);
  transform:rotate(-45deg);
}

/* 文中リンクも触れる高さにする(§3.2 F2) */
[data-ui="public"] a.taplink,
[data-ui="public"] footer a {
  display:inline-flex; align-items:center; flex:0 0 auto;
  min-height:var(--tap); padding-block:10px;
}
[data-ui="public"] a.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:12px var(--sp-4);
  font-size:15px; text-decoration:none;
  background:var(--surface); color:var(--primary);
  border:1px solid var(--primary); border-radius:var(--r-ctl);
}

/* 文中のリンクは行送りを変えずに押せる高さだけを確保する(§3.2 F2) */
[data-ui="public"] .chk label a { padding-block:13px; }
/* 短い言語(韓国語の「홈」など)でも幅44pxを割らない(§3.2 F2) */
[data-ui="public"] nav button { min-width:var(--tap); }

/* ---- SPA共通ナビ(文書#129 5.9) ----
   PCはロゴ・依頼する・依頼一覧・カタログ・マイページ・言語・アカウントを1行。
   スマホはロゴ/言語/アカウントの1行と、2x2のナビ(各48px以上・英語は2行可)。
   横スクロールも下固定ナビも作らない。色・角丸はテーマ変数だけを使う。
   社内向け(#nav_internal: 分析・アプリ棚・管理)はここで触らない(見た目・表示条件はそのまま)。 */
[data-ui="public"] header {
  display:grid; align-items:center;
  grid-template-columns:auto 1fr;
  grid-template-areas:"brand util" "nav nav" "int int";
  gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-2) var(--gutter);
  background:var(--surface); border-bottom:1px solid var(--border);
}
[data-ui="public"] header .brand { grid-area:brand; }
[data-ui="public"] header .hdr-util { grid-area:util; justify-self:end; }
[data-ui="public"] header #nav { grid-area:nav; }
[data-ui="public"] header #nav_internal { grid-area:int; }
[data-ui="public"] .brand {
  min-height:var(--tap); font-size:18px; font-weight:700;
  color:var(--ink); background:none; border:0; padding:0;
}
[data-ui="public"] .brand span { color:var(--primary); }
[data-ui="public"] .hdr-util { display:flex; align-items:center; gap:var(--sp-3); }
[data-ui="public"] .hdr-util select {
  width:auto; min-height:var(--tap); font-size:16px; padding:0 var(--sp-2);
}
[data-ui="public"] #who {
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  font-size:14px; color:var(--muted);
}
/* 2x2(項目が減っても列は2つのまま。横スクロールは作らない) */
[data-ui="public"] #nav { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
[data-ui="public"] #nav button {
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:var(--ctl-h); padding:var(--sp-2) var(--sp-3);
  font-size:15px; line-height:1.25; white-space:normal; text-align:center;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-ctl);
}
/* 現在位置(aria-current)。文字色と背景はテーマ変数の組で4.5:1を満たす */
[data-ui="public"] #nav button[aria-current="page"] {
  color:var(--primary); background:var(--primary-soft);
  border-color:var(--primary); font-weight:700;
}
[data-ui="public"] .brand[aria-current="page"] { text-decoration:underline; text-underline-offset:4px; }

/* 画面の見出し。遷移後にここへフォーカスする(tabindex=-1) */
[data-ui="public"] h1.scr-h { font-size:24px; line-height:1.35; margin:0 0 var(--sp-3); }
[data-ui="public"] h1.scr-h:focus { outline:none; }
[data-ui="public"] h1.scr-h:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
/* 戻ったときに焦点を戻す一覧の項目。見た目は変えない */
[data-ui="public"] .item:focus { outline:none; }
[data-ui="public"] .item:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

/* 目には出さないが読み上げには残す(隠したラベル) */
[data-ui="public"] .vh {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (min-width:768px) {
  [data-ui="public"] header {
    grid-template-columns:auto auto auto 1fr;
    grid-template-areas:"brand nav int util";
    gap:var(--sp-4);
  }
  [data-ui="public"] #nav { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
  [data-ui="public"] #nav button { width:auto; min-height:var(--tap); }
}


/* ---- ログイン・登録の1枚カード(文書#129 5.10 / 3.2 F5) ----
   /login はログインだけ、/signup は登録だけ。カードは --w-auth(480px)を超えて広げない。
   色・角丸・影はテーマ変数だけを使う。 */
[data-ui="public"] .card.auth {
  max-width:var(--w-auth);
  margin-left:auto; margin-right:auto;
  box-shadow:var(--shadow-hover);
}
[data-ui="public"] .card.auth .fm { max-width:none; }
[data-ui="public"] .card.auth h1 { font-size:24px; margin:0 0 var(--sp-4); }
[data-ui="public"] .card.auth h2 { font-size:18px; margin:var(--sp-5) 0 var(--sp-2); }
[data-ui="public"] .card.auth ol { margin:0; padding-left:1.4em; font-size:15px; line-height:1.9; }
/* 画面をまたぐ導線(ログインと登録の行き来)。上の操作と離す */
[data-ui="public"] .auth-alt { margin:var(--sp-4) 0 0; }

/* 必須・任意の印。色だけに頼らず文字で出す(F8) */
[data-ui="public"] .req, [data-ui="public"] .opt {
  font-size:13px; font-weight:600; margin-left:var(--sp-1); white-space:nowrap;
}
[data-ui="public"] .req { color:var(--danger); }
[data-ui="public"] .opt { color:var(--muted); }

/* 同意文の参照先リンク。チェックの押せる範囲(44px)の外に置き、誤作動と分ける(5.10) */
[data-ui="public"] .chk-links {
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin:0 0 var(--sp-2); padding-left:calc(var(--tap) + var(--sp-2));
  font-size:14px;
}

/* キャンペーンの帯。登録画面に1行だけ出す(料金表は載せない) */
[data-ui="public"] .camp-bar {
  margin:0 0 var(--sp-4); padding:10px var(--sp-3);
  font-size:15px; line-height:1.6;
  background:var(--primary-soft); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--r-ctl);
}

/* ---- 依頼フォーム(文書#129 5.11 / 3.1 M3 / 3.2 F6) ----
   PCは左(--w-read=680px)が入力・右(280px)がヒント。スマホは1列にして、ヒントは
   依頼本文の上の details に畳む。色・角丸・影はテーマ変数だけを使う。 */
[data-ui="public"] .rq-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); align-items:start; }
[data-ui="public"] .rq-main { margin-bottom:0; min-width:0; }
[data-ui="public"] .rq-main .fm { max-width:none; }
[data-ui="public"] .rq-side { display:none; }
@media (min-width:1024px) {
  [data-ui="public"] .rq-grid { grid-template-columns:minmax(0,var(--w-read)) 280px; gap:var(--sp-5); }
  [data-ui="public"] .rq-side { display:block; }
  [data-ui="public"] .rq-tips { display:none; }
}
[data-ui="public"] .rq-side h2 { font-size:16px; margin:0 0 var(--sp-2); }
[data-ui="public"] .rq-side ul, [data-ui="public"] .rq-tips ul {
  margin:0; padding-left:1.3em; font-size:14px; line-height:1.7; color:var(--muted);
}
[data-ui="public"] .rq-tips { margin:0 0 var(--sp-4); }
[data-ui="public"] .rq-tips > summary, [data-ui="public"] #rq_more > summary {
  display:flex; align-items:center; min-height:var(--tap);
  font-size:15px; font-weight:600; color:var(--primary); cursor:pointer;
}
[data-ui="public"] #rq_more { margin:0 0 var(--sp-4); }
/* 依頼本文は読みやすい大きさで(16px・行送り1.75)、最低200px */
[data-ui="public"] #rq_text { min-height:200px; font-size:16px; line-height:1.75; }

/* 選択肢(ラジオ)。押せる範囲は44px、丸の見た目は20px、説明文は選択肢の下に置く(3.2 F2) */
[data-ui="public"] .rads { border:0; margin:0 0 var(--sp-4); padding:0; min-width:0; }
[data-ui="public"] .rads > legend {
  padding:0; margin:0 0 var(--sp-1); font-size:15px; font-weight:600; color:var(--ink);
}
[data-ui="public"] .rad {
  display:grid; grid-template-columns:var(--tap) 1fr; align-items:start; column-gap:var(--sp-2);
}
[data-ui="public"] .rad > label {
  display:block; min-height:var(--tap); padding-block:12px;
  font-size:15px; line-height:1.6; color:var(--ink);
}
[data-ui="public"] .rad > .rad-d {
  grid-column:2; margin:0 0 var(--sp-2); font-size:14px; line-height:1.6; color:var(--muted);
}
[data-ui="public"] .rad > input[type="radio"] {
  appearance:none; -webkit-appearance:none;
  position:relative; display:inline-block; flex:0 0 auto;
  width:var(--tap); height:var(--tap); min-width:var(--tap); min-height:var(--tap);
  margin:0; padding:0; border:0; background:none; cursor:pointer;
}
[data-ui="public"] .rad > input[type="radio"]::before {
  content:""; position:absolute; left:50%; top:50%; box-sizing:border-box;
  width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2px solid var(--control-border); border-radius:50%; background:var(--surface);
}
[data-ui="public"] .rad > input[type="radio"]:checked::before { border-color:var(--primary); }
[data-ui="public"] .rad > input[type="radio"]:checked::after {
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--primary);
}

/* 話して入力(対応環境だけ出る)。マイクは44px、録音・文字起こしの状態は文字で出す */
[data-ui="public"] .rq-mic {
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-4);
}
[data-ui="public"] .rq-mic[hidden] { display:none; }
[data-ui="public"] .rq-mic .vin-btn { min-width:var(--tap); min-height:var(--tap); font-size:18px; }
[data-ui="public"] .rq-mic .mic-t { font-size:15px; color:var(--ink); }
[data-ui="public"] .rq-mic .msg { flex:1 1 100%; margin:0; color:var(--muted); }
[data-ui="public"] #rq_meter { margin:var(--sp-4) 0 var(--sp-2); }
[data-ui="public"] #rq_meter .camp-bar { margin:0; }
[data-ui="public"] .rq-done .row-actions {
  display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4);
}

/* ---- 依頼一覧のカード(文書#129 5.12 / 3.1 M1 / 3.2 F7) ----
   要約はボタン(実リンク)で、行の見出し。状態だけをチップにして、他の情報は同じ重みで並べない。 */
[data-ui="public"] .list-cta { margin:0 0 var(--sp-4); }
[data-ui="public"] .filters { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:0 0 var(--sp-3); }
[data-ui="public"] .filters .field { flex:1 1 220px; margin:0; }
[data-ui="public"] .filters select { width:100%; }
[data-ui="public"] .list-sel {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-3); font-size:15px; color:var(--ink);
}
[data-ui="public"] .lf-clear { margin:0; min-width:var(--tap); min-height:var(--tap); }
[data-ui="public"] .list-n { margin:0 0 var(--sp-2); font-size:14px; color:var(--muted); }
[data-ui="public"] ul.cards { list-style:none; margin:0; padding:0; }
[data-ui="public"] ul.cards li.item { padding:var(--sp-3) 0; }
[data-ui="public"] .req-t { margin:0; font-size:16px; line-height:1.4; }
[data-ui="public"] .req-link {
  display:block; width:100%; margin:0; padding:var(--sp-2) 0;
  min-height:var(--tap); text-align:left; background:none; border:0;
  font:inherit; font-weight:700; font-size:16px; line-height:1.4;
  color:var(--primary); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; overflow-wrap:anywhere;
}
[data-ui="public"] .req-link:focus { outline:none; }
[data-ui="public"] .req-link:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
[data-ui="public"] .req-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin:var(--sp-1) 0 0; font-size:14px; color:var(--muted);
}
[data-ui="public"] .req-sub { margin:var(--sp-1) 0 0; font-size:14px; color:var(--muted); }
[data-ui="public"] .req-open { margin:var(--sp-1) 0 0; }
[data-ui="public"] .req-open a.taplink { overflow-wrap:anywhere; }

/* ---- 依頼詳細(文書#129 5.13 / 3.2 F10) ---- */
[data-ui="public"] .dt-sum { margin:0 0 var(--sp-2); font-size:17px; line-height:1.55; overflow-wrap:anywhere; }
[data-ui="public"] .dt-st { margin:0 0 var(--sp-3); }
[data-ui="public"] .dt-act {
  margin:0 0 var(--sp-5); padding:var(--sp-4);
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-card);
}
[data-ui="public"] .dt-act-h { margin:0 0 var(--sp-2); font-size:15px; color:var(--ink); }
[data-ui="public"] .dt-act .msg { margin:0; font-size:16px; }
[data-ui="public"] .dt-open { margin:0; }
[data-ui="public"] a.btnlink {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--ctl-h-lg); min-width:var(--tap); padding:12px 20px;
  background:var(--primary); color:var(--primary-ink);
  border-radius:var(--r-ctl); font-size:16px; font-weight:700; text-decoration:none;
}
[data-ui="public"] .dt-url { margin:var(--sp-3) 0 0; font-size:14px; color:var(--muted); }
[data-ui="public"] .dt-u { overflow-wrap:anywhere; word-break:break-all; }
[data-ui="public"] .dt-sec { margin:var(--sp-5) 0 var(--sp-2); font-size:16px; }
[data-ui="public"] .dt-sec3 { margin:var(--sp-3) 0 var(--sp-2); font-size:15px; }
[data-ui="public"] .dt-lang { margin-left:var(--sp-2); font-size:13px; font-weight:400; color:var(--muted); }
[data-ui="public"] details.dt-ja {
  margin:var(--sp-4) 0 0; padding:0 var(--sp-3);
  border:1px solid var(--border); border-radius:var(--r-ctl);
}
[data-ui="public"] details.dt-ja summary {
  display:flex; align-items:center; min-height:var(--tap);
  font-size:15px; font-weight:600; cursor:pointer;
}
[data-ui="public"] details.dt-ja summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
[data-ui="public"] .timeline { list-style:none; margin:0; padding:0; }
[data-ui="public"] .timeline li {
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin:0; padding:var(--sp-2) 0; font-size:14px; color:var(--ink);
  border-bottom:1px solid var(--border);
}
[data-ui="public"] .ev-w { color:var(--muted); }
[data-ui="public"] .ev-who { font-weight:600; }
[data-ui="public"] pre.txt { white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- アプリカタログのカード(文書#129 5.14) ----
   PC3 / 中間2 / スマホ1列。図はAPIに実スクショが無いので種類別の記号SVG(装飾)。 */
[data-ui="public"] .cat-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
@media (min-width:600px) { [data-ui="public"] .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) { [data-ui="public"] .cat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
[data-ui="public"] ul.cards.cat-grid li.cat-card {
  display:flex; flex-direction:column; min-width:0; cursor:default;
  padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--surface);
}
[data-ui="public"] .cat-card:hover { background:var(--surface); }
[data-ui="public"] .cat-thumb {
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16 / 9; margin:0 0 var(--sp-3);
  border-radius:var(--r-ctl); background:var(--primary-soft);
}
[data-ui="public"] .cat-art {
  width:56%; height:auto; max-height:76%;
  fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
[data-ui="public"] .cat-art .fill { fill:var(--primary); stroke:none; }
[data-ui="public"] .cat-t { margin:0; font-size:17px; line-height:1.4; overflow-wrap:anywhere; }
[data-ui="public"] .cat-meta { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:var(--sp-2) 0 0; }
[data-ui="public"] .cat-d { margin:var(--sp-2) 0 0; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
[data-ui="public"] .cat-nod { color:var(--muted); }
[data-ui="public"] .cat-dl { display:inline-block; font-size:13px; color:var(--muted); }
[data-ui="public"] .cat-sub { margin:var(--sp-1) 0 var(--sp-3); font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
[data-ui="public"] .cat-act { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:auto 0 0; }
[data-ui="public"] .cat-act > .cat-copy, [data-ui="public"] .cat-act > .cat-reqs { margin:0; }
[data-ui="public"] .cat-note { margin:var(--sp-5) 0 0; }

/* ---- 自分用にコピー: 幅640px以下の専用パネル(小画面は全幅 / 文書#129 5.14) ---- */
[data-ui="public"] #fork_panel:empty { display:none; }
[data-ui="public"] .fk-panel {
  max-width:640px; margin:0 0 var(--sp-5); padding:var(--sp-4);
  border:2px solid var(--primary); border-radius:var(--r-card); background:var(--bg);
}
@media (max-width:639px) { [data-ui="public"] .fk-panel { max-width:none; } }
[data-ui="public"] .fk-h { margin:0 0 var(--sp-3); font-size:19px; line-height:1.4; }
[data-ui="public"] .fk-h:focus { outline:none; }
[data-ui="public"] .fk-h:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
[data-ui="public"] .fk-panel .kv { margin:0 0 var(--sp-4); }
[data-ui="public"] .fk-panel .fm { max-width:none; }
[data-ui="public"] .fk-act { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
[data-ui="public"] .fk-act > button { margin-top:0; min-height:var(--tap); }
[data-ui="public"] .fk-hint { display:block; margin-top:var(--sp-1); font-size:14px; color:var(--muted); }


/* ---- マイページ(文書#129 5.15) ---- */
/* 目的ごとにカードを分ける。色・角丸・影はテーマ変数だけを使う。 */
[data-ui="public"] .mp-apps { gap: var(--sp-4); }
[data-ui="public"] .mp-app { display: block; }
[data-ui="public"] .mp-app-t { margin: 0 0 var(--sp-2); font-size: 17px; line-height: 1.4; }
[data-ui="public"] .mp-app-st { margin: 0 0 var(--sp-2); }
[data-ui="public"] .mp-app-d { margin: 0 0 var(--sp-2); color: var(--muted); font-size: 14px; line-height: 1.7; }
[data-ui="public"] .mp-app-u { margin: 0 0 var(--sp-3); color: var(--muted); font-size: 13px; word-break: break-all; }
[data-ui="public"] .mp-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
[data-ui="public"] .mp-act > a, [data-ui="public"] .mp-act > button { min-height: var(--tap); }
[data-ui="public"] .mp-vis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-2); font-size: 14px; color: var(--muted); }
[data-ui="public"] .mp-vis button { min-height: var(--tap); }
[data-ui="public"] .mp-panel { margin: var(--sp-3) 0; background: var(--bg); }
[data-ui="public"] .mp-panel-h { margin: 0 0 var(--sp-3); font-size: 16px; }
[data-ui="public"] .mp-panel-h:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
[data-ui="public"] .mp-panel-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
[data-ui="public"] .mp-panel-act button { min-height: var(--tap); }
/* 停止・削除は主操作と並べず、たたんだ「アプリの管理」の中に入れる */
[data-ui="public"] .mp-adm { margin: var(--sp-3) 0 0; border-top: 1px solid var(--border); padding-top: var(--sp-2); }
[data-ui="public"] .mp-adm > summary { min-height: var(--tap); display: flex; align-items: center;
  cursor: pointer; font-size: 14px; color: var(--muted); }
[data-ui="public"] .mp-adm > summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
[data-ui="public"] .mp-adm-h { margin: var(--sp-4) 0 var(--sp-2); font-size: 15px; }
[data-ui="public"] .mp-adm .row-actions { margin: var(--sp-2) 0; }
[data-ui="public"] .mp-adm .row-actions button { min-height: var(--tap); }
[data-ui="public"] .mp-more { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
[data-ui="public"] .mp-more button { min-height: var(--tap); }
[data-ui="public"] .mp-camp { margin: 0; line-height: 1.8; }
[data-ui="public"] .mp-use-h { margin: var(--sp-4) 0 var(--sp-2); font-size: 15px; }
[data-ui="public"] .mp-led { gap: var(--sp-1); font-size: 14px; }
[data-ui="public"] .mp-bal { font-size: 18px; font-weight: 700; }
[data-ui="public"] .mp-note { color: var(--muted); }
[data-ui="public"] .mp-up { color: var(--success); }
[data-ui="public"] .mp-down { color: var(--danger); }