:root{
      --purple:#4b0082;
      --yellow:#ffe08a;
      /* 과별 배경색 */
      --dept-west:#d3d3d3;  /* 양방: 회색 */
      --dept-1:#87ceeb;     /* 1과: 하늘색 */
      --dept-2:#90ee90;     /* 2과: 연두색 */
      --dept-3:#d2b48c;     /* 3과: 갈색(탄 색) */
      --dept-4:#ffc0cb;     /* 4과: 핑크색 */
      --dept-5:#fff3b0;     /* 5과: 노란색 */
      --top-call-button-scale:1;
      --top-title-scale:1;
      --top-control-scale:var(--top-call-button-scale, 1);
      --call-group-scale:1;
    }

    /* ===== 레이아웃 ===== */
    body{
      font-family:"Noto Sans KR",sans-serif;
      background:#f5f7fb;
      margin:0;
      padding:14px;
    }

    h2{margin:0 0 8px; display:inline-block;}

    /* 상단 컨트롤 바 */
    .topbar{
      display:flex; flex-wrap:wrap; gap:calc(12px * var(--top-control-scale, 1)); align-items:center; margin-bottom:12px;
    }
    .grow{ flex:1 1 auto; }

    .sound-btn{
      border:none; border-radius:999px; padding:calc(14px * var(--top-control-scale, 1)) calc(20px * var(--top-control-scale, 1)); font-size:calc(18px * var(--top-control-scale, 1)); cursor:pointer; font-weight:700;
      background:#f1f3f5; box-shadow:0 2px 6px rgba(0,0,0,0.05);
      min-height:calc(46px * var(--top-control-scale, 1));
      line-height:1;
    }
    .sound-btn.chan.on{ outline:3px solid #4caf50; }
    .sound-btn.device-sound-btn.on{ outline:3px solid #4caf50; }

    .danger-btn{
      border:none; border-radius:999px; padding:calc(14px * var(--top-control-scale, 1)) calc(20px * var(--top-control-scale, 1)); font-size:calc(18px * var(--top-control-scale, 1)); cursor:pointer; font-weight:700;
      background:#ffecec; color:#9b1c1c; box-shadow:0 2px 6px rgba(0,0,0,0.05); border:1px solid #f5b3b3;
      min-height:calc(46px * var(--top-control-scale, 1));
      line-height:1;
    }

    .floor-tab{ border:none; border-radius:999px; padding:calc(12px * var(--top-control-scale, 1)) calc(18px * var(--top-control-scale, 1)); font-size:calc(18px * var(--top-control-scale, 1)); cursor:pointer; background:#fff; min-height:calc(44px * var(--top-control-scale, 1)); line-height:1; }
    .floor-tab.on{ outline:3px solid #6c5ce7; background:#eee; }

    .role-chip{ border:none; border-radius:999px; padding:calc(12px * var(--top-control-scale, 1)) calc(18px * var(--top-control-scale, 1)); font-size:calc(18px * var(--top-control-scale, 1)); cursor:pointer; background:#fff; min-height:calc(44px * var(--top-control-scale, 1)); line-height:1; }
    .role-chip.on{ outline:3px solid #00c853; background:#eaffea; }
    .screen-settings-btn{ border:none; border-radius:999px; padding:calc(12px * var(--top-control-scale, 1)) calc(18px * var(--top-control-scale, 1)); font-size:calc(18px * var(--top-control-scale, 1)); font-weight:900; cursor:pointer; background:#eef7ff; color:#075985; min-height:calc(44px * var(--top-control-scale, 1)); line-height:1; }

    /* 요일 선택 버튼 */
    .day-chip{ border:none; border-radius:999px; padding:calc(12px * var(--top-control-scale, 1)) calc(18px * var(--top-control-scale, 1)); font-size:calc(18px * var(--top-control-scale, 1)); cursor:pointer; background:#fff; min-height:calc(44px * var(--top-control-scale, 1)); line-height:1; }
    .day-chip.on{ outline:3px solid #ff9800; background:#fff3e0; }

    #dayModeControls,
    #floorTabs,
    #roleControls,
    .listen-group{
      gap:calc(8px * var(--top-control-scale, 1)) !important;
    }
    #dayModeControls > span,
    #roleControls > span,
    .listen-group > span{
      font-size:calc(16px * var(--top-control-scale, 1));
      line-height:1;
    }