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

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

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

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

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


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

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

   수정 방법:
   - 대표 파란색: --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. 기본 화면 스타일

   - 글자 크기와 색상 통일
   - box-sizing으로 너비 계산 안정화
   - 기존 Bootstrap의 body 배경을 강제로 변경하지 않음

   수정 방법:
   - 기본 글자색: color
   - 기본 글꼴: font-family
   ============================================================ */

html {
    box-sizing: border-box;
}

*,
*::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. 공통 카드

   용도:
   - 기업 정보 카드
   - 학교 정보 카드
   - 등록 화면 입력 영역
   - 마이페이지 정보 영역
   - 상세 화면 서비스 정보

   수정 방법:
   - 카드 안쪽 여백: padding
   - 카드 테두리: border
   - 카드 모서리: border-radius
   - 카드 그림자: box-shadow
   ============================================================ */

.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       작은 버튼

   수정 방법:
   - 기본 높이: min-height
   - 버튼 좌우 여백: padding
   - 버튼 글자 크기: font-size
   - 버튼 둥근 정도: border-radius
   ============================================================ */

/* 기본 버튼 */

.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. 입력 항목 제목

   용도:
   입력박스 위에 표시되는 항목명

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

   수정 방법:
   - 글자 굵기: font-weight
   - 배지와 제목 사이 간격: gap
   - 제목 아래 간격: margin-bottom
   ============================================================ */

.hc-label {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 6px;

    font-weight: 650;
}


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

   종류:
   .hc-input     일반 입력
   .hc-select    선택 목록
   .hc-textarea  여러 줄 입력

   수정 방법:
   - 입력창 높이: min-height
   - 입력창 내부 여백: padding
   - 테두리 색상: border
   - 선택 시 테두리: :focus
   ============================================================ */

.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. 입력 안내 문구

   용도:
   입력박스 아래 도움말이나 예시 표시

   예:
   기업명은 사업자등록증 기준으로 입력하세요.

   수정 방법:
   - 글자 크기: font-size
   - 위쪽 간격: margin-top
   - 글자색: color
   ============================================================ */

.hc-help {
    display: block;

    margin-top: 5px;

    color: var(--hc-muted);

    font-size: 0.8125rem;
}


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

   PC:
   왼쪽 입력 항목 | 오른쪽 입력 항목

   모바일:
   입력 항목 1
   입력 항목 2

   수정 방법:
   - 열 개수: grid-template-columns
   - 항목 사이 간격: gap
   - 모바일 전환 기준: 11번 @media
   ============================================================ */

.hc-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


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

   용도:
   - 기업 목록
   - 학교 목록
   - 관리자 목록
   - 예약 목록
   - 서비스 목록

   구성:
   .hc-table-wrap  가로 스크롤
   .hc-table       기본 테이블

   수정 방법:
   - 셀 안쪽 여백: padding
   - 제목 배경색: th background
   - 행 구분선: border-bottom
   ============================================================ */

.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. 필·선·자·수·고 입력상태 배지

   한콧 확정 디자인

   필 = 필수 입력 (빨강)
   선 = 선택 입력 (파랑)
   자 = 자동 입력 (초록)
   수 = 수정 가능 (보라)
   고 = 고정값·수정 불가 (회색)

   디자인:
   - 연한 배경
   - 글자색과 테두리색 동일
   - 둥근 캡슐형
   - 기본 높이 23px
   - 최소 너비 23px

   수정 방법:
   - 배지 크기: min-width, height
   - 글자 크기: font-size
   - 테두리 굵기: border
   - 배지 색상: 아래 상태별 color/background
   ============================================================ */

.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. 모바일 대응

   적용 기준:
   화면 너비 767.98px 이하

   변경 내용:
   - 카드 내부 여백 16px
   - 입력 폼 2열 -> 1열
   - 버튼 최소 높이 40px

   주의:
   .hc-btn-sm도 모바일에서는
   최소 높이 40px이 적용됨
   ============================================================ */

@media (max-width: 767.98px) {

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

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

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


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

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

   수정 방법:
   - transition 값을 변경
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hc-btn {
        transition: none;
    }

}

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