/* =========================================================================
   TOKIQIL LP HORROR — style.css
   tokens v0.2 — KV「厭な服屋」準拠（D7）。ダークテーマ固定は世界観の選択。
   全色は :root のセマンティックトークン経由。コンポーネント側に生hexは書かない
   （:root 内の data-URI SVG 中の hex のみ例外）。
   ========================================================================= */

:root{
  /* --- 無彩色（KV: モノクロ高コントラスト） --- */
  --void:#050505;          /* 最背面・オーバーレイの闇（青みを持たせない） */
  --board:#0D0D0F;
  --feed:#0A0A0B;          /* SNS画面の地（= 01-design の --feed-bg） */
  --surface:#151517;       /* カード・吹き出し */
  --line:#242427;          /* 罫線・区切り */
  --ink:#EDEDEB;           /* 本文テキスト（紙白） */
  --dim:#77777A;           /* 補助テキスト・メトリクス */
  --faint:#48484B;         /* さらに沈めた補助 */
  --link:#7E8C96;          /* 架空SNSのリンク・タグ（"色が抜けた青"） */
  --link-bright:#9CC3DE;   /* 応募リンク等、目立たせたいリンクの明色 */

  /* --- 唯一の彩色（KVマゼンタ = 依頼者に触れられた要素のみ） --- */
  --scar:#E4007F;
  --scar-ink:#FF4FA3;      /* 暗地での小テキスト用明色 */

  /* --- アバターの地色（依頼者=白い無地の円 / 一般ユーザー=無彩グラデ） --- */
  --face:#F2F1EC;
  --av-a:#3E3E42;
  --av-b:#333335;
  --av-c:#1C1C1E;

  /* --- タイポグラフィ（Webフォント不使用・システムフォントのみ） --- */
  --sans:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Times New Roman",serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;

  /* --- テクスチャ（data-URI・依存ゼロ） --- */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  --knot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23E4007F' stroke-width='1.8'%3E%3Cellipse cx='20' cy='20' rx='13' ry='6.5' transform='rotate(18 20 20)'/%3E%3Cellipse cx='20' cy='20' rx='11.5' ry='5.5' transform='rotate(-38 20 20)'/%3E%3Cellipse cx='21' cy='19' rx='9.5' ry='7.5' transform='rotate(72 20 20)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============ base ============ */
*{box-sizing:border-box}
html{background:var(--void)}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--void);
  line-height:1.7;
  font-size:15px;
  -webkit-text-size-adjust:100%;
}
/* 全画面に極薄フィルムグレイン */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:var(--noise);
  background-size:96px;
  opacity:.05;
  pointer-events:none;
  z-index:99;
}
.mono{font-family:var(--mono)}

button{font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer}
:focus-visible{outline:2px solid var(--scar);outline-offset:2px}

/* ============ app column（PCでは中央にスマホ幅・周辺は --void で「覗く」構図） ============ */
.app{
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 auto;
  height:100vh;
  height:100dvh;
  background:var(--feed);
  overflow:hidden;
}
@media (min-width:460px){
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* ============ screen（単一画面。旧ステートマシンはD16で廃止） ============ */
.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
}

/* ============ shared: avatars ============ */
.av{width:42px;height:42px;border-radius:50%;flex:none;display:inline-block}
.av.sm{width:34px;height:34px}
.av.scarred{background:var(--face) var(--knot) center/74% no-repeat} /* 依頼者=白い円+走り書き */
.av.g1{background:linear-gradient(135deg,var(--av-a),var(--line))}
.av.g2{background:linear-gradient(135deg,var(--av-b),var(--av-c))}

/* ============ shared: play button ============ */
.play{
  width:40px;height:40px;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);
  display:grid;place-items:center;
}
.play .tri{
  display:block;width:0;height:0;
  border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent var(--ink);
  margin-left:2px;
}

/* ============ SCREEN 01 : POST ============ */
.navbar{
  position:relative;
  display:flex;align-items:center;gap:16px;
  padding:8px 16px;font-size:15px;font-weight:600;
  border-bottom:1px solid var(--line);flex:none;
}
.navbar .bk{color:var(--ink);font-weight:400}
/* SNS「くろす」のブランドグリフ（× の細マーク・無彩色のみ。--scarは使わない） */
.navbar .brand{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--dim);font-size:17px;font-weight:300;line-height:1;letter-spacing:0;
  pointer-events:none;
}

.feedbody{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

.post{padding:14px 16px}
.who{display:flex;gap:10px;align-items:center}
.who-id{min-width:0}
.who .nm{font-weight:700;font-size:14.5px;line-height:1.3}
.who .hd{color:var(--dim);font-size:12.5px;font-weight:400}
.who .more{margin-left:auto;color:var(--dim);letter-spacing:2px}
.ptext{font-size:15px;margin:12px 0 10px;white-space:pre-line}
.tags{color:var(--link)}
.pmeta{font-family:var(--mono);font-size:11px;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:10px}
.pmeta b{color:var(--ink);font-weight:400}
.pstats{display:flex;gap:14px;font-size:12px;color:var(--dim);padding:8px 0;border-bottom:1px solid var(--line)}
.pstats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.acts{display:flex;justify-content:space-between;padding:9px 6px 0;color:var(--dim)}
.acts svg{display:block}

.reply{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px}
.reply .body{flex:1;min-width:0}
.reply .nm{font-size:13.5px;font-weight:700}
.reply .hd{color:var(--dim);font-weight:400;font-size:12px}
.reply p{margin:3px 0 0;font-size:13.5px}

.vcard{
  display:block;width:100%;text-align:left;margin-top:8px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  color:inherit;text-decoration:none;
}
.vthumb{
  display:grid;place-items:center;position:relative;
  aspect-ratio:16/9;background:var(--void) var(--noise);background-size:96px;
}
.vthumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb .play{position:relative;z-index:1}
.dur{
  position:absolute;right:8px;bottom:8px;
  font-size:10.5px;color:var(--ink);
  background:color-mix(in srgb,var(--void) 78%,transparent);
  padding:2px 6px;border-radius:3px;
}
.vurl{display:block;font-size:11px;color:var(--link);padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.deleted{
  margin:12px 16px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;color:var(--dim);font-size:13px;
  animation:flick 5s infinite;
}

/* 応募導線: X風のリンク表示（LINE友だち追加へ）。太字+明色で目立たせる */
.apply-link{
  margin-top:6px;display:inline-block;
  color:var(--link-bright);text-decoration:none;
  font-size:14px;font-weight:700;word-break:break-all;
}

.feed-fic{
  padding:22px 20px 30px;text-align:center;
  font-size:11px;color:var(--dim);letter-spacing:.02em;line-height:1.6;
}

/* ============ keyframes ============ */
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.86}}

/* ============ reduced motion（フリッカーを無効化） ============ */
@media (prefers-reduced-motion: reduce){
  .deleted{animation:none}
}