*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg: #ffffff;
  --bg-2: #f5f5f5;       /* 카드 배경 */
  --bg-3: #ebebeb;       /* 더 진한 배경 (구분용) */
  --fg: #111111;
  --fg-2: #444444;
  --fg-3: #777777;
  --line: #c8c8c8;       /* 진해진 메인 보더 */
  --line-2: #dcdcdc;     /* 진해진 세컨더리 보더 */
  --accent: #1a4d8f;     /* 강조 색 (포인트) */
  --danger: #b00020;
  --holiday: #8a4a1f;
}
html, body {
  margin: 0; padding: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg); color: var(--fg);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 16px; }

/* Center wrap */
.center-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 420px; }
.login-title { font-size: 15px; color: var(--fg-3); margin-bottom: 24px; font-weight: 500; }
.login-heading { font-size: 30px; font-weight: 700; margin: 0 0 32px; letter-spacing: -0.01em; }

/* Fields */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; color: var(--fg-2); margin-bottom: 8px; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--fg); outline: none;
  transition: border-color 0.15s; font-size: 16px;
}
.field input:focus, .field select:focus { border-color: var(--fg); border-width: 1.5px; }
.field input:read-only {
  background: var(--bg-3);
  color: var(--fg-2);
  border-color: var(--line-2);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border: 1.5px solid var(--fg); background: var(--fg);
  color: #fff; font-size: 16px;
  transition: opacity 0.15s; border-radius: 4px;
  font-weight: 600;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost {
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--fg); background: var(--bg-2); }
.btn-danger {
  background: var(--bg);
  color: var(--danger);
  border: 1.5px solid var(--line);
}
.btn-danger:hover { border-color: var(--danger); background: #fef5f6; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 8px 14px; font-size: 14px; }

.login-error { margin-top: 14px; font-size: 14px; color: var(--danger); }
.login-hint { font-size: 14px; color: var(--fg-3); margin-top: 20px; line-height: 1.5; }
.google-icon {
  display: inline-block; width: 20px; height: 20px;
  background: #fff; border-radius: 50%;
  font-size: 14px; font-weight: bold;
  color: #4285f4; text-align: center; line-height: 20px;
}

/* App header */
.app-header {
  border-bottom: 2px solid var(--line);
  padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-2);
}
.app-brand { font-size: 20px; color: var(--fg); font-weight: 700; }
.app-user { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--fg-2); }
.app-user .email { font-weight: 500; }
.logout {
  background: var(--bg); border: 1px solid var(--line);
  color: var(--fg-2); font-size: 14px;
  padding: 6px 12px; border-radius: 4px;
}
.logout:hover { color: var(--fg); border-color: var(--fg); }

/* Nav */
.app-nav {
  border-bottom: 2px solid var(--line);
  padding: 0 28px;
  display: flex; overflow-x: auto;
  background: var(--bg);
}
.nav-item {
  padding: 16px 0; margin-right: 36px;
  background: transparent; border: none;
  color: var(--fg-3); font-size: 17px;
  border-bottom: 3px solid transparent;
  transform: translateY(2px);
  white-space: nowrap; font-weight: 600;
}
.nav-item.active { color: var(--fg); border-bottom-color: var(--fg); }
.nav-item:hover { color: var(--fg); }

/* Sync */
.sync-status {
  font-size: 13px; color: var(--fg-3);
  padding: 12px 28px 0;
}
.sync-status .dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: #5cb85c;
  margin-right: 8px; vertical-align: middle;
}
.sync-status.offline .dot { background: var(--danger); }

/* Main */
.app-main { padding: 32px 28px 80px; max-width: 1100px; margin: 0 auto; }
.section-title {
  font-size: 22px; color: var(--fg); margin: 0 0 24px;
  font-weight: 700; letter-spacing: -0.01em;
}

/* Entry */
.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  max-width: 620px;
  padding: 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.entry-grid .full { grid-column: 1 / -1; }
.entry-grid .field input,
.entry-grid .field select { background: var(--bg); }

.check-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  cursor: pointer; user-select: none;
  border-radius: 4px;
}
.check-row.checked { border-color: var(--holiday); background: #fdf6ee; }
.check-row input { width: 22px; height: 22px; margin: 0; cursor: pointer; }
.check-row .label { font-size: 17px; font-weight: 600; }
.check-row .auto-hint { margin-left: auto; font-size: 14px; color: var(--fg-3); }

.entry-summary {
  grid-column: 1 / -1;
  border-top: 2px solid var(--line);
  margin-top: 10px;
  padding-top: 22px;
  font-size: 16px;
  color: var(--fg-2);
}
.entry-summary .total { color: var(--fg); font-weight: 700; font-size: 22px; }
.entry-summary .row {
  display: flex; justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}
.entry-summary .badge {
  display: inline-block; padding: 5px 12px;
  font-size: 14px; border: 1.5px solid var(--line);
  margin-right: 8px; font-weight: 600;
  background: var(--bg); border-radius: 4px;
}
.badge.holiday { color: var(--holiday); border-color: var(--holiday); background: #fdf6ee; }
.hint { font-size: 14px; color: var(--fg-3); margin-top: 6px; }

/* Filters */
.filters {
  display: flex; gap: 16px; align-items: end;
  margin-bottom: 24px; flex-wrap: wrap;
}
.filters .field { margin: 0; min-width: 150px; }

/* Table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
table {
  width: 100%; border-collapse: collapse;
  font-size: 15px; min-width: 980px;
}
th, td {
  text-align: left; padding: 14px 12px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
th {
  font-size: 14px; color: var(--fg);
  font-weight: 700;
  border-bottom: 2px solid var(--line);
  background: var(--bg-2);
}
td.num, th.num { text-align: right; font-feature-settings: "tnum"; }
tbody tr:hover { background: var(--bg-2); }
tr.holiday-row { background: #fdf9f3; }
tr.holiday-row:hover { background: #faf2e6; }
tr.holiday-row td:first-child { color: var(--holiday); font-weight: 600; }

.row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.icon-btn {
  background: var(--bg); border: 1px solid var(--line);
  color: var(--fg-2); padding: 6px 12px;
  font-size: 14px; border-radius: 4px;
  font-weight: 500;
}
.icon-btn:hover { color: var(--fg); border-color: var(--fg); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

.recorder { font-size: 13px; color: var(--fg-2); }
.recorder .updated { color: var(--holiday); font-size: 12px; }
.empty {
  padding: 60px 0; text-align: center;
  color: var(--fg-3); font-size: 16px;
}

/* Summary cards */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}
.summary-cell {
  background: var(--bg);
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
}
.summary-cell .name { font-size: 16px; font-weight: 600; }
.summary-cell .hours {
  font-size: 28px; font-weight: 800;
  margin-top: 6px; font-feature-settings: "tnum";
  color: var(--fg);
}
.summary-cell .sub { font-size: 13px; color: var(--fg-3); margin-top: 6px; }

/* Download */
.download-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; max-width: 720px;
}
.download-card {
  border: 1.5px solid var(--line);
  padding: 28px;
  border-radius: 6px;
  background: var(--bg-2);
}
.download-card h3 { font-size: 19px; margin: 0 0 20px; font-weight: 700; }
.download-card .field input { background: var(--bg); }

/* Settings */
.settings-block { margin-bottom: 44px; }
.settings-block h3 { font-size: 19px; margin: 0 0 18px; font-weight: 700; }
.list {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
.list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 15px;
}
.list-item:last-child { border-bottom: none; }
.add-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.add-row input {
  flex: 1; padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 130px; font-size: 15px;
}

/* Toast */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  background: var(--fg); color: #fff;
  padding: 14px 24px; font-size: 15px;
  z-index: 200; border-radius: 6px;
  animation: toastIn 0.2s ease;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast.error { background: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.config-error {
  border: 1.5px solid var(--danger);
  padding: 20px; background: #fef5f6;
  font-size: 15px; color: var(--danger);
  margin-bottom: 16px; line-height: 1.6;
  border-radius: 6px;
}
.config-error code {
  background: #fff; padding: 3px 8px;
  font-family: monospace; color: var(--fg);
  border-radius: 3px;
}

/* Mobile */
@media (max-width: 640px) {
  html, body { font-size: 15px; }
  .entry-grid, .download-grid { grid-template-columns: 1fr; }
  .app-main { padding: 24px 16px 80px; }
  .app-header, .app-nav, .sync-status { padding-left: 16px; padding-right: 16px; }
  .entry-grid { padding: 20px; }
  th, td { padding: 10px 8px; font-size: 14px; }
  .login-heading { font-size: 26px; }
  .app-brand { font-size: 18px; }
  .nav-item { margin-right: 24px; font-size: 16px; }
}