/* Blog common styles */
:root {
  --bg-color: #f5f7fb;
  --text-color: #212529;
  --primary-color: #4e73df;
}

/* Content styles */
.content {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--text-color) !important;
}

.content p {
  margin-bottom: 1rem !important;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

.content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
  margin: 1rem 0 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

.content img:hover {
  opacity: 0.9 !important;
}

/* Summernote 에디터 스타일 */
.note-editable {
  font-family: '맑은 고딕', 'Malgun Gothic', '微软雅黑', 'Microsoft YaHei', '돋움', 'Dotum', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--text-color) !important;
  padding: 20px !important;
}

.note-editable p {
  margin-bottom: 1rem !important;
}

.note-editable h1, .note-editable h2, .note-editable h3, .note-editable h4, .note-editable h5, .note-editable h6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

.note-editable img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
  margin: 1rem 0 !important;
  cursor: pointer !important;
}

.note-editable img:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.3) !important;
}

/* 이미지 정렬 스타일 */
/* 부모 컨테이너의 정렬을 존중하여 이미지 가운데/좌/우 정렬 */
/* center: 공백 유무 모두 대응, 어떤 중첩에서도 적용 */
.note-editable [style*="text-align:center"] img,
.note-editable [style*="text-align: center"] img,
.note-editable .text-center img,
.content [style*="text-align:center"] img,
.content [style*="text-align: center"] img,
.content .text-center img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* right 정렬 */
.note-editable [style*="text-align:right"] img,
.note-editable [style*="text-align: right"] img,
.note-editable .text-right img,
.content [style*="text-align:right"] img,
.content [style*="text-align: right"] img,
.content .text-right img {
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* left 정렬 */
.note-editable [style*="text-align:left"] img,
.note-editable [style*="text-align: left"] img,
.note-editable .text-left img,
.content [style*="text-align:left"] img,
.content [style*="text-align: left"] img,
.content .text-left img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 텍스트 정렬 유틸리티 (서버 환경 차이 대응) */
.note-editable .text-left { text-align: left !important; }
.note-editable .text-center { text-align: center !important; }
.note-editable .text-right { text-align: right !important; }
.note-editable .text-justify { text-align: justify !important; }

body {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.container {
  max-width: 1100px !important;
}

.card {
  padding: 20px !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
}

/* Content media should not overflow cards */
.card .content img,
.card img,
.content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.card .content iframe,
.card .content video,
.content iframe,
.content video {
  max-width: 100%;
  width: 100%;
}

.post h1 { font-size: 1.8rem; margin-bottom: 10px; }
.meta { color: #6c757d; font-size: .9rem; margin-bottom: 12px; }
.meta-right { text-align: right; font-size: .8rem; color: #6c757d; margin-top: 8px; }

/* Ensure meta-right sticks to the bottom-right inside article cards */
article.card { display: flex; flex-direction: column; }
article.card .meta-right { margin-top: auto !important; align-self: flex-end; }

/* Grid/list */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.card h3 { font-size: 1.1rem; margin: 0 0 8px; }

/* Card cover */
.card-cover-wrapper { margin: -18px -18px 12px -18px; overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.card-cover { width: 100%; height: 160px !important; object-fit: cover !important; display: block; }

/* Tag badge */
.tag-badge { margin-right: 6px; border: 1px solid #e5e7eb !important; color: #4b5563 !important; text-decoration: none !important; display: inline-block; padding: .25rem .5rem; border-radius: .25rem; font-size: .75rem; background: #fff !important; }

/* Banner/Header */
.banner { width: 100%; height: 180px; border-radius: 0; position: relative; background-color: #f1f3f5; background-position: center; background-size: cover; background-repeat: no-repeat; }
.banner-inner { position: absolute; left: 0; right: 0; bottom: 18px; }
.banner-content { max-width: 1100px; margin: 0 auto; padding: 0 24px; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.site-title { font-weight: 700; font-size: 20px; vertical-align: middle; color: inherit; text-decoration: none; }
.logo-img { height: 36px; vertical-align: middle; margin-right: 10px; border-radius: 4px; }
.logo-on-banner { background: rgba(255,255,255,.1); }
.intro { font-size: 14px; margin-top: 6px; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-plain { padding: 12px 0 0 0; }
.header-plain .mlink { color: var(--primary-color); margin-left: 8px; }
.banner-content .mlink { color: #ffffff !important; margin-left: 8px; }
/* Header category badges (primary) */
.banner-content .badge,
.intro .badge { background: var(--primary-color) !important; color: #ffffff !important; border: 1px solid var(--primary-color) !important; border-radius: 9999px !important; padding: 4px 10px !important; margin-right: 6px !important; text-decoration: none !important; }
.intro .badge:hover { filter: brightness(0.95); }
/* Plain links in intro as pills */
.banner .intro a { display: inline-block; padding: 4px 10px; border-radius: 9999px; color: #ffffff !important; background: var(--primary-color); border: 1px solid var(--primary-color); margin-right: 6px; text-decoration: none !important; }
.banner .intro a:hover { filter: brightness(0.95); }
/* Title hover on banner */
.banner .site-title { color: #ffffff !important; text-decoration: none !important; }
.banner .site-title:hover { color: #ffffff !important; text-decoration: underline !important; }

/* Utilities */
.back-to-top { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--primary-color) !important; color: #fff !important; cursor: pointer; display: none; z-index: 9999; box-shadow: 0 4px 10px rgba(0,0,0,.2); align-items: center; justify-content: center; font-size: 18px; }
.blog-footer { max-width: 1100px; margin: 24px auto 0; border-top: 1px dotted #ced4da; padding-top: 16px; }
.footer-copy-link, .footer-copy-link:hover { text-decoration: none !important; color: inherit !important; }
.break-long { max-width: 360px; word-break: break-all; }
.table-thumb { height: 40px !important; }
.table-thumb-80 { height: 80px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; display: block !important; }
.logo-small { height: 28px; vertical-align: middle; margin-right: 10px; border-radius: 4px; }

/* Charts */
.chart-fixed-300 { width: 100% !important; height: 300px !important; max-height: 300px !important; display: block; }

/* Simple modal for auth */
.auth-modal-backdrop { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 10000; }
.auth-modal { background: #fff; border-radius: 10px; width: 360px; max-width: 92%; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.auth-modal-header { background: var(--primary-color) !important; color: #ffffff !important; margin: -18px -18px 12px -18px; padding: 12px 16px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.auth-modal-title { margin: 0; font-size: 1rem; font-weight: 700; }
.auth-modal-body label { font-weight: 600; font-size: .9rem; color: #374151; }
.auth-modal-body input[type=text],
.auth-modal-body input[type=password] { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 10px; }
.auth-modal h5 { margin: 0 0 8px 0; font-size: 1.05rem; }
.auth-modal p { margin: 0 0 14px 0; color: #4b5563; font-size: .95rem; }
.auth-modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.hidden { display: none !important; }

/* Links */
a { color: inherit !important; text-decoration: none !important; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
a:hover, a:focus, a:active { color: inherit !important; text-decoration: none !important; }
.mlink { text-decoration: none; }
.mlink:hover { text-decoration: underline !important; opacity: .95; }

/* Admin badges */
.badge-admin { display: inline-block; padding: 4px 10px; margin-left: 8px; border-radius: 9999px; background: #f97316 !important; color: #ffffff !important; font-size: .75rem; font-weight: 700; line-height: 1; vertical-align: middle; }
.badge-admin:hover { background: #ea580c !important; color: #ffffff !important; text-decoration: none !important; }

/* Buttons (custom, no bootstrap) */
.b-btn { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent !important; background: #f8f9fa !important; color: #1f2937 !important; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap !important; }
.b-btn:hover { filter: brightness(0.98); }
.b-btn:disabled { opacity: .6; cursor: not-allowed; }
.b-btn-sm { padding: 5px 10px; font-size: .875rem; border-radius: 5px; }

/* Icon sizing inside buttons (desktop + mobile) */
.b-btn i { font-size: .9em; line-height: 1; vertical-align: -1px; }
@media (max-width: 576px) {
  .b-btn { padding: 7px 12px; font-size: .95rem; }
  .b-btn i { font-size: .85em; }
}

.b-btn-primary { background: var(--primary-color) !important; color: #ffffff !important; border-color: var(--primary-color) !important; }
.b-btn-primary *, .b-btn-primary a { color: #ffffff !important; }
.b-btn-primary:hover { background: #3d5ec9 !important; border-color: #3d5ec9 !important; }

.b-btn-ghost { background: #ffffff !important; color: #374151 !important; border-color: #e5e7eb !important; }
.b-btn-ghost:hover { background: #f3f4f6 !important; border-color: #d1d5db !important; }

.b-btn-outline { background: transparent !important; color: #374151 !important; border-color: #cbd5e1 !important; }
.b-btn-outline:hover { background: #f8fafc !important; }

.b-btn-danger { background: #ef4444 !important; color: #ffffff !important; border-color: #ef4444 !important; }
.b-btn-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; }

/* Button link normalization: anchors inside buttons only */
.b-btn a,
.b-btn a:hover,
.b-btn a:focus,
.b-btn a:active { color: inherit !important; text-decoration: none !important; }

/* Pagination */
.pagination { gap: 6px; }
.pagination .page-link { padding: 6px 10px; border-radius: 6px; border: 1px solid #cbd5e1 !important; background: #ffffff !important; color: #374151 !important; text-decoration: none !important; }
.pagination .page-link:hover { background: #f3f4f6 !important; border-color: #d1d5db !important; }
.pagination .page-item.active .page-link { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; }
.pagination .page-item.disabled .page-link { opacity: .5; pointer-events: none; }

/* 이미지 모달 스타일 */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.image-modal.show {
  display: flex;
}

.image-modal img {
  max-width: 90vw;
  max-height: 90vh;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}