html, body {
  margin: 0;
  background: oklch(0.975 0.012 85);
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

a {
  color: oklch(0.55 0.16 255);
  text-decoration: none;
}
a:hover {
  color: oklch(0.45 0.16 255);
}

::-webkit-scrollbar {
  height: 0;
  width: 0;
}

#app {
  font-family: 'Zen Maru Gothic', system-ui, sans-serif;
  color: oklch(0.26 0.02 280);
  background: oklch(0.975 0.012 85);
  min-height: 100%;
  padding-bottom: 80px;
}

/* ---- 表示幅（スマホ既定 / ワイド） ---- */
.sc-wrap {
  max-width: 520px;
  margin: 0 auto;
}

.sc-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-rgrid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ワイド表示：段組みで縦横に敷き詰める */
#app[data-wide="1"] .sc-wrap {
  max-width: 1840px;
}

#app[data-wide="1"] .sc-sections,
#app[data-wide="1"] .sc-rgrid {
  display: block;
  columns: 340px;
  column-gap: 12px;
}

#app[data-wide="1"] .sc-sections > *,
#app[data-wide="1"] .sc-rgrid > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 12px;
  width: 100%;
  vertical-align: top;
}

#app[data-wide="1"] .sc-sections > section {
  display: inline-block;
}

#app[data-wide="1"] .sc-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
}

.sc-active-btn:active {
  transform: scale(0.94);
}
.sc-totop:active {
  transform: scale(0.9);
}

.sc-dash {
  animation: dash 1.6s ease-in-out infinite alternate;
}

.sc-hl {
  background: oklch(0.90 0.15 95);
  color: oklch(0.24 0.02 280);
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 700;
}

.sc-result:hover {
  border-color: oklch(0.80 0.03 85);
}

.sc-flash {
  animation: flash 1.2s ease;
}

/* 検索欄の×印(iOS Safari の既定の消去ボタン)は自前のボタンと重なるので隠す */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

@keyframes flash {
  0% { box-shadow: 0 0 0 0 oklch(0.75 0.16 95 / 0.85); }
  100% { box-shadow: 0 0 0 12px oklch(0.75 0.16 95 / 0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.96) translateY(8px); }
  60% { transform: scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes dash {
  from { opacity: .25; }
  to { opacity: 1; }
}