@charset "utf-8";
/* 평화의 바다 - 관련기관(link) 게시판 스킨 */

.sop-link{--sea-900:#0b2e4f;--sea-700:#0f4c81;--sea-500:#1f78c1;--sea-300:#8ec3ea;--sea-100:#e6f1fa;--sea-50:#f3f8fd;--ink:#1d2a36;--ink-2:#4a5866;--line:#d7e5f2;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif;color:var(--ink);margin:0 auto 60px}
.sop-link *{box-sizing:border-box}
.sop-link a{text-decoration:none}

/* 분류 탭 */
.sop-link .sl-cate,#bo_list.sop-link #bo_cate{margin:0 0 28px;padding:0;background:none;border:0}
#bo_list.sop-link #bo_cate ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
#bo_list.sop-link #bo_cate ul:after{display:none}
#bo_list.sop-link #bo_cate li{display:block;margin:0;padding:0;list-style:none}
#bo_list.sop-link #bo_cate a{display:inline-block;padding:9px 20px;border-radius:30px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:15px;font-weight:500;line-height:1.2;transition:.2s}
#bo_list.sop-link #bo_cate a:hover{border-color:var(--sea-500);color:var(--sea-700)}
#bo_list.sop-link #bo_cate #bo_cate_on{background:var(--sea-700);border-color:var(--sea-700);color:#fff;font-weight:700}

/* 상단 정보 */
.sop-link .sl-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding-bottom:14px;border-bottom:2px solid var(--sea-900)}
.sop-link .sl-total{margin:0;font-size:15px;color:var(--ink-2)}
.sop-link .sl-total i{color:var(--sea-500);margin-right:4px}
.sop-link .sl-total strong{color:var(--sea-700);font-size:17px}
.sop-link .sl-admin{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sop-link .sl-admin li{list-style:none}
.sop-link .sl-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink-2);font-size:13px;cursor:pointer}
.sop-link .sl-btn:hover{border-color:var(--sea-500);color:var(--sea-700)}
.sop-link .sl-btn.is-primary{background:var(--sea-700);border-color:var(--sea-700);color:#fff}
.sop-link .sl-chkall{display:inline-flex;align-items:center;gap:5px;height:34px;font-size:13px;color:var(--ink-2);cursor:pointer}

/* 분류 묶음 : 왼쪽 1/4 분류, 오른쪽 3/4 카드 */
.sop-link .sl-group{display:grid;grid-template-columns:1fr 3fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.sop-link .sl-head a{position:sticky;top:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;height:100%;padding:24px 14px;border-radius:16px;background:linear-gradient(160deg,var(--sea-100),var(--sea-50));border:1px solid var(--line);color:var(--sea-900);text-align:center;transition:.2s}
.sop-link .sl-head a:hover{background:linear-gradient(160deg,#d8eaf8,var(--sea-100))}
.sop-link .sl-head-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--sea-700);color:#fff;font-size:24px;box-shadow:0 6px 14px rgba(15,76,129,.25)}
.sop-link .sl-head strong{font-size:20px;font-weight:800;letter-spacing:-.02em}
.sop-link .sl-head em{font-style:normal;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.sop-link .sl-head-cnt{margin-top:2px;padding:3px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--sea-700);font-weight:700}

/* 카드 */
.sop-link .sl-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.sop-link .sl-item{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sop-link .sl-card{display:flex;flex-direction:column;flex:1;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(11,46,79,.06);color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.sop-link .sl-card:hover,.sop-link .sl-card:focus{transform:translateY(-4px);border-color:var(--sea-300);box-shadow:0 12px 26px rgba(11,46,79,.14)}
.sop-link .sl-img{display:block;position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--sea-100)}
.sop-link .sl-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sop-link .sl-card:hover .sl-img img{transform:scale(1.04)}
.sop-link .sl-noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:10px;background:linear-gradient(125deg,var(--sea-900),var(--sea-500));color:#fff;text-align:center}
.sop-link .sl-noimg i{font-size:30px;opacity:.8}
.sop-link .sl-noimg b{font-size:15px;line-height:1.3}
.sop-link .sl-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 16px}
.sop-link .sl-tit{display:block;font-size:17px;font-weight:800;line-height:1.35;color:var(--sea-900);letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere}
.sop-link .sl-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2);word-break:keep-all}
.sop-link .sl-go{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px}
.sop-link .sl-dom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#7a8896}
.sop-link .sl-go-btn{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;background:var(--sea-50);border:1px solid var(--line);color:var(--sea-700);font-size:13px;font-weight:700;transition:.2s}
.sop-link .sl-card:hover .sl-go-btn{background:var(--sea-700);border-color:var(--sea-700);color:#fff}

/* 관리자 도구 */
.sop-link .sl-tools{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px}
.sop-link .sl-order{display:inline-block;min-width:38px;padding:2px 6px;border-radius:4px;background:var(--sea-100);color:var(--sea-700);font-weight:700;font-size:12px;text-align:center;letter-spacing:.05em}
.sop-link .sl-chk{display:inline-flex;align-items:center;padding:0 4px;cursor:pointer}
.sop-link .sl-edit{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:5px;border:1px solid var(--line);background:#fff;color:var(--ink-2)}
.sop-link .sl-edit:hover{color:var(--sea-700);border-color:var(--sea-500)}

.sop-link .sl-empty{padding:60px 0;text-align:center;color:var(--ink-2);font-size:15px}
.sop-link .sl-empty i{color:var(--sea-500)}

/* 검색 */
.sop-link .sl-sch{display:flex;justify-content:center;align-items:center;gap:6px;margin:30px auto 0;max-width:460px}
.sop-link .sl-sch input[type=text]{flex:1;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:24px;font-size:14px;outline:none}
.sop-link .sl-sch input[type=text]:focus{border-color:var(--sea-500);box-shadow:0 0 0 3px rgba(31,120,193,.15)}
.sop-link .sl-sch button{width:44px;height:44px;border:0;border-radius:50%;background:var(--sea-700);color:#fff;font-size:16px;cursor:pointer}
.sop-link .sl-sch-reset{font-size:13px;color:var(--sea-700);white-space:nowrap}

/* 반응형 */
@media (max-width:1024px){
  .sop-link .sl-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .sop-link .sl-group{grid-template-columns:1fr;gap:14px;padding:18px 0}
  .sop-link .sl-head a{position:static;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;min-height:0;padding:14px 16px;gap:10px;text-align:left}
  .sop-link .sl-head-ic{width:40px;height:40px;font-size:18px}
  .sop-link .sl-head strong{font-size:18px}
  .sop-link .sl-head em{flex:1;min-width:0}
  .sop-link .sl-head-cnt{margin:0}
  #bo_list.sop-link #bo_cate a{padding:7px 14px;font-size:14px}
}
@media (max-width:520px){
  .sop-link .sl-list{grid-template-columns:1fr;gap:16px}
  .sop-link .sl-head em{display:none}
}