/* ==========================================================================
   components.css — 버튼 · CEO · 타임라인 · 공법카드 · 오피스 · 뉴스/프로젝트 카드
                    · 채용 아코디언 · 모달 · 스크롤 등장 애니메이션
   ========================================================================== */

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: .9rem; font-weight: 700; letter-spacing: -.01em;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--primary:hover { background: var(--c-blue-dark); }
.btn--ghost { border: 1px solid var(--c-line); color: var(--c-ink); background: var(--c-white); }
.btn--ghost:hover { border-color: var(--c-blue); color: var(--c-blue); }
.btn--light { background: rgba(255,255,255,.14); color: var(--c-white); border: 1px solid rgba(255,255,255,.28); }
.btn--light:hover { background: var(--c-white); color: var(--c-navy); }
.btn--sm { padding: 9px 16px; font-size: .82rem; }

/* ---------- 칩 필터 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.chip {
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-white);
  font-size: .82rem; font-weight: 600; color: var(--c-muted);
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--c-blue-soft); color: var(--c-blue); }
.chip.is-on { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }

/* ---------- CEO 인사말 ---------- */
.ceo {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}
/* 사진 + 서명 / 본문 2단.
   사진은 본문 높이 정도에서 끝나도록 폭을 묶어 두고, 바로 아래에 서명을 답니다.
   (예전에는 사진이 왼쪽 칸 전체를 차지해 본문보다 훨씬 길었습니다) */
.ceo__intro {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: start;
}
/* CEO 인사말 위 소개 영상 — video URL이 없으면 render.js가 [hidden] 처리,
   있으면 자동재생·반복 iframe으로 바로 채워 넣습니다. */
.ceo__video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--ph); margin-bottom: var(--sp-4);
}
.ceo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ceo__media {
  /* 사진을 자르지 않고 원본 그대로(직사각형) 다 보이도록 고정 비율/
     object-fit:cover 를 안 씁니다 — 세로 길이는 사진 자체 비율을 따라갑니다.
     라운딩도 없앴습니다(둥근 모서리가 사진 꼭짓점을 살짝 잘라 선처럼 보였음). */
  overflow: hidden; background: var(--ph);
}
.ceo__media img { width: 100%; height: auto; display: block; }
.ceo__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.45;
  color: var(--c-navy); border-left: 3px solid var(--c-blue);
  padding-left: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4);
}
/* 사진 바로 아래 "센 엔지니어링그룹 회장 이창남" */
.ceo__sign {
  margin-top: var(--sp-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
.ceo__role { font-size: var(--fs-small); color: var(--c-muted); }
.ceo__name { font-size: 1.15rem; }

/* ---------- 접이식 묶음 (.acc) ----------
   CEO 약력(약력·자격·수상·저서)과 회사연혁(연대별)이 같은 모양을 씁니다.
   여닫이 표시는 닫힘 +, 열림 −. */
.acc { border-top: 1px solid var(--c-line); }
.acc__group { border-bottom: 1px solid var(--c-line); }
.acc__group summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap;
  padding: 16px 4px;
  font-weight: 700; font-size: .98rem; color: var(--c-ink);
  transition: color .2s;
}
/* 연대(굵게) + 그 시기를 한 줄로 요약한 헤드 문구 */
.acc__label { flex-shrink: 0; }
.acc__headline { font-weight: 500; font-size: .88rem; color: var(--c-muted); }
.acc__group summary:hover { color: var(--c-blue); }
.acc__group summary::-webkit-details-marker { display: none; }
.acc__group summary::after {
  content: "+"; flex-shrink: 0; margin-left: auto;   /* 헤드 문구가 있든 없든 오른쪽 끝 */
  font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--c-blue);
}
.acc__group[open] summary::after { content: "−"; }

/* 글머리 점 목록 (CEO 약력) */
.acc__list { display: grid; gap: 8px; padding: 0 4px 20px; }
.acc__list li {
  font-size: var(--fs-small); color: var(--c-muted); padding-left: 14px; position: relative;
}
.acc__list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue-soft);
}

.ceo__career { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- 연혁 : 연대 모듈 (.era) ----------
   연대 이름은 모두 왼쪽에 크게. 열면 그 연대의 가로 타임라인이 펼쳐집니다. */
.era { position: relative; }
.era__head {
  cursor: pointer; list-style: none;
  display: grid; gap: 2px;
  padding: 22px 44px 22px 0;
  text-align: left;
}
.era__head::-webkit-details-marker { display: none; }
.era:not([open]) .era__head { border-bottom: 1px solid var(--c-line); }

/* 맨 위 창립 한 줄 — 연대와 같은 모양이지만 펼칠 게 없으므로 +,− 없이 */
.era--origin .era__head { cursor: default; padding-right: 0; }
.era--origin .era__head::after { content: none; }

.era__label {
  display: block;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem); line-height: 1.1;
  color: var(--c-blue);
}
.era__headline { font-size: .95rem; font-weight: 600; color: var(--c-ink); }

/* 여닫이 표시 — 제목 줄 오른쪽 끝에 붙습니다 */
.era__head::after {
  content: "+"; position: absolute; right: 4px; top: 42px;
  font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--c-blue);
}
.era[open] .era__head::after { content: "−"; }

/* ---------- 연혁 : 가로 타임라인 (.hline) ----------
   수평선 하나에 항목이 왼쪽→오른쪽으로 놓이고, 선의 위·아래에 번갈아 붙습니다.
   격자는 3행(위 카드 / 선 / 아래 카드) × 항목 수(--n)만큼의 칸입니다. */
.hline { padding: 4px 0 8px; }
.hline__track {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: minmax(104px, auto) 30px minmax(104px, auto);
  position: relative;
}
.hline__item { display: contents; }

.hline__axis {
  grid-row: 2; grid-column: 1 / -1; align-self: center;
  height: 2px; background: var(--c-navy);
}
.hline__dot {
  grid-row: 2; align-self: center; justify-self: center; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-white); border: 3px solid var(--c-blue);
}

/* 카드는 자기 칸의 2배 폭. 같은 쪽 이웃은 두 칸 떨어져 있어 겹치지 않습니다. */
.hline__card {
  position: relative; justify-self: center; text-align: center;
  width: calc(200% - 18px);
}
.hline__item--up   .hline__card { grid-row: 1; align-self: end; }
.hline__item--down .hline__card { grid-row: 3; align-self: start; }

/* 카드에서 선까지 잇는 짧은 세로 눈금 */
.hline__card::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: 15px;
  background: var(--c-line);
}
.hline__item--up   .hline__card::after { bottom: -15px; }
.hline__item--down .hline__card::after { top: -15px; }

/* 양 끝 카드 — 1.5칸 폭으로 안쪽에 붙이고, 눈금은 자기 점 위치로 옮깁니다
   (1.5칸 카드에서 칸 중심은 카드 폭의 1/3 지점입니다) */
.hline__item--first .hline__card { width: calc(150% - 9px); justify-self: start; }
.hline__item--first .hline__card::after { left: calc(33.3333% + 3px); }
.hline__item--last  .hline__card { width: calc(150% - 9px); justify-self: end; }
.hline__item--last  .hline__card::after { left: auto; right: calc(33.3333% + 3px); }
.hline__item--solo  .hline__card { width: 100%; }

.hline__when {
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  color: var(--c-blue); margin-bottom: 3px;
}
.hline__title { font-size: .88rem; font-weight: 700; line-height: 1.45; }
.hline__desc { font-size: .78rem; color: var(--c-muted); margin-top: 3px; }

/* 좁은 화면에서는 가로로 늘어놓을 수 없으므로 세로 목록으로 */
@media (max-width: 900px) {
  .hline__track { display: block; padding: 0; }
  .hline__item { display: block; }
  .hline__axis, .hline__dot { display: none; }
  .hline__card,
  .hline__item--first .hline__card,
  .hline__item--last .hline__card {
    /* 양 끝 카드는 데스크톱에서 .hline__item--first/--last .hline__card 가
       클래스 2개짜리라 명시도가 더 높아서, 여기서 .hline__card 하나만 다시
       쓰면 안 지워집니다(모바일에서 카드가 화면 밖으로 삐져나가던 원인).
       같은 명시도로 맞춰서 확실히 덮어씁니다. */
    width: auto; text-align: left; margin-bottom: 16px;
    padding-left: 16px; border-left: 2px solid var(--c-tint-2);
    justify-self: stretch;
  }
  .hline__card::after { display: none; }
}

.history__pin { margin-top: var(--sp-2); }

/* ---------- 주요공법 ---------- */
.methods__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.methods__head > div:first-child { flex: 1 1 320px; }
.methods__head .scene__lead { margin-top: 8px; }

/* 회사소개서 PDF — 공법별 개별 자료가 아니라 전체를 아우르는 브로슈어 하나를
   언어별로 올려 두고, 언어 이름 자체는 사이트 언어와 무관하게 항상 그
   언어로 표기합니다(위 헤더의 언어 선택 메뉴와 같은 방식). */
.brochure { flex: 0 0 auto; }
.brochure__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.brochure__btn {
  font-size: var(--fs-small); font-weight: 700; color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 999px;
  padding: 8px 16px; background: var(--c-white);
  transition: border-color .2s, color .2s, background .2s;
}
.brochure__btn:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-tint); }

.methods { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.method {
  display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.method:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--c-blue-soft); }
.method__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--ph); overflow: hidden; }
/* 유튜브 hqdefault 썸네일(480×360, 4:3)은 16:9 영상 내용 바깥 위아래에
   검은 레터박스(각 45px, 총 90px = 25%)가 있습니다. object-fit:cover가
   16:10 박스에 맞춰 이미 위아래 16.7%를 잘라내므로(0.75/0.9=0.8333 만
   보임), 남은 검은 부분까지 마저 없애려면 0.8333/0.75 ≈ 1.11배만
   더 확대하면 됩니다 — 그 이상 키우면 실제 영상 장면까지 잘려나갑니다. */
.method__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
/* 유튜브 썸네일 위 재생 버튼 — ::before/::after 로 삼각형을 그려서
   따로 아이콘 파일 없이 만듭니다. */
.method__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(10, 37, 64, .68);
  display: grid; place-items: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.method__play::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--c-white);
}
.method:hover .method__play { background: var(--c-blue); transform: translate(-50%, -50%) scale(1.08); }
.method__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.method__code {
  align-self: flex-start; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  color: var(--c-blue); background: var(--c-tint);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.method__name { font-size: 1.12rem; margin-bottom: 8px; }
.method__summary { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--sp-2); }
.method__points { display: grid; gap: 5px; margin-bottom: var(--sp-3); }
.method__points li {
  font-size: var(--fs-small); color: var(--c-muted);
  padding-left: 16px; position: relative;
}
.method__points li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 1px; background: var(--c-blue-soft); rotate: 45deg;
}
/* ---------- CONTACT ----------
   ⚠️ 흰색 글씨(rgba(255,255,255,…))로 되어 있던 옛 스타일입니다.
   예전 디자인에서는 CONTACT가 짙은 남색 블록 위에 있어서 흰 글씨가 맞았지만,
   지금은 about 장면 전체가 밝은 --paper 배경(.scene--paper)이라 흰 글씨가
   거의 안 보였습니다. 밝은 배경 기준 토큰(--c-ink/--c-muted/--c-line)으로
   다시 썼습니다 — 여기 두 톤(짙은 배경/밝은 배경)을 섞지 마세요. */
.offices { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.office {
  padding: var(--sp-3); border-radius: var(--radius);
  background: var(--c-white); border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.office__tag {
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-blue); font-weight: 700; margin-bottom: 6px;
}
.office__name { font-size: 1rem; margin-bottom: 8px; color: var(--c-ink); }
.office__addr { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: 8px; }
.office__meta { font-size: var(--fs-small); color: var(--c-ink); display: grid; gap: 3px; }
.office__meta a { border-bottom: 1px solid var(--c-line); }
.office__meta a:hover { color: var(--c-blue); border-color: var(--c-blue); }

/* 해외 지사 — 국내 카드 3개를 합친 폭 그대로(.offices 그리드 전체 줄)
   세로로 길게 쌓은 줄들이고, 하나씩 눌러서 폅니다.
   +,− 표시는 위 .acc__group 과 같은 패턴. */
.office-overseas {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
  background: var(--c-white); box-shadow: var(--shadow-sm);
}
.office-overseas__row { border-bottom: 1px solid var(--c-line); }
.office-overseas__row:last-child { border-bottom: 0; }
.office-overseas__row-head {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 20px;
  font-size: .95rem; font-weight: 600; color: var(--c-ink);
  transition: color .2s;
}
.office-overseas__row-head::-webkit-details-marker { display: none; }
.office-overseas__row-head::after {
  content: "+"; flex-shrink: 0;
  font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--c-blue);
}
.office-overseas__row[open] .office-overseas__row-head::after { content: "−"; }
.office-overseas__row-head:hover { color: var(--c-blue); }
.office-overseas__row-body { padding: 0 20px 20px; }
.office-overseas__row-body .office__name { font-size: .95rem; }

/* ---------- 카드 그리드 (뉴스 / 프로젝트) ---------- */
.cards { display: grid; gap: var(--sp-3); }
.cards--news     { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cards--projects { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden; text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 10px;
}
.card__cat { color: var(--c-blue); font-weight: 700; }
.card__title { font-size: 1.08rem; line-height: 1.4; margin-bottom: 8px; }
.card__excerpt {
  font-size: var(--fs-small); color: var(--c-muted); flex: 1;
  /* 3줄까지만 보여주고 나머지는 ... 으로 생략. 전체 글은 상세 페이지(news.html)에서 보여줍니다. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}
.card__foot {
  margin-top: var(--sp-3); font-size: var(--fs-small); font-weight: 700; color: var(--c-blue);
  display: inline-flex; align-items: center; gap: 6px;
}
.card__foot::after { content: "→"; transition: transform .25s var(--ease); }
.card:hover .card__foot::after { transform: translateX(4px); }

/* ---------- 홈 뉴스 섹션 — 가로 캐러셀 ----------
   카드 자체는 기존 디자인(테두리·그림자·둥근 모서리) 그대로 씁니다.
   .news-carousel 은 .scene__inner 밖(.scene 의 직계 자식)에 있어서
   1180px 제한 없이 양쪽 끝까지 꽉 채웁니다(위 index.html 구조 참고).
   카드 줄은 자동으로 계속 오른쪽으로 흐르고(controls.js), 화살표로도
   수동 이동이 됩니다. */
.news__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.news__seeall {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 700; color: var(--c-blue);
}
.news__seeall::after { content: "→"; transition: transform .2s var(--ease); }
.news__seeall:hover::after { transform: translateX(4px); }

.news-carousel {
  position: relative; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 clamp(20px, 4vw, 64px);
}
.news-carousel__arrow {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-ink);
  display: grid; place-items: center; transition: border-color .2s, color .2s;
}
.news-carousel__arrow:hover { border-color: var(--c-blue); color: var(--c-blue); }
.news-carousel__arrow svg { width: 18px; height: 18px; }

.cards--news[data-news-track] {
  display: flex; gap: var(--sp-3); overflow-x: hidden;
  flex: 1 1 auto; min-width: 0; padding: 4px 2px 12px;
}
/* 제목 줄 수가 카드마다 달라 높이가 들쭉날쭉해지지 않도록,
   flex 신축(stretch)에 기대지 않고 카드 높이를 고정하고 제목도 2줄로 자릅니다.
   폭은 고정 px가 아니라 트랙 폭의 1/3로 잡아서, 화면 크기와 무관하게
   한 번에 3장씩 보이도록 합니다(예전엔 300px 고정이라 넓은 화면에서
   4장 이상 보여 한눈에 안 들어온다는 피드백이 있었습니다). */
.cards--news[data-news-track] .card { flex: 0 0 calc((100% - 2 * var(--sp-3)) / 3); height: 300px; }
.cards--news[data-news-track] .card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
@media (max-width: 640px) {
  .cards--news[data-news-track] .card { flex-basis: 260px; height: 280px; }
}

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tag {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--c-tint); color: var(--c-blue-dark);
}

/* ---------- 채용: 공고 아코디언 ---------- */
.jobs { display: grid; gap: 12px; margin-bottom: var(--sp-6); }
.job {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-white); overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.job.is-open { border-color: var(--c-blue-soft); box-shadow: var(--shadow-sm); }

.job__head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); text-align: left;
}
.job__title { font-size: 1.08rem; font-weight: 700; flex: 1; }
.job__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.job__badge {
  font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--c-tint); color: var(--c-blue-dark); white-space: nowrap;
}
.job__badge--due { background: #FFF1E8; color: #B8551C; }
.job__toggle {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--c-line); position: relative;
  transition: transform .3s var(--ease), background .25s, border-color .25s;
}
.job__toggle::before, .job__toggle::after {
  content: ""; position: absolute; inset: 50% 6px auto; height: 1.5px;
  background: var(--c-ink); transform: translateY(-50%);
}
.job__toggle::after { transform: translateY(-50%) rotate(90deg); transition: opacity .25s; }
.job.is-open .job__toggle { transform: rotate(180deg); background: var(--c-blue); border-color: var(--c-blue); }
.job.is-open .job__toggle::before, .job.is-open .job__toggle::after { background: var(--c-white); }
.job.is-open .job__toggle::after { opacity: 0; }

.job__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.job.is-open .job__panel { grid-template-rows: 1fr; }
.job__panel > div { overflow: hidden; }
.job__inner { padding: 0 var(--sp-3) var(--sp-3); border-top: 1px solid var(--c-line-soft); padding-top: var(--sp-3); }
.job__desc { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--sp-3); }
.job__cols { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--sp-3); }
.job__coltitle { font-size: .85rem; font-weight: 800; letter-spacing: .04em; margin-bottom: 8px; }
.job__list { display: grid; gap: 5px; }
.job__list li { font-size: var(--fs-small); color: var(--c-muted); padding-left: 15px; position: relative; }
.job__list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue-soft);
}

/* ---------- 실적 지구본/지도 자리 ----------
   지구본(.globe__stage)은 원 모양 유지하며 더 작게, 지도(.kmap-stage)는
   정사각 대신 좀 더 납작한 비율로 줄여서 왼쪽 프로젝트 목록과 높이
   차이가 덜 나도록 합니다. */
.globe { margin-bottom: var(--sp-5); }
.globe__stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  max-width: 560px; margin: 0 auto;
  cursor: grab; touch-action: pan-y;
}
.globe__stage.is-dragging { cursor: grabbing; }
.globe__stage canvas { display: block; width: 100% !important; height: 100% !important; }
/* WebGL 을 못 쓰는 환경 — 지구본 자리를 접고 아래 숫자·목록만 남깁니다 */
.globe__stage.is-unavailable { display: none; }
.globe__stage.is-unavailable ~ .globe__hint { display: none; }

.globe__pills { position: absolute; inset: 0; pointer-events: none; }
.gpill {
  position: absolute; top: 0; left: 0; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-navy);
  transition: opacity .25s var(--ease);
}
.gpill small { font-weight: 600; color: var(--c-blue); margin-left: 4px; }

.globe__tip {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(14px, -50%);
  padding: 7px 12px; border-radius: var(--radius);
  background: var(--c-navy); color: var(--c-white);
  font-size: var(--fs-xs); line-height: 1.5; box-shadow: var(--shadow);
  display: grid;
}
.globe__tip strong { font-size: .82rem; }
.globe__tip span { color: var(--c-blue-soft); }

.globe__hint {
  text-align: center; margin-top: var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: .02em;
}

/* ---------- 실적 요약 숫자 ---------- */
.globe__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-5);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  padding: var(--sp-3) 0;
}
.globe__stats dt {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 4px;
}
.globe__stats dd {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600; line-height: 1; color: var(--c-navy);
}

/* ---------- 지역별 실적 순위 ---------- */
.regions { display: grid; gap: 10px; }
.regions li {
  display: grid; grid-template-columns: 8.5rem 1fr 3rem; gap: var(--sp-2);
  align-items: center; font-size: var(--fs-small);
}
.regions__name { font-weight: 600; color: var(--c-ink); }
.regions__bar { height: 8px; border-radius: 999px; background: var(--c-tint); overflow: hidden; }
.regions__bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-blue-mid), var(--c-blue));
}
.regions__n { text-align: right; font-weight: 700; color: var(--c-blue); }

@media (max-width: 560px) {
  .regions li { grid-template-columns: 6.5rem 1fr 2.6rem; gap: 10px; font-size: var(--fs-xs); }
  .gpill { font-size: 10px; padding: 3px 8px; }
}

/* ---------- 로딩 / 빈 상태 ----------
   목록이 비었을 때 그냥 글자 한 줄만 있으면 그 영역 자체가 없는 것처럼
   보여서, 카드와 같은 둥근 모서리의 점선 테두리 박스로 "틀"을 줍니다. */
.state {
  grid-column: 1 / -1; padding: var(--sp-6) var(--sp-5); text-align: center;
  color: var(--c-muted); font-size: var(--fs-small);
  border: 1px dashed var(--c-line); border-radius: var(--radius);
  background: var(--c-tint, transparent);
}
.site-error {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200;
  max-width: min(560px, 92vw); padding: 14px 18px; border-radius: var(--radius);
  background: #FEF3F2; border: 1px solid #FDA29B; color: #B42318;
  font-size: var(--fs-small); box-shadow: var(--shadow);
}

/* ---------- 스크롤 등장 애니메이션 ----------
   반드시 `.js-anim` 이 붙어 있을 때만 숨깁니다. (index.html 상단 인라인 스크립트 참고)
   플래그 없이 `.reveal { opacity: 0 }` 로 두면, 자바스크립트가 멈추거나
   탭이 백그라운드에서 로드돼 트랜지션이 진행되지 않을 때
   페이지 전체가 반투명하게(뿌옇게) 굳어 버립니다. 이 줄을 다시 풀지 마세요. */
.js-anim .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }
.js-anim .reveal[data-delay="1"] { transition-delay: .08s; }
.js-anim .reveal[data-delay="2"] { transition-delay: .16s; }
.js-anim .reveal[data-delay="3"] { transition-delay: .24s; }
.js-anim .reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .ceo { grid-template-columns: 1fr; }
  /* 좁은 화면에서는 사진을 위로 올리고 본문이 그 아래로 흐르게 둡니다 */
  .ceo__intro { grid-template-columns: 1fr; }
  .ceo__media { max-width: 220px; }
  .job__head { flex-wrap: wrap; }
}

/* ---------- 지원하기 팝업 ---------- */
.apply-modal {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: var(--sp-3);
}
.apply-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 37, 64, .55); backdrop-filter: blur(4px);
}
.apply-modal__panel {
  position: relative; width: min(420px, 100%);
  background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-4); text-align: center;
  animation: applyModalIn .25s var(--ease);
}
@keyframes applyModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
}
.apply-modal__close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--c-muted);
  transition: background .2s;
}
.apply-modal__close:hover { background: var(--c-tint); }
.apply-modal__eyebrow {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-blue); font-weight: 800; margin-bottom: 6px;
}
.apply-modal__title { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.apply-modal__to {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: var(--fs-small); color: var(--c-muted);
  padding: 10px 14px; background: var(--c-tint); border-radius: var(--radius);
  margin-bottom: var(--sp-2);
}
.apply-modal__to strong { color: var(--c-ink); word-break: break-all; }
.apply-modal__copy {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-blue);
  padding: 3px 10px; border: 1px solid var(--c-blue-soft); border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.apply-modal__copy:hover { background: var(--c-blue); color: var(--c-white); }
.apply-modal__copy.is-copied {
  background: var(--c-blue); color: var(--c-white); border-color: var(--c-blue);
}
.apply-modal__hint { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-3); }
.apply-modal__send { width: 100%; justify-content: center; }
.apply-modal__fallback {
  margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5;
}

/* ---------- 프로젝트 국내/국외 탭 ---------- */
.proj-tabs { display: flex; gap: 8px; margin-bottom: var(--sp-3); }
.proj-tab {
  padding: 8px 20px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-white);
  font-size: .88rem; font-weight: 700; color: var(--c-muted);
  transition: all .2s var(--ease);
}
.proj-tab:hover { border-color: var(--c-blue-soft); color: var(--c-blue); }
.proj-tab.is-on { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }

/* ---------- 한국 지도 ----------
   kmap.js의 viewBox(760×803)와 같은 비율로 맞췄습니다 — 비율이 다르면
   SVG가 안에서 letterbox(레터박스)되면서 위아래나 좌우에 쓸모없는
   흰 여백이 생깁니다. 실제 지도 내용 기준으로 꽉 차게 잘라낸 비율이라
   정사각형은 아니지만, 그만큼 더 크게 키울 수 있습니다. */
.kmap-stage {
  /* 세로 700px 기준, 가로는 같은 비율(760:803)로 자동 계산 → 약 663px */
  position: relative; width: 100%; aspect-ratio: 760 / 803;
  max-width: 663px; margin: 0 auto;
}
.kmap-stage.is-unavailable { display: none; }
.kmap-stage.is-unavailable ~ .globe__hint { display: none; }
/* overflow: hidden 필수 — 최상위 <svg> 는 (중첩 svg와 달리) 기본값이
   overflow:visible 이라, 명시하지 않으면 확대(zoom)했을 때 지도 내용이
   이 상자 밖 옆 영역까지 그대로 삐져나갑니다. */
.kmap-svg { width: 100%; height: 100%; display: block; overflow: hidden; }

.kmap__prov {
  stroke: var(--c-white); stroke-width: 1.5; cursor: pointer;
  transition: opacity .15s var(--ease);
}
.kmap__prov:hover, .kmap__prov:focus-visible { opacity: .82; outline: none; }
.kmap__label {
  font-size: 12px; font-weight: 700; fill: var(--c-navy);
  text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--c-white); stroke-width: 3px;
}

.kmap-tip {
  position: absolute; z-index: 3; pointer-events: none;
  padding: 7px 12px; border-radius: var(--radius);
  background: var(--c-navy); color: var(--c-white);
  font-size: var(--fs-xs); line-height: 1.5; box-shadow: var(--shadow);
  display: grid;
}
.kmap-tip strong { font-size: .82rem; }
.kmap-tip span { color: var(--c-blue-soft); }

/* ---------- 시/도 드릴다운 팝업 ---------- */
.kmap-drill {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: var(--sp-3);
}
.kmap-drill__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 37, 64, .55); backdrop-filter: blur(4px);
}
.kmap-drill__panel {
  position: relative; width: min(1180px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  animation: applyModalIn .25s var(--ease);
}
.kmap-drill__title { font-size: 1.6rem; padding-right: var(--sp-4); }
.kmap-drill__meta { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--sp-3); }
.kmap-drill__body {
  display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: start;
}
/* overflow: hidden 필수 — 위 .kmap-svg 와 같은 이유 (확대 시 옆 영역 침범 방지) */
.kmap-drill__svg { width: 100%; height: auto; aspect-ratio: 640 / 620; overflow: hidden; }
.kmap__dist { stroke: var(--c-white); stroke-width: 1; }
.kmap__dist.has { cursor: default; }
.kmap__dist-label {
  font-size: 10px; font-weight: 700; fill: var(--c-ink);
  text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: 2.5px;
}

@media (max-width: 640px) {
  .kmap-drill__body { grid-template-columns: 1fr; }
}