/* =========================================================
   DOOGO GROUP — about-vision.css
   그룹 소개 › 비전과 철학 › 다섯 가지 약속 (.ab-vows-stage) — about.css 다음에 읽힘
   · 유리 타일 5장: 반투명 면(.ab-vow-face) 위에 3D 메달(.ab-vow-orb) · 겹친 윤곽의 큰 숫자(.ab-vow-num) · 글
   · 빛 줄기(.ab-vows-beam, SVG): about-vision.js 가 메달 중심을 이어 그림
       1180px 이상 = 한 줄 5장, 메달은 타일 윗변에 걸치고 빛 줄기는 윗변을 따라 01→05
       1179px 이하 = 세로 목록, 메달은 왼쪽 레일 위 · 빛 줄기는 위→아래 (720px 미만은 한 칸 카드)
   · 상태(about-vision.js): .is-armed(등장 전 · 움직임 켜짐) → 타일 .is-up(일어섬) → .is-lit(빛이 닿음)
       → 무대 .is-done → .is-live(가끔 빛 한 점이 다시 지나가며 메달이 맥박) · .is-paused(화면 밖이면 정지)
   · html.motion-off · 스크립트 없음: .is-armed 가 없으니 처음부터 다 켜진 정지 그림
   ========================================================= */

.ab-vows-stage {
  --orb: clamp(58px, 4.7vw, 68px);
  --pad: clamp(18px, 1.6vw, 24px);
  --vow-r: 22px;
  --P: 7.5s;      /* 반복 빛 한 바퀴 */
  --c0: 1.4s;     /* 첫 반복까지 쉼 */
  position: relative; margin-top: clamp(64px, 7vw, 104px);
}

/* ---------- 빛 줄기 (SVG · 메달 뒤) ---------- */
.ab-vows-beam { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.ab-vows-beam path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ab-vows-rail { stroke: rgba(160, 195, 255, .2); stroke-width: 1; }
.ab-vows-lit { stroke: #9DC0FF; stroke-width: 1.6; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ab-vows-lit--glow { stroke: #2F78F2; stroke-width: 7; opacity: .75; }
/* 반복 빛 한 점: 번진 빛(--glow) + 옅은 꼬리(--tail) + 흰 머리(--head) — 앞 끝을 맞춰 함께 달림 */
.ab-vows-comet { opacity: 0; }
.ab-vows-comet--glow { stroke: #4A8EFF; stroke-width: 12; stroke-dasharray: .1 4; stroke-dashoffset: .1; }
.ab-vows-comet--tail { stroke: #A9C8FF; stroke-width: 2; stroke-linecap: butt; stroke-dasharray: .075 4; stroke-dashoffset: .075; }
.ab-vows-comet--head { stroke: #fff; stroke-width: 3; stroke-dasharray: .018 4; stroke-dashoffset: .018; }
.ab-vows-head { opacity: 0; transition: opacity .5s var(--ease); }
.ab-vows-head-core { fill: #fff; }
.ab-vows-stage.is-drawing .ab-vows-head { opacity: 1; }
.ab-vows-stage.is-armed .ab-vows-lit { stroke-dashoffset: 1; }

/* 앞 끝이 0 → 1.15 로 (한 바퀴의 40% 동안 · 나머지는 쉼) — about-vision.js 의 TRAVEL · OVER 와 같게 */
.ab-vows-stage.is-live .ab-vows-comet { animation: vowCometG var(--P) linear var(--c0) infinite both; }
.ab-vows-stage.is-live .ab-vows-comet--glow { opacity: .95; }
.ab-vows-stage.is-live .ab-vows-comet--tail { opacity: .85; animation-name: vowCometT; }
.ab-vows-stage.is-live .ab-vows-comet--head { opacity: 1; animation-name: vowCometH; }
@keyframes vowCometG { 0% { stroke-dashoffset: .1; } 40%, 100% { stroke-dashoffset: -1.05; } }
@keyframes vowCometT { 0% { stroke-dashoffset: .075; } 40%, 100% { stroke-dashoffset: -1.075; } }
@keyframes vowCometH { 0% { stroke-dashoffset: .018; } 40%, 100% { stroke-dashoffset: -1.132; } }

/* ---------- 목록 · 타일 ---------- */
.ab-vows { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; perspective: 1500px; perspective-origin: 50% 0%; }
.ab-vow { position: relative; display: flex; transform-origin: 50% 100%; }
/* 카드는 평면(flat)으로 둠: preserve-3d 로 기울이면 크롬이 글자를 낮은 해상도로 그려 흐려짐 → 메달·숫자의 깊이는 시차(--ox/--oy)로 */
.ab-vow-card { position: relative; flex: 1; min-width: 0; border-radius: var(--vow-r); }

/* 유리 면: 반투명 판 + 윗왼쪽이 밝은 테두리 + 빛이 닿으면 메달 쪽에서 번지는 푸른빛 */
.ab-vow-face {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .012)),
    rgba(14, 27, 52, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 34px 60px -34px rgba(0, 0, 0, .9);
  transition: box-shadow .6s var(--ease), background-color .6s var(--ease);
}
.ab-vow-face::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 58% at var(--lx, 16%) var(--ly, 0%), rgba(31, 108, 238, .4), rgba(10, 93, 226, .1) 50%, transparent 78%),
    radial-gradient(120% 60% at 50% 120%, rgba(10, 93, 226, .16), transparent 70%);
  transition: opacity 1.1s var(--ease);
}
.ab-vow-face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, rgba(170, 202, 255, .55), rgba(255, 255, 255, .1) 32%, rgba(255, 255, 255, .05) 64%, rgba(111, 162, 242, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* 마우스 빛(반사광): 커서 자리(--gx/--gy)를 따라감 */
.ab-vow-glare {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 20%), rgba(255, 255, 255, .16), rgba(190, 215, 255, .05) 28%, transparent 56%);
}
/* 빛이 닿을 때 한 번 지나가는 사선 광택 */
.ab-vow-sweep {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 70%; opacity: 0;
  background: linear-gradient(100deg, transparent 22%, rgba(170, 205, 255, .08) 40%, rgba(255, 255, 255, .22) 50%, rgba(170, 205, 255, .08) 60%, transparent 78%);
  transform: translateX(-120%) skewX(-14deg);
}

/* ---------- 3D 메달: 뒤 빛무리 · 기울어진 궤도 고리 · 유리 구슬 · 아이콘 · 맥박 고리 ---------- */
.ab-vow-orb {
  position: absolute; z-index: 2; width: var(--orb); height: var(--orb); pointer-events: none;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--ox, 0) * 1px), calc(var(--oy, 0) * 1px), 0) scale(calc(1 + var(--lift, 0) * .06));
}
.ab-vow-orb-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.ab-vow-orb-in > * { position: absolute; border-radius: 50%; }
.ab-vow-halo {
  inset: -70%;
  background: radial-gradient(closest-side, rgba(76, 141, 246, .5), rgba(10, 93, 226, .2) 42%, rgba(10, 93, 226, .06) 70%, transparent);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.ab-vow-ring {
  inset: -19%; transform-style: preserve-3d;
  border: 1px solid rgba(150, 190, 255, .28);
  transform: rotate(-24deg) rotateX(72deg) rotate(0deg);
  transition: opacity .9s var(--ease);
}
.ab-vow-ring::before { /* 궤도를 도는 밝은 호 */
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(111, 162, 242, .5) 82%, #DCE8FF 99%, transparent 99.5%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.6px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.6px));
}
.ab-vow-sphere {
  inset: 0;
  background:
    radial-gradient(36% 28% at 35% 23%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(76, 141, 246, .45) 80%, rgba(170, 205, 255, .8) 99%),
    radial-gradient(circle at 44% 36%, #2366D6, #0B3E9E 52%, #08245F 82%, #061840);
  box-shadow:
    inset 0 -6px 12px rgba(1, 8, 26, .5), inset 0 1px 1px rgba(255, 255, 255, .5),
    0 0 0 1px rgba(150, 190, 255, .22), 0 14px 26px -8px rgba(10, 93, 226, .75), 0 26px 40px -18px rgba(0, 0, 0, .8);
  transition: filter 1s var(--ease);
}
.ab-vow-ico {
  left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 0; overflow: visible;
  color: #fff; transform: translateZ(10px); filter: drop-shadow(0 2px 4px rgba(2, 12, 40, .55));
  transition: opacity .8s var(--ease);
}
.ab-vow-ping { inset: 0; border: 1.5px solid rgba(175, 205, 255, .95); opacity: 0; box-shadow: 0 0 12px rgba(76, 141, 246, .6); }

/* ---------- 겹친 윤곽의 큰 숫자 (앞 1장 + 뒤로 물러나는 윤곽들 = 두께) ---------- */
.ab-vow-num {
  position: absolute; z-index: 1; display: block; pointer-events: none;
  font-size: clamp(3.3rem, 4.3vw, 4.5rem); font-weight: 600; line-height: .8; letter-spacing: -.045em;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--ox, 0) * .55px), calc(var(--oy, 0) * .55px), 0);
}
.ab-vow-num b {
  position: relative; display: block; font-weight: inherit; color: transparent;
  -webkit-text-stroke: 1.15px rgba(178, 206, 255, .78);
  background: linear-gradient(180deg, rgba(235, 243, 255, .34), rgba(111, 162, 242, .1) 70%, rgba(111, 162, 242, .02));
  -webkit-background-clip: text; background-clip: text;
}
.ab-vow-num i {
  position: absolute; left: 0; top: 0; font-style: normal; color: transparent;
  -webkit-text-stroke: 1px rgba(90, 145, 240, calc(.4 - var(--k) * .045));
  transform: translate3d(calc(var(--k) * -.75px), calc(var(--k) * .75px), calc(var(--k) * -1.8px));
}

/* ---------- 글 ---------- */
.ab-vow-txt { position: relative; z-index: 1; }
.ab-vow-txt > * { position: relative; z-index: 1; } /* .ab-vow-txt 가 display: contents 인 배치에서도 유리 면(.ab-vow-face) 위에 */
.ab-vow h3 { font-size: clamp(1.06rem, 1.2vw, 1.22rem); font-weight: 700; line-height: 1.4; letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.ab-vow-en { margin-top: 10px; font-size: .68rem; font-weight: 600; line-height: 1.4; letter-spacing: .16em; color: var(--blue-300); }
.ab-vow-desc { margin-top: 12px; font-size: .9rem; line-height: 1.68; color: var(--on-dark-2); word-break: keep-all; }

/* ---------- 마우스: 들어 올림 · 메달과 숫자가 앞으로 · 반사광 (기울기는 about-vision.js) ---------- */
.ab-vow-card.is-hover .ab-vow-glare { opacity: 1; }
.ab-vow-card.is-hover .ab-vow-face { background-color: rgba(18, 34, 64, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 48px 70px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(111, 162, 242, .16); }

/* =========================================================
   배치
   ========================================================= */
/* 한 줄 5장 (1180px 이상) */
@media (min-width: 1180px) {
  /* 제목 · 영문 · 설명 줄을 다섯 장이 함께 맞춤 (subgrid: 한 장의 제목이 두 줄이 되면 모두 같은 높이로) */
  .ab-vows { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: clamp(12px, 1.15vw, 18px); row-gap: 0; padding-top: calc(var(--orb) / 2); }
  .ab-vow { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
  .ab-vow-card { grid-row: span 3; display: grid; grid-template-rows: subgrid; align-content: start; padding: calc(var(--orb) / 2 + 76px) var(--pad) 32px; }
  .ab-vow-txt { display: contents; }
  .ab-vow-orb { left: calc(var(--pad) - 2px); top: calc(var(--orb) / -2); }
  .ab-vow-num { right: calc(var(--pad) - 6px); top: 24px; }
}

/* 세로 목록 (1179px 이하): 왼쪽 레일 위에 메달, 오른쪽에 카드 */
@media (max-width: 1179px) {
  .ab-vows-stage { --orb: 54px; --gut: clamp(72px, 9vw, 96px); }
  .ab-vow { padding-left: var(--gut); }
  .ab-vow-face { --lx: 0%; --ly: 50%; }
  .ab-vow-sweep { width: 38%; }
  .ab-vow-orb { left: calc(var(--gut) / -2 - var(--orb) / 2); top: 50%; margin-top: calc(var(--orb) / -2); }
  .ab-vow-card { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; column-gap: clamp(20px, 3.4vw, 44px); min-height: 132px; padding: 26px clamp(22px, 3vw, 34px); }
  .ab-vow-txt { display: contents; }
  .ab-vow h3 { grid-column: 1; grid-row: 1; align-self: end; }
  .ab-vow-en { grid-column: 1; grid-row: 2; align-self: start; margin-top: 6px; }
  .ab-vow-desc { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .ab-vow-num { position: relative; grid-column: 3; grid-row: 1 / span 2; font-size: clamp(2.8rem, 5vw, 3.6rem); }
}
@media (max-width: 719px) {
  .ab-vows-stage { --orb: 40px; --gut: 56px; }
  .ab-vows { gap: 12px; }
  .ab-vow-orb { top: 22px; margin-top: 0; }
  .ab-vow-face { --ly: 0%; --lx: 0%; }
  .ab-vow-card { display: block; min-height: 0; padding: 20px 20px 22px; }
  .ab-vow-txt { display: block; }
  .ab-vow h3 { padding-right: 64px; font-size: 1.1rem; }
  .ab-vow-en { margin-top: 6px; font-size: .64rem; letter-spacing: .14em; }
  .ab-vow-desc { margin-top: 10px; font-size: .88rem; }
  .ab-vow-num { position: absolute; right: 16px; top: 16px; font-size: 2.6rem; }
  .ab-vow-ring { inset: -14%; }
}

/* =========================================================
   등장 · 불 켜짐 · 반복 (움직임 켜짐 · .is-armed 일 때만)
   ========================================================= */
/* 1) 비스듬히 누운 평면에서 01→05 차례로 일어섬 (--rd: 순서별 지연, about-vision.js) */
.ab-vows-stage.is-armed .ab-vow:not(.is-up) { opacity: 0; transform: translate3d(0, 80px, -160px) rotateX(66deg); }
.ab-vows-stage.is-armed .ab-vow.is-up { animation: vowRise 1.3s var(--rd, 0s) both; }
@keyframes vowRise {
  0% { opacity: 0; transform: translate3d(0, 80px, -160px) rotateX(66deg); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
  45% { opacity: 1; }
  72% { opacity: 1; transform: translate3d(0, -5px, 0) rotateX(-5deg); animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  100% { opacity: 1; transform: none; }
}
.ab-vows-stage.is-armed .ab-vow:not(.is-up) .ab-vow-txt > * { opacity: 0; }
.ab-vows-stage.is-armed .ab-vow.is-up .ab-vow-txt > * { animation: vowTxt .9s var(--ease) both; animation-delay: calc(var(--rd, 0s) + .5s + var(--n, 0) * .08s); }
.ab-vow-txt > :nth-child(2) { --n: 1; }
.ab-vow-txt > :nth-child(3) { --n: 2; }
@keyframes vowTxt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1179px) {
  .ab-vows-stage.is-armed .ab-vow:not(.is-up) { transform: translate3d(0, 56px, -120px) rotateX(54deg); }
  @keyframes vowRise {
    0% { opacity: 0; transform: translate3d(0, 56px, -120px) rotateX(54deg); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
    45% { opacity: 1; }
    72% { opacity: 1; transform: translate3d(0, -3px, 0) rotateX(-3deg); animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
    100% { opacity: 1; transform: none; }
  }
}

/* 2) 빛이 닿기 전: 메달은 어둡게 · 면의 푸른빛 꺼짐 → .is-lit 에서 켜지며 맥박 1번 + 광택 1번 */
.ab-vows-stage.is-armed .ab-vow:not(.is-lit) .ab-vow-sphere { filter: saturate(.3) brightness(.62); }
.ab-vows-stage.is-armed .ab-vow:not(.is-lit) .ab-vow-halo { opacity: 0; transform: scale(.55); }
.ab-vows-stage.is-armed .ab-vow:not(.is-lit) .ab-vow-ring { opacity: .25; }
.ab-vows-stage.is-armed .ab-vow:not(.is-lit) .ab-vow-ico { opacity: .4; }
.ab-vows-stage.is-armed .ab-vow:not(.is-lit) .ab-vow-face::before { opacity: 0; }
.ab-vows-stage.is-armed .ab-vow.is-lit .ab-vow-ping { animation: vowPing 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.ab-vows-stage.is-armed .ab-vow.is-lit .ab-vow-sweep { animation: vowSweep 1.6s cubic-bezier(.45, .1, .2, 1) .1s both; }
.ab-vows-stage.is-armed .ab-vow.is-lit .ab-vow-halo { animation: vowFlare 1.4s var(--ease) both; }
@keyframes vowPing { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes vowSweep { 0% { opacity: 1; transform: translateX(-120%) skewX(-14deg); } 100% { opacity: 1; transform: translateX(220%) skewX(-14deg); } }
@keyframes vowFlare { 0% { opacity: 0; transform: scale(.55); } 35% { opacity: 1; transform: scale(1.22); } 100% { opacity: 1; transform: none; } }

/* 3) 반복: 궤도 고리가 천천히 돌고, 빛 한 점이 01→05 를 지나며 메달마다 맥박 (--hit: 빛이 닿는 시각, about-vision.js) */
.ab-vows-stage.is-done .ab-vow-ring { animation: vowSpin 10s linear infinite; animation-delay: calc(var(--i, 0) * -2.1s); }
@keyframes vowSpin { from { transform: rotate(-24deg) rotateX(72deg) rotate(0deg); } to { transform: rotate(-24deg) rotateX(72deg) rotate(360deg); } }
.ab-vows-stage.is-live .ab-vow.is-lit .ab-vow-ping { animation: vowPingLoop var(--P) linear infinite none; animation-delay: calc(var(--c0) + var(--hit, 0s)); }
.ab-vows-stage.is-live .ab-vow.is-lit .ab-vow-halo { animation: vowHaloLoop var(--P) ease-out infinite none; animation-delay: calc(var(--c0) + var(--hit, 0s)); }
@keyframes vowPingLoop { 0% { opacity: .8; transform: scale(1); } 15%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes vowHaloLoop { 0%, 100% { transform: none; opacity: 1; } 6% { transform: scale(1.2); opacity: 1; } 24% { transform: none; } }
/* 화면 밖이면 정지 */
.ab-vows-stage.is-paused :is(.ab-vow-ring, .ab-vow-ping, .ab-vow-halo, .ab-vow-sweep, .ab-vows-comet) { animation-play-state: paused; }

/* 움직임 멈추기: 다 켜진 정지 그림 (base.css 의 html.motion-off 와 함께) */
html.motion-off .ab-vows-stage .ab-vow { opacity: 1 !important; transform: none !important; animation: none !important; }
html.motion-off .ab-vows-stage .ab-vow-txt > * { opacity: 1 !important; transform: none !important; animation: none !important; }
html.motion-off .ab-vows-stage :is(.ab-vow-card, .ab-vow-orb, .ab-vow-num) { transform: none !important; }
html.motion-off .ab-vows-stage .ab-vow-ring { animation: none !important; transform: rotate(-24deg) rotateX(72deg) rotate(0deg) !important; opacity: 1 !important; }
html.motion-off .ab-vows-stage :is(.ab-vow-ping, .ab-vow-sweep, .ab-vows-comet, .ab-vows-head) { animation: none !important; opacity: 0 !important; }
html.motion-off .ab-vows-stage :is(.ab-vow-halo, .ab-vow-ico) { animation: none !important; opacity: 1 !important; }
html.motion-off .ab-vows-stage .ab-vow-halo { transform: none !important; }
html.motion-off .ab-vows-stage .ab-vow-face::before { opacity: 1 !important; }
html.motion-off .ab-vows-stage .ab-vow-sphere { filter: none !important; }
html.motion-off .ab-vows-stage .ab-vows-lit { stroke-dashoffset: 0 !important; }