/* /resources/css/auth/myInfoModal.css */

body.modal-open {
    overflow: hidden; /* 스크롤바 숨기기 */
    /* width: 100%; /* 경우에 따라 스크롤바 제거로 인한 너비 점프 현상 방지 */
    /* position: fixed; /* iOS 등 모바일에서 스크롤 잠금이 제대로 안될 때 추가 */
    /* top: 0; left: 0; right: 0; bottom: 0; /* position: fixed와 함께 사용 */
}

/* 모달 오버레이 자체는 스크롤 가능하게 할 수 있습니다 (모달 내용이 길 때) */
.modal-overlay {
    overflow-y: auto; /* 모달 내용이 길면 모달 자체는 스크롤되도록 */
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}

.myinfo-modal-container {
    background: #f9fbfd; /* 메인 배경과 어울림 */
    border-radius: 13px;
    box-shadow: 0 6px 32px rgba(44,60,90,.18);
    width: 92vw; max-width: 580px;
    padding: 18px 36px 32px 36px;
    display: flex; flex-direction: column;
    max-height: 90vh;
}

/* 아코디언(내 정보 섹션 구분시) */
.myinfo-accordion {
    width: 100%;
    overflow-y: auto;
    padding-right: 10px;
}
.accordion-item { border-bottom: 1px solid #e3e8ee; }
.accordion-item:last-child { border-bottom: none; }

.accordion-header {
    width: 100%;
    /* background-color: transparent; */
    background: #ddf0ff;
    border: none; border-radius: 8px;
    padding: 20px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 500;
    color: #334269;
    transition: background 0.2s;
}
.accordion-header:hover {
    background: #ddf0ff;
}
.accordion-header .accordion-arrow {
    width: 20px;
    transition: transform 0.3s;
}
.accordion-item.active .accordion-header .accordion-arrow {
    transform: rotate(180deg);
}
.accordion-content {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
    padding: 0 20px;
}
.accordion-item.active .accordion-content {
    padding: 10px 20px 30px 20px;
}

/* ===== 입력 폼 영역 ===== */
.myinfo-row { margin-bottom: 19px; }
.myinfo-row .modal-input-label {
    font-size: 1.03rem;
    font-weight: 400;
    color: #556188;
    margin-bottom: 7px;
    display: block;
}

/* 읽기전용 필드 */
.input-field[readonly],
.email-select:disabled {
    background: #f4f6f9;
    border-color: #8993a4;
    color: #8993a4;
    cursor: default;
}
.email-select:disabled {
    /* background-image: url('/resources/images/comm/icon/arrow_down_disabled.svg'); */ /* 비활성화용 화살표 아이콘 (파일이 없다면 생성 필요) */
    background: #f4f6f9 url('/resources/images/comm/icon/arrow_down.svg') no-repeat right 2px center/32px 24px;
    opacity: 0.7; /* 아이콘이 없다면 전체적으로 투명도 조절 */
}

/* 입력 메시지 공통 (중복방지용) */
/* .input-msg { margin-top: 2px; font-size: 0.77em; font-weight: 300; min-height: 13px; color: #888; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input-msg.error { color: #dc3545; }
.input-msg.ok    { color: #348bee; }
.input-msg.success { color: #af75fa; }
.input-msg.info { color: #6a7682; } */

/* 버튼/액션 그룹 */
.action-buttons {
    display: flex; justify-content: flex-end;
    gap: 15px; /* margin-top: 25px;  */
    font-size: 1.05rem; font-weight: 400;
}
/* .btn-primary   { background: #348bee; color: #fff; border: none; }
.btn-primary:hover { background: #256ac0; }
.btn-secondary { background: #6c757d; color: #fff; }
.btn-danger    { background: #dc3545; color: #fff; }
.btn-tertiary  { background: #f6f2fe; color: #333; border: 1px solid #d7cfff; }
.btn:disabled  { opacity: 0.45; cursor: not-allowed; }
.hidden { display: none; }
 */
 
.btn-secondary { background: #6c757d; color: #fff; }
.btn-myInfo-edit,
.btn-myInfo-cancle { background: #348bee; color: #fff; width: 100px; height: 32px; font-size: 1.03rem;}
.btn-myInfo-save { background: linear-gradient(90deg, #8a50f7 30%, #397af3 100%); color: #fff; width: 100px; height: 32px; font-size: 1.03rem;}
.btn-myInfo-save:disabled {
  /* background: #eee;
  color: #aaa; */
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-myInfo-pw { background: linear-gradient(90deg, #8a50f7 30%, #397af3 100%); color: #fff; width: 120px; height: 32px; font-size: 1.03rem;}
.btn-myInfo-pw:hover {
  background: linear-gradient(90deg, #397af3 30%, #8a50f7 100%);
}
.btn-myInfo-pw:disabled,
.btn-myInfo-leave:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-myInfo-leave { background: #dc3545; color: #fff; width: 100px; height: 32px; font-size: 1.03rem;}
 
.btn-info-basic {
  height: 30px;background: none; border: none; color: #348bee; font-size: 1.05rem; font-weight: 400;
  cursor: pointer; text-decoration: none; padding: 0 8px; margin-top: 12px; border-radius: 25px;
  border-bottom: 1.5px solid #348bee;
  box-shadow: 0 2px 5px #8a50f7; text-underline-offset: 3px; width: 130px; transition: color .14s;
}
.btn-info-basic:hover  {
  color: #8a50f7; text-decoration-color: #8a50f7; text-decoration-thickness: 1.5px;
}


/* 약관 동의 토글(커스텀 스위치) */
.terms-row {
    display: flex; justify-content: space-between; align-items: center; padding: 13px 0;
    background: #f6f2fe; border-radius: 8px; margin-bottom: 12px;
}
.switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #e3e8ee; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 4px; bottom: 3.5px; background: #fff; transition: .4s; }
input:checked + .slider { background: #348bee; }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* 회원탈퇴 영역(경고) */
.leave-warning {
    background: #fef7f1;
    border-left: 4px solid #ffb156;
    padding: 15px;
    margin-bottom: 18px;
    font-size: 0.91rem;
    color: #b47513;
}
/* myInfoModal.css 또는 관련 CSS 파일 */

.myinfo-flex-row {
    display: flex;
    flex-wrap: wrap; /* 필요에 따라 줄 바꿈 허용 */
    gap: 20px; /* 각 컬럼 사이의 간격 */
    /* justify-content: space-between; 또는 flex-start 등 필요에 따라 조정 */
}

.myinfo-col {
    flex: 1; /* 가용한 공간을 균등하게 분배 */
    min-width: 250px; /* 최소 너비 설정 (모바일 반응형 고려) */
    /* 필요에 따라 추가 스타일 (예: padding, margin) */
}

/* 기존 .myinfo-row 스타일과 충돌하지 않도록 주의 */
.myinfo-row {
    margin-bottom: 15px; /* 기존 행 간격 유지 */
}

/* myinfo-col 내부의 input-field와 input-msg에 대한 정렬 */
.myinfo-col .modal-input-label {
    display: block;
    margin-bottom: 5px;
}

.myinfo-col .input-field {
    width: 100%; /* 부모 컬럼 너비에 맞춤 */
}

.myinfo-col .input-msg {
    margin-top: 5px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 모바일 화면 등 작은 화면에서는 컬럼이 한 줄에 하나씩 오도록 */
@media (max-width: 768px) {
    .myinfo-flex-row {
        flex-direction: column;
        gap: 0; /* 컬럼 간격 제거 */
    }
    .myinfo-col {
        min-width: unset; /* 최소 너비 제한 해제 */
        width: 100%; /* 전체 너비 사용 */
        margin-bottom: 15px; /* 각 컬럼 하단에 간격 추가 */
    }
    .myinfo-col:last-child {
        margin-bottom: 0;
    }
}
/* 기타 특화 디자인은 필요 시 아래에 추가 */