/* =====================================================================
   style.css — CSS filterジェネレーター ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   ===================================================================== */

/* プリセット */
.sg-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-preset {
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--sg-border, #e5e7eb);
  background: var(--sg-surface, #fff);
  color: inherit;
}
.sg-preset:hover {
  border-color: var(--sg-accent, #3b5bdb);
  color: var(--sg-accent, #3b5bdb);
}
.sg-preset--reset {
  margin-left: auto;
  color: var(--sg-muted, #777);
}

/* スライダー群 */
.sg-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 24px;
}
.sg-slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sg-slider-label {
  font-size: 0.9rem;
  font-weight: 600;
}
.sg-slider-label code {
  font-weight: 400;
  font-size: 0.82em;
  color: var(--sg-muted, #777);
}
.sg-slider-val {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--sg-accent, #3b5bdb);
  white-space: nowrap;
}
.sg-range {
  width: 100%;
  accent-color: var(--sg-accent, #3b5bdb);
}

/* drop-shadow 設定 */
.sg-shadow-field {
  border-top: 1px solid var(--sg-border, #e5e7eb);
  padding-top: var(--sg-space-3, 12px);
}
.sg-shadow-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: var(--sg-space-2, 8px);
}
.sg-shadow-ctl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--sg-muted, #555);
}
.sg-shadow-ctl .sg-input {
  width: 6.5em;
}
.sg-color {
  width: 3.4em;
  height: 2.2em;
  padding: 2px;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: 8px;
  background: var(--sg-surface, #fff);
  cursor: pointer;
}

/* プレビュー */
.sg-preview-wrap {
  display: flex;
  justify-content: center;
}
.sg-preview-tile {
  margin: 0;
  max-width: 420px;
  width: 100%;
}
/* 透明市松模様の下地（透過・drop-shadowが分かりやすい） */
.sg-sample {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background-color: #f0f2f6;
  background-image:
    linear-gradient(45deg, #dfe3ea 25%, transparent 25%, transparent 75%, #dfe3ea 75%),
    linear-gradient(45deg, #dfe3ea 25%, transparent 25%, transparent 75%, #dfe3ea 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  transition: filter 0.08s linear;
}
.sg-sample > span { position: absolute; display: block; }
/* 空（写真風グラデ） */
.sg-sample__sky {
  inset: 0;
  background: linear-gradient(180deg, #4f8cff 0%, #8ec5ff 55%, #ffd39b 100%);
}
/* 太陽 */
.sg-sample__sun {
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  top: 12%; right: 14%;
  background: radial-gradient(circle at 50% 50%, #fff7d6 0%, #ffd84d 60%, #ffb020 100%);
}
/* 丘 */
.sg-sample__hill { bottom: -10%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.sg-sample__hill--a { left: -12%; width: 80%; height: 55%; background: #2f9e6f; }
.sg-sample__hill--b { right: -12%; width: 78%; height: 42%; background: #3fbf88; }
/* 色付き図形 */
.sg-sample__square {
  width: 20%; aspect-ratio: 1; left: 12%; top: 20%;
  border-radius: 8px; transform: rotate(-12deg);
  background: linear-gradient(135deg, #ff5d73, #ff2d55);
}
.sg-sample__circle {
  width: 16%; aspect-ratio: 1; left: 30%; top: 44%;
  border-radius: 50%;
  background: linear-gradient(135deg, #9b5cff, #6a2cff);
}
/* テキスト */
.sg-sample__text {
  left: 50%; bottom: 10%; transform: translateX(-50%);
  font-size: clamp(1.4rem, 8vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  letter-spacing: .02em;
}