/* 자비스 AI 브랜드 사이트. 색 하나(파랑)와 차가운 회색 계열, 모서리 규칙은 버튼=알약, 카드=16px로 통일. */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --soft: #edf0f5; --text: #151a24; --muted: #566072; --line: #dde2ea;
  --accent: #2456d6; --accent-ink: #ffffff; --navy: #16264f; --navy-ink: #f2f5ff; --tint: #e4ecff;
  --shadow: 0 18px 40px -24px rgba(22, 38, 79, .35);
  --radius: 16px;
  --font: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f131b; --surface: #171d28; --soft: #131822; --text: #e9edf5; --muted: #a2adc0; --line: #283042;
    --accent: #6f95ff; --accent-ink: #0b1226; --navy: #1b2a55; --navy-ink: #eef2ff; --tint: #1c2a52;
    --shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; word-break: keep-all; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 999px; z-index: 30; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* 상단 메뉴: 한 줄, 높이 68px */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { height: 68px; display: flex; align-items: center; gap: 28px; }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { color: var(--muted); font-size: 15px; padding: 6px 2px; transition: color .2s; }
.nav nav a:hover { color: var(--text); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--accent); color: var(--accent-ink); font-weight: 650; border-radius: 999px; padding: 14px 28px; border: 1px solid var(--accent); transition: transform .18s cubic-bezier(.16, 1, .3, 1), filter .2s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
button.btn { font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; }
.btn-sm { padding: 9px 20px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--text); filter: none; }

/* 첫 화면 */
.hero { padding: 56px 0 72px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; min-height: min(640px, calc(100dvh - 68px - 40px)); }
.eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 650; color: var(--accent); letter-spacing: .02em; }
h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.18; letter-spacing: -.03em; margin: 0 0 20px; font-weight: 750; text-wrap: balance; }
.lead { margin: 0 0 32px; font-size: 19px; color: var(--muted); max-width: 30em; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual { position: relative; height: 520px; }
.sheet { position: absolute; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.sheet img { width: 100%; height: auto; }
.sheet-a { width: 58%; left: 4%; top: 0; transform: rotate(-2.2deg); }
.sheet-b { width: 74%; right: 0; bottom: 0; transform: rotate(1.6deg); }

.section { padding: 104px 0; }
.section-soft { background: var(--soft); }
h2 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.3; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 720; text-wrap: balance; }
.section-sub { margin: 0 0 44px; color: var(--muted); max-width: 40em; }
h3 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 10px; }

/* 서비스: 3칸이 비대칭 (1 큰 + 2 작은) */
.bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.tile { border-radius: var(--radius); padding: 34px 34px 32px; }
.tile p { margin: 0; }
.tile-dark { grid-row: span 2; background: var(--navy); color: var(--navy-ink); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 380px; background-image: radial-gradient(circle at 100% 0%, rgba(111, 149, 255, .35), transparent 52%); }
.tile-dark p { color: color-mix(in srgb, var(--navy-ink) 82%, transparent); }
.tile-dark h3 { font-size: 28px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 26px; position: relative; font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 12px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-50%); }
.tile-tint { background: var(--tint); }
.tile-line { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.tile-line::after { content: ""; position: absolute; inset: 0 0 0 45%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.tile-line > * { position: relative; z-index: 1; max-width: 22em; }
.tile-tint p, .tile-line p { color: var(--muted); }

/* 일하는 방식: 계단식 5칸 */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: start; }
.flow li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px 26px; display: grid; gap: 10px; }
.flow li:nth-child(2) { margin-top: 28px; } .flow li:nth-child(3) { margin-top: 56px; } .flow li:nth-child(4) { margin-top: 28px; }
.flow strong { font-size: 24px; letter-spacing: -.02em; color: var(--accent); }
.flow span { color: var(--muted); font-size: 16px; line-height: 1.6; }

/* 결과물 */
.samples { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.formats { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.formats li { display: flex; gap: 14px; align-items: baseline; }
.formats b { min-width: 6.2em; color: var(--accent); }
.note { color: var(--muted); font-size: 14.5px; margin: 0; }
.sample-img { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }

/* 질문 */
.faq-wrap { max-width: 860px; }
.faq { display: grid; gap: 12px; margin-top: 28px; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 24px; }
summary { cursor: pointer; padding: 20px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 24px; color: var(--accent); line-height: 1; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 22px; color: var(--muted); }

.contact { background: var(--navy); color: var(--navy-ink); text-align: left; }
.contact .section-sub { color: color-mix(in srgb, var(--navy-ink) 78%, transparent); margin-bottom: 28px; }
.contact .btn { background: #ffffff; color: #16264f; border-color: #ffffff; }
.contact-addr { margin: 0 0 18px; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.contact .btn-ghost { background: transparent; color: var(--navy-ink); border-color: color-mix(in srgb, var(--navy-ink) 55%, transparent); }
.contact .btn-ghost:hover { border-color: var(--navy-ink); }
.contact .pending { display: inline-block; border: 1px dashed color-mix(in srgb, var(--navy-ink) 50%, transparent); border-radius: var(--radius); padding: 14px 20px; color: color-mix(in srgb, var(--navy-ink) 85%, transparent); }
.footer { padding: 28px 0 36px; color: var(--muted); font-size: 14.5px; }
.footer-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer .logo { color: var(--text); font-size: 16px; }
.footer-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-link:hover { color: var(--accent); }

/* 스크롤 등장: 움직임 줄이기 설정이면 꺼진다 */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .hero-copy > * { animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .06s; } .hero-copy > *:nth-child(3) { animation-delay: .12s; } .hero-copy > *:nth-child(4) { animation-delay: .18s; }
  .sheet-a { animation: floatA .9s cubic-bezier(.16, 1, .3, 1) both; } .sheet-b { animation: floatB .9s .12s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes floatA { from { opacity: 0; transform: translateY(24px) rotate(-2.2deg); } }
@keyframes floatB { from { opacity: 0; transform: translateY(24px) rotate(1.6deg); } }

/* 작은 화면: 모두 한 줄로 쌓는다 */
@media (max-width: 980px) {
  .hero-grid, .samples { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .hero-visual { height: auto; display: grid; gap: 16px; }
  .sheet { position: relative; width: 100% !important; transform: none !important; left: auto; right: auto; top: auto; bottom: auto; }
  .sheet-a { display: none; }
  .bento { grid-template-columns: 1fr; } .tile-dark { grid-row: auto; min-height: 0; }
  .flow { grid-template-columns: 1fr; } .flow li, .flow li:nth-child(n) { margin-top: 0; }
  .nav nav { display: none; } .nav-in { justify-content: space-between; } .btn-sm { margin-left: auto; }
  .section { padding: 72px 0; }
}
@media (max-width: 480px) { .wrap { width: calc(100% - 32px); } body { font-size: 16px; } .btn { padding: 13px 22px; } }