/**
 * =====================================================
 * Twenty Seventeen Child Theme - custom.css
 * =====================================================
 * This file is reserved for custom CSS rules.
 * Add your styles below to override or extend
 * the default Twenty Seventeen theme styles.
 *
 * Notes:
 * - Keep selectors specific to avoid conflicts.
 * - Use comments to organize sections clearly.
 * - Test changes on desktop and mobile devices.
 */

/* -----------------------------------------------------
   Global Styles
   ----------------------------------------------------- */
body {
  font-family: 'Noto Sans KR', sans-serif !important;
}

body.home .entry-title {
font-size: 1.2rem !important;
}

/* Menu page body color */
body:not(.home) .site-content-contain {
  background: #f1efe9 !important;
}

body:not(.home) .navigation-top {
  background: #f1efe9 !important;
}

/* 메뉴 페이지 전용 footer 색상 */
body:not(.home) footer {
  background-color: #e7e5dd; /* 풋터 배경색 */
  color: #282828;            /* 풋터 글자색 */
}

.site-branding-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* 왼쪽 정렬 */
}

.site-description {
    padding-left: 50px !important;
    /* 만약 로고와 정렬을 맞추기 위해 왼쪽 마진이 필요한 거라면 margin-left를 쓰셔도 됩니다. */
}
.site-title img {
    display: block;
}

/* 모바일 (화면 폭 767px 이하) 왼쪽 정렬 최적화 */
@media screen and (max-width: 767px) {
    /* 1. 브랜딩 컨테이너를 왼쪽으로 정렬 */
    .site-branding-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* 왼쪽 정렬 */
        text-align: left !important;
        padding-left: 15px !important; /* 화면 끝에 너무 붙지 않게 최소한의 여백만 부여 */
    }

    /* 2. 모바일 로고 크기 조절 */
    .site-title img {
        max-width: 130px !important; /* 모바일용 크기 (필요시 조절) */
        height: auto !important;
        margin-left: 0 !important; /* 왼쪽 밀착 */
    }

    /* 3. 모바일 태그라인 설정 */
    .site-description {
        padding-left: 0 !important; /* PC의 50px을 해제하여 로고 시작점과 맞춤 */
        margin-top: 5px !important;
        font-size: 12px !important;
        text-align: left !important;
    }
}

/* 기본 단일 열 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* 좌우 컬럼 */
.fade-in-left,
.fade-in-right {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-left { transform: translateX(-30px); }
.fade-in-right { transform: translateX(30px); }
.fade-in-left.appear,
.fade-in-right.appear {
  opacity: 1;
  transform: translateX(0);
}

/* 모바일에서는 좌우도 아래에서 위로 */
@media (max-width: 768px) {
  .fade-in-left,
  .fade-in-right {
    transform: translateY(20px);
  }
  .fade-in-left.appear,
  .fade-in-right.appear {
    transform: translateY(0);
  }
}

/* ================================
   글로벌 컨테이너 확장
   ================================ */
.wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ================================
   홈/헤더 이미지 페이지: primary를 전체 폭으로
   ================================ */
body.home #primary.content-area,
body.has-header-image #primary.content-area {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 768px) {
  body.home .entry-header .entry-title {
    margin-top: 0.8em;
    margin-bottom: 0.25em;
  }
}
/* ================================
   일반 페이지: primary 확장
   - 홈/헤더 이미지 페이지는 제외
   ================================ */
body:not(.home):not(.has-header-image) #primary.content-area {
  max-width: 1100px !important; /* 원하는 값으로 조정 가능 */
  margin: 0 auto !important;
}

/* ================================
   블록 에디터 컬럼 복원 (1컬럼 페이지)
   ================================ */
.page-one-column .entry-content .wp-block-columns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5em !important;
}

.page-one-column .entry-content .wp-block-column {
  flex: 1 !important;
}

/* ================================
   메인 전면 이미지 커버 유지
   ================================ */
.has-header-image .custom-header,
.has-header-image .custom-header-media {
  width: 100% !important;
  max-width: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* 히어로에 텍스트 애니메이션 추가 */
.hero-text-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  z-index: 10;
  line-height: 1.4;
  white-space: nowrap;

  font-family: 'Nanum Myeongjo', serif;
  opacity: 0;
}

/* 기본 페이드/슬라이드 */
.fade-in-up    { animation: fadeInUp 1.2s ease forwards; }
.fade-in-down  { animation: fadeInDown 1.2s ease forwards; }
.fade-in-left  { animation: fadeInLeft 1.2s ease forwards; }
.fade-in-right { animation: fadeInRight 1.2s ease forwards; }

@keyframes fadeInUp   { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeInDown { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeInLeft { from {opacity:0; transform:translateX(-30px);} to {opacity:1; transform:translateX(0);} }
@keyframes fadeInRight{ from {opacity:0; transform:translateX(30px);} to {opacity:1; transform:translateX(0);} }

/* 타이핑 */
.typing {
  border-right: 2px solid rgba(255,255,255,0.75);
  animation: blinkCursor 0.8s infinite;
  opacity: 1;
}
@keyframes blinkCursor { from {border-color:rgba(255,255,255,0.75);} to {border-color:transparent;} }

/* 블러 제자리 */
.blur-fade { animation: blurFade 1.5s ease forwards; }
@keyframes blurFade {
  0%   { opacity:0; filter:blur(8px); }
  50%  { opacity:1; filter:blur(0px); }
  100% { opacity:0; filter:blur(6px); }
}

/* 블러 이동 */
.blur-fade-move { animation: blurFadeMove 1.8s ease forwards; }
@keyframes blurFadeMove {
  0%   { opacity:0; filter:blur(8px); transform:translateY(20px); }
  50%  { opacity:1; filter:blur(0px); transform:translateY(0); }
  100% { opacity:0; filter:blur(6px); transform:translateY(-20px); }
}

/* 반짝임 */
.glow-fade { animation: glowFade 2s ease forwards; }
@keyframes glowFade {
  0%   { opacity:0; text-shadow:0 0 20px rgba(255,255,255,0.8); }
  50%  { opacity:1; text-shadow:0 0 40px rgba(255,255,255,1); }
  100% { opacity:0; text-shadow:0 0 10px rgba(255,255,255,0.5); }
}

/* 반응형 */
@media (max-width: 1024px) { .hero-text-overlay { font-size: 1.6rem; } }
@media (max-width: 768px)  { .hero-text-overlay { font-size: 1.3rem; padding: 0 10px; } }
@media (max-width: 480px)  { .hero-text-overlay { font-size: 1.1rem; line-height: 1.3; } }


/* ================================
   모바일 대응 (768px 이하)
   ================================ */
@media screen and (max-width: 768px) {
  .wrap {
    max-width: 100% !important;
    padding: 0 1em !important;
  }

  /* 모바일에서는 모든 페이지에서 primary를 꽉 차게 */
  #primary.content-area {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 1em !important;
  }

  .page-one-column .entry-content .wp-block-columns {
    display: block !important; /* 모바일에선 세로로 쌓기 */
    gap: 0 !important;
  }

  .page-one-column .entry-content .wp-block-column {
    flex: none !important;
    width: 100% !important;
  }
}

/* -----------------------------------------------------
   Header Customization
   ----------------------------------------------------- */


/* 1. 헤더 컨테이너 설정: 사라진 요소를 다시 화면에 표시 */
body:not(.home) .site-header {
    position: relative !important; /* absolute 대신 relative로 공간 확보 */
    background: transparent !important;
    z-index: 10;
}

/* 2. 대표 이미지 강제 노출 및 위치 조정 */
body:not(.home) .single-featured-image-header {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 800px !important; /* 이미지 높이 고정 */
    display: block !important; /* 사라짐 방지 */
    z-index: 1 !important;
    margin: 0 !important;
}

body:not(.home) .single-featured-image-header img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. 메뉴바 설정: 배경색 전체 폭 + 75px 높이 */
body:not(.home) .navigation-top {
    background-color: #ffffff !important;
    position: absolute !important;
    top: 165px !important; /* 이미지 상단으로부터 165px 아래 */
    left: 0 !important;
    width: 100% !important;
    height: 75px !important;
    z-index: 999 !important; /* 최상단으로 올림 */
    visibility: visible !important; /* 사라짐 방지 */
}

/* 메뉴 내부 정렬 (메인페이지와 동일하게 좌측 기준선 맞춤) */
body:not(.home) .navigation-top .wrap {
    max-width: 1000px; /* 메인페이지 wrap 폭에 맞춤 */
    margin: 0 auto !important;
    height: 75px !important;
    display: flex;
    align-items: center;
}

/* 4. 본문 시작점: 벌어진 흰색 공간 제거 */
/* 이미지가 absolute이므로 본문을 600px만큼 위로 끌어올리되, 
   이미지가 끝나는 지점(600px)에 정확히 맞춥니다. */
body:not(.home) .site-content-contain {
    margin-top: 0 !important; 
    top: 390px; /* 이미지 높이만큼 아래에서 시작 */
    position: relative;
    z-index: 5;
    background: #ffffff;
}

/* 5. 스티키 상태 (스크롤 시 상단 고정) */
body:not(.home) .navigation-top.site-navigation-fixed {
    position: fixed !important;
    top: 0 !important;
transition: none !important; /* 혹시 모를 애니메이션 충돌 제거 */
}

body:not(.home).admin-bar .navigation-top.site-navigation-fixed {
    top: 32px !important;
}

.main-navigation.toggled-on {
  position: absolute;
  top: 100%;   /* 헤더 바로 아래 */
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9999; /* 다른 요소 위에 오도록 */
}

.main-navigation.toggled-on .sub-menu {
  display: block;   /* 기본적으로 펼쳐진 상태 */
}

/* -----------------------------------------------------
   View Tansitions
   ----------------------------------------------------- */


/* -----------------------------------------------------
   Footer Customization
   ----------------------------------------------------- */
/* 푸터 카피라이트 스타일 */
.site-info .copyright {
  font-size: 12px;       /* 글씨 크기 */
  color: #999999;        /* 글씨 색상 */
}

/* 소셜 아이콘 버튼 스타일 */
.social-links-menu li a {
  display: inline-flex;        /* 아이콘을 가운데 정렬 */
  align-items: center;
  justify-content: center;
  width: 40px;                 /* 버튼 크기 */
  height: 40px;
  border-radius: 50%;          /* 원형 */
  background-color: #adbf9b;   /* 배경색 */
  color: #ffffff;              /* 아이콘 색상 (흰색) */
  text-decoration: none;
  font-size: 18px;             /* 아이콘 크기 */
}

/* 마우스 오버 시 효과 (옵션) */
.social-links-menu li a:hover {
  background-color: #fc8d5e;   /* hover 시 조금 더 진한 파랑 */
  color: #ffffff;
}

.wp-block-search__inside-wrapper {
  background-color: transparent;   /* hover 시 조금 더 진한 파랑 */
  border: none !important;
}

body.home .widget-title {
  display: inline-block;   /* 텍스트 길이만큼만 차지 */
  background-color: #666;
  color: #fff ;
  padding: 5px 10px;       /* 위아래 5px, 좌우 10px */
  border-radius: 3px;      /* 선택사항 */
}

body:not(.home) .widget-title {
  display: inline-block;   /* 텍스트 길이만큼만 차지 */
  background-color: #666;
  color: #fff;
  padding: 5px 10px;       /* 위아래 5px, 좌우 10px */
  border-radius: 3px;      /* 선택사항 */
}

/* -----------------------------------------------------
   End of File
   ----------------------------------------------------- */
.video-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 반응형 비율 유지 */
  overflow: hidden;
}

.video-cover iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

/* 덮는 레이어 */
.video-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  height: 60px; /* 덮는 레이어 높이만 60px */
  background: #222222; /* 사이트 배경색과 맞추기 */
  z-index: 2;
}

/* 위쪽 */
.video-overlay.top {
  top: 0;
}

/* 아래쪽 */
.video-overlay.bottom {
  bottom: 0;
}

/* 기본은 데스크탑 */
.video-desktop { display: block; }
.video-mobile { display: none; }

/* 모바일에서는 조금 더 세로 공간 확보 (4:3 비율) */
@media (max-width: 768px) {
  .video-cover::before {
    padding-top: 75%; /* 4:3 비율 */
  }

  /* 모바일 분기 */
  .video-desktop { display: none; }
  .video-mobile { display: block; }

  .video-overlay {
    display : none;
  }
}


/* 반투명 오버레이 추가 */
.single-featured-image-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* 검정색 반투명 오버레이 */
  z-index: 1;                  /* 이미지 위, 글자 아래 */
}

/* 엔트리헤더 위치 조정 */
.single-featured-image-header .entry-header {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2; /* 오버레이 위에 표시 */
}

/* 타이틀 스타일 (배경 제거, 글자만 강조) */
.single-featured-image-header .entry-title {
  color: #fff !important;
  font-size: 2.5rem !important; /* 글자 크기 키우기 */
  font-weight: bold;
}

/* 섭타이틀 스타일 () */
.subtitle-wrap {
    position: relative;
    display: inline-block;
    margin: 40px;
  }

.subtitle-square {
  width: 60px;
  height: 60px;
  background-color: #b6a389;
  color: #fff;
  font-size: 45px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* 위쪽 레이어 */
  transform: rotate(-5deg); /* 텍스트를 살짝 회전 */
}

.subtitle-rect {
  position: absolute;
  top: 30px;        /* 정사각형 아래쪽으로 겹치게 */
  left: 30px;       /* 오른쪽으로 조금 겹치게 */
  background-color: #666;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: inline-flex; /* 텍스트 길이에 맞춰 자동 크기 */
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px 0 42px; /* 왼쪽 패딩을 크게 줘서 텍스트가 정사각형에 안 겹치도록 */
  height: 36px;
  z-index: 1;
  white-space: nowrap;
}

/* 카페이야기 CAROUSEL */
.greeting-carousel {
  position: relative;
  width: 400px;
  height: 600px;
  margin: 0 auto;
  /* 그림자와 둥근 모서리를 부모에 적용 */
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  /* 그림자를 살리기 위해 overflow 제거 */
  overflow: visible; /* 또는 이 줄을 아예 삭제 */
  background: transparent;
}

.greeting-carousel .carousel-slide {
  position: absolute;
  inset: 0;          /* top/left/right/bottom: 0 과 동일 */
  opacity: 0;
  transition: opacity 1s ease-in-out;
  /* 내부 콘텐츠 잘라내기 위해 radius 상속 + overflow */
  border-radius: inherit;
  overflow: hidden;
}

.greeting-carousel .carousel-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 이미지 자체에 그림자 */
.cafe-greeting-image img {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow: 0 6px 12px rgba(0,0,0,0.35);
  border-radius: 8px; /* 필요시 둥글게 */
}

/* 카페 분위기 커버 이미지 */ 
.cafe-cover { 
  position: relative; 
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0,0,0,0.35); 
  border-radius: 12px; /* 모서리 둥글게 */ 
}

.is-style-rounded img {
  box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}


/* ================================
   서비스 안내 페이지 (page-id-63)
   ================================ */
/* 상위 컨테이너: 높이 고정 + 오버플로우 히든 */
body.page-id-63 .services-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px; /* 요청: 280px */
}

/* 트랙: 무한 스크롤 애니메이션 유지 */
body.page-id-63 .slider-track {
  display: flex;
  width: max-content;
  padding: 20px 0; /* 위아래 여백 유지 */
  animation: scroll-left 30s linear infinite;
  will-change: transform;
}

/* 카드: 박스형태 제거 + 우측 보더 + 높이 고정 */
body.page-id-63 .service-card {
  flex: 0 0 auto;
  width: 220px;
  height: 280px; /* 요청: 250px */
  /* 기존 박스 스타일 제거 */
  background: none;
  border: none;
  border-right: 1px solid #ccc; /* 우측 보더만 */
  border-radius: 0;
  box-shadow: none;

  /* 내부 정렬 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* 외곽 간격은 margin 대신 트랙 padding으로 통일 */
  margin: 0;
  padding: 16px 8px;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 부드럽게 전환 */
}

/* Hover 시 배경 흰색 */
body.page-id-63 .service-card:hover {
  background-color: #fff;
}

/* 아이콘 블록: 고정 높이로 정렬 동일화 */
body.page-id-63 .card-icon {
  flex: 0 0 60px; /* 아이콘 영역 고정 높이 */
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/* 제목 블록: 고정 높이로 정렬 동일화 */
body.page-id-63 .card-title {
  flex: 0 0 32px; /* 제목 영역 고정 높이 */
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px 0; /* 하단 여백만 */
  line-height: 1.2;
  text-align: center;
}

/* 설명 텍스트: 남는 공간 사용, 길면 줄바꿈 */
body.page-id-63 .card-desc {
  flex: 1 1 auto;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 카드 높이에 맞춰 적당히 줄 제한 */
  -webkit-box-orient: vertical;
}

/* 이미지 카드: 카드 높이에 딱 맞게 */
body.page-id-63 .image-card {
  padding: 0;
}
body.page-id-63 .image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 무한 루프 애니메이션
   - 트랙 안에 카드 세트를 정확히 2번 반복했을 때 -50%가 자연스러운 무한 루프가 됩니다. */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hover 시 전체 멈춤 (컨테이너에 호버 걸어 안정화) */
body.page-id-63 .services-slider:hover .slider-track {
  animation-play-state: paused;
}

/* ================================
   메뉴 페이지 (page-id-65)
   ================================ */
  
/* 메뉴 페이지 컨테이너 */
#menu-page-container {
  margin: 20px;
}

/* 탭 컨테이너 (탭 + 안내문) */
#menu-page-container .tabs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 탭 */
#menu-page-container .tabs {
  display: flex;
  gap: 10px;
}
#menu-page-container .tab {
  padding: 10px 20px;
  background: #ddd;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s;
}
#menu-page-container .tab.active {
  background: #333;
  color: #fff;
}

/* 안내문 */
#menu-page-container .tab-note {
  font-size: 0.85rem;
  color: #fc9a52;
  font-style: italic;
  font-weight: bold;
  text-align: right;
}

/* 메뉴 그리드 */
#menu-page-container .menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  display: none;
}
#menu-page-container .menu-grid.active {
  display: grid;
}
#menu-page-container .menu-item {
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease; /* 부드럽게 변환 */
}
#menu-page-container .menu-item:hover {
  transform: scale(1.05); /* 살짝 확대 */
}

/* 체커무늬 패턴 */
#menu-page-container .menu-item:nth-child(10n+1),
#menu-page-container .menu-item:nth-child(10n+3),
#menu-page-container .menu-item:nth-child(10n+5) {
  background-color: #fff;
}
#menu-page-container .menu-item:nth-child(10n+2),
#menu-page-container .menu-item:nth-child(10n+4) {
  background-color: #f0f0f0;
}
#menu-page-container .menu-item:nth-child(10n+6),
#menu-page-container .menu-item:nth-child(10n+8),
#menu-page-container .menu-item:nth-child(10n+10) {
  background-color: #f0f0f0;
}
#menu-page-container .menu-item:nth-child(10n+7),
#menu-page-container .menu-item:nth-child(10n+9) {
  background-color: #fff;
}

/* 모바일 대응 (화면 폭 768px 이하일 때 2열) */
@media (max-width: 768px) {
  #menu-page-container .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 모바일 2열 체커보드 패턴 */
  #menu-page-container .menu-item:nth-child(4n+1),
  #menu-page-container .menu-item:nth-child(4n+4) {
    background-color: #fff;
  }
  #menu-page-container .menu-item:nth-child(4n+2),
  #menu-page-container .menu-item:nth-child(4n+3) {
    background-color: #f0f0f0;
  }

  /* 탭과 안내문 레이아웃 변경 */
  #menu-page-container .tabs-container {
    flex-direction: column;
    align-items: flex-start;
  }
  #menu-page-container .tab-note {
    text-align: left;
    margin-top: 10px;
  }

  #menu-page-container .tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 */
    gap: 10px;
    margin-bottom: 10px;
  }
  #menu-page-container .tab {
    text-align: center; /* 텍스트 가운데 정렬 */
    width: 100%;        /* 각 칸에 꽉 차게 */
  }
}


/* ================================
   요금 페이지 (page-id-67)
   ================================ */
/* 유성 레이어 */
body.page-id-67 .shooting-stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(800px - 150px); /* 배너 높이 800px - 120px */ 
    overflow: hidden;
    pointer-events: none;
    z-index: 2; /* 배너 위, 메뉴 아래 */
}

/* 유성 기본 스타일 */
body.page-id-67 .shooting-star {
  position: absolute;
  width: 3px;
  height: 150px;
  background: linear-gradient(45deg, white, rgba(255,255,255,0));
  opacity: 0.9;
  transform: rotate(-45deg);
}

/* 랜덤 페이드아웃 버전들 */
@keyframes shoot-70 {
  0%   { transform: translate(0,0) rotate(-45deg); opacity: 1; }
  70%  { opacity: 0; }
  100% { transform: translate(500px, 650px) rotate(-45deg); opacity: 0; }
}

@keyframes shoot-80 {
  0%   { transform: translate(0,0) rotate(-45deg); opacity: 1; }
  80%  { opacity: 0; }
  100% { transform: translate(500px, 650px) rotate(-45deg); opacity: 0; }
}

@keyframes shoot-90 {
  0%   { transform: translate(0,0) rotate(-45deg); opacity: 1; }
  90%  { opacity: 0; }
  100% { transform: translate(500px, 650px) rotate(-45deg); opacity: 0; }
}

/* ================================
   Tarot program (page-id-69)
   ================================ */

.tarot-card {
  width: 120px;
  height: 180px;
  perspective: 1000px;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 기본 그림자 */ 
  border-radius: 10px;
}

.tarot-card:hover {
  transform: scale(1.05);
  box-shadow: 
0 0 5px #65b1b1,   /* 기준 색상 */
0 0 10px #7fc0c0,  /* 조금 더 밝게 */
0 0 15px #99cfcf,  /* 더 흐리게 */
0 0 20px #b3dede;  /* 한층 더 흐리게 */

}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card-inner.flipped {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card-front {
  transform: rotateY(180deg); /* 기본적으로 숨김 */
  z-index: 2;
}

.card-front img, .card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-back {
  /* 처음 보여지는 뒷면 */
  z-index: 1;
}
.tarot-result {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* 이미지가 클릭을 막지 않도록 */ 
.tarot-card img { 
width: 100%; 
height: 100%; 
object-fit: cover; 
pointer-events: none; 
}

/* 저장 실패 안내 문구 */
.storage-warning {
  display: flex;
  justify-content: space-between; /* 텍스트 왼쪽, 버튼 오른쪽 */
  align-items: center;            /* 수직 중앙 정렬 */
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #e74c3c;
  border-radius: 5px;
  background-color: #fdecea;
  color: #c0392b;
  font-size: 13px;
  line-height: 1.4;
}

.storage-warning .close-warning {
  background: none;
  border: none;
  color: #c0392b;
  font-size: 14px;
  cursor: pointer;
}

#tarot-cards {
  flex-wrap: wrap;
  gap: 10px;
}


/* 태블릿 (768px 이하) → 3~4장씩 보이도록 */
@media (max-width: 768px) {
  .tarot-card {
    width: 100px;
    height: 150px;
  }
}

/* 모바일 (480px 이하) → 2장씩 보이도록 */
@media (max-width: 480px) {
  .tarot-card {
    width: 100px;   /* 모바일에서 카드 폭 고정 */
    height: 150px;  /* 카드 높이 고정 */
  }
}

/* ================================
   Discount code program (page-id-)
   ================================ */

.discount-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;    /* h2와 discount-section을 세로로 배치 */
  align-items: center;       /* 수직 중앙 */
  justify-content: center;   /* 가로 중앙 */
  background-color: #fff;    /* 배경 흰색 */
  border-radius: 12px;       /* 모서리 라운드 */
  padding: 20px;
  box-sizing: border-box;
}

.discount-wrap h2 {
  font-size: 1.8rem;
  margin: 0 0 10px 0;        /* 아래쪽 여백 */
  color: #333;
}

.discount-wrap .discount-section {
  font-size: 1.2rem;
  color: #555;
}

/* =====================================================
   TAROT SERVICE CUSTOM SESSION MENU (Unique Class)
   ===================================================== */

/* 컨테이너 및 배경 설정 */
.tarot-sv-session-container {
    width: 95% !important;
    max-width: 600px !important;
    margin: 60px auto !important;
    
    /* 1. 비율 고정 해제 (가장 중요) */
    /* aspect-ratio: 3 / 4 !important; -> 이 부분을 삭제하거나 아래처럼 auto로 변경 */
    height: auto !important; 
    min-height: 800px !important; /* 최소 높이는 유지 */

    /* 2. 배경 이미지가 컨테이너 전체를 덮도록 설정 */
    background-image: url('/wp-content/uploads/2025/12/frame-bg.webp');
    background-size: 100% 100%; /* 가로/세로를 박스 크기에 꽉 맞게 늘림 */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;

    /* 3. 내부 정렬 및 패딩 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12% 10% !important;
    box-sizing: border-box !important;
    
    /* 애니메이션 설정 유지 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.tarot-sv-session-container.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 타이틀 스타일 */
.tarot-sv-session-container h2.tarot-sv-main-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    color: #8c7246 !important;
    margin: 0 !important;
    padding-bottom: 5px !important;
    text-align: center !important;
    border: none !important; /* 테마 하단 선 제거 */
}

.tarot-sv-session-container .tarot-sv-sub-title {
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
    color: #e8dcd7 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

/* 메뉴 리스트 구성 */
.tarot-sv-menu-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    position: relative !important;
    opacity: 0;
    transform: translateY(15px);
    background: transparent !important;
}

.tarot-sv-menu-item.is-visible {
    animation: tarotSvFadeUp 0.6s forwards !important;
}

.tarot-sv-menu-item .tarot-sv-name, 
.tarot-sv-menu-item .tarot-sv-price {
    z-index: 2 !important;
    color: #333333 !important;
    font-weight: bold !important;
    background: transparent !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* 라인 드로잉 */
.tarot-sv-menu-item .tarot-sv-line {
    flex-grow: 1 !important;
    margin: 0 15px !important;
    height: 1px !important;
    border-bottom: 1px dotted rgba(50, 50, 50, 0.5) !important;
    position: relative !important;
    top: -2px !important;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1 !important;
}

.tarot-sv-menu-item .tarot-sv-line.is-drawn {
    transform: scaleX(1) !important;
}

/* 혜택 박스 및 펄스 효과 */
.tarot-sv-benefit-box {
    margin-top: 55px !important;
    padding: 18px 15px !important;
    border: 2px solid rgba(255, 88, 19, 0.5) !important;
    border-radius: 8px !important;
    text-align: center !important;
    color: #333333 !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.tarot-sv-benefit-box.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.tarot-sv-benefit-box.is-pulsing {
    animation: tarotSvPulse 1.2s ease-in-out 2 !important;
}

.tarot-sv-benefit-box .tarot-sv-highlight {
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    transition: background 0.8s ease-in-out !important;
}

.tarot-sv-benefit-box .tarot-sv-highlight.is-filled {
    background: rgba(255, 0, 0, 1) !important;
    color: #fff !important;
}

/* 애니메이션 키프레임 */
@keyframes tarotSvPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 88, 19, 0); }
    50% { transform: scale(1.04); box-shadow: 0 0 25px rgba(255, 88, 19, 0.4); border-color: rgba(255, 88, 19, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 88, 19, 0); }
}

@keyframes tarotSvFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 반응형 대응 */
@media screen and (max-width: 600px) {
    .tarot-sv-session-container {
        width: 100% !important;
        padding: 15% 12% !important;
        margin: 30px auto !important;
    }
    .tarot-sv-benefit-box { margin-top: 25px !important; }
}