/*
 * 너나픽 웹 공용 스타일 — 랜딩(index)과 약관 페이지가 같은 톤을 쓰도록 한 곳에 모았다.
 * 색은 앱의 src/constants/colors.ts와 같은 값이다. 한쪽을 고치면 다른 쪽도 같이 고칠 것.
 * 로고 글꼴/자간은 앱 src/components/Header.tsx의 styles.logo를 따랐다(Medium, 자간 4).
 */

:root {
  --white: #ffffff;
  --powder-blue: #dff0fa;
  --warm-gray: #f2f0ec;
  --deep-warm-gray: #e8e0d0;
  --lemon: #f4f27a;
  --burgundy: #6b1e2a;
  --deep-blue: #1a3a52;
  --sage: #6e8b60;
  --terracotta: #d4853a;
  --pink: #f08eb8; /* 앱 아이콘 색 */
  --ink: #1a1a1a;
  --gray: #777777;
  --hairline: #e4e0d8;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
}

img {
  max-width: 100%;
}

a {
  color: var(--terracotta);
}

/* ---------------------------------------------------------------- 로고 */

.logo {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--deep-blue);
  margin: 0;
}

.logo-sub {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--gray);
  margin: 2px 0 0;
}

/* -------------------------------------------------------------- 공통 틀 */

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 상단 바 — 모든 페이지 공통. 로고를 누르면 홈으로.
   아래 선은 앱 아이콘 색(연핑크) 단색. ★그라데이션은 쓰지 않는다(사용자 지시). */
.topbar {
  background: var(--white);
  border-bottom: 3px solid var(--pink);
}

.topbar .inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar a.home {
  text-decoration: none;
}

.topbar nav {
  display: flex;
  gap: 18px;
  font-size: 13.5px;
}

.topbar nav a {
  color: var(--deep-blue);
  text-decoration: none;
  font-weight: 500;
}

.topbar nav a:hover {
  color: var(--terracotta);
}

/* ---------------------------------------------------------------- 푸터 */

footer.site {
  background: var(--warm-gray);
  margin-top: 72px;
  padding: 40px 0 56px;
  border-top: 3px solid var(--pink);
}

footer.site .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13.5px;
  margin-bottom: 22px;
}

footer.site .links a {
  color: var(--deep-blue);
  text-decoration: none;
  font-weight: 500;
}

footer.site .links a:hover {
  text-decoration: underline;
}

footer.site .biz {
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.9;
}

footer.site .biz b {
  color: var(--ink);
  font-weight: 500;
}

footer.site .copy {
  font-size: 12px;
  color: var(--gray);
  margin-top: 18px;
}

/* ============================================================ 랜딩 전용 */

/* 히어로 — 단색 파우더블루. ★그라데이션은 쓰지 않는다(사용자 지시).
   ★한때 '맛집·카페' 칩(#DFF0FA)이 이 배경과 같은 색이라 묻혀서 배경을 흰색으로 뺐었는데,
   칩 색을 진하게(#A5D8F0) 조정한 뒤로는 파우더블루 위에서도 보인다. 배경을 되돌린다. */
.hero {
  background: var(--powder-blue);
  /* ★"너무 다닥다닥"이라는 폰 확인 피드백 — 히어로 안쪽 간격을 전반적으로 늘렸다 */
  padding: 78px 0 88px;
  text-align: center;
}

/* ★앱 아이콘 실물(assets/icon.png)을 그대로 쓴다. 손으로 그린 대체 도형을 쓰지 말 것 —
   한 번 북마크를 추측해 그렸다가 실제 마크(핑크 바탕에 크림·세이지로 갈라진 북마크)와
   전혀 다른 모양이 나갔다. */
.app-icon {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 28px;
  border-radius: 19px;
  box-shadow: 0 6px 18px rgba(26, 58, 82, 0.14);
}

/* 상단 바의 작은 마크 */
.topbar .app-icon-sm {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex: none;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* ★히어로에서 제일 큰 것은 로고가 아니라 메시지여야 한다.
   예전엔 로고 34px(자간 9px) > 제목 27px 이라 시선이 로고에 붙잡혀 아래로 안 내려갔다.
   히어로의 로고·부제는 걷어냈다 — 브랜드 이름은 상단바와 아이콘이 말해준다. */
.hero h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--deep-blue);
  margin: 0;
  letter-spacing: -0.8px;
}

/*
 * 스토어 배지 — 스토어 관례대로 검은 배지에 로고 + 2줄 글씨.
 *
 * ⚠️출시할 때는 Apple·Google이 배포하는 **공식 배지 이미지로 교체할 것**.
 *   두 회사 모두 브랜드 가이드라인에서 공식 에셋 사용을 요구한다. 여기 SVG는 출시 전
 *   모양을 잡아두려고 그린 근사치다.
 *
 * 출시 방법: .pending 클래스를 떼고 <span>을 <a href="스토어주소">로 바꾼다.
 */
.stores {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

/*
 * 배지 안 글씨는 한 줄.
 * ★폭은 둘을 맞춘다 — 내용 폭에 맡기면 'Google Play'가 'App Store'보다 길어서
 *   나란히·위아래 어느 쪽으로 놓아도 크기가 어긋나 보인다.
 *   다만 예전처럼 172px 씩 벌려두면 글씨 좌우가 텅 비므로, 긴 쪽에 겨우 맞는 값만 준다.
 */
.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 11px;
  background: #1a1a1a;
  color: var(--white);
  text-decoration: none;
  min-width: 168px;
}

.store-btn svg {
  flex: none;
}

.store-btn b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* 출시 전 — 모양은 그대로 두고 눌리지 않게만 한다 */
.store-btn.pending {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* 연결된 배지만 반응한다 — 옆의 흐린 배지와 눌리는 것이 구분돼야 한다 */
a.store-btn:hover {
  background: #000;
}

.stores-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.stores-note .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  flex: none;
}

/* PC 웹 진입점 — 스토어 버튼과 성격이 달라 아래에 액센트 링크로 둔다.
   ★display:flex + width:fit-content + margin auto = 자기 줄로 내려가 가운데 정렬되고,
     border-top이 링크 폭만큼만 짧은 구분선이 된다(히어로 전체 폭으로 안 번진다). */
.web-cta {
  display: flex;
  width: fit-content;
  margin: 22px auto 0;
  padding-top: 16px;
  border-top: 1px solid #e6d8c4;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--terracotta);
  text-decoration: none;
}

.web-cta svg {
  flex: none;
  transition: transform 0.15s ease;
}

.web-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.web-cta:hover svg {
  transform: translateX(3px);
}

/* 섹션 공통 */
.section {
  padding: 76px 0;
}

.section.tinted {
  background: var(--warm-gray);
}

/* 섹션 머리표 — 섹션마다 색을 달리해 스크롤할 때 리듬이 생기게 한다 */
.section h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--terracotta);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.section h2::after {
  content: '';
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  margin-top: 8px;
  opacity: 0.55;
}

.section h2.k-pink {
  color: var(--pink);
}
.section h2.k-sage {
  color: var(--sage);
}
.section h2.k-blue {
  color: var(--deep-blue);
}

.section h3 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--deep-blue);
  margin: 0 0 40px;
  letter-spacing: -0.4px;
}

/* 페인포인트 — 인용 카드 */
.pains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.pain {
  background: var(--white);
  border-radius: 14px;
  padding: 26px 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}

.pain .mark {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--pink);
}

/* 인용부호를 카드마다 다른 카테고리 색으로 — 앱의 카테고리 팔레트를 그대로 쓴다 */
.pain:nth-child(2) .mark {
  color: var(--terracotta);
}
.pain:nth-child(3) .mark {
  color: var(--sage);
}
.pain:nth-child(4) .mark {
  color: var(--deep-blue);
}

/* 히어로 설명 — 처음 온 사람이 한 문장으로 상황을 그릴 수 있게 */
.hero .lead {
  font-size: 16.5px;
  color: #4a5560;
  margin: 26px 0 0;
  line-height: 1.95; /* 두 줄이 붙어 보이지 않게 넉넉히 */
}

/* 핵심 주장 — 자기 줄을 갖고, 앞 문장보다 한 단 진하고 크게 */
.hero .lead-strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--deep-blue);
  margin: 12px 0 0;
  line-height: 1.6;
  letter-spacing: -0.3px;
}

/* 카테고리 칩 — 앱이 무엇으로 갈라 담는지 색으로 바로 보여준다 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 30px;
}

.chip {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--warm-gray);
  white-space: nowrap;
}

/*
 * ★칩 색은 앱 카테고리 색을 **웹용으로 진하게 조정한 값**이다.
 * 앱에서는 카드 배경처럼 넓은 면에 깔려서 파우더블루(#DFF0FA)·웜그레이(#E8E0D0) 같은
 * 파스텔이 먹히지만, 칩처럼 작은 면적에 흰 바탕이면 명도 95%짜리는 그냥 흰색으로 보인다.
 * (실제로 '맛집·카페'가 색이 없다는 폰 확인 피드백이 두 번 나왔다.)
 * 색상(hue)은 그대로 두고 채도·명도만 낮춰 같은 계열로 읽히게 했다.
 */
.chip.cat-food {
  background: #a5d8f0; /* 파우더블루 #DFF0FA 계열 */
}
.chip.cat-place {
  background: #d6c5a0; /* 웜그레이 #E8E0D0 계열 */
}
.chip.cat-fashion {
  background: #6b1e2a; /* 버건디 — 그대로 */
  color: #fff;
}
.chip.cat-beauty {
  background: #9b3a4a; /* 뷰티 — 그대로 */
  color: #fff;
}
.chip.cat-interior {
  background: #eeeb56; /* 레몬 #F4F27A 계열 */
}

/* 기능 — 번호 붙은 3단계 */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.step {
  background: var(--warm-gray);
  border-radius: 16px;
  padding: 30px 26px;
}

.section.tinted .step {
  background: var(--white);
}

.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* 단계마다 색을 바꾼다 — 담기(핑크) → 분류(테라코타) → 꺼내주기(세이지) */
.step .num.n1 {
  background: var(--pink);
}
.step .num.n3 {
  background: var(--sage);
}

.step h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--deep-blue);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 번호가 없는 카드(More 섹션)는 제목 앞에 색 점을 찍어 구분한다.
   ★점이 붙는 카드에만 ::before 를 만든다 — 전체에 걸고 투명으로 두면
   번호 있는 카드의 제목이 9px 씩 밀린다. */
.step.d-pink h4::before,
.step.d-blue h4::before,
.step.d-sage h4::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot);
  flex: none;
}

.step.d-pink {
  --dot: var(--pink);
}
.step.d-blue {
  --dot: var(--deep-blue);
}
.step.d-sage {
  --dot: var(--sage);
}

.step p {
  font-size: 14.5px;
  color: #5a6570;
  margin: 0;
  line-height: 1.7;
}

/* 스크린샷 자리 — 실제 이미지가 들어오면 .shot img 로 교체 */
/* 9장이라 그리드 대신 가로 스와이프 스트립 — 세로 그리드는 폰에서 페이지가 한없이 길어진다.
   스크린샷 자체에 색 배경·문구·폰 프레임이 들어 있어 카드 장식(테두리·그림자)은 안 얹는다. */
.shots {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* 좌우 '벽'(wrap의 24px 여백)을 없앤다 — 스트립만 화면 끝까지 흘려보내되(full-bleed),
     첫 카드는 위 텍스트 마진(24px)과 나란히 시작하게 padding·scroll-padding으로 맞춘다.
     그러면 다음 카드가 화면 가장자리에서 잘려도 벽처럼 보이지 않고 자연스럽게 넘어간다. */
  margin-left: -24px;
  margin-right: -24px;
  padding: 4px 24px 14px;
  scroll-padding-left: 24px;
  /* 화면 양 끝을 부드럽게 흐려서 잘린 카드가 칼로 자른 듯 뚝 끊기지 않게. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.shot {
  flex: 0 0 min(240px, 64vw);
  aspect-ratio: 1284 / 2778;
  scroll-snap-align: start;
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* ======================================================== 약관 페이지 전용 */

.legal-head {
  background: var(--deep-blue);
  color: var(--white);
  padding: 44px 24px;
  text-align: center;
}

.legal-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.legal-head p {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

/* 사업자 정보 카드 — 카카오/스토어 심사에서 바로 보이도록 본문 위에 */
.biz-card {
  background: var(--warm-gray);
  border-left: 3px solid var(--deep-blue);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 28px 0 8px;
}

.biz-card .run {
  font-size: 13.5px;
  margin: 0 0 14px;
  font-weight: 600;
}

.biz-card .run b {
  color: var(--burgundy);
}

.biz-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  margin: 0;
}

.biz-card dt {
  font-size: 12.5px;
  color: var(--deep-blue);
  font-weight: 600;
  white-space: nowrap;
}

.biz-card dd {
  font-size: 12.5px;
  margin: 0;
}

/* 목차 */
.toc {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 24px 0 8px;
}

.toc strong {
  display: block;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--terracotta);
  margin-bottom: 10px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.toc a {
  color: var(--deep-blue);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* 본문 */
.legal-body {
  padding: 16px 0 40px;
}

.legal-doc {
  padding-top: 28px;
}

.legal-doc + .legal-doc {
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
}

.legal-doc > h1 {
  font-size: 21px;
  font-weight: 600;
  color: var(--deep-blue);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--deep-blue);
}

.legal-doc h2 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--deep-blue);
  margin: 34px 0 10px;
}

.legal-doc h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 8px;
}

/* 국외 이전 고지처럼 수탁사별로 끊어 보여주는 블록 — 왼쪽 선으로 묶어 준다 */
.legal-doc h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--deep-blue);
  margin: 20px 0 6px;
  padding: 6px 12px;
  background: var(--warm-gray);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 6px 6px 0;
}

.legal-doc p {
  font-size: 14.5px;
  margin: 0 0 14px;
}

.legal-doc ul,
.legal-doc ol {
  font-size: 14.5px;
  padding-left: 22px;
  margin: 0 0 14px;
}

.legal-doc li {
  margin-bottom: 7px;
}

.legal-doc li > ul,
.legal-doc li > ol {
  margin: 7px 0 0;
}

/* 표 — 좁은 화면에서는 가로 스크롤(본문이 밀리지 않게) */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 16px;
  -webkit-overflow-scrolling: touch;
}

.legal-doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 13px;
}

.legal-doc th,
.legal-doc td {
  border: 1px solid var(--hairline);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.legal-doc th {
  background: var(--warm-gray);
  color: var(--deep-blue);
  font-weight: 600;
  white-space: nowrap;
}

/* ==================================================== 계정 삭제 안내 전용 */

.step-box {
  background: var(--warm-gray);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
  font-size: 14.5px;
}

.step-box b {
  color: var(--deep-blue);
}

.note {
  font-size: 13px;
  color: var(--gray);
}

/* ------------------------------------------------------------ 좁은 화면 */

@media (max-width: 600px) {
  .hero {
    padding: 60px 0 66px;
  }
  /* 폰에서도 제목이 가장 커야 한다 */
  .hero h1 {
    font-size: 27px;
    margin: 0;
  }
  .app-icon {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    margin-bottom: 22px;
  }
  .hero .lead {
    font-size: 15px;
    margin-top: 18px;
  }
  .hero .lead-strong {
    font-size: 16.5px;
    margin-top: 10px;
  }
  .chips {
    gap: 7px;
    margin-top: 22px;
  }
  .chip {
    font-size: 12.5px;
    padding: 6px 13px;
  }
  .store-btn b {
    font-size: 14px;
  }
  .stores-note {
    font-size: 11.5px;
  }
  .section {
    padding: 56px 0;
  }
  .section h3 {
    font-size: 21px;
    margin-bottom: 30px;
  }
  /* 폰에서는 배지를 위아래로. ★폭을 100%로 늘리면 글씨 좌우가 텅 비어 허전하므로
     세로로만 쌓고 폭은 내용에 맞춘다. */
  .stores {
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
  }
  /* 상단 바 — 한 줄 유지가 목적. 로고·간격·글씨를 같이 줄인다 */
  .topbar .inner {
    padding: 13px 16px;
    gap: 10px;
  }
  .topbar .logo {
    font-size: 15px;
    letter-spacing: 2.5px;
  }
  .topbar .app-icon-sm {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }
  .topbar .brand {
    gap: 8px;
  }
  .topbar nav {
    gap: 11px;
    font-size: 12px;
  }
  .topbar nav a {
    white-space: nowrap;
  }
}