/* 공용 텍스트 스타일 정의 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 기본 스타일 */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 웹뷰에서 핀치 줌 비활성화 */
html, body {
    touch-action: manipulation; /* 핀치 줌 비활성화, 스크롤은 허용 */
    -webkit-touch-callout: none; /* iOS에서 롱터치 메뉴 비활성화 */
    -webkit-user-select: none; /* 텍스트 선택 비활성화 */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 특정 요소에서만 텍스트 선택 허용 */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

:root {
    /* 폰트 패밀리 */
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    
    /* 색상 정의 */
    --primary-main: #004A9F;      /* 메인 포인트, 주요 버튼 및 강조 색상 */
    --primary-hover: #003377;     /* 메인 버튼 호버 상태 */
    --secondary-main: #009944;    /* 서브 버튼 배경, 입력창 배경 */
    --secondary-sub: #006D33;     /* 서브 버튼 텍스트, 링크 등 */
    --background-main: #ffffff;   /* 전체 페이지 배경 */
    --background-content: #F0F6FB; /* 카드, 대화창, 팝업 배경 */
    --line-main: #E6E6E6;         /* 구분선, 입력 테두리 */
    --text-main: #1F1F1F;         /* 기본 텍스트, 본문 내용 */
    --text-sub: #6B6B6B;          /* 보조 텍스트, 설명 문구 */
    --text-disabled: #A6A6A6;     /* 비활성 상태 텍스트 */
    --text-white: #ffffff;
    --text-placeholder: #B0B0B0;
    --status-success: #22C55E;    /* 성공, 완료 알림 */
    --status-error: #EF4444;      /* 에러, 경고 메시지 */
    --status-info: #3B82F6;       /* 정보전달 */
    --icon-main: #4B5563;         /* 아이콘 메인 색상 */
}

/* 텍스트 스타일 정의 */
.head_main {
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 700; /* Bold */
    line-height: 28px;
    letter-spacing: -0.01em; /* -1% */
}

.head_sub {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600; /* SemiBold */
    line-height: 24px;
    letter-spacing: -0.01em; /* -1% */
}

.body_main {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400; /* Regular */
    line-height: 20px;
    letter-spacing: 0;
}

.body_sub {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400; /* Regular */
    line-height: 18px;
    letter-spacing: 0;
}

.caption_main {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 400; /* Regular */
    line-height: 16px;
    letter-spacing: 0.01em; /* 1% */
}

.caption_sub {
    font-family: var(--font-family);
    font-size: 10px;
    font-weight: 400; /* Regular */
    line-height: 14px;
    letter-spacing: 0.02em; /* 2% */
}

.bt_text_main {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600; /* SemiBold */
    line-height: 20px;
}

.bt_text_sub {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500; /* Medium */
    line-height: 18px;
}

/* 색상 유틸리티 클래스 */
.color-primary {
    color: var(--primary-main);
}

.bg-primary {
    background-color: var(--primary-main);
}

.color-secondary {
    color: var(--secondary-main);
}

.bg-secondary {
    background-color: var(--secondary-main);
}

.text-main {
    color: var(--text-main);
}

.text-sub {
    color: var(--text-sub);
}

.text-disabled {
    color: var(--text-disabled);
}

.text-white {
    color: var(--text-white);
}

.bg-main {
    background-color: var(--background-main);
}

.bg-content {
    background-color: var(--background-content);
}

.border-main {
    border-color: var(--line-main);
}

.color-success {
    color: var(--status-success);
}

.color-error {
    color: var(--status-error);
}

.color-info {
    color: var(--status-info);
}

.icon-main {
    color: var(--icon-main);
}

/* 데스크톱 뷰를 위한 스타일 */
@media (min-width: 1001px) {
    html {
        background-color: #EFEFEF;
    }
    
    body {
        max-width: 1000px;
        min-height: 100vh;
        margin: 0 auto;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        position: relative;
    }

    .header,
    .comment-input-container,
    .fixed-footer,
    .reservation-footer,
    .next-button-container,
    .market-footer {
        max-width: 1000px;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .write-button-container,
    .floating-write-button {
        right: calc((100vw - 1000px) / 2 + 16px) !important;
    }
} 

.icon-button img {
    width: 32px;
    height: 32px;
}

.dropdown-overlay {
    display: none;
    position: fixed;
    z-index: 1001;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    height: 100vh;
}

.custom-dropdown {
    display: none;
}