/* ========================================
   PHP Component System Styles
   React-like Component Architecture
   Class Prefix: .c- (Component)
======================================== */

/* ========================================
   Variables & Common Styles
======================================== */
:root {
    /* Colors - Figma Design Tokens */
    --color-primary: #f45859;
    --color-primary-hover: #e54748;
    --color-primary-active: #d43637;
    --color-gray-dark: #353535;
    --color-gray: #a1a1a1;
    --color-white: #ffffff;

    /* Typography */
    --font-pretendard: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 14px;
    --spacing-lg: 20px;

    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 8px;
}

/* ========================================
   FullSizeButton Component
   전체 너비 버튼 (Figma 디자인 기반)
======================================== */
.c-full-size-btn {
    display: block;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-sm);
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

/* FullSizeButton Variants */
.c-full-size-btn-line {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    color: var(--color-primary) !important;
}

.c-full-size-btn-line:hover {
    background: #fff5f5;
}

.c-full-size-btn-line:active {
    background: #ffe5e5;
}

/* Primary 스타일 - Figma: Primary background */
.c-full-size-btn-primary {
    background: var(--color-primary);
    color: var(--color-white) !important;
    border: none;
}

.c-full-size-btn-primary:hover {
    background: var(--color-primary-hover);
}

.c-full-size-btn-primary:active {
    background: var(--color-primary-active);
}

/* Gray 스타일 - Figma: Gray background */
.c-full-size-btn-gray {
    background: var(--color-gray);
    color: var(--color-white) !important;
    border: none;
}

.c-full-size-btn-gray:hover {
    background: #909090;
}

.c-full-size-btn-gray:active {
    background: #808080;
}

/* Photo 스타일 - Figma: 사진 첨부 버튼 */
.c-full-size-btn-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-white);
    border: 1px solid #e8e8e8;
    color: #1d1d1d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.c-full-size-btn-photo:hover {
    background: #fafafa;
    border-color: #d0d0d0;
}

.c-full-size-btn-photo:active {
    background: #f0f0f0;
}

/* Photo 아이콘 */
.c-full-size-btn-photo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.c-full-size-btn-photo-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Photo 텍스트 - Figma: 15px Bold */
.c-full-size-btn-photo-text {
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: #1d1d1d;
    flex: 1;
}

/* Photo "선택" 배지 - Figma: #e8e8e8 배경, 12px Medium */
.c-full-size-btn-photo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: #e8e8e8;
    border-radius: 4px;
    font-family: var(--font-pretendard);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    color: #4b4d49;
    letter-spacing: 0.24px;
    flex-shrink: 0;
}

/* FullSizeButton States */
.c-full-size-btn-disabled,
.c-full-size-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* FullSizeButton Anchor 지원 */
a.c-full-size-btn {
    text-decoration: none;
    box-sizing: border-box;
}

/* ========================================
   ContactButton Component
   문자하기/전화하기 버튼 (Figma 디자인 기반)
======================================== */
.c-contact-btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Figma: Padding vertical 10px */
    padding: 10px 20px;

    /* Figma: Border radius 5px */
    border-radius: var(--radius-sm);

    /* Typography - Figma: Pretendard Bold 15px, line-height 1.4 */
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-white);
    text-decoration: none;

    /* Interaction */
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

/* ContactButton Variants */

/* 전화하기 버튼 - Figma: Background #f45859 (Primary color) */
.c-contact-btn-tel {
    background: var(--color-primary);
}

.c-contact-btn-tel:hover {
    background: var(--color-primary-hover);
}

.c-contact-btn-tel:active {
    background: var(--color-primary-active);
}

/* 문자하기 버튼 - Figma: Background #353535 (Gray) */
.c-contact-btn-sms {
    background: var(--color-gray-dark);
}

.c-contact-btn-sms:hover {
    background: #454545;
}

.c-contact-btn-sms:active {
    background: #252525;
}

/* ContactButton 아이콘 영역 */
.c-contact-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.c-contact-btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ContactButton 텍스트 영역 */
.c-contact-btn-text {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Figma: Gap between icon and text */
.c-contact-btn-tel .c-contact-btn-icon {
    margin-right: var(--spacing-xs);
}

.c-contact-btn-sms .c-contact-btn-icon {
    margin-right: 5px;
}

/* ContactButton States */
.c-contact-btn:disabled,
.c-contact-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 768px) {
    /* ContactButton 조정 */
    .c-contact-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* FullSizeButton 조정 */
    .c-full-size-btn {
        padding: 12px var(--spacing-md);
        font-size: 13px;
    }
}

/* ========================================
   TextButton Component
   텍스트 버튼 (Figma 디자인 기반)
   - 고정된 padding과 font-size만 사용
   - width는 텍스트 길이에 따라 자동 조정
======================================== */
.c-text-btn {
    /* Layout - width는 auto (텍스트 길이에 따라 조정) */
    display: inline-block;
    width: auto;

    /* Figma: Border radius 8px */
    border-radius: var(--radius-md);

    /* Figma: Background #1d1d1d (Gray - 12) */
    background: #1d1d1d;

    /* Typography - Figma: Pretendard Bold 14px, line-height 1.4 */
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;

    /* Interaction */
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.pc .c-text-btn {
    font-size: 16px;
}

/* TextButton Hover/Active States */
.c-text-btn:hover {
    background: #2d2d2d;
}

.c-text-btn:active {
    background: #0d0d0d;
}

/* TextButton Sizes - 고정 padding만 다름 */

/* Mobile 크기 - Figma: 더 작은 padding */
.c-text-btn-mobile {
    padding: 10px 20px;
}

/* PC 크기 - Figma: 더 큰 padding */
.c-text-btn-pc {
    padding: 14px 28px;
}

/* TextButton States */
.c-text-btn-disabled,
.c-text-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   MobileLayer Component
   모바일 전용 전체화면 레이어
======================================== */
.c-mobile-layer {
    font-family: var(--font-pretendard);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 테마 - White */
.c-mobile-layer-white {
    background: #ffffff;
    color: #1d1d1d;
}

/* 테마 - Black */
.c-mobile-layer-black {
    background: #1d1d1d;
    color: rgba(255, 255, 255, 0.7);
}

/* 헤더 */
.c-mobile-layer-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 16px;
    position: relative;
    flex-shrink: 0;
}

/* 헤더 타이틀 */
.c-mobile-layer-title {
    font-family: var(--font-pretendard);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 닫기 버튼 (헤더 내) */
.c-mobile-layer-close-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-mobile-layer-close-btn img {
    width: 100%;
    height: 100%;
}

/* 닫기 버튼 (absolute, 헤더 없을 때) */
.c-mobile-layer-close-btn-absolute {
    position: absolute;
    right: 16px;
    top: 23px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-mobile-layer-close-btn-absolute img {
    width: 100%;
    height: 100%;
}

/* 컨텐츠 영역 */
.c-mobile-layer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 헤더 있을 때 컨텐츠 */
.c-mobile-layer-with-header .c-mobile-layer-content {
    padding: 0;
}

/* 헤더 없을 때 컨텐츠 */
.c-mobile-layer-no-header .c-mobile-layer-content {
    padding: 0;
    height: 100%;
}

/* 모바일 전용 (선택사항) */
@media (min-width: 768px) {
    .c-mobile-layer {
        max-width: 360px;
        left: 50%;
        transform: translateX(-50%);
    }
}