/* 토큰 — design/tokens.css의 이름을 그대로 쓰고 값만 파스텔 블루 세트로.
   근거: 결정 #18(BI 확정 시 변경 가능)의 첫 발동 = 목업 v2의 파스텔 기본값 #3D6FE0.
   G4: 아래 :root 밖에서 hex를 직접 쓰지 않는다. */
:root {
  --색-바탕: #FFFFFF;
  --색-서피스: #F4F7FC;
  --색-잉크: #191F28;
  --색-잉크-보조: #6B7684;
  --색-선: #E4EAF2;
  --색-액센트: #3D6FE0;
  --색-액센트-깊음: #2B58B8;
  --색-액센트-엷음: rgba(61, 111, 224, .08);
  --색-액센트-위: #FFFFFF;
  --색-반전-바탕: #141A24;
  --색-반전-잉크: #F2F5F9;
  --색-반전-보조: #9AA7B8;
  --색-반전-선: rgba(242, 245, 249, .16);
  --색-바탕-반투명: rgba(255, 255, 255, .88);   /* 상단 바 */
  --색-덮개: rgba(20, 26, 36, .72);             /* 사진 위 라벨 */
  --색-덮개-진함: rgba(20, 26, 36, .78);        /* 「개발 중 화면」 표시 */

  --글꼴: Pretendard Variable, Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --글꼴-숫자: "IBM Plex Mono", ui-monospace, monospace;

  --간격-1: 4px;  --간격-2: 8px;  --간격-3: 12px;
  --간격-4: 16px; --간격-5: 20px; --간격-6: 24px; --간격-8: 32px;
  --간격-12: 48px; --간격-16: 64px; --간격-20: 80px;

  --라운드-카드: 16px;
  --라운드-썸네일: 12px;
  --라운드-필: 999px;
  --그림자-카드: 0 1px 2px rgba(25,31,40,.05), 0 6px 22px rgba(25,31,40,.07);
  --폭: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--색-바탕);
  color: var(--색-잉크);
  font-family: var(--글꼴);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--색-액센트-깊음); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--색-액센트); outline-offset: 3px; border-radius: 4px; }

.감싸개 { width: 100%; max-width: var(--폭); margin: 0 auto; padding: 0 var(--간격-6); }

/* ── 상단 바 ───────────────────────────── */
.상단 {
  position: sticky; top: 0; z-index: 10;
  background: var(--색-바탕-반투명);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--색-선);
}
.상단 .감싸개 { display: flex; align-items: center; gap: var(--간격-4); height: 60px; }
.워드마크 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--색-잉크); }
.워드마크 span { color: var(--색-액센트); }
.상단 nav { margin-left: auto; display: flex; align-items: center; gap: var(--간격-4); font-size: 14px; }
.칩 {
  display: inline-flex; align-items: center; gap: var(--간격-2);
  padding: 5px 11px; border-radius: var(--라운드-필);
  background: var(--색-액센트-엷음); color: var(--색-액센트-깊음);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.상단 nav a.메일 { color: var(--색-잉크-보조); font-weight: 500; }
.상단 nav a.메일:hover { color: var(--색-잉크); }

/* ── 히어로 ───────────────────────────── */
.히어로 { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); }
.히어로 .감싸개 {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.인용 {
  margin: 0 0 var(--간격-6);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.24; font-weight: 800; letter-spacing: -.035em;
}
.인용 i { font-style: normal; color: var(--색-잉크-보조); font-weight: 700; }
.몫 { margin: 0 0 var(--간격-3); font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; }
.설명 { margin: 0 0 var(--간격-6); font-size: 16.5px; color: var(--색-잉크-보조); max-width: 30em; }
.히어로 .수치 {
  display: flex; flex-wrap: wrap; gap: var(--간격-2) var(--간격-5);
  padding-top: var(--간격-5); border-top: 1px solid var(--색-선);
  font-size: 14px; color: var(--색-잉크-보조);
}
.히어로 .수치 b { font-family: var(--글꼴-숫자); font-weight: 500; color: var(--색-잉크); font-size: 14.5px; }

/* 일정 카드 — 실제 생성 출력 */
.일정 {
  background: var(--색-바탕); border: 1px solid var(--색-선);
  border-radius: var(--라운드-카드); box-shadow: var(--그림자-카드);
  padding: var(--간격-5) var(--간격-5) var(--간격-4);
}
.일정 .머리 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--간격-3); padding-bottom: var(--간격-4);
  border-bottom: 1px solid var(--색-선); margin-bottom: var(--간격-2);
}
.일정 .머리 strong { font-size: 15px; font-weight: 700; }
.일정 .머리 span { font-family: var(--글꼴-숫자); font-size: 12.5px; color: var(--색-잉크-보조); }
.칸 { display: grid; grid-template-columns: 52px 1fr; gap: var(--간격-3); padding: var(--간격-3) 0; }
.칸 .시각 { font-family: var(--글꼴-숫자); font-size: 13px; color: var(--색-액센트-깊음); padding-top: 2px; }
.칸 .이름 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.칸 .이름 em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--색-잉크-보조); margin-left: var(--간격-2); }
.칸 .곁 { font-size: 13px; color: var(--색-잉크-보조); margin-top: 1px; }
.이동 {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--간격-3);
  font-size: 12.5px; color: var(--색-잉크-보조);
}
.이동 .줄 { justify-self: center; width: 1px; background: var(--색-선); min-height: 22px; }
.이동 p { margin: 0; padding: var(--간격-1) 0; }
.각주 {
  margin: var(--간격-4) 0 0; padding-top: var(--간격-3);
  border-top: 1px solid var(--색-선);
  font-size: 12.5px; color: var(--색-잉크-보조);
}

/* ── 도시 띠 ───────────────────────────── */
.도시 { padding: var(--간격-8) 0 clamp(48px, 6vw, 80px); }
.도시 .머리 {
  display: flex; align-items: baseline; gap: var(--간격-4);
  flex-wrap: wrap; margin-bottom: var(--간격-4);
}
.도시 h2 { margin: 0; font-size: 17px; font-weight: 700; }
.도시 .머리 p { margin: 0; font-size: 14px; color: var(--색-잉크-보조); }
.띠 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--간격-3); }
.장소 { position: relative; border-radius: var(--라운드-썸네일); overflow: hidden; background: var(--색-서피스); }
.장소 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.장소 figcaption {
  position: absolute; left: var(--간격-2); bottom: var(--간격-2);
  padding: 4px 9px; border-radius: var(--라운드-필);
  background: var(--색-덮개); color: var(--색-반전-잉크);
  font-size: 12px; font-weight: 600; backdrop-filter: blur(4px);
}

/* ── 단계 ───────────────────────────── */
.단계들 { padding: clamp(48px, 6vw, 80px) 0; background: var(--색-서피스); }
.절제목 { margin: 0 0 var(--간격-8); font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.단계 { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.단계 + .단계 { margin-top: clamp(40px, 5vw, 72px); }
.단계 h3 {
  margin: 0 0 var(--간격-3); font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  padding-left: var(--간격-4); border-left: 3px solid var(--색-액센트);
}
.단계 p { margin: 0; padding-left: var(--간격-4); color: var(--색-잉크-보조); font-size: 15.5px; }
.화면 { position: relative; }
.화면 a { display: block; }
.화면 a:hover { text-decoration: none; }
.화면 img {
  width: 100%; border-radius: var(--라운드-썸네일);
  border: 1px solid var(--색-선); box-shadow: var(--그림자-카드);
}
.화면 .표시 {
  position: absolute; top: var(--간격-3); right: var(--간격-3);
  padding: 4px 10px; border-radius: var(--라운드-필);
  background: var(--색-덮개-진함); color: var(--색-반전-잉크);
  font-size: 11.5px; font-weight: 600; letter-spacing: -.01em;
}

/* ── 다른 점 ───────────────────────────── */
.다른점 { padding: clamp(48px, 6vw, 80px) 0; }
.줄행 {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
  padding: var(--간격-8) 0; border-top: 1px solid var(--색-선); align-items: center;
}
.줄행:last-child { border-bottom: 1px solid var(--색-선); }
.줄행 h3 { margin: 0 0 var(--간격-3); font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.줄행 p { margin: 0; color: var(--색-잉크-보조); font-size: 15.5px; }
.증거 { background: var(--색-서피스); border-radius: var(--라운드-카드); padding: var(--간격-6); }
.증거 .큰수 { font-family: var(--글꼴-숫자); font-size: 40px; font-weight: 500; line-height: 1.1; color: var(--색-액센트-깊음); }
.증거 .잔글 { font-size: 13px; color: var(--색-잉크-보조); margin-top: var(--간격-2); }
.표기예 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.표기예 em { font-style: normal; font-weight: 500; font-size: 15px; color: var(--색-잉크-보조); margin-left: var(--간격-2); }
.말풍선 { display: flex; flex-direction: column; gap: var(--간격-2); }
.말풍선 b, .말풍선 i {
  font-style: normal; font-weight: 500; font-size: 14.5px;
  padding: var(--간격-3) var(--간격-4); border-radius: 14px; max-width: 92%;
}
.말풍선 b { align-self: flex-end; background: var(--색-액센트); color: var(--색-액센트-위); border-bottom-right-radius: 4px; }
.말풍선 i { align-self: flex-start; background: var(--색-바탕); border: 1px solid var(--색-선); border-bottom-left-radius: 4px; }

/* ── 회사 ───────────────────────────── */
.회사 { background: var(--색-반전-바탕); color: var(--색-반전-잉크); padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px); }
.회사 h2 { margin: 0 0 var(--간격-5); font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.회사 .요약 { margin: 0 0 var(--간격-8); font-size: 17px; max-width: 34em; color: var(--색-반전-잉크); }
.사실 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 64px); margin: 0; }
.사실 > div { display: grid; grid-template-columns: 116px 1fr; gap: var(--간격-4); padding: var(--간격-4) 0; border-top: 1px solid var(--색-반전-선); }
.사실 dt { color: var(--색-반전-보조); font-size: 14px; font-weight: 600; }
.사실 dd { margin: 0; font-size: 15px; }
.파트너 {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--간격-8);
  border-top: 1px solid var(--색-반전-선);
  display: grid; grid-template-columns: 1fr auto; gap: var(--간격-6); align-items: center;
}
.파트너 h3 { margin: 0 0 var(--간격-2); font-size: 19px; font-weight: 700; }
.파트너 p { margin: 0; color: var(--색-반전-보조); font-size: 15px; max-width: 40em; }
.단추 {
  display: inline-flex; align-items: center; padding: 13px 22px;
  border-radius: var(--라운드-필); background: var(--색-액센트); color: var(--색-액센트-위);
  font-weight: 700; font-size: 15px; white-space: nowrap;
}
.단추:hover { background: var(--색-액센트-깊음); text-decoration: none; }

/* ── 푸터 ───────────────────────────── */
.푸터 { background: var(--색-반전-바탕); color: var(--색-반전-보조); padding: 0 0 var(--간격-12); font-size: 12.5px; }
.푸터 .감싸개 > div { border-top: 1px solid var(--색-반전-선); padding-top: var(--간격-5); display: grid; gap: var(--간격-2); }
.푸터 a { color: var(--색-반전-보조); text-decoration: underline; }
.푸터 a:hover { color: var(--색-반전-잉크); }

/* ── 반응형 ───────────────────────────── */
@media (max-width: 900px) {
  .히어로 .감싸개, .단계, .줄행, .파트너 { grid-template-columns: 1fr; }
  .사실 { grid-template-columns: 1fr; }
  .띠 {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: var(--간격-2);
  }
  .띠 .장소 { flex: 0 0 46%; scroll-snap-align: start; }
  .단계 p, .단계 h3 { padding-left: var(--간격-4); }
}
/* 좁은 폭에서 상단 바가 넘치지 않게 라벨을 짧은 것으로 바꾼다 (영어판이 먼저 넘쳤다) */
.짧 { display: none; }

@media (max-width: 560px) {
  .감싸개 { padding: 0 var(--간격-5); }
  .긴 { display: none; }
  .짧 { display: inline; }
  .상단 .감싸개 { gap: var(--간격-3); }
  .칩 { padding: 5px 9px; }
  .전환 a { padding: 5px 10px; }
  .띠 .장소 { flex: 0 0 66%; }
  .사실 > div { grid-template-columns: 92px 1fr; gap: var(--간격-3); }
  .상단 nav a.메일 { display: none; }   /* 칩(공개 예정)이 더 중요 — 메일은 회사 절·푸터에 있다 */
  .증거 { padding: var(--간격-5); }
}

/* ── 등장 (로드 시 1회) ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  .등장 { opacity: 0; transform: translateY(10px); animation: 떠오름 .5s cubic-bezier(.22,.8,.3,1) forwards; }
  @keyframes 떠오름 { to { opacity: 1; transform: none; } }
}

/* ── 언어 전환 (2026-09-07 신설) ─────────── */
.전환 { display: inline-flex; border: 1px solid var(--색-선); border-radius: var(--라운드-필); overflow: hidden; }
.전환 a {
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--색-잉크-보조); background: var(--색-바탕); white-space: nowrap;
}
.전환 a:hover { text-decoration: none; color: var(--색-잉크); background: var(--색-서피스); }
.전환 a[aria-current="page"] { background: var(--색-액센트); color: var(--색-액센트-위); }

/* ── 공개 예정 (2026-09-07 신설) ─────────── */
.예정 { padding: clamp(48px, 6vw, 80px) 0; background: var(--색-서피스); }
.예정 .줄 {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(16px, 3vw, 40px);
  padding: var(--간격-6) 0; border-top: 1px solid var(--색-선); align-items: baseline;
}
.예정 .줄:last-child { border-bottom: 1px solid var(--색-선); }
.예정 .때 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.예정 .때 span { display: block; font-family: var(--글꼴-숫자); font-size: 12px; font-weight: 400; color: var(--색-잉크-보조); margin-top: 2px; }
.예정 .뭐 { margin: 0; font-size: 15.5px; color: var(--색-잉크-보조); }
.예정 .뭐 b { color: var(--색-잉크); font-weight: 700; }
@media (max-width: 900px) { .예정 .줄 { grid-template-columns: 1fr; gap: var(--간격-2); } }

/* ── 영어 판 (단어 단위 줄바꿈·자간) ─────── */
html[lang="en"] body { word-break: normal; }
html[lang="en"] .인용 { letter-spacing: -.02em; }
html[lang="en"] .설명, html[lang="en"] .단계 p, html[lang="en"] .줄행 p { max-width: 34em; }

/* 320px대 — 로고·공개 예정·언어까지 한 줄에 들어가게 마지막으로 조인다 */
@media (max-width: 400px) {
  .상단 .감싸개 { gap: var(--간격-2); padding: 0 var(--간격-4); }
  .워드마크 { font-size: 18px; }
  .전환 a { padding: 5px 8px; }
}