/* 이 사이트의 색 · 글꼴 · 간격 값이 사는 단 한 곳. HTML 안에는 값을 직접 적지 않는다.
   원본 = docs/company_site_2026-10-10/mockup/company_mark_2026-10-10.html 판 24.
   920px 이하 = 목업의 폰 값. 어두운 화면 = 기기 설정을 따른다(날씨어때 구역은 앱 바탕색 그대로). */

/* 영문 표기용 글꼴(Archivo 라틴 묶음) — 이 사이트 안에 싣는다. 사용 허가 문서 = fonts/OFL.txt */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  /* 회사 영역 — 밝은 바탕 */
  --site-paper: #f3f4f2;
  --site-ink: #15181b;
  --site-muted: #5b646b;
  --site-line: #aeb5ba;
  /* 어두운 화면에서 회사 영역이 바뀔 값 */
  --site-night: #15181b;
  --site-night-ink: #f1f3f1;
  --site-night-muted: #a3acb2;
  --site-night-line: #5a636a;
  /* 날씨어때 구역 = 앱의 확정 색(밝고 어두움과 상관없이 그대로) */
  --app-ground: #dad8e3;
  --app-ink: #131416;
  --app-ink2: #33363d;
  /* 글꼴 */
  --latin: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ko: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  /* 폭 · 간격 */
  --content-width: 1080px;
  --gutter-x: 56px;
  --body-size: 16px;
  /* 맨 위 */
  --top-pad-y: 26px;
  --top-gap: 16px;
  --top-lockup-size: 25px;
  --lang-size: 14px;
  --lang-hit: 8px;
  /* 첫 문장 */
  --hero-pad-top: 72px;
  --hero-pad-bottom: 80px;
  --hero-gap: 22px;
  --say-size: 41px;
  /* eap가 만들어 가는 것 */
  --how-pad-bottom: 76px;
  --how-gap: 26px;
  --label-size: 15px;
  --vow-size: 33px;
  --vow-gap: 4px;
  /* 두 칸 구역 */
  --world-pad-top: 52px;
  --world-pad-bottom: 56px;
  --world-gap: 22px;
  --world-title-size: 38px;
  --world-text-size: 17px;
  --world-body-gap: 28px;
  --world-text-gap: 14px;
  --next-title-size: 27px;
  --next-pad-x: 40px;
  /* 꼬리말 */
  --foot-pad-top: 40px;
  --foot-pad-bottom: 48px;
  --foot-gap: 14px;
  --foot-size: 14px;
  --foot-row-gap-y: 6px;
  --foot-row-gap-x: 18px;
  --foot-lockup-size: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-paper: var(--site-night);
    --site-ink: var(--site-night-ink);
    --site-muted: var(--site-night-muted);
    --site-line: var(--site-night-line);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--site-paper);
  color: var(--site-ink);
  font-family: var(--ko);
  font-size: var(--body-size);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, p, ul { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.site {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* 회사 표기 */
.eap {
  font-family: var(--latin);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--site-ink);
}
.lockup {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  color: var(--site-ink);
  line-height: 1;
}
.lockup .full {
  font-family: var(--latin);
  font-stretch: 108%;
  font-weight: 400;
  font-size: .56em;
  letter-spacing: -.01em;
}
.lockup--foot { font-size: var(--foot-lockup-size); }

/* 맨 위 */
.site-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--top-gap);
  padding: var(--top-pad-y) var(--gutter-x);
}
.site-top .lockup { font-size: var(--top-lockup-size); }
.site-lang {
  font-family: var(--latin);
  font-size: var(--lang-size);
  color: var(--site-muted);
  white-space: nowrap;
}
.site-lang b { color: var(--site-ink); }
/* 보이는 자리는 그대로, 누르는 영역만 넓힌다 */
.site-lang a {
  display: inline-block;
  padding: var(--lang-hit);
  margin: calc(-1 * var(--lang-hit));
}

/* 첫 문장 */
.site-hero {
  padding: var(--hero-pad-top) var(--gutter-x) var(--hero-pad-bottom);
  display: grid;
  gap: var(--hero-gap);
}
.site-say {
  font-size: var(--say-size);
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -.025em;
  max-width: 25em;
  text-wrap: balance;
}
html[lang="en"] .site-say { letter-spacing: -.03em; }

/* eap가 만들어 가는 것 */
.site-how {
  padding: 0 var(--gutter-x) var(--how-pad-bottom);
  display: grid;
  gap: var(--how-gap);
}
.sec-label {
  font-size: var(--label-size);
  font-weight: 700;
  color: var(--site-muted);
}
.how-vow {
  display: grid;
  gap: var(--vow-gap);
  font-size: var(--vow-size);
  line-height: 1.42;
  letter-spacing: -.025em;
  font-weight: 400;
  max-width: 24em;
}
.how-vow b { font-weight: 800; }

/* 두 칸 구역 */
.site-fork { display: grid; grid-template-columns: 7fr 4fr; }
.world {
  padding: var(--world-pad-top) var(--gutter-x) var(--world-pad-bottom);
  display: grid;
  gap: var(--world-gap);
  align-content: start;
  min-width: 0;
}
.world h2 { font-size: var(--world-title-size); line-height: 1.15; letter-spacing: -.02em; }
.world p { font-size: var(--world-text-size); line-height: 1.65; max-width: 25em; }
.world--app { background: var(--app-ground); color: var(--app-ink); }
.world--app .sec-label { color: var(--app-ink2); }
.world--app .world-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--world-body-gap);
  align-items: start;
}
.world--app img { width: 150px; height: 150px; }
.world--app .world-text { display: grid; gap: var(--world-text-gap); }
.world--app p { color: var(--app-ink2); }
.world--next { box-shadow: inset 0 0 0 1.5px var(--site-line); padding-inline: var(--next-pad-x); }
.world--next h2 { font-size: var(--next-title-size); }
.world--next p { color: var(--site-muted); }
.state { font-weight: 700; }

/* 꼬리말 */
.site-foot {
  padding: var(--foot-pad-top) var(--gutter-x) var(--foot-pad-bottom);
  display: grid;
  gap: var(--foot-gap);
  font-size: var(--foot-size);
  color: var(--site-muted);
}
.site-foot .row { display: flex; flex-wrap: wrap; gap: var(--foot-row-gap-y) var(--foot-row-gap-x); align-items: center; }
.site-foot .mail { color: var(--site-ink); font-weight: 700; }

/* 폰 화면 — 목업의 폰(390px) 값. 값은 변수만 바꾸고, 배치만 아래 규칙으로 바꾼다 */
@media (max-width: 920px) {
  :root {
    --gutter-x: 20px;
    --top-pad-y: 18px;
    --top-lockup-size: 21px;
    --hero-pad-top: 40px;
    --hero-pad-bottom: 48px;
    --hero-gap: 16px;
    --say-size: 27px;
    --how-pad-bottom: 48px;
    --how-gap: 20px;
    --vow-size: 22px;
    --vow-gap: 6px;
    --world-pad-top: 36px;
    --world-pad-bottom: 40px;
    --world-gap: 18px;
    --world-title-size: 30px;
    --world-text-size: 16px;
    --world-body-gap: 18px;
    --next-title-size: 23px;
    --foot-pad-top: 30px;
    --foot-pad-bottom: 38px;
  }
  .site-say { line-height: 1.38; }
  .site-fork { grid-template-columns: 1fr; }
  .world { padding: var(--world-pad-top) var(--gutter-x) var(--world-pad-bottom); }
  .world--app .world-body { grid-template-columns: 1fr; }
  .world--app img { width: 112px; height: 112px; }
}