/* ══════════════════════════════════════════════════════════════════════ StackXo 웹 — 공용 스타일 (index · features · blog · support) ⭐2026-08-04 정식 발행. 옛 랜딩은 archive/web-v1-2026-08/ 에 보관. ⚠️ /privacy · /terms 는 스토어·앱이 물고 있는 URL이라 건드리지 않는다. ⚠️ 색·타이포 = dev/stacktracker/constants/tokens.ts ⚠️ 아이콘 = ./icons/ (앱 아이콘 사본, currentColor 규격 24×24) ⚠️ 결정 로그·촬영 목록 = ./CHANGELOG.md 원칙: flat · 여백=프리미엄 · 목적 없는 요소 제거 단 **섹션마다 틀을 바꿔 리듬을 만든다** (유저 지적: 구성이 단조롭다) ══════════════════════════════════════════════════════════════════════ */ /* ── 서체 ──────────────────────────────────────────────── 앱은 `family:'System'`이라 iOS=SF Pro / Android=Roboto를 쓴다. 웹도 같은 규칙: **애플 기기는 -apple-system이 잡아 진짜 SF가 나온다.** ⚠️ SF는 애플 플랫폼 전용 라이선스라 안드·윈도 사용자에게 보내줄 수 없다. 그 자리에 **Inter**(OFL, SF를 참고해 만든 UI 그로테스크)를 자기호스팅으로 넣는다. → 맥·아이폰: 변화 없음 / 안드·윈도: SF에 훨씬 가까워짐. 가변 폰트 한 벌(라틴, 47KB)로 400·600을 다 쓴다. 구글 CDN 안 씀. */ @font-face{ font-family:"Inter"; src:url("fonts/inter-latin.woff2") format("woff2"); font-weight:100 900; /* 가변 */ font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* ── color — tokens.ts palette ── */ --paper:#F3F1EB; --paper-alt:#FAF8F3; --white:#FFFFFF; --t1:#1C1A15; /* warmT1 */ --t2:#57534A; /* warmT2 */ --t3:#8A857A; /* warmT3 */ --blue:#4264A6; /* blue600 */ --blue-deep:#324E86; /* blue700 */ --blue-lt:#6E8FD6; /* blue400 — 어두운 배경용 */ --green:#3D995C; /* green600 */ --green-lt:#52BD7C; /* green400 — 어두운 배경용 */ --ink:#0F1828; /* slate900 — 어두운 슬랩 */ --navy:#3A5273; /* 로고 중간 바 */ --line:rgba(40,34,22,0.12); /* ── type — tokens.ts textStyle ── */ --fs-caption:12px; --fs-label:14px; --ls-label:-0.1px; --fs-body:16px; --ls-body:-0.4px; --fs-headline:18px; --ls-headline:-0.4px; --fs-t3:20px; --ls-t3:-0.5px; --fs-t2:22px; --ls-t2:-0.7px; --fs-t1:28px; --ls-t1:-1px; --fs-lg:34px; --ls-lg:-1px; --fs-num:46px; --ls-num:-1.2px; --wrap:1080px; --pad:24px; --gap:88px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--t1); font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif; font-size:var(--fs-body);letter-spacing:var(--ls-body);line-height:22px; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,video{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .narrow{max-width:940px;margin:0 auto} .prose{max-width:680px;margin:0 auto} /* ── type roles ─────────────────────────────────────────── */ h1,h2,h3,h4{margin:0;font-weight:600} h1{font-size:var(--fs-lg);letter-spacing:var(--ls-lg);line-height:1.1} h2{font-size:var(--fs-t1);letter-spacing:var(--ls-t1);line-height:1.16} h3{font-size:var(--fs-t2);letter-spacing:var(--ls-t2);line-height:1.24} h4{font-size:var(--fs-headline);letter-spacing:var(--ls-headline);line-height:22px} p{margin:0} .lead{font-size:var(--fs-t3);letter-spacing:var(--ls-t3);line-height:29px;color:var(--t2)} .body{color:var(--t2)} .eyebrow{font-size:var(--fs-caption);letter-spacing:1.4px;line-height:16px; text-transform:uppercase;color:var(--green);font-weight:600} .eyebrow.b{color:var(--blue)} .muted{color:var(--t3);font-size:var(--fs-label);letter-spacing:var(--ls-label);line-height:19px} .blue{color:var(--blue)} .green{color:var(--green)} .center{text-align:center} .say{max-width:56ch;margin-left:auto;margin-right:auto} /* 아이콘 — 앱 사본. currentColor라 부모 색을 따라간다 */ .ico{width:22px;height:22px;flex:0 0 auto;color:var(--green)} .ico.b{color:var(--blue)} /* ── header ─────────────────────────────────────────────── */ header{padding:22px 0 6px} header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px} .mark{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto} .mark img{height:30px;width:auto;display:block} @media (max-width:560px){.mark img{height:27px}} nav.top{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;justify-content:flex-end} nav.top a{text-decoration:none;font-size:var(--fs-label);letter-spacing:var(--ls-label); color:var(--t2);transition:color .18s ease} nav.top a:hover{color:var(--t1)} nav.top a[aria-current]{color:var(--t1);font-weight:600} /* ⚠️ `nav.top a`가 색을 잡고 있어 .pill 단독으론 특이도에서 진다 */ nav.top a.pill{background:var(--blue);color:#fff;border-radius:999px;padding:9px 18px; font-weight:600;transition:background .18s ease,transform .18s ease} nav.top a.pill:hover{background:var(--blue-deep);color:#fff;transform:translateY(-1px)} /* 좁은 화면에선 메뉴가 두 줄로 접히면서 로고와 높이가 어긋난다(8/4 검수). 햄버거를 다느니 줄을 나눈다 — 탭이 하나 더 생기는 것보다 낫다. */ @media (max-width:560px){ header .wrap{flex-direction:column;align-items:stretch;gap:14px} nav.top{justify-content:center;gap:6px 18px} } /* ── buttons ────────────────────────────────────────────── */ .btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .btn{display:inline-flex;align-items:center;gap:11px; background:var(--t1);color:var(--paper-alt);text-decoration:none; border-radius:14px;padding:13px 22px 13px 18px; transition:transform .18s ease,background .18s ease} .btn:hover{background:#000;transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn b{display:block;font-size:var(--fs-headline);letter-spacing:-0.5px;font-weight:600;line-height:20px} .btn small{display:block;font-size:11px;letter-spacing:.2px;line-height:14px;opacity:.66} /* 애플 공식 배지 — 마케팅 가이드라인상 제공된 파일을 그대로 쓴다(변형 금지). 출처 = toolbox.marketingtools.apple.com. 내가 만든 버튼은 규정 위반이라 폐기(8/4). */ .badge-apple{display:inline-block;line-height:0;transition:transform .18s ease} .badge-apple:hover{transform:translateY(-1px)} .badge-apple img{height:54px;width:auto;display:block} @media (max-width:560px){.badge-apple img{height:48px}} .btn.ghost{background:transparent;color:var(--t3);box-shadow:inset 0 0 0 1px var(--line); padding:15px 20px;font-size:var(--fs-label);letter-spacing:var(--ls-label)} .btn.ghost:hover{background:transparent;color:var(--t2);transform:none} /* 어두운 슬랩 위에서는 고스트 버튼이 배경에 묻힌다(8/4 검수) */ .slab-dark .btn.ghost{color:var(--paper-alt);box-shadow:inset 0 0 0 1px rgba(250,248,243,.28)} .slab-dark .btn.ghost:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(250,248,243,.5)} .trust{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--t3); font-size:var(--fs-label);letter-spacing:var(--ls-label);line-height:19px} .trust span{display:inline-flex;align-items:center;gap:7px} .trust .ico{width:16px;height:16px;color:var(--t3)} /* ── 섹션 틀 A: 어두운 패널 ───────────────────────────────── ⭐7개 사이트 실측(marketing/website.md §섹션 시각 문법, 8/4): 「밴드로 나누기」와 「패널로 나누기」는 대체재지 병용재가 아니다. 배경 전환 0인 곳(Bear·Monarch·Linear)은 색을 전부 인셋 패널에 넣는다. 우린 그쪽을 택했다 — 배경은 종이색 하나, 색은 패널 안에서만. */ .slab-dark{background:var(--ink);color:var(--paper-alt);border-radius:24px;padding:52px var(--pad)} .slab-dark .eyebrow{color:var(--green-lt)} .slab-dark .body{color:rgba(250,248,243,.72)} .slab-dark .muted{color:rgba(250,248,243,.5)} .slab-dark .green{color:var(--green-lt)} .slab-dark .blue{color:var(--blue-lt)} .slab-dark .ico{color:var(--green-lt)} /* ── 섹션 틀 B: 밝은 패널 ───────────────────────────────── */ .slab{background:var(--paper-alt);border-radius:24px;padding:52px var(--pad)} /* ── 섹션 틀 C: 세로선 카드 ─────────────────────────────── */ .cards{display:grid;grid-template-columns:1fr;gap:14px} .card{ color:var(--t1); /* 어디에 놓이든 자기 색을 갖는다 — 부모 상속 금지 */ background:var(--white);border-radius:16px;padding:22px 22px 22px 24px; position:relative;overflow:hidden;transition:transform .2s ease} .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)} .card:nth-child(2)::before{background:var(--navy)} .card:nth-child(3)::before{background:var(--blue)} .card:hover{transform:translateY(-2px)} .card h3,.card h4{font-size:var(--fs-headline);letter-spacing:var(--ls-headline);line-height:22px;margin-bottom:8px} .card p{color:var(--t2)} /* vs 현상유지 비교 — ⭐카드 공식은 하나다(실측 규칙 2: Linear는 20종처럼 보여도 생성 규칙이 1개). .card와 같은 공식을 쓰고, 다른 건 왼쪽 선 색뿐이다. 앞의 둘은 회색 선(=우리가 아닌 것), 마지막만 초록. */ .vs{display:grid;grid-template-columns:1fr;gap:14px} .vs .col{ color:var(--t1); background:var(--white);border-radius:16px;padding:22px 22px 22px 24px; position:relative;overflow:hidden;transition:transform .2s ease} .vs .col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--t3);opacity:.35} .vs .col:hover{transform:translateY(-2px)} .vs .col h4{margin-bottom:9px} .vs .col p{color:var(--t2)} .vs .col.on::before{background:var(--green);opacity:1} /* ── 섹션 틀 D: 번호 단계 ───────────────────────────────── */ .steps{display:grid;grid-template-columns:1fr;gap:30px} .step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start} .step .n{font-size:var(--fs-t2);letter-spacing:var(--ls-t2);font-weight:600; color:var(--blue);font-variant-numeric:tabular-nums;line-height:22px;min-width:20px} .step h4{margin-bottom:6px} .step p{color:var(--t2)} /* ── 섹션 틀 E: 텍스트 + 패널 좌우 ──────────────────────── */ .feature{display:grid;grid-template-columns:1fr;gap:32px;align-items:center} .feature .copy{max-width:46ch} .feature h3{margin-bottom:13px} .feature ul{margin:18px 0 0;padding:0;list-style:none} .feature li{position:relative;padding-left:20px;margin-top:11px;color:var(--t2);line-height:22px} .feature li::before{content:"";position:absolute;left:2px;top:9px; width:5px;height:5px;border-radius:50%;background:var(--green)} /* 무료/Pro 경계 한 줄. 기능 페이지가 유일하게 돈 얘기를 숨기고 있다는 지적 반영(8/4). 🔴 금액은 여전히 안 쓴다 — 이름과 한도까지만. */ .feature li.pro{color:var(--t3);font-size:var(--fs-label);letter-spacing:var(--ls-label); line-height:20px;margin-top:16px;padding-left:0} .feature li.pro::before{display:none} .feature li.pro a{color:var(--blue);text-decoration:none} .feature li.pro a:hover{text-decoration:underline} /* 패널 = 스토어 완성본 통짜 (유저 확정: 기기 프레임 재작업 X) */ .panel{border-radius:22px;overflow:hidden;aspect-ratio:1320/2868; width:100%;max-width:288px;justify-self:center;margin:0} .panel img{width:100%;height:100%;object-fit:cover;object-position:top center} /* ── 🎬 영상 자리표시자 ──────────────────────────────────── 영상은 전부 재촬영 예정(유저 8/4). 지금은 빈 칸 + 촬영 지시를 화면에 적어둔다. 촬영본이 오면 이 블록만