h1:focus {
    outline: none;
}

/* '직접 입력' 인풋 — 우측 화살표(목록 복귀) 공간 확보 (VisitPro 패턴) */
.cus-etc-input input { padding-right: 3rem; }

/* 마우스(PC)에서만 보이는 요소 — 캐러셀 좌우 화살표 등. 터치 기기는 숨김(스와이프로). */
.pc-only { display: none; }
@media (hover: hover) and (pointer: fine) {
    .pc-only { display: flex; }
}

/* 바텀시트(댓글) — 밑에서 위로 슬라이드 + 배경 페이드 */
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-up { animation: sheetUp .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
.sheet-backdrop { animation: sheetFade .2s ease; }

/* 댓글 오버레이 — visualViewport(키보드 위 보이는 영역)에 딱 맞춤.
   키보드가 뜨면 --vvh가 줄고 --vvtop이 생겨, 오버레이가 키보드 위 영역만 덮음.
   그 안에서 items-end로 하단 정렬 → 시트(헤더+목록+입력) 전체가 통째로 키보드 위에 올라앉음(카톡식).
   변수가 없으면(=visualViewport 미지원/키보드 없음) 전체 화면. PC는 키보드가 없어 그대로. */
.comment-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vvtop, 0px);
    height: var(--vvh, 100dvh);
}
.comment-sheet { height: 60dvh; max-height: 100%; transition: height .2s ease; }
/* 키보드가 실제로 떠 있을 때만(=kb-open) 시트가 보이는 영역을 꽉 채움(카톡식, 헤더가 맨 위로).
   키보드 내려가면 kb-open이 풀려 자동으로 60dvh로 줄어듦(뒤로가기 1번). PC는 키보드가 없어 그대로. */
html.kb-open .comment-sheet { height: 100%; }

/* 스크롤바 전부 숨김 (스크롤 기능은 유지) — Firefox / 구형Edge / WebKit(Chrome·Safari·Edge) */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* 미디어 로딩 자리 — 정적 회색(번쩍임 없음). 이미지는 완전히 로드되면 위에서 한 번에 fade-in(아래 .cus-fade) */
.cus-skel { background-color: var(--color-subtle, #f4f5f6); }
/* 이미지/포스터 — 로드 완료 전엔 숨김(그려지는 과정 안 보임), onload 시 opacity:1 로 부드럽게 등장 */
.cus-fade { opacity: 0; transition: opacity .35s ease; }