/* AstrylStudio 웹사이트 — 5페이지 정적 사이트의 전체 스타일.
 * 레이아웃 수치(컨테이너 폭·여백·타입 스케일·전환 시간)는 눈대중이 아니라
 * 계산된 CSS에서 실측해 정한 값이다. 아래 주석의 숫자가 그 근거다. */

/* ── 폰트 ──────────────────────────────────────────────────────────
 * InterVariable(가변 웨이트 100~900)을 직접 동봉한다. 파일이 없으면 아래
 * 폴백 사슬을 타고 윈도우에서는 Segoe UI 가 뜬다 — 그래도 레이아웃은 안 깨진다. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("InterVariable"), local("Inter var"), local("Inter"),
       url("fonts/InterVariable.woff2") format("woff2");
}

:root {
  --font: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol";

  /* 밴드 배경 */
  --ink: #070806;        /* 어두운 본문 밴드 */
  --shell: #111827;      /* 상단바 · 푸터 */
  --paper: #ffffff;
  --paper-2: #f9fafb;    /* 폼 밴드 */

  /* 밝은 배경 위 글자 */
  --text: #111827;
  --text-2: #6b7280;
  --text-3: #4b5563;
  --heading: #1a1a1a;
  --line: #e5e7eb;

  /* 어두운 배경 위 글자 (원본과 다른 부분 — 파일 하단 주석 참고) */
  --d-heading: #f5f5f5;
  --d-text: #9ca3af;
  --d-line: rgba(255, 255, 255, 0.1);
  --d-well: rgba(255, 255, 255, 0.04);

  /* 강조색 — <meta name="theme-color"> 에 선언된 값 */
  --accent: #00847d;
  --accent-hover: #00625d;
  --teal-well: rgba(20, 184, 166, 0.1);
  --teal: #2dd4bf;

  --focus: #3b82f6;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: normal;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent); color: #fff; padding: 12px 20px;
  border-radius: 0 0 6px 0; font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 화면에는 안 보이고 스크린리더에는 읽히는 글. 표 캡션처럼 «보이면 중복이지만
 * 없으면 맥락이 사라지는» 것에 쓴다. display:none 은 읽히지도 않는다. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── 레이아웃 컨테이너 ──────────────────────────────────────────── */
.section { padding-inline: 16px; }
.section-inner { margin-inline: auto; height: 100%; width: 100%; max-width: 1280px; }
@media (min-width: 768px) { .section { padding-inline: 24px; } }

/* ── 상단바 ────────────────────────────────────────────────────── */
.navbar {
  display: flex; align-items: center; width: 100%; z-index: 1000;
  transition: 0.3s;
  position: sticky; top: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: var(--shell);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 64px;
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 100%; gap: 24px; min-height: 64px;
}
.navbar-logo { flex-shrink: 0; }
.navbar-logoLink { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; }
.navbar-logoMark { width: 30px; height: 30px; flex-shrink: 0; }
.navbar-logoText { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.navbar-links {
  display: flex; align-items: center; gap: 32px; flex: 1 1 0%; padding: 0 24px;
}
.navbar-link {
  text-decoration: none; color: rgba(255, 255, 255, 0.9);
  font-size: 15px; font-weight: 500; transition: opacity 0.2s; white-space: nowrap;
}
.navbar-link:hover { color: #fff; opacity: 0.7; }
.navbar-link[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.navbar-actions { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.navbar-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: --btn-r 0.42s ease-in-out, background-color 0.2s, color 0.2s;
  background-color: var(--accent); color: #fff;
}
.navbar-cta:hover { background-color: var(--accent); }

/* 햄버거는 이제 좁은 화면 전용이 아니다. Guide·Patch notes·FAQ 를 막대에 함께
 * 늘어놓으니 일곱 개가 되어 복잡했다 — 그 셋은 여기 들어간다. */
.navbar-toggle {
  display: inline-flex; background: transparent; border: 0; color: #fff;
  padding: 8px; cursor: pointer; border-radius: 6px;
}
.navbar-toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* 넓은 화면: 막대에는 안 보이고, 햄버거를 누르면 오른쪽 아래로 펼쳐진다. */
.navbar-more {
  display: none;
  position: absolute; top: 100%; right: 0;
  flex-direction: column; align-items: stretch;
  min-width: 180px; padding: 8px 16px 12px;
  background: var(--shell);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.navbar-links[data-open="true"] .navbar-more { display: flex; }
.navbar-more .navbar-link { padding: 10px 0; }
.navbar-more .navbar-link + .navbar-link {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* 가로 메뉴가 들어가려면 857px 필요하다 — 좌우 여백 48 + 로고 151 + 간격 24
 * + 링크 507 + 간격 24 + 버튼 103. 로고에 마크를 붙이면서 로고 블록이 40px
 * 넓어졌으므로 흔히 쓰는 768px 전환점으로는 그 사이 구간이 터진다. */
@media (max-width: 899px) {
  .navbar-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--shell); padding: 8px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }
  .navbar-links[data-open="true"] { display: flex; }
  .navbar-link { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .navbar { position: sticky; }
  .navbar .section-inner { position: relative; }
  /* 좁은 화면에서는 하나의 목록이다. display:contents 로 감싼 요소를 배치에서
   * 없애면, 안의 링크 셋이 위 네 개와 같은 세로 목록으로 이어진다 — 링크를
   * 두 벌 적어 두 컨테이너에 나눠 담는 방법을 쓰지 않아도 된다. */
  .navbar-more,
  .navbar-links[data-open="true"] .navbar-more { display: contents; }
}

/* ── 히어로 슬라이더 ───────────────────────────────────────────── */
/* 사진이 첫 화면을 채운다 — 이 제품이 파는 것이 사진이다. 아래에 4,500px 이
 * 더 있으므로 100vh 가 아니라 상단바 높이만 빼서 «사진 + 상단바 = 한 화면» 으로
 * 맞춘다.
 * dvh 를 쓰는 이유는 모바일 주소창이 접힐 때 vh 가 잘못된 값을 주기 때문이다.
 * 아래에 내용이 더 있다는 신호는 높이가 아니라 화살표·점 표시가 낸다. */
.slider {
  position: relative; width: 100%; overflow: hidden;
  height: clamp(420px, calc(100dvh - 97px), 900px); background: var(--ink);
}
.slider-track { position: relative; width: 100%; height: 100%; }
.slider-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease-in-out;
  background: var(--ink);
}
.slider-slide--active { opacity: 1; pointer-events: auto; z-index: 1; }
/* 네 장 모두 대상이 가로 63% 지점에 있고 왼쪽 30% 에는 아무것도 없다(실측).
 * 그래서 잘릴 때 오른쪽을 남긴다 — 50% 로 두면 빈 하늘이 더 들어온다. */
.slider-background {
  position: absolute; inset: 0;
  background-size: cover; background-position: 62% center; background-repeat: no-repeat;
}
/* 평평한 검정 55% 는 글자 뒤와 성운을 똑같이 죽인다. 글자가 놓이는 왼쪽만
 * 짙게 덮고 대상이 있는 오른쪽은 열어 둔다 — 빈 하늘이 «가림막»으로 읽히고
 * 사진은 사진대로 보인다. */
.slider-overlay {
  position: absolute; inset: 0;
  /* 0.90 은 글자를 위해서가 아니라 습관으로 잡힌 값이었다. 글자 밑에서 가장 밝은
   * 픽셀(별 중심, R224 G181 B188) 기준으로 흰 글자 대비를 재면 0.90 에서 17.4:1 —
   * AA 본문 기준 4.5:1 의 네 배다. 그만큼 사진을 눌러 놓고 있었다.
   * 0.40 에서 4.54:1 로, 가장 밝은 지점에서도 기준을 넘긴다. */
  background-image: linear-gradient(
    90deg,
    rgba(4, 8, 17, 0.62) 0%,
    rgba(4, 8, 17, 0.58) 40%,
    rgba(4, 8, 17, 0.22) 72%,
    rgba(4, 8, 17, 0.10) 100%
  );
}
.slider-content {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  gap: 16px; max-width: 800px; padding: 48px 24px; color: #fff; width: 100%;
}
.slider-subheadline {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; }
.slider-headline { font-size: 36px; font-weight: 700; line-height: 1.2; margin: 0; }
.slider-description {
  font-size: 16px; line-height: 1.6; opacity: 0.9; max-width: 600px; margin: 0;
}
.slider-buttons { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

/* 촬영 표기 — 어떤 천체를 어떤 필터로 찍은 것인지. 전부 소유자가 직접 찍은
 * 사진이므로 배경을 «분위기용 남의 사진» 으로 오해하지 않도록 이름을 붙인다. */
/* 색을 물려받지 않고 직접 정한다 — 어두운 사진 위에 놓이는 글자라
 * 상속이 한 번만 어긋나도 검은 글자가 되어 그대로 사라진다 */
.slider-capture {
  margin: 18px 0 0; font-size: 12px; letter-spacing: 1.4px;
  text-transform: uppercase; color: #ffffff;
}
/* 위 두 줄에서 opacity 를 뺐다. 흰색에 opacity 를 곱해 만든 회색은 이 프로젝트가
 * 금지하는 방식이고, 실측에서 부제 1.13:1 · 캡션 1.79:1 로 둘 다 AA 미달이었다.
 * 필터 이름의 그리스 문자는 대문자로 바꾸지 않는다 — Hα 가 HA 로 읽혀 버린다 */
.slider-capture .no-caps { text-transform: none; }
/* ── 버튼의 방사형 채움 ─────────────────────────────────────────────
 * hover 규칙 17개가 전부 색만 갈아 끼우고 있었다. 채움이 «마우스가 들어온
 * 지점»에서 자라면 같은 색 변화가 방향을 갖는다.
 *
 * 두 번째 <span> 을 만들지 않고 background-image 로 하는 이유: 이 버튼들의
 * 라벨은 실행 중에 다시 쓰인다 — 로그인하면 navbar CTA 가 이름으로, 폼은
 * "Sending…" 으로 textContent 를 통째로 갈아 끼운다(site.js 758·285행).
 * 라벨을 span 으로 감싸 두면 그 순간 사라진다. 배경은 글자 뒤에 저절로
 * 깔리므로 라벨을 건드릴 일이 없다.
 *
 * `--btn-r` 만 @property 로 등록한다. 등록된 커스텀 속성만 보간되므로,
 * 원점(--rx/--ry)은 등록하지 않아 즉시 튀고 반지름만 자란다 — 자라는 중에
 * 원점이 같이 움직이면 반쯤 자란 원이 찢어진다. */
@property --btn-r {
  syntax: "<percentage>"; inherits: false; initial-value: 0%;
}
.slider-button, .navbar-cta, .zigzag-button,
.contactForm-submit, .auth-submit { background-repeat: no-repeat; }
.slider-button--primary, .navbar-cta, .contactForm-submit, .auth-submit {
  background-image: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
    var(--accent-hover) 0 var(--btn-r), transparent var(--btn-r));
}
.slider-button--secondary {
  background-image: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
    rgba(255,255,255,0.34) 0 var(--btn-r), transparent var(--btn-r));
}
.zigzag-button {
  background-image: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
    rgba(0,0,0,0.16) 0 var(--btn-r), transparent var(--btn-r));
}
/* 색만 바꾸던 옛 hover 는 방사형 채움과 이중으로 겹친다 — 배경색은 고정하고
 * 채움에만 맡긴다. zigzag 의 들림(-1px)은 남긴다, 그건 방향이 아니라 반응이다. */
.slider-button--primary:hover   { background-color: var(--accent); }
.slider-button--secondary:hover { background-color: rgba(255, 255, 255, 0.2); }
.zigzag-button:hover            { opacity: 1; transform: translateY(-1px); }

.slider-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; font-size: 15px; font-weight: 600;
  text-decoration: none; border-radius: 6px; cursor: pointer; border: none;
  transition: --btn-r 0.42s ease-in-out, background-color 0.2s, color 0.2s;
}
/* 원본과 다름 ①: 원본 주버튼은 #070806 으로 같은 색 배경 위에 놓여 대비 1.00 이었다. */
.slider-button--primary { background-color: var(--accent); color: #fff; }
.slider-button--primary:hover { background-color: var(--accent-hover); }
.slider-button--secondary { background-color: rgba(255, 255, 255, 0.2); color: #fff; }
.slider-button--secondary:hover { background-color: rgba(255, 255, 255, 0.3); }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(255, 255, 255, 0.2); border: none; color: #fff;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.2s;
}
.slider-arrow:hover { background: rgba(255, 255, 255, 0.3); }
.slider-arrow--prev { left: 16px; }
.slider-arrow--next { right: 16px; }
.slider-dots {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 8px;
}
.slider-dot {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
  background: transparent; cursor: pointer; transition: 0.2s; padding: 0;
}
.slider-dot--active { background: #fff; }
.slider-dot:hover { background: rgba(255, 255, 255, 0.5); }

/* 좁은 화면에서는 화살표가 본문 글자 위에 겹친다 — 점 표시로 넘기게 두고 숨긴다 */
@media (max-width: 767px) {
  .slider-arrow { display: none; }
}

@media (min-width: 768px) {
  .slider-headline { font-size: 48px; }
  .slider-description { font-size: 18px; }
  .slider-arrow--prev { left: 24px; }
  .slider-arrow--next { right: 24px; }
}
@media (min-width: 1024px) { .slider-headline { font-size: 56px; } }

/* ── 안내 밴드 ─────────────────────────────────────────────────── */
/* ── 앱 화면 밴드 ────────────────────────────────────────────────────────────
 * 사장님 2026-09-03: «지금 홈페이지로는 그냥 이게 뭐하는거지... 싶다».
 * 맞는 지적이었다 — 이 밴드가 생기기 전 첫 화면은 전면 성운 사진 3장이었고,
 * 앱 창은 두 섹션을 스크롤해야 나오는 데다 그 한 장마저 낡아 있었다(옛 아이콘,
 * AIPPI, 지금 앱에 없는 Invert/Binarize). 히어로 바로 다음에 두는 이유가 그것이다.
 * 어두운 밴드인 이유는 앱이 어두운 UI 라서다 — 흰 배경에 얹으면 스크린샷이
 * 창이 아니라 «구멍» 처럼 보인다. */
.appshot { background: var(--ink); padding-block: 88px; }
.appshot-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.appshot-title {
  font-size: 36px; font-weight: 700; line-height: 1.2; margin: 0 0 14px;
  color: var(--d-heading);
}
.appshot-lede {
  font-size: 17px; line-height: 1.7; color: var(--d-text);
  margin: 0 0 34px; max-width: 720px;
}
.appshot-figure { margin: 0; }
.appshot-figure img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--d-line);
}
.appshot-caption {
  font-size: 13px; line-height: 1.6; color: var(--d-text); margin: 12px 0 0;
}
/* 화면의 어느 부분이 무엇인지. 스크린샷 하나만으로는 «예쁘다» 에서 끝나고
 * «무엇을 하는 프로그램인가» 에 답하지 못한다. */
.appshot-legend {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.appshot-legendItem { border-top: 1px solid var(--d-line); padding-top: 12px; }
.appshot-legendTerm {
  display: block; font-size: 14px; font-weight: 600; color: var(--d-heading);
  margin-bottom: 5px;
}
.appshot-legendBody { font-size: 13px; line-height: 1.6; color: var(--d-text); }
@media (max-width: 640px) {
  .appshot { padding-block: 56px; }
  .appshot-title { font-size: 27px; }
  .appshot-lede { font-size: 16px; }
}

/* ── 세션 단위 도구 카드 (스크립트) ─────────────────────────────────────────
 * 사장님 2026-09-03: «스크립트들하고 프로세스들하고 안나뉘어져있네» + «딱 보면
 * 뭔지 모를것같아». 앱은 폴더/하룻밤 전체에 작동하는 «스크립트» 와 열린 이미지
 * 하나에 작동하는 «프로세스» 를 메뉴에서부터 나눈다(UI_REFERENCE §8). 사이트는
 * 둘을 한 표에 그룹 라벨로만 섞어 뒀다 — 같은 무게라 «이 앱이 무엇을 하는가» 가
 * 안 보였다. 스크립트를 카드로 앞세운다: 그게 곧 앱이 하는 일이다. */
.toolcards { background: var(--paper-2); padding-block: 88px; }
.toolcards-head { max-width: 720px; margin: 0 0 40px; }
.toolcards-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.toolcards-title {
  font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; color: var(--text);
}
.toolcards-lede { font-size: 16px; line-height: 1.7; color: var(--text-3); margin: 0; }
.toolcards-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.toolcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column;
}
.toolcard-name { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.toolcard-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.toolcard-body { font-size: 14px; line-height: 1.7; color: var(--text-3); margin: 0; }
/* 부차 도구는 한 줄짜리라 더 촘촘한 목록으로 */
.toolcards-more {
  list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.toolcards-more li { border-top: 1px solid var(--line); padding-top: 12px; }
.toolcards-more b { display: block; font-size: 14px; color: var(--text); margin-bottom: 3px; }
.toolcards-more span { font-size: 13px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 640px) {
  .toolcards { padding-block: 56px; }
  .toolcards-title { font-size: 26px; }
}

/* ── 테마 스트립 ─────────────────────────────────────────────────────────────
 * 사장님 2026-09-03: «우리 테마 색감 정하는 기능도 좋은데». 앱은 13종 테마를
 * 내장한다 — 같은 창을 네 가지로 찍어 «네 화면은 네가 정한다» 를 보인다. 이미지
 * 자체(그레이스케일 성운)는 모든 테마에서 같고, 바뀌는 것은 chrome 색이다. */
/* ── 프로세스 아코디언 ───────────────────────────────────────────────────────
 * 사장님 2026-09-04: 「접었다 피면서 실제 앱 안에 걸 써보는 느낌」. 프로세스 목록을
 * 접으면 이름만, 펴면 설명 + 실제 앱 패널 스크린샷이 나온다. 네이티브 <details> 라
 * JS 없이도 접고 펴지고 키보드로도 된다. 슬라이더 실시간 조작은 Qt 라 브라우저에서
 * 불가능하므로 «실제 UI 를 펼쳐 보여주는» 것까지가 정직한 선이다. */
.procs { max-width: 920px; margin: 0 auto; }
.procs-group {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 34px 0 6px;
}
.procs-group:first-child { margin-top: 0; }
.proc { border-top: 1px solid var(--line); }
.procs-group + .proc { border-top: 0; }
.proc:last-of-type { border-bottom: 1px solid var(--line); }
.proc-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 15px 4px;
}
.proc-summary::-webkit-details-marker { display: none; }
.proc-summary:hover .proc-name { color: var(--accent); }
.proc-name { font-size: 16px; font-weight: 600; color: var(--text); }
.proc-open { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; flex: none; }
.proc-hasshot { font-weight: 600; color: var(--accent); }
.proc-chevron { transition: transform 0.18s ease; }
.proc[open] .proc-chevron { transform: rotate(90deg); }
.proc[open] .proc-open .proc-openLabel { opacity: 0; }
.proc-body { padding: 2px 4px 22px; }
.proc-desc { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--text-3); max-width: 760px; }
.proc-desc:last-child { margin-bottom: 0; }
.proc-shot { margin: 0; }
.proc-shot img {
  /* 높이를 묶는다. 안 묶으면 세로로 긴 패널(Curves 720x1058 등)이 자기 크기
   * 그대로 펼쳐져 한 행이 화면을 꽉 채우고, 밝은 밴드가 온통 하얗게 보인다
   * (사장님 2026-09-04 «너무 키니깐 화면이 새 하얗게»). 높이 상한 + 폭 자동이면
   * 세로 패널도 한눈에 들어오고, 자세히는 새 탭에서 원본으로 본다. */
  display: block; max-width: 100%; height: auto; max-height: 440px; width: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--ink);
}
.proc-shotcap { font-size: 12px; color: var(--text-2); margin: 9px 0 0; }

/* ── 인터랙티브 스왑 (before/after 토글) ────────────────────────────────────
 * 사장님 2026-09-03: «기능들이 인터랙티브하게 보여주는게 좋은 것 같아 … 버튼을
 * 눌러서 바뀌던가 마우스에 손을대면 바뀌던가». denoise 의 wipe(.compare)는 두
 * 그림이 픽셀로 겹칠 때 쓴다. Data Library 의 두 상태(문제 발견 / 파일링 계획)는
 * 서로 다른 화면이라 겹치지 않으므로 wipe 가 아니라 «전환» 이 맞다 — 호버하면
 * 계획으로 바뀌고, 버튼으로 고정한다. */
.swap { margin: 0; }
.swap-stage {
  position: relative; width: 100%; aspect-ratio: 1734 / 614;
  background: var(--ink); border: 1px solid var(--d-line); border-radius: 12px;
  overflow: hidden; cursor: pointer;
}
.swap-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: top center;
  opacity: 0; transition: opacity 0.28s ease; pointer-events: none;
}
.swap-img.is-active { opacity: 1; }
.swap.is-swapped .swap-hint { opacity: 0; }
.swap-hint {
  transition: opacity 0.28s ease;
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  font-size: 12px; color: var(--d-heading);
  background: rgba(7, 8, 6, 0.72); border: 1px solid var(--d-line);
  border-radius: 999px; padding: 5px 12px; pointer-events: none;
}
.swap-toggle {
  display: inline-flex; margin: 14px auto 0; gap: 0;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.swap-controls { text-align: center; }
.swap-btn {
  appearance: none; border: 0; background: var(--paper); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 9px 18px; transition: background-color 0.16s ease, color 0.16s ease;
}
.swap-btn + .swap-btn { border-left: 1px solid var(--line); }
.swap-btn.is-active { background: var(--accent); color: #fff; }
.swap-btn:hover:not(.is-active) { color: var(--text); }
.swap-caption { font-size: 13px; color: var(--text-2); margin: 14px 0 0; line-height: 1.6; }

.themes { background: var(--ink); padding-block: 88px; }
.themes-head { max-width: 720px; margin: 0 0 36px; }
.themes-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}
.themes-title { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; color: var(--d-heading); }
.themes-lede { font-size: 16px; line-height: 1.7; color: var(--d-text); margin: 0; }
.themes-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.themes-item { margin: 0; }
.themes-item img {
  display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--d-line);
}
.themes-caption { font-size: 13px; color: var(--d-text); margin: 10px 0 0; text-align: center; }

/* ── 테마 스위처 ─────────────────────────────────────────────────────────────
 * 사장님 2026-09-04: 「여러개 다 넣지 말고 앱 크게 하나 + 밑에 동그라미 색버튼,
 * 누르면 바뀌게」. 큰 미리보기 하나를 두고 스와치를 누르면 그 테마로 교차전환한다.
 * 스와치 색은 지어내지 않고 각 테마의 실제 accent 색이다(tokens.PALETTES). */
.themeswitch { max-width: 1040px; margin: 0 auto; }
.themeswitch-stage {
  position: relative; width: 100%; aspect-ratio: 1400 / 880;
  background: var(--ink); border: 1px solid var(--d-line); border-radius: 12px; overflow: hidden;
}
.themeswitch-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.32s ease;
}
.themeswitch-img.is-active { opacity: 1; }
.themeswitch-swatches {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px;
}
.themeswitch-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw-ac); border: 1px solid rgba(255,255,255,0.28);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.themeswitch-dot:hover { transform: scale(1.12); }
.themeswitch-dot.is-active {
  /* 선택 표시는 accent 링이 아니라 흰 테두리 — glow 금지 규칙과 무관하게 또렷하다 */
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff;
}
.themeswitch-name {
  text-align: center; margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--d-heading);
}
.themeswitch-name span { color: var(--d-text); font-weight: 400; }
@media (max-width: 640px) { .themeswitch-dot { width: 26px; height: 26px; } }

@media (max-width: 640px) { .themes { padding-block: 56px; } .themes-title { font-size: 26px; } }

.notice { background: var(--paper); padding-block: 56px; }
.notice-title { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.notice-body { font-size: 16px; line-height: 1.7; color: var(--text-3); margin: 0; max-width: 800px; }

/* ── 기능 그리드 ───────────────────────────────────────────────── */
.features { width: 100%; padding-block: 120px; background: var(--ink); }
.features-header {
  text-align: center; margin: 0 auto 64px; max-width: 800px;
}
.features-title {
  font-size: 2.5rem; font-weight: 700; margin: 0 0 16px; line-height: 1.2;
  color: var(--heading);
}
.features-subtitle { font-size: 1.125rem; color: var(--text-2); margin: 0; line-height: 1.6; }
.features-grid { display: grid; gap: 48px 64px; grid-template-columns: repeat(3, 1fr); }
/* 항목이 4개인 절은 3열에 넣으면 «3 + 외톨이 1» 이 된다 — 2×2 로 짝을 맞춘다.
 * 1024px 이하에서는 기본 규칙이 이미 2열이므로 여기서만 지정하면 된다. */
.features-grid--pairs { grid-template-columns: repeat(2, 1fr); }
/* 아이콘 타일은 뺐다. 둥근 사각형 안에 강조색으로 칠한 얇은 선 아이콘은
 * 생성형으로 만든 랜딩페이지의 가장 흔한 지문이고, Owner 가 화면에서 바로
 * 그 셋을 짚었다 («저것들이 ai티나는 부분»). 자리를 비워 두는 대신 위쪽에
 * 가는 선을 그어 항목의 리듬을 만든다 — 장식이 아니라 조판이다. */
.features-item { display: block; padding-top: 14px; border-top: 1px solid var(--d-line); }
.features-content { min-width: 0; }
/* 아이콘 자리를 비워 두니 «허전» 하다는 판정(Owner). 장식을 도로 넣는 대신
 * 번호를 쓴다 — 사양서·설명서의 방식이고, 칠한 칩과 달리 목록이 몇 개짜리이고
 * 지금 몇 번째인지를 실제로 알려준다. 등폭 숫자라 자릿수가 흔들리지 않는다. */
.features-index {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px; letter-spacing: 1px; color: var(--d-text);
  margin: 0 0 12px; font-variant-numeric: tabular-nums;
}
.features-itemTitle {
  font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; line-height: 1.3;
  color: var(--heading);
}
.features-itemDescription { font-size: 1rem; color: var(--text-2); margin: 0; line-height: 1.7; }

/* 원본과 다름 ②: 이 두 밴드는 밝은 배경용 색(#1a1a1a / #111827)을 그대로 둔 채
 * 어두운 배경에 얹혀 있어서, 제목 8개가 대비 1.13~1.15 로 사실상 안 보였다.
 * 배치는 그대로 두고 글자색만 어두운 배경용으로 바꾼다. */
.features--dark .features-title,
.features--dark .features-itemTitle { color: var(--d-heading); }
.features--dark .features-subtitle,
.features--dark .features-itemDescription { color: var(--d-text); }

@media (max-width: 1024px) {
  .features-grid { gap: 40px 48px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .features { padding: 80px 0; }
  .features-header { margin-bottom: 48px; }
  .features-title { font-size: 2rem; }
  .features-subtitle { font-size: 1rem; }
  .features-grid { gap: 32px; grid-template-columns: 1fr; }
  .features-item { padding-top: 16px; }
  .features-itemTitle { font-size: 1.125rem; }
  .features-itemDescription { font-size: 0.9375rem; }
}

/* ── 지그재그(그림 + 글) ───────────────────────────────────────── */
.zigzag { padding-block: 96px; background: var(--paper); }
.zigzag-row {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
.zigzag-row + .zigzag-row { margin-top: 80px; }
.zigzag-figure { margin: 0; }
.zigzag-figure img { border-radius: 12px; border: 1px solid var(--line); width: 100%; }
/* 릴은 세로(760x1040)라 가로 100%를 주면 옆 글보다 훨씬 커진다 — 높이로 묶고
 * 가운데 정렬한다. display:block 이 없으면 인라인 여백 4px 이 테두리 밑에 남는다. */
.zigzag-figure video {
  display: block; border-radius: 12px; border: 1px solid var(--line);
  max-width: 100%; max-height: 720px; width: auto; margin-inline: auto;
}
.zigzag-figure--reel .zigzag-caption { text-align: center; }
/* 세로 패널 스크린샷(Curves 480x705 같은 것)은 릴과 같은 문제를 갖는다 — 열 폭
 * 100%를 주면 1.27배로 늘어나 흐려지고, 실제 앱에서보다 크게 보인다. 원본 픽셀을
 * 넘기지 않게 묶고 가운데로 놓는다. */
.zigzag-figure--panel img {
  width: auto; max-width: 100%; max-height: 620px; margin-inline: auto;
}
.zigzag-figure--panel .zigzag-caption { text-align: center; }

/* 두 모델을 나란히. 한 행 안에 슬라이더 두 개를 두면 각자 반 칸이 되어 손잡이를
 * 끌 여지가 없어지므로, 이 행만 가로 전체로 펴서(zigzag-row--wide) 둘을 나눈다. */
.compare-pair { margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.compare-pair .zigzag-caption { grid-column: 1 / -1; margin-top: 4px; }
@media (min-width: 768px) {
  .compare-pair { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ── 정리 전/후 ──────────────────────────────────────────────────
 * 창을 찍은 그림은 «기능이 있다» 는 보여주지만 «정리되는 모습» 은 못 보여준다
 * (Owner). 그래서 실제 계획 파일에서 뽑은 경로를 페이지가 직접 그린다 —
 * 그림이 아니라 글자라서 어느 크기에서도 읽히고, 다시 렌더할 일도 없다. */
.filer {
  margin: 8px 0 0; padding: 22px 22px 6px;
  background: var(--ink); border-radius: 12px; border: 1px solid var(--d-line);
}
/* start, not center: the two sides have different numbers of rows, and centring
 * them leaves the "was" label floating half a panel below the "became" one. */
.filer-case { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.filer-case + .filer-case { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--d-line); }
.filer-label {
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--d-text); margin: 0 0 10px;
}
.filer-label code { font-size: 12px; text-transform: none; letter-spacing: 0; }
.filer-tree {
  list-style: none; margin: 0; padding: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.85;
}
.filer-dir { color: var(--d-text); word-break: break-all; }
.filer-leaf {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  color: var(--d-heading); padding-left: 14px;
}
.filer-leaf > span:first-child { word-break: break-all; }
.filer-leaf b { color: var(--teal); font-weight: 600; }
.filer-leaf--more > span:first-child { color: var(--d-text); font-style: italic; }
.filer-count { color: var(--teal); flex: none; font-variant-numeric: tabular-nums; }
.filer-note { font-size: 13px; line-height: 1.6; color: var(--d-text); margin: 10px 0 0; }
.filer-arrow {
  color: var(--teal); display: flex; justify-content: center;
  align-self: center; transform: rotate(90deg);
}
.filer .zigzag-caption { color: var(--d-text); margin-top: 18px; }
.filer code { color: var(--d-heading); }
@media (min-width: 768px) {
  .filer-case { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.15fr); gap: 20px; }
  .filer-arrow { transform: none; }
}

/* ── 비포/애프터 와이프 ──────────────────────────────────────────────
 * 나란히 놓으면 «같은 픽셀» 을 못 본다 — 눈이 두 그림 사이를 오가며 위치를
 * 다시 찾아야 하고, 잡음처럼 미세한 차이는 그 사이에 사라진다. 한 장 위에
 * 다른 한 장을 덮고 경계를 끌면 시선이 한 곳에 머문다.
 *
 * 조작부는 진짜 <input type=range> 다. 키보드 화살표·터치·트랙 클릭 후 드래그가
 * 전부 공짜로 따라오고, 스크립트가 죽어도 --pos 기본값 50% 로 반반은 보인다. */
.compare {
  position: relative; --pos: 50%;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  line-height: 0; touch-action: pan-y;
}
.compare img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.zigzag-figure .compare img { border: 0; border-radius: 0; }
.compare-after {
  position: absolute; inset: 0; width: 100%; height: 100%;
  clip-path: inset(0 0 0 var(--pos));
}
.compare-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  margin-left: -1px; background: rgba(255, 255, 255, 0.85); pointer-events: none;
}
.compare-knob {
  position: absolute; top: 50%; left: var(--pos);
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: var(--accent); border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; color: #fff;
}
.compare-label {
  position: absolute; top: 10px; padding: 4px 8px; line-height: 1.2;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(7, 8, 6, 0.66); color: var(--d-heading);
  border-radius: 2px; pointer-events: none;
}
.compare-label--before { left: 10px; }
.compare-label--after { right: 10px; color: var(--teal); }
.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; appearance: none; -webkit-appearance: none;
  background: transparent;
}
/* 손잡이 크기는 «안 보이니까 아무래도 좋다» 가 아니다 — 브라우저는 트랙 길이를
 * (너비 − 손잡이너비) 로 잡으므로, height:100% 로 정사각형만큼 커진 손잡이가
 * 트랙을 몇 픽셀로 줄여서 조금만 끌어도 끝까지 튀었다 (실측: 폭의 47% 를 끌면
 * 100% 로 포화). 작은 고정 크기로 둔다. */
.compare-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
}
.compare-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; }
.compare-range:focus-visible ~ .compare-knob {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.zigzag-caption { font-size: 13px; color: var(--text-2); margin: 10px 0 0; line-height: 1.6; }
.zigzag-kicker {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent); margin: 0 0 12px;
}
.zigzag-title { font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 0 0 16px; color: var(--heading); }
.zigzag-body { font-size: 1rem; line-height: 1.7; color: var(--text-3); margin: 0 0 12px; }
.zigzag-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; font-size: 15px; font-weight: 600; text-decoration: none;
  border-radius: 8px;
  transition: --btn-r 0.42s ease-in-out, opacity 0.2s, transform 0.2s;
  width: fit-content; margin-top: 8px;
  background: var(--accent); color: #fff;
}
.zigzag-button:hover { opacity: 0.9; transform: translateY(-1px); }
@media (min-width: 768px) {
  .zigzag-row { grid-template-columns: 1fr 1fr; gap: 64px; }
  .zigzag-row--flip .zigzag-figure { order: 2; }
  /* 화면 캡처는 가로로 길다 — 반 칸(576px)에 넣으면 13px 글자가 4px 이 되어
   * 읽히지 않는다. 이 행만 한 칸으로 펴서 그림이 컨테이너 폭을 다 쓰게 한다. */
  .zigzag-row--wide { grid-template-columns: 1fr; gap: 28px; }
  .zigzag-row--wide .zigzag-body { max-width: 62ch; }
}

/* ── 실제 산출 파일을 그대로 보여주는 표 ────────────────────────
 * 「디스크에 남는다」는 주장은 파일을 보여주면 끝난다. 등폭·우측정렬 숫자에
 * 가로 스크롤 — 좁은 화면에서 열을 접거나 줄이지 않는다. 접는 순간 그게
 * «파일» 이 아니라 «요약» 이 되기 때문이다. */
.datatable-wrap {
  background: var(--ink); border: 1px solid var(--d-line); border-radius: 12px;
  padding: 18px 18px 8px; overflow-x: auto;
}
.datatable { border-collapse: collapse; width: 100%; min-width: 620px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; }
.datatable th, .datatable td { padding: 6px 12px 6px 0; white-space: nowrap; }
.datatable thead th {
  text-align: left; color: var(--d-text); font-weight: 600;
  border-bottom: 1px solid var(--d-line); letter-spacing: 0.4px;
}
.datatable tbody td { color: var(--d-heading); border-bottom: 1px solid rgba(255,255,255,0.05); }
.datatable tbody tr:last-child td { border-bottom: 0; }
.datatable .num { text-align: right; font-variant-numeric: tabular-nums; }
.datatable .dim { color: var(--d-text); }
.datatable-note { font-size: 13px; color: var(--text-2); margin: 10px 0 0; line-height: 1.6; }

/* ── 사양표 ────────────────────────────────────────────────────── */
.spec { padding-block: 96px; background: var(--paper-2); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table caption {
  text-align: left; font-size: 2rem; font-weight: 700; color: var(--heading);
  margin-bottom: 24px; line-height: 1.2;
}
.spec-table th, .spec-table td {
  text-align: left; padding: 16px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
/* 라벨 열 폭은 내용에서 나온다. 34% 는 1280px 에서 413px 이 되는데, 사이트
 * 전체 6개 표 64행에서 가장 긴 라벨이 226px('Generalised Hyperbolic Stretch')
 * 이라 중앙값 301~353px 이 빈 채로 남았다 — 열의 73~85%. 표 레이아웃이 auto
 * 이므로 width 는 권고값이고, 더 필요하면 브라우저가 더 준다. */
.spec-table th {
  width: 22%; min-width: 128px; font-weight: 600; color: var(--text);
}
.spec-table td { color: var(--text-3); line-height: 1.7; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* 사양표 안의 구간 제목. 표를 여러 개로 쪼개면 각 표가 제 폭을 따로 잡아
 * 열이 어긋난다 — 한 표 안에서 줄로 구분한다. */
.spec-table .spec-group th {
  padding-top: 30px; padding-bottom: 6px; border-bottom: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent);
}
.spec-table tbody tr:first-child .spec-groupLabel { padding-top: 0; }
.spec-table td code { font-size: 0.92em; }

/* 64행 짜리 표에 hover 규칙이 하나도 없었다. 읽던 줄을 놓치는 표는 딱딱하기
 * 전에 읽기 어렵다. 배경은 강조색을 아주 옅게 깔고, 이름 열에 세로 획을 붙여
 * «지금 이 줄» 을 왼쪽 가장자리에서 잡아 준다. */
.spec-table tbody tr:not(.spec-group) { transition: background-color 0.16s ease; }
.spec-table tbody tr:not(.spec-group):hover { background-color: rgba(0, 132, 125, 0.045); }
.spec-table tbody tr:not(.spec-group) th {
  box-shadow: inset 2px 0 0 transparent; transition: box-shadow 0.16s ease, color 0.16s ease;
  padding-left: 10px;
}
.spec-table tbody tr:not(.spec-group):hover th {
  box-shadow: inset 2px 0 0 var(--accent); color: var(--accent);
}

/* 좁은 화면에서는 두 열을 위아래로 쌓는다. 라벨 열이 34% 로 고정돼 있어서,
 * 375px 에서 표의 최소 너비가 컨테이너를 44px 넘겼고 페이지 전체가 가로로
 * 밀렸다(문서 폭 387 vs 뷰포트 359). 가로 스크롤 상자에 넣지 않은 이유는
 * 이 표가 파일 목록이 아니라 산문이라서다 — .datatable 은 열을 접으면 «파일»
 * 이 아니게 되지만, 이 표는 접어도 「이름과 설명」 그대로다.
 * 쌓은 뒤에는 th 의 아래선을 지운다. 안 그러면 이름과 제 설명 사이에 선이
 * 그어져 둘이 다른 항목처럼 보인다. */
@media (max-width: 560px) {
  .spec-table th, .spec-table td { display: block; width: auto; padding: 0; }
  .spec-table th { padding-top: 16px; border-bottom: 0; }
  .spec-table td { padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
  .spec-table tr:last-child td { border-bottom: 0; }
  .spec-table .spec-group th { padding-top: 30px; padding-bottom: 6px; }
}

/* ── 갤러리 (코버플로우) ────────────────────────────────────────
 * 사이트에 처리 결과를 모아 둔 데가 없었다. 천체사진 제품에서 가장 설득력 있는
 * 건 결과물이고, 홍보 1단계도 「우리 소프트웨어로 처리한 사진」이다.
 *
 * 카드가 3D 로 물러나는 코버플로우다. preserve-3d 안에서는 그리는 순서가
 * z-index 가 아니라 3D 위치를 따르므로, 가운데 카드를 translateZ 0 에 두고
 * 이웃을 뒤로 밀면 겹침 관리 코드가 필요 없다.
 *
 * 캡션은 사이트가 히어로에서 이미 쓰는 slider-capture 문자열 그대로다.
 * 이미지도 히어로가 쓰는 것과 같은 파일이라, 홈에서 새로 받는 건 M27 하나뿐이다. */
.gallery { background: var(--ink); padding-block: 88px; overflow: hidden; }
.gallery-header { text-align: center; margin-bottom: 40px; }
.gallery-title {
  font-size: 36px; font-weight: 700; margin: 0 0 14px; line-height: 1.2;
  color: var(--d-heading);
}
.gallery-subtitle {
  font-size: 18px; line-height: 1.6; max-width: 620px; margin: 0 auto;
  color: var(--d-text);
}
.gallery-stage {
  position: relative; height: 460px; display: flex;
  align-items: center; justify-content: center;
  perspective: 1600px; outline: none;
}
.gallery-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.gallery-track {
  position: relative; width: 0; height: 420px; transform-style: preserve-3d;
}
/* 카드 폭은 «그 사진» 이 정한다. 넷의 비율이 1.193~1.538 로 다르므로 폭을 하나로
 * 묶으면 어느 쪽이든 잘리거나 띠가 생긴다. 높이만 맞추고 폭은 사진에서 받는다. */
.gallery-card {
  position: absolute; left: 50%; top: 50%; margin: 0;
  height: 420px; border-radius: 4px; overflow: hidden;
  background: #101010; transform-style: preserve-3d; transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 사진을 자르지 않는다. 카드가 사진 비율(1.777)이라 잘릴 게 없고,
 * contain 이라 다른 비율이 들어와도 전체가 보인다 — 남는 자리는 여백이지
 * 잘린 게 아니다. */
.gallery-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 20px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 62%);
  pointer-events: none;
}
.gallery-card figcaption b {
  display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: #fff; line-height: 1.15;
}
.gallery-card figcaption > span {
  display: block; margin-top: 5px; font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.74);
}
/* 필터의 그리스 문자는 대문자로 바꾸지 않는다 — Hα 가 HA 로 읽힌다 (히어로와 같은 규칙) */
.gallery-card figcaption .no-caps { text-transform: none; }
/* 비활성 카드를 어둡게. 요소를 따로 두지 않고 카드 자체의 밝기를 낮춘다. */
.gallery-card[data-dim] { filter: brightness(0.42); }
.gallery-hint {
  margin: 26px 0 0; text-align: center; font-size: 11px; letter-spacing: 1.3px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.34);
}
.gallery-hint kbd {
  font: inherit; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 3px;
  padding: 1px 5px; color: rgba(255, 255, 255, 0.5);
}
/* 좁은 화면: 카드를 줄이고 이웃은 화면 밖으로 나가게 둔다 — 폭을 억지로 맞추면
 * 사진이 우표만 해진다. 무대는 계속 가운데 정렬이라 잘림이 대칭이다. */
@media (max-width: 767px) {
  .gallery { padding-block: 64px; }
  .gallery-title { font-size: 28px; }
  .gallery-subtitle { font-size: 16px; }
  .gallery-stage { height: 300px; }
  .gallery-track { width: 0; height: 240px; }
  .gallery-card { height: 240px; }
  .gallery-card figcaption b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .gallery-card { transition: none; }
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq { width: 100%; padding-block: 96px; background: var(--ink); }
.faq-container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.faq-header { text-align: center; margin-bottom: 48px; }
.faq-title {
  font-size: 36px; font-weight: 700; margin: 0 0 16px; line-height: 1.2;
  color: var(--d-heading);
}
.faq-subtitle {
  font-size: 18px; line-height: 1.6; max-width: 600px; margin: 0 auto;
  color: var(--d-text);
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--d-well); border-radius: 12px; overflow: hidden;
  transition: 0.2s; border: 1px solid var(--d-line);
}
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; background: transparent; border: none;
  cursor: pointer; text-align: left; font-size: 16px; font-weight: 600;
  transition: 0.2s; color: var(--d-heading); font-family: inherit;
}
.faq-question:hover { background: rgba(255, 255, 255, 0.03); }
.faq-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-answer { padding: 0 24px; overflow: hidden; height: 0; transition: height 0.3s ease; }
.faq-answer-inner { padding-bottom: 20px; }
.faq-answer p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--d-text); }
@media (max-width: 768px) {
  .faq { padding: 72px 0; }
  .faq-container { padding: 0 16px; }
  .faq-title { font-size: 28px; }
  .faq-subtitle { font-size: 16px; }
  .faq-question { padding: 16px 20px; font-size: 15px; }
  .faq-answer { padding: 0 20px; }
  .faq-answer p { font-size: 14px; }
}

/* ── 문의 폼 ───────────────────────────────────────────────────── */
.contactForm { padding: 64px 24px; background-color: var(--paper-2); }
.contactForm-container { max-width: 560px; margin: 0 auto; }
.contactForm-header { text-align: center; margin-bottom: 40px; }
.contactForm-title { font-size: 36px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.contactForm-subtitle { font-size: 18px; color: var(--text-2); margin: 0; line-height: 1.6; }
.contactForm-form { display: flex; flex-direction: column; gap: 24px; }
.contactForm-field { display: flex; flex-direction: column; gap: 8px; }
.contactForm-label { font-size: 14px; font-weight: 600; color: #374151; }
.contactForm-input, .contactForm-textarea {
  width: 100%; padding: 14px 16px; font-size: 16px;
  border: 1px solid #d1d5db; border-radius: 8px; background-color: #fff;
  color: var(--text); transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.contactForm-input:focus, .contactForm-textarea:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.contactForm-input::placeholder, .contactForm-textarea::placeholder { color: #9ca3af; }
.contactForm-textarea { resize: vertical; min-height: 120px; }
.contactForm-submit {
  padding: 12px 26px; font-size: 15px; font-weight: 600; color: #fff;
  background-color: var(--accent); border: none; border-radius: 8px;
  cursor: pointer;
  transition: --btn-r 0.42s ease-in-out, background-color 0.2s, transform 0.1s;
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: inherit;
}
.contactForm-submit:hover { background-color: var(--accent); }
.contactForm-submit:active { transform: scale(0.98); }
.contactForm-note { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.6; text-align: center; }
/* 제출 결과는 같은 자리에서 색으로만 구분한다 — 폼 아래에 요소가 늘었다 줄었다
 * 하면 버튼이 커서 밑에서 움직인다. */
.contactForm-note[data-tone="ok"]   { color: var(--accent); }
.contactForm-note[data-tone="warn"] { color: #c2703a; }
.contactForm-submit:disabled { opacity: 0.65; cursor: default; }

/* 백엔드가 죽었을 때 나오는 구조 패널 (2026-09-11).
   예전에는 mailto: 로 자동 이동했는데, 메일 프로그램이 없는 사람에게는
   아무 일도 안 일어나서 쓴 글이 통째로 사라졌다. 이제 화면에 남기고 복사하게
   한다. 색·모서리는 폼의 나머지와 같은 토큰을 쓴다. */
.contactForm-rescue {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 2px;
}
.contactForm-rescueHead {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--text);
}
.contactForm-rescueBody {
  font: inherit; font-size: 13px; line-height: 1.6; color: var(--text);
  padding: 12px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 2px;
  resize: vertical; white-space: pre;
}
.contactForm-rescueRow { display: flex; gap: 12px; align-items: center; }
.contactForm-rescueCopy {
  font: inherit; font-size: 13px; color: var(--text-3);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 2px;
  padding: 8px 16px; cursor: pointer; flex: 0 0 auto;
}
.contactForm-rescueCopy:hover { color: var(--text); border-color: var(--text-2); }
.contactForm-rescueLink { font-size: 13px; color: var(--accent); }
/* 봇 함정: 화면에서 완전히 빼되 display:none 은 쓰지 않는다 — 일부 봇은
 * display:none 인 칸을 건너뛴다. */
.contactForm-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .contactForm { padding: 80px 24px; }
  .contactForm-title { font-size: 42px; }
}

/* ── 푸터 ──────────────────────────────────────────────────────── */
/* padding 한 줄로 쓰면 .section 의 좌우 여백까지 0 으로 덮어써서
 * 푸터 글자만 화면 왼쪽 끝에 붙는다 — 위아래만 지정할 것 */
.footer { padding-block: 64px 32px; background: var(--shell); color: #fff; }
.footer-inner {
  display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 48px;
}
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1.5fr 2fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logoMark { width: 36px; height: 36px; flex-shrink: 0; }
.footer-logoText { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.footer-description {
  font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0;
  color: rgba(255, 255, 255, 0.75);
}
.footer-social { display: flex; gap: 16px; margin-top: 8px; }
.footer-socialLink {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); transition: 0.2s; color: #fff;
}
.footer-socialLink:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.footer-columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 32px;
}
.footer-column { display: flex; flex-direction: column; gap: 16px; }
.footer-columnTitle {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; margin: 0;
}
.footer-columnLinks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.footer-columnLink {
  font-size: 14px; text-decoration: none; transition: opacity 0.2s;
  color: rgba(255, 255, 255, 0.75);
}
.footer-columnLink:hover { opacity: 0.7; text-decoration: underline; }
.footer-bottom {
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center;
}
.footer-copyright { font-size: 13px; margin: 0; color: rgba(255, 255, 255, 0.6); }

/* ── 모션 ──────────────────────────────────────────────────────── */
/* 숨기는 것은 자바스크립트가 살아 있을 때만. 스크립트가 죽거나 차단되면
 * 본문이 통째로 안 보이는 사고가 나므로, 기본 상태는 항상 '보임'이다.
 *
 * 애니메이션이 아니라 전이(transition)를 쓴다 — 애니메이션은 한 번 끝나면
 * 되돌아오지 않아서 «나갈 때 페이드 아웃»이 안 된다. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* 표의 행은 옮기지 않고 밝기만 바꾼다 — tr 에 transform 을 걸면 칸 경계가
 * 흔들려 보인다. FAQ 항목은 카드라 옮겨도 괜찮지만 폭을 줄여 잔잔하게. */
.js tr[data-reveal] { transform: none; }
.js .faq-item[data-reveal] { transform: translateY(10px); }
.js .faq-item[data-reveal].is-visible { transform: none; }

/* 패럴랙스 층. transform 은 스크립트가 매 프레임 덮어쓰므로 여기서는
 * 합성만 미리 준비해 둔다. */
[data-parallax] { will-change: transform; }

/* 배경 층은 위아래로 흘러야 하므로 원래 칸보다 크게 잡아 가장자리가 비지 않게 한다 */
.slider-background[data-parallax] { top: -12%; height: 124%; }
.zigzag-figure[data-parallax] img { display: block; }

/* 감쇠 모드가 꺼야 하는 것은 «움직임» 이지 «밝기 변화» 가 아니다.
 *
 * 자리를 옮기는 것(패럴랙스, 떠오르는 등장)은 전정기관을 자극하므로 끈다.
 * 반면 히어로의 천체사진이 서로 넘어가는 크로스페이드는 아무것도 움직이지
 * 않는 불투명도 변화이고, 접근성 지침이 «움직임 대신 쓰라» 고 권하는 바로
 * 그 방식이다. 그래서 감쇠 모드에서도 남긴다.
 *
 * 예전에는 `*` 에 transition-duration: 0.01ms 를 걸어 이 크로스페이드까지
 * 죽였다. 윈도우 「애니메이션 효과」를 끈 PC 에서는 히어로가 첫 장에 멈춰
 * 있었고, 그게 «배경이 안 바뀐다» 의 원인이었다. */
/* 감쇠 규칙은 전부 `html:not(.force-motion)` 아래에 둔다. 그래야 미리보기
 * (?motion=1) 일 때 규칙이 아예 안 걸린다 — 예전에는 강제모션 쪽에서
 * `transform: revert !important` 로 덮으려 했는데, 그 !important 가 스크립트가
 * 넣는 인라인 transform 까지 이겨서 패럴랙스가 0 으로 멈췄다. */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *:not(.slider-slide):not([data-reveal]),
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* 등장은 «떠오름» 만 빼고 밝기로만 남긴다 */
  html:not(.force-motion).js [data-reveal] { transform: none; }
  /* 자리를 옮기는 것은 전부 정지 */
  html:not(.force-motion) [data-parallax] { transform: none !important; will-change: auto; }
  html:not(.force-motion) .slider-background[data-parallax] { top: 0; height: 100%; }
}

/* ── 법무 문서 페이지 ──────────────────────────────────────────────
   privacy.html / terms.html 은 tools/site/render_legal.py 가
   packaging/legal/*.txt 에서 생성한다. 손으로 고치지 말 것 — 다음
   생성 때 지워진다. 문서를 고치려면 원본 텍스트를 고친다.

   읽기용 조판이라 본문 폭을 68자 근처로 묶는다. 사이트의 다른 절은
   1280px 격자를 쓰지만, 약관은 훑는 글이 아니라 읽는 글이다. */
.legal { padding-block: 72px 96px; background: var(--paper); }
.legal-inner { max-width: 720px; }
.legal-h1 {
  font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--heading); margin: 0 0 20px;
}
.legal-meta {
  margin: 0 0 40px; padding: 18px 20px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper-2);
  display: grid; gap: 8px;
}
.legal-metaRow { display: grid; grid-template-columns: 132px 1fr; gap: 12px; }
.legal-meta dt { color: var(--text-2); font-size: 13px; }
.legal-meta dd { margin: 0; color: var(--text); font-size: 13px; }
@media (max-width: 560px) {
  .legal-metaRow { grid-template-columns: 1fr; gap: 2px; }
}
.legal-body { color: var(--text-3); font-size: 15px; line-height: 1.72; }
.legal-body p { margin: 0 0 16px; }
.legal-h2 {
  font-size: 17px; line-height: 1.3; color: var(--heading); font-weight: 650;
  margin: 40px 0 14px; padding-top: 20px; border-top: 1px solid var(--line);
}
.legal-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-num { color: var(--accent); font-variant-numeric: tabular-nums; }
.legal-list { margin: 0 0 16px; padding-left: 22px; }
.legal-list li { margin: 0 0 8px; }
.legal-body a { color: var(--accent); }
.legal-body a:hover { color: var(--accent-hover); }
.legal-h3 {
  font-size: 14px; color: var(--heading); font-weight: 650;
  margin: 22px 0 8px;
}
/* 가이드 안의 「무엇을 보고 넘어가나」 표. 사양표(.spec-table)가 아니라 별도인
 * 이유는 열이 셋이고 셋 다 문장이라서다 — .spec-table 은 첫 열을 34%로 고정해
 * 이름/값 두 열을 전제한다. 좁은 화면에서는 줄이지 않고 가로로 스크롤한다
 * (.datatable-wrap 과 같은 판단: 접는 순간 기준이 요약이 된다). */
/* 릴리스 날짜는 판 번호 옆에 붙는 부속 정보다. .legal-meta 를 쓰고 있었는데
 * 그건 테두리·패딩이 있는 카드 스타일이라, 제목 한가운데에 상자가 그려졌다. */
.legal-releaseDate { font-weight: 400; font-size: 13px; color: var(--text-2); }

.guide-tableWrap { overflow-x: auto; margin: 0 0 18px; }
.guide-table {
  width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px;
}
.guide-table th, .guide-table td {
  text-align: left; padding: 10px 16px 10px 0; vertical-align: top;
  border-bottom: 1px solid var(--line); line-height: 1.6;
}
.guide-table thead th {
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent); padding-bottom: 8px;
}
.guide-table tbody td { color: var(--text-3); }
.guide-table tbody td:first-child { color: var(--heading); font-weight: 600; white-space: nowrap; }
.guide-table tbody tr:last-child td { border-bottom: 0; }

.legal-fields { margin: 0 0 16px; padding-left: 20px; list-style: none; }
.legal-fields li {
  margin: 0 0 6px; padding-left: 20px; position: relative; font-size: 14px;
}
.legal-fields li::before {
  content: "—"; position: absolute; left: 0; color: var(--text-2);
}
/* 운영자 신원 — 한국 관례이자, 판매를 시작하면 전자상거래법이 요구하는 표시.
   저작권 줄보다 한 단계 조용하게 두어, 읽으려는 사람은 찾고 그렇지 않은
   사람의 눈길은 안 끈다. 사업자등록번호는 등록이 생기면 이 줄에 붙는다. */
.footer-identity {
  font-size: 12px; margin: 0 0 6px; color: rgba(255, 255, 255, 0.52);
  line-height: 1.6;
}
.footer-identityLink { color: inherit; text-decoration: underline; }
.footer-identityLink:hover { color: rgba(255, 255, 255, 0.75); }

/* ── 계정 페이지 (가입 / 비밀번호 재설정) ───────────────────────────
   tools/site/render_auth.py 가 생성한다. 손으로 고치면 다음 생성 때
   지워진다. 폼은 읽고 채우는 화면이라 본문 폭을 좁게 묶는다. */
.auth { padding-block: 72px 96px; background: var(--paper); }
.auth-inner { max-width: 460px; }
.auth-title {
  font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--heading); margin: 0 0 12px;
}
.auth-lead { color: var(--text-3); font-size: 15px; line-height: 1.65; margin: 0 0 28px; }
.auth-form { display: grid; gap: 18px; }
.auth-field { display: grid; gap: 6px; }
.auth-label { font-size: 13px; color: var(--text-2); }
.auth-input {
  font: inherit; font-size: 15px; color: var(--text); background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px;
  width: 100%; box-sizing: border-box;
}
.auth-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.auth-hint { font-size: 12px; color: var(--text-2); margin: 0; }
.auth-consent {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  font-size: 13px; line-height: 1.55; color: var(--text-3);
}
.auth-consent input { margin: 3px 0 0; width: 16px; height: 16px; }
.auth-consent a { color: var(--accent); }
.auth-submit {
  font: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background-color: var(--accent); border: 0; border-radius: 6px; padding: 12px 18px;
  cursor: pointer;
  transition: --btn-r 0.42s ease-in-out, background-color 0.2s;
}
.auth-submit:hover { background-color: var(--accent); }
.auth-submit:disabled { background-color: var(--text-2); background-image: none; cursor: default; }
/* 결과 문구는 자리를 미리 잡아 둔다 — 뜰 때 폼이 아래로 밀리지 않도록. */
.auth-status { font-size: 13px; line-height: 1.5; margin: 0; min-height: 20px; color: var(--text-3); }
.auth-status[data-tone="ok"] { color: #0f766e; }
.auth-status[data-tone="warn"] { color: #b45309; }
.auth-alt {
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.auth-alt a { color: var(--accent); }
.auth-optional {
  font-size: 11px; color: var(--text-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px;
}
.auth-passwordRow { display: flex; gap: 8px; align-items: stretch; }
.auth-passwordRow .auth-input { flex: 1 1 auto; }
.auth-reveal {
  font: inherit; font-size: 13px; color: var(--text-3); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 14px;
  cursor: pointer; flex: 0 0 auto;
}
.auth-reveal:hover { color: var(--text); border-color: var(--text-2); }
.auth-hint[data-tone="ok"] { color: #0f766e; }
.auth-hint[data-tone="warn"] { color: #b45309; }
/* 로그인 상태의 우상단. Join Beta 자리를 그대로 쓰되, 초록 버튼이 아니라
   조용한 테두리로 — 그 자리는 «지금 할 일»을 가리키는 곳이고, 이미
   로그인한 사람에게 자기 아이디는 할 일이 아니다. */
.navbar-cta--account {
  background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.navbar-cta--account:hover {
  background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45);
}