/*
 * app.css - 전역 스타일시트
 * 앱 전체에서 공통으로 사용되는 디자인 토큰(CSS 변수), 기본 타이포그래피,
 * Blazor 프레임워크 UI, 네비게이션 메뉴 등의 스타일을 정의한다.
 * 색상 변수는 MainLayout에서 AppColors로부터 동적 주입된다.
 */

/* ===== 디자인 토큰 (CSS Custom Properties) ===== */
/* 색상은 MainLayout의 inline style에서 주입됨. 여기선 폴백값만 정의. */
:root {
    /* 배경 색상 (AppColors에서 주입) */
    --color-bg: var(--bg, #333333);
    --color-nav-bg: var(--nav-bg, #343a40);
    --color-setting-panel: var(--setting-panel, #313131);

    /* SVG 애니메이션에 사용되는 강조 색상 (AppColors에서 주입) */
    /* --color-pink, --color-pink-dark, --color-sky는 MainLayout에서 직접 주입 */

    /* 공통 유틸리티 색상 (AppColors에서 주입) */
    --color-border: var(--border, #cccccc);
    --color-white: #ffffff;

    /* 크기 토큰 */
    --grid-size: 52px;                /* Home 그리드 셀 크기 */
    --svg-size: 50px;                 /* Home 그리드 내 SVG 아이콘 크기 */
    --nav-width: 250px;               /* 사이드 네비게이션 메뉴 너비 */

    /* 모서리 둥글기 (border-radius) */
    --radius-sm: 5px;                 /* 작은 요소 (버튼, 입력 필드) */
    --radius-md: 10px;                /* 중간 요소 (카드, 패널) */
    --radius-lg: 20px;                /* 큰 요소 (프리뷰 컨테이너) */
    --radius-circle: 50%;             /* 원형 (설정 버튼) */

    /* 그림자 (box-shadow) */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.2);   /* 가벼운 그림자 (버튼) */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);   /* 중간 그림자 (카드) */
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);   /* 강한 그림자 (모달) */

    /* 트랜지션 지속 시간 */
    --transition-fast: 0.2s;          /* 빠른 전환 (호버, 스케일) */
    --transition-normal: 0.3s;        /* 일반 전환 (메뉴 슬라이드) */
}

/* ===== 기본 리셋/타이포그래피 ===== */
/* 앱 전체의 기본 폰트와 배경색 설정 */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;            /* 스크롤바 제거 - 풀스크린 앱 */
    /* Safe Area는 JavaScript로 동적 적용 */
}

body {
    background-color: var(--color-bg);
}

/* 링크 기본 색상 (AppColors.LinkColor) */
a, .btn-link {
    color: var(--link-color, #006bb7);
}

/* Bootstrap 스타일 오버라이드 - 주요 버튼 (프레임워크 고유) */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* 포커스 링 스타일 - 키보드 접근성을 위한 포커스 표시 (프레임워크 고유) */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

/* 폼 유효성 검사 시각적 피드백 (AppColors에서 주입) */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--valid-color, #26b050);
}

.invalid {
    outline: 1px solid var(--invalid-color, #e50000);
}

.validation-message {
    color: var(--invalid-color, #e50000);
}

/* ===== Blazor 프레임워크 에러 UI (프레임워크 고유 - 변경 불필요) ===== */
/* Blazor 런타임 에러 발생 시 화면 하단에 표시되는 알림 바 */
#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 에러 바운더리 - 컴포넌트 렌더링 에러 시 표시되는 빨간 배너 */
.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."
    }

/* ===== Status bar (iOS 안전 영역) ===== */
/* iOS 디바이스의 노치/다이나믹 아일랜드 영역을 피하기 위한 상단 여백 */
.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);  /* iOS 안전 영역 높이 */
        background-color: var(--top-row-bg, #f7f7f7);
        width: 100%;
        z-index: 1;
    }

    /* iOS 안전 영역만큼 좌측 여백 확보 */
    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
}



/* ─── 렌더 페이지 SVG 콘텐츠 OS 롱프레스 차단 (CSS isolation 우회) ──────────────
 * MarkupString으로 렌더링된 SVG는 Blazor 스코프 어트리뷰트가 없어 scoped CSS 미적용.
 * user-select/touch-callout을 전역으로 설정해 OS 내장 500ms 롱프레스 타이머(컨텍스트 메뉴)를
 * 차단한다 — 이 메뉴가 pointercancel을 발사하여 JS 롱프레스 감지를 방해하는 것을 방지.
 * 참조: Render.razor.css .render-container, App.razor fbInitLongPress */
.render-content svg {
    width: min(90vw, 90dvh);
    height: min(90vw, 90dvh);
    max-width: 90%;
    max-height: 90%;
}

.render-fit-short-axis .render-content svg,
.render-content.render-fit-short-axis svg {
    width: min(90vw, 90dvh);
    height: min(90vw, 90dvh);
}

.render-fit-long-axis .render-content svg,
.render-content.render-fit-long-axis svg {
    width: max(90vw, 90dvh);
    height: max(90vw, 90dvh);
    max-width: none;
    max-height: none;
}

.render-content svg,
.render-content svg * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* ─── 렌더 진입 로딩 오버레이 (CSS isolation 우회) ──────────────────────────
 * Render.razor.css에서 ::deep이 작동하지 않으므로 글로벌 CSS에 정의.
 * Render.razor의 .render-loading 내부 SVG 로고·원·텍스트 애니메이션을 제공.
 * 참조: Render.razor.cs의 _isLoading, _loadingFadeOut 필드. */
.render-loading-logo {
    width: min(30vw, 30vh);
    height: min(30vw, 30vh);
}

.render-loading-circle {
    fill: none;
    stroke: #ffffff;
    stroke-width: 8;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    animation: rl-draw-circle 1.5s ease-in-out forwards;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

.render-loading-text {
    fill: #ffffff;
    font-size: 20px;
    font-weight: bold;
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}

@keyframes rl-draw-circle {
    to { stroke-dashoffset: 0; }
}

@keyframes rl-fade-in-text {
    to { opacity: 1; }
}


/* 일시정지 버튼: 플레이 아이콘(재개 상태)일 때 amber 강조 */
button.pause-btn:has(path[d="M8 5v14l11-7z"]) {
    background: rgba(255, 160, 0, 0.9) !important;
    box-shadow: 0 0 12px rgba(255, 160, 0, 0.8) !important;
}

/* sub-* 공통 레이아웃은 _content/FocusBooksFrontShare/css/shared.css 참조 */