/* 나눔고딕 (2종) */
@font-face {
  font-family: 'NanumGothic';
  src: url('./fonts/se-nanumgothic-regular.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'NanumGothic';
  src: url('./fonts/se-nanumgothic-bold.woff2') format('woff2');
  font-weight: bold;
}

/* 나눔명조 (2종) */
@font-face {
  font-family: 'NanumMyeongjo';
  src: url('./fonts/se-nanummyeongjo-regular.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'NanumMyeongjo';
  src: url('./fonts/se-nanummyeongjo-bold.woff2') format('woff2');
  font-weight: bold;
}

/* 나눔스퀘어 (2종) */
@font-face {
  font-family: 'NanumSquare';
  src: url('./fonts/se-nanumsquare-regular.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('./fonts/se-nanumsquare-bold.woff2') format('woff2');
  font-weight: bold;
}

/* 나눔바른고딕 (2종) */
@font-face {
  font-family: 'NanumBarunGothic';
  src: url('./fonts/se-nanumbarungothic-regular.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'NanumBarunGothic';
  src: url('./fonts/se-nanumbarungothic-bold.woff2') format('woff2');
  font-weight: bold;
}

/* 마루부리 (2종) */
@font-face {
  font-family: 'MaruBuri';
  src: url('./fonts/se-nanummaruburi-regular.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'MaruBuri';
  src: url('./fonts/se-nanummaruburi-bold.woff2') format('woff2');
  font-weight: bold;
}

/* 손글씨 3종 */
@font-face {
  font-family: 'BareunHippi';
  src: url('./fonts/se-nanumbareunhipi-regular.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'DasiSijagHae';
  src: url('./fonts/se-nanumdasisijaghae-regular.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'UriTtalSonGeulSsi';
  src: url('./fonts/se-nanumuriddalsongeulssi-regular.woff2') format('woff2');
  font-weight: normal;
}

/* ============================================================
   Tiptap Editor & Viewer Stylesheet
   - Target: .ProseMirror (Editor), .cont_txt (Viewer)
   - Features: Table Selection, Typography, Naver-Style HR, Link Card
   ============================================================ */

/* ============================================================
   1. 공통 텍스트 및 기본 설정
   ============================================================ */
.ProseMirror, .cont_txt {
  font-size: 15px;
  font-family: 'SUIT', sans-serif;
  line-height: 1.6;
  color: #333;
  word-break: break-word;
}

.ProseMirror {
  padding: 30px;
  height: 100%;
  outline: none;
  box-sizing: border-box;
}

/* 빈 에디터 Placeholder */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #a8abb2;
  pointer-events: none;
  height: 0;
}

/* 노드 선택 강조 (에디터 전용) */
.ProseMirror .ProseMirror-selectednode {
  outline: 2px solid #409EFF;
  outline-offset: 2px;
}

/* ============================================================
   2. TYPOGRAPHY (제목, 본문 등)
   ============================================================ */
.ProseMirror h1, .cont_txt h1,
.ProseMirror h2, .cont_txt h2,
.ProseMirror h3, .cont_txt h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.3;
}

.ProseMirror h1, .cont_txt h1 { font-size: 2em; }
.ProseMirror h2, .cont_txt h2 { font-size: 1.5em; }
.ProseMirror h3, .cont_txt h3 { font-size: 1.25em; }

.ProseMirror p, .cont_txt p { margin: 0.8em 0; }

.ProseMirror a, .cont_txt a {
  color: #409EFF;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   3. TABLE (세로 중앙 정렬 및 선택 스타일)
   ============================================================ */
.ProseMirror .table-wrapper, .cont_txt .table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
}

.ProseMirror table, .cont_txt table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0;
}

.ProseMirror td, .cont_txt td,
.ProseMirror th, .cont_txt th {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px 12px;
  vertical-align: middle !important;
  box-sizing: border-box;
}

.ProseMirror th, .cont_txt th {
  background: #f5f5f5;
  font-weight: 600;
  text-align: left;
}

.ProseMirror td p, .cont_txt td p { margin: 0; line-height: 1.4; }

/* 🔥 에디터 전용: 셀 선택 음영 (Bubble Menu 연동 필수 스타일) */
.ProseMirror td.selectedCell,
.ProseMirror th.selectedCell {
  background: rgba(64, 158, 255, 0.15) !important; 
  position: relative;
}

/* 선택된 셀 테두리 강조 */
.ProseMirror .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: "";
  left: 0; right: 0; top: 0; bottom: 0;
  border: 1px solid #409EFF;
  pointer-events: none;
}

/* 열 너비 조절 핸들 */
.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}

/* ============================================================
   6. HR (구분선) - Naver Blog Style
   ============================================================ */
.ProseMirror hr, .cont_txt hr {
  border: none;
  display: block;
  position: relative;
  margin: 40px auto;
  height: 24px; 
  background-color: transparent;
}

.ProseMirror hr::before, .cont_txt hr::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* 타입 1: 짧은 실선 */
.ProseMirror hr[data-type="type1"]::before, .cont_txt hr[data-type="type1"]::before { border-top: 2px solid #333; width: 100px; }
/* 타입 2: 긴 실선 */
.ProseMirror hr[data-type="type2"]::before, .cont_txt hr[data-type="type2"]::before { border-top: 1px solid #eee; width: 100%; }
/* 타입 3: 굵은 중간 선 */
.ProseMirror hr[data-type="type3"]::before, .cont_txt hr[data-type="type3"]::before { border-top: 8px solid #f8f9fa; width: 150px; }

/* 타입 4: V자 포인트 선 (선 + 아이콘) - 🔥 수정: 배경 투명화 */
.ProseMirror hr[data-type="type4"]::before, .cont_txt hr[data-type="type4"]::before { border-top: 1px solid #ddd; width: 70%; }
.ProseMirror hr[data-type="type4"]::after, .cont_txt hr[data-type="type4"]::after {
  content: '▼'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: transparent; padding: 0 12px; color: #ddd; font-size: 12px;
}

/* 타입 5: 다이아몬드 포인트 선 (선 + 아이콘) - 🔥 수정: 배경 투명화 */
.ProseMirror hr[data-type="type5"]::before, .cont_txt hr[data-type="type5"]::before { border-top: 1px solid #ddd; width: 70%; }
.ProseMirror hr[data-type="type5"]::after, .cont_txt hr[data-type="type5"]::after {
  content: '◆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: transparent; padding: 0 12px; color: #ccc; font-size: 14px;
}

/* 타입 6: 도트(점선) 추가 복구 */
.ProseMirror hr[data-type="type6"]::before, .cont_txt hr[data-type="type6"]::before { border-top: 5px dotted #ccc; width: 120px; letter-spacing: 10px; }

/* ============================================================
   7. LINK CARD (Naver Style)
   ============================================================ */

/* 최상위 노드 */
.link-card-node,
.cont_txt .link-card-node {
  margin: 24px 0;
  display: block;
  clear: both;
}

/* 링크 내부 박스 */
.ProseMirror .link-card-inner,
.cont_txt .link-card-inner {
  display: flex !important;
  align-items: stretch;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  transition: all 0.2s ease;
  min-height: 100px;
  text-decoration: none !important;
  color: inherit !important;
}

.cont_txt .link-card-inner:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 이미지 컨테이너 */
.ProseMirror .card-image-container,
.cont_txt .card-image-container {
  width: 120px;
  flex-shrink: 0;
  position: relative;
  background-color: #f8f9fa;
  border-right: 1px solid #f0f0f0;
}

.ProseMirror .card-image,
.cont_txt .card-image {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/* 텍스트 영역 */
.ProseMirror .card-content,
.cont_txt .card-content {
  padding: 16px 20px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ProseMirror .card-title, 
.cont_txt .card-title {
  font-size: 15px;
  font-weight: 700;
  color: #222 !important;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ProseMirror .card-description, 
.cont_txt .card-description {
  font-size: 13px;
  color: #666 !important;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ProseMirror .card-url, 
.cont_txt .card-url {
  font-size: 12px;
  color: #409EFF !important;
  font-weight: 500;
  text-decoration: none !important;
}