/* ══════════════════════════════════════════
   Screenshot Review System (.sr-*)
   -- 전체화면 오버레이 + 캐러셀 + Canvas 마킹 + 코멘트
   ══════════════════════════════════════════ */

/* ── (1) 버튼 ── */
.cmd-screenshot-btn { border: none; }
.cmd-screenshot-btn svg { pointer-events: none; }

/* ── (2) 모달 컨테이너 — 전체화면 오버레이 ── */
.screenshot-review-modal {
    width: clamp(800px, 80vw, 1100px);
    max-width: 95vw;
    max-height: 95vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-raised);
    /* §CQ4: 컨테이너 쿼리 — 리뷰 패널 축소 레이아웃 */
    container-type: inline-size;
    container-name: screenpanel;
}
/* 캐러셀 아래 영역을 스크롤 가능하게 — 팝업이 커져도 화면 밖 삐져나감 방지 */
.sr-body-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
}

/* ── (3) 헤더 — 프로젝트 경로 + 닫기 버튼 ── */
.sr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-5);
    flex-shrink: 0;
}
.sr-header-left {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.sr-header-right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.sr-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
/* 프로젝트 선택기 컨테이너 */
.sr-project-selector {
    position: relative;
}
.sr-project-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--surface-w5);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.sr-project-badge:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.sr-project-badge:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.sr-project-badge.has-folder {
    background: var(--accent);
    color: var(--bg);
}
.sr-project-badge.has-folder:hover {
    opacity: 0.9;
    transform: translateY(var(--hover-lift-sm));
}
.sr-project-chevron {
    font-size: var(--text-sm);
    opacity: 0.7;
}
/* 프로젝트 드롭다운 */
.sr-project-dropdown {
    position: absolute;
    top: calc(100% + var(--s-1));
    left: 0;
    min-width: var(--card-min);
    max-height: 240px;
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sr-project-dropdown-header {
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
    flex-shrink: 0;
}
.sr-project-dropdown-list {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
}
.sr-project-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: var(--s-2) var(--s-3);
    background: none;
    border: none;
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    text-align: left;
    transition: background var(--motion-hover);
}
.sr-project-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.sr-project-item:active { background: var(--surface-active); }
.sr-project-item.active { background: var(--surface-active); color: var(--accent); }
.sr-project-item.sr-path-invalid { opacity: 0.5; }
.sr-item-check {
    width: var(--s-4);
    flex-shrink: 0;
    color: var(--accent);
    font-weight: var(--weight-bold);
}
.sr-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sr-item-path {
    color: var(--text-sub);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--s-20);
}
.sr-counter {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.sr-close {
    width: var(--s-5-5); height: var(--s-5-5);
    display: flex; align-items: center; justify-content: center;
    border: none; background: none;
    color: var(--text-sub);
    font-size: var(--text-lg);
    cursor: pointer;
    border-radius: var(--radius-s);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.sr-close:hover { color: var(--red); background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.sr-close:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.sr-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── (4) 캐러셀 — 이미지+Canvas 중앙, 좌/우 화살표 ── */
.sr-carousel {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-2);
    flex: 1;
    min-height: var(--layout-lg);
    position: relative;
    overflow: hidden;
}
.sr-nav {
    width: var(--s-7); height: var(--s-7);
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-xl);
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    z-index: 2;
}
.sr-nav:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.sr-nav:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.sr-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.sr-canvas-wrap {
    flex: 1;
    position: relative;
    background: var(--bg);
    border-radius: var(--radius-s);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--layout-2xl);
    max-height: 75vh;
}
/* 줌 > 1 시 스크롤 가능 + 좌상단 정렬 */
.sr-canvas-wrap--zoomed {
    overflow: auto;
    justify-content: flex-start;
    align-items: flex-start;
}
/* 드래그 앤 드롭 시각적 피드백 */
.sr-canvas-wrap.sr-drop-active {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: var(--surface-active);
}
/* 줌 레벨 인디케이터 */
.sr-zoom-indicator {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    z-index: 10;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--overlay);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    pointer-events: none;
    display: none;
}
#sr-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: crosshair;
    touch-action: none;
}
#sr-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
}
/* 공통 레이아웃은 components.css .sr-empty-state 셀렉터에서 상속 */
.sr-empty-state {
    padding: var(--s-6) var(--s-5);
    position: relative; /* z-index 안정성 — 모바일 WebKit 호환 */
    z-index: 3;
}
/* 빈 상태 "이미지 선택" 버튼 — 모바일 최소 터치 타겟 44px 보장 */
.sr-empty-state .btn-sm {
    min-height: var(--s-8-5);
    min-width: var(--s-20);
    padding: var(--s-2) var(--s-5);
    font-size: var(--text-sm);
}
.sr-empty-state p { margin: 0; }

/* ── (5) 드로잉 툴바 — 색상/굵기 선택 ── */
.sr-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-5);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.sr-tool {
    width: var(--s-6); height: var(--s-6);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-s);
    background: none;
    border: 1px solid transparent;
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    font-size: var(--text-base);
}
.sr-tool:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.sr-tool:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.sr-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-tool.active {
    background: var(--surface-active);
    border-color: var(--accent);
    color: var(--accent);
}
.sr-tool-divider {
    width: 1px;
    height: var(--s-5-0);
    background: var(--border);
}
.sr-color-picker {
    width: var(--s-5-5); height: var(--s-5-5);
    border: 2px solid var(--border);
    border-radius: var(--radius-s);
    background: none;
    cursor: pointer;
    padding: 0;
}
.sr-color-picker::-webkit-color-swatch-wrapper { padding: var(--s-1); }
.sr-color-picker::-webkit-color-swatch { border-radius: var(--radius-s); border: none; }

/* ── (6) 코멘트 영역 — 이미지별 textarea + 인디케이터 ── */
.sr-comment-area {
    padding: var(--s-2) var(--s-5);
    flex-shrink: 0;
}
.sr-comment-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.sr-comment-input {
    width: 100%;
    min-height: var(--s-7-5);
    max-height: var(--s-12);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: vertical;
    box-sizing: border-box;
}
.sr-comment-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: var(--shadow-ring-dim-md);
}

/* ── 썸네일 스트립 ── */
.sr-thumbnail-strip {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-5);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}
.sr-thumb {
    width: var(--s-9); height: var(--s-9);
    border-radius: var(--radius-s);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    position: relative;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.sr-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.sr-thumb.active { border-color: var(--accent); }
.sr-thumb:hover { border-color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }
.sr-thumb-badge {
    position: absolute;
    top: 2px; right: 2px;
    font-size: var(--text-sm);
    background: var(--accent);
    color: var(--accent-on);
    border-radius: 50%;
    width: var(--s-3-5); height: var(--s-3-5);
    display: flex; align-items: center; justify-content: center;
}
/* 동영상 썸네일 재생 아이콘 */
.sr-thumb-video-icon {
    position: absolute;
    bottom: 2px; left: 2px;
    font-size: var(--text-sm);
    background: var(--overlay-scrim-heavy);
    color: var(--text);
    border-radius: var(--radius, 4px);
    width: var(--s-4); height: var(--s-4);
    display: flex; align-items: center; justify-content: center;
    line-height: var(--leading-none);
}
/* 동영상 플레이어 (캔버스 래퍼 내 — 절대 중앙 정렬) */
.sr-video-player {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius, 8px);
    background: var(--bg);
}
.sr-add-btn {
    width: var(--s-9); height: var(--s-9);
    border-radius: var(--radius-s);
    border: 2px dashed var(--border);
    background: none;
    color: var(--text-sub);
    font-size: var(--text-xl);
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.sr-add-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.sr-add-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.sr-add-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 썸네일 삭제 버튼 (마킹 #5) */
.sr-thumb-delete {
    position: absolute;
    top: -4px; right: -4px;
    width: var(--s-4-5); height: var(--s-4-5);
    border-radius: 50%;
    background: var(--backdrop-bg-strong);
    color: var(--text);
    border: none;
    font-size: var(--text-sm);
    line-height: var(--leading-none);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 0;
}
.sr-thumb:hover .sr-thumb-delete { display: flex; transform: translateY(var(--hover-lift-sm)); }
.sr-thumb-delete:hover { background: var(--red); transform: translateY(var(--hover-lift-sm)); }
.sr-thumb-delete:active { transform: scale(var(--active-scale)); }
/* 드래그앤드롭 상태 (마킹 #7) */
.sr-thumb-dragging { /* opacity → drag-source-dim 클래스가 제어 */ }
.sr-thumb-dragover { outline: 2px solid var(--accent); outline-offset: -2px; }
.sr-thumb[draggable="true"] { cursor: grab; }
.sr-thumb[draggable="true"]:active { cursor: grabbing; }

/* 줌 라벨 (마킹 #2) */
.sr-zoom-label {
    font-size: var(--text-sm, 12px);
    color: var(--text-sub);
    min-width: var(--s-7-5);
    text-align: center;
    user-select: none;
}

/* ── (6.5) 전체 코멘트 영역 — 모든 스크린샷에 적용되는 수정 지시 ── */
.sr-global-comment-area {
    padding: var(--s-3) var(--s-5);
    flex-shrink: 0;
    background: var(--surface);
}
.sr-global-comment-area .sr-comment-label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.sr-global-label-icon {
    font-size: var(--text-base);
}
.sr-global-label-hint {
    font-weight: var(--weight-normal);
    color: var(--text-sub);
    font-size: var(--text-sm);
}
.sr-global-comment-input {
    background: var(--bg-raised);
    min-height: var(--s-9-5);
}

/* ── (7) 하단 푸터 — 취소/전송 버튼 ── */
.sr-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-5);
    flex-shrink: 0;
}
.sr-summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.sr-send {
    padding: var(--s-2) var(--s-5);
    font-weight: var(--weight-semibold);
}
.sr-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── (7.5) 텍스트 커서 / 오버레이 입력 ── */
#sr-canvas.sr-cursor-text { cursor: text; }
.sr-text-overlay-input {
    position: absolute;
    z-index: 10;
    min-width: var(--s-20);
    min-height: var(--s-5-5);
    padding: var(--s-1) var(--s-2);
    border: 2px solid var(--accent);
    border-radius: var(--radius-s);
    background: rgba(0,0,0,0.8);
    color: var(--text);
    font-size: var(--text-base);
    font-family: var(--font);
    resize: none;
    outline: none;
    box-sizing: border-box;
}

/* ── (8) 포인트 코멘트 팝업 (마킹 후 인라인 코멘트) ── */
.sr-annotation-popup {
    position: absolute;
    z-index: 20;
    min-width: clamp(140px, 22vw, 200px);
    max-width: var(--card-min);
    padding: var(--s-2);
    border-radius: var(--radius-s);
    background: var(--bg-raised);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.sr-annotation-popup textarea {
    width: 100%;
    min-height: var(--s-7);
    max-height: var(--s-11);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.sr-annotation-popup textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-dim);
}
.sr-annotation-popup .sr-anno-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── (9) 포인트 코멘트 목록 ── */
.sr-annotations-list {
    padding: 0 var(--s-5) var(--s-2);
    flex-shrink: 0;
    max-height: var(--s-16);
    overflow-y: auto;
    scrollbar-width: thin;
}
.sr-annotations-header {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--s-1);
}
.sr-anno-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    font-size: var(--text-sm);
}

.sr-anno-num {
    width: var(--s-4); height: var(--s-4);
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: var(--s-0);
}
.sr-anno-text {
    flex: 1;
    color: var(--text-sub);
    line-height: var(--leading-snug);
    word-break: break-word;
}
.sr-anno-delete {
    border: none; background: none;
    color: var(--text-sub);
    cursor: pointer;
    font-size: var(--text-base);
    padding: 0;
    line-height: var(--leading-none);
}
.sr-anno-delete:hover { color: var(--red); transform: translateY(var(--hover-lift-sm)); }
.sr-anno-delete:active { transform: scale(var(--active-scale)); }

/* ══ 반응형 ══════════════════════════════ */

/* 태블릿 (1024px) */
@media (max-width: 1024px) {
    .screenshot-review-modal { max-width: min(800px, 96vw); }
}
/* 태블릿 (960px) */
@media (max-width: 960px) {
    .screenshot-review-modal { width: 95vw; }
}

/* 모바일 — 전체화면, 도구바 축소, 이미지 최대 확장 */
@media (max-width: 768px) {
    .screenshot-review-modal {
        width: 100vw;
        height: 100vh; height: 100dvh; /* dvh: 모바일 주소창 제외한 실제 뷰포트 */
        max-width: 100vw;
        max-height: 100vh; max-height: 100dvh;
        border-radius: 0;
    }
    /* 캐러셀: nav 오버레이, 패딩 제거 → 이미지 영역 극대화 */
    .sr-carousel { min-height: 0; padding: 0; position: relative; }
    /* 캔버스: 모바일에서 세로로 더 길게 (마킹 #8) — 세로 스크린샷이 잘 보이도록 */
    .sr-canvas-wrap {
        min-height: var(--layout-lg);
        max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
        align-self: stretch;
    }
    /* nav 버튼을 이미지 위에 오버레이 → 이미지가 전체 너비 사용 */
    .sr-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: var(--s-6); height: var(--s-6);
        font-size: var(--text-lg);
        background: var(--overlay-bg);
        color: var(--text);
        border-color: transparent;
    }
    .sr-nav:hover { background: var(--overlay-scrim-heavy); transform: translateY(var(--hover-lift-sm)); }
    .sr-nav-prev { left: var(--s-2); }
    .sr-nav-next { right: var(--s-2); }
    .sr-tool { width: var(--s-8-5); height: var(--s-8-5); }
    /* 코멘트 영역 축소 — 이미지 공간 확보 */
    .sr-comment-input { min-height: 32px; max-height: 48px; padding: var(--s-1) var(--s-2); font-size: var(--text-sm); }
    .sr-comment-area { padding: var(--s-1) var(--s-4); }
    .sr-global-comment-area { padding: var(--s-1) var(--s-4); }
    /* 포인트 코멘트 */
    .sr-annotation-popup { min-width: 150px; max-width: var(--card-min-sm); }
    .sr-annotations-list { max-height: 60px; padding: 0 var(--s-4) var(--s-1); }
    /* 썸네일 스트립 축소 */
    .sr-thumbnail-strip { padding: var(--s-1) var(--s-4); }
    .sr-thumb { width: var(--s-8-5); height: var(--s-8-5); }
    .sr-thumb-delete { display: flex; width: 16px; height: 16px; font-size: var(--text-sm); top: -2px; right: -2px; }
    .sr-add-btn { width: 44px; height: 44px; font-size: var(--text-lg); }
    /* 푸터 축소 */
    .sr-send { width: 100%; justify-content: center; }
    .sr-footer { flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-4); }
}

/* 소형 모바일 — 이미지 영역 극대화 */
@media (max-width: 640px) {
    .sr-header { padding: var(--s-1) var(--s-3); }
    .sr-toolbar { padding: var(--s-1) var(--s-3); gap: var(--s-1); }
    .sr-tool { width: 36px; height: 36px; font-size: var(--text-sm); }
    .sr-comment-area { padding: var(--s-1) var(--s-3); }
    .sr-global-comment-area { padding: var(--s-1) var(--s-3); }
    .sr-comment-input { min-height: var(--s-5-5); max-height: var(--s-7-5); }
    .sr-annotations-list { padding: 0 var(--s-3) var(--s-1); }
    .sr-thumbnail-strip { padding: var(--s-1) var(--s-3); }
    .sr-footer { padding: var(--s-1) var(--s-3); }
    /* 더 작은 화면: UI 요소 축소 + 이미지 영역 세로 극대화 (마킹 #8) */
    .sr-canvas-wrap {
        min-height: var(--layout-lg);
        max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
        align-self: stretch;
    }
    .sr-thumb { width: var(--s-7-5); height: var(--s-7-5); }
    .sr-add-btn { width: 40px; height: 40px; font-size: var(--text-lg); }
}

/* 접근성: reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sr-carousel, .sr-thumb, .sr-tool, .sr-nav { transition: none; }
}

/* ── §CQ4 Container Query: 리뷰 패널 축소 레이아웃 ── */
@container screenpanel (max-width: 600px) {
    .sr-header {
        padding: var(--s-2) var(--s-3);
    }
    .sr-toolbar {
        padding: var(--s-1) var(--s-3);
        gap: var(--s-1);
    }
    .sr-tool {
        width: var(--s-5-5);
        height: var(--s-5-5);
    }
    .sr-comment-area {
        padding: var(--s-1) var(--s-3);
    }
    .sr-footer {
        flex-direction: column;
        gap: var(--s-1);
        padding: var(--s-2) var(--s-3);
    }
}