/* Kotoage Care 立体スタック (共通部品)
   使う場所: /care/stack/ と LP トップ (/)。読み込むページ側で --text / --border / --mono などのトークンを定義すること。
   仕様: docs/design/kotoage-care-design-spec.md「立体スタック」「漫画風の白い吹き出し」 */
/* ロゴ: Simple Icons を CSS mask でブランド色に着色 */
.logo { display: inline-block; width: var(--s, 22px); height: var(--s, 22px); background: var(--c, var(--text)); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.logo.ph { -webkit-mask: none; mask: none; border-radius: 6px; background: var(--surface-2); }

/* 立体スタック (Stripe 風アイソメトリック) */
.stack3d { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding: 20px; }
.stack-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.stack-tabs button, .view-toggle button { font: 500 14px var(--font); color: var(--text-dim); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 40px; }
.stack-tabs button[aria-selected="true"], .view-toggle button[aria-pressed="true"] { color: var(--text); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.stack-body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 24px; align-items: center; }
.iso-stage { height: 480px; display: grid; place-items: center; perspective: 1800px; overflow: hidden; }
.iso { position: relative; width: 260px; height: 260px; transform: rotateX(58deg) rotateZ(-42deg); transform-style: preserve-3d; margin-top: 0; }
.plate { position: absolute; inset: 0; border-radius: 18px; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, 1.35, .35, 1), opacity .3s ease-out; cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 24%, rgba(18,20,24,0.92)), rgba(14,16,19,0.88));
  border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 10px 10px 0 -1px color-mix(in srgb, var(--pc) 20%, #07080A), 30px 30px 60px rgba(0,0,0,0.55); }
/* 各板は 3×3 = 9 マス。マウスを乗せた層の「上の板」をググっと持ち上げ、上の板との隙間を板の一辺の 0.7 倍に広げる。
   上の板が隠すのは (x ≥ 1.07g, y ≤ H − 1.19g) の奥の角だけになり、g ≥ 0.62H で奥の 1 マスだけが隠れる → 9 個中 8 個に届く。
   アイコンは手前の列から埋め、隠れる奥の角 (右上) は 9 番目に回す */
.plate .tiles { position: absolute; inset: 14px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; }
.plate .tile { width: 100%; height: 100%; border-radius: 12px; display: grid; place-items: center; background: rgba(8,11,20,0.82); border: 1px solid rgba(198,206,224,0.16); cursor: pointer; padding: 0; transition: background .15s, border-color .15s, box-shadow .15s; }
/* ホバーで浮かせない (浮くとカーソルの下から外れて吹き出しがちらつく)。枠と背景だけ変える */
.plate .tile:hover, .plate .tile:focus-visible, .plate .tile.on { background: rgba(24,32,58,0.95); border-color: var(--pc); box-shadow: 0 0 0 2px var(--pc); outline: none; }
.plate .tile .logo { --s: 34px; }
.plate.lifted-base { box-shadow: 0 0 0 2px var(--pc), 10px 10px 0 -1px color-mix(in srgb, var(--pc) 20%, #07080A), 30px 30px 60px rgba(0,0,0,0.55); }
.stack3d .plate.hot .plate-name { color: #fff; }
.lift-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; text-align: center; }

/* 大きな吹き出し (ソフトウェアの説明・最新版・リリース年月) */
.stack-tip { position: fixed; z-index: 200; width: min(360px, calc(100vw - 24px)); background: #151B33; color: var(--text); border: 1px solid var(--border-strong); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease-out, transform .15s ease-out; }
.stack-tip.show { opacity: 1; transform: none; }
.stack-tip::after { content: ""; position: absolute; width: 16px; height: 16px; background: #151B33; border: 1px solid var(--border-strong); border-top: none; border-left: none; transform: rotate(45deg); left: var(--ax, 24px); }
.stack-tip.below::after { top: -9px; transform: rotate(-135deg); }
.stack-tip.above::after { bottom: -9px; }
.stack-tip .tip-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.stack-tip .tip-head .logo { --s: 36px; }
.stack-tip .tip-name { font-size: 20px; font-weight: 700; line-height: 1.25; }
.stack-tip .tip-layer { font: 500 12px var(--mono); color: var(--pc, var(--text-dim)); }
.stack-tip { width: min(300px, calc(100vw - 24px)); padding: 14px 16px 12px; }
.stack-tip .tip-head { margin-bottom: 6px; }
.stack-tip.stack::after { display: none; }
.stack-tip dl { border-top: none; padding-top: 4px; }

/* 漫画風の白い吹き出し: 太い黒の輪郭 + ずらした影 (コマの吹き出し) + 尻尾 + 右上にスクリーントーン */
.manga-tip { position: fixed; z-index: 210; width: min(400px, calc(100vw - 24px)); background: #FFFFFF; color: #16161A;
  border: 3px solid #16161A; border-radius: 30px; padding: 18px 22px 16px; box-shadow: 7px 7px 0 #16161A;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif; pointer-events: none; opacity: 0;
  transform: scale(0.9); transform-origin: var(--tx, 50%) 100%; transition: opacity .14s ease-out, transform .18s cubic-bezier(.2, 1.5, .4, 1); }
.manga-tip.down { transform-origin: var(--tx, 50%) 0; }
.manga-tip.show { opacity: 1; transform: none; }
.manga-tip::before, .manga-tip::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.manga-tip.up::before { left: var(--tx); bottom: -27px; border-width: 26px 14px 0 12px; border-color: #16161A transparent transparent transparent; }
.manga-tip.up::after { left: calc(var(--tx) + 4px); bottom: -19px; border-width: 19px 9px 0 8px; border-color: #FFFFFF transparent transparent transparent; }
.manga-tip.down::before { left: var(--tx); top: -27px; border-width: 0 14px 26px 12px; border-color: transparent transparent #16161A transparent; }
.manga-tip.down::after { left: calc(var(--tx) + 4px); top: -19px; border-width: 0 9px 19px 8px; border-color: transparent transparent #FFFFFF transparent; }
.manga-tip .tone { position: absolute; right: 10px; top: 8px; width: 120px; height: 70px; border-radius: 0 22px 0 0;
  background: radial-gradient(circle, rgba(22,22,26,0.16) 1.3px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 100% 0%, #000 20%, transparent 70%); }
.manga-head { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.manga-head .logo { --s: 34px; }
.manga-title { font-weight: 900; font-size: 24px; line-height: 1.2; letter-spacing: 0.01em; }
.manga-title small { font-size: 15px; font-weight: 700; margin-left: 4px; color: #55556A; }
.manga-body { position: relative; margin: 0; font-size: 15.5px; line-height: 1.85; font-weight: 500; }
.manga-foot { margin-top: 10px; padding-top: 8px; border-top: 2px dashed #16161A33; font-size: 13.5px; font-weight: 700; color: #3A3A48; }
.manga-foot b { font-family: var(--mono); font-size: 15px; color: #16161A; }
/* 白地で見えにくいブランド色 (白系) のロゴは濃い色に */
.manga-tip .logo[style*="--c:#EDEEF0"] { background: #16161A; }
@media (prefers-reduced-motion: reduce) { .manga-tip { transition: none; transform: none; } }
.stack-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; }
.stack-tip dt { color: var(--text-dim); }
.stack-tip dd { margin: 0; font-family: var(--mono); font-weight: 600; }
.stack-tip dd.big { font-size: 18px; color: #fff; }
.stack-tip .tip-src { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); }
.part { cursor: pointer; }
.part:focus-visible { outline: 2px solid var(--pc); outline-offset: 2px; }
.plate .plate-name { position: absolute; left: 14px; bottom: -2px; transform: translateY(100%); font: 600 13px var(--mono); color: var(--pc); white-space: nowrap; }
.stack-legend { display: grid; gap: 10px; }
.layer-row { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: default; transition: border-color .2s; }
.layer-row.hot { border-color: color-mix(in srgb, var(--pc) 70%, transparent); }
.layer-row .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); margin-top: 7px; }
.layer-row h3 { margin: 0 0 6px; font-size: 14px; color: var(--pc); font-family: var(--mono); font-weight: 500; }
.parts { display: flex; flex-wrap: wrap; gap: 6px; }
.part { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; white-space: nowrap; }
.part .logo { --s: 16px; }
.part .life { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.part .life.warn { color: var(--amber); }
.part .life.dead { color: var(--red); }
.stack-note { color: var(--text-dim); font-size: 14.5px; margin: 16px 0 0; }

@media (max-width: 860px) {
  .stack-body { grid-template-columns: 1fr; }
  .iso-stage { height: 380px; }
  .iso { width: 190px; height: 190px; transform: rotateX(56deg) rotateZ(-42deg); }
  .plate .tiles { inset: 10px; gap: 6px; }
  .plate .tile { border-radius: 9px; }
  .plate .tile .logo { --s: 24px; }
  .stack3d { padding: 14px; }
}