/* --- 기본 스타일 (모바일 기준) --- */
/*
body, html {
	margin: 0;
	padding: 0;
	font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
	background-color: #f8f8f8;
	color: #333;
}

a {
	text-decoration: none;
	color: inherit;
}
*/

/* 모바일에서는 사이드바를 기본적으로 숨김 처리 */
.sidebar {
    display: none;
}

.container1 {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
}

.content-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.content-header h1 {
    font-size: 2rem;
    margin: 0 0 10px 0;
}

.breadcrumbs {
    font-size: 0.9rem;
    color: #777;
}

.breadcrumbs span:not(:last-child)::after {
    content: ' > ';
    margin: 0 5px;
}

.login-form-container1 {
    width: 100%;
    margin-top: 40px;
    text-align: center;
}

.login-icon {
    margin-bottom: 20px;
}

.login-prompt {
    color: #555;
    margin-bottom: 30px;
}

.login-form input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 1rem;
    border-radius: 4px;
}

.btn-login {
    width: 100%;
    height: 55px;
    border: none;
    background-color: #d95f02;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 4px;
}

.sub-actions {
    display: flex;
    gap: 10px;
}

.btn-sub {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-size: 0.95rem;
    border-radius: 4px;
}


.location * {
    float: left;
    line-height: 22px;
    font-size: 13px;
    font-weight: 300
}

.location .home {
    width: 12px;
    text-indent: -999em;
    overflow: hidden;
    background: url(/assets/front/pc/conf2026/images/ico-location-home.gif) 50% 50% no-repeat
}

.location .gt {
    width: 26px;
    text-indent: -999em;
    overflow: hidden;
    background: url(/assets/front/pc/conf2026/images/ico-location-gt.gif) 50% 50% no-repeat
}

.lnb_title {
    height: 63px;
    font-size: 30px;
    color: #1d1d1d;
    font-weight: 500
}

/* 서브타이틀 */
h1.sub_title {
    /* font-family:'Nanum Gothic','ng-bold',Dotum; font-weight:bold; */
    color: #1d1d1d;
    font-size: 30px;
    font-weight: 100
}

h3.sub_title,
h4.sub_title {
    /* font-family:'Nanum Gothic','ng-bold',Dotum; font-weight:bold; */
    float: left;
    color: #1d1d1d;
    font-size: 30px;
    font-weight: 100
}


/* --- 폼 컨테이너 --- */
.form-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- 폼 헤더 (제목, 경로) --- */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 50px;
}

.form-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.breadcrumbs {
    font-size: 14px;
    color: #888;
}

.breadcrumbs span:not(:last-child)::after {
    content: ' > ';
    margin: 0 5px;
}

/* --- 폼 레이아웃 그리드 --- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 모바일에서는 1열 */
    gap: 20px 25px;
    /* 세로 간격, 가로 간격 */
    margin-top: 20px;
    margin-bottom: 30px;
}

/* --- 폼 요소 그룹 --- */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group select {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.help-text {
    font-size: 13px;
    color: #777;
    margin: 8px 0 0 0;
}

/* 이메일 + 중복확인 버튼 */
.input-with-button {
    display: flex;
    gap: 10px;
}

.input-with-button input {
    flex-grow: 1;
    /* 남은 공간을 모두 차지 */
}

.input-with-button button {
    flex-shrink: 0;
    /* 너비가 줄어들지 않도록 함 */
    height: 40px;
    padding: 0 15px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.input-with-button button:hover {
    background-color: #5a6268;
}

/* --- 폼 제출 버튼 --- */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 60px;
    justify-content: center;
    /* [추가] 버튼들을 중앙으로 정렬합니다. */
}

.form-actions button {
    width: 100%;
    max-width: 300px;
    height: 55px;
    background-color: #d95f02;
    color: white;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.form-actions button:hover {
    background-color: #b54d00;
}

.form-actions .btn-cancel {
    background-color: #6c757d;
    /* 취소 버튼 배경색 (회색 계열) */
}

.form-actions .btn-cancel:hover {
    background-color: #5a6268;
    /* 마우스 올렸을 때 색상 */
}


.form-actions1 {
    display: flex;
    gap: 10px;
    margin-top: 60px;
    justify-content: center;
    /* [추가] 버튼들을 중앙으로 정렬합니다. */
}

.form-actions1 button {
    width: 100%;
    max-width: 300px;
    height: 55px;
    background-color: #0764a2;
    color: white;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.form-actions1 button:hover {
    background-color: #054a75;
}

.form-actions1 .btn-cancel {
    background-color: #6c757d;
    /* 취소 버튼 배경색 (회색 계열) */
}

.form-actions1 .btn-cancel:hover {
    background-color: #5a6268;
    /* 마우스 올렸을 때 색상 */
}

/* --- 폼 컨테이너 --- */
.modern-form-container {
    max-width: 800px;
    margin: 40px auto;
    /* 위아래 여백 추가 */
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- 폼 헤더 (제목, 경로) --- */
.modern-form-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 30px;
    /* 헤더와 폼 내용 사이 간격 */
}

.modern-form-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

/* breadcrumbs는 기존 스타일을 사용하도록 남겨둡니다. */


/* --- 폼 레이아웃 그리드 --- */
.modern-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 모바일에서는 1열 */
    gap: 20px 25px;
    /* 세로 간격, 가로 간격 */
    margin-bottom: 40px;
    /* 마지막 입력칸과 버튼 사이 간격 */
}

/* --- 폼 요소 그룹 --- */
.modern-form-group {
    display: flex;
    flex-direction: column;
}

.modern-form-group label {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.modern-form-group input[type="text"],
.modern-form-group input[type="email"],
.modern-form-group input[type="password"],
.modern-form-group input[type="tel"],
.modern-form-group select {
    width: 100%;
    height: 42px;
    /* 높이 약간 조정 */
    padding: 0 15px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modern-form-group input:focus,
.modern-form-group select:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.modern-form-help-text {
    font-size: 13px;
    color: #777;
    margin: 8px 0 0 0;
}

/* 이메일 + 중복확인 버튼 */
.modern-form-input-with-button {
    display: flex;
    gap: 10px;
}

.modern-form-input-with-button input {
    flex-grow: 1;
}

.modern-form-input-with-button button {
    flex-shrink: 0;
    height: 42px;
    /* 높이 통일 */
    padding: 0 15px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modern-form-input-with-button button:hover {
    background-color: #5a6268;
}

/* --- 폼 제출 버튼 영역 --- */
.modern-form-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.modern-form-actions button,
.modern-form-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

/* 모바일에서는 버튼이 꽉 차도록 설정 */
.modern-form-actions button,
.modern-form-actions a {
    flex: 1;
}

/* 주황색 버튼 */
.modern-form-actions button[type="submit"] {
    background-color: #d95f02;
    color: white;
}

.modern-form-actions button[type="submit"]:hover {
    background-color: #b54d00;
}

/* 회색 버튼 */
.modern-form-btn-cancel {
    background-color: #6c757d;
    color: white;
}

.modern-form-btn-cancel:hover {
    background-color: #5a6268;
}


/* --- 페이지 레이아웃 --- */
.reg-main-content {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    /* [수정] 모바일에서는 좌우 여백을 제거하여 꽉 찬 화면을 만듭니다. */
    padding: 0;
}

.reg-header {
    text-align: center;
    padding: 0px 15px;
    margin-bottom: 20px;
}

.reg-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* --- 콘텐츠 섹션 (카드 UI) --- */
.reg-section {
    background-color: #ffffff;
    /* [수정] 모바일에서는 카드 내부에 좌우 여백을 줍니다. */
    border-bottom: 1px solid #f0f0f0;
    /* 섹션 구분선 */
}

.reg-section:first-child {
    border-top: 1px solid #f0f0f0;
}

.reg-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 15px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

/* --- 개인 정보 표시 --- */
.reg-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* PC: 2열 */
    gap: 15px;
}

.reg-info-item {
    display: flex;
    flex-direction: column;
}

.reg-info-label {
    font-size: 14px;
    font-weight: 500;
    color: #555;

}

.reg-info-value {
    font-size: 16px;
    font-weight: 500;
}

/* --- 라디오/체크박스 그룹 --- */
.reg-group-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 5px;
}

.reg-radio-group,
.reg-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reg-checkbox-group label,
.reg-radio-group label {
    font-size: 14px;
    margin-bottom: -4px !important;
    /* 제목 아래 여백을 줄입니다. */
}

.reg-radio-item,
.reg-checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.reg-radio-item input,
.reg-checkbox-item input {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.reg-radio-group.horizontal {
    flex-direction: row;
    align-items: center;
    gap: 50px;
    padding: 15px;
    /* 부모에 내부 여백 적용 */
    font-weight: 700;
    /* 굵은 글씨체도 부모로 이동 */
}

/* 1. 기본 정렬 재시도 */
.reg-checkbox-item,
.reg-radio-item {
    display: flex !important;
    align-items: center !important;
}

/* 2. 체크박스 자체의 불필요한 여백 제거 */
.reg-checkbox-item input,
.reg-radio-item input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. 텍스트(label) 위치를 수동으로 미세 조정 (가장 확실한 방법) */
.reg-checkbox-item label,
.reg-radio-item label {
    position: relative;
    top: -1px;
    /* 숫자를 -2px 또는 0 등으로 조절하여 가장 보기 좋은 위치로 맞추세요. */
}

/* --- 정보/동의서 박스 --- */
.reg-info-box {
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.6;
}

.reg-info-box p:first-child {
    margin-top: 0;
}

.reg-info-box p:last-child {
    margin-bottom: 0;
}

.reg-text-highlight {
    color: #d9534f;
    font-weight: 500;
}



/* --- 반응형 테이블 --- */
.reg-table-wrapper {
    overflow-x: auto;
}

.reg-fee-table {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
    font-size: 14px;
}

.reg-fee-table th,
.reg-fee-table td {
    border: 1px solid #e9ecef;
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

.reg-fee-table thead th {
    background-color: #f8f9fa;
    font-weight: 700;
    text-align: center;
    padding-top: 3px;
    /* 위쪽 여백을 줄입니다. */
    padding-bottom: 3px;
    /* 아래쪽 여백을 줄입니다. */
    white-space: nowrap;
    /* 자동 줄바꿈을 방지하여 글자가 한 줄로 표시되도록 합니다. */
}

.reg-fee-table tbody th {
    background-color: #f8f9fa;
    font-weight: 500;
}

.reg-fee-table tbody td {
    padding-top: 1px;
    /* 위쪽 여백을 줄입니다. */
    padding-bottom: 0px;
    /* 아래쪽 여백을 줄입니다. */
    white-space: nowrap;
    /* 셀 내부의 텍스트가 자동으로 줄바꿈되는 것을 방지합니다. */
}

.reg-fee-table label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}



.reg-fee1-table {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
    font-size: 12px;
}

.reg-fee1-table th,
.reg-fee1-table td {
    border: 1px solid #e9ecef;
    padding: 5px 7px;
    text-align: left;
    vertical-align: middle;
}

.reg-fee1-table thead th {
    background-color: #f8f9fa;
    font-weight: 700;
    text-align: center;
}

.reg-fee1-table tbody th {
    background-color: #f8f9fa;
    font-weight: 500;
}

.reg-fee1-table label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}


.reg-fee2-table {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
    font-size: 14px;
}

.reg-fee2-table th,
.reg-fee2-table td {
    border: 1px solid #e9ecef;
    padding: 9px 9px;
    text-align: left;
    vertical-align: middle;
    font-size: 15px;
}

.reg-fee2-table thead th {
    background-color: #f8f9fa;
    font-weight: 700;
    text-align: center;
}

.reg-fee2-table tbody th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 15px;
    width: 30%;
	white-space: nowrap; /* 텍스트를 한 줄로 유지 */
}

.reg-fee2-table label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}



/* 2. reg-fee3-table 테이블 자체의 스타일과 너비를 지정합니다. */
.reg-fee3-table {
    width: 100%;
    min-width: 750px;
    /* 테이블의 최소 너비를 고정해 스크롤을 유발합니다. */
    border-collapse: collapse;
    text-align: center;
}

/* 3. 테이블 헤더(th)와 셀(td)의 공통 스타일 (선 제거, 여백 추가) */
.reg-fee3-table th,
.reg-fee3-table td {
    padding: 3px 5px;
    /* 셀 내부 여백 */
    border: 1px solid #e0e0e0;
    /* 모든 셀에 옅은 회색 선을 적용합니다. */
    white-space: nowrap;
    /* 글씨가 줄바꿈되지 않고 가로로 나오게 합니다. */
    font-size: 14px;
}

/* 아래 코드를 추가하세요 */
.reg-fee3-table td {
    text-align: left; /* td 내부 텍스트를 왼쪽으로 정렬합니다. */
}

.reg-fee3-table .text-center {
    text-align: center; /* 이 클래스가 적용된 요소는 오른쪽 정렬 */
}

.reg-fee3-table .text-right {
    text-align: right; /* 이 클래스가 적용된 요소는 오른쪽 정렬 */
}

.reg-fee3-table .font-small {
    font-size: 13px; /* 기본보다 작은 13px로 설정 */
    /* 또는 상대적인 크기인 0.9em, 90% 등을 사용할 수도 있습니다. */
}

/* 4. 헤더(th)는 다른 배경색과 글자 스타일을 적용합니다. */
.reg-fee3-table th {
    background-color: #f9f9f9;
    /* 헤더 배경색 */
    font-weight: bold;
    font-weight: 600;
    /* 굵은 글씨체 */
    font-size: 15px;
}

/* --- 결제 수단 --- */
.reg-payment-method .reg-radio-group.horizontal {
    display: flex;
    /* Flexbox 지정 */
    flex-direction: row;
    /* [핵심] 가로 방향으로 강제 */
    align-items: center;
    /* 세로 중앙 정렬 */
    gap: 10px;
    /* 아이템 간 간격 */
    padding: 3px;
    /* 내부 여백 */
    font-weight: 500;
    /* 굵은 글씨체 */
    margin-top: -10px;
}

.reg-payment-method .reg-radio-item {}


.reg-payment-desc {
    padding: 7px 0px 5px 0px;
}

.reg-payment-desc ul {
    margin: 0;
    padding-left: 20px;
    color: #495057;
    font-size: 14px;
}

/* --- hr 구분선 --- */
hr {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 10px 0;
}

/* --- 최종 버튼 --- */
.reg-form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px 0px;
}

.reg-form-actions button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 350px;
    height: 55px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.reg-form-actions button {
    background-color: #0764a2;
    color: white;
}

.reg-form-actions button:hover {
    background-color: #054a75;
}

.reg-form-actions .reg-btn-secondary {
    background-color: #6c757d;
}

.reg-form-actions .reg-btn-secondary:hover {
    background-color: #5a6268;
}

.reg-text-info {
    color: #0d6efd;
    font-weight: 500;
}

.krw-amount {
    font-size: 12px;
    color: #6c757d;
    position: relative;
    /* 위치를 수동으로 조정하기 위해 필요합니다. */
    top: -5px;
    /* 현재 위치에서 위로 3px 이동합니다. */
}

.krw-amount1 {
    font-size: 12px;
    color: #6c757d;
    position: relative;
    /* 위치를 수동으로 조정하기 위해 필요합니다. */
}

.reg-section>.reg-form-group:first-of-type {
    padding-top: 0;
    /* 섹션의 첫 번째 항목의 위쪽 여백을 없애 제목에 가깝게 붙입니다. */
}


/* ============ Sub Total 스타일링 ============ */

/* ul 태그의 기본 스타일(들여쓰기, 점)을 제거합니다. */
.subtotal-list {
    list-style: none;
    padding-left: 0;
    text-align: right;
    /* 전체 텍스트를 오른쪽으로 정렬합니다. */
}

/* 텍스트 전체의 기본 스타일을 설정합니다. */
.subtotal-list li {
    font-size: 17px;
    /* 텍스트 크기를 키웁니다. */
}

/* 'Sub Total :' 텍스트를 굵게 만듭니다. */
.subtotal-label {
    font-weight: bold;
    color: #333;
}

/* 'KRW' 텍스트는 일반 굵기로 설정합니다. */
.subtotal-currency {
    font-weight: normal;
    margin: 0 5px;
    /* 앞뒤로 약간의 여백을 줍니다. */
}

/* '2,652,000' 숫자를 굵고 빨갛게 만듭니다. */
.subtotal-amount {
    font-weight: bold;
    color: #E53935;
    /* 선명한 빨간색 */
}


/* ============ 새로운 정보 표시 테이블 스타일 ============ */

/* 1. 테이블 기본 설정 */
.reg-fee-table1 {
    width: 100%;
    /* 테이블 너비를 100%로 설정 */
    border-collapse: collapse;
    /* 테두리 선을 한 줄로 합칩니다. */
    border-top: 1px solid #e9ecef;
    /* 테이블 위쪽에 두꺼운 선 추가 */
    margin-bottom: 5px;
    /* 테이블 자체에 아래쪽 여백을 추가합니다. */
}

/* 2. 모든 셀(th, td) 공통 스타일 */
.reg-fee-table1 th,
.reg-fee-table1 td {
    border-bottom: 1px solid #e9ecef;
    /* 각 행 아래에 얇은 구분선 추가 */
    padding: 4px 12px;
    /* ★ 셀 높이 조절: 상하 여백을 8px로 줄입니다. */
    text-align: left;
    /* 텍스트 왼쪽 정렬 */
    vertical-align: middle;
    /* 세로 중앙 정렬 */
    font-size: 15px;
}

/* 3. 제목 칸(th) 상세 스타일 */
.reg-fee-table1 th {
    width: 30%;
    /* ★ 제목 칸 너비를 40%로 설정 */
    background-color: #f8f9fa;
    /* 제목 칸에 연한 배경색 적용 */
    font-weight: 600;
    /* 글자를 약간 굵게 */
    font-size: 15px;
}

/* 4. 내용 칸(td) 안의 리스트(ul) 스타일 초기화 */
/* 리스트의 불필요한 여백과 점을 제거하여 깔끔하게 만듭니다. */
.reg-fee-table1 td ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.reg-fee-table1 td ul li {
    padding: 2px 0;
    /* 리스트 각 항목 사이의 간격을 살짝 줍니다. */
}


.reg-section-title+.reg-table-wrapper {
    margin-top: -6px;
    /* 제목 바로 다음에 오는 테이블의 위쪽 여백을 음수로 설정해 위로 올립니다. */
}


.password-fields-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* 3개의 열을 동일한 비율로 나눕니다. */
    gap: 15px;
    /* 각 필드 사이의 간격을 줍니다. */
    width: 100%;
    grid-column: 1 / -1;
    /* ★★★ 이 한 줄을 추가하세요 ★★★ */
    margin-top: -20px;
    /* 값을 조절하여 원하는 만큼 간격을 맞추세요. */
}

.btn-style-password {
    display: inline-block;
    padding: 8px 12px;
    background-color: #2c5b87;
    color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}



.action-button-area {
    text-align: right;
    padding: 0px;
}

.btn-withdrawal-open {
    padding: 8px 15px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

/* 모달 오버레이 (배경) */
.modal-overlay {
    display: none; /* 평소에는 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 모달 컨텐츠 (흰색 박스) */
.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    position: relative;
}

/* 모달 헤더 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.close-button {
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
}

.close-button:hover {
    color: #333;
}


/* 모달 바디 */
.benefit-box {
    background-color: #f9f9f9;
    border: 1px solid #e9e9e9;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.benefit-box strong {
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}
.benefit-box .emphasis {
    display: inline;
    color: #d9534f;
}

.modal-body h4 {
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 600;
}

/* 탈퇴 사유 테이블 */
.withdrawal-table {
    width: 100%;
    border-collapse: collapse;
}

.withdrawal-table th, 
.withdrawal-table td {
    padding: 6px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

.withdrawal-table th {
    background-color: #f7f7f7;
    width: 100px;
    font-weight: normal;
	font-size: 14px;
}

.withdrawal-table select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
}

.withdrawal-table input {
    width: 100%;
	height: 32px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.withdrawal-table textarea {
    width: 100%;
	height: 90px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
	margin-bottom: -12px;
}

/* 버튼 두 개를 감싸는 영역 */
.modal-buttons {
    text-align: center;
    margin-top: 25px;
    display: flex; /* 버튼들을 가로로 나란히 배치 */
    justify-content: center; /* 가운데 정렬 */
    gap: 8px; /* 버튼 사이의 간격 */
}

/* 모달 안의 모든 버튼에 대한 기본 스타일 */
.modal-buttons button {
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    margin: 0; /* 개별 마진 제거 */
    flex-grow: 0; /* 버튼이 늘어나지 않도록 설정 */
    min-width: 100px; /* 최소 너비 지정 */
}

/* 취소 버튼 (흰색) */
.modal-content .modal-buttons .btn-cancel {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    transition: background-color 0.2s;
}
.modal-content .modal-buttons .btn-cancel:hover {
    background-color: #f5f5f5;
}


/* 탈퇴 버튼 (검은색) */
.modal-content .modal-buttons .btn-submit {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    transition: opacity 0.2s;
}
.modal-content .modal-buttons .btn-submit:hover {
    opacity: 0.8;
}

.btn-submit {
    background-color: #000;
    color: #fff;
}

.btn-cancel {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
}


/* 모든 버튼의 공통 기본 스타일 */
/* 버튼 두 개를 감싸는 영역 */
.form-actions2 {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 10px;
}

/* ★ PC 버전에서는 이 스타일이 적용됩니다 ★ */
.form-actions-col2 {
    width: 260px; /* PC에서 버튼 길이 늘리기 */
}

/* 모든 버튼의 공통 기본 스타일 */
.form-actions2 button {
    width: 100%; /* 부모 div(.form-actions-col)의 너비를 따름 */
    padding: 14px 20px; /* PC 버튼 크기 조정 */
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    transition: all 0.2s ease;
}

/* 'Cancel' 버튼 스타일 (흰색) */
.form-actions2 .btn-cancel2 {
    background-color: #fff;
    color: #555;
    border-color: #ccc;
}

.form-actions2 .btn-cancel2:hover {
    background-color: #f8f8f8;
    border-color: #bbb;
}

/* 'Update Profile' 버튼 스타일 (검은색) */
.form-actions2 .btn-submit2 {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.form-actions2 .btn-submit2:hover {
    opacity: 0.8;
}


.my-swal {
    /* 기본 스타일 */
    width: 480px !important;
    padding: 1.5rem !important; /* 내부 여백 */
    border-radius: 1rem !important; /* 16px */
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 아이콘 (Success, Error, etc.) */
.my-swal .swal2-icon {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    /* 아이콘 애니메이션을 더 부드럽게 */
    transform-origin: center center;
}

/* 제목 */
.my-swal .swal2-title {
    font-size: 1.75rem !important; /* 28px */
    font-weight: 600 !important;
    color: #333 !important;
}

/* 내용 (텍스트/html) */
.my-swal .swal2-html-container {
    font-size: 1rem !important; /* 16px */
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* 버튼 컨테이너 */
.my-swal .swal2-actions {
    margin-top: 2rem !important;
    gap: 1rem !important; /* 버튼 사이 간격 */
}

/* 확인/취소 버튼 공통 스타일 */
.my-swal .swal2-confirm,
.my-swal .swal2-cancel {
    padding: 0.75rem 2rem !important;
    border-radius: 0.5rem !important; /* 8px */
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
}

/* 확인 버튼 (파란색) */
.my-swal .swal2-confirm {
    background-color: #007bff !important;
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3) !important;
}
.my-swal .swal2-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
}

/* 취소 버튼 (회색) */
.my-swal .swal2-cancel {
    background-color: #6c757d !important;
    box-shadow: 0 2px 10px rgba(108, 117, 125, 0.3) !important;
}
.my-swal .swal2-cancel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4) !important;
}


.sub-form2-field input[type="text"],
.sub-form2-field select,
.sub-form2-field textarea {
	width: 50%;
	max-width: 100%;
	/* 최대 너비 제한을 풀어 그리드에 꽉 차게 함 */
	padding: 2px 4px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;

}


.password-hint {
	font-size: 0.85em; /* 폰트를 약간 작게 (부모 요소 폰트의 85%) */
	color: #dc3545;   /* 빨간색 (부트스트랩의 danger 색상) */
	opacity: 0.7;     /* 약간 흐리게 (투명도) */
	margin-top: 0px;  /* input 태그와의 간격 */
	margin-bottom: 0; /* 단락 태그의 기본 하단 마진 제거 */
}

/* --- PC 스타일 (화면 너비가 992px 이상일 때 적용) --- */
@media (min-width: 992px) {

    /* 1) 2단 레이아웃: 열 기준으로 상단 정렬 */
    .container1 {
        display: grid;
        grid-template-columns: 220px 1fr;
        /* 왼쪽 고정폭, 오른쪽 가변 */
        gap: 60px;
        max-width: 1200px;
        margin: 30px auto;
        padding: 0 20px;
        align-items: start;
        /* 각 칼럼 상단 맞춤 */
    }

    /* 2) 사이드바 보이기 */
    .sidebar {
        display: block;
    }

    .main-content {
        /* 마진 겹침 방지 & 정확한 상단 맞춤 */
        padding-top: 0.01px;
    }

    /* 3) 제목들의 위쪽 여백을 통일 */
    .sidebar h2,
    .content-header,
    .content-header h1 {
        margin-top: 0 !important;
    }

    /* 사이드바 제목 */
    .sidebar h2 {
        font-size: 1.5rem;
        padding-bottom: 10px;
        border-bottom: 2px solid #333;
        margin: 0 0 8px;
        /* 위쪽 0이 핵심 */
    }

    /* 메인 영역 상단 바 & 타이틀 */
    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        text-align: left;
        padding-bottom: 12px;
        border-bottom: 1px solid #ddd;
        margin: 0;
        /* 위쪽 0이 핵심 */
    }

    .content-header h1 {
        font-size: 1.8rem;
        margin: 0px;
        /* 위쪽 0이 핵심 */
    }

    /* 4) 로그인 박스 너비 */
    .login-form-container1 {
        max-width: 400px;
        margin: 20px auto 0;
    }


    /* 바깥 박스 테두리 제거, 상단 라인만 */
    .sidebar nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        border: 0;
        border-top: 1px solid #cfd6de;
        /* 헤어라인 */
    }

    /* 각 항목: 얇은 구분선 + 우측 화살표 자리 확보 */
    .sidebar nav li {
        position: relative;
        /* 화살표 배치용 */
        display: block;
        padding: 8px 44px 8px 18px;
        /* 오른쪽 여백을 넉넉히(화살표) */
        border-bottom: 1px solid #e7ebf0;
        /* 얇은 구분선 */
        background: transparent;
        color: #333;
        font-size: 1rem;
        cursor: pointer;
    }

    /* 링크는 전체폭 클릭 가능 */
    .sidebar nav li a {
        color: inherit;
        display: block;
        width: 100%;
    }

    /* 우측 화살표(chevron) */
    .sidebar nav li::after {
        content: '›';
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        line-height: 1;
        color: #b5bdc7;
    }

    /* 활성 항목: 연한 블루 + 얇은 외곽선, 화살표/글자 흰색 */
    .sidebar nav li.active {
        background: #8fb9e0;
        /* 연한 블루 */
        border: 1px solid #7aa7d4;
        /* 활성 항목만 외곽선 */
        margin: -1px 0;
        /* 위 헤어라인과 자연스레 연결 */
        color: #fff;
        font-weight: 700;
        border-radius: 2px;
    }

    .sidebar nav li.active a {
        color: #fff;
    }

    .sidebar nav li.active::after {
        color: #fff;
    }


    .form-grid {
        grid-template-columns: 1fr 1fr;
        /* PC에서는 2열 */
    }

    /* 2열을 모두 차지해야 하는 필드 */
    .form-group.full-width {
        grid-column: 1 / -1;
    }


    .reg-main-content {
        /* margin: 40px auto; */
    }

    .reg-container {
        padding: 0;
        /* PC에서는 container 자체 여백 불필요 */
    }

    /* [추가] PC에서는 카드에 그림자, 둥근 모서리, 내부 여백을 다시 적용합니다. */
    .reg-section {
        padding: 5px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
        margin-bottom: 20px;
        border: none;
    }

    .reg-section:first-child {
        border-top: none;
    }

    .reg-info-grid {
        grid-template-columns: 1fr 1fr;
        /* PC: 2열 */
        gap: 3px;
    }

    .reg-info-item {
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }

    .reg-info-label {
        width: 120px;
        flex-shrink: 0;
        margin-bottom: 0;
    }


    .reg-form-actions {
        flex-direction: row;
        justify-content: center;
    }

    .reg-form-actions button {
        max-width: 240px;
    }


    /* --- 1. 새로운 그리드 컨테이너 스타일 --- */
    .form-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2개의 동일한 너비의 컬럼 생성 */
        grid-template-rows: auto auto;
        /* 행 높이는 콘텐츠에 맞게 자동 조절 */
        gap: 0 30px;
        /* 행 사이 간격은 0, 열 사이 간격은 30px */
        margin-top: -33px;
        /* 위쪽 여백을 음수(-)로 주어 위로 끌어올립니다. */
    }

    /* --- 2. 각 폼 그룹을 그리드 영역에 배치 --- */
    #form-group-number {
        grid-area: 1 / 1 / 2 / 2;
        /* 첫 번째 행, 첫 번째 열 */
    }

    #form-group-title {
        grid-area: 1 / 2 / 2 / 3;
        /* 첫 번째 행, 두 번째 열 */
    }

    #form-group-code {
        grid-area: 2 / 2 / 3 / 3;
        /* 두 번째 행, 두 번째 열 */
    }


    /* --- 3. 기존 폼 그룹 내부 스타일 수정 (이미지와 같이 라벨이 위로 가도록) --- */
    .reg-form-group {
        /* display: flex; 와 border-bottom 제거 또는 수정 */
        padding: 16px 0;
        border-bottom: none;
    }

    .reg-group-label {
        /* flex-basis 제거하고 일반 블록 요소처럼 동작하게 함 */
        font-weight: 500;
        color: #007bff;
        /* 이미지와 같이 파란색으로 변경 */
        margin-bottom: 0px;
        /* 라벨과 입력 필드 사이 간격 */
        display: block;
    }

    .sub-form-field {
        /* flex-basis 제거 */
    }

    /* (기존 폼 요소 스타일은 그대로 유지) */
    .sub-form-field input[type="text"],
    .sub-form-field select,
    .sub-form-field textarea {
        width: 100%;
        max-width: 100%;
        /* 최대 너비 제한을 풀어 그리드에 꽉 차게 함 */
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }


    /* (기존 폼 요소 스타일은 그대로 유지) */
    .sub-form1-field input[type="text"],
    .sub-form1-field select,
    .sub-form1-field textarea {
        width: 100%;
        max-width: 100%;
        /* 최대 너비 제한을 풀어 그리드에 꽉 차게 함 */
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-bottom: 5px;
    }

    .sub-form-field textarea {
        height: 100px;
        resize: vertical;
    }

    .sub-form-note {
        font-size: 14px;
        color: #666;
        margin-top: 8px;
        line-height: 1.4 !important;
        margin-top: 0px !important;
        margin-bottom: 5px !important;
    }


    .reg-fee2-table {
        margin-top: 10px;
        margin-bottom: 10px;
    }

}



/* 모바일에서 로그인 영역 위로 당기기 */
@media (max-width: 991.98px) {

    /* 헤더 아래 여백 축소 */
    .site-header {
        margin-bottom: 8px;
    }

    /* 컨테이너 상단 여백 거의 제거 */
    .container1 {
        padding-top: 0;
        /* 필요 시 더 끌어올리고 싶으면 -값을 -6 ~ -16px 사이로 조절 */
        margin-top: -36px;
    }

    /* 제목/빵 crumb 영역 여백 최소화 */
    .content-header {
        padding: 6px 0 10px;
        /* 위 6px, 아래 10px */
        margin: 0;
    }

    .content-header h1 {
        margin: 0 0 6px;
    }

    /* 로그인 블록 간격 더 축소 */
    .login-form-container1 {
        margin-top: 8px;
    }

    .login-icon {
        margin-bottom: 10px;
    }

    .login-prompt {
        margin-bottom: 12px;
    }


    .reg-section {
        /* [가장 중요] 섹션의 '위쪽' 외부 여백을 줄입니다. */
        /* 이 값을 줄일수록 이전 내용에 더 가까이 붙습니다. */
        margin-top: 20px;

        /* [가장 중요] 섹션의 '아래쪽' 외부 여백을 줄입니다. */
        /* 이 값을 줄일수록 하단 구분선(bar)이 위로 올라옵니다. */
        margin-bottom: 5px;

        /* 섹션의 위쪽 내부 여백 (제목과 섹션 상단 테두리 사이 간격) */
        padding-top: 0px;

        /* 섹션의 아래쪽 내부 여백 (내용과 섹션 하단 테두리/구분선 사이 간격) */
        padding-bottom: 10px;
    }

    .reg-header h1 {
        margin-top: 40px;
    }


    /* 모바일에서는 정렬 방향을 가로로 변경 */
    .reg-form-actions {
        flex-direction: row;
        /* 3. 모바일에선 가로로 배치 */
        gap: 10px;
        /* 버튼 사이의 가로 간격 */
    }

    /* 버튼을 감싸는 div(.reg-btn-wrap) 설정 */
    .reg-btn-wrap {
        flex: 1;
        /* 4. 중요! 각 div가 가로 공간을 1:1로 나눠 갖게 함 */
    }

    /* .reg-radio-group 클래스 내부에 있는 라벨들의 폰트만 조절합니다. */
    .reg-radio-group .reg-radio-item label {
        font-size: 14px;
        /* 원하시는 크기로 숫자를 조절하세요 */
    }


    /* * [핵심] PC 화면에서 사용되던 2단 그리드 레이아웃을
     * 모바일에서는 일반 블록(세로 쌓임) 형태로 강제 변경합니다.
    */
    .form-grid-container {
        display: block;
    }

    /* * 그리드가 해제되면서 겹쳐 보일 수 있는 각 폼 그룹 사이에
     * 충분한 세로 간격을 줍니다.
    */
    .form-grid-container .reg-form-group:not(:last-child) {
        margin-bottom: 25px;
    }

    /* ============ [최종 수정본] 폼 스타일 강제 적용 ============ */

    /* --- 1. 입력창(input, select) 스타일 --- */
    .sub-form-field input[type="text"],
    .sub-form-field select,
    .sub-form1-field input[type="text"] {
        width: 100% !important;
        /* ★ 가로 폭을 다시 100%로 강제합니다. */
        height: 33px;
        /* ★ 다른 곳에 고정된 높이 값이 있다면 무시합니다. */
        padding: 5px 12px !important;
        /* ★ 높이를 더 확실히 줄이기 위해 5px로 수정하고 강제 적용합니다. */

        border: 1px solid #ced4da !important;
        border-radius: 5px !important;
        font-size: 15px !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* --- Paper Title(textarea) 스타일 --- */
    .sub-form-field textarea {
        width: 100% !important;
        /* ★ 가로 폭을 다시 100%로 강제합니다. */
        padding: 10px 12px !important;
        /* 여러 줄 입력창은 기존 높이 유지 */

        border: 1px solid #ced4da !important;
        border-radius: 5px !important;
        font-size: 15px !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

	.sub-form-field textarea {
        height: 80px;
        resize: vertical;
    }

    /* --- 연속된 5개 입력창 사이 간격 --- */
    .sub-form1-field {
        margin-bottom: 6px !important;
    }

    /* --- 입력창 포커스 효과 --- */
    .sub-form-field input[type="text"]:focus,
    .sub-form-field select:focus,
    .sub-form-field textarea:focus,
    .sub-form1-field input[type="text"]:focus {
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 0.25) !important;
    }

    /* --- 안내 문구 스타일 --- */
    .sub-form-note {
        font-size: 13px !important;
        color: #6c757d !important;
        margin-top: 8px !important;
        line-height: 1.4 !important;
        margin-top: 0px !important;
        margin-bottom: 5px !important;
    }

    /* 라벨 아래쪽 여백(margin)을 줄여 입력창을 위로 올립니다. */
    .reg-group-label {
        margin-bottom: -2px !important;
    }


    /* 스크롤바가 생기는 원인이었던 최소 너비(min-width) 강제 설정만 해제합니다. */
    /* 나머지 디자인은 PC와 동일하게 유지됩니다. */
    .reg-fee1-table {
        min-width: 0;
    }



    /* 라벨(Name, Department 등) 아래 여백을 최소화하여 값을 위로 올립니다. */
    .reg-info-label {
        margin-bottom: -4px !important;
    }

    .reg-info-grid {
        row-gap: 7px;
        /* 세로 간격을 기존 15px에서 10px으로 줄입니다. */
    }

    .reg-info-value {
        font-size: 15px !important;
        /* 글자 크기를 기존 16px에서 15px로 약간 줄입니다. */
    }


    /* 1. 제목(th)과 내용(td)을 세로로 쌓이도록 변경 */
    .reg-fee-table1 {
        width: 100%;
        /* 테이블 너비를 100%로 설정 */
        border-collapse: collapse;
        /* 테두리 선을 한 줄로 합칩니다. */
        border-top: 2px solid #ddd;
        /* 테이블 위쪽에 두꺼운 선 추가 */
    }

    .reg-fee-table1 th,
    .reg-fee-table1 td {
        display: block;
        /* 셀을 한 줄 전체를 차지하는 블록 요소로 변경 */
        width: 100%;
        /* 너비를 100%로 꽉 채움 */
        text-align: left;
        /* 텍스트 왼쪽 정렬 */
    }

    /* 2. 쌓였을 때 디자인 다듬기 */
    .reg-fee-table1 th {
        /* 제목 칸은 위쪽 테두리를 없애고 아래쪽에만 구분선을 둡니다. */
        border-top: none;
        border-bottom: 1px solid #ddd;
    }

    .reg-fee-table1 td {
        /* 내용 칸은 각 항목을 구분하는 두꺼운 하단선을 줍니다. */
        border-bottom: 2px solid #ccc;
    }

    /* 테이블의 첫 번째 행의 제목(th) 위에는 구분선이 없도록 처리 */
    .reg-fee-table1 tr:first-child th {
        border-top: none;
    }

    /* 테이블의 마지막 행의 내용(td) 아래에는 구분선이 없도록 처리 */
    .reg-fee-table1 tr:last-child td {
        border-bottom: none;
    }


    /* breadcrumbs 경로(Home > 마이페이지 > 로그인) 숨기기 */
    .breadcrumbs {
        display: none;
    }


    /* .content-header 바로 다음에 오는 hr 태그를 숨깁니다. */
    .content-header~hr {
        display: none;
    }

    .reg-fee2-table {
        margin-bottom: 10px;
    }

    .reg-table-wrapper {
        overflow-x: auto;
        /* 내용이 컨테이너보다 클 경우 가로 스크롤바를 생성합니다. */
        -webkit-overflow-scrolling: touch;
        /* iOS에서 부드러운 스크롤 효과를 줍니다. */
    }

    .password-fields-container {
        grid-template-columns: 1fr;
        /* 1개의 열로 변경하여 세로로 쌓이게 합니다. */
    }


	/* 각 버튼 컬럼이 공간을 균등하게 나눠 갖도록 설정 */
    .form-actions-col2 {
        flex: 1; /* flex-grow: 1의 의미로, 두 버튼이 남는 공간을 똑같이 나눠 가짐 */
        width: auto; /* width: 100% 설정을 해제하고 flex 속성에 맞김 */
    }
    
    /* 좁은 화면에서 텍스트가 잘 보이도록 패딩과 폰트 크기 미세 조정 */
    .form-actions2 button {
        padding: 12px 10px;
        font-size: 14px;
        white-space: nowrap; /* 버튼 텍스트가 줄바꿈되지 않도록 설정 */
    }


	.my-swal {
        width: 90% !important; /* 화면 너비의 90% */
        padding: 1.25rem !important;
    }

    .my-swal .swal2-title {
        font-size: 1.5rem !important; /* 24px */
    }

    .my-swal .swal2-html-container {
        font-size: 0.95rem !important; /* 15.2px */
    }

    .my-swal .swal2-actions {
        flex-direction: column; /* 버튼을 세로로 쌓기 */
        width: 100%;
    }

    .my-swal .swal2-confirm,
    .my-swal .swal2-cancel {
        width: 100%;
    }


}