@charset "utf-8";

.section-wrap { height: calc(100vh - 182px); max-height: 743px; }
.calendar { height: 100%; line-height: 1.4; }
#calendar-controls { display: flex; flex-direction: column; align-items: center; }
#calendar-controls #calendar-year { color: #232323; font-size: 28px; font-weight: 600; }
#calendar-controls #calendar-month { color: #1b1464; font-size: 48px; font-weight: 600; margin-top: 20px; }
.custom-year-button-group { width: 100%; position: absolute; top: 34px; left: 50%; transform: translateX(-50%); }
.custom-year-button-group button { width: 10px; height: 24px; position: relative; }
.custom-year-button-group button.fc-state-default { border: none; text-shadow: none; box-shadow: none; }
.custom-year-button-group button.fc-state-default.fc-corner-left { margin: 0 50px 0 0; }
.custom-year-button-group button.fc-state-default.fc-corner-right { margin: 0 0 0 50px; }
.custom-year-button-group button.fc-state-default.fc-corner-left, .custom-year-button-group button.fc-state-default.fc-corner-right { font-size: 0; background: none; border-radius: 0; }
.custom-year-button-group button::before { content: ''; width: 16px; height: 16px; background: url('../img/calendar/arrow_black.svg') no-repeat center center; background-size: contain; position: absolute; top: 3px; }
.custom-year-button-group button.fc-state-default.fc-corner-left::before { left: 0; transform: rotate(-135deg); }
.custom-year-button-group button.fc-state-default.fc-corner-right::before { right: 0; transform: rotate(45deg); }
.fc-button-group { width: 100%; position: absolute; top: 110px; left: 50%; transform: translateX(-50%); }
.fc-button-group button { width: 16px; height: 34px; position: relative; }
.fc-button-group button.fc-state-default { border: none; text-shadow: none; box-shadow: none; }
.fc-button-group button.fc-state-default.fc-corner-left { margin: 0 80px 0 0; }
.fc-button-group button.fc-state-default.fc-corner-right { margin: 0 0 0 80px; }
.fc-button-group button.fc-state-default.fc-corner-left, .fc-button-group button.fc-state-default.fc-corner-right { font-size: 0; background: none; border-radius: 0; }
.fc-button-group button::before { content: ''; width: 24px; height: 24px; background: url('../img/calendar/arrow_blue.svg') no-repeat center center; background-size: contain; position: absolute; top: 5px; }
.fc-button-group button.fc-state-default.fc-corner-left::before { left: 0; transform: rotate(-135deg); }
.fc-button-group button.fc-state-default.fc-corner-right::before { right: 0; transform: rotate(45deg); }
.calendar-wrap { display: flex; align-items: stretch; height: 100%; background: #fff; border: 1px solid #ddd; box-shadow: 0 0 50px rgba(195, 195, 195, 0.3); }
.calendar-wrap td { text-align: center; }
.fc-row.fc-widget-header { border-right: none !important; margin-right: 0 !important; }
.calendar-wrap .calendar-table { flex: 1; width: calc(100% - 400px); min-width: 600px; border-right: 1px solid #ddd; padding: 30px; position: relative; }
.calendar-wrap .calendar-table .color-info { display: flex; font-size: 14px; }
.calendar-wrap #eventListContainer { display: flex; flex-direction: column; width: 400px; }
.fc-day-header { color: #565656; font-size: 14px; font-weight: 500; }
.fc-day-header.fc-sun { color: #db1111; }
.fc-day-top { height: 80px; position: relative; cursor: pointer; }
.fc-day-top .fc-day-number { width: 60px; height: 60px; color: #565656; font-size: 14px; font-weight: 500; border: 2px dashed transparent; padding: 17px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); box-sizing:border-box; }
.fc-day-top.clicked-date .fc-day-number { color: #1b1464; font-weight: 600; border: 2px dashed #1b1464; }
.fc-day-top { border: 1px solid #ddd; }
.fc-day-top.has-event .fc-day-number { border: 2px dashed #ddd; }
.fc-day-top.has-event.clicked-date .fc-day-number { border: 2px dashed #1b1464; }
.fc-unthemed td.fc-today { background: transparent; }
.fc-unthemed td.fc-today .fc-day-number { background: #1b14641f; }
.event-count { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; color: #fff; font-size: 14px; font-weight: 600; background: #ec1c24; border-radius: 50%; position: absolute; top: 0; right: 0; }
#eventListContainer { padding: 50px 30px; }
#eventListContainer .listHeader { text-align: center; padding-bottom: 20px; }
#eventListContainer .selectYear { color: #454545; font-size: 18px; font-weight: 600; }
#eventListContainer .selectMonthDay { color: #1b1464; font-size: 36px; font-weight: 600; }
#eventListContainer .eventList { flex: 1; padding-right: 6px; overflow-y: auto; }
#eventListContainer .event-group { display: flex; flex-direction: column; gap: 20px; }
#eventListContainer .event-card { flex-direction: column; background:#fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; }
#eventListContainer .event-thumb { display: flex; justify-content: center; align-items: center; width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px; }
#eventListContainer .event-thumb { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
#eventListContainer .event-thumb img { width: 100%; height: 120px; object-fit: contain; background: #fafafa; }
#eventListContainer .event-title { color: #111827; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
#eventListContainer .event-info { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
#eventListContainer .event-info > div { display: flex; font-size: 14px; }
#eventListContainer .event-label { min-width: 40px; color: #6b7280; }
#eventListContainer .event-value { color: #374151; }
#eventListContainer .event-desc { margin-bottom: 10px; }
#eventListContainer .event-desc-text { color: #444; font-size: 14px; line-height: 1.5; word-break: break-all; }
#eventListContainer .event-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; }
#eventListContainer .event-down { margin-top: 6px; }
#eventListContainer .event-download { display: inline-block; color: #2563eb; font-size: 14px; text-decoration: none; position: relative; }
#eventListContainer .event-download::after { content: ''; display: inline-block; width: 12px; height: 12px; background: url('data:image/svg+xml;utf8,<svg fill="%232563eb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 16l4-5h-3V4h-2v7H8z"/><path d="M5 18h14v2H5z"/></svg>') no-repeat center/contain; margin-left: 4px; }
#eventListContainer .event-link { flex: 0 0 85px; font-size: 14px; margin-left: auto; }
#eventListContainer .event-open-in-new-tab { color: #fff; background: #1b1464; border-radius: 50px; padding: 10px 18px; transition: 0.2s; }
#eventListContainer .event-link:hover .event-open-in-new-tab { background: #32367e; }
#eventListContainer .event-card + .event-card { border-top: 1px solid #eee; padding-top: 20px; }
#eventListContainer .eventList .event-group .no-events { font-size: 14px; text-align: center; }

@media (max-width: 1240px) {
  .section-wrap { height: auto; max-height: none; }
  .calendar-wrap { flex-direction: column; }
  .calendar-wrap .calendar-table { width: 100%; min-width: auto; border-right: none; border-bottom: 1px solid #ddd; }
  .calendar-wrap #eventListContainer { width: 100%; }
}

@media (max-width: 640px) {
  .fc-day-top .fc-day-number { width: 40px; height: 40px; padding: 8px; }
  .event-count { top: 10px; right: -10px; }
}