@charset "UTF-8"; 
@import url('./root_semantic_layout.css');
@import url('./root_system_layout.css');
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}
/* font-size: 3.1vw의 기준 : 16px: 해상도 390px */
html,body{width: 100%; height: 100%; height: 100dvh; font-size: min(4.1vw, 32px); font-family: var(--font-family); font-weight: var(--font-medium); line-height: 1.35em; box-sizing: border-box; word-break: break-all; color: var(--text-primary); background-color: var(--bg-secondary); overflow-x: hidden;}
/* 임시로 최대 넓이값 : 780px */
.wrap{ position: relative; max-width: 780px; width: 100%; height: 100%; min-height: 100%; margin: 0 auto;  background-color: var(--bg-secondary);}
/* 개발 구조 고려 ↓ */
body > form,
.outer {height: 100%;}

/* common layout */
.com_guide{ padding: 0 var(--grid-primary);}
.com_guide_v{ padding: var(--grid-secondary) var(--grid-primary);}
.com_guide_h{padding: var(--grid-tertiary) 0 7.5em 0;}
/* .outer:has(.quick_nav) .com_guide_v{padding-bottom: 4.5em;} */
.outer:has(.quick_nav:not(.hidden)) .com_guide_v {padding-bottom: 4.5em;}


/* 페이지 헤더 값 뺀 나머지 높이 차지 */
.page_header:has( + .com_guide_v.min-h-full) + .com_guide_v{min-height: calc(100% - var(--page-header-height));}
.page_header{ position: sticky; top: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0 var(--space-lg); z-index: 100; height: var(--page-header-height); background-color: var(--bg-secondary);}
.page_header .back_btn,
.page_header .gnb_open_btn{padding: var(--space-lg); position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;}
.page_header .btn_base.back_btn{left: 0;}
.page_header .btn_base.gnb_open_btn{right: 0;}
.page_header .btn_base.icon_only span{font-size: var(--text-xl);}
.header_title{font-size: var(--text-xl); line-height: 1.2em;}

.step_bar_wrap{position: sticky; top: var(--page-header-height); width: 100%; height: 0.312em; background-color: var(--step-surface); overflow: hidden; z-index: 100;}
.now_step { --prev-width: 0%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 100%; display: inline-block; background-color: var(--step-active);}
.step-visible .now_step { animation: fillUp 0.8s ease-out forwards;}
@keyframes fillUp {
  from {
    width: var(--prev-width);
  }
}

/* htmltoCanvax라이브러리 사용시 글자쏠림 현상 해결 */
img { display: inline-block; vertical-align: middle }



/* GNB 메뉴 */
.gnb{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--bg-secondary); z-index: 1000; overflow-y: auto; display: none;  padding: 0 var(--space-lg); }
.gnb.active{display: block;}
.gnb_header{ width: 100%; height: var(--page-header-height); display: flex; align-items: center; justify-content: space-between;position: relative;}
.gnb_header .btn_base.icon_only{padding: 0;}
.gnb_header .home_btn span{color: var(--text-brand-strong);}
.gnb_header .gnb_close_btn span{color: var(--text-secondary);}
.gnb .login_status{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-xl) var(--space-md); background-color: var(--bg-brand-subtler); border-radius: var(--rounded-sm); gap: var(--space-xs);} 
.gnb .login_status .user_info{font-size: var(--text-lg); line-height: 1.33em; flex: 1;}
.gnb .login_status .user{ color: var(--text-brand-strong); font-weight: var(--font-semibold);}
.gnb_menu{ font-size: var(--text-lg); padding: var(--space-lg) 0;}
.gnb_menu > li{display: grid; grid-template-columns: repeat(2, 1fr); align-items: flex-start; border-bottom: 1px solid var(--border-secondary); padding: var(--space-sm) 0;}
.gnb_menu .menu_title{display: flex; align-items: center; gap: var(--space-2xs); line-height: 2em; font-weight: var(--font-semibold);}
.gnb_menu .menu_title img{display: flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; object-fit: contain;}
.gnb_menu > li > ul{ background-color: var(--bg-secondary);}
.gnb_menu .menu_item.active .sub_menu{display: block;}
.gnb_menu > li > ul a{line-height: 2em;}
.gnb_menu > li > ul a:hover{color: var(--text-brand);}

/* 하단 퀵메뉴*/
.quick_nav{position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 780px; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); background-color: var(--bg-secondary); padding: 0 var(--space-sm); z-index: 50; border-radius: var(--rounded-xl) var(--rounded-xl) 0 0; box-shadow: 0 4px 6px 6px rgba(0, 0, 0, 0.05); box-sizing: border-box;}
.quick_nav.hidden{display: none;}
.nav_item{display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--space-3xs); text-decoration: none;  transition: color 0.2s; padding: var(--space-sm) 0; color: var(--text-tertiary);}
.nav_item .material-symbols-outlined{font-size: var(--text-2xl); font-weight: var(--font-light);}
.nav_text{font-size: var(--text-2xs); line-height: 1em;}
.nav_item.active,
.nav_item.active .material-symbols-outlined{color: var(--text-brand-secondary);}
.nav_item.active svg{fill: var(--text-brand-secondary);}

/* 안내 박스, 텍스트 */
.com_info{color: var(--orange-900); font-size: var(--text-sm); line-height: 1.2em; margin-top: var(--space-xs);}
.com_info_gray_box{width: 100%; line-height: 1.4em; min-height: 7.5em; border-radius: var(--rounded-sm); padding: var(--space-md); background-color: var(--bg-default); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: var(--font-semibold);}
.com_info_gray_box.sm{min-height: 5em;}
.com_info_box{width: 100%; line-height: 1.4em; min-height: 6.25em; border-radius: var(--rounded-sm); padding: var(--space-md); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: var(--font-semibold);}
.com_info_box.sm{min-height: 5em;}
.com_info_gray_box:has(.info_items){border: 1px solid var(--border-secondary);}
.com_info_gray_box:has(.info_items) + .com_info_gray_box{margin-top: var(--space-xl);}
.info_items{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs);}
.info_items + .info_items{margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px dashed var(--border-primary);} 

.info_section { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md) 0; border-top: 2px dashed var(--border-secondary);}
.info_section .info_row { width: 100%;}
.info_row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs);}


/* ==================== */
/* Worker List 근로자, 거래처 목록*/
/* ==================== */
.worker_list_wrap { position: relative; display: flex; gap: var(--space-md); height: 100%; margin: var(--space-2xl) 0;}
.worker_list_scroll_area { flex: 1; overflow-y: auto; overflow-x: hidden; height: calc(100vh - 14.5em);}
.worker_list_scroll_area::-webkit-scrollbar{display: none;}
.worker_list_items { display: flex; align-items: flex-start; flex-direction: column; flex: 1; gap: var(--space-sm);}
.worker_list_items .chip_field{width: 100%;}
.worker_list_items span:has(+ .bank_contact_info){position: relative; }
.worker_list_items .bank_contact_info{position: relative; color: var(--text-secondary); display: flex; align-items: center;}
.worker_list_items span:has(+ .bank_contact_info)::after{content: "|"; margin: 0 var(--space-2xs); color: var(--text-secondary); }

/* 인덱스 스크롤 */
.index_scroll { position: sticky; top: var(--space-2xl); display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: var(--space-4xs); padding: var(--space-2xs); background-color: var(--surface-200); border-radius: var(--rounded-full); height: 100%; flex-shrink: 0;}
.index_item { line-height: 1em; display: flex; align-items: center; justify-content: center; width: 1.67em; aspect-ratio: 1/1; transition: all 0.2s; border-radius: var(--rounded-circle);}
.index_item.active { background-color: var(--bg-brand);}

/* 목록 없을 때 */
.worker_list_wrap:has(.worker_list_items.empty){justify-content: center;}
.worker_list_wrap:has(.worker_list_items.empty ) .index_scroll{display: none;}
.worker_list_items.empty{height: 52vh; justify-content: center; align-items: center; text-align: center; padding-right: 0;}

/* 팝업 안 */
.modal_wrap .worker_list_wrap{ height: 52vh; justify-content: space-between; overflow: hidden;}
.modal_wrap .worker_list_wrap::-webkit-scrollbar{display: none;}
.modal_wrap .worker_list_wrap > *:first-child { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;}
.modal_wrap .worker_list_wrap > *:first-child > * { flex: 1; height: 100%; display: flex; flex-direction: column; min-height: 0;}
.modal_wrap .worker_list_scroll_area{ flex: 1; min-height: 0; overflow-y: auto;}
.modal_wrap .index_scroll{top: 0; font-size: var(--text-sm); height: auto; align-self: stretch; gap: 0;}
.modal_wrap .index_scroll .index_item{ width: 1.35em; flex-shrink: 0;}

/* ==================== */
/* Transfer Detail (상세 공통)  */
/* ==================== */
.transfer_detail { display: flex; flex-direction: column; gap: var(--space-xl);}
.transfer_detail_item { display: flex; flex-direction: column; gap: var(--space-sm);}
.transfer_detail_item .detail_label { color: var(--text-secondary);}
.transfer_detail_item .detail_value { font-weight: var(--font-semibold); text-align: right; padding: 0 var(--space-xs) var(--space-xs); border-bottom: 0.15em solid var(--input-border); }

/* ==================== */
/* mypage               */
/* ==================== */
.mypage_title { font-size: var(--text-lg); line-height: 1.2em; color: var(--text-secondary); font-weight: var(--font-semibold); display: flex; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-md);}
.mypage_menu_list { background-color: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: var(--rounded-sm);}
.mypage_menu_list + .mypage_title{margin-top: var(--space-xl);}
.mypage_menu_item{ margin: 0 var(--space-sm);}
.mypage_menu_item a { display: flex; align-items: center; padding: var(--space-sm) 0;}
.mypage_menu_item + .mypage_menu_item{border-top: 2px dashed var(--border-secondary);}
.mypage_menu_item .btn_base.icon_only span{color: var(--text-secondary); font-weight: var(--font-medium) ;}