/* 헬리 웹: 빌드 없는 한 장 스타일. 하늘 색은 앱 RoomSky.swift와 같다(docs/brand/10-밤하늘-시간대.md).
   기본은 밤. 라이트 모드일 때만 시각에 따라 새벽·낮·노을로 바뀐다(다크면 늘 밤, 결정 248). */

:root {
  color-scheme: dark;
  --sky: linear-gradient(#05061A, #0A0C26 55%, #0D0F2E);
  --ground: #0A0C26;
  --fg: light-dark(#1E2A44, #ECEBF7);
  --sub: color-mix(in oklab, var(--fg) 74%, transparent);
  --accent: light-dark(#3E4A9E, #C9C3FF);
  --glass: light-dark(rgb(255 255 255 / .58), rgb(255 255 255 / .06));
  --line: light-dark(rgb(30 42 68 / .12), rgb(255 255 255 / .13));
  --orb: light-dark(#5B63B8, #BEC4FF);
  --stars: 1;
  --radius: 24px;
  --sky-h: 140svh;
}

@media (prefers-color-scheme: light) {
  [data-sky="dawn"] {
    --sky: linear-gradient(#2E4068, #50678F 30%, #7F92AE 58%, #ABAEBD 82%, #E6C2AE);
    --ground: #1F2B4A; --fg: #FFF4EE; --accent: #FFE3CC; --glass: rgb(255 255 255 / .08); --stars: .4;
  }
  [data-sky="day"] {
    color-scheme: light;
    --sky: linear-gradient(#A9C0DC, #BACDE3 45%, #D3E0EE 80%, #E8EEF5);
    --ground: #EEF2F8; --stars: 0;
  }
  [data-sky="dusk"] {
    --sky: linear-gradient(#3A2A5C, #6E4A84 28%, #B47890 55%, #E79C84 80%, #F6C098);
    --ground: #251B3E; --fg: #FFF4EE; --accent: #FFE3CC; --glass: rgb(255 255 255 / .08); --stars: .5;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  position: relative;
  min-height: 100svh;
  background: var(--ground);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
  --star: rgb(255 255 255 / calc(var(--stars) * .6));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* 하늘은 위에서 바닥색으로 천천히 스며든다 */
  &::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--sky-h);
    z-index: -1;
    background:
      radial-gradient(1.2px 1.2px at 12% 9%, var(--star) 99%, transparent),
      radial-gradient(1px 1px at 31% 22%, var(--star) 99%, transparent),
      radial-gradient(1.4px 1.4px at 68% 7%, var(--star) 99%, transparent),
      radial-gradient(1px 1px at 84% 18%, var(--star) 99%, transparent),
      radial-gradient(1px 1px at 52% 31%, var(--star) 99%, transparent),
      radial-gradient(1.2px 1.2px at 92% 34%, var(--star) 99%, transparent),
      radial-gradient(1px 1px at 7% 38%, var(--star) 99%, transparent),
      var(--sky);
    mask: linear-gradient(#000 62%, transparent);
  }
  /* 별은 하늘 위 아주 옅게(낮엔 없음) */
  &::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--sky-h) * .5);
    z-index: -1;
    background: radial-gradient(60% 50% at 50% 0%, rgb(255 255 255 / calc(var(--stars) * .07)), transparent);
  }
}

a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(100% - 44px, 1040px); margin-inline: auto; }
.narrow { width: min(100% - 44px, 680px); margin-inline: auto; }

/* 윗줄: 아이콘 + 이름 하나 */
.top {
  padding-block: max(18px, env(safe-area-inset-top)) 0;
  & a { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
  & img { width: 30px; height: 30px; }
}

/* 첫 화면 */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-block: clamp(48px, 10svh, 110px) 40px;

  & h1 {
    font-size: clamp(28px, 7.4vw, 54px);
    line-height: 1.16;
    letter-spacing: -.035em;
    font-weight: 700;
    margin: 0 0 18px;
    & span { display: inline-block; }
  }
  & .lede { font-size: clamp(18px, 2.4vw, 21px); margin: 0 0 32px; }
  @media (width >= 860px) { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: end; }
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  background: var(--fg); color: var(--ground);
  transition: transform .2s, opacity .2s;
  &:hover { transform: translateY(-1px); }
  &.ghost {
    background: var(--glass); color: var(--fg);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  &[aria-disabled="true"] { pointer-events: none; opacity: .7; }
  & small { font-weight: 500; opacity: .7; }
  & svg { width: 18px; height: 18px; }
}

/* 첫 화면 오른쪽 한 줄(대표: 그림 대신 "기억 구슬 방에서 볼 수 있다") */
.hero-note {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sub);
  & b { color: var(--fg); font-weight: 650; }
}

/* 앱 화면 자리: 캡처가 생기면 .phone 안을 img 한 장으로 바꾼다 */
.phone {
  justify-self: center;
  width: min(300px, 76vw);
  aspect-ratio: 9 / 19.5;
  border-radius: 48px;
  padding: 10px;
  background: color-mix(in oklab, var(--fg) 10%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgb(5 6 26 / .6);
  & .screen {
    height: 100%;
    border-radius: 38px;
    overflow: hidden;
    background: var(--sky);
    display: grid;
    place-content: center;
    position: relative;
  }
  & img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
.orbs {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 22px 18px;
  & i {
    width: 56px; aspect-ratio: 1; border-radius: 50%;
    background:
      radial-gradient(circle at 34% 22%, rgb(255 255 255 / .42), rgb(255 255 255 / .08) 45%, transparent 70%),
      radial-gradient(circle at 50% 102%, rgb(190 196 255 / .5), transparent 62%),
      linear-gradient(rgb(255 255 255 / .2), rgb(169 176 255 / .08));
    box-shadow: inset 0 0 0 1.5px rgb(217 220 255 / .55), 0 6px 18px -8px rgb(20 24 71 / .35);
  }
  @media (prefers-reduced-motion: no-preference) {
    & i { animation: drift 9s ease-in-out infinite alternate; }
    & i:nth-child(3n+2) { animation-delay: -3s; }
    & i:nth-child(3n) { animation-delay: -6s; }
  }
}
@keyframes drift { to { translate: 0 -4px; } }

/* 구역 */
section { padding-block: clamp(64px, 12vw, 120px) 0; }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--sub); margin: 0 0 10px; }
h2 {
  font-size: clamp(28px, 5.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 36px;
  text-wrap: balance;
}
h3 { font-size: 19px; line-height: 1.35; letter-spacing: -.01em; margin: 14px 0 6px; }
.card p, .steps p, details p { margin: 0; color: var(--sub); font-size: 16px; }

.card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  & svg { width: 40px; height: 40px; color: var(--orb); }
}

/* 기능: 넓으면 위 2칸 · 아래 3칸, 좁으면 한 줄씩 */
.features { container-type: inline-size; }
.grid { display: grid; gap: 14px; }
@container (width >= 620px) {
  .grid.five { grid-template-columns: repeat(6, 1fr); }
  .grid.five > :nth-child(-n+2) { grid-column: span 3; padding: 32px; }
  .grid.five > :nth-child(n+3) { grid-column: span 2; }
  .grid.four { grid-template-columns: repeat(2, 1fr); }
}

/* 쓰는 법 3단계 */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 28px;
  counter-reset: step;
  & li { counter-increment: step; padding-top: 18px; border-top: 1px solid var(--line); }
  & li::before {
    content: counter(step);
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 15px; font-weight: 700;
    color: var(--ground); background: var(--fg);
  }
  @media (width >= 760px) { grid-template-columns: repeat(3, 1fr); }
}

.more { margin: 22px 0 0; font-size: 16px; }

/* 자주 묻는 질문 */
.faq {
  max-width: 760px;
  border-top: 1px solid var(--line);
  & details { border-bottom: 1px solid var(--line); }
  & summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; gap: 16px;
    padding: 20px 0; font-weight: 600; font-size: 18px;
    &::-webkit-details-marker { display: none; }
    &::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--sub); transition: rotate .25s; }
  }
  & details[open] summary::after { rotate: 45deg; }
  & details p { padding: 0 0 22px; }
}

/* 바닥 */
footer {
  margin-top: clamp(80px, 14vw, 140px);
  padding-block: 32px max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--sub);
  font-size: 14px;
  & nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px; }
  & a { color: var(--fg); text-decoration: none; &:hover { text-decoration: underline; } }
  & p { margin: 4px 0; }
}

/* 스크롤하며 부드럽게 떠오름: 지원하는 브라우저 + 동작 줄이기 꺼짐일 때만 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 24px; } }

/* 처리방침·약관·지원 */
body.doc { --sky-h: 420px; }
article {
  padding-block: 40px 0;
  & h1 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; letter-spacing: -.03em; margin: 0 0 16px; }
  & h2 { font-size: 21px; letter-spacing: -.01em; margin: 44px 0 12px; }
  & li { margin: 6px 0; }
  & ul ul { margin-top: 4px; }
  & .note { padding: 14px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); font-size: 15px; }
}
.table {
  overflow-x: auto; margin: 14px 0;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--glass);
}
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: 11px 13px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { font-weight: 600; }