/* ─────────────────────────────────────────────────────────────
Flick 홈페이지
⭐ 값은 전부 chatgpt.com/ko-KR/download 를 열어 실제로 잰 것이다 (2026-08-27).
눈대중이 아니라 getComputedStyle 로 뽑은 숫자다.
제목 64/500/-0.03em · 본문 14/1.64 · 단추 h44 알약 · 그림 카드 r16 ·
2단 격자 gap 64 · 칸 안 콘텐츠 440 · 섹션 사이 48 · 머리 64.
───────────────────────────────────────────────────────────── */
:root{
--bg:#000000; /* 바탕 */
--fg:#ffffff; /* 글자 */
--fg-dim:rgba(255,255,255,.72);
--panel:#212121; /* 어두운 단추·발 */
--line:rgba(255,255,255,.15);
--light:#f9f9f9; /* 밝은 단추 바탕 */
--on-light:#0d0d0d; /* 그 위 글자 */
--accent:#3d8bff; /* 브랜드 파랑 — 앱 tokens.css 와 같은 값 */
--on-accent:#0b0b0b; /* 파랑 위 글자. 흰 글자는 대비가 모자라 안 읽힌다 */
--shell:1640px; /* 가장 넓을 때 */
--pad:72px; /* 좌우 여백 — 영상을 키우려고 좁혔다 */
--colw:440px; /* 한 칸 안 콘텐츠 폭 */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* ⛔ 스크롤 막대는 화면에 남아 있으면 안 된다 (2026-08-30 시영).
굴리는 동안 잠깐 보이는 것까지가 전부고, 손을 떼면 사라진다.
운영체제가 「항상 보이기」로 맞춰져 있어도 우리 화면에서는 안 보이게 덮는다. */
*{scrollbar-width:none;-ms-overflow-style:none;}
*::-webkit-scrollbar{width:0;height:0;}
/* 내용이 한 덩어리뿐이라 위로만 몰린다. 화면을 다 쓰고 가운데에 놓고, 발은 늘 맨 아래에 붙인다 */
body{
min-height:100vh;display:flex;flex-direction:column;
background:var(--bg);color:var(--fg);
font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
font-size:16px;line-height:1.5;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
b{font-weight:600;}
/* ── 머리 ── 높이 64. 굴려도 위에 붙어 있다 ── */
/* ⭐ 머리 띠는 **반투명 검정 + 흐림**이다 (2026-08-29 시영). 홈에서 내려갔을 때와 같은 값이라,
가격·다운로드 같은 다른 화면에서도 홈과 똑같아 보인다.
⛔ 회색 판(--panel)으로 두지 마라 — 검정 본문 위에서 띠만 떠 보인다. */
.nav{
position:sticky;top:0;z-index:50;
background:rgba(0,0,0,.62);backdrop-filter:blur(16px) saturate(150%);
}
/* ⭐ 머리 속 내용은 본문과 같은 틀을 쓴다 — 로고와 영상의 왼쪽 선이 딱 맞는다.
⛔ 전체 폭에 두면 넓은 화면에서 로고와 단추가 양 끝에 박힌다(2026-08-27 시영). */
.nav-in{
max-width:var(--shell);margin:0 auto;padding:0 var(--pad);
height:72px;display:flex;align-items:center;gap:24px;
}
.wordmark{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:600;letter-spacing:-.01em;}
.mark{width:19px;height:19px;border-radius:5px;background:var(--fg);}
.nav-menu{display:flex;align-items:center;gap:32px;margin-left:auto;}
.nav-menu a{font-size:16px;color:var(--fg);}
.nav-menu a:hover{color:var(--fg);}
/* ── 머리 오른쪽 ── claude.com/ko/pricing 을 재서 맞췄다:
높이 36 · 글자 15/400 · 모서리 7.5(알약이 아니라 살짝 깎은 네모) ·
주 단추는 흰 바탕에 어두운 글자, 그 옆은 테두리만, 로그인은 글자만. */
.nav-actions{display:flex;align-items:center;gap:8px;}
.nav-login{font-size:16px;color:var(--fg);padding:0 12px;}
.nav-login:hover{opacity:.7;}
.hbtn{
display:inline-flex;align-items:center;justify-content:center;
height:40px;min-width:96px;padding:0 16px;border-radius:8px;
font-size:15px;font-weight:500;white-space:nowrap;
border:1px solid transparent;transition:opacity 120ms ease-out;
}
.hbtn:hover{opacity:.85;}
.hbtn-ghost{color:var(--fg);border-color:rgba(255,255,255,.22);}
.hbtn-solid{background:var(--light);color:var(--on-light);}
/* ── 단추 ── 알약. 밝은 것이 주(主), 어두운 것이 부(副) ── */
.btn{
display:inline-flex;align-items:center;justify-content:center;
height:36px;padding:0 12px;border-radius:999px;
font-size:14px;font-weight:500;white-space:nowrap;
border:1px solid transparent;transition:opacity 120ms ease-out;
}
.btn:hover{opacity:.85;}
/* 로고는 글자보다 살짝 크게 두고 왼쪽으로 반 칸 당긴다 — 알약 안에서 가운데로 보인다 */
.btn .os{width:18px;height:18px;margin-right:8px;margin-left:-2px;flex:none;}
.btn-light{background:var(--light);color:var(--on-light);}
.btn-dark{background:var(--panel);color:var(--fg);border-color:var(--line);}
.btn-lg{height:44px;padding:0 16px;}
/* ── 본문 틀 ── 12칸 격자를 쓰는 대신 같은 결과를 그대로 잰 값으로 ── */
main{flex:1;display:flex;align-items:center;}
.wrap{width:100%;max-width:var(--shell);margin:0 auto;padding:48px var(--pad);}
.row{
display:grid;grid-template-columns:1fr var(--colw);gap:48px;align-items:center;
}
.row + .row{margin-top:120px;}
/* ⭐ 줄마다 좌우를 바꿔 엇갈리게 놓는다 — 글 왼쪽 · 그림 오른쪽.
⛔ HTML 순서만 뒤집으면 그림이 좁은 칸(440)으로 들어가서 작아진다. 칸 폭 자체를 뒤집어야 한다.
글칸 폭이 위아래로 같아서 첫 줄 글의 오른쪽 끝선과 둘째 줄 글의 왼쪽 시작선이 여백선에 딱 맞는다. */
.row-rev{grid-template-columns:var(--colw) 1fr;}
.col{min-width:0;}
/* ⭐ 글칸은 폭을 못 박는다(fit 이 아니라 440 고정).
⛔ max-width 만 주면 줄 길이에 따라 폭이 402·440 으로 들쭉날쭉해져서
위아래 줄의 글 끝선이 여백선에 안 맞는다 — 엇갈리게 놓을수록 티가 난다. */
.col-text{width:var(--colw);max-width:100%;justify-self:start;}
.col-media{display:grid;justify-items:end;}
/* 순서를 뒤집으면 붙는 쪽도 같이 뒤집힌다 */
.row:has(.order-2) .col-media{justify-items:end;}
.row:not(:has(.order-2)) .col-media{justify-items:start;}
/* 첫 칸에 그림, 둘째 칸에 글 — 순서를 뒤집는다 */
.order-2{order:2;}
/* ── 글 ── 제목은 크고 촘촘하게, 본문은 작고 느슨하게 ── */
h1,h2{
font-size:64px;font-weight:500;line-height:1;letter-spacing:-.03em;
margin-bottom:16px;
}
.col-text p{font-size:17px;line-height:1.7;margin-bottom:19px;}
.col-text .meta{color:var(--fg-dim);}
.cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.col-text .btn{margin-top:0;}
.cta-row + .meta{margin-top:32px;}
.more{
display:flex;align-items:center;gap:6px;width:fit-content;
margin-top:32px;font-size:14px;
}
.more:hover{opacity:.7;}
.chev{font-size:16px;line-height:1;}
/* ── 그림 자리 ── 440 정사각, 모서리 16 ── */
/* 앱 화면 영상. 원본 비율(16:9) 그대로 튼다 — 정사각으로 깎으면 화면이 잘린다.
⭐ 소리 없이 저절로 돌고 끝나면 다시 시작한다. 멈춤 단추는 안 붙인다(볼 것이지 조작할 것이 아니다). */
.shot{
display:block;width:100%;aspect-ratio:16/9;
border-radius:16px;overflow:hidden;background:#0e0e0e;
border:1px solid rgba(255,255,255,.08);
}
/* ── 발 ── */
.footer{
border-top:1px solid rgba(255,255,255,.08);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
margin:0 32px;padding:20px 0;
font-size:13px;color:rgba(255,255,255,.45);
}
.footer nav{display:flex;gap:20px;}
.footer a:hover{color:var(--fg);}
/* ── 개인정보 처리방침 쪽 ── 예전 화면이 쓰던 이름을 그대로 남긴다 ── */
.nav-link{font-size:14px;color:var(--fg-dim);margin-left:auto;}
.nav-link:hover{color:var(--fg);}
/* ⛔ 위의 main{display:flex} 를 그대로 받으면 글이 가로로 늘어서서 세로로 쌓인다.
이 쪽은 위에서 아래로 흐르는 보통 문서다. */
.doc{display:block;flex:1;max-width:720px;margin:0 auto;padding:48px 24px 96px;}
.doc h1{font-size:40px;margin-bottom:24px;}
.doc h2{font-size:20px;font-weight:600;letter-spacing:normal;margin:40px 0 12px;}
.doc p,.doc li{font-size:15px;line-height:1.7;color:var(--fg-dim);margin-bottom:12px;}
.doc ul{padding-left:20px;}
.updated{font-size:13px;color:rgba(255,255,255,.5);}
.callout{
background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:16px 20px;margin:24px 0;
}
/* ── 화면이 좁을 때 ── 한 줄로 세우고 제목을 줄인다 ── */
@media (max-width:1100px){
:root{--pad:40px;}
}
@media (max-width:820px){
:root{--pad:20px;}
/* ⭐ 좁은 화면 머리에는 로고만 남긴다 (2026-08-30 시영).
베타라 로그인·도입 문의·다운로드는 폰에서 쓸 일이 없다 — 관리할 것만 는다. */
/* ⭐ 좁은 화면 홈에서는 머리 띠를 통째로 비운다 (2026-08-30 시영).
베타라 로그인·도입 문의·다운로드·가격은 폰에서 쓸 일이 없고, 로고도 첫 화면에 이미 크게 있다.
⛔ 홈에서만이다 — 다른 화면에서 띠를 없애면 홈으로 돌아갈 길이 사라진다. */
.home .nav{display:none;}
.nav-menu,.nav-login,.hbtn{display:none;}
/* ⭐ 폰에서는 어느 컴퓨터를 쓰는지 알 수 없다 (2026-08-30 시영).
로고 둘을 나란히 두고 글자에도 박아서 「둘 다 된다」를 분명히 보여준다.
⛔ 단추를 둘로 쪼개지 마라 — 폰에서는 어느 쪽도 받아 봐야 못 쓴다. 고민만 는다. */
.dl .os-mac,.dl .os-win,html[data-os="win"] .dl .os-mac{display:inline-block;}
.dl .os-win{margin-left:-4px;}
main{align-items:flex-start;}
.wrap{padding:32px var(--pad) 64px;}
/* ⭐ 글이 어느 영상 이야기인지 눈에 보이게 (2026-08-30 시영).
글–영상 사이는 좁히고 줄–줄 사이는 벌린다. 여섯 배 차이라야 한 묶음으로 읽힌다. */
.row{grid-template-columns:1fr;}
.row + .row{margin-top:96px;}
/* ⭐ 한 칸으로 접히면 줄마다 좌우가 달라 「영상·영상·글·글」로 붙어 버린다 (2026-08-30 시영).
좁은 화면에서는 줄마다 순서를 못 박는다 — 글이 먼저, 그 아래 영상. */
.col-text{order:1;}
.col-media{order:2;}
.col-text{width:auto;max-width:none;}
h1,h2{font-size:40px;letter-spacing:-.02em;}
.row{grid-template-columns:1fr;}
}
/* ══ 요금제 ══════════════════════════════════════════════════
⛔ 참고한 화면(ChatGPT 「플랜 업그레이드」)은 로그인해야 뜨는 창이라 코드로 재지 못했다.
스크린샷에서 자리를 읽어 맞췄다 — 카드 두 장 나란히, 사이 28, 모서리 16,
값은 아주 크게, 오른쪽 카드만 색을 넣고 「추천」 딱지.
⭐ 값은 위키 02-가격과-유통 에 정해 둔 것을 그대로 쓴다(B2C 월 3만 · B2B 월 200만).
══════════════════════════════════════════════════════════ */
/* ⭐ 좌우 여백은 고정 px 이 아니라 **화면의 5.4%** 다 (잰 값: 2000px 화면에 여백 107).
⛔ max-width 를 걸면 화면이 넓어질수록 여백만 늘고 카드가 그대로라 작아 보인다. */
.price{
display:block;flex:1;
max-width:none;margin:0;padding:56px 5.4vw 96px;
}
.price-title{
font-size:38px;font-weight:500;letter-spacing:-.02em;text-align:center;margin-bottom:24px;
}
/* 개인 ↔ 비즈니스 — 하나로 붙은 알약 둘 */
.seg2{
display:flex;width:fit-content;margin:0 auto 32px;
padding:3px;border-radius:999px;background:#3a3a3a;
}
.seg2 button{
height:40px;padding:0 40px;border-radius:999px;
font-size:15px;color:var(--fg-dim);white-space:nowrap;
border:1px solid transparent;transition:background 120ms ease-out;
}
.seg2 button[aria-selected="true"]{
background:#1c1c1c;color:var(--fg);border-color:rgba(255,255,255,.16);
}
/* 카드 두 장 */
.plans{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;
max-width:880px;margin:0 auto;align-items:stretch;
}
/* ⛔ hidden 속성만으로는 안 숨는다 — 위의 display:grid 가 이긴다 */
.plans[hidden]{display:none;}
.plan{
display:flex;flex-direction:column;
padding:32px;border-radius:16px;background:#1c1c1c;
border:1px solid rgba(255,255,255,.06);
}
/* 고르게 할 쪽만 색을 넣는다. 둘 다 칠하면 어디를 봐야 할지 모른다 */
.plan-hi{
background:#152238;border-color:rgba(61,139,255,.28);
}
.plan-tag{
display:flex;align-items:center;gap:8px;
font-size:16px;font-weight:600;margin-bottom:28px;
}
/* ⭐ 딱지는 이제 제목(h2·h3) 안에 들어간다 — 플랜 이름이 곧 제목이라 따로 줄을 안 쓴다.
⛔ vertical-align 없이 두면 큰 글자의 밑줄에 붙어 아래로 처진다. */
.badge{
display:inline-block;vertical-align:middle;position:relative;top:-2px;
font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;
background:rgba(61,139,255,.22);color:#a8c8ff;
}
.plan h2{
font-size:28px;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin-bottom:12px;
}
/* ⭐ 석 줄 자리를 미리 비워 둔다 (2026-08-30 시영 「얼라인 안 맞아」).
두 줄로 잡아 두면 설명이 한 줄만 길어져도 그 카드만 값·단추가 아래로 밀린다. */
.plan-sub{font-size:16px;line-height:1.6;color:var(--fg-dim);min-height:78px;}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:40px 0 28px;}
/* 자릿수가 바뀌어도 폭이 안 흔들리게 — 굴러가는 동안 글자가 들썩이면 지저분하다 */
.plan-price b{font-size:38px;font-weight:500;letter-spacing:-.03em;line-height:1;
font-variant-numeric:tabular-nums;}
.plan-price span{font-size:16px;color:var(--fg-dim);}
.plan-btn{
display:flex;align-items:center;justify-content:center;
height:50px;border-radius:999px;
font-size:16px;font-weight:500;
transition:opacity 120ms ease-out;
}
.plan-btn:hover{opacity:.85;}
.plan-btn-ghost{border:1px solid rgba(255,255,255,.18);color:var(--fg);}
.plan-btn-solid{background:var(--accent);color:var(--on-accent);}
.plan-btn-light{background:var(--light);color:var(--on-light);}
.plan-head{font-size:15px;font-weight:600;margin:40px 0 20px;}
.plan-list{list-style:none;display:flex;flex-direction:column;gap:20px;}
.plan-list li{
position:relative;padding-left:28px;font-size:16px;line-height:1.5;color:var(--fg-dim);
}
/* 체크 표시 — 아이콘 파일 없이 선 두 개로 그린다 */
.plan-list li::before{
content:'';position:absolute;left:4px;top:5px;
width:9px;height:5px;border-left:1.6px solid var(--fg-dim);border-bottom:1.6px solid var(--fg-dim);
transform:rotate(-45deg);
}
.price-note{
max-width:none;margin:28px auto 0;text-align:center;
font-size:13px;color:rgba(255,255,255,.45);
}
@media (max-width:820px){
.price{padding:32px var(--pad) 64px;}
.price-title{font-size:26px;}
.plans{grid-template-columns:1fr;gap:16px;}
}
@media (max-width:1200px){
.plans{grid-template-columns:repeat(2,minmax(0,1fr));}
.plan-sub{min-height:0;}
}
/* ══ 첫 화면(홈) ═══════════════════════════════════════════════
⭐ 참고한 짜임새 = openai.com/ko-KR/codex (2026-08-29 시영).
가운데 첫 화면 → 큰 화면 하나 → 좌우로 엇갈린 기능 다섯 → 요금제 → 카드 셋 → 마지막 부름.
⛔ 위의 main{display:flex;align-items:center} 를 그대로 받으면 섹션이 가로로 늘어선다.
홈은 위에서 아래로 흐르는 문서라 그 규칙을 끈다.
══════════════════════════════════════════════════════════ */
.doc-flow{display:block;flex:1;}
/* ⭐ 기능 줄의 글은 그림 「아래」에 맞춘다 (2026-08-29 시영, Codex 홈 확인).
가운데에 맞추면 글이 그림 한복판에 떠 있어서 두 칸이 따로 논다.
아래를 맞추면 바닥선이 하나로 이어져서 좌우로 엇갈려도 줄이 잡힌다.
⛔ 다운로드 쪽(.row 를 같이 쓴다)은 단추까지 있어서 가운데가 맞다 — 그래서 홈에만 건다. */
.home .row{align-items:end;}
/* ══ 첫 화면 ═══════════════════════════════════════════════════
⭐ 바탕은 본문과 같은 검정이다 (2026-08-29 시영). 빛도 알갱이도 없다.
밝은 자리는 앱 창 뒤 한 곳뿐이다 — linear.app 이 그렇게 한다.
⛔ 머리 띠는 sticky 라 문서 흐름에서 72px 자리를 차지한다. 그만큼 위로 끌어올리고
안쪽 여백으로 되돌린다 — 띠 뒤까지 이 칸이 이어져야 한다. */
/* ⭐ 진한 파랑 바탕에 밝고 어두운 덩어리 일곱 + 알갱이 (2026-08-29 시영이 고른 것).
⭐ 균형은 「고르게 뿌리기」가 아니라 「밝고 어두움을 같이 두기」다. 비슷한 파랑만
늘어놓으면 다 뭉쳐서 큰 덩어리 하나로 보인다.
⭐ 크기도 흐림도 일부러 다르게 준다. 작고 덜 흐린 것이 있어야 「모양」이 보인다.
⛔ 일곱이 저마다 다른 길로 간다. 같은 길을 쓰면 통째로 밀리기만 해서 안 움직여 보인다. */
.top{
position:relative;isolation:isolate;overflow:hidden;
margin-top:-72px;padding-top:72px;background:#0b1b38;
}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.aurora span{position:absolute;will-change:transform;border-radius:50%;}
/* ⭐ 크고 꽉 차게 (2026-08-29 시영). 큰 것 여섯 · 중간 둘 · 작고 또렷한 것 둘.
⛔ 다 크게만 하면 뭉쳐서 판 하나가 된다. 작고 덜 흐린 것 둘이 「모양」을 만든다.
⛔ 어두운 것을 같이 깔아야 밝은 것이 산다 — 밝은 것만 늘리면 뿌옇게 뜬다. */
/* 좌상 — 아주 큰 밝은 자리 */
.aurora span:nth-child(1){
width:74vw;height:58vw;left:-22%;top:-28%;
background:rgba(120,172,242,.78);filter:blur(120px);
animation:driftA 11s ease-in-out infinite;
}
/* 우상 — 큰 흰빛 */
.aurora span:nth-child(2){
width:62vw;height:50vw;right:-18%;top:-24%;
background:rgba(186,216,252,.66);filter:blur(112px);
animation:driftB 9s ease-in-out infinite;
}
/* 가운데 — 진한 남색이 가로로 길게 지난다 */
.aurora span:nth-child(3){
width:86vw;height:30vw;left:8%;top:20%;
background:rgba(9,28,84,.88);filter:blur(96px);
animation:driftC 13s ease-in-out infinite;
}
/* 좌하 — 브랜드 파랑, 크게 */
.aurora span:nth-child(4){
width:66vw;height:48vw;left:-16%;top:38%;
background:rgba(56,126,236,.72);filter:blur(110px);
animation:driftD 15s ease-in-out infinite;
}
/* 우하 — 큰 어두운 자리. 아래 검정과 이어진다 */
.aurora span:nth-child(5){
width:72vw;height:52vw;right:-22%;top:36%;
background:rgba(7,22,66,.86);filter:blur(124px);
animation:driftE 12s ease-in-out infinite;
}
/* 가운데 오른쪽 — 작고 또렷한 밝은 점 */
.aurora span:nth-child(6){
width:22vw;height:19vw;right:20%;top:24%;
background:rgba(206,228,255,.62);filter:blur(48px);
animation:driftF 8s ease-in-out infinite;
}
/* 좌중 — 작고 또렷한 어두운 점 */
.aurora span:nth-child(7){
width:24vw;height:21vw;left:14%;top:6%;
background:rgba(14,40,110,.82);filter:blur(54px);
animation:driftG 10s ease-in-out infinite;
}
/* 한가운데 — 큰 밝은 덩어리를 하나 더. 가운데가 비면 좌우로 갈라져 보인다 */
.aurora span:nth-child(8){
width:58vw;height:44vw;left:22%;top:-6%;
background:rgba(96,152,232,.56);filter:blur(118px);
animation:driftB 14s ease-in-out infinite;animation-delay:-5s;
}
/* 우측 가운데 — 중간 크기 파랑 */
.aurora span:nth-child(9){
width:44vw;height:38vw;right:-6%;top:8%;
background:rgba(70,140,240,.60);filter:blur(92px);
animation:driftD 12s ease-in-out infinite;animation-delay:-7s;
}
/* 좌측 가운데 — 중간 크기 어두움. 왼쪽이 밝기만 하면 기운다 */
.aurora span:nth-child(10){
width:48vw;height:36vw;left:-10%;top:16%;
background:rgba(10,30,88,.72);filter:blur(102px);
animation:driftE 16s ease-in-out infinite;animation-delay:-9s;
}
/* ⭐ 알갱이 — 이 결이 절반이다.
⛔ feTurbulence 만 쓰면 알파까지 들쭉날쭉해서 옅게 깔린다. feColorMatrix 로
알파를 1 로 못 박고 회색으로 바꿔야 눈에 보이는 결이 된다.
⛔ 바탕이 어두우니 overlay 다. multiply 는 어두운 데 겹치면 아무 일도 안 한다.
⛔ 이미지 파일을 받지 않는다 — SVG 잡음을 그 자리에서 그린다(오프라인에서도 뜬다). */
.grain{
position:absolute;inset:-30%;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode:overlay;opacity:.34;
will-change:transform,opacity;
animation:grainFade 6s ease-in-out infinite, grainRoll 10s linear infinite;
}
/* ⭐ 아래로 갈수록 검정으로 녹는다 — 여기가 경계를 없애는 자리다.
⛔ 이 칸이 앱 창보다 아래에서 끝나면 파랑이 네모로 뚝 잘린다. 시영이 「다 잘린다」고 한 게 이것. */
.aurora::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(0,0,0,.06) 0%,rgba(0,0,0,.10) 46%,
rgba(0,0,0,.36) 70%,rgba(0,0,0,.78) 88%,#000 100%);
}
/* ⭐ 첫 화면이 눈에서 벗어나면 오로라와 알갱이를 세운다 (2026-08-29 시영 「스크롤이 안 매끄럽다」).
⛔ 안 세우면 안 보이는 동안에도 blur 92~124px 짜리 덩어리 열 개를 매 프레임 다시 그린다.
그게 스크롤을 잡아먹는다. 다시 올라오면 저절로 이어서 움직인다. */
body[data-topoff="1"] .aurora span,
body[data-topoff="1"] .grain{animation-play-state:paused;}
@keyframes driftA{
0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
50% {transform:translate3d(22%,14%,0) scale(1.30) rotate(10deg);}
}
@keyframes driftB{
0%,100%{transform:translate3d(0,0,0) scale(1.14) rotate(0deg);}
50% {transform:translate3d(-24%,18%,0) scale(.82) rotate(-12deg);}
}
@keyframes driftC{
0%,100%{transform:translate3d(-12%,0,0) scale(.92) rotate(-18deg);}
50% {transform:translate3d(16%,-12%,0) scale(1.24) rotate(-2deg);}
}
@keyframes driftD{
0%,100%{transform:translate3d(0,8%,0) scale(1.08) rotate(4deg);}
50% {transform:translate3d(20%,-16%,0) scale(.86) rotate(-8deg);}
}
@keyframes driftE{
0%,100%{transform:translate3d(0,0,0) scale(.90) rotate(0deg);}
50% {transform:translate3d(-22%,-14%,0) scale(1.26) rotate(11deg);}
}
@keyframes driftF{
0%,100%{transform:translate3d(0,0,0) scale(1);}
50% {transform:translate3d(-26%,22%,0) scale(1.34);}
}
@keyframes driftG{
0%,100%{transform:translate3d(0,0,0) scale(1.10) rotate(0deg);}
50% {transform:translate3d(26%,-18%,0) scale(.84) rotate(14deg);}
}
@keyframes grainFade{0%,100%{opacity:.24;} 50%{opacity:.42;}}
@keyframes grainRoll{
0% {transform:translate3d(0,0,0);}
100%{transform:translate3d(-10%,8%,0);}
}
@media (prefers-reduced-motion:reduce){
.aurora span,.grain{animation:none;}
}
/* ⭐ 기능 줄의 글칸과 사이 여백도 Codex 를 재서 맞췄다 (2026-08-29 시영).
저쪽은 글 390 · 사이 130 · 그림 903(전체 1423)이라 우리로 옮기면 사이 120 인데,
우리 그림은 영상이 좌우로 꽉 차서 그만큼 벌리면 멀어 보인다. 80 으로 당겼다 (시영).
⛔ --colw 를 홈에서만 바꾼다 — 다운로드 쪽은 단추가 있어서 440 이 맞다. */
/* ⭐ 칸 폭은 가장 긴 줄(309)에 맞춘다 (2026-08-30 시영 「붙인 거 맞아?」).
⛔ 372 로 두면 글 오른쪽에 63~111 이 빈 채로 남아서, gap 을 줄여도 글과 영상이 멀어 보인다.
눈에 보이는 사이 = 남는 여백 + gap 이다. */
.home{--colw:316px;}
.home .row{gap:48px;} /* 80 은 멀어서 어느 영상 이야기인지 안 붙는다 (2026-08-30 시영) */
/* ⭐ 홈 머리 띠 주 단추는 검정이다 (2026-08-29 시영, Codex 홈 방식).
밝은 파랑 위에서는 흰 단추가 배경에 묻힌다 — 어두운 단추라야 눈에 걸린다.
⛔ 내려가서 검정 띠가 깔리면 그때는 흰 단추로 되돌린다. 검정 위 검정은 안 보인다. */
.home .hbtn-solid{background:#0b0f18;color:#fff;}
/* ⭐ 맨 위 머리 글자를 검정으로 (2026-08-29 시영이 해보자고 함).
⛔ 대비는 1.3:1 이라 원칙상 안 읽히는 값이다 — 밝은 덩어리가 지나갈 때만 읽힌다.
되돌리려면 이 묶음만 지우면 흰색으로 돌아간다. */
.home .wordmark,.home .nav-menu a,.home .nav-login{color:#000;}
.home .mark{background:#000;}
.home .hbtn-ghost{color:#000;border-color:rgba(0,0,0,.38);}
.home[data-scrolled="true"] .hbtn-solid{background:var(--light);color:var(--on-light);}
/* 내려가면 검정 판이 깔리니 다시 흰 글자로 */
.home[data-scrolled="true"] .wordmark,
.home[data-scrolled="true"] .nav-menu a,
.home[data-scrolled="true"] .nav-login{color:var(--fg);}
.home[data-scrolled="true"] .mark{background:var(--fg);}
.home[data-scrolled="true"] .hbtn-ghost{color:var(--fg);border-color:rgba(255,255,255,.22);}
/* ⭐ 홈 머리 띠 (2026-08-29 시영) — 맨 위에서는 판을 걷어 하늘이 그대로 이어지게 두고,
아래로 내려가는 순간에만 어두운 판이 깔린다. 안 그러면 글자가 본문과 겹쳐 안 읽힌다.
⛔ 회색(--panel)이 아니라 반투명 검정이다. 회색 띠는 빛 위에서 얼룩처럼 뜬다.
⭐ 맨 위는 하늘색이라 글자도 어둡다. 내려가면 검정 판이 깔리므로 흰 글자로 되돌린다. */
.home .nav{
background:transparent;backdrop-filter:none;
transition:background 260ms ease-out,backdrop-filter 260ms ease-out;
}
.home[data-scrolled="true"] .nav{
background:rgba(0,0,0,.62);backdrop-filter:blur(16px) saturate(150%);
}
.home[data-scrolled="true"] .wordmark,
.home[data-scrolled="true"] .nav-menu a,
.home[data-scrolled="true"] .nav-login{color:var(--fg);}
.home[data-scrolled="true"] .mark{background:var(--fg);}
.home[data-scrolled="true"] .hbtn-ghost{color:var(--fg);border-color:rgba(255,255,255,.22);}
.home[data-scrolled="true"] .hbtn-solid{background:var(--light);color:var(--on-light);}
/* 맨 위인지 재는 점. 눈에 안 보이고 자리도 안 차지한다 */
.attop{position:absolute;top:0;left:0;width:1px;height:1px;}
/* ── 첫 화면 ── 글을 가운데로 모은다 ── */
/* ⭐ 앱 아이콘 네모는 뺐다 (2026-08-29 시영). 그만큼 위 여백도 같이 줄여
제목이 그 자리로 올라오게 한다 — 여백만 남으면 위가 텅 빈다. */
.hero{
position:relative;
padding:56px var(--pad) 64px;text-align:center;
}
/* ⭐ 글 뒤만 눌러 준다 (2026-08-29 시영) — 밝은 덩어리가 마침 글자 자리에 오면 글이 묻힌다.
⛔ 배경 전체를 어둡게 하면 덩어리 색까지 죽어 밋밋해진다. 글 있는 자리만 눌러야 한다.
⛔ 손이 안 닿게 둔다 — 단추 위에 덮이면 눌리지 않는다. */
/* ⛔ 이 칸은 넉넉히 키운다. 좁게 잡으면 빛이 다 사라지기 전에 칸이 끝나서
그 자리에 가로줄이 그어진 것처럼 보인다 (2026-08-29 시영이 본 「구분선」이 이것). */
.hero::before{
content:'';position:absolute;z-index:-1;pointer-events:none;
inset:-60% -34%;
background:radial-gradient(40% 38% at 50% 50%,
rgba(5,13,30,.70) 0%,rgba(5,13,30,.44) 40%,rgba(5,13,30,.14) 62%,transparent 78%);
}
/* ⭐ 크기는 Codex 홈과 나란히 놓고 맞췄다 (2026-08-29 시영).
같은 배율로 재 보니 저쪽은 제목 76 · 한 줄 설명 26 인데 우리는 64 · 18 이었다.
특히 설명이 작아서 제목만 둥둥 떠 보였다. */
/* ⭐ 첫 화면 이름만 살짝 두껍게 (2026-08-29 시영). 머리 로고와 같은 600 이다.
⛔ h1,h2 공통을 올리지 마라 — 요금제 카드와 마지막 제목까지 다 두꺼워진다. */
.hero h1{font-size:76px;font-weight:600;margin-bottom:16px;}
.hero-sub{font-size:24px;line-height:1.5;color:var(--fg-dim);margin-bottom:32px;}
.hero-note{font-size:14px;color:rgba(255,255,255,.45);margin-top:20px;}
/* ── 내보낼 곳 타일 ── 다운로드 단추 바로 아래.
⭐ 아직 안 되는 것도 같이 보여준다 (2026-08-29 시영). 감추면 「프리미어만 되는구나」로 끝나고,
딱지 없이 늘어놓으면 다 되는 줄 알고 받았다가 속았다고 느낀다. 흐리게 + 「준비 중」 두 개를 같이 건다.
⛔ 앱의 내보내기 창과 같은 목록이다(engine 쪽 targets). 한쪽만 늘리면 두 곳이 어긋난다. */
.tiles-t{margin-top:56px;font-size:14px;color:rgba(255,255,255,.45);}
.tiles{
list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
margin-top:16px;
}
/* ⭐ 크기는 눈대중이 아니라 claude.com/claude-code 를 열어 잰 값이다 (2026-08-29).
거기는 88×83 에 로고 24. 시영이 「살짝만 크게」라 해서 96 정사각에 로고 28 로 뒀다.
⭐ 네 칸을 같은 크기로 못 박는다 — 이름 길이가 달라도(「DaVinci」·「Premiere Pro」)
칸이 들쭉날쭉하지 않아야 한 줄로 읽힌다. 로고는 가운데 고정, 이름은 바닥에 붙는다. */
/* ⛔ 격자(1fr auto)로 두면 로고가 남는 칸 가운데로 가서 위 24 · 아래 13 으로 어긋난다.
로고와 이름을 한 묶음으로 보고 그 묶음을 타일 정중앙에 놓아야 위아래가 맞는다. */
.tile{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
width:96px;aspect-ratio:1;padding:0 8px;
border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);
}
/* ⭐ 크기를 다 28 로 맞추면 오히려 안 맞아 보인다 — 눈은 넓이가 아니라 「덩어리」를 잰다.
원형(다빈치)은 같은 크기라도 작아 보여서 키우고, 흰 바탕이 꽉 찬 캡컷은 커 보여서 줄인다. */
.tile img{width:28px;height:28px;object-fit:contain;flex:none;}
.tile img[src*="davinci"]{width:31px;height:31px;}
/* 캡컷 로고만 흰 바탕이다 — 모서리를 깎아 타일 안에 앉힌다 */
.tile img.lg-cc{width:26px;height:26px;border-radius:6px;}
.tile b{font-size:12px;font-weight:500;text-align:center;line-height:1.3;}
/* ── 큰 화면 하나 ── 첫 화면 바로 아래 ──
⭐ 창 1320 은 linear.app 실측값 그대로다 (2026-08-29). 창이 이 크기여야
뒤 판(창보다 좌우 168 큰 1656)이 1680 화면 안에 딱 들어와 양옆 바닥이 보인다.
⛔ 창을 더 키우면 판이 화면 밖으로 밀려 나가 「바닥 위에 올려둔」 모양이 사라진다. */
/* ⭐ 창 아래 여백을 넉넉히 둔다 (2026-08-29 시영 「다 잘리네」).
여백이 좁으면 파랑이 검정으로 녹을 자리가 없어서 앱 창 바로 밑에서 네모로 뚝 끊긴다. */
.stage{
max-width:1320px;margin:0 auto;padding:0 0 180px;
}
@media (max-width:1560px){ .stage{max-width:none;padding-left:calc(var(--pad) + 9%);padding-right:calc(var(--pad) + 9%);} }
/* ── 다운로드 단추 ── 보고 있는 컴퓨터 것 하나만 ──
⭐ 아이콘도 글자도 CSS 로 바꾼다 (2026-08-29 시영). JS 로 갈아 끼우면 한 번 깜빡인다.
⭐ 애플·윈도우 아이콘은 늘 보인다 — 무엇을 받는지 글자보다 먼저 알아본다.
⛔ os.js 가 안 돌면 data-os 가 없다. 그때는 macOS 쪽이 남는다(빈 단추를 주지 않는다). */
.os-win{display:none;}
html[data-os="win"] .os-mac{display:none;}
html[data-os="win"] .os-win{display:inline-block;}
.dl .dl-t::after{content:"macOS용 다운로드";}
html[data-os="win"] .dl .dl-t::after{content:"Windows용 다운로드";}
/* 다운로드 화면 — 두 단추 중 하나만 남긴다 */
html[data-os="win"] .dl-mac{display:none;}
html:not([data-os="win"]) .dl-win{display:none;}
/* ── 섹션 제목 ── 가운데. 첫 화면 제목보다 한 단 작게 ── */
.sec-title{
font-size:52px;font-weight:500;line-height:1.25;letter-spacing:-.02em;
/* ⭐ 제목과 첫 줄 사이는 넉넉히 (2026-08-29 시영). Codex 는 약 70px 을 둔다 —
20 밖에 없으면 제목이 첫 블록에 얹힌 것처럼 보인다. */
text-align:center;margin:0 auto 64px;padding:0 var(--pad);
}
.sec-sub{
max-width:640px;margin:0 auto 48px;padding:0 var(--pad);
text-align:center;font-size:16px;line-height:1.7;color:var(--fg-dim);
}
.sec-title + .wrap{padding-top:8px;}
/* 소제목 없이 카드가 바로 오는 구역은 제목을 붙인다 — 64 는 사이가 휑하다 (2026-09-05 시영) */
.sec-title-tight{margin-bottom:40px;}
/* ── 기능 줄의 글 ──
⭐ 크기와 간격은 Codex 홈을 같은 배율로 재서 맞췄다 (2026-08-29 시영).
저쪽은 제목 30 · 본문 17/1.9 · 제목과 본문 사이 34 인데
우리는 24 · 16/1.7 · 12 라서 글자가 작고 다 붙어 보였다. */
.row h3{
font-size:30px;font-weight:600;line-height:1.35;letter-spacing:-.02em;
margin-bottom:16px;
}
.row h3 + p{font-size:17px;line-height:1.9;color:var(--fg-dim);margin-bottom:0;}
/* ── 통째로 하나인 구역 ── 위아래로 넉넉히 띄운다 ── */
.band{padding:120px 0 0;}
.band .plans,.band .cards3{padding-left:var(--pad);padding-right:var(--pad);}
/* 홈에는 요금제 둘만 놓는다. 나머지는 가격 쪽에서 본다 */
/* 1000 은 좁고 --shell(1284)은 넓다 — 그 사이 (2026-08-30 시영) */
.plans-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1220px;margin:0 auto;}
.plans-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin:0 auto;}
/* 팀·기업은 카드가 한 장이라 가운데에 한 폭만 세운다 */
.plans-1{grid-template-columns:minmax(0,426px);justify-content:center;max-width:880px;}
.plan h3{font-size:28px;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin-bottom:12px;}
/* 홈 카드에만 — 거기는 버튼이 카드 맨 아래다. 요금제 카드는 버튼 밑에 목록이 있어 밀면 안 된다 */
.band .plans-3 .plan-btn,.band .plans-2 .plan-btn{margin-top:auto;}
.more-link{color:var(--fg-dim);text-decoration:underline;text-underline-offset:3px;}
.more-link:hover{color:var(--fg);}
/* ── 카드 셋 ── 그림 위, 글 아래 ── */
.cards3{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
max-width:var(--shell);margin:0 auto;
}
.card .shot{margin-bottom:20px;}
.card h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;}
.card p{font-size:15px;line-height:1.6;color:var(--fg-dim);}
/* ── 마지막 부름 ── */
.cta-end{padding:140px var(--pad) 120px;text-align:center;}
.cta-end h2{font-size:44px;line-height:1.25;margin-bottom:40px;}
.cta-end p{font-size:17px;color:var(--fg-dim);margin-bottom:28px;}
@media (max-width:1100px){
.plans-3,.cards3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
/* 좁은 화면에서는 높이로 묶지 않는다 — 폭이 이미 좁아서 창이 우표만 해진다 */
.appwin{width:100%;aspect-ratio:16/11;}
/* ⭐ 홈은 머리 띠를 숨겨서 그 72 만큼 위가 비었다 — 그만큼 다시 채운다 (2026-08-30 시영) */
.hero{padding:calc(env(safe-area-inset-top, 0px) + 96px) var(--pad) 40px;}
.hero h1{font-size:44px;}
.hero-sub{font-size:17px;}
/* ⭐ 좁은 화면에서는 아래 영상과 좌우 선을 맞춘다 (2026-08-30 시영).
넓은 화면용 9% 여백을 그대로 두면 앱 창만 안쪽으로 들어가 작아 보인다. */
.stage{padding:0 var(--pad) 56px;}
.sec-title{font-size:30px;margin-bottom:56px;} /* 36 은 제목이 아래 글에 붙는다 (2026-08-30 시영) */
.sec-sub{margin-bottom:32px;}
.band{padding-top:72px;}
.row h3{font-size:20px;}
/* ⭐ 좁은 화면에서는 제목을 억지로 끊지 않는다 (2026-08-30 시영).
넓은 화면용
자리라 여기서는 두 줄이 어정쩡하게 갈린다. 짧으면 한 줄, 길면 알아서 넘어간다. */
.row h3 br{display:none;}
/* ⭐ 글이 어느 영상 이야기인지 눈에 보이게 (2026-08-30 시영).
글–영상은 붙이고 줄–줄은 벌린다. ⛔ 위쪽 미디어쿼리에 적으면 .home .row{gap:80px} 에게 진다 —
그 줄보다 뒤에 있어야 이긴다. */
.row,.home .row{gap:16px;}
.plans-3,.plans-2,.cards3{grid-template-columns:1fr;gap:20px;}
/* ⭐ 좁은 화면에서는 카드 안 좌우 여백만 줄인다 (2026-08-30 시영).
⛔ 위아래는 건드리지 마라 — 지금 높이가 맞다. */
.plan{padding:32px 20px;}
.cta-end{padding:88px var(--pad) 72px;}
.cta-end h2{font-size:30px;}
/* ⛔ 위쪽 820 블록에 적으면 .dl .dl-t::after 원래 규칙(571줄)에게 순서로 진다 */
.dl .dl-t::after,html[data-os="win"] .dl .dl-t::after{content:"맥·윈도우용 다운로드";}
/* ⭐ 다운로드 화면에서는 단추 둘을 다 세운다 (2026-08-30 시영).
여기는 고르러 온 자리라 둘 다 보여야 한다 — 폰에서는 위아래로 쌓는다. */
html[data-os="win"] .dl-mac,html:not([data-os="win"]) .dl-win{display:inline-flex;}
.cta-row{flex-direction:column;align-items:stretch;gap:10px;}
/* ⭐ 로고 위를 띄운다 (2026-08-30 시영). 폰은 위쪽에 상태바가 걸쳐서 더 붙어 보인다 —
env() 로 기기가 알려주는 만큼 더 비운다. */
.nav{padding-top:calc(env(safe-area-inset-top, 0px) + 12px);}
}
/* ══ 홈에 심은 앱 화면 ═════════════════════════════════════════
⭐ 흉내낸 그림이 아니라 앱의 renderer/ 를 그대로 띄운다 (2026-08-29 시영).
파일만 못 읽어서 bridge.js 의 브라우저용 다리가 스냅샷을 준다.
⛔ 반드시 iframe 이다 — 앱 CSS 는 html,body 높이와 스크롤바까지 잡는 전역 규칙이라
홈 화면에 그냥 풀면 홈 쪽이 망가진다. 틀로 가둬야 둘 다 산다.
══════════════════════════════════════════════════════════ */
/* ⭐ 16:9 가 아니라 16:10 이다 (2026-08-29 시영). 진짜 앱을 넣었더니 9 로는 세로가 모자라
오른쪽 할 일 판 위쪽이 잘렸다. 한 화면에 다 들어오는 비율이 10 이다. */
/* ⭐ 창은 늘 한 화면에 들어온다 (2026-08-29 시영).
비율은 16:10 — 9 로는 오른쪽 할 일 판 위가 잘리고, 12 는 너무 길어 화면을 넘었다.
⭐ 폭을 「화면 높이」로도 묶는다: (창이 쓸 수 있는 높이) × 1.6.
화면이 낮아지면 폭이 따라 줄어서 비율이 안 깨지고 세로 스크롤도 안 생긴다.
화면이 넉넉하면 1320(부모 폭)에서 멈춘다 — 무한정 커지지 않는다.
⛔ max-height 로 누르면 안 된다. 높이만 깎이고 폭은 그대로라 16:10 이 깨진다.
⛔ overflow:hidden 을 주면 안 된다 — 뒤 그림자(::after)까지 잘린다.
안쪽 틀은 자기 모서리를 스스로 깎는다. */
.appwin{
position:relative;
aspect-ratio:16/10;
width:min(100%,calc((100vh - 132px) * 1.6));
width:min(100%,calc((100svh - 132px) * 1.6));
margin:0 auto;
border-radius:12px;background:#0e0e0e;
/* ⛔ 둘레 실선은 뺐다 (2026-08-29 시영). 배경이 충분히 어두워져서 그림자만으로 갈라진다.
선을 두르면 오려 붙인 것처럼 보인다. 위 안쪽 선만 남겨 빛을 위에서 받는 느낌을 준다. */
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
0 2px 6px rgba(0,0,0,.55),
0 22px 48px rgba(0,0,0,.62);
}
/* ⭐ 창이 바닥에 드리우는 그림자 — 이게 있어야 「올려둔 것」이 된다.
⛔ 창 뒤에 판을 따로 깔지 않는다 — 빛이 이미 화면을 덮고 있어서 판 테두리가 거기서 끊긴다. */
.appwin::after{
content:'';position:absolute;z-index:-1;pointer-events:none;
left:-5%;right:-5%;bottom:-9%;height:13%;
background:radial-gradient(54% 130% at 50% 0%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.16) 62%,rgba(0,0,0,0) 84%);
filter:blur(12px);
}
/* 틀 안쪽을 잘라 주는 칸. 모서리도 여기서 깎는다 —
⛔ .appwin 에 overflow:hidden 을 주면 뒤 그림자(::after)까지 잘린다. */
.appclip{position:absolute;inset:0;overflow:hidden;border-radius:12px;}
/* ⭐ 앱은 늘 1440×900 으로 그린다. 화면에 맞춰 줄이는 일은 JS 가 transform 으로 한다.
⛔ width:100% 로 두면 앱이 좁은 창인 줄 알고 스스로 접혀서 오른쪽 판이 잘린다. */
.appframe{
display:block;width:1440px;height:900px;border:0;
transform-origin:0 0;
}
/* ── 로그인 화면 ── 왼쪽 글·단추 / 오른쪽 앱 그림 ──
⭐ Sana AI 로그인 짜임을 그대로 떴다 (2026-08-29 시영). 왼쪽은 세로 가운데,
오른쪽은 화면 오른쪽 끝까지 붙는 큰 그림 한 장.
⛔ 좁아지면 그림을 지운다 — 작게 줄여 얹으면 글도 그림도 다 안 읽힌다. */
.auth{flex:1;display:flex;align-items:center;}
.auth-in{
width:100%;max-width:var(--shell);margin:0 auto;padding:64px var(--pad);
display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
gap:80px;align-items:center;
}
.auth-col{max-width:460px;}
.auth-title{font-size:34px;font-weight:600;line-height:1.25;letter-spacing:-.02em;margin-bottom:36px;}
.auth-title span{color:rgba(255,255,255,.42);font-weight:600;}
/* 단추 둘은 크기가 같아야 한 벌로 보인다 — 하나는 테두리, 하나는 꽉 찬 흰색 */
.auth-btn{
display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;height:52px;border-radius:999px;
font-size:16px;font-weight:600;cursor:pointer;
}
/* ⭐ 카카오 노랑은 말풍선에만 남긴다 (2026-08-29 시영 「배경이 너무 노랗다」).
바탕이 검정이라 노란 판이 화면에서 혼자 튄다. 심볼만 노랑이어도 카카오인 걸 알아본다.
⛔ 심볼 색(#FEE500)과 「카카오」라는 말은 바꾸지 마라 — 그것까지 바꾸면 브랜드 규정 위반이다. */
.auth-kakao{border:1px solid rgba(255,255,255,.22);color:var(--fg);background:none;}
.auth-kakao:hover{background:rgba(255,255,255,.06);}
.auth-kakao svg{width:19px;height:19px;flex:none;color:#FEE500;}
.auth-google{border:1px solid rgba(255,255,255,.22);color:var(--fg);background:none;}
/* ⭐ 지난번에 쓴 수단을 위로 올린다 — 세로로 세워야 order 로 자리를 바꿀 수 있다 */
.auth-btns{display:flex;flex-direction:column;gap:10px;}
/* 딱지는 단추 위 오른쪽에 걸친다. 글자 가운데 정렬을 건드리지 않는 자리다 */
.auth-btn{position:relative;}
.auth-last{
position:absolute;top:-9px;right:18px;
height:22px;padding:0 9px;border-radius:999px;
background:var(--accent);color:var(--on-accent);
font-size:12px;font-weight:600;letter-spacing:-.01em;
display:flex;align-items:center;
}
.auth-google:hover{background:rgba(255,255,255,.06);}
.auth-google svg{width:18px;height:18px;flex:none;}
.auth-solid{background:var(--light);color:var(--on-light);border:0;}
.auth-solid:hover{opacity:.9;}
/* 「또는」 양옆으로 실선 — 가운데 글자만큼만 비운다 */
.auth-or{display:flex;align-items:center;gap:14px;margin:20px 0;color:rgba(255,255,255,.45);font-size:14px;}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14);}
.auth-form{display:flex;flex-direction:column;gap:12px;}
.auth-input{
width:100%;height:52px;padding:0 20px;border-radius:999px;
border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
color:var(--fg);font:inherit;font-size:16px;
}
.auth-input::placeholder{color:rgba(255,255,255,.42);}
.auth-input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);}
.auth-note{margin-top:24px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.45);}
.auth-note a{text-decoration:underline;text-underline-offset:3px;}
.auth-shot{border-radius:16px;overflow:hidden;background:#0b0b0b;}
.auth-shot .shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
@media (max-width:900px){
.auth-in{grid-template-columns:1fr;gap:0;justify-items:center;}
.auth-shot{display:none;}
.auth-title{font-size:30px;}
}
/* ══ 로그인한 뒤 ══════════════════════════════════════════════════
⭐ 전부 파일 맨 끝에 모았다. 기존 줄은 한 곳도 고치지 않는다 —
머리 띠 반전 규칙이 위에 두 번 중복돼 있어(475~485, 499~504)
그 사이에 끼워 넣으면 어느 쪽이 이길지 알 수 없다.
⭐ 새 단추 클래스를 만들지 않는다. .btn · .btn-light · .btn-dark · .btn-lg 를 그대로 쓴다.
────────────────────────────────────────────────────────────── */
/* ── 머리 띠 갈아 끼우기 ──
⭐ 속성이 없으면 로그아웃이다 — 스크립트가 안 돌아도 「로그인」과 아바타가 같이 뜨지 않는다.
os.js 가 .os-win{display:none} 을 기본으로 까는 것과 같은 방식. */
.me{display:none;position:relative;}
html[data-auth="in"] .me{display:flex;}
/* 「로그인」 글자만 없앤다 — ⛔ 「도입 문의」는 남긴다(2026-08-30 시영).
이미 쓰는 사람이 회사 도입을 물어볼 수도 있다. 문이 하나 줄면 그만큼 못 받는다. */
html[data-auth="in"] .nav-login{display:none;}
.me-btn{
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;padding:0;
transition:opacity 120ms ease-out;
}
.me-btn:hover{opacity:.85;}
/* 사진은 아직 없다. 이름 첫 글자 하나면 누구 계정인지 알아본다 */
.me-face{
display:flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:50%;
background:var(--line);color:var(--fg);
font-size:15px;font-weight:600;line-height:1;
}
/* ⭐ 홈 맨 위는 하늘색 오로라라서 흰 원이 배경에 묻는다 — 어두운 원으로 바꾼다.
⛔ :not([data-scrolled]) 로 짜면 절대 안 걸린다. index.html 이 맨 위에서도
data-scrolled="false" 를 붙여 두기 때문이다. 두 벌로 쓴다. */
.home .me-face{background:#0b0f18;color:#fff;}
.home[data-scrolled="true"] .me-face{background:var(--line);color:var(--fg);}
.me-menu{
position:absolute;top:calc(100% + 8px);right:0;z-index:60;
width:260px;max-width:calc(100vw - 40px);padding:6px;
border-radius:12px;background:var(--panel);
border:1px solid var(--line);
box-shadow:0 22px 48px rgba(0,0,0,.62);
}
.me-id{padding:10px 12px 12px;}
.me-name{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;
font-size:15px;font-weight:600;color:var(--fg);
}
.me-name span{font-size:12px;font-weight:500;color:rgba(255,255,255,.45);}
.me-mail{
margin-top:2px;font-size:13px;color:rgba(255,255,255,.45);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.me-sep{height:1px;margin:6px 12px;background:rgba(255,255,255,.08);}
/* 숫자 한 줄이면 「얼마 남았나」에 답이 된다 — 막대도 단추도 여기 안 넣는다 */
.me-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:6px 12px 10px;font-size:13px;color:var(--fg-dim);
}
.me-row b{font-size:15px;font-weight:600;color:var(--fg);}
.me-item{
display:flex;align-items:center;height:40px;padding:0 12px;
border-radius:8px;font-size:15px;color:var(--fg);
}
.me-item:hover{background:rgba(255,255,255,.06);}
/* ── 설정 창 ── 화면 한가운데 뜨는 창 하나 (2026-08-30 시영)
⭐ 값은 chatgpt.com 설정 창을 그대로 잰 것이다:
창 680×600 · 모서리 16 · 왼쪽 칸 210 · 안쪽 여백 24 ·
목록 34/글자 14 · 제목 18 + 아래 선 · 설명 13 · 줄 라벨 14/밑 13.
⛔ 창을 넓히지 마라 — 680 을 넘기면 오른쪽이 텅 비어 설정이 아니라 페이지로 보인다. */
.set{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;}
.set[hidden]{display:none;}
.set-win{
display:grid;grid-template-columns:210px minmax(0,1fr);
width:100%;max-width:680px;height:600px;max-height:calc(100vh - 168px);
border-radius:16px;overflow:hidden;background:#2a2a2a;
}
/* 왼쪽 — 목록만. 창보다 한 칸 어둡게 깔아 갈라 놓는다.
⭐ 위 여백은 오른쪽(24)과 같게 둔다 — 첫 줄 높이가 맞아야 두 칸이 한 창으로 보인다 */
.set-nav{
display:flex;flex-direction:column;overflow-y:auto;
padding:24px 12px;background:#212121;
}
/* 오른쪽 */
.set-body{padding:24px;overflow-y:auto;}
.set-list{display:flex;flex-direction:column;gap:2px;}
.set-grp{
padding:0 10px;margin:16px 0 4px;font-size:12px;font-weight:600;
color:rgba(255,255,255,.38);letter-spacing:.02em;
}
.set-list > .set-grp:first-child{margin-top:0;}
.set-item{
display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;
border-radius:8px;font-size:14px;color:var(--fg-dim);
}
.set-ico{width:16px;height:16px;flex:none;}
.set-item:hover{background:rgba(255,255,255,.06);color:var(--fg);}
/* ⭐ 지금 보고 있는 칸은 브랜드 파랑으로 짚는다 (2026-08-30 시영) — 앱의 켜진 스위치와 같은 색 */
.set-item.on{background:rgba(61,139,255,.16);color:var(--accent);font-weight:500;}
.set-item.on:hover{background:rgba(61,139,255,.16);color:var(--accent);}
.set-out{
display:flex;align-items:center;height:34px;padding:0 10px;margin-top:auto;
border-radius:8px;font-size:14px;color:var(--fg-dim);text-align:left;
}
.set-out:hover{background:rgba(255,255,255,.06);color:var(--fg);}
.set-title{
font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.4;
margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1);
}
.set-desc{font-size:13px;line-height:1.6;color:var(--fg-dim);margin-bottom:18px;}
.set-h2{
font-size:15px;font-weight:600;letter-spacing:normal;line-height:1.4;
margin:22px 0 8px;
}
/* ⭐ 판도 테두리도 두지 않는다 (2026-08-30 시영). 창 안에서는 테두리가 한 겹 더 겹쳐 보인다 —
줄과 줄 사이 선 하나면 충분하다. */
.set-card{border-radius:0;background:transparent;border:0;}
/* 한 줄 = 왼쪽 라벨(+밑줄) · 오른쪽 값이나 단추 */
.set-row{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px 0;
}
.set-row + .set-row{border-top:1px solid rgba(255,255,255,.08);}
.set-l{min-width:0;}
.set-lab{font-size:14px;line-height:1.4;}
.set-sub{font-size:13px;line-height:1.6;color:var(--fg-dim);margin-top:2px;word-break:keep-all;}
.set-r{display:flex;align-items:center;gap:12px;flex:none;}
.set-val{font-size:14px;color:var(--fg-dim);}
.set-plan{font-size:17px;font-weight:600;}
.set-amt{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.set-empty{padding:32px 0;text-align:center;font-size:14px;color:var(--fg-dim);}
.set-empty-b{margin-top:16px;display:flex;justify-content:center;}
/* 사용량 맨 위 — 숫자 하나가 주인공이다 */
.set-hero{padding:0 0 4px;}
.set-hero-t{font-size:13px;color:var(--fg-dim);margin-bottom:8px;}
.set-big{
font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1;
font-variant-numeric:tabular-nums;
}
.set-big-sm{font-size:20px;}
.set-note{font-size:13px;line-height:1.6;color:rgba(255,255,255,.45);}
.set-note + .set-note{margin-top:2px;}
/* ── 남은 만큼 채운다 ──
⛔ 채움을 브랜드 파랑으로 칠하지 마라 — 이 사이트에서 파랑은 「추천」이다. */
.meter{height:6px;border-radius:999px;background:var(--line);margin:14px 0 10px;overflow:hidden;}
.meter i{display:block;height:100%;border-radius:999px;background:var(--fg);}
/* ── 상태 딱지 ── 색을 넣지 않는다. 날짜가 곧 상태다 ── */
.badge-mute{
top:0;background:none;color:var(--fg-dim);
border:1px solid var(--line);font-weight:500;
}
/* ── 물어보는 판 ──