/**
 * workspace_style_check.css — 통합 워크스페이스 의 *스타일 통일성 검사* 관련 floating panel styles.
 *
 * Scope: `StyleCompareFloatingPanel` (workspace_style_check.js Phase 14F).
 *   - 제안 비교 floating panel (.scp ...)
 *   - drag/resize 패턴 (편집 이력 패널 ehp 스타일 참조)
 *   - applyMode toggle / filter tabs / detail toggle / colgroup widths
 *
 * Reference: app/static/js/workspace/workspace_style_check.js (StyleCompareFloatingPanel)
 *
 * @version Phase 14F-v3 (분리 — 2026-05-27)
 */

/* ─── Floating panel root ──────────────────────────── */
.scp {
    position: fixed; right: 20px; top: 100px;
    width: 980px; height: 660px;
    background: white; border: 1px solid #dee2e6; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1055; display: flex; flex-direction: column;
    font-size: 14px;
    resize: both; overflow: hidden;
    min-width: 640px; min-height: 360px;
    max-width: 96vw; max-height: 92vh;
}
.scp.scp-dragging {
    transition: none; cursor: move; user-select: none;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

/* ─── Header (draggable) ─────────────────────────── */
.scp-header {
    padding: 12px 16px; border-bottom: 1px solid #e9ecef;
    display: flex; justify-content: space-between; align-items: center;
    background: #f8f9fa; border-radius: 10px 10px 0 0;
    cursor: move; user-select: none;
    flex-shrink: 0;
}
.scp-header:active { cursor: grabbing; }
.scp-title {
    display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
}
.scp-close {
    background: none; border: none; font-size: 16px; color: #6c757d;
    cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.15s;
}
.scp-close:hover { background: #e9ecef; color: #212529; }

/* ─── Apply mode toggle (Target / AI 제안) ─────────── */
.scp-mode-toggle {
    padding: 10px 16px; border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.scp-mode-label {
    color: #495057; font-weight: 500; font-size: 13px;
}
.scp-mode-buttons {
    display: inline-flex; gap: 3px;
    background: white; padding: 3px;
    border: 1px solid #ced4da; border-radius: 7px;
}
.scp-mode-btn {
    background: transparent; border: none; padding: 5px 12px;
    font-size: 12.5px; color: #495057; cursor: pointer;
    border-radius: 5px; transition: all 0.15s;
    display: inline-flex; align-items: center;
}
.scp-mode-btn:hover { background: #f1f3f5; }
.scp-mode-btn.active {
    background: #0d6efd; color: white; font-weight: 500;
}
.scp-mode-btn.active:hover { background: #0a58ca; }

/* ─── Filter tabs (편집 이력 ehp-mode-btn 패턴 차용) ──── */
.scp-filter-bar {
    padding: 8px 16px; border-bottom: 1px solid #e9ecef;
    display: flex; align-items: center; gap: 12px;
    background: white;
    flex-shrink: 0;
}
.scp-filter-tabs {
    display: inline-flex;
    gap: 6px;
}
.scp-filter-tab {
    padding: 6px 14px; border: 1px solid #dee2e6;
    background: white; color: #495057;
    border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
    display: inline-flex; align-items: center;
}
.scp-filter-tab:hover { background: #f8f9fa; color: #212529; }
.scp-filter-tab.active {
    background: #0d6efd; color: white; border-color: #0d6efd;
}
.scp-filter-tab[data-filter="WARN"] { color: #ad8a00; }
.scp-filter-tab[data-filter="WARN"]:hover { color: #856404; background: #fff8e1; }
.scp-filter-tab[data-filter="WARN"].active {
    background: #ffc107; color: #212529; border-color: #ffc107;
}
.scp-filter-tab[data-filter="ERR"] { color: #a01827; }
.scp-filter-tab[data-filter="ERR"]:hover { color: #721c24; background: #f8d7da; }
.scp-filter-tab[data-filter="ERR"].active {
    background: #dc3545; color: white; border-color: #dc3545;
}
.scp-filter-tab[data-filter="CHECKED"] { color: #117a8b; }
.scp-filter-tab[data-filter="CHECKED"]:hover { color: #0c5460; background: #d1ecf1; }
.scp-filter-tab[data-filter="CHECKED"].active {
    background: #17a2b8; color: white; border-color: #17a2b8;
}

/* ─── 상세 설명 toggle (컨텍스트 패널 ehp-cv-label 패턴) ─── */
.scp-detail-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
    font-size: 12.5px; color: #495057;
    padding: 5px 10px;
    background: #fafbfc; border: 1px solid #e9ecef;
    border-radius: 6px;
    margin: 0;
    transition: all 0.15s;
}
.scp-detail-toggle:hover { background: #f1f3f5; border-color: #ced4da; color: #212529; }
.scp-detail-toggle-input { cursor: pointer; margin: 0; }
.scp-detail-toggle-text { white-space: nowrap; }

.scp-summary { font-size: 12px; }

/* ─── Body (scrollable table container) ─────────── */
.scp-body {
    flex: 1; overflow: auto; padding: 0;
    min-height: 0;  /* flex child overflow 가능하도록 */
}

/* Table layout: fixed + colgroup widths */
.scp-table {
    margin-bottom: 0;
    table-layout: fixed; width: 100%;
}
.scp-table thead th {
    position: sticky; top: 0; z-index: 2; background: #f8f9fa;
    white-space: nowrap;
}
/* 2026-05-29: ☑ header click → 현재 표시된 행 모두 체크/해제 토글.
   Plan A — background 다른 header 와 동일 유지 + icon 만 시인성 강화 (primary blue + size + scale hover). */
.scp-th-check {
    cursor: pointer;
    user-select: none;
}
.scp-th-check-icon {
    display: inline-block;
    color: #0d6efd;
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s, transform 0.15s;
}
.scp-th-check:hover .scp-th-check-icon {
    color: #0a58ca;
    transform: scale(1.2);
}
.scp-th-check:active .scp-th-check-icon {
    color: #052c65;
    transform: scale(1.1);
}
/* 2026-05-27 Phase 14F-v4 fix: td 위쪽 정렬 — Target text 와 AI Suggestion textarea 의
   *상단 시작점 동일* → *한 눈에 비교* 가능. checkbox td 만 middle 로 override.
   Target (.scp-cell-old) 만 *추가 10px 내림* — textarea 의 *내부 padding 의 *natural 시작점 과 baseline 일치. */
.scp-table tbody td { vertical-align: top; padding-top: 10px; }
.scp-table tbody td:last-child { vertical-align: middle; padding-top: 0; }
.scp-table tbody td.scp-cell-old { padding-top: 25px; }
/* 2026-05-27 Phase 14F-v5: # / Sev cell 의 *padding-top 25px* — target text 와 *세로 baseline align*.
   nth-child(1) = # / nth-child(2) = Sev badge */
.scp-table tbody td:nth-child(1),
.scp-table tbody td:nth-child(2) { padding-top: 25px; }
/* 2026-06-12 (사용자 요청): 현재 source / 현재 Target 셀은 *카드 내 세로 가운데 정렬*.
   기존 top-baseline 규칙(172/174)을 더 높은 specificity + 후순위로 override (대칭 padding). */
.scp-table tbody td.scp-td-source,
.scp-table tbody td.scp-cell-old {
    vertical-align: middle;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.scp-cell-old { word-break: break-word; overflow-wrap: anywhere; }
.scp-cell-old del,
.scp-cell-old .diff-removed {
    color: #dc3545; text-decoration: line-through;
}
.scp-td-detail { word-break: break-word; overflow-wrap: anywhere; }
/* 2026-05-27 Phase 14F-v4 micro-fix: textarea padding 미세 증가 — *내부 가용 텍스트 width 가
   *form-control-sm 의 default (0.25rem 0.5rem) 보다 *조금 더 좁아짐* → Target text 의 *plain td*
   와 *각 줄 끝 visual 일치*. *box-sizing: border-box* 로 *외부 width 영향 0*. */
/* 2026-06-12: AI Suggestion = contenteditable div(.scp-suggestion-edit) 로 전환 — 녹색 diff 하이라이트
   + 직접 편집 동시 지원. textarea 와 동일 박스 스타일 적용 (둘 다 .scp-suggestion-ta 클래스). */
.scp-td-suggestion textarea,
.scp-td-suggestion .scp-suggestion-edit {
    width: 100%;
    box-sizing: border-box;
    padding: 0.28rem 0.45rem;
    /* 2026-05-27 Phase 14F-v4 micro-fix: min-height 2-mode 분기 — JS 의 inline style 제거 후 CSS scope.
       상세 표시 시: 48px (이전 inline 60px * 0.8 = -20%)
       상세 제거 시 (.scp-no-detail): 18px (이전 inline 60px * 0.3 = -70%) — 카드 height 자연스럽게 축소 */
    min-height: 48px;
}
/* contenteditable div — 내용에 따라 자동 확장 + 줄바꿈 보존 */
.scp-td-suggestion .scp-suggestion-edit {
    height: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.scp.scp-no-detail .scp-td-suggestion textarea,
.scp.scp-no-detail .scp-td-suggestion .scp-suggestion-edit {
    min-height: 18px;
}
/* 2026-05-27 Phase 14F-v5: wide mode 에서 *textarea min-height 도 *18px* — 상세 의 *짧은 natural height
   (width 2x 후 wrap 감소)* 가 *row height bottleneck* 안 되도록. *row 가 *상세 height 까지 *content-fit*. */
.scp.scp-wide-detail .scp-td-suggestion textarea,
.scp.scp-wide-detail .scp-td-suggestion .scp-suggestion-edit {
    min-height: 18px;
}

/* ─── Column widths (colgroup col rules) ────────── */
/* 2026-05-27 Phase 14F-v4 fix: Target 의 *plain text* vs AI Suggestion 의 *textarea*
   의 *내부 padding/border 차이* 보정 — Target 의 width 를 *1%만 줄여* 같은 줄 끝 visual 일치.
   default (상세 표시): Target 34% / Suggestion 36% / 상세 22% / 나머지 = fixed px */
.scp-col-num        { width: 50px; }
.scp-col-sev        { width: 70px; }
.scp-col-source     { width: 0; }   /* 2026-05-31: default hidden — display:none + width 0 (no space reserve) */
.scp-col-target     { width: 34%; }
.scp-col-suggestion { width: 36%; }
.scp-col-detail     { width: 22%; }
.scp-col-check      { width: 56px; }

/* 상세 hide 시 — Target 49% / Suggestion 51% (동일 1% 차) */
.scp.scp-no-detail .scp-col-target     { width: 49%; }
.scp.scp-no-detail .scp-col-suggestion { width: 51%; }
.scp.scp-no-detail .scp-col-detail,
.scp.scp-no-detail .scp-th-detail,
.scp.scp-no-detail .scp-td-detail { display: none; }

/* ─── 2026-05-31: 'source text' 열 표시 토글 ─── */
/* default: source 숨김 — show-source 클래스 부재 시 col + th + td display:none */
.scp:not(.scp-show-source) .scp-col-source,
.scp:not(.scp-show-source) .scp-th-source,
.scp:not(.scp-show-source) .scp-td-source { display: none; }

/* source ON + detail ON: 3 way equal target/source/suggestion (각 23%) + detail 31% */
.scp.scp-show-source .scp-col-target     { width: 23%; }
.scp.scp-show-source .scp-col-source     { width: 23%; }
.scp.scp-show-source .scp-col-suggestion { width: 23%; }
.scp.scp-show-source .scp-col-detail     { width: 31%; }

/* source ON + detail OFF: 3-way equal (각 33% / 34%) */
.scp.scp-show-source.scp-no-detail .scp-col-target     { width: 33%; }
.scp.scp-show-source.scp-no-detail .scp-col-source     { width: 33%; }
.scp.scp-show-source.scp-no-detail .scp-col-suggestion { width: 34%; }

/* source td styling — target 와 동일 wrap 패턴 */
.scp-td-source { word-break: break-word; overflow-wrap: anywhere; }

/* ─── 2026-05-31: iOS-style switch toggle (source / detail 통일) ─── */
.scp-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.82rem;
    color: #495057;
    margin: 0;
    padding: 0.2rem 0;
    background: transparent;
    border: none;
    line-height: 1;
}
.scp-toggle-switch .scp-switch-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
/* native checkbox 숨김 — accessibility 유지 (sr only 대안) */
.scp-toggle-switch .scp-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* track — 32×16 pill */
.scp-toggle-switch .scp-switch-track {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    background: #ced4da;
    border-radius: 16px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
/* thumb — 12px circle, slides on checked */
.scp-toggle-switch .scp-switch-track .scp-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* checked state — blue track + thumb slide right */
.scp-toggle-switch .scp-switch-input:checked ~ .scp-switch-track {
    background: #0d6efd;
}
.scp-toggle-switch .scp-switch-input:checked ~ .scp-switch-track .scp-switch-thumb {
    transform: translateX(14px);
}
/* hover affordance */
.scp-toggle-switch:hover .scp-switch-track {
    background: #adb5bd;
}
.scp-toggle-switch:hover .scp-switch-input:checked ~ .scp-switch-track {
    background: #0b5ed7;
}
/* focus visible — keyboard accessibility */
.scp-toggle-switch .scp-switch-input:focus-visible ~ .scp-switch-track {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* ─── Phase 14F-v5: 상세 wide ↔ basic 토글 button ────── */
/* "상세 설명" header 옆 — 흑백 unicode icon 만 (텍스트 없음, grayscale 보장).
   - basic mode: ⤢ (확대 가능)
   - wide mode (active): ⤡ (축소 가능) + bg 약간 진하게 */
.scp-wide-toggle {
    background: transparent; border: 1px solid #dee2e6;
    color: #6c757d; padding: 0 6px; margin-left: 6px;
    font-size: 12px; line-height: 1.2; cursor: pointer;
    border-radius: 4px; transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; min-width: 22px; vertical-align: middle;
}
.scp-wide-toggle:hover { background: #f1f3f5; color: #212529; border-color: #ced4da; }
.scp-wide-toggle.active { background: #495057; color: white; border-color: #495057; }
.scp-wide-toggle.active:hover { background: #343a40; }
.scp-wide-icon { filter: grayscale(100%); font-family: monospace; }

/* ─── Footer (action buttons) ───────────────────── */
.scp-footer {
    padding: 10px 16px; border-top: 1px solid #e9ecef;
    background: #f8f9fa; border-radius: 0 0 10px 10px;
    display: flex; justify-content: flex-end; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.scp-hint { font-size: 11.5px; max-width: 460px; }