/* 앱 페이지 — 앱마다 자기 아이콘에서 뽑은 색의 '무대'를 하나씩 준다. */

:root {
  --stage-storage: #e6f5ee;
  --stage-storage-ink: #0d3b2b;
  --stage-lifeshot: #f6efe5;
  --stage-lifeshot-ink: #3d2b10;
  --gold: #e8b54a;            /* 인생샷 앱의 '각 잡힘' 금빛(앱 spec 값 그대로) */
  --gold-ink: #1a1200;
  --amber: #d9922f;           /* Nits 아이콘의 점 */
  --nits-bg: #16181b;
  --nits-ink: #f3f1ec;
  --nits-ink-2: #a9a59d;
}
html[data-resolved-theme="dark"] {
  --stage-storage: #0e1c17;
  --stage-storage-ink: #9fe0c3;
  --stage-lifeshot: #17130d;
  --stage-lifeshot-ink: #f0d9a8;
}

/* 고대비: 무대 바탕을 검게 통일하고, 무대마다 노란 경계선으로 나눈다 */
html[data-contrast="high"] {
  --stage-storage: #000000;
  --stage-storage-ink: #ffffff;
  --stage-lifeshot: #000000;
  --stage-lifeshot-ink: #ffffff;
  --nits-bg: #000000;
  --nits-ink: #ffffff;
  --nits-ink-2: #f0f2f5;
}
html[data-contrast="high"] .stage { border-top: 2px solid var(--line-strong); }

.icon-ios { border-radius: 22.5%; }

/* ---------------------------------------------------------------- 머리 */
.apps-hero { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 6vw, 72px); }
.apps-hero .wrap { display: grid; gap: 24px; }
.apps-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.apps-jump a {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); text-decoration: none; font-weight: 650; font-size: 0.9375rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.apps-jump a:hover { border-color: var(--line-strong); background: var(--surface); }
.apps-jump img { width: 28px; height: 28px; }
.jump-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); position: relative; }
.jump-dot::after { content: ""; position: absolute; inset: 9px; border-radius: 2px; background: var(--signal); }

/* ---------------------------------------------------------------- 무대 */
.stage { padding-block: clamp(64px, 9vw, 120px); }
.stage-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.stage-grid-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stage-grid-flip .stage-copy { order: 2; }
.stage-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.stage-icon { width: 84px; height: 84px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.18)); }
.stage-kind { margin: 6px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--stage-muted, var(--ink-2)); }
.stage-name { margin: -8px 0 0; font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 850; letter-spacing: -0.035em; line-height: 1.1; }
.stage-tagline {
  margin: 0; font-size: clamp(1.875rem, 3.6vw, 3rem); font-weight: 850; line-height: 1.08; letter-spacing: -0.05em;
  text-wrap: balance;
}
.stage-desc { margin: 0; font-size: 1.0625rem; line-height: 1.7; max-width: 32em; color: var(--stage-muted, var(--ink-2)); }
.stage-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.stage-points li { display: grid; gap: 2px; padding-left: 20px; position: relative; }
.stage-points li::before {
  content: ""; position: absolute; left: 0; top: 0.58em; width: 9px; height: 9px; border-radius: 2px; background: var(--stage-accent, var(--signal));
}
.stage-points b { font-weight: 750; letter-spacing: -0.015em; }
.stage-points span { font-size: 0.9375rem; color: var(--stage-muted, var(--ink-2)); }
.stage-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 6px 0 4px; padding: 16px 0;
  border-block: 1px solid var(--stage-line, var(--line)); width: 100%;
}
.stage-facts div { display: grid; gap: 2px; min-width: 0; }
.stage-facts dt { font-size: 0.75rem; font-weight: 650; color: var(--stage-muted, var(--ink-3)); }
.stage-facts dd { margin: 0; font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
.stage-shot { margin: 0; display: grid; gap: 12px; min-width: 0; }
.stage-shot figcaption { font-size: 0.875rem; color: var(--stage-muted, var(--ink-3)); }
.shot-mac img { border-radius: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.45); }
.shot-phone { justify-items: center; }
.shot-phone img {
  width: min(100%, 340px); border-radius: 38px; border: 8px solid #0e1014;
  box-shadow: 0 40px 80px -30px rgba(61, 43, 16, 0.55);
}
.stage-demo { font-weight: 650; margin-left: 6px; }

.stage-storage { background: var(--stage-storage); --stage-accent: #15a06a; }
.stage-storage .stage-tagline { color: var(--stage-storage-ink); }

.stage-nits {
  background: var(--nits-bg); color: var(--nits-ink);
  --stage-accent: var(--amber); --stage-muted: var(--nits-ink-2); --stage-line: #2c2f34;
}
.stage-nits .button-line { color: var(--nits-ink); border-color: #4a4d53; }
.stage-nits .button-line:hover { border-color: var(--nits-ink); }
.stage-nits :focus-visible { outline-color: var(--amber); }

.stage-lifeshot { background: var(--stage-lifeshot); --stage-accent: var(--gold); }
.stage-lifeshot .stage-tagline { color: var(--stage-lifeshot-ink); }

.button-amber { background: var(--amber); color: #17130b; }
.button-amber:hover { background: #e7a346; }
.button-gold { background: var(--gold); color: var(--gold-ink); }
.button-gold:hover { background: #f0c463; }

/* ---------------------------------------------------------------- 웹 서비스 */
.service-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.service-list a {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline;
  padding: 18px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color 0.15s;
}
.service-list a:hover { background: var(--surface); }
.service-name { font-weight: 750; font-size: 1.0625rem; letter-spacing: -0.02em; }
.service-desc { color: var(--ink-2); }
.service-host { font-size: 0.8125rem; color: var(--ink-3); overflow-wrap: anywhere; text-align: right; }
.service-list a:hover .service-host { color: var(--signal-text); }

/* ---------------------------------------------------------------- 오픈소스로 */
.cross-link { padding-block: 0 clamp(64px, 8vw, 104px); }
.cross-link-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 32px; border-top: 1px solid var(--line);
}
.cross-link .h3 { margin: 0; max-width: 28em; }

@media (max-width: 900px) {
  .stage-grid, .stage-grid-flip { grid-template-columns: minmax(0, 1fr); }
  .stage-grid-flip .stage-copy { order: 0; }
  .service-list a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .service-host { text-align: left; }
}