/* ==========================================================================
   1. ¸ÞÀÎ ÄÁÅ×ÀÌ³Ê ¹× ±âº» ·¹À̾ƿô (±âÁ¸ ºñÀ² ¾ö°Ý À¯Áö)
   ========================================================================== */

.travel-container {
  width: 1116px;
  height: 340px; /* °íÁ¤ ³ôÀÌ Àý´ë Áؼö */
  background-color: #e2f6d9;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px; /* ¾çÂÊ ÄÜÅÙÃ÷¿Í Áß¾Ó ¿©¹é ÃÖÀûÈ­ */
  padding: 40px 45px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 16px;
}

.left-content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px; 
}

.right-content {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */ /* ÁÂÃø Á¤·ÄÀ» ÅëÇÑ °¡·Î Á¤·Ä ¾ÈÁ¤È­ */
  z-index: 2;
}

.bg-graphic {
  position: absolute;
  left: 280px;                  
  top: 40px;                    
  width: 240px;                 
  height: 240px;                
  background-image: url('/images/calendar/main_calendar.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;         
  z-index: 1;                   
  opacity: 0.5;
}

/* ==========================================================================
   2. ¿ÞÂÊ ÄÜÅÙÃ÷ ½ºÅ¸ÀÏ
   ========================================================================== */

.badge-container {
  position: relative; 
  margin-bottom: 18px; 
}

.badge {
  display: inline-block;
  background-color: #bbf29b;
  color: #27651a;
  font-weight: 600;
  font-size: 20px;
  padding: 10px;
  border-radius: 20px;
  position: relative; 
  left: -20px; 
  width: 240px;
  text-align: center;
  box-sizing: border-box;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #111;
  line-height: 1.4;
  text-align: left;
  margin: 0 0 18px 0; 
}

.description {
  font-size: 20px;
  color: #333;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   3. ¿À¸¥ÂÊ ÄÜÅÙÃ÷ ½ºÅ¸ÀÏ (´Þ·Â ¿ÜºÎ ·¹À̾ƿô ±¸Á¶)
   ========================================================================== */

.guide-text {
   color: #27651a; 
   margin-bottom: 6px; 
   margin-top: 0px; 
   font-size: 13.5px;
   font-weight: 500;
}

/* ? ´Þ·Â°ú ¿ìÃø Á¤º¸Ã¢À» ³ª¶õÈ÷ ¹èÄ¡Çϱâ À§ÇÑ °¡·Î Flex ÄÁÅ×ÀÌ³Ê */
.calendar-layout-flex {
  display: flex;
  gap: 16px; /* ´Þ·Â°ú ¿ÜºÎ Á¤º¸Ã¢ »çÀÌÀÇ ¿©¹é */
  align-items: center;
}

/* ´Þ·Â ¹Ú½º (º»¿¬ÀÇ »ç°¢Çü ºñÀ² º¹±¸ ¹× °¡µ¶¼º ¾÷±×·¹À̵å) */
.calendar-box {
  width: 360px; 
  height: 260px; 
  background-color: #fff;
  border: 1px solid #1a4d2e;
  border-radius: 12px;
  padding: 12px 14px 8px 14px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-weight: bold;
  font-size: 16px; 
  margin-bottom: 12px; 
  color: #333;
}

.arrow {
  color: #888;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  padding: 0 5px;
}

/* ´Þ·Â ÀÏÀÚ ±×¸®µå */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px; 
  text-align: center;
  font-size: 13.5px; 
  font-weight: 550;
}

.day-label {
  color: #888;
  font-weight: 600;
  font-size: 12.5px;
  padding-bottom: 4px;
}

.date-cell-wrapper {
  position: relative;
  height: 26px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.date-cell {
  width: 26px;       
  height: 26px;     
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  cursor: pointer;
  z-index: 2;
  box-sizing: border-box;
}

.date-cell:hover:not(.empty) {
  background-color: #f0f0f0;
  border-radius: 50%;
}

/* ==========================================================================
   4. ? [¿ÏÀü ºÐ¸®] ´Þ·Â ¿ÜºÎ ¿ìÃø Á¤º¸Ã¢ ÆгΠ½ºÅ¸ÀÏ
   ========================================================================== */

.external-info-panel {
  width: 170px; 
  height: 220px; /* ±âÁ¸ °íÁ¤ ³ôÀÌ À¯Áö */
  background-color: rgba(255, 255, 255, 0.85); 
  border: 1px solid #1a4d2e;
  border-radius: 12px;
  padding: 14px 12px; /* À§¾Æ·¡ ÆеùÀ» ¾ÆÁÖ »ì¦ ÁÙ¿© °ø°£ È®º¸ */
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  align-items: flex-start;
}

.info-date-box {
  display: flex;
  flex-direction: column;
  gap: 2px; /* »ì¦ Á¼Çô¼­ ÄÄÆÑÆ®ÇÏ°Ô ¹èÄ¡ */
  width: 100%;
}

.info-label {
  font-size: 11px;
  color: #666;
  font-weight: bold;
}

.info-value {
  font-size: 13px;
  color: #1a4d2e;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e2f6d9;
  text-align: center;
  display: block;
  background-color: #e2f6d9;
}

/* ? ¹öÆ° ±×·ì ·¡ÆÛ */
.btn-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px; /* ¹öÆ° µÎ °³ »çÀÌÀÇ ¿©¹é */
}

/* Á¶È¸Çϱ⠹öÆ° ½ºÅ¸ÀÏ */
.search-btn {
  background-color: #1a4d2e;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: bold;
  width: 100%;
  height: 32px; /* ³ôÀ̸¦ 32px·Î Á¶ÀýÇÏ¿© ¹ë·±½º À¯Áö */
  border-radius: 6px; 
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color 0.2s;

  /* ? ¹è°æ À̹ÌÁö °ü·Ã ¼³Á¤ ¼öÁ¤ */
  background-image: url('/images/Member/arrow_right.png');
  background-repeat: no-repeat;
  background-position: right 12px center; /* ¿ìÃø¿¡¼­ 6px, ¼¼·Î Áß¾Ó */
  background-size: 16px;
}


/* ? ÃʱâÈ­ ¹öÆ° ½ºÅ¸ÀÏ Ãß°¡ */
.reset-btn {
  background-color: #fff;
  color: #666;
  border: 1px solid #ccc;
  font-size: 12px;
  font-weight: bold;
  width: 100%;
  height: 28px; 
  border-radius: 6px; 
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.2s;
}

.reset-btn:hover {
  background-color: #f5f5f5;
  color: #333;
  border-color: #999;
}

/* ==========================================================================
   5. Ķ¸°´õ ¹üÀ§ ¼±Åà ÇÏÀ̶óÀÌÆ® È¿°ú
   ========================================================================== */

.date-cell-wrapper.in-range {
  background-color: #d1f5be;
}

.date-cell-wrapper.range-start-bound {
  background: linear-gradient(to right, transparent 50%, #d1f5be 50%);
}

.date-cell-wrapper.range-end-bound {
  background: linear-gradient(to left, transparent 50%, #d1f5be 50%);
}

.date-cell-wrapper.no-blend {
  background: transparent !important;
}

.date-cell.range-start,
.date-cell.range-end {
  background-color: #219212 !important;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
}

.arrow:hover:not(.disabled) {
  color: #1a4d2e;
}

.arrow.disabled {
  color: #ccc;
  opacity: 0.5;
}