/* ==========================================================================
   📜 IMAGES CONVERTER - 아날로그 쿨 페이퍼 & 레트로 미니멀리즘 스타일시트 (12차 최종 튜닝 완료)
   ========================================================================== */

/* 1. 아날로그 감성 디자인 토큰 (글로벌 쿨톤 변수 설정 - 채도 30%p 다운) */
:root {
    --bg-paper: #F3F4F8;       /* 쿨그레이 미색 재생종이 질감 */
    --card-bg: #FFFFFF;        /* 하얀 전지 질감 (조작 구역) */
    --stroke-dark: #111827;    /* 드로잉 펜슬 쿨 다크 그레이 (경계선 및 주 텍스트) */
    
    /* 레트로 빈티지 쿨 블루 컬러 팩 (대지의 대조색) 
       채도를 30%p 인하하여 눈이 편안하고 차분한 #4036B5 (hsl 246, 55%, 46%)로 세팅 완료! */
    --terracotta-clay: #4036B5; /* 채도 30%p 인하된 차분한 레트로 블루 */
    --terracotta-bg: #E8EAF6;   /* 매우 연하고 은은한 그레이시 블루 백그라운드 */
    --olive-leaf: #0D9488;      /* 성공/진행: 산뜻한 딥 에메랄드 */
    --olive-bg: #E6F4F1;        /* 연한 에메랄드 백그라운드 */
    --rose-dust: #E11D48;       /* 고풍스러운 장미붉은색 (경고/위험/삭제) */
    --rose-bg: #FFEBEF;         /* 연한 장미빛 백그라운드 */
    
    /* 안내 구역과 조작 구역 분리용 쿨그레이 컬러 추가 */
    --sand-guide-bg: #EAECEF;   /* 안내 영역 전용 차분한 쿨 그레이 */
    --sand-highlight: #ECEFF2;  /* 미세 강조용 쿨 모래색 */
    
    /* 물리적 드로잉 그림자 (Retro Tactile Shadow) */
    --shadow-solid-sm: 2px 2px 0px #111827;
    --shadow-solid-md: 4px 4px 0px #111827;
    --shadow-solid-lg: 7px 7px 0px #111827;
    
    /* [14차] 타이포그래피 - Pretendard 전수 적용 */
    --font-base: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* 자간 시스템 (Figma 기준 %): 본문 -4% = -0.04em | 제목/레이블 -2% = -0.02em */
    --ls-body: -0.04em;
    --ls-heading: -0.02em;
    --lh-body: 1.65; /* 165% */
    
    --transition-snappy: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. 초기화 및 종이 질감 배경 적용 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-base);
    background-color: var(--bg-paper);
    color: var(--stroke-dark);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    word-break: keep-all; /* 단어 단위 줄바꿈을 통한 고아 단어 현상 전역 차단 */
    /* 모눈종이 패턴 */
    background-image: 
        radial-gradient(var(--stroke-dark) 0.5px, transparent 0.5px), 
        radial-gradient(var(--stroke-dark) 0.5px, #F3F4F8 0.5px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    opacity: 0.98;
}

/* 제목/헤더/레이블 계열: 자간 -0.02em, 행간 1.3 */
h1, h2, h3, h4,
.logo-text, .step-badge-label, .info-guide-badge,
.step-num, .flow-label, .bridge-text, .setting-item label,
.file-name, .section-title h2, .modal-card h3 {
    letter-spacing: var(--ls-heading);
    line-height: 1.35;
}

/* 3. 레이아웃 구조 (데스크탑 와이드 환경을 위해 1160px로 콤팩트 설정) */
.app-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 3rem 1.5rem; /* 세로/가로 여백을 조절하여 아기자기하게 튜닝 */
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* 섹션 간 마진 축소 */
    transition: filter 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); /* 흐림 처리가 부드럽게 활성화되도록 트랜지션 추가 */
}

/* 팝업 활성화 시 전체 배경 레이어를 균일하게 흐림 처리하는 클래스 */
.app-container.modal-active {
    filter: blur(8px); /* 기존 4px에서 8px로 상향하여 더욱 강력하고 고급스러운 배경 분리 효과 제공 */
}

/* 3-1. 메인 콘텐츠 내부 섹션 간격 (app-container의 gap과 동일하게 통일) */
.app-main {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* app-container와 동일한 2.5rem 여백으로 통일 */
}

/* 4. 에디토리얼 신문 타이틀 스타일 헤더 */
.app-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.editorial-badge {
    font-family: var(--font-sans);
    font-size: 0.75rem; /* 아기자기하게 축소 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--stroke-dark);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.badge-dot {
    width: 5px;
    height: 5px;
    background-color: var(--terracotta-clay);
    border-radius: 50%;
}

.logo-area {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem; /* [12차 수정] 배지가 로고 바로 아래 붙도록 4rem → 1.2rem으로 줄임 */
}

.logo-icon {
    width: 2.3rem; /* FontAwesome 2.0rem 스펙과 동등하게 스케일 매칭 */
    height: 2.3rem;
    color: var(--terracotta-clay);
}

.logo-text {
    font-family: 'Noto Sans KR', var(--font-sans);
    font-size: 2.3rem; /* 콤팩트 한국어 최적화 크기 */
    font-weight: 850; /* 힘 있고 꽉 찬 프리미엄 느낌 */
    font-style: normal;
    color: var(--stroke-dark);
    letter-spacing: -0.04em; /* 한글 자간 밀착 처리로 세련된 편집 매거진 감성 연출 */
    text-transform: none;
}

.app-tagline {
    font-size: 0.95rem; /* 데스크탑 폰트 크기 콤팩트화 */
    color: var(--stroke-dark);
    opacity: 0.85;
    font-weight: 500;
    max-width: 600px; /* 콤팩트화 */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.stamp-badge {
    background: var(--terracotta-bg);
    border: 1px dashed var(--terracotta-clay);
    color: var(--terracotta-clay);
    padding: 0.3rem 0.8rem; /* 콤팩트 패딩 */
    font-size: 0.8rem; /* 콤팩트화 */
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.header-divider {
    width: 100%;
    height: 4px;
    border-top: 1.5px solid var(--stroke-dark);
    border-bottom: 0.5px solid var(--stroke-dark);
    margin-top: 1.5rem;
}

/* 5. 카드 공통 뼈대 */
.paper-card {
    border-radius: 6px;
    padding: 1.8rem; /* 기존 2.2rem에서 콤팩트화 */
    transition: var(--transition-snappy);
    position: relative;
}

/* ==========================================================================
   📢 [읽는 안내 영역] 공지사항 / 도움말 카드 (샌드 베이지 배경 + 점선 + 미동 없음)
   ========================================================================== */
.info-card, .help-section {
    background: #F8F9FA;
    border: 1px dashed rgba(74, 74, 74, 0.3); /* 30% 투명도 적용하여 대폭 연하게 변경 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.8rem 2.0rem; /* 좌우 패딩을 PART 1인 settings-section(2.0rem)과 완벽 동기화 */
    transform: none !important;
}

/* [14차] PART 1 섹션: 더 큰 패딩으로 시각적 중요도 강조 */
.settings-section {
    padding: 2.2rem 2.0rem 3.2rem; /* 하단 여백을 넉넉히 주어 세로 비율 확장 */
}

/* PART 1 드롭존: 최소 높이를 대폭 확장하여 시각적 위계(70%) 확보 */
.settings-section .flow-box.dropzone {
    min-height: 185px; /* 기존 130px에서 웅장하게 확장 */
}


.info-card:hover, .help-section:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* 호버 시 어떠한 그림자/위치 변화도 주지 않는 글로벌 정적 상태 규칙 준수 */
}

/* 읽는 구역 전용 라벨 배지 데코 (배지 크기를 기존 대비 콤팩트하게 보정) */
.info-badge-header {
    position: absolute;
    top: -18px; /* 콤팩트화에 따른 수직 정렬 보정 */
    left: 20px;
}

.info-guide-badge {
    background-color: var(--stroke-dark);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 1.2rem; /* 콤팩트화 */
    font-weight: 700; /* PART 1 배지 굵기(700)와 완벽 통일 */
    padding: 0.5rem 1.2rem; /* 배지 크기에 맞춰 콤팩트한 패딩 */
    border: none;
    border-radius: 0 !important; /* 스티커 라운딩 전면 제거 */
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 3px 3px 0px hsl(224, 44%, 0%) !important; /* 채도+5%, 명도-15% HSL 색상, X:+3, Y:+3, Blur:0 딱딱한 그림자 */
    transform: rotate(-0.5deg);
}

/* [12차 피드백] 이미지 규격 사전 스티커 톤다운 - 주의사항(검은색)보다 덜 중요하게 시각적 위계 설정 */
.help-section .info-guide-badge {
    background-color: var(--terracotta-bg) !important;
    color: var(--terracotta-clay) !important;
    border: none !important;
    border-radius: 0 !important; /* 스티커 라운딩 전면 제거 */
    box-shadow: 3px 3px 0px hsl(231, 53%, 79%) !important; /* 채도+5%, 명도-15% HSL 색상, X:+3, Y:+3, Blur:0 딱딱한 그림자 */
    transform: none !important;
    font-weight: 700 !important; /* 사전 배지 굵기도 700으로 일치 강제 */
}

.info-content {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem; /* 배지 여백 확보 */
}

/* 공지사항 내부 불안해결 2분할 가로 정렬 설계 */
.info-item-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem;
    margin-top: 0.6rem;
}

.info-sub-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.info-sub-item strong {
    font-family: var(--font-sans);
    font-size: 1.1rem; /* 콤팩트화 */
    font-weight: 700;
    color: var(--terracotta-clay);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-sub-item p {
    font-size: 0.92rem; /* 콤팩트화 */
    color: var(--stroke-dark);
    opacity: 0.9;
    line-height: 1.6;
}

/* 안내 및 단계 가이드 구분을 위한 구분선 - 표준 점선 스타일 통일 */
.info-divider {
    height: 0;
    border-top: 1px dashed rgba(74, 74, 74, 0.3);
    margin: 2rem 0 1.6rem 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

/* [13차] 1단계 ➔ 2단계 가로 흐름 그리드 정의 - 2열 1fr 1fr 및 상단 박스와의 수직 정렬선 완벽 일치 */
.info-steps-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1단계/2단계가 각각 정확히 50%씩 차지하는 2열 구조 */
    gap: 2.2rem; /* 상단 info-item-box와 동일한 2.2rem gap으로 세로 정렬선 1px 오차 없이 일치 */
    align-items: center; /* 수직 정렬 */
}

.info-step-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem; /* 타이틀과 본문 대폭 밀착 */
}

.info-step-arrow {
    display: none; /* 데스크탑 뷰에서는 화살표를 감추어 2열 그리드 구조 보존 */
}

/* 오직 숫자의 굵기로만 극대화된 시인성과 위계 설정 */
.step-num {
    font-family: var(--font-sans);
    font-size: 1.18rem; /* 콤팩트화 */
    font-weight: 700;
    color: var(--stroke-dark);
    letter-spacing: -0.5px;
    border-bottom: none; /* 밑줄 완전 제거 */
    padding-bottom: 0;
    width: fit-content;
    margin-bottom: 0; /* 타이틀 아래 margin 제거를 통한 밀착감 조성 */
}

.info-step-item p {
    font-size: 0.92rem; /* 콤팩트 복원 */
    color: var(--stroke-dark);
    opacity: 0.95;
    line-height: 1.65;
}

/* ==========================================================================
   ⚙️ [사용자 조작 영역] PART 1, PART 2 설정/대기열 카드 (순백색 + 3D 실선 그림자)
   ========================================================================== */
.interactive-card {
    background: var(--card-bg);
    border: 1px solid rgba(74, 74, 74, 0.3); /* 30% 투명도 적용하여 대폭 연하게 변경 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* 고급스럽고 은은하게 퍼지는 현대적인 그림자 적용 */
}

/* 조작 영역의 왼쪽 상단 큼직한 PART 초대형 스탬프 스티커 */
.step-badge-label {
    position: absolute;
    top: -18px;
    left: 20px;
    background: var(--terracotta-clay);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.2rem; /* 다른 스티커 배지 크기인 1.2rem과 완벽 통일 */
    padding: 0.5rem 1.2rem; /* 패딩 크기 통일 */
    border: none; /* 투박한 검은 테두리 삭제 */
    border-radius: 0 !important; /* 스티커 라운딩 전면 제거 */
    box-shadow: 3px 3px 0px hsl(246, 60%, 31%) !important; /* 채도+5%, 명도-15% HSL 색상, X:+3, Y:+3, Blur:0 딱딱한 그림자 */
    transform: rotate(-1deg);
    z-index: 10;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #8E8E8E; /* 선명하고 세련된 3배 어두운 명도(#8E8E8E) 1px 실선 적용 */
    padding-bottom: 0.6rem;
}

.section-title i {
    font-size: 1.25rem;
    color: var(--terracotta-clay);
}

.section-title h2 {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--stroke-dark);
}

/* ==========================================================================
   ⚙️ [고도화] PART 1: 일체형 흐름 대시보드 (Flow Container)
   ========================================================================== */
.flow-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.6rem; /* 화살표와 양쪽 박스 간 여백 대폭 축소 */
    margin-bottom: 0;
    background: var(--sand-highlight);
    padding: 1.5rem;
    border: 1px solid #E2E2E2; /* 내부 컨테이너 선명도 대폭 연하게 롤백 */
    border-radius: 4px;
    box-shadow: none; /* 투박한 내장 섀도우 전면 제거 */
}

.flow-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: var(--card-bg);
    border: 1px solid #E2E2E2; /* 내부 컨테이너 선명도 대폭 연하게 롤백 */
    padding: 2.2rem 1.6rem; /* 섹션별 내부 패딩을 넓혀 영역 크기를 시원하게 확장 */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 아주 은은하고 퍼지는 그림자 적용 */
}

.flow-label {
    font-family: var(--font-sans);
    font-size: 0.9rem; /* 콤팩트화 */
    font-weight: 700;
    color: var(--stroke-dark);
    border-bottom: 1px solid #E2E2E2; /* 내부 컨테이너 선명도 대폭 연하게 롤백 */
    padding-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* From 드롭존의 기본 대기 상태 (두 번째 이미지의 보라색 기본 상태 반영) */
.flow-box.dropzone {
    cursor: pointer;
    background: var(--terracotta-bg); /* 보라색 기본 상태 배경 반영 */
    transition: var(--transition-snappy);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px dashed var(--terracotta-clay); /* 보라색 기본 상태 점선 경계선 반영 */
    box-shadow: 0 4px 12px rgba(64, 54, 181, 0.03); /* 은은한 섀도우 */
}

/* 호버 시 톤온톤 고정 피드백 (보라색 배경 상태를 유지한 채로 그림자를 살짝 높이고 명도 낮춤) */
.flow-box.dropzone:hover, .flow-box.dropzone.dragover {
    border: 1.5px dashed var(--terracotta-clay) !important; /* 브랜드 컬러 대시드 하이라이트 */
    background-color: hsl(231, 48%, 88%) !important; /* 보라색 배경 유지 + 명도(Lightness) 낮춘 연보라색 */
    transform: translateY(1px); /* 살짝 눌려지는 interaction 일치 */
    box-shadow: 0 10px 25px rgba(64, 54, 181, 0.15) !important; /* 호버 시 전체적인 그림자 높임 */
}

.flow-content-upload {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    text-align: left;
}

.upload-icon-area {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    border: 1.5px solid var(--terracotta-clay); /* 보라색 테두리 반영 */
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); /* 극도로 옅은 그림자 */
    transition: var(--transition-snappy);
}

.upload-icon-primary {
    font-size: 1.4rem;
    color: var(--terracotta-clay); /* 보라색 아이콘 색상 반영 */
}

.upload-icon-arrow {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 0.75rem;
    color: var(--terracotta-clay);
    background: var(--card-bg);
    padding: 0.05rem;
    border-radius: 50%;
    border: 1px solid #8E8E8E; /* 3배 어두운 명도(#8E8E8E) 1px 실선 적용 */
}

.flow-box.dropzone:hover .upload-icon-area, .flow-box.dropzone.dragover .upload-icon-area {
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 0 4px 12px rgba(64, 54, 181, 0.1);
    border-color: var(--terracotta-clay); /* 호버 시 아이콘 영역 경계선을 브랜드 컬러로 */
}

.upload-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.upload-text-group strong {
    font-size: 0.9rem; /* 콤팩트화 */
    font-weight: 700;
    color: var(--stroke-dark);
}

.upload-text-group .upload-hint {
    font-size: 0.75rem; /* 콤팩트화 */
    color: var(--stroke-dark);
    opacity: 0.8;
}

/* 가공 화살표 다리 */
.flow-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0; /* 불필요한 좌우 여백 전면 제거 */
    width: 40px; /* 고정폭 지정으로 화살표 영역 최소화 */
}

.bridge-arrow {
    font-size: 1.5rem; /* 시선 강탈 방지를 위해 크기를 살짝 콤팩트하게 조율 */
    color: #808080 !important; /* 톤다운된 회색 (#808080) 통일 */
}

/* To 셀렉트 박스 차분한 레트로 블루 스타일링 */
.accent-select-wrapper select {
    border: 1px solid #D1D5DB !important; /* 기본 상태: 1px 두께의 깔끔하고 중립적인 색상 */
    background: #FFFFFF !important; /* 하얀 바탕 적용 */
    font-weight: 500;
    font-size: 0.95rem; /* 콤팩트화 */
    color: var(--stroke-dark) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: var(--transition-snappy);
}

.accent-select-wrapper select:hover {
    border-color: #9CA3AF !important; /* 호버 시 회색 선 강조 */
    background: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.accent-select-wrapper select:focus,
.accent-select-wrapper select:active {
    border-color: var(--terracotta-clay) !important; /* 사용자가 탭(Focus)했을 때만 브랜드 컬러로 테두리 하이라이트 */
    color: var(--stroke-dark) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(64, 54, 181, 0.12) !important; /* 은은한 브랜드 포커스 링 */
    font-weight: 700;
}

.accent-select-wrapper::after {
    color: var(--stroke-dark) !important; /* 기본 상태 화살표 검은색 정돈 */
    font-size: 1.1rem;
}

/* [14차] 하단 미세 튜닝 바 (크기 규격 + 화질 항목 2열 그리드) - 표준 점선 스타일 통일 */
.fine-tuning-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    border-top: 1px dashed rgba(74, 74, 74, 0.3);
    padding-top: 1.3rem; /* 콤팩트 축소 */
    margin-top: 1.3rem; /* 콤팩트 축소 */
}

.stamp-item {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--stroke-dark);
    border-radius: 2px;
    color: var(--stroke-dark);
    box-shadow: var(--shadow-solid-sm);
}

/* 설정 옵션 내부 */
.setting-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.setting-item label {
    font-size: 0.95rem; /* 콤팩트화 */
    font-weight: 700;
    color: var(--stroke-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.setting-item label i {
    color: var(--terracotta-clay);
}

.setting-desc {
    font-size: 0.8rem;
    color: var(--stroke-dark);
    opacity: 0.7;
}

.label-with-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-val {
    font-family: var(--font-sans);
    font-size: 0.85rem; /* 콤팩트화 */
    font-weight: 700;
    color: var(--terracotta-clay);
    background: var(--terracotta-bg);
    padding: 0.15rem 0.5rem;
    border: 1px solid #E2E2E2; /* 1px 연한 테두리로 변경 */
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02); /* 은은한 섀도우 */
}

/* 크기 지정 방식 토글 탭 버튼 (레트로 차분한 블루 스타일) */
.resize-mode-tabs {
    display: flex;
    gap: 0.4rem;
    background: #F1F3F5; /* 더 연하고 산뜻한 배경 */
    padding: 0.25rem;
    border: 1px solid #E2E2E2; /* 얇은 1px 연한 회색 선 적용 */
    border-radius: 4px;
    margin-bottom: 0.4rem;
    width: fit-content;
}

.tab-btn {
    padding: 0.45rem 1rem;
    font-size: 0.82rem; /* 콤팩트화 */
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--stroke-dark);
    cursor: pointer;
    border-radius: 2px;
    transition: var(--transition-snappy);
}

.tab-btn.active {
    background: var(--terracotta-clay);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(64, 54, 181, 0.2);
    border: none; /* 선 제거 */
}

.tab-btn:hover:not(.active) {
    background: rgba(64, 54, 181, 0.1);
}

/* 수동 픽셀 크기 직접 입력 스타일링 - 가로/세로 1줄 병렬 배치 */
.pixel-inputs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* 줄바꿈 완전 차단, 강제 1줄 배치 */
    gap: 0.5rem;
    background: #F8F9FA; /* 연한 배경색 적용 */
    padding: 0.5rem 0.8rem;
    border: 1px solid #E2E2E2; /* 얇은 1px 연한 회색 선 적용 */
    border-radius: 4px;
    width: 100%;
}

/* 인라인 픽셀 입력창 (라벨 제거 후 입력창 자체만 콤팩트하게) */
.px-inline-input {
    flex: 1 !important; /* 남은 회색 박스 내부 가로 공간을 꽉 채우도록(Fill Container) flex: 1 적용 */
    width: 0 !important; /* 고정폭 리셋을 유도하여 유연한 반응형 배분 유도 */
    min-width: 50px;
    padding: 0.45rem 0.6rem !important; /* 인풋 내부 터치 가독성 패딩 */
    font-size: 0.9rem !important;
}

.px-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--stroke-dark);
    opacity: 0.8;
}

.custom-text-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #D1D5DB; /* 깔끔하고 중립적인 1px 테두리 */
    background: var(--card-bg);
    color: var(--stroke-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem; /* 콤팩트화 */
    border-radius: 4px;
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02); /* 무거운 투박한 안쪽 그림자 제거 */
    transition: var(--transition-snappy);
}

.custom-text-input:hover {
    border-color: #9CA3AF;
}

.custom-text-input:focus {
    border-color: var(--terracotta-clay) !important; /* 포커스 시 브랜드 컬러 하이라이트 */
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(64, 54, 181, 0.12); /* 포커스 링 추가 */
}

.px-divider {
    font-size: 0.9rem;
    color: var(--stroke-dark);
    opacity: 0.5;
}

.px-unit {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--stroke-dark);
    opacity: 0.8;
}

/* 선택 상자 (Select) */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-wrapper select {
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--card-bg);
    border: 1px solid #D1D5DB; /* 깔끔하고 중립적인 1px 테두리 */
    border-radius: 4px;
    color: var(--stroke-dark);
    font-size: 0.95rem; /* 콤팩트화 */
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: var(--transition-snappy);
}

.custom-select-wrapper select:hover {
    border-color: #9CA3AF;
}

.custom-select-wrapper select:focus {
    border-color: var(--terracotta-clay) !important; /* 포커스 시 브랜드 컬러 하이라이트 */
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(64, 54, 181, 0.12) !important;
}

.custom-select-wrapper::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--stroke-dark);
    pointer-events: none;
}

.select-sm select {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
}

/* 복고 다이얼 슬라이더 */
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--sand-highlight);
    border: 1px solid #E2E2E2; /* 1px 연한 테두리로 변경 */
    outline: none;
    cursor: pointer;
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%; /* 고급스럽고 둥근 슬라이더 노브 */
    background: var(--terracotta-clay);
    border: none; /* 투박한 검은 테두리 삭제 */
    box-shadow: 0 2px 8px rgba(64, 54, 181, 0.3); /* 부드러운 그림자 */
    transition: var(--transition-snappy);
}

.custom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* 9. 작업대 관리 및 버튼 액션 */
.queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #EBEBEB; /* 얇고 연한 1px 가로 경계선 */
    padding-bottom: 1.2rem;
}

.queue-header .section-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.queue-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.queue-actions .btn {
    white-space: nowrap !important; /* 모바일/데스크탑 버튼 텍스트 줄바꿈 방지 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 아이콘과 텍스트의 간격 고정 */
}

/* 3D 레트로 입체 버튼 ➔ 프리미엄 미니멀 섀도우 버튼 */
.btn {
    padding: 10px 18px; /* 정수 38px 렌더링을 위한 정밀 상하/좌우 패딩 */
    border-radius: 6px; /* 더 부드럽고 고급스러운 모서리 */
    font-size: 14px; /* 14px 폰트 크기 강제 지정 */
    line-height: 18px; /* 내용 높이 18px 강제 지정 */
    font-weight: 700;
    border: none; /* 투박한 검은 외곽선 삭제 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 아이콘과 텍스트의 1px 오차도 없는 gap 통일 */
    background: var(--card-bg);
    color: var(--stroke-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 부드럽고 퍼지는 modern 그림자 */
    transition: var(--transition-snappy);
    box-sizing: border-box; /* 소수점 픽셀 왜곡 방지 */
}

.btn:hover {
    transform: translateY(1px); /* 아래로 살짝 눌려지는(Press-down) 반응 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); /* 호버 시 섀도우를 살짝 줄여 눌린 느낌 연출 */
}

.btn:active {
    transform: translateY(2px); /* 누를 때 더 눌려지는 반응성 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.btn-primary {
    background: var(--terracotta-clay);
    color: #FFF;
    transition: var(--transition-snappy);
}
.btn-primary:hover {
    background-color: hsl(246, 40%, 41%) !important; /* 명도 10% 낮추고 채도 줄임, 텍스트 선명도 보존 */
    color: #FFF !important;
}

.btn-secondary {
    background: var(--sand-highlight);
    border: 1px solid #4A4A4A; /* 3배 어두운 테두리 적용 */
    padding: 9px 17px; /* 1px 테두리를 고려하여 38px 높이를 맞춘 정수 패딩 */
    transition: var(--transition-snappy);
}
.btn-secondary:hover {
    background-color: hsl(210, 12%, 85%) !important;
    color: var(--stroke-dark) !important;
}

.btn-emerald {
    background: var(--olive-leaf);
    color: #FFF;
    transition: var(--transition-snappy);
}
.btn-emerald:hover {
    background-color: hsl(175, 70%, 29%) !important; /* 명도 10% 낮추고 채도 줄임, 텍스트 선명도 보존 */
    color: #FFF !important;
}

.btn-rose {
    background: var(--rose-dust);
    color: #FFF;
    transition: var(--transition-snappy);
}
.btn-rose:hover {
    background-color: hsl(347, 65%, 45%) !important; /* 명도 10% 낮추고 채도 줄임, 텍스트 선명도 보존 */
    color: #FFF !important;
}

.btn-sm {
    padding: 7px 10px; /* 상하 7px, 좌우 10px 정수 패딩 (28px 렌더링 높이 확보) */
    font-size: 12px; /* 12px 폰트 강제 지정 */
    line-height: 14px; /* 내용 높이 14px 강제 지정 */
    gap: 4px; /* 아이콘과 텍스트 간격 4px 통일 */
}

.file-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.file-actions .btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    line-height: 14px;
}

/* 10. 파일 카드 목록 스타일 */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.file-item {
    background: var(--card-bg);
    border: 1px solid #E2E2E2; /* 가장 얇은 1px 두께의 연한 회색 선 적용 */
    border-radius: 4px;
    padding: 1.1rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); /* 아주 은은한 섀도우 */
    transition: var(--transition-snappy);
}

.file-item:hover {
    transform: translateY(-2px); /* 부드러운 입체 수직 이동 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    border-color: #D2D2D2; /* 호버 시 미세 테두리 어둡게 피드백 */
}

/* 썸네일 나무 액자 ➔ 콤팩트 프레임 */
.file-thumb {
    width: 60px;
    height: 60px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--sand-highlight);
    border: 1px solid #E2E2E2; /* 충돌을 방지하기 위한 1px 연한 회색 테두리 적용 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-thumb i {
    font-size: 1.5rem;
    color: var(--stroke-dark);
}

/* 파일 세부정보 */
.file-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow: hidden;
}

.file-name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.file-meta {
    font-size: 0.85rem;
    color: var(--stroke-dark);
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.meta-divider {
    color: rgba(17, 24, 39, 0.3);
}

.saving-badge {
    background: var(--olive-bg);
    color: var(--olive-leaf);
    border: 1px dashed var(--olive-leaf);
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* 수직 중앙 정렬 정밀 맞춤 */
}

/* 아날로그 진행바 ➔ 미니멀 진행바 */
.file-progress-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 180px;
}

.progress-bar-container {
    height: 10px;
    background: var(--sand-highlight);
    border: 1px solid #E2E2E2; /* 1px 연한 회색 테두리로 정돈 */
    border-radius: 2px; /* 부드러운 반경 추가 */
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--olive-leaf);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 0px,
        rgba(255, 255, 255, 0.15) 2px,
        transparent 2px,
        transparent 4px
    );
    transition: width 0.2s ease-out;
}

.progress-status {
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

.status-completed {
    color: var(--olive-leaf);
}

.status-error {
    color: var(--rose-dust);
}

.file-actions {
    display: flex;
    align-items: stretch; /* 세로 높이 완벽 일치 강제 */
    gap: 0.6rem;
}

.file-actions .btn {
    min-height: 28px; /* 세로 최소 높이 강제 통일 */
}

/* ==========================================================================
   📖 [11차 전면 개편] 이미지 규격 사전 구역 (그림자/보더/배경이 없는 완벽한 플랫 텍스트 설계)
   ========================================================================== */

/* 3분할 텍스트 핀포인트 안내판 */
.help-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.2rem;
    margin-bottom: 0.5rem;
}

/* 이미지 포맷 가이드 내 개별 설명 구분용 점선 복원 */
.help-section .info-sub-item {
    border-bottom: none; /* 데스크탑 기준 가로폭 해상도에서는 구분선 숨김 */
    padding-bottom: 0;
}

.help-section .info-sub-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 도서 정기 간행물 풋터 스타일 */
.app-footer {
    text-align: center;
    margin-top: 2rem;
    border-top: 1px solid #EBEBEB; /* 얇고 투명한 1px 경계선 적용 */
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.app-footer p {
    font-family: var(--font-sans);
    font-size: 0.88rem; /* 콤팩트 축소 */
    color: var(--stroke-dark);
    font-weight: 400; /* 볼드 전면 제거 */
    opacity: 0.6; /* 중요하지 않은 정보이므로 연하게 보정 */
}

.app-footer .footer-sub {
    font-family: var(--font-sans);
    font-size: 0.78rem; /* 콤팩트 축소 */
    color: var(--stroke-dark);
    font-weight: 400;
    opacity: 0.45; /* 텍스트를 연하고 흐릿하게 보정 */
}

/* ==========================================================================
   🚨 [11차 개편] 팝업 안내 모달 (오차 없는 가로/세로 정중앙 대칭 정렬 및 컴팩트 레이아웃)
   ========================================================================== */
.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.82); /* 순수 흑백 명도만 적용하여 색상 틴트(보랏빛 등)를 원천 차단 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 1rem; /* 모바일 화면에서 모달이 양쪽에 붙지 않도록 안전 여백 확보 */
}

.modal-card {
    background: var(--card-bg);
    border: none; /* 투박한 검은 테두리 삭제로 극도의 고급스러움 구현 */
    border-radius: 6px;
    padding: 2.5rem 2rem;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* 모달 카드의 존재감을 살리는 은은하고 깊이 있는 그림자 적용 */
    transform: translateY(0);
    animation: slideUp 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center !important;    /* 가로축 정중앙 강제 고정 */
    justify-content: center !important; /* 세로축 정중앙 강제 고정 */
    text-align: center !important;      /* 글자 정중앙 강제 고정 */
    gap: 1.2rem;
}

.modal-content-center {
    display: flex;
    flex-direction: column;
    align-items: center !important;    /* 자식 요소 가로 중앙 배치 */
    justify-content: center !important;
    width: 100%;
    gap: 1.2rem;
}

.modal-icon {
    font-size: 2.8rem;
    color: var(--olive-leaf);
    margin-bottom: 0.2rem;
    display: inline-block;
}

.modal-card h3 {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--stroke-dark);
    width: 100%;
    text-align: center !important;
}

.modal-body {
    font-size: 0.95rem;
    color: var(--stroke-dark);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    align-items: center !important;    /* 내부 텍스트 라인 가로 중앙 정렬 */
    justify-content: center !important;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    width: 100%;
    text-align: center !important;
}

.modal-body p {
    margin: 0;
    text-align: center !important;
    width: 100%;
}

.modal-body strong {
    color: var(--terracotta-clay);
}

.modal-footer {
    width: 100%;
    display: flex;
    justify-content: center !important; /* 버튼을 완전히 가로 정중앙에 유치 */
    align-items: center !important;
    border-top: none;                   /* 경계선 제거로 극적인 미니멀리즘 생성 */
    padding-top: 0;
    margin-top: 0.6rem;
}

.modal-footer .btn {
    padding: 0.75rem 2.5rem;            /* 버튼 너비를 넓혀 가시성 확보 */
    font-size: 0.95rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto !important;          /* 완벽한 물리 정렬 보증 */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* [12차 신규] 삭제 확인 모달 경고 아이콘 색상 */
.modal-icon-danger {
    color: var(--rose-dust);
}

/* [12차 신규] 삭제 확인 모달: 취소/확인 이중 버튼 레이아웃 */
.modal-footer-dual {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    width: 100%;
    border-top: none;
    padding-top: 0;
    margin-top: 0.6rem;
}

/* [12차 신규] 모달 내 버튼 3D 그림자 제거 — 모달 UI 전체 평탄화 */
.modal-card .btn {
    box-shadow: none;
}

/* 모달 내 '취소' 및 '삭제합니다' 버튼 테두리 굵기 및 투명도 15% 동기화 (배경 기준 채도+10%, 명도-10% HSL 색상) */
#deleteModalWrapper #cancelDeleteBtn {
    border: 1px solid rgba(199, 212, 224, 0.15) !important;
    box-shadow: none !important;
}
#deleteModalWrapper #cancelDeleteBtn:hover {
    border: 1px solid rgba(199, 212, 224, 0.15) !important;
}

#deleteModalWrapper #confirmDeleteBtn {
    border: 1px solid rgba(191, 13, 52, 0.15) !important;
    box-shadow: none !important;
}
#deleteModalWrapper #confirmDeleteBtn:hover {
    border: 1px solid rgba(191, 13, 52, 0.15) !important;
}

/* ==========================================================================
   🚨 [6차 개편 - 신규] 파일 형식 미선택 시 햅틱 흔들림 및 경고 스타일 (To 셀렉트 박스 전용)
   ========================================================================== */
.shake-error {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; /* 0.5초로 조정하여 기민하고 명확한 햅틱 흔들림 동작 구현 */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    border: 1px solid var(--rose-dust) !important; /* 1px 얇은 선 경계선으로 변경 */
    background-color: var(--rose-bg) !important;
    color: var(--rose-dust) !important;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(3px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
    40%, 60% { transform: translate3d(5px, 0, 0); }
}

/* [7차 개편 - 신규] 미선택 상태 상시 장미빛 경고 스타일 (삭제 색상 매핑) */
.accent-select-wrapper select.empty-warning {
    border: 1px solid var(--rose-dust) !important; /* 1px 얇은 선 경계선으로 변경 */
    background-color: var(--rose-bg) !important;
    color: var(--rose-dust) !important;
}

/* empty-warning 적용 시 우측 화살표 색상도 장미빛으로 완벽 튜닝 */
.accent-select-wrapper:has(select.empty-warning)::after {
    color: var(--rose-dust) !important;
}

.accent-select-wrapper select.empty-warning:hover {
    background-color: #FFE0E6 !important;
}

/* [14차 수정] 포커스를 받아도 검은색으로 변하지 않고 경고 빨간색을 유지하도록 수정 */
.accent-select-wrapper select.empty-warning:focus,
.accent-select-wrapper select.empty-warning:active {
    border: 1px solid var(--rose-dust) !important; /* 1px 얇은 선 경계선으로 변경 */
    background-color: var(--rose-bg) !important;
    color: var(--rose-dust) !important;
    box-shadow: none !important; /* 흔들림 시 연보라색 포커스 링(오류) 완전 제거 */
    outline: none !important;
}

.accent-select-wrapper select.empty-warning option {
    color: var(--stroke-dark) !important;
    background-color: var(--card-bg) !important;
    font-weight: 500 !important;
}

.accent-select-wrapper select.empty-warning option:disabled {
    color: #888888 !important; /* placeholder 텍스트는 은은한 회색 처리 */
}

/* ==========================================================================
   🚫 [9차 보완 - 신규] 불필요한 정적 카드 호버 인터랙션 전면 차단
   ========================================================================== */

/* 1. Chapter 1 / 2 대형 조작 구역 카드 본체 호버 돌출 제거 */
.interactive-card:hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; /* 호버 시 어떠한 그림자/위치 변화도 주지 않는 글로벌 정적 상태 규칙 준수 */
}

/* 2. 하단 사전 구역 (.help-section) 호버 돌출 완벽 차단 */
.help-section:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* 호버 시 어떠한 그림자/위치 변화도 주지 않는 글로벌 정적 상태 규칙 준수 */
}

/* ==========================================================================
   📱 반응형 레이아웃 (Responsive)
   ========================================================================== */

/* 900px 이하: PART 1 내부 70/30 → 세로 1열로 전환 */
@media (max-width: 900px) {
    .part1-inner-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .part1-sidebar {
        border-left: none;
        border-top: 1px dashed rgba(74, 74, 74, 0.3);
        padding-left: 0;
        padding-top: 1.5rem;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.2rem;
    }

    .part1-sidebar .setting-item {
        flex: 1;
        min-width: 240px;
    }
}

/* 768px 이하: 모바일 전면 대응 */
@media (max-width: 768px) {
    .app-container {
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .app-main {
        gap: 2rem;
    }

    .logo-text {
        font-size: 1.8rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.04em !important;
    }

    /* 파일 등록 흐름 세로 전환 */
    .flow-container {
        flex-direction: column;
        gap: 0.5rem !important; /* 화살표와 위아래 박스 간 여백 최소화 */
        padding: 1.2rem;
        height: auto;
    }

    .flow-bridge {
        transform: rotate(90deg);
        margin: 0.1rem 0 !important; /* 세로 여백 최소화 */
        padding: 0 !important;
        width: auto !important;
        height: 30px !important;
    }

    .flow-box {
        width: 100%;
        padding: 1.2rem !important; /* 모바일 전용 콤팩트 패딩 */
    }

    /* 파일 목록 카드 */
    .file-item {
        grid-template-columns: auto 1fr;
        gap: 1rem;
    }

    .file-progress-wrapper {
        grid-column: 1 / -1;
        min-width: 100%;
    }

    .file-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    /* 대기열 헤더 */
    .queue-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .queue-actions {
        width: 100%;
    }

    .queue-actions button {
        flex: 1;
        justify-content: center;
    }

    /* 배지 굵기 및 크기 통일 (파트 원 굵기 700과 일치하도록 오버라이드) */
    .step-badge-label {
        font-size: 1.1rem;
        padding: 0.4rem 1.2rem;
        top: -14px;
        font-weight: 700 !important;
        border-radius: 0 !important; /* 라운딩 전면 제거 */
        box-shadow: 3px 3px 0px hsl(246, 60%, 31%) !important; /* 3px 3px 그림자 강제 고정 */
    }

    .info-badge-header {
        top: -18px;
    }

    .info-guide-badge {
        font-size: 1.05rem;
        padding: 0.45rem 1rem;
        font-weight: 700 !important; /* 주의사항 및 사전 배지 굵기 700으로 강제 통일 */
        border-radius: 0 !important; /* 라운딩 전면 제거 */
        box-shadow: 3px 3px 0px hsl(224, 44%, 0%) !important; /* 3px 3px 그림자 강제 고정 */
    }
    
    .help-section .info-guide-badge {
        font-weight: 700 !important; /* 사전 배지도 굵기 700 통일 */
        border-radius: 0 !important; /* 라운딩 전면 제거 */
        box-shadow: 3px 3px 0px hsl(231, 53%, 79%) !important; /* 3px 3px 그림자 강제 고정 */
    }

    /* [최종] 주의사항 컨테이너 전체 볼륨 축소 적용 (모바일 최적화) */
    .info-card {
        padding: 1.1rem 2.0rem 1.3rem !important; /* 좌우 패딩을 PART 1(2.0rem)과 완벽 동기화 */
    }

    .help-section {
        padding: 1.2rem 2.0rem 1.4rem !important; /* 좌우 패딩 동기화 및 모바일 볼륨 축소 */
    }

    .info-card .info-content {
        margin-top: 0.9rem !important; /* 안내 배지 아래 여백 축소 */
    }

    .info-card .info-divider {
        margin: 1.1rem 0 0.9rem 0 !important; /* 점선 분할선의 위아래 여백을 대폭 축소하여 세로 폭 절감 */
    }

    /* 안내 그리드 + 단계 컨테이너: 모바일 뷰 전환 */
    .info-item-box {
        grid-template-columns: 1fr;
        gap: 0.8rem !important; /* 아이템 간 마진 축소 */
    }

    .info-steps-container {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 모바일 세로 1열 배치 */
        gap: 0.4rem !important; /* 원래 1rem에서 절반 이하로 대폭 축소하여 타이트하게 배치 */
    }

    /* 모바일 화살표 회전 및 텍스트 맞춤 좌측 정렬 처리 (↓ 아래방향) */
    .info-step-arrow {
        display: flex !important;
        justify-content: flex-start !important; /* 좌측 정렬 */
        padding: 0.1rem 0 !important; /* 불필요한 패딩 제거로 좌측 맞춤 정렬 활성화 */
        margin-left: 0px !important; /* 꺾쇠 그래픽의 마진을 0으로 롤백 */
        font-size: 1.1rem;
        color: #808080 !important;
        width: auto !important; /* 모바일 가로 제한 해제 */
    }

    .info-step-arrow i {
        color: #808080 !important;
        position: static !important;
        transform: rotate(90deg) !important; /* chevron-right 아이콘을 90도 회전시켜 chevron-down(↓) 방향으로 꺾음 */
    }

    /* 모바일 화살표 색상 동기화 강제 고정 */
    .info-step-arrow, .info-step-arrow i {
        color: #808080 !important;
    }



    /* 모바일 폰트 스케일 다운사이징 (-1pt 감량 완료) */
    .info-sub-item strong {
        font-size: 1.0rem !important; /* 1.1rem (17.6px) ➔ 1.0rem (16px)로 -1pt 다운 */
    }
    
    .info-sub-item p {
        font-size: 0.84rem !important; /* 0.92rem (14.72px) ➔ 0.84rem (13.44px)로 -1pt 다운 */
    }
    
    .step-num {
        font-size: 1.0rem !important; /* 1.1rem (17.6px) ➔ 1.0rem (16px)로 -1pt 다운 */
    }
    
    .info-step-item p {
        font-size: 0.84rem !important; /* 0.92rem (14.72px) ➔ 0.84rem (13.44px)로 -1pt 다운 */
    }

    /* [반응형 활성화] 이미지 포맷 가이드 내부 단락 구분용 점선 세로 배치 시 활성화 */
    .help-section .info-sub-item {
        border-bottom: 1px dashed rgba(74, 74, 74, 0.3) !important;
        padding-bottom: 1.2rem !important;
        margin-bottom: 0.6rem !important;
    }
    .help-section .info-sub-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }


    
    .flow-label {
        font-size: 0.9rem !important;
    }
    
    .upload-text-group strong {
        font-size: 0.9rem !important;
    }
    
    .upload-text-group .upload-hint {
        font-size: 0.75rem !important;
    }
    
    .bridge-text {
        font-size: 0.8rem !important;
    }
    
    .accent-select-wrapper select {
        font-size: 0.82rem !important; /* 모바일용 가독성 확보 및 텍스트 박스 비율 조화 */
    }
    
    .setting-item label {
        font-size: 0.85rem !important; /* 모바일 라벨 폰트 축소 */
        white-space: normal !important; /* 좁은 모바일 화면에서 자동 줄바꿈으로 넘침 방지 */
        line-height: 1.4 !important;
    }
    
    .slider-val {
        font-size: 0.78rem !important; /* '100%' 텍스트 박스 크기 및 폰트 축소 */
        padding: 0.15rem 0.4rem !important; /* 내부 패딩을 줄여 슬라이더와 겹치거나 부모 밖으로 넘치지 않게 함 */
        flex-shrink: 0 !important;
    }
    
    .tab-btn {
        font-size: 0.82rem !important;
    }
    
    .custom-text-input {
        font-size: 0.9rem !important;
    }
    
    .custom-select-wrapper select {
        font-size: 0.82rem !important; /* 모바일용 가독성 확보 및 텍스트 박스 비율 조화 */
    }
    
    .btn {
        font-size: 0.9rem !important;
    }
 
    /* 모바일 대기열 버튼(일괄 비우기, 일괄 변환, 개별 변환, 개별 삭제) 세로 폭 및 규격 일괄 동일화 (28px) */
    .queue-actions .btn,
    .file-actions .btn {
        padding: 7px 10px !important; /* 상하 패딩 완벽 일치 */
        font-size: 11px !important; /* 11px 규격에 일치 */
        gap: 5px !important; /* 간격 통일 */
        line-height: 14px !important;
        height: auto !important; /* 절대 height값 고정 방지 */
        display: inline-flex; /* important 제거하여 display: none; 로직 활성화 보장 */
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .queue-actions .btn i,
    .file-actions .btn i {
        font-size: 11px !important; /* 아이콘 크기 동일 축소 */
        height: 14px !important;
        line-height: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
 
    /* [13차] 모바일에서 설정 패널(크기 규격 / 변환 이미지 품질) 세로 1열 강제 정렬 */
    .fine-tuning-bar {
        grid-template-columns: 1fr !important;
        gap: 1.8rem !important;
        border-top: 1px dashed rgba(74, 74, 74, 0.3) !important;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .resize-mode-tabs {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    .resize-mode-tabs .tab-btn {
        flex: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding: 0.45rem 0.5rem !important;
    }
    
    /* [15차] 픽셀 1줄 병렬배치 모바일에서도 줄바꿈 없이 유지 (콜럼 전환 오버라이드 제거) */
    .pixel-inputs {
        flex-direction: row !important; /* 데스크톱과 동일하게 가로 정렬 유지 */
        gap: 0.4rem !important;
        align-items: center !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    .px-inline-input {
        flex: 1 !important; /* 모바일에서도 남은 공간 꽉 채우도록 flex-1 설정 */
        width: 0 !important;
    }

    /* 모달 카드 모바일 최적화 */
    .modal-card {
        padding: 2rem 1.5rem;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-footer-dual {
        flex-direction: column;
        gap: 0.6rem;
    }

    .modal-footer-dual .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   🚨 [13차 추가] 뷰포트 높이가 낮을 때 세로 오버플로우 방지 미세 튜닝
   ========================================================================== */
@media (max-height: 680px) {
    .app-container {
        padding: 2rem 1.5rem !important;
        gap: 2rem !important;
    }
    
    .app-main {
        gap: 2rem !important;
    }
    
    .logo-area {
        margin-bottom: 0.8rem !important;
    }
    
    .logo-icon {
        width: 2.3rem !important;
        height: 2.3rem !important;
    }
    
    .logo-text {
        font-size: 1.8rem !important;
    }
    
    .app-tagline {
        gap: 0.5rem !important;
    }
    
    .header-divider {
        margin-top: 0.8rem !important;
    }
    
    .settings-section {
        padding: 2.2rem 1.8rem 2.5rem !important;
    }
    
    .flow-box.dropzone {
        min-height: 120px !important;
    }
    
    .fine-tuning-bar {
        padding-top: 1.2rem !important;
        margin-top: 1.2rem !important;
        gap: 1.5rem !important;
    }
}

/* ==========================================================================
   🔔 [15차 추가] 상단 안내 팝업창 (Top Toast Notification Panel)
   ========================================================================== */
.toast-notification {
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    background: #111827; /* 펜슬 쿨 다크 그레이 */
    color: #FFFFFF;
    padding: 1.1rem 2.0rem; /* 1.5배 규격 확대 적용 */
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: 15px; /* 내부 텍스트 15px 적용 */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    z-index: 10000;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap; /* 2줄 강제 줄바꿈 절대 방지 */
    width: max-content; /* 컨테이너 너비를 텍스트 폭에 자동 맞춤 */
    max-width: 94vw; /* 모바일 화면 양옆 안전 마진 확보 */
}
.toast-notification.show {
    top: 32px;
    opacity: 1;
}
.toast-icon {
    color: var(--rose-dust); /* 고풍스러운 장미붉은색 */
    font-size: 1.5rem; /* 아이콘 크기도 1.5배 비례 확대 */
}