/* 기본 설정 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #FFEDF0; 
  color: #333;
  line-height: 1.6;
  text-align: center;
}

/* 히어로 섹션 */
.hero {
  background-color: #d50000; /* 🔥 기존 강한 빨강 유지 */
  color: white;
  padding: 50px 20px;
  text-align: center;
}

.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 로고와 텍스트 간 여백 */
  flex-wrap: wrap; /* 모바일에서는 자동 줄바꿈 */
}

.hero-logo-inline {
  width: 120px;
  height: auto;
  border-radius: 15px; /* 살짝 둥글게 */
}

.hero-texts h1 {
  margin: 0;
  font-size: 2.5em; /* 기존 스타일 유지 */
  color: white;
}

.hero-texts p {
  margin: 10px 0 20px;
  font-size: 1.2em;
  color: #fff;
}

/* 반응형 (모바일용) */
@media (max-width: 768px) {
  .hero-title {
    flex-direction: column;
  }
  .hero-logo-inline {
    width: 100px;
  }
  .hero-texts h1 {
    font-size: 2em;
  }
}

/* 버튼 기본 스타일 */
button {
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  font-size: 1em;
  border-radius: 8px;
  background-color: #eee;
  transition: 0.3s;
}

/* 메뉴, 언어 선택 버튼 공통 */
.menu-btn {
  background-color: #f04e4e;
  color: #fff;
  border: 2px solid #000; /* 검정 테두리 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  font-weight: bold;
}

/* 메뉴 버튼 hover 시 색상 */
.menu-btn:hover {
  background: #fffbe6; /* 상세 박스와 동일한 색 */
}

/* 언어 모달 버튼은 기존대로 회색 hover 유지 */
.modal-buttons button:hover {
  background: #ddd;
}


/* 메뉴, 이용방법 섹션 */
.menu {
  padding: 40px 20px;
  background: #f9f9f9;
}

.menu h2, .usage h2 {
  margin-bottom: 20px;
  font-size: 1.8em;
  font-weight: bold;
  color: #333;
}

.menu-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

/* ====== 공통 카드 박스 ====== */
.menu-detail,
.side-detail,
.usage-detail {
  display: none; /* 클릭 전 숨김 */
  background: #ffffff;
  border: 2px solid #ddd;
  border-radius: 14px;  
  padding: 28px;
  margin: 28px auto;
  max-width: 850px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease-in-out;
  font-family: "Noto Sans KR", "Noto Sans", "Arial", sans-serif; /* 모든 언어 동일 폰트 */
  color: #000;
}

.usage-detail.show {
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* hover 시 카드 강조 */
.menu-detail:hover,
.side-detail:hover,
.usage-detail:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  transform: translateY(-3px);
}

/* ====== 내용 간격 ====== */
.menu-detail p,
.side-detail p,
.usage-detail p {
  margin: 12px 0;
  font-size: 1.1rem;
}

/* 가격 줄 강조 */
.menu-detail p:nth-child(2),
.side-detail p:nth-child(2),
.usage-detail p:nth-child(2) {
  margin-top: 26px;
  margin-bottom: 22px;
  font-weight: bold;
  font-size: 1.35rem;
  color: #d32f2f; /* 레드 포인트 */
}

/* ====== 사이드 메뉴 2열 ====== */
.side-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 35px;
  margin-top: 18px;
  text-align: left;
}

.side-grid p {
  margin: 8px 0;
  font-size: 1.05rem;
}

/* ===== 버튼 공통 스타일 ===== */
.menu-btn {
  background-color: #f1f1f1;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 12px 22px;
  margin: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.25s ease-in-out;
  color: #222;
}

.menu-btn:hover {
  background-color: #f5f5f5;
  border-color: #888;
  color: #000;
}

.active-menu {
  border: 2px solid #d50000;  /* 진한 레드 포인트 */
  background-color: #fff0f0;
  color: #000;
}

/* ===== 언어 선택 버튼 세련된 버전 ===== */
.modal-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;    /* 국기 + 글씨 중앙 정렬 */
  gap: 8px;                   /* 국기와 텍스트 간격 */
  background-color: #f1f1f1;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 18px 20px;         /* 높이 증가 */
  margin: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  transition: all 0.25s ease-in-out;
  width: auto;                /* 기존 폭 유지 */
  min-width: 130px;           /* 균일한 최소 폭 */
  text-align: center;
  color: #222;
}

/* ===== 언어 선택 모달 제목 ===== */
.lang-title {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
}

/* 활성화된 언어 버튼 */
.active-lang {
  border: 2px solid #444;
  background-color: #e0e0e0;
  color: #000;
}

/* hover 효과 */
.modal-buttons button:hover {
  background-color: #f5f5f5;
  border-color: #888;
  color: #000;
  transform: scale(1.03);
}
/* 가격 강조 색상 */
.menu-detail p:nth-child(2),
.side-detail p:nth-child(2),
.usage-detail p:nth-child(2) {
  margin-top: 25px;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 1.3rem;
  color: #d50000; /* 진한 레드 포인트로 통일 */
}


/* ===== 사이드 메뉴 2열 레이아웃 ===== */
.side-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 35px;
  margin-top: 18px;
  text-align: left;
}

.side-grid p {
  margin: 8px 0;
  font-size: 1.05rem;
}

/* 모달 기본 */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
}

.modal-content {
  background: #f2f2f2;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
}

.modal-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.modal-buttons button {
  background: #ccc;
  color: #000;
  border: 2px solid #000;
  font-weight: bold;
}

.modal-buttons button.active-lang {
  background: #fff;
  color: #000;
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* 위치 섹션 */
.location {
  padding: 40px 20px;
}

/* 푸터 */
footer {
  background: #d50000;
  color: #fff;
  padding: 20px;
}

/* ===== 푸터 글씨 크기 강조 ===== */
footer p {
  font-size: 1.3rem;  /* 기본 1rem → 1.3rem으로 확대 */
  font-weight: bold;  /* 굵게 강조 */
  letter-spacing: 0.5px; /* 글자 간격 살짝 띄워 안정감 */
}

/* ===== 푸터 다국어 스타일 공통 ===== */
footer {
  background: #d50000;
  color: #fff;
  padding: 25px 15px;
  text-align: center;
  line-height: 0.5
}

/* 브랜드명 강조 */
.footer-brand {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  display: block;
  margin-bottom: 6px;
}

/* 지점명 */
.footer-branches {
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
}

.footer-branches a {
  color: #fff;
  text-decoration: underline;
  transition: all 0.3s ease;
}

.footer-branches a:hover {
  color: #ffb700;
  text-shadow: 0 0 6px rgba(255, 183, 0, 0.6);
}

footer a {
  color: #fff;
  text-decoration: underline;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #ffb700; /* 노란색 포인트 */
}

/* ===== 이용방법 & 코스별 이용팁 버튼 한 줄 정렬 ===== */
.menu-buttons.double-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 화면이 작을 땐 자동 줄바꿈 */
  gap: 12px;
}

.menu-buttons.double-row .menu-btn {
  min-width: 160px;
  padding: 12px 24px;
  font-size: 1rem;
}

/* ===== 한국식 쌈 & 가마솥뚜껑 버튼 한 줄 정렬 ===== */
.menu-buttons.double-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 25px;
}

.menu-buttons.double-row div[data-lang] {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.menu-buttons.double-row .menu-btn {
  min-width: 160px;
  padding: 14px 28px;
  font-size: 1rem;
}

/* ===== 가마솥 상세박스 디자인 개선 ===== */
#gamasotDetailBox p[data-lang] {
  color: #fff;                /* 본문은 흰색 */
  text-align: left;           /* 자연스러운 문단 정렬 */
  line-height: 1.8;
  font-size: 1.1rem;
}

#gamasotDetailBox p[data-lang] strong {
  color: #fff;             /* 제목은 흰색 */
  font-size: 1.3rem;
  display: block;
  margin-bottom: 10px;
  text-align: center;         /* 제목만 중앙 정렬 */
  font-weight: 700;
}

/* 언어 선택 전엔 본문 숨기기 (히어로는 보이게) */
.hidden-body section:not(.hero),
.hidden-body footer {
  display: none !important;
}

/* hidden-body 상태일 때 모달은 보이기 */
.hidden-body #langModal {
  display: block;
}
/* ============================= */
/* 🔹 본문 페이드인 애니메이션 추가 */
/* ============================= */

/* ============================= */
/* 🔹 전체 페이지 페이드인 + 부드러운 등장 애니메이션 */
/* ============================= */

/* 초기 body 페이드인 */
body.fade-in {
  animation: fadeInPage 1.8s ease-in-out forwards;
}

/* Hero, 메뉴, 이용방법, 사이드 등 섹션 자연 등장 */
section, footer {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-in-out;
}

/* 애니메이션 완료 후 */
body.fade-in section,
body.fade-in footer {
  opacity: 1;
  transform: translateY(0);
}

/* 페이드인 키프레임 */
@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 카드(상세 설명 박스) 등장 시 자연스럽게 */
.menu-detail,
.side-detail,
.usage-detail {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 카드가 표시될 때 */
.menu-detail.show,
.side-detail.show,
.usage-detail.show {
  opacity: 1;
  transform: translateY(0);
}

/* 닫기(X) 버튼 공통 스타일 */
.detail-header {
  display: flex;
  justify-content: flex-end;
}

.close-btn {
  font-size: 1.5rem;
  cursor: pointer;
  color: #444;
  transition: 0.3s;
}

.close-btn:hover {
  color: #d50000; /* 진한 빨강 */
  transform: scale(1.2);
}

/* ===== 상단~푸터 사이 영역(본문 섹션) 배경색 변경 ===== */
.menu,
.usage,
#ssam {
  background-color: #FFEDF0; 
}

/* ===== 메뉴버튼 내 A/B/Full 노란색 강조 ===== */
.highlight-yellow {
  color: #ffb700; /* 진한 노랑 (Gold tone) */
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5); /* 은은한 빛 효과 */
}

/* ===== 메뉴 상세박스 내 A/B/Full 노란색 강조 ===== */
.course-label {
  color: #ffb700; /* 진한 노랑 */
  font-weight: 900;
  font-size: 1.3em; /* 살짝 키움 */
  text-shadow: 0 0 8px rgba(255, 183, 0, 0.6);
}

/* ===== 가마솥뚜껑 상세박스 (배경 어둡게 + 글씨 강조) ===== */
#gamasotDetailBox {
  background-image: url("images/가마솥.jpg"); /* 🔹 가마솥 배경 이미지 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border: 2px solid #555;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  border-radius: 14px;
  padding: 35px;
  text-align: center;
  max-width: 900px;
  margin: 30px auto;
}

#gamasotDetailBox p {
  color: #fff;
  font-size: 1.15rem;
  line-height: 1.8;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

#gamasotDetailBox strong {
  color: #ffb700; /* 제목 강조 */
  font-size: 1.3rem;
  text-shadow: 0 0 8px rgba(255, 183, 0, 0.7);
}

/* 🔹 본문 텍스트 강조 */
#gamasotDetailBox p {
  color: #fff4d6; /* 따뜻한 아이보리 톤 */
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.9;
  text-shadow:
    0 0 10px rgba(255, 180, 50, 0.6),
    0 0 20px rgba(255, 120, 0, 0.4),
    0 2px 4px rgba(0,0,0,0.6);
}

  /* 🔹 닫기(X) 버튼 */
#gamasotDetailBox .close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  color: #ffb700;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 2;
}

/* ===== 한국식 쌈 상세박스 (밝은 흰색 텍스트 버전) ===== */
#ssamDetailBox {
  background-image: url("images/쌈.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border: 2px solid #555;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  border-radius: 14px;
  padding: 35px;
  text-align: center;
  max-width: 900px;
  margin: 30px auto;
  position: relative;
}

/* 제목 강조 */
#ssamDetailBox strong {
  color: #ffffff; /* 제목 강조 */
  font-size: 1.3rem;
  text-shadow: 0 0 8px rgba(255, 183, 0, 0.7);
}

/* 본문 텍스트 (완전 흰색) */
#ssamDetailBox p {
  color: #ffffff !important; /* 완전한 흰색 */
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.9;
  text-shadow:
    0 0 10px rgba(255, 180, 50, 0.6),
    0 0 20px rgba(255, 120, 0, 0.4),
    0 2px 4px rgba(0,0,0,0.6);
} 

/* 닫기 버튼 */
#ssamDetailBox .close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  color: #ffb700;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 2;
}
#ssamDetailBox .close-btn:hover {
  transform: scale(1.2);
}

/* ===== 푸터 링크 hover 효과 ===== */
footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #ffeb3b; /* 노란색 포인트 */
  text-decoration-color: #ffeb3b; /* 밑줄 색상 변경 */
  transform: scale(1.08); /* 살짝 확대 */
  text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

/* ===== 상세박스 전체 글씨색 통일 ===== */
#menuDetailBox p[data-lang="en"],
#sideDetailBox p[data-lang="en"],
#usageDetailBox p[data-lang="en"],
#courseTipBox p[data-lang="en"]{
  color: #000 !important;   /* 모든 상세박스 글씨를 검정색으로 */
}

/* ===== 영어 볼드체 제거 및 전체 글씨 두께 통일 ===== */
body,
p,
h1, h2, h3, h4, h5, h6,
button {
  font-weight: 500 !important;  /* 기존 Bold를 강제로 덮어쓰기 */
  font-family: "Noto Sans", "Noto Sans KR", Arial, sans-serif !important;
}

.unlimited {
  color: #d50000;   /* 🔴 진한 빨강 */
  font-weight: bold;
}

/* ===== 모바일 대응 ===== */
@media (max-width: 768px) {
  /* ✅ 언어 선택 박스 버튼 정렬 수정 */
  .modal-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3열 → 2열로 변경 */
    gap: 10px;
    justify-items: center; /* 버튼 중앙 정렬 */
  }

  .modal-buttons button {
    padding: 20px 0;  
    font-size: 1.2rem;
    min-width: 100px;
    width: 100%;
    max-width: 140px; /* ✅ 화면 밖으로 나가지 않게 제한 */
  }

  /* ✅ 모달 전체 크기 조정 */
  .modal-content {
    width: 90%;
    max-width: 360px;
    margin: 10% auto;
    text-align: center;
  }

  .menu-btn {
    width: 100%;
    margin: 5px 0;
  }

  .menu-detail,
  .side-detail,
  .usage-detail {
    font-size: 1rem;
    padding: 18px;
  }

  .menu-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero h1 {
    font-size: 1.8em;
  }

  .hero p {
    font-size: 1em;
  }

  /* ✅ 사이드메뉴 1열 */
  .side-grid {
    grid-template-columns: 1fr;
  }

  /* ✅ 이미지 크기 자동 조정 */
  .usage-image img {
    max-width: 100%;
  }
}