@charset "utf-8";

/* =========================================================
   셀팅 닥터스노트 — 목록 (카드형)
   ========================================================= */

/* ----- 상단 비주얼 배너 ----- */
.sub_visual { text-align: center; width: 100%; height: 450px; position: relative;
    background-image: url(../images/Visual.png); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.sub_visual .inner { width: 100%; height: 100%; }
.sub_visual .table { display: table; }
.sub_visual .cell { display: table-cell; vertical-align: middle; }
.sub_visual .text_box { text-align: center; color: #fff; }
.sub_visual .text_box .add_text { font-family: "El Messiri", sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 20px; }
.sub_visual .text_box h3 { font-size: 40px; font-weight: 500; line-height: 1.3; }

/* ----- 본문 래퍼 ----- */
.note_wrap { padding: 70px 16.66% 100px; box-sizing: border-box; }

/* 제목 */
.note_title { text-align: center; font-size: 46px; line-height: 1.2; letter-spacing: -0.02em; color: var(--gray-color-1000); margin-bottom: 36px; }

/* ----- 검색창 ----- */
.note_search { max-width: 760px; margin: 0 auto 24px; }
.note_search .search_field { display: flex; align-items: center; border: 1px solid #DFDFDF; border-radius: 100px; padding: 6px 10px 6px 28px; box-sizing: border-box; }
.note_search input.search { flex: 1; border: none; outline: none; background: transparent;
    font-family: 'Spoqa Han Sans Neo', sans-serif; font-weight: 300; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #242424; }
.note_search input.search::placeholder { color: #999; }
.note_search .search_btn { flex: none; width: 44px; height: 44px; border: none; cursor: pointer;
    background: url(../images/sub05_05_btn_search.png) center no-repeat; background-size: 24px 24px; font-size: 0; }

/* ----- 인기 검색어 ----- */
.hot_keyword { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; }
.hot_keyword .label { font-weight: 500; font-size: 15px; color: var(--gray-color-1000); margin-right: 6px; }
.hot_keyword ul { display: flex; flex-wrap: wrap; gap: 8px; }
.hot_keyword li a { display: block; padding: 8px 18px; border: 1px solid #E2E2E2; border-radius: 100px;
    font-size: 15px; line-height: 1.2; color: #666; transition: all .15s; white-space: nowrap; }
.hot_keyword li a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.hot_keyword li a.on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* ----- 글쓰기 버튼 ----- */
.write_btn_box { text-align: right; margin-bottom: 20px; }
.write_btn_box .btn_write { background: var(--primary-color); color: #fff; border: none; border-radius: 8px;
    padding: 11px 28px; cursor: pointer; font-weight: 700; font-size: 16px; }

/* ----- 카드 그리드 ----- */
.note_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
.note_list > li { min-width: 0; }
.note_list > li.secret { opacity: .45; }

.note_list .card { display: flex; flex-direction: column; height: 100%; }

.note_list .thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f3f3f3; }
.note_list .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note_list .thumb .no_image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    color: #aaa; font-size: 14px; background: rgba(170, 173, 176, .25); }

.note_list .card_body { padding-top: 18px; display: flex; flex-direction: column; flex: 1; }

.note_list .cate { display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 4px;
    background: rgba(100, 24, 60, 0.08); color: var(--primary-color); font-weight: 500; font-size: 13px; line-height: 1.2; margin-bottom: 12px; }

.note_list .subject { font-weight: 600; font-size: 19px; line-height: 1.4; color: var(--gray-color-1000);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.note_list .desc { margin-top: 10px; font-weight: 300; font-size: 15px; line-height: 1.6; color: #777;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.note_list .view { margin-top: 16px; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    font-size: 14px; font-weight: 500; color: #555; }
.note_list .view i { font-style: normal; font-size: 16px; line-height: 1; }
.note_list .card:hover .view { color: var(--primary-color); }
.note_list .card:hover .subject { color: var(--primary-color); }

.note_list .tags { margin-top: 16px; padding-top: 14px; border-top: 1px solid #ECECEC;
    display: flex; flex-wrap: wrap; gap: 6px; }
.note_list .tags span { font-size: 13px; color: #b0b0b0; }

/* ----- 빈 목록 ----- */
.empty_list { width: 100%; text-align: center; padding: 80px 0; color: #888; font-size: 16px; }

/* ----- 페이지네이션 (그누보드 pg_wrap) ----- */
.pagination_box { margin-top: 70px; text-align: center; }
.pagination_box .pg_wrap { display: inline-block; }
.pagination_box .pg { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pagination_box .pg_page,
.pagination_box .pg_current { display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 6px; border-radius: 50%;
    font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; color: #555; text-decoration: none; box-sizing: border-box; }
.pagination_box a.pg_page:hover { color: var(--primary-color); }
.pagination_box .pg_current { background: rgba(100, 24, 60, 0.10); color: var(--primary-color); font-weight: 600; }
.pagination_box .pg_start, .pagination_box .pg_prev,
.pagination_box .pg_next, .pagination_box .pg_end { color: #999; font-size: 16px; }

/* =========================================================
   반응형
   ========================================================= */
@media screen and (max-width:1540px) {
    .note_wrap { padding: 70px 12% 100px; }
}
@media screen and (max-width:1440px) {
    .note_wrap { padding: 70px 8% 100px; }
}
@media screen and (max-width:1058px) {
    .note_wrap { padding: 60px 6% 90px; }
}

/* 태블릿 */
@media screen and (max-width:1024px) {
    .note_title { font-size: 30px; margin-bottom: 28px; }
    .note_list { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .note_list .subject { font-size: 17px; }
}

/* 모바일 */
@media screen and (max-width:768px) {
    .sub_visual { height: 240px; background-image: url(../images/img_visual_bg_mo.jpg); background-position: center center; }
    .sub_visual .text_box h3 { font-size: 26px; }
    .sub_visual .text_box .add_text { font-size: 20px; }

    .note_wrap { padding: 40px 5% 60px; }
    .note_title { font-size: 24px; margin-bottom: 22px; }

    .note_search { margin-bottom: 18px; }
    .note_search .search_field { padding: 4px 8px 4px 20px; }
    .note_search input.search { font-size: 15px; }
    .note_search .search_btn { width: 38px; height: 38px; background-size: 20px 20px; }

    .hot_keyword { margin-bottom: 36px; }
    .hot_keyword .label { width: 100%; text-align: center; margin: 0 0 4px; }
    .hot_keyword li a { padding: 7px 14px; font-size: 14px; }

    .note_list { grid-template-columns: 1fr; gap: 28px; }
    .note_list .subject { font-size: 18px; }

    .pagination_box { margin-top: 40px; }
    .pagination_box .pg_page, .pagination_box .pg_current { min-width: 34px; height: 34px; font-size: 16px; }
}