/* ==========================================================
   wk-home.css  —  홈(index) 전용
   경로 : /theme/basic/css/wk-home.css
   head.sub.php 에서 _INDEX_ 일 때만 로드됩니다.

   index.php 안에 인라인 <style> 로 있던 블록을 그대로 옮겨왔고
   신규 섹션(.wk-intro, .wk-sec) 스타일을 추가했습니다.
   ========================================================== */


/* ----------------------------------------------------------
   1. 홈 소개문
   기존 홈에는 산문이 없어 사이트 정체성을 설명할 텍스트가
   전혀 없었습니다. 이 블록이 그 역할을 합니다.
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   공통 컨테이너 폭 : 1280px
   섹션 제목 / 카드 그리드 / 소개문이 모두 같은 선에 맞습니다.
   폭을 바꾸려면 아래 --wk-max 값만 고치면 됩니다.
   ---------------------------------------------------------- */
:root {
  --wk-max: 1280px;
  --wk-pad: 20px;
}

.wk-intro {
  max-width: var(--wk-max);
  margin: 8px auto 28px;
  padding: 0 var(--wk-pad);
  box-sizing: border-box;

  /* 왼쪽 소개문 / 오른쪽 Pulse Korea AI 로고 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

/* 본문 단락은 1280px 전폭으로 늘리면 한 줄이 너무 길어 읽기 나쁩니다.
   문단만 별도로 좁힙니다. */
.wk-intro > p {
  flex: 1 1 auto;
  max-width: 820px;
  min-width: 0;
}

.wk-intro p {
  font-size: 16px;
  line-height: 1.75;
  color: #3a4050;
  margin: 0;
  word-break: keep-all;
}

/* .wk-intro-facts (Sources / Language / Coverage / Attribution 목록) 는
   2026-08-30 제거했습니다.
   바로 위 소개 문단에 같은 내용이 이미 산문으로 들어 있어 중복이었고,
   출처·번역 방침은 /about 페이지에서 제대로 설명하는 것이 맞습니다. */


/* ----------------------------------------------------------
   2. 주제별 섹션
   99개를 한 덩어리로 뿌리던 것을 5개 섹션으로 나눴습니다.
   각 섹션 H2 는 사람이 실제로 검색하는 표현이라
   목차 역할과 AEO 앵커 역할을 동시에 합니다.
   ---------------------------------------------------------- */
.wk-sec {
  max-width: var(--wk-max);
  margin: 0 auto 44px;
  padding: 0 var(--wk-pad);
  box-sizing: border-box;
}

.wk-sec > h2 {
  font-size: 1.4em;
  font-weight: 700;
  text-align: left;
  color: #1b1f28;
  padding: 0 0 10px 4px;
  margin: 0 0 14px;
  border-bottom: 2px solid #1b1f28;
}

/* index.php 상단의 큰 제목 (기존 #container h2 규칙을 대체) */
.wk-sec-title {
  max-width: var(--wk-max);
  margin: 0 auto 18px;
  padding: 25px var(--wk-pad) 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 2em;
}

.wk-sec-more {
  text-align: right;
  margin: 10px 4px 0;
}

.wk-sec-more a {
  font-size: 13px;
  font-weight: 600;
  color: #3fb7ff;
  text-decoration: none;
}

.wk-sec-more a:hover {
  text-decoration: underline;
}


/* ----------------------------------------------------------
   3. Pulse Korea AI 로고
   index.php 인라인 <style> 에서 이동
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   Pulse Korea AI 로고

   기존 : position:absolute; right:10px; margin-top:-50px
     기준이 되는 position:relative 부모가 없어서 화면 폭이나
     상위 요소가 바뀔 때마다 위치가 예측 불가였습니다.
     1280px 컨테이너를 적용한 뒤에는 더 어긋납니다.

   변경 : 정상 흐름으로 되돌리고 컨테이너 오른쪽에 정렬합니다.
     쓰임새가 정해지면 링크와 설명 한 줄을 붙이면 됩니다.
   ---------------------------------------------------------- */
.pk-logo {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
}

.pk-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.pk-brand {
  font-size: 22px;
  font-weight: 700;
  color: #1b1f28;
}

.pk-tagline {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5d6675;
  margin-top: 2px;
}

.audio-wave {
  position: relative;
  width: 36px;
  height: 18px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.wave-layer {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  bottom: 4px;
}

.wave-layer span {
  width: 2px;
  height: 8px;
  border-radius: 999px;
  transform-origin: center bottom;
  animation-name: pkPulse;
  animation-duration: var(--t);
  animation-delay: var(--delay);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background: var(--c);
  opacity: 0.9;
}

.layer-main span { --c: #00e4a7; }
.layer-mid  span { --c: #3fb7ff; }
.layer-top  span { --c: #ff4e9a; }

.layer-mid { transform: translateY(2px); }
.layer-top { transform: translateY(4px); }

@keyframes pkPulse {
  0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
  50%      { transform: scaleY(var(--h)); opacity: 1; }
}

/* 애니메이션을 줄여달라는 사용자 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .wave-layer span { animation: none; }
}


/* ----------------------------------------------------------
   4. 이미지 지연 로딩 보조
   pic_main 스킨의 <img> 에 loading="lazy" decoding="async"
   를 넣어야 효과가 큽니다. 스킨 수정 시 함께 적용하세요.
   첫 화면에 보이는 4장은 lazy 를 빼야 LCP 가 좋아집니다.
   ---------------------------------------------------------- */
.pic_main img {
  content-visibility: auto;
  contain-intrinsic-size: 700px 700px;
}


/* ----------------------------------------------------------
   좁은 화면 여백 조정
   ---------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --wk-pad: 14px; }
  .wk-sec { margin-bottom: 32px; }
  .wk-sec-title { font-size: 1.5em; padding-top: 16px; }
}

@media (max-width: 520px) {
  :root { --wk-pad: 12px; }
}

@media (max-width: 860px) {
  /* 좁아지면 로고를 소개문 위로 올려 세로로 쌓습니다. */
  .wk-intro {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
  }
  .wk-intro > p { max-width: 100%; }
}