@charset "utf-8";

/* 폰트 및 아이콘 강제 로드 (테마 누락 방지) */
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Gamja+Flower&family=Gowun+Batang:wght@400;700&family=Gowun+Dodum&family=Nanum+Myeongjo:wght@400;700&family=Nanum+Pen+Script&family=Noto+Serif+KR:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* =========================
   0) BASE & VARIABLES
========================= */
:root {
  --primary-color: #333333;
  --primary-hover-color: #555555;
  --container-bg-color: #ffffff;
  --card-border-color: #d1d1d1;
  --text-muted: #888888;
  --accent-color: #c9887f;
  --content-font-color: #333333;
  --white-color: #ffffff;
  --spacing-lg: 20px;
  --spacing-md: 15px;
  --spacing-xs: 5px;
  --container-border-radius: 8px;
  --transition-fast: 0.3s;
  --input-border-color: #cccccc;
  --form-bg-color: #ffffff;
  --form-text-color: #333333;
}

#bo_list {
  position: relative;
  overflow: visible;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
  font-family: 'Gowun Dodum', 'Pretendard', -apple-system, sans-serif !important;
}

/* =========================
   [강제 덮어쓰기] 아이콘 및 공통 폼 요소
========================= */
#bo_list i.fa {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: 'FontAwesome' !important;
}

#bo_list input[type="text"],
#bo_list textarea,
#bo_list select {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
}

#bo_list input::placeholder,
#bo_list textarea::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}

#bo_list button {
  box-shadow: none !important;
  outline: none !important;
  border-radius: 8px !important;
}

/* =========================
   1) CATEGORY
========================= */
#bo_cate{ margin: var(--spacing-lg) 0; }
#bo_cate h2{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#bo_cate ul{
  display: flex; flex-wrap: wrap; gap: var(--spacing-xs);
  list-style: none; padding: 0; margin: 0; justify-content: center;
}
#bo_cate li{ display: inline-block; }
#bo_cate a{
  display: block; padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--container-border-radius);
  background: var(--primary-color) !important; color: var(--white-color) !important;
  text-decoration: none; transition: var(--transition-fast);
}
#bo_cate a:hover, #bo_cate #bo_cate_on{
  background: var(--primary-hover-color) !important;
}

/* =========================
   2) SEARCH
========================= */
#bo_sch{ display: flex; justify-content: flex-end; border: 0; padding: 0; margin: 18px 0; }
#bo_sch form{ display: flex; align-items: center; gap: 6px; width: 50%; }
#bo_sch .frm_input {
  height: 36px !important; padding: 0 12px !important; box-sizing: border-box;
}
#bo_sch input.sch_input { flex: 1; }
#bo_sch button.ra0_ui_btn {
  height: 36px !important; width: 36px !important; 
  background-color: #333333 !important; color: #ffffff !important;
  border: none !important; cursor: pointer; display: flex; 
  align-items: center; justify-content: center;
}
#bo_sch button.ra0_ui_btn:hover { background-color: #555555 !important; }

@media (max-width: 768px){ #bo_sch form{ width: 100%; } }

/* =========================
   3) HEADER
========================= */
#bo_list .quote-header { display: block !important; text-align: center; margin-bottom: 40px; }
#bo_list .quote-title {
  display: block !important;
  font-family: 'Cedarville Cursive', cursive !important;
  font-size: 5rem !important;
  font-weight: normal !important;
  line-height: 1.1 !important; margin: 0 0 10px 0 !important;
  color: #333333 !important; text-align: center !important;
}

/* =========================
   4) WRITE AREA
========================= */
#bo_list .quote-write-area {
  background: var(--container-bg-color) !important; border-radius: 12px !important;
  border: 1px solid var(--card-border-color) !important; padding: 20px; margin-bottom: 30px;
}
#bo_list .quote-input, #bo_list .quote-edit-textarea, #bo_list .reply-input {
  width: 100%; min-height: 100px !important; padding: 15px !important; 
  font-size: 0.95em; line-height: 1.6; resize: vertical; box-sizing: border-box;
}
#bo_list .quote-source-input, #bo_list .quote-edit-source-input { 
  width: 100%; padding: 10px 15px !important; margin-top: 10px; font-size: 0.9em; box-sizing: border-box;
}
#bo_list .quote-write-footer, #bo_list .quote-edit-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-top: 15px; flex-wrap: wrap;
}
#bo_list .quote-options, #bo_list .style-selects { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#bo_list .style-select {
  height: 36px !important; padding: 0 10px !important; font-size: 0.9em; cursor: pointer;
}
#bo_list .quote-submit-btn {
  width: 36px !important; height: 36px !important; padding: 0 !important; border: none !important; 
  background-color: #333333 !important; color: #ffffff !important; 
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px;
}

/* =========================
   5) LIST / CARD
========================= */
#bo_list .quote-list-area { display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px; }
#bo_list .quote-item {
  position: relative;
  background-color: transparent !important;
  border: none !important;
  border-radius: 12px !important; padding: 35px 40px !important; overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12) !important;
}

/* ✅ 배경 이미지와 오버레이를 완전히 분리된 레이어로 생성 */
#bo_list .quote-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
}

#bo_list .quote-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-color: rgba(255, 255, 255, 0.93) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#bo_list .quote-item > *:not(.quote-bg):not(.quote-overlay):not(.quote-actions) {
  position: relative;
  z-index: 2; /* 컨텐츠는 오버레이 위로 */
}

#bo_list .quote-actions { position: absolute !important; top: 15px !important; right: 15px !important; left: auto !important; display: flex !important; gap: 5px !important; z-index: 10 !important; }
#bo_list .quote-actions button {
  width: 26px !important; height: 26px !important; border: none !important; 
  background-color: rgba(150, 150, 150, 0.15) !important;
  color: #666666 !important; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; font-size: 0.85em;
}
#bo_list .quote-actions button:hover { background-color: var(--accent-color) !important; color: #ffffff !important; }

#bo_list .quote-box-wrapper { margin: 0; padding: 0; background: transparent; border: none; }
#bo_list .quote-mark-open, #bo_list .quote-mark-close { color: #555555 !important; font-size: 2.2em !important; opacity: 0.8; line-height: 1; }
#bo_list .quote-mark-open { margin-bottom: 10px; }
#bo_list .quote-mark-close { text-align: right; margin-top: 10px; }
#bo_list .quote-content { line-height: 1.8 !important; color: #333333 !important; font-weight: 600 !important; margin: 10px 0; word-break: break-all; }

#bo_list .quote-item.quote-align-left .quote-content { text-align: left !important; padding-left: 2.2em; }
#bo_list .quote-item.quote-align-center .quote-content { text-align: center !important; }
#bo_list .quote-item.quote-align-right .quote-content { text-align: right !important; padding-right: 2.2em; }

/* =========================
   6) EDIT AREA
========================= */
#bo_list .quote-edit-area { margin: 15px 0; padding: 0; }
#bo_list .quote-edit-buttons { display: flex; gap: 6px; margin-left: auto; }
#bo_list .quote-save-btn, #bo_list .quote-cancel-btn { padding: 8px 15px !important; border: none !important; cursor: pointer; font-size: 0.9em; }
#bo_list .quote-save-btn { background-color: #333333 !important; color: #ffffff !important; }
#bo_list .quote-cancel-btn { background-color: #dddddd !important; color: #333333 !important; }

/* =========================
   7) META (DATE / SOURCE)
========================= */
#bo_list .quote-meta-footer {
  display: flex; justify-content: space-between; align-items: center; margin-top: 20px;
}
#bo_list .quote-date {
  font-size: 0.75em !important; color: #c0c0c0 !important; font-family: 'Gowun Dodum', sans-serif !important;
}
#bo_list .quote-source-info { 
  display: flex; align-items: center; gap: 10px; color: #666666 !important; font-size: 0.85em !important; font-style: italic !important; 
}
#bo_list .quote-source-info.quote-source-bottom { justify-content: flex-end; margin-top: 0; }
#bo_list .empty-quote-list { text-align: center; padding: 80px 20px; color: #888888 !important; }

/* =========================
   8) REPLIES
========================= */
#bo_list .quote-replies { margin-top: 25px; padding-top: 20px; border-top: 1px dashed var(--card-border-color); }
#bo_list .quote-reply-item { padding: 12px 20px; background: rgba(255, 255, 255, 0.5) !important; border-left: 4px solid var(--accent-color) !important; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; }
#bo_list .reply-content { flex: 1; font-size: 0.95em !important; line-height: 1.7; color: #333333 !important; font-family: 'Gowun Batang', serif !important; }
#bo_list .reply-delete-btn { background: none !important; border: none !important; color: #999999 !important; cursor: pointer; }
#bo_list .quote-reply-write { margin-top: 15px; padding: 15px; background: rgba(255, 255, 255, 0.5) !important; border-radius: 8px; }
#bo_list .reply-write-footer { display: flex; justify-content: flex-end; gap: 5px; margin-top: 10px; }
#bo_list .reply-submit-btn, #bo_list .reply-cancel-btn { padding: 6px 15px !important; border: none !important; cursor: pointer; font-size: 0.85em; }
#bo_list .reply-submit-btn { background-color: #333333 !important; color: #ffffff !important; }
#bo_list .reply-cancel-btn { background-color: #dddddd !important; color: #333333 !important; }

/* =========================
   9) TEXT STYLES (EFFECTS ONLY)
========================= */
#bo_list .quote-style-default .quote-content { font-style: normal; }

@keyframes blink { 0%, 100% { opacity: 1; text-shadow: 0 0 5px rgba(255,255,255,0.8); } 50% { opacity: 0.3; } }
#bo_list .quote-style-highlight .quote-content { animation: blink 2.5s infinite !important; }

#bo_list .quote-style-italic .quote-content { font-style: italic !important; }
#bo_list .quote-style-whisper .quote-content { opacity: 0.55 !important; text-shadow: 0 0 6px rgba(0,0,0,0.25) !important; }
#bo_list .quote-style-boldline .quote-content { border-left: 5px solid #555555 !important; padding-left: 10px !important; }
/* 왼쪽 정렬 + 강조선이 겹칠 때 들여쓰기 값 합산 보정 */
#bo_list .quote-item.quote-align-left.quote-style-boldline .quote-content { padding-left: calc(2.2em + 10px) !important; }

@keyframes glow-anim { 0%, 100% { text-shadow: 0 0 5px rgba(150, 150, 150, 0.5); } 50% { text-shadow: 0 0 15px rgba(150, 150, 150, 0.8); } }
#bo_list .quote-style-glow .quote-content { animation: glow-anim 3s infinite ease-in-out !important; }

@keyframes glitch-anim { 0%, 100% { text-shadow: -2px 0 rgba(255,0,0,0.6), 2px 0 rgba(0,255,255,0.6); } 50% { text-shadow: 2px 0 rgba(255,0,0,0.6), -2px 0 rgba(0,255,255,0.6); } }
#bo_list .quote-style-fracture .quote-content { animation: glitch-anim 0.2s infinite !important; }

/* =========================
   10) FONT FAMILIES
========================= */
#bo_list .quote-font-default .quote-content { font-family: 'Gowun Dodum', sans-serif !important; font-size: 1.1em !important; }
#bo_list .quote-font-batang .quote-content { font-family: 'Gowun Batang', serif !important; font-size: 1.15em !important; font-weight: 700 !important; }
#bo_list .quote-font-gamja .quote-content { font-family: 'Gamja Flower', cursive !important; font-size: 1.3em !important; }
#bo_list .quote-font-pen .quote-content { font-family: 'Nanum Pen Script', cursive !important; font-size: 1.5em !important; }
#bo_list .quote-font-pretendard .quote-content { font-family: 'Pretendard', sans-serif !important; font-size: 1.05em !important; }

/* =========================
   11) RESPONSIVE
========================= */
@media (max-width: 768px){
  #bo_list .quote-item { padding: 25px 20px !important; }
  #bo_list .quote-options, #bo_list .style-select, #bo_list .quote-edit-buttons { width: 100%; justify-content: flex-end; }
  #bo_list .quote-edit-area .style-select { flex: 1 1 0; min-width: 0; }
}