/* [디자인 테마] 웜 코랄 & 에어비앤비 스타일 */

/* 1. 마법의 한 줄 추가: 모든 요소가 패딩을 포함해 크기가 계산되도록 강제합니다. (삐져나옴 완벽 해결) */
* {
    box-sizing: border-box;
}

:root {
    --primary: #FF7E67;
    --secondary: #FFD180;
    --text: #222222; /* 에어비앤비 스타일의 진한 먹색 텍스트 */
    --bg: #FAFAFA;
    --white: #FFFFFF;
    --brown: #6D4C41;
}

/* 폰트 변경: 프리텐다드 우선 적용 */
body { margin: 0; padding: 0; background-color: var(--bg); font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; color: var(--text); }

.container { max-width: 500px; margin: 0 auto; background: var(--white); min-height: 100vh; position: relative; padding-bottom: 0; box-shadow: 0 0 15px rgba(0,0,0,0.03); display: flex; flex-direction: column; }
.content-area { flex: 1; }

/* 헤더 전체를 코랄 핑크색(primary)으로 채우기 */
header { background: var(--primary); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; border-bottom: none; }

/* 5.jpg 원본 로고 직접 노출 (배경 투명처리) */
.logo-btn {
    display: inline-block;
    width: 120px;
    height: 35px;
    background-image: url('5.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: transparent; 
    cursor: pointer;
    border: none;
    padding: 0;
}

/* 핑크색 헤더에 어울리는 반투명 화이트 스위치 버튼 */
.header-switch-btn { background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.5); padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; cursor: pointer; backdrop-filter: blur(4px); transition: all 0.2s; }
.header-switch-btn:active { background: rgba(255, 255, 255, 0.4); transform: scale(0.95); }

.screen { display: none; padding: 25px; animation: fadeIn 0.4s; }
.active { display: block; }

#chat-room-screen.active { display: flex; flex-direction: column; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 상단 탭 메뉴 스타일 (에어비앤비 스타일 블랙 밑줄) */
.tab-menu { 
    display: flex; 
    align-items: center; /* 세로 중앙 정렬 */
    border-bottom: 1px solid #eee; 
    margin: -25px -25px 0 -25px; 
    background: white; 
    position: sticky; 
    top: 65px; 
    z-index: 10; 
    padding: 0 20px; /* 양쪽 여백 넉넉하게 */
    gap: 10px; /* 탭들 사이의 숨통 트기 */
}

.tab-item { 
    flex: 1; /* 글자 탭들끼리 동일한 비율로 공간 분배 */
    text-align: center; 
    padding: 15px 0; 
    font-size: 14px; 
    font-weight: bold; 
    color: #888; 
    cursor: pointer; 
    transition: 0.2s; 
    white-space: nowrap; /* 글자가 두 줄로 꺾이지 않게 방지 */
    }
.tab-item.active { color: var(--text); border-bottom: 2px solid var(--text); } 

.credit-badge, .dropdown {
    flex-shrink: 0; 
}

.tab-content { display: none; padding: 20px 0; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }

.img-logo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary); margin: 0 auto; display: block; background: #fff; }
.img-full { width: 100%; border-radius: 12px; margin-top: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); object-fit: cover; }
.img-thumb { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--secondary); object-fit: cover; }

.btn-primary { width: 100%; padding: 16px; background: var(--primary); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 15px; transition: 0.2s; box-shadow: 0 4px 6px rgba(255, 126, 103, 0.2); }
.btn-primary:active { transform: scale(0.98); }
.btn-brown { background: var(--brown); box-shadow: 0 4px 6px rgba(109, 76, 65, 0.2); }
.btn-secondary { background: var(--secondary); color: #5D4037; }
.btn-outline { background: white; border: 1px solid #ddd; color: #555; margin-top: 10px; }
.social-btn { width: 100%; padding: 14px; margin-bottom: 10px; border: 1px solid #eee; background: white; border-radius: 8px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; }

label { display: block; margin-top: 20px; margin-bottom: 8px; font-weight: bold; font-size: 14px; color: #555; }
input[type="text"], input[type="number"], input[type="date"], select, textarea, input[type="file"] { width: 100%; padding: 14px; border: 1px solid #eee; background: #F9F9F9; border-radius: 8px; box-sizing: border-box; font-size: 15px; font-family: inherit; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); outline: none; background: #fff; }

.checkbox-group { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 15px; background: #FFF3E0; border-radius: 8px; border: 1px solid var(--secondary); }
.badge { background: var(--secondary); color: #5D4037; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }

.webtoon-box { border: 2px solid #333; padding: 15px; margin: 10px 0; border-radius: 10px; background: white; position: relative; }
.webtoon-box h4 { margin: 0 0 10px 0; color: var(--primary); }
.webtoon-cut { background: #eee; height: 120px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 13px; color: #888; text-align: center; line-height: 1.4; }

.switch-container { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); margin-bottom: 20px; }
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(26px); }

.loader { border: 4px solid #f3f3f3; border-top: 4px solid var(--primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.sitter-list { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.sitter-item { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.sitter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sitter-distance { font-size: 13px; font-weight: 800; color: var(--primary); background: rgba(255,126,103,0.1); padding: 4px 8px; border-radius: 6px; }
.sitter-name { font-size: 16px; font-weight: bold; color: var(--text); }
.sitter-stats { display: flex; gap: 15px; font-size: 13px; color: #777; align-items: center; }
.star-icon { color: #FF7E67; font-size: 14px; }

.global-logout-bar { padding: 20px; text-align: center; border-top: 1px solid #eee; background: var(--white); margin-top: auto; }
.btn-logout { background: transparent; border: 1px solid #ccc; color: #888; padding: 12px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; width: 100%; transition: 0.2s; font-weight: bold; }
.btn-logout:active { background: #f5f5f5; }

.status-badge { display: inline-block; padding: 5px 10px; border-radius: 15px; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
.status-pending { background-color: #FFF3E0; color: #E65100; border: 1px solid #FFE0B2; }

.btn-cancel {
    background-color: #fff1f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    font-weight: bold;
}
.btn-cancel:hover { background-color: #ff4d4f; color: white; }

.msg-box { max-width: 75%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.4; word-break: break-all; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.msg-mine { align-self: flex-end; background: var(--primary); color: white; border-bottom-right-radius: 4px; }
.msg-other { align-self: flex-start; background: white; color: #333; border: 1px solid #eaeaea; border-bottom-left-radius: 4px; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal-content { background: white; padding: 25px; border-radius: 16px; width: 85%; max-width: 320px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); animation: fadeIn 0.3s; }

.info-card { background: white; padding: 20px; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 2px 10px rgba(0,0,0,0.02); margin-top: 15px; }
.info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #f0f0f0; font-size: 14px; }
.info-row:last-child { border-bottom: none; }
.info-label { color: #888; font-weight: bold; }
.info-value { color: var(--text); font-weight: 600; text-align: right; max-width: 60%; word-break: keep-all;}

/* 계정관리 톱니바퀴 및 크레딧 스타일 */
.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}
.dropdown-btn {
    background: none;
    border: 1px solid #dddddd;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 5px;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 35px;
    background-color: var(--white);
    min-width: 160px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    z-index: 9999;
}
.dropdown-content a {
    color: var(--text);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}
.dropdown-content a:hover {
    background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.credit-badge {
    color: var(--primary);
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
}
/* [추가] 크레딧 지갑(Wallet) 화면 전용 스타일 */
.wallet-header { text-align: center; padding: 50px 20px; background: #f9f9f9; border-bottom: 1px solid #eee; }
.wallet-balance { font-size: 48px; font-weight: 900; color: #000; letter-spacing: -1px; margin: 0; }
.wallet-label { font-size: 14px; color: #666; margin-top: 5px; }

.wallet-history { padding: 20px 25px; background: #fff; flex: 1; }
.wallet-history h3 { margin-top: 0; margin-bottom: 20px; font-size: 16px; color: #333; }
.history-list { list-style: none; padding: 0; margin: 0; }
.history-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
.history-date { font-size: 13px; color: #888; width: 85px; }
.history-title { font-size: 14px; color: #333; flex: 1; margin: 0 10px; font-weight: 500; }
.history-amount { font-size: 15px; font-weight: bold; }
.amount-plus { color: #3b82f6; } /* 파란색 (적립) */
.amount-minus { color: #ef4444; } /* 빨간색 (사용) */
#wallet-screen.active { display: flex; flex-direction: column; min-height: 100vh; }
/* style.css 파일에 추가 또는 수정 */

/* 로고를 감싸는 영역 (세로 정렬을 위해) */
.logo-area {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* 새로운 텍스트 로고 스타일 (비즈니스 클래스 룩) */
.text-logo {
    font-family: 'Poppins', sans-serif; /* 깔끔한 영문 폰트 (없으면 Arial 권장) */
    font-weight: 800; /* 아주 굵게 설정하여 브랜드 부각 */
    font-size: 24px; /* 눈에 잘 띄는 크기 */
    color: var(--primary); /* 도그비앤비의 메인 테마 색상 적용 */
    letter-spacing: -1px; /* 글자 간격을 좁혀서 세련된 느낌 부여 */
    text-transform: none; /* PascalCase (DogBnB) 유지 */
}

/* 로그인 화면 전용 배치 스타일 */
#auth-method.active, #login-method.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px); /* 헤더 제외 전체 높이 */
}

.auth-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* 남은 공간을 다 차지하게 함 */
}

/* 로그인 버튼 밑 사진 스타일 */
.login-photo {
    display: block !important;
    width: 100% !important;      /* 가로를 부모(500px)에 무조건 맞춤 */
    max-width: 100% !important;  /* 어떤 경우에도 부모보다 커질 수 없음 */
    height: auto !important;     /* 가로에 맞춰 비율대로 자동 축소 */
    object-fit: contain !important; /* 사진 전체가 잘리지 않고 다 보이게 함 */
    border-radius: 12px;
}

/* 뒤로가기 버튼을 맨 아래로 밀어내기 */
.btn-bottom {
    margin-top: auto !important; 
    margin-bottom: 20px;
    width: 100%;
}

/* 어떤 대용량 사진도 꼼짝 못하게 만드는 코드 */
.img-full {
    display: block !important;
    width: 100% !important;      /* 부모 박스 너비의 100%만 사용 */
    height: auto !important;     /* 비율은 유지 */
    object-fit: contain;
}

#auth-method, .auth-wrapper {
    width: 100% !important;
    max-width: 500px !important; /* 사장님 앱의 최대 너비 */
    margin: 0 auto;
    overflow: hidden; /* 삐져나온 사진 강제 차단 */
}