*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 18px; scroll-padding-bottom: calc(var(--header-h) + 18px); }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, table, figcaption { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3, h4 { font-family: var(--font-body); color: var(--ink); word-break: keep-all; text-wrap: wrap; }
h1 { font-size: var(--t-display); font-weight: 900; letter-spacing: var(--ls-display); line-height: var(--lh-display); }

h2 { font-size: var(--t-h2-mf); font-weight: 800; letter-spacing: var(--ls-h2-mf); line-height: var(--lh-h2-mf); }
h2.is-f { font-size: var(--t-h2-f); letter-spacing: var(--ls-h2-f); line-height: var(--lh-h2-f); }
h3 { font-size: var(--t-h3); font-weight: 800; letter-spacing: var(--ls-h3); line-height: var(--lh-h3); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main { overflow-x: clip; }
.band { position: relative; padding: var(--band-y) var(--gutter); }

.band > .wrap { width: 100%; max-width: var(--page); margin: 0 auto; }
.band-white { background: var(--white); }
.band-deep {
  background: linear-gradient(152deg, var(--panel-deep) 6%, var(--panel-deep-2) 94%);
  color: var(--on-dark-78);
}
.band-deep h2, .band-deep h3 { color: var(--on-dark); }

.band-row { padding-block: var(--band-y-row); }
.band-row.is-open { padding-top: var(--band-y); }
.band-tight { padding-block: clamp(30px, 3.2vw, 48px); }

.carve-bl { border-bottom-left-radius: var(--r-carve); }
.carve-tr { border-top-right-radius: var(--r-carve); }
.carve-tl { border-top-left-radius: var(--r-carve); }

.sec-head h2 em { font-style: normal; color: var(--blue-2); }

.sec-head { margin-bottom: clamp(40px, 4.6vw, 68px); }

.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .32s var(--ease), transform .32s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-stagger] { opacity: 1; transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity .34s var(--ease) var(--d, 0ms), transform .34s var(--ease) var(--d, 0ms); }

.js .case-list[data-stagger] > * { transform: translate(-12px, 6px); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-settled > * { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-stagger] > *, .js .case-list[data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .float-dock, .float-dock .float-sym, .float-btn, .float-btn:hover, .float-top { transition: none; transform: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: var(--r-card); font-weight: 700; font-size: var(--t-body);
  letter-spacing: -.01em; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--sh-hard); }
.btn-primary:hover { background: var(--blue-2); transform: translateY(-2px); box-shadow: var(--sh-hard-up); }

.btn-on-dark { background: var(--white); color: var(--ink); box-shadow: 3px 3px 0 rgba(6, 14, 28, .55); }
.btn-on-dark:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(6, 14, 28, .55); }

.btn-lg { padding: 19px 32px; }
.btn-sm { padding: 11px 18px; }

.hdr {
  --hdr-ink: #101B2B;
  --hdr-ink-2: #5B6B80;
  --hdr-line: rgba(16, 27, 43, .10);
  --hdr-line-2: rgba(16, 27, 43, .18);
  --hdr-wash: rgba(16, 27, 43, .05);
  --hdr-surface: rgba(255, 255, 255, .88);
  --hdr-accent: #2E7CF0;
  --hdr-accent-2: #1D6FE0;
  --hdr-on-accent: #FFFFFF;
  --hdr-radius: 10px;
  --hdr-btn-h: 42px;
  --hdr-h: 68px;
  --hdr-gutter: 24px;
  --hdr-page: 1280px;
  --hdr-ease: cubic-bezier(.4, 0, .2, 1);

  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  box-sizing: border-box;
  height: calc(var(--hdr-h) + env(safe-area-inset-bottom));
  padding: 0 var(--hdr-gutter) env(safe-area-inset-bottom);
  color: var(--hdr-ink);
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.5;
  background: var(--hdr-surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--hdr-line);

  box-shadow: 0 -1px 2px rgba(16, 27, 43, .04), 0 -10px 30px rgba(16, 27, 43, .07);
  transition: transform .3s var(--hdr-ease), opacity .3s var(--hdr-ease);
}

.hdr *, .hdr *::before, .hdr *::after { box-sizing: border-box; }
.hdr img { display: block; max-width: 100%; }
.hdr a { text-decoration: none; color: inherit; }
.hdr :focus-visible { outline: 2px solid var(--hdr-accent); outline-offset: 3px; border-radius: var(--hdr-radius); }

.hdr.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.hdr .hdr-wrap { max-width: var(--hdr-page); margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hdr-logo { display: flex; align-items: center; border-radius: var(--hdr-radius); }
.hdr-logo img { height: 30px; width: auto; }
.hdr-cta { display: flex; align-items: center; gap: 10px; }

.hdr-tel {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--hdr-btn-h); padding: 0 10px;
  border-radius: var(--hdr-radius);
  color: var(--hdr-ink); white-space: nowrap;
  transition: background .18s var(--hdr-ease), color .18s var(--hdr-ease);
}
.hdr-tel:hover { background: var(--hdr-wash); }
.hdr-tel svg { width: 16px; height: 16px; flex: none; fill: var(--hdr-ink-2); transition: fill .18s var(--hdr-ease); }
.hdr-tel:hover svg { fill: var(--hdr-ink); }
.hdr-tel .num { font-size: var(--t-micro, 16px); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.hdr .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--hdr-btn-h); padding: 0 16px;
  border-radius: var(--hdr-radius);
  font-size: var(--t-micro, 16px); font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer;
  transition: background .18s var(--hdr-ease), border-color .18s var(--hdr-ease), box-shadow .18s var(--hdr-ease);
}

.hdr .btn-store {
  background: #FFFFFF; color: var(--hdr-ink);
  border: 1px solid var(--hdr-line-2);
  box-shadow: 0 1px 2px rgba(16, 27, 43, .05);
}
.hdr .btn-store:hover { background: var(--hdr-wash); transform: none; }
.hdr .btn-store img { width: 18px; height: 18px; flex: none; }

.hdr .btn-primary {
  background: var(--hdr-accent); color: var(--hdr-on-accent);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(16, 27, 43, .10);
}
.hdr .btn-primary:hover { background: var(--hdr-accent-2); transform: none; box-shadow: 0 2px 8px rgba(16, 27, 43, .16); }

@media (max-width: 720px) {
  .hdr { --hdr-h: 60px; --hdr-btn-h: 40px; --hdr-gutter: 14px; }
  .hdr .hdr-wrap { gap: 10px; }
  .hdr-logo img { height: 24px; }
  .hdr-cta { gap: 7px; }
  .hdr-tel { padding: 0 6px; gap: 6px; }
  .hdr .btn { padding: 0 13px; }
  .hdr .btn-store { padding: 0 5px; }
  /* 글자가 빠지고 아이콘만 남으므로 심볼을 키워 버튼 안을 채운다 (bike 와 동일) */
  .hdr .btn-store img { width: 34px; height: 34px; }
  .hdr .btn-store .label { display: none; }
}

@media (max-width: 420px) {
  .hdr-tel { padding: 0 8px; }
  .hdr-tel .num { display: none; }
  .hdr-tel svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr .btn, .hdr-tel, .hdr-tel svg { transition: none; }
}

#hero {
  z-index: 1;

  padding-top: clamp(52px, 5.4vw, 84px);
  padding-bottom: var(--hero-pb);
  --hero-pb: clamp(36px, 3.4vw, 48px);
}

#hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--on-dark-08) 1px, transparent 1px), linear-gradient(90deg, var(--on-dark-08) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 30% 6%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 90% at 30% 6%, #000 18%, transparent 76%);
  opacity: .55;
}
#hero::after {
  content: ""; position: absolute; right: -180px; top: -260px; width: 780px; height: 780px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--blue-glow), rgba(46, 124, 240, 0));
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(26px, 3.2vw, 48px); align-items: end;
}
.hero-grid > * { min-width: 0; }
#hero h1 { color: var(--on-dark); }
#hero h1 em { font-style: normal; color: var(--blue-on-dark); }
.hero-lead { margin-top: 22px; font-size: var(--t-lead); font-weight: 400; line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--on-dark-78); max-width: 26em; }
.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }

.hero-art {
  align-self: end; width: min(100%, 420px); margin-left: auto; height: auto;
  margin-bottom: calc(-1 * var(--hero-pb) - clamp(16px, 2.6vw, 44px));
}

.hero-spec { margin-top: clamp(20px, 2.2vw, 28px); display: flex; flex-wrap: wrap; gap: 9px 22px; }
.hero-spec li { display: flex; align-items: center; gap: 8px; }
.hero-spec svg { width: 17px; height: 17px; flex: none; stroke: var(--blue-on-dark); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-spec b { font-size: var(--t-micro); font-weight: 400; line-height: 1.5; color: var(--on-dark-56); }
.hero-spec b em { font-style: normal; font-weight: 700; color: var(--on-dark-78); }

.cases { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; }

.cases-head {
  display: flex; flex-direction: column;
  align-self: start; position: sticky; top: clamp(28px, 4vw, 56px);
}
.cases-head h2 { margin-bottom: 24px; }

.cases-art { width: min(clamp(300px, 27vw, 400px), calc((100vh - 280px) * 0.75)); height: auto; }

.case-list { display: grid; gap: 18px; align-content: start; }

.case-item {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line-soft);
}

.case-item, .case-item::after { transition: background-color .32s var(--ease), box-shadow .32s var(--ease); }

.case-item.is-lead { background: var(--white); box-shadow: var(--sh-1); }

.case-item:nth-child(2) { margin-left: 4%; }
.case-item:nth-child(3) { margin-left: 8%; }
.case-item:nth-child(4) { margin-left: 12%; }

.case-item::after {
  content: ""; position: absolute; left: -9px; bottom: 26px;
  width: 16px; height: 16px; background: var(--surface);
  border-left: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transform: rotate(45deg);
}
.case-item.is-lead::after { background: var(--white); }
.case-t { margin-top: 10px; font-size: var(--t-h3); font-weight: 800; letter-spacing: var(--ls-h3); line-height: var(--lh-h3); color: var(--ink); }
.case-no { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-mono); color: var(--ink-3); }
.case-say { margin-top: 12px; font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); color: var(--ink-2); }
.case-say b { color: var(--ink); font-weight: 800; }

.pipe {
  --pipe-gap: clamp(20px, 2.6vw, 44px);
  display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: var(--pipe-gap);
  border-top: 1px solid var(--line-2);
}
.pipe-step { position: relative; padding-top: 28px; display: flex; flex-direction: column; }

.pipe-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 52px; height: 4px; background: var(--blue); z-index: 1; }

.pipe-step + .pipe-step::after {
  content: ""; position: absolute; top: 62px; left: calc(-1 * var(--pipe-gap));
  width: var(--pipe-gap); height: 1px; background: var(--line-2);
}
.pipe-num { font-size: var(--t-h2-f); font-weight: 800; line-height: 1; letter-spacing: var(--ls-h2-f); color: var(--surface-2); }
.pipe-step h3 { margin-top: 18px; }
.pipe-step > p:not(.pipe-num) { margin-top: 14px; font-size: var(--t-body); font-weight: 400; color: var(--ink-2); }
.pipe-art { position: relative; margin-top: auto; padding-top: 26px; }

.zoom {
  position: absolute; right: -12px; bottom: -16px; width: 62%; aspect-ratio: 4 / 3;
  border-radius: var(--r-card); border: 2px solid var(--white);
  box-shadow: var(--sh-2);
  background-repeat: no-repeat; background-color: var(--white);
  overflow: hidden;
}

.zoom i {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  background: rgba(19, 36, 65, .84); color: var(--on-dark);
  font-family: var(--font-body); font-size: var(--t-micro); font-style: normal; font-weight: 600;
  text-align: center;
}
.zoom-bl { background-image: url("assets/img/feature-bl.webp"); background-size: 250%; background-position: 72% 26%; }
.zoom-path { background-image: url("assets/img/feature-path.webp"); background-size: 320%; background-position: 32% 46%; }

.pipe-shot { position: relative; display: block; height: 190px; border-radius: var(--r-card); overflow: hidden; background: var(--panel-deep); box-shadow: var(--sh-1); }
.pipe-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 26%; }
.pipe-shot.is-path img { object-position: 42% 42%; }

.pipe-step.is-final {
  background: var(--blue-tint);
  margin-right: calc(-1 * var(--bleed)); padding: 32px 34px 34px 32px;
  border-radius: var(--r-card) 0 0 var(--r-card);
}
.pipe-step.is-final::before { top: 0; left: 32px; }
.pipe-step.is-final .pipe-num { color: rgba(46, 124, 240, .22); }
.pipe-step.is-final > p:not(.pipe-num) { max-width: 26em; }

.pipe-shot.is-data { height: auto; aspect-ratio: 1700 / 673; background: var(--white); border: 1px solid rgba(46, 124, 240, .18); }
.pipe-shot.is-data img { height: auto; object-fit: contain; }

.pipe-shot .mask {
  position: absolute; left: 26.2%; top: 24.5%; width: 10.8%; height: 6%; border-radius: 3px;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pipe-shot .mask { background: var(--surface-2); }
}
.pipe-step.is-final .pipe-art { padding-right: clamp(0px, 3vw, 46px); }

#logbook { background: var(--white); }

.ledger-in { display: flex; flex-wrap: wrap; gap: clamp(26px, 3.4vw, 56px); align-items: center; justify-content: space-between; }
.ledger-say { flex: 1 1 420px; min-width: 0; }
.ledger p { font-size: var(--t-lead); font-weight: 400; line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--on-dark); max-width: 24em; }
.ledger-art { flex: 0 1 auto; width: clamp(260px, 32vw, 440px); height: auto; }

.ledger-gains { margin-top: clamp(20px, 2.4vw, 30px); display: flex; flex-wrap: wrap; gap: 12px 16px; }

.ledger-gains li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px 11px 16px; border-radius: var(--r-pill);
  background: var(--white);
  font-size: var(--t-body); font-weight: 700; color: var(--ink);
}

.ledger-gains svg {
  width: 19px; height: 19px; flex: none;
  stroke: var(--green); fill: none;
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .js .ledger .ledger-gains path { stroke-dasharray: 26; stroke-dashoffset: 26; }
  .js .ledger.is-in .ledger-gains path { animation: check-draw .55s var(--ease) forwards; }
  .js .ledger.is-in .ledger-gains li:nth-child(2) path { animation-delay: .15s; }
  .js .ledger.is-in .ledger-gains li:nth-child(3) path { animation-delay: .3s; }
}
@keyframes check-draw { to { stroke-dashoffset: 0 } }

.feat-row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(26px, 3.4vw, 56px);
  align-items: center;
}
.feat-row.alt .feat-art { order: -1; }

.feat-text { position: relative; z-index: 1; }
.feat-ghost {
  font-size: clamp(52px, 5.4vw, 80px); font-weight: 800; line-height: .84;
  letter-spacing: -.04em; color: var(--page-bg); pointer-events: none;

  margin-left: -.04em; margin-bottom: clamp(12px, 1.4vw, 18px);
}

.band:not(.band-white) > .wrap > .feat-row .feat-ghost,
.band:not(.band-white) > .wrap > .feat-pair .feat-ghost { color: var(--white); }
.feat-row h3 { font-size: var(--t-h3); }
.feat-row h3 em { font-style: normal; color: var(--blue-2); }

.feat-sum { margin-top: 14px; font-size: var(--t-body); font-weight: 400; color: var(--ink-2); }

.spec { margin-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--line); }

.spec > div { display: grid; grid-template-columns: minmax(88px, 27%) 1fr; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); }
.spec dd { margin: 0; font-size: var(--t-body); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.spec dd span { margin-left: 8px; font-weight: 400; color: var(--ink-3); }

.feat-art { position: relative; overflow: hidden; background: var(--surface-2); box-shadow: var(--sh-1); }
.feat-art img { width: 100%; height: 100%; object-fit: cover; }
.feat-row .feat-art { margin-right: calc(-1 * var(--bleed)); border-radius: var(--r-card) 0 0 var(--r-card); }
.feat-row.alt .feat-art { margin-right: 0; margin-left: calc(-1 * var(--bleed)); border-radius: 0 var(--r-card) var(--r-card) 0; }

.art-tall { aspect-ratio: 800 / 415; }
.art-tall img { object-position: center top; }

.art-low { aspect-ratio: 923 / 500; }

.art-mid { aspect-ratio: 828 / 368; }

.feat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.feat-mini {
  padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-card); background: var(--white);
  border: 1px solid var(--line-soft); box-shadow: var(--sh-1);
}

.feat-mini h3 { font-size: var(--t-h3); }
.feat-mini h3 em { font-style: normal; color: var(--blue-2); }
.feat-mini .spec { margin-top: clamp(16px, 1.8vw, 22px); }

.feat-mini-col { display: flex; flex-direction: column; }
.feat-mini-col > .feat-mini { flex: 1 1 auto; }

.band-row.is-close { padding-bottom: var(--band-y); }
.outro { display: grid; gap: clamp(40px, 3.2vw, 52px); justify-items: center; text-align: center; }
.outro-say {
  max-width: 22ch;
  font-size: var(--t-h2-mf); font-weight: 800;
  letter-spacing: var(--ls-h2-mf); line-height: var(--lh-h2-mf); color: var(--ink);
}
.outro-say em { font-style: normal; color: var(--blue-2); }

.outro-shot { position: relative; width: min(100%, 880px); }
.outro-art { display: block; width: 100%; height: auto; }

.outro-asof {
  position: absolute; right: 0; bottom: 0;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-soft);
  font-size: var(--t-micro); font-weight: 400; line-height: 1.3;
  color: var(--ink-3); white-space: nowrap;
}
.outro-asof::before {
  content: ""; position: absolute; right: 24px; top: -6px;
  width: 11px; height: 11px; background: var(--surface);
  border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
  transform: rotate(45deg);
}
.outro-fig { position: relative; width: 100%; padding-bottom: 52px; }
.ribbon {
  width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.ribbon li { padding: clamp(20px, 2.2vw, 28px) 12px 0; }
.ribbon li + li { border-left: 1px solid var(--line); }

.ribbon .num {
  display: block; font-size: clamp(44px, 5vw, 64px); font-weight: 800; color: var(--ink);
  letter-spacing: var(--ls-display); line-height: 1.14; font-variant-numeric: tabular-nums;
}

.ribbon li:first-child .num { font-size: clamp(52px, 5.9vw, 76px); }

.ribbon .u { font-style: normal; font-size: var(--t-body); font-weight: 700; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.ribbon .plus { font-style: normal; color: var(--blue-2); }

.ribbon .l { display: block; margin-top: 10px; font-size: var(--t-micro); font-weight: 400; color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .ribbon .num.is-pop { animation: num-pop .34s var(--ease); transform-origin: center bottom; }
}
@keyframes num-pop { from { transform: scale(1.06) } to { transform: scale(1) } }

.stats {
  position: absolute; right: calc(-1 * var(--bleed) + 20px); top: 50%; transform: translateY(-50%);

  z-index: 2; width: max-content; max-width: 260px; display: grid; gap: 10px; justify-items: start;
}
.stats ul { width: 100%; display: grid; gap: 7px; }

.stats-cap {
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line-soft);
  font-size: var(--t-micro); font-weight: 600;
  line-height: 1.3; color: var(--ink-3);
}

.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(28px, 3.2vw, 44px) clamp(30px, 4vw, 66px);
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--panel-deep) 10%, var(--panel-deep-2) 90%);
  color: var(--on-dark);
}
.cta-band p { font-size: var(--t-h3); font-weight: 800; letter-spacing: var(--ls-h3); line-height: var(--lh-h3); }
.cta-band-act { display: flex; flex-wrap: wrap; gap: 10px; }

.faq-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.faq-head { position: sticky; top: 40px; }
.faq-head h2 { font-size: 28px; }

.faq-contact {
  margin-top: clamp(28px, 3.2vw, 44px); padding: 22px 16px 24px 20px;
  background: var(--white); border-radius: var(--r-card);
  border: 1px solid var(--line-soft); box-shadow: var(--sh-1);

  display: grid; grid-template-columns: minmax(0, 1fr) 18%;
  gap: 10px; align-items: center;

  container-type: inline-size;
}
.faq-contact .t { font-size: var(--t-micro); font-weight: 400; color: var(--ink-3); }

.faq-contact .tel {
  display: block; margin-top: 8px;
  font-size: var(--t-h2-f);

  font-size: min(var(--t-h2-f), 13.5cqw);
  font-weight: 800;
  letter-spacing: var(--ls-h2-f); line-height: 1.16;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.faq-contact .tel:hover { color: var(--blue); }
.faq-art { width: 100%; height: auto; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 14px; padding: 24px 0; cursor: pointer; list-style: none;
  font-size: var(--t-body); font-weight: 700; color: var(--ink); line-height: var(--lh-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { margin-left: auto; flex: none; width: 22px; height: 22px; margin-top: 4px; position: relative; }
.faq summary .ico::before, .faq summary .ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink-3); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .22s var(--ease), opacity .22s var(--ease); }
.faq summary .ico::before { width: 14px; height: 2px; }
.faq summary .ico::after { width: 2px; height: 14px; }
.faq details[open] summary .ico::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq .a { padding: 0 0 28px; font-size: 18px; font-weight: 400; color: var(--ink-2); max-width: 42em; }

.faq .a b { color: var(--ink); font-weight: 800; }

#quote { padding-block: clamp(24px, 2.2vw, 30px); }
.quote { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(30px, 4.6vw, 76px); align-items: center; }
.quote .side h2 em { font-style: normal; color: var(--blue-on-dark); }

.form-note {
  margin-bottom: clamp(16px, 1.8vw, 22px);
  padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2vw, 22px);
  border-radius: var(--r-card);
  background: var(--blue-tint);
  border: 1px solid rgba(46, 124, 240, .22);
}
.form-note .t { font-size: var(--t-micro); font-weight: 400; letter-spacing: var(--ls-micro); color: var(--ink-3); }
.form-note .s {
  margin-top: 6px; font-size: var(--t-lead); font-weight: 800;
  letter-spacing: var(--ls-lead); line-height: 1.4; color: var(--ink);
}
.form-note .d { margin-top: 8px; font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); color: var(--ink-2); }
.form-note .x { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(46, 124, 240, .28); font-size: var(--t-micro); font-weight: 400; line-height: 1.6; letter-spacing: var(--ls-micro); color: var(--ink-3); }

.quote-art { margin-top: clamp(12px, 1.6vw, 20px); width: clamp(180px, 16vw, 224px); height: auto; }
.call-label { margin-top: clamp(16px, 2vw, 26px); font-size: var(--t-micro); font-weight: 400; color: var(--on-dark-56); }
.call-tel {
  display: block; margin-top: clamp(8px, 1.2vw, 14px);
  font-size: var(--t-display); font-weight: 800; line-height: 1.1;
  letter-spacing: var(--ls-display); color: var(--on-dark); font-variant-numeric: tabular-nums; transition: color .2s var(--ease);
}
.call-tel:hover { color: var(--blue-on-dark); }

.form {
  position: relative; z-index: 2;
  background: var(--white); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 32px);
  box-shadow: var(--sh-2);
}
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .f { display: flex; flex-direction: column; gap: 7px; }
.form .f.full { grid-column: 1 / -1; }
.form label { font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); }

.form label .opt { margin-left: 6px; font-style: normal; font-weight: 400; }
.form input, .form select, .form textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  padding: 13px 16px; font-size: var(--t-body); font-weight: 400; color: var(--ink); font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form textarea { min-height: 76px; resize: vertical; line-height: 1.7; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-3); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px var(--blue-soft); }

.field-error { border-color: var(--red) !important; }

.consent { margin-top: 16px; display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-micro); font-weight: 400; line-height: 1.65; color: var(--ink-3); }
.consent input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--blue); flex: none; }
.consent .req { color: var(--red); margin-left: 3px; }
.consent details { display: inline; }
.consent summary { display: inline; cursor: pointer; color: var(--blue); font-weight: 700; margin-left: 6px; list-style: none; }
.consent summary::-webkit-details-marker { display: none; }
.consent .full { margin-top: 8px; font-size: var(--t-micro); font-weight: 400; color: var(--ink-3); }
.form .submit { margin-top: 14px; }
.form .submit .btn { width: 100%; }
.form .done { display: none; text-align: center; padding: 18px 0 6px; }
.form .done .ok { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--blue-tint); display: grid; place-items: center; }
.form .done .ok svg { width: 26px; height: 26px; stroke: var(--blue); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.form .done p { margin-top: 14px; color: var(--ink-2); font-size: var(--t-body); font-weight: 400; }
.form.is-done .grid, .form.is-done .consent, .form.is-done .submit { display: none; }
.form.is-done .done { display: block; }
.done-steps { margin: 22px 0 20px; display: grid; gap: 2px; text-align: left; }
.done-steps li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.done-steps li:last-child { border-bottom: 1px solid var(--line); }
.done-steps .n { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-mono); color: var(--ink-3); }
.done-steps b { font-size: var(--t-body); font-weight: 700; color: var(--ink); }

.ftr {
  --ftr-ink: #3A4A5E;
  --ftr-ink-2: #7C8CA1;
  --ftr-line: rgba(16, 27, 43, .08);
  --ftr-surface: #EEF1F6;
  --ftr-accent: #2E7CF0;
  --ftr-radius: 8px;
  --ftr-gutter: 24px;
  --ftr-page: 1280px;
  --ftr-ease: cubic-bezier(.4, 0, .2, 1);

  box-sizing: border-box;
  padding: 44px var(--ftr-gutter) calc(44px + env(safe-area-inset-bottom));
  color: var(--ftr-ink-2);
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  font-size: var(--t-micro, 16px);
  letter-spacing: -.01em;

  background: var(--ftr-surface);
  border-top: 1px solid var(--ftr-line);
}

.ftr *, .ftr *::before, .ftr *::after { box-sizing: border-box; }
.ftr img { display: block; max-width: 100%; }
.ftr p { margin: 0; }
.ftr nav, .ftr div { margin: 0; padding: 0; }
.ftr :focus-visible { outline: 2px solid var(--ftr-accent); outline-offset: 3px; border-radius: var(--ftr-radius); }

.ftr .ftr-wrap { max-width: var(--ftr-page); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; }

.ftr-info img { height: 26px; width: auto; margin-bottom: 12px; opacity: .9; }
.ftr-info p { line-height: 1.85; }
.ftr-info a { color: var(--ftr-ink); text-decoration: none; transition: color .18s var(--ftr-ease); }
.ftr-info a:hover { color: var(--ftr-accent); }

.ftr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.ftr-sym { display: flex; gap: 12px; }
.ftr-sym a { display: block; border-radius: var(--ftr-radius); opacity: .9; transition: opacity .2s var(--ftr-ease); }
.ftr-sym a:hover { opacity: 1; }
.ftr-sym img { width: 30px; height: 30px; }
.ftr-links { display: flex; gap: 14px; }
.ftr-links a { color: var(--ftr-ink); font-weight: 600; text-decoration: none; transition: color .18s var(--ftr-ease); }
.ftr-links a:hover { color: var(--ftr-accent); }

@media (max-width: 720px) {
  .ftr { --ftr-gutter: 16px; padding-top: 36px; }
  .ftr .ftr-wrap { flex-direction: column; gap: 24px; }
  .ftr-side { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ftr-info a, .ftr-links a, .ftr-sym a { transition: none; }
}

.float-dock, .float-top {
  --float-size: 52px;
  --float-gap: 16px;
  --float-right: 28px;
  --float-bottom: 28px;
  --float-surface: #FFFFFF;
  --float-line: #E2E8F0;
  --float-accent: #00835C;
  --float-ease: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.float-dock, .float-top { --float-bottom: calc(var(--header-h, 68px) + 20px); }

.float-dock *, .float-dock *::before, .float-dock *::after { box-sizing: border-box; }
.float-dock a { text-decoration: none; color: inherit; }
.float-dock img { display: block; }
.float-top { margin: 0; padding: 0; font: inherit; }
.float-dock :focus-visible,
.float-top:focus-visible { outline: 2px solid var(--float-accent); outline-offset: 3px; border-radius: 50%; }

.float-dock {
  position: fixed; right: var(--float-right); bottom: var(--float-bottom); z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  transition: bottom .32s cubic-bezier(.4, 0, .2, 1), opacity .32s ease;
}

.float-dock.is-lift { bottom: calc(var(--float-bottom) + var(--float-size) + var(--float-gap)); }

.float-btn { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.float-btn:hover { transform: translateY(-3px); }

.float-sym { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 8px 20px rgba(15, 23, 42, .22)); }
.float-sym:hover { filter: drop-shadow(0 12px 26px rgba(15, 23, 42, .32)); }
.float-sym img { width: 100%; height: 100%; object-fit: contain; }
.float-dock .float-sym {
  flex: none; width: var(--float-size); height: var(--float-size);
  transition: height .3s var(--float-ease), margin-top .3s var(--float-ease),
    opacity .24s ease, transform .3s var(--float-ease), filter .2s ease;
}
.float-dock .float-sym + .float-sym { margin-top: var(--float-gap); }
.float-dock .float-sym:not(:first-child) {
  height: 0; margin-top: 0; opacity: 0;
  transform: translateY(10px) scale(.86);
  pointer-events: none; overflow: hidden;
}
.float-dock:hover .float-sym:not(:first-child),
.float-dock:focus-within .float-sym:not(:first-child),
.float-dock.is-open .float-sym:not(:first-child) {
  height: var(--float-size); margin-top: var(--float-gap);
  opacity: 1; transform: none; pointer-events: auto;
}
.float-dock:hover .float-sym:not(:first-child):hover,
.float-dock:focus-within .float-sym:not(:first-child):hover,
.float-dock.is-open .float-sym:not(:first-child):hover { transform: translateY(-3px); }

.float-top {
  position: fixed; right: var(--float-right); bottom: var(--float-bottom); z-index: 50;
  width: var(--float-size); height: var(--float-size);
  display: flex; align-items: center; justify-content: center;
  background: var(--float-surface); border: 1px solid var(--float-line); border-radius: 50%;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12); cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.float-top.is-show { opacity: 1; visibility: visible; pointer-events: auto; }
.float-top:hover { border-color: var(--float-accent); box-shadow: 0 12px 26px rgba(15, 23, 42, .2); }
.float-top span { font-size: 20px; font-weight: 800; line-height: 1; color: var(--float-accent); }

body.dock-dim .float-dock { opacity: .26; }

body.dock-dim .float-top.is-show { opacity: .45; }
body.dock-dim .float-dock:hover,
body.dock-dim .float-dock:focus-within,
body.dock-dim .float-dock.is-open,
body.dock-dim .float-top.is-show:hover,
body.dock-dim .float-top.is-show:focus-visible { opacity: 1; }

@media (max-width: 768px) {
  .float-dock, .float-top { --float-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-dock, .float-dock .float-sym, .float-btn, .float-btn:hover, .float-top { transition: none; transform: none; }
}

.pulse {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--blue); opacity: .55;
}
.pulse.alert { background: var(--amber); }
.pulse.alert::after { border-color: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  .pulse::after { animation: ping 2.6s var(--ease) infinite; animation-delay: var(--t, 0s); }
}
@keyframes ping { 0% { transform: scale(.7); opacity: .55 } 70%, 100% { transform: scale(2.2); opacity: 0 } }

.spot {
  position: absolute; z-index: 1; pointer-events: none;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 2px solid var(--blue); border-radius: 10px;
  box-shadow: 0 0 0 5px rgba(46, 124, 240, .18);
}
.spot.is-round { border-radius: 50%; }

.spot.is-round::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--blue); opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
  .spot.is-round::after { animation: ping 2.6s var(--ease) infinite; }
}

.stats li {
  padding: 11px 15px; border-radius: var(--r-card);
  background: var(--white); border: 1px solid var(--line-soft); box-shadow: var(--sh-1);
}

.stats li:nth-child(1) { --c-ink: var(--blue-2); }
.stats li:nth-child(2) { --c-ink: var(--green-ink); }
.stats li:nth-child(3) { --c-ink: var(--red-ink); }
.stats li:nth-child(4) { --c-ink: var(--amber-ink); }
.stats .l { display: block; font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.stats b { display: block; margin-top: 4px; font-size: var(--t-num); font-weight: 800; color: var(--c-ink); letter-spacing: var(--ls-h2-mf); line-height: 1.2; font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }

  .hero-text { position: relative; z-index: 1; }
  .hero-art {
    position: absolute; z-index: 0;
    right: calc(-1 * var(--gutter) + 2px); bottom: calc(-1 * var(--hero-pb) - 6px);
    width: clamp(150px, 34vw, 300px); margin: 0;
    aspect-ratio: 2 / 3; object-fit: cover; object-position: 78% 100%;
  }

  .hero-spec { max-width: 62%; }
  .cases, .faq-grid, .quote { grid-template-columns: 1fr; }
  .faq-head, .cases-head { position: static; }

  .faq-contact { display: none; }

  .cases-art { width: 240px; margin: 4px auto 0; }
  .case-item:nth-child(2), .case-item:nth-child(3), .case-item:nth-child(4) { margin-left: 0; }
  .feat-row { grid-template-columns: 1fr; }
  .feat-row .feat-art, .feat-row.alt .feat-art {
    order: -1; margin-left: calc(-1 * var(--bleed)); margin-right: calc(-1 * var(--bleed)); border-radius: 0;
  }

  .feat-ghost {
    margin-left: 0; margin-bottom: 8px;
    font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--ls-mono); line-height: 1.2; color: var(--ink-3);
  }
  .band:not(.band-white) > .wrap > .feat-row .feat-ghost,
  .band:not(.band-white) > .wrap > .feat-pair .feat-ghost { color: var(--ink-3); }
  .feat-pair { grid-template-columns: 1fr; }

  .outro-shot { width: min(100%, 520px); }
  .outro-art { aspect-ratio: 19 / 10; object-fit: cover; object-position: center; }
  .ribbon { grid-template-columns: 1fr; }
  .ribbon li { padding: 18px 0; }
  .ribbon li + li { border-left: 0; border-top: 1px solid var(--line); }

  .outro-fig { padding-bottom: 46px; }
  .outro-asof { right: 50%; transform: translateX(50%); }
  .outro-asof::before { right: 50%; margin-right: -5px; }
  .pipe { grid-template-columns: 1fr; gap: 0; }
  .pipe-step { padding: 28px 0 34px; border-bottom: 1px solid var(--line); }
  .pipe-step + .pipe-step::after { display: none; }
  .pipe-step.is-final { margin: 0 calc(-1 * var(--bleed)); padding: 34px var(--bleed); border-radius: 0; border-bottom: 0; }
  .pipe-step.is-final::before { left: var(--bleed); }
  .ledger-art { width: min(100%, 420px); }

  .quote-art { width: clamp(120px, 24vw, 176px); }

  .stats { display: none; }
  .zoom { width: 46%; right: 8px; bottom: 8px; }
}
@media (max-width: 720px) {
  .zoom { display: none; }

  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-cta .btn { width: 100%; min-width: 0; padding: 15px 10px; gap: 6px; font-size: 15px; letter-spacing: -.03em; }
  .hero-cta .btn svg { width: 15px; height: 15px; }
  .hero-art { display: none; }
  .hero-spec { max-width: none; }

  /* 제목과 일러스트를 한 행에 두고 양끝 정렬 */
  .cases-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .cases-head h2 { margin-bottom: 0; }
  .cases-art { flex: none; width: clamp(150px, 36vw, 210px); margin: 0; }

  .ledger-gains { gap: 10px 12px; }
  .ledger-gains li { gap: 7px; padding: 9px 16px 9px 13px; font-size: 18px; letter-spacing: -.02em; }
  .ledger-gains svg { width: 17px; height: 17px; }

  .form input, .form textarea { font-size: var(--t-micro); }
  .form .grid { grid-template-columns: 1fr; }
  .form .grid { gap: 14px; }

  .cta-band { border-radius: var(--r-panel); }
  .cta-band .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .cases-art { width: clamp(124px, 35vw, 140px); }
}

/* 개인정보 동의 내용: 항목과 내용을 두 열로 맞춰 구분 (homepage cs.html과 같은 방식) */
.consent .full dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
}
.consent .full dt {
  font-weight: 400;
}
.consent .full dd {
  margin: 0;
}
.consent .full p {
  margin: 10px 0 0;
  font-size: inherit;
  line-height: inherit;
}
@media (max-width: 560px) {
  .consent .full dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .consent .full dd {
    margin-bottom: 8px;
  }
}

/* 개인정보 동의: '내용 보기'를 동의 문구와 같은 줄 오른쪽에 둔다 */
.consent > div {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.consent > div > label {
  display: block;
  padding-right: 5.5em;
}
.consent summary {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}