/*
  analysis.cshtml 전용 스타일시트 파일입니다.
  이 파일의 스타일은 "비교분석" 탭에만 적용됩니다.
*/

/* 예시: 차트 컨테이너 스타일 */
.chart-container {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ======================================================== */
/* ▼▼▼ [신규 추가] 비교분석 필터 바 스타일 ▼▼▼ */
/* ======================================================== */

/* 필터 바 컨테이너 
   (참고: 고정(sticky) 동작은 _Layout.cshtml의 <header>가 담당합니다) 
*/
#analysis-filter-bar {
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

/* 개별 필터 아이템 (레이블 + 셀렉트박스) */
.analysis-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

/* 필터 레이블 (예: '분류1') */
.filter-label {
    font-size: 0.875rem;
    color: #4b5563; /* gray-600 */
    font-weight: 500;
    white-space: nowrap;
}

/* [수정] 셀렉트 박스 스타일 */
.filter-select {
    /* [수정] 넓이 250px 적용 */
    width: 250px; 
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #ffffff;
    font-size: 0.875rem;
    color: #1f2937; /* gray-800 */
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.filter-select:focus {
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}


/* ======================================================== */
/* ▼▼▼ [CSHTML에서 이동됨] 차트 및 콘텐츠 스타일 ▼▼▼ */
/* ======================================================== */

/* analysis.cshtml 내부에만 적용되는 추가 스타일 */
h4.analysis-title {
    font-size: 1.05rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #16a340; /* Green color */
    margin-bottom: 0.5rem;
    text-align: left;
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}
h4.analysis-title::before {
    content: '';
    display: block;
    width: 8px;
    background-color: #16a340; /* Green color */
    margin-right: 0.75rem;
    border-radius: 2px;
    align-self: stretch;
}

#analysis-results h3.analysis-title {
    font-size: 1.3rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #16a340; /* Green color */
    margin-bottom: 0.5rem;
    text-align: left;
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}
#analysis-results h3.analysis-title::before {
    content: '';
    display: block;
    width: 12px;
    background-color: #16a340; /* Green color */
    margin-right: 0.75rem;
    border-radius: 2px;
    align-self: stretch;
}
#analysis-results .title-divider {
    width: 100%;
    height: 1px;
    background-color: #16a340; /* Green color */
    margin-bottom: 1rem;
    border-radius: 1px;
}
#analysis-results .product-info-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}
#analysis-results .product-info-table th,
#analysis-results .product-info-table td {
    border: 1px solid #ddd;
    padding: 12px;
    /* ▼▼▼ [수정] td 중앙 정렬 ▼▼▼ */
    text-align: center; 
}
#analysis-results .product-info-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    width: 30%;
    /* ▼▼▼ [수정] th는 왼쪽 정렬 유지 ▼▼▼ */
    text-align: left; 
}


#analysis-results .product-image-container {
    /* [수정] text-align: center; 대신 flexbox로 중앙 정렬 */
    display: flex;
    flex-direction: column; /* 자식 요소(p, img, p)를 세로로 쌓음 */
    align-items: center; /* 자식 요소를 가로 중앙에 정렬 */
    
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
}

#analysis-results .chart-container {
    width: 100%;
    height: 350px; /* 차트 높이 */
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* ▼▼▼ [신규 추가] 3. 리뷰 품질 분석 스타일 ▼▼▼ */

/* [제거됨] #analysis-results h3.review-quality-title (JS에서 h3.analysis-title 사용) */

/* [제거됨] #analysis-results h4.review-quality-subtitle (JS에서 h4.analysis-title 사용) */

#analysis-results .review-quality-note {
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 1rem;
    text-align: left; /* <-- 이 줄을 추가하세요 */
}

#analysis-results .review-quality-item-list {
    margin-bottom: 1rem;
    padding-left: 1rem;
    line-height: 1.6;
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    text-align: left; /* <-- 이 줄을 추가하세요 */
}

#analysis-results .review-quality-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    margin-top: 1rem;
    margin-bottom: 2.5rem; /* 다음 섹션과의 간격 */
}

#analysis-results .review-quality-table th,
#analysis-results .review-quality-table td {
    border: 1px solid #ddd;
    padding: 10px;
    /* ▼▼▼ [수정] 중앙 정렬 ▼▼▼ */
    text-align: center;
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    vertical-align: middle;
}

#analysis-results .review-quality-table th {
    background-color: #f9f9f9;
    font-weight: 600;
}
/* ▲▲▲ [신규 추가] ▲▲▲ */

/* ▼▼▼ [신규 추가] 3-1, 3-2. 리뷰 샘플 테이블 스타일 ▼▼▼ */
#analysis-results h5.review-sample-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

#analysis-results .review-sample-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    margin-bottom: 2.5rem; /* 다음 섹션과의 간격 */
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem; /* 테이블 폰트 크기 조정 */
}

#analysis-results .review-sample-table th,
#analysis-results .review-sample-table td {
    border: 1px solid #ddd;
    padding: 8px; /* 패딩 약간 줄임 */
    /* ▼▼▼ [수정] 기본 왼쪽 정렬 (개별 td에서 중앙 정렬) ▼▼▼ */
    text-align: left;
    vertical-align: middle;
    line-height: 1.4;
}

#analysis-results .review-sample-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    /* ▼▼▼ [수정] th 중앙 정렬 ▼▼▼ */
    text-align: center;
}

/* 샘플 테이블의 점수/키워드 열 중앙 정렬 */
#analysis-results .review-sample-table td:nth-child(2),
#analysis-results .review-sample-table td:nth-child(4) {
    /* ▼▼▼ [유지] 중앙 정렬 ▼▼▼ */
    text-align: center;
}
/* ▲▲▲ [신규 추가] ▲▲▲ */


/* ▼▼▼ [신규 추가] 4. AI 리뷰 키워드 분석 스타일 ▼▼▼ */
#analysis-results h3.review-keyword-title {
    font-size: 1.3rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #16a340; /* Green color */
    margin-top: 2.5rem; /* 섹션 간 간격 */
    margin-bottom: 1rem;
    padding-bottom: 0.5rem; /* 밑줄을 위한 공간 */
    border-bottom: 1px solid #16a340; /* 녹색 밑줄 1px */
    text-align: left;
}

/* [제거됨] #analysis-results h4.review-keyword-subtitle (JS에서 h4.analysis-title 사용) */

#analysis-results .review-keyword-note {
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 1rem;
    text-align: left; /* <-- 이 줄을 추가하세요 */
}

#analysis-results .review-keyword-item-list {
    margin-bottom: 1rem;
    padding-left: 1rem;
    line-height: 1.6;
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    text-align: left; /* <-- 이 줄을 추가하세요 */
}

#analysis-results .review-keyword-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    margin-top: 1rem;
    margin-bottom: 2.5rem; /* 다음 섹션과의 간격 */
}

#analysis-results .review-keyword-table th,
#analysis-results .review-keyword-table td {
    border: 1px solid #ddd;
    padding: 10px;
    /* ▼▼▼ [수정] 중앙 정렬 ▼▼▼ */
    text-align: center;
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    vertical-align: middle;
}

#analysis-results .review-keyword-table th {
    background-color: #f9f9f9;
    font-weight: 600;
}

/* ▼▼▼ [수정된 부분] ▼▼▼ */

/* [제거됨] .wordcloud-container-grid (주석 포함) */

/* [신규] 키워드 분석 섹션
  새로운 부모 컨테이너입니다. 
  기본적으로 block 요소이므로 자식 요소(워드클라우드, 테이블 등)가 세로로 쌓입니다.
  별도 스타일이 필요 없지만, 구분을 위해 빈 규칙을 추가하거나 
  필요시 margin-bottom 등을 추가할 수 있습니다.
*/
.keyword-analysis-section {
    /* 이 섹션의 자식 요소들이 세로로 배치됩니다. */
    /* 특별한 스타일이 필요하지 않습니다. */
    /* 필요하다면 섹션 전체의 하단 여백 등을 설정할 수 있습니다. */
    margin-bottom: 2.5rem; 
}


/* [유지] 개별 워드클라우드 차트 컨테이너 
  이 스타일은 .keyword-analysis-section 내부에서도 
  각 워드클라우드 상자(#wordcloudA 등)에 계속 적용됩니다.
*/
.wordcloud-container {
    width: 100%;
    min-height: 300px; /* 최소 높이 보장 */
    height: 350px; /* 고정 높이 */
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #f9f9f9; /* 배경색 (ZingChart 설정과 일치) */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    
    /* [수정] 각 워드클라우드와 다음 요소(테이블) 사이의 여백을 줍니다. */
    margin-bottom: 1.5rem;
}
/* ▲▲▲ [수정된 부분 끝] ▲▲▲ */


/* ▼▼▼ [신규 추가] 4-3. 악평 리뷰 리스트 스타일 ▼▼▼ */
.extreme-review-list h5 {
    font-weight: 600;
    font-size: 1.05rem; /* 4-2의 A/B/C 리스트보다 약간 크게 */
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #eee;
    text-align: left; /* <-- 이 줄을 추가하세요 */
}

.extreme-review-list ol {
    list-style-type: decimal;
    padding-left: 1.75rem;
    margin-top: 0.5rem;
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    color: #222;
}

.extreme-review-list li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    text-align: left; /* <-- 이 줄을 추가하세요 */
}

/* ▼▼▼ [수정] clickable-review-snippet 내부가 아닐 때만 회색 적용 ▼▼▼ */
.extreme-review-list li > span:not(.clickable-review-snippet) {
    /* ▼▼▼ [수정] 폰트 크기 1.05rem으로 상향 ▼▼▼ */
    font-size: 1.05rem;
    color: #666;
    margin-left: 0.1rem;
    /*display: block;*/ /* 메타정보를 다음 줄에 표시 */
    /*margin-top: 0.25rem;*/
    text-align: left; /* <-- 이 줄을 추가하세요 */
}
/* ▲▲▲ [수정] ▲▲▲ */

/* ▼▼▼ [신규] clickable-review-snippet 및 내부 span 파란색 강제 적용 ▼▼▼ */
.extreme-review-list li .clickable-review-snippet,
.extreme-review-list li .clickable-review-snippet span {
    color: #2563eb !important; /* 강제로 파란색 적용 */
}

.extreme-review-list li .clickable-review-snippet:hover,
.extreme-review-list li .clickable-review-snippet:hover span {
    color: #1d4ed8 !important; /* 호버 시 진한 파란색 */
    text-decoration: underline;
}
/* ▲▲▲ [신규] ▲▲▲ */

.extreme-review-list p.text-gray-500 {
    padding-left: 1.75rem;
    font-style: italic;
}
/* ▲▲▲ [신규 추가] ▲▲▲ */


/* ▼▼▼ [수정] 모바일(767px 이하) 상세페이지 여백 5px로 일괄 적용 ▼▼▼ */
@media (max-width: 767px) {
    /*
      요청하신 대로, 상세 페이지 전체 내용에 일괄적으로 5px의 좌우 여백을 적용합니다.
      #analysis-results가 모든 상세 콘텐츠를 감싸는 메인 영역이므로,
      여기에 패딩을 적용하여 하위 모든 요소에 일괄적인 여백 효과를 부여합니다.
    */
    #analysis-results {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* 이전 단계에서 개별적으로 여백을 적용했던 스타일들은 제거하고, 
       #analysis-results에 의해 여백이 적용되도록 합니다.
    */

    /* 1. 상품 이미지 컨테이너 (별도 스타일 유지) */
    #analysis-results .product-image-container {
        /* 상하 패딩은 유지하고 좌우 패딩만 #analysis-results에 의해 5px이 적용되도록 합니다. */
    }

    /* 2. 차트 컨테이너 (별도 스타일 유지) */
    #analysis-results .chart-container {
        /* 상하 패딩은 유지하고 좌우 패딩만 #analysis-results에 의해 5px이 적용되도록 합니다. */
    }

    /* 3. 워드클라우드 컨테이너 (테두리 제거 및 간격 조정은 유지) */
    /* [수정] .wordcloud-container-grid가 없어졌으므로 
      이 규칙은 이제 .wordcloud-container 자체에 적용해야 합니다.
    */
    .wordcloud-container {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}
/* ▲▲▲ [수정] ▲▲▲ */


/* ================================================================= */
/* ▼▼▼ [신규 추가] main_review.css에서 가져온 댓글/액션 스타일 ▼▼▼ */
/* ================================================================= */

/* 상세 페이지 액션 (좋아요/싫어요/댓글/조회수) */
/* analysis-render.js가 #analysis-post-actions-container를 생성하지만,
   #post-actions-container ID 선택자의 스타일을 재사용합니다. */
#post-actions-container,
#analysis-post-actions-container {
    display: flex; /* Flexbox 활성화 */
    justify-content: center; /* 가운데 정렬 */
    gap: 1.5rem; /* 아이콘 그룹 사이 간격 */
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    clear: both; 
}

#post-actions-container .action-item,
#analysis-post-actions-container .action-item {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #4b5563; /* Tailwind 'gray-600' */
}

#post-actions-container .action-icon,
#analysis-post-actions-container .action-icon {
    height: 20px;
    width: 20px;
    margin-right: 0.5rem;
}

.action-icon.clickable {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.action-icon.clickable:hover {
    transform: scale(1.1);
}

.action-icon.clicked {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 댓글 폼 스타일 */
#comments-section,
#analysis-comments-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    text-align: left;
}

#comments-section h3,
#analysis-comments-section h3 {
    color: #212529;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: left;
}

#comments-list,
#analysis-comments-list {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    min-height: 80px;
    margin-bottom: 20px;
    text-align: left;
}

.comment-card {
    background-color: #FFFFFF;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.comment-card strong {
    color: #495057;
    font-size: 0.95em;
    font-weight: 600;
    text-align: left;
}

.comment-card .comment-content {
    margin: 10px 0;
    color: #343a40;
    line-height: 1.6;
    text-align: left;
}

.comment-card .comment-date {
    font-size: 0.8em;
    color: #adb5bd;
    display: block; /* 날짜가 오른쪽 아래로 가도록 */
    text-align: left;
}

.comment-actions {
    text-align: left;
    margin-top: 10px;
}

.comment-actions button {
    background-color: #6c757d;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    margin-left: 5px;
    transition: background-color 0.2s;
}

.comment-actions button:hover {
    background-color: #5a6268;
}

.comment-actions .delete-comment-btn {
    background-color: #dc3545;
}

.comment-actions .delete-comment-btn:hover {
    background-color: #c82333;
}

.comment-form {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.comment-form h4 {
    margin-top: 0;
    color: #212529;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
}

.comment-form .form-group {
    margin-bottom: 15px;
}

.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #495057;
    text-align: left;
}

/* ▼▼▼ 2번 이미지(깨진 폼) 문제 해결의 핵심 ▼▼▼
  (input과 textarea에 width: 100% 및 box-sizing 적용)
*/
.comment-form input[type="text"],
.comment-form input[type="password"],
.comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1em;
    color: #495057;
    transition: border-color 0.15s ease-in-out;
    box-sizing: border-box; /* 1번 이미지 문제 해결용 */
    text-align: left;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #0c4a6e;
    box-shadow: 0 0 0 2px rgba(12, 74, 110, 0.1);
}

.comment-form textarea {
    min-height: 80px;
    resize: vertical;
    text-align: left;
}

.comment-form .submit-button {
    background-color: #0c4a6e;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s;
    float: right;
}

.comment-form .submit-button:hover {
    background-color: #0a3d5a;
}

.comment-form::after {
    content: "";
    display: table;
    clear: both;
    text-align: left;
}

/* 글자수 카운터 스타일 */
.char-count {
    font-size: 0.75rem;
    color: #6b7280;
    text-align: right;
    margin-top: 4px;
}

.char-count.warning {
    color: #f59e0b;
    font-weight: 500;
}

.char-count.danger {
    color: #dc2626;
    font-weight: 600;
}

/* ======================================================== */
/* ▼▼▼ [신규] analysis-render.js의 토글 섹션 스타일 ▼▼▼ */
/* ======================================================== */
.toggleable-summary {
    cursor: pointer;
    font-weight: 600;
    color: #374151; /* gray-700 */
    list-style: none; /* 기본 화살표 숨기기 */
    padding: 0.5rem 0;
    margin: 0.5rem 0;
    display: block; /* 블록 레벨 요소로 만들어 전체 너비 클릭 가능하게 */
}
.toggleable-summary:hover {
    color: #1d4ed8; /* blue-700 */
}
/* (+더보기) 텍스트를 summary가 가질 수 있도록 */
.toggleable-summary {
    list-style-type: none;
}
.toggleable-summary::-webkit-details-marker {
    display: none; /* Chrome/Safari */
}
.toggleable-content {
    padding-left: 1rem;
    border-left: 2px solid #e5e7eb; /* gray-200 */
    margin-left: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    font-size: 1.05rem; /* 토글 내부 콘텐츠 폰트 크기 상향 */
    color: #333;
}

/* ======================================================== */
/* ▼▼▼ [신규] '리뷰분석' 탭 연동 스타일 ▼▼▼ */
/* ======================================================== */

/* [신규] '리뷰분석' 탭으로 연결되는 리뷰 스니펫 스타일 */
.clickable-review-snippet {
    color: #2563eb; /* blue-600 */
    text-decoration: none;
    cursor: pointer;
}
.clickable-review-snippet:hover {
    color: #1d4ed8; /* blue-700 */
    text-decoration: underline;
}