/* ================================================
   Mimetype Sprite - CSS 변수 방식으로 개선
   position = index * size 자동 계산
   ================================================ */

.file-type-icon {
    --icon-idx: 0;        /* 확장자 클래스에서 덮어씀 */
    --icon-size: 128px;   /* 사이즈 클래스에서 덮어씀 */
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: url('../images/mimetype.png');
    background-repeat: no-repeat;
    background-size: var(--icon-size) auto;
    /* ✅ 사이즈에 따라 position 자동 계산 */
    background-position: 0 calc(var(--icon-idx) * var(--icon-size) * -1);
    flex-shrink: 0;
}

/* 사이즈 변형 — --icon-size만 바꾸면 position도 자동 보정 */
.file-type-icon--sm { --icon-size: 32px;  width: 32px;  height: 32px;  }
.file-type-icon--md { --icon-size: 98px; }
.file-type-icon--lg { --icon-size: 128px; width: 128px; height: 128px; }

/* 확장자별 인덱스만 지정 */
.ext-file  { --icon-idx: 0;  }
.ext-hwp   { --icon-idx: 1;  }
.ext-doc   { --icon-idx: 2;  }
.ext-docx  { --icon-idx: 3;  }
.ext-ppt   { --icon-idx: 4;  }
.ext-pptx  { --icon-idx: 5;  }
.ext-xls   { --icon-idx: 6;  }
.ext-xlsx  { --icon-idx: 7;  }
.ext-pdf   { --icon-idx: 8;  }
.ext-csv   { --icon-idx: 9;  }
.ext-txt   { --icon-idx: 10; }
.ext-jpg   { --icon-idx: 11; }
.ext-jpeg  { --icon-idx: 12; }
.ext-bmp   { --icon-idx: 13; }
.ext-png   { --icon-idx: 14; }
.ext-gif   { --icon-idx: 15; }
.ext-ico   { --icon-idx: 16; }
.ext-psd   { --icon-idx: 17; }
.ext-ai    { --icon-idx: 18; }
.ext-eps   { --icon-idx: 19; }
.ext-mp3   { --icon-idx: 20; }
.ext-mp4   { --icon-idx: 21; }
.ext-wav   { --icon-idx: 22; }
.ext-mpeg  { --icon-idx: 23; }
.ext-mpg   { --icon-idx: 24; }
.ext-mov   { --icon-idx: 25; }
.ext-avi   { --icon-idx: 26; }
.ext-gz    { --icon-idx: 27; }
.ext-tar   { --icon-idx: 28; }
.ext-tgz   { --icon-idx: 29; }
.ext-zip   { --icon-idx: 30; }