/* HERO 배경(원하면 이미지로 변경 가능) */
.hero{
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: url("../img/banner_background.png") center/cover no-repeat;
}

/* ---------------------------
   NAVI: 가운데 메뉴 + 오른쪽 아이콘
---------------------------- */

/* ❌ .right는 HTML에 없어서 의미 없음 (삭제해도 됨) */
/* .right{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
} */

/* ---------------------------
   GLASS (큰 반투명 박스)
---------------------------- */
.glass{
  width: 1752px;
  height: 902px;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  background: rgba(255, 250, 250, 0.4);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  overflow: hidden;
  padding: 28px 83px;
  box-sizing: border-box;
}

.glass_inner{
  height: 100%;
  position: relative;
}

/* ✅ 네비: 시안처럼 "상단 한 줄" + 메뉴는 중앙 + 아이콘은 오른쪽 */
.navi{
  height: 80px;
  display: grid;
  grid-template-columns: 160px 1fr 160px;  /* 왼쪽 여백(로고 자리) / 메뉴 / 아이콘 */
  align-items: center;
}

/* 왼쪽 빈 공간(로고 자리) */
.navi_inner{
  width: 160px;
}

/* 가운데 메뉴 */
.center{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.center a{
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  color: rgba(0,0,0,0.65);
}
.center a:hover{ opacity: .7; }

/* 오른쪽 아이콘 */
.icon_btn{
  width: 160px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
}

.icon_btn .material-symbols-outlined{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #222;
}

/* ✅ 타이틀 위치: 레퍼런스처럼 왼쪽에 자리잡기 */
.hero_copy{
  padding: 110px 0 0;
}

.hero_copy .title{
  font-size: 60px;
  font-weight: 800;
  color: #034A8B;
  margin-bottom: 12px;
  font-family: "NanumMyeongjo", sans-serif;
}
.hero_copy .sub{
  font-size: 32px;
  font-weight: 700;
  color: #002c50;
  margin-bottom: 65px;
  font-family: "NanumMyeongjo", sans-serif;
}

/* CTA 버튼 */
.cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(245,250,255,0.8);
  text-decoration: none;
  color: #0b3a64;
  font-size: 20px;
  font-weight: 400;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  margin-bottom: 120px;
}
.cta:hover{ transform: translateY(-1px); }

/* ---------------------------
   SNS (오른쪽 세로 버튼)
---------------------------- */
.sns{
  position: absolute;
  right: 5px;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  opacity: 0.8;
  cursor: pointer;
}

.sns img{
  width: 35px; height: 35px;
}

/* ---------------------------
   하단 정보 패널
---------------------------- */
.info_panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
}

.info_grid{
  height: 260px;
  background: rgba(0,35,64,0.8);
  border-radius: 30px;
  padding: 34px 40px;
  display: flex;
  gap: 150px;
  align-items: center;
}

.info_panel h3{
  font-size: 32px;
  font-weight: 400;
  color: #fffbfb;
}

.info_panel .sub{
  font-size: 20px;
  font-weight: 400;
  color: #fffbfb;
  margin-top: 20px;
}

.info_panel .desc{
  font-size: 15px;
  font-weight: 400;
  color: #b7b7b7;
  letter-spacing: 2.0;
  margin-top: 10px;
}

/* 썸네일 */
.video_thumb{
  width: 380px;
  height: 200px;
  flex: 0 0 380px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  display: block;
  margin-left: auto;
}
.video_thumb video{ width:100%; height:100%; object-fit:cover; display:block; }

.play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #0b3a64;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* hero섹션 끝 */


/* evnet 섹션 */

/* =========================
   EVENT
========================= */
.event{
  padding: 90px 0 80px;
  background: #fff;
  font-family: system-ui, -apple-system, "Pretendard", sans-serif;
}
.event_inner{
  width: min(1260px, 92%);
  margin: 0 auto;
}
.event_head{
  text-align: center;
  margin-bottom: 28px;
}
.event_title{
  margin: 0 0 10px;
  font-size: 50px;
  font-weight: 500;
  color: #034A8B;
}
.event_sub{
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

/* =========================
   CALENDAR (1줄 배치)
========================= */
.cal{ margin: 28px 0 34px; }

.cal_bar{
  background: #eeeeee;
  border-radius: 10px;
  height: 137px;
  padding: 14px 18px;

  display: grid;
  grid-template-columns: 110px 1px 54px 1fr 54px;
  align-items: center;
  gap: 30px;
}

.cal_left{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.cal_year{
  font-size: 16px;
  font-weight: 300;
  color: #333333;
}
.cal_month{
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: #333333;
}

.cal_divider{
  width: 1px;
  height: 63px;
  background: #8f8f8f;
}

/* 화살표 */
.cal_arrow{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  color: #cacaca;
}
.cal_arrow:hover{color: #f4b35a;}

/* 날짜 줄 */
.cal_days{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 날짜(기본) */
.cal_day{
  width: 33px;
  height: 65px;
  border-radius: 14px;

  display: grid;
  place-items: center;
  gap: 3px;

  cursor: pointer;
  user-select: none;
  color: #666;
  background: transparent;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}
.cal_day:hover{
  transform: scale(1.06);
}

.cal_day .num{ font-size: 18px; }
.cal_day .dow{ font-size: 15px; opacity: .75; }

/* 구간 전환 (r1/r2) */
.cal_days_r2{ display: none; }
#r2:checked ~ .cal_bar .cal_days_r1{ display: none; }
#r2:checked ~ .cal_bar .cal_days_r2{ display: flex; }

/* 화살표 비활성 */
#r2:checked ~ .cal_bar .cal_next{
  opacity: .35;
  pointer-events: none;
}
#r1:checked ~ .cal_bar .cal_prev{
  opacity: .35;
  pointer-events: none;
}

/* 선택 색상 */
#d29:checked ~ .cal_bar .cal_days_r1 label[for="d29"],
#d30:checked ~ .cal_bar .cal_days_r1 label[for="d30"],
#d31:checked ~ .cal_bar .cal_days_r1 label[for="d31"],
#d01:checked ~ .cal_bar .cal_days_r1 label[for="d01"],
#d02:checked ~ .cal_bar .cal_days_r1 label[for="d02"],
#d03:checked ~ .cal_bar .cal_days_r1 label[for="d03"],
#d04:checked ~ .cal_bar .cal_days_r1 label[for="d04"],
#d05:checked ~ .cal_bar .cal_days_r1 label[for="d05"],
#d06:checked ~ .cal_bar .cal_days_r1 label[for="d06"],
#d07:checked ~ .cal_bar .cal_days_r1 label[for="d07"],
#d08:checked ~ .cal_bar .cal_days_r1 label[for="d08"],
#d09:checked ~ .cal_bar .cal_days_r1 label[for="d09"],
#d10:checked ~ .cal_bar .cal_days_r1 label[for="d10"],
#d11:checked ~ .cal_bar .cal_days_r1 label[for="d11"],
#d12:checked ~ .cal_bar .cal_days_r2 label[for="d12"],
#d13:checked ~ .cal_bar .cal_days_r2 label[for="d13"],
#d14:checked ~ .cal_bar .cal_days_r2 label[for="d14"],
#d15:checked ~ .cal_bar .cal_days_r2 label[for="d15"],
#d16:checked ~ .cal_bar .cal_days_r2 label[for="d16"],
#d17:checked ~ .cal_bar .cal_days_r2 label[for="d17"],
#d18:checked ~ .cal_bar .cal_days_r2 label[for="d18"],
#d19:checked ~ .cal_bar .cal_days_r2 label[for="d19"],
#d20:checked ~ .cal_bar .cal_days_r2 label[for="d20"],
#d21:checked ~ .cal_bar .cal_days_r2 label[for="d21"],
#d22:checked ~ .cal_bar .cal_days_r2 label[for="d22"],
#d23:checked ~ .cal_bar .cal_days_r2 label[for="d23"],
#d24:checked ~ .cal_bar .cal_days_r2 label[for="d24"],
#d25:checked ~ .cal_bar .cal_days_r2 label[for="d25"]{
  background: #f4b35a;
  color: #fff;
  width: 64px; height: 105px;
  border-radius: 20px;
  transform: scale(1.12);
  transition: 0.3s;
}

/* =========================
   SLIDER (10장 / 5장 노출 / 1장씩 이동)
========================= */
.evt_slider{
  position: relative;
  margin-top: 18px;
  overflow: visible;
}

/* 좌/우 버튼 */
.evt_nav .evt_btn{
  position: absolute;
  top: 30%;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-weight: 900;
  background: #DDDDDD;
}

.evt_nav .evt_btn:hover{background: #FF8900; color: #fff;}
.evt_prev{ left: -78px; color: #666; }
.evt_next{ right: -78px; color: #666; }

/* 상태별 show/hide */
.evt_nav .p0,.evt_nav .p1,.evt_nav .p2,.evt_nav .p3,.evt_nav .p4,.evt_nav .p5,
.evt_nav .n0,.evt_nav .n1,.evt_nav .n2,.evt_nav .n3,.evt_nav .n4,.evt_nav .n5{ display:none; }

#s0:checked ~ .evt_nav .p0{ display:inline-flex; opacity:.4; pointer-events:none; }
#s1:checked ~ .evt_nav .p1{ display:inline-flex; }
#s2:checked ~ .evt_nav .p2{ display:inline-flex; }
#s3:checked ~ .evt_nav .p3{ display:inline-flex; }
#s4:checked ~ .evt_nav .p4{ display:inline-flex; }
#s5:checked ~ .evt_nav .p5{ display:inline-flex; }

#s0:checked ~ .evt_nav .n0{ display:inline-flex; }
#s1:checked ~ .evt_nav .n1{ display:inline-flex; }
#s2:checked ~ .evt_nav .n2{ display:inline-flex; }
#s3:checked ~ .evt_nav .n3{ display:inline-flex; }
#s4:checked ~ .evt_nav .n4{ display:inline-flex; }
#s5:checked ~ .evt_nav .n5{ display:inline-flex; opacity:.4; pointer-events:none; }

/* viewport: 5장만 보임 */
.evt_viewport{
  overflow: hidden;
  padding: 6px 0;
}

:root{
  --gap: 18px;
  --step: calc((100% - (var(--gap) * 4)) / 5 + var(--gap));
}

.evt_track{
  display: flex;
  gap: var(--gap);
  transition: transform 0.55s ease;
  will-change: transform;
}

.evt_card{
  flex: 0 0 calc((100% - (var(--gap) * 4)) / 5);
  height: 361px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

#s0:checked ~ .evt_viewport .evt_track{ transform: translateX(0); }
#s1:checked ~ .evt_viewport .evt_track{ transform: translateX(calc(-1 * var(--step))); }
#s2:checked ~ .evt_viewport .evt_track{ transform: translateX(calc(-2 * var(--step))); }
#s3:checked ~ .evt_viewport .evt_track{ transform: translateX(calc(-3 * var(--step))); }
#s4:checked ~ .evt_viewport .evt_track{ transform: translateX(calc(-4 * var(--step))); }
#s5:checked ~ .evt_viewport .evt_track{ transform: translateX(calc(-5 * var(--step))); }

/* FLIP HOVER */
.evt_card.flip{ perspective: 1200px; }
.card_inner{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
}
.evt_card.flip:hover .card_inner{
  transform: rotateY(180deg);
}
.card_front,
.card_back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
}
.card_front img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card_back{
  background: #0b4f86;
  color: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  transform: rotateY(180deg);
  align-items: center;
  text-align: center;
}
.card_back h4{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}
.card_back p{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: .9;
}
.card_back .date{
  font-size: 12px;
  opacity: .75;
}

/* dots */
.evt_dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 50px 0 26px;
}
.dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d9d9d9;
  cursor: pointer;
}
#s0:checked ~ .evt_dots label[for="s0"],
#s1:checked ~ .evt_dots label[for="s1"],
#s2:checked ~ .evt_dots label[for="s2"],
#s3:checked ~ .evt_dots label[for="s3"],
#s4:checked ~ .evt_dots label[for="s4"],
#s5:checked ~ .evt_dots label[for="s5"]{
  background: #f4b35a;
}

/* bottom button */
.evt_more{
  width: 240px;
  height: 58px;
  margin: 0 auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #034A8B;
  color: #fffbfb;
  text-decoration: none;
  font-size: 18px;
  font-weight: 300;
  margin-top: 50px;
}
.evt_more:hover{background: rgb(0, 37, 70);}


/* =========================
   COURSE
========================= */
.course{
  padding: 90px 0 110px;
  background: #fff;
  font-family: system-ui, -apple-system, "Pretendard", sans-serif;
}

.course_inner{
  width: 1600px;
  margin: 0 auto;
}

.course_head{
  text-align: center;
  margin-bottom: 46px;
}
.course_title{
  margin: 100px 0 30px;
  font-size: 50px;
  font-weight: 500;
  color: #034A8B;
}
.course_sub{
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  color: #333333;
  margin-bottom: 140px;
}

.course_grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 50px;
}

.course_card{
  border: 1px solid #e7e7e7;
  background: #fff;
}

.course_thumb{
  position: relative;
  width: 500px;
  height: 264px;
  overflow: hidden;
}
.course_thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course_tag{
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 2px;
}

.course_body{
  width: 500px; height: 240px;
  padding: 16px 16px 14px;
  text-align: center;
}
.course_name{
  margin: 6px 0 8px;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}
.course_meta{
  margin: 0 0 8px;
  font-size: 16px;
  color: #7c7c7c;
}
.course_place{
  margin: 0 0 14px;
  font-size: 14px;
  color: #a7a7a7;
}

.course_actions{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
}

.act{
  flex: 1;
  text-decoration: none;
  color: #585858;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.act_icon{
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.course_btn{
  width: 240px;
  height: 58px;
  margin: 0 auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #034A8B;
  color: #fffbfb;
  text-decoration: none;
  font-size: 18px;
  font-weight: 300;
  margin-top: 50px;
  cursor: pointer;
}

.course_btn:hover{background:rgb(0, 37, 70);}


/* =========================
   RESERVE
========================= */
.reserve{
  padding: 90px 0;
  background: #fff;
  font-family: system-ui, -apple-system, "Pretendard", sans-serif;
}

.reserve_inner{
  max-width: 1600px;
  margin: 0 auto;
}

.reserve_head{
  text-align: center;
  margin-bottom: 36px;
}
.reserve_title{
  margin: 0 0 10px;
  font-size: 50px;
  font-weight: 600;
  color: #0a4a86;
}
.reserve_sub{
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 400;
  color: #444;
}

.reserve_tabs{
  margin-top: 22px;
}
.reserve_tabs input[type="radio"]{ display: none; }

.tab_labels{
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 18px;
  color: #888;
  font-weight: 700;
}
.tab_labels label{
  cursor: pointer;
  padding: 10px 6px;
  position: relative;
}
#tab_car:checked ~ .tab_labels label[for="tab_car"],
#tab_stay:checked ~ .tab_labels label[for="tab_stay"],
#tab_air:checked ~ .tab_labels label[for="tab_air"]{
  color: #222;
}
#tab_car:checked ~ .tab_labels label[for="tab_car"]::after,
#tab_stay:checked ~ .tab_labels label[for="tab_stay"]::after,
#tab_air:checked ~ .tab_labels label[for="tab_air"]::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: #f28b1a;
  border-radius: 999px;
}

.tab_panels .panel{ display:none; }
#tab_car:checked ~ .tab_panels .car{ display:block; }
#tab_stay:checked ~ .tab_panels .stay{ display:block; }
#tab_air:checked ~ .tab_panels .air{ display:block; }

.reserve_box{
  width: 1532px;
  height: 264px;
  margin: 0 auto 60px;
  background: #fff;
  border-radius: 10px;
  padding: 22px 100px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reserve_cards{
  max-width: 1532px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 28px;
}

.reserve_box.simple{
  justify-content: center;
  gap: 50px;
}

.field{
  min-width: 170px;
}
.field_label{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #333;
  gap: 50px;
}
.input{
  width: 150px;
  height: 95px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  color: #333;
  background: #fff;
}

.arrow{
  font-size: 18px;
  font-weight: 900;
  color: #888;
  padding: 0 6px;
}

.insure{
  min-width: 280px;
}
.insure_btns{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 360px;
}
.insure_radio input{
  display: none;
}
.chip{
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;

  font-size: 13px;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  padding: 0;

  cursor: pointer;
  transition: all 0.2s ease;
}

.chip:hover{
  border-color: #f28b1a;
}

.insure_radio input:checked + .chip{
  border-color: #f28b1a;
  color: #f28b1a;
  background: #fff;
}

.reserve_btn{
  min-width: 200px;
  height: 95px;
  border-radius: 5px;
  background: #F7931E;
  color: #FFFBFB;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* promo */
.promo{
  margin-top: 34px;
  position: relative;
  max-width: 1532px;
  margin-left: auto;
  margin-right: auto;
}
.promo_viewport{
  width: 100%;
  overflow: hidden;
  padding: 6px 0 10px;
}

.promo_row{
  display: flex;
  gap: 26px;
  width: max-content;
  margin: 0 auto;
}
.promo_row::-webkit-scrollbar{ height: 8px; }
.promo_row::-webkit-scrollbar-thumb{ background:#ddd; border-radius:999px; }

.promo_card{ text-align: center; }

.promo_card img{
  width: 272px;
  height: 272px;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}
.promo_card h4{
  margin: 12px 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.price{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #111;
}

.promo_arrow{
  position: absolute;
  top: 110px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.promo_arrow.left{ left: -18px; }
.promo_arrow.right{ right: -18px; }


/* =========================
   INFO(여행정보)
========================= */
.info{
  padding: 120px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.info::before{
  content:"";
  position: absolute;
  left: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 478px;
  height: 852px;
  background: url("../img/tour_background_icon.png") center/contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.info_inner{
  width: min(1280px, 90%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.info_head{
  text-align: center;
  margin-bottom: 40px;
}

.info_quick{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  width: 1000px; height: 125px;
  background: #faf7f4;
  border-radius: 8px;
  padding: 22px 10px;
  margin: 40px auto 200px;
}

.quick_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: #444;
  position: relative;
}

.quick_item img{
  width: auto;
  height: 49px;
  object-fit: contain;
  opacity: 0.85;
}

.quick_item span{
  font-size: 13px;
  font-weight: 500;
}

.quick_item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 38px;
  background: rgba(0,0,0,0.08);
}

.quick_item:hover img{ opacity: 1; }
.quick_item:hover span{ color: #f28c28; }

.info_head .title{
  font-size: 50px;
  font-weight: 500;
  color: #f7931e;
}
.info_head .sub{
  font-size: 30px;
  font-weight: 400;
  color: #333;
}

/* 카드 4개 */
.info_cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 300px;
}

.info_card{
  display: block;
  text-decoration: none;
  background: transparent;
  border: 20px solid #064a86;
  padding: 22px;
  height: 260px;
  transition: transform .25s ease;
}

.card_frame{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.card_frame img{
  height: auto;
  object-fit: contain;
  opacity: .85;
}
.card_frame p{
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  color: #333;
}

.info_card:nth-child(1){ transform: skewX(-12deg) rotate(-12deg); }
.info_card:nth-child(1) .card_frame{ transform: skewX(12deg) rotate(12deg); }

.info_card:nth-child(2){ transform: skewX(12deg) rotate(12deg); }
.info_card:nth-child(2) .card_frame{ transform: skewX(-12deg) rotate(-12deg); }

.info_card:nth-child(3){ transform: skewX(-12deg) rotate(-12deg); }
.info_card:nth-child(3) .card_frame{ transform: skewX(12deg) rotate(12deg); }

.info_card:nth-child(4){ transform: skewX(12deg) rotate(12deg); }
.info_card:nth-child(4) .card_frame{ transform: skewX(-12deg) rotate(-12deg); }

.info_card:nth-child(1):hover{ transform: skewX(-12deg) rotate(-12deg) translateY(-10px); }
.info_card:nth-child(2):hover{ transform: skewX(12deg) rotate(12deg) translateY(-10px); }
.info_card:nth-child(3):hover{ transform: skewX(-12deg) rotate(-12deg) translateY(-10px); }
.info_card:nth-child(4):hover{ transform: skewX(12deg) rotate(12deg) translateY(-10px); }


/* =========================
   FOOTER
========================= */
.footer{
  background:#fff;
  font-family: system-ui, -apple-system, "Pretendard", sans-serif;
}

.footer_inner{
  width: min(1280px, 92%);
  margin: 0 auto;
}

.footer_logoBar{
  background: #e9e9e9;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}

.footer_logoBar::before,
.footer_logoBar::after{
  content:"";
  position:absolute;
  top:0;
  width: 160px;
  height: 100%;
  background: #dcdcdc;
}
.footer_logoBar::before{
  left:0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.footer_logoBar::after{
  right:0;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.footer_logoInner{
  width: min(1280px, 92%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.footer_ctrl{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ctrl_btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.ctrl_btn:hover{color: #f28c28; border:1px solid #f28c28;}

.footer_logos{
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 10px;
}
.footer_logos img{
  width: 100%;
  height: 60px;
  object-fit: contain;
  display: block;
}

.footer_mid{
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.footer_mid .footer_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer_links{
  display: flex;
  gap: 26px;
  font-size: 12px;
}
.footer_links a{
  text-decoration: none;
  color: #333;
}
.footer_links a:hover{ opacity: .7; }

.site_shortcut{
  display: flex;
  align-items: center;
  gap: 6px;
}
.site_select{
  width: 160px;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
  appearance: auto;
}
.site_btn{
  width: 44px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: #f28c28;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.site_btn:hover{ opacity: 0.85; }

.footer_bottom{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding: 20px;
}

.footer_bottomGrid{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.footer_text{
  font-size: 11px;
  line-height: 1.7;
  color: rgba(0,0,0,0.65);
}

.footer_right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.footer_sns{
  display: flex;
  gap: 10px;
}

.footer_marks{
  display: flex;
  gap: 10px;
}
.footer_marks img{
  width: 46px;
  height: 46px;
  object-fit: contain;
}


/* =======================================
   ✅ 반응형은 "작은 화면에서만" 적용되게 재정리
   (PC 1920 깨짐 방지)
======================================= */

/* 태블릿 (1200px 이하) */
@media (max-width: 1200px) {

  /* hero/glass를 여기서만 유동으로 변경 */
  .hero{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .glass{
    width: 100%;
    max-width: 1752px;
    height: auto;
    min-height: 900px;
    position: relative;
    left: auto; top: auto;
    transform: none;
    padding: 40px;
    backdrop-filter: blur(10px);
  }

  .info_grid{ gap: 50px; }

  .course_grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .reserve_box{
    width: 100%;
    padding: 30px;
  }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {

  .glass{
    min-height: auto;
    padding: 30px 20px;
  }

  /* 네비 세로로 */
  .navi{
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    align-items: center;
  }

  .center{
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .center a{ font-size: 15px; }

  .icon_btn, .navi_inner{
    width: auto;
    justify-content: center;
  }

  .hero_copy{
    text-align: center;
    padding-top: 40px;
  }
  .hero_copy .title{ font-size: 36px; }
  .hero_copy .sub{ font-size: 18px; margin-bottom: 30px; }
  .cta{ margin-bottom: 50px; font-size: 16px; }

  .sns{
    position: relative;
    inset: auto;
    flex-direction: row;
    justify-content: center;
    margin: 20px 0;
    gap: 20px;
  }

  .info_panel{
    position: relative;
    bottom: 0;
    margin-top: 30px;
  }

  .info_grid{
    flex-direction: column;
    height: auto;
    padding: 30px 20px;
    gap: 30px;
  }

  .info_box{ text-align: center; }

  .video_thumb{
    width: 100%;
    max-width: 450px;
    height: 220px;
    margin: 0 auto;
  }

  /* 캘린더 */
  .cal_bar{
    grid-template-columns: 1fr;
    height: auto;
    padding: 20px;
    gap: 15px;
  }
  .cal_divider{ display: none; }
  .cal_days{
    overflow-x: auto;
    padding: 10px 0;
    justify-content: flex-start;
  }

  .evt_card{ flex: 0 0 calc(50% - 10px); height: 320px; }
  .evt_nav .evt_btn{ top: auto; bottom: -60px; }
  .evt_prev{ left: 30%; }
  .evt_next{ right: 30%; }

  /* 예약 */
  .reserve_box{
    flex-direction: column;
    height: auto;
    gap: 20px;
    padding: 40px 20px;
  }
  .reserve_box.simple{ gap: 20px; }
  .field, .input, .reserve_btn{ width: 100%; }
  .insure_btns{ grid-template-columns: 1fr 1fr; }

  /* INFO 카드 */
  .info_cards{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .info_card, .info_card .card_frame{
    transform: none !important;
    height: 200px;
    border-width: 10px;
  }

  .info_quick{
    width: 100%;
    height: auto;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px;
    margin: 40px 0;
  }
}

/* 초소형 (430px 이하) */
@media (max-width: 430px) {
  .hero_copy .title{ font-size: 28px; line-height: 1.3; }
  .info_panel h3{ font-size: 20px; }

  .cal_bar{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 20px 10px !important;
  }
  .cal_left{ margin-bottom: 15px; }
  .cal_divider{ display: none; }

  .cal_days{
    display: flex !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .cal_day{
    flex: 0 0 45px;
    transform: none !important;
  }
  .cal_days::-webkit-scrollbar{ height: 4px; }
  .cal_days::-webkit-scrollbar-thumb{ background: #ddd; border-radius: 10px; }

  .evt_card{ flex: 0 0 100%; }
  :root{ --step: calc(100% + 18px); }

  .course_grid{ grid-template-columns: 1fr; }
  .course_title{ font-size: 28px; margin-top: 50px; }
  .course_sub{ font-size: 15px; margin-bottom: 60px; }

  .info_cards{ grid-template-columns: 1fr; }
  .info_quick{ grid-template-columns: 1fr 1fr; }

  .footer_logoInner{ flex-direction: column; }
  .footer_logos{ grid-template-columns: repeat(3, 1fr); }
  .footer_mid .footer_inner{ flex-direction: column; gap: 15px; text-align: center; }
  .footer_bottomGrid{ flex-direction: column; align-items: center; text-align: center; }
}