@charset "utf-8";

/* ============================================================
   회사소개 › 오시는 길
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:85

   모든 치수는 calc(N * var(--u)). N 은 시안(1920) 원값 그대로다.
   --u 는 /gnb/gnb.css 가 정의한다.

   이 페이지는 히어로가 없다 — 시안 그대로다.
   지도가 곧 이 화면의 그림이라, 위에 큰 사진 띠를 하나 더 얹으면
   정작 봐야 할 지도가 밀리고 화면에 사진이 두 겹으로 쌓인다.
   제목 바로 아래에 지도 두 장이 온다.
     지도    1400 × 635 라운드 35 (마스크가 단순 라운드 사각형이라 border-radius 로 옮겼다)
     카드    350 × 331 코발트, 지도 왼쪽 아래에 걸쳐 놓인다
     정보    지도 오른쪽 아래, 주소 / TEL / FAX
   ============================================================ */

html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  overflow-x: clip;
}

.dir-page {
  --dir-point: #135a9c;    /* 시안 --color */
  --dir-ink:   #222;       /* 시안 --black */

  --grid-w: 1400;          /* 시안 260~1660 */
  --gutter: 40;

  /* 지도는 시안 크기 그대로 둔다. 표지가 아니라 읽어야 할 내용이라
     줄이면 주변 길과 마을 이름이 함께 안 보인다 */
  --map-h: 635;
  --card-w: 350;
  --card-h: 331;
  /* 시안에서 카드 위쪽 91 이 지도와 겹친다 → 아래로 나오는 길이 */
  --card-drop: 240;

  --t-ko: 22;              /* 시안 25 (한글) */
  --t-en: 24;              /* 시안 27 (영문·숫자) */
}

/* ==================== 페이지 머리 ==================== */
.dir-head {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
  /* 시안 270. 헤더(110)가 얹혀 있으므로 실제로 보이는 여백은 그만큼 줄어든다 */
  padding-top: calc(210 * var(--u));
}

.dir-head__eyebrow {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--u));      /* 시안 점 260~280, 글자 297 */
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(32 * var(--u));   /* 시안 40 */
  line-height: 1.2;
  color: var(--dir-ink);
}
/* 시안 Ellipse 40 — 지름 20 의 점 */
.dir-head__eyebrow::before {
  content: "";
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: var(--dir-point);
}

/* 제목은 점이 아니라 눈썹 '글자' 에 맞춰 들여쓴다 (시안 297 / 305) */
.dir-head__title {
  margin: calc(15 * var(--u)) 0 0 calc(37 * var(--u));
  font-weight: 700;
  font-size: calc(52 * var(--u));   /* 시안 65 */
  line-height: 1.3;
  letter-spacing: -.03em;           /* -1.95 / 65 */
  color: var(--dir-ink);
}

/* ==================== 장소 ==================== */
.dir-loc {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
}
.dir-head + .dir-loc { margin-top: calc(130 * var(--u)); }   /* 시안 159 */
.dir-loc + .dir-loc { margin-top: calc(140 * var(--u)); }    /* 시안 151 */
/* 마지막 카드가 푸터에 닿지 않게 (시안 230) */
main { padding-bottom: calc(180 * var(--u)); }

/* ---------- 지도 ---------- */
.dir-map {
  position: relative;
  height: calc(var(--map-h) * var(--u));
  border-radius: calc(35 * var(--u));
  overflow: hidden;
  background: #e9ebef;      /* 이미지가 뜨기 전에도 자리와 색이 남는다 */
}
/* 약도 이미지 (카카오맵 없이 이미지로 확정, 2026-09-19) */
.dir-map__fallback {
  position: absolute;
  inset: 0;
}

.dir-map__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 정적 이미지 위에 주소를 겹쳐 둔다 — 지도가 없어도 정보는 전달돼야 한다 */
.dir-map__note {
  position: absolute;
  right: calc(30 * var(--u));
  bottom: calc(26 * var(--u));
  max-width: calc(560 * var(--u));
  margin: 0;
  padding: calc(14 * var(--u)) calc(22 * var(--u));
  border-radius: calc(100 * var(--u));
  background: rgba(255, 255, 255, .92);
  font-size: max(calc(18 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--dir-ink);
  word-break: keep-all;
}

/* ---------- 지도 아래: 카드와 정보 ---------- */
.dir-loc__body {
  position: relative;
  /* 카드가 지도 밖으로 나온 만큼은 비워 둬야 다음 장소와 겹치지 않는다 */
  min-height: calc(var(--card-drop) * var(--u));
}

/* 시안 2048:137 — 코발트 350 × 331, 지도 왼쪽 아래에 걸친다 */
.dir-card {
  position: absolute;
  left: calc(120 * var(--u));        /* 시안 380 - 컨테이너 260 */
  top: calc(var(--card-drop) * var(--u) - var(--card-h) * var(--u));   /* = -91 */
  display: flex;
  flex-direction: column;
  width: calc(var(--card-w) * var(--u));
  height: calc(var(--card-h) * var(--u));
  padding: calc(48 * var(--u)) calc(30 * var(--u)) calc(51 * var(--u)) calc(48 * var(--u));
  border-radius: calc(30 * var(--u));
  color: var(--color-white);

  /*
    시안은 단색 면이다. 그대로 두면 지도 위에 걸쳐 놓았는데도
    '떠 있는 것' 이 아니라 '붙여 놓은 색종이' 로 보인다. 표면에 세 겹을 더한다.
    색·크기·글자는 시안 그대로 두고 표면 처리만 손댄 것이다.

      1) 그림자 — 지도 위로 91 걸쳐 있으니 떠 있어야 한다.
         코발트 계열로 넣어야 회색 그림자처럼 탁해지지 않는다
         (인증특허 카드가 쓰는 것과 같은 방식이다)
      2) 아주 은은한 그라데이션 — 눈에 띄면 실패다.
         단색이 주는 인쇄물 느낌만 걷어내는 용도다
      3) 가는 구분선 — 아래 .dir-card__label::after
  */
  background: linear-gradient(135deg, #1663ab 0%, #0f4a83 100%);
  box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(19, 90, 156, .28);
}
.dir-card__label {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 300;
  font-size: calc(26 * var(--u));    /* 시안 30 */
  line-height: 1.2;
}
/*
  글자가 좌상·우하로 갈려 가운데가 텅 빈다.
  'Location' 아래에 가는 선을 하나 그으면 위아래가 각자 구역을 갖게 되고,
  빈 가운데가 '허전함' 이 아니라 '여백' 으로 읽힌다.
  인증특허 카드가 항목을 나누는 방식과 같은 어휘다.
  두께는 1px 로 못 박는다 — --u 로 주면 1440 에서 0.75px 이 되어 흐려진다.
*/
.dir-card__label::after {
  content: "";
  display: block;
  width: calc(48 * var(--u));
  height: 1px;
  margin-top: calc(22 * var(--u));
  background: rgba(255, 255, 255, .28);
}
/*
  이름은 카드 오른쪽 아래에 붙는다.
  두 줄짜리('본사 & / 기술연구소')는 왼쪽 맞춤이라, 글자를 오른쪽으로 미는 대신
  덩어리를 오른쪽 끝에 붙이고 그 안에서 왼쪽 맞춤한다 — 시안 좌표와 그대로 맞는다.
*/
.dir-card__name {
  margin: auto 0 0 auto;
  font-weight: 700;
  font-size: calc(30 * var(--u));    /* 시안 35 */
  line-height: calc(42 * var(--u));  /* 시안 50 */
  letter-spacing: -.03em;
  text-align: left;
}

/* ---------- 주소·연락처 ---------- */
.dir-info {
  /* 시안 라벨 x1022 → 컨테이너 기준 762 */
  margin-left: calc(762 * var(--u));
  padding-top: calc(63 * var(--u));   /* 시안 지도 아래 63 */
}

.dir-info__row {
  display: grid;
  grid-template-columns: calc(100 * var(--u)) 1fr;   /* 시안 라벨 1022, 값 1122 */
  align-items: baseline;
}
.dir-info__row + .dir-info__row { margin-top: calc(25 * var(--u)); }   /* 시안 gap 25 */

.dir-info__label {
  margin: 0;
  font-weight: 700;
  font-size: max(calc(var(--t-ko) * var(--u)), 15px);
  letter-spacing: -.03em;
  color: var(--dir-ink);
}
/* 시안은 영문 라벨(TEL·FAX)만 한 단 크다 */
.dir-info__label--en {
  font-family: "Open Sans", var(--font-base);
  font-size: max(calc(var(--t-en) * var(--u)), 15px);
  letter-spacing: 0;
}

.dir-info__value {
  margin: 0;
  font-size: max(calc(var(--t-ko) * var(--u)), 15px);
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}
.dir-info__value--en {
  font-family: "Open Sans", var(--font-base);
  font-size: max(calc(var(--t-en) * var(--u)), 15px);
  letter-spacing: 0;
}
.dir-info__value a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
.dir-info__value a:hover,
.dir-info__value a:focus-visible { color: var(--dir-point); }

/* ---------- 주소 복사 · 길찾기 ----------
   시안에는 없다. 요청받아 더한 것이라 본문 위계를 흔들지 않게 작게 둔다 */
.dir-info__tools {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  flex-wrap: wrap;
  margin-top: calc(14 * var(--u));
}

.dir-copy {
  position: relative;
  padding: calc(8 * var(--u)) calc(18 * var(--u));
  border: 1px solid rgba(17, 20, 24, .16);
  border-radius: calc(100 * var(--u));
  background: transparent;
  font-family: inherit;
  font-size: max(calc(17 * var(--u)), 13px);
  letter-spacing: -.03em;
  color: var(--dir-ink);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.dir-copy:hover,
.dir-copy:focus-visible {
  border-color: var(--dir-point);
  background: var(--dir-point);
  color: var(--color-white);
}

/* 복사한 뒤 잠깐 뜨는 알림 */
.dir-copy__toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  border-radius: calc(100 * var(--u));
  background: var(--dir-ink);
  font-size: max(calc(15 * var(--u)), 12px);
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.dir-copy.is-done .dir-copy__toast {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dir-route {
  font-size: max(calc(17 * var(--u)), 13px);
  letter-spacing: -.03em;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 20, 24, .18);
  transition: color .25s ease, border-color .25s ease;
}
.dir-route:hover,
.dir-route:focus-visible {
  color: var(--dir-point);
  border-color: var(--dir-point);
}

/* ==================== 등장 ====================
   js/reveal.js 가 화면에 들어온 [data-reveal] 에 .is-in 을 붙인다 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/*
  카드만 다르게 등장한다 — 왼쪽에서 오른쪽으로 열린다.
  지도 밑에서 밀려 나오는 것처럼 보여서, 정적인 이 페이지에 순간이 하나 생긴다.
  마스크로 여는 방식은 메인 섹션 제목·인사말 카피와 같은 어휘다.

  ※ inset 을 음수로 여는 이유
    clip-path 는 테두리 상자 바깥, 즉 그림자까지 잘라 낸다.
    끝 상태를 inset(0) 으로 두면 방금 넣은 그림자가 영영 잘린 채로 남는다.
    사방을 90px 넉넉히 열어 두면 그림자가 그대로 보이고, 카드 자체는 잘리지 않는다.
*/
.js .dir-card[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(-90px 100% -90px -90px round calc(30 * var(--u)));
  transition: clip-path .85s cubic-bezier(.22, .61, .36, 1);
}
.js .dir-card[data-reveal].is-in {
  clip-path: inset(-90px round calc(30 * var(--u)));
}
/* 정보는 한 줄씩 0.1 초 간격으로 따라온다 */
.js .dir-info[data-reveal] .dir-info__row,
.js .dir-info[data-reveal] .dir-info__tools {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease-out, transform .55s ease-out;
  transition-delay: calc(.12s + var(--d, 0) * .1s);
}
.js .dir-info[data-reveal].is-in .dir-info__row,
.js .dir-info[data-reveal].is-in .dir-info__tools {
  opacity: 1;
  transform: none;
}

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .dir-page { --gutter: 16; }

  .dir-head { padding-top: calc(150 * var(--u)); }
  .dir-head__eyebrow { font-size: calc(18 * var(--u)); gap: calc(9 * var(--u)); }
  .dir-head__eyebrow::before { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
  .dir-head__title { margin: calc(10 * var(--u)) 0 0; font-size: calc(30 * var(--u)); }

  .dir-head + .dir-loc { margin-top: var(--sp-block); }

  .dir-loc + .dir-loc { margin-top: var(--sp-section); }

  /* 지도는 최소 320px 을 확보한다 — 그보다 낮으면 주변이 안 보여 지도 구실을 못 한다 */
  .dir-map {
    height: max(calc(320 * var(--u)), 320px);
    border-radius: calc(16 * var(--u));
  }
  .dir-map__note {
    left: calc(14 * var(--u));
    right: calc(14 * var(--u));
    bottom: calc(14 * var(--u));
    max-width: none;
    padding: calc(10 * var(--u)) calc(14 * var(--u));
    border-radius: calc(14 * var(--u));
    font-size: max(calc(13 * var(--u)), 12px);
  }

  /* 카드는 겹치지 않고 지도 아래로 내려온다 — 겹치면 좁은 지도를 절반이나 가린다 */
  .dir-loc__body { min-height: 0; }
  .dir-card {
    position: static;
    width: 100%;
    height: auto;
    min-height: calc(120 * var(--u));
    margin-top: calc(16 * var(--u));
    padding: calc(18 * var(--u));
    border-radius: calc(16 * var(--u));
    /*
      데스크톱에서는 카드가 지도 위에 떠 있고 주소는 멀리 오른쪽에 있어서
      그림자를 크게 줘도 닿지 않는다.
      좁은 화면에서는 카드 바로 아래가 주소라, 같은 그림자면 글자에 걸린다.
      아래로 뻗는 길이를 24+50 → 12+26 으로 줄인다.
    */
    box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(19, 90, 156, .26);
  }
  .dir-card__label { font-size: calc(15 * var(--u)); }
  .dir-card__name {
    margin: calc(10 * var(--u)) 0 0;
    font-size: calc(22 * var(--u));
    line-height: 1.3;
  }

  /* 줄인 그림자가 아래로 약 38 뻗는다. 그보다 넉넉히 띄워야 첫 줄에 안 걸린다 */
  .dir-info { margin-left: 0; padding-top: calc(46 * var(--u)); }
  .dir-info__row { grid-template-columns: calc(74 * var(--u)) 1fr; }
  .dir-info__row + .dir-info__row { margin-top: calc(12 * var(--u)); }
  .dir-info__label,
  .dir-info__label--en,
  .dir-info__value,
  .dir-info__value--en { font-size: max(calc(15 * var(--u)), 14px); }
  .dir-info__tools { margin-top: calc(16 * var(--u)); gap: calc(10 * var(--u)); }
  .dir-copy,
  .dir-route { font-size: max(calc(14 * var(--u)), 13px); }
  .dir-copy { padding: calc(8 * var(--u)) calc(14 * var(--u)); }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .dir-info[data-reveal] .dir-info__row,
  .js .dir-info[data-reveal] .dir-info__tools {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* 카드가 열리는 것도 없앤다 (마스크를 지워야 그림자가 남는다) */
  .js .dir-card[data-reveal],
  .js .dir-card[data-reveal].is-in { clip-path: none; }
  .dir-copy,
  .dir-copy__toast,
  .dir-route,
}

/* 모바일: 마지막 블록 → 푸터 간격을 공통 단계(--sp-section, style.css)로 맞춘다.
   데스크톱 값(시안 기준)을 그대로 두면 좁은 화면에서 푸터 위가 비어 보인다 */
@media (max-width: 768px) {
  main { padding-bottom: var(--sp-section); }
}