/* 앱 문 바탕. 어두운 테마에서는 늘 어두운 오픈소스 문과 구분되도록 한 단계 밝게 둔다 */
:root { --door-apps-bg: #f3f4f6; }
html[data-resolved-theme="dark"] { --door-apps-bg: #1c2029; }
/* 고대비: 두 문을 모두 검게 두고, 노란 선으로 경계를 나눈다 */
html[data-contrast="high"] { --door-apps-bg: #000000; }
html[data-contrast="high"] .door-apps { box-shadow: inset 0 0 0 2px var(--line-strong); }
html[data-contrast="high"] .door-oss::before { display: none; }

/* 입구 페이지 — 두 개의 문(앱 / 오픈소스). 마우스를 올린 문이 조금 넓어진다. */

.doors {
  display: flex;
  min-height: max(640px, calc(100svh - var(--header-height) - 34px));
}
.door {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  padding: clamp(28px, 4.2vw, 64px);
  overflow: hidden;
  isolation: isolate; /* 장식(캔버스·빛)을 z-index:-1 로 내려도 문 바탕 위에 그려지게 */
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (min-width: 861px) {
  .door:hover, .door:focus-within { flex-grow: 1.22; }
}
/* 내용 칸에는 position을 두지 않는다. 그래야 .door-link::after 의 기준이 문 전체가 된다 */
.door-middle { align-self: center; }
.door-title {
  font-size: clamp(3.5rem, 8.6vw, 8.75rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.06em;
  margin: 0;
}
.door-lead {
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.4;
  margin: 18px 0 0;
  max-width: 20em;
  text-wrap: balance;
}
.door-foot { display: grid; gap: 22px; }
.door-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 문 전체를 누를 수 있게 */
.door-aside { margin: 0; font-size: 0.9375rem; }

/* ---------------------------------------------------------------- 앱 문 */
.door-apps { background: var(--door-apps-bg); color: var(--ink); }
.door-apps .door-lead, .door-apps .door-aside { color: var(--ink-2); }
.door-app-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
}
.door-app-list li { display: grid; gap: 2px; justify-items: start; }
.app-icon {
  width: clamp(84px, 9.6vw, 148px);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 14px 18px rgba(14, 16, 20, 0.18));
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.app-icon-ios { border-radius: 22.5%; }
.door-apps:hover .door-app-list li:nth-child(1) .app-icon { transform: translateY(-6px) rotate(-3deg); }
.door-apps:hover .door-app-list li:nth-child(2) .app-icon { transform: translateY(-10px); }
.door-apps:hover .door-app-list li:nth-child(3) .app-icon { transform: translateY(-6px) rotate(3deg); }
.app-name { font-weight: 750; font-size: 1.0625rem; letter-spacing: -0.02em; line-height: 1.3; }
.app-platform { font-size: 0.875rem; color: var(--ink-3); }
.door-apps .door-foot { grid-template-columns: auto 1fr; align-items: center; }

/* ---------------------------------------------------------------- 오픈소스 문(늘 어두움) */
.door-oss { background: var(--night); color: var(--on-night); }
.door-oss .door-lead { color: var(--on-night-2); }
.door-flock { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.door-oss::before {
  /* 해 질 녘 지평선 빛. 아래쪽만 아주 옅게 데운다 */
  content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 100%, rgba(255, 120, 60, 0.22), rgba(255, 120, 60, 0) 70%);
}
/* 이름표(.roost-tag)의 기준. 네모 위치는 이 상자 기준으로 잰다 */
.roost-figure { margin: 0; position: relative; }
.roost {
  position: relative; /* 네모의 offsetLeft/Top 기준. 들썩임·확대(transform)와 상관없는 제자리를 잴 수 있다 */
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(6px, 0.9vw, 12px);
  max-width: 500px;
}
/* 네모 하나 = 도구 하나(GitHub 저장소 링크). 문 전체를 덮는 링크(z-index 1)보다 위에 둬야 마우스가 닿는다.
   --lift(0~1)는 gateway.js 가 커서와의 거리로 정한다. transform 은 내려앉는 연출이 쓰므로 들썩임은 translate·scale 로 따로 준다 */
.roost a {
  position: relative; z-index: 2;
  display: block;
  aspect-ratio: 1;
  background: var(--c);
  border-radius: 16%;
  translate: 0 calc(var(--lift, 0) * -6px);
  scale: calc(1 + var(--lift, 0) * 0.12);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease-out,
    translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease-out;
}
.door-oss.is-flying .roost a:not(.is-landed) { opacity: 0; transform: scale(0.82); }
.door-oss.is-flying .roost a.is-landed { animation: roost-glow 1.1s ease-out; }
/* 새가 앉는 순간 네모 둘레가 자기 색으로 잠깐 빛났다가 사라진다 */
@keyframes roost-glow {
  from { box-shadow: 0 0 22px 3px var(--c); }
  to { box-shadow: 0 0 0 0 transparent; }
}
/* 마우스를 올린 네모: 커지며 자기 색으로 빛난다. 같은 언어 네모만 밝게 남고 나머지는 물러난다 */
.roost a.is-active {
  z-index: 3;
  translate: 0 -4px; scale: 1.24;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-night) 45%, transparent), 0 0 24px 4px var(--c);
}
.roost.is-focused a:not(.is-same-language) { opacity: 0.22; }

.roost-legend {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 0.875rem; color: var(--on-night-2);
}
/* 범례 언어에 올려도 그 언어 네모만 밝힌다. 문 전체 링크보다 위에 둬야 마우스가 닿는다 */
.roost-legend li { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.25s ease-out; }
.roost-legend.is-focused li:not(.is-active) { opacity: 0.4; }
.roost-legend li.is-active { color: var(--on-night); }
.roost-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); display: inline-block; }
.roost-legend b { color: var(--on-night); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 이름표: 마우스를 올린 네모 위에 뜨는 밝은 쪽지. 자리(left/top)와 꼬리 위치(--tail-x)는 gateway.js 가 정한다 */
.roost-tag {
  position: absolute; left: 0; top: 0; z-index: 4;
  display: grid; gap: 6px;
  width: max-content; max-width: min(19rem, calc(100vw - 48px));
  padding: 12px 14px 13px;
  border-radius: 12px;
  background: var(--on-night); color: var(--night);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  visibility: hidden; opacity: 0; translate: 0 6px;
  transition: opacity 0.16s ease-out, translate 0.16s ease-out, visibility 0s linear 0.16s;
}
.roost-tag.is-shown { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.roost-tag::after {
  content: ""; position: absolute; top: 100%; left: var(--tail-x, 50%);
  width: 14px; height: 8px; translate: -50% 0;
  background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.roost-tag p { margin: 0; }
.roost-tag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.roost-tag-name { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.roost-tag-langs { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 650; white-space: nowrap; color: color-mix(in srgb, var(--night) 68%, var(--on-night)); }
.roost-tag-langs i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.roost-tag-note { font-size: 0.8125rem; line-height: 1.5; color: color-mix(in srgb, var(--night) 80%, var(--on-night)); text-wrap: pretty; }
.roost-tag-hint { font-size: 0.75rem; font-weight: 650; color: color-mix(in srgb, var(--night) 60%, var(--on-night)); }
html[data-contrast="high"] .roost-tag { box-shadow: 0 0 0 2px var(--line-strong); }

/* 움직임 줄이기: 들썩임·확대 없이 빛과 밝기 변화로만 알린다 */
@media (prefers-reduced-motion: reduce) {
  .roost a, .roost a.is-active { translate: none; scale: none; }
  .roost-tag { translate: none; }
}
.door-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.door-sublink {
  position: relative; z-index: 2; color: var(--on-night); font-weight: 650; font-size: 0.9375rem;
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgba(255, 255, 255, 0.35);
}
.door-sublink:hover { text-decoration-color: var(--signal); }
.door-oss :focus-visible { outline-color: #ffffff; }

/* ---------------------------------------------------------------- 만드는 사람 */
.about { padding-block: clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; align-items: start; }
.about-title { font-size: 1rem; font-weight: 750; color: var(--ink-2); margin: 6px 0 0; letter-spacing: -0.01em; }
.about-copy { display: grid; gap: 24px; }
.about-text {
  margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.5; letter-spacing: -0.03em;
  max-width: 30em; text-wrap: pretty;
}
.about-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink-2); }

@media (max-width: 860px) {
  .doors { flex-direction: column; min-height: 0; }
  .door { flex: none; gap: 36px; padding-block: 44px; }
  .door-title { font-size: clamp(3.5rem, 17vw, 5.5rem); }
  .door-app-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .app-icon { width: min(100%, 92px); }
  .app-name { font-size: 0.9375rem; }
  .app-platform { font-size: 0.8125rem; }
  .door-apps .door-foot { grid-template-columns: 1fr; justify-items: start; }
  .about-grid { grid-template-columns: 1fr; }
}

/* 입구에서는 문이 화면 끝까지 차므로 헤더도 문 안쪽 여백에 맞춘다.
   헤더 규칙은 chrome.css 가 #top 아래에 두므로 같은 id 를 붙여야 이긴다. */
.page-gateway #top .header-row { max-width: none; padding-inline: clamp(28px, 4.2vw, 64px); }