/* ═══════════════════════════════════════════════════════════════
   landing.css
   메인 홈페이지(#login-view)와 시작 가이드(#onboarding-view) — 브랜드 3색, 히어로 모션, 스크린샷, 모바일 드로어.

   ⚠️ --lp-* 변수는 #login-view / #modal-login / #boot-splash 바깥에서 절대 쓰지 말 것.

   ⚠️ 이 파일들은 index.html의 <style> 하나를 순서 그대로 자른 것이다.
      선택자가 파일을 넘나들며 겹치므로 <link> 순서를 바꾸면 화면이 깨진다.
      순서: tokens → base → app → landing → overrides
   ═══════════════════════════════════════════════════════════════ */
/* ── 첫 화면(랜딩) ───────────────────────────────────────────────────
   Dribbble "Fluke" 아웃라인 참고 — 가로로 벌린 상단 바 + 거대 타이포 + 우하단 설명문.

   ⚠️ [M3 토큰 예외 — 메인 홈페이지 브랜드 팔레트]
      이 화면만 **화이트 / 블랙 / 레드** 3색으로 고정한다(사용자 결정). 사이트 안쪽은
      포인트 컬러 8종이 바뀌지만, 메인 홈페이지는 서비스의 얼굴이라 늘 같은 색이어야 한다.
      그래서 md-* 토큰 대신 아래 --lp-* 변수를 쓴다. **이 변수들은 #login-view /
      #modal-login / #boot-splash 바깥에서는 절대 쓰지 말 것.**

   ⚠️ 레드 두 종을 구분해서 쓴다(대비 실측 근거):
      · --lp-accent      #FF2A24  브랜드 레드. 흰 글자 대비가 3.74:1이라 **글자색으로 쓰면 안 된다.**
                                  원형 마크의 면·로고의 점처럼 큰 도형에만.
      · --lp-accent-fill #D41D16  채움 버튼용. 흰 글자와 5.27:1로 AA 통과.
      · --lp-accent-text 라이트 #D41D16(흰 배경 5.27:1) / 다크 #FF2A24(검정 배경 5.29:1) */
#login-view, #modal-login, #boot-splash {
  --lp-bg: #FFFFFF;
  --lp-fg: #0A0A0A;
  --lp-muted: rgb(10 10 10 / 0.62);     /* 본문 보조 — 흰 배경 5.66:1 */
  --lp-faint: rgb(10 10 10 / 0.45);     /* 헤드라인 뒷말 — 초대형 글자 3.15:1 */
  --lp-line: rgb(10 10 10 / 0.10);
  --lp-surface: #F4F4F5;
  --lp-accent: #FF2A24;
  --lp-accent-fill: #D41D16;
  --lp-accent-text: #D41D16;
  --lp-on-accent: #FFFFFF;
}
:root[data-theme="dark"] :is(#login-view, #modal-login, #boot-splash) {
  --lp-bg: #0A0A0A;
  --lp-fg: #FFFFFF;
  --lp-muted: rgb(255 255 255 / 0.66);  /* 검정 배경 8.72:1 */
  --lp-faint: rgb(255 255 255 / 0.45);  /* 4.4:1 */
  --lp-line: rgb(255 255 255 / 0.14);
  --lp-surface: #171717;
  --lp-accent-text: #FF2A24;            /* 검정 배경 5.29:1 */
}
/* 배경·글자 기본값을 화면 전체에 깐다(md-* 토큰을 덮어쓴다). */
#login-view, #boot-splash { background-color: var(--lp-bg); color: var(--lp-fg); }
#login-view .cs-logo-text, #boot-splash .cs-logo-text { color: var(--lp-fg); }
#modal-login .cs-logo-text { color: var(--lp-fg); }
/* 로고의 점도 브랜드 레드로 통일(이미 같은 값이지만 변수로 묶어 둔다). */
#login-view .brand-dot, #boot-splash .brand-dot, #modal-login .brand-dot { color: var(--lp-accent); }

/* ⚠️ [M3 타입 스케일 예외 — 랜딩 헤드라인] .lp-title은 M3 타입 스케일(최대 57px)을
   넘어선다. 마케팅 성격의 첫 화면 한 곳에서만 쓰는 의도적 예외이며, 사이트 안쪽
   화면에는 절대 쓰지 말 것. */
.lp-nav {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--lp-line);
  /* 스크롤해도 따라온다. 스크롤 컨테이너가 #login-view(fixed)라 sticky의 기준도 그쪽이다.
     배경을 깔아야 아래 내용이 비쳐 보이지 않는다. */
  position: sticky; top: 0; z-index: 2;
  background-color: var(--lp-bg);
}
.lp-nav-links { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
/* ⚠️ 모바일에서는 섹션 링크(기능·주요 기능·안내)를 감춘다.
   로고 + 토글 + 로그인만으로도 375px를 거의 다 쓰기 때문에, 링크까지 두면
   '로그인'이 화면 밖으로 잘려 나간다(실제로 그렇게 잘렸다).
   내용은 아래로 스크롤하면 순서대로 나오므로 이동 수단이 사라지는 것은 아니다. */
/* 모바일 전용 — 화면 좌하단의 동그란 드로어 버튼. 상단 바에서 감춘 세 항목을 여기서 연다. */
.lp-drawer-btn {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 3;
  width: 56px; height: 56px; border-radius: var(--m3-shape-full);
  display: none; align-items: center; justify-content: center;
  background-color: var(--lp-accent-fill); color: var(--lp-on-accent);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
  transition: transform 0.2s ease;
}
.lp-drawer-btn:active { transform: scale(0.92); }
.lp-drawer-scrim {
  position: fixed; inset: 0; z-index: 4; background: rgb(0 0 0 / 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
}
body.lp-drawer-open .lp-drawer-scrim { opacity: 1; pointer-events: auto; }
.lp-drawer {
  position: fixed; left: 0; bottom: 0; right: 0; z-index: 5;
  background-color: var(--lp-bg); color: var(--lp-fg);
  border-radius: 28px 28px 0 0; padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 -4px 24px rgb(0 0 0 / 0.24);
}
body.lp-drawer-open .lp-drawer { transform: none; }
.lp-drawer-handle { width: 36px; height: 4px; border-radius: 4px; background: var(--lp-line); margin: 0 auto 1.25rem; }
.lp-drawer-item {
  display: flex; align-items: center; gap: 0.875rem; width: 100%;
  padding: 1rem 0.75rem; border-radius: var(--m3-shape-md);
  font-size: 16px; font-weight: 700; color: var(--lp-fg); text-align: left;
}
.lp-drawer-item:active { background-color: var(--lp-surface); }
.lp-drawer-item .material-symbols-outlined { color: var(--lp-accent-text); }

@media (max-width: 767.98px) {
  .lp-nav-link { display: none; }
  .lp-drawer-btn { display: inline-flex; }
  .lp-nav { padding-left: 1rem; padding-right: 1rem; }
  .cs-logo-md .cs-logo-img  { height: 22px; }
  .cs-logo-md .cs-logo-text { font-size: 17px; }
  .lp-nav-cta { padding: 0.625rem 1.125rem; font-size: 14px; }
  /* ⚠️ 모바일 48dp 터치 타겟 규칙(#login-view의 min-height:48px)이 이미 걸려 있다.
     여기서 40px 같은 작은 값을 주면 세로만 48로 늘어나 원이 타원으로 찌그러진다.
     48로 맞춰야 원 모양이 유지된다. */
  .lp-theme-btn { width: 48px; height: 48px; min-width: 48px; }
}
.lp-nav-link {
  padding: 0.75rem 1rem; border-radius: var(--m3-shape-full);
  color: var(--lp-muted);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lp-nav-link:hover { background-color: var(--lp-surface); color: var(--lp-fg); }
.lp-nav-cta {
  padding: 0.75rem 1.5rem; border-radius: var(--m3-shape-full);
  background-color: var(--lp-accent-fill); color: var(--lp-on-accent);
  font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-nav-cta:hover { box-shadow: 0 2px 10px rgb(212 29 22 / 0.35); }
.lp-nav-cta:active { transform: scale(0.96); }

/* 히어로 — 남는 높이를 전부 쓰고, 설명문은 우측 하단으로 민다. */
.lp-hero {
  /* 화면을 꽉 채우지 않고 조금 남긴다 — 아래 섹션이 살짝 비쳐야 "더 있다"는 신호가 된다. */
  min-height: calc(100dvh - 10rem);
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 1.5rem 2.5rem;
}
.lp-title {
  font-size: clamp(2.75rem, 11.5vw, 9.5rem);
  line-height: 0.95; letter-spacing: -0.045em; font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: center;
  --mark-h: clamp(2.5rem, 8.5vw, 7rem);      /* 원일 때의 지름 */
  --mark-w: clamp(5.5rem, 19vw, 15rem);      /* 알약으로 늘었을 때의 폭(= 두 단어 사이 간격) */
}
.lp-word { transition: none; }

/* ── 'Our * Space' 모션 ─────────────────────────────────────────────
   마크가 Our 쪽에 **원**으로 붙어 있다가 → Space 쪽으로 **알약**처럼 늘어나고 →
   안의 별표가 Space 쪽으로 건너가면 → 알약이 다시 **원**으로 오므라든다.
   그 순간 색이 채워진 단어도 Our에서 Space로 넘어간다.
   ⚠️ 접속 후 **한 번만** 재생한다(사용자 결정). fill-mode: both 라서 끝난 뒤에는
      "Space 쪽 원 + Space에 색이 채워진" 마지막 상태로 머문다.
      0.5s 늦게 시작하는 건 제목이 올라오는 등장 애니메이션(.lp-rise 0.9s)과 겹치지 않게 하려는 것.
   ⚠️ left/right를 애니메이션하므로 매 프레임 레이아웃이 인다. 요소가 하나뿐이라
      문제되지 않지만, 이 패턴을 목록 같은 곳에 복사하지 말 것. */
.lp-mark-track {
  position: relative; flex-shrink: 0;
  width: var(--mark-w); height: var(--mark-h);
  margin: 0 clamp(0.35rem, 1vw, 1rem);
}
.lp-mark {
  position: absolute; top: 0; bottom: 0;
  left: 0; right: calc(var(--mark-w) - var(--mark-h));
  background-color: var(--lp-accent);
  border-radius: var(--m3-shape-full);
  animation: lpMarkMorph 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both;
}
.lp-mark-star {
  position: absolute; top: 50%;
  left: calc(var(--mark-h) / 2);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  color: var(--lp-on-accent);
  animation: lpStarMove 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both;
}
.lp-mark-star .material-symbols-outlined { font-size: clamp(1.4rem, 4.8vw, 4rem); }
.lp-word-a { color: var(--lp-fg);    animation: lpWordA 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both; }
.lp-word-b { color: var(--lp-faint); animation: lpWordB 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both; }

@keyframes lpMarkMorph {
  0%, 12%   { left: 0; right: calc(var(--mark-w) - var(--mark-h)); }   /* Our 쪽 원 */
  40%, 62%  { left: 0; right: 0; }                                      /* 알약으로 확장 */
  90%, 100% { left: calc(var(--mark-w) - var(--mark-h)); right: 0; }    /* Space 쪽 원 */
}
@keyframes lpStarMove {
  0%, 22%   { left: calc(var(--mark-h) / 2); }
  70%, 100% { left: calc(var(--mark-w) - var(--mark-h) / 2); }
}
@keyframes lpWordA { 0%, 55% { color: var(--lp-fg); }    78%, 100% { color: var(--lp-faint); } }
@keyframes lpWordB { 0%, 55% { color: var(--lp-faint); } 78%, 100% { color: var(--lp-fg); } }
.lp-lede {
  margin-top: 2.5rem; margin-left: auto;
  max-width: 24rem; text-align: right;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem); line-height: 1.6;
  color: var(--lp-muted);
}

/* 아래 내용 블록 */
.lp-section { padding: 4.5rem 1.5rem; border-top: 1px solid var(--lp-line); }
.lp-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--lp-accent-text); text-transform: uppercase; margin-bottom: 0.75rem;
}
.lp-section-title {
  font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1.1;
  letter-spacing: -0.03em; font-weight: 700;
  color: var(--lp-fg); margin-bottom: 2.5rem;
}
.lp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.lp-card {
  background-color: var(--lp-surface); color: var(--lp-fg);
  border-radius: var(--m3-shape-lg); padding: 1.25rem; text-align: left;
}
.lp-card-icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--m3-shape-full);
  background-color: var(--lp-accent); color: var(--lp-on-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-card-title { font-size: 15px; font-weight: 700; color: var(--lp-fg); margin-top: 0.75rem; }
.lp-card-desc  { font-size: 13px; line-height: 1.6; color: var(--lp-muted); margin-top: 0.25rem; }
.lp-about { text-align: center; }
.lp-about-text {
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem); line-height: 1.7;
  color: var(--lp-muted); margin-bottom: 2.5rem;
}
.lp-about-text strong { color: var(--lp-fg); }
.lp-foot-note { font-size: 13px; color: var(--lp-muted); margin-top: 2rem; }
.lp-cta {
  background-color: var(--lp-accent-fill); color: var(--lp-on-accent);
  font-weight: 700; padding: 1rem 2rem; border-radius: var(--m3-shape-full);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-cta:hover { box-shadow: 0 2px 12px rgb(212 29 22 / 0.35); }
.lp-cta:active { transform: scale(0.96); }

/* 메인 홈페이지 등장 — 사이트 안쪽(.onb-rise 0.42s)보다 느리고 멀리서 올라온다. */
.lp-rise { animation: lpRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes lpRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* 상단 바 우측: 테마 토글 + 로그인 */
.lp-nav-right { display: inline-flex; align-items: center; gap: 0.5rem; }
.lp-theme-btn {
  width: 44px; height: 44px; border-radius: var(--m3-shape-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lp-fg); border: 1px solid var(--lp-line);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.lp-theme-btn:hover { background-color: var(--lp-surface); }
.lp-theme-btn:active { transform: scale(0.94); }
/* 지금 테마의 "반대" 아이콘을 보여준다 — 누르면 무엇이 될지가 보이는 쪽이 직관적이다. */
.lp-theme-icon-dark { display: none; }
:root[data-theme="dark"] .lp-theme-icon-dark { display: block; }
:root[data-theme="dark"] .lp-theme-icon-light { display: none; }

/* 실제 화면 스크린샷 — 사이트에서 직접 찍은 것이다(assets/shots/). */
.lp-shots { display: flex; flex-direction: column; gap: 3.5rem; }
.lp-shot { margin: 0; }
.lp-shot-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--m3-shape-lg);
  border: 1px solid var(--lp-line);
  background-color: var(--lp-surface);
}
/* 기본은 밝은 목업. 다크 테마에서만 어두운 목업으로 바꾼다.
   ⚠️ prefers-color-scheme(<picture>)가 아니라 data-theme을 봐야 한다 —
      사용자가 시스템 설정과 다른 테마를 고를 수 있기 때문이다. */
.lp-shot-dark { display: none; }
:root[data-theme="dark"] .lp-shot-dark  { display: block; }
:root[data-theme="dark"] .lp-shot-light { display: none; }
.lp-shot figcaption { margin-top: 1rem; }
/* 스크롤해 내려오면 위에서 부드럽게 올라온다.
   ⚠️ .lp-reveal은 **JS가 붙인다**(마크업에 두지 않는다). 마크업에 두면 관찰이 실패했을 때
      opacity:0인 채로 내용이 영영 숨는다 — 실제로 그렇게 스크린샷이 통째로 안 보였다.
      JS가 성공적으로 붙였을 때만 숨겼다가 드러내는 순서가 안전하다.
   ⚠️ 스크롤 컨테이너가 #login-view(fixed)라 옵저버의 root도 그쪽으로 잡아야 한다. */
.lp-reveal { opacity: 0; transform: translateY(34px); }
.lp-reveal.revealed {
  opacity: 1; transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-shot-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--lp-on-accent); background-color: var(--lp-accent-fill);
  padding: 0.25rem 0.625rem; border-radius: var(--m3-shape-full);
}
.lp-shot-title { font-size: 17px; font-weight: 700; color: var(--lp-fg); margin-top: 0.625rem; }
.lp-shot-desc { font-size: 14px; line-height: 1.65; color: var(--lp-muted); margin-top: 0.25rem; }
@media (min-width: 768px) {
  /* 지그재그 — 완전 왼쪽 → 완전 오른쪽 → 왼쪽 … 으로 번갈아 붙인다. */
  .lp-shots { gap: 6rem; }
  .lp-shot { width: 72%; }
  .lp-shot:nth-child(even) { margin-left: auto; text-align: right; }
}

/* 로그인 팝업도 같은 3색을 쓴다 — 메인 홈페이지에서 이어지는 화면이라서. */
#modal-login .lp-sheet { background-color: var(--lp-bg); color: var(--lp-fg); }
#modal-login .lp-sheet h2 { color: var(--lp-fg); }
#modal-login .lp-sheet p  { color: var(--lp-muted); }
#modal-login .lp-close    { color: var(--lp-muted); }
#modal-login .lp-close:hover { color: var(--lp-fg); background-color: var(--lp-surface); }
#modal-login .lp-remember { color: var(--lp-muted); }
#modal-login #login-remember { accent-color: var(--lp-accent-fill); }

@media (min-width: 768px) {
  .lp-nav { padding: 1.5rem 3rem; gap: 2rem; }
  /* 참고 디자인처럼 메뉴를 가로로 넓게 벌린다.
     ⚠️ space-between이라 마지막 항목('로그인')이 오른쪽 끝에 붙어,
        왼쪽 끝의 로고와 좌우 여백이 정확히 대칭이 된다. */
  .lp-nav-links { flex: 1; justify-content: space-between; margin-left: 3rem; }
  .lp-hero { min-height: calc(100dvh - 8rem); padding: 4rem 3rem 3rem; }
  .lp-section { padding: 7rem 3rem; }
  .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .lp-card { padding: 1.75rem; }
  .lp-about-text { max-width: 34rem; margin-left: auto; margin-right: auto; }
}

/* ── 온보딩 화면 ─────────────────────────────────────────────────────
   단계가 바뀔 때마다 요소가 아래에서 올라오며 나타난다. .enter-fade와 달리
   이동 거리를 조금 크게 줘서 "화면이 넘어갔다"는 느낌을 준다. */
.onb-rise { animation: onbRise 0.42s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes onbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* 환영·완료 화면의 큰 아이콘은 살짝 튀어오르며 등장한다. */
.onb-pop { animation: onbPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes onbPop { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
#onb-progress-bar { transition: width 0.4s cubic-bezier(0.2, 0, 0, 1); }
/* 동의하지 않은 동안 '다음'은 눌리지 않는다(모양으로도 알 수 있게 흐리게). */
#onb-next:disabled { opacity: 0.45; cursor: not-allowed; }
/* 서약서 동의는 스위치가 아니라 체크박스다 — "설정을 켠다"가 아니라 "읽고 동의한다"는
   1회성 확인이라 체크박스가 맞는 표현이다(사용자 결정). */
/* 서약서 동의 — 스위치가 아니라 **체크박스**다(1회성 확인이라 체크박스가 맞는 표현).
   네이티브 모양은 브라우저마다 제각각이고 작아서, 체크 표시가 뚜렷하게 보이도록 직접 그린다. */
.onb-checkbox {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; flex-shrink: 0; cursor: pointer;
  border: 2px solid rgb(var(--md-outline-rgb));
  border-radius: var(--m3-shape-xs);
  background-color: transparent;
  display: inline-grid; place-content: center;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.onb-checkbox::before {
  content: ''; width: 13px; height: 8px;
  border-left: 2.5px solid rgb(var(--md-on-primary-rgb));
  border-bottom: 2.5px solid rgb(var(--md-on-primary-rgb));
  transform: rotate(-45deg) translate(1px, -2px) scale(0);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onb-checkbox:checked {
  background-color: rgb(var(--md-primary-rgb));
  border-color: rgb(var(--md-primary-rgb));
}
.onb-checkbox:checked::before { transform: rotate(-45deg) translate(1px, -2px) scale(1); }
.onb-checkbox:focus-visible { outline: 2px solid rgb(var(--md-primary-rgb)); outline-offset: 2px; }
/* ⚠️ 테마를 바꾸는 **그 순간에만** 색 트랜지션(0.35s)을 끈다.
   배경·글자·테두리가 화면 전체에서 동시에 0.35초 동안 서서히 변하면 "안 바뀌었다"고
   느껴진다(특히 큰 면적이 많은 메인 홈페이지). 즉시 갈아 끼운 뒤 바로 되돌린다. */
:root.theme-switching, :root.theme-switching *,
:root.theme-switching *::before, :root.theme-switching *::after {
  transition: none !important;
}
/* 오류 안내와 '남은 항목' 줄이 나타날 때도 스르륵 내려오게 한다.
   .hidden(display:none)에서 풀리는 순간 애니메이션이 다시 재생되므로 별도 JS가 필요 없다. */
.onb-hint, #onb-profile-missing { animation: onbHint 0.24s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes onbHint { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }