/* FlameAI 새 디자인 — 홈(home.jsp) 전용 스타일
   home.jsp에서만 로드한다(tokens.css, common.css 다음 순서). */

/* ── Hero ────────────────────────────────────────────────── */
.fa-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 11.875rem 0 0;
  min-height: 100svh;
  background: var(--fa-dark);
  color: #fff;
}
.fa-hero > .fa-container {
  position: relative;
  z-index: 1;
}
.fa-hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
  gap: 1.875rem;
}
.fa-hero h1 {
  margin: 0 0 1.5625rem;
  font-size: clamp(2.75rem, 5.35vw, 4.875rem);
  line-height: 1.14;
  letter-spacing: -.065em;
  font-weight: 850;
}
.fa-hero h1 span {
  color: var(--brand);
}
.fa-hero-copy {
  max-width: 46.25rem;
  font-size: 1.125rem;
  line-height: 1.85;
  margin: 0 auto;
  color: var(--fa-dark-text-muted);
}
.fa-hero-actions {
  display: flex;
  gap: .75rem;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.fa-hero-actions .fa-btn:not(.fa-btn-primary) {
  background: var(--fa-dark-surface-tint);
  border-color: var(--fa-dark-border);
  color: #fff;
  backdrop-filter: blur(12px);
}
.fa-hero-actions .fa-btn:not(.fa-btn-primary):hover {
  background: #ffffff16;
}
.fa-hero-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, #0f1012 0%, transparent 55%, #0f1012 100%);
}
.fa-hero-glow:before,
.fa-hero-glow:after {
  content: "";
  position: absolute;
  inset: 10% -18% -15%;
  filter: blur(75px);
  will-change: transform;
  transform-origin: 50% 80%;
  background: radial-gradient(ellipse at 30% 65%, #e7483075 0%, transparent 38%),
              radial-gradient(ellipse at 75% 60%, #e7483050 0%, transparent 32%);
  animation: fa-flame-drift 15s ease-in-out infinite alternate;
}
.fa-hero-glow:after {
  inset: 30% -10% -30%;
  opacity: .7;
  background: radial-gradient(ellipse at 55% 65%, #e7483090 0%, transparent 45%);
  animation: fa-flame-drift 19s ease-in-out -8s infinite alternate-reverse;
}
@keyframes fa-flame-drift {
  0%   { transform: translate3d(-4%, 5%, 0) scale(.95) rotate(-6deg); opacity: .6; }
  50%  { transform: translate3d(3%, -5%, 0) scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: translate3d(5%, -10%, 0) scale(1.14, .95) rotate(6deg); opacity: .75; }
}
.fa-console-preview {
  width: min(67.5rem, 100%);
  margin: 4.375rem auto 0;
  border: 1px solid var(--fa-dark-border);
  border-bottom: 0;
  border-radius: 1.125rem 1.125rem 0 0;
  background: #17181de8;
  box-shadow: 0 -12px 70px #e7483015, 0 25px 90px #0f101280;
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(20px);
}
.fa-preview-toolbar {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9375rem;
  border-bottom: 1px solid var(--fa-dark-border-faint);
  background: var(--fa-dark-surface-tint);
  font-size: .75rem;
  color: #b0b2be;
}
.fa-preview-size {
  font: .6875rem var(--font-mono);
  letter-spacing: .08em;
  color: var(--fa-dark-text-mute-4);
}
.fa-preview-placeholder {
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.875rem;
  background: linear-gradient(145deg, #ffffff03, transparent);
  position: relative;
}
.fa-preview-placeholder:before {
  content: "";
  position: absolute;
  inset: 1.75rem;
  border: 1px dashed var(--fa-dark-border-faint);
  border-radius: var(--radius);
  pointer-events: none;
}
.fa-preview-glyph {
  font-size: 2.25rem;
  color: #7e818f;
  margin-bottom: 1rem;
}
.fa-preview-placeholder strong {
  font-size: 1.5625rem;
  font-weight: 650;
  letter-spacing: -.04em;
  color: #d2d3da;
}
.fa-preview-placeholder p {
  color: #9598a5;
  font-size: .9375rem;
  margin: .625rem 0;
}
.fa-preview-spec {
  font-size: .75rem;
  color: var(--fa-dark-text-mute-4);
  margin-top: .5rem;
}

/* ── 연결 구조 섹션 ──────────────────────────────────────── */
/* 장점 카드 3종(2026-10-18) — 히어로 바로 아래 */
.fa-benefits-title {
  text-align: center;
}
.fa-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.fa-benefit {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 .75rem 2rem rgba(30, 40, 70, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fa-benefit:hover {
  transform: translateY(-.1875rem);
  box-shadow: 0 1.25rem 2.5rem rgba(30, 40, 70, .1);
}
.fa-benefit-media {
  background: #fafbfe;   /* 그림 바탕색과 같게 */
}
.fa-benefit-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.fa-benefit-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem 1.75rem 1.75rem;
}
.fa-benefit-body h3 {
  margin: 0 0 .75rem;
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -.02em;
}
.fa-benefit-body p {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--muted);
}
.fa-benefit-link {
  margin-top: auto;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}
.fa-benefit-link span {
  display: inline-block;
  margin-left: .25rem;
  transition: transform .2s ease;
}
.fa-benefit-link:hover span {
  transform: translateX(.25rem);
}
.fa-connection-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.fa-connection-heading {
  max-width: 57.5rem;
  margin: 0 auto;
  text-align: center;
}
.fa-connection-heading .fa-section-title {
  margin-top: 0;
  color: var(--ink);
}
.fa-connection-heading .fa-section-title span {
  color: var(--ink);
}
.fa-connection-heading .fa-section-intro {
  max-width: 50rem;
  margin: 0 auto;
  line-height: 1.9;
}
.fa-panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9375rem;
  font-size: .75rem;
  letter-spacing: .08em;
  color: #8a8a93;
  font-weight: 650;
}
.fa-panel-label span:last-child {
  font: .75rem var(--font-mono);
  letter-spacing: 0;
}
/* 2026-10-18 비교용 새 안 — 모델 종류로 갈라지는 연결도(빛나는 그룹 카드, 갈래 화살표, ㄷ자 응답 경로) */
.fa-flow3 {
  --f3-llm: 59, 130, 246;
  --f3-img: 34, 197, 94;
  --f3-dec: 168, 85, 247;
  --f3-line: #a9b4c6;
  position: relative;
  margin-top: 2.5rem;
  padding: 1.5625rem 2rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(40rem 18rem at 85% 30%, rgba(var(--f3-dec), .07), transparent 70%),
    radial-gradient(36rem 16rem at 15% 80%, rgba(var(--f3-llm), .07), transparent 70%),
    linear-gradient(135deg, #f7f9fd, #eef2f9);
}
.fa-flow3-label { position: relative; }
.fa-flow3-main {
  display: grid;
  grid-template-columns: 4.6fr 4.5rem 2.3fr;
  align-items: center;
  margin-top: 1.75rem;
}
.fa-f3-left {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 3.25rem 1.15fr 3.25rem 1.45fr;
  align-items: center;
}
.fa-f3-card {
  text-align: center;
  padding: 1.25rem .875rem;
  border: 1px solid #d6e0ef;
  border-radius: .875rem;
  background: linear-gradient(180deg, #fff, #f1f5fb);
  box-shadow: 0 .75rem 1.75rem rgba(30, 60, 120, .08), inset 0 1px 0 #fff;
}
.fa-f3-app {
  border-color: rgba(var(--f3-llm), .35);
  box-shadow: 0 0 1.5rem rgba(var(--f3-llm), .14), 0 .75rem 1.75rem rgba(30, 60, 120, .06);
}
.fa-f3-card strong, .fa-f3-box strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 750;
}
.fa-f3-card small {
  display: block;
  margin-top: .3125rem;
  font-size: .8125rem;
  color: #6b6b75;
}
.fa-f3-inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3125rem;
  margin-top: .75rem;
}
.fa-f3-inputs span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .4375rem .1875rem .375rem;
  border: 1px solid rgba(var(--f3-llm), .25);
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, .8);
  font-size: .6875rem;
  font-weight: 600;
}
.fa-f3-inputs svg, .fa-f3-chips i svg {
  width: .8125rem;
  height: .8125rem;
  fill: none;
  stroke: rgb(var(--f3-llm));
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* API Gateway — 흰 카드, 주소만 붉은 글자 */
.fa-f3-gw code {
  display: block;
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--brand);
}
/* FlameBox — 핵심 노드: 가장 크고 검은 강조 카드 */
.fa-f3-box {
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1.25rem;
  border-radius: 1.125rem;
  border: 1px solid #2b2b31;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #3a1512 0%, #111114 55%, #0b0b0d 100%);
  box-shadow: 0 0 0 .25rem rgba(230, 74, 50, .08), 0 0 2rem rgba(230, 74, 50, .22), 0 1.25rem 2.5rem rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.fa-f3-box strong {
  font-size: 1.625rem;
  letter-spacing: -.01em;
}
.fa-f3-box small {
  display: block;
  margin-top: .5rem;
  font-size: .875rem;
  color: #c9c9d1;
}
/* 양방향 화살표 — 위 선은 요청(→), 아래 선은 응답(←) */
.fa-f3-arrow {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0 .5rem;
}
.fa-f3-arrow i {
  position: relative;
  display: block;
  height: 2px;
}
.fa-f3-arrow i.to { background: linear-gradient(90deg, rgba(169, 180, 198, .25), var(--f3-line)); }
.fa-f3-arrow i.back { background: linear-gradient(90deg, var(--f3-line), rgba(169, 180, 198, .25)); }
.fa-f3-arrow i:after {
  content: "";
  position: absolute;
  top: -.25rem;
  width: .5rem;
  height: .5rem;
  border-top: 2px solid var(--f3-line);
}
.fa-f3-arrow i.to:after { right: 0; border-right: 2px solid var(--f3-line); transform: rotate(45deg); }
.fa-f3-arrow i.back:after { left: 0; border-left: 2px solid var(--f3-line); transform: rotate(-45deg); }
.fa-f3-branch {
  align-self: stretch;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fa-f3-branch path {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.fa-f3-branch .b-llm { stroke: rgba(var(--f3-llm), .55); }
.fa-f3-branch .b-img { stroke: rgba(var(--f3-img), .55); }
.fa-f3-branch .b-dec { stroke: rgba(var(--f3-dec), .55); }
.fa-f3-groups {
  display: grid;
  grid-auto-rows: 1fr;
  gap: .875rem;
}
.fa-f3-group {
  --c: var(--f3-llm);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .75rem .875rem .875rem;
  border: 1.5px solid rgba(var(--c), .55);
  border-radius: .875rem;
  background: linear-gradient(180deg, rgba(var(--c), .07), rgba(255, 255, 255, .9));
  box-shadow: 0 0 0 .25rem rgba(var(--c), .06), 0 0 1.5rem rgba(var(--c), .22);
}
.fa-f3-group.is-img { --c: var(--f3-img); }
.fa-f3-group.is-dec { --c: var(--f3-dec); }
.fa-f3-group:before {
  content: "";
  position: absolute;
  left: -.4375rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-top: 2px solid rgba(var(--c), .7);
  border-right: 2px solid rgba(var(--c), .7);
  transform: rotate(45deg);
}
.fa-f3-group h4 {
  margin: 0 0 .5rem;
  text-align: center;
  font-size: .9375rem;
  font-weight: 750;
}
.fa-f3-group h4 em {
  font-style: normal;
  margin-left: .25rem;
  padding: .0625rem .4375rem;
  border-radius: 62.4375rem;
  background: rgba(var(--c), .12);
  color: rgb(var(--c));
  font-size: .6875rem;
  vertical-align: .125rem;
}
.fa-f3-chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .4375rem;
}
.fa-f3-chips span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .4375rem .375rem;
  border: 1px solid #e3e8f0;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 .125rem .375rem rgba(30, 60, 120, .06);
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.fa-f3-chips i {
  display: inline-flex;
  align-items: center;
  gap: .1875rem;
  margin-top: .125rem;
  font-style: normal;
  font-size: .625rem;
  font-weight: 600;
  color: #7a7a85;
}
.fa-connection-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.fa-connection-details article {
  position: relative;
  padding: 2.125rem 1.875rem 2.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.125rem;
  box-shadow: 0 8px 25px #0f101204;
}
.fa-connection-index {
  font: 600 .9375rem/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--ink);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid #dedee4;
  border-radius: .75rem;
  background: var(--surface);
  margin-bottom: 1.75rem;
}
.fa-connection-details h3 {
  font-size: 1.375rem;
  line-height: 1.4;
  letter-spacing: -.035em;
  margin: 0 0 1rem;
}
.fa-connection-details p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.9;
  margin: 0;
}

/* ── 3단계 워크플로 ──────────────────────────────────────── */
#fa-workflow {
  background-color: #fafafb;
  background-image: radial-gradient(circle, #0f101215 .8px, transparent 1px);
  background-size: 1.25rem 1.25rem;
}
.fa-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.875rem;
}
.fa-step {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.9375rem;
  background: #fff;
  box-shadow: 0 8px 25px #0f101203;
}
.fa-step-number {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-size: .875rem;
  font-weight: 800;
  border-radius: .75rem;
  background: var(--ink);
  color: #fff;
}
.fa-step h3 {
  font-size: 1.4375rem;
  letter-spacing: -.035em;
  margin: 1.6875rem 0 .75rem;
}
.fa-step p {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

/* ── 설치 / 모델 로드 (좌우 상세 그리드) ────────────────────── */
.fa-section-muted {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fa-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5.3125rem;
}
.fa-detail-grid.fa-reverse .fa-detail-copy { order: 2; }
.fa-detail-grid.fa-reverse .fa-detail-visual { order: 1; }
.fa-detail-copy p {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.9;
}
.fa-checks {
  list-style: none;
  padding: 0;
  margin: 1.625rem 0 0;
  display: grid;
  gap: .75rem;
  font-size: .9375rem;
  font-weight: 600;
}
.fa-checks li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
}
.fa-checks li:before {
  content: "✓";
  color: var(--brand);
  font-weight: 800;
}
.fa-detail-visual {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 22px 60px #0f101209;
  overflow: hidden;
}
.fa-visual-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  color: #7d7d87;
  font-size: .75rem;
}
.fa-visual-body {
  padding: 1.875rem;
}
.fa-visual-title {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 0 0 .375rem;
}
.fa-visual-caption {
  font-size: .8125rem;
  color: var(--muted);
  margin-bottom: 1.5625rem;
}
.fa-os-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
}
.fa-os-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.25rem;
}
.fa-os-icon {
  font-size: 1.4375rem;
  font-weight: 650;
  color: var(--brand);
  margin-bottom: 1.1875rem;
}
.fa-os-card strong {
  font-size: 1.0625rem;
  display: block;
}
.fa-os-card small {
  color: #92929a;
  font-size: .75rem;
}
.fa-runtime {
  border: 1px solid var(--line);
  border-radius: .75rem;
  margin-top: 1.0625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.0625rem;
  font-size: .8125rem;
}
.fa-runtime span {
  font-family: var(--font-mono);
  color: var(--muted);
}
.fa-visual-note {
  padding: .6875rem 1.25rem;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: .75rem;
  color: #94949d;
  text-align: right;
}
.fa-model-list {
  display: grid;
  gap: .75rem;
  margin-top: 1.5rem;
}
.fa-model-item {
  display: flex;
  align-items: center;
  gap: .9375rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.125rem;
}
.fa-model-initial {
  width: 2.4375rem;
  height: 2.4375rem;
  display: grid;
  place-items: center;
  font-size: 1.0625rem;
  font-weight: 800;
  border-radius: .625rem;
  background: var(--surface);
}
.fa-model-item strong {
  display: block;
  font-size: .9375rem;
}
.fa-model-item small {
  display: block;
  font-size: .75rem;
  color: #92929b;
}
.fa-format {
  margin-left: auto;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: .3125rem;
  padding: .25rem .4375rem;
  font: .6875rem var(--font-mono);
}

/* ── API 연결 & 호출 ─────────────────────────────────────── */
.fa-api-section {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.fa-api-section .fa-detail-grid {
  align-items: start;
  grid-template-columns: .85fr 1.15fr;
  gap: 4.375rem;
}
.fa-api-section .fa-section-title span {
  color: var(--ink);
}
.fa-api-section .fa-detail-copy code {
  color: var(--brand);
  font-size: .9375rem;
}
.fa-api-actions {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  margin-top: 1.875rem;
}

/* ── 클로징 ──────────────────────────────────────────────── */
.fa-closing-section {
  position: relative;
  background: var(--fa-dark);
  color: #fff;
  text-align: center;
  min-height: 75svh;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  padding: 6.25rem 0;
}
.fa-closing-section > .fa-container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.fa-closing-section h2 {
  line-height: 1.23;
  letter-spacing: -.055em;
  margin: 0 0 1.4375rem;
  font-weight: 800;
  font-size: clamp(2.125rem, 4.4vw, 4rem);
}
.fa-closing-section h2 span {
  color: var(--fa-dark-text-mute-3);
}
.fa-closing-section p {
  color: var(--fa-dark-text-mute-2);
  font-size: 1.0625rem;
}
.fa-closing-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.125rem;
}
.fa-closing-docs {
  background: transparent;
  border-color: var(--fa-dark-border);
  color: #fff;
}
.fa-closing-docs:hover {
  background: var(--fa-dark-surface-tint);
}
.fa-closing-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0f1012 0%, transparent 45%, #0f1012 100%);
}
.fa-closing-atmosphere:before {
  content: "";
  position: absolute;
  inset: 10% -10% -20%;
  background: radial-gradient(ellipse at 30% 65%, #e748302c, transparent 44%),
              radial-gradient(ellipse at 72% 75%, #e748303b, transparent 40%);
  filter: blur(65px);
  animation: fa-flame-drift 23s ease-in-out infinite alternate;
}
.fa-closing-atmosphere:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0f101240, transparent 45%, #0f1012 100%);
}
.fa-ember-field {
  position: absolute;
  inset: 0;
}
.fa-ember-field i {
  position: absolute;
  left: var(--x);
  bottom: 5%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px #e7483060;
  opacity: 0;
  filter: blur(.5px);
  animation: fa-ember-rise var(--duration) linear var(--delay) infinite;
}
@keyframes fa-ember-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: .35; }
  65%  { opacity: .2; }
  100% { transform: translate3d(var(--drift), -420px, 0); opacity: 0; }
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .fa-hero h1 { font-size: 5.125rem; }
}
@media (max-width: 1100px) {
  .fa-hero-actions { justify-content: center; }
  .fa-detail-grid { gap: 2.5rem; }
  .fa-flow3-main { grid-template-columns: 4.3fr 3rem 2.3fr; }
  .fa-f3-left { grid-template-columns: 1.1fr 2rem 1.1fr 2rem 1.4fr; }
  .fa-f3-chips span { font-size: .75rem; }
  .fa-benefits { gap: 1rem; }
  .fa-benefit-body { padding: 1.25rem 1.375rem 1.5rem; }
  .fa-benefit-body h3 { font-size: 1.1875rem; }
  .fa-step { padding: 1.5625rem; }
  .fa-step h3 { font-size: 1.3125rem; }
  .fa-connection-details article { padding: 1.75rem 1.4375rem; }
  .fa-connection-details h3 { font-size: 1.25rem; }
  .fa-api-section .fa-detail-grid { gap: 2.1875rem; }
}
@media (max-width: 760px) {
  .fa-hero-layout { gap: 1.5625rem; }
  .fa-hero h1 {
    font-size: clamp(2.25rem, 7.1vw, 3.375rem);
    line-height: 1.2;
    letter-spacing: -.06em;
  }
  .fa-hero-copy { font-size: 1rem; }
  .fa-hero-copy br { display: contents; }
  .fa-hero-copy br:after { content: " "; }
  .fa-hero-glow:before, .fa-hero-glow:after { filter: blur(45px); }
  .fa-console-preview { margin-top: 2.8125rem; border-radius: .75rem .75rem 0 0; }
  .fa-preview-toolbar { padding: .75rem; font-size: .6875rem; }
  .fa-preview-placeholder { min-height: 15.625rem; padding: 1.5625rem .9375rem; }
  .fa-preview-placeholder:before { inset: .9375rem; }
  .fa-preview-placeholder strong { font-size: 1.3125rem; }
  .fa-preview-placeholder p { font-size: .8125rem; }
  .fa-preview-spec { font-size: .6875rem; }
  .fa-preview-glyph { font-size: 1.75rem; margin-bottom: .3125rem; }
  .fa-preview-size { display: none; }
  .fa-connection-heading .fa-section-title br { display: none; }
  .fa-panel-label span:last-child { display: none; }
  .fa-panel-label { line-height: 1.7; }
  .fa-benefits { grid-template-columns: 1fr; margin-top: 2rem; }
  .fa-benefits-title br { display: none; }
  .fa-flow3 { margin-top: 2rem; padding: 1.25rem; }
  .fa-flow3-main { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; margin-top: 1.25rem; }
  .fa-f3-left { display: contents; }
  .fa-f3-arrow { flex-direction: row; justify-content: center; gap: .625rem; margin: 0; }
  .fa-f3-arrow i { width: 2px; height: 1.5rem; }
  .fa-f3-arrow i.to { background: linear-gradient(180deg, rgba(169, 180, 198, .25), var(--f3-line)); }
  .fa-f3-arrow i.back { background: linear-gradient(180deg, var(--f3-line), rgba(169, 180, 198, .25)); }
  .fa-f3-arrow i.to:after { top: auto; bottom: 0; left: -.25rem; right: auto; border-right: 2px solid var(--f3-line); transform: rotate(135deg); }
  .fa-f3-arrow i.back:after { top: 0; left: -.25rem; border-left: 2px solid var(--f3-line); transform: rotate(45deg); }
  .fa-f3-box { min-height: 8rem; }
  .fa-f3-branch, .fa-f3-group:before { display: none; }
  .fa-f3-groups { margin-top: .5rem; }
  .fa-f3-chips { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
  .fa-connection-details { grid-template-columns: 1fr; gap: 1.125rem; }
  .fa-connection-details article { padding: 1.6875rem; }
  .fa-connection-index { margin-bottom: 1.375rem; }
  .fa-steps { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .fa-step h3 { margin-top: 1.25rem; }
  .fa-detail-grid, .fa-api-section .fa-detail-grid {
    grid-template-columns: 1fr;
    gap: 2.1875rem;
  }
  .fa-detail-grid.fa-reverse .fa-detail-copy,
  .fa-detail-grid.fa-reverse .fa-detail-visual { order: initial; }
  .fa-detail-copy p { font-size: 1rem; }
  .fa-visual-body { padding: 1.4375rem; }
  .fa-visual-title { font-size: 1.5rem; }
  .fa-checks { font-size: .875rem; }
  .fa-os-card { padding: 1.0625rem; }
  .fa-closing-section { min-height: 66.67svh; padding: 5.3125rem 0; }
  .fa-closing-section h2 { font-size: clamp(1.9375rem, 6.8vw, 2.8125rem); }
  .fa-closing-section p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-hero-glow:before, .fa-hero-glow:after { animation: none; will-change: auto; }
  .fa-closing-atmosphere:before, .fa-ember-field i { animation: none; }
  .fa-ember-field i { opacity: .15; bottom: 35%; }
}