/*!
 * site-effects.css — 하나히어링 경량 마이크로 인터랙션 레이어
 * Tailwind 빌드(app.min.css) 뒤에 로드되어 절제된 모션을 추가한다.
 * 의도: 시니어 친화 + 신뢰감, 0.2~0.4s 범위, prefers-reduced-motion 존중.
 */

/* ----- Pretendard 한글 폰트 (비차단 로딩) ----- */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
    src: local('Pretendard Variable'),
         url('/assets/fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* ----- 부드러운 상태 전환 (색·그림자·테두리·변형) ----- */
a,
button,
summary,
input,
textarea,
select,
article {
    transition:
        color .2s ease-out,
        background-color .2s ease-out,
        border-color .2s ease-out,
        box-shadow .25s ease-out,
        transform .25s ease-out;
}

/* 헤더 그림자 fade (main.js 가 .shadow-sm 토글) */
header {
    transition: box-shadow .25s ease-out, background-color .2s ease-out;
}

/* ----- 카드 호버 lift (시니어 친화 절제형) ----- */
/* hover:shadow 가 붙은 카드/링크 자동 매칭 */
article[class*="hover:shadow"]:hover,
a[class*="hover:shadow"]:hover {
    transform: translateY(-2px);
}

/* ----- 버튼 탭 피드백 ----- */
a[class*="bg-blue-600"]:active,
a[class*="border-blue-600"]:active,
button[type="submit"]:active,
button.bg-blue-600:active {
    transform: scale(.98);
}

/* ----- 폼 focus ring 부드럽게 ----- */
input:focus,
textarea:focus,
select:focus {
    transition: box-shadow .2s ease-out, border-color .2s ease-out;
}

/* ----- FAQ <details> 부드러운 펼침 ----- */
/* + 아이콘 회전 부드럽게 */
details summary span:last-child {
    transition: transform .25s ease-out;
}

/* 콘텐츠(요약 다음 형제 요소들) 페이드+슬라이드 */
details[open] summary ~ * {
    animation: hh-fade-slide .25s ease-out both;
}

@keyframes hh-fade-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- 스크롤 진입 페이드인 (CSS only, @supports 진행성 향상) ----- */
/* 기본: data-fade 가 있어도 무조건 보이게 (지원 안 하는 브라우저 폴백) */
[data-fade] {
    opacity: 1;
}

/* 지원 브라우저: 스크롤 진입 시 자연스럽게 등장 */
@supports (animation-timeline: view()) {
    [data-fade] {
        animation: hh-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}

@keyframes hh-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- 모바일 메뉴 슬라이드 (열릴 때만) ----- */
#mobile-menu:not(.hidden) {
    animation: hh-slide-down .2s ease-out;
}

@keyframes hh-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- 접근성: 동작 줄이기 설정 존중 ----- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    article[class*="hover:shadow"]:hover,
    a[class*="hover:shadow"]:hover,
    a[class*="bg-blue-600"]:active,
    button[type="submit"]:active {
        transform: none !important;
    }
}

/* =========================================================
 * 모바일/태블릿 레이아웃 보정 레이어
 * Tailwind 빌드 누락분 보강. 단방향 다운스케일(데스크톱 기본은 불변).
 * ========================================================= */

/* 0) 가로 스크롤 안전선 — 자식 요소가 viewport 폭 초과해도 body 차단 */
html, body { overflow-x: hidden; }
img, iframe, video, object, embed { max-width: 100%; height: auto; }

/* 1) 비교 표 → 카드 스택화 (about/difference.php .stack-table) */
@media (max-width: 640px) {
    table.stack-table { border: 0; }
    table.stack-table thead { display: none; }
    table.stack-table,
    table.stack-table tbody,
    table.stack-table tr,
    table.stack-table td {
        display: block;
        width: 100%;
    }
    table.stack-table tr {
        border: 1px solid #e5e7eb;
        border-radius: .75rem;
        margin: 0 0 .75rem;
        padding: .75rem 1rem;
        background: #fff;
    }
    table.stack-table td {
        padding: .375rem 0;
        text-align: left;
        border: 0;
    }
    table.stack-table td::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        color: #6b7280;
        font-weight: 700;
        letter-spacing: .025em;
        margin-bottom: .125rem;
    }
}

/* 2) 지역 필터 pill 행 → 좁은 화면 가로 스와이프 (centers.php) */
@media (max-width: 640px) {
    #region-filter {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #region-filter > button { flex-shrink: 0; }
}

/* 3) CTA / Hero 큰 버튼 — 좁은 폰에서 패딩·폰트 다운스케일 */
@media (max-width: 480px) {
    a.inline-flex.px-8.py-4,
    a.inline-flex.items-center.justify-center.px-8.py-4 {
        padding: .75rem 1.25rem;
        font-size: 1rem;
    }
}

/* 4) FAQ <summary> — 320px 등 매우 좁은 폰에서 아이콘·텍스트 충돌 방지 */
@media (max-width: 480px) {
    details > summary.flex.items-start.justify-between {
        gap: .5rem;
        padding: 1rem;
    }
    details > summary span.text-base.font-bold,
    details > summary span.font-bold.text-gray-900 {
        font-size: .95rem;
        line-height: 1.4;
    }
}

/* 5) 센터 페이지 sticky 검색·필터 영역 — 좁은 폰에서 높이 압축 */
@media (max-width: 640px) {
    section.sticky.top-16 .py-4 {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
}

/* 6) 차별점 6대 카드 — 태블릿 폭(768~900)에서 좌측 영역 자연화 */
@media (min-width: 768px) and (max-width: 900px) {
    article.flex-col.md\:flex-row .md\:w-32 { width: 7rem; }
}

/* 7) iOS 사파리 자동 줌 방지 — input 폰트 16px 미만 시 폼 진입 시 줌 */
input, textarea, select { font-size: 16px; }
@media (min-width: 768px) {
    input, textarea, select { font-size: inherit; }
}

/* 8) 매우 좁은 폰(<=380px) 헤딩 다운스케일 */
@media (max-width: 380px) {
    h1.text-4xl { font-size: 1.875rem; line-height: 1.2; }
    h2.text-3xl { font-size: 1.5rem; line-height: 1.25; }
}

/* 9) 예약 폼 — 좁은 폰에서 그리드 갭 축소(시각 밀도) */
@media (max-width: 480px) {
    [data-reservation-form] form .grid { gap: .75rem; }
}

/* =========================================================
 * §10 장문 본문 타이포그래피 — .prose 스코프 안에서만 동작
 * 한국어 가독성: 행간 1.85, h2 자동 구분선, 형제 간 1.25rem 리듬
 * ========================================================= */
.prose { color: #374151; line-height: 1.85; font-size: 1.0625rem; }
.prose > * + * { margin-top: 1.25rem; }

.prose h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    letter-spacing: -0.01em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.prose p { line-height: 1.85; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.5rem; line-height: 1.75; }
.prose li::marker { color: #2563eb; }

.prose strong { color: #111827; font-weight: 700; }
.prose a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid #e5e7eb; }

/* 리드 문장 패턴 — 본문 첫 단락 강조 */
.prose .lead {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.7;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #dbeafe;
    margin-bottom: 0.5rem;
}

@media (max-width: 480px) {
    .prose { font-size: 1rem; line-height: 1.8; }
    .prose h2 { font-size: 1.25rem; margin-top: 2.25rem; }
    .prose .lead { font-size: 1.0625rem; }
}

/* =========================================================
 * §11 네이버 브랜드 컬러 — 블로그 바로가기 버튼
 * Tailwind arbitrary value 빌드 누락 보강
 * ========================================================= */
.bg-naver-green { background-color: #03C75A; }
.bg-naver-green:hover { background-color: #02b350; }

/* =========================================================
 * §12 버튼 텍스트 색상 안전망
 * 일부 브라우저/캐시에서 text-white·text-blue-600 미적용 시 폴백
 * ========================================================= */
a.text-white,
button.text-white { color: #fff; }
a.text-blue-600,
button.text-blue-600 { color: #2563eb; }