/* assets/css/home.css
   SV166: 메인페이지(index.php) 개편 전용 스타일.
   - 방문자에게 가장 먼저 노출되어야 할 기능(검색, 10문제 맛보기, 긴급상황 대응,
     인기 문서)을 첫 화면 위쪽으로 끌어올리기 위해 새로 추가한 컴포넌트들이다.
   - 기존 공통 컬러 토큰(--fw-navy/--fw-teal/--fw-orange 등, common.css)을 그대로
     사용해 색상이 사이트 전체와 통일되도록 했다(새 컴포넌트만의 별도 색을 쓰지 않음).
   - 요청사항: 어떤 텍스트도 잘리거나(...으로 생략) 박스를 벗어나 넘치면 안 되고,
     줄바꿈은 한 글자 단위가 아니라 단어/어절 단위로 되어야 한다. 그래서 새로
     추가한 요소에는 전부 word-break: keep-all + overflow-wrap: break-word를
     기본으로 깔고, 말줄임(text-overflow: ellipsis)이나 white-space: nowrap으로
     텍스트를 숨기는 방식은 쓰지 않았다(길어지면 박스가 늘어나거나 다음 줄로
     자연스럽게 넘어가게만 처리).
*/

/* ================= 히어로(지식창고 소개) 컴팩트화 (모바일 전용) =================
   SV169: 시안(모바일 캔버스)에는 큰 남색 그라데이션 카드+로고가 없고, 헤더 바로
   아래에 제목/문구만 작게 들어가는 구조다. 그런데 실제 사이트는 그동안 문구만
   시안에 맞춰 바꿔왔을 뿐, 이 카드 박스 자체(로고 포함, layout.css의 기존 스타일)는
   그대로 남아있어 시안과 다르게 보였다. PC 화면(860px 초과)은 기존 카드 스타일을
   그대로 두고, 모바일(860px 이하)에서만 시안과 동일하게 카드/로고를 없애고
   좌측 정렬의 단순 텍스트 블록으로 바꾼다. */
@media (max-width: 860px) {
    .fw-hero {
        background: none;
        color: inherit;
        padding: 16px 0 4px;
        margin-bottom: 0;
        gap: 0;
    }
    .fw-hero-logo { display: none; }
    .fw-hero-text { text-align: left; }
    .fw-hero h1 {
        color: var(--fw-navy);
        font-size: 20px;
        line-height: 1.35;
        font-weight: 800;
        margin: 0 0 6px;
    }
    .fw-hero h1 .fw-accent { color: var(--fw-teal); }
    .fw-hero p {
        color: var(--fw-text-sub);
        font-size: 12.5px;
        margin: 0;
    }
    .fw-hero .fw-hero-sub { color: var(--fw-text-sub); font-size: 12.5px; margin-top: 0; }
}

/* ================= 히어로 CTA 버튼 · 통계 타일 (데스크톱 전용) =================
   SV172: PC 개편안(Design 시안 PC.dc.html)에 맞춰, 데스크톱(861px 이상)의
   히어로 영역에 "10문제 맛보기/카테고리 둘러보기" 버튼 2개와 "등록 문서/자격증
   모의고사 종류/공동편집" 통계 타일 3개를 추가한다. 모바일은 SV169부터 제목+
   문구만 남긴 컴팩트 형태를 쓰고 있어 여기서는 기본값을 숨김으로 두고, 아래
   min-width:861px 블록에서만 보이게 한다. */
.fw-hero-cta,
.fw-hero-stats { display: none; }
/* SV204: 공공데이터 바로가기 5개는 모바일에서도 보여준다 - 아이콘 위·글자 아래의 5칸 한 줄
   (PC 모양은 아래 min-width:861px 블록에서 가로 버튼으로 바뀐다) */
@media (max-width: 860px) {
    .fw-hero-cta.fw-hero-cta-data {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px;
    }
    .fw-hero-cta-data a {
        display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px;
        background: var(--fw-white); border: 1px solid var(--fw-border-light); border-radius: 10px;
        color: var(--fw-navy); font-size: 11.5px; font-weight: 700; text-decoration: none;
        text-align: center; line-height: 1.25; word-break: keep-all;
    }
    .fw-hero-cta-data a span { font-size: 20px; line-height: 1; }
}

/* ================= 홈 화면 검색바 (모바일 전용) =================
   PC에서는 헤더의 기존 검색창(.fw-quick-search)이 이미 보이므로 중복을 피하려고
   모바일(헤더 검색창이 숨겨지는 860px 이하)에서만 노출한다. 지금까지 모바일에서는
   검색을 하려면 햄버거 메뉴를 열어야 했는데, 그 진입장벽을 없애는 것이 목적이다. */
.fw-home-search { display: none; margin-bottom: 18px; }
.fw-home-search form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fw-white);
    border: 1px solid var(--fw-border);
    border-radius: 12px;
    padding: 11px 14px;
}
.fw-home-search .fw-home-search-icon { flex: none; font-size: 16px; color: var(--fw-text-sub); }
.fw-home-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--fw-text);
}
.fw-home-search button {
    flex: none;
    background: var(--fw-teal);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
}
@media (max-width: 860px) {
    .fw-home-search { display: block; }
}

/* ================= 핵심 CTA: 10문제 맛보기 =================
   회원가입 없이 바로 시작할 수 있는 기능을 첫 화면에서 가장 눈에 띄게 배치해
   페이지뷰·회원가입 전환의 진입점으로 삼는다(exam/mini_quiz.php, SV165에서 구현). */
.fw-quiz-cta {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--fw-teal);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 22px;
    color: #fff;
}
.fw-quiz-cta::after {
    content: "⚡";
    position: absolute;
    top: -20px;
    right: -8px;
    font-size: 96px;
    line-height: 1;
    opacity: .16;
}
.fw-quiz-cta-badge {
    display: inline-block;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.fw-quiz-cta-title {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 5px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.fw-quiz-cta-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,.92);
    margin-bottom: 16px;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.fw-quiz-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--fw-teal-dark);
    font-size: 14px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    white-space: normal;
    word-break: keep-all;
}

/* ================= 긴급상황 바로가기 =================
   시설관리 실무자에게 실제로 필요한 순간(정전/화재/누수 등)에 관련 문서를
   검색결과로 바로 연결해주는 진입점. 사이트 기본 팔레트를 흐트러뜨리지 않도록
   레드는 "긴급" 의미를 나타내는 최소한의 포인트로만 옅게 사용했다. */
.fw-emergency-box {
    background: var(--fw-white);
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.fw-emergency-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 14px;
}
/* SV171: 제목 색/크기는 아래 .fw-mobile-section-title 공통 규칙으로 통일했다
   (기존에는 "긴급" 느낌을 주려고 빨간색 14.5px를 썼었다). */
.fw-emergency-head span { color: var(--fw-text-sub); font-size: 12.5px; word-break: keep-all; }
.fw-emergency-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    text-align: center;
}
.fw-emergency-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--fw-text);
}
.fw-emergency-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: none;
}
.fw-emergency-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    word-break: keep-all;
    overflow-wrap: break-word;
}
@media (max-width: 480px) {
    .fw-emergency-grid { gap: 6px; }
    .fw-emergency-icon { width: 38px; height: 38px; font-size: 16px; }
    .fw-emergency-label { font-size: 10.5px; }
}

/* ================= 오늘의 인기 문서 (랭킹 리스트) =================
   기존에는 사이드바 하단에 있어 눈에 잘 띄지 않던 인기 문서를, "최근 수정된
   문서" 위쪽 본문 영역으로 옮기고 순위 뱃지를 붙여 신뢰감(사회적 증거)을 준다.
   (사이드바의 기존 "인기 문서" 목록은 중복이라 제거했다) */
.fw-rank-list { margin-bottom: 26px; }
.fw-rank-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
/* SV171: 제목 색/크기는 아래 .fw-mobile-section-title 공통 규칙으로 통일했다. */
.fw-rank-list-head a { font-size: 13px; font-weight: 700; color: var(--fw-teal-dark); word-break: keep-all; }
.fw-rank-list ul {
    background: var(--fw-white);
    border: 1px solid var(--fw-border-light);
    border-radius: 12px;
    overflow: hidden;
}
.fw-rank-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.fw-rank-list li:last-child { border-bottom: none; }
.fw-rank-list .fw-rank-no {
    flex: none;
    width: 20px;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    color: var(--fw-border);
}
.fw-rank-list li:nth-child(-n+3) .fw-rank-no { color: var(--fw-teal); }
.fw-rank-list .fw-rank-title {
    /* SV170: 사용자 요청으로 이 목록만 예외적으로 한 줄 말줄임 처리(다른 요소들의
       "절대 자르지 않는다" 기본 원칙과 다름 - 랭킹 리스트는 줄 수가 늘어나면
       순위 정렬이 흐트러지기 쉬워, 여기서는 명시적으로 말줄임을 요청받았다). */
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--fw-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fw-rank-list .fw-rank-views {
    flex: none;
    font-size: 12px;
    color: var(--fw-text-sub);
    white-space: nowrap;
}

/* ================= 최근 수정 문서 (제목 한 줄 말줄임 + 경로·날짜는 다음 줄) =================
   .fw-doc-list/.fw-meta는 마이페이지·초대 페이지에서도 함께 쓰는 클래스라 전역으로
   바꾸지 않고, 이 페이지의 #fwRecentDocs 안에서만 제목/메타를 세로로 쌓고 제목을
   한 줄 말줄임(ellipsis) 처리한다(제목 자체도 PHP의 str_truncate()로 24자에서
   먼저 줄여 "..."을 붙이고, CSS는 혹시 더 좁은 화면에서도 한 줄을 넘지 않도록
   하는 안전장치로 함께 둔다). */
/* SV176: 사용자 요청 - "오늘의 인기 문서"(.fw-rank-list ul)처럼 흰 배경 + 둥근
   테두리 박스로 감싸 다른 섹션들과 통일된 카드 모양으로 보이게 한다. 이 목록도
   .fw-doc-list를 쓰지만 마이페이지·초대 페이지와는 달리 #fwRecentDocs 안에서만
   적용되니 다른 화면에는 영향이 없다. */
#fwRecentDocs .fw-doc-list {
    background: var(--fw-white);
    border: 1px solid var(--fw-border-light);
    border-radius: 12px;
    overflow: hidden;
}
#fwRecentDocs .fw-doc-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
}
#fwRecentDocs .fw-doc-list li:last-child { border-bottom: none; }
#fwRecentDocs .fw-doc-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#fwRecentDocs .fw-meta { margin-left: 0; }

/* ================= 오늘의 인기 문서 / 최근 수정 문서 - PC 10개, 모바일 5개 =================
   SV173: 사용자 요청 - PC(데스크톱)에서는 두 목록을 5개에서 10개로 늘려 좌우 2단이
   비슷한 높이로 보이게 한다. DB 조회(index.php)는 항상 10개를 가져오고, 모바일
   (860px 이하)에서는 화면이 너무 길어지지 않도록 처음 5개만 보이고 6번째부터는
   CSS로 숨긴다(데스크톱은 min-width:861px에서 다시 전부 보이게 해제). */
@media (max-width: 860px) {
    .fw-rank-list li:nth-child(n+6) { display: none; }
    #fwRecentDocs .fw-doc-list li:nth-child(n+6) { display: none; }
}

/* SV171: 하단 고정 탭바는 이제 모든 페이지 공통(footer.php)에 들어가는 요소라
   스타일을 site-wide 스타일시트(layout.css)로 옮겼다. 여기(home.css)는
   index.php 전용이라 다른 페이지에서는 이 파일이 로드되지 않기 때문. */

/* ================= 카테고리로 바로가기 (재도색) =================
   기존 layout.css의 진한 티얼 통짜 배너 대신, 승인된 개편 시안과 동일하게
   흰 배경 + 옅은 테두리 알약(pill) 스타일로 다시 그린다. 이 클래스는
   index.php에서만 쓰여서(다른 페이지에는 없음) 여기서 재정의해도 안전하다. */
.fw-category-band {
    background: var(--fw-white);
    border: 1px solid var(--fw-border-light);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.fw-category-band h3 {
    color: var(--fw-navy);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: normal;
}
.fw-category-pills a {
    background: var(--fw-white);
    border: 1px solid var(--fw-border);
    color: var(--fw-text);
    font-weight: 600;
    word-break: keep-all;
}
.fw-category-pills a:hover { background: var(--fw-white); border-color: var(--fw-teal); color: var(--fw-teal-dark); }
.fw-category-pills .fw-pill-count { opacity: .7; color: var(--fw-text-sub); }

/* ================= 실전 모의고사 · 학습모드 · 문서작성 · 나만의 기술 메모 =================
   예전에는 계열별 아코디언 2블록(자격증 모의고사/학습모드) + 사이드바 "회원 전용
   공간" 박스로 나뉘어 있던 것을, 승인된 개편 시안대로 아이콘 카드 4개로 합쳤다.
   각 카드는 해당 기능의 전체 페이지(exam/index.php 등)로 연결되므로 자격증별
   상세 목록은 그 페이지에서 그대로 볼 수 있다. */
.fw-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.fw-feature-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--fw-white);
    border: 1px solid var(--fw-border-light);
    border-radius: 14px;
    padding: 16px;
}
.fw-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--fw-teal-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
/* SV170: 삭제한 "카테고리로 바로가기" 밴드 자리에 대신 섹션 제목을 붙였다. */
/* ================= 모바일 섹션 제목 공통 스타일 =================
   SV171: 사용자 요청 - 긴급상황 바로가기/오늘의 인기 문서/최근 수정 문서/자격증
   모의고사·학습모드/시설기사 김관리의 하루/공지사항/명예의 전당, 7개 섹션 제목을
   전부 같은 크기·굵기·색으로 통일했다(강조 밑줄, 빨간색 등 섹션마다 달랐던
   장식은 제거). <strong>/<h2>/<h3> 등 태그는 각자 그대로 두고 이 클래스만 붙인다. */
.fw-mobile-section-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--fw-navy);
    word-break: keep-all;
    margin: 0 0 10px;
    padding: 0;
    border: none;
}
/* 긴급상황/오늘의 인기 문서는 아이콘·안내문구와 한 줄(flex row)에 나란히 있어
   아래쪽 여백이 필요 없다 - 독립된 줄(h2/h3)로 쓰이는 다른 섹션들만 여백을 둔다. */
.fw-emergency-head .fw-mobile-section-title,
.fw-rank-list-head .fw-mobile-section-title { margin: 0; }
.fw-feature-card strong { font-size: 14px; color: var(--fw-navy); word-break: keep-all; }
.fw-feature-desc { font-size: 12px; color: var(--fw-text-sub); line-height: 1.45; word-break: keep-all; overflow-wrap: break-word; }
@media (min-width: 861px) {
    .fw-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================= 처음이신가요 / 카테고리 둘러보기 / 최근 수정 문서 =================
   예전 4카드 안내 그리드를 3장으로 정리한 온보딩 유틸리티 카드 3종. */
.fw-utility-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.fw-utility-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    background: var(--fw-white);
    border: 1px solid var(--fw-border-light);
    border-radius: 12px;
    padding: 14px 8px;
}
.fw-utility-icon { font-size: 19px; }
.fw-utility-card strong { font-size: 12.5px; color: var(--fw-navy); word-break: keep-all; }
.fw-utility-desc { font-size: 10.5px; color: var(--fw-text-sub); word-break: keep-all; }

/* 최근 수정된 문서 등, 기존 박스(.fw-home-main) 밖에서도 같은 "제목 + 티얼 밑줄"
   스타일을 쓰기 위한 공용 제목 클래스 */
.fw-section-heading {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--fw-teal);
    color: var(--fw-navy);
}

/* ================= 3초 회원가입 유도 배너 ================= */
.fw-signup-banner {
    background: var(--fw-navy);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    margin: 22px 0;
}
.fw-signup-banner-title { color: #fff; font-weight: 700; font-size: 14.5px; margin-bottom: 5px; word-break: keep-all; }
.fw-signup-banner-desc { color: #cbd5e1; font-size: 12.5px; margin-bottom: 14px; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.fw-btn-signup {
    display: inline-block;
    background: var(--fw-orange);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    white-space: normal;
    word-break: keep-all;
}

/* ================= 공지사항 / 명예의 전당 (독립 섹션) =================
   SV166에서는 2단 카드(.fw-bottom-cards)로 묶어뒀었지만, SV170에서 사용자 요청으로
   "공지사항"과 "명예의 전당"을 각각 순서가 정해진 독립 섹션으로 분리했다(기존
   .fw-side-list/.fw-hof-item 등 스타일은 layout.css의 것을 그대로 재사용). */
.fw-bottom-card {
    background: var(--fw-white);
    border: 1px solid var(--fw-border);
    border-radius: var(--fw-radius);
    padding: 20px;
    margin-bottom: 20px;
}
/* SV171: 티얼 밑줄 장식을 없애고 .fw-mobile-section-title 공통 스타일로 통일 */
.fw-bottom-card h3.fw-mobile-section-title { margin-bottom: 12px; }

/* SV171: "시설기사 김관리의 하루" 제목(common.css의 .fw-comic-main-widget-head h3,
   15px 회색)도 다른 섹션과 같은 스타일이 되도록 이 페이지에서 덮어쓴다. common.css의
   규칙과 동일한 선택자 형태(class + 요소)라야 나중에 로드되는 이 파일이 확실히
   이기므로, 값도 여기서 전부(글자 크기/색 포함) 다시 지정한다. */
.fw-comic-main-widget-head h3.fw-mobile-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--fw-navy);
}

/* ================= PC(데스크톱) 2단 레이아웃 =================
   SV172: 사용자 요청 - Design 시안 "PC.dc.html"에서 확정한 데스크톱 레이아웃을
   실제 사이트(index.php)에 반영한다. 모바일(860px 이하)에서는 아래 요소들이
   전부 그냥 위아래로 쌓이는 일반 블록이라 지금까지의 모바일 화면 순서(SV166~171)가
   그대로 유지되고, 데스크톱(861px 이상)에서만 "좌측 콘텐츠(2) + 우측 사이드바(1)"
   2단 그리드로 바뀐다. */
@media (min-width: 861px) {
    .fw-home-2col {
        display: grid;
        /* SV173: 우측 사이드바 폭을 40% 넓혔었다(1fr → 1.4fr, 33.3% → 46.7%).
           SV174: 그 결과가 "너무 넓다"는 사용자 피드백으로, 이번엔 그 46.7%를
           기준으로 다시 30% 줄인다: 46.7% * 0.7 = 32.7%(≈0.98fr), 좌측은
           나머지 67.3%(≈2.02fr). 전체 합(2.02+0.98=3)은 이전과 동일. 결과적으로
           SV172 이전 원래 비율(2fr:1fr, 66.7%:33.3%)과 거의 같아졌다. */
        grid-template-columns: 2.02fr 0.98fr;
        gap: 28px;
        align-items: flex-start;
    }
    /* SV174: 그리드 아이템의 기본 min-width는 "auto"라 내부 콘텐츠(긴급상황 5칸
       그리드, 자격증 카드 4칸 그리드 등)의 최소 너비가 1.6fr보다 넓으면 왼쪽
       칼럼이 지정한 비율보다 더 넓게 밀려나면서 그만큼 오른쪽(사이드바)이
       좁아지는 문제가 있었다(사용자 보고: "우측 폭이 오히려 줄었다"). 그리드
       아이템에 min-width:0을 줘서 내부 콘텐츠 크기와 무관하게 1.6fr:1.4fr
       비율이 실제로 지켜지도록 고쳤다. */
    .fw-home-2col-main { min-width: 0; }
    /* 사이드바는 스크롤해도 계속 보이도록 상단에 고정(헤더가 sticky이므로
       그 아래로 살짝 여유를 두고 고정한다) */
    .fw-home-2col-side {
        min-width: 0;
        position: sticky;
        top: calc(var(--fw-header-h, 60px) + 16px); /* SV209: 헤더 2줄 대응 */
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    /* "오늘의 인기 문서"와 "최근 수정 문서"를 시안처럼 좌우 2단으로 배치.
       SV177: 두 목록 자체의 margin-bottom은 0으로 지워야 나란히 놓였을 때
       높이가 다른 쪽이 삐뚤어지지 않는데, 그러면서 split 컨테이너 자체의
       아래쪽 여백이 사라져 바로 아래(데스크톱에서는 "10문제 맛보기" 카드가
       display:none이라 사실상 바로 "자격증 모의고사·학습모드" 제목) 사이에
       간격이 하나도 없어지는 문제가 있었다(사용자 스크린샷으로 확인). split
       컨테이너 자체에 다른 섹션들과 같은 22px 여백을 줘서 고쳤다. */
    .fw-home-2col-split {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        margin-bottom: 22px;
    }
    .fw-home-2col-split > .fw-rank-list,
    .fw-home-2col-split > #fwRecentDocs {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }
    /* 시안(PC.dc.html)에는 "10문제 맛보기" 카드가 따로 없다 - 히어로의 CTA
       버튼이 같은 역할을 하므로 데스크톱에서는 숨긴다. */
    .fw-quiz-cta { display: none; }
    /* 사이드바 안에서는 시안과 동일하게 "회원가입 배너"가 맨 위로 온다(공지사항/
       명예의 전당보다 먼저) - 모바일 DOM 순서(공지사항 → 명예의 전당 → 회원가입
       배너)는 그대로 두고, CSS order로 데스크톱에서만 화면 순서를 바꾼다. */
    .fw-notice-card { order: 1; }
    .fw-hof-card { order: 2; }
    /* SV177: .fw-signup-banner에는 원래 margin:22px 0(상하 여백)이 있는데,
       모바일 단일 컬럼에서는 위/아래에 다른 카드와 자연스러운 간격을 주지만,
       데스크톱 사이드바에서는 이 카드가 order:0으로 맨 위에 오면서 그 위쪽
       22px 여백이 그대로 남아 사이드바 전체가 왼쪽 콘텐츠보다 22px 아래에서
       시작하는 것처럼 보였다(사용자 보고: "우측 라운드 위치가 좌측보다 낮다").
       사이드바 간격은 이미 부모(.fw-home-2col-side)의 gap:20px가 담당하므로,
       사이드바 안에서는 이 카드의 자체 상하 margin을 0으로 지운다. */
    .fw-home-2col-side .fw-signup-banner { margin: 0; }
    .fw-signup-banner { order: 0; }
}

/* ================= 히어로 데스크톱 재구성 =================
   SV172: 시안(PC.dc.html)에 맞춰 데스크톱에서는 기존의 남색 그라데이션 카드+
   큰 로고 대신, 흰 배경 + 좌측 정렬 문구 + CTA 버튼 2개 + 우측 통계 타일 3개
   구성으로 바꾼다(로고는 헤더에 이미 있어 히어로에서는 뺀다). 모바일은 SV169의
   컴팩트 스타일을 그대로 유지한다(이 블록은 861px 이상에서만 적용). */
@media (min-width: 861px) {
    .fw-hero {
        background: var(--fw-white);
        color: inherit;
        border: 1px solid var(--fw-border-light);
        align-items: center;
        padding: 40px 36px;
        gap: 32px;
    }
    .fw-hero-logo { display: none; }
    .fw-hero-text { flex: 1; text-align: left; }
    .fw-hero h1 {
        color: var(--fw-navy);
        font-size: 30px;
        line-height: 1.35;
        font-weight: 800;
        margin: 0 0 10px;
    }
    .fw-hero h1 .fw-accent { color: var(--fw-teal); }
    .fw-hero p.fw-hero-sub {
        color: var(--fw-text-sub);
        font-size: 14.5px;
        margin: 0;
    }
    .fw-hero-cta {
        /* SV173: "카테고리 둘러보기" 1개 → "모의고사/학습모드/나의 현장 메모" 3개로
           버튼이 늘어나 한 줄에 다 안 들어갈 수 있어 flex-wrap을 추가했다. */
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }
    .fw-hero-cta a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        padding: 12px 18px;
        border-radius: 10px;
        white-space: nowrap;
    }
    .fw-hero-cta-primary { background: var(--fw-teal); color: #fff; }
    .fw-hero-cta-secondary {
        background: var(--fw-white);
        color: var(--fw-navy);
        border: 1px solid var(--fw-border-light);
    }
    /* SV204: 공공데이터 바로가기 5개 - 한 줄에 들어가도록 조금 작게, 올리면 강조 */
    .fw-hero-cta-data { gap: 8px; }
    .fw-hero-cta-data a { padding: 10px 14px; gap: 6px; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
    .fw-hero-cta-data a:hover { border-color: var(--fw-teal); color: var(--fw-teal-dark); background: var(--fw-teal-bg); }
    .fw-hero-cta-data a span { font-size: 16px; line-height: 1; }
    .fw-hero-stats {
        flex: none;
        width: 300px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .fw-hero-stat {
        background: var(--fw-bg);
        border: 1px solid var(--fw-border-light);
        border-radius: 12px;
        padding: 16px 8px;
        text-align: center;
    }
    .fw-hero-stat strong {
        display: block;
        font-size: 17px;
        font-weight: 800;
        color: var(--fw-navy);
    }
    .fw-hero-stat span {
        display: block;
        font-size: 11px;
        color: var(--fw-text-sub);
        margin-top: 4px;
    }
}

/* ===================== SV209: 방문 현황(어제·오늘 접속자/페이지뷰) - 명예의 전당 아래 ===================== */
.fw-visit-card .fw-list-header { align-items: center; }
.fw-visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fw-visit-col {
    border-radius: 14px;
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.fw-visit-today { background: var(--fw-teal-bg); border: 1px solid var(--fw-teal-light); }
.fw-visit-yesterday { background: #f1f5f9; border: 1px solid var(--fw-border-light); }
.fw-visit-day {
    align-self: flex-start;
    font-size: 12px; font-weight: 800; letter-spacing: .02em;
    padding: 2px 10px; border-radius: 999px;
}
.fw-visit-today .fw-visit-day { background: var(--fw-teal); color: #fff; }
.fw-visit-yesterday .fw-visit-day { background: #64748b; color: #fff; }
.fw-visit-pill {
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
    background: #fff; border-radius: 999px; padding: 7px 14px;
    box-shadow: 0 1px 2px rgba(15,36,64,.06);
}
.fw-visit-label { font-size: 12.5px; color: var(--fw-text-sub); white-space: nowrap; }
.fw-visit-pill strong { font-size: 17px; font-weight: 800; color: var(--fw-navy); font-variant-numeric: tabular-nums; }
.fw-visit-today .fw-visit-pill strong { color: var(--fw-teal-dark); }
/* PC 우측 사이드바 순서: 회원가입 배너(0) → 공지(1) → 날씨(2) → 명예의 전당(2~3) → 방문 현황(4) */
@media (min-width: 861px) {
    .fw-home-2col-side .fw-visit-card { order: 4; }
}

/* ===================== SV209-2: PC 좌측 하단 보강 (새 문서·질문과 답변·새 자료·분야별 문서) ===================== */
.fw-home-more { display: none; } /* 모바일은 기존 화면 유지 */
@media (min-width: 861px) {
    .fw-home-more { display: block; margin-top: 26px; }
    .fw-home-more .fw-home-2col-split:last-child { margin-bottom: 0; }
    .fw-more-list ul { display: flex; flex-direction: column; }
    .fw-more-list .fw-rank-list-head a,
    .fw-more-links a { font-size: 13px; font-weight: 700; color: var(--fw-teal-dark); }
    .fw-more-links { font-size: 13px; color: var(--fw-text-sub); white-space: nowrap; }
    .fw-more-empty { display: block !important; color: var(--fw-text-sub); font-size: 13.5px; line-height: 1.7; padding: 18px 16px !important; }
    .fw-more-empty a { color: var(--fw-teal-dark); font-weight: 700; }
    /* 질문 상태 · 자료 종류 작은 배지 */
    .fw-qna-badge, .fw-file-kind {
        flex: none; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
        background: #f1f5f9; color: var(--fw-text-sub);
    }
    .fw-qna-badge.is-answered { background: var(--fw-teal-bg); color: var(--fw-teal-dark); }
    .fw-file-kind { background: #eef2ff; color: var(--fw-blue); }
    .fw-file-kind.is-study { background: #f0fdfa; color: var(--fw-teal-dark); }
    /* 분야별 문서 막대 */
    .fw-cate-bar-item .fw-rank-title { flex: 0 0 76px; }
    .fw-cate-bar { flex: 1; height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
    .fw-cate-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--fw-teal), #2dd4bf); border-radius: 999px; }
    .fw-cate-bar-item .fw-rank-views { min-width: 44px; text-align: right; }
}
@media (min-width: 861px) {
    /* 같은 줄의 두 목록은 흰 상자 높이를 같게(질문이 2개뿐이어도 옆 목록과 나란히) */
    .fw-home-more .fw-home-2col-split { align-items: stretch; }
    .fw-home-more .fw-more-list { display: flex; flex-direction: column; }
    .fw-home-more .fw-more-list ul { flex: 1; }
}
@media (min-width: 861px) {
    .fw-more-list li.fw-more-cta { margin-top: auto; border-top: 1px dashed var(--fw-border-light); border-bottom: none; justify-content: center; }
    .fw-more-cta a { font-size: 13.5px; font-weight: 700; color: var(--fw-teal-dark); }
}
/* 9번째 이후 항목: 기본은 숨김, 좌측이 짧을 때 index.php 스크립트가 is-shown 을 붙여 보인다 */
.fw-more-list li.fw-more-extra { display: none; }
.fw-more-list li.fw-more-extra.is-shown { display: flex; }