@import url('/main/css/reset.css');
@import url('/main/css/font.css');
@import url('/main/css/style_archive.css');
@import url('/main/css/style_official_doc.css');
@import url('/main/css/style_overview.css');



html { font-size: 1rem; }



@media screen and (max-width: 1920px) {
    html { font-size: 0.8333333vw; }
}

@media screen and (max-width: 1024px) {
    html { font-size: 1.3333333vw; }
    body > .footer .right { display: none !important; }
}



:root {
    --color-red: #F21D0D;
    --color-pink: #E8175E;
    --color-magenta: #B92ED1;
    --color-purple: #6D3DC2;
    --color-navy: #4255bd;
    --color-blue: #0D8DF2;
    --color-cyan: #03AEFC;
    --color-green: #4DB251;
    --color-yellow: #FFBF00;
    --color-orange: #FF9800;
    --color-dahong: #FF3D00;
    --color-brown: #A0705F;
    --color-iron: #7F7F7F;
    --color-steel: #688897;

    --color-red-light: #FEE9E7;
    --color-pink-light: #FDE8EF;
    --color-magenta-light: #F8EBFB;
    --color-purple-light: #F1ECF9;
    --color-navy-light: #EDEEF9;
    --color-blue-light: #E7F4FE;
    --color-cyan-light: #E6F7FF;
    --color-green-light: #EEF8EE;
    --color-yellow-light: #FFF9E6;
    --color-orange-light: #FFF5E6;
    --color-dahong-light: #FFECE6;
    --color-brown-light: #F6F1EF;
    --color-iron-light: #F3F3F3;
    --color-steel-light: #F0F4F5;

    --color-red-medium: #FAA59E;
    --color-pink-medium: #F6A2BF;
    --color-magenta-medium: #E3ABEC;
    --color-purple-medium: #C5B1E7;
    --color-navy-medium: #B3BBE5;
    --color-blue-medium: #9ED1FA;
    --color-cyan-medium: #9ADFFE;
    --color-green-medium: #B8E0B9;
    --color-yellow-medium: #FFE599;
    --color-orange-medium: #FFD699;
    --color-dahong-medium: #FFB199;
    --color-brown-medium: #D9C6BF;
    --color-iron-medium: #CCCCCC;
    --color-steel-medium: #C3CFD5;

    /* 프라이머리컬러스케일 */
    --primary-lv0: #E9EEED;
    --primary-lv1: #D2DCDB;
    --primary-lv2: #A5B9B6;
    --primary-lv3: #789792;
    --primary-lv4: #4B746D;
    --primary-lv5: #1E5149;
    --primary-lv6: #1B443D;
    --primary-lv7: #193833;
    --primary-lv8: #162A27;
    --primary-lv9: #141E1D;

    --header-scrollbar-thumb-color: #E9EEED00; --header-scrollbar-thumb-hover-color: var(--primary-lv0);
    --box-shadow: #0c0c0db3 0rem 0.5rem 1rem -0.25rem;
    --text-shadow-color-fff: #fff;
    --text-shadow-fff: -0.0625rem 0rem var(--text-shadow-color-fff), 0rem 0.0625rem var(--text-shadow-color-fff), 0.0625rem 0rem var(--text-shadow-color-fff), 0rem -0.0625rem var(--text-shadow-color-fff), -0.0625rem -0.0625rem var(--text-shadow-color-fff), 0.0625rem 0.0625rem var(--text-shadow-color-fff), 0.0625rem -0.0625rem var(--text-shadow-color-fff), -0.0625rem 0.0625rem var(--text-shadow-color-fff);
    --text-shadow-color-000: #000;
    --text-shadow-000: -0.0625rem 0rem var(--text-shadow-color-000), 0rem 0.0625rem var(--text-shadow-color-000), 0.0625rem 0rem var(--text-shadow-color-000), 0rem -0.0625rem var(--text-shadow-color-000), -0.0625rem -0.0625rem var(--text-shadow-color-000), 0.0625rem 0.0625rem var(--text-shadow-color-000), 0.0625rem -0.0625rem var(--text-shadow-color-000), -0.0625rem 0.0625rem var(--text-shadow-color-000);

    --log-highlight: none;

    /* --thumbnail-gap: 0.5rem; */
    --thumbnail-gap: 1.25rem;
    --thumbnail-size: 0 0 calc((100% - 4 * var(--thumbnail-gap)) / 5);
    --thumbnail-size-value: 5;
    /* --thumbnail-aspect-ratio: 1 / 1; */
    --thumbnail-aspect-ratio: 1.4141 / 1;
    --thumbnail-ratio: contain;

    --overlay-scale-transform: none;
    --expired-warn: expired-warn 1.5s ease-in-out infinite;
}

* { font-family: 'Pretendard Variable', 'Pretendard'; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }



.icon { width: 1rem; height: 1rem; }



/* 유저 마우스 커서 */
.cursor { position: absolute; width: 1.875rem; height: 1.875rem; pointer-events: none; z-index: 30; }
.cursor .wrap { display: flex; justify-content: center; align-items: center; position: absolute; width: max-content; height: 100%; top: 0.9375rem; left: 100%; }
.cursor .wrap .user-text { font-size: 0.875rem; font-weight: bold; color: #fff; padding: 0.25rem 0.4rem; border-radius: 0.25rem; }



/* 위치 이동 커버 */
.relocate-cover { display: none; height: 100%; position: absolute; z-index: 50; background: #000000cc; }

.relocate-cover.list-viewer-cover .container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5rem; width: 100%; height: 100%; }
.relocate-cover.list-viewer-cover .container * { color: #fff; font-size: 1rem; }
.relocate-cover.list-viewer-cover .container .notice-wrap .text { font-size: 1.25rem; font-weight: bold; }
.relocate-cover.list-viewer-cover .container .path-wrap { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.relocate-cover.list-viewer-cover .container .path-wrap .path { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.relocate-cover.list-viewer-cover .container .path-wrap .path .key { font-size: 1.25rem; font-weight: bold; }
.relocate-cover.list-viewer-cover .container .path-wrap .path .value { white-space: pre-wrap; }
.relocate-cover.list-viewer-cover .container .btn-wrap { display: flex; gap: 1rem; }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn { width: 9.375rem; padding: 0.5rem; border: 0.0625rem solid #555; border-radius: 0.25rem; cursor: pointer; text-align: center; font-weight: bold; }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.confirm-btn { background: linear-gradient(180deg, #1e5149 0%, #12312c 100%); }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.confirm-btn:hover { background: linear-gradient(0deg, #1e5149 0%, #12312c 100%); }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.cancel-btn { background: #fff; color: #000; }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.cancel-btn:hover { background: #000; color: #fff; }



/* 마르퀴 효과 */
.marquee-track-wrap { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; width: fit-content; height: inherit; animation: scroll-marquee var(--duration, 10s) linear infinite; will-change: transform; }

.marquee-track { display: flex; align-items: center; flex-shrink: 0; gap: 0.5rem; margin: 0; padding: 0 2rem; white-space: nowrap; }
.marquee-track img { max-width: none; height: 0.75rem; }
/* .marquee-track .pm { opacity: 0.6; }
.marquee-track .category { opacity: 0.6; } */
.marquee-track .project-name { color: #fff; font-weight: 600; }
.marquee-track .text { opacity: 0.6; color: #fff; font-family: "Aldrich"; padding-top: 0.125rem; }



/* 프로젝트 비활성화 표시 */
body > .project-inactive-sign { display: none; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; border: 0.3rem solid #f00; z-index: 999999; pointer-events: none; }
body > .project-inactive-sign .text { font-size: 5rem; font-weight: bold; color: #f003; }

/* 배너 공지 */
body > .banner-notice-area { display: none; justify-content: center; align-items: center; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; background: #000; position: relative; top: 0; z-index: 10; overflow: hidden; white-space: nowrap; }
/* body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); background-size: 5.5rem 5.5rem; animation: hazard-stripe-flow 2s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; } */
/* body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); animation: hazard-stripe-pulse 5s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; } */
body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); animation: hazard-stripe-pulse 3s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; }
body > .banner-notice-area .content { position: relative; z-index: 12; }
body > .banner-notice-area .content .text-wrap { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; }
body > .banner-notice-area .content .text-wrap .text { padding: 0.1rem 0.4rem; background: #000; border-radius: 0.25rem; font-size: 1.2rem; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: var(--text-shadow-000);  }



/* 헤더 */
body > .header { display: flex; justify-content: space-between; align-items: center; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; background: var(--primary-lv5); position: fixed; top: 0; z-index: 10; }

body > .header * { color: #FFF; }

body > .header > .left { display: flex; align-items: center; width: 16.25rem; height: inherit; padding: 0 1rem; }
body > .header > .left .title { display: flex; overflow: hidden; position: relative; width: 100%; height: inherit; white-space: nowrap; cursor: pointer; }

body > .header > .center { display: flex; justify-content: space-between; align-items: center; flex: 1; min-width: 0; height: inherit; border-left: 0.0625rem solid #4b746d; background: #1e5149; z-index: 20; }
body > .header > .center .wrap { display: flex; align-items: center; }
body > .header > .center .wrap .menu-tab { display: flex; align-items: center; height: 100%; padding-top: 0.25rem; position: relative; }
body > .header > .center .wrap .menu-tab .btn { display: flex; align-items: center; height: 100%; margin: 0 0.125rem; position: relative; }
body > .header > .center .wrap .menu-tab .btn:first-child { margin-left: 0; }
body > .header > .center .wrap .menu-tab .btn:last-child { margin-right: 0; }
body > .header > .center .wrap .menu-tab .btn:hover { cursor: pointer; }
body > .header > .center .wrap .menu-tab .btn:not(.selected):hover .wrap { background: #4b746d; }
body > .header > .center .wrap .menu-tab .btn .wrap { display: flex; align-items: center; gap: 0.25rem; position: relative; width: max-content; height: 100%; padding: 0.09375rem 0.25rem; pointer-events: none; border-radius: 0.25rem; }
body > .header > .center .wrap .menu-tab .btn .wrap .image { width: 1rem; height: 1rem; }
body > .header > .center .wrap .menu-tab .btn .wrap .name-text { flex: 1; min-width: 0; font-size: 0.875rem; color: #fff; white-space: pre-wrap; }
body > .header > .center .wrap .menu-tab .btn.selected .wrap { background: #e9eeed; }
body > .header > .center .wrap .menu-tab .btn.selected .wrap .name-text { color: #1e5149; }
body > .header > .center .wrap .menu-tab .overview-btn .wrap .image { background: url('/main/img/header/header-page-icon.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .folder-btn .wrap .image { background: url('/main/img/header/header-folder-icon.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .official-doc-btn .wrap .image { background: url('/main/img/header/header-official-doc.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .model-btn .wrap .image { background: url('/main/img/header/header-model.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .overview-btn,
body > .header > .center .wrap .menu-tab .official-doc-btn,
body > .header > .center .wrap .menu-tab .model-btn { display: none; }
body > .header > .center .wrap .menu-tab .overview-btn.disabled { cursor: none; pointer-events: none; }
body > .header > .center .wrap .menu-tab .overview-btn.disabled .wrap { background: #999; }
body > .header > .center .wrap .menu-tab .overview-btn.disabled .wrap .name-text { color: #ccc; }

body > .header > .center .left.wrap { align-items: flex-end; gap: 1rem; flex: 1; min-width: 0; height: inherit; padding-left: 1rem; border-right: 0.0625rem solid #4b746d; position: relative; }

body > .header > .center .left.wrap .menu-tab { overflow-x: scroll; overflow-y: hidden; }
body > .header > .center .left.wrap .menu-add { display: none; align-items: center; min-width: 1.25rem; max-width: 1.25rem; height: inherit; }
body > .header > .center .left.wrap .menu-add .add-btn { display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; background: #35635c; border: 0.0625rem solid #4b746d; border-radius: 0.25rem; }
body > .header > .center .left.wrap .menu-add .add-btn:hover { cursor: pointer; background: #3e8d80; }
body > .header > .center .left.wrap .menu-add .add-btn .image { width: 1rem; height: 1rem; background: url('/main/img/header/header-menu-add.svg') no-repeat center/contain; pointer-events: none; }

body > .header > .center .right.wrap { justify-content: flex-end; gap: 0.375rem; width: max-content; height: inherit; padding: 0 1rem; position: relative; }

body > .header > .center .right.wrap .menu-tab { padding-bottom: 0.25rem; }
body > .header > .center .right.wrap .menu-tab .official-doc-btn .ai-logo { width: 1.75rem; height: 1.25rem; background: url('/main/img/ai_logo.svg') no-repeat center/contain; }

body > .header > .right { display: flex; justify-content: space-between; align-items: center; width: max-content; height: inherit; border-left: 0.0625rem solid #4b746d;  }
body > .header > .right .connected-users { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; height: 100%; padding: 0 1rem; background: #18413A; }
body > .header > .right .connected-users .title { color: #789792; font-size: 0.75rem; pointer-events: none; }
body > .header > .right .connected-users .count { color: #ccc; font-size: 0.75rem; pointer-events: none; }
body > .header > .right .connected-users:hover { cursor: pointer; }
body > .header > .right .connected-users:hover .count { color: #fff; text-decoration: underline; }

/* 헤더 가로 스크롤바 */
.header-scrollbar::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; } 
.header-scrollbar::-webkit-scrollbar-track { background-color: transparent; } 
.header-scrollbar::-webkit-scrollbar-thumb { background-color: var(--header-scrollbar-thumb-color); border-radius: 1rem; background-clip: content-box; border: 0.0625rem solid transparent; }
.header-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--header-scrollbar-thumb-hover-color); cursor: pointer; }
.header-scrollbar::-webkit-scrollbar-corner { background: transparent; }

/* 헤더 스크롤 버튼 */
.scroll-btn { display: none; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; background: #35635c; border: 0.0625rem solid #4b746d; border-radius: 0.25rem; position: absolute; top: 50%; transform: translate(0, -50%); z-index: 11; }
.scroll-btn:hover { cursor: pointer; background: #3e8d80; }
.scroll-left { right: 2.75rem; }
.scroll-right { right: 1rem; }
.scroll-left .image { width: 1rem; height: 1rem; background: url('/main/img/archive/scroll_x_angle_left.svg') no-repeat center/contain; }
.scroll-right .image { width: 1rem; height: 1rem; background: url('/main/img/archive/scroll_x_angle_left.svg') no-repeat center/contain; transform: rotate(180deg); }



/* 메인 */
body > .main { display: none; width: 100%; height: calc(100dvh - 2.25rem - 2.25rem); position: absolute; top: 2.25rem; color: #111; }

/* 전체 스크롤바 */
.scrollbar::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; } 
.scrollbar::-webkit-scrollbar-track { background-color: transparent; } 
.scrollbar::-webkit-scrollbar-thumb { background-color: #999; border-radius: 1rem; background-clip: content-box; } 
.scrollbar::-webkit-scrollbar-thumb:hover { background-color: #666; cursor: pointer; }
.scrollbar::-webkit-scrollbar-corner { background: transparent; }



/* 푸터 */
body > .footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; padding: 0 1rem; background: #fff; border-top: 0.0625rem solid #ddd; position: fixed; bottom: 0; z-index: 10; }

body > .footer * { font-size: 0.75rem; }

body > .footer .left { display: flex; align-items: center; flex: 1; gap: 1rem; min-width: 0; height: 100%; }

body > .footer .left .footer-separator { height: 0.75rem; border-right: 0.0625rem solid #777; }

body > .footer .left .wrap { display: flex; align-items: center; height: 100%; }

/* body > .footer .left .wrap .title { font-weight: 600; color: #444; }
body > .footer .left .wrap .title:hover { cursor: pointer; text-decoration: underline; } */

body > .footer .left .wrap .title { font-weight: 600; color: #444; }
body > .footer .left .wrap .title:hover { cursor: pointer; text-decoration: underline; }

body > .footer .left .wrap.size-wrap { justify-content: center; gap: 0.5rem; }
body > .footer .left .wrap.size-wrap .size-text { display: flex; align-items: center; gap: 0.2rem; }
body > .footer .left .wrap.size-wrap .size-text div { color: #777; }
body > .footer .left .wrap.size-wrap .size-text .numerator.over { color: #f00; }
body > .footer .left .wrap.size-wrap .size-bar .base { width: 6.25rem; height: 0.25rem; background: #e4e4e4; border-radius: 0.25rem; }
body > .footer .left .wrap.size-wrap .size-bar .value { width: 0; height: 0.25rem; background: #777; border-radius: 0.25rem; }
body > .footer .left .wrap.size-wrap .size-bar .value.over { background: #f00; }
body > .footer .left .wrap.size-wrap .size-percent { color: #777; text-shadow: var(--text-shadow-fff); }
body > .footer .left .wrap.size-wrap .size-percent.over { color: #f00; }

body > .footer .left .wrap.log-wrap { gap: 0.5rem; flex: 1; min-width: 0; }
body > .footer .left .wrap.log-wrap .latest-log { display: flex; align-items: center; flex: 1; min-width: 0; }
body > .footer .left .wrap.log-wrap .latest-log .log-item { display: flex; align-items: center; width: 100%; gap: 0.375rem; animation: var(--log-highlight); }
body > .footer .left .wrap.log-wrap .latest-log .log-item > div { display: flex; }
body > .footer .left .wrap.log-wrap .latest-log .log-item .text { color: #777; }
body > .footer .left .wrap.log-wrap .latest-log .log-item > .log-separator { height: 0.75rem; border-right: 0.0625rem solid #ccc; }
body > .footer .left .wrap.log-wrap .latest-log .log-item .log { flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
body > .footer .left .wrap.log-wrap .latest-log .log-item .log .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

body > .footer .right { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: max-content; }
body > .footer .right p { color: #777; }



/* 초기 프로그레스 */
/* 원래는 none인데 flex로 변경?? */
.init-progress { z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0rem; left: 0rem; width: 100%; height: 100%; background: #eeeeee99; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); overflow: hidden; }
.init-progress .text { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.init-progress .text span { color: #111; font-size: 1rem; font-weight: 500; }
.init-progress .text img { width: 1.5rem; height: 1.5rem; }

/* 파일 프로그래스(임시) */
.file-progress { z-index: 99999; display: none; position: absolute; top: 0rem; left: 0rem; width: 100%; height: 100%; animation: progress-background 3s infinite; overflow: hidden; } 
.file-progress .file-progress-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; width: 100%; height: 100%; }
.file-progress .file-progress-wrap .title { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.file-progress .file-progress-wrap .title .title-wrap { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.file-progress .file-progress-wrap .title .title-wrap span { color: #111; font-size: 1rem; font-weight: 500; }
.file-progress .file-progress-wrap .title .title-wrap img { width: 1rem; height: 1rem; }
.file-progress .file-progress-wrap .title .warn { display: none; }
.file-progress .file-progress-wrap .title .warn span { color: #777; font-size: 0.875rem; font-weight: 300; }
.file-progress .file-progress-wrap .text { display: flex; flex-direction: column; align-items: center; }
.file-progress .file-progress-wrap .text span { color: #111; font-size: 1rem; font-weight: 300; }
.file-progress .file-progress-wrap .size-progress { display: flex; flex-direction: column; align-items: center; }
.file-progress .file-progress-wrap .size-progress .size { display: flex; align-items: flex-start; gap: 1rem; }
.file-progress .file-progress-wrap .size-progress .percentage { display: flex; align-items: center; }
.file-progress .file-progress-wrap .size-progress > div > span { color: #111; font-size: 0.875rem; font-weight: 300; } 



.permission-min-dev { display: none; }
.permission-min-sub-master { display: none; }
.permission-min-security-worker { display: none; }
.permission-min-worker { display: none; }



/* 다운로드 폴더 스타일 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
body>.header>.center .wrap .menu-tab .download-btn .wrap .image { background: url('/main/img/header/icon__download-folder--primary-lv-3.svg') no-repeat center/contain; } 
body>.header>.center .wrap .menu-tab .download-btn .wrap .download-reddot { background: url('/main/img/header/icon__download-reddot--color-dahong.svg') no-repeat center/contain; width: 0.375rem; height: 0.375rem; position: absolute; top: 0; right: -0.125rem; } 

/* // 다운로드 폴더 스타일 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
/* */
/* */
/* */
/* 모달-다운로드창 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
.download-modal { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 61; width: 100%; height: 100%; background: #00000099; } 
.download-modal-wrap { display: flex; flex-direction: column; position: relative; background: #fff; border: 0.0625rem solid #aaa; margin: auto; border-radius: 0.25rem; width: 30rem; height: 40rem; box-shadow: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.16); } 
.download-modal__head { display: flex; align-items: center; padding: 0.5rem 0.5rem 0.5rem 1rem; gap: 1rem; border-bottom: 0.0625rem solid #ddd; } 
.download-modal__head_subtitle { flex-grow: 1; } 
.download-modal__head_close:hover { cursor: pointer; } 
.download-modal__body { flex-grow: 1; height: 0; display: flex; flex-direction: column; } 
.download-modal__body_top { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid #ddd; } 
.download-modal__body_top_name { flex-grow: 1; } 
.download-modal__body_top_time { width: 5.625rem; } 
.download-modal__body_top_status { width: 2rem; text-align: right; } 
.download-modal__body_list { display: flex; flex-direction: column; overflow-y: scroll; overflow-x: hidden; padding-right: 0.5rem; padding-left: 1rem; height: 0; flex-grow: 1; } 
.download-modal__body_list_item { padding: 0.5rem 0; display: flex; align-items: flex-start; gap: 0.5rem; border-bottom: 0.0625rem solid #ddd; } 
.download-modal__body_list_item_text { flex-grow: 1; width: 17.5rem; word-break: break-all; } 
.download-modal__body_list_item_time { width: 5.625rem; color: #FF3D00; } 
.download-modal__body_list_item_status { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; width: 2rem; display: flex; justify-content: flex-end; } 
.download-modal__foot { display: flex; align-items: center; justify-content: center; padding: 1rem; border-top: 0.0625rem solid #ddd; } 

.download-modal__head_title { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; } 
.download-modal__head_subtitle { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; } 
.download-modal__body_top_name { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; } 
.download-modal__body_top_time { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; } 
.download-modal__body_top_status { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; } 
.download-modal__body_list_item_text_title { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; } 
.download-modal__body_list_item_text_subtitle { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; } 
.download-modal__body_list_item_time { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; }

/* // 모달-다운로드창 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
/* */
/* */
/* */
/* --재사용 컴포넌트 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
.--text__color-dahong { font-weight: 500; color: #FF3D00; } 
.--button__xsmall-icon { display: flex; align-items: center; justify-content: center; padding: 0.125rem; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; pointer-events: auto;} 
.--button__xsmall-icon:hover { cursor: pointer; } 
.--button__medium { display: flex; align-items: center; justify-content: center; padding: 0.5rem; width: 10rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; pointer-events: auto;} 
.--button__medium:hover { cursor: pointer; } 
.--disable { opacity: 20%; } 
.--disable:hover { cursor: not-allowed; pointer-events: auto;} 
.--icon { width: 1rem; height: 1rem; pointer-events: auto;} 

/* // --재사용 컴포넌트 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */


@keyframes scroll-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(var(--translateX)); }
}

@keyframes rotate-image {
    100% { transform: rotate(-360deg); }
}

@keyframes vibration {
    from { transform: translateX(-0.0625rem); }
    to { transform: translateX(0.0625rem); }
}

@keyframes progress-background { 
    0% { background-color: #fff; }
    50% { background-color: #d2dcdb; }
    100% { background-color: #fff; } 
}

@keyframes log-highlight {
    0% { opacity: 1; }
    100% { opacity: 0.1; }
}

@keyframes hazard-stripe-flow {
    0% { background-position: 0 0; }
    100% { background-position: -5.5rem 0; }
}

@keyframes hazard-stripe-pulse {
    0%, 100% { opacity: 0; }
    30%, 70% { opacity: 1; }
}

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

@keyframes expired-warn {
    0% { background: #f9613b; }
    50% { background: #e9eeed; }
    100% { background: #f9613b; }
}