/* 합격 실적 · 수상 실적 — 다크 풀페이지.
   갤러리 · 시간표 · 성향테스트와 같은 결(수중 그라디언트 + 민트 포인트)로 맞춘다.
   수상 실적은 이 파일을 함께 쓰고 _award_result.css 에서 다른 곳만 덧칠한다 */

.pass-page {
    position: relative;
    min-height: 100vh;
    background: #0b1622;
    background-image: radial-gradient(1100px 620px at 10% 4%, rgba(0, 204, 198, .22), transparent 60%),
        radial-gradient(900px 700px at 92% 34%, rgba(6, 127, 255, .2), transparent 62%),
        linear-gradient(170deg, #0b1622 0%, #10263a 52%, #0b1622 100%);
    overflow: hidden;
}

.pass-page .inner-wrap {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 배경 물방울 — 잠수함 결을 옅게 남긴다 */
.pass-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pass-bubbles span {
    position: absolute;
    bottom: -140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
    animation: riseBubble 22s infinite ease-in;
}

.pass-bubbles span:nth-child(1) { width: 200px; height: 200px; left: 7%; animation-duration: 26s; }
.pass-bubbles span:nth-child(2) { width: 76px; height: 76px; left: 38%; animation-duration: 18s; animation-delay: 3s; }
.pass-bubbles span:nth-child(3) { width: 260px; height: 260px; left: 72%; animation-duration: 30s; animation-delay: 1s; }
.pass-bubbles span:nth-child(4) { width: 48px; height: 48px; left: 90%; animation-duration: 15s; animation-delay: 6s; }

@keyframes riseBubble {
    0% { transform: translateY(0) scale(.5); opacity: 0; }
    20% { opacity: .5; }
    80% { opacity: .5; transform: translateY(-80vh) scale(1) translateX(20px); }
    100% { transform: translateY(-100vh) scale(1.4) translateX(-20px); opacity: 0; }
}

/* 지나다니는 잠수함 — 히어로 오른쪽을 가로지른다.
   로고 두 벌뿐이라 크기·속도·방향·색조를 달리해 다른 잠수함처럼 보이게 한다 */
.pass-subs {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 660px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    /* 경계에서 각지게 잘려 사라지면 눈에 걸린다. 가장자리에서 서서히 지워지게 한다 */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to bottom, #000 0, #000 76%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to bottom, #000 0, #000 76%, transparent 100%);
    mask-composite: intersect;
}

.pass-subs .sub {
    position: absolute;
    display: block;
    right: -260px;
    opacity: 0;
    /* 잠수함마다 최대 농도를 달리해 깊이를 만든다 */
    --sub-alpha: .85;
    /* 여백을 둔 viewBox 라 실제 잠수함은 이보다 작게 보인다 */
    width: 150px;
    overflow: visible;
    /* 합성 레이어로 올려 두면 본문 스크롤과 따로 그려진다 */
    will-change: transform, opacity;
    contain: layout paint;
    animation-name: subSwim;
    /* 구간마다 속도를 직접 잡아 두었으므로 완급은 키프레임에 맡긴다 */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* 귀·프로펠러·눈도 변형만 쓴다. 레이아웃을 다시 계산할 일이 없다 */
.pass-subs .s-ear,
.pass-subs .s-prop,
.pass-subs .s-spin,
.pass-subs .s-lid { will-change: transform; }

/* 도형 정의만 담은 SVG 는 자리를 차지하면 안 된다 */
.jt-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.pass-subs .sub use,
.pass-subs .sub ellipse { fill: #fff; }

/* 민트 잠수함 — 브랜드 색 그대로 */
.pass-subs .sub-2 use,
.pass-subs .sub-2 ellipse,
.pass-subs .sub-4 use,
.pass-subs .sub-4 ellipse { fill: var(--point-mint); }

/* 귀 — 회전축을 머리 안쪽에 둬야 잘린 밑동이 머리에 가려진다.
   나아갈 때는 뒤로 눕고, 그 상태에서도 물살에 계속 찰랑댄다 */
.pass-subs .s-ear {
    transform-origin: 41px 23px;
    animation: earSwing 6s ease-in-out infinite;
}

@keyframes earSwing {
    /* 출발 — 귀가 뒤로 확 젖혀진다 */
    0% { transform: rotate(2deg); }
    6% { transform: rotate(24deg); }
    12% { transform: rotate(17deg); }
    18% { transform: rotate(22deg); }
    26% { transform: rotate(18deg); }
    34% { transform: rotate(23deg); }
    42% { transform: rotate(19deg); }
    /* 속도가 줄면 귀가 천천히 선다 */
    56% { transform: rotate(9deg); }
    64% { transform: rotate(-3deg); }
    70% { transform: rotate(4deg); }
    76% { transform: rotate(0deg); }
    82% { transform: rotate(3deg); }
    /* 다시 출발 */
    92% { transform: rotate(21deg); }
    100% { transform: rotate(2deg); }
}

/* 날개는 정지 상태로 그려진 모양이라 돌리지 않는다.
   힘을 줄 때 살짝 떨리기만 한다 */
.pass-subs .s-prop {
    transform-origin: 83.54px 55.19px;
    animation: propShake 6s ease-in-out infinite;
}

@keyframes propShake {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(4deg); }
    24% { transform: rotate(-3deg); }
    38% { transform: rotate(3deg); }
    /* 멈춰 있는 동안에는 떨지 않는다 */
    56%, 84% { transform: rotate(0deg); }
    92% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

/* 회전은 날개 위로 도는 원형 궤적이 대신한다.
   날개 뒤에 두면 가려서 보이지 않아 위로 올린다 */
.pass-subs .s-spin {
    transform-origin: 83.54px 55.19px;
    animation: spinTrail 6s linear infinite, trailFade 6s ease-in-out infinite;
}

.pass-subs .ring {
    fill: none;
    stroke: var(--point-yellow);
    stroke-linecap: round;
}

/* 둘레의 일부만 그려야 도는 게 보인다. 다 그리면 그냥 동그라미다 */
.pass-subs .ring-a {
    stroke-width: 2.6;
    stroke-dasharray: 30 77;
    opacity: .85;
}

.pass-subs .ring-b {
    stroke-width: 1.8;
    stroke-dasharray: 16 53;
    opacity: .6;
}

/* 전속 구간에서만 나타나는 흐릿한 원반 */
.pass-subs .ring-blur {
    fill: none;
    stroke: var(--point-yellow);
    stroke-width: 7;
    opacity: 0;
    animation: blurDisc 6s ease-in-out infinite;
}

@keyframes blurDisc {
    0%, 8% { opacity: 0; }
    18% { opacity: .18; }
    42% { opacity: .16; }
    50% { opacity: .07; }
    56%, 88% { opacity: 0; }
    96% { opacity: .18; }
    100% { opacity: .12; }
}

/* 프로펠러가 밀어낸 물방울 — 크기도 박자도 제각각이다 */
.pass-subs .s-bubbles {
    animation: trailFade 6s ease-in-out infinite;
}

.pass-subs .bub {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: .7;
    opacity: 0;
    animation: bubDrift 1.8s ease-out infinite;
}

/* 뒤로 흩어지며 커지다 사라진다 */
@keyframes bubDrift {
    0% { transform: translate(0, 0) scale(.4); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translate(34px, var(--bub-y, -6px)) scale(1.5); opacity: 0; }
}

.pass-subs .b1 { animation-duration: 1.6s; animation-delay: 0s; --bub-y: -9px; }
.pass-subs .b2 { animation-duration: 2.3s; animation-delay: .35s; --bub-y: 5px; }
.pass-subs .b3 { animation-duration: 1.2s; animation-delay: .7s; --bub-y: -14px; }
.pass-subs .b4 { animation-duration: 2s; animation-delay: 1.1s; --bub-y: 11px; }
.pass-subs .b5 { animation-duration: 2.7s; animation-delay: .5s; --bub-y: -3px; }
.pass-subs .b6 { animation-duration: 1.4s; animation-delay: 1.4s; --bub-y: -18px; }
.pass-subs .b7 { animation-duration: 1.9s; animation-delay: .9s; --bub-y: 16px; }

/* 회전량이 적으면 로딩 스피너처럼 느릿하게 보인다.
   전속 구간은 초당 대여섯 바퀴로 잡고, 멈출 때 급격히 떨어뜨린다 */
@keyframes spinTrail {
    0% { transform: rotate(0deg); }
    /* 전속 — 45바퀴 */
    42% { transform: rotate(16200deg); }
    /* 힘을 빼면 뚝 떨어진다 */
    50% { transform: rotate(18000deg); }
    56% { transform: rotate(18900deg); }
    64% { transform: rotate(19300deg); }
    70% { transform: rotate(19420deg); }
    /* 거의 멈춘 채 물살에만 밀린다 */
    84% { transform: rotate(19450deg); }
    /* 다시 붙는다 */
    92% { transform: rotate(21000deg); }
    100% { transform: rotate(25000deg); }
}

/* 나아갈 때만 보이고 멈추면 사라진다 */
@keyframes trailFade {
    0% { opacity: 0; }
    12% { opacity: 1; }
    42% { opacity: .95; }
    56% { opacity: .45; }
    64%, 86% { opacity: 0; }
    94% { opacity: 1; }
    100% { opacity: .4; }
}

/* 눈 — 평소엔 감춰 두고 깜빡일 때만 눈을 덮는다 */
.pass-subs .s-lid {
    transform-origin: 39.63px 30.68px;
    transform: scaleY(0);
    animation: eyeBlink 7s ease-in-out infinite;
}

@keyframes eyeBlink {
    0%, 41% { transform: scaleY(0); }
    43% { transform: scaleY(1); }
    45% { transform: scaleY(0); }
    /* 가끔 두 번 연속 */
    49% { transform: scaleY(1); }
    51%, 87% { transform: scaleY(0); }
    89% { transform: scaleY(1); }
    91%, 100% { transform: scaleY(0); }
}

/* 잠수함마다 박자가 같으면 기계처럼 보인다.
   귀·프로펠러는 주행과 맞물려야 하므로 주기를 함께 맞춘다 */
.pass-subs .sub-1 .s-ear,
.pass-subs .sub-1 .ring-blur,
.pass-subs .sub-1 .s-bubbles,
.pass-subs .sub-1 .s-spin,
.pass-subs .sub-1 .s-prop { animation-duration: 22s; }
.pass-subs .sub-2 .s-ear,
.pass-subs .sub-2 .ring-blur,
.pass-subs .sub-2 .s-bubbles,
.pass-subs .sub-2 .s-spin,
.pass-subs .sub-2 .s-prop { animation-duration: 17s; animation-delay: 4s; }
.pass-subs .sub-3 .s-ear,
.pass-subs .sub-3 .ring-blur,
.pass-subs .sub-3 .s-bubbles,
.pass-subs .sub-3 .s-spin,
.pass-subs .sub-3 .s-prop { animation-duration: 28s; animation-delay: 9s; }
.pass-subs .sub-4 .s-ear,
.pass-subs .sub-4 .ring-blur,
.pass-subs .sub-4 .s-bubbles,
.pass-subs .sub-4 .s-spin,
.pass-subs .sub-4 .s-prop { animation-duration: 15s; animation-delay: 13s; }
.pass-subs .sub-5 .s-ear,
.pass-subs .sub-5 .ring-blur,
.pass-subs .sub-5 .s-bubbles,
.pass-subs .sub-5 .s-spin,
.pass-subs .sub-5 .s-prop { animation-duration: 24s; animation-delay: 6s; }

.pass-subs .sub-2 .s-lid { animation-duration: 5.5s; }
.pass-subs .sub-3 .s-lid { animation-duration: 9s; animation-delay: 2s; }
.pass-subs .sub-4 .s-lid { animation-duration: 6.2s; animation-delay: 1s; }
.pass-subs .sub-5 .s-lid { animation-duration: 8s; animation-delay: 3s; }

/* 오른쪽에서 들어와 왼쪽으로 빠지며, 멀어졌다 가까워지듯 크기가 흔들린다 */
/* 일정한 속도로 흐르면 배경 무늬처럼 보인다.
   가다 서다 해야 프로펠러가 멎고 귀가 서는 연출이 읽힌다.
   구간별 시간 배분은 귀·프로펠러 키프레임과 맞춰 놓았다 */
@keyframes subSwim {
    0% { transform: translate3d(0, 0, 0) scale(.55) rotate(-4deg); opacity: 0; }
    14% { opacity: var(--sub-alpha); }
    /* 힘껏 나아가는 구간 */
    42% { transform: translate3d(-44vw, 26px, 0) scale(1.05) rotate(2deg); }
    /* 속도를 줄이며 미끄러진다 */
    56% { transform: translate3d(-56vw, 6px, 0) scale(.95) rotate(-1deg); }
    64% { transform: translate3d(-59vw, -2px, 0) scale(.92) rotate(0deg); }
    /* 잠깐 멈춰 물살에 떠 있다 */
    70% { transform: translate3d(-60vw, -8px, 0) scale(.9) rotate(1deg); }
    82% { transform: translate3d(-61vw, -14px, 0) scale(.88) rotate(-1deg); opacity: var(--sub-alpha); }
    /* 다시 출발 — 화면 끝에 닿기 전에 다 지워진다 */
    92% { transform: translate3d(-76vw, -6px, 0) scale(.7) rotate(-2deg); opacity: 0; }
    100% { transform: translate3d(-92vw, 8px, 0) scale(.5) rotate(1deg); opacity: 0; }
}

/* 왼쪽에서 들어오는 잠수함은 좌우를 뒤집는다 */
@keyframes subSwimBack {
    0% { transform: translate3d(-88vw, 0, 0) scaleX(-1) scale(.5) rotate(3deg); opacity: 0; }
    16% { opacity: var(--sub-alpha); }
    45% { transform: translate3d(-48vw, -30px, 0) scaleX(-1) scale(.95) rotate(-2deg); }
    72% { transform: translate3d(-16vw, 14px, 0) scaleX(-1) scale(.7) rotate(2deg); opacity: var(--sub-alpha); }
    86% { opacity: 0; }
    100% { transform: translate3d(-2vw, 0, 0) scaleX(-1) scale(.5) rotate(0deg); opacity: 0; }
}

/* 색은 브랜드 로고 두 벌(흰색·민트) 그대로만 쓴다.
   색조를 틀면 브랜드 색이 아닌 색이 나온다. 크기·속도·깊이로만 구분한다 */
/* 여백만큼 커진 만큼 폭을 키워 잡아 실제 크기를 맞춘다 */
.pass-subs .sub-1 { top: 8%; width: 208px; animation-duration: 22s; animation-delay: 0s; }
.pass-subs .sub-2 { top: 38%; width: 118px; animation-duration: 17s; animation-delay: 4s; }
.pass-subs .sub-3 { top: 62%; width: 264px; animation-duration: 28s; animation-delay: 9s; }
.pass-subs .sub-4 { top: 22%; width: 90px; animation-duration: 15s; animation-delay: 13s; }
.pass-subs .sub-5 { top: 52%; width: 154px; animation-duration: 24s; animation-delay: 6s; animation-name: subSwimBack; }

/* 멀리 있는 잠수함은 옅게 — 깊이를 색이 아니라 농도로 만든다 */
.pass-subs .sub-2,
.pass-subs .sub-4 { opacity: 0; --sub-alpha: .45; }
.pass-subs .sub-3 { --sub-alpha: .55; }

/* 히어로가 화면 밖으로 나가면 멈춘다. 보이지도 않는 그림에 CPU 를 쓸 이유가 없다 */
.pass-subs.is-paused .sub,
.pass-subs.is-paused .s-ear,
.pass-subs.is-paused .s-prop,
.pass-subs.is-paused .s-spin,
.pass-subs.is-paused .s-bubbles,
.pass-subs.is-paused .ring-blur,
.pass-subs.is-paused .bub,
.pass-subs.is-paused .s-lid { animation-play-state: paused; }

/* 움직임을 줄이라고 설정한 사람에게는 흘려보내지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .pass-subs { display: none; }
}

/* 히어로 */
.pass-hero {
    position: relative;
    z-index: 2;
    padding: 190px 0 60px;
}

.pass-hero .sub-title-en {
    display: inline-block;
    margin-bottom: 20px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

.pass-hero .main-title {
    margin: 0;
    max-width: 900px;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.035em;
    color: #fff;
    word-break: keep-all;
}

.pass-hero .main-title span { color: var(--point-mint); }

.pass-hero-desc {
    margin: 22px 0 0;
    max-width: 760px;
    font-size: 1.06rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6);
    word-break: keep-all;
}

/* 대학별 인원 요약 — 잘라 내지 않고 전부 건다 */
.pass-summary { padding: 30px 0 10px; }

.pass-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* 대학별 · 학과별 전환 */
.pass-summary-switch {
    display: inline-flex;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
}

.pass-summary-switch .sw-btn {
    padding: 7px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.pass-summary-switch .sw-btn:hover { color: #fff; }

.pass-summary-switch .sw-btn.active {
    background: var(--point-mint);
    color: #05221f;
}

.pass-summary-title {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.pass-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pass-summary-grid[hidden] { display: none; }

.pass-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .2s, background .2s;
}

.pass-summary-item:hover {
    border-color: rgba(0, 204, 198, .5);
    background: rgba(0, 204, 198, .1);
}

.pass-summary-item .count {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--point-mint);
}

.pass-summary-item .uni {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
    word-break: keep-all;
}

/* 연도 탭 — 스크롤을 내려도 따라온다 */
.pass-tabs {
    position: sticky;
    top: 76px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 44px 0 34px;
    padding: 10px 0;
}

/* 배경 띠를 깔면 검은 바가 가로로 그어져 보인다.
   흐림은 알약 하나하나에만 걸어 카드가 뒤로 지나가도 글자가 읽히게 한다 */
.pass-tabs .tab-btn {
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(11, 22, 34, .7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, .62);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

.pass-tabs .tab-btn:hover { border-color: var(--point-mint); color: #fff; }

.pass-tabs .tab-btn.active {
    background: var(--point-mint);
    border-color: var(--point-mint);
    color: #05221f;
}

.pass-section { padding: 0 0 120px; }

/* 카드 격자 — 인스타에 올리던 합격 카드 형식을 그대로 옮긴다. 한 줄에 넉 장 */
.pass-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.pass-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 22px 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    text-align: center;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.pass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 204, 198, .45);
    background: rgba(255, 255, 255, .08);
}

/* 로고 — 원본 카드처럼 맨 위 가운데 */
.pass-card-logo {
    width: 56px;
    height: 40px;
    background-image: var(--logo);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .95;
}

/* 로고 아래 가로줄 */
.pass-card-year {
    position: relative;
    margin-top: 18px;
    padding-top: 18px;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--point-mint);
}

.pass-card-year::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 1px;
    background: rgba(255, 255, 255, .18);
}

.pass-card-year .apos {
    font-size: 1.3rem;
    vertical-align: super;
}

/* 대학명 — 원본의 「」 표기를 그대로 살린다 */
.pass-card-uni {
    margin: 12px 0 0;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: #fff;
    word-break: keep-all;
}

.pass-card-uni::before { content: '「'; color: var(--point-mint); }
.pass-card-uni::after  { content: '」'; color: var(--point-mint); }

.pass-card-dept {
    margin: 8px 0 0;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    word-break: keep-all;
}

.pass-card-note {
    display: inline-flex;
    margin: 10px 0 0;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 194, 0, .16);
    font-size: .78rem;
    font-weight: 700;
    color: var(--point-yellow);
}

.pass-card-who {
    margin: 10px 0 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .45);
    word-break: keep-all;
}

.pass-card-congrats {
    margin: 16px 0 20px;
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .82);
}

.pass-card-type {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(6, 127, 255, .22);
    font-size: .72rem;
    font-weight: 700;
    color: #8ec8ff;
}

/* 아래 띠 — 배지가 있고 없고에 상관없이 카드 맨 밑에 붙는다 */
.pass-card-foot {
    width: calc(100% + 44px);
    margin: auto -22px 0;
    padding: 13px 10px;
    background: var(--point-mint);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #05221f;
}

.pass-card-foot strong { font-weight: 900; }

/* 더보기 */
.pass-more {
    display: flex;
    justify-content: center;
    margin-top: 46px;
}

/* display 를 지정해 두면 hidden 속성이 먹지 않는다. 다 불러오면 버튼째 감춘다 */
.pass-more[hidden] { display: none; }

.pass-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 44px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.pass-more-btn:hover {
    border-color: var(--point-mint);
    background: var(--point-mint);
    color: #05221f;
}

.pass-more-count {
    font-style: normal;
    font-size: .85rem;
    font-weight: 800;
    color: var(--point-mint);
}

.pass-more-btn:hover .pass-more-count { color: #05221f; }

.pass-empty,
.pass-empty-filter {
    padding: 80px 0;
    text-align: center;
    color: rgba(255, 255, 255, .45);
}

@media (max-width: 1280px) {
    .pass-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .pass-page .inner-wrap { padding: 0 24px; }
    .pass-hero { padding: 160px 0 40px; }
}

@media (max-width: 860px) {
    .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .pass-page .inner-wrap { padding: 0 16px; }
    .pass-hero { padding: 140px 0 30px; }
    /* 인스타 카드 결이라 둘씩 놓아도 읽힌다. 한 장씩이면 스크롤만 길어진다 */
    .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pass-card { padding: 22px 14px 0; }
    .pass-card-year { font-size: 1.7rem; }
    .pass-card-uni { font-size: 1rem; }
    .pass-card-dept { font-size: .85rem; }
    .pass-card-foot { width: calc(100% + 28px); margin: auto -14px 0; font-size: .72rem; }
    .pass-tabs { top: 66px; margin: 30px 0 24px; gap: 6px; }
    .pass-tabs .tab-btn { padding: 9px 18px; font-size: .9rem; }
    .pass-summary-item { padding: 8px 12px; }
    /* 좁은 화면에서는 강제 줄바꿈이 오히려 어긋난다 */
    .pass-hero-desc { font-size: .96rem; }
    .pass-hero-desc br { display: none; }
    /* 좁은 화면에서는 글자와 겹친다. 큰 것 하나만 남긴다 */
    .pass-subs { width: 100%; height: 420px; opacity: .35; }
    .pass-subs .sub-2,
    .pass-subs .sub-4,
    .pass-subs .sub-5 { display: none; }
    .pass-card { padding: 22px 20px 20px; }
    .pass-card-uni { font-size: 1.25rem; }
}


/* 접어 둔 나머지 대학을 여닫는 자리.
   button 은 기본 글꼴·줄높이·수직정렬이 달라 옆 칸보다 글씨가 떠 보인다.
   같은 알약으로 보이도록 값을 맞춰 준다 */
.pass-more-uni {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
    border: 1px dashed rgba(0, 204, 198, .5);
    background: rgba(0, 204, 198, .08);
    cursor: pointer;
}

.pass-more-uni:hover { background: rgba(0, 204, 198, .18); }

/* display 를 명시한 요소는 hidden 속성만으로 숨겨지지 않는다.
   접어 둔 대학이 그대로 다 보이던 원인이다 */
.pass-summary-item[hidden] { display: none !important; }