/* ===== 툴바 스타일 ===== */
.swatch{ 
  width:30px; 
  height:30px; 
  border-radius:8px; 
  border:1px solid #e5e7eb; 
  cursor:pointer; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center 
}

/* 무료/프리미엄 팔레트 시각 구분 */
.swatch.swatch-premium { position: relative; }
.swatch.swatch-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0 6px, rgba(0,0,0,0.0) 6px 12px);
  pointer-events: none;
}

/* Premium users: show normal swatches (no stripes) */
:root.premium-active .swatch.swatch-premium::after {
  content: none;
  background: none;
}

.highlight-option {
  position: relative;
  overflow: hidden;
}

.highlight-option.premium-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,0.02) 0 6px, rgba(0,0,0,0.0) 6px 12px);
  pointer-events: none;
}

/* Premium users: normal highlight color icons (no stripes) */
:root.premium-active .highlight-option.premium-highlight::after {
  content: none;
  background: none;
}

.swatch-outline{ 
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

/* X 아이콘 상자 스타일 - 색상 팔레트와 동일한 크기 */
.swatch-outline {
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  background: #ffffff !important;
  /* 색상 팔레트와 동일한 크기 (30px x 30px) */
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  /* 완벽한 중앙 정렬을 위한 추가 설정 */
  position: relative !important;
}

/* X 아이콘 SVG 스타일 - 완벽한 정중앙 정렬 */
.swatch-outline svg {
  width: 14px;
  height: 14px;
  display: block;
  /* 완벽한 중앙 정렬 */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* ===== 모바일 툴바 스타일 ===== */
@media (max-width: 767px) {
  #editorToolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* 아이콘 사이 간격을 0.5rem에서 0.25rem로 줄임 */
    padding: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    white-space: nowrap;
      /* 툴바 너비 고정을 방지하여 동적 요소 추가 시 확대 방지 */
  width: 100%;
  max-width: 100vw;
  }
  
  #editorToolbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  
  #editorToolbar > * {
    flex-shrink: 0;
    display: inline-block;
  }
  
  /* 하이라이트 미리보기 요소의 최대 너비 제한 */
  #highlightPreview {
    max-width: 30px;
    /* 미리보기 요소가 동적으로 추가될 때 레이아웃 변화를 최소화 */
    transition: all 0.2s ease;
  }
  
  /* 드롭다운이 툴바 위에 표시되도록 z-index 조정 */
  #editorToolbar .relative {
    position: relative;
    z-index: 50;
  }
  
  #editorToolbar .absolute {
    z-index: 200 !important;
  }
}

/* ===== 드롭다운 스타일 프리뷰 ===== */
.style-preview {
  width: 100%;
  height: 4px;
  margin: 2px 0;
  border-radius: 1px;
}

.style-preview.solid { 
  border-bottom: 2px solid; 
}

.style-preview.dashed { 
  border-bottom: 2px dashed; /* 2px 두께 */
  border-image: repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 8px) 1; /* 4px 점선 + 4px 빈칸 */
}

.style-preview.wavy { 
  border-bottom: 2px wavy; 
}

/* ===== 물결 모양 SVG 스타일 ===== */
button[data-style="wavy"] svg {
  display: block;
  /* SVG 자체에서 크기 조절하므로 CSS 크기 조절 제거 */
}

button[data-style="wavy"] svg path {
  fill: none;
  /* stroke-width는 SVG에서 직접 설정 */
}

/* ===== 강조 스타일 ===== */
.underline-strong{ 
  text-decoration: underline; 
  text-decoration-thickness: 3px; 
  text-decoration-color: rgba(55,65,81,.4); 
  text-underline-offset: 2px; 
}

/* ===== 전체 페이지 가로 스크롤 방지 ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* ===== 팝오버 메뉴 가로 스크롤 ===== */
/* 팝오버 컨테이너 레이아웃 안정화 */
#palette,
#highlightPopover,
#underlinePopover,
#strikePopover,
#fontSizePopover,
#alignPopover,
#kaomojiPopover {
  position: relative;
  z-index: 10;
  /* 레이아웃 안정화 */
  contain: layout style paint;
  will-change: auto;
  /* 팝오버 최대 너비 제한으로 전체 가로 스크롤 방지 */
  max-width: 100vw !important;
  box-sizing: border-box !important;
  /* 데스크톱에서 팝오버 너비를 본문 박스에 맞춤 */
  width: auto !important;
  left: 0 !important;
  right: 0 !important;
}
/* 색상 팔레트 가로 스크롤 */
#textPalette,
#bgPalette {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* 화면 전체 스크롤 방지 */
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  /* 터치 액션 제한 */
  touch-action: pan-x !important;
  /* 스크롤 체이닝 방지 */
  scroll-behavior: auto !important;
  /* 다른 팝오버와 동일한 여백 유지 */
  padding: 0;
  margin: 0;
}

/* 글자 색상 팔레트 하단 여백 */
#textPalette {
  margin-bottom: 0.75rem !important;
}

/* 배경 색상 팔레트 하단 여백 */
#bgPalette {
  margin-bottom: 0.75rem !important;
}

/* 색상 팔레트 제목 여백 조정 - 다른 팝오버와 동일하게 */
#palette .text-xs {
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
}

/* 배경색상 제목 여백 - 글자 색상과 동일하게 */
#palette .text-xs:last-of-type {
  margin-top: 0 !important;
}



#textPalette::-webkit-scrollbar,
#bgPalette::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 하이라이트 옵션 가로 스크롤 */
#highlightPopover .grid,
#highlightDropdown .grid {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* 화면 전체 스크롤 방지 */
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  /* 터치 액션 제한 */
  touch-action: pan-x !important;
  /* 스크롤 체이닝 방지 */
  scroll-behavior: auto !important;
}

/* 밑줄/취소선 색상 팔레트 가로 스크롤 */
#underlineColorPalette,
#strikeColorPalette {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* 화면 전체 스크롤 방지 */
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  /* 터치 액션 제한 */
  touch-action: pan-x !important;
  /* 스크롤 체이닝 방지 */
  scroll-behavior: auto !important;
}

/* Kaomoji rows: horizontal scroll on overflow (mobile-friendly) */
#kaomojiPopover .kaomoji-row {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100% !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  touch-action: pan-x !important;
  scroll-behavior: auto !important;
}

#kaomojiPopover .kaomoji-row::-webkit-scrollbar { display: none; }

/* Prevent children from shrinking so rows can overflow horizontally */
#kaomojiPopover .kaomoji-row .kaomoji-option {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: max-content; /* 버튼이 내용 너비만큼 확장되어 실제 가로 오버플로우 발생 */
}

#kaomojiPopover .kaomoji-row .kaomoji-option .k {
  white-space: nowrap; /* 내부 텍스트 줄바꿈 방지 */
}

/* ===== Desktop layout for many kaomoji =====
   - On wide screens, wrap items to new lines and allow vertical scroll
   - Keep mobile (narrow) behavior: horizontal scroll per row */
@media (min-width: 1024px) {
  #kaomojiPopover {
    max-height: min(60vh, 520px);
    overflow-y: auto;
  }
  #kaomojiPopover .kaomoji-row {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
  #kaomojiPopover .kaomoji-row .kaomoji-option {
    min-width: auto; /* allow wrapping on desktop */
  }
}

#highlightPopover .grid::-webkit-scrollbar,
#highlightDropdown .grid::-webkit-scrollbar,
#underlineColorPalette::-webkit-scrollbar,
#strikeColorPalette::-webkit-scrollbar {
  display: none;
}

/* 밑줄 스타일 옵션 가로 스크롤 */
#underlinePopover .grid,
#underlineDropdown .grid {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* 화면 전체 스크롤 방지 */
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  /* 터치 액션 제한 */
  touch-action: pan-x !important;
  /* 스크롤 체이닝 방지 */
  scroll-behavior: auto !important;
}

#underlinePopover .grid::-webkit-scrollbar,
#underlineDropdown .grid::-webkit-scrollbar {
  display: none;
}

/* 취소선 스타일 옵션 가로 스크롤 */
#strikePopover .grid,
#strikeDropdown .grid {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* 화면 전체 스크롤 방지 */
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  /* 터치 액션 제한 */
  touch-action: pan-x !important;
  /* 스크롤 체이닝 방지 */
  scroll-behavior: auto !important;
}

#strikePopover .grid::-webkit-scrollbar,
#strikeDropdown .grid::-webkit-scrollbar {
  display: none;
}

/* 글자 크기 옵션 가로 스크롤 */
#fontSizePopover .grid,
#fontSizeDropdown .grid {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* 화면 전체 스크롤 방지 */
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  /* 터치 액션 제한 */
  touch-action: pan-x !important;
  /* 스크롤 체이닝 방지 */
  scroll-behavior: auto !important;
}

#fontSizePopover .grid::-webkit-scrollbar,
#fontSizeDropdown .grid::-webkit-scrollbar {
  display: none;
}

/* 정렬 옵션 가로 스크롤 */
#alignPopover .grid,
#alignDropdown .grid {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* 화면 전체 스크롤 방지 */
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  /* 터치 액션 제한 */
  touch-action: pan-x !important;
  /* 스크롤 체이닝 방지 */
  scroll-behavior: auto !important;
}

#alignPopover .grid::-webkit-scrollbar,
#alignDropdown .grid::-webkit-scrollbar {
  display: none;
}

/* 팝오버 내부 요소들이 줄바꿈되지 않도록 설정 */
#textPalette > *,
#bgPalette > *,
#highlightPopover .grid > *,
#underlinePopover .grid > *,
#strikePopover .grid > *,
#fontSizePopover .grid > *,
#alignPopover .grid > * {
  display: inline-block !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: fit-content;
}

/* 모바일에서 팝오버 메뉴 가로 스크롤 강화 */
@media (max-width: 767px) {
  /* 모바일에서 팝오버 전체 컨테이너 너비 - 툴바와 동일하게 */
  #palette,
  #highlightPopover,
  #underlinePopover,
  #strikePopover,
  #fontSizePopover,
  #alignPopover {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    /* 툴바와 동일한 패딩 적용 */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  #textPalette,
  #bgPalette,
  #highlightPopover .grid,
  #underlinePopover .grid,
  #strikePopover .grid,
  #fontSizePopover .grid,
  #alignPopover .grid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    /* 화면 전체 스크롤 방지 */
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: none !important;
    /* 터치 액션 제한 */
    touch-action: pan-x !important;
    /* 스크롤 체이닝 방지 */
    scroll-behavior: auto !important;
  }
  
  /* 모바일에서 팝오버 내부 요소 강제 인라인 */
  #textPalette > *,
  #bgPalette > *,
  #highlightPopover .grid > *,
  #underlinePopover .grid > *,
  #strikePopover .grid > *,
  #fontSizePopover .grid > *,
  #alignPopover .grid > * {
    display: inline-block !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
    margin-right: 0.25rem !important;
  }
  
  /* 색상 팔레트 특별 처리 - 모바일에서 여백 조정 */
  #textPalette {
    padding: 0 !important;
    margin-bottom: 0.75rem !important; /* 글자색상 팔레트 하단 여백 추가 */
  }
  
  #bgPalette {
    padding: 0 !important;
    margin: 0 !important; /* 배경색상 팔레트 여백 제거 */
  }
  
  /* 배경색상 제목 상단 여백 추가 */
  #palette .text-xs:last-of-type {
    margin-top: 0.5rem !important; /* 배경색상 제목 상단 여백 추가 */
  }
}

.strike-strong{ 
  text-decoration: line-through; 
  text-decoration-thickness: 3px; 
  text-decoration-color: rgba(55,65,81,.4); 
}

/* ===== 정렬 버튼 스타일 ===== */
#alignBtn {
  width: auto;
  min-width: 30px;
  padding: 0 8px;
}

#alignBtn:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

#alignBtn:active {
  background-color: #e5e7eb;
}

/* ===== 마지막 편집 정보 스타일링 ===== */
.last-edited-text {
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 85%;
  background-image: linear-gradient(rgba(134, 239, 172, 0.3), rgba(134, 239, 172, 0.3));
}

/* ===== 생성 정보 스타일링 ===== */
.created-text {
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 85%;
  background-image: linear-gradient(rgba(134, 239, 172, 0.1), rgba(134, 239, 172, 0.1));
}

/* ===== 스타일 아이콘 프리뷰 SVG 스타일 ===== */
#styleUnderlinePreview svg,
#styleStrikePreview svg {
  width: 100%;
  height: 8px;
  display: block;
  position: absolute;
}

#styleUnderlinePreview svg {
  bottom: 0;
}

#styleStrikePreview svg {
  top: 50%;
  transform: translateY(-50%);
}

#styleUnderlinePreview svg path,
#styleStrikePreview svg path {
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== 툴바 호버 효과 커스터마이징 ===== */
/* 부드러운 모션 기본값 */
#editorToolbar button,
#editorToolbar div[class*="hover:bg-gray"],
#editorToolbar .p-2.rounded-md {
  transition: transform 140ms ease, background-color 150ms ease, border-color 150ms ease;
}

/* 가벼운 떠오름 효과 */
#editorToolbar button:hover,
#editorToolbar div[class*="hover:bg-gray"]:hover,
#editorToolbar .p-2.rounded-md:hover {
  /* PC에서 아이콘 흐릿함 방지를 위해 스케일을 제거하고 이동만 적용 */
  transform: translateY(-1px);
}

@keyframes toolbarSelectedBump {
  0% { transform: translateY(0) scale(1.0); }
  40% { transform: translateY(-2px) scale(1.04); }
  100% { transform: translateY(0) scale(1.0); }
}

/* 선택(토글 활성) 시 약한 바운스 */
.toolbar-btn-selected {
  animation: toolbarSelectedBump 220ms ease-out;
}

/* 메인 툴바 버튼들의 호버 효과 */
#editorToolbar button:hover,
#editorToolbar div[class*="hover:bg-gray"]:hover,
#editorToolbar .p-2.rounded-md:hover {
  background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
  border-color: #dcfce7 !important;
}

/* 드롭다운 옵션 버튼들의 호버 효과 */
.highlight-option:hover,
.underline-option:hover,
.strike-option:hover,
.font-size-option:hover,
.align-option:hover,
#styleCloneBtn:hover,
#styleDeleteBtn:hover,
#styleApplyBtn:hover {
  background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
  border-color: #dcfce7 !important;
}

/* 사이드바 버튼들의 호버 효과 (특정 버튼 제외) */
#sidebar button:hover:not(#newNoteBtn):not(#sidebarGoogleSignIn),
#sidebar div[class*="hover:bg-gray"]:hover {
  background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
}

/* 헤더 버튼들의 호버 효과 */
header button:hover,
header div[class*="hover:bg-gray"]:hover {
  background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
}

/* 정렬 버튼 특별 스타일 */
#alignBtn:hover {
  background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
  border-color: #dcfce7 !important;
}

/* 동기화 버튼 호버 효과 */
#syncNow:hover {
  background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
  border-color: #dcfce7 !important;
}

/* ===== 모바일 터치 효과 (호버 대신 active/focus) ===== */
@media (max-width: 767px) {
  /* 모바일에서 터치 시 옅은 녹색 효과 */
  #editorToolbar button:active,
  #editorToolbar button:focus,
  #editorToolbar div[class*="hover:bg-gray"]:active,
  #editorToolbar div[class*="hover:bg-gray"]:focus {
    background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
    border-color: #dcfce7 !important;
  }
  
  /* 드롭다운 옵션들 모바일 터치 효과 */
  .highlight-option:active,
  .underline-option:active,
  .strike-option:active,
  .font-size-option:active,
  .align-option:active,
  #styleCloneBtn:active,
  #styleDeleteBtn:active,
  #styleApplyBtn:active {
    background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
    border-color: #dcfce7 !important;
  }
  
  /* 사이드바와 헤더 버튼들 모바일 터치 효과 */
  #sidebar button:active:not(#newNoteBtn):not(#sidebarGoogleSignIn),
  #sidebar button:focus:not(#newNoteBtn):not(#sidebarGoogleSignIn),
  #sidebar div[class*="hover:bg-gray"]:active,
  #sidebar div[class*="hover:bg-gray"]:focus,
  header button:active,
  header button:focus,
  header div[class*="hover:bg-gray"]:active,
  header div[class*="hover:bg-gray"]:focus {
    background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
  }
  
  /* 정렬 버튼과 동기화 버튼 모바일 터치 효과 */
  #alignBtn:active,
  #alignBtn:focus,
  #syncNow:active,
  #syncNow:focus {
    background-color: #fafefb !important; /* 훨씬 더 옅은 녹색 */
    border-color: #dcfce7 !important;
  }
}

/* ===== 툴바 아이템 간격 세밀 조정 (PC + 모바일 공통) ===== */
/* 스타일 버튼과 팔레트 버튼 사이 간격 줄이기 - 모든 디바이스에서 작동 */
#editorToolbar > .relative:first-child + #paletteToggle {
  margin-left: -0.125rem !important;
}

#paletteToggle {
  margin-left: -0.125rem !important;
}

#paletteToggle + .relative {
  margin-left: -0.0625rem !important;
}

/* 더 강력한 선택자로 재시도 */
#editorToolbar > .relative:first-child + #paletteToggle {
  margin-left: -0.125rem !important;
}

/* Transform 방법도 추가 */
#paletteToggle {
  transform: translateX(-0.125rem) !important;
}

/* ===== 모바일 특별 처리 ===== */
@media (max-width: 767px) {
  /* 모바일에서 flex-wrap이 적용될 때도 작동하도록 */
  #editorToolbar #paletteToggle {
    margin-left: -0.125rem !important;
    transform: translateX(-0.125rem) !important;
  }
  
  /* 모바일에서 스타일 버튼 다음의 팔레트 버튼 특별 처리 */
  #editorToolbar > *:nth-child(1) + #paletteToggle {
    margin-left: -0.125rem !important;
  }
  
  /* 모바일에서 모든 아이콘 간격 조정 */
  #editorToolbar > * {
    margin-right: -0.0625rem !important;
  }
  
  /* 모바일에서 팔레트 버튼 특별 처리 */
  #editorToolbar button#paletteToggle {
    margin-left: -0.125rem !important;
    transform: translateX(-0.125rem) !important;
  }
}