/* ================================================================
   레트로 테마 덮어쓰기 — 원본 CSS는 건드리지 않는다.
   원본 <style> 뒤에 로드되어 CSS 변수만 갈아끼우는 방식이라
   이 파일 링크 한 줄을 지우면 원래 모습으로 돌아간다.
   (직원관리 theme.css와 같은 전략)

   팔레트: 크림 #FBF1E2 · 주황 #A84820 · 앰버 #F2A23A · 잉크 #26190F
   ================================================================ */

:root {
  /* 공통 배경·글자 */
  --bg: #FAF0E1;
  --bg-elev: #FFF9EF;
  --bg-sunken: #F3E2C9;
  --card-bg: #FFF9EF;
  --border: #E7D2B2;
  --text: #26190F;
  --text-dim: #8A6F55;
  --text-faint: #B79C7E;

  /* 포인트 = 레트로 주황 */
  --accent: #A84820;
  --accent-ink: #FFF6EC;
  --accent-dim: #F3DECB;
  --accent-soft: #F3DECB;
  --accent2: #2F8F6B;

  /* 상태색 — 채도 살짝 낮춘 레트로 톤 */
  --good: #2F8F6B;  --good-bg: #E2F2E9;
  --bad: #D6402A;   --bad-bg: #FBE3DC;
  --warn: #C98A16;  --warn-bg: #F8EDD2;
  --unset: #A8865C; --unset-bg: #F1E5CE;
  --many: #3E7DA6;  --many-bg: #E4EFF6;
  --hold: #C98A16;  --hold-bg: #F8EDD2;

  --shadow: 0 2px 0 rgba(168, 72, 32, .07), 0 12px 26px -14px rgba(120, 60, 20, .3);
}

/* 다크 모드도 같은 레트로 라이트 룩으로 고정 (원본의 다크 변수를 무력화) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #FAF0E1;
    --bg-elev: #FFF9EF;
    --bg-sunken: #F3E2C9;
    --card-bg: #FFF9EF;
    --border: #E7D2B2;
    --text: #26190F;
    --text-dim: #8A6F55;
    --text-faint: #B79C7E;
    --accent: #A84820;
    --accent-ink: #FFF6EC;
    --accent-dim: #F3DECB;
    --accent-soft: #F3DECB;
    --accent2: #2F8F6B;
    --good: #2F8F6B;  --good-bg: #E2F2E9;
    --bad: #D6402A;   --bad-bg: #FBE3DC;
    --warn: #C98A16;  --warn-bg: #F8EDD2;
    --shadow: 0 2px 0 rgba(168, 72, 32, .07), 0 12px 26px -14px rgba(120, 60, 20, .3);
  }
}

/* 화면 맨 위의 체크무늬 띠 — 네 앱 공통의 레트로 시그니처 */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 10px;
  z-index: 99998;
  pointer-events: none;
  background: repeating-conic-gradient(#A84820 0% 25%, #FAF0E1 0% 50%) 0 0 / 20px 20px;
}

/* 로고·제목은 허브로 가는 문 (retro.js가 클릭을 연결) */
.brand, header h1 { cursor: pointer; }
.brand:hover, header h1:hover { opacity: .85; }

/* ---- 헤더 통일: 로고 + 앱 이름 (레시피북·원가·급여) ---- */
header h1 { display: flex; align-items: center; gap: 12px; }
.cafe-logo { height: 46px; width: auto; display: block; }
.cafe-app-title {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  padding-left: 12px;
  border-left: 2.5px solid #E7D2B2;
  line-height: 1.15;
}

/* 자릿수 자동 제출이 있으니 확인 버튼은 숨긴다 (자리는 유지해 배열이 안 흐트러지게) */
#keypad button[onclick*="확인"] { visibility: hidden; }

/* ---- 비밀번호 실패: 흔들림 ---- */
@keyframes retroShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(2px); }
}
.retro-shake { animation: retroShake .5s ease; }

/* ---- 비밀번호 성공: 열쇠 연출 (정교한 SVG 자물쇠 + 빈티지 열쇠) ---- */
.retro-key-overlay {
  position: fixed; inset: 0;
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 46%, rgba(58, 38, 20, .8), rgba(22, 14, 7, .92));
  animation: rkFadeIn .18s ease;
}
@keyframes rkFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rk-scene {
  width: min(340px, 74vw);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5));
}
.rk-scene * { transform-box: view-box; }

/* 자물쇠 등장 (탄력 있게 팝) */
.rk-lock {
  transform-origin: 160px 150px;
  animation: rkPop .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes rkPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* 걸쇠: 열쇠가 돌아간 뒤 튀어 오르며 열림 */
.rk-shackle {
  transform-origin: 130px 108px;
  animation: rkShackle .32s cubic-bezier(.3, 1.8, .5, 1) 1.02s forwards;
}
@keyframes rkShackle {
  0%   { transform: rotate(0deg) translateY(0); }
  55%  { transform: rotate(-34deg) translateY(-8px); }
  100% { transform: rotate(-28deg) translateY(-6px); }
}

/* 열쇠: 오른쪽에서 미끄러져 들어와 꽂힌 뒤 스프링처럼 돌아감 */
.rk-key {
  transform-origin: 160px 146px;
  transform: translateX(200px);
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
  animation: rkKeyGo 1.05s cubic-bezier(.25, .8, .3, 1) .14s forwards;
}
@keyframes rkKeyGo {
  0%   { transform: translateX(200px) rotate(0deg); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  10%  { opacity: 1; }
  36%  { transform: translateX(0) rotate(0deg); opacity: 1; animation-timing-function: ease-out; }
  40%  { transform: translateX(-3px) rotate(0deg); opacity: 1; }   /* 꽂히는 반동 */
  52%  { transform: translateX(0) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  78%  { transform: translateX(0) rotate(82deg); opacity: 1; animation-timing-function: ease-in-out; }
  88%  { transform: translateX(0) rotate(70deg); opacity: 1; }     /* 스프링 되튐 */
  100% { transform: translateX(0) rotate(75deg); opacity: 1; }
}

/* 개방 순간의 빛무리·광선·반짝이 */
.rk-glow {
  opacity: 0;
  transform-origin: 160px 150px;
  animation: rkGlow .7s ease-out 1.02s forwards;
}
@keyframes rkGlow {
  0%   { opacity: 0; transform: scale(.5); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}
.rk-burst {
  opacity: 0;
  transform-origin: 160px 150px;
  animation: rkBurst .58s cubic-bezier(.2, .7, .3, 1) 1.06s forwards;
}
@keyframes rkBurst {
  0%   { opacity: 0; transform: scale(.4) rotate(-14deg); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.18) rotate(6deg); }
}

.retro-key-overlay.open { animation: rkOut .38s ease forwards; }
@keyframes rkOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.retro-key-overlay.open .rk-scene { animation: rkSceneOut .38s ease forwards; }
@keyframes rkSceneOut {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .retro-shake, .rk-lock, .rk-shackle, .rk-key, .rk-glow, .rk-burst,
  .retro-key-overlay, .retro-key-overlay.open .rk-scene { animation: none !important; }
}