/* TM다움 call-analysis detail, scoped under .an (page headings become .hr-h1/.hr-h2 so the homepage keeps one h1): rules copied from tm-daum-mono design/admin-prototype (admin.css, analysis-report.css, analysis-annotations.css, analysis-flow.css) that the sample uses. */
.an{--primary-red: #ef4444; --red-tint: rgba(239, 68, 68, 0.05); --primary-blue: #2d80ff; --blue-tint: rgba(64, 139, 255, 0.1); --sky-blue: rgba(64, 139, 255, 0.05); --mint: #24cea7; --mint-tint: rgba(36, 206, 167, 0.1); --purple: #4c24ce; --purple-tint: rgba(76, 36, 206, 0.1); --gray-100: #031832; --gray-70: rgba(3, 24, 50, 0.7); --gray-46: rgba(3, 24, 50, 0.46); --gray-28: rgba(3, 24, 50, 0.28); --gray-18: rgba(3, 24, 50, 0.18); --gray-5: rgba(3, 24, 50, 0.05); --background: #f4f6f9; --white: #fff; --black: #000; --chart-1: #4e9eff; --chart-1-tint: rgba(78, 158, 255, 0.2); --chart-2: #75dcff; --chart-2-tint: rgba(117, 220, 255, 0.2); --chart-3: #009eff; --chart-3-tint: rgba(0, 158, 255, 0.2); --chart-4: #00b4ba; --chart-4-tint: rgba(0, 180, 186, 0.2); --focus-ring: rgba(45, 128, 255, 0.35); --font-sans: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text-page-title: 600 23px/1.4 var(--font-sans); --text-section-title: 700 20px/1.4 var(--font-sans); --text-card-title: 600 18px/1.4 var(--font-sans); --text-label: 600 16px/1.5 var(--font-sans); --text-body: 500 16px/1.5 var(--font-sans); --text-caption: 500 14px/1.5 var(--font-sans); --canvas: var(--background); --surface: var(--white); --text: var(--gray-100); --secondary: var(--gray-70); --muted: var(--gray-46); --primary: var(--primary-blue); --chart: var(--chart-1); --primary-light: var(--blue-tint); --border: var(--gray-18); --danger: var(--primary-red); color: var(--text); background: var(--canvas); font-family: var(--font-sans); font-synthesis: none;}
.an *{box-sizing: border-box;}
.an, .an{min-width: 1240px; min-height: 100%; background: var(--canvas);}
.an{font: var(--text-body); margin: 0;}
.an button, .an input, .an select{font: inherit;}
.an a{color: inherit;}
.an :where(a:not([aria-disabled="true"]), .an button:not(:disabled):not([aria-disabled="true"]), .an summary){transition: opacity 80ms ease, transform 80ms ease;}
.an :where(a:not([aria-disabled="true"]), .an button:not(:disabled):not([aria-disabled="true"]), .an summary):active{opacity: 0.82; transform: scale(0.98); transition-duration: 0s;}
.an .admin-main{min-width: 1040px; padding: 0 40px; background: var(--canvas);}
.an .hr-h1, .an .hr-h2, .an p{margin-top: 0;}
.an .breadcrumb{font: var(--text-caption); display: flex; min-height: 32px; align-items: center; gap: 12px; color: var(--secondary);}
.an .breadcrumb > span{color: var(--muted);}
@media (prefers-reduced-motion: reduce){
.an :where(a:not([aria-disabled="true"]), .an button:not(:disabled):not([aria-disabled="true"]), .an summary){transition: none;}
}
@media (prefers-reduced-motion: reduce){
.an :where(a:not([aria-disabled="true"]), .an button:not(:disabled):not([aria-disabled="true"]), .an summary):active{transform: none;}
}
.an .analysis-journey-page{display: grid; align-items: start; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; --analysis-highlight: rgba(250, 204, 21, 0.45); --highlight-yellow: rgba(250, 204, 21, 0.45); --highlight-green: rgba(34, 197, 94, 0.28); --highlight-blue: rgba(56, 189, 248, 0.34); --highlight-pink: rgba(244, 114, 182, 0.3); --highlight-purple: rgba(167, 139, 250, 0.34); --analysis-episode-head: #f0f5ff;}
.an .analysis-transcript{display: flex; max-width: 720px; flex-direction: column; padding: 24px 0 80px; gap: 48px;}
.an .analysis-call{display: flex; flex-direction: column;}
.an .analysis-episode{position: relative; padding: 0 0 20px; background: var(--surface); scroll-margin-top: 0;}
.an .analysis-episode-head{position: sticky; top: 0; z-index: 3; padding: 12px 14px; background: var(--analysis-episode-head); border-bottom: 1px solid var(--border);}
.an .analysis-episode-head summary{font: var(--text-body); display: flex; align-items: baseline; gap: 10px; color: var(--text); font-weight: 600; cursor: pointer;}
.an .analysis-episode-order{font: var(--text-caption); display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; align-self: center; border-radius: 6px; background: var(--surface); color: var(--muted); font-variant-numeric: tabular-nums;}
.an .analysis-episode-title{flex: 1 1 auto;}
.an .analysis-episode-meta{font: var(--text-caption); flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums;}
.an .analysis-episode-head details > p{font: var(--text-caption); margin: 10px 0 0 30px; color: var(--secondary); line-height: 1.7;}
.an .analysis-utterances{display: flex; flex-direction: column; margin: 0; padding: 16px 0 0; gap: 20px; list-style: none;}
.an .analysis-utterances li{position: relative; padding: 0 14px; scroll-margin-top: 140px;}
.an .analysis-utterances li:focus{outline: none;}
.an .analysis-speaker{display: flex; align-items: baseline; margin-bottom: 6px; gap: 8px;}
.an .analysis-speaker b{font: var(--text-label); color: var(--secondary);}
.an .analysis-speaker i{font: var(--text-caption); color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums;}
.an .analysis-utterances p{font: var(--text-body); margin: 0; color: var(--text); line-height: 1.75; white-space: pre-line;}
.an .analysis-mark{font: inherit; padding: 1px 3px; margin: 0 -3px; border: 0; background: none; color: inherit; text-align: left; -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: pointer;}
.an .analysis-mark.is-yellow{background: linear-gradient( transparent 10%, var(--highlight-yellow) 10%, var(--highlight-yellow) 92%, transparent 92% );}
.an .analysis-mark.has-comment{text-decoration: underline dotted currentColor 1px; text-underline-offset: 3px;}
.an .admin-main:has(> .analysis-report){padding: 0;}
.an .analysis-report{--analysis-ink: rgba(2, 13, 28, 0.81); display: flex; min-height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; padding: 0;}
.an .analysis-report .analysis-report-breadcrumb{font: var(--text-body); min-height: 0; gap: 8px; color: var(--muted);}
.an .analysis-report .analysis-report-breadcrumb img{display: block; flex: none; transform: rotate(-90deg);}
.an .analysis-report .analysis-report-header{display: flex; flex-direction: column; gap: 4px;}
.an .analysis-report .analysis-report-header .hr-h1{font: var(--text-page-title); margin: 0; color: var(--gray-100);}
.an .analysis-report .analysis-report-header p{font: var(--text-body); margin: 0; color: var(--muted);}
.an .analysis-report .analysis-report-summary{display: flex; flex-direction: column; padding: 16px; gap: 4px; border-radius: 12px; background: var(--blue-tint);}
.an .analysis-report .analysis-report-summary .hr-h2{font: var(--text-label); display: flex; align-items: center; margin: 0; gap: 8px; color: var(--primary);}
.an .analysis-report .analysis-report-summary img{display: block; flex: none;}
.an .analysis-report .analysis-report-summary p{font: var(--text-card-title); font-weight: 500; line-height: 1.65; margin: 0; color: var(--analysis-ink); overflow-wrap: anywhere;}
.an .analysis-report .analysis-report-panel{display: flex; height: 100dvh; flex: none; align-items: stretch; background: var(--background);}
.an .analysis-report .analysis-report-data{display: flex; min-width: 0; min-height: 0; flex: 1 1 0; flex-direction: column; padding: 40px 80px 0 40px; gap: 16px; border-left: 2px solid var(--gray-5);}
.an .analysis-report .analysis-report-data > :not(.analysis-data-title){width: 100%; max-width: 960px;}
.an .analysis-report .analysis-data{display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column;}
.an .analysis-report .analysis-data-tabs{flex: none;}
.an .analysis-report .analysis-data-panel{min-height: 0; flex: 1 1 auto; overflow-y: auto;}
.an .analysis-report .analysis-transcript{max-width: none; padding: 16px 0 40px; gap: 40px;}
.an .analysis-report .analysis-episode{background: transparent;}
.an .analysis-report .analysis-utterances{padding-top: 16px; gap: 16px;}
.an .analysis-report .analysis-speaker{margin-bottom: 4px; gap: 4px;}
.an .analysis-report .analysis-speaker b{color: var(--gray-100); font-weight: 600;}
.an .analysis-report .analysis-speaker.is-customer b{color: var(--primary);}
.an .analysis-report .analysis-utterances p{line-height: 1.7;}
.an .analysis-data-tabs{display: flex; height: 40px; align-items: stretch; gap: 24px; border-bottom: 1px solid var(--gray-5);}
.an .analysis-data-tab{font: 600 18px/1.4 var(--font-sans); position: relative; min-width: 32px; padding: 12px 0; border: 0; background: none; color: var(--gray-28); cursor: pointer; white-space: nowrap;}
.an .analysis-data-tab:hover{color: var(--muted);}
.an .analysis-data-tab[aria-selected="true"]{color: var(--black);}
.an .analysis-data-tab[aria-selected="true"]::after{position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--black); content: "";}
.an .analysis-data[data-view="highlights"] .analysis-utterances > li:not([data-analysis-highlighted="true"]){display: none;}
.an .analysis-data[data-view="highlights"] .analysis-episode:not(:has([data-analysis-highlighted="true"])), .an .analysis-data[data-view="highlights"] .analysis-call:not(:has([data-analysis-highlighted="true"])){display: none;}
.an .analysis-annotation.is-read{--analysis-comment-line: #fc0; margin: 8px 0 0; padding: 4px 0 0 16px; border-left: 2px solid var(--analysis-comment-line);}
.an .analysis-annotation.is-read .analysis-annotation-read-head{display: flex; justify-content: flex-end; margin: 0 0 4px;}
.an .analysis-annotation.is-read .analysis-annotation-read-text{font: var(--text-body); margin: 0; padding: 8px; white-space: pre-wrap; border: 1px solid var(--gray-18); border-radius: 12px; background: var(--surface); color: rgba(2, 13, 28, 0.81); overflow-wrap: anywhere;}
.an .analysis-report{--highlight-ai: color-mix(in srgb, var(--primary-blue) 22%, transparent);}
.an .analysis-report .analysis-mark[data-origin="ai"]{background: linear-gradient( transparent 10%, var(--highlight-ai) 10%, var(--highlight-ai) 92%, transparent 92% );}
.an .analysis-report .analysis-annotation.is-read[data-origin="ai"], .an .analysis-report .analysis-annotation.is-read[data-origin="ai-edited"]{--analysis-comment-line: var(--primary-blue);}
.an .analysis-report .analysis-mark[data-origin="ai"]::after{content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 2px; vertical-align: 0.35em; background: url("/assets/analysis/report-roleplay-summary-twinkle.svg") center / contain no-repeat;}
.an .analysis-report .analysis-annotation.is-read .analysis-annotation-read-head{align-items: center; justify-content: space-between;}
.an .analysis-report .analysis-origin{font: var(--text-caption); display: inline-flex; align-items: center; gap: 4px; color: var(--secondary); font-weight: 600;}
.an .analysis-report .analysis-annotation.is-read[data-origin="ai"] .analysis-origin, .an .analysis-report .analysis-annotation.is-read[data-origin="ai-edited"] .analysis-origin{color: var(--primary);}
.an .analysis-report .analysis-annotation.is-read[data-origin="ai"] .analysis-origin::before, .an .analysis-report .analysis-annotation.is-read[data-origin="ai-edited"] .analysis-origin::before{content: ""; width: 14px; height: 14px; background: url("/assets/analysis/report-roleplay-summary-twinkle.svg") center / contain no-repeat;}
.an .analysis-report.flow-page{height: 100dvh; min-height: 0; overflow: hidden;}
.an .analysis-report .flow-overview{position: relative; z-index: 4; display: flex; flex: none; flex-direction: column; padding: 24px 40px 20px; gap: 16px; border-bottom: 2px solid var(--gray-5); background: var(--surface);}
.an .analysis-report .flow-overview .analysis-report-header{gap: 2px;}
.an .analysis-report .flow{display: flex; flex-direction: column; gap: 4px;}
.an .analysis-report .flow-head{display: flex; align-items: baseline; justify-content: space-between; gap: 16px;}
.an .analysis-report .flow-head .hr-h2{font: var(--text-label); flex: none; margin: 0; color: var(--gray-100);}
.an .analysis-report .flow-now{font: var(--text-caption); display: flex; min-width: 0; align-items: baseline; margin: 0; gap: 8px; color: var(--secondary);}
.an .analysis-report .flow-now-label{flex: none; color: var(--muted);}
.an .analysis-report .flow-now-time{flex: none; color: var(--gray-100); font-weight: 600; font-variant-numeric: tabular-nums;}
.an .analysis-report .flow-now-title{min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.an .analysis-report .flow-track{position: relative; padding-top: 30px;}
.an .analysis-report .flow-pins{position: absolute; inset: 0 0 auto; height: 30px;}
.an .analysis-report .flow-pin{font: 700 12px/22px var(--font-sans); position: absolute; top: 0; left: var(--at); z-index: 1; width: 22px; height: 22px; border-radius: 999px; background: var(--primary); color: var(--white); text-align: center; text-decoration: none; transform: translateX(-50%);}
.an .analysis-report .flow-pin::after{content: ""; position: absolute; top: 22px; left: 50%; width: 2px; height: 8px; background: var(--primary); transform: translateX(-50%);}
.an .analysis-report .flow-pin:hover, .an .analysis-report .flow-pin.is-current{box-shadow: 0 0 0 3px var(--focus-ring);}
.an .analysis-report .flow-bar{display: flex; height: 36px; margin: 0; padding: 0; gap: 2px; list-style: none;}
.an .analysis-report .flow-segment{display: flex; min-width: 8px; flex: var(--len) 1 0;}
.an .analysis-report .flow-segment a{font: var(--text-caption); display: flex; width: 100%; min-width: 0; align-items: center; padding: 0 8px; gap: 4px; overflow: hidden; background: var(--gray-5); color: var(--secondary); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease;}
.an .analysis-report .flow-segment:first-child a{border-radius: 8px 0 0 8px;}
.an .analysis-report .flow-segment:last-child a{border-radius: 0 8px 8px 0;}
.an .analysis-report .flow-segment a:hover{background: var(--gray-18); color: var(--gray-100);}
.an .analysis-report .flow-segment b{flex: none; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums;}
.an .analysis-report .flow-segment span{min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.an .analysis-report .flow-segment.is-narrow span{display: none;}
.an .analysis-report .flow-segment.is-narrow a{justify-content: center; padding: 0;}
.an .analysis-report .flow-segment.is-tiny b{display: none;}
.an .analysis-report .flow-segment.is-current a{background: var(--primary); color: var(--white);}
.an .analysis-report .flow-segment.is-current b{color: color-mix(in srgb, var(--white) 75%, transparent);}
.an .analysis-report .flow-cursor{position: absolute; top: 26px; left: var(--cursor, 0%); width: 2px; height: 44px; border-radius: 2px; background: var(--gray-100); pointer-events: none; transform: translateX(-50%); transition: left 0.15s ease;}
.an .analysis-report .flow-scale{font: var(--text-caption); display: flex; justify-content: space-between; color: var(--muted); font-variant-numeric: tabular-nums;}
.an .analysis-report .flow-panel{height: auto; min-height: 0; flex: 1 1 auto;}
.an .analysis-report .flow-judgement{display: flex; min-width: 0; min-height: 0; flex: 0 0 40%; flex-direction: column;}
.an .analysis-report .flow-judgement-scroll{display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; padding: 24px 40px 40px; gap: 32px; overflow-y: auto;}
.an .analysis-report .flow-panel .analysis-report-data{padding: 16px 40px 0;}
.an .analysis-report .flow-panel .analysis-report-data > *{max-width: none;}
.an .analysis-report .flow-judgement .analysis-report-summary p{font: var(--text-body); line-height: 1.7;}
.an .analysis-report .flow-section{display: flex; flex-direction: column; gap: 12px;}
.an .analysis-report .flow-section .hr-h2{font: var(--text-label); display: flex; align-items: baseline; margin: 0; gap: 6px; color: var(--gray-100);}
.an .analysis-report .flow-section .hr-h2 b{color: var(--primary);}
.an .analysis-report .flow-points{display: flex; flex-direction: column; margin: 0; padding: 0; gap: 12px; list-style: none;}
.an .analysis-report .flow-point{display: grid; padding: 16px; gap: 12px; border: 1px solid transparent; border-radius: 12px; background: var(--surface); grid-template-columns: 22px minmax(0, 1fr); cursor: pointer; transition: border-color 0.15s ease;}
.an .analysis-report .flow-point:not(.is-current):hover{border-color: var(--gray-18);}
.an .analysis-report .flow-point.is-current{border-color: var(--primary);}
.an .analysis-report .flow-point-no{font: 700 12px/22px var(--font-sans); width: 22px; height: 22px; border-radius: 999px; background: var(--primary); color: var(--white); text-align: center;}
.an .analysis-report .flow-point-body{min-width: 0;}
.an .analysis-report .flow-point h3{font: var(--text-label); margin: 0;}
.an .analysis-report .flow-point h3 a{color: var(--gray-100); text-decoration: none;}
.an .analysis-report .flow-point h3 a:hover{text-decoration: underline;}
.an .analysis-report .flow-point p{font: var(--text-caption); margin: 6px 0 0; color: var(--secondary); line-height: 1.6;}
.an .analysis-report .flow-point-evidence{display: flex; flex-wrap: wrap; margin: 8px 0 0; padding: 0; gap: 4px 12px; list-style: none;}
.an .analysis-report .flow-point-evidence a{font: var(--text-caption); color: var(--primary); font-variant-numeric: tabular-nums; text-decoration: none;}
.an .analysis-report .flow-point-evidence a:hover{text-decoration: underline;}
.an .analysis-report .flow-judgement{flex-basis: 36%;}
.an .analysis-report .analysis-data[data-view="transcript"] .analysis-margin .analysis-annotation.is-read{display: none;}
.an .analysis-report.flow-page .analysis-data[data-view="highlights"] .analysis-episode-head{display: none;}
.an .analysis-report.flow-page .analysis-data[data-view="highlights"] .analysis-utterances > li[data-analysis-highlighted="true"]{display: grid; align-items: start; column-gap: 24px; grid-template-columns: minmax(0, 1fr) min(300px, 42%); grid-template-rows: auto 1fr;}
.an .analysis-report.flow-page .analysis-data[data-view="highlights"] .analysis-utterances > li > .analysis-speaker, .an .analysis-report.flow-page .analysis-data[data-view="highlights"] .analysis-utterances > li > p{grid-column: 1;}
.an .analysis-report.flow-page .analysis-data[data-view="highlights"] .analysis-margin{position: static; display: flex; width: auto; flex-direction: column; gap: 8px; grid-column: 2; grid-row: 1 / span 2;}
.an .analysis-report .analysis-margin .analysis-annotation.is-read{margin: 0; padding: 10px 12px; border: 1px solid var(--gray-18); border-radius: 10px; background: var(--surface); cursor: pointer;}
.an .analysis-report .analysis-margin .analysis-annotation.is-read .analysis-annotation-read-head{margin: 0 0 4px; gap: 8px;}
.an .analysis-report .analysis-margin .analysis-origin{min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.an .analysis-report .analysis-margin .analysis-origin small{font: inherit; color: var(--muted); font-weight: 500;}
.an .analysis-report .analysis-margin .analysis-annotation.is-read .analysis-annotation-read-text, .an .analysis-report .analysis-margin .analysis-annotation.is-read[data-origin="admin"] .analysis-annotation-read-text{font: var(--text-caption); display: block; padding: 0; border: 0; background: none; color: var(--secondary); line-height: 1.55;}
.an .analysis-report.flow-page .analysis-episode-head{padding: 20px 14px 14px; border-bottom: 1px solid var(--gray-18); background: var(--background);}
.an .analysis-report.flow-page .analysis-episode-head summary{align-items: center; gap: 10px; list-style: none;}
.an .analysis-report.flow-page .analysis-episode-head summary::-webkit-details-marker{display: none;}
.an .analysis-report.flow-page .analysis-episode-order{font: 700 12px/1 var(--font-sans); width: auto; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--gray-100); color: var(--white);}
.an .analysis-report.flow-page .analysis-episode-title{font: var(--text-card-title); min-width: 0; color: var(--gray-100);}
.an .analysis-report.flow-page .analysis-episode-meta{font: var(--text-caption); color: var(--muted);}
.an .analysis-report.flow-page .analysis-episode-head details > p{font: var(--text-caption); margin: 8px 0 0 34px; color: var(--secondary); line-height: 1.65;}
.an .analysis-report.flow-page .analysis-transcript{padding-top: 0;}
.an .analysis-report.flow-page .analysis-episode-head summary::after{content: ""; width: 12px; height: 12px; flex: none; opacity: 0.5; background: url("/assets/analysis/chevron-down.svg") center / contain no-repeat; transition: transform 0.2s ease;}
.an .analysis-report.flow-page .analysis-episode-head details[open] summary::after{transform: rotate(180deg);}
.an .analysis-report.flow-page .analysis-episode-head{padding-bottom: 20px;}
.an .analysis-report.flow-page .analysis-episode-head details[open] > p{margin-bottom: -6px;}