/**
 * brand-news.html 전용 스타일
 * Notion 디자인 시스템 적용
 */

/* ===============================================
   페이지 타이틀 - 노션 스타일
   =============================================== */
.notion-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notion-page-emoji {
  font-size: 24px;
  line-height: 1;
}

.notion-page-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--notion-text-default, #37352f);
}

/* ===============================================
   폼 헤더 이모지 - 노션 스타일
   =============================================== */
.form-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-header-emoji {
  font-size: 18px;
  line-height: 1;
}

/* ===============================================
   섹션 타이틀 - 노션 스타일
   =============================================== */
.section-title h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--notion-text-default, #37352f);
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--notion-border-light, #f1f1ef);
}

.section-emoji {
  font-size: 16px;
  line-height: 1;
}

/* ===============================================
   테이블 헤더 - 노션 스타일
   =============================================== */
.table-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--notion-border-light, #f1f1ef);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--notion-text-default, #37352f);
  margin: 0;
}

.table-emoji {
  font-size: 18px;
  line-height: 1;
}

/* 브랜드 소식 전용 스타일 */
      .news-form-container {
        background: var(--notion-bg-default, #ffffff);
        border: 1px solid var(--notion-border-default, #e5e7eb);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        display: none;
      }

      .news-form-container.show {
        display: block;
      }

      .form-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--notion-border-default, #e5e7eb);
      }

      .form-header h3 {
        margin: 0;
        color: var(--notion-text-default, #37352f);
      }

      .form-close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--notion-text-gray, #9b9a97);
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.15s ease;
      }

      .form-close-btn:hover {
        color: var(--notion-text-default, #37352f);
      }

      /* 카테고리 버튼 */
      .category-buttons {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
      }

      .category-btn {
        padding: 8px 16px;
        margin: 4px;
        border: 1px solid var(--notion-border-default, #e5e7eb);
        border-radius: 20px;
        background: var(--notion-bg-default, #ffffff);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 14px;
        color: var(--notion-text-default, #37352f);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .category-btn i {
        font-size: 14px;
      }

      .category-btn.selected {
        background: var(--notion-bg-blue, #e7f3f8);
        color: var(--notion-text-blue, #0b6e99);
        border-color: var(--notion-text-blue, #0b6e99);
      }

      .category-btn:hover {
        border-color: var(--notion-text-blue, #0b6e99);
        background: var(--notion-bg-gray, #f7f6f3);
      }

      /* 카테고리 배지 - Notion 스타일 (8개 모두 다른 색상) */
      .category-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        border: none;
      }

      /* 공지사항 - 파란색 */
      .category-badge.notice {
        background: var(--notion-bg-blue, #e7f3f8);
        color: var(--notion-text-blue, #0b6e99);
      }

      /* 업데이트 - 보라색 */
      .category-badge.update {
        background: var(--notion-bg-purple, #f4f0f7);
        color: var(--notion-text-purple, #6940a5);
      }

      /* 이벤트 - 주황색 */
      .category-badge.event {
        background: var(--notion-bg-orange, #fbecdd);
        color: var(--notion-text-orange, #d9730d);
      }

      /* 프로모션 - 녹색 */
      .category-badge.promotion {
        background: var(--notion-bg-green, #dbeddb);
        color: var(--notion-text-green, #0f7b6c);
      }

      /* 일반 - 회색 */
      .category-badge.general {
        background: var(--notion-bg-gray, #f7f6f3);
        color: var(--notion-text-gray, #9b9a97);
      }

      /* 시설안내 - 청록색(Teal) */
      .category-badge.facility {
        background: #e6f7f5;
        color: #147a72;
      }

      /* 후기/사례 - 분홍색 */
      .category-badge.review {
        background: var(--notion-bg-pink, #f5e0e9);
        color: var(--notion-text-pink, #ad1a72);
      }

      /* 파트너십 - 노란색 */
      .category-badge.partnership {
        background: var(--notion-bg-yellow, #fbf3db);
        color: var(--notion-text-yellow, #dfab01);
      }

      /* 이미지 업로드 */
      .image-upload-area {
        position: relative;
        width: 100%;
        min-height: 150px;
        border: 2px dashed var(--notion-border-default, #e5e7eb);
        border-radius: 8px;
        transition: all 0.2s ease;
        background: var(--notion-bg-gray, #f7f6f3);
        cursor: pointer;
        overflow: hidden;
        margin-bottom: 24px;
      }

      .image-upload-area.drag-over {
        border-color: var(--notion-text-blue, #0b6e99);
        background: var(--notion-bg-blue, #e7f3f8);
      }

      .upload-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        cursor: pointer;
      }

      .upload-placeholder i {
        font-size: 48px;
        color: var(--notion-text-gray, #9b9a97);
        margin-bottom: 15px;
      }

      .upload-placeholder p {
        color: var(--notion-text-gray, #9b9a97);
        margin: 0;
        text-align: center;
        font-size: 14px;
      }

      .image-preview {
        display: none;
        position: relative;
        width: 200px;
        max-height: 267px;
        border-radius: 8px;
        overflow: hidden;
        margin: 20px auto;
        border: 1px solid var(--notion-border-default, #e5e7eb);
      }

      .image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .remove-image {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .remove-image:hover {
        background: #ef4444;
      }

      /* 중요도 버튼 */
      .importance-buttons {
        display: flex;
        gap: 10px;
        margin-top: 10px;
      }

      .importance-btn {
        padding: 8px 16px;
        border: 1px solid var(--notion-border-default, #e5e7eb);
        border-radius: 20px;
        background: var(--notion-bg-default, #ffffff);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 14px;
        color: var(--notion-text-default, #37352f);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .importance-btn.selected {
        background: var(--notion-bg-blue, #e7f3f8);
        color: var(--notion-text-blue, #0b6e99);
        border-color: var(--notion-text-blue, #0b6e99);
      }

      /* 중요도 배지 - Notion 스타일 */
      .importance-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        margin-left: 5px;
        border: none;
      }

      .importance-badge.high {
        background: var(--notion-bg-red, #ffe2dd);
        color: var(--notion-text-red, #e03e3e);
      }

      .importance-badge.normal {
        background: var(--notion-bg-blue, #e7f3f8);
        color: var(--notion-text-blue, #0b6e99);
      }

      .importance-badge.low {
        background: var(--notion-bg-gray, #f7f6f3);
        color: var(--notion-text-gray, #9b9a97);
      }

      /* 뉴스 제목 링크 - Notion 스타일 */
      .news-title-link {
        color: var(--notion-text-default, #37352f);
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        transition: color 0.15s ease;
      }

      .news-title-link:hover {
        color: var(--notion-text-default, #37352f);
        text-decoration: underline;
      }

      /* 상태 배지 - Notion 스타일 */
      .status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        border: none;
      }

      .status-badge.published {
        background: var(--notion-bg-green, #dbeddb);
        color: var(--notion-text-green, #0f7b6c);
      }

      .status-badge.draft {
        background: var(--notion-bg-yellow, #fbf3db);
        color: var(--notion-text-yellow, #dfab01);
      }

      .status-badge.hidden {
        background: var(--notion-bg-gray, #f7f6f3);
        color: var(--notion-text-gray, #9b9a97);
      }

      /* 미니멀 디자인 */
      * {
        box-shadow: none !important;
      }

      *:hover,
      *:focus,
      *:active {
        box-shadow: none !important;
      }

      *:hover {
        transform: none !important;
      }

      /* ===============================================
         테이블 컨테이너 - 노션 스타일
         =============================================== */
      .table-container {
        border: 1px solid var(--notion-border-default, #e9e9e7) !important;
        border-radius: var(--notion-radius-lg, 8px);
        overflow-x: auto;
        overflow-y: visible;
        position: relative !important;
        z-index: 1 !important;
      }

      /* 테이블 헤더 배경 제거 - 노션 스타일 */
      .table-container .data-table thead {
        background: transparent !important;
        background-color: transparent !important;
      }

      .table-container .data-table th {
        background: transparent !important;
        background-color: transparent !important;
        color: var(--notion-text-gray, #9b9a97);
        font-weight: var(--notion-font-medium, 500);
        font-size: var(--notion-text-sm, 13px);
        border-bottom: 1px solid var(--notion-border-light, #f1f1ef);
      }

      .table-actions {
        z-index: 1 !important;
        position: relative !important;
      }

      .btn-icon {
        z-index: 1 !important;
        position: relative !important;
      }

      /* 테이블과 드롭다운 z-index 강화 */
      .data-table {
        position: relative !important;
        z-index: 1 !important;
        isolation: isolate !important;
      }

      .data-table tbody tr {
        position: relative !important;
      }

      .data-table tbody td {
        position: relative !important;
      }

      /* 폼 섹션 간격 조정 - 박스 없이 깔끔하게 */
      .form-section {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin-bottom: 24px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      .form-section:last-child {
        margin-bottom: 0;
      }

      /* 섹션 제목 간격 조정 */
      .form-section .section-title {
        margin-bottom: 12px;
        padding-bottom: 0;
        border-bottom: none;
      }

      /* 폼 행 정렬 */
      .form-row {
        display: flex;
        gap: 16px;
        align-items: flex-end;
        margin-top: 0px;
      }

      .form-row .form-group {
        flex: 1;
        margin-top: 0;
      }

      /* 날짜 구분자 */
      .date-separator {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 500;
        color: #666;
        padding: 0 8px;
        height: 40px;
        line-height: 40px;
      }

      .form-row .form-group label {
        display: block;
        margin-bottom: 8px;
      }

      /* 에디터 라벨과 툴바 사이 간격 제거 */
      .form-group.full-width label + .editor-toolbar {
        margin-top: 0;
      }

      .form-row .form-group input {
        width: 100%;
      }

      /* Tiptap 스타일 에디터 - Notion 스타일 */
      .tiptap-wrapper {
        border: 1px solid var(--notion-border-default, #e5e7eb);
        border-radius: 6px;
        background: var(--notion-bg-default, #ffffff);
        overflow: hidden;
        transition: border-color 0.15s ease;
      }

      .tiptap-wrapper:focus-within {
        border-color: var(--notion-text-blue, #0b6e99);
      }

      .tiptap-toolbar {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 4px;
        background: var(--notion-bg-gray, #f7f6f3);
        border: none;
        border-bottom: 1px solid var(--notion-border-default, #e5e7eb);
        flex-wrap: wrap;
      }

      .tiptap-btn {
        background: transparent;
        border: none;
        border-radius: 4px;
        padding: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        transition: background-color 0.15s ease;
        color: var(--notion-text-gray, #9b9a97);
      }

      .tiptap-btn:hover {
        background: var(--notion-bg-default, #ffffff);
        color: var(--notion-text-default, #37352f);
      }

      .tiptap-btn.active {
        background: var(--notion-bg-blue, #e7f3f8);
        color: var(--notion-text-blue, #0b6e99);
      }

      .tiptap-btn svg {
        display: block;
      }

      .tiptap-btn-text {
        min-width: 36px;
        padding: 6px 8px;
      }

      .tiptap-btn-text span {
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        color: inherit;
      }

      .tiptap-divider {
        width: 1px;
        height: 20px;
        background: var(--notion-border-default, #e5e7eb);
        margin: 0 4px;
      }

      .tiptap-editor {
        min-height: 300px;
        padding: 16px;
        border: none !important;
        border-top: none !important;
        background: var(--notion-bg-default, #ffffff);
        font-size: 16px;
        line-height: 1.75;
        outline: none !important;
        overflow-y: auto;
        word-wrap: break-word;
        box-shadow: none !important;
        color: var(--notion-text-default, #37352f);
      }

      .tiptap-editor:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      .tiptap-editor:empty:before {
        content: attr(data-placeholder);
        color: var(--notion-text-gray, #9b9a97);
        pointer-events: none;
      }

      /* Tiptap 에디터 내 콘텐츠 스타일 */
      .tiptap-editor h1,
      .tiptap-editor h2,
      .tiptap-editor h3,
      .tiptap-editor h4,
      .tiptap-editor h5,
      .tiptap-editor h6 {
        font-weight: 700;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        line-height: 1.3;
      }

      .tiptap-editor h1 {
        font-size: 2em;
      }

      .tiptap-editor h2 {
        font-size: 1.5em;
      }

      .tiptap-editor h3 {
        font-size: 1.25em;
      }

      .tiptap-editor p {
        margin: 1em 0;
      }

      .tiptap-editor ul,
      .tiptap-editor ol {
        margin: 1em 0;
        padding-left: 1.5em;
      }

      .tiptap-editor li {
        margin: 0.5em 0;
      }

      .tiptap-editor > *:first-child {
        margin-top: 0;
      }

      .tiptap-editor > *:last-child {
        margin-bottom: 0;
      }

      .tiptap-editor a {
        color: var(--notion-text-blue, #0b6e99);
        text-decoration: underline;
        cursor: pointer;
      }

      .tiptap-editor a:hover {
        opacity: 0.8;
      }

      .tiptap-editor code {
        background: var(--notion-bg-gray, #f7f6f3);
        color: var(--notion-text-red, #e03e3e);
        padding: 0.2em 0.4em;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 0.9em;
      }

      .tiptap-editor pre {
        background: var(--notion-bg-gray, #f7f6f3);
        color: var(--notion-text-default, #37352f);
        padding: 1em;
        border-radius: 6px;
        overflow-x: auto;
        margin: 1em 0;
        border: 1px solid var(--notion-border-default, #e5e7eb);
      }

      .tiptap-editor pre code {
        background: transparent;
        color: inherit;
        padding: 0;
        font-size: 0.875em;
        line-height: 1.7;
      }

      .tiptap-editor blockquote {
        border-left: 3px solid var(--notion-border-default, #e5e7eb);
        padding-left: 1em;
        margin: 1em 0;
        color: var(--notion-text-gray, #9b9a97);
        font-style: italic;
      }

      .tiptap-editor hr {
        border: none;
        border-top: 2px solid var(--notion-border-default, #e5e7eb);
        margin: 2em 0;
      }

      .tiptap-editor strong {
        font-weight: 700;
      }

      .tiptap-editor em {
        font-style: italic;
      }

      .tiptap-editor s {
        text-decoration: line-through;
      }

      /* Highlight (형광펜) 스타일 */
      .tiptap-editor mark {
        padding: 0.1em 0.2em;
        border-radius: 2px;
      }

      /* Color picker palette - Notion 스타일 */
      .color-picker-palette {
        position: absolute;
        display: flex;
        gap: 6px;
        padding: 8px;
        background: var(--notion-bg-default, #ffffff);
        border: 1px solid var(--notion-border-default, #e5e7eb);
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        z-index: 1000;
        margin-top: 4px;
      }

      .color-option {
        width: 24px;
        height: 24px;
        border: 2px solid var(--notion-border-default, #e5e7eb);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s ease;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .color-option:hover {
        border-color: var(--notion-text-gray, #9b9a97);
        transform: scale(1.1) !important;
      }

      .color-option.color-remove {
        background: var(--notion-bg-default, #ffffff);
      }

      .color-option.color-remove svg {
        display: block;
      }

      /* Font size palette - Notion 스타일 */
      .font-size-palette {
        position: absolute;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 8px;
        background: var(--notion-bg-default, #ffffff);
        border: 1px solid var(--notion-border-default, #e5e7eb);
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        z-index: 1000;
        margin-top: 4px;
        min-width: 180px;
      }

      .font-size-option {
        width: 32px;
        height: 28px;
        border: 1px solid var(--notion-border-default, #e5e7eb);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s ease;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--notion-bg-default, #ffffff);
        font-size: 12px;
        font-weight: 500;
        color: var(--notion-text-default, #37352f);
      }

      .font-size-option:hover {
        background: var(--notion-bg-gray, #f7f6f3);
        border-color: var(--notion-text-gray, #9b9a97);
      }

      .font-size-option:active {
        background: var(--notion-bg-blue, #e7f3f8);
      }

      /* Task List 스타일 */
      .tiptap-editor ul[data-type="taskList"] {
        list-style: none;
        padding-left: 0;
      }

      .tiptap-editor ul[data-type="taskList"] li[data-type="taskItem"] {
        display: flex;
        align-items: flex-start;
        gap: 0.5em;
        margin: 0.5em 0;
      }

      .tiptap-editor ul[data-type="taskList"] li[data-type="taskItem"] label {
        display: flex;
        align-items: flex-start;
        gap: 0.5em;
        flex: 1;
        cursor: pointer;
      }

      .tiptap-editor ul[data-type="taskList"] li[data-type="taskItem"] input[type="checkbox"] {
        margin-top: 0.25em;
        cursor: pointer;
        flex-shrink: 0;
      }

      .tiptap-editor ul[data-type="taskList"] li[data-type="taskItem"][data-checked="true"] > label > span {
        text-decoration: line-through;
        color: var(--notion-text-gray, #9b9a97);
      }

      .tiptap-editor ul[data-type="taskList"] li[data-type="taskItem"] > label > span {
        flex: 1;
      }

      /* 폼 그룹 간격 조정 */
      .form-group + .form-group {
        margin-top: 20px;
      }

      .form-section .form-group.full-width + .form-group.full-width {
        margin-top: 16px;
      }

      /* 데스크탑 최대 화면 활용 */
      @media (min-width: 1024px) {
        .table-container {
          max-width: none !important;
          width: 100% !important;
        }

        .data-table {
          max-width: none !important;
          width: 100% !important;
          table-layout: auto !important;
        }

        .page-content {
          max-width: none !important;
          width: 100% !important;
        }

        .action-bar {
          max-width: none !important;
          width: 100% !important;
        }
      }
    

      

      /* syncle 로고에 monospace 폰트 적용 */
      .sidebar-brand h1,
      .sidebar-brand h1 a {
        
        font-weight: 700;
        letter-spacing: 0.5px;
      }

      /* 영어 텍스트에만 monospace 폰트 적용 */
      
      /* New chat 버튼 */
      .new-chat-btn span {
        
        font-weight: 600;
        letter-spacing: 0.3px;
      }

      /* Menu 헤더 */
      .nav-section-header {
        
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
      }

      /* Profile 헤더 */
      .profile-section .profile-header {
        
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
      }

      /* Log out 버튼 */
      .logout-section .logout-btn span {
        
        font-weight: 600;
        letter-spacing: 0.5px;
      }

      /* Excel 버튼의 영어 텍스트 */
      .btn:has(i.fa-download) {
        
        font-weight: 600;
        letter-spacing: 0.3px;
      }