/* ==========================================================================
   3D 입체 카드 (Animated 3D Card)
   components/ui/animated-3d-card.tsx 를 React·Tailwind 없이 옮긴 버전입니다.
   움직임(마우스를 따라 기울기, 빛 반사, 처음 보일 때 떠오르기)은 portal/animated-3d-card.js 에 있습니다.

   쓰는 곳: 첫 화면 '핵심 포털 서비스 한눈에 보기' 카드 4개 (portal.html #section-hero)
            보험 자료 폴더 카드 6개 (library.html #lib-folders)
   새로 쓰려면 카드들을 감싸는 곳의 id 를 아래 :is(...) 목록에 더하세요.
   - 카드: <a class="... a3d-card a3d--색이름"> 안에 a3d-bg · a3d-deco · a3d-shade · a3d-shine ·
           a3d-content · a3d-gloss 를 차례로 넣습니다. 새 카드를 만들 때는 기존 카드를 복사하세요.
   - 색이름(tsx 의 theme): primary(짙은 회청) · secondary(파랑) · accent(보라) · warning(호박)
                          success(초록) · info(청록) · indigo(남색) · rose(장미, tsx 의 gradient 로 따로 지정한 색)
   - 크기: tsx 의 size="sm"(높이 256px), variant="premium"(큰 그림자 + 흰 테두리)
   - 휴대폰(마우스 없음)에서는 기울기 대신 '바로 보기' 안내를 늘 보여 줍니다.
   - 움직임 줄이기 설정을 켠 사람에게는 기울기·등장 효과를 끕니다.
   ========================================================================== */

:root :is(#section-hero, #lib-folders) .quick-hub-grid.a3d-grid {
  gap: 24px;
  perspective: 1500px;
}

/* ---- 카드 틀 ---- */
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card {
  --a3d-rx: 0deg;
  --a3d-ry: 0deg;
  --a3d-z: 0px;
  --a3d-shine: 135deg;
  --a3d-press: 1;
  --a3d-from: #334155;
  --a3d-via: #1E293B;
  --a3d-to: #0F172A;

  position: relative;
  display: block;
  min-height: 256px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--a3d-via);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  transform: rotateX(var(--a3d-rx)) rotateY(var(--a3d-ry)) translateZ(var(--a3d-z)) scale(var(--a3d-press));
  transform-style: preserve-3d;
  transition:
    transform 450ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 500ms ease-out;
}

:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--primary   { --a3d-from: #334155; --a3d-via: #1E293B; --a3d-to: #0F172A; }
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--secondary { --a3d-from: #2563EB; --a3d-via: #1D4ED8; --a3d-to: #1E40AF; }
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--accent    { --a3d-from: #9333EA; --a3d-via: #7E22CE; --a3d-to: #6B21A8; }
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--warning   { --a3d-from: #D97706; --a3d-via: #B45309; --a3d-to: #92400E; }
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--rose      { --a3d-from: #E11D48; --a3d-via: #BE123C; --a3d-to: #9F1239; }
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--success   { --a3d-from: #059669; --a3d-via: #047857; --a3d-to: #065F46; }
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--info      { --a3d-from: #0891B2; --a3d-via: #0E7490; --a3d-to: #155E75; }
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d--indigo    { --a3d-from: #4F46E5; --a3d-via: #4338CA; --a3d-to: #3730A3; }

:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card:active { --a3d-press: 0.98; }

:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card:focus-visible {
  outline: 3px solid var(--ap-accent, #0071E3);
  outline-offset: 3px;
}

/* ---- 겹겹이 쌓는 층 (아래에서 위 순서) ---- */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-bg,
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-deco,
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-shade,
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-shine,
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* 바탕 그라데이션 */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-bg {
  background: linear-gradient(to bottom right, var(--a3d-from), var(--a3d-via), var(--a3d-to));
  transition: transform 400ms ease;
}

/* 오른쪽 위 점무늬 + 왼쪽 아래 겹친 네모 (아주 옅게) */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-deco {
  overflow: hidden;
  opacity: 0.2;
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-dots {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 128px;
  height: 128px;
  background-image: radial-gradient(circle at 12.8px 12.8px, rgba(255, 255, 255, 0.09) 1.3px, transparent 1.6px);
  background-size: 25.6px 25.6px;
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-squares {
  position: absolute;
  bottom: -16px;
  left: -16px;
  width: 96px;
  height: 96px;
  opacity: 0.3;
  transition: transform 800ms ease;
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-squares::before,
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-squares::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-squares::before { inset: 19px; border-radius: 8px; }
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-squares::after { inset: 34px; border-width: 0.5px; border-radius: 4px; }

/* 살짝 어둡게 눌러 글자를 또렷하게 */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-shade {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%);
  opacity: 0.7;
  transition: opacity 300ms ease;
}

/* 마우스를 따라 지나가는 빛 */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-shine {
  overflow: hidden;
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-shine::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: linear-gradient(var(--a3d-shine), transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
}

/* 유리처럼 비치는 윗면 */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-gloss {
  z-index: 3;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0.7;
  transition: opacity 300ms ease;
}

/* ---- 글자와 아이콘 ---- */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: inherit;
  padding: 24px;
}

:root :is(#section-hero, #lib-folders) .a3d-card .a3d-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .hub-card-icon {
  width: 32px;
  height: 32px;
  margin: 0;
  color: #FFFFFF;
  opacity: 0.9;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
  transition: transform 300ms ease;
}
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .hub-card-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
}

/* 오른쪽 위 작은 점 (마우스를 올리면 숨 쉬듯 깜빡임) */
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-pulse {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  transition: transform 300ms ease;
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-pulse::before,
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-pulse::before {
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
:root :is(#section-hero, #lib-folders) .a3d-card .a3d-pulse::after {
  background: rgba(255, 255, 255, 0.7);
}

:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .hub-card-body {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  transition: transform 300ms ease;
}

:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .hub-card-body strong {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  transform-origin: left center;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
  transition: transform 300ms ease;
}

:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .hub-card-body > span:not(.a3d-cta) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.85;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
  transition: opacity 300ms ease;
}

/* '바로 보기' 안내: 마우스를 올리면 왼쪽에서 스르륵 */
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .a3d-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 300ms ease 100ms, transform 300ms ease 100ms;
}
:root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .a3d-cta::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

/* ---- 마우스를 올렸을 때 · 키보드로 골랐을 때 ---- */
@media (hover: hover) {
  :root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card:hover {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.2),
      0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-bg { transform: scale(1.02); }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-squares { transform: rotate(180deg); }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-shade { opacity: 0.5; }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-shine::before { opacity: 1; }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-gloss { opacity: 1; }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .hub-card-icon { transform: translateY(-2px) rotate(5deg); }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .hub-card-icon:hover { transform: translateY(-2px) rotate(5deg) scale(1.1); }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-pulse { transform: scale(1.2); }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-pulse::after { animation: a3d-pulse 1.5s ease-in-out infinite; }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .hub-card-body { transform: translateY(-3px); }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .hub-card-body strong { transform: scale(1.02); }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .hub-card-body > span:not(.a3d-cta) { opacity: 1; }
  :root :is(#section-hero, #lib-folders) .a3d-card:hover .a3d-cta { opacity: 1; transform: none; }
}

:root :is(#section-hero, #lib-folders) .a3d-card:focus-visible .a3d-shade { opacity: 0.5; }
:root :is(#section-hero, #lib-folders) .a3d-card:focus-visible .a3d-gloss { opacity: 1; }
:root :is(#section-hero, #lib-folders) .a3d-card:focus-visible .a3d-cta { opacity: 1; transform: none; }

/* 휴대폰·태블릿(마우스 없음): 누를 수 있다는 안내를 늘 보여 줍니다 */
@media (hover: none) {
  :root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .a3d-cta { opacity: 1; transform: none; }
}

@keyframes a3d-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 0.3; }
}

/* ---- 처음 화면에 보일 때 아래에서 떠오르기 ----
   a3d-pre 는 portal.html 의 카드 묶음 바로 뒤 짧은 스크립트가 붙이고,
   a3d-in 은 animated-3d-card.js 가 카드가 화면에 들어오면 붙입니다. */
:root :is(#section-hero, #lib-folders) .a3d-grid.a3d-pre .a3d-card {
  opacity: 0;
  translate: 0 40px;
  rotate: x -15deg;
  scale: 0.95;
}
:root :is(#section-hero, #lib-folders) .a3d-grid.a3d-pre.a3d-in .a3d-card {
  opacity: 1;
  translate: none;
  rotate: none;
  scale: none;
  transition:
    opacity 500ms ease-out var(--a3d-delay, 0s),
    translate 800ms cubic-bezier(0.34, 1.4, 0.64, 1) var(--a3d-delay, 0s),
    rotate 800ms cubic-bezier(0.34, 1.4, 0.64, 1) var(--a3d-delay, 0s),
    scale 800ms cubic-bezier(0.34, 1.4, 0.64, 1) var(--a3d-delay, 0s),
    transform 450ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 500ms ease-out;
}
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(1) { --a3d-delay: 0.2s; }
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(2) { --a3d-delay: 0.28s; }
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(3) { --a3d-delay: 0.36s; }
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(4) { --a3d-delay: 0.44s; }
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(5) { --a3d-delay: 0.52s; }
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(6) { --a3d-delay: 0.6s; }
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(7) { --a3d-delay: 0.68s; }
:root :is(#section-hero, #lib-folders) .a3d-grid .a3d-card:nth-child(8) { --a3d-delay: 0.76s; }

/* ---- 화면 크기별 ---- */
@media (max-width: 1068px) {
  :root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card { min-height: 224px; }
}

@media (max-width: 734px) {
  :root :is(#section-hero, #lib-folders) .quick-hub-grid.a3d-grid { gap: 14px; }
  :root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card {
    display: block;
    min-height: 184px;
    padding: 0;
  }
  :root :is(#section-hero, #lib-folders) .a3d-card .a3d-content { padding: 20px; }
  :root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .hub-card-body { gap: 8px; }
  :root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card .hub-card-body strong { font-size: 18px; }
}

/* ---- 움직임 줄이기 설정 ---- */
@media (prefers-reduced-motion: reduce) {
  :root :is(#section-hero, #lib-folders) .quick-hub-card.a3d-card { transform: none; transition: box-shadow 200ms ease; }
  :root :is(#section-hero, #lib-folders) .a3d-card .a3d-squares,
  :root :is(#section-hero, #lib-folders) .a3d-card .a3d-bg,
  :root :is(#section-hero, #lib-folders) .a3d-card .hub-card-icon,
  :root :is(#section-hero, #lib-folders) .a3d-card .hub-card-body,
  :root :is(#section-hero, #lib-folders) .a3d-card .hub-card-body strong { transition: none; transform: none !important; }
  :root :is(#section-hero, #lib-folders) .a3d-card .a3d-pulse::after { animation: none !important; }
}