→
로 바꿨다(문장 상자 span.s 를 받으려고 — build.py 는 p·li·
figcaption 만 문다). 그 순간 `.hero p { margin: 0 0 28px; max-width: 30em }` 이 딸려
와서 아래 여백이 28px 이 되고 폭이 좁아진다. 둘 다 여기서 되돌린다.
🔴 `margin-top` 만 적으면 아래 28px 이 남는다 — `.demo-note` 때와 같은 자리다(위 주석). */
.hero .cta-note { font-size: 15.5px; color: var(--ink-3); margin: 14px 0 0; max-width: none; }
/* 어디에 올려 드리는지를 헤드라인보다 먼저 말한다 — 뭘 파는 곳인지 모르면 헤드라인도 안 읽힌다. */
.hero-kicker {
font-size: 15px; font-weight: 700; color: var(--accent);
margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.hero-kicker span {
font-weight: 600; color: var(--ink-3); background: #fff;
border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13.5px;
}
/* 올려 드리는 두 곳은 색으로 알아보게 한다(2026-08-10). 색은 앞의 점에만 있고
글자는 --ink-2 다 — 초록·주황을 글자에 쓰면 흰 배경에서 안 읽힌다. */
.hero-kicker .ch { color: var(--ink-2); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.hero-kicker .ch i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.hero-kicker .ch.naver { border-color: rgba(3, 199, 90, .45); }
.hero-kicker .ch.naver i { background: var(--naver); }
.hero-kicker .ch.danggeun { border-color: rgba(255, 111, 15, .5); }
.hero-kicker .ch.danggeun i { background: var(--danggeun); }
/* 화면을 옮겨 그린 것. 사진이 아니라 글자라서 어느 폭에서도 또렷하다. */
.hero-demo {
background: #fff; border: 1px solid var(--line); border-radius: 18px;
padding: 14px 14px 16px; box-shadow: 0 14px 34px rgba(0,0,0,.09);
}
.demo-top {
display: flex; align-items: center; gap: 7px;
font-size: 13.5px; font-weight: 700; color: var(--ink-3); padding: 2px 4px 12px;
}
.demo-dot { width: 9px; height: 9px; border-radius: 50%; background: #35B37E; flex: 0 0 auto; }
/* 실제 화면 녹화(2026-08-10). 폰 화면을 찍은 것이라 세로로 길다 — 폭을 묶어 두지 않으면
히어로가 화면 하나를 통째로 잡아먹는다. 720×803 으로 잘라(제목 띠·아래 메뉴 제거) 절반 크기로 보여 준다. */
.demo-shot {
display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto;
border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
/* 움직임을 불편해하는 사람에게는 멈춘 한 장을 준다 — 움짤은 멈출 수가 없다.
기본은 움짤, 그 설정을 켠 사람만 정지 사진으로 바뀐다.
⚠ 2026-08-10: 정지 사진만 놓으면 손님 눈에는 고장이다(정인님 신고). 누를 자리를 준다. */
.demo-play { position: relative; }
.demo-shot-still, .demo-play-btn { display: none; }
@media (prefers-reduced-motion: reduce) {
.demo-shot { display: none; }
.demo-shot-still { display: block; }
.demo-play-btn { display: block; }
}
/* 눌러서 튼 뒤에는 버튼이 사라지고 움짤만 남는다. */
.demo-play.is-playing .demo-shot { display: block; }
.demo-play.is-playing .demo-shot-still,
.demo-play.is-playing .demo-play-btn { display: none; }
.demo-play-btn {
position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
background: rgba(20, 20, 20, .88); color: #fff; border: 0; border-radius: 999px;
font: 700 15px/1 inherit; padding: 13px 20px; cursor: pointer;
min-height: var(--tap); white-space: nowrap;
}
.demo-play-btn:hover { background: rgba(20, 20, 20, 1); }
/* 2026-08-10 정인님: "움짤 바로 아래 글자가 있어서 여백 조금 주기."
🔴 재 보니 여백이 '좁은' 게 아니라 **0** 이었다. 두 줄 다 `.hero` 안의
라서
위쪽 `.hero p { margin: 0 0 28px }`(0,1,1)가 `.demo-note`(0,1,0)를 이기고 있었다 —
여기 적어 둔 13px·6px 은 처음부터 화면에 닿은 적이 없다.
그래서 값만 키우면 또 안 듣는다. **이름을 하나 더 붙여 힘을 올린다.**
움짤은 테두리가 있는 상자다. 글자가 붙어 서면 상자에 딸린 설명으로 읽히는데,
이 줄은 설명이 아니라 약속이다("10분 뒤면 올라가 있습니다"). 떨어져 서야 한다. */
.hero-demo .demo-note { font-size: 15px; color: var(--ink-2); margin: 24px 4px 0; text-align: center; }
.hero-demo .demo-note b { color: var(--accent); font-weight: 800; }
.hero-demo .demo-real { font-size: 12.5px; color: var(--ink-3); margin: 8px 4px 0; text-align: center; }
/* ── 공통 구역 ── */
section { padding: 74px 0; }
/* 2026-08-10 정인님: "브랜드 컬러도 적절히 쓰고." 한 칸 걸러 깔리는 이 바탕이 화면에서
제일 넓은 면인데 여태 차가운 회색(#f7f7f8)이었다 — 브랜드가 '해뜨는 주홍'인데
가장 넓은 면이 회색이면 페이지 전체가 무채색으로 읽힌다. 옅은 크림으로 바꾼다.
⚠ --bg-2 자체를 고치지 않는다. 그 값은 푸터·표 머리·막대 홈처럼 **회색이어야 맞는**
자리에서 같이 쓰이고 있어서, 한 번에 바꾸면 그쪽까지 크림이 된다. */
section.tinted { background: var(--accent-tint-2); }
/* h1 도 받는다 — /ready 처럼 히어로가 없는 쪽은 첫 제목이 h1 이어야 하는데(제목 차례가
h2 부터 시작하면 읽어주는 기계가 헷갈린다) 크기는 다른 구역 제목과 같아야 한다. */
h1.sec, h2.sec { font-size: 32px; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 8px; font-weight: 800; }
p.sec-sub { font-size: 17.5px; color: var(--ink-3); margin: 0 0 34px; max-width: 38em; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.col {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
}
.col h3 { font-size: 20px; margin: 10px 0 8px; letter-spacing: -.01em; }
.col p { font-size: 16.5px; color: var(--ink-2); margin: 0; }
.col .num {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 10px; background: var(--accent-tint-2); color: var(--accent); font-weight: 800; font-size: 17px;
}
/* 이름 뜻처럼 두 갈래만 있는 구역 — 셋으로 나누면 한 칸이 비어 어색하다. */
.cols.two { grid-template-columns: repeat(2, 1fr); }
/* 구역 머리말. 큰 제목만 있으면 스크롤할 때 어디가 어디인지 안 잡힌다 —
눈이 먼저 걸리는 작은 라벨 한 줄이 구역의 경계를 만든다. */
/* 2026-08-10: 짧은 띠 + 글자였는데, 띠가 얇아서 라벨인지 본문인지 구별이 안 됐다
(정인님 "카피와 텍스트 등 명확히 구별되어 잘 읽혀" ↔ 우리 쪽은 "딱딱한 페이지").
알약으로 감싸면 라벨은 라벨로만 읽히고, 그 아래 큰 제목이 카피 자리를 온전히 갖는다. */
.eyebrow {
display: inline-block; font-size: 13.5px; font-weight: 800; color: var(--accent);
letter-spacing: .01em; margin: 0 0 12px;
background: rgba(var(--accent-rgb), .09); border-radius: 999px; padding: 6px 14px;
}
/* ── 형광펜 ──
참고 페이지가 카피와 설명을 가르는 방법 중 하나다. 밑에서 42% 만 칠한다 —
글자 전체를 덮으면 대비가 떨어져 노안에서 먼저 읽기 어려워진다.
글자색은 --ink 그대로 두고 배경만 옅게 깐다(주홍 글자 위 주홍 배경은 안 읽힌다).
⚠ 한 화면에 두 번 넘게 쓰지 않는다. 다 칠하면 아무 데도 안 칠한 것과 같다. */
/* 🔴 2026-08-11 정인님이 짚으신 자리 — 첫 화면 한 줄이 PC 에서 이렇게 접혔다:
"네이버 블로그와 당근에 올릴 가게 홍보글을, 매일 아침 / 준비해 드립니다."
형광펜은 '매일 아침 준비해 드립니다.' 통째인데 그게 **두 줄에 걸쳐 쪼개져** 있었다.
칠한 자리가 두 동강 나면 형광펜이 하는 일(눈이 여기서 멈춘다)이 사라진다.
inline-block = 상자째로만 다음 줄로 내려간다. 그래서 쉼표에서 접힌다 — 정인님이
적어 주신 그 줄바꿈이 그대로 나온다. 폭이 바뀌어도 브라우저가 알아서 잡는다
(
을 손으로 박으면 폭이 바뀔 때 오히려 어긋난다 — 위 .s 주석과 같은 이유).
⚠ 형광펜 자체가 한 줄보다 길면 그 안에서는 평소대로 접힌다(넘치지 않는다). */
/* 문구 상자 — 형광펜과 같은 수를 형광펜 없는 마디에도 쓴다.
2026-08-12 정인님이 첫 화면에서 "모바일에서만 '그 자리에 매일 아침, / 오늘 올릴~'"
로 접히길 원하셨다. 뒷마디를 이 상자로 묶으면 좁은 폭에서는 상자째 내려가 쉼표에서
접히고, 넓은 폭에서는 한 줄에 그대로 선다 — 폭마다 다르게 나와야 하는 줄바꿈을
손
없이 얻는 유일한 길이다(
은 폭이 바뀌면 엉뚱한 자리에서 끊는다). */
.phr { display: inline-block; }
.mk {
display: inline-block;
background: linear-gradient(to top, rgba(var(--accent-rgb), .2) 42%, transparent 42%);
font-weight: 800; color: var(--ink); padding: 0 2px; border-radius: 2px;
}
/* ── 가뜬이 하는 일 — 세 고비로 묶는다 ──
기능 열 개를 평평하게 늘어놓았더니 "그냥 글 나열이라 하나도 안 읽혀"(정인님 2026-08-09).
개수가 문제가 아니라 **묶음이 없는 게** 문제였다. 사장님이 실제로 막히는 순서
(뭘 쓰지 → 어떻게 쓰지 → 어떻게 올리지)로 세 덩이를 만들면, 읽지 않고 훑어도
"내가 막히는 데가 어디쯤이구나"가 잡힌다. */
/* 2026-08-10: 고비와 고비 사이를 벌리고 그 사이에 ↓ 를 세운다(세 걸음 #how 와 같은 장치).
화살표가 설 자리가 있어야 하므로 34 → 54px. 안 그러면 고비 셋이 '카드 세 묶음'으로 읽힌다. */
.stage { position: relative; margin-top: 54px; }
.stage:first-of-type { margin-top: 26px; }
.stage + .stage::before {
content: '↓'; position: absolute; left: 50%; top: -40px; transform: translateX(-50%);
font-size: 23px; line-height: 1; font-weight: 800; color: var(--accent);
}
/* 고비 머리말 왼쪽, 그 고비의 **진짜 화면 사진**을 오른쪽에 세운다(2026-08-10 정인님 "글 나열").
글로 열 번 적는 것보다 화면 한 장이 빠르다. 사진은 홈 #how 에 쓰던 것과 같은 파일이다 —
앱을 고치면 두 쪽이 같이 거짓말을 하므로 CLAUDE.md 의 '베낀 자리' 표에 이 쪽도 들어간다. */
/* ⚠ 칸 비율은 홈 #how(.step-row 300px + 1fr)와 같게 둔다. 처음엔 설명을 넓게(1fr 420px)
두었는데 그러면 사진이 420px 로 줄어 화면 속 글자가 안 읽혔다 — 이 리포에 이미
적혀 있는 규칙에 걸린다("읽을 수 없는 화면 사진은 장식이지 증거가 아니다", 2026-08-09 실측).
머리말은 라벨·제목·한 줄뿐이라 340px 로 충분하고, 사진은 640px 을 쓴다. */
.stage-top {
display: grid; grid-template-columns: 340px 1fr; gap: 30px;
align-items: center; margin-bottom: 20px;
}
.stage-head { border-left: 4px solid var(--accent); padding: 2px 0 2px 16px; }
/* 화면 사진 없이 머리말만 있는 고비(요금 쪽) — 사진이 있는 쪽은 .stage-top 이 아래
여백을 갖고 있지만, 머리말이 .stage 바로 밑에 오면 그 여백이 없어서 카드에 붙는다. */
.stage > .stage-head { margin-bottom: 20px; }
.stage-n { font-size: 14px; font-weight: 800; color: var(--accent); }
.stage-head h3 { font-size: 25px; margin: 2px 0 4px; letter-spacing: -.02em; }
.stage-line { font-size: 16.5px; color: var(--ink-3); margin: 0; }
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feat {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
/* 첫 줄만 굵게 세운다 — 훑는 사람은 이 줄만 읽고, 궁금한 것만 아래를 읽는다. */
.feat > b { display: block; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 7px; }
.feat p { font-size: 16px; color: var(--ink-2); margin: 0; line-height: 1.7; }
/* ── 비슷해 보이는 것 지우기 (2026-08-10) ──
정인님: "이런 문구는 글이 아니라 눈에 확 잘보이게 비교표 디자인으로."
취소선 셋을 한 줄에 늘어놓은 산문이었다 — 눈이 멈출 자리가 없었다.
한 줄에 하나씩 세우고, 왼쪽(선택지)과 오른쪽(그래서 어떻게 되는지)을 갈라 둔다.
마지막 줄만 색을 넣어 우리 것이 어디인지 한눈에 걸리게 한다. */
.vs {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; margin: 0 0 30px;
}
.vs-row { display: grid; grid-template-columns: 34% 1fr; border-top: 1px solid var(--line); }
.vs-row:first-child { border-top: 0; }
.vs-name {
padding: 16px 18px; font-weight: 700; font-size: 16.5px; color: var(--ink-3);
background: var(--bg-2); display: flex; align-items: center; gap: 8px;
}
/* 아닌 것에는 X, 우리 것에는 O. 글자가 아니라 기호가 먼저 눈에 걸린다. */
.vs-name::before { content: '✕'; font-size: 15px; color: var(--ink-3); flex: 0 0 auto; }
.vs-why { padding: 16px 18px; font-size: 16px; color: var(--ink-2); display: flex; align-items: center; }
.vs-us .vs-name { background: var(--accent); color: #fff; font-size: 18px; }
.vs-us .vs-name::before { content: '✓'; color: #fff; font-weight: 800; }
.vs-us .vs-why { background: var(--accent-tint); color: var(--ink); font-size: 17px; }
/* 뽑은 문장 하나 — 구역 맨 앞에서 눈을 한 번 멈추게 한다. */
.pull {
margin: 26px 0 30px; padding: 26px 30px; background: var(--accent-tint);
border-left: 5px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
font-size: 21px; font-weight: 700; line-height: 1.6; letter-spacing: -.02em; color: var(--ink);
max-width: 30em;
}
/* 크림 바탕 구역에서는 옅은 주홍(accent-tint)이 바탕(accent-tint-2)과 거의 같은 색이라
상자가 사라지고 왼쪽 막대만 남는다 — 눈을 멈추게 하려고 만든 자리가 안 멈춘다.
그 자리에서만 흰색으로 뒤집는다(흰 구역에서는 반대로 흰 상자가 안 보인다). */
section.tinted .pull { background: #fff; }
/* ── 왜 이렇게 만들었나 ──
번호를 왼쪽에 세워 세로 축을 만든다. 축이 없으면 문단 일곱 개가 한 덩어리로 보인다.
맨 아랫줄이 그 문단의 결론(사장님이 얻는 것)이라 색으로 따로 세운다. */
/* 2026-08-10: 선으로만 갈라 둔 문단 일곱 개였다 — 정인님이 "글 나열"이라고 하신 바로 그 자리다.
글을 줄이는 대신 **문단마다 흰 카드**를 씌운다. 구역 바탕이 크림이라 카드가 떠올라서,
한 덩어리로 보이던 것이 일곱 덩어리로 갈라진다(눈이 멈출 자리가 생긴다). */
.why { display: flex; flex-direction: column; gap: 14px; }
.why-row {
display: flex; gap: 20px; padding: 24px 26px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.why-n {
flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--accent);
background: var(--accent-tint-2); border-radius: 9px; padding: 5px 11px; height: fit-content;
margin-top: 4px;
}
.why-body { min-width: 0; }
.why-row h3 { font-size: 21px; margin: 0 0 10px; letter-spacing: -.02em; }
.why-row p { font-size: 16.5px; color: var(--ink-2); margin: 0; max-width: 42em; }
.why-eff {
color: var(--accent) !important; font-weight: 700; margin: 13px 0 0 !important;
background: var(--accent-tint-2); border-radius: 10px; padding: 11px 16px; display: inline-block;
}
.why-eff::before { content: '→ '; }
/* ── 상단 메뉴 ──
쪽이 셋이 되면서(메인·기능·요금) 오갈 길이 필요해졌다(정인님 2026-08-09 '탭을 쪼개는건?').
메인은 '가뜬이 뭔지'만 말하고, 기능 열 개와 플랜별 차이는 각자 쪽으로 나갔다 —
한 쪽에 다 넣으니 "그냥 글 나열이라 하나도 안 읽혀"가 됐다. */
.nav { display: flex; gap: 4px; margin-left: 18px; }
.nav a {
color: var(--ink-2); text-decoration: none; font-size: 16px; font-weight: 600;
padding: 9px 14px; border-radius: 9px;
}
.nav a:hover { background: var(--bg-2); color: var(--ink); }
/* ── 삼선탭 (2026-08-12 정인님 msg 7383) ──
윗줄은 좁고(폰에서 로고까지 밀려 났던 자리다) 쪽은 늘어난다. 늘어난 쪽으로 가는 문을
여기 모은다. 여는 일은 가 하므로 자바스크립트가 죽어도 열린다. */
.more { position: relative; flex: 0 0 auto; }
.more > summary {
list-style: none; cursor: pointer;
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
/* 사파리는 아직 옛 방식으로 삼각형을 그린다 — list-style 만으로는 안 지워진다. */
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: var(--bg-2); }
.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 삼선은 글자가 아니라 **선 셋**이다. ☰(U+2630)를 글자로 찍으면 기기마다 굵기·크기가
제각각이고, 폰트가 없는 안드로이드에서는 네모(두부)로 뜬다. 선으로 그리면 어디서나 같다. */
.more-bars { position: relative; }
.more-bars, .more-bars::before, .more-bars::after {
display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
}
.more-bars::before, .more-bars::after { content: ""; position: absolute; left: 0; }
.more-bars::before { top: -6px; }
.more-bars::after { top: 6px; }
/* ⚠ 열렸을 때 X 로 바꾸지 않는다 — 닫는 길이 셋(다시 누르기·바깥 누르기·ESC)이라
모양으로 알려 줄 필요가 없고, 바뀌면 '삼선이 없어졌다'로 읽는 분이 계신다. */
.more-panel {
position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
min-width: 264px; max-width: calc(100vw - 24px); padding: 8px;
background: #fff; border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 12px 28px rgba(0,0,0,.13);
display: flex; flex-direction: column; gap: 2px;
}
.more-panel a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.more-panel a:hover { background: var(--bg-2); }
/* 로그인/내 구독은 성격이 다른 칸이라 맨 아래에 선 하나를 두고 앉힌다
(2026-08-12 정인님 "로그인이 중간에 있으니 튀어서"). 선이 없으면 그냥 순서만 바뀐
것으로 보여서, 왜 저 칸만 말투가 다른지가 여전히 안 풀린다. */
.more-me { margin-top: 6px; padding-top: 12px !important; border-top: 1px solid var(--line); }
.more-panel b { display: block; color: var(--ink); font-size: 16px; font-weight: 700; }
/* 한 줄 설명이 있어야 '블로기지'가 뭔지 모르는 분도 누를지 말지 정하실 수 있다. */
.more-panel small {
display: block; margin-top: 2px; color: var(--ink-2); font-size: 13.5px; font-weight: 500;
}
.more-link { margin: 28px 0 0; }
/* ══ 첫 화면 다시 짜기 (2026-08-09) ═══════════════════════════════════════
정인님: **"여기도 장점이 잘 읽히지 않음"** + 회사에서 만든 1bpluschool.com 참고.
재 보니 장점이 안 읽히는 게 아니라 **홈에 장점이 한 줄도 없었다.** 두 번째 구역이
브랜드 이름 어원이었고(뭘 해주는 물건인지 알기 전에 이름 뜻부터 읽는다), 그 다음
'세 고비'는 문제만 세 번 말한 뒤 "고비마다 뭘 해주는지 보기" 링크로 떠넘겼다.
즉 방문자는 홈을 다 읽어도 우리가 **뭘 해주는지** 모른 채 나간다.
1bplus 에서 가져온 뼈대: 히어로 → 통증 → 해주는 일(결과까지) → 다른 점 → 대상 →
요금 → CTA. 통증을 먼저 두면 그 다음 문장이 전부 '내 얘기'가 된다.
가져오지 않은 것: 숫자·로고·후기. 출시 전이라 **없는 증거는 만들지 않는다.** */
/* 히어로 CTA 는 하나만 주홍이다(앱 규칙 1과 같다) — 둘이 나란히 서면 무엇이 먼저인지
사라진다. 두 번째는 버튼이 아니라 글자 링크로 내린다. */
.cta-second {
display: inline-flex; align-items: center; min-height: var(--tap); padding: 8px 4px;
font-size: 17px; font-weight: 700; color: var(--ink-2); text-decoration: none;
}
.cta-second::after { content: ' ↓'; margin-left: 6px; }
.cta-second:hover { color: var(--accent); }
/* 통증 — 사장님 입에서 나온 말로 적는다. 우리가 정리한 문장으로 적으면 남 얘기가 된다.
2026-08-10: 생김새도 말로 바꾼다(정인님 "말풍선… 살아있는 페이지"). 따옴표 안의 말을
흰 네모에 담아 두면 말이 아니라 항목으로 읽힌다. 꼬리를 달아 말풍선으로 세운다.
꼬리는 그림 파일이 아니라 CSS 네모를 돌려 만든다 — 어느 폭에서도 안 흐려진다.
⚠ 말한 사람 이름은 안 붙인다. 붙이는 순간 없는 후기가 된다(아직 유료 사용자가 없다). */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
.pain {
position: relative;
background: #fff; border: 1px solid var(--line); border-radius: 18px 18px 18px 4px;
padding: 22px 22px 24px; margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--ink-2);
box-shadow: 0 3px 10px rgba(0,0,0,.045);
}
.pain b { color: var(--ink); }
/* 꼬리: 흰 네모를 45도 돌려 왼쪽 아래 모서리에 반쯤 걸친다. 테두리는 바깥 두 변에만 남긴다. */
.pain::after {
content: ''; position: absolute; left: 20px; bottom: -7px; width: 14px; height: 14px;
background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
transform: rotate(45deg) skew(6deg, 6deg); border-radius: 0 0 3px 0;
}
.pain-note {
margin: 22px 0 0; font-size: 17.5px; line-height: 1.8; color: var(--ink-2); max-width: 44em;
}
.pain-note b { color: var(--ink); }
/* ── 붙어 선 자리 떼기 (2026-08-10 정인님 "전체적으로 다닥다닥 붙어있는 부분들") ──
재 보니 짐작이 아니라 **0px** 인 자리가 둘이었다. 둘 다 아래쪽(카드 묶음·버튼)에
위 여백이 아예 없어서, 위 문단의 margin-bottom 하나에 기대고 있었는데 그 문단들은
margin-bottom 이 0 이었다.
① 홈 #wins — "그건 가뜬이 안 만듭니다" ↔ "뭘 쓰지" 카드 세 장
② 요금 #ready — 준비물 카드 두 장 ↔ [없으신가요? 만들러 가기]
글 다음에 카드나 버튼이 오면 한 박자 쉬어야 한다. 아래쪽에 여백을 준다 —
위 문단에 주면 그 문단을 다른 데서 쓸 때마다 따라다닌다. */
.wins { margin-top: 30px; }
.cta-row { margin-top: 30px; }
.hero .cta-row { margin-top: 0; } /* 히어로는 위에서 이미 간격을 잡아 뒀다 */
/* 작은 제목(.cmp-h) 다음에 곧바로 카드가 오는 자리 — 제목과 카드가 6px 로 붙어 있었다.
설명 한 줄(.sec-sub)이 끼는 자리는 그대로 둔다(제목과 설명은 원래 붙어야 한 덩이다). */
.cmp-h + .gets, .cmp-h + .feats, .cmp-h + .set,
.cmp-h + .bars, .cmp-h + .plans, .cmp-h + .stage { margin-top: 20px; }
/* ── 어머니 이야기 · 정직하게 말씀드릴 것 (2026-08-10 정인님 8번) ── */
.kakao { margin: 26px 0; }
.kakao img {
width: 100%; height: auto; display: block;
border: 1px solid var(--line); border-radius: var(--radius);
}
.kakao figcaption {
margin-top: 12px; font-size: 16px; line-height: 1.75; color: var(--ink-2);
}
.kakao figcaption b { color: var(--ink); }
/* 15분 — 어머니 이야기에 들어가는 **유일한 숫자**다(2026-08-11 정인님). 편수는 여전히
안 적는다. 하나뿐인 숫자를 문단에 섞어 흘리면 안 읽힌다 — 왼쪽에 주홍 띠를 세운다.
⚠ 숫자만 크게 키우지 않는다. 이 자리의 힘은 '15'가 아니라 '어머니가 · 처음 · 15분'
이라는 문장 전체다. */
.honest-num {
margin: 28px 0 0; padding: 20px 22px;
background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--accent);
border-radius: 4px var(--radius) var(--radius) 4px;
font-size: 18.5px; line-height: 1.7; color: var(--ink-2);
box-shadow: 0 3px 10px rgba(0,0,0,.045);
}
.honest-num b { color: var(--accent); }
/* 없는 증거를 흉내 내지 않는 자리다 — 상자로 세워야 '숨긴 게 아니라 먼저 말한 것'이 된다. */
.honest {
margin: 28px 0 0; padding: 26px 24px;
background: #fff; border: 2px solid var(--accent); border-radius: var(--radius);
}
.honest h3 { margin: 0 0 14px; font-size: 20px; color: var(--accent); }
.honest ul { margin: 0; padding-left: 20px; }
.honest li { font-size: 16.5px; line-height: 1.8; color: var(--ink-2); margin-bottom: 10px; }
.honest li:last-child { margin-bottom: 0; }
.honest li b { color: var(--ink); }
/* 해주는 일 — 한 덩이가 '고비 → 해주는 일 → 그래서 어떻게 되나' 세 줄이다.
마지막 줄(win-eff)이 핵심이다. 기능만 적으면 사장님은 그게 자기한테 뭔지 계산해야 한다. */
.wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.win {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
border-top: 4px solid var(--accent); padding: 24px 22px 20px;
display: flex; flex-direction: column; height: 100%;
}
/* 2026-08-10: 카드 한 장이 그 자체로 '전 → 후' 다. 예전에는 고비도 주홍, 제목도 검정
굵은 글씨라 둘이 같은 무게로 서 있었다 — 무엇이 걱정이고 무엇이 답인지 눈이 못 갈랐다.
걱정은 회색 알약으로 눕히고, 화살표를 한 칸 내려긋고, 그 아래 굵은 제목이 답이 된다. */
/* ⚠ .win 은 세로 flex 다. inline-block 만 걸면 stretch 가 이겨서 알약이 카드 폭만큼
늘어난다(띠처럼 보인다 — .plans.mini .plan .tag 에서 이미 한 번 겪은 자리다).
align-self 로 왼쪽에 붙여 둬야 알약 크기가 글자 길이만큼만 잡힌다. */
/* ⚠ 2026-08-11 정인님 폰 실측: 알약 글자가 흐려서 안 읽힌다. --ink-3 은 흐림의 하한이라
회색 바탕(--bg-2) 위에 14.5px 로 얹으면 그 하한도 못 지킨다. 한 칸 진하게(--ink-2),
반 칸 크게 둔다 — 그래도 검정 굵은 제목보다는 뒤에 서므로 '걱정 → 답'은 그대로 읽힌다. */
.win-n {
display: inline-block; align-self: flex-start;
font-size: 15px; font-weight: 700; color: var(--ink-2);
background: var(--bg-2); border: 1px solid var(--line);
border-radius: 999px; padding: 5px 13px;
}
.win h3 { font-size: 23px; margin: 2px 0 12px; letter-spacing: -.02em; }
/* ⚠ 2026-08-11 정인님 폰 실측: "하단 화살표·우측 화살표가 반복되어 정신없다".
폰에서는 카드 셋이 세로로 눕는다 — 가로로 설 때는 카드마다 한 번씩이던 ↓ 와 →
가, 한 줄로 서면 ↓→↓→↓→ 여섯 개가 되어 흐름 표시가 아니라 무늬가 된다.
↓ 는 짧은 주홍 선으로 바꾸고(걱정과 답 사이는 그대로 이어진다), → 는 지운다
— 마지막 줄은 이미 윗줄(border-top)과 주홍 굵은 글씨로 갈라져 있다. */
.win h3::before {
content: ''; display: block; width: 2px; height: 15px;
background: var(--accent); opacity: .5; border-radius: 1px;
margin: 12px 0 8px 5px;
}
.win-do { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 16px; }
.win-eff {
margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line);
font-size: 16.5px; font-weight: 700; color: var(--accent); line-height: 1.6;
}
/* 세 걸음 끝에 걸리는 시간을 적는다 — '세 가지뿐'이라는 말보다 '10분'이 더 잘 읽힌다. */
.step-time {
margin: 24px 0 0; font-size: 18px; color: var(--ink-2);
}
.step-time b { color: var(--accent); font-weight: 800; }
/* 2026-08-10 '이런 게 제일 걸리실 겁니다'(.diffs) 는 FAQ 로 합쳤다 — 물음표로 끝나는
글의 자리는 아코디언이다. 남은 규칙은 지운다(쓰는 데가 없는 CSS 는 다음 사람을 속인다). */
/* ── 누가 쓰면 좋은가 ──
'안 맞는 분'을 같이 적는다. 모두에게 맞다고 하면 아무에게도 안 맞는 말이 되고,
안 맞는 분이 결제했다가 환불하는 게 서로에게 제일 나쁘다. */
.fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.fit-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.fit-box.yes { border: 2px solid var(--accent); }
.fit-box h3 { font-size: 20px; margin: 0 0 14px; }
.fit-box.yes h3 { color: var(--accent); }
.fit-box ul { list-style: none; padding: 0; margin: 0; }
.fit-box li {
font-size: 16.5px; color: var(--ink-2); padding: 9px 0 9px 24px; position: relative; line-height: 1.6;
}
.fit-box.yes li::before {
content: ''; position: absolute; left: 2px; top: 17px; width: 11px; height: 6px;
border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
transform: rotate(-45deg);
}
.fit-box.no li::before {
content: ''; position: absolute; left: 2px; top: 20px; width: 11px; height: 0;
border-top: 2.5px solid var(--ink-3);
}
/* ── 플랜 비교표 ──
좁은 화면에서 표를 줄이면 글자가 세로로 쪼개진다. 표는 제 폭을 지키고 표만 옆으로 민다. */
/* ── 요금제 차이 막대 ──
2026-08-10. 표에서 다른 줄이 딱 하나라면 표를 그릴 이유가 없다 — 나머지 '있음/있음'이
그 한 줄을 덮어 버린다. 다른 하나만 남기고, 숫자 대신 **길이 차이**로 보이게 눕혔다.
막대 폭은 build.py 가 글 개수에서 계산한다(개수를 고치면 막대도 같이 움직인다). */
.bars { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.bar-row { display: grid; grid-template-columns: 86px 1fr; gap: 6px 14px; align-items: center; }
.bar-name { font-size: 17px; font-weight: 700; color: var(--ink-2); }
.bar-track { background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.bar-fill {
background: var(--accent-tint); color: var(--accent);
font-size: 17px; font-weight: 800; letter-spacing: -.01em;
padding: 13px 14px; text-align: right; white-space: nowrap; border-radius: 8px;
}
.bar-row.hi .bar-name { color: var(--ink); }
.bar-row.hi .bar-fill { background: var(--accent); color: #fff; }
.bar-note { grid-column: 2; font-size: 15.5px; color: var(--ink-3); }
.cmp-h { font-size: 22px; margin: 40px 0 6px; letter-spacing: -.01em; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
width: 100%; min-width: 460px; border-collapse: collapse;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.cmp th, .cmp td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.cmp thead th { background: var(--bg-2); font-size: 17px; text-align: center; }
.cmp thead th small { font-weight: 400; color: var(--ink-3); font-size: 14.5px; }
.cmp thead th:first-child { width: 44%; }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--ink-2); }
.cmp tbody td { text-align: center; color: var(--ink-3); }
.cmp tr.diff td { color: var(--accent); font-size: 17.5px; }
.cmp tr.diff th { color: var(--ink); font-weight: 700; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-note { font-size: 16px; color: var(--ink-2); margin: 16px 0 0; line-height: 1.7; }
/* ── 이렇게 씁니다 (화면 사진) ──
2026-08-09: 첫 화면에서 `.shot-empty`(빗금 친 '화면 사진 자리' 네모) 세 개를 내렸다.
라이브 사이트에 자리표시자가 떠 있으면 "아직 안 만든 서비스"로 읽힌다 — 실제로 정인님이
"너무 엉망"이라 한 자리 중 하나다. 규칙은 화면 자리와 같다: **채울 것이 없으면 자리를
비워 두지 말고 그 자리를 없앤다.** 진짜 화면 사진이 준비되면 이 클래스를 다시 쓴다
(그때는 `.shot` 안에 ![]()
를 넣는다). */
/* 세 걸음을 **줄로 눕힌다** — 설명은 왼쪽, 화면 사진은 오른쪽.
카드 3열이었을 때 사진이 270px 로 줄어 글자가 하나도 안 읽혔다(2026-08-09 실측).
읽을 수 없는 화면 사진은 증거가 아니라 장식이다. 줄로 세우면 사진이 640px 을 쓴다. */
/* 2026-08-10: 줄 셋을 그냥 쌓아 두면 '세 걸음'이 아니라 '카드 세 장'으로 읽힌다.
사이에 화살표를 세워 흐름을 만든다(정인님 "화살표… 잘 읽혀"). 화살표가 설 자리가
있어야 하므로 사이 간격을 18 → 32px 로 벌린다. */
.steps { display: flex; flex-direction: column; gap: 32px; }
.step-row {
position: relative;
display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 24px 26px;
}
.step-row + .step-row::before {
content: '↓'; position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
font-size: 23px; line-height: 1; font-weight: 800; color: var(--accent);
}
.step-body h3 { font-size: 21px; margin: 10px 0 8px; letter-spacing: -.01em; }
.step-body p { font-size: 16.5px; color: var(--ink-2); margin: 0; }
.step-body .num {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 10px; background: var(--accent-tint-2); color: var(--accent);
font-weight: 800; font-size: 17px;
}
.shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.shot img { display: block; width: 100%; height: auto; }
.shot-note { margin: 20px 0 0; font-size: 15px; color: var(--ink-3); }
/* ── 가격 ── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
/* 2026-08-09 정인님: 세팅 요금 폐지 — 요금 카드가 셋에서 둘로 줄었다.
3열 격자에 둘만 두면 왼쪽으로 쏠려 빈 칸이 하나 남는다. */
.plans.two { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }
/* 사전신청 폼을 걷어낸 자리에 남는 버튼 줄. 폼이 없어졌으니 가운데로 세운다. */
.cta-row.center { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.plan {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
display: flex; flex-direction: column; height: 100%;
}
.plan.pick { border: 2px solid var(--accent); }
.plan .tag {
display: inline-block; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
border-radius: 999px; padding: 3px 12px; margin-bottom: 10px;
}
.plan h3 { font-size: 21px; margin: 0 0 4px; }
.plan .price { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 2px; }
.plan .price small { font-size: 17px; font-weight: 700; color: var(--ink-3); }
.plan .per { font-size: 16px; color: var(--ink-3); margin-bottom: 16px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; }
.plan li { font-size: 16.5px; color: var(--ink-2); padding: 6px 0 6px 26px; position: relative; }
.plan li::before {
content: ''; position: absolute; left: 4px; top: 15px; width: 12px; height: 7px;
border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }
.note {
margin-top: 22px; background: var(--accent-tint-2); border-radius: 12px; padding: 18px 20px;
font-size: 16.5px; color: var(--ink-2);
}
.note b { color: var(--accent); }
/* ── 자주 묻는 질문 ── */
/* 글줄이 너무 길면 눈이 다음 줄을 못 찾는다. 다만 가운데로 모으면 위 구역들과 왼쪽 선이
어긋나므로 왼쪽은 그대로 두고 오른쪽만 줄인다.
⚠ 2026-08-10 정인님 "이 영역만 좌측에 쏠려 있어" — 위 의도는 맞았는데 방법이 틀렸다.
.faq 가 곧 .wrap 이라 max-width 를 760px 로 덮으면서 `margin-left: 20px` 을 주면
화면 왼쪽 끝에서 20px 자리에 붙는다. 다른 구역은 1040px 상자를 가운데 놓으므로
1440px 화면에서 왼쪽 선이 200px 대 20px 로 어긋났다 — '왼쪽 맞춤'이 아니라 '왼쪽 쏠림'.
상자는 다른 구역과 똑같이 가운데 두고, 줄 길이는 문답 목록에만 건다. */
.faq { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.faq details { max-width: 760px; }
.faq details {
border-bottom: 1px solid var(--line); padding: 4px 0;
}
.faq summary {
cursor: pointer; list-style: none; font-size: 18px; font-weight: 700; padding: 18px 34px 18px 0;
position: relative; min-height: var(--tap); display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
transform: translateY(-70%) rotate(45deg);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq .a { font-size: 16.5px; color: var(--ink-2); padding: 0 0 20px; margin: 0; }
/* ── 사전신청 폼 ── */
.apply-box {
background: #fff; border: 2px solid var(--accent); border-radius: 18px; padding: 30px 28px;
max-width: 620px;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
.field .hint { font-size: 15px; color: var(--ink-3); font-weight: 400; }
.field input, .field textarea {
width: 100%; font-family: inherit; font-size: 17px; padding: 13px 15px;
border: 1px solid #d3d5d9; border-radius: 10px; background: #fff; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; margin: 4px 0 20px; }
.agree input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--accent); flex: 0 0 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 16.5px; margin-top: 14px; min-height: 1.7em; }
.form-msg.ok { color: var(--accent); font-weight: 700; }
.form-msg.bad { color: #c0392b; font-weight: 700; }
/* ── 푸터 ── */
footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 36px 0 44px; }
footer .links { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
footer .links a { font-size: 16px; font-weight: 700; text-decoration: none; }
footer .biz { font-size: 15px; color: var(--ink-3); line-height: 1.9; }
/* 🔴 2026-08-09: nowrap 을 전부에 걸어 뒀더니 **주소 한 줄**이 안 접혀 320~360px 폰에서
쪽 전체가 388px 로 밀렸다(5쪽 다). 사업자정보는 법에 적으라는 정보라 지울 수 없고,
주소는 원래 길다. 붙어 있어야 할 것은 '대표 홍길동'처럼 **라벨+값 한 덩이**뿐이라
nowrap 은 그쪽만 남기고 주소는 접히게 둔다. */
footer .biz span { margin-right: 14px; white-space: nowrap; }
footer .biz span.wrapme { white-space: normal; }
footer .copy { font-size: 14.5px; color: var(--ink-3); margin-top: 14px; }
.todo-mark { background: #fff3cd; color: #7a5b00; padding: 0 4px; border-radius: 3px; }
/* ── 글로 된 문서(약관·개인정보) ── */
.doc { max-width: 760px; padding: 44px 0 60px; }
.doc h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 6px; }
.doc .updated { color: var(--ink-3); font-size: 15.5px; margin-bottom: 30px; }
.doc h2 { font-size: 20px; margin: 32px 0 8px; }
.doc p, .doc li { font-size: 16.5px; color: var(--ink-2); }
.doc ul, .doc ol { padding-left: 22px; }
/* 표는 못 줄이는 물건이라 제 통 안에서 흐르게 둔다 — 안 그러면 좁은 폰에서 쪽 전체가
가로로 밀린다(2026-08-09, 개인정보처리방침 표 두 개에서 확인). display:block 으로
바꿔야 overflow 가 먹는다 — table 은 overflow 를 무시한다. */
.doc table {
border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 16px;
display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.doc th, .doc td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--bg-2); }
.doc .back { display: inline-block; margin-bottom: 22px; font-weight: 700; text-decoration: none; }
/* ── 구독 해지 (2026-08-10) ──
붙잡는 화면을 만들지 않기로 했으므로, 버튼도 겁주는 빨강이 아니라 다른 버튼과 같다.
대신 결과 문장은 눈에 띄어야 한다 — 끊겼는지 아닌지를 모르고 나가면 다시 온다. */
.cx-actions { margin: 26px 0 0; }
.cx-msg { min-height: 24px; margin: 14px 0 0; font-size: 16px; font-weight: 600; }
.cx-msg.ok { color: #1a7f4b; }
.cx-msg.bad { color: #b4232a; }
/* ── 내 구독 (2026-08-11) ──
코드는 사장님이 눈으로 옮겨 적을 수도 있는 글자다. 그래서 본문보다 크고, 글자 사이를
벌리고, 6과 b·0과 O 가 갈리는 고정폭 글꼴로 낸다. 복사 버튼이 있어도 안 되는 폰이 있다. */
.me-code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 24px; font-weight: 700; letter-spacing: .08em;
background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
padding: 14px 16px; margin: 12px 0 0; word-break: break-all;
}
/* 아닌 것을 지워 보여주는 자리 — 지운 말이 살아 있는 말보다 세면 안 된다. */
.sec-sub s { opacity: .5; text-decoration-thickness: 2px; }
/* ── 근거 ──
정인님 2026-08-09: "잘 안 읽히고 근거가 부족한 느낌. 시각적인 자료가 엄청난 자산."
글로 더 설명하면 더 안 읽힌다. 그래서 여기는 **읽지 않아도 보이게** 짠다 —
① 밖에서 가져온 인용 한 덩이 ② 걸리는 것 ↔ 막는 법 두 줄 대조 ③ 우리 화면 한 장.
지어낸 그래프는 넣지 않는다. 잴 데이터가 아직 없다. */
.quote {
margin: 0 0 34px; padding: 28px 30px; background: var(--bg-2);
border: 1px solid var(--line); border-radius: var(--radius);
font-size: 18.5px; line-height: 1.72; color: var(--ink-2); max-width: 34em;
}
.quote b { color: var(--ink); }
.quote cite {
display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
font-style: normal; font-size: 15px; color: var(--ink-3);
}
.quote cite a { color: var(--accent); font-weight: 700; margin-left: 6px; }
.lead {
font-size: 21px; line-height: 1.6; font-weight: 700; letter-spacing: -.02em;
color: var(--ink); margin: 0 0 20px;
}
/* 걸리는 것 ↔ 막는 법. 두 칸을 나란히 놓아야 '막는다'가 말이 아니라 대조로 읽힌다. */
.proofs { display: grid; gap: 14px; margin-bottom: 40px; }
.proof-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proof-bad, .proof-good {
border-radius: var(--radius); padding: 20px 22px; font-size: 16.5px; line-height: 1.6;
}
.proof-bad { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-3); }
.proof-good { background: var(--accent-tint); border: 1px solid rgba(var(--accent-rgb), .3); color: var(--ink-2); }
.proof-bad b { color: var(--ink-2); }
.proof-good b { color: var(--ink); }
.tag-x, .tag-o {
display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; margin-bottom: 7px;
}
.tag-x { color: var(--ink-3); }
.tag-o { color: var(--accent); }
/* 증거 사진 — 화면을 그대로 보여주는 자리라 테두리를 얇게 두고 확대하지 않는다. */
.evidence { margin: 0; }
/* 잘라온 화면 안에 이미 카드 테두리가 있다. 여기서 또 두르면 테두리가 두 겹으로 보인다. */
.evidence img { display: block; width: 100%; max-width: 480px; height: auto; }
.evidence figcaption {
margin-top: 14px; font-size: 16px; color: var(--ink-3); line-height: 1.6; max-width: 34em;
}
.evidence figcaption b { color: var(--ink-2); }
/* ── 폰 ── */
/* ── 주문서(/pay) ──
2026-08-10. 여기는 설득하는 쪽이 아니라 **틀리면 돈이 걸리는 쪽**이라 규칙이 다르다.
칸을 좁히고(narrow), 눈이 갈 곳을 금액 한 군데로 몰고, 나머지 장식은 넣지 않는다. */
.wrap.narrow { max-width: 560px; }
.test-banner {
background: #FFF6E5; border: 1px solid #F0C97A; border-radius: 10px;
padding: 13px 16px; font-size: 15.5px; color: #6B4A05; line-height: 1.65; margin: 0 0 22px;
}
.order { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
/* 🔴 `hidden` 은 브라우저 기본 스타일이라 **class 로 display 를 준 자리에서 진다**
(2026-08-12 실측: 블로기지 주문서에서 '처음 세팅 0원'·'이용기간 45일'이 숨겨지지 않고
가뜬 문장과 블로기지 문장이 같이 떴다. `.order-row{display:flex}` 가 이기고 있었다).
숨기라고 적어 둔 것은 반드시 숨어야 한다 — 여기서 한 번에 못박는다. */
[hidden] { display: none !important; }
.order-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
padding: 15px 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-2);
}
.order-row:first-child { border-top: 0; }
.order-row b { font-size: 17px; color: var(--ink); font-weight: 700; text-align: right; }
.order-row small { display: block; font-size: 14px; color: var(--ink-3); font-weight: 400; margin-top: 3px; }
.order-row.total { background: var(--accent-tint); border-radius: 0 0 var(--radius) var(--radius); }
.order-row.total b { font-size: 24px; color: var(--accent); font-weight: 800; letter-spacing: -.02em; }
.order-note { font-size: 15.5px; color: var(--ink-3); line-height: 1.75; margin: 14px 0 0; }
.order-note.center { text-align: center; }
.pay-h { font-size: 19px; margin: 34px 0 4px; letter-spacing: -.01em; }
.pay-sub { font-size: 15.5px; color: var(--ink-3); margin: 0 0 14px; }
/* ── /pay 재설계 (2026-08-11 정인님 "평서형 문구 … 딱딱하고 기계적으로 와닿음") ──
구역을 크림으로 깔고, 읽을 덩이마다 흰 카드를 띄운다(홈 #pain·#how 와 같은 손).
⚠ 크림 위에서는 옅은 주홍(accent-tint / accent-tint-2)이 바탕과 거의 같은 색이라
상자가 사라진다 — .pull 에서 이미 겪은 자리다. 그래서 로그인 자리와 준비물 확인은
여기서 흰색으로 뒤집는다. 준비물 확인은 테두리(2px 주홍)가 남아 여전히 눈을 멈춘다. */
section#pay.tinted .pay-gate,
section#pay.tinted .pre-ready { background: #fff; }
.pay-lede { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 30px; }
/* 말풍선 — 생김새는 홈 #pain 것을 그대로 쓴다(.pain). 그쪽은 3열 격자 안이라 폭이
저절로 잡히지만 여기는 홀로 서므로 여백만 다시 잡아 준다. */
.pay-ask { margin: 34px 0 26px !important; font-size: 17.5px !important; }
/* 결제 뒤 세 걸음 — 사이에 ↓ 를 세워 흐름으로 만든다. 화살표가 설 자리가 있어야 하므로
간격을 26px 로 벌린다(홈 .steps 는 32px, 여기는 칸이 560px 이라 한 칸 좁힌다). */
.nexts { display: flex; flex-direction: column; gap: 26px; }
.next-card {
position: relative;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px;
}
.next-card + .next-card::before {
content: '↓'; position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
font-size: 21px; line-height: 1; font-weight: 800; color: var(--accent);
}
.next-card .num {
display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
border-radius: 9px; background: var(--accent-tint-2); color: var(--accent);
font-weight: 800; font-size: 16px;
}
.next-card h4 { font-size: 18.5px; margin: 10px 0 6px; letter-spacing: -.01em; line-height: 1.45; }
.next-card p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.next-card p b { color: var(--ink); }
.payform { display: grid; gap: 12px; }
.payform label { display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.payform input {
display: block; width: 100%; margin-top: 6px; box-sizing: border-box;
padding: 13px 14px; font: inherit; font-size: 16px; /* 16px 밑으로 내리면 iOS 가 화면을 확대한다 */
border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.payform input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.pay-err {
background: #FDECEA; border: 1px solid #F3B7B0; border-radius: 10px;
padding: 12px 15px; font-size: 15.5px; color: #8A1F14; line-height: 1.65; margin: 18px 0 12px;
}
#payment-method, #agreement { margin-top: 6px; }
/* 결제 앞 로그인 자리 (2026-08-11) — 크림 바탕에 얹는다. 여기는 '막는 문'이 아니라
'먼저 들르는 자리'라, 준비물 확인(.pre-ready)처럼 주홍 테두리를 세우면 경고로 읽힌다. */
.pay-gate {
margin: 26px 0 8px; background: var(--accent-tint-2); border: 1px solid var(--line);
border-radius: var(--radius); padding: 26px 24px; text-align: center;
}
.pay-gate h3 { font-size: 21px; line-height: 1.45; margin: 0 0 10px; color: var(--ink); }
.pay-gate p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 8px; }
.pay-gate p b { color: var(--ink); }
.pay-gate-note { font-size: 15.5px !important; }
.pay-gate .btn { margin-top: 16px; }
.pay-gate-help { margin-top: 14px !important; font-size: 15px !important; color: var(--ink-3) !important; }
/* 결제 전 준비물 확인 (2026-08-10) — 참고 상자(.note)의 회색으로 두면 '읽어도 그만'으로
보인다. 여기는 지나치면 환불이 되는 자리라 테두리를 세워 눈이 멈추게 한다. */
.pre-ready {
margin: 28px 0 6px; background: var(--accent-tint); border: 2px solid var(--accent);
border-radius: var(--radius); padding: 20px 22px;
}
.pre-ready > b { display: block; font-size: 17.5px; color: var(--ink); margin-bottom: 8px; }
.pre-ready p { font-size: 16px; color: var(--ink-2); line-height: 1.7; margin: 0; }
.pre-ready p b { color: var(--accent); }
.pre-ready-check {
display: flex; align-items: center; gap: 10px; margin-top: 14px;
font-size: 16.5px; font-weight: 700; color: var(--ink); cursor: pointer;
}
/* 55세 이상이 손가락으로 누른다 — 네모가 작으면 눌러도 안 켜진다. */
.pre-ready-check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
/* ── 요금 쪽 후킹 (2026-08-10) ──
정인님: "비싼 걸 골라도 글이 더 좋아지지 않는다 — 이걸 처음부터 후킹으로 때려 박고."
같은 문장이 그동안 카드 아래 회색 상자(.note)에 있었다. 자리를 위로 올리면서
상자도 바꾼다 — 회색 참고 상자는 '읽어도 그만'으로 보인다. 여기는 제목 자리다. */
.hook {
background: var(--accent-tint); border: 2px solid var(--accent);
border-radius: var(--radius); padding: 30px 32px; margin: 6px 0 8px;
}
.hook h2 { font-size: 34px; line-height: 1.25; letter-spacing: -.03em; margin: 0 0 14px; font-weight: 800; }
.hook p { font-size: 17.5px; color: var(--ink-2); margin: 0; }
.hook p b { color: var(--accent); }
/* 마지막 한 줄은 값이 아니라 우리가 뭘 믿는지에 대한 말이다. 선을 하나 긋고 떼어 놓는다. */
.hook-why {
margin-top: 16px !important; padding-top: 14px; border-top: 1px solid rgba(var(--accent-rgb), .22);
font-weight: 700; color: var(--ink) !important;
}
/* 값 이야기 뒤에 붙는 작은 후킹(2026-08-12 블로기지 단독). 위 .hook 과 같은 상자인데
제목 자리가 아니라 곁다리라 한 치수 작다 — 크게 두면 요금제 셋처럼 읽힌다. */
.hook-sub { margin-top: 26px; padding: 22px 24px; }
.hook-sub h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 800; }
.hook-sub p { font-size: 16.5px; }
.hook-sub .hook-why { font-size: 15.5px; }
/* 가운데로 놓는 안내 한 줄(섹션 끝에서 다른 쪽으로 보낼 때). */
p.sec-sub.center { text-align: center; max-width: none; margin-bottom: 0; }
/* ── 내시면 이렇게 됩니다 (기능 이름 대신 결과) ── */
.gets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.get {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px 18px 22px; position: relative;
}
/* 체크 표시는 목록 기호가 아니라 '이건 이미 된다'는 뜻으로 쓴다. */
.get > b {
display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em;
margin-bottom: 7px; padding-left: 28px; position: relative;
}
.get > b::before {
content: ''; position: absolute; left: 2px; top: 9px; width: 13px; height: 7px;
border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
transform: rotate(-45deg);
}
.get p { font-size: 16px; color: var(--ink-2); margin: 0; line-height: 1.7; }
/* ── '한 편'이 글 몇 개인가 (2026-08-10) ──
정인님: "40건이 블로그+당근 합쳐 40인지 채널당인지 모호해."
셈을 글로 적어 두면 안 읽힌다 → 한 줄짜리 식으로 세운다: 글감 → 두 곳 = 1편.
두 곳은 색으로 가른다(네이버 초록 · 당근 주황). 색만 쓰고 모양은 흉내내지 않는다. */
.set {
display: grid; grid-template-columns: auto 26px 1fr 26px auto;
align-items: center; gap: 0 14px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px; margin-top: 4px;
}
.set-seed { min-width: 150px; }
.set-lab { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink-3); margin-bottom: 3px; }
.set-seed b { font-size: 18px; letter-spacing: -.01em; }
.set-op { font-size: 22px; font-weight: 800; color: var(--ink-3); text-align: center; }
.set-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.set-ch {
display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; background: var(--bg-2);
}
/* 왼쪽 굵은 띠 + 앞의 점 = 어느 곳인지 알리는 색. 글자에는 이 색을 안 쓴다(대비 부족). */
.set-ch.naver { border-left: 5px solid var(--naver); }
.set-ch.danggeun { border-left: 5px solid var(--danggeun); }
.set-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.set-ch.naver .set-dot { background: var(--naver); }
.set-ch.danggeun .set-dot { background: var(--danggeun); }
.set-ch b { font-size: 16.5px; letter-spacing: -.01em; }
/* ⚠ 여기를 `.set-ch span` 으로 적으면 앞의 점(.set-dot 도 span 이다)까지 잡혀서
점 너비가 덮어써진다 — 2026-08-10 실측에서 점이 0px 로 사라졌다. 클래스로 집는다. */
.set-what { font-size: 14.5px; color: var(--ink-3); width: 100%; }
.set-count { text-align: center; min-width: 74px; }
.set-count b { display: block; font-size: 26px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.set-count span { font-size: 13.5px; color: var(--ink-3); }
/* ── 가격표는 작게 (2026-08-10) ──
정인님: "가격표는 작게 발행 글수차이정도로만 보여주기."
카드에서 기능 목록을 걷어냈으므로 카드가 짧아진다. 폭까지 그대로 두면 빈 카드로 보인다. */
/* .plans.two 가 margin-inline:auto 로 가운데 모으는데, 작은 표는 바로 위 막대와
왼쪽 선이 맞아야 같은 이야기로 읽힌다. 가운데 정렬을 되돌린다. */
.plans.mini { max-width: 600px; margin-top: 20px; margin-inline: 0; }
/* 세로 flex 안의 뱃지는 기본이 stretch 라 '추천'이 카드 폭만큼 늘어난다(띠처럼 보인다). */
.plans.mini .plan .tag { align-self: flex-start; }
.plans.mini .plan { padding: 22px 22px 20px; }
.plans.mini .plan h3 { font-size: 19px; }
.plans.mini .plan .price { font-size: 29px; margin: 6px 0 2px; }
.plans.mini .plan .per { font-size: 15.5px; margin-bottom: 16px; }
@media (max-width: 820px) {
/* 2026-08-10 정인님 "페이지당 스크롤이 너무 길다". 재 보니 구역 위아래 여백만
148px × 11구역 = 1,628px, 폰에서 두 화면이 통째로 빈 자리였다. 글을 지우기 전에
이걸 먼저 줄인다 — 내용은 그대로 두고 길이만 준다. */
section { padding: 48px 0; }
h2.sec { font-size: 28px; }
/* 2026-08-10 정인님 "메뉴탭이 최상단을 너무 차지해".
띠 자체는 58px 이었지만, 그 아래 히어로 로고(48px)+여백까지 더하면 첫 화면의
4분의 1이 '가뜬'이라는 글자만 두 번 보여주는 데 쓰였다. 로고는 위에서 지웠고,
여기서는 띠를 한 번 더 눕힌다 — 폰에서 위 띠는 길잡이지 주인공이 아니다. */
.topbar .wrap { height: 50px; gap: 6px; }
.logo img { height: 25px; }
.logo .logo-wide { display: none; }
.logo .logo-narrow { display: block; }
.btn-sm { padding: 8px 12px; font-size: 14px; }
/* 히어로는 글 먼저, 화면 그림 아래. 두 칸으로 쪼개면 양쪽 다 못 읽는다. */
.hero-grid { grid-template-columns: 1fr; gap: 28px; }
.hero { padding: 34px 0 38px; }
.hero h1 { font-size: 33px; }
.hero p { font-size: 17.5px; margin-bottom: 22px; }
.hero .hero-lead { font-size: 19px; margin: 8px 0 14px; }
/* 폰에서는 화면 그림이 글 아래로 내려온다. 여기서까지 크면 첫 화면이 그림으로 꽉 차
'뭘 파는 곳인지'를 읽기 전에 스크롤부터 하게 된다 — 조금 더 줄인다. */
.demo-shot, .demo-shot-still { max-width: 320px; }
p.sec-sub { margin-bottom: 24px; }
.cols, .cols.two, .plans, .plans.two, .feats, .gets, .fit, .wins, .pains { grid-template-columns: 1fr; }
.honest { padding: 22px 18px; }
.honest li { font-size: 15.5px; }
.kakao figcaption { font-size: 15px; }
/* 후킹 상자: 폰에서 34px 제목은 세 줄이 되고 여백까지 더하면 한 화면을 다 먹는다. */
.hook { padding: 24px 20px; }
.hook h2 { font-size: 27px; }
.hook p { font-size: 16.5px; }
/* 셈식(글감 → 두 곳 = 1편)은 폰에서 다섯 칸이 못 선다. 위아래로 눕히고
화살표·등호는 가로쓰기 그대로 두면 옆으로 누운 것처럼 보이므로 아래를 가리키게 돌린다. */
.set { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; text-align: center; }
/* 화살표만 아래를 가리키게 돌린다. 등호까지 돌리면 '=' 가 세로 두 줄('‖')이 되어
식이 아니라 고장 난 글자로 보인다(2026-08-10 폰 실측에서 그렇게 나왔다). */
.set-op.arrow { transform: rotate(90deg); font-size: 19px; }
.set-op.eq { font-size: 19px; }
.set-out { grid-template-columns: 1fr; }
.set-ch { justify-content: center; }
.set-what { width: auto; }
.plans.mini { margin-top: 16px; }
/* 34% 칸에 '대신 올려주는 봇'이 들어가면 글자가 세로로 선다. 폰에서는 위아래로 눕힌다. */
.vs-row { grid-template-columns: 1fr; }
.vs-name { padding: 12px 16px 10px; }
.vs-why { padding: 12px 16px 16px; }
.cta-row.center { flex-direction: column; }
.cta-row.center .btn { width: 100%; }
/* 대조 두 칸을 폰에서 반으로 쪼개면 양쪽 다 글자가 세로로 선다. 위아래로 눕힌다 —
걸리는 것 바로 밑에 막는 법이 오므로 대조는 그대로 읽힌다. */
.proof-row { grid-template-columns: 1fr; gap: 8px; }
.quote { padding: 22px 20px; font-size: 17.5px; }
.lead { font-size: 19px; }
/* 폰에서는 설명 위, 사진 아래 — 300px 칸을 그대로 두면 사진이 반쪽만 남는다. */
.step-row { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; }
.win h3 { font-size: 21px; }
.pain { font-size: 17px; padding: 18px 18px; }
.pain-note, .step-time { font-size: 16.5px; }
/* 히어로 CTA 는 주 버튼만 폭을 채운다 — 글자 링크까지 늘리면 버튼 둘로 보인다. */
.hero .cta-row .cta-second { width: auto; }
/* 위 띠는 한 줄로 서야 한다. CTA 가 '사용하러 가기'로 길어지면서 폰에서 '뭘 해주나요'와
버튼이 둘 다 두 줄로 접혔다(390px 실측, 2026-08-09). 줄바꿈을 막고 자리를 좁힌다. */
.nav { margin-left: 4px; gap: 0; }
.nav a { padding: 9px 7px; font-size: 14.5px; white-space: nowrap; }
/* 폰에서는 '뭘 해주나요'·'얼마예요' 둘을 내리고 삼선탭이 받는다(2026-08-12 msg 7383).
셋 다 윗줄에 두면 자리가 모자라 **로고가 폭 0px 로 밀려 아예 안 보였다**
(360px 실측: 로고 0 · 메뉴 199 · 버튼 107).
⚠ 여기 있던 두 줄의 경고("'뭘 해주나요'는 내리지 말 것 — 홈 본문의 [자세히 보기]가
5.8화면 뒤라 문이 멀어진다")는 **삼선탭이 생기면서 풀렸다.** 그때는 내리면 문이
아예 없어졌지만, 지금은 삼선탭 안에 늘 있고 그 삼선탭은 sticky 라 끝까지 따라온다.
오히려 전보다 나아졌다 — '얼마예요'는 폰에서 문이 [사용하러 가기] 하나뿐이었다.
⚠ '내 구독'은 여전히 윗줄에 남긴다. 결제하신 사장님이 제일 자주 누르는 자리라
두 번 누르게 만들지 않는다(2026-08-11 정인님이 따로 정하신 칸이기도 하다).
360px 셈: 로고 42 + 내 구독 62 + 버튼 107 + 삼선 40 + 사이 18 + 여백 24 = 293 < 360. */
.nav a[href="/pricing"], .nav a[href="/features"] { display: none; }
/* 로고는 줄어들지 않는다 — 위가 모자라면 로고부터 0px 로 깎이던 자리다. */
.logo { flex: 0 0 auto; }
.topbar .btn-sm { padding: 8px 12px; font-size: 14.5px; white-space: nowrap; }
.cmp-h { font-size: 20px; }
.why-row h3 { font-size: 18.5px; }
.why-row { padding: 20px 18px; }
/* 고비 머리말과 화면 사진을 폰에서 옆으로 두면 사진이 반쪽만 남는다 — 위아래로 눕힌다
(세 걸음 .step-row 와 같은 이유). */
.stage-top { grid-template-columns: 1fr; gap: 16px; }
.stage { margin-top: 46px; }
.stage + .stage::before { top: -34px; }
/* 2026-08-10 여기 있던 .hero/.hero h1/.hero-logo/section/h2.sec 은 위쪽에 같은 것이
한 번 더 적혀 있던 자리다(같은 @media 안 중복). 뒤에 적힌 쪽이 이겨서, 위에서 값을
고쳐도 화면이 안 바뀌는 함정이었다. 히어로 값은 위 한 곳으로 모으고 여기서는 지운다. */
.hero .cta-row .btn { width: 100%; }
.pull { font-size: 18.5px; padding: 20px 22px; }
.why-row { gap: 13px; }
.stage-head h3 { font-size: 22px; }
.apply-box { padding: 24px 20px; }
.logo b { font-size: 18px; }
}
/* ── 아주 좁은 폰(320px 급) ──
위 띠 셈: 로고 42 + 메뉴 135 + 버튼 107 + 사이 18 + 양 옆 여백 40 = 342 > 320.
전에는 로고가 0px 로 깎여 이 넘침이 안 보였다. 로고를 안 깎기로 했으니(위 820px 블록)
대신 여백을 줄인다. 버튼([사용하러 가기])은 그대로 둔다 —
2026-08-11 정인님 "사용하러 가기 cta는 그대로 두되". */
@media (max-width: 360px) {
.topbar .wrap { padding: 0 12px; }
.nav a { padding: 9px 5px; }
}