/* 유리(glassy) 테마 - 기본 화면. style.css 위에 덮어쓴다. 끄기 ?glass=0 · 다시 켜기 ?glass=1.
   색은 비콘 로고(남색 바탕 판)에서: 깊은 남색 바탕 · 은색(크롬) 글자 · 금빛 빛줄기와 등대 불빛.
   - 바탕: 가운데가 조금 밝은 남색, 왼쪽 위(로고 등대 쪽)에서 금빛이 은은히 번진다.
   - 바탕 위 글자(탭 제목·설명)는 은색, 바탕 위 주 단추는 금색.
   - 일하는 상자(표·검토·화물)는 흰 유리, 곁 상자·알림은 은회색 유리 - 글 읽기 우선.
   - 금색은 지금 위치 · 새 소식 · 바탕 위 주 단추에만. */
:root {
  --navy: #16224a;
  --navy-2: #24346a;
  --navy-deep: #0d1430;
  --side: #16224a;
  --silver: #e9edf4;           /* 바탕 위 글자 */
  --silver-2: #b7c0d4;         /* 바탕 위 보조 글자 - 바탕 대비 8:1 */
  --gold-1: #f4d06a;
  --gold-2: #e0aa2c;
  --gold: #e8b938;
  --gold-ink: #7d5a10;
  --bg: #16224a;
  --panel: rgba(255, 255, 255, .95);
  --panel-white: rgba(255, 255, 255, .95);    /* 일하는 상자 */
  --panel-gray: rgba(226, 231, 240, .93);     /* 곁 상자 · 알림(은회색) */
  --gray-1: #f2f4f8;                          /* 흰 상자 안의 상자 · 표 머리 */
  --line: rgba(22, 34, 74, .10);
  --text: #16224a;
  --muted: #566078;
  --accent: #24408f;           /* 링크·선택 - 흰 바탕 8.9:1 */
  --accent-soft: rgba(36, 64, 143, .09);
  --radius: 18px;
  --glass-blur: blur(24px) saturate(140%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --glass-drop: 0 18px 40px -18px rgba(3, 7, 22, .65);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

body { background: var(--navy-deep); color: var(--text); }
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(22% 20% at 9% 6%, rgba(244, 208, 106, .22), transparent 72%),   /* 로고 등대 불빛 */
    radial-gradient(30% 16% at 30% 4%, rgba(232, 185, 56, .08), transparent 72%),   /* 빛줄기 */
    radial-gradient(60% 55% at 55% 42%, #23346a 0%, transparent 75%),               /* 가운데 밝은 남색 */
    linear-gradient(160deg, #1a2856 0%, #121b3d 55%, #0b1129 100%);
}
::selection { background: rgba(232, 185, 56, .4); color: var(--navy-deep); }
* { scrollbar-color: rgba(183, 192, 212, .35) transparent; }
.card * { scrollbar-color: rgba(22, 34, 74, .25) transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input[type=checkbox], input[type=radio], progress { accent-color: var(--navy); }

/* ---- 사이드바: 더 짙은 남색 유리 + 로고 ---- */
.sidebar {
  margin: 12px 0 12px 12px; height: calc(100vh - 24px); top: 12px;
  border-radius: 24px; overflow: hidden; color: #c3cbdc;
  background: linear-gradient(180deg, rgba(9, 14, 34, .62), rgba(9, 14, 34, .5));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .06),
              0 24px 50px -24px rgba(0, 0, 0, .7);
}
.brand { border-bottom-color: rgba(255, 255, 255, .08); }
.brand.has-logo { padding: 16px 16px 12px; text-align: center; }
.brand-logo { display: block; width: 100%; max-width: 196px; height: auto; margin: 0 auto; }
.brand.has-logo .brand-app { margin-top: 6px; color: #8b96ad; }
/* 로고가 없을 때의 금색 띠: 로고 빛줄기처럼 한쪽이 가늘다 */
.brand-bar { width: 128px; height: 4px; border-radius: 0;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-1) 45%, var(--gold-2));
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); }
.brand-en { color: var(--gold-1); }
.menu-item { border-radius: 14px; color: #c3cbdc; transition: background-color .25s var(--ease), color .25s var(--ease); }
.menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-item.active, .menu-item.disabled.active {
  background: linear-gradient(90deg, rgba(244, 208, 106, .18), rgba(244, 208, 106, .08));
  color: var(--gold-1); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(244, 208, 106, .28);
}
.badge { background: rgba(255, 255, 255, .10); }
.sidebar-foot, .side-user { border-top-color: rgba(255, 255, 255, .08); }

/* ---- 바탕 위에 바로 놓인 것: 탭 제목·설명·단추 ---- */
.page-head h1, .hd-head h2 {
  color: var(--silver);
  background: linear-gradient(180deg, #ffffff 0%, #dfe4ee 55%, #aab3c6 100%);   /* 로고 크롬 글자 */
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.page-head .sub, .hd-head p, .hd-head h2 .num { color: var(--silver-2); }
.page-head .sub b, .page-head .sub strong { color: var(--silver); }
.page-head a { color: var(--gold-1); }
.page-head .btn.ghost, .hd-head .btn.ghost {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: var(--silver);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none;
}
.page-head .btn.ghost:hover, .hd-head .btn.ghost:hover { background: rgba(255, 255, 255, .16); }
.page-head .btn.primary, .hd-head .btn.primary {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--navy-deep); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px -10px rgba(232, 185, 56, .7);
}
.page-head .btn.primary:hover, .hd-head .btn.primary:hover { background: linear-gradient(180deg, #f8dc88, var(--gold)); }
.page-head select { background: rgba(255, 255, 255, .92); border-radius: 12px; }

/* ---- 상자: 흰 유리(일하는 상자) · 은회색 유리(곁 상자·알림) ---- */
.card, .kk-unipass, .kk-rooms, .hd-box, .due-banner {
  background: var(--panel-white); border: 0;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-drop);
}
.card { border-radius: 22px; padding: 20px 22px; }
.card.side-card { background: var(--panel-gray); }
.notice { background: var(--panel-gray); border: 0; color: #2c3550; border-radius: 14px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--glass-drop); }
.card-title { letter-spacing: -.01em; }
.count { background: var(--accent-soft); color: var(--accent); }
.table thead th { background: var(--gray-1); }
.table thead th:first-child { border-top-left-radius: 10px; }
.table thead th:last-child { border-top-right-radius: 10px; }

/* ---- 상자 안 단추: 주 단추는 남색, 보조는 흰색 ---- */
.btn { border-radius: 999px; padding: 8px 16px;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.btn.sm { padding: 5px 12px; }
.btn.primary { background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -10px rgba(22, 34, 74, .8); }
.btn.primary:hover { background: linear-gradient(180deg, #2e4180, var(--navy-2)); }
.btn.primary:active, .btn.ghost:active { transform: translateY(1px); }
.btn.ghost { background: #fff; border-color: rgba(22, 34, 74, .14); color: var(--navy); box-shadow: 0 1px 2px rgba(22, 34, 74, .06); }
.btn.ghost:hover { background: var(--gray-1); }
.btn.danger { background: #fff; }
.tag { background: var(--gray-1); }
.f input, .f select, .f textarea { background: #fff; border-color: rgba(22, 34, 74, .14); border-radius: 12px; }
.f input:focus { outline: 2px solid rgba(232, 185, 56, .5); border-color: var(--gold-2); }

/* ---- 표 ---- */
.table th { color: var(--muted); border-bottom-color: rgba(22, 34, 74, .10); }
.table td { border-bottom-color: rgba(22, 34, 74, .06); }
.table tbody tr:hover td { background: #f7f8fb; }

/* ---- 창(모달) ---- */
.modal-backdrop { background: rgba(6, 10, 26, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal {
  background: rgba(255, 255, 255, .97); border-radius: 26px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 30px 80px -20px rgba(0, 0, 0, .6);
}

/* ---- 카톡 연동 ---- */
.kk-rooms-head { background: linear-gradient(180deg, #1c2a5a, var(--navy)); border-radius: 22px 22px 0 0; }
.kk-rooms-head b { color: var(--gold-1); }
.kk-rooms { border-radius: 0 0 22px 22px; }
.kk-room.on { background: var(--gray-1); border-left-color: var(--navy); }
.kk-room.hot { background: rgba(244, 208, 106, .18); border-left-color: var(--gold); }
.kk-unipass { border-radius: 18px; }
.kk-case { background: var(--gray-1); border: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(22, 34, 74, .05); }
.kk-case.kk-roro { box-shadow: inset 0 0 0 1px rgba(232, 185, 56, .5); }
.kk-case .table-wrap { background: #fff; border-radius: 12px; }
.kk-chip { background: #fff; border-color: rgba(22, 34, 74, .08); }
.kk-cars tbody.kk-warn td { background: rgba(244, 208, 106, .12); }
.kk-recheck { border-radius: 999px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .menu-item, .btn { transition: none; }
}

/* ---- 휴대폰 폭: 사이드바는 위쪽 가로 메뉴(style.css 의 760px 규칙을 유리 테마가 덮지 않게) ---- */
@media (max-width: 760px) {
  .sidebar { margin: 8px 8px 0; height: auto; top: auto; border-radius: 18px; }
  .brand.has-logo { padding: 10px 14px 4px; text-align: left; }
  .brand-logo { max-width: 104px; margin: 0; }
  .page-head h1 { font-size: 22px; }
}