/* =================================== Ticket Wizard — Design System "Warm Precision" aesthetic Pretendard + deep navy + warm paper =================================== */ /* --- Fonts --- */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css'); @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap'); /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Design Tokens --- */ :root { /* Brand */ --primary: #174791; --primary-hover: #0F3672; --primary-light: #E5EDF8; --primary-bg: #EEF3FA; --accent: #10B981; --accent-hover: #059669; --accent-light: #D1FAE5; /* Warm Grays */ --gray-50: #FAFAF8; --gray-100: #F3F2EF; --gray-200: #E8E6E1; --gray-300: #D4D1CC; --gray-400: #A19D97; --gray-500: #78746E; --gray-600: #5C5853; --gray-700: #403D38; --gray-800: #262420; --gray-900: #1A1816; /* Status */ --success: #059669; --success-light: #D1FAE5; --error: #DC2626; --error-light: #FEE2E2; --warning: #D97706; --warning-light: #FEF3C7; --info: #174791; --info-light: var(--primary-light); /* Surfaces */ --surface: #FFFFFF; --background: #F6F5F1; /* Layout */ --max-width: 1440px; --header-height: 56px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Shadows — warm-tinted */ --shadow-border: 0 0 0 1px rgba(26, 24, 22, 0.06); --shadow-sm: 0 0 0 1px rgba(26, 24, 22, 0.06), 0 1px 2px rgba(26, 24, 22, 0.04); --shadow: 0 0 0 1px rgba(26, 24, 22, 0.06), 0 2px 6px rgba(26, 24, 22, 0.04); --shadow-md: 0 0 0 1px rgba(26, 24, 22, 0.06), 0 4px 12px rgba(26, 24, 22, 0.06), 0 12px 24px -8px rgba(26, 24, 22, 0.04); --shadow-lg: 0 0 0 1px rgba(26, 24, 22, 0.08), 0 8px 24px rgba(26, 24, 22, 0.08), 0 24px 48px -12px rgba(26, 24, 22, 0.06); --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(23, 71, 145, 0.4); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration: 200ms; --duration-slow: 350ms; /* 채팅 유사 티켓 라벨 + 근거 tooltip */ --chat-similar-score-font-size: 11px; --chat-similar-score-padding-y: 1px; --chat-similar-score-padding-x: 7px; --chat-similar-score-radius: 9999px; } /* =================================== Dark Mode — "Warm Dark" 같은 토큰 이름을 어두운 값으로 재정의 → var(--...)를 쓰는 모든 요소가 자동 반영. 웜톤(약한 적/갈 기운) 유지로 'Warm Precision' 아이덴티티를 다크에서도 지킨다. 토글: (theme.js + 각 페이지 head 사전 스크립트) =================================== */ :root[data-theme="dark"] { /* Brand — navy는 어두운 배경에서 대비가 부족 → 밝은 청색으로 */ --primary: #6FA0E0; --primary-hover: #8AB4EA; --primary-light: #20344F; --primary-bg: #1A2740; --accent: #34D399; --accent-hover: #6EE7B7; --accent-light: #14342A; /* Warm Grays — 의미를 유지한 채 명도 반전 (50=옅은 면, 900=최강조 텍스트) 50~300=면/경계(어둡게 유지), 400~900=텍스트(어두운 배경에서 충분히 밝게) */ --gray-50: #211E18; --gray-100: #2A261F; --gray-200: #36312A; --gray-300: #4A443B; --gray-400: #A39B90; --gray-500: #BBB2A8; --gray-600: #CFC8BE; --gray-700: #E0DAD1; --gray-800: #EFEBE4; --gray-900: #F8F5EF; /* Status — 다크에서 가독성 위해 밝게, 짝 light는 어두운 틴트로 */ --success: #34D399; --success-light: #14342A; --error: #F87171; --error-light: #3A1E1E; --warning: #FBBF24; --warning-light: #3A2E12; --info: #6FA0E0; --info-light: var(--primary-light); /* Surfaces */ --surface: #1F1C17; --background: #15130F; /* Shadows — 어두운 배경에선 그림자가 안 보임 → 밝은 1px 링 + 진한 드롭섀도 */ --shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.07); --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.55), 0 24px 48px -12px rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(111, 160, 224, 0.5); } /* 다크에서 body 미세 도트 패턴은 밝은 점으로 (라이트는 :root 기본값 유지) */ :root[data-theme="dark"] body { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0); } /* 다크: SSO 로그인 월은 밝은 청색으로 뜨지 않게 깊은 다크 네이비 백드롭 유지 (몰입감) */ :root[data-theme="dark"] #sso-login-overlay { background: linear-gradient(160deg, var(--primary-bg) 0%, var(--background) 100%); } /* 테마 토글 버튼 (해/달) — 헤더 아이콘 버튼, 토큰 기반이라 다크에서 자동 반영 */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--gray-200); border-radius: 9999px; background: var(--surface); color: var(--gray-600); font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .theme-toggle:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .theme-toggle:active { transform: scale(0.94); } /* --- Base --- */ body { font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background-color: var(--background); background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.025) 1px, transparent 0); background-size: 20px 20px; color: var(--gray-800); line-height: 1.6; min-height: 100vh; font-feature-settings: 'ss01' on, 'cv01' on; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--primary-light); color: var(--primary); } /* --- Header --- */ .header { background: var(--surface); color: var(--gray-800); padding: 0 24px; height: var(--header-height); display: flex; align-items: center; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; border-bottom: 2px solid var(--primary); } .header-inner { max-width: var(--max-width); width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .header-title { font-family: 'Outfit', 'Pretendard Variable', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; color: var(--primary); } .header-icon { font-size: 22px; line-height: 1; } .header-subtitle { font-size: 12px; font-weight: 500; color: var(--gray-400); letter-spacing: 0.5px; text-transform: uppercase; } /* --- Main Layout --- */ .main { max-width: var(--max-width); margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; } /* Left panel — sticky sidebar */ .panel-left { position: sticky; top: calc(var(--header-height) + 24px); max-height: calc(100vh - var(--header-height) - 48px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } .panel-left::-webkit-scrollbar { width: 5px; } .panel-left::-webkit-scrollbar-track { background: transparent; } .panel-left::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; } /* Right panel */ .panel-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* --- Empty State --- */ .empty-state { text-align: center; padding: 64px 32px; color: var(--gray-400); font-size: 14px; line-height: 1.9; border: 2px dashed var(--gray-200); background: transparent; box-shadow: none; } .empty-state:hover { box-shadow: none; } .empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.6; } /* --- Cards --- */ .card { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); border: none; transition: box-shadow var(--duration) var(--ease-out); } .card:hover { box-shadow: var(--shadow-md); } /* --- Section Title --- */ .section-title { font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .section-title::before { content: ''; width: 3px; height: 14px; background: var(--primary); border-radius: 2px; flex-shrink: 0; } /* --- Sample Scenarios --- */ .sample-scenarios { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 12px 14px; background: var(--gray-50); border-radius: var(--radius); box-shadow: var(--shadow-border); } .sample-label { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .sample-btn { padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: inherit; border: none; background: var(--surface); color: var(--gray-600); border-radius: 6px; cursor: pointer; transition: all var(--duration) var(--ease-out); white-space: nowrap; box-shadow: var(--shadow-sm); } .sample-btn:hover { color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .sample-btn.active { background: var(--primary); color: white; box-shadow: 0 0 0 1px var(--primary), 0 2px 4px rgba(23, 71, 145, 0.2); } /* --- Forms --- */ .form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .form-group { display: flex; flex-direction: column; gap: 4px; } .form-group.full-width { grid-column: 1 / -1; } .form-group label { font-size: 12px; font-weight: 600; color: var(--gray-600); } .form-group input, .form-group textarea { padding: 8px 12px; font-size: 13px; border: none; border-radius: var(--radius); color: var(--gray-800); background: var(--surface); box-shadow: inset 0 0 0 1px var(--gray-200); transition: box-shadow var(--duration) var(--ease-out), background var(--duration) var(--ease-out); font-family: inherit; resize: vertical; line-height: 1.5; } .form-group input:hover, .form-group textarea:hover { box-shadow: inset 0 0 0 1px var(--gray-300); } .form-group input:focus, .form-group textarea:focus { outline: none; box-shadow: var(--focus-ring); background: var(--surface); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-400); font-weight: 400; } .input-with-btn { display: flex; gap: 8px; } .input-with-btn input { flex: 1; } .input-with-btn .btn { white-space: nowrap; padding: 9px 14px; } /* Ticket title display */ .ticket-title-display { font-size: 13px; font-weight: 600; color: var(--gray-800); padding: 8px 12px; line-height: 1.5; border: 1px solid var(--gray-200); border-radius: 8px; background: var(--gray-50); } /* Readonly */ .form-group input[readonly], .form-group textarea[readonly] { background: var(--gray-50); color: var(--gray-500); cursor: default; box-shadow: inset 0 0 0 1px var(--gray-200); } .form-group input[readonly].filled, .form-group textarea[readonly].filled { color: var(--gray-800); } /* --- Comments Thread --- */ .comments-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .comments-header label { font-size: 12px; font-weight: 600; color: var(--gray-600); } .comments-actions { display: flex; gap: 4px; } .comments-hint { font-size: 12px; color: var(--gray-400); margin-bottom: 10px; } #comments-list { max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } #comments-list::-webkit-scrollbar { width: 6px; } #comments-list::-webkit-scrollbar-track { background: transparent; } #comments-list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; } .comment-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius); margin-bottom: 6px; background: var(--surface); box-shadow: var(--shadow-border); transition: all var(--duration) var(--ease-out); } .comment-item:hover { box-shadow: var(--shadow-sm); } .comment-item.selected { box-shadow: inset 0 0 0 2px var(--primary), 0 1px 3px rgba(23, 71, 145, 0.08); background: var(--primary-bg); } .comment-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; } .comment-body { flex: 1; min-width: 0; } .comment-meta { font-size: 10px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 3px; } .comment-header { display: flex; align-items: center; cursor: pointer; gap: 8px; } .comment-summary { font-size: 13px; color: var(--gray-600); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; } .accordion-arrow { font-size: 10px; color: var(--gray-400); flex-shrink: 0; transition: transform var(--duration) var(--ease-out); } .comment-text { font-size: 13px; color: var(--gray-700); line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-200); max-height: 150px; overflow-y: auto; } /* --- Attachments --- */ .comment-attachments { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .attachment-badge { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; } .attachment-text { background: var(--accent-bg, #e8f4fd); color: var(--accent, #1a6fb5); border: 1px solid var(--accent-border, #b8ddf0); } .attachment-other { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-200); } /* --- Input Actions --- */ .input-actions { margin-top: 18px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; font-size: 13px; font-weight: 600; border: none; border-radius: var(--radius); cursor: pointer; transition: all var(--duration) var(--ease-out); font-family: inherit; white-space: nowrap; line-height: 1.4; position: relative; } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; } .btn-icon { font-size: 14px; } .btn-primary { background: var(--primary); color: white; box-shadow: 0 0 0 1px rgba(23, 71, 145, 0.2), 0 1px 3px rgba(23, 71, 145, 0.15); } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 0 0 1px rgba(23, 71, 145, 0.3), 0 4px 8px rgba(23, 71, 145, 0.15); transform: translateY(-1px); } .btn-accent { background: var(--primary); color: white; box-shadow: 0 0 0 1px rgba(23, 71, 145, 0.2), 0 1px 3px rgba(23, 71, 145, 0.15); } .btn-accent:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 0 0 1px rgba(23, 71, 145, 0.3), 0 4px 8px rgba(23, 71, 145, 0.15); transform: translateY(-1px); } .btn-secondary { background: var(--gray-100); color: var(--gray-700); box-shadow: var(--shadow-border); } .btn-secondary:hover:not(:disabled) { background: var(--gray-200); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .btn-outline { background: var(--surface); color: var(--gray-600); box-shadow: inset 0 0 0 1px var(--gray-200); } .btn-outline:hover:not(:disabled) { background: var(--gray-50); color: var(--gray-800); box-shadow: inset 0 0 0 1px var(--gray-300); transform: translateY(-1px); } .btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 6px; } .btn-danger { color: var(--error); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.25); } .btn-danger:hover:not(:disabled) { background: var(--error-light); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.4); } /* --- Loading --- */ .loading-section { text-align: center; padding: 56px 28px; } .spinner { width: 36px; height: 36px; border: 3px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 16px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; } .loading-subtext { font-size: 12px; color: var(--gray-400); } /* --- Draft Section --- */ .draft-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .draft-header .section-title { margin-bottom: 0; } .draft-actions-top { display: flex; gap: 6px; } .edit-hint { font-size: 11px; font-weight: 600; color: var(--primary); cursor: pointer; } .edit-hint:hover { text-decoration: underline; } .draft-preview { font-size: 14px; line-height: 1.8; color: var(--gray-800); padding: 16px; max-height: 70vh; overflow-y: auto; } .draft-preview h2 { font-size: 15px; font-weight: 700; color: var(--primary); margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--gray-200); } .draft-preview h3 { font-size: 14px; font-weight: 600; color: var(--gray-700); margin: 14px 0 6px; } .draft-preview code { font-size: 12.5px; padding: 1px 5px; background: var(--gray-100); border-radius: 3px; } .draft-preview pre { background: var(--gray-900); color: #E6E6E6; padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: 12.5px; margin: 8px 0; } .draft-preview pre code { background: none; color: inherit; padding: 0; } .draft-preview a { color: var(--primary); text-decoration: none; border-bottom: 1px dashed var(--primary); } /* Draft blocks (legacy accordion structure) */ .draft-block { border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; box-shadow: var(--shadow-border); transition: box-shadow var(--duration) var(--ease-out); } .draft-block:last-child { margin-bottom: 0; } .draft-block:hover { box-shadow: var(--shadow-sm); } .draft-block-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--gray-50); cursor: pointer; user-select: none; border-bottom: 1px solid var(--gray-100); transition: background var(--duration-fast) var(--ease-out); } .draft-block-header:hover { background: var(--gray-100); } .draft-block-header h3 { font-size: 13px; font-weight: 600; color: var(--gray-700); display: flex; align-items: center; gap: 6px; } .collapse-icon { font-size: 9px; transition: transform var(--duration) var(--ease-out); display: inline-block; color: var(--gray-400); } .draft-block.collapsed .collapse-icon { transform: rotate(-90deg); } .draft-block.collapsed .draft-block-content { display: none; } .draft-block-content { padding: 14px; } /* Editable area (legacy) */ .editable-area { min-height: 60px; padding: 12px; border: 1px dashed var(--gray-200); border-radius: var(--radius); font-size: 14px; line-height: 1.7; color: var(--gray-700); background: var(--gray-50); transition: all var(--duration) var(--ease-out); outline: none; white-space: pre-wrap; word-wrap: break-word; } .editable-area:hover { border-color: transparent; background: var(--surface); box-shadow: var(--shadow-sm); } .editable-area:focus { border-color: transparent; background: var(--surface); box-shadow: var(--focus-ring); } .editable-area a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary-light); } .editable-area a:hover { border-bottom-color: var(--primary); } /* Draft textarea */ .draft-textarea { display: block; width: 100%; box-sizing: border-box; padding: 16px; font-family: inherit; font-size: 14px; line-height: 1.75; color: var(--gray-800); background: var(--gray-50); border: none; border-radius: var(--radius); resize: vertical; outline: none; white-space: pre-wrap; word-wrap: break-word; box-shadow: inset 0 0 0 1px var(--gray-200); transition: all var(--duration) var(--ease-out); } .draft-textarea:focus { box-shadow: var(--focus-ring); background: var(--surface); } /* --- Action Section --- */ .action-section { padding: 16px 24px; } .action-buttons { display: flex; justify-content: flex-end; gap: 10px; } /* --- Info Bar --- */ .info-bar { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 12px 20px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .info-item { display: flex; align-items: center; gap: 6px; } .info-label { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; } .info-value { font-size: 12px; color: var(--gray-700); font-weight: 600; } /* Reference badge */ .reference-badge { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 700; border-radius: 9999px; } .reference-high { background: var(--success-light); color: var(--success); } .reference-medium { background: var(--warning-light); color: var(--warning); } .reference-low { background: var(--error-light); color: var(--error); } /* --- Preview Panel --- */ .preview-panel { margin-top: 12px; padding: 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-border); max-height: 500px; overflow-y: auto; line-height: 1.75; font-size: 14px; color: var(--gray-800); } .preview-panel h2 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; color: var(--primary); padding-bottom: 4px; border-bottom: 1px solid var(--gray-200); } .preview-panel h3 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; color: var(--primary); } .preview-panel h4 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; } .preview-panel ul, .preview-panel ol { margin: 6px 0; padding-left: 20px; } .preview-panel li { margin-bottom: 3px; } .preview-panel strong { color: var(--gray-900); } .preview-panel code { background: var(--gray-100); padding: 1px 5px; border-radius: 3px; font-size: 13px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; } .preview-panel .preview-code { background: var(--gray-900); color: #E6E6E6; padding: 14px 16px; border-radius: var(--radius); font-size: 13px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; overflow-x: auto; margin: 8px 0; line-height: 1.5; } .preview-panel .preview-code code { background: none !important; color: #E6E6E6 !important; padding: 0; } .draft-gate-badge { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 700; border-radius: 9999px; } .draft-gate-ok { background: var(--success-light); color: var(--success); } .draft-gate-warn { background: var(--warning-light); color: var(--warning); } /* 내부 검토 경고 배지 — 발송 본문이 아니라 미리보기 상단에만 노출 */ .draft-route-warning { padding: 8px 12px; font-size: 12px; line-height: 1.5; background: var(--warning-light); color: var(--warning); border-radius: var(--radius); margin-bottom: 8px; } .draft-review-warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .draft-review-warning-badge { padding: 8px 12px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--warning-light); color: var(--warning); border-radius: var(--radius); } .ungrounded-line { background: var(--warning-light); border-left: 3px solid var(--warning); color: inherit; padding: 2px 6px; display: inline; border-radius: 0; } /* --- Toast Messages --- */ #toast-container { position: fixed; top: calc(var(--header-height) + 12px); right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; } .toast { padding: 10px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toastIn var(--duration-slow) var(--ease-spring), toastOut 300ms ease 2.7s forwards; max-width: 340px; backdrop-filter: blur(8px); } .toast-success { background: rgba(5, 150, 105, 0.95); color: white; } .toast-error { background: rgba(220, 38, 38, 0.95); color: white; /* 에러는 자동 페이드아웃(2.7s) 없이 유지 — JS가 60초 후 제거하거나 클릭으로 닫는다 */ animation: toastIn var(--duration-slow) var(--ease-spring); } .toast-info { background: rgba(26, 24, 22, 0.9); color: white; } @keyframes toastIn { from { transform: translateX(100%) scale(0.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes toastOut { to { opacity: 0; transform: translateY(-8px) scale(0.95); } } /* --- Modal --- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; animation: modalFadeIn var(--duration) var(--ease-out); } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-overlay { position: absolute; inset: 0; background: rgba(26, 24, 22, 0.5); backdrop-filter: blur(4px); } .modal-content { position: relative; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 90%; max-width: 520px; max-height: 90vh; overflow-y: auto; animation: modalSlideUp var(--duration-slow) var(--ease-spring); } @keyframes modalSlideUp { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid var(--gray-200); } .modal-header h3 { font-size: 15px; font-weight: 700; color: var(--gray-800); } .modal-close { background: none; border: none; font-size: 20px; color: var(--gray-400); cursor: pointer; padding: 4px; line-height: 1; border-radius: 4px; transition: all var(--duration-fast) var(--ease-out); } .modal-close:hover { color: var(--gray-600); background: var(--gray-100); } .modal-body { padding: 20px 24px; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--gray-200); } /* Auth guide (in modal) */ .auth-guide { background: var(--gray-50); border-radius: var(--radius); padding: 14px; margin: 10px 0; box-shadow: var(--shadow-border); } .auth-guide-title { font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 10px; line-height: 1.5; } .auth-command { display: flex; align-items: center; gap: 8px; background: var(--gray-900); padding: 8px 12px; border-radius: 6px; } .auth-command code { flex: 1; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; color: #E6E6E6; } .auth-command .copy-btn { color: var(--gray-400); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); font-size: 10px; padding: 3px 8px; } .auth-command .copy-btn:hover { background: rgba(255, 255, 255, 0.1); color: white; } .auth-guide-hint { font-size: 11px; color: var(--gray-400); margin-top: 6px; } /* --- Analysis Section --- */ .analysis-section { border-left: 3px solid var(--primary); } .analysis-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .analysis-header .section-title { margin-bottom: 0; } .analysis-header-right { display: flex; align-items: center; gap: 10px; } .analysis-status-text { font-size: 12px; font-weight: 600; color: var(--primary); animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .analysis-steps { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; scrollbar-width: thin; } .analysis-step { padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius); box-shadow: var(--shadow-border); transition: all var(--duration) var(--ease-out); animation: stepIn var(--duration-slow) var(--ease-spring); } @keyframes stepIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .analysis-step.done { box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.2); background: #F0FDF4; } .analysis-step.error { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.2); background: var(--error-light); } .step-header { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--gray-700); } .step-icon { font-size: 13px; flex-shrink: 0; } .step-action { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 11px; color: var(--gray-600); } .step-reasoning { margin-bottom: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--gray-700); background: var(--surface); border-radius: 4px; border-left: 3px solid var(--primary); white-space: pre-wrap; } .step-finding { margin-top: 4px; margin-left: 22px; font-size: 11px; color: var(--gray-500); } .spinner-sm { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; } .analysis-loading { display: flex; align-items: center; gap: 10px; padding: 14px; color: var(--gray-500); font-size: 13px; } .analysis-bottom-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-bg); border: 1px dashed rgba(23, 71, 145, 0.3); border-radius: var(--radius); animation: pulse 1.5s ease-in-out infinite; position: sticky; bottom: 0; } /* Diagnosis */ .analysis-diagnosis { margin-top: 14px; padding: 18px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); } .diagnosis-meta { display: flex; gap: 10px; margin-bottom: 12px; font-size: 11px; font-weight: 600; color: var(--gray-500); } .diagnosis-meta span { background: var(--gray-100); padding: 2px 8px; border-radius: 4px; } .diagnosis-content { font-size: 14px; line-height: 1.75; color: var(--gray-700); } .diagnosis-content h2 { font-size: 15px; font-weight: 700; color: var(--primary); margin: 16px 0 6px; } .diagnosis-content h3 { font-size: 14px; font-weight: 700; color: var(--primary); margin: 14px 0 6px; } .diagnosis-content ul, .diagnosis-content ol { margin: 6px 0; padding-left: 20px; } .diagnosis-content li { margin-bottom: 3px; } .diagnosis-content code { background: var(--gray-100); padding: 1px 4px; border-radius: 3px; font-size: 12px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; } .diagnosis-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-200); } .diagnosis-error { color: var(--error); font-size: 13px; line-height: 1.5; } .error-icon { font-size: 16px; } /* --- Footer --- */ .footer { text-align: center; padding: 20px; color: var(--gray-400); font-size: 11px; font-weight: 500; letter-spacing: 0.3px; } /* --- Utilities --- */ .hidden { display: none !important; } /* Section appear animation */ @keyframes fadeUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .draft-section, .action-section, .info-bar, .loading-section, .analysis-section { animation: fadeUp var(--duration-slow) var(--ease-out); } /* --- Responsive: Desktop wide --- */ @media (min-width: 769px) { #comments-list { max-height: 400px; } } /* --- Responsive: Tablet --- */ @media (max-width: 1100px) and (min-width: 769px) { .main { grid-template-columns: 340px 1fr; gap: 16px; } } /* --- Responsive: Mobile --- */ @media (max-width: 768px) { :root { --header-height: 48px; } .header { padding: 0 16px; } .header-title { font-size: 16px; } .header-subtitle { font-size: 11px; } .main { grid-template-columns: 1fr; padding: 16px; gap: 12px; } .panel-left { position: static; max-height: none; overflow-y: visible; } .card { padding: 18px; } .form-grid { grid-template-columns: 1fr; } .input-actions { flex-direction: column; } .input-actions .btn { width: 100%; } .action-buttons { flex-direction: column; } .action-buttons .btn { width: 100%; } .info-bar { flex-direction: column; gap: 8px; } .sample-scenarios { flex-direction: column; align-items: flex-start; } .draft-header { flex-direction: column; align-items: flex-start; gap: 8px; } } /* =================================== Compare Page — Campaign Evaluation =================================== */ /* Compare layout */ .compare-container { max-width: var(--max-width); margin: 0 auto; padding: 24px; } /* Top nav bar */ .compare-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 20px; } .compare-nav-left { display: flex; align-items: center; gap: 12px; } .compare-nav-center { display: flex; align-items: center; gap: 12px; } .compare-nav-right { display: flex; align-items: center; gap: 8px; } .compare-counter { font-size: 13px; font-weight: 700; color: var(--gray-700); font-variant-numeric: tabular-nums; } .compare-counter span { color: var(--primary); } /* Progress bar */ .compare-progress { width: 200px; height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; } .compare-progress-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width var(--duration-slow) var(--ease-out); } /* Ticket info header */ .compare-ticket-info { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 20px; } .compare-ticket-id { font-size: 13px; font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 3px 10px; border-radius: 6px; white-space: nowrap; } .compare-ticket-subject { font-size: 15px; font-weight: 600; color: var(--gray-800); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compare-ticket-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 9999px; white-space: nowrap; } .status-solved { background: var(--success-light); color: var(--success); } .status-pending { background: var(--warning-light); color: var(--warning); } .status-open { background: var(--info-light); color: var(--info); } /* Side-by-side panels */ .compare-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .compare-panel { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .compare-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); } .compare-panel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .compare-panel.ai .compare-panel-label { color: var(--primary); } .compare-panel.human .compare-panel-label { color: var(--accent); } .compare-panel.ai { box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(23, 71, 145, 0.08); } .compare-panel.ai .compare-panel-header { border-top: 4px solid var(--primary); background: var(--primary-bg); } .compare-panel.human .compare-panel-header { border-top: 3px solid var(--accent); } .compare-panel-meta { font-size: 11px; color: var(--gray-400); font-weight: 500; } .compare-panel-body { padding: 20px; font-size: 14px; line-height: 1.8; color: var(--gray-700); flex: 1; max-height: 600px; overflow-y: auto; scrollbar-width: thin; } .compare-panel-body h2 { font-size: 15px; font-weight: 700; color: var(--gray-800); margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--gray-200); } .compare-panel-body h3 { font-size: 14px; font-weight: 700; color: var(--gray-800); margin: 14px 0 4px; } .compare-panel-body ul, .compare-panel-body ol { margin: 6px 0; padding-left: 20px; } .compare-panel-body li { margin-bottom: 3px; } .compare-panel-body code { background: var(--gray-100); padding: 1px 4px; border-radius: 3px; font-size: 13px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; } .compare-panel-body pre { background: var(--gray-900); color: #E6E6E6; padding: 12px 16px; border-radius: var(--radius); font-size: 13px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; overflow-x: auto; margin: 8px 0; } .compare-panel-body pre code { background: none; color: inherit; padding: 0; } .compare-empty { color: var(--gray-400); font-style: italic; text-align: center; padding: 40px 20px; } /* Evaluation form */ .eval-form { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; } .eval-form .section-title { margin-bottom: 20px; } .eval-ratings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; } .eval-rating-group { display: flex; flex-direction: column; gap: 8px; } .eval-rating-label { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; } .star-rating { display: flex; gap: 4px; direction: rtl; justify-content: flex-end; } .star-rating input { display: none; } .star-rating label { font-size: 24px; cursor: pointer; color: var(--gray-200); transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); line-height: 1; } .star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #F59E0B; } .star-rating label:hover { transform: scale(1.15); } .star-value { font-size: 12px; font-weight: 700; color: var(--gray-400); min-height: 18px; font-variant-numeric: tabular-nums; } .eval-feedback { margin-bottom: 18px; } .eval-feedback textarea { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.6; border: none; border-radius: var(--radius); background: var(--surface); color: var(--gray-800); box-shadow: inset 0 0 0 1px var(--gray-200); transition: box-shadow var(--duration) var(--ease-out); resize: vertical; } .eval-feedback textarea:focus { outline: none; box-shadow: var(--focus-ring); } .eval-actions { display: flex; justify-content: space-between; align-items: center; } .eval-saved-indicator { font-size: 12px; font-weight: 600; color: var(--success); opacity: 0; transition: opacity var(--duration) var(--ease-out); } .eval-saved-indicator.visible { opacity: 1; } /* Keyboard shortcuts hint */ .shortcuts-hint { display: flex; gap: 16px; font-size: 11px; color: var(--gray-400); font-weight: 500; } .shortcuts-hint kbd { background: var(--gray-100); padding: 1px 6px; border-radius: 3px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--gray-600); box-shadow: 0 1px 0 var(--gray-300); } /* Compare responsive */ @media (max-width: 1024px) { .compare-panels { grid-template-columns: 1fr; } .eval-ratings { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .compare-container { padding: 16px; } .compare-nav { flex-direction: column; gap: 10px; } .compare-ticket-info { flex-direction: column; align-items: flex-start; gap: 8px; } .eval-ratings { grid-template-columns: 1fr; } .compare-progress { width: 100%; } } /* --- 커스텀 필드 칩 --- */ .resource-ids-display { display: flex; flex-wrap: wrap; gap: 6px; } .cf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; } .cf-chip-label { font-size: 10px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; } .cf-region { background: var(--accent-light); color: #047857; } .cf-resource { background: var(--gray-50); border: 1px solid var(--gray-200); } .cf-resource code { font-size: 11.5px; color: var(--gray-700); } /* --- 유사 과거 티켓 --- */ .similar-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .similar-header label { font-size: 12px; font-weight: 600; color: var(--gray-600); } .similar-tickets-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } .similar-ticket-card { display: flex; align-items: center; gap: 8px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 12px; background: var(--gray-50); cursor: pointer; transition: border-color 0.15s, background 0.15s; text-decoration: none; color: inherit; } .similar-ticket-card:hover { border-color: var(--primary); background: var(--primary-light); } .similar-ticket-id { font-size: 11px; color: var(--gray-400); flex-shrink: 0; } .similar-ticket-subject { font-size: 13px; font-weight: 600; color: var(--gray-800); text-decoration: none; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .similar-ticket-subject:hover { color: var(--primary); text-decoration: underline; } .similar-ticket-score { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .similar-ticket-score.high { background: var(--accent-light); color: #047857; } .similar-ticket-score.mid { background: #FEF3C7; color: #92400E; } .similar-ticket-score.low { background: var(--gray-100); color: var(--gray-500); } /* 채팅 유사 티켓: chat.html 인라인 기본값보다 구체도를 높여 토큰 기반 배지를 적용한다. */ html .chat-similar-score { font-size: var(--chat-similar-score-font-size); padding: var(--chat-similar-score-padding-y) var(--chat-similar-score-padding-x); border-radius: var(--chat-similar-score-radius); } html .chat-similar-score.sim-high { background: var(--success-light); color: var(--success); } html .chat-similar-score.sim-mid { background: var(--warning-light); color: var(--warning); } html .chat-similar-score.sim-low { background: var(--gray-200); color: var(--gray-600); } /* 유사도 배지 래퍼 */ .chat-similar-score-wrap { flex: 0 0 auto; display: inline-flex; align-items: center; } /* 문의/해결 원문 스니펫 블록 (KB 원문 직접 표시) */ .chat-similar-reason-tag { position: relative; display: inline-flex; align-items: center; margin-left: 4px; font-size: var(--chat-similar-score-font-size); padding: var(--chat-similar-score-padding-y) var(--chat-similar-score-padding-x); border-radius: var(--chat-similar-score-radius); background: var(--gray-100); color: var(--gray-500); cursor: default; flex-shrink: 0; white-space: nowrap; } .chat-similar-reason-tag::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--gray-800); color: var(--gray-50); padding: 8px 10px; border-radius: var(--radius); font-size: 12px; font-weight: 400; white-space: normal; width: 280px; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); z-index: 100; line-height: 1.5; box-shadow: var(--shadow-md); } .chat-similar-reason-tag:hover::after { opacity: 1; } :root[data-theme="dark"] .chat-similar-reason-tag { background: var(--gray-700); color: var(--gray-300); } .similar-ticket-loading { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: 12px; color: var(--gray-400); } .similar-ticket-loading .dot-pulse { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gray-400); animation: dotPulse 1s infinite; } @keyframes dotPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* --- Quality Gate Banner --- */ .quality-banner { padding: 12px 16px; border-radius: 8px; font-size: 0.875rem; line-height: 1.5; margin-bottom: 12px; } .quality-banner small { color: var(--gray-500); } .quality-low { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; } .quality-low small { color: #b91c1c; } .quality-medium { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; } .quality-medium small { color: #b45309; } /* #65 SSO 로그인 월 (chat·admin·compare 공유) */ html.sso-locked, html.sso-locked body { overflow: hidden; } #sso-login-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(160deg, var(--primary-hover) 0%, var(--primary) 100%); } #sso-login-overlay.hidden { display: none; } .sso-login-card { background: var(--surface); border-radius: var(--radius-xl); padding: 40px 38px; width: min(400px, 92vw); text-align: center; box-shadow: var(--shadow-lg); } .sso-login-logo { font-size: 44px; line-height: 1; } .sso-login-title { font-family: 'Outfit', 'Pretendard Variable', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; color: var(--primary); margin: 12px 0 6px; } .sso-login-desc { font-size: 14px; color: var(--gray-500); margin: 0 0 26px; } .sso-login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; cursor: pointer; background: var(--primary); color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 600; transition: background 0.15s; } .sso-login-btn:hover { background: var(--primary-hover); } .sso-login-foot { font-size: 12px; color: var(--gray-400); margin: 22px 0 0; } .sso-user-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gray-600); background: var(--gray-100); border-radius: 999px; padding: 4px 11px; } .sso-user-chip::before { content: '👤'; font-size: 12px; } .sso-user-chip:hover { background: var(--gray-200); color: var(--gray-800); } .sso-user-chip.hidden { display: none; }