/**
 * company-profile.html 전용 스타일
 * 인라인 <style> 태그에서 추출됨
 */

/* syncle 로고에 monospace 폰트 적용 */
      .sidebar-brand h1,
      .sidebar-brand h1 a,
      .sidebar-header h1,
      .sidebar-header h1 a {
        
        font-weight: 700;
        letter-spacing: 0.5px;
      }

      /* 영어 텍스트에만 monospace 폰트 적용 */
      .new-chat-btn span,
      .nav-section-header,
      .profile-header,
      .logout-btn span {
        
        font-weight: 600;
        letter-spacing: 0.3px;
      }

      /* Menu 및 Profile 헤더 스타일링 */
      .nav-section-header,
      .profile-section .profile-header {
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
      }
    

      /* Pretendard 폰트 적용 */
      * {
        font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      /* 노션 스타일 탭 네비게이션 */
      .notion-tab-navigation {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
        flex-wrap: wrap;
      }

      .notion-tab-btn {
        padding: 8px 16px;
        border: none;
        background: rgba(55, 53, 47, 0.08);
        color: #37352F;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.15s ease;
        font-family: 'Pretendard', sans-serif;
      }

      .notion-tab-btn:hover {
        background: rgba(55, 53, 47, 0.16);
      }

      .notion-tab-btn.active {
        background: #37352F;
        color: #FFFFFF;
      }

      /* 노션 탭 버튼 쉬머 효과 비활성화 */
      .notion-tab-btn::before,
      .notion-tab-btn::after {
        display: none !important;
        content: none !important;
      }

      /* 노션 스타일 회사 프로필 헤더 (로고 + 소개) */
      .company-profile-header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px 24px;
        background: rgba(55, 53, 47, 0.04);
        border: 1px solid rgba(55, 53, 47, 0.09);
        border-radius: 8px;
        margin-bottom: 24px;
        transition: all 0.15s ease;
      }

      .company-profile-header:hover {
        background: rgba(55, 53, 47, 0.08);
      }

      .company-logo-display {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
      }

      .company-logo-display img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 10px;
      }

      .company-info-display h2 {
        margin: 0 0 4px 0;
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
      }

      .company-info-display p {
        margin: 0;
        font-size: 14px;
        color: #6b7280;
        font-style: italic;
      }

      /* 노션 스타일 로고 플레이스홀더 */
      .logo-placeholder-display {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(55, 53, 47, 0.04);
        border: 1px dashed rgba(55, 53, 47, 0.16);
        border-radius: 50%;
        color: #9ca3af;
        font-family: 'Pretendard', sans-serif;
      }

      .logo-placeholder-display span {
        font-size: 11px;
        color: rgba(55, 53, 47, 0.5);
        font-family: 'Pretendard', sans-serif;
      }

      /* 노션 스타일 슬로건 플레이스홀더 */
      .slogan-placeholder {
        display: none;
        color: rgba(55, 53, 47, 0.5);
        font-style: normal !important;
        font-size: 14px !important;
        cursor: pointer;
        transition: color 0.15s ease;
      }

      .slogan-placeholder:hover {
        color: #37352F;
      }

      .slogan-text {
        display: none;
      }

      /* 회사 로고 업로드 스타일 */
      .company-logo-section {
        margin-bottom: 20px;
      }

      .logo-upload-container {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 8px;
        align-items: flex-start; /* 왼쪽 정렬 */
      }

      .logo-preview {
        width: 200px;
        height: 200px;
        border: 1px dashed rgba(55, 53, 47, 0.16);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background: rgba(55, 53, 47, 0.04);
        transition: all 0.15s ease;
        margin: 0; /* 왼쪽 정렬을 위해 auto 제거 */
      }

      .logo-preview:hover {
        border-color: #37352F;
        background: rgba(55, 53, 47, 0.08);
        cursor: pointer;
      }

      .logo-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 10px;
      }

      .logo-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #9ca3af;
      }

      .logo-placeholder i {
        font-size: 48px;
        color: #d1d5db;
      }

      .logo-placeholder span {
        font-size: 14px;
        font-weight: 500;
      }

      .logo-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-start; /* 왼쪽 정렬 */
      }

      /* 입력 필드 카운터 */
      .input-with-counter {
        position: relative;
      }

      .char-counter {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #9ca3af;
        background: white;
        padding: 2px 6px;
        border-radius: 4px;
      }

      #companySlogan {
        padding-right: 70px; /* 카운터 공간 확보 */
      }

      .logo-actions .btn {
        padding: 8px 16px;
        font-size: 14px;
      }

      #editCompanySlogan {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 15px;
        transition: all 0.3s ease;
      }

      #editCompanySlogan:focus {
        border-color: #3b82f6;
        outline: none;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      }

      .form-text.text-muted {
        color: #9ca3af;
        font-size: 13px;
        margin-top: 5px;
      }

      /* 노션 스타일 인라인 편집 */
      .form-control {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid rgba(55, 53, 47, 0.16);
        border-radius: 6px;
        font-size: 14px;
        background: white;
        transition: all 0.15s ease;
      }

      .form-control:focus {
        outline: none;
        border-color: #37352F;
        box-shadow: 0 0 0 2px rgba(55, 53, 47, 0.1);
      }

      .form-control:disabled {
        background: rgba(55, 53, 47, 0.04);
        cursor: not-allowed;
      }

      /* 노션 스타일 버튼 */
      .btn {
        padding: 6px 12px;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .btn-sm {
        padding: 4px 10px;
        font-size: 13px;
      }

      .btn-primary {
        background: #37352F;
        color: #FFFFFF;
      }

      .btn-primary:hover {
        background: #2F2D2A;
      }

      .btn-primary:active {
        background: #252420;
      }

      .btn-outline {
        background: rgba(55, 53, 47, 0.08);
        color: #37352F;
      }

      .btn-outline:hover {
        background: rgba(55, 53, 47, 0.16);
      }

      /* 노션 버튼 쉬머 효과 비활성화 */
      .btn::before,
      .btn::after {
        display: none !important;
        content: none !important;
      }

      #companyActionButtons, #personalActionButtons {
        display: inline-block;
      }

      #companyActionButtons button, #personalActionButtons button {
        margin-left: 8px;
      }

      /* info-group 스타일 제거 - .form-control 기본 스타일만 사용 */

      /* 응답 속도 배지 스타일 (표시 모드) */
      .response-time-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }

      .response-time-badge .badge-label {
        color: #6b7280;
        font-weight: 600;
      }

      .response-time-badge .badge-value {
        font-weight: 600;
      }

      /* 응답 속도별 색상 */
      .response-time-badge[data-speed="10min"] {
        background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
        border-color: #96e6a1;
      }

      .response-time-badge[data-speed="10min"] .badge-value {
        color: #166534;
      }

      .response-time-badge[data-speed="30min"] {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        border-color: #fcb69f;
      }

      .response-time-badge[data-speed="30min"] .badge-value {
        color: #9a3412;
      }

      .response-time-badge[data-speed="1hour"] {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        border-color: #a8edea;
      }

      .response-time-badge[data-speed="1hour"] .badge-value {
        color: #075985;
      }

      .response-time-badge[data-speed="normal"] {
        background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
        border-color: #8ec5fc;
      }

      .response-time-badge[data-speed="normal"] .badge-value {
        color: #3730a3;
      }

      .response-time-badge[data-speed="slow"] {
        background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
        border-color: #a6c1ee;
      }

      .response-time-badge[data-speed="slow"] .badge-value {
        color: #6b7280;
      }

      /* 노션 스타일 응답 속도 선택 버튼 (편집 모드) */
      .response-time-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }

      .response-time-btn {
        padding: 8px 14px;
        border: 1px solid rgba(55, 53, 47, 0.16);
        border-radius: 6px;
        background: white;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
        font-family: 'Pretendard', sans-serif;
        flex: 0 0 calc(50% - 4px); /* 2열 레이아웃 */
      }

      .response-time-btn:hover {
        background: rgba(55, 53, 47, 0.04);
      }

      .response-time-btn.selected {
        border-color: #37352F;
        background: #37352F;
        color: white;
      }

      .response-time-btn.selected:hover {
        background: #2F2D2A;
      }

      /* 응답 속도 버튼 쉬머 효과 비활성화 */
      .response-time-btn::before,
      .response-time-btn::after {
        display: none !important;
        content: none !important;
      }

      @media (max-width: 768px) {
        .response-time-btn {
          flex: 0 0 100%; /* 모바일에서는 1열 레이아웃 */
        }
      }