<!doctype html>
<html lang="ko">
  <head>
    <?php include(__DIR__ . "/_include/_head.php") ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="wrap biztrend">
      <?php include(__DIR__ . "/_include/_header.php") ?>

      <!-- ===================== -->
      <!-- 컨테이너 -->
      <!-- ===================== -->
      <div class="container">

        <!-- 페이지 헤더: 브레드크럼 + 제목 -->
        <div class="page-header">
          <ul class="breadcrumb" aria-label="breadcrumb">
            <li><a href="./index.php">홈</a></li>
            <li><a href="./biztrend.php">비즈트렌드</a></li>
            <li><span class="current">성공예감&별책부록</span></li>
          </ul>
          <div class="page-title">
            <h3>성공예감<span>&</span>별책부록</h3>
          </div>
        </div>

        <!-- ===================== -->
        <!-- 비즈트렌드 메인 섹션 -->
        <!-- ===================== -->
        <section class="biztrend-wrap">
          <div class="biztrend-inner">

            <!-- 헤더: 소개 + 연·월 선택 -->
            <div class="biztrend-header">
              <div class="biztrend-sub-title">
                <div class="biztrend-photo">
                  <img src="/img/biztrend/img_profile.png" alt="">
                </div>
                <p class="biztrend-intro-desc">
                  KBS 제1라디오 '성공예감&별책부록'을 통해 <br>
                  <em>경제 정보를 쉽게 접하고, 생활 속 경제 흐름</em>을 알아보세요.
                </p>
              </div>

              <!-- 연·월 선택기 -->
              <div class="article-grid-date">
                <button type="button" class="date-select-trigger datepicker-trigger" id="datepicker-trigger" title="연도·월 선택" aria-label="연도·월 선택" aria-haspopup="listbox" aria-expanded="false">
                  <span class="date-select-label">
                    <span class="date-year"><span class="date-select-year">2026</span>년</span>
                    <span class="date-month"><em class="date-select-month">2</em>월</span>
                  </span>
                  <span class="date-select-icon" aria-hidden="true"></span>
                </button>
                <input type="hidden" class="date-select-value" value="2026-02">

                <!-- 날짜피커 드롭다운 (버튼 바로 아래 노출) -->
                <div class="datepicker-dropdown" id="datepicker-dropdown" role="listbox" aria-hidden="true">
                  <div class="datepicker-dropdown-inner">
                    <div class="datepicker-wheels">
                      <div class="datepicker-wheel-wrap">
                        <span class="datepicker-wheel-label">연도</span>
                        <div class="datepicker-wheel" aria-label="연도 선택">
                          <div class="datepicker-wheel-track" data-wheel="year"></div>
                        </div>
                      </div>
                      <div class="datepicker-wheel-wrap">
                        <span class="datepicker-wheel-label">월</span>
                        <div class="datepicker-wheel" aria-label="월 선택">
                          <div class="datepicker-wheel-track" data-wheel="month"></div>
                        </div>
                      </div>
                    </div>
                    <div class="datepicker-actions">
                      <button type="button" class="btn-datepicker-cancel">취소</button>
                      <button type="button" class="btn-datepicker-confirm">확인</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- ===================== -->
            <!-- 기사 달력 그리드 -->
            <!-- 월~토 6열, 각 날짜당 1개 카드 -->
            <!-- ===================== -->
            <div class="article-grid">
              <div class="article-grid-inner">
                <div class="article-grid-head">
                  <ul class="article-grid-days" aria-label="요일">
                    <li>월</li>
                    <li>화</li>
                    <li>수</li>
                    <li>목</li>
                    <li>금</li>
                    <li>토</li>
                  </ul>
                </div>
                <div class="article-grid-body">

                  <!-- 1주차: 1일 ~ 6일 -->
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">1</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">3,370만 고객정보 유출</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>금융시장 동향</li>
                          <li>삼겹살과 소주의 역사</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">외인 팔고 개미 샀던 11월</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">2</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">쿠팡 개인정보 유출</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>금융시장 동향</li>
                          <li>삼겹살과 소주의 역사</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like is-active" aria-label="좋아요 취소"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">외인 팔고 개미 샀던 11월</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">3</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">불안한 시장에 CMA 잔액 첫 100조 돌파 눈앞</h4>
                          <div class="gauge-bar"><div class="gauge-fill" style="width: 80%"></div></div>
                        </div>
                        <ul class="article-card-list">
                          <li>금융시장 동향</li>
                          <li>삼겹살과 소주의 역사</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">쿠팡 사태가 알린 AI 시대 새..</h4>
                          <div class="gauge-bar"><div class="gauge-fill" style="width: 60%"></div></div>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">4</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">국내외 증시 상황</h4>
                          <div class="gauge-bar"><div class="gauge-fill" style="width: 40%"></div></div>
                        </div>
                        <ul class="article-card-list">
                          <li>금융시장 동향</li>
                          <li>삼겹살과 소주의 역사</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                        <span class="article-card-badge">★BEST</span>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">26살 직장인의 재정 관리</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">5</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">쿠팡 공화국의 그늘</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>금융시장 동향</li>
                          <li>삼겹살과 소주의 역사</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">증시 널뛰기… AI 거품?</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card weekend">
                    <span class="article-card-num" aria-hidden="true">6</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">돈의 흐름이 보인다</h4>
                        </div>
                        <div class="article-card-image">
                          <div class="article-card-image-placeholder" aria-hidden="true">
                            <img src="/img/biztrend/img_book_01.png" alt="돈의 흐름이 보인다">
                          </div>
                          <ul class="article-card-list">
                            <li>압도적 성과를 만들어 낸 8인의 CEO</li>
                            <li>최준철 대표 (VIP자산 운용)</li>
                          </ul>
                        </div>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>

                  <!-- 2주차: 7일 ~ 13일 (7일은 일요일이라 카드 없음) -->
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">8</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">업비트, 해킹 늑장신고 도..</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>금융시장 동향</li>
                          <li>삼겹살과 소주의 역사</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">증시 널뛰기… AI 거품?</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">9</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">'코스닥 대장주' 알테오젠..</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>금융시장 동향</li>
                          <li>삼겹살과 소주의 역사</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">격화되는 중-일 갈등, 외교 ..</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">10</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">영화관은 침체, OTT는 독점..</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>국무총리 한은총재 회동... "시장안정 위해 공조 중요"</li>
                          <li>너도나도 비만치료제, 약값·보험·제도 괜찮을까</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">격화되는 중-일 갈등, 외교 ..</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조선에도 '김부장'은 있었다…관직으로 본 옛관직으로 본 관...</li>
                          <li>이한 역사커뮤니케이터</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">11</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">美 FOMC 금리 인하, 증..</h4>
                          <div class="gauge-bar"><div class="gauge-fill" style="width: 80%"></div></div>
                        </div>
                        <ul class="article-card-list">
                          <li>정부, FOMC 금리인하, 증시올라</li>
                          <li>1인 가구인식, 이렇게 달라졌다.</li>
                          <li>시니어 시장의 부상</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">조기 은퇴를 꿈꾸는 50대 부..</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조기 은퇴를 위한 소득 점검과 적정 기준</li>
                          <li>자산 6억5천, 월 소득 500의 부부</li>
                          <li>김경필 머니트레이너</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">12</span>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">美 FOMC 금리 인하, 증..</h4>
                          <div class="gauge-bar"><div class="gauge-fill" style="width: 40%"></div></div>
                        </div>
                        <ul class="article-card-list">
                          <li>정부, FOMC 금리인하, 증시올라</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                    <div class="article-card-content">
                      <a href="#" class="article-card-link" data-video-id="">
                        <div class="article-card-title-box">
                          <h4 class="article-card-title">조기 은퇴를 꿈꾸는 50대 부..</h4>
                        </div>
                        <ul class="article-card-list">
                          <li>조기 은퇴를 위한 소득 점검과 적정 기준</li>
                        </ul>
                      </a>
                      <button type="button" class="article-card-like" aria-label="좋아요"></button>
                    </div>
                  </article>
                  <article class="article-card weekend">
                    <span class="article-card-num" aria-hidden="true">13</span>
                  </article>

                  <!-- 3주차: 15일 ~ 20일 -->
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">15</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">16</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">17</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">18</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">19</span>
                  </article>
                  <article class="article-card weekend">
                    <span class="article-card-num" aria-hidden="true">20</span>
                  </article>

                  <!-- 4주차: 22일 ~ 27일 -->
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">22</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">23</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">24</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">25</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">26</span>
                  </article>
                  <article class="article-card weekend">
                    <span class="article-card-num" aria-hidden="true">27</span>
                  </article>

                  <!-- 5주차: 29일, 31일 -->
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">29</span>
                  </article>
                  <article class="article-card">
                    <span class="article-card-num" aria-hidden="true">31</span>
                  </article>
                </div>
              </div>
            </div>
          </div>
        </section>

      </div>
    </div>

    <script src="/js/biztrend.js" defer></script>
  </body>
</html>
