/* ==========================================================
   profile.css — 프로필 페이지 스타일
   Precision Cycling Design System 적용
   ========================================================== */

/* ===== 페이지 제목 ===== */
.profile-page-title {
  font-size: 28px;   /* 기존 24px → 28px: --text-display(디자인 시스템 페이지 타이틀 기준) 통일 */
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  margin: var(--space-8, 32px) 0 var(--space-6, 24px);
  letter-spacing: var(--tracking-tight, -0.02em);
}

/* ===== 프로필 카드 ===== */
.profile-card {
  background: var(--color-surface, #FFFFFF);
  border-radius: 0;                              /* 직선 처리 */
  padding: 28px var(--space-8, 32px);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06));
  max-width: 800px;
  border-left: 3px solid var(--color-primary, #D55E00); /* 액센트 라인 */
}

/* ===== 프로필 레이아웃 ===== */
.profile-section {
  display: flex;
  gap: var(--space-8, 32px);
  align-items: flex-start;
}

/* 프로필 사진 영역 */
.profile-photo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

/* 프로필 사진 — 원형 유지 */
.profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-border, #E2E2E8);
  background: var(--color-surface-hover, #F5F5F7);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-provider {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B6B76);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== 프로필 폼 ===== */
.profile-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  max-width: 400px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.profile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B6B76);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 프로필 입력 필드 */
.profile-input {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;                              /* 직선 처리 */
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--color-text-primary, #1A1A1F);
  outline: none;
  transition: border-color var(--transition-normal, 0.2s ease);
  width: 100%;
  box-sizing: border-box;
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
}

.profile-input:focus {
  border-color: var(--color-primary, #D55E00);
  box-shadow: 0 2px 0 0 var(--color-primary, #D55E00);
}

.profile-input[readonly] {
  background: var(--color-surface-hover, #F5F5F7);
  color: var(--color-text-secondary, #6B6B76);
  cursor: not-allowed;
}

.profile-field-hint {
  font-size: 11px;
  color: var(--color-text-tertiary, #9C9CA8);
}

/* 액션 버튼 */
.profile-actions {
  margin-top: var(--space-1, 4px);
}

.profile-save-btn {
  padding: var(--space-2, 8px) var(--space-5, 20px);
  background: var(--color-primary, #D55E00);
  color: #fff;
  border: none;
  border-radius: 0;                              /* 직선 처리 */
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background var(--transition-normal, 0.2s ease);
  white-space: nowrap;
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
  letter-spacing: var(--tracking-wide, 0.02em);
}

.profile-save-btn:hover {
  background: var(--color-primary-hover, #CC3C08);
}

/* ===== 반응형 ===== */
@media (max-width: 600px) {
  .profile-section {
    flex-direction: column;
    align-items: center;
  }

  .profile-form {
    width: 100%;
    max-width: none;
  }

  .profile-card {
    padding: var(--space-5, 20px) var(--space-4, 16px);
  }
}