/*
 * ============================================================================
 *  공통 스타일 (site.css)
 * ============================================================================
 *  이 파일은 무엇인가요?
 *    - Tailwind 클래스로 표현하기 어려운 공통 효과(배경 질감, 애니메이션, 필터 버튼 등)를 모아 둔 곳입니다.
 *    - 대부분의 레이아웃·색상은 HTML 의 class(Tailwind)로 되어 있고, 색 이름은 assets/tw-config.js 에서 정합니다.
 *
 *  어디서 쓰이나요?
 *    - 모든 공개 페이지(index, program, doctors, stories, faq, booking)의 <head> 에서 불러옵니다.
 *    - 관리자 화면(admin)은 별도 스타일을 쓰며 이 파일을 쓰지 않습니다.
 *
 *  수정할 때 주의할 점
 *    - 클래스 이름을 바꾸면 그 클래스를 쓰는 HTML·JS(site.js 등)도 같이 바꿔야 합니다.
 *    - 움직임(애니메이션)을 추가하면 맨 아래 "움직임 줄이기" 설정에도 꺼지도록 추가해 주세요.
 * ============================================================================
 */

/* ---------- 페이지 기본 ----------
 * html          : 메뉴 클릭 시 부드럽게 스크롤, 고정 메뉴에 제목이 가려지지 않게 위쪽 여백 7rem
 * html.text-large : 상단 "크게" 버튼을 누르면 글자 전체를 112.5% 로 키움 (site.js 가 켜고 끔)
 * .keep         : 한글이 단어 중간에서 줄바꿈되지 않게 함 (제목·문단에 사용)
 * .ease-out-expo : 버튼 등이 부드럽게 커지고 작아지는 전환 효과 */
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
html.text-large { font-size: 112.5%; }
body { background: #f6f4f0; }
.keep { word-break: keep-all; }
.ease-out-expo { transition: all .5s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- 배경 효과 ----------
 * .grain : <body> 에 붙어 화면 전체에 아주 옅은 종이 질감(노이즈)을 깔아 줌. 클릭에는 영향 없음
 * .mesh  : 메인 화면·상단 영역 배경. 오른쪽 위 청록, 왼쪽 아래 베이지 빛이 번진 그라데이션 */
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mesh {
  background:
    radial-gradient(40rem 28rem at 85% 10%, rgba(15,118,110,.14), transparent 60%),
    radial-gradient(30rem 24rem at 10% 90%, rgba(214,196,168,.35), transparent 60%),
    #f6f4f0;
}

/* ---------- 반복 애니메이션 ----------
 * .float / .float-slow : 홈 메인 이미지 위 카드 2개가 위아래로 천천히 떠다니는 효과
 * .ring                : "이번 주 첫 상담 n자리" 등 옆의 초록 점이 퍼져 나가는 효과
 * .marquee             : 홈의 제휴처 이름 띠가 옆으로 계속 흘러가는 효과 (38초에 한 바퀴)
 * .ecg                 : 혈당 그래프 선이 그려지는 효과 (홈 카드, 관리 사례 상단 그래프) */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 8s ease-in-out infinite; animation-delay: -3s; }
@keyframes pulse-ring { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #10b981; animation: pulse-ring 1.8s ease-out infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { animation: marquee 38s linear infinite; }
@keyframes heartbeat { 0% { stroke-dashoffset: 600; } 100% { stroke-dashoffset: 0; } }
.ecg { stroke-dasharray: 600; animation: heartbeat 3.2s cubic-bezier(.65,0,.35,1) infinite; }

/* ---------- 스크롤 등장 효과 ----------
 * .reveal    : 처음엔 투명하고 살짝 아래에 있다가, 화면에 보이면 떠오르며 나타남
 * .reveal.in : site.js 가 화면에 들어온 요소에 "in" 을 붙여 나타나게 함
 * style="--i:2" 처럼 숫자를 주면 그 순서만큼 조금씩 늦게 나타남 (차례로 등장) */
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 110ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 필터 버튼(칩) ----------
 * 프로그램 안내(플랜 추천·검사 항목 분류), 의료진(분야), 관리 사례(고민), 자주 묻는 질문(분류)의 둥근 선택 버튼.
 * 선택된 버튼은 aria-pressed="true" 가 되어 검은 배경으로 바뀝니다. (site.js 의 bindChips 가 처리) */
.chip { border: 1px solid rgba(28,25,23,.12); background: #fff; border-radius: 9999px; padding: .6rem 1.1rem; font-size: .9rem; transition: all .3s cubic-bezier(0.16,1,0.3,1); }
.chip:hover { border-color: rgba(28,25,23,.3); }
.chip[aria-pressed="true"] { background: #1c1917; color: #fff; border-color: #1c1917; }

/* ---------- 페이지 안 메뉴 ----------
 * 프로그램 안내 페이지 상단에 붙어 다니는 메뉴. 지금 보고 있는 구역의 메뉴가 검게 표시됨 */
.subnav a[aria-current="true"] { background: #1c1917; color: #fff; }

/* ---------- 접었다 펴는 목록(아코디언) ----------
 * 자주 묻는 질문의 질문 목록. 펼치면 오른쪽 + 아이콘이 45도 돌아 × 모양이 됨 */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .acc-icon { transform: rotate(45deg); }
.acc-icon { transition: transform .4s cubic-bezier(0.16,1,0.3,1); }

/* ---------- 팝업 창 ----------
 * 의료진 프로필 팝업, 현장 편집의 이미지 선택 창. 뒤 배경을 어둡고 흐리게 처리하고 아래에서 올라오며 열림 */
dialog::backdrop { background: rgba(28,25,23,.45); backdrop-filter: blur(6px); }
dialog[open] { animation: dlg-in .5s cubic-bezier(0.16,1,0.3,1); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

/* ---------- 검색어 강조 ----------
 * 검사 항목 검색, 자주 묻는 질문 검색 결과에서 찾은 글자를 연한 청록 배경으로 표시 */
mark { background: #ccebe6; color: inherit; border-radius: .2rem; padding: 0 .1rem; }

/* ---------- 움직임 줄이기 ----------
 * 기기에서 "동작 줄이기"(어지럼증 등 접근성 설정)를 켠 사용자에게는 모든 애니메이션을 끄고 바로 보여 줌 */
@media (prefers-reduced-motion: reduce) {
  .float, .float-slow, .marquee, .ecg, .ring::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  dialog[open] { animation: none; }
}