/* ─────────────────────────────────────────────────────────────
   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;}
/* 내용이 한 덩어리뿐이라 위로만 몰린다. 화면을 다 쓰고 가운데에 놓고, 발은 늘 맨 아래에 붙인다 */
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;}
  .nav-menu{display:none;}
  .nav-login,.hbtn-ghost{display:none;}
  main{align-items:flex-start;}
  .wrap{padding:32px var(--pad) 64px;}
  .row{grid-template-columns:1fr;gap:32px;}
  .row + .row{margin-top:64px;}
  .order-2{order:0;}
  .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(4,minmax(0,1fr));gap:28px;
  max-width:none;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;
}
.plan-sub{font-size:16px;line-height:1.6;color:var(--fg-dim);min-height:52px;}
.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-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 이 맞다. */
.home{--colw:372px;}
.home .row{gap:80px;}

/* ⭐ 홈 머리 띠 주 단추는 검정이다 (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;}

/* ── 기능 줄의 글 ──
   ⭐ 크기와 간격은 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:32px;
}
.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);}

/* 홈에는 요금제를 셋만 놓는다. 나머지는 가격 쪽에서 본다 */
.plans-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--shell);margin:0 auto;}
.plan h3{font-size:28px;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin-bottom:12px;}
.plans-3 .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;}
  .hero{padding:36px var(--pad) 40px;}
  .hero h1{font-size:44px;}
  .hero-sub{font-size:17px;}
  .stage{padding-bottom:56px;}
  .sec-title{font-size:30px;margin-bottom:36px;}
  .sec-sub{margin-bottom:32px;}
  .band{padding-top:72px;}
  .row h3{font-size:20px;}
  .plans-3,.cards3{grid-template-columns:1fr;gap:16px;}
  .cta-end{padding:88px var(--pad) 72px;}
  .cta-end h2{font-size:30px;}
}

/* ══ 홈에 심은 앱 화면 ═════════════════════════════════════════
   ⭐ 흉내낸 그림이 아니라 앱의 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;margin-bottom:10px;}
.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;}
}