/* ============================================================
   랜딩(/landing) 전용 스타일. app.css의 토큰(--brand 등)을 그대로 쓴다.
   앱 셸 규약을 지킨다: body는 스크롤하지 않고 .wrap만 스크롤한다.
   앱 화면(.wrap max-width 30rem)보다는 넓게 잡아 데스크톱에서도 읽히게 한다.

   [결: 손으로 만든 스크랩북] 종이 바탕에 살짝 기울인 카드, 마스킹 테이프,
   흩뿌린 스티커, 손글씨 제목. 앱 안쪽은 반듯한 도구이고 랜딩은 이야기하는 자리라
   여기서만 결을 다르게 간다.

   [지킨 선]
   - 손글씨(개구)는 제목·캡션·숫자에만. 본문까지 손글씨면 읽기가 나빠지고,
     본문은 검색 스니펫으로 인용되는 문장이라 또렷해야 한다.
   - 떨림 필터(#wiggle)는 장식에만. 글자에 걸면 흐릿해진다.
   - 기울인 요소는 카드·스티커뿐. 버튼과 입력칸은 반듯하게 둔다(누르는 물건이다).
   ============================================================ */

/* 종이·손글씨 토큰은 app.css에 있다(랜딩도 app.css를 함께 부른다) — 여기서 다시 정의하지 않는다.
   두 곳에 나눠 적으면 한쪽만 고쳐져 앱과 랜딩의 색이 갈린다. */

/* 필터 정의만 담은 svg — 자리를 차지하면 안 된다 */
.lp-filter { position: absolute; width: 0; height: 0; }

/* 모눈 바탕은 app.css의 body 규칙이 이미 깔아둔다 — 앱 화면과 같은 종이를 쓴다. */
/* 손글씨를 쓰는 곳. 개구는 획이 얇아 한 단계 굵게 잡아야 화면에서 버틴다. */
.lp-hero h1, .lp-sec h2, .lp-final h2,
.polaroid-caption, .steps .num, .lp-nav .logo span {
    font-family: var(--hand);
    font-weight: 700;
    letter-spacing: 0;
}

/* 앱 셸 구조상 스크롤은 .wrap이 한다 — PC에서는 그 안쪽 스크롤바가 페이지 위에 덧그려져
   소개 화면의 인상을 해친다. 막대만 감추고 스크롤(휠·터치·키보드)은 그대로 둔다. */
.lp-wrap {
    /* 랜딩에는 하단 탭바가 없다 — 푸터가 바닥까지 닿아야 한다 */
    max-width: 44rem; padding-bottom: 0;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* 구형 Edge */
}
.lp-wrap::-webkit-scrollbar { width: 0; height: 0; }

/* ── 상단 바 ── */
.lp-nav { flex: none; background: var(--paper); border-bottom: 1px dashed var(--paper-line); }
.lp-nav .inner {
    max-width: 44rem; margin: 0 auto; padding: 0 1.2rem;
    height: var(--header-h); display: flex; align-items: center; justify-content: space-between;
}
.lp-nav .logo {
    display: flex; align-items: center; gap: .4rem;
    font-family: var(--hand); font-weight: 700;
    font-size: 1.5rem; color: var(--brand);
    text-decoration: none;
}
.lp-nav .logo img { width: 1.6rem; height: 1.6rem; position: relative; top: 1px; }
.lp-nav .nav-login { font-size: .86rem; color: var(--ink-sub); text-decoration: none; }

/* ── 히어로 ── */
/* 스티커를 절대배치로 흩뿌리므로 기준점이 필요하다.
   overflow:hidden으로 가둔다 — 밖으로 삐져나가면 가로 스크롤이 생긴다(앱 셸 규약 위반). */
.lp-hero {
    padding: 2.6rem 1.2rem 1.4rem; text-align: center;
    position: relative; overflow: hidden;
}

/* ── 흩뿌린 스티커 ──
   사진(폴라로이드) 둘레에 붙인다. 히어로 전체에 흩으면 본문 글자 위로 올라와 지저분해진다(실측).
   손으로 붙인 것처럼 각도를 제각각 주고, 필터로 윤곽을 미세하게 떨어 인쇄물이 아니라
   그 자리에서 그린 느낌을 낸다. 클릭을 가로채면 안 되므로 pointer-events는 없앤다. */
/* 사진 위로 올라와야 한다 — 뒤에 두면 인화지에 가려 반쪽만 보인다(실측).
   진짜 스티커도 사진 위에 붙지, 아래로 들어가지 않는다. */
.lp-deco { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.lp-deco span {
    position: absolute; line-height: 1;
    filter: url('#wiggle');
}
.lp-deco .d1 { top: -7%;   left: -13%;  font-size: 1.7rem; rotate: -14deg; }
.lp-deco .d2 { top: -4%;   right: -9%;  font-size: 1.3rem; rotate: 12deg; }
.lp-deco .d3 { top: 40%;   right: -11%; font-size: 1.5rem; rotate: 8deg; }
.lp-deco .d4 { top: 55%;   left: -12%;  font-size: 1.4rem; rotate: -8deg; }
.lp-deco .d5 { bottom: 1%; left: -9%;   font-size: 1.5rem; rotate: -10deg; }
.lp-deco .d6 { bottom: 6%; right: -9%;  font-size: 1.2rem; rotate: 14deg; }

/* 아주 좁은 화면(≈320px)에서는 사진 양옆에 스티커가 설 자리가 없다 — 히어로가 잘라먹는다 */
@media (max-width: 22rem) {
    .lp-deco .d3, .lp-deco .d4, .lp-deco .d5 { display: none; }
}

/* 움직임을 줄이도록 설정한 사용자에게는 떨림을 끈다.
   SMIL 애니메이션은 CSS로 멈출 수 없으니 필터 자체를 걷어낸다(모양은 그대로 남는다). */
@media (prefers-reduced-motion: reduce) {
    .lp-deco span, .lp-sec h2::after, .steps .num { filter: none; }
}
.lp-hero .eyebrow {
    display: inline-block; font-size: .76rem; color: var(--brand-strong);
    background: var(--brand-weak); border-radius: 999px; padding: .4rem .8rem; margin-bottom: 1.1rem;
}
/* 손글씨는 같은 px여도 인쇄체보다 작아 보인다 — 한 단계 키우고 자간을 좁히지 않는다 */
.lp-hero h1 {
    font-size: 3rem; line-height: 1.15;
    margin: 0 0 .9rem; color: var(--ink);
    position: relative; z-index: 1;
}
.lp-hero .eyebrow, .lp-hero .sub, .lp-hero .cta-row, .lp-hero .cta-note {
    position: relative; z-index: 1;   /* 스티커 위로 */
}
.lp-hero .sub { font-size: .95rem; line-height: 1.7; color: var(--ink-sub); margin: 0 0 1.5rem; }
.lp-hero .sub strong { color: var(--ink); }

.cta-row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.cta {
    display: inline-block; padding: .85rem 1.5rem; border-radius: 999px;
    background: var(--brand); color: #fff; font-weight: 700; font-size: .95rem;
    text-decoration: none; box-shadow: 0 6px 16px rgba(255, 112, 67, .28);
}
.cta:hover { background: var(--brand-strong); }
.cta.ghost { background: var(--surface); color: var(--ink-sub); border: 1px solid var(--line); box-shadow: none; }
.cta-note { font-size: .78rem; color: var(--ink-faint); margin: .8rem 0 0; }

/* ── 폴라로이드 액자 ──
   앨범에 붙여둔 사진처럼. 아래 여백을 위보다 크게 두는 것이 폴라로이드의 인상을 만든다. */
.polaroid {
    position: relative; z-index: 1;
    margin: 2.2rem auto 0; width: fit-content;
    padding: .9rem .9rem .3rem;
    background: #fff;
    rotate: -2.5deg;
    box-shadow: 0 6px 18px rgba(60, 45, 30, .18);
}
/* 마스킹 테이프 — 반투명이라 아래 종이결이 비친다 */
.polaroid .tape {
    position: absolute; top: -.7rem; left: 50%;
    width: 5.5rem; height: 1.5rem;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 213, 128, .65);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.polaroid-caption {
    margin: .5rem .2rem .1rem; text-align: right;
    font-size: 1.35rem; color: var(--ink-hand);
}

/* ── 화면 목업 (이미지 없이 CSS로) ── */
.mock {
    margin: 0; max-width: 17rem; background: var(--bg);
    border: 1px solid var(--line); border-radius: .5rem;
    overflow: hidden; text-align: left;
    /* 사진처럼 안쪽으로 그림자를 넣는다 — 인화지에 눌러 붙인 느낌 */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .16), inset -1px -1px 4px rgba(0, 0, 0, .08);
}
.mock-bar { background: var(--surface); padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.mock-logo { font-size: .8rem; font-weight: 800; color: var(--brand); }
.mock-hero { background: var(--brand-weak); margin: .7rem; border-radius: .8rem; padding: .7rem .8rem; }
.mock-hero .t { font-size: .78rem; font-weight: 700; color: var(--ink); margin-bottom: .45rem; }
.mock-hero .bar { height: .3rem; background: #ffd8c9; border-radius: 999px; overflow: hidden; }
.mock-hero .bar i { display: block; width: 42%; height: 100%; background: var(--brand); }
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: 0 .7rem .8rem; }
.mock-card { background: var(--surface); border-radius: .7rem; padding: .45rem; box-shadow: var(--shadow); }
.mock-card .thumb {
    height: 3.4rem; border-radius: .5rem; display: flex; align-items: center;
    justify-content: center; font-size: 1.4rem; margin-bottom: .35rem;
}
.mock-card .c1 { background: #fdece4; }
.mock-card .c2 { background: #e3f1fb; }
.mock-card .c3 { background: var(--done-weak); }
.mock-card .c4 { background: #eee9fb; }
.mock-card .t { font-size: .72rem; font-weight: 700; color: var(--ink); }
.mock-card .m { font-size: .64rem; color: var(--ink-faint); }
.mock-card .done-text { color: var(--done); font-weight: 700; }

/* ── 본문 섹션 ── */
.lp-sec { padding: 2.4rem 1.2rem 0; }
.lp-sec h2 {
    font-size: 1.65rem; margin: 0 0 1.3rem;
    text-align: center; color: var(--ink);
    position: relative; padding-bottom: .5rem;
}
/* 손으로 그은 밑줄. 직선을 필터로 흔들어 만든다 — 이미지 한 장 없이 손맛이 난다. */
.lp-sec h2::after {
    content: ""; position: absolute; left: 50%; bottom: 0;
    width: 3.4rem; height: 4px; transform: translateX(-50%);
    background: var(--brand); border-radius: 2px;
    filter: url('#wiggle');
}

.pain { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
/* 붙여둔 메모지처럼 — 한 장씩 각도를 달리해야 "찍어낸 것"으로 안 보인다.
   각도는 아주 작게(1도 미만~1도). 크면 읽는 눈이 피로하다. */
.pain li {
    display: flex; gap: .8rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--paper-line);
    border-radius: .3rem; padding: 1rem;
    box-shadow: 2px 3px 10px rgba(60, 45, 30, .10);
}
.pain li:nth-child(1) { rotate: -.8deg; }
.pain li:nth-child(2) { rotate: .5deg; }
.pain li:nth-child(3) { rotate: -.4deg; }
.pain li > span { font-size: 1.3rem; line-height: 1; }
.pain strong { display: block; font-size: .92rem; color: var(--ink); margin-bottom: .2rem; }
.pain p { margin: 0; font-size: .84rem; color: var(--ink-sub); line-height: 1.6; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.steps li { display: flex; gap: .9rem; align-items: flex-start; }
/* 손으로 동그라미 치고 숫자를 쓴 모양 — 채우지 않고 테두리만 두른다 */
.steps .num {
    flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: none; border: 2.5px solid var(--brand);
    color: var(--brand-strong); font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
    filter: url('#wiggle');
}
.steps strong { display: block; font-size: .95rem; color: var(--ink); margin-bottom: .2rem; }
.steps p { margin: 0; font-size: .86rem; color: var(--ink-sub); line-height: 1.65; }

.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.feat {
    background: #fff; border: 1px solid var(--paper-line);
    border-radius: .3rem; padding: 1rem;
    box-shadow: 2px 3px 10px rgba(60, 45, 30, .10);
}
.feat:nth-child(odd) { rotate: -.6deg; }
.feat:nth-child(even) { rotate: .6deg; }
.feat .ico { font-size: 1.5rem; margin-bottom: .45rem; }
.feat strong { display: block; font-size: .9rem; color: var(--ink); margin-bottom: .25rem; }
.feat p { margin: 0; font-size: .82rem; color: var(--ink-sub); line-height: 1.6; }

/* ── 마무리 ── */
.lp-final {
    margin: 2.6rem 1.2rem 0; padding: 2.2rem 1.2rem;
    background: var(--brand-weak); border-radius: .4rem; text-align: center;
    rotate: -.5deg;
    box-shadow: 2px 4px 14px rgba(60, 45, 30, .12);
}
.lp-final h2 {
    font-size: 1.7rem; line-height: 1.45;
    margin: 0 0 1.2rem; color: var(--ink);
}

.landing-body .site-footer { padding: 2rem 1.2rem 2.4rem; }

/* 좁은 화면에서는 카드가 한 줄에 하나 */
@media (max-width: 22rem) {
    .lp-hero h1 { font-size: 2.5rem; }
    .feat-grid { grid-template-columns: 1fr; }
}


/* ── 데스크톱: 히어로를 문구 / 목업 2단으로 ── */
@media (min-width: 60rem) {
    .lp-wrap, .lp-nav .inner { max-width: 60rem; }
    .lp-hero {
        display: grid; grid-template-columns: 1fr auto;
        grid-auto-rows: min-content; align-content: center;
        gap: 0 2.8rem;                  /* 행 간격은 각 요소의 margin이 잡는다 */
        text-align: left; padding: 3.4rem 1.5rem 2.4rem;
    }
    .lp-hero .eyebrow { justify-self: start; }
    .lp-hero .polaroid { align-self: center; }
    .lp-hero .eyebrow, .lp-hero h1, .lp-hero .sub,
    .lp-hero .cta-row, .lp-hero .cta-note { grid-column: 1; }
    .lp-hero h1 { font-size: 3.8rem; }
    .lp-hero .cta-row { justify-content: flex-start; }
    .lp-hero .polaroid { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
    .lp-sec { padding: 3rem 1.5rem 0; }
    .lp-sec h2 { font-size: 2rem; }
    .pain { grid-template-columns: repeat(3, 1fr); }
    .steps { grid-template-columns: repeat(3, 1fr); align-items: start; }
    /* 항목 수에 맞춰 열이 정해진다 — 고정 4열이면 3개일 때 오른쪽이 빈다 */
    .feat-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .lp-final { margin: 3.2rem 1.5rem 0; padding: 3rem 1.5rem; }
    .lp-final h2 { font-size: 2.1rem; }
}

/* ── 자주 묻는 질문 ── */
.faq { display: grid; gap: .5rem; }
.faq details {
    background: #fff; border: 1px solid var(--paper-line);
    border-radius: .3rem; padding: .9rem 1rem;
    box-shadow: 1px 2px 8px rgba(60, 45, 30, .07);
}
.faq summary {
    cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--ink);
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; color: var(--brand); float: right; }
.faq details[open] summary::after { content: " −"; }
.faq p { margin: .6rem 0 0; font-size: .86rem; line-height: 1.7; color: var(--ink-sub); }

/* [1열 고정] 2열로 두면 같은 행의 두 칸이 높이를 공유해, 하나를 펼칠 때 옆 칸까지
   같이 늘어나 열린 것처럼 보인다(실기기 확인). 답변은 위아래로 읽는 게 자연스럽기도 하다. */

/* ── 실제 화면 (가로 스크롤 띠) ──
   폰 화면은 세로로 길다. 4장을 한 줄에 넣으면 글씨가 안 읽히고, 2열로 쌓으면
   이 섹션 하나가 화면 두 개 분량을 먹는다 — 그래서 옆으로 넘기는 띠로 둔다.
   앱 셸 규약상 스크롤은 .wrap이 하지만, 이 띠는 가로라 세로 스크롤과 겹치지 않는다. */
.lp-shots .shots-note {
    margin: -.4rem 0 .9rem; text-align: center;
    font-size: .8rem; color: var(--ink-sub);
}
.shot-strip {
    display: flex; gap: 1.1rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 액자가 기울어 있어 좌우가 잘린다 — 여백으로 그만큼 살려 준다.
       음수 마진으로 섹션 패딩을 상쇄해 첫 장이 화면 끝에서 시작하게 한다. */
    padding: .8rem 1.2rem 1.4rem;
    margin: 0 -1.2rem;
}
.shot-strip::-webkit-scrollbar { width: 0; height: 0; }

.shot-item {
    flex: 0 0 auto; width: 13.5rem;
    scroll-snap-align: center;
    position: relative; margin: 0;
    padding: .55rem .55rem .2rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(60, 45, 30, .16);
}
/* 나란히 놓이는 액자는 기울기를 번갈아 준다 — 같으면 손으로 붙인 게 아니라 무늬로 보인다.
   각도는 히어로(2.5도)보다 얕다. 여러 장이 붙어 있어 크게 기울이면 서로 모서리를 침범한다. */
.shot-item:nth-child(odd)  { rotate: -1.4deg; }
.shot-item:nth-child(even) { rotate:  1.4deg; }

.shot-item img { display: block; border-radius: .15rem; }
.shot-item .tape {
    position: absolute; top: -.55rem; left: 50%;
    width: 3.6rem; height: 1.1rem;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 213, 128, .65);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.shot-item:nth-child(even) .tape { transform: translateX(-50%) rotate(4deg); }

.shot-item figcaption {
    margin: .45rem .15rem .1rem; text-align: center;
    font-family: var(--hand); font-weight: 700;
    font-size: 1.05rem; color: var(--ink-hand);
}

/* 넓은 화면에서는 넘길 것이 없다 — 네 장이 다 보이므로 안내 문구를 감춘다. */
@media (min-width: 60rem) {
    .shot-strip { justify-content: center; overflow-x: visible; }
    .lp-shots .shots-note { display: none; }
    /* 폭은 좁은 화면과 같게 둔다 — 4장 + 여백이 60rem 안에 들어간다(계산: 13.5rem×4 + 1.1rem×3) */
}