/* 색 테마 5개(화이트는 무채색). 기본(하늘)은 style.css의 :root 값 그대로이고, 나머지는 하늘색 계열 변수만 바꾼다. */
:root[data-theme='pink'] {
  --sky-50: #fff5f8;
  --sky-100: #ffe6ee;
  --sky-200: #ffcadb;
  --sky-300: #ffa8c3;
  --sky-500: #f27aa0;
  --sky-600: #db5f88;
  --sky-700: #b6456c;
  --shadow-sky: rgba(219, 95, 136, 0.16);
}
:root[data-theme='mint'] {
  --sky-50: #f1fbf7;
  --sky-100: #dcf5ea;
  --sky-200: #b8ead4;
  --sky-300: #8fdcba;
  --sky-500: #3fbf8a;
  --sky-600: #2ea374;
  --sky-700: #1f7f59;
  --shadow-sky: rgba(46, 163, 116, 0.15);
}
:root[data-theme='lavender'] {
  --sky-50: #f7f5fd;
  --sky-100: #ece7fa;
  --sky-200: #d8cff5;
  --sky-300: #bcaeec;
  --sky-500: #8f7ae0;
  --sky-600: #7660c8;
  --sky-700: #5b47a3;
  --shadow-sky: rgba(118, 96, 200, 0.16);
}
:root[data-theme='white'] {
  --sky-50: #f8f8f9;
  --sky-100: #eeeef0;
  --sky-200: #dddee1;
  --sky-300: #c5c7cc;
  --sky-500: #737780;
  --sky-600: #5c6068;
  --sky-700: #43464d;
  --shadow-sky: rgba(60, 64, 72, 0.12);
}

/* ⚙ 색 테마 고르기: 동그란 견본 + 이름 */
.themes { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.theme-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 6px;
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--ink-soft);
  background: var(--white);
  border: 2px solid var(--sky-200);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.theme-pick__dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7); }
.theme-pick[data-theme-id='sky'] .theme-pick__dot { background: linear-gradient(135deg, #c3e5f7, #4fb3e8); }
.theme-pick[data-theme-id='pink'] .theme-pick__dot { background: linear-gradient(135deg, #ffcadb, #f27aa0); }
.theme-pick[data-theme-id='mint'] .theme-pick__dot { background: linear-gradient(135deg, #b8ead4, #3fbf8a); }
.theme-pick[data-theme-id='lavender'] .theme-pick__dot { background: linear-gradient(135deg, #d8cff5, #8f7ae0); }
.theme-pick[data-theme-id='white'] .theme-pick__dot { background: linear-gradient(135deg, #ffffff, #c5c7cc); border: 1px solid #c5c7cc; }
.theme-pick.is-active { color: var(--ink); border-color: var(--sky-500); background: var(--sky-100); }

/* ⚙ 돌고래 고르기: 작은 그림 + 이름 */
.mascots { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.mascot-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 3px 6px;
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--ink-soft);
  background: var(--white);
  border: 2px solid var(--sky-200);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.mascot-pick__img { display: inline-block; width: 34px; }
.mascot-pick__img:empty { width: 6px; }
.mascot-pick__img svg { display: block; width: 100%; height: auto; }
.mascot-pick.is-active { color: var(--ink); border-color: var(--sky-500); background: var(--sky-100); }
.deco__row { flex-wrap: nowrap; align-items: flex-start; }
.deco__label { flex: none; width: 48px; padding-top: 6px; font-family: var(--font-head); font-size: 15px; color: var(--ink-soft); }