@charset "utf-8";

/* ============================================
   habits.css
   ============================================ */

.habits-wrap {
  background-color: var(--color-bright);
  padding-bottom: var(--gap-140);
}

/* ---- 레이아웃 내부 컨테이너 ---- */
.habits-inner {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 var(--layout-side-margin);
  display: flex;
  align-items: flex-start;
}

/* ---- 날짜 컬럼 (좌) ---- */
.day-col {
  width: 370px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--logo-height) + 20px);
  align-self: flex-start;
}

/* ---- 콘텐츠 컬럼 (우) ---- */
.content-col {
  flex: 1;
  min-width: 0;
}





/* ============================================
   TITLE SECTION
   ============================================ */
.habits-title-section {
  text-align: center;
  padding: var(--gap-140);
}

.habits-main-title {
  font-size: var(--font-size-huge);
  font-weight: 900;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: var(--gap-10);
}

.habits-subtitle {
  font-size: var(--font-size-xxlarge);
  color: var(--color-font);
  font-weight: 400;
  line-height: 1.4;
}


/* ============================================
   DAY SECTION (날짜 + 일정표 + 프로그램 묶음)
   ============================================ */
.day-section {
  padding-top: var(--gap-60);
  padding-bottom: var(--gap-60);
}

.day-section--next {
  margin-top: var(--gap-140);
}

.day-schedule {
  padding-bottom: var(--gap-80);
}

.day-program {
  padding-bottom: var(--gap-40);
}


/* ---- 날짜 박스 ---- */
.date-box {
  background-color: var(--color-background-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
	width:220px;
	height: 220px;
}

.date-number {
  display: flex;
  align-items: center;
  line-height: 1;
}

.date-digit {
  font-size: 50px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1;
}

.date-sep {
  font-size: 50px;
  font-weight: 300;
  color: var(--color-dark);
  display: inline-block;
  transform: skewX(-10deg);
  line-height: 1;
}

.date-day {
  font-size: 50px;
  font-weight: 900;
  color: var(--color-dark);
  margin-top: 8px;
  line-height: 1;
}


/* ---- 섹션 레이블 (주황) ---- */
.section-orange-label {
  font-size: var(--font-size-xxlarge);
  color: var(--color-point);
  font-weight: 500;
  margin-bottom: var(--gap-50);
  line-height: 1.2;
}


/* ============================================
   SCHEDULE TABLE
   ============================================ */
.schedule-table {
  width: 100%;
}

.schedule-row {
  display: flex;
  align-items: center;
  padding: 18px 0;
  min-height: 44px;
}

.sch-time {
  width: 168px;
  font-size: var(--font-size-large);
  color: var(--color-dark);
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1.4;
}

.sch-vdivider {
  width: 1px;
  height: 15px;
  background-color: var(--color-border);
  flex-shrink: 0;
  margin: 0 20px;
}

.sch-program {
  width: 190px;
  font-size: var(--font-size-large);
  color: var(--color-dark);
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.4;
  word-break: keep-all;
}

.sch-desc {
  flex: 1;
  font-size: var(--font-size-large);
  color: var(--color-font);
  font-weight: 500;
  padding-left: var(--gap-40);
  word-break: keep-all;
}

.sch-hdivider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}


/* ============================================
   PROGRAM SECTION
   ============================================ */
.program-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.program-card {
  display: flex;
  align-items: center;
  gap: var(--gap-40);
  border: 1px solid var(--color-border);
  padding: var(--gap-40);
  min-height: 323px;
  margin-bottom: var(--gap-40);
  background: var(--color-bright);
}

.program-card:last-child {
  margin-bottom: 0;
}

/* ---- 프로그램 이미지 ---- */
.program-img-wrap {
  width: 215px;
  height: 243px;
  overflow: hidden;
  flex-shrink: 0;
}

.program-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- 프로그램 정보 ---- */
.program-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 243px;
  min-width: 0;
}

.program-title {
  font-size: 28px;
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.3;
  word-break: keep-all;
	margin-bottom:var(--gap-20);
}

.program-desc {
  font-size: var(--font-size-large);
  color: var(--color-font);
  font-weight: 400;
  line-height: 1.4;
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.program-btn-wrap {
  display: flex;
  align-items: center;
}

/* 회색 버튼 (자유체험 / 현장접수) */
.program-btn-gray {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  padding: 8px 24px;
  font-size: var(--font-size-normal);
  color: var(--color-font);
  font-weight: 500;
  min-width: 126px;
  text-align: center;
  line-height: 1.8;
  white-space: nowrap;
}

/* 주황 버튼 (사전예약) */
.program-btn-orange {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-20);
  border: 1px solid var(--color-point);
  border-radius: 30px;
  padding: 8px 16px 8px 24px;
  font-size: var(--font-size-normal);
  color: var(--color-point);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.8;
  transition: background-color 0.2s, color 0.2s;
}

.program-btn-orange:hover {
  background-color: var(--color-point);
  color: var(--color-bright);
}

.program-btn-orange:hover .btn-arrow-circle svg path {
  stroke: var(--color-bright);
}

.btn-arrow-circle {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-point);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s;
}

.program-btn-orange:hover .btn-arrow-circle {
  border-color: var(--color-bright);
}


/* ============================================
   RESPONSIVE — 1024px 이하
   ============================================ */
@media only screen and (max-width: 1024px) {
  .day-col {
    width: 280px;
  }

  .date-box {
    width: 150px;
    height: 150px;
    padding: 30px;
  }

  .date-digit,
  .date-sep {
    font-size: 42px;
  }

  .date-day {
    font-size: 40px;
    letter-spacing: 7px;
  }

  .sch-time {
    width: 140px;
  }

  .sch-program {
    width: 160px;
	  text-align: left;
  }
	
	.sch-desc{
		text-align: left;
		padding-left:0;
	}
	
  .schedule-row{
      display: flex;
	  flex-direction: column;
	  align-items: flex-start;
      padding: 18px 0;
      min-height: 44px;
	  gap:var(--gap-20);
  }
	
  .sch-vdivider{display:none;}
}


/* ============================================
   RESPONSIVE — 768px 이하
   ============================================ */
@media only screen and (max-width: 768px) {
  .week-tabs-section {
    padding: var(--gap-80) var(--layout-side-margin) var(--gap-50);
  }

  .week-tabs {
    gap: var(--gap-50);
    flex-wrap: wrap;
    justify-content: center;
  }

  .week-tabs .tab-item {
    font-size: var(--font-size-xlarge);
  }

  .habits-main-title {
    font-size: var(--font-size-huge);
  }

  .habits-subtitle {
    font-size: var(--font-size-xlarge);
  }

  /* 좌우 2단 → 상하 1단 전환 */
  .habits-inner {
    flex-direction: column;
    gap: var(--gap-80);
  }

  .day-col {
    width: 100%;
    position: static;
  }

  .date-box {
    width: 160px;
    height: 160px;
  }

  .date-digit,
  .date-sep {
    font-size: 34px;
  }

  .date-day {
    font-size: 32px;
    letter-spacing: 6px;
    margin-top: 6px;
  }

  .section-orange-label {
    font-size: var(--font-size-xlarge);
  }


  .program-card {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--gap-30);
  }

  .program-img-wrap {
    width: 100%;
    height: 220px;
  }

  .program-info {
    gap: var(--gap-20);
    width: 100%;
  }

  .program-title {
    font-size: var(--font-size-xlarge);
  }

  .program-desc {
    font-size: var(--font-size-normal);
    -webkit-line-clamp: 4;
  }

  .day-section--next {
    margin-top: var(--gap-80);
  }
}


/* ============================================
   RESPONSIVE — 640px 이하
   ============================================ */
@media only screen and (max-width: 640px) {
  .week-tabs {
    gap: var(--gap-30);
  }

  .week-tabs .tab-item {
    font-size: var(--font-size-large);
  }

  .habits-main-title {
    font-size: var(--font-size-huge);
  }

  .habits-subtitle {
    font-size: var(--font-size-large);
  }


  .program-title {
    font-size: var(--font-size-large);
  }

  .program-desc {
    font-size: var(--font-size-small);
  }

  .date-digit,
  .date-sep {
    font-size: 28px;
  }

  .date-day {
    font-size: 26px;
    letter-spacing: 4px;
  }

  .date-box {
    width: 100px;
    height: 100px;
  }
}