/* 2026-10-22 이식 보정 — 옛 CSS(common · responsive) 뒤에 읽는다. */

/* 포트폴리오 커버: 옛 Vimeo Pro 직접 파일 주소가 만료돼, 공개 작품 영상 하나를 Vimeo 배경 재생(iframe)으로 깐다. 조작 없이 배경으로만. */
.cover .video iframe {
    pointer-events: none;
}

/* 작품 모달이 열리면 커버를 감춘다(옛 modal.js 의 cover 투명도 애니메이션). 상태 전환이며 호버 효과가 아니다. */
.cover {
    transition: opacity .4s;
}

.is-work-open .cover {
    opacity: 0;
}

/* 작품 모달 = <dialog class="window">. 옛 .window 규칙(고정 · 어두운 배경 · .is_open 투명도)을 그대로 쓰고 브라우저 기본 dialog 모양만 지운다. */
dialog.window {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    color: inherit;
}

dialog.window::backdrop {
    background: transparent;
}

html:has(#work-dialog[open]) {
    overflow: hidden;
}

/* 모달이 배경 스크롤을 막을 때 스크롤 막대 자리가 사라져 뒤 화면이 밀리지 않게. */
html {
    scrollbar-gutter: stable;
}

/* 카드 사진은 브라우저 기본 지연 로딩 + 받아지면 서서히(옛 lozad). 스크립트가 없으면 처음부터 보인다. */
@media (scripting: enabled) {
    .thumbnail-inside-bg[data-fade] {
        opacity: 0;
        transition: opacity 1s;
    }

    .thumbnail-inside-bg[data-fade].is-loaded {
        opacity: 1;
    }
}

@media (scripting: none) {
    .modal-contents img {
        opacity: 1;
    }
}

/* 한글 버튼(모달의 목록으로 돌아가기): 옛 .button 의 자간 · 작은 글씨를 한글 규칙(자간 조정 없음 · 14px 이상)으로. */
.modal-bottom .button {
    letter-spacing: normal;
    text-indent: 0;
    font-size: 1.4rem;
}

/* 카드 제목: 옛 테마는 영문 대문자 제목에 맞춰 자간 0.4em 을 준다. 한글이 든 제목은 자간을 두지 않는다(aap_card_html 의 is-hangul). */
.thumbnail-inside h2.is-hangul {
    letter-spacing: normal;
}