@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/cinzel.woff2") format("woff2");
}

      :root {
        /* [2.0985] **겹침 순서 사다리.**(사장님 지시 2026-09-03)
           여태 z-index 가 24가지 값으로 흩어져 있었고 제일 높은 것이 99999 였다.
           순서 자체는 뜻이 있었지만 **다음에 창을 하나 더 붙일 사람이 몇 번을
           써야 할지 알 수 없었다** - 그래서 "일단 99999" 가 나온다.
           값은 하나도 안 바꾸고 이름만 붙였다. 새 층이 필요하면 여기에 적고,
           숫자를 직접 쓰지 않는다. */
        --z-lift: 1;      /* 같은 칸 안에서 살짝 위 (사다리 점) */
        --z-lift-2: 2;    /* 그 위 (배지 · 닫기 · 화살표) */
        --z-lift-3: 3;    /* 표 머리줄 · 지금 시각 줄 */
        --z-lift-4: 5;      /* TV 타임라인의 지금 시각 줄 */
        --z-fx: 6;        /* 잠깐 터지는 연출 */
        --z-menu: 30;     /* 슬롯 ▾ 로 열리는 메뉴 */
        --z-menu-host: 40; /* 메뉴를 연 칸 (이웃 위로 올라와야 메뉴가 안 잘린다) */
        --z-tv-link: 50;  /* TV 화면의 나가기 */
        --z-scrim: 90;    /* 오픈 전 가림막 */
        --z-banner: 100;  /* 오픈 배너 · 남은 시간 */
        --z-nav: 900;     /* 아래 내비 · TV 확성기 연출 */
        --z-fab: 950;     /* 떠 있는 + 단추 */
        --z-modal: 999;   /* 보통 창 */
        --z-modal-2: 1100; /* 창 위의 창 (예약) */
        --z-modal-3: 1150; /* 확인 창 (그 위) */
        --z-modal-4: 1200; /* 오퍼 (제일 위 창) */
        --z-pull: 8500;   /* 당겨서 새로고침 */
        --z-iga: 9000;    /* 설치 안내 막대 */
        --z-net: 9400;    /* 연결 끊김 표시 */
        --z-stale-dim: 9490; /* 묵은 화면 흐리기 */
        --z-stale: 9500;  /* 묵은 화면 안내 · 설치 안내 가림막 */
        --z-tv-prompt: 9999; /* TV 전체화면 안내 */
        --z-toast: 10000; /* 성공 · 실패 알림 */
        --z-veil: 99999;  /* 아무것도 못 누르게 덮는 것 (제일 위) */
        --bg-rgb: 10, 6, 3;
        --blue-rgb: 47, 155, 255;
        --danger-rgb: 255, 94, 94;
        --danger-ink-rgb: 255, 157, 138;
        --danger-line-rgb: 122, 42, 26;
        --gold-rgb: 255, 209, 0;
        --gold-line-rgb: 212, 175, 55;
        --info-rgb: 0, 240, 255;
        --ink-rgb: 240, 230, 210;
        --ink-3-rgb: 168, 150, 122;
        --ink-hi-rgb: 255, 255, 255;
        --mint-rgb: 77, 230, 168;
        --ok-rgb: 30, 255, 0;
        --orange-rgb: 255, 138, 30;
        --orange-2-rgb: 255, 157, 61;
        --pink-rgb: 255, 76, 164;
        --purple-rgb: 207, 166, 255;
        --purple-2-rgb: 187, 124, 247;
        --purple-3-rgb: 184, 102, 255;
        --sky-rgb: 61, 198, 255;
        --warn-soft-rgb: 255, 184, 77;
        --shadow-rgb: 0, 0, 0;  /* 그림자 · 글자그림자 · 덮개 · 마스크 */
        --card-fill-rgb: 5, 3, 2;  /* 슬롯카드 · 예약카드의 반투명 바탕 */
        --mine-rgb: 4, 30, 0;  /* 내 슬롯 · 확정 표시의 초록 바탕 */
        --mega-rgb: 255, 106, 0;  /* 확성기 관리자 방송 강조 */
        --unlock-rgb: 255, 128, 0;  /* 21시 오픈 빛 · 배지 */
        --noshow-bg: #663300;  /* 노쇼 단추 바탕 */
        --remove-bg: #550000;  /* 제거 단추 바탕 */
        --cancel-hi: #ff8080;  /* 로스터 취소 알림 글자 */
        --confirm-hi: #00ff88;  /* 확정 표시 글자 */
        --paper-bg: #f2efe9;       /* 명함 종이. 흰색(--ink-hi)과 구별되게 살짝 눕혔다 */
        --paper-ink: #1b1b1b;   /* 종이 위 검은 글자 · 15.0:1 */
        --paper-ink-3: #6b665e; /* 종이 위 흐린 글자 · 5.0:1 */
        --carrot: #a85413;      /* 로고 주황 · 4.6:1 */
        --leaf: #456e35;        /* 로고 초록 · 5.5:1 */
        --uifont: "AtSign", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --bg: #0a0603; /* 페이지 바탕 */
        --surface: #1a1207; /* 판 바탕 (그라데이션 시작) */
        --surface-2: #2b1d0a; /* 판 바탕 (그라데이션 끝) */
        --card: #241608; /* 칸 · 카드 바탕 */
        --card-up: #3d2510; /* 올라온 칸 · 고른 칸 */
        --stone: #2a2622; /* 색 없는 회색 바탕 */
        --line: #6b4a12; /* 칸 테두리 */
        --line-soft: #5a4636; /* 흐린 칸막이 */
        --line-gold: #5c4c1e; /* 금색 계열 흐린 테두리 */
        --ink-hi: #ffffff; /* 가장 밝은 글자 */
        --ink: #f0e6d2; /* 본문 */
        --ink-2: #d8c8b0; /* 살짝 죽인 글자 */
        --ink-3: #a8967a; /* 보조 설명 */
        --ink-4: #a1917a; /* 힌트 · 가장 흐린 글자 */
        --gold: #ffd100; /* 제목 · 강조 · 내 것 */
        --gold-line: #d4af37; /* 판 테두리 */
        --gold-dim: #8a6a10; /* 눌린 금색 바탕 */
        --ok: #1eff00; /* 확정 · 출근 · 됨 */
        --ok-line: #074700; /* 됨 표시 테두리 */
        --warn: #ffb020; /* 주의 · 대기 */
        --warn-soft: #ffb84d; /* 흐린 주의 글자 */
        --danger: #ff5e5e; /* 취소 · 결석 · 안 됨 */
        --danger-ink: #ff9d8a; /* 안 됨 안내 글자 */
        --danger-line: #7a2a1a; /* 안 됨 테두리 */
        --danger-bg: #5a2016; /* 안 됨 바탕 */
        --danger-hi: #ff3333; /* 가장 센 경고 */
        --info: #00f0ff; /* 알림 · 안내 강조 */
        --info-ink: #9fe6ff; /* 안내 글자 */
        --info-2: #7cc9f0; /* 두 번째 안내 글자 */
        --sky: #3dc6ff; /* 곧 열림 딱지 */
        --info-bg: #004b6e; /* 안내 바탕 */
        --info-bg-2: #001f30; /* 어두운 안내 바탕 */
        --purple: #cfa6ff; /* 작가 이름 · 보라 카드 */
        --purple-2: #bb7cf7; /* 보라 테두리 · 강조 */
        --purple-3: #b866ff; /* 진한 보라 */
        --purple-line: #4a3566; /* 보라 테두리 (죽인 것) */
        --purple-bg: #3a2b4a; /* 보라 바탕 */
        --pink: #ff4ca4; /* 특별 칭호 빛 */
        --mint: #4de6a8; /* 민트 칭호 */
        --orange: #ff8a1e; /* 주황 칭호 · 딱지 */
        --orange-2: #ff9d3d; /* 밝은 주황 */
        --ember: #ff5540; /* 붉은 주황 */
        --blue: #2f9bff; /* 파랑 칭호 */
        --ok-btn: #17c200; /* 확정 단추 · 성공 알림 윗색 */
        --info-btn: #00aacf; /* 양도 단추 윗색 */
        --danger-pill: #db2c2c; /* 달력 지금-시각 알약 */
      }
      @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"]) {
          --bg: #faf7f2;
          --surface: #f3ede2;
          --surface-2: #e9e0cf;
          --card: #f1eadd;
          --card-up: #e6dbc6;
          --stone: #eeeae4;
          --danger-bg: #fde8e4;
          --info-bg: #e2f2f8;
          --purple-bg: #f0e9f8;
          --ink-hi: #000000;
          --ink: #1a1206;
          --ink-2: #3d3220;
          --ink-3: #615645;
          --ink-4: #786a58;
          --danger-ink: #a32000;
          --danger-hi: #c40000;
          --info-ink: #005f7a;
          --line: #d6c9a8;
          --line-soft: #e0d8c8;
          --line-gold: #cbb87a;
          --gold-line: #8a6f1d;
          --ok-line: #9dd48f;
          --danger-line: #e0a595;
          --purple-line: #c4b0dc;
          --gold: #846b00;
          --gold-dim: #7f6a28;
          --ok: #0f7a00;
          --warn: #8f5c00;
          --warn-soft: #966200;
          --danger: #c62200;
          --info: #00707a;
          --info-2: #136e9c;
          --sky: #006f9e;
          --info-bg-2: #d3e8f2;
          --purple: #7a2ecc;
          --purple-2: #7c30c8;
          --purple-3: #8226d6;
          --pink: #c4005f;
          --mint: #0a7a55;
          --orange: #9a4c00;
          --orange-2: #8f5200;
          --ember: #b03418;
          --blue: #0060b8;
          --ok-btn: #0e7a00;
          --info-btn: #00707f;
          --danger-pill: #b81f1f;
          --bg-rgb: 250, 247, 242;
          --blue-rgb: 0, 96, 184;
          --danger-rgb: 198, 34, 0;
          --danger-ink-rgb: 163, 32, 0;
          --danger-line-rgb: 224, 165, 149;
          --gold-rgb: 132, 107, 0;
          --gold-line-rgb: 138, 111, 29;
          --info-rgb: 0, 112, 122;
          --ink-rgb: 26, 18, 6;
          --ink-3-rgb: 97, 86, 69;
          --ink-hi-rgb: 0, 0, 0;
          --mint-rgb: 10, 122, 85;
          --ok-rgb: 15, 122, 0;
          --orange-rgb: 154, 76, 0;
          --orange-2-rgb: 143, 82, 0;
          --pink-rgb: 196, 0, 95;
          --purple-rgb: 122, 46, 204;
          --purple-2-rgb: 124, 48, 200;
          --purple-3-rgb: 130, 38, 214;
          --sky-rgb: 0, 111, 158;
          --warn-soft-rgb: 150, 98, 0;
          --shadow-rgb: 122, 106, 80;
          --card-fill-rgb: 239, 232, 219;
          --mine-rgb: 223, 240, 214;
          --mega-rgb: 154, 64, 0;
          --unlock-rgb: 154, 82, 0;
          --noshow-bg: #ff9b37;
          --remove-bg: #ffcccc;
          --cancel-hi: #990000;
          --confirm-hi: #0a7a3c;
          /* [2.0955] 인쇄물이라 밝은 벌에서도 **같은 값**이다 - 종이는 안 바뀐다 */
          --paper-bg: #f2efe9;
          --paper-ink: #1b1b1b;
          --paper-ink-3: #6b665e;
          --carrot: #a85413;
          --leaf: #456e35;
        }
      }
      :root[data-theme="light"] {
          --bg: #faf7f2;
          --surface: #f3ede2;
          --surface-2: #e9e0cf;
          --card: #f1eadd;
          --card-up: #e6dbc6;
          --stone: #eeeae4;
          --danger-bg: #fde8e4;
          --info-bg: #e2f2f8;
          --purple-bg: #f0e9f8;
          --ink-hi: #000000;
          --ink: #1a1206;
          --ink-2: #3d3220;
          --ink-3: #615645;
          --ink-4: #786a58;
          --danger-ink: #a32000;
          --danger-hi: #c40000;
          --info-ink: #005f7a;
          --line: #d6c9a8;
          --line-soft: #e0d8c8;
          --line-gold: #cbb87a;
          --gold-line: #8a6f1d;
          --ok-line: #9dd48f;
          --danger-line: #e0a595;
          --purple-line: #c4b0dc;
          --gold: #846b00;
          --gold-dim: #7f6a28;
          --ok: #0f7a00;
          --warn: #8f5c00;
          --warn-soft: #966200;
          --danger: #c62200;
          --info: #00707a;
          --info-2: #136e9c;
          --sky: #006f9e;
          --info-bg-2: #d3e8f2;
          --purple: #7a2ecc;
          --purple-2: #7c30c8;
          --purple-3: #8226d6;
          --pink: #c4005f;
          --mint: #0a7a55;
          --orange: #9a4c00;
          --orange-2: #8f5200;
          --ember: #b03418;
          --blue: #0060b8;
          --ok-btn: #0e7a00;
          --info-btn: #00707f;
          --danger-pill: #b81f1f;
          --bg-rgb: 250, 247, 242;
          --blue-rgb: 0, 96, 184;
          --danger-rgb: 198, 34, 0;
          --danger-ink-rgb: 163, 32, 0;
          --danger-line-rgb: 224, 165, 149;
          --gold-rgb: 132, 107, 0;
          --gold-line-rgb: 138, 111, 29;
          --info-rgb: 0, 112, 122;
          --ink-rgb: 26, 18, 6;
          --ink-3-rgb: 97, 86, 69;
          --ink-hi-rgb: 0, 0, 0;
          --mint-rgb: 10, 122, 85;
          --ok-rgb: 15, 122, 0;
          --orange-rgb: 154, 76, 0;
          --orange-2-rgb: 143, 82, 0;
          --pink-rgb: 196, 0, 95;
          --purple-rgb: 122, 46, 204;
          --purple-2-rgb: 124, 48, 200;
          --purple-3-rgb: 130, 38, 214;
          --sky-rgb: 0, 111, 158;
          --warn-soft-rgb: 150, 98, 0;
          --shadow-rgb: 122, 106, 80;
          --card-fill-rgb: 239, 232, 219;
          --mine-rgb: 223, 240, 214;
          --mega-rgb: 154, 64, 0;
          --unlock-rgb: 154, 82, 0;
          --noshow-bg: #ff9b37;
          --remove-bg: #ffcccc;
          --cancel-hi: #990000;
          --confirm-hi: #0a7a3c;
          /* [2.0955] 인쇄물이라 밝은 벌에서도 **같은 값**이다 - 종이는 안 바뀐다 */
          --paper-bg: #f2efe9;
          --paper-ink: #1b1b1b;
          --paper-ink-3: #6b665e;
          --carrot: #a85413;
          --leaf: #456e35;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0; padding: 12px; font-size: 14px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        font-family: var(--uifont); background: var(--bg);
        background-image: radial-gradient(circle at 50% 50%, var(--surface) 0%, var(--bg) 100%); color: var(--ink);
      }
      h1, .app-subtitle,
      .megaphone-title, .chat-title, .activity-log-title, .ros-title {
        font-family: "AtSign", "Cinzel", "Malgun Gothic", sans-serif;
      }
      .profile-link, .player-name,
      .profile-header-name, .binvname {
        font-family: "AtSign", "Cinzel", "Malgun Gothic", sans-serif;
      }
      body.tv-mode {
        font-family: "AtSign", "Cinzel", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      }
      .main-wrapper { max-width: 100%; margin: 0 auto; width: 100%; }
      .panels-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
      .panels-row > div { flex: 1; min-width: 0; }
      .panels-row .megaphone-panel, .panels-row .chat-panel, .panels-row .activity-log-panel { height: 100%; box-sizing: border-box; margin-bottom: 0; }
      #tvRankingsContainer { display: none; }
      .app-header { margin-bottom: 8px; }
      .alert-badge { position:absolute; top:-6px; right:-6px; min-width:17px; height:17px;
        padding:0 4px; border-radius:8px; background:var(--danger); color:#2a0505;
        font-size: 12px; font-weight:800; line-height: 19px; text-align:center;
        font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--bg); }
      .alert-body { overflow-y:auto; max-height:62vh; margin-top:4px; }
      .al-day { font-size: 11px; letter-spacing:1.6px; font-weight:800; color:var(--ink-4);
        padding:12px 2px 4px; }
      .al-row { display:flex; gap:8px; padding:8px 4px; cursor:pointer;
        border-bottom:1px solid rgba(var(--ink-hi-rgb), .055); }
      .al-row:last-child { border-bottom:0; }
      .al-row .al-tm { flex:none; width:42px; font-size: 12px; color:var(--ink-4);
        font-variant-numeric:tabular-nums; padding-top:2px; }
      .al-row .al-ic { flex:none; width:17px; text-align:center; font-size:12px; padding-top:2px; }
      .al-row .al-bd { flex:1; min-width:0; }
      .al-row .al-t1 { font-size:13px; font-weight:700; color:var(--ink); }
      .al-row .al-t2 { font-size: 13px; color:var(--ink-3); margin-top:2px; line-height:1.45;
        word-break:break-word; }
      .al-row.al-new { background:rgba(var(--gold-rgb), .055); }
      /* [2.1065] 알림을 눌러 데려간 자리 - 1.8초만 테를 둘러 어디로 왔는지 보이게 */
      .dl-flash { animation: dlFlash 1.8s ease-out 1; border-radius:4px; }
      @keyframes dlFlash {
        0% { box-shadow:0 0 0 0 rgba(var(--gold-rgb), 0); }
        12% { box-shadow:0 0 0 3px rgba(var(--gold-rgb), .55); }
        100% { box-shadow:0 0 0 0 rgba(var(--gold-rgb), 0); }
      }
      @media (prefers-reduced-motion: reduce) { .dl-flash { animation:none; box-shadow:0 0 0 2px rgba(var(--gold-rgb), .5); } }
      .al-row.al-new .al-t1::after { content:"●"; color:var(--gold); font-size: 11px;
        margin-left:4px; vertical-align:2px; }
      .al-empty { padding:32px 12px; text-align:center; color:var(--ink-4); font-size:12px;
        line-height:1.9; }
      .al-empty a { color:var(--gold); cursor:pointer; }
      .al-more { text-align:center; padding:12px; font-size: 12px; letter-spacing:1.2px;
        font-weight:800; color:var(--gold); cursor:pointer; }
      h1 { color: var(--warn); text-shadow: 0 0 8px #ff8000; font-weight: 900; letter-spacing: 2px; margin: 0; font-size: 22px; }
      .app-subtitle { color: var(--gold-line); opacity: 0.75; font-size: 12px; letter-spacing: 2px; margin-top: 2px; }
      .player-card { position: relative; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--card) 0%, var(--bg) 100%); border: 1px solid var(--purple-2); border-left: 4px solid var(--purple-2); border-radius: 4px; padding: 4px 12px 4px 8px; box-shadow: 0 0 10px rgba(var(--purple-2-rgb), 0.4); cursor: pointer; animation: playerCardPulse 1.8s ease-in-out infinite; }
      .player-card:hover { box-shadow: 0 0 22px rgba(var(--purple-2-rgb), 0.9); }
      @keyframes playerCardPulse { 0%, 100% { box-shadow: 0 0 10px rgba(var(--purple-2-rgb), 0.4); transform: scale(1); } 50% { box-shadow: 0 0 24px rgba(var(--purple-2-rgb), 0.9), 0 0 38px rgba(var(--purple-2-rgb), 0.4); transform: scale(1.03); } }
      .player-card .player-label { font-size: 12px; opacity: 0.8; letter-spacing: 1.5px; }
      .player-card .player-go { font-size: 11px; letter-spacing: 1.2px; color: var(--purple-2); opacity: 0.85;
                   border-left: 1px solid rgba(var(--purple-2-rgb), 0.35); padding-left: 8px;
                   margin-left: 2px; white-space: nowrap; font-weight: bold; }
      .player-card:hover .player-go { opacity: 1; }
      .player-card .player-name { color: var(--purple-2); font-weight: bold; font-size: 16px; letter-spacing: 1px; text-shadow: 0 0 6px rgba(var(--purple-2-rgb), 0.6); }
      .player-card .player-medal { font-size: 16px; }
      /* 작가 이름 클릭 -> 프로필. TV 모드에선 마우스가 없으므로 클릭/밑줄 자체를 끈다. */
      .profile-link { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(var(--gold-line-rgb), 0.45); text-underline-offset: 2px; }
      .profile-link:hover { color: var(--gold); }
      body.tv-mode .profile-link { pointer-events: none; text-decoration: none; }
      .profile-header-name { font-size: 19px; font-weight: bold; color: var(--purple-2); letter-spacing: 1px; }
      .profile-ig-link { display: flex; align-items: center; gap: 4px; width: fit-content; margin-top: 4px; color: var(--ink-hi); opacity: 0.92; text-decoration: none; }
      .profile-ig-link:hover { opacity: 1; }
      .profile-ig-link svg { display: block; flex-shrink: 0; }
      .emoji-swatch-btn { font-size: 19px; line-height: 1; padding: 4px 8px; background: var(--card); border: 1px solid rgba(var(--gold-line-rgb), 0.3); border-radius: 4px; cursor: pointer; }
      .emoji-swatch-btn.selected { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.15); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.4); }
      .color-swatch-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(var(--gold-line-rgb), 0.3); cursor: pointer; padding: 0; color: var(--ink-hi); font-size: 12px; }
      .color-swatch-btn.selected { border-color: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.6); }
      .profile-intro { font-size: 12px; opacity: 0.85; margin-top: 4px; line-height: 1.5; }
      .profile-section-title { color: var(--gold); font-size: 12px; font-weight: bold; letter-spacing: 1.5px; margin: 12px 0 4px; border-bottom: 1px solid var(--card-up); padding-bottom: 4px; }
      .profile-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 2px; font-size: 13px; }
      .profile-row .profile-row-label { opacity: 0.75; }
      .profile-row .profile-row-value { font-weight: bold; text-align: right; }
      .profile-private-box { border: 1px dashed var(--purple-2); border-radius: 4px; background: rgba(var(--purple-2-rgb), 0.07); padding: 8px 8px; margin-top: 12px; }
      .profile-private-note { font-size: 12px; color: var(--purple-2); opacity: 0.9; margin-bottom: 4px; letter-spacing: 1px; }
      .profile-visitor-line { display: block; text-align: center; font-size: 12px; letter-spacing: 2px; opacity: 0.85; margin-bottom: 8px; }
      .profile-visitor-line b { color: var(--gold); }
      .profile-visitor-line b.pv-today { color: var(--info); }
      .site-visitor-line { display: block; text-align: center; font-size: 12px; letter-spacing: 2px; opacity: 0.85; margin-top: 2px; }
      .site-visitor-line b { color: var(--gold); }
      .site-visitor-line b.pv-today { color: var(--info); }
      /* 본인 프로필 하단 패스워드 변경/로그아웃 - 매일 쓰는 버튼이 아니라 조용한 텍스트 링크 (2.0333) */
      .thm-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; }
      .thm-lab { color: var(--ink-3); letter-spacing: 1px; }
      .thm-seg { display: flex; gap: 4px; margin-left: auto; }
      .thm-b { background: transparent; color: var(--ink-3); border: 1px solid var(--line-soft);
               border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 12px; }
      .thm-b.on { color: var(--gold); border-color: var(--gold-line); }
      .push-row { margin-top: 12px; padding: 12px 12px; border: 1px solid var(--card-up);
        border-radius: 8px; background: var(--surface); display: flex; flex-direction: column;
        gap: 4px; align-items: flex-start; font-size: 13px; color: var(--ink-3); }
      .push-row .pr-t { font-size: 13px; color: var(--ink); }
      .push-row .pr-on { color: var(--mint); font-weight: bold; }
      .push-row .pr-off { color: var(--orange-2); font-weight: bold; }
      .push-row .pr-h { font-size: 12px; color: var(--ink-4); line-height: 1.6; }
      .push-row .pr-btn { min-height: 34px; padding: 0 12px; background: var(--gold);
        color: var(--card); border: 0; border-radius: 4px; font-family: inherit;
        font-size: 13px; font-weight: bold; cursor: pointer; align-self: stretch; }
      .push-row .pr-btn-off { background: var(--card); color: var(--gold-line); border: 1px solid #5c4520; }
      .push-row .pr-btn:disabled { opacity: 0.6; }
      .profile-text-link { cursor: pointer; opacity: 0.75; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
      .profile-text-link:hover { opacity: 1; color: var(--gold); }
      /* 레어도 색 등급 (RECORDS/MY CAREER 숫자) - 등급이 높아질수록 글로우/펄스가 세짐 (2.0330) */
      .title-prefix { color: #9c9284; font-weight: 600; font-size: 0.86em; letter-spacing: 0.2px; margin-right: 4px; }
      .titles-tap-hint { font-size: 12px; color: #8f8071; margin: 2px 0 8px; }
      .titles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; margin: 4px 0 8px; }
      .title-badge { background: var(--card); border: 1px solid var(--card-up); border-radius: 8px; padding: 8px 12px; }
      .title-badge.locked { background: var(--surface); border-color: var(--card); }
      .title-badge-name { font-size: 13px; font-weight: 800; color: var(--ink); word-break: break-word; }
      .title-badge.locked .title-badge-name { color: #5c5346; letter-spacing: 2px; }
      .title-badge-desc { font-size: 12px; color: #8f8071; margin-top: 4px; line-height: 1.4; }
      .title-badge.locked .title-badge-desc { color: #6b6152; }
      .title-prog { margin-top: 4px; }
      .title-prog-bar { flex: 1; height: 5px; background: var(--card); border-radius: 4px; overflow: hidden; }
      .title-prog-fill { height: 100%; background: var(--info); border-radius: 4px; }
      .title-badge.equipable { cursor: pointer; transition: border-color 0.15s ease, transform 0.12s ease; }
      .title-badge.equipable:active { transform: scale(0.97); transition-duration: 0.04s; }
      .title-badge.equipable:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
      .title-badge.equipped { border-color: var(--gold); background: var(--card); }
      .title-eq-mark { font-size: 11px; font-weight: 700; color: var(--bg); background: var(--gold);
                       border-radius: 4px; padding: 2px 4px; vertical-align: middle; white-space: nowrap; }
      @media (prefers-reduced-motion: reduce) { .title-badge.equipable:active { transform: none; } }
      .ladder { background: var(--card); border: 1px solid var(--card-up); border-radius: 8px; padding: 20px 16px 16px; position: relative; margin: 4px 0 8px; }
      .ladder-track { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 0 40px 4px; scrollbar-width: none; }
      .ladder-track::-webkit-scrollbar { display: none; }
      .ladder-scroll-arrow { position: absolute; top: 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: var(--z-lift-2); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.25); user-select: none; }
      .ladder-scroll-arrow.ladder-left { left: 6px; }
      .ladder-scroll-arrow.ladder-right { right: 6px; }
      .ladder-scroll-arrow.is-hidden { display: none; }
      .ladder-node { display: flex; flex-direction: column; align-items: center; min-width: 80px; flex-shrink: 0; }
      .ladder-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 2px solid var(--card); background: var(--surface); color: #5c5346; position: relative; z-index: var(--z-lift); }
      .ladder-node.done .ladder-dot { border-color: var(--ink); background: radial-gradient(circle at 35% 30%, var(--ink-hi), var(--ink) 60%); color: var(--surface-2); box-shadow: 0 0 10px rgba(var(--ink-rgb), 0.4); }
      .ladder-node.current .ladder-dot { border-color: var(--gold); background: var(--card); color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.18); }
      .ladder-line { height: 2px; flex: 1; min-width: 16px; background: var(--card); margin-top: -18px; }
      .ladder-line.done { background: var(--gold); }
      .ladder-label { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink-4); text-align: center; white-space: nowrap; }
      .ladder-node.done .ladder-label, .ladder-node.current .ladder-label { color: var(--ink); }
      .ladder-flavor { margin-top: 16px; font-size: 13px; color: #8f8071; text-align: center; font-style: italic; letter-spacing: 0.2px; }
      .ladder-node.t-green.done .ladder-dot { border-color: var(--ok); background: radial-gradient(circle at 35% 30%, #eaffe0, var(--ok) 60%); color: #04310a; box-shadow: 0 0 14px rgba(var(--ok-rgb), 0.55); }
      .ladder-node.t-green.done .ladder-label { color: var(--ok); text-shadow: 0 0 8px rgba(var(--ok-rgb), 0.5); }
      .ladder-node.t-blue.done .ladder-dot { border-color: var(--blue); background: radial-gradient(circle at 35% 30%, #dff0ff, var(--blue) 60%); color: #01203f; box-shadow: 0 0 14px rgba(var(--blue-rgb), 0.55); }
      .ladder-node.t-blue.done .ladder-label { color: var(--blue); text-shadow: 0 0 8px rgba(var(--blue-rgb), 0.5); }
      .ladder-node.t-purple.done .ladder-dot { border-color: var(--purple-3); background: radial-gradient(circle at 35% 30%, #f2e2ff, var(--purple-3) 60%); color: #2a0a42; box-shadow: 0 0 14px rgba(var(--purple-3-rgb), 0.55); }
      .ladder-node.t-purple.done .ladder-label { color: var(--purple-3); text-shadow: 0 0 8px rgba(var(--purple-3-rgb), 0.5); }
      .ladder-node.t-orange.done .ladder-dot { border-color: var(--orange); background: radial-gradient(circle at 35% 30%, #ffe9d1, var(--orange) 60%); color: #3a1a00; box-shadow: 0 0 14px rgba(var(--orange-rgb), 0.55); }
      .ladder-node.t-orange.done .ladder-label { color: var(--orange); text-shadow: 0 0 8px rgba(var(--orange-rgb), 0.5); }
      .ladder-node.t-gold.done .ladder-dot { border-color: var(--gold); background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 60%); color: var(--surface-2); box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.55); }
      .ladder-node.t-gold.done .ladder-label { color: var(--gold); text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5); }
      .titles-equip-row { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, rgba(var(--purple-2-rgb), 0.14), rgba(var(--gold-rgb), 0.06)); border: 1px solid rgba(var(--gold-rgb), 0.35); border-radius: 8px; padding: 8px 12px; margin: 4px 0 8px; }
      .ms-tab-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px; margin-top: 8px; }
      .ms-tab-btn { flex: 1; white-space: nowrap; background: var(--card); border: 1px solid var(--card-up); color: var(--ink-4); padding: 4px 4px; font-size: 12px; font-weight: bold; border-radius: 4px; cursor: pointer; }
      .ms-tab-btn.active { background: rgba(var(--purple-2-rgb), 0.16); border-color: var(--purple-2); color: var(--purple); }
      .rep-tab-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #ff4d6d; margin-left: 4px; vertical-align: 2px; }
      .rep-head { font-size: 12px; color: var(--ink-4); letter-spacing: 1px; font-weight: bold; padding: 4px 2px 8px; display: flex; justify-content: space-between; }
      .rep { border: 1px solid var(--card-up); background: var(--card); border-radius: 8px; margin-bottom: 4px; overflow: hidden; }
      .rep.unread { border-color: var(--gold); }
      .rep-t { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; font-family: inherit; }
      .rep-date { font-size: 12px; color: var(--gold); font-weight: bold; white-space: nowrap; }
      .rep-sub { font-size: 12px; color: var(--ink); line-height: 1.35; flex: 1; }
      .rep-chev { font-size: 11px; color: var(--ink-4); transition: transform 0.18s; }
      .rep.open .rep-chev { transform: rotate(90deg); }
      .rep-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #ff4d6d; margin-left: 4px; vertical-align: 1px; }
      .rep-body { display: none; padding: 0 12px 12px; border-top: 1px solid var(--card); }
      .rep.open .rep-body { display: block; }
      .rep-range { font-size: 12px; color: var(--ink-4); padding: 8px 0 2px; border-bottom: 1px dotted var(--card); margin-bottom: 2px; }
      .rep-range b { color: var(--ink); font-weight: 600; }
      .rep-intro { background: rgba(var(--gold-rgb), 0.06); border: 1px solid #4a3312; border-radius: 8px; padding: 8px 8px; margin-top: 8px; }
      .rep-intro .h { font-size: 11px; font-weight: bold; letter-spacing: 1.3px; color: var(--gold); margin-bottom: 4px; }
      .rep-intro p { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 0; }
      .rep-sec { margin-top: 12px; }
      .rep-sec .h { font-size: 11px; font-weight: bold; letter-spacing: 1.3px; color: var(--info); margin-bottom: 4px; }
      .rep-sec:nth-child(3) .h { color: var(--gold); }
      .rep-sec:nth-child(4) .h { color: var(--purple-3); }
      .rep-sec p { font-size: 12px; line-height: 1.65; color: var(--ink-2); margin: 0; }
      .rep-foot { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--card); font-size: 11px; color: var(--ink-4); }
      .picker-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--card-up); background: var(--card); cursor: pointer; margin-bottom: 4px; }
      .picker-item.selected { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
      .tier-green  { color: var(--ok); text-shadow: 0 0 8px rgba(var(--ok-rgb), 0.7); }
      .tier-blue   { color: var(--blue); text-shadow: 0 0 6px rgba(var(--blue-rgb), 0.9), 0 0 16px rgba(var(--blue-rgb), 0.55); }
      /* [2.0666] 사장님이 직접 정한 색. 색·발광은 인라인으로 들어오고 여기선 모양만 잡는다. */
      .tier-custom { position: relative; padding: 2px 4px; margin: -2px -5px; border-radius: 4px; display: inline-block; }
      .tier-purple { position: relative; color: var(--purple-3); text-shadow: 0 0 8px rgba(var(--purple-3-rgb), 1), 0 0 22px rgba(var(--purple-3-rgb), 0.6); background: radial-gradient(ellipse at center, rgba(var(--purple-3-rgb), 0.16) 0%, transparent 72%); padding: 2px 4px; margin: -2px -5px; border-radius: 4px; display: inline-block; animation: tierBreathePurple 3s ease-in-out infinite; }
      .tier-orange { position: relative; color: var(--orange); text-shadow: 0 0 8px rgba(var(--orange-rgb), 1), 0 0 26px rgba(var(--orange-rgb), 0.7); background: radial-gradient(ellipse at center, rgba(var(--orange-rgb), 0.2) 0%, transparent 72%); padding: 2px 4px; margin: -2px -5px; border-radius: 4px; display: inline-block; animation: tierPulseOrange 1.8s ease-in-out infinite; }
      .tier-gold   { position: relative; color: var(--gold); text-shadow: 0 0 8px rgba(var(--gold-rgb), 1), 0 0 32px rgba(var(--gold-rgb), 0.85); background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.26) 0%, transparent 72%); padding: 2px 4px; margin: -2px -5px; border-radius: 4px; display: inline-block; animation: tierPulseGold 1.5s ease-in-out infinite; }
      .tier-mote { position: absolute; width: 3px; height: 3px; background: #fff6cf; border-radius: 50%; box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.9); animation: tierFloatUp 2.6s ease-in infinite; }
      .tier-mote:nth-child(1) { left: 6%; bottom: 0; animation-delay: 0s; }
      .tier-mote:nth-child(2) { left: 45%; bottom: 0; animation-delay: 0.9s; }
      .tier-mote:nth-child(3) { left: 82%; bottom: 0; animation-delay: 1.7s; }
      @keyframes tierBreathePurple { 0%,100% { text-shadow: 0 0 6px rgba(var(--purple-3-rgb), 0.8), 0 0 14px rgba(var(--purple-3-rgb), 0.4); } 50% { text-shadow: 0 0 10px rgba(var(--purple-3-rgb), 1), 0 0 28px rgba(var(--purple-3-rgb), 0.8); } }
      @keyframes tierPulseOrange { 0%,100% { text-shadow: 0 0 6px rgba(var(--orange-rgb), 0.75), 0 0 16px rgba(var(--orange-rgb), 0.4); transform: scale(1); } 50% { text-shadow: 0 0 10px rgba(var(--orange-rgb), 1), 0 0 34px rgba(var(--orange-rgb), 0.9); transform: scale(1.05); } }
      @keyframes tierPulseGold { 0%,100% { text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.8), 0 0 18px rgba(var(--gold-rgb), 0.5), 0 0 2px rgba(var(--ink-hi-rgb), 0.4); transform: scale(1); } 50% { text-shadow: 0 0 12px rgba(var(--gold-rgb), 1), 0 0 42px rgba(var(--gold-rgb), 1), 0 0 8px rgba(var(--ink-hi-rgb), 0.75); transform: scale(1.08); } }
      @keyframes tierFloatUp { 0% { opacity: 0; transform: translateY(4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
      @media (prefers-reduced-motion: reduce) { .tier-purple, .tier-orange, .tier-gold, .tier-mote, .tw-btn-primary, .player-card { animation: none !important; } }
      .tw-btn-primary { background: linear-gradient(180deg, #ffe14d 0%, var(--gold) 100%); color: var(--surface); border-color: var(--ink-hi); box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.5); position: relative; animation: artistsBtnPulse 1.7s ease-in-out infinite; }
      .tw-btn-primary:hover:not(:disabled) { background: var(--gold); color: var(--bg); box-shadow: 0 0 20px var(--gold); }
      .tw-btn-primary .tier-mote { display: block; }
      @keyframes artistsBtnPulse { 0%, 100% { box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.5); transform: scale(1); } 50% { box-shadow: 0 0 30px rgba(var(--gold-rgb), 0.95), 0 0 48px rgba(var(--gold-rgb), 0.45); transform: scale(1.035); } }
      .artist-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; border-bottom: 1px solid var(--card); font-size: 13px; cursor: pointer; }
      .artist-row:last-child { border-bottom: none; }
      .artist-row.offline .artist-row-name { opacity: 0.55; }
      .artist-color-bar { width: 2px; height: 13px; border-radius: 2px; background: transparent; flex-shrink: 0; }
      .online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); flex-shrink: 0; }
      .online-dot.off { background: #4a4030; box-shadow: none; opacity: 0.5; }
      .artist-row-main { display: flex; align-items: baseline; gap: 4px; min-width: 0; flex: 1; }
      .artist-row-name { flex-shrink: 0; }
      .artist-row-intro { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; opacity: 0.7; font-size: 12px; -webkit-mask-image: linear-gradient(to right, var(--bg) 70%, transparent 96%); mask-image: linear-gradient(to right, var(--bg) 70%, transparent 96%); }
      .tw-btn {
        background: linear-gradient(180deg, var(--card-up) 0%, var(--surface) 100%); color: var(--ink); border: 1px solid var(--gold-line);
        font-family: inherit; font-weight: bold; border-radius: 2px; text-shadow: 1px 1px 3px var(--bg); box-shadow: inset 0 0 5px rgba(var(--gold-line-rgb), 0.3);
        padding: 8px 12px; cursor: pointer; font-size: 13px; touch-action: manipulation; transition: all 0.15s ease;
      }
      .tw-btn:hover:not(:disabled) { background: var(--gold); color: var(--bg); box-shadow: 0 0 14px var(--gold); border-color: var(--ink-hi); }
      /* 모바일은 :hover 가 안 먹혀서 누른 순간 아무 반응이 없어 보였음(사용성 점검 중 발견) -
         눌리는 즉시 살짝 눌린 느낌을 줘서, 응답 오기 전 불안해서 두 번 탭하는 것을 방지한다.
         2.0385(A3): 기존 brightness(0.9) "어두워짐"은 새까만 버튼에서 보이지 않았음 -
         "밝아짐"으로 교체(사장님이 목업 3안 중 1 선택). 행 형태 탭 요소에도 동일 적용. */
      /* 2.0392: 눌림이 즉시 보이게 - 누를 때는 0.04s(즉각), 뗄 때는 기본 0.15s 로 부드럽게 복귀.
         2.0394: 사장님이 강도 목업에서 "콤보 A" 선택 - 축소 0.90 + 아래로 1.5px + 안쪽 그림자
         + 밝아짐 1.3. animation:none 은 반짝이 버튼(ARTISTS/본인 카드)의 상시 애니메이션이
         transform 을 점유해 눌림을 무력화하던 버그 수정. 클릭 가능한데 빠져 있던 요소들
         (본인 카드/더보기 3종/텍스트 링크류)도 전부 포함. */
      .tw-btn:active:not(:disabled), .player-card:active {
        transform: scale(0.90) translateY(1.5px); filter: brightness(1.3);
        box-shadow: inset 0 3px 9px rgba(var(--shadow-rgb), 0.65);
        transition-duration: 0.04s; animation: none;
      }
      .player-card { transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; }
      .past-day-bar:active, .artist-row:active, .picker-item:active { transform: scale(0.97) translateY(1px); filter: brightness(1.3); transition-duration: 0.04s; }
      .past-day-bar, .artist-row, .picker-item { transition: transform 0.15s ease, filter 0.15s ease; }
      .chat-more-btn, .megaphone-more-btn, .activity-log-more-btn { transition: transform 0.15s ease, filter 0.15s ease; }
      .chat-more-btn:active, .megaphone-more-btn:active, .activity-log-more-btn:active { transform: scale(0.92); filter: brightness(1.5); transition-duration: 0.04s; }
      .profile-link:active, .profile-text-link:active, .pdb-fold-back:active, .tv-logout-link:active { filter: brightness(1.6); }
      @media (prefers-reduced-motion: reduce) { .tw-btn:active:not(:disabled), .player-card:active, .past-day-bar:active, .artist-row:active, .picker-item:active, .chat-more-btn:active, .megaphone-more-btn:active, .activity-log-more-btn:active { transform: none; } }
      .tw-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
      .tw-btn-confirm { background: linear-gradient(180deg, var(--ok-btn) 0%, var(--ok-line) 100%); color: var(--ink-hi); border: 1px solid #55ff40; }
      .tw-btn-danger { background: linear-gradient(180deg, #ff0000 0%, #470000 100%); color: var(--ink-hi); border: 1px solid var(--danger); }
      .tw-btn-transfer { background: linear-gradient(180deg, var(--info-btn) 0%, var(--info-bg) 100%); color: var(--ink-hi); border: 1px solid var(--info); }
      .day-col { background: rgba(var(--bg-rgb), 0.96); border: 1px solid var(--gold-line); box-shadow: inset 0 0 10px rgba(var(--shadow-rgb), 0.8); display: flex; flex-direction: column; position: relative; transition: all 0.2s ease; }
      .day-col.is-today {
        border: 2px solid var(--info) !important;
        box-shadow: 0 0 15px rgba(var(--info-rgb), 0.4), inset 0 0 15px rgba(var(--info-rgb), 0.15) !important;
      }
      .day-col.is-today .day-header {
        background: linear-gradient(180deg, var(--info-bg) 0%, var(--info-bg-2) 100%) !important;
        color: var(--info) !important;
        border-bottom: 1px solid var(--info) !important;
      }
      /* [2.0667] 방금 열린 날. TODAY(시안)와 같은 구조에 색만 노랑이고, 숨을 쉰다.
         한 시간 뒤에는 화면이 다시 그려질 때 이 클래스가 빠진다. */
      .day-col.just-opened {
        border: 2px solid var(--gold) !important;
        animation: joPulse 1.6s ease-in-out infinite;
      }
      .day-col.just-opened .day-header {
        background: linear-gradient(180deg, #6e5200 0%, #302300 100%) !important;
        color: #ffe14d !important;
        border-bottom: 1px solid var(--gold) !important;
      }
      @keyframes joPulse {
        0%, 100% { box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.35), inset 0 0 12px rgba(var(--gold-rgb), 0.12); }
        50%       { box-shadow: 0 0 26px rgba(var(--gold-rgb), 0.85), inset 0 0 18px rgba(var(--gold-rgb), 0.28); }
      }
      @keyframes joBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
      .just-opened-badge {
        background: var(--gold);
        color: var(--surface-2);
        font-size: 12px;
        font-weight: 900;
        padding: 2px 4px;
        border-radius: 2px;
        display: inline-block;
        margin-left: 4px;
        letter-spacing: 0.3px;
        animation: joBlink 1.2s steps(1) infinite;
      }
      .day-col.opening-soon {
        border: 2px solid var(--sky) !important;
        animation: osPulse 2.6s ease-in-out infinite;
      }
      .day-col.opening-soon .day-header {
        background: linear-gradient(180deg, #073a4d 0%, #041d26 100%) !important;
        color: var(--info-ink) !important;
        border-bottom: 1px solid var(--sky) !important;
      }
      @keyframes osPulse {
        0%, 100% { box-shadow: 0 0 8px rgba(var(--sky-rgb), 0.22), inset 0 0 8px rgba(var(--sky-rgb), 0.08); }
        50%       { box-shadow: 0 0 20px rgba(var(--sky-rgb), 0.6), inset 0 0 14px rgba(var(--sky-rgb), 0.2); }
      }
      .opening-soon-badge {
        background: var(--sky);
        color: var(--info-bg-2);
        font-size: 12px;
        font-weight: 900;
        padding: 2px 4px;
        border-radius: 2px;
        display: inline-block;
        margin-left: 4px;
        letter-spacing: 0.3px;
      }
      @media (prefers-reduced-motion: reduce) { .day-col.just-opened, .just-opened-badge, .day-col.opening-soon { animation: none; } }
      .today-badge {
        background: var(--info);
        color: var(--bg);
        font-size: 12px;
        font-weight: 900;
        padding: 2px 4px;
        border-radius: 2px;
        display: inline-block;
        margin-left: 4px;
        letter-spacing: 1px;
      }
      .day-header { position: relative; background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); color: var(--gold); border-bottom: 1px solid var(--gold-line); padding: 8px 4px; text-align: center; font-weight: 800; font-size: 16px; letter-spacing: 1.5px; }
      .day-date { font-size: 13px; font-weight: bold; margin-top: 4px; padding: 2px 0; text-align: center; }
      .slot-card { position: relative; background: rgba(var(--card-fill-rgb), 0.85); border: 1px solid var(--card-up); padding: 4px 8px; font-size: 12px; margin-top: 4px; display: flex; justify-content: space-between; align-items: center; min-height: 34px; word-break: break-word; }
      .slot-card.my-slot { border-color: var(--ok); background: rgba(var(--mine-rgb), 0.75); color: var(--ok); }
      .slot-card.available { opacity: 0.62; }
      .slot-card.pending-cancel-slot { border: 1px solid var(--danger-hi) !important; background: rgba(255, 0, 0, 0.2) !important; color: #ff9999 !important; font-weight: bold; }
      .slot-card.pending-transfer-slot { border: 1px solid var(--info) !important; background: rgba(0, 200, 255, 0.2) !important; color: #80f0ff !important; font-weight: bold; }
      .slot-card.slot-won { animation: slotWinGlow 1.6s ease-in-out 2; }
      @keyframes slotWinGlow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 14px rgba(var(--ok-rgb), 0.75), 0 0 26px rgba(var(--ok-rgb), 0.3); } }
      .slot-card.slot-won-hot { animation: slotWinPop 1.8s ease-out 1; }
      @keyframes slotWinPop { 0% { transform: scale(1); box-shadow: none; } 12% { transform: scale(1.05); box-shadow: 0 0 18px rgba(var(--ok-rgb), 0.9), 0 0 34px rgba(var(--ok-rgb), 0.4); } 35% { transform: scale(1); box-shadow: 0 0 12px rgba(var(--ok-rgb), 0.5); } 100% { transform: scale(1); box-shadow: none; } }
      .win-badge { position: absolute; top: -9px; right: 6px; z-index: var(--z-lift-2); font-size: 11px; font-weight: bold; letter-spacing: 1px; padding: 2px 8px; border-radius: 4px; background: var(--ok); color: #041e00; pointer-events: none; animation: slotWinBadge 1.8s ease-out 1 forwards; }
      @keyframes slotWinBadge { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }
      @media (prefers-reduced-motion: reduce) {
        .slot-card.slot-won, .slot-card.slot-won-hot { animation: none; box-shadow: 0 0 12px rgba(var(--ok-rgb), 0.5); }
        .win-badge { animation: none; opacity: 1; }
      }
      .slot-color-bar { display: inline-block; width: 2px; height: 12px; border-radius: 2px; background: transparent; vertical-align: middle; margin-right: 4px; }
      .slot-emoji { margin-left: 4px; font-size: 12px; }
      .header-title { width: 100%; }
      .app-title-row { text-align: center; margin-bottom: 12px; }
      .app-title-row h1 { display: inline-block; margin: 0; }
      .app-nav-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(var(--gold-line-rgb), 0.25); }
      .app-status-row { display: flex; justify-content: center; }
      .app-status-row-inner { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
      .capacity-mini { display: flex; align-items: center; gap: 8px; }
      .capacity-mini-text { font-size: 12px; font-weight: bold; white-space: nowrap; }
      .capacity-mini-text .stat-value { color: var(--gold); }
      .capacity-mini-bar { width: 100px; height: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--gold-line); border-radius: 2px; }
      .capacity-mini-fill { height: 100%; transition: width 0.3s ease; background: linear-gradient(90deg, #ff8000, var(--gold)); }
      .grid-container { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; width: 100%; }
      .shift-block { padding: 8px 4px; border-bottom: 1px dashed rgba(var(--ink-hi-rgb), 0.1); font-size: 13px; font-weight: bold; flex: 1; transition: background 0.2s ease; position: relative; overflow: hidden; }
      /* 2.0382: flex:1(기준 0 + 반반 분배)과 overflow:hidden(최소 높이 보호 해제)이 만나
         오전/오후 인원이 다른 날 인원 많은 쪽 마지막 줄이 잘리던 버그(사장님 스크린샷 -
         손 풀린 NYANG 반 잘림). TV 외에는 기준 높이를 내용물 크기로 - 내용은 절대 안 잘리고,
         데스크톱에서 다른 날보다 짧을 때 남는 공간만 반반 분배(기존 미관 유지). TV 는 화면을
         꽉 채우기 위한 압축이 의도라 기존 그대로 둔다. */
      body:not(.tv-mode) .shift-block { flex: 1 1 auto; }
      .shift-block.today-shift {
        background: rgba(0, 80, 120, 0.25) !important;
        border: 1px solid rgba(var(--info-rgb), 0.4) !important;
        border-radius: 4px;
        margin: 4px 2px;
      }
      .shift-header-box { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; border-left: 3px solid var(--gold); padding-left: 4px; }
      .shift-block.today-shift .shift-header-box { border-left-color: var(--info) !important; }
      .shift-title-text { font-size: 16px; font-weight: 900; color: var(--gold); letter-spacing: 0.5px; }
      .shift-time-text { font-size: 12px; color: #00ffcc; font-weight: 800; letter-spacing: 0.5px; }
      .cancel-btn { background: var(--remove-bg); color: var(--ink-hi); border: 1px solid var(--danger-hi); border-radius: 2px; padding: 2px 4px; cursor: pointer; font-size: 12px; font-weight: bold; flex-shrink: 0; margin-left: 2px; }
      .transfer-btn { background: #003e54; color: var(--ink-hi); border: 1px solid var(--sky); border-radius: 2px; padding: 2px 4px; cursor: pointer; font-size: 12px; font-weight: bold; flex-shrink: 0; margin-left: 2px; }
      .admin-btn { background: #4a3b00; color: var(--gold); border: 1px solid var(--gold); border-radius: 2px; padding: 2px 4px; cursor: pointer; font-size: 12px; font-weight: bold; flex-shrink: 0; margin-left: 2px; touch-action: manipulation; }
      .admin-btn:active { filter: brightness(1.35); } /* 2.0385(A3): 어두워짐 -> 밝아짐 통일 */
      /* 사장님이 폰으로 매일 쓰는 관리 버튼인데 실제 터치 영역이 15~18px 밖에 안 됐음(사용성
         점검 중 발견) - 글자 크기는 그대로 두고 여백만 넉넉하게 키워 오탭을 줄인다. */
      .slot-menu-toggle { cursor: pointer; font-size: 11px; color: var(--gold); padding: 8px 8px; margin-left: 2px; user-select: none; flex-shrink: 0; touch-action: manipulation; position: relative; }
      .slot-menu-toggle::after { content: ""; position: absolute; left: -6px; right: -4px; top: -5px; bottom: -5px; }
      .slot-menu-toggle:active { filter: brightness(1.4); } /* 2.0385(A3): 어두워짐 -> 밝아짐 통일 */
      .slot-menu-dropdown { position: absolute; top: 100%; right: 0; z-index: var(--z-menu); background: var(--surface); border: 1px solid var(--gold); border-radius: 4px; padding: 4px; display: none; flex-direction: column; gap: 4px; margin-top: 2px; box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.6); white-space: nowrap; }
      /* [2.0739] 작가 슬롯의 Transfer/CANCEL 도 같은 상자에 들어간다 - 모양을 맞춘다. */
      .slot-menu-dropdown .admin-btn,
      .slot-menu-dropdown .transfer-btn,
      .slot-menu-dropdown .cancel-btn { margin-left: 0; width: 100%; text-align: center; }
      .shift-block.menu-open { overflow: visible; z-index: var(--z-menu-host); }
      .split { display: flex; gap: 4px; margin: 4px; align-items: stretch; }
      .split .l { flex: 11; min-width: 0; }
      .split .r { flex: 9; min-width: 0; position: relative; }
      .r-abs { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
      .r-title { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--info-ink); letter-spacing: 1px; font-weight: bold; margin: 0 0 4px 2px; font-family: var(--uifont); }
      .r-title .bk-plus { margin-left: auto; background: var(--gold); color: var(--surface-2); font-weight: 900; font-size: 12px; width: 20px; height: 20px; border-radius: 4px; text-align: center; line-height: 20px; }
      .r-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
      .r-scroll::-webkit-scrollbar { width: 3px; }
      .r-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
      .bk-empty { font-size: 12px; color: var(--ink-4); font-family: var(--uifont); padding: 4px 2px; }
      .bk-bar { width: 4px; align-self: stretch; flex-shrink: 0; }
      .bk-cl { color: #b3a58f; }
      .bk2 { display: flex; gap: 4px; border: 1px solid var(--card); background: rgba(var(--card-fill-rgb), 0.85); padding: 4px 4px 4px 0; margin-bottom: 4px; font-size: 12px; overflow: hidden; }
      .bk2-body { min-width: 0; line-height: 1.4; flex: 1; }
      .bk2-body b { color: var(--ink-hi); }
      .bk2-body .title-prefix { font-size: 0.82em; }
      .bk2-body .slot-emoji { font-size: 12px; }
      .bk2-t { display: block; white-space: nowrap; overflow: hidden; color: var(--warn-soft); font-weight: bold; font-size: 12px; font-variant-numeric: tabular-nums; }
      .bk2-nm { display: block; overflow: hidden; white-space: nowrap; }
      .bk-tg { font-size: 11px; font-weight: 900; letter-spacing: 0.4px; margin-right: 4px; }
      .bk-tg.cat-s { color: var(--info-2); }
      .bk-tg.cat-p { color: var(--ok); }
      .bk-tg.cat-w { color: var(--ink-3); }
      .bk-tg.tg-opt { color: var(--purple); }
      .bk2-mine { border-color: var(--ok); background: rgba(var(--mine-rgb), 0.75); }
      .bk2-mine .bk2-nm, .bk2-mine .bk2-nm b, .bk2-mine .bk-cl { color: var(--ok); }
      .bk2-mine .bk2-t { color: var(--ok); }
      .bk2-past { opacity: 0.45; }
      /* [2.0723] 예약 넣기·보기·고치기 - 확정 최종본 mockups/build_final.js 에서 그대로 옮겼다.
         20~27차를 한 파일로 모은 것이 이것이다. 차수별 목업을 따로 보면 값이 어긋난다 -
         실제로 24·27차에서 옮겼다가 안쪽 여백·글꼴이 세 군데 달라졌고 검사기가 잡았다.
         verify/audit_mockup_css.js 가 속성 하나하나까지 대조한다. */
      .bk-head { padding: 12px 16px 12px; border-bottom: 1px solid var(--card-up); position: relative; }
      .bk-head .bk-x { position:absolute; right:10px; top:10px; color:var(--ink-4); font-size:16px; padding:4px 8px; cursor:pointer; line-height:1; z-index: var(--z-lift-2); }
      .bk-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ac, var(--sky)); }
      .bk-h-time { font-size: 22px; font-weight: 800; color: #ffe9a8; font-variant-numeric: tabular-nums; }
      .bk-h-date { font-size: 13px; color: var(--ink-4); margin-top: 2px; }
      .bk-h-tags { margin-top: 8px; }
      .bk-body { padding: 4px 16px 0; }
      .bk-row { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--surface); font-size: 13px; align-items: baseline; }
      .bk-k { font-size: 11px; color: var(--ink-4); letter-spacing: 1.5px; font-weight: bold; width: 62px; flex-shrink: 0; font-family: var(--uifont); }
      .bk-v { color: var(--ink); min-width: 0; }
      .bk-v b { color: var(--ink-hi); }
      .det-wrap { padding: 12px 16px 12px; }
      .det-box { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--surface-2); border-radius: 4px; padding: 4px 12px; }
      .d-row { display: flex; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--surface); }
      .d-row:last-child { border-bottom: none; }
      .d-k { font-size: 11px; color: var(--ink-4); letter-spacing: 1.2px; font-weight: bold; width: 118px; flex-shrink: 0; font-family: var(--uifont); }
      .d-v { font-size: 13px; color: #c9b8a0; min-width: 0; line-height: 1.6; }
      .d-v.d-money { color: var(--ok); font-weight: bold; font-variant-numeric: tabular-nums; }
      .det-lock { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px dashed var(--surface-2); border-radius: 4px; padding: 12px 12px; font-size: 13px; color: var(--ink-4); font-family: "Malgun Gothic", sans-serif; text-align: center; }
      .trace { font-size: 12px; color: var(--ink-4); font-family: var(--uifont); line-height: 1.8; padding: 8px 16px 12px; border-top: 1px solid var(--surface); }
      .trace b { color: var(--ink-4); }
      .bk-btns { display: flex; gap: 4px; padding: 0 16px 16px; }
      .bk-btns .tw-btn { flex: 1; font-size: 12px; }
      .m-title { color: var(--gold); font-weight: 800; letter-spacing: 2px; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--card-up); display: flex; }
      .m-title .x { margin-left: auto; color: var(--ink-4); font-size: 13px; }
      .f-lab { font-size: 12px; color: var(--ink-4); letter-spacing: 1.5px; margin: 12px 0 0; font-weight: bold; font-family: var(--uifont); }
      /* [2.0724] 확정본에서 **쉼표로 묶인 선택자**라 옮길 때 통째로 놓쳤다.
         그래서 종류·옵션 버튼이 테두리도 없이 STUDIOOWNWALK-IN 글자로만 나왔다(사장님 제보). */
      .segrow, .chk3 { display: flex; gap: 4px; margin-top: 8px; }
      .segbtn, .chkbtn { flex: 1; text-align: center; font-size: 12px; padding: 8px 0; border: 1px solid var(--card-up); border-radius: 2px; background: var(--card); color: #9c9284; font-family: var(--uifont); font-weight: bold; }
      /* 예약 판 왼쪽 - 좁아진 칸에 맞춰 로스터 조각을 줄인다. 이것도 같이 빠져 있었다. */
      .split .shift-block { margin: 0 0 8px; }
      .split .slot-card { font-size: 12px; padding: 4px 4px; min-height: 33px; }
      .split .weekly-count-badge { font-size: 11px; }
      .segbtn.on { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
      .chkbtn.on { border-color: var(--purple); color: var(--purple); background: rgba(var(--purple-2-rgb), 0.1); }
      .rowf { display: flex; gap: 4px; margin-top: 8px; }
      .rowf .tw-input { min-width: 0; margin-top: 0; text-align: center; }
      .tw-input.act { border-color: var(--gold); box-shadow: 0 0 7px rgba(var(--gold-rgb), 0.3); color: var(--gold); }
      .tw-input.dim { color: var(--ink-4); }
      .tw-input.empty { color: var(--ink-4); border-color: var(--card-up); }
      .tw-input.fixed { color: var(--ink-4); }
      .f-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
      .f-k { font-size: 11px; color: var(--ink-4); letter-spacing: 1.2px; font-weight: bold; width: 112px; flex-shrink: 0; font-family: var(--uifont); }
      .f-in { margin-top: 0 !important; padding: 8px 8px !important; font-size: 12px !important; }
      .f-btns { display: flex; gap: 4px; margin-top: 16px; }
      .f-btns .tw-btn { flex: 1; font-size: 12px; }
      .need { font-size: 12px; color: var(--ink-4); text-align: center; margin-top: 8px; font-family: var(--uifont); }
      .need b { color: var(--warn); }
      .cal { border: 1px solid var(--card-up); border-radius: 4px; background: var(--bg); padding: 8px; margin-top: 4px; }
      .cal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; color: var(--ink); letter-spacing: 1px; margin-bottom: 8px; }
      .cal-head .nav { color: var(--gold); padding: 2px 12px; font-size: 16px; }
      .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
      .cal-grid .wd { color: var(--ink-4); font-size: 11px; padding: 4px 0; font-family: var(--uifont); }
      /* [2.1021] 주말은 색 + 굵기 둘 다로 알린다 - 색맹에게도 보이게. */
      /* [2.1025] **우선순위 싸움에서 졌던 자리.** 처음엔 .wd.sat 로만 썼는데
         한참 아래의 .ofx .cal-grid .wd 가 더 세고 뒤에 있어서 색을 도로 덮었다 -
         오퍼 · 예약 폼 달력만 색이 안 먹었다(사장님이 화면 보고 찾아냄 2026-09-02).
         그래서 덮는 쪽보다 한 칸 더 세게 적는다. 규칙을 옮기지 않고 세기로 이긴다 -
         옮기면 나중에 누가 또 아래에 규칙을 붙였을 때 같은 일이 난다. */
      /* [2.1028] **!important 를 박는다.** 세기로 이기게 두 번 고쳤는데도
         사장님 화면에서 안 먹었다. 주말 표시는 다른 무엇도 이길 이유가 없는
         자리라, 더 따지지 않고 못 박는다. 이 규칙 때문에 다른 게 깨질 일은 없다 -
         요일 머리 글자 색 하나뿐이다. */
      .wd.sat, .cal-grid .wd.sat, .ofx .cal-grid .wd.sat, .pcal-mh span.sat
        { color: var(--sky) !important; font-weight: 700 !important; }
      .wd.sun, .cal-grid .wd.sun, .ofx .cal-grid .wd.sun, .pcal-mh span.sun
        { color: var(--cancel-hi) !important; font-weight: 700 !important; }
      /* [2.1021] 예약 카드의 인원(+N). 손님 이름을 가리지 않게 작게. */
      .pcal-e .ppl { color: var(--warn); font-style: normal; font-weight: 700; }
      .cal-grid .d { padding: 8px 0; color: var(--ink-2); border-radius: 4px; }
      .cal-grid .d.dim { color: transparent; }
      .cal-grid .d.past { color: var(--ink-4); text-decoration: line-through; }
      .cal-grid .d.sel { background: var(--gold); color: var(--surface-2); font-weight: 900; }
      .cal-grid .d.today { outline: 1px solid var(--info); }
      .wheel { position: relative; display: flex; gap: 8px; justify-content: center; border: 1px solid var(--card-up); border-radius: 4px; background: var(--bg); padding: 0 8px; margin-top: 4px; height: 150px; overflow: hidden; }
      .wcol { flex: 0 0 74px; height: 150px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; text-align: center; }
      .wcol::-webkit-scrollbar { display: none; }
      .wpad { height: 60px; }
      .wit { height: 30px; line-height: 30px; scroll-snap-align: center; font-size: 16px; color: var(--ink-4); font-variant-numeric: tabular-nums; font-weight: bold; }
      .wit.sel { color: var(--gold); font-size: 16px; }
      .wsep { align-self: center; color: var(--ink-4); font-size: 16px; font-weight: bold; z-index: var(--z-lift-2); }
      .wbar { position: absolute; left: 8px; right: 8px; top: 60px; height: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(var(--gold-rgb), 0.06); pointer-events: none; }
      .wfade-t, .wfade-b { position: absolute; left: 0; right: 0; height: 46px; pointer-events: none; }
      .wfade-t { top: 0; background: linear-gradient(180deg, var(--bg) 10%, transparent); }
      .wfade-b { bottom: 0; background: linear-gradient(0deg, var(--bg) 10%, transparent); }
      .confirm { background: var(--bg); border: 2px solid var(--gold-line); border-radius: 4px; padding: 16px; max-width: 340px; margin: 0 auto; }
      .c-t { color: var(--gold); font-weight: 800; letter-spacing: 1.5px; font-size: 14px; text-align: center; margin-bottom: 12px; }
      .c-card { background: var(--bg); border: 1px solid var(--surface-2); border-radius: 4px; padding: 12px; position: relative; }
      .c-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sky); }
      .c-when { font-size: 16px; font-weight: 800; color: #ffe9a8; font-variant-numeric: tabular-nums; }
      .c-date { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
      .c-who { font-size: 13px; color: var(--ink); margin-top: 8px; }
      .c-who b { color: var(--ink-hi); }
      .c-btns { display: flex; gap: 4px; margin-top: 12px; }
      .c-btns .tw-btn { flex: 1; font-size: 12px; }
      .opt-tag { font-size: 11px; color: var(--ink-4); letter-spacing: 0.5px; margin-left: 4px; font-weight: 900; }
      /* [2.0725] 필수 칸 표시. OPTIONAL 딱지와 같은 크기·자리, 색만 빨강(사장님 지시). */
      .req-tag { font-size: 11px; color: var(--danger); letter-spacing: 0.5px; margin-left: 4px; font-weight: 900; }
      .f-hint { font-size: 12px; color: var(--ink-4); margin-top: 4px; font-family: var(--uifont); }
      .fcnt { font-size: 11px; color: var(--ink-4); margin-left: 4px; font-family: var(--uifont); font-weight: 400; }
      .fcnt.over { color: var(--danger); font-weight: 700; }
      .modal-content.pad { padding: 12px 16px 16px; }
      .tw-input.deco { display: flex; align-items: center; text-align: left; color: var(--ink); }
      .tw-input.deco b { color: var(--ink-hi); font-weight: bold; }
      .tw-input.deco.fixed b { color: #c9b8a0; }
      .tw-input.deco .title-prefix { font-size: 0.86em; }
      /* 덮개 자체는 자리를 안 차지한다 - 안의 .ov / .lb 가 fixed 로 화면을 덮는다.
         열릴 땐 display:flex 로 바뀜다(뒤 화면 잠금이 flex 를 본다). */
      #offerModal { display: none; position: relative; z-index: var(--z-modal-4); }
      /* [2.0729] 한 화면짜리(폼·고르개)일 때만 덮개가 화면을 덮는다.
         목업에선 폰 하나를 통째로 채우는 그림이라 뜨는 위치가 없었고, 그대로 옮기니
         문서 맨 아래에 그려져서 눌러도 아무것도 안 나오는 것처럼 보였다(사장님 제보).
         확인 모달(.ov)·사진 전체화면(.lb)은 목업 값이 이미 fixed 라 안 건드린다. */
      #offerModal.full { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain;
        background: var(--bg); flex-direction: column; }
      /* 목업의 .fv 는 **글자만 보여주는 칸**이다 - 테두리가 있는 줄(.fr) 안에 들어가므로
         진짜 입력칸으로 쓰려면 제 테두리·바탕을 지워야 목업과 같아 보인다.
         [2.0966] **.ta 는 다르다.**(사장님 제보 2026-08-27 "여기에 노트 쓰는 박스가 없다")
         .ta 는 목업에서도 **제 상자를 가진 칸**이다(.ofx .ta 에 테두리·바탕이 있다).
         그런데 위 규칙이 둘을 같이 묶어 놓아서 .ta 의 상자까지 지워 버렸다.
         .ofx textarea.ta(0,2,1) 가 .ofx .ta(0,2,0) 보다 세서, 뒤에 오는 목업 값이
         아무리 테두리를 그려도 안 먹었다. 그래서 노트 칸이 **글씨만 떠 있는 빈자리**로
         보였다 - 누르는 곳인 줄도 모른다.
         같은 규칙에 걸려 있던 **휴가 사유 칸 · 부킹 답장 칸도 같이** 안 보였다.
         (2026-08-26 생일 카드에서 똑같이 당했다: .ofx input.fv 의 border:0 이
          .bday-in 을 눌렀다. 묶어 놓은 규칙이 남의 상자를 지우는 것 - 같은 함정이다.) */
      .ofx input.fv { width: 100%; box-sizing: border-box; background: none; border: 0; outline: none; color: var(--ink-hi); font-family: inherit; }
      .ofx textarea.ta { width: 100%; box-sizing: border-box; outline: none; color: var(--ink-hi); font-family: inherit; }
      .ofx input.fv::placeholder, .ofx textarea.ta::placeholder { color: var(--ink-4); }
      .ofx textarea.ta { resize: vertical; color: var(--ink); }
      .ofx .sh { cursor: pointer; }
      .ofx .ai.ok { cursor: pointer; }
      #offerContainer:empty { display: none; }
      #offerContainer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
      /* 끝나는 시각 고르개 - 목업엔 없는 자리라 예약 폼의 휴과 같은 결로 맞춰 둔다. */
      .ofx .oflist { max-height: 210px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--card-up); border-radius: 4px; }
      .ofx .ofrow { padding: 12px 12px; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink-2); border-bottom: 1px solid var(--card); text-align: center; }
      .ofx .ofrow.on { background: rgba(var(--gold-rgb), 0.12); color: var(--gold); font-weight: bold; }
      /* [2.0727] 스튜디오 부킹 오퍼 화면 - 확정 목업 mockups/build_offer.js 에서 값 그대로.
         목업은 혼자 도는 문서라 .b .x .dim 같은 짧은 이름을 쓴다. 앱엔 그 이름을
         이미 쓰는 자리가 7군데(b bad dim fl lb off x) 있어서 그대로 부으면 엉뚜한 곳이 망가진다.
         **값은 한 글자도 안 건드리고 앞에 `.ofx ` 만 붙였다.** 밖은 이 규칙에 안 걸린다. */
      .ofx .mh0 { font-family:Cinzel,serif;color:var(--gold);font-size:13px;letter-spacing:1.6px;padding:12px 12px 8px;border-bottom:1px solid var(--card);display:flex;align-items:center; }
      .ofx .mh0 .x { margin-left:auto;color:var(--ink-4);font-size:13px; }
      .ofx .wrap { padding:12px 12px 32px; }
      .ofx .wrap.dim { filter:brightness(.42); }
      .ofx .sec { display:flex;align-items:baseline;gap:8px;font-size: 11px;font-weight:900;letter-spacing:1.4px;color:var(--warn-soft);font-family:var(--uifont);margin:16px 2px 4px; }
      .ofx .secn { color:var(--ink-4);font-weight:normal;letter-spacing:.5px;font-size: 11px; }
      .ofx .pick { border:1px solid var(--line);background:rgba(var(--gold-rgb), .06);border-radius:4px;padding:12px 12px;color:var(--gold);font-size:14px;font-weight:bold;display:flex;align-items:center; }
      .ofx .pick .cv { margin-left:auto;color:var(--ink-4);font-size: 12px; }
      .ofx .fd { border:1px solid var(--card);background:var(--bg);border-radius:4px;padding:8px 12px;margin-bottom:4px; }
      .ofx .fl { display:block;font-size: 11px;font-weight:900;letter-spacing:1px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .fv { display:block;font-size:14px;color:var(--ink-hi);margin-top:2px; }
      .ofx .fv.ph { color:var(--ink-4);font-size:12px; }
      .ofx .row2 { display:flex;gap:4px; }
      .ofx .row2 .fd { flex:1; }
      .ofx .ta { border:1px solid var(--card);background:var(--bg);border-radius:4px;padding:12px;min-height:44px;font-size:12px; }
      .ofx .ta.ph { color:var(--ink-4); }
      .ofx .hint { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin:-2px 2px 0;line-height:1.6; }
      .ofx .ph-box { border:1px dashed var(--purple-line);background:rgba(var(--purple-rgb), .04);border-radius:4px;padding:12px 12px; }
      .ofx .ph-box.filled { border-style:solid;border-color:var(--purple-bg);padding:8px; }
      .ofx .ph-add { text-align:center; }
      .ofx .ph-ic { display:block;font-size:24px;color:var(--purple);line-height:1; }
      .ofx .ph-kbd { display:flex;gap:4px;justify-content:center;margin-bottom:8px; }
      .ofx .ph-kbd b { display:inline-block;font-family:var(--uifont);font-size: 12px;font-weight:900;color:var(--ink);background:#221b2e;border:1px solid var(--purple-line);border-bottom-width:2px;border-radius:4px;padding:4px 8px; }
      .ofx .ph-or { display:block;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin-top:8px; }
      .ofx .ph-or u { color:var(--ink-4);text-decoration:none;border-bottom:1px solid var(--purple-bg); }
      .ofx .ph-box.drop { border-color:var(--purple);background:rgba(var(--purple-rgb), .12); }
      .ofx .ph-t.drop { color:var(--ink-hi); }
      .ofx .ph-n2 { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin-top:4px; }
      .ofx .ph-n2 b { color:var(--ink-3);background:#1a1520;border:1px solid var(--purple-bg);border-radius:4px;padding:0 4px; }
      .ofx .ph-t { display:block;font-size: 12px;font-weight:900;letter-spacing:1.2px;color:var(--purple);font-family:var(--uifont);margin-top:4px; }
      .ofx .ph-s { display:block;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin-top:4px; }
      .ofx .sh-row { display:flex;gap:4px; }
      .ofx .sh { flex:1;aspect-ratio:1/1.15;border-radius:4px;position:relative;background:linear-gradient(150deg,var(--stone),var(--surface) 55%,var(--stone)); }
      .ofx .sh1 { background:linear-gradient(150deg,var(--stone),var(--surface) 60%,var(--stone)); }
      .ofx .sh2 { background:linear-gradient(160deg,var(--stone),var(--surface) 55%,var(--stone)); }
      .ofx .sh3 { background:linear-gradient(140deg,var(--stone),var(--surface) 60%,var(--stone)); }
      .ofx .sh-x { position:absolute;top:3px;right:4px;font-size: 11px;color:var(--ink);background:rgba(var(--shadow-rgb), .55);border-radius:8px;padding:2px 4px; }
      .sh-hit { cursor: zoom-in; }
      .sh-hit:active { outline: 1px solid rgba(var(--gold-rgb), 0.5); }
      .ofx .sh-bar { position:absolute;left:6px;right:6px;bottom:6px;height:3px;background:rgba(var(--shadow-rgb), .5);border-radius:2px;overflow:hidden; }
      .ofx .sh-bar i { display:block;height:100%;background:var(--purple); }
      .ofx .sh.add { background:none;border:1px dashed var(--purple-line);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:19px; }
      .ofx .ph-n { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin-top:8px; }
      .ofx .send { margin-top:16px;text-align:center;background:linear-gradient(180deg,var(--gold),var(--gold-line));color:var(--surface);font-size:13px;font-weight:900;letter-spacing:1.2px;border-radius:4px;padding:12px 0;font-family:var(--uifont); }
      .ofx .send.off { background:none;border:1px solid var(--card-up);color:#6b5b45; }
      .ofx .fd.need { border-color:#6b4a1f; }
      .ofx .foot.miss { color:var(--gold);letter-spacing:0.6px; }
      .ofx .foot { text-align:center;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);padding:8px 0 0;line-height:1.7; }
      .ofx .ios { position:fixed;left:8px;right:8px;bottom:8px; }
      .ofx .ios-c { background:rgba(38,34,30,.97);border-radius:8px;overflow:hidden;margin-top:8px; }
      .ofx .ios-t { text-align:center;font-size: 12px;color:#9a8f80;font-family:var(--uifont);padding:12px 0;border-bottom:1px solid rgba(var(--ink-hi-rgb), .08); }
      .ofx .ios-r { text-align:center;font-size:16px;color:#6fa8ff;font-family:var(--uifont);padding:12px 0;border-bottom:1px solid rgba(var(--ink-hi-rgb), .08); }
      .ofx .ios-c.one .ios-r { border-bottom:none;font-weight:bold;color:#6fa8ff; }
      .ofx .ov { position:fixed;inset:0;background:rgba(var(--shadow-rgb), .7);display:flex;align-items:center;justify-content:center;padding:16px; }
      .ofx .mb { width:100%;background:var(--bg);border:1px solid var(--card-up);border-radius:8px;padding:16px; }
      .ofx .mt { font-size:16px;color:var(--ink-hi);font-weight:bold;margin-bottom:8px; }
      .ofx .ml { font-size:12px;color:var(--ink-3);line-height:1.7;font-family:var(--uifont); }
      .ofx .warn { display:flex;gap:8px;border:1px solid var(--danger-line);background:rgba(var(--danger-line-rgb), .14);border-radius:4px;padding:8px;margin-top:12px; }
      .ofx .wi { color:var(--danger);font-size: 11px;line-height:2; }
      .ofx .warn b { display:block;color:var(--ink-hi);font-size:13px; }
      .ofx .ws { display:block;color:var(--ink-3);font-size: 13px;font-family:var(--uifont);margin-top:4px; }
      .ofx .mbtns { display:flex;gap:8px;margin-top:12px; }
      .ofx .mb2 { flex:1;text-align:center;font-size: 12px;font-weight:900;letter-spacing:1px;padding:12px 0;border-radius:4px;font-family:var(--uifont);border:1px solid var(--surface-2);color:var(--ink-4); }
      .ofx .mb2.go { border-color:var(--line);background:linear-gradient(180deg,var(--gold),var(--gold-line));color:var(--surface); }
      .ofx .pend { border:1px solid var(--line);background:rgba(var(--gold-rgb), .05);border-radius:4px;padding:12px; }
      .ofx .pt { display:flex;align-items:center;gap:8px;font-size: 12px;font-weight:900;letter-spacing:1.2px;color:var(--gold);font-family:var(--uifont); }
      .ofx .dot { width:7px;height:7px;border-radius:50%;background:var(--gold); }
      .ofx .pw { margin-left:auto;color:var(--ink-4);font-weight:normal;letter-spacing:0;font-size: 12px; }
      .ofx .pc { margin-top:8px;line-height:1.55; }
      .ofx .pct { display:block;font-size:13px;color:var(--warn-soft);font-weight:bold;font-variant-numeric:tabular-nums; }
      .ofx .pcn { display:block;font-size:14px;color:var(--ink-hi); }
      .ofx .pcn i { font-style:normal;color:var(--purple);font-size: 12px; }
      .ofx .pcm { display:block;font-size: 12px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .pf { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);line-height:1.7;margin-top:8px;border-top:1px solid var(--card);padding-top:8px; }
      .ofx .pact { display:flex;gap:4px;margin-top:8px; }
      .ofx .pt { cursor:pointer; }
      .ofx .pcar { margin-left:8px;color:var(--ink-4);font-size: 12px;line-height:1; }
      .ofx .pmini { display:none;font-size: 13px;font-family:var(--uifont);color:var(--ink-3);margin-top:8px; }
      .ofx .pend.fold .pmini { display:block; }
      .ofx .pend.fold .pbody { display:none; }
      .ofx .pa { flex:1;text-align:center;font-size: 11px;font-weight:900;letter-spacing:.5px;color:var(--ink-4);border:1px solid var(--surface-2);border-radius:4px;padding:8px 2px;font-family:var(--uifont); }
      .ofx .pa.del { color:var(--danger-ink);border-color:var(--danger-bg); }
      .ofx .bk { display:flex;align-items:center;gap:8px;border:1px solid var(--card);background:rgba(var(--card-fill-rgb), .85);border-radius:4px;padding:8px 8px 8px 0;margin-bottom:4px; }
      .ofx .bb { width:4px;align-self:stretch;background:#3a2c18; }
      .ofx .bc { flex:1;line-height:1.5; }
      .ofx .bt { display:block;color:var(--warn-soft);font-weight:bold;font-size:12px;font-variant-numeric:tabular-nums; }
      .ofx .tg { font-size: 11px;font-weight:900;letter-spacing:.4px;margin-left:4px; }
      .ofx .bn { display:block;font-size:14px;color:var(--ink-hi); }
      .ofx .bb.g { background:var(--ok); }
      .ofx .offer { border:2px solid var(--gold);background:rgba(var(--gold-rgb), .07);border-radius:8px;padding:12px; }
      .ofx .ot { font-size: 12px;font-weight:900;letter-spacing:1.6px;color:var(--gold);font-family:var(--uifont);margin-bottom:8px; }
      .ofx .ow { font-size:13px;color:var(--warn-soft);font-family:var(--uifont); }
      .ofx .ow b { color:var(--ink-hi);font-size:16px; }
      .ofx .on2 { font-size:16px;color:var(--ink-hi);margin-top:4px; }
      .ofx .on2 i { font-style:normal;color:var(--purple);font-size:12px; }
      .ofx .om { font-size:12px;color:var(--ink-3);font-family:var(--uifont);margin-top:2px; }
      .ofx .od { font-size: 12px;color:var(--mint);font-family:var(--uifont);margin-top:4px; }
      .ofx .oop { display:flex;gap:4px;flex-wrap:wrap;margin-top:8px; }
      .ofx .oop span { font-size: 11px;font-family:var(--uifont);letter-spacing:1px;
        color:var(--gold);border:1px solid rgba(var(--gold-rgb), .4);border-radius:4px;padding:2px 4px; }
      .ofx .offer .det-box, .ofx .pend .det-box { margin-top:8px; }
      .pend .det-box { margin:8px 0 2px; }
      .ofx .offer .sh-row { margin-top:8px; }
      .ofx .obt { display:flex;gap:8px;margin-top:12px; }
      .ofx .ob { flex:1;text-align:center;font-size:12px;font-weight:900;letter-spacing:1.2px;padding:12px 0;border-radius:4px;font-family:var(--uifont); }
      .ofx .ob.no { border:1px solid var(--danger-bg);color:var(--danger-ink); }
      /* [2.0949] 아직 못 보내는 상태. **눌리기는 한다** - 누르면 무엇이 모자란지 말해 준다.
         예전엔 아예 안 눌리는데 생김새는 같아서, 눌러도 아무 일이 없었다(작가 제보). */
      .ofx .ob.dim, .ob.dim { opacity:0.45; }
      .ofx .ob.yes { background:linear-gradient(180deg,var(--gold),var(--gold-line));color:var(--surface); }
      .ofx .fin { border:1px solid var(--line);background:rgba(var(--gold-rgb), .06);border-radius:4px;padding:8px 12px;margin-top:12px; }
      .ofx .fll { display:block;font-size: 11px;font-weight:900;letter-spacing:1px;color:var(--gold);font-family:var(--uifont); }
      .ofx .fll i { font-style:normal;color:var(--danger-ink);margin-left:4px; }
      .ofx .finv { display:block;font-size:19px;color:var(--ink-hi);font-weight:bold;font-variant-numeric:tabular-nums;margin-top:2px; }
      .ofx .finv .cv { font-size: 12px;color:var(--ink-4); }
      .ofx .fhint { display:block;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin-top:4px;line-height:1.6; }
      .ofx .lb { position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column; }
      .ofx .lb-top { display:flex;align-items:center;padding:12px 16px 8px; }
      .ofx .lb-n { font-size:12px;color:var(--ink-4);font-family:var(--uifont);font-variant-numeric:tabular-nums;margin-right:auto; }
      .ofx .lb-x { margin-left:4px;color:var(--ink);font-size:16px; }
      .ofx .lb-img { flex:1;margin:4px 8px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg);touch-action:none; }
      .ofx .lb-img img { max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none; }
      .ofx .lb-z { color:var(--ink);font-size:19px;padding:0 8px;cursor:pointer;line-height:1; }
      .ofx .lb-dots { display:flex;gap:4px;justify-content:center;padding:8px 0 2px; }
      .ofx .lb-dots i { width:6px;height:6px;border-radius:50%;background:#3a3225; }
      .ofx .lb-dots i.on { background:var(--gold); }
      .ofx .lb-hint { text-align:center;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);padding:4px 0 16px; }
      .ofx .bb.b { background:var(--info-2); }
      .ofx .fin.bad { border-color:var(--danger-line);background:rgba(var(--danger-line-rgb), .12); }
      .ofx .fll.bad { color:var(--danger-ink); }
      .ofx .fll.bad i { color:var(--danger); }
      .ofx .fin.bad .fhint b { color:var(--gold); }
      .ofx .warn.stop { border-color:var(--danger-line);background:rgba(var(--danger-line-rgb), .2); }
      .ofx .mb2.dead { border-color:var(--surface-2);background:none;color:#4a3f30; }
      /* 생일 카드 [2.0947]. 초대장 결 - 다른 카드와 일부러 다르게 한다(사장님 확정 시안 C). */
      .offer.bday { padding:0; border-color:#6b5320; background:rgba(var(--gold-rgb), .03); }
      .offer.bdayadm { border-color:var(--purple); background:rgba(var(--purple-rgb), .06); }
      .offer.bdayadm .ot { color:var(--purple); }
      .binv { position:relative; padding:20px 16px; text-align:center; background:linear-gradient(180deg,rgba(var(--gold-rgb), .06),rgba(var(--gold-rgb), .02)); }
      .binvtop { font-family:var(--uifont); font-size: 11px; letter-spacing:3px; color:var(--gold-line); }
      .binvname { font-size:25px; color:var(--gold); margin:8px 0 4px; }
      .binvline { font-family:var(--uifont); font-size:12px; color:var(--ink-3); line-height:1.7; }
      .brule { height:1px; background:linear-gradient(90deg,transparent,#6b5320,transparent); margin:12px 0; }
      .bseal { border:1px solid #6b5320; border-radius:50%; width:62px; height:62px; display:flex; align-items:center; justify-content:center; flex-direction:column; margin:4px auto 0; }
      .bseal b { color:var(--gold); font-size:16px; line-height:1; }
      .bseal span { font-family:var(--uifont); font-size: 11px; letter-spacing:2px; color:var(--gold-line); margin-top:2px; }
      .bdd { position:absolute; top:10px; right:12px; font-family:var(--uifont); font-size: 11px; font-weight:900; letter-spacing:1.4px; color:var(--surface); background:linear-gradient(180deg,var(--gold),var(--gold-line)); padding:4px 8px; border-radius:20px; }
      .bbody { border-top:1px solid #6b5320; padding:12px 12px; }
      .bpick { display:flex; gap:4px; }
      .bpk { flex:1; text-align:center; font-family:var(--uifont); font-size: 13px; font-weight:800; padding:8px 0; border:1px solid var(--card-up); border-radius:4px; color:var(--ink-3); background:var(--bg); min-height: 37px; cursor:pointer; }
      .bpk.on { border-color:var(--gold); color:var(--gold); background:rgba(var(--gold-rgb), .1); }
      .bpk.off { opacity:.32; }
      .bdayadm .bpk.on { border-color:var(--purple); color:var(--purple); background:rgba(var(--purple-rgb), .12); }
      .blab { font-family:var(--uifont); font-size: 11px; letter-spacing:1.4px; color:var(--ink-4); font-weight:800; text-transform:uppercase; margin:12px 0 4px; }
      /* [2.0958] 확정된 생일 카드 접기 */
      .bday-done .bdh { cursor:pointer; display:flex; align-items:center; gap:8px; }
      .bday-done .bdcar { margin-left:auto; color:#9c732e; font-size: 12px; }
      .bday-done .bdmini { font-size:13px; color:#bfe8d6; margin-top:4px; }
      .bday-done.fold { padding-bottom:12px; }
      /* [2.0954] 휴가 줄의 손잡이 - 밑줄 글자가 아니라 또렷한 단추여야 스치지 않는다 */
      .lvb { display:inline-block; font-style:normal; font-size: 12px; font-weight:800;
        letter-spacing:1.1px; padding:4px 8px; border-radius:4px; margin-right:4px;
        border:1px solid #7a5a24; color:var(--gold); background:var(--card); cursor:pointer; }
      .lvb.no { border-color:#6b2626; color:#ff9a9a; background:#1f0808; }
      .lvb.dead { border-color:var(--surface-2); color:var(--ink-4); background:none; cursor:default;
        font-weight:600; letter-spacing:.4px; }
      .lst.chg { color:var(--sky); border-color:#1d4a5c; background:#08202a; }
      .lwas { display:block; font-size: 12px; color:var(--sky); margin-top:4px; }
      /* [2.0953] 작가가 신청한 원본 - 사장님이 고치는 칸과 눈으로 갈리게 한다 */
      .bref { background:#0d1a16; border:1px solid #1d5c44; border-radius:8px; padding:12px 12px; margin:12px 0 4px; }
      .brefh { font-family:var(--uifont); font-size: 11px; letter-spacing:1.4px; font-weight:800;
        text-transform:uppercase; color:var(--mint); margin-bottom:8px; }
      .brefg { display:flex; flex-wrap:wrap; gap:8px 20px; }
      .brefg > div { min-width:0; }
      .brefg i { display:block; font-style:normal; font-size: 11px; letter-spacing:1.1px;
        text-transform:uppercase; color:#618274; font-weight:800; margin-bottom:2px; }
      .brefg b { font-family:var(--uifont); font-size:16px; color:#bfe8d6; font-weight:700; }
      .brefg u { display:block; text-decoration:none; font-size: 12px; color:#618274; margin-top:2px; }
      .brefn { margin-top:8px; font-size:13px; color:#bfe8d6; border-top:1px solid #143d2e; padding-top:8px; }
      .bmine { font-size: 11px; letter-spacing:1px; color:#9c732e; border:1px solid var(--card-up);
        border-radius:4px; padding:2px 4px; margin-left:8px; }
      /* [2.0953] 체크를 안 하고 보내려 하면 그 칸이 한 번 번쩍인다 - 말만 해서는
         어디를 보라는 건지 모른다. */
      @keyframes warnFlash { 0%,100% { box-shadow:none; } 50% { box-shadow:0 0 0 2px var(--gold); } }
      .bcap.warn-flash { animation: warnFlash .45s ease-in-out 2; }
      /* [2.0953] **쓰는 칸이 어딘지 보여야 한다**(사장님 지적: '쓰는 박스가 어딘지 모르겠어').
         테두리가 var(--card-up) 이라 바탕(var(--bg))과 거의 같은 색이었다 - 카드가 어두워서
         칸이 통째로 안 보이고, 특히 날짜 칸은 값이 없으면 iOS 가 아무것도 안 그려서
         빈 자리로 보였다. 테두리를 올리고 바탕을 한 겹 띄운다. */
      /* **.ofx input.fv 를 이겨야 한다.** 그 규칙이 border:0 · background:none 으로
         테두리를 지운다(477~479행). 이 카드는 #offerContainer(.ofx) 안에 그려지므로
         그냥 .bday-in 으로 쓰면 힘이 모자라 아무것도 안 바뀐다 - 2026-08-26 실제로
         그랬다(고쳤다고 말씀드렸는데 화면은 그대로였다).
         그래서 같은 무게(.ofx input.클래스)로 쓰고, 파일에서 더 뒤에 두어 이기게 한다. */
      .ofx input.bday-in { width:100%; box-sizing:border-box; background:var(--surface);
        border:1px solid #7a5a24; border-radius:8px; color:var(--gold);
        font-family:var(--uifont); font-size:14px; padding:12px 12px;
        min-height:44px; -webkit-appearance:none; appearance:none; }
      .ofx input.bday-in::placeholder { color:var(--ink-4); opacity:1; }
      .ofx input.bday-in:focus { outline:none; border-color:var(--gold); background:var(--card);
        box-shadow:0 0 0 2px rgba(var(--gold-rgb), .18); }
      /* 날짜 칸은 비어 있어도 상자가 보여야 누를 자리인 줄 안다 */
      .bday-in[type="date"] { text-align:left; }
      .brow { display:flex; gap:8px; margin-top:8px; }
      .brow > div { flex:1; min-width:0; }
      .brow .blab { margin-top:0; }
      .bnote { font-family:var(--uifont); font-size: 12px; color:var(--ink-4); margin-top:8px; line-height:1.6; }
      .bnote a { color:var(--info-ink); text-decoration:none; }
      .bheads { display:flex; gap:8px; background:rgba(var(--gold-rgb), .06); border:1px solid var(--card-up); border-radius:4px; padding:8px 8px; margin-top:12px; }
      .bheads i { font-style:normal; color:var(--gold); font-size:12px; line-height:1.3; }
      .bheads span { font-family:var(--uifont); font-size: 12px; color:var(--ink-3); line-height:1.6; }
      .bask { background:rgba(var(--danger-ink-rgb), .1); border:1px solid var(--danger-bg); border-radius:4px; padding:8px 8px; font-family:var(--uifont); font-size: 12px; color:var(--danger-ink); line-height:1.6; margin-bottom:8px; }
      .bskip { font-family:var(--uifont); font-size: 12px; color:var(--ink-4); text-align:center; margin-top:8px; text-decoration:underline; padding:4px 0; min-height: 37px; cursor:pointer; }
      .bwas { font-family:var(--uifont); font-size: 12px; color:var(--ink-4); margin-top:4px; line-height:1.5; }
      .bwas b { color:var(--gold-line); }
      .bfrom { background:var(--bg); border:1px solid var(--card); border-radius:4px; padding:8px 8px; margin-top:12px; font-family:var(--uifont); font-size: 13px; color:var(--ink); line-height:1.6; }
      .bfrom u { display:block; text-decoration:none; font-size: 11px; letter-spacing:1px; color:var(--ink-4); font-weight:800; text-transform:uppercase; margin-bottom:4px; }
      .bday-note { font-family:var(--uifont); font-size: 13px; color:var(--ink); margin-top:8px; line-height:1.6; }
      .bday-map { margin-top:8px; }
      .bday-map a { font-family:var(--uifont); font-size: 12px; color:var(--info-ink); text-decoration:none; }
      .bday-was { font-family:var(--uifont); font-size: 12px; color:var(--ink-4); margin-top:8px; line-height:1.6; }
      #ofBusyVeil, #actBusyVeil { position:fixed;inset:0;z-index: var(--z-veil);display:none;align-items:center;justify-content:center;background:rgba(var(--shadow-rgb), .55); }
      #ofBusyBox, #actBusyBox { font-family:var(--uifont);font-size:12px;font-weight:900;letter-spacing:2px;color:var(--gold-line);border:1px solid #6b5320;background:var(--surface);padding:12px 20px;border-radius:4px; }
      #ofBusyDots, #actBusyDots { animation:ofBusyBlink 1s steps(1,end) infinite;margin-left:2px; }
      @keyframes ofBusyBlink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
      .ofx .bhint { text-align:center;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin-top:8px;line-height:1.6; }
      .ofx .pnote { font-size:13px;color:var(--ink-3);font-family:var(--uifont);line-height:1.7;margin:2px 2px 8px; }
      .ofx .pnote b { color:var(--gold); }
      .ofx .psearch { border:1px solid var(--card);background:var(--bg);border-radius:4px;padding:12px 12px;color:var(--ink-4);font-size:13px; }
      .ofx .ai { display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid var(--card);background:var(--bg);border-radius:4px;padding:8px 12px;margin-bottom:4px; }
      .ofx .ai.no { opacity:.45;border-style:dashed; }
      .ofx .an { font-size:16px;color:var(--ink-hi);font-weight:bold; }
      .ofx .ay { font-size: 11px;font-weight:900;letter-spacing:.8px;color:var(--ok);border:1px solid #1f5a12;background:rgba(var(--ok-rgb), .08);border-radius:8px;padding:2px 8px; }
      .ofx .au { font-size: 11px;font-weight:900;letter-spacing:.6px;color:var(--warn-soft);border:1px solid var(--line);background:rgba(var(--warn-soft-rgb), .08);border-radius:8px;padding:2px 8px; }
      .ofx .ax { font-size: 11px;font-weight:900;letter-spacing:.8px;color:var(--danger-ink);border:1px solid var(--danger-line);background:rgba(var(--danger-rgb), .08);border-radius:8px;padding:2px 8px; }
      .ofx .aw { flex-basis:100%;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);font-variant-numeric:tabular-nums; }
      .ofx .pfoot { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);line-height:1.8;margin-top:12px;border-top:1px solid var(--card);padding-top:8px; }
      .ofx .pfoot b { color:var(--ink-4); }
      .ofx .ald { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);margin-left:auto;font-variant-numeric:tabular-nums; }
      .ofx .ald b { color:var(--ink); }
      /* [2.0930] 로스터가 있어도 보낼 수 있다 - 다만 있다고 알려는 준다. */
      .ofx .arb { font-size: 11px;font-family:var(--uifont);font-weight:900;letter-spacing:.5px;color:var(--gold-line);border:1px solid #6b5320;border-radius:2px;padding:2px 4px;margin-left:8px;white-space:nowrap; }
      .ofx .pbasis { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);line-height:1.7;margin:-2px 2px 8px; }
      .ofx .pbasis b { color:var(--ink-4); }
      /* [2.0731] 휴가 화면 - 확정 목업 mockups/build_leave.js 에서 값 그대로.
         오퍼 화면과 같은 이유로 `.ofx` 안에 가둔다 - 목업이 .warn .ov .mb 같은
         짧은 이름을 쓰기 때문이다. 이미 오퍼가 옮겨온 규칙은 다시 안 넣는다. */
      .ofx .qbox { border:1px solid var(--card-up);border-radius:4px;background:var(--bg);padding:12px; }
      .ofx .qh { display:flex;align-items:baseline;font-size: 12px;font-weight:900;letter-spacing:1.4px;color:var(--info-ink);font-family:var(--uifont); }
      .ofx .qn { margin-left:auto;font-size:16px;color:var(--ok);letter-spacing:0; }
      .ofx .gauge { display:flex;gap:4px;margin:8px 0 8px; }
      .ofx .gc { flex:1;height:10px;border-radius:2px;background:var(--surface);border:1px solid var(--surface-2); }
      .ofx .gc.on { background:var(--ok);border-color:var(--ok); }
      .ofx .gc.pend { background:var(--line);border-color:var(--warn); }
      .ofx .qs { font-size: 12px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .rowf { display:flex;gap:4px;align-items:center;margin-top:8px; }
      .ofx .rowf .tw-input { min-width:0;margin-top:0;text-align:center; }
      .ofx .tw-input.act { border-color:var(--gold);box-shadow:0 0 7px rgba(var(--gold-rgb), .3);color:var(--gold); }
      .ofx .arrow { color:var(--ink-4);font-size:14px; }
      .ofx .cal { border:1px solid var(--card-up);border-radius:4px;background:var(--bg);padding:8px;margin-top:4px; }
      .ofx .cal-head { display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px;color:var(--ink);letter-spacing:1px;margin-bottom:8px; }
      .ofx .cal-head .nav { color:var(--gold);padding:2px 12px;font-size:16px; }
      .ofx .cal-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size: 13px;font-variant-numeric:tabular-nums; }
      .ofx .cal-grid .wd { color:var(--ink-4);font-size: 11px;padding:4px 0;font-family:var(--uifont); }
      .ofx .cal-grid .d { padding:8px 0;color:var(--ink-2); }
      .ofx .cal-grid .d.dim { color:transparent; }
      .ofx .cal-grid .d.past { color:var(--ink-4);text-decoration:line-through; }
      .ofx .cal-grid .d.today { outline:1px solid var(--info);border-radius:4px; }
      .ofx .cal-grid .d.pick { background:rgba(var(--gold-rgb), .18);color:var(--gold);font-weight:900; }
      .ofx .cal-grid .d.pick.s { border-radius:4px 0 0 4px;background:var(--gold);color:var(--surface-2); }
      .ofx .cal-grid .d.pick.e { border-radius:0 4px 4px 0;background:var(--gold);color:var(--surface-2); }
      .ofx .cnt { font-size:12px;color:var(--info-ink);font-family:var(--uifont);margin:8px 2px 0; }
      .ofx .cnt b { color:var(--ink-hi); }
      .ofx .cnt.bad { color:var(--danger-ink); }
      .ofx .lr { display:flex;gap:8px;border:1px solid var(--card);background:rgba(var(--card-fill-rgb), .85);padding:8px 8px 8px 0;margin-bottom:4px;border-radius:4px; }
      .ofx .lb-bar { width:4px;align-self:stretch;flex-shrink:0;border-radius:0 2px 2px 0; }
      .ofx .lr.ok .lb-bar { background:var(--ok); }
      .ofx .lr.wait .lb-bar { background:var(--warn); }
      .ofx .lr.no .lb-bar { background:var(--danger); }
      .ofx .lc { min-width:0;flex:1; }
      .ofx .lt { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:bold;color:var(--ink); }
      .ofx .lst { font-size: 11px;font-weight:900;letter-spacing:.6px;border-radius:2px;padding:2px 4px;font-family:var(--uifont); }
      .ofx .lst.ok { color:var(--ok);border:1px solid #1e5c14; }
      .ofx .lst.wait { color:var(--warn);border:1px solid var(--line-gold); }
      .ofx .lst.no { color:var(--danger);border:1px solid #5c1414; }
      .ofx .ln { display:block;font-size: 13px;color:#b3a58f;margin-top:4px; }
      .ofx .lx { display:block;font-size: 12px;color:var(--ink-4);margin-top:4px;font-family:var(--uifont);line-height:1.6; }
      .ofx .od b { color:var(--ink-hi); }
      .ofx .who { font-size: 13px;color:var(--warn-soft);margin-top:4px; }
      .ofx .who.none { color:var(--ink-4); }
      .ofx .ohand { font-size: 13px;color:var(--info-ink);margin-top:4px; }
      .ofx .ohand b { color:#d7f4ff; }
      .ofx .obk { font-size: 13px;color:var(--danger-ink);margin-top:4px; }
      .ofx .obk b { color:#ffb3a3; }
      .ofx .obk.none { color:var(--ink-4); }
      #adminConsoleBody .ofx .offer, #adminConsoleBody .ofx .pend { margin-bottom:8px; }
      .ofx .obkl { cursor:pointer; text-underline-offset:2px; }
      .ofx .obkl:active { opacity:.6; }
      .ofx .obks { display:block;font-size: 12px;color:var(--ink-4);margin-top:2px;
                   font-family:var(--uifont); }
      .ofx .oy { font-size: 12px;color:var(--ink-4);margin-top:4px;font-family:var(--uifont); }
      .ofx .oy b { color:var(--ink); }
      .ofx .oyq { display:inline-flex;gap:4px;margin-left:8px; }
      .ofx .oyq i { font-style:normal;font-size: 12px;letter-spacing:.3px;color:var(--ink-4);
                    border:1px solid var(--card);border-radius:2px;padding:2px 4px; }
      .ofx .oyq i.on { color:var(--gold);border-color:var(--line-gold); }
      .ofx .tg.cp { color:var(--ok); }
      .ofx .ml b { color:var(--ink-hi); }
      .ofx .finv.ph { color:var(--ink-4);font-size:12px; }
      .ofx .prq { display:flex;gap:8px;margin-top:4px; }
      /* [2.1068] 끝 시각 길이 단추 - 프라이빗룸 단추와 같은 모양. 다섯 칸이라 사이와 글자만 좁힌다. */
      .ofx .prq.ofdur .prb { letter-spacing:0;padding:12px 0; }
      .ofx .prq.ofdur .prb.ofmore { font-size:12px; }
      .ofx .prb { flex:1;text-align:center;font-size:13px;font-weight:900;letter-spacing:1px;padding:12px 0;border:1px solid var(--surface-2);border-radius:4px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .prb.on { border-color:var(--line);background:rgba(var(--gold-rgb), .14);color:var(--gold); }
      .ofx .prb.on.no { border-color:#4a4a4a;background:rgba(var(--ink-hi-rgb), .06);color:#d4d4d4; }
      .ofx .prr { display:flex;align-items:baseline;gap:4px;font-size: 12px;font-family:var(--uifont);margin-top:8px;line-height:1.55; }
      .ofx .prr .rd { font-size: 11px;line-height:1; }
      .ofx .prr.free { color:var(--mint); }
      .ofx .prr.tight { color:var(--warn); }
      .ofx .prr.full { color:#ff8a6a; }
      .ofx .prr.wait { color:var(--ink-4); }
      .ofx .prr u { text-decoration:none;color:var(--ink-4); }
      .ofx .warn.hard { border-color:var(--danger-line);border-left-color:var(--danger);background:var(--surface); }
      .ofx .warn.hard b { color:var(--danger-ink); }
      .ofx .warn.hard .wi { color:var(--danger); }
      .ofx .ax.leave { color:var(--purple);border-color:#4a2f6b; }
      .ofx .ax.gone { color:var(--ink-4);border-color:var(--card-up); }
      .ofx .kpi { display:flex;gap:4px; }
      .ofx .kb { flex:1;border:1px solid var(--card-up);border-radius:4px;background:var(--bg);padding:8px 4px;text-align:center; }
      .ofx .kn { display:block;font-size:22px;font-weight:900;color:var(--ok);font-variant-numeric:tabular-nums; }
      .ofx .kn.warn { color:var(--warn); }
      .ofx .kn.bad { color:var(--danger); }
      .ofx .kl { display:block;font-size: 11px;font-weight:900;letter-spacing:.8px;color:var(--ink-4);margin-top:4px;font-family:var(--uifont); }
      .ofx .ob2 { border:1px solid var(--card);background:rgba(var(--card-fill-rgb), .85);border-radius:4px;padding:8px 12px;margin-bottom:4px; }
      .ofx .on3 { display:block;font-size:14px;font-weight:bold;color:var(--ink); }
      .ofx .obt2 { display:block;font-size: 12px;font-weight:900;letter-spacing:.8px;color:var(--warn-soft);margin-top:4px;font-family:var(--uifont); }
      .ofx .obt2.red { color:var(--danger); }
      .ofx .omiss { display:block;font-size: 13px;color:var(--ink-4);margin-top:4px; }
      .ofx .omiss b { color:var(--danger-ink); }
      .ofx .req { font-size: 11px;color:var(--danger);letter-spacing:.5px;margin-left:4px;font-weight:900; }
      /* [2.0739] 휴가 겹쳐보기. 가로축이 날짜인 격자 - 확정 목업 build_leavecal.js ⑨ */
      /* [2.0739] .sub2 / .sb 는 **이미 앱에 있다**(알약 모양). 새로 정의하면 둘이 섞여서
         알약 위에 밑줄이 얹힌다 - 있는 것을 그대로 쓴다.
         다만 기존 .sub2 는 margin-top:-6px 라 위 REFRESH 줄 밑으로 파고든다.
         PEOPLE 자리에서만 여백을 되돌린다. */
      .ofx .sub2.psub { margin-top:4px; }
      /* [2.0739] 작가 휴가 내력 · 분기 한도. 확정 목업 build_lvhist.js ⑪⑫ 그대로.
         .qn 은 이미 앱에 있어 쓰지 않는다 - 이름이 겹치면 두 화면이 서로를 망가뜨린다. */
      .ofx .hhd { display:flex;align-items:center;margin-bottom:8px; }
      .ofx .hn { font-family:"AtSign","Cinzel","Malgun Gothic",sans-serif;font-size:19px;color:var(--ink);display:flex;align-items:center;gap:8px; }
      .ofx .hn i, .ofx .wn i { font-style:normal;font-size: 11px;letter-spacing:.8px;font-family:var(--uifont);padding:2px 4px;border-radius:2px; }
      .ofx .hn i.r, .ofx .wn i.r { color:var(--info-ink);border:1px solid #24505e; }
      .ofx .hn i.g, .ofx .wn i.g { color:var(--purple);border:1px solid #4a2e6b; }
      .ofx .hms { margin-left:auto;font-size: 11px;letter-spacing:.8px;font-family:var(--uifont);color:var(--ok);border:1px solid #1a4a10;border-radius:4px;padding:4px 8px; }
      .ofx .yhd { display:flex;align-items:center;font-weight:800;font-size:14px;color:var(--ink);letter-spacing:1px;margin:2px 0 12px; }
      .ofx .yhd .nav { color:var(--gold);padding:2px 12px;font-size:16px; }
      .ofx .ytot { margin-left:auto;font-size: 12px;color:var(--ink-4);font-family:var(--uifont);letter-spacing:0; }
      .ofx .qbox2 { border:1px solid var(--card-up);border-radius:4px;background:var(--bg);padding:12px 12px; }
      .ofx .qrow { display:flex;align-items:center;gap:8px;padding:4px 0; }
      .ofx .ql { font-size: 11px;font-weight:900;letter-spacing:1px;color:var(--info-ink);font-family:var(--uifont);width:17px; }
      .ofx .qb { flex:1;display:flex;gap:2px; }
      .ofx .hq { flex:1;height:9px;border-radius:2px;background:var(--surface);border:1px solid var(--surface-2); }
      .ofx .hq.on { background:var(--ok);border-color:var(--ok); }
      .ofx .hq.over { background:var(--ember);border-color:var(--ember); }
      .ofx .qleft { font-size: 11px;font-family:var(--uifont);color:var(--ink-4);width:54px;text-align:right; }
      .ofx .qleft.warn { color:var(--warn); }
      .ofx .qleft.bad { color:var(--ember); }
      .ofx .qnote { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);line-height:1.7;margin:8px 2px 0; }
      .ofx .qnote b { color:var(--ink-2); }
      .ofx .hr { display:flex;gap:8px;border:1px solid var(--card);background:rgba(var(--card-fill-rgb), .85);border-radius:4px;padding:8px 8px 8px 0;margin-bottom:4px; }
      .ofx .hbar { width:3px;align-self:stretch;background:#3a2c18;border-radius:4px 0 0 4px; }
      .ofx .hr.ok .hbar { background:var(--ok); }
      .ofx .hr.wait .hbar { background:var(--warn); }
      .ofx .hr.no .hbar { background:var(--line-soft); }
      .ofx .hr.no { opacity:.6; }
      .ofx .hc { display:flex;flex-direction:column;gap:4px;flex:1; }
      .ofx .ht { font-size:13px;color:var(--ink);display:flex;align-items:baseline;gap:8px; }
      .ofx .hd { font-size: 12px;color:var(--danger-ink);font-family:var(--uifont); }
      .ofx .hw { font-size: 12px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .hx { font-size: 11px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .wr { display:flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--surface); }
      .ofx .wn { font-size:12px;color:var(--ink);width:105px;display:flex;align-items:center;gap:4px; }
      .ofx .wb { flex:1;display:flex;gap:2px; }
      .ofx .wr.bad .wn { color:var(--danger-ink); }
      .ofx .wr.warn .wn { color:#ffcf7a; }
      /* 격자에서 이름을 누를 수 있게 */
      .ofx .gn.tap { cursor:pointer;text-decoration:underline;text-decoration-color:var(--card-up);text-underline-offset:2px; }
      .ofx .mhd { display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px;color:var(--ink);letter-spacing:1px;margin:2px 0 8px; }
      .ofx .mhd .nav { color:var(--gold);padding:2px 16px;font-size:16px; }
      .ofx .gwrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }
      .ofx .grid31 { display:grid;gap:2px;min-width:330px; }
      .ofx .gn { font-size: 11px;color:var(--ink-2);font-family:var(--uifont);display:flex;align-items:center;gap:4px;padding-right:4px;height: 21px;overflow:hidden;white-space:nowrap; }
      .ofx .gn i { font-style:normal;font-size: 11px;color:var(--ink-4); }
      .ofx .gn.tot { color:var(--ink-4);font-weight:900;letter-spacing:.8px;font-size: 11px; }
      .ofx .gd { font-size: 11px;color:var(--ink-4);text-align:center;font-variant-numeric:tabular-nums;height: 24px;line-height: 24px;font-family:var(--uifont); }
      .ofx .gd.wk { background:var(--bg); }
      .ofx .gd.td { color:var(--info); }
      .ofx .gc { height:17px;background:var(--bg);border-radius:2px; }
      .ofx .gc.wk { background:var(--bg); }
      .ofx .gc.td { box-shadow:inset 0 0 0 1px rgba(var(--info-rgb), .35); }
      .ofx .gc.on.ok { background:var(--gold); }
      .ofx .gc.on.wait { background:var(--line);box-shadow:inset 0 0 0 1px var(--warn); }
      .ofx .gc.on.s { border-radius:4px 0 0 4px; }
      .ofx .gc.on.e { border-radius:0 4px 4px 0; }
      .ofx .gk { height: 20px;line-height: 20px;text-align:center;font-size: 11px;color:var(--ink-4);font-variant-numeric:tabular-nums;font-family:var(--uifont); }
      .ofx .gk.wk { background:var(--bg); }
      .ofx .gk.full { color:var(--gold); }
      .ofx .gk.over { color:var(--bg);background:var(--ember);border-radius:2px;font-weight:900; }
      .ofx .gt { font-size: 11px;color:var(--ink-4);text-align:right;height: 22px;line-height: 22px;font-variant-numeric:tabular-nums;font-family:var(--uifont); }
      .ofx .mvw { display:flex;gap:0;margin:8px 0 4px;border:1px solid var(--surface-2);border-radius:8px;overflow:hidden; }
      .ofx .mvb { flex:1;text-align:center;padding:8px 4px;font-size: 11px;letter-spacing:.09em;color:var(--ink-4);font-family:var(--uifont);cursor:pointer;background:var(--bg);transition:color .12s,background .12s; }
      .ofx .mvb.on { color:var(--bg);background:#c8b48c;font-weight:800; }
      .ofx .psum { display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 8px; }
      .ofx .pcell { flex:1 1 62px;min-width:62px;border:1px solid var(--card);border-radius:4px;padding:4px 4px;text-align:center;background:var(--bg); }
      .ofx .pcell b { display:block;font-size:16px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums; }
      .ofx .pcell b.warn { color:var(--warn); }
      .ofx .pcell b.bad { color:var(--ember); }
      .ofx .pcell i { display:block;margin-top:4px;font-style:normal;font-size: 11px;letter-spacing:.07em;color:var(--ink-4);font-family:var(--uifont);white-space:nowrap; }
      .ofx .inb .gc { background:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,116,54,.26); }
      .ofx .inb .gc.wk { background:var(--bg); }
      .ofx .inb .gc.wrk { background:#235f47;box-shadow:none; }
      .ofx .inb .gc.wrk.g { background:#2d527d;box-shadow:none; }
      .ofx .inb .gc.td { box-shadow:inset 0 0 0 1px rgba(var(--info-rgb), .45); }
      .ofx .gk.low { color:var(--bg);background:var(--warn);border-radius:2px;font-weight:900; }
      .mkf { margin: 8px 0 2px; text-align: left; }
      .mkl { display:block;font-weight:bold;font-size:12px;margin-bottom:4px;color:var(--ink); }
      .ofx .gn.nost { color:var(--warn); }
      .ofx .gn.nost i { color:var(--warn); }
      .ofx .sw.wrk { background:#235f47; }
      .ofx .sw.wrkg { background:#2d527d; }
      .ofx .sw.none { background:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,116,54,.26); }
      .ofx .lgd { display:flex;gap:12px;margin:12px 2px 0;flex-wrap:wrap; }
      .ofx .lg { display:flex;align-items:center;gap:4px;font-size: 11px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .sw { width:11px;height:8px;border-radius:2px;display:inline-block; }
      .ofx .sw.ok { background:var(--gold); }
      .ofx .sw.wait { background:var(--line);box-shadow:inset 0 0 0 1px var(--warn); }
      .ofx .sw.over { background:var(--ember); }
      .ofx .alert { display:flex;gap:8px;border:1px solid var(--danger-line);background:#1a0805;border-radius:4px;padding:8px 12px;margin-bottom:12px; }
      .ofx .alert .ai { color:#ff6b4a;font-size:12px;line-height:1.5; }
      .ofx .alert b { color:var(--danger-ink);font-size: 13px;font-family:var(--uifont);letter-spacing:.4px;display:block; }
      .ofx .alert .as { color:var(--ink-4);font-size: 12px;font-family:var(--uifont);display:block;margin-top:2px; }
      .ofx .note2 { font-size: 12px;color:var(--ink-4);line-height:1.75;font-family:var(--uifont);border:1px dashed var(--surface-2);border-radius:4px;padding:8px 8px; }
      .ofx .note2 b { color:var(--ink-2); }
      /* [2.0739] 지난 휴가 넣기 - 확정 목업 ⑩ */
      .ofx .bfc { border:1px solid var(--card);border-left:3px solid var(--card-up);border-radius:4px;background:var(--bg);padding:8px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:4px; }
      .ofx .bfc.yes { border-left-color:var(--ok); }
      .ofx .bfc.no { border-left-color:var(--line-soft);opacity:.55; }
      .ofx .bfn { font-size:13px;color:var(--ink);display:flex;align-items:center;gap:4px; }
      .ofx .bfn i { font-style:normal;font-size: 11px;letter-spacing:.8px;font-family:var(--uifont);padding:2px 4px;border-radius:2px; }
      .ofx .bfn i.r { color:var(--info-ink);border:1px solid #24505e; }
      .ofx .bfn i.g { color:var(--purple);border:1px solid #4a2e6b; }
      .ofx .bfd { font-size: 12px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .bfd b { color:var(--danger-ink); }
      .ofx .bfw { font-size: 12px;color:var(--ink-4);font-family:var(--uifont);line-height:1.6; }
      .ofx .bfb { display:flex;gap:4px;margin-top:4px; }
      .ofx .bfy, .ofx .bfx { flex:1;text-align:center;font-size: 11px;font-weight:900;letter-spacing:.9px;font-family:var(--uifont);padding:8px 0;border-radius:4px;border:1px solid var(--surface-2);color:var(--ink-4); }
      .ofx .bfy.on { color:#0a1a00;background:var(--ok);border-color:var(--ok); }
      .ofx .bfx.on { color:var(--ink);background:#3a2a20;border-color:var(--line-soft); }
      .ofx .bfoot { display:flex;align-items:center;gap:8px;padding:12px 0 4px;margin-top:4px;border-top:1px solid var(--card); }
      .ofx .bfs { font-size: 12px;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .bfg { margin-left:auto;font-size: 11px;font-weight:900;letter-spacing:1px;font-family:var(--uifont);padding:8px 16px;border-radius:4px; }
      .ofx .bfg.dead { color:#4a3f33;border:1px solid var(--surface-2); }
      .ofx .bfg.go { color:#0a1a00;background:var(--ok);border:1px solid var(--ok); }
      .ofx .alt { border:1px solid var(--card-up);border-radius:4px;background:var(--bg);padding:8px 12px;margin-top:12px; }
      .ofx .altt { font-size: 11px;font-weight:900;letter-spacing:1.4px;color:var(--warn-soft);font-family:var(--uifont);margin-bottom:8px; }
      .ofx .altr { display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--surface); }
      .ofx .altr:last-child { border-bottom:none; }
      .ofx .altd { flex:1;font-size:13px;color:var(--ink); }
      .ofx .altn { font-size: 12px;font-weight:900;color:var(--ink-4);font-family:var(--uifont); }
      .ofx .altn.ok { color:var(--ok); }
      .ofx .altb { font-size: 11px;font-weight:900;letter-spacing:.8px;color:var(--gold);border:1px solid var(--line);border-radius:2px;padding:4px 8px;font-family:var(--uifont); }
      .ofx .pushy { font-size: 12px;color:var(--danger-ink);margin-top:4px; }
      .ofx .pushy b { color:var(--ink-hi); }
      .ofx .tabs { display:flex;gap:4px;margin-bottom:12px; }
      .ofx .tb { flex:1;text-align:center;font-size: 12px;font-weight:900;letter-spacing:1.2px;padding:8px 0;border:1px solid var(--card-up);border-radius:2px;background:var(--card);color:#9c9284;font-family:var(--uifont); }
      .ofx .tb.on { border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb), .08); }
      .ofx .sub2 { display:flex;gap:4px;margin:-6px 0 12px; }
      .ofx .sb { font-size: 11px;font-weight:900;letter-spacing:1px;padding:4px 12px;border-radius:8px;border:1px solid var(--surface-2);color:var(--ink-4);font-family:var(--uifont); }
      .ofx .sb.on { border-color:var(--info-ink);color:var(--info-ink); }
      /* 아티스트 고르개 - 확정 목업 mockups/build_picker.js 그대로 */
      .pk{background:var(--bg);border:2px solid var(--gold-line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;}
      .pk.m{max-width:420px;margin:0 auto;height:560px;}
      .pkh{display:flex;align-items:center;color:var(--gold);font-weight:800;letter-spacing:2px;font-size:14px;padding:12px 16px 12px;border-bottom:1px solid var(--card-up);flex-shrink:0;}
      .pkx{margin-left:auto;color:var(--ink-4);font-size:13px;}
      .pks{display:flex;align-items:center;gap:8px;margin:12px 16px;padding:0 8px;background:var(--bg);border:1px solid var(--gold-line);border-radius:2px;flex-shrink:0;}
      .pksi{color:var(--ink-4);font-size:13px;}
      .pksin{flex:1;background:none;border:0;outline:0;color:var(--gold);font-size:14px;padding:12px 0;font-family:inherit;}
      .pksin::placeholder{color:var(--ink-4);}
      .pkl{flex:1;min-height:0;overflow-y:auto;padding:0 8px 8px;}
      .pkl::-webkit-scrollbar{width:4px;}
      .pkl::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px;}
      .ar{display:flex;align-items:center;gap:8px;padding:12px 8px;border-bottom:1px solid var(--card);font-size:16px;color:var(--ink);cursor:pointer;}
      .ar:active{filter:brightness(1.3);}
      .ar.sel{background:rgba(var(--gold-rgb), .09);border-left:3px solid var(--gold);padding-left:8px;}
      .ar.sel .arn{color:var(--gold);font-weight:bold;}
      .arn{flex:1;}
      .argst{font-size: 11px;font-weight:900;color:var(--warn-soft);border:1px solid var(--line-gold);border-radius:2px;padding:2px 4px;letter-spacing:.5px;font-family:var(--uifont);}
      .arck{color:var(--gold);font-size:14px;}
      .argrp{font-size: 12px;color:var(--ink-4);letter-spacing:2px;font-weight:bold;font-family:var(--uifont);padding:12px 8px 4px;border-bottom:1px solid var(--card);}
      .pkempty{padding:24px 8px;text-align:center;color:var(--ink-4);font-size:13px;font-family:var(--uifont);}
      .tline { display: flex; align-items: center; gap: 4px; margin: 8px 0 4px; font-family: var(--uifont); }
      .tl-time { font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
      .tl-lab { font-size: 11px; font-weight: 900; letter-spacing: 1px; padding: 2px 4px; border-radius: 2px; }
      .tl-bar { flex: 1; height: 0; }
      .tline-in .tl-time { color: var(--gold); }
      .tline-in .tl-lab { background: rgba(var(--gold-rgb), 0.15); color: var(--gold); border: 1px solid var(--line); }
      .tline-in .tl-bar { border-top: 1px solid var(--line); }
      .tline-out .tl-time { color: var(--ink-4); }
      .tline-out .tl-bar { border-top: 1px dashed var(--card-up); }
      .tline-now .tl-time { color: var(--info); font-size: 11px; }
      .tline-now .tl-bar { border-top: 2px solid var(--info); box-shadow: 0 0 6px rgba(var(--info-rgb), 0.6); }
      .fab { position: fixed; right: 12px; bottom: 14px; width: 50px; height: 50px; border-radius: 50%;
        background: var(--gold); color: var(--surface-2); font-size: 26px; font-weight: 900; text-align: center;
        line-height: 50px; box-shadow: 0 4px 14px rgba(var(--gold-rgb), 0.45); font-family: var(--uifont); z-index: var(--z-fab); }
      @media screen and (max-width: 768px) { .fab { bottom: 68px; } }
      body.tv-mode .fab, body.open-locked .fab { display: none; }
      .day-col.menu-open { z-index: var(--z-menu-host); }
      .slot-menu-dropdown .cancel-btn,
      .slot-menu-dropdown .transfer-btn,
      .slot-menu-dropdown .undo-btn,
      /* [2.0739] 작가 슬롯의 Transfer/CANCEL 도 같은 상자에 들어간다 - 모양을 맞춘다. */
      .slot-menu-dropdown .admin-btn,
      .slot-menu-dropdown .transfer-btn,
      .slot-menu-dropdown .cancel-btn { min-height: 40px; padding: 0 12px; font-size: 12px;
        display: flex; align-items: center; justify-content: center; margin: 0; }
      /* [2.1071] 당일 마감 안내 - 사고가 아니라 규칙이라 조용한 회색으로 둔다(.lock-notice 와 다르다). */
      .cut-note { color: var(--ink-4); font-size: 11px; margin-top: 4px; text-align: center; line-height: 1.3; }
      .lock-notice { background: rgba(255, 69, 0, 0.15); border: 1px solid #ff4500; color: var(--danger-ink); font-size: 12px; padding: 4px; border-radius: 2px; margin-top: 4px; text-align: center; line-height: 1.3; font-weight: bold; }
      /* 2.0387(A4): 연결 배지 - 하단 내비 바로 위 고정(사장님: 배지 디자인 + 위치 B).
         서버 재시도(빨강, 점 깜빡임)와 오프라인(주황, "마지막 화면 표시 중") 구분.
         성공 토스트(bottom 24px)와 높이가 달라 겹치지 않음. */
      .offline-bar { display: flex; align-items: center; gap: 8px;
        background: linear-gradient(90deg, #4a2c00, #7a4a00); border: 1px solid var(--orange-2);
        border-radius: 4px; padding: 8px 12px; margin: 0 0 8px;
        font-size: 13px; color: #ffdfb8; line-height: 1.5; }
      .offline-bar b { color: var(--ink-hi); }
      .offline-bar .ob-ic { font-size: 14px; line-height: 1; }
      .offline-bar .ob-t { flex: 1; min-width: 0; }
      .offline-bar .ob-rt { flex: 0 0 auto; min-height: 34px; padding: 0 12px;
        background: var(--gold); color: var(--card); border: 0; border-radius: 4px;
        font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer;
        white-space: nowrap; }
      .offline-bar .ob-rt:active { transform: scale(0.97); }
      #shiftsContainer.roster-stale { opacity: 0.55; }
      .offline-empty { border: 1px dashed rgba(var(--orange-2-rgb), 0.5); border-radius: 8px;
        background: rgba(74,44,0,0.25); padding: 24px 16px; text-align: center;
        margin-top: 8px; }
      .offline-empty .oe-ic { font-size: 30px; margin-bottom: 8px; }
      .offline-empty .oe-t { font-size: 13px; color: #ffdfb8; font-weight: bold;
        margin-bottom: 8px; line-height: 1.5; }
      .offline-empty .oe-d { font-size: 12px; color: var(--ink-3); line-height: 1.7; }
      .network-status { position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%); z-index: var(--z-net); display: none; font-size: 12px; font-weight: bold; color: #ffb8b8; background: rgba(60,10,10,0.94); border: 1px solid rgba(var(--danger-rgb), 0.6); border-radius: 14px; padding: 4px 12px; white-space: nowrap; box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.5); }
      .network-status .net-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-right: 4px; animation: netBlink 1.2s ease-in-out infinite; vertical-align: middle; }
      @keyframes netBlink { 50% { opacity: 0.25; } }
      .network-status.off { color: #ffd9ad; border-color: rgba(var(--orange-2-rgb), 0.6); background: rgba(60,35,10,0.94); }
      .network-status.off .net-dot { background: var(--orange-2); animation: none; }
      @media (prefers-reduced-motion: reduce) { .network-status .net-dot { animation: none; } }
      body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
      .chat-readmore { display: inline-block; font-size: 11px; letter-spacing: 0.06em; color: var(--gold);
        background: rgba(232,179,57,0.10); border: 1px solid var(--gold); border-radius: 2px;
        padding: 0 8px; margin-left: 2px; cursor: pointer; vertical-align: baseline;
        font-family: inherit; line-height: 1.5; }
      .chat-readmore:hover { background: rgba(232,179,57,0.22); }
      .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--shadow-rgb), 0.85); display: none; justify-content: center; align-items: center; z-index: var(--z-modal); padding: 12px; }
      #genericConfirmModal, #confirmModal, #cancelConfirmModal,
      #noShowConfirmModal, #lateConfirmModal, #removeConfirmModal { z-index: var(--z-modal-3); }
      #bookingModal { z-index: var(--z-modal-2); }
      .modal-content { background: var(--bg); border: 2px solid var(--gold-line); border-radius: 4px; width: 100%; max-width: 500px; padding: 20px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
      .modal-title { flex-shrink: 0; font-size: 16px; font-weight: bold; color: var(--gold); margin-bottom: 12px; border-bottom: 1px solid var(--gold-line); padding-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
      .modal-scroll-body { overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), 0.35) transparent; }
      /* MY PAGE 는 탭마다 내용 길이가 크게 달라(TITLES 는 길고 MY ROSTER 는 한 줄) 탭 전환 시
         모달 전체가 훅 줄어드는 게 어색하다는 지적 - 최소 높이를 고정해 탭 전환 중엔 안 흔들리게 */
      #myShiftsModal .modal-scroll-body { min-height: 60vh; }
      .modal-scroll-body::-webkit-scrollbar { width: 6px; }
      .modal-scroll-body::-webkit-scrollbar-track { background: transparent; }
      .modal-scroll-body::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.35); border-radius: 8px; }
      .modal-scroll-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.55); }
      html { scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), 0.35) transparent; }
      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.35); border-radius: 8px; }
      ::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.55); }
      .stat-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
      .stat-table th, .stat-table td { border: 1px solid var(--card-up); padding: 8px; text-align: left; font-size: 12px; }
      .stat-table th { background: var(--card); color: var(--gold); font-weight: bold; }
      .rk-cell { display: flex; align-items: center; gap: 8px; }
      .rk-track { position: relative; flex: 1; min-width: 40px; height: 8px;
                  background: var(--card-up); border-radius: 2px; overflow: visible; }
      .rk-bar { height: 100%; background: var(--gold-line); border-radius: 2px; }
      .rk-bar.me { background: var(--gold); }
      .rk-avg { position: absolute; top: -4px; bottom: -4px; width: 0;
                border-left: 1px dashed var(--ink-3); }
      .rk-num { min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
      .tw-input, .tw-textarea, .tw-select { width: 100%; padding: 8px; background: var(--bg); border: 1px solid var(--gold-line); color: var(--gold); font-size: 13px; border-radius: 2px; margin-top: 8px; }
      .tw-textarea { height: 80px; resize: none; }
      .transfer-banner { background: linear-gradient(90deg, #002b3d, var(--info-bg)); border: 1px solid var(--info); padding: 8px; margin-bottom: 8px; border-radius: 4px; box-shadow: 0 0 10px rgba(var(--info-rgb), 0.3); }
      .title-earned-banner { background: linear-gradient(90deg, var(--surface-2), #6e4b00); border: 1px solid var(--gold); padding: 8px; margin-bottom: 8px; border-radius: 4px; box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.3); }
      .nav-btn-row { display: flex; justify-content: center; margin-bottom: 8px; }
      .nav-btn-row .tw-btn { white-space: nowrap; }
      /* 2.0416: 21시 오픈 직전에는 주차 이동을 막는다(사장님 지시). 눌리긴 하되 흐리게 -
         눌렀을 때 이유를 토스트로 알려주는 편이 "왜 안 눌리지"보다 낫다. */
      body.open-locked .btn-prev-week, body.open-locked .top-week-btn { opacity: 0.4; }
      /* 2.0416: 오픈 직전 15초는 **열리는 날짜 하나만** 화면에 남긴다(사장님 지시).
         스크롤 자체를 얼면 그 날 카드가 한 화면보다 길어 EVENING 을 못 잡으므로,
         얼지 않고 "갈 곳을 없애는" 방식을 쓴다. 21:00 에 클래스가 풀리며 원래대로 돌아온다. */
      body.open-locked .day-col:not(.opening-day) { display: none; }
      body.open-locked .opening-day { animation: openFocusPulse 1s ease-in-out infinite alternate; }
      @keyframes openFocusPulse { from { box-shadow: inset 0 0 10px rgba(var(--shadow-rgb), 0.8); } to { box-shadow: inset 0 0 10px rgba(var(--shadow-rgb), 0.8), 0 0 14px rgba(var(--gold-rgb), 0.55); } }
      .shift-board-label { text-align: center; font-weight: bold; font-size: 16px; color: var(--gold); letter-spacing: 1px; margin-bottom: 2px; }
      /* 2.0390(A9): 마지막 갱신 시각 - 주차 라벨 바로 아래 전용 줄(사장님: 2-B).
         min-height 로 자리를 항상 확보해 갱신 순간 레이아웃이 안 튄다. TV 는 숨김. */
      .sync-time-line { text-align: center; font-size: 12px; color: var(--ink-3); opacity: 0.85; letter-spacing: 0.5px; margin-bottom: 4px; min-height: 15px; font-variant-numeric: tabular-nums; }
      body.tv-mode .nav-btn-row, body.tv-mode .shift-board-label, body.tv-mode .sync-time-line { display: none !important; }
      .activity-log-panel { background: linear-gradient(90deg, var(--surface), var(--surface-2)); border: 1px solid var(--gold-line); padding: 8px; margin-bottom: 8px; border-radius: 4px; }
      .tv-rankings-panel { background: linear-gradient(90deg, var(--surface), var(--surface-2)); border: 1px solid var(--gold-line); padding: 8px; margin-bottom: 12px; border-radius: 4px; }
      .tv-rankings-title { font-weight: bold; color: var(--gold); margin-bottom: 8px; font-size: 12px; letter-spacing: 1px; border-left: 3px solid var(--gold); padding-left: 4px; }
      .tv-rank-item { font-size: 13px; padding: 4px 0; border-top: 1px solid rgba(var(--gold-line-rgb), 0.2); display: flex; justify-content: space-between; gap: 8px; }
      .tv-rank-item:first-child { border-top: none; }
      .tv-rank-count { opacity: 0.7; font-size: 12px; white-space: nowrap; }
      .activity-log-title { font-weight: bold; color: var(--gold); margin-bottom: 8px; font-size: 12px; letter-spacing: 1px; border-left: 3px solid var(--gold); padding-left: 4px; }
      .activity-log-item { font-size: 12px; padding: 4px 0; border-top: 1px solid rgba(var(--gold-line-rgb), 0.2); display: flex; justify-content: space-between; gap: 8px; }
      .activity-log-text { white-space: pre-line; }
      .self-highlight { color: var(--gold) !important; font-weight: 800; }
      .activity-log-item:first-child { border-top: none; }
      .bkclash { margin-top: 12px; border: 1px solid #6b2020; background: rgba(255,60,60,0.09); border-radius: 4px; padding: 8px 12px; text-align: left; }
      .bkclash b { display: block; color: #ff8f8f; font-size: 12px; letter-spacing: 0.4px; margin-bottom: 4px; }
      .bkclash span { display: block; font-size: 13px; color: var(--ink-hi); }
      .bkclash i { display: block; font-style: normal; font-size: 13px; color: #c9b79a; margin-top: 4px; }
      .activity-log-time { opacity: 0.75; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
      .ac-x { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid rgba(var(--gold-rgb), 0.45); border-radius: 8px; font-size: 11px; letter-spacing: 0.4px; color: var(--gold); opacity: 0.85; }
      .activity-log-more-btn { background: none; border: none; color: var(--info); font-size: 12px; cursor: pointer; padding: 4px 0 0 0; text-decoration: underline; }
      .chat-panel { background: linear-gradient(90deg, var(--surface), var(--surface-2)); border: 1px solid var(--gold-line); padding: 8px; margin-bottom: 8px; border-radius: 4px; }
      .chat-title { font-weight: bold; color: var(--gold); margin-bottom: 8px; font-size: 12px; letter-spacing: 1px; border-left: 3px solid var(--gold); padding-left: 4px; }
      .chat-item { font-size: 12px; padding: 4px 0; border-top: 1px solid rgba(var(--gold-line-rgb), 0.15); }
      .chat-item:first-child { border-top: none; }
      .chat-pending { opacity: 0.55; font-style: italic; }
      .chat-time { opacity: 0.75; }
      .chat-mention { color: var(--info); font-weight: bold; }
      :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
      :focus:not(:focus-visible) { outline: none; }
      .artists-search-box input:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
      .tv-mode :focus-visible { outline: none; }
      @font-face {
        font-family: "AtSign";
        src: local("Arial"), local("Helvetica Neue"), local("Helvetica"),
             local("Segoe UI"), local("Malgun Gothic"), local("Apple SD Gothic Neo");
        unicode-range: U+0040;
      }
      .at-sign { font-family: Arial, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
      .megaphone-text .at-sign { color: var(--gold); -webkit-text-fill-color: var(--gold); }
      body:not(.tv-mode) #chatList { max-height: 160px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
      body:not(.tv-mode) #chatList::-webkit-scrollbar { width: 8px; }
      body:not(.tv-mode) #chatList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
      body:not(.tv-mode) #chatList::-webkit-scrollbar-track { background: transparent; }
      body:not(.tv-mode) #activityLogList { max-height: 160px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
      body:not(.tv-mode) #activityLogList::-webkit-scrollbar { width: 8px; }
      body:not(.tv-mode) #activityLogList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
      body:not(.tv-mode) #activityLogList::-webkit-scrollbar-track { background: transparent; }
      @media (max-width: 768px) { body:not(.tv-mode) #megaphoneArchiveList { max-height: 160px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } }
      body:not(.tv-mode) #megaphoneArchiveList::-webkit-scrollbar { width: 8px; }
      body:not(.tv-mode) #megaphoneArchiveList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
      body:not(.tv-mode) #megaphoneArchiveList::-webkit-scrollbar-track { background: transparent; }
      .chat-more-btn { background: none; border: none; color: var(--info); font-size: 12px; cursor: pointer; padding: 4px 0 0 0; text-decoration: underline; }
      .chat-quota-line { font-size: 12px; opacity: 0.8; margin-top: 8px; }
      .chat-quota-line b { color: var(--gold); }
      .chat-input-row { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
      .chat-input-row textarea { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--gold-line); color: var(--gold); padding: 4px 8px; border-radius: 2px; font-size: 12px; font-family: inherit; resize: none; }
      .chat-input-row textarea:disabled { opacity: 0.5; }
      .chat-input-footer { display: flex; justify-content: space-between; align-items: center; }
      .chat-char-count { font-size: 12px; opacity: 0.75; white-space: nowrap; }
      .megaphone-panel { background: linear-gradient(90deg, var(--surface), var(--surface-2)); border: 1px solid var(--gold-line); padding: 8px; margin-bottom: 8px; border-radius: 4px; }
      .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                    width: 100%; min-height: 34px; padding: 4px 2px; margin: 0 0 4px;
                    background: none; border: 0; cursor: pointer; font-family: inherit;
                    text-align: left; -webkit-tap-highlight-color: transparent; }
      .panel-head:hover { background: rgba(var(--gold-rgb), 0.05); border-radius: 4px; }
      .panel-head:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; border-radius: 4px; }
      .panel-head > span:first-child { margin-bottom: 0 !important; }
      .panel-head-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
      .panel-act { font-size: 12px; color: var(--ink-4); letter-spacing: 0.3px; }
      .panel-chv { font-size: 11px; color: #8b7856; }
      .panel-badge { background: #c9302c; color: var(--ink-hi); border-radius: 8px; padding: 0 4px;
                     font-size: 11px; font-weight: bold; line-height: 18px; }
      .panel-badge.quiet { background: #3a2c14; color: var(--gold-line); }
      .pl-list { margin-top: 8px; }
      .aa-bar { display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
      .aa-pill { border:1px solid var(--card-up); border-radius:999px; padding:4px 12px;
        font-size: 12px; color:var(--ink-3); cursor:pointer; }
      .aa-pill.on { border-color:var(--gold); color:var(--gold); background:rgba(var(--gold-rgb), .08); font-weight:700; }
      .aa-srch { flex:1; min-width:140px; border:1px solid var(--card-up); border-radius:4px;
        padding:4px 8px; font-size: 13px; color:var(--ink); background:var(--bg); font-family:inherit; }
      .aa-who { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px; }
      .aa-who span { border:1px solid var(--card); border-radius:4px; padding:4px 8px;
        font-size: 12px; color:var(--ink-3); cursor:pointer; }
      .aa-who span.on { border-color:var(--purple-2); color:#e9d7ff; background:rgba(var(--purple-2-rgb), .12);
        font-weight:700; }
      .aa-who span b { color:var(--ink-4); font-weight:400; margin-left:4px; font-size: 12px; }
      .aa-who span i { color:#ff8f8f; font-style:normal; margin-left:4px; font-size: 12px; }
      .aa-day { font-size: 11px; letter-spacing:1.6px; font-weight:800; color:var(--ink-4);
        padding:12px 2px 4px; }
      .aa-row { display:flex; gap:8px; padding:8px 4px;
        border-bottom:1px solid rgba(var(--ink-hi-rgb), .05); }
      .aa-row .aa-tm { flex:none; width:42px; font-size: 12px; color:var(--ink-4);
        padding-top:2px; font-variant-numeric:tabular-nums; }
      .aa-row .aa-ic { flex:none; width:17px; text-align:center; font-size:12px; padding-top:2px; }
      .aa-row .aa-bd { flex:1; min-width:0; }
      .aa-row .aa-t1 { font-size:13px; font-weight:700; color:var(--ink); }
      .aa-row .aa-t2 { font-size: 13px; color:var(--ink-3); margin-top:2px; line-height:1.5;
        word-break:break-word; white-space:pre-wrap; }
      .aa-row .aa-rc { flex:none; font-size: 12px; padding-top:4px; }
      .aa-nm { display:inline-block; border:1px solid var(--purple-line); border-radius:4px;
        padding:0 4px; font-size: 12px; color:var(--purple); margin:2px 4px 0 0; }
      .aa-row.miss { background:rgba(var(--danger-rgb), .05); }
      .pl-row { display: grid; grid-template-columns: 11px 84px 1fr auto; align-items: baseline;
                gap: 8px; font-size: 13px; padding: 4px 0 4px; border-top: 1px solid var(--surface-2); }
      .pl-row .pl-dot { font-size: 11px; line-height: 1.4; }
      .pl-t { color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
      .pl-ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .pl-n { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
      .pl-body { font-size: 12px; color: var(--ink); line-height: 1.5; padding: 0 0 4px 102px;
        word-break: break-word; }
      .pl-sub { font-size: 12px; color: var(--ink-4); padding: 0 0 4px 102px; }
      .ap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
      .ap-mini { font-size: 12px; padding: 4px 8px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(var(--gold-line-rgb), 0.5); background: var(--surface); color: var(--ink-3); user-select: none; }
      .ap-mini:active { color: var(--gold); background: rgba(var(--gold-rgb), 0.12); }
      .ap-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
      .ap-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--gold); background: rgba(var(--gold-rgb), 0.12); color: var(--gold); border-radius: 8px; padding: 2px 4px 2px 8px; font-size: 12px; cursor: pointer; user-select: none; }
      .ap-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid rgba(var(--gold-line-rgb), 0.5); border-radius: 4px; padding: 8px 8px; margin: 2px 0 8px; }
      .ap-search input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font: inherit; font-size: 12px; }
      .ap-search input::placeholder { color: #8b7856; }
      .ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; max-height: 176px; overflow-y: auto; }
      .ap-who { display: flex; align-items: center; gap: 4px; border: 1px solid rgba(var(--gold-line-rgb), 0.2); border-radius: 4px; padding: 4px 8px; font-size: 13px; cursor: pointer; user-select: none; background: var(--bg); color: var(--ink-3); }
      .ap-who .bx { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 2px; border: 1px solid rgba(var(--gold-line-rgb), 0.45); position: relative; }
      .ap-who.on { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.10); color: var(--ink); }
      .ap-who.on .bx { background: var(--gold); border-color: var(--gold); }
      .ap-who.on .bx::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3px; height: 7px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(42deg); }
      .ap-who.off { opacity: 0.42; cursor: not-allowed; border-style: dashed; border-color: rgba(var(--gold-line-rgb), 0.16); }
      .ap-who.off .bx { border-style: dashed; }
      .ap-lock { margin-left: auto; font-size: 11px; }
      .ap-cant { margin-top: 8px; font-size: 12px; color: var(--ink-4); border-top: 1px solid rgba(var(--gold-line-rgb), 0.14); padding-top: 8px; }
      .ap-lab { font-size: 12px; color: var(--ink-3); margin: 8px 0 4px; letter-spacing: .5px; }
      .ap-f { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid rgba(var(--gold-line-rgb), 0.3); border-radius: 4px; padding: 8px 8px; font: inherit; font-size: 12px; resize: none; }
      .ap-cnt { text-align: right; font-size: 12px; color: var(--ink-4); margin-top: 2px; }
      .ap-prev { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
      .ap-prev-h { font-size: 11px; color: var(--ink-4); letter-spacing: .5px; margin-bottom: 4px; }
      .ap-prev-t { font-size: 13px; font-weight: 700; color: var(--ink); word-break: break-word; }
      .ap-prev-b { font-size: 12px; color: var(--ink); line-height: 1.5; word-break: break-word; margin-top: 2px; }
      .ap-prev .ap-hid { color: var(--ink-4); }
      .ap-prev-n { font-size: 11px; color: var(--ink-4); margin-top: 4px; }
      .ap-prev-n b { color: var(--warn); }
      .cuj-h { font-size: 12px; color: var(--gold); letter-spacing: 1px; margin: 12px 0 4px; font-weight: 700; }
      .cuj-r { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
      .cuj-n { font-size: 13px; color: var(--ink); }
      .cuj-n span { display: block; font-size: 11px; color: var(--ink-4); }
      .cuj-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
      .cuj-g { font-size: 11px; color: var(--ink-4); white-space: nowrap; }
      .ap-send { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(var(--gold-line-rgb), 0.14); }
      .ap-sum { font-size: 12px; color: var(--ink-3); flex: 1; }
      .ap-btn { border: 1px solid var(--gold); background: rgba(var(--gold-rgb), 0.12); color: var(--gold); font-weight: 700; font-size: 12px; letter-spacing: 1px; padding: 8px 16px; border-radius: 4px; cursor: pointer; user-select: none; }
      .ap-btn.dis { opacity: 0.35; cursor: not-allowed; pointer-events: none; border-color: rgba(var(--gold-line-rgb), 0.28); color: var(--ink-3); background: none; }
      .ap-nohit { font-size: 13px; color: var(--ink-4); padding: 8px 2px; }
      .pl-sub.bad { color: #e06c6c; }
      .panel-collapsed .megaphone-item, .panel-collapsed .chat-item,
      .panel-collapsed .activity-log-item { border-bottom: 0; }
      .panel-empty-hint { font-size: 12px; color: #8b7856; padding: 2px 2px 4px; }
      body.open-locked #megaphoneContainer,
      body.open-locked #chatContainer,
      body.open-locked #activityLogContainer,
      body.open-locked #tvRankingsContainer,
      body.open-locked #transferBannerContainer,
      body.open-locked #titleBannerContainer,
      body.open-locked #pcTimeline,
      body.open-locked #offerContainer,
      body.open-locked .past-day-bar { display: none !important; }
      body.open-locked .app-nav-row { opacity: 0.28; pointer-events: none; }
      body.open-locked .mobile-bottom-nav { opacity: 0.4; pointer-events: none; }
      .open-prep { display: none; }
      body.open-locked .open-prep { display: block; border: 1px solid var(--gold); border-radius: 8px;
        margin-bottom: 8px; padding: 12px 12px; background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.13), rgba(var(--gold-rgb), 0.03));
        box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.14); animation: openPrepIn 0.4s ease both; }
      @keyframes openPrepIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
      .open-prep .opp-t { font-size: 13px; font-weight: bold; color: var(--gold); letter-spacing: 0.3px; }
      .open-prep .opp-b { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.6; }
      .open-prep .opp-b b { color: var(--ink); }
      .open-prep .opp-w { font-size: 12px; color: var(--ink-3); margin-top: 4px; padding-top: 4px;
        border-top: 1px solid rgba(var(--gold-rgb), 0.18); line-height: 1.55; }
      .open-prep .opp-r { margin-top: 8px; display: flex; align-items: baseline; justify-content: space-between; }
      .open-prep .opp-rd { font-size: 12px; font-weight: bold; color: var(--ink); letter-spacing: 1px; }
      .open-prep .opp-cd { font-family: ui-monospace, Menlo, monospace; font-size: 26px; font-weight: bold;
        color: var(--gold); text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.55); font-variant-numeric: tabular-nums; }
      .megaphone-title { font-weight: bold; color: var(--gold); margin-bottom: 8px; font-size: 12px; letter-spacing: 1px; border-left: 3px solid var(--gold); padding-left: 4px; }
      .megaphone-item { font-size: 12px; padding: 4px 0; border-top: 1px solid rgba(var(--gold-line-rgb), 0.2); display: flex; justify-content: space-between; gap: 8px; }
      .megaphone-item:first-child { border-top: none; }
      .feed-del { flex: 0 0 auto; margin-left: 4px; font-size: 12px; line-height: 1; color: #8b7856; cursor: pointer; padding: 2px 4px; border-radius: 4px; user-select: none; }
      .feed-del:hover, .feed-del:active { color: var(--danger); background: rgba(var(--danger-rgb), 0.12); }
      .slot-lock { float: right; font-size: 12px; line-height: 1; color: #8b7856; cursor: pointer; padding: 2px 4px; border-radius: 4px; user-select: none; }
      .slot-lock:hover, .slot-lock:active { color: var(--gold); background: rgba(var(--gold-rgb), 0.12); }
      .slot-card.closed-slot { border-style: dashed; opacity: 0.65; }
      .chat-item .feed-del { float: right; }
      .megaphone-item.admin-slot { position: relative; overflow: hidden; border: 1px solid #ff6a00; border-radius: 4px; padding: 4px 4px; margin-bottom: 4px; background: rgba(var(--mega-rgb), 0.08); animation: megaphonePulseOrange 3s ease-in-out infinite; animation-delay: var(--fx-delay, 0s); }
      .megaphone-item.active-slot { position: relative; overflow: hidden; border: 1px solid var(--gold); border-radius: 4px; padding: 4px 4px; margin-bottom: 4px; background: rgba(var(--gold-rgb), 0.06); animation: megaphonePulseGold 3s ease-in-out infinite; animation-delay: var(--fx-delay, 0s); }
      .megaphone-item.champ-slot { position: relative; overflow: hidden; border: 1px solid var(--gold); border-radius: 4px; padding: 4px 4px; margin-bottom: 4px; background: rgba(var(--gold-rgb), 0.13); animation: megaphonePulseGold 2.4s ease-in-out infinite; animation-delay: var(--fx-delay, 0s); }
      .megaphone-item.champ-slot .megaphone-text { color: var(--gold); font-weight: bold; }
      .megaphone-item.admin-slot::before, .megaphone-item.active-slot::before {
        content: ""; position: absolute; top: 0; left: -20%; width: 14%; height: 100%;
        background:
          radial-gradient(circle at 30% 25%, rgba(var(--ink-hi-rgb), 0.22) 0%, transparent 18%),
          radial-gradient(circle at 65% 65%, rgba(var(--ink-hi-rgb), 0.18) 0%, transparent 14%),
          radial-gradient(circle at 45% 45%, rgba(var(--ink-hi-rgb), 0.14) 0%, transparent 22%),
          linear-gradient(90deg, transparent, rgba(var(--ink-hi-rgb), 0.06), transparent);
        animation: megaphoneShine 7.5s ease-in-out infinite; animation-delay: var(--fx-delay, 0s); pointer-events: none;
      }
      .megaphone-item.admin-slot .megaphone-text, .megaphone-item.active-slot .megaphone-text {
        background: linear-gradient(90deg, #fff5cc, var(--gold), #fff5cc);
        background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
        animation: megaphoneTextShimmer 3.5s ease-in-out infinite; animation-delay: var(--fx-delay, 0s);
      }
      /* 셰이머(background-clip:text)는 부모 span 안 모든 글자에 적용되는데, 이모지는 고유 색을
         가진 글리프라 같이 덧씌워지면 누렇게 뜬다 - wrapEmojis() 가 감싸는 .msg-emoji(및 이미
         .slot-emoji 로 한 번 더 감싸져 있는 장착 이모지)만 배경/색을 리셋해 원래 이모지 색이 살아남. */
      .megaphone-text .msg-emoji, .megaphone-text .slot-emoji {
        background: none; -webkit-background-clip: initial; background-clip: initial;
        -webkit-text-fill-color: initial; color: initial; animation: none;
      }
      @keyframes megaphonePulseOrange { 0%, 100% { box-shadow: 0 0 4px rgba(var(--mega-rgb), 0.25); } 50% { box-shadow: 0 0 12px rgba(var(--mega-rgb), 0.6); } }
      @keyframes megaphonePulseGold { 0%, 100% { box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.2); } 50% { box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.55); } }
      @keyframes megaphoneShine { 0% { left: -20%; } 30% { left: 106%; } 100% { left: 106%; } }
      @keyframes megaphoneTextShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
      .megaphone-item.megaphone-empty-slot { opacity: 0.4; font-style: italic; }
      .megaphone-countdown { color: var(--gold); font-weight: bold; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
      /* 카운트다운이 있는 상단 슬롯은 세로 배치 - 메시지가 전체 폭을 쓰고 남음 시간은 아래 줄 오른쪽
         (폭 좁은 화면에서 첫 줄이 카운트다운에 밀려 꺾이던 가독성 문제 해결, 아카이브 타임스탬프와 동일한 위치 언어) */
      .megaphone-item.admin-slot, .megaphone-item.active-slot { flex-direction: column; gap: 2px; }
      .megaphone-item.admin-slot .megaphone-countdown, .megaphone-item.active-slot .megaphone-countdown { align-self: flex-end; }
      .megaphone-archive-time { opacity: 0.75; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
      .megaphone-more-btn { background: none; border: none; color: var(--info); font-size: 12px; cursor: pointer; padding: 4px 0 0 0; text-decoration: underline; }
      .megaphone-quota-line { font-size: 12px; opacity: 0.8; margin-top: 8px; }
      .megaphone-quota-line b { color: var(--gold); }
      .megaphone-input-row { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
      .megaphone-input-row textarea { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--gold-line); color: var(--gold); padding: 4px 8px; border-radius: 2px; font-size: 12px; font-family: inherit; resize: none; }
      .megaphone-input-row textarea:disabled { opacity: 0.5; }
      .megaphone-input-footer { display: flex; justify-content: space-between; align-items: center; }
      .megaphone-char-count { font-size: 12px; opacity: 0.75; white-space: nowrap; }
      .podium-container { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 16px 0 20px 0; min-height: 145px; }
      .podium-step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-radius: 4px 4px 0 0; padding: 4px 2px 4px 2px; text-align: center; border: 1px solid var(--gold-line); border-bottom: none; position: relative; }
      .podium-1st { height: 125px; background: linear-gradient(180deg, #594306 0%, var(--surface) 100%); border-color: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.4); }
      .podium-2nd { height: 105px; background: linear-gradient(180deg, #3d4045 0%, #111315 100%); border-color: #c0c0c0; box-shadow: 0 0 8px rgba(192, 192, 192, 0.3); }
      .podium-3rd { height: 90px; background: linear-gradient(180deg, var(--card-up) 0%, var(--bg) 100%); border-color: #cd7f32; box-shadow: 0 0 8px rgba(205, 127, 50, 0.3); }
      .podium-name { font-weight: 900; font-size: 12px; text-shadow: 1px 1px 2px var(--bg); width: 100%; padding: 0 2px; }
      /* 색상바+메달+이름+칭호+이모지 조합은 잘라서 숨기지 않고(사장님 지시: "무조건 다 보이는거야"),
         칸보다 길면 좌우로 흐르게(marquee) 한다 - applyMarqueeIfOverflow()/applyArtistRowMarquee() 가
         렌더 직후 실측(scrollWidth vs clientWidth)해서 실제로 넘칠 때만 켠다(안 넘치면 그대로 정지). */
      .marquee-clip { display: block; overflow: hidden; white-space: nowrap; min-width: 0; }
      .marquee-track { display: inline-block; white-space: nowrap; }
      .marquee-track.scrolling { animation: marqueeScroll linear infinite; }
      .marquee-seg { display: inline-block; padding-right: 28px; }
      @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      @media (prefers-reduced-motion: reduce) { .marquee-track.scrolling { animation: none !important; } }
      .podium-count { font-size: 12px; color: var(--gold); margin-top: 2px; font-weight: bold; white-space: nowrap; }
      .podium-rank { position: absolute; top: 4px; left: 6px; font-size: 12px; font-weight: bold; opacity: 0.75; }
      .weekly-count-badge { font-size: 12px; opacity: 0.8; font-weight: normal; margin-left: 2px; }
      
      /* 2.0339 쉬프트 오픈 알람: 박스 자체 버스트(좌표 계산 없음) + 화면 정중앙 배너 */
      .shift-block.just-unlocked { animation: shiftUnlockGlow 1.4s ease-in-out 3; }
      @keyframes shiftUnlockGlow {
        0%, 100% { box-shadow: inset 0 0 0 rgba(var(--unlock-rgb), 0); }
        50% { box-shadow: inset 0 0 18px rgba(var(--unlock-rgb), 0.55); }
      }
      .unlock-fx { position: absolute; inset: -6px; pointer-events: none; z-index: var(--z-fx); overflow: visible; }
      .unlock-fx .fx-flash {
        position: absolute; inset: 0; border-radius: 4px;
        background: radial-gradient(circle at 50% 42%, rgba(255,224,160,0.95) 0%, rgba(255,150,30,0.55) 40%, transparent 75%);
        opacity: 0; animation: fxFlash 0.65s ease-out forwards;
      }
      .unlock-fx .fx-ring {
        position: absolute; left: 50%; top: 42%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
        border-radius: 50%; border: 2px solid rgba(255,190,80,0.95);
        transform: scale(0); opacity: 1; animation: fxRing 0.75s cubic-bezier(.15,.75,.3,1) forwards;
      }
      .unlock-fx .fx-spark {
        position: absolute; left: 50%; top: 42%; width: 3px; height: 3px; border-radius: 50%;
        background: #ffe4b0; box-shadow: 0 0 5px var(--warn-soft); opacity: 0; animation: fxSpark 0.75s ease-out forwards;
      }
      @keyframes fxFlash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
      @keyframes fxRing { 0% { transform: scale(0); opacity: 1; border-width: 3px; } 100% { transform: scale(11); opacity: 0; border-width: 1px; } }
      @keyframes fxSpark {
        0% { opacity: 1; transform: translate(-50%,-50%) translate(0,0); }
        100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--sx),var(--sy)); }
      }
      .shift-open-scrim {
        position: fixed; inset: 0; z-index: var(--z-scrim); pointer-events: none;
        background: rgba(var(--shadow-rgb), 0); transition: background 0.4s ease;
      }
      .shift-open-scrim.active { background: rgba(var(--shadow-rgb), 0.55); }
      .shift-open-banner {
        position: fixed; top: 50%; left: 50%;
        transform: translate(-50%,-50%) scale(0.7);
        z-index: var(--z-banner); pointer-events: none;
        transition: transform 0.5s cubic-bezier(.2,1.4,.4,1), opacity 0.4s ease;
        opacity: 0; width: min(420px, 88vw);
      }
      .shift-open-banner.active { transform: translate(-50%,-50%) scale(1); opacity: 1; transition-delay: 0.15s; }
      .shift-open-banner.leaving { transform: translate(-50%,-50%) scale(0.85); opacity: 0; transition: transform 0.45s cubic-bezier(.4,0,.7,.3), opacity 0.4s ease; }
      .shift-open-banner .banner {
        position: relative; display: flex; align-items: center; gap: 12px;
        padding: 16px 20px 16px 12px;
        background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
        border: 1px solid var(--gold-line); border-radius: 4px;
        box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), 0.6), 0 14px 40px -12px rgba(var(--shadow-rgb), 0.8), 0 0 26px rgba(var(--unlock-rgb), 0.35);
        overflow: hidden;
      }
      .shift-open-banner .banner::before {
        content: ""; position: absolute; inset: 2px; border: 1px solid rgba(var(--gold-rgb), 0.25); border-radius: 4px; pointer-events: none;
      }
      .shift-open-banner .banner-shine {
        position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
        background: linear-gradient(75deg, transparent 0%, rgba(var(--ink-hi-rgb), 0) 30%, rgba(255,240,200,0.55) 50%, rgba(var(--ink-hi-rgb), 0) 70%, transparent 100%);
        transform: skewX(-18deg);
      }
      .shift-open-banner.active .banner-shine { animation: shineSweep 1.3s ease-in-out 0.45s 1; }
      @keyframes shineSweep { 0% { left: -60%; } 100% { left: 130%; } }
      .shift-open-banner .banner-badge {
        position: relative; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
        background: radial-gradient(circle at 50% 40%, var(--surface-2) 0%, var(--bg) 75%);
        border: 2px solid var(--gold-line); display: flex; align-items: center; justify-content: center;
        box-shadow: 0 0 14px rgba(var(--unlock-rgb), 0.55), inset 0 0 8px rgba(var(--shadow-rgb), 0.7);
      }
      .shift-open-banner .banner-badge::before {
        content: ""; position: absolute; inset: -9px; border-radius: 50%;
        background: conic-gradient(from 0deg, transparent 0deg, rgba(255,170,40,0.55) 20deg, transparent 60deg, transparent 180deg, rgba(255,170,40,0.4) 205deg, transparent 260deg);
        opacity: 0;
      }
      .shift-open-banner.active .banner-badge::before { opacity: 1; animation: bannerBadgeSpin 2.4s linear infinite; }
      @keyframes bannerBadgeSpin { 100% { transform: rotate(360deg); } }
      .shift-open-banner .banner-badge-star { color: var(--gold); font-size: 22px; line-height: 1; text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.9); }
      .shift-open-banner .banner-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: #e0a750; }
      .shift-open-banner .banner-title {
        font-size: 22px; font-weight: 900; letter-spacing: 0.01em; margin-top: 4px;
        color: var(--gold); text-shadow: 0 0 12px rgba(255,170,40,0.6); white-space: nowrap;
      }
      
      /* 2.0340: 오픈 5초 전 카운트다운 - 매 초 숫자가 다른 방향에서 슬램하며 등장 */
      .shift-open-countdown { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: var(--z-banner); pointer-events: none; }
      .cd-slam {
        display: inline-block;
        font-family: "Impact", "Arial Narrow Bold", sans-serif; font-size: 110px; font-weight: 900;
        color: var(--gold); -webkit-text-stroke: 2px rgba(var(--ink-hi-rgb), 0.5);
        text-shadow: 0 0 30px rgba(var(--gold-rgb), 0.9); opacity: 0;
      }
      .cd-slam.go { animation-duration: 0.6s; animation-timing-function: cubic-bezier(.2,.9,.3,1.3); animation-fill-mode: forwards; }
      .cd-slam.dir-left { animation-name: slamLeft; }
      .cd-slam.dir-right { animation-name: slamRight; }
      .cd-slam.dir-top { animation-name: slamTop; }
      .cd-slam.dir-bottom { animation-name: slamBottom; }
      .cd-slam.dir-zoom { animation-name: slamZoom; }
      @keyframes slamLeft { 0% { transform: translateX(-220px) rotate(-10deg); opacity: 0; } 70% { transform: translateX(10px) rotate(3deg); opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 1; } }
      @keyframes slamRight { 0% { transform: translateX(220px) rotate(10deg); opacity: 0; } 70% { transform: translateX(-10px) rotate(-3deg); opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 1; } }
      @keyframes slamTop { 0% { transform: translateY(-180px) scale(0.7); opacity: 0; } 70% { transform: translateY(8px) scale(1.05); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
      @keyframes slamBottom { 0% { transform: translateY(180px) scale(0.7); opacity: 0; } 70% { transform: translateY(-8px) scale(1.05); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
      @keyframes slamZoom { 0% { transform: scale(2.6); opacity: 0; filter: blur(6px); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
      @media (prefers-reduced-motion: reduce) {
        .unlock-fx *, .shift-open-banner, .shift-open-scrim, .shift-block.just-unlocked, .cd-slam { transition-duration: 0.01s !important; animation: none !important; }
      }
      
      .update-dot {
        position: absolute; top: -4px; right: -4px; width: 10px; height: 10px;
        border-radius: 50%; background: var(--danger-hi); box-shadow: 0 0 6px var(--danger-hi);
      }
      
      .mobile-bottom-nav { display: none !important; }
      .top-today-btn { display: none !important; }
      
      body.tv-mode { padding: 6px; overflow: hidden; background: #020101; }
      body.tv-mode #userInfo { display: none !important; }
      body.tv-mode #transferBannerContainer { display: none !important; }
      body.tv-mode .main-wrapper {
        display: grid; height: calc(100vh - 12px); gap: 8px; padding: 4px;
        grid-template-columns: 0.6fr 1.1fr 1.25fr 1.1fr 0.6fr;
        grid-template-rows: 20vh 1fr;
        grid-template-areas: "tvrank tvmega tvtitle tvchat tvlog" "tvgrid tvgrid tvgrid tvgrid tvgrid";
      }
      body.tv-mode .panels-row { display: contents; }
      body.tv-mode .tv-header-bar { grid-area: tvtitle; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
      body.tv-mode .tv-header-bar h1 { font-size: 28px; white-space: nowrap; }
      body.tv-mode .app-subtitle { font-size: 13px; }
      body.tv-mode .app-title-row { margin-bottom: 12px; }
      body.tv-mode .app-nav-row { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
      .tv-clock { display: none; }
      body.tv-mode .tv-clock { display: block; font-size: 38px; font-weight: 900; color: #ffd100; text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45); letter-spacing: 3px; margin-top: 10px; font-variant-numeric: tabular-nums; }
      body.tv-mode .tv-clock-date { font-size: 14px; font-weight: bold; color: #f0e6d2; opacity: 0.8; letter-spacing: 2px; margin-top: 2px; }
      .tv-logout-link { display: none; }
      body.tv-mode .tv-logout-link { display: block; position: fixed; bottom: 6px; right: 8px; font-size: 9px; letter-spacing: 1px; color: #f0e6d2; opacity: 0.25; cursor: pointer; z-index: var(--z-tv-link); }
      body.tv-mode .tv-logout-link:hover { opacity: 0.85; }
      #tvFullscreenPrompt { display: none; position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: var(--z-tv-prompt); background: rgba(2,1,1,0.86); border: 1px solid #6b5320; border-radius: 4px; color: var(--gold); font-size: 16px; font-weight: bold; letter-spacing: 1px; align-items: center; justify-content: center; text-align: center; cursor: pointer; padding: 8px 16px; max-width: 86vw; text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.4); }
      #tvFullscreenPrompt .tv-fs-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: normal; color: var(--ink); opacity: 0.7; letter-spacing: 0.5px; text-shadow: none; }
      /* 예약/취소/양도 성공 시 명시적으로 "됐다"고 알려주는 토스트(사용성 점검 중 발견 -
         기존엔 실패만 alert 뜨고 성공은 모달만 닫혀서 처음 쓰는 사람은 됐는지 불안해했음). */
      .success-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: linear-gradient(180deg, var(--ok-btn) 0%, var(--ok-line) 100%); color: var(--ink-hi); border: 1px solid #55ff40; border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 2px var(--bg); box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.5); z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; max-width: 88vw; text-align: center; }
      .success-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
      /* 2.0384(A2): 오류 토스트 - 성공 토스트의 빨간 버전 (같은 엘리먼트에 .error 클래스 토글) */
      .success-toast.error { background: linear-gradient(180deg, var(--danger) 0%, var(--remove-bg) 100%); border-color: #ff8a8a; }
      /* 2.0368: 캐시 즉시 렌더 - 신선한 데이터가 오기 전까지 그리드 조작 잠금 + 갱신 중 표시.
         2.0369: 상단 작은 박스 -> 화면 정중앙 "Refreshing..." + 점 애니메이션으로 교체
         (사장님이 목업 5종 중 "글자 주변만 어둡게" 선택). 캐시라는 내부 사정은 문구에서 제거,
         글자 뒤에만 경계 없는 라디얼 딤을 깔아 가독성 확보. */
      .stale-dim { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(340px, 90vw); height: 170px; z-index: var(--z-stale-dim); pointer-events: none; background: radial-gradient(ellipse at center, rgba(var(--shadow-rgb), 0.85) 0%, rgba(var(--shadow-rgb), 0.55) 40%, rgba(var(--shadow-rgb), 0) 72%); }
      .stale-notice { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: var(--z-stale); pointer-events: none; font-size: 16px; font-weight: bold; color: var(--gold); text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.55), 0 2px 8px rgba(var(--shadow-rgb), 0.9); white-space: nowrap; }
      body.stale-data .stale-dim, body.stale-data .stale-notice { display: block; }
      /* 2.0374: 소프트 갱신 - 표시는 동일하게, 그리드 잠금 없음 (탭이 그대로 통과됨) */
      body.refreshing-soft .stale-dim, body.refreshing-soft .stale-notice { display: block; }
      .stale-dots span { display: inline-block; animation: staleDotPulse 1.2s ease-in-out infinite; }
      .stale-dots span:nth-child(2) { animation-delay: 0.2s; }
      .stale-dots span:nth-child(3) { animation-delay: 0.4s; }
      @keyframes staleDotPulse { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
      @media (prefers-reduced-motion: reduce) { .stale-dots span { animation: none; } }
      body.stale-data #shiftsContainer { pointer-events: none; opacity: 0.9; }
      /* 2.0370: 모바일 지난 날짜 접기 - 요약 정보 바 */
      .past-day-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid rgba(var(--gold-line-rgb), 0.25); border-left: 3px solid rgba(var(--gold-line-rgb), 0.5); border-radius: 4px; background: var(--bg); padding: 8px 8px; cursor: pointer; user-select: none; font-size: 12px; color: var(--ink-3); }
      .past-day-bar .pdb-date { font-weight: bold; color: var(--ink-4); white-space: nowrap; }
      .past-day-bar .pdb-date-sub { opacity: 0.7; font-weight: normal; font-size: 12px; }
      .past-day-bar .pdb-info { flex: 1; text-align: right; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .past-day-bar .pdb-info b { color: var(--gold); font-weight: bold; }
      .past-day-bar.future-day-bar { border-left-color: rgba(var(--gold-rgb), 0.55); color: #c0ae8e; }
      .pdb-tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
      .pdb-tag.pdb-full { background: rgba(var(--danger-rgb), 0.13); color: var(--danger); }
      .pdb-tag.pdb-free { background: rgba(var(--mint-rgb), 0.13); color: var(--mint); }
      .pdb-tag.pdb-lock { background: rgba(157,139,111,0.15); color: var(--ink-3); }
      .pdb-tag.pdb-mine { background: rgba(var(--gold-rgb), 0.15); color: var(--gold); font-weight: bold; }
      .pdb-tag.pdb-warn { background: rgba(var(--orange-2-rgb), 0.16); color: var(--orange-2); font-weight: bold; }
      .past-day-bar .pdb-chev { opacity: 0.7; font-size: 11px; flex-shrink: 0; }
      /* 2.0371: 모달 안 로딩 문구 - 전역 갱신 표시와 같은 문구/점 애니메이션으로 통일 */
      .loading-inline { font-size: 13px; font-weight: bold; color: var(--gold); opacity: 0.9; margin: 8px 0; }
      /* 2.0388(A6): 빈 화면 다음 행동 힌트 - 시안색 한 줄 (사장님: 1+2 혼합) */
      .empty-hint { display: block; font-size: 12px; color: var(--info); margin-top: 4px; opacity: 0.9; }
      /* 2.0395(B3): 낙관적 예약 슬롯 - 반투명 금색 이탤릭 "확인 중" */
      .slot-card.slot-pending-mine { opacity: 0.65; color: var(--gold); font-style: italic; border-color: rgba(var(--gold-rgb), 0.55); animation: pendingMinePulse 1.2s ease-in-out infinite; }
      @keyframes pendingMinePulse { 50% { opacity: 0.9; } }
      @media (prefers-reduced-motion: reduce) { .slot-card.slot-pending-mine { animation: none; } }
      /* 2.0393(B2): 챗 @멘션 자동완성 칩 - 입력창 아래, 비어있으면 자리 차지 안 함.
         chat-input-row 안에 있어 TV 모드에선 기존 규칙으로 자동 숨김. */
      .chat-mention-chips { display: flex; flex-wrap: wrap; gap: 4px; }
      .chat-mention-chips:empty { display: none; }
      .mention-chip { font-size: 12px; font-weight: bold; color: var(--info); border: 1px solid rgba(var(--info-rgb), 0.5); background: rgba(var(--info-rgb), 0.08); border-radius: 8px; padding: 4px 12px; cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      .mention-chip:active { transform: scale(0.94); filter: brightness(1.4); transition-duration: 0.04s; }
      /* 2.0398(B6): 도움말 - 아코디언 + 신규 유도 점 */
      .help-new-dot { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); animation: helpDotBlink 1.4s ease-in-out infinite; }
      @keyframes helpDotBlink { 50% { opacity: 0.3; } }
      @media (prefers-reduced-motion: reduce) { .help-new-dot { animation: none; } }
      .help-acc { border: 1px solid rgba(var(--gold-line-rgb), 0.3); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
      .help-acc-h { font-size: 13px; font-weight: bold; padding: 8px 12px; color: var(--ink-hi); background: var(--surface); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      .help-acc-h:active { filter: brightness(1.3); transition-duration: 0.04s; }
      .help-acc-h .chev { font-size: 12px; opacity: 0.6; transition: transform 0.2s; }
      .help-acc.open .help-acc-h .chev { transform: rotate(180deg); }
      .help-acc-b { display: none; font-size: 13px; color: var(--ink); padding: 8px 12px; border-top: 1px solid rgba(var(--gold-line-rgb), 0.18); line-height: 1.7; }
      .help-acc.open .help-acc-b { display: block; }
      .help-acc-b b { color: var(--gold); }
      /* 2.0401(B1): 관리자 콘솔 - 5탭 전면 모달 (관리자 전용) */
      .adm-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
      .adm-tab { flex: 1; text-align: center; font-size: 12px; font-weight: bold; padding: 8px 0; border: 1px solid rgba(var(--gold-line-rgb), 0.4); border-radius: 4px; color: var(--ink-3); background: var(--surface); cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      .adm-tab:active { transform: scale(0.94); filter: brightness(1.3); transition-duration: 0.04s; }
      .adm-tab.on { color: var(--surface); background: linear-gradient(180deg, var(--gold), var(--gold-line)); border-color: var(--gold); }
      .adm-sub { display: flex; gap: 4px; margin-bottom: 8px; }
      .adm-toolbar { display: flex; align-items: center; justify-content: flex-end;
        gap: 8px; margin-bottom: 8px; }
      .adm-toolbar #admRefreshStamp { font-size: 12px; }
      .adm-refresh { min-height: 34px; padding: 0 12px; background: var(--surface);
        border: 1px solid var(--card-up); color: var(--gold); font-size: 13px; border-radius: 4px;
        cursor: pointer; font-family: inherit; display: inline-flex; align-items: center;
        gap: 4px; white-space: nowrap; }
      .adm-refresh:active { background: var(--surface-2); border-color: var(--gold); transform: scale(0.97); }
      .modal-title { display: flex; align-items: center; }
      .adm-sub-btn { flex: 1; text-align: center; font-size: 12px; font-weight: bold; padding: 4px 0; border: 1px solid rgba(var(--info-rgb), 0.4); border-radius: 4px; color: var(--ink-3); cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      .adm-sub-btn:active { transform: scale(0.94); filter: brightness(1.3); transition-duration: 0.04s; }
      .adm-sub-btn.on { color: #06282c; background: linear-gradient(180deg, var(--info), #00a8b4); border-color: var(--info); }
      #adminConsoleBody .sub2 { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
      #adminConsoleBody .sb { font-size: 12px; font-weight: bold; padding: 4px 8px; border: 1px solid rgba(var(--info-rgb), 0.4); border-radius: 4px; color: var(--ink-3); background: var(--surface); cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      #adminConsoleBody .sb:active { transform: scale(0.94); filter: brightness(1.3); transition-duration: 0.04s; }
      #adminConsoleBody .sb.on { color: #06282c; background: linear-gradient(180deg, var(--info), #00a8b4); border-color: var(--info); }
      .ob-nav { display:flex;align-items:center;justify-content:center;gap:16px;margin:2px 0 12px; }
      .ob-arw { cursor:pointer;color:var(--gold);font-size:19px;line-height:1;padding:2px 8px; }
      .ob-ym { font-size:13px;letter-spacing:1.5px;color:var(--ink);font-family:var(--uifont);font-variant-numeric:tabular-nums; }
      .ob-tabs { display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px; }
      .ob-tab { cursor:pointer;font-size: 12px;font-family:var(--uifont);letter-spacing:.6px;
        color:var(--ink-4);border:1px solid var(--surface-2);border-radius:4px;padding:4px 8px; }
      .ob-tab b { font-variant-numeric:tabular-nums;margin-left:4px; }
      .ob-tab.on { color:var(--bg);background:var(--gold);border-color:var(--gold); }
      .ob-tab.ob-w.on { background:var(--gold); } .ob-tab.ob-y.on { background:var(--mint); }
      .ob-tab.ob-n.on { background:var(--danger); } .ob-tab.ob-p.on { background:var(--ink-4); }
      .ob-row { display:flex;gap:8px;padding:8px 0;border-bottom:1px solid var(--surface); }
      .pwc { border: 1px solid var(--gold-line); background: rgba(var(--gold-rgb), 0.05); border-radius: 8px; padding: 12px 12px; margin-top: 8px; }
      .pwc-h { font-size: 12px; letter-spacing: 1.4px; color: var(--gold); margin-bottom: 8px; }
      .pwc-r { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; }
      .pwc-r span { flex: 0 0 66px; color: var(--ink-3); font-size: 13px; }
      .pwc-r b { color: var(--ink-hi); }
      .pwc-pw { font-family: monospace; font-size: 16px; letter-spacing: 1.5px; color: var(--gold); }
      .pwc-two { display: flex; gap: 8px; margin-top: 8px; }
      .pwc-two .tw-btn { flex: 1; }
      .pwc-n { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.6; }
      .ob-hit { cursor: pointer; }
      .ob-hit:active { background: rgba(var(--gold-rgb), 0.07); }
      .ob-l { width:52px;flex-shrink:0;font-size: 12px;font-family:var(--uifont);letter-spacing:.5px; }
      .ob-mk { display:block;font-size:12px;line-height:1.2; }
      .ob-row.ob-w .ob-l { color:var(--gold); } .ob-row.ob-y .ob-l { color:var(--mint); }
      .ob-row.ob-n .ob-l { color:var(--danger); } .ob-row.ob-p .ob-l { color:var(--ink-4); }
      .ob-m { min-width:0;flex:1; }
      .ob-d { font-size:12px;color:var(--warn-soft);font-family:var(--uifont);font-variant-numeric:tabular-nums; }
      .ob-a { font-size:14px;color:var(--ink-hi);margin-top:2px; }
      .ob-c { color:#c9b8a0;font-size:13px; }
      .ob-s { font-size: 13px;color:var(--ink-3);font-family:var(--uifont);margin-top:2px; }
      .ob-why { font-size: 13px;color:#ff8f8f;font-family:var(--uifont);margin-top:4px; }
      .ob-t { font-size: 11px;color:var(--ink-4);font-family:var(--uifont);margin-top:4px;
        letter-spacing:.3px;font-variant-numeric:tabular-nums; }
      .adm-sec { font-size: 12px; font-weight: bold; color: var(--gold-line); letter-spacing: 1px; margin: 12px 0 4px; border-left: 3px solid var(--gold-line); padding-left: 8px; }
      .adm-card { border: 1px solid rgba(var(--gold-line-rgb), 0.28); border-radius: 4px; background: linear-gradient(90deg, var(--surface), var(--surface)); padding: 8px 12px; margin-bottom: 8px; font-size: 12px; line-height: 1.6; }
      .adm-card b { color: var(--ink-hi); }
      .adm-muted { color: var(--ink-3); }
      .adm-good { color: var(--mint); } .adm-warn { color: var(--orange-2); } .adm-bad { color: var(--danger); } .adm-cy { color: var(--info); } .adm-gd { color: var(--gold); }
      .adm-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
      .adm-kpi { border: 1px solid rgba(var(--gold-line-rgb), 0.35); border-radius: 4px; padding: 8px 8px; background: linear-gradient(135deg, var(--surface), var(--surface)); }
      .adm-kpi.hero { grid-column: span 2; border-color: rgba(var(--gold-rgb), 0.6); }
      .adm-kpi .kl { font-size: 11px; color: var(--ink-3); letter-spacing: 0.5px; }
      .adm-kpi .kv { font-size: 16px; font-weight: bold; color: var(--gold); }
      .adm-kpi.hero .kv { font-size: 23px; }
      .adm-kpi .kd { font-size: 11px; }
      .adm-kpi.rate-kpi { grid-column: 1 / -1; border-color: rgba(var(--info-rgb), 0.5);
                          background: linear-gradient(135deg, #08262b, #0e1a1c); }
      .adm-kpi.rate-kpi .kv { color: var(--info); font-size: 24px; }
      .rate-band { margin-top: 4px; height: 8px; border-radius: 4px; background: var(--card);
                   position: relative; overflow: hidden; }
      .rate-band .nb { position: absolute; top: 0; bottom: 0; background: rgba(var(--mint-rgb), 0.3); }
      .rate-band .mk { position: absolute; top: -2px; bottom: -2px; width: 3px;
                       margin-left: -1.5px; background: var(--info); border-radius: 2px; }
      .rate-lbl { display: flex; justify-content: space-between; font-size: 11px;
                  color: var(--ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }
      .rate-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .rate-half { border: 1px solid rgba(var(--gold-line-rgb), 0.3); border-radius: 4px;
                   padding: 8px 8px; background: var(--surface); }
      .rate-half .hh { font-size: 12px; color: var(--ink-3); }
      .rate-half .hv { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
      .rate-half .hs { font-size: 11px; color: var(--ink-4); }
      .mp-bar { display: flex; gap: 4px; margin: 8px 0 8px; }
      .mp-btn { flex: 1; text-align: center; font-size: 12px; font-weight: 700;
                padding: 8px 4px; border-radius: 4px; border: 1px solid rgba(var(--gold-line-rgb), 0.3);
                background: var(--surface); color: var(--ink-3); cursor: pointer; white-space: nowrap;
                user-select: none; transition: background 0.12s ease, color 0.12s ease; }
      .mp-btn.on { background: linear-gradient(135deg, var(--surface-2), var(--card-up)); color: var(--gold);
                   border-color: rgba(var(--gold-rgb), 0.55); }
      .mp-btn:active { filter: brightness(1.35); }
      .mp-blk { display: none; }
      .mp-body[data-tab="rec"] .mp-blk[data-mp="rec"],
      .mp-body[data-tab="earn"] .mp-blk[data-mp="earn"],
      .mp-body[data-tab="days"] .mp-blk[data-mp="days"] { display: block; }
      .kb-sum { display: flex; gap: 12px; padding: 8px 2px 8px; border-bottom: 1px solid var(--card);
                font-size: 12px; color: var(--ink-4); letter-spacing: 1px; font-weight: bold; }
      .kb-sum b { color: var(--gold); font-size: 13px; margin-left: 4px; }
      .kb-pb { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 12px;
               border: 1px dashed var(--surface-2); border-radius: 4px; background: var(--bg); color: var(--ink-4);
               font-size: 12px; letter-spacing: 1.5px; font-weight: bold; cursor: pointer;
               user-select: none; }
      .kb-pb.open { border-style: solid; color: var(--ink-4); }
      .kb-pb .kb-pc { margin-left: auto; color: var(--ink-4); }
      .kb-pb:active { filter: brightness(1.35); }
      .kb-ul { color: var(--info-ink); font-size: 12px; letter-spacing: 2px; font-weight: bold;
               margin: 12px 2px 2px; display: flex; align-items: center; gap: 8px; }
      .kb-ul .kb-cn { color: var(--ink-4); font-weight: normal; }
      .kb-mh { color: var(--gold); font-size: 12px; letter-spacing: 2px; font-weight: bold;
               margin: 16px 2px 4px; padding-top: 8px; border-top: 1px solid var(--card); }
      .kb-dh { font-size: 13px; color: var(--warn-soft); letter-spacing: 1px; font-weight: bold;
               margin: 12px 2px 4px; }
      .kb-r { display: flex; align-items: center; gap: 8px; border: 1px solid var(--card);
              background: rgba(var(--card-fill-rgb), 0.85); border-radius: 4px; padding: 8px 8px 8px 0;
              margin-bottom: 4px; cursor: pointer; }
      .kb-r:active { filter: brightness(1.35); }
      .kb-r.past { opacity: 0.55; }
      .kb-b { width: 4px; align-self: stretch; background: var(--sky); flex-shrink: 0; }
      .kb-c { flex: 1; min-width: 0; line-height: 1.45; }
      .kb-t { display: block; color: var(--warn-soft); font-weight: bold; font-size: 12px;
              font-variant-numeric: tabular-nums; white-space: nowrap; }
      .kb-g { font-size: 11px; font-weight: 900; letter-spacing: 0.4px; margin-left: 4px; }
      .kb-g.kb-s { color: var(--info-2); } .kb-g.kb-p { color: var(--ok); }
      .kb-g.kb-w { color: var(--ink-3); } .kb-g.kb-o { color: var(--purple); }
      .kb-n { display: block; font-size: 14px; color: var(--ink-hi); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
      .kb-a { color: var(--ink-4); font-size: 14px; }
      .kb-end { text-align: center; color: var(--ink-4); font-size: 12px; letter-spacing: 2px;
                padding: 16px 0 4px; }
      .kb-ym { margin: 8px 0 4px; border: 1px solid var(--surface-2); border-radius: 4px;
               background: var(--bg); padding: 8px 8px; }
      .kb-yy { display: flex; gap: 4px; margin-bottom: 8px; }
      .kb-yb { flex: 1; text-align: center; font-size: 12px; font-weight: bold; padding: 4px 0;
               border: 1px solid var(--surface-2); border-radius: 4px; color: var(--ink-4); cursor: pointer;
               font-variant-numeric: tabular-nums; }
      .kb-yb.on { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
      .kb-mm { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
      .kb-mn { text-align: center; font-size: 12px; font-weight: bold; padding: 4px 0 4px;
               border: 1px solid var(--surface-2); border-radius: 4px; color: var(--ink-4);
               letter-spacing: 0.5px; cursor: pointer; }
      .kb-mn b { display: block; color: var(--info-ink); font-size: 12px; margin-top: 2px;
                 font-variant-numeric: tabular-nums; }
      .kb-mn.on { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
      .kb-mn.on b { color: var(--gold); }
      .kb-mn.dis { color: var(--ink-4); border-color: var(--surface); cursor: default; }
      .kb-rs { margin: 8px 2px 2px; font-size: 12px; color: var(--ink-4); letter-spacing: 1px; }
      .kb-rs b { color: var(--info-ink); }
      .abk-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
                  padding: 8px 0 4px; }
      .abk-n { text-align: center; font-size: 12px; color: var(--ink-2); cursor: pointer;
               border: 1px solid var(--surface-2); background: var(--bg); border-radius: 4px;
               padding: 8px 4px; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
      .abk-n:active { filter: brightness(1.4); }
      .abk-b { cursor: pointer; text-decoration: underline;
               text-decoration-color: var(--card-up); text-underline-offset: 2px; }
      .ofx .qnav { display: inline-block; margin: 0 4px; padding: 0 4px; cursor: pointer;
                   color: var(--gold); font-weight: normal; }
      .ofx .qnav.off { color: var(--ink-4); cursor: default; }
      .ofx .qnav.now { font-size: 11px; letter-spacing: 1px; color: var(--ink-4);
                       border: 1px solid var(--surface-2); border-radius: 4px; padding: 2px 4px;
                       margin-left: 8px; }
      .ofx .qnav.now:hover { border-color: var(--line); color: var(--ink); }
      .ofx .qnav.ahead { font-size: 11px; letter-spacing: 1px; color: var(--info-ink);
                         border: 1px solid #1d3a45; border-radius: 4px; padding: 2px 4px;
                         margin-left: 8px; cursor: default; }
      #guestHome { display: none; }
      /* [2.0952] **집 화면에는 안 그린다**(사장님 지시). 내 예약 목록은 마이페이지 >
         BOOKINGS 것이다. 집에는 부킹 칸 하나만 둔다 - 같은 것이 두 번 나오면
         어느 쪽이 진짜인지 헷갈린다. 이 칸은 마이페이지가 쓰는 자리로 남는다. */
      body.tier-guest #guestHome { display: none !important; }
      body.tier-guest #shiftsContainer,
      body.tier-guest .nav-btn-row,
      body.tier-guest .shift-board-label,
      body.tier-guest #syncTimeLine,
      body.tier-guest #megaphoneContainer,
      body.tier-guest #chatContainer,
      body.tier-guest #activityLogContainer,
      body.tier-guest #transferBannerContainer,
      body.tier-guest #titleBannerContainer,
      body.tier-guest #openPrepCard,
      body.tier-guest #tvRankingsContainer { display: none !important; }
      /* [2.0952] **쌩 게스트 화면에는 보라색 이름표와 부킹 박스만 남긴다**(사장님 지시).
         스튜디오 안쪽 것 - 명부 · 랭킹 · 업데이트 · 도움말 · 주 넘기기 - 은 전부 뺀다.
         자리만 빌려 쓰는 사람에게 보여 줄 것이 아니다. */
      /* 부킹 칸은 **접히지도 않는다**(사장님 지시). 게스트에게는 이 한 칸이 화면 전부라,
         접어 두면 빈 화면을 보게 되고 다시 펴는 손잡이가 있는 줄도 모른다. */
      body.tier-guest .pcal-hd .panel-act { display: none !important; }
      body.tier-guest .pcal-hd { pointer-events: none; }
      /* [2.0952] **프로필 고치기도 없다**(사장님 지시). 자기소개 · 이모지 · 카드 색은
         스튜디오 식구들 서로 보라고 만든 것인데, 게스트는 명부에 안 뜨므로 아무도 못 본다. */
      body.tier-guest #myShiftsProfileBody .tw-btn[onclick*="openProfileEditForm"] { display: none !important; }
      body.tier-guest #artistsBtn,
      body.tier-guest #rankBtn,
      body.tier-guest #updatesBtn,
      body.tier-guest #helpBtn,
      body.tier-guest .mobile-bottom-nav { display: none !important; }
      /* [2.0952] **부킹 탭은 남긴다**(사장님 지시). 게스트가 이 앱에서 할 수 있는 일이
         예약을 보는 것뿐인데, 마이페이지에서 자기 예약을 못 보면 그 하나마저 반쪽이다.
         나머지(칭호 · 로스터 · 활동 · 휴가)는 게스트와 상관없는 것들이라 그대로 뺀다. */
      body.tier-guest .ms-tab-row .ms-tab-btn:not([data-tab="profile"]):not([data-tab="bookings"]) { display: none; }
      body.tier-guest .mp-btn[data-mt="earn"],
      body.tier-guest .mp-btn[data-mt="days"] { display: none; }
      .tiersum { display: flex; gap: 8px; margin-bottom: 8px; }
      .tend { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
      .tendi { width: 132px; padding: 4px 4px; font-size: 12px; }
      .tsave { cursor: pointer; }
      .tierrow { flex-wrap: wrap; }
      .tiersum span { flex: 1; border: 1px solid var(--card); background: var(--bg);
                      border-radius: 4px; padding: 4px 8px; font-size: 12px;
                      color: var(--ink-4); letter-spacing: 0.5px; }
      .tiersum b { color: var(--gold); font-size: 14px; margin-left: 4px;
                   font-variant-numeric: tabular-nums; }
      .tierrow { display: flex; align-items: center; gap: 8px; padding: 4px 2px;
                 border-bottom: 1px solid var(--surface); }
      .tierrow .tn { flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .tierrow .tsel { display: flex; gap: 4px; flex-shrink: 0; }
      .tierrow .tb { font-size: 12px; padding: 4px 8px; border-radius: 4px;
                     border: 1px solid var(--surface-2); color: var(--ink-4); cursor: pointer;
                     white-space: nowrap; user-select: none; }
      .tierrow .tb:hover { border-color: var(--line); color: var(--ink-4); }
      .tierrow .tb.on { border-color: var(--gold); color: var(--gold);
                        background: rgba(var(--gold-rgb), 0.08); cursor: default; }
      .d-go { color: var(--info-2); text-decoration: none; display: inline-flex;
              align-items: center; gap: 4px; padding: 4px 0; cursor: pointer; }
      .d-go i { font-style: normal; font-size: 13px; color: var(--ink-4); }
      .d-go:hover { text-decoration: underline; }
      .d-go:active { filter: brightness(1.4); }
      .bfine { margin-top: 12px; font-size: 12px; color: #5c8548; letter-spacing: 0.3px; }
      .bcap { margin-top: 12px; border: 1px solid #6b3a12; background: rgba(60,26,0,0.42);
              border-radius: 4px; padding: 12px 12px; }
      .bcap.ok { border-color: #1a7a00; background: rgba(var(--mine-rgb), 0.5); }
      .bcapt { font-size: 13px; color: var(--orange-2); line-height: 1.4; }
      .bcapt b { color: var(--warn-soft); }
      .bcap.ok .bcapt { color: #7ddc5a; }
      .bcap.ok .bcapt b { color: #9dff88; }
      .bcapd { margin-top: 4px; font-size: 12px; color: var(--ink-4); line-height: 1.7; }
      .bcapd b { color: var(--ink-2); }
      .bcapc { display: flex; align-items: center; gap: 8px; margin-top: 12px;
               padding: 8px 8px; border: 1px solid var(--card-up); border-radius: 4px;
               background: var(--bg); font-size: 13px; color: var(--ink-4); cursor: pointer;
               user-select: none; }
      .bcapc.on { border-color: #1a7a00; color: #d8f5cf; }
      .bcapc:active { filter: brightness(1.3); }
      .bcbx { width: 17px; height: 17px; flex-shrink: 0; border: 1px solid #6b5c48;
              border-radius: 4px; display: flex; align-items: center;
              justify-content: center; font-size: 12px; color: var(--ok); }
      .bcapc.on .bcbx { border-color: var(--ok); background: rgba(var(--mine-rgb), 0.9); }
      .pcal-cap { position: absolute; left: 0; right: 0; z-index: var(--z-lift-2); pointer-events: none;
                  background: rgba(214,66,52,.22); border-top: 1px solid rgba(214,66,52,.75);
                  border-bottom: 1px solid rgba(214,66,52,.75); }
      .pcal-cap i { position: absolute; right: 4px; top: 0; font-style: normal; font-size: 11px;
                    font-weight: 700; color: #ffd9d2; background: rgba(214,66,52,.9);
                    border-radius: 2px; padding: 0 4px; }
      .capflag { color: var(--danger); font-size: 11px; vertical-align: middle;
                 text-shadow: 0 0 5px rgba(var(--danger-rgb), 0.8); }
      .capnote { margin: 8px 0 0; padding: 8px 8px; border: 1px solid #5c1414;
                 background: rgba(60,4,4,0.4); border-radius: 4px; font-size: 12px;
                 color: #ff9d9d; line-height: 1.6; }
      .capnote b { color: var(--danger); }
      .pcal { background: var(--bg);
              border: 1px solid var(--gold-line); border-radius: 4px;
              overflow: hidden; padding: 8px 8px 12px; margin-bottom: 12px; }
      .pcal-bar { display: flex; align-items: center; gap: 4px; padding: 8px 12px;
                  border-bottom: 1px solid var(--card);
                  background: linear-gradient(180deg, var(--surface), var(--bg)); }
      .pcal-btn { display: inline-flex; align-items: center; justify-content: center;
                  min-width: 26px; height: 24px; padding: 0 8px; border: 1px solid var(--surface-2);
                  border-radius: 4px; color: var(--ink-4); font-size: 13px; cursor: pointer;
                  user-select: none; }
      .pcal-btn:hover { border-color: var(--line); color: var(--ink); }
      .pcal-btn.tod { font-size: 12px; letter-spacing: 1px; font-weight: bold;
                      color: var(--gold); border-color: var(--line); }
      /* [2.0984] 그날 예약 건수. 로스터 칸(.r-title)과 같은 색을 쓴다 -
         앱 안에서 같은 뜻은 같은 모양이어야 한다. */
      .pcal-cnt { font-size: 12px; color: var(--info-ink); font-weight: bold;
                  letter-spacing: 1px; margin-left: 8px; white-space: nowrap; }
      .pcal-tit { margin-left: 8px; color: var(--gold); font-size: 16px; font-weight: 800;
                  letter-spacing: 1px; }
      .pcal-seg { margin-left: auto; display: flex; border: 1px solid var(--surface-2);
                  border-radius: 4px; overflow: hidden; }
      .pcal-s { padding: 4px 12px; font-size: 12px; font-weight: 900; letter-spacing: 1px;
                color: var(--ink-4); cursor: pointer; border-right: 1px solid var(--surface-2);
                user-select: none; }
      .pcal-s:last-child { border-right: none; }
      .pcal-s.on { background: rgba(var(--gold-rgb), 0.12); color: var(--gold); }
      .pcal-w, .pcal-d { display: flex; height: 560px; }
      .pcal-ax { width: 46px; flex-shrink: 0; position: relative;
                 border-right: 1px solid var(--card); }
      .pcal-axh { height: 38px; border-bottom: 1px solid var(--card); }
      .pcal-axd .pcal-axh { height: 30px; }
      .pcal-t { position: absolute; right: 5px; font-size: 12px; color: #cbb79a;
                font-weight: bold; letter-spacing: 0.2px;
                font-variant-numeric: tabular-nums; transform: translateY(-50%);
                margin-top: 40px; }
      .pcal-axd .pcal-t { margin-top: 28px; }
      .pcal-c { flex: 1; min-width: 0; border-right: 1px solid var(--card);
                display: flex; flex-direction: column; }
      .pcal-c:last-child { border-right: none; }
      .pcal-c.on { background: rgba(var(--gold-rgb), 0.035); }
      .pcal-ch { height: 38px; box-sizing: border-box; border-bottom: 1px solid var(--card);
                 display: flex; align-items: center; justify-content: center; gap: 4px;
                 cursor: pointer; }
      .pcal-ch b { font-size: 11px; letter-spacing: 1px; color: var(--ink-4); }
      .pcal-ch i { font-style: normal; font-size: 16px; font-weight: 800; color: var(--ink);
                   font-variant-numeric: tabular-nums; }
      .pcal-c.on .pcal-ch i { color: var(--gold); }
      .pcal-ch u { text-decoration: none; font-size: 11px; color: var(--ink-4);
                   font-variant-numeric: tabular-nums; }
      .pcal-ch.lane { height: 33px; color: var(--ink-4); font-size: 12px; cursor: default;
                      font-variant-numeric: tabular-nums; }
      .pcal-b { position: relative; flex: 1; overflow: hidden; }
      .pcal-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--surface); }
      .pcal-now { position: absolute; left: 0; right: 0; height: 1px; background: var(--danger);
                  box-shadow: 0 0 5px rgba(var(--danger-rgb), 0.7); z-index: var(--z-lift-3); }
      .pcal-e { position: absolute; box-sizing: border-box;
                border: 1px solid var(--cb); border-left: 3px solid var(--c);
                background: rgba(var(--bg-rgb), 0.92);
                box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.55);
                border-radius: 2px; padding: 4px 4px; overflow: hidden; line-height: 1.25;
                cursor: pointer; }
      .pcal-e:hover { border-color: var(--line); filter: brightness(1.25); }
      .pcal-e b { display: block; font-size: 12px; font-weight: 800; color: var(--ink-hi);
                  letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; }
      .pcal-e i { display: block; font-style: normal; font-size: 11px; color: #c9b8a0;
                  white-space: nowrap; overflow: hidden; }
      .pcal-e u { text-decoration: none; font-size: 11px; color: var(--ink-4);
                  font-variant-numeric: tabular-nums; }
      .pcal-e u.tm { display: block; font-size: 11px; color: var(--ink-2); font-weight: bold;
                     letter-spacing: 0.2px; font-variant-numeric: tabular-nums; }
      .pcal-e.mine u.tm { color: #d8ffcf; }
      .pcal-e u.op { font-size: 11px; font-weight: 900; color: var(--purple); margin-left: 4px; }
      .pcal-e u.ty { font-size: 11px; font-weight: 900; letter-spacing: 0.3px; }
      .pcal-e u.ty.cat-s { color: var(--info-2); }
      .pcal-e u.ty.cat-p { color: var(--ok); }
      .pcal-e u.ty.cat-w { color: var(--ink-3); }
      .pcal-e.short { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
      .pcal-e.short u.tm, .pcal-e.short u.ty, .pcal-e.short u.op { display: none; }
      .pcal-e.short b { display: inline; font-size: 12px; flex: 0 0 auto; }
      .pcal-e.short i { display: inline; font-size: 11px; flex: 1 1 auto;
                        min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .pcal-hd { width: 100%; margin-bottom: 8px; }
      .pcal-fold { padding-bottom: 0; }
      .pcal-c.pcal-ros { flex: 0 0 108px; }
      .pcal-ch.ros { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
      .pcal-r { position: absolute; left: 2px; right: 2px; box-sizing: border-box;
                border: 1px solid var(--gold); border-left: 3px solid var(--gold);
                background: rgba(40,30,0,0.85); border-radius: 2px;
                padding: 4px 4px; overflow: hidden; line-height: 1.25;
                box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.18); }
      .pcal-r b { display: block; font-size: 11px; color: var(--gold);
                  letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; }
      .pcal-r u.tm { display: block; text-decoration: none; font-size: 11px;
                     color: #f4e6c0; font-weight: bold;
                     font-variant-numeric: tabular-nums; }
      .pcal-mh { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
                 border-bottom: 1px solid var(--card); }
      .pcal-mh span { text-align: center; padding: 8px 0; font-size: 11px; letter-spacing: 1px;
                      color: var(--ink-4); font-weight: bold; }
      .pcal-mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
                 grid-auto-rows: 104px; }
      .pcal-mc { border-right: 1px solid var(--card); border-bottom: 1px solid var(--card);
                 padding: 4px 8px; position: relative; cursor: pointer; min-width: 0; overflow: hidden; }
      .pcal-mc:nth-child(7n) { border-right: none; }
      .pcal-mc:hover { background: rgba(var(--gold-rgb), 0.06); }
      .pcal-mc.out { background: var(--bg); }
      .pcal-mc.on { background: rgba(var(--gold-rgb), 0.03); }
      .pcal-mn { font-size: 12px; font-weight: 800; color: var(--ink-4);
                 font-variant-numeric: tabular-nums; display: flex; align-items: center;
                 gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
      .pcal-mc.on .mn-d { background: var(--sky); color: var(--info-bg-2); border-radius: 8px;
                          padding: 0 4px; font-weight: 900; }
      .pcal-mc.out .pcal-mn { color: var(--ink-4); }
      .pcal-mn i { font-style: normal; font-size: 11px; letter-spacing: 1px; color: var(--gold);
                   border: 1px solid var(--line); border-radius: 2px; padding: 2px 4px; }
      .pcal-mb { margin-top: 24px; height: 5px; background: var(--surface); border-radius: 4px;
                 overflow: hidden; }
      .pcal-mb span { display: block; height: 100%;
                      background: linear-gradient(90deg, var(--line), var(--gold)); }
      .pcal-mv { margin-top: 4px; font-size: 19px; font-weight: 900; color: var(--ink);
                 font-variant-numeric: tabular-nums; line-height: 1; }
      .pcal-mc.out .pcal-mv { color: var(--ink-4); }
      .pcal-mz { margin-top: 32px; color: var(--card); font-size: 12px; }
      .pcal-e.mine { border-color: var(--ok); border-left-color: var(--ok);
                     background: rgba(var(--mine-rgb), 0.85); box-shadow: 0 0 6px rgba(var(--ok-rgb), 0.25); }
      .pcal-e.mine i { color: #b6ffa8; }
      .pcal-e.other { opacity: 0.42; }
      .pcal-e.other:hover { opacity: 1; }
      .pcal-c.hasmine .pcal-ch i { color: var(--ok); }
      .pcal-ch u.mn { color: var(--ok); font-weight: 900; }
      .pcal-mc.hasmine { background: rgba(var(--mine-rgb), 0.55); box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb), 0.35); }
      .pcal-mc.hasmine .pcal-mn { color: var(--ok); }
      .pcal-mn i.mn { color: var(--ok); border-color: #1a7a00; }
      .pcal-mc.hasros { box-shadow: inset 3px 0 0 var(--gold); }
      .pcal-mc.hasmine.hasros { box-shadow: inset 3px 0 0 var(--gold),
                                            inset 0 0 0 1px rgba(var(--ok-rgb), 0.35); }
      .pcal-mn i.ro { color: var(--gold); border-color: var(--line);
                      background: rgba(var(--gold-rgb), 0.12); }
      .tlnav { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
      .tlnav .tlb { display: inline-flex; align-items: center; justify-content: center;
                    min-width: 24px; height: 22px; padding: 0 8px; cursor: pointer;
                    border: 1px solid var(--surface-2); border-radius: 4px; background: var(--bg);
                    color: var(--ink-4); font-size: 13px; line-height: 1; user-select: none; }
      .tlnav .tlb:hover { border-color: var(--line); color: var(--ink); }
      .tlnav .tlb.tln { font-size: 12px; letter-spacing: 1px; font-weight: bold;
                        color: var(--gold); border-color: var(--line); }
      .kb-q { position: relative; margin: 2px 0 8px; }
      .kb-q input { width: 100%; box-sizing: border-box; background: var(--bg);
                    border: 1px solid var(--surface-2); border-radius: 4px; color: var(--ink);
                    font-size: 13px; padding: 8px 28px 8px 12px; outline: none;
                    -webkit-appearance: none; }
      .kb-q input::placeholder { color: var(--ink-4); }
      .kb-q input:focus { border-color: var(--line); }
      .kb-q .kb-qx { position: absolute; right: 4px; top: 0; bottom: 0; width: 26px;
                     display: flex; align-items: center; justify-content: center;
                     color: var(--ink-4); font-size: 12px; cursor: pointer; }
      .kb-kpi { display: flex; gap: 8px; padding: 2px 0 8px; }
      .kb-k { flex: 1; border: 1px solid var(--card); background: var(--bg); border-radius: 4px;
              padding: 8px 8px; }
      .kb-kn { display: block; color: var(--gold); font-size: 23px; font-weight: 900;
               font-variant-numeric: tabular-nums; line-height: 1.1; }
      .kb-kl { display: block; color: var(--ink-4); font-size: 11px; letter-spacing: 0.8px;
               margin-top: 2px; }
      /* [2.1070] 게스트 자기 마지막 날 - 놀라게 하려는 것이 아니라 알려 주려는 것이라 경고색을 안 쓴다.
         예약이 그 날을 넘긴 줄(.gel-w)만 눈에 띄게 한다. */
      .gel { border:1px solid var(--line);border-radius:4px;padding:12px;margin-bottom:8px;background:var(--surface-1); }
      .gell { font-size:11px;letter-spacing:1px;color:var(--ink-4);font-family:var(--uifont); }
      .gelv { font-size:16px;font-weight:700;margin-top:4px; }
      .geld { font-size:12px;font-weight:400;color:var(--ink-4);margin-left:4px; }
      .gelm { font-size:12px;color:var(--ink-4);margin-top:4px; }
      .gel-w { font-size:12px;color:var(--gold);margin-top:8px; }
      .kb-up { border: 1px solid #1f5a12; background: rgba(var(--ok-rgb), 0.05); border-radius: 4px;
               padding: 8px 12px; display: flex; align-items: center; }
      .kb-upl { display: flex; align-items: baseline; gap: 8px; }
      .kb-upn { font-size: 22px; font-weight: 900; color: var(--ok);
                font-variant-numeric: tabular-nums; }
      .kb-upt { font-size: 12px; color: var(--ink-4); }
      .kb-upr { margin-left: auto; text-align: right; }
      .kb-upd { display: block; font-size: 11px; color: var(--ink-4); letter-spacing: 0.6px; }
      .kb-upv { display: block; font-size: 12px; color: var(--ink); }
      .kb-stt { color: var(--gold); font-size: 12px; letter-spacing: 2px; font-weight: bold;
                margin: 4px 2px 8px; padding-top: 12px; border-top: 1px solid var(--card); }
      .kb-sc { margin-bottom: 16px; }
      .kb-sct { display: flex; align-items: baseline; gap: 8px; font-size: 12px;
                font-weight: 900; letter-spacing: 1.2px; color: var(--warn-soft); margin-bottom: 8px; }
      .kb-scn { color: var(--ink-4); font-size: 11px; font-weight: normal; letter-spacing: 0.5px; }
      .kb-bars { border: 1px solid var(--card); background: var(--bg); border-radius: 4px;
                 padding: 8px 12px; }
      .kb-br { display: grid; grid-template-columns: 118px 1fr 34px; align-items: center;
               gap: 8px; padding: 2px 0; }
      .kb-bl { font-size: 12px; color: var(--ink-4); white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
      .kb-bw { height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; }
      .kb-bf { display: block; height: 100%; background: var(--line); }
      .kb-br.hi .kb-bf { background: linear-gradient(90deg, var(--gold-line), var(--gold)); }
      .kb-br.hi .kb-bl { color: var(--ink); }
      .kb-bv { font-size: 12px; color: var(--warn-soft); text-align: right;
               font-variant-numeric: tabular-nums; }
      .kb-sp { display: flex; gap: 8px; }
      .kb-spi { flex: 1; border: 1px solid var(--card); background: var(--bg); border-radius: 4px;
                padding: 8px 8px; }
      .kb-spn { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.7px; }
      .kb-spv { display: block; font-size: 19px; font-weight: 900; color: var(--ink-hi);
                font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; }
      .kb-spp { display: block; font-size: 12px; color: var(--ink-4); }
      .kb-opt { display: flex; gap: 8px; }
      .kb-on { flex: 1; text-align: center; font-size: 11px; font-weight: 900;
               letter-spacing: 0.6px; color: var(--purple); border: 1px solid var(--purple-bg);
               background: rgba(var(--purple-rgb), 0.06); border-radius: 4px; padding: 4px 0; }
      .kb-on b { color: var(--ink-hi); font-size: 12px; margin-left: 4px; }
      .kb-two { display: flex; gap: 8px; }
      .kb-tw { flex: 1; border: 1px solid var(--card); background: var(--bg); border-radius: 4px;
              padding: 8px 8px; text-align: center; }
      .kb-twn { display: block; font-size: 19px; font-weight: 900; color: var(--mint);
                font-variant-numeric: tabular-nums; line-height: 1.15; }
      .kb-twl { display: block; font-size: 11px; color: var(--ink-4); margin-top: 2px; }
      .kb-hint { font-size: 12px; color: var(--ink-4); line-height: 1.6; margin-top: 4px;
                 padding: 0 2px; }
      .kb-note { border: 1px solid var(--card); background: var(--bg); border-radius: 4px;
                 padding: 8px 12px; font-size: 12px; color: var(--ink-4); line-height: 1.7;
                 margin-top: 4px; }
      .kb-note b { color: var(--ink); }
      .dowr { display: grid; grid-template-columns: 30px 1fr 62px; align-items: center;
              gap: 4px; font-size: 12px; padding: 2px 0; }
      .dowr .d { color: var(--ink-3); }
      .dowr .tr { height: 8px; background: var(--surface); border-radius: 2px; overflow: hidden; }
      .dowr .fl { height: 100%; display: block; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
      .dowr.top .fl { background: linear-gradient(90deg, #00707a, var(--info)); }
      .dowr .v { text-align: right; font-variant-numeric: tabular-nums; }
      .dowr.top .v { color: var(--info); font-weight: 700; }
      .mty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 2px; }
      .mty .c { border: 1px solid rgba(var(--gold-line-rgb), 0.26); border-radius: 4px; padding: 4px; background: var(--surface); }
      .mty .h { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
      .mty .v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
      .mty .s { font-size: 11px; color: var(--ink-4); }
      .split3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
      .sp3 { border: 1px solid rgba(var(--gold-line-rgb), 0.3); border-radius: 4px; padding: 8px 8px; background: var(--surface); }
      .sp3 .sp3h { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
      .sp3 .sp3v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
      .sp3 .sp3s { font-size: 11px; color: var(--ink-4); }
      @media (max-width: 420px) { .split3 { grid-template-columns: 1fr; } }
      .adm-hbar { display: flex; align-items: center; gap: 4px; margin: 4px 0; font-size: 12px; }
      .adm-hbar .lb { width: 62px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .adm-hbar .tr { flex: 1; height: 9px; background: var(--surface); border-radius: 2px; overflow: hidden; }
      .adm-hbar .fl { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
      .adm-hbar .fl.lo { background: linear-gradient(90deg, #5a2a1e, var(--orange-2)); }
      .adm-hbar .fl.cy { background: linear-gradient(90deg, #00707a, var(--info)); }
      .adm-hbar .vl { width: 64px; color: var(--ink-3); text-align: right; white-space: nowrap; font-size: 12px; }
      .adm-bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; padding: 12px 2px 0; }
      .adm-bar { flex: 1; background: linear-gradient(180deg, var(--gold), var(--gold-dim)); border-radius: 2px 2px 0 0; position: relative; min-height: 2px; }
      .adm-bar.cur { background: linear-gradient(180deg, var(--info), #00707a); }
      .adm-bar span { position: absolute; top: -12px; left: -6px; right: -6px; text-align: center; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
      .adm-bar-lb { display: flex; gap: 4px; font-size: 11px; color: var(--ink-3); text-align: center; }
      .adm-bar-lb i { flex: 1; font-style: normal; white-space: nowrap; overflow: hidden; }
      .adm-fold { border: 1px solid rgba(var(--gold-line-rgb), 0.25); border-radius: 4px; margin-bottom: 4px; background: var(--surface); }
      .adm-fold > summary { cursor: pointer; padding: 8px; font-size: 13px; font-weight: bold; color: var(--gold-line); list-style: none; }
      .adm-fold > summary::-webkit-details-marker { display: none; }
      .adm-fold > summary::after { content: "›"; float: right; color: var(--ink-3); }
      .adm-fold[open] > summary::after { content: "⌄"; }
      .adm-fold-b { padding: 0 8px 8px; }
      .adm-table-wrap { overflow-x: auto; border: 1px solid rgba(var(--gold-line-rgb), 0.3); border-radius: 4px; }
      .adm-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
      .adm-table th { color: var(--gold-line); text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(var(--gold-line-rgb), 0.35); font-size: 12px; cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--surface); }
      .adm-table td { padding: 4px 8px; border-bottom: 1px solid rgba(var(--gold-line-rgb), 0.14); }
      .adm-table th:first-child, .adm-table td:first-child { position: sticky; left: 0; }
      .adm-table td:first-child { background: var(--bg); box-shadow: 1px 0 0 rgba(var(--gold-line-rgb), 0.3); }
      .adm-table tr.sum td:first-child { background: var(--surface); }
      .adm-table th:first-child { z-index: var(--z-lift-3); box-shadow: 1px 0 0 rgba(var(--gold-line-rgb), 0.3); }
      .adm-table th { z-index: var(--z-lift-2); }
      .modal-content.adm-wide { max-width: 560px; }
      @media (min-width: 900px) { .modal-content.adm-wide { max-width: 860px; } }
      .adm-table td.nm { color: var(--ink-hi); font-weight: bold; cursor: pointer; }
      .adm-table tr.sum td { border-top: 1px solid rgba(var(--gold-line-rgb), 0.5); color: var(--gold); font-weight: bold; }
      .adm-heat { display: grid; grid-template-columns: 34px repeat(7, 1fr); gap: 4px; font-size: 11px; }
      .adm-heat .hl { color: var(--ink-3); display: flex; align-items: center; }
      .adm-heat .hc { height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: rgba(var(--ink-hi-rgb), 0.8); font-size: 11px; }
      .adm-rep-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
      .adm-rep-when { flex: 1; text-align: center; font-size: 12px; color: var(--gold); font-weight: bold; }
      .adm-rep { border: 1px solid rgba(var(--gold-line-rgb), 0.22); border-radius: 4px; background: var(--surface); margin-bottom: 4px; overflow: hidden; }
      .adm-rep-t { display: flex; align-items: center; gap: 8px; padding: 8px 8px; cursor: pointer; }
      .adm-rep-nm { font-size: 12px; font-weight: bold; color: var(--ink); width: 74px; flex-shrink: 0; }
      .adm-rep-ti { font-size: 12px; color: #b8ab97; flex: 1; line-height: 1.35; }
      .adm-rep-tag { font-size: 11px; font-weight: bold; padding: 2px 4px; border-radius: 2px; border: 1px solid #2f6b3f; color: #7bb489; white-space: nowrap; }
      .adm-rep-tag.rule { border-color: #7a5a1f; color: #d0a24a; }
      .adm-rep-b { display: none; padding: 0 8px 8px; border-top: 1px solid var(--card); }
      .adm-rep.open .adm-rep-b { display: block; }
      .adm-rep-f { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--card); font-size: 11px; color: var(--ink-4); }
      /* [2.1078] 오늘 탭 - 이름 시트 · 빈 자리 줄 · 할 일 한 줄 */
      .adm-name { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--card); }
      .adm-name:first-of-type { border-top: 0; }
      .adm-name.can { cursor: pointer; }
      .adm-arrow { color: var(--ink-4); font-size: 12px; margin-left: 8px; }
      .adm-sheet { display: none; gap: 4px; padding: 4px 0 8px; }
      .adm-sheet.on { display: flex; }
      .adm-empty { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 0; border-top: 1px dashed var(--surface-2); margin-top: 4px; font-size: 12px; }
      .adm-link { cursor: pointer; display: flex; align-items: center; gap: 8px; }
      .adm-newoffer { margin-right: 4px; }
      .offer.adm-todo { cursor: pointer; }
      .adm-card .ofx .offer { margin: 0 0 8px; }
      .adm-mini-btn { display: inline-block; font-size: 12px; font-weight: bold; border-radius: 4px; padding: 4px 8px; margin-left: 4px; cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      .adm-mini-btn:active { transform: scale(0.92); filter: brightness(1.35); transition-duration: 0.04s; }
      .adm-mini-ok { background: #2c4a1e; color: #b8f090; border: 1px solid #5c8a3e; }
      .adm-mini-no { background: #4a1e1e; color: #f09090; border: 1px solid #8a3e3e; }
      .adm-stream { font-size: 12px; color: var(--ink-3); }
      .adm-stream > div { padding: 4px 0; border-bottom: 1px solid rgba(var(--gold-line-rgb), 0.12); }
      .adm-stream b { color: var(--ink); font-weight: normal; }
      .adm-stream .tm { color: #8c7757; font-size: 11px; margin-right: 4px; }
      .adm-detail { border: 1px solid rgba(var(--info-rgb), 0.35); border-radius: 4px; padding: 8px 12px; margin: 4px 0 8px; font-size: 13px; background: rgba(var(--info-rgb), 0.03); }
      /* 2.0408(작가 탭 사용성): 가로 스크롤 표 대신 한 줄 카드. 폰에서 바로 읽힌다. */
      .adm-sortbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
      .adm-chip { font-size: 12px; font-weight: bold; color: var(--ink-3); border: 1px solid rgba(var(--gold-line-rgb), 0.4); border-radius: 8px; padding: 4px 8px; cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      .adm-chip:active { transform: scale(0.92); filter: brightness(1.35); transition-duration: 0.04s; }
      .adm-chip.on { color: var(--surface); background: linear-gradient(180deg, var(--gold), var(--gold-line)); border-color: var(--gold); }
      .adm-arow { border: 1px solid rgba(var(--gold-line-rgb), 0.25); border-radius: 4px; background: linear-gradient(90deg, var(--surface), var(--surface)); padding: 8px 12px; margin-bottom: 4px; cursor: pointer; user-select: none; transition: transform 0.15s ease, filter 0.15s ease; }
      .adm-arow:active { transform: scale(0.985); filter: brightness(1.2); transition-duration: 0.04s; }
      .adm-arow.open { border-color: rgba(var(--info-rgb), 0.5); }
      .adm-arow-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
      .adm-arow-name { font-size: 13px; font-weight: bold; color: var(--ink-hi); }
      .adm-arow-main { font-size: 16px; font-weight: bold; color: var(--gold); white-space: nowrap; }
      .adm-arow-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.55; }
      /* 2.0391(B1): ARTISTS 명부 검색창 - 타이핑 즉시 클라이언트 필터(셔플 순서 유지) */
      .artists-search-box { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid rgba(var(--gold-line-rgb), 0.5); border-radius: 4px; padding: 8px 8px; margin: 2px 0 8px; }
      .artists-search-box svg { flex-shrink: 0; opacity: 0.65; }
      .artists-search-box input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--gold); font-size: 13px; font-family: inherit; }
      .artists-search-box input::placeholder { color: rgba(var(--ink-3-rgb), 0.55); }
      /* 2.0379: 스켈레톤 - 캐시가 없어도 뼈대(라벨/이름)는 즉시 보여주고 값 자리만 반짝이는
         바로 채운다 (사장님 지시: 로딩 문구만 보여주지 말고 템플릿을 먼저 보여줘라) */
      .skel-bar { display: inline-block; width: 56px; height: 11px; border-radius: 2px; vertical-align: middle; background: linear-gradient(90deg, rgba(var(--gold-line-rgb), 0.10) 25%, rgba(var(--gold-line-rgb), 0.32) 50%, rgba(var(--gold-line-rgb), 0.10) 75%); background-size: 200% 100%; animation: skelShimmer 1.2s linear infinite; }
      .skel-bar.w-lg { width: 110px; }
      .skel-bar.w-sm { width: 34px; height: 10px; }
      .skel-line { display: block; height: 13px; margin: 8px 0; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--gold-line-rgb), 0.10) 25%, rgba(var(--gold-line-rgb), 0.32) 50%, rgba(var(--gold-line-rgb), 0.10) 75%); background-size: 200% 100%; animation: skelShimmer 1.2s linear infinite; }
      @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: 0% 0; } }
      @media (prefers-reduced-motion: reduce) { .skel-bar, .skel-line { animation: none; } }
      /* 2.0376: 화면이 어떤 버전 코드로 돌고 있는지 확인용 (배포해도 열린 화면은 옛 코드라
         "고쳤는데 그대로다" 혼선 방지 - 새로고침 여부를 눈으로 판별) */
      .carrot-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
        border: 1px solid var(--gold-line); border-left: 4px solid var(--gold); border-radius: 4px;
        background: linear-gradient(180deg, var(--card) 0%, var(--bg) 100%); padding: 4px 12px 4px 8px;
        cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-size: 16px;
        font-weight: bold; color: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.25); }
      .carrot-chip:hover { box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.55); }
      body.tier-guest .carrot-chip, body.tv-mode .carrot-chip { display: none !important; }
      body.tv-mode #gameBtn { display: none !important; }
      .game-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px;
        border-radius: 50%; display: none; box-shadow: 0 0 0 2px var(--bg); }
      .game-dot.on { display: block; background: var(--ok);
        box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--ok); animation: gameDotPulse 1.6s ease-in-out infinite; }
      .game-dot.wait { display: block; background: var(--orange);
        box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--orange); }
      @keyframes gameDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
      @media (prefers-reduced-motion: reduce) { .game-dot.on { animation: none; } }
      .app-version-tag { text-align: center; font-size: 12px; opacity: 0.35; color: var(--ink-3); padding: 8px 0 4px; letter-spacing: 1px; }
      body.tv-mode .app-version-tag { display: none; }
      .day-header .pdb-fold-back { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: 0.8; cursor: pointer; padding: 2px 4px; font-weight: normal; letter-spacing: 0.5px; z-index: var(--z-lift-2); }
      /* 2.0386(A5): 터치 타깃 확장 - 보이는 크기/간격은 1px 도 안 바꾸고 투명 히트 영역만 확대
         (사장님 지시: UI 간격 유지). 원칙 = 이웃 히트 영역과 절대 겹치지 않게, 여유 있는
         방향으로만 확장. tap-tgt: 사방 44px(고립 요소) / tap-tgt-y: 세로만 44px(좌우로 버튼이
         붙은 수락·거절 쌍 - 좌우는 간격 절반인 3px 만) / tap-tgt-x: 가로 위주 소폭(세로로
         촘촘한 슬롯 줄의 ▼ - 왼쪽 이름 링크를 침범하지 않는 선까지만). */
      .tap-tgt, .tap-tgt-y, .tap-tgt-x, .tap-tgt-l, .tap-tgt-r { position: relative; }
      .tap-tgt::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: max(100%, 44px); height: max(100%, 44px); }
      /* 좌우로 붙은 버튼 쌍(사장님 규칙): 왼쪽 버튼은 오른쪽만 빼고 확장, 오른쪽 버튼은 왼쪽만
         빼고 확장, 셋 이상일 때 가운데는 위아래만(tap-tgt-y) - 이웃끼리 절대 안 겹침 */
      .tap-tgt-l::after { content: ""; position: absolute; left: -14px; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
      .tap-tgt-r::after { content: ""; position: absolute; left: 0; right: -14px; top: 50%; transform: translateY(-50%); height: 44px; }
      .tap-tgt-y::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
      .tap-tgt-x::after { content: ""; position: absolute; left: -10px; right: -8px; top: -4px; bottom: -4px; }
      .undo-btn { background: #3a2a00; color: var(--gold); border: 1px solid var(--gold); border-radius: 2px; padding: 2px 4px; cursor: pointer; font-size: 12px; font-weight: bold; flex-shrink: 0; margin-left: 2px; }
      .undo-toast-btn { background: none; border: none; border-bottom: 1px solid var(--gold); color: var(--gold); font-size: 12px; font-weight: bold; cursor: pointer; padding: 0 0 2px; margin-left: 12px; font-family: inherit; }
      .tap-tgt-slot { position: relative; }
      .tap-tgt-slot::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
      .slot-menu-dropdown .tap-tgt-slot::after { top: 0; bottom: 0; }
      @media (prefers-reduced-motion: reduce) { .success-toast { transition: opacity 0.01s linear; } }
      body.tv-mode #megaphoneContainer { grid-area: tvmega; overflow: hidden; }
      #tvMegaFx { position: fixed; inset: 0; z-index: var(--z-nav); display: none; align-items: center; justify-content: center; overflow: hidden; }
      body.tv-mode #tvMegaFx.on { display: flex; }
      #tvMegaFx .fx-in { position: relative; text-align: center; padding: 0 6%; width: 100%; }
      #tvMegaFx .fx-eye { font-weight: 800; text-transform: uppercase; }
      #tvMegaFx .fx-who { font-weight: 800; }
      #tvMegaFx .fx-who .slot-color-bar { width: 0.14em; height: 1em; border-radius: 0.07em; margin-right: 0.36em; vertical-align: -0.08em; }
      #tvMegaFx .fx-who .slot-emoji { font-size: 1em; margin-left: 0.3em; }
      #tvMegaFx .fx-who .title-prefix { font-size: 1em; }
      #tvMegaFx .fx-msg { font-weight: 900; line-height: 1.16; word-break: keep-all; }
      #tvMegaFx.s1 { background: radial-gradient(ellipse at 50% 45%, rgba(60,32,4,0.97), rgba(2,1,1,0.985) 62%); animation: fxFade 0.5s both, fxOut 0.6s ease 14.4s both; }
      #tvMegaFx.s1 .fx-rays { position: absolute; width: 210%; aspect-ratio: 1; left: -55%; top: -55%; background: repeating-conic-gradient(from 0deg, rgba(var(--gold-rgb), 0.075) 0 5deg, transparent 5deg 15deg); animation: fxSpin 26s linear infinite; }
      #tvMegaFx.s1 .fx-sweep { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(var(--ink-hi-rgb), 0.14) 50%, transparent 62%); transform: translateX(-100%); animation: fxSweep 1.5s ease 0.55s 3 both; }
      #tvMegaFx.s1 .fx-edge { position: absolute; inset: 0; box-shadow: inset 0 0 0 3px rgba(var(--gold-rgb), 0.75), inset 0 0 44px rgba(var(--mega-rgb), 0.3); animation: fxEdge 1.05s ease-in-out infinite; }
      #tvMegaFx.s1 .fx-eye { font-size: clamp(9px,1.5vw,15px); letter-spacing: 0.55em; color: #ff6a00; margin-bottom: 1.6vw; animation: fxRise 0.55s ease 0.12s both; }
      #tvMegaFx.s1 .fx-who { font-size: clamp(13px,2.5vw,27px); color: var(--gold); margin-bottom: 1.4vw; text-shadow: 0 0 22px rgba(var(--gold-rgb), 0.5); animation: fxRise 0.55s ease 0.22s both; }
      #tvMegaFx.s1 .fx-msg { font-size: clamp(20px,5vw,62px); color: var(--ink-hi); text-shadow: 0 0 40px rgba(var(--gold-rgb), 0.42), 0 3px 0 rgba(var(--shadow-rgb), 0.5); animation: fxRise 0.6s cubic-bezier(.2,1.3,.4,1) 0.32s both; }
      #tvMegaFx.s2 { background: var(--bg); animation: fxFade 0.18s both, fxOut 0.45s ease 14.55s both; }
      #tvMegaFx.s2 .fx-scan { position: absolute; inset: 0; overflow: hidden;
        background: repeating-linear-gradient(0deg, rgba(var(--info-rgb), 0.05) 0 1px, transparent 1px 3px);
        animation: fxScanRoll 0.55s linear infinite; }
      #tvMegaFx.s2 .fx-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 16%;
        background: linear-gradient(180deg, transparent, rgba(var(--info-rgb), 0.16) 45%, rgba(var(--info-rgb), 0.30) 50%, rgba(var(--info-rgb), 0.16) 55%, transparent);
        animation: fxScanBeam 3.6s cubic-bezier(.45,0,.55,1) infinite; }
      #tvMegaFx.s2 .fx-shock { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border: 2px solid var(--info); border-radius: 50%; animation: fxShock 0.85s cubic-bezier(.1,.8,.3,1) 0.28s 2 both; }
      #tvMegaFx.s2 .fx-bar { position: absolute; left: 0; right: 0; height: 3px; background: var(--info); box-shadow: 0 0 18px var(--info); }
      #tvMegaFx.s2 .fx-bar.t { top: 12%; animation: fxSlideL 0.5s cubic-bezier(.1,.9,.2,1) both; }
      #tvMegaFx.s2 .fx-bar.b { bottom: 12%; animation: fxSlideR 0.5s cubic-bezier(.1,.9,.2,1) both; }
      #tvMegaFx.s2 .fx-eye { font-size: clamp(9px,1.5vw,15px); letter-spacing: 0.6em; color: var(--info); margin-bottom: 1.5vw; animation: fxRise 0.4s ease 0.1s both; }
      #tvMegaFx.s2 .fx-who { font-size: clamp(13px,2.4vw,26px); color: var(--ink-hi); margin-bottom: 1.3vw; letter-spacing: 0.1em; animation: fxRise 0.4s ease 0.2s both; }
      #tvMegaFx.s2 .fx-msg { font-size: clamp(20px,5.2vw,66px); color: var(--ink-hi); text-shadow: 0 0 6px var(--info), 0 0 26px rgba(var(--info-rgb), 0.65), 3px 3px 0 #ff6a00; animation: fxSlam 0.42s cubic-bezier(.15,1.6,.3,1) 0.3s both; }
      #tvMegaFx.s3 { background: var(--bg); animation: fxFade 0.4s both, fxOut 0.8s ease 14.2s both; }
      #tvMegaFx.s3 .fx-beam { position: absolute; left: 50%; top: -12%; width: 62%; height: 130%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,240,200,0.20), rgba(255,220,150,0.05) 55%, transparent 82%); clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); animation: fxBeam 1s ease both, fxSway 4.5s ease-in-out 1s infinite alternate; }
      #tvMegaFx.s3 .fx-pool { position: absolute; left: 50%; top: 52%; width: 74%; aspect-ratio: 3/1; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(255,235,190,0.16), transparent 68%); animation: fxFade 1.1s ease both; }
      #tvMegaFx.s3 .fx-eye { font-size: clamp(8px,1.3vw,13px); letter-spacing: 0.7em; color: #b99a5e; margin-bottom: 1.8vw; animation: fxRise 0.8s ease 0.5s both; }
      #tvMegaFx.s3 .fx-who { font-size: clamp(12px,2.2vw,24px); color: var(--gold); margin-bottom: 1.5vw; letter-spacing: 0.06em; font-weight: 700; animation: fxRise 0.8s ease 0.68s both; }
      #tvMegaFx.s3 .fx-msg { font-size: clamp(19px,4.6vw,58px); color: #fff8ec; text-shadow: 0 0 30px rgba(255,225,170,0.4); animation: fxRise 1s cubic-bezier(.2,.9,.3,1) 0.86s both; }
      @keyframes fxFade { from { opacity: 0; } }
      @keyframes fxOut { to { opacity: 0; } }
      @keyframes fxRise { from { opacity: 0; transform: translateY(26px); } }
      @keyframes fxSpin { to { transform: rotate(360deg); } }
      @keyframes fxSweep { to { transform: translateX(100%); } }
      @keyframes fxEdge { 50% { box-shadow: inset 0 0 0 3px rgba(var(--gold-rgb), 0.28), inset 0 0 68px rgba(var(--mega-rgb), 0.16); } }
      @keyframes fxShock { from { transform: scale(1); opacity: 0.9; } to { transform: scale(150); opacity: 0; } }
      @keyframes fxSlideL { from { transform: translateX(-100%); } }
      @keyframes fxSlideR { from { transform: translateX(100%); } }
      @keyframes fxSlam { from { opacity: 0; transform: scale(2.2); filter: blur(9px); } }
      @keyframes fxBeam { from { opacity: 0; transform: translateX(-50%) scaleY(0.3); } }
      @keyframes fxSway { to { transform: translateX(-50%) rotate(1.6deg); } }
      @keyframes fxScanRoll { from { background-position: 0 0; } to { background-position: 0 -3px; } }
      @keyframes fxScanBeam { 0% { top: -18%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
      #tvMegaFx.s4 { background: radial-gradient(ellipse at 50% 50%, #12000c, var(--bg) 70%); animation: fxFade 0.35s both, fxOut 0.6s ease 14.4s both; }
      #tvMegaFx.s4 .fx-tube { position: absolute; inset: 4%; border: 3px solid var(--pink); border-radius: 8px; box-shadow: 0 0 26px var(--pink), inset 0 0 26px rgba(var(--pink-rgb), 0.55); animation: fxNeonTube 2.4s ease-in-out infinite; }
      #tvMegaFx.s4 .fx-buzz { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(var(--pink-rgb), 0.16), transparent 65%); animation: fxNeonBuzz 3.1s steps(1,end) infinite; }
      #tvMegaFx.s4 .fx-eye { font-size: clamp(9px,1.5vw,15px); letter-spacing: 0.55em; color: #ff86c2; margin-bottom: 1.5vw; animation: fxRise 0.5s ease 0.1s both; }
      #tvMegaFx.s4 .fx-who { font-size: clamp(13px,2.4vw,26px); color: var(--ink-hi); margin-bottom: 1.3vw; text-shadow: 0 0 16px var(--pink); animation: fxRise 0.5s ease 0.2s both; }
      #tvMegaFx.s4 .fx-msg { font-size: clamp(20px,5vw,62px); color: var(--ink-hi); text-shadow: 0 0 10px var(--ink-hi), 0 0 28px var(--pink), 0 0 56px var(--pink); animation: fxNeonFlicker 4.2s steps(1,end) infinite; }
      @keyframes fxNeonTube { 0%,100% { opacity: 1; } 50% { opacity: 0.72; } }
      @keyframes fxNeonBuzz { 0%,92%,100% { opacity: 1; } 94% { opacity: 0.25; } 96% { opacity: 1; } 98% { opacity: 0.4; } }
      @keyframes fxNeonFlicker { 0%,86%,100% { opacity: 1; } 88% { opacity: 0.35; } 90% { opacity: 1; } 92% { opacity: 0.5; } 94% { opacity: 1; } }
      #tvMegaFx.s5 { background: radial-gradient(ellipse at 50% 50%, #0d1a1a, var(--bg) 72%); animation: fxFade 0.4s both, fxOut 0.6s ease 14.4s both; }
      #tvMegaFx.s5 .fx-ink { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 48% 52% 46% 54% / 50% 46% 54% 50%; border: 2px solid rgba(var(--info-rgb), 0.55); animation: fxInkSpread 3.4s cubic-bezier(.2,.7,.3,1) infinite; }
      #tvMegaFx.s5 .fx-ink.d2 { animation-delay: 1.13s; border-color: rgba(var(--info-rgb), 0.35); }
      #tvMegaFx.s5 .fx-ink.d3 { animation-delay: 2.26s; border-color: rgba(var(--info-rgb), 0.2); }
      #tvMegaFx.s5 .fx-eye { font-size: clamp(9px,1.5vw,15px); letter-spacing: 0.55em; color: var(--info); margin-bottom: 1.5vw; animation: fxRise 0.5s ease 0.1s both; }
      #tvMegaFx.s5 .fx-who { font-size: clamp(13px,2.4vw,26px); color: #bff9ff; margin-bottom: 1.3vw; animation: fxRise 0.5s ease 0.2s both; }
      #tvMegaFx.s5 .fx-msg { font-size: clamp(20px,5vw,62px); color: var(--ink-hi); text-shadow: 0 0 30px rgba(var(--info-rgb), 0.6); animation: fxRise 0.6s cubic-bezier(.2,1.3,.4,1) 0.3s both; }
      @keyframes fxInkSpread { 0% { transform: scale(0.25) rotate(0deg); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: scale(3.6) rotate(90deg); opacity: 0; } }
      #tvMegaFx.s6 { background: var(--bg); animation: fxFade 0.2s both, fxOut 0.6s ease 14.4s both; }
      #tvMegaFx.s6 .fx-stripe { position: absolute; inset: -40%; background: repeating-linear-gradient(52deg, rgba(var(--gold-rgb), 0.11) 0 22px, transparent 22px 62px); animation: fxStripeRun 1.5s linear infinite; }
      #tvMegaFx.s6 .fx-flashbg { position: absolute; inset: 0; background: rgba(var(--gold-rgb), 0.16); animation: fxStrobe 1.5s steps(1,end) infinite; }
      #tvMegaFx.s6 .fx-eye { font-size: clamp(9px,1.5vw,15px); letter-spacing: 0.55em; color: var(--gold); margin-bottom: 1.5vw; animation: fxRise 0.4s ease 0.08s both; }
      #tvMegaFx.s6 .fx-who { font-size: clamp(13px,2.4vw,26px); color: var(--ink-hi); margin-bottom: 1.3vw; animation: fxRise 0.4s ease 0.16s both; }
      #tvMegaFx.s6 .fx-msg { font-size: clamp(20px,5.2vw,64px); color: var(--ink-hi); text-shadow: 0 3px 0 var(--bg), 0 0 34px rgba(var(--gold-rgb), 0.55); animation: fxPunch 1.5s ease-in-out infinite; }
      @keyframes fxStripeRun { to { transform: translate(62px, -48px); } }
      @keyframes fxStrobe { 0% { opacity: 0.55; } 6% { opacity: 0; } 100% { opacity: 0; } }
      @keyframes fxPunch { 0% { transform: scale(1.035); } 14%,100% { transform: scale(1); } }
      #tvMegaFx.s7 { background: radial-gradient(ellipse at 50% 110%, var(--card), var(--bg) 68%); animation: fxFade 0.5s both, fxOut 0.6s ease 14.4s both; }
      #tvMegaFx.s7 .fx-ember { position: absolute; inset: 0; background: radial-gradient(2px 2px at 12% 90%, var(--warn-soft), transparent), radial-gradient(2px 2px at 28% 96%, var(--gold), transparent), radial-gradient(1.5px 1.5px at 44% 88%, var(--orange), transparent), radial-gradient(2px 2px at 61% 97%, var(--gold), transparent), radial-gradient(1.5px 1.5px at 77% 91%, var(--warn-soft), transparent), radial-gradient(2px 2px at 90% 95%, var(--orange), transparent); animation: fxEmberUp 5.2s linear infinite; }
      #tvMegaFx.s7 .fx-ember.e2 { animation-duration: 7.4s; animation-delay: -2.6s; opacity: 0.65; }
      #tvMegaFx.s7 .fx-glowfloor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(0deg, rgba(255,138,31,0.28), transparent); animation: fxFloorPulse 2.8s ease-in-out infinite; }
      #tvMegaFx.s7 .fx-eye { font-size: clamp(9px,1.5vw,15px); letter-spacing: 0.55em; color: var(--orange); margin-bottom: 1.5vw; animation: fxRise 0.55s ease 0.12s both; }
      #tvMegaFx.s7 .fx-who { font-size: clamp(13px,2.4vw,26px); color: var(--gold); margin-bottom: 1.3vw; animation: fxRise 0.55s ease 0.22s both; }
      #tvMegaFx.s7 .fx-msg { font-size: clamp(20px,5vw,62px); color: var(--ink-hi); text-shadow: 0 0 38px rgba(255,138,31,0.6); animation: fxRise 0.6s cubic-bezier(.2,1.3,.4,1) 0.32s both; }
      @keyframes fxEmberUp { from { transform: translateY(0); } to { transform: translateY(-110%); } }
      @keyframes fxFloorPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
      @media (prefers-reduced-motion: reduce) { #tvMegaFx, #tvMegaFx * { animation: none !important; } }
      body.tv-mode #chatContainer { grid-area: tvchat; overflow: hidden; }
      body.tv-mode #activityLogContainer { grid-area: tvlog; overflow: hidden; }
      body.tv-mode #tvRankingsContainer { display: block; grid-area: tvrank; overflow: hidden; }
      body.tv-mode #tvRankingsContainer, body.tv-mode #megaphoneContainer,
      body.tv-mode #chatContainer, body.tv-mode #activityLogContainer,
      body.tv-mode .tv-header-bar { min-height: 0; height: 100%; box-sizing: border-box; }
      body.tv-mode .megaphone-panel, body.tv-mode .chat-panel, body.tv-mode .activity-log-panel, body.tv-mode .tv-rankings-panel { margin-bottom: 0; height: 100%; }
      body.tv-mode .megaphone-input-row, body.tv-mode .megaphone-quota-line, body.tv-mode .megaphone-more-btn, body.tv-mode .activity-log-more-btn { display: none !important; }
      body.tv-mode .chat-input-row, body.tv-mode .chat-quota-line, body.tv-mode .chat-more-btn { display: none !important; }
      /* TV 챗: 챗은 아래로 갈수록 최신인데 칸이 overflow:hidden 이라 최신(아래)이 잘리던 문제.
         목록을 바닥에 고정해 넘치는 만큼 위(오래된 쪽)가 잘려나가게 한다. */
      body.tv-mode .chat-panel { display: flex; flex-direction: column; box-sizing: border-box; }
      body.tv-mode #chatList { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
        -webkit-mask-image: linear-gradient(to bottom, rgba(var(--shadow-rgb), 0) 0, rgba(var(--shadow-rgb), 0.35) 22px, var(--bg) 58px, var(--bg) 100%);
        mask-image: linear-gradient(to bottom, rgba(var(--shadow-rgb), 0) 0, rgba(var(--shadow-rgb), 0.35) 22px, var(--bg) 58px, var(--bg) 100%); }
      body.tv-mode #shiftsContainer { grid-area: tvgrid; height: 100%; }
      /* [2.0739] TV 세 번째 화면 - 오늘 예약. **로스터 판 대신 통째로 갈아 끼운다.**
         로스터 칸에는 손대지 않는다 - 그걸 건드려서 다섯 번 어긋났다. */
      #tvTimeline { display: none; }
      body.tv-mode #tvTimeline { grid-area: tvgrid; height: 100%; min-height: 0; }
      /* [2.0739] PC 아래쪽 오늘 타임라인 (사장님 확정: 새3).
         로스터 판 아래에 붙는다 - 로스터에는 손대지 않는다.
         좁은 화면에선 안 나온다: 가로가 있어야 시간축이 뜻이 있다. */
      .ros-panel { background: var(--bg);
                   border: 1px solid var(--gold-line); border-radius: 4px;
                   overflow: hidden; padding: 8px; margin-bottom: 12px; }
      .ros-head { display: flex; align-items: center; justify-content: space-between;
                  gap: 8px; min-height: 34px; padding: 4px 2px; margin: 0 0 4px; }
      .ros-title { font-size: 12px; font-weight: 900; letter-spacing: 1.6px; color: var(--gold);
                   border-left: 3px solid var(--gold); padding-left: 8px; }
      .ros-cap { margin-right: auto; display: flex; align-items: center; gap: 4px; }
      .ros-cap .capacity-mini { display: flex; align-items: center; gap: 4px; margin: 0; }
      .ros-cap .capacity-mini-bar { width: 54px; }
      .ros-week { font-size: 12px; letter-spacing: 1px; color: var(--ink-3); text-align: right;
                  font-variant-numeric: tabular-nums; }
      .ros-body { padding: 0; }
      .ros-body .nav-btn-row { margin-bottom: 8px; }
      body.tv-mode .ros-head { display: none !important; }
      body.tv-mode .ros-panel { display: contents; }
      body.tv-mode .ros-body { display: contents; }
      body.tier-guest .ros-panel { display: none !important; }
      #pcTimeline { display: none; margin: 0 0 8px; }
      .pcal-sc { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .pcal-ln { display: flex; height: 100%; min-width: 100%; }
      .pcal-ln .pcal-c { flex: 1 0 auto; min-width: 58px; }
      .pcal-ln .pcal-c.pcal-ros { flex: 0 0 104px; }
      .pcal-nowt { position: absolute; right: 3px; margin-top: 40px; transform: translateY(-50%);
                   background: var(--danger-pill); color: var(--ink-hi); font-size: 11px; font-weight: 900;
                   border-radius: 4px; padding: 2px 4px; z-index: var(--z-lift-3); letter-spacing: 0.2px;
                   font-variant-numeric: tabular-nums; }
      .pcal-axd .pcal-nowt { margin-top: 28px; }
      .pcal-fl { padding: 8px 2px 0; font-size: 13px; color: var(--ink-3); line-height: 1.7;
                 font-family: var(--uifont); border-top: 1px solid var(--surface); }
      .pcal-fy { color: var(--gold); font-weight: bold; letter-spacing: 0.5px; }
      .pcal-fg { color: var(--ok); font-weight: bold; letter-spacing: 0.5px; }
      .pcal-ft { color: var(--ink-2); font-variant-numeric: tabular-nums; }
      .pcal-fq { color: var(--ink-4); }
      .bf-box { margin: 8px 0 12px; }
      .bf-q { position: relative; }
      .bf-q input { width: 100%; box-sizing: border-box; background: var(--bg);
                    border: 1px solid var(--surface-2); border-radius: 4px; color: var(--ink);
                    font-size: 13px; padding: 8px 28px 8px 12px; font-family: var(--uifont);
                    -webkit-appearance: none; }
      .bf-q input:focus { outline: none; border-color: var(--line); }
      .bf-q input::placeholder { color: var(--ink-4); }
      .bf-qx { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
               color: var(--ink-4); font-size: 12px; cursor: pointer; }
      .bf-note { padding: 8px 2px; font-size: 13px; color: var(--ink-4);
                 font-family: var(--uifont); }
      .bf-more { text-align: center; padding: 8px; margin-top: 2px; cursor: pointer;
                 font-size: 12px; letter-spacing: 1.2px; color: var(--gold);
                 border: 1px solid var(--surface-2); border-radius: 4px; font-family: var(--uifont); }
      .bf-more:hover { border-color: var(--line); background: rgba(var(--gold-rgb), 0.05); }
      .bf-hd { display: flex; align-items: center; gap: 4px; margin: 8px 0 4px;
               font-size: 11px; letter-spacing: 1.4px; color: var(--ink-4); font-weight: bold;
               font-family: var(--uifont); }
      .bf-hd b { color: var(--gold); font-variant-numeric: tabular-nums; }
      .bf-hd.fold { cursor: pointer; }
      .bf-hd.fold i { margin-left: auto; font-style: normal; color: var(--ink-4); }
      .bf-r { display: flex; align-items: baseline; gap: 8px; cursor: pointer;
              padding: 8px 8px; border-left: 3px solid var(--c);
              border-bottom: 1px solid var(--surface); background: rgba(var(--bg-rgb), 0.6); }
      .bf-r:hover { background: rgba(var(--gold-rgb), 0.05); }
      .bf-d { font-size: 12px; color: var(--warn-soft); font-family: var(--uifont);
              font-variant-numeric: tabular-nums; flex: 0 0 74px; }
      .bf-t { font-size: 12px; color: var(--ink-2); font-family: var(--uifont);
              font-variant-numeric: tabular-nums; flex: 0 0 84px; }
      .bf-a { font-size: 12px; color: var(--c); flex: 0 0 84px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .bf-c { font-size: 13px; color: var(--ink-hi); flex: 1; min-width: 0;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .bf-y { font-size: 11px; letter-spacing: 1px; color: var(--ink-4);
              font-family: var(--uifont); flex: 0 0 auto; }
      @media (max-width: 768px) {
        .bf-r { flex-wrap: wrap; gap: 4px 8px; }
        .bf-d, .bf-t { flex: 0 0 auto; }
        .bf-a { flex: 0 0 auto; }
        .bf-c { flex: 1 0 100%; }
      }
      @media (max-width: 768px) {
        #pcTimeline { margin: 0 0 8px; }
        .pcal-w, .pcal-d { height: 420px; }
        .pcal-ax { width: 42px; }
        .pcal-tit { font-size: 12px; margin-left: 4px; }
        .pcal-btn { min-width: 22px; height: 22px; padding: 0 4px; font-size: 12px; }
        .pcal-s { padding: 4px 8px; }
        .pcal-mc { padding: 4px 4px; }
        .pcal-mg { grid-auto-rows: 66px; }
        .pcal-mh span { font-size: 11px; padding: 4px 0; }
        .pcal-mn { font-size: 11px; gap: 2px; }
        .pcal-mn i { font-size: 11px; padding: 0 2px; letter-spacing: 0.3px; }
        .pcal-mc.on .mn-d { padding: 0 4px; }
        .pcal-mb { margin-top: 12px; height: 3px; }
        .pcal-mv { font-size: 13px; margin-top: 2px; }
      }
      body.tv-mode #pcTimeline { display: none !important; }
      #pcTimeline .tlwrap { height: 520px; margin: 12px 0 8px; }
      #pcTimeline .tlt { font-size: 14px; padding: 8px 12px; }
      #pcTimeline .tlname { width: 48px; }
      #pcTimeline .tlbk { font-size: 13px; padding: 0 4px; }
      #pcTimeline .tlbk em { font-size: 12px; }
      #pcTimeline .dch { font-size: 12px; padding: 2px 8px; }
      #pcTimeline .dlab { font-size: 12px; }
      body.tv-mode.tv-tl #tvTimeline { display: flex; }
      body.tv-mode.tv-tl #shiftsContainer { display: none !important; }
      /* [2.0739] TV 로스터 화면에는 예약 칸을 안 붙인다(사장님 지시).
         이번 주 로스터 · 다음 주 로스터 · 오늘 예약 셋으로 나눠 도는데,
         로스터 화면이 예약까지 이고 가면 칸만 좁아지고 로스터 글씨가 작아진다. */
      /* [2.0739] TV 세 번째 화면 - 오늘 타임라인. 확정 목업 build_tv2.js T3-a 그대로.
         레인 압축: 줄이 아티스트가 아니라 **겹치지 않는 예약 묶음**이다.
         TV 는 스크롤이 없어서 아티스트마다 한 줄을 주면 25명일 때 그냥 넘친다. */
      .tlwrap { flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; width: 100%; }
      .tlt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--card-up); color: var(--gold); font-size: 16px; font-weight: bold; letter-spacing: 1px; background: linear-gradient(180deg,var(--card),var(--bg)); flex-shrink: 0; }
      .tlt .c2 { color: var(--info-ink); }
      .tlt .c3 { color: var(--ink-3); }
      .tlt .rot { margin-left: auto; font-size: 13px; color: var(--ink-4); font-family: var(--uifont); font-weight: normal; letter-spacing: 0; }
      .dstrip { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--card-up); background: var(--bg); flex-shrink: 0; flex-wrap: wrap; }
      .dlab { font-size: 12px; letter-spacing: 2px; color: var(--ink-4); font-family: var(--uifont); }
      .dgrp { display: flex; align-items: center; gap: 8px; }
      .dgrp b { color: var(--gold); font-size: 12px; letter-spacing: 1px; font-family: var(--uifont); margin-right: 4px; }
      .dch { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; font-size: 14px; color: var(--ink); }
      .dch i { width: 4px; height: 14px; border-radius: 2px; display: block; }
      .tl { flex: 1; min-height: 0; display: flex; flex-direction: column; }
      .tlrow { display: flex; flex: 1; min-height: 0; border-bottom: 1px solid var(--surface); }
      .tlrow.tlhead { flex: 0 0 26px; background: var(--bg); }
      .tlname { width: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border-right: 1px solid var(--card-up); font-size: 16px; color: var(--ink); overflow: hidden; white-space: nowrap; }
      .tlname .lnum { color: var(--ink-4); font-size: 13px; font-family: var(--uifont); letter-spacing: 2px; }
      .tltrack { flex: 1; position: relative; background: var(--bg); }
      .tlv { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--surface); }
      .tlh { position: absolute; top: 5px; font-size: 12px; color: var(--ink-4); font-family: var(--uifont); margin-left: 4px; }
      .tlband { position: absolute; top: 0; bottom: 0; background: rgba(var(--gold-rgb), .1); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
      .tlband i { position: absolute; bottom: 1px; left: 5px; font-style: normal; font-size: 12px; color: #b08a3a; letter-spacing: 1px; font-family: var(--uifont); }
      .tlbk { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; background: #0e1319; border: 1px solid var(--ac); border-left: 6px solid var(--ac); overflow: hidden; white-space: nowrap; font-size: 16px; color: var(--ink-2); padding: 0 8px; display: flex; align-items: center; gap: 4px; font-family: var(--uifont); }
      .tlout { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; font-size: 16px; color: #c8b89c; padding-left: 8px; font-family: var(--uifont); pointer-events: none; }
      .tlout::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ac); flex-shrink: 0; }
      .tlout .cl { color: #9db4c8; }
      .tlout u { text-decoration: none; font-size: 12px; font-weight: 900; margin-left: 4px; }
      .tlout u.op { color: var(--purple); }
      .tlout u.ty { letter-spacing: 0.4px; }
      .tlout u.ty.cat-s { color: var(--info-2); }
      .tlout u.ty.cat-p { color: var(--ok); }
      .tlout u.ty.cat-w { color: var(--ink-3); }
      .tlbk b { color: var(--ink-hi); }
      .tlbk .title-prefix { font-size: 0.8em; margin-right: 4px; }
      .tlbk .slot-emoji { font-size: 0.9em; margin-left: 4px; }
      .tlbk s { text-decoration: none; color: var(--ink-4); }
      .tlbk .cl { color: #c9b8a0; }
      .tlbk em { font-style: normal; color: var(--ink-4); font-size: 13px; }
      .tlbk u { text-decoration: none; color: var(--purple); font-size: 12px; font-weight: 900; margin-left: auto; }
      .tlbk u.ty { margin-left: auto; letter-spacing: 0.4px; }
      .tlbk u.ty + u { margin-left: 4px; }
      .tlbk u.ty.cat-s { color: var(--info-2); }
      .tlbk u.ty.cat-p { color: var(--ok); }
      .tlbk u.ty.cat-w { color: var(--ink-3); }
      .tlbk.past { opacity: .4; }
      .tlnow { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--info); box-shadow: 0 0 8px rgba(var(--info-rgb), .8); z-index: var(--z-lift-4); }
      .tlempty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-4); font-size: 22px; letter-spacing: 2px; }
      body.tv-mode .grid-container { grid-template-columns: none !important;
        grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        gap: 4px; height: 100%; }
      body.tv-mode .day-col { height: 100%; }
      body.tv-mode .day-header { font-size: 24px !important; padding: 6px 2px; height: 78px; min-height: 78px; max-height: 78px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
      /* [2.0622] TODAY 배지가 줄 높이를 키워 그 칸만 헤더가 두꺼워졌다(사장님 TV 제보).
         절대 위치로 띄워 높이 계산에서 빼낸다 - pdb-fold-back 이 쓰는 방법과 같다. */
      body.tv-mode .day-header .today-badge, body.tv-mode .day-header .just-opened-badge, body.tv-mode .day-header .opening-soon-badge { position: absolute; top: 4px; right: 6px; margin-left: 0; font-size: 12px; }
      body.tv-mode .day-date { font-size: 16px !important; white-space: nowrap; }
      body.tv-mode .shift-title-text { font-size: 20px !important; font-weight: 900 !important; display: block; }
      body.tv-mode .shift-time-text { font-size: 15px !important; font-weight: 800 !important; display: block; }
      body.tv-mode .slot-card { font-size: 17px !important; padding: 4px 8px; height: 46px; min-height: 46px; max-height: 46px;
        display: flex; align-items: center; overflow: hidden; }
      body.tv-mode .lock-notice { font-size: 15px !important; padding: 14px 8px; line-height: 1.55; }
      body.tv-mode .shift-block { min-height: 0; }
      body.tv-mode .tw-btn { display: none !important; }
      /* TV는 전시용 - 슬롯 안의 관리/액션 버튼(노쇼/지각/승인/거절/양도/취소)도 전부 숨긴다 */
      body.tv-mode .admin-btn, body.tv-mode .transfer-btn, body.tv-mode .cancel-btn { display: none !important; }
      body.tv-mode .mobile-bottom-nav { display: none !important; }
      
      @media screen and (max-width: 768px) {
        body:not(.tv-mode) { padding: 8px; padding-bottom: 70px; font-size: 12px; }
        body:not(.tv-mode) .grid-container { grid-template-columns: 1fr; }
        body:not(.tv-mode) .day-col { min-width: 100%; }
        body:not(.tv-mode) .panels-row { flex-direction: column; }
        body:not(.tv-mode) .tw-btn { width: 100%; margin-bottom: 4px; text-align: center; }
        body:not(.tv-mode) .app-nav-row .tw-btn { width: auto; margin-bottom: 0; }
        /* [2.1076] **주 넘기는 줄은 하나면 된다.** 예전엔 위(.nav-btn-row)와 아래(고정)가 같이 떠서
           같은 일을 하는 단추가 여섯 개였다. 휴대폰은 아래 고정 줄만 쓴다 - 엄지가 닿는 자리다.
           그래서 위 줄 안의 THIS WEEK · TODAY 를 따로 켜고 끄던 규칙 두 줄도 필요 없어졌다. */
        body:not(.tv-mode) .nav-btn-row { display: none !important; }
        body:not(.tv-mode) .mobile-bottom-nav {
          display: flex !important;
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background: rgba(12, 8, 5, 0.98);
          border-top: 2px solid var(--gold-line);
          padding: 8px;
          gap: 4px;
          z-index: var(--z-nav);
          box-shadow: 0 -4px 15px rgba(var(--shadow-rgb), 0.8);
        }
        body:not(.tv-mode) .mobile-bottom-nav .tw-btn { margin-bottom: 0; font-size: 11px; padding: 8px 4px; }
        /* [2.0952] **쌩 게스트에게는 맨 아래 주 넘기기 줄도 없다.** 위쪽 tier-guest 규칙만
           두면 이 좁은 화면 규칙이 뒤에서 다시 켠다(둘 다 !important 라 나중 것이 이긴다).
           게스트에게는 로스터가 아예 없으니 주를 넘길 곳도 없다. */
        body:not(.tv-mode).tier-guest .mobile-bottom-nav { display: none !important; }
      }

      @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"]) h1 { text-shadow: 0 0 8px #783c00; }
        :root:not([data-theme="dark"]) .push-row .pr-btn-off { border: 1px solid #c9a162; }
        :root:not([data-theme="dark"]) .title-prefix { color: #5f574c; }
        :root:not([data-theme="dark"]) .titles-tap-hint { color: #71655a; }
        :root:not([data-theme="dark"]) .title-badge.locked .title-badge-name { color: #7d705f; }
        :root:not([data-theme="dark"]) .title-badge-desc { color: #71655a; }
        :root:not([data-theme="dark"]) .title-badge.locked .title-badge-desc { color: #7c705f; }
        :root:not([data-theme="dark"]) .ladder-flavor { color: #71655a; }
        :root:not([data-theme="dark"]) .ladder-node.t-green.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #030a00, var(--ok) 60%); }
        :root:not([data-theme="dark"]) .ladder-node.t-blue.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #001527, var(--blue) 60%); }
        :root:not([data-theme="dark"]) .ladder-node.t-purple.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #29004a, var(--purple-3) 60%); }
        :root:not([data-theme="dark"]) .ladder-node.t-orange.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #211100, var(--orange) 60%); }
        :root:not([data-theme="dark"]) .ladder-node.t-gold.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #110e00, var(--gold) 60%); }
        :root:not([data-theme="dark"]) .rep-tab-dot { background: #bb0022; }
        :root:not([data-theme="dark"]) .rep-dot { background: #bb0022; }
        :root:not([data-theme="dark"]) .rep-range { color: #63594a; }
        :root:not([data-theme="dark"]) .rep-intro { border: 1px solid #e1ba82; }
        :root:not([data-theme="dark"]) .tier-mote { background: #0c0a00; }
        :root:not([data-theme="dark"]) .tw-btn-primary { background: linear-gradient(180deg, #241e00 0%, var(--gold) 100%); }
        :root:not([data-theme="dark"]) .online-dot.off { background: #beb09b; }
        :root:not([data-theme="dark"]) .tw-btn-confirm { border: 1px solid #042700; }
        :root:not([data-theme="dark"]) .tw-btn-danger { background: linear-gradient(180deg, #d70000 0%, #ffd9d9 100%); }
        :root:not([data-theme="dark"]) .day-col.just-opened .day-header { background: linear-gradient(180deg, #bf8e00 0%, #ffd565 100%) !important; }
        :root:not([data-theme="dark"]) .day-col.opening-soon .day-header { background: linear-gradient(180deg, #70cff2 0%, #c9edf9 100%) !important; }
        :root:not([data-theme="dark"]) .slot-card.pending-cancel-slot { background: rgba(215, 0, 0, 0.2) !important; }
        :root:not([data-theme="dark"]) .slot-card.pending-transfer-slot { background: rgba(0, 66, 85, 0.2) !important; }
        :root:not([data-theme="dark"]) .capacity-mini-fill { background: linear-gradient(90deg, #783c00, var(--gold)); }
        :root:not([data-theme="dark"]) .shift-block.today-shift { background: rgba(10, 173, 255, 0.25) !important; }
        :root:not([data-theme="dark"]) .shift-time-text { color: #00231c; }
        :root:not([data-theme="dark"]) .cancel-btn { background: #fecece; }
        :root:not([data-theme="dark"]) .transfer-btn { background: #3bccff; }
        :root:not([data-theme="dark"]) .admin-btn { background: #e0b300; }
        :root:not([data-theme="dark"]) .bk-cl { color: #524838; }
        :root:not([data-theme="dark"]) .bk-h-time { color: #1d1500; }
        :root:not([data-theme="dark"]) .d-v { color: #463928; }
        :root:not([data-theme="dark"]) .c-when { color: #1d1500; }
        :root:not([data-theme="dark"]) .tw-input.deco.fixed b { color: #463928; }
        :root:not([data-theme="dark"]) .ofx .ph-kbd b { background: #e4e0ed; }
        :root:not([data-theme="dark"]) .ofx .ph-n2 b { background: #ece9f0; }
        :root:not([data-theme="dark"]) .ofx .ios-c { background: rgba(224, 220, 216,.97); }
        :root:not([data-theme="dark"]) .ofx .ios-t { color: #62594e; }
        :root:not([data-theme="dark"]) .ofx .ios-r { color: #0042a7; }
        :root:not([data-theme="dark"]) .ofx .ios-c.one .ios-r { color: #0042a7; }
        :root:not([data-theme="dark"]) .ofx .bb { background: #decaae; }
        :root:not([data-theme="dark"]) .ofx .lb-dots i { background: #cfc5b4; }
        :root:not([data-theme="dark"]) .offer.bday { border-color: #b99037; }
        :root:not([data-theme="dark"]) .brule { background: linear-gradient(90deg,transparent,#b99037,transparent); }
        :root:not([data-theme="dark"]) .bseal { border: 1px solid #b99037; }
        :root:not([data-theme="dark"]) .bbody { border-top: 1px solid #b99037; }
        :root:not([data-theme="dark"]) .bday-done .bdcar { color: #8d682a; }
        :root:not([data-theme="dark"]) .bday-done .bdmini { color: #0d251a; }
        :root:not([data-theme="dark"]) .lvb { border: 1px solid #b18334; }
        :root:not([data-theme="dark"]) .lvb.no { border-color: #e1abab; background: #fbefef; }
        :root:not([data-theme="dark"]) .lst.chg { border-color: #71b6d2; background: #c9e8f5; }
        :root:not([data-theme="dark"]) .bref { background: #dcede8; border: 1px solid #37b082; }
        :root:not([data-theme="dark"]) .brefg i { color: #577468; }
        :root:not([data-theme="dark"]) .brefg b { color: #0d251a; }
        :root:not([data-theme="dark"]) .brefg u { color: #577468; }
        :root:not([data-theme="dark"]) .brefn { color: #0d251a; border-top: 1px solid #79d3b2; }
        :root:not([data-theme="dark"]) .bmine { color: #8d682a; }
        :root:not([data-theme="dark"]) .ofx input.bday-in { border: 1px solid #b18334; }
        :root:not([data-theme="dark"]) #ofBusyBox, :root:not([data-theme="dark"]) #actBusyBox { border: 1px solid #b99037; }
        :root:not([data-theme="dark"]) .ofx .ay { border: 1px solid #3fb825; }
        :root:not([data-theme="dark"]) .ofx .arb { border: 1px solid #b99037; }
        :root:not([data-theme="dark"]) .ofx .lst.ok { border: 1px solid #3bb628; }
        :root:not([data-theme="dark"]) .ofx .lst.no { border: 1px solid #f1c0c0; }
        :root:not([data-theme="dark"]) .ofx .ln { color: #524838; }
        :root:not([data-theme="dark"]) .ofx .ohand b { color: #00141c; }
        :root:not([data-theme="dark"]) .ofx .obk b { color: #671200; }
        :root:not([data-theme="dark"]) .ofx .prb.on.no { border-color: #a6a6a6; }
        :root:not([data-theme="dark"]) .ofx .prr.full { color: #891d00; }
        :root:not([data-theme="dark"]) .ofx .ax.leave { border-color: #c5b1dd; }
        :root:not([data-theme="dark"]) .ofx .hn i.r, :root:not([data-theme="dark"]) .ofx .wn i.r { border: 1px solid #69afc6; }
        :root:not([data-theme="dark"]) .ofx .hn i.g, :root:not([data-theme="dark"]) .ofx .wn i.g { border: 1px solid #c6b2de; }
        :root:not([data-theme="dark"]) .ofx .hms { border: 1px solid #48cd2c; }
        :root:not([data-theme="dark"]) .ofx .hbar { background: #decaae; }
        :root:not([data-theme="dark"]) .ofx .wr.warn .wn { color: #372300; }
        :root:not([data-theme="dark"]) .ofx .mvb.on { background: #4a3d23; }
        :root:not([data-theme="dark"]) .ofx .inb .gc { box-shadow: inset 0 0 0 1px rgba(147, 45, 0,.26); }
        :root:not([data-theme="dark"]) .ofx .inb .gc.wrk { background: #3faa7f; }
        :root:not([data-theme="dark"]) .ofx .inb .gc.wrk.g { background: #7aa1cf; }
        :root:not([data-theme="dark"]) .ofx .sw.wrk { background: #3faa7f; }
        :root:not([data-theme="dark"]) .ofx .sw.wrkg { background: #7aa1cf; }
        :root:not([data-theme="dark"]) .ofx .sw.none { box-shadow: inset 0 0 0 1px rgba(147, 45, 0,.26); }
        :root:not([data-theme="dark"]) .ofx .alert { background: #fcf1ef; }
        :root:not([data-theme="dark"]) .ofx .alert .ai { color: #a21e00; }
        :root:not([data-theme="dark"]) .ofx .bfn i.r { border: 1px solid #69afc6; }
        :root:not([data-theme="dark"]) .ofx .bfn i.g { border: 1px solid #c6b2de; }
        :root:not([data-theme="dark"]) .ofx .bfx.on { background: #dccbc0; }
        :root:not([data-theme="dark"]) .ofx .bfg.dead { color: #816e59; }
        :root:not([data-theme="dark"]) .lock-notice { background: rgba(179, 48, 0, 0.15); border: 1px solid #b33000; }
        :root:not([data-theme="dark"]) .offline-bar { background: linear-gradient(90deg, #ffba54, #da8400); }
        :root:not([data-theme="dark"]) .offline-empty { background: rgba(255, 186, 84,0.25); }
        :root:not([data-theme="dark"]) .offline-empty .oe-t { color: #2c1800; }
        :root:not([data-theme="dark"]) .network-status { background: rgba(249, 222, 222,0.94); }
        :root:not([data-theme="dark"]) .network-status.off { background: rgba(241, 207, 172,0.94); }
        :root:not([data-theme="dark"]) .transfer-banner { background: linear-gradient(90deg, #97e0ff, var(--info-bg)); }
        :root:not([data-theme="dark"]) .title-earned-banner { background: linear-gradient(90deg, var(--surface-2), #d28f00); }
        :root:not([data-theme="dark"]) .bkclash { border: 1px solid #e7aeae; background: rgba(199, 0, 0,0.09); }
        :root:not([data-theme="dark"]) .bkclash b { color: #8d0000; }
        :root:not([data-theme="dark"]) .bkclash i { color: #473a26; }
        :root:not([data-theme="dark"]) .panel-chv { color: #7d6c4e; }
        :root:not([data-theme="dark"]) .panel-badge { background: #d8504d; }
        :root:not([data-theme="dark"]) .panel-badge.quiet { background: #e0caa5; }
        :root:not([data-theme="dark"]) .aa-who span i { color: #8d0000; }
        :root:not([data-theme="dark"]) .ap-search input::placeholder { color: #7d6c4e; }
        :root:not([data-theme="dark"]) .pl-sub.bad { color: #af2525; }
        :root:not([data-theme="dark"]) .panel-empty-hint { color: #7d6c4e; }
        :root:not([data-theme="dark"]) .feed-del { color: #7d6c4e; }
        :root:not([data-theme="dark"]) .slot-lock { color: #7d6c4e; }
        :root:not([data-theme="dark"]) .megaphone-item.admin-slot { border: 1px solid #8f3b00; }
        :root:not([data-theme="dark"]) .megaphone-item.admin-slot .megaphone-text, :root:not([data-theme="dark"]) .megaphone-item.active-slot .megaphone-text { background: linear-gradient(90deg, #0d0b00, var(--gold), #0d0b00); }
        :root:not([data-theme="dark"]) .podium-1st { background: linear-gradient(180deg, #d8a30f 0%, var(--surface) 100%); }
        :root:not([data-theme="dark"]) .podium-2nd { background: linear-gradient(180deg, #b1b4ba 0%, #eceef0 100%); border-color: #373737; box-shadow: 0 0 8px rgba(55, 55, 55, 0.3); }
        :root:not([data-theme="dark"]) .podium-3rd { border-color: #804f1f; box-shadow: 0 0 8px rgba(128, 79, 31, 0.3); }
        :root:not([data-theme="dark"]) .unlock-fx .fx-flash { background: radial-gradient(circle at 50% 42%, rgba(40, 27, 0,0.95) 0%, rgba(103, 55, 0,0.55) 40%, transparent 75%); }
        :root:not([data-theme="dark"]) .unlock-fx .fx-ring { border: 2px solid rgba(69, 44, 0,0.95); }
        :root:not([data-theme="dark"]) .unlock-fx .fx-spark { background: #251800; }
        :root:not([data-theme="dark"]) .shift-open-banner .banner-shine { background: linear-gradient(75deg, transparent 0%, rgba(var(--ink-hi-rgb), 0) 30%, rgba(21, 16, 0,0.55) 50%, rgba(var(--ink-hi-rgb), 0) 70%, transparent 100%); }
        :root:not([data-theme="dark"]) .shift-open-banner .banner-badge::before { background: conic-gradient(from 0deg, transparent 0deg, rgba(84, 51, 0,0.55) 20deg, transparent 60deg, transparent 180deg, rgba(84, 51, 0,0.4) 205deg, transparent 260deg); }
        :root:not([data-theme="dark"]) .shift-open-banner .banner-eyebrow { color: #593c10; }
        :root:not([data-theme="dark"]) .shift-open-banner .banner-title { text-shadow: 0 0 12px rgba(84, 51, 0,0.6); }
        :root:not([data-theme="dark"]) body.tv-mode { background: #f9f2f2; }
        :root:not([data-theme="dark"]) #tvFullscreenPrompt { background: rgba(249, 242, 242,0.86); border: 1px solid #b99037; }
        :root:not([data-theme="dark"]) .success-toast { border: 1px solid #042700; }
        :root:not([data-theme="dark"]) .success-toast.error { background: linear-gradient(180deg, var(--danger) 0%, #f5c2c2 100%); border-color: #910000; }
        :root:not([data-theme="dark"]) .past-day-bar.future-day-bar { color: #4d412b; }
        :root:not([data-theme="dark"]) .pdb-tag.pdb-lock { background: rgba(105, 92, 71,0.15); }
        :root:not([data-theme="dark"]) .adm-sub-btn.on { background: linear-gradient(180deg, var(--info), #005f66); }
        :root:not([data-theme="dark"]) #adminConsoleBody .sb.on { background: linear-gradient(180deg, var(--info), #005f66); }
        :root:not([data-theme="dark"]) .ob-c { color: #463928; }
        :root:not([data-theme="dark"]) .ob-why { color: #8d0000; }
        :root:not([data-theme="dark"]) .adm-kpi.rate-kpi { background: linear-gradient(135deg, #aee7f0, #ddecee); }
        :root:not([data-theme="dark"]) .ofx .qnav.ahead { border: 1px solid #9fc8d7; }
        :root:not([data-theme="dark"]) .bfine { color: #537841; }
        :root:not([data-theme="dark"]) .bcap { border: 1px solid #e49b5f; background: rgba(255, 211, 177,0.42); }
        :root:not([data-theme="dark"]) .bcap.ok { border-color: #209500; }
        :root:not([data-theme="dark"]) .bcap.ok .bcapt { color: #193a0c; }
        :root:not([data-theme="dark"]) .bcap.ok .bcapt b { color: #051e00; }
        :root:not([data-theme="dark"]) .bcapc.on { border-color: #209500; color: #091705; }
        :root:not([data-theme="dark"]) .bcbx { border: 1px solid #9e8a6e; }
        :root:not([data-theme="dark"]) .capnote { border: 1px solid #f1c0c0; background: rgba(253, 224, 224,0.4); }
        :root:not([data-theme="dark"]) .pcal-t { color: #473925; }
        :root:not([data-theme="dark"]) .pcal-e i { color: #463928; }
        :root:not([data-theme="dark"]) .pcal-e.mine u.tm { color: #030e00; }
        :root:not([data-theme="dark"]) .pcal-r { background: rgba(255, 222, 124,0.85); }
        :root:not([data-theme="dark"]) .pcal-r u.tm { color: #201906; }
        :root:not([data-theme="dark"]) .pcal-e.mine i { color: #041800; }
        :root:not([data-theme="dark"]) .pcal-mn i.mn { border-color: #209500; }
        :root:not([data-theme="dark"]) .kb-up { border: 1px solid #3fb825; }
        :root:not([data-theme="dark"]) .adm-hbar .fl.lo { background: linear-gradient(90deg, #e3b5aa, var(--orange-2)); }
        :root:not([data-theme="dark"]) .adm-rep-ti { color: #4d4335; }
        :root:not([data-theme="dark"]) .adm-rep-tag { border: 1px solid #459d5c; color: #2d5036; }
        :root:not([data-theme="dark"]) .adm-rep-tag.rule { border-color: #b2832d; color: #5a4317; }
        :root:not([data-theme="dark"]) .adm-mini-ok { background: #82c064; border: 1px solid #4e7635; }
        :root:not([data-theme="dark"]) .adm-mini-no { background: #e9c9c9; border: 1px solid #c98686; }
        :root:not([data-theme="dark"]) .adm-stream .tm { color: #7f6c4f; }
        :root:not([data-theme="dark"]) .undo-btn { background: #ffc836; }
        :root:not([data-theme="dark"]) #tvMegaFx.s1 { background: radial-gradient(ellipse at 50% 45%, rgba(249, 208, 166,0.97), rgba(249, 242, 242,0.985) 62%); }
        :root:not([data-theme="dark"]) #tvMegaFx.s1 .fx-eye { color: #8f3b00; }
        :root:not([data-theme="dark"]) #tvMegaFx.s2 .fx-msg { text-shadow: 0 0 6px var(--info), 0 0 26px rgba(var(--info-rgb), 0.65), 3px 3px 0 #8f3b00; }
        :root:not([data-theme="dark"]) #tvMegaFx.s3 .fx-beam { background: linear-gradient(180deg, rgba(21, 16, 0,0.20), rgba(44, 29, 0,0.05) 55%, transparent 82%); }
        :root:not([data-theme="dark"]) #tvMegaFx.s3 .fx-pool { background: radial-gradient(ellipse, rgba(28, 19, 0,0.16), transparent 68%); }
        :root:not([data-theme="dark"]) #tvMegaFx.s3 .fx-eye { color: #604d2a; }
        :root:not([data-theme="dark"]) #tvMegaFx.s3 .fx-msg { color: #0a0600; text-shadow: 0 0 30px rgba(39, 25, 0,0.4); }
        :root:not([data-theme="dark"]) #tvMegaFx.s4 { background: radial-gradient(ellipse at 50% 50%, #fff3fb, var(--bg) 70%); }
        :root:not([data-theme="dark"]) #tvMegaFx.s4 .fx-eye { color: #8a0044; }
        :root:not([data-theme="dark"]) #tvMegaFx.s5 { background: radial-gradient(ellipse at 50% 50%, #daeded, var(--bg) 72%); }
        :root:not([data-theme="dark"]) #tvMegaFx.s5 .fx-who { color: #001517; }
        :root:not([data-theme="dark"]) #tvMegaFx.s7 .fx-glowfloor { background: linear-gradient(0deg, rgba(116, 56, 0,0.28), transparent); }
        :root:not([data-theme="dark"]) #tvMegaFx.s7 .fx-msg { text-shadow: 0 0 38px rgba(115, 55, 0,0.6); }
        :root:not([data-theme="dark"]) .tlband i { color: #705825; }
        :root:not([data-theme="dark"]) .tlbk { background: #ebeff4; }
        :root:not([data-theme="dark"]) .tlout { color: #453a26; }
        :root:not([data-theme="dark"]) .tlout .cl { color: #304455; }
        :root:not([data-theme="dark"]) .tlbk .cl { color: #463928; }
        :root:not([data-theme="dark"]) body:not(.tv-mode) .mobile-bottom-nav { background: rgba(250, 245, 242, 0.98); }
      }

      :root[data-theme="light"] h1 { text-shadow: 0 0 8px #783c00; }
      :root[data-theme="light"] .push-row .pr-btn-off { border: 1px solid #c9a162; }
      :root[data-theme="light"] .title-prefix { color: #5f574c; }
      :root[data-theme="light"] .titles-tap-hint { color: #71655a; }
      :root[data-theme="light"] .title-badge.locked .title-badge-name { color: #7d705f; }
      :root[data-theme="light"] .title-badge-desc { color: #71655a; }
      :root[data-theme="light"] .title-badge.locked .title-badge-desc { color: #7c705f; }
      :root[data-theme="light"] .ladder-flavor { color: #71655a; }
      :root[data-theme="light"] .ladder-node.t-green.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #030a00, var(--ok) 60%); }
      :root[data-theme="light"] .ladder-node.t-blue.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #001527, var(--blue) 60%); }
      :root[data-theme="light"] .ladder-node.t-purple.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #29004a, var(--purple-3) 60%); }
      :root[data-theme="light"] .ladder-node.t-orange.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #211100, var(--orange) 60%); }
      :root[data-theme="light"] .ladder-node.t-gold.done .ladder-dot { background: radial-gradient(circle at 35% 30%, #110e00, var(--gold) 60%); }
      :root[data-theme="light"] .rep-tab-dot { background: #bb0022; }
      :root[data-theme="light"] .rep-dot { background: #bb0022; }
      :root[data-theme="light"] .rep-range { color: #63594a; }
      :root[data-theme="light"] .rep-intro { border: 1px solid #e1ba82; }
      :root[data-theme="light"] .tier-mote { background: #0c0a00; }
      :root[data-theme="light"] .tw-btn-primary { background: linear-gradient(180deg, #241e00 0%, var(--gold) 100%); }
      :root[data-theme="light"] .online-dot.off { background: #beb09b; }
      :root[data-theme="light"] .tw-btn-confirm { border: 1px solid #042700; }
      :root[data-theme="light"] .tw-btn-danger { background: linear-gradient(180deg, #d70000 0%, #ffd9d9 100%); }
      :root[data-theme="light"] .day-col.just-opened .day-header { background: linear-gradient(180deg, #bf8e00 0%, #ffd565 100%) !important; }
      :root[data-theme="light"] .day-col.opening-soon .day-header { background: linear-gradient(180deg, #70cff2 0%, #c9edf9 100%) !important; }
      :root[data-theme="light"] .slot-card.pending-cancel-slot { background: rgba(215, 0, 0, 0.2) !important; }
      :root[data-theme="light"] .slot-card.pending-transfer-slot { background: rgba(0, 66, 85, 0.2) !important; }
      :root[data-theme="light"] .capacity-mini-fill { background: linear-gradient(90deg, #783c00, var(--gold)); }
      :root[data-theme="light"] .shift-block.today-shift { background: rgba(10, 173, 255, 0.25) !important; }
      :root[data-theme="light"] .shift-time-text { color: #00231c; }
      :root[data-theme="light"] .cancel-btn { background: #fecece; }
      :root[data-theme="light"] .transfer-btn { background: #3bccff; }
      :root[data-theme="light"] .admin-btn { background: #e0b300; }
      :root[data-theme="light"] .bk-cl { color: #524838; }
      :root[data-theme="light"] .bk-h-time { color: #1d1500; }
      :root[data-theme="light"] .d-v { color: #463928; }
      :root[data-theme="light"] .c-when { color: #1d1500; }
      :root[data-theme="light"] .tw-input.deco.fixed b { color: #463928; }
      :root[data-theme="light"] .ofx .ph-kbd b { background: #e4e0ed; }
      :root[data-theme="light"] .ofx .ph-n2 b { background: #ece9f0; }
      :root[data-theme="light"] .ofx .ios-c { background: rgba(224, 220, 216,.97); }
      :root[data-theme="light"] .ofx .ios-t { color: #62594e; }
      :root[data-theme="light"] .ofx .ios-r { color: #0042a7; }
      :root[data-theme="light"] .ofx .ios-c.one .ios-r { color: #0042a7; }
      :root[data-theme="light"] .ofx .bb { background: #decaae; }
      :root[data-theme="light"] .ofx .lb-dots i { background: #cfc5b4; }
      :root[data-theme="light"] .offer.bday { border-color: #b99037; }
      :root[data-theme="light"] .brule { background: linear-gradient(90deg,transparent,#b99037,transparent); }
      :root[data-theme="light"] .bseal { border: 1px solid #b99037; }
      :root[data-theme="light"] .bbody { border-top: 1px solid #b99037; }
      :root[data-theme="light"] .bday-done .bdcar { color: #8d682a; }
      :root[data-theme="light"] .bday-done .bdmini { color: #0d251a; }
      :root[data-theme="light"] .lvb { border: 1px solid #b18334; }
      :root[data-theme="light"] .lvb.no { border-color: #e1abab; background: #fbefef; }
      :root[data-theme="light"] .lst.chg { border-color: #71b6d2; background: #c9e8f5; }
      :root[data-theme="light"] .bref { background: #dcede8; border: 1px solid #37b082; }
      :root[data-theme="light"] .brefg i { color: #577468; }
      :root[data-theme="light"] .brefg b { color: #0d251a; }
      :root[data-theme="light"] .brefg u { color: #577468; }
      :root[data-theme="light"] .brefn { color: #0d251a; border-top: 1px solid #79d3b2; }
      :root[data-theme="light"] .bmine { color: #8d682a; }
      :root[data-theme="light"] .ofx input.bday-in { border: 1px solid #b18334; }
      :root[data-theme="light"] #ofBusyBox, :root[data-theme="light"] #actBusyBox { border: 1px solid #b99037; }
      :root[data-theme="light"] .ofx .ay { border: 1px solid #3fb825; }
      :root[data-theme="light"] .ofx .arb { border: 1px solid #b99037; }
      :root[data-theme="light"] .ofx .lst.ok { border: 1px solid #3bb628; }
      :root[data-theme="light"] .ofx .lst.no { border: 1px solid #f1c0c0; }
      :root[data-theme="light"] .ofx .ln { color: #524838; }
      :root[data-theme="light"] .ofx .ohand b { color: #00141c; }
      :root[data-theme="light"] .ofx .obk b { color: #671200; }
      :root[data-theme="light"] .ofx .prb.on.no { border-color: #a6a6a6; }
      :root[data-theme="light"] .ofx .prr.full { color: #891d00; }
      :root[data-theme="light"] .ofx .ax.leave { border-color: #c5b1dd; }
      :root[data-theme="light"] .ofx .hn i.r, :root[data-theme="light"] .ofx .wn i.r { border: 1px solid #69afc6; }
      :root[data-theme="light"] .ofx .hn i.g, :root[data-theme="light"] .ofx .wn i.g { border: 1px solid #c6b2de; }
      :root[data-theme="light"] .ofx .hms { border: 1px solid #48cd2c; }
      :root[data-theme="light"] .ofx .hbar { background: #decaae; }
      :root[data-theme="light"] .ofx .wr.warn .wn { color: #372300; }
      :root[data-theme="light"] .ofx .mvb.on { background: #4a3d23; }
      :root[data-theme="light"] .ofx .inb .gc { box-shadow: inset 0 0 0 1px rgba(147, 45, 0,.26); }
      :root[data-theme="light"] .ofx .inb .gc.wrk { background: #3faa7f; }
      :root[data-theme="light"] .ofx .inb .gc.wrk.g { background: #7aa1cf; }
      :root[data-theme="light"] .ofx .sw.wrk { background: #3faa7f; }
      :root[data-theme="light"] .ofx .sw.wrkg { background: #7aa1cf; }
      :root[data-theme="light"] .ofx .sw.none { box-shadow: inset 0 0 0 1px rgba(147, 45, 0,.26); }
      :root[data-theme="light"] .ofx .alert { background: #fcf1ef; }
      :root[data-theme="light"] .ofx .alert .ai { color: #a21e00; }
      :root[data-theme="light"] .ofx .bfn i.r { border: 1px solid #69afc6; }
      :root[data-theme="light"] .ofx .bfn i.g { border: 1px solid #c6b2de; }
      :root[data-theme="light"] .ofx .bfx.on { background: #dccbc0; }
      :root[data-theme="light"] .ofx .bfg.dead { color: #816e59; }
      :root[data-theme="light"] .lock-notice { background: rgba(179, 48, 0, 0.15); border: 1px solid #b33000; }
      :root[data-theme="light"] .offline-bar { background: linear-gradient(90deg, #ffba54, #da8400); }
      :root[data-theme="light"] .offline-empty { background: rgba(255, 186, 84,0.25); }
      :root[data-theme="light"] .offline-empty .oe-t { color: #2c1800; }
      :root[data-theme="light"] .network-status { background: rgba(249, 222, 222,0.94); }
      :root[data-theme="light"] .network-status.off { background: rgba(241, 207, 172,0.94); }
      :root[data-theme="light"] .transfer-banner { background: linear-gradient(90deg, #97e0ff, var(--info-bg)); }
      :root[data-theme="light"] .title-earned-banner { background: linear-gradient(90deg, var(--surface-2), #d28f00); }
      :root[data-theme="light"] .bkclash { border: 1px solid #e7aeae; background: rgba(199, 0, 0,0.09); }
      :root[data-theme="light"] .bkclash b { color: #8d0000; }
      :root[data-theme="light"] .bkclash i { color: #473a26; }
      :root[data-theme="light"] .panel-chv { color: #7d6c4e; }
      :root[data-theme="light"] .panel-badge { background: #d8504d; }
      :root[data-theme="light"] .panel-badge.quiet { background: #e0caa5; }
      :root[data-theme="light"] .aa-who span i { color: #8d0000; }
      :root[data-theme="light"] .ap-search input::placeholder { color: #7d6c4e; }
      :root[data-theme="light"] .pl-sub.bad { color: #af2525; }
      :root[data-theme="light"] .panel-empty-hint { color: #7d6c4e; }
      :root[data-theme="light"] .feed-del { color: #7d6c4e; }
      :root[data-theme="light"] .slot-lock { color: #7d6c4e; }
      :root[data-theme="light"] .megaphone-item.admin-slot { border: 1px solid #8f3b00; }
      :root[data-theme="light"] .megaphone-item.admin-slot .megaphone-text, :root[data-theme="light"] .megaphone-item.active-slot .megaphone-text { background: linear-gradient(90deg, #0d0b00, var(--gold), #0d0b00); }
      :root[data-theme="light"] .podium-1st { background: linear-gradient(180deg, #d8a30f 0%, var(--surface) 100%); }
      :root[data-theme="light"] .podium-2nd { background: linear-gradient(180deg, #b1b4ba 0%, #eceef0 100%); border-color: #373737; box-shadow: 0 0 8px rgba(55, 55, 55, 0.3); }
      :root[data-theme="light"] .podium-3rd { border-color: #804f1f; box-shadow: 0 0 8px rgba(128, 79, 31, 0.3); }
      :root[data-theme="light"] .unlock-fx .fx-flash { background: radial-gradient(circle at 50% 42%, rgba(40, 27, 0,0.95) 0%, rgba(103, 55, 0,0.55) 40%, transparent 75%); }
      :root[data-theme="light"] .unlock-fx .fx-ring { border: 2px solid rgba(69, 44, 0,0.95); }
      :root[data-theme="light"] .unlock-fx .fx-spark { background: #251800; }
      :root[data-theme="light"] .shift-open-banner .banner-shine { background: linear-gradient(75deg, transparent 0%, rgba(var(--ink-hi-rgb), 0) 30%, rgba(21, 16, 0,0.55) 50%, rgba(var(--ink-hi-rgb), 0) 70%, transparent 100%); }
      :root[data-theme="light"] .shift-open-banner .banner-badge::before { background: conic-gradient(from 0deg, transparent 0deg, rgba(84, 51, 0,0.55) 20deg, transparent 60deg, transparent 180deg, rgba(84, 51, 0,0.4) 205deg, transparent 260deg); }
      :root[data-theme="light"] .shift-open-banner .banner-eyebrow { color: #593c10; }
      :root[data-theme="light"] .shift-open-banner .banner-title { text-shadow: 0 0 12px rgba(84, 51, 0,0.6); }
      :root[data-theme="light"] body.tv-mode { background: #f9f2f2; }
      :root[data-theme="light"] #tvFullscreenPrompt { background: rgba(249, 242, 242,0.86); border: 1px solid #b99037; }
      :root[data-theme="light"] .success-toast { border: 1px solid #042700; }
      :root[data-theme="light"] .success-toast.error { background: linear-gradient(180deg, var(--danger) 0%, #f5c2c2 100%); border-color: #910000; }
      :root[data-theme="light"] .past-day-bar.future-day-bar { color: #4d412b; }
      :root[data-theme="light"] .pdb-tag.pdb-lock { background: rgba(105, 92, 71,0.15); }
      :root[data-theme="light"] .adm-sub-btn.on { background: linear-gradient(180deg, var(--info), #005f66); }
      :root[data-theme="light"] #adminConsoleBody .sb.on { background: linear-gradient(180deg, var(--info), #005f66); }
      :root[data-theme="light"] .ob-c { color: #463928; }
      :root[data-theme="light"] .ob-why { color: #8d0000; }
      :root[data-theme="light"] .adm-kpi.rate-kpi { background: linear-gradient(135deg, #aee7f0, #ddecee); }
      :root[data-theme="light"] .ofx .qnav.ahead { border: 1px solid #9fc8d7; }
      :root[data-theme="light"] .bfine { color: #537841; }
      :root[data-theme="light"] .bcap { border: 1px solid #e49b5f; background: rgba(255, 211, 177,0.42); }
      :root[data-theme="light"] .bcap.ok { border-color: #209500; }
      :root[data-theme="light"] .bcap.ok .bcapt { color: #193a0c; }
      :root[data-theme="light"] .bcap.ok .bcapt b { color: #051e00; }
      :root[data-theme="light"] .bcapc.on { border-color: #209500; color: #091705; }
      :root[data-theme="light"] .bcbx { border: 1px solid #9e8a6e; }
      :root[data-theme="light"] .capnote { border: 1px solid #f1c0c0; background: rgba(253, 224, 224,0.4); }
      :root[data-theme="light"] .pcal-t { color: #473925; }
      :root[data-theme="light"] .pcal-e i { color: #463928; }
      :root[data-theme="light"] .pcal-e.mine u.tm { color: #030e00; }
      :root[data-theme="light"] .pcal-r { background: rgba(255, 222, 124,0.85); }
      :root[data-theme="light"] .pcal-r u.tm { color: #201906; }
      :root[data-theme="light"] .pcal-e.mine i { color: #041800; }
      :root[data-theme="light"] .pcal-mn i.mn { border-color: #209500; }
      :root[data-theme="light"] .kb-up { border: 1px solid #3fb825; }
      :root[data-theme="light"] .adm-hbar .fl.lo { background: linear-gradient(90deg, #e3b5aa, var(--orange-2)); }
      :root[data-theme="light"] .adm-rep-ti { color: #4d4335; }
      :root[data-theme="light"] .adm-rep-tag { border: 1px solid #459d5c; color: #2d5036; }
      :root[data-theme="light"] .adm-rep-tag.rule { border-color: #b2832d; color: #5a4317; }
      :root[data-theme="light"] .adm-mini-ok { background: #82c064; border: 1px solid #4e7635; }
      :root[data-theme="light"] .adm-mini-no { background: #e9c9c9; border: 1px solid #c98686; }
      :root[data-theme="light"] .adm-stream .tm { color: #7f6c4f; }
      :root[data-theme="light"] .undo-btn { background: #ffc836; }
      :root[data-theme="light"] #tvMegaFx.s1 { background: radial-gradient(ellipse at 50% 45%, rgba(249, 208, 166,0.97), rgba(249, 242, 242,0.985) 62%); }
      :root[data-theme="light"] #tvMegaFx.s1 .fx-eye { color: #8f3b00; }
      :root[data-theme="light"] #tvMegaFx.s2 .fx-msg { text-shadow: 0 0 6px var(--info), 0 0 26px rgba(var(--info-rgb), 0.65), 3px 3px 0 #8f3b00; }
      :root[data-theme="light"] #tvMegaFx.s3 .fx-beam { background: linear-gradient(180deg, rgba(21, 16, 0,0.20), rgba(44, 29, 0,0.05) 55%, transparent 82%); }
      :root[data-theme="light"] #tvMegaFx.s3 .fx-pool { background: radial-gradient(ellipse, rgba(28, 19, 0,0.16), transparent 68%); }
      :root[data-theme="light"] #tvMegaFx.s3 .fx-eye { color: #604d2a; }
      :root[data-theme="light"] #tvMegaFx.s3 .fx-msg { color: #0a0600; text-shadow: 0 0 30px rgba(39, 25, 0,0.4); }
      :root[data-theme="light"] #tvMegaFx.s4 { background: radial-gradient(ellipse at 50% 50%, #fff3fb, var(--bg) 70%); }
      :root[data-theme="light"] #tvMegaFx.s4 .fx-eye { color: #8a0044; }
      :root[data-theme="light"] #tvMegaFx.s5 { background: radial-gradient(ellipse at 50% 50%, #daeded, var(--bg) 72%); }
      :root[data-theme="light"] #tvMegaFx.s5 .fx-who { color: #001517; }
      :root[data-theme="light"] #tvMegaFx.s7 .fx-glowfloor { background: linear-gradient(0deg, rgba(116, 56, 0,0.28), transparent); }
      :root[data-theme="light"] #tvMegaFx.s7 .fx-msg { text-shadow: 0 0 38px rgba(115, 55, 0,0.6); }
      :root[data-theme="light"] .tlband i { color: #705825; }
      :root[data-theme="light"] .tlbk { background: #ebeff4; }
      :root[data-theme="light"] .tlout { color: #453a26; }
      :root[data-theme="light"] .tlout .cl { color: #304455; }
      :root[data-theme="light"] .tlbk .cl { color: #463928; }
      :root[data-theme="light"] body:not(.tv-mode) .mobile-bottom-nav { background: rgba(250, 245, 242, 0.98); }
      /* [2.0955] 명함 · 네임태그. 색은 이름표로만, 글자는 계단(11·12·13·14·16·19·22)으로,
         여백은 격자(2·4·8·12·16…)로, 모서리는 세 단계(2·4·8)로 짠다 - 검사기가 전부 본다.
         미리보기가 진짜 명함보다 커졌는데 그게 맞다: 이 화면의 일은 **오타를 잡는 것**이라
         작게 흉내내는 것보다 크게 읽히는 쪽이 낫다. */
      .pick3 { display: flex; flex-direction: column; gap: 4px; }
      .p3 { background: var(--card); border: 1px solid var(--card-up); border-radius: 4px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
      .p3l { display: flex; flex-direction: column; }
      .p3 b { font-size: 13px; color: var(--ink); letter-spacing: 1px; }
      .p3l span { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
      .p3a { color: var(--ink-4); font-size: 16px; }
      .p3.wait { border-color: rgba(var(--gold-rgb), 0.45); }
      .p3.wait b { color: var(--gold); }
      .prevh { font-size: 11px; letter-spacing: 1px; color: var(--ink-4); font-weight: bold; margin-bottom: 8px; }
      .bcard { background: var(--paper-bg); color: var(--paper-ink); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.5); }
      .bc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
      .bc-nm { font-size: 16px; font-weight: bold; display: flex; flex-direction: column; }
      .bc-role { font-size: 11px; font-weight: normal; color: var(--paper-ink-3); background: var(--paper-bg); margin-top: 2px; }
      .bc-logo { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; }
      .bc-logo b { font-family: Cinzel, serif; font-size: 11px; background: var(--paper-bg); letter-spacing: 1px; }
      .bc-logo .l1 { color: var(--carrot); background: var(--paper-bg); }
      .bc-logo .l2 { color: var(--leaf); background: var(--paper-bg); }
      .bc-logo .l3 { color: var(--paper-ink); background: var(--paper-bg); }
      .bc-rule { font-size: 11px; color: var(--paper-ink-3); background: var(--paper-bg); }
      .bc-tag { text-align: center; font-size: 11px; color: var(--paper-ink-3); background: var(--paper-bg); }
      .bc-cont { display: flex; flex-direction: column; font-size: 12px; color: var(--paper-ink); background: var(--paper-bg); word-break: break-word; }
      .ntag { background: var(--paper-bg); border-radius: 8px; padding: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.5); }
      .nt-nm { flex: 1; text-align: center; color: var(--paper-ink); background: var(--paper-bg); font-size: 16px; font-weight: bold; letter-spacing: 1px; display: flex; flex-direction: column; }
      .nt-role { font-size: 11px; font-weight: normal; letter-spacing: 0; color: var(--paper-ink-3); background: var(--paper-bg); margin-top: 2px; }
      .segr { display: flex; gap: 4px; }
      .segb { flex: 1; text-align: center; padding: 8px 0; font-size: 14px; font-weight: bold; background: var(--card); border: 1px solid var(--card-up); border-radius: 4px; color: var(--ink-4); cursor: pointer; }
      .segb.on { background: rgba(var(--gold-rgb), 0.14); border-color: var(--gold); color: var(--gold); }
      .rdo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 4px; background: var(--card); border: 1px solid var(--card-up); border-radius: 4px; cursor: pointer; }
      .rdo.on { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.09); }
      .rd { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink-4); flex-shrink: 0; }
      .rdo.on .rd { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
      .rl { font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; }
      .rdo.on .rl { color: var(--ink); }
      .rs { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
      .sp-mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: 2px; }
      .sp-dim { color: var(--ink-4); }
      .sp-bad { border-color: var(--cancel-hi); }
      .sp-badt { color: var(--cancel-hi); }
      .igrow { display: flex; gap: 8px; align-items: center; }
      .igx { color: var(--ink-4); font-size: 13px; padding: 0 8px; cursor: pointer; }
      .addmore { font-size: 12px; color: var(--gold); font-weight: bold; padding: 8px 4px; letter-spacing: 1px; cursor: pointer; }
      .sp-ghost { background: transparent; border: 1px solid var(--card-up); color: var(--ink-4); margin-top: 12px; }
      .sup-s { font-size: 12px; color: var(--ink-4); padding: 8px 4px 0; }
      .qbar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; background: var(--card); border: 1px solid var(--card-up); border-radius: 4px; padding: 8px 12px; }
      .qb-h { font-size: 12px; letter-spacing: 1px; color: var(--ink-4); font-weight: bold; }
      .qb-n { font-size: 11px; font-weight: bold; letter-spacing: 1px; color: var(--gold); }
      .qb-n.used { color: var(--ink-4); }
      .sp-warn { color: var(--cancel-hi); }
      .cfm-lead { font-size: 13px; color: var(--ink-2); margin: 4px 0 12px; }
      .cfm-lead b { color: var(--ink); }
      .cfm-s { font-size: 11px; letter-spacing: 1px; color: var(--ink-4); font-weight: bold; margin: 12px 0 8px; }
      .ck { display: flex; gap: 8px; align-items: flex-start; background: var(--card); border: 1px solid var(--card-up); border-radius: 4px; padding: 8px 12px; margin-bottom: 4px; cursor: pointer; }
      .ck.on { border-color: var(--confirm-hi); }
      .cb { width: 16px; height: 16px; border-radius: 2px; border: 2px solid var(--ink-4); flex-shrink: 0; margin-top: 2px; }
      .ck.on .cb { border-color: var(--confirm-hi); background: var(--confirm-hi); }
      .cc { display: flex; flex-direction: column; min-width: 0; }
      .cl { font-size: 11px; letter-spacing: 1px; color: var(--ink-4); font-weight: bold; }
      .cv { font-size: 14px; color: var(--ink); font-family: ui-monospace, Consolas, monospace; margin-top: 2px; word-break: break-all; }
      .cfm-back { text-align: center; font-size: 12px; color: var(--ink-4); padding: 12px 0 4px; letter-spacing: 1px; font-weight: bold; cursor: pointer; }
      .hist { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px dotted var(--card-up); }
      .hd { font-size: 12px; color: var(--ink-4); width: 72px; flex-shrink: 0; }
      .hb { font-size: 13px; color: var(--ink-2); flex: 1; }
      .hs { font-size: 11px; letter-spacing: 1px; font-weight: bold; color: var(--ink-4); }
      .hs.ok { color: var(--confirm-hi); }
      .spnums { display: flex; gap: 4px; margin-bottom: 8px; }
      .spn { flex: 1; background: var(--card); border: 1px solid var(--card-up); border-radius: 4px; padding: 8px 4px; text-align: center; font-size: 11px; color: var(--ink-4); display: flex; flex-direction: column; gap: 2px; }
      .spn b { font-size: 19px; color: var(--gold); }
      .acard { background: var(--card); border: 1px solid var(--card-up); border-radius: 4px; padding: 12px; margin-bottom: 8px; }
      .acard.tag { border-color: rgba(var(--purple-2-rgb), 0.45); }
      .ac-h { display: flex; justify-content: space-between; align-items: center; }
      .ac-h b { font-size: 14px; color: var(--ink); }
      .ac-q { font-size: 12px; font-weight: bold; color: var(--gold); letter-spacing: 1px; }
      .ac-q.tag { color: var(--purple); font-size: 11px; }
      .ac-l { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-4); margin: 8px 0; font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
      .ac-l i { font-style: normal; }
      .ac-btns { display: flex; gap: 4px; }
      .ab { flex: 1; text-align: center; padding: 8px 0; border-radius: 4px; font-size: 11px; font-weight: bold; letter-spacing: 1px; cursor: pointer; }
      .ab.ok { background: rgba(var(--gold-rgb), 0.16); color: var(--gold); border: 1px solid rgba(var(--gold-rgb), 0.4); }
      .ab.no { background: transparent; color: var(--ink-4); border: 1px solid var(--card-up); }
    
/* ===== 홈 화면 추가 안내 =====
   앱 톤(어두운 바탕 + 금색)에 맞춘다. iga = install guide/anything. */

/* 안드로이드용 하단 바 - 진짜 설치창을 띄우는 버튼 하나면 되므로 가볍게 */
.iga-bar {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: var(--z-iga);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--surface), var(--surface-2));
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 8px 12px; color: var(--ink); font-size: 13px;
  box-shadow: 0 6px 24px rgba(var(--shadow-rgb), 0.55);
  transform: translateY(140%); transition: transform 0.28s ease;
}
.iga-bar.show { transform: translateY(0); }
.iga-bar b { color: var(--gold); }
.iga-sub { flex: 1 1 100%; font-size: 12px; color: var(--ink-3); }
.iga-btn {
  margin-left: auto; background: linear-gradient(180deg, var(--gold), var(--gold-line));
  color: var(--surface); font-weight: bold; font-size: 13px;
  padding: 8px 16px; border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.iga-x { color: var(--ink-3); cursor: pointer; padding: 4px 4px; font-size: 14px; }

/* 아이폰/인앱브라우저용 전체 안내 - 공유 버튼 위치를 화살표로 찍어줘야 하므로 화면을 덮는다 */
.iga-scrim {
  position: fixed; inset: 0; z-index: var(--z-stale);
  background: rgba(var(--shadow-rgb), 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.24s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.iga-scrim.show { opacity: 1; }
/* 설치 강제 화면 - 뒤가 안 보이고 아무것도 못 누른다. */
.iga-hard {
  background: var(--bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overscroll-behavior: contain;
}

.iga-card {
  position: relative; width: 100%; max-width: 340px;
  background: linear-gradient(170deg, var(--surface), var(--bg));
  border: 1px solid #6b551c; border-radius: 14px;
  padding: 20px 20px 16px; color: var(--ink);
  box-shadow: 0 20px 50px rgba(var(--shadow-rgb), 0.6);
  transform: translateY(14px); transition: transform 0.24s ease;
}
.iga-scrim.show .iga-card { transform: translateY(0); }

.iga-close {
  position: absolute; top: 8px; right: 8px;
  background: none; border: 0; color: var(--ink-4);
  font-size: 16px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.iga-title { font-size: 16px; font-weight: bold; color: var(--gold); margin-bottom: 4px; }
.iga-lede { font-size: 13px; line-height: 1.65; color: #b9a888; margin-bottom: 16px; }
.iga-lede b { color: var(--ink); }

.iga-steps { list-style: none; margin: 0 0 16px; padding: 0; }
.iga-steps li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--surface-2);
  font-size: 14px; line-height: 1.5;
}
.iga-steps li:first-child { border-top: 0; }
.iga-n {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); color: var(--surface);
  font-size: 12px; font-weight: bold; text-align: center; line-height: 20px;
}
.iga-txt { flex: 1 1 auto; }
.iga-txt b { color: var(--gold); }
.iga-glyph { flex: 0 0 22px; width: 22px; height: 22px; color: #7fb4ff; }

.iga-done, .iga-go {
  display: block; text-align: center;
  background: linear-gradient(180deg, var(--gold), var(--gold-line));
  color: var(--surface); font-weight: bold; font-size: 14px;
  padding: 12px 16px; border-radius: 8px; cursor: pointer;
}
.iga-hint { margin-top: 8px; font-size: 12px; color: var(--ink-4); text-align: center; line-height: 1.6; }
.iga-hint b { color: #b9a888; }

/* 사파리 공유 버튼을 가리키는 화살표. 카드가 아니라 화면 기준으로 붙인다. */
.iga-arrow {
  position: fixed; left: 0; right: 0; text-align: center;
  color: var(--gold); font-size: 30px; line-height: 1;
  text-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.8);
  pointer-events: none;
}
.iga-arrow-bottom { bottom: 8px; animation: igaBounceDown 1.1s ease-in-out infinite; }
/* iOS 26 사파리: 공유가 오른쪽 아래 ⋯ 안으로 들어갔다. 화살표도 그쪽을 가리킨다. */
.iga-arrow-br {
  bottom: 8px; left: auto; right: 22px; text-align: right;
  animation: igaBounceDown 1.1s ease-in-out infinite;
}
.iga-arrow-top { top: 8px; transform: rotate(180deg); animation: igaBounceUp 1.1s ease-in-out infinite; }

@keyframes igaBounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}
@keyframes igaBounceUp {
  0%, 100% { transform: rotate(180deg) translateY(0); }
  50%      { transform: rotate(180deg) translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
  .iga-bar, .iga-scrim, .iga-card { transition: none; }
  .iga-arrow-bottom, .iga-arrow-top { animation: none; }
}

/* ===== 당겨서 새로고침 =====
   홈 화면 앱에는 주소창이 없어 새로고침할 방법이 없다. 그 자리를 메우는 표시.
   당근(우리 앱) + 글자(지금 뭘 하면 되는지) - 목업 6번, 사장님 선택. */
.ptr {
  position: fixed; top: -62px; left: 50%; z-index: var(--z-pull);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.15s ease;
}
.ptr-carrot {
  font-size: 24px; line-height: 1;
  filter: drop-shadow(0 3px 8px rgba(var(--shadow-rgb), 0.6));
  transition: transform 0.08s linear;
}
.ptr-text {
  font-size: 12px; letter-spacing: 0.14em; color: var(--ink-4); white-space: nowrap;
  text-shadow: 0 1px 4px rgba(var(--shadow-rgb), 0.8);
}
/* 임계점을 넘기면 글자가 금색으로 바뀌어 "놓으면 된다"를 알린다 */
.ptr-ready .ptr-text { color: var(--gold); }
.ptr-spinning { transition: transform 0.2s ease, opacity 0.15s ease; }
.ptr-spinning .ptr-carrot { animation: ptrWiggle 0.6s ease-in-out infinite; }
.ptr-spinning .ptr-text { animation: ptrPulse 1s ease-in-out infinite; }
@keyframes ptrWiggle {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(14deg); }
}
@keyframes ptrPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ptr-spinning .ptr-carrot, .ptr-spinning .ptr-text { animation: none; }
}

/* ===== [2.0477] 알림 안 켠 사람 압박 =====
   로스터 맨 위에 항상 남는 띠. 전면 화면을 넘어가도 이건 안 사라진다. */
.push-strip {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #5c1a00, #8a2c00);
  border: 1px solid #ff7a3d; border-radius: 4px;
  padding: 8px 8px; margin: 0 0 8px;
  font-size: 12px; color: #ffd9c2;
}
.push-strip b { color: var(--ink-hi); }
.push-strip .ps-ic { font-size: 14px; line-height: 1; }
.push-strip .ps-txt { flex: 1; min-width: 0; line-height: 1.4; }
/* 34px - 슬롯 메뉴와 같은 기준. 옆에 붙은 게 없어 숨은 확장이 필요 없다. */
.push-strip .ps-go {
  flex: 0 0 auto; min-height: 34px; padding: 0 12px;
  background: var(--gold); color: var(--card); border: 0; border-radius: 4px;
  font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer;
  white-space: nowrap;
}
.push-strip .ps-go:active { transform: scale(0.97); }

/* 이미 거부한 사람에게 보여주는 기기 설정 경로 */
.ps-steps {
  text-align: left; font-size: 13px; color: #b9a888; line-height: 1.85;
  background: rgba(var(--gold-rgb), 0.06); border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-radius: 4px; padding: 12px 12px; margin: 0 0 16px;
}
.ps-steps b { color: var(--ink); }

/* 5초가 지나야 살아난다. 그 전에는 눌러도 아무 일이 없다는 게 보여야 한다. */
.ps-later-on { color: var(--gold-line) !important; text-decoration: underline; cursor: pointer; }

/* [A5] 시스템 창을 띄우기 직전 경고. 한 번 거부하면 되돌릴 수 없어서
   버튼 바로 아래, 눈이 지나가는 자리에 둔다. */
.ps-warn {
  margin-top: 12px; padding: 8px 12px;
  background: rgba(var(--orange-2-rgb), 0.1); border: 1px solid rgba(var(--orange-2-rgb), 0.4);
  border-radius: 4px; font-size: 12px; line-height: 1.65; color: #ffbe85;
  text-align: center;
}
.ps-warn b { color: var(--ink-hi); }