/* app.css — /app 랜딩 + /join·index 의 스토어 버튼.
   style.css 를 건드리지 않는 별도 레이어. 변수는 style.css :root 를 그대로 쓴다.

   ⚠️ 폭은 두 단계만 쓴다. 요소마다 다른 max-width 를 주면 오른쪽 끝이 들쭉날쭉해
      정렬이 틀어져 보인다(실제로 한 번 그렇게 됐다).
        · 큰 글씨·카드·격자 → 칼럼 전체(.wrap 720px)
        · 작은 글씨(13px 이하)·채팅 목업 → var(--measure)
      새 요소를 넣을 때 임의의 em 값을 쓰지 말고 이 둘 중 하나를 고를 것.

   ⚠️ `class="wrap detail"` 처럼 .wrap 과 겹쳐 쓰는 클래스는 좌우 20px 를 반드시 다시 적는다.
      특이도가 같고 app.css 가 뒤에 로드되므로, 안 적으면 .wrap 의 padding 이 0 으로 덮인다. */

:root {
  --measure: 620px;
}

/* ── 도입부 ─────────────────────────────────── */
.lead {
  padding: 76px 0 60px;
  border-bottom: 1px solid var(--line);
}

.lead .app-icon {
  width: 88px;
  height: 88px;
  border-radius: 21px;
  display: block;
  margin-bottom: 30px;
}

/* 아이콘 → 앱 이름 → 한 줄 설명 순으로 쌓는다.
   상단 브랜드는 회사명(크레스티드랩스)이라, 앱 이름은 여기서 한 번 크게 박아야
   스토어에서 검색할 이름이 기억된다. */
.lead h1 {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.tagline {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.chat-mockup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: var(--measure);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-soft);
}

.chat-row {
  display: grid;
  min-width: 0;
}

.chat-row-bamgu {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.chat-row-continuation {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 40px;
}

.chat-row-user {
  justify-items: end;
}

.chat-avatar {
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
}

.chat-bubble {
  width: fit-content;
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.chat-bubble p + p {
  margin-top: 3px;
}

.chat-bubble-bamgu {
  justify-self: start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  background: var(--bg);
  color: var(--ink);
}

.chat-bubble-user {
  border-bottom-right-radius: 5px;
  background: var(--green);
  color: var(--bg);
}

/* 지원 종 안내 — 5종은 실제로 권장값·성장곡선이 있고, 나머지는 기록만 된다.
   이 구분을 흐리면 과장 표기가 되므로 문구를 임의로 줄이지 말 것. */
.species {
  margin-top: 18px;
  max-width: var(--measure);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.species strong {
  color: var(--ink);
  font-weight: 600;
}

/* 섹션 머리표 — 구분선만으로 부족한 곳의 이정표 */
.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green-dark);
  margin-bottom: 10px;
}

/* ── 스토어 버튼 ─────────────────────────────── */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.store-btn {
  display: inline-block;
  min-width: 176px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  line-height: 1.35;
  transition: opacity 0.12s ease;
}

.store-btn:hover {
  opacity: 0.86;
}

.store-btn .store-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.store-btn .store-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.7;
}

/* 아직 못 받는 스토어 — 링크가 아니라 상태 표시.
   색을 --ink-faint 로 두면 대비 2.5:1 로 AA 미달이라 --ink-soft 를 쓴다. */
.store-btn.is-pending {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: default;
  pointer-events: none;
}

.store-btn.is-pending .store-sub {
  opacity: 1;
}

/* style.css 의 `.hero p`(0,1,1) 같은 규칙에 밀리지 않도록 승격해 둔다. */
.hero p.store-note,
.store-note {
  margin: 14px 0 0;
  max-width: var(--measure);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.hero p.free-note,
.free-note {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-dark);
}

/* ── 회사 대문(/) ───────────────────────────── */
/* 대문은 회사, /app 은 제품. 기능 설명은 전부 /app 에 두고 여기선 반복하지 않는다. */
.company-lead {
  padding: 84px 0 56px;
}

.company-lead h1 {
  font-size: 34px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.company-lead p {
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.85;
  max-width: var(--measure);
}

.works {
  padding: 0 20px 8px;
}

/* 만드는 것 — 지금은 크레톡 하나. 나중에 카드만 하나 더 붙이면 된다. */
.work-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.work-card:hover {
  border-color: var(--green);
  background: var(--bg-soft);
}

.work-card > img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.work-body {
  flex: 1 1 auto;
  min-width: 0;
}

.work-body h2 {
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}

.work-body p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

.work-status {
  margin-top: 7px;
  font-size: 13px;
  color: var(--green-dark);
  font-weight: 600;
}

.work-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--ink-faint);
  font-size: 18px;
}

.work-card:hover .work-arrow {
  color: var(--green-dark);
}

/* ── 스크린샷 ────────────────────────────────── */
/* 세로로 쌓으면 모바일에서 화면 두 개 분량(1,700px)을 먹는다.
   가로 스와이프로 두면 한 화면 안에 들어오고, 넘기는 재미도 생긴다. */
.shots {
  padding: 44px 20px 40px;
}

.shot-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.shot-strip figure {
  flex: 0 0 auto;
  width: 218px;
  margin: 0;
  scroll-snap-align: start;
}

.shot-strip img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.shot-strip figcaption {
  margin-top: 9px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ── 중간 CTA ────────────────────────────────── */
/* 페이지가 길어 위·아래 두 곳만으로는 누를 자리가 부족하다. */
.mid-cta {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 32px 0 36px;
}

.mid-cta p {
  font-size: 16px;
  font-weight: 600;
}

.mid-cta .store-row {
  margin-top: 16px;
}

/* ── 본문 ────────────────────────────────────── */
/* 밴드 = 배경색이 다른 큰 덩어리. 구분선보다 강한 단위 구분을 준다. */
.band {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detail {
  padding: 44px 20px 48px;
}

/* 2×2 — 세로로 길게 늘어놓는 대신 한 화면에 들어오게 한다. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 32px;
}

.feature-grid .cell h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.feature-grid .cell h2 .ico {
  font-size: 16px;
  line-height: 1;
  filter: saturate(0.85);
}

.feature-grid .cell p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
}

/* ── 요금 ────────────────────────────────────── */
.pricing {
  padding: 48px 20px 8px;
}

.pricing h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.plan {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}

.plan.is-paid {
  border-color: var(--green);
}

.plan h3 {
  font-size: 15px;
  margin-bottom: 2px;
}

.plan .price {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 14px;
}

.plan .price-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}

.plan ul {
  margin: 0;
  padding-left: 17px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* 결제 조건 — 법적 고지다. 접거나 숨기지 말 것(다크패턴 '숨은 갱신'에 걸린다).
   대신 글자만 작게 해서 자리를 줄인다. */
.terms {
  margin: 18px 0 0;
  padding: 0 0 0 16px;
  max-width: var(--measure);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.terms li {
  margin-bottom: 6px;
}

.terms li:last-child {
  margin-bottom: 0;
}

/* ── 안내 ────────────────────────────────────── */
.notes {
  margin-top: 44px;
  padding: 32px 20px 44px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.notes .section-label {
  color: var(--ink-faint);
}

.notes p {
  margin-bottom: 8px;
  max-width: var(--measure);
}

.notes p:last-child {
  margin-bottom: 0;
}

/* ── 마무리 ──────────────────────────────────── */
.closing {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 44px 0 52px;
}

.closing > .wrap > p:first-child {
  font-size: 16px;
  margin-bottom: 2px;
}

.trademark {
  font-size: 11px;
  opacity: 0.7;
}

/* ── 반응형 ──────────────────────────────────── */
@media (max-width: 640px) {
  .lead {
    padding: 52px 0 44px;
  }

  .lead h1 {
    font-size: 32px;
  }

  .tagline {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .chat-mockup {
    gap: 9px;
    padding: 14px;
    border-radius: 16px;
  }

  .chat-bubble {
    max-width: 100%;
    padding: 9px 11px;
    font-size: 14px;
  }

  .lead .app-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
  }

  /* 가로 스와이프에서 화면 밖으로 살짝 흘려 "더 있다"를 보이게 한다. */
  .shots {
    padding-right: 0;
  }

  .shot-strip figure {
    width: 196px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .plan {
    padding: 18px;
  }

  .company-lead {
    padding: 56px 0 44px;
  }

  .company-lead h1 {
    font-size: 27px;
  }

  .work-card {
    gap: 13px;
    padding: 18px;
  }

  .work-card > img {
    width: 44px;
    height: 44px;
  }

  .work-arrow {
    display: none;
  }

  .store-btn {
    flex: 1 1 100%;
    min-width: 0;
    text-align: center;
  }
}