/* gate.css — 진입 인사.
 *
 * 이 화면이 안 예뻤던 이유는 하나였다. 검은 판 위에 글자만 얹어 두고,
 * 정작 보여 줄 160장은 그 뒤에서 놀고 있었다. 막을 불투명하게 덮을 이유가 없다.
 *
 * 그래서 막은 '유리' 다. 뒤의 띠가 흐릿하게 비치고, 한 업종에 손을 얹으면
 * 그 업종의 작업물이 뒤에서 바뀐다 — "그 업종부터 펼쳐 드릴게요" 를
 * 고르기 전에 이미 보여 주는 셈이다. 고르는 순간 흐림이 풀리면서
 * 초점이 뒤로 넘어간다(포커스 풀). 막이 걷히는 게 아니라 눈이 옮겨 간다.
 */

.gt {
  /* 인사용 바탕체. 고운바탕은 획 끝이 붓처럼 살짝 풀려 있고 속공간이 넓다 —
     같은 문장을 Noto Serif KR 로 쓰면 공고문이 되고 이걸로 쓰면 편지가 된다. */
  --gt-serif: "Gowun Batang", "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
  --gt-c: #36F958;

  position: fixed;
  inset: 0;
  z-index: 900;
  color: var(--rl-ink, #f4f1ea);
  font-family: var(--font-sans);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-font-smoothing: antialiased;

  /* 유리 막. 뒤의 띠가 색과 결로만 남는다. */
  background: rgb(8 9 12 / .74);
  backdrop-filter: blur(26px) saturate(1.18);
  -webkit-backdrop-filter: blur(26px) saturate(1.18);
  transition: opacity .5s ease, backdrop-filter .7s ease, background .7s ease;
}
/* 흐림을 못 쓰는 브라우저에서는 뒤가 그대로 보여 글자가 안 읽힌다 — 덮는다 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .gt { background: rgb(8 9 12 / .965); }
}
html.gt-on, html.gt-on body { overflow: hidden; }

/* 뒤에 비칠 것은 '작업물' 뿐이다. 머리글·눈금자까지 비치면 UI 가 두 겹으로
   겹쳐 어지럽다. 막이 떠 있는 동안 릴의 살림살이는 감춘다. */
html.gt-on .rl__top,
html.gt-on .rl__ruler,
html.gt-on .rl__guide { opacity: 0; transition: opacity .4s ease; }
html.gt-on .rl { cursor: default; }

/* 고른 업종의 색이 장면 전체에 아주 옅게 번진다 */
.gt__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 95% at 10% 106%,
      color-mix(in oklab, var(--gt-c) 17%, transparent), transparent 64%),
    linear-gradient(to right, rgb(6 7 10 / .5), transparent 62%);
  opacity: .55;
  transition: opacity .7s ease, background .7s ease;
}
.gt.is-lit .gt__veil { opacity: 1; }

.gt__in {
  position: relative;
  z-index: 2;
  min-height: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding: 20px clamp(22px, 5vw, 60px) 24px;
  display: flex;
  flex-direction: column;
}

/* ── 머리: 모노 한 줄 ──
   기계 목소리는 여기에만 남긴다. 화면 전체가 모노면 계기판이 된다. */
.gt__bar {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  font-family: var(--rl-mono);
  font-size: 10px;
  letter-spacing: .17em;
  color: color-mix(in oklab, var(--rl-ink) 40%, transparent);
}
.gt__bar b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.gt__bar img {
  width: 22px; height: 22px;
  display: block;
  object-fit: contain;
}

/* ── 두 단 ──
   왼쪽은 목소리, 오른쪽은 색인. 한 줄로 쌓아 두면 서류가 되고,
   갈라 두면 화면에 긴장이 생긴다. */
.gt__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 372px);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
  padding-bottom: 8px;
}
.gt__col {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.9vh, 30px);
  /* 첫 문장이 두 줄로 앉을 만큼은 넓어야 한다. 34em 에서는 뒷줄이
     한 번 더 접혀 3줄이 됐고, 접힌 주장은 주장으로 안 읽힌다.
     읽는 글(.gt__lead)은 제 폭을 따로 갖고 있으니 넓혀도 안 흐트러진다. */
  max-width: 44em;
}

/* ── 첫 문장 ──
   인사가 아니라 주장이다. 그러니 활자도 인사만 한 크기면 안 된다. */
.gt__say { display: grid; gap: 17px; }
.gt__hi {
  margin: 0;
  font-family: var(--gt-serif);
  /* 큰 글자는 굵기를 낮춘다 — 광학 보정. 고운바탕은 400 하나로 충분하다. */
  font-weight: 400;
  font-size: clamp(1.875rem, 1.13rem + 3.1vw, 3.125rem);
  line-height: 1.34;
  /* 한글은 네모틀이라 음수 자간을 세게 주면 글자가 서로 밀어 긴장한다.
     -.022em 이 딱딱함의 절반이었다. 거의 0 으로 둔다. */
  letter-spacing: -.004em;
  /* 두 줄짜리 주장이라 어절이 쪼개지면 힘이 빠진다 */
  word-break: keep-all;
  color: var(--rl-ink);
  text-shadow: 0 2px 30px rgb(0 0 0 / .58);
}
.gt__lead {
  margin: 0;
  max-width: 27em;
  font-size: clamp(.9375rem, .88rem + .24vw, 1.0625rem);
  line-height: 1.9;
  letter-spacing: -.004em;
  word-break: keep-all;
  color: color-mix(in oklab, var(--rl-ink) 70%, transparent);
  text-shadow: 0 1px 16px rgb(0 0 0 / .55);
}
.gt__lead b {
  font-weight: 500;
  color: var(--rl-ink);
}

/* ── 증거 ──
   숫자를 문장 안에 두면 읽고 지나가고, 따로 세워 두면 남는다.
   셋을 나란히 놓아야 '많다' 가 아니라 '갖췄다' 로 읽힌다. */
.gt__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin: 3px 0 0;
  font-size: .8125rem;
  letter-spacing: -.002em;
  color: color-mix(in oklab, var(--rl-ink) 44%, transparent);
}
.gt__proof span { display: inline-flex; align-items: baseline; gap: 4px; }
.gt__proof b {
  font-family: var(--gt-serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: color-mix(in oklab, var(--rl-ink) 88%, transparent);
}
.gt__proof em {
  font-style: normal;
  padding-left: 20px;
  border-left: 1px solid color-mix(in oklab, var(--rl-ink) 18%, transparent);
  color: color-mix(in oklab, var(--rl-ink) 56%, transparent);
}

/* ── 질문 + 자유 입력 ──
   유리 위에서는 상자가 무겁다. 밑줄 하나로 둔다. */
.gt__ask { display: grid; gap: 9px; }
/* 문장이 아니라 라벨이다. 검색창이 무엇을 찾는지만 알려주고 물러난다 —
   지시문을 크게 세우면 오른쪽 열여섯 줄과 같은 말을 두 번 하는 셈이 된다.
   초점이 가면 그 업종 색으로 켜져서, 지금 여기를 쓰고 있다는 것만 표시한다. */
.gt__lab {
  display: block;
  width: fit-content;
  font-family: var(--rl-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: color-mix(in oklab, var(--rl-ink) 42%, transparent);
  cursor: pointer;
  transition: color .3s ease;
}
.gt__ask:focus-within .gt__lab { color: var(--gt-c); }
.gt__find {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 26em;
  height: 46px;
  padding: 0 2px 0 1px;
  border-bottom: 1px solid color-mix(in oklab, var(--rl-ink) 26%, transparent);
  transition: border-color .3s ease;
}
.gt__find::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gt-c);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.2, .8, .25, 1);
}
.gt__find:focus-within::after { transform: scaleX(1); }
.gt__find svg {
  flex: none;
  width: 16px; height: 16px;
  fill: none;
  stroke: color-mix(in oklab, var(--rl-ink) 46%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.gt__find input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--rl-ink);
  font: inherit;
  font-size: 1rem;
  letter-spacing: -.006em;
  outline: none;
}
.gt__find input::placeholder { color: color-mix(in oklab, var(--rl-ink) 36%, transparent); }
.gt__find input::-webkit-search-cancel-button { display: none; }
.gt__hint {
  flex: none;
  font-size: .75rem;
  letter-spacing: -.004em;
  color: color-mix(in oklab, var(--rl-ink) 32%, transparent);
}

/* ── 열여섯 줄 ──
   두 단으로 접었더니 01,09,02,10 순으로 읽혀 색인 구실을 못 했다.
   한 단으로 세우면 그냥 차례가 된다 — 훨씬 조용하고 훨씬 격이 있다. */
.gt__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(18px, 2.2vw, 30px);
  border-left: 1px solid color-mix(in oklab, var(--rl-ink) 13%, transparent);
}
.gt__list li { margin: 0; }

/* 열여섯 줄에 전부 밑줄을 그으면 목록이 아니라 '표' 로 읽힌다.
   장부에서 항목 고르는 기분이 딱딱함의 나머지 절반이었다.
   줄은 지우고 사이 공간으로 가른다. */
.gt__row {
  --c: var(--rl-ink);
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 7px 10px 7px 13px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: color-mix(in oklab, var(--rl-ink) 76%, transparent);
  font: inherit;
  font-size: .9375rem;
  letter-spacing: -.006em;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
/* 왼쪽에 짧은 선 하나가 밀려 나온다 — 상자를 씌우는 것보다 조용하다 */
.gt__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--c);
  transform: translateY(-50%);
  transition: height .26s cubic-bezier(.2, .8, .25, 1);
}
.gt__row i {
  flex: none;
  width: 1.75em;
  font-family: var(--rl-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: color-mix(in oklab, var(--rl-ink) 26%, transparent);
  transition: color .2s ease;
}
.gt__row b {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 업종 코드(FNB)는 방문자에게 아무 뜻이 없는 내부 기호였다.
   '10작품' 이 더 따뜻하고 정보도 많다. 모노도 여기서 뺀다. */
.gt__row em {
  flex: none;
  font-style: normal;
  font-size: .8125rem;
  letter-spacing: -.004em;
  font-variant-numeric: tabular-nums lining-nums;
  color: color-mix(in oklab, var(--rl-ink) 28%, transparent);
  transition: color .2s ease;
}

.gt__row:hover,
.gt__row:focus-visible,
.gt__row.is-on {
  outline: none;
  color: var(--c);
  background: color-mix(in oklab, var(--c) 9%, transparent);
}
.gt__row:hover::before,
.gt__row:focus-visible::before,
.gt__row.is-on::before { height: 64%; }
.gt__row:hover i, .gt__row:focus-visible i, .gt__row.is-on i { color: var(--c); }
.gt__row:hover em, .gt__row:focus-visible em, .gt__row.is-on em {
  color: color-mix(in oklab, var(--c) 70%, transparent);
}

/* 검색에 안 맞는 줄은 지우지 않고 눕힌다 — 자리가 접히면 눈이 다시 헤맨다 */
.gt__row.is-off { opacity: .16; pointer-events: none; }

/* ── 탈출구 ── */
.gt__out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: .875rem;
  line-height: 1.8;
  letter-spacing: -.004em;
  color: color-mix(in oklab, var(--rl-ink) 50%, transparent);
}
.gt__out button {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--rl-ink) 30%, transparent);
  border-radius: 0;
  background: none;
  color: color-mix(in oklab, var(--rl-ink) 82%, transparent);
  font: inherit;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.gt__out a {
  padding: 0 0 3px;
  border-bottom: 1px solid color-mix(in oklab, var(--rl-ink) 30%, transparent);
  color: color-mix(in oklab, var(--rl-ink) 82%, transparent);
  text-decoration: none;
}
.gt__out a:hover, .gt__out a:focus-visible {
  color: var(--rl-ink);
  border-bottom-color: var(--rl-ink);
}
.gt__out button:hover, .gt__out button:focus-visible {
  outline: none;
  color: var(--rl-ink);
  border-bottom-color: var(--rl-ink);
}
.gt__tip {
  margin: 0;
  font-size: .8125rem;
  letter-spacing: -.004em;
  line-height: 1.9;
  color: color-mix(in oklab, var(--rl-ink) 32%, transparent);
}

/* ── 들어올 때 ──
   한 덩어리로 나타나면 인쇄물이고, 순서가 있으면 말이 된다. */
@media (prefers-reduced-motion: no-preference) {
  .gt__bar, .gt__hi, .gt__lead, .gt__proof, .gt__ask, .gt__out, .gt__tip {
    opacity: 0;
    transform: translateY(11px);
    animation: gt-up .78s cubic-bezier(.2, .8, .25, 1) forwards;
  }
  /* 선언 → 권유 → 증거 순으로 도착한다. 읽는 순서가 곧 등장 순서다. */
  .gt__bar   { animation-delay: .06s; }
  .gt__hi    { animation-delay: .14s; }
  .gt__lead  { animation-delay: .28s; }
  .gt__ask   { animation-delay: .34s; }
  .gt__proof { animation-delay: .54s; }
  .gt__out   { animation-delay: .66s; }
  .gt__tip   { animation-delay: .72s; }
  .gt__list { opacity: 0; animation: gt-fade .8s ease .3s forwards; }
  .gt__row {
    opacity: 0;
    animation: gt-up .52s ease forwards;
    animation-delay: calc(.36s + var(--i) * .026s);
  }
}
@keyframes gt-up { to { opacity: 1; transform: none; } }
@keyframes gt-fade { to { opacity: 1; } }

/* ── 고르는 순간 ──
   막이 걷히는 게 아니라 초점이 뒤로 넘어간다. 글자가 물러나고
   흐림이 풀리면서, 이미 그 업종에 서 있는 띠가 눈앞에 선명해진다. */
.gt.is-picked .gt__bar,
.gt.is-picked .gt__say,
.gt.is-picked .gt__proof,
.gt.is-picked .gt__ask,
.gt.is-picked .gt__out,
.gt.is-picked .gt__tip,
.gt.is-picked .gt__list,
.gt.is-picked .gt__row:not(.is-pick) {
  opacity: 0;
  transition: opacity .3s ease;
}
.gt.is-picked .gt__row.is-pick {
  opacity: 1;
  color: var(--c);
}
.gt.is-picked .gt__row.is-pick i,
.gt.is-picked .gt__row.is-pick em { color: var(--c); }
.gt.is-picked .gt__row.is-pick::before { height: 64%; }

/* 고른 줄 아래에서 선 하나가 화면 폭으로 뻗는다 */
.gt__wipe {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--gt-c);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.gt.is-picked .gt__wipe {
  opacity: 1;
  transform: scaleX(1);
  transition: transform .56s cubic-bezier(.65, 0, .35, 1), opacity .1s ease;
}

/* 초점 풀기 — 흐림이 0 으로 가면서 뒤가 살아난다 */
.gt.is-gone {
  opacity: 0;
  pointer-events: none;
  background: rgb(8 9 12 / 0);
  backdrop-filter: blur(0) saturate(1);
  -webkit-backdrop-filter: blur(0) saturate(1);
}

/* ── 좁은 화면 ──
   두 단은 성립하지 않는다. 목소리 먼저, 목록은 그 아래로. */
@media (max-width: 900px) {
  .gt__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    padding-top: 4px;
  }
  .gt__col { max-width: none; gap: 20px; }
  .gt__list {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid color-mix(in oklab, var(--rl-ink) 13%, transparent);
    padding-top: 8px;
  }
  /* 여기서는 이 줄이 손가락으로 누르는 단추다 — 손끝이 닿을 높이를 준다 */
  .gt__row {
    min-height: 46px;
    align-items: center;
    padding: 6px 10px 6px 13px;
  }
  .gt__hint { display: none; }
  .gt__find { max-width: none; }
  .gt__veil { background: radial-gradient(140% 70% at 50% 108%,
      color-mix(in oklab, var(--gt-c) 16%, transparent), transparent 66%); }
}

@media (prefers-reduced-motion: reduce) {
  .gt, .gt__veil, .gt__row, .gt__wipe, .gt__list, .gt__bar,
  .gt__hi, .gt__lead, .gt__proof, .gt__ask, .gt__out, .gt__tip {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}