/* ============================================================
   theater.css — /theater.html 専用（このファイルはシアターだけが読む）
   ・すべての規則を body.theater / html.th-js 配下に閉じ込める
   ・色は site.css のトークン（--cyan / --cyan-2 / --amber）をそのまま借り、
     地の色だけ暗転させる。cyan=誘導／amber=CTA の役割分担は共通のまま
   ・既定（JSなし）は「縦グリッド全件表示」。html.th-js が付いたときだけ3Dになる
   ============================================================ */

body.theater{
  --th-bg:#0a0f1a;
  --th-bg-2:#05080e;
  --th-card:#131d2d;
  --th-card-2:#0d1522;
  --th-line:rgba(139,240,255,.15);
  --th-line-2:rgba(139,240,255,.28);
  --th-ink:#e9f1fb;
  --th-ink-2:#a3b5cd;
  --th-ink-3:#71849e;
  --th-cw:clamp(232px,68vw,300px);
  --th-ch:clamp(320px,40vh,390px);
  --th-face:clamp(58px,8vw,76px);

  background:var(--th-bg-2);
  color:var(--th-ink);
}
body.theater ::selection{background:rgba(56,217,240,.3);color:#fff}
body.theater :focus-visible{outline:3px solid var(--cyan-2);outline-offset:3px}

/* ---------- ヘッダー ---------- */
.th-head{
  position:sticky;top:0;z-index:60;
  background:rgba(5,8,14,.82);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid rgba(139,240,255,.12);
}
.th-head-in{
  max-width:var(--maxw);margin:0 auto;padding:10px clamp(14px,4vw,28px);
  display:flex;align-items:center;gap:12px;
}
.th-brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:900;font-size:clamp(13.5px,3.6vw,15.5px);line-height:1.3;color:var(--th-ink);
}
.th-brand .mark{
  width:26px;height:26px;flex:none;border-radius:7px;
  background:linear-gradient(145deg,var(--cyan) 0%,#0f9fbc 100%);
  color:#04222a;display:grid;place-items:center;
  font-family:var(--num);font-size:15px;font-weight:900;line-height:1;
  box-shadow:0 0 16px rgba(56,217,240,.45);
}
.th-topnav{margin-left:auto;display:flex;align-items:center;gap:8px}
.th-back{
  text-decoration:none;font-size:12.5px;font-weight:800;color:var(--cyan-2);
  padding:7px 12px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(139,240,255,.26);background:rgba(56,217,240,.07);
  transition:background .15s,border-color .15s;
}
.th-back::before{content:"← "}
.th-back:hover{background:rgba(56,217,240,.15);border-color:var(--th-line-2)}
.th-cta{
  text-decoration:none;font-size:12.5px;font-weight:800;white-space:nowrap;
  padding:8px 14px;border-radius:999px;line-height:1.35;
  background:linear-gradient(180deg,#ffc355 0%,#ffa32c 55%,#f2851a 100%);
  color:#2a1600;box-shadow:0 2px 0 #a85c0c,0 6px 18px rgba(255,140,30,.28);
}
.th-cta:hover{filter:brightness(1.05)}
body.theater .b-short{display:none}
@media (max-width:760px){
  .th-cta{display:none}
}
@media (max-width:430px){
  body.theater .b-full{display:none}
  body.theater .b-short{display:inline}
  .th-brand{font-size:13px}
}

/* ---------- 劇場（セクション地） ---------- */
.th{
  position:relative;overflow:hidden;
  padding:clamp(14px,2.2vw,22px) 0 clamp(26px,4.4vw,46px);
  background:
    radial-gradient(1100px 620px at 50% 34%,rgba(56,217,240,.13),transparent 62%),
    radial-gradient(760px 420px at 88% 108%,rgba(255,180,58,.08),transparent 66%),
    var(--th-bg);
}
.th::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(139,240,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,240,255,.08) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 80% 58% at 50% 44%,#000 12%,transparent 74%);
  mask-image:radial-gradient(ellipse 80% 58% at 50% 44%,#000 12%,transparent 74%);
}
.th>*{position:relative;z-index:1}
.th-wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 clamp(14px,4vw,28px)}

/* ---------- JSなしの案内 ---------- */
.th-nojs{
  margin:0 0 clamp(18px,3.4vw,26px);
  border:1px solid rgba(255,180,58,.42);background:rgba(255,180,58,.09);
  border-radius:var(--radius-s);padding:14px 16px;
  font-size:13px;line-height:1.85;color:var(--th-ink-2);
}
.th-nojs b{display:block;color:var(--th-ink);font-weight:800;margin-bottom:2px}
.th-nojs a{color:var(--cyan-2);font-weight:800}
html.th-js .th-nojs{display:none}

/* ---------- 見出し ---------- */
.th-intro{text-align:center}
.th-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--num);font-size:10.5px;font-weight:800;letter-spacing:.2em;
  color:var(--cyan-2);border:1px solid rgba(139,240,255,.26);
  background:rgba(56,217,240,.07);border-radius:999px;padding:5px 14px;
}
.th-eyebrow em{font-style:normal;color:var(--amber);font-size:1.2em}
.th-h1{
  margin:clamp(8px,1.6vw,12px) 0 0;
  font-size:clamp(21px,5vw,32px);line-height:1.34;font-weight:900;
  letter-spacing:-.005em;color:var(--th-ink);
}
.th-lede{
  margin:clamp(7px,1.4vw,10px) auto 0;max-width:34em;
  font-size:clamp(13px,3.4vw,14.5px);line-height:1.75;color:var(--th-ink-2);
}

/* ---------- 部門チップ ---------- */
.th-filters{
  display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;
  margin:clamp(11px,2vw,16px) 0 0;
  padding:2px 2px 8px;
  scrollbar-width:thin;scrollbar-color:rgba(139,240,255,.22) transparent;
  justify-content:flex-start;
}
.th-filters::-webkit-scrollbar{height:6px}
.th-filters::-webkit-scrollbar-thumb{background:rgba(139,240,255,.22);border-radius:999px}
@media (min-width:900px){.th-filters{flex-wrap:wrap;justify-content:center;overflow:visible}}
.th-chip{
  flex:none;cursor:pointer;font-family:var(--jp);
  font-size:12.5px;font-weight:800;line-height:1.4;white-space:nowrap;
  color:var(--th-ink-2);background:rgba(255,255,255,.035);
  border:1px solid rgba(139,240,255,.16);border-radius:999px;
  padding:7px 13px;display:inline-flex;align-items:center;gap:7px;
  transition:color .15s,background .15s,border-color .15s;
}
.th-chip em{
  font-style:normal;font-family:var(--num);font-size:10.5px;font-weight:800;
  letter-spacing:.06em;color:var(--th-ink-3);
}
.th-chip:hover{color:var(--th-ink);border-color:var(--th-line-2);background:rgba(56,217,240,.1)}
.th-chip.is-on{
  color:#04222a;background:linear-gradient(180deg,var(--cyan-2),var(--cyan));
  border-color:var(--cyan-2);box-shadow:0 0 18px rgba(56,217,240,.3);
}
.th-chip.is-on em{color:rgba(4,34,42,.66)}
html:not(.th-js) .th-filters{display:none}
/* 送り方の説明はJSが動いているときだけ意味を持つ */
html:not(.th-js) .th-lede{display:none}

/* ============================================================
   ステージ
   既定＝縦グリッド（JSなしでも83本すべて読める）
   ============================================================ */
.th-stage{
  display:grid;gap:clamp(11px,2.2vw,15px);
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  max-width:var(--maxw);margin:clamp(18px,3.4vw,28px) auto 0;
  padding:0 clamp(14px,4vw,28px);
}
.th-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:linear-gradient(165deg,var(--th-card) 0%,var(--th-card-2) 100%);
  border:1px solid var(--th-line);border-radius:16px;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.th-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:linear-gradient(180deg,var(--cyan-2),#0f9fbc);opacity:.6;
}
.th-card-in{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(15px,2.8vw,20px);
}
.th-card .face{
  width:var(--th-face);height:var(--th-face);
  border-radius:15px;background:rgba(139,240,255,.06);border-color:var(--th-line);
  margin-bottom:clamp(9px,1.8vw,12px);
}
.th-card .face.mono{color:var(--cyan-2);font-size:clamp(22px,5vw,30px)}
.th-card .face.mono.m3{font-size:clamp(18px,4vw,25px)}
.th-card .face.mono.m4{font-size:clamp(15px,3.3vw,21px)}
.th-cat{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  color:var(--th-ink-3);margin-bottom:5px;
}
.th-name{
  display:block;font-size:clamp(16.5px,4.2vw,20px);font-weight:900;line-height:1.38;
  color:var(--th-ink);overflow-wrap:anywhere;
}
.th-epithet{
  display:block;margin-top:5px;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;color:var(--cyan-2);line-height:1.5;
}
.th-role{
  display:block;margin-top:8px;font-size:12.5px;font-weight:700;
  line-height:1.6;color:#7fe0f4;
}
.th-mission{
  display:block;margin-top:9px;font-size:12.5px;line-height:1.72;color:var(--th-ink-2);
}
.th-go{
  display:block;margin-top:auto;padding-top:12px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--cyan-2);
  border-top:1px solid rgba(139,240,255,.12);
}
.th-go::after{content:" →"}
body.theater .badge-draft{
  position:absolute;top:11px;right:12px;z-index:3;
  color:var(--amber);background:rgba(255,180,58,.16);border-color:rgba(255,180,58,.5);
}

/* ============================================================
   3Dカバーフロー（JSが生きているときだけ）
   ============================================================ */
html.th-js .th-stage{
  display:block;position:relative;
  max-width:none;padding:0;margin-top:clamp(9px,1.8vw,15px);
  height:calc(var(--th-ch) + clamp(30px,4.2vw,50px));
  perspective:1500px;perspective-origin:50% 46%;
  overflow:hidden;touch-action:pan-y;
}
/* 舞台の床。カードの足元だけ光らせて、浮いている感じを作る */
html.th-js .th-stage::after{
  content:"";position:absolute;left:50%;bottom:clamp(14px,2.4vw,26px);
  width:min(720px,86%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(139,240,255,.45),transparent);
  box-shadow:0 0 34px 6px rgba(56,217,240,.16);
  pointer-events:none;
}
html.th-js .th-card{
  position:absolute;left:50%;top:50%;
  width:var(--th-cw);height:var(--th-ch);
  margin:0;transform-origin:50% 50%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transform:translate(-50%,-50%);
  transition:transform .52s cubic-bezier(.2,.8,.25,1),opacity .4s ease,
             box-shadow .3s ease,border-color .3s ease;
}
html.th-js .th-card.is-hidden{display:none}
html.th-js .th-card.is-far{pointer-events:none}
html.th-js .th-stage.no-anim .th-card{transition:none}

/* 3D配置ではカードの高さが固定になる。画面が低いほど入る行数が減るので、
   紹介文だけ行数で頭打ちにして、文が途中で切れた見え方を作らない。
   （縦グリッド表示のときは全文を出す） */
html.th-js .th-card .face{width:min(var(--th-face),9vh);height:min(var(--th-face),9vh)}
html.th-js .th-mission{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:5;line-clamp:5;
}
@media (max-height:820px){html.th-js .th-mission{-webkit-line-clamp:4;line-clamp:4}}
@media (max-height:700px){html.th-js .th-mission{-webkit-line-clamp:3;line-clamp:3}}

/* 脇のカードは「画像＋名前」まで落とす */
html.th-js .th-role,
html.th-js .th-mission,
html.th-js .th-go{
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease;
}
html.th-js .th-card.is-center .th-role,
html.th-js .th-card.is-center .th-mission,
html.th-js .th-card.is-center .th-go{opacity:1;transform:none}
html.th-js .th-card:not(.is-center)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,14,.34),rgba(5,8,14,.6));
  transition:opacity .35s ease;
}
html.th-js .th-card:not(.is-center) .th-name{color:#cddcee}
html.th-js .th-card:not(.is-center)::before{opacity:.32}
html.th-js .th-card.is-center{
  border-color:rgba(139,240,255,.45);
  box-shadow:
    0 0 0 1px rgba(56,217,240,.22),
    0 36px 80px rgba(0,0,0,.62),
    0 0 70px rgba(56,217,240,.22);
}
html.th-js .th-card.is-center::before{opacity:1}
html.th-js .th-card.is-center:hover{border-color:var(--cyan-2)}
html.th-js .th-card:not(.is-center):hover::after{background:linear-gradient(180deg,rgba(5,8,14,.18),rgba(5,8,14,.42))}

/* ---------- 正面カードの見出し（下部・大きく） ---------- */
.th-caption{text-align:center;margin-top:clamp(9px,1.8vw,13px);min-height:3.2em}
.th-cap-cat{
  display:block;font-size:11px;font-weight:800;letter-spacing:.2em;
  color:var(--cyan-2);margin-bottom:6px;
}
.th-cap-name{
  display:block;font-size:clamp(20px,5.2vw,34px);font-weight:900;line-height:1.3;
  color:var(--th-ink);letter-spacing:-.005em;overflow-wrap:anywhere;
  text-shadow:0 0 34px rgba(56,217,240,.22);
}
html:not(.th-js) .th-caption{display:none}

/* ---------- 送り操作 ---------- */
.th-controls{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,3vw,22px);margin-top:clamp(10px,2vw,14px);
}
.th-btn{
  cursor:pointer;font-family:var(--jp);font-size:12.5px;font-weight:800;
  color:var(--th-ink-2);background:rgba(255,255,255,.04);
  border:1px solid rgba(139,240,255,.2);border-radius:999px;
  padding:9px 16px;display:inline-flex;align-items:center;gap:7px;line-height:1.4;
  transition:color .15s,background .15s,border-color .15s,opacity .15s;
}
.th-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.th-btn:hover:not(:disabled){color:#04222a;background:linear-gradient(180deg,var(--cyan-2),var(--cyan));border-color:var(--cyan-2)}
.th-btn:disabled{opacity:.3;cursor:default}
.th-count{
  margin:0;font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:800;color:var(--th-ink-3);letter-spacing:.06em;
  display:inline-flex;align-items:baseline;gap:6px;min-width:6.5em;justify-content:center;
}
.th-cur{font-size:23px;color:var(--th-ink);line-height:1}
.th-sep{opacity:.5}
.th-hint{
  margin:clamp(12px,2.4vw,18px) auto 0;max-width:34em;text-align:center;
  font-size:12px;line-height:1.8;color:var(--th-ink-3);
}
html:not(.th-js) .th-controls,
html:not(.th-js) .th-hint{display:none}

/* ---------- フッター ---------- */
.th-foot{
  border-top:1px solid rgba(139,240,255,.12);background:var(--th-bg-2);
  padding:clamp(24px,5vw,40px) 0 clamp(26px,5vw,44px);
}
.th-foot-in{
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(14px,4vw,28px);
  display:flex;gap:14px 30px;flex-wrap:wrap;align-items:center;
}
.th-foot-note{margin:0;font-size:12.5px;line-height:1.85;color:var(--th-ink-2);max-width:34em}
.th-foot-links{margin-left:auto;display:flex;gap:8px 18px;flex-wrap:wrap}
.th-foot-links a{font-size:12.5px;font-weight:700;color:var(--cyan-2);text-decoration:none}
.th-foot-links a:hover{text-decoration:underline}
.th-copy{
  max-width:var(--maxw);margin:clamp(16px,3vw,24px) auto 0;padding:0 clamp(14px,4vw,28px);
  font-size:11.5px;color:var(--th-ink-3);letter-spacing:.04em;
}

/* ---------- モーション配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  html.th-js .th-card,
  html.th-js .th-role,
  html.th-js .th-mission,
  html.th-js .th-go,
  .th-btn,.th-chip,.th-back{transition:none}
}

/* ---------- 印刷 ---------- */
@media print{
  .th-head,.th-filters,.th-controls,.th-hint,.th-foot{display:none}
  body.theater{background:#fff;color:#101a29}
  html.th-js .th-stage{display:grid;height:auto;perspective:none;overflow:visible}
  html.th-js .th-card{
    position:relative;left:auto;top:auto;width:auto;height:auto;
    transform:none !important;opacity:1 !important;box-shadow:none;break-inside:avoid;
  }
  html.th-js .th-card.is-hidden{display:block}
  html.th-js .th-card::after{display:none}
  html.th-js .th-role,html.th-js .th-mission,html.th-js .th-go{opacity:1;transform:none}
}