/* ============================================================
   네이버 메인형 포털 홈 (PC index 전용) — 전체 가로 1440px
   구성: 검색 히어로 → 서비스 스트립 → 회색 밴드(본문 2단: 메인 + 우측 300px)
   콘텐츠 컴포넌트(.clab_card, .cp_news, .cp_vcard)는 기존 CSS 를 재사용하고
   여기서는 "틀"(밴드·박스·사이드 위젯)만 정의한다.
   ============================================================ */

.nv_home{
    --nv-line:#e5e8ee;
    --nv-fg:#191924;
    --nv-muted:#6b7280;
    --nv-brand:#ff7a1a;
    --nv-brand-dark:#e5620a;
    --nv-band:#f4f5f8;
    color:var(--nv-fg);
}
.nv_home *{ box-sizing:border-box; }
.nv_wrap{ max-width:1440px; margin:0 auto; padding:0 24px; }

/* ─────────────────────────────────────────────
   검색 히어로 (네이버 로고+검색창 블록)
   ───────────────────────────────────────────── */
.nv_search{ padding:46px 24px 28px; text-align:center; background:#fff; }
.nv_search__logo{ margin:0 0 20px; font-size:38px; font-weight:900; letter-spacing:-.045em; line-height:1; }
.nv_search__logo a{ display:inline-flex; align-items:baseline; gap:4px; color:var(--nv-fg); text-decoration:none; }
.nv_search__logo i{ width:9px; height:9px; border-radius:50%; background:var(--nv-brand); display:inline-block; }

.nv_search__box{ position:relative; max-width:640px; margin:0 auto; }
.nv_search__box input{
    width:100%; height:54px; padding:0 62px 0 22px;
    border:2px solid var(--nv-brand); border-radius:16px;
    background:#fff; font-size:16px; color:var(--nv-fg);
}
.nv_search__box input::placeholder{ color:#b0b2bc; }
.nv_search__box input:focus{ outline:none; box-shadow:0 0 0 4px rgba(255,122,26,.13); }
.nv_search__box button{
    position:absolute; right:7px; top:7px;
    width:40px; height:40px; padding:0; border:0; border-radius:12px;
    background:var(--nv-brand); color:#fff; font-size:16px; cursor:pointer;
    transition:background .13s;
}
.nv_search__box button:hover{ background:var(--nv-brand-dark); }

/* 추천 키워드 칩 (clab_kw 스타일 재사용, 가운데 정렬만) */
.nv_search__kw{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:860px; margin:18px auto 0; }

/* ─────────────────────────────────────────────
   서비스 스트립 (네이버 메일·카페·블로그 줄)
   ───────────────────────────────────────────── */
.nv_gnb{ background:#fff; border-top:1px solid var(--nv-line); border-bottom:1px solid var(--nv-line); }
.nv_gnb__in{
    max-width:1440px; margin:0 auto; padding:0 16px;
    display:flex; align-items:center; justify-content:center; gap:2px;
    overflow-x:auto; scrollbar-width:none;
}
.nv_gnb__in::-webkit-scrollbar{ display:none; }
.nv_gnb__in a{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 18px;
    font-size:15px; font-weight:700; color:#33343d; text-decoration:none; white-space:nowrap;
    border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:color .13s;
}
.nv_gnb__in a i{ color:var(--nv-brand); font-size:15px; }
.nv_gnb__in a:hover{ color:var(--nv-brand-dark); border-bottom-color:var(--nv-brand); }
.nv_gnb__in a.is-accent{ color:var(--nv-brand-dark); }

/* ─────────────────────────────────────────────
   본문 밴드 (회색 배경 + 흰 박스)
   ───────────────────────────────────────────── */
.nv_band{ background:var(--nv-band); padding:24px 0 64px; }

.nv_body{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.nv_main{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.nv_side{ position:sticky; top:76px; display:flex; flex-direction:column; gap:20px; min-width:0; }

/* 공통 박스 */
.nv_box{ background:#fff; border:1px solid var(--nv-line); border-radius:16px; padding:20px 22px; }
.nv_box .cp_sec__head{ margin-bottom:15px; }
.nv_box .cp_sec__head h2{ font-size:18px; }

/* 상단 가로 배너 (adbanner main_top) */
.nv_banner{ margin:0 0 20px; border-radius:16px; overflow:hidden; }
.nv_banner img{ width:100%; height:auto; display:block; }

/* ─────────────────────────────────────────────
   우측 사이드 위젯
   ───────────────────────────────────────────── */

/* 로그인 박스 */
.nv_login{ text-align:center; }
.nv_login__msg{ margin:2px 0 14px; font-size:13.5px; line-height:1.6; color:var(--nv-muted); }
.nv_login__btn{
    display:flex; align-items:center; justify-content:center;
    height:46px; border-radius:12px;
    background:var(--nv-brand); color:#fff; text-decoration:none;
    font-size:15px; font-weight:800; letter-spacing:-.01em;
    box-shadow:0 6px 16px rgba(255,122,26,.24);
    transition:background .13s;
}
.nv_login__btn:hover{ background:var(--nv-brand-dark); color:#fff; }
.nv_login__sub{ margin:12px 0 2px; font-size:12.5px; color:#9ca3af; }
.nv_login__sub a{ color:var(--nv-brand-dark); font-weight:700; text-decoration:none; margin-left:4px; }
.nv_login__sub a:hover{ text-decoration:underline; }

.nv_login__hello{ font-size:14.5px; color:#33343d; margin:2px 0 12px; }
.nv_login__hello b{ color:var(--nv-fg); }
.nv_login__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.nv_login__links a{
    padding:8px 12px; border:1px solid var(--nv-line); border-radius:9px;
    background:#fafafc; font-size:12.5px; font-weight:600; color:#55565f; text-decoration:none;
}
.nv_login__links a:hover{ border-color:var(--nv-brand); color:var(--nv-brand-dark); }
.nv_login__links a.nv_login__adm{ background:#fff1e6; border-color:#ffd9b8; color:var(--nv-brand-dark); }

/* 사이드 배너 (adbanner side) */
.nv_sidebn{ border-radius:16px; overflow:hidden; }
.nv_sidebn img{ width:100%; height:auto; display:block; }

/* 많이 본 뉴스 랭킹 */
.nv_rank__list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.nv_rank__list li + li{ border-top:1px solid #f2f3f6; }
.nv_rank__list a{
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 2px; text-decoration:none; color:inherit;
}
.nv_rank__list em{
    flex:0 0 18px; font-style:normal; font-size:14px; font-weight:800;
    color:#b0b2bc; text-align:center; line-height:1.45;
}
.nv_rank__list em.is-top{ color:var(--nv-brand); }
.nv_rank__list span{
    flex:1 1 auto; min-width:0;
    font-size:13.5px; font-weight:600; line-height:1.45; color:#33343d;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nv_rank__list a:hover span{ color:var(--nv-brand-dark); }

/* 유틸 링크 (새글/접속자/FAQ/문의) */
.nv_util{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; }
.nv_util a{
    display:flex; align-items:center; gap:8px;
    padding:11px 12px; border-radius:10px;
    background:#f6f6f9; font-size:13px; font-weight:600; color:#55565f; text-decoration:none;
}
.nv_util a i{ color:#9ca3af; font-size:13px; }
.nv_util a:hover{ background:#fff1e6; color:var(--nv-brand-dark); }
.nv_util a:hover i{ color:var(--nv-brand); }

/* ─────────────────────────────────────────────
   반응형
   ───────────────────────────────────────────── */
@media (max-width:1100px){
    .nv_body{ grid-template-columns:1fr; }
    .nv_side{ position:static; display:grid; grid-template-columns:1fr 1fr; align-items:start; }
}
@media (max-width:720px){
    .nv_search{ padding:32px 16px 22px; }
    .nv_search__logo{ font-size:30px; }
    .nv_search__box input{ height:48px; font-size:15px; }
    .nv_search__box button{ top:5px; right:5px; width:38px; height:38px; }
    .nv_gnb__in{ justify-content:flex-start; }
    .nv_gnb__in a{ padding:13px 12px; font-size:14px; }
    .nv_side{ grid-template-columns:1fr; }
    .nv_band{ padding:16px 0 44px; }
    .nv_wrap{ padding:0 14px; }
    .nv_box{ padding:16px; border-radius:14px; }
}