/* 명륜세무회계 - 커스텀 스타일
   메인: 버건디 레드 #8B1A1A
   서브: 네이비 블루 #1A2A4A
   배경: 크림 화이트 #F5F0EB
   포인트: 골드 #C9A84C
   텍스트: 다크 그레이 #3D3D3D
*/

:root {
  --brand: #8B1A1A;
  --brand-dark: #6e1414;
  --brand-soft: #f6e9e9;
  --navy: #1A2A4A;
  --navy-dark: #101a30;
  --gold: #C9A84C;
  --gold-dark: #a88a35;
  --cream: #F5F0EB;
  --cream-soft: #fbf8f4;
  --ink: #3D3D3D;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* 헤더 높이만큼 앵커 스크롤 오프셋 */
section[id] {
  scroll-margin-top: 80px;
}

/* 부드러운 섹션 진입 애니메이션 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 폼 결과 메시지 */
#consult-result.success {
  color: var(--brand-dark);
  display: block;
}
#consult-result.error {
  color: #b91c1c;
  display: block;
}

/* 텍스트 선택 컬러 */
::selection {
  background: var(--brand);
  color: #fff;
}

/* 골드 그라데이션 텍스트(필요 시 .text-gold-gradient 사용) */
.text-gold-gradient {
  background: linear-gradient(135deg, #C9A84C 0%, #e6c878 50%, #a88a35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== 스크롤바 숨기기 (카테고리 탭용) ===== */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ===== line-clamp 유틸리티 (Tailwind CDN에 없을 수 있음) ===== */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ===== 칼럼 본문 타이포그래피 (.prose-column) ===== */
.prose-column {
  color: var(--ink);
  line-height: 1.8;
  font-size: 1rem;
}
.prose-column .lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(201, 168, 76, 0.3);
}
.prose-column h2 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--navy);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  padding-left: 0.75rem;
  border-left: 4px solid var(--brand);
}
.prose-column h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.prose-column p {
  margin-bottom: 1.25rem;
}
.prose-column ul {
  margin: 1rem 0 1.5rem 0;
  padding-left: 1.5rem;
  list-style: none;
}
.prose-column ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.prose-column ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.prose-column ol {
  margin: 1rem 0 1.5rem 0;
  padding-left: 1.5rem;
  list-style: decimal;
}
.prose-column ol li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}
.prose-column strong {
  font-weight: 700;
  color: var(--navy);
}
.prose-column blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background: var(--cream-soft);
  border-left: 4px solid var(--gold);
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--ink);
  font-size: 0.9rem;
}
.prose-column img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(201, 168, 76, 0.3);
}
.prose-column table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  border: 1px solid rgba(26, 42, 74, 0.15);
  border-radius: 0.5rem;
  overflow: hidden;
}
.prose-column table th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-align: left;
}
.prose-column table td {
  padding: 0.625rem 1rem;
  border-top: 1px solid rgba(26, 42, 74, 0.1);
}
.prose-column table tr:nth-child(even) td {
  background: var(--cream-soft);
}

/* ===== 관리자 페이지 본문 에디터 (.prose-admin) ===== */
.prose-admin {
  line-height: 1.7;
  font-size: 0.95rem;
}
.prose-admin:empty::before {
  content: '여기에 본문을 입력하세요...';
  color: var(--ink);
  opacity: 0.3;
}
.prose-admin h2 {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--navy);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.prose-admin h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.prose-admin p { margin-bottom: 1rem; }
.prose-admin ul { padding-left: 1.5rem; list-style: disc; margin: 0.5rem 0; }
.prose-admin ol { padding-left: 1.5rem; list-style: decimal; margin: 0.5rem 0; }
.prose-admin blockquote {
  padding: 0.75rem 1rem;
  background: #f0f0f0;
  border-left: 3px solid var(--gold);
  margin: 1rem 0;
}
.prose-admin img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }
.prose-admin table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose-admin table th, .prose-admin table td {
  border: 1px solid #ddd;
  padding: 0.5rem 0.75rem;
}

/* 관리자 포맷 툴바 버튼 */
.format-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(26, 42, 74, 0.15);
  background: white;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.format-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.format-btn:active {
  transform: scale(0.95);
}

/* 붙여넣은 이미지 Cloudinary 이동 상태 (에디터 전용) */
.prose-admin img[data-upload-state="uploading"] { opacity: 0.4; outline: 2px dashed #C9A84C; outline-offset: 2px; }
.prose-admin img[data-upload-state="failed"] { outline: 3px solid #dc2626; outline-offset: 2px; }

/* ===== 글자 크기 (글쓰기 툴바 '작게·보통·크게·아주 크게') =====
   본문 기본 크기의 고정 비율 → 크기를 겹쳐 걸어도 계속 커지지 않음, 글쓰기 화면과 칼럼 화면이 같은 비율 */
.prose-column { --fs-base: 1rem; }
.prose-admin { --fs-base: 0.95rem; }
.fs-sm { font-size: calc(var(--fs-base, 1rem) * 0.85); }
.fs-normal { font-size: var(--fs-base, 1rem); }
.fs-lg { font-size: calc(var(--fs-base, 1rem) * 1.25); }
.fs-xl { font-size: calc(var(--fs-base, 1rem) * 1.5); line-height: 1.5; }

/* ===== 네이버에서 가져온 서식: 형광펜 · 정렬 ===== */
.prose-column mark,
.prose-admin mark {
  background: #fff1a8;
  color: inherit;
  padding: 0 0.12em;
  border-radius: 2px;
}
.prose-column .align-center,
.prose-admin .align-center { text-align: center; }
.prose-column .align-right,
.prose-admin .align-right { text-align: right; }

/* ===== 글자색 안의 굵은 글씨는 그 색을 따름 =====
   (칼럼 본문의 굵은 글씨 기본색(네이비)이 네이버에서 가져온 빨강·파랑 등을 덮어쓰지 않도록) */
.prose-column [style^="color"] strong,
.prose-column [style*="; color"] strong,
.prose-column [style^="color"] b,
.prose-column [style*="; color"] b {
  color: inherit;
}

/* ===== 글자 크기 (네이버와 같은 숫자 11~38, 15 = 본문 기본) =====
   본문 기본 크기 기준 비율이라 글쓰기 화면과 칼럼 화면이 같은 비율, 겹쳐 걸어도 계속 커지지 않음 */
.fs-11 { font-size: calc(var(--fs-base, 1rem) * 11 / 15); }
.fs-13 { font-size: calc(var(--fs-base, 1rem) * 13 / 15); }
.fs-15 { font-size: var(--fs-base, 1rem); }
.fs-16 { font-size: calc(var(--fs-base, 1rem) * 16 / 15); }
.fs-19 { font-size: calc(var(--fs-base, 1rem) * 19 / 15); }
.fs-24 { font-size: calc(var(--fs-base, 1rem) * 24 / 15); line-height: 1.5; }
.fs-28 { font-size: calc(var(--fs-base, 1rem) * 28 / 15); line-height: 1.45; }
.fs-30 { font-size: calc(var(--fs-base, 1rem) * 30 / 15); line-height: 1.4; }
.fs-34 { font-size: calc(var(--fs-base, 1rem) * 34 / 15); line-height: 1.35; }
.fs-38 { font-size: calc(var(--fs-base, 1rem) * 38 / 15); line-height: 1.3; }

/* ===== 글쓰기 툴바 (네이버 스마트에디터 배치) ===== */
#editor-toolbar { font-size: 0.85rem; color: var(--navy); }
.tb-sep { width: 1px; align-self: stretch; margin: 4px 6px; background: rgba(26, 42, 74, 0.15); }
.tb-btn,
.tb-drop {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--navy);
  cursor: pointer; transition: background 0.12s ease;
}
.tb-btn:hover, .tb-drop:hover { background: #f1eee9; }
.tb-btn.is-active { background: var(--brand-soft); border-color: rgba(139, 26, 26, 0.25); color: var(--brand); }
.tb-drop { font-weight: 500; padding: 0 10px; }
.tb-caret { font-size: 0.6rem; opacity: 0.55; }
.tb-t { position: relative; display: inline-block; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1; padding: 0 2px 4px; }
.tb-colorbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 1px; background: #ff0010; }
.tb-t-box { border: 1px solid currentColor; border-radius: 2px; padding: 1px 4px; background: #fff1a8; }
.tb-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 150px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid rgba(26, 42, 74, 0.15); border-radius: 8px;
  box-shadow: 0 10px 24px rgba(26, 42, 74, 0.15); padding: 4px;
}
.tb-menu-narrow { min-width: 120px; }
.tb-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; color: var(--ink); background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.tb-item:hover { background: #f4f0ea; }
.tb-item.is-current { color: var(--brand); font-weight: 700; }
.tb-palette { min-width: 0; width: 196px; padding: 8px; }
.tb-palette-reset { font-size: 0.8rem; margin-bottom: 6px; border: 1px solid rgba(26, 42, 74, 0.12); text-align: center; }
.tb-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.tb-swatch { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer; padding: 0; }
.tb-swatch:hover { transform: scale(1.15); }
.tb-symbols { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.tb-symbol { height: 26px; border-radius: 4px; border: 0; background: transparent; cursor: pointer; font-size: 0.95rem; color: var(--ink); }
.tb-symbol:hover { background: #f4f0ea; }

/* SEO 최적화 적용 직후 바뀐 곳 잠깐 강조 */
@keyframes seo-flash { 0%, 100% { background-color: transparent; } 15%, 70% { background-color: rgba(255, 210, 0, 0.45); } }
.seo-flash { animation: seo-flash 4s ease; outline: 2px solid rgba(255, 196, 0, 0.9); outline-offset: 2px; border-radius: 4px; }

/* 오른쪽에 떠 있는 상담 버튼 */
.floating-consult {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 2px; width: 84px; padding: 8px 6px;
  background: #fff; border-radius: 20px; box-shadow: 0 8px 28px rgba(16, 26, 48, 0.2);
}
.fc-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 2px; border-radius: 14px; color: var(--navy); text-decoration: none; transition: background-color .15s;
}
.fc-item + .fc-item::before {
  content: ''; position: absolute; top: -2px; left: 12px; right: 12px; height: 1px; background: #eee7dd;
}
.fc-item:hover, .fc-item:focus-visible { background: var(--cream-soft); }
.fc-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; font-size: 18px; line-height: 1; transition: transform .15s;
}
.fc-item:hover .fc-icon { transform: scale(1.08); }
.fc-kakao { background: #FEE500; color: #191919; }
.fc-naver { background: #03C75A; color: #fff; font-weight: 900; font-size: 20px; }
.fc-phone { background: var(--brand); color: #fff; }
.fc-label { font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: -0.02em; }
.fc-tip {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  padding: 8px 12px; border-radius: 10px; background: var(--navy); color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s;
}
.fc-item:hover .fc-tip, .fc-item:focus-visible .fc-tip { opacity: 1; visibility: visible; }

@media (max-width: 767px) {
  .floating-consult {
    right: 10px; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: none;
    width: 64px; padding: 4px; border-radius: 16px;
  }
  .fc-item { gap: 3px; padding: 7px 0; }
  .fc-icon { width: 34px; height: 34px; font-size: 15px; }
  .fc-naver { font-size: 17px; }
  .fc-label { font-size: 10px; }
  .fc-tip { display: none; }
}