/* ========================================================================
   mypage_company_info.css
   Styles for:
     #mypage_company_info          - 기업 회원정보 (기업 정보 + 비밀번호 변경)
     #mypage_company_password_verify - 비밀번호 변경 전 이메일 인증
     #mypage_company_password        - 새 비밀번호 입력
     #mypage_company_password_complete - 변경 완료
   ======================================================================== */


/* ========================================================================
   #mypage_company_info  - 기업 정보 카드 (2 섹션 구조)
   ======================================================================== */

/* 카드 컨테이너 */
#mypage_company_info .ci-card {
    background-color: var(--color-static-white, #fff);
    border: 1px solid var(--color-neutral-300, #dde2eb);
    border-radius: 8px;
    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 섹션 (각 구분 영역) */
#mypage_company_info .ci-card__section {
    display: flex;
    flex-direction: column;
}

#mypage_company_info .ci-card__section--bottom-border {
    border-bottom: 1px solid var(--color-neutral-300, #dde2eb);
}

/* 섹션 헤더 (타이틀 + 버튼) */
#mypage_company_info .ci-card__section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    overflow: hidden;
}

#mypage_company_info .ci-card__section-title {
    flex: 1;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.16px;
    color: var(--color-neutral-800, #484d5e);
    margin: 0;
}

/* 섹션 바디 (폼 필드 영역) */
#mypage_company_info .ci-card__section-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 36px 40px 80px;
}

/* 2열 입력 행 */
#mypage_company_info .ci-input-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

#mypage_company_info .ci-input-row .ci-input-field {
    flex: 1;
    min-width: 0;
}

/* 입력 필드 그룹 */
#mypage_company_info .ci-input-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

/* 라벨 (기본: 활성 상태) */
#mypage_company_info .ci-input-field__label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #1e1e1e;
    margin: 0;
}

/* 라벨 - locked 상태 (gray) */
#mypage_company_info .ci-input-field--locked .ci-input-field__label {
    color: #b3b3b3;
}

/* 인풋 기본 */
#mypage_company_info .ci-input-field__input {
    width: 100%;
    min-width: 120px;
    padding: 12px 16px;
    background-color: var(--color-static-white, #fff);
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #1e1e1e;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#mypage_company_info .ci-input-field__input::placeholder {
    color: #b3b3b3;
}

#mypage_company_info .ci-input-field__input:focus:not([disabled]):not([readonly]) {
    border-color: var(--color-primary-600, #4165ff);
}

/* 인풋 - locked(disabled) 상태 : 기업명·이메일이 수정 모드에서 받는 스타일 */
#mypage_company_info .ci-input-field__input--locked,
#mypage_company_info .ci-input-field__input[disabled] {
    background-color: #d9d9d9;
    border-color: #b3b3b3;
    color: #b3b3b3;
    cursor: not-allowed;
}

/* ---- 헤더 버튼 (소형) ---- */
#mypage_company_info .ci-btn {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.14px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

/* outline 버튼 (수정, 변경하기) */
#mypage_company_info .ci-btn--outline {
    background-color: var(--color-static-white, #fff);
    border: 1px solid var(--color-neutral-300, #dde2eb);
    color: var(--color-neutral-900, #303342);
}

#mypage_company_info .ci-btn--outline:hover {
    background-color: var(--color-neutral-100, #f2f6fa);
}

/* primary 버튼 (수정 완료) */
#mypage_company_info .ci-btn--primary {
    background-color: var(--color-primary-600, #4165ff);
    border: none;
    color: var(--color-static-white, #fff);
}

#mypage_company_info .ci-btn--primary:hover {
    background-color: var(--color-primary-700, #2c48d9);
}


/* ========================================================================
   #mypage_company_password_verify  - 비밀번호 변경 이메일 인증
   (mypage_lab_info.css 의 #mypage_lab_info 섹션을 셀렉터만 바꿔 이식)
   ======================================================================== */

/* 안내 박스 */
#mypage_company_password_verify .info-box {
    background-color: var(--color-neutral-100, #f2f6fa);
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

#mypage_company_password_verify .info-box__text {
    flex: 1;
    min-width: 291px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.14px;
    color: #484d5e;
    margin: 0;
}

/* 입력 필드 */
#mypage_company_password_verify .input-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

#mypage_company_password_verify .input-field__label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #1e1e1e;
    margin: 0;
}

#mypage_company_password_verify .input-field__input {
    width: 100%;
    min-width: 120px;
    padding: 12px 16px;
    background-color: var(--color-static-white, #fff);
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #1e1e1e;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

#mypage_company_password_verify .input-field__input::placeholder {
    color: #b3b3b3;
}

#mypage_company_password_verify .input-field__input:focus {
    border-color: var(--color-primary-600, #4165ff);
}

/* 버튼 */
#mypage_company_password_verify .btn-outline {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: var(--color-static-white, #fff);
    border: 1px solid var(--color-neutral-300, #dde2eb);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.14px;
    color: var(--color-neutral-900, #303342);
    white-space: nowrap;
    transition: all 0.15s ease;
}

#mypage_company_password_verify .btn-outline:hover {
    background-color: var(--color-neutral-100, #f2f6fa);
}

#mypage_company_password_verify .btn-primary {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: var(--color-primary-600, #4165ff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.14px;
    color: var(--color-static-white, #fff);
    white-space: nowrap;
    transition: all 0.15s ease;
}

#mypage_company_password_verify .btn-primary:hover {
    background-color: var(--color-primary-700, #2c48d9);
}

#mypage_company_password_verify .btn-dark {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: #102540;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.14px;
    color: var(--color-static-white, #fff);
    white-space: nowrap;
    transition: all 0.15s ease;
}

#mypage_company_password_verify .btn-dark:hover {
    opacity: 0.9;
}

/* 인증 정보 (타이머 + 안내) */
#mypage_company_password_verify .verify-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.12px;
}

#mypage_company_password_verify .verify-info__timer-row {
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
    white-space: nowrap;
}

#mypage_company_password_verify .verify-info__timer-label {
    color: #484d5e;
}

#mypage_company_password_verify .verify-info__timer-value {
    color: #f13030;
}

#mypage_company_password_verify .verify-info__desc {
    color: var(--color-neutral-700, #6c7286);
    width: 100%;
    margin: 0;
}

#mypage_company_password_verify .verify-info__desc p {
    margin: 0;
}

/* 에러 상태 */
#mypage_company_password_verify .input-field__input--error {
    border-color: #900b09;
}

#mypage_company_password_verify .input-field__error {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #900b09;
    margin: 0;
    white-space: nowrap;
}

/* State step 표시 제어 */
#mypage_company_password_verify .state-step {
    display: none;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    width: 100%;
}

#mypage_company_password_verify .state-step--active {
    display: flex;
}


/* ========================================================================
   #mypage_company_password  - 새 비밀번호 입력
   ======================================================================== */

#mypage_company_password .mypage-card__body {
    gap: 16px;
}

#mypage_company_password .password-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

#mypage_company_password .input-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

#mypage_company_password .input-field__label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #1e1e1e;
    margin: 0;
}

#mypage_company_password .input-field__input {
    width: 100%;
    min-width: 120px;
    padding: 12px 16px;
    background-color: var(--color-static-white, #fff);
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #1e1e1e;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

#mypage_company_password .input-field__input::placeholder {
    color: #b3b3b3;
}

#mypage_company_password .input-field__input:focus {
    border-color: var(--color-primary-600, #4165ff);
}

#mypage_company_password .input-field__input--error {
    border-color: #900b09;
}

#mypage_company_password .input-field__error {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #900b09;
    margin: 0;
    white-space: nowrap;
}

#mypage_company_password .btn-primary {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: var(--color-primary-600, #4165ff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.14px;
    color: var(--color-static-white, #fff);
    white-space: nowrap;
    transition: all 0.15s ease;
}

#mypage_company_password .btn-primary:hover {
    background-color: var(--color-primary-700, #2c48d9);
}


/* ========================================================================
   #mypage_company_password_complete  - 변경 완료 메시지
   ======================================================================== */

#mypage_company_password_complete .mypage-card__body {
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#mypage_company_password_complete .complete-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#mypage_company_password_complete .complete-message__inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

#mypage_company_password_complete .complete-message__icon {
    width: 56px;
    height: 56px;
}

#mypage_company_password_complete .complete-message__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

#mypage_company_password_complete .complete-message__text {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-neutral-900, #303342);
    text-align: center;
    white-space: nowrap;
}

#mypage_company_password_complete .complete-message__text p {
    margin: 0;
}

#mypage_company_password_complete .btn-outline {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: var(--color-static-white, #fff);
    border: 1px solid var(--color-neutral-300, #dde2eb);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.14px;
    color: var(--color-neutral-900, #303342);
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s ease;
}

#mypage_company_password_complete .btn-outline:hover {
    background-color: var(--color-neutral-100, #f2f6fa);
}