/* ==========================================================================
   OCEAN FAQ MODERN SKIN CUSTOMIZATION
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700&display=swap');

/* [1] 전역 초기화 및 폰트 강제 지정 */
#kboard-ocean-faq-list,
#kboard-ocean-faq-document,
#kboard-ocean-faq-editor {
    font-family: 'Noto Sans KR', sans-serif !important;
    letter-spacing: -0.5px !important;
    color: #000000 !important;
}

/* ==========================================================================
   [2] CATEGORY TABS (상단 카테고리 둥근 알약형 디자인 - image_896295.png 반영)
   ========================================================================== */
/* 오션 FAQ 기본 카테고리 레이아웃 초기화 */
#kboard-ocean-faq-list .kboard-header,
#kboard-ocean-faq-list .kboard-category,
.kboard-category-default {
    border: none !important;
    background: transparent !important;
    padding: 0 0 25px 0 !important;
    margin: 0 !important;
}

/* 카테고리 대형 구조 탭 정렬 */
#kboard-ocean-faq-list .kboard-category ul,
.kboard-category-default ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important; /* 카테고리 간격 */
}

#kboard-ocean-faq-list .kboard-category ul li,
.kboard-category-default ul li {
    list-style: none !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* 카테고리 기본 버튼 스타일 (둥근 회색 알약형) */
#kboard-ocean-faq-list .kboard-category ul li a,
.kboard-category-default ul li a {
    display: block !important;
    padding: 10px 22px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #4b5563 !important; /* 부드러운 회색 */
    background-color: #f3f4f6 !important; /* 밝은 회색 바탕 */
    border-radius: 50px !important; /* 완전 둥글게 */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    border: none !important;
}

/* 카테고리 활성화(현재 선택) 및 마우스 호버 스타일 (검정색 알약) */
#kboard-ocean-faq-list .kboard-category ul li.kboard-category-selected a,
.kboard-category-default ul li.kboard-category-selected a,
#kboard-ocean-faq-list .kboard-category ul li a:hover,
.kboard-category-default ul li a:hover {
    color: #ffffff !important;
    background-color: #2d2d2d !important; /* 진한 검정/회색 바탕 */
    font-weight: 500 !important;
}

/* ==========================================================================
   [3] FAQ ACCORDION LIST (질문 & 답변 영역 스타일)
   ========================================================================== */
/* 리스트 전체를 감싸는 영역 라인 초기화 */
#kboard-ocean-faq-list .kboard-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid #111111 !important; /* 맨 상단 굵은 기준선 */
    border-bottom: none !important;
}

/* 각 질문/답변 세트 아이템 */
#kboard-ocean-faq-list .kboard-faq-item {
    list-style: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #d1d5db !important; /* 항목 사이사이 구분선 */
}

/* --------------------------------------------------------------------------
   [3-1] QUESTION (질문 영역): NOTO SANS KR 22PT, 600~700 굵기 검정색
   -------------------------------------------------------------------------- */
#kboard-ocean-faq-list .kboard-faq-question {
    font-size: 22pt !important;
    font-weight: 600 !important;
    color: #000000 !important;
    padding: 28px 60px 28px 10px !important; /* 우측 아이콘 공간 여백 지정 */
    cursor: pointer !important;
    position: relative !important; /* +/- 기호 가상요소 배치용 기준 */
    background: none !important;
}

/* 기존 오션 스킨 아이콘 잔재 강제 제거 */
#kboard-ocean-faq-list .kboard-faq-question::before {
    display: none !important;
}

/* 우측 토글 기호 스타일 (+ / - 기능 추가) */
#kboard-ocean-faq-list .kboard-faq-question::after {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 32px !important; /* 기호 크기 */
    font-weight: 300 !important;
    color: #000000 !important;
    transition: all 0.15s ease !important;
}

/* 답변이 닫혀있을 때 (+) 기호 */
#kboard-ocean-faq-list .kboard-faq-item.answer-hide .kboard-faq-question::after {
    content: "+" !important;
}

/* 답변이 열려있을 때 (-) 기호 */
#kboard-ocean-faq-list .kboard-faq-item .kboard-faq-question::after {
    content: "—" !important; /* 완벽한 가로 대시 라인 처리 */
    font-size: 22px !important;
}

/* --------------------------------------------------------------------------
   [3-2] ANSWER (답변 영역): NOTO SANS KR 22PT, 200~300 굵기 회색
   -------------------------------------------------------------------------- */
/* [핵심 수정] 평소에는 답변 영역을 완전히 숨겨줍니다 */
#kboard-ocean-faq-list .kboard-faq-item.answer-hide .kboard-faq-answer {
    display: none !important;
}

/* [핵심 수정] 클릭해서 answer-hide 클래스가 사라지면 답변 영역을 보여줍니다 */
#kboard-ocean-faq-list .kboard-faq-item .kboard-faq-answer {
    display: block !important;
    background-color: #ffffff !important;
    border: none !important;
    padding: 0 10px 35px 10px !important;
}

/* 답변 내부의 문단 및 텍스트 스타일 정의 */
#kboard-ocean-faq-list .kboard-faq-answer .faq-content-body {
    font-size: 22pt !important;
    font-weight: 300 !important;
    line-height: 1.8 !important;
    color: #6b7280 !important; /* 고급스러운 본문용 회색 */
}

/* 에디터에서 작성된 하위 태그들까지 폰트 크기 및 색상 강제 상속 */
#kboard-ocean-faq-list .kboard-faq-answer .faq-content-body * {
    font-size: 22pt !important;
    font-weight: 300 !important;
    color: #6b7280 !important;
    line-height: 1.8 !important;
}

/* ==========================================================================
   [4] CONTROL BUTTONS & PAGINATION (기타 제어 및 하단 버튼 정돈)
   ========================================================================== */
/* 불필요 항목 차단 */
#kboard-ocean-faq-list .kboard-search,
#kboard-ocean-faq-list .kboard-ocean-faq-poweredby {
    display: none !important;
}

/* 하단 목록 관리자 수정/삭제 버튼 */
#kboard-ocean-faq-list .kboard-faq-control {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px dotted #e5e7eb !important;
    text-align: left !important;
}
.kboard-faq-admin-btn {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    text-decoration: none !important;
    margin-right: 12px !important;
}
.kboard-faq-admin-btn:hover { color: #4b5563 !important; }

/* 하단 신규 글쓰기 버튼 디자인 */
#kboard-ocean-faq-list .kboard-control {
    text-align: right !important;
    padding-top: 20px !important;
}
.kboard-faq-write-btn {
    display: inline-block !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background-color: #1f2937 !important;
    border-radius: 4px !important;
}

/* 페이징 내비게이션 센터 고정 */
#kboard-ocean-faq-list .kboard-pagination {
    width: 100% !important;
    text-align: center !important;
    padding: 40px 0 10px 0 !important;
}
#kboard-ocean-faq-list .kboard-pagination ul.kboard-pagination-pages {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
#kboard-ocean-faq-list .kboard-pagination ul.kboard-pagination-pages li {
    display: inline-block !important;
    list-style: none !important;
    margin: 0 5px !important;
}
#kboard-ocean-faq-list .kboard-pagination ul.kboard-pagination-pages li a {
    color: #6b7280 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    padding: 5px 10px !important;
}
#kboard-ocean-faq-list .kboard-pagination ul.kboard-pagination-pages li.active a {
    font-weight: 700 !important;
    color: #111111 !important;
    border-bottom: 2px solid #111111 !important;
}

/* ==========================================================================
   [5] EDITOR PAGE (글쓰기 화면 최적화 스타일링)
   ========================================================================== */
#kboard-ocean-faq-editor {
    padding: 20px 0 !important;
}
#kboard-ocean-faq-editor .kboard-attr-row {
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 15px 0 !important;
}
#kboard-ocean-faq-editor .attr-name {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    width: 120px !important;
    display: inline-block !important;
}
#kboard-ocean-faq-editor .attr-value input[type="text"],
#kboard-ocean-faq-editor .attr-value input[type="password"],
#kboard-ocean-faq-editor .attr-value select {
    width: 100% !important;
    max-width: 400px !important;
    padding: 8px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}
#kboard-ocean-faq-editor .kboard-content {
    padding: 20px 0 !important;
}

/* ==========================================================================
   [6] MOBILE RESPONSIVE (모바일 가독성 최적화 해상도 분기)
   ========================================================================== */
@media (max-width: 1024px) {
    #kboard-ocean-faq-list .kboard-faq-question { font-size: 17pt !important; padding: 22px 50px 22px 5px !important; }
    #kboard-ocean-faq-list .kboard-faq-answer .faq-content-body,
    #kboard-ocean-faq-list .kboard-faq-answer .faq-content-body * { font-size: 16pt !important; }
    #kboard-ocean-faq-list .kboard-category ul li a, .kboard-category-default ul li a { font-size: 14px !important; padding: 8px 16px !important; }
}