/* Mediahome 메인 화면 (/1/)
   벤토 그리드. 히어로 영상 + 가로 배너 작업물 4개 + 제작 원칙 + 문의.
   루트(/)는 이 경로로 redirect 된다. */

:root {
  color-scheme: dark;

  /* 색 — 알파 변형을 위해 원본 채널을 함께 둔다.
     하드코딩된 rgb(10 10 11 / n%) 을 없애려는 목적이다. */
  --v1-bg-rgb: 10 10 11;
  --v1-bg: rgb(var(--v1-bg-rgb));
  --v1-tile: #141416;
  --v1-tile-hi: #1c1c1f;
  --v1-line: rgb(245 245 244 / 12%);
  --v1-line-strong: rgb(245 245 244 / 26%);
  --v1-text: #f5f5f4;
  --v1-muted: #a3a39d;
  --v1-accent: #ff5a1f;
  --v1-accent-ink: #0a0a0b;

  /* 타이포 계층 — 값을 적게 두고 간격을 벌린다.
     근접한 값이 여럿이면 계층이 아니라 소음이 된다. */
  --v1-text-2xs: 0.6875rem;
  --v1-text-xs: 0.75rem;
  --v1-text-sm: 0.875rem;
  --v1-text-base: 1rem;
  --v1-text-lg: clamp(1rem, 1.3vw, 1.35rem);
  /* hero(display)와 lg 사이를 잇는 계층. 이 자리가 비어 있으면 큰 제목 하나와
     작은 글자 무리로만 보여 위계가 두 단으로 납작해진다. */
  --v1-text-xl: clamp(1.5rem, 2.6vw, 2.5rem);
  --v1-display: clamp(2.25rem, 4.4vw, 4.5rem);

  --v1-tracking-label: 0.16em;
  --v1-tracking-tight: -0.02em;

  /* 간격 리듬 — 4px 배수 */
  --v1-space-1: 0.25rem;
  --v1-space-2: 0.5rem;
  --v1-space-3: 0.75rem;
  --v1-space-4: 1rem;
  --v1-space-6: 1.5rem;

  --v1-gap: clamp(0.5rem, 0.9vw, 0.875rem);
  --v1-pad: clamp(1rem, 2vw, 1.75rem);
  --v1-radius: 0.875rem;
  --v1-hit: 2.75rem;
  --v1-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --v1-font: "Pretendard", "SUIT Variable", Inter, -apple-system,
    BlinkMacSystemFont, "Noto Sans KR", sans-serif;
  --v1-font-wide: "Arial Narrow", "Roboto Condensed", var(--v1-font);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.v1 {
  min-width: 20rem;
  margin: 0;
  background: var(--v1-bg);
  color: var(--v1-text);
  font-family: var(--v1-font);
  font-size: var(--v1-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.v1 img,
.v1 video {
  display: block;
  max-width: 100%;
}

.v1 h1,
.v1 h2,
.v1 p,
.v1 ol {
  margin: 0;
  padding: 0;
}

.v1 a {
  color: inherit;
  text-decoration: none;
}

/* 어두운 배경에서 accent 단색 링은 타일 위에서 묻힌다.
   바깥에 배경색 링을 한 겹 더 둘러 어디에 있든 보이게 한다. */
.v1 a:focus-visible,
.v1 button:focus-visible {
  outline: 2px solid var(--v1-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgb(var(--v1-bg-rgb) / 85%);
}

.v1-skip {
  position: fixed;
  z-index: 100;
  inset: var(--v1-space-3) auto auto var(--v1-space-3);
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  padding: var(--v1-space-2) var(--v1-space-4);
  transform: translateY(-200%);
  border-radius: 0.375rem;
  background: var(--v1-accent);
  color: var(--v1-accent-ink);
  font-weight: 700;
}

.v1-skip:focus {
  transform: translateY(0);
}

/* 영상 재생/정지 (WCAG 2.2.2). 모션 축소 환경에서는 스크립트가 hidden 처리한다.
   fixed 로 두면 문서 흐름의 어떤 요소든 덮을 수 있다. 실제로 390 에서 작업물 카드
   상단과 번호를 가렸다. 제어 대상인 영상이 있는 hero 타일 안에 붙여
   다음 카드와 푸터를 구조적으로 덮지 못하게 한다. */
.v1-video-toggle {
  position: absolute;
  z-index: 3;
  top: var(--v1-space-3);
  left: var(--v1-space-3);
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  padding: 0 var(--v1-space-4);
  border: 1px solid var(--v1-line-strong);
  border-radius: 999px;
  background: rgb(var(--v1-bg-rgb) / 82%);
  backdrop-filter: blur(12px);
  color: var(--v1-muted);
  font-family: inherit;
  font-size: var(--v1-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: color 160ms var(--v1-ease), border-color 160ms var(--v1-ease);
}

.v1-video-toggle:hover {
  border-color: var(--v1-accent);
  color: var(--v1-text);
}

.v1-video-toggle[hidden] {
  display: none;
}

/* 헤더 */
.v1-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v1-gap) var(--v1-gap) 0;
  gap: var(--v1-space-4);
}

.v1-brand {
  display: flex;
  min-height: var(--v1-hit);
  flex-direction: column;
  justify-content: center;
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-lg);
  font-weight: 800;
  letter-spacing: var(--v1-tracking-label);
  line-height: 1.1;
}

.v1-brand small {
  color: var(--v1-muted);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.22em;
}

.v1-header__cta {
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  padding: 0 1.1rem;
  border: 1px solid var(--v1-line-strong);
  border-radius: 999px;
  font-size: var(--v1-text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 180ms var(--v1-ease), background-color 180ms var(--v1-ease),
    color 180ms var(--v1-ease);
}

.v1-header__cta:hover {
  border-color: var(--v1-accent);
  background: var(--v1-accent);
  color: var(--v1-accent-ink);
}

/* 벤토 그리드
   포스터 원본은 960x300 계열(약 3.2:1) 가로 배너다. 세로 타일에 넣으면
   좌우가 대부분 잘려나가므로 작업 타일을 가로 띠로 배치하고 원본 비율을 그대로 쓴다. */
.v1-bento {
  display: grid;
  min-height: calc(100svh - 7.5rem);
  padding: var(--v1-gap);
  gap: var(--v1-gap);
  grid-template-areas:
    "hero hero hero cont"
    "w1   w2   w3   w4"
    "prin prin prin prin";
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.v1-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--v1-line);
  border-radius: var(--v1-radius);
  background: var(--v1-tile);
}

/* 히어로 — 정지 버튼의 위치 기준이 된다. */
.v1-tile--hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-area: hero;
  padding: var(--v1-pad);
}

/* 영상 라이프사이클 계약 — video는 template 안에 있고 video-controller.js가
   마운트한 뒤 canplay 시점에 is-video-ready를 붙인다.
   여기서 autoplay를 흉내내면 poster-first가 깨진다. */
.v1-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.v1-hero__media img,
.v1-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position-mobile, 56% 48%);
}

.v1-hero__media video {
  opacity: 0;
  transition: opacity 420ms var(--v1-ease);
}

.v1-hero__media.is-video-ready video {
  opacity: 1;
}

.v1-tile--hero::after {
  position: absolute;
  z-index: 1;
  content: "";
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--v1-bg-rgb) / 92%) 0%,
    rgb(var(--v1-bg-rgb) / 55%) 38%,
    rgb(var(--v1-bg-rgb) / 10%) 100%
  );
}

.v1-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 34ch;
}

.v1-kicker {
  margin-bottom: var(--v1-space-3);
  color: var(--v1-accent);
  font-size: var(--v1-text-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.v1-kicker--dark {
  color: var(--v1-accent-ink);
}

.v1-hero__title {
  font-family: var(--v1-font-wide);
  font-size: var(--v1-display);
  font-weight: 800;
  letter-spacing: var(--v1-tracking-tight);
  line-height: 0.98;
  text-wrap: balance;
}

.v1-hero__desc {
  max-width: 40ch;
  margin-top: var(--v1-space-4);
  color: var(--v1-muted);
  font-size: var(--v1-text-sm);
}

/* 작업물 — 프레임 자체를 포스터 원본 비율로 두어 잘려나가는 영역을 없앤다. */
.v1-tile--work {
  display: block;
  aspect-ratio: 960 / 300;
}

.v1-tile--work-1 { grid-area: w1; }
.v1-tile--work-2 { grid-area: w2; }
.v1-tile--work-3 { grid-area: w3; }
.v1-tile--work-4 { grid-area: w4; }

.v1-tile--work img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  filter: saturate(0.75) brightness(0.66);
  transition: transform 620ms var(--v1-ease), filter 420ms var(--v1-ease);
}

.v1-tile--work:hover img,
.v1-tile--work:focus-visible img {
  transform: scale(1.06);
  filter: saturate(1) brightness(0.86);
}

/* 배너는 3.2:1 이라 높이가 100px 안팎이다. --v1-pad(최대 28px)를 그대로 쓰면
   캡션이 이미지를 거의 다 덮는다. 배너 전용으로 좁은 여백을 쓴다. */
.v1-work__body {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--v1-space-2);
  padding: var(--v1-space-3) var(--v1-space-4);
  background: linear-gradient(to top, rgb(var(--v1-bg-rgb) / 90%) 0%, transparent 82%);
}

.v1-work__index {
  color: var(--v1-accent);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.v1-work__title {
  font-size: var(--v1-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.v1-work__arrow {
  position: absolute;
  z-index: 2;
  top: var(--v1-pad);
  right: var(--v1-pad);
  display: grid;
  width: var(--v1-hit);
  height: var(--v1-hit);
  place-items: center;
  border: 1px solid var(--v1-line-strong);
  border-radius: 999px;
  background: rgb(var(--v1-bg-rgb) / 55%);
  font-size: var(--v1-text-base);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms var(--v1-ease), transform 240ms var(--v1-ease);
}

.v1-tile--work:hover .v1-work__arrow,
.v1-tile--work:focus-visible .v1-work__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* 제작 원칙 */
.v1-tile--principles {
  display: flex;
  flex-direction: column;
  grid-area: prin;
  padding: var(--v1-pad);
}

.v1-principles {
  display: grid;
  flex: 1;
  align-content: center;
  gap: var(--v1-space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.v1-principles li {
  display: flex;
  flex-direction: column;
  gap: var(--v1-space-1);
  padding-left: var(--v1-space-3);
  border-left: 2px solid var(--v1-accent);
}

/* kicker와 같은 크기면 두 라벨이 같은 층으로 읽힌다. 한 단 내려 구분한다. */
.v1-principles b {
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v1-principles span {
  color: var(--v1-muted);
  font-size: var(--v1-text-sm);
  line-height: 1.45;
}

/* 문의 — 오렌지 단색 타일. 히어로와 같은 높이인데 내용은 그 4분의 1도 안 된다.
   콘텐츠를 바닥에 붙이고 상단 여백을 의도된 침묵으로 남긴다.
   제목과 메일은 하나의 CTA 그룹으로 묶어 space-6 만큼만 띄운다. */
.v1-tile--contact {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--v1-space-6);
  grid-area: cont;
  padding: var(--v1-pad);
  border-color: var(--v1-accent);
  background: var(--v1-accent);
  color: var(--v1-accent-ink);
}

/* kicker는 CTA 그룹이 아니라 타일 상단 라벨이다. 그룹에서 떼어 위로 올린다. */
.v1-tile--contact .v1-kicker {
  margin-bottom: auto;
}

/* 좁은 화면에서 br 외에 줄이 더 깨질 때 마지막 줄에 한두 글자만 남는 것을 막는다.
   work__title 은 4-9자 한 줄이라 balance 가 계산할 대상이 없어 적용하지 않았다. */
.v1-contact__title {
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
}

.v1-contact__mail {
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  align-self: flex-start;
  border-bottom: 2px solid currentColor;
  font-size: var(--v1-text-sm);
  font-weight: 700;
  transition: opacity 180ms var(--v1-ease);
}

.v1-contact__mail:hover {
  opacity: 0.7;
}

.v1-tile--contact a:focus-visible {
  outline-color: var(--v1-accent-ink);
  box-shadow: 0 0 0 5px rgb(255 90 31 / 85%);
}

/* 푸터 — 정지 버튼이 hero 안으로 들어가 더 이상 겹치지 않는다.
   버튼 폭만큼 왼쪽을 비우던 임시 보정은 제거했다. */
.v1-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--v1-space-2);
  padding: 0 var(--v1-gap) var(--v1-gap);
  color: var(--v1-muted);
  font-size: var(--v1-text-xs);
}

/* 반응형 */
@media (min-width: 900px) {
  .v1-hero__media img,
  .v1-hero__media video {
    object-position: var(--media-position-desktop, 56% 48%);
  }
}

@media (max-width: 1099.98px) {
  .v1-bento {
    grid-template-areas:
      "hero hero"
      "w1   w2"
      "w3   w4"
      "prin prin"
      "cont cont";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 62svh auto auto auto auto;
  }

  .v1-principles {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 619.98px) {
  .v1-bento {
    grid-template-areas:
      "hero"
      "w1"
      "w2"
      "w3"
      "w4"
      "prin"
      "cont";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 70svh auto auto auto auto auto auto;
  }

  /* 좁은 화면에서는 배너가 낮아져 캡션이 이미지를 다 덮는다. 여백을 줄인다. */
  .v1-work__body {
    padding: var(--v1-space-3) var(--v1-space-4);
  }

  .v1-work__arrow {
    top: var(--v1-space-3);
    right: var(--v1-space-3);
  }

  /* 정지 버튼이 hero 안으로 들어가면서 푸터 하단 여백 보정도 불필요해졌다. */
}

/* 모션 축소 시 영상은 마운트되더라도 노출하지 않는다.
   video-controller.js가 애초에 마운트하지 않지만 이중으로 막는다. */
@media (prefers-reduced-motion: reduce) {
  .v1-hero__media video {
    display: none;
  }

  .v1 *,
  .v1 *::before,
  .v1 *::after {
    transition-duration: 0.01ms !important;
  }
}

/* 브랜드 — 로고를 맨 왼쪽에 두고 텍스트를 오른쪽에 붙인다.
   로고는 nlynn.com 의 실제 자산(logo-gnb.svg)이며 fill 만 currentColor 로 바꿨다. */
.v1-brand {
  flex-direction: row;
  align-items: center;
  gap: var(--v1-space-3);
}

.v1-brand__mark {
  width: auto;
  height: 1.6rem;
  flex-shrink: 0;
  color: var(--v1-text);
}

.v1-brand__copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

/* 문의 폼 — 벤토 아래 별도 섹션. 오렌지 계층은 제출 버튼이 이어받는다. */
.v1-form-section {
  display: grid;
  padding: clamp(3rem, 7vw, 6rem) var(--v1-gap) clamp(3rem, 6vw, 5rem);
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border-top: 1px solid var(--v1-line);
}

.v1-form-title {
  margin-top: var(--v1-space-2);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-xl);
  font-weight: 800;
  letter-spacing: var(--v1-tracking-tight);
  line-height: 1.05;
  text-wrap: balance;
}

.v1-form-lead {
  max-width: 34ch;
  margin-top: var(--v1-space-4);
  color: var(--v1-muted);
  font-size: var(--v1-text-sm);
}

.v1-form-mail {
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  margin-top: var(--v1-space-4);
  border-bottom: 2px solid var(--v1-accent);
  font-size: var(--v1-text-sm);
  font-weight: 700;
  transition: color 180ms var(--v1-ease);
}

.v1-form-mail:hover {
  color: var(--v1-accent);
}

.v1-form-addr {
  margin-top: var(--v1-space-3);
  color: var(--v1-muted);
  font-size: var(--v1-text-xs);
}

.v1-form {
  display: grid;
  gap: var(--v1-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v1-field {
  display: flex;
  flex-direction: column;
  gap: var(--v1-space-2);
}

.v1-field--wide {
  grid-column: 1 / -1;
}

.v1-field label,
.v1-consent label {
  color: var(--v1-muted);
  font-size: var(--v1-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.v1-field input,
.v1-field textarea {
  min-height: var(--v1-hit);
  padding: var(--v1-space-3);
  border: 1px solid var(--v1-line-strong);
  border-radius: 0.5rem;
  background: var(--v1-tile);
  color: var(--v1-text);
  font-family: inherit;
  font-size: var(--v1-text-sm);
  transition: border-color 160ms var(--v1-ease);
}

.v1-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.v1-field input:hover,
.v1-field textarea:hover {
  border-color: var(--v1-muted);
}

.v1-field input:focus-visible,
.v1-field textarea:focus-visible,
.v1-consent input:focus-visible {
  outline: 2px solid var(--v1-accent);
  outline-offset: 2px;
}

/* 허니팟은 화면과 스크린 리더 양쪽에서 감춘다. display:none 이면 일부 봇이
   건너뛰므로 위치만 화면 밖으로 보낸다. */
.v1-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.v1-consent {
  display: flex;
  align-items: center;
  gap: var(--v1-space-3);
  grid-column: 1 / -1;
  min-height: var(--v1-hit);
}

.v1-consent input {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  accent-color: var(--v1-accent);
}

.v1-submit {
  min-height: var(--v1-hit);
  padding: 0 var(--v1-space-6);
  border: 1px solid var(--v1-accent);
  border-radius: 999px;
  background: var(--v1-accent);
  color: var(--v1-accent-ink);
  font-family: inherit;
  font-size: var(--v1-text-sm);
  font-weight: 800;
  justify-self: start;
  cursor: pointer;
  transition: opacity 180ms var(--v1-ease);
}

.v1-submit:hover:not(:disabled) {
  opacity: 0.85;
}

.v1-submit:disabled {
  cursor: progress;
  opacity: 0.6;
}

.v1-form-status {
  grid-column: 1 / -1;
  min-height: 1.25rem;
  font-size: var(--v1-text-sm);
}

.v1-form-status[data-kind="ok"] {
  color: var(--v1-text);
}

.v1-form-status[data-kind="error"] {
  color: var(--v1-accent);
}

.v1-form-status[data-kind="pending"] {
  color: var(--v1-muted);
}

@media (max-width: 899.98px) {
  .v1-form-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .v1-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 카피 줄 나눔 — 한국어는 글자 단위로 끊기면 "선명하 / 게" 처럼 읽힌다.
   줄을 span 으로 명시해 어절이 통째로 유지되게 한다.
   keep-all 은 그래도 남는 어절 내부 분리를 막는 이중 안전장치다. */
.v1-line {
  display: block;
  word-break: keep-all;
  text-wrap: balance;
}

.v1-hero__title,
.v1-contact__title {
  word-break: keep-all;
}

/* 히어로 둘째 줄의 "더" 를 포인트로 키운다.
   em 이라 display 크기를 따라가므로 반응형이 그대로 유지된다.
   line-height 를 줄여 큰 글자가 줄 간격을 밀어내지 않게 한다. */
.v1-accent-word {
  color: var(--v1-accent);
  font-size: 2.2em;
  line-height: 0.72;
}

/* 푸터 우측 — 주소와 관리 진입점을 한 덩어리로 묶는다.
   fixed 로 띄우면 스크롤 중 다른 요소를 덮을 수 있어 푸터 안에 둔다. */
.v1-footer__end {
  display: inline-flex;
  align-items: center;
  gap: var(--v1-space-3);
}

/* 관리 진입점. 방문자에게 필요한 것이 아니므로 눈에 띄지 않게 두되,
   hit target 은 44px 를 지킨다. robots.txt 는 /admin 을 이미 차단한다. */
.v1-admin-link {
  display: inline-flex;
  width: var(--v1-hit);
  height: var(--v1-hit);
  align-items: center;
  justify-content: center;
  color: var(--v1-muted);
  opacity: 0.55;
  transition: color 160ms var(--v1-ease), opacity 160ms var(--v1-ease);
}

.v1-admin-link:hover,
.v1-admin-link:focus-visible {
  color: var(--v1-accent);
  opacity: 1;
}

.v1-admin-link svg {
  width: 1.05rem;
  height: 1.05rem;
}