/* ===== 리셋 & 기본 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --amber:    #f59e0b;
  --amber-dk: #d97706;
  --amber-lt: #fef3c7;
  --teal:     #0ea5e9;
  --green:    #22c55e;
  --red:      #ef4444;
  --orange:   #f97316;
  --purple:   #8b5cf6;
  --bg:       #fef9f0;
  --card:     #ffffff;
  --text:     #1c1917;
  --text2:    #78716c;
  --border:   #e7e5e4;
  --shadow:   0 2px 12px rgba(0,0,0,0.08);
  --radius:   16px;
}
html, body { height: 100%; font-family: 'Segoe UI','Apple SD Gothic Neo',sans-serif; background: var(--bg); color: var(--text); font-size: 15px; }

/* ===== 화면 전환 ===== */
.screen { display: flex; flex-direction: column; min-height: 100vh; }
.screen.hidden { display: none !important; }

/* ===== 공통 버튼 ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-dk));
  color: white; border: none; border-radius: 12px;
  padding: 13px 24px; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 10px rgba(245,158,11,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(245,158,11,.4); }
.btn-primary:active { transform: scale(.97); }
.btn-full { width: 100%; }
.btn-cancel { width: 100%; background: #f5f5f4; border: none; border-radius: 12px; padding: 11px; font-size: .88rem; color: var(--text2); cursor: pointer; font-family: inherit; margin-top: 8px; }

/* ===== 로딩 오버레이 ===== */
#overlay-loading {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
#overlay-loading.hidden { display: none; }
.loading-box { background: var(--card); border-radius: 20px; padding: 30px 40px; text-align: center; }
.loading-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.loading-dots span { width: 10px; height: 10px; background: var(--amber); border-radius: 50%; animation: bounce .8s infinite; }
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }
#loading-text { font-size: .85rem; color: var(--text2); }

/* ===== 토스트 ===== */
#toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #1c1917; color: white; border-radius: 10px;
  padding: 10px 20px; font-size: .82rem; z-index: 9998;
  white-space: nowrap; max-width: 90vw;
  animation: toast-in .25s ease;
}
#toast.hidden { display: none; }
@keyframes toast-in { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }

/* ===== 셋업 화면 ===== */
.setup-wrap {
  max-width: 420px; width: 100%; margin: auto; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.setup-logo { font-size: 4rem; margin-bottom: 4px; }
.setup-wrap h1 { font-size: 1.8rem; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
.setup-sub { color: var(--text2); font-size: .9rem; margin-bottom: 16px; }
.setup-card { background: var(--card); border-radius: var(--radius); padding: 24px; width: 100%; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.setup-card label { font-size: .82rem; font-weight: 600; color: var(--text2); }
.label-hint { font-weight: 400; }
.label-hint a { color: var(--teal); text-decoration: none; }
.setup-card input {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 14px;
  font-size: .9rem; font-family: inherit; background: #fafaf9; width: 100%;
  transition: border-color .15s;
}
.setup-card input:focus { outline: none; border-color: var(--amber); }
.setup-note { font-size: .75rem; color: var(--text2); text-align: center; line-height: 1.5; margin-top: 8px; }
.setup-note code { background: #f5f5f4; padding: 1px 5px; border-radius: 4px; font-size: .8rem; }

/* ===== 허브 화면 ===== */
.hub-header {
  background: linear-gradient(135deg, var(--amber), var(--amber-dk));
  color: white; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 3px 12px rgba(245,158,11,.3);
}
.hub-date { font-size: .95rem; font-weight: 700; }
.hub-week { font-size: .78rem; opacity: .85; background: rgba(255,255,255,.2); padding: 2px 10px; border-radius: 20px; }
.hub-coins { font-size: .82rem; font-weight: 600; }

.hub-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 100px; }

/* 고양이 카드 */
.cat-card {
  background: var(--card); border-radius: var(--radius);
  padding: 20px 18px 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
}
.cat-badge {
  position: absolute; top: 12px; right: 12px;
  background: #dbeafe; color: #1d4ed8;
  font-size: .65rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.cat-badge.weekend { background: #f3e8ff; color: #7c3aed; }
.cat-avatar { font-size: 3.8rem; line-height: 1; margin-bottom: 2px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.cat-name { font-size: 1rem; font-weight: 800; color: var(--text); }
.cat-status { font-size: .75rem; color: var(--text2); margin-bottom: 8px; }
.stress-row { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.stress-label { font-size: .72rem; color: var(--text2); min-width: 40px; }
.stress-bar-wrap { flex: 1; height: 10px; background: #f5f5f4; border-radius: 10px; overflow: hidden; }
.stress-bar { height: 100%; border-radius: 10px; transition: width .5s ease, background .5s ease; }
.stress-val { font-size: .72rem; font-weight: 700; min-width: 30px; text-align: right; }

/* 스탯 카드 */
.stats-card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat-icon { font-size: 1.1rem; }
.stat-name-sm { font-size: .62rem; color: var(--text2); text-align: center; }
.stat-bar-sm-wrap { width: 100%; height: 6px; background: #f5f5f4; border-radius: 6px; overflow: hidden; }
.stat-bar-sm { height: 100%; border-radius: 6px; transition: width .4s; }
.stat-val-sm { font-size: .65rem; font-weight: 700; color: var(--text); }

/* 일과 카드 */
.plan-card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.plan-row { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--text); }
.plan-dots { display: flex; gap: 4px; }
.plan-dot { width: 10px; height: 10px; border-radius: 50%; background: #e7e5e4; }
.plan-dot.done { background: var(--green); }
.plan-dot.current { background: var(--amber); }
.plan-emergency { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff7ed; border-radius: 10px; border: 1.5px solid #fed7aa; font-size: .8rem; }
.emergency-badge { background: #f97316; color: white; font-size: .62rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }

/* 액션 영역 */
.action-area { display: flex; flex-direction: column; gap: 10px; }
.btn-action { width: 100%; background: var(--card); border: 2px solid var(--amber-lt); border-radius: 14px; padding: 16px; font-size: .92rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow); color: var(--text); }
.btn-action:hover { border-color: var(--amber); background: var(--amber-lt); transform: translateY(-1px); }
.btn-action.primary { background: linear-gradient(135deg,var(--amber),var(--amber-dk)); color: white; border-color: transparent; }
.btn-action.emergency { background: linear-gradient(135deg,#f97316,#ea580c); color: white; border-color: transparent; animation: pulse-em 1.5s ease-in-out infinite; }
@keyframes pulse-em { 0%,100%{box-shadow:0 3px 10px rgba(249,115,22,.4)} 50%{box-shadow:0 6px 20px rgba(249,115,22,.7)} }

/* 긴급탈출 버튼 */
.btn-escape {
  position: fixed; bottom: 20px; right: 16px;
  background: #ef4444; color: white; border: none; border-radius: 40px;
  padding: 12px 18px; font-size: .82rem; font-weight: 700; cursor: pointer;
  font-family: inherit; box-shadow: 0 4px 14px rgba(239,68,68,.5);
  z-index: 100; transition: transform .15s;
}
.btn-escape:hover { transform: scale(1.05); }
.btn-escape.hidden { display: none; }

/* ===== 이벤트 화면 ===== */
.event-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.event-header.work { border-bottom-color: #bfdbfe; background: #eff6ff; }
.event-header.daily { border-bottom-color: #bbf7d0; background: #f0fdf4; }
.event-header.emergency { border-bottom-color: #fed7aa; background: #fff7ed; animation: pulse-bg 2s ease-in-out infinite; }
@keyframes pulse-bg { 0%,100%{background:#fff7ed} 50%{background:#ffedd5} }
.back-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 4px; color: var(--text2); }
.event-header-info { flex: 1; }
.event-type-label { font-size: .7rem; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.event-npc-name { font-size: .95rem; font-weight: 700; color: var(--text); }
.event-npc-emoji { font-size: 1.8rem; }

.situation-box { background: #fafaf9; border-bottom: 1px solid var(--border); padding: 10px 16px; }
.situation-box p { font-size: .78rem; color: var(--text2); line-height: 1.5; }

.chat-area { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 120px; }

/* 채팅 말풍선 */
.chat-bubble-wrap { display: flex; gap: 8px; align-items: flex-end; max-width: 85%; }
.chat-bubble-wrap.npc { align-self: flex-start; }
.chat-bubble-wrap.user { align-self: flex-end; flex-direction: row-reverse; }
.bubble-avatar { font-size: 1.4rem; flex-shrink: 0; }
.bubble-content { display: flex; flex-direction: column; gap: 3px; }
.bubble-name { font-size: .65rem; color: var(--text2); }
.bubble-wrap.user .bubble-name { text-align: right; }
.bubble-text {
  padding: 10px 14px; border-radius: 16px; font-size: .85rem; line-height: 1.5;
}
.chat-bubble-wrap.npc .bubble-text { background: #f5f5f4; border-bottom-left-radius: 4px; }
.chat-bubble-wrap.user .bubble-text { background: var(--amber); color: white; border-bottom-right-radius: 4px; }
.bubble-text.thinking { color: var(--text2); font-style: italic; animation: blink .8s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* 채팅 입력 */
.chat-input-wrap {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  background: var(--card); border-top: 1px solid var(--border);
  padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end;
  box-shadow: 0 -4px 12px rgba(0,0,0,.06);
}
#chat-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 10px 14px; font-size: .88rem; font-family: inherit; resize: none;
  max-height: 100px; overflow-y: auto; line-height: 1.4;
  transition: border-color .15s;
}
#chat-input:focus { outline: none; border-color: var(--amber); }
.btn-send {
  background: var(--amber); color: white; border: none; border-radius: 10px;
  padding: 10px 16px; font-size: .88rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s; white-space: nowrap;
}
.btn-send:hover { background: var(--amber-dk); }
.btn-send:disabled { background: #d6d3d1; cursor: not-allowed; }

/* ===== 하루 마감 화면 ===== */
.day-end-wrap { max-width: 420px; width: 100%; margin: auto; padding: 32px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.day-end-header { text-align: center; margin-bottom: 8px; }
.day-end-emoji { font-size: 3.5rem; margin-bottom: 8px; }
.day-end-header h2 { font-size: 1.4rem; font-weight: 800; }
.day-end-header p { font-size: .78rem; color: var(--text2); margin-top: 4px; }

.result-card { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.result-label { font-size: .75rem; font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.result-stars { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.event-star-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .7rem; color: var(--text2); }
.star-row { font-size: 1rem; }
.no-event { font-size: .82rem; color: var(--text2); }

.stress-change-card { background: var(--card); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); font-size: .88rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.stress-up { color: var(--red); }
.stress-down { color: var(--green); }

.stat-changes-card { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat-change-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: .82rem; border-bottom: 1px solid #f5f5f4; }
.stat-change-row:last-child { border: none; }
.stat-change-plus { color: var(--green); font-weight: 700; }
.stat-change-minus { color: var(--red); font-weight: 700; }

/* ===== 주간 평가 화면 ===== */
.week-end-wrap { max-width: 420px; width: 100%; margin: auto; padding: 32px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.week-end-header { text-align: center; margin-bottom: 8px; }
.week-end-emoji { font-size: 3rem; margin-bottom: 8px; }
.week-end-header h2 { font-size: 1.4rem; font-weight: 800; }

.week-stars-card { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.week-star-row { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; }

.hr-review-card { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.hr-review-body { font-size: .85rem; color: var(--text); line-height: 1.7; margin-top: 8px; }

.salary-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: .9rem;
  border: 1.5px solid var(--amber);
  animation: salary-glow 1s ease-in-out infinite;
}
@keyframes salary-glow { 0%,100%{box-shadow:0 3px 12px rgba(245,158,11,.3)} 50%{box-shadow:0 6px 20px rgba(245,158,11,.6)} }
.salary-amount { color: var(--amber-dk); font-size: 1.1rem; }
.salary-card.hidden { display: none; }

/* ===== 모달 ===== */
.modal-wrap { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-end; justify-content: center; }
.modal-wrap.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.modal-box {
  position: relative; z-index: 501;
  background: var(--card); border-radius: 24px 24px 0 0;
  padding: 24px 20px 36px; width: 100%; max-width: 480px;
  animation: slide-up .3s cubic-bezier(.34,1.2,.64,1);
}
@keyframes slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-box h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.modal-sub { font-size: .78rem; color: var(--text2); margin-bottom: 16px; }

/* 긴급탈출 옵션 */
.escape-option {
  width: 100%; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  transition: all .15s;
}
.escape-option:hover { border-color: var(--amber); background: var(--amber-lt); }
.escape-option:disabled { opacity: .4; cursor: not-allowed; }
.escape-left { display: flex; flex-direction: column; gap: 2px; }
.escape-name { font-size: .9rem; font-weight: 700; }
.escape-desc { font-size: .72rem; color: var(--text2); }
.escape-cost { font-size: .85rem; font-weight: 700; color: var(--amber-dk); }

/* 이벤트 결과 모달 */
.result-outcome { font-size: 2.5rem; text-align: center; margin-bottom: 8px; }
.modal-box #result-outcome-title { font-size: 1.1rem; text-align: center; margin-bottom: 8px; }
.result-stars-big { text-align: center; font-size: 1.5rem; letter-spacing: 4px; margin-bottom: 10px; }
.result-feedback { font-size: .85rem; color: var(--text); line-height: 1.6; background: #fafaf9; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.result-stat-changes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.stat-chip { font-size: .72rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.stat-chip.plus { background: #dcfce7; color: #15803d; }
.stat-chip.minus { background: #fee2e2; color: #b91c1c; }

/* ===== 반응형 ===== */
@media (max-width: 380px) {
  .hub-body { padding: 10px 10px 90px; gap: 10px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cat-avatar { font-size: 3.2rem; }
}
@media (min-width: 480px) {
  .screen { max-width: 480px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.1); }
  .chat-input-wrap { left: 50%; transform: translateX(-50%); }
}