/* ==========================================================================
   LAYER Nº 게시판 전용 스타일 (board.css)
   목록/상세/글쓰기/댓글, PROJECTS·BRANDING 게시판 스킨용 CSS를
   사이트 공통 스타일(custom.css)과 분리해서 여기서 별도로 관리합니다.
   head.sub.php 에서 custom.css 다음에 이 파일을 추가로 불러옵니다.
   ========================================================================== */

/* ==========================================================================
   게시판 - 목록/상세/글쓰기/댓글
   그누보드 기본 갤러리 스킨 마크업(#bo_gall, .gall_*, #bo_v 등)은 그대로 두고
   타이포/색상/간격만 사이트 톤에 맞춰 새로 입혔습니다.
   4열 그리드는 그누보드 기본 .col-gn-4 (게시판설정 > 갤러리 이미지 수) 를 그대로 사용합니다.
   ========================================================================== */

#bo_gall, #bo_v, #bo_w{
  max-width:var(--max);
  margin:0 auto;
  padding:48px 0 100px;
}

/* 카테고리 탭 */
#bo_cate{margin:0 0 28px}
#bo_cate ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
#bo_cate a{
  display:block;padding:7px 16px;font-size:12.5px;
  border:1px solid var(--line);color:var(--ink-soft);
}
#bo_cate a:hover, #bo_cate .active a{border-color:var(--ink);color:var(--ink)}

/* 상단 툴바 (Total / 검색·글쓰기·관리자 버튼) */
#bo_btn_top{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin:0 0 24px;padding-bottom:16px;
}
#bo_list_total{font-size:12.5px;color:var(--ink-soft)}
#bo_list_total span{color:var(--ink);font-weight:700;margin-right:6px}

.btn_bo_user{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.btn_bo_user li{width:auto;margin:0;background:none;float:none}
.btn_bo_user .btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;line-height:36px;
  border:1px solid var(--line) !important;
  background:#fff;color:var(--ink);font-size:13px;
  border-radius:0;position:relative;
}
.btn_bo_user .btn:hover{border-color:var(--ink) !important}
.more_opt{
  position:absolute;right:0;top:calc(100% + 6px);
  background:var(--ink);min-width:130px;padding:6px 0;
  list-style:none;margin:0;z-index:20;border-radius:0;
}
.more_opt li{width:auto;float:none;background:none}
.more_opt button, .more_opt a{
  display:block;width:100%;text-align:left;
  padding:8px 16px;font-size:12.5px;color:#eee;background:none;border:0;
}
.more_opt button:hover, .more_opt a:hover{color:#fff;background:rgba(255,255,255,0.08)}

/* 체크박스 */
.chk_box input[type="checkbox"] + label span{border-radius:0 !important}
#gall_allchk{margin:0 0 16px;font-size:12.5px;color:var(--ink-soft)}

/* 카드 그리드 - 균일한 크롭 그리드 (crop=true라 모든 이미지가 동일 비율로 생성됨) */
#bo_gall .gall_row{
  margin:0 -10px;
}
#bo_gall .gall_row .col-gn-4,
#bo_gall .gall_row .col-gn-3,
#bo_gall .gall_row .col-gn-2,
#bo_gall .gall_row .col-gn-1{
  padding-left:10px !important;
  padding-right:10px !important;
}
#bo_gall .gall_box{margin:0 0 40px}
#bo_gall .gall_chk{padding:8px}
#bo_gall .gall_img{
  position:relative;
  border-bottom:0;
  background:#f2f2f2;
  overflow:hidden;
}
#bo_gall .gall_img img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
#bo_gall .gall_img a:hover img{transform:scale(1.05);filter:brightness(0.75)}
/* 공지(상단고정) 뱃지 - 썸네일 위 코너에 작게 표시 (요청서: 상단 4개 고정, 이미지는 그대로) */
#bo_gall .gall_img .is_notice{
  position:absolute;top:10px;left:10px;z-index:4;
  display:inline-flex !important;align-items:center;justify-content:center;
  width:auto !important;height:auto !important;
  background:var(--ink);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:1.5px;
  padding:5px 10px;
}

/* hover시 중앙 십자(+) 표시 - list.skin.php에서 span.proj_cross 한 줄 추가함 */
.gall_img{position:relative}
.proj_cross{
  position:absolute;top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%) scale(0.5);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  /* .gall_img span에 걸리는 그누보드 기본 회색배경(#eaeaea) 등 상속 스타일 전부 차단 */
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
}
.proj_cross::before,.proj_cross::after{content:"";position:absolute;background:#fff}
.proj_cross::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.proj_cross::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.gall_img a:hover .proj_cross{opacity:1;transform:translate(-50%,-50%) scale(1)}


#bo_gall .gall_text_href{margin:16px 0 0}
#bo_gall .gall_text_href a.bo_tit{
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;font-weight:700;font-size:16px;color:var(--ink);
  margin-bottom:8px;
}
#bo_gall .bo_cnt{
  display:-webkit-box;
  font-size:12.5px;line-height:1.7;color:var(--ink-soft);
  margin-top:8px;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#bo_gall .bo_cate_link{
  display:block;margin-top:12px;
  font-size:12px;letter-spacing:0.2px;color:var(--ink-soft);
}
#bo_gall .gall_info{display:none} /* 작성자/작성일은 카드에서 생략 - 참고 디자인엔 없음 */
#bo_gall .gall_option{top:8px;right:8px}
#bo_gall .gall_option strong{
  background:rgba(255,255,255,0.9);font-size:11px;padding:3px 8px;box-shadow:none;border-radius:0;
}
.new_icon{
  display:inline-block;margin-left:4px;font-size:9px;font-weight:700;
  color:#fff;background:var(--ink);padding:1px 4px;vertical-align:middle;
}
.empty_list{
  text-align:center !important;color:var(--ink-soft);padding:80px 0 !important;
  border:1px dashed var(--line);
}

/* 페이지네이션 */
.pg_wrap{display:flex;justify-content:center;gap:4px;margin:48px 0 8px;list-style:none;padding:0}
.pg_wrap a, .pg_wrap strong{
  display:flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 6px;
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);
}
.pg_wrap strong{border-color:var(--ink);color:var(--ink);font-weight:700}
.pg_wrap a:hover{border-color:var(--ink);color:var(--ink)}

/* 검색 오버레이 */
.bo_sch_wrap{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center}
.bo_sch_wrap .bo_sch{
  position:relative;z-index:2;background:#fff;margin-top:15vh;
  padding:32px;width:90%;max-width:420px;border:1px solid var(--line);
}
.bo_sch_wrap h3{font-size:13px;font-weight:700;margin:0 0 14px}
.bo_sch_wrap .sch_bar{display:flex;border:1px solid var(--ink);margin-top:10px}
.bo_sch_wrap #sfl{border:1px solid var(--line);padding:8px;font-size:12.5px;margin-bottom:6px}
.bo_sch_wrap .sch_input{flex:1;border:0;padding:10px 12px;font-size:13px}
.bo_sch_wrap .sch_btn{width:44px;border:0;background:var(--ink);color:#fff}
.bo_sch_wrap .bo_sch_cls{position:absolute;top:10px;right:10px;border:0;background:none;width:28px;height:28px;color:var(--ink-soft)}
.bo_sch_bg{position:absolute;inset:0;background:rgba(0,0,0,0.4)}

@media (max-width:980px){
  #bo_gall .gall_row{columns:2}
}
@media (max-width:560px){
  #bo_gall .gall_row{columns:1}
  #bo_btn_top{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   BRANDING 게시판 전용 스타일 (skin/board/branding_list)
   카드 구조(제목/설명/태그)는 PROJECTS와 동일하게 사용하고,
   hover 효과만 다르게 - 어두워지는 대신 밝은 톤으로 오버레이됨
   ========================================================================== */
#bo_gall.ln_branding .gall_img{
  background:#f1f1f1;
}
#bo_gall.ln_branding .gall_img img{
  transition:transform .5s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
#bo_gall.ln_branding .gall_img::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(255,255,255,0.55);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
#bo_gall.ln_branding .gall_img a:hover img{
  transform:scale(1.04);
  filter:brightness(1.05);
}
#bo_gall.ln_branding .gall_img:hover::after{opacity:1}

/* hover시 이미지 중앙에 제목 노출 (참고: TÉTO 카드 "RENDEJAVOUS X MAGNOLIA" 스타일) */
#bo_gall.ln_branding .gall_hover_title{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  font-family:Georgia,'Noto Serif KR',serif !important;
  font-style:italic !important;
  font-weight:400 !important; /* 그누보드 기본css의 font-weight:bold 무효화 */
  font-size:16px !important;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#1a2b4c !important; /* 짙은 네이비 - 참고 이미지 색감 */
  max-width:80%;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  text-align:center;
  /* 혹시 모를 상속 스타일 전부 명시적으로 차단 */
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  outline:none !important;
  text-shadow:0 0 20px rgba(255,255,255,1), 0 0 8px rgba(255,255,255,1); /* 배경 없이도 어떤 이미지 위에서든 읽히게 */
}
#bo_gall.ln_branding .gall_img:hover .gall_hover_title{opacity:1}

@media (max-width:980px){
  #bo_gall.ln_branding .gall_row .col-gn-4{width:50%}
}
@media (max-width:560px){
  #bo_gall.ln_branding .gall_row .col-gn-4{width:100%}
}

/* ==========================================================================
   CLIENTS 게시판 전용 스타일 (skin/board/clients_list)
   twoply.com/works BRANDING 참고 - 카드가 여백 없이 붙어서 나오고,
   hover시 이미지가 살짝 축소되며(카드 프레임이 드러나며) 어두워지고
   하단에 흰 글씨 제목이 그라데이션 위로 나타납니다.
   ========================================================================== */
#bo_gall.ln_clients .gall_row{margin:0}
#bo_gall.ln_clients #gall_ul{margin:0}
#bo_gall.ln_clients .gall_row .col-gn-4,
#bo_gall.ln_clients .gall_row .col-gn-3,
#bo_gall.ln_clients .gall_row .col-gn-2{padding:0} /* 카드 사이 여백 제거 - 붙어서 노출 */
#bo_gall.ln_clients .gall_box{margin:0}

#bo_gall.ln_clients .gall_img{
  background:#f1f1f1;
}
#bo_gall.ln_clients .gall_img img{
  width:100%;height:auto;display:block;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
/* hover: 이미지가 살짝 축소되며(카드 프레임이 드러나며) 어두워짐 */
#bo_gall.ln_clients .gall_img a:hover img{
  transform:scale(0.92);
  filter:brightness(0.6);
}

/* 제목을 이미지 위 하단 오버레이 캡션으로 - hover시에만 노출 */
#bo_gall.ln_clients .gall_img{position:relative}
#bo_gall.ln_clients .ln_client_caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 22px 22px;
  font-size:13px;font-weight:700;letter-spacing:0.3px;
  color:#fff;text-align:center;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 100%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
#bo_gall.ln_clients .gall_img a:hover .ln_client_caption{opacity:1}

#bo_gall.ln_clients .gall_info,
#bo_gall.ln_clients .gall_option{display:none} /* 작성자/조회수 등은 카드에서 숨김 */

/* 이미지 아래 원래 제목 박스는 완전히 숨김 (hover시 이미지 위 흰 글씨로만 노출) */
#bo_gall.ln_clients .gall_text_href{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:980px){
  #bo_gall.ln_clients .gall_row .col-gn-4{width:50%}
}
@media (max-width:560px){
  #bo_gall.ln_clients .gall_row .col-gn-4{width:100%}
  #bo_gall.ln_clients .gall_li{margin-bottom:14px} /* 1열로 쌓일 때 카드끼리 붙어보이지 않도록 세로 간격 추가 */
}


/* ==========================================================================
   게시판 - 상세 (view.skin.php)
   .ln_view_left(텍스트) / .ln_view_right(이미지) 두 개의 실제 컬럼으로 분리.
   우측은 position:sticky로 스크롤 중 화면에 붙어있고, flex 레이아웃 안에서만
   움직이므로 다른 영역을 덮어쓸 수 없습니다 (예전 position:fixed 방식보다 안전).
   ========================================================================== */
#bo_v{width:auto !important}
#bo_v.ln_split{
  display:flex;
  align-items:flex-start;
  gap:40px;
}
.ln_view_left{
  flex:0 0 500px;
  max-width:500px;
}
#bo_v:not(.ln_split) .ln_view_left{flex:0 0 auto;max-width:720px;width:100%}

#bo_v header{margin-bottom:24px}
.ln_view_back{margin:0 0 28px}
.ln_view_back a{
  font-size:11px;font-weight:700;letter-spacing:1px;
  color:var(--ink-soft);text-transform:uppercase;
}
.ln_view_back a:hover{color:var(--ink)}

#bo_v_title{
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;font-weight:700;
  font-size:20px;line-height:1.4;margin:0;
  letter-spacing:0;
  word-break:normal;overflow-wrap:normal;
}
#bo_v_title .bo_v_tit{
  display:block;font-size:1em !important;margin:0 !important;
  word-break:normal !important;overflow-wrap:normal !important;
  font-family:inherit;font-weight:inherit;
}
.bo_v_cate{
  display:block;font-size:11px;font-weight:700;letter-spacing:1.5px;
  color:var(--ink-soft);margin-bottom:8px;
}

#bo_v_info{margin-bottom:20px}
#bo_v_info h2{position:absolute;font-size:0;overflow:hidden}
.profile_info{
  display:block;
  padding-top:14px;margin-top:14px;
  font-size:12px;color:var(--ink-soft);
}
.profile_info strong{color:var(--ink-soft);font-weight:400}
.pf_img{display:none} /* 프로필 이미지는 미니멀하게 생략 */
.ln_meta_dot{margin:0 6px;color:var(--line)}
.ln_meta_cmt{color:var(--ink-soft)}
.ln_meta_cmt:hover{color:var(--ink);text-decoration:underline}

/* 상단 버튼은 케밥메뉴 하나로 축소 - 화면 우측 살짝 위 작게 */
#bo_v_top{
  position:absolute;top:0;right:0;
  margin:0;
}
#bo_v_top .btn_bo_user{position:relative}
#bo_v_top .btn{
  width:28px;height:28px;
  border:0;background:none;color:var(--ink-soft);
}
#bo_v_top .btn:hover{color:var(--ink)}
header{position:relative}

#bo_v_share{
  margin:32px 0 0;
  padding-top:20px;border-top:1px solid var(--line);
}
#bo_v_share a.btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:var(--ink-soft);border:0;
  padding:0;height:auto;line-height:1.4;font-weight:400;
  width:auto;border-radius:0;margin-right:16px;
}
#bo_v_share a.btn:hover{color:var(--ink)}

#bo_v_atc_title{position:absolute;font-size:0;overflow:hidden}
#bo_v_con{
  font-size:14.5px;line-height:1.9;color:var(--ink);
  margin-bottom:24px;word-break:break-word;
}
#bo_v_con p:empty{display:none} /* 혹시 남는 빈 문단이 있어도 화면에 안 보이게 */

/* CLIENTS 게시판만: 본문에 빈 줄 스페이서가 없는 글도 자연스럽게 문단 간격이 생기도록
   (PROJECTS/BRANDING은 원문에 빈 줄이 있어 이미 잘 나오고 있으므로 건드리지 않음) */
#bo_v.ln_bo_clients #bo_v_con p{margin:0 0 16px}
#bo_v.ln_bo_clients #bo_v_con p:last-child{margin-bottom:0}

#bo_v_act{display:flex;gap:16px;margin:24px 0}
.bo_v_act_gng a, #bo_v_act span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;border:1px solid var(--line);padding:8px 16px;color:var(--ink);
}
.bo_v_act_gng a:hover{border-color:var(--ink)}

#bo_v_file, #bo_v_link{margin:28px 0}
#bo_v_file h2, #bo_v_link h2{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink-soft);margin:0 0 10px}
#bo_v_file ul, #bo_v_link ul{list-style:none;margin:0;padding:0}
#bo_v_file li, #bo_v_link li{font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}

.bo_v_nb{list-style:none;margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.bo_v_nb li{display:flex;justify-content:space-between;font-size:12.5px;padding:8px 0;color:var(--ink-soft)}
.bo_v_nb a{color:var(--ink)}

/* 우측 이미지 컬럼 - 가로형은 한 줄 꽉차게, 세로형은 2개씩 짝지어 노출 */
.ln_view_right{
  flex:1 1 0;
  min-width:0;
}
.ln_view_right .ln_img_row{margin:0 0 12px}
.ln_view_right .ln_img_row:last-child{margin-bottom:0}
.ln_view_right img{width:100%;height:auto;display:block}

.ln_view_right .ln_img_pair{display:flex;gap:12px}
.ln_view_right .ln_img_pair > *{flex:1 1 0;min-width:0}
.ln_view_right .ln_img_pair img{height:100%;object-fit:cover}

/* 데스크탑에서만: 좌측 텍스트가 스크롤 중 화면에 붙어서 고정, 우측 이미지는 페이지 스크롤을 따라 자연스럽게 흘러감 */
@media (min-width:981px){
  .ln_view_left{
    position:sticky;
    top:calc(var(--nav-h) + 32px);
    align-self:flex-start;
  }
}

/* 모바일/태블릿(980px 이하)에서는 좌우 분할 대신 세로로 쌓이게 */
@media (max-width:980px){
  #bo_v.ln_split{flex-direction:column;gap:32px}
  /* flex:1 1 0(가로 배치용)이 세로 배치에선 높이가 0으로 찌그러지는 버그가 있어
     모바일에서는 flex-basis를 auto로 바꿔 내용물 크기 그대로 나오게 함 */
  .ln_view_right{flex:1 1 auto}
}

/* 댓글 */
#bo_vc{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
#bo_vc h2{position:absolute;font-size:0;overflow:hidden}
.cmt_btn{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:none;
  padding:10px 16px;font-size:13px;color:var(--ink);margin-top:24px;width:auto;height:auto;
}
.cmt_btn:hover{border-color:var(--ink)}
#bo_vc article{padding:16px 0;border-top:1px solid var(--line)}
#bo_vc .pf_img{display:none}

/* -------------------- 글쓰기 폼 (write.skin.php - 기본 톤 유지, 최소 정리) -------------------- */
#bo_w{max-width:760px}
.write_div{margin-bottom:16px}
.frm_input{border:1px solid var(--line);padding:10px 12px;font-size:13.5px;border-radius:0}
.btn_confirm .btn{border-radius:0}

/* 이미지 여러장 드래그앤드롭 업로더 */
.ln_uploader_wrap{margin-bottom:24px}
.ln_thumb_wrap{margin-bottom:24px}
.ln_thumb_box{
  width:160px;height:160px;
  border:1.5px dashed var(--line);
  background:#fafafa;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:12px;
  transition:border-color .2s ease, background .2s ease;
  position:relative;
  overflow:hidden;
}
.ln_thumb_box:hover, .ln_thumb_box:focus, .ln_thumb_box.ln_dropzone_over{
  border-color:var(--ink);background:#f2f2f2;outline:none;
}
.ln_thumb_box .ln_dropzone_main{margin:0;font-size:12px;font-weight:600;color:var(--ink-soft)}
.ln_thumb_box .ln_preview_item{position:absolute;inset:0;aspect-ratio:auto}
.ln_uploader_label{
  display:block;margin-bottom:10px;
  font-size:13px;font-weight:700;color:var(--ink);
  position:static !important;width:auto !important;height:auto !important;
  line-height:1.4 !important;text-align:left !important;
  white-space:normal;
}
.ln_dropzone{
  border:1.5px dashed var(--line);
  padding:36px 20px;
  text-align:center;
  cursor:pointer;
  background:#fafafa;
  transition:border-color .2s ease, background .2s ease;
}
.ln_dropzone:hover, .ln_dropzone:focus, .ln_dropzone.ln_dropzone_over{
  border-color:var(--ink);
  background:#f2f2f2;
  outline:none;
}
.ln_dropzone_main{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink)}
.ln_dropzone_sub{margin:0;font-size:12px;color:var(--ink-soft)}

.ln_preview_grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;
  margin-top:14px;
}
.ln_preview_item{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f2f2f2;
}
.ln_preview_item img{width:100%;height:100%;object-fit:cover;display:block}
.ln_preview_remove{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;
  border:0;border-radius:50%;
  background:rgba(0,0,0,0.6);color:#fff;
  font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ln_preview_remove:hover{background:#000}
.ln_preview_marked_delete{opacity:0.35}
.ln_preview_marked_delete .ln_preview_remove{background:#e03131}
.ln_preview_existing::after{
  content:"기존";
  position:absolute;bottom:4px;left:4px;
  font-size:10px;font-weight:700;color:#fff;
  background:rgba(0,0,0,0.6);
  padding:2px 6px;
  pointer-events:none;
}

.ln_slot_toggle{margin-top:14px;font-size:12px;color:var(--ink-soft)}
.ln_slot_toggle summary{cursor:pointer;padding:6px 0}
.ln_slot_toggle summary:hover{color:var(--ink)}
.ln_slot_list{margin-top:10px}
.ln_slot_list .bo_w_flie{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}