@charset "utf-8";

:root{
--board-color-1:#0397F9;
}

/* 지정관광지 목록 */
.spot_wrap{display:flex;flex-direction:column;}
.spot_cate{margin-bottom:30px;}
.spot_cate ul{display:flex;flex-wrap:wrap;gap:8px;}
.spot_cate a{display:block;padding:7px 20px;border:1px solid #ddd;border-radius:2em;font-size:16px;font-weight:500;letter-spacing:-0.02em;line-height:1.5;color:#555;}
.spot_cate a:hover{border-color:var(--board-color-1);color:var(--board-color-1);}
.spot_cate #bo_cate_on{border-color:var(--board-color-1);background:var(--board-color-1);font-weight:700;color:#fff;}

.spot_top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;}
.spot_top .total{font-size:16px;font-weight:400;letter-spacing:-0.02em;line-height:1.5;color:#555;}
.spot_top .total strong{font-weight:700;color:var(--board-color-1);}
.spot_top .btns{display:flex;gap:8px;}
.spot_top .btns a{display:block;padding:8px 18px;border-radius:5px;font-size:15px;font-weight:600;letter-spacing:-0.02em;line-height:1.4;color:#fff;}
.spot_top .btn_admin{background:#616161;}
.spot_top .btn_write{background:var(--board-color-1);}

.spot_list{display:flex;flex-direction:column;border-top:2px solid #212121;}
.spot_list .item{position:relative;display:flex;align-items:flex-start;gap:30px;padding:30px 0;border-bottom:1px solid #e0e0e0;}
.spot_list .thumb{flex-shrink:0;width:260px;aspect-ratio:4/3;border-radius:10px;object-fit:cover;}
.spot_list .no_img{display:flex;justify-content:center;align-items:center;background:#f2f4f5;}
.spot_list .no_img img{width:80%;height:auto;aspect-ratio:auto;object-fit:contain;}
.spot_list .con{display:flex;flex-direction:column;flex:1;gap:10px;min-width:0;padding-top:6px;}
.spot_list .tit{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.4;color:var(--board-color-1);}
.spot_list .no{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--board-color-1);font-size:16px;font-weight:700;line-height:1;color:#fff;}
.spot_list .addr{position:relative;padding-left:22px;font-size:16px;font-weight:500;letter-spacing:-0.02em;line-height:1.5;color:#616161;}
.spot_list .addr::before{content:"";position:absolute;top:4px;left:0;width:14px;height:16px;background:var(--board-color-1);clip-path:path("M7 0C3.1 0 0 3.1 0 7c0 5.2 7 9 7 9s7-3.8 7-9c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 7 4.5a2.5 2.5 0 0 1 0 5z");}
.spot_list .desc{font-size:16px;font-weight:400;letter-spacing:-0.02em;line-height:1.7;color:#424242;}
.spot_list .btn_modify{position:absolute;top:30px;right:0;padding:5px 14px;border:1px solid var(--board-color-1);border-radius:5px;font-size:14px;font-weight:600;letter-spacing:-0.02em;line-height:1.4;color:var(--board-color-1);}
.spot_list .btn_modify:hover{background:var(--board-color-1);color:#fff;}
.spot_empty{padding:80px 0;font-size:16px;letter-spacing:-0.02em;color:#9e9e9e;text-align:center;}

@media screen and (max-width: 1024px){
.spot_list .item{gap:20px;padding:24px 0;}
.spot_list .thumb{width:200px;}
.spot_list .tit{font-size:20px;}
}

@media screen and (max-width: 768px){
.spot_top{flex-wrap:wrap;}
.spot_list .item{flex-direction:column;gap:14px;padding:20px 0;}
.spot_list .thumb{width:100%;}
.spot_list .con{padding-top:0;}
.spot_list .tit{font-size:18px;}
.spot_list .no{width:28px;height:28px;font-size:14px;}
.spot_list .addr{font-size:15px;}
.spot_list .desc{font-size:15px;line-height:1.6;}
.spot_list .btn_modify{top:20px;}
}

/* 지정관광지 등록 */
.spot_write .wr_list{display:flex;flex-direction:column;border-top:2px solid #212121;}
.spot_write .wr_list > li{display:flex;align-items:flex-start;gap:20px;padding:20px 10px;border-bottom:1px solid #e0e0e0;}
.spot_write .lb{flex:0 0 160px;padding-top:10px;font-size:16px;font-weight:600;letter-spacing:-0.02em;color:#212121;}
.spot_write .lb strong{margin-left:3px;color:#e53935;}
.spot_write .fd{display:flex;flex-direction:column;flex:1;gap:8px;min-width:0;}
.spot_write .fd input[type=text],
.spot_write .fd select,
.spot_write .fd textarea{width:100%;padding:10px 14px;border:1px solid #ddd;border-radius:5px;font-size:16px;letter-spacing:-0.02em;line-height:1.5;color:#212121;}
.spot_write .fd textarea{resize:vertical;}
.spot_write .help{font-size:14px;letter-spacing:-0.02em;color:#9e9e9e;}
.spot_write .del_file{font-size:14px;letter-spacing:-0.02em;color:#616161;}
.spot_write .wr_btn{display:flex;justify-content:center;gap:10px;margin-top:30px;}
.spot_write .wr_btn > *{min-width:140px;height:50px;padding:0 20px;border:0;border-radius:5px;font-size:16px;font-weight:600;letter-spacing:-0.02em;line-height:50px;text-align:center;cursor:pointer;}
.spot_write .btn_cancel{background:#eceff1;color:#424242;}
.spot_write .btn_submit{background:var(--board-color-1);color:#fff;}

@media screen and (max-width: 768px){
.spot_write .wr_list > li{flex-direction:column;gap:8px;padding:16px 0;}
.spot_write .lb{flex:none;padding-top:0;}
.spot_write .wr_btn > *{min-width:0;flex:1;}
}