/* 레이아웃 */
.hours-section{
  width:100%;
  display:flex;
  justify-content:center;
  padding:70px 0 60px;
  box-sizing:border-box;
}

.hours-wrap{
  width:100%;
  max-width:1200px;
  padding:0 20px;
  box-sizing:border-box;
}

.hours-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:flex-start;
}

/* 카드(실제로는 배경 없는 영역처럼 보이게) */

/* 타이틀 라인 */
.hours-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.hours-title{
  margin:0;
  font-size:34px;
  font-weight:800;
  color:#7e7064;
  letter-spacing:-0.5px;
}

/* 아이콘 원 */
.hours-icon{
  width:58px;
  height:58px;
  border-radius:999px;
  background:#f3e9e2;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.hours-icon svg{
  width:34px;
  height:34px;
  stroke:#7e7064;
}

/* 체크리스트 */
.hours-list{
  list-style:none;
  margin:0;
  padding:0;
}

.hours-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  line-height:1.7;
  color:#111;
  margin:10px 0;
  letter-spacing:-0.2px;
}

.hours-list li strong{
  font-weight:800;
}

/* 초록 체크박스 */
.check {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #b6a391;
  position: relative;
  flex: 0 0 18px;
}

.check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 10px;
  border: 3px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: translate(-50%, -65%) rotate(45deg);
}


/* 하단 유의사항 박스 */
.hours-notice{
  margin-top:48px;
  border:2px solid #b6a391;
  padding:26px 28px;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:18px;
  align-items:center;
  box-sizing:border-box;
}

.notice-left{
  font-size:34px;
  font-weight:800;
  color:#b6a391;
  letter-spacing:-0.5px;
}

/* 초록 점(•••) 느낌의 불릿 */
.notice-list{
  list-style:none;
  margin:0;
  padding:0;
}

.notice-list li{
  position:relative;
  padding-left:34px;
  font-size:16px;
  line-height:1.9;
  color:#111;
  letter-spacing:-0.2px;
  margin:6px 0;
}

.notice-list li:before{
  content:"•••";
  position:absolute;
  left:0;
  top:0;
  color:#ff6f2c;
  font-weight:900;
  letter-spacing:2px;
}

/* =========================
   ✅ HOURS Responsive Fix (Override)
   - 모바일에서 2컬럼이 유지되거나, 글/아이콘이 꾸겨지는 문제 해결
   ========================= */

@media (max-width: 1280px){

  /* ✅ 2컬럼 -> 1컬럼 강제 (다른 CSS가 덮는 경우 대비) */
  .hours-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hours-section{
    padding: 48px 0 40px !important;
  }

  /* 제목/아이콘 크기 조정 */
  .hours-icon{
    width: 46px !important;
    height: 46px !important;
  }
  .hours-icon svg{
    width: 28px !important;
    height: 28px !important;
  }

  .hours-title{
    font-size: 26px !important;
  }

  /* ✅ 체크 + 텍스트가 좁은 화면에서 예쁘게 줄바꿈되도록 */
  .hours-list li{
    font-size: 16px !important;
    line-height: 1.65 !important;
    align-items: flex-start !important;     /* 중앙정렬 때문에 세로로 어색해지는 것 방지 */
    word-break: keep-all;                  /* 한글이 글자 단위로 쪼개지는 느낌 방지 */
    overflow-wrap: anywhere;               /* 너무 긴 덩어리는 안전하게 줄바꿈 */
  }

  /* 체크 아이콘이 첫 줄에 맞게 올라오도록 */
  .check{
    margin-top: 4px;
  }

  /* ✅ 유의사항 박스도 1컬럼 + 패딩 축소 */
  .hours-notice{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 32px !important;
    padding: 18px 16px !important;
  }

  .notice-left{
    font-size: 24px !important;
  }

  .notice-list li{
    font-size: 14px !important;
    line-height: 1.8 !important;
    padding-left: 28px !important;
  }
}

@media (max-width: 520px){
  .hours-wrap{
    padding: 0 14px !important;
  }

  .hours-head{
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .hours-title{
    font-size: 22px !important;
  }

  .hours-list li{
    font-size: 15px !important;
  }
}