/* 1. PC는 부트스트랩 기본 사이즈(16px) 유지 */
    html {
      font-size: 16px;
    }

    .calendar-page-heading {
      margin: 0 0 0.85rem;
      color: #6c757d;
      font-size: clamp(0.92rem, 2.4vw, 1.08rem);
      font-weight: 750;
      letter-spacing: -0.035em;
      line-height: 1.45;
      text-align: center;
    }

    /* 2. 모바일 (예: 768px 이하)에서 전체 비율 세련되게 축소 */
    @media (max-width: 768px) {
      html {
        /* 여기서 14px ~ 15px 사이로 조절하면서 네가 삼브에서 봤던 그 예쁜 비율을 찾아! */
        font-size: 13.5px;
      }
    }

    @media (max-width: 576px) {
      html {
        /* 모바일 브라우저의 유효 viewport 차이와 무관하게 동일한 밀도를 사용한다. */
        font-size: 12.5px;
      }
    }



    :root {
      --HT-color: #EA0029;
      --SK-color: #CE0E2D;
      --LG-color: #C60C30;
      --KT-color: #000000;
      --NC-color: #072241;
      --HH-color: #F37321;
      --OB-color: #131230;
      --WO-color: #820024;
      --LT-color: #002955;
      --SS-color: #074CA1;
      --theme-bg-color: #f8f9fa; /* 기본 배경 */
      --theme-main-color: #333; /* 기본 텍스트/테두리 */
      --theme-main-color-rgb: 51, 51, 51;
      --theme-alpha: 0.03;
      --theme-alpha-1: 0.15;
      --theme-alpha-2: 0.06;
      --theme-alpha-3: 0.02;
    }

    html, body {
      -webkit-text-size-adjust: none !important;
      text-size-adjust: none !important;
      font-family: 'Noto Sans KR', sans-serif;

      background-color: #f8f9fa !important; /* 기본 배경: 밝은 회색 */
      background-image: radial-gradient(circle at 50% 0%, rgba(var(--theme-main-color-rgb), 0.15) 0%, transparent 60%);
      background-size: 100% 600px;
      background-repeat: no-repeat;

      color: #333;
      width: 100%;
      overflow-x: clip;
      transition: background-color 0.3s ease;

      min-height: 100dvh;
    }

    body {
      touch-action: pan-y;
      background-color: #f8f9fa !important;
      background-image: linear-gradient(
              to bottom,
              rgba(var(--theme-main-color-rgb), var(--theme-alpha-1)) 0%, /* 정의된 변수 사용 */ rgba(var(--theme-main-color-rgb), var(--theme-alpha-2)) 15%,
              rgba(var(--theme-main-color-rgb), var(--theme-alpha-3)) 35%,
              transparent 50%
      );
      background-size: 100% 100%;
      background-attachment: fixed;
      background-repeat: no-repeat;
    }

    /* Today 버튼과 날짜 버튼의 내부 색상만 흰색으로 고정 */
    #btn-today,
    .btn-white,
    .btn-group .btn-white {
      background-color: rgba(255, 255, 255, 0.9) !important; /* 바탕을 좀 더 하얗게 채워서 덩어리감 확보 */
      backdrop-filter: blur(8px);
      border: 1.5px solid rgba(var(--theme-main-color-rgb), 0.25) !important; /* 테두리를 살짝 진하게 (팀 컬러 톤) */
      color:black !important; /* 글씨도 팀 컬러로 맞춰서 통일감 주기 */
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; /* 밋밋함 해소를 위해 부드러운 그림자 살짝 부활 */
      transition: all 0.2s ease;
    }

    #btn-today {
      color: #000 !important;
    }

    /* 마우스 올렸을 때(Hover) 미세하게 색상이 변하게 하고 싶다면 아래 추가 */
    #btn-today:hover,
    .btn-white:hover {
      background-color: #fff !important;
      border-color: var(--theme-main-color) !important; /* 테두리가 팀 컬러로 선명해짐 */
      transform: translateY(-1px); /* 버튼이 살짝 위로 뜨는 입체감 액션 */
      box-shadow: 0 4px 10px rgba(var(--theme-main-color-rgb), 0.15) !important; /* 팀 컬러 빛이 퍼지는 그림자 */
    }

    #btn-today.shadow-sm,
    .btn-group.shadow-sm {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    }

    #matchup-text {
      transition: color 0.3s ease;
    }

    /* 토글 스위치 켜졌을 때 팀 컬러 적용 */
    #matchup-mode-switch:checked, #show-all-results-switch:checked {
      background-color: var(--theme-main-color) !important;
      border-color: var(--theme-main-color) !important;
    }

    /* 스위치 포커스 시 그림자 효과 (RGB 변수 사용) */
    #matchup-mode-switch:focus, #show-all-results-switch:focus {
      border-color: var(--theme-main-color);
      box-shadow: 0 0 0 0.25rem rgba(var(--theme-main-color-rgb), 0.25) !important;
    }

    /* 만약 .btn-white의 글자색이 Today 버튼과 다르다면 아래처럼 각각 지정하는 것이 가장 정확합니다 */
    .btn-white:hover {
      color: #333333 !important; /* 날짜 버튼의 원래 글자색(검정/진한회색) 유지 */
    }

    .container, .container-fluid {
      padding-left: 4px !important;
      padding-right: 4px !important;
    }
    /* 사파리, iOS 크롬 등에서 자기 맘대로 버튼/인풋 디자인 바꾸는거 차단 */
    button,
    input,
    .btn,
    .filter-chip {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin: 0; /* 브라우저 기본 마진 제거 */
    }
    /* 필터 칩 스타일 */
    .filter-chip {
      height: 28px;
      white-space: nowrap !important;
      padding: 3px 8px !important;
      font-size: 0.72rem !important;
      letter-spacing: -0.03em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 24px;
      border: 1px solid #dee2e6;
      background: white;
      color: #495057;
      cursor: pointer;
      transition: all 0.2s;
      user-select: none;
      font-weight: 500;
    }

    .filter-chip:hover {
      border-color: #adb5bd;
      background: #f8f9fa;
    }

    input:checked + .filter-chip {
      background-color: #333 !important;
      border-color: #333 !important;
      color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* 구단별 색상 (필터칩) */
    input:checked + .chip-HT {
      background: var(--HT-color) !important;
      border-color: var(--HT-color) !important;
    }

    input:checked + .chip-SK {
      background: var(--SK-color) !important;
      border-color: var(--SK-color) !important;
    }

    input:checked + .chip-LG {
      background: var(--LG-color) !important;
      border-color: var(--LG-color) !important;
    }

    input:checked + .chip-KT {
      background: var(--KT-color) !important;
      border-color: var(--KT-color) !important;
    }

    input:checked + .chip-NC {
      background: var(--NC-color) !important;
      border-color: var(--NC-color) !important;
    }

    input:checked + .chip-HH {
      background: var(--HH-color) !important;
      border-color: var(--HH-color) !important;
    }

    input:checked + .chip-OB {
      background: var(--OB-color) !important;
      border-color: var(--OB-color) !important;
    }

    input:checked + .chip-WO {
      background: var(--WO-color) !important;
      border-color: var(--WO-color) !important;
    }

    input:checked + .chip-LT {
      background: var(--LT-color) !important;
      border-color: var(--LT-color) !important;
    }

    input:checked + .chip-SS {
      background: var(--SS-color) !important;
      border-color: var(--SS-color) !important;
    }

    .stadium-inactive {
      opacity: 0.55;
      border-style: dashed;
      background: #fafafa;
    }

    .filter-chip.stadium-inactive:hover {
      opacity: 1;
      border-style: solid;
    }

    /* Active Tags */
    #active-tags-container {
      display: none;
      margin-top: -5px;
      background: white;
    }

    .active-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #555 !important;
      padding: 6px 10px;
      border-radius: 18px;
      background-color: #f8f9fa !important;
      font-size: 0.75rem;
      font-weight: bold;
      border: 1px solid #eee !important;
    }

    .tag-logo {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }

    .active-tag i {
      cursor: pointer;
      color: #adb5bd;
    }

    /* Layout & Summary */
    .filter-card {
      border: none !important; /* 테두리 삭제 */
      border-radius: 16px;
      overflow: hidden;
      background-color: #ffffff;
      /* 테두리 관련 transition은 삭제해도 무방해 */
      transition: background-color 0.3s ease;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    }

    /* 테마 적용 시 필터 카드 테두리 색상 변경 */
    body[data-theme-active="true"] .filter-card {
      border: none !important; /* 테두리 색상 주던 로직 삭제 */
      background-color: #ffffff;
    }

    #summary-area {
      padding: 6px 10px !important;
      display: flex !important;
      align-items: center;
      overflow: hidden;
    }

    .bg-matchup-active {
      background-color: #f1f3f5 !important; /* 연한 그레이 */
      border: 1px solid #dee2e6 !important;
    }

    .bg-matchup-active #summary-text {
      color: var(--theme-main-color) !important;
    }

    #summary-text {
      font-size: 0.75rem !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    .rotate-180 {
      transform: rotate(180deg);
    }

    .main-content-wrapper {
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      transition: max-width 0.3s ease;
      touch-action: pan-y; /* 🚨 수평 스와이프 시 브라우저 뒤로가기 방지 🚨 */
    }

    /* ------------------------------------------------------------------ */
    /* 📅 Calendar Grid Core Layout */
    /* ------------------------------------------------------------------ */

    /* 팀별 소프트 배경색 */
    .bg-soft-HT {
      background-color: rgba(234, 0, 41, 0.15);
    }

    .bg-soft-SK {
      background-color: rgba(206, 14, 45, 0.15);
    }

    .bg-soft-LG {
      background-color: rgba(198, 12, 48, 0.15);
    }

    .bg-soft-KT {
      background-color: rgba(0, 0, 0, 0.1);
    }

    .bg-soft-NC {
      background-color: rgba(7, 34, 65, 0.15);
    }

    .bg-soft-HH {
      background-color: rgba(243, 115, 33, 0.15);
    }

    .bg-soft-OB {
      background-color: rgba(19, 18, 48, 0.15);
    }

    .bg-soft-WO {
      background-color: rgba(130, 0, 36, 0.15);
    }

    .bg-soft-LT {
      background-color: rgba(4, 30, 66, 0.15);
    }

    .bg-soft-SS {
      background-color: rgba(7, 76, 161, 0.15);
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 2px;
      transition: grid-template-columns 0.3s ease;
      overflow-anchor: none;
    }

    .day-header {
      text-align: center;
      font-weight: bold;
      padding: 8px 0;
      color: #666;
      font-size: 0.75rem;
      border-bottom: 1px solid #eee;
    }

    .day-cell {
      height: 160px !important; /* PC Height */
      min-width: 0;
      position: relative;
      background: transparent;
      z-index: 1;
    }

    .today-active-cell {
      /* 1. PC 보더: 2px은 약간 투박해서 1.5px로 정밀 조정 */
      border: 1.5px solid var(--theme-main-color) !important;

      /* 2. 배경: 농도를 0.15에서 0.06으로 대폭 낮추고,
            중간 지점을 앞당겨서 글자가 있는 부분은 거의 투명하게 처리 */
      background: linear-gradient(
              135deg,
              rgba(var(--theme-main-color-rgb), 0.06) 0%, /* 농도 확 줄임 */ rgba(var(--theme-main-color-rgb), 0.02) 25%, /* 더 빨리 연해짐 */ transparent 60% /* 60% 지점부터는 완전 투명 */
      ) ,white !important;

      /* 3. 그림자도 더 은은하게 */
      box-shadow: 0 2px 8px rgba(var(--theme-main-color-rgb), 0.05);
      z-index: 20;
    }

    .day-inner-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      background: white;
      border-radius: 12px;
      border: 1px solid #eee;
      display: flex;
      flex-direction: column;
      padding: 4px;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      overflow: hidden;
    }

    /* PC: Hover / Mobile: Expanded Interaction */
    .day-cell.expanded {
      z-index: 100;
    }

    .holiday-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      background-color: #EA0029; /* 빨간색 */
      color: white;
      border-radius: 5px;
      font-size: 0.65rem;
      font-weight: bold;
      line-height: 1;
      margin-left: 3px;
      margin-top: 3px;
      vertical-align: middle;
      z-index: 10;
      cursor: default;
    }

    .holiday-full-text {
      display: none;
      font-size: 0.7rem;
      font-weight: bold;
      color: #EA0029;
      margin-left: 6px;
      margin-top: 6px;
    }

    .enjoyment-filter-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .enjoyment-filter-item {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 12px;
    }

    .enjoyment-filter-item label {
      min-width: 0;
      flex: 0 1 auto;
      margin: 0;
      color: #343a40;
      font-size: 0.84rem;
      font-weight: 700;
      word-break: keep-all;
      cursor: pointer;
    }

    .enjoyment-color-swatch {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      margin-left: 1px;
      padding: 0;
      border: 2px solid #fff;
      border-radius: 6px;
      background: #ffc107;
      box-shadow: 0 0 0 1px #ced4da;
      cursor: pointer;
    }

    .enjoyment-color-swatch:hover,
    .enjoyment-color-swatch:focus-visible {
      transform: scale(1.08);
      box-shadow: 0 0 0 2px #495057;
      outline: none;
    }

    .enjoyment-color-modal-content {
      width: 176px;
      margin: 0 auto;
      border-radius: 22px;
      overflow: hidden;
    }

    #enjoyment-color-picker {
      width: 88px;
      height: 88px;
      padding: 0;
      border: 4px solid #fff;
      border-radius: 50%;
      background: transparent;
      box-shadow: 0 0 0 1px #ced4da, 0 8px 20px rgba(0, 0, 0, 0.14);
      cursor: pointer;
    }

    #enjoyment-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
    #enjoyment-color-picker::-webkit-color-swatch {
      border: 0;
      border-radius: 50%;
    }
    #enjoyment-color-picker::-moz-color-swatch { border: 0; border-radius: 50%; }

    .calendar-enjoyment-marker {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      margin: -3px 0 -3px 1px;
      cursor: pointer;
      z-index: 40;
      outline: none;
    }

    .calendar-enjoyment-dots {
      display: grid;
      grid-template-columns: repeat(2, 8px);
      gap: 3px;
      align-items: center;
      justify-content: center;
      direction: rtl;
    }

    .calendar-enjoyment-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffc107;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .calendar-enjoyment-panel {
      display: none;
      position: absolute;
      top: 26px;
      right: 4px;
      width: min(280px, calc(100vw - 24px));
      max-height: min(420px, calc(100vh - 80px));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 10px;
      background: #fffdf3;
      border: 1px solid #ffd43b;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
      color: #343a40;
      text-align: left;
      z-index: 200;
    }

    .calendar-enjoyment-title {
      display: block;
      margin-bottom: 6px;
      color: #704800;
      font-size: 0.7rem;
      font-weight: 800;
    }

    .calendar-enjoyment-category {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 6px;
      margin-top: 4px;
      border-radius: 6px;
      background: #fff3bf;
      color: #5f3b00;
      font-size: 0.68rem;
      font-weight: 800;
      word-break: keep-all;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.15s ease, transform 0.15s ease;
    }

    .calendar-enjoyment-category > span:last-child {
      display: -webkit-box;
      min-width: 0;
      overflow: hidden;
      line-height: 1.35;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    a.calendar-enjoyment-category:hover,
    a.calendar-enjoyment-category:focus-visible {
      background: #ffe69c;
      color: #3f2700;
      transform: translateY(-1px);
      outline: 2px solid rgba(112, 72, 0, 0.28);
      outline-offset: 1px;
    }

    .calendar-enjoyment-category-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 50%;
    }

    .calendar-enjoyment-boundary {
      flex: 0 0 auto;
      padding: 1px 5px;
      border-radius: 999px;
      background: #704800;
      color: #fff;
      font-size: 0.58rem;
      line-height: 1.35;
    }

    .day-cell.enjoyment-expanded > .calendar-enjoyment-panel {
      display: block;
    }

    .day-cell.enjoyment-link-active {
      z-index: 300;
    }

    .day-cell.enjoyment-link-active > .calendar-enjoyment-panel {
      display: block;
    }

    @media (min-width: 577px) {
      .calendar-enjoyment-panel::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
      }

      .day-cell:has(.calendar-enjoyment-marker:hover),
      .day-cell:has(.calendar-enjoyment-marker:focus-visible),
      .day-cell:has(> .calendar-enjoyment-panel:hover),
      .day-cell:has(> .calendar-enjoyment-panel:focus-within) {
        z-index: 300;
      }

      .day-cell:has(.calendar-enjoyment-marker:hover) > .calendar-enjoyment-panel,
      .day-cell:has(.calendar-enjoyment-marker:focus-visible) > .calendar-enjoyment-panel,
      .day-cell > .calendar-enjoyment-panel:hover,
      .day-cell > .calendar-enjoyment-panel:focus-within {
        display: block;
      }

      .day-cell:hover {
        z-index: 100;
      }

      .day-cell:hover .day-inner-wrapper {
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        width: calc(100% + 10px);
        height: auto;
        min-height: 100%;
        box-shadow: 0 10px 25px rgba(var(--theme-main-color-rgb), 0.15);
        border-color: var(--theme-main-color) !important;
        z-index: 100;
        transform: scale(1.02);
        overflow: visible;
      }

      .day-cell:hover .more-badge {
        display: none !important;
      }

      .day-cell:hover .hidden-match {
        display: flex !important;
      }


      /* PC에서도 Hover 시 공휴일 텍스트 표시 */
      .day-cell:hover .holiday-dot {
        display: none !important;
      }

      .day-cell:hover .holiday-full-text {
        display: inline-block !important;
      }

      /* PC에서는 모바일용 점(.holiday-dot) 숨김 */
      .holiday-dot {
        display: none !important;
      }

      /* PC 평소 상태: 뱃지 보임 */
      .holiday-badge {
        display: inline-flex !important;
      }

      /* PC 호버 상태: 뱃지 숨기고, 풀 텍스트 보여줌 */
      .day-cell:hover .holiday-badge {
        display: none !important;
      }

      .day-cell:hover .holiday-full-text {
        display: inline-block !important;
      }

    }

    .date-num {
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 4px;
      display: inline-block;
      z-index: 2;
    }

    .calendar-date-heading {
      display: inline-flex;
      align-items: flex-start;
      min-width: 0;
    }

    .holiday-label {
      font-size: 0.6rem;
      font-weight: 500;
      color: var(--HT-color);
      margin-left: 2px;
    }

    /* 📌 [수정] 중요 이벤트 탭 (Peeking Tab) 스타일 */
    .event-tab {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%); /* 최초 상태: 중앙 정렬만 */
      width: 40%;
      height: 8px; /* 최초 상태: 아래로 살짝 내려온 8px 선 */

      /* 1. 최초 상태: 아래쪽만 둥글게 해서 '걸려 있는' 느낌 */
      border-radius: 0 0 6px 6px;
      background-color: var(--theme-main-color) !important;
      z-index: 110;

      /* 2. 튕기는 듯한 애니메이션 (역동적인 느낌 추가) */
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

      font-size: 0;
      color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      pointer-events: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .tab-ticketing {
      background-color: #ffc107 !important; /* 시선을 끄는 노란색 */
      color: #212529 !important; /* 가독성을 위한 진한 글씨 */
      box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4) !important;
    }

    .tab-ps {
      background-color: #20242d !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(32, 36, 45, 0.24) !important;
    }
    .day-cell:hover .event-tab,
    .day-cell.expanded .event-tab {
      height: 24px !important;
      width: max-content;
      min-width: 40%;
      max-width: 120px;
      /* 위로 100%만큼 밀어 올려서 셀 밖으로 보냄 */
      transform: translate(-50%, -100%) !important;

      /* 확장 시: 위쪽을 둥글게 반전 (탭 스타일) */
      border-radius: 6px 6px 0 0 !important;

      color: white !important;
      font-size: 0.75rem !important;
      font-weight: bold;
      padding: 0 8px 2px;
      box-sizing: border-box;
      text-overflow: ellipsis;
    }

    /* ⚠️ [중요] 탭이 셀 밖으로 나가야 하므로 래퍼의 hidden을 일시적으로 해제 */
    .day-cell:hover .day-inner-wrapper,
    .day-cell.expanded .day-inner-wrapper {
      overflow: visible !important;
    }


    /* Match Items */
    .match-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .match-list.doubleheader-action-list {
      gap: 0;
      margin: 0 -4px -4px;
      border-radius: 0 0 11px 11px;
      overflow: hidden;
    }

    .doubleheader-action {
      position: relative;
      flex: 1 1 50%;
      width: 100%;
      min-height: 0;
      border-radius: 0;
      transition: background-color 0.16s ease;
    }

    .doubleheader-mobile-summary {
      display: none;
    }

    .doubleheader-desktop-details {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .doubleheader-hover-overlay {
      border-radius: 0 !important;
      z-index: 5;
    }

    .doubleheader-action:first-child .doubleheader-hover-overlay {
      border-radius: 12px 12px 0 0 !important;
    }

    .doubleheader-action:last-child .doubleheader-hover-overlay {
      border-radius: 0 0 12px 12px !important;
    }

    .doubleheader-hover-round {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 2px;
      padding: 1px 6px;
      border: 1px solid rgba(255, 255, 255, 0.38);
      border-radius: 999px;
      color: rgba(255, 255, 255, 0.92);
      font-size: 0.55rem;
      font-weight: 900;
      line-height: 1.35;
      white-space: nowrap;
    }

    @media (min-width: 577px) {
      .day-cell:hover .doubleheader-action,
      .doubleheader-day-wrapper:focus-visible .doubleheader-action {
        background: rgba(var(--theme-main-color-rgb), 0.09);
      }

      .day-cell:hover .doubleheader-action .doubleheader-hover-overlay,
      .doubleheader-day-wrapper:focus-visible .doubleheader-hover-overlay {
        opacity: 1;
      }

      .doubleheader-day-wrapper:focus-visible {
        outline: none;
      }

    }

    .doubleheader-mini-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 2px;
      padding: 1px 5px;
      border-radius: 999px;
      background: #fff1f3;
      color: #b4233c;
      font-size: 0.55rem;
      font-weight: 800;
      line-height: 1.35;
      white-space: nowrap;
    }

    .match-mini {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2px 0;
      border-radius: 4px;
      transition: background 0.1s;
    }


    /* PC Style for Match */
    .mini-logo {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    .stadium-name {
      font-size: 0.65rem;
      font-weight: 700;
      color: #999; /* 너무 진하면 튀니까 연한 회색으로 */
      background: transparent !important; /* 🔥 배경색 제거 */
      padding: 0 !important; /* 🔥 배경이 없으니 패딩도 제거 */
      margin-top: 2px;
      display: inline-block;
    }

    .vs-text {
      font-size: 0.7rem;
      color: #999;
      margin: 0 4px;
      font-weight: normal;
    }

    /* 숨겨진 경기 스타일 */
    .hidden-match {
      display: none !important;
    }

    .more-badge {
      font-size: 0.65rem;
      text-align: center;
      color: #888;
      background: #f1f3f5;
      border-radius: 4px;
      margin-top: 2px;
      padding: 2px;
      cursor: pointer;
    }

    /* 📌 [수정] 집중 모드 (Central View) 스타일 */
    .central-match-view {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: auto;
      min-height: 0;
      box-sizing: border-box;
      opacity: 0.9;
      position: relative;
      transition: transform 0.2s ease, opacity 0.2s ease;
      cursor: pointer;
      border-radius: 8px;
    }

    @media (hover: hover) and (pointer: fine) {
      .central-match-view:hover {
        transform: scale(1.08);
        opacity: 1;
        z-index: 10;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }
      .central-match-view:hover .hover-overlay {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .central-match-view.active-overlay {
        transform: scale(1.08);
        opacity: 1;
        z-index: 10;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .central-match-view.active-overlay .hover-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    @media (prefers-color-scheme: dark) {
      .central-match-view:hover, .central-match-view.active-overlay {
        background: #2a2a2a;
      }
    }

    /* 📌 [수정] 빈티지 스탬프 (직관) 스타일 */
    .vintage-stamp {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-15deg);
      border: 3px solid rgba(220, 53, 69, 0.8);
      color: rgba(220, 53, 69, 0.85);
      font-weight: 900;
      font-size: 0.95rem;
      letter-spacing: 2px;
      padding: 3px 8px;
      border-radius: 6px;
      pointer-events: none;
      z-index: 2;
      white-space: nowrap;
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(1px);
      box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.3), 0 2px 4px rgba(0,0,0,0.05);
    }

    .hover-overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(255, 255, 255, 0.96);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
      padding: 4px;
      text-align: center;
      border-radius: 8px;
    }

    @media (prefers-color-scheme: dark) {
      .hover-overlay { background: rgba(33, 37, 41, 0.96); color: #fff; }
    }

    .bg-overlay-upcoming { background: rgba(0, 0, 0, 0.65) !important; color: #fff !important; }
    @media (prefers-color-scheme: dark) {
      .bg-overlay-upcoming { background: rgba(0, 0, 0, 0.65) !important; color: #fff !important; }
    }
    .bg-overlay-win { background: rgba(13, 110, 253, 0.90) !important; color: #fff !important; }
    .bg-overlay-lose { background: rgba(220, 53, 69, 0.90) !important; color: #fff !important; }
    .bg-overlay-draw { background: rgba(108, 117, 125, 0.90) !important; color: #fff !important; }
    .bg-overlay-result { background: rgba(52, 58, 64, 0.90) !important; color: #fff !important; }
    .bg-overlay-cancel { background: rgba(52, 58, 64, 0.90) !important; color: #fff !important; }
    .bg-overlay-live { background: rgba(253, 126, 20, 0.90) !important; color: #fff !important; }

    .central-match-view.always-show-overlay .hover-overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .hover-score { font-size: clamp(0.75rem, 2.5vw, 1rem); font-weight: 800; margin-bottom: 2px; white-space: nowrap; }
    .hover-result { font-size: clamp(0.85rem, 3vw, 1.2rem); font-weight: 900; margin-bottom: 2px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
    .hover-pitcher { font-size: clamp(0.6rem, 2vw, 0.75rem); color: #6c757d; line-height: 1.2; white-space: nowrap; }
    .bg-overlay-win .hover-pitcher, .bg-overlay-lose .hover-pitcher, .bg-overlay-draw .hover-pitcher, .bg-overlay-result .hover-pitcher, .bg-overlay-cancel .hover-pitcher, .bg-overlay-live .hover-pitcher { color: rgba(255,255,255,0.85); }
    @media (prefers-color-scheme: dark) { .hover-pitcher { color: #adb5bd; } }
    .hover-fire { font-size: clamp(0.6rem, 2vw, 0.75rem); color: #ff4b2b; font-weight: 700; display: flex; align-items: center; gap: 2px; flex-direction: column; white-space: nowrap; }


    .central-logo {
      width: 45px;
      height: 45px;
      object-fit: contain;
      margin-bottom: 4px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .central-stadium {
      font-size: 0.7rem;
      font-weight: 700;
      color: #999; /* 기본(원정)은 원래대로 연한 회색 */
      background: transparent !important;
      padding: 0 !important;
      border-radius: 0;
      margin-top: 4px;
      transition: all 0.2s ease;
    }
    .central-stadium.home-badge {
      color: var(--theme-main-color) !important; /* 글자는 진한 팀 컬러 */
      /* 배경은 팀 컬러 RGB를 가져와서 투명도 10%만 적용 */
      background-color: rgba(var(--theme-main-color-rgb), 0.1) !important;
      padding: 3px 8px !important;
      border-radius: 6px !important;
      margin-top: 6px;
      box-shadow: none !important; /* 꽉 찬 색이 아니니 그림자는 빼는 게 예쁨 */
      letter-spacing: -0.3px;
    }
    /* 모바일용 폰트 등 조정 */
    @media (max-width: 576px) {
      .central-logo {
        width: 32px;
        height: 32px;
      }

      .central-stadium {
        font-size: 0.65rem;
      }
    }
    /* 내 팀 강조 */
    /* 내 팀 강조: 심플한 밑줄(Bar) 스타일 */
    .my-team-glow {
      /* 1. 기존 뱃지/배경 스타일 제거 (투명하게) */
      background-color: transparent !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      border: none !important;

      /* 2. 핵심 밑줄 스타일 */
      border-bottom: 2px solid var(--theme-main-color) !important; /* 팀 컬러로 된 굵은 선 */


      /* 3. 미세한 강조 */
      transform: scale(1.1); /* 밑줄 때문에 공간을 먹으니 아주 살짝만 키움 */
      margin-bottom: -1px; /* 밑줄 두께만큼 레이아웃 밀림 방지 보정 */
    }


    .text-HT {
      color: var(--HT-color);
    }

    .text-SK {
      color: var(--SK-color);
    }

    .text-LG {
      color: var(--LG-color);
    }

    .text-KT {
      color: var(--KT-color);
    }

    .text-NC {
      color: var(--NC-color);
    }

    .text-HH {
      color: var(--HH-color);
    }

    .text-OB {
      color: var(--OB-color);
    }

    .text-WO {
      color: var(--WO-color);
    }

    .text-LT {
      color: var(--LT-color);
    }

    .text-SS {
      color: var(--SS-color);
    }

    /* Onboarding & My Team */
    .my-team-card {
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      padding: 8px 12px;
      cursor: pointer;
    }

    /* 📌 [수정] 모바일 공휴일 점 */
    .holiday-dot {
      position: absolute;
      top: 13px; /* 상단 여백 살짝 조정 */
      right: 8px; /* 우측 여백 살짝 조정 */
      width: 6px;
      height: 6px;
      background-color: #EA0029; /* 빨간색 */
      border-radius: 50%;
      display: block; /* [중요] none -> block으로 변경하여 항상 보이게 설정 */
      z-index: 10; /* 날짜 숫자보다 위에 오도록 */
    }

    /* 📱 Mobile Optimized Styles */
    @media (max-width: 576px) {
      :root {
        --theme-alpha: 0.02; /* 모바일에서 더 연하게 보정 */
      }

      #calendar-grid {
        align-items: start;
      }

      /* .filter-card, body[data-theme-active="true"] .filter-card {
         border: none !important;
       }*/
      .day-cell {
        /* 브라우저별 페이지 배율과 무관하게 달력 칸 비율을 동일하게 유지한다. */
        height: auto !important;
        min-height: 0;
        width: 100%;
        align-self: start;
        aspect-ratio: 3 / 4;
      }

      .day-inner-wrapper {
        display: grid;
        grid-template-rows: 30px minmax(0, 1fr);
      }

      .day-inner-wrapper > .cell-header {
        min-width: 0;
        min-height: 0;
        margin-bottom: 0 !important;
      }

      .day-inner-wrapper > .central-match-view,
      .day-inner-wrapper > .match-list {
        min-width: 0;
        min-height: 0;
      }

      .calendar-grid.hide-specific-day {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
      }

      .today-active-cell {
        border-width: 1px !important; /* 모바일은 실선 느낌으로 아주 얇게 */
      }

      .hide-dow-0 [data-dow="0"], .hide-dow-1 [data-dow="1"], .hide-dow-2 [data-dow="2"],
      .hide-dow-3 [data-dow="3"], .hide-dow-4 [data-dow="4"], .hide-dow-5 [data-dow="5"], .hide-dow-6 [data-dow="6"] {
        display: none !important;
      }

      .day-cell.expanded .day-inner-wrapper {
        position: absolute;
        top: -5px;
        left: -10px;
        right: -10px;
        width: calc(100% + 20px);
        height: auto;
        min-height: 100%;
        box-shadow: 0 8px 20px rgba(var(--theme-main-color-rgb), 0.25);
        z-index: 100;
        /* 파란색(#0d6efd) 대신 팀 컬러로 변경 */
        border: 1px solid var(--theme-main-color) !important;
        overflow: visible;
      }

      .day-cell.expanded:not(.enjoyment-expanded) {
        transform: scale(1.04);
        z-index: 100;
      }

      .day-cell.enjoyment-expanded {
        height: auto !important;
        min-height: 0;
        aspect-ratio: 3 / 4;
        min-width: 0;
        z-index: 20;
        overflow-anchor: none;
      }
      .day-cell.enjoyment-expanded .day-inner-wrapper {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        border: 1px solid var(--theme-main-color) !important;
        box-shadow: 0 0 0 2px rgba(var(--theme-main-color-rgb), 0.12);
      }
      .day-cell.enjoyment-expanded > .calendar-enjoyment-panel {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: var(--mobile-enjoyment-panel-width, calc(100vw - 24px));
        min-width: 0;
        max-height: min(164px, 26vh);
        margin-top: 8px;
        margin-left: var(--mobile-enjoyment-panel-offset, 0px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        box-sizing: border-box;
        padding: 8px;
        z-index: 30;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      }

      .mobile-calendar-enjoyment-slot {
        grid-column: 1 / -1;
        width: calc(100% - 20px);
        min-width: 0;
        margin: 0 auto;
        padding: 6px 0;
        overflow-anchor: none;
        z-index: 30;
      }

      .mobile-calendar-enjoyment-slot > .calendar-enjoyment-panel {
        display: block;
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        max-height: min(164px, 26vh);
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        box-sizing: border-box;
        padding: 8px;
        z-index: 30;
      }

      .holiday-dot {
        position: static;
        flex: 0 0 6px;
        margin: 0 3px 0 0;
      }

      .enjoyment-filter-list { grid-template-columns: 1fr; }
      .enjoyment-filter-item { padding: 9px 10px; }

      .day-cell.expanded .hidden-match {
        display: flex !important;
      }

      .day-cell.expanded .more-badge {
        display: none !important;
      }

      /* 📌 [수정] 모바일 확장 시 탭 및 공휴일 처리 */
      .day-cell.expanded .holiday-dot {
        display: none !important;
      }

      .day-cell.expanded .holiday-full-text {
        display: inline-block !important;
      }

      .holiday-full-text {
        display: none;
      }

      /* 평소엔 숨김 */
      .holiday-badge {
        display: none !important;
      }


      /* Mobile Content Layout (General) */
      .match-mini {
        flex-direction: row !important;
        gap: 2px;
        padding: 1px 0;
        justify-content: center;
        width: 100%;
      }

      .doubleheader-action {
        justify-content: flex-start !important;
        gap: 0;
        padding-left: 6cqw !important;
        padding-right: 6cqw !important;
        -webkit-tap-highlight-color: transparent;
      }

      .doubleheader-day-wrapper:active .doubleheader-action {
        background: rgba(var(--theme-main-color-rgb), 0.12);
      }

      .doubleheader-desktop-details {
        display: none !important;
      }

      .doubleheader-mobile-summary {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 5cqw;
        line-height: 1;
        white-space: nowrap;
      }

      .doubleheader-mobile-round {
        flex: 0 0 auto;
        color: var(--theme-main-color);
        font-size: 11cqw;
        font-weight: 900;
        letter-spacing: -0.06em;
      }

      .doubleheader-mobile-opponent {
        min-width: 0;
        overflow: hidden;
        color: #343a40;
        font-size: 11cqw;
        font-weight: 800;
        letter-spacing: -0.04em;
        text-overflow: ellipsis;
      }

      .mini-logo, .stadium-name, .vs-text {
        display: none !important;
      }

      .team-initial {
        font-size: 0.65rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.5px;
      }
      /* 필터 요약 아이콘 래퍼 스타일 */
      /* 동그라미 배경 제거 & 미니멀 스타일 */
      .filter-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #333 !important;
        margin-right: 6px; /* 텍스트와의 간격 최적화 */
      }

      .filter-icon-wrapper i {
        font-size: 1.1rem; /* 텍스트 굵기와 밸런스를 맞추기 위해 살짝 키움 */
        line-height: 1;
        color: #333 !important;
      }
      .my-team-initial {
        /* 기존 네모 박스 스타일 초기화 */
        background-color: transparent !important;
        border-radius: 0 !important;

        /* 글자색을 팀 컬러로 변경하여 강조 */
        color: var(--theme-main-color) !important;

        /* 밑줄 스타일 적용 (PC 로고와 통일감) */
        border-bottom: 2px solid var(--theme-main-color) !important;
        padding-bottom: 0px; /* 텍스트라 바짝 붙이는 게 예쁨 */
        line-height: 1.2; /* 줄 간격 미세 조정 */
      }

      .mobile-v {
        font-size: 0.5rem;
        color: #ddd;
        margin: 0 1px;
      }

      .stadium-initial-badge {
        font-size: 0.55rem;
        font-weight: 700;
        color: #666 !important; /* 글자색을 회색으로 변경 */
        background: rgba(0, 0, 0, 0.06) !important; /* 배경도 연한 회색으로 통일 */
        padding: 1px 3px;
        border-radius: 3px;
        margin-left: 2px;
        min-width: 14px;
        text-align: center;
      }

      /* 기존 라벨 숨김 (탭으로 대체) */
      .opening-day-label, .all-star-label, .ps-label {
        display: none !important;
      }

      /*
       * 모바일 캘린더 셀 내부도 셀 너비를 기준으로 함께 축소한다.
       * rem/vw/고정 px를 섞으면 브라우저의 글자 확대 설정에 따라 날짜, 점,
       * 경기 카드의 비율이 달라지므로 컨테이너 단위(cqw)로 한 기준을 사용한다.
       */
      .day-cell {
        container-type: inline-size;
        font-synthesis: none;
      }

      .day-inner-wrapper {
        grid-template-rows: 38cqw minmax(0, 1fr);
        padding: clamp(3px, 6cqw, 4px);
      }

      .day-inner-wrapper > .cell-header {
        position: relative;
        width: 100%;
        height: 38cqw;
        line-height: 1;
      }

      .date-num {
        margin: 0;
        padding: 1cqw 0 0;
        font-size: 20cqw;
        line-height: 1.05;
      }

      .date-num.has-holiday {
        display: inline-flex;
        align-items: center;
      }

      .date-num.has-holiday::after {
        content: '';
        width: 9cqw;
        height: 9cqw;
        flex: 0 0 9cqw;
        margin-left: 4cqw;
        border-radius: 50%;
        background-color: #EA0029;
      }

      .calendar-day-meta {
        position: absolute;
        top: 0;
        right: 0;
        height: 38cqw;
        min-width: 0;
        margin: 0;
      }

      .calendar-enjoyment-marker {
        width: 38cqw;
        height: 38cqw;
        margin: 0;
      }

      .calendar-enjoyment-dots {
        grid-template-columns: repeat(2, 12cqw);
        gap: 4cqw;
      }

      .calendar-enjoyment-dot {
        width: 12cqw;
        height: 12cqw;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95),
                    0 1px 2px rgba(0, 0, 0, 0.22);
      }

      .holiday-dot {
        display: none !important;
      }

      .day-inner-wrapper > .central-match-view,
      .day-inner-wrapper > .match-list {
        width: 100%;
        height: 100%;
        align-self: stretch;
      }

      /* 두 경기와 더보기 배지가 날짜 칸 안에 함께 들어가도록 같은 단위를 쓴다. */
      .match-list:not(.doubleheader-action-list) {
        gap: 2cqw;
        line-height: 1.2;
      }

      .match-list:not(.doubleheader-action-list) > .match-mini {
        flex: 0 0 auto;
        gap: 2cqw;
        padding: 1cqw 0;
      }

      .match-list:not(.doubleheader-action-list) .team-initial {
        font-size: 15cqw;
        line-height: 1.2;
        letter-spacing: -0.04em;
      }

      .match-list:not(.doubleheader-action-list) .mobile-v {
        font-size: 10cqw;
        margin: 0 1cqw;
      }

      .match-list:not(.doubleheader-action-list) .match-location {
        width: auto !important;
        flex: 0 0 auto;
        margin-top: 0 !important;
      }

      .match-list:not(.doubleheader-action-list) .stadium-initial-badge {
        min-width: 0;
        font-size: 12cqw;
        line-height: 1.2;
        padding: 1cqw 3cqw;
        margin-left: 2cqw;
      }

      .more-badge {
        flex: 0 0 auto;
        margin-top: auto;
        padding: 2cqw 0;
        font-size: 14cqw;
        line-height: 1.2;
        white-space: nowrap;
      }

      .central-match-view {
        overflow: hidden;
      }

      .central-match-view,
      .hover-overlay {
        border-radius: 10cqw;
      }

      .central-match-view.active-overlay {
        transform: none;
        box-shadow: none;
      }

      .central-logo {
        width: 40cqw;
        height: 40cqw;
        margin-bottom: 2cqw;
      }

      .central-stadium,
      .central-stadium.home-badge {
        max-width: 92%;
        margin-top: 2cqw;
        font-size: 11cqw;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .central-stadium.home-badge {
        padding: 1cqw 5cqw !important;
        border-radius: 5cqw !important;
      }

      .hover-overlay {
        inset: 0;
        box-sizing: border-box;
        min-width: 0;
        padding: 4cqw;
        overflow: hidden;
      }

      .hover-score {
        margin-bottom: 1cqw;
        font-size: 17cqw;
        line-height: 1.1;
      }

      .hover-result {
        margin-bottom: 1cqw;
        font-size: 20cqw;
        line-height: 1.08;
      }

      .hover-result.gap-1 {
        gap: 2cqw !important;
        letter-spacing: 1cqw !important;
      }

      .hover-pitcher,
      .hover-fire {
        max-width: 100%;
        font-size: 10cqw;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .event-tab {
        height: 10cqw;
        border-radius: 0 0 6cqw 6cqw;
      }

      /* 확장된 날짜의 공휴일명은 날짜 아래 전용 한 줄에 표시한다. */
      .day-cell.expanded .calendar-day-meta {
        width: 100%;
        pointer-events: none;
      }

      .day-cell.expanded .calendar-enjoyment-marker {
        position: absolute;
        top: 0;
        right: 0;
        pointer-events: auto;
      }

      .day-cell.expanded .holiday-full-text {
        position: absolute;
        top: 22cqw;
        left: 0;
        display: block !important;
        max-width: calc(100% - 40cqw);
        margin: 0;
        line-height: 1;
        letter-spacing: -0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        pointer-events: none;
      }

      .day-cell.expanded .date-num.has-holiday::after {
        display: none;
      }

      .holiday-full-text.holiday-name-short { font-size: 10cqw; }
      .holiday-full-text.holiday-name-medium { font-size: 9cqw; }
      .holiday-full-text.holiday-name-long { font-size: 8cqw; }
    }

    #btn-onboarding-save {
      background: #212529 !important;
      border: none;
      font-weight: bold;
    }

    #matchup-mode-switch:checked, #show-all-results-switch:checked {
      background-color: var(--theme-main-color, #212529) !important;
      border-color: var(--theme-main-color, #212529) !important;
    }

    .disabled-day {
      cursor: default !important;
    }

    .no-match-bg .day-inner-wrapper {
      background: #fafafa;
    }

    .transition-link {
      transition: color 0.2s ease;
    }

    .transition-link:hover {
      color: var(--primary-color) !important;
    }


    /* 레드/난색 계열 테마가 활성화되었을 때만 카드 상단에 포인트 라인 주기 */

    body[data-theme-border="true"] .filter-card {
      /* 상단에 4px 정도의 두툼한 팀 컬러 라인 추가 */
      border-top: 4px solid var(--theme-main-color) !important;

      /* 기존 테두리가 있다면 좌우, 아래는 아주 연한 회색으로 유지해서 깔끔하게 */
      border-left: 1px solid #f1f3f5 !important;
      border-right: 1px solid #f1f3f5 !important;
      border-bottom: 1px solid #f1f3f5 !important;
    }
    /* ========================================= */
    /* 메인 로고 스타일 (투명도 착시 T 로고) */
    /* ========================================= */
    .logo-wrapper {
      color: var(--theme-main-color, #212529) !important;
      transition: transform 0.2s ease, opacity 0.2s ease;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .logo-wrapper:active {
      transform: scale(0.96);
      opacity: 0.8;
    }


    .main-logo-svg {
      color: var(--theme-main-color, #212529);
      transition: color 0.3s ease;
      /* 🔥 PC 기준: 폰트 크기(1.25rem)에 맞춰서 아주 미세하게만 올림 */
      transform: translateY(2px);
    }

    .logo-text {
      font-family: 'Pretendard', sans-serif;
      font-size: 1.25rem;
      line-height: 1;
      /* 회색 다 빼고 무조건 팀 컬러로 쫙 통일! */
      color: var(--theme-main-color, #212529) !important;
    }

    .logo-prefix {
      font-weight: 800; /* KBO는 두껍고 묵직하게 */
      margin-right: 0.25rem;
      letter-spacing: -0.02em;
    }

    .logo-main {
      font-weight: 600; /* Total Base는 살짝 얇게 해서 세련미 강조 */
      letter-spacing: -0.04em;
    }

    @media (max-width: 576px) {
      .logo-text {
        font-size: 1.15rem;
      }
      .main-logo-svg {
        /* 🔥 모바일 기준: 폰트가 작아지므로 아이콘을 살짝 더 올려서 정중앙을 맞춤 */
        transform: translateY(-2px);
      }
    }
    /* 페이지 전환 시 부드러운 느낌을 주기 위한 가벼운 애니메이션 */
    #calendar-grid, .filter-target {
      animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 월 피커 버튼 강조 */
    #monthGrid .btn-outline-secondary:hover {
      background-color: var(--theme-main-color);
      color: white !important;
    }

    /* 1. 스와이프 애니메이션 (페이지 전환) */
    @keyframes slideInRight {
      from { transform: translateX(40px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideInLeft {
      from { transform: translateX(-40px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    .page-transition-right {
      animation: slideInRight 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }
    .page-transition-left {
      animation: slideInLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .calendar-stage {
      position: relative;
    }

    .desktop-calendar-wing {
      display: none;
    }

    .month-transition-cue {
      position: fixed;
      top: 16%;
      left: 50%;
      z-index: 1080;
      min-width: 0;
      padding: 8px 16px;
      border: 1px solid rgba(255, 255, 255, 0.48);
      border-radius: 999px;
      background: rgba(33, 37, 41, 0.38);
      color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(8px);
      font-size: clamp(1.15rem, 2.4vw, 1.6rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -12px) scale(0.96);
    }

    .month-transition-cue.show {
      animation: monthCue 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes monthCue {
      0% { opacity: 0; transform: translate(-50%, -7px) scale(0.98); }
      22%, 62% { opacity: 0.78; transform: translate(-50%, 0) scale(1); }
      100% { opacity: 0; transform: translate(-50%, 5px) scale(1); }
    }

    @media (min-width: 992px) {
      .desktop-calendar-wing {
        position: fixed;
        top: 50%;
        z-index: 20;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 156px;
        border: 0;
        border-radius: 36px;
        background: transparent;
        color: var(--theme-main-color);
        box-shadow: none;
        font-size: 1.35rem;
        opacity: 0.64;
        transform: translateY(-50%);
        transition: opacity 0.18s ease;
      }

      .desktop-calendar-wing::before {
        content: '';
        position: absolute;
        inset: 22px 10px;
        z-index: -1;
        border-radius: 26px;
        background: transparent;
        box-shadow: none;
        transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      }

      .desktop-calendar-wing i {
        transition: transform 0.18s ease;
      }

      .desktop-calendar-wing:hover {
        background: transparent;
        box-shadow: none;
        opacity: 1;
        transform: translateY(-50%);
      }

      .desktop-calendar-wing:hover::before {
        background: #fff;
        box-shadow: 0 8px 24px rgba(var(--theme-main-color-rgb), 0.18);
        transform: scale(1.04);
      }

      .desktop-calendar-wing:hover i {
        transform: scale(1.12);
      }

      .desktop-calendar-wing:focus-visible {
        opacity: 0.85;
        outline: 2px solid rgba(var(--theme-main-color-rgb), 0.34);
        outline-offset: -10px;
      }

      .desktop-calendar-wing.left { left: max(8px, calc(50% - 420px)); }
      .desktop-calendar-wing.right { right: max(8px, calc(50% - 420px)); }
    }

    /* 2. 스와이프 시각적 가이드 (우측 깜빡임) */
    @keyframes pulse-right-glow {
      0% { opacity: 0; transform: translateX(10px); }
      50% { opacity: 1; transform: translateX(0); }
      100% { opacity: 0; transform: translateX(10px); }
    }
    .swipe-pulse-area {
      animation: pulse-right-glow 1.5s infinite ease-in-out;
    }

    /* 3. 개막일 제한 토스트 (투명 회색 + 흰 글씨) */
    .toast-light-gray {
      background: rgba(150, 150, 150, 0.4) !important;
      backdrop-filter: blur(12px);
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.3);
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    /* 꿀팁 배너 버튼 스타일 */
    .info-banner-btn {
      background-color: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(var(--theme-main-color-rgb), 0.15);
      border-radius: 16px;
      padding: 12px 16px;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      cursor: pointer;
    }
    .info-banner-btn:hover {
      transform: translateY(-2px);
      background-color: #fff;
      border-color: var(--theme-main-color);
      box-shadow: 0 6px 16px rgba(var(--theme-main-color-rgb), 0.1);
    }
    .info-banner-btn .icon-wrapper {
      width: 38px;
      height: 38px;
      background-color: #fff3cd;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
    }

    /* 필터 헤더 인터랙션 (꿀팁 배너와 동일한 효과) */
    .filter-interactive {
      transition: all 0.2s ease;
      border-radius: 16px;
    }
    .filter-interactive:hover {
      transform: translateY(-2px);
      background-color: #fff;
      border-color: var(--theme-main-color) !important;
      box-shadow: 0 6px 16px rgba(var(--theme-main-color-rgb), 0.1);
    }


    /* 스와이프 인디케이터 (투명 회색 + 둥근 모서리) */
    .swipe-indicator {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 60vh;
      background-color: rgba(120, 120, 120, 0.25);
      backdrop-filter: blur(4px);
      pointer-events: none;
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.15s ease-out, transform 0.1s ease-out;
    }
    .swipe-indicator-left {
      left: 0;
      border-radius: 0 100px 100px 0;
      transform-origin: left center;
    }
    .swipe-indicator-right {
      right: 0;
      border-radius: 100px 0 0 100px;
      transform-origin: right center;
    }

    /* 오늘의 직관 날씨 모달 */
    #weatherModal .weather-modal-dialog {
      max-width: 760px;
    }
    #weatherModal .weather-card-grid > * {
      min-width: 0;
    }
    #weatherModal .weather-card-heading {
      min-width: 0;
    }

    @media (max-width: 576px) {
      #weatherModal .weather-modal-dialog {
        width: auto;
        max-width: none;
        margin: 0.4rem;
        min-height: calc(100% - 0.8rem);
      }
      #weatherModal .weather-modal-content {
        max-height: calc(100dvh - 0.8rem);
        border-radius: 16px !important;
      }
      #weatherModal .modal-header {
        padding: 12px 14px !important;
      }
      #weatherModal .weather-modal-body {
        padding: 10px !important;
      }
      #weatherModal .weather-summary-banner {
        padding: 10px 12px !important;
      }
      #weatherModal .weather-card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
      }
      #weatherModal .weather-game-card {
        grid-column: auto !important;
        padding: 11px 12px !important;
      }
      #weatherModal .weather-metrics-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 7px !important;
        padding: 7px 9px !important;
      }
      #weatherModal .weather-metrics-row > * {
        min-width: 0;
        margin-left: 0 !important;
      }
    }