/* ============================================================ public.css — 공개 소개 사이트(www)에만 더하는 것 🔴 **admin.css 위에 얹습니다.** 색·간격·글꼴·테마는 저쪽이 정본이고 여기서 다시 정의하지 않습니다(→ docs/common/frontend.md 4). `mobile.css` 와 똑같은 관계입니다. 🔴 **여기서 새로 만들 수 있는 변수는 `--public-*` 뿐입니다.** `--color-*` · `--space-*` · `--text-*` 를 여기서 정의하는 순간 **사본이 됩니다** — 그때부터 소개 화면과 업무 화면의 색이 따로 놉니다. 왜 별도 파일인가: 업무 화면은 하루에 수백 번 여는 곳입니다. 히어로·가격표· 비교표 규칙을 admin.css 에 얹으면 그 사람들이 매번 함께 받습니다. 반대로 여기 있는 규칙이 저쪽으로 새면 업무 화면 제목이 히어로만큼 커집니다. 🔴 **어두운 테마가 이미 켜져 있습니다**(admin.css 의 prefers-color-scheme). www 는 `` 에 data-theme 을 안 붙이므로, 운영체제를 어둡게 쓰는 방문자는 이 화면도 어둡게 봅니다. 그래서 **색을 직접 적지 않습니다.** `background: #f8fafc` 한 줄이 다크에서 흰 판이 됩니다. ============================================================ */ :root { /* 섹션이 서는 폭. 44rem 은 긴 글에 맞지만 가격표 세 장에는 좁다. */ --public-measure: 64rem; /* 긴 글이 서는 폭. 한 줄 약 80자 — 지금 .public-main 과 같은 값이다. */ --public-prose: 44rem; /* 화면 가장자리와의 사이. 휴대폰에서 글자가 모서리에 붙지 않게. */ --public-gutter: var(--space-6); /* 메뉴가 접히는 지점. rem 이라 글자를 키운 사람에게는 더 일찍 접힌다 (→ docs/ui-rules.md 4번). */ --public-fold: 52rem; } /* ── 머리말 ── 붙박이(sticky)로 두지 않는다. 소개 화면은 길고, 화면 위를 계속 먹을 이유가 없다. 게다가 이 저장소는 붙박이가 아래를 덮은 적이 있다(→ libs/README.md). */ .public-header { flex-wrap: wrap; } .public-nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; } .public-nav-link { padding: 0.25rem 0; color: var(--color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; } .public-nav-link:hover { color: var(--color-text); } /* 지금 보고 있는 곳. 색만으로 말하지 않고 **밑줄**을 함께 쓴다. */ .public-nav-link.is-current { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-primary); } .public-actions { display: flex; align-items: center; gap: var(--space-3); } /* ── 좁은 화면의 메뉴 ── `
` 다. 스크립트가 0줄이고, 자바스크립트가 안 떠도 열리며, 키보드와 화면 낭독기도 브라우저가 이미 해 준다. */ .public-menu { display: none; position: relative; } .public-menu > summary { display: flex; align-items: center; padding: 0.5rem; cursor: pointer; list-style: none; border-radius: var(--radius-md); color: var(--color-text); } .public-menu > summary::-webkit-details-marker { display: none; } .public-menu > summary:hover { background: var(--color-bg-muted); } .public-menu > nav { position: absolute; right: 0; top: 100%; z-index: 5; display: flex; flex-direction: column; min-width: 12rem; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .public-menu > nav > a { padding: 0.625rem 0.75rem; color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); } .public-menu > nav > a:hover { background: var(--color-bg-muted); } @media (max-width: 52rem) { .public-nav, .public-actions { display: none; } .public-menu { display: block; margin-left: auto; } } /* ── 본문: 한 상자에 두 너비 ── 가운데 줄(wide)에 보통 섹션이 서고, 바깥 줄(full)까지 늘리면 히어로와 CTA 띠가 화면 끝까지 닿는다. 상자를 두 겹으로 겹치지 않아도 되어 세로 간격 규칙이 안 깨진다. 🔴 `.public-main` 자체는 건드리지 않는다 — 가입·초대가 그 값을 쓴다. 넓은 화면은 `.public-main-wide` 가 함께 붙었을 때만이다. */ .public-main.public-main-wide { display: grid; grid-template-columns: [full-start] minmax(var(--public-gutter), 1fr) [wide-start] minmax(0, var(--public-measure)) [wide-end] minmax(var(--public-gutter), 1fr) [full-end]; max-width: none; padding: 0 0 var(--space-12); /* 마케팅 섹션은 업무 화면보다 숨을 크게 쉰다. **담는 쪽이 정한다** (→ docs/ui-rules.md 4번). 담기는 쪽에 margin 을 두지 않는다. */ row-gap: var(--space-12); } .public-main-wide > * { grid-column: wide; min-width: 0; } .public-main-wide > .is-full { grid-column: full; } /* 긴 글은 넓은 화면 안에서도 좁게 선다. 한 줄이 100자를 넘으면 눈이 다음 줄의 시작을 못 찾는다. */ .public-prose { max-width: var(--public-prose); } /* 🔴 **한 장짜리 카드는 가운데 선다.** 폭을 좁혀 두기만 하면 넓은 화면에서 왼쪽에 붙어, 가운데 정렬된 히어로 밑에서 화면이 한쪽으로 쏠린 것처럼 보인다. `.public-prose` 자체를 가운데로 보내지 않는 이유: 표나 제목 **밑에 붙는 글 문단**은 위의 것과 왼쪽 끝을 맞춰야 한다. 가운데로 보내면 그 줄만 안쪽으로 들어가 딸려 있는 글로 안 읽힌다(→ /compare · /pricing 의 주석 문단). */ .public-center { /* 🔴 **`width: 100%` 가 함께 있어야 한다.** 섹션은 세로 flex 인데, flex 항목에 가로 auto 여백을 주면 **늘어나기(stretch)를 멈추고 내용 크기로 줄어든다.** 그러면 가운데에 서기는 해도 폭이 제멋대로가 되어, 두 칸으로 설계한 폼이 한 칸으로 접힌다. 폭을 먼저 채우고 max-width 로 깎는다. */ width: 100%; margin-inline: auto; } /* ── 히어로 ── */ .hero { padding: var(--space-12) var(--public-gutter); text-align: center; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); } /* 배경 그림이 있으면 얹는다. 🔴 **바탕색을 지우지 않는다** — 그림이 아직 없거나 안 내려받아졌을 때 글자가 흰 바탕에 그대로 남아야 한다. 그리고 어두운 테마에서는 아예 안 깐다(밝은 그림이라 글자가 안 읽힌다). */ .hero.has-art { background-image: image-set(var(--public-hero-art) type("image/webp")); background-repeat: no-repeat; background-position: center bottom; background-size: cover; } @media (prefers-color-scheme: dark) { .hero.has-art { background-image: none; } } .hero-inner { max-width: var(--public-measure); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } /* clamp 라 화면 폭에 따라 큰다. px 을 안 쓰고도 큰 제목이 된다. */ .hero-title { margin: 0; font-size: clamp(1.75rem, 4vw, 3rem); line-height: var(--leading-snug); font-weight: 700; letter-spacing: -0.02em; } .hero-lead { max-width: var(--public-prose); margin: 0; font-size: var(--text-xl); color: var(--color-text-secondary); } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .hero-note { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); } /* ── 섹션 ── */ .public-section { display: flex; flex-direction: column; gap: var(--space-6); } /* 🔴 flex·grid 의 자식은 기본이 `min-width: auto` 라 **내용보다 작아지지 않는다.** 그래서 안에 넓은 표가 있으면 그 표가 감싼 상자를 밀고, 상자가 페이지를 민다 — `overflow-x: auto` 를 걸어 놔도 소용이 없다. 실제로 비교표가 390px 화면에서 페이지를 789px 로 벌렸다. */ .public-section > * { min-width: 0; } .section-head { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--public-prose); } .section-title { margin: 0; font-size: clamp(1.375rem, 2.5vw, 1.875rem); line-height: var(--leading-snug); font-weight: 700; } .section-lead { margin: 0; color: var(--color-text-secondary); } /* ── 피처 그리드 ── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-6); } .feature-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .feature-item h3 { margin: 0; font-size: var(--text-lg, 1rem); font-weight: 600; } .feature-item p { margin: 0; color: var(--color-text-secondary); } .feature-icon { color: var(--color-primary); } /* 카드 머리의 분위기 그림. 장식이라 높이를 못 박아 카드가 들쭉날쭉하지 않게. */ .trade-art { display: block; width: 100%; height: 9rem; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-2); } /* 갈아타기 삽화. 본문 폭 안에서만 커진다. */ .switch-art { display: block; width: 100%; max-width: var(--public-prose); height: auto; border-radius: var(--radius-lg); } /* ── 가격표 ── */ .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-6); align-items: start; } .price-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* 가장 흔한 크기. 테두리와 그림자 **둘 다**로 말한다 — 색만으로 말하면 어두운 테마나 흑백 인쇄에서 사라진다. */ .price-card.is-featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-lg); } .price-name { margin: 0; font-size: var(--text-xl); font-weight: 700; } .price-amount { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; line-height: var(--leading-none); font-variant-numeric: tabular-nums; } .price-unit { color: var(--color-text-secondary); font-size: var(--text-sm); } .price-people { font-weight: 600; } .price-blurb { margin: 0; color: var(--color-text-secondary); } .price-card .btn { margin-top: auto; } /* ── 비교표 ── 열이 많아 좁은 화면에서는 **표를 감싼 영역에서만** 가로로 스크롤한다. 페이지 전체가 밀리지 않는다(→ docs/ui-rules.md 1번). */ .compare-wrap { overflow-x: auto; min-width: 0; /* 🔴 **이것이 없으면 표가 페이지를 민다.** `overflow-x: auto` 만으로는 넘치는 부분이 문서의 가로 스크롤 폭에 그대로 더해져서, 390px 화면에서 페이지 전체가 789px 로 벌어졌다(2026-09-20 에 재어 봄). 상자 밖으로는 그리지 않는다고 못박아야 그 계산에서 빠진다. */ contain: paint; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .compare-table { width: 100%; border-collapse: collapse; } .compare-table th, .compare-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--color-border); text-align: center; white-space: nowrap; } .compare-table thead th { position: sticky; top: 0; background: var(--color-bg-subtle); font-size: var(--text-sm); } /* 무엇의 줄인지 모른 채 기호만 보게 되면 안 된다. 가로로 밀어도 왼쪽에 붙어 있게. */ .compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; text-align: left; white-space: normal; min-width: 14rem; background: var(--color-surface); } .compare-table thead th:first-child { background: var(--color-bg-subtle); } /* 줄 이름 아래 한 줄 설명. `th` 안이라 그냥 두면 굵게 나온다. */ .compare-table th .form-hint { font-weight: 400; margin-top: 0.25rem; } /* 우리 열은 한눈에 찾을 수 있어야 한다. */ .compare-table .is-us { background: var(--color-primary-bg, var(--color-bg-subtle)); font-weight: 600; } /* 🔴 **색만으로 구분하지 않는다.** 기호(●◐–✕)가 먼저이고 색은 거들 뿐이다. 어두운 테마·색각 이상·흑백 인쇄에서 색은 사라진다. */ .compare-mark { font-size: var(--text-xl); line-height: var(--leading-none); } .compare-mark.is-yes { color: var(--color-success); } .compare-mark.is-part { color: var(--color-warning); } /* 🔴 이 둘은 **뜻이 다른데 색이 같았다** — 화면에서 구별이 안 됐다. 색으로 가르지 않고 기호로 가른다(– 과 ✕). 다만 둘 다 **뜻을 가진 글자**라 --color-text-muted(대비 2.6:1)로는 읽히지 않는다. 한 단계 진하게 둔다. */ .compare-mark.is-unknown, .compare-mark.is-no { color: var(--color-text-secondary); } /* "확인 못 했다" 는 판단이 아니라 빈자리다. 조금 물러서게 둔다. */ .compare-mark.is-unknown { opacity: 0.75; } .compare-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-sm); } .compare-legend span { display: inline-flex; align-items: center; gap: 0.375rem; } /* ── 자주 묻는 것 ── `
` 다. 여닫는 데 스크립트가 필요 없다. */ .public-faq { display: flex; flex-direction: column; gap: var(--space-3); } .faq-item { padding: var(--space-4) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .faq-item > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: 'expand_more'; font-family: 'Material Icons Outlined'; color: var(--color-text-secondary); } .faq-item[open] > summary::after { content: 'expand_less'; } .faq-item > p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); max-width: var(--public-prose); } /* ── 마무리 띠 ── */ .cta-band { padding: var(--space-12) var(--public-gutter); text-align: center; color: var(--color-on-primary); background: var(--color-primary); } .cta-band h2 { margin: 0 0 var(--space-3); font-size: clamp(1.375rem, 2.5vw, 1.875rem); } .cta-band p { margin: 0 0 var(--space-6); opacity: 0.9; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } /* 🔴 파란 바탕 위에서는 **파란 단추가 사라진다.** 가장 눌러야 할 단추가 안 보이는 셈이라, 여기서만 색을 뒤집는다 — 흰 바탕에 파란 글자. */ .cta-band .btn-primary { color: var(--color-primary); background: var(--color-on-primary); border-color: var(--color-on-primary); } .cta-band .btn-primary:hover { color: var(--color-primary); background: var(--color-bg-subtle); border-color: var(--color-bg-subtle); } /* 테두리 단추도 안 보인다. 여기서만 흰 테두리로 바꾼다. */ .cta-band .btn-outline { color: var(--color-on-primary); border-color: var(--color-on-primary); background: transparent; } .cta-band .btn-outline:hover { color: var(--color-primary); background: var(--color-on-primary); } /* ── 제품 화면 액자 ── 🔴 밝은 앱을 찍은 사진이라, 어두운 테마에서 그대로 두면 흰 판이 눈부시다. 액자가 감싸 "사진" 으로 읽히게 한다. */ /* 🔴 **찍은 화면과 이 화면의 경계가 눈에 보여야 한다.** 제품 화면은 흰 바탕이고 소개 화면도 밝은 바탕이라, 그림만 얹으면 어디부터가 제품인지 모른다. 읽다가 그림 속 단추를 누르려 드는 일이 생기고, 그림 속 메뉴를 이 화면의 메뉴로 읽는다. 그래서 **창 모양 액자에 넣는다** — 그림은 액자에 딱 붙고, 둘레를 **진한 선** 하나가 두른다. `--color-border` 는 페이지 바탕과도 흰 화면과도 너무 가까워 선이 안 보인다. 여기서만 `--color-border-strong` 을 쓰는 이유다. 설명은 액자 **안쪽 아래 칸**에 둔다 — 밖에 두면 페이지 글과 섞여, 어디까지가 그림 얘기인지 모른다. */ .shot { margin: 0; /* 가로 화면은 액자를 가득 채우므로 이 바탕이 안 보인다. 보이는 것은 **폰 화면 양옆**뿐이고, 거기서는 흰 판보다 옅은 판이 낫다. */ background: var(--color-bg-subtle); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); /* 그림 모서리를 액자 모양대로 자른다. 안 자르면 둥근 액자 안에서 그림만 각져 보인다. */ overflow: hidden; } .shot img { display: block; width: 100%; height: auto; background: var(--color-surface); } /* 세로로 긴 폰 화면. 액자를 그대로 두면 한 장이 화면을 다 먹는다 — 가로 화면과 같은 폭으로 늘리면 실제보다 커 보이기도 한다. **액자도 함께 좁힌다** — 넓은 액자 가운데 폰이 떠 있으면 액자가 아니라 빈 무대로 보인다. 세로 flex 항목에 가로 auto 여백을 주면 늘어나기를 멈추고 내용 크기로 줄어든다(→ .public-center 의 같은 사정). */ .shot.is-phone { margin-inline: auto; } .shot.is-phone img { width: auto; max-width: 100%; max-height: 32rem; /* 액자 폭은 설명 줄이 정한다(그림보다 넓다). 가운데로 안 보내면 그림이 왼쪽에 붙고 오른쪽만 비어, 잘못 끼운 것처럼 보인다. */ margin-inline: auto; /* 폰 화면만 액자에 안 닿는다. 그 자리는 그림 스스로 테두리를 갖는다. */ border: 1px solid var(--color-border); border-radius: var(--radius-md); } .shot figcaption { padding: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); text-align: center; background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); } /* ── 차례가 있는 목록 ── 번호는 CSS 가 센다. 손으로 적으면 순서를 바꿀 때 어긋난다. */ .step-list { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .step-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; } .step-item::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-weight: 700; color: var(--color-on-primary); background: var(--color-primary); border-radius: var(--radius-md); } .step-item h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg, 1rem); } .step-item p { margin: 0; color: var(--color-text-secondary); } /* ── 바닥글 ── */ .public-footer { padding: var(--space-12) var(--public-gutter) var(--space-8); background: var(--color-surface); border-top: 1px solid var(--color-border); text-align: left; } .public-footer-cols { max-width: var(--public-measure); margin: 0 auto var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-8); } .public-footer-head { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); } .public-footer-cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .public-footer-cols a { color: var(--color-text); text-decoration: none; } .public-footer-cols a:hover { text-decoration: underline; } .public-footer > .form-hint { max-width: var(--public-measure); margin: 0 auto; text-align: center; } /* ── 법률 문서(/privacy) ── 긴 글이라 한 줄 폭을 `--public-prose` 로 묶는다. 표도 같은 폭이다 — 표만 넓으면 글과 표를 오가며 읽을 때 눈이 왼쪽 끝을 잃는다. 세로 간격은 담는 쪽이 `gap` 으로 정한다(→ docs/ui-rules.md 4번). */ .legal-doc > section { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--public-prose); min-width: 0; } .legal-doc h2 { margin: 0; font-size: var(--text-xl); line-height: var(--leading-snug); } .legal-doc p, .legal-doc ul { margin: 0; } .legal-doc ul { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.25rem; /* 공용 초기화가 점을 지운다. 점이 없으면 목록이 문단처럼 읽힌다. */ list-style: disc; } /* 🔴 **업무 표(`.admin-table`)는 칸을 한 줄로 묶고 가운데로 세운다** — 숫자 표에 맞춘 규칙이다. 문장이 든 칸에 그대로 두면 글이 한 줄로 늘어서 잘리고, 390px 화면에서는 두 번째 칸이 아예 안 보였다(2026-09-23). 여기서만 푼다. */ .legal-doc .admin-table thead th, .legal-doc .admin-table tbody td { white-space: normal; text-align: left; vertical-align: top; } /* 첫 칸은 "무엇" 이다. 좁은 화면에서 한 글자씩 꺾이지 않게 폭을 잡아 둔다. */ .legal-doc .admin-table tbody td:first-child { min-width: 8rem; font-weight: 600; }