@charset "utf-8";

/*
 * 영어 첫 화면 배치만 담당합니다.
 * 색·글자 크기·간격은 토큰만 쓰고, 새 KAPA 부품 이름은 만들지 않습니다.
 */

/* 브라우저 기본 바깥 여백을 없애 파란 칸이 화면 끝에 붙게 합니다 */
html,
.kapa-root {
  margin: 0;
}

/*
 * 페이지가 길든 짧든 오른쪽 스크롤 칸을 미리 잡아 둡니다.
 * 없으면 화면을 오갈 때 흰 카드가 옆으로 살짝 움직입니다.
 */
html {
  scrollbar-gutter: stable;
}

/* 로고줄 아래 ~ 흰 카드 위: Home·안쪽 화면이 같은 간격을 씁니다 */
.kapa-sitepage {
  --eng-stage-gap: var(--space-5);
}

/* 영문은 단어 중간에서 잘리지 않게 기본 줄바꿈을 씁니다 */
.kapa-root {
  word-break: normal;
}

/* 위쪽 로고: 글자 로고 대신 그림 로고를 가운데 맞춥니다 */
.eng-brand {
  align-items: center;
  min-width: 0;
}

.eng-brand-logo {
  display: block;
  height: 2.75rem;
  width: auto;
  max-width: 8rem;
}

/* 환영 영역: 미리보기와 같이 흰 카드 + 위쪽 브랜드 띠
 * 가로 폭은 위 로고줄·아래 Explore와 같게 (안쪽 여백까지 맞춤) */
.eng-home-hero {
  background: var(--color-bg-subtle);
  padding: var(--eng-stage-gap) 0 var(--space-6);
}

.eng-home-body {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-6) var(--container-padding-x) var(--space-8);
}

.eng-home-hero__inner {
  display: grid;
  grid-template-areas:
    "visual"
    "copy";
  gap: var(--space-6);
  box-sizing: border-box;
  width: calc(100% - 2 * var(--container-padding-x));
  max-width: calc(var(--container-width) - 2 * var(--container-padding-x));
  margin: 0 auto;
}

/* 첫화면 소개칸 · 안쪽 화면 흰 상자 — 테두리·위쪽 색띠를 같이 씀 */
.eng-home-hero__inner,
.eng-sub__card {
  position: relative;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.eng-home-hero__inner::before,
.eng-sub__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--gradient-brand);
  z-index: 1;
}

.eng-home-hero__visual {
  display: block;
  grid-area: visual;
  min-width: 0;
  min-height: 0;
}

.eng-home-hero__copy {
  grid-area: copy;
  min-width: 0;
}

.eng-home-hero__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eng-home-hero__visual img {
  display: block;
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
  /* 회관·간판을 남기고, 오른쪽 나무 쪽이 잘리게 */
  object-position: 28% 38%;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.eng-home-hero__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  overflow-wrap: break-word;
}

.eng-home-hero .kapa-prose {
  margin: 0;
}

.eng-home-hero .kapa-prose p:last-child {
  margin-bottom: 0;
}

.eng-home-hero__actions {
  margin-top: var(--space-5);
}

/* 휴대폰: 공식 글은 그대로 두고, 사진·여백만 줄여 인사 글과 단추가 보이게 */
@media (max-width: 767px) {
  .eng-home-hero {
    padding-bottom: var(--space-4);
  }

  .eng-home-hero__inner {
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .eng-home-hero__visual img {
    height: 9rem;
  }

  .eng-home-hero__eyebrow {
    letter-spacing: 0.04em;
  }

  .eng-home-hero .kapa-prose {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .eng-home-hero__actions {
    margin-top: var(--space-4);
  }
}

/* 바로가기 칸: 작은 화면 1열 → 중간 2열 → 넓은 화면 3열 */
.eng-home-shortcuts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.eng-home-shortcuts .kapa-panel {
  height: 100%;
}

.eng-home-card-link {
  margin-top: auto;
  align-self: flex-start;
  min-height: var(--touch-target-min);
}

/* 영상 안내: 글이 위, 그림이 아래 (작은 화면) */
.eng-home-video {
  display: grid;
  gap: var(--space-5);
}

/* 그림은 그 자리에서 재생, 단추는 새 창 */
.eng-home-video__stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #000;
  aspect-ratio: 16 / 9;
}

.eng-home-video__start {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.eng-home-video__start img,
.eng-home-video__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eng-home-video__start:hover,
.eng-home-video__start:focus-visible {
  opacity: 0.92;
}

.eng-home-video__start:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 바로가기 다음 제목은 칸을 띄웁니다 */
.eng-home-follow-title {
  margin-top: var(--space-8);
}

.eng-home-video .kapa-btn-group {
  margin-top: var(--space-4);
}

/* 아주 좁은 화면: 환영 제목을 한 단계 더 낮춥니다 */
@media (max-width: 479px) {
  .eng-home-hero__title {
    font-size: var(--text-xl);
  }
}

/*
 * 아래 Quick links: 제목은 왼쪽 협회 이름과 같은 무게,
 * 항목은 주소·전화처럼 글자 링크로 보이게 합니다.
 * (공통 kapa-eng.css 의 text-sm + 44px 칸이 제목·항목을 같게 보이게 해서 덮습니다.)
 */
.kapa-sitefoot__heading {
  margin: 0 0 var(--space-3);
  color: var(--color-text-inverse);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  opacity: 1;
}

.kapa-sitefoot__list a {
  font-weight: var(--font-weight-regular);
  opacity: 0.88;
}

@media (min-width: 768px) {
  .kapa-sitepage {
    --eng-stage-gap: var(--space-8);
  }

  .eng-brand-logo {
    height: 3.25rem;
    max-width: 9rem;
  }

  .eng-home-hero {
    padding-bottom: var(--space-8);
  }

  .eng-home-hero__inner,
  .eng-sub__card {
    padding: var(--space-7);
  }

  .eng-home-hero__visual img {
    height: 16rem;
  }

  .eng-home-hero__title {
    font-size: var(--text-3xl);
  }

  .eng-home-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eng-home-video {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
  }

  /*
   * 컴퓨터: 손가락용 44px 칸을 쓰지 않아 버튼처럼 보이지 않게 합니다.
   * 휴대폰(767px 이하)은 공통 규칙 그대로 둡니다.
   */
  .kapa-sitefoot__list a {
    display: block;
    min-height: 0;
    padding: 0;
    line-height: var(--leading-normal);
  }

  .kapa-sitefoot__list li + li {
    margin-top: var(--space-1);
  }

  /*
   * Quick links 단어가 짧아 칸 왼쪽에 붙어 보입니다.
   * 글자 줄은 왼쪽으로 두고, 제목+목록 묶음만 가운데 칸에 둡니다.
   */
  .kapa-sitefoot__grid > nav {
    justify-self: center;
    width: max-content;
    max-width: 100%;
    text-align: left;
  }
}

/*
 * 위쪽 소메뉴: About·Work·Appraisers는 눌러서 엽니다.
 * 컴퓨터(1024px 이상)는 아래로 펼침, 접힌 메뉴에서는 그 자리에 이어집니다.
 */
.kapa-sitehead__item {
  position: relative;
}

.kapa-sitehead__trigger {
  margin: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  gap: var(--space-1);
}

.kapa-sitehead__caret {
  flex-shrink: 0;
  display: block;
  transform-origin: center;
  transform-box: fill-box;
}

.kapa-sitehead__item.is-current > .kapa-sitehead__trigger {
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-semibold);
}

.kapa-sitehead__sub {
  margin: 0;
  padding: var(--space-1);
  list-style: none;
}

.kapa-sitehead__sub a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.kapa-sitehead__sub a:hover,
.kapa-sitehead__sub a:focus-visible {
  background: var(--color-bg-brand-soft);
  color: var(--color-primary-strong);
}

.kapa-sitehead__sub a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.kapa-sitehead__sub a[aria-current="page"] {
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-semibold);
}

@media (prefers-reduced-motion: no-preference) {
  .kapa-sitehead__caret {
    transition: transform 0.15s ease;
  }
}

.kapa-sitehead__item.is-open .kapa-sitehead__caret {
  transform: rotate(180deg);
}

/*
 * 영어 메뉴 이름이 길어서, 1024px 미만에서는 접힌 메뉴를 유지합니다.
 * (공통 규칙은 768px부터 펼침)
 */
@media (max-width: 1023px) {
  .kapa-sitehead__inner {
    flex-wrap: nowrap;
  }

  .kapa-sitehead__toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  .kapa-sitehead__tools {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .kapa-sitehead.is-open .kapa-sitehead__inner {
    flex-wrap: wrap;
  }

  .kapa-sitehead.is-open .kapa-sitehead__tools {
    display: flex;
  }

  .kapa-sitehead__nav {
    flex-direction: column;
    align-items: stretch;
  }

  .kapa-sitehead__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .kapa-sitehead__actions .kapa-btn {
    width: 100%;
  }

  .kapa-sitehead__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .kapa-sitehead__trigger {
    width: 100%;
    justify-content: space-between;
  }

  .kapa-sitehead__sub {
    margin: 0 0 var(--space-1) var(--space-3);
    padding: 0;
    border-left: 2px solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  /* 넓은 화면: 회관 사진 + 환영 글 */
  .eng-home-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "visual copy";
    align-items: stretch;
  }

  /*
   * 사진 원래 높이가 칸을 키우지 않게 합니다.
   * 줄 높이는 오른쪽 글이 정하고, 사진은 그 높이에 맞춰 잘라 넣습니다.
   */
  .eng-home-hero__visual {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .eng-home-hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .eng-home-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kapa-sitehead__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    min-width: 12.5rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
  }

  .kapa-sitehead__sub a {
    min-height: 2.25rem;
  }
}