/* ========================================================== */
/* 사이드 메뉴 (Side Menu) 스타일 - sub-nav-wrapper에 적용 */
/* ========================================================== */
.sub-nav-wrapper {
    flex-shrink: 0;
    width: 180px;
}

.sub-nav-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 30px;
    border: 1px solid #e1e1e1;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
}

.sub-nav-item:last-child {
    border-bottom: none;
}

.sub-nav-item a {
    display: block;
    padding: 15px 0 0 0;
    text-decoration: none;
    color: #555;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s;
    text-align: left;
    margin: 0 auto;
}

.sub-nav-item.faq a {
    font-size: 21px !important;
    color: #333;
    font-weight: bold !important;
    padding-bottom: 30px;
}

.sub-nav-item.faq:hover a {
    color: #00c7b3 !important;
}

.side-menu-wrap {
    width: 100px;
    margin: 0 auto;
    flex: 1;
    padding: 30px 0;
}

.nav-title {
    text-align: left;
    font-size: 21px;
    color: #333;
    font-weight: bold;
}

.sub-nav-item.active a {
    color: #00c7b3;
}

.sub-nav-item:not(.active):hover a {
    color: #00c7b3;
}

.tab-menu {
    display: none;
}

/* 서비스 소개 섹션 */
.service-intro-section {
  text-align: left;
  padding: 0 0 50px 0;
}

.intro-main-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.4;
  margin-bottom: 15px;
}

.highlight-text {
  color: #00C6AC;
}

.intro-subtitle {
  font-size: 1.8rem;
  color: #9C9C9C;
  line-height: 1.6;
  font-weight: 500;
}

/* 새로 추가된 사용법 섹션 */
.how-to-use-section {
    padding: 0 0 50px 0;
}

.step-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.step-card {
    flex: 1;
    text-align: center;
    /* flexbox 속성 추가 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.step-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 10px;
}

.step-subtitle {
    font-size: 1.9rem;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 20px;
}

.step-description {
    font-size: 1.4rem;
    color: #6c757d;
    line-height: 1.9;
    /* min-height 제거 */
    /* margin-bottom도 제거 */
    margin-bottom: 20px;
    /* flex-grow 속성 추가 */
    flex-grow: 1;
}

.btn-step {
    width: 200px;
    display: inline-flex;
    margin: 20px auto;
    justify-content: center;
    padding: 15px 10px;
    background-color: #00C6AC;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-step:hover {
    background-color: #00A490;
}

.btn-step .fas {
    margin-right: 8px;
    margin-top: 3px;
}

.orange-text {
    color: #FF7F00;
    font-weight: bold;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .step-container {
        flex-direction: column;
        gap: 40px;
    }
}

/* 메인 콘텐츠 */
.main-content-section {
    flex-grow: 1;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
}

/* 하이라이트 카드 (Flexbox) */
.service-highlight-section {
    display: flex;
    justify-content: center; /* 카드들을 가로 중앙에 정렬 */
    gap: 20px;
    margin-bottom: 50px;
    text-align: center;
}

@media (max-width: 768px) {
    .service-highlight-section {
        flex-direction: column;
    }
}

.highlight-card {
    flex: 1;
    height: 195px;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* 이 부분이 추가/수정되었습니다. */
    display: flex; /* 내부 요소를 정렬하기 위해 Flexbox 컨테이너로 설정 */
    flex-direction: column; /* 아이콘과 텍스트를 세로로 쌓음 */
    justify-content: center; /* 세로 방향으로 중앙 정렬 */
    align-items: center;     /* 가로 방향으로 중앙 정렬 */
}

.highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.highlight-icon {
    font-size: 3rem;
    color: #00C6AC;
    margin-bottom: 15px;
}

.card-title {
    font-size: 2rem;
    font-weight: bold;
    color: #343a40;
    margin: 0 0 10px;
}

.card-description {
    font-size: 1.4rem;
    color: #555555;
}
/* 연락처 섹션 */
.contact-info-section {
    margin-bottom: 50px;
}

.contact-card {
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.contact-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #343a40;
/*    margin: 0 0 20px;*/
}

.contact-details {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-item .fas {
    font-size: 1.5rem;
    color: #00C6AC; /* 색상 변경 */
    margin-bottom: 8px;
}

.contact-label {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.contact-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #212529;
    text-decoration: none;
}

/* 회원가입 버튼 */
.action-section {
    text-align: center;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    background-color: #00C6AC; /* 색상 변경 */
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    background-color: #00A490; /* hover 색상 변경 */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn-primary .btn-icon {
    margin-right: 12px;
}

/* 유의사항 공통 레이아웃 */
.sub-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.sub-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.page-main-title {
    font-size: 30px;
    font-weight: bold;
    margin-left: 25px;
}

.breadcrumb-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px; /* 서브: 15px */
    color: #adb5bd;
}

.breadcrumb-list li i {
    font-size: 15px; /* 서브: 15px */
    margin: 0 8px;
}

.breadcrumb-list a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-list a:hover {
    color: #495057;
}

.breadcrumb-list .current {
    font-weight: 500;
    color: #495057;
/*    margin-right: 7px;*/
}


.tit-sub-wrap{
    display: flex;
    padding-bottom: 20px;
    border-bottom: 2px solid #00C6AC;
    margin: 0 0 30px;
    gap: 20px;
}


.section-title {
    font-size: 25px; /* 타이틀: 25px */
    font-weight: 700;
    color: #212529;
}

.section-subtitle {
    font-size: 15px; /* 서브: 15px */
    color: #6c757d;
    margin-top: 10px;
}

.table-title2{
    font-size: 18px; /* 타이틀: 25px */
    font-weight: 700;
    color: #212529;
}

/* 탭 메뉴 스타일 */
.tab-menu-list {
    list-style: none;
    padding: 0;
/*    margin: 10px 0 0;*/
    display: flex;
    justify-content: flex-start;
/*    border-bottom: 2px solid #e9ecef;*/
    overflow-x: auto;
    white-space: nowrap;
}

.tab-menu-item {
    flex-shrink: 0;
    margin-right: 20px;
    padding: 0 0 10px 0;
    font-size: 18px; /* 본문 및 기타: 18px */
    font-weight: 500;
    color: #868e96;
    cursor: pointer;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    border-bottom: 3px solid transparent;
}

.tab-menu-item:hover {
    color: #495057;
}

.tab-menu-item.active {
    color: #212529;
    font-weight: 700;
    border-bottom: 3px solid #00C6AC;
}

/* 탭 컨테이너와의 간격 조정 */
.tab-container {
    padding-top: 30px;
}
    
/* 탭 내용(tab-content) 기본 숨김 처리 */
.tab-content {
    display: none;
}

/* 활성화된 탭 내용만 보이게 처리 */
.tab-content.active {
    display: block;
}

/* 이미지 컨테이너 스타일 */
.tab-image-container {
    margin-bottom: 30px; /* 아래쪽 여백 추가 */
}

.tab-image-container img {
    max-width: 100%; /* 이미지가 부모 요소 너비를 넘지 않도록 설정 (반응형) */
    height: auto; /* 이미지 비율 유지 */
    border-radius: 8px; /* 모서리를 둥글게 처리 (선택 사항) */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  그림자 효과 추가 (선택 사항) */
}

.accordion-item {
    border-bottom: 1px solid #e9ecef;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    font-size: 18px; /* 본문 및 기타: 18px */
    font-weight: 700;
    color: #343a40;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.accordion-header:hover {
    background-color: #f8f9fa;
}

.accordion-header .fas {
    font-size: 18px; /* 본문 및 기타: 18px */
    color: #00C6AC;
}

.accordion-header span {
    font-weight: 400;
    font-size: 19px; /* 서브: 15px */
    color: #212529;
    margin-left: 10px;
    font-weight: bold
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
/*    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;*/
    padding: 0 20px;
}

/*
.accordion-body p {
    opacity: 0; 
    transition: opacity 1s ease-in; 
}
*/

/*
.accordion-item.active .accordion-body p {
    opacity: 1;
    transition-delay: 0.2s; 
}
*/

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-icon.rotate {
    transform: rotate(180deg);
}

/* 다른 아이콘들은 회전시키지 않도록 설정 (안전성 강화) */
.accordion-item .fas:not(.accordion-icon) {
    transform: none;
}

.accordion-item.active .accordion-body {
    max-height: 1000px;
    padding: 0px 20px 10px 20px;
}

.accordion-item.active .accordion-header {
    color: #00C6AC;
}

.g_accent {
    color: #FF7F00;
    font-size: 16px;
}

/* 내용 스타일 */
.note-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.note-list li {
/*    padding: 10px 0;*/
    font-size: 18px; /* 본문 및 기타: 18px */
    color: #495057;
    line-height: 1.6;
    margin-bottom: 15px;
}

.note-list li p {
    margin: 5px 0 0 20px;
    font-size: 15px;
    color: #6c757d;
}

.c_or {
    color: #ff6b6b;
    font-weight: bold;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .sub-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sub-nav-list {
        flex-wrap: wrap;
        gap: 10px;
    }

    .sub-nav-item a {
        padding: 15px 10px;
    }


    .accordion-header {
        font-size: 16px; /* 본문 및 기타: 16px */
    }
}

/* ========================================================== */
/* 마이페이지 기본 스타일 - nonum-mypage 적용 뼈대 */
/* ========================================================== */

/* 메인 컨테이너 (기존 .nonum-guide-page) */
.nonum-mypage {
	display: flex; /* 사이드 메뉴와 메인 콘텐츠 가로 나열 */
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
	gap: 30px; /* 사이드 메뉴와 메인 콘텐츠 사이의 간격 */
}

/* ------------------- 메인 컨텐츠 영역 ------------------- */

/* 메인 콘텐츠 구조 (기존 .content-main-wrapper) */
.content-main-wrapper {
	flex-grow: 1; /* 남은 공간 모두 차지 */
	display: flex;
	flex-direction: column; /* 헤더와 본문 세로 나열 */
	gap: 15px; /* 헤더와 본문 사이의 간격 확장 */
}


/* 페이지 헤더 */
.page-intro-section {
	display: flex;
	align-items: flex-start;
	padding-bottom: 20px;
	border-bottom: 2px solid #333;
    max-width: 960px;
}

.intro-text-container {
	display: flex;
	flex-direction: column; /* 타이틀과 서브타이틀/로케이션을 세로로 배열 */
}

.page-main-title {
	font-size: 2.8rem;
	font-weight: 700;
	color: #212529;
	margin: 0;
}

/* 로케이션 정보 스타일링 (기존 .page-subtitle에 포함) */
.page-subtitle {
	font-size: 13px;
	margin: 8px 0 0 0; /* 타이틀 아래로 이동 */
	display: flex; /* 부제와 로케이션을 수평 정렬하기 위해 flex 사용 */
	align-items: center;
	color: #6c757d; /* 부제 텍스트 색상 */
}

.page-subtitle .location-path {
	display: flex;
	align-items: center;
	margin-left: 20px;
	color: #adb5bd;
	font-size: 0.9rem;
}

.location-path .arr {
	/* 구분자 화살표 스타일 (CSS로 대체하거나 Font Awesome 사용 권장) */
	display: inline-block;
	content: '';
	margin: 0 5px;
}

.location-path .current {
	font-weight: 500;
	color: #495057;
}

/* ------------------- 본문 컨텐츠 (.mypage-content) ------------------- */

/* 메인 컨텐츠 섹션 (기존 .main-content-section) */
.mypage-content {
	/* 필요한 경우 내부 콘텐츠의 기본 간격이나 패딩을 정의 */
	/* 현재는 상위 .content-main-wrapper의 gap을 사용 */
}

/* ------------------- 반응형 웹 ------------------- */

@media (max-width: 992px) {
	/* 992px 이하에서는 사이드 메뉴를 세로로, 컨테이너 패딩 조정 */
	.nonum-mypage {
		flex-direction: column;
		padding: 20px;
	}

	/* 메인 콘텐츠 영역은 그대로 유지 (세로 방향이므로) */
	.content-main-wrapper {
		gap: 20px;
	}

	/* 페이지 타이틀 크기 조정 */
	.page-main-title {
		font-size: 2rem;
	}

	/* 로케이션 경로 숨김 또는 조정 */
	.page-subtitle .location-path {
		display: none; /* 모바일에서 경로 숨김 */
	}

	.page-subtitle {
		margin-top: 5px;
	}
}

/* ========================================================== */
/* 주문 현황 리스트 테이블 스타일 (my_T1 -> .order-status-table) */
/* ========================================================== */

.order-list-section {
	margin-top: 10px;
    max-width: 960px;
}

.list-guide-text {
	text-align: left;
	margin-bottom: 10px;
	font-size: 1.4rem; /* 일관된 폰트 크기 사용 */
	color: #6c757d;
}

.list-guide-text .c_re {
	color: #e63946; /* 주문번호 강조 색상 (빨간색 계열) */
	font-weight: bold;
}

.order-status-table {
	width: 100%;
	border-collapse: collapse; /* 셀 경계선 겹치기 */
	table-layout: fixed;
    border-bottom: 1px solid #e1e1e1;
}

.order-status-table thead th {
	font-weight: 600;
	color: #495057;
	font-size: 1.5rem;
	padding: 1.25rem 0.5rem;
	border-top: 2px solid #333; /* 상단 굵은 선 */
	border-bottom: 1px solid #e1e1e1; /* 하단 얇은 선 */
	text-align: center;
}


.order-status-table tbody td {
	color: #495057;
	padding: 1.25rem 0.5rem;
	font-size: 14px;
	text-align: center;
/*    border-bottom: 1px solid #e1e1e1;*/
}


/* 내용이 없을 때 */
.order-status-table tbody tr td p {
	font-size: 1.4rem;
	padding: 30px 0;
	color: #adb5bd;
}

/* 주문번호 클릭 가능 강조 */
.order-status-table tbody td a {
	color: #00C6AC;
	font-weight: 500;
	text-decoration: none;
}

/*
.bo_t2 {
    border-bottom: 1px solid #00C6AC;
}
*/

/* ========================================================== */
/* 검색 폼 및 버튼 스타일 (960px 최적화 - 최종 통합) */
/* ========================================================== */

.order-search-section {
	border-radius: 8px;
	margin-bottom: 20px;
	max-width: 960px;
}

.search-form-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px 30px;
	align-items: center;
}

.search-form-item {
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.search-form-item .item-label {
	font-size: 14px;
    text-align: center;
	color: #343a40;
	font-weight: 500;
	margin-right: 5px;
	flex-shrink: 0;
    width: 70px;
}
.item-name{
    font-size: 14px;
    font-weight: 500;
    margin-right: 15px;
}
.search-form-item input[type="text"]:not(.date-range-picker input),
.search-form-item select {
	border: 1px solid #ced4da;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
	flex-grow: 1;
    height: 32px;
    max-width: 380px;
}


/* 날짜와 버튼을 감싸는 새로운 컨테이너 (li) */
.search-form-list .date-and-button-row {
	flex-grow: 0;
	flex-basis: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
}

/* 날짜 입력 필드 그룹 컨테이너 */
.date-and-button-row .date-range-picker {
	display: flex;
	align-items: center;
	gap: 5px; 
	flex-grow: 1; 
	font-size: 14px;
}

.date-and-button-row .date-range-picker .item-label {
	font-size: 14px;
    font-weight: 500;
    margin-right: 0;
}

/* 날짜 입력 필드 스타일 */
.date-and-button-row .date-range-picker input {
	border: 1px solid #ced4da;
	padding: 6px 5px;
	border-radius: 4px;
	font-size: 14px;
	text-align: center !important;
	transition: border-color 0.2s, box-shadow 0.2s;
	margin-right: 0;
	height: 31px;
}

/* 날짜 구분 기호 (~) 스타일 */
.date-and-button-row .date-range-picker > span:not(.item-label) {
	margin: 0 5px;
	color: #6c757d;
}

/* 인터랙티브: 포커스 효과 */
.date-and-button-row .date-range-picker input:focus {
	border-color: #00C6AC;
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 198, 172, 0.2);
}

/* 검색 버튼 wrapper 스타일 (인라인 배치용) */
.search-button-wrap-inline {
	flex-shrink: 0;
}

.search-button-wrap-inline .btn-search a {
	display: inline-block;
	padding: 13px 25px;
	background-color: #00C6AC;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s;
	line-height: 11px;
	box-sizing: content-box;
}

.search-button-wrap-inline .btn-search a:hover {
	background-color: #00A490;
}

/* ========================================================== */
/* 이전 주문 보기 버튼 스타일 (검색 폼 상단 배치) */
/* ========================================================== */

/* 이전 주문 링크 컨테이너 (960px에 맞게 오른쪽 정렬) */
.previous-order-link {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

/* 버튼 스타일: 깔끔하고 보조적인 링크 디자인 */
.btn-old-order {
	display: inline-block;
	padding: 7px 15px;
	
	/* 배경색 없음 (미니멀) */
	background-color: transparent; 
	
	color: #fafafa;
	background-color: #a0a0a0; /* 검색 버튼 강조색으로 변화 */
	
	font-size: 1.3rem;
	font-weight: 400;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.2s;
    text-align: left;
}

/* 인터랙티브: 마우스 오버 시 변화 */
.btn-old-order:hover {
	color: #fafafa;
	background-color: #6c6c6c; /* 검색 버튼 강조색으로 변화 */
}

/* ========================================================== */
/* 총합계 섹션 스타일 (960px 최적화) */
/* ========================================================== */

.order-summary-section {
	margin-top: 30px;
	max-width: 960px;
}

.summary-table {
	width: 100%;
	border-collapse: collapse;
	/* 테이블 전체에 하단 보더를 주어 깔끔하게 마무리 */
	border-bottom: 1px solid #dee2e6;
}

.summary-table th,
.summary-table td {
	padding: 10px 10px;
	font-size: 15px;
	border: none;
}

/* 모든 행의 상단에 얇은 보더를 줘서 행을 구분 */
.summary-table tbody tr {
	border-top: 1px solid #e1e1e1;
}

.summary-table th {
	background-color: #f8f9fa;
	font-weight: 500;
	color: #343a40;
	text-align: center;
	width: 15%; /* 고정 */
}

/* 금액 값 셀 (총합계/합계금액) */
.summary-table tbody tr td:nth-child(3) {
	text-align: right;
	width: 10%; /* 금액 영역 너비 축소 */
}

/* 첫 번째 열 (날짜 범위) */
.summary-table tbody tr td:first-child {
	text-align: center;
	color: #6c757d;
	width: 58%; /* 가장 넓은 영역 */
    height: 53px;
}

/* 마지막 열 (인쇄 버튼) */
.summary-table tbody tr td:last-child {
	text-align: center;
	width: 17%; /* 인쇄 버튼 영역 너비 */
}

/* 합계금액 (첫 번째 행)의 하이라이트 */
.summary-table .highlight-orange {
	color: #212529; /* 오렌지 강조 */
	font-weight: 700;
	font-size: 15px;
}

/* 총합계 (두 번째 행)의 하이라이트 */
.summary-table .highlight-red {
	color: #e63946;
	font-weight: 700;
	font-size: 15px;
}


.summary-table .print-button-wrap a {
	display: inline-block;
	padding: 8px 20px;
	background-color: #495057; /* 인쇄 버튼 색상 */
	color: #fff;
	font-size: 1.4rem;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.summary-table .print-button-wrap a:hover {
	background-color: #212529;
}


/* ========================================================== */
/* 1. 월별 합계 행 (table-total-row) - 이전 응답에서 제공된 스타일 */
/* ========================================================== */
.table-total-row {
    border-top: 2px solid #adb5bd; /* 굵은 회색 구분선 */
}

.table-total-row .total-cell {
    padding: 8px 8px;
    font-size: 13px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.table-total-row .total-label {
    text-align: center;
    background-color: #f1f3f5; /* 밝은 회색 배경 */
    color: #495057;
    font-weight: 500;
}

.table-total-row td.total-cell {
    text-align: right;
    font-weight: 600;
    background-color: #f8f9fa;
}

/* ========================================================== */
/* 2. 총합계 행 (table-grand-total) - 가장 강한 강조 */
/* ========================================================== */
.table-grand-total {
    border-top: 2px solid #343a40; /* 진한 검은색 구분선으로 확실하게 분리 */
    background-color: #e9ecef; /* 전체 행에 배경색 적용 */
    font-size: 15px;
}

.table-grand-total th,
.table-grand-total td {
    padding: 12px 8px; /* 패딩을 늘려 높이 강조 */
    font-weight: 700; /* 글씨 두께 강조 */
    text-align: right;
    vertical-align: middle;
    border: none;
}

/* 총합계 라벨 */
.table-grand-total th {
    text-align: center;
    color: #343a40;
}

/* 인쇄 버튼 컨테이너 */
.table-grand-total .print-cell {
    text-align: center;
}

/* 인쇄 버튼 디자인 */
.table-grand-total .print-cell .print a {
    display: inline-block;
    padding: 6px 12px;
    background-color: #6c757d; /* 차분한 회색 버튼 */
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: normal;
    font-size: 13px;
    transition: background-color 0.2s;
}

.table-grand-total .print-cell .print a:hover {
    background-color: #5a6268;
}

/* ========================================================== */
/* 금액 합계 디자인 */
/* ========================================================== */
/* 전체 컨테이너 및 폼 스타일 (배경 제거, 그림자로 경계 표현) */
.payment-summary-container {
    padding: 25px; /* 패딩 증가: 여백 강조 */
    border: none; /* 보더 제거 */
    border-radius: 10px; 
    margin-top: 30px;
    background-color: #ffffff; /* 순백색 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 은은한 그림자로 영역 구분 */
    transition: box-shadow 0.3s ease-in-out;
}

/* 1줄: 금액 정보와 미결제액 */
.summary-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px 0;
    border-bottom: 1px solid #eeeeee; /* 더 옅은 구분선 */
}

/* 금액 표시 그룹 (타이포그래피 강조) */
.amount-group {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333333; /* 폰트 색상을 더 진하게 */
    gap: 15px; 
    font-weight: 500;
}

/* 금액 Input 필드 (경계선을 최소화) */
.amount-input {
    width: 100px;
    padding: 6px 0;
    text-align: right;
    border: none; /* 보더 제거: 깔끔함 강조 */
    border-bottom: 1px solid #cccccc; /* 밑줄로만 구분 */
    border-radius: 0;
    background-color: transparent; /* 배경색 제거 */
    font-weight: 700; /* 중요 데이터는 굵게 */
    color: #1a1a1a;
    transition: border-bottom 0.2s;
}

/* 미결제 금액 강조 영역 (대비 강조) */
.unpayment-amount {
    font-size: 17px; /* 조금 더 크게 */
    font-weight: 800;
    color: #d90429; /* 더 선명하고 강렬한 경고색 */
}

/* 체크박스 및 미결제액 셀 */
.action-meta-group {
    display: flex;
    align-items: center;
    gap: 25px; /* 간격 증가 */
}

/* 2줄: 결제 버튼 영역 */
.summary-action-row {
    text-align: center;
    padding-top: 10px;
}

/* 결제 버튼 스타일 (미니멀한 고스트/단색 버튼) */
.btn-payment-action a {
    display: inline-block; /* block 대신 inline-block */
    padding: 12px 40px;
    background-color: #333333; /* 모던하고 세련된 진회색 (주요 액션) */
    color: white;
    border: 1px solid #333333;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px; /* 약간의 자간으로 고급스러운 느낌 */
    text-decoration: none;
    transition: all 0.2s;
}

.btn-payment-action a:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 마감 메시지 스타일 */
.payment-closed-message {
    color: #cc2936;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 0;
}

/* ========================================================== */
/* 미니멀 모던 페이징 스타일 */
/* ========================================================== */


.paging {
    display: flex;
    justify-content: center; /* 중앙 정렬 유지 */
    align-items: center;
    margin-top: 40px; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 화살표 버튼 그룹 스타일: 페이지 번호와 여백으로만 구분 */
.paging .btn {
    display: flex;
    align-items: center;
    margin: 0 20px; /* 좌우 여백을 매우 넓게 설정해 구분 */
    gap: 0;
}

/* 모든 페이징 링크 및 현재 페이지 번호 공통 스타일 */
.paging a,
.paging strong {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    margin: 0 4px; /* 페이지 번호 간격을 균일하게 */
    border-radius: 4px; 
    /* 핵심: 보더와 배경색 완전 제거 */
    border: none !important; 
    background-color: transparent !important;
    transition: color 0.2s, background-color 0.2s;
}

/* 일반 링크 (선택되지 않은 페이지) */
.paging a {
    color: #868e96; /* 옅은 회색으로 약하게 존재감 표시 */
}

/* 일반 링크 호버 시: 배경색을 넣지 않고 글씨만 진하게 */
.paging a:hover {
    color: #495057; 
}

/* 현재 페이지 (강조): 유일하게 배경색을 최소화하여 대비 */
.paging strong {
    font-weight: 700;
    color: #343a40; /* 진한 회색 */
    /* 현재 페이지임을 표시하기 위해 글씨 굵기와 색상만 다르게 처리 */
    /* 필요하다면 아주 옅은 밑줄로만 구분 가능 (선택 사항) */
    /* border-bottom: 2px solid #343a40; */
}

/* 화살표 이미지 스타일 */
.paging img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    /* 화살표 이미지 자체는 글씨색과 대비되도록 유지 */
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* 화살표 버튼 호버 시 */
.paging .btn a:hover img {
    opacity: 1; /* 호버 시 뚜렷하게 */
}

/* -------------------------------------------
   총입금합계 테이블 스타일
------------------------------------------- */

/* 메인 테이블 컨테이너 스타일 */
.total-summary {
    width: 100%;
    /* 요구 사항 반영 */
    border-top: 1px solid #fff; 
    border-left: 0;
}

/* 테이블 행과 셀의 공통 스타일 */
.summary-row td,
.summary-row th {
    /* 요구 사항 반영 */
    padding: 10px 0;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid #dadada;
}