/* ============================================================
   団体・事務局の世界（例会の円卓）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：案内状のような札が、上の金の留め具から、手前へめくれ下りて現れる（めくり式の札）。
             めくれ終わると、右上の小さな出欠の札が、くるっと回って「出」になる。
   流れの3つ：名札が、横に1枚ずつ回って正面を向く。
   画面のイメージ：円卓の上に置かれるように、奥から起き上がる。
   ============================================================ */

.w-dantai .hero__eyebrow{letter-spacing:.18em}
.w-dantai .hero__h1::after{content:"";display:block;width:min(70%,340px);height:7px;margin-top:16px;
  background:linear-gradient(#D8B062,#D8B062) 0 0 / 100% 1px no-repeat,linear-gradient(#D8B062,#D8B062) 0 6px / 100% 1px no-repeat;opacity:.8}

/* 困りごとの一覧：金の罫と、えんじの札の番号 */
.w-dantai .toc__list{border-top:1px solid #D8B062}
.w-dantai .toc__list a{border-bottom:1px solid rgba(216,176,98,.35)}
.w-dantai .toc__no{padding:2px 10px;border-radius:3px;background:#D8B062;color:#2A0C14;text-shadow:none}

/* ---------- 声の札：めくり式の札 ---------- */
.w-dantai .scene__voice{justify-items:center;perspective:1100px}
.w-dantai .vcard{max-width:min(100%,600px);margin-top:22px;transform-origin:50% 0}
html.lp-on.w-dantai .vcard{opacity:clamp(0,var(--e,1) * 3,1);
  transform:rotateX(calc((1 - var(--es,1)) * 100deg))}
.w-dantai .vcard__in{padding:30px 26px 32px;border-radius:4px;
  background:radial-gradient(ellipse at 50% 0,#FFFDF7 0,#FBF5E9 55%,#F1E6D2 100%);
  box-shadow:inset 0 0 0 7px #FBF5E9,inset 0 0 0 8px #C9A256,inset 0 0 0 11px #FBF5E9,inset 0 0 0 12px rgba(201,162,86,.6),0 26px 50px rgba(10,2,5,.6)}
/* 上の金の留め具 */
.w-dantai .vcard::before{content:"";position:absolute;z-index:2;left:50%;top:-12px;width:88px;height:18px;margin-left:-44px;border-radius:9px;
  background:linear-gradient(180deg,#F4DC9C,#C99A4A 55%,#8A6524);box-shadow:0 3px 6px rgba(0,0,0,.4)}
/* 出欠の札 */
.w-dantai .vcard::after{content:"出";position:absolute;z-index:2;right:22px;top:24px;display:grid;place-items:center;width:40px;height:40px;
  border-radius:5px;background:linear-gradient(180deg,#F4DC9C,#D8B062);color:#3A0E18;font:800 21px/1 var(--mincho);
  box-shadow:0 0 0 1px rgba(110,26,42,.35),0 0 18px rgba(244,207,122,.55);-webkit-backface-visibility:hidden;backface-visibility:hidden}
html.lp-on.w-dantai .vcard::after{transform:perspective(260px) rotateX(calc((1 - var(--e2,1)) * -180deg))}
.w-dantai .vcard__code{padding:2px 12px;border-radius:3px;background:#6E1A2A;color:#F8EFE5;letter-spacing:.14em}
.w-dantai .vcard__voice .q{color:#8E2A3A}

/* ---------- こう変わる：金のひし形 ---------- */
.w-dantai .scene__title::before{content:"";display:inline-block;width:11px;height:11px;margin-right:14px;vertical-align:.12em;
  background:#D8B062;transform:rotate(45deg);box-shadow:0 0 12px rgba(216,176,98,.7)}

/* ---------- 流れ：名札が、横に回って正面を向く ---------- */
.w-dantai .flow__list{gap:12px;max-width:460px;perspective:900px}
.w-dantai .flow__list li{min-height:58px;border:0;border-radius:3px;padding:12px 16px;
  background:linear-gradient(180deg,#FFFBF2,#E6DAC6);border-top:4px solid #D8B062;box-shadow:0 12px 22px rgba(10,2,5,.5);transform-origin:0 50%}
.w-dantai .flow__list li + li::before{left:28px;top:-12px;height:12px;width:2px;background:#D8B062}
.w-dantai .flow__n{border-radius:3px;background:#6E1A2A;color:#F8EFE5}
.w-dantai .flow__t{color:#2A0C14}
html.lp-on.w-dantai .flow__list li{opacity:clamp(0,var(--r,1) * 2,1);transform:rotateY(calc((1 - var(--r,1)) * -88deg))}

/* ---------- 画面のイメージ：卓の上で、奥から起き上がる ---------- */
.w-dantai .scene__demo{perspective:1100px}
.w-dantai .mock__body{box-shadow:0 30px 60px rgba(10,2,5,.65),0 0 0 1px rgba(216,176,98,.5),0 0 40px rgba(216,176,98,.12)}
html.lp-on.w-dantai .mock{opacity:var(--m0,1);transform-origin:50% 100%;transform:rotateX(calc((1 - var(--m0,1)) * 55deg))}

.w-dantai .tags li{border-color:rgba(216,176,98,.45)}
.w-dantai .tile{border-color:rgba(216,176,98,.35)}