/* ══════════════════════════════════════════════════════════════
ONECLIP OFFICIAL WEBSITE — site.css
CHECKPOINT ONECLIP-CORPORATE-WEB-V1-PHASE2-DESIGN-LOCK-02
⚠ 격리된 작업영역 corporate-web/ 안에서만 쓰인다.
vite 진입점은 루트 index.html 하나뿐이라 이 폴더는 빌드에 들어가지 않는다.
── 디자인 잠금 (지시서 §3 §21)
같은 브랜드 느낌 · 다른 페이지 디자인.
biz.oneclip.co.kr 을 «복제»하지 않는다. 다음만 공유한다 —
밝고 깨끗한 톤 · 흰 바탕 · 넉넉한 여백 · 부드러운 모서리 · 읽기 쉬운 활자
biz = AI 매니저 「세미」가 주인공. 업무 이야기.
여기 = ONECLIP AI BOS «시스템»이 주인공. 세미는 AI Runtime 자리에서만 강하게.
⚠ 위 문단은 DESIGN-LOCK-02 시점의 지침이다. 「검정 배경 금지」였다.
LOCAL-INTEGRATION-05 에서 대표님이 이를 «BIZ DARK BRAND DNA →
CORPORATE DARK PREMIUM SYSTEM» 으로 바꾸셨다. 지금은 어두운 쪽이 기본이다.
옛 지침을 지우지 않고 남겨 둔다 — 언제 왜 바뀌었는지가 남아야 한다.
실제로 적용 중인 색 체계는 바로 아래 CORPORATE DARK PREMIUM SYSTEM 이다.
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
CORPORATE DARK PREMIUM SYSTEM
CHECKPOINT ONECLIP-CORPORATE-WEB-V1-LOCAL-INTEGRATION-05
⚠ 이 개정은 «색»만 바꾼다. 뼈대·순서·문구·여백은 그대로다.
STRUCTURE_REDESIGN = NO
── 왜 토큰만 바꾸면 되는가
이 파일은 처음부터 색을 전부 토큰으로 뽑아 두었다. 규칙 하나하나에
색을 박아 넣지 않았기 때문에, :root 의 값을 갈아 끼우는 것만으로
사이트 전체가 어두워진다. 레이아웃 규칙은 한 줄도 건드리지 않는다.
── 두 개의 세계
:root = DARK 제품 · 시스템 · AI (01~09 구획, 하위 제품 페이지)
.light = LIGHT 사람 · 회사 · 신뢰 (10 COMPANY, 11 FOOTER, 회사 페이지)
.light 는 «같은 이름의 토큰»을 라이트 값으로 다시 선언한다.
그래서 그 아래 모든 규칙이 저절로 밝아진다. 규칙을 두 벌 쓰지 않는다.
── 하지 않은 것 (지시서 명시)
· 전체를 새까맣게 칠하지 않는다 — Black 과 Charcoal 로 «깊이»를 만든다
· Purple / Magenta 를 새 주강조색으로 확장하지 않는다
· 네온 · 글로우 · 사이버펑크 효과를 쓰지 않는다
AI BUSINESS AGENT ≠ CYBERPUNK AI
══════════════════════════════════════════════════════════════ */
:root{
color-scheme:dark;
/* 바탕 — 파랑쪽으로 아주 살짝 기운 검정. 순검정(#000)을 쓰지 않는다.
순검정은 화면에서 «구멍»처럼 보이고 층을 쌓을 여지가 없다. */
--ground:#07090E; /* BLACK — 기본 바탕 */
--surface:#0E131B; /* CHARCOAL — 한 단 올라온 구획 */
--surface-2:#161D28; /* 그 위의 작은 면 */
--line:#232C3A;
--line-soft:#1A222E;
--ink:#F3F6FB; /* PRIMARY TEXT — White */
--ink-2:#C6CFDC; /* 본문 */
--muted:#95A1B2; /* SECONDARY TEXT — Gray */
--faint:#7C8899; /* 아주 작은 라벨 (4.5:1 이 나오는 선까지만 낮춘다) */
/* ONECLIP Blue — PRIMARY ACCENT
⚠ 원색 #1257D6 은 검정 위에서 2.4:1 이라 글자로 읽히지 않는다.
그래서 «검정 위에 얹는 파랑»은 한 단 밝혀 쓴다. 브랜드를 바꾼 것이 아니라,
같은 파랑을 어두운 바탕에서 읽히도록 옮겨 놓은 것이다.
원색은 --blue-brand 로 남겨 둔다 (밝은 구획의 채움색). */
--blue:#4C9BFF;
--blue-deep:#8FC0FF; /* 더 밝은 쪽 = 강조·호버 (라이트에서는 더 어두운 쪽) */
--blue-soft:#101A2B; /* 파랑 기 도는 패널 */
--blue-line:#2B4C7E;
--blue-brand:#1257D6; /* ONECLIP 원색 — 밝은 바탕에서만 채움색으로 */
/* 구획 번호(01~05)처럼 «크지만 옅은» 글자 전용.
--blue-line 을 그대로 쓰던 자리인데, 큰 글자도 3:1 은 넘겨야 읽힌다.
실측 2.16:1 이라 별도 토큰으로 분리했다. */
--num:#4A6A9E;
--on-blue:#06131F; /* 밝은 파랑을 «채운» 위에 올리는 글자색 */
/* 주 버튼은 ONECLIP 원색 그대로 간다.
본문 파랑만 밝힌 것이고 브랜드색을 바꾼 것이 아님을, 가장 눈에 띄는
자리에서 보여 준다. 흰 글자 대비 6.25:1, 검정 바탕 대비 3.08:1 로 둘 다 통과한다. */
--btn-fill:#1257D6;
--btn-fill-h:#2E70EE;
--btn-on:#FFFFFF;
/* AI SEMI ACCENT — Green (운영 중 표시도 겸한다) */
--live:#3DD68C;
--live-wash:#0C2019;
--live-line:#1E5540;
/* Live 점의 «번지는 빛». 어두운 바탕이라 은은하게 둔다 */
--live-glow:rgba(61,214,140,.55);
--live-ring:rgba(61,214,140,.30);
--nav-bg:rgba(7,9,14,.86);
/* 어두운 바탕에서 그림자는 거의 보이지 않는다. 깊이는 «면의 밝기»로 만든다.
그림자는 카드를 바탕에서 살짝 띄우는 용도로만 약하게 남긴다. */
--shadow-s:0 1px 2px rgba(0,0,0,.5);
--shadow-m:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.9);
/* ══ 글꼴 체계 ══════════════════════════════════════════════
⚠ 한글과 영문을 «이름으로» 갈라 둔다. 한 요소 안에 두 언어가 섞여도
브라우저가 글자마다 알아서 고른다 — 영문은 --font-en 에서,
한글은 거기 없으므로 --font-kr 로 넘어간다. :lang() 을 쓰지 않아도 된다.
⚠ 집안은 «셋»만 쓴다 (한글 1 · 영문 1 · 라벨 1).
제품 사이트가 쓰던 Gothic A1 은 걷어냈다 — 같은 사이트 안에서 제목 글꼴이
두 개면 회사 소개와 제품 소개가 다른 브랜드처럼 보인다.
⚠ 굵기 상한은 700 이다. IBM Plex Sans KR 가 700 까지만 있어서
800 을 주면 한글이 «가짜 굵게»로 그려진다. */
--font-en:'Archivo'; /* 영문 · 숫자 — 제목과 브랜드 */
--font-kr:'IBM Plex Sans KR'; /* 한글 — 제목·본문 모두 */
--font-mono:'IBM Plex Mono'; /* 라벨 · 코드 · 표 머리글 */
--font-sys:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
--display:var(--font-en),var(--font-kr),var(--font-sys); /* 제목 — 영문 우선 */
--sans:var(--font-kr),var(--font-en),var(--font-sys); /* 본문 — 한글 우선 */
--mono:var(--font-mono),ui-monospace,SFMono-Regular,Menlo,monospace;
/* ══ 활자 위계 ══════════════════════════════════════════════
역할마다 크기·굵기·행간을 «한 곳»에 못 박는다. 페이지마다 제각각이던
값(h3 만 여섯 가지였다)을 여기로 모은다.
⚠ 본문 계열 최소 크기는 12px 다. 그보다 작으면 휴대폰에서 읽히지 않는다. */
--t-hero:clamp(32px,5.2vw,56px); /* A 히어로 */
--t-page:clamp(29px,4.2vw,44px); /* B 페이지 제목 */
--t-sec:clamp(24px,3.2vw,36px); /* C 구획 제목 */
--t-lead:clamp(16.5px,1.8vw,19px); /* D 구획 도입문 */
--t-body:16.5px; /* E 본문 */
--t-feat:19px; /* F 기능 제목 */
--t-desc:15.5px; /* G 기능 설명 */
--t-label:12px; /* H 라벨 · eyebrow */
--t-cta:15.5px; /* I·J 버튼 */
--t-cap:13.5px; /* K 캡션 · 메타 */
--t-legal:13.5px; /* L 바닥글 · 법적 고지 */
--lh-kr:1.80; /* 한글 본문 — 영문보다 넉넉하게 (§9) */
--lh-lead:1.72;
--ls-head:-.022em; /* 한글 제목에 과한 음수 자간을 주지 않는다 */
/* ⚠ 폭 계약 — biz.oneclip.co.kr 와 «같은 값»이다. (2026-09-10)
BIZ --wrap:1320px · .wrap{width:min(1320px, 100% - 48px)}
예전에는 max-width:1140px + padding:0 var(--pad) 였다. 계산 방식이 달라
같은 화면에서 BIZ 보다 180px 좁고 안쪽 여백도 달랐다. 그래서 공식째로 맞췄다. */
--wrap:1320px;
--gap:clamp(56px,7.5vw,104px);
}
/* ── LIGHT 세계 ──────────────────────────────
⚠ 2026-09-10 현재 이 블록을 «쓰는 곳이 없다». 대표님 지시로 회사 구획과
바닥글, 회사 페이지를 전부 어두운 쪽으로 되돌렸기 때문이다.
지우지 않고 남겨 둔다 — 값이 검증된 팔레트라, 밝은 화면이 다시 필요해지면
class="light" 한 줄로 되살릴 수 있다. 지우면 그 값을 다시 만들어야 한다.
(아래는 밝은 세계를 쓰던 때의 설명이다)
09 → 10 에서 화면이 밝아진다. 지금까지는 제품과 시스템과 AI 였고,
여기서부터는 사람과 회사다. 그 전환을 «색으로도» 말한다.
⚠ 여기 적힌 것은 전부 원래 쓰던 라이트 값 그대로다. 새로 고른 색이 아니다. */
.light{
color-scheme:light;
--ground:#FFFFFF;
--surface:#F5F8FD;
--surface-2:#EBF1FA;
--line:#DDE5F1;
--line-soft:#EAF0F8;
--ink:#0B1220;
--ink-2:#33405A;
--muted:#5B6980;
--faint:#5F6C82; /* 원래 #8A97AC 는 흰 바탕 2.96:1 이라 바닥글 저작권 줄이 읽히지 않았다.
옅은 바탕(#F5F8FD) 위에서도 4.5:1 을 «넘기는» 선까지 내렸다 → 4.72:1 */
--blue:#1257D6;
--blue-deep:#0B3C99;
--blue-soft:#EDF3FF;
--blue-line:#C2D6F7;
--blue-brand:#1257D6;
--num:#6E93CC;
--on-blue:#FFFFFF;
--btn-fill:#1257D6;
--btn-fill-h:#0B3C99;
--btn-on:#FFFFFF;
--live:#00794A;
--live-wash:#E3F4EC;
--live-line:#A6D7C0;
/* 밝은 바탕에서는 빛이 번지면 지저분해 보인다. 고리만 남기고 글로우는 거의 끈다 */
--live-glow:rgba(0,121,74,.28);
--live-ring:rgba(0,121,74,.22);
--nav-bg:rgba(255,255,255,.9);
--shadow-s:0 1px 2px rgba(11,18,32,.05);
--shadow-m:0 1px 2px rgba(11,18,32,.04), 0 10px 28px -14px rgba(11,18,32,.18);
background:var(--ground);
color:var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* ⚠ 가상 요소(::before · ::after)도 반드시 함께 적는다. * 는 가상 요소를 잡지 못해서,
이 줄이 «*» 하나였을 때 Live 배지의 점이 움직임 최소화 설정에서도 계속 돌았다.
(2026-09-10 수정) */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
body{
margin:0;background:var(--ground);color:var(--ink);
font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-kr);font-weight:400;
letter-spacing:-.004em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ⚠ 휴대폰에서는 «작은 글자»가 곧 «안 읽히는 글자»다 (지시서 §8).
보조 계열만 한 단 올린다. 본문과 제목은 이미 충분하다.
라벨(12px)은 장식이라 그대로 두되, 그 아래로는 절대 내리지 않는다. */
@media (max-width:620px){
:root{--t-cap:14px;--t-legal:14px}
}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}
/* 좁은 화면에서는 좌우 18px 씩. BIZ 와 같다. */
@media (max-width:620px){.wrap{width:calc(100% - 36px)}}
.narrow{max-width:780px}
/* ── 내비 ─────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);
backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
/* ⚠ height 가 아니라 min-height 다.
height:66px 로 못 박아 두었더니, 390px 에서 링크 넉 줄이 두 줄로 접히면서
66px 상자를 «넘쳐» 브랜드 글자와 아래 본문 위로 겹쳐 찍혔다.
고정 높이 + flex-wrap 은 같이 쓸 수 없다. (2026-09-09 수정) */
.nav-in{display:flex;align-items:center;gap:24px;min-height:66px}
.brand{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.035em;
color:var(--ink);text-decoration:none;border:0;flex-shrink:0}
.brand span{color:var(--blue)}
/* 로고 이미지로 바뀐 뒤에도 «글자 높이»와 같은 자리를 차지하게 둔다.
내비 높이(67px)가 달라지면 sticky 앵커 보정값까지 어긋난다. */
.brand img{height:24px;width:auto;display:block}
@media (max-width:640px){.brand img{height:22px}}
.nav-links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav-links a{font-size:14.5px;color:var(--muted);text-decoration:none;border:0;font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--blue)}
/* ── 좁은 화면의 상단 내비
한 줄에 브랜드 + 링크 넉 줄은 390px 에 들어가지 않는다. 억지로 밀어 넣는 대신
브랜드를 윗줄, 링크를 아랫줄로 «일부러» 나눈다. 접혀서 겹치는 것과
나누어 놓는 것은 보기에 전혀 다르다. */
@media (max-width:640px){
/* ⚠ padding 한 줄로 쓰면 안 된다. 이 상자는 .wrap 이기도 해서
.wrap 의 좌우 여백까지 0 으로 밀어 버린다.
실제로 그렇게 밀려 첫 링크 「ONECLIP 이란」의 O 가 화면 왼쪽에서 잘렸다. */
.nav-in{flex-direction:column;align-items:flex-start;gap:2px;
padding-top:9px;padding-bottom:9px}
/* 넉 줄이 «한 줄»에 들어가도록 글자와 사이를 조금 줄인다.
두 줄로 접히면 sticky 바가 150px 까지 자라 화면 위쪽을 너무 먹는다. */
.nav-links{margin-left:0;width:100%;gap:12px}
.nav-links a{padding:6px 0;font-size:13px} /* 손가락 닿는 높이 26px → 38px */
}
/* ⚠ 상단 내비가 sticky 라, 앵커로 뛰면 제목이 내비 «밑»에 숨는다.
내비 높이만큼 미리 물러나 세운다. */
:target{scroll-margin-top:86px}
section[id],div[id],header[id]{scroll-margin-top:86px}
@media (max-width:640px){
:target,section[id],div[id],header[id]{scroll-margin-top:104px}
}
/* ── 활자 ─────────────────────────────────── */
/* ⚠ word-break:keep-all 이 없으면 「다섯」이 「다 / 섯」으로 갈라진다.
한글은 단어 안에서 끊지 않고 띄어쓰기에서만 끊어야 읽힌다. */
/* ⚠ 굵기를 역할로 갈랐다 (§7) — 제목 셋이 모두 600 이라 위계가 없었다.
h1·h2 = 700 (구획 제목) · h3 = 600 (기능 제목)
⚠ 자간을 -.03em → -.022em 로 풀었다. 한글은 음수 자간을 크게 주면 글자가 붙는다. */
h1,h2,h3{margin:0;letter-spacing:var(--ls-head);text-wrap:balance;word-break:keep-all;color:var(--ink)}
h1{font-size:var(--t-hero);line-height:1.10;font-weight:700}
h2{font-size:var(--t-sec);line-height:1.24;font-weight:700}
h3{font-size:var(--t-feat);line-height:1.42;font-weight:600;letter-spacing:-.018em}
.lat{font-family:var(--display);font-weight:700;letter-spacing:-.04em}
/* 제목 안에서 제품 이름만 색으로 띄운다. 흰 글자 사이에서 이름이 먼저 읽히게 하는 용도.
⚠ --blue 는 어두운 바탕용(#4C9BFF)과 밝은 바탕용(#1257D6)이 이미 나뉘어 있으므로
.light 구획에서도 따로 손대지 않아도 된다. */
h1 .pname,h2 .pname,h3 .pname{color:var(--blue)}
.eyebrow{font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--blue);margin:0 0 14px}
.eyebrow.grey{color:var(--faint)}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink-2);max-width:60ch}
/* 히어로 첫 문단만 «줄을 고르게» 나눈다.
⚠ 「…기업의 규칙 안에서」 뒤에 를 넣었더니, 그 앞부분이 자연 줄바꿈되면서
「안에서」 한 낱말만 둘째 줄에 홀로 남았다 (1440·1280). 390 에서는 「AI / Semi™」 로 갈렸다.
balance 를 주면 브라우저가 앞부분을 «두 줄로 고르게» 나눠 그 두 가지가 함께 사라진다.
keep-all 은 한글 낱말을 중간에서 자르지 않게 한다. */
.hero .lead{text-wrap:balance;word-break:keep-all}
p{margin:0 0 17px;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.dim{color:var(--muted);font-size:var(--t-desc);line-height:1.72}
strong{font-weight:600;color:var(--ink)}
a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-line)}
a:hover{border-bottom-color:var(--blue)}
a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);padding:2px 6px;border-radius:4px;color:var(--ink-2)}
/* ── 본문으로 건너뛰기
⚠ 키보드만 쓰는 사람은 페이지마다 상단 내비를 전부 지나야 본문에 닿는다.
평소에는 화면 위로 숨겨 두고, Tab 을 누른 «그 순간에만» 내려온다.
display:none 으로 숨기면 포커스가 가지 않아 아무 소용이 없다. */
.skip{position:fixed;left:16px;top:-64px;z-index:200;
background:var(--blue);color:var(--on-blue);border:0;border-radius:0 0 10px 10px;
padding:11px 18px;font-size:var(--t-cta);font-weight:600;
transition:top .16s ease}
.skip:focus{top:0}
.skip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
main:focus{outline:none}
section{padding:var(--gap) 0}
section.tint{background:var(--surface)}
.s-top{max-width:64ch;margin-bottom:40px}
/* 제목을 «정한 줄 수»로 세워야 하는 구획만 폭을 푼다. 본문(.lead)은 64ch 그대로 둔다. */
.s-top.wide{max-width:none}
.s-top.wide .lead{max-width:64ch}
/* ⚠ 설명 문단을 «한 줄»로 세우고 싶을 때. 상자를 두 겹 풀어야 한다 —
.s-top(64ch) 하나만 풀면 소용없다. .lead 자신도 60ch 로 묶여 있기 때문이다.
(실제로 .s-top.wide 만 걸었다가 문단이 그대로 두 줄로 남았다. 2026-09-10)
⚠ 글자를 줄여서 한 줄에 넣지 않는다. 좁아지면 자연스럽게 접히게 둔다. */
.s-top.wide.lead-1line .lead{max-width:none}
@media (min-width:1181px){.s-top.wide.lead-1line .lead{white-space:nowrap}}
.s-top p{margin-top:15px}
/* ⚠ 제목 바로 뒤에 오는 문단은 띄운다. p 의 아래 여백(17px)만 있고 위가 0 이라
제목과 첫 문장이 붙어 보였다. .s-top 안에서는 위 규칙이 이미 하고 있던 일을,
.s-top 없이 제목과 문단만 놓는 구획(제품 페이지의 좁은 단)에도 똑같이 준다. */
h2 + p{margin-top:15px}
/* ── 히어로 ───────────────────────────────── */
.hero{padding:clamp(56px,8vw,100px) 0 clamp(52px,7vw,88px);
background:linear-gradient(180deg,var(--blue-soft) 0%,var(--ground) 62%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px}}
/* ── 히어로 브랜드 표제 ──────────────────────
⚠ hero-grid «밖», 히어로 맨 위 띠에 둔다. 대표님이 지정하신 자리다.
글 단(왼쪽) 안에 넣으면 align-items:center 때문에 세미 그림 높이에 맞춰
가운데로 밀려 내려가서, 지정하신 자리보다 한참 아래에 붙는다.
⚠ 바로 아래 h1 도 흰 글자다. 흰 글자 두 덩어리를 쌓으면 무엇이 표제인지 흐려지므로
제품 이름 부분만 --blue 로 띄운다. 사이트의 h1 .pname 규칙과 같은 방식이다.
⚠ h1(최대 58px)보다 한 단 작게 잡았다. 표제가 h1 을 눌러버리면
「무엇을 하는 회사인가」가 뒤로 밀린다. */
.hero-brand{font-family:var(--display);font-weight:700;
font-size:clamp(28px,4.2vw,46px);line-height:1.06;letter-spacing:-.045em;
color:var(--ink);margin:0 0 clamp(26px,3.4vw,44px);word-break:keep-all}
.hero-brand .b{color:var(--blue)}
/* ⚠ ™ 를 그대로 두면 46px 글자 옆에서 너무 크다. 작게 줄여 위로 올려 붙인다. */
.hero-brand .tm{font-size:.42em;vertical-align:.72em;letter-spacing:0;margin-left:.06em}
.hero h1{margin-bottom:22px}
.hero .tagline{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.9vw,30px);
letter-spacing:-.04em;color:var(--blue);margin:0 0 24px}
.flow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:30px 0 0;
font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.flow b{font-weight:500;color:var(--ink);background:var(--ground);border:1px solid var(--line);
padding:6px 12px;border-radius:6px;box-shadow:var(--shadow-s)}
.flow i{font-style:normal;color:var(--blue)}
/* ⚠ 영문 사슬 «아래» 한 줄로 붙는 한글 여정. 영문은 구조를 말하고, 한글은 그 구조 안에서
고객에게 «무슨 일이 일어나는가»를 말한다 (§7). 두 줄이 한 덩어리로 읽히도록 바짝 붙인다.
⚠ 상자를 만들지 않는다 — 위 사슬과 경쟁하면 어느 쪽을 읽어야 할지 흐려진다. */
.flow-kr{margin:10px 0 0;font-size:var(--t-cap);line-height:1.75;color:var(--muted);
word-break:keep-all}
.flow-kr i{font-style:normal;color:var(--blue);margin:0 3px}
/* ⚠ 페이지를 닫는 «한 문장». 방문자가 이 페이지에서 딱 하나 기억해 갈 문장을 놓는 자리다.
상자를 두르지 않는다 — 상자는 «참고 사항»으로 읽히고, 이 문장은 결론이다. */
.closing-line{max-width:44ch;margin:0 auto;text-align:center;
font-family:var(--display);font-weight:700;
font-size:clamp(19px,2.3vw,27px);line-height:1.45;letter-spacing:-.022em;
color:var(--ink);word-break:keep-all;text-wrap:balance}
.closing-line b{color:var(--blue);font-weight:700}
/* ⚠ 두 낱말 이상인 영문 이름(ONECLIP App · Golf Booking …)을 감싼다.
한글 문장 안에서 이름이 「ONECLIP / App」처럼 두 줄로 쪼개지는 것을 막는다. */
.nb{white-space:nowrap}
/* 히어로 시각물 — 5앱이 CORE 를 둘러싼 모습 (기술 도면처럼 보이지 않게) */
.orbit{background:var(--ground);border:1px solid var(--line);border-radius:20px;
padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow-m)}
.orbit-apps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}
@media (max-width:520px){.orbit-apps{grid-template-columns:repeat(3,1fr)}}
.orbit-app{border:1px solid var(--line);background:var(--surface);border-radius:10px;
padding:14px 6px;text-align:center;font-family:var(--display);font-weight:600;
font-size:13.5px;letter-spacing:-.02em;color:var(--ink)}
.orbit-rail{height:22px;position:relative;margin:0 auto;width:100%}
.orbit-rail::before{content:'';position:absolute;left:12%;right:12%;top:11px;height:1px;background:var(--blue-line)}
.orbit-rail::after{content:'';position:absolute;left:50%;top:11px;bottom:0;width:1px;background:var(--blue-line)}
.orbit-core{border:1px solid var(--blue-line);background:var(--blue-soft);border-radius:12px;
padding:18px;text-align:center}
.orbit-core .t{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.035em;color:var(--blue-deep)}
.orbit-core .s{font-family:var(--mono);font-size:var(--t-label);color:var(--blue);margin-top:5px;letter-spacing:.05em}
.orbit-down{width:1px;height:20px;background:var(--blue-line);margin:0 auto}
/* ⚠ 검은 바탕에서 --blue(#4C9BFF) 를 통째로 깔면 이 칸이 히어로에서 «가장 밝은 면»이 되어
주 버튼보다 세게 보인다. 제품이 먼저, 세미는 그다음이라는 순서가 뒤집힌다.
그래서 여기도 주 버튼과 같은 ONECLIP 원색을 쓴다. (§5 우선순위) */
.orbit-semi{border:1px solid var(--btn-fill);background:var(--btn-fill);border-radius:12px;
padding:16px;text-align:center;color:var(--btn-on)}
.orbit-semi .t{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.035em}
.orbit-semi .s{font-family:var(--mono);font-size:var(--t-label);margin-top:4px;opacity:.85;letter-spacing:.05em}
/* ── 버튼 ─────────────────────────────────── */
.cta-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
/* ⚠ 버튼 대신 «어디서 받는지»를 알려 주는 두 줄 (2026-09-10 대표님 지시).
첫 줄은 권유, 둘째 줄은 받는 곳. 링크가 아니라 «안내»다 — 누르는 자리로 보이면 안 된다. */
.storeline{margin:18px 0 0;font-size:var(--t-lead);font-weight:600;line-height:1.55;
color:var(--ink);word-break:keep-all}
.storeline span{display:inline-block;margin-top:6px;font-size:var(--t-desc);
font-weight:400;line-height:1.7;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 23px;border-radius:9px;
font-size:var(--t-cta);font-weight:600;text-decoration:none;border:1px solid transparent;
letter-spacing:-.012em;transition:background .15s,border-color .15s,color .15s}
.btn-1{background:var(--btn-fill);color:var(--btn-on);border-color:var(--btn-fill)}
.btn-1:hover{background:var(--btn-fill-h);border-color:var(--btn-fill-h)}
.btn-2{background:var(--ground);color:var(--ink);border-color:var(--line)}
.btn-2:hover{border-color:var(--blue);color:var(--blue)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* ── 배지 ─────────────────────────────────── */
/* ⚠ 이 사이트의 배지는 전부 «지금 서비스 중»을 뜻하는 Live 배지다. 그래서 점을 기본으로 둔다.
나중에 상태와 무관한 배지(예: New · Beta)를 넣을 일이 생기면 .badge.plain 을 준다.
⚠ 점은 «켜져 있다»는 신호이지 장식이 아니다. 그래서 한 번 반짝이고 마는 깜빡임이 아니라
숨 쉬듯 천천히 도는 신호로 만든다. 빠르게 점멸시키면 경고등처럼 읽히고 눈에 거슬린다.
⚠ 애니메이션을 꺼도(움직임 최소화 설정) 점은 그대로 켜진 상태로 남는다 — 기본값이
불이 «들어온» 모습이고, 움직임만 멈춘다. */
.badge{font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.15em;
text-transform:uppercase;padding:4px 10px;border-radius:5px;
display:inline-flex;align-items:center;gap:7px;
border:1px solid var(--live-line);background:var(--live-wash);color:var(--live);white-space:nowrap}
.badge::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
background:var(--live);box-shadow:0 0 5px var(--live-glow);
animation:live-dot 2.4s ease-in-out infinite}
.badge.plain::before{display:none}
@keyframes live-dot{
0% {opacity:1; box-shadow:0 0 0 0 var(--live-ring), 0 0 5px var(--live-glow)}
55% {opacity:.45; box-shadow:0 0 0 5px transparent, 0 0 2px var(--live-glow)}
100% {opacity:1; box-shadow:0 0 0 0 var(--live-ring), 0 0 5px var(--live-glow)}
}
/* ── 5앱 요약 줄 (WHAT IS) ────────────────── */
.apps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px}
@media (max-width:860px){.apps-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.apps-row{grid-template-columns:1fr}}
.app-chip{background:var(--ground);border:1px solid var(--line);border-radius:13px;
padding:20px 18px;box-shadow:var(--shadow-s)}
.app-chip .n{font-family:var(--mono);font-size:var(--t-label);color:var(--blue);letter-spacing:.14em;margin-bottom:9px}
.app-chip h3{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.03em;margin-bottom:6px}
.app-chip p{font-size:var(--t-cap);line-height:1.62;color:var(--muted);margin:0}
/* ── 소프트웨어 구획 (01~05) ──────────────── */
.sw{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,60px);align-items:center}
@media (max-width:900px){.sw{grid-template-columns:1fr;gap:32px}}
.sw-num{font-family:var(--display);font-weight:700;font-size:clamp(48px,6.6vw,78px);
line-height:.9;letter-spacing:-.05em;color:var(--num);margin-bottom:14px}
.sw h2{margin-bottom:8px}
.sw .tag{font-family:var(--display);font-weight:600;font-size:clamp(17px,2.1vw,21px);
letter-spacing:-.03em;color:var(--blue);margin:0 0 18px}
/* ⚠ 영문 태그 바로 아래 오는 한글 한 줄. 영문 태그와 한 덩어리로 읽혀야 하므로
태그의 아래 여백을 줄이고(.tag.pair) 그 자리에 이 줄을 붙인다.
자간은 건드리지 않는다 — .tag 의 -.03em 은 영문 기준이라 한글에 쓰면 글자가 붙어 보인다. */
.sw .tag.pair{margin-bottom:6px}
.sw .tag-kr{font-size:var(--t-lead);line-height:1.55;font-weight:600;
color:var(--ink);margin:0 0 18px;word-break:keep-all}
.sw-labels{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0}
.sw-labels span{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;
border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
padding:5px 11px;border-radius:6px}
.sw-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
/* 제품 화면 자리 — 가짜 UI 를 그리지 않는다. 실제 촬영본이 들어올 자리만 만든다 */
.proof{border:1px solid var(--line);background:var(--surface);border-radius:16px;
padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-m)}
.proof .lab{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
color:var(--faint);margin-bottom:16px}
.proof ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.proof li{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-desc);color:var(--ink-2);line-height:1.6}
.proof li::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
background:var(--blue);margin-top:9px}
/* ⚠ 이름과 설명을 «위아래 두 줄»로 세우는 목록. 기본형(한 줄짜리)은 이름이 길면
설명이 오른쪽 좁은 칸으로 밀려 「POS · Logistics · / Commerce」처럼 이름이 쪼개진다.
그래서 이름은 이름대로 한 줄을 쓰고, 설명은 그 아래에서 처음부터 흐르게 한다.
⚠ 점(글머리)은 «이름 줄 옆»에 그대로 둔다 — 아래로 내려가면 목록으로 안 보인다.
그래서 flex 가 아니라 격자로 짠다: 1열 점 / 2열 이름·설명 두 줄. */
.proof ul.stack li{display:grid;grid-template-columns:auto minmax(0,1fr);
column-gap:11px;row-gap:3px;align-items:start}
.proof ul.stack li::before{grid-column:1;grid-row:1}
.proof ul.stack li strong{grid-column:2;grid-row:1;color:var(--ink)}
.proof ul.stack li span{grid-column:2;grid-row:2}
.proof ul.stack{gap:14px}
.proof .foot{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
font-size:13.5px;color:var(--muted)}
/* ── 흐름 (Booking chain / Tax chain) ─────── */
/* ⚠ 사슬 위에 붙는 한 줄 제목. .eyebrow 를 쓰지 않는다 — 고정폭 글꼴에 자간 .14em 이라
한글 문장을 넣으면 글자가 흩어져 읽힌다. */
.chain-lab{font-size:var(--t-desc);font-weight:600;color:var(--ink);
margin:0 0 14px;word-break:keep-all}
/* ── 브랜드 벽 (회사 페이지 · OUR BRANDS) ─────────────────────
⚠ 쇼핑몰 «브랜드관»처럼 보이면 안 된다. 이 벽은 광고가 아니라 «사업 이력의 증거»다.
그래서 색을 쓰지 않고, 칸 크기를 모두 같게 하고, 어느 하나를 크게 두지 않는다.
⚠ 칸 «높이»를 고정한다. 로고가 들어와도 가로세로 비율은 건드리지 않고
(object-fit:contain) 이 칸 안에서만 맞춘다 — 로고 왜곡은 상표 문제로 이어진다.
⚠ 공식 로고가 «확인되기 전»에는 이름만 보인다. 깨진 그림 자리를 만들지 않는다. */
/* ⚠ 열 수를 «고정»한다. auto-fill 로 두면 넓은 화면에서 6열이 되어 마지막 줄에
빈칸 세 개가 생긴다 — 줄이 어긋나면 이력이 아니라 진열대로 보인다.
브랜드가 아홉이므로 3열이면 3×3 으로 정확히 떨어진다. */
.brandwall{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){.brandwall{grid-template-columns:repeat(2,1fr);gap:10px}}
.brandwall .bi{display:grid;place-items:center;min-height:104px;padding:18px 14px;
border:1px solid var(--line);background:var(--ground);border-radius:12px;
text-align:center}
.brandwall .bi img{max-width:100%;max-height:44px;width:auto;height:auto;
object-fit:contain}
/* 로고가 아직 없을 때 — 이름을 «상표처럼» 조용히 세운다. 자간만 넓히고 색은 쓰지 않는다.
⚠ 14.5px 에서 22px 로 키웠다 (2026-09-10 대표님 지시 · 50% 증가).
칸 안에서 «로고 자리»만큼의 무게를 갖게 하려는 것이다.
⚠ 좁은 화면에서는 조금 줄인다 — 2열이 되면 칸 폭이 172px 이라
22px 그대로면 「KEYSTONE VANTAGE」가 세 줄로 갈라진다. */
.brandwall .bi .nm{font-family:var(--display);font-weight:600;font-size:22px;
letter-spacing:.06em;color:var(--ink-2);line-height:1.35;word-break:keep-all}
@media (max-width:620px){.brandwall .bi .nm{font-size:18px}}
.brandwall .bi.partner{border-color:var(--blue-line);background:var(--blue-soft)}
.brandwall .bi.partner .nm{color:var(--blue-deep)}
/* ── 실제 사업 → 소프트웨어 (회사 페이지 · FROM REAL BUSINESS TO ONECLIP) ──
⚠ 기술 도해가 아니다. 「실제 사업이 있었고, 그래서 이 제품이 나왔다」는 이야기다.
그래서 상자와 화살표만 쓰고 선·노드·분기를 그리지 않는다. */
.story{display:grid;gap:0;max-width:560px;margin:30px auto 0}
.story .st{border:1px solid var(--line);background:var(--ground);border-radius:11px;
padding:14px 18px;text-align:center}
.story .st .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
text-transform:uppercase;color:var(--blue);display:block}
.story .st .v{font-size:var(--t-desc);color:var(--ink-2);display:block;margin-top:5px;
word-break:keep-all}
.story .st.end{border-color:var(--blue-line);background:var(--blue-soft)}
.story .st.end .k{color:var(--blue-deep);font-family:var(--display);font-weight:700;
font-size:17px;letter-spacing:-.02em;text-transform:none}
.story .sj{width:1px;height:16px;background:var(--blue-line);margin:0 auto}
/* ── 공통 신원 구조 (제품 페이지 · ONECLIP ID) ────────────────
⚠ 제품 «기능 카드»처럼 만들지 않는다. 이것은 Biz·Booking·Tax 가 «함께 서 있는»
플랫폼 공통 층이다. 그래서 층이 위에서 아래로 쌓인 모습으로 그린다.
⚠ 한 줄 안의 칸들은 «같은 층»이다. 순서가 아니라 나란함을 뜻하므로
칸 사이에 화살표를 두지 않는다. 층과 층 사이에만 세로선을 둔다.
⚠ 넓은 화면에서는 한 층이 가로로 펴지고, 좁아지면 세로로 쌓인다. */
.idarch{display:grid;gap:0;max-width:640px;margin:28px auto 0}
.idarch .lay{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.idarch .u{flex:0 1 auto;min-width:0;padding:13px 20px;border-radius:11px;
border:1px solid var(--line);background:var(--ground);text-align:center}
.idarch .u .k{display:block;font-family:var(--mono);font-size:var(--t-label);
letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.idarch .u .v{display:block;margin-top:4px;font-size:var(--t-desc);color:var(--ink-2);
word-break:keep-all}
/* 신원 층과 마지막 경계 층은 이 그림의 «양 끝»이라 색을 준다 */
.idarch .u.id,.idarch .u.gate{border-color:var(--blue-line);background:var(--blue-soft)}
.idarch .u.id .k,.idarch .u.gate .k{color:var(--blue-deep)}
.idarch .u.id .v,.idarch .u.gate .v{color:var(--ink)}
.idarch .lj{width:1px;height:16px;background:var(--blue-line);margin:0 auto}
@media (max-width:560px){
.idarch .lay{flex-direction:column}
.idarch .u{width:100%}
}
/* ── 사용자 흐름 (누가 쓰는가) ─────────────────────────────
BUSINESS → ONECLIP BIZ → ONECLIP CORE → ONECLIP TAX → TAX PROFESSIONAL
⚠ 넓은 화면에서는 «가로 한 줄», 좁은 화면에서는 «세로로 쌓기» (2026-09-10).
화살표도 같이 방향을 바꾼다 — 옆으로 놓인 화살표가 아래를 가리키면 흐름이 끊겨 보인다.
⚠ 마지막 칸(.end)이 이 그림의 «답»이다. 파란 칸은 하나만 둔다. */
.uflow{display:grid;gap:0;grid-template-columns:1fr;margin:32px 0 0}
.uflow .u{border:1px solid var(--line);background:var(--ground);border-radius:12px;
padding:16px 18px;text-align:center;min-width:0}
.uflow .u .k{display:block;font-family:var(--mono);font-size:var(--t-label);
letter-spacing:.1em;text-transform:uppercase;color:var(--blue);word-break:keep-all}
.uflow .u .v{display:block;margin-top:7px;font-size:var(--t-desc);color:var(--ink-2);
line-height:1.55;word-break:keep-all}
.uflow .u.end{border-color:var(--blue-line);background:var(--blue-soft)}
.uflow .u.end .k{color:var(--blue-deep)}
.uflow .u.end .v{color:var(--ink)}
.uflow .j{display:grid;place-items:center;height:20px;color:var(--blue);font-size:14px;line-height:1}
.uflow .j::before{content:"\2193"}
@media (min-width:1000px){
.uflow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch}
.uflow .j{height:auto;padding:0 6px}
.uflow .j::before{content:"\2192"}
}
/* 그림 아래 한 줄 라벨 — ONE ID · ONE CONTEXT · CONNECTED SERVICES */
.archlab{margin:18px 0 0;text-align:center;font-family:var(--mono);
font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted)}
.chain{display:grid;gap:0;margin:0}
.chain-item{background:var(--ground);border:1px solid var(--line);border-radius:11px;
padding:15px 19px;display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:baseline}
/* ⚠ 라벨 칸의 «너비를 고정»한다. 칸마다 라벨 길이가 달라(BIZ · MANAGEMENT) 설명이
저마다 다른 자리에서 시작하면 눈이 왼쪽 선을 따라가지 못하고 계단처럼 읽힌다.
⚠ .chain-item 은 «칸마다 따로» 격자다. 그래서 격자 열 너비를 잡아도 칸끼리 맞춰지지 않는다.
라벨 자신에게 최소 너비를 줘야 여섯 칸의 설명 시작점이 한 줄로 선다. (2026-09-10 수정)
⚠ 가장 긴 라벨은 MANAGEMENT · MY BOOKING (10자)이다. 그보다 긴 라벨을 새로 넣으면
이 값을 함께 키운다. */
.chain-item .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--blue);
text-transform:uppercase;white-space:nowrap;min-width:100px}
/* 좁은 화면에서는 라벨을 윗줄로 올린다 — 100px 을 떼고 나면 설명이 읽을 수 없이 좁아진다 */
@media (max-width:520px){
.chain-item{grid-template-columns:1fr;gap:6px}
.chain-item .k{min-width:0}
}
.chain-item .v{font-size:var(--t-desc);color:var(--ink-2)}
.chain-item .v b{color:var(--ink)}
.chain-join{width:1px;height:16px;background:var(--blue-line);margin:0 auto}
/* ── 단계 흐름 (Semi) ─────────────────────── */
.steps{display:grid;gap:3px}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
padding:17px 19px;background:var(--ground);border:1px solid var(--line-soft);border-radius:11px}
.step .n{font-family:var(--mono);font-size:var(--t-label);font-weight:600;color:var(--faint);padding-top:4px;letter-spacing:.06em}
.step.human{border-color:var(--blue-line);background:var(--blue-soft)}
.step.human .n{color:var(--blue)}
.step h3{font-size:16.5px;margin-bottom:4px}
.step p{font-size:var(--t-desc);margin:0;color:var(--muted)}
/* ── 아키텍처 도해 ────────────────────────── */
.arch{display:grid;gap:0;max-width:860px;margin:0 auto}
.arch-layer{border:1px solid var(--line);background:var(--ground);border-radius:13px;
padding:22px;text-align:center;box-shadow:var(--shadow-s)}
.arch-layer .lab{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.17em;text-transform:uppercase;
color:var(--faint);margin-bottom:13px}
.arch-apps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.arch-apps span{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.025em;
border:1px solid var(--line);background:var(--surface);padding:9px 16px;border-radius:7px;color:var(--ink)}
.arch-core{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.04em;color:var(--ink)}
.arch-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:7px;letter-spacing:.04em}
.arch-join{height:26px;width:1px;background:var(--blue-line);margin:0 auto;position:relative}
.arch-join::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--blue-line)}
.arch-runtime{border-color:var(--blue-line);background:var(--blue-soft)}
.arch-runtime .arch-core{color:var(--blue-deep)}
/* ⚠ 이 한 줄은 층 도해(.arch)와 아래 세미 말풍선 «사이»에 홀로 놓인다.
위 20px · 아래 44px 이라 가운데가 아니라 «위쪽에 붙어» 있었다.
위아래를 같은 37px 로 맞춰 세로 가운데에 세운다. 사이 전체 높이(95px)는 그대로다.
(대표님 지시 · 2026-09-10) */
.arch-note{font-family:var(--mono);font-size:12px;color:var(--faint);text-align:center;margin-top:37px}
/* ⚠ 세미 그림을 «위로» 올려 말풍선과 아래 끝을 맞춘다 (대표님 지시 · 2026-09-10).
그림 칸은 132px 정사각, 말풍선은 112px 이라 가운데 정렬에서 그림이 10px 더 내려와 있었다.
align-items:end 만으로는 안 된다 — 행 높이를 «키 큰 쪽»(그림)이 정하므로
말풍선이 «내려와» 바닥이 맞는다. 올리는 것과 반대다.
그래서 그림에 자기 높이만큼 음수 여백을 줘 «행 높이에 관여하지 않게» 만든다.
행은 말풍선이 혼자 정하고, 그림은 그 바닥에 붙어 위로 자란다.
말풍선이 더 길어져도 계산할 값이 없으니 그대로 맞는다.
⚠ 520px 이하는 한 단으로 쌓이므로 걸지 않는다. 거기서 음수 여백을 주면
그림이 위 문단을 덮는다. */
@media (min-width:521px){
.sw-semi{align-items:end}
.sw-semi > .semi-slot{align-self:end;margin-top:-132px} /* -132px = 위 width:132px 과 같은 값 */
}
/* ── 카드 ─────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.card{background:var(--ground);border:1px solid var(--line);border-radius:14px;padding:25px;
display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow-s)}
.card .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:19px}
.card p{font-size:var(--t-desc);line-height:1.70;margin:0;color:var(--muted);flex:1}
.card .go{font-size:14.5px;font-weight:600;color:var(--blue);border:0;margin-top:4px;
display:inline-flex;align-items:center;gap:6px}
.card .go:hover{gap:10px}
/* ── 표 ───────────────────────────────────── */
.t-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--ground)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-desc)}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;
color:var(--faint);background:var(--surface);font-weight:500;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
td{color:var(--ink-2)}
td b{color:var(--ink);font-weight:600}
.tab-num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ── 정의 목록 ────────────────────────────── */
.defs{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.def{background:var(--ground);padding:20px 22px;display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:20px}
.def dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0}
.def dd{margin:0;font-size:15.5px;color:var(--ink-2)}
@media (max-width:640px){.def{grid-template-columns:1fr;gap:6px}}
/* ── 인용 · 노트 ──────────────────────────── */
.pull{border-left:3px solid var(--blue);padding:6px 0 6px 24px;margin:32px 0;
font-family:var(--display);font-weight:600;font-size:clamp(19px,2.5vw,25px);
letter-spacing:-.035em;line-height:1.4;color:var(--ink)}
.pull small{display:block;font-family:var(--sans);font-weight:400;font-size:15.5px;
letter-spacing:0;color:var(--muted);margin-top:11px;line-height:1.72}
/* ⚠ 강조 문장이 «한글»일 때. 기본 .pull 의 자간 -.035em 은 영문 기준이라
한글에 그대로 걸면 글자가 서로 붙어 보인다. 자간을 풀고 낱말 단위로 끊는다. */
.pull.kr{letter-spacing:-.02em;line-height:1.5;word-break:keep-all}
/* ── 창업자의 말 (회사 페이지 · Founder Message) ─────────────
⚠ 이 페이지에서 «사람의 목소리»가 나오는 유일한 자리다. 본문 크기로 두면
그냥 한 문단으로 흘러가 버리므로 크게 세운다.
⚠ 큰따옴표는 CSS 로 붙인다 — 글자를 복사할 때 따옴표가 딸려가지 않게 하려는 것이다.
⚠ 사진이 아직 없다. 사진이 오면 이 위에 얹되, 이 문장이 사진에 밀리지 않게 둔다. */
.fmsg{margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line);
font-family:var(--display);font-weight:600;
font-size:clamp(18px,2.1vw,23px);line-height:1.62;letter-spacing:-.02em;
color:var(--ink);word-break:keep-all;text-wrap:pretty}
.fmsg::before{content:"\201C"}
.fmsg::after{content:"\201D"}
/* ── 연락 수단 (회사 페이지 · Contact) ────────────────────────
⚠ 이 페이지에서 전화번호와 이메일이 «한 번만» 나오는 자리다.
운영 법인 구획에서 뺐고, 바닥글은 법적 정보라 그대로 둔다 (LOCK).
⚠ 그래서 여기서는 눈에 띄어야 한다 — 목록 한 줄로 흘려보내지 않는다. */
.reach{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;
margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
/* ⚠ 링크 기본값(a{border-bottom:...})을 꺼야 한다. text-decoration 만 껐다가
전화번호 아래에 파란 줄이 그대로 남았다. 이 사이트의 밑줄은 border 다. */
.reach .tel{font-family:var(--display);font-weight:700;
font-size:clamp(20px,2.3vw,26px);letter-spacing:-.02em;
color:var(--ink);text-decoration:none;border-bottom:0;white-space:nowrap}
.reach .tel:hover{color:var(--blue)}
/* ⚠ PC 에서는 전화번호를 «누르는 링크»가 아니라 «적힌 번호»로 보여 준다 (2026-09-10).
까닭 — PC 브라우저는 tel: 링크를 누르면 「이 애플리케이션을 여시겠습니까?」 하는
앱 선택 창을 띄운다. PC 에는 걸 전화기가 없으니 그 창은 도움이 되지 않는다.
휴대폰·태블릿에서는 그대로 눌러 전화가 걸린다. 두 개를 함께 두고 기기에 따라
하나만 보여 주는 방식이라 «한쪽을 지우면 안 된다».
⚠ 바닥글(footer)의 TEL 은 손대지 않았다 — GLOBAL FOOTER = DO NOT MODIFY. */
.tel-tap{display:none}
.reach .tel-print{cursor:default;user-select:text}
.reach .tel-print:hover{color:var(--ink)}
@media (hover:none),(pointer:coarse){
.tel-tap{display:inline}
.tel-print{display:none}
}
.reach .hours{font-size:var(--t-desc);color:var(--muted);white-space:nowrap}
.reach .mail{font-size:var(--t-lead);color:var(--blue);text-decoration:none;
border-bottom:1px solid transparent;word-break:break-all}
.reach .mail:hover{border-bottom-color:var(--blue)}
@media (max-width:520px){.reach{gap:6px 16px}
.reach .mail{flex-basis:100%}}
.note{background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:13px;
padding:20px 23px;font-size:var(--t-desc);color:var(--ink-2)}
.note h3{font-size:15.5px;margin-bottom:8px;color:var(--blue-deep)}
/* ── 푸터 ─────────────────────────────────── */
footer{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 44px;margin-top:var(--gap)}
.f-brandline{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.4vw,25px);
letter-spacing:-.035em;color:var(--ink);margin:0 0 34px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.f-brandline em{font-style:normal;color:var(--blue)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:38px;margin-bottom:34px}
@media (max-width:720px){.f-grid{grid-template-columns:1fr;gap:28px}}
.f-brand{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.035em;margin-bottom:10px}
.f-brand span{color:var(--blue)}
.f-rel{font-size:14.5px;color:var(--ink-2);max-width:44ch;margin:0}
.f-nav{display:flex;flex-wrap:wrap;gap:12px 22px;align-content:start}
.f-nav a{font-size:var(--t-legal);color:var(--muted);border:0;font-weight:500}
.f-nav a:hover{color:var(--blue)}
/* 바닥글 링크는 세로로 여유가 있으니 손가락 닿는 높이를 넓혀 둔다 (25px → 37px) */
@media (max-width:640px){ .f-nav{gap:2px 22px} .f-nav a{padding:6px 0} }
.f-legal{border-top:1px solid var(--line);padding-top:24px;font-size:13.5px;line-height:2;color:var(--muted)}
.f-legal .row{display:flex;flex-wrap:wrap;gap:6px 22px}
.f-legal b{color:var(--ink-2);font-weight:500}
.f-copy{margin-top:16px;font-family:var(--mono);font-size:var(--t-label);color:var(--faint);letter-spacing:.02em}
/* ── 하위 페이지 머리 ─────────────────────── */
.phead{padding:clamp(46px,6vw,80px) 0 clamp(30px,4vw,48px);
background:linear-gradient(180deg,var(--blue-soft) 0%,var(--ground) 100%);border-bottom:1px solid var(--line)}
.phead .badge{margin-bottom:16px}
/* ── 하위 페이지 머리에 «실제 앱 화면»이 들어가는 경우 ──
⚠ 기기 틀은 그림이 아니라 CSS 다. 그림 틀을 쓰면 해상도마다 화면 구멍이 어긋난다.
여기서는 테두리·모서리·노치만 그리고, 그 안을 캡처가 채운다. */
.phead.has-shot{padding-bottom:0}
.phead-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,56px);align-items:end}
@media (max-width:820px){
.phead-grid{grid-template-columns:1fr;justify-items:start}
.phead.has-shot{padding-bottom:clamp(30px,4vw,48px)}
}
.phone{
position:relative;width:clamp(210px,22vw,268px);aspect-ratio:9/19.5;
border:9px solid #1B222E;border-radius:36px;background:#000;
box-shadow:0 0 0 1px #2B3543, var(--shadow-m);
/* 머리 구획 아래쪽에 «반쯤 걸치게» 세운다 — 기기가 지면에서 올라온 느낌 */
margin-bottom:-1px;overflow:hidden;flex-shrink:0;
}
@media (max-width:820px){.phone{margin-bottom:0}}
/* 노치 */
.phone::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
width:34%;height:18px;background:#1B222E;border-radius:0 0 12px 12px;z-index:2}
.phone-screen{position:absolute;inset:0;border-radius:27px;overflow:hidden;background:#0B1017}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.phead h1{font-size:clamp(29px,4.6vw,46px);margin-bottom:18px}
.crumb{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.crumb a{color:var(--faint);border:0}
.crumb a:hover{color:var(--blue)}
/* ══════════════════════════════════════════════════════════════
REAL SEMI NARRATOR LAYER
CHECKPOINT ONECLIP-CORPORATE-WEB-V1-REAL-SEMI-NARRATOR
원칙 — The product is the hero. Semi tells the story.
세미는 장식 캐릭터가 아니라 «실제로 일하는 AI 운영 에이전트»를 사람으로 시각화한 존재다.
그러나 화면을 장악하지 않는다. 제품이 먼저 보이고, 세미가 옆에서 설명한다.
⚠ 세미 이미지를 «만들어 넣지 않는다». 자리(slot)만 잡는다.
실제 이미지는 대표님 쪽에서 동일한 REAL SEMI Identity 기준으로 제작한다.
⚠ 이미지 안에 글자를 넣지 않는다. 글자는 전부 HTML/CSS 다. (§15)
══════════════════════════════════════════════════════════════ */
/* ── 내레이션 한 줄 — 세미가 말하는 자리 ── */
.narr{
display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:14px;
padding:16px 20px;margin:26px 0 0;max-width:56ch;
}
.narr-av{
width:64px;height:64px;border-radius:50%;flex-shrink:0;
border:1px dashed var(--blue-line);background:var(--ground);
display:grid;place-items:center;
font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--faint);
text-align:center;line-height:1.25;
}
.narr-body{min-width:0}
.narr-who{
font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--blue);margin-bottom:5px;
}
/* ⚠ word-break:keep-all — 한글은 띄어쓰기에서만 끊어야 읽힌다.
이게 없어서 「필요한」이 «필요 / 한» 으로 갈라졌다. 제목(h1~h3)에는 이미 걸려 있었는데
본문 말풍선에는 빠져 있었다. 글자 크기가 바뀔 때마다 다시 터질 자리라 여기서 막는다. */
/* ⚠ 히어로 말풍선만 16.5px/500 이고 나머지는 15.5px/400 이었다.
같은 부품인데 자리에 따라 크기가 달랐다 (§4). 본문 눈금 하나로 모은다. */
.narr-say{
font-size:var(--t-body);line-height:var(--lh-kr);color:var(--ink);margin:0;font-weight:500;
word-break:keep-all;
}
.narr-say em{font-style:normal;font-weight:600}
.narr.plain{background:transparent;border:0;padding:0;border-left:2px solid var(--blue-line);
border-radius:0;padding-left:18px}
/* ── 히어로 말풍선 — 글자를 또렷하게 (대표님 지시 · 2026-09-10) ──
⚠ 폰트가 안 불러와진 것은 «아니다». 확인해 보니 원인은 세 가지였다.
① 이 카드만 15.5px 였다. 사이트 본문 기준은 16.5px 다(body). 한 단 «작게» 쓰고 있었다.
② 굵기 400. 어두운 바탕 위 흰 글자는 같은 굵기라도 획이 번져 보인다(Windows DirectWrite).
밝은 바탕의 검은 글자와 반대다. 그래서 반 단 올린다.
③ 카드가 소수점 좌표(top .625 · left .47)에 놓인다. 유동 그리드라 피할 수 없다.
①②를 고치면 이 영향은 눈에 안 띄는 수준으로 내려간다.
⚠ 굵기는 500·600 까지만 쓴다. 지금 불러오는 IBM Plex Sans KR 는 300·400·500·600 뿐이라
700 을 주면 브라우저가 «가짜 굵게»를 그린다 — 그게 진짜 번짐의 원인이 된다.
⚠ 히어로 카드에만 건다. 다른 말풍선까지 손대는 것은 지시받은 범위가 아니다. */
/* ── 기업이 얻는 것 (BUSINESS OUTCOME) ──
⚠ 기능 이름만 늘어놓지 않는다. 「무엇이 있다」가 아니라 «회사에 무엇이 남는가»를 적는 자리다.
제품마다 3~4줄. 그보다 길어지면 아무도 읽지 않는다. */
.gains{margin:20px 0 0;padding:16px 19px;border-radius:12px;
border:1px solid var(--line);background:var(--surface-2)}
/* ⚠ --faint 를 쓰면 이 상자 바탕(--surface-2 #161D28) 위에서 4.71:1 이다.
사이트 기준선이 4.85:1 이라 «내려가면 안 된다». 그래서 한 단 밝은 --muted 를 쓴다. */
.gains .lab{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:11px}
/* ⚠ 라벨이 「기업이 얻는 것」처럼 짧은 «꼬리표»가 아니라 한 문장일 때 쓴다.
기본 라벨은 고정폭 글꼴에 자간 .14em 이라 한글 문장을 넣으면 글자가 흩어져 읽기 어렵다.
그래서 문장형은 본문 글꼴로 돌리고 자간을 원래대로 둔다. */
.gains .lab.sent{font-family:var(--sans);font-size:var(--t-desc);letter-spacing:normal;
text-transform:none;font-weight:600;color:var(--ink);line-height:1.5;
margin-bottom:12px;word-break:keep-all}
.gains ul{margin:0;padding:0;list-style:none}
.gains li{position:relative;padding-left:17px;margin-top:8px;
font-size:14.5px;line-height:1.64;color:var(--ink-2)}
.gains li:first-child{margin-top:0}
.gains li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
border-radius:50%;background:var(--blue)}
.gains li b{color:var(--ink);font-weight:600}
/* ── 제품 페이지에서 회사 소개로 돌아오는 길 ──
⚠ 브라우저 뒤로가기에만 기대지 않는다. 검색이나 링크로 «바로» 들어온 사람은
뒤로 갈 곳이 없다. 그래서 눈에 보이는 길을 하나 둔다. */
.backlink{display:inline-flex;align-items:center;gap:9px;margin-top:8px;
font-size:var(--t-desc);font-weight:600;color:var(--blue);text-decoration:none;border:0}
.backlink::before{content:"←";font-size:15px}
.backlink:hover{color:var(--blue-deep)}
.backrow{border-top:1px solid var(--line);padding-top:26px;margin-top:8px}
/* ── 운영 흐름 구획 : 단계(왼쪽) + 세미 인물(오른쪽) ──
⚠ 오른쪽 칸이 비어 있어 왼쪽만 무거워 보이던 자리다.
사진은 «장식»이므로 단계 목록보다 먼저 읽히지 않게 폭을 묶어 둔다.
⚠ 사진 안에 글자·로고가 없어야 한다. 원본 Real-semi.png 에는
화이트보드 문구·모니터 로고·책등·머그컵·노트 문장이 들어 있어
그 전부를 «잘라낸» 머리~쇄골 구간만 쓴다. (assets/semi-flow.png) */
/* ⚠ 사진의 위·아래를 «단계 목록(01 Detect ~ 06 Audit)»과 정확히 맞춘다.
(대표님 지시 2026-09-10 — 목록 위 선과 아래 선 사이에 딱 들어오게)
어떻게 맞추나
· align-items:stretch → 사진 칸이 목록과 «같은 높이»로 늘어난다. 위아래 선이 저절로 맞는다.
· 칸 폭은 307px 고정 → 목록 높이 546px × 원본 비율(941:1672 = 0.5628) = 307.3px.
· object-fit:contain → 어떤 경우에도 «잘리지 않는다». 비율이 조금 어긋나면
위아래에 아주 얇은 여백이 생길 뿐 그림은 전부 보인다.
⚠ aspect-ratio 로 가로를 역산하는 방법을 먼저 썼다가 실패했다.
칸을 auto 로 두면 브라우저가 «원본 941px»를 기준으로 칸을 잡아,
구획 높이가 1676px 까지 부풀었다. 그래서 폭을 고정하는 쪽으로 바꿨다.
⚠ 는 브라우저 기본 여백이 좌우 40px 이다. margin:0 을 반드시 둔다.
(실제로 이것 때문에 사진이 258px 로 쪼그라든 적이 있다.) */
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) 307px;
gap:clamp(28px,4vw,56px);align-items:stretch}
.semi-figure{margin:0;height:100%;border:1px solid var(--line);border-radius:18px;
overflow:hidden;background:var(--surface);box-shadow:var(--shadow-m);line-height:0}
.semi-figure img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
@media (max-width:1040px){
.flow-grid{grid-template-columns:1fr}
/* 좁아지면 사진을 아래로 내리고, 본문보다 커지지 않게 묶는다 */
/* ⚠ 좁은 화면에서는 세미를 «본문 다음»으로 둔다. 폭을 키우면 단계 목록보다
먼저 시선을 가져간다. (06R2 §2) */
.semi-figure{position:static;max-width:300px;margin:8px auto 0}
}
/* ── 말풍선 아바타 — 실제 세미 얼굴
⚠ 열 군데 전부 «같은 한 장»(semi-avatar.png)이다.
말풍선마다 다른 컷을 쓰면 한 사람의 목소리가 아니라
여러 명이 번갈아 말하는 것처럼 보인다. AVATAR_VARIATION = 금지. */
/* ⚠ 그림 자체가 «초록 테두리 + 흰 원»을 갖고 있다. 컨테이너가 테두리·배경을 또 그리면
원이 두 겹이 된다. 그래서 끈다.
⚠ 머리 위 새싹이 초록 원 «밖»으로 나온다. border-radius + overflow:hidden 이면
그 새싹이 잘린다. 그래서 자르지 않고(visible) contain 으로 통째로 보여준다. */
.narr-av:has(img){border:0;background:none;border-radius:0;padding:0;overflow:visible}
.narr-av img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
/* ── 세미 이미지 자리 ──
⚠ 이것은 «검토용 자리 표시»다. 공개 전 실제 이미지로 교체한다. */
.semi-slot{
border:1.5px dashed var(--blue-line);border-radius:18px;background:var(--blue-soft);
display:grid;place-items:center;text-align:center;padding:22px;
color:var(--blue-deep);
}
.semi-slot .id{
font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;margin-bottom:8px;
}
.semi-slot .meta{
font-family:var(--mono);font-size:var(--t-label);line-height:1.85;color:var(--blue);opacity:.85;
}
.semi-slot .hint{
margin-top:10px;font-size:12.5px;color:var(--muted);max-width:30ch;line-height:1.6;
}
/* ── 실제 세미 이미지가 들어오면 «스스로» 자리를 대신한다 ──
assets/semi-01-hero.png · semi-02-core.png · semi-03-biz.png
파일을 폴더에 넣기만 하면 점선 표시가 그림으로 바뀐다. 코드를 고칠 일이 없다.
파일이 없으면 가 onerror 로 스스로 사라지고 점선 표시가 그대로 남는다.
⚠ 원본 비율(3:4 · 1:1)과 자리의 비율이 같으므로 잘리지 않는다.
실제 이미지를 보고 나서 object-position 한 줄로 크롭을 조정한다. */
/* ⚠ 그냥 height:100% 로 두면 «자리»가 이미지 비율만큼 늘어난다.
실제로 1:1 칸이 132×176 · 132×198 로 자라 문서 높이가 110px 늘어났다.
aspect-ratio 는 높이가 auto 일 때만 듣는데, 이미지가 높이를 밀어 버린 것이다.
자리를 기준으로 못 박고, 이미지를 그 안에 «채워» 넣는다. (2026-09-09) */
.semi-slot{position:relative}
.semi-slot img.semi-img{
position:absolute;inset:0;width:100%;height:100%;display:block;
object-fit:contain;object-position:center bottom;
}
/* 히어로는 원본이 3:4, 자리도 3:4 → contain 으로 통째로 들어간다 (잘리지 않음) */
/* ⚠ 03 CORE · 05 BIZ 의 1:1 칸은 데스크톱에서 132px 밖에 안 된다.
2:3 전신 그림을 contain 으로 넣으면 얼굴이 20px 이 되어 아무것도 안 보인다.
그래서 이 두 칸만 «얼굴 쪽을 채워» 쓴다. 잘리는 것은 다리 쪽이고
얼굴 · 안경 · 새싹은 위쪽이라 그대로 남는다. */
.sw-semi .semi-slot img.semi-img{object-fit:cover;object-position:center top}
.semi-slot:has(img.semi-img){border:0;background:transparent;padding:0}
.semi-slot:has(img.semi-img) .semi-ph{display:none}
/* ⚠ 히어로 세미가 semi1 → semi6 으로 바뀌면서 원본 비율이 3:4 에서 2:3 으로 달라졌다
(대표님 지시 · 2026-09-10). 칸을 3:4 로 두면 contain 이 높이에 맞춰 줄여
좌우에 빈 자리가 생기고 인물이 그만큼 작아진다. 칸을 그림 비율에 맞춘다.
⚠ 잘라내지 않는다. object-fit 은 contain 그대로다 — 인물 전체가 보여야 한다. */
.semi-slot.portrait{aspect-ratio:3/4}
.hero-grid.with-semi .semi-slot.portrait{aspect-ratio:2/3}
.semi-slot.square{aspect-ratio:1/1}
.semi-slot.wide{aspect-ratio:4/3}
/* 히어로 — 좌 58% / 우 42% (§4) */
.hero-grid.with-semi{grid-template-columns:58fr 42fr}
@media (max-width:900px){.hero-grid.with-semi{grid-template-columns:1fr}}
/* ⚠ 히어로 세미 캐릭터를 30% 줄인다 (대표님 지시 · 2026-09-10).
그림(img)에 transform:scale 을 걸지 않고 «자리»(.semi-slot) 자체를 줄인다.
scale 로 줄이면 그림만 작아지고 자리는 원래 크기 그대로 남아서,
그림과 아래 말풍선 사이에 설명할 수 없는 빈 공간이 생긴다.
자리를 줄이면 aspect-ratio 3/4 가 높이도 같은 비율로 함께 줄여 준다.
⚠ 오른쪽 단(42fr)은 그대로 두고 그 «안에서» 가운데 놓는다. 단 너비를 건드리면
왼쪽 글 단이 넓어져 h1 줄바꿈이 바뀐다 — 그건 지시받은 범위가 아니다. */
/* ⚠ semi6 은 2:3 이라 같은 «폭»이면 3:4 이던 semi1 보다 세로로 62px 더 길다.
70% 로 두었더니 아래 끝이 말풍선에 고정된 채 위로 자라, 머리가 상단 내비 «뒤»로
66px 들어갔다. 그래서 폭이 아니라 «높이»를 기준으로 잡는다.
높이를 정하면 aspect-ratio 가 폭을 알아서 구한다 — 내비 밑으로 숨는 일이 없다. */
.hero-grid.with-semi .semi-slot.portrait{
flex:none; /* ⚠ 없으면 0 높이 flex 부모 안에서 0 으로 쭈그러든다 */
width:auto;height:clamp(320px,33vw,470px);margin-inline:auto;
/* ⚠ semi6 은 «탁자가 이미지 아래 끝에서 잘려» 있다. 원본이 그렇게 생겼다 —
우리가 자른 것이 아니라 그림 자체가 거기서 끝난다.
그 잘린 단면이 말풍선 바로 위에 놓이니 «탁자를 썬 것»처럼 보였다.
그래서 그림을 «내려» 잘린 부분을 말풍선 뒤로 숨긴다.
⚠ 흰 탁자 띠는 그림 높이의 약 12% 다(실측). 그만큼만 겹친다 —
더 겹치면 노트북까지 먹고, 덜 겹치면 단면이 다시 보인다.
⚠ 높이가 clamp 로 변하므로 겹치는 양도 같은 식에 비례시킨다. 고정 px 은 폭이
바뀔 때 어긋난다. */
/* ⚠ 뒤의 -10px 은 대표님이 직접 보시고 더 내리라고 하신 값이다 (2026-09-10).
비율(-0.12)은 폭이 바뀌어도 탁자 띠를 따라가고, -10px 은 그 위에 얹는 고정 보정이다.
두 값을 합치지 않는다 — 합치면 어느 쪽이 실측이고 어느 쪽이 취향인지 못 읽는다. */
margin-bottom:calc(clamp(320px,33vw,470px) * -0.12 - 10px)}
/* ⚠ 말풍선이 그림 «위»에 놓여야 단면이 가려진다.
.semi-slot 은 position:relative 라 그 안의 그림이 위치 지정 요소가 된다.
위치 지정 요소는 그렇지 않은 형제보다 «나중에» 그려지므로, 말풍선에도
자리를 지정해 주지 않으면 그림이 말풍선을 덮어 버린다. */
.hero .narr{position:relative;z-index:1}
/* 모바일은 이미 한 단이라 그림이 화면 폭을 기준으로 잡힌다.
여기서까지 70% 로 줄이면 얼굴이 너무 작아져 데스크톱보다 더 줄어든 꼴이 된다. */
/* 모바일은 한 단이라 화면 폭이 기준이다. 위 데스크톱 규칙(높이 기준)을 여기서 되돌린다.
⚠ height 를 auto 로 «명시»하지 않으면 위 clamp 가 그대로 남아 비율이 깨진다. */
@media (max-width:900px){
/* ⚠ 여기서 %는 «높이»가 아니라 부모 «폭»을 기준으로 계산된다.
칸 높이 = 칸 폭 × 1.5 = 부모 폭 × 1.05 이므로, 높이의 12% ≈ 부모 폭의 12.6% 다. */
.hero-grid.with-semi .semi-slot.portrait{
width:70%;max-width:320px;height:auto;margin-bottom:calc(-12.6% - 10px)}
}
/* ⚠ 오른쪽 단(세미 + 말풍선)의 «아래 끝»을 왼쪽 단의 CTA 줄 아래 끝에 맞춘다.
(대표님 지시 · 2026-09-10 — 세미와 카드를 위로 올려 CTA 줄과 겹치게)
왜 이렇게 썼는가.
① align-items 를 end 로만 바꾸면 «반대로» 움직인다. 그리드 행 높이는 «키 큰 쪽»이
정하는데 1440px 에서는 오른쪽(620px)이 왼쪽(451px)보다 크다. end 를 주면
키 작은 왼쪽 단이 아래로 «내려가» 바닥이 맞는다. 올려 달라고 하신 것과 반대다.
② margin-top:-169px 같은 고정값도 못 쓴다. 두 단의 높이 차가 폭에 따라
1440px:+169 · 1280px:+71 · 1024px:−22 로 «부호까지» 바뀐다. 한 값으로 못 맞춘다.
③ 그래서 오른쪽 단을 height:0 으로 만들어 «행 높이에 관여하지 않게» 한다.
행 높이는 왼쪽 단이 혼자 정하므로 왼쪽은 지금 자리에서 한 픽셀도 안 움직인다.
오른쪽은 그 바닥에 붙고, 내용은 flex-end 로 «위쪽»으로 자란다.
폭이 바뀌어 높이 차가 뒤집혀도 계산할 값이 없으니 그대로 맞는다.
⚠ 900px 이하는 이미 한 단이라 위아래로 쌓인다. 거기서 height:0 을 주면
세미가 본문 위로 올라타 버린다. 그래서 두 단일 때만 건다. */
@media (min-width:901px){
.hero-grid.with-semi{align-items:end}
.hero-grid.with-semi > :last-child{
align-self:end;height:0;
display:flex;flex-direction:column;justify-content:flex-end;
}
}
/* 히어로 아래 시스템 띠 — 제품이 먼저 보이도록 세미와 분리한다 */
.hero-band{margin-top:clamp(38px,5vw,58px)}
/* 소프트웨어 구획 안에서 세미가 곁들여질 때 */
.sw-semi{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:24px}
@media (max-width:520px){.sw-semi{grid-template-columns:1fr}}
.sw-semi .semi-slot{width:132px;padding:14px}
@media (max-width:520px){.sw-semi .semi-slot{width:100%;max-width:200px}}
/* ── 09 ONE CONNECTED SYSTEM — 한 건이 지나가는 길 ──
⚠ 03 의 층 도해를 세 번째로 되풀이하지 않는다.
같은 그림을 또 그리면 결론이 아니라 반복이 된다.
여기서는 «거래 한 건»이 다섯을 지나가는 경로를 보인다. */
.journey{display:grid;gap:0;max-width:860px;margin:0 auto}
.jstep{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center;
background:var(--ground);border:1px solid var(--line);border-radius:13px;padding:18px 22px;
box-shadow:var(--shadow-s)}
@media (max-width:600px){.jstep{grid-template-columns:1fr;gap:8px}}
.jstep .app{font-family:var(--display);font-weight:600;font-size:var(--t-desc);letter-spacing:-.03em;
color:var(--blue);white-space:nowrap}
.jstep .what{font-size:15.5px;color:var(--ink-2)}
.jstep .what b{color:var(--ink)}
/* ⚠ 단계마다 «한 줄 제목»이 붙는다. 제목만 훑어도 여정 전체가 읽히도록 하는 것이 목적이다.
제목과 설명은 오른쪽 칸에 위아래로 쌓는다 — 라벨 칸은 그대로 왼쪽에 둔다.
⚠ align-items 를 center 에서 start 로 바꾼다. 오른쪽이 두 줄 이상이 되면
가운데 정렬은 라벨이 설명 중간에 떠 있는 것처럼 보인다. */
.jstep{align-items:start}
.jstep .app{padding-top:1px}
.jstep .body{display:grid;gap:5px;min-width:0}
.jstep .title{font-size:16.5px;font-weight:600;color:var(--ink);
letter-spacing:-.015em;line-height:1.42;word-break:keep-all}
.jstep .what + .what{margin-top:3px}
.jjoin{width:1px;height:18px;background:var(--blue-line);margin:0 auto}
.jstep.core{border-color:var(--blue-line);background:var(--blue-soft)}
.jstep.core .app{color:var(--blue-deep)}
.oneline{text-align:center;margin:0 auto 44px;max-width:56ch}
.oneline .big{font-family:var(--display);font-weight:700;
font-size:clamp(28px,4.4vw,46px);letter-spacing:-.045em;line-height:1.15;color:var(--ink)}
.oneline .big em{font-style:normal;color:var(--blue)}
/* ── 10 COMPANY — 조용한 구획 ──
제품 구획에서는 AI 와 구조가 주인공이었다. 여기서는 사람과 회사다.
⚠ 세미는 이 아래로 등장하지 않는다. */
/* 09 → 10 넘어가는 띠.
⚠ 어두운 쪽에서 밝은 쪽으로 «천천히» 넘어간다. 경계선 하나로 뚝 끊으면
전환이 아니라 단절로 보인다. 세미의 마지막 말이 이 위에 놓인다. */
/* ⚠ 예전에는 이 띠가 어두운 쪽에서 «밝은 회색»으로 올라갔다. 아래 10 COMPANY 가
흰 구획이었기 때문이다. 대표님 지시로 회사 구획과 바닥글을 어둡게 되돌렸으므로
(2026-09-10) 이 띠도 밝은 쪽으로 올라갈 이유가 없어졌다.
대신 «한 단 밝아졌다가 다시 가라앉는» 아주 얕은 층으로 남긴다 —
구획이 바뀐다는 신호는 유지하되, 흰 화면으로 뚝 떨어지지 않는다. */
.handoff{background:linear-gradient(180deg,var(--surface) 0%, #131A26 55%, var(--ground) 100%)}
.company{background:var(--ground);border-top:1px solid var(--line)}
/* ⚠ .company.light 규칙(흰 그라데이션)은 걷어냈다. 회사 구획은 이제 어두운 쪽이다.
위 .handoff 띠가 이미 구획 전환을 말해 주므로 여기서는 실선 하나면 충분하다. */
/* ⚠ 바닥글의 light · after-dark 전용 규칙을 모두 걷어냈다 (2026-09-10 대표님 지시).
본문이 어두운데 바닥글만 희면 화면이 뚝 끊긴다.
이제 바닥글은 위 footer{} 규칙 하나만 쓴다 — --surface 는 --ground 보다
한 단 밝은 어두운 면이라, 색을 바꾸지 않고도 바닥글이 본문과 구분된다.
HOME 은 회사 구획과 바닥글이 이어지므로 위 여백만 없앤다. */
.company + footer{margin-top:0}
.company .eyebrow{color:var(--faint)}
.company h2{font-weight:600}
.company .creed{font-size:clamp(19px,2.4vw,25px);line-height:1.55;color:var(--ink);
font-weight:500;letter-spacing:-.028em;max-width:38ch;margin:0 0 26px;
text-wrap:balance;word-break:keep-all}
.person{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px}
.person .ph{width:96px;height:96px;border-radius:50%;border:1px dashed var(--line);
background:var(--ground);display:grid;place-items:center;margin-bottom:16px;
font-family:var(--mono);font-size:9px;color:var(--faint);text-align:center;line-height:1.4}
.person .nm{font-size:19px;font-weight:600;letter-spacing:-.025em;margin-bottom:3px}
.person .rl{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
color:var(--blue);margin-bottom:12px}
/* ══════════════════════════════════════════════════════════════
원클립 CS 채팅 · CS 전화 — 화면 오른쪽 아래 고정 (2026-09-10 대표님 지시)
⚠ biz.oneclip.co.kr 의 것과 «같은 모양»으로 맞췄다. 방문자가 어느 ONECLIP
화면에 있든 같은 자리에서 같은 버튼을 찾을 수 있어야 한다. 색·크기를 바꾸지 않는다.
⚠ 이 사이트는 어두운데 알약(태그)은 흰색이다. 일부러 그렇게 뒀다 —
본문과 섞이지 않고 «떠 있는 도구»로 보여야 한다.
⚠ 전화 버튼은 PC 에서 «누를 수 없는» 표시다 (.cs-print).
PC 에서 tel: 을 누르면 「이 애플리케이션을 여시겠습니까?」 창이 뜬다.
대신 마우스를 올리면 번호가 위에 떠서 눈으로 읽을 수 있다.
휴대폰·태블릿에서는 .cs-tap 이 나타나 «눌러서 전화»가 걸린다.
⚠ z-index — 이 사이트에서 .nav 가 60 이다. 도크 90, 채팅창 100.
══════════════════════════════════════════════════════════════ */
.cs-dock{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;
align-items:flex-end;gap:12px}
.cs-row{display:flex;align-items:center;gap:12px;opacity:.5;transition:opacity .2s}
.cs-row:hover,.cs-row:focus-within{opacity:1}
.cs-tag{font-family:var(--sans);font-size:16px;font-weight:600;background:#fff;padding:8px 16px;
border-radius:9999px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);white-space:nowrap}
.cs-row.chat .cs-tag{color:#1D4ED8}
.cs-row.tel .cs-tag{color:#047857}
.cs-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
border:0;cursor:pointer;color:#fff;transition:transform .2s;padding:0;font-family:inherit}
.cs-btn:hover{transform:scale(1.1)}
.cs-row.chat .cs-btn{background:#2563EB;box-shadow:0 10px 15px -3px rgba(37,99,235,.3)}
.cs-row.tel .cs-btn{background:#059669;box-shadow:0 10px 15px -3px rgba(5,150,105,.3)}
.cs-btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.cs-btn.cs-print{cursor:default}
.cs-btn.cs-print:hover{transform:none}
.cs-tap{display:none}
@media (hover:none),(pointer:coarse){
.cs-tap{display:flex}
.cs-print{display:none}
}
/* 전화번호 안내 — PC 에는 전화 앱이 없는 경우가 많아 번호를 눈으로 볼 수 있게 띄운다 */
.cs-tel-info{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;border-radius:8px;
padding:10px 14px;font-family:var(--sans);font-size:12px;font-weight:700;text-align:center;
line-height:1.7;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.cs-tel-info b{display:block;font-size:15px;color:#047857}
/* 채팅창 — 도크와 달리 «밝은 창»이다. 대화는 밝은 배경에서 읽기 쉽다. */
.cs-panel{position:fixed;right:24px;bottom:100px;width:350px;height:min(750px,calc(100vh - 140px));
background:#fff;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.2);z-index:100;
display:flex;flex-direction:column;overflow:hidden;font-family:var(--sans)}
.cs-panel.mini{height:auto}
.cs-head{padding:16px;background:#2563EB;color:#fff;display:flex;justify-content:space-between;
align-items:center;flex:none}
.cs-head h3{margin:0;font-size:16px;font-weight:700;color:#fff}
.cs-head button{background:none;border:0;color:#fff;cursor:pointer;font-size:19px;line-height:1;
padding:0 4px;font-family:inherit}
.cs-body{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background:#F9FAFB}
.cs-sys{text-align:center;font-size:12px;color:#4B5563}
.cs-msg{max-width:95%;display:flex;flex-direction:column}
.cs-msg.me{align-self:flex-end;align-items:flex-end}
.cs-msg.cs{align-self:flex-start;align-items:flex-start}
.cs-who{font-size:12px;color:#4B5563;margin-bottom:4px;font-weight:700}
.cs-bub{padding:10px 14px;font-size:14px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word;
white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.cs-msg.me .cs-bub{border-radius:16px 16px 0 16px;background:#1D4ED8;color:#fff}
.cs-msg.cs .cs-bub{border-radius:0 16px 16px 16px;background:#fff;color:#111827;border:1px solid #E5E7EB}
.cs-foot{padding:12px;border-top:1px solid #E5E7EB;display:flex;gap:8px;background:#fff;flex:none}
.cs-foot input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #D1D5DB;outline:none;
font-size:14px;font-family:inherit;color:#111827;background:#fff}
.cs-foot input:focus{border-color:#2563EB}
.cs-foot button{padding:0 16px;background:#1D4ED8;color:#fff;border:0;border-radius:8px;font-weight:700;
cursor:pointer;font-family:inherit}
@media (max-width:520px){
.cs-dock{right:14px;bottom:14px;gap:10px}
.cs-tag{font-size:13px;padding:6px 12px}
.cs-btn{width:52px;height:52px}
.cs-btn svg{width:24px;height:24px}
.cs-panel{right:10px;left:10px;width:auto;bottom:88px}
}
@media (prefers-reduced-motion:reduce){.cs-btn,.cs-row{transition:none}.cs-btn:hover{transform:none}}
/* ── ONECLIP App · 8 SPORTS CLIP 타일 (WEB-PRODUCTS-APP-03) ──────────────
⚠ 앱의 CLIP 아이콘(PNG)은 «워드마크»다 — FOOTBALLGCLIP.png 에는 FOOTBALL 이라는
글자가 박혀 있다. 회사 사이트 표기는 SOCCER CLIP 이므로 그 그림을 쓰면 화면에서
이름이 충돌한다. 그래서 아이콘을 쓰지 않고 사이트의 활자 언어로 세운다.
앱 이미지를 고쳐서 맞추는 일은 하지 않는다(앱은 APP 소유). */
.clipgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
@media (max-width:980px){.clipgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.clipgrid{grid-template-columns:1fr}}
.clip-tile{position:relative;display:flex;flex-direction:column;
background:var(--ground);border:1px solid var(--line);
border-radius:13px;padding:18px 17px 16px;box-shadow:var(--shadow-s)}
.clip-tile .cn{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
color:var(--faint)}
.clip-tile h3{font-family:var(--display);font-weight:700;font-size:16.5px;
letter-spacing:-.03em;margin:7px 0 6px}
.clip-tile p{font-size:var(--t-cap);line-height:1.62;color:var(--muted);margin:0 0 12px}
.clip-st{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:var(--t-label);
font-weight:600;letter-spacing:.14em;padding:4px 9px;border-radius:999px;
border:1px solid var(--line)}
.clip-tile.is-open{border-color:var(--blue-line)}
.clip-tile.is-open .clip-st{color:var(--blue);border-color:var(--blue-line);
background:var(--blue-soft)}
.clip-tile.is-coming{opacity:.82}
.clip-tile.is-coming .clip-st{color:var(--faint)}