/* ============================================================
   HANCOT PLATFORM - COMMON DESIGN CSS
   파일명: hancot-common.css

   목적:
   한콧 플랫폼의 모든 화면에서 사용하는 공통 디자인

   적용 화면:
- 메인 화면
- 마이페이지
- 기업·학교 목록
- 기업·학교 등록
- 기업·학교 상세
- 관리자 화면

   구성:
1. 공통 디자인 변수
   02. 기본 화면 스타일 및 6단계 화면 크기별 글자 크기
   03. 공통 카드
   04. 공통 버튼
   05. 입력 항목 제목
   06. 입력박스·선택박스·텍스트영역
   07. 입력 안내 문구
   08. 입력 폼 2열 배치
   09. 공통 테이블
   10. 필·선·자·수·고 배지
   11. 모바일 대응
   12. 사용자 접근성

   주의:
- 기존 Bootstrap을 제거하지 않음
- 기존 클래스명과 충돌하지 않도록 hc 접두어 사용
- 화면 전체 배치와 슬라이드 메뉴는 hancot-layout.css에서 관리
   ============================================================ */


/* ============================================================
1. 공통 디자인 변수

   모든 화면에서 사용할 색상·크기·간격을 한곳에서 관리

   수정 방법:
- 대표 파란색: --hc-primary
- 마우스 올렸을 때 색상: --hc-primary-hover
- 기본 글자색: --hc-text
- 보조 글자색: --hc-muted
- 테두리색: --hc-border
- 카드 둥근 정도: --hc-radius
   ============================================================ */

:root {
    /* 한콧 대표 색상 */
    --hc-primary: #2563eb;
    --hc-primary-hover: #1d4ed8;
    --hc-primary-soft: #eff6ff;

    /* 글자 색상 */
    --hc-text: #1e293b;
    --hc-muted: #64748b;

    /* 배경 및 테두리 */
    --hc-background: #f8fafc;
    --hc-surface: #ffffff;
    --hc-border: #e2e8f0;

    /* 둥근 모서리 */
    --hc-radius: 12px;
    --hc-radius-sm: 8px;

    /* 그림자 */
    --hc-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);

    /* 공통 간격 */
    --hc-spacing-sm: 8px;
    --hc-spacing-md: 16px;
    --hc-spacing-lg: 24px;
}


/* ============================================================
   02. 기본 화면 스타일 및 6단계 화면 크기별 글자 크기

- 글자 크기와 색상 통일
- box-sizing으로 너비 계산 안정화
- 기존 Bootstrap의 body 배경을 강제로 변경하지 않음
- 6단계 기기별 브레이크포인트에 따른 전역 글자 크기 제어
   ============================================================ */

html {
    box-sizing: border-box;
    font-size: calc(18px * var(--hc-font-scale, 1)); /* 이 부분을 추가/수정 */
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    color: var(--hc-text);
    font-family: "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}

/* 공통 링크 */
.hc-link {
    color: var(--hc-primary);
    text-decoration: none;
}

.hc-link:hover {
    color: var(--hc-primary-hover);
    text-decoration: underline;
}


/* ============================================================
   03. 공통 카드

   용도:
- 기업 정보 카드, 학교 정보 카드
- 등록 화면 입력 영역, 마이페이지 정보 영역 등
   ============================================================ */

.hc-card {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    padding: 24px;
    box-shadow: var(--hc-shadow);
}

/* 카드 제목 */
.hc-card-title {
    margin: 0 0 16px;
    color: var(--hc-text);
    font-size: 1.125rem;
    font-weight: 700;
}

/* 카드 설명 */
.hc-card-description {
    margin-bottom: 16px;
    color: var(--hc-muted);
    font-size: 0.875rem;
}


/* ============================================================
   04. 공통 버튼

   종류:
   .hc-btn          기본 파란색 버튼
   .hc-btn-outline  흰색 배경 테두리 버튼
   .hc-btn-quiet    연한 회색 버튼
   .hc-btn-sm       작은 버튼
   ============================================================ */

.hc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--hc-radius-sm);
    background: var(--hc-primary);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* 마우스를 올렸을 때 */
.hc-btn:hover {
    background: var(--hc-primary-hover);
    color: #ffffff;
}

/* 비활성화 버튼 */
.hc-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 테두리 버튼 */
.hc-btn-outline {
    background: #ffffff;
    color: var(--hc-primary);
    border-color: var(--hc-primary);
}

.hc-btn-outline:hover {
    background: var(--hc-primary-soft);
    color: var(--hc-primary-hover);
}

/* 연한 회색 버튼 */
.hc-btn-quiet {
    background: #f1f5f9;
    color: var(--hc-text);
    border-color: var(--hc-border);
}

.hc-btn-quiet:hover {
    background: #e2e8f0;
    color: var(--hc-text);
}

/* 작은 버튼 */
.hc-btn-sm {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.875rem;
}


/* ============================================================
   05. 입력 항목 제목

   예: [필] 기업명, [선] 홈페이지, [자] 등록일
   ============================================================ */

.hc-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-weight: 650;
}


/* ============================================================
   06. 입력박스·선택박스·텍스트영역

   종류: .hc-input, .hc-select, .hc-textarea
   ============================================================ */

.hc-input,
.hc-select,
.hc-textarea {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--hc-text);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: var(--hc-radius-sm);
}

/* 여러 줄 입력창 */
.hc-textarea {
    min-height: 96px;
    resize: vertical;
}

/* 수정 불가능한 입력창 */
.hc-input:disabled,
.hc-select:disabled,
.hc-textarea:disabled {
    background: #f1f5f9;
    cursor: not-allowed;
}

/* 입력 전 안내 문구 */
.hc-input::placeholder,
.hc-textarea::placeholder {
    color: #94a3b8;
}

/* 입력창 선택 시 파란색 강조 */
.hc-input:focus,
.hc-select:focus,
.hc-textarea:focus {
    border-color: var(--hc-primary);
    outline: 3px solid rgb(37 99 235 / 15%);
}


/* ============================================================
   07. 입력 안내 문구
   ============================================================ */

.hc-help {
    display: block;
    margin-top: 5px;
    color: var(--hc-muted);
    font-size: 0.8125rem;
}


/* ============================================================
   08. 입력 폼 2열 배치
   ============================================================ */

.hc-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


/* ============================================================
   09. 공통 테이블
   ============================================================ */

.hc-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.hc-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.hc-table th,
.hc-table td {
    padding: 12px;
    border-bottom: 1px solid var(--hc-border);
    text-align: left;
    vertical-align: middle;
}

.hc-table th {
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
}


/* ============================================================
   10. 필·선·자·수·고 입력상태 배지
   ============================================================ */

.hc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

/* 필: 필수 입력 */
.hc-badge-required {
    color: #dc2626;
    background: #fef2f2;
}

/* 선: 선택 입력 */
.hc-badge-optional {
    color: #2563eb;
    background: #eff6ff;
}

/* 자: 자동 입력 */
.hc-badge-auto {
    color: #15803d;
    background: #f0fdf4;
}

/* 수: 수정 가능 */
.hc-badge-editable {
    color: #7e22ce;
    background: #faf5ff;
}

/* 고: 고정값 */
.hc-badge-fixed {
    color: #64748b;
    background: #f1f5f9;
}


/* ============================================================
   11. 6단계 화면 크기별 반응형 구간 및 모바일 대응

   구간 정의:
   1. 초대형 PC / 모니터 (1400px 이상) -> 기본 16px
   2. 일반 데스크탑 / 노트북 (1399px 이하)
   3. 태블릿 가로 모드 / 소형 노트북 (991px 이하)
   4. 태블릿 세로 모드 / 대형 스마트폰 가로 (767.98px 이하)
   5. 일반 스마트폰 (575px 이하)
   6. 소형 스마트폰 (359px 이하)
   ============================================================ */

/* 2. 일반 데스크탑 / 노트북 구간 */
@media (max-width: 1399px) {
    html {
        font-size: 15.5px;
    }
}

/* 3. 태블릿 가로 모드 구간 */
@media (max-width: 991px) {
    html {
        font-size: 15px;
    }
}

/* 4. 태블릿 세로 모드 및 대형 스마트폰 구간 */
@media (max-width: 767.98px) {
    html {
        font-size: 14.5px;
    }

    /* 모바일 카드 여백 */
    .hc-card {
        padding: 16px;
    }

    /* 입력 폼을 한 줄씩 배치 */
    .hc-form-row {
        grid-template-columns: 1fr;
    }

    /* 모바일 터치 버튼 */
    .hc-btn {
        min-height: 40px;
    }
}

/* 5. 일반 스마트폰 구간 */
@media (max-width: 575px) {
    html {
        font-size: 14px;
    }
}

/* 6. 소형 스마트폰 구간 */
@media (max-width: 359px) {
    html {
        font-size: 13.5px;
    }
}


/* ============================================================
   12. 사용자 접근성

   운영체제에서 애니메이션 감소를 설정한 경우
   버튼의 움직임 효과를 제거
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .hc-btn {
        transition: none;
    }
}

/* ============================================================
   HANCOT COMMON CSS END
   ============================================================ */