@charset "utf-8";
/* ==========================================================================
   main.css — 메인(index) 페이지 전용
   base.css → layout.css 다음에 로드된다.
   ========================================================================== */


/* ==========================================================================
   1. 인트로(히어로)
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;   /* 자식의 z-index 가 헤더(z-sticky)까지 넘보지 못하게 층을 격리 */
  overflow: hidden;
  display: flex;
  align-items: flex-end;

  /*
   * 모바일에서는 높이를 지정하지 않는다 — 내용 높이 + 패딩이 곧 인트로 높이다.
   *
   * 화면 높이를 강제(100svh)하면서 내용을 아래에 붙이면(align-items: flex-end),
   * 남는 공간이 전부 위로 몰린다. 실제로 390px 폭에서 화면이 길어질수록
   * 헤더와 내용 사이가 134px → 390px → 690px 로 계속 벌어졌다.
   * 시안의 모바일 인트로도 원래 패딩 기반(52px / 44px)이었다.
   *
   * 헤더가 fixed 로 겹쳐 있으므로 위 패딩은 헤더 높이(74px)보다 커야 한다.
   */
  padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-8);
}

/*
 * 태블릿 이상에서만 첫 화면을 꽉 채운다.
 * 넓은 화면에서는 위쪽 빈 공간에 그라디언트 배경이 흐르는 것이 인트로의 연출이고,
 * 큰 문장을 아래에 앵커해 우측 통계와 바닥선을 맞추는 구성이 성립한다.
 *
 * min-height 를 두 번 쓰는 이유:
 * 100vh 는 모바일에서 "주소창이 숨겨진 상태"의 높이라 첫 진입 시 화면을 넘긴다.
 * 100svh 는 "주소창이 보이는 상태" 기준이라 어떤 순간에도 넘지 않는다.
 * 미지원 브라우저는 뒤 선언을 무시하므로 이 순서 자체가 폴백이 된다.
 */
@media (min-width: 768px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-9);
  }
}

/* ---- 1-1. 배경 모션 --------------------------------------------------------
   WebGL·영상 없이 CSS 그라디언트 3겹을 서로 다른 속도로 움직인다.

   왜 transform 만 움직이나:
   background-position 이나 width/top 을 애니메이션하면 매 프레임 레이아웃과
   페인트가 다시 일어난다. transform 은 합성(composite) 단계에서만 처리돼
   GPU가 담당하므로 60fps 를 유지하기 쉽다.

   ※ prefers-reduced-motion 대응은 base.css 5-1 의 전역 규칙이 처리한다
     (animation-duration 을 0.01ms 로 눌러 사실상 정지시킨다).
------------------------------------------------------------------------ */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;   /* 배경이 텍스트 선택·클릭을 가로채지 않도록 */
}

.hero__bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;   /* 미리 합성 레이어로 승격 */
}

.hero__bg span:nth-child(1) {
  width: 62vw;
  height: 62vw;
  top: -18vw;
  left: -10vw;
  background: radial-gradient(circle at 40% 40%, rgba(139, 38, 53, 0.30), transparent 68%);
  animation: hero-drift-a 34s var(--ease-inout) infinite;
}

.hero__bg span:nth-child(2) {
  width: 54vw;
  height: 54vw;
  bottom: -20vw;
  right: -12vw;
  background: radial-gradient(circle at 55% 45%, rgba(63, 91, 82, 0.26), transparent 66%);
  animation: hero-drift-b 46s var(--ease-inout) infinite;
}

.hero__bg span:nth-child(3) {
  width: 40vw;
  height: 40vw;
  top: 24%;
  left: 42%;
  background: radial-gradient(circle at 50% 50%, rgba(220, 213, 203, 0.55), transparent 70%);
  animation: hero-drift-a 58s var(--ease-inout) infinite reverse;
}

/* 이동 폭을 %로 준 이유: 화면 크기가 달라져도 상대적으로 같은 궤적을 그린다 */
@keyframes hero-drift-a {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
  50%  { transform: translate3d(7%,  5%,  0) scale(1.18); }
  100% { transform: translate3d(-4%, -3%, 0) scale(1); }
}

@keyframes hero-drift-b {
  0%   { transform: translate3d(6%,  4%,  0) scale(1.1); }
  50%  { transform: translate3d(-7%, -6%, 0) scale(1.3); }
  100% { transform: translate3d(6%,  4%,  0) scale(1.1); }
}

/* ---- 1-2. 인트로 본문 ----
   시안은 좌(문장) / 우(통계) 2단이고 두 단의 바닥선을 맞춘다(align-items: end).
   모바일은 세로로 쌓는다. */
.hero__inner {
  /* .hero 가 flex 컨테이너라 이 요소는 flex 항목이다.
     width 를 주지 않으면 내용 크기만큼만 넓어져 2단 그리드가 좁게 잡힌다. */
  width: 100%;

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: end;
  }
}

.hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .hero__lead { gap: 30px; }
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: pretty;   /* 지원 브라우저에서 마지막 줄에 한 단어만 남는 것을 방지 */
}

/* 본문은 시안 고정값(모바일 15px → 데스크톱 17px)에 맞춘다.
   --fs-lead(최대 21px)를 쓰면 시안보다 커진다. */
.hero__desc {
  max-width: 46ch;
  font-size: clamp(0.9375rem, 0.891rem + 0.19vw, 1.0625rem);
  line-height: 1.75;
  color: var(--color-text-sub);
}

/* ---- 1-3. CTA 버튼 ---- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    color            var(--dur-base) var(--ease-out);

  /* 손가락으로 누르는 최소 크기(44×44)를 보장한다 — 시안 모바일 명시값 */
  min-height: 44px;
}

.btn--solid {
  background-color: var(--color-accent);
  color: var(--c-paper);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background-color: var(--color-accent-hover);
  color: var(--c-paper);
  text-decoration: none;
}

.btn--outline {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--c-ink);
  color: var(--color-text);
  text-decoration: none;
}

/* ---- 1-4. 통계 ---- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.hero__stat dt {
  margin-bottom: 9px;
}

.hero__stat dd {
  margin: 0;
  font-size: clamp(1.5rem, 1.29rem + 0.86vw, 1.875rem);   /* 24 → 30 */
  letter-spacing: var(--ls-heading);
}

/* 값이 길어 한 줄에 담기지 않는 항목(Stack, Breakpoints)은 한 단계 작은 글씨를 쓴다.
   큰 크기 그대로 두면 줄바꿈 위치가 화면 폭에 따라 제멋대로 잡혀 어색해진다.
   "길다"는 CSS 가 알 수 없으므로 마크업에서 --long 을 붙여 알려준다. */
.hero__stat--long dd {
  font-size: clamp(1rem, 0.93rem + 0.29vw, 1.1875rem);    /* 16 → 19 */
  line-height: 1.5;
}


/* ==========================================================================
   2. 작업 목록
   --------------------------------------------------------------------------
   시안 구조: 테두리 박스 전체가 하나의 링크이고, 그 안에 썸네일과 본문이 들어간다.
   첫 항목(대표작)만 2칸을 모두 차지하고 내부가 좌우로 나뉜다.
   ========================================================================== */

.work-list {
  display: grid;
  grid-template-columns: 1fr;   /* 모바일: 1단 */
  gap: 22px;                    /* 시안 값 */
  list-style: none;
}

@media (min-width: 768px) {
  .work-list { grid-template-columns: repeat(2, 1fr); }

  /* 대표작은 두 칸을 모두 차지한다.
     1 / -1 은 "첫 번째 선부터 마지막 선까지" — 칸 수가 바뀌어도 따라온다. */
  .work-item--featured { grid-column: 1 / -1; }
}

/* ---- 2-1. 카드(링크) ---- */
.work-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-raised);
  color: var(--color-text);
  text-decoration: none;

  transition:
    border-color var(--dur-base)  var(--ease-out),
    transform    var(--dur-slow)  var(--ease-out),
    box-shadow   var(--dur-slow)  var(--ease-out);
}

/* 카드 전체가 링크라 hover 는 카드 단위로 걸린다.
   translateY 와 box-shadow 만 바꾸므로 레이아웃 재계산이 없다. */
.work-card:hover,
.work-card:focus-visible {
  border-color: var(--c-ink);
  color: var(--color-text);
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* 대표작만 데스크톱에서 좌우 2단으로 나뉜다.
   1.05fr 로 썸네일 쪽을 살짝 넓게 잡는 것이 시안 비율이다. */
@media (min-width: 1024px) {
  .work-item--featured .work-card {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
  }
}

/* ---- 2-2. 썸네일 ----
   게시판 목록 스킨과 같은 처리다. 이미지는 잘라내지 않고(object-fit: contain)
   전체가 보이게 하고, 남는 자리는 흰 매트로 덮어 "액자에 넣은 스크린샷"으로
   읽히게 한다. (매트 색을 흰색으로 맞춘 이유는 base.css --color-thumb-matte 주석)

   상자 크기를 고정 height 가 아니라 aspect-ratio 로 잡는 이유.
   썸네일 원본은 640×420(약 3:2)인데 상자가 그와 다른 모양이면 contain 이
   남는 쪽을 여백으로 남긴다. 대표작이 그랬다 — 폭 600px 남짓한 칸에
   min-height:340px 을 걸어 두어 상자가 약 1.8:1 이 되고, 그 안의 3:2 이미지가
   좌우에 흰 띠를 낀 채 작게 들어앉았다. 상자를 이미지와 같은 3:2 로 맞추면
   띠 없이 칸을 꽉 채운다. 폭이 정해지면 높이가 따라오므로 화면 크기가
   바뀌어도 비율이 유지된다.

   시안의 150 / 200 / 340px 은 min-height 로 남겨 뒀다.
   3:2 로 계산한 높이가 이 값들보다 크기 때문에 평소에는 작동하지 않고,
   화면이 아주 좁을 때 상자가 지나치게 납작해지는 것만 막는 바닥 역할이다. */
.work-card__thumb {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 2;
  min-height: 150px;                   /* 모바일 시안 값 → 하한선 */
  overflow: hidden;
  background-color: var(--color-thumb-matte);
}

/* 이미지가 아예 없을 때만 줄무늬 자리표시자를 깐다.
   135° 줄무늬는 요소를 추가하지 않고 background-image 하나로 그린다. */
.work-card__thumb--empty {
  padding: 12px;
  background-color: var(--color-bg-sunken);
  background-image: repeating-linear-gradient(
    135deg,
    var(--c-stripe) 0 8px,
    var(--color-bg-sunken) 8px 16px
  );
}

@media (min-width: 768px) {
  .work-card__thumb { min-height: 200px; }
  .work-card__thumb--empty { padding: 16px; }

  .work-item--featured .work-card__thumb { min-height: 340px; }
  .work-item--featured .work-card__thumb--empty { padding: 18px; }
}

/* 대표작이 좌우 2단이 되면 썸네일은 본문 높이에 맞춰 늘어나야 한다.
   min-height 를 풀어 3:2 가 그대로 높이를 정하게 두되, 본문이 그보다 길면
   그리드가 줄 높이를 키우고 썸네일도 따라 늘어난다(칸에 빈 자리가 생기지 않는다).
   그때 생기는 위아래 여백은 흰 매트라 이미지 액자의 일부로 보인다. */
@media (min-width: 1024px) {
  .work-item--featured .work-card__thumb { min-height: 0; }
}

/* 썸네일 안 캡션 — 줄무늬 위에서 읽히도록 종이색 배경을 깐다 */
.work-card__caption {
  background-color: var(--c-paper);
  padding: 5px 9px;
  color: var(--color-text-sub);
}

/* 실제 이미지가 들어오면 상자를 채운다.
   cover 가 아니라 contain — 잘라내면 헤더·사이드바처럼 그 화면을
   알아보게 하는 부분이 먼저 사라진다. */
.work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- 2-3. 본문 ---- */
.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 22px;
}

@media (min-width: 768px) {
  .work-card__body { gap: 12px; padding: 28px 26px 30px; }

  .work-item--featured .work-card__body { gap: 18px; padding: 40px 38px; }
}

.work-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-heading);
}

/* 대표작 제목만 한 단계 크다 */
.work-item--featured .work-card__title {
  font-size: var(--fs-h3-feature);
  letter-spacing: var(--ls-display);
}

.work-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-sub);
}

.work-item--featured .work-card__desc {
  font-size: var(--fs-body);
  line-height: 1.72;
  max-width: 44ch;
}

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;   /* 카드 높이가 달라도 태그는 항상 바닥에 붙는다 */
  padding-top: 6px;
}

/* ---- 2-4. 빈 상태 ----
   게시판에 글이 없을 때 카드 목록 대신 들어간다.
   카드와 같은 테두리·배경을 써서 "무언가 빠졌다"가 아니라
   "아직 준비 중이다"로 읽히게 한다. 점선 테두리로 임시 상태임을 표시한다. */
.work-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--color-border-strong);
  background-color: var(--color-bg-raised);
}

@media (min-width: 768px) {
  .work-empty {
    gap: var(--sp-4);
    padding: var(--sp-9) var(--sp-8);
  }
}

.work-empty__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-heading);
}

.work-empty__desc {
  max-width: 46ch;              /* 한 줄이 너무 길어지지 않게 — 본문 가독 폭 */
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-sub);
}

.work-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}


/* ==========================================================================
   3. 소개
   ========================================================================== */

/*
 * 시안 구성 — 좌: 섹션 라벨 + 메타 / 우: 큰 문장 + 3열 블록.
 * 좌측이 좁고(0.8fr) 우측이 넓다(1.2fr). 이 섹션은 .l-section__head 를 쓰지 않고
 * 라벨을 좌측 컬럼 안에 넣는다.
 */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 72px;
  }
}

/* ---- 좌측: 라벨 + 메타 ---- */
.about__meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* "QA → PUBLISHER / SEOUL, KR" — 모노, 행간을 2로 크게 벌린 메타 표기 */
.about__meta-text {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 2;
  color: var(--color-text-muted);
}

/* ---- 우측: 큰 문장 + 3열 ---- */
.about__main {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.about__title {
  font-size: var(--fs-h2-about);
  font-weight: var(--fw-regular);
  line-height: 1.16;
  letter-spacing: var(--ls-display);
  text-wrap: pretty;
}

.about__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--c-ink-soft);   /* 반전 배경 위 구분선 (시안 #3A3134) */
}

@media (min-width: 768px) {
  .about__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.about__col h3 {
  margin-bottom: 10px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.about__col p {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--color-text-sub);
}