/**
* 머블로 무비 스튜디오 — 판매 홈 화면
*
* 블록 편집기가 넣는 HTML 이 이 클래스들을 쓴다. **스타일을 블록 안에 인라인으로
* 넣지 않는다** — 그러면 운영자가 문구 한 줄 고치려고 열 때마다 스타일 덩어리를
* 헤치고 들어가야 하고, 색을 바꾸려면 블록을 전부 다시 써야 한다.
*
* **색은 하드코딩하지 않는다.** 코어 토큰(tokens.css)의 semantic 을 쓴다 —
* front.css 가 `--primary` 를 핑크로 묶어 뒀으므로 여기서는 그것만 참조하면
* 다크 모드까지 따라온다.
*/
/* **배경은 화면 끝까지, 내용은 가운데로** (사용자 결정).
*
* 띠 배경이 컨테이너 안에서 끊기면 양옆이 허옇게 남아 섹션이 갈린 것처럼 보인다.
* 그렇다고 글까지 화면 끝까지 늘리면 한 줄이 2000px 이 되어 눈이 되돌아올 자리를
* 못 찾는다.
*
* 그래서 둘을 나눈다 — 배경은 `.block-container` 제한을 풀어 펴고(맨 아래),
* 내용은 여기서 다시 가운데로 모은다. */
.st-wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.st-kicker {
font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--primary); margin: 0;
}
.st-h2 { margin: 12px 0 0; font-size: clamp(23px, 3.1vw, 35px); letter-spacing: -.028em;
line-height: 1.24; text-wrap: balance; font-weight: 700; }
.st-lede { margin: 13px 0 0; color: var(--muted-foreground); font-size: 16px; max-width: 62ch; }
/* 섹션의 세로 여백.
*
* **이 값이 두 배로 쌓인다.** 섹션끼리 맞붙어 있어서 위 섹션의 아래 여백과 아래
* 섹션의 위 여백이 더해진다 — 84px 이면 사이가 168px 이 되어, 내용이 400px 인
* 섹션 둘 사이에 화면 절반이 빈다.
*
* 52px 로 줄여 사이를 104px 로 둔다. 섹션이 갈린 것은 알아보면서, 스크롤 두 번에
* 빈 화면만 지나가지는 않는다. */
.st-band { padding-block: clamp(30px, 4vw, 52px); }
/* 서브 페이지의 머리말.
*
* `.st-band` 가 아니라 세로 여백이 0 이었다 — 헤더 바로 밑에 글자가 붙는다.
* 메인 히어로는 제 여백을 따로 가지므로(`.crv-hero__grid`) 여기서 뺀다. */
.st-hero:not(.crv-hero) > .st-wrap { padding-block: clamp(34px, 4.6vw, 60px); }
/* 배경 교대를 쓰지 않는다 (2026-09-20). 섹션마다 바탕색이 갈리면 화면이 띠로
토막 나 보인다 — 흰 바탕 하나로 두고 경계는 카드 테두리와 여백이 맡는다.
이미 깔린 HTML 에 클래스가 남아 있어도 아무 일이 없도록 규칙만 지운다. */
/* ── 히어로 — 다운로드가 제일 먼저 온다 ───────────────────── */
/* 빛무리를 걷었다 (2026-10-02). 분홍 빛무리 둘이 히어로를 분홍 바탕으로 만들었다 —
바탕은 흰색이고, 핑크는 제목의 강조 낱말과 주 버튼이 맡는다. */
.st-hero { background: var(--background); }
.st-hero h1 { margin: 13px 0 0; font-size: clamp(30px, 4.5vw, 52px); letter-spacing: -.038em;
line-height: 1.24; font-weight: 700; text-wrap: balance; }
/* ── 가운데로 세운 히어로 (블덱스 구조) ──────────────────────
*
* 2026-09-20 에 블덱스 실물을 다시 보고 가져왔다. 위에서 아래로 한 줄이다 —
* 작은 배너 → 큰 타이포 → 한 줄 카피 → **행동 하나** → 보조 링크.
*
* **두 열을 버리는 것이 요점이다.** 왼쪽에 글, 오른쪽에 그림을 두면 눈이 둘로
* 갈리고 "무엇을 하는 물건인지" 와 "무엇을 누르면 되는지" 가 같은 무게로 놓인다.
* 한 줄로 세우면 순서가 곧 중요도가 된다.
*
* 위 `.st-hero__in`(두 열)은 남겨 둔다 — 다른 화면이 아직 쓴다. */
/* 큰 타이포가 한 줄로 서게 폭을 좁힌다. 화면 끝까지 늘리면 한 줄이 2000px 이 된다.
*
* 가운데로 세운 히어로에서는 두 열일 때보다 **더 커야 한다.** 옆에 그림이 없으니
* 이 글자가 화면을 혼자 잡아야 하고, 작으면 넓은 여백 속에 떠 있는 문장이 된다. */
/* 맨 위 작은 배너. 블덱스는 여기에 업데이트 노트를 건다 — 우리는 걸 것이 아직
없으므로 **사실 한 줄**을 둔다. "곧 나옵니다" 같은 우리 쪽 할 일 메모는 두지 않는다. */
/* 66px 짜리 제목 밑에 15px 를 두면 한 줄 카피가 주석처럼 보인다. 이 문장이
"무엇을 하는 물건인지" 를 혼자 설명하므로 제목 다음으로 읽혀야 한다. */
/* 블덱스의 검색창만큼 크게. 이 화면에서 제일 먼저 눈에 걸려야 하는 것이다. */
.st-btn--xl { padding: 21px 50px; font-size: 19.5px; border-radius: var(--radius-xl); }
/* **두 줄로 나눠 적는다.** 한 문단으로 두면 "로그인 없이 받으실 수 있습니다" 가
가운데서 끊겨 "로그인 없 / 이 받으실 수 있습니다" 로 읽힌다. 사양은 사양끼리,
약속은 약속대로 줄을 나눈다. */
/* 그림은 맨 아래. 세로 흐름을 끊지 않게 여백을 크게 준다.
*
* **두 열일 때보다 작게.** 옆에 글이 없어 폰이 화면을 혼자 차지하는데, 원래 크기로
* 두면 세로로 한 화면을 더 먹어서 그 아래 섹션이 한참 밀린다. 여기서 폰은 주장이
* 아니라 곁들이다 — 진짜 증거는 바로 아래 쇼케이스가 맡는다. */
/* 새 값을 칠한다 — 형광펜으로 그은 모양.
*
* 아래 32% 만 칠하는 것이 요점이다. 글자 전체를 칠하면 배지가 되고, 아래만
* 칠하면 펜으로 그은 것이 된다. */
.st-hl {
color: var(--primary); padding: 0 .06em; border-radius: 3px; white-space: nowrap;
background: linear-gradient(to top,
color-mix(in srgb, var(--primary) 20%, transparent) 0,
color-mix(in srgb, var(--primary) 20%, transparent) 32%,
transparent 32%);
}
/* `.st-hero__lede` 와 `.st-get*` 규칙을 지웠다 (2026-09-20).
*
* 제품 페이지의 HTML 머리말이 쓰던 옷이다 — 흰 카드 안에 버튼 둘을 담던 것.
* 세 화면이 모두 `crever_hero` 블록을 쓰게 되면서 부르는 데가 없어졌다.
* 머리말의 한 줄은 그 블록의 `.crv-hero__lede` 가 맡는다. */
/* ── 버튼 ── */
.st-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 26px; border-radius: var(--radius-lg); font: inherit; font-size: 15.5px;
font-weight: 700; text-decoration: none; cursor: pointer;
background: transparent; border: 1.5px solid transparent;
transition: transform .12s, box-shadow .18s;
}
.st-btn:active { transform: translateY(1px); }
.st-btn--primary {
background: linear-gradient(135deg, var(--primary),
color-mix(in srgb, var(--primary) 62%, var(--color-white)));
color: var(--primary-foreground);
box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 30%, transparent);
}
.st-btn--primary:hover { box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 40%, transparent); }
.st-btn--line { border-color: var(--border); background: var(--card); color: var(--foreground); }
.st-btn--line:hover { border-color: var(--primary); color: var(--primary); }
/* ── 폰 목업 — 실제로 만든 장면이 넘어간다 ───────────────── */
.st-phonehold { display: grid; place-items: center; }
.st-phone {
position: relative; width: min(280px, 78vw); aspect-ratio: 9/16;
border-radius: 30px; background: #120A10; padding: 9px;
border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
box-shadow: 0 28px 66px color-mix(in srgb, var(--foreground) 26%, transparent);
}
.st-screen { position: relative; width: 100%; height: 100%; border-radius: 22px;
overflow: hidden; background: #000; }
/* `.st-frame`·`.st-cap`·`.st-progress` 규칙을 지웠다 (2026-09-20).
*
* 연출 컷 넉 장을 넘기고, 그 위에 우리가 적은 자막을 얹고, 진행 막대를 그리던
* 옷이다. 폰 안에 **이 프로그램이 실제로 만들어 올린 영상**이 들어가면서 셋 다
* 쓰이지 않는다 — 자막은 그 영상에 이미 구워져 있고, 재생 위치는 유튜브가
* 그린다. 폰 껍데기(`.st-phone`·`.st-screen`·`.st-live`)만 남는다. */
/* `.st-phonecap` 규칙을 지웠다 (2026-09-20). 폰 밑에 달던 설명 줄을 뺐고, 이 클래스를
붙이는 HTML 이 하나도 안 남았다. */
/* ── 나타나기 ── */
.js .st-reveal { opacity: 0; transform: translateY(26px); }
.js .st-reveal.is-in {
opacity: 1; transform: none;
transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
/* ── 만든 화면 갤러리 ──
*
* **한 줄에 다섯 장으로 못 박는다**(사용자 결정). 전에는 `auto-fit`/`minmax` 로
* 폭에 맡겼는데, 그러면 화면 폭에 따라 여섯 장이 되었다가 넉 장이 되었다가 해서
* 열 장이 5+5 로 딱 떨어지지 않고 마지막 줄에 한두 장만 남아 빈칸이 생겼다.
*
* 좁은 화면에서는 다섯 장이 손톱만 해지므로 단수를 줄인다. */
.st-gal { display: grid; grid-template-columns: repeat(5, 1fr);
gap: 12px; margin-top: 30px; }
@media (max-width: 900px) { .st-gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .st-gal { grid-template-columns: repeat(2, 1fr); } }
.st-gal figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden;
background: var(--card); border: 1px solid var(--border); aspect-ratio: 3/4; }
.st-gal img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s ease; }
.st-gal figure:hover img { transform: scale(1.05); }
/* ── 프로그램 화면 (제품 페이지) ────────────────────────────
*
* `.st-gal` 과 나눠 둔다. 저쪽은 3:4 세로 그림(만든 장면)이고 여기는 **가로로 넓은
* 앱 화면**이다. 같은 규칙에 넣으면 스크린샷이 세로로 잘려 무슨 화면인지 안 보인다.
*
* 잘라 내지 않는다(`contain`) — 화면 구석이 잘리면 "이 프로그램 이렇게 생겼구나"
* 를 보러 온 사람이 본 것이 반쪽이 된다. */
.st-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px; margin-top: 30px; }
.st-shots figure { margin: 0; }
.st-shots img {
display: block; width: 100%; height: auto;
border-radius: var(--radius-lg); border: 1px solid var(--border);
background: var(--card); box-shadow: var(--st-lift);
}
.st-shots figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted-foreground); }
/* ── 카드 ──────────────────────────────────────────────────
*
* **띠 색이 흰색일 때 카드가 안 보인다.** 바탕(`--background`, #FFFCFD)과
* 카드(`--card`, #FFFFFF)가 사실상 같은 색이라, 분홍 띠(`--band--alt`) 위에서는
* 카드가 떠 보이는데 흰 띠 위에서는 옅은 테두리 한 줄만 남아 그냥 글 뭉치로
* 읽혔다. 실제로 FAQ 를 카드로 바꿔 놓고도 "카드 같지 않다" 는 말을 들었다.
*
* 색으로 벌리려면 카드를 분홍으로 칠해야 하는데, 그러면 분홍 띠 위에서 또 같은
* 문제가 뒤집혀 생긴다. 그래서 **색이 아니라 그림자로 띄운다** — 띠 색이 무엇이든
* 통한다. 바탕이 무채색이 된 뒤로(2026-10-02) 그림자도 무채색이다. */
:root {
--st-lift: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent),
0 8px 22px color-mix(in srgb, var(--foreground) 7%, transparent);
--st-lift-hover: 0 2px 4px color-mix(in srgb, var(--foreground) 8%, transparent),
0 14px 34px color-mix(in srgb, var(--foreground) 13%, transparent);
}
/* **카드로 읽혀야 하는 것을 한자리에 모아 둔다.** 섹션마다 클래스 이름은 다르지만
* 눈에는 전부 "띠 위에 놓인 카드" 하나다. 각자 자기 규칙에서 그림자를 따로 주면
* 값이 조금씩 어긋나고, 나중에 하나를 고칠 때 나머지를 못 찾는다.
*
* 여기 없는 것 — 알약(`.st-flow li`), 갤러리 사진, 다운로드 절차 줄 — 은 카드가
* 아니라 목록이다. 전부 띄우면 화면에 뜬 것이 너무 많아져 아무것도 안 뜬 것과
* 같아진다. */
.st-signup { box-shadow: var(--st-lift); }
/* 여섯 장을 기본 격자에 두면 4 + 2 로 떨어져 끝줄이 비어 보인다. 셋씩 두 줄. */
/* 단계 카드(.st-steps·.st-step)·올라가는 곳 줄(.st-plat)을 지웠다 (2026-10-02).
블로그·동영상 v3 가 각각 기능 격자(.cv-feats)와 히어로 아래 로고 줄(.cv-plat)로
받았고, 옛 행은 꺼 두었다. */
/* 흐르는 로고 띠(.st-marq)를 지웠다 (2026-10-02). 메인 v3 는 히어로 아래에 로고를
이름과 함께 한 줄로 세운다(.cv-plat) — 판매 화면에서 로고만 흘러가면 치지직·스레드를
못 알아보는 사람이 있다. 옛 띠 행(creator-platforms)은 시더에서 꺼 두었다. */
/* ── 다섯 축 ── */
/* ── 채널 안전 ── */
/* 자료 카드는 표로 그린다.
*
* 처음에는 `- ` 로 썼는데 **블록 정화기가 그 태그들을 통째로 걷어내서**
* 이름과 값이 한 덩어리로 붙어 버렸다 ("가져온 곳미국 지질조사국…"). `
` 은
* 그대로 통과하고, 이름-값 쌍이라는 뜻에도 표가 더 맞는다. */
/* ── 성과 ── */
.st-bars { display: flex; flex-direction: column; gap: 13px; }
.st-bar { display: grid; grid-template-columns: 84px 1fr 52px; gap: 12px;
align-items: center; font-size: 13.5px; }
.st-bar > span:first-child { color: var(--muted-foreground); }
.st-bar__track { height: 9px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
.st-bar__track i { display: block; height: 100%; width: 0; border-radius: var(--radius-full);
background: var(--primary); transition: width 1s ease-out; }
.st-bar b { font-size: 12.5px; color: var(--primary); font-variant-numeric: tabular-nums; text-align: right; }
/* ── 비용 ── */
/* ── 요금 ── */
/* **판 배경을 두지 않는다** (2026-09-20). 분홍 판 위에 흰 카드를 올리면 바탕이
두 겹이 되어, 정작 봐야 할 카드가 그 안에 갇힌 것처럼 보인다. 흰 바탕 하나로
두고 경계는 카드 테두리가 맡는다. */
/* 1년 구독 혜택.
*
* **가격 바로 아래에 둔다.** 값을 본 순간이 "그래서 얼마짜리인가" 를 재는
* 자리라, 여기서 한 박자 늦으면 목록에 묻혀 그냥 지나간다. */
/* 요금제 셋 (블로그 · 동영상 · 둘 다).
*
* 글은 위, 카드 세 장은 아래 한 줄이다. 전처럼 옆에 두면 카드가 셋이라 좁아져
* 값이 안 읽힌다. 카드는 세로 flex 라 버튼과 "준비 중" 줄이 바닥에 맞춰진다 —
* 항목 수가 달라도 세 장의 아랫선이 같아야 한 줄로 읽힌다. */
/* 요금제 묶음의 이름표 — "달마다" / "1년치를 한 번에".
*
* 카드 여섯 장을 한 판에 늘어놓으면 어느 셋이 한 묶음인지 읽는 사람이 세어 봐야
* 한다. 묶음마다 줄 하나를 얹어 그 일을 없앤다. */
/* 체험 카드 줄. **한 장이라 3열 격자에 그냥 두면 왼쪽 1/3만 차지한다** — 옆의
* 빈자리가 "뭔가 빠졌다" 로 읽힌다. 두 칸 폭으로 세워 유료 카드들과 무게를 맞춘다. */
/* 준비 중인 것은 점선이다. 흐리게(opacity) 하면 값이 안 읽혀서 "얼마인가" 를
* 묻는 사람이 못 본다. 선만 다르게 한다. */
/* ── 가입 ── */
/* 가입 안내.
*
* **폼을 여기 두지 않는다.** 블록 HTML 은 정화기가 `