:root {
  --gray04: #8d96a1;
  --gray06: #556372;
  --gray08: #3c4651;
  --gray10: #242a30;
  --gray10-rgb: 36, 42, 48;
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --black: #000000;
  --line: #eeedec;
  --max: 1320px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    'Helvetica Neue',
    'Segoe UI',
    'Apple SD Gothic Neo';
  word-break: auto-phrase;
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 1000px) {
  body .for-desktop {
    display: none;
  }
}

html,
body {
  background-color: #fff;
  font-family:
    'Pretendard Variable',
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    'Helvetica Neue',
    'Segoe UI',
    'Apple SD Gothic Neo',
    'Noto Sans KR',
    'Malgun Gothic',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 환경별 다운로드 노출은 화면 너비와 별도로 적용한다. */
html[data-download-platform='windows'] [data-platform='mac'],
html[data-download-platform='mac'] [data-platform='windows'],
html[data-download-platform='mobile'] .desktop-download-options,
html[data-download-platform='mobile'] .download-platform-selection,
html[data-download-platform='mobile'] .download-qr-inline,
html[data-download-platform='unknown'] .desktop-download-options {
  display: none;
}

/* 휴대폰에서는 화면 너비와 관계없이 760px 이하와 같은 구성을 쓴다: 상단은 모바일 문구와 설치 버튼,
   하단은 모바일 줄을 먼저 두고 PC 앱도 있음을 알리도록 데스크톱 줄도 보여 준다. 상단과 겹치는 설치 버튼·구분선은 숨긴다. */
html[data-download-platform='mobile'] .download-all-body > .mobile-install-button,
html[data-download-platform='mobile'] .hero-copy-desktop {
  display: none;
}

/* .download-btn-group의 display: flex보다 앞서도록 그룹 클래스를 함께 쓴다. */
.download-btn-group.mobile-install-button {
  display: none;
}

.download-platform-selection {
  display: none;
  width: 100%;
  color: var(--gray06);
  font-size: 14px;
}

html[data-download-platform='unknown'] .download-platform-selection {
  display: block;
}

.download-platform-selection select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--gray04);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
}

.download-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === 다운로드 페이지 메인 콘텐츠 === */

main {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* 홈과 같은 콘텐츠 양옆 세로 가이드 라인 (src/pages/index.astro의 .bg-guides와 동일한 위치·색) */
.bg-guides {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-guides .v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.bg-guides .v.l {
  left: calc(max(24px, (100% - var(--max)) / 2) + 6px);
}

.bg-guides .v.r {
  right: calc(max(24px, (100% - var(--max)) / 2) + 6px);
}

/* 좁은 화면: 라인을 화면 가장자리에 붙인다. */
@media screen and (max-width: 1400px) {
  .bg-guides .v.l {
    left: 16px;
  }

  .bg-guides .v.r {
    right: 16px;
  }
}

/* 모바일: 홈과 같이 라인을 숨긴다. */
@media screen and (max-width: 760px) {
  .bg-guides {
    display: none;
  }
}

/* 설명 문구 아래 앱 아이콘 이미지: 이미지 위아래의 빛 번짐 여백만큼 겹쳐 간격을 줄인다. */
.download-hero {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: -158px 0 -90px;
  pointer-events: none;
}

.download-hero img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
}

.desktop-app-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 150px 0 100px;
  /* PC 섹션 상단에 50px 추가 여백 */
}

.app-download-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;

  max-width: 1212px;
  width: 100%;
  margin-inline: auto;
  padding: 0 25px;
  box-sizing: border-box;
}

/* 좌/우 컨텐츠 공통 넓이 */
.download-info {
  display: flex;
  flex: 0 0 420px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* 데스크톱 앱 영역은 이미지 없이 단독으로 놓이므로 한 줄 제목만큼 넓힌다. */
.desktop-app-download .download-info {
  flex-basis: auto;
}

/* 데스크톱 앱 영역은 모든 콘텐츠를 가운데 정렬한다. */
.desktop-app-download .download-info,
.desktop-app-download .download-btn-group.desktop-download-options {
  align-items: center;
}

.desktop-app-download .download-title,
.desktop-app-download .download-description,
.desktop-app-download .download-platform-selection,
.desktop-app-download .windows-install-note {
  text-align: center;
}

/* 좌측: 텍스트 + 버튼 영역 */

.download-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(var(--gray10-rgb), 0.1) inset;

  color: var(--gray08);
  font-size: 14px;
  font-weight: 600;
  line-height: 200%;
}

.download-title {
  text-align: left;
  color: var(--gray10);
  font-size: 42px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.84px;
}

.download-description {
  text-align: left;
  color: rgba(var(--gray10-rgb), 0.72);
  font-size: 17px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.34px;
}

/* 다운로드 버튼은 아래 앱 아이콘 이미지의 빛 번짐 위에 표시한다. */
.desktop-app-download .desktop-download-options {
  position: relative;
  z-index: 1;
}

/* 하단 데스크톱 줄 설명 아래 기존 앱 사용자 안내 링크 */
.install-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  color: var(--gray08);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.install-guide-link > i {
  color: var(--gray04);
  font-size: 13px;
  transition: color 0.15s ease;
}

/* 밑줄을 글자가 아닌 링크 전체 아래에 그어 글자와 화살표가 한 줄로 이어 보이게 한다. */
.install-guide-link:hover {
  border-bottom-color: currentColor;
  color: var(--gray10);
}

.install-guide-link:hover > i {
  color: currentColor;
}

.install-guide-link:focus-visible {
  outline: 2px solid var(--gray10);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .install-guide-link,
  .install-guide-link > i {
    transition: none;
  }
}

.download-btn-group {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 12px 22px;

  border: none;
  border-radius: 10px;

  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.2px;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition: background-color 0.15s ease;
}

.download-btn-primary {
  background-color: var(--gray10);
  color: var(--white);
}

.download-btn-primary:hover {
  background-color: var(--black);
}

/* 데스크톱 다운로드: 한 줄 라벨의 48px 버튼 */
.download-btn-group.desktop-download-options {
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}

.windows-install-note {
  margin: 0;
  color: rgba(var(--gray10-rgb), 0.64);
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.desktop-download-platform {
  display: flex;
  max-width: 100%;
}

.desktop-download-btn {
  gap: 10px;
  height: 48px;
  padding: 0 20px 0 18px;
}

.desktop-download-btn > i {
  font-size: 18px;
}

.desktop-download-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.desktop-download-detail {
  color: rgba(var(--white-rgb), 0.72);
  font-weight: 500;
}

.download-btn:focus-visible {
  outline: 2px solid var(--gray10);
  outline-offset: 3px;
}

/* 운영체제별 다운로드를 같은 48px 분할 버튼으로 제공한다. */
.desktop-download-tray {
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 12px;
  background: var(--black);
}

.desktop-download-tray .download-btn-primary {
  padding: 0 22px 0 20px;
  border-radius: 12px 0 0 12px;
  background-color: var(--black);
}

/* 버튼이 블랙이므로 마우스를 올리면 살짝 밝게 표시한다. */
.desktop-download-tray .download-btn-primary:hover {
  background-color: var(--gray10);
}

.desktop-download-tray .desktop-download-secondary {
  position: relative;
  padding: 0 20px;
  border-radius: 0 12px 12px 0;
  background: transparent;
  color: rgba(var(--white-rgb), 0.7);
  font-size: 14px;
  font-weight: 500;
}

.desktop-download-tray .desktop-download-secondary::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 1px;
  background: rgba(var(--white-rgb), 0.22);
}

.desktop-download-tray .desktop-download-secondary:hover {
  background: var(--gray10);
  color: var(--white);
}

/* 크롬 계열에서 Apple Silicon으로 확인된 Mac: Intel 보조 링크를 숨기고 기본 링크를 단독 버튼 모양으로 둔다. */
html[data-mac-chip='arm'] .desktop-download-tray[data-platform='mac'] .desktop-download-secondary {
  display: none;
}

html[data-mac-chip='arm'] .desktop-download-tray[data-platform='mac'] .download-btn-primary {
  border-radius: 12px;
}

/* 분할 버튼의 초점 링은 각 링크 안쪽에 표시한다. */
.desktop-download-tray .download-btn:focus-visible {
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px var(--white);
}

/* === 하단 전체 다운로드 목록: 왼쪽 제목, 오른쪽 운영체제별 줄 === */
.download-all-row {
  border-top: 1px solid var(--line);
  padding: 80px 0;
}

.download-all-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 25px;
}

/* 가장자리에 붙은 세로 라인과 내용 사이에 여유를 둔다 (홈의 .container와 같은 40px). 라인이 사라지는 760px 이하는 기본 여백. */
@media screen and (min-width: 761px) and (max-width: 1400px) {
  .download-all-inner {
    padding: 0 40px;
  }
}

.download-all-title,
.download-all-subtitle {
  font-size: 28px;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.56px;
}

.download-all-title {
  color: var(--gray10);
}

.download-all-subtitle {
  color: var(--gray04);
  font-weight: 500;
}

/* 기존 브라우저 앱(PWA) 사용자를 위한 안내 링크 */
.download-all-head .install-guide-link {
  margin-top: 20px;
}

.download-all-description {
  max-width: 400px;
  margin-top: 16px;
  color: rgba(var(--gray10-rgb), 0.72);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.32px;
}

.download-all-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.download-all-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}

.download-all-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--gray10);
  font-size: 17px;
  font-weight: 500;
}

/* Apple·Windows 아이콘 폭이 달라도 운영체제 이름이 같은 위치에서 시작하도록 아이콘 자리를 고정한다. */
.download-all-name > i {
  width: 16px;
  color: var(--gray04);
  font-size: 16px;
  text-align: center;
}

/* Apple 로고는 같은 글자 크기에서 Windows 로고보다 작아 보여 살짝 키운다. */
.download-all-name > .fa-apple {
  font-size: 18px;
}

.download-all-detail {
  color: var(--gray04);
  font-weight: 400;
}

.download-all-soon {
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(var(--gray10-rgb), 0.12);
  background: var(--white);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* 출시 예정 문구: 진한 글자 위로 연한 회색 빛이 왼쪽에서 오른쪽으로 지나간다. */
.download-all-soon-text {
  background: linear-gradient(100deg, var(--gray10) 40%, var(--gray04) 50%, var(--gray10) 60%) 0 0 /
    250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: download-soon-shimmer 2.8s ease-in-out infinite;
}

@keyframes download-soon-shimmer {
  0% {
    background-position: 100% 0;
  }

  70%,
  100% {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-all-soon-text {
    background: none;
    color: var(--gray10);
    animation: none;
  }
}

.download-all-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(var(--gray10-rgb), 0.14);
  background: var(--white);
  color: var(--gray10);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.download-all-arrow {
  flex: 0 0 auto;
}

a.download-all-btn:hover {
  background: #f4f5f6;
}

a.download-all-btn:focus-visible {
  outline: 2px solid var(--gray10);
  outline-offset: 3px;
}

/* 출시 전 스토어 버튼: 누를 수 없는 상태로 표시한다. */
.download-all-btn.is-disabled {
  box-shadow: none;
  background: #f6f7f8;
  color: var(--gray04);
  cursor: not-allowed;
}

/* 마지막 줄(Windows EXE) 바로 아래에 붙여 해당 줄의 안내로 읽히게 한다. */
.download-all-body > .windows-install-note {
  margin-top: 6px;
}

/* 모바일 줄 목록 아래 정식 앱 안내: SmartScreen 안내와 같은 작은 회색 글씨 */
.download-all-note {
  margin-top: 6px;
  color: rgba(var(--gray10-rgb), 0.64);
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
}

/* QR 코드 영역: 모바일 줄 오른쪽 목록 위. 카드 틀 없이 QR과 짧은 안내만 두고 아래 목록과 연한 선으로 나눈다. */
.download-qr-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

/* 휴대폰·좁은 화면에서 QR 대신 보이는 설치 버튼도 같은 자리에서 아래 목록과 선으로 나눈다. */
.download-all-body > .download-btn-group.mobile-install-button {
  margin: 0 0 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.download-qr-inline img {
  width: 72px;
  height: 72px;
}

.download-qr-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.download-qr-content strong {
  color: var(--gray10);
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
}

.download-qr-content span {
  color: var(--gray04);
  font-size: 14px;
  line-height: 150%;
}

/* 상단 문구는 넓은 화면에서 데스크톱용, 760px 이하에서 모바일용을 보여 준다. */
.hero-copy-mobile {
  display: none;
}

/* 상단 모바일 앱 설치 버튼: 760px 이하에서만 데스크톱 다운로드 버튼 대신 보여 준다. */
.download-btn-group.hero-mobile-install {
  display: none;
  position: relative;
  z-index: 1;
}

.hero-mobile-install .download-btn-primary {
  min-height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  background-color: var(--black);
}

.hero-mobile-install .download-btn-primary:hover {
  background-color: var(--gray10);
}

/* 760px 이하(홈과 같은 모바일 기준): 상단은 모바일 앱 설치 버튼, 하단은 모바일 앱 줄을 먼저 보여 준다. */
@media screen and (max-width: 760px) {
  .desktop-app-download .desktop-download-options,
  .desktop-app-download .download-platform-selection {
    display: none;
  }

  .download-btn-group.hero-mobile-install {
    display: flex;
  }

  .hero-copy-desktop {
    display: none;
  }

  .hero-copy-mobile {
    display: inline;
  }

  .download-all {
    display: flex;
    flex-direction: column;
  }

  .download-all-row[data-row='mobile'] {
    order: -1;
  }

  /* 상단에 같은 설치 버튼이 있으므로 하단 모바일 줄의 버튼과 구분선은 숨긴다. */
  .download-all-body > .download-btn-group.mobile-install-button {
    display: none;
  }
}

html[data-download-platform='mobile'] .download-btn-group.hero-mobile-install {
  display: flex;
}

html[data-download-platform='mobile'] .hero-copy-mobile {
  display: inline;
}

html[data-download-platform='mobile'] .download-all {
  display: flex;
  flex-direction: column;
}

html[data-download-platform='mobile'] .download-all-row[data-row='mobile'] {
  order: -1;
}

/* 760px 이하 하단 목록: 버튼·글자를 줄이고 줄 사이를 연한 선으로 나눈다. 모바일 줄은 이름·배지·버튼을 한 줄에 담는다. */
@media screen and (max-width: 760px) {
  .download-all-list {
    gap: 0;
  }

  .download-all-item {
    gap: 12px;
    padding-block: 12px;
  }

  .download-all-item + .download-all-item {
    border-top: 1px solid var(--line);
  }

  .download-all-name {
    gap: 6px;
    font-size: 15px;
  }

  .download-all-row[data-row='mobile'] .download-all-name {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .download-all-soon {
    padding: 3px 8px;
    font-size: 11px;
  }

  .download-all-btn {
    gap: 4px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
  }

  .download-all-arrow {
    width: 10px;
    height: 10px;
  }

  .download-all-body > .windows-install-note {
    margin-top: 0;
  }
}

/* 760px 이하 데스크톱 줄: 이름과 설명을 한 줄에 담도록 설명을 조금 작게 한다. */
@media screen and (max-width: 760px) {
  .download-all-row[data-row='desktop'] .download-all-name {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .download-all-row[data-row='desktop'] .download-all-detail {
    font-size: 13px;
  }
}

/* 넓은 화면에서만 쓰는 강제 줄바꿈: 좁은 화면에서는 한 단어만 남는 줄이 생기지 않도록 끈다. */
@media screen and (max-width: 760px) {
  .br-wide {
    display: none;
  }
}

/* 400px 이하: 가장 긴 줄(Windows [Microsoft Store] + 스토어에서 받기)도 한 줄에 담기도록 간격을 조금 더 줄인다. */
@media screen and (max-width: 400px) {
  .download-all-item {
    gap: 8px;
  }

  .download-all-btn {
    padding: 0 8px;
  }
}

/* 360px 미만(아주 좁은 화면)은 한 줄에 담기지 않아 모바일 줄 배지·데스크톱 줄 설명을 이름 아래 줄로 내린다. */
@media screen and (max-width: 359px) {
  .download-all-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .download-all-row[data-row='desktop'] .download-all-name,
  .download-all-row[data-row='mobile'] .download-all-name {
    flex-wrap: wrap;
    row-gap: 4px;
    white-space: normal;
  }
}

/* === 모바일 미디어쿼리 === */
@media screen and (max-width: 1000px) {
  .download-hero {
    margin: -105px 0 -60px;
  }

  .download-hero img {
    max-width: 330px;
  }

  .desktop-app-download {
    min-height: auto;
    padding: 120px 0 60px;
  }

  .download-info {
    width: 100%;
  }

  .download-all-row {
    padding: 60px 0;
  }

  .download-all-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .download-all-title,
  .download-all-subtitle {
    font-size: 24px;
    letter-spacing: -0.48px;
  }

  .download-all-body .download-btn-group.mobile-install-button {
    justify-content: flex-start;
  }

  .app-download-inner {
    flex-direction: column;
    gap: 40px;
  }

  /* 모바일에서는 강제로 flex: 1 크기 비율 해제 */
  .download-info {
    flex: auto;
    align-items: center;
  }

  .download-title {
    text-align: center;
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .download-description {
    text-align: center;
    font-size: 15px;
    letter-spacing: -0.3px;
  }

  .download-btn-group {
    justify-content: center;
    width: 100%;
  }

  .download-btn-group.desktop-download-options {
    align-items: center;
  }

  .download-btn-group.mobile-install-button {
    display: flex;
  }
}