/* ══════════════════════════════════════════════════════════════
ROOSTA — 구독형 홈페이지
2026-09-16 **골격째 다시 짰다.** 1안은 「히어로 → 카드 3칸 → 요금제 3단 →
카드 6칸 → 4스텝 → FAQ → CTA」 였다. CLAUDE.md 가 양산형이라고 금지한 그 뼈대다.
이번 판이 그 뼈대를 안 쓰는 방법 다섯
① 첫 화면 오른쪽이 **요금 계산기**다. 카피가 아니라 금액이 첫 화면에 있다
② 섹션이 **비대칭 2단** — 왼쪽 제목이 따라 붙고(sticky) 오른쪽만 흐른다
③ 요금제는 카드 3장이 아니라 **표 하나**. 카드는 계산기가 이미 했다
④ 다크 블록은 **딱 하나**(미리 말씀드립니다). 나머지는 전부 밝다
⑤ 색은 **딥 포레스트 1색**뿐이고 **누를 수 있는 것과 금액에만** 쓴다
══════════════════════════════════════════════════════════════ */
@font-face{font-family:'P';font-weight:400;font-display:swap;src:url('../assets/fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:500;font-display:swap;src:url('../assets/fonts/Pretendard-Medium.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:600;font-display:swap;src:url('../assets/fonts/Pretendard-SemiBold.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:700;font-display:swap;src:url('../assets/fonts/Pretendard-Bold.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:800;font-display:swap;src:url('../assets/fonts/Pretendard-ExtraBold.woff2') format('woff2')}
@font-face{font-family:'M';font-weight:500;font-display:swap;src:url('../assets/fonts/Montserrat-Medium.woff2') format('woff2')}
@font-face{font-family:'M';font-weight:600;font-display:swap;src:url('../assets/fonts/Montserrat-SemiBold.woff2') format('woff2')}
:root{
--paper:#FFFFFF; /* 오프화이트 — 순백보다 눈이 편하다 */
--tint:#F4F6F3; /* 교차 섹션 */
--surf:#FFFFFF;
--ink:#14170F; /* 먹 — 거의 검정에 미세한 그린기 */
--sub:#5C6157;
--line:#DCDED4;
--hair:#E9EAE1;
/* 단 하나의 색. **누를 수 있는 것과 금액에만** 쓴다 —
라벨·구분선·장식에 쓰는 순간 어디를 눌러야 하는지 흐려진다 */
--acc:#124A38; --acc-d:#0B3427; --acc-l:#E3EDE7;
--r:14px; --rl:22px; --rp:999px;
--px:clamp(20px,5vw,72px);
--wrap:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:'P',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
background:var(--paper);color:var(--ink);word-break:keep-all;line-height:1.7;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--px)}
.en{font-family:'M','P',sans-serif;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
/* ══ 헤더 — 오프화이트 바탕에 먹. 다크 헤더를 쓰지 않는다 ══ */
header{background:rgba(252,252,250,.92);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header .wrap{display:flex;align-items:center;height:72px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;
font-family:'M','P',sans-serif;font-weight:600;font-size:19px;letter-spacing:.11em}
/* 심볼은 viewBox 0 0 64 64 정사각이다 — 원본은 brand/assets/roosta-symbol.svg */
.logo .mark{width:27px;height:27px;fill:var(--acc);flex:none}
header nav{margin-left:auto;display:flex;gap:28px;font-size:14.5px;font-weight:600;color:var(--sub)}
header nav a{min-height:40px;display:flex;align-items:center}
header nav a:hover{color:var(--acc)}
.hdbtn{background:var(--acc);color:#fff;padding:11px 20px;font-size:14px;font-weight:700;
border-radius:var(--rp);white-space:nowrap;min-height:40px;display:flex;align-items:center}
.hdbtn:hover{background:var(--acc-d)}
.nvt,.navbtn{display:none}
/* ══ 히어로 — 비대칭 2단. 오른쪽이 계산기다 ══ */
.hero{padding:clamp(34px,4vw,60px) 0 clamp(44px,5vw,76px)}
/* 글을 덜어낸 만큼 **글자 칸을 넓힌다** (2026-09-22) — 헤드라인 크기가 이 칸에 묶여 있다 */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
gap:clamp(30px,4vw,56px);align-items:start}
.eyebrow{font-family:'M','P',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.17em;
text-transform:uppercase;color:var(--sub);display:block;margin-bottom:22px}
h1{font-size:clamp(34px,5.2vw,66px);line-height:1.1;letter-spacing:-.05em;font-weight:800}
.hlead{margin-top:22px;font-size:clamp(15.5px,1.6vw,18.5px);color:var(--sub);
line-height:1.8;max-width:26em}
.hsub{margin-top:20px;font-size:14px;color:var(--sub);display:flex;flex-wrap:wrap;gap:6px 14px}
.hsub b{font-weight:600;color:var(--ink)}
/* ══ 요금 계산기 — JS 를 쓰지 않는다. 라디오 3 × 체크박스 2 = 6 가지를 미리 적어 두고
`:checked ~` 로 하나만 보인다. 평수 견적기와 같은 방법이다 ══ */
.calc{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
padding:clamp(24px,3vw,34px);position:relative}
.calc>input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ctitle{font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:22px;
display:flex;align-items:center;gap:8px}
.ctitle::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
.cg{margin-bottom:18px}
.cl{display:block;font-size:12.5px;font-weight:600;color:var(--sub);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips label{border:1px solid var(--line);border-radius:var(--rp);padding:9px 16px;
font-size:14px;font-weight:600;cursor:pointer;background:var(--paper);
min-height:40px;display:flex;align-items:center;transition:.14s;user-select:none}
.chips label:hover{border-color:var(--acc)}
.chips label.wide{text-align:left;line-height:1.35}
/* 얼마가 붙는지 칩에 적어 둔다 — 안 적으면 눌러보기 전에는 무슨 효과인지 모른다 */
.chips label small{font-size:12.5px;font-weight:700;color:var(--acc);margin-left:5px}
/* 고른 칩 */
#p3:checked~.cg label[for=p3],
#p6:checked~.cg label[for=p6],
#p10:checked~.cg label[for=p10]{background:var(--acc);border-color:var(--acc);color:#fff}
#p3:focus-visible~.cg label[for=p3],
#p6:focus-visible~.cg label[for=p6],
#p10:focus-visible~.cg label[for=p10]{outline:2px solid var(--acc);outline-offset:2px}
.out{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.v,.w,.f,.af,.t{display:none}
/* ── 제작 + 유지관리 ── */
#p3:checked~.out .mk3,#p3:checked~.out .mo3,
#p6:checked~.out .mk6,#p6:checked~.out .mo6,
#p10:checked~.out .mk10,#p10:checked~.out .mo10{display:inline}
/* 장당(.per*) · 총액(.t*) · 포함내역은 **맨 아래 층**에서 페이지 수에만 묶어 건다.
유지보수 축을 없애면서 옮겼다 (2026-09-22) */
.ctitle .ctb{display:none}
.price{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;color:var(--acc)}
.price .pp{display:flex;flex-direction:column;gap:3px}
.price .pp b{font-size:clamp(30px,3.9vw,44px);font-weight:800;letter-spacing:-.05em;line-height:1.04}
.price .pp u{text-decoration:none;font-size:clamp(17px,2vw,21px);font-weight:800;margin-left:1px}
.price .pp i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:-.01em}
.price .pm b{color:var(--acc-d)}
.price .plus{font-size:26px;font-weight:800;color:var(--line);padding-bottom:16px}
.price .pq b{font-size:clamp(27px,3.2vw,36px)}
/* .pq 는 .pp 도 달고 있다 — 숨김은 반드시 .pp 모양 규칙 **뒤**에 와야 이긴다 */
.price .pq{display:none}
.oline{margin-top:10px;font-size:13.5px;color:var(--sub)}
/* 분할이 끝난 뒤 금액 — 파는 말이면서 동시에 분쟁을 막는 줄이다 */
.after{margin-top:9px}
.after .af{font-size:13.5px;color:var(--acc);font-weight:600}
.after .af b{font-weight:800}
/* 24개월 총액 — 구독 불만 1위가 「총비용 깜깜이」라 먼저 보여준다 */
.total{margin-top:14px;padding:11px 15px;background:var(--tint);border-radius:var(--rs);
font-size:13.5px;color:var(--sub);display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
.total b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-.025em}
.inc{margin-top:12px;padding:13px 16px;background:var(--acc-l);border-radius:var(--r);
font-size:13.5px;font-weight:600;line-height:1.6;color:var(--acc-d)}
/* 「무제한」 옆의 조건 — 같은 크기로 붙여 둬야 분쟁이 안 난다 */
.inc em{font-style:normal;font-weight:700;opacity:.72}
.cbtn{margin-top:18px;background:var(--acc);color:#fff;border-radius:var(--rp);
min-height:52px;display:flex;align-items:center;justify-content:center;
font-size:15.5px;font-weight:700}
.cbtn:hover{background:var(--acc-d)}
/* ══ 포함 띠 — 아이콘 없이 글자만. 1px 선이 칸을 가른다 ══ */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surf)}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.band>.wrap>div{padding:22px 24px;min-width:0;border-left:1px solid var(--hair)}
.band>.wrap>div:first-child{border-left:0;padding-left:0}
.band b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.band span{display:block;margin-top:4px;font-size:12.5px;color:var(--sub);line-height:1.55}
/* ══ 섹션 — 비대칭 2단. 왼쪽 제목이 따라 붙는다 ══ */
.sec{padding:clamp(62px,8vw,124px) 0}
.sec.tint{background:var(--tint)}
.split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(30px,5vw,80px)}
.shead{position:sticky;top:112px;align-self:start}
h2{font-size:clamp(26px,3.4vw,42px);line-height:1.28;letter-spacing:-.04em;font-weight:800}
.shead p{margin-top:16px;font-size:15px;color:var(--sub);line-height:1.78;max-width:24em}
/* 왜 구독인가 — 큰 숫자 + 1px 선으로만 가른다 */
.reasons>div{padding:26px 0;border-top:1px solid var(--line);display:grid;
grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start}
.reasons>div:first-child{border-top:0;padding-top:0}
.reasons .n{font-family:'M','P',sans-serif;font-weight:600;font-size:26px;
letter-spacing:-.02em;color:var(--line);line-height:1}
h3{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.42}
.reasons p{margin-top:8px;font-size:15px;color:var(--sub);line-height:1.78}
.turn{margin-top:32px;border-radius:var(--rl);border:1px solid var(--acc);
background:var(--acc-l);padding:24px 26px}
.turn b{display:block;font-size:clamp(17px,2vw,21px);font-weight:800;letter-spacing:-.03em;color:var(--acc-d)}
.turn span{display:block;margin-top:7px;font-size:14.5px;color:var(--acc-d);opacity:.82}
/* ══ 요금제 — 카드 3장이 아니라 표 하나 ══ */
.ptab{margin-top:clamp(28px,4vw,44px);background:var(--surf);
border:1px solid var(--line);border-radius:var(--rl);overflow:hidden}
.ptab table{width:100%;border-collapse:collapse;font-size:14.5px}
.ptab th,.ptab td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
.ptab thead th{background:var(--tint);border-bottom:1px solid var(--line)}
.ptab thead .pn{font-family:'M','P',sans-serif;font-weight:600;font-size:14px;letter-spacing:.12em;
display:block}
/* 금액은 thead 가 아니라 **본문 첫 행**에 둔다 —
모바일에서 thead 를 감추고 행을 카드로 접으면 가격이 통째로 사라진다 (실제로 밟았다) */
.ptab td.amt{font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--acc);line-height:1.3}
.ptab td.amt i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--sub);margin-left:3px}
.ptab tbody th{font-weight:600;color:var(--sub);width:180px;white-space:nowrap}
/* 「계속 내시는 것 / 한 번만 내시는 것」 — 요금 구조가 두 갈래인 걸 표 안에서 알린다 */
.ptab tbody th small{display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:#9AA093;letter-spacing:-.01em}
.ptab tbody tr:last-child th,.ptab tbody tr:last-child td{border-bottom:0}
.ptab .no{color:#B3B7AC}
.ptab .yes{font-weight:700}
.opts{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opts>div{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--surf)}
.opts b{font-size:14.5px;font-weight:700}
.opts span{display:block;margin-top:4px;font-size:13.5px;color:var(--sub);line-height:1.6}
.opts em{font-style:normal;color:var(--acc);font-weight:700}
.note{margin-top:16px;font-size:13.5px;color:var(--sub);line-height:1.75}
/* 섹션 제목 바로 아래 들어가는 설명 — 한 줄에 다 흐르지 않게 폭을 묶는다 */
.note.pw{margin-top:14px;max-width:38em;font-size:15px}
.thl{font-family:'M','P',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--sub)}
/* ══ 매달 하는 일 — 2열 글 목록. 아이콘 없이 ══ */
.does{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,3vw,48px)}
.does>div{padding:22px 0;border-top:1px solid var(--line);min-width:0}
.does>div:nth-child(1),.does>div:nth-child(2){border-top:0;padding-top:0}
.does h3{display:flex;align-items:center;gap:9px}
.does .tagx{font-size:11.5px;font-weight:700;color:var(--acc);background:var(--acc-l);
border-radius:var(--rp);padding:3px 9px;letter-spacing:-.01em}
.does p{margin-top:7px;font-size:14.5px;color:var(--sub);line-height:1.76}
/* ══ 작업 예시 — 2열. 3열로 잘게 썰면 화면이 안 읽힌다 ══ */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);
margin-top:clamp(28px,4vw,46px)}
.works a{min-width:0;display:block}
.thumb{aspect-ratio:16/11;border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;background:var(--tint)}
/* **이 img 는 loading="eager" 여야 한다.** lazy 로 두면 브라우저에서는 멀쩡한데
render.js 의 fullPage 캡처에서만 통째로 빈칸으로 찍힌다 (실제로 밟았다) */
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;
transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.works a:hover .thumb{border-color:var(--acc)}
.works a:hover .thumb img{transform:scale(1.03)}
.works .cap{margin-top:14px;display:flex;align-items:baseline;gap:9px}
.works .cap b{font-size:16px;font-weight:700;letter-spacing:-.03em}
.works .cap span{font-size:13px;color:var(--sub)}
.works .cap i{margin-left:auto;font-style:normal;color:var(--acc);font-weight:700;font-size:13.5px;
transition:transform .3s}
.works a:hover .cap i{transform:translateX(3px)}
/* ══ 미리 말씀드립니다 — 이 판의 유일한 다크 블록 ══ */
.dark{background:var(--ink);color:#fff}
.dark h2{color:#fff}
.dark .shead p{color:#A9AEA1}
.honest>div{padding:24px 0;border-top:1px solid rgba(255,255,255,.14)}
.honest>div:first-child{border-top:0;padding-top:0}
.honest h3{color:#fff}
.honest p{margin-top:8px;font-size:14.5px;color:#A9AEA1;line-height:1.78}
/* ══ FAQ ══ */
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:21px 42px 21px 0;position:relative;
font-size:16px;font-weight:700;letter-spacing:-.025em;min-height:40px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;
border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 23px;font-size:14.8px;color:var(--sub);line-height:1.85;max-width:56em}
.faq .a b{color:var(--ink);font-weight:700}
/* ══ CTA ══ */
.cta{text-align:center;background:var(--tint)}
.cta h2{max-width:none}
.cta p{margin:16px auto 0;font-size:15.5px;color:var(--sub);max-width:34em;line-height:1.8}
.cta .acts{display:flex;justify-content:center;gap:11px;margin-top:30px;flex-wrap:wrap}
.cta .acts a{border-radius:var(--rp);padding:15px 32px;font-size:15.5px;font-weight:700;
min-height:40px;display:flex;align-items:center}
.cta .acts .pri{background:var(--acc);color:#fff}
.cta .acts .pri:hover{background:var(--acc-d)}
.cta .acts .sec2{border:1px solid var(--line);background:var(--surf)}
.cta .acts .sec2:hover{border-color:var(--acc);color:var(--acc)}
/* ══ 푸터 — 밝다. 다크 푸터를 쓰지 않는다 ══ */
footer{border-top:1px solid var(--line);padding:clamp(40px,5vw,62px) 0 44px}
.ftop{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.fnav{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--sub);font-weight:600}
.fnav a{min-height:40px;display:flex;align-items:center}
.fnav a:hover{color:var(--acc)}
.fline{margin:26px 0 20px;height:1px;background:var(--line)}
.fnote{font-size:12.8px;color:var(--sub);line-height:1.85;max-width:64em}
.fnote b{color:var(--ink);font-weight:700}
.fnote+.fnote{margin-top:8px}
/* ══════════════════════════════════════════════════════════════
모바일 — CLAUDE.md 「모바일 규칙」
══════════════════════════════════════════════════════════════ */
@media(max-width:1040px){
.hero .wrap{grid-template-columns:1fr;gap:34px}
/* 계산기를 카피 위로 올리지 않는다 — 무슨 서비스인지 먼저 읽혀야 한다 */
.split{grid-template-columns:1fr;gap:26px}
.shead{position:static}
.band .wrap{grid-template-columns:repeat(2,1fr)}
.band>.wrap>div{border-left:0;padding-left:0;border-top:1px solid var(--hair)}
.band>.wrap>div:nth-child(1),.band>.wrap>div:nth-child(2){border-top:0}
}
@media(max-width:820px){
/* 드로어 — 내비를 그냥 숨기지 않는다. 순서는 input → nav → label */
header nav{position:fixed;inset:72px 0 auto;background:var(--paper);flex-direction:column;
gap:0;padding:6px var(--px) 20px;margin:0;border-bottom:1px solid var(--line);
transform:translateY(-135%);transition:transform .32s cubic-bezier(.2,.7,.3,1);
max-height:calc(100dvh - 72px);overflow-y:auto}
header nav a{min-height:52px;font-size:16px;border-bottom:1px solid var(--hair);color:var(--ink)}
.nvt:checked~nav{transform:translateY(0)}
.navbtn{display:flex;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;align-items:center;cursor:pointer;margin-left:auto;order:3}
.navbtn i{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s,opacity .2s}
.nvt:checked~.navbtn i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nvt:checked~.navbtn i:nth-child(2){opacity:0}
.nvt:checked~.navbtn i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
header nav{margin-left:0}
/* 로고+버튼+햄버거 셋을 넣으면 390 에서 두 줄로 쪼개진다 */
.hdbtn{display:none}
.does{grid-template-columns:1fr}
.does>div:nth-child(2){border-top:1px solid var(--line);padding-top:22px}
.opts{grid-template-columns:1fr}
}
@media(max-width:620px){
.works{grid-template-columns:1fr}
.band .wrap{grid-template-columns:1fr}
.band>.wrap>div:nth-child(2){border-top:1px solid var(--hair)}
.reasons>div{grid-template-columns:1fr;gap:6px}
.reasons .n{font-size:20px}
.cta .acts a{flex:1 1 100%;justify-content:center}
/* 표는 열이 넷이라 접는다 — thead 를 감추고 행을 카드로 (모바일 규칙 6) */
.ptab{border:0;background:transparent;border-radius:0;overflow:visible}
.ptab table,.ptab tbody,.ptab tr,.ptab th,.ptab td{display:block;width:auto}
.ptab thead{display:none}
.ptab tbody tr{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
padding:6px 16px 10px;margin-bottom:10px}
.ptab tbody th{width:auto;padding:12px 0 6px;border:0;font-size:12.5px;
letter-spacing:.02em;white-space:normal}
.ptab tbody td{padding:5px 0;border:0;border-top:1px solid var(--hair);
display:flex;gap:10px;font-size:14px}
.ptab tbody td::before{content:attr(data-p);font-family:'M','P',sans-serif;font-weight:600;
font-size:11.5px;letter-spacing:.1em;color:var(--sub);flex:none;width:58px;padding-top:3px}
/* 셋이 **같은 값**인 행은 한 줄로 접는다. 같은 말을 세 번 읽히면
스크롤만 길어지고 뭐가 다른지는 오히려 안 보인다 */
.ptab tbody tr.same td:nth-of-type(2),
.ptab tbody tr.same td:nth-of-type(3){display:none}
.ptab tbody tr.same td::before{content:'전 요금제';width:58px}
}
/* ══ 모바일 탭 타겟 최소 40px ══ */
@media(max-width:820px){
.fnav a,header nav a,.faq summary,.cta .acts a,.chips label,.cbtn{min-height:44px}
}
/* ══ 모션 — reduced-motion 이면 전부 정지 ══ */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
}
/* ── 사서 갖기(매절) — 「제작비 내는 법」의 네 번째 칸 ────────────────
구독이 아니므로 단위·조건·포함 항목이 통째로 바뀐다.
특히 .w3/.w6/.w10(구독 포함 항목)이 그대로 뜨면 **거짓말**이 된다 —
매절에는 수정 무제한도 도메인·호스팅도 없다. */
.ctitle .ctb,.price .once{display:none}
#ybuy:checked~.ctitle .ct0,#ybuy:checked~.out .price .per{display:none}
#ybuy:checked~.ctitle .ctb{display:inline}
#ybuy:checked~.out .price .once{display:inline}
/* 값이 없으니 총액 줄도 통째로 감춘다 */
#ybuy:checked~.out .total{display:none}
/* 매절 금액은 자릿수가 많아 한 칸 작게 */
#ybuy:checked~.out .price .v{font-size:clamp(30px,3.6vw,42px)}
#ybuy:checked~.out .price u{display:none}
/* 24개월 총액 옆 시세 비교 — 우리 값이 싼 게 아니라 **얼마나** 싼지가 판단 기준이다 */
.total .tn{display:block;width:100%;margin-top:4px;font-size:12px;opacity:.8}
/* ══════════════════════════════════════════════════════════════
모션 (2026-09-17) — 사용자 지시
*"막 움직이기도 하고 좀 화려하고 이래야 사람들이 홈페이지를 맡기지. 배경은 흰색으로 하되"*
**홈페이지를 파는 곳은 홈페이지로 증명해야 한다.** 그래서 이 브랜드에서는
「모션은 덜 넣는 쪽이 정답」이라는 규칙을 쓰지 않는다.
흰 배경이라 색면을 깔 수 없다. 그래서 움직임을 **빛과 선**으로 만든다 —
흐릿한 그라데이션 덩어리 · 흐르는 띠 · 그려지는 선 · 올라오는 카드.
══════════════════════════════════════════════════════════════ */
:root{
--g1:#124A38; --g2:#2E8C67; --g3:#7FD1A8; --g4:#CFEADC;
--ease:cubic-bezier(.2,.7,.25,1);
}
/* ── 스크롤 등장 ── */
.rv{opacity:0;transform:translateY(22px);
transition:opacity .62s var(--ease) var(--d,0ms), transform .62s var(--ease) var(--d,0ms)}
.rv.on{opacity:1;transform:none}
/* ── 히어로 빛 ─────────────────────────────────
흰 바탕 위에 흐릿한 초록 덩어리 셋이 아주 느리게 떠다닌다.
`filter:blur` 는 무겁다 — **덩어리 셋까지만.** 넷부터 스크롤이 끊긴다 */
.hero{position:relative;overflow:hidden;--mx:70%;--my:30%}
/* 오른쪽 칸 = 데크(실제 화면) + 계산기. 화면을 먼저 보여주고 값을 보여준다 */
/* 이제 오른쪽은 데크 하나다. 계산기는 아래 전용 띠로 내렸다 (밸런스) */
.hcol{display:flex;flex-direction:column;gap:13px;min-width:0}
.hero>.wrap{position:relative;z-index:2}
.hero::before{content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
background:
radial-gradient(38% 38% at var(--mx) var(--my), rgba(127,209,168,.30) 0%, transparent 70%),
radial-gradient(30% 34% at 12% 18%, rgba(46,140,103,.22) 0%, transparent 70%),
radial-gradient(34% 30% at 88% 78%, rgba(18,74,56,.14) 0%, transparent 70%);
filter:blur(28px);
transition:background-position .4s linear;
animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
0%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-2.5%,1.6%,0) scale(1.06)}
100%{transform:translate3d(2%,-2%,0) scale(1.02)}
}
/* 얇은 격자 — 「우리는 화면을 짜는 사람」이라는 인상. 아주 옅게만 */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:linear-gradient(var(--hair) 1px,transparent 1px),
linear-gradient(90deg,var(--hair) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 78%);
opacity:.5}
/* 헤드라인 — 줄 단위로 밀려 올라온다.
**글자 단위로 쪼개지 않는다** —
과 이 통째로 날아간다 (CLAUDE.md 함정) */
/* 한 줄씩 밀려 올라오므로 **줄이 깨지면 안 된다.** 깨지면 윗줄이 잘려 보인다 */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>i{white-space:nowrap}
.hero h1 .ln>i{display:block;font-style:normal;
animation:lineup .85s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes lineup{from{transform:translateY(105%)}to{transform:none}}
.hero h1 em{font-style:normal;
background:linear-gradient(96deg,var(--g1) 0%,var(--g2) 46%,var(--g1) 100%);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:220% 0}}
@media (prefers-reduced-motion: reduce){
.hero::before,.hero h1 .ln>i,.hero h1 em,.marq .row{animation:none!important}
.hero h1 em{color:var(--acc);-webkit-text-fill-color:currentColor}
}
/* ── 흐르는 띠 ─────────────────────────────────
같은 목록을 **두 벌** 이어 붙이고 -50% 로 민다. 한 벌이면 끝에서 끊긴다 */
.marq{border-block:1px solid var(--line);background:var(--surf);
overflow:hidden;padding:15px 0;
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq .row{display:flex;width:max-content;animation:slide 26s linear infinite}
.marq:hover .row{animation-play-state:paused}
.marq span{display:flex;align-items:center;gap:11px;padding:0 26px;flex:none;
font-size:14.5px;font-weight:700;color:var(--sub);letter-spacing:-.02em;white-space:nowrap}
.marq span::before{content:'';width:6px;height:6px;border-radius:50%;
background:var(--acc);flex:none}
.marq b{color:var(--ink);font-weight:800}
@keyframes slide{to{transform:translateX(-50%)}}
/* ── 히어로 데크 (실제 화면이 넘어간다) ── */
.deck{position:relative;border:1px solid var(--line);border-radius:var(--rl);
overflow:hidden;background:var(--surf);aspect-ratio:16/10;
box-shadow:0 22px 54px -30px rgba(18,74,56,.4)}
/* 크로스페이드 중 **두 장이 겹쳐 비치지 않게** — 들어오는 장을 위로 올린다.
둘 다 반투명한 순간이 있으면 아래 장의 글자가 그대로 비친다 */
.deck .slide{position:absolute;inset:0;opacity:0;z-index:1;background:var(--surf);
transition:opacity .55s var(--ease)}
.deck .slide.on{opacity:1;z-index:2}
.deck img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.deck .tag{position:absolute;left:14px;bottom:14px;z-index:3;
background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--rp);
padding:7px 15px;font-size:12.5px;font-weight:800;letter-spacing:-.02em}
.dline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dname{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:-.02em}
.dots{display:flex;gap:7px}
.dots button{width:28px;height:4px;border:0;border-radius:99px;background:var(--line);
cursor:pointer;padding:0;transition:background .3s,width .3s}
.dots button.on{background:var(--acc);width:44px}
/* ── 카드가 떠오른다 ── */
.works>a{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.works>a:hover{transform:translateY(-6px);
box-shadow:0 20px 40px -26px rgba(18,74,56,.55);border-color:var(--acc)}
.works .thumb img{transition:transform .7s var(--ease)}
.works>a:hover .thumb img{transform:scale(1.045)}
/* ── 비교 ── */
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.cmp>div{border:1px solid var(--line);border-radius:var(--rl);padding:26px 24px;background:var(--surf)}
.cmp>div.ok{border-color:var(--acc);background:var(--acc-l);
box-shadow:0 18px 40px -30px rgba(18,74,56,.5)}
.cmp h3{font-size:16.5px;letter-spacing:-.035em;margin-bottom:12px}
.cmp ul{list-style:none;display:grid;gap:9px}
.cmp li{font-size:14.5px;color:var(--sub);line-height:1.6;display:flex;gap:9px}
.cmp li::before{content:'✕';flex:none;font-weight:800;color:#B4472F}
.cmp .ok li::before{content:'✓';color:var(--acc)}
.cmp .ok li{color:var(--acc-d)}
@media(max-width:940px){.cmp{grid-template-columns:1fr}
/* 1열로 접으면 **우리 칸이 맨 위로** 와야 한다. 남 얘기부터 읽히면 안 된다 */
.cmp>div.ok{order:-1}}
/* ── 숫자 ── */
.band .cu{font-variant-numeric:tabular-nums}
/* ── 프로세스 — 선이 그려진다 ── */
.flow{list-style:none;counter-reset:f;display:grid;gap:0;margin-top:22px;position:relative}
.flow>li{counter-increment:f;display:grid;grid-template-columns:52px 1fr;gap:18px;
padding:20px 0 20px 0;border-top:1px solid var(--hair);position:relative}
.flow>li:first-child{border-top:0}
.flow>li::before{content:counter(f,decimal-leading-zero);
font-family:'M',sans-serif;font-weight:600;font-size:13px;color:var(--acc);
width:52px;height:52px;border:1.5px solid var(--acc-l);border-radius:50%;
display:flex;align-items:center;justify-content:center;background:var(--surf);
transition:background .4s,color .4s,border-color .4s}
.flow>li.on::before{background:var(--acc);color:#fff;border-color:var(--acc)}
.flow b{display:block;font-size:16.5px;letter-spacing:-.035em}
.flow span{display:block;margin-top:5px;font-size:14.5px;color:var(--sub);line-height:1.62}
/* ── 히어로 왼쪽 아래 ── */
.hcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hcta a{border-radius:var(--rp);padding:14px 26px;font-size:15px;font-weight:700;
letter-spacing:-.03em;min-height:44px;display:inline-flex;align-items:center;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.hcta .pri{background:var(--acc);color:#fff;box-shadow:0 12px 26px -14px rgba(18,74,56,.75)}
.hcta .pri:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(18,74,56,.85)}
.hcta .sec2{border:1px solid var(--line);color:var(--ink);background:var(--surf)}
.hcta .sec2:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}
.hstat{display:flex;gap:clamp(18px,3vw,38px);margin-top:30px;padding-top:24px;
border-top:1px solid var(--hair);flex-wrap:wrap}
.hstat>div{display:flex;flex-direction:column;gap:5px}
.hstat b{font-size:clamp(28px,3.2vw,38px);font-weight:800;letter-spacing:-.05em;
color:var(--acc);line-height:1;font-variant-numeric:tabular-nums}
.hstat b i{font-style:normal;font-size:.5em;font-weight:700;margin-left:2px}
.hstat span{font-size:12.5px;color:var(--sub);font-weight:600;line-height:1.5;letter-spacing:-.02em}
@media(max-width:560px){
.hstat{gap:20px}
.hcta a{flex:1;justify-content:center}
}
/* ── 선 아이콘 ──────────────────────────────────
여섯이 **같은 규칙**을 지켜야 전문가처럼 보인다 — viewBox 24 · stroke 1.6 · round.
AI 로 뽑으면 장마다 선 굵기가 달라 나란히 두는 순간 티가 난다. 그래서 직접 그린다. */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.does>div{position:relative}
.does .ich{display:flex;align-items:center;gap:11px;color:var(--acc)}
.does .ich h3{margin:0}
.does>div{transition:transform .35s var(--ease),border-color .3s,background .3s}
.does>div:hover{transform:translateY(-3px)}
.does>div:hover .ic{animation:nudge .5s var(--ease)}
@keyframes nudge{50%{transform:translateY(-3px) rotate(-6deg)}}
/* ── 채팅 QR — PC 전용 ─────────────────────────
채팅 링크는 **모바일에서만** 앱으로 바로 열린다. PC 에서는 카카오가 로그인을 요구하고
그건 우회가 없다. 그래서 PC 에만 QR 을 띄운다. 모바일에서는 방해만 되므로 숨긴다. */
.qr{display:flex;align-items:center;gap:20px;margin:30px auto 0;max-width:520px;
padding:18px 22px;border:1px solid var(--line);border-radius:var(--rl);
background:var(--surf);text-align:left}
.qrbox{flex:none;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.qrimg{width:100%;height:100%;display:block}
.qrtx b{display:block;font-size:14.5px;letter-spacing:-.03em}
.qrtx span{display:block;margin-top:5px;font-size:12.5px;color:var(--sub);line-height:1.6}
@media (max-width:760px), (pointer:coarse){ .qr{display:none} }
/* ── 계산기 띠 ── */
.calcband{background:var(--tint)}
.calcband .calc{margin:0}
/* ── 왜 우리냐 — 네 칸 ─────────────────────────
내용이 길어 2열까지만. 3열이면 글이 세로로 길어져 안 읽힌다 */
.edge{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.edge>div{border:1px solid var(--line);border-radius:var(--rl);padding:30px 28px;
background:var(--surf);display:flex;flex-direction:column;gap:11px;
transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.edge>div:hover{transform:translateY(-4px);border-color:var(--acc);
box-shadow:0 22px 44px -30px rgba(18,74,56,.5)}
.edge .ic{width:30px;height:30px;color:var(--acc);stroke-width:1.5}
.edge>div:hover .ic{animation:nudge .5s var(--ease)}
.edge h3{font-size:18px;letter-spacing:-.04em;line-height:1.35}
.edge h3 em{font-style:normal;color:var(--acc)}
.edge p{font-size:14.5px;color:var(--sub);line-height:1.72}
.edge ul{list-style:none;display:grid;gap:7px;margin-top:2px}
.edge li{font-size:14px;color:var(--sub);line-height:1.6;display:flex;gap:9px}
.edge li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;
background:var(--acc);margin-top:.62em}
.edge .edgenote{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);
font-size:13px;color:var(--sub);opacity:.92}
@media(max-width:880px){.edge{grid-template-columns:1fr}}
/* ══ 모바일 탭 타겟 (2026-09-17) ══════════════
390px 에서 재 보니 누를 수 있는데 40px 이 안 되는 것이 있었다.
**보이는 크기는 그대로 두고 누르는 넓이만 키운다.** */
/* 로고 32px -> 44px. 글자 위치는 안 변한다 */
.logo{min-height:44px}
/* 데크 점 — 막대는 4px 인데 그게 곧 누르는 넓이였다. 사실상 못 누른다.
위아래 padding 으로 40px 를 만들고 `background-clip:content-box` 로 막대는 4px 그대로 */
/* 버튼은 **투명한 손가락 자리**, 보이는 막대는 ::after.
`background-clip:content-box` 로 하려다 버튼 전체가 칠해져 큰 원이 됐다 */
.dots button{width:28px;height:40px;padding:0;background:none;border:0;position:relative;
cursor:pointer;transition:width .3s}
.dots button::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;
transform:translateY(-50%);border-radius:99px;background:var(--line);transition:background .3s}
.dots button.on{width:44px;background:none}
.dots button.on::after{background:var(--acc)}
.dline{min-height:40px}
/* ══════════════════════════════════════════════════════════════
세게 (2026-09-17) — 사용자 지적 *"루스타 홈페이지 자체가 너무 밋밋해"*
벤치마크 designjoy.co. 거기도 전부 밝은 톤이다 —
**밋밋함의 원인은 색이 아니라 크기와 밀도다.**
우리 무기인 「실제로 열리는 작업 화면」을 작은 카드로만 쓰고 있었다.
══════════════════════════════════════════════════════════════ */
/* ── ① 헤드라인을 키운다 ── */
h1{font-size:clamp(40px,7.2vw,92px);line-height:1.06;letter-spacing:-.055em}
.sec h2{font-size:clamp(26px,3.6vw,46px);letter-spacing:-.05em;line-height:1.16}
/* ── ② 실제 화면 띠 — 풀블리드로 흐른다 ──
같은 목록을 **두 벌** 이어 붙이고 -50% 로 민다. 한 벌이면 끝에서 끊긴다 */
.reel{background:var(--ink);padding:clamp(26px,3vw,44px) 0;overflow:hidden;
border-block:1px solid var(--ink)}
.reeltrack{display:flex;gap:18px;width:max-content;animation:reelrun 52s linear infinite}
.reel:hover .reeltrack{animation-play-state:paused}
@keyframes reelrun{to{transform:translateX(-50%)}}
.reeltrack a{flex:none;width:clamp(280px,26vw,420px);position:relative;display:block;
border-radius:12px;overflow:hidden;background:var(--surf);
transition:transform .4s var(--ease)}
.reeltrack a:hover{transform:translateY(-6px)}
.reeltrack img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top center;display:block}
.reeltrack span{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;
display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;color:#fff;
font-size:14px;font-weight:700;letter-spacing:-.03em;
background:linear-gradient(180deg,rgba(12,15,10,0) 0%,rgba(12,15,10,.86) 62%)}
.reeltrack i{font-style:normal;font-size:12px;font-weight:600;opacity:.72}
@media (prefers-reduced-motion: reduce){ .reeltrack{animation:none} }
/* ── ③ 시중가 취소선 — 글로 적는 것과 그어 보이는 건 다르다 ── */
.total .tn s{display:none;text-decoration:none;position:relative;font-weight:700;
color:var(--ink);opacity:.55;margin-right:2px}
.total .tn s::after{content:'';position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;
background:#B4472F;transform:rotate(-3deg)}
/* 계산기 총액 블록을 뺐다 (2026-09-22) — .tn/.s* 는 더 이상 쓰지 않는다 */
/* ══════════════════════════════════════════════════════════════
만들어지는 장면 (2026-09-17)
사용자 지적 *"실험적인게 아니고 그냥 나열형이잖아"*
왼쪽 브라우저가 **화면에 고정되고**(sticky) 오른쪽 단계만 흐른다.
스크롤이 단계를 지날 때마다 브라우저 안이 채워진다 —
빈 화면 -> 뼈대 -> 사진 -> 글 -> 검색 결과 -> AI 인용.
**글로 적는 대신 보여준다.** 이게 여섯 단계 목록을 대신한다.
`position:sticky` 와 IntersectionObserver 만 쓴다.
══════════════════════════════════════════════════════════════ */
.scene{background:var(--tint);border-block:1px solid var(--line)}
.scenewrap{max-width:1180px;margin:0 auto;padding:0 var(--px);
display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:clamp(28px,4vw,64px);align-items:start}
.stick{position:sticky;top:clamp(78px,10vh,112px);
padding:clamp(40px,6vw,88px) 0}
/* ── 브라우저 목업 ── */
.browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surf);
box-shadow:0 30px 70px -40px rgba(18,74,56,.55)}
.bbar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--tint);
border-bottom:1px solid var(--line)}
.bbar i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.burl{margin-left:12px;flex:1;background:var(--surf);border:1px solid var(--line);
border-radius:99px;padding:5px 14px;font-size:11.5px;color:var(--sub);letter-spacing:-.01em}
.bview{position:relative;aspect-ratio:16/11;background:var(--surf);overflow:hidden}
.lay{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease)}
.lay.on{opacity:1}
/* 0 빈 화면 */
.l0{display:flex;align-items:center;justify-content:center;color:var(--line);
font-size:15px;font-weight:700;letter-spacing:-.02em}
/* 1 뼈대 — 회색 덩어리로 「아직 내용이 없다」를 보여준다 */
.l1{padding:6%}
.sk{background:var(--hair);border-radius:6px}
.sk-h{height:7%;width:30%}
.sk-n{height:5%;width:46%;margin:3% 0 0 auto}
.sk-big{height:38%;margin-top:6%}
.sk-t1{height:6%;width:70%;margin-top:6%}
.sk-t2{height:6%;width:52%;margin-top:3%}
/* 2 사진 */
.l2 img{width:100%;height:100%;object-fit:cover;display:block}
/* 3 글 — 사진 위에 얹힌다 (l2 와 같이 켜진다) */
.l3{display:flex;flex-direction:column;justify-content:center;gap:12px;
padding:0 8%;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,
rgba(255,255,255,.86) 46%,rgba(255,255,255,0) 82%)}
.l3 b{font-size:clamp(20px,2.4vw,32px);letter-spacing:-.045em;line-height:1.24}
.l3 span{font-size:clamp(12px,1.2vw,14px);color:var(--sub);line-height:1.7;max-width:22em}
.l3 em{align-self:flex-start;font-style:normal;background:var(--acc);color:#fff;
border-radius:99px;padding:9px 20px;font-size:13px;font-weight:700}
/* 4 검색 결과 */
.l4{background:var(--surf);padding:6%}
.serp{display:flex;flex-direction:column;gap:10px}
.sq{border:1px solid var(--line);border-radius:99px;padding:10px 18px;font-size:13.5px;
display:flex;justify-content:space-between;color:var(--sub)}
.sq i{font-style:normal;color:var(--acc);font-weight:700}
.sr{padding:10px 14px;border-radius:8px}
.sr b{display:block;font-size:14.5px;letter-spacing:-.03em}
.sr span{display:block;margin-top:3px;font-size:12px;color:var(--sub)}
.sr.on{background:var(--acc-l);border:1px solid var(--acc)}
.sr:not(.on){opacity:.45}
/* 5 AI 인용 */
.l5{background:var(--surf);padding:6%;display:flex;align-items:center}
.chat{display:flex;flex-direction:column;gap:12px;width:100%}
.cq{align-self:flex-end;background:var(--tint);border-radius:14px 14px 4px 14px;
padding:11px 16px;font-size:13.5px;max-width:78%}
.ca{display:flex;gap:11px;align-items:flex-start}
.cai{flex:none;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.ca p{font-size:13.5px;line-height:1.75;color:var(--ink)}
.ca p b{color:var(--acc);font-weight:800}
.csrc{display:block;margin-top:7px;font-size:11.5px;color:var(--sub)}
/* ── 오른쪽 단계 ── */
/* 단계마다 화면 절반 높이를 준다 — 그래야 스크롤 거리가 생겨 장면이 또렷하게 바뀐다.
마지막 아래 여백이 없으면 05 가 가운데에 오기 전에 고정이 풀린다 */
.steps{list-style:none;padding:clamp(40px,6vw,88px) 0 42vh}
.steps li{min-height:48vh;display:flex;flex-direction:column;justify-content:center;
padding:clamp(20px,3vh,34px) 0;border-top:1px solid var(--line);
opacity:.34;transition:opacity .45s var(--ease)}
.steps li:first-child{border-top:0}
.steps li.on{opacity:1}
.steps .no{display:block;font-family:'M','P',sans-serif;font-weight:600;font-size:12px;
letter-spacing:.14em;color:var(--acc)}
.steps b{display:block;margin-top:9px;font-size:clamp(19px,2.2vw,27px);
letter-spacing:-.045em;line-height:1.3}
.steps .tx{display:block;margin-top:9px;font-size:14.5px;color:var(--sub);line-height:1.8}
@media(max-width:900px){
/* 폰에서는 고정을 풀고 **브라우저를 위에** 둔다. 좁은 화면에서 sticky 두 칸은 안 맞는다 */
.scenewrap{grid-template-columns:1fr;gap:0}
.stick{position:static;padding:clamp(28px,6vw,40px) 0 0}
/* 폰에서는 고정이 없으니 높이를 줄 이유가 없다 */
.steps{padding:clamp(20px,5vw,30px) 0 clamp(34px,6vw,48px)}
.steps li{min-height:0;display:block}
.steps li{opacity:1}
}
@media (prefers-reduced-motion: reduce){ .lay{transition:none} .steps li{opacity:1} }
/* ══════════════════════════════════════════════════════════════
업종을 고르면 **그 업종 화면이 뜬다** (2026-09-17)
상품화된 서비스 사이트에서 효과가 검증된 1순위가 **「살아 있는 제품 증거」**다 —
설명이 아니라 실물. 우리는 업종 여섯의 실제로 열리는 화면을 갖고 있는데
그동안 계산기(값)와 포트폴리오(화면)를 따로 뒀다. 합치면 한 화면에서 끝난다.
⚠ **업종 축은 값에 관여하지 않는다.** 물리면 조합이 3x3x2=18 이라
`:checked ~` 로 손으로 못 적는다. 업종은 **그림만** 갈아 끼운다.
══════════════════════════════════════════════════════════════ */
#b1:checked~.cg label[for=b1],
#b2:checked~.cg label[for=b2],
#b3:checked~.cg label[for=b3],
#b4:checked~.cg label[for=b4],
#b5:checked~.cg label[for=b5],
#b6:checked~.cg label[for=b6]{background:var(--acc);border-color:var(--acc);color:#fff}
#b1:focus-visible~.cg label[for=b1],
#b2:focus-visible~.cg label[for=b2],
#b3:focus-visible~.cg label[for=b3],
#b4:focus-visible~.cg label[for=b4],
#b5:focus-visible~.cg label[for=b5],
#b6:focus-visible~.cg label[for=b6]{outline:2px solid var(--acc);outline-offset:2px}
.shot6{position:relative;margin:0 0 18px;border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;background:var(--tint);aspect-ratio:16/10}
.shot6 .bs{position:absolute;inset:0;opacity:0;display:block;
transition:opacity .5s var(--ease)}
#b1:checked~.shot6 .b1s,
#b2:checked~.shot6 .b2s,
#b3:checked~.shot6 .b3s,
#b4:checked~.shot6 .b4s,
#b5:checked~.shot6 .b5s,
#b6:checked~.shot6 .b6s{opacity:1;z-index:2}
.shot6 img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* **`.bs` 안쪽으로 좁힌다.** 요소 선택자로 넓게 잡으면 나중에 넣는 span 이 전부 걸린다 —
실제로 `.ovname` 이 `bottom:0` 을 물려받아 흰 상자가 사진을 덮었다 */
.shot6 .bs span{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 13px;
display:flex;align-items:baseline;gap:9px;color:#fff;font-size:14px;font-weight:700;
letter-spacing:-.03em;
background:linear-gradient(180deg,rgba(12,15,10,0) 0%,rgba(12,15,10,.85) 62%)}
.shot6 .bs i{font-style:normal;font-size:12.5px;font-weight:600;opacity:.8;margin-left:auto}
.shot6 .bs:hover img{transform:scale(1.03)}
.shot6 img{transition:transform .6s var(--ease)}
/* ── 이번 달 남은 자리 — 1인이라 **진짜다** ── */
.slot{display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:18px;
background:var(--acc-l);border:1px solid var(--acc);border-radius:var(--rp);
padding:9px 18px;font-size:13.5px;color:var(--acc-d)}
.slot b{font-weight:800}
.slot span{font-size:12.5px;opacity:.78}
/* 업종 칩이 여섯이라 한 줄에 안 들어간다 — 두 줄로 흐르게 둔다 */
.calc .chips{row-gap:7px}
/* ══════════════════════════════════════════════════════════════
런칭가 (2026-09-17) — 사용자 지시 *"초반에는 그냥 저렴하게 많이"*
**유지보수를 붙이면 제작비를 깎아 준다.** 「할인」이 아니라 구조다 —
유지보수로 회수할 것을 미리 당겨 쓰는 것이다.
계산기에서 「제작만」을 고르면 **값이 오르는 게 눈에 보여야** 유지보수로 간다.
══════════════════════════════════════════════════════════════ */
/* ⚠ 여기 있던 「런칭가 / 정가」 전환은 **통째로 걷어냈다** (2026-09-22).
유지보수가 옵션이 되면서 갈래가 하나로 돌아갔다 — 전환할 값이 없다. */
/* 요금표 — 정가를 작게 병기 */
.ptab .amt i{display:block;margin-top:3px;font-style:normal;font-size:11px;
font-weight:500;color:var(--sub);opacity:.8}
/* ══════════════════════════════════════════════════════════════
기능으로 보여준다 (2026-09-18)
사용자 지시 *"색이 화려한 게 아니고 기능이라던지 좀더 고차원으로"*
① 상호를 넣으면 미리보기·주소창·버튼이 **즉시** 바뀐다.
우리 CTA 가 「상호만 주시면 시안 보여드립니다」인데 그걸 그 자리에서 보여준다
② 스크롤 진행 바 ③ 내비에 현재 섹션 표시 ④ 헤더가 스크롤에 반응
══════════════════════════════════════════════════════════════ */
/* ── ① 상호 입력 ── */
.namein{display:flex;align-items:center;gap:0;border:1px solid var(--line);
border-radius:var(--rp);background:var(--surf);padding:0 16px 0 18px;
transition:border-color .25s,box-shadow .25s}
.namein:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-l)}
.namein input{flex:1;min-width:0;border:0;outline:0;background:none;
font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.03em;
color:var(--ink);padding:14px 0;min-height:44px}
.namein input::placeholder{color:var(--line);font-weight:500}
.nsuffix{flex:none;font-size:14px;font-weight:600;color:var(--sub);opacity:.7}
.nhint{display:block;margin-top:7px;font-size:12.5px;color:var(--sub)}
/* 라벨을 누르면 입력칸에 커서가 간다 — **누르는 것**이므로 40px 를 준다 */
.cl label{display:inline-flex;align-items:center;min-height:40px;cursor:pointer}
/* 상호는 **데모 화면에 얹지 않는다** (2026-09-18) —
얹으면 「템플릿에 이름만 바꿔 끼운다」로 읽힌다. 우리가 파는 것과 정반대다.
이름은 버튼과 안내 문구에만 쓴다 */
.cbtn .nm{font-weight:800}
.cbtn .nm:not(:empty)::after{content:'\00a0'}
/* ── ② 스크롤 진행 바 ── */
.prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;
background:transparent;pointer-events:none}
.prog i{display:block;height:100%;width:0;
background:linear-gradient(90deg,var(--acc) 0%,#2E8C67 60%,#7FD1A8 100%)}
/* ── ③ 내비에 현재 섹션 ── */
header nav a{position:relative}
header nav a.here{color:var(--acc)}
header nav a.here::after{content:'';position:absolute;left:0;right:0;bottom:-6px;
height:2px;background:var(--acc);border-radius:2px}
/* ── ④ 헤더가 스크롤에 반응 ── */
header{transition:padding .3s var(--ease),background .3s,box-shadow .3s,backdrop-filter .3s}
header.small{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(18,74,56,.5)}
@supports not (backdrop-filter: blur(1px)){ header.small{background:rgba(255,255,255,.97)} }
@media (prefers-reduced-motion: reduce){ header,.shot6.named .ovname{transition:none;animation:none} }
/* ══════════════════════════════════════════════════════════════
잔글씨 바닥은 11.5px (2026-09-18)
사용자 지시 *"라이브로 깨지는데 없나 확인도 좀 하고해라"* 로 전수 점검하다 나왔다.
눈썹 라벨(GROUP · 6인 / 문서번호 / 런칭가)이 10.5px 이었다.
**390px 폰에서는 이게 거의 안 읽힌다** —
「판에서 18px 이면 손에서는 8px」과 같은 함정이다.
⚠ 이 파일은 그대로 배포된다. **주석에 다른 브랜드 이름을 쓰지 말 것** (build_deploy.py 가 막는다).
모양은 그대로 두고 크기만 1px 올렸다. 자간이 넓어 폭은 거의 안 변한다.
⚠ **새 라벨도 11.5px 아래로 내리지 말 것.**
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
작업 벽 (2026-09-18)
사용자 지시 *"캡쳐캡쳐 된거 쭉 화려하게 정렬해놓고. 너무 딱딱 나열형으로 말고"*
**앞의 판은 같은 비율 썸네일 6장이 3열로 반듯하게 놓인 표였다.**
크기가 같고 줄이 맞으면 아무리 잘 만들어도 표로 읽힌다.
벽이 되게 하는 건 넷이고, 넷 다 있어야 한다 —
① 길이가 다르다 .wi 마다 --h 가 다르다. **이게 제일 크다**
② 줄이 어긋난다 가운데 열을 아래로 내린다
③ 겹친다 폰 캡처가 PC 캡처 모서리를 물고 나온다
④ 속도가 다르다 열마다 스크롤에 다르게 흐른다 (motion.js ⑩)
⚠ **높이를 통일하고 싶어질 때가 온다. 하지 말 것.** 통일하면 다시 표다.
══════════════════════════════════════════════════════════════ */
.wall{position:relative;padding:clamp(56px,8vw,118px) 0 clamp(46px,6vw,92px);
background:
radial-gradient(1200px 520px at 12% 0%, rgba(18,74,56,.055), transparent 62%),
radial-gradient(900px 480px at 92% 30%, rgba(18,74,56,.04), transparent 60%),
linear-gradient(180deg,var(--tint) 0%,var(--paper) 78%);
overflow:hidden}
.wallhd{margin-bottom:clamp(30px,4.4vw,64px)}
.wallhd h2{margin-top:10px}
.wallhd .sdesc{max-width:46em}
/* ── 벽 자체 — 열마다 시작 높이가 다르다 ── */
.wallgrid{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
gap:0 clamp(16px,2.2vw,38px);padding:0 clamp(18px,4vw,72px);max-width:1560px;margin:0 auto}
.wcol{will-change:transform}
.wcol:nth-child(2){margin-top:clamp(38px,7vw,132px)}
.wcol:nth-child(3){margin-top:clamp(14px,2.6vw,52px)}
/* ── 한 장 ── */
.wi{display:block;position:relative;text-decoration:none;color:inherit;
margin-bottom:clamp(26px,3.4vw,62px)}
/* 브라우저 띠 — 이게 있어야 「캡처」로 읽힌다 */
.wchrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;
background:#EDEFEA;border:1px solid var(--line);border-bottom:0;
border-radius:11px 11px 0 0}
.wchrome i{width:8px;height:8px;border-radius:50%;background:#CFD4CC;flex:none}
.wchrome u{margin-left:9px;text-decoration:none;font-size:11.5px;color:var(--sub);
letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 캡처 — **높이를 잘라서** 「아래로 더 있다」를 만든다 */
.wshot{display:block;position:relative;height:var(--h);overflow:hidden;
border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px;background:#fff;
box-shadow:0 22px 44px -30px rgba(18,74,56,.55), 0 3px 10px -6px rgba(18,74,56,.22);
transition:height .55s var(--ease),box-shadow .45s var(--ease)}
.wshot img{display:block;width:100%;height:auto}
/* 잘린 자리를 흐리게 — 칼로 자른 것처럼 보이면 싸구려가 된다 */
.wshot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:88px;
background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96));
transition:opacity .45s var(--ease)}
/* 겹치는 폰 — 평면을 입체로 만든다.
⚠ **전체 캡처를 그대로 얹지 말 것.** 390x1560 은 4:1 이라 기둥이 되어
뒤 캡처를 통째로 가린다. 틀에 넣고 **진짜 폰 비율만** 보이게 자른다 */
.wph{position:absolute;left:-18px;bottom:46px;width:21%;max-width:112px;
aspect-ratio:9/19.2;overflow:hidden;
border-radius:13px;border:1px solid var(--line);background:#fff;
box-shadow:0 18px 30px -18px rgba(18,74,56,.55),0 2px 6px -3px rgba(18,74,56,.3);
transition:transform .55s var(--ease)}
.wph img{display:block;width:100%;height:auto}
/* 폰도 아래가 잘린다 — 캡처와 같은 말투로 */
.wph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92))}
.wmeta{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:13px 2px 0}
.wmeta b{font-size:15.5px;font-weight:800;letter-spacing:-.035em}
.wmeta em{font-style:normal;font-size:12.5px;color:var(--sub)}
.wmeta i{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:700;
color:var(--acc);opacity:0;transform:translateX(-5px);
transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* 올리면 **더 내려간다** — 「계속 이어진다」를 손으로 확인시킨다 */
.wi:hover .wshot,.wi:focus-visible .wshot{height:calc(var(--h) + 96px);
box-shadow:0 34px 60px -32px rgba(18,74,56,.62), 0 4px 14px -6px rgba(18,74,56,.26)}
.wi:hover .wshot::after,.wi:focus-visible .wshot::after{opacity:.35}
.wi:hover .wph{transform:translateY(6px) rotate(-2deg)}
.wi:hover .wmeta i,.wi:focus-visible .wmeta i{opacity:1;transform:none}
.wi:focus-visible{outline:2px solid var(--acc);outline-offset:6px;border-radius:12px}
.wallfoot{max-width:52em;margin:clamp(26px,3.6vw,56px) auto 0;
padding:0 clamp(18px,4vw,72px);font-size:14px;line-height:1.85;color:var(--sub);text-align:center}
.wallfoot b{color:var(--ink)}
/* ── 태블릿 — 두 열. 어긋남은 남긴다 ── */
@media (max-width:1080px){
.wallgrid{grid-template-columns:repeat(2,1fr)}
.wcol:nth-child(2){margin-top:clamp(28px,6vw,74px)}
.wcol:nth-child(3){margin-top:0}
/* 셋째 열이 없어졌으니 그 두 장을 앞 열들이 나눠 받는다 */
.wcol:nth-child(3){grid-column:1 / -1;display:grid;
grid-template-columns:repeat(2,1fr);gap:0 clamp(16px,2.2vw,38px);align-items:start}
}
/* ── 폰 — 한 열. 겹침과 흐름은 끈다 ── */
@media (max-width:720px){
.wallgrid{grid-template-columns:1fr;padding:0 18px}
.wcol,.wcol:nth-child(2),.wcol:nth-child(3){margin-top:0;transform:none!important}
.wcol:nth-child(3){grid-template-columns:1fr}
/* 길이 차이는 **줄이되 없애지 않는다** — 폰에서도 표처럼 보이면 안 된다.
⚠ 여기에 clamp() 한 값을 넣으면 **여섯 장이 전부 같은 높이**가 된다.
한 번 그렇게 넣었다가 폰에서 다시 표가 됐다. --h 를 **비율로** 줄일 것 */
.wallgrid .wshot{height:calc(var(--h) * .82)}
.wi:hover .wshot{height:calc(var(--h) * .82)}
.wph{width:22%;max-width:86px;left:-10px;bottom:34px}
.wi{margin-bottom:30px}
}
@media (prefers-reduced-motion: reduce){
.wcol{transform:none!important}
.wshot,.wph,.wmeta i,.wshot::after{transition:none}
}
/* ══════════════════════════════════════════════════════════════
히어로 헤드라인이 잘렸다 (2026-09-22)
사용자 화면에서 「끝까지 책임집」 까지만 나오고 **「니다」가 잘렸다.**
원인 둘이 겹쳤다 —
· `.ln{overflow:hidden}` — 줄 단위 등장을 위한 클립
· `.ln>i{white-space:nowrap}` — 줄이 안 깨지게
둘이 만나면 **안 들어갈 때 줄바꿈 대신 그냥 잘린다.**
게다가 크기가 `7.2vw` 라 **뷰포트**를 따라간다 — 정작 글자가 들어갈 곳은
2단 그리드의 **왼쪽 칸(0.92fr)** 이라 창이 넓어져도 칸은 그만큼 안 넓어진다.
→ 크기를 **칸 기준(cqi)** 으로 잰다. 제일 긴 줄 「끝까지 책임집니다」가
자간 -.055em 에서 약 8.2em 이므로 칸의 1/8.2 = 12.2cqi 가 한계다. 11.4 로 둔다.
⚠ **헤드라인을 더 긴 문장으로 바꾸면 이 숫자를 다시 잡아야 한다.**
══════════════════════════════════════════════════════════════ */
.hero .wrap>div:first-child{container-type:inline-size}
@supports (font-size:1cqi){
.hero h1{font-size:min(clamp(40px,7.2vw,92px), 11.4cqi)}
}
/* cqi 를 모르는 브라우저를 위한 안전장치 — 잘리느니 줄이 깨지는 게 낫다 */
@supports not (font-size:1cqi){
.hero h1 .ln>i{white-space:normal}
}
/* 히어로 설명 — **AI 노출을 한 단어만** 강조한다 (2026-09-22 지시).
값부터 말하면 싼 집이 되고, 기능부터 말하면 할 줄 아는 집이 된다.
전체를 물들이지 않는다. 눈이 갈 곳은 「챗GPT에도 잡히게」 하나뿐이다 */
.hlead em{font-style:normal;color:var(--acc);
box-shadow:inset 0 -.32em 0 rgba(127,209,168,.34)}
/* ══════════════════════════════════════════════════════════════
유지보수를 **옵션으로** 내리고 제작가를 올렸다 (2026-09-22)
사용자 지시 *"유지보수 부분 다 빼자 그냥 옵션으로 넣자. 제작가를 좀 올리고"*
지금까지 유지보수는 **엔진**이었다 — 「붙이면 제작비를 깎아 준다」로
갈래를 둘(런칭가 · 정가) 뒀다. 옵션이 되면 **그 할인의 근거가 없어진다.**
갈래를 하나로 되돌리고 값을 원가 기준(17 / 27 / 37만)으로 올렸다.
⚠ **계산기 축이 둘에서 하나로 줄었다.** `#msub`·`#mbuy` 라디오를 지웠는데,
장당(`.per*`) · 총액(`.t*`) · 포함내역이 **그 라디오에 묶여 있었다.**
라디오만 지우면 선택자가 안 맞아 **통째로 안 뜬다.** 여기서 페이지 수에만 묶어 다시 건다.
══════════════════════════════════════════════════════════════ */
#p3:checked~.out .per3,
#p6:checked~.out .per6,
#p10:checked~.out .per10{display:block}
/* .t* (24개월 총액) 은 계산기에서 뺐다 (2026-09-22) */
/* 값 옆 라벨 — 갈래가 하나라 조건부로 숨길 이유가 없다 */
.price .plab{display:block;font-style:normal;font-size:12.5px;font-weight:600;
color:var(--sub);margin-top:6px;letter-spacing:-.02em}
.price .plab em{font-style:normal;background:var(--acc);color:#fff;border-radius:99px;
padding:2px 8px;font-size:11.5px;margin-left:5px;letter-spacing:0}
.oline .fnote{display:block;font-size:13px;color:var(--sub);letter-spacing:-.02em}
.oline .fnote b{color:var(--ink)}
/* 포함 내역 — 페이지마다 갈리던 네 줄을 두 줄로 고정했다.
「제작에 든 것」과 「유지보수에 든 것」이 갈려 보여야 옵션인 게 읽힌다 */
.inc .w2{display:block;font-size:13px;line-height:1.85;color:var(--sub);letter-spacing:-.025em}
.inc .w2+.w2{margin-top:5px}
.inc .w2 em{font-style:normal;font-weight:700;color:var(--acc);margin-right:6px}