/* ===== Responsive Breakpoints for Prototype ===== */
/* 통합 브레이크포인트: 360px, 480px, 520px, 821px, 980px, 1200px, 1440px */

/* ===== 359px 이하하 ===== */
@media (max-width: 359px) {
    .skill-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px; /* 매우 작은 화면에서는 gap을 최소화 */
    }

    .skill-item {
        padding: 5px; /* 패딩을 더 축소 */
        height: 46px;
        max-height: 46px;
    }

    .skill-category-label.required, .skill-category-label.optional {
        display: none;
    }

    /* Job Grid Adjustments */
    .job-select-section #jobGrid {
        --job-bar-h: 28px;
    }

    .job-select-section #jobGrid li span em {
        font-size: 11px;
    }
}

/* ===== 360px 이상, 479px 이하 ===== */
@media (min-width: 360px) and (max-width: 479px) {
    .skill-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px; /* 작은 화면에서는 gap을 더 줄임 */
    }

    .skill-item {
        padding: 6px; /* 패딩을 더 축소 */
        height: 48px;
        max-height: 48px;
    }

    .skill-category-label.required, .skill-category-label.optional {
        display: none;
    }

    .image-item {
        width: 45px;
        min-height: 30px;
        margin-right: calc(-30px + 1px); /* 29px 겹치기 */
    }

    .image-item canvas {
        width: 35px !important;
        height: 35px !important;
        /* 🎯 픽셀아트 화질 보존을 위한 렌더링 최적화 */
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
    }
}

/* ===== 480px 이상, 600px 이하 ===== */
@media (min-width: 480px) and (max-width: 600px) {
    .skill-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px; /* 중간 크기 화면에서는 gap을 더 줄임 */
    }

    .skill-item {
        padding: 7px; /* 패딩을 더 축소 */
        height: 50px;
        max-height: 50px;
    }

    /* .skill-category-label.required, .skill-category-label.optional {
        display: none;
    } */

    /* 좁은 화면에서 레이아웃 흐름 고려 - dropzone-note를 static으로 전환하되 중앙 정렬 유지 */
    .dropzone .dropzone-note {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        margin: 8px auto 0 auto;
        pointer-events: auto;
        text-align: center;
        max-width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
}

/* ===== 601px 이상, 1023px 이하 ===== */
@media (min-width: 601px) and (max-width: 1023px) {
    .skill-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px; /* 기본 gap보다 더 줄임 */
    }

    .skill-item {
        padding: 8px; /* 패딩을 기본값에서 더 축소 */
        height: 52px;
        max-height: 52px;
    }

    /* 리스트 전환 임계값(폴백): 뷰포트 너비가 1023px 이하일 때 가로 리스트로 전환 */
    .char_tab .job-tabs-list {
        display: flex;
        flex-direction: row;
        /* 리스트 아이템 사이의 간격을 뷰포트 너비에 따라 0px~8px로 조절 */
        gap: clamp(0px, 2vw, 8px);
        padding: 0;
        overflow-x: visible;
        overflow-y: visible;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .char_tab .job-tabs-list li {
        width: auto;
        flex: 0 1 auto;
    }

    .char_tab .job-tabs-list .job-tab {
        width: auto;
        flex: 1 1 120px;
        min-width: 88px;
    }

    .char_tab .job-tabs-list a.job-pill {
        width: auto;
        flex: 1 1 120px;
        min-width: 88px;
        max-width: 320px;
        height: auto;
        align-items: center;
        justify-content: flex-start;
        padding: 8px 12px;
        border-radius: 10px;
    }

    .char_tab .job-tabs-list a.job-pill img {
        left: -2px;
        top: clamp(43%, calc(55% - (100vw - 601px) * 13 / 422), 55%);
        opacity: 1;
        max-width: 50px;
        max-height: 50px;
        width: clamp(45px, 5vw, 60px);
        height: clamp(30px, 5vw, 40px);

        margin: 0 10px 0 0;
        pointer-events: auto;
        transition: opacity .2s ease, max-width .25s ease, max-height .25s ease;
        mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    .char_tab .job-tabs-list a.job-pill .label {
        text-align: right;
        right: clamp(-10px, 2vw, 0px);
        padding-right: 0;
        padding-left: 12px; /* 이미지와 겹치도록 여유 축소 */
        white-space: normal; /* 줄바꿈 허용 */
        overflow: visible;
        text-overflow: unset;
        z-index: 2; /* 이미지보다 위로 표시 */
        display: block;
    }
}

/* ===== 1024px 이상, 1279px 이하 ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .skill-grid {
        gap: 7px; /* 기본 gap보다 약간 줄임 */
    }

    .skill-item {
        height: 54px; /* 기본 높이보다 약간 줄임 */
        max-height: 54px;
    }
    .char_tab .job-tabs-list a.job-pill img {
        left: -10px;
        top: clamp(45%, calc(55% - (100vw - 1024px) * 8 / 255), 55%);
        opacity: 1;
        width: clamp(60px, 5vw, 80px);
        height: clamp(40px, 5vw, 60px);
        margin: 0 10px 0 0;
        pointer-events: auto;
        transition: opacity .2s ease, max-width .25s ease, max-height .25s ease;
        mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    /* 1023px 이하에서는 라벨이 이미지 위로 올라오도록 허용 (숨김/말줄임 금지) */
    .char_tab .job-tabs-list a.job-pill .label {
        text-align: right;
        right: clamp(0px, 2vw, 10px);
        padding-right: 0;
        padding-left: 12px; /* 이미지와 겹치도록 여유 축소 */
        white-space: normal; /* 줄바꿈 허용 */
        overflow: visible;
        text-overflow: unset;
        z-index: 2; /* 이미지보다 위로 표시 */
        display: block;
    }
    
    .job-select-section .char_info_list_item li span em {
        letter-spacing: -1.7px; /* 글자 간격을 약간 줄임 */
    }
}

/* ===== 1280px 이상 ===== */
@media (min-width: 1280px) {
    .job-select-section, .skill-selection-section {
        padding: 24px;
    }
    
    .skill-grid {
        gap: 8px; /* 큰 화면에서도 적당한 gap 유지 */
    }

    .skill-item {
        height: 56px; /* 큰 화면에서도 적당한 크기 유지 */
        max-height: 56px;
    }
    .char_tab .job-tabs-list a.job-pill img {
        left: -10px;
        top: 46%;
        opacity: 1;
        width: clamp(60px, 5vw, 80px);
        height: clamp(40px, 5vw, 60px);
        pointer-events: auto;
        transition: opacity .2s ease, max-width .25s ease, max-height .25s ease;
        mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    /* 1023px 이하에서는 라벨이 이미지 위로 올라오도록 허용 (숨김/말줄임 금지) */
    .char_tab .job-tabs-list a.job-pill .label {
        text-align: right;
        right: -2px;
        white-space: normal; /* 줄바꿈 허용 */
        overflow: visible;
        text-overflow: unset;
        z-index: 2; /* 이미지보다 위로 표시 */
        display: block;
    }
        
    .wf-frame {
        width: 100%;
    }

    .job-select-section .char_info_list_item li span em {
        letter-spacing: -1.5px; /* 글자 간격을 약간 줄임 */
    }
}

/* ===== 600px 이하 ===== */
@media (max-width: 600px) {
    /* 리스트 전환 임계값(폴백): 뷰포트 너비가 600px 이하일 때 가로 리스트로 전환 */
    .char_tab .job-tabs-list {
        width: auto;
        display: flex;
        flex-direction: row;
        gap: 0px;
        padding: 0;
        overflow-x: visible;
        overflow-y: visible;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .char_tab .job-tabs-list .job-tab {
        flex: 1 1 auto;
        min-width: 50px;
    }

    .char_tab .job-tabs-list a.job-pill {
        width: auto;
        min-width: 50px;
        max-width: 150px;
        height: auto;
        align-items: center;
        justify-content: center;
        padding: 4px 6px;
        border-radius: 0px;
    }

    .char_tab .job-tabs-list a.job-pill img {
        display: none;
    }

    /* 라벨이 이미지 위로 올라오도록 허용 (숨김/말줄임 금지) */
    .char_tab .job-tabs-list a.job-pill .label {
        width: auto;
        min-width: 50px;
        max-width: 50px;
        text-align: center;
        padding-right: 0;
        padding-left: 0; /* 이미지와 겹치도록 여유 축소 */
        white-space: normal; /* 줄바꿈 허용 */
        overflow: visible;
        text-overflow: unset;
        z-index: 2; /* 이미지보다 위로 표시 */
        display: block;
    }
    
    .failure-stats-card .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 820px 이하에서 job/skill 섹션을 세로로 쌓이게 함 (프로토타입 모바일 레이아웃 복원) ===== */
@media (max-width: 820px) {
    /* 패널/직업 섹션을 문서 흐름으로 세로 스택 배치 */
    .panel-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        min-height: auto; /* 데스크톱에서 강제한 최소 높이 해제 */
    }

    /* 순서: 업로드 패널(1) → 직업 섹션(2) → (기타 섹션들) → 결과 섹션(별도 컨테이너) */
    .panel.upload-share-capture { order: 1; }
    .job-select-section { order: 2; position: relative; left: auto; right: auto; top: auto; }
    .skill-selection-section { order: 3; position: relative; left: auto; right: auto; top: auto; }

    /* 직업/스킬 섹션은 모바일에서 전체폭 사용 */
    .job-select-section,
    .skill-selection-section {
        width: 100%;
        max-width: 100%;
        margin: 8px 0 16px 0;
    }

    .skill-grid {
        gap: 5px; /* 모바일에서는 gap을 더 줄임 */
    }

    .skill-item {
        padding: 7px; /* 모바일에서는 패딩을 더 축소 */
        height: 50px;
        max-height: 50px;
    }
    /* 702-703px 경계 문제 해결: 820px 이하에서 --col-w를 8vw 기반으로 설정 */
    .job-select-section .char_info_list_item {
        --col-w: clamp(80px, 8vw + 1rem, 110px); /* 702px: ~72px, 820px: 110px */
    }
    /* char_info_list_item 크기 - 동적 조절로 모든 카드 표시 */
    .job-select-section
    .char_info_list_item {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--col-w), var(--col-w)));
        --item-height: clamp(80px, 12vh + 2rem, 160px); /* 아이템 높이 동적 조절 */
        --col-w: clamp(80px, 8vw + 1rem, 135px); /* 너비 동적 조절 */
        gap: clamp(6px, 1vw, 10px); /* gap 동적 조절 */
        /* max-height 제한 제거: 모든 카드가 표시되도록 */
        margin: 0 auto;
        padding: 0;
        justify-content: center;
        list-style: none;
        --job-bar-h: 34px;
    }

    .panel.upload-share-capture .dropzone .upload-slot .upload-icon  {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .panel.upload-share-capture .dropzone .upload-slot .upload-icon #customDropIcon {
        height: 50%;
        width: 20%;
    }
    
    .job-btn,
    .skill-btn {
        display: none;
    }

    /* 직업 선택 섹션과 스킬 선택 섹션을 블록(세로) 흐름으로 배치 */
    .job-select-section,
    .skill-selection-section {
        position: relative;
        height: auto;
        left: auto;
        right: auto;
        margin: 0px;
        padding: 12px;
        box-sizing: border-box;
        z-index: 5;
        overflow: visible; /* 호버 시 컨테이너 밖으로 이동 허용 */
        background: var(--maple-panel-inner);
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .job-select-section
    .char_tab .job-tabs-list a.job-pill:hover {
        transform: translateY(-4px); /* 컨테이너 밖으로 이동 허용하여 더 위로 */
        box-shadow: 0 12px 20px rgba(2,6,23,0.15); /* 더 큰 그림자 효과 */
        z-index: 10; /* 다른 요소 위로 표시 */
    }

    /* job-select-section 내부 요소가 전체 폭을 사용하도록 조정 */
    .job-select-section #jobGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--col-w), 1fr));
        gap: 10px;
        width: 100%;
    }

    .job-select-section .char_info_list_item li span {
        height: 24px;        
    }

    .job-select-section .char_info_list_item li span em {
        letter-spacing: -1.6px; /* 글자 간격을 약간 줄임 */
    }
        
    /* preview-area가 너무 크지 않도록 제한 */
    .preview-area {
        max-height: 220px;
        overflow: auto;
    }
    
    #skillGridContainer {
        gap: 14px;
    }

    /* 스킬 툴바와 액션 버튼이 화면 내에 들어오도록 조정 */
    .skill-toolbar,
    .action-buttons {
        max-width: 100%;
    }

    .skill-toolbar .mode-toggle {
        width: 100%;
    }

    .skill-toolbar .optimization-mode-settings {
        width: 100%;
    }

    .skill-toolbar .three-stage-toggle {
        position: relative;
        display: inline-grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        max-width: 300px;
        height: 36px;
        background: #f3f4f6;
        overflow: visible;
        border-bottom: none;
        border-radius: 0 0 10px 10px;
    }

    .mode-toggle #modeDescription {
        display: none;
    }

    /* result-card 스크롤 제거하고 내용에 맞춰 길게 표시 */
    .skill-selection-section .result-card {
        height: auto; /* 100% 대신 auto로 내용물에 맞춤 */
        max-height: none; /* 최대 높이 제한 제거 */
        overflow-y: visible; /* 스크롤 제거 */
        border: 0;
        box-shadow: none;
    }

    /* skill-selection-section의 최대 높이도 늘려서 result-card가 길어질 수 있도록 함 */
    .skill-selection-section {
        max-height: none; /* 600px 제한 제거 */
        height: auto; /* 내용물에 맞춰 자동 조절 */
    }

    /* 업로드 패널이 절대 위치로 떠 있던 동작을 무력화하고 문서 흐름으로 복원 */
    .panel.upload-share-capture {
        position: relative; /* absolute -> relative로 복원 */
        top: auto;
        left: auto;
        right: auto;
        max-height: none;
        height: auto;
        transform: none; /* 슬라이드 변환 제거 */
        width: 100%;
        margin: 0;
        transition: none; /* 슬라이드 트랜지션 비활성화 */
    }

    /* 만약 slide-left 클래스가 적용되어 있어도 이동을 해제하여 원상복귀 시킴 */
    .panel.upload-share-capture.slide-left {
        transform: none;
        width: 100%;
        left: auto;
        right: auto;
    }

    /* 자동 직업 검사 토글 ON시 업로드 패널 확장 */
    .panel.upload-share-capture.expanded-upload-panel {
        height: 600px; /* 200px에서 600px로 확대 */
    }
    
    .mode-failure {
        border-radius: 16px;
    }
    
    .mode-failure-icon {
        font-size: 48px;
    }
    
    .mode-failure-title {
        font-size: 24px;
    }
    
    .mode-failure-message {
        font-size: 16px;
    }
    
    .mode-failure-suggestion {
        padding: 20px;
    }
    
    .mode-failure-button {
        padding: 12px 32px;
        font-size: 15px;
    }
}

/**
 * #optimizationResultsContainer 또는 .panel-result 안에 있는
 * .mode-failure .mode-failure-content 요소에 좌우 패딩을 3rem 적용합니다.
 * 즉, 데스크탑 환경에서 실패 모드 결과 카드의 좌우 여백을 넓혀줍니다.
 */
 @media (min-width: 1024px) {
    #optimizationResultsContainer .mode-failure .mode-failure-content,
    .panel-result .mode-failure .mode-failure-content {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ===== Mobile numeric tuning via class (applies when body.hasClass('is-mobile')) ===== */
/* This keeps existing sections intact while allowing fine-grained value tweaks under 820px */
.is-mobile {
    /* Common size variables */
    --preview-thumb-size: var(--preview-thumb-size-mobile);
    --job-card-w: 180px;
    --job-card-h: 210px;
    --job-bar-h: 34px;
    --job-top-crop: 18px;
}

.is-mobile .skill-grid { gap: 5px; }
.is-mobile .skill-item { padding: 7px; height: 50px; max-height: 50px; }
.is-mobile .image-item canvas { width: 44px !important; height: 44px !important; }