/* ATLAS GROUP 메인 — 슬로건 아래 '네 개의 기둥'
   하늘을 떠받친 아틀라스처럼, 네 사업이 하나의 약속(고객과 함께합니다)을 떠받친다.
   들보(beam) → 기둥머리(cap) → 기둥(card, 사업별 세계) → 받침(plinth) → 바닥선(floor).
   반복 애니메이션은 '음수 지연 + fill-mode 없음'으로 작성 — 동작 줄이기/정지 상태에서는 기본값(완성된 화면)이 보인다. */

.pil-sec { padding-bottom: var(--sec-y); }
.pil-sec::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1180px, 130vw); height: 640px; translate: -50% 0; background: radial-gradient(closest-side, rgba(240, 212, 138, .13), transparent 74%); pointer-events: none; }
.pil-sec .slogan__h { font-size: clamp(44px, 7.4vw, 112px); }

/* ---------- 들보 · 바닥 ---------- */
.pil { position: relative; margin-top: clamp(56px, 7vw, 96px); }
.pil__beam { position: relative; height: 3px; margin-inline: -12px; background: linear-gradient(90deg, transparent, #a97f2f 5%, #f0d48a 28%, #d4ad58 50%, #f0d48a 72%, #a97f2f 95%, transparent); box-shadow: 0 0 24px rgba(240, 212, 138, .3), 0 10px 20px -8px rgba(0, 0, 0, .55); }
.pil__beam::after { content: ""; position: absolute; top: -3px; left: 0; width: 14%; height: 9px; translate: -50% 0; opacity: 0; background: radial-gradient(closest-side, rgba(255, 248, 225, .95), transparent); animation: pilBeam 9s var(--ease) infinite; pointer-events: none; }
@keyframes pilBeam { 0% { left: 0; opacity: 0; } 10%, 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pil__beam-t { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; padding: 8px 18px 7px; white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: .34em; color: var(--gold); background: var(--burgundy); border: 1px solid rgba(240, 212, 138, .5); box-shadow: 0 0 0 5px var(--burgundy); }
.pil__floor { position: relative; height: 1px; margin-inline: -12px; background: linear-gradient(90deg, transparent, rgba(240, 212, 138, .6) 10%, rgba(240, 212, 138, .6) 90%, transparent); }
.pil__floor::after { content: ""; position: absolute; left: 4%; right: 4%; top: 1px; height: 54px; background: radial-gradient(60% 100% at 50% 0, rgba(12, 3, 6, .42), transparent 72%); pointer-events: none; }
.pil__hint { display: none; }

/* ---------- 기둥 줄 ---------- */
.pil__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.9vw, 26px); }
.pil__col { position: relative; display: flex; flex-direction: column; min-width: 0; }

/* 기둥머리 · 받침 — 금박 테두리의 판 */
.pil__cap, .pil__plinth { position: relative; display: block; margin-inline: -7px; background: linear-gradient(180deg, #3d161e, #2b0f15); }
.pil__cap { height: 13px; border-bottom: 1px solid rgba(240, 212, 138, .72); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .65); }
.pil__plinth { height: 11px; border-top: 1px solid rgba(240, 212, 138, .72); border-bottom: 1px solid rgba(240, 212, 138, .3); }
.pil__cap::before { content: ""; position: absolute; left: 5px; right: 5px; top: 4px; height: 1px; background: rgba(240, 212, 138, .28); }
.pil__cap::after { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--pedge) 70%, transparent), transparent 92%); animation: pilCap 3.6s var(--ease) infinite; animation-delay: var(--pd, 0s); pointer-events: none; }
@keyframes pilCap { 0%, 60% { opacity: 0; } 70% { opacity: .85; } 100% { opacity: 0; } }

/* 기둥 본체 */
.pil__card { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; min-height: clamp(448px, 35vw, 506px); padding: 24px 22px 22px; overflow: hidden; background: var(--pbg); color: var(--pfg); --c: var(--pedge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 48px -26px rgba(10, 2, 5, .85); transition: box-shadow .35s var(--ease); }
.pil__card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, var(--pflute) 0 1px, transparent 1px 22px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.pil__card > .pil__edge { position: absolute; top: 0; bottom: 0; z-index: 3; width: 1px; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--pedge) 24%, transparent); transition: background .3s var(--ease); }
.pil__card > .pil__edge--l { left: 0; } .pil__card > .pil__edge--r { right: 0; }
.pil__edge::after { content: ""; position: absolute; left: 0; top: 100%; width: 1px; height: 40%; background: linear-gradient(180deg, transparent, var(--pedge), transparent); box-shadow: 0 0 10px var(--pedge); animation: pilRise 3.6s var(--ease) infinite; animation-delay: var(--pd, 0s); }
@keyframes pilRise { 0% { top: 100%; } 70%, 100% { top: -42%; } }
.pil__card:hover, .pil__card:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pedge) 40%, transparent), 0 34px 64px -26px color-mix(in srgb, var(--pedge) 34%, rgba(10, 2, 5, .9)); }
.pil__card:hover > .pil__edge, .pil__card:focus-visible > .pil__edge { background: color-mix(in srgb, var(--pedge) 60%, transparent); }
.pil__col:hover .pil__cap { border-bottom-color: var(--pedge); }
.pil__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.pil__top { display: flex; align-items: center; gap: 10px; }
.pil__no { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--pacc); }
.pil__top i { flex: 1; height: 1px; background: var(--pline); }
.pil__en { font: 700 11px/1 var(--f-mark); letter-spacing: .2em; color: var(--pfg2); white-space: nowrap; }
.pil__vis { position: relative; margin-top: 20px; height: 132px; border-radius: 10px; overflow: hidden; background: var(--pscreen); border: 1px solid var(--pline); }
.pil__ko { margin-top: 26px; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--pmute); }
.pil__promise { display: block; margin-top: 8px; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.38; font-weight: 700; letter-spacing: -.035em; color: var(--pfg); word-break: keep-all; }
.pil__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pil__chips span { padding: 7px 10px 6px; border-radius: 999px; border: 1px solid var(--pline2); background: var(--pchip); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--pfg2); word-break: keep-all; }
.pil__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 24px; font-size: 13.5px; font-weight: 700; color: var(--pacc); }
.pil__go .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.pil__card:hover .pil__go .ico { transform: translateX(4px); }

/* ---------- 사업별 세계 ---------- */
.pil--chain { --pedge: #45d4ff; --pacc: #b3a6ff; --pfg: #ecebf5; --pfg2: #c6c3d8; --pmute: #9a96b2; --pline: rgba(236, 235, 245, .12); --pline2: rgba(139, 108, 255, .42); --pchip: rgba(139, 108, 255, .09); --pscreen: rgba(255, 255, 255, .025); --pflute: rgba(255, 255, 255, .03);
  --pbg: radial-gradient(110% 52% at 88% 0%, rgba(139, 108, 255, .34), transparent 60%), radial-gradient(80% 42% at 0% 100%, rgba(69, 212, 255, .13), transparent 66%), linear-gradient(180deg, #120f21, #08070d); }
.pil--trade { --pedge: #eef1f5; --pacc: #c9d6ea; --pfg: #eef1f5; --pfg2: #cfd5df; --pmute: #aeb6c4; --pline: rgba(238, 241, 245, .12); --pline2: rgba(238, 241, 245, .26); --pchip: rgba(238, 241, 245, .05); --pscreen: rgba(238, 241, 245, .025); --pflute: rgba(238, 241, 245, .03);
  --pbg: radial-gradient(100% 48% at 86% 0%, rgba(159, 195, 255, .2), transparent 62%), linear-gradient(180deg, #14223d, #0b1220); }
.pil--platform { --pedge: #14b8a6; --pacc: #0f766e; --pfg: #0f1f1d; --pfg2: #33433f; --pmute: #56655f; --pline: #d6e3df; --pline2: rgba(15, 118, 110, .32); --pchip: rgba(20, 184, 166, .07); --pscreen: #ffffff; --pflute: rgba(15, 31, 29, .028);
  --pbg: radial-gradient(100% 44% at 90% 0%, rgba(20, 184, 166, .14), transparent 60%), linear-gradient(180deg, #ffffff, #edf3f1); }
.pil--lease { --pedge: #d4ad58; --pacc: #7a5a1e; --pfg: #4a1b25; --pfg2: #3a3a3a; --pmute: #6d675b; --pline: #d8cfbc; --pline2: rgba(74, 27, 37, .28); --pchip: rgba(74, 27, 37, .045); --pscreen: #fbf8f2; --pflute: rgba(74, 27, 37, .032);
  --pbg: radial-gradient(90% 44% at 86% 0%, rgba(200, 169, 106, .28), transparent 60%), linear-gradient(180deg, #f5f0e6, #e7e0d0); }
.pil--trade .pil__promise { color: #f4f6f9; text-shadow: 0 0 24px rgba(159, 195, 255, .25); }

/* ---------- 기둥 속 작은 화면 ---------- */
.pv { position: absolute; inset: 0; margin: 0; }
/* 01 블록체인 — 블록이 차례로 쌓이는 벌집 */
.pv-chain__svg { position: absolute; left: 0; top: 6px; width: 100%; height: 96px; }
.pv-hex { fill: url(#pvChainG); fill-opacity: .5; stroke: url(#pvChainG); stroke-width: 1; stroke-opacity: .95; animation: pvHex 3.6s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes pvHex { 0% { fill-opacity: .05; stroke-opacity: .3; } 12% { fill-opacity: .9; stroke-opacity: 1; } 50% { fill-opacity: .5; stroke-opacity: .9; } 100% { fill-opacity: .05; stroke-opacity: .3; } }
.pv-stat { position: absolute; left: 12px; right: 12px; bottom: 9px; display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: .14em; color: var(--pmute); }
.pv-stat b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #5cf2c0; }
.pv-stat i { width: 6px; height: 6px; border-radius: 50%; background: #5cf2c0; box-shadow: 0 0 8px #5cf2c0; animation: pvBlink 1.8s ease-in-out infinite; }
@keyframes pvBlink { 50% { opacity: .3; } }
/* 02 AI 자동매매 — 새벽에도 이어지는 선 */
.pv-trade__t { position: absolute; left: 12px; top: 11px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .16em; color: var(--pmute); }
.pv-moon { width: 11px; height: 11px; fill: #eef1f5; filter: drop-shadow(0 0 4px rgba(238, 241, 245, .7)); }
.pv-trade__svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 92px; }
.pv-trade__grid line { stroke: rgba(238, 241, 245, .07); stroke-width: 1; }
.pv-trade__area { fill: url(#pvTradeA); }
.pv-trade__line { fill: none; stroke: #eef1f5; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(238, 241, 245, .55)); animation: pvDraw 5.4s var(--ease) infinite; }
@keyframes pvDraw { 0% { stroke-dashoffset: 100; opacity: 1; } 62%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pv-trade__dot { position: absolute; left: calc(94.2% - 4px); top: 53px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(238, 241, 245, .5), 0 0 10px #fff; animation: pvPing 1.8s var(--ease) infinite; }
@keyframes pvPing { 0% { box-shadow: 0 0 0 0 rgba(238, 241, 245, .55), 0 0 10px #fff; } 100% { box-shadow: 0 0 0 12px rgba(238, 241, 245, 0), 0 0 10px #fff; } }
.pv-trade__scan { position: absolute; top: 36px; bottom: 0; left: 0; width: 1px; opacity: 0; background: linear-gradient(180deg, transparent, rgba(238, 241, 245, .55), transparent); animation: pvScan 5.4s var(--ease) infinite; }
@keyframes pvScan { 0% { left: 0; opacity: 0; } 4%, 58% { opacity: 1; } 62% { left: 94%; opacity: 0; } 100% { left: 94%; opacity: 0; } }
/* 03 ATLAS 플랫폼 — 먼저 챙기는 체크리스트 */
.pv-plat { list-style: none; padding: 12px; display: grid; align-content: center; gap: 7px; }
.pv-plat li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; background: #f4f8f7; border: 1px solid #e1ebe8; font-size: 12.5px; font-weight: 600; color: #0f1f1d; animation: pvRow 5.6s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes pvRow { 0%, 8% { background: #f4f8f7; border-color: #e1ebe8; } 16% { background: #e3f6f2; border-color: #a7ddd3; } 34%, 100% { background: #f4f8f7; border-color: #e1ebe8; } }
.pv-plat span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-plat b { font-size: 11.5px; font-weight: 700; color: #0f766e; }
.pv-plat b.warn { color: #b45309; }
.pv-chk { width: 18px; height: 18px; }
.pv-chk circle { fill: none; stroke: #0f766e; stroke-opacity: .32; stroke-width: 1.4; }
.pv-chk path { fill: none; stroke: #0f766e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: 0; animation: pvTick 5.6s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes pvTick { 0%, 8% { stroke-dashoffset: 10; } 20%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 10; } }
/* 04 AT오토리스 — 출고부터 만기까지 같은 담당자 */
.pv-lease { padding: 12px 16px 0 14px; }
.pv-lease__k { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: .16em; color: var(--pmute); }
.pv-lease__rail { position: relative; margin: 40px 12px 0 10px; height: 3px; border-radius: 3px; background: #e2d9c6; }
.pv-lease__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #a97f2f, #f0d48a 62%, #d4ad58); transform-origin: left center; animation: pvFill 6s var(--ease) infinite; }
@keyframes pvFill { 0% { transform: scaleX(0); opacity: 1; } 74%, 90% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.pv-lease__tick { position: absolute; top: -4px; width: 1px; height: 11px; translate: -.5px 0; background: #c9bfa9; }
.pv-lease__run { position: absolute; inset: 0; transform: translateX(100%); animation: pvRun 6s var(--ease) infinite; }
@keyframes pvRun { 0% { transform: translateX(0); opacity: 1; } 74%, 90% { transform: translateX(100%); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.pv-lease__car { position: absolute; left: 0; bottom: 7px; translate: -50% 0; display: grid; justify-items: center; gap: 2px; color: var(--burgundy); }
.pv-lease__car .ico { width: 22px; height: 22px; }
.pv-lease__car em { order: -1; padding: 3px 7px 2px; border-radius: 4px; background: var(--burgundy); color: var(--cream); font-size: 9.5px; font-style: normal; font-weight: 700; white-space: nowrap; letter-spacing: .02em; }
.pv-lease__at { width: 24px; height: auto; display: block; }
.pv-lease__m { position: relative; height: 12px; margin: 12px 12px 0 10px; font-size: 9.5px; letter-spacing: .06em; color: var(--pmute); }
.pv-lease__m span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.pv-lease__m span:first-child, .pv-lease__m span:last-child { color: var(--pacc); font-weight: 700; }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
  .pil__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .pil__card { min-height: 440px; }
  .pil__col:nth-child(n + 3) { margin-top: 0; }
  .pil__col:nth-child(n + 3) .pil__cap { border-top: 1px solid rgba(240, 212, 138, .5); }
}
@media (max-width: 640px) {
  .pil { margin-top: 48px; }
  .pil__beam, .pil__floor { margin-inline: 0; }
  .pil__beam-t { font-size: 9.5px; letter-spacing: .26em; padding: 7px 12px 6px; }
  .pil__row { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 320px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); padding: 0 var(--gut-r) 6px var(--gut-l); scroll-padding-inline: var(--gut-l); }
  .pil__row::-webkit-scrollbar { display: none; }
  .pil__col { scroll-snap-align: start; }
  .pil__card { min-height: 456px; padding: 22px 18px 20px; }
  .pil__hint { display: block; margin-top: 16px; text-align: center; font-size: 10.5px; letter-spacing: .16em; color: var(--cream-2); opacity: .8; }
}