/* s-trust.css — 개편 층. 담당 장만 여기서 고친다.
 * 신뢰(#trust) · 차별점(#edge) · 중간 CTA 띠(.ctaband).
 *
 * ★옛 공용 규칙(.rail · .clause · .strength · .partner · .quote · .ctaband__*)은 다른 장과 함께
 *   쓰이므로 고치지 않고, 이 장들은 새 이름(tr- · tp- · ed- · ea- · cb-)으로 옮겨 벗어났다.
 * ★움직임은 전부 `[data-reveal]` 아래에만 건다. site.js 가 그 속성을 다는 것은 스크립트가 돌고
 *   «움직임 줄이기» 가 꺼져 있을 때뿐이라, 그 밖의 경우엔 처음부터 마지막 모습이다.
 * ★상태색(안정 녹색 · 불안정/단절 적색 · 경고 황색)은 여기서 한 번도 쓰지 않는다 — 장식은 파랑·보라·분홍.
 */

/* ══════════════════════ 신뢰 (#trust) ══════════════════════ */

/* ★바탕 — 종이를 위에서 비추는 조명 한 점 + 아주 옅은 장부 줄. 앞 장(검정 띠)과 다음 장(보라 발광)
     사이에서 «책상 위의 서류» 분위기를 만든다. */
#trust.tr {
  background:
    radial-gradient(56% 38% at 50% 40%, rgba(41, 151, 255, .14), transparent 72%),
    radial-gradient(36% 28% at 82% 64%, rgba(191, 90, 242, .10), transparent 72%),
    #000;
}
#trust.tr::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 100% 34px;
  -webkit-mask-image: radial-gradient(58% 46% at 50% 42%, #000, transparent 76%);
  mask-image: radial-gradient(58% 46% at 50% 42%, #000, transparent 76%);
}
#trust.tr > .wrap { position: relative; z-index: 1; }

/* ── 무대: 종이 + 지시선 ── */
.tr-stage { --pw: 540px; margin: 0; }
.tr-stage__grid { position: relative; }
.tr-scene {
  position: relative;
  width: min(100%, var(--pw));
  margin-inline: auto;
  perspective: 1800px;
  container-type: inline-size;
}
/* ★기울기는 변수 하나 — 진입 모션이 같은 값으로 내려앉아야 마지막 모습이 어긋나지 않는다. */
.tr-scene {
  --tilt: rotateX(9deg) rotateY(-7deg) rotateZ(-1.4deg);
  --tilt-back: rotateX(9deg) rotateY(-7deg) rotateZ(2.8deg) translate(22px, 12px);
}

/* 책상 위 조명 — 종이의 그림자가 보이도록 바닥을 살짝 밝힌다. */
.tr-floor {
  position: absolute;
  left: -14%;
  right: -14%;
  top: 8%;
  bottom: -9%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 175, 225, .20), rgba(80, 110, 190, .07) 60%, transparent);
  pointer-events: none;
}

.tr-sheet { border-radius: 3px; transform-origin: 50% 45%; }
.tr-sheet--back {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .35), transparent 40%),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(26, 77, 143, .07) 22px 23px),
    #e4e1d8;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .7);
  transform: var(--tilt-back);
}

/* ★종이 — 종이결(노이즈) · 빛 방향 · 접힌 자국 · 그림자 세 겹. 반투명 효과를 쓰지 않는다:
     숫자를 읽는 면이다. 크기는 폭에 비례(cqw) — 좁은 화면에서도 같은 종이가 줄어들 뿐이다. */
.tr-paper {
  position: relative;
  z-index: 2;
  padding: 2.3em 2.4em 2.1em;
  font-size: clamp(9.5px, 2.32cqw, 12.5px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #1c1c1e;
  text-align: left;
  background-color: #f7f5ef;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, transparent 0 57.6%, rgba(0, 0, 0, .045) 57.9%, rgba(255, 255, 255, .55) 58.1%, transparent 58.9%),
    linear-gradient(118deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 2px 3px rgba(0, 0, 0, .35),
    0 26px 44px -14px rgba(0, 0, 0, .75),
    0 70px 120px -30px rgba(0, 20, 60, .75);
  transform: var(--tilt);
}
.tp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.tp-head { position: relative; padding-bottom: .8em; border-bottom: 2px solid #1a4d8f; }
.tp-keeper {
  position: absolute;
  top: .1em;
  right: 0;
  padding: .15em .75em;
  border: 1px solid #1c1c1e;
  font-size: .86em;
  font-weight: 700;
  letter-spacing: .08em;
}
.tp-title { font-size: 2.05em; font-weight: 800; line-height: 1.15; letter-spacing: .14em; color: #1a4d8f; }
.tp-corrected {
  margin-left: .15em;
  font-size: .5em;
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: .38em;
  color: #b00020;
}
.tp-seq { margin-top: .35em; font-size: .9em; color: #55575c; }

.tp-fields-wrap { position: relative; margin-top: 1em; }
.tp-fields { width: 100%; border-collapse: collapse; }
.tp-fields th,
.tp-fields td { height: 2.1em; padding: 0 .75em; border: 1px solid #b7bbc2; font-size: 1em; }
.tp-fields th {
  width: 6.8em;
  text-align: left;
  white-space: nowrap;
  font-weight: 700;
  color: #1a4d8f;
  background: #e8f0fa;
}
.tp-fields td span + span { float: right; }
.tp-fields .num { font-family: inherit; font-variant-numeric: tabular-nums; }
.tp-plate { font-weight: 800; letter-spacing: .03em; }
.tp-w td { font-weight: 600; }
.tp-net th, .tp-net td { font-size: 1.1em; font-weight: 800; }
.tp-net td { background: #fbfaf5; }

.tp-corr {
  position: relative;
  margin-top: 1.1em;
  padding: .75em .95em .8em;
  border: 1px solid #e0b3b9;
  background: rgba(176, 0, 32, .035);
}
.tp-corr__h { font-size: .9em; font-weight: 800; letter-spacing: .1em; color: #b00020; }
.tp-corr__row { display: flex; align-items: baseline; gap: .55em; margin-top: .3em; font-size: 1.08em; }
.tp-corr__field { font-weight: 700; color: #1a4d8f; }
.tp-corr__old { color: #4a4c52; }
.tp-corr__arrow { color: #b00020; font-weight: 700; }
.tp-corr__new { font-weight: 800; }
.tp-corr__why { margin-top: .25em; font-size: .86em; line-height: 1.45; color: #3a3b40; }
.tp-corr__why .num { font-family: inherit; }

.tp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; margin-top: 1.05em; }
.tp-stage > p { margin-bottom: .3em; font-size: .82em; font-weight: 800; color: #1a4d8f; }
.tp-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.tp-slot { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #c6c9ce; background: #555; }
.tp-slot svg { width: 100%; height: 100%; filter: saturate(.55) contrast(1.05); }
.tp-osd { font: 700 9px/1 var(--font-num); fill: #fff; opacity: .88; }

.tp-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1em;
  margin-top: 1.1em;
  padding-top: .9em;
  border-top: 1px solid #1c1c1e;
}
.tp-qr { flex: none; width: 6.4em; height: 6.4em; }
.tp-company { display: grid; gap: .12em; font-size: .9em; color: #3a3b40; }
.tp-company strong { font-size: 1.12em; color: #1c1c1e; }

/* ── 지시선 표식 — 종이 가장자리의 번호 딱지. 번호는 TRUST_CALLOUTS 순서. ── */
.tr-pin {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  font: 700 1em/1 var(--font-num);
  font-style: normal;
  color: #fff;
  background: linear-gradient(135deg, #2997ff, #7d7aff 60%, #bf5af2);
  box-shadow: 0 0 0 .22em rgba(41, 151, 255, .25), 0 .3em .9em rgba(0, 40, 110, .45);
}
/* ★자리 계산: 표의 한 줄은 2.1em. 1차 줄(여섯째)과 2차 줄(일곱째) 경계 = 6 × 2.1em. */
.tr-pin--weight { right: -2.25em; top: calc(6 * 2.1em - .95em); }
.tr-pin--log { right: -2.25em; top: .45em; }
.tr-pin--orig { left: -2.25em; top: 1.95em; }
.tr-pin--qr { left: -2.25em; top: calc(.9em + 3.2em - .95em); }

/* ── 지시선 글 ── */
.tr-callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 44px auto 0; max-width: 760px; }
.tr-call { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.tr-call__no {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2997ff, #7d7aff 60%, #bf5af2);
  box-shadow: 0 0 18px rgba(41, 151, 255, .45);
}
.tr-call__txt { display: grid; gap: 3px; }
.tr-call strong { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: #f5f5f7; }
.tr-call__txt span { font-size: 14px; line-height: 1.5; color: #a1a1a6; }

.tr-note {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  font-size: 13px;
  color: #86868b;
  text-align: center;
}

/* ★넓은 화면: 글이 종이 양옆에 평평하게 서고, 선이 종이 가장자리 밑으로 들어가 딱지 옆에서 끝난다.
     top 값은 종이 폭 540px 에서 딱지의 실제 자리를 재어 맞춘 것이다 — 종이 안의 줄 높이(2.1em)나
     기울기(--tilt)를 바꾸면 여기도 다시 잰다. */
@media (min-width: 1180px) {
  .tr-stage__grid { padding-block: 10px 6px; }
  .tr-callouts { position: absolute; inset: 0; z-index: 3; display: block; max-width: none; margin: 0; pointer-events: none; }
  .tr-call { position: absolute; width: 248px; pointer-events: auto; }
  .tr-call--weight, .tr-call--log { left: calc(50% + var(--pw) / 2 + 46px); }
  .tr-call--orig, .tr-call--qr { right: calc(50% + var(--pw) / 2 + 46px); grid-template-columns: 1fr auto; text-align: right; }
  .tr-call--orig .tr-call__no, .tr-call--qr .tr-call__no { order: 2; }
  .tr-call--weight { top: 245px; }
  .tr-call--log { top: 386px; }
  .tr-call--orig { top: 425px; }
  .tr-call--qr { top: 648px; }
  .tr-call::before {
    content: "";
    position: absolute;
    top: 12.5px;
    z-index: -1;
    width: 92px;
    height: 1.5px;
    pointer-events: none;
    transform-origin: left center;
  }
  .tr-call--weight::before, .tr-call--log::before {
    right: 100%;
    transform-origin: right center;
    background: linear-gradient(270deg, rgba(125, 122, 255, .9), rgba(41, 151, 255, .9));
  }
  .tr-call--orig::before, .tr-call--qr::before {
    left: 100%;
    background: linear-gradient(90deg, rgba(125, 122, 255, .9), rgba(41, 151, 255, .9));
  }
  /* 선이 종이 밑으로 들어가도록 — 종이가 선을 덮는다. */
  .tr-scene { z-index: 4; }
  .tr-callouts { z-index: 2; }
}

/* ── 네 원칙 ── */
.tr-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(72px, 9vw, 120px);
}
.tr-pr {
  position: relative;
  isolation: isolate;
  padding: 26px 24px 28px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  overflow: hidden;
}
.tr-pr::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 151, 255, .8), rgba(191, 90, 242, .8), transparent);
}
.tr-pr__top { display: flex; align-items: center; justify-content: space-between; }
.tr-pr__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #6cb8ff;
  background: rgba(41, 151, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(41, 151, 255, .25);
}
.tr-pr__ico .ico { width: 22px; height: 22px; }
.tr-pr__no { font-size: 12px; font-weight: 600; color: #6e6e73; }
/* 카드 오른쪽 아래의 커다란 흐린 아이콘 — 조항이 하나뿐인 카드도 비어 보이지 않게. */
.tr-pr__mark { position: absolute; right: -26px; bottom: -30px; z-index: -1; color: #2997ff; opacity: .045; pointer-events: none; }
.tr-pr__mark .ico { width: 136px; height: 136px; stroke-width: 1; }
.tr-pr__key {
  margin-top: 22px;
  font-size: clamp(32px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.045em;
  background: linear-gradient(90deg, #f5f5f7 20%, #a9c8ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tr-pr__what { margin-top: 6px; font-size: 14px; color: #86868b; }
.tr-pr__clauses { display: grid; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tr-pr__clauses li { display: grid; gap: 4px; }
.tr-pr__tag {
  justify-self: start;
  margin-bottom: 3px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6cb8ff;
  background: rgba(41, 151, 255, .12);
}
.tr-pr__clauses strong { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: #f5f5f7; }
.tr-pr__clauses li > span:last-child { font-size: 14px; line-height: 1.5; color: #a1a1a6; }

/* ── 인용 ── */
.tr-quote { position: relative; max-width: 1000px; margin: clamp(80px, 10vw, 132px) auto 0; text-align: center; }
.tr-quote::before {
  content: "\201C";
  display: block;
  height: .5em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 140px;
  font-weight: 700;
  line-height: .9;
  background: linear-gradient(90deg, #2997ff, #7d7aff 52%, #f064bd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tr-quote blockquote { margin: 0; }
.tr-quote blockquote span { display: block; text-wrap: balance; }
.tr-quote blockquote span + span { margin-top: .25em; }
.tr-quote blockquote p {
  font-size: clamp(22px, 2.5vw, 33px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.035em;
  color: #f5f5f7;
  text-wrap: balance;
}
.tr-quote strong {
  font-weight: 700;
  background: linear-gradient(90deg, #2997ff, #7d7aff 52%, #f064bd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tr-quote figcaption {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14px;
  color: #86868b;
}
.tr-quote figcaption::before { content: ""; width: 32px; height: 1px; background: rgba(255, 255, 255, .3); }

/* ── 신뢰 장의 움직임: 종이가 내려앉고, 지시선이 차례로 그어진다 ── */
.tr-stage[data-reveal] .tr-paper,
.tr-stage[data-reveal] .tr-sheet--back {
  transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) .1s, opacity .9s ease .1s;
}
.tr-stage[data-reveal]:not(.is-in) .tr-paper {
  opacity: 0;
  transform: rotateX(34deg) rotateY(-12deg) rotateZ(-7deg) translateY(60px);
}
.tr-stage[data-reveal]:not(.is-in) .tr-sheet--back {
  opacity: 0;
  transform: rotateX(34deg) rotateY(-12deg) rotateZ(6deg) translate(40px, 80px);
}
.tr-stage[data-reveal] .tr-pin { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease; }
.tr-stage[data-reveal]:not(.is-in) .tr-pin { opacity: 0; transform: scale(.3); }
.tr-stage[data-reveal] .tr-pin--weight { transition-delay: 1.05s; }
.tr-stage[data-reveal] .tr-pin--log { transition-delay: 1.2s; }
.tr-stage[data-reveal] .tr-pin--orig { transition-delay: 1.35s; }
.tr-stage[data-reveal] .tr-pin--qr { transition-delay: 1.5s; }
@media (min-width: 1180px) {
  .tr-stage[data-reveal] .tr-call { transition: opacity .6s ease, translate .6s ease; }
  .tr-stage[data-reveal] .tr-call::before { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
  .tr-stage[data-reveal]:not(.is-in) .tr-call { opacity: 0; translate: 0 8px; }
  .tr-stage[data-reveal]:not(.is-in) .tr-call::before { transform: scaleX(0); }
  .tr-stage[data-reveal] .tr-call--weight,
  .tr-stage[data-reveal] .tr-call--weight::before { transition-delay: 1.15s; }
  .tr-stage[data-reveal] .tr-call--log,
  .tr-stage[data-reveal] .tr-call--log::before { transition-delay: 1.3s; }
  .tr-stage[data-reveal] .tr-call--orig,
  .tr-stage[data-reveal] .tr-call--orig::before { transition-delay: 1.45s; }
  .tr-stage[data-reveal] .tr-call--qr,
  .tr-stage[data-reveal] .tr-call--qr::before { transition-delay: 1.6s; }
}

/* ══════════════════════ 차별점 (#edge) ══════════════════════ */

#edge.ed {
  background:
    radial-gradient(46% 36% at 10% 16%, rgba(191, 90, 242, .13), transparent 72%),
    radial-gradient(44% 38% at 92% 88%, rgba(41, 151, 255, .13), transparent 72%),
    #0b0b0c;
}

.ed-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ed-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 28px;
  background: linear-gradient(180deg, #19191c, #121214);
  transition: border-color .3s ease, translate .4s cubic-bezier(.2, .8, .2, 1);
}
.ed-tile::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  z-index: -1;
  height: 70%;
  background: radial-gradient(closest-side, rgba(41, 151, 255, .14), transparent);
  pointer-events: none;
}
.ed-tile:nth-child(even)::before { background: radial-gradient(closest-side, rgba(191, 90, 242, .13), transparent); }
.ed-tile:hover { border-color: rgba(125, 122, 255, .35); }
.ed-tile__art { flex: 1; display: grid; place-items: center; min-height: 220px; }
.ed-tile__text { margin-top: 24px; }
.ed-tile__no { font-size: 12px; font-weight: 600; color: #6e6e73; }
.ed-tile h3 { margin-top: 6px; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; letter-spacing: -.035em; color: #f5f5f7; }
.ed-tile__text p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #a1a1a6; }

/* ★넓은 칸(01 · 04 · 05)은 글을 왼쪽 아래, 그림을 오른쪽에 — 좁은 칸과 모양이 엇갈려 격자가 단조롭지 않다. */
.ed-tile--chip, .ed-tile--plug, .ed-tile--qr {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 24px;
  align-items: end;
}
.ed-tile--chip .ed-tile__art, .ed-tile--plug .ed-tile__art, .ed-tile--qr .ed-tile__art { grid-column: 2; grid-row: 1; align-self: stretch; }
.ed-tile--chip .ed-tile__text, .ed-tile--plug .ed-tile__text, .ed-tile--qr .ed-tile__text { grid-column: 1; grid-row: 1; margin-top: 0; }

.ea { font-size: 13px; color: #c7c7cc; }
.ea--plain .ico { width: 64px; height: 64px; color: #6cb8ff; }

/* 01 멀티벤더 — 서로 다른 인디케이터 셋이 설정 한 장으로 모인다. */
.ea--vendor { display: grid; grid-template-columns: auto minmax(36px, 70px) auto; align-items: stretch; }
.ea-devs { display: grid; gap: 12px; align-content: center; }
.ea-dev {
  display: grid;
  grid-template-areas: "lcd keys" "fmt fmt";
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: linear-gradient(180deg, #2b2b2f, #1b1b1e);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.ea-dev:nth-child(2) { translate: 16px 0; }
.ea-dev__lcd {
  grid-area: lcd;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 20px;
  letter-spacing: .08em;
  color: #8fcaff;
  background: #06121f;
  text-shadow: 0 0 10px rgba(41, 151, 255, .85);
}
.ea-dev__keys { grid-area: keys; display: grid; grid-template-columns: repeat(2, 8px); gap: 4px; align-content: center; }
.ea-dev__keys i { width: 8px; height: 8px; border-radius: 2px; background: #3c3c42; }
.ea-dev__fmt { grid-area: fmt; font-size: 11px; color: #86868b; }
.ea-wires { width: 100%; height: 100%; overflow: visible; }
.ea-wires path { fill: none; stroke: rgba(108, 184, 255, .75); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.ea-cfg {
  align-self: center;
  min-width: 196px;
  padding: 16px 18px;
  border: 1px solid rgba(41, 151, 255, .4);
  border-radius: 16px;
  background: rgba(20, 28, 44, .75);
  box-shadow: 0 0 44px rgba(41, 151, 255, .18);
}
.ea-cfg__h { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #f5f5f7; }
.ea-cfg__h span { margin-left: 4px; font-size: 11px; font-weight: 500; color: #86868b; }
.ea-cfg dl div { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; }
.ea-cfg dl div:last-child { border-bottom: 0; }
.ea-cfg dt { color: #a1a1a6; }
.ea-cfg dd { font-weight: 600; color: #fff; }
.ea-cfg__more dd { font-weight: 500; color: #86868b; }

/* 02 수정 불가 원장 — 자물쇠 + 쌓이기만 하는 장부. */
.ea--ledger { display: grid; justify-items: center; gap: 20px; width: 100%; }
.ea-lock { width: 84px; height: auto; filter: drop-shadow(0 10px 30px rgba(125, 122, 255, .5)); }
.ea-rows { display: grid; gap: 6px; width: 100%; max-width: 280px; font-family: var(--font-num); font-size: 12.5px; }
.ea-rows li {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}
.ea-rows b { font-weight: 600; color: #8fcaff; }
.ea-rows span { color: #c7c7cc; }
.ea-rows .is-new { border-color: rgba(41, 151, 255, .55); background: rgba(41, 151, 255, .12); box-shadow: 0 0 20px rgba(41, 151, 255, .2); }
.ea-rows .is-no { opacity: .6; }
.ea-rows .is-no b { color: #a1a1a6; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ea-rows .is-no span { color: #86868b; font-family: "Pretendard Variable", Pretendard, sans-serif; }

/* 03 저품질 회선 — 신호 한 칸이어도 글은 바로, 영상은 밤에. */
.ea--signal { display: grid; justify-items: center; gap: 20px; width: 100%; }
.ea-bars { display: flex; align-items: flex-end; gap: 7px; height: 68px; }
.ea-bars i { width: 15px; border: 1.5px dashed rgba(255, 255, 255, .22); border-radius: 4px; }
.ea-bars i:nth-child(1) { height: 25%; }
.ea-bars i:nth-child(2) { height: 50%; }
.ea-bars i:nth-child(3) { height: 75%; }
.ea-bars i:nth-child(4) { height: 100%; }
.ea-bars .is-on { border: 0; background: linear-gradient(#7d7aff, #2997ff); box-shadow: 0 0 18px rgba(41, 151, 255, .65); }
.ea-lanes { display: grid; gap: 12px; width: 100%; max-width: 290px; }
.ea-lane { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.ea-lane span { color: #a1a1a6; }
.ea-lane b { font-weight: 700; color: #f5f5f7; }
.ea-lane i { height: 4px; border-radius: 4px; }
.ea-lane--now i { background: linear-gradient(90deg, #2997ff, #7d7aff); box-shadow: 0 0 12px rgba(41, 151, 255, .55); }
.ea-lane--night i { background: repeating-linear-gradient(90deg, rgba(191, 90, 242, .75) 0 6px, transparent 6px 12px); }
.ea-note { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; font-size: 12px; color: #a1a1a6; }

/* 04 연동 규격 — 커다란 중괄호가 곧 JSON 의 괄호다. */
.ea--api { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ea-brace {
  font-size: 176px;
  font-weight: 200;
  line-height: .8;
  background: linear-gradient(180deg, #2997ff, #7d7aff 55%, #f064bd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(125, 122, 255, .35));
}
.ea-api__body { min-width: 0; }
.ea-api__req { font: 600 12px/1 var(--font-num); color: #a1a1a6; }
.ea-api__req b { margin-right: 6px; color: #6cb8ff; }
.ea-json { margin: 12px 0 0; font: 13.5px/1.7 var(--font-num); white-space: pre; color: #d1d1d6; }
.ea-json .k { color: #b3bcff; }
.ea-json .s { color: #8fcaff; }
.ea-json .b { color: #f39bd4; }
.ea-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ea-chips span { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: #d1d1d6; background: rgba(255, 255, 255, .08); }

/* 05 QR — 찍으면 웹 화면으로 원장이 열린다. */
.ea--qr { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.ea-scan { position: relative; flex: none; width: 184px; padding: 14px; }
.ea-scan__qr { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.ea-scan__c { position: absolute; width: 24px; height: 24px; border: 3px solid #2997ff; filter: drop-shadow(0 0 6px rgba(41, 151, 255, .8)); }
.ea-scan__c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.ea-scan__c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.ea-scan__c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.ea-scan__c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.ea-scan__line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #6cb8ff, transparent);
  box-shadow: 0 0 14px 2px rgba(41, 151, 255, .75);
}
.ea-arrow { flex: none; width: 52px; height: 12px; overflow: visible; }
.ea-arrow path { fill: none; stroke: #7d7aff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ea-web {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
  border-radius: 14px;
  color: #1d1d1f;
  background: #f5f5f7;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
}
.ea-web__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; font-size: 11px; color: #6e6e73; background: #e3e3e8; }
.ea-web__bar i { width: 7px; height: 7px; border-radius: 50%; background: #b8b8bf; }
.ea-web__bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-web dl { display: grid; gap: 7px; padding: 12px 14px 14px; }
.ea-web dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ea-web dt { white-space: nowrap; color: #6e6e73; }
.ea-web dd { font-weight: 700; }

/* 06 사내망 조회 — 계근대 → 사내망 → 사무실 PC. 인터넷 줄은 끊겨 있다. */
.ea--lan { display: grid; justify-items: center; width: 100%; }
.ea-node { display: grid; justify-items: center; gap: 6px; font-size: 12px; color: #c7c7cc; }
.ea-node svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  fill: none;
  stroke: #8fcaff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(255, 255, 255, .05);
}
.ea-node--station svg { width: 52px; height: 52px; border-color: rgba(41, 151, 255, .5); background: rgba(41, 151, 255, .14); box-shadow: 0 0 26px rgba(41, 151, 255, .35); }
.ea-link--v { width: 2px; height: 20px; margin-top: 6px; background: linear-gradient(#2997ff, #7d7aff); }
.ea-node--switch span { padding: 5px 16px; border: 1px solid rgba(125, 122, 255, .45); border-radius: 999px; font-weight: 600; color: #dcdbff; background: rgba(125, 122, 255, .16); }
.ea-fan { position: relative; width: 106px; height: 18px; margin-top: 16px; border: 2px solid rgba(125, 122, 255, .65); border-bottom: 0; border-radius: 9px 9px 0 0; }
.ea-fan::before { content: ""; position: absolute; left: 50%; top: -18px; width: 2px; height: 16px; margin-left: -1px; background: rgba(125, 122, 255, .65); }
.ea-pcs { display: flex; gap: 46px; margin-top: 2px; }
.ea-pcs .ea-node { width: 62px; }
.ea-cloud {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 5px 12px;
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: 12px;
  color: #a1a1a6;
}
.ea-cloud svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ── 대리점 협력 ── */
.ed-partner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: 18px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(41, 151, 255, .09), rgba(191, 90, 242, .06) 60%, rgba(255, 255, 255, .01)),
    #141416;
}
.ed-partner__eyebrow { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #6cb8ff; }
.ed-partner h3 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; letter-spacing: -.035em; color: #f5f5f7; }
.ed-partner__copy > p:last-child { margin-top: 14px; font-size: 16px; line-height: 1.65; color: #a1a1a6; }
.ed-partner__table { width: 100%; border-collapse: collapse; }
.ed-partner__table th,
.ed-partner__table td { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: left; vertical-align: middle; }
.ed-partner__table tr:first-child th,
.ed-partner__table tr:first-child td { border-top: 1px solid rgba(255, 255, 255, .1); }
.ed-partner__table th { width: 40%; font-size: 16px; font-weight: 600; white-space: nowrap; color: #f5f5f7; }
.ed-partner__table td { padding-left: 16px; font-size: 15px; line-height: 1.5; color: #a1a1a6; }
.ed-partner__ico {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  border-radius: 10px;
  vertical-align: middle;
  color: #6cb8ff;
  background: rgba(41, 151, 255, .12);
}
.ed-partner__ico .ico { width: 18px; height: 18px; }
.ed-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 차별점 장의 움직임: 장부에 새 줄이 들어오고, QR 위로 스캔 빛이 지나간다 ── */
.ed-tile[data-reveal] .ea-rows .is-new { transition: opacity .6s ease .7s, translate .6s cubic-bezier(.2, .8, .2, 1) .7s; }
.ed-tile[data-reveal]:not(.is-in) .ea-rows .is-new { opacity: 0; translate: 0 -10px; }
.ed-tile[data-reveal].is-in .ea-scan__line { animation: ea-scan 2.8s ease-in-out .6s infinite; }
@keyframes ea-scan {
  0%, 100% { transform: translateY(-66px); opacity: 0; }
  12%, 88% { opacity: 1; }
  50% { transform: translateY(66px); }
}

/* ══════════════════════ 중간 CTA 띠 (.ctaband) ══════════════════════ */

.ctaband.cb { padding-block: clamp(44px, 6vw, 76px); border: 0; background: #000; }
.cb__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: center;
  padding: clamp(28px, 4vw, 50px) clamp(24px, 5vw, 64px);
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 32px;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(41, 151, 255, .30), transparent 60%) padding-box,
    radial-gradient(60% 120% at 100% 100%, rgba(240, 100, 189, .22), transparent 60%) padding-box,
    linear-gradient(120deg, #0a1628, #141132 50%, #230f26) padding-box,
    linear-gradient(90deg, #2997ff, #7d7aff 52%, #f064bd) border-box;
  box-shadow: 0 30px 90px -20px rgba(41, 151, 255, .35), 0 0 0 1px rgba(255, 255, 255, .04);
}
.cb__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.cb__glow--a { left: -120px; top: -180px; width: 420px; height: 360px; background: radial-gradient(closest-side, rgba(41, 151, 255, .45), transparent); }
.cb__glow--b { right: 12%; bottom: -220px; width: 460px; height: 360px; background: radial-gradient(closest-side, rgba(191, 90, 242, .35), transparent); }
/* 진입할 때 한 번 지나가는 빛줄기. 스크립트가 없으면 화면 밖에 머문다. */
.cb__panel::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -35%;
  z-index: -1;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
}
.cb__panel[data-reveal].is-in::after { animation: cb-sheen 1.8s cubic-bezier(.4, 0, .2, 1) .5s 1 both; }
@keyframes cb-sheen {
  from { translate: 0 0; }
  to { translate: 560% 0; }
}
.cb__title { font-size: clamp(26px, 3.1vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.045em; color: #fff; }
.cb__lead { margin-top: 10px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: #d1d1d6; }
.cb__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cb__steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 13.5px;
  color: #ececf1;
  background: rgba(255, 255, 255, .07);
}
.cb__steps .num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2997ff, #7d7aff);
}
.btn.cb__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 32px;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(125, 160, 255, .32), 0 0 34px rgba(41, 151, 255, .55), 0 18px 50px rgba(41, 151, 255, .4);
  transition: background .2s ease, box-shadow .25s ease, translate .25s ease;
}
.btn.cb__btn:hover { background: #eaf3ff; box-shadow: 0 0 0 7px rgba(125, 160, 255, .4), 0 0 44px rgba(41, 151, 255, .7), 0 22px 60px rgba(41, 151, 255, .5); translate: 0 -1px; }
.cb__btn span { font-size: 1.35em; line-height: 0; transition: translate .2s ease; }
.cb__btn:hover span { translate: 3px 0; }

/* ══════════════════════ 폭에 따라 ══════════════════════ */

@media (max-width: 1179px) {
  .tr-scene { --tilt: rotateX(7deg) rotateY(-4deg) rotateZ(-1.2deg); --tilt-back: rotateX(7deg) rotateY(-4deg) rotateZ(2.4deg) translate(14px, 10px); }
}
@media (max-width: 1000px) {
  .tr-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-tile--chip, .ed-tile--plug, .ed-tile--qr { grid-column: span 2; }
  /* ★두 칸 격자에서는 06 이 홀로 남아 옆자리가 빈다 — 06 도 넓은 칸 모양으로 편다. */
  .ed-tile--chart {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: end;
  }
  .ed-tile--chart .ed-tile__art { grid-column: 2; grid-row: 1; }
  .ed-tile--chart .ed-tile__text { grid-column: 1; grid-row: 1; margin-top: 0; }
  .ed-partner { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ed-tile--chip, .ed-tile--plug, .ed-tile--qr, .ed-tile--chart { display: flex; flex-direction: column; align-items: stretch; }
  .ed-tile--chip .ed-tile__text, .ed-tile--plug .ed-tile__text,
  .ed-tile--qr .ed-tile__text, .ed-tile--chart .ed-tile__text { margin-top: 24px; }
  .cb__panel { grid-template-columns: 1fr; }
  .btn.cb__btn { justify-self: start; }
}
@media (max-width: 640px) {
  .tr-scene { --tilt: rotateX(5deg) rotateZ(-1deg); --tilt-back: rotateX(5deg) rotateZ(1.6deg) translate(4px, 9px); }
  .tr-paper { padding: 1.9em 1.8em 1.7em; }
  .tr-pin--weight, .tr-pin--log { right: -1.65em; }
  .tr-pin--orig, .tr-pin--qr { left: -1.65em; }
  .tr-callouts { grid-template-columns: 1fr; }
  .tr-note { justify-content: flex-start; text-align: left; }
  .tr-principles { grid-template-columns: 1fr; gap: 12px; }
  /* ★모바일에서는 원칙 카드를 «아이콘 | 낱말·한 줄» 가로 머리로 줄인다. 세로로 쌓았더니 카드 한 장이
     300px 안팎의 빈 공간이라 신뢰 장만 3,100px 이었다(개편 검토 지적). 조항 목록은 그대로 다 보인다. */
  .tr-pr {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico key" "ico what" "cl cl";
    column-gap: 14px; padding: 18px 18px 20px;
  }
  .tr-pr__top { grid-area: ico; align-self: start; }
  .tr-pr__no, .tr-pr__mark { display: none; }
  .tr-pr__key { grid-area: key; margin-top: 0; font-size: 24px; }
  .tr-pr__what { grid-area: what; margin-top: 2px; }
  .tr-pr__clauses { grid-area: cl; margin-top: 14px; }
  .tr-callouts { gap: 10px; margin-top: 26px; }
  .tr-quote { text-align: left; }
  .tr-quote::before { font-size: 96px; }
  .tr-quote blockquote p { font-size: 22px; }
  .ed-bento { grid-template-columns: 1fr; gap: 14px; }
  .ed-tile, .ed-tile--chip, .ed-tile--plug, .ed-tile--qr, .ed-tile--chart { grid-column: auto; min-height: 0; padding: 24px; border-radius: 24px; }
  .ed-tile__art { min-height: 0; }
  .ea--vendor { grid-template-columns: auto 34px minmax(0, 1fr); }
  .ea-dev { padding: 8px 9px; }
  .ea-dev:nth-child(2) { translate: 8px 0; }
  .ea-dev__lcd { font-size: 14px; padding: 3px 7px; }
  .ea-cfg { min-width: 0; padding: 12px 12px; }
  .ea-cfg dl div { gap: 8px; font-size: 11.5px; }
  .ea-brace { font-size: 96px; }
  .ea-json { font-size: 11px; }
  .ea-scan { width: 164px; }
  .ea--qr { flex-direction: column; gap: 12px; }
  .ea-arrow { rotate: 90deg; }
  .ea-web { flex-basis: auto; width: 100%; }
  .ed-partner { padding: 24px; border-radius: 24px; }
  .ed-partner__table th, .ed-partner__table td { display: block; width: auto; padding: 0; border: 0; }
  .ed-partner__table tr { display: block; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .ed-partner__table tr:first-child th, .ed-partner__table tr:first-child td { border-top: 0; }
  .ed-partner__table td { margin-top: 6px; padding-left: 46px; }
  .cb__panel { border-radius: 26px; }
  .btn.cb__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ea-scan__line { animation: none !important; }
  .cb__panel::after { animation: none !important; }
  .ed-tile, .btn.cb__btn, .cb__btn span { transition: none; }
}