/* ================================================================= */
/* 담픽(Dampick) 토스 디자인 시스템(TDS) 및 공통 UI 스타일시트 (/css/tds-style.css) */
/* 2단계 모듈화: index.html 인라인 스타일 분리 */
/* ================================================================= */

    :root {
      --tds-font: 'Toss Product Sans', 'Tossface', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    }
    body { 
      font-family: var(--tds-font); 
      letter-spacing: -0.022em;
      word-break: keep-all;
      -webkit-tap-highlight-color: transparent; 
    }
    html.dark, html.dark body, .dark body { 
      background-color: #121212 !important; 
      color: #e5e7eb !important; 
    }
    /* 다크모드 공통 파스텔 배경 보정 (Tailwind 임의 슬래시 불일치 방지 및 눈부심 차단) */
    .dark [class*="bg-[#E8F3FF]"] {
      background-color: rgba(49, 130, 246, 0.16) !important;
    }
    /* 👑 토스 쇼핑 메인 배너 슬라이더 인디케이터 배지 & 컨트롤 (고대비 가독성 100% 보장) */
    .hero-counter-badge {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background-color: rgba(15, 19, 28, 0.88) !important;
      color: #ffffff !important;
      font-weight: 800 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      padding: 4px 10px !important;
      border-radius: 9999px !important;
      letter-spacing: 0.04em !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38) !important;
      border: 1px solid rgba(255, 255, 255, 0.28) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    }
    .hero-nav-arrow {
      background-color: rgba(15, 17, 23, 0.65) !important;
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    .hero-nav-arrow:hover {
      background-color: rgba(15, 17, 23, 0.9) !important;
    }
    .hero-dot-btn {
      height: 6px !important;
      border-radius: 9999px !important;
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    .hero-dot-btn.active {
      width: 22px !important;
      background-color: rgba(15, 17, 23, 0.85) !important;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    }
    .dark .hero-dot-btn.active {
      background-color: #ffffff !important;
      box-shadow: 0 1px 6px rgba(255, 255, 255, 0.3) !important;
    }
    .hero-dot-btn.inactive {
      width: 6px !important;
      background-color: rgba(15, 17, 23, 0.28) !important;
    }
    .dark .hero-dot-btn.inactive {
      background-color: rgba(255, 255, 255, 0.35) !important;
    }
    /* ❤️ 토스 스타일 찜 추가 알림 바텀시트 (PC/태블릿/모바일 완벽 중앙 정렬 & 부드러운 슬라이드업) */
    #wishlist-added-sheet {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 90 !important;
    }
    #wishlist-added-backdrop {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background-color: rgba(0, 0, 0, 0.65) !important;
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      transition: opacity 0.3s ease !important;
    }
    .sheet-center-container {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100% !important;
      max-width: 32rem !important; /* 512px: max-w-lg 모바일 프레임과 100% 일치 */
      z-index: 91 !important;
      pointer-events: none !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
    }
    #wishlist-added-panel {
      width: 100% !important;
      pointer-events: auto !important;
      background-color: #181820 !important;
      color: #ffffff !important;
      border-top-left-radius: 28px !important;
      border-top-right-radius: 28px !important;
      padding: 18px 20px 24px 20px !important;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.65) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
      will-change: transform;
      transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
    }

    /* ❤️ [토스 스타일 찜한 상품 전용 화면] 완벽한 단독 전체 페이지 레이아웃 (라이트/다크 모드 100% 대응) */
    #wishlist-dedicated-modal {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      z-index: 60 !important;
      background-color: #F9FAFB !important;
      color: #191F28 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
    .dark #wishlist-dedicated-modal {
      background-color: #121216 !important;
      color: #ffffff !important;
    }
    #wishlist-dedicated-modal.hidden {
      display: none !important;
    }
    .wishlist-page-container {
      width: 100% !important;
      max-width: 512px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      background-color: #ffffff !important;
      box-shadow: 0 0 35px rgba(0, 0, 0, 0.08) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .dark .wishlist-page-container {
      background-color: #121216 !important;
      box-shadow: 0 0 35px rgba(0, 0, 0, 0.5) !important;
    }
    .wishlist-page-header {
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 10px 14px !important;
      background-color: rgba(255, 255, 255, 0.96) !important;
      border-bottom: 1px solid #F2F4F6 !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      z-index: 20 !important;
    }
    .dark .wishlist-page-header {
      background-color: rgba(18, 18, 22, 0.96) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .wishlist-page-body {
      flex: 1 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 16px 16px 40px 16px !important;
    }
    .wishlist-product-card {
      background-color: #ffffff !important;
      border: 1px solid #E5E8EB !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      cursor: pointer !important;
      transition: transform 0.15s ease, box-shadow 0.15s ease !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    .dark .wishlist-product-card {
      background-color: #1A1A22 !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    }
    .wishlist-product-card:active {
      transform: scale(0.98) !important;
    }
    .wishlist-card-img-wrap {
      position: relative !important;
      width: 100% !important;
      aspect-ratio: 1 / 1 !important;
      background-color: #F8F9FA !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .dark .wishlist-card-img-wrap {
      background-color: #22222D !important;
    }
    .wishlist-card-title {
      font-size: 13px !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
      margin-top: 6px !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      color: #191F28 !important;
      word-break: break-all !important;
    }
    .dark .wishlist-card-title {
      color: #ffffff !important;
    }
    .wishlist-card-price {
      font-size: 16px !important;
      font-weight: 900 !important;
      letter-spacing: -0.02em !important;
      color: #191F28 !important;
    }
    .dark .wishlist-card-price {
      color: #ffffff !important;
    }
    .wishlist-lowest-chip {
      display: inline-block !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      background-color: #FEECEE !important;
      color: #F04452 !important;
    }
    .dark .wishlist-lowest-chip {
      background-color: #3D1A1E !important;
      color: #F04452 !important;
    }

    /* 🛍️ [상품 상세 화면] 뷰포트 고정 방어 CSS */
    #product-detail-modal {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      z-index: 75 !important;
      background-color: #ffffff !important;
      color: #191F28 !important;
      overflow: hidden !important;
    }
    .dark #product-detail-modal {
      background-color: #121216 !important;
      color: #ffffff !important;
    }
    #product-detail-modal.hidden {
      display: none !important;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    #header-noti-list {
      scrollbar-width: thin;
      scrollbar-color: rgba(140, 150, 160, 0.3) transparent;
    }
    #header-noti-list::-webkit-scrollbar {
      width: 5px;
    }
    #header-noti-list::-webkit-scrollbar-track {
      background: transparent;
    }
    #header-noti-list::-webkit-scrollbar-thumb {
      background: rgba(140, 150, 160, 0.3);
      border-radius: 9999px;
    }
    #header-noti-list::-webkit-scrollbar-thumb:hover {
      background: rgba(140, 150, 160, 0.5);
    }

    .quick-chip-btn {
      transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .quick-chip-btn:hover {
      transform: translateY(-1px);
    }
    .quick-chip-btn:active {
      transform: scale(0.96);
    }
    #hero-ticker-slider {
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    }
    html, body {
      overflow-x: hidden;
    }
    .sticky-header-container {
      position: sticky;
      top: 0;
      z-index: 40;
    }
    /* 브라우저 자동완성 다크모드 배경 깨짐 방지 */
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px #F9FAFB inset !important;
      -webkit-text-fill-color: #191F28 !important;
      transition: background-color 5000s ease-in-out 0s;
    }
    .dark input:-webkit-autofill,
    .dark input:-webkit-autofill:hover, 
    .dark input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px #202027 inset !important;
      -webkit-text-fill-color: #ffffff !important;
      transition: background-color 5000s ease-in-out 0s;
    }

    /* 🪙 3D 코인플립 애니메이션 스타일 */
    .coin-3d {
      width: 104px;
      height: 104px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 1.8s cubic-bezier(0.15, 0.9, 0.3, 1);
    }
    .coin-face {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 900;
    }
    .coin-front {
      background: radial-gradient(circle at 35% 35%, #FDE68A 0%, #F59E0B 55%, #B45309 100%);
      color: #78350F;
      box-shadow: inset 0 0 0 4px #FCD34D, 0 8px 24px rgba(245, 158, 11, 0.4);
      transform: rotateY(0deg);
    }
    .coin-back {
      background: radial-gradient(circle at 35% 35%, #BAE6FD 0%, #3B82F6 55%, #1D4ED8 100%);
      color: #1E3A8A;
      box-shadow: inset 0 0 0 4px #93C5FD, 0 8px 24px rgba(59, 130, 246, 0.4);
      transform: rotateY(180deg);
    }
    .flip-to-heads {
      transform: rotateY(1800deg);
    }
    .flip-to-tails {
      transform: rotateY(1980deg);
    }

    /* 🌟 실시간 트렌드 1~10위 나무위키 스타일 묵직하고 부드러운 순차 롤링업 모션 */
    @keyframes trendTextRollUp {
      0% {
        transform: translateY(140%);
        opacity: 0;
      }
      30% {
        opacity: 0.6;
      }
      100% {
        transform: translateY(0%);
        opacity: 1;
      }
    }
    @keyframes trendTextRollCycle {
      0% {
        transform: translateY(0%);
        opacity: 1;
      }
      30% {
        transform: translateY(-135%);
        opacity: 0;
      }
      35% {
        transform: translateY(135%);
        opacity: 0;
      }
      100% {
        transform: translateY(0%);
        opacity: 1;
      }
    }
    .trend-roll-text {
      animation: trendTextRollUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
      will-change: transform, opacity;
      display: inline-block;
    }
    .trend-roll-cycle {
      animation: trendTextRollCycle 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
      will-change: transform, opacity;
      display: inline-block;
    }

    /* 🌟 실시간 트렌드 1~10위 도미노 스태거(Stagger) 톡톡 페이드인 모션 */
    @keyframes dominoStaggerEntrance {
      0% {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
      }
      65% {
        opacity: 0.95;
        transform: translateY(-2px) scale(1.01);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .domino-stagger-item {
      animation: dominoStaggerEntrance 0.42s cubic-bezier(0.18, 0.9, 0.32, 1) both;
      will-change: transform, opacity;
    }

    /* ================================================================= */
    /* 💬 실시간 광장 톡 (모바일 100dvh 풀스크린 & PC 740px 프리미엄 메신저 뷰) */
    /* ================================================================= */
    /* 1) 모바일: 전체 화면(100dvh)을 가득 채우는 카카오톡/텔레그램 스타일 전용 메신저 뷰 */
    @media (max-width: 639px) {
      html.chat-scroll-locked, body.chat-scroll-locked {
        overflow: hidden !important;
        height: 100% !important;
        width: 100% !important;
        overscroll-behavior: none !important;
        touch-action: manipulation !important;
      }
      /* 톡 탭 숨김 상태 원천 차단 */
      #main-chat-section.hidden {
        display: none !important;
      }
      #main-chat-section:not(.hidden) {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 60 !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        background: #FAFBFD !important;
        display: block !important;
      }
      .dark #main-chat-section:not(.hidden) {
        background: #12131A !important;
      }
      #main-chat-section:not(.hidden) #chat-window {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #FAFBFD !important;
      }
      .dark #main-chat-section:not(.hidden) #chat-window {
        background: #12131A !important;
      }
      #chat-header {
        padding-top: max(0.85rem, env(safe-area-inset-top, 0.85rem)) !important;
        padding-bottom: 0.65rem !important;
        background: rgba(255, 255, 255, 0.96) !important;
      }
      .dark #chat-header {
        background: rgba(24, 25, 34, 0.96) !important;
      }
      /* 모바일 하단 입력 영역: 아이폰 사파리 홈 인디케이터 safe-area 여백 및 안정적인 패딩 */
      #main-chat-section:not(.hidden) #chat-window > div:last-child,
      #chat-bottom-bar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.65rem !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem)) !important;
      }
      #chat-messages-container {
        overscroll-behavior: contain !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
      }
    }

    /* 2) PC / 태블릿 대화면: 텔레그램 데스크톱 수준의 쾌적한 740px 너비 & 화면 꽉 찬 프리미엄 메신저 비율 */
    @media (min-width: 640px) {
      #main-chat-section.hidden {
        display: none !important;
      }
      #main-chat-section:not(.hidden) {
        position: relative !important;
        width: 100% !important;
        max-width: 740px !important;
        margin: 1.25rem auto !important;
        padding: 0 1rem !important;
        height: calc(100vh - 2.5rem) !important;
        min-height: 600px !important;
        max-height: 980px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: stretch !important;
      }
      #main-chat-section:not(.hidden) #chat-window {
        width: 100% !important;
        height: 100% !important;
        border-radius: 28px !important;
        border: 1px solid rgba(229, 232, 235, 0.9) !important;
        box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
      }
      .dark #main-chat-section:not(.hidden) #chat-window {
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
        background: #161722 !important;
      }
      /* 데스크톱 하단 입력 영역: 28px 라운딩 모서리 안쪽 24px 좌우 안전 마진 및 20px 하단 패딩 */
      #main-chat-section:not(.hidden) #chat-window > div:last-child,
      #chat-bottom-bar {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 1.25rem !important;
      }
      #chat-member-input-box form {
        width: 100% !important;
        min-width: 0 !important;
      }
      #chat-message-input {
        min-width: 0 !important;
      }
    }
  
    /* 토스 디자인 시스템 활성 메뉴 캡슐 스타일 */
    .lnb-item-active {
      background-color: #E8F3FF !important;
      color: #3182F6 !important;
      font-weight: 800 !important;
    }
    .dark .lnb-item-active {
      background-color: rgba(49, 130, 246, 0.16) !important;
      color: #61B0FF !important;
      font-weight: 800 !important;
    }

    /* 다크모드 고대비 뱃지 및 배너 스타일 */
    .badge-status-active {
      background-color: #E6F9F0;
      color: #00B368;
      border: 1px solid rgba(0, 179, 104, 0.2);
    }
    .dark .badge-status-active {
      background-color: rgba(0, 179, 104, 0.16) !important;
      color: #4EE4A6 !important;
      border-color: rgba(0, 179, 104, 0.35) !important;
    }

    .nickname-policy-banner {
      background-color: #F9FAFB;
      border-color: #E5E8EB;
      color: #4E5968;
    }
    .dark .nickname-policy-banner {
      background-color: #202027 !important;
      border-color: #2E2E3A !important;
      color: #B0B8C1 !important;
    }
    .dark .nickname-policy-banner b {
      color: #FFFFFF !important;
    }

    .nickname-policy-badge {
      background-color: #E6F9F0;
      color: #00B368;
      border: 1px solid rgba(0, 179, 104, 0.2);
    }
    .dark .nickname-policy-badge {
      background-color: rgba(0, 179, 104, 0.16) !important;
      color: #4EE4A6 !important;
      border-color: rgba(0, 179, 104, 0.35) !important;
    }

    .dark .nickname-cooldown-banner-active {
      background-color: rgba(224, 93, 0, 0.15) !important;
      border-color: rgba(224, 93, 0, 0.35) !important;
      color: #B0B8C1 !important;
    }
    /* 🌟 마이페이지 서브 상세뷰(In-place Subview) 레이아웃 안정화 */
    #main-my-section:not(.hidden) {
      min-height: calc(100dvh - 200px);
      display: flex;
      flex-direction: column;
    }
    #my-detail-view:not(.hidden) {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: calc(100dvh - 260px);
    }
    #my-detail-panels {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    #my-detail-panels > div:not(.hidden) {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    #my-detail-panels > div:not(.hidden) > div:first-child {
      min-height: 480px;
      display: flex;
      flex-direction: column;
      border-radius: 28px;
    }
    @media (min-width: 640px) {
      #my-detail-panels > div:not(.hidden) > div:first-child {
        min-height: 540px;
        border-radius: 32px;
      }
    }

    /* ================================================================= */
    /* 🌟 TDS 하단 내비게이션 바 (불투명 어두운 배경 & 스마트 스크롤 애니메이션) */
    /* ================================================================= */
    #toss-bottom-nav {
      background-color: #FFFFFF !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, border-color 0.2s !important;
      will-change: transform;
    }
    .dark #toss-bottom-nav {
      background-color: #121212 !important; /* 배경과 동일한 불투명 어두운 색상 */
      border-top-color: #22232A !important;
    }
    /* 아래로 스크롤 시 화면 아래로 부드럽게 내려가며 사라짐 */
    #toss-bottom-nav.nav-hidden-down {
      transform: translateY(calc(100% + 20px)) !important;
    }
    /* 플로팅 글쓰기 버튼(FAB) 상시 안정 노출 보장 (PC 및 모바일 스크롤 중 사라짐 방지) */
    #community-fab-wrapper {
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s !important;
      will-change: transform;
      z-index: 50 !important;
    }
    #community-fab-wrapper.fab-shifted-down {
      transform: translateY(0) !important;
    }
    @media (min-width: 640px) {
      #community-fab-wrapper {
        bottom: 5.5rem !important;
        right: 2rem !important;
        transform: none !important;
      }
      #community-fab-wrapper.fab-shifted-down {
        transform: none !important;
      }
    }

    /* ================================================================= */
    /* 🌟 토스 디자인 시스템(TDS) 토글 스위치 (알림 설정 등) */
    /* ================================================================= */
    .tds-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }
    .tds-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .tds-switch-slider, .tds-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #E5E8EB;
      transition: .24s cubic-bezier(0.2, 0, 0, 1);
      border-radius: 24px;
    }
    .dark .tds-switch-slider, .dark .tds-slider {
      background-color: #333D4B;
    }
    .tds-switch-slider:before, .tds-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .24s cubic-bezier(0.2, 0, 0, 1);
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    }
    .tds-switch input:checked + .tds-switch-slider,
    .tds-switch input:checked + .tds-slider {
      background-color: #3182F6;
    }
    .tds-switch input:checked + .tds-switch-slider:before,
    .tds-switch input:checked + .tds-slider:before {
      transform: translateX(20px);
    }

    /* 🎁 담픽 듀얼 퀵 리워드 배너 (출석체크 & 아케이드) - TDS 다크/라이트 모드 완전 보정 */
    .quick-reward-banner-card {
      background: #ffffff;
      border: 1px solid #E5E8EB;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }
    .dark .quick-reward-banner-card {
      background: #181920 !important;
      border: 1px solid #262734 !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }

    .quick-reward-subcard-att {
      background: linear-gradient(135deg, rgba(49, 130, 246, 0.08) 0%, rgba(49, 130, 246, 0.02) 100%);
      border: 1px solid rgba(49, 130, 246, 0.2);
    }
    .dark .quick-reward-subcard-att {
      background: linear-gradient(135deg, rgba(49, 130, 246, 0.16) 0%, rgba(24, 25, 32, 0.6) 100%) !important;
      border: 1px solid rgba(49, 130, 246, 0.3) !important;
    }

    .quick-reward-subcard-arc {
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(236, 72, 153, 0.02) 100%);
      border: 1px solid rgba(139, 92, 246, 0.2);
    }
    .dark .quick-reward-subcard-arc {
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.16) 0%, rgba(24, 25, 32, 0.6) 100%) !important;
      border: 1px solid rgba(139, 92, 246, 0.3) !important;
    }

    .quick-reward-icon-box {
      background: #ffffff;
    }
    .dark .quick-reward-icon-box {
      background: #20212C !important;
    }

    .quick-reward-arrow-btn {
      background: #ffffff;
      color: #3182F6;
    }
    .dark .quick-reward-arrow-btn {
      background: rgba(255, 255, 255, 0.1) !important;
      color: #61B0FF !important;
    }

    /* 🧭 [사용자 요청] 게시판 최상단 헤더 & 정렬 바 스타일 */
    .board-sort-bar-bg {
      background-color: #F7F8FA;
      border: 1px solid #EEF0F3;
      box-shadow: 0 1px 2px rgba(25, 31, 40, 0.02);
    }
    .dark .board-sort-bar-bg, html.dark .board-sort-bar-bg {
      background-color: #20212B !important;
      border-color: #2C2D3A !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    }
    /* 정렬 바는 게시판 헤더가 아니라 실시간 이슈 카드 제목 바로 아래에 배치 */
    #board-top-custom-header > .board-sort-bar-bg {
      display: none;
    }
    #main-feed-section > .board-sort-bar-bg {
      display: none !important;
    }
    #main-feed-section .feed-header-controls,
    #dedicated-board-controls-slot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.5rem;
      min-width: 0;
      flex-shrink: 0;
    }
    #main-feed-section .feed-header-controls > .flex.items-center,
    #dedicated-board-controls-slot > .flex.items-center {
      white-space: nowrap;
    }
    #main-feed-section .feed-header-controls > .relative #btn-board-view-mode,
    #dedicated-board-controls-slot > .relative #btn-board-view-mode {
      width: 2rem;
      height: 2rem;
      border: 0;
      border-radius: 9999px;
      color: #6B7684;
      background: #F2F4F6;
      outline: none;
      box-shadow: none;
    }
    #main-feed-section .feed-header-controls > .relative #btn-board-view-mode:hover,
    #dedicated-board-controls-slot > .relative #btn-board-view-mode:hover {
      color: #3182F6;
      background: #E8F3FF;
    }
    #main-feed-section .feed-header-controls > .relative #btn-board-view-mode:focus,
    #main-feed-section .feed-header-controls > .relative #btn-board-view-mode:active,
    #dedicated-board-controls-slot > .relative #btn-board-view-mode:focus,
    #dedicated-board-controls-slot > .relative #btn-board-view-mode:active {
      outline: none;
      box-shadow: none;
    }
    #main-feed-section .feed-header-controls > .relative #btn-board-view-mode:focus-visible,
    #dedicated-board-controls-slot > .relative #btn-board-view-mode:focus-visible {
      outline: 2px solid rgba(49, 130, 246, 0.35);
      outline-offset: 2px;
    }
    .dark #main-feed-section .feed-header-controls > .relative #btn-board-view-mode,
    html.dark #main-feed-section .feed-header-controls > .relative #btn-board-view-mode,
    .dark #dedicated-board-controls-slot > .relative #btn-board-view-mode,
    html.dark #dedicated-board-controls-slot > .relative #btn-board-view-mode {
      border-color: transparent;
      color: #A6B0BC;
      background: rgba(255, 255, 255, 0.04);
    }
    .dark #main-feed-section .feed-header-controls > .relative #btn-board-view-mode:hover,
    html.dark #main-feed-section .feed-header-controls > .relative #btn-board-view-mode:hover,
    .dark #dedicated-board-controls-slot > .relative #btn-board-view-mode:hover,
    html.dark #dedicated-board-controls-slot > .relative #btn-board-view-mode:hover {
      color: #61B0FF;
      background: rgba(97, 176, 255, 0.08);
    }
    .dark #main-feed-section > .board-sort-bar-bg,
    html.dark #main-feed-section > .board-sort-bar-bg {
      border-bottom-color: #262630;
    }

    /* 🖥️ [카드 병합] 전용 게시판 배너 + 피드 카드를 하나의 카드처럼 이어붙임 (특정 게시판 선택 시).
       위/아래 padding까지 좁혀서 틈이 남지 않게 하고, 대신 얇은 구분선으로 헤더/본문 경계만 표시한다. */
    #dedicated-board-header-banner.dbb-merge-top {
      border-radius: 24px 24px 0 0 !important;
      border-bottom: 0 !important;
      margin-bottom: 0 !important;
      padding-bottom: 0.625rem !important;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
    }
    .dark #dedicated-board-header-banner.dbb-merge-top,
    html.dark #dedicated-board-header-banner.dbb-merge-top {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }
    #main-feed-section.dbb-merge-bottom {
      border-radius: 0 0 24px 24px !important;
      border-top: 1px solid #F2F4F6 !important;
      padding-top: 0.625rem !important;
    }
    .dark #main-feed-section.dbb-merge-bottom,
    html.dark #main-feed-section.dbb-merge-bottom {
      border-top-color: #262630 !important;
    }
    @media (min-width: 640px) {
      #dedicated-board-header-banner.dbb-merge-top {
        border-radius: 28px 28px 0 0 !important;
      }
      #main-feed-section.dbb-merge-bottom {
        border-radius: 0 0 28px 28px !important;
      }
    }
    .board-compact-view .feed-item-card {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }

    /* ================================================================= */
    /* 🖼️ 게시판 카드형 보기 모드 전용 레이아웃 (모바일/태블릿 600px 중앙 정렬).
       PC(1024px+)는 카드형 모드여도 항상 좌/우 사이드바 3단 그리드를 유지해야 하므로
       이 max-width 강제 규칙은 1024px 미만에서만 적용한다. */
    /* ================================================================= */
    @media (max-width: 1023.98px) {
      #main-board-container.board-view-card-mode,
      body.feed-mode-card #main-board-container {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        transition: max-width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
    }

    /* 카드형 모드에서 통합 피드 섹션 투명화 (이중 박스/보더 제거 및 개별 카드 플로팅) */
    #main-board-container.board-view-card-mode .main-feed-section,
    body.feed-mode-card .main-feed-section {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin-bottom: 0.75rem !important;
    }

    #main-board-container.board-view-card-mode .main-feed-section-header,
    body.feed-mode-card .main-feed-section-header {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
      margin-bottom: 0.75rem !important;
      border-bottom: none !important;
    }
    body.feed-mode-card #main-board-container .feed-header-controls {
      gap: 0.25rem;
    }
    body.feed-mode-card #main-board-container .main-feed-section-header > div:first-child {
      min-width: 0;
    }

    /* 개별 피드 게시물: 회색 배경 위 흰 카드 (작성자-제목-미디어-액션바를 한 덩어리로) */
    .feed-item-card {
      width: 100% !important;
      max-width: 640px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      margin-bottom: 20px !important;
      box-sizing: border-box !important;
      background: #FFFFFF;
      border: 1px solid #E9ECEF;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      /* 뒤로가기로 여러 페이지를 한꺼번에 다시 그릴 때 화면 밖 카드는 렌더링을 미뤄 렉을 줄인다 */
      content-visibility: auto;
      contain-intrinsic-size: auto 640px;
    }
    html.dark .feed-item-card,
    .dark .feed-item-card {
      background: #181920;
      border-color: #262734;
      box-shadow: none;
    }
    /* 카드 북마크(스크랩) 활성 상태 */
    .feed-scrap-btn.is-scrapped {
      color: #F59F00 !important;
    }
    .feed-scrap-btn.is-scrapped svg {
      fill: currentColor;
    }

    /* 카드 영상: 자동 재생 중에는 ▶ 표시를 숨긴다 (멈춤/로드 전에만 표시) */
    .feed-video-play-overlay {
      transition: opacity 0.2s;
    }
    .feed-card-media-wrap.is-playing .feed-video-play-overlay {
      opacity: 0;
    }

    /* 카드 영상 소리 버튼(🔇/🔊)과 하단 빨간 진행바 */
    .feed-video-sound-btn {
      position: absolute;
      right: 10px;
      bottom: 12px;
      width: 34px;
      height: 34px;
      border-radius: 9999px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }
    .feed-video-sound-btn svg {
      width: 18px;
      height: 18px;
    }
    .feed-video-sound-btn .icon-on,
    .feed-video-sound-btn.is-on .icon-off {
      display: none;
    }
    .feed-video-sound-btn.is-on .icon-on {
      display: block;
    }
    .feed-video-progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: rgba(255, 255, 255, 0.25);
      pointer-events: none;
    }
    .feed-video-progress-fill {
      height: 100%;
      background: #FF0000;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.25s linear;
    }

    /* 카드 카테고리 태그 칩 (posts.category, 예: #유머) */
    .feed-tag-chip {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      background: #EDF2F7;
      color: #4A5568;
      font-size: 12px;
      font-weight: 600;
    }
    html.dark .feed-tag-chip,
    .dark .feed-tag-chip {
      background: #262734;
      color: #B0B8C1;
    }

    /* 카드 베스트 댓글 미리보기 (액션바 아래 말풍선) */
    .feed-best-comments {
      display: block;
      margin: -4px 16px 16px;
      padding: 10px 12px;
      background: #F6F7F8;
      border-radius: 12px;
      transition: background-color 0.15s;
    }
    .feed-best-comments:hover {
      background: #EEF0F2;
    }
    .feed-best-comments-label {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #8B95A1;
    }
    .feed-best-comment {
      display: flex;
      gap: 8px;
      padding: 2px 0;
      font-size: 13.5px;
      line-height: 1.45;
    }
    .feed-best-comment-author {
      flex-shrink: 0;
      max-width: 35%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
      color: #191F28;
    }
    .feed-best-comment-text {
      min-width: 0;
      color: #4E5968;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
    }
    html.dark .feed-best-comments,
    .dark .feed-best-comments {
      background: #20212B;
    }
    html.dark .feed-best-comments:hover,
    .dark .feed-best-comments:hover {
      background: #262734;
    }
    html.dark .feed-best-comment-author,
    .dark .feed-best-comment-author {
      color: #E5E8EB;
    }
    html.dark .feed-best-comment-text,
    .dark .feed-best-comment-text {
      color: #B0B8C1;
    }

    /* 카드 ⋯ 팝오버 메뉴 */
    .feed-post-menu {
      position: absolute;
      z-index: 60;
      min-width: 170px;
      padding: 6px;
      background: #FFFFFF;
      border: 1px solid #E9ECEF;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
    .feed-post-menu button {
      display: block;
      width: 100%;
      padding: 9px 12px;
      border-radius: 8px;
      text-align: left;
      font-size: 14px;
      font-weight: 600;
      color: #191F28;
      cursor: pointer;
    }
    .feed-post-menu button:hover {
      background: #F2F4F6;
    }
    .feed-post-menu button.is-danger,
    .feed-report-panel button.is-danger {
      color: #F04452;
    }
    html.dark .feed-post-menu,
    .dark .feed-post-menu {
      background: #1E1F28;
      border-color: #2E2E3A;
    }
    html.dark .feed-post-menu button,
    .dark .feed-post-menu button {
      color: #E5E8EB;
    }
    html.dark .feed-post-menu button:hover,
    .dark .feed-post-menu button:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    /* 피드 신고 창 (글 상세 신고와 같은 사유/저장 흐름) */
    .feed-report-modal {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(0, 0, 0, 0.45);
    }
    .feed-report-panel {
      width: 100%;
      max-width: 380px;
      padding: 20px;
      background: #FFFFFF;
      border-radius: 16px;
      color: #191F28;
    }
    .feed-report-panel h3 {
      font-size: 17px;
      font-weight: 800;
    }
    .feed-report-panel .feed-report-title {
      margin: 4px 0 12px;
      font-size: 13px;
      color: #6B7684;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .feed-report-panel label {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      font-size: 14px;
      cursor: pointer;
    }
    .feed-report-panel textarea {
      width: 100%;
      margin-top: 8px;
      padding: 10px 12px;
      font-size: 14px;
      border: 1px solid #E5E8EB;
      border-radius: 10px;
      background: #F9FAFB;
      resize: none;
    }
    .feed-report-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 14px;
    }
    .feed-report-actions button {
      padding: 9px 16px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      background: #F2F4F6;
      cursor: pointer;
    }
    .feed-report-actions button.is-danger {
      background: #F04452;
      color: #FFFFFF;
    }
    .feed-report-actions button:disabled {
      opacity: 0.6;
    }
    html.dark .feed-report-panel,
    .dark .feed-report-panel {
      background: #1E1F28;
      color: #E5E8EB;
    }
    html.dark .feed-report-panel textarea,
    .dark .feed-report-panel textarea {
      background: #252632;
      border-color: #2E2E3A;
      color: #E5E8EB;
    }
    html.dark .feed-report-actions button:not(.is-danger),
    .dark .feed-report-actions button:not(.is-danger) {
      background: #2E2E3A;
      color: #E5E8EB;
    }

    /* 미디어: 세로 직캠/긴 이미지가 화면을 독점하지 않도록 높이 제한 + 검정 레터박스 */
    .feed-card-media-wrap,
    .feed-card-media-wrap video {
      max-height: 580px;
    }

    /* ================================================================= */
    /* 🎴 [9GAG 스타일] index.html 전체 테마 (body.gag-theme: 모든 보기 방식/탭 공통).
       카드형 보기 전용 규칙은 body.feed-mode-card로 따로 한정한다. */
    /* ================================================================= */
    /* index.html 인라인의 html:not(.dark) body 규칙보다 우선하도록 같은 형태로 지정 */
    html:not(.dark) body.gag-theme {
      background-color: #F6F7F8 !important;
    }
    html.dark body.gag-theme,
    .dark body.gag-theme {
      background-color: #0F0F12 !important;
    }

    /* 게시판 전용 배너: 카드 박스 → 평평한 헤더 (병합 상태 포함) */
    body.gag-theme #dedicated-board-header-banner,
    body.gag-theme #dedicated-board-header-banner.dbb-merge-top {
      background: transparent !important;
      border: 0 !important;
      border-bottom: 1px solid #EDEDED !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-bottom: 0 !important;
    }
    body.feed-mode-card #main-feed-section.dbb-merge-bottom {
      border: 0 !important;
      border-radius: 0 !important;
      padding-top: 0 !important;
    }

    /* 목록형 보기(기본/컴팩트): 구조는 그대로, 목록 박스만 피드 카드와 같은 톤(12px 모서리, 옅은 테두리/그림자) */
    body.gag-theme:not(.feed-mode-card) #main-feed-section,
    body.gag-theme:not(.feed-mode-card) #main-feed-section.dbb-merge-bottom {
      border-radius: 12px !important;
      border: 1px solid #E9ECEF !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }
    html.dark body.gag-theme:not(.feed-mode-card) #main-feed-section,
    .dark body.gag-theme:not(.feed-mode-card) #main-feed-section {
      border-color: #262734 !important;
      box-shadow: none !important;
    }
    html.dark body.gag-theme #dedicated-board-header-banner,
    .dark body.gag-theme #dedicated-board-header-banner {
      border-bottom-color: #26272E !important;
    }

    /* 피드 헤더: 정렬을 9GAG식 밑줄 탭으로 */
    body.gag-theme .main-feed-section-header {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      border-bottom: 1px solid #EDEDED !important;
    }
    html.dark body.gag-theme .main-feed-section-header,
    .dark body.gag-theme .main-feed-section-header {
      border-bottom-color: #26272E !important;
    }
    body.gag-theme #bar-sort-popular,
    body.gag-theme #bar-sort-latest {
      padding: 0.75rem 0.25rem;
      margin: 0 0.5rem -1px;
      border-bottom: 2px solid transparent;
      font-size: 14px;
    }
    body.gag-theme #bar-sort-popular.font-black,
    body.gag-theme #bar-sort-latest.font-black {
      border-bottom-color: #000000;
    }
    html.dark body.gag-theme #bar-sort-popular.font-black,
    html.dark body.gag-theme #bar-sort-latest.font-black,
    .dark body.gag-theme #bar-sort-popular.font-black,
    .dark body.gag-theme #bar-sort-latest.font-black {
      border-bottom-color: #FFFFFF;
    }
    body.gag-theme #bar-sort-popular .sort-check,
    body.gag-theme #bar-sort-latest .sort-check,
    body.gag-theme #bar-sort-popular + span {
      display: none !important;
    }

    /* 🏠 [9GAG 스타일] 홈 탭: 구성은 그대로, 카드·검색창의 모서리/테두리/그림자만 피드 카드 톤(12px, #E9ECEF)으로 */
    body.gag-theme #hero-trending-card-container,
    body.gag-theme #quick-reward-banner-slot .quick-reward-banner-card {
      border-radius: 12px !important;
      border: 1px solid #E9ECEF !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }
    body.gag-theme #home-portal-search-section > form {
      border-width: 1px !important;
      border-color: #E9ECEF !important;
      border-radius: 12px !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }
    body.gag-theme #home-portal-search-section > form:hover,
    body.gag-theme #home-portal-search-section > form:focus-within {
      border-color: #0A7AFF !important;
    }
    html.dark body.gag-theme #hero-trending-card-container,
    html.dark body.gag-theme #quick-reward-banner-slot .quick-reward-banner-card,
    html.dark body.gag-theme #home-portal-search-section > form,
    .dark body.gag-theme #hero-trending-card-container,
    .dark body.gag-theme #quick-reward-banner-slot .quick-reward-banner-card,
    .dark body.gag-theme #home-portal-search-section > form {
      border-color: #262734 !important;
      box-shadow: none !important;
    }

    /* 📱 [9GAG 스타일] 모바일/태블릿(<1024px) 상단 고정 헤더: 로고 + 검색 + 글쓰기 (PC는 하단바가 상단 헤더로 바뀜) */
    .gag-mobile-header {
      display: none;
    }
    @media (max-width: 1023.98px) {
      body.gag-theme .gag-mobile-header {
        display: flex;
        align-items: center;
        gap: 2px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
        height: 52px;
        padding: 0 6px;
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: content-box;
        background: #FFFFFF;
        border-bottom: 1px solid #EDEDED;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }
      /* 아래로 스크롤하면 헤더를 숨기고, 위로 올리면 다시 보인다 (js/bottom-nav-scroll.js) */
      body.gag-theme .gag-mobile-header.gag-mh-hidden {
        transform: translateY(-100%);
      }
      body.gag-theme {
        padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 0 !important;
      }
      body.gag-theme .gag-mobile-header .gag-mh-logo {
        margin-left: 2px;
        margin-right: auto;
        font-size: 21px;
        font-weight: 900;
        letter-spacing: -0.05em;
        color: #000000;
      }
      /* 하단 탭바는 모바일에서 쓰지 않는다: ☰ 서랍 메뉴 + 상단 헤더 아이콘으로 대체 */
      body.gag-theme #toss-bottom-nav {
        display: none !important;
      }
      body.gag-theme #community-fab-wrapper {
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
      }
      body.gag-theme #btn-scroll-to-top,
      body.gag-theme.bottom-nav-visible #btn-scroll-to-top {
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
      }
      .gag-mh-badge {
        position: absolute;
        top: 3px;
        right: 1px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 9999px;
        background: #F04452;
        color: #FFFFFF;
        font-size: 9px;
        font-weight: 900;
        line-height: 16px;
        text-align: center;
      }
      .gag-mh-badge.hidden {
        display: none;
      }
      .gag-mh-badge-deal {
        top: 1px;
        right: -4px;
        border-radius: 4px;
        background: linear-gradient(90deg, #F04452, #FF6B6B);
      }
      /* ☰ 서랍 메뉴는 모바일에서 왼쪽에서 열린다 (열기/닫기 코드는 translate-x-full 클래스를 그대로 사용) */
      body.gag-theme #side-drawer {
        left: 0;
        right: auto;
      }
      body.gag-theme #side-drawer.translate-x-full {
        --tw-translate-x: -100%;
      }
      /* 떠 있는 글쓰기 버튼(z-50)보다 위에 서랍/배경이 오도록 */
      body.gag-theme #side-drawer,
      body.gag-theme #drawer-backdrop {
        z-index: 60;
      }
      body.gag-theme .gag-mobile-header button {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        color: #333333;
        cursor: pointer;
      }
      body.gag-theme .gag-mobile-header button:active {
        background: rgba(0, 0, 0, 0.06);
      }
      body.gag-theme .gag-mobile-header button.gag-mh-post {
        color: #0A7AFF;
      }
      html.dark body.gag-theme .gag-mobile-header,
      .dark body.gag-theme .gag-mobile-header {
        background: #121212;
        border-bottom-color: #26272E;
      }
      html.dark body.gag-theme .gag-mobile-header .gag-mh-logo,
      .dark body.gag-theme .gag-mobile-header .gag-mh-logo {
        color: #FFFFFF;
      }
      html.dark body.gag-theme .gag-mobile-header button,
      .dark body.gag-theme .gag-mobile-header button {
        color: #D1D6DB;
      }
      html.dark body.gag-theme .gag-mobile-header button.gag-mh-post,
      .dark body.gag-theme .gag-mobile-header button.gag-mh-post {
        color: #61B0FF;
      }
    }

    /* 📱 휴대폰(<640px): 오른쪽 아래 떠 있는 글쓰기 버튼(#community-fab-wrapper)이 있으므로
       헤더의 ✏️는 숨기고, '맨 위로' 버튼은 글쓰기 버튼 위로 올린다. */
    @media (max-width: 639.98px) {
      body.gag-theme .gag-mobile-header .gag-mh-post {
        display: none !important;
      }
      body.gag-theme #btn-scroll-to-top,
      body.gag-theme.bottom-nav-visible #btn-scroll-to-top {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
      }
    }

    /* ☰ 서랍 메뉴 (9GAG 스타일: 흰 바탕, 한 줄 목록) */
    .gd-drawer {
      width: min(82vw, 320px);
      background: #FFFFFF;
      color: #191F28;
      box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
    }
    html.dark .gd-drawer {
      background: #121212;
      color: #E4E4E5;
    }
    .gd-head {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 52px;
      padding: 0 8px 0 18px;
      padding-top: env(safe-area-inset-top, 0px);
      box-sizing: content-box;
      background: inherit;
      border-bottom: 1px solid #EDEDED;
    }
    html.dark .gd-head { border-bottom-color: #26272E; }
    .gd-logo {
      font-size: 21px;
      font-weight: 900;
      letter-spacing: -0.05em;
    }
    .gd-icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333333;
      cursor: pointer;
    }
    html.dark .gd-icon-btn { color: #D1D6DB; }
    .gd-account {
      padding: 14px 18px;
      border-bottom: 1px solid #F2F4F6;
    }
    html.dark .gd-account { border-bottom-color: #22232A; }
    .gd-btn {
      height: 40px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      background: #F2F4F6;
      color: #191F28;
      cursor: pointer;
    }
    html.dark .gd-btn { background: #252530; color: #E4E4E8; }
    .gd-btn-primary,
    html.dark .gd-btn-primary { background: #0A7AFF; color: #FFFFFF; }
    .gd-section {
      padding: 6px 8px;
      border-bottom: 1px solid #F2F4F6;
    }
    html.dark .gd-section { border-bottom-color: #22232A; }
    .gd-title {
      padding: 10px 10px 4px;
      font-size: 12px;
      font-weight: 700;
      color: #999999;
    }
    .gd-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 44px;
      padding: 0 10px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
    }
    .gd-row:hover,
    .gd-row:active { background: #F5F5F5; }
    html.dark .gd-row:hover,
    html.dark .gd-row:active { background: rgba(255, 255, 255, 0.06); }
    .gd-ico {
      width: 24px;
      text-align: center;
      font-size: 18px;
      line-height: 1;
    }
    .gd-tile {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    html.dark .gd-tile { background: rgba(255, 255, 255, 0.08) !important; }
    .gd-badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 9999px;
      background: #F04452;
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 800;
      line-height: 20px;
      text-align: center;
    }
    .gd-switch {
      appearance: none;
      -webkit-appearance: none;
      width: 40px;
      height: 24px;
      border-radius: 9999px;
      background: #D1D6DB;
      position: relative;
      cursor: pointer;
      transition: background 0.15s;
    }
    .gd-switch::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 9999px;
      background: #FFFFFF;
      transition: transform 0.15s;
    }
    .gd-switch:checked { background: #0A7AFF; }
    .gd-switch:checked::after { transform: translateX(16px); }
    .gd-board {
      display: flex;
      align-items: center;
    }
    .gd-board > .gd-row {
      flex: 1;
      min-width: 0;
    }
    .gd-pin {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #C4C9CF;
      cursor: pointer;
      border-radius: 8px;
    }
    .gd-pin svg {
      width: 18px;
      height: 18px;
    }
    .gd-board.is-pinned .gd-pin {
      color: #0A7AFF;
    }
    html.dark .gd-pin { color: #4A4D57; }
    html.dark .gd-board.is-pinned .gd-pin { color: #3E9BFF; }
    .gd-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
      font-size: 12px;
      color: #8B95A1;
    }

    /* ☰ 서랍 메뉴의 사이트 이동/게시판 목록 */
    .drawer-nav-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 0.5rem 0;
      border-radius: 12px;
      font-size: 12px;
      cursor: pointer;
    }
    .drawer-nav-tile > span {
      font-size: 20px;
    }
    .drawer-nav-tile:active,
    .drawer-nav-link:active {
      background: rgba(0, 0, 0, 0.05);
    }
    .drawer-nav-title {
      padding: 0.5rem 0.5rem 0.2rem;
      font-size: 11.5px;
      font-weight: 700;
      color: #999999;
    }
    .drawer-nav-link {
      text-align: left;
      padding: 0.5rem 0.5rem;
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
    }
    .drawer-nav-link:hover,
    .drawer-nav-tile:hover {
      background: #F5F5F5;
    }
    html.dark .drawer-nav-link:hover,
    html.dark .drawer-nav-tile:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    /* 🎴 피드 상단 통합 탭 (최신/인기/3·6·24시간 핫): 기존 제목·정렬 버튼·모바일 칩 대신 표시 */
    .gag-feed-tabs {
      display: none;
    }
    body.gag-theme .gag-feed-tabs {
      display: flex;
      flex: 1;
      min-width: 0;
      gap: 2px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    body.gag-theme .gag-feed-tabs::-webkit-scrollbar {
      display: none;
    }
    body.gag-theme .gag-feed-tabs button {
      flex-shrink: 0;
      padding: 12px 10px;
      margin-bottom: -1px;
      border-bottom: 2px solid transparent;
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
      color: #8B95A1;
      cursor: pointer;
      transition: color 0.15s;
    }
    body.gag-theme .gag-feed-tabs button:hover {
      color: #191F28;
    }
    body.gag-theme .gag-feed-tabs button.is-active {
      color: #191F28;
      border-bottom-color: #191F28;
    }
    html.dark body.gag-theme .gag-feed-tabs button:hover,
    html.dark body.gag-theme .gag-feed-tabs button.is-active,
    .dark body.gag-theme .gag-feed-tabs button:hover,
    .dark body.gag-theme .gag-feed-tabs button.is-active {
      color: #FFFFFF;
    }
    html.dark body.gag-theme .gag-feed-tabs button.is-active,
    .dark body.gag-theme .gag-feed-tabs button.is-active {
      border-bottom-color: #FFFFFF;
    }
    /* 🌙/☀️ 헤더 테마 버튼: 라이트에선 달, 다크에선 해 */
    .gag-nav-theme .theme-icon-sun { display: none; }
    html.dark .gag-nav-theme .theme-icon-sun { display: block; }
    html.dark .gag-nav-theme .theme-icon-moon { display: none; }
    /* 💬 광장 LIVE 뱃지 (초록 펄스) */
    .gag-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 6px;
      border-radius: 999px;
      background: #E6F9F0;
      color: #00B368;
      font-size: 10px !important;
      font-weight: 800;
      line-height: 1.4;
    }
    .gag-live-badge i {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #00B368;
      animation: gagLivePulse 1.4s ease-in-out infinite;
    }
    html.dark .gag-live-badge { background: rgba(0, 179, 104, 0.18); color: #4EE4A6; }
    @keyframes gagLivePulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.7); }
    }

    /* 🏷️ 9GAG식 둥근 칩 줄 (인기 탭 기간 선택 등) */
    .gag-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 4px 4px 12px;
    }
    .gag-chip-row.hidden {
      display: none;
    }
    .gag-chip {
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid #D1D6DB;
      font-size: 14px;
      color: #4E5968;
      background: transparent;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .gag-chip:hover {
      background: #F2F4F6;
    }
    .gag-chip.is-active {
      background: #191F28;
      border-color: #191F28;
      color: #FFFFFF;
      font-weight: 700;
    }
    html.dark .gag-chip {
      border-color: #3A3B45;
      color: #B0B8C1;
    }
    html.dark .gag-chip:hover {
      background: rgba(255, 255, 255, 0.06);
    }
    html.dark .gag-chip.is-active {
      background: #FFFFFF;
      border-color: #FFFFFF;
      color: #111111;
    }
    body.gag-theme #feed-header-title-group,
    body.gag-theme #main-feed-section .feed-header-controls > .flex.items-center,
    body.gag-theme #search-under-category-nav {
      display: none !important;
    }

    /* 피드 헤더의 "불러온 N건" 카운트는 9GAG 스타일에서는 숨김 */
    body.gag-theme #feed-count {
      display: none !important;
    }

    /* 공지 배너: 9GAG 노란 안내 배너 */
    body.gag-theme #notice-banner {
      background: #FFF7D6 !important;
      border: 0 !important;
      border-left: 4px solid #F5C400 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    body.gag-theme #notice-banner #notice-text,
    body.gag-theme #notice-banner button {
      color: #3D3300 !important;
    }
    body.gag-theme #notice-banner span:first-child {
      background: #3D3300 !important;
    }
    html.dark body.gag-theme #notice-banner,
    .dark body.gag-theme #notice-banner {
      background: #2B2610 !important;
    }
    html.dark body.gag-theme #notice-banner #notice-text,
    html.dark body.gag-theme #notice-banner button,
    .dark body.gag-theme #notice-banner #notice-text,
    .dark body.gag-theme #notice-banner button {
      color: #FFE58A !important;
    }
    html.dark body.gag-theme #notice-banner span:first-child,
    .dark body.gag-theme #notice-banner span:first-child {
      background: #FFE58A !important;
      color: #2B2610 !important;
    }

    /* 인피드 광고도 게시물처럼 평평하게 */
    body.gag-theme #main-feed-list > div > a[onclick*="trackAdClick"] {
      max-width: 640px;
      margin: 1rem auto;
      border-radius: 8px;
      box-shadow: none;
    }

    @media (min-width: 1024px) {
      /* 3단 그리드: 좌 240 / 중앙 640 / 우 300 */
      /* body의 overflow-x:hidden은 body를 스크롤 컨테이너로 만들어 사이드바 sticky가 body 기준이 되므로,
         스크롤 컨테이너를 만들지 않는 clip으로 바꿔 화면(viewport) 기준으로 고정되게 한다. */
      body.gag-theme {
        overflow-x: clip;
      }
      /* 3단을 1200px 안으로 모아 중앙 정렬: 좌 220 / 중앙 640 / 우 280, 간격 24px */
      body.gag-theme #main-board-container {
        grid-template-columns: 220px minmax(0, 640px) 280px !important;
        justify-content: center;
        column-gap: 24px !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      /* 좌측 사이드바 간격 압축 */
      body.gag-theme #desktop-board-sidebar-left .board-select-group-title {
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
      }
      body.gag-theme #desktop-board-sidebar-left .h-\[1px\] {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
      }

      /* 좌/우 사이드바: 카드 박스 제거 + 스크롤 따라 고정 */
      /* syncDesktopSidebarOffset()의 피드 높이 맞춤(margin-top)은 무시하고 헤더 바로 아래에서 시작 */
      body.gag-theme #desktop-board-sidebar-left,
      body.gag-theme #desktop-board-sidebar-right {
        position: sticky;
        top: 76px;
        margin-top: 0 !important;
      }
      body.gag-theme #desktop-board-sidebar-left > div,
      body.gag-theme #desktop-board-sidebar-right > div {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
      body.gag-theme #desktop-board-sidebar-left .board-select-group-title,
      body.gag-theme #desktop-board-sidebar-left #recent-boards-sidebar-section > p {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #999999 !important;
      }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn {
        border-radius: 6px;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
      }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn.is-active {
        background: #F0F0F0;
      }
      html.dark body.gag-theme #desktop-board-sidebar-left .board-item-btn.is-active,
      .dark body.gag-theme #desktop-board-sidebar-left .board-item-btn.is-active {
        background: rgba(255, 255, 255, 0.08);
      }
      body.gag-theme #desktop-board-sidebar-left .board-item-check {
        display: none !important;
      }
      body.gag-theme #desktop-board-sidebar-left .board-item-name {
        font-size: 14px !important;
      }
      /* 게시판 아이콘: 이모지 → 컬러 정사각형 타일 */
      body.gag-theme #desktop-board-sidebar-left span.board-item-icon {
        width: 24px !important;
        height: 24px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
        background: #F1F3F5;
      }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn:nth-of-type(6n+1) span.board-item-icon { background: #FFE3E3; }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn:nth-of-type(6n+2) span.board-item-icon { background: #FFF1D6; }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn:nth-of-type(6n+3) span.board-item-icon { background: #E3F6E8; }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn:nth-of-type(6n+4) span.board-item-icon { background: #E0EFFF; }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn:nth-of-type(6n+5) span.board-item-icon { background: #EEE6FF; }
      body.gag-theme #desktop-board-sidebar-left .board-item-btn:nth-of-type(6n) span.board-item-icon { background: #FFE6F4; }
      html.dark body.gag-theme #desktop-board-sidebar-left span.board-item-icon,
      .dark body.gag-theme #desktop-board-sidebar-left span.board-item-icon {
        background: rgba(255, 255, 255, 0.08) !important;
      }
      /* 팔로우 별: 팔로우 안 한 게시판도 빈 별(☆)을 늘 보여 준다 (예전엔 hover 때만 보여 안 보인다는 문의) */
      body.gag-theme #desktop-board-sidebar-left .board-follow-star:hover {
        color: #FFB800 !important;
      }

      /* 하단 탭바 → 9GAG식 상단 고정 헤더 (PC 전용, 하단바는 PC에서 스크롤 모션 없이 고정 노출이라 안전) */
      body.gag-theme {
        padding-bottom: 0 !important;
        padding-top: 60px !important;
      }
      body.gag-theme #toss-bottom-nav {
        top: 0 !important;
        bottom: auto !important;
        border-top: 0 !important;
        border-bottom: 1px solid #EDEDED !important;
        box-shadow: none !important;
        transform: none !important;
        z-index: 45;
      }
      html.dark body.gag-theme #toss-bottom-nav,
      .dark body.gag-theme #toss-bottom-nav {
        border-bottom-color: #26272E !important;
      }
      body.gag-theme #toss-bottom-nav > div {
        max-width: 1200px !important;
        height: 56px !important;
        justify-content: flex-start !important;
        gap: 0.25rem;
      }
      body.gag-theme #toss-bottom-nav .gag-nav-logo {
        display: block !important;
        margin-right: 1.5rem;
      }
      body.gag-theme #toss-bottom-nav .gag-nav-search {
        display: flex !important;
      }
      /* 오른쪽 묶음(출석·테마·검색·알림·메뉴)은 출석 버튼부터 오른쪽으로 민다 */
      body.gag-theme #toss-bottom-nav .gag-nav-pc {
        display: flex !important;
      }
      body.gag-theme #toss-bottom-nav .gag-nav-right-start {
        margin-left: auto;
      }
      body.gag-theme #toss-bottom-nav #nav-attendance-label {
        font-size: 14px;
        font-weight: 700;
      }
      body.gag-theme #toss-bottom-nav #nav-attendance-btn.is-done {
        color: #03B26C;
      }
      body.gag-theme #toss-bottom-nav .gag-nav-post {
        display: inline-flex !important;
        margin-left: 0.5rem;
      }
      body.gag-theme #toss-bottom-nav .gag-nav-shuffle {
        display: flex !important;
      }
      body.gag-theme #toss-bottom-nav .gag-nav-account {
        display: block !important;
        margin-left: 0.5rem;
      }
      body.gag-theme #toss-bottom-nav > div > button:not(.gag-nav-post) {
        flex: none !important;
        flex-direction: row !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 8px;
      }
      body.gag-theme #toss-bottom-nav > div > button:not(.gag-nav-post):hover {
        background: #F5F5F5;
      }
      html.dark body.gag-theme #toss-bottom-nav > div > button:not(.gag-nav-post):hover,
      .dark body.gag-theme #toss-bottom-nav > div > button:not(.gag-nav-post):hover {
        background: rgba(255, 255, 255, 0.06);
      }
      body.gag-theme #toss-bottom-nav > div > button:not(.gag-nav-post) > svg {
        width: 20px !important;
        height: 20px !important;
      }
      body.gag-theme #toss-bottom-nav > div > button:not(.gag-nav-post) > span:not([id]):not(.absolute) {
        font-size: 14px !important;
      }
      body.gag-theme #toss-bottom-nav > div > button:not(.gag-nav-post) > .absolute {
        top: -4px !important;
        right: -6px !important;
      }
    }

    /* 📋 [사용자 요청] 게시판 선택 바텀시트 / 모달 스타일 (네이버 라운지 / 토스 스타일 100% 일치) */
    #board-select-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 120;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      user-select: none;
    }
    #board-select-modal.hidden {
      display: none !important;
    }
    #board-select-modal.flex {
      display: flex !important;
    }

    #board-select-modal .board-select-modal-card {
      width: 100% !important;
      max-width: 100% !important;
      max-height: 85vh !important;
      background-color: #FFFFFF !important;
      border-top-left-radius: 26px !important;
      border-top-right-radius: 26px !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      border-top: 1px solid #E5E8EB !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    }
    .dark #board-select-modal .board-select-modal-card,
    html.dark #board-select-modal .board-select-modal-card {
      background-color: #181920 !important;
      border-color: #262734 !important;
      box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.65) !important;
    }

    /* 💻 PC / 태블릿 (화면 너비 >= 640px): 화면 꽉참 방지, 중앙 정렬 & 최대 480px 카드 레이아웃 완비 */
    @media (min-width: 640px) {
      #board-select-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 1.5rem !important;
      }
      #board-select-modal .board-select-modal-card {
        width: 100% !important;
        max-width: 480px !important;
        max-height: 640px !important;
        border-radius: 28px !important;
        border: 1px solid #E5E8EB !important;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
        animation: boardModalCardPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
      }
      .dark #board-select-modal .board-select-modal-card,
      html.dark #board-select-modal .board-select-modal-card {
        border-color: #2E3040 !important;
        box-shadow: 0 28px 72px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
      }
    }

    @keyframes boardModalCardPop {
      0% {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .board-select-group-title {
      font-size: 13.5px;
      font-weight: 800;
      color: #191F28;
      letter-spacing: -0.01em;
    }
    .dark .board-select-group-title, html.dark .board-select-group-title {
      color: #FFFFFF !important;
    }

    .board-item-btn {
      transition: background-color 0.15s ease, transform 0.1s ease;
    }
    .board-item-btn:hover {
      background-color: #F8F9FA;
    }
    .dark .board-item-btn:hover, html.dark .board-item-btn:hover {
      background-color: rgba(255, 255, 255, 0.05) !important;
    }
    .board-item-btn:active {
      background-color: #F2F4F6;
      transform: scale(0.995);
    }
    .dark .board-item-btn:active, html.dark .board-item-btn:active {
      background-color: rgba(255, 255, 255, 0.09) !important;
    }

    /* 활성화된 게시판 항목 스타일 */
    .board-item-btn.is-active {
      background-color: rgba(49, 130, 246, 0.06);
    }
    .dark .board-item-btn.is-active, html.dark .board-item-btn.is-active {
      background-color: rgba(49, 130, 246, 0.14) !important;
    }
    .board-item-btn.is-active .board-item-name {
      color: #3182F6 !important;
      font-weight: 800 !important;
    }
    .board-item-btn.is-active .board-item-icon {
      color: #3182F6 !important;
      stroke-width: 2.2 !important;
    }
    .board-item-btn.is-active .board-item-check {
      display: block !important;
    }

    /* 클랜/인기 N 배지 (빨간 원형) */
    .board-item-badge-n {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 9999px;
      background-color: #E54646;
      color: #ffffff;
      font-size: 8.5px;
      font-weight: 900;
      line-height: 1;
      margin-left: 4px;
      flex-shrink: 0;
    }

    /* 📋 4대 피드 뷰 모드 (컴팩트·목록·기본·카드형) 팝오버 및 전환 스타일 */
    .popover-slide-up {
      animation: popoverSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      transform-origin: top right;
    }
    @keyframes popoverSlideUp {
      from { opacity: 0; transform: translateY(-6px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ================================================================= */
    /* 📱 [사용자 요청] 게시글 터치/클릭 시 쫀득한 눌림(Press Scale) 햅틱 효과 */
    /* ================================================================= */
    /* 게시글을 누를 때 작아지거나 회색으로 번쩍이는 눌림 효과는 쓰지 않는다 (9GAG처럼 바로 이동) */
    .hero-rank-item,
    .feed-item-compact,
    .feed-item-list,
    .feed-item-card,
    .search-result-item,
    #main-feed-list a,
    #hero-ranking-list-col1 a,
    #hero-ranking-list-col2 a,
    #hero-ranking-popover a {
      -webkit-tap-highlight-color: transparent !important;
      touch-action: manipulation;
    }
    .hero-rank-item:active,
    .feed-item-compact:active,
    .feed-item-list:active,
    .feed-item-card:active,
    .board-feed-item:active,
    .search-result-item:active,
    #main-feed-list a:active,
    #hero-ranking-list-col1 a:active,
    #hero-ranking-list-col2 a:active,
    #hero-ranking-popover a:active {
      transform: none !important;
    }

    /* ================================================================= */
    /* 🔘 TDS 공통 토글 스위치 (TDS Switch Component) */
    /* ================================================================= */
    .tds-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
      cursor: pointer;
      user-select: none;
      vertical-align: middle;
    }
    .tds-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }
    .tds-switch-slider, .tds-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #E5E8EB;
      transition: 0.22s cubic-bezier(0.2, 0, 0, 1);
      border-radius: 24px;
    }
    .dark .tds-switch-slider, .dark .tds-slider {
      background-color: #383844;
    }
    .tds-switch-slider:before, .tds-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: #ffffff;
      transition: 0.22s cubic-bezier(0.2, 0, 0, 1);
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0,0,0,0.22);
    }
    .tds-switch input:checked + .tds-switch-slider,
    .tds-switch input:checked + .tds-slider {
      background-color: #3182F6;
    }
    .tds-switch.switch-green input:checked + .tds-switch-slider,
    .tds-switch.switch-green input:checked + .tds-slider,
    .tds-switch-green input:checked + .tds-switch-slider {
      background-color: #00B368 !important;
    }
    .tds-switch.switch-danger input:checked + .tds-switch-slider,
    .tds-switch.switch-danger input:checked + .tds-slider {
      background-color: #F04452 !important;
    }
    .tds-switch input:checked + .tds-switch-slider:before,
    .tds-switch input:checked + .tds-slider:before {
      transform: translateX(20px);
    }

    /* 🔴 어드민 N 배지 전용 토글 버튼 */
    .admin-n-toggle-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      border: none;
      transition: all 0.18s cubic-bezier(0.2, 0, 0, 1);
      user-select: none;
      white-space: nowrap;
    }
    .admin-n-toggle-btn.is-on {
      background-color: #F04452 !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(240, 68, 82, 0.38) !important;
    }
    .admin-n-toggle-btn.is-on:hover {
      background-color: #E03342 !important;
    }
    .admin-n-toggle-btn.is-off {
      background-color: #F2F4F6 !important;
      color: #8B95A1 !important;
    }
    .dark .admin-n-toggle-btn.is-off {
      background-color: #252632 !important;
      color: #7A828E !important;
    }
    .admin-n-toggle-btn.is-off:hover {
      background-color: #E5E8EB !important;
      color: #4E5968 !important;
    }
    .dark .admin-n-toggle-btn.is-off:hover {
      background-color: #2F3140 !important;
      color: #B0B8C1 !important;
    }
    .admin-n-toggle-btn:active {
      transform: scale(0.94);
    }

    /* ================================================================= */
    /* 📝 [사용자 요청] 글쓰기(write.html) PC 네이버 라운지 스타일 반응형 레이아웃 */
    /* ================================================================= */

    .write-page-wrapper {
      background-color: #F5F6F8 !important;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .dark .write-page-wrapper,
    html.dark .write-page-wrapper {
      background-color: #0E0F14 !important;
    }

    .write-page-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid #E5E8EB;
    }
    .dark .write-page-header,
    html.dark .write-page-header {
      background-color: rgba(18, 18, 22, 0.95);
      border-bottom-color: #22242E;
    }

    .write-header-inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 1rem;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .write-page-container {
      max-width: 1140px;
      width: 100%;
      margin: 0 auto;
      padding: 1.5rem 1rem 3rem 1rem;
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      box-sizing: border-box;
    }

    /* 좌측 사이드바 (PC 대화면 전용) */
    .write-sidebar {
      width: 240px;
      flex-shrink: 0;
      display: none;
      flex-direction: column;
      gap: 1rem;
      position: sticky;
      top: 76px;
    }
    @media (min-width: 1024px) {
      .write-sidebar {
        display: flex;
      }
    }

    .write-sidebar-card {
      background-color: #FFFFFF;
      border-radius: 20px;
      border: 1px solid #E5E8EB;
      padding: 1.15rem;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    }
    .dark .write-sidebar-card,
    html.dark .write-sidebar-card {
      background-color: #181920;
      border-color: #262834;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    }

    /* 우측 메인 에디터 카드 */
    .write-editor-card {
      flex: 1;
      min-width: 0;
      background-color: #FFFFFF;
      border-radius: 24px;
      border: 1px solid #E5E8EB;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
      padding: 1.75rem 2rem;
      display: flex;
      flex-direction: column;
    }
    .dark .write-editor-card,
    html.dark .write-editor-card {
      background-color: #181920;
      border-color: #262834;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    }

    /* 인카드 에디터 상단 툴바 */
    .write-in-card-toolbar {
      display: none;
    }
    @media (min-width: 1024px) {
      .write-in-card-toolbar {
        display: flex !important;
      }
    }

    /* 모바일 전용 하단 고정 툴바 */
    .write-mobile-bottom-nav {
      display: block;
    }
    @media (min-width: 1024px) {
      .write-mobile-bottom-nav {
        display: none !important;
      }
    }

    .write-toolbar-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 11px;
      border-radius: 10px;
      color: #4E5968;
      background-color: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.15s ease;
      user-select: none;
    }
    .dark .write-toolbar-btn,
    html.dark .write-toolbar-btn {
      color: #A6B0BC;
    }
    .write-toolbar-btn:hover {
      background-color: #F2F4F6;
      color: #191F28;
    }
    .dark .write-toolbar-btn:hover,
    html.dark .write-toolbar-btn:hover {
      background-color: #262834;
      color: #FFFFFF;
    }
    .write-toolbar-btn:active {
      transform: scale(0.95);
    }

    /* 글쓰기 본문 및 제목 다크모드 가독성 최적화 */
    #post-title {
      color: #191F28;
    }
    .dark #post-title,
    html.dark #post-title {
      color: #FFFFFF !important;
    }
    .dark #post-title::placeholder,
    html.dark #post-title::placeholder {
      color: #717684 !important;
    }

    #editor {
      color: #191F28;
    }
    .dark #editor,
    html.dark #editor {
      color: #E5E8EB !important;
    }

    /* 투표 템플릿 다크모드 최적화 */
    .dark #editor div[class*="rounded-2xl"],
    html.dark #editor div[class*="rounded-2xl"] {
      background-color: #1C1E26 !important;
      border-color: #2D303E !important;
      color: #FFFFFF !important;
    }
    .dark #editor div[class*="rounded-2xl"] p,
    html.dark #editor div[class*="rounded-2xl"] p {
      color: #FFFFFF !important;
    }
    .dark #editor div[class*="rounded-xl"],
    html.dark #editor div[class*="rounded-xl"] {
      background-color: #242734 !important;
      border-color: #343849 !important;
      color: #E5E8EB !important;
    }

    /* 모바일 뷰포트 (< 768px): 모바일 전용 심리스 스타일 */
    @media (max-width: 767px) {
      .write-page-wrapper {
        background-color: #FFFFFF !important;
      }
      .dark .write-page-wrapper,
      html.dark .write-page-wrapper {
        background-color: #121216 !important;
      }
      .write-page-container {
        padding: 0.75rem 1rem 6rem 1rem !important;
      }
      .write-editor-card {
        border: none !important;
        border-radius: 22px !important;
        box-shadow: 0 2px 14px rgba(25, 31, 40, 0.05) !important;
        padding: 1.1rem 1.1rem 0.5rem 1.1rem !important;
        background-color: #FFFFFF !important;
      }
      .dark .write-editor-card,
      html.dark .write-editor-card {
        background-color: #181920 !important;
        border: none !important;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
      }
      #post-title {
        padding-bottom: 0.6rem !important;
        border-bottom: 1px solid #F2F4F6 !important;
      }
      .dark #post-title,
      html.dark #post-title {
        border-bottom-color: #22242E !important;
      }
      .write-mobile-bottom-nav {
        box-shadow: 0 -4px 16px rgba(25, 31, 40, 0.05);
      }
    }
    
    /* 🔔 [사용자 요청] 모바일 전용 초슬림 컴팩트 알림 토스트 (화면 가림 방지 & 한 손 조작 최적화) */
    #site-noti-toast-container {
      top: max(10px, env(safe-area-inset-top, 10px));
      z-index: 999999 !important;
    }

    @media (max-width: 639px) {
      #site-noti-toast-container {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        pointer-events: none !important;
      }

      [id^="site-toast-"] {
        padding: 8px 10px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        gap: 8px !important;
        min-height: 48px !important;
        max-height: 64px !important;
      }

      html.dark [id^="site-toast-"],
      .dark [id^="site-toast-"] {
        background-color: rgba(26, 28, 35, 0.94) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
      }

      [id^="site-toast-"] h4 {
        font-size: 12px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
      }

      [id^="site-toast-"] p {
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
        opacity: 0.88 !important;
      }

      [id^="site-toast-"] .w-8 {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
      }

      [id^="site-toast-"] button[aria-label="닫기"] {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
      }
    }

    /* ========================================================================= */
    /* 🎮 담픽 포인트 아케이드 & 💣 3D 지뢰찾기 프리미엄 스타일 시스템 */
    /* ========================================================================= */
    .arcade-modal-card {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25), 0 0 35px rgba(79, 70, 229, 0.08);
    }
    .dark .arcade-modal-card {
      background: #181922 !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8), 0 0 45px rgba(99, 102, 241, 0.18) !important;
    }

    /* 상단 아케이드 뱃지 쉬머 */
    @keyframes arcadeBadgeShine {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .arcade-shimmer-badge {
      background: linear-gradient(90deg, #6366F1 0%, #EC4899 45%, #F59E0B 75%, #6366F1 100%);
      background-size: 250% 100%;
      animation: arcadeBadgeShine 4s linear infinite;
    }

    /* 탭 액티브 글로우 */
    .arcade-tab-active-glow {
      background: linear-gradient(135deg, #3182F6 0%, #4F46E5 100%) !important;
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(49, 130, 246, 0.4) !important;
    }

    /* 💣 3D 지뢰찾기 5x5 그리드 컨테이너 */
    #mines-grid-container {
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: 440px !important;
      aspect-ratio: 1 / 1 !important;
      gap: 10px !important;
      margin: 0 auto !important;
      box-sizing: border-box !important;
    }
    @media (max-width: 640px) {
      #mines-grid-container {
        gap: 6px !important;
        max-width: 320px !important;
      }
    }
    #scratch-modal:not(.arcade-page-mode) #mines-grid-container,
    #arcade-modal #mines-grid-container {
      max-width: 300px !important;
      gap: 6px !important;
    }

    /* 💣 3D 지뢰찾기 타일 시스템 */
    .mines-tile-btn {
      width: 100%;
      aspect-ratio: 1 / 1;
      position: relative;
      perspective: 700px;
      -webkit-perspective: 700px;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      outline: none;
      touch-action: manipulation;
      display: block;
    }
    .mines-tile-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
      border-radius: 14px;
    }
    .mines-tile-btn.is-flipped .mines-tile-inner {
      transform: rotateY(180deg);
    }

    .mines-tile-front,
    .mines-tile-back {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 14px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      box-sizing: border-box;
    }

    /* 앞면 (미개봉 상태) */
    .mines-tile-front {
      background: linear-gradient(145deg, #FFFFFF 0%, #F1F5F9 100%);
      border: 1.5px solid #CBD5E1;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 3px 6px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .dark .mines-tile-front {
      background: linear-gradient(145deg, #242436 0%, #171622 100%);
      border: 1.5px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.45);
    }
    .mines-tile-btn:not(.is-flipped):not(:disabled):not(.cursor-default):hover .mines-tile-front {
      transform: translateY(-2px) scale(1.02);
      border-color: #6366F1;
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(99, 102, 241, 0.35);
    }
    .dark .mines-tile-btn:not(.is-flipped):not(:disabled):not(.cursor-default):hover .mines-tile-front {
      border-color: #818CF8;
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 0 18px rgba(129, 140, 248, 0.45);
    }
    .mines-tile-btn:not(.is-flipped):not(:disabled):active .mines-tile-front {
      transform: translateY(1px) scale(0.96);
    }

    /* 뒷면 (개봉 상태) */
    .mines-tile-back {
      transform: rotateY(180deg);
    }

    /* 보석 💎 */
    .mines-tile-back.tile-gem {
      background: radial-gradient(circle at 40% 35%, #34D399 0%, #059669 65%, #064E3B 100%);
      border: 2px solid #6EE7B7;
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 20px rgba(16, 185, 129, 0.6);
    }
    .mines-tile-back.tile-gem-dimmed {
      background: rgba(16, 185, 129, 0.12);
      border: 1px dashed rgba(16, 185, 129, 0.4);
      opacity: 0.65;
    }

    /* 지뢰 💣 */
    .mines-tile-back.tile-mine {
      background: radial-gradient(circle at 40% 35%, #F87171 0%, #DC2626 65%, #7F1D1D 100%);
      border: 2px solid #FCA5A5;
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 0 24px rgba(239, 68, 68, 0.7);
    }
    .mines-tile-back.tile-mine-dimmed {
      background: rgba(239, 68, 68, 0.12);
      border: 1px dashed rgba(239, 68, 68, 0.45);
      opacity: 0.75;
    }

    @keyframes mineBoomShake {
      0%, 100% { transform: rotateY(180deg) scale(1); }
      15% { transform: rotateY(180deg) scale(1.15) translate(-4px, 3px); }
      30% { transform: rotateY(180deg) scale(1.15) translate(4px, -3px); }
      45% { transform: rotateY(180deg) scale(1.1) translate(-3px, -2px); }
      60% { transform: rotateY(180deg) scale(1.08) translate(3px, 2px); }
      75% { transform: rotateY(180deg) scale(1.03) translate(-1px, 1px); }
    }
    .mines-tile-back.tile-mine.exploded {
      animation: mineBoomShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    /* 보석 배당 플로팅 애니메이션 */
    @keyframes gemPillFloat {
      0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
      30% { opacity: 1; transform: translate(-50%, -12px) scale(1.15); }
      70% { opacity: 1; transform: translate(-50%, -20px) scale(1.0); }
      100% { opacity: 0; transform: translate(-50%, -32px) scale(0.85); }
    }
    .gem-float-indicator {
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translate(-50%, 0);
      pointer-events: none;
      z-index: 30;
      white-space: nowrap;
      animation: gemPillFloat 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* 캐시아웃 버튼 쉬머 */
    @keyframes cashoutGlowPulse {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 8px 24px rgba(16, 185, 129, 0.35);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0), 0 12px 32px rgba(16, 185, 129, 0.55);
      }
    }
    .btn-cashout-glow {
      animation: cashoutGlowPulse 1.8s infinite;
    }

    @keyframes shimmerSweep {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(200%); }
    }
    .shimmer-sweep {
      position: relative;
      overflow: hidden;
    }
    .shimmer-sweep::after {
      content: '';
      position: absolute;
      inset: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      transform: skewX(-20deg) translateX(-100%);
      animation: shimmerSweep 2.5s infinite;
    }

    /* ========================================================================= */
    /* 🌡️ 라이브 온도계 (FEAT. HASH) 프리미엄 다크 카지노 테마 시스템 */
    /* ========================================================================= */
    .thermo-bg-card {
      background: radial-gradient(circle at 50% 0%, #2a1116 0%, #170a0c 70%, #110608 100%);
      border: 1px solid rgba(244, 63, 94, 0.25);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    }

    .thermo-panel-card {
      background: rgba(22, 10, 13, 0.75);
      border: 1px solid rgba(244, 63, 94, 0.18);
      backdrop-filter: blur(8px);
    }

    /* 3D 수은 유리관 */
    .thermo-tube-outer {
      width: 48px;
      height: 220px;
      background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.18) 25%, rgba(0,0,0,0.6) 50%, rgba(255,255,255,0.08) 85%, rgba(0,0,0,0.8) 100%);
      border-radius: 9999px;
      border: 1.5px solid rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 0 15px rgba(239, 68, 68, 0.2);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      padding-bottom: 2px;
    }

    .thermo-mercury-bar {
      width: 32px;
      border-radius: 9999px 9999px 4px 4px;
      background: linear-gradient(to top, #DC2626 0%, #EA580C 40%, #F59E0B 80%, #FDE047 100%);
      box-shadow: 0 0 14px rgba(245, 158, 11, 0.7), inset 0 0 4px rgba(255,255,255,0.6);
      transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
    }

    /* 수은 표면 반짝임 (Meniscus) */
    .thermo-mercury-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 0 8px #ffffff;
    }

    /* 하단 3D 구체 전구 */
    .thermo-bulb-sphere {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #FCA5A5 0%, #EF4444 35%, #DC2626 70%, #7F1D1D 100%);
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 25px rgba(239, 68, 68, 0.8), inset -4px -4px 10px rgba(0, 0, 0, 0.6), inset 4px 4px 10px rgba(255, 255, 255, 0.5);
      position: relative;
      z-index: 10;
      margin-top: -24px;
    }

    /* 바닥 원형 받침대 및 네온 링 */
    .thermo-base-floor {
      width: 120px;
      height: 32px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.6) 0%, rgba(239, 68, 68, 0.15) 50%, transparent 75%);
      box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
      margin-top: -16px;
      position: relative;
      z-index: 5;
    }

    /* ========================================================= */
    /* 📱 아케이드 반응형 그리드 & 컬럼 유틸리티 (Tailwind 보강) */
    /* ========================================================= */
    .grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    @media (min-width: 1024px) {
      .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
      }
      .lg\:col-span-1 { grid-column: span 1 / span 1 !important; }
      .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
      .lg\:col-span-3 { grid-column: span 3 / span 3 !important; }
      .lg\:col-span-4 { grid-column: span 4 / span 4 !important; }
      .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
      .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
      .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
      .lg\:col-span-8 { grid-column: span 8 / span 8 !important; }
      .lg\:col-span-9 { grid-column: span 9 / span 9 !important; }
      .lg\:col-span-10 { grid-column: span 10 / span 10 !important; }
      .lg\:col-span-11 { grid-column: span 11 / span 11 !important; }
      .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }
    }

    @media (min-width: 1280px) {
      .xl\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
      }
      .xl\:col-span-4 { grid-column: span 4 / span 4 !important; }
      .xl\:col-span-5 { grid-column: span 5 / span 5 !important; }
      .xl\:col-span-6 { grid-column: span 6 / span 6 !important; }
      .xl\:col-span-7 { grid-column: span 7 / span 7 !important; }
      .xl\:col-span-8 { grid-column: span 8 / span 8 !important; }
    }

    @keyframes boardShake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-8px) rotate(-1deg); }
      40% { transform: translateX(8px) rotate(1deg); }
      60% { transform: translateX(-5px) rotate(-0.5deg); }
      80% { transform: translateX(5px) rotate(0.5deg); }
    }
    .animate-shake {
      animation: boardShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    /* 🔞 민감 콘텐츠 가림 (누르면 확인 후 보임) */
    .sensitive-shield { position: relative; overflow: hidden; }
    .sensitive-shield img, .sensitive-shield video { filter: blur(28px) brightness(0.7); transform: scale(1.1); }
    .sensitive-cover {
      position: absolute; inset: 0; z-index: 3;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 15px; cursor: pointer; min-height: 200px;
    }
    .sensitive-shield.is-revealed img, .sensitive-shield.is-revealed video { filter: none; transform: none; }
    .sensitive-shield.is-revealed .sensitive-cover { display: none; }

    /* 가로형 로고 (라이트/다크 전환) */
    .dp-logo { height: 28px; width: auto; display: inline-block; vertical-align: middle; }
    .dp-logo-dark { display: none; }
    html.dark .dp-logo-light { display: none; }
    html.dark .dp-logo-dark { display: inline-block; }

/* =================================================================
   🎬 숏폼 뷰어 (js/shorts-viewer.js): 세로 스냅 스크롤 풀스크린, PC는 오른쪽 댓글 패널
   ================================================================= */
html.shorts-open, html.shorts-open body { overflow: hidden !important; }
.shorts-viewer { position: fixed; inset: 0; z-index: 200; display: flex; background: #000; color: #fff; }
.shorts-viewer.hidden { display: none; }
.shorts-stage { position: relative; flex: 1; min-width: 0; height: 100dvh; }
.shorts-container { height: 100dvh; width: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.shorts-container::-webkit-scrollbar { display: none; }
.shorts-item { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; justify-content: center; }
.shorts-frame { position: relative; height: 100%; width: 100%; }
.shorts-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.shorts-paused { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.9); pointer-events: none; }
.shorts-paused svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.shorts-item.is-paused .shorts-paused { display: flex; }
.shorts-meta { position: absolute; left: 0; right: 72px; bottom: 0; padding: 48px 16px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); pointer-events: none; }
.shorts-meta h3 { font-size: 16px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 토스식 세로 액션: 반투명 동그란 버튼 + 숫자 */
.shorts-actions { position: absolute; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shorts-actions button { width: 48px; height: 48px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, transform 0.12s; }
.shorts-actions button svg { width: 22px; height: 22px; }
.shorts-actions button:hover { background: rgba(255, 255, 255, 0.22); }
.shorts-actions button:active { transform: scale(0.94); }
.shorts-actions button.is-on[data-act="up"] { background: #3182F6; }
.shorts-actions button.is-on[data-act="down"] { background: #F04452; }
.shorts-score, .shorts-actions .shorts-cnt { font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); line-height: 1.2; }
.shorts-actions .shorts-cnt { margin: -2px 0 2px; }
.shorts-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 18px; cursor: pointer; }.shorts-keyhint { display: none; }
.shorts-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #B0B8C1; }
.shorts-empty.hidden { display: none; }

/* 댓글: 모바일은 아래에서 올라오는 반투명 시트 */
.shorts-comments { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; height: 62dvh; display: flex; flex-direction: column; background: rgba(22, 22, 28, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform 0.25s ease; }
.shorts-comments.is-open { transform: translateY(0); }
.shorts-comments-handle { width: 40px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); margin: 8px auto 2px; cursor: pointer; }
.shorts-comments-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; }
.shorts-comments-post { margin-left: auto; font-size: 13px; color: #61B0FF; font-weight: 700; }
.shorts-comments-x { font-size: 16px; color: #B0B8C1; cursor: pointer; }
.shorts-comments-list { flex: 1; overflow-y: auto; padding: 8px 16px; }
.shorts-c { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.shorts-c-head { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.shorts-c-head span { color: #8B95A1; font-size: 12px; }
.shorts-c p { margin-top: 4px; font-size: 14px; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.shorts-c-replies { margin-top: 4px; font-size: 12px; color: #8B95A1; }
.shorts-c-empty { padding: 24px 0; text-align: center; color: #8B95A1; font-size: 14px; }
.shorts-comment-form { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.shorts-comment-form input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; outline: none; }
.shorts-comment-form button { padding: 0 16px; border-radius: 999px; background: #3182F6; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }

/* PC(1024px+): 가운데 세로 영상 + 오른쪽 350px 댓글 패널 */
@media (min-width: 1024px) {
  .shorts-frame { width: min(100%, calc(100dvh * 9 / 16)); }
  .shorts-actions { right: -64px; bottom: 96px; }
  /* 영상 밖(검은 배경)에 놓이므로 동그란 버튼이 보이게 밝은 반투명 */
  .shorts-actions button { background: rgba(255, 255, 255, 0.12); }
  .shorts-actions button:hover { background: rgba(255, 255, 255, 0.24); }
  .shorts-meta { right: 0; }
  .shorts-comments { position: static; width: 350px; height: 100dvh; transform: none; border-radius: 0; background: #16161C; border-left: 1px solid rgba(255, 255, 255, 0.08); }
  .shorts-comments-handle, .shorts-comments-x { display: none; }
  .shorts-keyhint { display: block; position: absolute; left: 16px; bottom: 16px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
}

/* 👤 9GAG식 계정 드롭다운 (common-ui.js renderNavAccountMenu) */
#gag-nav-account-menu { width: 280px !important; max-height: calc(100vh - 80px); overflow-y: auto; padding: 0 0 6px !important; }
.gnm-head { display: block; padding: 14px 16px 12px; border-bottom: 1px solid #EDEDED; }
.gnm-head:hover { background: #F5F5F5; }
.gnm-nick { display: block; font-size: 15px; font-weight: 800; color: #191F28; }
.gnm-sub { font-size: 12px; color: #8B95A1; }
.gnm-title { padding: 12px 16px 4px; font-size: 11px; font-weight: 700; color: #999999; }
.gnm-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 16px; font-size: 14px; text-align: left; color: #191F28; cursor: pointer; }
.gnm-row:hover { background: #F5F5F5; }
.gnm-ico { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.gnm-sep { height: 1px; background: #EDEDED; margin: 6px 0; }
.gnm-admin { font-weight: 700; }
.gnm-logout { color: #F04452; }
.gnm-withdraw { font-size: 12px; color: #999999; }
html.dark .gnm-head { border-bottom-color: #2A2A2E; }
html.dark .gnm-head:hover, html.dark .gnm-row:hover { background: rgba(255, 255, 255, 0.06); }
html.dark .gnm-nick, html.dark .gnm-row { color: #E4E4E8; }
html.dark .gnm-sep { background: #2A2A2E; }
html.dark .gnm-logout { color: #FF6B76; }
html.dark .gnm-withdraw { color: #7A838F; }

/* 🧭 헤더 메뉴 화면(광장·쇼핑·알림·계정 메뉴)을 피드 가운데 칸에 표시: 피드 내용만 숨긴다 (feed-bottom-nav.js) */
#main-board-container.alt-mode > main > *:not(#board-alt-slot) { display: none !important; }
#main-board-container:not(.alt-mode) #board-alt-slot { display: none; }
#board-alt-slot > * { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ☆ 게시판 팔로우 별 (feed-cards.js updateBoardFollowStars): 팔로우 안 함 = 회색 빈 별, 팔로우 = 노란 별 */
.board-follow-star { color: #8B95A1; cursor: pointer; }
html.dark .board-follow-star { color: #7A838F; }
.board-follow-star.is-followed { color: #FFB800 !important; }

/* 👤 계정 메뉴 간소화 (토스식): 프로필·포인트 / 4칸 바로가기 / 짧은 목록 — 스크롤 없이 한눈에 */
#gag-nav-account-menu { max-height: none !important; overflow: visible !important; }
.gnm-head { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid #EDEDED; }
.gnm-head:hover { background: transparent; }
.gnm-nick { display: flex; align-items: baseline; gap: 6px; font-size: 16px; font-weight: 800; color: #191F28; }
.gnm-nick .gnm-sub { font-size: 12px; font-weight: 500; color: #8B95A1; }
.gnm-wallet { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #F2F8FF; }
.gnm-points { font-size: 15px; font-weight: 800; color: #3182F6; cursor: pointer; }
.gnm-shop { padding: 5px 10px; border-radius: 999px; background: #3182F6; color: #fff; font-size: 12px; font-weight: 800; }
.gnm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 10px 8px; border-bottom: 1px solid #EDEDED; margin-bottom: 4px; }
.gnm-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 12px; font-size: 12px; font-weight: 700; color: #4E5968; cursor: pointer; }
.gnm-tile span { font-size: 22px; line-height: 1; }
.gnm-tile:hover { background: #F2F4F6; }
.gnm-switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #D1D6DB; transition: background 0.2s; flex-shrink: 0; }
.gnm-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: transform 0.2s; }
.gnm-switch.is-on { background: #3182F6; }
.gnm-switch.is-on::after { transform: translateX(16px); }
html.dark .gnm-head, html.dark .gnm-grid { border-color: #2A2A2E; }
html.dark .gnm-nick { color: #F2F4F6; }
html.dark .gnm-wallet { background: rgba(49, 130, 246, 0.14); }
html.dark .gnm-points { color: #61B0FF; }
html.dark .gnm-tile { color: #C5C8D0; }
html.dark .gnm-tile:hover { background: rgba(255, 255, 255, 0.06); }
html.dark .gnm-switch { background: #3A3B45; }
html.dark .gnm-switch.is-on { background: #3182F6; }

/* 📐 PC 상단 헤더 정돈: 모든 요소 수직 중앙 · 간격 통일 · 왼쪽 탭 14px · 오른쪽 아이콘 36px 원형 (index·post 공통) */
@media (min-width: 1024px) {
  #toss-bottom-nav > div { align-items: center !important; gap: 0.375rem !important; }
  #toss-bottom-nav > div > * { flex: none !important; }
  #toss-bottom-nav .gag-nav-logo { display: inline-flex !important; align-items: center; margin-right: 1.25rem !important; }
  /* 왼쪽 콘텐츠 탭: 숏폼 · 광장 · 포인트 상점 */
  #toss-bottom-nav > div > #bottom-tab-shorts,
  #toss-bottom-nav > div > #bottom-tab-square,
  #toss-bottom-nav > div > #bottom-tab-shop {
    display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center;
    height: 36px; padding: 0 10px !important; gap: 6px !important; border-radius: 10px !important;
    color: #4E5968 !important;
  }
  #toss-bottom-nav > div > #bottom-tab-shorts > svg,
  #toss-bottom-nav > div > #bottom-tab-square > svg,
  #toss-bottom-nav > div > #bottom-tab-shop > svg { width: 18px !important; height: 18px !important; transform: none !important; }
  #toss-bottom-nav > div > #bottom-tab-shorts > span:not(.gag-live-badge),
  #toss-bottom-nav > div > #bottom-tab-square > span:not(.gag-live-badge),
  #toss-bottom-nav > div > #bottom-tab-shop > span { font-size: 14px !important; font-weight: 700 !important; line-height: 1; }
  #toss-bottom-nav > div > #bottom-tab-shorts:hover,
  #toss-bottom-nav > div > #bottom-tab-square:hover,
  #toss-bottom-nav > div > #bottom-tab-shop:hover { background: #F2F4F6 !important; color: #191F28 !important; }
  /* 오른쪽: 출석 칩 */
  #toss-bottom-nav > div > #nav-attendance-btn {
    display: inline-flex !important; align-items: center !important; height: 32px; padding: 0 12px !important; gap: 6px !important;
    border-radius: 999px !important; background: #F2F4F6 !important; font-size: 13px !important; font-weight: 700 !important; margin-left: auto !important;
  }
  #toss-bottom-nav > div > #nav-attendance-btn > svg { width: 16px !important; height: 16px !important; }
  #toss-bottom-nav > div > #nav-attendance-btn #nav-attendance-label { font-size: 13px !important; }
  /* 오른쪽: 테마 · 검색 · 알림 = 같은 36px 원형 아이콘 버튼 (알림 글자는 빼고 벨만) */
  #toss-bottom-nav > div > #nav-theme-btn,
  #toss-bottom-nav > div > #nav-search-btn,
  #toss-bottom-nav > div > #bottom-tab-noti {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; height: 36px !important; padding: 0 !important; gap: 0 !important; border-radius: 999px !important;
    color: #333D4B !important; position: relative;
  }
  #toss-bottom-nav > div > #nav-theme-btn svg,
  #toss-bottom-nav > div > #nav-search-btn svg,
  #toss-bottom-nav > div > #bottom-tab-noti > svg { width: 20px !important; height: 20px !important; transform: none !important; }
  #toss-bottom-nav > div > #bottom-tab-noti > span:not([id]) { display: none !important; }
  #toss-bottom-nav > div > #bottom-tab-noti > #bottom-tab-noti-badge { top: 3px !important; right: 3px !important; left: auto !important; min-width: 16px; height: 16px; font-size: 9px; }
  #toss-bottom-nav > div > #nav-theme-btn:hover,
  #toss-bottom-nav > div > #nav-search-btn:hover,
  #toss-bottom-nav > div > #bottom-tab-noti:hover { background: #F2F4F6 !important; }
  /* 글쓰기 캡슐 · 아바타 */
  #toss-bottom-nav > div > .gag-nav-post { height: 36px; padding: 0 16px !important; font-size: 13px !important; font-weight: 800 !important; margin-left: 0.25rem !important; align-items: center; }
  #toss-bottom-nav > div > .gag-nav-account { margin-left: 0.25rem !important; }
  #toss-bottom-nav #gag-nav-avatar { width: 36px !important; height: 36px !important; }
  #toss-bottom-nav #gag-nav-login { height: 36px; display: inline-flex; align-items: center; }
  html.dark #toss-bottom-nav > div > #bottom-tab-shorts,
  html.dark #toss-bottom-nav > div > #bottom-tab-square,
  html.dark #toss-bottom-nav > div > #bottom-tab-shop { color: #B0B8C1 !important; }
  html.dark #toss-bottom-nav > div > #bottom-tab-shorts:hover,
  html.dark #toss-bottom-nav > div > #bottom-tab-square:hover,
  html.dark #toss-bottom-nav > div > #bottom-tab-shop:hover,
  html.dark #toss-bottom-nav > div > #nav-theme-btn:hover,
  html.dark #toss-bottom-nav > div > #nav-search-btn:hover,
  html.dark #toss-bottom-nav > div > #bottom-tab-noti:hover { background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; }
  html.dark #toss-bottom-nav > div > #nav-attendance-btn { background: rgba(255, 255, 255, 0.1) !important; color: #E4E4E8 !important; }
  html.dark #toss-bottom-nav > div > #nav-theme-btn,
  html.dark #toss-bottom-nav > div > #nav-search-btn,
  html.dark #toss-bottom-nav > div > #bottom-tab-noti { color: #D1D6DB !important; }
}

/* 로그인/아바타 토글: 헤더 정돈 규칙(display:inline-flex)이 JS의 hidden 을 이기지 못하게 숨김을 항상 우선 */
#gag-nav-login.hidden,
#gag-nav-avatar.hidden,
.gag-nav-account .hidden { display: none !important; }

/* 📅 출석체크 달력 7열 (components/attendance-modal.html): Tailwind 빌드와 상관없이 항상 7열 */
#attendance-calendar-grid,
#attendance-modal .grid-cols-7 {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100%;
}

/* 헤더 '출석': 아이콘·칩 배경 없이 글씨만 (왼쪽 탭과 같은 톤) */
@media (min-width: 1024px) {
  #toss-bottom-nav > div > #nav-attendance-btn {
    background: transparent !important; height: 36px; padding: 0 10px !important; border-radius: 10px !important;
    font-size: 14px !important; font-weight: 700 !important; color: #4E5968 !important;
  }
  #toss-bottom-nav > div > #nav-attendance-btn #nav-attendance-label { font-size: 14px !important; }
  #toss-bottom-nav > div > #nav-attendance-btn:hover { background: #F2F4F6 !important; color: #191F28 !important; }
  #toss-bottom-nav > div > #nav-attendance-btn.is-done { color: #03B26C !important; }
  html.dark #toss-bottom-nav > div > #nav-attendance-btn { background: transparent !important; color: #B0B8C1 !important; }
  html.dark #toss-bottom-nav > div > #nav-attendance-btn:hover { background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; }
}