/* ─────────────────────────────────────────────────────────────────────────
   왼쪽 메뉴 «우리의 약속» 카드 옷 (2026-08-12 마스터 지시로 신설)

     "네가 이쁘게 직접 쓴 것처럼 해서 이쁘게 꾸며서 쓰고"

   PC 사이드바(.d-sidebar)와 폰 서랍(.m-drawer)이 같은 조각(_BrandCredo.cshtml)을 쓰므로
   옷도 한 벌이면 된다. 바탕이 짙은 남색이라 밝은 글자·은은한 빛으로 맞춘다.

   ★홈페이지 다른 색을 건드리지 않는다 — 전부 .sj-credo 안쪽에만 건다.
   ───────────────────────────────────────────────────────────────────────── */

.sj-credo {
  position: relative;
  overflow: hidden;
  margin: 14px 2px 6px;
  padding: 15px 15px 13px;
  /* ★한국어·중국어·일본어는 «낱말 안» 에서도 줄이 끊긴다 — 좁은 사이드바(248px)에서
     "…만들기 시작합니 / 다." 처럼 흉하게 잘렸다(2026-08-12 실측). 낱말 단위로만 끊게 한다.
     긴 영어 단어처럼 정말 한 줄에 못 담는 것만 예외로 끊는다(overflow-wrap). */
  word-break: keep-all;
  overflow-wrap: break-word;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, .28);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(56, 189, 248, .18) 0%, rgba(56, 189, 248, 0) 58%),
    radial-gradient(110% 90% at 100% 100%, rgba(217, 70, 239, .16) 0%, rgba(217, 70, 239, 0) 60%),
    rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* 카드 위를 아주 천천히 훑고 지나가는 빛 — 로고(.d-logo::after)와 같은 결. */
.sj-credo__shine {
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .13) 45%, transparent 100%);
  animation: sjCredoShine 6.5s ease-in-out infinite;
}
@keyframes sjCredoShine {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translateX(430%); opacity: 0; }
  100% { transform: translateX(430%); opacity: 0; }
}

.sj-credo__tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  color: #7DD3FC;
  margin-bottom: 8px;
}

.sj-credo__lead {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #CBD5E1;
}
.sj-credo__lead b {
  display: inline-block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  /* 글자에 물든 빛. 지원 안 하는 브라우저는 위 색(#CBD5E1)이 그대로 보인다 — 읽는 데 지장 없다. */
  background: linear-gradient(92deg, #E0F2FE 0%, #7DD3FC 45%, #F0ABFC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sj-credo__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 12.2px;
  line-height: 1.62;
  color: #94A3B8;
}
.sj-credo__list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 3px;
}
.sj-credo__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #38BDF8;
  font-size: 11px;
  font-weight: 800;
}

.sj-credo__sign {
  padding-top: 9px;
  border-top: 1px dashed rgba(148, 163, 184, .28);
  font-size: 11.8px;
  font-weight: 700;
  color: #FCD34D;
}

/* 폰 서랍은 자리가 좁다 — 여백만 줄이고 내용은 그대로 둔다. */
.m-drawer .sj-credo { margin: 12px 2px; padding: 13px; }
.m-drawer .sj-credo__lead b { font-size: 14.5px; }

/* 움직임을 싫어하는 설정에서는 빛이 흐르지 않는다(접근성). */
@media (prefers-reduced-motion: reduce) {
  .sj-credo__shine { animation: none; opacity: 0; }
}