/* =========================================================
   nclToyTools ─ つみき こうじょう
   夢の国テーマ ステイルシート
   ========================================================= */

:root {
  /* --- パステル8色パレット（積み木マテリアルと共通・index順ローテ） --- */
  --pastel-1: #ffb3c8;
  --pastel-2: #ffd9a8;
  --pastel-3: #fff3b0;
  --pastel-4: #c8f4d8;
  --pastel-5: #b8e6ff;
  --pastel-6: #d8c8ff;
  --pastel-7: #ffc8f0;
  --pastel-8: #c8fff4;

  /* --- テーマカラー --- */
  --bg-gradient: linear-gradient(160deg, #ffeef8, #e8f4ff 45%, #fff8e8);
  --panel-bg: rgba(255, 255, 255, 0.62);
  --panel-border: rgba(255, 255, 255, 0.85);
  --card-bg: rgba(255, 255, 255, 0.72);
  --text-main: #5a4a5e;
  --text-sub: #8a7a90;
  --accent-pink: #ff9ec7;
  --accent-lavender: #c9aaff;
  --accent-blue: #9ad8ff;
  --shadow-soft: 0 8px 28px rgba(150, 110, 170, 0.18);
  --shadow-btn: 0 6px 0 rgba(200, 120, 160, 0.35);
  --radius-card: 24px;
  --radius-btn: 999px;
  --font-main: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
}

/* =========================================================
   テーマ別 :root 変数上書き（body.theme-*）
   3D側の配色は THEMES（js/themes.js）と対応させ、UIのパステル・
   アクセント色もテーマごとに塗り替える。geometryは変えない。
   ========================================================= */

body.theme-yume {
  /* 既定テーマ。:root の値と同じ（明示のため記載） */
  --bg-gradient: linear-gradient(160deg, #ffeef8, #e8f4ff 45%, #fff8e8);
  --pastel-1: #ffb3c8; --pastel-2: #ffd9a8; --pastel-3: #fff3b0; --pastel-4: #c8f4d8;
  --pastel-5: #b8e6ff; --pastel-6: #d8c8ff; --pastel-7: #ffc8f0; --pastel-8: #c8fff4;
  --accent-pink: #ff9ec7; --accent-lavender: #c9aaff; --accent-blue: #9ad8ff;
}

body.theme-muji {
  --bg-gradient: linear-gradient(160deg, #faf7f0, #f0ece2 55%, #e9e4d8);
  --pastel-1: #e8d9c3; --pastel-2: #d9c7a7; --pastel-3: #cbb08c; --pastel-4: #e5e0d5;
  --pastel-5: #d7cfc0; --pastel-6: #c9bfa8; --pastel-7: #efe9dd; --pastel-8: #bfae94;
  --accent-pink: #cbb08c; --accent-lavender: #d9c7a7; --accent-blue: #bfae94;
  --text-main: #5c4a35; --text-sub: #8a7960;
  --panel-bg: rgba(255, 253, 248, 0.72);
  --panel-border: rgba(255, 255, 255, 0.8);
  --card-bg: rgba(255, 253, 248, 0.8);
  --shadow-btn: 0 6px 0 rgba(150, 125, 95, 0.28);
}

body.theme-hero {
  --bg-gradient: linear-gradient(165deg, #3d4fa1, #6e8fe0 45%, #bcd8ff);
  --pastel-1: #ff9e9e; --pastel-2: #ffd166; --pastel-3: #6ec6ff; --pastel-4: #8ce0a1;
  --pastel-5: #b39ddb; --pastel-6: #ffab73; --pastel-7: #90caf9; --pastel-8: #f48fb1;
  --accent-pink: #ff6b6b; --accent-lavender: #6ec6ff; --accent-blue: #3d4fa1;
  --text-main: #2c3560; --text-sub: #5a6690;
  --panel-bg: rgba(235, 242, 255, 0.68);
  --panel-border: rgba(255, 255, 255, 0.85);
  --card-bg: rgba(240, 246, 255, 0.78);
  --shadow-btn: 0 6px 0 rgba(70, 90, 170, 0.35);
}

body.theme-princess {
  --bg-gradient: linear-gradient(160deg, #ffd9ec, #f3e2ff 45%, #fff4d8);
  --pastel-1: #ffc1e3; --pastel-2: #f8bbd0; --pastel-3: #e1bee7; --pastel-4: #fff0b3;
  --pastel-5: #d1c4e9; --pastel-6: #ffd6f5; --pastel-7: #ffe0ec; --pastel-8: #ffecb3;
  --accent-pink: #ff8fc7; --accent-lavender: #d1a3ea; --accent-blue: #f2b8dc;
  --panel-bg: rgba(255, 246, 251, 0.68);
  --panel-border: rgba(255, 255, 255, 0.88);
  --card-bg: rgba(255, 246, 251, 0.78);
  --shadow-btn: 0 6px 0 rgba(200, 130, 180, 0.32);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--text-main);
  background: var(--bg-gradient);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, p {
  margin: 0;
}

button {
  font-family: inherit;
}

/* =========================================================
   浮遊する空の飾り（背景装飾・操作不可）
   ========================================================= */

.sky-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floaty {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.55;
  filter: drop-shadow(0 4px 6px rgba(150, 120, 160, 0.15));
  animation: floaty-drift linear infinite;
}

.f1 { left: 6%;  top: 12%; font-size: 2.6rem; animation-duration: 26s; animation-delay: -2s; }
.f2 { left: 82%; top: 8%;  font-size: 1.6rem; animation-duration: 19s; animation-delay: -6s; }
.f3 { left: 45%; top: 6%;  font-size: 2rem;   animation-duration: 23s; animation-delay: -10s; }
.f4 { left: 90%; top: 60%; font-size: 2.4rem; animation-duration: 30s; animation-delay: -4s; }
.f5 { left: 12%; top: 70%; font-size: 1.8rem; animation-duration: 21s; animation-delay: -14s; }
.f6 { left: 68%; top: 35%; font-size: 1.4rem; animation-duration: 17s; animation-delay: -8s; }
.f7 { left: 28%; top: 85%; font-size: 2.1rem; animation-duration: 25s; animation-delay: -18s; }
.f8  { left: 20%; top: 30%; font-size: 3.2rem; animation-duration: 34s; animation-delay: -5s;  }
.f9  { left: 60%; top: 78%; font-size: 3.6rem; animation-duration: 38s; animation-delay: -20s; }
.f10 { left: 88%; top: 26%; font-size: 2.8rem; animation-duration: 29s; animation-delay: -12s; }
.f11 { left: 54%; top: 52%; font-size: 1.5rem; animation-duration: 22s; animation-delay: -16s; }

/* 雲は大きめ・やわらかめにして「ふわふわ」感を出す */
.floaty.cloudy {
  opacity: 0.72;
  filter: drop-shadow(0 6px 14px rgba(150, 120, 160, 0.18)) blur(0.4px);
}

@keyframes floaty-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(18px, -26px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* =========================================================
   レイアウト
   ========================================================= */

#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#viewWrap {
  position: relative;
  order: 0;
  flex: 1 1 auto;
  min-height: 55vh;
  overflow: hidden;
}

#viewCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

#panel {
  order: 1;
  width: 100%;
  max-height: 45vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.3rem 1.3rem 1.6rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  /* コントロールが多く内部スクロールする。macOS 等は既定でスクロールバーを
     隠すため「下が見切れて崩れている」ように見える。常時見えるバーにして
     『まだ下に続く（ダウンロード等）』ことが分かるようにする。 */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-lavender) transparent;
  overscroll-behavior: contain;
}

@media (min-width: 800px) {
  #app {
    flex-direction: row;
  }

  #panel {
    order: -1;
    /* 狭い画面では 340px を確保しつつ、広い画面ではパネルを広げて
       見出しやチップの折り返し崩れ（例: タイトルが2行に割れる）を防ぐ。 */
    width: clamp(340px, 26vw, 440px);
    /* flex 子として絶対に縮ませない。3Dビューの canvas は Retina(DPR2)で
       内部解像度の width 属性が大きくなり、放置すると flex-shrink でパネルが
       この幅より細くなる（ロード後にメニューが縮む不具合の原因）。 */
    flex: 0 0 auto;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
  }

  #viewWrap {
    order: 0;
    min-height: 100vh;
    flex: 1 1 auto;
    /* canvas の内部解像度(width属性)を基準に伸びないよう、残り幅まで
       縮めるのを許可する。overflow:hidden と合わせて溢れは描画側で吸収。 */
    min-width: 0;
  }
}

/* =========================================================
   ガラスカード（角丸・半透明・ぼかし）
   ========================================================= */

.glass-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#panel {
  background: var(--panel-bg);
}

/* WebKit/Blink（Safari・Chrome）向けの常時表示スクロールバー。
   ::-webkit-scrollbar を指定すると macOS でもオーバーレイ（自動で隠れる）
   ではなく常時見えるバーになり、スクロールできることが伝わる。 */
#panel::-webkit-scrollbar {
  width: 9px;
}

#panel::-webkit-scrollbar-track {
  background: transparent;
}

#panel::-webkit-scrollbar-thumb {
  background: var(--accent-lavender);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* =========================================================
   ロゴ
   ========================================================= */

.logo-block h1 {
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
}

.logo-block .tagline {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* =========================================================
   テーマ切替（ロゴ直下・4つの丸ボタン）
   ========================================================= */

.theme-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.theme-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  appearance: none;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #fff;
  padding: 0.5rem 0.3rem 0.45rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 0 rgba(180, 150, 190, 0.25);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.theme-btn:active {
  transform: translateY(2px);
}

.theme-emoji {
  font-size: 1.4rem;
  line-height: 1;
}

.theme-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text-sub);
  line-height: 1.2;
}

.theme-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-lavender));
  box-shadow: 0 4px 0 rgba(150, 110, 170, 0.3);
}

.theme-btn[aria-pressed="true"] .theme-label {
  color: #fff;
}

/* =========================================================
   月齢プリセット（🎂 なんさい？ カード）
   ========================================================= */

.age-cards {
  display: flex;
  gap: 0.5rem;
}

.age-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  appearance: none;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #fff;
  padding: 0.6rem 0.35rem;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  box-shadow: 0 3px 0 rgba(180, 150, 190, 0.25);
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

.age-card:active {
  transform: translateY(2px);
}

.age-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.age-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-main);
}

.age-note {
  font-size: 0.6rem;
  color: var(--text-sub);
  line-height: 1.3;
}

.age-card[aria-pressed="true"] {
  border-color: var(--accent-pink);
  background: var(--pastel-3);
}

/* =========================================================
   ボタン共通
   ========================================================= */

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-weight: 800;
  color: var(--text-main);
  background: #fff;
  padding: 0.75rem 1.1rem;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  transform: translateY(0);
}

.btn:hover:not(:disabled) {
  filter: brightness(1.04);
}

.btn:active:not(:disabled) {
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 2px 0 rgba(200, 120, 160, 0.35);
}

.btn.btn-pop {
  animation: btn-poyon 0.45s ease;
}

@keyframes btn-poyon {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12, 0.88); }
  60%  { transform: scale(0.94, 1.08); }
  80%  { transform: scale(1.03, 0.98); }
  100% { transform: scale(1); }
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-generate {
  width: 100%;
  font-size: 1.15rem;
  padding: 1.1rem 1rem;
  color: #fff;
  background: linear-gradient(120deg, var(--accent-pink), var(--accent-lavender));
  box-shadow: 0 8px 0 rgba(190, 120, 190, 0.35), var(--shadow-soft);
  text-shadow: 0 1px 3px rgba(120, 60, 100, 0.25);
}

.btn-generate:active:not(:disabled) {
  box-shadow: 0 3px 0 rgba(190, 120, 190, 0.35);
}

.btn-download {
  width: 100%;
  text-align: left;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.btn-link {
  width: 100%;
  background: linear-gradient(120deg, var(--pastel-5), var(--pastel-6));
  color: var(--text-main);
}

.btn-icon {
  flex: 0 0 auto;
  padding: 0.65rem 0.9rem;
  font-size: 1.1rem;
}

.btn-small {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  flex: 1 1 auto;
}

.btn-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* =========================================================
   スピナー（3DM 準備中…）
   ========================================================= */

.spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(90, 74, 94, 0.25);
  border-top-color: var(--text-main);
  animation: spin 0.8s linear infinite;
  flex: 0 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   コントロールブロック共通
   ========================================================= */

.control-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 0.95rem;
}

.sub-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-sub);
  margin-top: 0.3rem;
}

.value-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-btn);
  background: var(--pastel-3);
  color: var(--text-main);
  font-weight: 800;
  font-size: 0.85rem;
}

.small {
  font-size: 0.75rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* --- レンジスライダー --- */

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1.4rem;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pastel-5), var(--pastel-7));
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pastel-5), var(--pastel-7));
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-pink);
  box-shadow: 0 2px 5px rgba(150, 110, 170, 0.35);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-pink);
  box-shadow: 0 2px 5px rgba(150, 110, 170, 0.35);
}

/* =========================================================
   かたち チップ
   ========================================================= */

.cat-head {
  font-size: 0.9rem;
  font-weight: 800;
  margin-top: 0.3rem;
  cursor: pointer;
  user-select: none;
  border-radius: 12px;
  padding: 0.15rem 0.3rem;
}

.cat-head:hover {
  background: rgba(255, 255, 255, 0.5);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}

.chip {
  appearance: none;
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: var(--radius-btn);
  padding: 0.35rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  background: #fff;
  color: var(--text-main);
  box-shadow: 0 3px 0 rgba(180, 150, 190, 0.25);
  transition: transform 0.12s ease, opacity 0.15s ease, background 0.15s ease;
}

.chip:active {
  transform: translateY(2px);
}

.chip[aria-pressed="false"] {
  background: rgba(255, 255, 255, 0.35);
  color: var(--text-sub);
  opacity: 0.55;
  box-shadow: none;
}

.chip[aria-pressed="true"] {
  background: var(--chip-color, var(--pastel-1));
}

.chip:disabled {
  cursor: not-allowed;
}

/* =========================================================
   あんぜん トグル
   ========================================================= */

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.35rem 0;
}

.toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #e8dfe6;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 0.1rem;
}

.toggle-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.toggle-row input[type="checkbox"]:checked {
  background: linear-gradient(120deg, var(--accent-pink), var(--accent-lavender));
}

.toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(1rem);
}

.toggle-face {
  display: none;
}

.toggle-text {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.4;
}

.toggle-text small {
  display: block;
  font-weight: 400;
  color: var(--text-sub);
  font-size: 0.72rem;
  margin-top: 0.1rem;
}

/* ロック中の項目（月齢プリセットの安全設定）: 🔒 説明を表示しトグルをうすくする */
.toggle-text .lock-note {
  color: #b5793f;
  font-weight: 700;
}

.toggle-row.locked {
  opacity: 0.7;
}

.toggle-row.locked input[type="checkbox"] {
  cursor: not-allowed;
}

.sub-head {
  font-size: 0.9rem;
  font-weight: 800;
}

/* =========================================================
   はめごこち セグメントUI（つなげる ON時のみ表示）
   ========================================================= */

.fit-segment {
  margin-top: 0.3rem;
  padding: 0.55rem 0.65rem 0.65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
}

.fit-segment-label {
  font-weight: 800;
  color: var(--text-main);
}

.segment-row {
  display: flex;
  gap: 0.3rem;
  margin: 0.35rem 0;
}

.segment-btn {
  flex: 1 1 0;
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.3rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  background: #fff;
  color: var(--text-sub);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(180, 150, 190, 0.2);
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}

.segment-btn:active {
  transform: translateY(1px);
}

.segment-btn[aria-checked="true"] {
  background: linear-gradient(120deg, var(--accent-pink), var(--accent-lavender));
  color: #fff;
}

/* =========================================================
   シード
   ========================================================= */

.seed-row {
  display: flex;
  gap: 0.5rem;
}

.seed-row input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 2px solid rgba(200, 170, 210, 0.4);
  border-radius: var(--radius-btn);
  padding: 0.55rem 0.9rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-main);
  background: #fff;
}

/* =========================================================
   コピー トースト
   ========================================================= */

.copy-toast {
  margin-top: 0.4rem;
  text-align: center;
}

/* =========================================================
   3Dビュー上の浮遊カード
   ========================================================= */

.selected-info,
.webgl-error {
  position: absolute;
  left: 1rem;
  right: 1rem;
  max-width: 320px;
  padding: 1rem 1.1rem;
  z-index: 2;
}

/* 選択したつみきの詳細カード。ビュー左上に置く。
   以前は bottom:1rem で、縦長の画面だと最下部に離れて「下すぎて読めない」
   状態になっていたため、目線の近い上寄せに変更。 */
.selected-info {
  top: 1rem;
}

.webgl-error {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 90vw;
}

#selectedName {
  font-weight: 800;
  font-size: 1.05rem;
}

#selectedDims {
  margin-top: 0.2rem;
}

/* =========================================================
   ✨ 生成パーティクル（JS が動的生成する DOM 要素）
   ========================================================= */

.spark-particle {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  font-size: 1.2rem;
  animation: spark-pop 1s ease-out forwards;
}

@keyframes spark-pop {
  0%   { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--spark-x, 0), var(--spark-y, -60px)) scale(1.1) rotate(80deg); opacity: 0; }
}

/* =========================================================
   フッター
   ========================================================= */

.panel-footer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(200, 170, 210, 0.3);
}

/* =========================================================
   フォーカス表示（アクセシビリティ）
   ========================================================= */

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 2px;
}

/* =========================================================
   動きを減らす設定への配慮
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .floaty {
    animation: none !important;
  }

  .btn.btn-pop {
    animation: none !important;
  }

  .spark-particle {
    animation: spark-fade 1s ease-out forwards;
  }

  * {
    scroll-behavior: auto !important;
  }
}

@keyframes spark-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* =========================================================
   hidden属性の保証
   .chip-row等の display 指定が hidden のUAスタイルを上書きして
   しまわないよう、hidden は常に最優先で非表示にする。
   ========================================================= */
[hidden] {
  display: none !important;
}