/*
 * treatments.css — 치료 페이지 공통 규칙 (2026-09-26, 디자인 토큰 3단계 1차)
 *
 * treatments/ 28페이지(7종 × EN/KO/ZH/JA)의 인라인 <style>에 글자 그대로 똑같이 있던 규칙만 모았다.
 * 링크 순서: tokens.css → 이 파일 → 인라인 <style>. 그래서 이 파일의 규칙은 인라인 규칙보다 먼저 온다.
 *
 * 인라인에 남긴 공통 규칙 (여기로 오면 인라인의 같은 선택자 기본 규칙이 뒤에 와서 이긴다):
 *   @media(max-width:1024px) .hero-section{margin-top}   @media(max-width:768px) .cta-section{padding}
 *   (.nav-links/.hamburger-menu/.header-container/.logo-container 규칙은 2026-09-27 헤더 통일 때 기본 규칙과 함께 이 파일로 옮김)
 *
 * 헤더 전환 폭 (2026-09-27): 치료 페이지는 1299px 이하에서 햄버거 메뉴, 1300px부터 데스크톱 메뉴.
 *   언어 전환 드롭다운이 들어가 1025~1272px에서 가운데 메뉴와 겹쳤기 때문 (JA가 가장 넓어 1273px부터 안 겹침, 여유를 두고 1300).
 *   사이트의 다른 페이지는 여전히 1024px. 1299px 이하의 header 80px·히어로 80px은 아래 헤더 블록에서 맞춤 (인라인 1024px 규칙은 그대로 둠).
 *
 * 규칙을 추가할 때: 인라인에 같은 선택자·같은 속성이 있으면 여기 두면 안 된다 (위와 같은 이유).
 * 캐시 주의: netlify.toml이 /css/*에 1년 immutable 캐시 → 이 파일을 고치면 링크의 ?v= 값을 올릴 것.
 */
*{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:var(--lh-body);overflow-x:hidden;min-height:100vh}
/* ---- 헤더·메뉴 (2026-09-27) ----
   치료 페이지 7종의 헤더/메뉴 CSS를 neck-pain·back-pain 기준으로 통일해 옮김 (각 페이지 인라인의 같은 선택자 규칙은 삭제).
   햄버거 메뉴 = index/about/services와 같은 방식(전체 화면, 가운데 정렬, 대문자 14px).
   header 자체의 모바일 높이(back/neck 120px, 나머지 80px)는 범위 밖이라 인라인에 그대로 둠. */
.header-container{display:flex;align-items:center;justify-content:space-between;height:120px;position:relative;padding:0}
.logo-container{display:flex;align-items:center;margin-left:var(--space-5);flex-shrink:0}
/* 헤더 로고 = images/logo-green-header.svg (캔버스 500×200, 원본 600×200의 오른쪽 여백만 자름) → max-width도 5/6 (260→216.67, 180→150, 150→125)라 그림 크기는 그대로 (2026-09-28) */
.logo-img{height:100px;width:auto;max-width:calc(260px * 5 / 6);transition:all 0.3s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1))}
.logo-img:hover{transform:scale(1.03)}
/* 다른 5종은 인라인에 img{display:block}이 없어 로고가 4px 위에 있었다 → back/neck과 같게 (2026-09-27, 전체 폭) */
.logo-img{display:block}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;list-style:none;gap:var(--space-8);align-items:center}
.nav-links a{text-decoration:none;color:var(--dark-gray);font-weight:500;font-size:14px;padding:var(--space-3) var(--space-4);border-radius:25px;transition:all 0.3s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));text-transform:uppercase;letter-spacing:0.05em}
.nav-links a:hover{color:var(--primary);background:rgb(var(--green-rgb) / 0.07)}
.nav-right{display:flex;align-items:center;gap:var(--space-4);margin-right:var(--space-5);flex-shrink:0}
.hamburger-menu{display:none;flex-direction:column;justify-content:space-around;width:32px;height:32px;background:transparent;border:none;cursor:pointer;padding:var(--space-1);z-index:1001;border-radius:var(--r-sm)}
.hamburger-menu:hover{background:rgb(var(--green-rgb) / 0.1)}
.hamburger-line{width:24px;height:3px;background:var(--dark-gray);border-radius:var(--r-xs);transition:all 0.3s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));transform-origin:center}
.hamburger-menu.active .hamburger-line:nth-child(2){opacity:0;transform:translateX(20px)}
.mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9998;opacity:0;visibility:hidden;transition:all 0.3s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1))}
.mobile-nav-links{position:fixed;top:0;right:0;width:100%;height:100vh;background:var(--white);z-index:99999;padding:var(--space-8);transform:translateX(100%);transition:transform 0.3s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));overflow-y:auto}
.mobile-close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--dark-gray);padding:var(--space-2);border-radius:var(--r-round)}
.mobile-nav-item{margin-bottom:var(--space-4)}
.mobile-nav-item a{display:block;padding:var(--space-5);color:var(--dark-gray);text-decoration:none;font-weight:500;border-radius:var(--r-md);transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.05em;font-size:14px;text-align:center}
.mobile-nav-item a:hover{background:rgb(var(--green-rgb) / 0.1);color:var(--primary)}
.cta-button{background:var(--gold);color:var(--white);padding:var(--space-4) var(--space-8);border-radius:var(--r-pill);text-decoration:none;font-weight:700;font-size:14px;transition:all 0.4s var(--ease-out-expo, cubic-bezier(0.19,1,0.22,1));box-shadow:var(--shadow-card);text-transform:uppercase;letter-spacing:0.05em;border:none;cursor:pointer;display:inline-block}
.cta-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-gold-hover)}
.time-display{text-align:center;font-size:11px;color:var(--medium-gray);line-height:1.3;min-height:35px;display:flex;flex-direction:column;justify-content:center}
#current-date,#mobile-current-date{font-weight:500;margin-bottom:var(--space-1)}
/* 헤더 폭(1025px 이상): 다른 5종은 인라인 .container가 1200px이라 back/neck(1400px, 좌우 여백 0)과 같게 맞춤 */
@media(min-width:1025px){header .header-container{max-width:1400px;padding:0}}
@media(max-width:1299px){.nav-links{display:none}.hamburger-menu{display:flex}.header-container{height:80px}.logo-container{justify-content:center;margin-left:0}.header-container{justify-content:center;position:relative}}
/* 1299px 이하(햄버거 메뉴) 헤더 높이 80px·히어로 시작 80px로 통일 (2026-09-27): 전에는 1025~1299px에서 header 120px 안에 80px 헤더가
   있어 아래 40px 흰 띠가 생겼고, back/neck은 1024px 이하에서도 120px header가 히어로 위 40px을 덮었다.
   인라인 기본 규칙(header{height:120px}, .hero-section{margin-top:120px})이 이 파일보다 뒤에 오므로 선택자를 한 단계 구체적으로 썼다.
   로고 위치는 위쪽 헤더 블록의 .logo-img{display:block}(전체 폭)으로 맞춤. */
@media(max-width:1299px){html header{height:80px}body .hero-section{margin-top:var(--space-20)}}
/* 1299px 이하: 오른쪽 묶음(.nav-right)은 비어 있으므로(햄버거는 absolute) 여백 20px이 로고를 왼쪽으로 10px 밀지 않게 0 (2026-09-28) */
@media(max-width:1299px){.nav-right{margin-right:0}}
@media(max-width:768px){.logo-img{height:100px;max-width:150px}}
@media(max-width:480px){.logo-img{height:100px;max-width:125px}}
.hamburger-menu.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.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)}
.appointment-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
#business-status,#mobile-business-status{font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.05em}
/* 관련 증상 카드 배경 — 경로는 이 파일(css/) 기준. 인라인에서 쓰던 ../images/와 같은 /images/를 가리킨다 */
.condition-card[href*="neck-pain"]::before{background-image:url('../images/neck-pain.webp')}
.condition-card[href*="back-pain"]::before{background-image:url('../images/back-pain.webp')}
.condition-card[href*="headaches"]::before{background-image:url('../images/headache.webp')}
.condition-card[href*="shoulder-pain"]::before{background-image:url('../images/shoulder-pain.webp')}
.condition-card[href*="disc-injuries"]::before{background-image:url('../images/sciatica.webp')}
/* 자세 카드: 24페이지 인라인에 무릎 사진(knee-pain.webp)이 잘못 들어가 있던 것을 posture-assessment.webp로 고쳐 이곳으로 옮김 (2026-09-27, v=2).
   posture-scoliosis 4페이지는 원래 인라인에 같은 규칙이 있다 */
.condition-card[href*="posture-scoliosis"]::before{background-image:url('../images/posture-assessment.webp')}
.footer-section a:hover{color:var(--gold)}
@media(max-width:1299px){.appointment-container{display:none}.hamburger-menu{position:absolute;right:16px}}
@media(max-width:768px){.footer-section{text-align:center}.footer-section h3{text-align:center}.footer-section p{text-align:center}.footer-section a{text-align:center}}

/* ---- 언어 전환 드롭다운 (2026-09-27) ----
   services.html의 Language Selector CSS를 그대로 옮김. 차이: --ease-out-quart가 없는 치료 페이지(disc/headaches/posture/
   shoulder/whiplash)가 있어 services와 같은 값을 대체값으로 넣었다. 마크업·스크립트는 각 페이지 + js/treatments.js */
.language-selector { position: relative; display: inline-block; }
.language-dropdown {
    position: relative; background: var(--white);
    border: 2px solid rgb(var(--green-rgb) / 0.2);
    border-radius: var(--r-md); box-shadow: var(--shadow-card);
    min-width: 160px; cursor: pointer; transition: all 0.3s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
.language-dropdown:hover { border-color: var(--primary); box-shadow: var(--ring); }
.selected-language {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4); background: var(--white); cursor: pointer;
    user-select: none; transition: all 0.3s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
.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; }
.dropdown-arrow { color: var(--medium-gray); font-size: 14px; transition: transform 0.3s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)); font-weight: bold; }
.language-dropdown.open .dropdown-arrow { transform: rotate(180deg); }
.dropdown-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border: 2px solid var(--primary);
    border-radius: var(--r-md); box-shadow: var(--shadow-hover);
    margin-top: var(--space-2); z-index: 99999; max-height: 300px; overflow-y: auto;
    display: none; opacity: 0; transform: translateY(-10px);
    transition: all 0.3s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
.language-dropdown.open .dropdown-menu { display: block !important; opacity: 1; transform: translateY(0); }
.dropdown-option {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); cursor: pointer; transition: all 0.2s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
    font-size: 14px; color: var(--dark-gray); font-weight: 500;
    border-bottom: 1px solid var(--border);
}
.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; }
@media (max-width: 1299px) {
    .nav-right > .language-selector { display: none; }
    .mobile-nav-item .language-selector { display: flex; justify-content: center; position: relative; }
}
@media (max-width: 480px) {
    .language-dropdown { min-width: 120px; }
}
@media (hover: none) and (pointer: coarse) {
    .dropdown-option { padding: var(--space-4) var(--space-4); }
}