/* 처리 로그 창 — 디자인 가이드 §4.15.
 *
 * 여섯 화면이 각자 같은 CSS 를 베껴 들고 있었다.  같아 보인 것은 결정이 아니라
 * 우연이었고, 그 우연은 아무도 재 본 적 없는 대비 미달 두 개를 함께 옮겨 다녔다.
 * 색은 여기서만 정한다.
 *
 * 대비는 실제로 합성된 배경 위에서 잰 값이다 — 명목상의 #1e1e1e 가 아니라
 * 행 배경 #292929, 오류행 #3d2c2a 위에서.
 *   본문 4.5:1 (WCAG 1.4.3) / 보더 3:1 (WCAG 1.4.11)
 */

.log-console {
    background: #1e1e1e;
    border: 1px solid #172033;
    border-radius: 8px;
    padding: 16px;
    max-height: 350px;
    overflow-y: auto;
    /* 고정폭이라야 말머리·메시지·시각이 세로로 맞아 열을 따라 내려갈 수 있고,
     * 종목코드의 l/1, 0/O 를 오독하지 않는다. */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #DCE3EE;
}

.log-entry {
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    /* 심각도 보더가 붙는 줄만 3px 밀려나면 메시지 열이 흔들린다.
     * 자리는 늘 잡아 두고 색만 바뀌게 한다. */
    border-left: 3px solid transparent;
    background: rgba(255, 255, 255, 0.05);
    color: #DCE3EE;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background 0.2s ease;
}

.log-entry:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* 줄 번호 — "4210줄을 보라"고 가리킬 수 있어야 오류를 남에게 전달할 수 있다. */
.log-entry .log-line-no {
    flex-shrink: 0;
    min-width: 4ch;
    text-align: right;
    color: #9E9E9E;
    user-select: none;
}

/* 말머리는 대괄호까지 폭이 같고, 표시가 없는 평범한 줄도 같은 칸을 차지한다.
 * 폭이 맞아야 메시지 시작 위치가 한 줄로 서고 눈이 열을 따라 내려갈 수 있다. */
.log-entry .log-icon {
    flex-shrink: 0;
    min-width: 6ch;
    line-height: 1.6;
    letter-spacing: 0;
}

.log-entry .log-content {
    flex: 1;
    /* 잘라내지 않고 접는다.  가로 스크롤은 만들지 않는다. */
    word-break: break-word;
    white-space: pre-wrap;
}

.log-entry .log-time {
    flex-shrink: 0;
    font-size: 11px;
    color: #9E9E9E;          /* 5.43:1 — #757575 는 3.16:1 로 본문 기준 미달이었다 */
    margin-left: auto;
    padding-left: 10px;
}

.log-entry.success {
    color: #81C784;          /* 7.23:1 */
    border-left: 3px solid #4CAF50;
}

.log-entry.info {
    color: #64B5F6;          /* 6.57:1 */
    border-left: 3px solid #2196F3;
}

.log-entry.error {
    color: #FF8A80;          /* 5.78:1 — #EF5350 은 3.78:1 로 본문 기준 미달이었다 */
    border-left: 3px solid #F44336;
    background: rgba(244, 67, 54, 0.1);
}

.log-entry.warning {
    color: #FFB74D;          /* 7.04:1 */
    border-left: 3px solid #FF9800;
    background: rgba(255, 152, 0, 0.1);
}

.log-console::-webkit-scrollbar { width: 10px; }
.log-console::-webkit-scrollbar-track { background: #2e2e2e; border-radius: 5px; }
.log-console::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; }
.log-console::-webkit-scrollbar-thumb:hover { background: #777; }

/* 자동 스크롤이 멈춰 있는 동안에만 나타난다.  왜 새 줄이 안 따라오는지
 * 말해 주지 않으면 고장으로 읽힌다. */
.log-follow {
    position: relative;
}

.log-follow__jump {
    position: absolute;
    right: 18px;
    bottom: 14px;
    z-index: 2;
    display: none;
    border: 1px solid #616161;
    background: #2e2e2e;
    color: #DCE3EE;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
}

.log-follow__jump:hover { background: #3a3a3a; }

.log-follow__jump:focus-visible {
    /* dark console: the blue ring reads ~2.3:1 on #1e1e1e; white passes */
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

.log-follow--paused .log-follow__jump { display: block; }

/* The title sits in the WHITE card header above the console, not on the
   console -- the dark-surface exception two lines up does not reach it. */
.processing-complete #processingTitle { color: var(--pundit-success, #0f8a62); }
.processing-error #processingTitle { color: var(--pundit-danger, #c93d38); }

/* 자동 스크롤 켬 상태 — ai_processing.js 의 setAutoScroll() 이 인라인 색 대신 토글하는 클래스. */
#autoScrollBtn.is-on {
    /* white on --pundit-success is 4.35:1; the strong token is this seat's */
    background: var(--pundit-success-strong, #087154) !important;
    border-color: var(--pundit-success-strong, #087154) !important;
    color: #fff !important;
}

/* 큰 창 — 여섯 화면이 같은 창을 쓴다 (§4.15).  창은 processing_log.js 가
   한 벌만 만들어 붙이므로 규칙도 여기에만 둔다. */
.log-viewer {
    width: min(1100px, 94vw);
    max-width: none;
    height: min(84vh, 900px);
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.30);
    background: #ffffff;
    color: #1c2733;
}

.log-viewer::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.log-viewer[open] {
    display: flex;
    flex-direction: column;
}

.log-viewer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pundit-border, #dce3ee);
}

.log-viewer__head h3 {
    margin: 0;
    font-size: 18px;
}

/* 로그 상자를 통째로 옮겨 담는 곳이라 안쪽 여백만 준다. */
.log-viewer__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: 16px 20px;
}

/* 작은 패널이 상자에 걸어 둔 높이 제한은 큰 창에서 의미가 없다. */
.log-viewer__body > #logsContainer {
    flex: 1 1 auto;
    max-height: none !important;
    height: 100%;
}

.log-viewer__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--pundit-border, #dce3ee);
}

.log-viewer__status {
    color: var(--pundit-muted, #69778d);
    font-size: 13px;
}

.log-viewer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}