/* =============================================
   Flavor Social Login + Theme My Login 스타일
   메인컬러: #004069 / 폰트: Noto Sans KR
   ============================================= */

/* ── TML 전체 폼 컨테이너 ── */
.tml {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    max-width: 420px;
    margin: 40px auto;
    padding: 40px 36px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── 라벨 ── */
.tml .tml-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    letter-spacing: -0.02em;
}

/* ── 입력 필드 ── */
.tml .tml-field {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9dfe5;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #222;
    background: #f8fafb;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.tml .tml-field:focus {
    border-color: #004069;
    box-shadow: 0 0 0 3px rgba(0, 64, 105, 0.1);
    background: #fff;
}

.tml .tml-field::placeholder {
    color: #aab3bd;
}

/* ── 필드 간격 ── */
.tml .tml-field-wrap {
    margin-bottom: 16px;
}

/* ── 체크박스 (로그인 상태 유지) ── */
.tml .tml-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #004069;
    vertical-align: middle;
    margin-right: 4px;
}

.tml .tml-checkbox + .tml-label {
    display: inline;
    font-size: 13px;
    color: #666;
    vertical-align: middle;
}

/* ── 제출 버튼 ── */
.tml .tml-button {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 8px;
    background: #004069;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    letter-spacing: -0.02em;
}

.tml .tml-button:hover {
    background: #003050;
}

.tml .tml-button:active {
    transform: scale(0.99);
}

/* ── 하단 링크 (회원가입 / 비밀번호 찾기) ── */
.tml .tml-links {
    list-style: none;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #eef1f4;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.tml .tml-links li {
    margin: 0;
}

.tml .tml-links a {
    color: #004069;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tml .tml-links a:hover {
    color: #002a45;
    text-decoration: underline;
}

/* ── 에러/메시지 ── */
.tml .tml-alerts {
    margin-bottom: 16px;
}

.tml .tml-errors,
.tml .tml-messages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tml .tml-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    color: #991b1b;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: none;
}

.tml .tml-message {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #004069;
    border-radius: 6px;
    color: #1e3a5f;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: none;
}

/* ── 비밀번호 강도 ── */
#pass-strength-result {
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

/* ── 설명 텍스트 ── */
.tml .tml-description {
    font-size: 12px;
    font-style: normal;
    color: #8896a6;
    margin: 4px 0 0;
}

/* ── 대시보드 (로그인 상태) ── */
.tml .tml-dashboard {
    text-align: center;
}

.tml .tml-dashboard-avatar img {
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tml .tml-dashboard-greeting {
    font-size: 16px;
    color: #222;
    margin: 16px 0;
}

.tml .tml-dashboard-links {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.tml .tml-dashboard-links a {
    color: #004069;
    text-decoration: none;
    font-size: 14px;
}

.tml .tml-dashboard-links a:hover {
    text-decoration: underline;
}


/* =============================================
   소셜 로그인 버튼 (TML 폼 하단에 배치)
   ============================================= */

.fsl-social-buttons {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 36px 0;
    text-align: center;
    box-sizing: border-box;
}

/* 구분선 (SNS 연동 로그인을 원하신다면) */
.fsl-social-divider {
    position: relative;
    margin: 24px 0 20px;
    text-align: center;
    border: none;
    height: 1px;
    background: #eef1f4;
}

.fsl-social-divider span {
    background: #fff;
    padding: 0 14px;
    font-size: 12px;
    color: #8896a6;
    position: relative;
    top: -8px;
    letter-spacing: -0.02em;
}

/* 소셜 아이콘 버튼 (원형) */
.fsl-social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
}

.fsl-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    border: none;
}

.fsl-icon-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.fsl-icon-btn:active {
    transform: translateY(0);
}

/* 카카오 아이콘 */
.fsl-icon-btn-kakao {
    background-color: #FEE500;
}

.fsl-icon-btn-kakao::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191919' d='M12 3C6.48 3 2 6.36 2 10.44c0 2.61 1.74 4.91 4.36 6.22l-1.12 4.15c-.1.36.31.65.62.44l4.94-3.26c.39.04.79.06 1.2.06 5.52 0 10-3.36 10-7.5S17.52 3 12 3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 네이버 아이콘 */
.fsl-icon-btn-naver {
    background-color: #03C75A;
}

.fsl-icon-btn-naver::before {
    content: 'N';
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
}

/* 구글 아이콘 */
.fsl-icon-btn-google {
    background-color: #FFFFFF;
    border: 1px solid #dadce0;
}

.fsl-icon-btn-google::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%2334A853' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%23FBBC05' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 하단 안내문구 */
.fsl-register-guide {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eef1f4;
    font-size: 13px;
    color: #8896a6;
    text-align: center;
}

.fsl-register-guide a {
    color: #004069;
    font-weight: 600;
    text-decoration: none;
}

.fsl-register-guide a:hover {
    text-decoration: underline;
}

/* 기존 풀사이즈 버튼 (숨김, 아이콘만 사용) */
.fsl-btn {
    display: none;
}

.fsl-social-buttons .fsl-social-title {
    display: none;
}

/* ── 헤더 메뉴 로그인/로그아웃/마이페이지 ── */
.fsl-header-menu > a {
    font-family: "Noto Sans KR", Sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 15px !important;
}

/* 성형 메인 헤더 (어두운 배경) → 흰색 */
.header_fixed.surgery_header .fsl-header-menu > a,
.header_fixed.surgery_header2 .fsl-header-menu > a {
    color: #FFFFFF !important;
}
.header_fixed.surgery_header .fsl-header-menu > a:hover,
.header_fixed.surgery_header2 .fsl-header-menu > a:hover {
    color: #1D24CA !important;
}

/* 성형 상세 서브 헤더 (밝은 배경) → 파란색 */
.sub_header.surgery_header .fsl-header-menu > a,
.sub_header.surgery_header2 .fsl-header-menu > a {
    color: #004069 !important;
}
.sub_header.surgery_header .fsl-header-menu > a:hover,
.sub_header.surgery_header2 .fsl-header-menu > a:hover {
    color: #1D24CA !important;
}

/* 피부과 헤더 → 검정색 */
.skin_header .fsl-header-menu > a {
    color: #000000 !important;
}
.skin_header .fsl-header-menu > a:hover {
    color: #F5740F !important;
}

/* ── TML 페이지 breadcrumb 배너 숨김 ── */
body.tml-action .xs-breadcrumb {
    display: none !important;
}

/* ── TML 페이지 최소 높이 ── */
body.tml-action .home-full-width-content {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.tml-action .home-full-width-content .builder-content {
    width: 100%;
}

/* ── 로그인/회원가입 페이지: TML 하단 링크 숨김 (소셜 영역에서 표시) ── */
body.tml-action-login .tml .tml-links,
body.tml-action-register .tml .tml-links {
    display: none !important;
}

/* ── 관리자 우회: ?fsl_admin=1 사용 시 폼 표시 ── */
body.fsl-show-form .tml form,
body.fsl-show-form .tml .tml-links {
    display: block !important;
}
body.fsl-show-form .fsl-social-buttons {
    display: none !important;
}

/* ── 모바일/태블릿: 사이드 메뉴 열릴 때 → 검정색 ── */
@media (max-width: 1024px) {
    .header_fixed.surgery_header .fsl-header-menu > a,
    .header_fixed.surgery_header2 .fsl-header-menu > a,
    .sub_header.surgery_header .fsl-header-menu > a,
    .sub_header.surgery_header2 .fsl-header-menu > a,
    .skin_header .fsl-header-menu > a,
    .fsl-header-menu > a {
        color: #000000 !important;
        padding: 10px 15px !important;
    }
}

/* =============================================
   반응형
   ============================================= */

/* ── 회원가입 폼 디자인 보정 ── */
/* TML 폼 내 모든 텍스트/패스워드 input 강제 100% */
.tml input.input,
.tml input.tml-field,
.tml input[type="text"],
.tml input[type="password"],
.tml input[type="email"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #d9dfe5 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    color: #222 !important;
    background: #f8fafb !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.tml input[type="submit"] {
    min-width: auto !important;
    background: #004069 !important;
    color: #fff !important;
    cursor: pointer;
}

.tml input[type="checkbox"] {
    width: auto !important;
    min-width: auto !important;
    max-width: auto !important;
    padding: 0 !important;
}

.tml input.input:focus,
.tml input.tml-field:focus,
.tml input[type="text"]:focus,
.tml input[type="password"]:focus,
.tml input[type="email"]:focus {
    border-color: #004069 !important;
    box-shadow: 0 0 0 3px rgba(0, 64, 105, 0.1) !important;
    background: #fff !important;
}

.tml .tml-label .required {
    color: #dc2626;
    font-size: 12px;
}

/* 가입 확인 메시지 */
body.tml-action-register .tml .tml-description {
    font-size: 13px;
    color: #8896a6;
    margin: 8px 0 16px;
}

/* 회원가입 하단 링크 표시 (로그인으로 돌아가기) */
body.tml-action-register .tml .tml-links {
    display: flex !important;
}

/* 오류 메시지 통일 */
body.tml-action-register .tml .tml-error {
    font-size: 13px;
    padding: 10px 14px;
}

@media (max-width: 520px) {
    .tml {
        margin: 20px 16px;
        padding: 28px 20px;
        border-radius: 12px;
    }
}

/* =============================================
   소셜 개인정보동의 페이지
   ============================================= */
.fsl-agree-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.fsl-agree-box {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 36px;
    font-family: 'Noto Sans KR', sans-serif;
}

.fsl-agree-title {
    font-size: 20px;
    font-weight: 700;
    color: #004069;
    margin: 0 0 8px;
}

.fsl-agree-desc {
    font-size: 13px;
    color: #8896a6;
    margin: 0 0 24px;
}

.fsl-agree-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    color: #991b1b;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.fsl-agree-field {
    margin-bottom: 16px;
}

.fsl-agree-field label {
    display: block;
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
}

.fsl-agree-field input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9dfe5;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #222;
    background: #f8fafb;
    box-sizing: border-box;
    outline: none;
}

.fsl-agree-field input[type="text"]:focus {
    border-color: #004069;
    box-shadow: 0 0 0 3px rgba(0,64,105,0.1);
    background: #fff;
}

.fsl-agree-field input[disabled] {
    color: #aab3bd;
    cursor: not-allowed;
}

.fsl-agree-privacy {
    background: #f8fafb;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.fsl-agree-privacy h4 {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px;
}

.fsl-agree-privacy-content {
    max-height: 120px;
    overflow-y: auto;
    font-size: 12px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 12px;
    padding-right: 4px;
}

.fsl-agree-privacy-content p {
    margin: 0 0 6px;
}

.fsl-agree-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.fsl-agree-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #004069;
    flex-shrink: 0;
}

.fsl-agree-btn {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 8px;
    background: #004069;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease;
}

.fsl-agree-btn:hover {
    background: #003050;
}

.required {
    color: #dc2626;
    font-size: 12px;
}