/* 유향 스튜디오 — 공통 토큰과 바탕 (엔딩 크레딧). 페이지별 스타일은 각 HTML 안에 둔다. */
:root {
  --screen: #0c0c0b;          /* 크레딧 화면 */
  --credit: #efeee8;          /* 크레딧 글씨 */
  --role: #8d8c86;            /* 직함·보조 줄 */
  --rule: #2a2a27;            /* 가는 선 */
  --willow: #a9cf6e;          /* 유일한 색: 호버·포커스에만 */

  --f-display: 'Black Han Sans', 'Pretendard Variable', sans-serif;
  --f-latin: 'Archivo', 'Pretendard Variable', sans-serif;
  --f-body: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule) var(--screen); }
body {
  margin: 0;
  background: var(--screen);
  color: var(--credit);
  font: 400 17px/1.7 var(--f-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--willow);
}
::selection { background: var(--credit); color: var(--screen); }
img, svg { display: block; }
a { color: inherit; text-decoration-color: var(--role); text-underline-offset: 0.28em; text-decoration-thickness: 1px; transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out); }
a:hover { color: var(--willow); text-decoration-color: var(--willow); }
:focus-visible { outline: 2px solid var(--willow); outline-offset: 4px; border-radius: 2px; }

/* 직함: 한글은 작고 단정하게, 라틴은 넓은 Archivo 대문자 */
.role { font: 500 13px/1.45 var(--f-body); letter-spacing: 0.02em; color: var(--role); }
.caps { font: 600 12px/1 var(--f-latin); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }

/* 머리: 작은 표식과 건너뛰기 */
.top {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  background: linear-gradient(var(--screen) 40%, rgba(12, 12, 11, 0));
}
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.mark svg { width: 28px; height: 28px; }
.mark span { font: 400 17px/1 var(--f-display); }
.skip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; text-decoration: none; }
.skip svg { width: 14px; height: 14px; }

/* 저작권 줄 */
.copy { margin: 0; color: var(--role); font: 500 12px/1 var(--f-latin); font-stretch: 112%; letter-spacing: 0.02em; }

/* 크레딧 행: 직함 | 값, 가운데 축 */
  .credits { margin: 0; display: grid; gap: 22px; text-align: left; }
  .credits > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: baseline; }
  .credits dt { text-align: right; }
  .credits dd { margin: 0; max-width: 36ch; }
  .credits .wide dd { color: var(--role); }
  .credits .wide dd strong { display: block; color: var(--credit); font-weight: 600; }
  .credits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .credits .path { margin-left: 10px; color: var(--role); font: 500 13px/1 var(--f-latin); }
  .credits .gap { display: block; width: 48px; height: 1px; margin: 18px auto; background: var(--role); opacity: 0.5; }

/* 하단 고정 줄: 법적 정보로 가는 입구 */
body { padding-bottom: 56px; }
.bar {
  position: fixed; inset: auto 0 0; z-index: 10;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 28px;
  padding: 18px var(--gutter) calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(12, 12, 11, 0), var(--screen) 55%);
  font-size: 14px;
}
.bar a { display: inline-flex; align-items: center; min-height: 40px; }

@media (max-width: 560px) {
    .credits > div { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 2px; }
    .credits dt { text-align: center; }
    .credits dd { max-width: none; }
    .credits .path { display: none; }
    .credits .wide { grid-template-columns: 5.5em minmax(0, 1fr); text-align: left; gap: 0 16px; }
    .credits .wide dt { text-align: right; }
}