/* ======================================== 해설 탭 통합 디자인 시스템 (Simple & Harmonious) ======================================== */

/* ==================== 공통 기본 스타일 ==================== */
.merci-explain-wrap { font-size: 15px; line-height: 1.8; color: #334155; word-break: break-word; overflow-wrap: break-word; }
/* 한국어는 단어 단위 줄바꿈 유지 */
body.lang-korea .merci-explain-wrap { word-break: keep-all; }
.merci-explain-wrap p, .merci-explain-wrap div.line { margin-bottom: 12px; }
.merci-explain-wrap p:last-child, .merci-explain-wrap div.line:last-child { margin-bottom: 0; }

/* ==================== 이탤릭체 복원 (common.css 리셋 대응) ==================== */
.comm_box em, .comm_box i, .comm_box cite, .comm_box address,
.advanced_text em, .advanced_text i, .advanced_text cite, .advanced_text address,
.case_text em, .case_text i, .case_text cite, .case_text address,
.merci-explain-wrap em, .merci-explain-wrap i, .merci-explain-wrap cite, .merci-explain-wrap address,
.problem_n em, .problem_n i, .problem_n cite, .problem_n address,
.case_qn em, .case_qn i, .case_qn cite, .case_qn address,
.case_info em, .case_info i, .case_info cite, .case_info address,
.sub_qn em, .sub_qn i, .sub_qn cite, .sub_qn address,
.answer_li em, .answer_li i, .answer_li cite, .answer_li address,
.no_answer_explan em, .no_answer_explan i, .no_answer_explan cite, .no_answer_explan address { 
    font-style: italic !important; 
}

/* ==================== 키워드 스타일 ==================== */
.merci-kw { background: #eff6ff; color: #2563eb; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.merci-kw-line { border-bottom: 2px solid #3b82f6; padding-bottom: 1px; font-weight: 600; color: #1e293b; }
.merci-kw-mark { background: linear-gradient(to top, #fef08a 50%, transparent 50%); font-weight: 500; }

/* ==================== 시나리오 전용 ==================== */
.merci-scenario-label { display: inline-block; background: #f1f5f9; color: #334155; font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 6px; }
.merci-value { font-family: 'SF Mono', monospace; background: #f8fafc; padding: 2px 6px; border-radius: 4px; font-size: 13px; color: #1e293b; }
.merci-value-abnormal { background: #fef2f2; color: #dc2626; }
.merci-value-normal { background: #f0fdf4; color: #16a34a; }

/* ==================== 해설 본문 컨테이너 ==================== */
.commentary_wr { width: 100%; background: transparent; margin-top: 10px; padding: 0; }
.commentary_wr > .comm_box { width: 100%; font-size: 16px; padding: 20px; background: #fff; border-radius: 12px; line-height: 1.8; color: #334155; border: 1px solid #e2e8f0; }

.detailed_wr .content-box.merci-explain-wrap { background: #fff; border-radius: 12px; margin: 10px 0; }
#advanced .advanced_text, #scenario .advanced_text { font-size: 16px; color: #334155; line-height: 1.8; }
#scenario .case_dia { display: inline-block; padding: 6px 12px; background: #f1f5f9; color: #475569; border-radius: 6px; font-weight: 600; font-size: 13px; margin-bottom: 16px; }

/* 해설 텍스트 공통 */
.advanced_text, .case_text { border-radius: 12px; font-size: 16px; padding: 20px; background: #fff; line-height: 1.8; border: 1px solid #e2e8f0; }
.advanced_text h1, .advanced_text h2, .advanced_text h3, .case_text h1, .case_text h2, .case_text h3 { margin-top: 16px; margin-bottom: 10px; font-weight: 700; color: #1e293b; }
.advanced_text h1, .case_text h1 { font-size: 1.4em; }
.advanced_text h2, .case_text h2 { font-size: 1.2em; }
.advanced_text h3, .case_text h3 { font-size: 1.1em; }
.advanced_text p, .case_text p { margin-bottom: 10px; }
.advanced_text ul, .advanced_text ol, .case_text ul, .case_text ol { margin-left: 20px; margin-bottom: 12px; }
.advanced_text li, .case_text li { margin-bottom: 4px; }
.advanced_text img, .case_text img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }
.advanced_text blockquote, .case_text blockquote { border-left: 3px solid #2097ff; margin: 12px 0; padding: 10px 16px; background: #f8fafc; border-radius: 0 8px 8px 0; }
.advanced_text table, .case_text table { min-width: 100%; border-collapse: collapse; margin: 12px 0; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.advanced_text table::-webkit-scrollbar, .case_text table::-webkit-scrollbar { display: none; }
.advanced_text th, .advanced_text td, .case_text th, .case_text td { border: 1px solid #e2e8f0; padding: 10px 12px; text-align: left; }
.advanced_text th, .case_text th { background: #f8fafc; font-weight: 600; white-space: nowrap; }

/* 정답 표시 */
.comm_bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding: 10px; border-top: 1px solid #f1f5f9; }
.comm_answer { font-size: 15px; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 6px; }

/* AI 하단 문구 */
.ai_caution { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; font-size: 12.5px; color: #5a7799; background: #f4f8ff; border: 1px solid #e3edff; padding: 10px 16px; border-radius: 10px; line-height: 1.55; }
.ai_caution::before { content: ""; width: 15px; height: 15px; flex-shrink: 0; background: url("../img/icon_merciai.png") no-repeat 50% 50% / contain; }

/* ==================== 관련 개념 ==================== */
#concepts { padding: 8px 0; }
#concepts .medi_term { margin-bottom: 16px; background: #fff; border-radius: 12px; padding: 16px 20px; border: 1px solid #e2e8f0; }
#concepts .term_title { font-weight: 700; font-size: 15px; color: #1e293b; margin-bottom: 10px; }
#concepts .term_ex { font-size: 14px; color: #475569; line-height: 1.7; padding-left: 14px; border-left: 2px solid #e2e8f0; }

/* ==================== 문제 평가 피드백 ==================== */
.problem-feedback { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;}
.feedback-label { font-size: 13px; font-weight: 600; color: #64748b; margin: 0; }
.problem-feedback[data-user-star="0"] .feedback-label { display: none; }

/* 초기 상태에서 통계 숨김 처리 */
.stats-hidden { display: none !important; }

/* 초기 상태에서 이모지 크기 확대 */
.problem-feedback[data-user-star="0"] .emoji-btn svg { width: 48px !important; height: 48px !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.problem-feedback[data-user-star="0"] .emoji-group { gap: 12px !important; }
.problem-feedback[data-user-star="0"] .emoji-btn:hover { transform: scale(1.2); }


/* 평가 투표 영역 */
.feedback-voter { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 12px; }
.feedback-title { font-size: 14px; font-weight: 600; color: #334155; margin: 0; }
.feedback-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
.emoji-group { display: flex; align-items: center; gap: 8px; }
.emoji-label { font-size: 12px; font-weight: 500; color: #94a3b8; }
.feedback-incentive { font-size: 11px; color: #94a3b8; margin: 0; }

/* 평가 버튼 */
.emoji-btn { background: transparent; border: none; width: auto !important; height: auto !important; padding: 4px; cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: inline-flex; align-items: center; justify-content: center; }
.emoji-btn:hover { background: transparent; transform: scale(1.2); }
.emoji-btn.clicked { pointer-events: none; }
.emoji-btn.selected-anim { transform: scale(1.4) !important; z-index: 10; }
.emoji-btn.selected-anim svg { color: #2097ff !important; filter: drop-shadow(0 0 8px rgba(32, 151, 255, 0.4)); }
.emoji-btn.fade-out { opacity: 0; transform: scale(0.8); }

.emoji-btn svg { width: 32px !important; height: 32px !important; color: #94a3b8; transition: all 0.2s ease; }
.emoji-btn:hover svg { color: #2097ff; }
.emoji-btn.active svg { color: #2097ff; }

/* 평가 결과 */
.feedback-results { display: flex; align-items: center; justify-content: center; gap: 8px; }
.result-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 8px; min-width: 48px; opacity: 0; transform: translateY(10px); animation: fadeInUp 0.4s ease forwards; }

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.result-item svg { width: 24px !important; height: 24px !important; color: #94a3b8; }
.result-item .result-count { font-size: 12px; font-weight: 600; color: #64748b; }
.result-item.most-selected { background: #eff6ff; }
.result-item.most-selected svg { color: #2097ff; }
.result-item.most-selected .result-count { color: #2097ff; }

/* 평가 카드 내 통합 통계 */
.feedback-stats-divider { border-top: 1px solid #f1f5f9; width: 100%; transition: opacity 0.3s ease; }
.feedback-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; transition: all 0.4s ease; }
.feedback-stats-grid .stat-item { padding: 12px; background: #fafafa; border-radius: 8px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; text-align: left; opacity: 0; transform: scale(0.95); animation: zoomIn 0.4s ease 0.2s forwards; }

@keyframes zoomIn {
    to { opacity: 1; transform: scale(1); }
}

.feedback-stats-grid .stat-label { font-size: 11px; color: #94a3b8; font-weight: 500; }
.feedback-stats-grid .stat-value { font-size: 14px; font-weight: 700; color: #2097ff; }


/* ==================== 풀이 기록 ==================== */
.history { margin: 16px 0 12px; padding: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.history_table { width: 100%; border-collapse: collapse; }
.history_table th { padding: 8px 4px; font-size: 11px; color: #94a3b8; font-weight: 600; text-align: center; border-bottom: 1px solid #f1f5f9; }
.history_table td { padding: 10px 4px; font-size: 13px; color: #334155; border-bottom: 1px solid #f8fafc; text-align: center; }
.history_table tr:last-child td { border-bottom: none; }
.history_table .ans_circle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #e2e8f0; border-radius: 6px; font-weight: 700; font-size: 11px; background: #fff; color: #334155; }
.history_answer { font-weight: 600; }

.time_box_wr { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; margin-top: 14px !important; }
.time_box_wr > div, .time_box_wr .stat-card { flex: 1 !important; padding: 12px !important; background: #fafafa !important; border-radius: 8px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 2px !important; }
.time_box_wr .stat-label { font-size: 11px !important; color: #94a3b8 !important; font-weight: 500 !important; display: flex; align-items: center; gap: 4px; }
.time_box_wr .stat-value { font-size: 14px !important; font-weight: 700 !important; color: #2097ff !important; }
/* 레거시 호환 */
.time_box_wr .tip_new { flex: 1 !important; padding: 12px !important; background: #fafafa !important; border-radius: 8px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 2px !important; }
.time_box_wr .tip_new .f_333, .time_box_wr .f_333 { font-size: 11px !important; color: #94a3b8 !important; font-weight: 500 !important; }
.time_box_wr .tip_new .f_ff8, .time_box_wr .f_ff8 { font-size: 14px !important; font-weight: 700 !important; color: #2097ff !important; }

/* ==================== 해설 탭 네비게이션 ==================== */
.fixed_comu_head { width: 100%; background: #fff !important; border-bottom: none !important; }
.community_header { margin-top: 10px; height: fit-content; background: #fafafa; line-height: 48px; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; display: flex; align-items: center; }
.community_header > div { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.community_header > div::-webkit-scrollbar { display: none; }
.nav-link { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; padding: 0 18px !important; height: 100% !important; line-height: 48px !important; text-align: center !important; white-space: nowrap !important; color: #888 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; cursor: pointer !important; }
.nav-link.on { font-weight: 700 !important; color: #2097ff !important; border-bottom: 2px solid #2097ff !important; }
.nav-link.on::after { display: none !important; }
/* AI 탭 아이콘: img 태그 대신 CSS 배경 — DOM 교체 시 이미지 재디코드로 텍스트보다 늦게 그려지는 깜빡임 방지 */
.nav-link.ai-enhanced::before { content: ""; display: inline-block; flex: 0 0 auto; width: 15px; height: 15px; margin-right: 4px; vertical-align: middle; background: url("../img/icon_merciai.png") no-repeat 50% 50% / contain; }
@media (max-width: 375px) { .nav-link { padding: 0 10px !important; font-size: 13px !important; } .nav-link.ai-enhanced::before { width: 14px; height: 14px; } }

/* ==================== 레거시 호환 ==================== */
html #community_new, html #community_new * { box-sizing: border-box !important; }
html #community_new .comm_wrap { width: 100% !important; max-height: none !important; height: auto !important; overflow-y: visible !important; position: static !important; margin-top: 0 !important; }
html #community_new .community_box { overflow-y: visible !important; padding: 0 !important; margin: 0 !important; background: #fff; height: auto !important; display: block !important; max-width: 100% !important; }
html #community_new .fixed_comu_head { background: #fff !important; max-width: 100% !important; }
html #community_new .scroll_com_wrap { overflow-y: visible !important; height: auto !important; max-width: 100% !important; }
html #community_new .comm_box { width: 100% !important; max-width: 100% !important; }
.scroll_com_wrap { scroll-behavior: auto; margin-bottom: 24px; height: max-content; overflow: visible; }
#community_new { position: static; height: fit-content; }
.comm_wrap { width: 100%; margin-top: 0; background: transparent; position: absolute; right: 0; z-index: 5; }
.no_answer_explan.clickable_wrong { display: none; }
.question_sheet .answer .help-icon { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; color: #334155; font-size: 11px; font-weight: 800; text-indent: 0; margin-left: 4px; cursor: pointer; }
.question_sheet .answer .help-icon:hover { background: #cbd5e1; }
.css-loader { width: 60px; height: 60px; border: 4px solid #f3f3f3; border-top: 4px solid #2097FF; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==================== 필기노트 ==================== */
.note-write-area { background: #fff; border-radius: 12px; padding: 20px; margin-top: 24px; margin-bottom: 16px; }
.note-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; }
.note-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #1e293b; }
.note-count { font-size: 13px; color: #64748b; font-weight: 500; background: #f1f5f9; padding: 3px 10px; border-radius: 10px; }
.note-content { margin-bottom: 16px; }
.note-textarea { width: 100%; min-height: 120px; padding: 14px; border-radius: 10px; background: #fff !important; font-size: 14px; line-height: 1.7; color: #334155; resize: vertical; font-family: inherit; box-sizing: border-box; border: 1px solid #e2e8f0; }
.note-textarea:focus { outline: none; border-color: #2097FF; box-shadow: 0 0 0 3px rgba(32, 151, 255, 0.1); }
.note-textarea::placeholder { color: #94a3b8; }
.note-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.note-switch-label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.note-switch-text { font-size: 13px; font-weight: 500; color: #64748b; }
.note-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.note-switch input { opacity: 0; width: 0; height: 0; }
.note-switch-slider { position: absolute; cursor: pointer; inset: 0; background: #e2e8f0; transition: .2s; border-radius: 20px; }
.note-switch-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background: white; transition: .2s; border-radius: 50%; }
.note-switch input:checked + .note-switch-slider { background: #2097FF; }
.note-switch input:checked + .note-switch-slider:before { transform: translateX(16px); }
.note-buttons { display: flex; gap: 8px; }
.note-btn-secondary, .note-btn-primary { padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 6px; }
.note-btn-secondary { background: #f1f5f9; color: #64748b; }
.note-btn-secondary:hover { background: #e2e8f0; }
.note-btn-primary { background: #2097FF; color: #fff; font-weight: 600; }
.note-btn-primary:hover { background: #1a7fd4; }
.simple-image-upload { width: 100%; margin: 12px 0; }
.upload-area { border-radius: 10px; padding: 16px; text-align: center; background: #fafafa; cursor: pointer; border: 1px dashed #d1d5db; }
.upload-area:hover { border-color: #2097FF; background: #f8fafc; }
.note-list-container { margin-top: 16px; overflow: visible; }
.note-list { list-style: none; padding: 0; margin: 0; overflow: visible; }
.note-list li, .note-list .new_rep_li, .note-list .ctn-note-item { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 10px; border: 1px solid #e2e8f0; transition: border-color 0.15s ease; }
.note-list li:hover, .note-list .new_rep_li:hover, .note-list .ctn-note-item:hover { border-color: #2097FF; }
.note-list .new_reply_top, .note-list .ctn-note-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.note-list .new_reply_name, .note-list .ctn-note-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #1e293b; }
.note-list .new_reply_txt, .note-list .ctn-note-txt { font-size: 14px; line-height: 1.7; color: #475569; word-break: break-word; }
.note-list .new_reply_txt img, .note-list .ctn-note-txt img, .note-list .writeCom img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.note-list .new_reply_under, .note-list .ctn-note-under { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.note-list .ctn-note-date, .note-list .new_reply_date { font-size: 12px; color: #94a3b8; }
.note-list .ctn-note-anony, .note-list .badge .bdg7 { font-size: 11px; color: #ef4444; font-weight: 600; padding: 2px 8px; background: #fef2f2; border-radius: 4px; }
.note-list .reply_menu, .note-list .ctn-note-menu { position: relative; }
.note-list .new_reply_optbtn, .note-list .ctn-note-optbtn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; }
.note-list .new_reply_optbtn:hover, .note-list .ctn-note-optbtn:hover { opacity: 1; }
.note-list .new_reply_optbtn i, .note-list .ctn-note-optbtn i { width: 16px; height: 8px; background: url(/resources/img/ic_dotted.png) no-repeat center/contain; }
.note-list .reply_menu ul, .note-list .ctn-note-opt-layer { position: absolute; top: 100%; right: 0; min-width: 110px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; display: none; z-index: 100; margin-top: 4px; border: 1px solid #e2e8f0; }
.note-list .reply_menu ul.on, .note-list .ctn-note-opt-layer.on { display: block !important; }
.note-list .reply_menu ul li, .note-list .ctn-note-opt-layer li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; }
.note-list .reply_menu ul li a, .note-list .ctn-note-opt-layer li a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 500 !important; color: #334155 !important; text-decoration: none !important; border-radius: 6px !important; }
.note-list .reply_menu ul li a:hover, .note-list .ctn-note-opt-layer li a:hover { background: #f8fafc !important; color: #2097FF !important; }
.note-list .ic-pencil { background-image: url(/resources/img/ic-pencil.png) !important; background-size: contain !important; background-repeat: no-repeat !important; width: 14px; height: 14px; display: inline-block; }
.note-list .ic-delete { background-image: url(/resources/img/ic-delete.png) !important; background-size: contain !important; background-repeat: no-repeat !important; width: 14px; height: 14px; display: inline-block; }
.note-list .ic-report { background-image: url(/resources/img/ic-report.png) !important; background-size: contain !important; background-repeat: no-repeat !important; width: 14px; height: 14px; display: inline-block; }
.note-list .ic-block { background-image: url(/resources/img/ic-block.png) !important; background-size: contain !important; background-repeat: no-repeat !important; width: 14px; height: 14px; display: inline-block; }
.note-list .ctn-note-info { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.note-list .ctn-note-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.note-list .ctn-note-name p { font-size: 14px; font-weight: 600; color: #1e293b; margin: 0; line-height: 1.4; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-list .badge { display: flex; align-items: center; margin: 0; }
.note-list .new_reply_name p { margin: 0; font-size: 14px; font-weight: 500; }
.note-list .writeCom { word-break: break-word; }

/* ==================== 반응형 ==================== */
@media screen and (max-width: 768px) {.commentary_wr > .comm_box { padding: 16px; font-size: 15px; }.problem-feedback { padding: 16px; gap: 12px; }.emoji-btn { width: 36px; height: 36px; }.emoji-btn svg { width: 24px !important; height: 24px !important; }/* 모바일 초기 상태 크기 조정 (선택 전) */.problem-feedback[data-user-star="0"] .emoji-btn svg { width: 36px !important; height: 36px !important; }.problem-feedback[data-user-star="0"] .emoji-group { gap: 10px !important; }.time_box_wr { flex-direction: column; gap: 8px; }.nav-link { padding: 0 14px !important; font-size: 13px !important; }
}

@media screen and (max-width: 480px) {
    .problem-feedback { padding: 14px; }
    .feedback-actions { gap: 8px; }
    .emoji-btn { width: 32px; height: 32px; }
    .emoji-btn svg { width: 20px !important; height: 20px !important; }
    /* 소형 모바일 초기 상태 크기 조정 (선택 전) */
    .problem-feedback[data-user-star="0"] .emoji-btn svg { width: 30px !important; height: 30px !important; }
    .problem-feedback[data-user-star="0"] .emoji-group { gap: 8px !important; }
    
    .history_summary { gap: 6px; }
    .summary_item { padding: 10px 8px; }
    .summary_label { font-size: 10px; }
    .summary_value { font-size: 14px; }
    .history_table th, .history_table td { padding: 8px 6px; font-size: 12px; }
    .nav-link { padding: 0 10px !important; font-size: 12px !important; }
}

/* Animation for line-by-line reveal */
.advanced_text .line { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.advanced_text .line.visible { opacity: 1; transform: translateY(0); }

/* Integrated Navigation and Layout Styles */
.scroll_com_wrap { scroll-behavior: auto; margin-bottom: 24px; height: max-content; overflow: visible; }
.scroll_com_wrap > div { scroll-margin-top: 0; }
.line_span { width: 100%; display: none; height: 5px; border-top: solid 1px #EDEDED; border-bottom: solid 1px #EDEDED; background-color: #FAFAFA; }
.top_navi_new_wrap { display: flex; align-items: center; justify-content: space-between; padding: 0px 0px 10px; border-bottom: 1px solid #808080; }
.s_fbf { background-color: #fff; }
.qu_info { margin-top: 10px; justify-content: center; background: #fff; padding: 10px; border-radius: 10px 10px 0 0; }
#community_new { position: static; top: 0; height: fit-content; left: 0; z-index: 9999; }
.comm_wrap { width: 100%; margin-top: 0; background: transparent; position: absolute; right: 0; z-index: 5; border-radius: 10px 10px 0 0; }
.fixed_comu_head { width: 100%; margin-top: 0px; padding: 0; }
.insight_wrap { margin: 10px 0 80px; height: auto; }
.insight_wrap > p { padding: 10px 0; border-bottom: solid 1px #EDEDED; margin-bottom: 20px; }

/* Note Header & Write Toggle */
.note-header-wrap { display: flex; justify-content: space-between; align-items: center; margin: 15px; }
.note-section-title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0; }
.btn-write-toggle { background: #2097ff; color: #fff; border: none; padding: 10px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-write-toggle:hover { background: #1a7fd4; }

/* ==================== 리뷰 태그 (이론 태그) ==================== */
.review_tag { margin: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag_wr { display: inline-block; }
.tag_wr span { display: inline-block; padding: 6px 12px; background-color: #f1f5f9; color: #475569; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.tag_wr span:hover { background-color: #e2e8f0; color: #2097FF; }

/* ==================== 개선 이력 ==================== */
#improvement_history { border-top: 1px solid #f0f0f0; margin-top: 20px; padding-top: 20px; }
.improvement-list { margin: 0; padding: 0; }
.improvement-item { background: #ffffff; border: 1px solid #e9ecef; border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.improvement-item:last-child { margin-bottom: 0; }
.improvement-request { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.improvement-request p { color: #333; margin: 0; font-size: 13px; line-height: 1.6; flex: 1; }
.improvement-arrow { text-align: center; margin: 6px 0; color: #ddd; font-size: 14px; }
.improvement-result { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.improvement-result p { margin: 0; font-size: 13px; }
.improvement-result p.admin_comment { color: #2e7d32; flex: 1; font-size: 13px; line-height: 1.6; }
.improvement-result p.date { color: #999; font-size: 11px; }
.improvement-chip { display: inline-block; background: #e8f5e9; color: #2e7d32; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.improvement-chip.feedback { background: #fff3e0; color: #e65100; }

/* 도움! 탭 잔존 시 강제 숨김 (상단 아이콘으로 대체됨) */
a.tutor-tab-btn, a#btn_tutor[data-target="tutor"] { display: none !important; }

/* ==================== AI 튜터 패널 ==================== */
.tutor-trigger-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; transition: background 0.15s; }
.tutor-trigger-btn:hover, .tutor-trigger-btn.on { background: #E8F4FF; }
.tutor-trigger-icon { font-size: 18px; line-height: 1; }
.tutor-trigger-icon img { width: 36px; height: 36px; object-fit: contain; display: block; }
/* ── 클로비 말풍선 힌트 ── */
.tutor-bubble-hint { position: absolute; top: calc(100% + 10px); right: -4px; background: #2097FF; color: #fff; border-radius: 14px 4px 14px 14px; padding: 8px 14px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 16px rgba(32,151,255,0.28); z-index: 200; animation: cloviBubbleIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275); pointer-events: auto; }
.tutor-bubble-hint::before { content: ''; position: absolute; top: -7px; right: 8px; border-left: 7px solid transparent; border-right: 0 solid transparent; border-bottom: 7px solid #2097FF; }
.tutor-bubble-hiding { animation: cloviBubbleOut 0.22s ease forwards !important; }
@keyframes cloviBubbleIn { from { opacity:0; transform:translateY(-6px) scale(0.88); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes cloviBubbleOut { to { opacity:0; transform:translateY(-4px) scale(0.92); } }
/* ── 튜터 패널: floating card (드래그 가능) ── */
#tutor_wr { position: fixed !important; bottom: calc(90px + var(--clovi-kb, 0px)); right: 20px; top: auto !important; left: auto !important; width: auto !important; height: auto !important; display: none !important; flex-direction: column !important; background: transparent !important; transition: none !important; pointer-events: auto !important; z-index: 9998 !important; align-items: unset !important; justify-content: unset !important; }
/* 리사이즈 핸들(데스크톱) — 좌상단 */
#tutor_wr > .tutor-panel-wrap { position: relative; }
.clovi-resize-handle { position: absolute; top: 0; left: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 6; touch-action: none; }
.clovi-resize-handle::before { content: ''; position: absolute; top: 7px; left: 7px; width: 9px; height: 9px; border-top: 2px solid rgba(255,255,255,0.75); border-left: 2px solid rgba(255,255,255,0.75); border-radius: 3px 0 0 0; }
@media (max-width: 900px) { .clovi-resize-handle { display: none; } }
#tutor_wr.show { display: flex !important; }
#tutor_wr > .tutor-panel-wrap { width: 380px; max-width: calc(100vw - 40px); height: auto; max-height: 580px; max-height: min(580px, calc(100dvh - 160px)); background-color: #fff; z-index: 1000; padding: 0; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important; overflow: hidden; display: flex; flex-direction: column; pointer-events: auto; touch-action: auto; }
#tutor_wr .tutor-panel-header { cursor: grab !important; user-select: none !important; touch-action: none !important; border-radius: 16px 16px 0 0 !important; }
#tutor_wr .tutor-panel-header:active { cursor: grabbing !important; }
@media screen and (max-width: 560px) { .hira-preview-card-grid { grid-template-columns: 1fr; } .hira-loading-preview .hira-preview-label { width: 104px; } }

@media screen and (max-width: 900px) {
    #tutor_wr { right: 10px; left: 10px; bottom: calc(80px + var(--clovi-kb, 0px)); }
    #tutor_wr > .tutor-panel-wrap { width: calc(100vw - 20px) !important; max-width: none !important; max-height: 70vh !important; max-height: calc(100dvh - 200px) !important; }
}
.tutor-panel { display: flex; flex-direction: column; height: 100%; }
.tutor-panel-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: #2097FF; color: #fff; flex-shrink: 0; position: sticky; top: 0; z-index: 2; }
.tutor-panel-avatar { width: 38px; height: 38px; background: rgba(255,255,255,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.tutor-panel-avatar img { width: 100%; height: 100%; object-fit: contain; }
.tutor-panel-info { flex: 1; min-width: 0; }
.tutor-panel-name { font-size: 14px; font-weight: 700; }
.tutor-panel-desc { font-size: 14px; opacity: 0.75; margin-top: 1px; }
.tutor-panel-reset-btn, .tutor-panel-close-btn { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; }
.tutor-panel-reset-btn:hover, .tutor-panel-close-btn:hover { background: rgba(255,255,255,0.3); }
.tutor-panel-chat { flex: 1; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; touch-action: pan-y; }
.tutor-panel-chat::-webkit-scrollbar { width: 3px; }
.tutor-panel-chat::-webkit-scrollbar-thumb { background: #BDD9FF; border-radius: 3px; }
.tutor-panel-bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; word-break: break-word; animation: tpBubbleIn 0.2s ease; }
@keyframes tpBubbleIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.tutor-panel-bubble.from-tutor { background: #fff; border: 1px solid #DCEEFF; align-self: flex-start; border-radius: 4px 16px 16px 16px; color: #1E293B; }
.tutor-panel-bubble.from-user { background: #2097FF; color: #fff; align-self: flex-end; border-radius: 16px 16px 4px 16px; }
.tutor-panel-thinking { background: #fff; border: 1px solid #DCEEFF; border-radius: 4px 16px 16px 16px; align-self: flex-start; padding: 10px 14px; max-width: 84%; display: flex; align-items: center; gap: 8px; animation: tpBubbleIn 0.2s ease; }
.tutor-panel-thinking .tp-dot { width: 6px; height: 6px; background: #93CAFE; border-radius: 50%; animation: tpDot 1.2s infinite; }
.tutor-panel-thinking .tp-dot:nth-child(2) { animation-delay: 0.2s; }
.tutor-panel-thinking .tp-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes tpDot { 0%,60%,100%{transform:translateY(0);background:#93CAFE} 30%{transform:translateY(-5px);background:#2097FF} }
.tutor-panel-bubble.tutor-typing::after { content: '|'; display: inline; animation: tutorCursor 0.6s step-end infinite; color: #2097FF; font-weight: 300; margin-left: 1px; }
@keyframes tutorCursor { 0%,100%{opacity:1} 50%{opacity:0} }
.tutor-panel-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: stretch; animation: tpBubbleIn 0.25s ease; }
.tutor-panel-chip { background: #fff; color: #2097FF; border: 1.5px solid #DCEEFF; border-radius: 18px; padding: 6px 13px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; line-height: 1.5; white-space: normal; word-break: break-word; text-align: left; }
.tutor-panel-chip:hover { background: #2097FF; color: #fff; border-color: #2097FF; transform: translateY(-1px); }
.tutor-kw { background: #EBF5FF; color: #1480e0; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.tutor-summary-card { background: #EBF5FF; border-radius: 12px; padding: 16px; margin: 8px 0; align-self: stretch; animation: tpBubbleIn 0.2s ease; }
.tutor-summary-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.tutor-summary-title { font-size: 14px; font-weight: 700; color: #1a4a7a; flex: 1; min-width: 0; }
.tutor-summary-copy-btn { flex-shrink: 0; font-size: 11px; font-weight: 600; color: #2097FF; background: #fff; border: 1.5px solid #AECFFF; border-radius: 20px; padding: 4px 12px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; line-height: 1.4; }
.tutor-summary-copy-btn:hover { background: #2097FF; color: #fff; border-color: #2097FF; }
.tutor-summary-row { display: flex; flex-direction: column; margin-bottom: 12px; }
.tutor-summary-row:last-of-type { margin-bottom: 0; }
.tutor-summary-label { font-size: 11px; font-weight: 700; color: #2097FF; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.tutor-summary-value { font-size: 13px; color: #1a4a7a; line-height: 1.65; }
.tutor-summary-next-btn { display: block; width: 100%; padding: 12px; background: #2097FF; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; margin-top: 14px; letter-spacing: 0.01em; pointer-events: auto; }
.tutor-summary-next-btn:hover { background: #1480e0; transform: translateY(-1px); }
.tutor-summary-next-btn:active { transform: translateY(0); }
.tutor-panel-input-wrap { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 14px; border-top: 1px solid #E8F2FF; background: #fff; flex-shrink: 0; margin-top: auto; }
.tutor-panel-input { flex: 1; border: 1.5px solid #DCEEFF; border-radius: 22px; padding: 9px 16px; font-size: 14px; resize: none; outline: none; max-height: 96px; overflow-y: auto; line-height: 1.4; font-family: inherit; transition: border-color 0.2s; background: #F8FBFF; color: #1E293B; }
.tutor-panel-input:focus { border-color: #2097FF; background: #fff; box-shadow: 0 0 0 3px rgba(32,151,255,0.08); }
.tutor-panel-input:disabled { background: #f5f5f5; border-color: #eee; }
.tutor-panel-input::placeholder { color: #94A3B8; }
.tutor-panel-send-btn { width: 38px; height: 38px; background: #2097FF; color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, transform 0.15s; }
.tutor-panel-send-btn:hover { background: #0078E8; transform: scale(1.06); }
.tutor-panel-send-btn:disabled { background: #E2E8F0; cursor: default; transform: none; }

/* ==================== HIRA 처방 데이터 탭 ==================== */
.hira-wrap { background: #fff; border-radius: 12px; margin: 10px 0; }
.hira-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.hira-logo-row{display:flex;align-items:center;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.hira-logo-mark{display:inline-flex;align-items:center;height:40px;padding:0;background:transparent;flex:0 0 auto}
.hira-logo-mark img{display:block;max-height:32px;height:auto;width:auto;max-width:none;object-fit:contain}
.hira-subtitle { font-size: 12px; color: #64748b; line-height: 1.6; margin: 6px 0 0; }
.hira-code-chip { display: inline-flex; align-items: center; background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.hira-date { font-size: 11px; color: #94a3b8; margin-left: 8px; }
.hira-total { font-size: 13px; color: #475569; margin: 8px 0 16px; }
.hira-count { font-size: 20px; color: #0f172a; font-weight: 800; }
.hira-metric-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 14px 0 16px; }
.hira-metric { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.hira-metric-label { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.hira-metric-value { font-size: 16px; font-weight: 800; color: #0f172a; }
.hira-metric-sub { font-size: 10px; color: #94a3b8; margin-top: 2px; }
.hira-chart-title { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 12px; }
.hira-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hira-bar-rank { width: 18px; font-size: 12px; font-weight: 700; color: #94a3b8; text-align: center; flex-shrink: 0; }
.hira-bar-rank.top3 { color: #2097FF; }
.hira-bar-label { width: 160px; font-size: 12px; color: #334155; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hira-bar-icd { font-size: 10px; color: #94a3b8; margin-right: 3px; }
.hira-bar-track { flex: 1; background: #f1f5f9; border-radius: 4px; height: 16px; overflow: hidden; }
.hira-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.hira-bar-fill.r1 { background: linear-gradient(90deg,#1a7fd4,#2097FF); }
.hira-bar-fill.r2 { background: linear-gradient(90deg,#2097FF,#6BBEFF); }
.hira-bar-fill.r3 { background: linear-gradient(90deg,#2097FF,#BDD9FF); }
.hira-bar-fill.r4 { background: linear-gradient(90deg,#475569,#94a3b8); }
.hira-bar-fill.r5 { background: linear-gradient(90deg,#64748b,#cbd5e1); }
.hira-bar-pct { width: 40px; font-size: 12px; font-weight: 700; color: #475569; text-align: right; flex-shrink: 0; }
.hira-insight { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 10px; padding: 12px 14px; margin: 14px 0; font-size: 14px; color: #334155; line-height: 1.7; }
.hira-loading { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #64748b; line-height: 1.6; }
.hira-loading-preview { position: relative; min-height: 132px; border-radius: 12px; overflow: hidden; background: #fff; }
.hira-loading-preview .hira-preview-bg { opacity: .42; filter: saturate(.65); pointer-events: none; }
.hira-loading-preview .hira-preview-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hira-loading-preview .hira-preview-rank { width: 18px; font-size: 12px; font-weight: 700; color: #94a3b8; text-align: center; flex-shrink: 0; }
.hira-loading-preview .hira-preview-label { width: 160px; height: 16px; border-radius: 6px; background: #e8eef6; flex-shrink: 0; }
.hira-loading-preview .hira-preview-track { flex: 1; height: 16px; border-radius: 5px; background: #f1f5f9; overflow: hidden; }
.hira-loading-preview .hira-preview-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg,#8ecbff,#2097FF); }
.hira-loading-preview .hira-preview-pct { width: 40px; height: 14px; border-radius: 6px; background: #e8eef6; flex-shrink: 0; }
.hira-loading-preview .hira-preview-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.hira-loading-preview .hira-preview-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; background: #fff; }
.hira-loading-preview .hira-preview-pill { height: 15px; width: 58%; border-radius: 8px; background: #e8eef6; margin-bottom: 10px; }
.hira-loading-preview .hira-preview-line { height: 11px; border-radius: 6px; background: #edf2f7; margin-top: 7px; }
.hira-loading-preview .hira-preview-line.short { width: 62%; }
.hira-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(248,251,255,.78); backdrop-filter: blur(2px); }
.hira-loading-panel { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #BDD9FF; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(15,23,42,.08); font-size: 13px; font-weight: 700; color: #334155; }
.hira-spinner { width: 18px; height: 18px; border: 3px solid #dbeafe; border-top-color: #2097FF; border-radius: 50%; animation: hiraSpin .8s linear infinite; flex-shrink: 0; }
@keyframes hiraSpin { to { transform: rotate(360deg); } }
.hira-source-note { font-size: 11px; color: #94a3b8; text-align: center; margin-top: 20px; }

/* ── HIRA Phase 2 공통 ── */
.hira-section-divider { border: none; border-top: 1px solid #eef2f7; margin: 24px 0; }
.hira-section-title { font-size: 14px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.hira-section-bar { display: inline-block; width: 3px; height: 14px; border-radius: 2px; flex-shrink: 0; background: #2097FF !important; }
.hira-api-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; }
.hira-tag-hira { background: #EBF5FF; color: #2097FF; border: 1px solid #BDD9FF; }
.hira-tag-eyak { background: #f8fafc; color: #475569; border: 1px solid #dbe4ee; }
.hira-tag-dur  { background: #f8fafc; color: #475569; border: 1px solid #dbe4ee; }

/* ── 성분 정보 ── */
.hira-ing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.hira-ing-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: all 0.2s; }
.hira-ing-card:hover { border-color: #8CCBFF; }
.hira-ing-card.selected { border-color: #2097FF; background: #F8FBFF; }
.hira-ing-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.hira-ing-name-en { font-size: 10px; color: #94a3b8; font-weight: 400; }
.hira-ing-class { font-size: 10px; color: #475569; background: #f1f5f9; padding: 2px 7px; border-radius: 10px; display: inline-block; margin-top: 5px; }
.hira-ing-share { font-size: 18px; font-weight: 800; color: #2097FF; margin-top: 6px; }
.hira-ing-share-label { font-size: 10px; color: #94a3b8; }
.hira-ing-detail-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.hira-ing-detail-title { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 10px; }
.hira-ing-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hira-ing-spec-label { font-size: 10px; color: #94a3b8; margin-bottom: 3px; }
.hira-ing-spec-val { font-size: 12px; font-weight: 700; color: #334155; }
.hira-eyak-block { border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid; }
.hira-eyak-block.green  { background: #f8fafc; border-color: #dbe4ee; }
.hira-eyak-block.blue   { background: #f8fafc; border-color: #dbe4ee; }
.hira-eyak-block.orange { background: #f8fafc; border-color: #dbe4ee; }
.hira-eyak-label { font-size: 11px; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.hira-eyak-label.green  { color: #2097FF; }
.hira-eyak-label.blue   { color: #475569; }
.hira-eyak-label.orange { color: #475569; }
.hira-eyak-text { font-size: 12px; line-height: 1.8; color: #334155; }
.hira-dur-section-title { font-size: 12px; font-weight: 700; color: #334155; margin: 14px 0 8px; display: flex; align-items: center; gap: 6px; }
.hira-dur-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; border: 1px solid; }
.hira-dur-item.red    { background: #fff; border-color: #e2e8f0; }
.hira-dur-item.amber  { background: #fff; border-color: #e2e8f0; }
.hira-dur-item.purple { background: #fff; border-color: #e2e8f0; }
.hira-dur-icon { font-size: 15px; flex-shrink: 0; }
.hira-dur-label { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 2px; }
.hira-dur-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; margin-left: 4px; }
.hira-badge-red    { background: #f1f5f9; color: #475569; }
.hira-badge-amber  { background: #f1f5f9; color: #475569; }
.hira-badge-purple { background: #f1f5f9; color: #475569; }
.hira-dur-text { font-size: 12px; color: #334155; line-height: 1.6; }
@media screen and (max-width: 560px) {.hira-metric-grid, .hira-ing-grid, .hira-ing-spec-grid { grid-template-columns: 1fr; }.hira-bar-label { width: 104px; }}

/* ==================== 제안하기 모달 ==================== */
#exam_report_wr > .box.singo-card, #question_image_wr > .box.singo-card { width: 340px; max-width: calc(100vw - 36px); padding: 0; background: #fff; border-radius: 16px; box-shadow: 0 14px 44px rgba(15,23,42,0.2); overflow: hidden; position: relative; z-index: 1000; }
#exam_report_wr > .box.singo-card { max-height: 92vh; overflow-x: hidden; overflow-y: auto; } /* 검수·관리 메뉴가 길어도 하단 버튼 안 잘리게 내부 스크롤 */
.singo-head { padding: 20px 22px 16px; border-bottom: 1px solid #f1f5f9; }
.singo-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.3; }
.singo-title::before { content: ''; width: 4px; height: 17px; border-radius: 2px; background: #2097FF; flex-shrink: 0; }
.singo-desc { font-size: 13px; color: #64748b; margin: 7px 0 0; line-height: 1.6; }
.singo-body { padding: 18px 22px 4px; }
.singo-select { width: 100%; box-sizing: border-box; padding: 12px 38px 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-weight: 500; color: #334155; background-color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.singo-select:focus { outline: none; border-color: #2097FF; box-shadow: 0 0 0 3px rgba(32,151,255,0.1); }
.singo-textarea-wrap { margin-top: 10px; }
.singo-textarea { width: 100%; box-sizing: border-box; min-height: 124px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; line-height: 1.7; color: #334155; resize: vertical; font-family: inherit; }
.singo-textarea:focus { outline: none; border-color: #2097FF; box-shadow: 0 0 0 3px rgba(32,151,255,0.1); }
.singo-textarea::placeholder { color: #94a3b8; }
.singo-char-count { margin-top: 6px; text-align: right; font-size: 12px; color: #94a3b8; }
.singo-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 20px; }
.singo-btns button { font-family: inherit; }
.singo-review-tools .singo-btns { padding: 0 0 4px; }
.singo-btn-primary { flex: 1 1 100%; padding: 13px; border: none; border-radius: 10px; background: #2097FF; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.singo-btn-primary:hover { background: #1a7fd4; }
.singo-btn-close { flex: 1 1 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #64748b; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.singo-btn-close:hover { background: #f8fafc; }
.singo-btn-edit, .singo-btn-delete, .singo-btn-image, .singo-btn-table, .singo-btn-academic { flex: 1 1 calc(50% - 4px); padding: 11px; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.singo-btn-edit { background: #eff6ff; color: #2097FF; }
.singo-btn-edit:hover { background: #dbeafe; }
.singo-btn-delete { background: #fef2f2; color: #ef4444; }
.singo-btn-delete:hover { background: #fee2e2; }
.singo-btn-image { background: #f5f3ff; color: #8b5cf6; }
.singo-btn-image:hover { background: #ede9fe; }
.singo-btn-academic { background: #fffbeb; color: #d97706; }
.singo-btn-academic:hover { background: #fef3c7; }
.singo-btn-dicom { background: #0f172a; color: #e0f2fe; }
.singo-btn-dicom:hover { background: #1e293b; }
/* 검수·관리 메뉴 — 버튼 증가 대응 2열 그리드 + 기능 그룹 소제목 */
.singo-review-tools .singo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 0 4px; align-items: stretch; }
.singo-review-tools .singo-btns button { flex: 1 1 calc(50% - 4px); margin: 0; padding: 11px 10px; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.25; cursor: pointer; box-sizing: border-box; min-width: 0; }
.singo-review-tools .singo-btns .singo-btn-review.is-done { box-shadow: inset 0 0 0 1.5px #16a34a; border: none; }
.singo-group-label { grid-column: 1 / -1; flex: 1 1 100%; margin: 8px 0 0; font-size: 11px; font-weight: 700; color: #94a3b8; }
.singo-group-label:first-child { margin-top: 0; }

/* AI 이미지 생성 모달 (lv8) */
#question_image_wr { position: fixed; width: 100vw; height: 100vh; display: none; z-index: 999; left: 0; top: 0; }
#question_image_wr.show { display: grid; align-items: center; justify-content: center; }
#question_image_wr > .bg { background: #333; opacity: 0.3; width: 100vw; height: 100vh; position: absolute; }
.qimg-hint { margin-top: 8px; font-size: 12px; color: #ef4444; line-height: 1.5; }
.qimg-style-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qimg-style-btn { padding: 7px 11px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.qimg-style-btn:hover { border-color: #2097FF; color: #2097FF; }
.qimg-style-btn.active { background: #2097FF; border-color: #2097FF; color: #fff; }
#question_image_wr > .box.singo-card { width: 560px; max-height: 92vh; overflow-y: auto; }
.qimg-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.qimg-grid:empty { display: none; }
.qimg-cell { border: 2px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.qimg-cell.qimg-ready { cursor: pointer; }
.qimg-cell.qimg-selected { border-color: #2097FF; box-shadow: 0 0 0 3px rgba(32,151,255,0.18); }
.qimg-cell-thumb { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #f8fafc; }
.qimg-cell-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qimg-cell-name { padding: 9px 6px; font-size: 13px; font-weight: 700; color: #64748b; text-align: center; background: #fff; }
.qimg-cell.qimg-selected .qimg-cell-name { color: #2097FF; }
.qimg-loading-sm { font-size: 13px; color: #94a3b8; }
.qimg-cell-fail { font-size: 14px; color: #ef4444; font-weight: 600; }
.qimg-zoom-btn { position: absolute; top: 10px; right: 10px; padding: 7px 12px; border: none; border-radius: 8px; background: rgba(15,23,42,0.72); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.qimg-zoom-btn:hover { background: rgba(15,23,42,0.92); }
#qimg_lightbox { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.88); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
#qimg_lightbox.show { display: flex; }
#qimg_lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 10px 50px rgba(0,0,0,0.5); }
.singo-btn-sub { flex: 1 1 100%; padding: 13px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f1f5f9; color: #475569; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.singo-btn-sub:hover { background: #e2e8f0; }
.singo-btn-convert { flex: 1 1 100%; padding: 13px; border: none; border-radius: 10px; background: #7c3aed; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.singo-btn-convert:hover { background: #6d28d9; }
/* 채택 버튼 2분할 — [문제에 삽입] / [해설에 삽입] 한 줄에 나란히, 해설은 outline 변형으로 시각 구분 */
.singo-btn-primary.is-half { flex: 1 1 calc(50% - 4px); padding: 13px 6px; }
.singo-btn-primary.is-half.is-explain { background: #fff; color: #2097FF; border: 1.5px solid #2097FF; }
.singo-btn-primary.is-half.is-explain:hover { background: #eff6ff; }
.singo-btn-primary.is-half:disabled { opacity: 0.6; cursor: not-allowed; }
.singo-btn-table { background: #ecfeff; color: #0891b2; }
.singo-btn-table:hover { background: #cffafe; }
.singo-btn-review { flex: 1 1 100%; padding: 12px; border: 1px solid #bbf7d0; border-radius: 10px; background: #f0fdf4; color: #15803d; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.singo-btn-review:hover { background: #dcfce7; }
.singo-btn-review.is-done { background: #fff; color: #16a34a; border: 1.5px solid #16a34a; }
.singo-btn-review:disabled { opacity: 0.6; cursor: not-allowed; }
.singo-review-badge { display: none; align-items: center; gap: 6px; margin: 0 22px 4px; padding: 8px 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; font-size: 13px; font-weight: 600; color: #15803d; }
.singo-review-badge.show { display: flex; }

/* 표 생성 모달 */
#question_table_wr { position: fixed; width: 100vw; height: 100vh; display: none; z-index: 999; left: 0; top: 0; }
#question_table_wr.show { display: grid; align-items: center; justify-content: center; }
#question_table_wr > .bg { background: #333; opacity: 0.3; width: 100vw; height: 100vh; position: absolute; }
#question_table_wr > .box.singo-card { position: relative; z-index: 1000; width: 480px; max-width: calc(100vw - 36px); max-height: 92vh; overflow-y: auto; padding: 0; background: #fff; border-radius: 16px; box-shadow: 0 14px 44px rgba(15,23,42,0.2); }
.qtbl-mode-row { display: flex; gap: 6px; margin-bottom: 12px; }
.qtbl-mode-btn { flex: 1; padding: 9px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.qtbl-mode-btn.active { background: #2097FF; border-color: #2097FF; color: #fff; }
/* 표 유형 버튼 — 이미지 유형(qimg-style)과 동일 패턴 */
.qtbl-type-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qtbl-type-btn { padding: 7px 11px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.qtbl-type-btn:hover { border-color: #2097FF; color: #2097FF; }
.qtbl-type-btn.active { background: #2097FF; border-color: #2097FF; color: #fff; }
.qtbl-drop { display: block; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 24px 16px; text-align: center; cursor: pointer; background: #f8fafc; transition: all 0.15s; }
.qtbl-drop:hover { border-color: #2097FF; }
.qtbl-drop.dragover { border-color: #2097FF; background: #eff6ff; }
.qtbl-drop-text { font-size: 13px; color: #64748b; }
.qtbl-drop-preview { display: block; max-width: 100%; max-height: 200px; border-radius: 8px; margin: 10px auto 0; }
.qtbl-preview { margin-top: 12px; overflow-x: auto; }
.qtbl-preview:empty { display: none; }
.qtbl-loading { font-size: 13px; color: #64748b; padding: 24px 0; text-align: center; }
.qn-ins-table { overflow-x: auto; overflow-y: hidden; margin: 10px 0; padding-bottom: 12px; }
.qn-ins-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.qn-ins-table th, .qn-ins-table td { border: 1px solid #cbd5e1; padding: 7px 9px; text-align: left; }
.qn-ins-table th { background: #f1f5f9; font-weight: 700; }

/* ==================== 논문 출처 (AI 심화해설 근거 / 해설생성4) ==================== */
.merci-cite { font-size: 0.78em; font-weight: 700; color: #2097ff; vertical-align: super; cursor: pointer; }
.merci-source { margin-top: 18px; padding: 14px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.merci-source-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.merci-source-title::before { content: "\1F4DA"; font-size: 14px; }
.merci-source-list { list-style: none; margin: 0; padding: 0; }
.merci-source-item { font-size: 13px; color: #475569; padding: 9px 0; border-top: 1px solid #eef2f7; display: flex; gap: 8px; align-items: baseline; }
.merci-source-item:first-child { border-top: none; padding-top: 2px; }
.merci-source-num { flex-shrink: 0; font-weight: 700; color: #2097ff; }
.merci-source-body { flex: 1; min-width: 0; line-height: 1.45; }
.merci-source-item a { color: #2097ff; text-decoration: none; font-weight: 600; word-break: break-word; }
.merci-source-item a:hover { text-decoration: underline; }
.merci-source-meta { display: block; margin-top: 3px; color: #94a3b8; font-size: 12px; line-height: 1.45; }
.merci-source-level { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #eff6ff; color: #2563eb; margin-left: 6px; vertical-align: middle; }
.qimg-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #e2e8f0; }
.qimg-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #334155; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.qimg-upload-btn:hover { border-color: #2097FF; color: #2097FF; background: #eff6ff; }
.qimg-upload-hint { flex: 1 1 160px; font-size: 11px; color: #94a3b8; line-height: 1.4; }