/* ============================================================
   common.css - 공통 스타일

   설명: 모든 페이지에서 사용되는 공통 스타일입니다.
         헤더, 푸터, 버튼, 컨테이너 등이 포함됩니다.
   ============================================================ */

/* ──────────────────────────────────────
   폰트 로드 (Google Fonts)
   ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* ──────────────────────────────────────
   기본 본문 스타일
   ────────────────────────────────────── */
body {
    font-family: var(--font-main);
    font-size: var(--font-size-body);
    color: var(--color-text-dark);
    background-color: var(--color-body-bg);
    /* 헤더가 고정(sticky)이므로 본문 위에 헤더 높이만큼 여백 */
    padding-top: var(--header-height);
    /* 다크/라이트 전환 시 부드러운 색상 변경 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ──────────────────────────────────────
   컨테이너 (콘텐츠를 가운데 정렬하는 박스)
   ────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;              /* 좌우 자동 여백 → 가운데 정렬 */
    padding: 0 20px;             /* 좌우 안쪽 여백 */
}

/* ──────────────────────────────────────
   섹션 기본 스타일
   ────────────────────────────────────── */
.section {
    padding: var(--space-xxl) 0;
}

/* 섹션 제목 스타일 */
.section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-dark-navy);
}

/* 섹션 부제목 */
.section-subtitle {
    font-size: var(--font-size-body);
    color: var(--color-cool-gray);
    text-align: center;
    margin-bottom: var(--space-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 배경색이 있는 섹션 */
.section--gray {
    background-color: var(--color-section-gray-bg);
}

.section--dark {
    background-color: var(--color-dark-navy);
    color: var(--color-white);
}

/* ============================================================
   헤더 (Header) - 사이트 상단 네비게이션
   ============================================================ */
.header {
    position: fixed;             /* 스크롤해도 항상 상단에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-header-bg);
    z-index: 1000;               /* 다른 요소 위에 표시 */
    transition: background-color var(--transition-normal);
}

/* 헤더 내부 레이아웃 */
.header .container {
    display: flex;               /* 가로 배치 */
    align-items: center;         /* 세로 중앙 정렬 */
    justify-content: space-between; /* 양쪽 끝 정렬 */
    height: 100%;
}

/* ──── 로고 ──── */
.header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header__logo-icon {
    font-size: 28px;
}

.header__logo-text {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: 1px;
}

/* ──── 네비게이션 메뉴 ──── */
.nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav__list {
    display: flex;
    gap: var(--space-lg);
}

/* 메뉴 항목 */
.nav__item {
    position: relative;          /* 드롭다운 메뉴 위치 기준 */
}

.nav__link {
    color: var(--color-white);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    padding: 8px 0;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav__link:hover {
    color: var(--color-ice-blue);
}

/* 드롭다운 화살표 아이콘 */
.nav__arrow {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

/* 드롭다운 메뉴가 열렸을 때 화살표 회전 */
.nav__item:hover .nav__arrow {
    transform: rotate(180deg);
}

/* ──── 드롭다운 메뉴 ──── */
.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-dropdown-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-sm) 0;
    opacity: 0;                  /* 평소에는 투명 */
    visibility: hidden;          /* 평소에는 숨김 */
    transform: translateY(10px); /* 약간 아래에 위치 */
    transition: all var(--transition-fast);
}

/* 마우스를 올리면 드롭다운 표시 */
.nav__item:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__dropdown-link {
    display: block;
    padding: 10px 20px;
    color: var(--color-text-dark);
    font-size: var(--font-size-caption);
    transition: background-color var(--transition-fast);
}

.nav__dropdown-link:hover {
    background-color: var(--color-light-gray);
    color: var(--color-ice-blue);
}

/* ──── 헤더 우측 영역 (언어 선택 + 문의하기 버튼) ──── */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* 언어 선택 드롭다운 */
.lang-selector {
    position: relative;
    cursor: pointer;
}

.lang-selector__current {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-white);
    font-size: var(--font-size-caption);
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast);
}

.lang-selector__current:hover {
    border-color: var(--color-ice-blue);
}

.lang-selector__flag {
    font-size: 18px;
}

/* 언어 드롭다운 목록 */
.lang-selector__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    background-color: var(--color-dropdown-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all var(--transition-fast);
    z-index: 100;
}

.lang-selector.active .lang-selector__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-selector__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: var(--font-size-caption);
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.lang-selector__option:hover {
    background-color: var(--color-light-gray);
}

.lang-selector__option.active {
    color: var(--color-ice-blue);
    font-weight: var(--font-weight-semibold);
}

/* ──── 모바일 햄버거 메뉴 버튼 ──── */
.mobile-menu-btn {
    display: none;               /* PC에서는 숨김 */
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    cursor: pointer;
}

.mobile-menu-btn__line {
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    transition: all var(--transition-normal);
}

/* 햄버거 → X 변환 애니메이션 */
.mobile-menu-btn.active .mobile-menu-btn__line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active .mobile-menu-btn__line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-btn.active .mobile-menu-btn__line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================================
   버튼 스타일
   ============================================================ */

/* 기본 버튼 스타일 (모든 버튼에 적용) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal);
    cursor: pointer;
    border: 2px solid transparent;
}

/* 주요 버튼 (파란색 배경) */
.btn--primary {
    background-color: var(--color-ice-blue);
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-deep-blue);
    transform: translateY(-2px);     /* 살짝 위로 떠오르는 효과 */
    box-shadow: var(--shadow-md);
}

/* 보조 버튼 (테두리만) */
.btn--outline {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn--outline:hover {
    background-color: var(--color-white);
    color: var(--color-dark-navy);
}

/* 어두운 배경용 보조 버튼 */
.btn--outline-dark {
    background-color: transparent;
    color: var(--color-ice-blue);
    border-color: var(--color-ice-blue);
}

.btn--outline-dark:hover {
    background-color: var(--color-ice-blue);
    color: var(--color-white);
}

/* CTA 버튼 (주황색 - 행동 유도) */
.btn--cta {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.btn--cta:hover {
    background-color: #e55a2b;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 작은 버튼 */
.btn--sm {
    padding: 8px 20px;
    font-size: var(--font-size-caption);
}

/* ============================================================
   페이지 배너 (서브 페이지 상단)
   ============================================================ */
.page-banner {
    background-color: var(--color-dark-navy);
    color: var(--color-white);
    padding: var(--space-xxl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 배너 배경 그라디언트 오버레이 */
.page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26,35,50,0.95), rgba(0,120,212,0.3));
    z-index: 1;
}

.page-banner .container {
    position: relative;
    z-index: 2;
}

.page-banner__title {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
}

.page-banner__subtitle {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-regular);
    opacity: 0.8;
    margin-bottom: var(--space-lg);
}

/* 브레드크럼 (현재 위치 표시: 홈 > 제품 > 에어컨) */
.breadcrumb {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    font-size: var(--font-size-caption);
    opacity: 0.7;
}

.breadcrumb__separator {
    margin: 0 4px;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* ============================================================
   푸터 (Footer) - 사이트 하단
   ============================================================ */
.footer {
    background-color: var(--color-footer-bg);
    color: var(--color-white);
    padding: 60px 0 0;
}

/* 푸터 상단: 4컬럼 레이아웃 */
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;  /* 4컬럼 비율 */
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* 푸터 회사 소개 (첫 번째 컬럼) */
.footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer__logo-icon {
    font-size: 24px;
}

.footer__logo-text {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
}

.footer__description {
    font-size: var(--font-size-caption);
    color: var(--color-text-light);
    line-height: 1.7;
}

/* 푸터 SNS 아이콘 */
.footer__social {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.footer__social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color var(--transition-fast);
}

.footer__social-link:hover {
    background-color: var(--color-ice-blue);
}

/* 푸터 링크 섹션 */
.footer__section-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer__link {
    font-size: var(--font-size-caption);
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}

.footer__link:hover {
    color: var(--color-ice-blue);
}

/* 푸터 연락처 */
.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--font-size-caption);
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.footer__contact-icon {
    font-size: 16px;
    flex-shrink: 0;              /* 아이콘 크기 고정 */
}

/* 푸터 하단 바 (저작권) */
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: var(--space-lg) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}

.footer__bottom-links {
    display: flex;
    gap: var(--space-md);
}

.footer__bottom-links a:hover {
    color: var(--color-white);
}

/* ============================================================
   스크롤 시 나타나는 애니메이션
   ============================================================ */

/* 페이드인 효과 (스크롤 시 요소가 나타남) */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 화면에 보이면 나타남 (JS에서 클래스 추가) */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   유틸리티 클래스 (자주 사용하는 스타일)
   ============================================================ */
/* ============================================================
   다크/라이트 모드 토글 버튼
   설명: 헤더 우측에 위치하며, 클릭하면 테마가 전환됩니다.
         해(☀️) ↔ 달(🌙) 아이콘이 변경됩니다.
   ============================================================ */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    transition: all var(--transition-fast);
    color: var(--color-white);
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--color-ice-blue);
    background-color: rgba(255,255,255,0.1);
}

/* 다크모드에서 카드, 드롭다운, 모달에 테두리 추가 (가독성) */
[data-theme="dark"] .nav__dropdown {
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .lang-selector__dropdown {
    border: 1px solid var(--color-border);
}

/* 다크모드에서 섹션-다크 스타일 약간 구분 */
[data-theme="dark"] .section--dark {
    background-color: #010409;
}

/* 다크모드 전환 트랜지션 */
[data-theme="dark"] .section,
[data-theme="dark"] .footer,
[data-theme="dark"] .header {
    transition: background-color 0.3s ease;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }