@charset "utf-8";
/* 소식지 - 사용자 페이지 표지 목록
   그리드 열 수와 표지 비율은 관리자 설정에 따라 페이지에서 덮어씁니다. */

.nl-wrap { width:100%; max-width:1400px; margin:0 auto; padding:70px 20px 100px; box-sizing:border-box; }

/* 테마의 con_title 은 #pro_wrap / #rolling_box 안에서만 정의되어 있어 여기서 따로 맞춥니다 */
.nl-wrap .con_title { width:100%; text-align:center; padding:0 15px 45px; }
.nl-wrap .con_title h3 { display:block; font-size:2.8em; color:#000; line-height:1.4; font-weight:700; margin:0; }
.nl-wrap .con_title p { display:block; margin:10px 0 0; font-size:1.15em; color:#777; line-height:1.6; }

/* ---------- 표지 그리드 ---------- */
.nl-grid { display:grid; gap:34px 26px; list-style:none; margin:0; padding:0; }
.nl-item { margin:0; padding:0; }

.nl-link { display:block; text-decoration:none; color:inherit; }

.nl-thumb {
    display:block; position:relative; width:100%;
    background:#f2f2f2; overflow:hidden;
    border:1px solid #e5e5e5; box-sizing:border-box;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    transition:box-shadow .25s ease, transform .25s ease;
}
/* 비율 유지용 (padding-top 값은 페이지에서 지정) */
.nl-thumb::before { content:''; display:block; width:100%; }

.nl-thumb img {
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:cover; object-position:top center; display:block;
}

.nl-noimg {
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    color:#aaa; font-size:14px; letter-spacing:-.02em;
}

/* 마우스 올렸을 때 */
.nl-hover {
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(21,146,194,.82); opacity:0;
    transition:opacity .25s ease;
}
.nl-hover em {
    font-style:normal; color:#fff; font-size:15px; font-weight:600; letter-spacing:-.02em;
    border:1.5px solid rgba(255,255,255,.9); border-radius:30px; padding:9px 22px;
}
.nl-link:hover .nl-thumb, .nl-link:focus .nl-thumb { box-shadow:0 10px 26px rgba(0,0,0,.16); transform:translateY(-4px); }
.nl-link:hover .nl-hover, .nl-link:focus .nl-hover { opacity:1; }
.nl-link:focus { outline:none; }
.nl-link:focus-visible .nl-thumb { outline:3px solid #1592c2; outline-offset:3px; }

/* ---------- 표지 아래 정보 ---------- */
.nl-info { display:block; padding:15px 2px 0; }
.nl-tit {
    display:block; font-size:16px; font-weight:600; color:#222; line-height:1.5;
    letter-spacing:-.02em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nl-meta { display:block; margin-top:7px; font-size:13.5px; color:#8b949b; }
.nl-meta i { font-style:normal; margin:0 6px; color:#d5d5d5; }

/* ---------- 지난 소식지 버튼 ---------- */
.nl-more { text-align:center; margin-top:70px; }
.nl-more-btn {
    display:inline-flex; align-items:center; gap:11px;
    padding:17px 44px; border:1.5px solid #222; border-radius:40px;
    color:#222; background:#fff; text-decoration:none;
    font-size:16px; font-weight:600; letter-spacing:-.02em;
    transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.nl-more-btn:hover, .nl-more-btn:focus { background:#222; color:#fff; border-color:#222; }
.nl-more-ico {
    width:16px; height:16px; display:inline-block; position:relative; flex-shrink:0;
}
.nl-more-ico::before, .nl-more-ico::after {
    content:''; position:absolute; border:1.5px solid currentColor; box-sizing:border-box;
}
.nl-more-ico::before { width:11px; height:11px; left:0; bottom:0; }
.nl-more-ico::after  { width:11px; height:11px; right:0; top:0; border-bottom:0; border-left:0; }

/* ---------- 비어 있을 때 ---------- */
.nl-empty { text-align:center; padding:90px 20px; color:#8b949b; background:#fafafa; border:1px solid #ececec; }
.nl-empty-t { font-size:19px; color:#555; margin:0 0 10px; font-weight:600; }
.nl-empty p { margin:0; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
    .nl-wrap { padding:50px 18px 80px; }
    .nl-wrap .con_title h3 { font-size:2.2em; }
    .nl-grid { gap:28px 20px; }
}
@media (max-width: 768px) {
    .nl-wrap { padding:40px 15px 60px; }
    .nl-wrap .con_title { padding-bottom:32px; }
    .nl-wrap .con_title h3 { font-size:1.8em; }
    .nl-wrap .con_title p { font-size:1em; }
    .nl-grid { gap:24px 14px; }
    .nl-tit { font-size:14.5px; }
    .nl-meta { font-size:12.5px; }
    .nl-more { margin-top:46px; }
    .nl-more-btn { padding:15px 34px; font-size:15px; }
    /* 모바일에서는 hover 상태가 남으므로 표시하지 않습니다 */
    .nl-hover { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .nl-thumb, .nl-hover, .nl-more-btn { transition:none; }
    .nl-link:hover .nl-thumb { transform:none; }
}

/* ── 검색 ────────────────────────────────────── */
.nl-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.nl-search { margin:0 0 34px; }
.nl-search-in { display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:center; }

.nl-sel, .nl-inp {
    height:46px; padding:0 15px; border:1px solid #d3d8dc; border-radius:5px;
    font-size:15px; font-family:inherit; color:#454d54; background:#fff; box-sizing:border-box;
}
.nl-sel { min-width:140px; }
.nl-inp { width:300px; max-width:100%; }
.nl-sel:focus, .nl-inp:focus { outline:none; border-color:#7AAE2E; box-shadow:0 0 0 3px rgba(147,194,70,.25); }

.nl-sbtn {
    height:46px; padding:0 30px; border:0; border-radius:5px; cursor:pointer;
    background:#7AAE2E; color:#fff; font-size:15px; font-weight:600; font-family:inherit;
}
.nl-sbtn:hover { background:#5F8F1F; }
.nl-sbtn:focus-visible { outline:2px solid #5F8F1F; outline-offset:2px; }

.nl-sreset { display:inline-flex; align-items:center; height:46px; padding:0 18px;
    color:#8b949b; font-size:14px; text-decoration:none; }
.nl-sreset:hover { color:#5F8F1F; text-decoration:underline; }

.nl-sresult { margin:14px 0 0; text-align:center; font-size:14.5px; color:#8b949b; }
.nl-sresult strong { color:#5F8F1F; font-weight:700; }

@media (max-width:768px) {
    .nl-search-in { flex-direction:column; align-items:stretch; }
    .nl-sel, .nl-inp, .nl-sbtn { width:100%; }
    .nl-sreset { justify-content:center; }
}