/* 회사소개(/about) 페이지 — 상세 표준(detail.css) 위에 미션/CEO/오시는길 배치만 추가 */

/* 미션·비전 페어 — 큰 서술 블록 2개 */
.about-mv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.about-mv__item {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
}

.about-mv__item h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: 0 0 var(--space-3);
}

.about-mv__item p {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: pretty;
}

/* CEO 인사말 — 프로필(사진·커리어) + 본문 */
.about-ceo {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-8);
}

@media (max-width: 900px) {
  .about-ceo {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.about-ceo__profile .detail-imgslot {
  margin-bottom: var(--space-6);
}

.about-ceo__name {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.about-ceo__role {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}

.about-ceo__career {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.about-ceo__message p {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-lg);
  line-height: 1.85;
  color: var(--color-text);
  word-break: keep-all;
  text-wrap: pretty;
}

.about-ceo__sign {
  font-weight: 700;
  color: var(--color-primary-deep);
}

/* 오시는 길 — 정보 + 지도 슬롯 */
.about-loc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .about-loc {
    grid-template-columns: 1fr;
  }
}

.about-loc__info {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.about-loc__info div {
  padding: var(--space-4) 0;
}

.about-loc__info div + div {
  border-top: 1px solid var(--color-border);
}

.about-loc__info dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-2);
}

.about-loc__info dd {
  margin: 0;
  line-height: 1.6;
  word-break: keep-all;
}

.about-loc__info a {
  color: var(--color-text);
  font-weight: 600;
}

/* 오시는 길 — 환영 리드 */
.about-loc-lede {
  max-width: 52ch;
  margin: 0 0 var(--space-12);
  line-height: 1.75;
  color: var(--color-text-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

/* 오시는 길 — 서브 블록 타이틀 */
.about-loc-h3 {
  margin: var(--space-16) 0 var(--space-6);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- 맵 스테이지 — 키리스 구글 임베드 + 플로팅 정보 패널 ----------
   지도는 브랜드 톤에 맞춰 그레이스케일로 가라앉혀 두고, 만지려는 의도(hover)에만
   컬러가 깨어난다. 패널은 지도 위에 떠 있는 단 하나의 화이트 스테이지. */
.about-map {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 20px);
  overflow: hidden;
  background: var(--color-surface);
}

.about-map__frame {
  display: block;
  width: 100%;
  /* 임베드 자체의 좌상단 장소 카드(약 100px)를 컨테이너 밖으로 밀어 숨긴다 —
     보이는 높이 = height − 120px. 핀은 뷰포트 중앙보다 60px 위에 온다. */
  height: 640px;
  margin-top: -120px;
  border: 0;
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.5s ease;
}

.about-map:hover .about-map__frame,
.about-map:focus-within .about-map__frame {
  filter: none;
}

.about-map__panel {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: min(384px, calc(100% - var(--space-3) * 2));
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(10, 30, 20, 0.12);
}

.about-map__building {
  margin: 0 0 var(--space-4);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.about-map__info {
  margin: 0 0 var(--space-6);
}

.about-map__info div + div {
  margin-top: var(--space-4);
}

.about-map__info dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-1);
}

.about-map__info dd {
  margin: 0;
  line-height: 1.55;
  word-break: keep-all;
}

.about-map__info a {
  color: var(--color-text);
  font-weight: 600;
}

/* 모바일 — 패널을 지도 아래로 내려 정적 스택 */
@media (max-width: 720px) {
  .about-map__frame {
    height: 420px; /* 보이는 높이 300px */
  }

  .about-map__panel {
    position: static;
    width: auto;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--color-surface);
  }
}

/* 지도 앱 링크 칩 행 — 맵 패널/주차 공용 */
.about-loc__maps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.about-loc__maps .c-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* 서비스 공식 마크 (출처: assets/logos/maps/README.md) — 앱 아이콘 결의 라운딩 */
.about-loc__maps-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  border-radius: 3.5px;
  flex: none;
}

.about-loc__maps-note {
  margin-left: var(--space-1);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* ---------- 방문 동선 — 방문 대상별 헤어라인 컬럼 ---------- */
.about-visit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.about-visit__item {
  border-top: 2px solid var(--color-primary-deep);
  padding-top: var(--space-4);
}

.about-visit__item p {
  margin: 0;
  line-height: 1.65;
  word-break: keep-all;
}

.about-visit__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: 0 0 var(--space-3) !important;
}

@media (max-width: 720px) {
  .about-visit {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---------- 도보 안내 — 스텝 리스트 + 영상 ---------- */
.about-loc--walk {
  align-items: center;
}

.about-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.about-steps li {
  position: relative;
  counter-increment: step;
  padding: var(--space-4) 0 var(--space-4) calc(var(--space-8) + var(--space-2));
  line-height: 1.6;
  word-break: keep-all;
}

.about-steps li + li {
  border-top: 1px solid var(--color-border);
}

.about-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary-deep);
}

.about-video {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0c1712; /* 로딩 중에도 브랜드 다크 스테이지 */
}

.about-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 주차 안내 — 스펙시트형 dl 행 ---------- */
.about-parking {
  margin: 0;
}

.about-parking > div {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--space-6);
  padding: var(--space-6) 0;
}

.about-parking > div + div {
  border-top: 1px solid var(--color-border);
}

.about-parking dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  line-height: 1.8;
}

.about-parking__hint {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-text-muted);
}

.about-parking dd {
  margin: 0;
}

.about-parking dd p {
  margin: 0;
  line-height: 1.65;
  word-break: keep-all;
}

.about-parking dd p + p {
  margin-top: var(--space-2);
}

.about-parking__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.about-parking a {
  color: var(--color-primary-deep);
  font-weight: 600;
}

.about-parking .about-loc__maps {
  margin-top: var(--space-4);
}

@media (max-width: 720px) {
  .about-parking > div {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---------- 연혁 — 연도 행(좌: 연도, 우: 월별 항목) · 다크 챕터 위 ---------- */
.about-years {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: 1px solid rgba(248, 250, 252, 0.18);
}

.about-year {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  /* 간격은 토큰 스케일(1·2·3·4·6·8·12·16·20·24·32)에만 있는 값을 쓴다 — 없는 단계를 쓰면
     var()가 무효가 되어 선언 전체가 initial로 떨어진다(--space-10 → gap: normal, 2026-09-06 수정). */
  gap: var(--space-3) var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(248, 250, 252, 0.18);
}

.about-year__num {
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.about-year.is-now .about-year__num {
  color: var(--color-glow);
}

.about-year__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-year__list li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px dashed rgba(248, 250, 252, 0.14);
}

.about-year__list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.about-year__list li:last-child {
  padding-bottom: 0;
}

.about-year__when {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-glow);
  font-variant-numeric: tabular-nums;
}

.about-year__when--year {
  color: rgba(248, 250, 252, 0.6);
  letter-spacing: 0.04em;
}

.about-year__what {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #ffffff;
  word-break: keep-all;
}

@media (max-width: 640px) {
  /* 1열로 접히면 연도 숫자가 항목 위에 쌓이므로, 연도 사이 구획선이 숨 쉴 세로 여백이
     데스크톱보다 더 중요하다 — 기본값과 같은 --space-6을 유지한다.
     (이전 --space-5는 토큰에 없는 단계라 padding이 0으로 떨어져 구획선이 항목에 붙었다) */
  .about-year {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-6) 0;
  }
}