.customer_order_list {
    margin: 20px 0 0 3%;
    padding: 0;
    list-style: none;
    
    /* 핵심: Flex 컨테이너로 설정 */
    display: flex;
    align-items: center;     /* 세로 중앙 정렬 */
}

.customer_order_list li {
    display: flex;
    align-items: center;
}

/* 텍스트(접수안내) 스타일 */
.customer_order_list li.active {
    font-weight: 700;
    color: #1c68ec;
	font-size:15px;
	padding:0 10px;
}

/* 선(line) 스타일 */
.customer_order_list li.line {
    width: 15px;
    height: 1px;
    background: #dcdcdc;
    margin: 0; /* 선 좌우 여백 확보 */
}

/* 숫자 원(span) 스타일 */
.customer_order_list li span {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f1f1;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    font-size: 14px;
    color: #666;
}

.customer_bigo_box{
	float:left;
	width:94%;
	margin:30px 0 0 3%;
	padding:20px 0;
	background:rgba(255, 255, 255, .7);
	border:1px solid #dcdcdc;
	box-shadow:3px 3px 10px #1c68e1a;
	border-radius:3px;
	text-align:center;
	font-size:18px;
	color:#808080;
}

.customer_bigo_box span{
	display:inline-block;
	margin-bottom:10px;
	font-size:20px;
	font-size:22px;
	color:#1c68ec;
	font-weight:700;
}

.customer_infomation_box{
	float:left;
	width:calc(94% - 30px);
	height:calc(100vh - 430px);
	overflow-y:auto;
	padding:20px 15px;
	margin:20px 0 0 3%;
	background:rgba(255, 255, 255, .7);
	border:1px solid #dcdcdc;
	box-shadow:3px 3px 10px #1c68e1a;
	border-radius:4px;
	font-size:18px;
	/* 스크롤바 숨기기 (Chrome, Safari, Edge) */
    &::-webkit-scrollbar {
        display: none;
    }
    
    /* 스크롤바 숨기기 (Firefox) */
    scrollbar-width: none;
    
    /* 스크롤 부드럽게 만들기 (선택 사항) */
    -webkit-overflow-scrolling: touch;
	
	cursor: grab; /* 마우스 커서 모양 변경 */
}

.customer_infomation_box:active {
    cursor: grabbing; /* 클릭 중일 때 커서 모양 */
}

.customer_infomation_list{
	float:left;
	width:100%;
}

.customer_infomation_list li{
	float:left;
	width:100%;
	margin-top:30px;
}

.customer_infomation_list li:first-child{
	margin-top:0;
}

.customer_infomation_list li dl, .customer_infomation_list li dl dt, .customer_infomation_list li dl dd{
	float:left;
	width:100%;
}

.customer_infomation_list li dl dt{
	margin-bottom:10px;
}

.customer_infomation_list li dl dd{
	line-height:28px;
	font-size:16px;
}

.customer_btn_area{
	float:left;
	width:94%;
	margin:20px 0 0 3%;
}

.customer_btn_area button{
	width:100%;
	height:60px;
	background:#1c68ec;
	color:#fff;
	font-size:18px;
	font-weight:700;
	border-radius:10px;
}

.customer_content_box {
    float: left;
    width: calc(94% - 30px);
    height: calc(100vh - 280px); /* 높이가 고정되어 있으므로 overflow 설정이 필수입니다 */
    margin: 20px 0 0 3%;
    padding: 20px 15px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;

    /* 핵심: 스크롤 활성화 */
    overflow-y: auto; 
    overflow-x: hidden; /* 가로 스크롤은 방지 */

    /* 스크롤바 숨기기 (Chrome, Safari, Edge) */
    &::-webkit-scrollbar {
        display: none;
    }

    /* 스크롤바 숨기기 (Firefox / IE, Edge 옛날 버전) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    /* 모바일 터치 스크롤 최적화 */
    -webkit-overflow-scrolling: touch;

    cursor: grab;
}

.customer_content_box:active {
    cursor: grabbing;
}


.customer_form_list{
	float:left;
	width:100%;
}

.customer_form_list li{
	float:left;
	width:100%;
	margin-top:10px;
	font-size:16px;
    display: flex;
    align-items: center;
}

.customer_form_list2 li{
	margin-top:5px;
}

.customer_form_list li:first-child{
	margin-top:0;
}

.customer_form_list li dl, .customer_form_list li dl dt, .customer_form_list li dl dd{
	float:left;
	width:100%;
}

.customer_form_list li dl dt{
	margin-bottom:5px;
	font-size:18px;
}

.customer_form_list li dl dd input{
	width:calc(100% - 2px);
	height:40px;
	border:1px solid #dcdcdc;
	border-radius:4px;
	text-indent:10px;
	font-size:16px;
}

.customer_form_list li dl dd select{
	width:100%;
	height:42px;
	border-radius:4px;
}

.customer_form_list li dl dd input::placeholder{
	color:#989898;
}

/* 오른쪽에 버튼이 붙는 입력칸 — 버튼 폭(110px) + 여백만큼 뺀다.
   auth_code 가 빠져 있어서 인증번호 칸이 100% 를 차지하고
   [확인] 버튼이 다음 줄로 밀려 있었다. */
.customer_form_list li dl dd input.cus_hu,
.customer_form_list li dl dd input.auth_code{
	width:calc(100% - 122px);
}

.customer_form_list li dl dd button{
	display:inline-block;
	float:right;
	width:110px;
	height:40px;
	background:#1C68EC;
	font-size:16px;
	color:#fff;
	border-radius:8px;
	border:0;
}

.customer_content_title{
	float:left;
	width:100%;
	font-size:18px;
}

.customer_content_title span{
	font-size:20px;
	color:#1C68EC;
}

.customer_request_type{
	float:left;
	width:100%;
	font-size:16px;
}

.request_option{
	display:none;
	float:left;
	width:100%;
}

.request_option11{
	display:block;
}

.request_option_title{
	float:left;
	width:100%;
	font-size:18px;
}

.request_option_title span{
	font-size:16px;
}

.request_option_paper{
	float:left;
	width:100%;
	margin-top:10px;
}

.request_option_paper dt, .request_option_paper dd{
	float:left;
	width:100%;
	font-size:16px;
	margin-bottom:5px;
}

.request_option_paper dd{
	width:calc(100% - 20px);
	padding-left:20px;
	margin-bottom:10px;
}


.customer_papers_list{
	float:left;
	width:100%;
}

.customer_papers_list li{
	float:left;
	width:100%;
	margin-bottom:20px;
}

.customer_papers_list li dl, .customer_papers_list li dl dt, .customer_papers_list li dl dd{
	float:left;
	width:100%;
}

.customer_papers_list li dl dt{
    display:flex;
    align-items: center;
	justify-content: space-between; /* 중요: 왼쪽 텍스트와 오른쪽 버튼 사이를 최대한 벌림 */
}

.customer_papers_list li dl dt button{
	display:inline-block;
	float:right;
	width:100px;
	height:50px;
	background:#808080;
	border-radius:8px;
	color:#fff;
}
					  
.customer_papers_list li dl dd{
	font-size:16px;
	color:#808080;
}

.customer_papers_list li dl dd.papers_list_area {
	float:left;
    width: calc(100% - 12px);
	margin-top:5px;
    border: 1px solid #eee; /* 영역 표시 */
    padding: 5px;
    background: #f9f9f9;
}

.papers_list { 
	display: flex; 
    gap: 10px; 
    padding: 10px 0; 
    list-style: none;
    
    /* 핵심: 가로 스크롤 설정 */
    flex-wrap: nowrap;      /* 항목이 많아도 줄바꿈 하지 않음 */
    overflow-x: auto;       /* 영역을 벗어나면 가로 스크롤 표시 */
    
    /* 스크롤 영역 높이 설정 (항목 크기보다 약간 여유 있게) */
    min-height: 100px;
}

/* 스크롤바 디자인 (선택 사항) */
.papers_list::-webkit-scrollbar { height: 8px; }
.papers_list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.preview-item, .preview-item2 { 
	position: relative; 
    flex: 0 0 80px; /* 고정 너비 80px */
    height: 80px; 
    border: 1px solid #ddd; 
    padding: 2px;
}
.preview-item img, .preview-item2 img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.remove-btn, .remove-btn2 { 
    position: absolute; top: -5px; right: -5px; 
    background: #808080; color: white; border: none; 
    border-radius: 50%; cursor: pointer; width: 20px; height: 20px; font-size: 12px;
}


/* Lightbox 라이브러리 고유 동작을 억제 */
.lb-outerContainer, 
.lb-dataContainer {
	position: relative !important;
    z-index: 1000 !important;
    width: 80% !important;
}

.lb-image {
    max-width: 600px !important;
    width: 100% !important; /* 부모 크기에 맞춤 */
    height: auto !important;
}

/* 3. 라이트박스 전체 위치 중앙 정렬 (필요 시) */
.lb-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.lb-close {
    background-image: none !important;
    text-indent: 0 !important;
    
    /* 크기 및 모양 설정 */
    width: 30px !important;    /* 너비를 넓게 잡아야 타원형이 됩니다 */
    height: 30px !important;   /* 높이는 좁게 */
    border-radius: 20px !important; /* 타원형 라운드 처리 */
    
    /* 위치 조정 */
    top: 15px !important;
    right: 15px !important;
    
    /* 스타일 */
    background: #e0e0e0 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
}

/* 'X' 기호 추가 */
.lb-close::after {
    content: "✕"; /* 텍스트와 함께 표시하거나 "✕"만 남길 수 있습니다 */
    font-family: sans-serif;
}


/* 이전/다음 버튼 강제 표시 */
.lb-nav a {
	position:absolute;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
	top: 50% !important;
	transform: translateY(-50%) !important; /* 자신의 높이만큼 위로 올려 정확한 중앙 배치 */
    z-index: 9998 !important;
}

/* 이전 버튼 위치 및 기본 설정 */
.lb-nav a.lb-prev, 
.lb-nav a.lb-next {
    background-image: none !important; /* 기본 화살표 이미지 제거 */
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.3) !important; /* 버튼 배경 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 20px;
	
    margin-top: -20px; /* 버튼 높이의 절반만큼 위로 */
}

/* 이전 버튼을 왼쪽으로 */
.lb-nav a.lb-prev {
    left: -20px !important;
}

/* 다음 버튼을 오른쪽으로 */
.lb-nav a.lb-next {
    right: -20px !important;
}

/* 마우스 올렸을 때 효과 */
.lb-nav a:hover {
    background: rgba(0, 0, 0, 0.6) !important;
}


/* 이전 버튼 텍스트/기호 */
.lb-nav a.lb-prev::before {
    content: "❮";
}

/* 다음 버튼 텍스트/기호 */
.lb-nav a.lb-next::before {
    content: "❯";
}

/* 이미지 아래 페이지 번호 (2 / 3) 스타일 */
.lb-data .lb-number {
    display: block !important;
    text-align: center;
    font-size: 20px;
    color: #333;
    padding-top: 15px;
    font-weight: bold;
}

/* 라이트박스 이미지 레이아웃 조정 */
.lb-dataContainer {
    margin: 0 auto;
    padding-top: 20px;
}







.customer_last_detail_list{
	float:left;
	width:100%;
}

.customer_last_detail_list > li{
	float:left;
	width:100%;
	margin-bottom:30px;
}

.customer_last_detail_title{
	float:left;
	width:100%;
	font-size:18px;
}

.customer_detail_list{
	float:left;
	width:100%;
	font-size:15px;
}

.customer_detail_list li{
	float:left;
	width:100%;
	margin-top:10px;
}

.customer_detail_list li dl{
	float:left;
	width:100%;
}

.customer_detail_list li dl dt, .customer_detail_list li dl dd{
	float:left;
}

.customer_detail_list li dl dt{
	width:150px;
}

.customer_detail_list li dl dd{
	width:calc(100% - 150px);
	text-align:right;
}


.customer_agree_list{
	float:left;
	width:100%;
}

.customer_agree_list li{
	float:left;
	width:100%;
	margin-top:15px;
	font-size:18px;
}

.customer_agree_list li dl{
	float:left;
	width:100%;
}

.customer_agree_list li dl dt{
	float:left;
	width:35px;
}

.customer_agree_list li dl dd{
	float:left;
	width:calc(100% - 35px);
}

.customer_agree_list li dl dd .small_gray_text{
	font-size:15px;
	color:#808080;
}

.signature_area{
	float:left;
	width:100%;
}

/* 서명 영역 반응형 스타일 */
.signature_wrapper {
	float:left;
	width: 100%;
	max-width: 700px; /* 최대 너비 제한 */
	margin-top: 10px;
}
.signature_container {
	width: 100%;
	height: 200px;
	border: 2px solid #e1e1e1;
	background: #fff;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
	touch-action: none; /* 브라우저 스크롤 방해 금지 */
}
#signature-pad {
	display: block;
	width: 100%;
	height: 100%;
}
.clear_btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #f44336;
	color: #fff;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	z-index: 10;
	opacity: 0.8;
}
.clear_btn:hover { opacity: 1; }


.customer_end_area{
	float:left;
	width:100%;
	margin-top:100px;
	text-align:center;
	font-size:20px;
	line-height:32px;
	font-weight:500;
}

.customer_end_area img{
	display:inline-block;
	margin-bottom:20px;
	width:100px;
}

/* ==================================================================
   모바일 레이아웃 (2026-09-18)
   - 하단 버튼을 화면 맨 아래에 고정
   - 내용 상자는 [진행단계 + 상자 여백 + 하단 버튼] 을 뺀 나머지 높이를 모두 사용
     (dvh: 카카오톡 인앱/모바일 주소창 높이 변화를 반영, 미지원 브라우저는 vh)
   ================================================================== */
#container{padding-bottom:calc(96px + env(safe-area-inset-bottom));}

.customer_infomation_box,
.customer_content_box{
	height:calc(100vh - 200px);
	height:calc(100dvh - 200px);
	margin-top:14px;
}

.customer_btn_area{
	position:fixed;
	left:0;
	bottom:0;
	z-index:50;
	width:100%;
	margin:0;
	padding:12px 3% calc(12px + env(safe-area-inset-bottom));
	box-sizing:border-box;
	background:#f8f9fb;
	box-shadow:0 -4px 12px rgba(0,0,0,.06);
}