/* 색과 글꼴 변수는 aiedustar 홈페이지에서 그대로 옮겼다. */
:root {
  color-scheme: light;
  --bg: #FFFDF8;
  --bg-alt: #FFF8E6;
  --surface: #FFFFFF;
  --surface-2: #FAF6EE;
  --ink: #231A3B;
  --ink-2: #463D60;
  --muted: #6B6482;
  --line: rgba(35, 26, 59, .10);
  --line-strong: rgba(35, 26, 59, .18);
  --star: #FFD23F;
  --star-deep: #F2A91E;
  --star-ink: #8F5D00;
  --mark: #FFD23F;
  --blush: #FF8FB8;
  --blush-ink: #B0306A;
  --lilac: #9C82FF;
  --lilac-ink: #5A3ECC;
  --live: #1E9E5E;
  --tile-butter: #FFF3C9;
  --tile-blush: #FFE8F1;
  --tile-lilac: #EFEAFF;
  --tile-ink: #231A3B;
  --tile-ink-fg: #FFF8E8;
  --btn: #231A3B;
  --btn-fg: #FFFFFF;
  --glass: rgba(255, 255, 255, .66);
  --glass-line: rgba(255, 255, 255, .9);
  --glass-edge: rgba(35, 26, 59, .07);
  --aur-1: #FFE07A;
  --aur-2: #FFC6DC;
  --aur-3: #D9CDFF;
  --dot: rgba(35, 26, 59, .12);
  --spot: rgba(255, 210, 63, .30);
  --sky: 0;
  --grain-op: .045;
  --day: block;
  --night: none;
  --shadow-sm: 0 1px 2px rgba(35, 26, 59, .06);
  --shadow-md: 0 1px 2px rgba(35, 26, 59, .05), 0 14px 34px -10px rgba(35, 26, 59, .16);
  --shadow-lg: 0 2px 4px rgba(35, 26, 59, .04), 0 32px 64px -24px rgba(35, 26, 59, .28);

  --sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --num: "Bricolage Grotesque", "Noto Sans KR", system-ui, sans-serif;
  --hand: "Nanum Pen Script", "Noto Sans KR", cursive;
  --ease: cubic-bezier(.2, .75, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #120F26;
    --bg-alt: #17132F;
    --surface: #1C1838;
    --surface-2: #241F46;
    --ink: #F7F2FF;
    --ink-2: #D7D0EE;
    --muted: #A9A1C8;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .17);
    --star: #FFD84D;
    --star-deep: #FFB938;
    --star-ink: #FFD84D;
    --mark: rgba(255, 216, 77, .36);
    --blush: #FF9BC4;
    --blush-ink: #FFA9CD;
    --lilac: #B7A3FF;
    --lilac-ink: #C7B8FF;
    --live: #4ADE80;
    --tile-butter: #2A2340;
    --tile-blush: #2C1E3D;
    --tile-lilac: #231E4A;
    --tile-ink: #FFD84D;
    --tile-ink-fg: #1B1433;
    --btn: #FFD84D;
    --btn-fg: #1B1433;
    --glass: rgba(30, 25, 60, .6);
    --glass-line: rgba(255, 255, 255, .1);
    --glass-edge: rgba(0, 0, 0, .35);
    --aur-1: rgba(255, 196, 60, .30);
    --aur-2: rgba(255, 120, 186, .22);
    --aur-3: rgba(124, 96, 255, .36);
    --dot: rgba(255, 255, 255, .09);
    --spot: rgba(255, 216, 77, .13);
    --sky: 1;
    --grain-op: .06;
    --day: none;
    --night: block;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 34px 70px -24px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #120F26;
  --bg-alt: #17132F;
  --surface: #1C1838;
  --surface-2: #241F46;
  --ink: #F7F2FF;
  --ink-2: #D7D0EE;
  --muted: #A9A1C8;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --star: #FFD84D;
  --star-deep: #FFB938;
  --star-ink: #FFD84D;
  --mark: rgba(255, 216, 77, .36);
  --blush: #FF9BC4;
  --blush-ink: #FFA9CD;
  --lilac: #B7A3FF;
  --lilac-ink: #C7B8FF;
  --live: #4ADE80;
  --tile-butter: #2A2340;
  --tile-blush: #2C1E3D;
  --tile-lilac: #231E4A;
  --tile-ink: #FFD84D;
  --tile-ink-fg: #1B1433;
  --btn: #FFD84D;
  --btn-fg: #1B1433;
  --glass: rgba(30, 25, 60, .6);
  --glass-line: rgba(255, 255, 255, .1);
  --glass-edge: rgba(0, 0, 0, .35);
  --aur-1: rgba(255, 196, 60, .30);
  --aur-2: rgba(255, 120, 186, .22);
  --aur-3: rgba(124, 96, 255, .36);
  --dot: rgba(255, 255, 255, .09);
  --spot: rgba(255, 216, 77, .13);
  --sky: 1;
  --grain-op: .06;
  --day: none;
  --night: block;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 34px 70px -24px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  word-break: keep-all;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .4em; }
p { margin: 0 0 .8em; }
.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 56px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: 20px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-fg);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.btn.soft { background: var(--tile-butter); color: var(--ink); }
.field {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
}
.field:focus { outline: 3px solid var(--spot); border-color: var(--star-deep); }
.hand { font-family: var(--hand); font-size: 1.5em; line-height: 1.2; }
.num { font-family: var(--num); }
.muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }