/* ===== 기본 스타일 ===== */
html, body {
  height: 100%;
  overflow: hidden; /* 페이지 전체 스크롤 방지 */
}

/* ===== 특정 UI 영역: 시스템 텍스트 스케일 무시 설정 ===== */
header,
nav,
#sidebar,
#mobileThinHeader,
#editorToolbar,
#tickerContainer,
#tickerContent {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#editorToolbar {
  /* 툴바 텍스트 크기 고정 */
  font-size: 14px;
}

/* ===== 제목 입력 스타일 ===== */
#noteTitle {
  transition: font-size 0.2s ease;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 한 줄로 표시하고 넘치면 ... */
}

/* PC에서 제목 최대 너비 제한 및 자동 크기 조절 */
@media (min-width: 768px) {
  #noteTitle {
    max-width: 930px;
    max-height: 3rem; /* 최대 두 줄 */
    overflow: hidden;
    word-wrap: break-word;
    white-space: nowrap; /* 한 줄로 표시 */
    line-height: 1.2;
    transition: font-size 0.2s ease;
    text-overflow: ellipsis;
  }
  
  /* PC에서 제목이 길어질 때 자동으로 글씨 크기 줄임 */
  #noteTitle[data-long="true"] {
    font-size: 1.125rem; /* 18px */
  }
  
  #noteTitle[data-very-long="true"] {
    font-size: 1rem; /* 16px */
  }
  
  #noteTitle[data-max-length="true"] {
    font-size: 0.875rem; /* 14px */
  }
}

/* 모바일에서 제목 자동 크기 조절 */
@media (max-width: 767px) {
  /* 헤더 크기 고정 */
  header {
    max-width: 100vw;
    overflow: hidden;
  }
  
  /* 제목 컨테이너 크기 제한 */
  #noteTitle {
    font-size: 1.25rem; /* 기본 크기 */
    min-height: 1.5rem;
    max-height: 1.5rem;
    max-width: calc(100vw - 120px); /* 헤더 버튼들 공간 제외 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  /* 제목이 길어질 때 자동으로 글씨 크기 줄임 */
  #noteTitle[data-long="true"] {
    font-size: 1rem;
  }
  
  #noteTitle[data-very-long="true"] {
    font-size: 0.875rem;
  }
  
  /* 제목이 최대 길이에 도달했을 때 */
  #noteTitle[data-max-length="true"] {
    font-size: 0.75rem;
  }
}

/* ===== 사이드바: 제목/폴더명 말줄임 처리 ===== */
#sidebar .folder-group .folder-name {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar .notes-list .note-title {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 현재 선택 노트 제목 하이라이트 (옅은 파스텔 녹색, 불투명도 40%, 글자 높이 대비 30%) */
.note-title-highlight {
  /* match sidebar New Note button (bg-green-300: #86efac) at 40% opacity */
  background-image: linear-gradient(rgba(134, 239, 172, 0.4), rgba(134, 239, 172, 0.4));
  background-size: 100% 30%;
  background-repeat: no-repeat;
  background-position: 0 85%;
}

@media (max-width: 768px) {
  #sidebar .folder-group .folder-name { max-width: 120px; }
  #sidebar .notes-list .note-title { max-width: 140px; }
}

/* ===== 사이드바 항목 호버 모션 (살짝 떠오름) ===== */
#sidebar .folder-group > .flex:hover,
#sidebar .notes-list > div:hover {
  transform: translateY(-1px);
}
#sidebar .folder-group > .flex,
#sidebar .notes-list > div {
  transition: transform 150ms ease;
}

/* ===== 사이드바 폴더 이름 변경 팝오버 ===== */
.folder-menu-popover {
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  overflow: hidden; /* 모바일에서 입력창이 넘치지 않도록 */
}

.folder-menu-popover .folder-rename-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 파란 포커스 링 대신 아주 옅은 회색(30%) */
.folder-menu-popover .folder-rename-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3); /* slate-400 @ 30% */
  border-color: #cbd5e1; /* slate-300 */
}
/* 폴더 메뉴 하단의 구형 삭제 버튼은 숨김 (상단 버튼만 사용) */
.folder-menu-popover .delete.w-full { display: none !important; }

/* 인라인 폴더 이름 입력(폴더 생성 직후) 포커스 스타일도 동일 적용 */
.folder-name-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3) !important;
  border-color: #cbd5e1 !important;
}

/* ===== 전역 텍스트 선택(블록) 색상: 더 옅은 그린 ===== */
::selection { background: rgba(134, 239, 172, 0.08); }
::-moz-selection { background: rgba(134, 239, 172, 0.08); }

/* 폴더 메뉴 삭제 버튼은 더 명확한 빨간색으로 */
.folder-menu-popover .delete.text-red-600 { color: #dc2626 !important; }

/* New Note / Google 로그인 버튼 호버: 색상 유지 + 살짝 떠오름 */
#newNoteBtn,
#sidebarGoogleSignIn {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
#newNoteBtn:hover,
#sidebarGoogleSignIn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* 색상은 유지 (흰색으로 변하지 않도록) */
#newNoteBtn:hover { background-color: #86efac !important; color: #ffffff !important; }
#sidebarGoogleSignIn:hover { background-color: #22c55e !important; color: #ffffff !important; }

/* 모바일: 터치(active/focus) 시에도 색상 유지 + 살짝 떠오름 */
@media (max-width: 767px) {
  #newNoteBtn:active,
  #newNoteBtn:focus {
    background-color: #86efac !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  #sidebarGoogleSignIn:active,
  #sidebarGoogleSignIn:focus {
    background-color: #22c55e !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
}

/* ===== Pretendard Variable 폰트 ===== */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* 폰트 패밀리 설정 */
:root {
  --font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 전역 폰트 설정 */
* {
  font-family: var(--font-family-primary) !important;
}

/* 폰트 로딩 중 깜빡임 방지 */
html {
  font-display: swap;
}

/* 폰트 강제 적용 */
html, body, div, span, p, h1, h2, h3, h4, h5, h6, button, input, textarea, select {
  font-family: var(--font-family-primary) !important;
}

/* ===== 텍스트 선택 영역 색상 ===== */
::selection {
  background-color: #dcfce7; /* 옅은 초록색 */
  color: #166534; /* 진한 초록색 텍스트 */
}

/* Firefox 지원 */
::-moz-selection {
  background-color: #dcfce7;
  color: #166534;
}

/* 에디터 내 텍스트 선택 색상 */
.ProseMirror ::selection {
  background-color: #dcfce7;
  color: #166534;
}

.ProseMirror ::-moz-selection {
  background-color: #dcfce7;
  color: #166534;
}

/* ===== 모바일 스크롤바 숨김 ===== */
@media (max-width: 768px) {
  /* Webkit 기반 브라우저 (Chrome, Safari, Edge) */
  #contentScroll::-webkit-scrollbar,
  #editor::-webkit-scrollbar {
    display: none;
  }
  
  /* Firefox */
  #contentScroll,
  #editor {
    scrollbar-width: none;
  }
  
  /* IE/Edge */
  #contentScroll,
  #editor {
    -ms-overflow-style: none;
  }
}

/* ===== PC 버전 스크롤바 커스터마이징 ===== */
@media (min-width: 769px) {
  /* PC에서 본문 영역을 flex로 설정하여 남은 공간 모두 사용 */
  #contentScroll {
    padding-top: 0 !important;
    flex: 1; /* 남은 공간 모두 사용 */
    overflow-y: auto; /* 세로 스크롤 활성화 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
    display: flex;
    flex-direction: column;
  }
  
  /* PC에서 에디터 컨테이너는 flex로 남은 공간 사용 */
  #editorContainer {
    flex: 1; /* 남은 공간 모두 사용 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 컨테이너 자체는 스크롤 없음 */
  }
  
  /* PC에서 에디터는 남은 공간을 모두 사용하고 내부 스크롤 */
  #editor {
    flex: 1; /* 남은 공간 모두 사용 */
    overflow-y: auto; /* 에디터 내부에서 스크롤 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
  }
  
  /* Webkit 기반 브라우저 (Chrome, Safari, Edge) */
  #contentScroll::-webkit-scrollbar,
  #editor::-webkit-scrollbar {
    width: 8px;
  }
  
  #contentScroll::-webkit-scrollbar-track,
  #editor::-webkit-scrollbar-track {
    background: transparent;
  }
  
  #contentScroll::-webkit-scrollbar-thumb,
  #editor::-webkit-scrollbar-thumb {
    background: #dcfce7; /* 아주 옅은 초록색 */
    border-radius: 4px;
    border: 1px solid #bbf7d0;
  }
  
  #contentScroll::-webkit-scrollbar-thumb:hover,
  #editor::-webkit-scrollbar-thumb:hover {
    background: #bbf7d0; /* 호버 시 약간 진한 초록색 */
  }
  
  /* 위아래 화살표 버튼 제거 */
  #contentScroll::-webkit-scrollbar-button,
  #editor::-webkit-scrollbar-button {
    display: none;
  }
  
  /* Firefox */
  #contentScroll,
  #editor {
    scrollbar-width: thin;
    scrollbar-color: #dcfce7 transparent;
  }
}

/* ===== 개발자 메시지 전광판 스타일 ===== */
#tickerContainer {
  position: relative;
  background: #fafefb; /* 훨씬 더 옅은 초록색 */
  border-bottom: none; /* 테두리 제거 */
  overflow: hidden;
  max-width: 950px;
  margin-left: 0; /* 왼쪽 정렬 */
  margin-bottom: 0 !important; /* 하단 여백 제거 */
  padding: 8px 0; /* 위아래 여백 추가 */
}

#tickerContent {
  animation: tickerScroll 30s linear infinite;
  display: flex;
  align-items: center;
  height: 24px;
  font-weight: 400;
  letter-spacing: 0.01em;
  /* 고정 텍스트 크기: 시스템 텍스트 스케일 영향 최소화 */
  font-size: 13px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 950px;
  margin-left: 0; /* 왼쪽 정렬 */
}

/* 기본 표시 방식 설정 */
#tickerContent {
  animation: tickerScroll 30s linear infinite;
}

/* 다양한 표시 방식 애니메이션 */
#tickerContent.scroll-mode {
  animation: tickerScroll 30s linear infinite;
}

#tickerContent.fade-mode {
  animation: tickerFade 12s ease-in-out infinite;
}

#tickerContent.bounce-mode {
  animation: tickerBounce 9s ease-in-out infinite;
}

#tickerContent.typewriter-mode {
  animation: tickerTypewriter 15s steps(50) infinite;
}

#tickerContent.slide-mode {
  animation: tickerSlide 18s ease-in-out infinite;
}

#tickerContent.wave-mode {
  animation: tickerWave 15s ease-in-out infinite;
}

#tickerContent.glow-mode {
  animation: tickerGlow 12s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
}

#tickerContent.rotate-mode {
  animation: tickerRotate 9s linear infinite;
}

#tickerContent.zoom-mode {
  animation: tickerZoom 12s ease-in-out infinite;
}

#tickerContent.flip-mode {
  animation: tickerFlip 9s ease-in-out infinite;
}

#tickerContent.shake-mode {
  animation: tickerShake 6s ease-in-out infinite;
}

#tickerContent.pulse-mode {
  animation: tickerPulse 4.5s ease-in-out infinite;
}

#tickerContent.rainbow-mode {
  animation: tickerRainbow 7.5s linear infinite;
}

#tickerContent.matrix-mode {
  animation: tickerMatrix 12s steps(20) infinite;
  font-family: 'Courier New', monospace;
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00;
}

#tickerContent.neon-mode {
  animation: tickerNeon 9s ease-in-out infinite;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
  color: #ff00ff;
}

#tickerContent.glitch-mode {
  animation: tickerGlitch 6s ease-in-out infinite;
}

#tickerContent.firework-mode {
  animation: tickerFirework 9s ease-in-out infinite;
}

#tickerContent.spiral-mode {
  animation: tickerSpiral 12s linear infinite;
}

#tickerContent.blur-mode {
  animation: tickerBlur 9s ease-in-out infinite;
}

/* 애니메이션 없음 모드 (고정 표시) */
#tickerContent.none-mode {
  animation: none !important;
  transform: none !important;
  display: flex;
  justify-content: flex-start; /* 왼쪽 정렬 */
  align-items: center;
  white-space: nowrap;         /* 긴 문구 가로로 이어붙임 */
  width: max-content;          /* 내용 너비만큼 확장 → 컨테이너에서 가로 스크롤 */
}

.ticker-content.none-mode {
  animation: none !important;
  transform: none !important;
  display: flex;
  justify-content: flex-start; /* 왼쪽 정렬 */
  align-items: center;
  white-space: nowrap;
  width: max-content;          /* 내용 너비만큼 확장 */
}

/* 드래그 스크롤 컨테이너 */
#tickerContainer.drag-scroll,
.ticker-container.drag-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
}

#tickerContainer.drag-scroll.drag-active,
.ticker-container.drag-scroll.drag-active {
  cursor: grabbing;
}

/* 전광판 텍스트 왼쪽 정렬 (모바일 포함 전역) */
#tickerContent,
.ticker-content {
  justify-content: flex-start;
}

/* 드래그 스크롤/none 모드에서 줄임표시 금지 + 전체 가로 확인 가능 */
#tickerContainer.drag-scroll .ticker-item,
.ticker-container.drag-scroll .ticker-item,
#tickerContent.none-mode .ticker-item,
.ticker-content.none-mode .ticker-item {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* PC 버전: 전광판 좌우 여백 + 왼쪽 정렬 유지 */
@media (min-width: 769px) {
  #tickerContainer,
  .ticker-container {
    /* 보이는 여백 */
    --ticker-edge-gap: 24px;
    /* 오른쪽 전용 여백 (지정 시 우선) */
    --ticker-edge-gap-right: var(--ticker-edge-gap);
    /* 기본 마스크값(좌/우 개별값의 폴백) */
    --ticker-edge-mask: 16px;
    /* 좌/우 개별 마스크 폭 */
    --ticker-edge-mask-left: 18px; /* 왼쪽 가림폭 2px 증가 */
    --ticker-edge-mask-right: 0px; /* 더 줄임: 0px */
    padding-left: var(--ticker-edge-gap);
    padding-right: var(--ticker-edge-gap-right);
    position: relative;
  }
  /* PC에서도 왼쪽 정렬 유지 */
  #tickerContent,
  .ticker-content {
    justify-content: flex-start;
  }

  /* PC: 에디터 컨테이너 내부 패딩을 2/3로 축소 (기존 md:p-10 ≈ 40px → 26px) */
  #editorContainer {
    padding: 26px !important;
  }

  /* PC: 전광판 좌우 끝 일부를 가려 텍스트가 끝까지 닿지 않게 처리 */
  #tickerContainer::before,
  #tickerContainer::after,
  .ticker-container::before,
  .ticker-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    background: #fafefb; /* 전광판 배경색과 동일 */
    pointer-events: none; /* 클릭 이벤트 통과 */
    z-index: 1;
  }
  #tickerContainer::before,
  .ticker-container::before {
    left: 0;
    /* 보이는 여백 + 왼쪽 마스크 */
    width: calc(var(--ticker-edge-gap, 24px) + var(--ticker-edge-mask-left, var(--ticker-edge-mask, 16px)));
  }
  #tickerContainer::after,
  .ticker-container::after {
    right: 0;
    /* 보이는 여백 + 오른쪽 마스크 */
    width: calc(var(--ticker-edge-gap-right, var(--ticker-edge-gap, 24px)) + var(--ticker-edge-mask-right, var(--ticker-edge-mask, 16px)));
  }
  /* 요청: 오른쪽을 7px 더 보이게 → 오른쪽 여백만 24px → 17px로 축소 */
  #tickerContainer,
  .ticker-container {
    --ticker-edge-gap-right: 17px;
  }
}

@keyframes tickerScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* 다양한 표시 방식 애니메이션 */
.ticker-content.scroll-mode {
  animation: tickerScroll 30s linear infinite;
}

.ticker-content.fade-mode {
  animation: tickerFade 12s ease-in-out infinite;
}

.ticker-content.bounce-mode {
  animation: tickerBounce 9s ease-in-out infinite;
}

.ticker-content.typewriter-mode {
  animation: tickerTypewriter 15s steps(50) infinite;
}

.ticker-content.slide-mode {
  animation: tickerSlide 18s ease-in-out infinite;
}

.ticker-content.wave-mode {
  animation: tickerWave 15s ease-in-out infinite;
}

.ticker-content.glow-mode {
  animation: tickerGlow 12s ease-in-out infinite;
}

.ticker-content.rotate-mode {
  animation: tickerRotate 9s linear infinite;
}

.ticker-content.zoom-mode {
  animation: tickerZoom 12s ease-in-out infinite;
}

.ticker-content.flip-mode {
  animation: tickerFlip 9s ease-in-out infinite;
}

.ticker-content.shake-mode {
  animation: tickerShake 6s ease-in-out infinite;
}

.ticker-content.pulse-mode {
  animation: tickerPulse 4.5s ease-in-out infinite;
}

.ticker-content.rainbow-mode {
  animation: tickerRainbow 7.5s linear infinite;
}

.ticker-content.matrix-mode {
  animation: tickerMatrix 12s steps(20) infinite;
  font-family: 'Courier New', monospace;
  color: #00ff00;
}

.ticker-content.neon-mode {
  animation: tickerNeon 9s ease-in-out infinite;
  color: #ff00ff;
}

.ticker-content.glitch-mode {
  animation: tickerGlitch 6s ease-in-out infinite;
}

.ticker-content.firework-mode {
  animation: tickerFirework 9s ease-in-out infinite;
}

.ticker-content.spiral-mode {
  animation: tickerSpiral 12s linear infinite;
}

.ticker-content.blur-mode {
  animation: tickerBlur 9s ease-in-out infinite;
}

/* 애니메이션 키프레임 */
@keyframes tickerFade {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  20%, 80% { opacity: 1; transform: scale(1); }
}

@keyframes tickerBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-10px) scale(1.05); }
  50% { transform: translateY(0) scale(1); }
  75% { transform: translateY(-5px) scale(1.02); }
}

@keyframes tickerTypewriter {
  0% { width: 0; overflow: hidden; }
  50% { width: 100%; overflow: hidden; }
  100% { width: 100%; overflow: visible; }
}

@keyframes tickerSlide {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes tickerWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes tickerGlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes tickerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes tickerZoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes tickerFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes tickerShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes tickerPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes tickerRainbow {
  0% { color: #ff0000; }
  16% { color: #ff8000; }
  33% { color: #ffff00; }
  50% { color: #00ff00; }
  66% { color: #0080ff; }
  83% { color: #8000ff; }
  100% { color: #ff0000; }
}

@keyframes tickerMatrix {
  0% { opacity: 0; transform: translateY(-20px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}

@keyframes tickerNeon {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes tickerGlitch {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

@keyframes tickerFirework {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes tickerSpiral {
  0% { transform: rotate(0deg) translateX(0); }
  100% { transform: rotate(360deg) translateX(50px); }
}

@keyframes tickerBlur {
  0%, 100% { filter: blur(0px); opacity: 1; }
  50% { filter: blur(2px); opacity: 0.7; }
}

.ticker-item {
  margin-right: 6rem;
  display: inline-block;
  white-space: nowrap;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  color: #64748b;
}

.ticker-item:hover {
  opacity: 0.9;
}

/* 전광판 일시정지 효과 */
#tickerContainer:hover #tickerContent {
  animation-play-state: paused;
}

/* 전광판 클릭 시 상호작용 (더 은은하게) */
#tickerContainer {
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 호버/드래그 시 배경색 변화 제거 */
#tickerContainer:hover {
  background: inherit;
}

/* 메시지 타입별 스타일 */
.ticker-item.dev-behind {
  color: #7c3aed;
  font-style: italic;
}

.ticker-item.user-tip {
  color: #059669;
}

.ticker-item.challenge {
  color: #dc2626;
  font-weight: 500;
}

.ticker-item.fun-fact {
  color: #ea580c;
}

.ticker-item.promotion {
  color: #0891b2;
  font-weight: 500;
}

/* 전광판 리치텍스트 스타일 (TipTap 에디터와 동일한 커스텀 서식) */

/* 기본 마크다운 스타일 */
.ticker-item strong {
  font-weight: 600;
  color: inherit;
}

.ticker-item em {
  font-style: italic;
  color: inherit;
}

.ticker-item u {
  text-decoration: underline;
  color: inherit;
}

/* 기본 u 태그와 커스텀 밑줄 스타일이 겹치지 않도록 설정 */
.ticker-item u[data-underline-styled] {
  text-decoration: none; /* 기본 밑줄 제거하여 커스텀 스타일만 적용 */
}

.ticker-item code {
  background-color: #f1f5f9;
  color: #0f172a;
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

/* 커스텀 밑줄 스타일 (underlineStyled) */
.ticker-item span[data-underline-styled] {
  text-decoration: none; /* 기본 밑줄 제거 */
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
  text-decoration-skip: none;
  word-break: break-word; /* 줄바꿈 시 밑줄 겹침 방지 */
  overflow-wrap: break-word; /* 긴 단어 줄바꿈 */
}

.ticker-item span[data-underline-styled][data-underline-style="wavy"] {
  text-decoration: underline wavy;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b899; /* 60% 불투명도 */
}

.ticker-item span[data-underline-styled][data-underline-style="dashed"] {
  text-decoration: underline dashed;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b899; /* 60% 불투명도 */
}

.ticker-item span[data-underline-styled][data-underline-style="dotted"] {
  text-decoration: underline dotted;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b899; /* 60% 불투명도 */
}

.ticker-item span[data-underline-styled][data-underline-style="double"] {
  text-decoration: underline double;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b899; /* 60% 불투명도 */
}

.ticker-item span[data-underline-styled][data-underline-style="solid"] {
  text-decoration: underline solid;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b899; /* 60% 불투명도 */
}

/* 커스텀 취소선 스타일 (strikeStyled) */
.ticker-item span[data-strike-styled][data-strike-style="wavy"] {
  text-decoration: line-through wavy;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b866; /* 40% 불투명도 */
}

/* Firefox에서 전광판 wavy 두께 보정 (조금 도톰하게 보이는 현상 완화) */
html.is-firefox .ticker-item span[data-underline-styled][data-underline-style="wavy"] {
  text-decoration-thickness: 2px;
}
html.is-firefox .ticker-item span[data-strike-styled][data-strike-style="wavy"] {
  text-decoration-thickness: 2px;
}
/* iOS Safari ticker adjustments */
html.is-ios-safari .ticker-item span[data-underline-styled][data-underline-style="wavy"],
html.is-ios-safari .ticker-item span[data-strike-styled][data-strike-style="wavy"] {
  text-decoration-thickness: 2.4px;
}

.ticker-item span[data-strike-styled][data-strike-style="dashed"] {
  text-decoration: line-through dashed;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b866; /* 40% 불투명도 */
}

.ticker-item span[data-strike-styled][data-strike-style="dotted"] {
  text-decoration: line-through dotted;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b866; /* 40% 불투명도 */
}

.ticker-item span[data-strike-styled][data-strike-style="solid"] {
  text-decoration: line-through solid;
  text-decoration-thickness: 3px;
  text-decoration-color: #94a3b866; /* 40% 불투명도 */
}

/* Firefox: also thin dashed/dotted */
html.is-firefox .ticker-item span[data-underline-styled][data-underline-style="dotted"],
html.is-firefox .ticker-item span[data-underline-styled][data-underline-style="dashed"],
html.is-firefox .ticker-item span[data-strike-styled][data-strike-style="dotted"],
html.is-firefox .ticker-item span[data-strike-styled][data-strike-style="dashed"] {
  text-decoration-thickness: 2px;
}
/* iOS Safari: slight thin for dashed/dotted */
html.is-ios-safari .ticker-item span[data-underline-styled][data-underline-style="dotted"],
html.is-ios-safari .ticker-item span[data-underline-styled][data-underline-style="dashed"],
html.is-ios-safari .ticker-item span[data-strike-styled][data-strike-style="dotted"],
html.is-ios-safari .ticker-item span[data-strike-styled][data-strike-style="dashed"] {
  text-decoration-thickness: 2.4px;
}

/* 소프트 하이라이트 (softHighlight) */
.ticker-item span[data-soft-highlight] {
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 85%;
  background-image: linear-gradient(var(--highlight-color, #86efac)66, var(--highlight-color, #86efac)66);
}

/* 동적 색상 적용 */
.ticker-item span[data-underline-color] {
  text-decoration-color: var(--underline-color, #94a3b899) !important;
}

.ticker-item span[data-strike-color] {
  text-decoration-color: var(--strike-color, #94a3b866) !important;
}

.ticker-item span[data-highlight-color] {
  --highlight-color: var(--highlight-color-value, #86efac);
}

/* 텍스트 색상 */
.ticker-item span[style*="color"] {
  font-weight: 500;
}

/* 모바일에서 전광판 높이 조정 */
@media (max-width: 768px) {
  /* 모바일에서 전체 텍스트 행간 설정 */
  body, html, * {
    line-height: 1.5 !important;
  }
  
  #tickerContainer {
    max-width: 100% !important; /* 모바일에서는 전체 너비 사용 */
    margin: 0 !important; /* PC의 margin: 0 auto를 덮어씀 */
    padding: 8px 16px 2px 16px; /* 하단 여백을 조금 추가하여 밑줄 잘림 방지 */
    width: 100%;
    flex-shrink: 0; /* 전광판이 줄어들지 않도록 */
    height: 36px; /* 살짝 높여서 물결밑줄 하단이 잘리지 않도록 */
    position: relative;
    z-index: 10; /* 본문 영역보다 위에 표시 */
    /* 수평만 클리핑, 수직은 장식선 표시를 위해 개방 */
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  /* none/drag 상태에서는 가로 스크롤 허용 (줄임표시 금지 + 드래그 확인) */
  #tickerContainer.drag-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  
  #tickerContent {
    height: 22px; /* 콘텐츠 높이도 소폭 증가 */
    font-size: 0.75rem;
    max-width: 100% !important; /* PC의 max-width: 1045px를 덮어씀 */
    margin: 0 !important; /* PC의 margin: 0 auto를 덮어씀 */
    /* 장식선이 잘리지 않게 수직은 보이도록 */
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  .ticker-item {
    margin-right: 3rem;
    white-space: nowrap;
    /* 물결밑줄 하단 여유 추가 (더 완화) */
    line-height: 1.3;
    padding-bottom: 3px;
  }

  /* 모바일에서 밑줄 위치를 약간 더 아래로(클리핑 여유) */
  .ticker-item span[data-underline-styled] {
    text-underline-offset: 3px;
  }
  
    /* 모바일에서 본문 영역 - PC와 동일하게 flex 사용 */
  #contentScroll {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding: 0 8px 16px 8px !important; /* 상단 0, 하단 16px, 좌우 8px 패딩 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    margin-top: 0 !important; /* 전광판과 완전히 붙임 */
  }

  /* 모바일에서 에디터 컨테이너 - 하단으로만 길어지게 */
  #editorContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: calc(100vw - 16px) !important; /* 화면 너비에서 좌우 패딩 제외 */
    max-width: calc(100vw - 16px) !important; /* 화면 너비에서 좌우 패딩 제외 */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    /* 가로 스크롤 방지 */
    overflow-x: hidden;
    overflow-y: visible; /* 세로는 부모 컨테이너가 스크롤 처리 */
    /* 에디터 컨테이너 패딩 조정 */
    padding: 16px !important; /* 모든 방향 16px 패딩 */
    margin-top: 0 !important; /* 전광판과 완전히 붙임 */
    margin-bottom: 16px !important; /* 하단 여백 추가 */
  }
  
  /* 키보드 여백을 하단으로만 밀어내기 */
  #editorContainer::after {
    content: '';
    margin-top: auto;
    height: var(--keyboard-padding, 340px);
    background: transparent;
    flex-shrink: 0;
  }

  /* 모바일에서 에디터 - PC와 동일하게 flex 사용 */
  #editor {
    flex: 1; /* 남은 공간 모두 사용 */
    overflow-y: auto; /* 에디터 내부에서 스크롤 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box;
  }

  /* 모바일 툴바 스페이서 숨기기 */
  #mobileToolbarSpacer {
    display: none !important;
  }
  
  /* 모바일에서 툴바 sticky 위치 조정 */
  #editorToolbar {
    position: sticky;
    top: 52px; /* 헤더 높이만큼 */
    z-index: 20;
    background: white; /* 배경색 추가로 겹침 방지 */
    border-bottom: 1px solid #e5e7eb; /* 구분선 추가 */
    padding: 0.75rem; /* 아이콘 상하 여백 복원 */
  }
}

/* 매우 작은 화면에서 패딩 더 줄이기 */
@media (max-width: 480px) {
  #contentScroll {
    padding: 0 4px 12px 4px !important; /* 상단 0, 하단 12px, 좌우 4px 패딩 */
  }
  
  #editorContainer {
    width: calc(100vw - 8px) !important; /* 화면 너비에서 좌우 패딩(4px*2) 제외 */
    max-width: calc(100vw - 8px) !important;
    padding: 12px !important; /* 모든 방향 12px 패딩 */
  }
}

/* 중간 크기 모바일 화면에서 패딩 조정 */
@media (min-width: 481px) and (max-width: 768px) {
  #contentScroll {
    padding: 0 12px 16px 12px !important; /* 상단 0, 하단 16px, 좌우 12px 패딩 */
  }
  
  #editorContainer {
    width: calc(100vw - 24px) !important; /* 화면 너비에서 좌우 패딩(12px*2) 제외 */
    max-width: calc(100vw - 24px) !important;
    padding: 16px !important; /* 모든 방향 16px 패딩 */
  }
}

/* ===== 모바일 키보드 처리 ===== */
@media (max-width: 768px) {
  /* 브라우저 자동 스크롤 방지 */
  html, body {
    overscroll-behavior: none; /* 브라우저 자동 스크롤 방지 */
    scroll-behavior: auto; /* 부드러운 스크롤 비활성화 */
  }
  
  /* 모바일에서 에디터 하단에 키보드 여백 추가 */
  #contentScroll {
    background: white !important; /* 하얀 배경 */
  }
  
  /* 키보드가 올라올 때 전체 레이아웃 조정 */
  .keyboard-open {
    /* 본문 영역을 키보드 높이만큼 위로 밀어올림 */
    #contentScroll {
      padding-bottom: calc(2rem + var(--keyboard-height, 0px)) !important;
      transform: translateY(calc(-1 * var(--keyboard-height, 0px))) !important;
      transition: transform 0.3s ease;
      overscroll-behavior: none; /* 추가 스크롤 방지 */
    }
    
    /* 에디터 컨테이너는 flex 유지하되 패딩만 조정 */
    #editorContainer {
      padding-bottom: 2rem !important;
    }
    
    /* 에디터는 flex 유지하되 패딩만 조정 */
    #editor {
      padding-bottom: 2rem !important;
    }
    
    /* 전광판 숨기기 */
    #tickerContainer {
      display: none !important;
    }
    
    /* 헤더 고정 */
    header {
      position: fixed !important;
      top: 0 !important;
      z-index: 50 !important;
    }
    
    /* 사이드바 숨기기 */
    #sidebar {
      transform: translateX(-100%) !important;
      transition: transform 0.3s ease;
    }
    
    /* 백드롭 숨기기 */
    #backdrop {
      display: none !important;
    }
    
    /* 에디터 포커스 표시 */
    #editor:focus {
      outline: 2px solid #10b981 !important;
      outline-offset: 2px !important;
    }
    
    /* 스크롤바 스타일 */
    #contentScroll::-webkit-scrollbar {
      width: 6px !important;
    }
    
    #contentScroll::-webkit-scrollbar-thumb {
      background: #10b981 !important;
      border-radius: 3px !important;
    }
    
    /* 하단고정바를 키보드 위에 표시 */
    #mobileBottomBar {
      bottom: var(--keyboard-height, 0px) !important;
      transition: bottom 0.3s ease;
    }
  }
}

/* ===== 모바일 얇은 헤더 스타일 ===== */
#mobileThinHeader {
  height: 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#mobileThinHeader .text-green-400 {
  filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3));
}

#mobileThinHeader #mobileTime {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

#mobileThinHeader .bg-green-400 {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 모바일 헤더가 있을 때 기존 헤더 위치 조정 */
@media (max-width: 768px) {
  header {
    top: 32px !important; /* 모바일 얇은 헤더 높이만큼 아래로 */
  }
  
  #editorToolbar {
    top: 84px !important; /* 모바일 얇은 헤더(32px) + 기존 헤더(52px) 높이 */
  }
}

/* PC에서는 헤더의 top 스타일 제거 */
@media (min-width: 769px) {
  header {
    top: 0 !important; /* PC에서는 최상단에 위치 */
  }
  
  #editorToolbar {
    top: auto !important; /* PC에서는 기본 위치 */
  }
}

/* ===== 모바일 하단고정바 스타일 ===== */
#mobileBottomBar {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 노트 드롭 위치 하이라이트 */
.note-drop-indicator {
  height: 2px;
  background: #10b981; /* emerald-500 */
  border-radius: 1px;
  margin: 2px 4px;
}

/* 폴더 메뉴 팝오버 등장 애니메이션 */
.folder-menu-popover {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease;
}
.folder-menu-popover.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 폴더 색상: 무료/프리미엄 시각 구분 */
.folder-menu-popover .color-grid button.is-premium {
  position: relative;
}
.folder-menu-popover .color-grid button.is-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0 4px, rgba(0,0,0,0.0) 4px 8px);
  pointer-events: none;
}

/* Premium users: show normal folder color swatches (no stripes) */
:root.premium-active .folder-menu-popover .color-grid button.is-premium::after {
  content: none;
  background: none;
}



/* 하단고정바가 있을 때 본문 영역 하단 여백 조정 */
@media (max-width: 768px) {
  /* 본문 영역에 하단고정바 높이만큼 여백 추가 */
  #contentScroll {
    padding-bottom: 16px !important; /* 기본 하단 패딩 */
    margin-bottom: 0 !important; /* 하단 여백 제거 */
  }
  
  /* 에디터 컨테이너는 여백 없이 */
  #editorContainer {
    margin-bottom: 0 !important;
  }
  
  /* 하단고정바 스타일 조정 */
  #mobileBottomBar {
    z-index: 40 !important; /* 다른 요소들보다 위에 표시 */
    background: rgba(255, 255, 255, 0.95) !important; /* 반투명 배경 */
    backdrop-filter: blur(10px) !important; /* 블러 효과 */
  }
  
  /* 점선 박스가 하단고정바에 가려지지 않도록 */
  #editorContainer {
    position: relative !important;
    z-index: 1 !important; /* 기본 z-index */
  }
}

/* ===== 모바일: 전체 페이지 메뉴 모드 ===== */
/* 햄버거 → 노션 스타일의 단일 페이지 메뉴 */
@media (max-width: 768px) {
  /* 열릴 때: translateX(-100%) → 0 으로 슬라이드 인 */
  body.mobile-menu-open #sidebar {
    transform: translateX(0) !important;
    transition: transform 0.3s ease !important;
    will-change: transform !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    z-index: 80 !important; /* 헤더 위에 */
    border-right: none !important;
  }

  /* 닫힐 때도 동일한 트랜지션 유지 (기본 클래스 -translate-x-full 과 함께 작동) */
  body:not(.mobile-menu-open) #sidebar {
    transition: transform 0.3s ease !important;
    will-change: transform !important;
  }

  body.mobile-menu-open main {
    display: none !important; /* 에디터 페이지를 숨김 */
  }

  body.mobile-menu-open #backdrop {
    display: none !important; /* 백드롭 미사용 */
  }

  body.mobile-menu-open #mobileThinHeader {
    display: none !important; /* 얇은 헤더 숨김 */
  }
}