@charset "utf-8";
/* ============================================================
   lydia-main.css
   리디아 여성의원 — 메인 홈 전용 스타일
   (헤더·푸터 제외 / reset.css·font.css 선적용 전제)
   ============================================================ */


/* ─────────────────────────────────────────────
   0. 공통 유틸
────────────────────────────────────────────── */
.lydia-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left:  var(--safe-padding);
  padding-right: var(--safe-padding);
}

/* 섹션 공통 상하 여백 */
.section-pad {
  padding-top:    var(--sp-5xl);
  padding-bottom: var(--sp-5xl);
}


/* ─────────────────────────────────────────────
   2. 서비스 카드 그리드
────────────────────────────────────────────── */
.service-grid {
  background: var(--bg-soft);
  padding: var(--sp-4xl) var(--safe-padding);
}

.service-grid-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.service-grid-logo {
  text-align: center;
  margin-bottom: var(--sp-xl);
}
.service-grid-logo img {
  height: 38px;
  width: auto;
  opacity: 0.75;
}

/* 6칸 카드 그리드: 3열 × 2행 */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
}

/* ── 개별 카드 */
.service-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  color: var(--white);
  text-decoration: none;
}

/* 카드별 배경 이미지 — 실제 서버 이미지 경로로 교체 */
.card-vaginal-filler { 
  background: url('https://lydia.oneup-creative.kr/wp-content/uploads/2026/06/subj01.jpg') center/cover no-repeat; 
  color: #73226c;
}
.card-whitening      { 
  background: url('https://lydia.oneup-creative.kr/wp-content/uploads/2026/06/subj02.jpg') center/cover no-repeat;
  color: #852960;
}
.card-myoma          { 
  background: url('https://lydia.oneup-creative.kr/wp-content/uploads/2026/06/subj03.jpg') center/cover no-repeat; 
  color: #772340;
}
.card-lifting        { background: url('https://lydia.oneup-creative.kr/wp-content/uploads/2026/06/subj04.jpg') center/cover no-repeat; }
.card-dotblemish     { background: url('https://lydia.oneup-creative.kr/wp-content/uploads/2026/06/subj05.jpg') center/cover no-repeat; }
.card-acne           { background: url('https://lydia.oneup-creative.kr/wp-content/uploads/2026/06/subj06.jpg') center/cover no-repeat; }

/* 그라디언트 오버레이 */
.card-overlay {
  position: absolute;
  inset: 0;
  transition: opacity var(--duration);
}

/* hover 시 오버레이 어둡게 */
.service-card:hover .card-overlay { opacity: 0.85; }
.service-card:hover { transform: scale(1.015); z-index: 2; }
.service-card { transition: transform var(--duration) var(--ease-out); }

/* 카드 텍스트 본문 */
.card-body {
    position: relative;
    z-index: 1;
    padding: var(--sp-lg) var(--sp-lg) var(--sp-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    gap: var(--sp-2xs);
    margin-top: var(--sp-sm);
}

.card-en {
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 500;
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-xs);
}

.card-label {
  font-size: var(--fs-body);
  opacity: 0.9;
}

.card-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.card-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  opacity: 0.9;
  margin-top: var(--sp-r);
  word-break: keep-all;
}


/* ─────────────────────────────────────────────
   3. 정품 · 정량
────────────────────────────────────────────── */
.genuine-section {
  position: relative;
  background-color: var(--bg-genuine);
  background-image: url('/wp-content/uploads/2026/06/main_con02_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--sp-5xl) var(--safe-padding);
  text-align: center;
}
 
/* 텍스트 가독성 보조 — 이미지가 밝으므로 흰색 반투명 오버레이 */
.genuine-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 0;
}
 
.genuine-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-r);
}
 
.genuine-badge {
  display: inline-block;
  border: 1px solid var(--accent-purple);
  color: var(--accent-purple);
  font-size: var(--fs-sm);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  padding: 0.35em 1.2em;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-align: center;
}
 
.genuine-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-hero));
  color: var(--accent-purple);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
}

.genuine-bar {
  display: block;
  width: 96px;
  height: 2px;
  background: var(--accent-purple);
  margin: var(--sp-r) auto 0;
}
 
.genuine-desc {
  font-size: var(--fs-body);
  color: var(--accent-purple);
  line-height: var(--lh-loose);
  word-break: keep-all;
}


/* ─────────────────────────────────────────────
   4. 공지 / 이벤트 / 카카오
────────────────────────────────────────────── */
.notice-section {
  background: var(--bg-notice);
  padding: var(--sp-4xl) var(--safe-padding);
}
 
.notice-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 240px;
  gap: var(--sp-xl);
  align-items: stretch;
}
 
/* ── 게시판 컬럼 공통 */
.notice-col {
  display: flex;
  flex-direction: column;
}
 
/* ── 헤더 (타이틀 + more 버튼) */
.notice-board-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-r);
  border-bottom: 1px solid #ddd;
}
 
.notice-board-title {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--txt-base);
  letter-spacing: -0.02em;
}
 
/* 타이틀 내 강조 텍스트 (공지사항, 이벤트) */
.notice-board-title strong {
  font-weight: 700;
}
 
.notice-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--white);
  background: var(--main-color);
  padding: 0.25em 0.9em;
  border-radius: var(--radius-pill);
  transition: background var(--duration);
  letter-spacing: 0.02em;
}
.notice-more-btn:hover { background: var(--main-color-dark); }
 
/* ── 게시판 본문: 이미지 위 → 목록 아래 (세로 배치) */
.notice-board-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-r);
  flex: 1;
}
 
/* 고정 이미지 — 가로 꽉 차게, 비율 유지 */
.notice-thumb {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.notice-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 
/* ── 제목 목록 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
 
.notice-list li a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  transition: color var(--duration);
}
.notice-list li:first-child a { padding-top: 0; }
.notice-list li:last-child  a { border-bottom: none; }
 
.notice-date {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--txt-light);
  font-weight: 400;
  letter-spacing: 0.02em;
}
 
.notice-title-txt {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  line-height: var(--lh-normal);
  word-break: keep-all;
  transition: color var(--duration);
  /* 한 줄 말줄임 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice-list li a:hover .notice-title-txt,
.notice-list li a:hover .notice-date { color: var(--main-color); }
 
.notice-empty {
  font-size: var(--fs-sm);
  color: var(--txt-light);
  padding-top: var(--sp-sm);
}
 
/* ── 카카오톡 박스 */
.kakao-col {
  /* notice-inner grid 3번째 열 */
}
 
.kakao-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: box-shadow var(--duration), transform var(--duration);
    cursor: pointer;
}
.kakao-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
 
/* 카카오 로고 상단 (리디아 심볼 이미지) */
.kakao-symbol {
  width: 40px;
  height: auto;
}
 
.kakao-label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  letter-spacing: -0.02em;
}
 
/* 카카오톡 아이콘 이미지 래퍼 */
.kakao-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kakao-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.kakao-id {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  letter-spacing: 0.02em;
}
 
.kakao-label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #3c1e1e;
  text-align: center;
}
 
.kakao-id {
  font-size: var(--fs-sm);
  color: #5a3a3a;
  font-weight: 500;
}


/* ─────────────────────────────────────────────
   5. 클리닉 소개 (어두운 배경 + 영문 대형)
────────────────────────────────────────────── */
.clinic-intro {
  position: relative;
  background-color: var(--bg-clinic);
  /* 배경 이미지 — 실제 클리닉 내부 사진으로 교체 */
  background-image: url('https://lydia.oneup-creative.kr/wp-content/uploads/2026/06/main_con05.jpg');
  background-size: cover;
  background-position: center;
  padding: var(--sp-5xl) var(--safe-padding);
  text-align: center;
  overflow: hidden;
}

.clinic-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.clinic-intro-small {
  font-size: var(--fs-body);
  color: var(--accent-golden);
  letter-spacing: 0.2em;
  font-family: var(--font-serif);
}

.clinic-intro-en {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-3xl), 7vw, 3rem);
  color: var(--accent-golden);
  letter-spacing: 0.05em;
  line-height: 1;
  margin: var(--sp-r) auto;
}

.clinic-intro-desc {
  font-size: var(--fs-body);
  color: var(--accent-golden);
  line-height: var(--lh-loose);
  word-break: keep-all;
}

.clinic-intro-point {
  font-size: var(--fs-body);
  color: var(--accent-golden);
  line-height: var(--lh-loose);
  font-weight: 500;
  word-break: keep-all;
}


/* ─────────────────────────────────────────────
   6. 오시는 길
────────────────────────────────────────────── */
.location-section {
  background: var(--bg-base);
  padding: var(--sp-5xl) var(--safe-padding);
}
 
.location-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--sp-4xl);
  align-items: flex-start;
}
 
/* ── 왼쪽: 지도 이미지 + 주소 박스 */
.location-map-col {
  display: flex;
  flex-direction: column;
}
 
.location-map-wrap {
  border: 1px solid #e8e8e8;
  overflow: hidden;
}
.location-map-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
 
.location-address {
  border: 1px solid #e8e8e8;
  border-top: none;
  padding: var(--sp-r) var(--sp-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  background: #fff;
}
.location-address span {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
}
.location-address strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--txt-base);
  letter-spacing: -0.02em;
}
 
/* ── 오른쪽: 교통 정보 */
.location-info-col {
  padding-top: var(--sp-xs);
}
 
.location-title {
  font-size: clamp(var(--fs-lg), 2.5vw, var(--fs-2xl));
  font-weight: 400;
  color: var(--txt-base);
  margin-bottom: var(--sp-xl);
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
}
.location-title strong {
  font-weight: 700;
}
 
.location-routes {
  display: flex;
  flex-direction: column;
}
 
/* ── 공통 행 */
.route-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-lg);
  padding: var(--sp-r) 0;
  border-top: 1px solid #ebebeb;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--txt-base);
}
.route-row:last-child {
  border-bottom: 1px solid #ebebeb;
}
 
/* ── 도보 / 버스 대분류 뱃지 */
.route-type-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 24px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  margin-top: 0.1em;
}
.badge-walk { background: #333; }
.badge-bus  { background: #333; }
 
/* ── 도보 4칸 그리드 */
.walk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xs) var(--sp-xl);
  color: var(--txt-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
 
/* ── 버스 상세 테이블 */
.route-detail {
  flex: 1;
}
 
.bus-table {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
 
.bus-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-r);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
 
/* 정류장명 */
.bus-stop {
  flex-shrink: 0;
  width: 80px;
  color: var(--txt-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  word-break: keep-all;
}
 
/* 노선 번호 영역 */
.bus-lines {
  flex: 1;
  color: var(--txt-base);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
}
 
/* ── 직행/간선/급행/공항/광역 강조 뱃지 */
.bus-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  line-height: 1.6;
}
.kind-direct  { background: #e8222a; }   /* 직행 — 빨강 */
.kind-local   { background: #1a6abf; }   /* 간선 — 파랑 */
.kind-express { background: #e8222a; }   /* 급행 — 빨강 */
.kind-airport { background: #5c8ec7; }   /* 공항 — 하늘 */
.kind-wide    { background: #e8222a; }   /* 광역 — 빨강 */


/* ─────────────────────────────────────────────
   7. 반응형 — 태블릿 (≤ 1024px)
────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* 배너 */
  .banner-image-area { display: none; }
  .banner-text-area  { max-width: 100%; }

  /* 서비스 카드: 2열 */
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 공지 → 2열 */
  .notice-inner {
    grid-template-columns: 1fr 1fr;
  }
  .kakao-col {
    grid-column: 1 / -1;
  }
  .kakao-card {
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-xl);
    padding: var(--sp-r) var(--sp-xl);
    height: auto;
  }

  /* 오시는 길 */
  .location-inner {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────
   8. 반응형 — 모바일 (≤ 639px)
────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* 배너 */
  .banner-slider { height: 320px; }
  .banner-title  { font-size: var(--fs-2xl); }
  .banner-en     { font-size: var(--fs-xs); }
  .banner-desc   { font-size: var(--fs-sm); }
  .banner-text-area { padding-bottom: var(--sp-3xl); }

  /* 서비스 카드: 1열 */
  .service-cards {
    grid-template-columns: 1fr;
  }
  .service-card {
    aspect-ratio: 16 / 7;
  }
  .card-body {
    justify-content: center;
  }

  /* 공지 → 1열 */
  .notice-inner {
    grid-template-columns: 1fr;
  }
  .kakao-card {
    padding: var(--sp-lg);
    height: auto;
  }

  /* 오시는 길 */
  .location-inner {
    gap: var(--sp-xl);
  }
  .route-row {
    flex-wrap: wrap;
  }
}