.app{
height: 100vh; display: grid; grid-template-columns: 70% 30%;
}
.con {width:1300px; margin:0 auto;}

.serch_inner {padding-bottom:30px; border-bottom:1px solid #ccc; display:inline-block; width:100%;}
.calendar-wrap{ width:36%; padding: 2%; border-right:1px solid var(--border); float:left;}
.cal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cal-title{ font-size:20px; font-weight:bold; letter-spacing:0.3px; }
.cal-controls{ display:flex; gap:8px; }
.btn_cal{ background:#283294; color:#fff; padding:8px 10px; border-radius:10px; font-weight:600; cursor:default; border:0;}
.btn_cal[aria-disabled="true"]{ opacity:.95; }
.btn_cal:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }


.weekdays, .days{ display:grid; grid-template-columns: repeat(7, 1fr); }
.weekday{ text-align:center; color:#000; font-weight:700; font-size:12px; padding:10px 0; border-bottom:1px solid #ccc; }


.day{
min-height: 50px; padding:5px;
display:flex; align-items:flex-start; justify-content:flex-start; position:relative; border-bottom:1px solid #ccc;
}
.day.empty{ background: #fff;}
.day.on {background:#efefef;}
.day.on a .num{font-weight:bold; color:#000;}
.day .num{ font-weight:700; font-size:12px; color: #000; }
.day .bb01 {background:#0d661f; border-radius:6px; padding:2px 6px; color:#fff; font-size:9px; margin-top:2px; display:inline-block;}
.day .bb02 {background:#dd3535; border-radius:6px; padding:2px 6px; color:#fff; font-size:9px;margin-top:2px; display:inline-block;}
.day .bb03 {background:#0d5966; border-radius:6px; padding:2px 6px; color:#fff; font-size:9px;margin-top:2px; display:inline-block;}
.day .bb04 {background:#0f2475; border-radius:6px; padding:2px 6px; color:#fff; font-size:9px;margin-top:2px; display:inline-block;}
.day .bb05 {background:#841a51; border-radius:6px; padding:2px 6px; color:#fff; font-size:9px;margin-top:2px; display:inline-block;}
.day .bbtxt {margin-left:1px; font-size:10px;}
.day.today{ outline:2px solid var(--accent); outline-offset: -2px; }


/* 우측: 입력 패널 */
.side{ padding: 2%; width:56%; float:left;}
.side h2{ margin:0 0 16px; font-size:18px; }
.form{ display:flex; flex-direction:column; gap:18px; }

.field{ display:inline-flex; flex-direction:column; gap:8px; margin:2px 0; width:100%;}
.label{ color:#000; font-weight:700; font-size:14px; width:100%; border-bottom:1px solid #ccc; padding:14px 0 8px 0; text-align:left; display:inline-block;}
.input, .select, .search{padding:0; border-radius:6px; border:1px solid #ccc; background:#efefef; color:#000; }
.range{ width:80%; float:left; display:inline-block;}

.areas{display:flex; justify-content:start;}
.areas li{padding-right:10px;}
.areas li:last-child{padding-right:0;}
.areas input[type=radio],[type=checkbox]{margin-right:5px;}
.area{margin-bottom:0; font-weight:normal;}

.chips{display:flex; justify-content:start;}
.chips li{margin:0; padding:0 10px 0 0;}
.chips li:last-child{padding-right:0;}
.chips input[type=radio]{margin-right:5px;}
.chip{margin-bottom:0; font-weight:normal;}

.titlesearch{padding:10px;}
/*
.areas{display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:0px; }
.area{padding:0 10px; display:inline-flex; gap:0px; font-size:14px;font-weight:normal;}
.chips{ display:flex; gap:0px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:0px; padding:0 12px; font-size:14px; font-weight:normal;}
.chip input{ accent-color: var(--accent); }
*/


.submit{ padding:12px 16px; margin-top:5px; border-radius:6px; background:#283294; color:#fff; font-weight:800; cursor:default; text-align:center; width:100%;}
.helper{ color:var(--muted); font-size:12px; }


.event_list {margin-top:30px; width:100%; display:inline-block;}
.event_sum {font-size:18px; font-weight:bold;}
.event_list ul {width:100%; display:inline-block; margin-top:20px;}
.event_list ul li {width:23%; margin:10px 1%; float:left;}
.event_list ul li a .e_img { width:100%; height:345px; overflow:hidden; border:1px solid #efefef;vertical-align:middle; display:flex;}
.event_list ul li a .e_img img {max-width:100%; width:100%;}
.event_list ul li a .e_tit {font-size:16px; font-weight:bold; line-height:30px; margin-top:10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.event_list ul li a .e_tit .e_cate01 {padding:4px 10px; font-size:12px; color:#fff; background:#0d661f; margin-right:10px; font-weight:normal;} 
.event_list ul li a .e_tit .e_cate02 {padding:4px 10px; font-size:12px; color:#fff; background:#dd3535; margin-right:10px; font-weight:normal;} 
.event_list ul li a .e_tit .e_cate03 {padding:4px 10px; font-size:12px; color:#fff; background:#0d5966; margin-right:10px; font-weight:normal;} 
.event_list ul li a .e_tit .e_cate04 {padding:4px 10px; font-size:12px; color:#fff; background:#0f2475; margin-right:10px; font-weight:normal;} 
.event_list ul li a .e_tit .e_cate05 {padding:4px 10px; font-size:12px; color:#fff; background:#841a51; margin-right:10px; font-weight:normal;} 


/* 반응형(아주 좁은 화면에서는 스택) */
@media (max-width: 1000px){
	.app{ grid-template-columns: 1fr; }
	.con {width:100%;}
	.calendar-wrap{ border-right: none; border-bottom:1px solid var(--border); width:100%; padding:0; margin-bottom:10px;}

	.side {width:98%; margin:0 1%; padding:0;}
	.area {gap:0; font-size:12px;}
	.chip {gap:0; font-size:12px;}

	.event_list ul li {width:48%;}
	.event_list ul li a .e_img {height:300px;}

}
/*  */
/*  */
/* --- 하이라이트 스타일 --- */

/* 오늘 날짜 하이라이트 (이전과 동일) */
.highlight-today {
    background-color: #bdc4df !important; /* 밝은 노란색 */
    border: 2px solid #204769 !important; /* 테두리 강조 */
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 이번 주 중간 날짜 하이라이트 */
.highlight-week {
    background-color: #e3f2fd !important; /* 밝은 파란색 */
    border-top: 1px solid #90caf9 !important;
    border-bottom: 1px solid #90caf9 !important;
    transition: background-color 0.3s ease;
}

/* 이번 주 첫째 날 (일요일) 하이라이트 - 왼쪽 모서리 라운드 */
.highlight-week-start {
    background-color: #e3f2fd !important;
    border: 1px solid #90caf9 !important;
    border-top-left-radius: 8px; /* 왼쪽 위 라운드 */
    border-bottom-left-radius: 8px; /* 왼쪽 아래 라운드 */
    transition: background-color 0.3s ease;
}

/* 이번 주 마지막 날 (토요일) 하이라이트 - 오른쪽 모서리 라운드 */
.highlight-week-end {
    background-color: #e3f2fd !important;
    border: 1px solid #90caf9 !important;
    border-top-right-radius: 8px; /* 오른쪽 위 라운드 */
    border-bottom-right-radius: 8px; /* 오른쪽 아래 라운드 */
    transition: background-color 0.3s ease;
}

/* 하이라이트된 셀 내부 텍스트 색상 (선택 사항) */
.highlight-today .num,
.highlight-week .num,
.highlight-week-start .num,
.highlight-week-end .num {
    font-weight: 700;
    color: #1a237e;
}

/* 앵커 태그의 기본 스타일을 제거하여 하이라이트가 깔끔하게 보이도록 합니다. */
.day.highlight-week a,
.day.highlight-week-start a,
.day.highlight-week-end a,
.day.highlight-today a {
    text-decoration: none;
    display: block; /* a 태그가 블록 레벨이 되어 전체 셀을 채우도록 */
    height: 100%;
    width: 100%;
    padding-top: 5px; /* 내부 패딩 조정 */
}
/* on 클래스를 가진 날짜는 기본적으로 하이라이트 스타일이 적용될 수 있으므로,
   새로운 하이라이트가 우선시되도록 !important를 사용했습니다. */

@media all and (max-width:768px){
	.m_field{flex-direction:row; border-bottom:1px solid #ccc;}
	.label{font-size:13px; width:50px; border:0; text-align:left; display:inline-block;}
	.m_field .areas{padding-top:10px;}
	.m_field .chips{padding-top:10px;}
}