/* =====================================================================
   pc-enhance.css — 데스크톱(≥761px) 전용 레이아웃 보강
   ---------------------------------------------------------------------
   · 모든 규칙이 @media (min-width: 761px) 안에 있으므로 모바일은 무영향.
   · HTML 구조는 건드리지 않고 그리드/:has() 로만 보강 (미지원 시 기존 1단 유지).
   · 적용 페이지: 홈(/) · 모의고사(/exam) · 해설(/review) · paran.lab(/lab)
   · site.css 다음에 로드 → 같은 클래스를 가로폭 쓰는 에디토리얼 그리드로 재배치.
   ===================================================================== */

@media (min-width: 761px) {

  /* ===============================================================
     홈 — 풀페이지 스냅 (요청): 한 화면 = 한 섹션, 자유 스크롤 최소화
     · 스냅 컨테이너(html)는 홈에서만 활성화( :has(body.has-intro) )
     · 각 섹션 min-height 100vh + 세로 중앙정렬 → 그 섹션만 보이게
     · scroll-snap-stop: always → 한 번에 한 섹션씩만 넘어감
     · 인트로 스킵 모드( ?nointro )에서는 비활성
     =============================================================== */
  html:has(body.has-intro) {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }
  body.has-intro:not(.intro-skip) #intro-zone {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body.has-intro:not(.intro-skip) .home .h-sec {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* FAQ + 푸터를 한 화면에: FAQ 섹션 높이를 (화면 - 푸터높이)로 잡아
     FAQ 카드는 화면 중앙, 푸터는 그 아래 하단에 붙게. 푸터는 별도 스냅 아님. */
  body.has-intro:not(.intro-skip) .home .faq {
    min-height: calc(100vh - 260px);
    min-height: calc(100svh - 260px);
    justify-content: center;          /* FAQ 카드 세로 중앙 */
    padding-top: clamp(24px, 4vh, 48px);
    padding-bottom: clamp(20px, 3vh, 40px);
  }
  @media (prefers-reduced-motion: reduce) {
    html:has(body.has-intro) { scroll-behavior: auto; }
  }

  /* ---------------------------------------------------------------
     공통: narrow 컨테이너를 살짝 넓혀 다단 배치 숨통 확보
     (모바일 740px → 데스크톱 880px, 텍스트는 본문 내 <br> 로 줄길이 유지)
     --------------------------------------------------------------- */
  .container.narrow { max-width: 880px; }

  /* ===============================================================
     홈 — Our product : 3개 제품을 세로 나열 → 가로 3단 카드로
     (타이포는 3단 폭에 맞춰 축소, 상태 배지는 카드 하단 정렬)
     =============================================================== */
  .prod-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .prod-item {
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-left: 1px solid var(--line);   /* 칼럼 구분선 */
    padding: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 30px);
  }
  .prod-item:first-child { border-left: 0; }
  /* 가로 hover 밀림 방지 — 배경 강조만 유지 */
  a.prod-item:hover { padding-left: clamp(20px, 2vw, 30px); }

  .prod-name { font-size: clamp(22px, 2.2vw, 30px); gap: 10px; }
  .prod-logo { height: clamp(22px, 2.4vw, 30px); }
  .prod-desc { margin-top: 14px; }
  .prod-status { margin-top: auto; padding-top: 22px; }  /* 카드 하단에 고정 */

  /* ===============================================================
     홈 — About paran.lab : 좌(타이틀·로고) / 우(카피·CTA) 2단
     =============================================================== */
  .about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: center;
  }
  .about .sec-title { grid-column: 1 / -1; }   /* 타이틀은 전폭 헤딩 */
  .about .about-logo {
    grid-column: 1; grid-row: 2;
    justify-self: center; align-self: center;
    margin: 0;
  }
  .about .about-copy { grid-column: 2; grid-row: 2; align-self: center; margin: 0 0 24px; }
  .about .about-copy ~ .reveal,                /* CTA 래퍼(span.reveal) */
  .about > .container > span.reveal { grid-column: 2; grid-row: 3; }

  /* FAQ는 세로 1단 유지 (요청) — 별도 보강 없음 */

  /* ===============================================================
     모의고사(/exam) — 표지 + 소개를 좌/우 2단으로
     (래퍼 div 없이 :has() 로 해당 섹션만 선택)
     =============================================================== */
  .exam .container.narrow:has(> .exam-cover-box) {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    column-gap: clamp(36px, 5vw, 64px);
    align-items: center;
  }
  .exam .container.narrow:has(> .exam-cover-box) > .exam-cover-box {
    grid-row: 1 / span 2;
    margin: 0;
    padding: clamp(28px, 3vw, 44px);
  }
  .exam .container.narrow:has(> .exam-cover-box) > .exam-intro     { align-self: end; }
  .exam .container.narrow:has(> .exam-cover-box) > .exam-intro-sub { align-self: start; }

  /* ===============================================================
     다운로드 / 해설 아카이브 — 세로 나열 → 카드 그리드
     (.exam-dl 은 /exam 다운로드 + /review 아카이브 공용)
     =============================================================== */
  .exam-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
    align-content: start;
  }
  /* 그리드 셀에서는 카드처럼 보이도록 윗선 + 정렬 */
  .exam-dl .dl-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* 카드 안 버튼은 본문 아래로 밀어 카드 높이 정렬 */
  .exam-dl .dl-block .btn { margin-top: auto; }

  /* /review 아카이브: 최신(첫 카드)은 전폭으로 강조 */
  #review-archive { grid-template-columns: repeat(2, 1fr); }
  #review-archive .dl-block:first-child {
    grid-column: 1 / -1;
    border-top: 2px solid var(--paran-blue);
    background: var(--bg-glow);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 3vw, 32px);
  }

  /* ===============================================================
     해설(/review) — 5가지 해설 방식 리스트를 2단으로
     (대표 문항·탭은 전폭 유지, 이미지 리스트만 2열)
     =============================================================== */
  .method-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
  }

  /* ===============================================================
     paran.lab(/lab) — 원칙(I·II·III)을 세로 카드 3단 그리드로
     =============================================================== */
  .lab-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(24px, 3vw, 36px);
    padding-left: 0;             /* 1단용 들여쓰기 해제 */
  }
  .lab-principles .lab-pr {
    grid-template-columns: 1fr;  /* 번호 위 / 텍스트 아래 카드형 (원본은 2열 grid) */
    gap: 14px;
    border-top: 1px solid var(--line);
  }
}