/* ---- 웹폰트 ------------------------------------------------------- */
/* 프리텐다드 (관리자 글쓰기 에디터 선택 글꼴 1) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* 부크크 명조 (관리자 글쓰기 에디터 선택 글꼴 2) */
@font-face {
  font-family: 'BookkMyungjo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Lt.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'BookkMyungjo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* 제주명조 (로고/타이틀/푸터 전용 브랜드 서체 - 에디터 선택 목록에는 없음) */
@import url('//fonts.googleapis.com/earlyaccess/jejumyeongjo.css');

/* ---- 디자인 토큰 ---------------------------------------------------- */
:root {
  --green: #025e4d;
  --gray-800: #3c3c3c;
  --gray-700: #434343;
  --gray-600: #5d5d5d;
  --gray-500: #6c6c6c;
  --gray-450: #797979;
  --gray-400: #828282;
  --gray-350: #8e8e8e;
  --border-gray: #b2b2b2;
  --border-light: #d5d5d5;
  --placeholder-gray: #7c7c7c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  height: 100%;
}

#root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #ffffff;
  position: relative;
  overflow-x: hidden;
}

/* 헤더 높이 (고정 헤더에 가려지지 않도록 본문에 상단 여백으로 사용) */
:root { --header-h: 56px; }
.header-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
}
.header-offset { padding-top: var(--header-h); }

.font-brand { font-family: 'Jeju Myeongjo', serif; }

/* 스크롤바 숨김 (브런치 페이지네이션 스와이프용) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* placeholder 색상 통일 */
::placeholder { color: var(--placeholder-gray); opacity: 1; }

/* contentEditable 에디터 */
.editor-body { outline: none; color: #565656; }
.editor-body img, .editor-body video { max-width: 100%; border-radius: 6px; margin: 6px 0; display: block; }
.editor-body:empty:before {
  content: attr(data-placeholder);
  color: var(--gray-400);
  pointer-events: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap !important;
  flex-shrink: 0;
}
input, textarea, select { font-family: inherit; }

/* ---- 방명록 좁은 화면 대응 / 줄바꿈 유지 / 여백 --------------------------
   반응형을 고려해 여백은 고정 px 대신 rem(상대 단위)을 사용합니다.
   1) 위 button 규칙(white-space: nowrap !important, flex-shrink: 0)이
      삭제 버튼 글씨가 아주 좁은 화면에서 두 줄로 떨어지는 문제를 막아줍니다.
      !important를 붙인 이유: 다른 스타일/캐시 우선순위 때문에 안 먹는
      경우를 방지하기 위한 안전장치입니다.
   2) 방명록 글 내용은 일반 텍스트로 저장되어 줄바꿈이 <br> 없이 \n 문자로만
      들어있어서, 기본 white-space(normal)에서는 줄바꿈이 무시됩니다.
      pre-wrap으로 줄바꿈과 공백을 그대로 살리면서 자동 줄바꿈도 유지합니다.
   3) 등록글 내용 위/아래로만 여백(0.625rem ≈ 10px). 좌우/전체 박스에 패딩을
      주면 그만큼 가로 폭이 줄어들어 삭제 버튼이 카드 밖으로 밀려나는 문제가
      있어서 좌우 패딩은 넣지 않고 텍스트 위아래로만 적용합니다.
------------------------------------------------------------------------ */
p.text-\[13px\].my-1 {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* 삭제 버튼 이중 안전장치: 구조 기반으로 한 번 더 강하게 고정 */
.mt-4.space-y-4 > div .flex.gap-2 > button {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  margin-right: 1rem; /* 카드 자체 패딩(p-4 = 1rem)과 동일한 단위.
                          비밀번호 입력창(flex-1)이 그만큼 자동으로 줄어들어
                          삭제 버튼 오른쪽 바깥 여백이 왼쪽과 비슷해집니다 */
}

/* ---- 대화(퀴즈) 보기 텍스트: 전역 button nowrap 규칙을 여기서만 해제 -------
   삭제 버튼처럼 짧은 라벨은 nowrap이 필요하지만, 퀴즈 보기는 문장이 길고
   'intellectualization' 같은 긴 영단어도 섞여 있어 화면 밖으로 넘칠 수
   있습니다. 이 클래스에서만 줄바꿈을 허용하고 긴 단어는 강제로 끊습니다. */
.quiz-choice-btn {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}


/* 모달 오버레이 애니메이션 */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal-overlay { animation: fadeIn .15s ease-out; }

/* ---- 날짜 선택 캘린더 ------------------------------------------------ */
.calendar-card {
  background: linear-gradient(135deg, #f6cda0 0%, #f0a9a4 28%, #e7c7c9 45%, #cfe3d9 65%, #a9d6c9 85%, #8fd0c6 100%);
}
.calendar-day-dot {
  width: 4px; height: 4px; border-radius: 999px; background: currentColor;
  margin: 2px auto 0;
}

/* ---- 아고라(생각) 삭제 확인창의 어두운 비밀번호 입력창 ------------------- */
.agora-pw-dark-input::placeholder {
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0;
}
.agora-pw-dark-input {
  letter-spacing: 0;
}
.agora-pw-dark-input:focus {
  outline: none;
  box-shadow: none;
}

/* ---- 색상 피커 슬라이더 (색상/채도/명도) ---------------------------------
   트랙 색은 뒤에 깔린 그라디언트 div가 담당하고, <input type="range"> 자체는
   투명하게 만들어 손잡이(thumb)만 보이게 합니다. 네이티브 range 입력이라
   드래그 처리를 브라우저가 전담해서, 커스텀 터치 이벤트로 인한 인앱 브라우저
   호환성 문제가 없습니다. */
.gradation-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.gradation-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 100%;
}
.gradation-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3);
  margin-top: 0;
  cursor: pointer;
}
.gradation-range::-moz-range-track {
  background: transparent;
  height: 100%;
  border: none;
}
.gradation-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}

/* ---- 헤더 신규 게시글 알림 점 위치 -------------------------------------
   헤더 탭 버튼(h-14 = 56px, position:relative)을 기준으로, 점을 글자
   옆이 아니라 글자 오른쪽 위 모서리에 배지처럼 띄웁니다. 버튼 높이가
   고정값이라 스타일만으로 정확히 위치를 잡을 수 있습니다. */
[aria-label="새 글 있음"] {
  position: absolute !important;
  top: 15px;
  right: -13px;
  margin-left: 0 !important;
}