/* e-yuniverse 사이트 공용 스타일.
   레이아웃: 밝은 바탕에서 읽고, 임팩트 구간(.dark)만 어둡게. 가로 여백 --gut, 본문 폭 --measure.
   값은 S2b 브랜드보드(docs/s2/brandboard.html) 확정값. 그라데이션·그림자·글로우·둥근 카드·알약형 버튼은 쓰지 않는다. */
:root {
  --bg: #F4F5F6; --text: #1C1F24; --sub: #5E6470; --rule: #D9DCE0; --acc: #2F5D46;
  --d-bg: #111214; --d-text: #ECEDEF; --d-sub: #9097A1; --d-rule: #2A2D31; --d-acc: #86B79C;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --disp: "Onest", "Pretendard Variable", sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --pixel: "Pixelify Sans", var(--mono);
  --gut: max(16px, 4vw);
  --head: 56px;
  --measure: 40rem;
  /* 큰 글자 단계: t1 페이지 제목(Work·Reel) > t2 섹션 표제(차별화 포인트·About 소개) > t3 상세 제목 */
  --t1: clamp(48px, 9vw, 120px);
  --t2: clamp(34px, 5.4vw, 72px);
  --t3: clamp(30px, 4.2vw, 56px);
}
.dark { --bg: var(--d-bg); --text: var(--d-text); --sub: var(--d-sub); --rule: var(--d-rule); --acc: var(--d-acc); background: var(--bg); color: var(--text); }

* { box-sizing: border-box; margin: 0; }
html { scroll-padding-top: var(--head); }
body { background: var(--bg); color: var(--text); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; }   /* 한글은 낱말(띄어쓰기) 단위로만 줄을 바꾼다. 칸보다 긴 낱말·주소만 예외로 끊음 */
p, li, dd, blockquote { text-wrap: pretty; }
.ph { display: inline-block; }   /* phrase(): 쉼표로 나뉜 구절 */   /* 문단 끝에 한 낱말만 외따로 남지 않게(지원 브라우저에서) */
a { color: inherit; }
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--sub); }
.wrap { padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 머리말: 위치에 따라 밝음/어두움이 바뀐다(아래가 .dark 구간이면 .dark) ── */
.site-head { position: fixed; z-index: 20; inset: 0 0 auto; height: var(--head); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--gut); background: var(--bg); color: var(--text); border-bottom: 1px solid var(--rule); transition: background-color .2s, color .2s, border-color .2s; }
.mark { font: 700 18px/1 var(--disp); letter-spacing: -.01em; text-decoration: none; }
.site-head nav { display: flex; gap: 28px; }
.site-head nav a { font: 400 12px/1 var(--mono); letter-spacing: .08em; text-decoration: none; color: var(--sub); padding-block: 8px; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: var(--text); }
.site-head nav a[aria-current="page"] { border-bottom: 1px solid currentColor; }
.menu-btn { display: none; font: 400 12px/1 var(--mono); letter-spacing: .08em; min-height: 44px; padding-inline: 4px; }
@media (max-width: 760px) { .site-head nav { display: none; } .menu-btn { display: block; } }
.menu .menu-btn { display: block; }
main { padding-top: var(--head); }

/* ── 전체 화면 메뉴(모바일) ── */
.menu { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; padding: 0 var(--gut) 32px; }
.menu[hidden] { display: none; }
.menu .top { height: var(--head); display: flex; align-items: center; justify-content: space-between; }
.menu ul { list-style: none; padding: 0; margin-top: 8vh; display: grid; gap: 4px; }
.menu ul a { font: 700 clamp(44px, 14vw, 96px)/1.05 var(--disp); letter-spacing: -.02em; text-decoration: none; }
.menu ul a[aria-current="page"] { color: var(--acc); }
.menu .foot { margin-top: auto; }

/* ── 페이지 머리 ── */
.page-head { padding-block: 72px 40px; border-bottom: 1px solid var(--rule); }
.page-head h1 { font: 700 var(--t1)/1 var(--disp); letter-spacing: -.03em; }
.page-head p { margin-top: 16px; max-width: var(--measure); color: var(--sub); }

/* ── 구간 ── */
.section { padding-block: 64px; border-bottom: 1px solid var(--rule); }
.section > .mono:first-child { display: block; margin-bottom: 20px; color: var(--acc); }   /* 구간 이름표는 강조색(Home 포인트 번호 POINT 01과 같은 위계) */
.placeholder { border: 1px dashed var(--rule); padding: 24px; color: var(--sub); }

/* ── 목록 행(Work·Reel·About 타임라인 공용): 연도 | 제목 | 보조 ── */
.rows { list-style: none; padding-block: 0; }   /* 가로 여백은 .wrap이 준다: padding 단축형을 쓰면 여백이 0으로 덮인다 */
.rows li { border-bottom: 1px solid var(--rule); }
.rows .row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 14rem); gap: 8px 24px; align-items: baseline; padding-block: 18px; text-decoration: none; }
.rows .row:hover .t { color: var(--acc); }
.rows .y { font: 400 12px/1.6 var(--mono); color: var(--sub); font-variant-numeric: tabular-nums; }
.rows .t { font-size: 20px; font-weight: 600; line-height: 1.35; }
.rows .t small { display: block; font: 400 11px/1.6 var(--mono); letter-spacing: .04em; color: var(--sub); }
.rows .s { color: var(--sub); font-size: 14px; }
@media (max-width: 640px) { .rows .row { grid-template-columns: 1fr; gap: 2px; } }

/* ── 꼬리말 = Contact ── */
.site-foot { padding-block: 64px 40px; display: grid; gap: 28px; }
.site-foot .mail { font: 700 clamp(22px, 3.4vw, 44px)/1.1 var(--disp);   /* t3(상세 제목)보다 작게 */ letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; }
.site-foot .mail:hover { color: var(--acc); }
.site-foot .meta { display: flex; flex-wrap: wrap; gap: 8px 24px; }