/* 패스파인더 사이트 공용 모션
   7개 페이지가 함께 쓴다. 기존 레이아웃은 건드리지 않고 동작만 얹는다. */

/* ---------- 타이포 스케일 ----------
   Pretendard 는 같은 px 에서 Noto Sans KR 보다 작아 보인다.
   body 선택자로 특정도를 올려 Tailwind 유틸리티를 덮어쓴다. */
body { font-size: 17px; }

body .text-xs   { font-size: .8125rem; }                      /* 12 → 13 */
body .text-sm   { font-size: .9375rem; line-height: 1.66; }   /* 14 → 15 */
body .text-base { font-size: 1.0625rem; }                     /* 16 → 17 */
body .text-lg   { font-size: 1.1875rem; }                     /* 18 → 19 */
body .text-xl   { font-size: 1.3125rem; }                     /* 20 → 21 */
body .text-2xl  { font-size: 1.625rem; }                      /* 24 → 26 */

/* 3D 시뮬레이션 오버레이도 같이 키운다 */
.rv-lab { font-size: 12px; }
.rv-hud { font-size: 13px; }

/* ---------- 언어 전환 (KO / EN) ---------- */
/* 영어로 보는 사람에게 한국어가 먼저 번쩍이지 않도록, 번역이 끝날 때까지 가린다 */
html.pf-i18n-wait body { visibility: hidden; }

.pf-lang {
    display: inline-flex; align-items: center;
    border: 1px solid rgba(148, 163, 184, .45);
    border-radius: 999px; padding: 2px; margin-right: 4px;
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
}
.pf-lang-b {
    appearance: none; background: none; border: 0; cursor: pointer;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .06em;
    color: #64748b; line-height: 1;
    transition: background-color .2s ease, color .2s ease;
}
.pf-lang-b:hover { color: #2563eb; }
.pf-lang-b.on { background: #2563eb; color: #fff; }

/* 최상단에서 헤더가 투명할 때는 흰 글자로 */
header[data-top="1"]:not(.is-mega) .pf-lang { border-color: rgba(255, 255, 255, .4); }
header[data-top="1"]:not(.is-mega) .pf-lang-b { color: rgba(255, 255, 255, .8); }
header[data-top="1"]:not(.is-mega) .pf-lang-b:hover { color: #fff; }
header[data-top="1"]:not(.is-mega) .pf-lang-b.on { background: #fff; color: #0b0d12; }

/* ---------- 스크롤 진행 바 ---------- */
#site-progress {
    position: fixed; top: 0; left: 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, #2563EB, #7DA8FF);
    z-index: 60; pointer-events: none;
    transition: width .12s linear;
}

/* ---------- 헤더: 최상단에서는 투명, 스크롤하면 흰 바 ---------- */
header { transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
header .nav-link,
header img,
header .hamburger-line { transition: color .35s ease, filter .35s ease, background-color .35s ease; }

header[data-top="1"]:not(.is-mega) {
    background-color: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
header[data-top="1"] .nav-link { color: rgba(255,255,255,.78); }
header[data-top="1"] .nav-link:hover { color: #fff; }
header[data-top="1"]:not(.is-mega) .hamburger-line { background-color: #fff; }
header[data-top="1"]:not(.is-mega) .pf-logo img { filter: brightness(0) invert(1); }

/* ---------- 내비게이션 드롭다운 (도입사례) ---------- */
/* 기존 <a> 와 같은 박스가 되도록 flex 로 둔다 (밑줄 ::after 폭 유지) */
.nav-drop { position: relative; display: flex; }
/* 메뉴와 패널 사이 빈틈에서 호버가 끊기지 않도록 위쪽 여백을 패딩으로 잡는다 */
.nav-drop-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding-top: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-drop-inner {
    min-width: 268px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 24px 48px -18px rgba(15, 23, 42, .3);
    padding: 8px;
}
.nav-drop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #111827;
    transition: background-color .2s ease, color .2s ease;
}
.nav-drop-item:hover { background: #f4f7ff; color: #2563eb; }
.nav-drop-ico {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.nav-drop-t { font-size: 14px; font-weight: 800; line-height: 1.3; }
.nav-drop-d { font-size: 12px; font-weight: 500; color: #9aa3af; margin-top: 2px; letter-spacing: 0; }
.nav-drop-cap {
    font-size: 10px; font-weight: 800; color: #9aa3af;
    letter-spacing: .18em; padding: 8px 13px 5px;
}
/* 최상단에서 헤더가 투명할 때도 패널 글자는 어둡게 유지한다 */
header[data-top="1"] .nav-drop-item { color: #111827; }
header[data-top="1"] .nav-drop-item:hover { color: #2563eb; }

@media (prefers-reduced-motion: reduce) {
    .nav-drop-panel { transition: opacity .01s, visibility .01s; transform: translateX(-50%); }
    .nav-drop:hover .nav-drop-panel,
    .nav-drop:focus-within .nav-drop-panel { transform: translateX(-50%); }
}

/* ---------- 스크롤 리빌 ----------
   기존 .fade-up 의 이동량을 줄이고 감속 곡선을 바꾼다 */
.fade-up {
    transform: translateY(18px);
    transition: opacity .75s cubic-bezier(.22,.61,.36,1),
                transform .75s cubic-bezier(.22,.61,.36,1);
}
.fade-up.visible { transform: translateY(0); }

/* ---------- 히어로 로드 리빌 ---------- */
.hero-rise { opacity: 0; transform: translateY(24px); filter: blur(10px); }
.hero-rise.in {
    opacity: 1; transform: none; filter: blur(0);
    transition: opacity .95s cubic-bezier(.22,.61,.36,1) var(--d, 0s),
                transform .95s cubic-bezier(.22,.61,.36,1) var(--d, 0s),
                filter .95s cubic-bezier(.22,.61,.36,1) var(--d, 0s);
}

/* ---------- 제목: 단어 단위 등장 ---------- */
.split .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.44em);
    transition: opacity .62s cubic-bezier(.22,.61,.36,1),
                transform .62s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}
.split.in .w { opacity: 1; transform: none; }

/* ---------- 어두운 섹션 그레인 질감 ----------
   오버레이 대신 배경 블렌드를 쓴다. 의사요소를 얹으면
   히어로의 absolute 자식들과 쌓임 순서가 꼬인다. */
.grain {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    background-repeat: repeat;
    background-blend-mode: soft-light;
}

/* ---------- 버튼 화살표 ---------- */
a i.fa-arrow-right,
a i.fa-arrow-up-right-from-square { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
a:hover i.fa-arrow-right { transform: translateX(5px); }
a:hover i.fa-arrow-up-right-from-square { transform: translate(3px, -3px); }

/* ---------- 히어로 커서 글로우 ---------- */
.hero-glow {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    opacity: 0; transition: opacity .5s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
                rgba(59,130,246,.16), transparent 65%);
}
.hero-glow.on { opacity: 1; }

/* ---------- 밝은 카드 호버 ---------- */
section [class*="rounded-xl"][class*="border-gray-100"],
section [class*="rounded-xl"][class*="border-gray-200"],
section [class*="rounded-xl"][class*="border-blue-100"] {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                box-shadow .35s ease,
                border-color .35s ease;
}
section [class*="rounded-xl"][class*="border-gray-100"]:hover,
section [class*="rounded-xl"][class*="border-gray-200"]:hover,
section [class*="rounded-xl"][class*="border-blue-100"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px -24px rgba(15,23,42,.45);
    border-color: rgba(37,99,235,.35);
}

/* ---------- 어두운 카드 호버 ---------- */
section [class*="rounded-xl"][class*="border-white/10"] {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                background-color .35s ease, border-color .35s ease;
}
section [class*="rounded-xl"][class*="border-white/10"]:hover {
    transform: translateY(-4px);
    background-color: rgba(255,255,255,.07);
    border-color: rgba(96,165,250,.4);
}

/* ---------- 버튼 ---------- */
a[class*="rounded-full"] {
    transition: transform .25s cubic-bezier(.22,.61,.36,1),
                background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
a[class*="rounded-full"]:hover { transform: translateY(-2px); }

/* ---------- 섹션 상단 라벨 밑줄 ---------- */
.eyebrow-rule { display: inline-block; position: relative; padding-bottom: 10px; }
.eyebrow-rule::after {
    content: ''; position: absolute; left: 50%; bottom: 0;
    width: 0; height: 2px; background: currentColor; opacity: .5;
    transform: translateX(-50%);
    transition: width .8s cubic-bezier(.22,.61,.36,1) .15s;
}
.eyebrow-rule.visible::after { width: 34px; }

/* ---------- 모션 최소화 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
    #site-progress { display: none; }
    .grain { background-image: none; }
    .split .w, .split.in .w,
    .fade-up, .fade-up.visible,
    .hero-rise, .hero-rise.in,
    .eyebrow-rule::after {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
    .hero-glow { display: none; }
}