/* 밝은 바탕 + 검은 구간 하나. 강조색은 파랑 계열 하나 */
:root {
  --bg: #fbfbfd;
  --panel: #f2f2f5;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #e3e3e8;
  --accent: #0062e6;
  --accent-2: #00a3c4;
  --ok: #0a8f5a;
  --warn: #c2650a;
  --dark: #0b0b0d;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@property --ok-n { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --warn-n { syntax: "<integer>"; initial-value: 0; inherits: false; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
.ic { width: 1em; height: 1em; fill: currentColor; flex: none; }
h2 { font-size: clamp(36px, 6vw, 72px); font-weight: 750; letter-spacing: -0.045em; line-height: 1.1; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
.grad { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* 버튼 */
.pill {
  display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s;
}
.pill:hover { background: #0052c2; }
.pill:active { transform: scale(.97); }
.pill-sm { height: 30px; padding: 0 14px; font-size: 13px; }
.pill-lg { height: 56px; padding: 0 32px; font-size: 18px; }
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-size: 17px; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* 상단 */
.nav { position: sticky; top: 0; z-index: 20; background: rgb(251 251 253 / .78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgb(0 0 0 / .06); }
.nav-inner { max-width: 1040px; margin: 0 auto; padding: 0 22px; height: 52px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.mark {
  width: 22px; height: 22px; border-radius: 7px; background: var(--ink);
  background-image: radial-gradient(circle at 32% 52%, #fff 0 2.6px, transparent 3px), radial-gradient(circle at 68% 52%, #fff 0 2.6px, transparent 3px);
}
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { color: var(--ink); opacity: .8; font-size: 13px; text-decoration: none; }
.nav-links a:hover { opacity: 1; }
.login { margin-left: 20px; margin-right: 12px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.login:hover { color: #0052c2; }

/* 첫 화면 */
.hero { text-align: center; padding: 96px 22px 40px; overflow: hidden; }
.product { font-size: 22px; font-weight: 650; color: var(--muted); letter-spacing: -0.01em; }
.hero h1 { margin-top: 10px; font-size: clamp(44px, 8vw, 96px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.04; }
.hero-sub { margin: 22px auto 0; max-width: 30em; font-size: clamp(19px, 2.2vw, 24px); color: var(--muted); letter-spacing: -0.02em; }
.hero-cta { margin-top: 34px; display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-visual { margin: 72px auto 0; max-width: 1040px; perspective: 1800px; }
.caption { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* 진료 프로그램 화면 */
.screen {
  background: #fff; border-radius: 18px; overflow: hidden; text-align: left;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 30px 80px -20px rgb(0 30 80 / .25), 0 12px 24px -12px rgb(0 0 0 / .12);
}
.screen-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); }
.src { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.src th { font-weight: 500; font-size: 12px; color: var(--muted); padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.src th.n { text-align: right; }
.src td { padding: 12px 18px; border-bottom: 1px solid #f0f0f3; }
.src tr:last-child td { border-bottom: 0; }
.smudge { filter: blur(2.6px); }


/* 스크롤 장면 */
.scan { height: 360vh; position: relative; view-timeline-name: --scan; }
.scan-sticky { position: sticky; top: 52px; height: calc(100dvh - 52px); display: grid; grid-template-rows: auto 1fr; align-content: center; gap: 36px; padding: 32px 22px; overflow: hidden; }
.scan-captions { position: relative; height: 1.2em; font-size: clamp(36px, 6vw, 72px); text-align: center; }
.cap { position: absolute; inset: 0; font-size: inherit; }
.scan-stage { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: start; }
.scan-body { position: relative; }
.beam { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.beam span { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); box-shadow: 0 0 18px 4px rgb(10 108 255 / .45), 0 -40px 40px rgb(10 108 255 / .08); }
.out { background: #fff; border-radius: 18px; padding: 18px 20px 8px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 30px 80px -20px rgb(0 30 80 / .2); }
.out-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tally b { font-variant-numeric: tabular-nums; color: var(--ok); margin-left: 6px; }
.tally .warn-n { color: var(--warn); }
.ok-n::after { content: "6"; }
.warn-n::after { content: "1"; }
.out-list { list-style: none; margin: 0; padding: 0; }
.out-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; font-size: 14px; border-bottom: 1px solid #f0f0f3; }
.out-list li:last-child { border-bottom: 0; }
.out-list .ic { width: 18px; height: 18px; color: var(--ok); }
.out-list li.warn .ic, .out-list li.warn em { color: var(--warn); }
.out-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-list em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap-1, .cap-2 { opacity: 0; }

/* 공통 머리 */
section.cost, section.check, section.result, section.privacy, section.pilot { padding: 160px 22px; }
.head { max-width: 1040px; margin: 0 auto; text-align: center; }
.head > p { margin: 24px auto 0; max-width: 32em; font-size: clamp(18px, 2vw, 22px); color: var(--muted); letter-spacing: -0.015em; }

/* 검산 타일 */
.check { background: var(--panel); }
.bento { max-width: 1040px; margin: 72px auto 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tile { background: #fff; border-radius: 28px; padding: 40px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.tile h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.2; }
.tile-label { font-size: 15px; font-weight: 600; color: var(--muted); }
.tile-calc { grid-column: span 6; }
.calc { margin-top: 28px; font-size: clamp(34px, 6.4vw, 84px); font-weight: 750; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.calc i { font-style: normal; color: #c7c7cc; font-weight: 400; }
.calc b { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile-code, .tile-sum { grid-column: span 3; }
.code { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 24px; font-size: 17px; font-weight: 600; }
.code span { padding: 8px 14px; border-radius: 12px; background: var(--panel); }
.code .ic { color: var(--accent); width: 22px; height: 22px; }
.tile-human { grid-column: span 6; background: var(--dark); color: #f5f5f7; }
.tile-human .tile-label, .tile-human > p:last-child { color: #a1a1a6; }
.tile-human > p:last-child { font-size: 18px; max-width: 34em; }

/* 결과 표 */
.table-card { max-width: 1040px; margin: 64px auto 0; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 30px 80px -30px rgb(0 30 80 / .2); }
.table-scroll { overflow-x: auto; }
.res { width: 100%; border-collapse: collapse; font-size: 15px; white-space: nowrap; }
.res th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 16px 22px; border-bottom: 1px solid var(--line); }
.res th.n { text-align: right; }
.res td { padding: 18px 22px; border-bottom: 1px solid #f0f0f3; }
.res tbody tr:last-child td { border-bottom: 0; }
.res tr.review td { background: #fff7ec; }
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.badge.ok { background: #e6f6ee; color: var(--ok); }
.badge.warn { background: #fdebd6; color: var(--warn); }
.table-note { display: flex; align-items: center; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.table-note .ic { color: var(--warn); width: 18px; height: 18px; flex: none; }

/* 보안 */
.lock { width: 56px; height: 56px; color: var(--ink); display: block; margin: 0 auto 20px; }
.facts { max-width: 1040px; margin: 72px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 1px solid var(--line); padding-top: 40px; }
.facts h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
.facts p { margin-top: 10px; font-size: 17px; color: var(--muted); }

/* 파일럿 */
.pilot { text-align: center; background: linear-gradient(180deg, var(--bg), #eef4ff); }
.pilot h2 { font-size: clamp(40px, 7vw, 88px); }
.pilot p { margin: 28px auto 40px; max-width: 30em; font-size: clamp(18px, 2vw, 22px); color: var(--muted); }

.foot { background: var(--panel); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.foot-inner { max-width: 1040px; margin: 0 auto; padding: 24px 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.brand.small { font-size: 14px; }
.biz { flex-basis: 100%; order: 3; line-height: 1.7; }
.biz a { color: inherit; }
.brand.small .mark { width: 18px; height: 18px; border-radius: 6px; }

/* 움직임: 스크롤 위치에 묶는다. 지원 안 하거나 동작 줄이기면 완성 상태로 보인다 */
@media (prefers-reduced-motion: no-preference) {
  .fade { animation: fade 1.1s var(--ease) both; animation-delay: var(--d, 0ms); }
  /* 가장 큰 글씨는 투명에서 시작하지 않는다(LCP 지연 방지) */
  .rise { animation: rise 1.1s var(--ease) both; }
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
  .reveal.in { opacity: 1; transform: none; }

  @supports (animation-timeline: view()) {
    .hero-visual .screen { animation: tilt linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; transform-origin: center top; }

    .beam span { animation: beam linear both; animation-timeline: --scan; animation-range: contain 6% contain 80%; }
    .scan tbody tr td { animation: rowOk linear both; animation-timeline: --scan; animation-range: contain calc(8% + var(--i) * 10%) contain calc(11% + var(--i) * 10%); }
    .scan tbody tr.warn td { animation-name: rowWarn; }
    .out-list li { animation: slot linear both; animation-timeline: --scan; animation-range: contain calc(9% + var(--i) * 10%) contain calc(13% + var(--i) * 10%); }
    .ok-n { animation: okCount linear both; animation-timeline: --scan; animation-range: contain 8% contain 80%; counter-reset: ok var(--ok-n); }
    .ok-n::after { content: counter(ok); }
    .warn-n { animation: warnCount linear both; animation-timeline: --scan; animation-range: contain 48% contain 52%; counter-reset: wn var(--warn-n); }
    .warn-n::after { content: counter(wn); }
    .cap-1 { opacity: 1; animation: capOut linear both; animation-timeline: --scan; animation-range: contain 28% contain 34%; }
    .cap-2 { animation: capInOut linear both; animation-timeline: --scan; animation-range: contain 28% contain 66%; }
    .cap-3 { animation: capIn linear both; animation-timeline: --scan; animation-range: contain 60% contain 66%; }
  }
}
@keyframes fade { from { opacity: 0; transform: translateY(24px); } }
@keyframes rise { from { transform: translateY(24px); } }
@keyframes tilt { from { transform: rotateX(24deg) scale(.88); } }
@keyframes beam { from { top: 0; } to { top: 100%; } }
@keyframes rowOk { from { background: transparent; } to { background: #eaf6ef; } }
@keyframes rowWarn { from { background: transparent; } to { background: #fff1de; } }
@keyframes slot { from { opacity: 0; transform: translateY(10px); } }
@keyframes okCount { from { --ok-n: 0; } to { --ok-n: 6; } }
@keyframes warnCount { from { --warn-n: 0; } to { --warn-n: 1; } }
@keyframes capOut { to { opacity: 0; transform: translateY(-20px); } }
@keyframes capIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; } }
@keyframes capInOut { 0% { opacity: 0; transform: translateY(20px); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-20px); } }

/* 장면을 지원하지 않거나 동작 줄이기면 마지막 문구와 완성된 표만 보인다 */
@supports not (animation-timeline: view()) { .cap-1, .cap-2, .beam { display: none; } .scan { height: auto; } .scan-sticky { position: static; height: auto; padding: 120px 22px; } }
@media (prefers-reduced-motion: reduce) { .cap-1, .cap-2, .beam { display: none; } .scan { height: auto; } .scan-sticky { position: static; height: auto; padding: 120px 22px; } }

/* 태블릿 */
@media (max-width: 960px) {
  .scan-stage { grid-template-columns: 1fr; max-width: 640px; }
  .out { margin: -60px 18px 0; position: relative; }
  .out-list li:nth-child(n+5) { display: none; }
  .facts { grid-template-columns: 1fr; gap: 28px; }
}
/* 휴대폰 */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .login { margin-left: auto; }
  .nav-inner { justify-content: space-between; }
  .hero { padding-top: 64px; }
  .hero-visual { margin-top: 52px; }
  .src { font-size: 12px; }
  .src th, .src td { padding: 10px; }
  .hero .src th:nth-child(3), .hero .src td:nth-child(3), .hero .src th:nth-child(4), .hero .src td:nth-child(4), .hero .src th:nth-child(5), .hero .src td:nth-child(5), .hero .src th:nth-child(6), .hero .src td:nth-child(6) { display: none; }
  .scan .src th:nth-child(4), .scan .src td:nth-child(4) { display: none; }
  .scan-sticky { gap: 24px; padding: 20px 16px; }
  section.cost, section.check, section.result, section.privacy, section.pilot { padding: 112px 20px; }
  .bento { grid-template-columns: 1fr; gap: 14px; margin-top: 48px; }
  .tile-calc, .tile-code, .tile-sum, .tile-human { grid-column: auto; }
  .tile { padding: 28px; border-radius: 24px; }
  .table-card { margin-top: 44px; border-radius: 20px; }
}
.nw { white-space: nowrap; }

/* 부드러운 이동 */
html { scroll-padding-top: 52px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 불편함 장면: 대표가 잃는 것 */
.pain { background: var(--dark); color: #f5f5f7; height: 700vh; position: relative; view-timeline-name: --pain; }
.pain-sticky { position: sticky; top: 52px; height: calc(100dvh - 52px); display: grid; place-items: center; overflow: hidden; padding: 0 22px; }
.frame { grid-area: 1 / 1; max-width: 1040px; width: 100%; text-align: center; font-size: clamp(34px, 6vw, 80px); font-weight: 780; letter-spacing: -0.045em; line-height: 1.14; z-index: 1; }
.red { color: #ff6b5e; }
.pile { position: absolute; inset: -4% -2%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px 14px; padding: 4vh 2vw; }
.bar { height: 10px; border-radius: 5px; background: #2a2a2e; }
.bar.hot { background: #3a3a40; }

.lead { font-size: clamp(22px, 3vw, 34px); font-weight: 650; color: #a1a1a6; letter-spacing: -0.02em; }
.count { margin-top: 8px; font-size: clamp(64px, 14vw, 180px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
.count b { font-variant-numeric: tabular-nums; }
.people { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(6px, 1.4vw, 16px); margin: 36px auto 30px; max-width: 640px; }
.person { width: clamp(32px, 6vw, 60px); height: clamp(32px, 6vw, 60px); fill: #ff6b5e; }
.sub { font-size: clamp(24px, 3.6vw, 44px); }
.sub b { color: #ff6b5e; font-weight: inherit; }
.fine { margin-top: 16px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #86868b; }

.money { margin: 40px auto 0; max-width: 680px; display: grid; grid-template-columns: auto 1fr; gap: 18px 20px; align-items: center; text-align: left; }
.m-label { font-size: clamp(16px, 2vw, 22px); font-weight: 650; letter-spacing: -0.02em; color: #c7c7cc; }
.m-track { height: clamp(22px, 3vw, 34px); border-radius: 999px; background: #1c1c1f; overflow: hidden; }
.m-bar { display: block; height: 100%; border-radius: 999px; transform-origin: left; }
.m-rev { width: 100%; background: linear-gradient(90deg, #5aa2ff, #3fe0e6); transform: scaleX(.62); }
.m-cost { width: 38%; background: #ff6b5e; }
.m-tail { margin-top: 32px; font-size: clamp(26px, 4vw, 52px); color: #ff6b5e; }

.typo-lead, .typo-tail { font-size: clamp(30px, 5vw, 64px); }
.typo-tail { color: #ff6b5e; margin-top: 28px; }
.typo { position: relative; margin: 36px auto 0; max-width: 760px; text-align: left; background: #fff; color: var(--ink); border-radius: 22px; padding: 6px 0; box-shadow: 0 40px 100px -30px rgb(0 0 0 / .9); font-size: clamp(14px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.typo-row { display: grid; grid-template-columns: 1.6fr 1fr .7fr 1.2fr; gap: 12px; padding: 18px 28px; align-items: center; }
.typo-head { font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); padding-block: 12px; }
.typo .n { text-align: right; font-variant-numeric: tabular-nums; }
.swap { display: grid; justify-items: end; position: relative; }
.swap b { grid-area: 1 / 1; font-weight: inherit; }
.d-new { color: #e5372a; opacity: 0; }
.caret { position: absolute; right: -6px; top: 10%; width: 2px; height: 80%; background: var(--accent); opacity: 0; }
.diff { position: absolute; right: 18px; top: -22px; padding: 8px 16px; border-radius: 999px; background: #e5372a; color: #fff; font-size: clamp(16px, 2vw, 22px); font-weight: 750; font-variant-numeric: tabular-nums; opacity: 0; box-shadow: 0 12px 30px -8px rgb(229 55 42 / .6); }

.f5 { display: grid; gap: .35em; }
.hit { font-size: clamp(30px, 5.2vw, 68px); }
.hit.punch { margin-top: .5em; font-size: clamp(38px, 7vw, 92px); background: linear-gradient(90deg, #5aa2ff, #3fe0e6); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .frame { opacity: 0; animation: frame linear both; animation-timeline: --pain; }
    .f1 { opacity: 1; animation-name: frameOut; animation-range: contain 0% contain 15%; }
    .f2 { animation-range: contain 13% contain 31%; }
    .f3 { animation-range: contain 29% contain 47%; }
    .f4 { animation-range: contain 45% contain 72%; }
    .f5 { animation-name: frameIn; animation-range: contain 70% contain 74%; }

    .bar { opacity: 0; animation: barIn linear both; animation-timeline: --pain; animation-range: contain calc(1% + var(--i) * .1%) contain calc(2% + var(--i) * .1%); }
    .pile { animation: pileDim linear both; animation-timeline: --pain; animation-range: contain 12% contain 20%; }

    .person { animation: personOn linear both; animation-timeline: --pain; animation-range: contain calc(16% + var(--i) * 1.1%) contain calc(17% + var(--i) * 1.1%); }
    .f2 .sub, .f2 .fine { animation: inUp linear both; animation-timeline: --pain; animation-range: contain 25% contain 27%; }
    .m-rev { animation: shrink linear both; animation-timeline: --pain; animation-range: contain 33% contain 42%; }
    .m-tail { animation: inUp linear both; animation-timeline: --pain; animation-range: contain 41% contain 43%; }

    .caret { animation: caret linear both; animation-timeline: --pain; animation-range: contain 48% contain 56%; }
    .typo-row .swap:nth-child(2) .d-old { animation: out linear both; animation-timeline: --pain; animation-range: contain 50% contain 53%; }
    .typo-row .swap:nth-child(2) .d-new { animation: inRed linear both; animation-timeline: --pain; animation-range: contain 50% contain 53%; }
    .typo-row .swap:nth-child(4) .d-old { animation: out linear both; animation-timeline: --pain; animation-range: contain 55% contain 58%; }
    .typo-row .swap:nth-child(4) .d-new { animation: inRed linear both; animation-timeline: --pain; animation-range: contain 55% contain 58%; }
    .diff { animation: pop linear both; animation-timeline: --pain; animation-range: contain 59% contain 62%; }
    .typo-tail { opacity: 0; animation: inUp linear both; animation-timeline: --pain; animation-range: contain 62% contain 65%; }

    .hit { opacity: 0; animation: slam linear both; animation-timeline: --pain; }
    .h1 { animation-range: contain 74% contain 77%; }
    .h2 { animation-range: contain 79% contain 82%; }
    .h3 { animation-range: contain 84% contain 87%; }
    .hit.punch { animation-name: inUp; animation-range: contain 91% contain 95%; }
  }
}
@keyframes frame { 0% { opacity: 0; transform: translateY(50px) scale(.96); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-50px) scale(1.02); } }
@keyframes frameOut { 0%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-50px); } }
@keyframes frameIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes barIn { from { opacity: 0; transform: translateY(14px) scaleX(.4); } to { opacity: 1; transform: none; } }
@keyframes pileDim { to { opacity: .22; filter: blur(3px); } }
@keyframes personOn { from { fill: #2a2a2e; transform: translateY(10px); } to { fill: #ff6b5e; transform: none; } }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(.62); } }
@keyframes caret { 0%, 20% { opacity: 0; } 25%, 45% { opacity: 1; } 50% { opacity: 0; } 55%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes inRed { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 70% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes inUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; } }
@keyframes slam { 0% { opacity: 0; transform: scale(1.5); filter: blur(10px); } 100% { opacity: 1; transform: none; filter: none; } }

/* 장면을 못 쓰면 순서대로 쌓아서 보인다 */
@supports not (animation-timeline: view()) { .pain { height: auto; } .pain-sticky { position: static; height: auto; display: grid; gap: 96px; padding: 140px 22px; } .frame { grid-area: auto; } .pile { display: none; } .d-old { visibility: hidden; } .d-new { opacity: 1; } .diff { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pain { height: auto; } .pain-sticky { position: static; height: auto; display: grid; gap: 96px; padding: 140px 22px; } .frame { grid-area: auto; } .pile { display: none; } .d-old { visibility: hidden; } .d-new { opacity: 1; } .diff { opacity: 1; } }

@media (max-width: 720px) {
  .typo-row { grid-template-columns: 1.3fr 1fr 1.2fr; padding: 14px 18px; gap: 8px; }
  .typo-row > :nth-child(3) { display: none; }
  .typo-row > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .diff { right: 10px; top: -20px; }
  .bar { height: 7px; }
  .money { gap: 14px 14px; }
}

/* 비용 계산 */
.cost { background: var(--panel); }
.calc-card { max-width: 1040px; margin: 64px auto 0; background: #fff; border-radius: 28px; padding: 40px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 30px 80px -30px rgb(0 30 80 / .2); }
.calc-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.calc-in label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.field { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 18px; border-radius: 14px; background: var(--panel); border: 1px solid transparent; transition: border-color .2s; }
.field:focus-within { border-color: var(--accent); background: #fff; }
.field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 22px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.field em { font-style: normal; font-size: 17px; color: var(--muted); }
.calc-out { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.calc-out p { font-size: 15px; font-weight: 600; color: var(--muted); }
.calc-out b { display: block; margin-top: 6px; font-size: clamp(30px, 4vw, 44px); font-weight: 750; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.calc-out span { font-size: 15px; color: var(--muted); }
.calc-out .year b { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-note { margin-top: 28px; display: flex; gap: 8px; font-size: 14px; color: var(--muted); }
.calc-note .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }

/* 데이터 구간은 어둡게 */
.privacy { background: var(--dark); color: #f5f5f7; }
.privacy .lock { color: #f5f5f7; }
.privacy .head > p, .privacy .facts p { color: #a1a1a6; }
.privacy .facts { border-top-color: #2a2a2e; }

/* 무료 진단 */
.steps { list-style: none; margin: 40px auto; padding: 0; max-width: 34em; display: grid; gap: 14px; text-align: left; font-size: clamp(17px, 2vw, 20px); }
.steps li { display: flex; gap: 14px; align-items: baseline; }
.steps b { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; }

@media (max-width: 720px) {
  .calc-card { padding: 24px; border-radius: 24px; margin-top: 44px; }
  .calc-in, .calc-out { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .calc-out { margin-top: 24px; padding-top: 24px; }
}

/* 기술력: 망가진 문서들이 들어와 깨끗한 행으로 모인다 */
.tech { height: 520vh; position: relative; view-timeline-name: --tech; background: linear-gradient(180deg, var(--bg), #eef1f6); }
.tech-sticky { position: sticky; top: 52px; height: calc(100dvh - 52px); display: grid; grid-template-rows: auto 1fr auto; align-content: center; gap: 28px; padding: 32px 22px; overflow: hidden; }
.tech-captions { position: relative; height: 2.3em; font-size: clamp(34px, 6vw, 72px); text-align: center; }
.tcap { position: absolute; inset: 0; font-size: inherit; display: grid; place-items: center; }
.tech-stage { position: relative; width: 100%; max-width: 760px; height: min(52vh, 440px); margin: 0 auto; }
.doc { --s: 1.15; position: absolute; left: 50%; top: 50%; width: min(70vw, 400px); transform: translate(calc(-50% + var(--x) * var(--s)), calc(-50% + var(--y) * var(--s))) rotate(var(--r)); margin: 0; padding: 14px 16px 10px; background: #fff; border-radius: 10px; box-shadow: 0 30px 60px -24px rgb(0 20 60 / .35), 0 0 0 1px rgb(0 0 0 / .05); font-size: 13px; overflow: hidden; }
.doc figcaption { position: absolute; right: 10px; top: 8px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.doc td { padding: 7px 4px; border-bottom: 1px solid #ececf0; white-space: nowrap; }
.doc td:first-child { max-width: 0; width: 55%; overflow: hidden; text-overflow: ellipsis; }
.doc::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fax { --x: -120px; --y: -90px; --r: -4deg; background: #f1f1ee; filter: grayscale(1) contrast(1.9) blur(.6px); }
.fax::after { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, transparent 0 37px, rgb(0 0 0 / .07) 37px 38px); }
.photo { --x: 115px; --y: -70px; --r: 7deg; transform: translate(calc(-50% + var(--x) * var(--s)), calc(-50% + var(--y) * var(--s))) perspective(700px) rotateX(16deg) rotate(var(--r)); }
.photo::after { background: linear-gradient(115deg, rgb(255 255 255 / .55) 0 18%, transparent 30%), linear-gradient(0deg, rgb(255 210 140 / .18), transparent); }
.crumple { --x: -105px; --y: 95px; --r: 5deg; filter: url(#crumple); }
.crumple::after { background: linear-gradient(32deg, transparent 46%, rgb(0 0 0 / .14) 49%, transparent 52%), linear-gradient(-58deg, transparent 38%, rgb(0 0 0 / .1) 41%, transparent 44%), radial-gradient(circle at 70% 30%, rgb(0 0 0 / .08), transparent 40%); }
.dark { --x: 110px; --y: 100px; --r: -6deg; }
.dark::after { background: radial-gradient(120% 90% at 100% 100%, rgb(10 10 30 / .62), transparent 62%); }
.clean { position: absolute; left: 50%; top: 50%; width: min(86vw, 440px); transform: translate(-50%, -50%); background: #fff; border-radius: 18px; padding: 16px 20px 6px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 40px 90px -24px rgb(0 40 120 / .35); z-index: 3; opacity: 0; }
.tally-s b { color: var(--ok); margin-left: 6px; } .tally-s b.w { color: var(--warn); }
.tech-note { text-align: center; color: var(--muted); font-size: 15px; max-width: 30em; margin: 0 auto; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .doc { opacity: 0; animation: docIn linear both, docOut linear both; animation-timeline: --tech, --tech; animation-range: contain calc(4% + var(--i) * 18%) contain calc(12% + var(--i) * 18%), contain 78% contain 86%; }
    .tcap { opacity: 0; animation: capInOut linear both; animation-timeline: --tech; }
    .tc1 { animation-range: contain 2% contain 22%; }
    .tc2 { animation-range: contain 20% contain 40%; }
    .tc3 { animation-range: contain 38% contain 58%; }
    .tc4 { animation-range: contain 56% contain 76%; }
    .tc5 { animation-name: capIn; animation-range: contain 76% contain 82%; }
    .clean { animation: cleanIn linear both; animation-timeline: --tech; animation-range: contain 80% contain 88%; }
    .tech-note { animation: capIn linear both; animation-timeline: --tech; animation-range: contain 86% contain 90%; }
  }
}
@keyframes docIn { from { opacity: 0; margin-top: 60px; } to { opacity: 1; margin-top: 0; } }
@keyframes docOut { to { opacity: 0; transform: translate(-50%, -50%) scale(.7); filter: none; } }
@keyframes cleanIn { from { opacity: 0; transform: translate(-50%, -40%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%); } }
@supports not (animation-timeline: view()) { .tech { height: auto; } .tech-sticky { position: static; height: auto; padding: 120px 22px; } .tcap:not(.tc5) { display: none; } .tcap { position: static; } .tech-captions { height: auto; } .doc { display: none; } .clean, .tech-note { opacity: 1; } .tech-stage { height: 300px; } }
/* 정산 자동화 흐름 */
.flow { padding: 160px 22px; background: var(--dark); color: #f5f5f7; }
.flow .head > p { color: #a1a1a6; }
.pipe { list-style: none; max-width: 1040px; margin: 72px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.pipe li { display: flex; gap: 14px; background: #161618; border: 1px solid #26262a; border-radius: 22px; padding: 26px; }
.pipe b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 15px; }
.pipe h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.pipe p { margin-top: 6px; font-size: 15px; color: #a1a1a6; }
.pipe code { display: inline-block; margin-top: 14px; padding: 6px 10px; border-radius: 8px; background: #0b0b0d; color: #8fd0ff; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.flow-note { max-width: 1040px; margin: 36px auto 0; font-size: 13px; color: #86868b; }
@media (max-width: 960px) { .pipe { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .flow { padding: 112px 20px; } .pipe { margin-top: 48px; gap: 12px; } .pipe li { padding: 20px; } .tech-stage { height: 46vh; } .doc { --s: .42; font-size: 12px; } }

/* 계산기: 지금과 Owl 견주기 */
.calc-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rate output { font-size: 22px; font-weight: 700; color: var(--accent); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.rate input { flex: 1; accent-color: var(--accent); height: 28px; }
.calc-out { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.vs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; }
.vs p { font-size: 15px; font-weight: 600; color: var(--muted); }
.vs span { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }
.vs-track { height: 22px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.vs-bar { display: block; height: 100%; border-radius: 999px; transition: width .9s var(--ease); }
.vs-bar.now { width: 100%; background: #ff6b5e; }
.vs-bar.owl { width: 20%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.save { display: grid; gap: 2px; }
.save p { font-size: 17px; font-weight: 600; color: var(--muted); }
.save b { margin: 0; font-size: clamp(44px, 7vw, 76px); background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.save-sub { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.save-sub p { font-size: 17px; color: var(--muted); }
.save-sub b { display: inline; margin: 0; font-size: inherit; color: var(--ink); font-weight: 700; }
.calc-out .year b { background: none; }

/* 이중 검토 칸 */
.sum { margin-top: 18px; display: grid; gap: 2px; font-size: 15px; font-variant-numeric: tabular-nums; }
.sum p { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.sum span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum b { font-weight: 600; }
.sum-total { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 12px !important; }
.sum-total b, .sum-total span { color: var(--ink); font-weight: 750; }
.sum-doc { align-items: center; justify-content: flex-start !important; color: var(--ok); }
.sum-doc b { margin-left: auto; }
.sum-doc span, .sum-doc b { color: var(--ok); font-weight: 750; }
.sum-doc .ic { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .sum p { opacity: 0; transform: translateX(-16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .tile-sum.in .sum p { opacity: 1; transform: none; }
  .tile-sum.in .sum p:nth-child(2) { transition-delay: .12s; } .tile-sum.in .sum p:nth-child(3) { transition-delay: .24s; }
  .tile-sum.in .sum p:nth-child(4) { transition-delay: .36s; } .tile-sum.in .sum p:nth-child(5) { transition-delay: .6s; }
  .tile-sum.in .sum p:nth-child(6) { transition-delay: .9s; }
}
@media (max-width: 720px) { .calc-in { grid-template-columns: minmax(0, 1fr); } .vs { gap: 10px 10px; } .vs span { font-size: 15px; } }