/* 공통 시작 */
.f_gold{color:#7a6842;}
.f_red{color:#f2413c;}
.f_bold{font-weight:600;}
/* 미디어쿼리 시작 */
/* 미디어쿼리 끝*/
/* 공통 끝 */
/* 페이지네이션 시작 */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: .6rem;
margin-top: 3.4rem;
}
.pagination .nav-arrow,
.pagination a {
min-width: 4.2rem;
height: 4.2rem;
padding: 0 .6rem;
border-radius: 10px;
border: 1px solid rgba(112, 115, 124, 0.16);
background: #fff;
font-size: 1.5rem;
font-weight: 600;
color: rgba(112, 115, 124, 0.88);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 120ms cubic-bezier(0.22, 1, 0.36, 1);
text-decoration: none;
cursor: pointer;
}
.pagination .nav-arrow:hover:not(.disabled),
.pagination a:hover {
border-color: #1b6b4c;
color: #1b6b4c;
background: rgba(0, 102, 255, 0.06);
}
.pagination a.active {
background: #1b6b4c;
border-color: #1b6b4c;
color: #fff;
}
.pagination .nav-arrow.disabled {
opacity: .4;
cursor: default;
pointer-events: none;
}
.pagination .nav-arrow svg {
width: 1.8rem;
height: 1.8rem;
}
/* 페이지네이션 끝 */
/* 글쓰기 버튼 — 공통 시작 */
.bbs-write-wrap {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.bbs-write-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 4.2rem;
padding: 0 20px;
border-radius: 10px;
background: #0066FF;
color: #fff;
font-weight: 600;
text-decoration: none;
transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
border: none;
}
.bbs-write-btn:hover {
background: #0058DA;
color: #fff;
}
/* 글쓰기 버튼 — 공통 끝 */
/* 게시판 하단 버튼 시작 */
.btn_wrapper{display: flex; gap:0 10px; margin-top: 30px; flex-wrap: wrap; justify-content: end;}
.btn_wrapper a{display: flex; justify-content: center; align-items: center; height:48px; padding: 0 20px; transition:0.3s; font-size:1.8rem; line-height:1; border-radius:48px;}
.btn_wrapper a.list_btn{padding: 0 23px 0 23px;}
.btn_wrapper a.list_btn span{padding-right:23px; padding-top:1px; position:relative;}
.btn_wrapper a.list_btn span:before{
content: "";
width: 13px;
height: 14px;
position: absolute;
top: calc(50% + 1px);
right: 0;
transform: translate(0, -50%);
background: url(../images/board/menu_list_btn_icon.svg) no-repeat;
background-size: 13px;
background-position: center;
}
.btn_black{background: #111; color: #fff; border: 1px solid #111;}
.btn_red{background: #f2413c; color: #fff; border: 1px solid #e22d2f;}
.btn_blue{background: #2c76be; color: #fff; border: 1px solid #2169af;}
.btn_gray{background: #555; color: #fff; border: 1px solid #424242;}
.btn_brown{background:#7a6842; color: #fff; border: 1px solid #52452a;}
.btn_white{background: #fff; color: #505c76; border: 1px solid #a7acbb; box-shadow: 2px 2px 0px rgb(202 202 202 / 20%);}
/* 미디어쿼리 시작 */
@media (max-width: 1024px){
.btn_wrapper{margin-top:20px;}
.btn_wrapper a.list_btn{padding: 0 13px 0 18px;}
}
@media (max-width: 768px){
.btn_wrapper{margin-top:15px;}
.btn_wrapper a.list_btn{padding: 0 11px 0 16px;}
.btn_wrapper a.list_btn span{padding-right:22px;}
}
@media (max-width: 500px){
.btn_wrapper a.list_btn{padding: 0 9px 0 14px;}
.btn_wrapper a.list_btn span{padding-right:22px;}
}
/* 미디어쿼리 끝 */
/* 게시판 하단 버튼 끝 */
/* 게시판 하단(기본게시판 목록 커스텀) 시작 */
.btn_wrapper.list_btn_wrap{margin-top:20px; margin-bottom:-4vh;}
.btn_wrapper.list_btn_wrap a{width:150px; padding-bottom:2px;}
/* 미디어쿼리 시작 */
@media (max-width: 1024px){
.btn_wrapper.list_btn_wrap{margin-bottom:-3vh;}
}
@media (max-width: 768px){
.btn_wrapper.list_btn_wrap{margin-bottom:-2vh;}
}
@media (max-width: 500px){
.btn_wrapper.list_btn_wrap{margin-bottom:-1vh;}
.btn_wrapper.list_btn_wrap a{width:100%; height:48px; border-radius:48px; margin-left:0; padding-bottom:0;}
}
/* 미디어쿼리 끝*/
/* 게시판 하단(기본게시판 목록 커스텀) 끝 */
/* 게시판 하단(기본게시판 쓰기 커스텀) 시작 */
.btn_wrapper.write_btn_wrap{justify-content: center; margin-top:5vh;}
.btn_wrapper.write_btn_wrap a{padding: 0 40px;}
.btn_wrapper.write_btn_wrap a:first-child{margin-left:0;}
/* 미디어쿼리 시작 */
@media (min-width: 601px){
.btn_wrapper.write_btn_wrap a{width:150px; height:50px; font-size:1.8rem;}
}
@media (max-width: 1024px){
.btn_wrapper.write_btn_wrap{gap:0 8px;}
.btn_wrapper.write_btn_wrap a{height:48px;}
}
@media (max-width: 600px){
.btn_wrapper.write_btn_wrap{margin-top:4vh;}
.btn_wrapper.write_btn_wrap a{padding: 0 48px 0 48px;}
}
@media (max-width: 350px){
.btn_wrapper.write_btn_wrap a{padding: 0 40px 0 40px; font-size: 1.7rem;}
}
/* 미디어쿼리 끝 */
/* 게시판 하단(기본게시판 쓰기 커스텀) 끝 */
/* 게시판 하단(기본게시판 보기 커스텀) 시작 */
.btn_wrapper.view_btn_wrap{display: flex; justify-content: space-between;}
.btn_wrapper.view_btn_wrap a{border-radius:5px; padding: 0 25px;}
.btn_wrapper.view_btn_wrap a.list_btn{width: 140px; border-radius: 50px; padding: 0 19px 0 19px;}
.btn_wrapper.view_btn_wrap .right_field{display: inline-flex; gap: 0 6px;}
/* 미디어쿼리 시작 */
@media (max-width: 768px){
.btn_wrapper.view_btn_wrap{margin-top:30px;}
.btn_wrapper.view_btn_wrap a.list_btn{width: 120px;}
}
@media (max-width: 500px){
.btn_wrapper.view_btn_wrap{flex-wrap: wrap; gap: 30px; margin-top:30px;}
.btn_wrapper.view_btn_wrap .left_field{width:100%; order:2;}
.btn_wrapper.view_btn_wrap .right_field{width:100%; order:1; justify-content: center;}
.btn_wrapper.view_btn_wrap a{width:100%; max-width:90px;}
.btn_wrapper.view_btn_wrap a.list_btn{width:100%; max-width:100%; height: 50px; border-radius: 50px; font-size:1.8rem;}
}
@media (max-width: 350px){
.btn_wrapper.view_btn_wrap a{max-width:80px; font-size:1.7rem;}
}
/* 미디어쿼리 끝 */
/* 게시판 하단(기본게시판 보기 커스텀) 끝 */
/* 기본 게시판 상단 정보 및 검색 시작 */
.board_info > form{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 23px;}
.board_info .board_info-current {display: flex;align-items: center; padding-bottom:1px;}
.board_info .board_info-current span {color: #666; font-size: 1.8rem; font-weight: 400; padding-right: 10px; margin-right: 10px; line-height: 1; position:relative;}
.board_info .board_info-current span:before{
content:"";
width: 1px;
height: 12px;
position: absolute;
top:2px;
right: 0;
background-color:#ddd;
}
.board_info .board_info-current span:last-child:before{display:none;}
.board_info .board_info-current span strong {font-weight: 700; color: #333; margin-left: 0.5rem;}
.board_info .board_info-search{display:flex;}
.board_info .board_info-search .select_wrap{position:relative;}
.board_info .board_info-search .select_wrap:before{
content: "";
width: 22px;
height: 22px;
position: absolute;
top: calc(50% + 1px);
right: 9px;
transform: translate(0, -50%);
background: url(../images/board/expand_more.svg) no-repeat;
background-size: 22px;
pointer-events: none;
z-index: 1;
}
.board_info .board_info-search select {display:inline-block; min-height:48px; padding-left: 15px; padding-right: 35px; position: relative; border: 1px solid #c5c9d6 ; border-radius: 5px; color:#898989; box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);}
.board_info .board_info-search select.short_foam{width:100px;}
.board_info .board_info-search input{display:inline-block; width:250px; min-height:48px; padding:0 15px; position: relative; border: 1px solid #c5c9d6 ; border-radius: 5px;border-top-right-radius: 0; border-bottom-right-radius: 0; color:#898989; box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);}
.board_info .board_info-search .searchinput {display:flex;}
.board_info .board_info-search .searchinput input{margin-left:6px; color:#898989;}
.board_info .board_info-search button{display: flex;align-items: center; justify-content: center; width: 48px; height: 48px; text-align: center; border-radius: 5px; border-top-left-radius: 0; border-bottom-left-radius: 0; background: #393939 url(../images/board/search_button_icon.svg) no-repeat; background-position:center; background-size: 18px;}
.board_info .board_info-search .ml_select{margin-left:10px;}
/* 미디어쿼리 시작 */
@media (min-width: 651px){
.board_info .board_info-search{margin-bottom:-1px;}
}
@media (max-width: 1320px){
.board_info .board_info-search select {min-height:45px; font-size: 1.6rem}
.board_info .board_info-search input{min-height:45px; font-size: 1.6rem;}
.board_info .board_info-search button {width: 45px; height: 45px; font-size: 1.6rem;}
.board_info .board_info-search input{width:200px;}
}
@media (max-width: 768px){
.board_info > form{margin-bottom: 20px;}
.board_info .board_info-search .searchinput input{margin-left:5px;}
.board_info .board_info-search .select_wrap:before {width: 20px; height: 20px; right: 9px; background-size: 20px;}
.board_info .board_info-current span{font-size:1.6rem;}
.board_info .board_info-search select.short_foam{width:90px;}
.board_info .board_info-search .ml_select{margin-left:5px;}
}
@media (max-width: 650px){
.board_info .board_info-current{display:none;}
.board_info .board_info-search{width:100%;}
.board_info .board_info-search .searchinput{width: calc(100% - 90px);}
.board_info .board_info-search .searchinput input{width:calc(100% - 45px);}
}
@media (max-width: 500px){
.board_info > form{margin-bottom:18px;}
.board_info .board_info-search select {min-height:42px; font-size: 1.5rem}
.board_info .board_info-search input{width:180px; min-height:42px; font-size: 1.5rem;}
.board_info .board_info-search button {width: 42px; height: 42px; font-size: 1.5rem; background-size: 16px;}
.board_info .board_info-search select{padding-left:15px;}
.board_info .board_info-search select.short_foam{width:80px;}
.board_info .board_info-search .searchinput{width: calc(100% - 80px);}
.board_info .board_info-search .searchinput input{padding: 0 11px;}
}
/* 미디어쿼리 끝 */
/* 기본 게시판 상단 정보 및 검색 끝 */
/* 기본게시판 목록 시작 */
.normal_list{font-size:1.8rem;}
.normal_list .w_top{width:10%;}
.normal_list .w_write{width:11%;}
.normal_list .w_date{width:11%;}
.normal_list .w_file{width:5%;}
.normal_list .w_reply{width:7%;}
.normal_list tr{position:relative;}
.normal_list tr td{ transition:background 0.3s linear;}
.normal_list tr:hover td {background: #fafafa;}
.normal_list tr:hover td.w_subject > a{transition:color 0.3s linear;}
.normal_list tr:hover td.w_subject > a{color: black;}
.normal_list th, .normal_list td{padding:25px 10px; line-height: 1.45; border-bottom:1px solid #eaecf1; text-align:center; font-weight:400; vertical-align:middle;}
.normal_list thead th{position:relative; padding:17px 10px 17px 10px; background:#f9fafb; border-top:1px solid #d2d7dc; border-bottom:1px solid #d2d7dc; font-weight:600; color:#222;}
.normal_list thead th:before{
content: "";
width: 1px;
height: 15px;
position: absolute;
top: 50%;
left: 0;
background-color: #d2d2d2;
transform: translate(0, -50%);
}
.normal_list thead th:first-child:before{display:none;}
.normal_list thead tr:first-child th{border-top:2px solid black;}
.normal_list td{color:#555; word-break:break-all;}
.normal_list td.w_top{font-weight:500;}
.normal_list td.w_subject{font-size:1.9rem; text-align:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.normal_list td.w_subject > a{display: inline-flex; width: 100%; align-items: center; color:black;}
.normal_list td.w_subject .title_in{display: inline-flex; align-items: center; max-width: 100%; gap: 4px; padding-right:20px;}
.normal_list td.w_subject .title_in .title_text{display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.normal_list td.w_subject .title_in .new_icon{line-height:1; padding-top:1px;}
.normal_list td.w_subject .title_in .new_icon > i{font-size:2.1rem; color:#F44336;}
.normal_list td.w_subject .title_in .secret_icon{position:relative; width:1.5rem; height:2.1rem; line-height:1; padding-top:1px;}
.normal_list td.w_subject .title_in .secret_icon:before{
content: "";
display: inline-block;
width: 100%;
height: 100%;
font-size: 0;
line-height: 0;
background: url(../images/board/icon_lock.svg) no-repeat;
background-size: contain;
}
.normal_list td.w_date{letter-spacing:-0.075rem; word-break: keep-all;}
.normal_list td.w_date .w_date_wrap{display:inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.normal_list td.w_write{word-break: break-word; word-break: keep-all; overflow-wrap: break-word;}
.normal_list td.w_file{line-height:1;}
.normal_list td.w_file .file_icon{display:inline-block; width:17px; height:19px; background: url(../images/board/file_exist_icon.svg) no-repeat; background-size:contain; font-size:0; line-height:0;}
.normal_list .point_color{color:#306e52; font-weight:600;}
/* 미디어쿼리 시작 */
@media (max-width: 1280px){
.normal_list td.w_write, .normal_list td.w_date, .normal_list td.w_reply{font-size:1.7rem;}
.normal_list thead th{font-size: 1.7rem; padding: 15px 10px;}
.normal_list .w_file{width:80px;}
.normal_list .w_reply{display:none;}
}
@media (max-width: 1140px){
.normal_list .w_date{width:130px;}
}
@media (max-width: 1024px){
.normal_list{font-size:1.7rem;}
.normal_list .w_top{width:70px;}
.normal_list .w_date{width:110px;}
.normal_list .w_file{width:60px;}
.normal_list thead th{padding: 14px 10px 13px 10px;}
.normal_list td{padding: 22px 10px;}
.normal_list td.w_top{letter-spacing: -0.15rem;}
.normal_list td.w_subject{font-size:1.8rem;}
.normal_list td.w_write{letter-spacing: -0.15rem; line-height:1.3;}
.normal_list td.w_date{letter-spacing: -0.15rem; line-height:1.3;}
.normal_list td.w_reply{letter-spacing: -0.15rem;}
.normal_list td.w_subject .title_in .new_icon{padding-top:2px;}
.normal_list td.w_subject .title_in{gap:3px;}
.normal_list td.w_subject .title_in .new_icon > i{font-size: 1.9rem;}
.normal_list td.w_subject .title_in .secret_icon{width:1.4rem; height:1.9rem;}
}
@media (max-width: 768px) {
.normal_list{font-size:1.6rem;}
.normal_list colgroup{display:none;}
.normal_list thead{display:none;}
.normal_list tr, .normal_list tbody, .normal_list td, .normal_list th{display: block; border: none; float: none;}
.normal_list tr {border-bottom: 1px solid #ddd; padding: 18px 3% 17px 70px; overflow: hidden; clear: both; width: 100%; display: flex; flex-wrap: wrap; align-items: center; position: relative;}
.normal_list tr:first-child{border-top: 2px solid black;}
.normal_list tr:hover td { background: none;}
.normal_list td {padding: 0; font-size: 1.5rem; padding-right: 10px;}
.normal_list td.w_top{position: absolute; top: 21px; left: 13px; width: 50px; padding-left: 0; padding-right:0; margin-bottom: 5px; width:46px; text-align:left;}
.normal_list td.w_subject{width:100%; font-size: 1.9rem; margin-bottom: 8px; font-weight:500; padding-left:0; padding-right:0;}
.normal_list td.w_subject .title_in{padding-right:0;}
.normal_list td.w_write{width:auto;}
.normal_list td.w_date, .normal_list td.w_top, .normal_list td.w_file, .normal_list td.w_write, .normal_list td.w_reply{color:#818181; letter-spacing:-0.5px; font-size:1.6rem; font-weight: 400;}
.normal_list td.w_reply{width:auto; line-height:1.2;}
.normal_list .w_file{width:auto;padding-right:0;}
.normal_list td.w_file{position:relative; padding-left:12px;}
.normal_list td.w_file .file_icon:before{
content: "";
width: 1px;
height: 14px;
position: absolute;
top: 10px;
left: 0;
background-color: #d2d2d2;
transform: translate(0, -50%);
}
.normal_list td.w_subject .title_in{gap:4px;}
.normal_list td.w_subject .title_in .new_icon{padding-top:1px;}
.normal_list td.w_subject .title_in .new_icon > i{font-size: 2.1rem;}
.normal_list td.w_subject .title_in .secret_icon{width:1.5rem; height:2.1rem;}
}
@media (max-width: 500px) {
.normal_list{margin-bottom:20px;}
.normal_list tr{padding: 15px 10px 15px 10px;}
.normal_list .w_subject{font-size: 1.7rem; font-weight:500; margin-bottom: 6px;}
.normal_list .w_subject .title_in{overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; line-height:1.3;}
.normal_list .w_subject > a{align-items: end;}
.normal_list .w_reply{width:8%;}
.normal_list .file{margin-bottom:2px;}
.normal_list > a {font-size: 1.5rem;}
.normal_list td{font-size: 1.5rem;}
.normal_list td.w_top{top: 16px; left:8px;}
.normal_list td.w_subject{font-size:1.8rem;}
.normal_list tr:has(td.notice_on) td.w_subject{padding-left:45px;}
.normal_list tr:not(:has(td.notice_on)) td.w_top{display:none;}
.normal_list td.w_subject .title_in{gap:3px;}
.normal_list td.w_subject .title_in .new_icon{padding-top:2px;}
.normal_list td.w_subject .title_in .new_icon > i{font-size: 1.9rem;}
.normal_list td.w_subject .title_in .secret_icon{width:1.4rem; height:1.9rem;}
}
@media (max-width: 350px) {
.normal_list td.w_top{width: 36px; font-size:1.4rem;}
.normal_list tr:has(td.notice_on) td.w_subject{padding-left:40px;}
.normal_list td.w_subject{margin-bottom:6px;}
.normal_list td.w_subject .title_in .new_icon{padding-top:3px;}
.normal_list td.w_subject .title_in{gap:2px;}
.normal_list td.w_subject .title_in .secret_icon{padding-top:2px; width:1.3rem; height:1.8rem;}
}
/* 미디어쿼리 끝 */
/* 기본게시판 목록 끝 */
/* 기본게시판 보기 시작 */
.view_table_wrap {font-size:2.1rem; margin-bottom: 2em;}
.view_table_wrap .view_head{position: relative; border-top: 2px solid #111111;}
.board_view_title_topic{display: flex; align-items: center; justify-content: center; padding: 32px 20px 30px 20px; color: black; font-size: 3.5rem; font-weight: 600; text-align: center; line-height:1.4; letter-spacing: -0.5px;}
.board_view_title_list{padding: 20px 20px; background: #f9fafb; border-bottom: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9;}
.board_view_title_list ul {display: flex; align-items: center; justify-content: center;}
.board_view_title_list ul li {padding: 0 10px; display: flex; align-items: center; color: #555; font-size: 1.7rem; line-height: 1.25; letter-spacing:-0.5px;}
.board_view_title_list ul li span{position: relative; padding: 0 10px 0 12px; letter-spacing: -0.025rem; color: #222;}
.board_view_title_list ul li strong{font-weight:600; padding-left:10px; color:#222; letter-spacing:-0.15rem;}
.board_view_title_list ul li span::before{
display: block;
content: "";
position: absolute;
top: calc(50% + 1px);
left: 0;
width: 3px;
height: 3px;
transform: translateY(-50%);
background: #bbb;
border-radius:100%;
}
.board_view_title_list ul li span::after{
display: block;
content: "";
position: absolute;
top: calc(50% + 1px);
right: 0;
width: 1px;
height: 12px;
transform: translateY(-50%);
background: #ddd;
}
.board_view_info{padding:2em 0;}
.board_view_info > img {
display: block;
max-width:100%;
margin: 0 auto;
height: auto !important;
}
.board_view_file{display: flex; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.board_view_file > strong {position: relative; width: 150px; font-weight: 600; display: flex; justify-content: center; align-items: center; background: #f9fafb; font-size:1.7rem;}
.board_view_file > div.file{display: flex; flex-wrap:wrap; width: calc(100% - 150px); align-items:center; padding:22px 20px; font-size:1.7rem;}
.board_view_file > div.file > strong{display: flex; align-items: flex-start;}
.board_view_file > div.file .chk_plus{display:inline-flex; align-items:center; position:relative; padding-left:30px; transition:0.3s; letter-spacing:-0.5px; margin:10px; min-height: 22px; line-height: 22px; word-break: break-all; transition:color .4s;}
.board_view_file > div.file .chk_plus:hover{color:#09847F;}
.board_view_file > div.file .chk_plus:hover:before{background-color:#09847F;}
.board_view_file > div.file .chk_plus strong{display:inline-block; font-size:1.6rem; font-weight:500; margin-top: 3px;}
.board_view_file > div.file .chk_plus span{color: #aaa; font-size:1.4rem;}
.board_view_file > div.file .chk_plus > i{
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 18px;
background-color: #2c2e32;
padding: 2px;
border-radius: 5px;
border: 1px #232427 solid;
transition:all .4s;
}
.board_view_file > div.file .chk_plus:hover > i{background-color: #09847F; border: 1px #06716d solid;}
.board_view_file > div.file .review{display: inline-block; margin: 5px 10px 5px -3px; border: 1px #dddddd solid; padding: 6px 9px 7px 8px; letter-spacing: -0.075rem; border-radius: 5px; font-weight: 500; color: #1e2024; box-shadow: 3px 3px 3px rgb(241 241 241); font-size: 1.6rem; font-family: 'Kakao Small Sans';}
.board_view_navigation{display:flex; border: 1px solid #e4e4e7; margin-top: 15px;}
.board_view_navigation > a {display: flex; width:50%; color: #333; font-size: 1.7rem; font-weight: 500; align-items: center;}
.board_view_navigation > a .navi_title{position: relative; width: 150px; padding: 20px 0 20px 25px; font-weight: 600; display: flex; justify-content: flex-start; align-items: center; background: #f9fafb; border-right: 1px solid #e9e9e9;}
.board_view_navigation > a .navi_title .title_in_txt{position:relative; padding-left:30px;}
.board_view_navigation > a.board_view_prev_btn:only-child{width:100%; border-right:none;}
.board_view_navigation > a.board_view_next_btn:only-child{width:100%;}
.board_view_navigation > a.board_view_prev_btn .navi_title .title_in_txt:before{
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
background: url(../images/board/expand_icon.svg) no-repeat;
background-size: 20px;
opacity:0.8;
}
.board_view_navigation > a.board_view_next_btn .navi_title .title_in_txt:after{
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
background: url(../images/board/expand_more.svg) no-repeat;
background-size: 20px;
opacity:0.8;
}
.board_view_navigation > a span.post{width: calc(100% - 150px); padding: 0 25px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; transition:0.3s;}
.board_view_navigation > a span.post:hover{text-decoration: underline; color: #997a49;}
.board_view_prev_btn{border-right: 1px solid #e9e9e9;}
/* 미디어쿼리 시작 */
@media (max-width: 1280px){
.view_table_wrap{font-size:2rem;}
.board_view_title_topic{font-size: 3.2rem; padding: 29px 20px 27px 20px;}
.board_view_navigation > a .navi_title{width: 130px; padding: 20px 0 20px 20px;}
.board_view_navigation > a span.post{width:calc(100% - 130px);}
}
@media (max-width: 1024px){
.view_table_wrap{font-size:1.9rem;}
.board_view_title_list{padding: 15px 20px;}
.board_view_navigation{flex-wrap:wrap;}
.board_view_navigation > a{width:100%;}
.board_view_navigation > a .navi_title{padding:18px 0 18px 20px;}
.board_view_navigation > a.board_view_prev_btn{border-right:none;}
.board_view_navigation > a.board_view_next_btn{border-top: 1px dotted #e9e9e9;}
.board_view_navigation > a.board_view_next_btn:only-child{border-top:none;}
}
@media (max-width: 850px){
.board_view_title_list ul li.m_none{display:none;}
}
@media (max-width: 768px){
.view_table_wrap {font-size:1.8rem;}
.board_view_title_topic{padding: 22px 20px 22px 20px; font-size: 2.8rem;}
.board_view_title_list{padding: 14px 20px 14px 20px;}
.board_view_title_list ul li{font-size:1.6rem;}
.board_view_title_list ul li strong{font-size:1.6rem;}
.board_view_file > strong{width:110px; font-size:1.6rem;}
.board_view_file > div.file{padding: 15px 20px; width: calc(100% - 110px);}
.board_view_file > div.file .chk_plus strong{font-size:1.5rem; margin-top: 2px; line-height: 1.4;}
.board_view_navigation > a.board_view_next_btn .navi_title .title_in_txt:after{background-size:19px;}
.board_view_navigation > a.board_view_prev_btn .navi_title .title_in_txt:before{background-size:19px;}
.board_view_navigation > a .navi_title{width:110px; padding:16px 0 16px 15px;}
.board_view_navigation > a .navi_title .title_in_txt{padding-left:25px;}
.board_view_navigation > a span.post{width:calc(100% - 110px); padding:0 20px;}
}
@media (max-width: 650px){
.board_view_title_list{padding: 7px 0 0 0;}
.board_view_title_list ul{flex-wrap:wrap;}
.board_view_title_list ul li{width:100%; border-bottom: 1px #ddd dotted; margin-bottom: 7px; padding: 0 15px 7px 15px;}
.board_view_title_list ul li:last-child{margin-bottom: 0; border-bottom: none;}
.board_view_file{flex-wrap:wrap;}
.board_view_file > strong{width:100%; padding: 9px 0 10px 0; border-bottom: 1px solid #ededed;}
.board_view_file > div.file{width:100%; padding: 15px 5px;}
}
@media (max-width: 500px){
.view_table_wrap{font-size:1.7rem;}
.board_view_title_topic{padding: 20px 10px 20px 10px; font-size: 2.5rem;}
.board_view_title_list ul li span{padding:0 10px 0 10px;}
.board_view_navigation > a .navi_title{width: 95px; padding:14px 0 14px 14px;}
.board_view_navigation > a.board_view_prev_btn .navi_title .title_in_txt:before{width: 17px; height: 17px; background-size: 17px; left: -2px;}
.board_view_navigation > a.board_view_next_btn .navi_title .title_in_txt:after{width: 17px; height: 17px; background-size: 17px; left: -2px;}
.board_view_navigation > a .navi_title .title_in_txt{padding-left:20px; letter-spacing: -0.075rem;}
.board_view_navigation > a span.post{width:calc(100% - 95px); padding: 0 15px;}
}
@media (max-width: 350px){
.board_view_title_topic{padding: 18px 10px 18px 10px; font-size: 2.4rem;}
.board_view_title_list ul li{font-size:1.5rem;}
.board_view_title_list ul li strong{font-size:1.5rem; padding-left:8px;}
.board_view_file > div.file{font-size:1.6rem;}
.board_view_file > div.file .chk_plus{padding-left:28px;}
.board_view_file > div.file .chk_plus > i{font-size:16px;}
.board_view_navigation > a .navi_title{width: 65px; padding:15px 0; justify-content: center;}
.board_view_navigation > a.board_view_prev_btn .navi_title .title_in_txt:before{display:none;}
.board_view_navigation > a.board_view_next_btn .navi_title .title_in_txt:after{display:none;}
.board_view_navigation > a .navi_title .title_in_txt{padding-left:0; font-size:1.6rem;}
.board_view_navigation > a span.post{width:calc(100% - 65px); font-size:1.6rem; padding: 0 12px;}
}
/* 미디어쿼리 끝 */
/* 기본게시판 보기 끝 */
/* 게시판 쓰기 시작 */
.normal_write{border-top: 2px solid black; border-bottom: 1px solid #ccc;}
.normal_write .board_item_group {position: relative;}
.normal_write input[type="text"]{height:48px; border: 1px solid #ccc;}
.normal_write input[type="password"]{height:48px; border: 1px solid #ccc;}
.normal_write select{height:48px; padding: 0 70px 0 14px; background:url(../images/board/expand_more.svg) center no-repeat; background-size:22px; background-position:top +14px right +10px; border-radius:5px; box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); color:#595959; font-size:1.7rem; line-height:1; font-weight:500; border:1px #c5c9d6 solid; position:relative;}
.normal_write input[type="checkbox"]{width: 22px; height: 22px; border-radius: 3px; border: 1px #c5c9d6 solid; accent-color: #7a6842;}
.normal_write .bl_plus{border-left:1px solid #ddd;}
.normal_write .r_l{margin-right:5px;}
.normal_write .radio_input_wrap{display:flex; padding: 0 5px;}
.normal_write .radio_input_wrap .radio_one{display:flex; line-height:1; align-items:center;}
.normal_write .radio_input_wrap .radio_one:first-of-type{padding-right:30px; position:relative;}
.normal_write .radio_input_wrap .radio_one:first-of-type:before{
display: block;
content: "";
position: absolute;
top: 5px;
right: 14px;
width: 1px;
height: 12px;
background: #e5e5e5;
}
.normal_write .board_item_group dl{display: block; width: 100%; padding: 20px 0 0 0; font-size: 1.6rem;}
.normal_write .board_item_group dl:last-child{border-bottom:none;}
.normal_write .board_item_group dl > dt{display: block; width:180px; text-align: left; color: black;}
.normal_write .board_item_group dl > dd{display: block; width:calc(100% - 180px); padding: 10px 0 0 0; color: #222; text-align: left;}
.normal_write .board_item_group dl > dd.file_padding >div{padding:0 !important; }
.normal_write .board_item_group dl.two_frame > dd{width:calc(50% - 180px);}
.normal_write .board_item_group dl.editor_here > dt{display:none;}
.normal_write .board_item_group dl.editor_here > dd{padding:0;}
.normal_write .board_item_group dl dd textarea {
width: 100%;
min-height: 100px;
padding: 10px 12px;
font-size: 1.6rem;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
line-height: 1.5;
}
.normal_write .board_item_group .input_box_wrap {display: block; width: 100%;}
.normal_write .is_required {display: inline-block; padding-right: 8px; position: relative;}
.normal_write .is_required::after {
content: '';
width: 4px;
height: 4px;
background-color: #FF0000;
position: absolute;
right: 0;
top: 0px;
z-index: 1;
border-radius: 2px;
}
.normal_write .input_control[readonly] {background-color: #f5f5f5; color:#666;}
.normal_write .input_control{border-color: #ddd;}
.normal_write .hd_element{position: absolute; width: 0; height: 0; overflow: hidden; font-size: 0; line-height: 0; text-indent: -999999px;}
.normal_write .board_editor_wrap{padding:25px 0;}
.normal_write .board_editor_wrap textarea{width:100%; height:500px;}
.normal_write .board_item_group dl > dt > label{cursor: auto;}
.normal_write .board_item_group .input_box_wrap input[type="file"]{padding: 7px; background: #fff; display: flex; color: gray; font-size: 1.5rem;}
.normal_write .board_item_group .file_upload_foam > dt > label{line-height:1.5;}
.normal_write .board_item_group .file_upload_foam .choice_file_box{padding-bottom:18px; margin-bottom:18px; border-bottom:1px #cccccc dotted;}
.normal_write .board_item_group .file_upload_foam .choice_file_box:last-child{padding-bottom:0; margin-bottom:0; border-bottom:none;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box{display: flex; align-items: center; gap:0 10px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box .thumbnail_img_choice{display:inline-flex; align-items: center; gap:0 5px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box .thumbnail_img_choice label{position:relative; padding-right:10px; letter-spacing:-0.075rem;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box .thumbnail_img_choice label::after{
content: '';
width: 1px;
height: 15px;
background-color: #dddddd;
position: absolute;
right: 0;
top: 3px;
z-index: 1;
}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box .thumbnail_img_choice input[type='radio']{-webkit-appearance:none; -moz-appearance:none; appearance: none; width:18px; height:18px; border:2px solid #c1c1c1; border-radius:50%; outline:none; cursor:pointer; margin-top:1px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box .thumbnail_img_choice input[type='radio']:checked{background-color:#057edf; border:3px solid #fff; box-shadow:0 0 0 2px #88c0ed;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_explain_box{margin-top:8px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_explain_box input{width:100%; min-height:48px; border: 1px #e0dfec solid; font-size:1.8rem; letter-spacing: -0.075rem;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box{width:100%;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap{display: flex; align-items: center; min-height: 48px; padding: 10px 11px; font-size: 1.8rem; letter-spacing: -0.025rem; background: #fff; border: 1px #e0dfec solid; color: gray;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary{display: inline-flex; align-items: center;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary label{display: inline-flex; align-items: flex-start; font-weight: 600; font-size: 1.7rem;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary label .bitchk_w{width: calc(100% - 30px); line-height: 22px; color:#1e1e1e; font-size:1.7rem; font-weight: 500; letter-spacing: -0.075rem;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary label .bitchk_w .chk_file_name{display: inline; align-items: center; position:relative; color:#666;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary label .bitchk_w .chk_file_name .chk_file_name_txt{white-space: normal; overflow-wrap: anywhere; word-break: break-word;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary label .bitchk_w .del_txt{display:inline-block; font-size:1.7rem; margin-left:1px; margin-right:5px; color:#0029ff;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary label .bitchk_w .del_txt .par1{margin-right:1px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary label .bitchk_w .del_txt .par2{margin-left:1px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary input[type=checkbox] {display:none; position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary input[type=checkbox] + label span.custom_checkbox{display: inline-block; width: 24px; height: 24px; border: 2px solid #c7c7c7; box-shadow: 2px 2px 2px rgb(0 0 0 / 5%); margin-right: 7px; box-sizing: border-box; vertical-align: middle; transition: all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); -webkit-transition: all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); border-radius: 3px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary input[type=checkbox]:checked + label span.custom_checkbox{ border-color: #111; background: url(../images/contents/check.svg) no-repeat center center #111;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_upload_box .del_check_box_wrap .chk_primary input[type=checkbox]:checked + label .chk_file_name::after{
content: "* 저장 후 반영됩니다.";
display: inline-block;
color: #F44336;
font-size: 1.6rem;
}
.normal_write .board_item_group .file_upload_foam .file_upload_box .input_box_wrap input{border: 1px #e0dfec solid; height: auto; padding: 7px; font-size: 1.8rem; background-color:white; letter-spacing:-0.025rem;}
.normal_write .board_item_group .file_upload_foam .file_upload_box .input_box_wrap input.is_attached{color:black;}
.normal_write .board_item_group .file_upload_foam .file_upload_box .input_box_wrap input::file-selector-button{font-family: "Kakao Big Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; border: none; background: #057edf; padding: 5px 10px; border-radius: 3px; color: #fff; cursor: pointer; font-size:1.6rem; letter-spacing:-0.5px;margin-right:8px;}
/* CMS 첨부파일 컴포넌트 */
.normal_write .fileList { list-style:none; padding:0; margin:0; }
.normal_write .fileList li {padding:0; border-bottom:1px solid #ddd; }
.normal_write .fileList li:last-child { border-bottom:none; }
.normal_write .fileList dl { display:flex !important; flex-direction:column; gap:8px; border-bottom:none !important; min-height:auto !important; padding:8px 0 !important; table-layout:unset !important; }
.normal_write .fileList dl dt,
.normal_write .fileList dl dd { display:flex !important; align-items:center; gap:8px; width:100% !important; background:none !important; border:none !important; padding:0 !important; height:auto !important; vertical-align:unset !important; }
.normal_write .fileList dl dt input[type="file"] { flex:1; height:auto; padding:7px; font-size:1.5rem; border:1px solid #e0dfec; background:#fff; width:auto !important; }
.normal_write .fileList dl dt input[type="file"]::file-selector-button { border:none; background:#057edf; padding:5px 10px; border-radius:3px; color:#fff; cursor:pointer; font-size:1.5rem; margin-right:8px; }
.normal_write .fileList dl dd input[type="text"] { flex:1; height:42px; padding:0 12px; font-size:1.5rem; border:1px solid #e0dfec; width:auto !important; }
.normal_write .fileList .button { display:none; }
.normal_write .help-block { display:block; font-size:1.5rem; color:#888; margin-bottom:8px; font-weight:600; line-height:1.2;}
.normal_write .help-block span{word-break: break-all;}
.normal_write #addFileList .btn { padding:4px 12px; font-size:1.4rem; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; }
#smart_editor2 .se2_input_area { width: 100% !important; }
#smart_editor2 { width: 100% !important; }
#smart_editor2 iframe { width: 100% !important; }
/* 미디어쿼리 시작 */
@media (min-width: 601px){
.normal_write .board_item_group dl {display: table; table-layout: fixed; width: 100%; height: auto; min-height: 50px; border-bottom: 1px solid #ddd; padding: 0; font-size: 1.8rem;}
.normal_write .board_item_group dl > dt {display: table-cell; width: 200px; background-color: #f8f8f8; padding: 8px 16px; vertical-align: middle; background-color: #f8f8f8; border-right: 1px solid #ddd; color: black; padding: 8px 20px;}
.normal_write .board_item_group dl > dd {display: table-cell; width: auto; background: #fff; padding: 19px 0px 19px 20px; vertical-align: middle;}
/*.normal_write .board_item_group dl.two_frame > dd:first-of-type{padding:12px 16px;}*/
.normal_write .board_item_group .input_box_wrap input{width:320px;}
.normal_write .board_item_group .wfull input{width:100%;}
.normal_write .input_control{display: inline-block; width: 32px; height: 45px; padding: 12px 16px; font-size:1.8rem;}
.normal_write .board_editor_wrap {padding: 30px 0;}
}
@media (max-width: 1280px){
.normal_write .board_editor_wrap{padding: 20px 0;}
}
@media (min-width: 601px) and (max-width: 1280px){
.normal_write .board_item_group dl.two_frame.width_edit{display: flex; flex-wrap: wrap;}
.normal_write .board_item_group dl.two_frame.width_edit > dt{display: flex; align-items: center; border-bottom: 1px solid #ddd;}
.normal_write .board_item_group dl.two_frame.width_edit > dt.bl_plus{border-left:none;}
.normal_write .board_item_group dl.two_frame.width_edit > dd{width:calc(100% - 200px); border-bottom: 1px solid #ddd;}
.normal_write .board_item_group dl.two_frame.width_edit > dd:last-of-type{border-bottom:none;}
}
@media (max-width: 910px){
.normal_write .board_item_group dl > dt{width:140px;}
.normal_write .board_item_group dl > dd{width:calc(100% - 140px);}
.normal_write .board_item_group dl.two_frame{display: flex; flex-wrap: wrap;}
.normal_write .board_item_group dl.two_frame > dt{width:140px; display: flex; align-items: center;}
.normal_write .board_item_group dl.two_frame > dd{width:calc(50% - 140px);}
.normal_write .board_item_group dl.two_frame > dt:last-of-type{border-bottom:none;}
.normal_write .board_item_group dl.two_frame > dd:last-of-type{border-bottom:none;}
.normal_write select{width:100%; height:48px; border-radius: 3px; background-position: top 19px right 15px;}
.normal_write .radio_input_wrap{height:48px; align-items: center;}
}
@media (min-width: 601px) and (max-width: 910px){
.normal_write .board_item_group dl.two_frame.width_edit > dd{width:calc(100% - 140px);}
}
@media (max-width: 600px){
.normal_write .board_item_group dl{padding:0; display:block; border-bottom:none;}
.normal_write .board_item_group dl > dt{width: 100%; height: 50px; padding: 0 13px; background-color: #f8f8f8; display: flex; align-items: center; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; font-size: 1.6rem; color: black;}
.normal_write .board_item_group dl:first-child > dt{border-top:none;}
.normal_write .board_item_group dl > dd{width: 100%; padding:12px 7px 12px 7px; display:block; font-size: 1.8rem;}
.normal_write .board_item_group dl.two_frame{display:block;}
.normal_write .board_item_group dl.two_frame > dt{width: 100%;}
.normal_write .board_item_group dl.two_frame > dt:first-of-type{padding-top:0;}
.normal_write .board_item_group dl.two_frame > dd{width: 100%; border-bottom:none; padding:15px 7px 15px 7px;}
.normal_write .board_item_group dl.two_frame > dt:last-of-type{border-bottom:1px solid #ddd; border-left:none;}
.normal_write .board_item_group dl.editor_here > dt{display:flex;}
.normal_write .board_item_group .input_box_wrap input{width: 100%; height:50px; padding:3px 10px; font-size:1.8rem;}
.normal_write .board_item_group .file_upload_foam .choice_file_box{padding-bottom:15px; margin-bottom:15px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box:first-of-type{margin-top:5px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box:last-of-type{margin-bottom:5px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box .thumbnail_img_choice label{font-size:1.7rem;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_explain_box{margin-top:5px;}
.normal_write .board_item_group .file_upload_foam .file_upload_box .input_box_wrap input{font-size:1.7rem;}
.normal_write .board_editor_wrap{padding: 20px 7px 20px 7px;}
.normal_write .board_editor_wrap textarea{height:300px;}
}
@media (max-width: 500px){
.normal_write .board_item_group dl > dt{font-size: 1.7rem; height:45px; padding: 0 15px;}
.normal_write .board_item_group dl > dd{padding:15px 10px;}
.normal_write .board_item_group dl.two_frame > dd{padding:15px 10px;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box{flex-wrap: wrap;}
.normal_write .board_item_group .file_upload_foam .choice_file_box .file_info_box .thumbnail_img_choice{margin-bottom: 15px;}
.normal_write .board_editor_wrap{padding: 17px 10px;}
.normal_write .radio_input_wrap{height:35px;}
.normal_write select{width:100%;}
}
/* 미디어쿼리 끝 */
/* 게시판 쓰기 끝 */
/* 정원식물도감 게시판 목록 시작 */
.gpd{
--gpd-green-900: #0f3a26;
--gpd-green-800: #14543a;
--gpd-green-700: #1c6b4a;
--gpd-green-600: #2a8460;
--gpd-green-500: #3aa177;
--gpd-green-50: #f1f7f3;
--gpd-ink-900: #0f1612;
--gpd-ink-700: #2a3530;
--gpd-ink-500: #5a6b62;
--gpd-ink-400: #87968d;
--gpd-ink-300: #b2bdb6;
--gpd-ink-200: #d8ded9;
--gpd-ink-100: #eaeee9;
--gpd-ink-50: #f4f6f3;
--gpd-cream: #faf9f4;
--gpd-radius: 18px;
}
.gpd{color:var(--gpd-ink-900);}
/* ============================================================
검색 + 필터 (Toolbar)
============================================================ */
.gpd-toolbar{background:var(--gpd-cream); border:1px solid var(--gpd-ink-100); border-radius:var(--gpd-radius); padding:24px; margin-bottom:28px;}
.gpd-search{display:grid; grid-template-columns:200px 1fr auto; gap:10px; align-items:center;}
.gpd-search__select{position:relative;}
.gpd-search__select::after{
content:'';
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
width:0;
height:0;
border:5px solid transparent;
border-top-color:var(--gpd-ink-500); border-bottom: 0;
pointer-events:none;
}
.gpd-search__select select{width:100%; height:55px; background:#fff; border:1px solid var(--gpd-ink-200); border-radius:12px; padding:0 38px 0 18px; font-weight:500; color:var(--gpd-ink-900); appearance:none; cursor:pointer;}
.gpd-search__select select:focus{outline:none; border-color:var(--gpd-green-600); box-shadow:0 0 0 4px rgba(42,132,96,0.12);}
.gpd-search__input{position: relative;}
.gpd-search__input input{width:100%; height:55px; background:#fff; border:1px solid var(--gpd-ink-200); border-radius:12px; padding:0 18px 0 50px; color:var(--gpd-ink-900); overflow:hidden; text-overflow:ellipsis;}
.gpd-search__input input::placeholder{color:var(--gpd-ink-400);}
.gpd-search__input input:focus{outline:none; border-color:var(--gpd-green-600); box-shadow:0 0 0 4px rgba(42,132,96,0.12); z-index:1;}
.ico-search{position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; background:var(--gpd-ink-500); z-index:2;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.gpd-search__btn{height:54px; padding:0 28px; background:var(--gpd-green-800); color:#fff; border-radius:12px; font-size:1.7rem; font-weight:600; transition:background .2s ease, transform .2s ease; display:inline-flex; align-items:center; gap:8px;}
.gpd-search__btn::before{
content:'';
width:18px;
height:18px;
background:currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.gpd-search__btn:hover{background:var(--gpd-green-900);}
.gpd-search__btn:active{transform:scale(0.98);}
.gpd-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:18px; border-top:1px dashed var(--gpd-ink-200);}
.gpd-chip{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; background:#fff; border:1px solid var(--gpd-ink-200); border-radius:999px; font-size:1.5rem; font-weight:500; color:var(--gpd-ink-700); transition:all .2s ease;}
.gpd-chip em{font-family:'Paperlogy'; font-size:1.25rem; font-weight:600; color:var(--gpd-ink-400); padding-left:9px; border-left:1px solid var(--gpd-ink-200); margin-left:4px;}
.gpd-chip__dot{width:8px; height:8px; border-radius:50%; background:var(--c, var(--gpd-green-600)); box-shadow:0 0 0 3px color-mix(in oklab, var(--c, #2a8460) 18%, transparent);}
.gpd-chip:hover{border-color:var(--gpd-green-600); color:var(--gpd-ink-900);}
.gpd-chip.is-active{background:var(--gpd-green-800); border-color:var(--gpd-green-800); color:#fff;}
.gpd-chip.is-active em{color:rgba(255,255,255,0.7); border-color:rgba(255,255,255,0.2);}
/* ============================================================
결과 헤더 (정렬 + 뷰토글)
============================================================ */
.gpd-result-bar{display:flex; justify-content:space-between; align-items:end; padding:0 4px 18px; margin-bottom:8px; flex-wrap:wrap; gap:14px;}
.gpd-result-bar__left{display:inline-flex; align-items:center; gap:12px; font-size:1.6rem; color:var(--gpd-ink-700);}
.gpd-result-bar__left strong{font-size:1.7rem; font-weight:700; color:var(--gpd-green-800);}
.gpd-divider{width:1px; height:14px; background:var(--gpd-ink-200);}
.gpd-result-meta{color:var(--gpd-ink-500); font-weight:400;}
.gpd-result-bar__right{display:inline-flex; gap:10px; align-items:center;}
.gpd-sort{position:relative;}
.gpd-sort::after{
content:'';
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
width:0;
height:0;
border:5px solid transparent;
border-top-color:var(--gpd-ink-500);
border-bottom: 0;
pointer-events:none;
}
.gpd-sort select{height:44px; padding:0 38px 0 16px; background:#fff; border:1px solid var(--gpd-ink-200); border-radius:10px; font-size:1.4rem; font-weight:500; color:var(--gpd-ink-700); appearance:none; cursor:pointer;}
.gpd-sort select:focus{outline:none; border-color:var(--gpd-green-600);}
.gpd-view{display:inline-flex; background:#fff; border:1px solid var(--gpd-ink-200); border-radius:10px; padding:4px;}
.gpd-view__btn{width:36px; height:36px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; color:var(--gpd-ink-500); transition:all .2s ease;}
.gpd-view__btn svg{fill:currentColor;}
.gpd-view__btn.is-active{background:var(--gpd-green-900); color:#fff;}
/* ============================================================
카드 그리드
============================================================ */
.gpd-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:40px 24px; margin:0 0 60px;}
.gpd-card{list-style:none; min-width:0;}
.gpd-card__link{display:block; position:relative; overflow:hidden; transition:transform .3s ease; min-width:0;}
.gpd-card__media{position:relative; aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--gpd-radius); background:var(--gpd-ink-50); margin:0;}
.gpd-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1);}
.gpd-card__media::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(15,22,18,0.35) 0%, transparent 45%);
pointer-events:none;
}
.gpd-card__media[data-tone="grass"] { background: linear-gradient(135deg, #f7e6d8 0%, #e8c9a8 100%); }
.gpd-card__media[data-tone="purple"] { background: linear-gradient(135deg, #f0e6f5 0%, #c9b2db 100%); }
.gpd-card__media[data-tone="red"] { background: linear-gradient(135deg, #f8e4dc 0%, #d99580 100%); }
.gpd-card__media[data-tone="blue"] { background: linear-gradient(135deg, #e3edf5 0%, #a8c2dc 100%); }
.gpd-card__media[data-tone="yellow"] { background: linear-gradient(135deg, #faf2d8 0%, #e9cb6a 100%); }
.gpd-card__media[data-tone="white"] { background: linear-gradient(135deg, #f6f6f3 0%, #d6dcd2 100%); }
.gpd-card__badge{position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; padding:6px 12px; background:rgba(255,255,255,0.95); backdrop-filter:blur(6px); border-radius:999px; font-size:1.4rem; font-weight:600; color:var(--gpd-green-800); letter-spacing:-0.01em; white-space:nowrap; z-index:2;}
.gpd-card__no{position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; padding:6px 10px; background:rgba(15,22,18,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.18); border-radius:6px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:1.2rem; font-weight:500; color:#fff; letter-spacing:0.02em; white-space:nowrap; z-index:2;}
.gpd-card__body{padding: 18px 4px 0; min-width:0;}
.gpd-card__head{margin-bottom:12px; min-width:0;}
.gpd-card__name{margin:0; font-size:2.1rem; font-weight:700; letter-spacing:-0.02em; color:var(--gpd-ink-900); display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden;}
.gpd-card__name > span:not(.gpd-card__arrow){overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; min-width:0;}
.gpd-card__arrow {
width:18px;
height:18px;
flex-shrink:0;
margin-left:auto;
background:var(--gpd-ink-300);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:transform .3s ease, background .3s ease;
}
.gpd-card__sci{display: none;}
.gpd-card__meta{display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--gpd-ink-100);}
.gpd-card__meta li{display:flex; align-items:flex-start; gap:8px; font-size:1.5rem; color:var(--gpd-ink-500); font-weight:400; padding-top:2px; min-width:0; overflow:hidden;}
.gpd-card__meta li em{color: var(--gpd-green-900); padding-right:5px;}
.gpd-card__meta li span{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0;}
.gpd-card__meta i{width:17px; height:17px; background:var(--gpd-green-600); flex-shrink:0; margin-top:-2px;}
.ico-pin{
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.ico-sun{
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.ico-cal{
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* hover */
.gpd-card__link:hover .gpd-card__media img{transform:scale(1.06);}
.gpd-card__link:hover .gpd-card__name { color: var(--gpd-green-800); }
.gpd-card__link:hover .gpd-card__arrow {
background: var(--gpd-green-700);
transform: translateX(3px);
}
/* ============================================================
리스트뷰 (toggled via JS adding .is-list to .gpd-grid)
============================================================ */
.gpd-grid.is-list{grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:30px;}
.gpd-grid.is-list .gpd-card__link{display:grid; grid-template-columns:180px 1fr; gap:24px; padding:14px; background:#fff; border:1px solid var(--gpd-ink-100); border-radius:var(--gpd-radius); align-items:center; height:100%; box-sizing:border-box;}
.gpd-grid.is-list .gpd-card__media{aspect-ratio:4 / 3; height:130px; width:180px; border-radius:12px;}
.gpd-grid.is-list .gpd-card__no{display:none;}
.gpd-grid.is-list .gpd-card__body{padding:0;}
.gpd-grid.is-list .gpd-card__meta{flex-direction:column; gap:8px; border-top:1px solid var(--gpd-ink-100); padding-top:10px;}
.gpd-grid.is-list .gpd-card__meta li{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:flex;}
.gpd-grid.is-list .gpd-card__link:hover{border-color:var(--gpd-green-600); box-shadow:0 8px 24px -16px rgba(20, 84, 58, 0.3);}
.gpd-grid.is-list .gpd-card__badge{position:static; display:inline-flex; align-self:flex-start; margin-bottom:8px; background:var(--gpd-green-50); color:var(--gpd-green-800); border:1px solid var(--gpd-green-200); backdrop-filter:none; font-size:1.3rem; padding:5px 10px; border-radius:3px;}
.gpd-grid.is-list .gpd-card__head{display:flex; flex-direction:column; align-items:flex-start; margin-bottom:12px; }
.gpd-grid.is-list .gpd-card__name{width:100%; display:flex; align-items:center; }
.gpd-grid.is-list .gpd-card__name::after{margin-left:8px; flex-shrink:0;}
.gpd-grid.is-list .gpd-card__arrow{display:none;}
/* ============================================================
Empty state
============================================================ */
.gpd-empty{text-align:center; padding:100px 20px; background:var(--gpd-cream); border-radius:var(--gpd-radius); margin-bottom:40px;}
.gpd-empty__icon{font-size:4.6rem; margin-bottom:16px; opacity:0.6; }
.gpd-empty__title{margin:0 0 8px; font-size:1.9rem; font-weight:700; color:var(--gpd-ink-900);}
.gpd-empty__desc{margin:0; font-size:1.5rem; color:var(--gpd-ink-500);}
/* ============================================================
Pagination
============================================================ */
.gpd-pager{display:flex; justify-content:center; align-items:center; gap: 6px; padding:20px 0;}
.gpd-pager__btn,
.gpd-pager__list button{min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--gpd-ink-200); border-radius:10px;
font-size:1.45rem; font-weight:500; color:var(--gpd-ink-700); transition:all .2s ease;}
.gpd-pager__btn:hover,
.gpd-pager__list button:hover{border-color: var(--gpd-green-600); color: var(--gpd-green-800); background: var(--gpd-green-50);}
.gpd-pager__btn[disabled]{opacity:0.4; cursor:not-allowed; pointer-events:none;}
.gpd-pager__list{display:inline-flex; gap:6px; margin:0 6px; list-style:none; padding:0;}
.gpd-pager__list .is-active{background:var(--gpd-green-900); border-color:var(--gpd-green-900); color:#fff;}
.gpd-pager__list .is-active:hover{background:var(--gpd-green-900); color:#fff;}
.gpd-pager__list .dots{display:inline-flex; align-items:center; padding:0 6px; color:var(--gpd-ink-400); font-size:1.4rem;}
/* ============================================================
미디어쿼리
============================================================ */
@media (max-width: 1280px){
.gpd-grid{grid-template-columns:repeat(3, 1fr);}
.gpd-grid.is-list .gpd-card__link{grid-template-columns:150px 1fr; gap:18px; align-items: flex-start;}
.gpd-grid.is-list .gpd-card__media{width:150px; height:110px;}
.gpd-grid.is-list .gpd-card__meta{padding-bottom:2px;}
}
@media (max-width: 1024px){
.gpd-search{grid-template-columns:170px 1fr auto;}
.gpd-search__btn span{display:none;}
.gpd-search__btn{padding:0 18px;}
.gpd-card__name{font-size:2rem;}
.gpd-card__badge{font-size:1.3rem;}
.gpd-card__meta li{font-size:1.45rem;}
.gpd-grid.is-list{grid-template-columns:1fr;}
.gpd-grid.is-list .gpd-card__link{grid-template-columns:160px 1fr; gap:20px;}
.gpd-grid.is-list .gpd-card__media{width:160px; height:120px;}
}
@media (max-width: 768px){
.gpd-toolbar{padding:18px;}
.gpd-result-bar{margin-bottom:2px;}
.gpd-search{grid-template-columns:1fr;}
.gpd-search__select select, .gpd-search__input input, .gpd-search__btn{height:48px; font-size:1.6rem;}
.gpd-search__btn{justify-content: center;}
.gpd-search__btn::before{display:none;}
.gpd-search__btn span{display:inline-flex; align-items:center; position:relative; gap:0 8px;}
.gpd-search__btn span:before{
content:'';
width:18px;
height:18px;
background:currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.gpd-chips{gap:6px; padding-top:14px; margin-top:14px;}
.gpd-chip{padding:9px 14px; font-size:1.35rem;}
.gpd-grid{grid-template-columns:repeat(2, 1fr); gap:40px 14px;}
.gpd-card__name{font-size:1.95rem;}
.gpd-card__sci{font-size:1.25rem;}
.gpd-result-bar__left strong{font-size:1.5rem;}
.gpd-result-meta{display:none;}
.gpd-pager__list li:not(:nth-child(-n+3)):not(:last-child){display:none;}
.gpd-pager__list .dots{display:inline-flex !important;}
.gpd-grid.is-list .gpd-card__media{width: 120px; height:100px; aspect-ratio:unset;}
.gpd-grid.is-list .gpd-card__meta{flex-direction:column; gap:5px; padding-top:8px;}
.gpd-grid.is-list .gpd-card__meta li{font-size: 1.35rem; gap:8px 6px;}
.gpd-grid.is-list .gpd-card__link{grid-template-columns:120px 1fr; padding:12px; gap:14px;}
.gpd-grid.is-list .gpd-card__head{margin-bottom:8px;}
.gpd-grid.is-list .gpd-card__body{padding:0; min-width:0;}
.gpd-grid.is-list .gpd-card__badge{font-size:1.2rem; padding:4px 8px; margin-bottom:8px;}
.gpd-grid.is-list .gpd-card__name{font-size:1.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
}
@media (max-width: 480px) {
.gpd-grid{grid-template-columns:1fr;}
.gpd-card__media{aspect-ratio:16 / 11;}
.gpd-result-bar__right .gpd-sort select{font-size:1.3rem; padding:0 32px 0 12px;}
.gpd-pager__btn, .gpd-pager__list button{min-width:38px; height:38px; font-size:1.3rem;}
.gpd-pager__list li:not(:nth-child(-n+2)):not(:last-child){display:none;}
.gpd-card__name{font-size:2.1rem;}
.gpd-card__meta li{font-size:1.5rem;}
.gpd-grid.is-list{grid-template-columns:1fr;}
.gpd-grid.is-list .gpd-card__media{aspect-ratio:unset; width:100px; height:90px;}
.gpd-grid.is-list .gpd-card__link{grid-template-columns:100px 1fr; gap:12px; padding:10px;}
.gpd-grid.is-list .gpd-card__name{font-size:1.6rem;}
}
@media (max-width: 380px) {
.gpd-pager__list li:not(:nth-child(-n+2)){display:none;}
.gpd-pager__list .dots{display:none !important;}
}
@media (max-width: 350px) {
.gpd-card__badge{font-size:1.2rem;}
.gpd-card__name{font-size:1.7rem;}
.gpd-card__name{font-size:2rem;}
.gpd-chips{display:none;}
}
/* 정원식물도감 게시판 목록 끝 */
/* 정원식물도감 게시판 보기 시작 */
.gpd-detail{
--d-green-900: #0f3a26;
--d-green-800: #14543a;
--d-green-700: #1c6b4a;
--d-green-600: #2a8460;
--d-green-50: #f1f7f3;
--d-ink-900: #0f1612;
--d-ink-700: #2a3530;
--d-ink-500: #5a6b62;
--d-ink-400: #87968d;
--d-ink-300: #b2bdb6;
--d-ink-200: #d8ded9;
--d-ink-100: #eaeee9;
--d-ink-50: #f4f6f3;
--d-cream: #faf9f4;
--d-radius: 18px;
color: var(--d-ink-900);
padding-top: 12px;
}
/* ============================================================
갤러리
============================================================ */
.gpd-detail__gallery{display:grid; grid-template-columns:1fr 110px; gap:20px; margin-bottom:56px;}
.gpd-detail__main {position:relative; border-radius:var(--d-radius); overflow:hidden; background:var(--d-ink-50);}
.gpd-detail__mainfig{margin:0; aspect-ratio:21 / 9; min-height:100%; max-width:100%;}
.gpd-detail__mainfig img{width:100%; height:100%; object-fit:cover; transition:opacity .35s ease;}
.gpd-detail__no{position:absolute; top:22px; right:22px; display:inline-flex; align-items:center; padding:8px 14px; background:rgba(15,22,18,0.55);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.18); border-radius:8px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size:1.4rem; font-weight: 500; color:#fff; letter-spacing: 0.02em; z-index:2;}
.gpd-detail__catBadge{
position:absolute;
top:22px;
left:22px;
display:inline-flex;
align-items:center;
padding:8px 16px;
background:rgba(255,255,255,0.95);
-webkit-backdrop-filter:blur(8px);
backdrop-filter: blur(8px);
border-radius:999px;
font-size:1.4rem;
font-weight:700;
color:var(--d-green-800);
letter-spacing:-0.01em;
z-index:2;
}
.gpd-detail__thumbs{display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0;}
.gpd-detail__thumbs button{display:block; width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--d-ink-50); border:2px solid transparent; transition:all .25s ease; padding:0; cursor:pointer;}
.gpd-detail__thumbs button img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.gpd-detail__thumbs button:hover img{transform:scale(1.06);}
.gpd-detail__thumbs button.is-active{border-color:var(--d-green-700); box-shadow:0 0 0 4px rgba(28,107,74,0.12);}
/* ============================================================
타이틀 + 핵심 메타
============================================================ */
.gpd-detail__head{display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:end; padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--d-ink-100);}
.gpd-detail__title-wrap{min-width:0;}
.gpd-detail__eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:'Paperlogy'; font-size:1.4rem; font-weight:500; letter-spacing:0.04em; color:var(--d-green-700); text-transform:uppercase;}
.gpd-detail__title{margin:12px 0 14px; font-size:4.6rem; font-weight:700; letter-spacing:-0.03em; line-height:1.15; color:var(--d-ink-900);}
.gpd-detail__lead{margin:0; max-width:60ch; font-size:1.8rem; line-height:1.7; color:var(--d-ink-500); text-wrap:pretty; font-weight:400;}
.gpd-detail__quick{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; background:var(--d-cream); border:1px solid var(--d-ink-100); border-radius:14px; padding:22px 24px;}
.gpd-detail__quick > div{display:flex; flex-direction:column; gap:12px 8px;}
.gpd-detail__quick dt{display:inline-flex; align-items:center; gap:5px; font-size:1.6rem; font-weight:500; color:var(--d-ink-500); letter-spacing:-0.01em;}
.gpd-detail__quick dt i{width:19px; height:19px; background:var(--d-green-600); flex-shrink:0; margin-top:-3px;}
.gpd-detail__quick dd{margin:0; font-size:1.8rem; font-weight:700; color:var(--d-ink-900); letter-spacing:-0.02em;}
/* ============================================================
Section heading (공통)
============================================================ */
.gpd-detail__h5{display:flex; align-items:center; justify-content:space-between; margin:0 0 22px; font-size:2.1rem; font-weight:700; letter-spacing:-0.025em; color:var(--d-ink-900);}
.gpd-detail__h5 span{display:inline-flex; align-items:center; gap:12px;}
.gpd-detail__h5 span::before{
content:'';
display:inline-block;
width:6px;
height:22px;
border-radius:3px;
background:var(--d-green-700);
}
/* ============================================================
식물 정보 그리드 (specs)
============================================================ */
.gpd-detail__specs{margin-bottom:56px;}
.gpd-detail__specgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.gpd-spec{background:#fff; border:1px solid var(--d-ink-100); border-radius:16px; padding:22px 22px 20px; min-height:142px; display:flex; flex-direction:column; position:relative; transition:border-color .2s ease;}
.gpd-spec:hover{border-color:var(--d-ink-200);}
.gpd-spec--wide{grid-column:span 2;}
.gpd-spec__label{font-weight:500; color:var(--d-ink-500); letter-spacing:-0.01em; margin-bottom:14px;}
.gpd-spec__value{margin:0; display:flex; flex-direction:column; gap:8px; flex-grow:1; justify-content:center;}
.gpd-spec__value small{font-size:1.6rem; color:var(--d-ink-500); font-weight:400; margin-top:5px;}
.gpd-spec__bigtext{font-size:2.2rem; font-weight:700; color:var(--d-ink-900); letter-spacing:-0.02em;}
.gpd-spec__pill{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:8px 14px; border-radius:999px; font-size:1.45rem; font-weight:600; letter-spacing:-0.01em;}
.gpd-spec__pill--sun{background:#fff4d6; color:#8a5a14;}
.gpd-spec__pill--shade{background:#e3eae6; color:#2a4a3a;}
.gpd-spec__pill .sunico{width:14px; height:14px; border-radius:50%; background:#f5b021; box-shadow:0 0 0 3px rgba(245,176,33,0.25);}
/* 개화기 바 */
.gpd-bloom{margin-top:4px;}
.gpd-bloom__track{position:relative; height:8px; background:var(--d-ink-100); border-radius:4px; margin-bottom:8px;}
.gpd-bloom__range{position:absolute; top:0; bottom:0; left:calc((var(--start) - 1) / 12 * 100%); right:calc((12 - var(--end)) / 12 * 100%); background:linear-gradient(90deg, #c95a3a, #d97f5b); border-radius:4px;}
.gpd-bloom__months{display:grid; grid-template-columns:repeat(12, 1fr); list-style:none; margin:0; padding:0; font-family:'JetBrains Mono', monospace; font-size:1.4rem; font-weight:500; color:var(--d-ink-400); text-align:center;}
.gpd-bloom__months .is-on{color:var(--d-ink-900); font-weight:700;}
/* 꽃색 */
.gpd-colors{display:inline-flex; gap:8px; align-self:flex-start;}
.gpd-color{width:28px; height:28px; border-radius:50%; background:var(--c, #ccc); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.08);}
/* 수분 도트 */
.gpd-dots{display:inline-flex; gap:6px; align-self:flex-start;}
.gpd-dots span{width:14px; height:14px; border-radius:50%; background:var(--d-ink-100); border:1.5px solid var(--d-ink-200);}
.gpd-dots span.on{background:#4d8cd6; border-color:#2f6db8; box-shadow:inset 0 -2px 4px rgba(0,0,0,0.12);}
/* 벌 친화력 */
.gpd-rating{display:inline-flex; gap:4px; align-self:flex-start; font-size:2rem; line-height:1; color:var(--d-ink-200);}
.gpd-rating .on{color:#d8a13c;}
/* ============================================================
Article (특징 / 기타)
============================================================ */
.gpd-detail__article{background:#fff; border:1px solid var(--d-ink-100); border-radius:var(--d-radius); padding:36px 40px; margin-bottom:16px;}
.gpd-detail__prose p{margin:0 0 14px; font-size:1.8rem; line-height:1.85; color:var(--d-ink-700); text-wrap:pretty; font-weight:400;}
.gpd-detail__prose p:last-child{margin-bottom:0;}
.gpd-detail__prose i{font-style:italic; color:var(--d-green-800);}
.gpd-detail__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px;}
.gpd-detail__tags li{display:inline-flex; align-items:center; padding:6px 12px; background:var(--d-green-50); color:var(--d-green-800); border-radius:6px; font-size:1.6rem; font-weight:500;}
.gpd-detail__tags li::before{
content:'#';
margin-right:4px;
opacity:0.6;
}
/* ============================================================
첨부파일
============================================================ */
.gpd-detail__files{background:var(--d-cream); border:1px solid var(--d-ink-100); border-radius:var(--d-radius); padding:32px 36px; margin:30px 0 56px;}
.gpd-detail__filelist{display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0;}
.gpd-file{display:grid; grid-template-columns:56px 1fr auto; gap:18px; align-items:center; padding:16px 18px; background:#fff; border:1px solid var(--d-ink-100); border-radius:14px; transition:all .2s ease;}
.gpd-file:hover{border-color:var(--d-green-600); box-shadow:0 6px 18px -14px rgba(20,84,58,0.4);}
.gpd-file__icon{width:56px; height:56px; border-radius:12px; background:var(--d-green-900); color:#fff; display:inline-flex; align-items:center; justify-content:center;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:1.4rem; font-weight:700; letter-spacing:0.04em; position:relative; flex-shrink:0;}
.gpd-file__icon::before{
content: attr(data-ext);
}
.gpd-file__icon::after{
content:'';
position:absolute;
top:6px;
right:6px;
width:10px;
height:10px;
background:linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.18) 50%);
border-radius:2px;
}
.gpd-file__info{display:flex; flex-direction:column; gap:4px; min-width:0;}
.gpd-file__name{font-size:1.8rem; font-weight:400; color:var(--d-ink-900); letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gpd-file__name:hover{color:var(--d-green-800); text-decoration:underline;}
.gpd-file__meta{font-size:1.4rem; color:var(--d-ink-500); margin-top:4px; letter-spacing:-0.01em; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight:400;}
.gpd-file__btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; background:var(--d-green-800); color:#fff; border-radius:10px;
font-size:1.7rem; font-weight:500; transition:background .2s ease, transform .2s ease;}
.gpd-file__btn:hover{background:var(--d-green-900);}
.gpd-file__btn:active{transform:scale(0.97);}
.gpd-file__btn span{font-family:'Paperlogy';}
/* ============================================================
이전/다음 + 목록 버튼
============================================================ */
.gpd-detail__nav{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; padding-top:16px; border-top:1px solid var(--d-ink-100);}
.gpd-detail__navlink{display:inline-flex; align-items:center; gap:16px; padding:18px 24px; background:#fff; border:1px solid var(--d-ink-100); border-radius:14px; transition:all .2s ease; min-width:0;}
.gpd-detail__navlink--prev{justify-content:flex-start; text-align:left;}
.gpd-detail__navlink--next{justify-content:flex-end; text-align:right;}
.gpd-detail__navlink:hover{border-color:var(--d-green-600); background:var(--d-green-50);}
.gpd-detail__navlink:hover .gpd-detail__navarrow{background:var(--d-green-800); color:#fff; border-color:var(--d-green-800);}
.gpd-detail__navarrow{width:44px; height:44px; border-radius:50%; background:var(--d-ink-50); border:1px solid var(--d-ink-100); color:var(--d-ink-700); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .25s ease;}
.gpd-detail__navmeta{display:flex; flex-direction:column; gap:8px 2px; min-width:0;}
.gpd-detail__navmeta em{font-style:normal; font-size:1.5rem; font-weight:500; color:var(--d-ink-500); letter-spacing:-0.01em; font-family:'Paperlogy';}
.gpd-detail__navmeta strong{font-size:1.65rem; font-weight:700; color:var(--d-ink-900); letter-spacing:-0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gpd-detail__listbtn{display:inline-flex; align-items:center; gap:10px; padding:0 36px; height:auto; background:var(--d-green-900); color:#fff; border-radius:14px;
font-size:1.8rem; font-weight:700; letter-spacing:-0.02em; transition:background .2s ease;}
.gpd-detail__listbtn:hover{background: var(--d-green-800);}
/* ============================================================
미디어쿼리
============================================================ */
@media (max-width: 1280px) {
.gpd-detail__title{font-size:4rem;}
.gpd-detail__head{gap:40px;}
.gpd-detail__specgrid{grid-template-columns:repeat(2, 1fr);}
.gpd-spec--wide{grid-column: span 2;}
}
@media (max-width: 1024px){
.gpd-detail__gallery{grid-template-columns:1fr;}
.gpd-detail__thumbs{flex-direction:row; overflow-x:auto; scrollbar-width:none;}
.gpd-detail__thumbs::-webkit-scrollbar{display:none;}
.gpd-detail__thumbs li{flex:0 0 90px;}
.gpd-detail__head{grid-template-columns:1fr; gap:24px;}
.gpd-detail__title{font-size:3.4rem;}
.gpd-detail__article{padding:28px 28px;}
.gpd-detail__files{padding:24px 26px;}
.gpd-detail__lead{font-size: 1.65rem; }
.gpd-detail__quick dt{font-size:1.4rem;}
.gpd-detail__quick dd{font-size:1.6rem;}
}
@media (max-width: 768px) {
.gpd-detail__mainfig{aspect-ratio:4 / 3;}
.gpd-detail__no, .gpd-detail__catBadge{top:14px;}
.gpd-detail__no{right:14px; padding:6px 11px; font-size:1.35rem;}
.gpd-detail__catBadge{left:14px; padding:6px 13px; font-size:1.45rem;}
.gpd-detail__title{font-size:3rem;}
.gpd-detail__lead{font-size:1.7rem; line-height:1.8;}
.gpd-detail__quick{padding:20px;}
.gpd-detail__quick dt{font-size:1.5rem;}
.gpd-detail__quick dd{font-size:1.75rem;}
.gpd-detail__specgrid{grid-template-columns:1fr 1fr; gap:10px;}
.gpd-spec--wide{grid-column:span 2;}
.gpd-spec{padding:18px; min-height:0;}
.gpd-spec__label{font-size:1.45rem;}
.gpd-spec__bigtext{font-size:2rem;}
.gpd-detail__h5{font-size:2rem; margin-bottom:16px;}
.gpd-detail__article{padding:22px 20px;}
.gpd-detail__prose p{font-size:1.7rem; line-height:1.9;}
.gpd-detail__tags li{font-size:1.5rem;}
.gpd-detail__files{padding:18px;}
.gpd-file{grid-template-columns:48px 1fr; padding:14px; gap:12px;}
.gpd-file__icon{width:48px; height:48px; font-size:1.2rem;}
.gpd-file__name{font-size:1.7rem;}
.gpd-file__meta{font-size:1.35rem;}
.gpd-file__btn{grid-column:span 2; justify-content:center; font-size:1.6rem; padding:12px 20px; background:var(--d-green-700); gap:5px;}
.gpd-detail__nav{grid-template-columns:1fr 1fr; grid-template-areas:"prev next" "list list"; gap:8px;}
.gpd-detail__navlink--prev{grid-area:prev; padding:16px; gap:10px;}
.gpd-detail__navlink--next{grid-area:next; padding:16px; gap:10px;}
.gpd-detail__listbtn{grid-area:list; padding:16px; justify-content:center; font-size:1.7rem;}
.gpd-detail__navarrow{width:38px; height:38px;}
.gpd-detail__navmeta strong{font-size:1.55rem;}
.gpd-detail__navmeta em{font-size:1.3rem;}
}
@media (max-width: 480px){
.gpd-detail__specgrid{grid-template-columns:1fr;}
.gpd-spec--wide{grid-column:span 1;}
.gpd-detail__title{font-size:2.6rem;}
.gpd-detail__lead{font-size:1.65rem; line-height:1.85;}
.gpd-detail__quick dt{font-size:1.45rem;}
.gpd-detail__quick dd{font-size:1.7rem;}
.gpd-detail__prose p{ font-size:1.65rem; line-height:1.95;}
.gpd-detail__tags li{font-size:1.45rem;}
.gpd-detail__h5{font-size:1.9rem;}
.gpd-detail__spec__bigtext{font-size:1.95rem;}
.gpd-detail__file__name{font-size:1.55rem;}
.gpd-detail__navmeta strong{font-size:1.5rem;}
.gpd-detail__navlink--prev{gap:7px;}
.gpd-detail__navlink--prev .gpd-detail__navmeta strong,
.gpd-detail__navlink--next .gpd-detail__navmeta strong{display:none;}
.gpd-detail__navmeta em{font-size:1.5rem;}
.gpd-file__meta .file_name_txt{display:none;}
.gpd-file__btn{padding:10px 20px;}
}
/* 정원식물도감 게시판 보기 끝 */
/* 캘린더 - 시작 */
.calendar_wrap .calenderHead{position: relative; margin-bottom:35px; height: 48px; display: flex; align-items: end;justify-content: space-between;}
.calendar_wrap .cal_table{width:100%;}
.calendar_wrap .cal_table table{width:100%;}
.calendar_wrap .cal_table table tbody tr{border-left: 1px solid #dddd; border-right: 1px solid #dddd;}
.calendar_wrap .cal_table th{border-bottom: 3px solid black; width: calc(100% / 7); background: white; font-size:1.9rem; font-family: 'Nanum Myeongjo'; font-weight: 800; line-height:1; padding:12px 10px; text-align:left; font-weight:700; color:black; letter-spacing: -0.075rem;}
.calendar_wrap .cal_table th.sun{border-color: #afa182; color: #7a6842;}
.calendar_wrap .cal_table td {position:relative;box-sizing:border-box; vertical-align:top; height:250px; border-bottom:1px solid #ddd; border-left:1px solid #dddd; font-size:1.5rem; line-height:1;}
.calendar_wrap .cal_table tr td:first-child{border-left:0;}
.calendar_wrap .cal_table td > .cal_date{position:absolute; top:0; left:0px; width:100%; line-height:1; text-align:left; font-size:1.8rem; color:#555; padding: 12px 15px 10px 15px; background: #fbfbfb;}
.calendar_wrap .cal_table td > .cal_date.sat .num_date{color: #0077e9; font-weight: 600;}
.calendar_wrap .cal_table td > .cal_date.sun .num_date {color: #e90000; font-weight: 600;}
.calendar_wrap .cal_table td > .cal_date .num_date{display:inline-block; font-size:1.7rem; font-weight:400; color:black; letter-spacing: -0.05rem;}
/*251111 - 오늘날짜 표시 추가 */
.calendar_wrap .cal_table td.today_circle > .cal_date .num_date{position:relative;}
.calendar_wrap .cal_table td.today_circle > .cal_date .num_date:before{
content: '';
display: block;
position: absolute;
top: calc(50% - 0.5px);
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border-radius:100%;
box-sizing: border-box;
background-color: #ffe0f7;
z-index:0;
mix-blend-mode:multiply;
}
.calendar_wrap .cal_table td.today_line{
/*border: 2px #8947ff solid;*/
border: 2px #000 solid;
}
.calendar_wrap .cal_table tr td:first-child > .cal_date .num_date{color:#7a6842;}
.calendar_wrap .cal_table td > .cal_date .kor_week{display:none;}
.calendar_wrap .cal_table td > .cal_date.sat .kor_week{color: #0077e9; font-weight: 600;}
.calendar_wrap .cal_table td > .cal_date.sun .kor_week{color: #e90000; font-weight: 600;}
.calendar_wrap .cal_table td > .cal_date .btnPlus {
/*display:flex;*/
display:none;
width:2em;
height:100%;
justify-content:center;
align-items:center;
position:absolute;
top:0;
right:0;
bottom:0;
cursor:pointer;
background:#ebebeb;
}
.calendar_wrap .cal_table ul.in_sch{padding: 60px 15px 10px 15px;}
.calendar_wrap .cal_table ul.in_sch li > button{position: relative; display: block; width:100%; text-align: left; padding: 0 0 18px 0; font-size: 1.7rem; letter-spacing: -0.075rem; border-bottom: 1px #d9d9d9 dotted; margin-bottom: 18px;}
.calendar_wrap .cal_table ul.in_sch li:last-child > button{margin-bottom:0;}
.calendar_wrap .cal_table ul.in_sch li.hiddenli {display:none;}
.calendar_wrap .cal_table ul.in_sch .s_top{display: flex;padding: 0 0 7px;}
.calendar_wrap .cal_table ul.in_sch .s_top span{position:relative; display: inline-flex; align-items: center; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.1rem;}
.calendar_wrap .cal_table ul.in_sch .s_top span:after{
content: "";
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #cccccc;
}
.calendar_wrap .cal_table ul.in_sch li.fes .s_top span{position:relative; padding-left:20px; color: #cf1957;}
.calendar_wrap .cal_table ul.in_sch li.fes .s_top span:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 15px;
height: 16px;
background: url(../images/board/cal_festival_icon.svg) center no-repeat;
background-size: contain;
}
.calendar_wrap .cal_table ul.in_sch li.pro .s_top span{position:relative; padding-left:20px; color: #0051bf;}
.calendar_wrap .cal_table ul.in_sch li.pro .s_top span:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 16px;
height: 16px;
background: url(../images/board/cal_program_icon.svg) center no-repeat;
background-size: 16px;
}
.calendar_wrap .cal_table ul.in_sch li.edu .s_top span{position:relative; padding-left:20px; color: #c16100;}
.calendar_wrap .cal_table ul.in_sch li.edu .s_top span:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 15px;
height: 16px;
background: url(../images/board/cal_education_icon.svg) center no-repeat;
background-size: contain;
}
.calendar_wrap .cal_table ul.in_sch .tit{font-weight: 500; line-height: 1.3; overflow: hidden; text-wrap: auto; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
.calendar_wrap .cal_table ul.in_sch li > button:hover .tit{text-decoration: underline;}
.calendar_wrap .cal_table ul.in_sch .schedule-type{display:inline-block; padding: 7px 0 0; letter-spacing: -0.075rem; font-size: 1.4rem; color: #6a5832;}
.calendar_wrap .year_btn{font-size:0; line-height:0;}
.calendar_wrap .month_body {display: inline-flex; width:100%; justify-content: center; min-height: 42px; align-items: center; box-sizing: border-box;position: relative; margin-bottom:25px;}
.calendar_wrap .month_body .frame{position:relative; padding: 0 70px;}
.calendar_wrap .month_body .preMonth{position:absolute; cursor:pointer; content:''; width: 42px; height: 42px; top: calc(50% + 4px); left:0; transform: translate(0, -50%); background-color: #ffffff; transition: 0.3s; border: 1px #c5c9d6 solid; border-radius: 3px; box-shadow: 2px 2px 1px rgb(0 0 0 / 5%);}
.calendar_wrap .month_body .preMonth:before{
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 9px;
background: url(../images/board/year_arrow.svg)center no-repeat;
background-size: 36px;
opacity: 0.75;
transform: translate(0,-50%) scaleX(-1);
}
.calendar_wrap .month_body .nextMonth{position:absolute; cursor:pointer; content:''; width: 42px; height: 42px; top: calc(50% + 4px); right:0; transform: translate(0, -50%); background-color:#ffffff; transition: 0.3s; border: 1px #c5c9d6 solid; border-radius: 3px; box-shadow: 2px 2px 1px rgb(0 0 0 / 5%);}
.calendar_wrap .month_body .nextMonth:before{
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 12px;
transform: translate(0,-50%);
background: url(../images/board/year_arrow.svg)center no-repeat;
background-size: 36px;
opacity: 0.75;
}
.calendar_wrap .month_body .mon-head-div {box-sizing: border-box; border: solid #5B6DCD 3px;}
.calendar_wrap .month_body .monthYear {padding:0; line-height:1; display:block;font-size:4.5rem; font-weight:600; color:#333;}
.calendar_wrap .month_body .yearTitle {font-weight:600;color:#333;line-height:1;letter-spacing: -0.075rem; padding-right:0.25rem;}
.calendar_wrap .month_body .monthTitle {font-weight:800;color:#333;line-height:1;letter-spacing: -0.075rem;}
.calendar_wrap .month_body .yearTitle > span{letter-spacing: -0.5rem; font-size: larger; font-weight: 800;}
.calendar_wrap .month_body .yearTitle > span.plus_month{color: #1f8a6a; font-weight: 600;}
.c_s_cate_list{display:flex;}
.c_s_cate_list .c_s_cate{display: flex; align-self: center; margin-left: 40px;}
.c_s_cate_list .c_s_cate .place{display: flex; align-items: center; margin-left: 20px;}
.c_s_cate_list .c_s_cate .place .tit{display:inline-block; padding:1px 16px 0 24px; border-left: 1px solid #c4c6c9; line-height: 1;}
.c_s_cate_list .c_s_cate .place .tit label{font-size: 1.5rem; letter-spacing: -0.05rem; line-height: 1;}
.c_s_cate_list .c_s_cate .place select{width: auto; border: none; padding: 10px 41px 10px 10px; line-height: 1; font-weight: 700;}
.c_s_cate_list .c_s_cate .place .sel_wrap{position:relative;}
.c_s_cate_list .c_s_cate .place .sel_wrap i{position:absolute; right:7px; top:10px; font-size: 1.9rem; font-weight: 700; pointer-events: none;}
.calendar_wrap .month_list{display:flex; align-items: center; justify-content: center; width:100%; padding:4px 5%; border-top:1px #b9b9b9 dotted; border-bottom:1px #b9b9b9 dotted; margin-bottom:30px;}
.calendar_wrap .month_list > a{position:relative; width: calc(100% / 12); font-size:1.8rem; line-height:1; text-align:center; color:#333; letter-spacing: -0.15rem;}
.calendar_wrap .month_list > a:before{
content: "";
width: 1px;
height: 15px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
background-color: #ebebeb;
}
.calendar_wrap .month_list > a:last-child:before{display:none;}
.calendar_wrap .month_list > a.on span{border-radius: 100%; background-color: #1f8a6a; text-shadow: 2px 1px 2px rgb(0 0 0 / 30%); width: 50px; height: 48px; text-align: center; display: inline-flex; align-items: center; justify-content: center; color:white; padding-bottom:1px; padding-right:1px;}
/* 미디어쿼리 시작 */
@media (min-width: 1025px){
.calendar_wrap .cal_table ul.in_sch li:last-child > button{border-bottom:none;}
}
@media (max-width: 1480px){
.calendar_wrap .cal_table ul.in_sch li > button{font-size:1.6rem;}
}
@media (max-width: 1280px){
.calendar_wrap .calenderHead{margin-bottom:30px;}
.calendar_wrap .month_list{padding:4px 3%;}
.calendar_wrap .month_body .monthYear{font-size:4.2rem;}
.calendar_wrap .month_body .frame{padding:0 60px;}
.calendar_wrap .month_body .preMonth{top: calc(50% + 2px);}
.calendar_wrap .month_body .nextMonth{top: calc(50% + 2px);}
.calendar_wrap .cal_table th{font-size:1.6rem;}
.calendar_wrap .cal_table ul.in_sch{padding: 55px 11px 10px 11px;}
.calendar_wrap .cal_table ul.in_sch li > button{font-size:1.5rem;}
.calendar_wrap .cal_table td > .cal_date .num_date{font-size:1.5rem;}
/*251111 - 오늘날짜 표시 추가 */
.calendar_wrap .cal_table td.today_circle > .cal_date .num_date:before{top: calc(50% - 0.5px); left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px;}
.c_s_cate_list .c_s_cate .place .tit{padding-top:0;}
.c_s_cate_list .c_s_cate .place select{font-size:1.6rem;}
}
@media (max-width: 1024px){
.c_s_cate_list .c_s_cate{margin-bottom:-5px;}
.calendar_wrap .month_list{padding:4px 0;}
.calendar_wrap .month_list > a.on span{width:45px; height:45px;}
.calendar_wrap .month_body{min-height:35px; margin-bottom:22px;}
.calendar_wrap .month_body .frame{display:flex; align-items: center; padding: 0px 55px;}
.calendar_wrap .month_body .preMonth{top: 50%;}
.calendar_wrap .month_body .nextMonth{top: 50%;}
.calendar_wrap .month_body .monthYear{display: flex; align-items: center; font-size:3.8rem;}
.calendar_wrap .month_body .yearTitle{letter-spacing: -0.05rem;}
.calendar_wrap .month_body .monthTitle{margin-left:8px; letter-spacing: -0.05rem;}
.calendar_wrap .month_list > a{font-size:1.7rem;}
.calendar_wrap .cal_table{table-layout: auto; border:none; position:relative; padding-top:1px; border-bottom: 1px black solid;}
.calendar_wrap .cal_table:before{
content: "";
position: absolute;
top: 0;
left: 0;
width:100%;
height:2px;
background-color:black;
z-index:5;
}
.calendar_wrap .cal_table table tbody tr{border:none;}
.calendar_wrap .cal_table table tbody tr:last-child td:last-child{border-bottom:none;}
.calendar_wrap .cal_table tr td.empty{display:none;}
.calendar_wrap .cal_table th{display:none; font-size:1.5rem;}
.calendar_wrap .cal_table td{display: flex; height: auto; width: 100%; border:none;}
.calendar_wrap .cal_table td > .cal_date{width: 120px; display: flex; justify-content: flex-start; position:relative; padding: 26px 10px 40px 5px; border-bottom:none; font-size:1.5rem; border-right:1px #ddd solid; color: #000; font-weight:600; background:none;}
.calendar_wrap .cal_table td > .cal_date .num_date{font-size:3.5rem; font-family: 'Nanum Myeongjo'; font-weight: 800;}
.calendar_wrap .cal_table td > .cal_date .kor_week{display:inline-block; padding-top:18px; font-size:1.3rem; font-weight:500; margin-left:7px; color: #757575;}
.calendar_wrap .cal_table td > .cal_date .btnPlus {
width:100%;
height:2em;
left:0;
top:calc(100% - 2em);
right:0;
bottom:0;
}
/*251111 - 오늘날짜 표시 추가 */
.calendar_wrap .cal_table td.today_circle > .cal_date .num_date:before{top: 17px; left: 50%; transform: translate(-50%, -50%); width: 43px; height: 43px;}
.calendar_wrap .cal_table ul.in_sch{width: calc(100% - 120px); padding: 30px 25px 0 35px;}
.calendar_wrap .cal_table ul.in_sch li > button{position:relative; font-size:1.8rem; border-bottom: none;}
.calendar_wrap .cal_table ul.in_sch li > button:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width:calc(100% + 25px);
height:1px;
border-bottom: 1px #d9d9d9 dotted;
z-index:5;
}
.calendar_wrap .cal_table ul.in_sch .schedule-type{font-size:1.5rem;}
.calendar_wrap .cal_table ul.in_sch .s_top{padding: 0 0 5px;}
.calendar_wrap .cal_table ul.in_sch .tit{font-weight: 600;}
}
@media (max-width: 768px){
.calendar_wrap .calenderHead{flex-wrap:wrap; height:auto; justify-content: center; margin-bottom:20px;}
.calendar_wrap .month_body{width:100%; margin-bottom: 20px; justify-content: center;}
.calendar_wrap .month_body .monthYear{font-size:3.6rem;}
.calendar_wrap .month_list{flex-wrap:wrap; padding:8px 0 9px 0;}
.calendar_wrap .month_list > a{width:calc(100% / 6); height:38px; display: inline-flex; align-items: center; justify-content: center;}
.calendar_wrap .month_list > a.on span{width: calc(100% - 20px); height: calc(100% - 4px); border-radius: 7px; padding-bottom:1px; margin-bottom:1px;}
.c_s_cate_list .c_s_cate{margin-bottom:0;}
.calendar_wrap .cal_table td > .cal_date{width:80px;}
.calendar_wrap .cal_table ul.in_sch{width: calc(100% - 80px); padding: 30px 25px 0 25px;}
.calendar_wrap .cal_table ul.in_sch li > button{font-size:1.7rem;}
.calendar_wrap .cal_table td > .cal_date .num_date{font-size:3rem;}
.calendar_wrap .cal_table td > .cal_date .kor_week{display: inline-flex; padding-top:12px; padding-bottom: 3px; font-size: 1.5rem;}
/*251111 - 오늘날짜 표시 추가 */
.calendar_wrap .cal_table td.today_circle > .cal_date .num_date:before{top: 11px; left: 50%; transform: translate(-50%, -50%); width: 33px; height: 33px;}
.c_s_cate_list .c_s_cate{margin-left:0;}
.c_s_cate_list .c_s_cate .place:first-child{margin-left:0;}
.c_s_cate_list .c_s_cate .place:first-child .tit{padding-left:0; border-left:none;}
.c_s_cate_list .c_s_cate .place .tit{padding:1px 5px 0 20px;}
.c_s_cate_list .c_s_cate .place .sel_wrap i{right:0;}
}
@media (min-width: 451px) and (max-width: 768px) {
.calendar_wrap .month_list > a:nth-child(6):before{display:none;}
}
@media (max-width: 500px){
.calendar_wrap .month_body .monthYear{font-size:3.2rem;}
.calendar_wrap .month_list > a{font-size:1.6rem;}
.calendar_wrap .month_body .yearTitle > span{letter-spacing: -0.3rem;}
}
@media (max-width: 450px){
.calendar_wrap .month_list > a{width: calc(100% / 4); max-width: 90px; height: 34px;}
.calendar_wrap .month_list > a:nth-child(4n):before{display:none;}
.calendar_wrap .month_list > a.on span{height: calc(100% - 2px); padding-bottom: 2px; margin-bottom: 0;}
}
@media (max-width: 380px){
.calendar_wrap .month_body{min-height:30px; margin-bottom: 15px;}
.calendar_wrap .calenderHead{margin-bottom:14px;}
.calendar_wrap .month_body .monthYear{font-size:2.8rem; height: 25px;}
.calendar_wrap .cal_table td{display:block; border-bottom: 1px #d9d9d9 dotted; padding:20px 7px;}
.calendar_wrap .cal_table td > .cal_date{width: 100%; align-items: center; border-right:none; padding: 0 0 15px 0; font-size:2.5rem;}
.calendar_wrap .cal_table td > .cal_date .num_date{font-size:3rem;}
.calendar_wrap .cal_table td > .cal_date .kor_week{padding-top:9px; font-size:1.5rem;}
.calendar_wrap .cal_table td > .cal_date .btnPlus {
width:2em;
height:100%;
left:calc(100% - 2em);
top:0;
right:0;
bottom:0;
}
.calendar_wrap .cal_table ul.in_sch{width:100%; padding:0;}
.calendar_wrap .cal_table ul.in_sch li > button{font-size:1.6rem; border-bottom:none; margin-bottom:0;}
.calendar_wrap .cal_table ul.in_sch li > button:before{display:none;}
.calendar_wrap .cal_table ul.in_sch li:last-child > button{padding-bottom:0;}
.calendar_wrap .cal_table ul.in_sch .schedule-type{padding:5px 0 0;}
.calendar_wrap .cal_table ul.in_sch .tit{font-weight:500;}
/*251111 - 오늘날짜 표시 추가 */
.calendar_wrap .cal_table td.today_circle > .cal_date .num_date:before{top: 14px; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px;}
.c_s_cate_list .c_s_cate .place{margin-left:10px;}
.c_s_cate_list .c_s_cate .place .tit{padding: 1px 6px 0 15px;}
.c_s_cate_list .c_s_cate .place .sel_wrap i{top:8px;}
.c_s_cate_list .c_s_cate .place .tit label{font-size:1.4rem;}
.c_s_cate_list .c_s_cate .place select{font-size:1.5rem; padding: 10px 30px 10px 5px;}
.c_s_cate_list .c_s_cate .place .sel_wrap i{right:2px;}
}
/* 미디어쿼리 끝 */
/* 캘린더 - 끝 */
/* 캘린더 쓰기페이지 - 시작 */
.normal_write .board_item_group .input_box_wrap.plus_select_with{display: flex;}
.normal_write .board_item_group .input_box_wrap.plus_select_with select{width: 150px; padding-right: 10px; border-radius: 0; margin-right: 5px; font-size: 1.8rem;}
.normal_write input.m_short_input{width: 20%; min-width: 200px;}
/* 미디어쿼리 시작 */
@media (max-width: 600px){
.normal_write .board_item_group .input_box_wrap.plus_select_with select{height:50px;}
.normal_write input.m_short_input{width:100%;}
}
@media (max-width: 500px){
.normal_write .board_item_group .input_box_wrap.plus_select_with{flex-wrap:wrap;}
.normal_write .board_item_group .input_box_wrap.plus_select_with select{width:100%; margin-right:0; margin-bottom:5px; background-position: top 14px right 10px; background-size: 24px;}
}
/* 미디어쿼리 끝 */
/* 캘린더 쓰기페이지 - 끝 */
/* 패스워드 입력 페이지 시작 */
.board_pw_page{text-align:center;}
.board_pw_page .txt_in{margin-bottom:30px; padding:0 20px;}
.board_pw_page .txt_in > p{font-size: 3.6rem; color:#444; font-family: 'Kakao Small Sans'; letter-spacing: -0.175rem; font-weight:200; line-height: 1.3; transition: font-size 0.3s;}
.board_pw_page .txt_in > p.do_info{font-weight:500;}
.board_pw_page .txt_in > p.do_info > br{display:none;}
.board_pw_page .txt_in .img_zone{text-align:center; margin-bottom: 30px;}
.board_pw_page .txt_in .img_zone img{display: inline-block; width: 110px;}
.board_pw_page .password_in{display:inline-flex; width: 100%; max-width: 320px;}
.board_pw_page .password_in input.inp_txt{border-color: #e8e8e8; height: 54px; border-radius: 5px; max-width: calc(100% - 83px); width: 100%; font-size: 1.8rem;}
.board_pw_page .password_in .board_btn{width:75px; height:54px; background:#2196f3; border-radius:5px; margin-left:8px;}
.board_pw_page .password_in .board_btn > a{display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; color:white; font-size:1.7rem; line-height:1;}
.board_pw_page .gotoback{margin-top:60px;}
.board_pw_page .gotoback > a{font-size: 1.8rem; color: #318fd9;}
/* 미디어쿼리 시작 */
@media (max-width: 1280px){
.board_pw_page .txt_in .img_zone img{width:100px;}
.board_pw_page .txt_in > p{font-size:3.4rem;}
}
@media (max-width: 1024px){
.board_pw_page .txt_in .img_zone{margin-bottom:25px;}
.board_pw_page .txt_in .img_zone img{width:90px;}
.board_pw_page .txt_in > p{font-size:3.2rem;}
.board_pw_page .password_in input.inp_txt{height: 52px;}
.board_pw_page .password_in .board_btn{height:52px;}
}
@media (max-width: 768px){
.board_pw_page .txt_in .img_zone{margin-bottom:20px;}
.board_pw_page .txt_in .img_zone img{width:80px;}
.board_pw_page .txt_in > p{font-size:2.8rem;}
.board_pw_page .gotoback{margin-top:50px;}
.board_pw_page .password_in input.inp_txt{height: 50px;}
.board_pw_page .password_in .board_btn{height:50px;}
}
@media (max-width: 500px){
.board_pw_page .txt_in{margin-bottom:25px;}
.board_pw_page .txt_in .img_zone{margin-bottom:15px;}
.board_pw_page .txt_in .img_zone img{width:70px;}
.board_pw_page .txt_in > p{font-size:2.6rem;}
.board_pw_page .gotoback > a{font-size:1.7rem;}
.board_pw_page .password_in input.inp_txt{height: 48px;}
.board_pw_page .password_in .board_btn{height:48px;}
}
@media (max-width: 380px){
.board_pw_page .password_in{max-width:90%;}
}
@media (max-width: 350px){
.board_pw_page .txt_in{margin-bottom:20px;}
.board_pw_page .txt_in .img_zone img{width:60px;}
.board_pw_page .txt_in > p{font-size:2.4rem;}
.board_pw_page .gotoback > a{font-size:1.6rem;}
}
/* 미디어쿼리 끝 */
/* 패스워드 입력 페이지 끝 */
/*qna 게시판 시작 */
.qna_wrap{background:#fff; box-sizing:border-box;}
.qna_in{border-bottom: 1px solid #e9e9e9; background:#fff; transition:background, border 0.5s;}
.qna_in.active{border-bottom: 1px solid #ccc;}
.qna_in:nth-child(1){border-top: 2px solid black;}
.qna_in .qna_question{position:relative; display:block; margin-bottom:0; padding:32px 30px; cursor:pointer; font-size: 2.6rem; line-height:1.4; letter-spacing: -0.075rem; font-weight: 300; transition: 0.4s;}
.qna_in .qna_question .open_arrow{position:absolute; top: calc(50% + 3px); right: 30px; display:inline-block; transform: translate(0, -50%); font-size: 4.6rem; margin-top: -2px; transition: 0.4s; color: #7a6842;}
.qna_in .qna_question .open_arrow.active{transform: translate(0, -50%) rotate(180deg);}
.qna_in .q_title{display:flex; position:relative; padding-left:55px;}
.qna_in .q_title .bold{font-weight: 900; font-family: 'Nanum Myeongjo'; font-size: 3.8rem; position: absolute; left: 0; top: 0; line-height: 1; font-style: italic;}
.qna_in .qna_answer{display:none; padding:35px 30px; border-top: 1px #d7d7d7 dotted; transition:background 0.3s;}
.qna_in.active .qna_answer{background-color: #fafafa;}
.qna_in .qna_answer .bold{font-weight: 900; font-family: 'Nanum Myeongjo'; font-size: 3.8rem; position: absolute; left: 2px; top: -5px; line-height: 1; font-style: italic; color: #306e52;}
.qna_in .qna_answer p{position:relative; font-size:1.9rem; line-height:1.5; padding-left:55px;}
.qna_wrap .qna_in:last-child {border-bottom:1px solid #ccc;}
.qna_wrap .qna_in:hover{background:#f4f7f5;}
/* 미디어쿼리 시작 */
@media (max-width: 1280px){
.qna_in .qna_question{font-size:2.4rem; padding: 27px 20px;}
.qna_in .q_title{padding-left: 50px; padding-right:50px;}
.qna_in .q_title .bold{font-size:3.6rem; top:-1px;}
.qna_in .qna_question .open_arrow{font-size:4.3rem; right:20px;}
.qna_in .qna_answer{padding: 25px;}
.qna_in .qna_answer .bold{font-size:3.6rem; top:-1px; left:0;}
.qna_in .qna_answer p{font-size:1.8rem; padding-left: 50px;}
}
@media (max-width: 1024px){
.qna_in .qna_question{font-size:2.2rem; padding: 25px 20px;}
.qna_in .q_title{padding-left: 45px;}
.qna_in .q_title .bold{font-size:3.3rem; top:-1px;}
.qna_in .qna_question .open_arrow{font-size:4rem; right:18px;}
.qna_in .qna_answer{padding: 22px;}
.qna_in .qna_answer .bold{font-size:3.3rem; top:-1px;}
.qna_in .qna_answer p{font-size:1.7rem; padding-left: 45px;}
}
@media (max-width: 768px){
.qna_in .qna_question{font-size:2.1rem; padding: 22px 15px;}
.qna_in .q_title{padding-left: 40px;}
.qna_in .q_title .bold{font-size:2.9rem;}
.qna_in .qna_question .open_arrow{font-size:3.2rem; right: 15px;}
.qna_in .qna_answer p{font-size:1.6rem;}
.qna_in .qna_answer{padding: 20px;}
.qna_in .qna_answer .bold{font-size:2.9rem;}
.qna_in .qna_answer p{padding-left: 40px;}
}
@media (max-width: 500px){
.qna_in .qna_question{font-size:2rem; padding: 20px 15px;}
.qna_in .q_title{padding-left: 35px; padding-right:45px;}
.qna_in .q_title .bold{font-size:2.4rem; top:0;}
.qna_in .qna_question .open_arrow{font-size:2.6rem; right: 13px;}
.qna_in .qna_answer{padding:18px 15px;}
.qna_in .qna_answer .bold{font-size:2.5rem;}
.qna_in .qna_answer p{padding-left: 35px;}
}
@media (max-width: 350px){
.qna_in .qna_question{font-size:1.8rem; padding: 17px 15px; line-height:1.3;}
.qna_in .q_title{padding-left:29px;}
.qna_in .q_title .bold{font-size:2.1rem; top:1px; left:-2px;}
.qna_in .qna_question .open_arrow{font-size:2.4rem;}
.qna_in .qna_answer .bold{font-size:2.1rem; top:1px;}
.qna_in .qna_answer p{font-size:1.5rem; padding-left:29px;}
}
/* 미디어쿼리 끝 */
/*qna 게시판 끝 */
/* 본인인증 수단 선택창 시작 */
.how_to_verify_wrap{display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0, 0, 0, 0.5); backdrop-filter:blur(8px); z-index:9999; align-items:center; justify-content:center;}
.how_to_verify_wrap[style*="display: block"]{display: flex !important;}
.how_to_verify_wrap .verify_box{position:relative !important; top:auto !important; left:auto !important; transform:none !important; background:#fff; border-radius:28px; width:92%; max-width:480px; padding:50px 40px; box-shadow:0 25px 60px rgba(0, 0, 0, 0.2); box-sizing:border-box; transition:all 0.3s ease;}
.how_to_verify_wrap .verify_box .top_field{padding: 0 8px;}
.how_to_verify_wrap .verify_box .top_field h4{font-size:2.6rem; font-weight:800; color:#111; margin:0 0 10px; letter-spacing:-1px; line-height:1.2;}
.how_to_verify_wrap .verify_box .top_field p{font-size:1.6rem; color:#777; margin-bottom:35px; line-height:1.5; word-break:keep-all;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list{display:flex; gap:15px; margin:0 0 25px 0; padding:0; list-style:none;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list > li{flex: 1;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 15px; border-radius:20px; border:1.5px solid #f1f3f5; text-decoration:none; transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background:#fff;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice img{width:55px; height:55px; margin-bottom:15px;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice .in_title{font-size: 1.7rem; font-weight:700; color:#333;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice:hover{border-color:#333; transform:translateY(-5px); box-shadow:0 12px 25px rgba(0,0,0,0.1);}
.how_to_verify_wrap .verify_box .cancel_btn{width:100%; padding:16px; border:none; background:#f4f5f7; border-radius:16px; font-size:1.5rem; color:#888; cursor:pointer; font-weight:600; transition:all 0.2s ease;}
.how_to_verify_wrap .verify_box .cancel_btn:hover {background:#ebedef; color:#555; transform:translateY(1px);}
.how_to_verify_wrap .verify_box .cancel_btn:active{background:#e2e4e7; transform:scale(0.98);}
/* 미디어쿼리 시작 */
@media (min-width: 1921px) {
.how_to_verify_wrap .verify_box{max-width:540px; padding:60px 50px; border-radius:32px;}
.how_to_verify_wrap .verify_box .top_field h4{font-size:3.0rem; margin-bottom:15px;}
.how_to_verify_wrap .verify_box .top_field p{font-size: 1.75rem;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list{gap: 15px;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice img{width:65px; height:65px;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice .in_title{font-size: 1.85rem;}
}
@media (min-width: 1025px) {
.how_to_verify_wrap .verify_box{max-width:580px; padding:60px 50px; border-radius:30px;}
}
@media (max-width: 480px){
.how_to_verify_wrap .verify_box{padding:35px 24px 30px; border-radius:26px;}
.how_to_verify_wrap .verify_box .top_field h4{font-size: 2.1rem; margin-bottom:8px; letter-spacing:-0.05rem;}
.how_to_verify_wrap .verify_box .top_field p{font-size: 1.45rem; margin-bottom:25px; opacity:0.9;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list{flex-direction:column; gap:10px;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice {flex-direction:row; padding:16px 22px; justify-content:flex-start; border-radius:8px;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice img{width:38px; height:38px; margin:0 16px 0 0;}
.how_to_verify_wrap .verify_box .bottom_field .choice_btn_list .verify_choice .in_title{font-size:1.6rem;}
.how_to_verify_wrap .verify_box .cancel_btn{padding:14px; font-size:1.4rem; margin-top:5px;}
}
/* 미디어쿼리 끝 */
/* 본인인증 수단 선택창 끝 */
/* 정원·시설안내 시작 */
:root{
--brand:#0c8a85; --brand-deep:#086b67; --brand-mist:#f0f7f5; --brand-tint:#e2efed;
--ink-900:#0e1f1c; --ink-800:#1c2926; --ink-700:#34423e; --ink-600:#4a5854; --ink-500:#6b7773; --ink-400:#8c9692; --ink-300:#b6beba; --ink-200:#d8ddda; --ink-100:#ecefed; --ink-50:#f6f8f7;
--gf-line:rgba(15,30,28,0.09); --gf-line-strong:rgba(15,30,28,0.16);
--surface:#ffffff; --canvas:#f6f8f7;
--ease:cubic-bezier(.22,.7,.22,1);
--shadow-sm:0 1px 2px rgba(15,30,28,.04),0 1px 3px rgba(15,30,28,.05);
--shadow-md:0 10px 24px rgba(15,30,28,.06),0 3px 8px rgba(15,30,28,.04);
--shadow-lg:0 24px 50px rgba(15,30,28,.10),0 6px 16px rgba(15,30,28,.06);
}
/* 카테고리 탭 시작 */
.cat-tabs-wrap {
position: relative;
margin-top: 40px;
margin-bottom: 36px;
border-top: 1px solid var(--gf-line);
border-bottom: 1px solid var(--gf-line);
padding: 14px 0;
overflow: visible;
}
.cat-tabs {
display: inline-flex;
gap: 6px;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
padding: 0 20px;
box-sizing: border-box;
}
.cat-tabs::-webkit-scrollbar{display: none;}
.cat-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
font-size: 1.8rem;
font-weight: 500;
color: var(--ink-500);
letter-spacing: -0.025rem;
white-space: nowrap;
border-radius: 999px;
border: 1px solid transparent;
transition: all .22s var(--ease);
}
.cat-tabs a:hover { color: var(--ink-900); background: var(--canvas); }
.cat-tabs a.active { color: #fff; background: var(--ink-900); font-weight: 600; }
/* 미디어쿼리 시작 */
@media (max-width: 1280px) {
.cat-tabs a { font-size: 1.7rem; padding: 11px 20px; }
}
@media (max-width: 1024px) {
.cat-tabs-wrap { margin-top: 32px; margin-bottom: 28px; padding: 12px 0; }
.cat-tabs a { padding: 9px 18px; font-size: 1.55rem; }
}
@media (max-width: 768px) {
.cat-tabs-wrap { margin-top: 24px; margin-bottom: 24px; padding: 10px 0; }
.cat-tabs { gap: 5px; padding: 0 16px 0 0; }
.cat-tabs a { padding: 8px 15px; font-size: 1.5rem; letter-spacing: -0.03rem; }
.cat-tabs-wrap::after {
content: "";
position: absolute;
top: 1px;
right: 0;
bottom: 1px;
width: 48px;
background: linear-gradient(90deg, transparent, var(--surface, #fff) 80%);
pointer-events: none;
z-index: 10;
}
}
@media (max-width: 500px) {
.cat-tabs-wrap { margin-top: 20px; }
.cat-tabs a { padding: 7px 13px;}
}
/* 미디어쿼리 끝 */
/* 카테고리 탭 끝 */
/* 목록 툴바 시작 */
.list-toolbar{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap;}
.list-toolbar .count{font-size:1.6rem; color:var(--ink-500); letter-spacing:-0.025rem; display:inline-flex; align-items:center; gap:8px;}
.list-toolbar .count strong{font-size:1.8rem; font-weight:700; color:var(--ink-900);}
.list-toolbar .count em{font-style:normal; font-weight:700; color:var(--brand);}
.list-toolbar .count .div{width:1px; height:14px; background:var(--ink-200);}
/* 미디어쿼리 시작 */
@media (max-width:1024px) {
.search-area{max-width: 100%; }
.list-toolbar{gap:30px; margin-bottom: 22px;}
.list-toolbar .count{order:2;}
}
/* 미디어쿼리 끝 */
/* 목록 툴바 끝 */
/* 검색 영역 시작 */
.search-area {
display:flex;
align-items:center;
gap:0;
width: 100%;
max-width: 450px;
height: 48px;
border: 1px solid var(--gf-line-strong);
border-radius: 999px;
overflow: hidden;
background: var(--surface);
box-sizing: border-box;
transition: border-color .22s var(--ease);
}
.search-area:focus-within{border-color: var(--ink-900);}
.search-area select{
flex-shrink: 0;
height: 100%;
border: none;
border-right: 1px solid var(--gf-line);
background: var(--surface);
color: var(--ink-800);
font-size: 1.6rem;
font-weight: 500;
padding: 0 32px 0 20px;
cursor: pointer;
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% - 12px) center;
background-size: 12px;
}
.search-area select::-ms-expand{display:none;}
.search-area input{
flex: 1;
min-width: 0;
height: 100%;
border: none;
background: var(--surface);
color: var(--ink-800);
font-size: 1.6rem;
padding: 0 16px;
outline: none;
box-sizing: border-box;
}
.search-area input::placeholder {
color: var(--ink-400);
}
.search-area .search-btn {
flex-shrink: 0;
height: 100%;
padding: 0 18px 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: var(--surface);
color: var(--ink-700);
cursor: pointer;
transition: color .22s;
}
.search-area .search-btn:hover{color:var(--brand); }
.search-area .search-btn svg{ width:22px; height:22px; }
/* 미디어쿼리 시작 */
@media (max-width:1024px) {
.search-area{max-width: 100%; }
}
@media (max-width:768px) {
.search-area{height:46px;}
.search-area select{font-size:1.5rem; padding:0 28px 0 14px; background-position:calc(100% - 10px) center; background-size:11px;}
.search-area input{font-size:1.55rem; padding:0 12px;}
.search-area input::placeholder{font-size:1.45rem;}
.search-area .search-btn svg{width:21px; height:21px;}
}
/* 미디어쿼리 끝 */
/* 검색 영역 끝 */
/* 카드 그리드 시작 */
.gf-grid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:28px; row-gap:72px; margin-bottom:64px;}
.gf-card{display:flex; flex-direction:column; position:relative; background:var(--surface);}
.gf-card .gf-image{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:14px; background:var(--ink-100); margin-bottom:22px;}
.gf-card .gf-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.gf-card:hover .gf-image img{transform:scale(1.05);}
.gf-card .gf-image::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(14,31,28,.35) 100%); opacity:0; transition:opacity .35s var(--ease); pointer-events:none;}
.gf-card:hover .gf-image::after{opacity:1;}
.gf-card .gf-badge{position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(255,255,255,0.94); backdrop-filter:blur(8px); color:var(--ink-900); font-size:1.2rem; font-weight:600; letter-spacing:-0.02rem; border-radius:999px;}
.gf-card .gf-badge::before{content:""; width:5px; height:5px; background:var(--brand); border-radius:50%;}
.gf-card .gf-body{display:grid; grid-template-columns:1fr auto; grid-template-areas:"title arrow" "desc desc" "meta meta"; align-items:start; column-gap:16px; row-gap:10px; padding:0 4px;}
.gf-card .gf-title{grid-area:title; font-size:2.4rem; font-weight:700; color:var(--ink-900); letter-spacing:-0.045rem; line-height:1.3; margin:0;}
.gf-card .gf-arrow{grid-area:arrow; flex-shrink:0; margin-top:-4px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--gf-line-strong); border-radius:50%; color:var(--ink-700); transition:all .3s var(--ease);}
.gf-card .gf-arrow svg{width:14px; height:14px; transition:transform .3s var(--ease);}
.gf-card:hover .gf-arrow{background:var(--ink-900); border-color:var(--ink-900); color:#fff;}
.gf-card:hover .gf-arrow svg{transform:rotate(-45deg);}
.gf-card .gf-desc{grid-area:desc; font-size:1.6rem; line-height:1.6; color:var(--ink-500); letter-spacing:-0.02rem; font-weight:400; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0;}
.gf-card .gf-meta{grid-area:meta; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:6px;}
.gf-card .gf-meta .chip{display:inline-flex; align-items:center; gap:5px; padding:5px 11px; background:var(--ink-50); border-radius:999px; font-size:1.4rem; color:var(--ink-600); font-weight:500; letter-spacing:-0.02rem; transition:background .2s var(--ease);}
.gf-card .gf-meta .chip svg{width:12px; height:12px; color:var(--ink-400);}
.gf-card:hover .gf-meta .chip{background:var(--brand-mist);}
/* 미디어쿼리 시작 */
@media (max-width: 1280px) {
.gf-grid { gap: 30px 22px; }
.gf-card .gf-title { font-size: 2.2rem; }
}
@media (max-width: 1024px) {
.gf-grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 56px; }
/* 2열 배치 공간에 맞춰 폰트 밸런스 조정 */
.gf-card .gf-title { font-size: 2.1rem; }
.gf-card .gf-desc { font-size: 1.5rem; line-height: 1.55; }
.gf-card .gf-meta .chip { font-size: 1.3rem; }
}
@media (max-width: 768px) {
.gf-grid { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 40px; margin-bottom: 48px; }
.gf-card .gf-image { margin-bottom: 16px; border-radius: 10px; }
.gf-card .gf-body { column-gap: 10px; row-gap: 8px; padding: 0 2px; }
.gf-card .gf-title { font-size: 1.7rem; letter-spacing: -0.03rem; }
.gf-card .gf-arrow { width: 28px; height: 28px;}
.gf-card .gf-arrow svg { width: 12px; height: 12px; }
/* 본문과 칩이 가독성을 해치지 않는 미니멈 사이즈(1.3rem / 1.2rem) 적용 */
.gf-card .gf-desc { font-size: 1.35rem; line-height: 1.5; color: var(--ink-500); }
.gf-card .gf-meta { margin-top: 4px; gap: 4px 6px; }
.gf-card .gf-meta .chip { font-size: 1.2rem; padding: 4px 8px; }
.gf-card .gf-badge { font-size: 1.1rem; padding: 4px 8px; top: 10px; left: 10px; }
}
@media (max-width: 500px) {
.gf-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 44px; }
.gf-card .gf-image { aspect-ratio: 16/11; }
.gf-card .gf-title { font-size: 2rem; }
.gf-card .gf-arrow{margin-top:-4px;}
.gf-card .gf-arrow svg { width: 13px; height: 13px; }
.gf-card .gf-desc { font-size: 1.45rem; line-height: 1.55; }
.gf-card .gf-meta .chip { font-size: 1.25rem; padding: 5px 10px; }
}
/* 미디어쿼리 끝 */
/* 카드 그리드 끝 */
/* 페이지네이션 시작 */
.gf-pager, .pagination{display:flex; align-items:center; justify-content:center; gap:4px; margin-top:24px; flex-wrap:wrap;}
.gf-pager a, .gf-pager button,
.pagination li a{min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border-radius:50%; font-size:1.45rem; font-weight:500; color:var(--ink-500); background:transparent; border:none; transition:all .22s var(--ease); cursor:pointer;}
.gf-pager a:hover, .gf-pager button:hover,
.pagination li a:hover{color:var(--ink-900); background:var(--canvas);}
.gf-pager a.active,
.pagination li.active a{background:var(--ink-900); color:#fff; font-weight:600;}
.gf-pager .nav-arrow svg{width:14px; height:14px;}
.gf-pager .nav-arrow.disabled{opacity:.3; pointer-events:none;}
/* 미디어쿼리 시작 */
@media (max-width:500px){
.gf-pager a, .gf-pager button,
.pagination li a{min-width:38px; height:38px; font-size:1.35rem;}
}
/* 미디어쿼리 끝 */
/* 페이지네이션 끝 */
/* 상세 헤로 시작 */
.detail-hero-wrap{margin-top:8px; margin-bottom:0;}
.detail-hero{position:relative; width:100%; aspect-ratio:21/9; min-height:380px; max-height:560px; border-radius:18px; overflow:hidden; background:#0a0f0e;}
.detail-hero .hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .8s ease;}
.detail-hero .hero-slide.active{opacity:1;}
.detail-hero .hero-slide img{width:100%; height:100%; object-fit:cover;}
.hero-overlay{position:absolute; left:36px; right:36px; bottom:32px; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; color:#fff;}
.hero-overlay .loc{display:inline-flex; align-items:center; gap:8px; font-size:1.6rem; font-weight:500; letter-spacing:-0.02rem; opacity:.95;}
.hero-overlay .loc svg{width:15px; height:15px;}
.hero-counter{display:flex; align-items:center; gap:14px; padding:6px 6px 6px 18px; background:rgba(0,0,0,.32); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.18); border-radius:999px;}
.hero-counter .count{font-size:1.5rem; font-weight:500; letter-spacing:0.02em;}
.hero-counter .count strong{font-weight:700; font-family: 'Paperlogy';}
.hero-counter .count em{font-style:normal; opacity:.55; font-weight:400; margin:0 4px; font-family: 'Paperlogy';}
.hero-counter .count span{font-family: 'Paperlogy';}
.hero-counter .nav{display:flex; gap:4px;}
.hero-counter .nav button{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border:none; border-radius:50%; color:#fff; cursor:pointer; transition:background .22s var(--ease);}
.hero-counter .nav button:hover{background:#fff; color:var(--ink-900);}
.hero-counter .nav button svg{width:14px; height:14px;}
/* 미디어쿼리 시작 */
@media (max-width:1280px){
.detail-hero{min-height:340px; aspect-ratio:21/10;}
.hero-overlay{left:28px; right:28px; bottom:24px;}
}
@media (max-width:1024px){
.detail-hero{aspect-ratio:16/9; min-height:320px; border-radius:14px;}
.hero-overlay{left:22px; right:22px; bottom:20px;}
}
@media (max-width:768px){
.detail-hero{aspect-ratio:4/3; min-height:260px; border-radius:12px;}
.hero-overlay{left:14px; right:14px; bottom:14px; flex-direction:column; align-items:flex-start; gap:12px;}
.hero-overlay .loc{font-size:1.5rem;}
.hero-counter{align-self:stretch; justify-content:space-between; padding:6px 6px 6px 16px;}
.hero-counter .count{font-size:1.45rem;}
.hero-counter .nav button{width:36px; height:36px;}
}
/* 미디어쿼리 끝 */
/* 상세 헤로 끝 */
/* 상세 제목 시작 */
.detail-title-wrap {
margin-top: 32px;
margin-bottom: 8px;
}
.detail-title-wrap .detail-title {
font-size: 3.6rem;
font-weight: 700;
color: var(--ink-900);
letter-spacing: -0.05rem;
line-height: 1.2;
margin-bottom: 10px;
}
.detail-title-wrap .detail-subtitle {
font-size: 1.8rem;
color: var(--ink-500);
font-weight: 400;
letter-spacing: -0.02rem;
line-height: 1.5;
}
/* 미디어쿼리 시작 */
@media (max-width: 1024px) {
.detail-title-wrap .detail-title { font-size: 3rem; }
}
@media (max-width: 768px) {
.detail-title-wrap { margin-top: 26px; }
.detail-title-wrap .detail-title { font-size: 2.6rem; }
.detail-title-wrap .detail-subtitle { font-size: 1.65rem; }
}
@media (max-width: 500px) {
.detail-title-wrap .detail-title { font-size: 2.2rem; }
}
/* 미디어쿼리 끝 */
/* 상세 제목 끝 */
/* 인포 카드 시작 */
.gf-info-card{margin-top:36px; margin-bottom:80px; background:var(--surface); border:1px solid var(--gf-line); border-radius:18px; overflow:hidden;}
.gf-info-card-head{display:flex; align-items:center; gap:12px; padding:20px 28px; background:var(--canvas); border-bottom:1px solid var(--gf-line);}
.gf-info-card-head h4{display:inline-flex; align-items:center; gap:9px; font-size:1.65rem; font-weight:700; color:var(--ink-900); letter-spacing:-0.025rem;}
.gf-info-card-head h4 svg{width:16px; height:16px; color:var(--brand);}
.gf-info-card-head .meta{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:1.35rem; font-weight:600; color:var(--ink-500); letter-spacing:0.06em; text-transform:uppercase;}
.gf-info-card-head .meta::before{content:""; width:6px; height:6px; background:var(--brand); border-radius:50%;}
.gf-info-card-body{display:flex; flex-wrap:wrap; gap:1px; background:var(--gf-line);}
.gf-info-card-body .info-item{flex:1 1 240px; background:var(--surface); padding:24px 28px; display:flex; flex-direction:column; gap:10px;}
.gf-info-card-body .info-item dt.label, .gf-info-card-body .info-item .label{display:inline-flex; align-items:center; gap:7px; font-family: 'Paperlogy'; font-size:1.5rem; font-weight:600; color:var(--ink-500); letter-spacing:0.08em; text-transform:uppercase;}
.gf-info-card-body .info-item .label svg{width:14px; height:14px; color:var(--brand); flex-shrink:0;}
.gf-info-card-body .info-item dd.value, .gf-info-card-body .info-item .value{font-size:1.8rem; font-weight:600; color:var(--ink-900); letter-spacing:-0.025rem; line-height:1.5; word-break:keep-all; text-wrap:pretty;}
.gf-info-card-body .info-item .value .sub{display:block; font-size:1.5rem; font-weight:400; color:var(--ink-500); line-height:1.5; margin-top:6px;}
/* 미디어쿼리 시작 */
@media (max-width:1024px){
.gf-info-card{margin-bottom:64px;}
.gf-info-card-head{padding:18px 24px;}
.gf-info-card-body .info-item{flex-basis:200px; padding:22px 24px;}
.gf-info-card-body .info-item .value{font-size:1.75rem;}
}
@media (max-width:768px){
.gf-info-card{margin-top:20px; margin-bottom:52px; border-radius:14px;}
.gf-info-card-head{padding:16px 18px;}
.gf-info-card-head h4{font-size:1.55rem;}
.gf-info-card-head .meta{font-size:1.25rem;}
.gf-info-card-body .info-item{flex-basis:100%; padding:18px 20px; gap:6px;}
.gf-info-card-body .info-item .label{font-size:1.3rem; letter-spacing:0.06em;}
.gf-info-card-body .info-item .value{font-size:1.65rem; margin-top:2px;}
.gf-info-card-body .info-item .value small{font-size:1.35rem;}
.gf-info-card-body .info-item .sub{font-size:1.4rem;}
}
/* 미디어쿼리 끝 */
/* 인포 카드 끝 */
/* 섹션 공통 시작 */
.detail-section{margin-bottom:88px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; padding-bottom:16px; border-bottom:1px solid var(--gf-line);}
.section-head .heading{display:flex; align-items:baseline; gap:14px;}
.section-head .num{font-size:1.45rem; font-weight:700; color:var(--brand); letter-spacing:0.06em;}
.section-head h4{font-size:2.6rem; font-weight:700; color:var(--ink-900); letter-spacing:-0.04rem;}
.section-head .head-aside{font-size:1.5rem; color:var(--ink-400); font-weight:500; letter-spacing:-0.02rem;}
.section-head .head-aside strong{color:var(--ink-900); font-weight:700;}
/* 미디어쿼리 시작 */
@media (max-width:1280px){
.section-head h4{font-size:2.4rem;}
}
@media (max-width:1024px){
.detail-section{margin-bottom:64px;}
.section-head h4{font-size:2.2rem;}
}
@media (max-width:768px){
.detail-section{margin-bottom:52px;}
.section-head{margin-bottom:22px; padding-bottom:14px;}
.section-head h4{font-size:1.95rem;}
.section-head .num{font-size:1.35rem;}
.section-head .head-aside{font-size:1.35rem;}
}
/* 미디어쿼리 끝 */
/* 섹션 공통 끝 */
/* 소개 본문 시작 */
.intro-body{font-size:1.8rem; line-height:1.85; color:var(--ink-700); letter-spacing:-0.022rem; font-weight:400; text-wrap:pretty;}
.intro-body .lead{font-size:2.1rem; font-weight:400; color:var(--ink-900); line-height:1.6; letter-spacing:-0.035rem; margin-bottom:26px; padding-left:18px; border-left:4px solid var(--brand);}
.intro-body p{margin-bottom:18px;}
.intro-body p:last-child{margin-bottom:0;}
.intro-body strong{color:var(--brand-deep); font-weight:700;}
/* 미디어쿼리 시작 */
@media (max-width:1280px){
.intro-body{font-size:1.7rem;}
.intro-body .lead{font-size:1.95rem;}
}
@media (max-width:768px){
.intro-body{font-size:1.6rem; line-height:1.75;}
.intro-body .lead{font-size:1.75rem; padding-left:14px; margin-bottom:20px;}
}
/* 미디어쿼리 끝 */
/* 소개 본문 끝 */
/* 텍스트 패널 시작 */
.text-panel{background:var(--canvas); border:1px solid var(--gf-line); border-radius:16px; padding:32px 34px;}
.text-panel p{font-size:1.75rem; line-height:1.8; color:var(--ink-700); letter-spacing:-0.022rem; font-weight:400; text-wrap:pretty; word-break:keep-all;}
.text-panel p + p{margin-top:14px;}
.text-panel strong{color:var(--brand-deep); font-weight:700;}
/* 미디어쿼리 시작 */
@media (max-width:1280px){
.text-panel{padding:28px 28px;}
.text-panel p{font-size:1.68rem;}
}
@media (max-width:768px){
.text-panel{padding:22px 20px; border-radius:12px;}
.text-panel p{font-size:1.6rem; line-height:1.75;}
}
/* 미디어쿼리 끝 */
/* 텍스트 패널 끝 */
/* 갤러리 시작 */
.gallery-wrap{position:relative;}
.gallery-main{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#0a0f0e;}
.gallery-main .slides{display:flex; width:100%; height:100%; transition:transform .65s var(--ease);}
.gallery-main .slide{flex:0 0 100%; height:100%;}
.gallery-main .slide img{width:100%; height:100%; object-fit:cover;}
.gallery-main .gal-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.94); border:none; color:var(--ink-900); border-radius:50%; cursor:pointer; box-shadow:var(--shadow-md); transition:all .25s var(--ease); z-index:3;}
.gallery-main .gal-nav:hover{background:var(--ink-900); color:#fff;}
.gallery-main .gal-nav.prev{left:24px;}
.gallery-main .gal-nav.next{right:24px;}
.gallery-main .gal-nav svg{width:19px; height:19px;}
.gallery-main .gal-counter{position:absolute; left:24px; bottom:22px; z-index:3; display:inline-flex; align-items:center; padding:8px 16px; background:rgba(0,0,0,.45); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:999px; font-size:1.5rem; font-weight:500;}
.gallery-main .gal-counter strong{font-weight:700; font-family: 'Paperlogy';}
.gallery-main .gal-counter span{font-family: 'Paperlogy';}
.gallery-main .gal-counter em{font-style:normal; opacity:.55; margin:0 4px; font-family: 'Paperlogy';}
.gallery-thumbs{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px;}
.gallery-thumbs button{position:relative; aspect-ratio:4/3; border:2px solid transparent; border-radius:10px; overflow:hidden; background:var(--ink-100); cursor:pointer; transition:all .22s var(--ease);}
.gallery-thumbs button img{width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .22s var(--ease);}
.gallery-thumbs button:hover img{opacity:1;}
.gallery-thumbs button.active{border-color:var(--ink-900);}
.gallery-thumbs button.active img{opacity:1;}
.gallery-dots{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px;}
.gallery-dots button{width:24px; height:4px; background:var(--ink-200); border:none; border-radius:999px; cursor:pointer; transition:all .35s var(--ease);}
.gallery-dots button.active{background:var(--ink-900); width:56px;}
/* 미디어쿼리 시작 */
@media (max-width:1024px){
.gallery-thumbs{grid-template-columns:repeat(5,1fr);}
.gallery-dots{display:none;}
}
@media (max-width:768px){
.gallery-main{aspect-ratio:4/3; border-radius:12px;}
.gallery-main .gal-nav{width:40px; height:40px;}
.gallery-main .gal-nav.prev{left:12px;}
.gallery-main .gal-nav.next{right:12px;}
.gallery-main .gal-counter{left:14px; bottom:14px; padding:6px 14px; font-size:1.4rem;}
.gallery-thumbs{display:none;}
.gallery-dots{display:flex;}
.gallery-dots button{width:20px;}
.gallery-dots button.active{width:44px;}
.gallery-main .gal-nav svg{width:18px; height:18px;}
}
/* 미디어쿼리 끝 */
/* 갤러리 끝 */
/* 위치 시작 */
.location-card{border-radius:18px; overflow:hidden; border:1px solid var(--gf-line); background:var(--surface);}
.location-map{position:relative; aspect-ratio:16/7; background:#dceae5; overflow:hidden;}
.location-map img{width:100%; height:100%; object-fit:cover;}
.location-map .map-pin{position:absolute; top:46%; left:50%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; z-index:3;}
.location-map .pin-label{background:#fff; padding:10px 18px; border-radius:999px; font-size:1.5rem; font-weight:700; color:var(--ink-900); box-shadow:var(--shadow-md); margin-bottom:8px; white-space:nowrap; position:relative; display:inline-flex; align-items:center; gap:7px;}
.location-map .pin-label::before{content:""; width:7px; height:7px; background:var(--brand); border-radius:50%;}
.location-map .pin-label::after{content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#fff;}
.location-map .pin-marker{width:32px; height:32px; background:var(--brand); border:4px solid #fff; border-radius:50%; box-shadow:0 4px 14px rgba(12,138,133,.4);}
.location-map .map-controls{position:absolute; top:16px; right:16px; display:flex; flex-direction:column; gap:4px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm);}
.location-map .map-controls button{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--ink-700); border:none; cursor:pointer; font-size:1.7rem;}
.location-map .map-controls button:hover{background:var(--canvas);}
.location-map .map-controls button + button{border-top:1px solid var(--gf-line);}
.location-info{display:flex; align-items:center; justify-content:space-between; padding:24px 30px; border-top:1px solid var(--gf-line); gap:24px; flex-wrap:wrap;}
.location-info .addr{display:flex; align-items:center; gap:16px;}
.location-info .addr-icon{width:48px; height:48px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-mist); color:var(--brand); border-radius:12px;}
.location-info .addr-icon svg{width:20px; height:20px;}
.location-info .addr-text{display:flex; flex-direction:column; gap:4px;}
.location-info .addr-text strong{font-size:1.45rem; color:var(--ink-400); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
.location-info .addr-text span{font-size:1.9rem; color:var(--ink-900); font-weight:600; letter-spacing:-0.025rem; line-height:1.4;}
.location-info .route-btn{display:inline-flex; align-items:center; gap:8px; padding:15px 26px; background:var(--ink-900); color:#fff; border-radius:999px; font-size:1.65rem; font-weight:600; transition:background .22s var(--ease);}
.location-info .route-btn:hover{background:var(--brand);}
.location-info .route-btn svg{width:13px; height:13px;}
/* 미디어쿼리 시작 */
@media (max-width:1024px){
.location-map{aspect-ratio:16/8;}
}
@media (max-width:768px){
.location-map{aspect-ratio:4/3;}
.location-info{padding:20px 18px; flex-direction:column; align-items:stretch; gap:18px;}
.location-info .addr-text span{font-size:1.65rem;}
.location-info .route-btn{width:100%; justify-content:center; padding:14px; font-size:1.6rem;}
}
/* 미디어쿼리 끝 */
/* 위치 끝 */
/* 액션 영역 시작 */
.action-zone {
padding: 24px 0; /* 너무 넓지 않은 정갈한 상하 여백 */
border-top: 1px solid var(--gf-line);
border-bottom: 1px solid var(--gf-line);
margin-bottom: 40px;
}
.sns-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
/* 텍스트 크기를 너무 크지도 작지도 않은 1.5rem으로 안착 */
.sns-row .sns-label {
font-size: 1.7rem;
font-weight: 700;
color: var(--ink-700);
letter-spacing: -0.01em;
position: relative;
padding-right: 16px;
font-family: 'Paperlogy';
}
/* 텍스트 크기에 맞춰 디바이더 선 높이 보정 */
.sns-row .sns-label::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 12px;
background: var(--gf-line-strong);
}
.sns-row .sns-list {
display: flex;
align-items: center;
gap: 6px; /* 조밀한 버튼 간격 */
list-style: none;
padding: 0;
margin: 0;
}
/* 🚨 크기감 조정: 38px은 작고 48px은 컸으니 딱 좋은 '42px'로 셋팅 */
.sns-row .sns-list > li {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 텁텁함을 뺀 단정한 서클 라인 */
.sns-row .sns-list button {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gf-line-strong);
background: transparent;
border-radius: 50%;
cursor: pointer;
color: var(--ink-600);
padding: 0;
transition: all .2s var(--ease);
}
.sns-row .sns-list button:hover {
border-color: var(--ink-900);
color: var(--ink-900);
background: var(--canvas);
}
.sns-row .sns-list button svg {
width: 16px;
height: 16px;
display: block;
pointer-events: none;
}
.sns-row .sns-list button i { font-size: 2.2rem; line-height: 1; }
.nav-row{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:24px;}
.nav-row .nav-btn{display:inline-flex; align-items:center; gap:8px; padding:15px 32px; border-radius:999px; font-weight:600; letter-spacing:-0.025rem; transition:all .22s var(--ease); cursor:pointer;}
.nav-row .nav-btn.primary{background:var(--ink-900); color:#fff; border:1px solid var(--ink-900);}
.nav-row .nav-btn.primary:hover{background:var(--brand); border-color:var(--brand);}
.nav-row .nav-btn.secondary{background:#fff; color:var(--ink-700); border:1px solid var(--gf-line-strong);}
.nav-row .nav-btn.secondary:hover{border-color:var(--ink-900); color:var(--ink-900);}
.nav-row .nav-btn svg{width:14px; height:14px;}
.nav-row .nav-btn.edit { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.nav-row .nav-btn.edit:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.nav-row .nav-btn.delete { background: #e84b43; color: #fff; border: 1px solid #e84b43; }
.nav-row .nav-btn.delete:hover { background: #c73c35; border-color: #c73c35; }
.contact-info{display:flex; align-items:center; padding:18px 24px; background:var(--canvas); border-radius:12px; gap:20px; flex-wrap:wrap; margin-top:24px;}
.contact-info .label{display:inline-flex; align-items:center; gap:8px; font-size:1.5rem; font-weight:700; color:var(--ink-900); letter-spacing:0.02em;}
.contact-info .label::before{content:""; width:14px; height:14px; background:var(--brand); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.contact-info .item{display:flex; align-items:center; gap:10px; font-size:1.55rem; color:var(--ink-500);}
.contact-info .item strong{color:var(--ink-800); font-weight:600; margin-right:2px;}
.contact-info .item a{color:var(--brand); font-weight:700;}
.contact-info .item + .item::before{content:""; width:1px; height:12px; background:var(--ink-200);}
/* 미디어쿼리 시작 */
@media (max-width:768px){
.action-zone{padding:20px 0; gap:16px;}
.sns-row{flex-direction: row; align-items: center; width: 100%; gap: 12px;}
.sns-row .sns-label{padding-right: 0;}
.sns-row .sns-label::after{display: none;}
.sns-row .sns-list{gap: 4px;}
.sns-row .sns-list > li{width:38px; height:38px;}
.license-row{padding:16px 18px; margin-top:16px;}
.license-row p{font-size:1.45rem;}
.nav-row{flex-wrap:wrap; width:100%; gap:10px; margin-top:16px;}
.nav-row .nav-btn{flex:1; justify-content:center; padding:15px 22px; font-size:1.55rem;}
.contact-info{padding:16px; gap:12px; flex-direction:column; align-items:flex-start; margin-top:16px;}
.contact-info .item{font-size:1.5rem;}
.contact-info .item + .item::before{display:none;}
}
@media (max-width:380px){
.sns-row .sns-label{font-size:1.6rem;}
}
/* 미디어쿼리 끝 */
/* 액션 영역 끝 */
/* 편의시설 탭 시작 */
.facility-tabs-wrap{margin-bottom:40px;}
.facility-tabs{display:flex; flex-wrap:wrap; gap:10px;}
.facility-tabs button{display:inline-flex; align-items:center; justify-content:center; padding:14px 24px; font-size:1.65rem; font-weight:500; color:var(--ink-600); letter-spacing:-0.025rem; white-space:nowrap; background:var(--surface); border:1px solid var(--gf-line-strong); border-radius:10px; cursor:pointer; transition:all .2s var(--ease);}
.facility-tabs button:hover{border-color:var(--ink-700); color:var(--ink-900);}
.facility-tabs button.active{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;}
.facility-feature{margin-bottom:80px;}
.ff-banner{position:relative; aspect-ratio:21/8; min-height:340px; max-height:460px; border-radius:20px; overflow:hidden; background:#0a0f0e; margin-bottom:18px;}
.ff-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ff-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.62) 100%); z-index:1;}
.ff-overlay{position:absolute; left:36px; right:36px; bottom:30px; z-index:2; display:flex; flex-direction:column; gap:14px; align-items:flex-start; color:#fff;}
.ff-overlay .ff-badge{display:inline-flex; align-items:center; gap:7px; padding:8px 16px; background:rgba(255,255,255,.16); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.28); border-radius:999px; font-size:1.5rem; font-weight:600; letter-spacing:0.02em;}
.ff-overlay .ff-badge::before{content:""; width:6px; height:6px; background:#fff; border-radius:50%;}
.ff-overlay .ff-name{font-size:3.8rem; font-weight:700; letter-spacing:-0.06rem; line-height:1.15; text-shadow:0 2px 20px rgba(0,0,0,.3);}
/* 미디어쿼리 시작 */
@media (max-width:1024px){
.facility-feature{margin-bottom:64px;}
.ff-banner{aspect-ratio:16/9; min-height:280px; border-radius:16px;}
.ff-overlay{left:26px; right:26px; bottom:24px;}
.ff-overlay .ff-name{font-size:3.2rem;}
}
@media (max-width:768px){
.facility-tabs-wrap{margin-bottom:28px;}
.facility-tabs{gap:8px;}
.facility-tabs button{padding:12px 18px; font-size:1.55rem; border-radius:8px;}
.ff-banner{aspect-ratio:4/3; min-height:240px; border-radius:14px;}
.ff-overlay{left:18px; right:18px; bottom:18px; gap:10px;}
.ff-overlay .ff-badge{padding:6px 14px; font-size:1.45rem;}
.ff-overlay .ff-name{font-size:2.6rem;}
}
/* 미디어쿼리 끝 */
/* 편의시설 탭 끝 */
/* 시설 가이드 레이아웃 시작 */
.fac-layout{display:grid; grid-template-columns:272px minmax(0,1fr); gap:44px; margin-bottom:80px; align-items:start;}
.fac-layout.is-single{grid-template-columns:1fr; gap:0;}
.fac-layout.is-single .fac-side{display:none;}
.fac-layout.is-single .fac-hero{aspect-ratio:21/9; max-height:520px;}
.fac-side{position:sticky; top:110px;}
.fac-side .side-title{font-size:1.7rem; font-weight:700; color:var(--ink-400); letter-spacing:0.12em; text-transform:uppercase; padding:0 4px 14px; margin-bottom:6px; border-bottom:1px solid var(--gf-line);}
.fac-side-nav{display:flex; flex-direction:column; gap:2px;}
.fac-side-nav button{display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; border-radius:12px; background:transparent; border:none; cursor:pointer; text-align:left; font-size:1.65rem; font-weight:500; color:var(--ink-600); letter-spacing:-0.025rem; transition:all .2s var(--ease);}
.fac-side-nav button .idx{font-size:1.4rem; font-weight:600; color:var(--ink-300); font-variant-numeric:tabular-nums; transition:color .2s var(--ease);}
.fac-side-nav button:hover{background:var(--canvas); color:var(--ink-900);}
.fac-side-nav button.active{background:var(--brand); color:#fff; font-weight:600;}
.fac-side-nav button.active .idx{color:rgba(255,255,255,0.7);}
.fac-main{min-width:0;transition: opacity 0.25s ease; }
.fac-main.is-fading { opacity: 0; }
.fac-hero{position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#0a0f0e; margin-bottom:30px;}
.fac-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.fac-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.6) 100%); z-index:1;}
.fac-hero .fh-overlay{position:absolute; left:32px; right:32px; bottom:28px; z-index:2; color:#fff;}
.fac-hero .fh-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:1.45rem; font-weight:600; letter-spacing:0.06em; margin-bottom:10px; opacity:.95;}
.fac-hero .fh-eyebrow .num{font-variant-numeric:tabular-nums; opacity:.7;}
.fac-hero .fh-name{font-size:3.6rem; font-weight:700; letter-spacing:-0.06rem; line-height:1.15; text-shadow:0 2px 20px rgba(0,0,0,.3);}
.fac-desc{font-size:1.8rem; line-height:1.75; color:var(--ink-600); letter-spacing:-0.025rem; font-weight:400; text-wrap:pretty; word-break:keep-all; margin-bottom:36px; padding-left:18px; border-left:3px solid var(--brand);}
.fac-desc:empty{display:none;}
.fac-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
.fact-tile{background:var(--canvas); border:1px solid var(--gf-line); border-radius:16px; padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; transition:all .2s var(--ease);}
.fact-tile:hover{border-color:var(--brand-tint); background:var(--brand-mist);}
.fact-tile .ft-icon{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--gf-line); border-radius:12px; color:var(--brand); flex-shrink:0;}
.fact-tile:hover .ft-icon{background:var(--brand); border-color:var(--brand); color:#fff;}
.fact-tile .ft-icon svg{width:20px; height:20px;}
.fact-tile .ft-label{font-size: 1.5rem; font-family:'Paperlogy'; font-weight:600; color:var(--brand-deep); letter-spacing:0.04em;}
.fact-tile .ft-value{font-size:1.75rem; font-weight:600; color:var(--ink-900); letter-spacing:-0.03rem; line-height:1.45; word-break:keep-all; text-wrap:pretty;}
.fact-tile .ft-value .sub{display:block; font-size:1.5rem; font-weight:400; color:var(--ink-500); margin-top:6px; line-height:1.5;}
/* 미디어쿼리 시작 */
@media (max-width:1024px){
.fac-layout{grid-template-columns:1fr; gap:0; margin-bottom:64px;}
.fac-side{
position:static;
margin-bottom:28px;
width:100%;
max-width:100%;
overflow:hidden;
box-sizing:border-box;
}
.fac-side .side-title{display:none;}
.fac-side-nav{position:relative; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:none;}
.fac-side-nav::after {
content: "";
position: absolute;
top: 0px;
right: -10px;
bottom: 1px;
width: 48px;
background: linear-gradient(90deg, transparent, var(--surface, #fff) 80%);
pointer-events: none;
z-index: 10;
}
.fac-side-nav::-webkit-scrollbar{display:none;}
.fac-side-nav button{width:auto; white-space:nowrap; padding:12px 20px; border:1px solid var(--gf-line-strong); border-radius:10px; font-size:1.55rem;}
.fac-side-nav button .idx{display:none;}
.fac-hero{aspect-ratio:16/9; border-radius:16px;}
.fac-hero .fh-name{font-size:3.1rem;}
.fac-desc{font-size:1.75rem;}
}
@media (max-width:768px){
.fac-side-nav button{padding:11px 16px; font-size:1.5rem; border-radius:8px;}
.fac-hero{aspect-ratio:4/3; border-radius:14px; margin-bottom:22px;}
.fac-hero .fh-overlay{left:18px; right:18px; bottom:18px;}
.fac-hero .fh-name{font-size:2.5rem;}
.fac-desc{font-size:1.65rem; padding-left:14px; margin-bottom:24px;}
.fac-facts{grid-template-columns:1fr 1fr; gap:12px;}
.fact-tile{padding:18px 18px 20px; gap:10px;}
.fact-tile .ft-icon{width:40px; height:40px;}
.fact-tile .ft-value{font-size:1.6rem;}
.fact-tile .ft-value .sub{font-size:1.45rem;}
}
@media (max-width:500px){
.fac-facts{grid-template-columns:1fr;}
.fac-hero .fh-name{font-size:2.3rem;}
}
/* 미디어쿼리 끝 */
/* 시설 가이드 레이아웃 끝 */
/* 콘텐츠 카드 시작 */
.content-card{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border:1px solid var(--gf-line); border-radius:20px; overflow:hidden; background:var(--surface); margin-bottom:80px;}
.content-card .cc-image{position:relative; min-height:380px; background:var(--ink-100);}
.content-card .cc-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.content-card .cc-image .cc-badge{position:absolute; top:18px; left:18px; display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:rgba(255,255,255,0.94); backdrop-filter:blur(8px); color:var(--ink-900); font-size:1.4rem; font-weight:600; letter-spacing:-0.02rem; border-radius:999px;}
.content-card .cc-image .cc-badge::before{content:""; width:5px; height:5px; background:var(--brand); border-radius:50%;}
.content-card .cc-body{padding:40px 42px; display:flex; flex-direction:column;}
.content-card .cc-name{font-size:3rem; font-weight:700; color:var(--ink-900); letter-spacing:-0.05rem; line-height:1.2; padding-bottom:24px; margin-bottom:26px; border-bottom:1px solid var(--gf-line);}
.content-card .cc-info{display:flex; flex-direction:column; gap:20px;}
.content-card .cc-info > li{display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:start;}
.content-card .cc-info .k{position:relative; font-size:1.55rem; font-weight:600; color:var(--brand-deep); letter-spacing:-0.02rem; padding-left:14px;}
.content-card .cc-info .k::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; background:var(--brand); border-radius:50%;}
.content-card .cc-info .v{font-size:1.75rem; font-weight:500; color:var(--ink-900); letter-spacing:-0.025rem; line-height:1.55; word-break:keep-all; text-wrap:pretty;}
.content-card .cc-info .v .sub{display:block; font-size:1.5rem; font-weight:400; color:var(--ink-500); margin-top:6px;}
/* 미디어쿼리 시작 */
@media (max-width:1024px){
.content-card{grid-template-columns:1fr; margin-bottom:64px;}
.content-card .cc-image{min-height:0; aspect-ratio:16/10;}
.content-card .cc-body{padding:32px 30px;}
.content-card .cc-name{font-size:2.6rem; padding-bottom:20px; margin-bottom:22px;}
}
@media (max-width:768px){
.content-card{border-radius:14px;}
.content-card .cc-image{aspect-ratio:4/3;}
.content-card .cc-body{padding:26px 22px;}
.content-card .cc-name{font-size:2.3rem; padding-bottom:16px; margin-bottom:18px;}
.content-card .cc-info{gap:16px;}
.content-card .cc-info > li{grid-template-columns:90px 1fr; gap:10px;}
.content-card .cc-info .k{font-size:1.5rem; padding-left:12px;}
.content-card .cc-info .v{font-size:1.6rem;}
.content-card .cc-info .v .sub{font-size:1.45rem;}
}
/* 미디어쿼리 끝 */
/* 콘텐츠 카드 끝 */
/* 내용테이블 추가 */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--gf-line); border-radius: 18px; }
.gf-table { width: 100%; border-collapse: collapse; font-size: 1.6rem; min-width: 910px; }
.gf-table th { background: var(--ink-900); color: #fff; padding: 16px 10px 15px; text-align: center; font-weight: 500; font-family: 'Paperlogy'; font-size: 1.04em; vertical-align: middle; }
.gf-table td { padding: 16px 10px 15px; border-bottom: 1px solid var(--gf-line); text-align: center; color: var(--ink-700); vertical-align: middle; line-height: 1.4; }
.gf-table th[scope="row"] { background: var(--canvas); color: var(--ink-700); font-weight: 500; font-family: inherit; font-size: 1em; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--gf-line); width: 11%; }
.gf-table td.td-left { text-align: left; padding: 20px; }
.gf-table tr:hover td { background: var(--canvas); }
.gf-table td.bb_none, .gf-table th.bb_none { border-bottom: none; }
.gf-table .in_ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gf-table.gf-table--sm { min-width: 0; font-size: 1.8rem;}
.gf-table--sm th[scope="row"] { width: 11%; }
.gf-table--sm td { padding: 18px 16px; }
.gf-table--sm td.td-left { padding: 18px 20px; }
.gf-table--sm .tc-note { display: block; margin-top: 5px; }
.gf-table--sm .tc-red { display: block; margin-top: 5px; }
.gf-table--sm .route_ul { gap: 4px; }
.gf-table--sm .route_ul .route_time { margin-top: 8px; font-weight: 600; color: var(--ink-900); }
.tc-note { color: var(--ink-500); }
.tc-red { color: #c0392b; }
.fac-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.nearby-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--gf-line); border-radius: 50px; font-size: 1.7rem; color: var(--ink-700); text-decoration: none; transition: all 0.2s; }
.nearby-more-btn:hover { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.nearby-more-btn span{ font-family: 'Paperlogy'; }
.nearby-more-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
/* 미디어쿼리 시작 */
@media (max-width: 768px) {
.gf-table { font-size: 1.5rem; }
.gf-table th, .gf-table td { font-size: 1em; padding: 12px 10px 11px; }
.gf-table--sm{ font-size: 1.6rem; }
.gf-table--sm th[scope="row"] { width: 80px; }
.nearby-more-btn span{font-size:1.6rem;}
}
@media (max-width: 500px) {
.nearby-more-btn { width: 100%; justify-content: center; }
}
@media (max-width: 425px) {
.gf-table--sm { font-size: 1.5rem; }
.nearby-more-btn span{font-size:1.5rem;}
}
/* 미디어쿼리 끝 */
/* 내용테이블 끝 */
/* 정원·시설안내 끝*/
/* 만족도 조사 시작 */
.stf_box{
--gg-green:#00a651;
--gg-green-d:#00873f;
--gg-green-dd:#006e36;
--gg-tint:#e9f7ef;
--gg-tint-2:#f5fbf7;
--gg-ink:#19241d;
--gg-text:#33403a;
--gg-muted:#7c847f;
--gg-line:#e1e7e3;
--gg-radius:14px;
--gg-radius-sm:10px;
padding:32px 0 0 0;
font-size:16px;
line-height:1.5;
color:var(--gg-text);
-webkit-text-size-adjust:100%;
}
.stf_box *{box-sizing:border-box;}
/* ---------- 정보담당자 ---------- */
.stf_box .stf_t_box{
background:#fff;
border:1px solid var(--gg-line);
border-radius:var(--gg-radius);
padding:18px 24px;
}
.stf_box .stf_txt{
display:flex;align-items:center;flex-wrap:wrap;gap:10px 28px;
margin:0;
}
/* "정보담당자" 라벨 */
.stf_box .stf_txt > strong{
display:inline-flex;align-items:center;gap:8px;
font-size:15px;font-weight:700;color:var(--gg-green-d);
padding-right:18px;margin-right:4px;
border-right:1px solid var(--gg-line);
white-space:nowrap;
}
.stf_box .stf_txt > strong::before{
content:"";width:9px;height:9px;flex:0 0 auto;border-radius:50%;
background:var(--gg-green);
}
/* 각 항목 (부서/담당자/연락처) */
.stf_box .stf_txt > span{
display:inline-flex;align-items:baseline;gap:6px;
font-size:15px;color:var(--gg-muted);
}
.stf_box .stf_txt > span .m_hidden{font-weight:600;color:var(--gg-text);}
.stf_box .stf_txt > span em{font-style:normal;font-weight:600;color:var(--gg-ink);}
.stf_box .stf_txt > span a{display:inline-flex;align-items:center;gap:5px;color:var(--gg-green-d);text-decoration:none;font-weight:700;}
.stf_box .stf_txt > span a em{color:var(--gg-green-d);}
.stf_box .stf_txt > span a:hover{text-decoration:underline;}
/* ---------- 만족도 조사 ---------- */
.stf_box .stf_srchbox{
background:#fff;
border:1px solid var(--gg-line);
border-radius:var(--gg-radius);
padding:22px 24px;
margin-top:16px;
}
.stf_box .stf_srchbox fieldset{border:0;margin:0;padding:0;}
.stf_box .stf_srchbox legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.stf_box .blind{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.stf_box .stf_fix{
display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
}
.stf_box .stf_srchinner{flex:1 1 520px;min-width:0;}
.stf_box .stf_srchinner dl{margin:0;}
/* 질문 */
.stf_box .stf_srchinner dt{
font-size:16.5px;font-weight:700;color:var(--gg-ink);
margin-bottom:14px;word-break:keep-all;letter-spacing:-.01em;
}
/* 점수 라디오들을 한 줄(반응형 wrap)로 */
.stf_box .stf_srchinner dd{
display:inline-flex;margin:0 8px 8px 0;vertical-align:top;
}
.stf_box .stf_srchinner dd label{
display:inline-flex;align-items:center;gap:7px;
border:1.5px solid var(--gg-line);border-radius:999px;
padding:9px 16px 9px 13px;cursor:pointer;
font-size:15px;font-weight:600;color:var(--gg-text);
background:#fff;line-height:1;white-space:nowrap;
transition:border-color .14s ease,background .14s ease,color .14s ease;
}
/* 커스텀 라디오 점 */
.stf_box .stf_srchinner dd label input[type="radio"]{
appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
width:18px;height:18px;border-radius:50%;border:2px solid #cfd6d2;background:#fff;
display:grid;place-items:center;cursor:pointer;transition:border-color .14s ease;
}
.stf_box .stf_srchinner dd label input[type="radio"]::after{
content:"";width:8px;height:8px;border-radius:50%;background:var(--gg-green);
transform:scale(0);transition:transform .14s ease;
}
.stf_box .stf_srchinner dd label:hover{border-color:#a8d4bb;background:var(--gg-tint-2);}
/* 선택 상태 */
.stf_box .stf_srchinner dd label:has(input:checked){
border-color:var(--gg-green);background:var(--gg-tint);color:var(--gg-green-dd);
}
.stf_box .stf_srchinner dd label:has(input:checked) input[type="radio"]{border-color:var(--gg-green);}
.stf_box .stf_srchinner dd label:has(input:checked) input[type="radio"]::after{transform:scale(1);}
.stf_box .stf_srchinner dd label:focus-within{box-shadow:0 0 0 3px rgba(0,166,81,.20);}
/* 의견 입력 — 다음 줄 전체폭 */
.stf_box .stf_srchinner dd.user_comt{display:flex;width:100%;margin:6px 0 0;}
.stf_box .stf_srchinner dd.user_comt input[type="text"]{
flex:1;width:100%;height:46px;
border:1.5px solid var(--gg-line);border-radius:var(--gg-radius-sm);
padding:0 16px;font-size:15px;color:var(--gg-ink);background:#fff;
transition:border-color .14s ease,box-shadow .14s ease;
}
.stf_box .stf_srchinner dd.user_comt input[type="text"]::placeholder{color:#aab2ad;}
.stf_box .stf_srchinner dd.user_comt input[type="text"]:focus{
outline:0;border-color:var(--gg-green);box-shadow:0 0 0 3px rgba(0,166,81,.16);
}
/* 평가하기 버튼 */
.stf_box .srf_btn{
flex:0 0 auto;min-width:132px;height:48px;
border:0;border-radius:var(--gg-radius-sm);cursor:pointer;
background:var(--gg-green);color:#fff;
font-size:16px;font-weight:700;font-family:inherit;letter-spacing:-.01em;
transition:background .14s ease,transform .06s ease;
}
.stf_box .srf_btn:hover{background:var(--gg-green-d);}
.stf_box .srf_btn:active{background:var(--gg-green-dd);transform:translateY(1px);}
.stf_box .srf_btn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(0,166,81,.24);}
/* 미디어쿼리 시작 */
@media (max-width:768px){
.stf_box{padding:24px 0 0;}
.stf_box .stf_t_box{padding:16px 18px;}
.stf_box .stf_txt{gap:4px 18px;}
.stf_box .stf_txt > strong{width:100%;border-right:0;border-bottom:1px solid var(--gg-line);padding:0 0 8px;margin-bottom:8px;}
.stf_box .stf_srchbox{padding:18px 16px;}
.stf_box .stf_fix{flex-direction:column;align-items:stretch;gap:14px;}
.stf_box .srf_btn{width:100%;}
}
@media (max-width:560px){
.stf_box .stf_srchinner dd{display:flex;width:100%;margin:0 0 8px;}
.stf_box .stf_srchinner dd label{width:100%;}
}
/* 미디어쿼리 끝 */
/* 만족도 조사 끝 */
/* 행사캘린더 시작 */
.tcal {
/* foreground */
--fg-1: #171719;
--fg-2: rgba(112, 115, 124, 0.88);
--fg-3: rgba(112, 115, 124, 0.61);
--fg-4: rgba(112, 115, 124, 0.28);
--fg-on-color: #ffffff;
/* background */
--bg-base: #ffffff;
--bg-subtle: rgba(112, 115, 124, 0.05);
/* border */
--border-subtle: rgba(112, 115, 124, 0.08);
--border-default: rgba(112, 115, 124, 0.16);
--border-strong: rgba(112, 115, 124, 0.22);
/* neutral */
--neutral-50: #F7F8F9;
--neutral-900: #191F28;
/* radius */
--radius-8: 0.8rem;
--radius-10: 1.0rem;
--radius-12: 1.2rem;
--radius-16: 1.6rem;
--radius-20: 2.0rem;
--radius-24: 2.4rem;
--radius-pill: 9999px;
/* shadow */
--shadow-1: 0 1px 2px rgba(46, 49, 55, 0.04), 0 1px 3px rgba(46, 49, 55, 0.04);
--shadow-4: 0 12px 32px rgba(46, 49, 55, 0.08), 0 24px 64px rgba(46, 49, 55, 0.10);
/* motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* weight */
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* 브랜드 (딥 포레스트 그린) */
--brand: #1b6b4c;
--brand-deep: #145a40;
--brand-deepest: #0f4631;
--brand-50: #eef6f1;
--brand-rgb: 27, 107, 76;
/* 분류 색상 */
--c-festival-bg: #fbe9e7; --c-festival-fg: #cf4b3e;
--c-event-bg: #e6eef9; --c-event-fg: #3d6cb8;
--c-edu-bg: #e0f0f1; --c-edu-fg: #128383;
--c-exp-bg: #ece6f6; --c-exp-fg: #7b5ba6;
--c-promo-bg: #fcefd8; --c-promo-fg: #c2780f;
--sun: #d85a52;
--sat: #3d6cb8;
}
/* ---------- reset within content ---------- */
.tcal * { box-sizing: border-box; }
.tcal {
font-family: var(--font-sans);
color: var(--fg-1);
font-size: 1.7rem;
line-height: 1.55;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
word-break: keep-all;
}
.tcal button { font-family: inherit; cursor: pointer; background: none; }
.tcal button.btn-reset { border: 1.5px solid rgba(112, 115, 124, 0.4) !important; }
.tcal button.btn-reset:hover { border-color: rgba(112, 115, 124, 0.7) !important; }
.tcal button.btn-search-main { border: 1.5px solid var(--brand) !important; }
.tcal button.btn-search-main:hover { border-color: var(--brand-deep) !important; }
.tcal button.btn-search-main:active { border-color: var(--brand-deepest) !important; }
.tcal a { color: inherit; text-decoration: none; }
.tcal table { border-collapse: collapse; width: 100%; }
/* ============== con_top : 제목 + 유틸 ============== */
.tcal .con_top {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2.4rem; padding-bottom: 2.6rem; margin-bottom: 3rem;
border-bottom: 1px solid var(--border-default);
}
.tcal .con_top .main_title {
font-size: 3.4rem; font-weight: var(--weight-bold); letter-spacing: -0.027em; line-height: 1.2; color: var(--fg-1);
white-space: nowrap;
}
.tcal .util-buttons { display: flex; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.tcal .util-buttons button {
width: 4.8rem; height: 4.8rem; border-radius: var(--radius-12);
border: 1px solid var(--border-default); background: var(--bg-base); color: var(--fg-3);
display: flex; align-items: center; justify-content: center;
transition: all var(--dur-fast) var(--ease);
}
.tcal .util-buttons button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.tcal .util-buttons svg { width: 2.2rem; height: 2.2rem; }
/* ============== 검색 카드 ============== */
.search-card {
border: 1px solid var(--border-default); border-radius: var(--radius-16);
background: var(--bg-base); box-shadow: var(--shadow-1);
padding: .4rem 2.8rem 2.4rem; margin-bottom: 2.4rem;
}
.search-card .sc-head { display: flex; align-items: center; gap: .9rem; padding: 2rem 0 .4rem; }
.search-card .sc-head h4 { font-size: 2rem; font-weight: var(--weight-bold); letter-spacing: -0.018em; white-space: nowrap; }
.search-card .sc-head .sc-ico { width: 2.2rem; height: 2.2rem; color: var(--brand); display: inline-flex; }
.tcal input[type="text"], .tcal input[type="date"] {
height: 5rem; border: 1px solid var(--border-default); border-radius: var(--radius-10); background: var(--bg-base);
padding: 0 1.5rem; font-size: 1.7rem; color: var(--fg-1); width: 100%; font-family: inherit;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tcal input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.18); }
.sc-row { display: flex; align-items: center; gap: 1.8rem; padding: 1.6rem 0; border-top: 1px solid var(--border-subtle); }
.sc-label { flex: 0 0 5.4rem; font-size: 1.7rem; font-weight: var(--weight-semibold); color: var(--fg-2); }
.sc-chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.tcal .cat-chip {
display: inline-flex; align-items: center; height: 4.2rem; padding: 0 1.8rem;
border: 1.5px solid transparent; border-radius: var(--radius-8); background: var(--bg-subtle);
font-size: 1.7rem; font-weight: var(--weight-semibold); color: var(--fg-2);
transition: all var(--dur-fast) var(--ease); white-space: nowrap;
}
.tcal .cat-chip:hover { filter: brightness(0.96); }
.tcal .cat-chip[data-cat=""].is-on { background: var(--brand); color: var(--fg-on-color); border-color: var(--brand); }
.tcal .cat-chip.cat-festival.is-on { background: var(--c-festival-fg); color: #fff; border-color: var(--c-festival-fg); }
.tcal .cat-chip.cat-event.is-on { background: var(--c-event-fg); color: #fff; border-color: var(--c-event-fg); }
.tcal .cat-chip.cat-edu.is-on { background: var(--c-edu-fg); color: #fff; border-color: var(--c-edu-fg); }
.tcal .cat-chip.cat-exp.is-on { background: var(--c-exp-fg); color: #fff; border-color: var(--c-exp-fg); }
.tcal .cat-chip.cat-promo.is-on { background: var(--c-promo-fg); color: #fff; border-color: var(--c-promo-fg); }
.tcal .cat-chip.is-on { filter: none; }
.sc-row-fields { flex-wrap: wrap; gap: 1.4rem 2.8rem; }
.sc-field { display: flex; align-items: center; gap: 1.4rem; min-width: 0; }
.sc-field-kw { flex: 1 1 32rem; }
.sc-field-kw input { flex: 1; }
.sc-dates { display: flex; align-items: center; gap: .9rem; }
.sc-dates .sep { color: var(--fg-3); font-weight: 500; }
.sc-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--border-subtle); }
.btn-reset {
height: 5rem; padding: 0 2.2rem; border-radius: var(--radius-10);
border: 1.5px solid var(--border-strong); background: var(--bg-base);
font-size: 1.7rem; font-weight: var(--weight-semibold); color: var(--fg-2); display: inline-flex; align-items: center; gap: .7rem;
transition: all var(--dur-fast) var(--ease);
}
.btn-reset:hover { background: var(--bg-subtle); color: var(--fg-1); border-color: var(--fg-3); }
.btn-reset svg { width: 1.8rem; height: 1.8rem; }
.tcal button.btn-search-main {
height: 5rem; padding: 0 3rem; border-radius: var(--radius-10);
background: var(--brand); color: var(--fg-on-color); border: 1.5px solid var(--brand);
font-size: 1.8rem; font-weight: var(--weight-bold); display: inline-flex; align-items: center; gap: .8rem;
transition: all var(--dur-fast) var(--ease);
}
.tcal button.btn-search-main:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.tcal button.btn-search-main:active { background: var(--brand-deepest); border-color: var(--brand-deepest); }
.tcal button.btn-search-main .bs-ico { width: 1.9rem; height: 1.9rem; display: inline-flex; }
.tcal button.btn-search-main .bs-ico svg { width: 1.9rem; height: 1.9rem; }
/* ============== 툴바 : 뷰 토글 + 범례 ============== */
.cal-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 1.6rem; margin-bottom: 1.4rem; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; list-style: none; margin: 0; padding: 0; }
.cal-legend li { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.55rem; font-weight: var(--weight-medium); color: var(--fg-2); }
.cal-legend .lg-dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--cat-fg); flex: 0 0 auto; }
#calendarView.is-hidden ~ * .cal-legend,
#listView:not(.is-hidden) ~ .cal-toolbar .cal-legend { display: none; }
.cal-toolbar:has(+ #listView:not(.is-hidden)) .cal-legend { display: none; }
.tcal:has(#listView:not(.is-hidden)) .cal-legend { display: none; }
.tcal:has(#listView:not(.is-hidden)) .cal-toolbar { justify-content: flex-end; }
.view-toggle {
display: inline-flex; gap: .4rem; padding: .5rem; background: var(--bg-subtle);
border: 1px solid var(--border-subtle); border-radius: var(--radius-12);
}
.view-toggle button {
display: inline-flex; align-items: center; gap: .8rem; height: 4.4rem; padding: 0 2.2rem;
border-radius: var(--radius-8); font-size: 1.7rem; font-weight: var(--weight-semibold); color: var(--fg-3);
transition: all var(--dur-fast) var(--ease);
}
.view-toggle button svg { width: 2rem; height: 2rem; }
.view-toggle button:hover { color: var(--fg-1); }
.view-toggle button.is-active {
background: var(--brand); color: var(--fg-on-color); box-shadow: 0 .2rem .8rem rgba(var(--brand-rgb), 0.24);
}
/* ============== 달력 보기 ============== */
.cal-head {
display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
padding: 1.8rem 2rem; border-bottom: 1px solid var(--border-subtle); background: var(--bg-base);
}
.cal-head-nav { display: flex; align-items: center; gap: 1.2rem; }
.cal-head-nav h3 { font-size: 2.4rem; font-weight: var(--weight-bold); letter-spacing: -0.022em; min-width: 13rem; text-align: center; color: var(--fg-1); }
.tcal .nav-arrow {
width: 4.4rem; height: 4.4rem; border-radius: var(--radius-pill); border: 1px solid var(--border-default);
background: var(--bg-base); color: var(--fg-2); display: flex; align-items: center; justify-content: center;
transition: all var(--dur-fast) var(--ease);
}
.tcal .nav-arrow:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.tcal .nav-arrow svg { width: 2.1rem; height: 2.1rem; }
.btn-today {
height: 4.2rem; padding: 0 1.8rem; border-radius: var(--radius-10); border: 1px solid var(--border-default);
background: var(--bg-base); font-size: 1.6rem; font-weight: var(--weight-semibold); color: var(--fg-2);
display: inline-flex; align-items: center; gap: .7rem; transition: all var(--dur-fast) var(--ease); white-space: nowrap;
}
.btn-today:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.btn-today svg { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
.cal-grid-wrap {
border: 1px solid var(--border-default); border-radius: var(--radius-16);
overflow: hidden; background: var(--bg-base); box-shadow: var(--shadow-1);
}
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); }
.cal-weekdays .wd {
padding: 1.5rem 0; text-align: center; font-size: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--fg-2);
}
.cal-weekdays .wd.sun { color: var(--sun); }
.cal-weekdays .wd.sat { color: var(--sat); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
min-height: 13.6rem; min-width: 0; padding: 1rem .9rem 1.2rem; border-right: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
display: flex; flex-direction: column; gap: .6rem; position: relative; background: var(--bg-base);
transition: background var(--dur-fast) var(--ease);
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.is-other { background: var(--neutral-50); }
.cal-cell.is-other .cell-date { color: var(--fg-4); }
.cal-cell.is-today { background: var(--brand-50); }
.cell-date {
align-self: flex-end; font-size: 1.7rem; font-weight: var(--weight-medium); color: var(--fg-2); line-height: 1;
min-width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-pill);
}
.cal-cell.dow-0 .cell-date { color: var(--sun); }
.cal-cell.dow-6 .cell-date { color: var(--sat); }
.cal-cell.is-today .cell-date { background: var(--brand); color: var(--fg-on-color) !important; font-weight: var(--weight-bold); }
.cell-events { display: flex; flex-direction: column; gap: .4rem; overflow: hidden; min-width: 0; }
.evt {
display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0; text-align: left;
padding: .5rem .9rem; border-radius: var(--radius-8); background: var(--cat-bg);
transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.evt:hover { filter: brightness(0.96); transform: translateX(1px); }
.evt-dot { display: none; flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 50%; background: var(--cat-fg); }
.evt-badge { flex: 0 0 auto; font-size: 1.4rem; font-weight: var(--weight-bold); line-height: 1; color: var(--cat-fg); letter-spacing: -0.01em; white-space: nowrap; }
.evt-tit { flex: 1; min-width: 0; font-size: 1.55rem; font-weight: var(--weight-medium); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-more { font-size: 1.45rem; font-weight: var(--weight-semibold); color: var(--fg-3); padding: .2rem .6rem; }
.cell-more:hover { color: var(--brand); }
@keyframes todayFlash {
0%, 100% { background-color: transparent; box-shadow: inset 0 0 0 0 rgba(var(--brand-rgb), 0); }
30% { background-color: rgba(var(--brand-rgb), 0.12); box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), 0.40); }
}
.cal-cell.flash-today { animation: todayFlash .9s var(--ease) 2; }
/* category color vars */
.tcal .cat-festival { --cat-bg: var(--c-festival-bg); --cat-fg: var(--c-festival-fg); }
.tcal .cat-event { --cat-bg: var(--c-event-bg); --cat-fg: var(--c-event-fg); }
.tcal .cat-edu { --cat-bg: var(--c-edu-bg); --cat-fg: var(--c-edu-fg); }
.tcal .cat-exp { --cat-bg: var(--c-exp-bg); --cat-fg: var(--c-exp-fg); }
.tcal .cat-promo { --cat-bg: var(--c-promo-bg); --cat-fg: var(--c-promo-fg); }
/* badge */
.tcal .badge {
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1; padding: .7rem 1.2rem; border-radius: var(--radius-8); letter-spacing: -0.01em;
white-space: nowrap; background: var(--cat-bg); color: var(--cat-fg);
}
/* 모바일 날짜 상세 패널 */
.day-panel { display: none; margin-top: 1.8rem; border: 1px solid var(--border-default); border-radius: var(--radius-16); overflow: hidden; }
.day-panel .dp-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.8rem; background: var(--brand); color: var(--fg-on-color); }
.day-panel .dp-head .dp-date { font-size: 1.7rem; font-family: 'Paperlogy'; font-weight: 600; padding-top: 1px; }
.day-panel .dp-head button { color: var(--fg-on-color); width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; }
.day-panel .dp-head svg { width: 2.1rem; height: 2.1rem; }
.day-panel .dp-body { padding: .8rem; background: var(--bg-base); }
.day-panel .dp-empty { padding: 2.8rem 1.6rem; text-align: center; color: var(--fg-3); font-size: 1.7rem; }
.dp-item { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; padding: 1.4rem 1.2rem; border-radius: var(--radius-12); transition: background var(--dur-fast) var(--ease); }
.dp-item:hover { background: var(--bg-subtle); }
.dp-item + .dp-item { border-top: 1px solid var(--border-subtle); }
.dp-item .dp-tit { font-size: 1.7rem; font-weight: var(--weight-semibold); color: var(--fg-1); flex: 1; min-width: 0; display: block; }
.dp-item .dp-meta { font-size: 1.45rem; color: var(--fg-3); margin-top: .3rem; display: block; }
/* ============== 리스트 보기 ============== */
.tcal .list-count { font-size: 1.7rem; color: var(--fg-2); margin-bottom: 1.4rem; font-weight: var(--weight-medium); }
.tcal .list-count strong { color: var(--brand-deep); font-weight: var(--weight-bold); }
.tcal .list-count .dot { color: var(--brand); margin-right: .6rem; }
.list-table-wrap { border-top: 2px solid var(--brand); border-bottom: 1px solid var(--border-default); }
.list-table { table-layout: fixed; }
.list-table thead th { padding: 1.9rem 1.4rem; font-size: 1.75rem; font-weight: var(--weight-semibold); color: var(--fg-1); text-align: center; background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.list-table tbody td { padding: 1.9rem 1.4rem; font-size: 1.7rem; color: var(--fg-2); text-align: center; border-bottom: 1px solid var(--border-subtle); font-weight: 400; line-height: 1.4; }
.list-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.list-table tbody tr:hover { background: var(--brand-50); }
.list-table .col-no { width: 7.2rem; color: var(--fg-3); }
.list-table .col-cat { width: 9.6rem; }
.list-table .col-title { text-align: left; }
.list-table .col-period { width: 24rem; }
.list-table .col-place { width: 17rem; }
.list-table .col-tel { width: 17rem; }
.list-title-btn {
width:100%; font-size: 1.75rem; font-weight: var(--weight-medium); color: var(--fg-1); text-align: left; line-height: 1.4;
display: inline-flex; align-items: center; gap: .7rem; transition: color var(--dur-fast) var(--ease); word-break: keep-all;
}
.list-title-btn:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.list-title-btn .title_program{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 25px);}
.list-title-btn .arr { width: 1.6rem; height: 1.6rem; opacity: 0; transform: translateX(-3px); transition: all var(--dur-fast) var(--ease); color: var(--brand); }
.list-title-btn:hover .arr { opacity: 1; transform: translateX(0); }
/* 모바일 카드 (리스트) */
.list-cards { display: none; }
.lc { border: 1px solid var(--border-default); border-radius: var(--radius-16); padding: 1.6rem 1.6rem .6rem; margin-bottom: 1.2rem; background: var(--bg-base); }
.lc-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.lc-title { flex: 1; min-width: 0; font-size: 1.8rem; font-weight: var(--weight-bold); color: var(--fg-1); word-break: break-all; line-height: 1.35; text-align: left; }
.lc-row { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border-subtle); font-size: 1.6rem; }
.lc-row .lc-k { flex: 0 0 6.6rem; color: var(--fg-3); font-weight: var(--weight-semibold); }
.lc-row .lc-v { flex: 1; color: var(--fg-2); }
/* 페이지네이션 */
.tcal .pager { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: 3.4rem; }
.tcal .pager button {
min-width: 4.2rem; height: 4.2rem; padding: 0 .6rem; border-radius: var(--radius-10); border: 1px solid var(--border-default);
background: var(--bg-base); font-size: 1.7rem; font-weight: var(--weight-semibold); color: var(--fg-2);
display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease);
}
.tcal .pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.tcal .pager button.is-active { background: var(--brand); border-color: var(--brand); color: var(--fg-on-color); }
.tcal .pager button:disabled { opacity: .4; cursor: default; }
.tcal .pager button svg { width: 1.8rem; height: 1.8rem; }
/* ============== 상세 모달 ============== */
.modal-overlay {
position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
padding: 2.4rem; background: rgba(13, 15, 18, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal {
width: 100%; max-width: 76rem; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;
background: var(--bg-base); border-radius: var(--radius-24); box-shadow: var(--shadow-4);
transform: translateY(8px) scale(.99); opacity: 0; transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal-head { display: flex; align-items: end; gap: 1.4rem; padding: 2.6rem 2.8rem 2.2rem; border-bottom: 1px solid var(--border-subtle); }
.modal-head .m-badge-tit { display: flex; align-items: flex-start; gap: 1.2rem; flex: 1; min-width: 0; }
.modal-head h3 { font-size: 2.4rem; font-weight: var(--weight-bold); letter-spacing: -0.023em; line-height: 1.3; color: var(--fg-1); }
.modal-close {
flex: 0 0 auto; width: 4.4rem; height: 4.4rem; border-radius: var(--radius-12); color: var(--fg-3);
display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease);
}
.modal-close:hover { background: var(--bg-subtle); color: var(--fg-1); }
.modal-close svg { width: 2.5rem; height: 2.5rem; }
.modal-body { padding: 2.4rem 2.8rem 2.8rem; overflow-y: auto; }
.tcal .detail-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-12); overflow: hidden; margin-bottom: 2.2rem; }
.tcal .detail-grid .dt { background: var(--bg-subtle); padding: 1.5rem 1.8rem; font-size: 1.65rem; font-weight: var(--weight-semibold); color: var(--fg-2); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: .8rem; border-right: 1px solid var(--border-subtle); }
.tcal .detail-grid .dt svg { width: 1.8rem; height: 1.8rem; color: var(--brand); flex: 0 0 auto; }
.tcal .detail-grid .dd { padding: 1.6rem 1.8rem; font-size: 1.7rem; color: var(--fg-1); border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); word-break: break-word; line-height: 1.4; }
.tcal .detail-grid .dd:nth-child(4n) { border-right: 0; }
.tcal .detail-grid > :nth-last-child(-n+4) { border-bottom: 0; }
.tcal .detail-grid .dd a { color: var(--brand-deep); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
.detail-summary h4 { font-size: 1.8rem; font-weight: var(--weight-bold); color: var(--fg-1); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .8rem; }
.detail-summary h4::before { content: ''; width: .4rem; height: 1.7rem; border-radius: 2px; background: var(--brand); display: inline-block; }
.detail-summary .ds-body { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-12); padding: 1.8rem 2rem; font-size: 1.7rem; color: var(--fg-2); white-space: pre-line; line-height: 1.4; }
.modal-foot { padding: 2.6rem 2.8rem 2.6rem; display: flex; gap: 1rem; justify-content: flex-end; border-top: 1px #f4f4f5 solid; }
.btn-modal { height: 5rem; padding: 0 2.4rem; border-radius: var(--radius-10); font-size: 1.7rem; font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: .8rem; transition: all var(--dur-fast) var(--ease); }
.btn-modal.ghost { border: 1px solid var(--border-default); color: var(--fg-2); background: var(--bg-base); }
.btn-modal.ghost:hover { background: var(--bg-subtle); color: var(--fg-1); }
.btn-modal.primary { background: var(--brand); color: var(--fg-on-color); }
.btn-modal.primary:hover { background: var(--brand-deep); }
.btn-modal svg { width: 1.9rem; height: 1.9rem; }
/* toast */
.toast {
position: fixed; left: 50%; bottom: 4rem; transform: translateX(-50%) translateY(20px);
background: var(--neutral-900); color: #fff; padding: 1.4rem 2.2rem; border-radius: var(--radius-12); font-size: 1.5rem; font-weight: var(--weight-medium);
box-shadow: var(--shadow-4); opacity: 0; visibility: hidden; transition: all var(--dur-base) var(--ease); z-index: 3000;
}
.toast.is-show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* .is-hidden — .tcal 스코프로 제한 (전역 충돌 방지) */
.tcal .is-hidden { display: none !important; }
/* modal/toast는 .tcal 밖에 있으므로 별도 처리 */
.modal-overlay.is-hidden, .toast.is-hidden { display: none !important; }
/* ===================== 반응형 (리스트/달력 수습 버전) ===================== */
/* [1] 데스크톱 ~ 대형 태블릿 (1280px 이하) */
@media (max-width: 1280px) {
.tcal { font-size: 1.6rem; }
.tcal .con_top .main_title { font-size: 3rem; }
.cal-head-nav h3 { font-size: 2.2rem; }
.cal-weekdays .wd { font-size: 1.6rem; }
.evt-tit { font-size: 1.45rem; }
.list-table .col-period { width: 22rem; }
.list-table .col-place { width: 14rem; }
.list-table .col-tel { width: 14rem; }
}
/* [2] 태블릿 구간 (1024px 이하) */
@media (max-width: 1024px) {
/* 공통 */
.tcal { font-size: 1.65rem; }
.tcal .con_top .main_title { font-size: 2.8rem; }
.search-card .sc-head h4 { font-size: 1.9rem; }
.cal-head-nav h3 { font-size: 2.1rem; }
.cal-weekdays .wd { font-size: 1.6rem; }
.tcal .badge { font-size: 1.4rem; padding: .6rem 1rem; }
/* [CASE A] 리스트 뷰 스타일 */
.tcal:has(#listView:not(.is-hidden)) .list-table { table-layout: fixed; }
.tcal:has(#listView:not(.is-hidden)) .list-table thead th { font-size: 1.7rem; padding: 1.6rem 1rem; }
.tcal:has(#listView:not(.is-hidden)) .list-table tbody td { font-size: 1.65rem; padding: 1.6rem 1rem; }
.tcal:has(#listView:not(.is-hidden)) .list-title-btn { font-size: 1.7rem; }
.tcal:has(#listView:not(.is-hidden)) .list-count { font-size: 1.65rem; }
.tcal:has(#listView:not(.is-hidden)) .list-table .col-no { display:none; width: 6rem; }
.tcal:has(#listView:not(.is-hidden)) .list-table .col-cat { width: 9.6rem; }
.tcal:has(#listView:not(.is-hidden)) .list-table .col-period { width: 15rem; }
.tcal:has(#listView:not(.is-hidden)) .list-table .col-place { width: 15rem; }
.tcal:has(#listView:not(.is-hidden)) .list-table .col-tel { display: none; }
/* [CASE B] 달력 뷰 스타일 */
.tcal:has(#calendarView:not(.is-hidden)) .cal-cell { min-height: 11rem; padding: .5rem .3rem; }
.tcal:has(#calendarView:not(.is-hidden)) .evt { flex-direction: column; align-items: flex-start; gap: .2rem; padding: 0.8rem 1rem; background: var(--cat-bg); }
.tcal:has(#calendarView:not(.is-hidden)) .evt-tit { white-space: normal; word-break: break-all; font-size: 1.35rem; line-height: 1.2; }
.tcal:has(#calendarView:not(.is-hidden)) .evt-badge { font-size: 1.2rem; line-height: 1; }
}
/* [3] 모바일 구간 (768px 이하) */
@media (max-width: 768px) {
.tcal { font-size: 1.5rem; }
.tcal .con_top .main_title { font-size: 2.2rem; padding-bottom: 1.5rem; }
.search-card { padding: .4rem 1.8rem 1.8rem; }
.search-card .sc-head h4 { font-size: 1.7rem; }
.sc-label { font-size: 1.5rem; }
.tcal input[type="text"], .tcal input[type="date"],
.tcal .cat-chip, .btn-reset, .tcal button.btn-search-main { font-size: 1.5rem; height: 4.6rem; }
.tcal .cat-chip { padding: 0 1.4rem; }
.tcal button.btn-search-main { font-size: 1.6rem; }
.cal-head { padding: 1.4rem 1.4rem; flex-wrap: wrap; }
.cal-head-nav { gap: 1rem; }
.cal-head-nav h3 { font-size: 1.9rem; min-width: 11rem; }
.tcal .nav-arrow { width: 4rem; height: 4rem; }
.btn-today { height: 3.8rem; padding: 0 1.4rem; font-size: 1.45rem; }
/* ====== ★ 모바일 달력 그리드 우선순위 수습 ====== */
.cal-weekdays .wd { font-size: 1.5rem; padding: 1.1rem 0; }
.cal-weekdays .wd > span { display: none; }
.tcal:has(#calendarView:not(.is-hidden)) .cal-cell { min-height: 6.4rem !important; padding: .7rem .5rem .8rem !important; cursor: pointer; }
.cell-date { font-size: 1.45rem; min-width: 2.4rem; height: 2.4rem; }
.cell-events { flex-direction: row; flex-wrap: wrap; gap: .4rem; align-items: center; padding-left: 1px; }
.tcal:has(#calendarView:not(.is-hidden)) .evt { width: auto !important; padding: 0 !important; background: none !important; pointer-events: none; flex-direction: row !important; }
.tcal:has(#calendarView:not(.is-hidden)) .evt-dot { display: block !important; width: .8rem; height: .8rem; }
.tcal:has(#calendarView:not(.is-hidden)) .evt-badge,
.tcal:has(#calendarView:not(.is-hidden)) .evt-tit { display: none !important; }
.list-title-btn .title_program{max-width:100%; font-weight:600;}
.cell-more { display: none !important; }
.cal-cell.is-selected { background: var(--brand-50); box-shadow: inset 0 0 0 2px var(--brand); }
.cal-toolbar { flex-wrap: wrap; justify-content: end; gap: 1.5rem; }
.cal-legend { width: 100%; order: 2; padding: 0 .5rem; }
.day-panel { display: block; }
.day-panel .dp-head .dp-date { font-size: 1.6rem; }
.day-panel .dp-empty { font-size: 1.55rem; padding: 2.4rem 1.6rem; }
.dp-item .dp-tit { font-size: 1.6rem; }
.dp-item .dp-meta { font-size: 1.4rem; }
.list-table-wrap { display: none; }
.list-cards { display: block; }
.lc-title { font-size: 1.7rem; }
.lc-row { font-size: 1.45rem; padding: .8rem 0; }
.lc-row .lc-k { flex: 0 0 6.6rem; }
.view-toggle button { padding: 0 1.5rem; font-size: 1.5rem; height: 4rem; }
.tcal .list-count { font-size: 1.55rem; }
.sc-row { flex-direction: column; align-items: stretch; gap: 1rem; }
.sc-label { flex: none; }
.sc-field { flex-direction: column; align-items: stretch; gap: .8rem; width: 100%; }
.sc-dates { gap: .8rem; }
.sc-dates input { flex: 1; min-width: 0; }
.sc-actions { gap: .8rem; margin-top: 1.4rem; padding-top: 1.4rem; }
.sc-field-kw { flex: auto; }
.sc-field-kw input { flex: auto; }
.tcal button.btn-reset, .tcal button.btn-search-main { flex: 1; justify-content: center; padding: 0 1.6rem; }
.tcal .info-bar { padding: 1.8rem; font-size: 1.45rem; gap: .6rem; }
.modal { max-width: none; border-radius: var(--radius-20); max-height: 92vh; }
.modal-head { padding: 2rem 2rem 1.6rem; }
.modal-head h3 { font-size: 1.9rem; }
.modal-body { padding: 1.8rem 2rem 2.2rem; }
.tcal .detail-grid { grid-template-columns: auto 1fr; }
.tcal .detail-grid .dt { font-size: 1.45rem; padding: 1.2rem 1.4rem; gap: .4rem; }
.tcal .detail-grid .dd { font-size: 1.5rem; padding: 1.2rem 1.4rem; }
.tcal .detail-grid .dd:nth-child(4n) { border-right: 1px solid var(--border-subtle); }
.tcal .detail-grid .dd { border-right: 0; }
.tcal .detail-grid > :nth-last-child(-n+4) { border-bottom: 1px solid var(--border-subtle); }
.tcal .detail-grid > :nth-last-child(-n+2) { border-bottom: 0; }
.detail-summary h4 { font-size: 1.6rem; }
.detail-summary .ds-body { font-size: 1.5rem; padding: 1.4rem 1.6rem; }
.modal-foot { padding: 2rem; }
.tcal .pager button { min-width: 3.8rem; height: 3.8rem; font-size: 1.5rem; }
}
/* [4] 스마트폰 소형 화면 (425px 이하) */
@media (max-width: 425px) {
.cal-weekdays .wd { font-size: 1.4rem; }
.view-toggle { width: 100%; }
.view-toggle button { flex: 1; justify-content: center; }
.cal-toolbar { flex-direction: column; align-items: stretch; gap: 1rem; }
.cal-legend { gap: .3rem 1rem; }
.cal-legend li { font-size: 1.5rem; }
.modal-foot { flex-direction: column-reverse; }
.btn-modal { width: 100%; justify-content: center; font-size: 1.55rem; height: 4.6rem; }
.btn-today { display: none; }
}
/* [5] 스마트폰 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
.sc-dates { flex-wrap: wrap; }
.sc-dates input { flex: none; width: calc(100% - 30px) !important; }
}
/* [6] 애니메이션 최소화 표준 정의 */
@media (prefers-reduced-motion: reduce) {
.tcal * { transition: none !important; animation: none !important; }
}
/* [7] 인쇄 스타일 */
@media print {
.cal-toolbar, .tcal .util-buttons, .btn-today, .tcal .nav-arrow,
.search-card, .tcal .pager, .modal-overlay, .toast { display: none !important; }
.cal-cell { min-height: 9rem; }
}
/* 행사캘린더 끝 */
/* 프로그램 안내 시작 */
.tguide {
--tg-brand: #1b6b4c;
--tg-brand-deep: #145a40;
--tg-brand-50: #eef6f1;
--tg-brand-100: #d7ebe0;
--tg-brand-bright: #38a05f;
--tg-brand-rgb: 27,107,76;
--tg-c-festival-bg:#fbe9e7; --tg-c-festival-fg:#cf4b3e;
--tg-c-event-bg: #e6eef9; --tg-c-event-fg: #3d6cb8;
--tg-c-edu-bg: #e0f0f1; --tg-c-edu-fg: #128383;
--tg-c-exp-bg: #ece6f6; --tg-c-exp-fg: #7b5ba6;
--tg-c-promo-bg: #fcefd8; --tg-c-promo-fg: #c2780f;
--tg-fg1: #171719;
--tg-fg2: rgba(112,115,124,0.88);
--tg-fg3: rgba(112,115,124,0.61);
--tg-fg-on: #ffffff;
--tg-bg: #ffffff;
--tg-bg-sub: rgba(112,115,124,0.05);
--tg-bd: rgba(112,115,124,0.16);
--tg-bd-sub: rgba(112,115,124,0.08);
--tg-bd-str: rgba(112,115,124,0.22);
--tg-neutral-200: #E5E8EB;
--tg-neutral-600: #6B7684;
--tg-neutral-700: #4E5968;
--tg-neutral-900: #191F28;
--tg-r6: 0.6rem;
--tg-r8: 0.8rem;
--tg-r10: 1.0rem;
--tg-r12: 1.2rem;
--tg-r16: 1.6rem;
--tg-r20: 2.0rem;
--tg-r24: 2.4rem;
--tg-rpill: 9999px;
--tg-sh1: 0 1px 2px rgba(46,49,55,0.04), 0 1px 3px rgba(46,49,55,0.04);
--tg-sh2: 0 2px 8px rgba(46,49,55,0.05), 0 4px 16px rgba(46,49,55,0.04);
--tg-sh3: 0 4px 16px rgba(46,49,55,0.06), 0 8px 32px rgba(46,49,55,0.06);
--tg-sh4: 0 12px 32px rgba(46,49,55,0.08), 0 24px 64px rgba(46,49,55,0.10);
--tg-ease: cubic-bezier(0.22,1,0.36,1);
--tg-fast: 120ms;
--tg-base: 200ms;
}
/* ---- reset ---- */
.tguide *, .tguide *::before, .tguide *::after { box-sizing:border-box; }
.tguide {
font-family:'Pretendard JP','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
color:var(--tg-fg1);
font-size:1.7rem;
line-height:1.55;
letter-spacing:-0.01em;
-webkit-font-smoothing:antialiased;
word-break:keep-all;
}
.tguide button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
.tguide a { color:inherit; text-decoration:none; }
.tguide ul { list-style:none; margin:0; padding:0; }
.tguide-hidden { display:none !important; }
/* ---- 분류 변수 ---- */
.tguide .tg-cat-festival { --tg-cat-bg:var(--tg-c-festival-bg); --tg-cat-fg:var(--tg-c-festival-fg); }
.tguide .tg-cat-event { --tg-cat-bg:var(--tg-c-event-bg); --tg-cat-fg:var(--tg-c-event-fg); }
.tguide .tg-cat-edu { --tg-cat-bg:var(--tg-c-edu-bg); --tg-cat-fg:var(--tg-c-edu-fg); }
.tguide .tg-cat-exp { --tg-cat-bg:var(--tg-c-exp-bg); --tg-cat-fg:var(--tg-c-exp-fg); }
.tguide .tg-cat-promo { --tg-cat-bg:var(--tg-c-promo-bg); --tg-cat-fg:var(--tg-c-promo-fg); }
/* ============================================================
목록 툴바
============================================================ */
.tguide .tg-toolbar {
display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
margin-bottom:2rem;
}
.tguide .tg-count { font-size:1.7rem; color:var(--tg-fg2); font-weight:600; }
.tguide .tg-count strong { color:var(--tg-brand-deep); font-weight:700; }
.tguide .tg-search { display:flex; align-items:center; gap:.8rem; }
.tguide .tg-search select,
.tguide .tg-search input[type="text"] {
height:5rem; border:1px solid var(--tg-bd); border-radius:var(--tg-r10);
background:var(--tg-bg); padding:0 1.4rem; font-size:1.7rem; color:var(--tg-fg1); font-family:inherit;
transition:border-color var(--tg-fast) var(--tg-ease), box-shadow var(--tg-fast) var(--tg-ease);
}
.tguide .tg-search select {
padding-right:3.4rem; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 1rem center; background-size:2rem;
-webkit-appearance:none; appearance:none;
}
.tguide .tg-search input[type="text"] { width:28rem; }
.tguide .tg-search select:focus,
.tguide .tg-search input:focus {
outline:none; border-color:var(--tg-brand); box-shadow:0 0 0 4px rgba(var(--tg-brand-rgb),0.18);
}
.tguide .tg-btn-search {
width:5.4rem; height:5rem; border-radius:var(--tg-r10);
background:var(--tg-brand); color:var(--tg-fg-on);
border:1.5px solid var(--tg-brand);
display:flex; align-items:center; justify-content:center;
transition:background var(--tg-fast) var(--tg-ease);
}
.tguide .tg-btn-search:hover { background:var(--tg-brand-deep); border-color:var(--tg-brand-deep); }
.tguide .tg-btn-search svg { width:2.1rem; height:2.1rem; }
/* ============================================================
카드 그리드
============================================================ */
.tguide .tg-prog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.tguide .tg-card {
display:flex; flex-direction:column; width:100%; text-align:left; overflow:hidden;
border:1px solid var(--tg-bd); border-radius:var(--tg-r16); background:var(--tg-bg);
box-shadow:var(--tg-sh1);
transition:box-shadow var(--tg-base) var(--tg-ease), border-color var(--tg-base) var(--tg-ease), transform var(--tg-base) var(--tg-ease);
}
.tguide .tg-card:hover { box-shadow:var(--tg-sh3); border-color:var(--tg-brand-100); transform:translateY(-3px); }
.tguide .tg-card-thumb {
position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
background:linear-gradient(150deg, var(--tg-brand-50), #fff);
border-bottom:1px solid var(--tg-bd-sub);
}
.tguide .tg-card-img {
position:absolute; inset:0; width:100%; height:100%;
background:linear-gradient(150deg, var(--tg-brand-50) 0%, var(--tg-brand-100) 100%); background-size:100% 100% !important;
}
.tguide .tg-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.tguide .tg-badges {
position:absolute; top:1.2rem; left:1.2rem; z-index:2;
display:flex; align-items:center; gap:.6rem;
}
.tguide .tg-status {
display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem;
border-radius:var(--tg-r6); font-size:1.4rem; font-weight:700; white-space:nowrap;
box-shadow:0 .2rem .6rem rgba(20,40,36,0.18);
}
.tguide .tg-status::before { content:''; width:.6rem; height:.6rem; border-radius:50%; background:currentColor; opacity:.9; }
.tguide .tg-status-open { background:var(--tg-brand); color:#fff; }
.tguide .tg-status-soon { background:var(--tg-c-promo-fg); color:#fff; }
.tguide .tg-status-closed { background:var(--tg-neutral-700); color:#fff; }
.tguide .tg-cattag {
display:inline-flex; align-items:center; padding:.6rem 1.2rem;
border-radius:var(--tg-r6); font-size:1.4rem; font-weight:700; white-space:nowrap;
background:var(--tg-cat-bg); color:var(--tg-cat-fg);
box-shadow:0 .2rem .6rem rgba(20,40,36,0.12);
}
.tguide .tg-card-body { flex:1; min-width:0; display:flex; flex-direction:column; padding:2rem 2.2rem 1.8rem; }
.tguide .tg-card-title {
font-size:2.1rem; font-weight:700; letter-spacing:-0.02em; line-height:1.32; color:var(--tg-fg1);
margin-bottom:1.4rem; transition:color var(--tg-fast) var(--tg-ease);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tguide .tg-card:hover .tg-card-title { color:var(--tg-brand-deep); }
.tguide .tg-card-meta { display:flex; flex-direction:column; gap:.8rem; }
.tguide .tg-card-meta li { display:flex; align-items:center; gap:.9rem; font-size:1.55rem; line-height:1.4; color:var(--tg-fg2); }
.tguide .tg-meta-ico { flex:0 0 auto; width:1.8rem; height:1.8rem; color:var(--tg-brand-bright); display:inline-flex; }
.tguide .tg-meta-ico svg { width:1.8rem; height:1.8rem; }
.tguide .tg-meta-val { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tguide .tg-card-more {
margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--tg-bd-sub);
display:inline-flex; align-items:center; gap:.5rem;
font-size:1.5rem; font-weight:600; color:var(--tg-fg3);
transition:color var(--tg-fast) var(--tg-ease);
}
.tguide .tg-card-more svg { width:1.7rem; height:1.7rem; transition:transform var(--tg-fast) var(--tg-ease); }
.tguide .tg-card:hover .tg-card-more { color:var(--tg-brand-deep); }
.tguide .tg-card:hover .tg-card-more svg { transform:translateX(3px); }
/* ============================================================
페이지네이션
============================================================ */
.tguide .tg-pager { display:flex; justify-content:center; align-items:center; gap:.6rem; margin-top:3.6rem; }
.tguide .tg-pager button {
min-width:4.4rem; height:4.4rem; padding:0 .6rem; border-radius:var(--tg-r10);
border:1px solid var(--tg-bd); background:var(--tg-bg);
font-size:1.7rem; font-weight:600; color:var(--tg-fg2);
display:inline-flex; align-items:center; justify-content:center;
transition:all var(--tg-fast) var(--tg-ease);
}
.tguide .tg-pager button:hover:not(:disabled) { border-color:var(--tg-brand); color:var(--tg-brand); background:var(--tg-brand-50); }
.tguide .tg-pager button.is-active { background:var(--tg-brand); border-color:var(--tg-brand); color:var(--tg-fg-on); }
.tguide .tg-pager button:disabled { opacity:.4; cursor:default; }
.tguide .tg-pager button svg { width:1.8rem; height:1.8rem; }
/* ============================================================
목록으로 버튼
============================================================ */
.tguide .tg-back {
display:inline-flex; align-items:center; gap:.7rem; margin-bottom:2rem;
font-size:1.6rem; font-weight:600; color:var(--tg-fg3);
transition:color var(--tg-fast) var(--tg-ease);
}
.tguide .tg-back:hover { color:var(--tg-brand); }
.tguide .tg-back svg { width:1.8rem; height:1.8rem; }
/* ============================================================
상세 히어로
============================================================ */
.tguide .tg-hero {
display:flex; align-items:stretch; overflow:hidden;
border:1px solid var(--tg-bd); border-radius:var(--tg-r20); background:var(--tg-bg);
margin-bottom:4rem; box-shadow:var(--tg-sh2);
}
.tguide .tg-hero-thumb {
position:relative; flex:0 0 40%; overflow:hidden;
background:linear-gradient(150deg, var(--tg-brand-50), #fff);
border-right:1px solid var(--tg-bd-sub);
min-height:32rem;
}
.tguide .tg-hero-img {
position:absolute; inset:0; width:100%; height:100%;
background:linear-gradient(150deg, var(--tg-brand-50) 0%, var(--tg-brand-100) 100%); background-size:100% 100% !important;
}
.tguide .tg-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.tguide .tg-hero-badges {
position:absolute; top:1.6rem; left:1.6rem; z-index:2;
display:flex; align-items:center; gap:.7rem;
}
.tguide .tg-hero-body { flex:1; min-width:0; display:flex; flex-direction:column; padding:3rem 3.2rem; }
.tguide .tg-hero-title { font-size:2.9rem; font-weight:700; letter-spacing:-0.026em; line-height:1.25; color:var(--tg-fg1); margin-top:20px; }
.tguide .tg-hero-desc { font-size:1.7rem; line-height:1.55; color:var(--tg-fg2); margin:1.2rem 0 2rem; }
.tguide .tg-hero-info {
display:flex; flex-direction:column; gap:1.4rem; margin-bottom:2.2rem;
background:var(--tg-bg-sub); border-radius:var(--tg-r12); padding:2rem 2.2rem;
}
.tguide .tg-hero-info li { display:flex; align-items:center; gap:1.2rem; font-size:1.7rem; line-height:1.4; }
.tguide .tg-hi-ico {
flex:0 0 auto; width:3.6rem; height:3.6rem; border-radius:var(--tg-r10);
background:var(--tg-bg); color:var(--tg-brand);
display:flex; align-items:center; justify-content:center;
}
.tguide .tg-hi-ico svg { width:2rem; height:2rem; }
.tguide .tg-hi-k { flex:0 0 auto; min-width:5.2rem; color: var(--tg-fg1); font-weight:600; font-family: 'Paperlogy'; }
.tguide .tg-hi-v { flex:1; min-width:0; color:var(--tg-fg1); font-weight:500; }
.tguide .tg-hero-actions { margin-top:auto; padding-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.tguide .tg-btn-apply {
flex:1 1 auto; min-width:18rem; height:5.6rem; padding:0 3rem; border-radius:var(--tg-r12);
background:var(--tg-brand); color:var(--tg-fg-on); border:1.5px solid var(--tg-brand);
font-size:1.75rem; font-weight:700;
display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
box-shadow:0 .4rem 1.4rem rgba(var(--tg-brand-rgb),0.28);
transition:all var(--tg-fast) var(--tg-ease);
}
.tguide .tg-btn-apply:hover { background:var(--tg-brand-deep); border-color:var(--tg-brand-deep); transform:translateY(-2px); }
.tguide .tg-btn-apply svg { width:2rem; height:2rem; }
.tguide .tg-btn-apply.is-closed {
background:var(--tg-neutral-200); color:var(--tg-neutral-600);
cursor:default; box-shadow:none; border-color:var(--tg-neutral-200);
}
.tguide .tg-btn-apply.is-closed:hover { transform:none; }
.tguide .tg-btn-tel {
flex:0 0 auto; height:5.6rem; padding:0 2.6rem; border-radius:var(--tg-r12);
border:1.5px solid var(--tg-bd-str); background:var(--tg-bg);
font-size:1.7rem; font-weight:600; color:var(--tg-fg1);
display:inline-flex; align-items:center; gap:.9rem;
transition:all var(--tg-fast) var(--tg-ease);
}
.tguide .tg-btn-tel:hover { border-color:var(--tg-brand); background:var(--tg-brand-50); color:var(--tg-brand-deep); }
.tguide .tg-btn-tel svg { width:1.9rem; height:1.9rem; color:var(--tg-brand); }
/* ============================================================
상세 섹션
============================================================ */
.tguide .tg-sec { margin-bottom:3.6rem; }
.tguide .tg-sec-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; }
.tguide .tg-sec-head::before { content:''; width:.5rem; height:2.2rem; border-radius:2px; background:var(--tg-brand); }
.tguide .tg-sec-head h3 { font-size:2.2rem; font-weight:700; letter-spacing:-0.023em; color:var(--tg-fg1); }
/* 정보 카드 그리드 */
.tguide .tg-info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(28rem,1fr)); gap:1.4rem; }
.tguide .tg-info-item {
display:flex; align-items:flex-start; gap:1.4rem; padding:1.8rem 2rem;
border:1px solid var(--tg-bd); border-radius:var(--tg-r16); background:var(--tg-bg);
transition:border-color var(--tg-fast) var(--tg-ease), box-shadow var(--tg-fast) var(--tg-ease);
}
.tguide .tg-info-item:hover { border-color:var(--tg-brand-100); box-shadow:var(--tg-sh1); }
.tguide .tg-ii-ico {
flex:0 0 auto; width:4.6rem; height:4.6rem; border-radius:var(--tg-r12);
background:var(--tg-brand-50); color:var(--tg-brand);
display:flex; align-items:center; justify-content:center;
}
.tguide .tg-ii-ico svg { width:2.4rem; height:2.4rem; }
.tguide .tg-ii-body { display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.tguide .tg-ii-k { font-size:1.45rem; font-weight:600; color:var(--tg-fg3); }
.tguide .tg-ii-v { font-size:1.7rem; font-weight:500; color:var(--tg-fg1); line-height:1.4; }
/* 프로그램 내용 칩 */
.tguide .tg-chips { display:flex; flex-wrap:wrap; gap:1rem; }
.tguide .tg-chip {
display:inline-flex; align-items:center; padding:1.1rem 2rem; border-radius:var(--tg-rpill);
background:var(--tg-brand-50); border:1px solid var(--tg-brand-100); color:var(--tg-brand-deep);
font-size:1.6rem; font-weight:600;
}
/* 포스터 */
.tguide .tg-poster {
margin:0 auto;
background:linear-gradient(150deg, var(--tg-brand-50), #fff);
border:1px solid var(--tg-bd-sub); border-radius:1.8rem; overflow:hidden;
}
.tguide .tg-poster .tg-poster-img{
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.tguide .tg-poster .tg-poster-img > img{max-width:100%;}
/* ============================================================
토스트
============================================================ */
.tg-toast {
position:fixed; left:50%; bottom:4rem; transform:translateX(-50%) translateY(20px);
background:#191F28; color:#fff; padding:1.4rem 2.2rem; border-radius:1.2rem;
font-size:1.5rem; font-weight:500;
box-shadow:0 12px 32px rgba(46,49,55,0.08),0 24px 64px rgba(46,49,55,0.10);
opacity:0; visibility:hidden; transition:all 200ms cubic-bezier(0.22,1,0.36,1); z-index:3000;
}
.tg-toast.is-show { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* ============================================================
반응형
============================================================ */
@media (max-width:1024px) {
.tguide .tg-card-title { font-size:2rem; }
.tguide .tg-hero-title { font-size:2.5rem; }
}
@media (max-width:768px) {
.tguide .tg-toolbar { flex-direction:column; align-items:stretch; gap:1.2rem; }
.tguide .tg-search { width:100%; }
.tguide .tg-search input[type="text"] { flex:1; width:auto; }
.tguide .tg-hero { flex-direction:column; margin-bottom:3rem; border-radius:var(--tg-r16); }
.tguide .tg-hero-thumb { flex:none; width:100%; aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid var(--tg-bd-sub); }
.tguide .tg-hero-img { position:absolute; inset:0; }
.tguide .tg-hero-body { padding:2rem; }
.tguide .tg-hero-title { font-size:2.3rem; margin-top:10px; }
.tguide .tg-hero-desc { font-size:1.6rem; margin:.8rem 0 1.6rem; }
.tguide .tg-hero-info { padding:1.6rem 1.8rem; gap:1.1rem; margin-bottom:1.8rem; }
.tguide .tg-hero-info li { font-size:1.6rem; }
.tguide .tg-hero-actions { margin-top:1.8rem; padding-top:0; flex-direction:column; }
.tguide .tg-btn-apply, .tguide .tg-btn-tel { width:100%; flex:none; justify-content:center; }
.tguide .tg-sec { margin-bottom:2.8rem; }
.tguide .tg-sec-head h3 { font-size:2rem; }
.tguide .tg-info-grid { grid-template-columns:1fr; gap:1rem; }
.tguide .tg-info-item { padding:1.6rem 1.8rem; }
.tguide .tg-infobar { padding:1.8rem; font-size:1.6rem; gap:.6rem; }
.tguide .tg-pager button { min-width:4rem; height:4rem; }
}
@media (max-width:600px) {
.tguide .tg-prog-grid { grid-template-columns:1fr; }
}
@media (max-width:425px) {
.tguide .tg-sns-btns button { width:4.6rem; height:4.6rem; }
.tguide .tg-list-btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
.tguide *, .tguide *::before, .tguide *::after { transition:none !important; animation:none !important; }
}
@media print {
.tguide .tg-search, .tguide .tg-pager, .tguide .tg-sns,
.tguide .tg-list-wrap, .tguide .tg-back, .tg-toast { display:none !important; }
}
/* 프로그램 안내 끝 */
/* 갤러리 게시판 목록 시작 */
.gallery_area{
--g-green:#09847F;
--g-green-d:#066b66;
--g-grad:linear-gradient(135deg, #0ba39d 0%, #09847F 100%);
--g-ink:#1c2b25;
--g-text:#53625b;
--g-muted:#8a978f;
--g-line:rgba(9, 79, 75, 0.13);
--g-soft:#eef5f0;
width:100%;
max-width:1660px;
margin:0 auto;
letter-spacing:-0.02rem;
}
/* ---------- 그리드 (col-* 클래스 무력화 후 CSS Grid) ---------- */
.gallery_area .lst-photo-board2{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:34px 30px;
}
.gallery_area .lst-photo-board2 > li{
float:none; width:auto; padding:0; margin:0;
list-style:none;
}
.gallery_area .lst-photo-board2 > li > a{
display:block;
height:100%;
color:inherit;
}
/* ---------- 카드 ---------- */
.gallery_area .lst-photo-wrap{
display:flex;
flex-direction:column;
height:100%;
background:#fff;
border:1px solid var(--g-line);
border-radius:20px;
overflow:hidden;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gallery_area .lst-photo-board2 > li > a:hover .lst-photo-wrap{
transform:translateY(-6px);
border-color:rgba(9, 132, 127, 0.40);
box-shadow:0 18px 40px rgba(9, 79, 75, 0.13);
}
/* ---------- 이미지 (CMS 인라인 스타일 override) ---------- */
.gallery_area .img_wrap{
position:relative;
overflow:hidden;
background:var(--g-soft);
}
.gallery_area .img_wrap .img{
height:auto !important;
aspect-ratio:10 / 7;
background-color:var(--g-soft);
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
transition:transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery_area .img_wrap .img > img{width: 100% !important; height: 100% !important; object-fit: cover;}
/* 호버 시 우측 상단 '보기' 버튼 */
.gallery_area .img_wrap::before{
content:'';
position:absolute; top:14px; right:14px; z-index:2;
width:40px; height:40px; border-radius:50%;
background-color:rgba(255, 255, 255, 0.95);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309847F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:19px;
box-shadow:0 6px 16px rgba(9, 79, 75, 0.18);
opacity:0; transform:translateY(-6px) scale(.85);
transition:opacity .3s ease, transform .3s ease;
}
.gallery_area .lst-photo-board2 > li > a:hover .img_wrap::before{
opacity:1; transform:translateY(0) scale(1);
}
/* 이미지 위 은은한 정원 톤 가림막 (호버 시 살짝) */
.gallery_area .img_wrap::after{
content:'';
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(9, 79, 75, 0) 55%, rgba(9, 79, 75, 0.18) 100%);
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.gallery_area .lst-photo-board2 > li > a:hover .img_wrap::after{ opacity:1; }
/* ---------- 본문 ---------- */
.gallery_area .lst-photo-wrap .subject{
display:block;
padding:24px 24px 0 24px;
font-size:1.95rem;
font-weight:600;
line-height:1.45;
color:var(--g-ink);
letter-spacing:-0.03rem;
word-break:keep-all;
text-wrap:pretty;
/* 2줄 말줄임 + 2줄 높이 고정(카드 정렬용) */
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:calc(24px + 2.9em);
transition:color .25s ease;
}
.gallery_area .lst-photo-board2 > li > a:hover .subject{ color:var(--g-green-d); }
.gallery_area .lst-photo-wrap .info{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:auto 24px 0 24px;
padding:15px 0 22px 0;
border-top:1px solid var(--g-line);
}
.gallery_area .lst-photo-wrap .info .writer{
display:inline-flex;
align-items:center;
gap:7px;
min-width:0;
padding:6px 13px 6px 9px;
background:var(--g-soft);
border-radius:9999px;
font-size:1.4rem;
font-weight:600;
color:var(--g-green-d);
letter-spacing:-0.02rem;
white-space:nowrap;
max-width:130px;
}
.gallery_area .lst-photo-wrap .info .writer::before{
content:'';
flex:none;
width:13px; height:13px;
background:var(--g-grad);
border-radius:50%;
box-shadow:0 0 0 3px rgba(11, 163, 157, 0.18);
}
.gallery_area .lst-photo-wrap .info .writer > span{width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gallery_area .lst-photo-wrap .info .date{
flex:none;
display:inline-flex;
align-items:center;
gap:6px;
font-size:1.45rem;
font-weight:500;
color:var(--g-muted);
letter-spacing:0;
white-space:nowrap;
}
.gallery_area .lst-photo-wrap .info .date::before{
content:'';
flex:none;
width:15px; height:15px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
opacity:.85;
}
/* ---------- 반응형 ---------- */
@media (max-width:1024px){
.gallery_area .lst-photo-board2{ grid-template-columns:repeat(2, 1fr); gap:28px 24px; }
.gallery_area .lst-photo-wrap .subject{ font-size:1.9rem; padding:22px 20px 0 20px; }
.gallery_area .lst-photo-wrap .info{ margin:auto 20px 0 20px; padding:14px 0 20px 0; }
}
@media (max-width:640px){
.gallery_area .lst-photo-board2{ grid-template-columns:1fr; gap:20px; }
.gallery_area .lst-photo-wrap{ border-radius:16px; }
.gallery_area .img_wrap .img{ aspect-ratio:16 / 9; }
.gallery_area .lst-photo-wrap .subject{ font-size:1.85rem; padding:20px 18px 0 18px; }
.gallery_area .lst-photo-wrap .info{ margin:auto 18px 0 18px; padding:13px 0 18px 0; }
.gallery_area .lst-photo-wrap .info .writer{ font-size:1.35rem; }
.gallery_area .lst-photo-wrap .info .date{ font-size:1.4rem; }
}
/* 갤러리 게시판 목록 끝 */
/* 참여정원 작품전 시작 */
.tworks {
--tw-brand: #1b6b4c;
--tw-brand-deep: #145a40;
--tw-brand-50: #eef6f1;
--tw-brand-100: #d7ebe0;
--tw-brand-bright: #38a05f;
--tw-brand-rgb: 27,107,76;
--tw-fg1: #171719;
--tw-fg2: rgba(112,115,124,0.88);
--tw-fg3: rgba(112,115,124,0.61);
--tw-fg-on: #ffffff;
--tw-bg: #ffffff;
--tw-bg-sub: rgba(112,115,124,0.05);
--tw-bd: rgba(112,115,124,0.16);
--tw-bd-sub: rgba(112,115,124,0.08);
--tw-bd-str: rgba(112,115,124,0.22);
--tw-neutral-200: #E5E8EB;
--tw-neutral-600: #6B7684;
--tw-neutral-700: #4E5968;
--tw-r8: 0.8rem;
--tw-r10: 1.0rem;
--tw-r12: 1.2rem;
--tw-r16: 1.6rem;
--tw-r20: 2.0rem;
--tw-sh1: 0 1px 2px rgba(46,49,55,0.04), 0 1px 3px rgba(46,49,55,0.04);
--tw-sh2: 0 2px 8px rgba(46,49,55,0.05), 0 4px 16px rgba(46,49,55,0.04);
--tw-sh3: 0 4px 16px rgba(46,49,55,0.06), 0 8px 32px rgba(46,49,55,0.06);
--tw-ease: cubic-bezier(0.22,1,0.36,1);
--tw-fast: 120ms;
--tw-base: 200ms;
}
/* ---- reset ---- */
.tworks *, .tworks *::before, .tworks *::after { box-sizing:border-box; }
.tworks {
font-family:'Pretendard JP','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
color:var(--tw-fg1);
font-size:1.7rem;
line-height:1.55;
letter-spacing:-0.01em;
-webkit-font-smoothing:antialiased;
word-break:keep-all;
}
.tworks button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
.tworks a { color:inherit; text-decoration:none; }
.tworks ul { list-style:none; margin:0; padding:0; }
.tworks-hidden { display:none !important; }
/* ============================================================
목록 탭 필터 (연도/카테고리)
============================================================ */
.tworks .tw-toolbar {
display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
margin-bottom:2rem;
}
.tworks .tw-count { font-size:1.7rem; color:var(--tw-fg2); font-weight:600; }
.tworks .tw-count strong { color:var(--tw-brand-deep); font-weight:700; }
.tworks .tw-filter { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.tworks .tw-filter select {
height:4.6rem; border:1px solid var(--tw-bd); border-radius:var(--tw-r10);
background:var(--tw-bg); padding:0 3.4rem 0 1.4rem; font-size:1.6rem; color:var(--tw-fg1); font-family:inherit;
cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 1rem center; background-size:2rem;
-webkit-appearance:none; appearance:none;
transition:border-color var(--tw-fast) var(--tw-ease);
}
.tworks .tw-filter select:focus {
outline:none; border-color:var(--tw-brand); box-shadow:0 0 0 4px rgba(var(--tw-brand-rgb),0.18);
}
/* ============================================================
카드 그리드
============================================================ */
.tworks .tw-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.tworks .tw-card {
display:flex; flex-direction:column; width:100%; text-align:left; overflow:hidden;
border:1px solid var(--tw-bd); border-radius:var(--tw-r16); background:var(--tw-bg);
box-shadow:var(--tw-sh1);
transition:box-shadow var(--tw-base) var(--tw-ease), border-color var(--tw-base) var(--tw-ease), transform var(--tw-base) var(--tw-ease);
}
.tworks .tw-card:hover { box-shadow:var(--tw-sh3); border-color:var(--tw-brand-100); transform:translateY(-3px); }
.tworks .tw-card-thumb {
position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
background:linear-gradient(150deg, var(--tw-brand-50), #fff);
border-bottom:1px solid var(--tw-bd-sub);
}
.tworks .tw-card-img {
position:absolute; inset:0; width:100%; height:100%;
background:linear-gradient(150deg, var(--tw-brand-50) 0%, var(--tw-brand-100) 100%);
}
.tworks .tw-card-img img { width:100% !important; height:100% !important; object-fit:cover; display:block; }
.tworks .tw-card-badge {
position:absolute; top:1.2rem; left:1.2rem; z-index:2;
display:inline-flex; align-items:center; padding:.6rem 1.2rem;
border-radius:var(--tw-r8); font-size:1.4rem; font-weight:700; white-space:nowrap;
background:rgba(27,107,76,0.82); color:#fff;
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
box-shadow:0 .2rem .6rem rgba(20,40,36,0.18);
}
.tworks .tw-card-body { flex:1; min-width:0; display:flex; flex-direction:column; padding:2rem 2.2rem 1.8rem; }
.tworks .tw-card-title {
font-size:2rem; font-weight:700; letter-spacing:-0.022em; line-height:1.32; color:var(--tw-fg1);
margin-bottom:.6rem;
transition:color var(--tw-fast) var(--tw-ease);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tworks .tw-card:hover .tw-card-title { color:var(--tw-brand-deep); }
.tworks .tw-card-artist {
font-size:1.5rem; color:var(--tw-fg2); font-weight:500; margin-bottom:1rem;
}
.tworks .tw-card-desc {
font-size:1.5rem; line-height:1.55; color:var(--tw-fg3);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
flex:1;
}
.tworks .tw-card-more {
margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--tw-bd-sub);
display:inline-flex; align-items:center; gap:.5rem;
font-size:1.5rem; font-weight:600; color:var(--tw-fg3);
transition:color var(--tw-fast) var(--tw-ease);
}
.tworks .tw-card-more svg { width:1.7rem; height:1.7rem; transition:transform var(--tw-fast) var(--tw-ease); }
.tworks .tw-card:hover .tw-card-more { color:var(--tw-brand-deep); }
.tworks .tw-card:hover .tw-card-more svg { transform:translateX(3px); }
/* ============================================================
페이지네이션
============================================================ */
.tworks .tw-pager { display:flex; justify-content:center; align-items:center; gap:.6rem; margin-top:3.6rem; }
.tworks .tw-pager button {
min-width:4.4rem; height:4.4rem; padding:0 .6rem; border-radius:var(--tw-r10);
border:1px solid var(--tw-bd); background:var(--tw-bg);
font-size:1.7rem; font-weight:600; color:var(--tw-fg2);
display:inline-flex; align-items:center; justify-content:center;
transition:all var(--tw-fast) var(--tw-ease);
}
.tworks .tw-pager button:hover:not(:disabled) { border-color:var(--tw-brand); color:var(--tw-brand); background:var(--tw-brand-50); }
.tworks .tw-pager button.is-active { background:var(--tw-brand); border-color:var(--tw-brand); color:var(--tw-fg-on); }
.tworks .tw-pager button:disabled { opacity:.4; cursor:default; }
.tworks .tw-pager button svg { width:1.8rem; height:1.8rem; }
/* ============================================================
목록으로 버튼
============================================================ */
.tworks .tw-back {
display:inline-flex; align-items:center; gap:.7rem; margin-bottom:2rem;
font-size:1.6rem; font-weight:600; color:var(--tw-fg3);
transition:color var(--tw-fast) var(--tw-ease);
}
.tworks .tw-back:hover { color:var(--tw-brand); }
.tworks .tw-back svg { width:1.8rem; height:1.8rem; }
/* ============================================================
상세 히어로 (작품명 + 작가/소개 좌우 배치)
============================================================ */
.tworks .tw-hero {
display:flex; align-items:stretch; overflow:hidden;
border:1px solid var(--tw-bd); border-radius:var(--tw-r20); background:var(--tw-bg);
margin-bottom:4rem; box-shadow:var(--tw-sh2);
}
.tworks .tw-hero-thumb {
position:relative; flex:0 0 60%; overflow:hidden;
background:linear-gradient(150deg, var(--tw-brand-50), #fff);
border-right:1px solid var(--tw-bd-sub);
min-height:50rem;
}
.tworks .tw-hero-img {
position:absolute; inset:0; width:100%; height:100%;
background:linear-gradient(150deg, var(--tw-brand-50) 0%, var(--tw-brand-100) 100%); aspect-ratio: 16 / 9;
}
.tworks .tw-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.tworks .tw-hero-body { flex:1; min-width:0; display:flex; flex-direction:column; padding:3rem 3.2rem; }
.tworks .tw-hero-title {
font-size:2.8rem; font-weight:700; letter-spacing:-0.026em; line-height:1.25;
color:var(--tw-fg1); margin-bottom:.6rem;
}
.tworks .tw-hero-artist {
font-size:1.8rem; font-weight:600; color:var(--tw-brand); margin-bottom:1.6rem;
}
.tworks .tw-hero-desc {
font-size:1.65rem; line-height:1.65; color:var(--tw-fg2);
flex:1;
}
/* ============================================================
상세 섹션 (작가소개 / 설계과정 / 조성과정 / 최종완성 / 영상)
============================================================ */
.tworks .tw-sec { margin-bottom:3.6rem; }
.tworks .tw-sec-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; }
.tworks .tw-sec-head::before { content:''; width:.5rem; height:2.2rem; border-radius:2px; background:var(--tw-brand); }
.tworks .tw-sec-head h3 { font-size:2.2rem; font-weight:700; letter-spacing:-0.023em; color:var(--tw-fg1); }
/* 작가 소개 카드 */
.tworks .tw-writer {
display:inline-flex; align-items:flex-start; gap:2rem;
padding:2rem 3rem 2rem 2.2rem; border:1px solid var(--tw-bd); border-radius:var(--tw-r16);
background:var(--tw-bg-sub);
}
.tworks .tw-writer-photo {
flex:0 0 20rem; width:20rem; height:20rem; border-radius:var(--tw-r12); overflow:hidden;
background:var(--tw-brand-50); border:1px solid var(--tw-bd);
}
.tworks .tw-writer-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.tworks .tw-writer-info { flex:1; min-width:0; font-size:1.6rem; line-height:1.65; color:var(--tw-fg2); }
.tworks .tw-writer-name { font-size:1.9rem; font-weight:700; color:var(--tw-fg1); margin-bottom:.6rem; margin-top:.6rem;}
/* 본문 텍스트 (설명/과정) */
.tworks .tw-prose {
font-size:1.7rem; line-height:1.75; color:var(--tw-fg2);
padding:2rem 2.2rem; background:var(--tw-bg-sub); border-radius:var(--tw-r12);
}
/* 이미지 슬라이더 래퍼 (CMS multiple-items2 대체) */
.tworks .tw-img-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(40rem,1fr)); gap:1.4rem;
}
.tworks .tw-img-grid-item {
aspect-ratio:4/3; overflow:hidden;
border-radius:var(--tw-r12); border:1px solid var(--tw-bd-sub);
background:var(--tw-brand-50);
}
.tworks .tw-img-grid-item img { width:100%; height:100%; object-fit:cover; display:block; }
.tworks .tw-more-link {
display:inline-flex; align-items:center; gap:.6rem;
margin-top:1.4rem; padding:.9rem 1.8rem;
border:1px solid var(--tw-bd-str); border-radius:var(--tw-r10);
font-size:1.55rem; font-weight:600; color:var(--tw-fg2);
transition:all var(--tw-fast) var(--tw-ease);
}
.tworks .tw-more-link:hover { border-color:var(--tw-brand); color:var(--tw-brand); background:var(--tw-brand-50); }
.tworks .tw-more-link svg { width:1.6rem; height:1.6rem; }
/* 영상 (iframe) */
.tworks .tw-video {
position:relative; width:100%; aspect-ratio:16/9;
border-radius:var(--tw-r16); overflow:hidden;
border:1px solid var(--tw-bd-sub);
background:#000;
}
.tworks .tw-video iframe {
position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
/* ============================================================
반응형
============================================================ */
@media (max-width:1024px) {
.tworks .tw-card-title { font-size:1.9rem; }
.tworks .tw-hero-title { font-size:2.4rem; }
.tworks .tw-hero-thumb {min-height: 36rem;}
}
@media (max-width:768px) {
.tworks .tw-toolbar { flex-direction:column; align-items:stretch; gap:1.2rem; }
.tworks .tw-filter { width:100%; }
.tworks .tw-filter select { flex:1; }
.tworks .tw-hero { flex-direction:column; margin-bottom:3rem; border-radius:var(--tw-r16); }
.tworks .tw-hero-thumb { flex:none; width:100%; aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid var(--tw-bd-sub); }
.tworks .tw-hero-img { position:absolute; inset:0; }
.tworks .tw-hero-body { padding:2rem; }
.tworks .tw-hero-title { font-size:2.2rem; }
.tworks .tw-hero-artist { font-size:1.6rem; margin-bottom:1.2rem; }
.tworks .tw-hero-desc { font-size:1.55rem; }
.tworks .tw-sec { margin-bottom:2.8rem; }
.tworks .tw-sec-head h3 { font-size:2rem; }
.tworks .tw-img-grid { grid-template-columns:1fr 1fr; gap:1rem; }
.tworks .tw-writer{ padding: 2rem 2.5rem 2rem 2.2rem;}
.tworks .tw-writer-photo { width:15rem; height:15rem; flex:0 0 15rem; }
}
@media (max-width:600px) {
.tworks .tw-grid { grid-template-columns:1fr; }
}
@media (max-width:500px) {
.tworks .tw-writer { flex-direction:column; gap:1.4rem; }
.tworks .tw-writer-name{margin-top:0;}
}
@media (max-width:425px) {
.tworks .tw-img-grid { grid-template-columns:1fr; }
.tworks .tw-pager button { min-width:4rem; height:4rem; }
}
@media (prefers-reduced-motion:reduce) {
.tworks *, .tworks *::before, .tworks *::after { transition:none !important; animation:none !important; }
}
@media print {
.tworks .tw-pager, .tworks .tw-back, .tworks .tw-filter { display:none !important; }
}
/* 참여정원 작품전 끝 */