/* 함평 나비 수호대 — "캐릭터 가이드북 · 스티커북" 디자인 시스템 (제안)
   · 따뜻한 크림 종이 + 파스텔 탭 + 얇은 코코아 선 + 동글동글 손그림
   · 모든 변수는 --cu-* 로 이름을 붙여 기존 common.css 변수(--ink 등)와 겹치지 않아요.
   · 클래스도 .cute-* / .tab-label / .sticker / .bubble / .badge-num / .btn-cute / .chip-cute / .hud-pill / .deco 로만 만들어
     기존 게임 화면(.card, .pill, .big-btn …)을 건드리지 않아요. */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Poor+Story&family=Noto+Sans+KR:wght@500;700;900&display=swap');

:root {
  /* 종이 · 잉크 */
  --cu-paper: #FFF8EC;
  --cu-paper-2: #FFFBF3;
  --cu-paper-3: #F8EBD6;      /* 오목한 칸 · 트랙 */
  --cu-card: #FFFDF8;
  --cu-line: #5B4636;         /* 얇은 코코아 외곽선 */
  --cu-ink: #4A3A2C;          /* 본문 글자 (1학년도 읽기 쉽게 진하게) */
  --cu-ink-2: #6E5A4A;
  --cu-ink-3: #9C8774;
  --cu-dot: rgba(91, 70, 54, .085);

  /* 파스텔 5색 (+ 진한 받침색 · 글자색) */
  --cu-lav: #C9B8F5;   --cu-lav-d: #A992EC;   --cu-lav-ink: #54409C;   --cu-lav-l: #EEE8FF;
  --cu-mint: #BDE8D3;  --cu-mint-d: #8DD2B1;  --cu-mint-ink: #22704E;  --cu-mint-l: #E6F7EE;
  --cu-butter: #FFE7A1; --cu-butter-d: #F4C95E; --cu-butter-ink: #7C5600; --cu-butter-l: #FFF5D6;
  --cu-peach: #FFC9D6; --cu-peach-d: #F49AB2; --cu-peach-ink: #A8385C;  --cu-peach-l: #FFEBF0;
  --cu-sky: #C3E4FF;   --cu-sky-d: #8EC6F4;   --cu-sky-ink: #23649E;   --cu-sky-l: #E8F4FF;
  --cu-coral: #FFA79C; --cu-coral-d: #F07F72;
  --cu-blush: #FFB3C2;

  /* 글꼴: 제목은 동글 Jua · 말풍선은 손글씨 Poor Story(Gaegu보다 글자 크기가 고르고 또렷) · 본문은 Noto Sans KR 700 */
  --cu-display: 'Jua', 'Noto Sans KR', system-ui, sans-serif;
  --cu-hand: 'Poor Story', 'Gaegu', 'Jua', 'Noto Sans KR', sans-serif;
  --cu-body: 'Noto Sans KR', system-ui, -apple-system, sans-serif;

  /* 모양 */
  --cu-lw: 2px;
  --cu-r-sm: 14px;
  --cu-r: 20px;
  --cu-r-lg: 26px;
  --cu-shadow: 0 3px 0 rgba(91, 70, 54, .10), 0 12px 26px -8px rgba(91, 70, 54, .22);
  --cu-shadow-lift: 0 5px 0 rgba(91, 70, 54, .12), 0 18px 34px -10px rgba(91, 70, 54, .3);
  --cu-press: 0 5px 0 var(--cu-line);
  --cu-paper-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .27  0 0 0 0 .21  0 0 0 .05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ───────── 페이지 · 종이 ───────── */
.cute-page {
  background-color: var(--cu-paper);
  background-image: var(--cu-paper-tex), radial-gradient(var(--cu-dot) 1.4px, transparent 1.6px);
  background-size: 160px 160px, 24px 24px;
  color: var(--cu-ink);
  font-family: var(--cu-body);
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}
.cute-page ::selection { background: var(--cu-butter); }
.cute-page a { color: var(--cu-lav-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cute-page a:hover { color: var(--cu-peach-ink); }
.cute-paper { background: var(--cu-paper-2); }

/* 제목 글자 */
.cute-display { font-family: var(--cu-display); font-weight: 400; letter-spacing: -.01em; }
.hand { font-family: var(--cu-hand); font-weight: 400; }
.cute-title {
  font-family: var(--cu-display); font-weight: 400; line-height: 1.05; margin: 0; color: #fff;
  --o: var(--cu-line); --t: 3px;
  text-shadow:
    var(--t) 0 0 var(--o), calc(var(--t) * -1) 0 0 var(--o), 0 var(--t) 0 var(--o), 0 calc(var(--t) * -1) 0 var(--o),
    2px 2px 0 var(--o), -2px -2px 0 var(--o), 2px -2px 0 var(--o), -2px 2px 0 var(--o),
    0 calc(var(--t) + 4px) 0 var(--o);
}
.cute-title .c-lav { color: var(--cu-lav); } .cute-title .c-mint { color: var(--cu-mint); } .cute-title .c-butter { color: var(--cu-butter); }
.cute-title .c-peach { color: var(--cu-peach); } .cute-title .c-sky { color: var(--cu-sky); }
.cute-h2 { font-family: var(--cu-display); font-weight: 400; font-size: 28px; color: var(--cu-line); margin: 0; line-height: 1.2; }
.cute-lead { font-size: 19px; color: var(--cu-ink-2); margin: 0; }
.hl { background: linear-gradient(transparent 58%, var(--hl, var(--cu-butter)) 58%, var(--hl, var(--cu-butter)) 92%, transparent 92%); padding: 0 .1em; }
.hl.mint { --hl: var(--cu-mint); } .hl.peach { --hl: var(--cu-peach); } .hl.lav { --hl: var(--cu-lav); } .hl.sky { --hl: var(--cu-sky); }

/* ───────── 카드 ───────── */
.cute-card {
  position: relative; background: var(--cu-card); color: var(--cu-ink);
  border: var(--cu-lw) solid var(--cu-line); border-radius: var(--cu-r);
  padding: 18px 20px; box-shadow: var(--cu-shadow);
}
.cute-card.is-dashed { border-style: dashed; box-shadow: none; background: rgba(255, 253, 248, .7); }
.cute-card.is-soft { border-color: rgba(91, 70, 54, .28); }
.cute-card.is-lav { background: var(--cu-lav-l); } .cute-card.is-mint { background: var(--cu-mint-l); }
.cute-card.is-butter { background: var(--cu-butter-l); } .cute-card.is-peach { background: var(--cu-peach-l); }
.cute-card.is-sky { background: var(--cu-sky-l); }
.cute-card.is-tap { cursor: pointer; transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s; }
.cute-card.is-tap:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--cu-shadow-lift); }
.cute-card.is-tap:active { transform: translateY(1px) scale(.985); box-shadow: 0 1px 0 rgba(91, 70, 54, .14); }
.cute-card.is-tap:focus-visible { outline: 3px dashed var(--cu-lav-d); outline-offset: 4px; }
.cute-card.has-tab { margin-top: 18px; padding-top: 30px; }
.cute-card.has-tab > .tab-label:first-child { position: absolute; left: 18px; top: 0; transform: translateY(-55%); }
.tilt-l { transform: rotate(-1.6deg); } .tilt-r { transform: rotate(1.4deg); }

/* 마스킹테이프 (카드 모서리 장식) */
.tape {
  position: absolute; width: 82px; height: 24px; top: -11px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), var(--tape, var(--cu-butter));
  opacity: .88; border-radius: 3px; box-shadow: 0 1px 2px rgba(91, 70, 54, .15); pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
          mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
}
.tape.lav { --tape: var(--cu-lav); } .tape.mint { --tape: var(--cu-mint); } .tape.peach { --tape: var(--cu-peach); } .tape.sky { --tape: var(--cu-sky); }
.tape.left { left: 22px; transform: rotate(-8deg); } .tape.right { left: auto; right: 22px; transform: rotate(7deg); }

/* ───────── 탭 라벨 (섹션 머리표) ───────── */
.tab-label {
  --tab: var(--cu-lav);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--cu-display); font-weight: 400; font-size: 21px; line-height: 1; color: var(--cu-line);
  background: var(--tab); border: var(--cu-lw) solid var(--cu-line); border-radius: 999px;
  padding: 9px 18px 8px; box-shadow: 0 3px 0 var(--cu-line);
}
.tab-label.lav { --tab: var(--cu-lav); } .tab-label.mint { --tab: var(--cu-mint); } .tab-label.butter { --tab: var(--cu-butter); }
.tab-label.peach { --tab: var(--cu-peach); } .tab-label.sky { --tab: var(--cu-sky); } .tab-label.cream { --tab: var(--cu-card); }
.tab-label.lg { font-size: 27px; padding: 11px 22px 10px; }
.tab-label .num {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  background: var(--cu-card); border: var(--cu-lw) solid var(--cu-line); font-size: .78em; margin-left: -6px;
}
.tab-label small { font-family: var(--cu-body); font-weight: 700; font-size: .62em; opacity: .85; }
/* 폴더형 탭: 카드 위에 붙는 모양 */
.tab-label.folder { border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: none; padding-bottom: 10px; }

/* ───────── 스티커 · 칩 ───────── */
.sticker {
  --st: var(--cu-card);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: var(--cu-display); font-weight: 400; font-size: 17px; line-height: 1; color: var(--cu-line);
  background: var(--st); border: var(--cu-lw) solid var(--cu-line); border-radius: 12px; padding: 6px 10px 5px;
  box-shadow: 0 0 0 3px #fff, 0 3px 0 3px rgba(91, 70, 54, .18);
  transform: rotate(var(--rot, -3deg));
}
.sticker.lav { --st: var(--cu-lav); } .sticker.mint { --st: var(--cu-mint); } .sticker.butter { --st: var(--cu-butter); }
.sticker.peach { --st: var(--cu-peach); } .sticker.sky { --st: var(--cu-sky); }
.sticker.new { --st: var(--cu-peach); --rot: 6deg; }
.sticker.round { border-radius: 50%; width: 64px; height: 64px; justify-content: center; text-align: center; font-size: 15px; line-height: 1.05; padding: 4px; white-space: normal; }
.sticker.tilt-r { --rot: 4deg; }

.chip-cute {
  --ch: var(--cu-paper-3);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: var(--cu-body); font-weight: 700; font-size: 14.5px; line-height: 1.2; color: var(--cu-ink);
  background: var(--ch); border: 1.5px solid rgba(91, 70, 54, .38); border-radius: 999px; padding: 4px 11px;
}
.chip-cute.lav { --ch: var(--cu-lav-l); color: var(--cu-lav-ink); } .chip-cute.mint { --ch: var(--cu-mint-l); color: var(--cu-mint-ink); }
.chip-cute.butter { --ch: var(--cu-butter-l); color: var(--cu-butter-ink); } .chip-cute.peach { --ch: var(--cu-peach-l); color: var(--cu-peach-ink); }
.chip-cute.sky { --ch: var(--cu-sky-l); color: var(--cu-sky-ink); }
.chip-cute.ai::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--cu-lav-d); box-shadow: 0 0 0 1.5px var(--cu-line); }

/* ───────── 말풍선 ───────── */
.bubble {
  --bb: var(--cu-card);
  position: relative; display: inline-block; max-width: 22em;
  font-family: var(--cu-hand); font-weight: 400; font-size: 23px; line-height: 1.25; color: var(--cu-ink);
  background: var(--bb); border: var(--cu-lw) solid var(--cu-line); border-radius: 20px; padding: 10px 16px 9px;
  box-shadow: 0 3px 0 rgba(91, 70, 54, .14);
}
.bubble::after {
  content: ''; position: absolute; width: 16px; height: 16px; background: var(--bb);
  border: var(--cu-lw) solid var(--cu-line); border-top: 0; border-left: 0;
  left: 26px; bottom: -9px; transform: rotate(45deg) skew(8deg, 8deg); border-bottom-right-radius: 4px;
}
.bubble.tail-right::after { left: auto; right: 26px; }
.bubble.tail-left::after { left: -9px; top: 50%; bottom: auto; margin-top: -8px; transform: rotate(135deg); }
.bubble.tail-rside::after { left: auto; right: -9px; top: 50%; bottom: auto; margin-top: -8px; transform: rotate(-45deg); }
.bubble.tail-top::after { top: -9px; bottom: auto; transform: rotate(-135deg); }
.bubble.lav { --bb: var(--cu-lav-l); } .bubble.mint { --bb: var(--cu-mint-l); } .bubble.butter { --bb: var(--cu-butter-l); }
.bubble.peach { --bb: var(--cu-peach-l); } .bubble.sky { --bb: var(--cu-sky-l); }
.bubble.body { font-family: var(--cu-body); font-size: 18px; }

/* ───────── 숫자 배지 (BEST 3 등) ───────── */
.badge-num {
  --bn: var(--cu-butter);
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  font-family: var(--cu-display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--cu-line);
  background: var(--bn); border: var(--cu-lw) solid var(--cu-line); box-shadow: 0 3px 0 var(--cu-line);
}
.badge-num::before { /* 작은 왕관 반짝이 */
  content: ''; position: absolute; top: -9px; right: -7px; width: 18px; height: 18px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 3C21 14 26 19 37 20C26 21 21 26 20 37C19 26 14 21 3 20C14 19 19 14 20 3Z' fill='%23FFF' stroke='%235B4636' stroke-width='3' stroke-linejoin='round'/></svg>");
}
.badge-num.n2 { --bn: var(--cu-sky); } .badge-num.n3 { --bn: var(--cu-peach); }
.badge-num.sm { width: 36px; height: 36px; font-size: 19px; }
.badge-num.sm::before { width: 13px; height: 13px; top: -6px; right: -5px; }
.badge-best {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--cu-display); font-size: 15px; color: var(--cu-line);
  background: var(--cu-butter); border: var(--cu-lw) solid var(--cu-line); border-radius: 8px; padding: 3px 9px 2px; transform: rotate(-4deg);
}

/* ───────── 버튼 (아이 손가락 크기: 최소 64px) ───────── */
.btn-cute {
  --bt: var(--cu-butter); --bt-d: var(--cu-line);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 12px 30px; border-radius: 999px; cursor: pointer;
  font-family: var(--cu-display); font-weight: 400; font-size: 25px; line-height: 1.1; color: var(--cu-line); text-decoration: none;
  background: var(--bt); border: var(--cu-lw) solid var(--cu-line); box-shadow: 0 5px 0 var(--bt-d);
  transition: transform .08s, box-shadow .08s, filter .15s; -webkit-tap-highlight-color: transparent; user-select: none;
  position: relative; isolation: isolate;
}
.btn-cute::after { /* 위쪽 반짝 하이라이트 */
  content: ''; position: absolute; left: 18%; right: 18%; top: 4px; height: 20%; border-radius: 999px;
  background: rgba(255, 255, 255, .5); z-index: -1; pointer-events: none;
}
.btn-cute:hover { filter: brightness(1.03) saturate(1.05); }
.btn-cute:active, .btn-cute.is-pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--bt-d); }
.btn-cute:focus-visible { outline: 3px dashed var(--cu-lav-d); outline-offset: 5px; }
.btn-cute:disabled, .btn-cute.is-disabled { filter: grayscale(.7) opacity(.55); cursor: default; transform: none; }
.btn-cute.lav { --bt: var(--cu-lav); } .btn-cute.mint { --bt: var(--cu-mint); } .btn-cute.butter { --bt: var(--cu-butter); }
.btn-cute.peach { --bt: var(--cu-peach); } .btn-cute.sky { --bt: var(--cu-sky); } .btn-cute.cream { --bt: var(--cu-card); }
.btn-cute.cocoa { --bt: var(--cu-line); --bt-d: #3A2C21; color: var(--cu-paper); }
.btn-cute.cocoa::after { background: rgba(255, 255, 255, .12); }
.btn-cute.sm { min-height: 48px; font-size: 19px; padding: 8px 20px; box-shadow: 0 4px 0 var(--bt-d); }
.btn-cute.lg { min-height: 80px; font-size: 32px; padding: 14px 44px; box-shadow: 0 6px 0 var(--bt-d); }
.btn-cute.xl { min-height: 100px; font-size: 42px; padding: 16px 64px; box-shadow: 0 7px 0 var(--bt-d); }
.btn-cute.icon { width: 64px; padding: 0; font-size: 28px; }
.btn-cute.icon.sm { width: 48px; font-size: 22px; }
.btn-cute.block { display: flex; width: 100%; }
.btn-cute .ico { font-size: 1.1em; line-height: 1; }
.btn-cute svg.mascot { margin: -10px 0 -10px -12px; flex: 0 0 auto; }

/* 선택 알약 (학년 · 필터) */
.pick {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 20px; border-radius: 999px; cursor: pointer;
  font-family: var(--cu-display); font-size: 21px; color: var(--cu-line); background: var(--cu-card);
  border: var(--cu-lw) solid var(--cu-line); box-shadow: 0 3px 0 rgba(91, 70, 54, .3); transition: transform .1s, background .15s;
}
.pick:active { transform: translateY(2px); }
.pick.on { background: var(--pick-on, var(--cu-butter)); box-shadow: 0 4px 0 var(--cu-line); transform: translateY(-2px); }
.pick.on::before { content: '✓'; font-family: var(--cu-body); font-weight: 900; font-size: .8em; }
.pick:focus-visible { outline: 3px dashed var(--cu-lav-d); outline-offset: 3px; }

/* ───────── 게임 HUD ───────── */
.cute-hud { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cute-hud .spacer { flex: 1; }
.hud-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--cu-display); font-size: 20px; line-height: 1; color: var(--cu-line);
  background: var(--hp, var(--cu-card)); border: var(--cu-lw) solid var(--cu-line); border-radius: 999px; padding: 7px 14px 6px;
  box-shadow: 0 3px 0 rgba(91, 70, 54, .25);
}
.hud-pill b { font-weight: 400; font-size: 1.12em; }
.hud-pill.lav { --hp: var(--cu-lav); } .hud-pill.mint { --hp: var(--cu-mint); } .hud-pill.butter { --hp: var(--cu-butter); }
.hud-pill.peach { --hp: var(--cu-peach); } .hud-pill.sky { --hp: var(--cu-sky); }
.hud-pill.cocoa { --hp: var(--cu-line); color: var(--cu-paper); }
.hud-pill.combo { --hp: linear-gradient(180deg, #FFD9A8, #FFB37A); }
.hud-pill.pop { animation: cuPop .4s; }
.hud-hearts { display: inline-flex; gap: 2px; }
.hud-hearts svg.doodle.off { filter: grayscale(1) opacity(.35); }

/* 진행 막대 (타이머 · 체력) */
.cute-meter { height: 20px; border-radius: 999px; background: var(--cu-paper-3); border: var(--cu-lw) solid var(--cu-line); overflow: hidden; position: relative; }
.cute-meter > i {
  display: block; height: 100%; width: var(--v, 50%); border-radius: 999px; transition: width .25s;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 7px, transparent 7px 14px), var(--mt, var(--cu-mint-d));
  box-shadow: inset 0 -3px 0 rgba(91, 70, 54, .12);
}
.cute-meter.warn > i { --mt: var(--cu-coral); }
.cute-meter.butter > i { --mt: var(--cu-butter-d); } .cute-meter.lav > i { --mt: var(--cu-lav-d); } .cute-meter.sky > i { --mt: var(--cu-sky-d); }

/* ───────── 토스트 · 오버레이 ───────── */
.cute-toast {
  position: fixed; top: 22px; left: 50%; z-index: 60; display: inline-flex; align-items: center; gap: 10px;
  max-width: min(92vw, 640px); width: max-content; text-align: center;
  font-family: var(--cu-display); font-size: clamp(20px, 3vh, 28px); line-height: 1.25; color: var(--cu-line);
  background: var(--tt, var(--cu-card)); border: var(--cu-lw) solid var(--cu-line); border-radius: 999px; padding: 10px 24px 10px 12px;
  box-shadow: 0 4px 0 var(--cu-line), 0 14px 30px -8px rgba(91, 70, 54, .35);
  transform: translate(-50%, -30px) scale(.7); opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.2, 1.5, .4, 1), opacity .2s;
}
.cute-toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.cute-toast.static { position: relative; top: auto; left: auto; transform: none; opacity: 1; max-width: 100%; width: auto; text-align: left; }
.cute-toast.good { --tt: var(--cu-mint); } .cute-toast.oops { --tt: var(--cu-peach); } .cute-toast.ai { --tt: var(--cu-lav); } .cute-toast.gold { --tt: var(--cu-butter); }
.cute-toast svg.mascot { margin: -14px 0 -14px -4px; }

.cute-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 20px; text-align: center; overflow: auto;
  background: radial-gradient(rgba(91, 70, 54, .08) 1.4px, transparent 1.6px) 0 0 / 24px 24px, rgba(255, 248, 236, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cute-overlay.is-cocoa { background: radial-gradient(rgba(255, 248, 236, .07) 1.4px, transparent 1.6px) 0 0 / 24px 24px, rgba(62, 45, 33, .74); }
.cute-overlay.is-static { position: relative; inset: auto; z-index: auto; border-radius: var(--cu-r-lg); }

/* ───────── 단계 그림 (1 → 2 → 3) ───────── */
.cute-steps { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
.cute-step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; text-align: center; max-width: 150px; }
.cute-step .badge-num { width: 34px; height: 34px; font-size: 18px; box-shadow: 0 2px 0 var(--cu-line); }
.cute-step .badge-num::before { display: none; }
.cute-step b { font-family: var(--cu-display); font-weight: 400; font-size: 19px; color: var(--cu-line); }
.cute-step small { font-size: 14px; color: var(--cu-ink-2); }
.cute-step-arrow { align-self: center; width: 34px; height: 34px; flex: 0 0 auto; opacity: .75; }

/* ───────── 두들 장식 ───────── */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco.bob { animation: cuBob 3.2s ease-in-out infinite; }
.deco.bob.d2 { animation-delay: -1.1s; } .deco.bob.d3 { animation-delay: -2.2s; }
.deco.twinkle { animation: cuTwinkle 2.4s ease-in-out infinite; }
.deco.spin { animation: cuSpin 9s linear infinite; }
svg.mascot.bob { animation: cuBob 3s ease-in-out infinite; }
svg.mascot.wiggle { animation: cuWiggle 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
svg.mascot.hop { animation: cuHop 1.4s cubic-bezier(.3, 0, .5, 1) infinite; transform-origin: 50% 100%; }
.cute-divider { border: 0; height: 12px; margin: 22px 0; background: radial-gradient(circle, rgba(91, 70, 54, .35) 2.4px, transparent 2.8px) 0 50% / 16px 12px repeat-x; }
.doodle-row { display: inline-flex; gap: 6px; align-items: center; }

@keyframes cuBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cuTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.75) rotate(20deg); opacity: .7; } }
@keyframes cuSpin { to { transform: rotate(360deg); } }
@keyframes cuWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes cuHop { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.06, .92); } 45% { transform: translateY(-16px) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.04, .95); } }
@keyframes cuPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .deco.bob, .deco.twinkle, .deco.spin, svg.mascot.bob, svg.mascot.wiggle, svg.mascot.hop, .hud-pill.pop { animation: none !important; }
  .cute-card.is-tap, .btn-cute, .cute-toast { transition: none; }
}