/*
 * pages.css — 치료 페이지가 아닌 페이지의 공통 규칙 (2026-09-27, 디자인 토큰 3단계 2차)
 *
 * index/about/services/benefits/contact/appointment × EN/KO/ZH/JA (24페이지)의 인라인 <style>에
 * 글자 그대로 똑같이 있던 규칙 44개 중 40개. 값은 그대로 (.compliance-banner margin-top만 같은 값의 var(--header-h)로).
 * 링크 순서: tokens.css → 이 파일 → 인라인 <style>. 그래서 이 파일의 규칙은 인라인 규칙보다 먼저 온다.
 *
 * 인라인에 남긴 공통 규칙 (여기로 오면 인라인의 같은 선택자 기본 규칙이 뒤에 와서 이긴다):
 *   @media(max-width:1024px) .nav-center{display} .hamburger-menu{display} .logo-container{margin-left}
 *   @media(max-width:480px)  .container{padding}
 *
 * 규칙을 추가할 때: 인라인에 같은 선택자·같은 속성이 있으면 여기 두면 안 된다 (위와 같은 이유).
 * 캐시 주의: netlify.toml이 /css/*에 1년 immutable 캐시 → 이 파일을 고치면 링크의 ?v= 값을 올릴 것.
 * privacy-policy: 링크함 (이 파일의 규칙 중 36개를 갖고 있었음 → 인라인에서 삭제. 없던 4개는 .compliance-banner 규칙이고 해당 요소가 없음).
 * terms-of-use: 2026-09-28 링크함 (v=2). 이 파일과 같은 인라인 규칙 10개 삭제. 없던 규칙(img{display:block}·#current-date 등)이
 *   새로 적용돼 날짜 줄 모양이 조금 바뀐다 (눈에 보이는 변경 단계로 Bob 승인).
 * 헤더 통일 (2026-09-28, 3단계 3차, v=2): <body class="header-unified"> 페이지는 치료 페이지(treatments.css v7)와 같은 헤더 —
 *   1299px 이하 햄버거·header 80px·배너 80px부터(흰 띠 없음)·로고 가운데, 1025px 이상 헤더 폭 1400px·로고 왼쪽 20px.
 *   pages.css를 쓰는 26페이지 전부 적용 (index/about/services/benefits/contact/appointment × 4 + privacy-policy, terms-of-use).
 *   해당 인라인 규칙은 삭제. 전체 적용이 끝났으므로 클래스는 다음 정리 단계에서 없앨 수 있다 (CLAUDE.md 참고).
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
            font-family: var(--font-primary);
            background: var(--white);
            color: var(--dark-gray);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
        }

img { max-width: 100%; height: auto; display: block; }

.fade-in.visible { opacity: 1; transform: translateY(0); }

.logo-img:hover { transform: scale(1.03); }

.hamburger-line {
            width: 24px; height: 3px;
            background: var(--dark-gray);
            border-radius: var(--r-xs);
            transition: all 0.3s var(--ease-out-quart);
            transform-origin: center;
        }

.hamburger-menu.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }

.hamburger-menu.active .hamburger-line:nth-child(2) { opacity: 0; transform: translateX(20px); }

.hamburger-menu.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

.mobile-nav-links.active { transform: translateX(0); }

.mobile-nav-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-8);
            padding-bottom: var(--space-4);
            border-bottom: 1px solid var(--light-gray);
        }

.mobile-close-btn:hover { background: var(--light-gray); }

.language-selector { position: relative; display: inline-block; }

.language-option {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-weight: 500;
            color: var(--dark-gray);
            font-size: 14px;
        }

.flag-icon {
            width: 24px; height: 18px;
            border-radius: var(--r-xs);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.1);
            background: var(--surface);
            position: relative;
            font-size: 9px;
            font-weight: bold;
            color: var(--white);
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

.flag-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xs); }

.flag-icon.flag-en { background: linear-gradient(to bottom, #012169 33%, var(--white) 33%, var(--white) 66%, #C8102E 66%); }

.flag-icon.flag-en::after { content: 'EN'; color: #012169; }

.flag-icon.flag-ko { background: linear-gradient(to bottom, var(--white) 50%, #CD2E3A 50%); }

.flag-icon.flag-ko::after { content: '한'; color: #003478; }

.flag-icon.flag-zh { background: #DE2910; }

.flag-icon.flag-zh::after { content: '中'; color: #FFDE00; }

.flag-icon.flag-ja { background: var(--white); position: relative; }

.flag-icon.flag-ja::before {
            content: '';
            position: absolute;
            width: 12px; height: 12px;
            background: #BC002D;
            border-radius: var(--r-round);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }

.flag-icon.flag-ja::after { content: '日'; color: #BC002D; position: relative; z-index: 1; }

.flag-icon.has-image::after,
        .flag-icon.has-image::before { display: none; }

.language-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

.language-dropdown.open .dropdown-menu {
            display: block !important;
            opacity: 1;
            transform: translateY(0);
        }

.dropdown-option:last-child { border-bottom: none; }

.dropdown-option:hover { background: rgb(var(--green-rgb) / var(--a-subtle)); color: var(--primary); }

.dropdown-option.selected { background: rgb(var(--green-rgb) / 0.12); color: var(--primary); font-weight: 600; }

.appointment-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
        }

#current-date, #mobile-current-date { font-weight: 500; margin-bottom: var(--space-1); }

#business-status, #mobile-business-status {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

.compliance-banner {
            background: rgba(26,92,56,0.05);
            padding: 2rem 1rem; text-align: center;
            border-bottom: 2px solid #1A5C38;
            margin-top: var(--header-h);
        }

.compliance-banner p { margin: 0.5rem auto; max-width: 100%; padding: 0 1rem; line-height: 1.8; word-wrap: break-word; }

.compliance-banner a { transition: all 0.3s ease; }

.compliance-banner a:hover { opacity: 0.8; text-decoration: underline; }

/* ---- 헤더 통일 (2026-09-27 시범, 2026-09-28 전체) — 치료 페이지(treatments.css v7)와 같은 동작 ----
   오른쪽 묶음: index·about은 .nav-container, 나머지·치료 페이지는 .nav-right.
   가운데 메뉴: 대부분 .nav-center(ul 또는 nav > ul.nav-links), terms-of-use만 header 안의 ul.nav-links. (마크업 차이, 동작은 같게 맞춤) */
.header-unified .header-container { height: var(--header-h); }  /* contact·terms는 height:100%였음 (header 테두리 1px 때문에 119px → 로고 0.5px 위) */
.header-unified .logo-container { margin-left: var(--space-5); }
/* 헤더 로고 = images/logo-green-header.svg (캔버스 500×200, 원본의 오른쪽 여백만 자름) → max-width도 5/6 (260→216.67, 180→150, 150→125) — 그림 크기 그대로 (2026-09-28) */
.header-unified .logo-img { height: 100px; max-width: calc(260px * 5 / 6); }
.header-unified .nav-container,
.header-unified .nav-right { margin-right: var(--space-5); }
.header-unified .mobile-nav-item a { text-align: center; }
@media (min-width: 1025px) {
    .header-unified header .header-container { max-width: 1400px; padding: 0; }
}
@media (max-width: 1299px) {
    .header-unified header,
    .header-unified .header-container { height: 80px; }
    .header-unified .header-container { justify-content: center; }
    .header-unified .nav-center,
    .header-unified header .nav-links { display: none; }
    .header-unified .hamburger-menu { display: flex; position: absolute; right: 16px; }
    .header-unified .nav-right > .language-selector,
    .header-unified .nav-container > .language-selector,
    .header-unified .appointment-container { display: none; }
    .header-unified .logo-container { justify-content: center; margin-left: 0; }
    .header-unified .compliance-banner { margin-top: var(--space-20); }
    /* 오른쪽 묶음은 비어 있음(햄버거는 absolute) → 여백 20px이 로고를 밀지 않게 (2026-09-28) */
    .header-unified .nav-container,
    .header-unified .nav-right { margin-right: 0; }
    .header-unified .mobile-nav-item .language-selector { display: flex; justify-content: center; position: relative; }
}
@media (max-width: 768px) {
    .header-unified .logo-img { max-width: 150px; }
}
@media (max-width: 480px) {
    .header-unified .logo-img { max-width: 125px; }
}

/* 신뢰 바 모바일 압축 (480px 이하만, 2026-09-29) — EN 4항목이 390px에서 3줄 이내. 인라인 style의 font-size(1.1rem)를 이기려고 !important. 데스크톱은 그대로 */
@media (max-width: 480px) {
    section.compliance-banner { padding: var(--space-3) var(--space-2) !important; }
    section.compliance-banner p { font-size: 0.75rem !important; line-height: 1.6 !important; padding: 0 !important; margin: 0 auto !important; word-break: keep-all; }
}
