/* ============================================================
   데어무드 · 모청스냅 랜딩

   홈(mcards/dev.css)·샘플(mcards/sample-dev.css)과 같은 디자인 언어를 쓰되
   파일은 독립이다. 토큰만 복제하고 컴포넌트는 이 페이지 전용(.sn-*)으로 둔다.
   → 홈 CSS를 고쳐도 이 페이지가 깨지지 않는다.

   0) 토큰 / 기본
   1) 공통 컴포넌트 (.sn-head / .sn-title / .sn-check / .sn-btn)
   2) 히어로
   3) 문제 제기 (다크)
   4) 하객의 시선
   5) 3스텝 + 드라이브 결과
   6) 가치 3카드
   7) 추천 대상
   8) CTA
   9) FAQ
   10) 플로팅 도크
   11) 모바일 (~900px)
   ============================================================ */


/* ---------------- 0) 토큰 / 기본 ---------------- */

:root {
    --sn-bg:      #F9F7F6;
    --sn-surface: #FFFFFF;
    --sn-tint:    #F1EDE9;
    --sn-ink:     #17171A;
    --sn-ink-2:   rgba(60, 60, 67, 0.72);
    --sn-ink-3:   rgba(60, 60, 67, 0.50);
    --sn-line:    rgba(60, 60, 67, 0.10);
    --sn-accent:  #007AFF;
    --sn-point:   #FDD835;

    /* 틴트 띠(#F1EDE9) 전용. 페이지 배경보다 어두워서 ink-2(0.72)는 4.37:1로 AA 미달이라
       본문 잉크를 0.80(5.41:1)으로 올려 쓴다. 구분선도 같은 이유로 조금 진하다. */
    --sn-ink-tint:  rgba(60, 60, 67, 0.80);
    --sn-tint-line: rgba(60, 60, 67, 0.14);

    --sn-r-lg: 28px;
    --sn-r-md: 20px;
    --sn-r-sm: 14px;

    --sn-shadow: 0 1px 2px rgba(60, 60, 67, 0.05), 0 20px 40px -30px rgba(60, 60, 67, 0.45);

    --sn-sec-gap: 140px;
    --sn-content: 1000px;
}

body, html {
    background: var(--sn-bg) !important;
}

h1, h2, h3, p, ul, ol, li, figure {
    margin: 0;
    padding: 0;
}
ul, ol { list-style: none; }
img { max-width: 100%; }

/* 섹션 간격은 마진 병합 사고를 피하려고 패딩으로만 준다 */
.sn-sec {
    padding: calc(var(--sn-sec-gap) / 2) 0;
}
.sn-sec:first-of-type {
    padding-top: 72px;
}

.sn-wrap {
    width: min(var(--sn-content), 100% - 48px);
    margin: 0 auto;
}
.sn-wrap.narrow {
    width: min(800px, 100% - 48px);
}

/* 모바일에서만 살아나는 줄바꿈 / PC에서만 살아나는 줄바꿈 */
.mo-only { display: none; }
.pc-only { display: inline; }


/* ---------------- 1) 공통 컴포넌트 ---------------- */

.sn-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* margin 단축을 쓰면 안 된다 — `margin: 0 auto`는 margin-top:0 까지 세팅하는데
   이 선택자가 클래스 2개(0-2-0)라 뒤에 오는 `.sn-diff-sub { margin-top: 100px }`(0-1-0)를
   순서와 무관하게 이겨버린다. 가로 가운데 정렬만 필요하므로 좌우만 건드린다. */
.sn-head.center {
    align-items: center;
    text-align: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.sn-eyebrow {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--sn-line);
    color: var(--sn-ink-2);
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    letter-spacing: var(--ls-13);
    font-weight: 700;
    white-space: nowrap;
    user-select: none;
}
.sn-head.center .sn-eyebrow {
    align-self: center;
}

.sn-title {
    color: var(--sn-ink);
    font-size: var(--fs-40);
    line-height: var(--lh-40);
    letter-spacing: var(--ls-40);
    font-weight: 700;
}
.sn-subtitle {
    color: var(--sn-ink);
    font-size: var(--fs-28);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-28);
    font-weight: 700;
}
.sn-lead {
    color: var(--sn-ink-2);
    font-size: var(--fs-16);
    line-height: 1.75;
    letter-spacing: var(--ls-16);
    font-weight: 500;
}
.sn-lead b {
    color: var(--sn-ink);
    font-weight: 700;
}
.sn-tag {
    align-self: flex-start;
    color: var(--sn-accent);
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    letter-spacing: var(--ls-15);
    font-weight: 700;
}

/* 체크 리스트 — ✓는 절대위치로 빼고 본문은 흐르게 둔다(행잉 인덴트).
   grid로 짜면 li 안의 <b>가 별도 그리드 아이템이 되어 줄이 끊긴다. */
.sn-check {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sn-check li {
    position: relative;
    padding-left: 26px;
    color: var(--sn-ink-2);
    font-size: var(--fs-15);
    line-height: 1.6;
    letter-spacing: var(--ls-15);
    font-weight: 500;
}
.sn-check li b {
    color: var(--sn-ink);
    font-weight: 700;
}
.sn-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    color: var(--sn-ink);
    font-weight: 700;
    line-height: inherit;
}

/* 버튼 */
.sn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 54px;
    padding: 0 26px;
    border-radius: 14px;
    white-space: nowrap;
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sn-btn svg { flex: none; }
.sn-btn.primary {
    background: var(--sn-point);
    color: var(--sn-ink);
    box-shadow: 0 8px 22px -8px rgba(253, 216, 53, 0.95);
}
.sn-btn.ghost {
    background: var(--sn-surface);
    border: 1px solid var(--sn-line);
    color: var(--sn-ink);
    box-shadow: 0 1px 2px rgba(60, 60, 67, 0.05);
}
.sn-btn:hover { transform: translateY(-1px); }


/* ---------------- 2) 히어로 ---------------- */

/* 목업은 원본부터 폰 아래쪽이 잘려 있는 이미지다. 아래 여백을 두면 잘린 단면이
   허공에 뜬 것처럼 보이므로 섹션 바닥에 딱 붙여 다음 섹션으로 이어지게 만든다. */
.sn-hero {
    padding-bottom: 0;
}
.sn-hero .sn-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.sn-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.sn-hero-title {
    color: var(--sn-ink);
    font-size: var(--fs-50);
    line-height: var(--lh-50);
    letter-spacing: var(--ls-50);
    font-weight: 700;
}
/* 훅 앞의 한 박자. 본문보다 작게 두어 "결혼식 날," 이 제목을 잡아먹지 않게 한다. */
.sn-hero-title-sm {
    display: block;
    margin-bottom: 6px;
    color: rgba(60, 60, 67, 0.40);
    font-size: var(--fs-26);
    line-height: var(--lh-26);
    letter-spacing: var(--ls-26);
    font-weight: 700;
}
.sn-hero-lead {
    color: var(--sn-ink-2);
    font-size: var(--fs-18);
    line-height: 1.7;
    letter-spacing: var(--ls-18);
    font-weight: 500;
}
.sn-hero-lead b {
    color: var(--sn-ink);
    font-weight: 700;
}
.sn-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}
/* 가입·설치가 없다는 사실이 이 서비스 최대의 진입장벽 해소라 히어로에 둔다 */
.sn-hero-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding-top: 4px;
    /* ink-3(0.50)은 페이지 배경 위 2.64:1로 AA 미달. 읽어야 할 정보라 ink-2(4.58:1). */
    color: var(--sn-ink-2);
    font-size: var(--fs-14);
    line-height: var(--lh-14);
    letter-spacing: var(--ls-14);
    font-weight: 600;
}
.sn-hero-facts li {
    position: relative;
    padding-left: 15px;
}
.sn-hero-facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px; height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--sn-point);
}
/* align-self:end 라야 그리드 행 안에서 이미지가 바닥에 닿는다.
   (부모의 align-items:center 는 카피 쪽에만 계속 적용된다) */
.sn-hero-visual {
    display: flex;
    justify-content: center;
    align-self: end;
}
/* display:block 필수 — inline 이면 baseline 아래 여백이 생겨 바닥에 붙지 않는다.
   drop-shadow 도 뺐다. 원본 PNG에 이미 그림자가 구워져 있어 이중으로 겹치고,
   패딩이 0이라 아래로 번진 그림자가 다음 다크 섹션을 침범한다. */
.sn-hero-visual img {
    display: block;
    width: 100%;
    max-width: 520px;
}


/* ---------------- 3) 문제 제기 (틴트) ---------------- */

/* 검은 띠 대신 따뜻한 틴트 한 겹.
   페이지 전체가 '연한 배경 + 흰 카드' 구성이라, 배경색만 바꿔도
   "잠깐 멈춰 생각하는 지면"으로 충분히 구분된다. 대비로 때리지 않아도 된다.

   그리고 여기서는 카드를 쓰지 않는다 — 뒤따르는 세 섹션이 전부 흰 카드라
   같은 조형을 반복하면 이 구간만의 성격이 사라진다. 구분선만 긋는 편집 지면 방식. */
.sn-problem {
    background: var(--sn-tint);
}
.sn-problem .sn-lead {
    color: var(--sn-ink-tint);
}
.sn-problem .sn-lead b {
    color: var(--sn-ink);
}
.sn-problem-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 56px;
    border-top: 1px solid var(--sn-tint-line);
}
.sn-problem-list li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 28px;
    border-left: 1px solid var(--sn-tint-line);
}
/* 양 끝 칸은 안쪽 여백만 남기고 바깥으로 붙여, 세로선이 본문 폭과 정확히 맞게 한다 */
.sn-problem-list li:first-child {
    border-left: 0;
    padding-left: 0;
}
.sn-problem-list li:last-child {
    padding-right: 0;
}
.sn-problem-list li b {
    color: var(--sn-ink);
    font-size: var(--fs-18);
    line-height: 1.45;
    letter-spacing: var(--ls-18);
    font-weight: 700;
}
.sn-problem-list li span {
    color: var(--sn-ink-tint);
    font-size: var(--fs-15);
    line-height: 1.65;
    letter-spacing: var(--ls-15);
    font-weight: 500;
}
.sn-problem-close {
    margin-top: 44px;
    text-align: center;
    color: var(--sn-ink);
    font-size: var(--fs-20);
    line-height: var(--lh-20);
    letter-spacing: var(--ls-20);
    font-weight: 600;
}
/* 밝은 배경에서 노란 '글자'는 대비가 안 나온다(다크 띠에서 쓰던 수법).
   그래서 글자는 잉크로 두고 노랑은 형광펜처럼 아래에 깐다 — 잉크 기준 13.75:1. */
.sn-problem-close b {
    font-weight: 700;
    background: linear-gradient(to top, rgba(253, 216, 53, 0.55) 42%, transparent 42%);
}


/* ---------------- 4) 하객의 시선 ---------------- */

.sn-diff-hero {
    margin-top: 56px;
    border-radius: var(--sn-r-lg);
    overflow: hidden;
    box-shadow: var(--sn-shadow);
}
.sn-diff-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 34 / 17;
    object-fit: cover;
}
.sn-diff-sub {
    margin-top: 100px;
}
.sn-moment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}
.sn-moment-grid li {
    position: relative;
    border-radius: var(--sn-r-md);
    overflow: hidden;
    box-shadow: var(--sn-shadow);
}
.sn-moment-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 33 / 41;
    object-fit: cover;
}
/* 사진 위 흰 글씨. 전면 오버레이를 덮으면 사진이 죽으므로
   하단에서만 올라오는 그라데이션으로 필요한 만큼만 어둡게 한다.
   기울기는 대비로 정했다 — 밝은 사진(#E0E0E0 가정) 위에서 흰 18px 볼드가 AA(4.5:1)를
   넘으려면 검정 50% 이상이 깔려야 한다. 글자 최상단이 놓이는 지점(아래에서 약 58%)의
   농도가 0.58이 되도록 정지점을 62%에 두었다 → 6.5:1. */
.sn-moment-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 48px 22px 22px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.58) 62%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    font-size: var(--fs-18);
    line-height: 1.4;
    letter-spacing: var(--ls-18);
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}


/* ---------------- 5) 3스텝 + 드라이브 결과 ---------------- */

.sn-step-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 56px;
}
.sn-step {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 420px;
    background: var(--sn-surface);
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-lg);
    box-shadow: var(--sn-shadow);
    overflow: hidden;
}
/* 짝수 스텝은 좌우를 뒤집는다. 세 장이 같은 방향으로 쌓이면 스크롤이 단조롭다. */
.sn-step:nth-child(2n) .sn-step-copy   { order: 2; }
.sn-step:nth-child(2n) .sn-step-visual { order: 1; }

.sn-step-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 56px 48px;
}
.sn-step-no {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sn-step-no em {
    font-style: normal;
    color: var(--sn-ink);
    font-size: var(--fs-16);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 800;
}
.sn-step-no span {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--sn-tint);
    color: var(--sn-ink-2);
    font-size: var(--fs-12);
    line-height: 1;
    letter-spacing: var(--ls-12);
    font-weight: 700;
}
.sn-step-title {
    color: var(--sn-ink);
    font-size: var(--fs-28);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-28);
    font-weight: 700;
}
.sn-step-desc {
    color: var(--sn-ink-2);
    font-size: var(--fs-16);
    line-height: 1.7;
    letter-spacing: var(--ls-16);
    font-weight: 500;
}
.sn-step-desc b {
    color: var(--sn-ink);
    font-weight: 700;
}
/* 폰 목업은 아래가 열린 형태라 바닥에 붙인다.
   .center 는 폰이 아닌 비주얼(두 경로 카드)용 — 위아래 가운데. */
/* overflow:hidden 이 필요한 이유 — 클리핑이 바깥 .sn-step 에만 걸려 있으면
   폰 그림자가 틴트 패널 경계를 넘어 흰 카피 영역까지 번진다.
   비주얼 칸 자체에서 잘라야 그림자가 이 패널 안에만 머문다. */
.sn-step-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 40px 40px 0;
    background: var(--sn-tint);
    overflow: hidden;
}
.sn-step-visual.center {
    align-items: center;
    padding: 40px;
}


/* ── 폰 프레임 (01 · 03 공용) ──
   이미지가 아니라 마크업이다. 어떤 해상도에서도 선명하고,
   제품 UI 문구가 바뀌면 여기서 바로 고칠 수 있다. */
/* 화면 UI 글자가 8~13px이라 프레임을 더 줄이면 뭉개진다. 256px이 하한선.
   프레임만 줄고 내부 글자는 그대로라, 오히려 축소 UI가 조금 더 읽힌다. */
.sn-phone {
    width: 100%;
    max-width: 256px;
    border: 8px solid #17171A;
    border-bottom: 0;
    border-radius: 32px 32px 0 0;
    background: #fff;
    /* 아래로 깊게 떨어지는 그림자는 바닥 클리핑에 다 잘려 리프트가 사라진다.
       옆으로 퍼지는 형태라야 잘린 뒤에도 떠 있는 느낌이 남는다. */
    box-shadow: 0 10px 34px -12px rgba(60, 60, 67, 0.42);
    overflow: hidden;
    user-select: none;
}
.sn-phone-top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}
.sn-phone-top i {
    width: 84px; height: 17px;
    border-radius: 999px;
    background: #17171A;
}
.sn-phone-screen {
    display: flex;
    flex-direction: column;
}

/* ── 01 · 제작 화면의 모청스냅 탭 ── */
.sn-edit {
    background: #F4F4F5;
    padding-bottom: 4px;
}
.sn-edit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 12px;
    background: #fff;
}
.sn-edit-bar > b {
    color: #17171A;
    font-size: 13px;
    line-height: 1;
    letter-spacing: -0.4px;
    font-weight: 800;
}
.sn-edit-bar > b em {
    font-style: normal;
    color: var(--sn-ink-3);
}
.sn-edit-save {
    padding: 5px 11px;
    border-radius: 999px;
    background: #3B3B3B;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}
.sn-edit-card {
    margin: 8px;
    padding: 13px;
    border-radius: 12px;
    background: #fff;
}
.sn-edit-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(60, 60, 67, 0.08);
    color: #17171A;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}
/* 활성 상태를 알리는 초록 체크 — 제품 화면과 같은 신호 */
.sn-ok {
    flex: none;
    position: relative;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #22C55E;
}
.sn-ok::before {
    content: "";
    position: absolute;
    left: 4px; top: 5px;
    width: 6px; height: 3px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg);
}
.sn-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
}
.sn-edit-label {
    flex: none;
    color: var(--sn-ink-2);
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}
.sn-edit-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid rgba(60, 60, 67, 0.14);
    border-radius: 7px;
    text-align: center;
    color: #17171A;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}
.sn-edit-note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(60, 60, 67, 0.08);
}
.sn-edit-note b {
    color: #17171A;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
}
.sn-edit-note p {
    color: var(--sn-ink-2);
    font-size: 10px;
    line-height: 1.55;
    font-weight: 500;
}
.sn-edit-note mark {
    background: none;
    color: #F57F16;
    font-weight: 600;
}

/* ── 02 · 두 경로 ── */
.sn-routes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 420px;
    user-select: none;
}
.sn-route {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.sn-route-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
}
.sn-route-name {
    color: var(--sn-ink);
    font-size: var(--fs-14);
    line-height: 1.3;
    letter-spacing: var(--ls-14);
    font-weight: 700;
}
.sn-route-sub {
    color: var(--sn-ink-2);
    font-size: var(--fs-12);
    line-height: 1.3;
    letter-spacing: var(--ls-12);
    font-weight: 500;
}

/* 경로 A : 모바일청첩장 (세로 카드) */
.sn-invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 78%;
    height: 100%;
    padding: 16px 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px -12px rgba(60, 60, 67, 0.5);
}
/* 7~9px 축소 UI라 ink-3(2.69:1)로는 뭉개진다. 목업이라도 읽히긴 해야 해서 ink-2. */
.sn-invite-eyebrow {
    color: var(--sn-ink-2);
    font-size: 7px;
    line-height: 1;
    letter-spacing: 1.2px;
    font-weight: 600;
}
.sn-invite-name {
    color: #17171A;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}
.sn-invite-name i {
    font-style: normal;
    color: var(--sn-ink-3);
    font-weight: 400;
}
.sn-invite-div {
    width: 22px; height: 1px;
    background: rgba(60, 60, 67, 0.16);
}
.sn-invite p {
    color: var(--sn-ink-2);
    font-size: 9px;
    line-height: 1.5;
    font-weight: 500;
}
.sn-invite-btn {
    margin-top: 2px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sn-point);
    color: #17171A;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

/* 경로 B : 식사권 (가로 카드) */
.sn-ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 8px;
    width: 100%;
    padding: 16px 14px;
    border-radius: 8px;
    background: #FCFBF9;
    box-shadow: 0 10px 24px -12px rgba(60, 60, 67, 0.5);
    transform: rotate(-3deg);
}
.sn-ticket-title {
    color: #17171A;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -0.4px;
    font-weight: 700;
}
/* 진짜로 스캔되는 QR. qr.svg 는 BaconQrCode 로 생성했고
   quiet zone 4모듈이 viewBox 안에 포함돼 있어 여백을 따로 주지 않는다. */
.sn-ticket-qr {
    grid-row: 1 / 3;
    grid-column: 2;
    width: 54px; height: 54px;
    background: url('/app/landing/snap/images/qr.svg') no-repeat center / contain;
}
.sn-ticket-note {
    grid-column: 1;
    color: var(--sn-ink-2);
    font-size: 7.5px;
    line-height: 1.5;
    font-weight: 500;
}

/* ── 03 · 하객이 보는 업로드 화면 ── */
.sn-snap {
    align-items: center;
    gap: 9px;
    padding: 34px 22px 40px;
    text-align: center;
    background: #FCFBFA;
}
.sn-snap-eyebrow {
    color: var(--sn-ink-2);
    font-size: 8px;
    line-height: 1;
    letter-spacing: 2.4px;
    font-weight: 600;
}
.sn-snap-title {
    color: #17171A;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.6px;
    font-weight: 700;
}
.sn-snap-lead {
    color: var(--sn-ink-2);
    font-size: 10px;
    line-height: 1.65;
    font-weight: 500;
}
.sn-snap-btn {
    margin-top: 6px;
    padding: 11px 34px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(60, 60, 67, 0.14);
    color: #17171A;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}
.sn-snap-meta {
    color: var(--sn-ink-2);
    font-size: 8.5px;
    line-height: 1.4;
    font-weight: 500;
}

/* 3스텝의 결말 — 이미지가 아니라 CSS로 그린 드라이브 목록.
   항상 선명하고, 폴더명·장수 문구를 자유롭게 고칠 수 있다. */
.sn-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin-top: 24px;
    padding: 56px 48px;
    background: var(--sn-surface);
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-lg);
    box-shadow: var(--sn-shadow);
}
.sn-result-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.sn-drive {
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-md);
    background: var(--sn-bg);
    overflow: hidden;
}
.sn-drive-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sn-line);
    background: var(--sn-surface);
    color: var(--sn-ink-2);           /* ink-3은 흰 배경 위 2.69:1로 AA 미달 */
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    letter-spacing: var(--ls-12);
    font-weight: 600;
}
.sn-drive-bar b {
    margin-left: 8px;
    font-weight: 600;
}
.sn-drive-dot {
    flex: none;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(60, 60, 67, 0.16);
}
.sn-drive-list {
    display: flex;
    flex-direction: column;
    padding: 8px;
}
.sn-drive-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    color: var(--sn-ink);
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    letter-spacing: var(--ls-15);
    font-weight: 600;
}
.sn-drive-list li:nth-child(2n) {
    background: rgba(255, 255, 255, 0.72);
}
/* 폴더 아이콘 — 탭이 달린 사각형 하나면 충분해서 SVG를 따로 두지 않는다 */
.sn-drive-list i {
    position: relative;
    display: block;
    width: 20px; height: 15px;
    border-radius: 3px;
    background: var(--sn-point);
}
.sn-drive-list i::before {
    content: "";
    position: absolute;
    left: 0; top: -4px;
    width: 9px; height: 5px;
    border-radius: 2px 2px 0 0;
    background: var(--sn-point);
}
.sn-drive-list em {
    font-style: normal;
    color: var(--sn-ink-2);           /* 위와 같은 이유 — ink-3은 2.64:1 */
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    letter-spacing: var(--ls-13);
    font-weight: 500;
}


/* ---------------- 6) 가치 3카드 ---------------- */

.sn-value-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 56px;
}
.sn-value-list > li {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 28px;
    background: var(--sn-surface);
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-md);
    box-shadow: 0 1px 2px rgba(60, 60, 67, 0.04);
    color: var(--sn-ink);          /* svg가 currentColor로 따라온다 */
}
.sn-value-list > li > svg { flex: none; }
.sn-value-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sn-value-emp {
    color: var(--sn-ink);
    font-size: var(--fs-18);
    line-height: 1.45;
    letter-spacing: var(--ls-18);
    font-weight: 700;
}


/* ---------------- 7) 추천 대상 ---------------- */

.sn-fit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 56px;
}
.sn-fit-list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 22px 20px;
    background: var(--sn-surface);
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-md);
    box-shadow: 0 1px 2px rgba(60, 60, 67, 0.04);
}

.sn-fit-list .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sn-fit-list .icon img {
    width: 24px;
    user-select: none;
}
.sn-fit-list .note {
    color: var(--sn-ink);
    font-size: var(--fs-16);
    line-height: 1.5;
    letter-spacing: var(--ls-16);
    font-weight: 600;
}


/* ---------------- 8) CTA ---------------- */

/* 카드가 아니라 페이지 위에 그냥 얹힌 문장. 배경·테두리·그림자 없음.
   (플로팅 도크가 이 박스를 IntersectionObserver로 관찰해 숨는다 — index.js) */
.sn-cta-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.sn-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 12px;
}


/* ---------------- 9) FAQ ---------------- */

.sn-faq .sn-head {
    margin-bottom: 24px;
}
/* FAQ 다음으로 이어지는 기능 명세 링크 */
.sn-faq-more {
    margin: 28px 0 0;
    text-align: center;
    font-size: var(--fs-15);
    letter-spacing: var(--ls-15);
}
.sn-faq-more a {
    color: var(--sn-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.qna-list {
    display: flex;
    flex-direction: column;
}
.qna-list > li {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-bottom: 1px solid rgba(84, 84, 86, 0.18);
}
.qna-list > li .link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 8px 20px 8px;
    cursor: pointer;
}
.qna-list > li .link .title {
    display: flex;
    gap: 12px;
    align-items: center;
    user-select: none;
    min-width: 0;
}
.qna-list > li .link .title.column {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}
.qna-list > li .link .title .txt {
    width: 100%;
    color: var(--sn-ink);
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    font-weight: 600;
    text-align: left;
}
.qna-list > li .link .right {
    display: flex;
    align-items: center;
    flex: none;
    color: var(--sn-ink-3);
    user-select: none;
}
.qna-list > li .link .right img {
    width: 20px;
    transition: transform 0.3s ease-in-out;
}
.qna-list > li .contents {
    display: none;
    width: 100%;
    padding: 0 60px 24px 8px;
    color: var(--sn-ink-2);
    font-size: var(--fs-16);
    line-height: 1.75;
    letter-spacing: var(--ls-16);
    text-align: left;
}
.qna-list > li .contents b {
    color: var(--sn-ink);
    font-weight: 700;
}
/* 체크박스 아코디언 */
.qna-list .toggle-checkbox:checked + .link + .contents {
    display: flex;
    flex-direction: column;
}
.qna-list > li .toggle-checkbox:checked + .link .right img {
    transform: rotate(180deg);
}


/* ---------------- 10) 플로팅 도크 ---------------- */

/* PC : 화면 하단 가운데 떠 있는 알약. 너비를 fit-content로 두는 이유 —
   전폭으로 깔면 우하단 FAQ 런처(right:30 / bottom:30)와 겹친다. */
.sn-float {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 0 24px calc(24px + env(safe-area-inset-bottom));
    pointer-events: none;          /* 여백 영역 클릭은 뒤로 통과 */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .28s ease;
}
.sn-float.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.sn-float-inner {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 12px 12px 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--sn-line);
    box-shadow: 0 2px 6px rgba(60, 60, 67, 0.06), 0 18px 40px -18px rgba(60, 60, 67, 0.5);
}
.sn-float-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}
.sn-float-copy strong {
    color: var(--sn-ink);
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    letter-spacing: var(--ls-15);
    font-weight: 700;
}
/* 홈 도크(.ld_float_copy span)는 ink-3을 쓰지만 반투명 유리 위 2.66:1로 AA 미달이다.
   12px 보조 문구라 더 불리해서 여기서는 ink-2(4.66:1)로 올렸다. */
.sn-float-copy span {
    color: var(--sn-ink-2);
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    letter-spacing: var(--ls-12);
    font-weight: 500;
}
.sn-float-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sn-float-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    letter-spacing: var(--ls-15);
    font-weight: 700;
    transition: transform .15s ease;
}
.sn-float-btn svg { flex: none; }
.sn-float-btn.ghost {
    background: transparent;
    border: 1px solid var(--sn-line);
    color: var(--sn-ink-2);
}
.sn-float-btn.primary {
    background: var(--sn-point);
    color: var(--sn-ink);
    box-shadow: 0 6px 16px -6px rgba(253, 216, 53, 0.95);
}
.sn-float-btn:hover {
    transform: translateY(-1px);
}

/* 푸터 아래 여백은 두지 않는다 — 도크가 최종 CTA(.sn-cta-box)에 닿는 순간부터
   문서 끝까지 숨겨지므로(index.js) 푸터와 겹치지 않는다. */

@media (prefers-reduced-motion: reduce) {
    .sn-float,
    .sn-float-btn,
    .sn-btn { transition: none; }
}


/* ============================================================
   11) 모바일 (~900px)
   ============================================================ */

@media only screen and (max-width: 900px) {

    :root {
        --sn-sec-gap: 96px;
        --sn-r-lg: 20px;
        --sn-r-md: 16px;
    }

    .mo-only { display: inline; }
    .pc-only { display: none; }

    .sn-wrap,
    .sn-wrap.narrow {
        width: 100%;
        padding: 0 16px;
    }
    .sn-sec:first-of-type {
        padding-top: 32px;
    }

    .sn-title {
        font-size: var(--fs-28);
        line-height: var(--lh-28);
        letter-spacing: var(--ls-28);
    }
    .sn-subtitle {
        font-size: var(--fs-22);
        line-height: var(--lh-22);
        letter-spacing: var(--ls-22);
    }
    .sn-lead {
        font-size: var(--fs-15);
        letter-spacing: var(--ls-15);
    }
    .sn-btn {
        height: 50px;
        font-size: var(--fs-15);
        letter-spacing: var(--ls-15);
    }

    /* 히어로 : 카피 → 이미지 순으로 쌓고 가운데 정렬 */
    .sn-hero .sn-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .sn-hero-copy {
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    /* .sn-eyebrow 의 align-self:flex-start 가 부모의 align-items:center 를 무시한다.
       자식 쪽에서 되돌려야 가운데로 온다. */
    .sn-hero-copy .sn-eyebrow {
        align-self: center;
    }
    .sn-hero-title {
        font-size: var(--fs-32);
        line-height: var(--lh-32);
        letter-spacing: var(--ls-32);
    }
    .sn-hero-title-sm {
        font-size: var(--fs-18);
        line-height: var(--lh-18);
        letter-spacing: var(--ls-18);
    }
    .sn-hero-lead {
        font-size: var(--fs-15);
        letter-spacing: var(--ls-15);
    }
    /* 전폭 버튼은 쓰지 않는다. 대신 min-width 로 두 버튼 폭을 맞춰
       세로로 쌓아도 들쭉날쭉해 보이지 않게 한다(두 라벨 다 200px 안에 들어온다). */
    .sn-hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .sn-hero-actions .sn-btn,
    .sn-cta-actions .sn-btn {
        width: auto;
        min-width: 200px;
        height: 44px;
    }
    .sn-hero-facts { justify-content: center; }
    .sn-hero-visual img {
        max-width: 340px;
        filter: drop-shadow(0 24px 36px rgba(60, 60, 67, 0.24));
    }

    /* 문제 제기 : 세로선 3열 → 가로선 1열. 구분선 방향만 바꾸면 된다. */
    .sn-problem-list {
        grid-template-columns: 1fr;
        margin-top: 32px;
        border-top: 0;
    }
    .sn-problem-list li,
    .sn-problem-list li:first-child,
    .sn-problem-list li:last-child {
        gap: 6px;
        padding: 20px 0;
        border-left: 0;
        border-top: 1px solid var(--sn-tint-line);
    }
    .sn-problem-list li b {
        font-size: var(--fs-16);
        letter-spacing: var(--ls-16);
    }
    .sn-problem-list li span {
        font-size: var(--fs-14);
        letter-spacing: var(--ls-14);
    }
    .sn-problem-close {
        margin-top: 28px;
        font-size: var(--fs-16);
        line-height: 1.5;
        letter-spacing: var(--ls-16);
    }

    /* 하객의 시선 : 큰 사진은 4:3으로, 3장은 2열 + 마지막 전폭 */
    .sn-diff-hero {
        margin-top: 36px;
    }
    .sn-diff-hero img {
        aspect-ratio: 4 / 3;
    }
    .sn-diff-sub {
        margin-top: 64px;
    }
    .sn-moment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 28px;
    }
    .sn-moment-grid li:last-child {
        grid-column: 1 / -1;
    }
    .sn-moment-grid li:last-child img {
        aspect-ratio: 33 / 22;
    }
    .sn-moment-cap {
        padding: 40px 14px 14px;
        font-size: var(--fs-15);
        letter-spacing: var(--ls-15);
    }

    /* 3스텝 : 항상 비주얼 먼저, 카피 다음. PC의 좌우반전은 무의미하므로 끈다. */
    .sn-step-list {
        gap: 12px;
        margin-top: 36px;
    }
    .sn-step {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }
    .sn-step .sn-step-copy,
    .sn-step:nth-child(2n) .sn-step-copy   { order: 2; }
    .sn-step .sn-step-visual,
    .sn-step:nth-child(2n) .sn-step-visual { order: 1; }
    .sn-step-copy {
        gap: 12px;
        padding: 28px 20px 32px;
    }
    .sn-step-title {
        font-size: var(--fs-22);
        line-height: var(--lh-22);
        letter-spacing: var(--ls-22);
    }
    .sn-step-desc {
        font-size: var(--fs-15);
        letter-spacing: var(--ls-15);
    }
    .sn-step-visual {
        padding: 28px 24px 0;
    }
    /* .sn-step-visual.center(0-2-0)는 PC 규칙이 이기므로 명시적으로 다시 쓴다 */
    .sn-step-visual.center {
        padding: 28px 20px;
    }
    .sn-phone {
        max-width: 224px;
    }
    /* 프레임이 좁아진 만큼 노치도 줄여야 화면 폭 대비 비율이 유지된다 */
    .sn-phone-top i {
        width: 72px;
    }
    /* 좁은 화면에서 식사권 제목 칸이 눌리지 않도록 QR을 줄인다 */
    .sn-ticket {
        padding: 14px 12px;
    }
    .sn-ticket-qr {
        width: 46px; height: 46px;
    }
    .sn-ticket-title {
        font-size: 13px;
    }

    /* 드라이브 결과 : 1열 */
    .sn-result {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 12px;
        padding: 32px 20px;
    }
    .sn-drive-list li {
        padding: 11px 10px;
        font-size: var(--fs-14);
        letter-spacing: var(--ls-14);
    }

    /* 가치 3카드 / 추천 대상 : 1열 */
    .sn-value-list {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 36px;
    }
    .sn-value-list > li {
        gap: 16px;
        padding: 24px 20px;
    }
    .sn-value-emp {
        font-size: var(--fs-16);
        letter-spacing: var(--ls-16);
    }

    .sn-fit-list {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 36px;
    }
    .sn-fit-list li {
        padding: 18px 16px;
        align-items: flex-start;
    }
    .sn-fit-list .note {
        font-size: var(--fs-15);
        letter-spacing: var(--ls-15);
    }

    /* CTA */
    .sn-cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    /* FAQ */
    .qna-list > li .link {
        padding: 22px 4px 18px 4px;
    }
    .qna-list > li .link .title .txt {
        font-size: var(--fs-15);
        line-height: var(--lh-15);
        letter-spacing: var(--ls-15);
    }
    .qna-list > li .contents {
        padding: 0 4px 22px 4px;
        font-size: var(--fs-15);
        letter-spacing: var(--ls-15);
    }

    /* 플로팅 도크 : 알약 대신 하단 고정 바. 문구는 버리고 버튼 두 개만. */
    .sn-float {
        padding: 0 12px calc(12px + env(safe-area-inset-bottom));
    }
    .sn-float-inner {
        width: 100%;
        gap: 8px;
        padding: 10px;
        border-radius: var(--sn-r-md);
        background: rgba(255, 255, 255, 0.92);
    }
    .sn-float-copy {
        display: none;
    }
    .sn-float-actions {
        width: 100%;
    }
    .sn-float-btn {
        height: 48px;
        padding: 0 14px;
        font-size: var(--fs-14);
        letter-spacing: var(--ls-14);
    }
    /* 데모 : 제작 = 1 : 1.5 — 주 버튼이 확실히 커야 우선순위가 읽힌다 */
    .sn-float-btn.ghost   { flex: 1; }
    .sn-float-btn.primary { flex: 1.5; }
    .sn-float-btn:hover   { transform: none; }

    /* ── FAQ 런처 충돌 회피 ──
       공용 위젯(a_component/faq-widget)의 런처는 bottom:16px / z-index:2147483000 이라
       전폭 도크(bottom 12px + 높이 68px) 위에 그대로 얹혀 제작 버튼을 덮는다.
       도크가 떠 있는 동안만 런처를 도크 위로 올린다.

       위젯의 <style> 이 문서 뒤쪽(body 끝)에 있어 늦게 선언되므로,
       명시도로 이겨야 한다 — body.sn-dock-on(0-1-1) + #faqWidget .faq-launcher(1-1-0)
       = (1-2-1) > 위젯의 (1-1-0). */
    body.sn-dock-on #faqWidget .faq-launcher {
        bottom: calc(92px + env(safe-area-inset-bottom));
        transition: bottom .28s ease;
    }
}