/* =====================================================================
   CELLENIQUE theme
   포인트색: #a41920
   기본/폰트: 회색계통
   ===================================================================== */

:root {
  --color-point:        #a41920;
  --color-point-dim:    #8a151b;
  --color-point-soft:   #f6e8e9;

  --color-text:         #2b2b2b;
  --color-text-muted:   #6b6b6b;
  --color-text-light:   #9a9a9a;

  --color-bg:           #ffffff;
  --color-bg-soft:      #f7f7f7;
  --color-bg-card:      #ffffff;

  --color-border:       #e6e6e6;
  --color-border-soft:  #efefef;

  --shadow-card:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-modal:       0 10px 30px rgba(0,0,0,0.18);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --container-max: 1180px;
  /* --header-h: 92px; */
  --header-h: 67px;
  --footer-h: 200px;            /* JS 가 실제 측정값으로 덮어씀 (footer.php) — 첫 페인트용 폴백 */
  --section-pad-y: 56px;        /* .section 의 상하 패딩 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* anchor 점프 시 sticky header 에 가려지지 않도록 viewport 상단 패딩 확보 */
html {
  /* scroll-padding-top: calc(var(--section-pad-y)); */
  scroll-padding-top: 20px;
}

/* Sticky footer + 추가 여백:
   본문이 짧아도 (header + 본문) 영역만으로 viewport 를 가득 채우고,
   footer 는 그 아래로 밀려 첫 화면에서 보이지 않음. 스크롤 시 노출. */
body {
  min-height: calc(100vh + var(--footer-h));
  min-height: calc(100dvh + var(--footer-h));   /* 모바일 주소창 동적 대응 */
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-point); }

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

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

/* 폼 요소도 본문과 동일한 폰트 사용 (브라우저 기본은 monospace 등으로 상속하지 않음) */
input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
}

/* ---------- 공용 컨테이너 ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
}

.section {
  padding: var(--section-pad-y) 0;
}
.section + .section {
  border-top: 1px solid var(--color-border-soft);
}
.section h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section h2::before {
  content: '';
  display: inline-block;
  width: 4px; height: 18px;
  background: var(--color-point);
  border-radius: 2px;
}

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border-soft);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header .header-inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.site-header .logo {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.site-header .logo .point {
  color: var(--color-point);
}
.site-header .menu-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.site-header .menu-btn:hover {
  background: var(--color-bg-soft);
}
.site-header .menu-btn span,
.site-header .menu-btn span::before,
.site-header .menu-btn span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  position: relative;
}
.site-header .menu-btn span::before { position: absolute; top: -7px; left: 0; width: 22px; }
.site-header .menu-btn span::after  { position: absolute; top:  7px; left: 0; width: 22px; }

/* ---------- 햄버거 드로어 ---------- */
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 200;
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 280px;
  background: #fff;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 210;
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer .drawer-head {
  padding: 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--color-border-soft);
}
.drawer .drawer-head .close {
  font-size: 22px;
  color: var(--color-text-muted);
}
.drawer nav { padding: 8px 0; }
.drawer nav a {
  display: block;
  padding: 14px 20px;
  color: var(--color-text);
  font-size: 16px;
  border-bottom: 1px solid var(--color-border-soft);
}
.drawer nav a:hover {
  background: var(--color-bg-soft);
  color: var(--color-point);
}
.drawer .drawer-foot {
  margin-top: auto;
  padding: 16px 20px;
  font-size: 12px;
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border-soft);
}

/* ---------- 인덱스 hero (로고 영역 아래 인사말) ---------- */
.hero {
  padding: 110px 16px;
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--color-point) 0%, var(--color-point-dim) 100%);
  color: #fff;
}
.hero h1 { color: #fff; }
.hero .greeting {
  margin: 0 auto;
  max-width: 720px;
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
}
.hero .greeting a { color: #fff; text-decoration: underline; }

/* hero CTA 버튼 그룹 (가운데 정렬, 줄바꿈 허용) */
.hero-cta-group {
  margin-top: 28px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-cta-group .hero-cta { 
  margin-top: 0;
  width: 140px;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* hero CTA 버튼 (흰 배경 + 포인트 컬러 텍스트, 알약형) */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  /* padding: 14px 32px; */
  background: #fff;
  color: var(--color-point);
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  color: var(--color-point-dim);
}

/* 카카오톡 변형 — 카카오 옐로우 + 검정 텍스트 (브랜드 가이드 컬러) */
.hero-cta.kakao {
  background: #FEE500;
  color: #181600;
}
.hero-cta.kakao:hover {
  background: #FADA0A;
  color: #181600;
}
.hero-cta.kakao .icon {
  width: 18px; height: 18px;
  display: inline-block;
  background: #181600;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.48 3 2 6.58 2 11c0 2.74 1.74 5.16 4.41 6.59l-1.05 3.84a.5.5 0 0 0 .76.55l4.5-2.97c.46.05.92.08 1.38.08 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.48 3 2 6.58 2 11c0 2.74 1.74 5.16 4.41 6.59l-1.05 3.84a.5.5 0 0 0 .76.55l4.5-2.97c.46.05.92.08 1.38.08 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/></svg>") center/contain no-repeat;
}

/* 네이버 변형 — 흰 배경 + 네이버 그린 아이콘 + 진한 텍스트 (캡처 이미지 기준) */
.hero-cta.naver {
  background: #fff;
  color: #222;
  border: 1px solid #e5e5e5;
}
.hero-cta.naver:hover {
  background: #f6fbf8;
  color: #222;
}
.hero-cta.naver.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.hero-cta.naver .icon {
  width: 22px; height: 22px;
  display: inline-block;
  flex-shrink: 0;
}

/* ---------- 카드 그리드 (인스타형) — 직원소개(.staff-grid) 와 동일한 반응형 단계 ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: #d8d8d8;
}
.card .card-thumb {
  aspect-ratio: 1 / 1;
  background: var(--color-bg-soft);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card .card-thumb.video::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.92);
  font-size: 36px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.card .card-body {
  padding: 14px 14px 16px;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 6px;
}
.card .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .card-summary {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.card .card-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-text-light);
  display: flex; justify-content: space-between;
}

/* ---------- 리스트(공지/FAQ) ---------- */
.list-table {
  width: 100%;
  border-top: 2px solid var(--color-text);
  border-collapse: collapse;
}
.list-table th, .list-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  text-align: left;
}
.list-table th {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: center;       /* 컬럼명만 가운데 정렬 (td 는 좌측 정렬 유지) */
}
.list-table tr:hover td {
  background: #fafafa;
}

/* 인덱스 — 헤더(thead) 없는 simple 변형:
 *   - 행 사이 경계선 제거
 *   - 각 행의 양 끝 모서리 라운딩 (table 구조를 유지하기 위해 첫/마지막 td 에 radius 부여)
 *   - 줄무늬 배경 (홀수=연회색, 짝수=투명)
 */
.list-table.simple {
  border-top: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.list-table.simple td {
  border-bottom: 0;
}
.list-table.simple tbody tr td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.list-table.simple tbody tr td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.list-table.simple tbody tr:nth-child(odd)  td { background: var(--color-bg-soft); }
.list-table.simple tbody tr:nth-child(even) td { background: transparent; }
.list-table.simple tr:hover td { background: #efefef; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; 
  padding: 0 16px;
  border-radius: var(--radius-lg);
  font-size: 14px; 
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
}
.btn:hover { border-color: var(--color-point); color: var(--color-point); }
.btn.primary {
  background: var(--color-point);
  border-color: var(--color-point);
  color: #fff;
}
.btn.primary:hover {
  background: var(--color-point-dim);
  border-color: var(--color-point-dim);
  color: #fff;
}
.btn.ghost { background: transparent; }

/* ---------- 푸터 ---------- */
.site-footer {
  margin-top: auto;            /* sticky footer: 본문이 짧으면 viewport 하단으로 밀림 */
  /* padding: 32px 0 48px; */
  padding: 32px 0 120px;
  background: #2b2b2b;
  color: #c8c8c8;
  font-size: 13px;
}
.site-footer .container {
  display: flex; flex-direction: column; gap: 6px;
}
.site-footer .point {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

/* ---------- 인덱스 전용 (섹션 헤더 / 빈 상태 / 더보기 / 매장 오는길) ---------- */
.hero h1 {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 섹션 헤더: 좌 제목 + 우 액션 */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.section-head h2 { margin: 0; }
.section-head .actions {
  display: flex;
  /* gap: 8px; */
  gap: 15px;
  align-items: center;
}

.section-more {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* 작은 액션 버튼 변형 */
.btn.sm {
  height: 34px;
  font-size: 13px;
  padding: 0 12px;
}

/* 빈 상태 박스 */
.empty-card {
  min-height: 120px;
  padding: 32px;
  text-align: center;
  color: var(--color-text-light);
  /* border: 1px dashed var(--color-border); */
  border-radius: var(--radius-md);
}

/* 카드 anchor 기본 (텍스트 데코 제거) */
a.card { text-decoration: none; color: inherit; }

/* card-thumb 변형: 이미지 없는 placeholder */
.card-thumb.point {
  background: var(--color-point-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-thumb.point .icon {
  color: var(--color-point);
  font-size: 42px;
}

/* 피부관리후기 카드 썸네일 — 그림자 + 하단 그라데이션 오버레이 */
#review .card-thumb {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
#review .card-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%); */
  background: linear-gradient(150deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 더보기 바 (좌우 라인 + 가운데 텍스트 버튼) */
.more-bar {
  margin-top: 32px;
  align-items: center;
  /* gap: 18px; */
  /* display 는 JS 가 토글 (none ↔ flex) — 인덱스 PHP 의 인라인 style 로 초기 none */
}
.more-bar .line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.more-bar button {
  background: none;
  border: 0;
  padding: 6px 18px;
  font-size: 15px;
  /* font-weight: 700; */
  color: var(--color-text);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.more-bar button:hover { color: var(--color-point); }

/* 인덱스 list-table 셀 변형 */
.list-table td.col-author { font-size: 13px; }
.list-table td.col-date   { font-size: 13px; color: var(--color-text-muted); }
.list-table td.col-num    { color: var(--color-text-light); }

/* .list-table .col-num    { width: 60px; } */
.list-table .col-num    { width: 70px; }
.list-table .col-author { width: 130px; }
.list-table .col-date   { width: 130px; }
/* 제목을 제외한 컬럼은 헤더/데이터 모두 가운데 정렬 */
.list-table .col-num,
.list-table .col-author,
.list-table .col-date   { text-align: center; }

/* 매장 오는길 */
.directions-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}
.directions-info > div + div { margin-top: 14px; }
.directions-map {
  min-height: 280px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.directions-map .empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  color: var(--color-text-light);
}

/* 유틸리티 */
.muted { color: var(--color-text-light); }

/* ---------- 전화상담요청(callBackLead) 공용 카드/버튼 ---------- */
.lead-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 36px 32px;
  text-align: center;
}
.lead-card .lead-eyebrow {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.lead-card .lead-greeting {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}
.lead-card .lead-desc {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0 0 24px;
  line-height: 1.6;
}
.lead-card .lead-actions {
  display: flex;
  /* gap: 10px; */
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.lead-card .lead-foot {
  margin-top: 24px;
  font-size: 12px;
}
.lead-card .lead-foot a { color: var(--color-text-light); }

/* lead 영역 공용 버튼 — 최소 폭 130px / 높이 50px */
.btn.lead {
  /* min-width: 130px; */
  min-width: 100px;
  /* height: 50px; */
  height: 40px;
  font-size: 14px;
  /* padding: 0 20px; */
  /* display: inline-flex; */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 로그인 */
.login.logo {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.02em;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
  .login.logo .point {
    color: var(--color-point);
  }



/* ---------- Scroll reveal (htdocsMA/css/common_body.css 그대로) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-left.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-right {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-right.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ---------- 직원 소개 카드 (인덱스 #staff) ---------- */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.staff-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.staff-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: #d8d8d8;
}
.staff-photo {
  aspect-ratio: 1 / 1;
  background: var(--color-bg-soft);
  overflow: hidden;
  position: relative;
}
.staff-photo img {
  width: 100%; 
  /* height: 100%; */
  object-fit: cover; display: block;
}
.staff-photo .ph {
  width: 100%; height: 100%;
  background: var(--color-bg-soft);
}
.staff-body {
  padding: 14px 14px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.staff-name {
  font-size: 15px; font-weight: 700;
  color: var(--color-text);
}
.staff-name .pos {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 13px;
  margin-left: 4px;
}
.staff-role {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.staff-career {
  font-size: 12.5px;
  color: var(--color-text-light);
  line-height: 1.6;
  white-space: pre-line;
}
@media (max-width: 1024px) {
  .staff-grid,
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .staff-grid,
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 420px) {
  .staff-grid,
  .card-grid { grid-template-columns: 1fr; }
}

/* ---------- 직원소개 초기 2행 접힘 (+ 더보기 누르면 JS 가 .is-collapsed 제거) ---------- */
/* 4컬럼 → 처음 8개만 노출 */
.staff-grid.is-collapsed > .staff-card:nth-child(n+9) { display: none; }
@media (max-width: 1024px) {
  /* 3컬럼 → 처음 6개만 노출 */
  .staff-grid.is-collapsed > .staff-card:nth-child(n+7) { display: none; }
}
@media (max-width: 720px) {
  /* 2컬럼 → 처음 4개만 노출 */
  .staff-grid.is-collapsed > .staff-card:nth-child(n+5) { display: none; }
}
@media (max-width: 420px) {
  /* 1컬럼 → 처음 2개만 노출 */
  .staff-grid.is-collapsed > .staff-card:nth-child(n+3) { display: none; }
}

/* ---------- 시술/상품 메뉴 카드 (이미지 + 가운데 오버레이 제목) ---------- */
.treatment-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.treatment-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.treatment-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.treatment-card .ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-light);
}
/* 이미지 위로 약한 음영 그라데이션 — 위/아래 어둡고 가운데가 살짝 진하게 */
.treatment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0.10) 35%,
      rgba(0,0,0,0.10) 65%,
      rgba(0,0,0,0.42) 100%),
    radial-gradient(ellipse at center,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0)    65%);
  pointer-events: none;
}
.treatment-card .overlay-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: #fff;
  /* font-size: 24px; */
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  /* 배경 명도가 어떻게 변하든 충분히 읽히도록 다층 그림자 */
  text-shadow:
    0 0 14px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 1;
  word-break: keep-all;
}
@media (max-width: 1024px) {
  .treatment-card .overlay-title { font-size: 21px; }
}
@media (max-width: 720px) {
  /* .treatment-card .overlay-title { font-size: 18px; padding: 12px; } */
  .treatment-card .overlay-title { font-size: 24px; padding: 12px; }
}
@media (max-width: 420px) {
  .treatment-card .overlay-title { font-size: 22px; }
}

/* 시술/상품 초기 3행 접힘 (피부관리후기와 동일 페이지네이션) */
/* 4컬럼 → 처음 12개 */
.card-grid.is-collapsed > .treatment-card:nth-child(n+13) { display: none; }
@media (max-width: 1024px) {
  /* 3컬럼 → 처음 9개 */
  .card-grid.is-collapsed > .treatment-card:nth-child(n+10) { display: none; }
}
@media (max-width: 720px) {
  /* 2컬럼 → 처음 6개 */
  .card-grid.is-collapsed > .treatment-card:nth-child(n+7) { display: none; }
}
@media (max-width: 420px) {
  /* 1컬럼 → 처음 3개 */
  .card-grid.is-collapsed > .treatment-card:nth-child(n+4) { display: none; }
}

/* ---------- 미니 달력 + 시간대별 일정 (calendarRender) ---------- */
.cal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.cal-month {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
}
.cal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.cal-head .ym { font-weight: 700; }
.cal-head button {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 16px;
}
.cal-head button:hover {
  border-color: var(--color-point);
  color: var(--color-point);
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .h {
  font-size: 12px; color: var(--color-text-muted);
  text-align: center; padding: 6px 0; font-weight: 600;
}
.cal-grid .h.sun { color: #d7494a; }
.cal-grid .h.sat { color: #3672cc; }
.cal-grid .d {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  padding: 4px;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  border: 1px solid transparent;
}
.cal-grid .d:hover { background: var(--color-bg-soft); }
.cal-grid .d.other { color: var(--color-text-light); cursor: default; }
.cal-grid .d.other:hover { background: transparent; }
.cal-grid .d.today  { border-color: var(--color-point-soft); }
.cal-grid .d.active { background: var(--color-point); color: #fff; }
.cal-grid .d.active:hover { background: var(--color-point-dim); }
.cal-grid .d .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-point);
  margin-top: auto;
}
.cal-grid .d.active .dot { background: #fff; }

.cal-day {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.cal-day h3 { margin: 0 0 12px; font-size: 16px; }
.cal-day .ev {
  position: relative;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-point);
}
.cal-day .ev .ev-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-right: 24px;
}
.cal-day .ev .title {
  font-weight: 600;
  font-size: 13.5px;
  min-width: 0;
  word-break: break-word;
}
.cal-day .ev .time {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-day .ev .desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-word;
  padding-right: 24px;
}
.cal-day .ev.event { border-left-color: #888; }
.cal-day .empty {
  color: var(--color-text-light);
  font-size: 13.5px;
  padding: 14px 0;
  text-align: center;
}

/* ---------- 반응형 ---------- */
@media (max-width: 720px) {
  /* .section { padding: 40px 0; } */
  .section h2 { font-size: 19px; }
  /* .hero { padding: 40px 16px 24px; } */
  .hero { padding: 40px 16px 60px; }
  .hero h1 { font-size: 26px; }
  .hero .greeting { font-size: 15px; }
  .directions-grid { grid-template-columns: 1fr; }
  .cal-wrap { grid-template-columns: 1fr; }
}