/* ════════════════════════════════════════════════════════════════
   🚄 SRT/KTX 자동 예매 — 메인 스타일시트
   v2.1 — 모바일 디자인 개선 (헤더 줄바꿈 해결, 아이콘 네비)
   ════════════════════════════════════════════════════════════════ */

/* ─── 디자인 토큰 (다크모드 지원) ─── */
:root {
  --bg: #f3f5f8;
  --card-bg: #ffffff;
  --text: #1f2937;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --border-soft: #f3f4f6;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-deep: #1e3a8a;
  --input-bg: #ffffff;
  --code-bg: #f3f4f6;
  --highlight-bg: #fef3c7;
  --highlight-border: #f59e0b;
  --highlight-text: #78350f;
  --table-head-bg: #f9fafb;
  --table-ok-bg: #f0fdf4;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0f172a;
    --card-bg: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --border: #334155;
    --border-soft: #1e293b;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-deep: #93c5fd;
    --input-bg: #0f172a;
    --code-bg: #0f172a;
    --highlight-bg: #422006;
    --highlight-border: #f59e0b;
    --highlight-text: #fde68a;
    --table-head-bg: #0f172a;
    --table-ok-bg: #14532d;
  }
}
:root[data-theme="dark"] {
  --bg: #0f172a;
  --card-bg: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --border-soft: #1e293b;
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-deep: #93c5fd;
  --input-bg: #0f172a;
  --code-bg: #0f172a;
  --highlight-bg: #422006;
  --highlight-border: #f59e0b;
  --highlight-text: #fde68a;
  --table-head-bg: #0f172a;
  --table-ok-bg: #14532d;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { background-color: var(--bg); }    /* 최상위에 명시해서 빈 영역도 다크모드 적용 */
body {
  font-family: "맑은 고딕", "Malgun Gothic", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;                     /* body 가 화면 전체 덮도록 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-text-size-adjust: 100%;
  transition: background-color 200ms, color 200ms;
}
input, select, textarea, button { font-size: 16px; }   /* iOS 자동 줌 방지 */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── 상단바 ─── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  color: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  gap: 12px;
  min-height: 56px;
}

/* 브랜드 (로고 + 텍스트) */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;                  /* 절대 줄어들지 않음 */
  min-width: 0;                    /* flex 항목이 부모 넘으면 줄임 */
  white-space: nowrap;             /* 줄바꿈 금지 ★ */
}
.brand:hover { text-decoration: none; }
.logo { font-size: 26px; line-height: 1; flex-shrink: 0; }
.brand-text { font-size: 17px; letter-spacing: -0.2px; }
.brand-short { display: none; }    /* 모바일에서만 보임 */

/* 네비게이션 */
.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;             /* 항목 안 글자 줄바꿈 금지 */
  overflow: hidden;                /* 넘쳐도 줄바꿈 대신 자름 (모바일에선 아이콘만) */
}
.nav a, .nav .nav-link { color: #e5e7eb; }
.nav a:hover, .nav .nav-link:hover { color: #fff; }

/* 각 네비 항목 — 텍스트 + 아이콘 이중 라벨 */
.nav-link, .user {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.nav-icon { font-size: 16px; line-height: 1; }
.nav-label { display: inline; }    /* 데스크톱 기본: 텍스트 보임 */
.user { color: #d1d5db; font-size: 14px; }

/* 로그아웃 등 폼 안의 버튼도 일반 링크처럼 */
.link-btn {
  background: none; border: none; color: #e5e7eb; cursor: pointer;
  padding: 0; font: inherit;
}
.link-btn:hover { color: #fff; text-decoration: underline; }
.inline { display: inline; }

/* 다크모드 토글 버튼 */
.theme-toggle {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,.3); }

/* ─── 컨테이너 ─── */
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.footer {
  text-align: center; color: var(--text-muted); font-size: 13px;
  padding: 24px 16px; margin-top: 24px;
}

/* ─── 카드 ─── */
.card {
  background: var(--card-bg); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
  padding: 22px; margin-bottom: 18px;
  color: var(--text);
}
.card.narrow { max-width: 420px; margin: 48px auto; }
.card h1, .card h2 { margin-top: 0; color: var(--primary-deep); }
.card h2 { font-size: 18px; margin-bottom: 14px; }
.card h3 { font-size: 15px; color: var(--text); margin: 18px 0 8px; }
.muted { color: var(--text-muted); font-size: 13px; }
.small { font-size: 12px; }
.ok { color: #059669; font-size: 13px; font-weight: 600; }

/* ─── 그리드 ─── */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.grid .full { grid-column: 1 / -1; }
@media (max-width: 960px) { .grid { grid-template-columns: 1fr; } }

/* ─── 폼 ─── */
form label {
  display: block; margin-bottom: 12px;
  font-size: 13px; color: var(--text);
}
form input[type=text], form input[type=password], form input[type=number],
form input[type=date], form input[type=datetime-local], form select {
  display: block; width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 7px;
  font-size: 14px; background: var(--input-bg); margin-top: 4px;
  color: var(--text);
  font-family: inherit;
}
form input:focus, form select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

button {
  padding: 10px 18px; border: none; border-radius: 7px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .05s;
}
button:active { transform: translateY(1px); }
button.primary { background: var(--primary); color: #fff; }
button.primary:hover { background: var(--primary-dark); }
button.primary:disabled { background: #93c5fd; cursor: not-allowed; }
button.danger { background: #dc2626; color: #fff; }
button.danger:hover { background: #b91c1c; }
button.big { padding: 14px 20px; font-size: 16px; width: 100%; }
button.small { padding: 6px 12px; font-size: 13px; }

.btn-row { display: flex; gap: 8px; margin-top: 8px; }
.btn-row.big { margin-top: 14px; }

/* ─── 폼 행 ─── */
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .half { flex: 1 1 calc(50% - 6px); min-width: 140px; }
.row > .quarter { flex: 1 1 calc(25% - 9px); min-width: 100px; }
.row > fieldset.half { flex: 1 1 calc(50% - 6px); }

fieldset.radio-set {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px 6px; margin: 0 0 12px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
fieldset.radio-set legend {
  padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--text);
}
fieldset.radio-set label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
label.checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; }
label.checkbox input { width: auto; }

/* ─── 알림 ─── */
.alert {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: 14px;
}
.notice {
  background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe;
  border-radius: 8px; padding: 12px 14px; margin-top: 14px; font-size: 13px;
}
:root[data-theme="dark"] .alert { background: #450a0a; color: #fecaca; border-color: #7f1d1d; }
:root[data-theme="dark"] .notice { background: #1e3a8a; color: #dbeafe; border-color: #2563eb; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .alert { background: #450a0a; color: #fecaca; border-color: #7f1d1d; }
  :root[data-theme="auto"] .notice { background: #1e3a8a; color: #dbeafe; border-color: #2563eb; }
}

/* ─── details ─── */
details { margin: 10px 0; }
details summary {
  cursor: pointer; font-weight: 600; padding: 8px 0;
  font-size: 14px; color: var(--text);
}
details summary.muted { font-weight: 400; }
.inline-form { padding-left: 12px; border-left: 2px solid var(--border); margin-left: 4px; }

/* ─── 로그 박스 ─── */
.logbox {
  background: #0f172a; color: #cbd5e1;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 13px; line-height: 1.5;
  padding: 14px; border-radius: 8px;
  height: 260px; overflow: auto; white-space: pre-wrap;
  margin: 0;
}

/* 상태 배지 */
.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; margin-left: 8px;
  background: #e5e7eb; color: #374151;
}
.status-badge.running { background: #dcfce7; color: #166534; }
.status-badge.scheduled { background: #fef3c7; color: #92400e; }

/* ─── 이력 테이블 ─── */
table.history {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.history th, table.history td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft);
}
table.history th { background: var(--table-head-bg); color: var(--text-muted); font-weight: 600; }
table.history tr.ok td { background: var(--table-ok-bg); }
table.history tr.fail td { color: var(--text-muted); }

/* 즐겨찾기 칩 */
.fav-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fav-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 10px;
  background: #eff6ff; border: 1px solid #bfdbfe;
  cursor: pointer; position: relative;
  min-width: 140px;
  transition: background .15s;
}
.fav-chip:hover { background: #dbeafe; }
.fav-chip .fav-label { font-weight: 600; color: #1e40af; font-size: 13px; }
.fav-chip small { font-size: 11px; }
.fav-chip form { position: absolute; top: 4px; right: 6px; }
.fav-chip form button { color: #93c5fd; font-size: 14px; }
.fav-chip form button:hover { color: #1e3a8a; }

/* 통계 카드 */
.stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat {
  flex: 1 1 120px;
  background: var(--table-head-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}
.stat.ok { background: #f0fdf4; border-color: #bbf7d0; }
.stat-label { font-size: 12px; color: var(--text-muted); }
.stat-num { font-size: 28px; font-weight: 700; color: var(--primary-deep); margin-top: 4px; }

/* 관리자 표 안의 인라인 폼 */
.row-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.row-form input { margin: 0; width: 140px; }
.row-form label { margin: 0; }

/* ─── 알람 모달 (좌석 잡힘) ─── */
.alarm-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  animation: alarm-fade 200ms ease-out;
  padding: 20px;
}
.alarm-modal[hidden] { display: none; }
.alarm-card {
  background: #22c55e; color: white;
  border-radius: 18px; padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  max-width: 460px; width: 100%;
  animation: alarm-flash 1s ease-in-out infinite;
}
.alarm-card.fail { background: #dc2626; animation: alarm-flash-fail 1s ease-in-out infinite; }
.alarm-icon { font-size: 64px; line-height: 1; margin-bottom: 6px; }
.alarm-title { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.alarm-sub { font-size: 15px; font-weight: 600; opacity: .95; margin-bottom: 18px; line-height: 1.5; }
.countdown-box {
  background: rgba(255,255,255,.2); border-radius: 12px;
  padding: 12px; margin-bottom: 18px;
}
.countdown-label { font-size: 12px; opacity: .85; }
.countdown-time {
  font-size: 36px; font-weight: 800; letter-spacing: 2px;
  font-family: "Consolas", "Menlo", monospace;
  margin-top: 2px;
}
.countdown-time.warning { color: #fbbf24; }
.countdown-time.danger { color: #fef2f2; text-shadow: 0 0 8px rgba(239, 68, 68, .8); }
.alarm-stop {
  background: white; color: #16a34a;
  border: none; border-radius: 12px;
  padding: 16px 32px; font-size: 17px; font-weight: 800;
  cursor: pointer; min-width: 200px; min-height: 52px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.alarm-card.fail .alarm-stop { color: #b91c1c; }
.alarm-stop:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }

@keyframes alarm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes alarm-flash { 0%, 100% { background: #22c55e; } 50% { background: #16a34a; } }
@keyframes alarm-flash-fail { 0%, 100% { background: #dc2626; } 50% { background: #991b1b; } }

/* ─── 명절 예매 일정 위젯 ─── */
.holiday-widget {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px; padding: 14px 18px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.holiday-widget:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(245,158,11,.3); }
.holiday-widget .h-label {
  font-size: 13px; color: #92400e; font-weight: 600; letter-spacing: .5px;
}
.holiday-widget .h-time {
  font-size: 22px; color: #78350f; font-weight: 800; margin: 4px 0;
}
.holiday-widget .h-action { font-size: 13px; color: #92400e; font-weight: 600; }
:root[data-theme="dark"] .holiday-widget,
:root[data-theme="dark"] .holiday-widget .h-label,
:root[data-theme="dark"] .holiday-widget .h-time,
:root[data-theme="dark"] .holiday-widget .h-action {
  background: linear-gradient(135deg, #422006 0%, #78350f 100%);
  border-color: #f59e0b;
  color: #fde68a;
}

/* ─── 이력 페이지 필터 ─── */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: var(--table-head-bg); padding: 12px;
  border-radius: 8px; margin-bottom: 14px;
}
.filter-bar > * { margin: 0; }
.filter-bar label { font-size: 12px; flex: 1 1 130px; }
.filter-bar input, .filter-bar select { width: 100%; }
.filter-bar .filter-actions { display: flex; gap: 6px; align-self: flex-end; }

/* ─── 사용 가이드 ─── */
.guide-card { padding: 16px 22px; }
.guide-card details summary {
  font-size: 16px; font-weight: 700; color: var(--primary-deep);
  padding: 8px 0;
}
.guide-card details[open] summary { color: var(--primary-dark); }
.g-step {
  display: inline-block; background: var(--primary); color: white;
  border-radius: 50%; width: 28px; height: 28px;
  text-align: center; line-height: 28px;
  margin-right: 10px; font-size: 14px;
}
.g-body {
  padding: 14px 4px 8px;
  border-top: 1px solid var(--border-soft);
  margin-top: 8px;
}
.g-body h4 { margin: 16px 0 6px; color: var(--primary-deep); font-size: 14px; }
.g-body ol, .g-body ul { padding-left: 22px; margin: 8px 0; }
.g-body li { margin-bottom: 6px; line-height: 1.6; }
.g-body code {
  background: var(--code-bg); padding: 2px 6px; border-radius: 4px;
  font-family: "Consolas", monospace; font-size: 12.5px;
}
.g-highlight {
  background: var(--highlight-bg); border-left: 4px solid var(--highlight-border);
  padding: 10px 14px; margin: 10px 0; border-radius: 4px;
  font-size: 14px; color: var(--highlight-text);
}
.g-table { width: 100%; border-collapse: collapse; }
.g-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border-soft);
  vertical-align: top; font-size: 14px;
}
.g-table td:first-child { width: 35%; color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   ⚡ 모바일 반응형 — 헤더 줄바꿈 해결 (v2.1 핵심)
   ════════════════════════════════════════════════════════════════ */

/* ── 1차 단계: 태블릿 ~ 일반 폰 (960px 이하) ──
   ※ admin 사용자 풀텍스트 nav 가 약 960px 이상에서만 안전하게 한 줄에 맞음.
   iPad Pro 11" portrait (834), 일반 iPad portrait (810/820), 갤럭시 탭까지 커버. */
@media (max-width: 960px) {
  /* 헤더: 풀텍스트 숨기고 축약형, 네비 라벨 숨기고 아이콘만 */
  .brand-full { display: none; }
  .brand-short { display: inline; font-size: 16px; }
  .nav-link .nav-label { display: none; }
  .user .nav-label { display: none; }    /* 사용자명 텍스트 숨김, 👤 아이콘만 */
  .nav { gap: 8px; }
  .nav-icon { font-size: 18px; }          /* 아이콘 키워서 터치 친화적 */
  .nav-link, .user {
    padding: 4px 2px;
    min-width: 30px; justify-content: center;
  }
  .topbar { padding: 8px 14px; gap: 8px; min-height: 52px; }
  .logo { font-size: 24px; }

  /* 그 외 — 컨테이너 / 카드 / 폼 (기존 좋았던 패턴 유지) */
  .container { margin: 12px auto; padding: 0 10px; }
  .card { padding: 14px; border-radius: 10px; }
  .card.narrow { margin: 16px auto; }
  .card h1 { font-size: 22px; }
  .card h2 { font-size: 16px; }
  .row { gap: 8px; }
  .row > .half, .row > .quarter, .row > fieldset.half { flex: 1 1 100%; }
  button { padding: 12px 16px; min-height: 44px; }
  button.big { padding: 16px 20px; font-size: 17px; }
  button.small { min-height: 36px; padding: 8px 12px; }
  form input, form select { padding: 12px; min-height: 44px; }
  .logbox { height: 200px; font-size: 12px; padding: 10px; }
  table.history { font-size: 12px; }
  table.history th, table.history td { padding: 6px 8px; }
  .alarm-card { padding: 24px 18px; }
  .alarm-icon { font-size: 56px; }
  .alarm-title { font-size: 28px; }
  .countdown-time { font-size: 32px; }
  .stat { flex: 1 1 calc(50% - 6px); }
  .stat-num { font-size: 22px; }
}

/* ── 2차 단계: 좁은 폰 (iPhone SE / 미니 등 ≤380px) ── */
@media (max-width: 380px) {
  /* 헤더 더 압축 — 사용자명 아이콘도 숨겨 로그아웃까지 보이게 */
  .brand-short { display: none; }    /* 로고만 */
  .user { display: none; }           /* 👤 까지 숨김 */
  .topbar { padding: 8px 10px; gap: 6px; }
  .nav { gap: 6px; }
  .nav-icon { font-size: 17px; }
  .theme-toggle { width: 28px; height: 28px; font-size: 13px; }
  .container { padding: 0 8px; }
  .card { padding: 12px; }
}

/* ── 가로 모드 / 노치 등 PWA 풀스크린 ── */
@media (display-mode: standalone) {
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
}