/* ⚠️ 필수 조건 — 정본·상세: pjt-pae/pae-docs/00_필수조건.md (E109). 공통 필수 = product-rules(E107). 키·실데이터 커밋 금지.

   coribeca.com 스타일 — 파일 하나(외부 라이브러리 없음).

   구성: ① 글꼴 ② 디자인 토큰(색·글꼴·간격·크기 — 라이트/다크) ③ 기본 ④ 머리 띠 ⑤ 히어로 ⑥ 구역 공통
         ⑦ 서비스 ⑧ 문의 ⑨ 하단 사업자 정보 ⑩ 404 ⑪ 접근성 보조
   원칙:
   - 색·간격·크기는 ② 의 토큰(CSS 사용자 정의 속성)으로만 쓴다. 아래 규칙에 색 값을 직접 적지 않는다.
   - 색은 CI 두 색뿐: 진한 청록 #0F1F24 · 아이보리 #F9F7F2. 보조 글자색은 두 색 사이 값으로 대비 4.5:1 이상을 맞췄다
     (라이트 #56656A = 5.66:1, 다크 #9AA5A7 = 6.7:1, 본문 15.8:1 — WCAG 2.2 AA).
   - 방향: 명함 앞면(넓은 자간의 Josefin Sans 대문자, 짧은 가로줄, 넓은 여백)을 화면으로 옮긴 '조용한 편집 지면'.
     카드 상자·그림자·그라데이션·둥근 모서리를 쓰지 않고 가는 줄과 여백으로만 나눈다.
   - 크기는 rem 기준이라 브라우저 글자 크기 200% 에서도 함께 커지고, 모든 줄이 감겨 가로 스크롤이 생기지 않는다.
*/

/* ① 글꼴 — Josefin Sans(OFL 1.1, google/fonts 저장소 ofl/josefinsans 커밋 0fd277c 의 가변 TTF, 라이선스: /fonts/OFL-JosefinSans.txt).
   한글 글리프가 없으므로 한글은 운영체제 글꼴로 넘어간다. unicode-range 로 라틴 글자에만 쓰게 해 한글 칸에서 받지 않는다.
   woff2 가 아닌 TTF 인 까닭: 변환 도구(fonttools·brotli)를 새로 설치하지 않기로 해서(README '글꼴'). 118KB, 한 번 받으면 캐시. */
@font-face {
  font-family: "Josefin Sans";
  src: url("/fonts/JosefinSans-wght.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2190-2193, U+2122;
}

/* ② 디자인 토큰 */
:root {
  /* 색 — 라이트(아이보리 바탕) */
  --c-bg: #F9F7F2;          /* CI 아이보리 */
  --c-ink: #0F1F24;         /* CI 진한 청록 — 본문·제목·줄 */
  --c-muted: #56656A;       /* 보조 글자(설명·라벨) — 바탕 대비 5.66:1 */
  --c-rule: #D9D6CE;        /* 구역 사이 가는 줄(장식, 글자 아님) */
  --c-select-bg: var(--c-ink);
  --c-select-ink: var(--c-bg);

  /* 글꼴 */
  --f-ko: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --f-latin: "Josefin Sans", var(--f-ko);

  /* 글자 크기(본문 1rem = 브라우저 기본, 보통 16px) */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-hero: clamp(1.75rem, 1.15rem + 2.9vw, 3.25rem);
  --t-mail: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);

  /* 줄 간격 — 한글 본문 1.7, 큰 제목 1.4 */
  --lh-body: 1.7;
  --lh-tight: 1.4;

  /* 자간 — 명함의 대문자 표지(약 0.3em)를 따름 */
  --track-caps: 0.3em;
  --track-name: 0.18em;

  /* 간격 — 4px(0.25rem) 배수 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --s-hero-top: clamp(4rem, 2rem + 10vw, 10rem);
  --s-gutter: clamp(1.25rem, 0.5rem + 4vw, 4rem);

  /* 크기 */
  --w-page: 72rem;          /* 화면 최대 폭 */
  --w-text: 36em;           /* 한 줄 길이(한글 약 34~38자) */
  --w-label: 13rem;         /* 넓은 화면에서 왼쪽 제목 칸 */
  --logo-w: 8.5rem;         /* 가로형 로고 폭: 136px(글자 100% 기준) — CI 최소 120px 이상 */
  --logo-clear: calc(var(--logo-w) * 0.1);  /* 로고 둘레 여백 = 대문자(C) 높이 ≈ 로고 폭의 1/10 (SVG 실측: 대문자 100 / 전체 폭 1004) */
  --rule-w: 2.5rem;         /* 명함 앞면의 짧은 가로줄 */
  --line: 1px;
  --focus: 2px;
  --tap: 2.75rem;           /* 누르는 칸 최소 높이 44px */

  color-scheme: light dark;
}

/* 다크 — 청록 바탕. 로고는 HTML <picture> 가 흰색판으로 바꾼다(CI: 어두운 바탕 white). */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0F1F24;
    --c-ink: #F9F7F2;
    --c-muted: #9AA5A7;     /* 바탕 대비 6.7:1 */
    --c-rule: #2A3B40;
  }
}

@media (min-width: 48rem) {
  :root { --logo-w: 10rem; }   /* 160px */
}

/* ③ 기본 */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-ko);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  word-break: keep-all;            /* 한글을 어절 단위로 줄바꿈 */
  overflow-wrap: break-word;       /* 긴 영문·주소는 칸을 넘지 않게 끊음 */
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body {
  font-family: var(--f-latin);
  font-size: var(--t-lg);          /* Josefin Sans 는 소문자 높이가 낮아 한 단계 키운다 */
  line-height: 1.6;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--c-select-bg); color: var(--c-select-ink); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--line);
  text-underline-offset: 0.25em;
}
a:hover { text-decoration-thickness: var(--focus); }
:focus-visible {
  outline: var(--focus) solid var(--c-ink);
  outline-offset: var(--s-1);
}

.page {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

/* 대문자 표지(Josefin Sans, 넓은 자간) — 명함 'CEO · CORIBECA' 줄과 같은 결 */
.eyebrow, .kicker, .engine, .langs {
  font-family: var(--f-latin);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

/* ④ 머리 띠 */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-6);
}
.logo {
  display: block;
  /* 로고 둘레 여백(대문자 높이)을 링크 안쪽 여백으로 확보하고, 바깥 음수 여백으로 왼쪽 기준선은 본문과 맞춘다 */
  padding: var(--logo-clear);
  margin: calc(var(--logo-clear) * -1);
  text-decoration: none;
}
.logo img { width: var(--logo-w); }
.langs {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.langs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-2);
  text-decoration: none;
  color: var(--c-muted);
}
.langs a[aria-current="page"] { color: var(--c-ink); text-decoration-line: underline; }
.langs a:hover { color: var(--c-ink); }
.langs .dot { color: var(--c-muted); }

/* ⑤ 히어로 */
.hero {
  padding-block: var(--s-hero-top) var(--s-section);
}
.eyebrow { color: var(--c-muted); }
.eyebrow span { letter-spacing: 0.1em; }
.hero h1, .nf h1 {
  margin-top: var(--s-6);
  max-width: 17em;
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
html[lang="en"] .hero h1 { letter-spacing: 0; max-width: 20em; }
.lead {
  margin-top: var(--s-6);
  max-width: var(--w-text);
  font-size: var(--t-lg);
  color: var(--c-muted);
}
.rule {
  display: block;
  width: var(--rule-w);
  margin-top: var(--s-12);
  border-top: var(--line) solid var(--c-ink);
}

/* ⑥ 구역 공통 — 좁은 화면은 제목 위·본문 아래, 넓은 화면은 왼쪽 제목 칸 + 오른쪽 본문(편집 지면의 두 단) */
.sec {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-section);
  border-top: var(--line) solid var(--c-rule);
}
@media (min-width: 52rem) {
  .sec { grid-template-columns: var(--w-label) minmax(0, 1fr); gap: var(--s-8); }
}
.sec-head { display: flex; flex-direction: column; gap: var(--s-2); }
.kicker { color: var(--c-muted); }
.sec h2 {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: var(--lh-tight);
}
html[lang="en"] .sec h2 {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.prose { max-width: var(--w-text); }
.prose p + p { margin-top: var(--s-4); }
.prose p:first-child { font-size: var(--t-lg); }
.muted { color: var(--c-muted); }
.small { font-size: var(--t-sm); }

/* ⑦ 서비스 — 두 항목. 넓은 화면에서 나란히, 위쪽 짧은 줄로 시작(카드 상자 없음) */
.services {
  display: grid;
  gap: var(--s-12);
}
@media (min-width: 64rem) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
}
.svc {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 30em;
}
.svc::before {
  content: "";
  display: block;
  width: var(--rule-w);
  margin-bottom: var(--s-3);
  border-top: var(--line) solid var(--c-ink);
}
.svc h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-3);
  font-weight: 400;
  line-height: var(--lh-tight);
}
.svc .name {
  font-family: var(--f-latin);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--track-name);
}
.svc .local {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-muted);
}
html[lang="en"] .svc .local { letter-spacing: 0.02em; }
.svc .tagline { font-size: var(--t-lg); }
.svc .engine {
  color: var(--c-muted);
  letter-spacing: 0.24em;   /* 명함 뒷면 문구와 같은 결, 좁은 폭에서 두 줄로 감기게 조금 좁힘 */
}
.svc .notice {
  font-size: var(--t-sm);
  font-weight: 600;
}
.go { margin-top: var(--s-2); }
/* inline-block + 위아래 안쪽 여백으로 누르는 칸 높이를 확보한다(flex 로 두면 글자가 감길 때 화살표가 글자와 떨어져 오른쪽 끝으로 밀림) */
.go a {
  display: inline-block;
  padding-block: var(--s-3);
  font-family: var(--f-latin);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
}
.go .arrow { display: inline-block; margin-inline-start: var(--s-2); text-decoration: none; }
.go a:hover .arrow { transform: translateX(var(--s-1)); }
@media (prefers-reduced-motion: no-preference) {
  .go .arrow { transition: transform 160ms ease-out; }
}

/* ⑧ 문의 */
.mail { margin-top: var(--s-6); }
.mail a {
  font-family: var(--f-latin);
  font-size: var(--t-mail);
  font-weight: 300;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.mail + .muted { margin-top: var(--s-8); }
.prose-p { max-width: var(--w-text); font-size: var(--t-lg); }

/* ⑨ 하단 사업자 정보 */
.foot {
  padding-block: var(--s-12) var(--s-16);
  border-top: var(--line) solid var(--c-rule);
  font-family: var(--f-ko);
  font-size: var(--t-xs);
  line-height: 1.8;
  color: var(--c-muted);
}
html[lang="en"] .foot { font-family: var(--f-latin); font-size: var(--t-sm); }
.brand-line { color: var(--c-ink); font-size: var(--t-sm); }
.biz {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-6);
  row-gap: var(--s-1);
  margin-top: var(--s-4);
}
.biz div { display: flex; flex-wrap: wrap; column-gap: var(--s-2); min-width: 0; }
.biz dt { font-weight: 400; }
.biz dd { color: var(--c-ink); }
.copy { margin-top: var(--s-6); font-family: var(--f-latin); letter-spacing: 0.06em; }

/* ⑩ 404 */
.nf { padding-block: var(--s-hero-top) var(--s-section); }
.nf-en { margin-top: var(--s-12); }
.nf-en h2 {
  font-family: var(--f-latin);
  font-size: var(--t-xl);
  font-weight: 300;
  line-height: var(--lh-tight);
}
.nf-en .lead { margin-top: var(--s-3); }

/* ⑪ 접근성 보조 */
.skip {
  position: absolute;
  left: var(--s-4);
  top: calc(var(--s-16) * -1);
  padding: var(--s-2) var(--s-4);
  background: var(--c-ink);
  color: var(--c-bg);
  z-index: 1;
}
.skip:focus { top: var(--s-4); }
.skip:focus-visible { outline-color: var(--c-bg); outline-offset: calc(var(--focus) * -2); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (forced-colors: active) {
  .rule, .svc::before { border-top-color: CanvasText; }
}