@charset "utf-8";
/* 코코포리아 로그 — KKUL LOG(kkul-log.netlify.app) 출력 형식 대응 */

.log-body {
  background:#1f1e22;
  border-radius:10px;
  max-height:70vh !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  scrollbar-width:thin !important;
  scrollbar-color: rgba(255,255,255,0.35) rgba(0,0,0,0.15) !important;
}
.log-body::-webkit-scrollbar { width:10px !important; }
.log-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.15) !important; border-radius:5px; }
.log-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35) !important; border-radius:5px; }
.log-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5) !important; }

/* ---- A) "HTML 저장" 형식: .ccfolia_wrap / .msg_container / .gap 등 클래스가 있는 경우 ---- */
.log-body .ccfolia_wrap {
  position: relative;
  padding: 8px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background-color: #2c2c2c;
  color: #e8e8e8;
  font-family: 'Noto Sans KR','Pretendard',sans-serif;
  font-size: 14px;
  line-height: 1.65;
}
.log-body .ccfolia_wrap * { box-sizing: border-box; }
.log-body .ccfolia_wrap p { margin: 0; }
.log-body .ccfolia_wrap span { word-break: break-all; overflow-wrap: anywhere; font-size: 14px !important; line-height: 1.65; }
.log-body .msg_container {
  flex-shrink: 0 !important; flex-grow: 0 !important;
  width: 42px !important; height: 42px !important;
  min-width: 42px !important; max-width: 42px !important;
  min-height: 42px !important; max-height: 42px !important;
  overflow: hidden; background: rgba(0,0,0,0.2);
  border-radius: 6px; display: flex;
  align-items: center; justify-content: center; margin-top: 2px;
  margin-right: 12px; box-sizing: border-box; touch-action: none; vertical-align: top;
}
.log-body .msg_container img {
  width: 100% !important; height: 100% !important;
  max-width: none !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  vertical-align: top !important; display: block !important;
  object-fit: cover; object-position: top;
}
.log-body .gap {
  display: flex; justify-content: flex-start; align-items: flex-start;
  width: 100%; box-sizing: border-box; text-align: left; padding: 10px 14px;
}
.log-body .gap strong.msg-name { font-weight: 600; padding: 0; }
.log-body .message-row { background-color: #313131; margin: 0; align-items: flex-start; border-radius: 0; }
.log-body .message-body { flex: 1 1 0%; min-width: 0; }
.log-body .message-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.log-body .msg-name { color: var(--msg-name-color, #dddddd) !important; font-size: 14px !important; font-weight: 600; }
.log-body .msg-timestamp { color: rgba(255,255,255,0.35) !important; font-size: 12px !important; }
.log-body .msg-category-tag { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; }
.log-body .msg-normal-text { white-space: pre-line; word-break: break-all; overflow-wrap: anywhere; line-height: 1.65; color: #e8e8e8 !important; }
.log-body .msg-normal-text > span { color: #e8e8e8 !important; }
.log-body .msg-normal-text em { font-style: italic; }
.log-body .msg-normal-text strong { font-weight: 700; }
.log-body .msg-normal-text em strong { font-style: italic; font-weight: 700; }

/* ---- B) "HTML 복사"(티스토리용) 형식: 클래스 없이 <p style="color:.."><span>[태그]</span><span>이름</span> : <span>내용</span></p> ---- */
#log_content_inner {
  background:#2c2c2c;
  color:#e8e8e8;
  font-family:'Noto Sans KR','Pretendard',sans-serif;
  font-size:14px;
  line-height:1.65;
  padding:8px;
  box-sizing:border-box;
}
#log_content_inner > p {
  display:block !important;
  margin:0 !important;
  padding:11px 14px !important;
  border-bottom:1px solid rgba(255,255,255,0.07);
  word-break:break-all;
  overflow-wrap:anywhere;
  line-height:1 !important;
}
#log_content_inner > p > span { font-size:14px; }
/* 1번째 span = [main]/[other]/[info] 태그 */
#log_content_inner > p > span:nth-of-type(1) {
  font-size:11px;
  opacity:0.45;
  margin-right:6px;
}
/* 2번째 span = 캐릭터 이름 */
#log_content_inner > p > span:nth-of-type(2) {
  font-weight:700;
  margin-right:4px;
}
/* 3번째 span = 대사 내용 */
#log_content_inner > p > span:nth-of-type(3) {
  display:block !important;
  margin-top:-8px !important;
  white-space:pre-line;
  color:#e8e8e8;
  opacity:0.92;
  line-height:1.45 !important;
}

/* [other] 태그가 붙은 줄은 이름·태그·대사 전체를 연하게 표시 */
#log_content_inner > p[data-logtag="other"] {
  opacity:0.55;
}