/* 새 버전 알림 — 화면 아래 가운데에 잠깐 띄움 */
.version-notice { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:950;
  display:flex; align-items:center; gap:9px; padding:9px 11px 9px 13px; border-radius:12px;
  background:var(--surface); color:var(--text); border:1.5px solid var(--accent);
  box-shadow:0 8px 26px rgba(0,0,0,0.22); font-size:13px; max-width:calc(100vw - 32px);
  animation:vnIn 0.25s ease-out; }
@keyframes vnIn { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
.version-notice .material-icons-round { color:var(--accent); font-size:20px; }
.vn-txt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vn-txt small { color:var(--text3); }
.vn-go { border:none; background:var(--accent); color:#fff; border-radius:8px; padding:6px 11px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; flex:none; }
.vn-go:hover { filter:brightness(1.08); }
.vn-x { border:none; background:none; color:var(--text3); font-size:13px; cursor:pointer; padding:4px 2px; flex:none; }
.vn-x:hover { color:var(--text); }
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text; user-select: text;
}

:root {
  /* Factory 폰트 토큰 — 한글 본문은 Pretendard(Geist엔 한글 글리프 없음),
     라틴/숫자 "계기판" 라벨(버전·상태코드·날짜 등)만 Geist Mono */
  --font-sans:'Pretendard Variable','Geist','Pretendard',-apple-system,sans-serif;
  --font-mono:'Geist Mono','Pretendard Variable',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* ===== Factory 디자인 시스템 — 라이트 모드 (스펙엔 없어 다크 모드 원칙을 반전 설계) ===== */
  --bg:#f2f1ef; --surface:#ffffff; --surface2:#f7f6f4;
  --border:#ddd9d5; --border2:#eae7e3;
  --text:#171514; --text2:#433f3d; --text3:#6b6560; --text4:#a39d97;
  --input-bg:#ffffff; --tag-bg:#f2f1ef; --tag-border:#ddd9d5;
  --accent:#ee6018; --accent-hover:#ff7530; --accent-bg:#fdf1ea; --accent-text:#b8430c;
  --btn-bg:#171514; --btn-text:#ffffff;
  --log-bg:#f7f6f4; --summary-bg:#ffffff;
  --chip-def-border:#ddd9d5; --chip-def-text:#79746f; --chip-def-count:#a39d97;
  --overlay-bg:rgba(23,21,20,0.45);
  --spinner-track:#ddd9d5; --spinner-head:#d9540f;
  --bar-bg:#ddd9d5; --bar-fg:#d9540f;
  --tooltip-bg:#ffffff; --tooltip-border:#ddd9d5; --tooltip-text:#433f3d;
  --ok-bg:#eef4ec; --ok-border:#7fa870; --ok-text:#3f6b34;
  --ok-chip-bg:#eef4ec; --ok-chip-border:#7fa870; --ok-chip-text:#3f6b34;
  --no-bg:#f0efed; --no-border:#a39d97; --no-text:#54504c;
  --no-chip-bg:#f0efed; --no-chip-border:#a39d97; --no-chip-text:#54504c;
  --em-bg:#eaf1f7; --em-border:#5f8fb3; --em-text:#2c5978;
  --em-chip-bg:#eaf1f7; --em-chip-border:#5f8fb3; --em-chip-text:#2c5978;
  --pm-bg:#fbeeec; --pm-border:#c17262; --pm-text:#8a3b2c;
  --pm-chip-bg:#fbeeec; --pm-chip-border:#c17262; --pm-chip-text:#8a3b2c;
  --err-bg:#faf1e2; --err-border:#c19752; --err-text:#7a5a1e;
  --err-chip-bg:#faf1e2; --err-chip-border:#c19752; --err-chip-text:#7a5a1e;
  /* Factory 원칙: 그림자 없음 — 표면 구분은 1px 보더 + 대비로만 */
  --shadow-xs:none; --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  /* Factory 라운드 스케일: nav/buttons 3px, cards 10px, largePanels 20px */
  --radius:10px; --radius-sm:3px; --radius-lg:10px; --radius-xl:20px;
}

[data-theme="dark"] {
  /* ===== Factory 디자인 시스템 — 다크 모드 (스펙 값 그대로) ===== */
  --bg:#101010; --surface:#1d1a18; --surface2:#17140f;
  --border:#3d3a39; --border2:#262220;
  --text:#eeeeee; --text2:#b8b3b0; --text3:#8a8380; --text4:#5c5754;
  --input-bg:#1d1a18; --tag-bg:#1d1a18; --tag-border:#3d3a39;
  --accent:#ee6018; --accent-hover:#ff7a35; --accent-bg:#241a10; --accent-text:#ff9052;
  --btn-bg:#1f1d1c; --btn-text:#eeeeee;
  --log-bg:#151210; --summary-bg:#1d1a18;
  --chip-def-border:#3d3a39; --chip-def-text:#8a8380; --chip-def-count:#6b6764;
  --overlay-bg:rgba(16,16,16,0.7);
  --spinner-track:#3d3a39; --spinner-head:#ee6018;
  --bar-bg:#3d3a39; --bar-fg:#ee6018;
  --tooltip-bg:#1d1a18; --tooltip-border:#3d3a39; --tooltip-text:#b8b3b0;
  /* 상태색: Factory는 액센트 2개(오렌지/그린)로 제한하지만, 점검 상태 4~5종은 색으로
     즉시 구분하는 게 핵심 기능이라 축소 불가 — 채도를 낮추고 절제된 칩/텍스트로만 사용해
     "장식이 아닌 실시간 신호"라는 정신은 유지 (OK는 메트릭 그린 재사용) */
  --ok-bg:#16211a; --ok-border:#4a7a3f; --ok-text:#a0ca92;
  --ok-chip-bg:#16211a; --ok-chip-border:#4a7a3f; --ok-chip-text:#a0ca92;
  --no-bg:#201d1b; --no-border:#4d4947; --no-text:#b8b3b0;
  --no-chip-bg:#201d1b; --no-chip-border:#4d4947; --no-chip-text:#b8b3b0;
  --em-bg:#151d24; --em-border:#3f6a8c; --em-text:#8ab4d6;
  --em-chip-bg:#151d24; --em-chip-border:#3f6a8c; --em-chip-text:#8ab4d6;
  --pm-bg:#241512; --pm-border:#a85142; --pm-text:#e08d7c;
  --pm-chip-bg:#241512; --pm-chip-border:#a85142; --pm-chip-text:#e08d7c;
  --err-bg:#241c0c; --err-border:#a67c2e; --err-text:#e0b458;
  --err-chip-bg:#241c0c; --err-chip-border:#a67c2e; --err-chip-text:#e0b458;
}

/* ===== 접근성 · 브라우저 크롬 — Factory 원칙(그림자/글로우 없이, 얇은 라인·대비로만 상태 표현) ===== */
:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
::selection { background:var(--accent); color:#fff; }
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; border:2px solid var(--bg); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--text4); background-clip:padding-box; }

body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans),'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  min-height:100vh; padding-bottom:80px;
  transition:background 0.2s cubic-bezier(0.4,0,0.2,1),color 0.2s cubic-bezier(0.4,0,0.2,1);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
}
/* 히스토리 페이지엔 모바일 고정 버튼(.mobile-fixed-run)이 없어 80px 여유가 불필요 —
   그리드를 뷰포트에 정확히 맞춰도 이 여유분 때문에 페이지 자체 스크롤이 남는 걸 막음 */
body.history-page-active { padding-bottom:46px; }

/* ===== 헤더 ===== */
.header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:14px 32px; position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-xs);
  display:flex; align-items:center; justify-content:space-between;
}
.header-top { display:flex; align-items:baseline; gap:10px; }
.logo {
  font-family:var(--font-mono); font-size:19px; font-weight:500;
  letter-spacing:-0.02em; color:var(--text);
}
.subtitle { font-size:14px; font-weight:400; color:var(--text3); letter-spacing:0; }
.date-info { font-family:var(--font-mono); font-size:11px; font-weight:400; color:var(--text4); margin-top:4px; letter-spacing:-0.02em; }

.theme-toggle {
  background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:20px; padding:6px 14px; font-size:12px; color:var(--text3);
  cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px;
  transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.theme-toggle:hover { border-color:var(--accent); color:var(--text); }
.theme-icon { font-size:16px; line-height:1; }
.header-actions { display:flex; align-items:center; gap:6px; }
.theme-toggle.active { border-color:var(--accent); color:var(--text); }

.card-location { font-size:12px; color:var(--text2); font-weight:500; margin-top:1px; }

/* ===== 제품 편집 ===== */
.product-editor-section {
  margin-top:10px; padding:14px; background:var(--input-bg);
  border:1.5px solid var(--border); border-radius:var(--radius);
}
.pe-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pe-toolbar select, .pe-toolbar input[type=text] {
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); padding:6px 10px; font-size:12px; outline:none; font-family:inherit;
}
.pe-toolbar select { min-width:140px; }
.pe-toolbar input[type=text] { flex:1; min-width:120px; }
.pe-list { max-height:62vh; overflow-y:auto; margin-bottom:10px; }
.pe-bulk-bar {
  display:flex; align-items:center; gap:8px; padding:7px 10px; margin-bottom:6px;
  background:var(--em-chip-bg); border:1.5px solid var(--em-border); border-radius:var(--radius-sm);
}
.pe-zone-group { margin-bottom:16px; }
.pe-zone-header {
  display:flex; align-items:center; gap:7px; font-size:10px; font-weight:500;
  color:var(--text4); text-transform:uppercase; letter-spacing:0.8px;
  padding-bottom:5px; border-bottom:1px solid var(--border); margin-bottom:8px;
}
.pe-zone-count {
  font-size:10px; color:var(--text4); font-weight:400; text-transform:none; letter-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1px 7px;
}
.pe-compact-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.pe-compact-zone { display:flex; flex-direction:column; gap:4px; flex:0 0 150px; }
.pe-zone-header.mini { font-size:9px; padding-bottom:3px; margin-bottom:2px; }
.pe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px; }
.pe-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; cursor:pointer; transition:border-color 0.15s cubic-bezier(0.4,0,0.2,1),box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column; gap:3px; user-select:none;
  min-height:62px; box-sizing:border-box; width:100%;
}
.pe-card:hover:not(.editing) { border-color:var(--accent); box-shadow:var(--shadow-xs); }
.pe-card.editing { border-color:var(--em-border); cursor:default; background:var(--em-chip-bg); }
.pe-card-id { font-size:13px; font-weight:500; color:var(--text); }
.pe-card-loc { font-size:11px; color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-card-actions { display:flex; gap:4px; margin-top:auto; padding-top:6px; flex-wrap:nowrap; width:100%; justify-content:center; }
.pe-card-actions button { flex:1; min-width:0; font-size:11px; text-align:center; justify-content:center; }
.pe-card-edit-form { display:flex; flex-direction:column; gap:5px; margin-top:5px; }
.pe-card-edit-form input {
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:6px;
  color:var(--text); padding:4px 7px; font-size:11px; outline:none; font-family:inherit;
  width:100%; box-sizing:border-box; transition:border-color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.pe-card-edit-form input:focus { border-color:var(--accent); }
.pe-card-edit-form input.changed { border-color:var(--em-border); background:var(--em-chip-bg); }
.pe-row {
  display:grid; grid-template-columns:70px 1fr 1fr auto;
  align-items:center; gap:6px; padding:5px 8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px;
}
.pe-row input { background:var(--input-bg); border:1.5px solid var(--border); border-radius:5px;
  color:var(--text); padding:3px 7px; font-size:12px; outline:none; font-family:inherit; width:100%; }
.pe-row input:focus { border-color:var(--accent); }
.pe-row input.changed { border-color:var(--em-border); background:var(--em-chip-bg); }
.pe-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;
  font-size:11px; padding:4px 9px; color:var(--text3); font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); white-space:nowrap; }
.pe-btn:hover { border-color:var(--text3); color:var(--text); }
.pe-btn.del:hover { border-color:var(--pm-text); color:var(--pm-text); }
.pe-btn.save { color:var(--em-text); border-color:var(--em-border); }
.pe-add-form {
  display:grid; grid-template-columns:70px 1fr 1fr auto;
  align-items:center; gap:6px; padding-top:10px; border-top:1px solid var(--border);
}
.pe-add-form input, .pe-add-form select {
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); padding:5px 8px; font-size:12px; outline:none; font-family:inherit; width:100%;
}
.pe-empty { font-size:11px; color:var(--text4); padding:8px 0; }

/* ===== 컨트롤 패널 ===== */
.controls {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:16px 28px; display:flex; flex-direction:column; gap:12px;
}
.section-label {
  font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--text4);
  letter-spacing:-0.02em; text-transform:uppercase; margin-bottom:2px;
}
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
label { font-size:13px; font-weight:500; color:var(--text2); min-width:52px; }

input[type=text], input[type=password], input[type=date], input[type=datetime-local] {
  background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:var(--radius); color:var(--text); padding:8px 13px;
  font-size:13px; outline:none; font-family:inherit;
  transition:border-color 0.15s cubic-bezier(0.4,0,0.2,1),box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
}
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=datetime-local]:focus {
  border-color:var(--accent);
}
input[type=date], input[type=datetime-local] { cursor:pointer; }
.token-input { width:400px; font-size:11px; }
.id-input { width:88px; font-weight:500; letter-spacing:1px; }
.extra-id-input { width:240px; }
.fixed-id {
  background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:var(--radius); color:var(--text3); padding:8px 13px; font-size:13px;
  width:88px; font-weight:500; text-align:center; letter-spacing:1px;
}
.dash { color:var(--border); font-size:18px; padding:0 2px; }

.extra-ids-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.extra-id-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent-bg); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:20px; padding:3px 8px 3px 12px;
  font-size:12px; color:var(--accent-text); font-weight:500;
}
.extra-id-tag button {
  background:none; border:none; color:var(--text4); cursor:pointer;
  font-size:15px; line-height:1; padding:0; transition:color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.extra-id-tag button:hover { color:var(--pm-text); }
.exclude-tag-reason { font-size:10px; opacity:0.75; font-weight:400; }
.exclude-reason-badge {
  display:inline-block; margin-top:3px;
  padding:1px 7px; border-radius:4px; font-size:10px; font-weight:500;
  background:rgba(234,179,8,0.15); color:#ca8a04; border:1px solid rgba(234,179,8,0.3);
  letter-spacing:0.3px;
}
[data-theme="dark"] .exclude-reason-badge { background:rgba(234,179,8,0.12); color:#fbbf24; border-color:rgba(251,191,36,0.25); }
.range-panel-grid { display:grid; grid-template-columns:auto auto; column-gap:32px; row-gap:10px; justify-content:start; }
.range-panel-divider { grid-column:1/-1; margin:2px 0; border:none; border-top:1px solid var(--border); }
@media (max-width:768px) { .range-panel-grid { grid-template-columns:1fr; } .range-panel-divider { grid-column:1; } }

/* ===== 버튼 ===== Factory 원칙: 버튼은 항상 중립색 채움 (브랜드 액센트 컬러 금지) */
.btn-primary {
  background:var(--btn-bg);
  color:var(--btn-text); border:none;
  border-radius:var(--radius-sm); padding:10px 28px; font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit;
  transition:background-color 0.15s cubic-bezier(0.4,0,0.2,1),border-color 0.15s cubic-bezier(0.4,0,0.2,1);
}
/* Factory 스펙: 액센트(오렌지)는 데이터 신호 전용 — 버튼 배경 채우기 금지.
   중립 필(dark/light fill) 유지하고 밝기만 조절해 상태 변화를 표현 */
.btn-primary:hover:not(:disabled) { filter:brightness(1.3); }
.btn-primary:active:not(:disabled) { filter:brightness(0.85); }
.btn-primary:disabled { opacity:0.35; cursor:not-allowed; }

.btn-add {
  background:transparent; color:var(--text3); border:1.5px dashed var(--border);
  border-radius:var(--radius); padding:8px 14px; font-size:12px;
  cursor:pointer; font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.btn-add:hover { border-color:var(--accent); color:var(--accent); border-style:solid; }

.btn-ghost {
  background:transparent; color:var(--text3); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:8px 14px; font-size:12px;
  cursor:pointer; font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.btn-ghost:hover { color:var(--text); border-color:var(--text3); background:var(--input-bg); }
.btn-ghost.active { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }

.btn-copy {
  background:transparent; color:var(--text3); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:6px 12px; font-size:11px;
  cursor:pointer; font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.btn-copy:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }

.btn-show-all {
  background:transparent; color:var(--text3); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:6px 12px; font-size:11px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); white-space:nowrap;
}
.btn-show-all:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
.btn-show-all.active { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); font-weight:500; }

.btn-danger {
  background:transparent; color:var(--pm-text); border:1.5px solid var(--pm-border);
  border-radius:var(--radius); padding:6px 12px; font-size:11px;
  cursor:pointer; font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.btn-danger:hover { background:var(--pm-bg); }

.divider { border:none; border-top:1px solid var(--border2); margin:2px 0; }
.error-msg { color:var(--pm-text); font-size:12px; font-weight:500; }

/* ===== 관리자 인증 ===== */
.admin-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-row[hidden] { display:none; }
/* 모바일에서는 범위 검색 비활성 — 탭 자체를 숨김 */
@media (max-width:768px) { #tabRange { display:none; } }
.pw-input-wrap { position:relative; display:inline-flex; align-items:center; }
.admin-pw-input { width:200px; }
/* input[type=password] 전역 규칙보다 명시도를 높여 우측 눈아이콘 여백을 확실히 확보 */
.pw-input-wrap .admin-pw-input { padding-right:32px; }
.pw-toggle-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:2px; cursor:pointer; color:var(--text4);
  display:flex; align-items:center; transition:color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.pw-toggle-btn:hover { color:var(--text2); }
.admin-auth-badge {
  font-size:11px; font-weight:500; padding:4px 11px;
  border-radius:20px; display:none; letter-spacing:0.3px;
}
.admin-auth-badge.ok { display:inline-block; background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-border); }
.admin-auth-badge.super { display:inline-block; background:var(--accent-bg); color:var(--accent-text); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.admin-auth-badge.fail { display:inline-block; background:var(--pm-bg); color:var(--pm-text); border:1px solid var(--pm-border); }

/* ===== 관리자 액션 ===== */
.admin-actions-row {
  display:none; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 0;
}
.btn-admin-action {
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:7px 14px; font-size:12px; font-weight:500; color:var(--text);
  cursor:pointer; font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
  display:inline-flex; align-items:center; gap:5px;
}
.btn-admin-action:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.overdue-badge {
  font-size:11px; font-weight:500; padding:5px 11px; border-radius:20px;
  background:var(--pm-bg); color:var(--pm-text); border:1px solid var(--pm-border);
  align-items:center; cursor:pointer; font-family:inherit;
  transition:filter 0.15s cubic-bezier(0.4,0,0.2,1);
}
.overdue-badge:hover { filter:brightness(1.15); }

/* ===== 로딩 ===== */
.loading-overlay {
  display:none; position:fixed; inset:0; background:var(--overlay-bg);
  z-index:200; flex-direction:column; align-items:center; justify-content:center; gap:20px;
}

.loading-overlay.active { display:flex; }
.spinner {
  width:40px; height:40px; border:3px solid var(--spinner-track);
  border-top-color:var(--spinner-head); border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes cardUpdate { 0%{opacity:0.3;transform:scale(0.95)} 100%{opacity:1;transform:scale(1)} }
.card-updated { animation:cardUpdate 0.2s cubic-bezier(0.4,0,0.2,1); }
.loading-text { font-size:13px; color:var(--text2); font-weight:500; }
.loading-bar-wrap { width:240px; height:3px; background:var(--bar-bg); border-radius:99px; overflow:hidden; }
.loading-bar { height:100%; background:var(--accent); border-radius:99px; transition:width 0.2s cubic-bezier(0.4,0,0.2,1); width:0%; }

.debug-box {
  margin:10px 32px; padding:10px 14px;
  background:var(--log-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:11px; max-height:150px; overflow-y:auto; line-height:1.9;
}
.log-err { color:var(--pm-text); } .log-warn { color:var(--err-text); }
.log-ok  { color:var(--ok-text); } .log-info { color:var(--text3); }
.log-muted { color:var(--text4); }

/* ===== 요약 바 ===== */
.summary {
  background:var(--summary-bg); display:flex; gap:8px; padding:14px 32px;
  border-bottom:1px solid var(--border); flex-wrap:wrap; align-items:center;
}
.summary-right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.summary-elapsed { flex-basis:100%; font-size:11px; color:var(--text3); }
.chip {
  display:flex; flex-direction:column; align-items:center;
  padding:8px 18px; border-radius:var(--radius); border:2px solid;
  cursor:pointer; background:transparent; gap:1px;
  min-width:62px; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); font-family:inherit;
}
.chip:hover { background:var(--input-bg); }
.chip-label { font-size:10px; letter-spacing:1px; font-weight:500; }
.chip-count { font-size:20px; font-weight:500; }

/* ===== 뷰 탭 ===== */
.view-tabs {
  display:flex; background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.view-tab {
  padding:6px 14px; font-size:11px; cursor:pointer;
  background:transparent; border:none; color:var(--text3);
  font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); font-weight:500;
}
.view-tab.active { background:var(--surface); color:var(--text2); font-weight:500; box-shadow:var(--shadow-xs); }
.view-tab:hover:not(.active) { color:var(--text2); }

/* ===== 카드 그리드 ===== */
.grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px; padding:20px 32px;
}
/* 영역 점검 결과 — 먼지 포집처럼 영역별로 묶어서 표시할 때 */
.grid.zone-grouped { display:flex; flex-direction:column; gap:0; }
.zone-result-group { margin-bottom:22px; }
.zone-result-header {
  font-size:10px; font-weight:500; color:var(--text4); letter-spacing:1px; text-transform:uppercase;
  padding:5px 0 9px; border-bottom:1px solid var(--border); margin-bottom:12px;
  display:flex; align-items:center; gap:6px;
}
.zone-result-count { font-weight:400; color:var(--text4); }
.zone-result-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.card {
  border-radius:var(--radius); border:1.5px solid; padding:10px;
  display:flex; flex-direction:column; align-items:center;
  gap:4px; cursor:pointer; position:relative;
  transition:opacity 0.15s cubic-bezier(0.4,0,0.2,1);
}
.card:hover { opacity:0.85; }
.card-ok  { background:var(--ok-bg);  border-color:var(--ok-border); }
.card-no  { background:var(--no-bg);  border-color:var(--no-border); }
.card-em  { background:var(--em-bg);  border-color:var(--em-border); }
.card-pm  { background:var(--pm-bg);  border-color:var(--pm-border); }
.card-err { background:var(--err-bg); border-color:var(--err-border); }
.card-load{ background:var(--input-bg); border-color:var(--border); animation:cardLoadPulse 1.4s ease-in-out infinite; }
@keyframes cardLoadPulse{ 0%,100%{opacity:.5} 50%{opacity:.85} }
.card-status { font-size:11px; font-weight:500; letter-spacing:2px; }
.card-id { font-size:14px; font-weight:500; color:var(--text2); }
.card-meta { font-size:11px; color:var(--text2); font-weight:500; white-space:nowrap; }
.card-err-text { font-size:12px; color:var(--err-text); text-align:center; word-break:break-all; }
.card:hover .tooltip { display:block; }
.tooltip {
  display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--tooltip-bg); border:1px solid var(--tooltip-border); border-radius:var(--radius);
  padding:10px 14px; font-size:13px; white-space:normal; max-width:290px; min-width:200px; z-index:50;
  color:var(--tooltip-text); line-height:1.9; pointer-events:none;
  box-shadow:var(--shadow-md); word-break:keep-all;
}

/* ===== 리스트 뷰 ===== */
.list-toolbar { display:flex; align-items:center; gap:10px; padding:14px 32px 0; flex-wrap:wrap; }
.list-filter-sel {
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text2); padding:6px 10px; font-size:12px; outline:none; font-family:inherit; cursor:pointer;
}
.list-view { padding:14px 32px; }
.list-header {
  display:grid; grid-template-columns:110px 1fr 64px 1fr; padding:8px 14px;
  font-size:10px; letter-spacing:1.2px; text-transform:uppercase; font-weight:500;
  color:var(--text4); background:var(--input-bg);
  border:1.5px solid var(--border); border-radius:var(--radius) var(--radius) 0 0;
}
.list-body {
  border:1.5px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius) var(--radius); overflow:hidden;
  max-height:520px; overflow-y:auto; background:var(--surface);
}
.list-row {
  display:grid; grid-template-columns:110px 1fr 64px 1fr;
  padding:9px 14px; font-size:12px; cursor:pointer;
  border-bottom:1px solid var(--border2); align-items:center; transition:background 0.15s cubic-bezier(0.4,0,0.2,1);
}
.list-row:last-child { border-bottom:none; }
.list-row:hover { background:var(--input-bg); }
.list-id-cell   { color:var(--text2); font-size:13px; font-weight:500; }
.list-loc-cell  { color:var(--text3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-status-cell { font-weight:500; font-size:11px; letter-spacing:1px; }
.list-time-cell { color:var(--text3); font-size:11px; }

/* ===== 모드 탭 ===== */
.mode-tabs {
  display:flex; gap:3px; padding:4px;
  background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); width:fit-content;
}
.mode-tab {
  padding:7px 18px; font-size:12px; font-weight:400; cursor:pointer;
  background:transparent; border:none; color:var(--text3);
  font-family:inherit; border-radius:var(--radius-sm); transition:background-color 0.15s cubic-bezier(0.4,0,0.2,1),color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.mode-tab.active {
  background:var(--surface); color:var(--text);
  font-weight:500;
}
.mode-tab:hover:not(.active) { color:var(--text); background:color-mix(in srgb,var(--accent) 6%, transparent); }

/* ===== 단일 검색 결과 ===== */
.single-detail-wrap { margin-top:14px; }
.single-detail-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.single-detail-title { font-size:13px; font-weight:500; color:var(--text2); }
.single-charts-row { display:flex; gap:14px; margin-bottom:16px; }
.single-chart-panel { flex:1; min-width:0; display:flex; flex-direction:column; }
.single-chart-panel-label { font-size:10px; font-weight:500; color:var(--text3); margin-bottom:6px; letter-spacing:0.6px; text-transform:uppercase; }
.chart-legend-bar { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.chart-legend-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px 3px 7px; border-radius:999px;
  font-size:11px; font-weight:500; color:var(--text2);
  background:var(--surface); border:1.5px solid var(--border);
  user-select:none; white-space:nowrap;
}
.clc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.clc-bar { width:10px; height:8px; border-radius:2px; flex-shrink:0; }
.single-chart-wrap {
  position:relative; flex:1; min-height:210px; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 12px 10px; box-shadow:var(--shadow-xs);
}
.motor-stat-chip { font-weight:500; }
@media (max-width:768px) { .single-charts-row { flex-direction:column; } }
.single-pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; flex-wrap:wrap; }
.pg-btn {
  background:transparent; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:5px 11px; font-size:12px; color:var(--text3); cursor:pointer;
  font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); min-width:34px; font-weight:500;
}
.pg-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.pg-btn.active { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); font-weight:500; }
.pg-btn:disabled { opacity:0.3; cursor:not-allowed; }
.pg-info { font-size:11px; color:var(--text4); padding:0 4px; }
.single-detail-scroll { overflow-x:auto; border-radius:var(--radius); border:1.5px solid var(--border); box-shadow:var(--shadow-xs); }
.single-detail-table {
  width:100%; border-collapse:collapse; font-size:12px;
  background:var(--surface); table-layout:fixed;
}
.single-detail-table colgroup col:nth-child(1) { width:44%; }
.single-detail-table colgroup col:nth-child(2),
.single-detail-table colgroup col:nth-child(3),
.single-detail-table colgroup col:nth-child(4) { width:18.67%; }
.single-detail-table-motor { min-width:560px; }
.single-detail-table-motor colgroup col:nth-child(1) { width:26%; }
.single-detail-table-motor colgroup col:nth-child(2),
.single-detail-table-motor colgroup col:nth-child(3),
.single-detail-table-motor colgroup col:nth-child(4) { width:12%; }
.single-detail-table-motor colgroup col:nth-child(5) { width:14%; }
.single-detail-table-motor colgroup col:nth-child(6) { width:24%; }
.single-detail-table th {
  background:var(--input-bg); color:var(--text3); font-size:10px; font-weight:500;
  letter-spacing:1px; padding:9px 10px;
  border-bottom:1.5px solid var(--border); text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; text-transform:uppercase;
}
#cardDetailTableWrap .single-detail-table th {
  white-space:normal; font-size:11px; letter-spacing:0.5px; line-height:1.4;
}
.single-detail-table th:first-child { text-align:left; }
.single-detail-table td {
  padding:8px 10px; border-bottom:1px solid var(--border2);
  color:var(--text2); white-space:nowrap; text-align:center;
  overflow:hidden; text-overflow:ellipsis;
}
.single-detail-table td:first-child { text-align:left; font-size:11px; color:var(--text3); }
.single-detail-table tr:last-child td { border-bottom:none; }
.single-detail-table tr:hover td { background:var(--input-bg); }

/* ===== 카드 상세 — 시간대별 평균 행 클릭 시 원본 데이터 펼침 ===== */
.card-detail-hour-row { cursor:pointer; }
.card-detail-hour-row td:first-child { position:relative; padding-left:18px; }
.card-detail-hour-row td:first-child::before {
  content:'▸'; position:absolute; left:2px; top:50%; transform:translateY(-50%);
  font-size:9px; color:var(--text4); transition:transform 0.15s cubic-bezier(0.4,0,0.2,1);
}
.card-detail-hour-row.expanded td:first-child::before { transform:translateY(-50%) rotate(90deg); color:var(--accent); }
.card-detail-hour-expand td { padding:0; border-bottom:1px solid var(--border2); }
.card-detail-hour-raw-wrap { background:var(--input-bg); padding:8px 10px 8px 26px; }
.card-detail-hour-raw-table { width:100%; border-collapse:collapse; font-size:10.5px; }
.card-detail-hour-raw-table th {
  color:var(--text4); font-weight:500; text-align:center; padding:3px 6px;
  border-bottom:1px solid var(--border2); font-size:9.5px;
}
.card-detail-hour-raw-table th:first-child { text-align:left; }
.card-detail-hour-raw-table td { color:var(--text3); text-align:center; padding:3px 6px; }
.card-detail-hour-raw-table td:first-child { text-align:left; }
.card-detail-hour-raw-table tr:not(:last-child) td { border-bottom:1px dashed var(--border2); }
.single-detail-empty { font-size:13px; color:var(--text4); padding:16px 0; }

/* ===== 영역 지정 ===== */
.zone-header {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.zone-search-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.zone-lang-filter {
  display:flex; gap:3px; padding:3px;
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius);
}
.zone-lang-btn {
  padding:5px 12px; font-size:11px; font-weight:400; cursor:pointer;
  background:transparent; border:none; color:var(--text3);
  font-family:inherit; border-radius:var(--radius-sm); white-space:nowrap;
  transition:background-color 0.15s cubic-bezier(0.4,0,0.2,1),color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.zone-lang-btn.active { background:var(--surface); color:var(--text); font-weight:500; }
.zone-lang-btn:hover:not(.active) { color:var(--text); background:color-mix(in srgb,var(--accent) 6%, transparent); }
.zone-search-wrap { position:relative; display:inline-flex; align-items:center; }
.zone-search-icon {
  position:absolute; left:10px; font-size:15px; line-height:1;
  color:var(--text4); pointer-events:none;
}
.zone-search-input {
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:7px 13px; font-size:12px; outline:none;
  font-family:inherit; width:200px; transition:border-color 0.15s cubic-bezier(0.4,0,0.2,1),box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
}
/* input[type=text] 전역 규칙(padding:8px 13px)보다 명시도를 높여 좌측 아이콘 여백을 확실히 확보 */
.zone-search-wrap .zone-search-input { padding-left:32px; }
.zone-search-input:focus { border-color:var(--accent); }
.zone-search-input::placeholder { color:var(--text4); }
.btn-zone-toggle {
  background:transparent; color:var(--text3); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:6px 13px; font-size:12px; cursor:pointer;
  font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.btn-zone-toggle:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
.zone-toggle-arrow { font-size:10px; display:inline-block; transition:transform 0.2s cubic-bezier(0.4,0,0.2,1); }
.zone-toggle-arrow.open { transform:rotate(180deg); }
.zone-grid-wrap {
  overflow:hidden; transition:max-height 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.2s cubic-bezier(0.4,0,0.2,1);
  max-height:0; opacity:0;
}
.zone-grid-wrap.open { max-height:9999px; opacity:1; }
.zone-grid { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:4px; }
.zone-btn {
  display:flex; flex-direction:column; align-items:center;
  padding:9px 16px; border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--input-bg); color:var(--text2);
  font-family:inherit; font-size:12px; font-weight:500;
  cursor:pointer; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); gap:2px; min-width:84px;
}
.zone-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); box-shadow:var(--shadow-xs); }
.zone-btn.selected { border-color:var(--accent); background:var(--accent-bg); color:var(--accent-text); }
.zone-btn.hidden { display:none; }
.zone-btn.highlight { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%, transparent); }
.zone-btn .zone-name { font-size:13px; font-weight:500; }
.zone-btn .zone-range { font-size:10px; opacity:0.7; }
.zone-btn .zone-location { font-size:10px; color:var(--text3); opacity:0.85; }
.zone-no-result { font-size:12px; color:var(--text4); padding:8px 0; }
.zone-select-row { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.zone-select-count { font-size:11px; color:var(--text3); font-weight:500; }
.btn-icon-sm {
  background:transparent; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:5px 10px; font-size:12px; color:var(--text2); cursor:pointer;
  font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1); display:none; align-items:center; gap:4px;
}
.btn-icon-sm:hover { color:var(--accent); border-color:var(--accent); }
.btn-icon-sm.visible { display:inline-flex; }

/* ===== 스크롤바 ===== */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--text4); }
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

/* ===== 모바일 고정 버튼 ===== */
.mobile-fixed-run {
  display:none;
  position:fixed; bottom:60px; left:0; right:0; z-index:99;
  padding:0 16px; pointer-events:none;
}
.mobile-fixed-run .inner {
  pointer-events:all;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:var(--shadow-lg);
}
.mobile-fixed-run .btn-primary { flex:1; padding:11px 0; font-size:14px; }
@media (max-width:768px) {
  body.zone-active .mobile-fixed-run { display:block; }
  .controls { padding:14px 16px; }
  .header { padding:12px 16px 10px; flex-wrap:wrap; row-gap:8px; }
  .grid { padding:14px 16px; grid-template-columns:1fr; }
  .summary { padding:10px 16px; flex-wrap:wrap; row-gap:6px; }
  .summary-right { width:100%; margin-left:0; justify-content:flex-end; }
  .list-toolbar { padding:10px 16px 0; }
  .list-view { padding:10px 16px; }
  .debug-box { margin:8px 16px; }
  /* iOS 자동 줌 방지 (16px 미만 input 포커스 시 줌 발생) — font-size는 유지, padding 축소 */
  input, select, textarea { font-size:16px !important; padding-top:6px !important; padding-bottom:6px !important; }
  select { padding-top:5px !important; padding-bottom:5px !important; }
  /* 터치 타겟 최소 44px */
  .mode-tabs { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .mode-tab { min-height:44px; padding:10px 8px; text-align:center; }
  .chip { min-height:44px; padding:6px 14px; }
  .view-tab { min-height:44px; padding:0 14px; display:flex; align-items:center; }
  /* 카드 가독성 */
  .card-meta { line-height:1.5; }
  .tooltip { font-size:15px; line-height:2.1; }
  .tooltip-time { font-size:13px; }
  .card-id     { font-size:15px; }
  .card-status { font-size:12px; letter-spacing:1.5px; }
  /* 리스트 뷰 2줄 레이아웃 */
  .list-header { display:none; }
  .list-body   { max-height:none; }
  .list-row {
    grid-template-columns:1fr auto;
    grid-template-areas:"id status" "loc loc" "time time";
    row-gap:2px; padding:12px 14px;
  }
  .list-id-cell     { grid-area:id; font-size:14px; }
  .list-loc-cell    { grid-area:loc; font-size:11px; color:var(--text3); white-space:normal; }
  .list-status-cell { grid-area:status; }
  .list-time-cell   { grid-area:time; font-size:11px; color:var(--text3); }
  /* 모달 드래그 핸들 표시 */
  .modal-drag-handle { display:block; }
  /* 히스토리 페이지 */
  #historyPage { padding:8px 16px 16px !important; }
  .history-toolbar { gap:8px; }
  .history-toolbar select, .history-toolbar .id-input { flex:1 1 100%; min-width:0 !important; }
  .history-toolbar-spacer { display:none; }
  #weeklyReportBtn { flex:1 1 100%; }
  .history-grid-table { font-size:12px; }
  .history-grid-table .hist-th-id, .history-grid-table .hist-td-id { min-width:130px; }
}

/* ===== 푸터 ===== */
.footer {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--surface); border-top:1px solid var(--border);
  padding:8px 32px;
  display:flex; align-items:center; justify-content:flex-end;
  gap:14px; z-index:100;
}
.footer-version { font-size:11px; color:var(--text4); font-family:var(--font-mono); letter-spacing:-0.02em; }
.footer-brand { font-family:var(--font-mono); font-size:11px; color:var(--text3); font-weight:500; letter-spacing:-0.02em; }
.footer-date { font-size:11px; color:var(--text4); font-family:var(--font-mono); letter-spacing:-0.02em; }
.footer-divider { width:1px; height:10px; background:var(--border); display:inline-block; }

/* ===== 시트 저장 버튼 ===== */
.btn-sheet {
  background:transparent; color:var(--ok-text); border:1.5px solid var(--ok-border);
  border-radius:var(--radius); padding:10px 20px; font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.btn-sheet:hover:not(:disabled) { background:var(--ok-bg); }
.btn-sheet:disabled { opacity:0.3; cursor:not-allowed; }

/* ===== 먼지 포집 영역 선택기 ===== */
.dzp-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.btn-sm {
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text2); font-size:11px; padding:5px 11px; cursor:pointer; font-weight:500;
  font-family:inherit; white-space:nowrap; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.btn-sm:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.dzp-select-info { font-size:11px; color:var(--text3); white-space:nowrap; font-weight:500; }
.dzp-wrap { max-height:260px; overflow-y:auto; padding-right:2px; padding-bottom:4px; }
.dust-result-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.dust-card.result-hidden { display:none; }
.dust-zone-group.result-hidden { display:none; }
.dzp-compact-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.dzp-compact-btn {
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:7px 11px; cursor:pointer; font-family:inherit; text-align:left;
  transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.dzp-compact-btn:hover { border-color:var(--accent); background:var(--accent-bg); }
.dzp-compact-btn.selected { border-color:var(--accent); background:var(--accent-bg); }
.dzp-compact-btn.hl { outline:2px solid var(--accent); outline-offset:1px; }
.dzp-compact-btn.hidden { display:none; }
.dzp-full-zone { margin-bottom:7px; border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.dzp-full-zone.hidden { display:none; }
.dzp-full-zone.hl { outline:2px solid var(--accent); outline-offset:1px; }
.dzp-fz-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 13px; cursor:pointer; background:var(--input-bg);
  font-size:12px; font-weight:500; color:var(--text);
  transition:background 0.15s cubic-bezier(0.4,0,0.2,1); user-select:none;
}
.dzp-fz-header:hover { background:var(--surface2); }
.dzp-fz-header.selected { background:var(--accent-bg); color:var(--accent-text); }
.dzp-fz-count { font-size:10px; color:var(--text3); font-weight:400; }
.dzp-fz-ids { display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px; }
.dzp-id-chip { font-size:10px; padding:2px 8px; border-radius:6px; background:var(--surface); border:1px solid var(--border); color:var(--text3); }
.dzp-id-chip.selected { background:var(--accent-bg); color:var(--accent-text); border-color:color-mix(in srgb,var(--accent) 40%, transparent); font-weight:500; }
.dzp-id-chip.hl { background:var(--accent-bg); color:var(--accent-text); border-color:var(--accent); font-weight:500; }
.dz-name { font-size:11px; font-weight:500; color:var(--text); }
.dz-ids { font-size:10px; color:var(--text3); margin-top:2px; }
.dzp-empty { font-size:12px; color:var(--text3); padding:14px 0; }

/* ===== 먼지 포집 카드 그리드 ===== */
.dust-cards-title { font-size:12px; color:var(--text3); margin-bottom:10px; }
.dust-cards-grid { display:flex; flex-direction:column; }
.dust-zone-group { margin-bottom:22px; }
.dust-zone-header {
  font-size:10px; font-weight:500; color:var(--text4); letter-spacing:1px; text-transform:uppercase;
  padding:5px 0 9px; border-bottom:1px solid var(--border); margin-bottom:12px;
  display:flex; align-items:center; gap:6px;
}
.dust-zone-count { font-weight:400; color:var(--text4); }
.dust-zone-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.dust-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:14px 16px; cursor:pointer;
  transition:border-color 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.15s cubic-bezier(0.4,0,0.2,1);
  min-height:90px; display:flex; flex-direction:column; gap:3px; user-select:none;
  box-shadow:var(--shadow-xs);
}
.dust-card:hover { border-color:var(--accent); }
.dust-card.loading { opacity:0.4; cursor:default; pointer-events:none; }
.dust-card.empty { border-style:dashed; cursor:default; box-shadow:none; }
.dust-card.empty:hover { border-color:var(--border); box-shadow:none; transform:none; }
.dust-card-id { font-size:14px; font-weight:500; color:var(--text); }
.dust-card-loc { font-size:11px; color:var(--text3); }
.dust-card-total { font-size:20px; font-weight:500; color:var(--ok-text); line-height:1.2; margin-top:5px; }
.dust-card-meta { font-size:11px; color:var(--text3); }

/* ===== 먼지 포집 모달 ===== */
.dust-modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.dust-modal-box {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  width:100%; max-width:580px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
#cardDetailModalBox { max-width:668px; }
.dust-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.dust-modal-title { font-size:15px; font-weight:500; color:var(--text); }
.dust-modal-body { overflow-y:auto; padding:16px 20px; flex:1; }
.card-detail-id-tabs { display:flex; gap:5px; overflow-x:auto; padding:10px 20px; flex-shrink:0; scrollbar-width:none; border-bottom:1px solid var(--border); }
.card-detail-id-tabs::-webkit-scrollbar { display:none; }
.card-detail-id-tab {
  flex-shrink:0; padding:4px 10px; font-size:11px; font-weight:500; border-radius:var(--radius-sm);
  border:1.5px solid; cursor:pointer; background:transparent; font-family:inherit;
  transition:all 0.15s cubic-bezier(0.4,0,0.2,1); white-space:nowrap;
}
.card-detail-id-tab.active { opacity:1; }
.card-detail-id-tab:not(.active) { opacity:0.45; filter:grayscale(0.4); }
.dust-modal-summary {
  display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
  background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:14px;
}

/* ===== 먼지 포집 stat ===== */
.dust-stat { display:flex; flex-direction:column; gap:3px; min-width:90px; }
.dust-stat-label { font-size:11px; color:var(--text3); font-weight:500; letter-spacing:0.5px; text-transform:uppercase; }
.dust-stat-value { font-size:22px; font-weight:500; color:var(--text); line-height:1.1; }
.dust-stat-sub { font-size:11px; color:var(--text4); }


/* ===== 점검 전 빈 상태 힌트 ===== */
.pre-search-hint {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:48px 24px; color:var(--text4);
  border:2px dashed var(--border2); border-radius:var(--radius-lg);
  margin-top:8px;
}
.psh-icon { font-size:36px; line-height:1; }
.psh-title { font-size:15px; font-weight:500; color:var(--text3); }
.psh-desc  { font-size:13px; color:var(--text4); text-align:center; }

/* ===== 필터 후 결과 없음 ===== */
.empty-inline {
  grid-column:1/-1; display:flex; align-items:center; justify-content:center;
  gap:8px; padding:32px 16px; color:var(--text4); font-size:14px;
}
.empty-inline-icon { font-size:20px; }

/* ===== 카드 상태 아이콘 ===== */
.card-icon { margin-right:4px; font-style:normal; font-size:14px; vertical-align:-2px; }

/* ===== 요약 도넛 차트 ===== */
.summary-donut { display:flex; align-items:center; margin-right:4px; flex-shrink:0; }

/* ===== 드래그 핸들 (모바일 하단 시트) ===== */
.modal-drag-handle {
  display:none; width:36px; height:4px;
  background:var(--border); border-radius:2px;
  margin:10px auto 0; flex-shrink:0; cursor:grab;
}

/* ===== 맨 위로 FAB ===== */
/* Factory 스펙: 액센트는 데이터 신호 전용이라 버튼 배경 채우기 금지 — 중립 dark/light fill 사용 */
.scroll-top-fab {
  position:fixed; bottom:64px; right:16px; z-index:200;
  width:46px; height:46px; border-radius:50%;
  background:var(--btn-bg); color:var(--btn-text);
  border:none; cursor:pointer; display:none;
  align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); transition:opacity 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.15s cubic-bezier(0.4,0,0.2,1), filter 0.15s cubic-bezier(0.4,0,0.2,1);
}
.scroll-top-fab:hover { filter:brightness(1.3); }
.scroll-top-fab .material-icons-round { font-size:26px; line-height:1; }
/* 이모지 아이콘 대체용 — 버튼/타이틀에 인라인으로 쓰는 단색 아이콘 */
.material-icons-round.ico { font-size:15px; line-height:1; vertical-align:-3px; margin-right:3px; }
.material-icons-round.ico-solo { font-size:16px; line-height:1; vertical-align:-3px; margin-right:0; }
.scroll-top-fab:active { transform:scale(0.9); }

/* ===== 모달 모바일 전체화면 ===== */
@media (max-width:768px) {
  .dust-modal-overlay {
    padding:0;
    align-items:flex-end;
  }
  .dust-modal-box {
    max-width:100%;
    max-height:92dvh;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  }
  #cardDetailModalBox { max-width:100%; }
}

/* ===== 페이지 탭 (점검 / 히스토리) ===== */
.page-tabs {
  display:flex; gap:3px; padding:4px;
  background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
}
.page-tab {
  padding:7px 18px; font-size:12px; font-weight:400; cursor:pointer;
  background:transparent; border:none; color:var(--text3);
  font-family:inherit; border-radius:var(--radius-sm); transition:background-color 0.15s cubic-bezier(0.4,0,0.2,1),color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.page-tab.active { background:var(--surface); color:var(--text); font-weight:500; }
.page-tab:hover:not(.active) { color:var(--text2); }
@media (max-width:768px) { .page-tabs { order:3; width:100%; justify-content:center; } }

/* ===== 점검표 (현장 체크리스트 폼, 모바일 기준) =====
   사용자 연령대가 있어 전체적으로 글씨/버튼을 넉넉하게 키움 */
body.checklist-page-active { padding-bottom:46px; }
.checklist-wrap { max-width:640px; margin:0 auto; padding:20px 20px 40px; }
/* 제출 중엔 다른 항목을 못 건드리게 폼 전체를 잠금 */
#checklistForm.checklist-form-locked { pointer-events:none; opacity:0.55; }
.checklist-header { margin-bottom:18px; }
.checklist-title { font-size:22px; font-weight:600; color:var(--text); margin-bottom:5px; }
.checklist-desc { font-size:15px; color:var(--text2); line-height:1.5; }
.checklist-section {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:16px; box-shadow:var(--shadow-xs);
}
.checklist-section-title { font-size:18px; font-weight:600; color:var(--text); margin-bottom:3px; }
.checklist-section-desc { font-size:13px; color:var(--text2); margin-bottom:10px; }
.checklist-q { padding:16px 0; border-top:1px solid var(--border2); }
.checklist-q:first-child { border-top:none; }
.checklist-q-label { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }
.checklist-q-hint { font-size:13px; color:var(--text2); line-height:1.55; margin-bottom:12px; }
.checklist-toggle-group { display:flex; gap:8px; flex-wrap:wrap; }
.checklist-toggle-btn {
  flex:1; min-width:72px; padding:13px 0; text-align:center;
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--input-bg);
  color:var(--text2); font-size:16px; font-weight:500; cursor:pointer; font-family:inherit;
  transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.checklist-toggle-btn:hover { border-color:var(--text3); color:var(--text); }
.checklist-toggle-btn.on-ok { background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-text); }
.checklist-toggle-btn.on-bad { background:var(--pm-bg); border-color:var(--pm-border); color:var(--pm-text); }
.checklist-toggle-btn.on-sel { background:var(--accent-bg); border-color:var(--accent); color:var(--accent-text); }
.checklist-input, .checklist-textarea {
  width:100%; box-sizing:border-box; background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:var(--radius); color:var(--text); padding:12px 14px; font-size:16px;
  font-family:inherit; outline:none; transition:border-color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.checklist-input:focus, .checklist-textarea:focus { border-color:var(--accent); }
.checklist-input:disabled { background:var(--surface2); color:var(--text4); cursor:not-allowed; }
.checklist-textarea { resize:vertical; min-height:76px; }
.checklist-row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.checklist-row3 label { display:block; font-size:13px; font-weight:500; color:var(--text2); margin-bottom:5px; min-width:0; }
.checklist-check-row { display:flex; align-items:center; gap:9px; margin-top:12px; }
.checklist-check-row input[type=checkbox] { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.checklist-check-row input[type=checkbox]:disabled { cursor:not-allowed; opacity:0.5; }
.checklist-check-row span { font-size:15px; color:var(--text); }
.checklist-wind-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.checklist-wind-row .checklist-input { flex:1; min-width:0; }
.checklist-wind-row .cl-wind-row-remove {
  flex-shrink:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid var(--border); border-radius:var(--radius);
  color:var(--text3); cursor:pointer; transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.checklist-wind-row .cl-wind-row-remove:hover { border-color:var(--pm-border); color:var(--pm-text); }
.checklist-submit-bar { padding:8px 0 0; }
.checklist-submit-bar .btn-primary { width:100%; padding:16px 0; font-size:17px; }
.checklist-success { text-align:center; padding:70px 20px; }
.checklist-success .material-icons-round { font-size:52px; color:var(--ok-text); margin-bottom:12px; }
@media (max-width:640px) {
  .checklist-wrap { padding:14px 14px 32px; }
  .checklist-row3 { grid-template-columns:1fr; }
}

/* ===== 점검 완료 후 사진 공유 안내 팝업 ===== */
.checklist-photo-modal-box { max-width:520px; }
.checklist-photo-modal-msg { font-size:17px; font-weight:600; color:var(--text); margin-bottom:6px; }
.checklist-photo-modal-hint { font-size:14px; color:var(--text2); line-height:1.5; margin-bottom:14px; }
.checklist-photo-example-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.checklist-photo-example { border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--input-bg); }
.checklist-photo-example img { width:100%; display:block; max-height:38vh; object-fit:contain; background:var(--surface2); }
.checklist-photo-example-label { font-size:12px; color:var(--text2); text-align:center; padding:7px 6px; }

/* ===== 점검 히스토리 그리드 ===== */
.history-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.history-toolbar-spacer { flex:1; }
@media (max-width:768px) {
  /* 점검 요청서 xlsx 생성은 PC 전용 워크플로우라 모바일에서는 비활성 표시 */
  #weeklyReportBtn { pointer-events:none; opacity:0.35; }
}
.history-legend { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.hist-chip {
  font-size:11.5px; font-weight:500; letter-spacing:0.4px; padding:5px 10px; border-radius:20px;
  border:1.5px solid var(--border); display:inline-flex; align-items:center; gap:6px;
}
.hist-chip em {
  font-style:normal; font-weight:500; font-size:10.5px; letter-spacing:0;
  color:var(--text2);
}
.hist-chip.ok   { background:var(--ok-chip-bg);  border-color:var(--ok-chip-border);  color:var(--ok-chip-text); }
.hist-chip.no   { background:var(--no-chip-bg);  border-color:var(--no-chip-border);  color:var(--no-chip-text); }
.hist-chip.em   { background:var(--em-chip-bg);  border-color:var(--em-chip-border);  color:var(--em-chip-text); }
.hist-chip.pm   { background:var(--pm-chip-bg);  border-color:var(--pm-chip-border);  color:var(--pm-chip-text); }
.hist-chip.excl { background:#fef3c7; border-color:#eab308; color:#92640a; }
[data-theme="dark"] .hist-chip.excl { background:#3a2e08; color:#fbbf24; border-color:#7c5e12; }
@media (max-width:768px) {
  .history-legend { gap:5px; }
  .hist-chip { font-size:11px; padding:5px 9px; white-space:nowrap; }
  .hist-chip em { font-size:10.5px; }
}

.history-grid-scroll {
  /* 헤더(71) + historyPage 상단패딩(8) + 툴바(37+margin 10) + 범례(26+margin 14)
     + body.history-page-active의 padding-bottom(46) + historyPage 하단패딩 여유분 = 228px.
     이 값이 실제 렌더 높이와 어긋나면 페이지 자체에도 스크롤이 생기니(더블 스크롤)
     위 요소(특히 .history-legend/.hist-chip) 높이가 바뀌면 반드시 같이 맞출 것. */
  overflow:auto; height:calc(100vh - 228px);
  border:1.5px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
}
.history-grid-table { border-collapse:separate; border-spacing:0; font-size:13px; white-space:nowrap; }
.history-grid-table th, .history-grid-table td { padding:9px 14px; border-bottom:1px solid var(--border2); border-right:1px solid var(--border2); }
.history-grid-table thead th {
  position:sticky; top:0; z-index:2; background:var(--input-bg); color:var(--text2);
  font-weight:500; font-size:12px; letter-spacing:0.2px; text-align:center;
}
.history-grid-table .hist-th-id { left:0; z-index:3; text-align:left; min-width:170px; }
.history-grid-table .hist-td-id {
  position:sticky; left:0; z-index:1; background:var(--surface);
  min-width:170px; border-right:1.5px solid var(--border);
}
.history-grid-table tbody tr:nth-child(even) .hist-td-id { background:var(--surface2); }
.hist-id { font-size:13.5px; font-weight:500; color:var(--text); }
.hist-loc { font-size:11.5px; color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; margin-top:1px; }
.history-grid-table .hist-td { text-align:center; font-weight:500; font-size:12.5px; letter-spacing:0.3px; color:var(--text3); }
.hist-ok   { background:var(--ok-bg);  color:var(--ok-text); }
.hist-no   { background:var(--no-bg);  color:var(--no-text); }
.hist-em   { background:var(--em-bg);  color:var(--em-text); }
.hist-pm   { background:var(--pm-bg);  color:var(--pm-text); }
.hist-excl { background:#fef3c7; color:#92640a; font-size:10.5px; }
[data-theme="dark"] .hist-excl { background:#3a2e08; color:#fbbf24; }
.hist-blank { color:var(--text4); opacity:0.4; }

/* ===== 히스토리 일자별 통계 (제품 그리드와 같은 table 안의 sticky 헤더 행으로 쌓음) ===== */
/* 행 높이(28px)는 script.js의 HIST_STAT_ROW_H와 반드시 일치해야 sticky 오프셋이 안 어긋남 */
.history-grid-table thead tr.hist-stat-row th {
  box-sizing:border-box; height:28px; padding:2px 12px;
  font-size:12px; font-weight:500; letter-spacing:0.2px;
}
.history-grid-table thead tr.hist-stat-row th.hist-stat-label-th { text-align:left; color:var(--text2); background:var(--input-bg); }
.hist-stat-th.hist-stat-ok   { color:var(--ok-text); background:var(--ok-bg); }
.hist-stat-th.hist-stat-no   { color:var(--no-text); background:var(--no-bg); }
.hist-stat-th.hist-stat-em   { color:var(--em-text); background:var(--em-bg); }
.hist-stat-th.hist-stat-pm   { color:var(--pm-text); background:var(--pm-bg); }
.hist-stat-th.hist-stat-excl { color:#92640a; background:#fef3c7; }
[data-theme="dark"] .hist-stat-th.hist-stat-excl { color:#fbbf24; background:#3a2e08; }
.hist-stat-th.hist-stat-problem { color:var(--pm-text); background:var(--pm-bg); font-weight:500; }
/* 문제 합 최댓값 열 — 액센트(실시간 신호 용도)로 가장 문제가 몰린 날짜를 한눈에 표시 */
.hist-stat-th.hist-stat-peak { color:var(--accent-text); background:var(--accent-bg); box-shadow:inset 0 0 0 1.5px var(--accent); }

/* ===== 주간 점검 요청서 모달 ===== */
@media (min-width:769px) { #weeklyReportModalBox { max-width:960px; } }
.wr-requester-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.wr-summary { font-size:12px; color:var(--text3); margin-bottom:10px; }
.wr-summary b { color:var(--text); }
.wr-section-title { font-size:12px; font-weight:500; color:var(--pm-text); margin:16px 0 8px; }
.wr-table th { white-space:nowrap; }
.wr-table td { font-size:11px; }
/* 순번/발생시점/제품ID/오류코드는 짧은 고정폭, 설치장소/비고는 넓게 + 줄바꿈 허용 (말줄임표 방지) */
.wr-table th:nth-child(1), .wr-table td:nth-child(1) { width:6%; }
.wr-table th:nth-child(2), .wr-table td:nth-child(2) { width:12%; }
.wr-table th:nth-child(3), .wr-table td:nth-child(3) { width:10%; }
.wr-table th:nth-child(4), .wr-table td:nth-child(4) {
  width:33%; white-space:normal; overflow:visible; text-overflow:clip; text-align:left;
}
.wr-table th:nth-child(5), .wr-table td:nth-child(5) { width:8%; }
.wr-table th:nth-child(6), .wr-table td:nth-child(6) {
  width:31%; white-space:normal; overflow:visible; text-overflow:clip; text-align:left;
}
/* 6열(비고)이 없는 5열짜리 "한달 이상" 표는 폭 배분을 다시 100%로 맞춤 (5번째 열이 좁아 헤더 잘림 방지) */
#wrOverdueTable th:nth-child(4), #wrOverdueTable td:nth-child(4),
#overdueBadgeTable th:nth-child(4), #overdueBadgeTable td:nth-child(4) { width:41%; }
#wrOverdueTable th:nth-child(5), #wrOverdueTable td:nth-child(5),
#overdueBadgeTable th:nth-child(5), #overdueBadgeTable td:nth-child(5) { width:31%; }
/* 반투명 배경은 테이블 전역 tr:hover 규칙(명시도 더 높음)에 덮여 마우스 올릴 때만 색이 바뀌는 것처럼
   보였음 — 불투명 색으로 바꾸고 hover 상태도 명시적으로 고정해 항상 같은 색이 보이게 함 */
.wr-new-row td { background:var(--em-chip-bg); font-weight:500; }
.wr-table tr.wr-new-row:hover td { background:var(--em-chip-bg); }
.wr-new-badge {
  display:inline-block; font-size:9px; font-weight:500; letter-spacing:0.3px;
  padding:1px 6px; border-radius:10px; background:var(--em-chip-bg); color:var(--em-chip-text);
  border:1px solid var(--em-chip-border); margin-right:3px;
}
.wr-overdue-badge {
  display:inline-block; font-size:9px; font-weight:500; letter-spacing:0.3px;
  padding:1px 6px; border-radius:10px; background:var(--pm-chip-bg); color:var(--pm-chip-text);
  border:1px solid var(--pm-chip-border); margin-right:3px;
}
.wr-code { font-weight:500; letter-spacing:0.4px; }
.wr-code-em { color:var(--em-text); }
.wr-code-pm { color:var(--pm-text); }
.wr-code-no { color:var(--text2); }
.wr-remark-input {
  width:100%; min-width:120px; background:var(--input-bg); border:1.5px solid var(--border);
  border-radius:5px; color:var(--text); padding:4px 7px; font-size:11px; outline:none; font-family:inherit;
  margin-top:3px;
}
.wr-remark-input:focus { border-color:var(--accent); }
.wr-actions { display:flex; justify-content:flex-end; margin-top:16px; }

/* 점검표 — 장소/세부구역 빠른 선택 칩 */
.cl-optional { font-size:13px; font-weight:400; color:var(--text3); }
.cl-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cl-chip-row:empty { display:none; }
.cl-chip {
  border:1.5px solid var(--border); background:var(--input-bg); color:var(--text2);
  border-radius:999px; padding:7px 13px; font-size:14px; font-family:inherit; cursor:pointer;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.cl-chip:hover { border-color:var(--text3); color:var(--text); }
.cl-chip.on { background:var(--accent-bg); border-color:var(--accent); color:var(--accent-text); font-weight:600; }
.cl-chip.done { background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-text); }
.cl-chip.more { border-style:dashed; color:var(--text3); }
.cl-chip-label { width:100%; font-size:12px; color:var(--text3); }
.cl-continue-btn { display:block; margin:20px auto 0; padding:12px 20px; font-size:15px; }

/* 점검표 — LCD 버전(로고) 선택 버튼 */
/* 로고는 흰 바탕 기준으로 만들어진 이미지라, 다크 모드에서도 버튼 전체를 항상 흰 바탕으로 고정 */
.cl-logo-btn,
.cl-logo-btn:hover { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 10px; background:#fff; color:#433f3d; border-color:#ddd9d5; }
.cl-logo-btn.on-sel { background:#fff; color:#b8430c; border-color:#ee6018; box-shadow:inset 0 0 0 1.5px #ee6018; }
.cl-logo-btn img { display:block; width:100%; max-width:180px; height:38px; object-fit:contain; background:#fff; border-radius:4px; padding:4px; box-sizing:border-box; }
.cl-logo-btn span { font-size:14px; font-weight:600; }

/* 점검자 관리 모달 */
.inspector-modal-box { max-width:440px; }
.inspector-modal-hint { font-size:13px; color:var(--text2); line-height:1.55; margin-bottom:12px; }
.inspector-add-row { display:flex; gap:8px; margin-bottom:14px; }
.inspector-add-row .checklist-input { flex:1; min-width:0; }
.inspector-add-row .btn-primary { padding:10px 18px; }
.inspector-list { display:flex; flex-direction:column; border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.inspector-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; font-size:15px; color:var(--text); border-bottom:1px solid var(--border2); }
.inspector-row:last-child { border-bottom:none; }
.inspector-empty { padding:16px; text-align:center; font-size:13px; color:var(--text3); }

/* 점검표 — 현장 담당자 서명 */
.cl-sign-wrap { position:relative; margin-top:10px; }
/* 서명은 테마와 상관없이 흰 바탕에 검은 선(저장되는 이미지와 같은 모습) */
.cl-sign-pad { display:block; width:100%; height:170px; background:#fff; border:1.5px dashed var(--border); border-radius:var(--radius); touch-action:none; cursor:crosshair; }
.cl-sign-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#b5b0ab; font-size:15px; pointer-events:none; }

/* 점검표 — 제출 전 확인 창 */
.cl-confirm-box { max-width:520px; }
.cl-confirm-lead { font-size:14px; color:var(--text2); margin-bottom:12px; }
.cl-confirm-sec { margin-bottom:14px; }
.cl-confirm-sec-title { font-size:13px; font-weight:600; color:var(--text3); margin-bottom:6px; }
.cl-confirm-row { display:flex; gap:10px; padding:7px 10px; border-bottom:1px solid var(--border2); font-size:14px; }
.cl-confirm-row.bad { background:var(--pm-bg); }
.cl-confirm-label { flex:0 0 108px; color:var(--text3); }
.cl-confirm-value { flex:1; min-width:0; color:var(--text); word-break:keep-all; overflow-wrap:anywhere; }
.cl-confirm-row.bad .cl-confirm-value { color:var(--pm-text); font-weight:600; }
.cl-confirm-note { display:block; font-size:12px; font-weight:400; color:var(--text2); margin-top:2px; }
.cl-confirm-warn { color:var(--pm-text); font-weight:600; }
.cl-confirm-actions { display:flex; gap:8px; justify-content:flex-end; padding:12px 20px; border-top:1px solid var(--border); flex-shrink:0; }
.cl-confirm-actions .btn-primary { padding:10px 22px; }

/* 점검 완료 보고 (업체 담당자 서명) — 보고서 영역은 PDF로 그대로 저장되므로 테마와 상관없이 흰 종이 모양 */
.cl-report { max-width:640px; margin:0 auto; }
.cl-report-guide { font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:12px; padding:12px 14px; background:var(--accent-bg); border:1.5px solid var(--accent); border-radius:var(--radius); }
.cl-report-sheet { background:#fff; color:#111; border:1px solid #ddd9d5; border-radius:6px; padding:22px 18px 16px; font-size:13px; }
/* 공통 input[type=text] 다크 스타일보다 우선하도록 보고서 영역 안으로 한정 */
.cl-report-sheet .clr-name-input { flex:1; min-width:0; font-size:16px; font-family:inherit; padding:8px 10px; border:1.5px solid #ddd9d5; border-radius:6px; background:#fff; color:#171514; }
.clr-name-text { display:none; font-size:16px; font-weight:600; }
.cl-report-sheet .cl-sign-pad { border-color:#c9c4bf; }
/* PDF로 만들 때만 — 입력칸 대신 글자로, 서명 칸 점선 테두리는 실선 밑줄로 */
.cl-report-sheet.capturing .clr-name-input { display:none; }
.cl-report-sheet.capturing .clr-name-text { display:inline; }
.cl-report-sheet.capturing .cl-sign-pad { border:none; border-bottom:1px solid #171514; border-radius:0; }
.cl-report-sheet.capturing .cl-sign-placeholder { display:none; }
/* PDF에는 화면용 둥근 테두리를 넣지 않음 (종이 한 장처럼) */
.cl-report-sheet.capturing { border:none; border-radius:0; }
.cl-report-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.cl-report-actions .btn-ghost { display:inline-flex; align-items:center; gap:4px; }
.cl-report-actions .btn-primary { padding:12px 20px; font-size:15px; }
.cl-report-skip { display:block; margin:14px auto 0; }
.cl-report-done { text-align:center; margin-top:16px; }
.cl-report-done-msg { font-size:14px; color:var(--text); line-height:1.6; margin-bottom:12px; }
.cl-report-done .btn-ghost { display:inline-flex; align-items:center; gap:4px; }

/* 점검 완료 화면 버튼 — 같은 모양으로 한 줄에 나란히 (좁은 화면에서는 같은 너비로 줄바꿈) */
.cl-done-btns { display:flex; gap:8px; justify-content:center; margin-top:18px; }
.cl-done-btn {
  flex:1 1 0; min-width:0; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:12px 6px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--input-bg);
  color:var(--text); font-size:13px; font-weight:500; font-family:inherit; cursor:pointer; line-height:1.3; word-break:keep-all;
  transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.cl-done-btn .material-icons-round { font-size:20px; color:var(--text3); }
.cl-done-btn:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-bg); }
.cl-done-btn:hover .material-icons-round { color:var(--accent); }
.checklist-success .cl-done-btns { max-width:420px; margin-left:auto; margin-right:auto; }
.cl-report-upload-msg { margin-top:14px; padding:10px 12px; font-size:13px; line-height:1.5; color:var(--pm-text); background:var(--pm-bg); border:1px solid var(--pm-border); border-radius:var(--radius); text-align:left; }

/* 고객용 점검표 — 종이 양식 "에어맥스 클린매트 점검표" 모양 */
.cf-title { font-size:24px; font-weight:800; text-align:center; letter-spacing:1px; padding-bottom:12px; border-bottom:2px solid #111; }
.cf-company { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:14px; padding:10px 2px; }
.cf-company > div { flex:1 1 140px; min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
.cf-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; }
.cf-table th, .cf-table td { border:1px solid #333; padding:8px 4px; text-align:center; vertical-align:middle; }
.cf-table thead th { background:#e7e7e7; font-weight:600; }
.cf-table td.cf-state { font-weight:600; }
.cf-table td.cf-state.bad { color:#c5221f; }
.cf-table td.cf-note { font-size:12px; word-break:keep-all; overflow-wrap:anywhere; }
.cf-confirm { text-align:center; font-size:15px; font-weight:700; margin:22px 0 10px; }
.cf-date { text-align:center; font-size:14px; font-weight:600; word-spacing:4px; margin-bottom:14px; }
.cf-people { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between; }
.cf-person { display:flex; align-items:center; gap:6px; flex:1 1 160px; min-width:0; font-size:14px; }
.cf-person-label { font-weight:700; flex-shrink:0; }
.cf-sign-label { font-size:12px; color:#6b6560; margin-top:12px; }
.cl-report-sheet .cl-sign-pad { height:140px; border-color:#c9c4bf; }
.cf-stamp { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:16px; font-size:20px; font-weight:800; }
.cf-stamp img { width:52px; height:52px; object-fit:contain; }
.cf-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:10px; border-top:1px solid #ddd; }
.cf-logo { height:26px; width:auto; }
.cf-contact { font-size:12px; text-align:right; line-height:1.5; color:#333; }

/* 고객용 점검표 — PDF에서는 서명을 이름 바로 옆에 (종이 양식의 "성명 (서명)" 모양) */
/* "(서명)" 글자 위에 서명을 겹쳐 그린 모양 — 종이에 직접 서명한 것처럼 */
.cf-sign-slot { display:none; position:relative; margin-left:8px; padding:0 4px; font-size:14px; color:#555; white-space:nowrap; }
/* 이름을 덮지 않도록 "(서명)" 글자 앞쪽에서 시작해 오른쪽 빈 공간으로 그려지게 */
.cf-sign-inline { position:absolute; left:-6px; top:50%; transform:translateY(-50%); height:44px; max-width:96px; width:auto; object-fit:contain; } /* 너비 제한 — 오른쪽 점검자 칸까지 넘어가지 않게 */
.cl-report-sheet.capturing .cf-sign-slot { display:inline-block; }
.cl-report-sheet.capturing .cf-sign-area { display:none; }

/* 고객용 점검표 — 담당자 이메일(선택) 입력 영역 (PDF에는 들어가지 않음) */
.cf-mail { margin-top:16px; padding-top:12px; border-top:1px dashed #ddd9d5; }
.cf-mail .cl-chip-row { margin-top:6px; margin-bottom:6px; }
.cl-report-sheet .cf-email-input { display:block; width:100%; box-sizing:border-box; }
.cl-report-sheet .cl-chip { background:#fff; color:#433f3d; border-color:#ddd9d5; }
.cl-report-sheet .cl-chip-label { color:#6b6560; }

/* 점검표 — 섹션 단계 방식 (시범) */
.cl-wizard-bar { padding:4px 0 12px; margin-bottom:6px; }
.cl-wizard-label { font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px; }
.cl-wizard-steps { display:flex; gap:4px; }
.cl-wizard-step { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--input-bg); color:var(--text4);
  font-size:11px; font-family:inherit; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-wizard-step span { font-size:13px; font-weight:700; }
.cl-wizard-step:disabled { cursor:default; opacity:0.6; }
.cl-wizard-step.done { color:var(--ok-text); border-color:var(--ok-border); background:var(--ok-bg); }
.cl-wizard-step.on { color:var(--accent-text); border-color:var(--accent); background:var(--accent-bg); }
.cl-wizard-nav { display:flex; gap:8px; padding:8px 0 0; }
.cl-wizard-nav .cl-wizard-prev { flex:0 0 30%; padding:16px 0; font-size:16px; }
.cl-wizard-nav .cl-wizard-next { flex:1; padding:16px 0; font-size:17px; }
#checklistForm.cl-wizard .checklist-section { margin-bottom:8px; }

/* ===== QR 만들기 탭 (관리자 전용) ===== */
.qr-wrap { max-width:960px; margin:0 auto; padding:24px 16px 48px; }
.qr-title { font-size:22px; font-weight:700; margin:0 0 4px; color:var(--text); }
.qr-desc { font-size:14px; color:var(--text2); line-height:1.6; margin:0 0 20px; }
.qr-panel { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:18px; margin-bottom:20px; }
.qr-label { font-size:15px; font-weight:600; margin:0 0 8px; color:var(--text); }
.qr-hint { font-size:13px; color:var(--text3); margin:6px 0 0; }
.qr-areas { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.qr-area { display:flex; align-items:center; gap:6px; border:1.5px solid var(--border); border-radius:999px; padding:6px 12px; font-size:14px; cursor:pointer; background:var(--input-bg); color:var(--text); }
.qr-area input { accent-color:var(--accent); width:16px; height:16px; margin:0; }
.qr-add { display:flex; gap:8px; margin-top:10px; }
.qr-add .checklist-input { flex:1; min-width:0; }
.qr-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.qr-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:var(--radius); font-size:14px; font-family:inherit; cursor:pointer; border:1.5px solid var(--border); background:var(--input-bg); color:var(--text); }
.qr-btn.primary { background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); }
.qr-btn .material-icons-round { font-size:18px; }
.qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.qr-card { background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:12px; text-align:center; break-inside:avoid; }
.qr-card-code { display:none; } /* QR 원본(라벨 이미지를 그릴 때만 사용) */
.qr-card-label { display:block; width:100%; aspect-ratio:40/30; border:1px solid #ddd; background:#fff; }
.qr-card-name { font-size:13px; color:var(--text2); margin-top:8px; word-break:keep-all; }
.qr-card-save { margin-top:8px; font-size:12px; padding:6px 10px; }
.qr-empty { color:var(--text3); font-size:14px; padding:20px 0; text-align:center; }
/* A4 인쇄 — QR 탭의 [A4 인쇄]를 누른 동안(body.printing-qr)만 QR 라벨만 남기고 나머지 화면은 숨김 */
@media print {
  body.printing-qr > *:not(#qrPage) { display:none !important; }
  body.printing-qr { background:#fff; padding:0 !important; }
  body.printing-qr .qr-wrap { padding:0; max-width:none; }
  body.printing-qr .qr-no-print { display:none !important; }
  body.printing-qr .qr-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
  body.printing-qr .qr-card { border:none; padding:0; background:#fff; }
  body.printing-qr .qr-card-label { width:40mm; height:30mm; margin:0 auto; border:1px dashed #999; }
}

/* 점검 기록 조회 (시범) */
.checklist-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cl-records-btn { display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--input-bg); color:var(--text2); font-size:13px; font-family:inherit; cursor:pointer; flex-shrink:0; }
.cl-records-btn .material-icons-round { font-size:18px; }
.cl-records { max-width:640px; margin:0 auto; }
.cl-records-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.cl-records-head .btn-ghost, .cl-record-back { display:inline-flex; align-items:center; gap:4px; }
.cl-records-title { font-size:20px; font-weight:700; color:var(--text); }
.cl-records-note { font-size:13px; color:var(--text2); margin:4px 0 10px; line-height:1.5; }
.cl-records-filter-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; color:var(--text3); }
.cl-records-filter-row .checklist-input { flex:1; min-width:0; }
.cl-records-search { width:100%; padding:12px 0; font-size:15px; margin-bottom:6px; }
.cl-records-state { font-size:13px; color:var(--text3); padding:10px 2px; }
.cl-records-list { display:flex; flex-direction:column; gap:8px; }
.cl-record-item { text-align:left; width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text); font-family:inherit; cursor:pointer; }
.cl-record-item:hover { border-color:var(--accent); }
.cl-record-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px; }
.cl-record-top b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-record-sub { font-size:12px; color:var(--text3); margin-top:4px; }
.cl-record-badge { flex-shrink:0; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--ok-bg); color:var(--ok-text); }
.cl-record-badge.bad { background:var(--pm-bg); color:var(--pm-text); }
.cl-record-back { margin-bottom:10px; }
.cl-record-actions { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.cl-record-mail { padding:14px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.cl-record-mail .btn-primary { padding:12px 0; font-size:15px; }
.cf-signed { font-size:12px; color:#3f6b34; font-weight:600; margin-left:4px; }
.cl-report-upload-msg.ok { color:var(--ok-text); background:var(--ok-bg); border-color:var(--ok-border); }

/* 관리자 로그인/메뉴 — 모든 탭 공용 (헤더 바로 아래). 안에 보이는 줄이 있을 때만 .open으로 여백/구분선 표시 */
.admin-panel { background:var(--surface); padding:0 28px; display:flex; flex-direction:column; gap:12px; }
.admin-panel.open { padding:12px 28px; border-bottom:1px solid var(--border); }
@media (max-width:640px) {
  .admin-panel { padding:0 16px; }
  .admin-panel.open { padding:12px 16px; }
}

.cl-records-pages { margin-top:12px; flex-wrap:wrap; }

/* 단계 방식 — 제목 + [점검 기록] + 단계 표시를 앱 헤더 바로 아래에 고정하고 항목만 스크롤 (설명 줄은 공간 절약을 위해 숨김) */
#checklistForm.cl-wizard .checklist-header { position:sticky; top:var(--app-header-h,0px); z-index:20; background:var(--bg);
  margin:0 0 10px; padding:10px 0 2px; box-shadow:0 8px 8px -8px rgba(0,0,0,0.18); }
#checklistForm.cl-wizard .checklist-desc { display:none; }
#checklistForm.cl-wizard .checklist-title { margin-bottom:0; }
#checklistForm.cl-wizard .cl-wizard-bar { padding:8px 0 10px; margin-bottom:0; }

/* ===== 숨은 미니 게임 "좆좋소 키우기" — 대시보드를 가리지 않는 오른쪽 아래 작은 창 ===== */
/* 관리 코드 입력 — 겉보기로는 내부 관리 기능처럼만 보이게(게임 티를 내지 않음) */
.mg-ask { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; }
.mg-ask-box { width:260px; background:var(--surface); color:var(--text); border:1.5px solid var(--border); border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,0.28); padding:16px 16px 13px; font-size:13px; }
.mg-ask-t { font-weight:700; font-size:13px; margin-bottom:10px; }
.mg-ask-box input { width:100%; box-sizing:border-box; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px;
  background:var(--input-bg); color:var(--text); font-family:inherit; font-size:14px; letter-spacing:3px; text-align:center; }
.mg-ask-box input:focus { outline:none; border-color:var(--accent); }
.mg-ask-err { min-height:15px; font-size:11px; color:#d93025; margin:5px 1px 0; }
.mg-ask-btns { display:flex; gap:6px; margin-top:7px; }
.mg-ask-btns button { flex:1; padding:7px 0; border-radius:8px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.mg-ask-no { border:1.5px solid var(--border); background:var(--surface); color:var(--text2); }
.mg-ask-no:hover { border-color:var(--text3); color:var(--text); }
.mg-ask-ok { border:1.5px solid var(--accent); background:var(--accent); color:#fff; }
.mg-ask-ok:hover { filter:brightness(1.07); }
.gm-widget { position:fixed; right:16px; bottom:48px; z-index:900; width:400px; max-width:calc(100vw - 32px); max-height:calc(100vh - 64px);
  background:var(--surface); color:var(--text); border:1.5px solid var(--border); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25); font-size:13px; overflow:hidden; transition:opacity 0.2s; user-select:none; }
.gm-widget.dim { opacity:0.35; }
.gm-head { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:var(--input-bg); border-bottom:1px solid var(--border); }
.gm-title { font-weight:700; font-size:13px; }
.gm-head-btns button { background:none; border:none; color:var(--text3); font-size:15px; width:24px; height:22px; cursor:pointer; border-radius:4px; font-family:inherit; }
.gm-head-btns button:hover { background:var(--border2); color:var(--text); }
.gm-body { padding:10px 12px 10px; }
.gm-chip { position:fixed; right:16px; bottom:48px; z-index:900; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border);
  background:var(--surface); font-size:16px; cursor:pointer; opacity:0.6; display:none; }
.gm-chip:hover { opacity:1; }
.gm-intro { display:flex; align-items:flex-start; gap:10px; line-height:1.6; color:var(--text2); margin-bottom:10px; word-break:keep-all; overflow-wrap:break-word; }
.gm-intro > span { flex:1; min-width:0; }
.gm-input { width:100%; box-sizing:border-box; padding:9px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-size:14px; font-family:inherit; margin-bottom:8px; }
.gm-login-msg { font-size:11.5px; color:var(--text3); margin:-2px 0 8px; line-height:1.4; }
.gm-login-msg.err { color:#d9534f; font-weight:600; }
.gm-btn { width:100%; padding:10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-family:inherit; font-size:14px; cursor:pointer; margin-top:8px; }
.gm-btn.primary { background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); }
.gm-char { display:flex; align-items:center; gap:10px; }
.gm-avatar { font-size:30px; line-height:1; }
.gm-char-info { flex:1; min-width:0; }
.gm-nick { color:var(--text4); font-size:11px; }
.gm-bar { height:6px; border-radius:3px; background:var(--border2); overflow:hidden; margin-top:4px; }
.gm-bar i { display:block; height:100%; width:0; background:var(--accent); transition:width 0.15s; }
.gm-bar.hp i { background:#d93025; }
/* 선배 사장님의 격려 — 버프가 걸려 있는 동안만 보임 */
.gm-cheer { position:absolute; left:4px; right:4px; top:4px; z-index:3; pointer-events:none; overflow:hidden;
  display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:9px;
  background:linear-gradient(90deg,#fff6d8,#ffe9a8,#ffd166,#ffe9a8,#fff6d8); background-size:300% 100%;
  border:1.5px solid #f0b429; animation:gmCheerIn 0.28s ease-out, gmEvFlow 5s linear infinite;
  box-shadow:0 2px 10px rgba(240,180,41,0.45), inset 0 1px 0 rgba(255,255,255,0.7);
  font-size:11px; line-height:1.25; }
.gm-cheer::after { content:''; position:absolute; top:0; bottom:0; width:36%; left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.75),transparent);
  animation:gmEvShine 2.8s ease-in-out infinite; pointer-events:none; }
.gm-cheer img { border:1.5px solid #f0b429; box-shadow:0 0 0 2px rgba(255,255,255,0.8); }
.gm-cheer img { width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; background:#fff; }
.gm-cheer b { color:#4a3410; font-weight:700; white-space:nowrap; }
.gm-cheer span { color:#6b5120; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-cheer em { font-style:normal; font-weight:700; color:#c47b00; flex:none; }
/* 여러 명이 동시에 격려 — 한 줄을 유지하려고 칩으로 압축 */
.gm-cheer.many { gap:4px; padding:4px 7px; }
.gm-cheer-n { color:#8a6400 !important; font-size:10px; font-weight:800; flex:none; letter-spacing:-0.02em; }
.gm-cheer-chip { display:flex; align-items:center; gap:2px; flex:none; font-size:11px; color:#4a3410;
  background:rgba(255,255,255,0.75); border:1px solid rgba(255,183,0,0.5); border-radius:99px; padding:1px 5px 1px 1px; }
.gm-cheer-chip img { width:16px; height:16px; margin:0; }
.gm-cheer-chip i { font-style:normal; font-weight:700; color:#8a6400; font-size:10px; }
.gm-cheer.full { padding:3px 6px; gap:3px; }
.gm-cheer.full .gm-cheer-chip { padding:1px 3px 1px 1px; font-size:10px; }
.gm-cheer.full .gm-cheer-chip img { width:14px; height:14px; }
@keyframes gmCheerIn { from { opacity:0; transform:translateY(-6px) scale(0.97); } to { opacity:1; transform:none; } }
/* 격려가 터질 때 — 선배가 오른쪽에서 들어와 한마디 하고 사라짐 */
.gm-cheer-fx { position:absolute; right:4px; bottom:0; z-index:5; pointer-events:none;
  display:flex; align-items:flex-end; gap:4px; animation:gmCheerFx 2.2s ease-out forwards; }
.gm-cheer-fx img { height:92px; width:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.3)); }
.gm-cheer-say { position:relative; margin-bottom:46px; max-width:150px; padding:6px 9px; border-radius:11px;
  background:#fffdf4; border:1.5px solid #f0b429; box-shadow:0 3px 10px rgba(0,0,0,0.18);
  font-size:11.5px; font-weight:700; color:#4a3410; line-height:1.3; word-break:keep-all; }
.gm-cheer-say::after { content:''; position:absolute; right:-7px; bottom:8px; border:6px solid transparent;
  border-left-color:#f0b429; }
.gm-cheer-say b { display:block; font-size:10px; color:#8a6400; font-weight:800; margin-bottom:1px; }
@keyframes gmCheerFx {
  0% { opacity:0; transform:translateX(40px); }
  15% { opacity:1; transform:translateX(0); }
  78% { opacity:1; transform:translateX(0); }
  100% { opacity:0; transform:translateX(26px); }
}
.gm-stats { display:flex; justify-content:space-between; gap:6px; margin:8px 0; color:var(--text2); font-size:12px; }
.gm-arena { position:relative; display:block; width:100%; padding:8px 10px 10px; border:1.5px dashed var(--border); border-radius:10px;
  background:var(--bg); color:var(--text); font-family:inherit; cursor:pointer; touch-action:manipulation; overflow:hidden; }
.gm-arena.boss { border-color:#d93025; border-style:solid; }
.gm-mon-name { font-size:12px; color:var(--text2); }
.gm-monster { font-size:44px; line-height:1.25; }
.gm-monster.hit { animation:gmHit 0.12s; }
@keyframes gmHit { 50% { transform:scale(0.85) rotate(-6deg); } }
.gm-timer { font-size:11px; color:#d93025; min-height:14px; margin-top:3px; }
.gm-float-layer { position:absolute; inset:0; pointer-events:none; }
.gm-float { position:absolute; top:40%; font-weight:700; color:var(--accent); animation:gmFloat 0.7s forwards; }
.gm-float.crit { color:#d93025; font-size:16px; }
@keyframes gmFloat { to { transform:translateY(-36px); opacity:0; } }
.gm-ups { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.gm-up { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:1.5px solid var(--border); border-radius:8px;
  background:var(--input-bg); color:var(--text); font-family:inherit; text-align:left; cursor:pointer; }
.gm-up:disabled { opacity:0.45; cursor:default; }
.gm-up:not(:disabled):hover { border-color:var(--accent); }
.gm-up-icon { font-size:18px; }
.gm-up-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.gm-up-text small { color:var(--text3); font-size:11px; }
.gm-up-cost { font-size:12px; font-weight:600; white-space:nowrap; }
.gm-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11px; color:var(--text4); }
.gm-link { background:none; border:none; color:var(--text2); font-family:inherit; font-size:12px; cursor:pointer; padding:0; }
.gm-toast { word-break:keep-all; position:absolute; left:10px; right:10px; top:40px; padding:7px 10px; border-radius:8px; background:var(--btn-bg); color:var(--btn-text);
  font-size:12px; text-align:center; animation:gmToast 0.25s; pointer-events:none; }
@keyframes gmToast { from { opacity:0; transform:translateY(-6px); } }
.gm-rank-title { font-weight:700; margin-bottom:6px; }
.gm-rank-row { display:flex; gap:8px; padding:5px 4px; border-bottom:1px solid var(--border2); font-size:12px; }
.gm-rank-row > span:first-child { width:18px; color:var(--text3); }
.gm-rank-row b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-rank-row.me { background:var(--accent-bg); }

/* 좆좋소 키우기 — 캐릭터 이미지 / 무소음 처리 영역 */
.gm-avatar { position:relative; width:40px; height:40px; flex-shrink:0; }
.gm-avatar img { width:40px; height:40px; border-radius:50%; object-fit:cover; background:#f1ede8; border:1.5px solid var(--border); display:block; }
.gm-avatar i { position:absolute; right:-4px; bottom:-4px; font-style:normal; font-size:15px; line-height:1; }
.gm-arena { position:relative; display:flex; align-items:flex-end; gap:6px; cursor:default; touch-action:manipulation; min-height:120px; }
.gm-hero { height:112px; width:auto; flex-shrink:0; pointer-events:none; user-select:none; transform-origin:bottom center; }
.gm-hero.hit { animation:gmHeroHit 0.18s; }
@keyframes gmHeroHit { 50% { transform:translateY(-4px) rotate(-3deg); } }
.gm-task { flex:1; min-width:0; text-align:center; align-self:center; }
.gm-hint { font-size:10.5px; color:var(--text4); text-align:center; margin-top:4px; }

/* 좆좋소 키우기 — 키보드 입력 */
.gm-widget:focus { outline:none; }
.gm-widget:focus-within { border-color:var(--accent); }
.gm-keys { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; align-items:center; margin-top:8px; min-height:27px; }
.gm-key { min-width:22px; height:24px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  border:1.5px solid var(--border); border-bottom-width:3px; border-radius:5px; background:var(--input-bg); color:var(--text2);
  font-family:var(--font-mono); font-size:12px; font-weight:700; }
.gm-key.now { border-color:var(--accent); color:var(--accent-text); background:var(--accent-bg); transform:translateY(-1px); }
.gm-key.done { opacity:0.3; }
.gm-keys.miss { animation:gmShake 0.25s; }
@keyframes gmShake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.gm-combo { font-size:11px; font-weight:600; color:var(--accent-text); margin-left:4px; }
.gm-hint.on { color:var(--ok-text); }
.gm-intro-img { width:44px; height:44px; border-radius:50%; flex-shrink:0; background:#f1ede8; }

/* 좆좋소 키우기 — 제목줄을 잡고 창 이동 */
.gm-head { cursor:move; touch-action:none; }
.gm-head-btns button { cursor:pointer; }

/* 좆좋소 키우기 — 이미지가 아직 없는 직원은 이름으로 대신 표시 / 직원 목록 */
.gm-face-ph { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; border:1.5px solid var(--border); box-sizing:border-box; }
.gm-hero-ph { width:72px; height:112px; border-radius:36px 36px 10px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff; }
.gm-hero-ph span { font-size:18px; font-weight:700; }
.gm-hero-ph small { font-size:10px; opacity:0.85; }
.gm-c1 { background:#5b8def; } .gm-c2 { background:#e0739a; } .gm-c3 { background:#3fae8c; } .gm-c4 { background:#d9a23a; }
.gm-c5 { background:#9a6fd6; } .gm-c6 { background:#5f7d95; } .gm-c7 { background:#d9634a; }
.gm-char-row { display:flex; align-items:center; gap:8px; width:100%; padding:6px 4px; border:none; border-bottom:1px solid var(--border2); background:none; color:var(--text); font-family:inherit; text-align:left; cursor:pointer; }
.gm-char-row:disabled { cursor:default; }
.gm-char-row.cur { background:var(--accent-bg); }
.gm-char-row.locked { opacity:0.45; }
.gm-char-row-text { flex:1; min-width:0; display:flex; flex-direction:column; font-size:12px; }
.gm-char-row-text small { color:var(--text3); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-char-row-diff { font-size:10.5px; color:var(--text4); white-space:nowrap; }
.gm-foot { gap:6px; }

/* 좆좋소 키우기 — PC 단어 입력 / 📌 고정 */
.gm-keys.words { flex-wrap:wrap; }
.gm-keys.words .gm-key { width:auto; min-width:0; padding:0 10px; font-size:14px; letter-spacing:0.5px; }
.gm-type { width:100%; box-sizing:border-box; margin-top:6px; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text); font-size:15px; font-family:inherit; text-align:center; }
.gm-type:focus { outline:none; border-color:var(--accent, #e8732a); }
#gmLockBtn { opacity:0.35; filter:grayscale(1); }
.gm-widget.locked #gmLockBtn { opacity:1; filter:none; }

/* 좆좋소 키우기 — 남은 업무 수치 / 강화 목록은 창 안에서 스크롤 (창이 계속 길어지지 않게) */
.gm-hp-text { font-size:10.5px; color:var(--text3); margin-top:2px; font-variant-numeric:tabular-nums; }
.gm-ups { max-height:150px; overflow-y:auto; overscroll-behavior:contain; padding-right:2px; }
.gm-ups::-webkit-scrollbar { width:5px; }
.gm-ups::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.gm-ups .gm-up { flex-shrink:0; }

/* 좆좋소 키우기 — 강화 타일(4칸) + ? 설명 말풍선 */
/* 타일 3줄까지만 보이고 그 아래는 스크롤 — 스킬이 늘어나도 창 높이는 그대로 */
.gm-ups { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; max-height:190px; overflow-y:auto; align-content:start; padding-right:3px; }
.gm-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; padding:7px 2px 5px; border:1.5px solid var(--border); border-radius:9px;
  background:var(--input-bg); color:var(--text); font-family:inherit; cursor:pointer; transition:transform 0.08s, border-color 0.15s; }
.gm-tile:hover { border-color:var(--accent); }
.gm-tile:active { transform:scale(0.95); }
.gm-tile.off { opacity:0.5; }
.gm-tile.locked { opacity:0.4; cursor:default; filter:grayscale(1); }
.gm-tile.maxed { border-color:#d9a23a; }
.gm-tile-icon { font-size:18px; line-height:1.1; }
.gm-tile-name { font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gm-tile-lv { font-size:10px; color:var(--text3); }
.gm-tile-cost { font-size:10px; font-weight:600; min-height:13px; white-space:nowrap; }
.gm-tile-q { position:absolute; top:2px; right:3px; width:14px; height:14px; border-radius:50%; font-size:9.5px; line-height:14px; text-align:center;
  background:var(--border2); color:var(--text3); cursor:help; }
.gm-tile-q:hover { background:var(--accent); color:#fff; }
.gm-tip { position:absolute; left:10px; right:10px; z-index:6; padding:8px 10px; border-radius:8px; background:var(--btn-bg); color:var(--btn-text);
  font-size:11.5px; line-height:1.55; box-shadow:0 4px 14px rgba(0,0,0,0.25); pointer-events:none; word-break:keep-all; }
.gm-tip span { opacity:0.7; font-size:10.5px; }
.gm-float.project { font-size:15px; color:#d9a23a; font-weight:800; }

/* 좆좋소 키우기 — 무한의 계단 / 랭킹 탭 */
.gm-st-head { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:6px; }
.gm-st-head span { font-size:11.5px; color:var(--text3); }
.gm-st-cv { display:block; width:100%; height:170px; border:1.5px solid var(--border2); border-radius:10px; background:var(--input-bg); }
.gm-bar.st { margin-top:6px; }
.gm-bar.st i { background:var(--accent); transition:none; }
.gm-st-info { font-size:12px; text-align:center; color:var(--text2); margin-top:6px; min-height:34px; word-break:keep-all; }
.gm-st-info small { color:var(--text4); }
.gm-st-btns { display:flex; gap:8px; margin-top:4px; }
.gm-st-btns button { flex:1; padding:12px 0; font-size:18px; border:1.5px solid var(--border); border-radius:10px; background:var(--input-bg); color:var(--text); cursor:pointer; touch-action:manipulation; }
.gm-st-btns button:active { transform:scale(0.96); background:var(--accent-bg); }
.gm-link.locked { opacity:0.4; }
.gm-rank-tabs { display:flex; gap:4px; margin-bottom:8px; }
.gm-rank-tabs button { flex:1; padding:6px 0; border:1.5px solid var(--border); border-radius:8px; background:none; color:var(--text3); font-family:inherit; font-size:12px; cursor:pointer; }
.gm-rank-tabs button.on { border-color:var(--accent); color:var(--text); font-weight:700; background:var(--accent-bg); }

/* 좆좋소 키우기 — 깜짝 이벤트 띠 / 황금 업무 */
.gm-event { margin:-2px 0 8px; padding:6px 10px; border-radius:8px; font-size:11.5px; font-weight:700; text-align:center; color:#5a3d00;
  background:linear-gradient(90deg,#ffd76a,#ffb547); animation:gmEventGlow 2s ease-in-out infinite; word-break:keep-all; }
@keyframes gmEventGlow { 50% { filter:brightness(1.08); } }
.gm-arena.golden { box-shadow:inset 0 0 0 2px #ffcf4a, 0 0 12px rgba(255,200,60,0.35); }

/* 좆좋소 키우기 — 계단·랭킹·직원 화면도 플레이 화면과 같은 높이 */
.gm-body.fixed { display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
.gm-body.fixed > .gm-btn:last-child { margin-top:auto; }
.gm-body.fixed .gm-st-cv { flex:1 1 auto; height:auto; min-height:120px; }
.gm-body.fixed > * { flex-shrink:0; }
.gm-body.fixed .gm-st-cv { flex-shrink:1; }
.gm-body.fixed { box-sizing:border-box; }

/* 좆좋소 키우기 — 창을 가로로 넓혀 강화 타일 한 줄 5칸 */
.gm-ups { grid-template-columns:repeat(5,1fr); }

/* 좆좋소 키우기 — 세로 줄이기: 단어+입력칸 한 줄, 타일 3줄, 업무 영역 조금 작게 */
.gm-typerow { display:flex; align-items:center; gap:6px; margin-top:8px; }
.gm-typerow .gm-keys { margin-top:0; flex:0 1 auto; justify-content:flex-start; min-height:0; }
.gm-typerow .gm-type { flex:1 1 120px; min-width:110px; margin-top:0; padding:7px 10px; font-size:14px; }
.gm-arena { min-height:100px; }
.gm-hero { height:94px; }
.gm-tile { padding:5px 2px 4px; gap:0; }
.gm-tile-top { display:flex; align-items:center; gap:3px; line-height:1; }
.gm-tile-top .gm-tile-icon { font-size:15px; }
.gm-tile-top .gm-tile-lv { font-size:9.5px; }
.gm-tile-name { margin-top:2px; }
.gm-tile.locked .gm-tile-cost { font-size:9.5px; font-weight:500; color:var(--text3); }
.gm-tile-top { padding:0 11px 0 2px; max-width:100%; box-sizing:border-box; }
.gm-tile-q { width:12px; height:12px; line-height:12px; font-size:8.5px; top:3px; right:3px; }

/* 좆좋소 키우기 — 약 600px 기준 정리: 타일 4줄(겹침 없이), 입력칸 전체 폭, 경험치 수치 */
.gm-tile { padding:6px 2px 4px; gap:0; line-height:1.25; }
.gm-tile-icon { font-size:16px; line-height:1.15; }
.gm-tile-name { font-size:10.5px; margin-top:1px; }
.gm-tile-lv { font-size:9.5px; }
.gm-tile-cost { font-size:9.5px; min-height:12px; }
.gm-tile-q { width:13px; height:13px; line-height:13px; font-size:9px; top:3px; right:3px; }
.gm-type { margin-top:6px; }
.gm-keys.words { margin-top:6px; }
.gm-timer:empty { display:none; }
#gmRank { display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.gm-rank-l { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-exp-num { flex-shrink:0; font-size:10.5px; color:var(--text3); font-variant-numeric:tabular-nums; }

/* 좆좋소 키우기 — 투명도 슬라이더 (마우스를 올려도 유지) */
.gm-opbar { position:absolute; left:10px; right:10px; top:40px; z-index:60; padding:10px 12px; border-radius:12px; border:1.5px solid var(--accent);
  background:var(--surface); box-shadow:0 10px 24px rgba(0,0,0,0.35); font-size:11.5px; color:var(--text3); animation:gmToastIn 0.18s ease-out; }
.gm-opbar-row { display:flex; align-items:center; gap:8px; }
.gm-opbar-row input { flex:1; accent-color:var(--accent); }
.gm-opbar-opt { display:flex; align-items:center; gap:6px; margin-top:8px; color:var(--text2); cursor:pointer; }
.gm-opbar-opt input { accent-color:var(--accent); margin:0; }
.gm-opbar b { width:36px; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }

/* 좆좋소 키우기 — 🗺️ 미니게임 월드 (구름 섬 지도) */
.gm-world { position:relative; flex:1 1 auto; min-height:260px; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#8fd0ff 0%,#c6e8ff 55%,#eaf7ff 100%); border:1.5px solid var(--border2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gm-world { background:linear-gradient(180deg,#1d3a5c 0%,#2a5076 60%,#35628c 100%); } }
:root[data-theme="dark"] .gm-world { background:linear-gradient(180deg,#1d3a5c 0%,#2a5076 60%,#35628c 100%); }
.gm-cloud { position:absolute; width:90px; height:26px; border-radius:20px; background:rgba(255,255,255,0.55); filter:blur(1px); animation:gmCloudDrift 28s linear infinite; }
.gm-cloud::before, .gm-cloud::after { content:''; position:absolute; background:inherit; border-radius:50%; }
.gm-cloud::before { width:40px; height:40px; left:14px; top:-18px; }
.gm-cloud::after { width:30px; height:30px; left:44px; top:-12px; }
.gm-cloud.c1 { top:12%; left:-30%; }
.gm-cloud.c2 { top:52%; left:-40%; animation-duration:36s; animation-delay:-14s; transform:scale(0.8); }
.gm-cloud.c3 { top:86%; left:-30%; animation-duration:44s; animation-delay:-26s; transform:scale(0.65); }
@keyframes gmCloudDrift { to { left:120%; } }
.gm-isle { position:absolute; transform:translate(-50%,-50%); width:118px; padding:10px 6px 9px; border:none; border-radius:40px 40px 34px 34px; cursor:pointer;
  background:#fff; color:#2b2b2b; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:1px;
  box-shadow:0 8px 0 -2px rgba(255,255,255,0.75), 0 12px 18px rgba(0,40,80,0.18); animation:gmIsleFloat 3.2s ease-in-out infinite; }
.gm-isle::before, .gm-isle::after { content:''; position:absolute; background:#fff; border-radius:50%; z-index:-1; }
.gm-isle::before { width:52px; height:52px; left:8px; top:-18px; }
.gm-isle::after { width:42px; height:42px; right:12px; top:-12px; }
.gm-isle:hover { box-shadow:0 8px 0 -2px rgba(255,255,255,0.75), 0 0 0 3px var(--accent), 0 12px 18px rgba(0,40,80,0.18); }
@keyframes gmIsleFloat { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,calc(-50% - 6px)); } }
.gm-isle-icon { font-size:24px; line-height:1.1; }
.gm-isle b { font-size:12px; }
.gm-isle small { font-size:10.5px; color:#666; }
.gm-isle.locked { animation:none; filter:grayscale(0.9); }
.gm-isle.locked .gm-isle-icon, .gm-isle.locked b { opacity:0.45; }
.gm-isle-fog { position:absolute; inset:-14px -10px -8px; border-radius:46px; pointer-events:none;
  background:radial-gradient(ellipse at 30% 40%,rgba(235,240,245,0.85),rgba(220,228,236,0.55) 60%,rgba(220,228,236,0) 75%); animation:gmFog 4s ease-in-out infinite alternate; }
@keyframes gmFog { to { transform:translateX(6px); opacity:0.75; } }
.gm-isle.soon { animation:none; opacity:0.75; border:2px dashed #b9c6d2; }
.gm-isle.shake { animation:gmIsleShake 0.4s; }
@keyframes gmIsleShake { 20%,60% { transform:translate(calc(-50% - 5px),-50%); } 40%,80% { transform:translate(calc(-50% + 5px),-50%); } }
/* 테트리스 — 휴대폰 버튼 5개 */
.gm-tt-btns button { padding:10px 0; font-size:16px; }

/* 좆좋소 키우기 — 그림 리소스 적용 */
.gm-world, :root[data-theme="dark"] .gm-world { background:#8fd0ff url("assets/game/ui/world-sky.jpg") center/cover no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gm-world { background:#8fd0ff url("assets/game/ui/world-sky.jpg") center/cover no-repeat; } }
.gm-cloud { background:rgba(255,255,255,0.7); }
.gm-isle.art { width:150px; padding:0; background:none; box-shadow:none; border-radius:0; gap:0; }
.gm-isle.art::before, .gm-isle.art::after { display:none; }
.gm-isle.art:hover { box-shadow:none; }
.gm-isle.art:hover .gm-isle-art { filter:drop-shadow(0 0 6px rgba(255,255,255,0.95)) drop-shadow(0 0 3px var(--accent)); }
.gm-isle-art { width:100%; height:auto; display:block; pointer-events:none; filter:drop-shadow(0 6px 8px rgba(0,40,80,0.25)); }
.gm-isle-label { display:flex; flex-direction:column; align-items:center; margin-top:-14px; padding:3px 10px 4px; border-radius:12px;
  background:rgba(255,255,255,0.92); box-shadow:0 2px 6px rgba(0,40,80,0.2); white-space:nowrap; position:relative; z-index:1; }
.gm-isle.art.locked { filter:none; }
.gm-isle.art.locked .gm-isle-art { filter:grayscale(1) brightness(0.92) opacity(0.75); }
.gm-isle.art .gm-isle-fog { inset:-6% -8% 18% -8%; border-radius:50%; }
.gm-isle.soon { width:auto; padding:6px 12px; }
.gm-isle.soon .gm-isle-label { margin:0; background:none; box-shadow:none; padding:0; }
.gm-monster img { height:54px; width:auto; display:block; margin:0 auto; filter:drop-shadow(0 3px 3px rgba(0,0,0,0.2)); }
.gm-tile-icon img { height:22px; width:auto; display:block; margin:0 auto; }
.gm-money { height:1.15em; width:auto; vertical-align:-0.22em; }
.gm-tile-cost .gm-money { height:12px; vertical-align:-2px; margin-right:1px; }
.gm-world, :root[data-theme="dark"] .gm-world { background-position:center 20%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gm-world { background-position:center 20%; } }
.gm-isle.art { transform:none; animation:gmIsleBob 3.2s ease-in-out infinite; }
.gm-isle.art.locked { animation:none; }
@keyframes gmIsleBob { 50% { transform:translateY(-5px); } }
.gm-isle.art.shake { animation:gmIsleShake2 0.4s; }
@keyframes gmIsleShake2 { 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } }
.gm-isle.art .gm-isle-label { margin-top:-10px; }
.gm-isle.art .gm-isle-label b { font-size:11.5px; }
.gm-isle.art .gm-isle-label small { font-size:10px; }

/* 좆좋소 키우기 — 이벤트 띠: 그라데이션이 흐르고 빛이 지나가는 효과 */
.gm-event { position:relative; overflow:hidden; display:flex; align-items:center; gap:7px; padding:5px 10px; text-align:left; color:#4a2c00;
  background:linear-gradient(90deg,#ffe082,#ffb74d,#ff8a65,#f48fb1,#ffb74d,#ffe082); background-size:300% 100%;
  animation:gmEvFlow 6s linear infinite; box-shadow:0 2px 10px rgba(255,150,60,0.35); }
.gm-event::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent); animation:gmEvShine 2.6s ease-in-out infinite; pointer-events:none; }
@keyframes gmEvFlow { to { background-position:300% 0; } }
@keyframes gmEvShine { 0% { left:-50%; } 60%,100% { left:120%; } }
.gm-ev-ic { height:26px; width:auto; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); animation:gmEvBob 1.6s ease-in-out infinite; }
@keyframes gmEvBob { 50% { transform:translateY(-2px) rotate(-4deg); } }
.gm-ev-txt { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-ev-left { flex-shrink:0; font-size:11px; font-weight:800; padding:2px 7px; border-radius:10px; background:rgba(255,255,255,0.55); }
/* 이벤트가 없을 때 — 줄은 그대로 두고(창 높이 고정) 색만 가라앉힘 */
.gm-event:not(.on) { background:var(--input-bg); background-size:auto; animation:none; box-shadow:none;
  border:1px dashed var(--border); color:var(--text3); }
.gm-event:not(.on)::after { display:none; }
.gm-event:not(.on) .gm-ev-ic { filter:grayscale(1) opacity(0.45); animation:none; }
.gm-event:not(.on) .gm-ev-txt b { color:var(--text2); }
.gm-event:not(.on) .gm-ev-left { background:var(--border2); color:var(--text3); font-weight:700; }

/* 직급 배지 / 메뉴 아이콘 / 업무 화면 배경 / 로그인 그림 */
.gm-avatar i { right:-7px; bottom:-7px; }
.gm-av-badge { height:22px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.gm-row-badge { height:15px; width:auto; vertical-align:-3px; margin-right:3px; }
.gm-menu-ic { height:15px; width:auto; vertical-align:-3px; margin-right:3px; }
.gm-pin-ic { height:14px; width:auto; display:block; margin:0 auto; }
.gm-arena { background:linear-gradient(rgba(20,18,16,0.12),rgba(20,18,16,0.12)), url("assets/game/ui/office-bg.jpg") center 60%/cover no-repeat; border-style:solid; }
.gm-task { background:rgba(255,255,255,0.82); border-radius:12px; padding:6px 8px 5px; color:#2b2b2b; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.gm-task .gm-hp-text, .gm-task .gm-mon-name { color:#333; }
.gm-arena.golden .gm-task { background:rgba(255,246,214,0.92); }
.gm-arena.boss .gm-task { background:rgba(255,232,232,0.92); }
.gm-login-hero { height:130px; margin:-4px -4px 10px; border-radius:10px; background:center 40%/cover no-repeat; position:relative; overflow:hidden; }
.gm-login-hero img { position:absolute; left:50%; bottom:-6px; height:118px; transform:translateX(-50%); filter:drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.gm-avatar i img.gm-av-badge { width:auto; height:22px; border:none; border-radius:0; background:none; object-fit:contain; }
.gm-isle.art.soon { border:none; opacity:1; padding:0; animation:gmIsleBob 3.2s ease-in-out infinite; }
.gm-isle.art.soon .gm-isle-art { opacity:0.9; }
.gm-isle.art.soon .gm-isle-label { margin-top:-10px; background:rgba(255,255,255,0.92); box-shadow:0 2px 6px rgba(0,40,80,0.2); padding:3px 10px 4px; }

/* 보스 제한시간은 카드 오른쪽 위에 겹쳐 표시 — 보스가 나와도 화면 높이가 바뀌지 않게 */
.gm-task { position:relative; }
.gm-timer, .gm-timer:empty { display:block; position:absolute; top:5px; right:8px; min-height:0; margin:0; font-size:11px; font-weight:700; }
.gm-timer:empty { display:none; }
.gm-ic { height:16px; width:auto; vertical-align:-3px; margin-right:4px; }
.gm-st-head .gm-ic, .gm-rank-title .gm-ic { height:18px; vertical-align:-4px; }
.gm-btn .gm-ic { height:18px; vertical-align:-4px; }
.gm-stats .gm-ic { height:14px; vertical-align:-2px; margin-right:3px; }
.gm-chip img { height:22px; width:auto; display:block; }

/* 좆좋소 키우기 — 효과 그림 */
.gm-fx { position:absolute; top:18%; height:56px; width:auto; transform:translate(-50%,0) scale(0.4); pointer-events:none; z-index:3;
  animation:gmFxPop 0.9s ease-out forwards; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.gm-fx.big { height:104px; top:0; animation-duration:1.2s; }
.gm-fx.coin { height:30px; top:46%; animation-name:gmFxCoin; }
.gm-fx.lvup { height:62px; top:10%; transform:none; animation-name:gmFxUp; }
.gm-fx.bean { height:26px; top:62%; transform:none; opacity:0.85; animation-name:gmFxBean; }
@keyframes gmFxPop { 0% { transform:translate(-50%,0) scale(0.4); opacity:0; } 25% { transform:translate(-50%,0) scale(1.1); opacity:1; } 70% { opacity:1; } 100% { transform:translate(-50%,-14px) scale(1); opacity:0; } }
@keyframes gmFxCoin { 0% { transform:translate(-50%,0) scale(0.6); opacity:0; } 20% { opacity:1; transform:translate(-50%,-6px) scale(1); } 100% { transform:translate(-50%,-46px) scale(0.8); opacity:0; } }
@keyframes gmFxUp { 0% { transform:translateY(20px); opacity:0; } 30% { opacity:1; } 100% { transform:translateY(-24px); opacity:0; } }
@keyframes gmFxBean { 0% { transform:translateY(0) rotate(0); opacity:0; } 25% { opacity:0.85; } 100% { transform:translateY(-60px) rotate(40deg); opacity:0; } }

/* 승진 연출 */
.gm-promo { position:absolute; left:0; right:0; top:70px; z-index:30; display:flex; flex-direction:column; align-items:center; pointer-events:none; animation:gmPromo 2.6s ease-out forwards; }
.gm-promo-conf { position:absolute; top:-30px; height:170px; width:auto; opacity:0.95; }
.gm-promo-badge { height:76px; width:auto; position:relative; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35)); animation:gmPromoBadge 0.6s ease-out; }
.gm-promo b { position:relative; margin-top:4px; padding:4px 14px; border-radius:14px; font-size:15px; color:#4a2c00; background:linear-gradient(90deg,#ffe082,#ffb74d); box-shadow:0 3px 10px rgba(0,0,0,0.25); }
@keyframes gmPromo { 0% { opacity:0; transform:translateY(10px); } 12% { opacity:1; transform:none; } 80% { opacity:1; } 100% { opacity:0; transform:translateY(-12px); } }
@keyframes gmPromoBadge { 0% { transform:scale(0.3) rotate(-20deg); } 70% { transform:scale(1.15) rotate(4deg); } 100% { transform:none; } }

/* 장면 카드 (사장 달성 / 자리 비운 동안 / 새 직원 입사) */
.gm-scene { position:absolute; inset:0; z-index:40; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; animation:gmFade 0.2s; }
@keyframes gmFade { from { opacity:0; } }
.gm-scene-card { width:88%; border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 12px 30px rgba(0,0,0,0.4); animation:gmSceneIn 0.35s ease-out; }
@keyframes gmSceneIn { from { transform:scale(0.85) translateY(10px); opacity:0; } }
.gm-scene-art { position:relative; height:120px; background:center/cover no-repeat; }
.gm-scene-art img { position:absolute; left:50%; bottom:-4px; height:112px; transform:translateX(-50%); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.gm-scene-txt { padding:12px 14px 2px; text-align:center; font-size:13px; line-height:1.6; color:var(--text2); word-break:keep-all; }
.gm-scene-txt b { color:var(--text); }
.gm-scene-card .gm-btn { width:calc(100% - 28px); margin:10px 14px 14px; }

/* 휴대폰 폭 — 강화 타일 5칸이 좁아지면 글자를 조금 줄여 이름이 잘리지 않게 */
@media (max-width:440px) {
  .gm-ups { gap:4px; }
  .gm-tile { padding:5px 1px 4px; }
  .gm-tile-name { font-size:9px; letter-spacing:-0.3px; }
  .gm-tile-lv, .gm-tile-cost { font-size:8.5px; }
  .gm-tile-icon img { height:19px; }
}

/* 만렙 스킬 — 맨 아래 한 줄에 작은 아이콘으로 */
/* 좆좋소 키우기 — 게임 관리(슈퍼 관리자) */
.gm-adm-title { font-weight:800; font-size:13px; margin:2px 0 8px; display:flex; align-items:center; gap:5px; }
.gm-adm-title small { font-weight:600; font-size:10px; color:#fff; background:var(--accent); padding:2px 6px; border-radius:99px; }
.gm-adm-list { border:1px solid var(--border); border-radius:10px; overflow:hidden; max-height:300px; overflow-y:auto; }
.gm-adm-head, .gm-adm-row { display:grid; grid-template-columns:1fr 1.5fr 42px 74px; gap:4px; align-items:center; padding:6px 8px; font-size:11px; }
.gm-adm-head { background:var(--input-bg); color:var(--text3); font-weight:700; font-size:10px; position:sticky; top:0; }
.gm-adm-row { border-top:1px solid var(--border2); }
.gm-adm-row:hover { background:var(--input-bg); }
.gm-adm-row b { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-adm-row span { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-adm-acts { display:flex; gap:3px; justify-content:flex-end; }
.gm-adm-acts button { border:1px solid var(--border); background:var(--surface); border-radius:6px; width:22px; height:22px;
  font-size:11px; cursor:pointer; color:var(--text2); font-family:inherit; padding:0; }
.gm-adm-acts button img { height:14px; width:auto; display:block; margin:0 auto; opacity:0.85; }
.gm-adm-acts button:hover img { opacity:1; }
.gm-adm-acts button:hover { border-color:var(--accent); color:var(--text); }
.gm-adm-acts button.danger:hover { border-color:#d93025; color:#d93025; }
/* 랭킹 — 몇 번째로 키우는 직원인지(입사 차수). 2기부터는 난이도가 달라 구분이 필요 */
.gm-nth { display:inline-block; font-size:9.5px; font-weight:800; color:#fff; background:var(--text3);
  padding:1px 4px; border-radius:99px; margin-right:4px; vertical-align:1px; letter-spacing:-0.02em; }
.gm-rank-row.top1 .gm-nth { background:#d9a23a; }
.gm-adm-note { font-size:10px; color:var(--text3); margin:5px 2px 0; }
.gm-adm-sec { font-size:11px; font-weight:800; color:var(--text2); margin:10px 2px 5px; }
.gm-adm-sec small { font-weight:600; font-size:10px; color:var(--text3); margin-left:4px; }
.gm-adm-evnow { display:flex; align-items:center; gap:7px; padding:6px 9px; margin-bottom:5px; border-radius:9px;
  background:linear-gradient(90deg,#fff2cf,#ffe3a0); border:1px solid #f0b429; font-size:11px; color:#4a3410; }
.gm-adm-evnow img { height:20px; width:auto; }
.gm-adm-evnow span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-adm-evnow em { font-style:normal; font-weight:800; color:#8a6400; flex:none; }
.gm-adm-evnow.off { background:var(--input-bg); border:1px dashed var(--border); color:var(--text3); justify-content:center; }
.gm-rank-note { font-size:10.5px; color:var(--text3); text-align:center; margin:6px 2px 0; }
.gm-adm-evs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.gm-adm-evs button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px 5px;
  border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text2);
  font-family:inherit; font-size:10px; font-weight:700; cursor:pointer; min-width:0; }
.gm-adm-evs button:hover { border-color:var(--accent); color:var(--text); }
.gm-adm-evs button img { height:20px; width:auto; }
.gm-adm-evs button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.gm-adm-evs button.off { justify-content:center; color:var(--text3); grid-column:1/-1; }
.gm-adm-evs button.off:hover { border-color:#d93025; color:#d93025; }
.gm-adm-btns { display:flex; gap:5px; margin:8px 0 0; }
.gm-adm-btns .gm-btn { flex:1; margin:0; }
.gm-btn.danger { border-color:#e2a5a0; color:#c5372c; }
.gm-btn.danger:hover { background:#fdeceb; border-color:#d93025; }
.gm-title { cursor:default; }
.gm-maxrow { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:4px 6px; border-radius:9px;
  background:linear-gradient(90deg,rgba(217,162,58,0.16),rgba(217,162,58,0.04)); border:1px solid rgba(217,162,58,0.45); }
.gm-maxrow-label { font-size:9.5px; font-weight:800; color:#d9a23a; margin-right:2px; letter-spacing:0.5px; }
.gm-maxchip { width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:help; }
.gm-maxchip:hover { background:rgba(217,162,58,0.25); }
.gm-maxchip { position:relative; }
.gm-maxchip img { height:20px; width:auto; }
.gm-maxrow.locked { background:var(--input-bg); border:1px dashed var(--border); }
.gm-maxrow.locked .gm-maxrow-label { color:var(--text3); }
.gm-maxrow.locked .gm-maxchip { opacity:0.55; filter:grayscale(0.7); cursor:help; }
.gm-maxrow.locked .gm-maxchip:hover { opacity:1; filter:none; background:var(--border2); }
.gm-chip-lock { position:absolute; right:-1px; bottom:-1px; height:11px !important; width:auto; }

/* 창 최소 높이(550px)를 채울 때 남는 공간은 메뉴 줄 위로 */
.gm-body.padded { display:flex; flex-direction:column; box-sizing:border-box; }
.gm-body.padded > * { flex-shrink:0; }
.gm-body.padded > .gm-foot { margin-top:auto; }

/* 제목줄 버튼(고정·투명도·숨기기·닫기) — 같은 크기 칸에 가운데 정렬 */
.gm-head-btns { display:flex; align-items:center; gap:2px; }
.gm-head-btns button { display:flex; align-items:center; justify-content:center; width:26px; height:24px; padding:0; line-height:1; font-size:16px; }
.gm-head-btns button img, .gm-head-btns .gm-pin-ic { width:16px; height:16px; object-fit:contain; margin:0; }

/* 좆좋소 키우기 — 아이콘 7종 + 그림 없는 UI 다듬기 */
.gm-title { display:flex; align-items:center; gap:6px; }
.gm-logo { height:22px; width:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.gm-tile-icon img[src$="lock.png"] { height:18px; opacity:0.8; }
.gm-medal { height:22px; width:auto; display:block; }
.gm-rank-row { align-items:center; border-radius:8px; }
.gm-rank-row > span:first-child { width:24px; display:flex; justify-content:center; }
.gm-rank-row.top { font-weight:700; padding:6px 4px; }
.gm-rank-row.top1 { background:linear-gradient(90deg,rgba(255,200,60,0.22),transparent 80%); }
.gm-rank-row.top2 { background:linear-gradient(90deg,rgba(190,200,215,0.22),transparent 80%); }
.gm-rank-row.top3 { background:linear-gradient(90deg,rgba(205,130,70,0.2),transparent 80%); }
.gm-rank-row.me { box-shadow:inset 3px 0 0 var(--accent); }

/* 콤보 배지 */
.gm-combo { display:inline-flex; align-items:center; gap:2px; padding:2px 8px 2px 3px; border-radius:12px; background:linear-gradient(90deg,rgba(255,140,40,0.2),rgba(255,140,40,0.05)); }
.gm-combo img { height:18px; width:auto; }
.gm-combo b { font-size:13px; color:#ff7a1a; }
.gm-combo.hot img { animation:gmFlame 0.5s ease-in-out infinite alternate; }
@keyframes gmFlame { to { transform:scale(1.18) rotate(-6deg); } }

/* 남은 업무 막대 — 그라데이션 + 흐르는 빛, 보스는 붉게 맥박 */
.gm-bar.hp { height:9px; border-radius:6px; background:rgba(0,0,0,0.12); overflow:hidden; position:relative; }
.gm-bar.hp i { background:linear-gradient(90deg,#ff8a50,#e53935); border-radius:6px; transition:width 0.15s ease-out; position:relative; overflow:hidden; display:block; height:100%; }
.gm-bar.hp i::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.45) 50%,transparent 70%); background-size:200% 100%; animation:gmBarShine 1.8s linear infinite; }
@keyframes gmBarShine { from { background-position:150% 0; } to { background-position:-50% 0; } }
.gm-bar.hp.boss i { background:linear-gradient(90deg,#c62828,#7b1fa2); animation:gmBossPulse 0.9s ease-in-out infinite; }
@keyframes gmBossPulse { 50% { filter:brightness(1.35); } }

/* 단어 칩 — 지금 칠 단어를 크고 또렷하게 */
.gm-keys.words .gm-key { height:30px; border-radius:15px; font-weight:600; }
.gm-keys.words .gm-key.now { font-size:16px; padding:0 14px; box-shadow:0 0 0 3px rgba(232,115,42,0.18), 0 3px 8px rgba(232,115,42,0.25); animation:gmKeyIn 0.18s ease-out; }
@keyframes gmKeyIn { from { transform:scale(0.8); opacity:0; } }
.gm-keys.words .gm-key.done { text-decoration:line-through; }
.gm-wordpop { position:absolute; z-index:25; transform:translateX(-50%); font-weight:800; font-size:16px; color:#2e9e5b; pointer-events:none; animation:gmWordPop 0.5s ease-out forwards; white-space:nowrap; }
@keyframes gmWordPop { 0% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-26px) scale(1.25); } }

/* 알림 — 카드형 */
.gm-toast { display:flex; align-items:center; gap:8px; left:12px; right:12px; padding:9px 12px; border-radius:12px; background:var(--surface); color:var(--text);
  border:1.5px solid var(--accent); box-shadow:0 8px 20px rgba(0,0,0,0.28); font-size:12.5px; line-height:1.45; animation:gmToastIn 0.25s ease-out; }
.gm-toast-ic { font-size:20px; flex-shrink:0; }
@keyframes gmToastIn { from { transform:translateY(-8px); opacity:0; } }

/* 로그인 입력칸·버튼 */
#gmNick, #gmPin { border-radius:12px; padding:11px 14px; font-size:14px; transition:border-color 0.15s, box-shadow 0.15s; }
#gmNick:focus, #gmPin:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,115,42,0.18); }
#gmStartBtn { border:none; border-radius:12px; padding:12px; font-weight:800; color:#fff; background:linear-gradient(90deg,#ff9a3c,#e8732a); box-shadow:0 4px 12px rgba(232,115,42,0.35); }
#gmStartBtn:active { transform:translateY(1px); box-shadow:0 2px 6px rgba(232,115,42,0.35); }

/* 휴대폰 조작 버튼 — 게임패드 느낌 */
.gm-st-btns button { border:none; border-radius:14px; color:#fff; font-weight:800; background:linear-gradient(180deg,#5c6bc0,#3949ab);
  box-shadow:0 4px 0 #283593, 0 6px 12px rgba(0,0,0,0.25); }
.gm-st-btns button:active { transform:translateY(3px); box-shadow:0 1px 0 #283593; background:linear-gradient(180deg,#5c6bc0,#3949ab); }

/* 테트리스(휴대폰) — 게임판이 줄어들 수 있게 해서 아래 조작 버튼이 잘리지 않게 */
.gm-body.fixed .gm-tt-cv { min-height:0; }
.gm-tt-btns { gap:5px; }
.gm-tt-btns button { padding:7px 0; font-size:15px; }
.gm-body.fixed > .gm-tt-btns + .gm-btn { margin-top:6px; }

/* 좆좋소 키우기 — 팀원 뽑기 */
.gm-team-ph { width:40px; height:40px; font-size:12px; }
.gm-team-list { display:flex; flex-direction:column; gap:5px; }
.gm-team-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); }
.gm-team-row.empty { opacity:0.55; border-style:dashed; }
.gm-team-text { flex:1; min-width:0; display:flex; flex-direction:column; font-size:12px; }
.gm-team-text small { color:var(--text3); font-size:10.5px; }
.gm-team-rank { font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:6px; color:#fff; vertical-align:1px; }
.gm-team-rank.intern { background:#8bc34a; } .gm-team-rank.staff { background:#42a5f5; }
.gm-team-stars { font-size:10.5px; letter-spacing:-1px; color:#c7c7c7; }
.gm-team-stars.g3 { color:#42a5f5; } .gm-team-stars.g4 { color:#ab47bc; } .gm-team-stars.g5 { color:#ffb300; text-shadow:0 0 4px rgba(255,179,0,0.6); }
.gm-team-out { flex-shrink:0; padding:4px 8px; border-radius:8px; border:1px solid var(--border); background:none; color:var(--text3); font-size:11px; font-family:inherit; cursor:pointer; }
.gm-team-out:hover { color:#e53935; border-color:#e53935; }
.gm-team-pulls { display:flex; gap:8px; margin-top:10px; }
.gm-team-pull { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border:none; border-radius:12px; color:#fff; font-family:inherit; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,0.25); }
.gm-team-pull b { font-size:13px; } .gm-team-pull small { font-size:11px; font-weight:700; }
.gm-team-pull.intern { background:linear-gradient(180deg,#9ccc65,#689f38); }
.gm-team-pull.staff { background:linear-gradient(180deg,#64b5f6,#1e88e5); }
.gm-team-pull:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.25); }
.gm-team-pull:disabled { opacity:0.45; cursor:default; transform:none; }
.gm-team-pull .gm-money { height:13px; }
/* 뽑기 카드 연출 */
.gm-pull { position:absolute; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); animation:gmFade 0.2s; perspective:800px; }
.gm-pull-card { position:relative; width:200px; height:250px; transform-style:preserve-3d; animation:gmFlip 0.9s ease-out 0.15s both; }
@keyframes gmFlip { from { transform:rotateY(180deg) scale(0.7); } to { transform:rotateY(0) scale(1); } }
.gm-pull-back, .gm-pull-front { position:absolute; inset:0; border-radius:16px; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.gm-pull-back { transform:rotateY(180deg); background:linear-gradient(135deg,#5c6bc0,#283593); color:#fff; font-size:60px; font-weight:800; }
.gm-pull-front { background:var(--surface); color:var(--text); border:3px solid #bdbdbd; box-shadow:0 10px 30px rgba(0,0,0,0.4); padding:10px; text-align:center; }
.gm-pull-front b { font-size:17px; } .gm-pull-front small { font-size:11px; color:var(--text3); }
.gm-pull-face .gm-face-ph, .gm-pull-img { width:84px !important; height:84px !important; font-size:22px; border-radius:50%; }
.gm-pull.g3 .gm-pull-front { border-color:#42a5f5; }
.gm-pull.g4 .gm-pull-front { border-color:#ab47bc; box-shadow:0 0 24px rgba(171,71,188,0.6); }
.gm-pull.g5 .gm-pull-front { border-color:#ffb300; box-shadow:0 0 32px rgba(255,179,0,0.8); }
.gm-pull-front .gm-team-stars { font-size:16px; }
.gm-rank-title .gm-refs { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--text2); }
.gm-rank-title .gm-refs b { color:#e8732a; }
.gm-rank-title { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
/* 미니게임 나가기 — 제목 줄 오른쪽 작은 버튼 */
.gm-st-head { gap:8px; }
.gm-st-head > span { margin-left:auto; }
.gm-exit { flex-shrink:0; padding:3px 9px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--text3); font-size:11px; font-family:inherit; cursor:pointer; }
.gm-exit:hover { color:#e53935; border-color:#e53935; }

/* 좆좋소 키우기 — 팀원 뽑기 연출 (모바일 게임식) */
.gm-gacha { --gc:#9e9e9e; position:absolute; inset:0; z-index:50; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gc) 35%, #0b0b14) 0%, #07070d 70%); animation:gmFade 0.25s; cursor:pointer; }
.gm-gacha-rays { position:absolute; left:50%; top:45%; width:900px; height:900px; margin:-450px 0 0 -450px; opacity:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 70%, transparent) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle, #000 10%, transparent 62%); mask:radial-gradient(circle, #000 10%, transparent 62%);
  animation:gmRaysSpin 9s linear infinite, gmRaysIn 0.6s ease-out 0.55s forwards; }
@keyframes gmRaysSpin { to { transform:rotate(360deg); } }
@keyframes gmRaysIn { to { opacity:0.9; } }
.gm-gacha-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.gm-gacha.open .gm-gacha-flash { animation:gmFlash 0.5s ease-out; }
@keyframes gmFlash { 0% { opacity:0.95; } 100% { opacity:0; } }
.gm-gacha-env { position:absolute; top:42%; left:50%; width:130px; height:96px; margin:-48px 0 0 -65px; border-radius:12px;
  background:linear-gradient(160deg,#fffdf4,#efe3c4); box-shadow:0 0 0 3px var(--gc), 0 0 40px var(--gc); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  animation:gmEnvDrop 0.45s cubic-bezier(.3,1.6,.6,1) both, gmEnvShake 0.12s linear 0.5s infinite; transition:box-shadow 0.3s; }
.gm-gacha-seal .gm-ic { height:42px; margin:0; }
.gm-gacha-hint { font-size:11px; font-weight:800; color:#7a5a20; }
@keyframes gmEnvDrop { from { transform:translateY(-260px) rotate(-12deg) scale(0.6); } }
@keyframes gmEnvShake { 25% { transform:translate(-3px,1px) rotate(-3deg); } 75% { transform:translate(3px,-1px) rotate(3deg); } }
.gm-gacha.upgrade .gm-gacha-env { animation:gmEnvDrop 0.45s both, gmEnvShake 0.06s linear infinite; box-shadow:0 0 0 4px var(--gc), 0 0 70px var(--gc), 0 0 120px #fff; }
.gm-gacha.open .gm-gacha-env { animation:gmEnvBurst 0.35s ease-out forwards; }
@keyframes gmEnvBurst { to { transform:scale(2.2); opacity:0; } }
.gm-gacha-card { position:relative; width:210px; padding:12px 10px 12px; border-radius:18px; text-align:center; color:#fff; opacity:0; transform:scale(0.3) rotateY(180deg);
  background:linear-gradient(170deg, color-mix(in srgb, var(--gc) 55%, #1b1b2a), #12121c 70%); border:3px solid var(--gc);
  box-shadow:0 0 30px color-mix(in srgb, var(--gc) 70%, transparent), inset 0 0 25px color-mix(in srgb, var(--gc) 35%, transparent);
  display:flex; flex-direction:column; align-items:center; gap:3px; }
.gm-gacha.open .gm-gacha-card { animation:gmCardIn 0.65s cubic-bezier(.2,1.4,.4,1) 0.1s forwards; }
@keyframes gmCardIn { to { opacity:1; transform:none; } }
.gm-gacha-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:2px 12px; border-radius:10px; font-size:11px; font-weight:900; letter-spacing:1px; color:#fff; background:var(--gc); white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.4); }
.gm-gacha-body { height:150px; display:flex; align-items:flex-end; justify-content:center; }
.gm-gacha-body img { height:150px; width:auto; filter:drop-shadow(0 0 12px color-mix(in srgb, var(--gc) 80%, transparent)); }
.gm-gacha-body .gm-pull-img { width:110px !important; height:110px !important; }
.gm-gacha-stars i { font-style:normal; font-size:22px; color:#444; display:inline-block; opacity:0; transform:scale(2.4); }
.gm-gacha.open .gm-gacha-stars i { animation:gmStarIn 0.3s ease-out forwards; }
.gm-gacha-stars i.on { color:var(--gc); text-shadow:0 0 8px var(--gc); }
@keyframes gmStarIn { to { opacity:1; transform:scale(1); } }
.gm-gacha-card b { font-size:19px; text-shadow:0 2px 6px rgba(0,0,0,0.6); }
.gm-gacha-card small { font-size:11px; color:rgba(255,255,255,0.8); }
.gm-gacha-card small em { font-style:normal; color:#ffd54f; font-weight:800; }
.gm-gacha-card.g5 { border-color:transparent; background:linear-gradient(170deg,#4a3500,#14101c 70%) padding-box, linear-gradient(120deg,#ff5252,#ffb300,#69f0ae,#40c4ff,#e040fb,#ff5252) border-box; background-size:100% 100%, 300% 300%; }
.gm-gacha.open .gm-gacha-card.g5 { animation:gmCardIn 0.65s cubic-bezier(.2,1.4,.4,1) 0.1s forwards, gmRainbow 2s linear infinite; }
@keyframes gmRainbow { to { background-position:0 0, 300% 0; } }
.gm-gacha-banner { position:absolute; top:12%; left:0; right:0; text-align:center; font-size:30px; font-weight:900; letter-spacing:3px; color:#fff; opacity:0;
  text-shadow:0 0 12px var(--gc), 0 0 28px var(--gc), 0 3px 0 rgba(0,0,0,0.5); }
.gm-gacha.open .gm-gacha-banner { animation:gmBanner 0.6s cubic-bezier(.2,1.6,.4,1) 1.3s forwards; }
@keyframes gmBanner { from { opacity:0; transform:scale(3); } to { opacity:1; transform:scale(1); } }
.gm-gacha-skip { position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:11px; color:rgba(255,255,255,0.5); }
.gm-widget.gm-shake { animation:gmShake 0.5s; }
@keyframes gmShake { 10%,50%,90% { transform:translate(-6px,2px); } 30%,70% { transform:translate(6px,-2px); } }
.gm-adm-grant, .gm-adm-when { display:flex; align-items:center; gap:6px; margin:4px 0 8px; font-size:12px; }
.gm-adm-grant input { width:70px; } .gm-adm-grant .gm-btn { width:auto; flex:1; margin:0; padding:7px; }
.gm-adm-when label { display:flex; align-items:center; gap:4px; }
.gm-adm-when input, .gm-adm-grant input { padding:5px 6px; border:1.5px solid var(--border); border-radius:7px; background:var(--input-bg); color:var(--text); font-family:inherit; font-size:12px; }
.gm-adm-when input[type=number] { width:58px; }
/* 뽑기 — 봉투 그림 · 에픽/레전드 금테 카드 */
.gm-gacha-env { width:160px; height:auto; margin:-60px 0 0 -80px; background:none; border-radius:0; box-shadow:none; filter:drop-shadow(0 0 14px var(--gc)) drop-shadow(0 0 4px var(--gc)); }
.gm-gacha-env img { width:160px; height:auto; display:block; }
.gm-gacha-env .gm-gacha-hint { margin-top:4px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.8); }
.gm-gacha.upgrade .gm-gacha-env { box-shadow:none; filter:drop-shadow(0 0 26px var(--gc)) drop-shadow(0 0 60px #fff); }
.gm-gacha-card.g4, .gm-gacha-card.g5 { border:none; padding:30px 22px 26px; min-height:300px; box-sizing:border-box; justify-content:center; }
.gm-gacha-frame { position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); pointer-events:none; z-index:2; filter:drop-shadow(0 0 10px var(--gc)); }
.gm-gacha-card.g4 .gm-gacha-tag, .gm-gacha-card.g5 .gm-gacha-tag { z-index:3; top:-8px; }
.gm-stat-refs b { color:#e8732a; }

/* 업무 화면 — 팀원들이 캐릭터 옆에 서 있음 */
.gm-crew { display:flex; align-items:flex-end; flex-shrink:0; margin-left:-14px; margin-right:-4px; align-self:flex-end; pointer-events:auto; }
.gm-crew-m { position:relative; margin-left:-12px; animation:gmCrewBob 2.4s ease-in-out infinite; animation-delay:var(--d); transform-origin:bottom center; }
.gm-crew-m:first-child { margin-left:0; }
.gm-crew-m img { height:58px; width:auto; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
.gm-crew-m .gm-face-ph { width:28px; height:28px; font-size:9px; }
.gm-crew-m.g4::after, .gm-crew-m.g5::after { content:''; position:absolute; left:10%; right:10%; bottom:-2px; height:6px; border-radius:50%; z-index:-1; }
.gm-crew-m.g4::after { background:radial-gradient(#ce93d8,transparent 70%); }
.gm-crew-m.g5::after { background:radial-gradient(#ffd54f,transparent 70%); box-shadow:0 0 8px #ffd54f; }
.gm-crew-m > i { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-style:normal; font-size:15px; opacity:0; pointer-events:none; }
@keyframes gmCrewBob { 50% { transform:translateY(-2px); } }
.gm-crew-m.hop { animation:gmCrewHop 0.35s ease-out; }
@keyframes gmCrewHop { 40% { transform:translateY(-9px); } }
.gm-crew-m.oops { animation:gmCrewOops 0.7s; }
.gm-crew-m.oops > i { animation:gmOopsIco 1.2s ease-out; }
@keyframes gmCrewOops { 10%,30%,50%,70% { transform:translateX(-3px) rotate(-5deg); } 20%,40%,60% { transform:translateX(3px) rotate(5deg); } }
@keyframes gmOopsIco { 0% { opacity:0; transform:translate(-50%,4px) scale(0.5); } 20% { opacity:1; transform:translate(-50%,-4px) scale(1.2); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-10px); } }
/* 고정 안 했을 때 1분 쉬면 거의 안 보이게 — 사용자 투명도 설정보다 우선, 마우스를 올리면 복귀 */
.gm-widget.idle { opacity:0.05 !important; transition:opacity 0.6s; }
.gm-widget.idle:hover { opacity:1 !important; }

/* 투명도 옵션 — 마우스가 창 밖이면 5% */
.gm-widget.away { opacity:0.05 !important; transition:opacity 0.25s; }
/* 관리 화면 — 지금 걸린 돌발 이벤트 버튼 눌린 상태, 예약은 점선 */
.gm-adm-evs button.on { border-color:var(--accent) !important; background:var(--accent-bg) !important; box-shadow:inset 0 2px 4px rgba(0,0,0,0.25), 0 0 0 2px rgba(232,115,42,0.35); transform:translateY(1px); }
.gm-adm-evs button.on span { font-weight:800; color:var(--accent-text); }
.gm-adm-evs button.pending { border-style:dashed !important; border-color:var(--accent) !important; }

/* 좆좋소 키우기 — 원카드 */
.oc-lobby { display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0; }
.oc-modes { display:flex; gap:8px; }
.oc-mode { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 6px; border:none; border-radius:14px; color:#fff; font-family:inherit; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,0.25); }
.oc-mode b { font-size:14px; } .oc-mode small { font-size:10.5px; opacity:0.9; }
.oc-mode.solo { background:linear-gradient(180deg,#26a69a,#00796b); }
.oc-mode.multi { background:linear-gradient(180deg,#ff8a50,#e8732a); }
.oc-mode:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.25); }
.oc-rooms { display:flex; flex-direction:column; gap:5px; overflow-y:auto; max-height:170px; }
.oc-room { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); }
.oc-room .gm-btn { width:auto; margin:0; padding:6px 12px; }
.oc-room-faces { display:flex; } .oc-room-faces .oc-mini { width:24px; height:24px; border-radius:50%; margin-left:-6px; border:2px solid var(--surface); object-fit:cover; }
.oc-room-faces .oc-mini:first-child { margin-left:0; }
.oc-room-t { flex:1; min-width:0; display:flex; flex-direction:column; font-size:12px; } .oc-room-t small { color:var(--text3); font-size:10.5px; }
.oc-rules { font-size:10.5px; line-height:1.55; color:var(--text3); padding:8px 10px; border-radius:10px; background:var(--input-bg); word-break:keep-all; margin-top:auto; }
.oc-waits { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.oc-wait { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:12px; background:var(--input-bg); border:1px solid var(--border2); font-size:12px; text-align:center; }
.oc-wait small { font-size:10px; color:var(--text3); } .oc-wait.empty { opacity:0.55; border-style:dashed; }
.oc-face { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#f1ede8; border:2px solid rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:center; font-size:12px; }
/* 테이블 */
.oc-table { position:relative; flex:1 1 auto; min-height:230px; border-radius:16px; overflow:hidden;
  background:radial-gradient(ellipse at center,#2e7d4f 0%,#1b5e3a 65%,#123f27 100%); box-shadow:inset 0 0 0 4px #6d4c2f, inset 0 0 0 6px #8d6a46, inset 0 0 30px rgba(0,0,0,0.5); }
.oc-seat { position:absolute; display:flex; flex-direction:column; align-items:center; gap:1px; color:#fff; font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,0.7); transition:transform 0.2s; }
.oc-seat b { font-size:11px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-seat.top { top:8px; left:50%; transform:translateX(-50%); }
.oc-seat.left { left:8px; top:40%; transform:translateY(-50%); }
.oc-seat.right { right:8px; top:40%; transform:translateY(-50%); }
.oc-seat.bottom { left:10px; bottom:6px; flex-direction:row; gap:5px; }
.oc-seat.bottom .oc-face { width:30px; height:30px; }
.oc-seat.turn .oc-face { box-shadow:0 0 0 3px #ffd54f, 0 0 14px #ffd54f; animation:ocTurn 1s ease-in-out infinite; }
@keyframes ocTurn { 50% { box-shadow:0 0 0 3px #ffd54f, 0 0 24px #ffd54f; } }
.oc-seat.out { opacity:0.4; filter:grayscale(1); }
.oc-seat.win .oc-face { box-shadow:0 0 0 3px #69f0ae, 0 0 18px #69f0ae; }
.oc-cnt { font-size:10px; font-weight:800; padding:1px 7px; border-radius:8px; background:rgba(0,0,0,0.45); }
.oc-fan { display:flex; margin-top:2px; } .oc-fan i { width:9px; height:13px; margin-left:-4px; border-radius:2px; background:#b71c1c url(assets/game/ui/oc-back.png) center/100% 100% no-repeat; box-shadow:0 1px 2px rgba(0,0,0,0.4); }
.oc-fan i:first-child { margin-left:0; }
.oc-center { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:12px; }
.oc-deck { position:relative; } .oc-deck small { position:absolute; bottom:-14px; left:0; right:0; text-align:center; color:#fff; font-size:10px; opacity:0.8; }
.oc-pile .oc-card { transform:rotate(-4deg) scale(1.08); box-shadow:0 4px 10px rgba(0,0,0,0.5); }
.oc-pile.new .oc-card { animation:ocDrop 0.25s ease-out; }
@keyframes ocDrop { from { transform:translateY(-30px) rotate(-14deg) scale(1.2); opacity:0; } }
.oc-state { display:flex; flex-direction:column; align-items:center; gap:4px; }
.oc-dir { font-size:22px; color:rgba(255,255,255,0.75); line-height:1; }
.oc-suit { font-size:22px; line-height:1; padding:2px 6px; border-radius:8px; background:#fff; color:#222; box-shadow:0 0 10px rgba(255,255,255,0.6); }
.oc-suit.red { color:#d32f2f; }
.oc-atk { font-size:15px; font-weight:900; color:#fff; padding:2px 8px; border-radius:10px; background:#d32f2f; box-shadow:0 0 12px #ff5252; animation:ocAtk 0.6s ease-in-out infinite alternate; }
@keyframes ocAtk { to { transform:scale(1.15); } }
.oc-one { position:absolute; left:50%; top:74%; transform:translateX(-50%); color:#ffd54f; font-size:14px; font-weight:900; text-shadow:0 0 8px #000; white-space:nowrap; }
.oc-one:not(:empty) { animation:ocAtk 0.4s ease-in-out infinite alternate; }
/* 카드 */
.oc-card { width:42px; height:60px; box-sizing:border-box; border-radius:7px; background:#fff; border:1.5px solid #cfcfcf; color:#222; font-family:inherit; padding:2px 3px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; box-shadow:0 2px 4px rgba(0,0,0,0.3); flex-shrink:0; }
.oc-card .r { font-size:13px; font-weight:900; line-height:1; } .oc-card .su { font-size:22px; line-height:1; align-self:center; margin-bottom:6px; }
.oc-card.red { color:#d32f2f; }
.oc-card.back { background:#b71c1c url(assets/game/ui/oc-back.png) center/100% 100% no-repeat; border:none; padding:0; }
.oc-card.joker .r { font-size:8px; letter-spacing:0.5px; } .oc-card.joker .su { font-size:24px; }
.oc-card.joker.bj { background:linear-gradient(160deg,#fff,#cfd8dc); }
.oc-card.joker.cj { background:linear-gradient(160deg,#fff59d,#f48fb1,#90caf9); }
.oc-log { font-size:11.5px; text-align:center; color:var(--text2); min-height:16px; margin:5px 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-hand { display:flex; justify-content:center; align-items:flex-end; height:74px; padding:0 6px; }
.oc-slot { flex-shrink:0; display:flex; }
.oc-hand button.oc-card { cursor:pointer; transition:transform 0.12s; opacity:0.55; }
.oc-hand.my button.oc-card.ok { opacity:1; transform:translateY(-8px); box-shadow:0 0 0 2px #ffd54f, 0 4px 10px rgba(0,0,0,0.35); }
.oc-hand.my button.oc-card.ok:hover { transform:translateY(-14px); }
.oc-hand:not(.my) button.oc-card { opacity:0.85; cursor:default; }
.oc-btns { display:flex; gap:8px; margin-top:4px; }
.oc-btns .gm-btn { margin:0; flex:1; padding:9px; }
.oc-onebtn.hot { border:none; color:#fff; font-weight:900; background:linear-gradient(90deg,#ff5252,#ffb300); animation:ocAtk 0.35s ease-in-out infinite alternate; }
.oc-pick { position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(0,0,0,0.55); color:#fff; }
.oc-pick div { display:flex; gap:10px; }
.oc-pick button { width:56px; height:56px; font-size:30px; border:none; border-radius:14px; background:#fff; color:#222; cursor:pointer; }
.oc-pick button.red { color:#d32f2f; }
.oc-result { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); animation:gmFade 0.2s; }
.oc-result-card { width:86%; padding:16px 14px; border-radius:16px; background:var(--surface); text-align:center; display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--text2); box-shadow:0 12px 30px rgba(0,0,0,0.45); animation:gmSceneIn 0.3s ease-out; }
.oc-result-card small { color:var(--text3); font-size:11px; }
.oc-result-rank { font-size:24px; font-weight:900; color:var(--text); }
.oc-result.win .oc-result-rank { color:#e8a000; }
.oc-result-btns { display:flex; gap:8px; } .oc-result-btns .gm-btn { margin:0; }
.gm-body.fixed .oc-table { min-height:0; }

/* 좆좋소 키우기 — 월드: 하늘 배경 하나에 본사 섬을 가운데 두고 궤도 위에 미니게임 섬 */
.gm-world, :root[data-theme="dark"] .gm-world { background:#2f8de8 url("assets/game/ui/world-sky.jpg") center/cover no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gm-world { background:#2f8de8 url("assets/game/ui/world-sky.jpg") center/cover no-repeat; } }
.gm-body.fixed > .gm-world { flex:1 1 0; flex-shrink:1; min-height:240px; }
.gm-body:not(.fixed) > .gm-world { height:420px; }
.gm-world::after { content:''; position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,250,220,0.55) 0%,rgba(255,255,255,0.18) 45%,transparent 70%); }
.gm-hq { position:absolute; z-index:1; padding:0; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; animation:gmIsleBob 4s ease-in-out infinite; }
.gm-hq img { width:100%; height:auto; display:block; pointer-events:none; filter:drop-shadow(0 8px 10px rgba(0,40,80,0.3)); }
.gm-hq:hover img { filter:drop-shadow(0 0 6px rgba(255,255,255,0.95)) drop-shadow(0 0 3px var(--accent)); }
.gm-hq .gm-isle-label { margin-top:-12px; background:rgba(255,255,255,0.92); box-shadow:0 2px 6px rgba(0,40,80,0.2); }
.gm-hq .gm-isle-label b { font-size:11.5px; color:#222; } .gm-hq .gm-isle-label small { font-size:10px; }
.gm-world .gm-isle { z-index:2; }
.oc-suit { white-space:nowrap; }
.oc-suit.any { font-size:11px; font-weight:800; padding:4px 8px; line-height:1.2; }
.oc-onebtn:disabled { opacity:0.45; cursor:default; }
/* 같이 하기 — 서버로 보내는 중 */
.oc-hand.busy button.oc-card { opacity:0.4; cursor:progress; pointer-events:none; }
.oc-hand.busy button.oc-card.sending { opacity:1; transform:translateY(-22px) scale(1.06); box-shadow:0 0 0 2px #69f0ae, 0 0 16px rgba(105,240,174,0.8); animation:ocSending 0.6s ease-in-out infinite alternate; }
@keyframes ocSending { to { transform:translateY(-26px) scale(1.06); box-shadow:0 0 0 2px #69f0ae, 0 0 24px rgba(105,240,174,1); } }
.oc-take.sending { cursor:progress; }
/* 원카드 — 내 차례 강조 */
.oc-table-in { display:contents; }
.oc-fx { position:absolute; inset:0; pointer-events:none; z-index:20; }
.oc-table.myturn { animation:ocMyTurn 1.1s ease-in-out infinite; }
@keyframes ocMyTurn {
  0%,100% { box-shadow:inset 0 0 0 4px #6d4c2f, inset 0 0 0 6px #8d6a46, inset 0 0 30px rgba(0,0,0,0.5), 0 0 0 3px #ffd54f, 0 0 10px rgba(255,213,79,0.6); }
  50% { box-shadow:inset 0 0 0 4px #6d4c2f, inset 0 0 0 6px #8d6a46, inset 0 0 30px rgba(0,0,0,0.5), 0 0 0 3px #ffca28, 0 0 22px rgba(255,202,40,0.95); } }
.oc-mine { font-size:10.5px; font-weight:900; color:#3e2700; padding:2px 8px; border-radius:10px; background:linear-gradient(90deg,#ffd54f,#ffb300); text-shadow:none; box-shadow:0 0 10px rgba(255,213,79,0.9); animation:ocAtk 0.5s ease-in-out infinite alternate; }
.oc-hand.my { border-radius:12px; background:radial-gradient(ellipse at 50% 100%,rgba(255,213,79,0.35),transparent 70%); }
.oc-turn-banner { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); white-space:nowrap; font-size:26px; font-weight:900; color:#fff; padding:8px 26px; border-radius:28px;
  background:linear-gradient(90deg,#ff8f00,#ffca28,#ff8f00); text-shadow:0 2px 3px rgba(0,0,0,0.35); box-shadow:0 0 0 3px rgba(255,255,255,0.85), 0 8px 24px rgba(0,0,0,0.45); animation:ocBanner 1.4s ease-out forwards; }
@keyframes ocBanner { 0% { opacity:0; transform:translate(-50%,-50%) scale(0.4); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.12); } 25% { transform:translate(-50%,-50%) scale(1); }
  75% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-70%) scale(0.95); } }
/* 남은 시간(같이 하기) */
.oc-timer { position:absolute; left:10px; right:10px; bottom:3px; height:4px; border-radius:2px; background:rgba(0,0,0,0.3); overflow:hidden; z-index:5; }
.oc-timer i { display:block; height:100%; width:100%; background:rgba(255,255,255,0.55); transition:width 1.5s linear; }
.oc-timer i.mine { background:#ffd54f; } .oc-timer i.low { background:#ff5252; }
/* 이모지 */
.oc-emo-wrap { position:relative; display:flex; flex:0 0 auto; }
.oc-btns .oc-emo-btn { flex:0 0 44px; width:44px; padding:6px 0; font-size:18px; line-height:1; }
.oc-emo-pal { position:absolute; right:0; bottom:calc(100% + 6px); display:none; grid-template-columns:repeat(4,36px); gap:4px; padding:6px; border-radius:14px; z-index:40;
  background:var(--surface); border:1px solid var(--border2); box-shadow:0 8px 20px rgba(0,0,0,0.35); }
.oc-emo-pal.open { display:grid; animation:gmFade 0.15s; }
.oc-emo-pal button { width:36px; height:36px; border:none; border-radius:10px; background:var(--input-bg); font-size:20px; cursor:pointer; padding:0; }
.oc-emo-pal button:hover { transform:scale(1.15); background:var(--border2); }
.oc-emo { position:absolute; font-size:30px; line-height:1; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.45)); animation:ocEmo 2.6s ease-out forwards; }
.oc-emo.bottom { left:48px; bottom:36px; } .oc-emo.top { left:calc(50% + 30px); top:6px; }
.oc-emo.left { left:56px; top:20%; } .oc-emo.right { right:56px; top:20%; }
@keyframes ocEmo { 0% { opacity:0; transform:scale(0.3) translateY(10px); } 12% { opacity:1; transform:scale(1.25); } 22% { transform:scale(1); } 80% { opacity:1; transform:translateY(-6px); } 100% { opacity:0; transform:translateY(-16px); } }
/* 원카드 — 낼 카드가 없을 때: 손패 잠그고 먹기 버튼 강조 */
.oc-hand.stuck button.oc-card { opacity:0.35; filter:grayscale(0.9) brightness(0.9); cursor:not-allowed; pointer-events:none; transform:none; box-shadow:none; }
.oc-take.must { border:none; color:#fff; font-weight:900; font-size:14px; background:linear-gradient(90deg,#ff9800,#ffb300); box-shadow:0 0 0 2px #fff, 0 0 16px rgba(255,167,38,0.9); animation:ocMust 0.7s ease-in-out infinite alternate; }
.oc-take.must.atk { background:linear-gradient(90deg,#e53935,#ff7043); box-shadow:0 0 0 2px #fff, 0 0 18px rgba(255,82,82,0.95); }
@keyframes ocMust { to { transform:scale(1.05); box-shadow:0 0 0 2px #fff, 0 0 26px rgba(255,138,80,1); } }
.oc-must { color:#e53935; font-weight:900; }
/* 좆좋소 키우기 — 통합 뽑기 · 보관함 · 강화 */
.gm-body.fixed > .gm-team-scroll { flex:1 1 0; flex-shrink:1; min-height:0; }
.gm-team-scroll { overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:6px; padding-right:2px; scrollbar-width:thin; }
.gm-team-scroll .gm-team-pulls { margin-top:4px; }
.gm-team-pull.one { background:linear-gradient(180deg,#9ccc65,#689f38); }
.gm-team-pull.ten { flex:1.4; background:linear-gradient(180deg,#ffb74d,#f57c00); }
.gm-team-odds { font-size:10px; color:var(--text3); text-align:center; word-break:keep-all; }
.gm-inv-head { display:flex; align-items:center; gap:6px; margin-top:4px; }
.gm-inv-head small { flex:1; }
.gm-team-row { gap:6px; }
.gm-team-row.g3 { border-left:3px solid #42a5f5; } .gm-team-row.g4 { border-left:3px solid #ab47bc; } .gm-team-row.g5 { border-left:3px solid #ffb300; }
.gm-team-act { flex-shrink:0; padding:4px 7px; border-radius:8px; border:1px solid var(--border); background:none; color:var(--text2); font-size:11px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; }
.gm-team-act.in { color:#fff; border-color:transparent; background:var(--accent); }
.gm-team-act.up { color:#fff; border-color:transparent; background:linear-gradient(90deg,#ab47bc,#7e57c2); animation:ocAtk 0.8s ease-in-out infinite alternate; }
.gm-team-act.out:hover { color:#e53935; border-color:#e53935; }
/* 11회 결과 */
.gm-gacha-multi { flex-direction:column; gap:10px; }
.gm-gacha-multi .gm-gacha-rays { opacity:0.35; }
.gm-gm-title { position:relative; color:#fff; font-size:16px; font-weight:900; text-shadow:0 2px 6px rgba(0,0,0,0.5); }
.gm-gm-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:min(92%,380px); }
.gm-gm-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px 5px; border-radius:10px; color:#fff; font-size:10.5px;
  background:linear-gradient(170deg,#3a3a3a,#1c1c1c); border:2px solid #777; opacity:0; transform:scale(0.4) rotateY(180deg); animation:gmMultiIn 0.4s cubic-bezier(.2,1.4,.4,1) forwards; }
.gm-gm-card.g2 { border-color:#66bb6a; } .gm-gm-card.g3 { border-color:#42a5f5; box-shadow:0 0 8px rgba(66,165,245,0.6); }
.gm-gm-card.g4 { border-color:#ab47bc; box-shadow:0 0 12px rgba(171,71,188,0.8); background:linear-gradient(170deg,#3b1a47,#1c1022); }
.gm-gm-card.g5 { border-color:#ffb300; box-shadow:0 0 16px rgba(255,179,0,0.9); background:linear-gradient(170deg,#4a3500,#14101c); }
@keyframes gmMultiIn { to { opacity:1; transform:none; } }
.gm-gm-face .gm-face-ph, .gm-gm-face img { width:38px; height:38px; border-radius:50%; object-fit:cover; display:block; }
.gm-gm-stars { font-size:9px; letter-spacing:-1px; color:#ffd54f; line-height:1.1; }
.gm-gm-card b { font-size:10.5px; white-space:nowrap; }
.gm-gm-new { position:absolute; top:-6px; right:-4px; font-style:normal; font-size:8.5px; font-weight:900; color:#fff; background:#e53935; padding:1px 4px; border-radius:6px; }
/* 저장 상태 — 제목 옆 */
.gm-save { flex:0 1 auto; min-width:0; margin:0 auto 0 6px; font-size:10px; font-weight:600; color:var(--text4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.gm-save.off { color:#e57373; }
/* 아래 메뉴줄 — 휴대폰에서도 한 줄 */
.gm-foot { flex-wrap:nowrap; }
.gm-link { white-space:nowrap; }
@media (max-width:440px) {
  .gm-foot { gap:2px; }
  .gm-link { font-size:11px; }
  .gm-link-long { display:none; }
}
/* 좆좋소 키우기 — 해전 */
.bs-ic { font-size:14px; line-height:1; margin-right:3px; }
.bs-main { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 auto; min-height:0; }
.gm-body.fixed > .bs-main { flex-shrink:1; }
.bs-title { font-size:12.5px; font-weight:800; text-align:center; } .bs-title small { display:block; font-weight:500; font-size:10.5px; color:var(--text3); }
.bs-board { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:4px; border-radius:10px; background:linear-gradient(160deg,#1565c0,#0d47a1); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.25); }
.bs-board.place, .bs-board.enemy { width:min(100%,272px); }
.bs-board.mine { width:118px; gap:1px; padding:3px; border-radius:8px; }
.bs-c { aspect-ratio:1; border:none; padding:0; border-radius:4px; background:rgba(255,255,255,0.10); display:block; position:relative; }
.bs-board.mine .bs-c { border-radius:2px; }
button.bs-c { cursor:crosshair; font-family:inherit; }
.bs-enemy-wrap.myturn button.bs-c:hover { background:rgba(255,213,79,0.55); box-shadow:inset 0 0 0 2px #ffd54f; }
.bs-c.fog { background:rgba(255,255,255,0.12); }
.bs-c.sea { background:rgba(255,255,255,0.08); }
.bs-c.ship { background:linear-gradient(160deg,#b0bec5,#78909c); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25); }
.bs-board.place .bs-c.ship { cursor:pointer; } .bs-board.place .bs-c.ship:hover { filter:brightness(1.15); }
.bs-c.miss::after { content:''; position:absolute; inset:34%; border-radius:50%; background:rgba(255,255,255,0.75); }
.bs-c.hit { background:linear-gradient(160deg,#ff7043,#d84315); }
.bs-c.hit::after { content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:60%; }
.bs-board.enemy .bs-c.hit::after, .bs-board.place .bs-c.hit::after { font-size:15px; }
.bs-c.ship.hit { background:linear-gradient(160deg,#ef5350,#b71c1c); }
.bs-c.sunk { background:#3e2723; box-shadow:inset 0 0 0 2px #ff7043; }
.bs-c.sunk::after { content:'☠'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:#ffab91; }
.bs-c.reveal { background:rgba(176,190,197,0.55); }
.bs-c.last { animation:bsLast 0.6s ease-out 2; box-shadow:0 0 0 2px #ffd54f, 0 0 10px #ffd54f; z-index:1; }
@keyframes bsLast { from { transform:scale(1.35); } }
.bs-c.aim { background:#ffd54f !important; animation:ocSending 0.5s ease-in-out infinite alternate; }
.bs-enemy-wrap { padding:3px; border-radius:13px; }
.bs-enemy-wrap.myturn { animation:ocMyTurn 1.1s ease-in-out infinite; }
.bs-vs { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; }
.bs-p { display:flex; flex-direction:column; align-items:center; font-size:10.5px; min-width:52px; } .bs-p .oc-face { width:30px; height:30px; }
.bs-p.turn .oc-face { box-shadow:0 0 0 3px #ffd54f, 0 0 12px #ffd54f; }
.bs-turn { flex:1; text-align:center; font-size:12px; font-weight:800; color:var(--text2); }
.bs-turn.mine { color:#fff; padding:5px 8px; border-radius:12px; background:linear-gradient(90deg,#ff8f00,#ffb300); box-shadow:0 0 12px rgba(255,179,0,0.7); animation:ocAtk 0.6s ease-in-out infinite alternate; }
.bs-fleet { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; font-size:10px; } .bs-fleet small { color:var(--text3); }
.bs-ship { color:#ef6c00; letter-spacing:-1px; font-size:9px; } .bs-ship.sunk { color:var(--text4); text-decoration:line-through; }
.bs-bottom { display:flex; gap:10px; align-items:flex-start; width:100%; justify-content:center; }
.bs-side { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .bs-side .bs-fleet { justify-content:flex-start; }
.bs-log { text-align:left; white-space:normal; margin:0; font-size:11px; }
.bs-timer { position:relative; left:auto; right:auto; bottom:auto; }
.bs-wait { display:flex; align-items:center; justify-content:center; gap:18px; padding:18px 0; font-size:18px; }
.bs-wait .oc-face { width:52px; height:52px; }
.oc-btns .bs-ready { flex:1.4; }
.bs-enemy-wrap { width:min(100%,280px); box-sizing:border-box; }
.bs-enemy-wrap .bs-board.enemy { width:100%; box-sizing:border-box; }
.bs-board.place { box-sizing:border-box; }
.bs-main > .oc-btns { width:min(100%,272px); }
.bs-main .gm-btn { white-space:nowrap; }
.oc-btns .bs-ready:not(:disabled) { border:none; color:#fff; font-weight:800; background:linear-gradient(90deg,#26a69a,#00897b); }
/* 해전 — 배 조각 그림 · 명중/빗나감 효과 그림(v2.49.2) */
.bs-c.ship { background:rgba(255,255,255,0.08); box-shadow:none; }
.bs-c.ship::before { content:''; position:absolute; inset:-1px; background:center/contain no-repeat; pointer-events:none; }
.bs-c.p-tail::before { background-image:url("assets/game/ui/bs-ship-tail.png"); }
.bs-c.p-body::before { background-image:url("assets/game/ui/bs-ship-body.png"); }
.bs-c.p-head::before { background-image:url("assets/game/ui/bs-ship-head.png"); }
.bs-c.ship.v::before { transform:rotate(90deg); }
.bs-c.miss::after { content:''; inset:8%; border-radius:0; background:url("assets/game/ui/fx-bs-miss.png") center/contain no-repeat; opacity:0.8; }
.bs-c.hit { background:rgba(255,112,67,0.35); }
.bs-c.hit::after, .bs-board.enemy .bs-c.hit::after, .bs-board.place .bs-c.hit::after { content:''; inset:4%; font-size:0; background:url("assets/game/ui/fx-bs-hit.png") center/contain no-repeat; }
.bs-c.ship.hit { background:rgba(255,112,67,0.3); }
.bs-c.sunk { background:rgba(62,39,35,0.75); box-shadow:inset 0 0 0 1px #ff7043; }
.bs-c.sunk::before { filter:grayscale(0.5) brightness(0.65); }
.bs-c.sunk::after { content:''; inset:22%; font-size:0; color:transparent; background:url("assets/game/ui/fx-bs-hit.png") center/contain no-repeat; opacity:0.9; }
.bs-c.reveal { background:rgba(255,255,255,0.10); } .bs-c.reveal::before { opacity:0.6; }
.bs-c.last { animation:none; }
.bs-pop { position:absolute; left:-70%; top:-70%; width:240%; height:240%; z-index:4; pointer-events:none; background:center/contain no-repeat; animation:bsPop 0.9s ease-out forwards; }
.bs-pop.hit { background-image:url("assets/game/ui/fx-bs-hit.png"); } .bs-pop.miss { background-image:url("assets/game/ui/fx-bs-miss.png"); }
@keyframes bsPop { 0% { opacity:0; transform:scale(0.3); } 20% { opacity:1; transform:scale(1.15); } 60% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.05); } }
.bs-board.mine .bs-pop { left:-100%; top:-100%; width:300%; height:300%; }
/* 랭킹 탭 7개 — 두 줄로 */
.gm-rank-tabs { flex-wrap:wrap; }
.gm-rank-tabs button { flex:1 1 22%; white-space:nowrap; font-size:11.5px; }
/* 좆좋소 키우기 — 블록 블라스트 */
.bb-main { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1 1 auto; min-height:0; }
.bb-board { position:relative; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; width:min(100%,300px); padding:6px; box-sizing:border-box; border-radius:12px;
  background:linear-gradient(160deg,#2b2f4a,#1b1e33); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.3); touch-action:none; }
.bb-board > i { aspect-ratio:1; border-radius:4px; background:rgba(255,255,255,0.06) center/cover no-repeat; transition:background-color 0.1s; }
.bb-board > i.on { background-color:transparent; box-shadow:0 1px 2px rgba(0,0,0,0.35); }
.bb-board > i.ghost { background-color:rgba(255,255,255,0.35); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.7); }
.bb-board > i.clear { box-shadow:inset 0 0 0 2px #ffd54f, 0 0 10px #ffd54f; }
.bb-board > i.boom { animation:bbBoom 0.45s ease-out; }
@keyframes bbBoom { 0% { background-color:#fff59d; transform:scale(1.15); box-shadow:0 0 14px #ffd54f; } 100% { transform:scale(1); } }
.bb-board.placed { animation:bbPlaced 0.18s ease-out; }
@keyframes bbPlaced { 50% { transform:scale(0.985); } }
.bb-tray { display:flex; justify-content:space-around; align-items:center; width:min(100%,300px); min-height:104px; gap:6px; }
.bb-slot { flex:1; height:104px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--input-bg); border:1px solid var(--border2); cursor:grab; touch-action:none; }
.bb-slot:empty { cursor:default; opacity:0.4; }
.bb-slot.no { opacity:0.35; filter:grayscale(0.8); }
.bb-slot.lifted .bb-piece { opacity:0.25; }
.bb-piece { position:relative; display:block; pointer-events:none; }
.bb-t { position:absolute; display:block; border-radius:3px; background:center/cover no-repeat; box-shadow:0 1px 2px rgba(0,0,0,0.3); }
.bb-drag { position:fixed; z-index:10000; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }
.bb-drag .bb-t { box-shadow:0 0 0 1px rgba(255,255,255,0.5); }
.bb-fx { position:absolute; inset:0; pointer-events:none; }
.bb-pts { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); white-space:nowrap; font-size:20px; font-weight:900; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.7); animation:bbPts 1.1s ease-out forwards; }
.bb-pts b { color:#ffd54f; } .bb-pts em { font-style:normal; color:#ff8a65; }
@keyframes bbPts { 0% { opacity:0; transform:translate(-50%,-30%) scale(0.6); } 20% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } 80% { opacity:1; transform:translate(-50%,-70%) scale(1); } 100% { opacity:0; transform:translate(-50%,-90%); } }
/* 랭킹 탭 — 아이콘만 한 줄 */
.gm-rank-tabs { flex-wrap:nowrap; }
.gm-rank-tabs button { flex:1 1 0; min-width:0; padding:5px 0; display:flex; align-items:center; justify-content:center; }
.gm-rank-tabs button .gm-ic { width:24px; height:24px; margin:0; }
.gm-rank-tabs button:not(.on) .gm-ic { opacity:0.55; filter:grayscale(0.35); }
.gm-rank-tabs button:hover .gm-ic { opacity:1; filter:none; }
/* v2.52 — 미션 칩 · 미션 화면 · 주간 랭킹 · 근무 시간 · 새로 생긴 것 */
.gm-stat-mis { cursor:pointer; padding:1px 7px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); white-space:nowrap; }
.gm-stat-mis b { margin-left:2px; }
.gm-stat-mis.ready { border-color:#ffb300; background:rgba(255,179,0,0.15); animation:ocAtk 0.7s ease-in-out infinite alternate; }
.gm-mis { display:flex; flex-direction:column; gap:6px; }
.gm-mis-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--input-bg); border:1px solid var(--border2); }
.gm-mis-row.claimed { opacity:0.6; }
.gm-mis-row.bonus { border-style:dashed; }
.gm-mis-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; font-size:12px; }
.gm-mis-t small { color:var(--text3); font-size:10.5px; }
.gm-mis-t .gm-bar { height:6px; }
.gm-mis-row .gm-btn { width:auto; margin:0; padding:6px 10px; white-space:nowrap; }
.gm-mis-ok { font-size:11px; color:#43a047; font-weight:700; white-space:nowrap; }
.gm-rank-scope { display:flex; gap:4px; margin:-2px 0 8px; }
.gm-rank-scope button { flex:1; padding:4px 0; border:1px solid var(--border); border-radius:8px; background:none; color:var(--text3); font-family:inherit; font-size:11.5px; cursor:pointer; }
.gm-rank-scope button.on { border-color:var(--accent); color:var(--text); font-weight:700; background:var(--accent-bg); }
.gm-rank-last { margin-top:8px; padding:6px 10px; border-radius:10px; font-size:11px; color:var(--text2); background:var(--input-bg); word-break:keep-all; }
.gm-rank-last small { color:var(--text3); }
.gm-adm-hours { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:6px; }
.gm-adm-hours span { flex:1; } .gm-adm-hours .gm-btn { width:auto; margin:0; padding:6px 12px; }
.gm-event.off { background:linear-gradient(90deg,rgba(63,81,181,0.18),rgba(103,58,183,0.12)); }
.gm-ev-emo { font-size:16px; line-height:1; }
.gm-notes { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); animation:gmFade 0.2s; }
.gm-notes-card { width:86%; max-height:80%; overflow:auto; padding:16px 16px 12px; border-radius:16px; background:var(--surface); box-shadow:0 12px 30px rgba(0,0,0,0.45); font-size:12.5px; color:var(--text2); animation:gmSceneIn 0.3s ease-out; }
.gm-notes-title { font-size:16px; font-weight:900; color:var(--text); margin-bottom:8px; }
.gm-notes-v { font-size:10.5px; font-weight:800; color:var(--accent); margin-top:6px; }
.gm-notes-card ul { margin:4px 0 8px; padding-left:18px; line-height:1.6; word-break:keep-all; }
.gm-notes-card .gm-btn { margin-top:4px; }
/* 근무 외 시간 사고 — 사무실 장면 덮개 */
.gm-arena[class*="db-"]::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit; }
.gm-arena.db-dark::after { background:radial-gradient(circle at 50% 42%, rgba(255,240,180,0.10) 0%, rgba(0,0,0,0.25) 28%, rgba(0,0,0,0.72) 62%); animation:dbFlicker 4s steps(1) infinite; }
@keyframes dbFlicker { 0%,100% { opacity:1; } 47% { opacity:1; } 48% { opacity:0.55; } 50% { opacity:1; } 51% { opacity:0.7; } 52% { opacity:1; } }
.gm-arena.db-hot::after { background:linear-gradient(180deg, rgba(255,120,40,0.28), rgba(255,60,0,0.12)); animation:dbHeat 2.4s ease-in-out infinite alternate; }
@keyframes dbHeat { to { opacity:0.6; } }
.gm-arena.db-net { filter:saturate(0.55) hue-rotate(-10deg); }
.gm-arena.db-net::after { background:repeating-linear-gradient(0deg, rgba(120,170,255,0.06) 0 2px, transparent 2px 5px); animation:dbStatic 0.25s steps(2) infinite; }
@keyframes dbStatic { 50% { transform:translateY(2px); } }
.gm-arena.db-tired { filter:grayscale(0.45) brightness(0.92); }
.gm-arena.db-dust::after { background:radial-gradient(circle at 30% 70%, rgba(220,200,160,0.35), transparent 60%), radial-gradient(circle at 75% 35%, rgba(220,200,160,0.25), transparent 55%); animation:dbHeat 3s ease-in-out infinite alternate; }
.gm-event.off { background:linear-gradient(90deg,rgba(229,57,53,0.22),rgba(63,81,181,0.14)); border-color:rgba(229,57,53,0.45); }
/* 좆좋소 키우기 — 슬롯머신 */
.sl-main { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 auto; min-height:0; }
.sl-machine { position:relative; width:min(100%,300px); padding:12px 12px 10px; box-sizing:border-box; border-radius:18px; text-align:center;
  background:linear-gradient(180deg,#c62828,#7f0000); box-shadow:inset 0 0 0 3px #ffd54f, inset 0 0 0 6px #b71c1c, 0 6px 16px rgba(0,0,0,0.35); }
.sl-lights { height:8px; margin:-4px 6px 8px; border-radius:4px; background:repeating-linear-gradient(90deg,#ffeb3b 0 8px,transparent 8px 16px); animation:slLights 0.8s steps(2) infinite; opacity:0.85; }
@keyframes slLights { 50% { background-position:8px 0; } }
.sl-reels { position:relative; display:flex; gap:6px; padding:6px; border-radius:12px; background:#2b1b1b; box-shadow:inset 0 3px 8px rgba(0,0,0,0.6); }
.sl-reel { flex:1; height:180px; overflow:hidden; border-radius:8px; background:linear-gradient(180deg,#e0e0e0,#fff 30%,#fff 70%,#e0e0e0); }
.sl-strip { will-change:transform; }
.sl-sym { height:60px; display:flex; align-items:center; justify-content:center; }
.sl-sym img { height:44px; width:auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.sl-line { position:absolute; left:2px; right:2px; top:50%; height:62px; transform:translateY(-50%); border-top:2px solid rgba(255,213,79,0.9); border-bottom:2px solid rgba(255,213,79,0.9); pointer-events:none; box-shadow:0 0 10px rgba(255,213,79,0.5); }
.sl-result { margin-top:8px; min-height:20px; color:#fff; font-size:13px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.6); }
.sl-result b { color:#ffd54f; font-size:16px; }
.sl-machine.win .sl-line { animation:slWin 0.4s ease-in-out 4 alternate; }
@keyframes slWin { to { box-shadow:0 0 24px #ffd54f, inset 0 0 18px rgba(255,213,79,0.6); } }
.sl-machine.jackpot { animation:slJack 0.3s ease-in-out 8 alternate; }
@keyframes slJack { to { box-shadow:inset 0 0 0 3px #fff176, inset 0 0 0 6px #ff6f00, 0 0 30px #ffd54f; } }
.sl-bets { display:flex; gap:6px; width:min(100%,300px); }
.sl-bet { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; border-radius:10px; border:1.5px solid var(--border); background:var(--input-bg); color:var(--text2); font-family:inherit; cursor:pointer; }
.sl-bet b { font-size:12.5px; color:var(--text); } .sl-bet small { font-size:10px; color:var(--text3); }
.sl-bet.on { border-color:#ffb300; background:rgba(255,179,0,0.15); }
.sl-spin { width:min(100%,300px); padding:12px; border:none; border-radius:14px; font-family:inherit; font-size:17px; font-weight:900; color:#3e2700; cursor:pointer;
  background:linear-gradient(180deg,#ffe082,#ffb300); box-shadow:0 5px 0 #c77c00, 0 8px 14px rgba(0,0,0,0.3); }
.sl-spin:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 #c77c00; }
.sl-spin:disabled { opacity:0.6; cursor:progress; }
.sl-table { display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; width:min(100%,300px); font-size:11px; color:var(--text2); }
.sl-table span { display:flex; align-items:center; gap:1px; }
.sl-table img { height:16px; width:auto; }
.sl-table b { margin-left:4px; color:var(--text); } .sl-table em { font-style:normal; font-size:9.5px; color:#ef6c00; margin-left:3px; }
.sl-table .sl-pair { grid-column:1/-1; color:var(--text3); }
.sl-spin small { font-size:11px; font-weight:700; opacity:0.75; margin-left:4px; }
.sl-bet b { font-size:14px; }
/* 미션 — 아래 메뉴 맨 앞(받을 보상이 있으면 빨간 점) */
.gm-link-mis { position:relative; }
.gm-link-mis small { font-size:10px; color:var(--text3); }
.gm-link-mis.ready::after { content:''; position:absolute; top:-2px; right:-5px; width:7px; height:7px; border-radius:50%; background:#e53935; box-shadow:0 0 0 2px var(--surface); animation:ocAtk 0.7s ease-in-out infinite alternate; }
/* 직원 화면 — 사장 달성 시 격려(패시브) 보기 */
.gm-cheer-help { font-size:10.5px; line-height:1.5; color:var(--text3); padding:6px 9px; margin-bottom:6px; border-radius:9px; background:var(--input-bg); word-break:keep-all; }
.gm-cheer-help b { color:var(--text2); }
.gm-char-cheer { display:block; margin-top:2px; font-size:10.5px; color:var(--text3); white-space:normal; word-break:keep-all; }
.gm-char-cheer b { color:var(--text2); }
.gm-char-cheer.on { color:#ef6c00; } .gm-char-cheer.on b { color:#e65100; }
.gm-char-row-text small.gm-char-cheer { white-space:normal; overflow:visible; text-overflow:clip; }
.gm-char-row.locked .gm-char-cheer { opacity:0.9; }
.gm-rank-week { margin:-4px 0 8px; padding:5px 9px; border-radius:9px; font-size:10.5px; color:var(--text2); background:rgba(255,179,0,0.12); word-break:keep-all; }
.gm-rank-week b { color:#e65100; }
/* 게임 버전(제목 옆) · 게임만 업데이트됐을 때 안내 */
.gm-ver { margin-left:5px; font-size:9.5px; font-weight:600; color:var(--text4); }
.gm-newver { position:absolute; left:10px; right:10px; top:40px; z-index:55; display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; font-size:12px; color:#fff;
  background:linear-gradient(90deg,#3949ab,#7e57c2); box-shadow:0 6px 16px rgba(0,0,0,0.35); animation:gmFade 0.25s; }
.gm-newver b { color:#ffe082; }
.gm-newver button { margin-left:auto; padding:4px 10px; border:none; border-radius:8px; background:#fff; color:#3949ab; font-family:inherit; font-weight:800; font-size:11.5px; cursor:pointer; }
.gm-newver i { font-style:normal; cursor:pointer; opacity:0.8; padding:0 2px; }
/* 블록 블라스트 — 콤보·난이도 줄 */
.bb-combo { display:flex; align-items:center; gap:6px; width:min(100%,300px); min-height:20px; font-size:11.5px; color:var(--text2); }
.bb-combo b { color:#ff7043; } .bb-combo small { color:var(--text3); font-size:10.5px; }
.bb-keep { color:#ffb300; letter-spacing:1px; font-size:11px; }
.bb-combo.hot .bb-keep { color:#e53935; animation:ocAtk 0.5s ease-in-out infinite alternate; }
.bb-lv { margin-left:auto; font-size:10.5px; color:#ab47bc; white-space:nowrap; }
.bb-pts.lost { color:#ff8a80; font-size:16px; }
.gm-pow-combo { color:#ff7043; font-size:10.5px; }
.gm-stats > span { white-space:nowrap; }
.gm-lbl { font-style:normal; }
@media (max-width:440px) { .gm-lbl { display:none; } .gm-stats { font-size:11.5px; } }
/* 추천서 지급 — 이유 한 줄씩 */
.gm-grant-list { display:flex; flex-direction:column; gap:3px; margin:8px auto 2px; width:min(100%,260px); text-align:left; font-size:12px; }
.gm-grant-list div { display:flex; justify-content:space-between; gap:10px; padding:4px 10px; border-radius:8px; background:rgba(0,0,0,0.05); }
.gm-grant-list b { color:#e65100; white-space:nowrap; }
.gm-grant-note { display:block; color:var(--text3); font-size:10.5px; }
/* 팀 도움 배지 — 팀원들 머리 위 가운데(사람 수가 늘어도 같이 따라감) */
/* 팀원 — 사무실 안에서만 겹치게(스킬 설명창을 덮던 문제), 팀 도움 배지는 팀원들 머리 위 가운데 */
.gm-crew { position:relative; z-index:1; isolation:isolate; }
.gm-tip { z-index:40; }
.gm-crew .gm-crew-buff { position:absolute; left:auto; right:-2px; bottom:100%; transform:translateY(-3px); z-index:12; padding:2px 8px; border-radius:10px; white-space:nowrap;
  font-size:11px; font-weight:800; line-height:1.4; color:#fff; cursor:pointer; text-shadow:0 1px 2px rgba(0,0,0,0.5);
  background:rgba(27,94,32,0.92); border:1px solid rgba(165,214,167,0.9); box-shadow:0 2px 6px rgba(0,0,0,0.45); }
.gm-crew .gm-crew-buff:hover { background:rgba(46,125,50,0.95); }
.gm-crew-m:nth-child(2) { margin-left:0; } /* 배지가 첫 자식이 되어 첫 팀원 겹침 보정 */

/* ===== 게임 전용 사이트 (window.GM_STANDALONE) — 작은 창 대신 화면 가운데 세로 한 줄로 크게 ===== */
.gm-widget.gm-standalone { left:50% !important; top:0 !important; right:auto !important; bottom:auto !important; transform:translateX(-50%);
  width:min(480px,100vw); max-width:100vw; height:100vh; height:100dvh; max-height:none; border-radius:0; border-top:0; border-bottom:0;
  opacity:1 !important; display:flex; flex-direction:column; box-shadow:0 0 40px rgba(0,0,0,0.12); }
.gm-widget.gm-standalone .gm-head { cursor:default; padding:10px 14px; }
.gm-widget.gm-standalone .gm-head-btns { display:none; }
.gm-widget.gm-standalone .gm-body { flex:1; overflow-y:auto; overscroll-behavior:contain; }
.gm-standalone ~ .gm-chip { display:none !important; }
@media (max-width:480px) { .gm-widget.gm-standalone { border-left:0; border-right:0; box-shadow:none; } }
.gm-widget.gm-standalone:focus-within { border-color:var(--border); }
.gm-adm-title .gm-adm-logout { margin-left:auto; font:inherit; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer; }
/* 전용 사이트 — 화면 높이를 채울 때 남는 공간은 업무 장면(사무실 그림)이 차지, 메뉴 줄은 맨 아래(위 .padded 규칙) */
/* 휴대폰(터치)에서만 — PC 큰 화면에서 업무 장면이 지나치게 커지던 문제(v2.22) */
@media (pointer:coarse) {
  .gm-widget.gm-standalone .gm-body.padded > .gm-arena { flex:1 1 auto; min-height:140px; }
  .gm-widget.gm-standalone .gm-body.padded > .gm-arena .gm-hero { height:clamp(112px,42%,260px); }
  .gm-widget.gm-standalone .gm-body.padded > .gm-ups { max-height:none; overflow:visible; } /* MAX 줄이 잘려 보이지 않게 스킬은 다 펼침 */
}
/* PC — 미니창 크기의 카드를 화면 가운데에(높이는 내용만큼) */
@media (pointer:fine) {
  .gm-widget.gm-standalone { top:50% !important; transform:translate(-50%,-50%); height:auto; max-height:100vh; max-height:100dvh; border-radius:14px; border:1px solid var(--border); }
  .gm-widget.gm-standalone .gm-body { flex:0 1 auto; } /* 카드 높이가 내용만큼이라 flex:1이면 정해 둔 높이가 무시돼 미니게임이 작아졌음 */
  .gm-widget.gm-standalone .gm-body.padded > .gm-arena { height:clamp(220px,34vh,320px); }
  .gm-widget.gm-standalone .gm-body.padded > .gm-arena .gm-hero { height:clamp(112px,42%,260px); }
}

/* 프로필 사진(게임 v2.20) — 랭킹·관리 목록 닉네임 앞, 플레이 화면 캐릭터 줄 오른쪽 */
.gm-pf { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; box-sizing:border-box; border:1.5px solid var(--border); background:var(--input-bg); }
.gm-pf-ph { color:#fff; font-weight:700; font-size:13px; line-height:1; }
.gm-pf.gm-pf-s { width:20px; height:20px; font-size:10px; border-width:1px; margin-right:5px; vertical-align:-5px; }
.gm-pf-ph.gm-pf-s { display:inline-block; overflow:hidden; text-align:center; line-height:18px; } /* overflow로 기준선을 아래 끝에 — 사진(img)과 같은 높이에 */
.gm-pf.gm-pf-l { width:64px; height:64px; font-size:24px; border-width:2px; }
.gm-pf-btn { flex-shrink:0; padding:0; border:none; background:none; cursor:pointer; border-radius:50%; line-height:0; }
.gm-pf-btn:hover .gm-pf { border-color:var(--accent); }
.gm-pf-now { display:flex; align-items:center; gap:12px; padding:8px 4px; }
.gm-pf-now b { display:block; font-size:15px; }
.gm-pf-now small { color:var(--text3); font-size:11.5px; }
.gm-pf-acts { display:flex; gap:6px; }
.gm-pf-acts .gm-btn { flex:1; text-align:center; box-sizing:border-box; }
.gm-pf-msg { min-height:16px; margin-top:4px; font-size:11.5px; color:var(--text2); }
.gm-pf-sub { margin:6px 0 4px; font-size:12px; font-weight:700; color:var(--text2); }
.gm-pf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px; }
.gm-pf-grid button { aspect-ratio:1; padding:3px; border:1.5px solid var(--border); border-radius:50%; background:var(--input-bg); cursor:pointer; overflow:hidden; }
.gm-pf-grid button img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.gm-pf-grid button:hover { border-color:var(--accent); }
.gm-pf-grid button.on { border-color:var(--accent); box-shadow:0 0 0 2px rgba(232,115,42,0.35); }
.gm-pf-del { padding:0; border:none; background:none; cursor:pointer; line-height:0; vertical-align:-5px; }
.gm-pf-del:hover .gm-pf { outline:2px solid #d93025; }

/* 이모지 대신 그림(게임 v2.21) — 알림·격려·결과 카드에 들어간 작은 아이콘 크기 */
.gm-toast-ic img { height:22px; width:auto; display:block; }
.gm-cheer img.gm-ic, .gm-cheer.full .gm-cheer-chip img.gm-ic { width:auto; height:15px; border:none; box-shadow:none; border-radius:0; background:none; object-fit:contain; margin:0 2px 0 0; }
.gm-char-cheer .gm-ic { height:13px; vertical-align:-2px; margin-right:3px; }
.oc-result-rank .gm-ic { height:26px; vertical-align:-5px; margin-right:6px; }
.gm-notes-title .gm-ic { height:20px; vertical-align:-4px; }
.gm-float .gm-ic { height:1.1em; vertical-align:-0.2em; margin-right:2px; }
.gm-timer .gm-ic { height:13px; vertical-align:-2px; margin-right:2px; }

/* 새 그림 아이콘(게임 v2.23) — 원카드 감정 표현, 컴퓨터 빈자리, 팀원 실수 표시 등 */
.oc-emo-btn img { width:24px; height:24px; object-fit:contain; display:block; margin:0 auto; }
.oc-emo-pal button img { width:28px; height:28px; object-fit:contain; display:block; margin:auto; }
.oc-emo img { width:46px; height:46px; object-fit:contain; display:block; }
.oc-face.oc-bot { object-fit:contain; background:#e3eaf3; padding:2px; box-sizing:border-box; }
.gm-crew-m > i img.gm-dizzy { height:22px; width:auto; filter:none; }
.oc-mode b .gm-ic { height:18px; vertical-align:-4px; }
.gm-save .gm-ic { height:12px; vertical-align:-2px; margin-right:2px; }
.gm-newver .gm-ic { height:18px; vertical-align:-4px; }
.gm-intro .gm-ic { height:18px; vertical-align:-4px; }

/* 하단 메뉴(게임 v2.23) — [메뉴]를 누르면 스킬 창 위를 덮는 패널이 아래에서 위로 열림(지도 앱 설정 패널처럼) */
.gm-foot { position:relative; justify-content:center; }
.gm-menu-btn { position:relative; display:inline-flex; align-items:center; gap:7px; padding:6px 18px; border:1px solid var(--border); border-radius:99px; background:var(--surface); color:var(--text2); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.12); }
.gm-menu-btn:hover, .gm-foot.open .gm-menu-btn { border-color:var(--accent); color:var(--text); }
.gm-burger { display:inline-flex; flex-direction:column; justify-content:space-between; width:13px; height:10px; }
.gm-burger i { display:block; height:2px; border-radius:2px; background:currentColor; transition:transform 0.25s, opacity 0.2s; }
.gm-foot.open .gm-burger i:nth-child(1) { transform:translateY(4px) rotate(45deg); }
.gm-foot.open .gm-burger i:nth-child(2) { opacity:0; }
.gm-foot.open .gm-burger i:nth-child(3) { transform:translateY(-4px) rotate(-45deg); }
.gm-menu-btn.ready::after { content:''; position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:#e53935; box-shadow:0 0 0 2px var(--surface); animation:ocAtk 0.7s ease-in-out infinite alternate; }
.gm-menu-pop { position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:30; padding:12px 12px 10px; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.28);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(0.97); transform-origin:50% 100%; transition:opacity 0.18s, transform 0.18s, visibility 0s 0.18s; }
.gm-foot.open .gm-menu-pop { opacity:1; visibility:visible; transform:none; transition:opacity 0.18s, transform 0.2s cubic-bezier(.2,1.2,.4,1); }
.gm-mp-title { font-size:12px; font-weight:800; color:var(--text3); margin:0 2px 8px; }
.gm-mp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 6px; }
.gm-mp { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:0; border:none; background:none; color:var(--text2); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
.gm-mp small { font-size:10px; color:var(--text3); }
.gm-mp-ic { width:42px; height:42px; border-radius:50%; background:var(--input-bg); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; transition:transform 0.12s, border-color 0.12s; }
.gm-mp-ic img.gm-ic, .gm-mp-ic img.gm-menu-ic { height:26px; width:auto; margin:0; vertical-align:0; }
.gm-mp:hover .gm-mp-ic { transform:translateY(-2px); border-color:var(--accent); }
.gm-mp.locked { opacity:0.4; }
.gm-mp-pf .gm-pf { width:40px; height:40px; border:none; }
.gm-mp.gm-link-mis.ready::after { content:''; position:absolute; top:0; right:calc(50% - 22px); width:9px; height:9px; border-radius:50%; background:#e53935; box-shadow:0 0 0 2px var(--surface); }
/* 기존 유저 한 번만 — 첫 직원을 김창섭으로 바꿀지(게임 v2.23) */
.gm-swap-faces { display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 10px; }
.gm-swap-faces img { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#f1ede8; border:2px solid var(--border); }
.gm-swap-faces img:last-child { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,115,42,0.25); }
.gm-swap-faces b { font-size:26px; color:var(--text3); }
.gm-swap-txt { font-size:12.5px; line-height:1.55; color:var(--text2); word-break:keep-all; }
.gm-swap-txt small { display:block; margin-top:6px; font-size:11px; color:var(--text3); }
.gm-swap-btns { display:flex; gap:6px; margin-top:10px; }
.gm-swap-btns .gm-btn { flex:1; margin:0; font-size:13px; }