/* 미술 성향 테스트 페이지 — 좌우 분할 풀페이지.
   왼쪽 소개는 스크롤을 따라 붙고, 오른쪽 테스트만 흐른다 */

.arttest-page {
    position: relative;
    min-height: 100vh;
    padding: 0 0 100px;
    background: #0d1b2a;
    background-image: radial-gradient(1200px 600px at 12% 6%, rgba(0, 204, 198, .22), transparent 60%),
        radial-gradient(900px 700px at 88% 40%, rgba(38, 119, 227, .22), transparent 62%),
        linear-gradient(160deg, #0b1622 0%, #10263a 55%, #0b1622 100%);
    overflow: hidden;
}

.arttest-page .underwater-environment {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.arttest-page .bubble {
    position: absolute;
    bottom: -120px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    animation: riseBubble 16s infinite ease-in;
}

/* riseBubble 은 다른 페이지 CSS 에 있고 그 파일들은 이 페이지에서 안 실린다 */
@keyframes riseBubble {
    0% { transform: translateY(0) scale(.5); opacity: 0; }
    20% { opacity: .4; }
    80% { opacity: .4; transform: translateY(-80vh) scale(1) translateX(20px); }
    100% { transform: translateY(-100vh) scale(1.5) translateX(-20px); opacity: 0; }
}

.arttest-page .bubble-1 { width: 180px; height: 180px; left: 6%; animation-duration: 22s; }
.arttest-page .bubble-2 { width: 70px; height: 70px; left: 34%; animation-duration: 17s; animation-delay: 3s; }
.arttest-page .bubble-3 { width: 240px; height: 240px; left: 68%; animation-duration: 26s; animation-delay: 1s; }
.arttest-page .bubble-4 { width: 44px; height: 44px; left: 88%; animation-duration: 14s; animation-delay: 6s; }

.arttest-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
    gap: 70px;
    align-items: start;
    max-width: 1360px;
    margin: 0 auto;
    padding: 170px 40px 0;
}

/* 왼쪽 소개 — 오른쪽이 길어져도 눈높이에 머문다 */
.arttest-aside {
    position: sticky;
    top: 140px;
    color: #fff;
}

.arttest-aside-inner { max-width: 520px; }

.arttest-aside .sub-title-en {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.arttest-aside .main-title {
    margin: 0;
    font-size: clamp(2.6rem, 4.4vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.arttest-aside .hero-desc {
    margin: 22px 0 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
    word-break: keep-all;
}

.arttest-aside-list {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.arttest-aside-list li {
    position: relative;
    padding-left: 26px;
    font-size: .98rem;
    color: rgba(255, 255, 255, .82);
    word-break: keep-all;
}

/* 체크 표시는 도형으로 그린다 */
.arttest-aside-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .45em;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--point-mint);
    border-bottom: 2px solid var(--point-mint);
    transform: rotate(-45deg);
}

/* 누적 참여 · 상담 신청 */
.arttest-stats {
    display: flex;
    gap: 40px;
    margin: 34px 0 0;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.arttest-stat { display: flex; flex-direction: column; gap: 4px; }

.arttest-stat strong {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #fff;
}

.arttest-stat span { font-size: .85rem; color: rgba(255, 255, 255, .55); }

/* 최근 결과 */
.arttest-recent { margin-top: 26px; }

.arttest-recent-title {
    display: block;
    margin-bottom: 10px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.arttest-recent ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.arttest-recent li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .7);
}

.arttest-recent em {
    flex: 0 0 auto;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .38);
}

.arttest-recent b { font-weight: 700; color: #fff; }

.arttest-recent i {
    font-style: normal;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .76rem;
    color: rgba(255, 255, 255, .6);
}

.arttest-aside-note {
    margin: 30px 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .45);
}

/* 오른쪽 테스트 카드 */
.arttest-main { position: relative; }

.arttest-page .arttest {
    max-width: none;
    margin: 0;
    padding: 46px 42px 52px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
}

/* 소개 문구가 왼쪽에 이미 있으므로 카드 안에서는 영문 표기를 감춘다 */
.arttest-page .at-intro .at-eyebrow { display: none; }

.arttest-off {
    padding: 120px 20px;
    text-align: center;
    color: rgba(255, 255, 255, .6);
}

/* 태블릿 이하에서는 위아래로 쌓는다 */
@media (max-width: 1080px) {
    .arttest-split {
        grid-template-columns: 1fr;
        gap: 44px;
        max-width: 720px;
        padding: 150px 24px 0;
    }

    .arttest-aside { position: static; }
    .arttest-aside-inner { max-width: none; }
    .arttest-aside .main-title br { display: none; }
}

@media (max-width: 640px) {
    .arttest-split { padding: 130px 16px 0; gap: 34px; }
    .arttest-aside .hero-desc { font-size: .98rem; }
    .arttest-aside-list { gap: 10px; }

    .arttest-page .arttest {
        padding: 32px 20px 44px;
        border-radius: 22px;
    }
}