/* ============================================================
   Dailies アプリ(利用者向け) — 値の正本(トークン)1枚
   色・書体・文字段・余白・角丸・影・虹色はここだけで決める。
   画面のコード(screens.js)に色や寸法を直書きするのは禁止(門A4/A5が監視)。
   出どころ: 設計 "Dailies MVP⭐️.dc.html" のMVP画面の値 + _ds/ のデザインシステム
   ============================================================ */
:root{
  /* 面(暗いスクリーニングルーム) */
  --bg:#191920;            /* 画面の地 */
  --screen:#101015;        /* いちばん深い闇(コマの窓・プレーヤー) */
  --surface:#26252E;       /* 浮いた面(吹き出し・カード) */
  --well:#212029;          /* くぼみ(入力欄) */
  --line:#2B2A34;          /* 枠線 */
  --sheet:rgba(10,10,14,.92); /* 下からの紙の地 */
  --scrim:rgba(0,0,0,.6);

  /* 文字 */
  --ink:#FFF4E3;                       /* クリーム(主) */
  --ink-soft:#AEB8D0;                  /* 補助(4.5:1) */
  --ink-dim:rgba(255,244,227,.6);      /* 弱い文字 */
  --ink-faint:rgba(255,244,227,.42);   /* 沈んだボタンの文字 */
  --on-brand:#1B2A4A;                  /* クリーム面の上の文字 */

  /* 3色のドット */
  --brand:#FF6B6B; --brand-2:#FF9494; --accent-y:#FFC93C; --accent-t:#4ECDC4;
  --ok:#4ECDC4; --err:#FF9B8A;
  --rainbow:linear-gradient(96deg,#FF6B6B,#FFC93C 46%,#4ECDC4);

  /* 押せる面(薄いクリームの膜) */
  --face-1:rgba(255,244,227,.07);
  --face-2:rgba(255,244,227,.12);
  --hairline:rgba(255,244,227,.12);

  /* フィルムの質感(設計の実測値) */
  --film-dark:#20100B;
  --film-grad:linear-gradient(180deg,#2E1710,#33190F 46%,#4A2718);
  --film-edge:rgba(255,224,170,.55);   /* 縁の符号(琥珀) */
  --film-edge2:rgba(126,221,214,.45);  /* 縁の符号(ティール) */
  --film-ring:rgba(255,224,170,.95);   /* 輪の文字(未読) */
  --film-ring-dim:rgba(255,224,170,.3);/* 輪の文字(観た) */

  /* 書体 */
  --font-display:"Fredoka","M PLUS Rounded 1c","Hiragino Kaku Gothic ProN",sans-serif;
  --font-body:"Fredoka","M PLUS Rounded 1c",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --font-num:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","M PLUS Rounded 1c",monospace;

  /* 文字は6段だけ(これ以外の本文サイズ禁止。フィルムの符号など部品の中の飾り文字は部品CSSのみ) */
  --fs-xs:14px; --fs-s:15px; --fs-m:17px; --fs-input:17px; --fs-l:20px; --fs-xl:28px;

  /* 余白は4px刻み */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* 角丸(設計のMVP画面の段) */
  --r-3xs:6px; --r-2xs:7px; --r-xs:9px; --r-s:12px; --r-m:18px; --r-l:22px; --r-full:999px;

  --shadow-1:0 1px 3px rgba(0,0,0,.3);
  --shadow-2:0 8px 22px rgba(10,10,14,.55);
  --tap:44px;              /* 当たり判定の下限 */
  --col:430px;             /* 大きい画面での柱の幅 */
  --kb-pan:0px;            /* キーボード退避量(core.jsのキーボード係だけが書く) */
}

/* ===== 土台(端末・OS設定に影響されない) ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%}
html,body{overscroll-behavior-y:none}
body{
  font-family:var(--font-body);font-size:var(--fs-m);color:var(--ink);
  background:#0C0C11; /* 柱の外の地(大きい画面) */
  height:100%;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center; /* 器を縦横とも中央に(縦長の窓で余った分は外の地) */
}
input,textarea{font-size:var(--fs-input);font-family:var(--font-body);color:var(--ink)}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,107,107,.3)}
button{font-family:var(--font-body);color:var(--ink);background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
::-webkit-scrollbar{display:none}
*{scrollbar-width:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* アプリの器: 電話では全幅・大きい画面では430pxの柱を中央に(中の寸法は電話と同一)。
   高さも「スマホの縦横比(設計の紙402×874)」を上限にする=縦長の窓(PC等)で紙が
   上下に間延びしない。iPhone実機(SE〜Max)は比率がこの上限に届かないため常に画面いっぱい=1mmも変わらない */
#shell{
  position:relative;width:100%;max-width:var(--col);
  height:min(100dvh, calc(min(100vw, var(--col)) * 874 / 402));
  margin:0 auto;flex:none;
  background:var(--bg);overflow:hidden;
  transform:translateY(calc(-1 * var(--kb-pan)));transition:transform .18s ease;
}
#scr,#over,#sheetHost{position:absolute;inset:0}
#over:empty,#sheetHost:empty{display:none}
#over{z-index:40}#sheetHost{z-index:60}

/* 画面の共通骨: 縦スクロールする中身 */
.pane{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.pane>.body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* よく使う小物 */
.hscroll{overflow-x:auto;overflow-y:hidden}
.hscroll>.row{display:flex;min-width:max-content}
.sec-label{font-size:var(--fs-s);font-weight:800;color:var(--ink);line-height:1}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 20px;margin:30px 0 12px}
.rainbow-line{width:56px;height:5px;border-radius:var(--r-full);background:var(--rainbow)}
.dim{color:var(--ink-dim)}
.press{transition:transform .12s}
.press:active{transform:scale(.97)}
.vspin{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:var(--r-full);border:3px solid rgba(255,244,227,.22);border-top-color:var(--ink);animation:reelSpin .8s linear infinite;pointer-events:none;z-index:5}
.sep{border-top:1px solid rgba(255,244,227,.12)}

/* 主ボタン(状態はcore.jsのprimaryStateの1本で決める) */
.primary{
  width:100%;height:56px;border-radius:var(--r-m);
  font-size:17px;font-weight:800;transition:transform .12s;
}
.primary:active{transform:scale(.98)}
.primary.go{background:var(--ink);color:var(--on-brand)}
.primary.dim{background:rgba(255,244,227,.16);color:var(--ink-faint);cursor:default}
.primary.danger{background:var(--brand);color:#FFF4E3}

/* 入力欄(くぼみ) */
.field{
  width:100%;height:56px;border-radius:var(--r-m);border:1px solid transparent;
  background:rgba(255,244,227,.08);padding:0 18px;color:var(--ink);
}
.field::placeholder{color:var(--ink-faint)}
textarea.field{height:120px;padding:14px 18px;resize:none}

/* 動き(設計の指定) */
@keyframes reelSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes lampPulse{0%,100%{opacity:.82}52%{opacity:1}}
@keyframes fadeUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}

/* 設計の紙面(写し)を出す器。設計の座標系は「iPhoneの物理画面」で、紙の上端0〜62pxは
   時計の帯(上余白21+文字22+下余白19=設計のios-frameの実測)の場所。
   式1本=「紙の時計の帯を、実機の時計(セーフエリア)に重ねる」:
   - ブラウザ(inset=0): 帯の実体43px(21+22)を画面の外へ出す=中身が43px上がり、上余白は
     設計の「時計の文字から中身までの間隔15px」だけ残る(帯が丸ごと空白になる症状BUG-716の根治)
   - フルスクリーン(inset≈47〜62): ずらし0=紙の帯と実機の時計がそのまま重なる(従来どおり)
   - 帯より大きいノッチ(inset>62): 超えたぶんだけ下へずらす(従来どおり)
   ずらす以外は1mmも触らない=紙の中の位置関係はそのまま */
.paper{position:absolute;left:0;right:0;bottom:0;top:max(calc(env(safe-area-inset-top) - 62px), min(calc(env(safe-area-inset-top) - 43px), 0px))}
.paper>*{height:100%}

/* 紙の中の「打てる欄」: 見た目は紙のまま。打つための欄を透明で重ねるだけ(値は持たない)。
   ⛔欄の字は16px未満禁止(iPhoneが欄タップで画面ごと自動拡大し、送信ボタンが見切れる。
   紙の宣言15pxより強く効かせる=アプリの決まり「入力欄は16px以上」の1本に全欄が乗る) */
.mihon-typebox{position:relative}
.mihon-typein{position:absolute;inset:0;opacity:0;border:none;background:none;color:transparent;caret-color:transparent;width:100%;font-size:var(--fs-input)}
.mihon-input{font:inherit;border:none;outline:none;font-size:var(--fs-input)!important}

/* 下からの紙が開いている間(bodyのsheet-open=navの1箇所が付ける)、上映の映像は
   「上の窓」に収まる大きさへ縮んで再生が続く(TikTokのコメント欄と同じ・発注者指示 2026-08-21)。
   窓の高さ=返信の紙(7a)のシート上端291pxと2箇所セット(変える時は両方) */
.sheet-open #over [data-stage]{top:0!important;bottom:auto!important;height:291px!important;background-size:contain!important;background-repeat:no-repeat;background-color:#000;transition:top .22s ease,height .22s ease}
.sheet-open #over [data-stage] video{object-fit:contain!important}
/* 紙が開いている間、上の窓は動画だけ(符号の帯・クルー行・いいね・バー・戻る等は隠す=発注者指示 2026-08-21)。
   紙の要素はインラインでdisplayを宣言している=!importantが必須(BUG-701と同じ教訓) */
.sheet-open #over .paper > div > :not([data-stage]){display:none!important}