/* 귀여운 테마 — index.html 기본 스타일 위에 덮어쓴다. config.json 의 "theme": "cute" 일 때만 /theme.css 로 내려간다. */
@import url("https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Dodum&display=swap");

:root {
  color-scheme: light;
  --bg:#fff6ee; --card:#ffffff; --text:#4a3f55; --muted:#9a8fa6; --line:#f1e4ee;
  --accent:#8a74e8; --accent-soft:#f3efff; --on-accent:#fff; --err:#e8607a; --ok:#2fa57f;
  --accent-shade:#6a55c9; --peach:#ff8f6b; --peach-shade:#e06d49;
  --mint:#bfeee0; --peach-soft:#ffd9c7; --sun:#fff0b8; --sky:#d3ecff;
  --shadow:0 6px 0 rgba(138,116,232,.13), 0 14px 28px rgba(138,116,232,.12);
  --title-font:"Jua", "Malgun Gothic", sans-serif;
  --plain-font:"Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}

body {
  font-family:"Gowun Dodum", "Malgun Gothic", sans-serif;
  background:
    radial-gradient(circle at 8% 4%, #ffe6f1 0 110px, transparent 111px),
    radial-gradient(circle at 96% 10%, #dff6ee 0 130px, transparent 131px),
    radial-gradient(circle at 80% 98%, #e9e3ff 0 150px, transparent 151px),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
}

h1, h2, h3, button { font-family:var(--title-font); font-weight:400; }
h1 { font-size:24px; display:flex; align-items:center; gap:6px; }
h1::before { content:"🚙"; display:inline-block; animation:cute-bob 2.2s ease-in-out infinite; }
h2 { font-size:19px; }
h3 { font-size:16px; color:var(--text); margin-top:20px; }
@keyframes cute-bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-4px) rotate(3deg); } }

section { border:0; border-radius:24px; padding:18px; box-shadow:var(--shadow); margin-bottom:16px; }
#loginSec h2::before  { content:"👋 "; }
#slotSec h2::before   { content:"🔑 "; }
#searchSec h2::before { content:"🔍 "; }
#detailSec h2::before { content:"🅿️ "; }
#detailSec h3:nth-of-type(1)::before { content:"🎟️ "; }
#detailSec h3:nth-of-type(2)::before { content:"✏️ "; }

label.cap { margin-left:6px; }
input[type=text], input[type=password], input[type=date], input:not([type]), textarea {
  border:2px solid var(--line); border-radius:16px; padding:10px 14px; background:#fffdfb;
}
input:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px #e3dcff; }
input.invalid, textarea.invalid { border-color:var(--err); box-shadow:0 0 0 4px #ffe0e6; }

button {
  border-radius:999px; font-size:17px; min-height:48px;
  background:linear-gradient(180deg, #a592f5, var(--accent)); box-shadow:0 5px 0 var(--accent-shade);
  transition:transform .08s, box-shadow .08s;
}
button:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 var(--accent-shade); }
button.plain { background:#fff; color:var(--muted); box-shadow:0 2px 0 var(--line); min-height:36px; padding:4px 12px; font-size:14px; margin-left:6px; }
button.plain:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
#slotName { color:var(--accent); font-family:var(--title-font); font-weight:400; font-size:17px; }

.msg { margin-left:6px; }

/* 계정 선택 — 그룹별 색과 이모지 (config.json 의 그룹 순서 기준) */
.slot-group { border-radius:20px; padding:12px; margin-bottom:10px; background:var(--accent-soft); }
.slot-group p { display:flex; align-items:center; gap:8px; color:var(--text); }
.slot-group p::before {
  content:"🚗"; width:34px; height:34px; border-radius:12px; background:#fff; display:grid; place-items:center; font-size:19px; flex:none;
}
.slot-group:nth-child(4n+1) { background:var(--mint); }
.slot-group:nth-child(4n+2) { background:var(--peach-soft); }
.slot-group:nth-child(4n+3) { background:var(--sun); }
.slot-group:nth-child(4n+4) { background:var(--sky); }
.slot-group:nth-child(1) p::before { content:"🚌"; }
.slot-group:nth-child(2) p::before { content:"🤝"; }
.slot-group:nth-child(3) p::before { content:"🧳"; }
.slot-group:nth-child(4) p::before { content:"👷"; }
.slots button {
  background:#fff; color:var(--text); border-radius:16px; box-shadow:0 3px 0 rgba(0,0,0,.07); transition:transform .12s;
}
.slots button:hover:not(:disabled) { transform:translateY(-2px) scale(1.03); }
.slots button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.slots small { font-family:"Gowun Dodum", sans-serif; color:var(--muted); }
#slotPwdForm h3 { margin-top:14px; }

/* 차량 목록 */
ul.cars button {
  display:grid; grid-template-columns:40px 1fr; gap:0 10px; align-items:center;
  border:2px solid var(--line); border-radius:18px; box-shadow:none; background:#fff; padding:10px 12px;
  transition:transform .12s, border-color .12s;
}
ul.cars button::before {
  content:"🚗"; grid-row:1 / span 2; width:40px; height:40px; border-radius:14px; background:var(--sky);
  display:grid; place-items:center; font-size:21px;
}
ul.cars li:nth-child(3n+2) button::before { content:"🚙"; background:var(--mint); }
ul.cars li:nth-child(3n+3) button::before { content:"🚐"; background:var(--sun); }
ul.cars button:hover { transform:translateX(3px); }
ul.cars button:active:not(:disabled) { transform:translateX(3px); box-shadow:none; }
ul.cars button[aria-pressed=true] { border-color:var(--accent); background:#f7f4ff; }
ul.cars b { font:700 18px/1.2 var(--plain-font); letter-spacing:.5px; }
ul.cars b, ul.cars .muted { grid-column:2; }
ul.cars .muted { font-family:"Gowun Dodum", sans-serif; font-size:13px; }

/* 선택 차량 */
img.entry { border-radius:18px; }
dl { gap:8px 12px; background:#fbf7ff; border-radius:16px; padding:12px 14px; }
dt { font-size:13px; }
dd { font:700 15px var(--plain-font); }

/* 할인권 — 티켓 모양, 수량 선택 */
.types .type {
  position:relative; border:2px dashed #e6dbf3; border-radius:16px; background:#fff;
}
.types .name { font-family:var(--title-font); font-size:16px; }
.types small { font-family:"Gowun Dodum", sans-serif; }
.types .type.on { border:2px solid var(--peach); background:#fff4ee; }
.types .type.on::after {
  content:"✓"; position:absolute; top:-9px; right:-7px; width:24px; height:24px; border-radius:50%;
  background:var(--peach); color:#fff; display:grid; place-items:center; font-size:14px;
}
.qty button {
  background:#fff; color:var(--accent); border:2px solid #e3dcff; box-shadow:0 2px 0 #e3dcff; font-size:20px; min-height:36px;
}
.qty button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.qty output { font-family:var(--plain-font); }

#btnDiscount { background:linear-gradient(180deg, #ffab8d, var(--peach)); box-shadow:0 5px 0 var(--peach-shade); min-height:52px; font-size:19px; }
#btnDiscount:active:not(:disabled) { box-shadow:0 1px 0 var(--peach-shade); }

@media (prefers-reduced-motion: reduce) {
  h1::before { animation:none; }
  * { transition:none !important; }
}

#loginForm button { width:100%; margin-top:4px; }

/* 입력칸 높이 통일 (date 입력은 브라우저 기본 높이가 달라 어긋난다) */
input[type=text], input[type=password], input[type=date], input:not([type]) { height:48px; line-height:1.2; }
/* 할인권이 홀수 개면 마지막 한 장을 가로로 꽉 채운다 */
.types .type:last-child:nth-child(odd) { grid-column:1 / -1; }

/* 등록된 할인 */
#detailSec h3 { margin-top:20px; }
#appliedBox h3::before { content:"✅ " !important; }
ul.applied li { border:0; border-radius:16px; background:#eefaf5; padding:10px 14px; }
ul.applied b { font-family:var(--title-font); font-weight:400; font-size:16px; }
ul.applied button { background:#fff; box-shadow:0 3px 0 #f3c3cd; border:2px solid var(--err); font-size:15px; }
ul.applied button:active:not(:disabled) { transform:translateY(3px); box-shadow:none; }
.emp { background:var(--mint); color:#1d7a5f; font-family:"Gowun Dodum", sans-serif; }
#adminSec h2::before { content:"🪪 "; }
#empList b { font:700 16px var(--plain-font); display:block; }
#btnAdminClose { width:auto; justify-self:start; margin-left:0; }