/* ═══════════════════════════════════════════════════════════════════════════
   JJIKGO Daily Cleanliness Checker — Styles
   Dark luxury theme · Mobile-first · Gold accent #C9A84C
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0A0A0A;
  --surface: #1A1A1A;
  --surface2: #242424;
  --gold: #C9A84C;
  --gold-dim: #A88D3E;
  --text: #FFFFFF;
  --text2: #888888;
  --text3: #5A5A5A;
  --danger: #E74C3C;
  --danger-bg: #3D1515;
  --success: #2ECC71;
  --success-bg: #153D1F;
  --warning: #F39C12;
  --warning-bg: #3D2F15;
  --radius: 8px;
  --radius-lg: 12px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

input, textarea, select, button { font-family: inherit; font-size: inherit; }

button { cursor: pointer; border: none; outline: none; }

input, textarea, select {
  background: var(--surface2);
  border: 1px solid #333;
  border-radius: var(--radius);
  color: var(--text);
  padding: 12px 14px;
  width: 100%;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); }

textarea { resize: vertical; min-height: 70px; }

label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text2);
  margin-bottom: 6px;
}

/* ─── Screens ─── */
.screen { display: none; flex-direction: column; min-height: 100vh; }
.screen.active { display: flex; }
.container { max-width: 520px; width: 100%; margin: 0 auto; padding: 16px; flex: 1; }

/* ─── Buttons ─── */
.btn {
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: all .2s;
  display: inline-block;
  text-decoration: none;
}
.btn-primary { background: var(--gold); color: #000; }
.btn-primary:hover { background: var(--gold-dim); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--gold); border: 2px solid var(--gold); }
.btn-outline:hover { background: rgba(201, 168, 76, 0.1); }
.btn-secondary { background: var(--surface2); color: var(--text); }
.btn-secondary:hover { background: #333; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #C0392B; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ─── Lobby Screen ─── */
.lobby { padding-top: 40px; text-align: center; }
.lobby h1 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.lobby h1 span { color: var(--gold); }
.lobby .subtitle { font-size: 13px; color: var(--text2); margin-bottom: 28px; }
.lobby .form-group { margin-bottom: 14px; text-align: left; }
.lobby .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lobby .feedback { font-size: 13px; color: var(--warning); margin-top: 8px; display: none; }
.lobby .feedback.show { display: block; }
.start-section { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid #2A2A2A; }
.start-section.show { display: block; }

/* ─── Progress Bar ─── */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid #2A2A2A;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.progress-track {
  flex: 1;
  height: 4px;
  background: #333;
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width .3s;
}
.progress-text { font-size: 13px; color: var(--text2); white-space: nowrap; min-width: 70px; }
.progress-hint { font-size: 16px; color: var(--text3); margin-left: auto; cursor: pointer; }
.progress-hint:hover { color: var(--gold); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }
.online-count { font-size: 11px; color: var(--text3); }

/* ─── Item List ─── */
.list-screen { padding-top: 56px; }
.list-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.list-header h2 { font-size: 16px; }
.list-header .meta { font-size: 11px; color: var(--text3); }

.cat-divider {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold); font-weight: 700;
  padding: 14px 0 6px;
  position: sticky; top: 56px; background: var(--bg); z-index: 2;
}

.item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s;
}
.item-row:hover { border-color: var(--gold); }
.item-row.state-done { border-color: rgba(46, 204, 113, 0.3); }
.item-row.state-skip { border-color: rgba(243, 156, 18, 0.3); }

.item-row .status-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.item-row .status-icon.done { color: var(--success); }
.item-row .status-icon.skip { color: var(--warning); }
.item-row .status-icon.pending { color: var(--text3); }

.item-row .info { flex: 1; min-width: 0; }
.item-row .info-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row .info-id { font-size: 10px; color: var(--text3); }
.item-row .info-editor { font-size: 9px; color: var(--warning); margin-top: 1px; }

.item-row .badges { display: flex; gap: 3px; flex-shrink: 0; flex-wrap: wrap; max-width: 70px; justify-content: flex-end; }

.badge {
  font-size: 8px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  text-transform: uppercase; white-space: nowrap;
}
.badge-issue { background: var(--danger); color: #fff; }
.badge-forced { background: #FF4500; color: #fff; }

.export-area { padding: 16px 0 32px; text-align: center; }
.warning-inline { font-size: 12px; color: var(--warning); margin-bottom: 8px; }

/* ─── Item Detail ─── */
.detail-screen { padding-top: 56px; }

.item-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.item-header { margin-bottom: 16px; }
.item-category { font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.item-name { font-size: 20px; font-weight: 600; margin-top: 4px; }
.item-name-id { font-size: 13px; color: var(--text2); margin-top: 2px; font-weight: 400; }

.editing-badge {
  display: inline-block;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 8px;
}

.last-edited { font-size: 11px; color: var(--text3); margin-top: 4px; }

.photo-area {
  background: var(--surface2);
  border: 2px dashed var(--gold);
  border-radius: var(--radius-lg);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.photo-area:hover { border-color: #fff; background: rgba(201, 168, 76, 0.08); }
.photo-area.has-photo { border-style: solid; border-color: var(--gold); }
.photo-area img { width: 100%; height: auto; display: block; object-fit: cover; }

.photo-placeholder { text-align: center; color: var(--text3); }
.photo-placeholder .icon { font-size: 48px; display: block; margin-bottom: 12px; }
.photo-placeholder span { font-size: 14px; font-weight: 700; color: var(--gold); }

.photo-actions {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; gap: 6px;
}
.photo-actions button {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Toggles ─── */
.toggle-group { margin-bottom: 14px; }
.toggle-label { font-size: 13px; color: var(--text2); margin-bottom: 6px; display: block; text-transform: none; letter-spacing: 0; }
.toggle-row { display: flex; gap: 8px; }
.toggle-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
  text-align: center;
  background: #1A1A1A;
  color: #666666;
  border: 2px solid transparent;
  transition: all .2s;
}
.toggle-btn.active-y { background: #CC3333; border-color: #CC3333; color: #FFFFFF; }
.toggle-btn.active-n { background: #333333; border-color: #333333; color: #FFFFFF; }

.detail-nav { padding-bottom: 24px; }
.detail-nav-layout { display: flex; gap: 8px; }

.btn-nav-prev {
  flex: 3;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 15px; font-weight: 600;
  text-align: center;
  background: #1A1A1A;
  color: var(--text);
  border: 1px solid #333;
  transition: all .2s;
}
.btn-nav-prev:hover { border-color: var(--gold); }
.btn-nav-prev:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-nav-list {
  flex: 2;
  padding: 14px 8px;
  border-radius: var(--radius);
  font-size: 16px;
  text-align: center;
  background: transparent;
  color: var(--text3);
  border: 1px solid transparent;
  transition: all .2s;
}
.btn-nav-list:hover { color: var(--gold); }

.btn-nav-next {
  flex: 5;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 15px; font-weight: 600;
  text-align: center;
  background: var(--gold);
  color: #000;
  border: none;
  transition: all .2s;
}
.btn-nav-next:hover { background: var(--gold-dim); }
.btn-nav-next:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Quick Jump Sheet ─── */
.qj-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.qj-overlay.show { display: flex; }
.qj-sheet {
  background: var(--surface);
  width: 100%; max-width: 520px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 78vh;
  display: flex; flex-direction: column;
}
.qj-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #2A2A2A;
  font-size: 14px; font-weight: 600;
}
.qj-header button {
  background: none; border: none;
  color: var(--text2); font-size: 22px;
  padding: 0 4px; cursor: pointer;
}
.qj-body { overflow-y: auto; padding: 6px 0; }
.qj-cat {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold); font-weight: 700;
  padding: 10px 16px 6px;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.qj-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #1F1F1F;
}
.qj-item:hover { background: var(--surface2); }
.qj-item .qj-num { color: var(--text3); font-size: 11px; width: 24px; text-align: right; flex-shrink: 0; }
.qj-item .qj-name { flex: 1; }
.qj-item .qj-name-id { display: block; font-size: 10px; color: var(--text3); }
.qj-item .qj-stat { font-size: 12px; width: 20px; text-align: center; }

/* ─── Toast ─── */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff;
  padding: 12px 24px; border-radius: 30px;
  font-size: 13px; z-index: 999;
  pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.toast.show { opacity: 1; }

.file-input-hidden { display: none; }

/* ─── Responsive ─── */
@media (min-width: 768px) {
  .container { max-width: 680px; }
}