@charset "utf-8";
/**
 * KBoard Comments - 어잉티연구소 디자인 시스템
 * @author 어잉티연구소 https://eoingti.com
 */

/* =============================================
   0. 래퍼 리셋 — 테마 충돌 차단
============================================= */
.kboard-comments-eoingti {
    all: revert;
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: transparent !important;
}
/* 하위 요소 전체 리셋 후 box-sizing 재지정 */
.kboard-comments-eoingti *,
.kboard-comments-eoingti *::before,
.kboard-comments-eoingti *::after {
    box-sizing: border-box !important;
}
/* all:revert 후 ul/li 기본값 복원 차단 */
.kboard-comments-eoingti ul,
.kboard-comments-eoingti ol,
.kboard-comments-eoingti li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* 테마 label/legend height 오버라이드 */
.kboard-comments-eoingti label,
.kboard-comments-eoingti legend {
    height: auto !important; line-height: normal !important;
    display: inline-flex !important; align-items: center !important;
    margin-bottom: 0 !important;
}

/* KBoard 기본 field-wrap 숨김 override — 항상 표시 */
.kboard-comments-eoingti .comments-field-wrap { display: flex !important; }
.kboard-comments-eoingti .comments-submit-button { display: flex !important; }

/* 사진 + 첨부 + 알림 한 줄 */
.kboard-comments-eoingti .comments-bottom-row {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; flex-wrap: wrap !important;
    gap: 16px !important; margin-bottom: 0 !important;
    width: 100% !important; overflow: visible !important;
    padding: 4px 0 !important;
}
.kboard-comments-eoingti .comments-bottom-row .comments-field {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 6px !important; margin: 0 !important;
}
.kboard-comments-eoingti .comments-bottom-row .comments-field-label {
    font-size: 13px !important; color: #555 !important; white-space: nowrap !important; font-weight: 500 !important;
}
.kboard-comments-eoingti .comments-bottom-row input[type="file"] {
    font-size: 13px !important; color: #555 !important;
}
/* 알림받기 완전 숨김 — KBoard가 comments-field 안에 직접 출력하는 경우도 포함 */
.kboard-comments-eoingti .comments-notification-wrap,
.kboard-comments-eoingti .comments-notification-wrap *,
.kboard-comments-eoingti .kboard-comments-notification,
.kboard-comments-eoingti .kboard-comments-notification *,
.kboard-comments-eoingti .comments-field input[name="comment_option_notify"],
.kboard-comments-eoingti .comments-field input[name="comment_option_notify"] ~ *,
.kboard-comments-eoingti .comments-field:has(input[name="comment_option_notify"]) { display: none !important; }

/* =============================================
   1. 헤더
============================================= */
.kboard-comments-eoingti .comments-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    gap: 20px; padding: 14px 20px !important;
    background: #ffffff !important; background-color: #ffffff !important;
    border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    margin-bottom: 20px !important; border: 1px solid #f0f0f0 !important;
    color: #333 !important; isolation: isolate;
}
.kboard-comments-eoingti .comments-header hr { display: none !important; }
.kboard-comments-eoingti .comments-count { font-size: 14px; color: #555; font-weight: 500; }
.kboard-comments-eoingti .comments-total-count { color: #667eea; font-size: 16px; font-weight: 700; margin: 0 3px; }

.kboard-comments-eoingti .comments-sort { display: flex; align-items: center; flex-shrink: 0; }
.kboard-comments-eoingti .comments-sort form { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; }
.kboard-comments-eoingti .comments-sort select {
    height: 38px !important; padding: 0 32px 0 12px !important; font-size: 13px !important; color: #333 !important;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 9L1 4h10z"/></svg>') no-repeat right 10px center !important;
    background-size: 12px !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important;
    cursor: pointer; -webkit-appearance: none !important; appearance: none !important;
    margin: 0 !important; color-scheme: light; width: auto !important;
    box-shadow: none !important; outline: none !important;
}
.kboard-comments-eoingti .comments-sort select:focus { border-color: #667eea !important; }

/* =============================================
   2. 댓글 목록
============================================= */
.kboard-comments-eoingti .comments-list ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.kboard-comments-eoingti .comments-list li { border-bottom: none !important; background: transparent; }
.kboard-comments-eoingti .comments-list li:not(.kboard-comments-item) { margin: 0 !important; padding: 0 !important; list-style: none !important; }

.kboard-comments-eoingti .comments-list li.kboard-comments-item {
    background: #fff !important; border-radius: 10px !important;
    border: 1px solid #efefef !important;
    padding: 20px 24px 16px !important; margin: 0 0 12px 0 !important;
    list-style: none !important; overflow: hidden !important; transition: border-color 0.2s;
    box-shadow: none !important;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item:hover { border-color: #e0e0e0 !important; }
.kboard-comments-eoingti .comments-list li.kboard-comments-item:last-child { margin-bottom: 0 !important; }

.kboard-comments-eoingti .comments-list-header {
    display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 0;
}
.kboard-comments-eoingti .comments-list-meta { display: flex !important; align-items: center; gap: 8px; }
.kboard-comments-eoingti .comments-list-actions { display: flex !important; gap: 6px; }
.kboard-comments-eoingti .comments-list-username { font-size: 14px !important; font-weight: 700 !important; color: #333 !important; }
.kboard-comments-eoingti .comments-list-create { font-size: 12px !important; color: #aaa !important; }

/* 본문 */
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content {
    margin: 12px 0 0 !important; padding: 0 !important;
    font-size: 14px !important; line-height: 1.8 !important; color: #444 !important;
    word-break: break-word !important; overflow: hidden !important; background: transparent !important;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content p {
    margin: 0 0 0.5em !important; padding: 0 !important;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content p:last-child,
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content p:last-of-type,
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content > *:last-child {
    margin-bottom: 0 !important; padding-bottom: 0 !important;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content p:empty,
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content br:last-child {
    display: none !important; margin: 0 !important; height: 0 !important;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-content img {
    max-width: 100% !important; border-radius: 6px; margin: 8px 0 0 !important; display: block;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-image1 img { max-width: 300px !important; }
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-file1 { font-size: 13px; margin-top: 8px; }
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-file1 a { color: #667eea; text-decoration: none; }
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list-file1 a:hover { text-decoration: underline; }

/* hr 제거 */
.kboard-comments-eoingti hr { display: none !important; }
.kboard-comments-eoingti .kboard-comments-item::after,
.kboard-comments-eoingti .kboard-comments-item::before { display: none !important; border: none !important; }

/* 답글 깊이 */
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list {
    margin: 0 !important; padding: 0 !important; border: none !important;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item .comments-list:not(:empty) {
    margin-top: 0 !important; padding-top: 0 !important; border-top: none !important;
}
.kboard-comments-eoingti .comments-list li.kboard-comments-item .kboard-comments-item {
    background: #f8f9fa !important; border-color: #eee !important;
    padding: 14px 18px !important; margin-bottom: 8px !important;
}

/* =============================================
   3. 컨트롤 버튼
============================================= */
.kboard-comments-eoingti .comments-list-controller { display: none !important; }

.kboard-comments-eoingti .comments-button-action {
    display: inline-flex !important; align-items: center; justify-content: center;
    padding: 4px 12px !important; font-size: 12px !important; font-weight: 500 !important;
    border: 1px solid #e0e0e0 !important; border-radius: 20px !important;
    background: #fff !important; color: #666 !important; cursor: pointer;
    transition: all 0.2s; line-height: 1 !important; text-decoration: none !important;
    box-shadow: none !important; outline: none !important;
}
.kboard-comments-eoingti .comments-button-action:hover { border-color: #aaa !important; background: #f8f9fa !important; }
.kboard-comments-eoingti .comments-button-delete { color: #dc3545 !important; border-color: #f5c6cb !important; }
.kboard-comments-eoingti .comments-button-delete:hover { background: rgba(220,53,69,0.06) !important; }
.kboard-comments-eoingti .comments-button-edit { color: #28a745 !important; border-color: #c3e6cb !important; }
.kboard-comments-eoingti .comments-button-edit:hover { background: rgba(40,167,69,0.06) !important; }
.kboard-comments-eoingti .comments-button-like { color: #667eea !important; border-color: #dce1f7 !important; }
.kboard-comments-eoingti .comments-button-like:hover { background: rgba(102,126,234,0.06) !important; }
.kboard-comments-eoingti .comments-button-unlike { color: #dc3545 !important; border-color: #f5c6cb !important; }
.kboard-comments-eoingti .comments-button-unlike:hover { background: rgba(220,53,69,0.06) !important; }
.kboard-comments-eoingti .comments-button-reply { display: none !important; }

/* =============================================
   4. 댓글 입력 폼
============================================= */
.kboard-comments-eoingti .kboard-comments-form {
    margin-top: 24px !important; padding: 20px 24px 20px !important;
    background: #fff !important; border-radius: 10px !important; border: 1px solid #e8e8e8 !important;
    box-shadow: none !important; overflow: visible !important;
    display: block !important;
}
.kboard-comments-eoingti .field-content { margin-bottom: 0px !important; }
.kboard-comments-eoingti .comment-textarea {
    width: 100% !important; min-height: 100px !important; padding: 14px 16px !important;
    font-size: 14px !important; line-height: 1.7 !important; color: #333 !important;
    border: 1px solid #dcdcdc !important; border-radius: 8px !important;
    background: #f8f9fa !important; resize: vertical;
    transition: all 0.2s; box-sizing: border-box !important; font-family: inherit !important;
    box-shadow: none !important; outline: none !important;
}
.kboard-comments-eoingti .comment-textarea:focus {
    background: #fff !important; border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1) !important;
}
.kboard-comments-eoingti .comment-textarea::placeholder { color: #bbb !important; }

.kboard-comments-eoingti .comments-field-wrap {
    display: flex !important; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 0px !important;
}
.kboard-comments-eoingti .comments-field { display: flex !important; align-items: center; gap: 8px; }
.kboard-comments-eoingti .comments-field-label { font-size: 13px !important; font-weight: 500 !important; color: #555 !important; white-space: nowrap; }

.kboard-comments-eoingti .field-member-display input,
.kboard-comments-eoingti .field-password input {
    height: 38px !important; padding: 0 12px !important; font-size: 13px !important;
    border: 1px solid #dcdcdc !important; border-radius: 6px !important;
    background: #f8f9fa !important; color: #333 !important;
    transition: all 0.2s; box-sizing: border-box !important; box-shadow: none !important;
}
.kboard-comments-eoingti .field-member-display input:focus,
.kboard-comments-eoingti .field-password input:focus {
    outline: none !important; background: #fff !important; border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1) !important;
}
.kboard-comments-eoingti .field-image1 input[type="file"],
.kboard-comments-eoingti .field-file1 input[type="file"],
.kboard-comments-eoingti .comments-bottom-row input[type="file"] {
    font-size: 13px !important; color: #555 !important;
    height: auto !important; line-height: normal !important;
    padding: 0 !important; width: auto !important;
    display: inline-block !important; background: none !important;
    border: none !important; box-shadow: none !important;
}

.kboard-comments-eoingti .field-comment-hide,
.kboard-comments-eoingti .field-comment-anonymous { display: none !important; }

/* 알림받기 — CSS에서 숨기지 않음, PHP에서만 제어 */
/* .kboard-comments-eoingti .kboard-comments-notification { } */

.kboard-comments-eoingti .comments-submit-button {
    display: flex !important; justify-content: flex-end !important;
    margin-top: 12px !important; margin-bottom: 0 !important;
}
.kboard-comments-eoingti .comments-submit-button input[type="submit"] {
    display: inline-flex !important; align-items: center; justify-content: center;
    padding: 10px 28px !important; min-height: 40px !important;
    font-size: 14px !important; font-weight: 500 !important; color: #667eea !important;
    background: #fff !important; border: 1px solid #667eea !important; border-radius: 6px !important;
    cursor: pointer; transition: all 0.25s ease; box-shadow: none !important;
    outline: none !important; appearance: none !important;
}
.kboard-comments-eoingti .comments-submit-button input[type="submit"]:hover {
    background: rgba(102,126,234,0.08) !important; transform: translateY(-1px);
}
.kboard-comments-eoingti .comments-reply-form { display: none !important; }

/* =============================================
   5. 로그인 메시지
============================================= */
.kboard-comments-eoingti .kboard-comments-login {
    margin-top: 16px !important; padding: 16px 20px !important;
    background: #f8f9fa !important; border-radius: 8px !important;
    font-size: 14px !important; color: #888 !important; text-align: center;
    border: 1px dashed #e0e0e0 !important;
}
.kboard-comments-eoingti .kboard-comments-login a { color: #667eea !important; text-decoration: none; }
.kboard-comments-eoingti .kboard-comments-login a:hover { text-decoration: underline; }
.kboard-comments-eoingti .remaining_time_for_reading,
.kboard-comments-eoingti .login_is_required_for_reading,
.kboard-comments-eoingti .you_do_not_have_permission { font-size: 13px !important; color: #aaa !important; padding: 8px 0; }
.kboard-comments-eoingti .remaining_time_for_reading a,
.kboard-comments-eoingti .login_is_required_for_reading a { color: #667eea !important; }

/* =============================================
   6. CAPTCHA
============================================= */
.kboard-comments-eoingti .field-captcha { flex-direction: column; align-items: flex-start; gap: 6px; }
.kboard-comments-eoingti .field-captcha input {
    height: 38px !important; padding: 0 12px !important; font-size: 13px !important;
    border: 1px solid #dcdcdc !important; border-radius: 6px !important; background: #f8f9fa !important;
}

/* =============================================
   7. 반응형
============================================= */
@media screen and (max-width: 768px) {
    .kboard-comments-eoingti .comments-header { flex-direction: row !important; padding: 12px 16px !important; gap: 10px; }
    .kboard-comments-eoingti .comments-list li.kboard-comments-item { padding: 16px !important; }
    .kboard-comments-eoingti .kboard-comments-form { padding: 16px !important; }
    .kboard-comments-eoingti .comments-field-wrap { flex-direction: column !important; align-items: stretch !important; }
    .kboard-comments-eoingti .comments-field { flex-wrap: wrap; }
    .kboard-comments-eoingti .field-member-display input,
    .kboard-comments-eoingti .field-password input { width: 100% !important; }
}